b5b41da183
* storybook v2 init * Merge config into storybook vite build * Remove path * Storybook config tweaks * Added styles and settings for storybook v2, and started working on button documentation and examples. * Badges + flex wrap on mobile * Breadcrumbs+button+avatar * Checkbox * Input + moving files around * WIP table * WIP table grid * Replaced imports for new components. * Added first steps for varianttable. * Small alignment fix. * Custom Args Table - With scrollbar * Adding table to components that need it + darkmode * Add intro * Fix types * Remove V1 storybook and replace with V2 * Fix badge type error * Fixed storybook dependencies * Added cover image to storybook * Remove vita from ts config, we dont use vite. * Fixed button import. * Explained postcss pseudo plugin. * Fixed badge import. * Add Avatar Stories * ButtonGroup Stories * Fixed imports * Add checkbox stories * Add exports for differnt types of inputs * Fix form and text area input * Fix mass import errors Co-authored-by: Jeroen Reumkens <hello@jeroenreumkens.nl> Co-authored-by: Alex van Andel <me@alexvanandel.com>
37 lines
1.1 KiB
TypeScript
37 lines
1.1 KiB
TypeScript
import * as RadioGroup from "@radix-ui/react-radio-group";
|
|
import React from "react";
|
|
|
|
import { Label } from "../../components/form";
|
|
|
|
type SegmentProps = {
|
|
label: string;
|
|
children: React.ReactNode;
|
|
} & RadioGroup.RadioGroupProps;
|
|
|
|
export function Segment({ label, children, ...rest }: SegmentProps) {
|
|
return (
|
|
<div>
|
|
<div className="inline-flex flex-col">
|
|
{label && <Label>{label}</Label>}
|
|
<RadioGroup.Root
|
|
className="flex space-x-1 rounded-md border-gray-200 bg-white p-[2px] text-sm font-medium leading-5 "
|
|
{...rest}>
|
|
{children}
|
|
</RadioGroup.Root>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
type SegmentOptionProps = { value: string; children: React.ReactNode } & RadioGroup.RadioGroupItemProps;
|
|
export function SegmentOption({ value, children, ...rest }: SegmentOptionProps) {
|
|
return (
|
|
<RadioGroup.Item
|
|
value={value}
|
|
className="radix-disabled:opacity-40 radix-state-checked:bg-gray-200 radix-state-checked:hover:bg-gray-200 rounded-[4px] py-[6px] px-3 hover:bg-gray-100"
|
|
{...rest}>
|
|
{children}
|
|
</RadioGroup.Item>
|
|
);
|
|
}
|