@a-type/ui 1.0.11 → 1.0.13

package/src/components/button/classes.tsx

@@ -18,7 +18,7 @@ export function getButtonClassName({
 		'layer-components:focus:outline-off',
 		'layer-components:focus-visible:(outline-off ring-6 ring-[var(--focus,var(--hover))])',
 		'layer-components:active:(bg-[var(--active)] ring-8 ring-[var(--active)])',
-		'important:disabled:(opacity-50 cursor-default bg-[var(--bg)] shadow-none)',
+		'important:disabled:(opacity-50 cursor-default bg-[var(--bg)] shadow-none ring-none)',
 		'important:[&[data-disabled=true]]:(opacity-50 cursor-default bg-[var(--bg)] shadow-none)',
 		colors[color ?? 'default'],
 		`btn-color-${color ?? 'default'}`,
@@ -34,11 +34,11 @@ export function getButtonClassName({
 }
 
 const colors = {
-	primary: `layer-variants:[&.btn-color-primary]:([--bg:var(--color-primary-light)] [--hover:var(--color-primary)] [--focus:var(--color-primary)] [--active:var(--color-primary)] shadow-sm color-black border-black focus-visible:([--bg:var(--color-primary)]))`,
-	accent: `layer-variants:[&.btn-color-accent]:([--bg:var(--color-accent-wash)] [--hover:var(--color-accent-light)] [--focus:var(--color-accent-light)] [--active:var(--color-accent-light)] shadow-sm color-black border-black focus-visible:([--bg:var(--color-accent-light)]))`,
-	default: `layer-variants:[&.btn-color-default]:([--bg:var(--color-white)] [--hover:var(--color-gray-3)] [--focus:var(--color-white)] [--active:var(--color-gray-4)] shadow-sm color-black border-black)`,
+	primary: `layer-variants:[&.btn-color-primary]:([--bg:var(--color-primary-light)] [--hover:var(--color-primary)] [--focus:var(--color-primary)] [--active:var(--color-primary)] shadow-sm color-black border-primary-dark focus-visible:([--bg:var(--color-primary)]))`,
+	accent: `layer-variants:[&.btn-color-accent]:([--bg:var(--color-accent-wash)] [--hover:var(--color-accent-light)] [--focus:var(--color-accent-light)] [--active:var(--color-accent-light)] shadow-sm color-black border-accent-dark focus-visible:([--bg:var(--color-accent-light)]))`,
+	default: `layer-variants:[&.btn-color-default]:([--bg:var(--color-white)] [--hover:var(--color-gray-3)] [--focus:var(--color-white)] [--active:var(--color-gray-4)] shadow-sm color-black border-gray-7)`,
 	ghost: `layer-variants:[&.btn-color-ghost]:([--bg:transparent] [--hover:var(--color-gray-blend)] [--focus:var(--color-gray-5)] [--active:var(--color-gray-dark-blend)] color-dark-blend)`,
-	destructive: `layer-variants:[&.btn-color-destructive]:([--bg:var(--color-attention-light)] [--hover:var(--color-attention-light)] [--focus:var(--color-attention-light)] [--active:var(--color-attention-light)] shadow-sm border-black color-black hover:([--bg:var(--colors-attention)]))`,
+	destructive: `layer-variants:[&.btn-color-destructive]:([--bg:var(--color-attention-light)] [--hover:var(--color-attention-light)] [--focus:var(--color-attention-light)] [--active:var(--color-attention-light)] shadow-sm border-attention-dark color-black hover:([--bg:var(--colors-attention)]))`,
 	ghostDestructive: `layer-variants:[&.btn-color-ghostDestructive]:([--bg:transparent] [--hover:rgb(from_var(--color-attention-light)_r_g_b/0.25)] [--focus:var(--color-attention-light)] [--active:var(--color-attention-light)] color-attention-dark)`,
 	ghostAccent: `layer-variants:[&.btn-color-ghostAccent]:([--bg:transparent] [--hover:rgb(from_var(--color-accent-light)_r_g_b/0.25)] [--focus:var(--color-accent-light)] [--active:var(--color-accent-light)] color-accent-dark)`,
 	contrast: `layer-variants:[&.btn-color-contrast]:([--bg:var(--color-black)] [--hover:var(--color-gray-7)] [--focus:var(--color-gray-7)] [--active:var(--color-gray-6)] color-white border-black)`,

package/src/components/card/Card.tsx

@@ -79,3 +79,14 @@ export const CardGrid = withClassName(
 	'layer-components:(grid grid-cols-[1fr] [grid-auto-rows:auto] gap-4 p-0 m-0)',
 	'layer-components:md:(grid-cols-[repeat(2,1fr)] [grid-auto-rows:1fr] items-end)',
 );
+
+export const Card = Object.assign(CardRoot, {
+	Main: CardMain,
+	Title: CardTitle,
+	Content: CardContent,
+	Image: CardImage,
+	Footer: CardFooter,
+	Actions: CardActions,
+	Menu: CardMenu,
+	Grid: CardGrid,
+});

package/src/components/checkbox/Checkbox.tsx

@@ -35,13 +35,18 @@ export function CheckboxIndicator({
 	);
 }
 
-export const Checkbox = forwardRef<
-	HTMLButtonElement,
-	ComponentProps<typeof CheckboxRoot>
->(function Checkbox(props, ref) {
-	return (
-		<CheckboxRoot ref={ref} {...props}>
-			<CheckboxIndicator />
-		</CheckboxRoot>
-	);
-});
+export const Checkbox = Object.assign(
+	forwardRef<HTMLButtonElement, ComponentProps<typeof CheckboxRoot>>(
+		function Checkbox(props, ref) {
+			return (
+				<CheckboxRoot ref={ref} {...props}>
+					<CheckboxIndicator />
+				</CheckboxRoot>
+			);
+		},
+	),
+	{
+		Root: CheckboxRoot,
+		Indicator: CheckboxIndicator,
+	},
+);

package/src/components/collapsible/Collapsible.tsx

@@ -46,3 +46,9 @@ export const CollapsibleSimple = ({
 		</CollapsibleContent>
 	</CollapsibleRoot>
 );
+
+export const Collapsible = Object.assign(CollapsibleRoot, {
+	Content: CollapsibleContent,
+	Trigger: CollapsibleTrigger,
+	Simple: CollapsibleSimple,
+});

package/src/components/contextMenu/contextMenu.tsx

@@ -1,17 +1,17 @@
-import * as ContextMenu from '@radix-ui/react-context-menu';
+import * as ContextMenuPrimitive from '@radix-ui/react-context-menu';
 import { ComponentPropsWithoutRef, forwardRef } from 'react';
 import { withClassName } from '../../hooks/withClassName.js';
 import classNames from 'clsx';
 
-export const ContextMenuRoot = ContextMenu.Root;
+export const ContextMenuRoot = ContextMenuPrimitive.Root;
 
 export const ContextMenuContent = forwardRef<
 	HTMLDivElement,
-	ComponentPropsWithoutRef<typeof ContextMenu.Content>
+	ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>
 >(function Content({ className, onClick, ...props }, ref) {
 	return (
-		<ContextMenu.Portal>
-			<ContextMenu.Content
+		<ContextMenuPrimitive.Portal>
+			<ContextMenuPrimitive.Content
 				className={classNames(
 					'layer-components:(min-w-120px bg-white rounded-md border-default overflow-hidden p-2 shadow-md z-menu)',
 					'layer-components:transform-origin-[var(--radix-context-menu-transform-origin)]',
@@ -28,16 +28,29 @@ export const ContextMenuContent = forwardRef<
 				ref={ref}
 				{...props}
 			/>
-		</ContextMenu.Portal>
+		</ContextMenuPrimitive.Portal>
 	);
 });
 
-export const ContextMenuArrow = withClassName(ContextMenu.Arrow, 'fill-white');
+export const ContextMenuArrow = withClassName(
+	ContextMenuPrimitive.Arrow,
+	'fill-white',
+);
 
 export const ContextMenuItem = withClassName(
-	ContextMenu.Item,
+	ContextMenuPrimitive.Item,
 	'flex items-center py-1 px-2 relative pl-25px select-none outline-none cursor-pointer',
 	'hover:bg-gray2 [&[data-highlighted=true]]:bg-gray2 [&[data-disabled=true]]:(opacity-50 cursor-default) disabled:(opacity-50 cursor-default)',
 );
 
-export const ContextMenuTrigger = withClassName(ContextMenu.Trigger, '');
+export const ContextMenuTrigger = withClassName(
+	ContextMenuPrimitive.Trigger,
+	'',
+);
+
+export const ContextMenu = Object.assign(ContextMenuRoot, {
+	Content: ContextMenuContent,
+	Arrow: ContextMenuArrow,
+	Item: ContextMenuItem,
+	Trigger: ContextMenuTrigger,
+});

package/src/components/dialog/Dialog.tsx

@@ -18,6 +18,7 @@ import classNames from 'clsx';
 import { CheckIcon, ChevronDownIcon } from '@radix-ui/react-icons';
 import { selectTriggerClassName } from '../select.js';
 import { useDrag } from '@use-gesture/react';
+import { Button } from '../button.js';
 
 const StyledOverlay = withClassName(
 	DialogPrimitive.Overlay,
@@ -28,7 +29,7 @@ const StyledOverlay = withClassName(
 
 const StyledContent = withClassName(
 	DialogPrimitive.Content,
-	'layer-components:(z-dialog fixed shadow-xl-up bg-white overflow-y-auto flex flex-col)',
+	'layer-components:(z-dialog fixed shadow-xl-up bg-white overflow-y-auto flex flex-col border-top-1 border-top-solid border-top-gray-5)',
 	'layer-components:sm:(shadow-xl)',
 	'transform-gpu !motion-reduce:animate-none',
 	'layer-components:(left-50% top-50% translate-[-50%] w-90vw max-w-450px max-h-85vh p-6 pt-8 rounded-lg border-b-1 pt-6)',
@@ -193,7 +194,7 @@ const StyledDescription = withClassName(
 );
 
 // Exports
-export const Dialog = (props: DialogPrimitive.DialogProps) => {
+const DialogRoot = (props: DialogPrimitive.DialogProps) => {
 	const [innerOpen, innerOnOpenChange] = useState(props.defaultOpen);
 	const open = props.open ?? innerOpen;
 	const onOpenChange = useCallback(
@@ -218,11 +219,21 @@ export const Dialog = (props: DialogPrimitive.DialogProps) => {
 		</DialogCloseContext.Provider>
 	);
 };
+
 export const DialogTrigger = DialogPrimitive.Trigger;
 export const DialogContent = Content;
 export const DialogTitle = StyledTitle;
 export const DialogDescription = StyledDescription;
-export const DialogClose = DialogPrimitive.Close;
+export const DialogClose = forwardRef<
+	HTMLButtonElement,
+	DialogPrimitive.DialogCloseProps
+>(function DialogClose({ asChild = true, children, ...props }, ref) {
+	return (
+		<DialogPrimitive.DialogClose asChild ref={ref} {...props}>
+			{asChild ? children : <Button>{children ?? 'Close'}</Button>}
+		</DialogPrimitive.DialogClose>
+	);
+});
 
 export type { DialogProps } from '@radix-ui/react-dialog';
 
@@ -272,3 +283,15 @@ export const DialogSelectItem = forwardRef<
 		</DialogSelectItemRoot>
 	);
 });
+
+export const Dialog = Object.assign(DialogRoot, {
+	Trigger: DialogTrigger,
+	Content,
+	Title: StyledTitle,
+	Description: StyledDescription,
+	Close: DialogClose,
+	Actions: DialogActions,
+	SelectTrigger: DialogSelectTrigger,
+	SelectList: DialogSelectList,
+	SelectItem: DialogSelectItem,
+});

package/src/components/dropdownMenu/DropdownMenu.stories.tsx

@@ -1,13 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import {
-	DropdownMenu,
-	DropdownMenuContent,
-	DropdownMenuItem,
-	DropdownMenuItemRightSlot,
-	DropdownMenuTrigger,
-} from './DropdownMenu.js';
+import { DropdownMenu } from './DropdownMenu.js';
 import { Icon } from '../icon.js';
-import { DropdownMenuLabel } from '@radix-ui/react-dropdown-menu';
 
 const meta = {
 	title: 'DropdownMenu',
@@ -26,21 +19,21 @@ export const Default: Story = {
 	args: {
 		children: (
 			<>
-				<DropdownMenuTrigger>Open</DropdownMenuTrigger>
-				<DropdownMenuContent>
-					<DropdownMenuItem color="destructive">
-						<DropdownMenuLabel>Item 1</DropdownMenuLabel>
-						<DropdownMenuItemRightSlot>
+				<DropdownMenu.Trigger>Open</DropdownMenu.Trigger>
+				<DropdownMenu.Content>
+					<DropdownMenu.Item color="destructive">
+						<DropdownMenu.Label>Item 1</DropdownMenu.Label>
+						<DropdownMenu.ItemRightSlot>
 							<Icon name="flag" />
-						</DropdownMenuItemRightSlot>
-					</DropdownMenuItem>
-					<DropdownMenuItem>
-						<DropdownMenuLabel>Item 2</DropdownMenuLabel>
-						<DropdownMenuItemRightSlot>
+						</DropdownMenu.ItemRightSlot>
+					</DropdownMenu.Item>
+					<DropdownMenu.Item>
+						<DropdownMenu.Label>Item 2</DropdownMenu.Label>
+						<DropdownMenu.ItemRightSlot>
 							<Icon name="add_person" />
-						</DropdownMenuItemRightSlot>
-					</DropdownMenuItem>
-				</DropdownMenuContent>
+						</DropdownMenu.ItemRightSlot>
+					</DropdownMenu.Item>
+				</DropdownMenu.Content>
 			</>
 		),
 	},

package/src/components/dropdownMenu/DropdownMenu.tsx

@@ -78,7 +78,7 @@ const StyledTrigger = withClassName(
 const StyledPortal = DropdownMenuPrimitive.Portal;
 
 // Exports
-export const DropdownMenu = DropdownMenuPrimitive.Root;
+export const DropdownMenuRoot = DropdownMenuPrimitive.Root;
 export const DropdownMenuTrigger = StyledTrigger;
 export const DropdownMenuItem = StyledItem;
 export const DropdownMenuCheckboxItem = StyledCheckboxItem;
@@ -107,3 +107,17 @@ export const DropdownMenuContent = ({
 };
 
 export const DropdownMenuItemRightSlot = withClassName('div', 'ml-auto');
+
+export const DropdownMenu = Object.assign(DropdownMenuRoot, {
+	Content: DropdownMenuContent,
+	Trigger: StyledTrigger,
+	Item: StyledItem,
+	CheckboxItem: StyledCheckboxItem,
+	RadioGroup: DropdownMenuPrimitive.RadioGroup,
+	RadioItem: StyledRadioItem,
+	ItemIndicator: StyledItemIndicator,
+	Label: StyledLabel,
+	Separator: StyledSeparator,
+	Arrow: StyledArrow,
+	ItemRightSlot: DropdownMenuItemRightSlot,
+});

package/src/components/input/Input.tsx

@@ -9,7 +9,7 @@ import {
 import { Slot } from '@radix-ui/react-slot';
 
 export const inputClassName = classNames(
-	'layer-components:(px-5 py-[5px] text-md font-sans rounded-full bg-white select-auto min-w-60px color-black border-default shadow-sm-inset)',
+	'layer-components:(px-5 py-[5px] text-md font-sans rounded-full bg-white select-auto min-w-60px color-black border-solid border-1 border-gray-7 shadow-sm-inset)',
 	'layer-components:focus:(outline-none bg-gray-1 ring-4	ring-white)',
 	'layer-components:focus-visible:(outline-none ring-gray-dark-blend)',
 	'layer-components:md:(min-w-120px)',

package/src/components/navBar/NavBar.tsx

@@ -86,3 +86,11 @@ export const NavBarRoot = withClassName(
 	'pb-[calc(0.25rem+env(safe-area-inset-bottom,0px))]',
 	'layer-components:sm:(bg-transparent flex flex-col rounded-0 border-none border-transparent shadow-none h-min-content overflow-y-auto overflow-x-hidden justify-start items-stretch gap-2 pb-10)',
 );
+
+export const NavBar = Object.assign(NavBarRoot, {
+	Item: NavBarItem,
+	ItemIcon: NavBarItemIcon,
+	ItemText: NavBarItemText,
+	ItemIconWrapper: NavBarItemIconWrapper,
+	ItemPip: NavBarItemPip,
+});

package/src/components/popover/Popover.tsx

@@ -30,7 +30,7 @@ const StyledClose = withClassName(
 );
 
 // Exports
-export const Popover = PopoverPrimitive.Root;
+export const PopoverRoot = PopoverPrimitive.Root;
 export const PopoverTrigger = PopoverPrimitive.Trigger;
 export const PopoverArrow = StyledArrow;
 export const PopoverClose = StyledClose;
@@ -77,3 +77,11 @@ export const PopoverContent = forwardRef<
 		</PopoverPrimitive.Portal>
 	);
 });
+
+export const Popover = Object.assign(PopoverRoot, {
+	Content: PopoverContent,
+	Arrow: PopoverArrow,
+	Close: PopoverClose,
+	Trigger: PopoverTrigger,
+	Anchor: PopoverAnchor,
+});

package/src/components/scrollArea/ScrollArea.tsx

@@ -63,20 +63,27 @@ export interface ScrollAreaProps extends Primitive.ScrollAreaProps {
 	orientation?: 'vertical' | 'both';
 }
 
-export const ScrollArea = forwardRef<any, ScrollAreaProps>(function ScrollArea(
-	{ children, orientation, ...props },
-	ref,
-) {
-	return (
-		<ScrollAreaRoot ref={ref} {...props}>
-			<ScrollAreaViewport>{children}</ScrollAreaViewport>
-			<ScrollAreaScrollbar />
-			{orientation === 'both' && (
-				<ScrollAreaScrollbar orientation="horizontal" />
-			)}
-		</ScrollAreaRoot>
-	);
-});
+export const ScrollArea = Object.assign(
+	forwardRef<any, ScrollAreaProps>(function ScrollArea(
+		{ children, orientation, ...props },
+		ref,
+	) {
+		return (
+			<ScrollAreaRoot ref={ref} {...props}>
+				<ScrollAreaViewport>{children}</ScrollAreaViewport>
+				<ScrollAreaScrollbar />
+				{orientation === 'both' && (
+					<ScrollAreaScrollbar orientation="horizontal" />
+				)}
+			</ScrollAreaRoot>
+		);
+	}),
+	{
+		Root: ScrollAreaRoot,
+		Viewport: ScrollAreaViewport,
+		Scrollbar: ScrollAreaScrollbar,
+	},
+);
 
 const shadowMap = {
 	white: 'shadow-1',

package/src/components/select/Select.tsx

@@ -201,7 +201,7 @@ export type SelectProps<T extends string = string> = {
 /**
  * A high-level Select which converts to native on mobile. Use with SelectItem.
  */
-export const Select = <T extends string = string>({
+const SelectBase = <T extends string = string>({
 	children,
 	value,
 	onValueChange,
@@ -233,6 +233,18 @@ export const Select = <T extends string = string>({
 	);
 };
 
+export const Select = Object.assign(SelectBase, {
+	Root: SelectRoot,
+	Item: SelectItem,
+	Group: SelectGroup,
+	Trigger: SelectTrigger,
+	Value: SelectValue,
+	Label: SelectLabel,
+	Separator: SelectSeparator,
+	Icon: SelectIcon,
+	Content: SelectContent,
+});
+
 function isMobile() {
 	return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
 		navigator.userAgent,

package/src/components/slider/Slider.tsx

@@ -1,3 +1,4 @@
+import { forwardRef } from 'react';
 import { withClassName } from '../../hooks.js';
 import * as SliderPrimitive from '@radix-ui/react-slider';
 
@@ -26,18 +27,29 @@ export const SliderThumb = withClassName(
 	'layer-variants:[&[data-color=primary]]:focus-visible:(bg-primary-light ring-primary)',
 );
 
-interface SliderProps extends SliderPrimitive.SliderProps {
+export interface SliderProps extends SliderPrimitive.SliderProps {
 	label?: string;
 	color?: 'default' | 'primary';
 }
 
-export function Slider({ label, color, ...props }: SliderProps) {
-	return (
-		<SliderRoot {...props}>
-			<SliderTrack>
-				<SliderRange data-color={color} />
-			</SliderTrack>
-			<SliderThumb aria-label={label} data-color={color} />
-		</SliderRoot>
-	);
-}
+export const Slider = Object.assign(
+	forwardRef<HTMLDivElement, SliderProps>(function Slider(
+		{ label, color, ...props },
+		ref,
+	) {
+		return (
+			<SliderRoot ref={ref} {...props}>
+				<SliderTrack>
+					<SliderRange data-color={color} />
+				</SliderTrack>
+				<SliderThumb aria-label={label} data-color={color} />
+			</SliderRoot>
+		);
+	}),
+	{
+		Root: SliderRoot,
+		Track: SliderTrack,
+		Range: SliderRange,
+		Thumb: SliderThumb,
+	},
+);

package/src/components/switch/Switch.tsx

@@ -12,12 +12,16 @@ const SwitchThumb = withClassName(
 	'block w-21px h-21px bg-white rounded-full border-default transition-transform will-change-transform [&[data-state=checked]]:translate-x-19px',
 );
 
-export const Switch = forwardRef<HTMLButtonElement, SwitchProps>(
-	function Switch(props, ref) {
+export const Switch = Object.assign(
+	forwardRef<HTMLButtonElement, SwitchProps>(function Switch(props, ref) {
 		return (
 			<SwitchRoot {...props} ref={ref}>
 				<SwitchThumb />
 			</SwitchRoot>
 		);
+	}),
+	{
+		Root: SwitchRoot,
+		Thumb: SwitchThumb,
 	},
 );

package/src/components/tabs/tabs.tsx

@@ -1,17 +1,23 @@
-import * as Tabs from '@radix-ui/react-tabs';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
 import { withClassName } from '../../hooks/withClassName.js';
 
-export const TabsRoot = withClassName(Tabs.Root, '');
+export const TabsRoot = withClassName(TabsPrimitive.Root, '');
 
 export const TabsList = withClassName(
-	Tabs.List,
+	TabsPrimitive.List,
 	'flex flex-row py-2 px-2 justify-center items-start gap-2',
 );
 
 export const TabsTrigger = withClassName(
-	Tabs.Trigger,
+	TabsPrimitive.Trigger,
 	'layer-components:(flex flex-row items-center justify-center gap-2 color-black py-1 px-4 bg-wash text-md min-w-100px rounded-full border border-1 font-semibold text-gray-7 border-gray-7 border-solid transition-colors cursor-pointer select-none font-sans)',
 	'hover:bg-primary-light focus-visible:(focus-ring focus-ring-primary-dark outline-off bg-primary-light border-primary-dark) [&[data-state=active]]:(font-semibold bg-primary-light border-primary-light text-black cursor-default hover:bg-primary-light relative z-1)',
 );
 
-export const TabsContent = withClassName(Tabs.Content, '');
+export const TabsContent = withClassName(TabsPrimitive.Content, '');
+
+export const Tabs = Object.assign(TabsRoot, {
+	List: TabsList,
+	Trigger: TabsTrigger,
+	Content: TabsContent,
+});

package/src/components/textArea/TextArea.tsx

@@ -83,7 +83,7 @@ export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
 				ref={finalRef}
 				className={classNames(
 					inputClassName,
-					'layer-components:([font-family:inherit] text-inherit overflow-hidden)',
+					'layer-components:([font-family:inherit] text-inherit overflow-hidden resize-none)',
 					'layer-variants:(rounded-20px)',
 					{
 						'layer-components:[resize:vertical]': !autoSize,

package/src/components/toggleGroup/toggleGroup.tsx

@@ -1,11 +1,15 @@
-import * as ToggleGroup from '@radix-ui/react-toggle-group';
+import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
 import { withClassName } from '../../hooks/withClassName.js';
 
 export const ToggleGroupRoot = withClassName(
-	ToggleGroup.Root,
+	ToggleGroupPrimitive.Root,
 	'inline-flex bg-gray1 rounded-lg gap-1',
 );
 export const ToggleGroupItem = withClassName(
-	ToggleGroup.Item,
+	ToggleGroupPrimitive.Item,
 	'rounded-xl bg-gray2 py-1 px-2 flex items-center justify-center cursor-pointer hover:bg-gray3 active:bg-gray4 focus-visible:(shadow-focus outline-off) [&[data-state=on]]:(bg-primary-light border-black)',
 );
+
+export const ToggleGroup = Object.assign(ToggleGroupRoot, {
+	Item: ToggleGroupItem,
+});

package/src/components/tooltip/Tooltip.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { ComponentPropsWithoutRef } from 'react';
+import { ComponentPropsWithoutRef, forwardRef } from 'react';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import classNames from 'clsx';
 
@@ -31,25 +31,33 @@ function Content({
 
 export const TooltipProvider = TooltipPrimitive.Provider;
 
-export function Tooltip({
-	content,
-	children,
-	open,
-	disabled,
-	...rest
-}: { content: React.ReactNode; open?: boolean } & ComponentPropsWithoutRef<
-	typeof TooltipPrimitive.TooltipTrigger
->) {
-	return (
-		<TooltipPrimitive.Root open={open}>
-			{disabled ? (
-				children
-			) : (
-				<TooltipPrimitive.TooltipTrigger asChild {...rest}>
-					{children}
-				</TooltipPrimitive.TooltipTrigger>
-			)}
-			<Content sideOffset={12}>{content}</Content>
-		</TooltipPrimitive.Root>
-	);
+export interface TooltipProps
+	extends Omit<TooltipPrimitive.TooltipTriggerProps, 'content'> {
+	content: React.ReactNode;
+	open?: boolean;
+	disabled?: boolean;
 }
+
+export const Tooltip = Object.assign(
+	forwardRef<HTMLButtonElement, TooltipProps>(function Tooltip(
+		{ content, children, open, disabled, ...rest },
+		ref,
+	) {
+		return (
+			<TooltipPrimitive.Root open={open}>
+				{disabled ? (
+					children
+				) : (
+					<TooltipPrimitive.TooltipTrigger asChild ref={ref} {...rest}>
+						{children}
+					</TooltipPrimitive.TooltipTrigger>
+				)}
+				<Content sideOffset={12}>{content}</Content>
+			</TooltipPrimitive.Root>
+		);
+	}),
+	{
+		Trigger: TooltipPrimitive.TooltipTrigger,
+		Content,
+	},
+);

package/src/themes.stories.tsx

@@ -0,0 +1,70 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import clsx from 'clsx';
+import { Button } from './components/button.js';
+import { Input } from './components/input.js';
+import { TextArea } from './components/textArea.js';
+import { Card } from './components/card.js';
+import { Tabs } from './components/tabs.js';
+
+const meta = {
+	title: 'themes',
+	argTypes: {},
+	parameters: {
+		controls: { expanded: true },
+	},
+} satisfies Meta;
+
+export default meta;
+
+type Story = StoryObj;
+
+function DemoUI({ className }: { className?: string }) {
+	return (
+		<div className={clsx('grid gap-2 grid-cols-3', className)}>
+			<div className="col">
+				<Button color="primary">Primary</Button>
+				<Button color="accent">Accent</Button>
+				<Button>Default</Button>
+				<Button size="small" color="destructive">
+					Destructive
+				</Button>
+				<Button size="small" color="ghostDestructive">
+					Ghost Destructive
+				</Button>
+			</div>
+			<div className="col">
+				<Input placeholder="Placeholder" />
+				<TextArea placeholder="Placeholder" />
+			</div>
+			<div>
+				<Card>
+					<Card.Main>
+						<Card.Title>Card Title</Card.Title>
+						<Card.Content>Card Content</Card.Content>
+					</Card.Main>
+					<Card.Footer>
+						<Card.Actions>
+							<Button size="small">Action 1</Button>
+						</Card.Actions>
+					</Card.Footer>
+				</Card>
+			</div>
+			<div>
+				<Tabs defaultValue="tab1">
+					<Tabs.List>
+						<Tabs.Trigger value="tab1">Tab 1</Tabs.Trigger>
+						<Tabs.Trigger value="tab2">Tab 2</Tabs.Trigger>
+					</Tabs.List>
+					<Tabs.Content value="tab1">Tab 1 Content</Tabs.Content>
+					<Tabs.Content value="tab2">Tab 2 Content</Tabs.Content>
+				</Tabs>
+			</div>
+		</div>
+	);
+}
+
+export const Default: Story = {
+	render() {
+		return <DemoUI />;
+	},
+};