@uselets/ui 1.7.2 → 1.8.0

package/README.md

@@ -266,10 +266,16 @@ This same list is exported as `uiColors` and `UIColor` from `@uselets/ui` and `@
 Color-aware components such as `Button`, `Toggle`, `Checkbox`, `RadioGroupItem`, and `Switch` use `UIColor` for their public `color` props.
 `ButtonColor` remains available as a compatibility alias for existing button consumers.
 
-Each family is exposed in two layers:
+Each family is exposed in four layers:
 
 - CSS variables such as `--primary-500`, `--brand-500` and `--zinc-900`
+- Semantic CSS aliases such as `--green`, `--red` and `--gray`, mapped to `500` in light mode and `400` in dark mode
 - Tailwind v4 theme utilities such as `bg-primary-500`, `text-zinc-900`, `border-red-300`
+- Tailwind v4 semantic utilities such as `bg-green`, `text-red` and `border-gray`
+
+Color-aware components use the semantic family aliases for their primary color so `color="green"` resolves to
+`--green-500` in light mode and `--green-400` in dark mode. Hover and subtle surfaces continue to use explicit
+palette steps.
 
 ### Palette preview
 
@@ -328,12 +334,12 @@ You can import from the package root (`@uselets/ui`) or by subpath (`@uselets/ui
 | `alert` | `Alert`, `AlertTitle`, `AlertDescription`, `AlertAction` | `Alert` supports `variant: 'default' \| 'destructive'` (default: `default`). |
 | `anchor` | `Anchor`, `anchorVariants` | Link primitive rendered as `<a>` with `size: 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`, `underline: 'always' \| 'hover' \| 'never' \| 'not-hover'` (default: `hover`), and `asChild`. |
 | `avatar` | `Avatar`, `AvatarImage`, `AvatarFallback`, `AvatarBadge`, `AvatarGroup`, `AvatarGroupCount` | `Avatar` supports `size: 'sm' \| 'md' \| 'lg'` (default: `md`). |
-| `badge` | `Badge`, `badgeVariants` | `size: 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` (default: `md`); `variant: 'solid' \| 'outline' \| 'subtle' \| 'ghost' \| 'link'` (default: `solid`); `color: UIColor` (default: `primary`); `asChild?: boolean`. |
+| `badge` | `Badge`, `badgeVariants` | `size: 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` (default: `md`); `variant: 'solid' \| 'secondary' \| 'outline' \| 'subtle'` (default: `solid`); `color: UIColor` (default: `primary`); `asChild?: boolean`. |
 | `button` | `Button`, `buttonVariants` | `variant: 'solid' \| 'secondary' \| 'outline' \| 'subtle' \| 'ghost' \| 'link'` (default: `solid`); `color: UIColor` (default: `primary`); `size: 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'icon-xs' \| 'icon-sm' \| 'icon' \| 'icon-lg' \| 'icon-xl'`; `loading?: boolean`. |
 | `unstyled-button` | `UnstyledButton` | Button primitive with reset styles, pointer cursor, accessible focus ring, default `type="button"`, and `asChild`. |
 | `calendar` | `Calendar`, `CalendarDayButton` | Also exports the `DateRange` type. Weekends render with destructive text, week numbers are low-emphasis, and selected single/range endpoints use the `primary` palette with a subtle primary range fill. |
 | `date-range-picker` | `DateRangePicker`, `DateRangePickerTrigger`, `DateRangePickerValue`, `DateRangePickerContent`, `DateRangePickerPresets`, `DateRangePickerPreset`, `DateRangePickerCalendar`, `DateRangePickerDateFields`, `DateRangePickerActions`, `DateRangePickerApply`, `DateRangePickerReset` | Compound popover picker backed by `Calendar` range mode. Draft edits from fixed presets, relative-day inputs, date inputs, and calendar stay in sync until `Apply`; reset/clear emits `null` through `onValueChange`. |
-| `card` | `Card`, `CardHeader`, `CardTitle`, `CardDescription`, `CardAction`, `CardContent`, `CardFooter` | `Card` supports `size: 'sm' \| 'md'` (default: `md`). |
+| `card` | `Card`, `CardHeader`, `CardTitle`, `CardDescription`, `CardAction`, `CardContent`, `CardFooter` | `Card` supports `size: 'sm' \| 'md' \| 'lg'` (default: `md`). |
 | `checkbox` | `Checkbox` | `Checkbox` supports `size: 'sm' \| 'md' \| 'lg'` (default: `md`), `color: UIColor` (default: `primary`), `label?: React.ReactNode`, and `labelProps` for the composed `Label`. When `label` is provided without `id`, it generates an id and wires `htmlFor` automatically. Label text follows checkbox size: `sm` 12px, `md` 14px, `lg` 20px. |
 | `code` | `Code` | Inline code primitive rendered as `<code>`. |
 | `combobox` | `Combobox`, `ComboboxInput`, `ComboboxContent`, `ComboboxList`, `ComboboxItem`, `ComboboxGroup`, `ComboboxLabel`, `ComboboxCollection`, `ComboboxClear`, `ComboboxEmpty`, `ComboboxSeparator`, `ComboboxChips`, `ComboboxChip`, `ComboboxChipsInput`, `ComboboxTrigger`, `ComboboxValue`, `useComboboxAnchor` | `ComboboxInput` supports `icon?: React.ReactNode`, `triggerIcon?: React.ReactNode`, `showTrigger?: boolean`, and `showClear?: boolean`; `ComboboxContent` supports `container` for rendering inside overlays such as dialogs. |

package/dist/components/badge.d.ts

@@ -5,7 +5,7 @@ import * as React from "react";
 //#region src/components/badge.d.ts
 declare const badgeVariants: (props?: ({
   size?: "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
-  variant?: "solid" | "outline" | "subtle" | "ghost" | "link" | null | undefined;
+  variant?: "solid" | "secondary" | "outline" | "subtle" | null | undefined;
   color?: "primary" | "brand" | "gray" | "zinc" | "red" | "yellow" | "blue" | "indigo" | "pink" | "green" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type BadgeProps = React.ComponentProps<'span'> & VariantProps<typeof badgeVariants> & {

package/dist/components/badge.js

@@ -1,2 +1,2 @@
-import"../chunk-CHh1Zzun.js";import{cn as e}from"../lib/utils.js";import{badgeColorVariants as t}from"../lib/badge.js";import{Slot as n}from"radix-ui";import{jsx as r}from"react/jsx-runtime";import{cva as i}from"class-variance-authority";const a=i(`group/badge inline-flex w-fit items-center justify-center overflow-hidden border border-transparent font-semibold whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none`,{variants:{size:{xs:`h-4 gap-0.5 px-1.5 text-[10px] rounded-[4px] [&>svg]:size-2.5! has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1`,sm:`h-4.5 gap-0.5 px-2 text-[11px] rounded-[5px] [&>svg]:size-2.5! has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5`,md:`h-5 gap-1 px-2 py-0.5 text-xs rounded-[6px] [&>svg]:size-3! has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5`,lg:`h-6 gap-1 px-2.5 text-xs rounded-[7px] [&>svg]:size-3.5! has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2`,xl:`h-7 gap-1.5 px-3 text-sm rounded-[8px] [&>svg]:size-4! has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5`},variant:{solid:`bg-(--badge-solid) text-(--badge-solid-foreground) [a]:hover:opacity-90`,outline:`border-(--badge-outline-border) text-(--badge-outline-foreground) [a]:hover:bg-(--badge-soft) [a]:hover:text-(--badge-soft-foreground)`,subtle:`bg-(--badge-soft) text-(--badge-soft-foreground) [a]:hover:bg-(--badge-soft-hover)`,ghost:`text-(--badge-ghost-foreground) [a]:hover:bg-(--badge-ghost-hover) [a]:hover:text-(--badge-ghost-foreground)`,link:`text-(--badge-link-foreground) underline-offset-4 [a]:hover:underline`},color:t},defaultVariants:{size:`md`,variant:`solid`,color:`primary`}});function Badge({className:t,size:i=`md`,variant:o=`solid`,color:s=`primary`,asChild:c=!1,...l}){return r(c?n.Root:`span`,{"data-slot":`badge`,"data-size":i,"data-variant":o,"data-color":s,className:e(a({size:i,variant:o,color:s}),t),...l})}export{Badge,a as badgeVariants};
+import"../chunk-CHh1Zzun.js";import{cn as e}from"../lib/utils.js";import{badgeColorVariants as t}from"../lib/badge.js";import{Slot as n}from"radix-ui";import{jsx as r}from"react/jsx-runtime";import{cva as i}from"class-variance-authority";const a=i(`group/badge inline-flex w-fit items-center justify-center overflow-hidden border border-transparent font-semibold whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none`,{variants:{size:{xs:`h-4 gap-0.5 px-1.5 text-[10px] rounded-[4px] [&>svg]:size-2.5! has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1`,sm:`h-4.5 gap-0.5 px-2 text-[11px] rounded-[5px] [&>svg]:size-2.5! has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5`,md:`h-5 gap-1 px-2 py-0.5 text-xs rounded-[6px] [&>svg]:size-3! has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5`,lg:`h-6 gap-1 px-2.5 text-xs rounded-[7px] [&>svg]:size-3.5! has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2`,xl:`h-7 gap-1.5 px-3 text-sm rounded-[8px] [&>svg]:size-4! has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5`},variant:{solid:`bg-(--badge-solid) text-(--badge-solid-foreground) [a]:hover:opacity-90`,secondary:`border-border bg-background text-foreground [a]:hover:bg-muted dark:border-input dark:bg-input/30 dark:[a]:hover:bg-input/50`,outline:`border-(--badge-outline-border) text-(--badge-outline-foreground) [a]:hover:bg-(--badge-soft) [a]:hover:text-(--badge-soft-foreground)`,subtle:`bg-(--badge-soft) text-(--badge-soft-foreground) [a]:hover:bg-(--badge-soft-hover)`},color:t},defaultVariants:{size:`md`,variant:`solid`,color:`primary`}});function Badge({className:t,size:i=`md`,variant:o=`solid`,color:s=`primary`,asChild:c=!1,...l}){return r(c?n.Root:`span`,{"data-slot":`badge`,"data-size":i,"data-variant":o,"data-color":s,className:e(a({size:i,variant:o,color:s}),t),...l})}export{Badge,a as badgeVariants};
 //# sourceMappingURL=badge.js.map

package/dist/components/badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge.js","names":[],"sources":["../../src/components/badge.tsx"],"sourcesContent":["import type * as React from 'react'\n\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { Slot } from 'radix-ui'\n\nimport { badgeColorVariants } from '../lib/badge'\nimport { cn } from '../lib/utils'\n\nconst badgeVariants = cva(\n  'group/badge inline-flex w-fit items-center justify-center overflow-hidden border border-transparent font-semibold whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none',\n  {\n    variants: {\n      size: {\n        xs: 'h-4 gap-0.5 px-1.5 text-[10px] rounded-[4px] [&>svg]:size-2.5! has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1',\n        sm: 'h-4.5 gap-0.5 px-2 text-[11px] rounded-[5px] [&>svg]:size-2.5! has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5',\n        md: 'h-5 gap-1 px-2 py-0.5 text-xs rounded-[6px] [&>svg]:size-3! has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5',\n        lg: 'h-6 gap-1 px-2.5 text-xs rounded-[7px] [&>svg]:size-3.5! has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',\n        xl: 'h-7 gap-1.5 px-3 text-sm rounded-[8px] [&>svg]:size-4! has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5'\n      },\n      variant: {\n        solid: 'bg-(--badge-solid) text-(--badge-solid-foreground) [a]:hover:opacity-90',\n        outline:\n          'border-(--badge-outline-border) text-(--badge-outline-foreground) [a]:hover:bg-(--badge-soft) [a]:hover:text-(--badge-soft-foreground)',\n        subtle: 'bg-(--badge-soft) text-(--badge-soft-foreground) [a]:hover:bg-(--badge-soft-hover)',\n        ghost:\n          'text-(--badge-ghost-foreground) [a]:hover:bg-(--badge-ghost-hover) [a]:hover:text-(--badge-ghost-foreground)',\n        link: 'text-(--badge-link-foreground) underline-offset-4 [a]:hover:underline'\n      },\n      color: badgeColorVariants\n    },\n    defaultVariants: {\n      size: 'md',\n      variant: 'solid',\n      color: 'primary'\n    }\n  }\n)\n\nexport type BadgeProps = React.ComponentProps<'span'> &\n  VariantProps<typeof badgeVariants> & {\n    asChild?: boolean\n  }\n\nfunction Badge({\n  className,\n  size = 'md',\n  variant = 'solid',\n  color = 'primary',\n  asChild = false,\n  ...props\n}: BadgeProps) {\n  const Comp = asChild ? Slot.Root : 'span'\n\n  return (\n    <Comp\n      data-slot=\"badge\"\n      data-size={size}\n      data-variant={variant}\n      data-color={color}\n      className={cn(badgeVariants({ size, variant, color }), className)}\n      {...props}\n    />\n  )\n}\n\nexport { Badge, badgeVariants }\n"],"mappings":"8OAQA,MAAM,EAAgB,EACpB,sWACA,CACE,SAAU,CACR,KAAM,CACJ,GAAI,mIACJ,GAAI,uIACJ,GAAI,oIACJ,GAAI,6HACJ,GAAI,8HACN,EACA,QAAS,CACP,MAAO,0EACP,QACE,yIACF,OAAQ,qFACR,MACE,+GACF,KAAM,uEACR,EACA,MAAO,CACT,EACA,gBAAiB,CACf,KAAM,KACN,QAAS,QACT,MAAO,SACT,CACF,CACF,EAOA,SAAS,MAAM,CACb,YACA,OAAO,KACP,UAAU,QACV,QAAQ,UACR,UAAU,GACV,GAAG,GACU,CAGb,OACE,EAHW,EAAU,EAAK,KAAO,OAGjC,CACE,YAAU,QACV,YAAW,EACX,eAAc,EACd,aAAY,EACZ,UAAW,EAAG,EAAc,CAAE,OAAM,UAAS,OAAM,CAAC,EAAG,CAAS,EAChE,GAAI,CACL,CAAA,CAEL"}
+{"version":3,"file":"badge.js","names":[],"sources":["../../src/components/badge.tsx"],"sourcesContent":["import type * as React from 'react'\n\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { Slot } from 'radix-ui'\n\nimport { badgeColorVariants } from '../lib/badge'\nimport { cn } from '../lib/utils'\n\nconst badgeVariants = cva(\n  'group/badge inline-flex w-fit items-center justify-center overflow-hidden border border-transparent font-semibold whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none',\n  {\n    variants: {\n      size: {\n        xs: 'h-4 gap-0.5 px-1.5 text-[10px] rounded-[4px] [&>svg]:size-2.5! has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1',\n        sm: 'h-4.5 gap-0.5 px-2 text-[11px] rounded-[5px] [&>svg]:size-2.5! has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5',\n        md: 'h-5 gap-1 px-2 py-0.5 text-xs rounded-[6px] [&>svg]:size-3! has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5',\n        lg: 'h-6 gap-1 px-2.5 text-xs rounded-[7px] [&>svg]:size-3.5! has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',\n        xl: 'h-7 gap-1.5 px-3 text-sm rounded-[8px] [&>svg]:size-4! has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5'\n      },\n      variant: {\n        solid: 'bg-(--badge-solid) text-(--badge-solid-foreground) [a]:hover:opacity-90',\n        secondary:\n          'border-border bg-background text-foreground [a]:hover:bg-muted dark:border-input dark:bg-input/30 dark:[a]:hover:bg-input/50',\n        outline:\n          'border-(--badge-outline-border) text-(--badge-outline-foreground) [a]:hover:bg-(--badge-soft) [a]:hover:text-(--badge-soft-foreground)',\n        subtle: 'bg-(--badge-soft) text-(--badge-soft-foreground) [a]:hover:bg-(--badge-soft-hover)'\n      },\n      color: badgeColorVariants\n    },\n    defaultVariants: {\n      size: 'md',\n      variant: 'solid',\n      color: 'primary'\n    }\n  }\n)\n\nexport type BadgeProps = React.ComponentProps<'span'> &\n  VariantProps<typeof badgeVariants> & {\n    asChild?: boolean\n  }\n\nfunction Badge({\n  className,\n  size = 'md',\n  variant = 'solid',\n  color = 'primary',\n  asChild = false,\n  ...props\n}: BadgeProps) {\n  const Comp = asChild ? Slot.Root : 'span'\n\n  return (\n    <Comp\n      data-slot=\"badge\"\n      data-size={size}\n      data-variant={variant}\n      data-color={color}\n      className={cn(badgeVariants({ size, variant, color }), className)}\n      {...props}\n    />\n  )\n}\n\nexport { Badge, badgeVariants }\n"],"mappings":"8OAQA,MAAM,EAAgB,EACpB,sWACA,CACE,SAAU,CACR,KAAM,CACJ,GAAI,mIACJ,GAAI,uIACJ,GAAI,oIACJ,GAAI,6HACJ,GAAI,8HACN,EACA,QAAS,CACP,MAAO,0EACP,UACE,+HACF,QACE,yIACF,OAAQ,oFACV,EACA,MAAO,CACT,EACA,gBAAiB,CACf,KAAM,KACN,QAAS,QACT,MAAO,SACT,CACF,CACF,EAOA,SAAS,MAAM,CACb,YACA,OAAO,KACP,UAAU,QACV,QAAQ,UACR,UAAU,GACV,GAAG,GACU,CAGb,OACE,EAHW,EAAU,EAAK,KAAO,OAGjC,CACE,YAAU,QACV,YAAW,EACX,eAAc,EACd,aAAY,EACZ,UAAW,EAAG,EAAc,CAAE,OAAM,UAAS,OAAM,CAAC,EAAG,CAAS,EAChE,GAAI,CACL,CAAA,CAEL"}

package/dist/components/button.d.ts

@@ -4,7 +4,7 @@ import * as React from "react";
 
 //#region src/components/button.d.ts
 declare const buttonVariants: (props?: ({
-  variant?: "solid" | "outline" | "subtle" | "ghost" | "link" | "secondary" | null | undefined;
+  variant?: "solid" | "secondary" | "outline" | "subtle" | "ghost" | "link" | null | undefined;
   color?: "primary" | "brand" | "gray" | "zinc" | "red" | "yellow" | "blue" | "indigo" | "pink" | "green" | null | undefined;
   size?: "xs" | "sm" | "md" | "lg" | "xl" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | "icon-xl" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/components/button.js

@@ -1,2 +1,2 @@
-import"../chunk-CHh1Zzun.js";import{cn as e}from"../lib/utils.js";import{buttonColorVariants as t}from"../lib/button.js";import{Spinner as n}from"./spinner.js";import{Slot as r}from"radix-ui";import{Fragment as i,jsx as a,jsxs as o}from"react/jsx-runtime";import{cva as s}from"class-variance-authority";const c=s(`focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 relative rounded-full border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all [&_svg]:transition-colors disabled:pointer-events-none disabled:opacity-50 disabled:data-[loading=true]:pointer-events-auto disabled:data-[loading=true]:cursor-not-allowed disabled:data-[loading=true]:opacity-100 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none`,{variants:{variant:{solid:`bg-(--button-solid) text-(--button-solid-foreground) hover:bg-(--button-solid-hover) data-[loading=true]:hover:bg-(--button-solid)`,secondary:`border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50`,outline:`border-(--button-outline-border) bg-transparent text-(--button-outline-foreground) hover:bg-(--button-solid) hover:text-(--button-solid-foreground) hover:[&_svg]:text-(--button-solid-foreground) data-[loading=true]:hover:bg-background data-[loading=true]:hover:text-(--button-outline-foreground) aria-expanded:bg-(--button-solid) aria-expanded:text-(--button-solid-foreground) aria-expanded:[&_svg]:text-(--button-solid-foreground)`,subtle:`bg-(--button-soft) text-(--button-soft-foreground) hover:bg-(--button-soft-hover) hover:text-(--button-soft-foreground) data-[loading=true]:hover:bg-(--button-soft) data-[loading=true]:hover:text-(--button-soft-foreground) aria-expanded:bg-(--button-soft-hover) aria-expanded:text-(--button-soft-foreground)`,ghost:`text-(--button-ghost-foreground) hover:bg-(--button-ghost-hover) hover:text-(--button-ghost-foreground) data-[loading=true]:hover:bg-transparent data-[loading=true]:hover:text-(--button-ghost-foreground) aria-expanded:bg-(--button-ghost-hover) aria-expanded:text-(--button-ghost-foreground)`,link:`text-(--button-link-foreground) underline-offset-4 hover:underline data-[loading=true]:hover:no-underline`},color:t,size:{xs:`h-7 gap-1 px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3`,sm:`h-8 gap-1 px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5`,md:`h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2`,lg:`h-10 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3`,xl:`h-11 gap-2 px-3 has-data-[icon=inline-end]:pr-4 has-data-[icon=inline-start]:pl-4`,icon:`size-9`,"icon-xs":`size-7 in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3`,"icon-sm":`size-8 in-data-[slot=button-group]:rounded-lg`,"icon-lg":`size-10`,"icon-xl":`size-11`}},defaultVariants:{variant:`solid`,color:`primary`,size:`md`}});function Button({children:t,className:s,variant:l=`solid`,color:u=`primary`,size:d=`md`,asChild:f=!1,disabled:p,loading:m=!1,...h}){return a(f?r.Root:`button`,{type:f?void 0:`button`,"data-slot":`button`,"data-variant":l,"data-color":u,"data-size":d,"data-loading":m,"aria-busy":m?!0:void 0,disabled:p||m,className:e(c({variant:l,color:u,size:d,className:s})),...h,children:m&&!f?o(i,{children:[a(`span`,{className:`invisible inline-flex items-center gap-[inherit]`,children:t}),a(`span`,{className:`absolute inset-0 inline-flex items-center justify-center`,children:a(n,{})})]}):m?a(n,{}):t})}export{Button,c as buttonVariants};
+import"../chunk-CHh1Zzun.js";import{cn as e}from"../lib/utils.js";import{buttonColorVariants as t}from"../lib/button.js";import{Spinner as n}from"./spinner.js";import{Slot as r}from"radix-ui";import{Fragment as i,jsx as a,jsxs as o}from"react/jsx-runtime";import{cva as s}from"class-variance-authority";const c=s(`focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 relative rounded-full border border-transparent bg-clip-padding text-sm font-semibold focus-visible:ring-3 aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all [&_svg]:transition-colors disabled:pointer-events-none disabled:opacity-50 disabled:data-[loading=true]:pointer-events-auto disabled:data-[loading=true]:cursor-not-allowed disabled:data-[loading=true]:opacity-100 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none`,{variants:{variant:{solid:`bg-(--button-solid) text-(--button-solid-foreground) hover:bg-(--button-solid-hover) data-[loading=true]:hover:bg-(--button-solid)`,secondary:`border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50`,outline:`border-(--button-outline-border) bg-transparent text-(--button-outline-foreground) hover:bg-(--button-solid) hover:text-(--button-solid-foreground) hover:[&_svg]:text-(--button-solid-foreground) data-[loading=true]:hover:bg-background data-[loading=true]:hover:text-(--button-outline-foreground) aria-expanded:bg-(--button-solid) aria-expanded:text-(--button-solid-foreground) aria-expanded:[&_svg]:text-(--button-solid-foreground)`,subtle:`bg-(--button-soft) text-(--button-soft-foreground) hover:bg-(--button-soft-hover) hover:text-(--button-soft-foreground) data-[loading=true]:hover:bg-(--button-soft) data-[loading=true]:hover:text-(--button-soft-foreground) aria-expanded:bg-(--button-soft-hover) aria-expanded:text-(--button-soft-foreground)`,ghost:`text-(--button-ghost-foreground) hover:bg-(--button-ghost-hover) hover:text-(--button-ghost-foreground) data-[loading=true]:hover:bg-transparent data-[loading=true]:hover:text-(--button-ghost-foreground) aria-expanded:bg-(--button-ghost-hover) aria-expanded:text-(--button-ghost-foreground)`,link:`text-(--button-link-foreground) underline-offset-4 hover:underline data-[loading=true]:hover:no-underline`},color:t,size:{xs:`h-7 gap-1 px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3`,sm:`h-8 gap-1 px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5`,md:`h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2`,lg:`h-10 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3`,xl:`h-11 gap-2 px-3 has-data-[icon=inline-end]:pr-4 has-data-[icon=inline-start]:pl-4`,icon:`size-9`,"icon-xs":`size-7 in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3`,"icon-sm":`size-8 in-data-[slot=button-group]:rounded-lg`,"icon-lg":`size-10`,"icon-xl":`size-11`}},defaultVariants:{variant:`solid`,color:`primary`,size:`md`}});function Button({children:t,className:s,variant:l=`solid`,color:u=`primary`,size:d=`md`,asChild:f=!1,disabled:p,loading:m=!1,...h}){return a(f?r.Root:`button`,{type:f?void 0:`button`,"data-slot":`button`,"data-variant":l,"data-color":u,"data-size":d,"data-loading":m,"aria-busy":m?!0:void 0,disabled:p||m,className:e(c({variant:l,color:u,size:d,className:s})),...h,children:m&&!f?o(i,{children:[a(`span`,{className:`invisible inline-flex items-center gap-[inherit]`,children:t}),a(`span`,{className:`absolute inset-0 inline-flex items-center justify-center`,children:a(n,{})})]}):m?a(n,{}):t})}export{Button,c as buttonVariants};
 //# sourceMappingURL=button.js.map

package/dist/components/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","names":[],"sources":["../../src/components/button.tsx"],"sourcesContent":["import type * as React from 'react'\n\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { Slot } from 'radix-ui'\n\nimport { buttonColorVariants } from '../lib/button'\nimport { cn } from '../lib/utils'\nimport { Spinner } from './spinner'\n\nconst buttonVariants = cva(\n  \"focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 relative rounded-full border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all [&_svg]:transition-colors disabled:pointer-events-none disabled:opacity-50 disabled:data-[loading=true]:pointer-events-auto disabled:data-[loading=true]:cursor-not-allowed disabled:data-[loading=true]:opacity-100 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none\",\n  {\n    variants: {\n      variant: {\n        solid:\n          'bg-(--button-solid) text-(--button-solid-foreground) hover:bg-(--button-solid-hover) data-[loading=true]:hover:bg-(--button-solid)',\n        secondary:\n          'border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50',\n        outline:\n          'border-(--button-outline-border) bg-transparent text-(--button-outline-foreground) hover:bg-(--button-solid) hover:text-(--button-solid-foreground) hover:[&_svg]:text-(--button-solid-foreground) data-[loading=true]:hover:bg-background data-[loading=true]:hover:text-(--button-outline-foreground) aria-expanded:bg-(--button-solid) aria-expanded:text-(--button-solid-foreground) aria-expanded:[&_svg]:text-(--button-solid-foreground)',\n        subtle:\n          'bg-(--button-soft) text-(--button-soft-foreground) hover:bg-(--button-soft-hover) hover:text-(--button-soft-foreground) data-[loading=true]:hover:bg-(--button-soft) data-[loading=true]:hover:text-(--button-soft-foreground) aria-expanded:bg-(--button-soft-hover) aria-expanded:text-(--button-soft-foreground)',\n        ghost:\n          'text-(--button-ghost-foreground) hover:bg-(--button-ghost-hover) hover:text-(--button-ghost-foreground) data-[loading=true]:hover:bg-transparent data-[loading=true]:hover:text-(--button-ghost-foreground) aria-expanded:bg-(--button-ghost-hover) aria-expanded:text-(--button-ghost-foreground)',\n        link: 'text-(--button-link-foreground) underline-offset-4 hover:underline data-[loading=true]:hover:no-underline'\n      },\n      color: buttonColorVariants,\n      size: {\n        xs: \"h-7 gap-1 px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3\",\n        sm: \"h-8 gap-1 px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5\",\n        md: 'h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',\n        lg: 'h-10 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3',\n        xl: 'h-11 gap-2 px-3 has-data-[icon=inline-end]:pr-4 has-data-[icon=inline-start]:pl-4',\n        icon: 'size-9',\n        'icon-xs': \"size-7 in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3\",\n        'icon-sm': 'size-8 in-data-[slot=button-group]:rounded-lg',\n        'icon-lg': 'size-10',\n        'icon-xl': 'size-11'\n      }\n    },\n    defaultVariants: {\n      variant: 'solid',\n      color: 'primary',\n      size: 'md'\n    }\n  }\n)\n\nexport type ButtonProps = React.ComponentProps<'button'> &\n  VariantProps<typeof buttonVariants> & {\n    asChild?: boolean\n    loading?: boolean\n  }\n\nfunction Button({\n  children,\n  className,\n  variant = 'solid',\n  color = 'primary',\n  size = 'md',\n  asChild = false,\n  disabled,\n  loading = false,\n  ...props\n}: ButtonProps) {\n  const Comp = asChild ? Slot.Root : 'button'\n  const isDisabled = disabled || loading\n\n  return (\n    <Comp\n      type={!asChild ? 'button' : undefined}\n      data-slot=\"button\"\n      data-variant={variant}\n      data-color={color}\n      data-size={size}\n      data-loading={loading}\n      aria-busy={loading ? true : undefined}\n      disabled={isDisabled}\n      className={cn(buttonVariants({ variant, color, size, className }))}\n      {...props}\n    >\n      {loading && !asChild ? (\n        <>\n          <span className=\"invisible inline-flex items-center gap-[inherit]\">{children}</span>\n          <span className=\"absolute inset-0 inline-flex items-center justify-center\">\n            <Spinner />\n          </span>\n        </>\n      ) : loading ? (\n        <Spinner />\n      ) : (\n        children\n      )}\n    </Comp>\n  )\n}\n\nexport { Button, buttonVariants }\n"],"mappings":"+SASA,MAAM,EAAiB,EACrB,kuBACA,CACE,SAAU,CACR,QAAS,CACP,MACE,qIACF,UACE,kLACF,QACE,kbACF,OACE,sTACF,MACE,qSACF,KAAM,2GACR,EACA,MAAO,EACP,KAAM,CACJ,GAAI,2KACJ,GAAI,qLACJ,GAAI,8HACJ,GAAI,wFACJ,GAAI,oFACJ,KAAM,SACN,UAAW,qFACX,UAAW,gDACX,UAAW,UACX,UAAW,SACb,CACF,EACA,gBAAiB,CACf,QAAS,QACT,MAAO,UACP,KAAM,IACR,CACF,CACF,EAQA,SAAS,OAAO,CACd,WACA,YACA,UAAU,QACV,QAAQ,UACR,OAAO,KACP,UAAU,GACV,WACA,UAAU,GACV,GAAG,GACW,CAId,OACE,EAJW,EAAU,EAAK,KAAO,SAIjC,CACE,KAAO,EAAqB,IAAA,GAAX,SACjB,YAAU,SACV,eAAc,EACd,aAAY,EACZ,YAAW,EACX,eAAc,EACd,YAAW,EAAU,GAAO,IAAA,GAC5B,SAXe,GAAY,EAY3B,UAAW,EAAG,EAAe,CAAE,UAAS,QAAO,OAAM,WAAU,CAAC,CAAC,EACjE,GAAI,WAEH,GAAW,CAAC,EACX,EAAA,EAAA,CAAA,SAAA,CACE,EAAC,OAAD,CAAM,UAAU,mDAAoD,UAAe,CAAA,EACnF,EAAC,OAAD,CAAM,UAAU,oEACd,EAAC,EAAD,CAAU,CAAA,CACN,CAAA,CACN,CAAA,CAAA,EACA,EACF,EAAC,EAAD,CAAU,CAAA,EAEV,CAEE,CAAA,CAEV"}
+{"version":3,"file":"button.js","names":[],"sources":["../../src/components/button.tsx"],"sourcesContent":["import type * as React from 'react'\n\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { Slot } from 'radix-ui'\n\nimport { buttonColorVariants } from '../lib/button'\nimport { cn } from '../lib/utils'\nimport { Spinner } from './spinner'\n\nconst buttonVariants = cva(\n  \"focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 relative rounded-full border border-transparent bg-clip-padding text-sm font-semibold focus-visible:ring-3 aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all [&_svg]:transition-colors disabled:pointer-events-none disabled:opacity-50 disabled:data-[loading=true]:pointer-events-auto disabled:data-[loading=true]:cursor-not-allowed disabled:data-[loading=true]:opacity-100 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none\",\n  {\n    variants: {\n      variant: {\n        solid:\n          'bg-(--button-solid) text-(--button-solid-foreground) hover:bg-(--button-solid-hover) data-[loading=true]:hover:bg-(--button-solid)',\n        secondary:\n          'border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50',\n        outline:\n          'border-(--button-outline-border) bg-transparent text-(--button-outline-foreground) hover:bg-(--button-solid) hover:text-(--button-solid-foreground) hover:[&_svg]:text-(--button-solid-foreground) data-[loading=true]:hover:bg-background data-[loading=true]:hover:text-(--button-outline-foreground) aria-expanded:bg-(--button-solid) aria-expanded:text-(--button-solid-foreground) aria-expanded:[&_svg]:text-(--button-solid-foreground)',\n        subtle:\n          'bg-(--button-soft) text-(--button-soft-foreground) hover:bg-(--button-soft-hover) hover:text-(--button-soft-foreground) data-[loading=true]:hover:bg-(--button-soft) data-[loading=true]:hover:text-(--button-soft-foreground) aria-expanded:bg-(--button-soft-hover) aria-expanded:text-(--button-soft-foreground)',\n        ghost:\n          'text-(--button-ghost-foreground) hover:bg-(--button-ghost-hover) hover:text-(--button-ghost-foreground) data-[loading=true]:hover:bg-transparent data-[loading=true]:hover:text-(--button-ghost-foreground) aria-expanded:bg-(--button-ghost-hover) aria-expanded:text-(--button-ghost-foreground)',\n        link: 'text-(--button-link-foreground) underline-offset-4 hover:underline data-[loading=true]:hover:no-underline'\n      },\n      color: buttonColorVariants,\n      size: {\n        xs: \"h-7 gap-1 px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3\",\n        sm: \"h-8 gap-1 px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5\",\n        md: 'h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',\n        lg: 'h-10 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3',\n        xl: 'h-11 gap-2 px-3 has-data-[icon=inline-end]:pr-4 has-data-[icon=inline-start]:pl-4',\n        icon: 'size-9',\n        'icon-xs': \"size-7 in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3\",\n        'icon-sm': 'size-8 in-data-[slot=button-group]:rounded-lg',\n        'icon-lg': 'size-10',\n        'icon-xl': 'size-11'\n      }\n    },\n    defaultVariants: {\n      variant: 'solid',\n      color: 'primary',\n      size: 'md'\n    }\n  }\n)\n\nexport type ButtonProps = React.ComponentProps<'button'> &\n  VariantProps<typeof buttonVariants> & {\n    asChild?: boolean\n    loading?: boolean\n  }\n\nfunction Button({\n  children,\n  className,\n  variant = 'solid',\n  color = 'primary',\n  size = 'md',\n  asChild = false,\n  disabled,\n  loading = false,\n  ...props\n}: ButtonProps) {\n  const Comp = asChild ? Slot.Root : 'button'\n  const isDisabled = disabled || loading\n\n  return (\n    <Comp\n      type={!asChild ? 'button' : undefined}\n      data-slot=\"button\"\n      data-variant={variant}\n      data-color={color}\n      data-size={size}\n      data-loading={loading}\n      aria-busy={loading ? true : undefined}\n      disabled={isDisabled}\n      className={cn(buttonVariants({ variant, color, size, className }))}\n      {...props}\n    >\n      {loading && !asChild ? (\n        <>\n          <span className=\"invisible inline-flex items-center gap-[inherit]\">{children}</span>\n          <span className=\"absolute inset-0 inline-flex items-center justify-center\">\n            <Spinner />\n          </span>\n        </>\n      ) : loading ? (\n        <Spinner />\n      ) : (\n        children\n      )}\n    </Comp>\n  )\n}\n\nexport { Button, buttonVariants }\n"],"mappings":"+SASA,MAAM,EAAiB,EACrB,ouBACA,CACE,SAAU,CACR,QAAS,CACP,MACE,qIACF,UACE,kLACF,QACE,kbACF,OACE,sTACF,MACE,qSACF,KAAM,2GACR,EACA,MAAO,EACP,KAAM,CACJ,GAAI,2KACJ,GAAI,qLACJ,GAAI,8HACJ,GAAI,wFACJ,GAAI,oFACJ,KAAM,SACN,UAAW,qFACX,UAAW,gDACX,UAAW,UACX,UAAW,SACb,CACF,EACA,gBAAiB,CACf,QAAS,QACT,MAAO,UACP,KAAM,IACR,CACF,CACF,EAQA,SAAS,OAAO,CACd,WACA,YACA,UAAU,QACV,QAAQ,UACR,OAAO,KACP,UAAU,GACV,WACA,UAAU,GACV,GAAG,GACW,CAId,OACE,EAJW,EAAU,EAAK,KAAO,SAIjC,CACE,KAAO,EAAqB,IAAA,GAAX,SACjB,YAAU,SACV,eAAc,EACd,aAAY,EACZ,YAAW,EACX,eAAc,EACd,YAAW,EAAU,GAAO,IAAA,GAC5B,SAXe,GAAY,EAY3B,UAAW,EAAG,EAAe,CAAE,UAAS,QAAO,OAAM,WAAU,CAAC,CAAC,EACjE,GAAI,WAEH,GAAW,CAAC,EACX,EAAA,EAAA,CAAA,SAAA,CACE,EAAC,OAAD,CAAM,UAAU,mDAAoD,UAAe,CAAA,EACnF,EAAC,OAAD,CAAM,UAAU,oEACd,EAAC,EAAD,CAAU,CAAA,CACN,CAAA,CACN,CAAA,CAAA,EACA,EACF,EAAC,EAAD,CAAU,CAAA,EAEV,CAEE,CAAA,CAEV"}

package/dist/components/card.d.ts

@@ -3,7 +3,7 @@ import * as React from "react";
 
 //#region src/components/card.d.ts
 type CardProps = React.ComponentProps<'div'> & {
-  size?: 'sm' | 'md';
+  size?: 'sm' | 'md' | 'lg';
 };
 type CardHeaderProps = React.ComponentProps<'div'>;
 type CardTitleProps = React.ComponentProps<'div'>;

package/dist/components/card.js

@@ -1,2 +1,2 @@
-import"../chunk-CHh1Zzun.js";import{cn as e}from"../lib/utils.js";import{jsx as t}from"react/jsx-runtime";function Card({className:n,size:r=`md`,...i}){return t(`div`,{"data-slot":`card`,"data-size":r,className:e(`group/card flex flex-col gap-4 overflow-hidden rounded-xl py-4 text-sm bg-card text-card-foreground ring-foreground/10 ring-1`,`has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0`,`data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0`,`*:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl`,n),...i})}function CardHeader({className:n,...r}){return t(`div`,{"data-slot":`card-header`,className:e(`group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-4`,`group-data-[size=sm]/card:px-3 [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3`,`has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto]`,n),...r})}function CardTitle({className:n,...r}){return t(`div`,{"data-slot":`card-title`,className:e(`text-lg leading-snug font-bold group-data-[size=sm]/card:text-sm`,n),...r})}function CardDescription({className:n,...r}){return t(`div`,{"data-slot":`card-description`,className:e(`text-muted-foreground text-sm`,n),...r})}function CardAction({className:n,...r}){return t(`div`,{"data-slot":`card-action`,className:e(`col-start-2 row-span-2 row-start-1 self-start justify-self-end`,n),...r})}function CardContent({className:n,...r}){return t(`div`,{"data-slot":`card-content`,className:e(`px-4 group-data-[size=sm]/card:px-3`,n),...r})}function CardFooter({className:n,...r}){return t(`div`,{"data-slot":`card-footer`,className:e(`bg-muted/50 flex items-center rounded-b-xl border-t p-4`,`group-data-[size=sm]/card:p-3`,n),...r})}export{Card,CardAction,CardContent,CardDescription,CardFooter,CardHeader,CardTitle};
+import"../chunk-CHh1Zzun.js";import{cn as e}from"../lib/utils.js";import{jsx as t}from"react/jsx-runtime";function Card({className:n,size:r=`md`,...i}){return t(`div`,{"data-slot":`card`,"data-size":r,className:e(`group/card flex flex-col gap-4 overflow-hidden rounded-xl py-4 text-sm bg-card text-card-foreground ring-foreground/10 ring-1`,`has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0`,`data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0`,`data-[size=lg]:gap-6 data-[size=lg]:py-6 data-[size=lg]:has-data-[slot=card-footer]:pb-0`,`*:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl`,n),...i})}function CardHeader({className:n,...r}){return t(`div`,{"data-slot":`card-header`,className:e(`group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-4`,`group-data-[size=sm]/card:px-3 [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3`,`group-data-[size=lg]/card:px-6`,`has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto]`,n),...r})}function CardTitle({className:n,...r}){return t(`div`,{"data-slot":`card-title`,className:e(`text-lg leading-snug font-bold group-data-[size=sm]/card:text-sm group-data-[size=lg]/card:text-xl`,n),...r})}function CardDescription({className:n,...r}){return t(`div`,{"data-slot":`card-description`,className:e(`text-muted-foreground text-sm`,n),...r})}function CardAction({className:n,...r}){return t(`div`,{"data-slot":`card-action`,className:e(`col-start-2 row-span-2 row-start-1 self-start justify-self-end`,n),...r})}function CardContent({className:n,...r}){return t(`div`,{"data-slot":`card-content`,className:e(`px-4 group-data-[size=sm]/card:px-3 group-data-[size=lg]/card:px-6`,n),...r})}function CardFooter({className:n,...r}){return t(`div`,{"data-slot":`card-footer`,className:e(`bg-muted/50 flex items-center rounded-b-xl border-t p-4`,`group-data-[size=sm]/card:p-3 group-data-[size=lg]/card:p-6`,n),...r})}export{Card,CardAction,CardContent,CardDescription,CardFooter,CardHeader,CardTitle};
 //# sourceMappingURL=card.js.map

package/dist/components/card.js.map

@@ -1 +1 @@
-{"version":3,"file":"card.js","names":[],"sources":["../../src/components/card.tsx"],"sourcesContent":["import type * as React from 'react'\n\nimport { cn } from '../lib/utils'\n\nexport type CardProps = React.ComponentProps<'div'> & { size?: 'sm' | 'md' }\n\nexport type CardHeaderProps = React.ComponentProps<'div'>\n\nexport type CardTitleProps = React.ComponentProps<'div'>\n\nexport type CardDescriptionProps = React.ComponentProps<'div'>\n\nexport type CardActionProps = React.ComponentProps<'div'>\n\nexport type CardContentProps = React.ComponentProps<'div'>\n\nexport type CardFooterProps = React.ComponentProps<'div'>\n\nfunction Card({ className, size = 'md', ...props }: CardProps) {\n  return (\n    <div\n      data-slot=\"card\"\n      data-size={size}\n      className={cn(\n        'group/card flex flex-col gap-4 overflow-hidden rounded-xl py-4 text-sm bg-card text-card-foreground ring-foreground/10 ring-1',\n        'has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0',\n        'data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0',\n        '*:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl',\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardHeader({ className, ...props }: CardHeaderProps) {\n  return (\n    <div\n      data-slot=\"card-header\"\n      className={cn(\n        'group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-4',\n        'group-data-[size=sm]/card:px-3 [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3',\n        'has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto]',\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardTitle({ className, ...props }: CardTitleProps) {\n  return (\n    <div\n      data-slot=\"card-title\"\n      className={cn('text-lg leading-snug font-bold group-data-[size=sm]/card:text-sm', className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardDescription({ className, ...props }: CardDescriptionProps) {\n  return <div data-slot=\"card-description\" className={cn('text-muted-foreground text-sm', className)} {...props} />\n}\n\nfunction CardAction({ className, ...props }: CardActionProps) {\n  return (\n    <div\n      data-slot=\"card-action\"\n      className={cn('col-start-2 row-span-2 row-start-1 self-start justify-self-end', className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardContent({ className, ...props }: CardContentProps) {\n  return <div data-slot=\"card-content\" className={cn('px-4 group-data-[size=sm]/card:px-3', className)} {...props} />\n}\n\nfunction CardFooter({ className, ...props }: CardFooterProps) {\n  return (\n    <div\n      data-slot=\"card-footer\"\n      className={cn(\n        'bg-muted/50 flex items-center rounded-b-xl border-t p-4',\n        'group-data-[size=sm]/card:p-3',\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle }\n"],"mappings":"0GAkBA,SAAS,KAAK,CAAE,YAAW,OAAO,KAAM,GAAG,GAAoB,CAC7D,OACE,EAAC,MAAD,CACE,YAAU,OACV,YAAW,EACX,UAAW,EACT,gIACA,+DACA,2FACA,mEACA,CACF,EACA,GAAI,CACL,CAAA,CAEL,CAEA,SAAS,WAAW,CAAE,YAAW,GAAG,GAA0B,CAC5D,OACE,EAAC,MAAD,CACE,YAAU,cACV,UAAW,EACT,kGACA,6FACA,0GACA,CACF,EACA,GAAI,CACL,CAAA,CAEL,CAEA,SAAS,UAAU,CAAE,YAAW,GAAG,GAAyB,CAC1D,OACE,EAAC,MAAD,CACE,YAAU,aACV,UAAW,EAAG,mEAAoE,CAAS,EAC3F,GAAI,CACL,CAAA,CAEL,CAEA,SAAS,gBAAgB,CAAE,YAAW,GAAG,GAA+B,CACtE,OAAO,EAAC,MAAD,CAAK,YAAU,mBAAmB,UAAW,EAAG,gCAAiC,CAAS,EAAG,GAAI,CAAQ,CAAA,CAClH,CAEA,SAAS,WAAW,CAAE,YAAW,GAAG,GAA0B,CAC5D,OACE,EAAC,MAAD,CACE,YAAU,cACV,UAAW,EAAG,iEAAkE,CAAS,EACzF,GAAI,CACL,CAAA,CAEL,CAEA,SAAS,YAAY,CAAE,YAAW,GAAG,GAA2B,CAC9D,OAAO,EAAC,MAAD,CAAK,YAAU,eAAe,UAAW,EAAG,sCAAuC,CAAS,EAAG,GAAI,CAAQ,CAAA,CACpH,CAEA,SAAS,WAAW,CAAE,YAAW,GAAG,GAA0B,CAC5D,OACE,EAAC,MAAD,CACE,YAAU,cACV,UAAW,EACT,0DACA,gCACA,CACF,EACA,GAAI,CACL,CAAA,CAEL"}
+{"version":3,"file":"card.js","names":[],"sources":["../../src/components/card.tsx"],"sourcesContent":["import type * as React from 'react'\n\nimport { cn } from '../lib/utils'\n\nexport type CardProps = React.ComponentProps<'div'> & { size?: 'sm' | 'md' | 'lg' }\n\nexport type CardHeaderProps = React.ComponentProps<'div'>\n\nexport type CardTitleProps = React.ComponentProps<'div'>\n\nexport type CardDescriptionProps = React.ComponentProps<'div'>\n\nexport type CardActionProps = React.ComponentProps<'div'>\n\nexport type CardContentProps = React.ComponentProps<'div'>\n\nexport type CardFooterProps = React.ComponentProps<'div'>\n\nfunction Card({ className, size = 'md', ...props }: CardProps) {\n  return (\n    <div\n      data-slot=\"card\"\n      data-size={size}\n      className={cn(\n        'group/card flex flex-col gap-4 overflow-hidden rounded-xl py-4 text-sm bg-card text-card-foreground ring-foreground/10 ring-1',\n        'has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0',\n        'data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0',\n        'data-[size=lg]:gap-6 data-[size=lg]:py-6 data-[size=lg]:has-data-[slot=card-footer]:pb-0',\n        '*:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl',\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardHeader({ className, ...props }: CardHeaderProps) {\n  return (\n    <div\n      data-slot=\"card-header\"\n      className={cn(\n        'group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-4',\n        'group-data-[size=sm]/card:px-3 [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3',\n        'group-data-[size=lg]/card:px-6',\n        'has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto]',\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardTitle({ className, ...props }: CardTitleProps) {\n  return (\n    <div\n      data-slot=\"card-title\"\n      className={cn(\n        'text-lg leading-snug font-bold group-data-[size=sm]/card:text-sm group-data-[size=lg]/card:text-xl',\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardDescription({ className, ...props }: CardDescriptionProps) {\n  return <div data-slot=\"card-description\" className={cn('text-muted-foreground text-sm', className)} {...props} />\n}\n\nfunction CardAction({ className, ...props }: CardActionProps) {\n  return (\n    <div\n      data-slot=\"card-action\"\n      className={cn('col-start-2 row-span-2 row-start-1 self-start justify-self-end', className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardContent({ className, ...props }: CardContentProps) {\n  return (\n    <div\n      data-slot=\"card-content\"\n      className={cn('px-4 group-data-[size=sm]/card:px-3 group-data-[size=lg]/card:px-6', className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardFooter({ className, ...props }: CardFooterProps) {\n  return (\n    <div\n      data-slot=\"card-footer\"\n      className={cn(\n        'bg-muted/50 flex items-center rounded-b-xl border-t p-4',\n        'group-data-[size=sm]/card:p-3 group-data-[size=lg]/card:p-6',\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle }\n"],"mappings":"0GAkBA,SAAS,KAAK,CAAE,YAAW,OAAO,KAAM,GAAG,GAAoB,CAC7D,OACE,EAAC,MAAD,CACE,YAAU,OACV,YAAW,EACX,UAAW,EACT,gIACA,+DACA,2FACA,2FACA,mEACA,CACF,EACA,GAAI,CACL,CAAA,CAEL,CAEA,SAAS,WAAW,CAAE,YAAW,GAAG,GAA0B,CAC5D,OACE,EAAC,MAAD,CACE,YAAU,cACV,UAAW,EACT,kGACA,6FACA,iCACA,0GACA,CACF,EACA,GAAI,CACL,CAAA,CAEL,CAEA,SAAS,UAAU,CAAE,YAAW,GAAG,GAAyB,CAC1D,OACE,EAAC,MAAD,CACE,YAAU,aACV,UAAW,EACT,qGACA,CACF,EACA,GAAI,CACL,CAAA,CAEL,CAEA,SAAS,gBAAgB,CAAE,YAAW,GAAG,GAA+B,CACtE,OAAO,EAAC,MAAD,CAAK,YAAU,mBAAmB,UAAW,EAAG,gCAAiC,CAAS,EAAG,GAAI,CAAQ,CAAA,CAClH,CAEA,SAAS,WAAW,CAAE,YAAW,GAAG,GAA0B,CAC5D,OACE,EAAC,MAAD,CACE,YAAU,cACV,UAAW,EAAG,iEAAkE,CAAS,EACzF,GAAI,CACL,CAAA,CAEL,CAEA,SAAS,YAAY,CAAE,YAAW,GAAG,GAA2B,CAC9D,OACE,EAAC,MAAD,CACE,YAAU,eACV,UAAW,EAAG,qEAAsE,CAAS,EAC7F,GAAI,CACL,CAAA,CAEL,CAEA,SAAS,WAAW,CAAE,YAAW,GAAG,GAA0B,CAC5D,OACE,EAAC,MAAD,CACE,YAAU,cACV,UAAW,EACT,0DACA,8DACA,CACF,EACA,GAAI,CACL,CAAA,CAEL"}

package/dist/components/drawer.d.ts

@@ -21,6 +21,7 @@ type DrawerCloseProps = React.ComponentProps<typeof Dialog.Close>;
 type DrawerOverlayProps = React.ComponentProps<typeof Dialog.Overlay>;
 type DrawerContentProps = React.ComponentProps<typeof Dialog.Content> & {
   showCloseButton?: boolean;
+  overlayProps?: DrawerOverlayProps;
 };
 type DrawerHeaderProps = React.ComponentProps<'div'>;
 type DrawerBodyProps = React.ComponentProps<'div'>;
@@ -50,6 +51,7 @@ declare function DrawerContent({
   className,
   children,
   showCloseButton,
+  overlayProps,
   ...props
 }: DrawerContentProps): import("react/jsx-runtime").JSX.Element;
 declare function DrawerHeader({

package/dist/components/drawer.js

@@ -1,2 +1,2 @@
-import"../chunk-CHh1Zzun.js";import{cn as e}from"../lib/utils.js";import{Button as t}from"./button.js";import{IconX as n}from"@tabler/icons-react";import{Dialog as r}from"radix-ui";import{jsx as i,jsxs as a}from"react/jsx-runtime";import{cva as o}from"class-variance-authority";import*as s from"react";const c=o([`bg-background flex h-auto flex-col text-sm fixed z-50 outline-none duration-200`,`data-open:animate-in data-closed:animate-out`],{variants:{direction:{top:`inset-x-0 top-0 rounded-b-xl border-b data-closed:slide-out-to-top data-open:slide-in-from-top-10`,right:`inset-y-0 right-0 rounded-l-xl border-l data-closed:slide-out-to-right data-open:slide-in-from-right-10`,bottom:`inset-x-0 bottom-0 rounded-t-xl border-t data-closed:slide-out-to-bottom data-open:slide-in-from-bottom-10`,left:`inset-y-0 left-0 rounded-r-xl border-r data-closed:slide-out-to-left data-open:slide-in-from-left-10`},size:{sm:``,md:``,lg:``,xl:``,"2xl":``,"3xl":``,full:``}},compoundVariants:[{direction:[`left`,`right`],size:`sm`,className:`w-3/4 sm:max-w-sm`},{direction:[`left`,`right`],size:`md`,className:`w-4/5 sm:max-w-md`},{direction:[`left`,`right`],size:`lg`,className:`w-[90%] sm:max-w-lg`},{direction:[`left`,`right`],size:`xl`,className:`w-[90%] sm:max-w-195`},{direction:[`left`,`right`],size:`2xl`,className:`w-[90%] sm:max-w-240`},{direction:[`left`,`right`],size:`3xl`,className:`w-[90%] sm:max-w-300`},{direction:[`left`,`right`],size:`full`,className:`w-full`},{direction:`top`,size:`sm`,className:`mb-24 h-full max-h-96`},{direction:`top`,size:`md`,className:`mb-20 h-full max-h-112`},{direction:`top`,size:`lg`,className:`mb-12 h-full max-h-128`},{direction:`top`,size:`xl`,className:`mb-12 h-full max-h-195`},{direction:`top`,size:`2xl`,className:`mb-12 h-full max-h-240`},{direction:`top`,size:`3xl`,className:`mb-12 h-full max-h-300`},{direction:`top`,size:`full`,className:`mb-0 h-full`},{direction:`bottom`,size:`sm`,className:`mt-24 h-full max-h-96`},{direction:`bottom`,size:`md`,className:`mt-20 h-full max-h-112`},{direction:`bottom`,size:`lg`,className:`mt-12 h-full max-h-128`},{direction:`bottom`,size:`xl`,className:`mt-12 h-full max-h-195`},{direction:`bottom`,size:`2xl`,className:`mt-12 h-full max-h-240`},{direction:`bottom`,size:`3xl`,className:`mt-12 h-full max-h-300`},{direction:`bottom`,size:`full`,className:`mt-0 h-full`}],defaultVariants:{direction:`right`,size:`md`}}),l=s.createContext({size:`md`,direction:`right`,dismissible:!0});function Drawer({size:e=`md`,direction:t=`right`,dismissible:n=!0,...a}){let o=s.useMemo(()=>({size:e,direction:t,dismissible:n}),[e,t,n]);return i(l.Provider,{value:o,children:i(r.Root,{"data-slot":`drawer`,...a})})}function DrawerTrigger({...e}){return i(r.Trigger,{"data-slot":`drawer-trigger`,...e})}function DrawerPortal({...e}){return i(r.Portal,{"data-slot":`drawer-portal`,...e})}function DrawerClose({...e}){return i(r.Close,{"data-slot":`drawer-close`,...e})}function DrawerOverlay({className:t,...n}){return i(r.Overlay,{"data-slot":`drawer-overlay`,className:e(`bg-black/10 fixed inset-0 z-50`,`data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0`,`supports-backdrop-filter:backdrop-blur-xs`,t),...n})}function DrawerContent({className:o,children:u,showCloseButton:d=!0,...f}){let{size:p,direction:m,dismissible:h}=s.useContext(l);return a(DrawerPortal,{children:[i(DrawerOverlay,{}),a(r.Content,{"data-slot":`drawer-content`,className:e(c({size:p,direction:m}),o),...f,onEscapeKeyDown:e=>{h||e.preventDefault(),f.onEscapeKeyDown?.(e)},onInteractOutside:e=>{h||e.preventDefault(),f.onInteractOutside?.(e)},children:[u,d&&i(DrawerClose,{asChild:!0,children:a(t,{variant:`ghost`,className:`absolute top-3 right-3`,size:`icon-sm`,children:[i(n,{}),i(`span`,{className:`sr-only`,children:`Close`})]})})]})]})}function DrawerHeader({className:t,...n}){let{direction:r}=s.useContext(l);return i(`div`,{"data-slot":`drawer-header`,className:e(`p-4 flex flex-col gap-0.5 md:gap-0.5`,(r===`top`||r===`bottom`)&&`text-center md:text-left`,t),...n})}function DrawerBody({className:t,...n}){return i(`div`,{"data-slot":`drawer-body`,className:e(`px-4 pb-4 flex-1 min-h-0 overflow-y-auto`,t),...n})}function DrawerFooter({className:t,...n}){return i(`div`,{"data-slot":`drawer-footer`,className:e(`gap-2 p-4 mt-auto flex flex-col sm:flex-row sm:justify-end`,t),...n})}function DrawerTitle({className:t,...n}){return i(r.Title,{"data-slot":`drawer-title`,className:e(`text-foreground text-base font-medium`,t),...n})}function DrawerDescription({className:t,...n}){return i(r.Description,{"data-slot":`drawer-description`,className:e(`text-muted-foreground text-sm`,t),...n})}export{Drawer,DrawerBody,DrawerClose,DrawerContent,DrawerDescription,DrawerFooter,DrawerHeader,DrawerOverlay,DrawerPortal,DrawerTitle,DrawerTrigger};
+import"../chunk-CHh1Zzun.js";import{cn as e}from"../lib/utils.js";import{Button as t}from"./button.js";import{IconX as n}from"@tabler/icons-react";import{Dialog as r}from"radix-ui";import{jsx as i,jsxs as a}from"react/jsx-runtime";import{cva as o}from"class-variance-authority";import*as s from"react";const c=o([`bg-background flex h-auto flex-col text-sm fixed z-50 outline-none duration-200`,`data-open:animate-in data-closed:animate-out`],{variants:{direction:{top:`inset-x-0 top-0 rounded-b-xl border-b data-closed:slide-out-to-top data-open:slide-in-from-top-10`,right:`inset-y-0 right-0 rounded-l-xl border-l data-closed:slide-out-to-right data-open:slide-in-from-right-10`,bottom:`inset-x-0 bottom-0 rounded-t-xl border-t data-closed:slide-out-to-bottom data-open:slide-in-from-bottom-10`,left:`inset-y-0 left-0 rounded-r-xl border-r data-closed:slide-out-to-left data-open:slide-in-from-left-10`},size:{sm:``,md:``,lg:``,xl:``,"2xl":``,"3xl":``,full:``}},compoundVariants:[{direction:[`left`,`right`],size:`sm`,className:`w-3/4 sm:max-w-sm`},{direction:[`left`,`right`],size:`md`,className:`w-4/5 sm:max-w-md`},{direction:[`left`,`right`],size:`lg`,className:`w-[90%] sm:max-w-lg`},{direction:[`left`,`right`],size:`xl`,className:`w-[90%] sm:max-w-195`},{direction:[`left`,`right`],size:`2xl`,className:`w-[90%] sm:max-w-240`},{direction:[`left`,`right`],size:`3xl`,className:`w-[90%] sm:max-w-300`},{direction:[`left`,`right`],size:`full`,className:`w-full`},{direction:`top`,size:`sm`,className:`mb-24 h-full max-h-96`},{direction:`top`,size:`md`,className:`mb-20 h-full max-h-112`},{direction:`top`,size:`lg`,className:`mb-12 h-full max-h-128`},{direction:`top`,size:`xl`,className:`mb-12 h-full max-h-195`},{direction:`top`,size:`2xl`,className:`mb-12 h-full max-h-240`},{direction:`top`,size:`3xl`,className:`mb-12 h-full max-h-300`},{direction:`top`,size:`full`,className:`mb-0 h-full`},{direction:`bottom`,size:`sm`,className:`mt-24 h-full max-h-96`},{direction:`bottom`,size:`md`,className:`mt-20 h-full max-h-112`},{direction:`bottom`,size:`lg`,className:`mt-12 h-full max-h-128`},{direction:`bottom`,size:`xl`,className:`mt-12 h-full max-h-195`},{direction:`bottom`,size:`2xl`,className:`mt-12 h-full max-h-240`},{direction:`bottom`,size:`3xl`,className:`mt-12 h-full max-h-300`},{direction:`bottom`,size:`full`,className:`mt-0 h-full`}],defaultVariants:{direction:`right`,size:`md`}}),l=s.createContext({size:`md`,direction:`right`,dismissible:!0});function Drawer({size:e=`md`,direction:t=`right`,dismissible:n=!0,...a}){let o=s.useMemo(()=>({size:e,direction:t,dismissible:n}),[e,t,n]);return i(l.Provider,{value:o,children:i(r.Root,{"data-slot":`drawer`,...a})})}function DrawerTrigger({...e}){return i(r.Trigger,{"data-slot":`drawer-trigger`,...e})}function DrawerPortal({...e}){return i(r.Portal,{"data-slot":`drawer-portal`,...e})}function DrawerClose({...e}){return i(r.Close,{"data-slot":`drawer-close`,...e})}function DrawerOverlay({className:t,...n}){return i(r.Overlay,{"data-slot":`drawer-overlay`,className:e(`bg-black/10 fixed inset-0 z-50`,`data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0`,`supports-backdrop-filter:backdrop-blur-xs`,t),...n})}function DrawerContent({className:o,children:u,showCloseButton:d=!0,overlayProps:f,...p}){let{size:m,direction:h,dismissible:g}=s.useContext(l);return a(DrawerPortal,{children:[i(DrawerOverlay,{...f}),a(r.Content,{"data-slot":`drawer-content`,className:e(c({size:m,direction:h}),o),...p,onEscapeKeyDown:e=>{g||e.preventDefault(),p.onEscapeKeyDown?.(e)},onInteractOutside:e=>{g||e.preventDefault(),p.onInteractOutside?.(e)},children:[u,d&&i(DrawerClose,{asChild:!0,children:a(t,{variant:`ghost`,className:`absolute top-3 right-3`,size:`icon-sm`,children:[i(n,{}),i(`span`,{className:`sr-only`,children:`Close`})]})})]})]})}function DrawerHeader({className:t,...n}){let{direction:r}=s.useContext(l);return i(`div`,{"data-slot":`drawer-header`,className:e(`p-4 flex flex-col gap-0.5 md:gap-0.5`,(r===`top`||r===`bottom`)&&`text-center md:text-left`,t),...n})}function DrawerBody({className:t,...n}){return i(`div`,{"data-slot":`drawer-body`,className:e(`px-4 pb-4 flex-1 min-h-0 overflow-y-auto`,t),...n})}function DrawerFooter({className:t,...n}){return i(`div`,{"data-slot":`drawer-footer`,className:e(`gap-2 p-4 mt-auto flex flex-col sm:flex-row sm:justify-end`,t),...n})}function DrawerTitle({className:t,...n}){return i(r.Title,{"data-slot":`drawer-title`,className:e(`text-foreground text-base font-medium`,t),...n})}function DrawerDescription({className:t,...n}){return i(r.Description,{"data-slot":`drawer-description`,className:e(`text-muted-foreground text-sm`,t),...n})}export{Drawer,DrawerBody,DrawerClose,DrawerContent,DrawerDescription,DrawerFooter,DrawerHeader,DrawerOverlay,DrawerPortal,DrawerTitle,DrawerTrigger};
 //# sourceMappingURL=drawer.js.map

package/dist/components/drawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"drawer.js","names":["DrawerPrimitive"],"sources":["../../src/components/drawer.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { IconX } from '@tabler/icons-react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { Dialog as DrawerPrimitive } from 'radix-ui'\n\nimport { cn } from '../lib/utils'\nimport { Button } from './button'\n\nconst drawerContentVariants = cva(\n  [\n    'bg-background flex h-auto flex-col text-sm fixed z-50 outline-none duration-200',\n    'data-open:animate-in data-closed:animate-out'\n  ],\n  {\n    variants: {\n      direction: {\n        top: 'inset-x-0 top-0 rounded-b-xl border-b data-closed:slide-out-to-top data-open:slide-in-from-top-10',\n        right:\n          'inset-y-0 right-0 rounded-l-xl border-l data-closed:slide-out-to-right data-open:slide-in-from-right-10',\n        bottom:\n          'inset-x-0 bottom-0 rounded-t-xl border-t data-closed:slide-out-to-bottom data-open:slide-in-from-bottom-10',\n        left: 'inset-y-0 left-0 rounded-r-xl border-r data-closed:slide-out-to-left data-open:slide-in-from-left-10'\n      },\n      size: {\n        sm: '',\n        md: '',\n        lg: '',\n        xl: '',\n        '2xl': '',\n        '3xl': '',\n        full: ''\n      }\n    },\n    compoundVariants: [\n      { direction: ['left', 'right'], size: 'sm', className: 'w-3/4 sm:max-w-sm' },\n      { direction: ['left', 'right'], size: 'md', className: 'w-4/5 sm:max-w-md' },\n      { direction: ['left', 'right'], size: 'lg', className: 'w-[90%] sm:max-w-lg' },\n      { direction: ['left', 'right'], size: 'xl', className: 'w-[90%] sm:max-w-195' },\n      { direction: ['left', 'right'], size: '2xl', className: 'w-[90%] sm:max-w-240' },\n      { direction: ['left', 'right'], size: '3xl', className: 'w-[90%] sm:max-w-300' },\n      { direction: ['left', 'right'], size: 'full', className: 'w-full' },\n      { direction: 'top', size: 'sm', className: 'mb-24 h-full max-h-96' },\n      { direction: 'top', size: 'md', className: 'mb-20 h-full max-h-112' },\n      { direction: 'top', size: 'lg', className: 'mb-12 h-full max-h-128' },\n      { direction: 'top', size: 'xl', className: 'mb-12 h-full max-h-195' },\n      { direction: 'top', size: '2xl', className: 'mb-12 h-full max-h-240' },\n      { direction: 'top', size: '3xl', className: 'mb-12 h-full max-h-300' },\n      { direction: 'top', size: 'full', className: 'mb-0 h-full' },\n      { direction: 'bottom', size: 'sm', className: 'mt-24 h-full max-h-96' },\n      { direction: 'bottom', size: 'md', className: 'mt-20 h-full max-h-112' },\n      { direction: 'bottom', size: 'lg', className: 'mt-12 h-full max-h-128' },\n      { direction: 'bottom', size: 'xl', className: 'mt-12 h-full max-h-195' },\n      { direction: 'bottom', size: '2xl', className: 'mt-12 h-full max-h-240' },\n      { direction: 'bottom', size: '3xl', className: 'mt-12 h-full max-h-300' },\n      { direction: 'bottom', size: 'full', className: 'mt-0 h-full' }\n    ],\n    defaultVariants: {\n      direction: 'right',\n      size: 'md'\n    }\n  }\n)\n\ntype DrawerDirection = NonNullable<VariantProps<typeof drawerContentVariants>['direction']>\ntype DrawerSize = NonNullable<VariantProps<typeof drawerContentVariants>['size']>\ntype DrawerContextValue = { size: DrawerSize; direction: DrawerDirection; dismissible: boolean }\nconst DrawerContext = React.createContext<DrawerContextValue>({ size: 'md', direction: 'right', dismissible: true })\n\nexport type DrawerProps = React.ComponentProps<typeof DrawerPrimitive.Root> & {\n  size?: DrawerSize\n  direction?: DrawerDirection\n  dismissible?: boolean\n}\nexport type DrawerTriggerProps = React.ComponentProps<typeof DrawerPrimitive.Trigger>\nexport type DrawerPortalProps = React.ComponentProps<typeof DrawerPrimitive.Portal>\nexport type DrawerCloseProps = React.ComponentProps<typeof DrawerPrimitive.Close>\nexport type DrawerOverlayProps = React.ComponentProps<typeof DrawerPrimitive.Overlay>\nexport type DrawerContentProps = React.ComponentProps<typeof DrawerPrimitive.Content> & { showCloseButton?: boolean }\nexport type DrawerHeaderProps = React.ComponentProps<'div'>\nexport type DrawerBodyProps = React.ComponentProps<'div'>\nexport type DrawerFooterProps = React.ComponentProps<'div'>\nexport type DrawerTitleProps = React.ComponentProps<typeof DrawerPrimitive.Title>\nexport type DrawerDescriptionProps = React.ComponentProps<typeof DrawerPrimitive.Description>\n\nfunction Drawer({ size = 'md', direction = 'right', dismissible = true, ...props }: DrawerProps) {\n  const contextValue = React.useMemo<DrawerContextValue>(\n    () => ({ size, direction, dismissible }),\n    [size, direction, dismissible]\n  )\n\n  return (\n    <DrawerContext.Provider value={contextValue}>\n      <DrawerPrimitive.Root data-slot=\"drawer\" {...props} />\n    </DrawerContext.Provider>\n  )\n}\n\nfunction DrawerTrigger({ ...props }: DrawerTriggerProps) {\n  return <DrawerPrimitive.Trigger data-slot=\"drawer-trigger\" {...props} />\n}\n\nfunction DrawerPortal({ ...props }: DrawerPortalProps) {\n  return <DrawerPrimitive.Portal data-slot=\"drawer-portal\" {...props} />\n}\n\nfunction DrawerClose({ ...props }: DrawerCloseProps) {\n  return <DrawerPrimitive.Close data-slot=\"drawer-close\" {...props} />\n}\n\nfunction DrawerOverlay({ className, ...props }: DrawerOverlayProps) {\n  return (\n    <DrawerPrimitive.Overlay\n      data-slot=\"drawer-overlay\"\n      className={cn(\n        'bg-black/10 fixed inset-0 z-50',\n        'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0',\n        'supports-backdrop-filter:backdrop-blur-xs',\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerContent({ className, children, showCloseButton = true, ...props }: DrawerContentProps) {\n  const { size, direction, dismissible } = React.useContext(DrawerContext)\n\n  return (\n    <DrawerPortal>\n      <DrawerOverlay />\n      <DrawerPrimitive.Content\n        data-slot=\"drawer-content\"\n        className={cn(drawerContentVariants({ size, direction }), className)}\n        {...props}\n        onEscapeKeyDown={(event) => {\n          if (!dismissible) event.preventDefault()\n          props.onEscapeKeyDown?.(event)\n        }}\n        onInteractOutside={(event) => {\n          if (!dismissible) event.preventDefault()\n          props.onInteractOutside?.(event)\n        }}\n      >\n        {children}\n        {showCloseButton && (\n          <DrawerClose asChild>\n            <Button variant=\"ghost\" className=\"absolute top-3 right-3\" size=\"icon-sm\">\n              <IconX />\n              <span className=\"sr-only\">Close</span>\n            </Button>\n          </DrawerClose>\n        )}\n      </DrawerPrimitive.Content>\n    </DrawerPortal>\n  )\n}\n\nfunction DrawerHeader({ className, ...props }: DrawerHeaderProps) {\n  const { direction } = React.useContext(DrawerContext)\n  const isVertical = direction === 'top' || direction === 'bottom'\n\n  return (\n    <div\n      data-slot=\"drawer-header\"\n      className={cn('p-4 flex flex-col gap-0.5 md:gap-0.5', isVertical && 'text-center md:text-left', className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerBody({ className, ...props }: DrawerBodyProps) {\n  return (\n    <div data-slot=\"drawer-body\" className={cn('px-4 pb-4 flex-1 min-h-0 overflow-y-auto', className)} {...props} />\n  )\n}\n\nfunction DrawerFooter({ className, ...props }: DrawerFooterProps) {\n  return (\n    <div\n      data-slot=\"drawer-footer\"\n      className={cn('gap-2 p-4 mt-auto flex flex-col sm:flex-row sm:justify-end', className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerTitle({ className, ...props }: DrawerTitleProps) {\n  return (\n    <DrawerPrimitive.Title\n      data-slot=\"drawer-title\"\n      className={cn('text-foreground text-base font-medium', className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerDescription({ className, ...props }: DrawerDescriptionProps) {\n  return (\n    <DrawerPrimitive.Description\n      data-slot=\"drawer-description\"\n      className={cn('text-muted-foreground text-sm', className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Drawer,\n  DrawerBody,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerOverlay,\n  DrawerPortal,\n  DrawerTitle,\n  DrawerTrigger\n}\n"],"mappings":"8SASA,MAAM,EAAwB,EAC5B,CACE,kFACA,8CACF,EACA,CACE,SAAU,CACR,UAAW,CACT,IAAK,oGACL,MACE,0GACF,OACE,6GACF,KAAM,sGACR,EACA,KAAM,CACJ,GAAI,GACJ,GAAI,GACJ,GAAI,GACJ,GAAI,GACJ,MAAO,GACP,MAAO,GACP,KAAM,EACR,CACF,EACA,iBAAkB,CAChB,CAAE,UAAW,CAAC,OAAQ,OAAO,EAAG,KAAM,KAAM,UAAW,mBAAoB,EAC3E,CAAE,UAAW,CAAC,OAAQ,OAAO,EAAG,KAAM,KAAM,UAAW,mBAAoB,EAC3E,CAAE,UAAW,CAAC,OAAQ,OAAO,EAAG,KAAM,KAAM,UAAW,qBAAsB,EAC7E,CAAE,UAAW,CAAC,OAAQ,OAAO,EAAG,KAAM,KAAM,UAAW,sBAAuB,EAC9E,CAAE,UAAW,CAAC,OAAQ,OAAO,EAAG,KAAM,MAAO,UAAW,sBAAuB,EAC/E,CAAE,UAAW,CAAC,OAAQ,OAAO,EAAG,KAAM,MAAO,UAAW,sBAAuB,EAC/E,CAAE,UAAW,CAAC,OAAQ,OAAO,EAAG,KAAM,OAAQ,UAAW,QAAS,EAClE,CAAE,UAAW,MAAO,KAAM,KAAM,UAAW,uBAAwB,EACnE,CAAE,UAAW,MAAO,KAAM,KAAM,UAAW,wBAAyB,EACpE,CAAE,UAAW,MAAO,KAAM,KAAM,UAAW,wBAAyB,EACpE,CAAE,UAAW,MAAO,KAAM,KAAM,UAAW,wBAAyB,EACpE,CAAE,UAAW,MAAO,KAAM,MAAO,UAAW,wBAAyB,EACrE,CAAE,UAAW,MAAO,KAAM,MAAO,UAAW,wBAAyB,EACrE,CAAE,UAAW,MAAO,KAAM,OAAQ,UAAW,aAAc,EAC3D,CAAE,UAAW,SAAU,KAAM,KAAM,UAAW,uBAAwB,EACtE,CAAE,UAAW,SAAU,KAAM,KAAM,UAAW,wBAAyB,EACvE,CAAE,UAAW,SAAU,KAAM,KAAM,UAAW,wBAAyB,EACvE,CAAE,UAAW,SAAU,KAAM,KAAM,UAAW,wBAAyB,EACvE,CAAE,UAAW,SAAU,KAAM,MAAO,UAAW,wBAAyB,EACxE,CAAE,UAAW,SAAU,KAAM,MAAO,UAAW,wBAAyB,EACxE,CAAE,UAAW,SAAU,KAAM,OAAQ,UAAW,aAAc,CAChE,EACA,gBAAiB,CACf,UAAW,QACX,KAAM,IACR,CACF,CACF,EAKM,EAAgB,EAAM,cAAkC,CAAE,KAAM,KAAM,UAAW,QAAS,YAAa,EAAK,CAAC,EAkBnH,SAAS,OAAO,CAAE,OAAO,KAAM,YAAY,QAAS,cAAc,GAAM,GAAG,GAAsB,CAC/F,IAAM,EAAe,EAAM,aAClB,CAAE,OAAM,YAAW,aAAY,GACtC,CAAC,EAAM,EAAW,CAAW,CAC/B,EAEA,OACE,EAAC,EAAc,SAAf,CAAwB,MAAO,WAC7B,EAACA,EAAgB,KAAjB,CAAsB,YAAU,SAAS,GAAI,CAAQ,CAAA,CAC/B,CAAA,CAE5B,CAEA,SAAS,cAAc,CAAE,GAAG,GAA6B,CACvD,OAAO,EAACA,EAAgB,QAAjB,CAAyB,YAAU,iBAAiB,GAAI,CAAQ,CAAA,CACzE,CAEA,SAAS,aAAa,CAAE,GAAG,GAA4B,CACrD,OAAO,EAACA,EAAgB,OAAjB,CAAwB,YAAU,gBAAgB,GAAI,CAAQ,CAAA,CACvE,CAEA,SAAS,YAAY,CAAE,GAAG,GAA2B,CACnD,OAAO,EAACA,EAAgB,MAAjB,CAAuB,YAAU,eAAe,GAAI,CAAQ,CAAA,CACrE,CAEA,SAAS,cAAc,CAAE,YAAW,GAAG,GAA6B,CAClE,OACE,EAACA,EAAgB,QAAjB,CACE,YAAU,iBACV,UAAW,EACT,iCACA,0FACA,4CACA,CACF,EACA,GAAI,CACL,CAAA,CAEL,CAEA,SAAS,cAAc,CAAE,YAAW,WAAU,kBAAkB,GAAM,GAAG,GAA6B,CACpG,GAAM,CAAE,OAAM,YAAW,eAAgB,EAAM,WAAW,CAAa,EAEvE,OACE,EAAC,aAAD,CAAA,SAAA,CACE,EAAC,cAAD,CAAgB,CAAA,EAChB,EAACA,EAAgB,QAAjB,CACE,YAAU,iBACV,UAAW,EAAG,EAAsB,CAAE,OAAM,WAAU,CAAC,EAAG,CAAS,EACnE,GAAI,EACJ,gBAAkB,GAAU,CACrB,GAAa,EAAM,eAAe,EACvC,EAAM,kBAAkB,CAAK,CAC/B,EACA,kBAAoB,GAAU,CACvB,GAAa,EAAM,eAAe,EACvC,EAAM,oBAAoB,CAAK,CACjC,WAXF,CAaG,EACA,GACC,EAAC,YAAD,CAAa,QAAA,YACX,EAAC,EAAD,CAAQ,QAAQ,QAAQ,UAAU,yBAAyB,KAAK,mBAAhE,CACE,EAAC,EAAD,CAAQ,CAAA,EACR,EAAC,OAAD,CAAM,UAAU,mBAAU,OAAW,CAAA,CAC/B,GACG,CAAA,CAEQ,GACb,CAAA,CAAA,CAElB,CAEA,SAAS,aAAa,CAAE,YAAW,GAAG,GAA4B,CAChE,GAAM,CAAE,aAAc,EAAM,WAAW,CAAa,EAGpD,OACE,EAAC,MAAD,CACE,YAAU,gBACV,UAAW,EAAG,wCALC,IAAc,OAAS,IAAc,WAKgB,2BAA4B,CAAS,EACzG,GAAI,CACL,CAAA,CAEL,CAEA,SAAS,WAAW,CAAE,YAAW,GAAG,GAA0B,CAC5D,OACE,EAAC,MAAD,CAAK,YAAU,cAAc,UAAW,EAAG,2CAA4C,CAAS,EAAG,GAAI,CAAQ,CAAA,CAEnH,CAEA,SAAS,aAAa,CAAE,YAAW,GAAG,GAA4B,CAChE,OACE,EAAC,MAAD,CACE,YAAU,gBACV,UAAW,EAAG,6DAA8D,CAAS,EACrF,GAAI,CACL,CAAA,CAEL,CAEA,SAAS,YAAY,CAAE,YAAW,GAAG,GAA2B,CAC9D,OACE,EAACA,EAAgB,MAAjB,CACE,YAAU,eACV,UAAW,EAAG,wCAAyC,CAAS,EAChE,GAAI,CACL,CAAA,CAEL,CAEA,SAAS,kBAAkB,CAAE,YAAW,GAAG,GAAiC,CAC1E,OACE,EAACA,EAAgB,YAAjB,CACE,YAAU,qBACV,UAAW,EAAG,gCAAiC,CAAS,EACxD,GAAI,CACL,CAAA,CAEL"}
+{"version":3,"file":"drawer.js","names":["DrawerPrimitive"],"sources":["../../src/components/drawer.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { IconX } from '@tabler/icons-react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { Dialog as DrawerPrimitive } from 'radix-ui'\n\nimport { cn } from '../lib/utils'\nimport { Button } from './button'\n\nconst drawerContentVariants = cva(\n  [\n    'bg-background flex h-auto flex-col text-sm fixed z-50 outline-none duration-200',\n    'data-open:animate-in data-closed:animate-out'\n  ],\n  {\n    variants: {\n      direction: {\n        top: 'inset-x-0 top-0 rounded-b-xl border-b data-closed:slide-out-to-top data-open:slide-in-from-top-10',\n        right:\n          'inset-y-0 right-0 rounded-l-xl border-l data-closed:slide-out-to-right data-open:slide-in-from-right-10',\n        bottom:\n          'inset-x-0 bottom-0 rounded-t-xl border-t data-closed:slide-out-to-bottom data-open:slide-in-from-bottom-10',\n        left: 'inset-y-0 left-0 rounded-r-xl border-r data-closed:slide-out-to-left data-open:slide-in-from-left-10'\n      },\n      size: {\n        sm: '',\n        md: '',\n        lg: '',\n        xl: '',\n        '2xl': '',\n        '3xl': '',\n        full: ''\n      }\n    },\n    compoundVariants: [\n      { direction: ['left', 'right'], size: 'sm', className: 'w-3/4 sm:max-w-sm' },\n      { direction: ['left', 'right'], size: 'md', className: 'w-4/5 sm:max-w-md' },\n      { direction: ['left', 'right'], size: 'lg', className: 'w-[90%] sm:max-w-lg' },\n      { direction: ['left', 'right'], size: 'xl', className: 'w-[90%] sm:max-w-195' },\n      { direction: ['left', 'right'], size: '2xl', className: 'w-[90%] sm:max-w-240' },\n      { direction: ['left', 'right'], size: '3xl', className: 'w-[90%] sm:max-w-300' },\n      { direction: ['left', 'right'], size: 'full', className: 'w-full' },\n      { direction: 'top', size: 'sm', className: 'mb-24 h-full max-h-96' },\n      { direction: 'top', size: 'md', className: 'mb-20 h-full max-h-112' },\n      { direction: 'top', size: 'lg', className: 'mb-12 h-full max-h-128' },\n      { direction: 'top', size: 'xl', className: 'mb-12 h-full max-h-195' },\n      { direction: 'top', size: '2xl', className: 'mb-12 h-full max-h-240' },\n      { direction: 'top', size: '3xl', className: 'mb-12 h-full max-h-300' },\n      { direction: 'top', size: 'full', className: 'mb-0 h-full' },\n      { direction: 'bottom', size: 'sm', className: 'mt-24 h-full max-h-96' },\n      { direction: 'bottom', size: 'md', className: 'mt-20 h-full max-h-112' },\n      { direction: 'bottom', size: 'lg', className: 'mt-12 h-full max-h-128' },\n      { direction: 'bottom', size: 'xl', className: 'mt-12 h-full max-h-195' },\n      { direction: 'bottom', size: '2xl', className: 'mt-12 h-full max-h-240' },\n      { direction: 'bottom', size: '3xl', className: 'mt-12 h-full max-h-300' },\n      { direction: 'bottom', size: 'full', className: 'mt-0 h-full' }\n    ],\n    defaultVariants: {\n      direction: 'right',\n      size: 'md'\n    }\n  }\n)\n\ntype DrawerDirection = NonNullable<VariantProps<typeof drawerContentVariants>['direction']>\ntype DrawerSize = NonNullable<VariantProps<typeof drawerContentVariants>['size']>\ntype DrawerContextValue = { size: DrawerSize; direction: DrawerDirection; dismissible: boolean }\nconst DrawerContext = React.createContext<DrawerContextValue>({ size: 'md', direction: 'right', dismissible: true })\n\nexport type DrawerProps = React.ComponentProps<typeof DrawerPrimitive.Root> & {\n  size?: DrawerSize\n  direction?: DrawerDirection\n  dismissible?: boolean\n}\nexport type DrawerTriggerProps = React.ComponentProps<typeof DrawerPrimitive.Trigger>\nexport type DrawerPortalProps = React.ComponentProps<typeof DrawerPrimitive.Portal>\nexport type DrawerCloseProps = React.ComponentProps<typeof DrawerPrimitive.Close>\nexport type DrawerOverlayProps = React.ComponentProps<typeof DrawerPrimitive.Overlay>\nexport type DrawerContentProps = React.ComponentProps<typeof DrawerPrimitive.Content> & {\n  showCloseButton?: boolean\n  overlayProps?: DrawerOverlayProps\n}\nexport type DrawerHeaderProps = React.ComponentProps<'div'>\nexport type DrawerBodyProps = React.ComponentProps<'div'>\nexport type DrawerFooterProps = React.ComponentProps<'div'>\nexport type DrawerTitleProps = React.ComponentProps<typeof DrawerPrimitive.Title>\nexport type DrawerDescriptionProps = React.ComponentProps<typeof DrawerPrimitive.Description>\n\nfunction Drawer({ size = 'md', direction = 'right', dismissible = true, ...props }: DrawerProps) {\n  const contextValue = React.useMemo<DrawerContextValue>(\n    () => ({ size, direction, dismissible }),\n    [size, direction, dismissible]\n  )\n\n  return (\n    <DrawerContext.Provider value={contextValue}>\n      <DrawerPrimitive.Root data-slot=\"drawer\" {...props} />\n    </DrawerContext.Provider>\n  )\n}\n\nfunction DrawerTrigger({ ...props }: DrawerTriggerProps) {\n  return <DrawerPrimitive.Trigger data-slot=\"drawer-trigger\" {...props} />\n}\n\nfunction DrawerPortal({ ...props }: DrawerPortalProps) {\n  return <DrawerPrimitive.Portal data-slot=\"drawer-portal\" {...props} />\n}\n\nfunction DrawerClose({ ...props }: DrawerCloseProps) {\n  return <DrawerPrimitive.Close data-slot=\"drawer-close\" {...props} />\n}\n\nfunction DrawerOverlay({ className, ...props }: DrawerOverlayProps) {\n  return (\n    <DrawerPrimitive.Overlay\n      data-slot=\"drawer-overlay\"\n      className={cn(\n        'bg-black/10 fixed inset-0 z-50',\n        'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0',\n        'supports-backdrop-filter:backdrop-blur-xs',\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerContent({ className, children, showCloseButton = true, overlayProps, ...props }: DrawerContentProps) {\n  const { size, direction, dismissible } = React.useContext(DrawerContext)\n\n  return (\n    <DrawerPortal>\n      <DrawerOverlay {...overlayProps} />\n      <DrawerPrimitive.Content\n        data-slot=\"drawer-content\"\n        className={cn(drawerContentVariants({ size, direction }), className)}\n        {...props}\n        onEscapeKeyDown={(event) => {\n          if (!dismissible) event.preventDefault()\n          props.onEscapeKeyDown?.(event)\n        }}\n        onInteractOutside={(event) => {\n          if (!dismissible) event.preventDefault()\n          props.onInteractOutside?.(event)\n        }}\n      >\n        {children}\n        {showCloseButton && (\n          <DrawerClose asChild>\n            <Button variant=\"ghost\" className=\"absolute top-3 right-3\" size=\"icon-sm\">\n              <IconX />\n              <span className=\"sr-only\">Close</span>\n            </Button>\n          </DrawerClose>\n        )}\n      </DrawerPrimitive.Content>\n    </DrawerPortal>\n  )\n}\n\nfunction DrawerHeader({ className, ...props }: DrawerHeaderProps) {\n  const { direction } = React.useContext(DrawerContext)\n  const isVertical = direction === 'top' || direction === 'bottom'\n\n  return (\n    <div\n      data-slot=\"drawer-header\"\n      className={cn('p-4 flex flex-col gap-0.5 md:gap-0.5', isVertical && 'text-center md:text-left', className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerBody({ className, ...props }: DrawerBodyProps) {\n  return (\n    <div data-slot=\"drawer-body\" className={cn('px-4 pb-4 flex-1 min-h-0 overflow-y-auto', className)} {...props} />\n  )\n}\n\nfunction DrawerFooter({ className, ...props }: DrawerFooterProps) {\n  return (\n    <div\n      data-slot=\"drawer-footer\"\n      className={cn('gap-2 p-4 mt-auto flex flex-col sm:flex-row sm:justify-end', className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerTitle({ className, ...props }: DrawerTitleProps) {\n  return (\n    <DrawerPrimitive.Title\n      data-slot=\"drawer-title\"\n      className={cn('text-foreground text-base font-medium', className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerDescription({ className, ...props }: DrawerDescriptionProps) {\n  return (\n    <DrawerPrimitive.Description\n      data-slot=\"drawer-description\"\n      className={cn('text-muted-foreground text-sm', className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Drawer,\n  DrawerBody,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerOverlay,\n  DrawerPortal,\n  DrawerTitle,\n  DrawerTrigger\n}\n"],"mappings":"8SASA,MAAM,EAAwB,EAC5B,CACE,kFACA,8CACF,EACA,CACE,SAAU,CACR,UAAW,CACT,IAAK,oGACL,MACE,0GACF,OACE,6GACF,KAAM,sGACR,EACA,KAAM,CACJ,GAAI,GACJ,GAAI,GACJ,GAAI,GACJ,GAAI,GACJ,MAAO,GACP,MAAO,GACP,KAAM,EACR,CACF,EACA,iBAAkB,CAChB,CAAE,UAAW,CAAC,OAAQ,OAAO,EAAG,KAAM,KAAM,UAAW,mBAAoB,EAC3E,CAAE,UAAW,CAAC,OAAQ,OAAO,EAAG,KAAM,KAAM,UAAW,mBAAoB,EAC3E,CAAE,UAAW,CAAC,OAAQ,OAAO,EAAG,KAAM,KAAM,UAAW,qBAAsB,EAC7E,CAAE,UAAW,CAAC,OAAQ,OAAO,EAAG,KAAM,KAAM,UAAW,sBAAuB,EAC9E,CAAE,UAAW,CAAC,OAAQ,OAAO,EAAG,KAAM,MAAO,UAAW,sBAAuB,EAC/E,CAAE,UAAW,CAAC,OAAQ,OAAO,EAAG,KAAM,MAAO,UAAW,sBAAuB,EAC/E,CAAE,UAAW,CAAC,OAAQ,OAAO,EAAG,KAAM,OAAQ,UAAW,QAAS,EAClE,CAAE,UAAW,MAAO,KAAM,KAAM,UAAW,uBAAwB,EACnE,CAAE,UAAW,MAAO,KAAM,KAAM,UAAW,wBAAyB,EACpE,CAAE,UAAW,MAAO,KAAM,KAAM,UAAW,wBAAyB,EACpE,CAAE,UAAW,MAAO,KAAM,KAAM,UAAW,wBAAyB,EACpE,CAAE,UAAW,MAAO,KAAM,MAAO,UAAW,wBAAyB,EACrE,CAAE,UAAW,MAAO,KAAM,MAAO,UAAW,wBAAyB,EACrE,CAAE,UAAW,MAAO,KAAM,OAAQ,UAAW,aAAc,EAC3D,CAAE,UAAW,SAAU,KAAM,KAAM,UAAW,uBAAwB,EACtE,CAAE,UAAW,SAAU,KAAM,KAAM,UAAW,wBAAyB,EACvE,CAAE,UAAW,SAAU,KAAM,KAAM,UAAW,wBAAyB,EACvE,CAAE,UAAW,SAAU,KAAM,KAAM,UAAW,wBAAyB,EACvE,CAAE,UAAW,SAAU,KAAM,MAAO,UAAW,wBAAyB,EACxE,CAAE,UAAW,SAAU,KAAM,MAAO,UAAW,wBAAyB,EACxE,CAAE,UAAW,SAAU,KAAM,OAAQ,UAAW,aAAc,CAChE,EACA,gBAAiB,CACf,UAAW,QACX,KAAM,IACR,CACF,CACF,EAKM,EAAgB,EAAM,cAAkC,CAAE,KAAM,KAAM,UAAW,QAAS,YAAa,EAAK,CAAC,EAqBnH,SAAS,OAAO,CAAE,OAAO,KAAM,YAAY,QAAS,cAAc,GAAM,GAAG,GAAsB,CAC/F,IAAM,EAAe,EAAM,aAClB,CAAE,OAAM,YAAW,aAAY,GACtC,CAAC,EAAM,EAAW,CAAW,CAC/B,EAEA,OACE,EAAC,EAAc,SAAf,CAAwB,MAAO,WAC7B,EAACA,EAAgB,KAAjB,CAAsB,YAAU,SAAS,GAAI,CAAQ,CAAA,CAC/B,CAAA,CAE5B,CAEA,SAAS,cAAc,CAAE,GAAG,GAA6B,CACvD,OAAO,EAACA,EAAgB,QAAjB,CAAyB,YAAU,iBAAiB,GAAI,CAAQ,CAAA,CACzE,CAEA,SAAS,aAAa,CAAE,GAAG,GAA4B,CACrD,OAAO,EAACA,EAAgB,OAAjB,CAAwB,YAAU,gBAAgB,GAAI,CAAQ,CAAA,CACvE,CAEA,SAAS,YAAY,CAAE,GAAG,GAA2B,CACnD,OAAO,EAACA,EAAgB,MAAjB,CAAuB,YAAU,eAAe,GAAI,CAAQ,CAAA,CACrE,CAEA,SAAS,cAAc,CAAE,YAAW,GAAG,GAA6B,CAClE,OACE,EAACA,EAAgB,QAAjB,CACE,YAAU,iBACV,UAAW,EACT,iCACA,0FACA,4CACA,CACF,EACA,GAAI,CACL,CAAA,CAEL,CAEA,SAAS,cAAc,CAAE,YAAW,WAAU,kBAAkB,GAAM,eAAc,GAAG,GAA6B,CAClH,GAAM,CAAE,OAAM,YAAW,eAAgB,EAAM,WAAW,CAAa,EAEvE,OACE,EAAC,aAAD,CAAA,SAAA,CACE,EAAC,cAAD,CAAe,GAAI,CAAe,CAAA,EAClC,EAACA,EAAgB,QAAjB,CACE,YAAU,iBACV,UAAW,EAAG,EAAsB,CAAE,OAAM,WAAU,CAAC,EAAG,CAAS,EACnE,GAAI,EACJ,gBAAkB,GAAU,CACrB,GAAa,EAAM,eAAe,EACvC,EAAM,kBAAkB,CAAK,CAC/B,EACA,kBAAoB,GAAU,CACvB,GAAa,EAAM,eAAe,EACvC,EAAM,oBAAoB,CAAK,CACjC,WAXF,CAaG,EACA,GACC,EAAC,YAAD,CAAa,QAAA,YACX,EAAC,EAAD,CAAQ,QAAQ,QAAQ,UAAU,yBAAyB,KAAK,mBAAhE,CACE,EAAC,EAAD,CAAQ,CAAA,EACR,EAAC,OAAD,CAAM,UAAU,mBAAU,OAAW,CAAA,CAC/B,GACG,CAAA,CAEQ,GACb,CAAA,CAAA,CAElB,CAEA,SAAS,aAAa,CAAE,YAAW,GAAG,GAA4B,CAChE,GAAM,CAAE,aAAc,EAAM,WAAW,CAAa,EAGpD,OACE,EAAC,MAAD,CACE,YAAU,gBACV,UAAW,EAAG,wCALC,IAAc,OAAS,IAAc,WAKgB,2BAA4B,CAAS,EACzG,GAAI,CACL,CAAA,CAEL,CAEA,SAAS,WAAW,CAAE,YAAW,GAAG,GAA0B,CAC5D,OACE,EAAC,MAAD,CAAK,YAAU,cAAc,UAAW,EAAG,2CAA4C,CAAS,EAAG,GAAI,CAAQ,CAAA,CAEnH,CAEA,SAAS,aAAa,CAAE,YAAW,GAAG,GAA4B,CAChE,OACE,EAAC,MAAD,CACE,YAAU,gBACV,UAAW,EAAG,6DAA8D,CAAS,EACrF,GAAI,CACL,CAAA,CAEL,CAEA,SAAS,YAAY,CAAE,YAAW,GAAG,GAA2B,CAC9D,OACE,EAACA,EAAgB,MAAjB,CACE,YAAU,eACV,UAAW,EAAG,wCAAyC,CAAS,EAChE,GAAI,CACL,CAAA,CAEL,CAEA,SAAS,kBAAkB,CAAE,YAAW,GAAG,GAAiC,CAC1E,OACE,EAACA,EAAgB,YAAjB,CACE,YAAU,qBACV,UAAW,EAAG,gCAAiC,CAAS,EACxD,GAAI,CACL,CAAA,CAEL"}

package/dist/components/switch.js

@@ -1,2 +1,2 @@
-import"../chunk-CHh1Zzun.js";import{cn as e}from"../lib/utils.js";import{Label as t}from"./label.js";import{useFieldControlId as n}from"./field.js";import{Switch as r}from"radix-ui";import{jsx as i,jsxs as a}from"react/jsx-runtime";import{cva as o}from"class-variance-authority";import{useId as s}from"react";const c={primary:`[--switch-checked:var(--primary-500)]`,brand:`[--switch-checked:var(--brand-500)]`,gray:`[--switch-checked:var(--gray-500)]`,zinc:`[--switch-checked:var(--zinc-500)]`,red:`[--switch-checked:var(--red-500)]`,yellow:`[--switch-checked:var(--yellow-500)]`,blue:`[--switch-checked:var(--blue-500)]`,indigo:`[--switch-checked:var(--indigo-500)]`,pink:`[--switch-checked:var(--pink-500)]`,green:`[--switch-checked:var(--green-500)]`},l=o(``,{variants:{size:{sm:`text-xs`,md:`text-sm`,lg:`text-xl`}},defaultVariants:{size:`md`}});function Switch({className:o,color:u=`green`,id:d,label:f,labelProps:p,size:m=`md`,...h}){let g=s(),_=n(d),v=f!==void 0,y=_??(v?g:void 0),{className:b,...x}=p??{},S=i(r.Root,{"data-slot":`switch`,"data-color":u,"data-size":m,id:y,className:e(`peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none`,`after:absolute after:-inset-x-3 after:-inset-y-2`,`focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50`,`aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20`,`data-[size=lg]:h-5.5 data-[size=lg]:w-12 data-[size=md]:h-5 data-[size=md]:w-10.5 data-[size=sm]:h-4 data-[size=sm]:w-8.5`,`dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40`,`data-checked:bg-(--switch-checked) data-unchecked:bg-input dark:data-unchecked:bg-input/80`,`data-disabled:cursor-not-allowed data-disabled:opacity-50`,c[u],o),...h,children:i(r.Thumb,{"data-slot":`switch-thumb`,className:e(`pointer-events-none flex items-center justify-center rounded-full bg-background ring-0 transition-transform`,`group-data-[size=lg]/switch:size-4.5 group-data-[size=md]/switch:size-4 group-data-[size=sm]/switch:size-3`,`group-data-[size=lg]/switch:data-checked:translate-x-7`,`group-data-[size=md]/switch:data-checked:translate-x-6`,`group-data-[size=sm]/switch:data-checked:translate-x-5`,`group-data-[size=lg]/switch:data-unchecked:translate-x-0.5`,`group-data-[size=md]/switch:data-unchecked:translate-x-0.5`,`group-data-[size=sm]/switch:data-unchecked:translate-x-0.5`,`dark:data-checked:bg-primary-foreground dark:data-unchecked:bg-foreground`),children:i(`span`,{"data-slot":`switch-thumb-indicator`,className:e(`rounded-full transition-colors`,`group-data-[size=lg]/switch:size-2.5 group-data-[size=md]/switch:size-2 group-data-[size=sm]/switch:size-1.5`,`group-data-checked/switch:bg-(--switch-checked) group-data-unchecked/switch:bg-input`,`group-data-unchecked/switch:dark:bg-input/80`)})})});return v?a(`div`,{"data-slot":`switch-field`,className:`flex items-center gap-2`,children:[S,i(t,{...x,htmlFor:y,className:e(l({size:m}),b),children:f})]}):S}export{Switch};
+import"../chunk-CHh1Zzun.js";import{cn as e}from"../lib/utils.js";import{Label as t}from"./label.js";import{useFieldControlId as n}from"./field.js";import{Switch as r}from"radix-ui";import{jsx as i,jsxs as a}from"react/jsx-runtime";import{cva as o}from"class-variance-authority";import{useId as s}from"react";const c={primary:`[--switch-checked:var(--primary)]`,brand:`[--switch-checked:var(--brand)]`,gray:`[--switch-checked:var(--gray)]`,zinc:`[--switch-checked:var(--zinc)]`,red:`[--switch-checked:var(--red)]`,yellow:`[--switch-checked:var(--yellow)]`,blue:`[--switch-checked:var(--blue)]`,indigo:`[--switch-checked:var(--indigo)]`,pink:`[--switch-checked:var(--pink)]`,green:`[--switch-checked:var(--green)]`},l=o(``,{variants:{size:{sm:`text-xs`,md:`text-sm`,lg:`text-xl`}},defaultVariants:{size:`md`}});function Switch({className:o,color:u=`green`,id:d,label:f,labelProps:p,size:m=`md`,...h}){let g=s(),_=n(d),v=f!==void 0,y=_??(v?g:void 0),{className:b,...x}=p??{},S=i(r.Root,{"data-slot":`switch`,"data-color":u,"data-size":m,id:y,className:e(`peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none`,`after:absolute after:-inset-x-3 after:-inset-y-2`,`focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50`,`aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20`,`data-[size=lg]:h-5.5 data-[size=lg]:w-12 data-[size=md]:h-5 data-[size=md]:w-10.5 data-[size=sm]:h-4 data-[size=sm]:w-8.5`,`dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40`,`data-checked:bg-(--switch-checked) data-unchecked:bg-input dark:data-unchecked:bg-input/80`,`data-disabled:cursor-not-allowed data-disabled:opacity-50`,c[u],o),...h,children:i(r.Thumb,{"data-slot":`switch-thumb`,className:e(`pointer-events-none flex items-center justify-center rounded-full bg-background ring-0 transition-transform`,`group-data-[size=lg]/switch:size-4.5 group-data-[size=md]/switch:size-4 group-data-[size=sm]/switch:size-3`,`group-data-[size=lg]/switch:data-checked:translate-x-7`,`group-data-[size=md]/switch:data-checked:translate-x-6`,`group-data-[size=sm]/switch:data-checked:translate-x-5`,`group-data-[size=lg]/switch:data-unchecked:translate-x-0.5`,`group-data-[size=md]/switch:data-unchecked:translate-x-0.5`,`group-data-[size=sm]/switch:data-unchecked:translate-x-0.5`,`dark:data-checked:bg-primary-foreground dark:data-unchecked:bg-foreground`),children:i(`span`,{"data-slot":`switch-thumb-indicator`,className:e(`rounded-full transition-colors`,`group-data-[size=lg]/switch:size-2.5 group-data-[size=md]/switch:size-2 group-data-[size=sm]/switch:size-1.5`,`group-data-checked/switch:bg-(--switch-checked) group-data-unchecked/switch:bg-input`,`group-data-unchecked/switch:dark:bg-input/80`)})})});return v?a(`div`,{"data-slot":`switch-field`,className:`flex items-center gap-2`,children:[S,i(t,{...x,htmlFor:y,className:e(l({size:m}),b),children:f})]}):S}export{Switch};
 //# sourceMappingURL=switch.js.map

package/dist/components/switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"switch.js","names":["SwitchPrimitive","Label"],"sources":["../../src/components/switch.tsx"],"sourcesContent":["import type * as React from 'react'\nimport { type ReactNode, useId } from 'react'\n\nimport { cva } from 'class-variance-authority'\nimport { Switch as SwitchPrimitive } from 'radix-ui'\n\nimport type { UIColor } from '../lib/color'\nimport { cn } from '../lib/utils'\nimport { useFieldControlId } from './field'\nimport { Label, type LabelProps } from './label'\n\nexport type SwitchProps = React.ComponentProps<typeof SwitchPrimitive.Root> & {\n  color?: UIColor\n  label?: ReactNode\n  labelProps?: Omit<LabelProps, 'children' | 'htmlFor'>\n  size?: 'sm' | 'md' | 'lg'\n}\n\nconst switchColorVariants: Record<UIColor, string> = {\n  primary: '[--switch-checked:var(--primary-500)]',\n  brand: '[--switch-checked:var(--brand-500)]',\n  gray: '[--switch-checked:var(--gray-500)]',\n  zinc: '[--switch-checked:var(--zinc-500)]',\n  red: '[--switch-checked:var(--red-500)]',\n  yellow: '[--switch-checked:var(--yellow-500)]',\n  blue: '[--switch-checked:var(--blue-500)]',\n  indigo: '[--switch-checked:var(--indigo-500)]',\n  pink: '[--switch-checked:var(--pink-500)]',\n  green: '[--switch-checked:var(--green-500)]'\n}\n\nconst switchLabelVariants = cva('', {\n  variants: {\n    size: {\n      sm: 'text-xs',\n      md: 'text-sm',\n      lg: 'text-xl'\n    }\n  },\n  defaultVariants: {\n    size: 'md'\n  }\n})\n\nfunction Switch({ className, color = 'green', id, label, labelProps, size = 'md', ...props }: SwitchProps) {\n  const generatedId = useId()\n  const fieldControlId = useFieldControlId(id)\n  const hasLabel = label !== undefined\n  const resolvedId = fieldControlId ?? (hasLabel ? generatedId : undefined)\n  const { className: labelClassName, ...labelRootProps } = labelProps ?? {}\n\n  const switchControl = (\n    <SwitchPrimitive.Root\n      data-slot=\"switch\"\n      data-color={color}\n      data-size={size}\n      id={resolvedId}\n      className={cn(\n        'peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none',\n        'after:absolute after:-inset-x-3 after:-inset-y-2',\n        'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50',\n        'aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20',\n        'data-[size=lg]:h-5.5 data-[size=lg]:w-12 data-[size=md]:h-5 data-[size=md]:w-10.5 data-[size=sm]:h-4 data-[size=sm]:w-8.5',\n        'dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40',\n        'data-checked:bg-(--switch-checked) data-unchecked:bg-input dark:data-unchecked:bg-input/80',\n        'data-disabled:cursor-not-allowed data-disabled:opacity-50',\n        switchColorVariants[color],\n        className\n      )}\n      {...props}\n    >\n      <SwitchPrimitive.Thumb\n        data-slot=\"switch-thumb\"\n        className={cn(\n          'pointer-events-none flex items-center justify-center rounded-full bg-background ring-0 transition-transform',\n          'group-data-[size=lg]/switch:size-4.5 group-data-[size=md]/switch:size-4 group-data-[size=sm]/switch:size-3',\n          'group-data-[size=lg]/switch:data-checked:translate-x-7',\n          'group-data-[size=md]/switch:data-checked:translate-x-6',\n          'group-data-[size=sm]/switch:data-checked:translate-x-5',\n          'group-data-[size=lg]/switch:data-unchecked:translate-x-0.5',\n          'group-data-[size=md]/switch:data-unchecked:translate-x-0.5',\n          'group-data-[size=sm]/switch:data-unchecked:translate-x-0.5',\n          'dark:data-checked:bg-primary-foreground dark:data-unchecked:bg-foreground'\n        )}\n      >\n        <span\n          data-slot=\"switch-thumb-indicator\"\n          className={cn(\n            'rounded-full transition-colors',\n            'group-data-[size=lg]/switch:size-2.5 group-data-[size=md]/switch:size-2 group-data-[size=sm]/switch:size-1.5',\n            'group-data-checked/switch:bg-(--switch-checked) group-data-unchecked/switch:bg-input',\n            'group-data-unchecked/switch:dark:bg-input/80'\n          )}\n        />\n      </SwitchPrimitive.Thumb>\n    </SwitchPrimitive.Root>\n  )\n\n  if (!hasLabel) {\n    return switchControl\n  }\n\n  return (\n    <div data-slot=\"switch-field\" className=\"flex items-center gap-2\">\n      {switchControl}\n      <Label {...labelRootProps} htmlFor={resolvedId} className={cn(switchLabelVariants({ size }), labelClassName)}>\n        {label}\n      </Label>\n    </div>\n  )\n}\n\nexport { Switch }\n"],"mappings":"qTAkBA,MAAM,EAA+C,CACnD,QAAS,wCACT,MAAO,sCACP,KAAM,qCACN,KAAM,qCACN,IAAK,oCACL,OAAQ,uCACR,KAAM,qCACN,OAAQ,uCACR,KAAM,qCACN,MAAO,qCACT,EAEM,EAAsB,EAAI,GAAI,CAClC,SAAU,CACR,KAAM,CACJ,GAAI,UACJ,GAAI,UACJ,GAAI,SACN,CACF,EACA,gBAAiB,CACf,KAAM,IACR,CACF,CAAC,EAED,SAAS,OAAO,CAAE,YAAW,QAAQ,QAAS,KAAI,QAAO,aAAY,OAAO,KAAM,GAAG,GAAsB,CACzG,IAAM,EAAc,EAAM,EACpB,EAAiB,EAAkB,CAAE,EACrC,EAAW,IAAU,IAAA,GACrB,EAAa,IAAmB,EAAW,EAAc,IAAA,IACzD,CAAE,UAAW,EAAgB,GAAG,GAAmB,GAAc,CAAC,EAElE,EACJ,EAACA,EAAgB,KAAjB,CACE,YAAU,SACV,aAAY,EACZ,YAAW,EACX,GAAI,EACJ,UAAW,EACT,kIACA,mDACA,4EACA,uFACA,4HACA,gFACA,6FACA,4DACA,EAAoB,GACpB,CACF,EACA,GAAI,WAEJ,EAACA,EAAgB,MAAjB,CACE,YAAU,eACV,UAAW,EACT,8GACA,6GACA,yDACA,yDACA,yDACA,6DACA,6DACA,6DACA,2EACF,WAEA,EAAC,OAAD,CACE,YAAU,yBACV,UAAW,EACT,iCACA,+GACA,uFACA,8CACF,CACD,CAAA,CACoB,CAAA,CACH,CAAA,EAOxB,OAJK,EAKH,EAAC,MAAD,CAAK,YAAU,eAAe,UAAU,mCAAxC,CACG,EACD,EAACC,EAAD,CAAO,GAAI,EAAgB,QAAS,EAAY,UAAW,EAAG,EAAoB,CAAE,MAAK,CAAC,EAAG,CAAc,WACxG,CACI,CAAA,CACJ,IATE,CAWX"}
+{"version":3,"file":"switch.js","names":["SwitchPrimitive","Label"],"sources":["../../src/components/switch.tsx"],"sourcesContent":["import type * as React from 'react'\nimport { type ReactNode, useId } from 'react'\n\nimport { cva } from 'class-variance-authority'\nimport { Switch as SwitchPrimitive } from 'radix-ui'\n\nimport type { UIColor } from '../lib/color'\nimport { cn } from '../lib/utils'\nimport { useFieldControlId } from './field'\nimport { Label, type LabelProps } from './label'\n\nexport type SwitchProps = React.ComponentProps<typeof SwitchPrimitive.Root> & {\n  color?: UIColor\n  label?: ReactNode\n  labelProps?: Omit<LabelProps, 'children' | 'htmlFor'>\n  size?: 'sm' | 'md' | 'lg'\n}\n\nconst switchColorVariants: Record<UIColor, string> = {\n  primary: '[--switch-checked:var(--primary)]',\n  brand: '[--switch-checked:var(--brand)]',\n  gray: '[--switch-checked:var(--gray)]',\n  zinc: '[--switch-checked:var(--zinc)]',\n  red: '[--switch-checked:var(--red)]',\n  yellow: '[--switch-checked:var(--yellow)]',\n  blue: '[--switch-checked:var(--blue)]',\n  indigo: '[--switch-checked:var(--indigo)]',\n  pink: '[--switch-checked:var(--pink)]',\n  green: '[--switch-checked:var(--green)]'\n}\n\nconst switchLabelVariants = cva('', {\n  variants: {\n    size: {\n      sm: 'text-xs',\n      md: 'text-sm',\n      lg: 'text-xl'\n    }\n  },\n  defaultVariants: {\n    size: 'md'\n  }\n})\n\nfunction Switch({ className, color = 'green', id, label, labelProps, size = 'md', ...props }: SwitchProps) {\n  const generatedId = useId()\n  const fieldControlId = useFieldControlId(id)\n  const hasLabel = label !== undefined\n  const resolvedId = fieldControlId ?? (hasLabel ? generatedId : undefined)\n  const { className: labelClassName, ...labelRootProps } = labelProps ?? {}\n\n  const switchControl = (\n    <SwitchPrimitive.Root\n      data-slot=\"switch\"\n      data-color={color}\n      data-size={size}\n      id={resolvedId}\n      className={cn(\n        'peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none',\n        'after:absolute after:-inset-x-3 after:-inset-y-2',\n        'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50',\n        'aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20',\n        'data-[size=lg]:h-5.5 data-[size=lg]:w-12 data-[size=md]:h-5 data-[size=md]:w-10.5 data-[size=sm]:h-4 data-[size=sm]:w-8.5',\n        'dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40',\n        'data-checked:bg-(--switch-checked) data-unchecked:bg-input dark:data-unchecked:bg-input/80',\n        'data-disabled:cursor-not-allowed data-disabled:opacity-50',\n        switchColorVariants[color],\n        className\n      )}\n      {...props}\n    >\n      <SwitchPrimitive.Thumb\n        data-slot=\"switch-thumb\"\n        className={cn(\n          'pointer-events-none flex items-center justify-center rounded-full bg-background ring-0 transition-transform',\n          'group-data-[size=lg]/switch:size-4.5 group-data-[size=md]/switch:size-4 group-data-[size=sm]/switch:size-3',\n          'group-data-[size=lg]/switch:data-checked:translate-x-7',\n          'group-data-[size=md]/switch:data-checked:translate-x-6',\n          'group-data-[size=sm]/switch:data-checked:translate-x-5',\n          'group-data-[size=lg]/switch:data-unchecked:translate-x-0.5',\n          'group-data-[size=md]/switch:data-unchecked:translate-x-0.5',\n          'group-data-[size=sm]/switch:data-unchecked:translate-x-0.5',\n          'dark:data-checked:bg-primary-foreground dark:data-unchecked:bg-foreground'\n        )}\n      >\n        <span\n          data-slot=\"switch-thumb-indicator\"\n          className={cn(\n            'rounded-full transition-colors',\n            'group-data-[size=lg]/switch:size-2.5 group-data-[size=md]/switch:size-2 group-data-[size=sm]/switch:size-1.5',\n            'group-data-checked/switch:bg-(--switch-checked) group-data-unchecked/switch:bg-input',\n            'group-data-unchecked/switch:dark:bg-input/80'\n          )}\n        />\n      </SwitchPrimitive.Thumb>\n    </SwitchPrimitive.Root>\n  )\n\n  if (!hasLabel) {\n    return switchControl\n  }\n\n  return (\n    <div data-slot=\"switch-field\" className=\"flex items-center gap-2\">\n      {switchControl}\n      <Label {...labelRootProps} htmlFor={resolvedId} className={cn(switchLabelVariants({ size }), labelClassName)}>\n        {label}\n      </Label>\n    </div>\n  )\n}\n\nexport { Switch }\n"],"mappings":"qTAkBA,MAAM,EAA+C,CACnD,QAAS,oCACT,MAAO,kCACP,KAAM,iCACN,KAAM,iCACN,IAAK,gCACL,OAAQ,mCACR,KAAM,iCACN,OAAQ,mCACR,KAAM,iCACN,MAAO,iCACT,EAEM,EAAsB,EAAI,GAAI,CAClC,SAAU,CACR,KAAM,CACJ,GAAI,UACJ,GAAI,UACJ,GAAI,SACN,CACF,EACA,gBAAiB,CACf,KAAM,IACR,CACF,CAAC,EAED,SAAS,OAAO,CAAE,YAAW,QAAQ,QAAS,KAAI,QAAO,aAAY,OAAO,KAAM,GAAG,GAAsB,CACzG,IAAM,EAAc,EAAM,EACpB,EAAiB,EAAkB,CAAE,EACrC,EAAW,IAAU,IAAA,GACrB,EAAa,IAAmB,EAAW,EAAc,IAAA,IACzD,CAAE,UAAW,EAAgB,GAAG,GAAmB,GAAc,CAAC,EAElE,EACJ,EAACA,EAAgB,KAAjB,CACE,YAAU,SACV,aAAY,EACZ,YAAW,EACX,GAAI,EACJ,UAAW,EACT,kIACA,mDACA,4EACA,uFACA,4HACA,gFACA,6FACA,4DACA,EAAoB,GACpB,CACF,EACA,GAAI,WAEJ,EAACA,EAAgB,MAAjB,CACE,YAAU,eACV,UAAW,EACT,8GACA,6GACA,yDACA,yDACA,yDACA,6DACA,6DACA,6DACA,2EACF,WAEA,EAAC,OAAD,CACE,YAAU,yBACV,UAAW,EACT,iCACA,+GACA,uFACA,8CACF,CACD,CAAA,CACoB,CAAA,CACH,CAAA,EAOxB,OAJK,EAKH,EAAC,MAAD,CAAK,YAAU,eAAe,UAAU,mCAAxC,CACG,EACD,EAACC,EAAD,CAAO,GAAI,EAAgB,QAAS,EAAY,UAAW,EAAG,EAAoB,CAAE,MAAK,CAAC,EAAG,CAAc,WACxG,CACI,CAAA,CACJ,IATE,CAWX"}

package/dist/components/timeline.d.ts

@@ -8,10 +8,10 @@ declare const timelineVariants: (props?: ({
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare const timelineConnectorVariants: (props?: ({
   status?: "pending" | "completed" | "in-progress" | null | undefined;
-  color?: "destructive" | "primary" | "secondary" | "muted" | "accent" | "gradient" | null | undefined;
+  color?: "destructive" | "secondary" | "primary" | "muted" | "accent" | "gradient" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare const timelineIconVariants: (props?: ({
-  color?: "destructive" | "primary" | "secondary" | "muted" | "accent" | null | undefined;
+  color?: "destructive" | "secondary" | "primary" | "muted" | "accent" | null | undefined;
   size?: "sm" | "md" | "lg" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type TimelineIconSize = NonNullable<VariantProps<typeof timelineIconVariants>['size']>;

package/dist/lib/badge.d.ts

@@ -3,16 +3,16 @@ import { UIColor } from "./color.js";
 
 //#region src/lib/badge.d.ts
 declare const badgeColorVariants: {
-  readonly primary: readonly ["[--badge-solid:var(--primary-500)]", "[--badge-solid-foreground:var(--zinc-50)]", "[--badge-outline-border:var(--primary-500)]", "[--badge-outline-foreground:var(--primary-500)]", "[--badge-soft:var(--primary-50)]", "[--badge-soft-hover:var(--primary-100)]", "[--badge-soft-foreground:var(--primary-500)]", "[--badge-ghost-hover:var(--primary-50)]", "[--badge-ghost-foreground:var(--primary-500)]", "[--badge-link-foreground:var(--primary-500)]", "dark:[--badge-solid:var(--primary-500)]", "dark:[--badge-outline-border:var(--primary-500)]", "dark:[--badge-outline-foreground:var(--primary-500)]", "dark:[--badge-soft:var(--primary-950)]", "dark:[--badge-soft-hover:var(--primary-900)]", "dark:[--badge-soft-foreground:var(--primary-500)]", "dark:[--badge-ghost-hover:var(--primary-950)]", "dark:[--badge-ghost-foreground:var(--primary-500)]", "dark:[--badge-link-foreground:var(--primary-500)]"];
-  readonly brand: readonly ["[--badge-solid:var(--brand-500)]", "[--badge-solid-foreground:var(--zinc-50)]", "[--badge-outline-border:var(--brand-500)]", "[--badge-outline-foreground:var(--brand-500)]", "[--badge-soft:var(--brand-50)]", "[--badge-soft-hover:var(--brand-100)]", "[--badge-soft-foreground:var(--brand-500)]", "[--badge-ghost-hover:var(--brand-50)]", "[--badge-ghost-foreground:var(--brand-500)]", "[--badge-link-foreground:var(--brand-500)]", "dark:[--badge-solid:var(--brand-500)]", "dark:[--badge-outline-border:var(--brand-500)]", "dark:[--badge-outline-foreground:var(--brand-500)]", "dark:[--badge-soft:var(--brand-950)]", "dark:[--badge-soft-hover:var(--brand-900)]", "dark:[--badge-soft-foreground:var(--brand-500)]", "dark:[--badge-ghost-hover:var(--brand-950)]", "dark:[--badge-ghost-foreground:var(--brand-500)]", "dark:[--badge-link-foreground:var(--brand-500)]"];
-  readonly gray: readonly ["[--badge-solid:var(--gray-500)]", "[--badge-solid-foreground:var(--zinc-50)]", "[--badge-outline-border:var(--gray-500)]", "[--badge-outline-foreground:var(--gray-500)]", "[--badge-soft:var(--gray-100)]", "[--badge-soft-hover:var(--gray-200)]", "[--badge-soft-foreground:var(--gray-500)]", "[--badge-ghost-hover:var(--gray-100)]", "[--badge-ghost-foreground:var(--gray-500)]", "[--badge-link-foreground:var(--gray-500)]", "dark:[--badge-solid:var(--gray-500)]", "dark:[--badge-outline-border:var(--gray-500)]", "dark:[--badge-outline-foreground:var(--gray-500)]", "dark:[--badge-soft:var(--gray-950)]", "dark:[--badge-soft-hover:var(--gray-900)]", "dark:[--badge-soft-foreground:var(--gray-500)]", "dark:[--badge-ghost-hover:var(--gray-950)]", "dark:[--badge-ghost-foreground:var(--gray-500)]", "dark:[--badge-link-foreground:var(--gray-500)]"];
-  readonly zinc: readonly ["[--badge-solid:var(--zinc-500)]", "[--badge-solid-foreground:var(--zinc-50)]", "[--badge-outline-border:var(--zinc-500)]", "[--badge-outline-foreground:var(--zinc-500)]", "[--badge-soft:var(--zinc-100)]", "[--badge-soft-hover:var(--zinc-200)]", "[--badge-soft-foreground:var(--zinc-500)]", "[--badge-ghost-hover:var(--zinc-100)]", "[--badge-ghost-foreground:var(--zinc-500)]", "[--badge-link-foreground:var(--zinc-500)]", "dark:[--badge-solid:var(--zinc-500)]", "dark:[--badge-outline-border:var(--zinc-500)]", "dark:[--badge-outline-foreground:var(--zinc-500)]", "dark:[--badge-soft:var(--zinc-950)]", "dark:[--badge-soft-hover:var(--zinc-900)]", "dark:[--badge-soft-foreground:var(--zinc-500)]", "dark:[--badge-ghost-hover:var(--zinc-950)]", "dark:[--badge-ghost-foreground:var(--zinc-500)]", "dark:[--badge-link-foreground:var(--zinc-500)]"];
-  readonly red: readonly ["[--badge-solid:var(--red-500)]", "[--badge-solid-foreground:var(--zinc-50)]", "[--badge-outline-border:var(--red-500)]", "[--badge-outline-foreground:var(--red-500)]", "[--badge-soft:var(--red-50)]", "[--badge-soft-hover:var(--red-100)]", "[--badge-soft-foreground:var(--red-500)]", "[--badge-ghost-hover:var(--red-50)]", "[--badge-ghost-foreground:var(--red-500)]", "[--badge-link-foreground:var(--red-500)]", "dark:[--badge-solid:var(--red-500)]", "dark:[--badge-outline-border:var(--red-500)]", "dark:[--badge-outline-foreground:var(--red-500)]", "dark:[--badge-soft:var(--red-950)]", "dark:[--badge-soft-hover:var(--red-900)]", "dark:[--badge-soft-foreground:var(--red-500)]", "dark:[--badge-ghost-hover:var(--red-950)]", "dark:[--badge-ghost-foreground:var(--red-500)]", "dark:[--badge-link-foreground:var(--red-500)]"];
-  readonly yellow: readonly ["[--badge-solid:var(--yellow-500)]", "[--badge-solid-foreground:var(--zinc-50)]", "[--badge-outline-border:var(--yellow-500)]", "[--badge-outline-foreground:var(--yellow-500)]", "[--badge-soft:var(--yellow-50)]", "[--badge-soft-hover:var(--yellow-100)]", "[--badge-soft-foreground:var(--yellow-500)]", "[--badge-ghost-hover:var(--yellow-50)]", "[--badge-ghost-foreground:var(--yellow-500)]", "[--badge-link-foreground:var(--yellow-500)]", "dark:[--badge-solid:var(--yellow-500)]", "dark:[--badge-outline-border:var(--yellow-500)]", "dark:[--badge-outline-foreground:var(--yellow-500)]", "dark:[--badge-soft:var(--yellow-950)]", "dark:[--badge-soft-hover:var(--yellow-900)]", "dark:[--badge-soft-foreground:var(--yellow-500)]", "dark:[--badge-ghost-hover:var(--yellow-950)]", "dark:[--badge-ghost-foreground:var(--yellow-500)]", "dark:[--badge-link-foreground:var(--yellow-500)]"];
-  readonly blue: readonly ["[--badge-solid:var(--blue-500)]", "[--badge-solid-foreground:var(--zinc-50)]", "[--badge-outline-border:var(--blue-500)]", "[--badge-outline-foreground:var(--blue-500)]", "[--badge-soft:var(--blue-50)]", "[--badge-soft-hover:var(--blue-100)]", "[--badge-soft-foreground:var(--blue-500)]", "[--badge-ghost-hover:var(--blue-50)]", "[--badge-ghost-foreground:var(--blue-500)]", "[--badge-link-foreground:var(--blue-500)]", "dark:[--badge-solid:var(--blue-500)]", "dark:[--badge-outline-border:var(--blue-500)]", "dark:[--badge-outline-foreground:var(--blue-500)]", "dark:[--badge-soft:var(--blue-950)]", "dark:[--badge-soft-hover:var(--blue-900)]", "dark:[--badge-soft-foreground:var(--blue-500)]", "dark:[--badge-ghost-hover:var(--blue-950)]", "dark:[--badge-ghost-foreground:var(--blue-500)]", "dark:[--badge-link-foreground:var(--blue-500)]"];
-  readonly indigo: readonly ["[--badge-solid:var(--indigo-500)]", "[--badge-solid-foreground:var(--zinc-50)]", "[--badge-outline-border:var(--indigo-500)]", "[--badge-outline-foreground:var(--indigo-500)]", "[--badge-soft:var(--indigo-50)]", "[--badge-soft-hover:var(--indigo-100)]", "[--badge-soft-foreground:var(--indigo-500)]", "[--badge-ghost-hover:var(--indigo-50)]", "[--badge-ghost-foreground:var(--indigo-500)]", "[--badge-link-foreground:var(--indigo-500)]", "dark:[--badge-solid:var(--indigo-500)]", "dark:[--badge-outline-border:var(--indigo-500)]", "dark:[--badge-outline-foreground:var(--indigo-500)]", "dark:[--badge-soft:var(--indigo-950)]", "dark:[--badge-soft-hover:var(--indigo-900)]", "dark:[--badge-soft-foreground:var(--indigo-500)]", "dark:[--badge-ghost-hover:var(--indigo-950)]", "dark:[--badge-ghost-foreground:var(--indigo-500)]", "dark:[--badge-link-foreground:var(--indigo-500)]"];
-  readonly pink: readonly ["[--badge-solid:var(--pink-500)]", "[--badge-solid-foreground:var(--zinc-50)]", "[--badge-outline-border:var(--pink-500)]", "[--badge-outline-foreground:var(--pink-500)]", "[--badge-soft:var(--pink-50)]", "[--badge-soft-hover:var(--pink-100)]", "[--badge-soft-foreground:var(--pink-500)]", "[--badge-ghost-hover:var(--pink-50)]", "[--badge-ghost-foreground:var(--pink-500)]", "[--badge-link-foreground:var(--pink-500)]", "dark:[--badge-solid:var(--pink-500)]", "dark:[--badge-outline-border:var(--pink-500)]", "dark:[--badge-outline-foreground:var(--pink-500)]", "dark:[--badge-soft:var(--pink-950)]", "dark:[--badge-soft-hover:var(--pink-900)]", "dark:[--badge-soft-foreground:var(--pink-500)]", "dark:[--badge-ghost-hover:var(--pink-950)]", "dark:[--badge-ghost-foreground:var(--pink-500)]", "dark:[--badge-link-foreground:var(--pink-500)]"];
-  readonly green: readonly ["[--badge-solid:var(--green-500)]", "[--badge-solid-foreground:var(--zinc-50)]", "[--badge-outline-border:var(--green-500)]", "[--badge-outline-foreground:var(--green-500)]", "[--badge-soft:var(--green-50)]", "[--badge-soft-hover:var(--green-100)]", "[--badge-soft-foreground:var(--green-500)]", "[--badge-ghost-hover:var(--green-50)]", "[--badge-ghost-foreground:var(--green-500)]", "[--badge-link-foreground:var(--green-500)]", "dark:[--badge-solid:var(--green-500)]", "dark:[--badge-outline-border:var(--green-500)]", "dark:[--badge-outline-foreground:var(--green-500)]", "dark:[--badge-soft:var(--green-950)]", "dark:[--badge-soft-hover:var(--green-900)]", "dark:[--badge-soft-foreground:var(--green-500)]", "dark:[--badge-ghost-hover:var(--green-950)]", "dark:[--badge-ghost-foreground:var(--green-500)]", "dark:[--badge-link-foreground:var(--green-500)]"];
+  readonly primary: readonly ["[--badge-solid:var(--primary)]", "[--badge-solid-foreground:var(--zinc-50)]", "[--badge-outline-border:var(--primary)]", "[--badge-outline-foreground:var(--primary)]", "[--badge-soft:var(--primary-50)]", "[--badge-soft-hover:var(--primary-100)]", "[--badge-soft-foreground:var(--primary)]", "dark:[--badge-solid:var(--primary)]", "dark:[--badge-outline-border:var(--primary)]", "dark:[--badge-outline-foreground:var(--primary)]", "dark:[--badge-soft:var(--primary-950)]", "dark:[--badge-soft-hover:var(--primary-900)]", "dark:[--badge-soft-foreground:var(--primary)]"];
+  readonly brand: readonly ["[--badge-solid:var(--brand)]", "[--badge-solid-foreground:var(--zinc-50)]", "[--badge-outline-border:var(--brand)]", "[--badge-outline-foreground:var(--brand)]", "[--badge-soft:var(--brand-50)]", "[--badge-soft-hover:var(--brand-100)]", "[--badge-soft-foreground:var(--brand)]", "dark:[--badge-solid:var(--brand)]", "dark:[--badge-outline-border:var(--brand)]", "dark:[--badge-outline-foreground:var(--brand)]", "dark:[--badge-soft:var(--brand-950)]", "dark:[--badge-soft-hover:var(--brand-900)]", "dark:[--badge-soft-foreground:var(--brand)]"];
+  readonly gray: readonly ["[--badge-solid:var(--gray)]", "[--badge-solid-foreground:var(--zinc-50)]", "[--badge-outline-border:var(--gray)]", "[--badge-outline-foreground:var(--gray)]", "[--badge-soft:var(--gray-100)]", "[--badge-soft-hover:var(--gray-200)]", "[--badge-soft-foreground:var(--gray)]", "dark:[--badge-solid:var(--gray)]", "dark:[--badge-outline-border:var(--gray)]", "dark:[--badge-outline-foreground:var(--gray)]", "dark:[--badge-soft:var(--gray-950)]", "dark:[--badge-soft-hover:var(--gray-900)]", "dark:[--badge-soft-foreground:var(--gray)]"];
+  readonly zinc: readonly ["[--badge-solid:var(--zinc)]", "[--badge-solid-foreground:var(--zinc-50)]", "[--badge-outline-border:var(--zinc)]", "[--badge-outline-foreground:var(--zinc)]", "[--badge-soft:var(--zinc-100)]", "[--badge-soft-hover:var(--zinc-200)]", "[--badge-soft-foreground:var(--zinc)]", "dark:[--badge-solid:var(--zinc)]", "dark:[--badge-outline-border:var(--zinc)]", "dark:[--badge-outline-foreground:var(--zinc)]", "dark:[--badge-soft:var(--zinc-950)]", "dark:[--badge-soft-hover:var(--zinc-900)]", "dark:[--badge-soft-foreground:var(--zinc)]"];
+  readonly red: readonly ["[--badge-solid:var(--red)]", "[--badge-solid-foreground:var(--zinc-50)]", "[--badge-outline-border:var(--red)]", "[--badge-outline-foreground:var(--red)]", "[--badge-soft:var(--red-50)]", "[--badge-soft-hover:var(--red-100)]", "[--badge-soft-foreground:var(--red)]", "dark:[--badge-solid:var(--red)]", "dark:[--badge-outline-border:var(--red)]", "dark:[--badge-outline-foreground:var(--red)]", "dark:[--badge-soft:var(--red-950)]", "dark:[--badge-soft-hover:var(--red-900)]", "dark:[--badge-soft-foreground:var(--red)]"];
+  readonly yellow: readonly ["[--badge-solid:var(--yellow)]", "[--badge-solid-foreground:var(--zinc-50)]", "[--badge-outline-border:var(--yellow)]", "[--badge-outline-foreground:var(--yellow)]", "[--badge-soft:var(--yellow-50)]", "[--badge-soft-hover:var(--yellow-100)]", "[--badge-soft-foreground:var(--yellow)]", "dark:[--badge-solid:var(--yellow)]", "dark:[--badge-outline-border:var(--yellow)]", "dark:[--badge-outline-foreground:var(--yellow)]", "dark:[--badge-soft:var(--yellow-950)]", "dark:[--badge-soft-hover:var(--yellow-900)]", "dark:[--badge-soft-foreground:var(--yellow)]"];
+  readonly blue: readonly ["[--badge-solid:var(--blue)]", "[--badge-solid-foreground:var(--zinc-50)]", "[--badge-outline-border:var(--blue)]", "[--badge-outline-foreground:var(--blue)]", "[--badge-soft:var(--blue-50)]", "[--badge-soft-hover:var(--blue-100)]", "[--badge-soft-foreground:var(--blue)]", "dark:[--badge-solid:var(--blue)]", "dark:[--badge-outline-border:var(--blue)]", "dark:[--badge-outline-foreground:var(--blue)]", "dark:[--badge-soft:var(--blue-950)]", "dark:[--badge-soft-hover:var(--blue-900)]", "dark:[--badge-soft-foreground:var(--blue)]"];
+  readonly indigo: readonly ["[--badge-solid:var(--indigo)]", "[--badge-solid-foreground:var(--zinc-50)]", "[--badge-outline-border:var(--indigo)]", "[--badge-outline-foreground:var(--indigo)]", "[--badge-soft:var(--indigo-50)]", "[--badge-soft-hover:var(--indigo-100)]", "[--badge-soft-foreground:var(--indigo)]", "dark:[--badge-solid:var(--indigo)]", "dark:[--badge-outline-border:var(--indigo)]", "dark:[--badge-outline-foreground:var(--indigo)]", "dark:[--badge-soft:var(--indigo-950)]", "dark:[--badge-soft-hover:var(--indigo-900)]", "dark:[--badge-soft-foreground:var(--indigo)]"];
+  readonly pink: readonly ["[--badge-solid:var(--pink)]", "[--badge-solid-foreground:var(--zinc-50)]", "[--badge-outline-border:var(--pink)]", "[--badge-outline-foreground:var(--pink)]", "[--badge-soft:var(--pink-50)]", "[--badge-soft-hover:var(--pink-100)]", "[--badge-soft-foreground:var(--pink)]", "dark:[--badge-solid:var(--pink)]", "dark:[--badge-outline-border:var(--pink)]", "dark:[--badge-outline-foreground:var(--pink)]", "dark:[--badge-soft:var(--pink-950)]", "dark:[--badge-soft-hover:var(--pink-900)]", "dark:[--badge-soft-foreground:var(--pink)]"];
+  readonly green: readonly ["[--badge-solid:var(--green)]", "[--badge-solid-foreground:var(--zinc-50)]", "[--badge-outline-border:var(--green)]", "[--badge-outline-foreground:var(--green)]", "[--badge-soft:var(--green-50)]", "[--badge-soft-hover:var(--green-100)]", "[--badge-soft-foreground:var(--green)]", "dark:[--badge-solid:var(--green)]", "dark:[--badge-outline-border:var(--green)]", "dark:[--badge-outline-foreground:var(--green)]", "dark:[--badge-soft:var(--green-950)]", "dark:[--badge-soft-hover:var(--green-900)]", "dark:[--badge-soft-foreground:var(--green)]"];
 };
 type BadgeColor = UIColor;
 //#endregion

package/dist/lib/badge.js

@@ -1,2 +1,2 @@
-const e={primary:[`[--badge-solid:var(--primary-500)]`,`[--badge-solid-foreground:var(--zinc-50)]`,`[--badge-outline-border:var(--primary-500)]`,`[--badge-outline-foreground:var(--primary-500)]`,`[--badge-soft:var(--primary-50)]`,`[--badge-soft-hover:var(--primary-100)]`,`[--badge-soft-foreground:var(--primary-500)]`,`[--badge-ghost-hover:var(--primary-50)]`,`[--badge-ghost-foreground:var(--primary-500)]`,`[--badge-link-foreground:var(--primary-500)]`,`dark:[--badge-solid:var(--primary-500)]`,`dark:[--badge-outline-border:var(--primary-500)]`,`dark:[--badge-outline-foreground:var(--primary-500)]`,`dark:[--badge-soft:var(--primary-950)]`,`dark:[--badge-soft-hover:var(--primary-900)]`,`dark:[--badge-soft-foreground:var(--primary-500)]`,`dark:[--badge-ghost-hover:var(--primary-950)]`,`dark:[--badge-ghost-foreground:var(--primary-500)]`,`dark:[--badge-link-foreground:var(--primary-500)]`],brand:[`[--badge-solid:var(--brand-500)]`,`[--badge-solid-foreground:var(--zinc-50)]`,`[--badge-outline-border:var(--brand-500)]`,`[--badge-outline-foreground:var(--brand-500)]`,`[--badge-soft:var(--brand-50)]`,`[--badge-soft-hover:var(--brand-100)]`,`[--badge-soft-foreground:var(--brand-500)]`,`[--badge-ghost-hover:var(--brand-50)]`,`[--badge-ghost-foreground:var(--brand-500)]`,`[--badge-link-foreground:var(--brand-500)]`,`dark:[--badge-solid:var(--brand-500)]`,`dark:[--badge-outline-border:var(--brand-500)]`,`dark:[--badge-outline-foreground:var(--brand-500)]`,`dark:[--badge-soft:var(--brand-950)]`,`dark:[--badge-soft-hover:var(--brand-900)]`,`dark:[--badge-soft-foreground:var(--brand-500)]`,`dark:[--badge-ghost-hover:var(--brand-950)]`,`dark:[--badge-ghost-foreground:var(--brand-500)]`,`dark:[--badge-link-foreground:var(--brand-500)]`],gray:[`[--badge-solid:var(--gray-500)]`,`[--badge-solid-foreground:var(--zinc-50)]`,`[--badge-outline-border:var(--gray-500)]`,`[--badge-outline-foreground:var(--gray-500)]`,`[--badge-soft:var(--gray-100)]`,`[--badge-soft-hover:var(--gray-200)]`,`[--badge-soft-foreground:var(--gray-500)]`,`[--badge-ghost-hover:var(--gray-100)]`,`[--badge-ghost-foreground:var(--gray-500)]`,`[--badge-link-foreground:var(--gray-500)]`,`dark:[--badge-solid:var(--gray-500)]`,`dark:[--badge-outline-border:var(--gray-500)]`,`dark:[--badge-outline-foreground:var(--gray-500)]`,`dark:[--badge-soft:var(--gray-950)]`,`dark:[--badge-soft-hover:var(--gray-900)]`,`dark:[--badge-soft-foreground:var(--gray-500)]`,`dark:[--badge-ghost-hover:var(--gray-950)]`,`dark:[--badge-ghost-foreground:var(--gray-500)]`,`dark:[--badge-link-foreground:var(--gray-500)]`],zinc:[`[--badge-solid:var(--zinc-500)]`,`[--badge-solid-foreground:var(--zinc-50)]`,`[--badge-outline-border:var(--zinc-500)]`,`[--badge-outline-foreground:var(--zinc-500)]`,`[--badge-soft:var(--zinc-100)]`,`[--badge-soft-hover:var(--zinc-200)]`,`[--badge-soft-foreground:var(--zinc-500)]`,`[--badge-ghost-hover:var(--zinc-100)]`,`[--badge-ghost-foreground:var(--zinc-500)]`,`[--badge-link-foreground:var(--zinc-500)]`,`dark:[--badge-solid:var(--zinc-500)]`,`dark:[--badge-outline-border:var(--zinc-500)]`,`dark:[--badge-outline-foreground:var(--zinc-500)]`,`dark:[--badge-soft:var(--zinc-950)]`,`dark:[--badge-soft-hover:var(--zinc-900)]`,`dark:[--badge-soft-foreground:var(--zinc-500)]`,`dark:[--badge-ghost-hover:var(--zinc-950)]`,`dark:[--badge-ghost-foreground:var(--zinc-500)]`,`dark:[--badge-link-foreground:var(--zinc-500)]`],red:[`[--badge-solid:var(--red-500)]`,`[--badge-solid-foreground:var(--zinc-50)]`,`[--badge-outline-border:var(--red-500)]`,`[--badge-outline-foreground:var(--red-500)]`,`[--badge-soft:var(--red-50)]`,`[--badge-soft-hover:var(--red-100)]`,`[--badge-soft-foreground:var(--red-500)]`,`[--badge-ghost-hover:var(--red-50)]`,`[--badge-ghost-foreground:var(--red-500)]`,`[--badge-link-foreground:var(--red-500)]`,`dark:[--badge-solid:var(--red-500)]`,`dark:[--badge-outline-border:var(--red-500)]`,`dark:[--badge-outline-foreground:var(--red-500)]`,`dark:[--badge-soft:var(--red-950)]`,`dark:[--badge-soft-hover:var(--red-900)]`,`dark:[--badge-soft-foreground:var(--red-500)]`,`dark:[--badge-ghost-hover:var(--red-950)]`,`dark:[--badge-ghost-foreground:var(--red-500)]`,`dark:[--badge-link-foreground:var(--red-500)]`],yellow:[`[--badge-solid:var(--yellow-500)]`,`[--badge-solid-foreground:var(--zinc-50)]`,`[--badge-outline-border:var(--yellow-500)]`,`[--badge-outline-foreground:var(--yellow-500)]`,`[--badge-soft:var(--yellow-50)]`,`[--badge-soft-hover:var(--yellow-100)]`,`[--badge-soft-foreground:var(--yellow-500)]`,`[--badge-ghost-hover:var(--yellow-50)]`,`[--badge-ghost-foreground:var(--yellow-500)]`,`[--badge-link-foreground:var(--yellow-500)]`,`dark:[--badge-solid:var(--yellow-500)]`,`dark:[--badge-outline-border:var(--yellow-500)]`,`dark:[--badge-outline-foreground:var(--yellow-500)]`,`dark:[--badge-soft:var(--yellow-950)]`,`dark:[--badge-soft-hover:var(--yellow-900)]`,`dark:[--badge-soft-foreground:var(--yellow-500)]`,`dark:[--badge-ghost-hover:var(--yellow-950)]`,`dark:[--badge-ghost-foreground:var(--yellow-500)]`,`dark:[--badge-link-foreground:var(--yellow-500)]`],blue:[`[--badge-solid:var(--blue-500)]`,`[--badge-solid-foreground:var(--zinc-50)]`,`[--badge-outline-border:var(--blue-500)]`,`[--badge-outline-foreground:var(--blue-500)]`,`[--badge-soft:var(--blue-50)]`,`[--badge-soft-hover:var(--blue-100)]`,`[--badge-soft-foreground:var(--blue-500)]`,`[--badge-ghost-hover:var(--blue-50)]`,`[--badge-ghost-foreground:var(--blue-500)]`,`[--badge-link-foreground:var(--blue-500)]`,`dark:[--badge-solid:var(--blue-500)]`,`dark:[--badge-outline-border:var(--blue-500)]`,`dark:[--badge-outline-foreground:var(--blue-500)]`,`dark:[--badge-soft:var(--blue-950)]`,`dark:[--badge-soft-hover:var(--blue-900)]`,`dark:[--badge-soft-foreground:var(--blue-500)]`,`dark:[--badge-ghost-hover:var(--blue-950)]`,`dark:[--badge-ghost-foreground:var(--blue-500)]`,`dark:[--badge-link-foreground:var(--blue-500)]`],indigo:[`[--badge-solid:var(--indigo-500)]`,`[--badge-solid-foreground:var(--zinc-50)]`,`[--badge-outline-border:var(--indigo-500)]`,`[--badge-outline-foreground:var(--indigo-500)]`,`[--badge-soft:var(--indigo-50)]`,`[--badge-soft-hover:var(--indigo-100)]`,`[--badge-soft-foreground:var(--indigo-500)]`,`[--badge-ghost-hover:var(--indigo-50)]`,`[--badge-ghost-foreground:var(--indigo-500)]`,`[--badge-link-foreground:var(--indigo-500)]`,`dark:[--badge-solid:var(--indigo-500)]`,`dark:[--badge-outline-border:var(--indigo-500)]`,`dark:[--badge-outline-foreground:var(--indigo-500)]`,`dark:[--badge-soft:var(--indigo-950)]`,`dark:[--badge-soft-hover:var(--indigo-900)]`,`dark:[--badge-soft-foreground:var(--indigo-500)]`,`dark:[--badge-ghost-hover:var(--indigo-950)]`,`dark:[--badge-ghost-foreground:var(--indigo-500)]`,`dark:[--badge-link-foreground:var(--indigo-500)]`],pink:[`[--badge-solid:var(--pink-500)]`,`[--badge-solid-foreground:var(--zinc-50)]`,`[--badge-outline-border:var(--pink-500)]`,`[--badge-outline-foreground:var(--pink-500)]`,`[--badge-soft:var(--pink-50)]`,`[--badge-soft-hover:var(--pink-100)]`,`[--badge-soft-foreground:var(--pink-500)]`,`[--badge-ghost-hover:var(--pink-50)]`,`[--badge-ghost-foreground:var(--pink-500)]`,`[--badge-link-foreground:var(--pink-500)]`,`dark:[--badge-solid:var(--pink-500)]`,`dark:[--badge-outline-border:var(--pink-500)]`,`dark:[--badge-outline-foreground:var(--pink-500)]`,`dark:[--badge-soft:var(--pink-950)]`,`dark:[--badge-soft-hover:var(--pink-900)]`,`dark:[--badge-soft-foreground:var(--pink-500)]`,`dark:[--badge-ghost-hover:var(--pink-950)]`,`dark:[--badge-ghost-foreground:var(--pink-500)]`,`dark:[--badge-link-foreground:var(--pink-500)]`],green:[`[--badge-solid:var(--green-500)]`,`[--badge-solid-foreground:var(--zinc-50)]`,`[--badge-outline-border:var(--green-500)]`,`[--badge-outline-foreground:var(--green-500)]`,`[--badge-soft:var(--green-50)]`,`[--badge-soft-hover:var(--green-100)]`,`[--badge-soft-foreground:var(--green-500)]`,`[--badge-ghost-hover:var(--green-50)]`,`[--badge-ghost-foreground:var(--green-500)]`,`[--badge-link-foreground:var(--green-500)]`,`dark:[--badge-solid:var(--green-500)]`,`dark:[--badge-outline-border:var(--green-500)]`,`dark:[--badge-outline-foreground:var(--green-500)]`,`dark:[--badge-soft:var(--green-950)]`,`dark:[--badge-soft-hover:var(--green-900)]`,`dark:[--badge-soft-foreground:var(--green-500)]`,`dark:[--badge-ghost-hover:var(--green-950)]`,`dark:[--badge-ghost-foreground:var(--green-500)]`,`dark:[--badge-link-foreground:var(--green-500)]`]};export{e as badgeColorVariants};
+const e={primary:[`[--badge-solid:var(--primary)]`,`[--badge-solid-foreground:var(--zinc-50)]`,`[--badge-outline-border:var(--primary)]`,`[--badge-outline-foreground:var(--primary)]`,`[--badge-soft:var(--primary-50)]`,`[--badge-soft-hover:var(--primary-100)]`,`[--badge-soft-foreground:var(--primary)]`,`dark:[--badge-solid:var(--primary)]`,`dark:[--badge-outline-border:var(--primary)]`,`dark:[--badge-outline-foreground:var(--primary)]`,`dark:[--badge-soft:var(--primary-950)]`,`dark:[--badge-soft-hover:var(--primary-900)]`,`dark:[--badge-soft-foreground:var(--primary)]`],brand:[`[--badge-solid:var(--brand)]`,`[--badge-solid-foreground:var(--zinc-50)]`,`[--badge-outline-border:var(--brand)]`,`[--badge-outline-foreground:var(--brand)]`,`[--badge-soft:var(--brand-50)]`,`[--badge-soft-hover:var(--brand-100)]`,`[--badge-soft-foreground:var(--brand)]`,`dark:[--badge-solid:var(--brand)]`,`dark:[--badge-outline-border:var(--brand)]`,`dark:[--badge-outline-foreground:var(--brand)]`,`dark:[--badge-soft:var(--brand-950)]`,`dark:[--badge-soft-hover:var(--brand-900)]`,`dark:[--badge-soft-foreground:var(--brand)]`],gray:[`[--badge-solid:var(--gray)]`,`[--badge-solid-foreground:var(--zinc-50)]`,`[--badge-outline-border:var(--gray)]`,`[--badge-outline-foreground:var(--gray)]`,`[--badge-soft:var(--gray-100)]`,`[--badge-soft-hover:var(--gray-200)]`,`[--badge-soft-foreground:var(--gray)]`,`dark:[--badge-solid:var(--gray)]`,`dark:[--badge-outline-border:var(--gray)]`,`dark:[--badge-outline-foreground:var(--gray)]`,`dark:[--badge-soft:var(--gray-950)]`,`dark:[--badge-soft-hover:var(--gray-900)]`,`dark:[--badge-soft-foreground:var(--gray)]`],zinc:[`[--badge-solid:var(--zinc)]`,`[--badge-solid-foreground:var(--zinc-50)]`,`[--badge-outline-border:var(--zinc)]`,`[--badge-outline-foreground:var(--zinc)]`,`[--badge-soft:var(--zinc-100)]`,`[--badge-soft-hover:var(--zinc-200)]`,`[--badge-soft-foreground:var(--zinc)]`,`dark:[--badge-solid:var(--zinc)]`,`dark:[--badge-outline-border:var(--zinc)]`,`dark:[--badge-outline-foreground:var(--zinc)]`,`dark:[--badge-soft:var(--zinc-950)]`,`dark:[--badge-soft-hover:var(--zinc-900)]`,`dark:[--badge-soft-foreground:var(--zinc)]`],red:[`[--badge-solid:var(--red)]`,`[--badge-solid-foreground:var(--zinc-50)]`,`[--badge-outline-border:var(--red)]`,`[--badge-outline-foreground:var(--red)]`,`[--badge-soft:var(--red-50)]`,`[--badge-soft-hover:var(--red-100)]`,`[--badge-soft-foreground:var(--red)]`,`dark:[--badge-solid:var(--red)]`,`dark:[--badge-outline-border:var(--red)]`,`dark:[--badge-outline-foreground:var(--red)]`,`dark:[--badge-soft:var(--red-950)]`,`dark:[--badge-soft-hover:var(--red-900)]`,`dark:[--badge-soft-foreground:var(--red)]`],yellow:[`[--badge-solid:var(--yellow)]`,`[--badge-solid-foreground:var(--zinc-50)]`,`[--badge-outline-border:var(--yellow)]`,`[--badge-outline-foreground:var(--yellow)]`,`[--badge-soft:var(--yellow-50)]`,`[--badge-soft-hover:var(--yellow-100)]`,`[--badge-soft-foreground:var(--yellow)]`,`dark:[--badge-solid:var(--yellow)]`,`dark:[--badge-outline-border:var(--yellow)]`,`dark:[--badge-outline-foreground:var(--yellow)]`,`dark:[--badge-soft:var(--yellow-950)]`,`dark:[--badge-soft-hover:var(--yellow-900)]`,`dark:[--badge-soft-foreground:var(--yellow)]`],blue:[`[--badge-solid:var(--blue)]`,`[--badge-solid-foreground:var(--zinc-50)]`,`[--badge-outline-border:var(--blue)]`,`[--badge-outline-foreground:var(--blue)]`,`[--badge-soft:var(--blue-50)]`,`[--badge-soft-hover:var(--blue-100)]`,`[--badge-soft-foreground:var(--blue)]`,`dark:[--badge-solid:var(--blue)]`,`dark:[--badge-outline-border:var(--blue)]`,`dark:[--badge-outline-foreground:var(--blue)]`,`dark:[--badge-soft:var(--blue-950)]`,`dark:[--badge-soft-hover:var(--blue-900)]`,`dark:[--badge-soft-foreground:var(--blue)]`],indigo:[`[--badge-solid:var(--indigo)]`,`[--badge-solid-foreground:var(--zinc-50)]`,`[--badge-outline-border:var(--indigo)]`,`[--badge-outline-foreground:var(--indigo)]`,`[--badge-soft:var(--indigo-50)]`,`[--badge-soft-hover:var(--indigo-100)]`,`[--badge-soft-foreground:var(--indigo)]`,`dark:[--badge-solid:var(--indigo)]`,`dark:[--badge-outline-border:var(--indigo)]`,`dark:[--badge-outline-foreground:var(--indigo)]`,`dark:[--badge-soft:var(--indigo-950)]`,`dark:[--badge-soft-hover:var(--indigo-900)]`,`dark:[--badge-soft-foreground:var(--indigo)]`],pink:[`[--badge-solid:var(--pink)]`,`[--badge-solid-foreground:var(--zinc-50)]`,`[--badge-outline-border:var(--pink)]`,`[--badge-outline-foreground:var(--pink)]`,`[--badge-soft:var(--pink-50)]`,`[--badge-soft-hover:var(--pink-100)]`,`[--badge-soft-foreground:var(--pink)]`,`dark:[--badge-solid:var(--pink)]`,`dark:[--badge-outline-border:var(--pink)]`,`dark:[--badge-outline-foreground:var(--pink)]`,`dark:[--badge-soft:var(--pink-950)]`,`dark:[--badge-soft-hover:var(--pink-900)]`,`dark:[--badge-soft-foreground:var(--pink)]`],green:[`[--badge-solid:var(--green)]`,`[--badge-solid-foreground:var(--zinc-50)]`,`[--badge-outline-border:var(--green)]`,`[--badge-outline-foreground:var(--green)]`,`[--badge-soft:var(--green-50)]`,`[--badge-soft-hover:var(--green-100)]`,`[--badge-soft-foreground:var(--green)]`,`dark:[--badge-solid:var(--green)]`,`dark:[--badge-outline-border:var(--green)]`,`dark:[--badge-outline-foreground:var(--green)]`,`dark:[--badge-soft:var(--green-950)]`,`dark:[--badge-soft-hover:var(--green-900)]`,`dark:[--badge-soft-foreground:var(--green)]`]};export{e as badgeColorVariants};
 //# sourceMappingURL=badge.js.map

package/dist/lib/badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge.js","names":[],"sources":["../../src/lib/badge.ts"],"sourcesContent":["import type { UIColor } from './color'\n\nexport const badgeColorVariants = {\n  primary: [\n    '[--badge-solid:var(--primary-500)]',\n    '[--badge-solid-foreground:var(--zinc-50)]',\n    '[--badge-outline-border:var(--primary-500)]',\n    '[--badge-outline-foreground:var(--primary-500)]',\n    '[--badge-soft:var(--primary-50)]',\n    '[--badge-soft-hover:var(--primary-100)]',\n    '[--badge-soft-foreground:var(--primary-500)]',\n    '[--badge-ghost-hover:var(--primary-50)]',\n    '[--badge-ghost-foreground:var(--primary-500)]',\n    '[--badge-link-foreground:var(--primary-500)]',\n    'dark:[--badge-solid:var(--primary-500)]',\n    'dark:[--badge-outline-border:var(--primary-500)]',\n    'dark:[--badge-outline-foreground:var(--primary-500)]',\n    'dark:[--badge-soft:var(--primary-950)]',\n    'dark:[--badge-soft-hover:var(--primary-900)]',\n    'dark:[--badge-soft-foreground:var(--primary-500)]',\n    'dark:[--badge-ghost-hover:var(--primary-950)]',\n    'dark:[--badge-ghost-foreground:var(--primary-500)]',\n    'dark:[--badge-link-foreground:var(--primary-500)]'\n  ],\n  brand: [\n    '[--badge-solid:var(--brand-500)]',\n    '[--badge-solid-foreground:var(--zinc-50)]',\n    '[--badge-outline-border:var(--brand-500)]',\n    '[--badge-outline-foreground:var(--brand-500)]',\n    '[--badge-soft:var(--brand-50)]',\n    '[--badge-soft-hover:var(--brand-100)]',\n    '[--badge-soft-foreground:var(--brand-500)]',\n    '[--badge-ghost-hover:var(--brand-50)]',\n    '[--badge-ghost-foreground:var(--brand-500)]',\n    '[--badge-link-foreground:var(--brand-500)]',\n    'dark:[--badge-solid:var(--brand-500)]',\n    'dark:[--badge-outline-border:var(--brand-500)]',\n    'dark:[--badge-outline-foreground:var(--brand-500)]',\n    'dark:[--badge-soft:var(--brand-950)]',\n    'dark:[--badge-soft-hover:var(--brand-900)]',\n    'dark:[--badge-soft-foreground:var(--brand-500)]',\n    'dark:[--badge-ghost-hover:var(--brand-950)]',\n    'dark:[--badge-ghost-foreground:var(--brand-500)]',\n    'dark:[--badge-link-foreground:var(--brand-500)]'\n  ],\n  gray: [\n    '[--badge-solid:var(--gray-500)]',\n    '[--badge-solid-foreground:var(--zinc-50)]',\n    '[--badge-outline-border:var(--gray-500)]',\n    '[--badge-outline-foreground:var(--gray-500)]',\n    '[--badge-soft:var(--gray-100)]',\n    '[--badge-soft-hover:var(--gray-200)]',\n    '[--badge-soft-foreground:var(--gray-500)]',\n    '[--badge-ghost-hover:var(--gray-100)]',\n    '[--badge-ghost-foreground:var(--gray-500)]',\n    '[--badge-link-foreground:var(--gray-500)]',\n    'dark:[--badge-solid:var(--gray-500)]',\n    'dark:[--badge-outline-border:var(--gray-500)]',\n    'dark:[--badge-outline-foreground:var(--gray-500)]',\n    'dark:[--badge-soft:var(--gray-950)]',\n    'dark:[--badge-soft-hover:var(--gray-900)]',\n    'dark:[--badge-soft-foreground:var(--gray-500)]',\n    'dark:[--badge-ghost-hover:var(--gray-950)]',\n    'dark:[--badge-ghost-foreground:var(--gray-500)]',\n    'dark:[--badge-link-foreground:var(--gray-500)]'\n  ],\n  zinc: [\n    '[--badge-solid:var(--zinc-500)]',\n    '[--badge-solid-foreground:var(--zinc-50)]',\n    '[--badge-outline-border:var(--zinc-500)]',\n    '[--badge-outline-foreground:var(--zinc-500)]',\n    '[--badge-soft:var(--zinc-100)]',\n    '[--badge-soft-hover:var(--zinc-200)]',\n    '[--badge-soft-foreground:var(--zinc-500)]',\n    '[--badge-ghost-hover:var(--zinc-100)]',\n    '[--badge-ghost-foreground:var(--zinc-500)]',\n    '[--badge-link-foreground:var(--zinc-500)]',\n    'dark:[--badge-solid:var(--zinc-500)]',\n    'dark:[--badge-outline-border:var(--zinc-500)]',\n    'dark:[--badge-outline-foreground:var(--zinc-500)]',\n    'dark:[--badge-soft:var(--zinc-950)]',\n    'dark:[--badge-soft-hover:var(--zinc-900)]',\n    'dark:[--badge-soft-foreground:var(--zinc-500)]',\n    'dark:[--badge-ghost-hover:var(--zinc-950)]',\n    'dark:[--badge-ghost-foreground:var(--zinc-500)]',\n    'dark:[--badge-link-foreground:var(--zinc-500)]'\n  ],\n  red: [\n    '[--badge-solid:var(--red-500)]',\n    '[--badge-solid-foreground:var(--zinc-50)]',\n    '[--badge-outline-border:var(--red-500)]',\n    '[--badge-outline-foreground:var(--red-500)]',\n    '[--badge-soft:var(--red-50)]',\n    '[--badge-soft-hover:var(--red-100)]',\n    '[--badge-soft-foreground:var(--red-500)]',\n    '[--badge-ghost-hover:var(--red-50)]',\n    '[--badge-ghost-foreground:var(--red-500)]',\n    '[--badge-link-foreground:var(--red-500)]',\n    'dark:[--badge-solid:var(--red-500)]',\n    'dark:[--badge-outline-border:var(--red-500)]',\n    'dark:[--badge-outline-foreground:var(--red-500)]',\n    'dark:[--badge-soft:var(--red-950)]',\n    'dark:[--badge-soft-hover:var(--red-900)]',\n    'dark:[--badge-soft-foreground:var(--red-500)]',\n    'dark:[--badge-ghost-hover:var(--red-950)]',\n    'dark:[--badge-ghost-foreground:var(--red-500)]',\n    'dark:[--badge-link-foreground:var(--red-500)]'\n  ],\n  yellow: [\n    '[--badge-solid:var(--yellow-500)]',\n    '[--badge-solid-foreground:var(--zinc-50)]',\n    '[--badge-outline-border:var(--yellow-500)]',\n    '[--badge-outline-foreground:var(--yellow-500)]',\n    '[--badge-soft:var(--yellow-50)]',\n    '[--badge-soft-hover:var(--yellow-100)]',\n    '[--badge-soft-foreground:var(--yellow-500)]',\n    '[--badge-ghost-hover:var(--yellow-50)]',\n    '[--badge-ghost-foreground:var(--yellow-500)]',\n    '[--badge-link-foreground:var(--yellow-500)]',\n    'dark:[--badge-solid:var(--yellow-500)]',\n    'dark:[--badge-outline-border:var(--yellow-500)]',\n    'dark:[--badge-outline-foreground:var(--yellow-500)]',\n    'dark:[--badge-soft:var(--yellow-950)]',\n    'dark:[--badge-soft-hover:var(--yellow-900)]',\n    'dark:[--badge-soft-foreground:var(--yellow-500)]',\n    'dark:[--badge-ghost-hover:var(--yellow-950)]',\n    'dark:[--badge-ghost-foreground:var(--yellow-500)]',\n    'dark:[--badge-link-foreground:var(--yellow-500)]'\n  ],\n  blue: [\n    '[--badge-solid:var(--blue-500)]',\n    '[--badge-solid-foreground:var(--zinc-50)]',\n    '[--badge-outline-border:var(--blue-500)]',\n    '[--badge-outline-foreground:var(--blue-500)]',\n    '[--badge-soft:var(--blue-50)]',\n    '[--badge-soft-hover:var(--blue-100)]',\n    '[--badge-soft-foreground:var(--blue-500)]',\n    '[--badge-ghost-hover:var(--blue-50)]',\n    '[--badge-ghost-foreground:var(--blue-500)]',\n    '[--badge-link-foreground:var(--blue-500)]',\n    'dark:[--badge-solid:var(--blue-500)]',\n    'dark:[--badge-outline-border:var(--blue-500)]',\n    'dark:[--badge-outline-foreground:var(--blue-500)]',\n    'dark:[--badge-soft:var(--blue-950)]',\n    'dark:[--badge-soft-hover:var(--blue-900)]',\n    'dark:[--badge-soft-foreground:var(--blue-500)]',\n    'dark:[--badge-ghost-hover:var(--blue-950)]',\n    'dark:[--badge-ghost-foreground:var(--blue-500)]',\n    'dark:[--badge-link-foreground:var(--blue-500)]'\n  ],\n  indigo: [\n    '[--badge-solid:var(--indigo-500)]',\n    '[--badge-solid-foreground:var(--zinc-50)]',\n    '[--badge-outline-border:var(--indigo-500)]',\n    '[--badge-outline-foreground:var(--indigo-500)]',\n    '[--badge-soft:var(--indigo-50)]',\n    '[--badge-soft-hover:var(--indigo-100)]',\n    '[--badge-soft-foreground:var(--indigo-500)]',\n    '[--badge-ghost-hover:var(--indigo-50)]',\n    '[--badge-ghost-foreground:var(--indigo-500)]',\n    '[--badge-link-foreground:var(--indigo-500)]',\n    'dark:[--badge-solid:var(--indigo-500)]',\n    'dark:[--badge-outline-border:var(--indigo-500)]',\n    'dark:[--badge-outline-foreground:var(--indigo-500)]',\n    'dark:[--badge-soft:var(--indigo-950)]',\n    'dark:[--badge-soft-hover:var(--indigo-900)]',\n    'dark:[--badge-soft-foreground:var(--indigo-500)]',\n    'dark:[--badge-ghost-hover:var(--indigo-950)]',\n    'dark:[--badge-ghost-foreground:var(--indigo-500)]',\n    'dark:[--badge-link-foreground:var(--indigo-500)]'\n  ],\n  pink: [\n    '[--badge-solid:var(--pink-500)]',\n    '[--badge-solid-foreground:var(--zinc-50)]',\n    '[--badge-outline-border:var(--pink-500)]',\n    '[--badge-outline-foreground:var(--pink-500)]',\n    '[--badge-soft:var(--pink-50)]',\n    '[--badge-soft-hover:var(--pink-100)]',\n    '[--badge-soft-foreground:var(--pink-500)]',\n    '[--badge-ghost-hover:var(--pink-50)]',\n    '[--badge-ghost-foreground:var(--pink-500)]',\n    '[--badge-link-foreground:var(--pink-500)]',\n    'dark:[--badge-solid:var(--pink-500)]',\n    'dark:[--badge-outline-border:var(--pink-500)]',\n    'dark:[--badge-outline-foreground:var(--pink-500)]',\n    'dark:[--badge-soft:var(--pink-950)]',\n    'dark:[--badge-soft-hover:var(--pink-900)]',\n    'dark:[--badge-soft-foreground:var(--pink-500)]',\n    'dark:[--badge-ghost-hover:var(--pink-950)]',\n    'dark:[--badge-ghost-foreground:var(--pink-500)]',\n    'dark:[--badge-link-foreground:var(--pink-500)]'\n  ],\n  green: [\n    '[--badge-solid:var(--green-500)]',\n    '[--badge-solid-foreground:var(--zinc-50)]',\n    '[--badge-outline-border:var(--green-500)]',\n    '[--badge-outline-foreground:var(--green-500)]',\n    '[--badge-soft:var(--green-50)]',\n    '[--badge-soft-hover:var(--green-100)]',\n    '[--badge-soft-foreground:var(--green-500)]',\n    '[--badge-ghost-hover:var(--green-50)]',\n    '[--badge-ghost-foreground:var(--green-500)]',\n    '[--badge-link-foreground:var(--green-500)]',\n    'dark:[--badge-solid:var(--green-500)]',\n    'dark:[--badge-outline-border:var(--green-500)]',\n    'dark:[--badge-outline-foreground:var(--green-500)]',\n    'dark:[--badge-soft:var(--green-950)]',\n    'dark:[--badge-soft-hover:var(--green-900)]',\n    'dark:[--badge-soft-foreground:var(--green-500)]',\n    'dark:[--badge-ghost-hover:var(--green-950)]',\n    'dark:[--badge-ghost-foreground:var(--green-500)]',\n    'dark:[--badge-link-foreground:var(--green-500)]'\n  ]\n} as const satisfies Record<UIColor, readonly string[]>\n\nexport type BadgeColor = UIColor\n"],"mappings":"AAEA,MAAa,EAAqB,CAChC,QAAS,CACP,qCACA,4CACA,8CACA,kDACA,mCACA,0CACA,+CACA,0CACA,gDACA,+CACA,0CACA,mDACA,uDACA,yCACA,+CACA,oDACA,gDACA,qDACA,mDACF,EACA,MAAO,CACL,mCACA,4CACA,4CACA,gDACA,iCACA,wCACA,6CACA,wCACA,8CACA,6CACA,wCACA,iDACA,qDACA,uCACA,6CACA,kDACA,8CACA,mDACA,iDACF,EACA,KAAM,CACJ,kCACA,4CACA,2CACA,+CACA,iCACA,uCACA,4CACA,wCACA,6CACA,4CACA,uCACA,gDACA,oDACA,sCACA,4CACA,iDACA,6CACA,kDACA,gDACF,EACA,KAAM,CACJ,kCACA,4CACA,2CACA,+CACA,iCACA,uCACA,4CACA,wCACA,6CACA,4CACA,uCACA,gDACA,oDACA,sCACA,4CACA,iDACA,6CACA,kDACA,gDACF,EACA,IAAK,CACH,iCACA,4CACA,0CACA,8CACA,+BACA,sCACA,2CACA,sCACA,4CACA,2CACA,sCACA,+CACA,mDACA,qCACA,2CACA,gDACA,4CACA,iDACA,+CACF,EACA,OAAQ,CACN,oCACA,4CACA,6CACA,iDACA,kCACA,yCACA,8CACA,yCACA,+CACA,8CACA,yCACA,kDACA,sDACA,wCACA,8CACA,mDACA,+CACA,oDACA,kDACF,EACA,KAAM,CACJ,kCACA,4CACA,2CACA,+CACA,gCACA,uCACA,4CACA,uCACA,6CACA,4CACA,uCACA,gDACA,oDACA,sCACA,4CACA,iDACA,6CACA,kDACA,gDACF,EACA,OAAQ,CACN,oCACA,4CACA,6CACA,iDACA,kCACA,yCACA,8CACA,yCACA,+CACA,8CACA,yCACA,kDACA,sDACA,wCACA,8CACA,mDACA,+CACA,oDACA,kDACF,EACA,KAAM,CACJ,kCACA,4CACA,2CACA,+CACA,gCACA,uCACA,4CACA,uCACA,6CACA,4CACA,uCACA,gDACA,oDACA,sCACA,4CACA,iDACA,6CACA,kDACA,gDACF,EACA,MAAO,CACL,mCACA,4CACA,4CACA,gDACA,iCACA,wCACA,6CACA,wCACA,8CACA,6CACA,wCACA,iDACA,qDACA,uCACA,6CACA,kDACA,8CACA,mDACA,iDACF,CACF"}
+{"version":3,"file":"badge.js","names":[],"sources":["../../src/lib/badge.ts"],"sourcesContent":["import type { UIColor } from './color'\n\nexport const badgeColorVariants = {\n  primary: [\n    '[--badge-solid:var(--primary)]',\n    '[--badge-solid-foreground:var(--zinc-50)]',\n    '[--badge-outline-border:var(--primary)]',\n    '[--badge-outline-foreground:var(--primary)]',\n    '[--badge-soft:var(--primary-50)]',\n    '[--badge-soft-hover:var(--primary-100)]',\n    '[--badge-soft-foreground:var(--primary)]',\n    'dark:[--badge-solid:var(--primary)]',\n    'dark:[--badge-outline-border:var(--primary)]',\n    'dark:[--badge-outline-foreground:var(--primary)]',\n    'dark:[--badge-soft:var(--primary-950)]',\n    'dark:[--badge-soft-hover:var(--primary-900)]',\n    'dark:[--badge-soft-foreground:var(--primary)]'\n  ],\n  brand: [\n    '[--badge-solid:var(--brand)]',\n    '[--badge-solid-foreground:var(--zinc-50)]',\n    '[--badge-outline-border:var(--brand)]',\n    '[--badge-outline-foreground:var(--brand)]',\n    '[--badge-soft:var(--brand-50)]',\n    '[--badge-soft-hover:var(--brand-100)]',\n    '[--badge-soft-foreground:var(--brand)]',\n    'dark:[--badge-solid:var(--brand)]',\n    'dark:[--badge-outline-border:var(--brand)]',\n    'dark:[--badge-outline-foreground:var(--brand)]',\n    'dark:[--badge-soft:var(--brand-950)]',\n    'dark:[--badge-soft-hover:var(--brand-900)]',\n    'dark:[--badge-soft-foreground:var(--brand)]'\n  ],\n  gray: [\n    '[--badge-solid:var(--gray)]',\n    '[--badge-solid-foreground:var(--zinc-50)]',\n    '[--badge-outline-border:var(--gray)]',\n    '[--badge-outline-foreground:var(--gray)]',\n    '[--badge-soft:var(--gray-100)]',\n    '[--badge-soft-hover:var(--gray-200)]',\n    '[--badge-soft-foreground:var(--gray)]',\n    'dark:[--badge-solid:var(--gray)]',\n    'dark:[--badge-outline-border:var(--gray)]',\n    'dark:[--badge-outline-foreground:var(--gray)]',\n    'dark:[--badge-soft:var(--gray-950)]',\n    'dark:[--badge-soft-hover:var(--gray-900)]',\n    'dark:[--badge-soft-foreground:var(--gray)]'\n  ],\n  zinc: [\n    '[--badge-solid:var(--zinc)]',\n    '[--badge-solid-foreground:var(--zinc-50)]',\n    '[--badge-outline-border:var(--zinc)]',\n    '[--badge-outline-foreground:var(--zinc)]',\n    '[--badge-soft:var(--zinc-100)]',\n    '[--badge-soft-hover:var(--zinc-200)]',\n    '[--badge-soft-foreground:var(--zinc)]',\n    'dark:[--badge-solid:var(--zinc)]',\n    'dark:[--badge-outline-border:var(--zinc)]',\n    'dark:[--badge-outline-foreground:var(--zinc)]',\n    'dark:[--badge-soft:var(--zinc-950)]',\n    'dark:[--badge-soft-hover:var(--zinc-900)]',\n    'dark:[--badge-soft-foreground:var(--zinc)]'\n  ],\n  red: [\n    '[--badge-solid:var(--red)]',\n    '[--badge-solid-foreground:var(--zinc-50)]',\n    '[--badge-outline-border:var(--red)]',\n    '[--badge-outline-foreground:var(--red)]',\n    '[--badge-soft:var(--red-50)]',\n    '[--badge-soft-hover:var(--red-100)]',\n    '[--badge-soft-foreground:var(--red)]',\n    'dark:[--badge-solid:var(--red)]',\n    'dark:[--badge-outline-border:var(--red)]',\n    'dark:[--badge-outline-foreground:var(--red)]',\n    'dark:[--badge-soft:var(--red-950)]',\n    'dark:[--badge-soft-hover:var(--red-900)]',\n    'dark:[--badge-soft-foreground:var(--red)]'\n  ],\n  yellow: [\n    '[--badge-solid:var(--yellow)]',\n    '[--badge-solid-foreground:var(--zinc-50)]',\n    '[--badge-outline-border:var(--yellow)]',\n    '[--badge-outline-foreground:var(--yellow)]',\n    '[--badge-soft:var(--yellow-50)]',\n    '[--badge-soft-hover:var(--yellow-100)]',\n    '[--badge-soft-foreground:var(--yellow)]',\n    'dark:[--badge-solid:var(--yellow)]',\n    'dark:[--badge-outline-border:var(--yellow)]',\n    'dark:[--badge-outline-foreground:var(--yellow)]',\n    'dark:[--badge-soft:var(--yellow-950)]',\n    'dark:[--badge-soft-hover:var(--yellow-900)]',\n    'dark:[--badge-soft-foreground:var(--yellow)]'\n  ],\n  blue: [\n    '[--badge-solid:var(--blue)]',\n    '[--badge-solid-foreground:var(--zinc-50)]',\n    '[--badge-outline-border:var(--blue)]',\n    '[--badge-outline-foreground:var(--blue)]',\n    '[--badge-soft:var(--blue-50)]',\n    '[--badge-soft-hover:var(--blue-100)]',\n    '[--badge-soft-foreground:var(--blue)]',\n    'dark:[--badge-solid:var(--blue)]',\n    'dark:[--badge-outline-border:var(--blue)]',\n    'dark:[--badge-outline-foreground:var(--blue)]',\n    'dark:[--badge-soft:var(--blue-950)]',\n    'dark:[--badge-soft-hover:var(--blue-900)]',\n    'dark:[--badge-soft-foreground:var(--blue)]'\n  ],\n  indigo: [\n    '[--badge-solid:var(--indigo)]',\n    '[--badge-solid-foreground:var(--zinc-50)]',\n    '[--badge-outline-border:var(--indigo)]',\n    '[--badge-outline-foreground:var(--indigo)]',\n    '[--badge-soft:var(--indigo-50)]',\n    '[--badge-soft-hover:var(--indigo-100)]',\n    '[--badge-soft-foreground:var(--indigo)]',\n    'dark:[--badge-solid:var(--indigo)]',\n    'dark:[--badge-outline-border:var(--indigo)]',\n    'dark:[--badge-outline-foreground:var(--indigo)]',\n    'dark:[--badge-soft:var(--indigo-950)]',\n    'dark:[--badge-soft-hover:var(--indigo-900)]',\n    'dark:[--badge-soft-foreground:var(--indigo)]'\n  ],\n  pink: [\n    '[--badge-solid:var(--pink)]',\n    '[--badge-solid-foreground:var(--zinc-50)]',\n    '[--badge-outline-border:var(--pink)]',\n    '[--badge-outline-foreground:var(--pink)]',\n    '[--badge-soft:var(--pink-50)]',\n    '[--badge-soft-hover:var(--pink-100)]',\n    '[--badge-soft-foreground:var(--pink)]',\n    'dark:[--badge-solid:var(--pink)]',\n    'dark:[--badge-outline-border:var(--pink)]',\n    'dark:[--badge-outline-foreground:var(--pink)]',\n    'dark:[--badge-soft:var(--pink-950)]',\n    'dark:[--badge-soft-hover:var(--pink-900)]',\n    'dark:[--badge-soft-foreground:var(--pink)]'\n  ],\n  green: [\n    '[--badge-solid:var(--green)]',\n    '[--badge-solid-foreground:var(--zinc-50)]',\n    '[--badge-outline-border:var(--green)]',\n    '[--badge-outline-foreground:var(--green)]',\n    '[--badge-soft:var(--green-50)]',\n    '[--badge-soft-hover:var(--green-100)]',\n    '[--badge-soft-foreground:var(--green)]',\n    'dark:[--badge-solid:var(--green)]',\n    'dark:[--badge-outline-border:var(--green)]',\n    'dark:[--badge-outline-foreground:var(--green)]',\n    'dark:[--badge-soft:var(--green-950)]',\n    'dark:[--badge-soft-hover:var(--green-900)]',\n    'dark:[--badge-soft-foreground:var(--green)]'\n  ]\n} as const satisfies Record<UIColor, readonly string[]>\n\nexport type BadgeColor = UIColor\n"],"mappings":"AAEA,MAAa,EAAqB,CAChC,QAAS,CACP,iCACA,4CACA,0CACA,8CACA,mCACA,0CACA,2CACA,sCACA,+CACA,mDACA,yCACA,+CACA,+CACF,EACA,MAAO,CACL,+BACA,4CACA,wCACA,4CACA,iCACA,wCACA,yCACA,oCACA,6CACA,iDACA,uCACA,6CACA,6CACF,EACA,KAAM,CACJ,8BACA,4CACA,uCACA,2CACA,iCACA,uCACA,wCACA,mCACA,4CACA,gDACA,sCACA,4CACA,4CACF,EACA,KAAM,CACJ,8BACA,4CACA,uCACA,2CACA,iCACA,uCACA,wCACA,mCACA,4CACA,gDACA,sCACA,4CACA,4CACF,EACA,IAAK,CACH,6BACA,4CACA,sCACA,0CACA,+BACA,sCACA,uCACA,kCACA,2CACA,+CACA,qCACA,2CACA,2CACF,EACA,OAAQ,CACN,gCACA,4CACA,yCACA,6CACA,kCACA,yCACA,0CACA,qCACA,8CACA,kDACA,wCACA,8CACA,8CACF,EACA,KAAM,CACJ,8BACA,4CACA,uCACA,2CACA,gCACA,uCACA,wCACA,mCACA,4CACA,gDACA,sCACA,4CACA,4CACF,EACA,OAAQ,CACN,gCACA,4CACA,yCACA,6CACA,kCACA,yCACA,0CACA,qCACA,8CACA,kDACA,wCACA,8CACA,8CACF,EACA,KAAM,CACJ,8BACA,4CACA,uCACA,2CACA,gCACA,uCACA,wCACA,mCACA,4CACA,gDACA,sCACA,4CACA,4CACF,EACA,MAAO,CACL,+BACA,4CACA,wCACA,4CACA,iCACA,wCACA,yCACA,oCACA,6CACA,iDACA,uCACA,6CACA,6CACF,CACF"}

package/dist/lib/button.d.ts

@@ -3,16 +3,16 @@ import { UIColor } from "./color.js";
 
 //#region src/lib/button.d.ts
 declare const buttonColorVariants: {
-  readonly primary: readonly ["[--button-solid:var(--primary-500)]", "[--button-solid-hover:var(--primary-600)]", "[--button-solid-foreground:var(--zinc-50)]", "[--button-outline-border:var(--primary-500)]", "[--button-outline-foreground:var(--primary-500)]", "[--button-soft:var(--primary-50)]", "[--button-soft-hover:var(--primary-100)]", "[--button-soft-foreground:var(--primary-500)]", "[--button-ghost-hover:var(--primary-50)]", "[--button-ghost-foreground:var(--primary-500)]", "[--button-link-foreground:var(--primary-500)]", "dark:[--button-solid:var(--primary-500)]", "dark:[--button-solid-hover:var(--primary-600)]", "dark:[--button-outline-border:var(--primary-500)]", "dark:[--button-outline-foreground:var(--primary-500)]", "dark:[--button-soft:var(--primary-950)]", "dark:[--button-soft-hover:var(--primary-900)]", "dark:[--button-soft-foreground:var(--primary-500)]", "dark:[--button-ghost-hover:var(--primary-950)]", "dark:[--button-ghost-foreground:var(--primary-500)]", "dark:[--button-link-foreground:var(--primary-500)]"];
-  readonly brand: readonly ["[--button-solid:var(--brand-500)]", "[--button-solid-hover:var(--brand-600)]", "[--button-solid-foreground:var(--zinc-50)]", "[--button-outline-border:var(--brand-500)]", "[--button-outline-foreground:var(--brand-500)]", "[--button-soft:var(--brand-50)]", "[--button-soft-hover:var(--brand-100)]", "[--button-soft-foreground:var(--brand-500)]", "[--button-ghost-hover:var(--brand-50)]", "[--button-ghost-foreground:var(--brand-500)]", "[--button-link-foreground:var(--brand-500)]", "dark:[--button-solid:var(--brand-500)]", "dark:[--button-solid-hover:var(--brand-600)]", "dark:[--button-outline-border:var(--brand-500)]", "dark:[--button-outline-foreground:var(--brand-500)]", "dark:[--button-soft:var(--brand-950)]", "dark:[--button-soft-hover:var(--brand-900)]", "dark:[--button-soft-foreground:var(--brand-500)]", "dark:[--button-ghost-hover:var(--brand-950)]", "dark:[--button-ghost-foreground:var(--brand-500)]", "dark:[--button-link-foreground:var(--brand-500)]"];
-  readonly gray: readonly ["[--button-solid:var(--gray-500)]", "[--button-solid-hover:var(--gray-600)]", "[--button-solid-foreground:var(--zinc-50)]", "[--button-outline-border:var(--gray-500)]", "[--button-outline-foreground:var(--gray-500)]", "[--button-soft:var(--gray-100)]", "[--button-soft-hover:var(--gray-200)]", "[--button-soft-foreground:var(--gray-500)]", "[--button-ghost-hover:var(--gray-100)]", "[--button-ghost-foreground:var(--gray-500)]", "[--button-link-foreground:var(--gray-500)]", "dark:[--button-solid:var(--gray-500)]", "dark:[--button-solid-hover:var(--gray-600)]", "dark:[--button-outline-border:var(--gray-500)]", "dark:[--button-outline-foreground:var(--gray-500)]", "dark:[--button-soft:var(--gray-950)]", "dark:[--button-soft-hover:var(--gray-900)]", "dark:[--button-soft-foreground:var(--gray-500)]", "dark:[--button-ghost-hover:var(--gray-950)]", "dark:[--button-ghost-foreground:var(--gray-500)]", "dark:[--button-link-foreground:var(--gray-500)]"];
-  readonly zinc: readonly ["[--button-solid:var(--zinc-500)]", "[--button-solid-hover:var(--zinc-600)]", "[--button-solid-foreground:var(--zinc-50)]", "[--button-outline-border:var(--zinc-500)]", "[--button-outline-foreground:var(--zinc-500)]", "[--button-soft:var(--zinc-100)]", "[--button-soft-hover:var(--zinc-200)]", "[--button-soft-foreground:var(--zinc-500)]", "[--button-ghost-hover:var(--zinc-100)]", "[--button-ghost-foreground:var(--zinc-500)]", "[--button-link-foreground:var(--zinc-500)]", "dark:[--button-solid:var(--zinc-500)]", "dark:[--button-solid-hover:var(--zinc-600)]", "dark:[--button-outline-border:var(--zinc-500)]", "dark:[--button-outline-foreground:var(--zinc-500)]", "dark:[--button-soft:var(--zinc-950)]", "dark:[--button-soft-hover:var(--zinc-900)]", "dark:[--button-soft-foreground:var(--zinc-500)]", "dark:[--button-ghost-hover:var(--zinc-950)]", "dark:[--button-ghost-foreground:var(--zinc-500)]", "dark:[--button-link-foreground:var(--zinc-500)]"];
-  readonly red: readonly ["[--button-solid:var(--red-500)]", "[--button-solid-hover:var(--red-600)]", "[--button-solid-foreground:var(--zinc-50)]", "[--button-outline-border:var(--red-500)]", "[--button-outline-foreground:var(--red-500)]", "[--button-soft:var(--red-50)]", "[--button-soft-hover:var(--red-100)]", "[--button-soft-foreground:var(--red-500)]", "[--button-ghost-hover:var(--red-50)]", "[--button-ghost-foreground:var(--red-500)]", "[--button-link-foreground:var(--red-500)]", "dark:[--button-solid:var(--red-500)]", "dark:[--button-solid-hover:var(--red-600)]", "dark:[--button-outline-border:var(--red-500)]", "dark:[--button-outline-foreground:var(--red-500)]", "dark:[--button-soft:var(--red-950)]", "dark:[--button-soft-hover:var(--red-900)]", "dark:[--button-soft-foreground:var(--red-500)]", "dark:[--button-ghost-hover:var(--red-950)]", "dark:[--button-ghost-foreground:var(--red-500)]", "dark:[--button-link-foreground:var(--red-500)]"];
-  readonly yellow: readonly ["[--button-solid:var(--yellow-500)]", "[--button-solid-hover:var(--yellow-600)]", "[--button-solid-foreground:var(--zinc-50)]", "[--button-outline-border:var(--yellow-500)]", "[--button-outline-foreground:var(--yellow-500)]", "[--button-soft:var(--yellow-50)]", "[--button-soft-hover:var(--yellow-100)]", "[--button-soft-foreground:var(--yellow-500)]", "[--button-ghost-hover:var(--yellow-50)]", "[--button-ghost-foreground:var(--yellow-500)]", "[--button-link-foreground:var(--yellow-500)]", "dark:[--button-solid:var(--yellow-500)]", "dark:[--button-solid-hover:var(--yellow-600)]", "dark:[--button-outline-border:var(--yellow-500)]", "dark:[--button-outline-foreground:var(--yellow-500)]", "dark:[--button-soft:var(--yellow-950)]", "dark:[--button-soft-hover:var(--yellow-900)]", "dark:[--button-soft-foreground:var(--yellow-500)]", "dark:[--button-ghost-hover:var(--yellow-950)]", "dark:[--button-ghost-foreground:var(--yellow-500)]", "dark:[--button-link-foreground:var(--yellow-500)]"];
-  readonly blue: readonly ["[--button-solid:var(--blue-500)]", "[--button-solid-hover:var(--blue-600)]", "[--button-solid-foreground:var(--zinc-50)]", "[--button-outline-border:var(--blue-500)]", "[--button-outline-foreground:var(--blue-500)]", "[--button-soft:var(--blue-50)]", "[--button-soft-hover:var(--blue-100)]", "[--button-soft-foreground:var(--blue-500)]", "[--button-ghost-hover:var(--blue-50)]", "[--button-ghost-foreground:var(--blue-500)]", "[--button-link-foreground:var(--blue-500)]", "dark:[--button-solid:var(--blue-500)]", "dark:[--button-solid-hover:var(--blue-600)]", "dark:[--button-outline-border:var(--blue-500)]", "dark:[--button-outline-foreground:var(--blue-500)]", "dark:[--button-soft:var(--blue-950)]", "dark:[--button-soft-hover:var(--blue-900)]", "dark:[--button-soft-foreground:var(--blue-500)]", "dark:[--button-ghost-hover:var(--blue-950)]", "dark:[--button-ghost-foreground:var(--blue-500)]", "dark:[--button-link-foreground:var(--blue-500)]"];
-  readonly indigo: readonly ["[--button-solid:var(--indigo-500)]", "[--button-solid-hover:var(--indigo-600)]", "[--button-solid-foreground:var(--zinc-50)]", "[--button-outline-border:var(--indigo-500)]", "[--button-outline-foreground:var(--indigo-500)]", "[--button-soft:var(--indigo-50)]", "[--button-soft-hover:var(--indigo-100)]", "[--button-soft-foreground:var(--indigo-500)]", "[--button-ghost-hover:var(--indigo-50)]", "[--button-ghost-foreground:var(--indigo-500)]", "[--button-link-foreground:var(--indigo-500)]", "dark:[--button-solid:var(--indigo-500)]", "dark:[--button-solid-hover:var(--indigo-600)]", "dark:[--button-outline-border:var(--indigo-500)]", "dark:[--button-outline-foreground:var(--indigo-500)]", "dark:[--button-soft:var(--indigo-950)]", "dark:[--button-soft-hover:var(--indigo-900)]", "dark:[--button-soft-foreground:var(--indigo-500)]", "dark:[--button-ghost-hover:var(--indigo-950)]", "dark:[--button-ghost-foreground:var(--indigo-500)]", "dark:[--button-link-foreground:var(--indigo-500)]"];
-  readonly pink: readonly ["[--button-solid:var(--pink-500)]", "[--button-solid-hover:var(--pink-600)]", "[--button-solid-foreground:var(--zinc-50)]", "[--button-outline-border:var(--pink-500)]", "[--button-outline-foreground:var(--pink-500)]", "[--button-soft:var(--pink-50)]", "[--button-soft-hover:var(--pink-100)]", "[--button-soft-foreground:var(--pink-500)]", "[--button-ghost-hover:var(--pink-50)]", "[--button-ghost-foreground:var(--pink-500)]", "[--button-link-foreground:var(--pink-500)]", "dark:[--button-solid:var(--pink-500)]", "dark:[--button-solid-hover:var(--pink-600)]", "dark:[--button-outline-border:var(--pink-500)]", "dark:[--button-outline-foreground:var(--pink-500)]", "dark:[--button-soft:var(--pink-950)]", "dark:[--button-soft-hover:var(--pink-900)]", "dark:[--button-soft-foreground:var(--pink-500)]", "dark:[--button-ghost-hover:var(--pink-950)]", "dark:[--button-ghost-foreground:var(--pink-500)]", "dark:[--button-link-foreground:var(--pink-500)]"];
-  readonly green: readonly ["[--button-solid:var(--green-500)]", "[--button-solid-hover:var(--green-600)]", "[--button-solid-foreground:var(--zinc-50)]", "[--button-outline-border:var(--green-500)]", "[--button-outline-foreground:var(--green-500)]", "[--button-soft:var(--green-50)]", "[--button-soft-hover:var(--green-100)]", "[--button-soft-foreground:var(--green-500)]", "[--button-ghost-hover:var(--green-50)]", "[--button-ghost-foreground:var(--green-500)]", "[--button-link-foreground:var(--green-500)]", "dark:[--button-solid:var(--green-500)]", "dark:[--button-solid-hover:var(--green-600)]", "dark:[--button-outline-border:var(--green-500)]", "dark:[--button-outline-foreground:var(--green-500)]", "dark:[--button-soft:var(--green-950)]", "dark:[--button-soft-hover:var(--green-900)]", "dark:[--button-soft-foreground:var(--green-500)]", "dark:[--button-ghost-hover:var(--green-950)]", "dark:[--button-ghost-foreground:var(--green-500)]", "dark:[--button-link-foreground:var(--green-500)]"];
+  readonly primary: readonly ["[--button-solid:var(--primary)]", "[--button-solid-hover:var(--primary-600)]", "[--button-solid-foreground:var(--zinc-50)]", "[--button-outline-border:var(--primary)]", "[--button-outline-foreground:var(--primary)]", "[--button-soft:var(--primary-50)]", "[--button-soft-hover:var(--primary-100)]", "[--button-soft-foreground:var(--primary)]", "[--button-ghost-hover:var(--primary-50)]", "[--button-ghost-foreground:var(--primary)]", "[--button-link-foreground:var(--primary)]", "dark:[--button-solid:var(--primary)]", "dark:[--button-solid-hover:var(--primary-600)]", "dark:[--button-outline-border:var(--primary)]", "dark:[--button-outline-foreground:var(--primary)]", "dark:[--button-soft:var(--primary-950)]", "dark:[--button-soft-hover:var(--primary-900)]", "dark:[--button-soft-foreground:var(--primary)]", "dark:[--button-ghost-hover:var(--primary-950)]", "dark:[--button-ghost-foreground:var(--primary)]", "dark:[--button-link-foreground:var(--primary)]"];
+  readonly brand: readonly ["[--button-solid:var(--brand)]", "[--button-solid-hover:var(--brand-600)]", "[--button-solid-foreground:var(--zinc-50)]", "[--button-outline-border:var(--brand)]", "[--button-outline-foreground:var(--brand)]", "[--button-soft:var(--brand-50)]", "[--button-soft-hover:var(--brand-100)]", "[--button-soft-foreground:var(--brand)]", "[--button-ghost-hover:var(--brand-50)]", "[--button-ghost-foreground:var(--brand)]", "[--button-link-foreground:var(--brand)]", "dark:[--button-solid:var(--brand)]", "dark:[--button-solid-hover:var(--brand-600)]", "dark:[--button-outline-border:var(--brand)]", "dark:[--button-outline-foreground:var(--brand)]", "dark:[--button-soft:var(--brand-950)]", "dark:[--button-soft-hover:var(--brand-900)]", "dark:[--button-soft-foreground:var(--brand)]", "dark:[--button-ghost-hover:var(--brand-950)]", "dark:[--button-ghost-foreground:var(--brand)]", "dark:[--button-link-foreground:var(--brand)]"];
+  readonly gray: readonly ["[--button-solid:var(--gray)]", "[--button-solid-hover:var(--gray-600)]", "[--button-solid-foreground:var(--zinc-50)]", "[--button-outline-border:var(--gray)]", "[--button-outline-foreground:var(--gray)]", "[--button-soft:var(--gray-100)]", "[--button-soft-hover:var(--gray-200)]", "[--button-soft-foreground:var(--gray)]", "[--button-ghost-hover:var(--gray-100)]", "[--button-ghost-foreground:var(--gray)]", "[--button-link-foreground:var(--gray)]", "dark:[--button-solid:var(--gray)]", "dark:[--button-solid-hover:var(--gray-600)]", "dark:[--button-outline-border:var(--gray)]", "dark:[--button-outline-foreground:var(--gray)]", "dark:[--button-soft:var(--gray-950)]", "dark:[--button-soft-hover:var(--gray-900)]", "dark:[--button-soft-foreground:var(--gray)]", "dark:[--button-ghost-hover:var(--gray-950)]", "dark:[--button-ghost-foreground:var(--gray)]", "dark:[--button-link-foreground:var(--gray)]"];
+  readonly zinc: readonly ["[--button-solid:var(--zinc)]", "[--button-solid-hover:var(--zinc-600)]", "[--button-solid-foreground:var(--zinc-50)]", "[--button-outline-border:var(--zinc)]", "[--button-outline-foreground:var(--zinc)]", "[--button-soft:var(--zinc-100)]", "[--button-soft-hover:var(--zinc-200)]", "[--button-soft-foreground:var(--zinc)]", "[--button-ghost-hover:var(--zinc-100)]", "[--button-ghost-foreground:var(--zinc)]", "[--button-link-foreground:var(--zinc)]", "dark:[--button-solid:var(--zinc)]", "dark:[--button-solid-hover:var(--zinc-600)]", "dark:[--button-outline-border:var(--zinc)]", "dark:[--button-outline-foreground:var(--zinc)]", "dark:[--button-soft:var(--zinc-950)]", "dark:[--button-soft-hover:var(--zinc-900)]", "dark:[--button-soft-foreground:var(--zinc)]", "dark:[--button-ghost-hover:var(--zinc-950)]", "dark:[--button-ghost-foreground:var(--zinc)]", "dark:[--button-link-foreground:var(--zinc)]"];
+  readonly red: readonly ["[--button-solid:var(--red)]", "[--button-solid-hover:var(--red-600)]", "[--button-solid-foreground:var(--zinc-50)]", "[--button-outline-border:var(--red)]", "[--button-outline-foreground:var(--red)]", "[--button-soft:var(--red-50)]", "[--button-soft-hover:var(--red-100)]", "[--button-soft-foreground:var(--red)]", "[--button-ghost-hover:var(--red-50)]", "[--button-ghost-foreground:var(--red)]", "[--button-link-foreground:var(--red)]", "dark:[--button-solid:var(--red)]", "dark:[--button-solid-hover:var(--red-600)]", "dark:[--button-outline-border:var(--red)]", "dark:[--button-outline-foreground:var(--red)]", "dark:[--button-soft:var(--red-950)]", "dark:[--button-soft-hover:var(--red-900)]", "dark:[--button-soft-foreground:var(--red)]", "dark:[--button-ghost-hover:var(--red-950)]", "dark:[--button-ghost-foreground:var(--red)]", "dark:[--button-link-foreground:var(--red)]"];
+  readonly yellow: readonly ["[--button-solid:var(--yellow)]", "[--button-solid-hover:var(--yellow-600)]", "[--button-solid-foreground:var(--zinc-50)]", "[--button-outline-border:var(--yellow)]", "[--button-outline-foreground:var(--yellow)]", "[--button-soft:var(--yellow-50)]", "[--button-soft-hover:var(--yellow-100)]", "[--button-soft-foreground:var(--yellow)]", "[--button-ghost-hover:var(--yellow-50)]", "[--button-ghost-foreground:var(--yellow)]", "[--button-link-foreground:var(--yellow)]", "dark:[--button-solid:var(--yellow)]", "dark:[--button-solid-hover:var(--yellow-600)]", "dark:[--button-outline-border:var(--yellow)]", "dark:[--button-outline-foreground:var(--yellow)]", "dark:[--button-soft:var(--yellow-950)]", "dark:[--button-soft-hover:var(--yellow-900)]", "dark:[--button-soft-foreground:var(--yellow)]", "dark:[--button-ghost-hover:var(--yellow-950)]", "dark:[--button-ghost-foreground:var(--yellow)]", "dark:[--button-link-foreground:var(--yellow)]"];
+  readonly blue: readonly ["[--button-solid:var(--blue)]", "[--button-solid-hover:var(--blue-600)]", "[--button-solid-foreground:var(--zinc-50)]", "[--button-outline-border:var(--blue)]", "[--button-outline-foreground:var(--blue)]", "[--button-soft:var(--blue-50)]", "[--button-soft-hover:var(--blue-100)]", "[--button-soft-foreground:var(--blue)]", "[--button-ghost-hover:var(--blue-50)]", "[--button-ghost-foreground:var(--blue)]", "[--button-link-foreground:var(--blue)]", "dark:[--button-solid:var(--blue)]", "dark:[--button-solid-hover:var(--blue-600)]", "dark:[--button-outline-border:var(--blue)]", "dark:[--button-outline-foreground:var(--blue)]", "dark:[--button-soft:var(--blue-950)]", "dark:[--button-soft-hover:var(--blue-900)]", "dark:[--button-soft-foreground:var(--blue)]", "dark:[--button-ghost-hover:var(--blue-950)]", "dark:[--button-ghost-foreground:var(--blue)]", "dark:[--button-link-foreground:var(--blue)]"];
+  readonly indigo: readonly ["[--button-solid:var(--indigo)]", "[--button-solid-hover:var(--indigo-600)]", "[--button-solid-foreground:var(--zinc-50)]", "[--button-outline-border:var(--indigo)]", "[--button-outline-foreground:var(--indigo)]", "[--button-soft:var(--indigo-50)]", "[--button-soft-hover:var(--indigo-100)]", "[--button-soft-foreground:var(--indigo)]", "[--button-ghost-hover:var(--indigo-50)]", "[--button-ghost-foreground:var(--indigo)]", "[--button-link-foreground:var(--indigo)]", "dark:[--button-solid:var(--indigo)]", "dark:[--button-solid-hover:var(--indigo-600)]", "dark:[--button-outline-border:var(--indigo)]", "dark:[--button-outline-foreground:var(--indigo)]", "dark:[--button-soft:var(--indigo-950)]", "dark:[--button-soft-hover:var(--indigo-900)]", "dark:[--button-soft-foreground:var(--indigo)]", "dark:[--button-ghost-hover:var(--indigo-950)]", "dark:[--button-ghost-foreground:var(--indigo)]", "dark:[--button-link-foreground:var(--indigo)]"];
+  readonly pink: readonly ["[--button-solid:var(--pink)]", "[--button-solid-hover:var(--pink-600)]", "[--button-solid-foreground:var(--zinc-50)]", "[--button-outline-border:var(--pink)]", "[--button-outline-foreground:var(--pink)]", "[--button-soft:var(--pink-50)]", "[--button-soft-hover:var(--pink-100)]", "[--button-soft-foreground:var(--pink)]", "[--button-ghost-hover:var(--pink-50)]", "[--button-ghost-foreground:var(--pink)]", "[--button-link-foreground:var(--pink)]", "dark:[--button-solid:var(--pink)]", "dark:[--button-solid-hover:var(--pink-600)]", "dark:[--button-outline-border:var(--pink)]", "dark:[--button-outline-foreground:var(--pink)]", "dark:[--button-soft:var(--pink-950)]", "dark:[--button-soft-hover:var(--pink-900)]", "dark:[--button-soft-foreground:var(--pink)]", "dark:[--button-ghost-hover:var(--pink-950)]", "dark:[--button-ghost-foreground:var(--pink)]", "dark:[--button-link-foreground:var(--pink)]"];
+  readonly green: readonly ["[--button-solid:var(--green)]", "[--button-solid-hover:var(--green-600)]", "[--button-solid-foreground:var(--zinc-50)]", "[--button-outline-border:var(--green)]", "[--button-outline-foreground:var(--green)]", "[--button-soft:var(--green-50)]", "[--button-soft-hover:var(--green-100)]", "[--button-soft-foreground:var(--green)]", "[--button-ghost-hover:var(--green-50)]", "[--button-ghost-foreground:var(--green)]", "[--button-link-foreground:var(--green)]", "dark:[--button-solid:var(--green)]", "dark:[--button-solid-hover:var(--green-600)]", "dark:[--button-outline-border:var(--green)]", "dark:[--button-outline-foreground:var(--green)]", "dark:[--button-soft:var(--green-950)]", "dark:[--button-soft-hover:var(--green-900)]", "dark:[--button-soft-foreground:var(--green)]", "dark:[--button-ghost-hover:var(--green-950)]", "dark:[--button-ghost-foreground:var(--green)]", "dark:[--button-link-foreground:var(--green)]"];
 };
 type ButtonColor = UIColor;
 //#endregion

package/dist/lib/button.js

@@ -1,2 +1,2 @@
-const e={primary:[`[--button-solid:var(--primary-500)]`,`[--button-solid-hover:var(--primary-600)]`,`[--button-solid-foreground:var(--zinc-50)]`,`[--button-outline-border:var(--primary-500)]`,`[--button-outline-foreground:var(--primary-500)]`,`[--button-soft:var(--primary-50)]`,`[--button-soft-hover:var(--primary-100)]`,`[--button-soft-foreground:var(--primary-500)]`,`[--button-ghost-hover:var(--primary-50)]`,`[--button-ghost-foreground:var(--primary-500)]`,`[--button-link-foreground:var(--primary-500)]`,`dark:[--button-solid:var(--primary-500)]`,`dark:[--button-solid-hover:var(--primary-600)]`,`dark:[--button-outline-border:var(--primary-500)]`,`dark:[--button-outline-foreground:var(--primary-500)]`,`dark:[--button-soft:var(--primary-950)]`,`dark:[--button-soft-hover:var(--primary-900)]`,`dark:[--button-soft-foreground:var(--primary-500)]`,`dark:[--button-ghost-hover:var(--primary-950)]`,`dark:[--button-ghost-foreground:var(--primary-500)]`,`dark:[--button-link-foreground:var(--primary-500)]`],brand:[`[--button-solid:var(--brand-500)]`,`[--button-solid-hover:var(--brand-600)]`,`[--button-solid-foreground:var(--zinc-50)]`,`[--button-outline-border:var(--brand-500)]`,`[--button-outline-foreground:var(--brand-500)]`,`[--button-soft:var(--brand-50)]`,`[--button-soft-hover:var(--brand-100)]`,`[--button-soft-foreground:var(--brand-500)]`,`[--button-ghost-hover:var(--brand-50)]`,`[--button-ghost-foreground:var(--brand-500)]`,`[--button-link-foreground:var(--brand-500)]`,`dark:[--button-solid:var(--brand-500)]`,`dark:[--button-solid-hover:var(--brand-600)]`,`dark:[--button-outline-border:var(--brand-500)]`,`dark:[--button-outline-foreground:var(--brand-500)]`,`dark:[--button-soft:var(--brand-950)]`,`dark:[--button-soft-hover:var(--brand-900)]`,`dark:[--button-soft-foreground:var(--brand-500)]`,`dark:[--button-ghost-hover:var(--brand-950)]`,`dark:[--button-ghost-foreground:var(--brand-500)]`,`dark:[--button-link-foreground:var(--brand-500)]`],gray:[`[--button-solid:var(--gray-500)]`,`[--button-solid-hover:var(--gray-600)]`,`[--button-solid-foreground:var(--zinc-50)]`,`[--button-outline-border:var(--gray-500)]`,`[--button-outline-foreground:var(--gray-500)]`,`[--button-soft:var(--gray-100)]`,`[--button-soft-hover:var(--gray-200)]`,`[--button-soft-foreground:var(--gray-500)]`,`[--button-ghost-hover:var(--gray-100)]`,`[--button-ghost-foreground:var(--gray-500)]`,`[--button-link-foreground:var(--gray-500)]`,`dark:[--button-solid:var(--gray-500)]`,`dark:[--button-solid-hover:var(--gray-600)]`,`dark:[--button-outline-border:var(--gray-500)]`,`dark:[--button-outline-foreground:var(--gray-500)]`,`dark:[--button-soft:var(--gray-950)]`,`dark:[--button-soft-hover:var(--gray-900)]`,`dark:[--button-soft-foreground:var(--gray-500)]`,`dark:[--button-ghost-hover:var(--gray-950)]`,`dark:[--button-ghost-foreground:var(--gray-500)]`,`dark:[--button-link-foreground:var(--gray-500)]`],zinc:[`[--button-solid:var(--zinc-500)]`,`[--button-solid-hover:var(--zinc-600)]`,`[--button-solid-foreground:var(--zinc-50)]`,`[--button-outline-border:var(--zinc-500)]`,`[--button-outline-foreground:var(--zinc-500)]`,`[--button-soft:var(--zinc-100)]`,`[--button-soft-hover:var(--zinc-200)]`,`[--button-soft-foreground:var(--zinc-500)]`,`[--button-ghost-hover:var(--zinc-100)]`,`[--button-ghost-foreground:var(--zinc-500)]`,`[--button-link-foreground:var(--zinc-500)]`,`dark:[--button-solid:var(--zinc-500)]`,`dark:[--button-solid-hover:var(--zinc-600)]`,`dark:[--button-outline-border:var(--zinc-500)]`,`dark:[--button-outline-foreground:var(--zinc-500)]`,`dark:[--button-soft:var(--zinc-950)]`,`dark:[--button-soft-hover:var(--zinc-900)]`,`dark:[--button-soft-foreground:var(--zinc-500)]`,`dark:[--button-ghost-hover:var(--zinc-950)]`,`dark:[--button-ghost-foreground:var(--zinc-500)]`,`dark:[--button-link-foreground:var(--zinc-500)]`],red:[`[--button-solid:var(--red-500)]`,`[--button-solid-hover:var(--red-600)]`,`[--button-solid-foreground:var(--zinc-50)]`,`[--button-outline-border:var(--red-500)]`,`[--button-outline-foreground:var(--red-500)]`,`[--button-soft:var(--red-50)]`,`[--button-soft-hover:var(--red-100)]`,`[--button-soft-foreground:var(--red-500)]`,`[--button-ghost-hover:var(--red-50)]`,`[--button-ghost-foreground:var(--red-500)]`,`[--button-link-foreground:var(--red-500)]`,`dark:[--button-solid:var(--red-500)]`,`dark:[--button-solid-hover:var(--red-600)]`,`dark:[--button-outline-border:var(--red-500)]`,`dark:[--button-outline-foreground:var(--red-500)]`,`dark:[--button-soft:var(--red-950)]`,`dark:[--button-soft-hover:var(--red-900)]`,`dark:[--button-soft-foreground:var(--red-500)]`,`dark:[--button-ghost-hover:var(--red-950)]`,`dark:[--button-ghost-foreground:var(--red-500)]`,`dark:[--button-link-foreground:var(--red-500)]`],yellow:[`[--button-solid:var(--yellow-500)]`,`[--button-solid-hover:var(--yellow-600)]`,`[--button-solid-foreground:var(--zinc-50)]`,`[--button-outline-border:var(--yellow-500)]`,`[--button-outline-foreground:var(--yellow-500)]`,`[--button-soft:var(--yellow-50)]`,`[--button-soft-hover:var(--yellow-100)]`,`[--button-soft-foreground:var(--yellow-500)]`,`[--button-ghost-hover:var(--yellow-50)]`,`[--button-ghost-foreground:var(--yellow-500)]`,`[--button-link-foreground:var(--yellow-500)]`,`dark:[--button-solid:var(--yellow-500)]`,`dark:[--button-solid-hover:var(--yellow-600)]`,`dark:[--button-outline-border:var(--yellow-500)]`,`dark:[--button-outline-foreground:var(--yellow-500)]`,`dark:[--button-soft:var(--yellow-950)]`,`dark:[--button-soft-hover:var(--yellow-900)]`,`dark:[--button-soft-foreground:var(--yellow-500)]`,`dark:[--button-ghost-hover:var(--yellow-950)]`,`dark:[--button-ghost-foreground:var(--yellow-500)]`,`dark:[--button-link-foreground:var(--yellow-500)]`],blue:[`[--button-solid:var(--blue-500)]`,`[--button-solid-hover:var(--blue-600)]`,`[--button-solid-foreground:var(--zinc-50)]`,`[--button-outline-border:var(--blue-500)]`,`[--button-outline-foreground:var(--blue-500)]`,`[--button-soft:var(--blue-50)]`,`[--button-soft-hover:var(--blue-100)]`,`[--button-soft-foreground:var(--blue-500)]`,`[--button-ghost-hover:var(--blue-50)]`,`[--button-ghost-foreground:var(--blue-500)]`,`[--button-link-foreground:var(--blue-500)]`,`dark:[--button-solid:var(--blue-500)]`,`dark:[--button-solid-hover:var(--blue-600)]`,`dark:[--button-outline-border:var(--blue-500)]`,`dark:[--button-outline-foreground:var(--blue-500)]`,`dark:[--button-soft:var(--blue-950)]`,`dark:[--button-soft-hover:var(--blue-900)]`,`dark:[--button-soft-foreground:var(--blue-500)]`,`dark:[--button-ghost-hover:var(--blue-950)]`,`dark:[--button-ghost-foreground:var(--blue-500)]`,`dark:[--button-link-foreground:var(--blue-500)]`],indigo:[`[--button-solid:var(--indigo-500)]`,`[--button-solid-hover:var(--indigo-600)]`,`[--button-solid-foreground:var(--zinc-50)]`,`[--button-outline-border:var(--indigo-500)]`,`[--button-outline-foreground:var(--indigo-500)]`,`[--button-soft:var(--indigo-50)]`,`[--button-soft-hover:var(--indigo-100)]`,`[--button-soft-foreground:var(--indigo-500)]`,`[--button-ghost-hover:var(--indigo-50)]`,`[--button-ghost-foreground:var(--indigo-500)]`,`[--button-link-foreground:var(--indigo-500)]`,`dark:[--button-solid:var(--indigo-500)]`,`dark:[--button-solid-hover:var(--indigo-600)]`,`dark:[--button-outline-border:var(--indigo-500)]`,`dark:[--button-outline-foreground:var(--indigo-500)]`,`dark:[--button-soft:var(--indigo-950)]`,`dark:[--button-soft-hover:var(--indigo-900)]`,`dark:[--button-soft-foreground:var(--indigo-500)]`,`dark:[--button-ghost-hover:var(--indigo-950)]`,`dark:[--button-ghost-foreground:var(--indigo-500)]`,`dark:[--button-link-foreground:var(--indigo-500)]`],pink:[`[--button-solid:var(--pink-500)]`,`[--button-solid-hover:var(--pink-600)]`,`[--button-solid-foreground:var(--zinc-50)]`,`[--button-outline-border:var(--pink-500)]`,`[--button-outline-foreground:var(--pink-500)]`,`[--button-soft:var(--pink-50)]`,`[--button-soft-hover:var(--pink-100)]`,`[--button-soft-foreground:var(--pink-500)]`,`[--button-ghost-hover:var(--pink-50)]`,`[--button-ghost-foreground:var(--pink-500)]`,`[--button-link-foreground:var(--pink-500)]`,`dark:[--button-solid:var(--pink-500)]`,`dark:[--button-solid-hover:var(--pink-600)]`,`dark:[--button-outline-border:var(--pink-500)]`,`dark:[--button-outline-foreground:var(--pink-500)]`,`dark:[--button-soft:var(--pink-950)]`,`dark:[--button-soft-hover:var(--pink-900)]`,`dark:[--button-soft-foreground:var(--pink-500)]`,`dark:[--button-ghost-hover:var(--pink-950)]`,`dark:[--button-ghost-foreground:var(--pink-500)]`,`dark:[--button-link-foreground:var(--pink-500)]`],green:[`[--button-solid:var(--green-500)]`,`[--button-solid-hover:var(--green-600)]`,`[--button-solid-foreground:var(--zinc-50)]`,`[--button-outline-border:var(--green-500)]`,`[--button-outline-foreground:var(--green-500)]`,`[--button-soft:var(--green-50)]`,`[--button-soft-hover:var(--green-100)]`,`[--button-soft-foreground:var(--green-500)]`,`[--button-ghost-hover:var(--green-50)]`,`[--button-ghost-foreground:var(--green-500)]`,`[--button-link-foreground:var(--green-500)]`,`dark:[--button-solid:var(--green-500)]`,`dark:[--button-solid-hover:var(--green-600)]`,`dark:[--button-outline-border:var(--green-500)]`,`dark:[--button-outline-foreground:var(--green-500)]`,`dark:[--button-soft:var(--green-950)]`,`dark:[--button-soft-hover:var(--green-900)]`,`dark:[--button-soft-foreground:var(--green-500)]`,`dark:[--button-ghost-hover:var(--green-950)]`,`dark:[--button-ghost-foreground:var(--green-500)]`,`dark:[--button-link-foreground:var(--green-500)]`]};export{e as buttonColorVariants};
+const e={primary:[`[--button-solid:var(--primary)]`,`[--button-solid-hover:var(--primary-600)]`,`[--button-solid-foreground:var(--zinc-50)]`,`[--button-outline-border:var(--primary)]`,`[--button-outline-foreground:var(--primary)]`,`[--button-soft:var(--primary-50)]`,`[--button-soft-hover:var(--primary-100)]`,`[--button-soft-foreground:var(--primary)]`,`[--button-ghost-hover:var(--primary-50)]`,`[--button-ghost-foreground:var(--primary)]`,`[--button-link-foreground:var(--primary)]`,`dark:[--button-solid:var(--primary)]`,`dark:[--button-solid-hover:var(--primary-600)]`,`dark:[--button-outline-border:var(--primary)]`,`dark:[--button-outline-foreground:var(--primary)]`,`dark:[--button-soft:var(--primary-950)]`,`dark:[--button-soft-hover:var(--primary-900)]`,`dark:[--button-soft-foreground:var(--primary)]`,`dark:[--button-ghost-hover:var(--primary-950)]`,`dark:[--button-ghost-foreground:var(--primary)]`,`dark:[--button-link-foreground:var(--primary)]`],brand:[`[--button-solid:var(--brand)]`,`[--button-solid-hover:var(--brand-600)]`,`[--button-solid-foreground:var(--zinc-50)]`,`[--button-outline-border:var(--brand)]`,`[--button-outline-foreground:var(--brand)]`,`[--button-soft:var(--brand-50)]`,`[--button-soft-hover:var(--brand-100)]`,`[--button-soft-foreground:var(--brand)]`,`[--button-ghost-hover:var(--brand-50)]`,`[--button-ghost-foreground:var(--brand)]`,`[--button-link-foreground:var(--brand)]`,`dark:[--button-solid:var(--brand)]`,`dark:[--button-solid-hover:var(--brand-600)]`,`dark:[--button-outline-border:var(--brand)]`,`dark:[--button-outline-foreground:var(--brand)]`,`dark:[--button-soft:var(--brand-950)]`,`dark:[--button-soft-hover:var(--brand-900)]`,`dark:[--button-soft-foreground:var(--brand)]`,`dark:[--button-ghost-hover:var(--brand-950)]`,`dark:[--button-ghost-foreground:var(--brand)]`,`dark:[--button-link-foreground:var(--brand)]`],gray:[`[--button-solid:var(--gray)]`,`[--button-solid-hover:var(--gray-600)]`,`[--button-solid-foreground:var(--zinc-50)]`,`[--button-outline-border:var(--gray)]`,`[--button-outline-foreground:var(--gray)]`,`[--button-soft:var(--gray-100)]`,`[--button-soft-hover:var(--gray-200)]`,`[--button-soft-foreground:var(--gray)]`,`[--button-ghost-hover:var(--gray-100)]`,`[--button-ghost-foreground:var(--gray)]`,`[--button-link-foreground:var(--gray)]`,`dark:[--button-solid:var(--gray)]`,`dark:[--button-solid-hover:var(--gray-600)]`,`dark:[--button-outline-border:var(--gray)]`,`dark:[--button-outline-foreground:var(--gray)]`,`dark:[--button-soft:var(--gray-950)]`,`dark:[--button-soft-hover:var(--gray-900)]`,`dark:[--button-soft-foreground:var(--gray)]`,`dark:[--button-ghost-hover:var(--gray-950)]`,`dark:[--button-ghost-foreground:var(--gray)]`,`dark:[--button-link-foreground:var(--gray)]`],zinc:[`[--button-solid:var(--zinc)]`,`[--button-solid-hover:var(--zinc-600)]`,`[--button-solid-foreground:var(--zinc-50)]`,`[--button-outline-border:var(--zinc)]`,`[--button-outline-foreground:var(--zinc)]`,`[--button-soft:var(--zinc-100)]`,`[--button-soft-hover:var(--zinc-200)]`,`[--button-soft-foreground:var(--zinc)]`,`[--button-ghost-hover:var(--zinc-100)]`,`[--button-ghost-foreground:var(--zinc)]`,`[--button-link-foreground:var(--zinc)]`,`dark:[--button-solid:var(--zinc)]`,`dark:[--button-solid-hover:var(--zinc-600)]`,`dark:[--button-outline-border:var(--zinc)]`,`dark:[--button-outline-foreground:var(--zinc)]`,`dark:[--button-soft:var(--zinc-950)]`,`dark:[--button-soft-hover:var(--zinc-900)]`,`dark:[--button-soft-foreground:var(--zinc)]`,`dark:[--button-ghost-hover:var(--zinc-950)]`,`dark:[--button-ghost-foreground:var(--zinc)]`,`dark:[--button-link-foreground:var(--zinc)]`],red:[`[--button-solid:var(--red)]`,`[--button-solid-hover:var(--red-600)]`,`[--button-solid-foreground:var(--zinc-50)]`,`[--button-outline-border:var(--red)]`,`[--button-outline-foreground:var(--red)]`,`[--button-soft:var(--red-50)]`,`[--button-soft-hover:var(--red-100)]`,`[--button-soft-foreground:var(--red)]`,`[--button-ghost-hover:var(--red-50)]`,`[--button-ghost-foreground:var(--red)]`,`[--button-link-foreground:var(--red)]`,`dark:[--button-solid:var(--red)]`,`dark:[--button-solid-hover:var(--red-600)]`,`dark:[--button-outline-border:var(--red)]`,`dark:[--button-outline-foreground:var(--red)]`,`dark:[--button-soft:var(--red-950)]`,`dark:[--button-soft-hover:var(--red-900)]`,`dark:[--button-soft-foreground:var(--red)]`,`dark:[--button-ghost-hover:var(--red-950)]`,`dark:[--button-ghost-foreground:var(--red)]`,`dark:[--button-link-foreground:var(--red)]`],yellow:[`[--button-solid:var(--yellow)]`,`[--button-solid-hover:var(--yellow-600)]`,`[--button-solid-foreground:var(--zinc-50)]`,`[--button-outline-border:var(--yellow)]`,`[--button-outline-foreground:var(--yellow)]`,`[--button-soft:var(--yellow-50)]`,`[--button-soft-hover:var(--yellow-100)]`,`[--button-soft-foreground:var(--yellow)]`,`[--button-ghost-hover:var(--yellow-50)]`,`[--button-ghost-foreground:var(--yellow)]`,`[--button-link-foreground:var(--yellow)]`,`dark:[--button-solid:var(--yellow)]`,`dark:[--button-solid-hover:var(--yellow-600)]`,`dark:[--button-outline-border:var(--yellow)]`,`dark:[--button-outline-foreground:var(--yellow)]`,`dark:[--button-soft:var(--yellow-950)]`,`dark:[--button-soft-hover:var(--yellow-900)]`,`dark:[--button-soft-foreground:var(--yellow)]`,`dark:[--button-ghost-hover:var(--yellow-950)]`,`dark:[--button-ghost-foreground:var(--yellow)]`,`dark:[--button-link-foreground:var(--yellow)]`],blue:[`[--button-solid:var(--blue)]`,`[--button-solid-hover:var(--blue-600)]`,`[--button-solid-foreground:var(--zinc-50)]`,`[--button-outline-border:var(--blue)]`,`[--button-outline-foreground:var(--blue)]`,`[--button-soft:var(--blue-50)]`,`[--button-soft-hover:var(--blue-100)]`,`[--button-soft-foreground:var(--blue)]`,`[--button-ghost-hover:var(--blue-50)]`,`[--button-ghost-foreground:var(--blue)]`,`[--button-link-foreground:var(--blue)]`,`dark:[--button-solid:var(--blue)]`,`dark:[--button-solid-hover:var(--blue-600)]`,`dark:[--button-outline-border:var(--blue)]`,`dark:[--button-outline-foreground:var(--blue)]`,`dark:[--button-soft:var(--blue-950)]`,`dark:[--button-soft-hover:var(--blue-900)]`,`dark:[--button-soft-foreground:var(--blue)]`,`dark:[--button-ghost-hover:var(--blue-950)]`,`dark:[--button-ghost-foreground:var(--blue)]`,`dark:[--button-link-foreground:var(--blue)]`],indigo:[`[--button-solid:var(--indigo)]`,`[--button-solid-hover:var(--indigo-600)]`,`[--button-solid-foreground:var(--zinc-50)]`,`[--button-outline-border:var(--indigo)]`,`[--button-outline-foreground:var(--indigo)]`,`[--button-soft:var(--indigo-50)]`,`[--button-soft-hover:var(--indigo-100)]`,`[--button-soft-foreground:var(--indigo)]`,`[--button-ghost-hover:var(--indigo-50)]`,`[--button-ghost-foreground:var(--indigo)]`,`[--button-link-foreground:var(--indigo)]`,`dark:[--button-solid:var(--indigo)]`,`dark:[--button-solid-hover:var(--indigo-600)]`,`dark:[--button-outline-border:var(--indigo)]`,`dark:[--button-outline-foreground:var(--indigo)]`,`dark:[--button-soft:var(--indigo-950)]`,`dark:[--button-soft-hover:var(--indigo-900)]`,`dark:[--button-soft-foreground:var(--indigo)]`,`dark:[--button-ghost-hover:var(--indigo-950)]`,`dark:[--button-ghost-foreground:var(--indigo)]`,`dark:[--button-link-foreground:var(--indigo)]`],pink:[`[--button-solid:var(--pink)]`,`[--button-solid-hover:var(--pink-600)]`,`[--button-solid-foreground:var(--zinc-50)]`,`[--button-outline-border:var(--pink)]`,`[--button-outline-foreground:var(--pink)]`,`[--button-soft:var(--pink-50)]`,`[--button-soft-hover:var(--pink-100)]`,`[--button-soft-foreground:var(--pink)]`,`[--button-ghost-hover:var(--pink-50)]`,`[--button-ghost-foreground:var(--pink)]`,`[--button-link-foreground:var(--pink)]`,`dark:[--button-solid:var(--pink)]`,`dark:[--button-solid-hover:var(--pink-600)]`,`dark:[--button-outline-border:var(--pink)]`,`dark:[--button-outline-foreground:var(--pink)]`,`dark:[--button-soft:var(--pink-950)]`,`dark:[--button-soft-hover:var(--pink-900)]`,`dark:[--button-soft-foreground:var(--pink)]`,`dark:[--button-ghost-hover:var(--pink-950)]`,`dark:[--button-ghost-foreground:var(--pink)]`,`dark:[--button-link-foreground:var(--pink)]`],green:[`[--button-solid:var(--green)]`,`[--button-solid-hover:var(--green-600)]`,`[--button-solid-foreground:var(--zinc-50)]`,`[--button-outline-border:var(--green)]`,`[--button-outline-foreground:var(--green)]`,`[--button-soft:var(--green-50)]`,`[--button-soft-hover:var(--green-100)]`,`[--button-soft-foreground:var(--green)]`,`[--button-ghost-hover:var(--green-50)]`,`[--button-ghost-foreground:var(--green)]`,`[--button-link-foreground:var(--green)]`,`dark:[--button-solid:var(--green)]`,`dark:[--button-solid-hover:var(--green-600)]`,`dark:[--button-outline-border:var(--green)]`,`dark:[--button-outline-foreground:var(--green)]`,`dark:[--button-soft:var(--green-950)]`,`dark:[--button-soft-hover:var(--green-900)]`,`dark:[--button-soft-foreground:var(--green)]`,`dark:[--button-ghost-hover:var(--green-950)]`,`dark:[--button-ghost-foreground:var(--green)]`,`dark:[--button-link-foreground:var(--green)]`]};export{e as buttonColorVariants};
 //# sourceMappingURL=button.js.map

package/dist/lib/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","names":[],"sources":["../../src/lib/button.ts"],"sourcesContent":["import type { UIColor } from './color'\n\nexport const buttonColorVariants = {\n  primary: [\n    '[--button-solid:var(--primary-500)]',\n    '[--button-solid-hover:var(--primary-600)]',\n    '[--button-solid-foreground:var(--zinc-50)]',\n    '[--button-outline-border:var(--primary-500)]',\n    '[--button-outline-foreground:var(--primary-500)]',\n    '[--button-soft:var(--primary-50)]',\n    '[--button-soft-hover:var(--primary-100)]',\n    '[--button-soft-foreground:var(--primary-500)]',\n    '[--button-ghost-hover:var(--primary-50)]',\n    '[--button-ghost-foreground:var(--primary-500)]',\n    '[--button-link-foreground:var(--primary-500)]',\n    'dark:[--button-solid:var(--primary-500)]',\n    'dark:[--button-solid-hover:var(--primary-600)]',\n    'dark:[--button-outline-border:var(--primary-500)]',\n    'dark:[--button-outline-foreground:var(--primary-500)]',\n    'dark:[--button-soft:var(--primary-950)]',\n    'dark:[--button-soft-hover:var(--primary-900)]',\n    'dark:[--button-soft-foreground:var(--primary-500)]',\n    'dark:[--button-ghost-hover:var(--primary-950)]',\n    'dark:[--button-ghost-foreground:var(--primary-500)]',\n    'dark:[--button-link-foreground:var(--primary-500)]'\n  ],\n  brand: [\n    '[--button-solid:var(--brand-500)]',\n    '[--button-solid-hover:var(--brand-600)]',\n    '[--button-solid-foreground:var(--zinc-50)]',\n    '[--button-outline-border:var(--brand-500)]',\n    '[--button-outline-foreground:var(--brand-500)]',\n    '[--button-soft:var(--brand-50)]',\n    '[--button-soft-hover:var(--brand-100)]',\n    '[--button-soft-foreground:var(--brand-500)]',\n    '[--button-ghost-hover:var(--brand-50)]',\n    '[--button-ghost-foreground:var(--brand-500)]',\n    '[--button-link-foreground:var(--brand-500)]',\n    'dark:[--button-solid:var(--brand-500)]',\n    'dark:[--button-solid-hover:var(--brand-600)]',\n    'dark:[--button-outline-border:var(--brand-500)]',\n    'dark:[--button-outline-foreground:var(--brand-500)]',\n    'dark:[--button-soft:var(--brand-950)]',\n    'dark:[--button-soft-hover:var(--brand-900)]',\n    'dark:[--button-soft-foreground:var(--brand-500)]',\n    'dark:[--button-ghost-hover:var(--brand-950)]',\n    'dark:[--button-ghost-foreground:var(--brand-500)]',\n    'dark:[--button-link-foreground:var(--brand-500)]'\n  ],\n  gray: [\n    '[--button-solid:var(--gray-500)]',\n    '[--button-solid-hover:var(--gray-600)]',\n    '[--button-solid-foreground:var(--zinc-50)]',\n    '[--button-outline-border:var(--gray-500)]',\n    '[--button-outline-foreground:var(--gray-500)]',\n    '[--button-soft:var(--gray-100)]',\n    '[--button-soft-hover:var(--gray-200)]',\n    '[--button-soft-foreground:var(--gray-500)]',\n    '[--button-ghost-hover:var(--gray-100)]',\n    '[--button-ghost-foreground:var(--gray-500)]',\n    '[--button-link-foreground:var(--gray-500)]',\n    'dark:[--button-solid:var(--gray-500)]',\n    'dark:[--button-solid-hover:var(--gray-600)]',\n    'dark:[--button-outline-border:var(--gray-500)]',\n    'dark:[--button-outline-foreground:var(--gray-500)]',\n    'dark:[--button-soft:var(--gray-950)]',\n    'dark:[--button-soft-hover:var(--gray-900)]',\n    'dark:[--button-soft-foreground:var(--gray-500)]',\n    'dark:[--button-ghost-hover:var(--gray-950)]',\n    'dark:[--button-ghost-foreground:var(--gray-500)]',\n    'dark:[--button-link-foreground:var(--gray-500)]'\n  ],\n  zinc: [\n    '[--button-solid:var(--zinc-500)]',\n    '[--button-solid-hover:var(--zinc-600)]',\n    '[--button-solid-foreground:var(--zinc-50)]',\n    '[--button-outline-border:var(--zinc-500)]',\n    '[--button-outline-foreground:var(--zinc-500)]',\n    '[--button-soft:var(--zinc-100)]',\n    '[--button-soft-hover:var(--zinc-200)]',\n    '[--button-soft-foreground:var(--zinc-500)]',\n    '[--button-ghost-hover:var(--zinc-100)]',\n    '[--button-ghost-foreground:var(--zinc-500)]',\n    '[--button-link-foreground:var(--zinc-500)]',\n    'dark:[--button-solid:var(--zinc-500)]',\n    'dark:[--button-solid-hover:var(--zinc-600)]',\n    'dark:[--button-outline-border:var(--zinc-500)]',\n    'dark:[--button-outline-foreground:var(--zinc-500)]',\n    'dark:[--button-soft:var(--zinc-950)]',\n    'dark:[--button-soft-hover:var(--zinc-900)]',\n    'dark:[--button-soft-foreground:var(--zinc-500)]',\n    'dark:[--button-ghost-hover:var(--zinc-950)]',\n    'dark:[--button-ghost-foreground:var(--zinc-500)]',\n    'dark:[--button-link-foreground:var(--zinc-500)]'\n  ],\n  red: [\n    '[--button-solid:var(--red-500)]',\n    '[--button-solid-hover:var(--red-600)]',\n    '[--button-solid-foreground:var(--zinc-50)]',\n    '[--button-outline-border:var(--red-500)]',\n    '[--button-outline-foreground:var(--red-500)]',\n    '[--button-soft:var(--red-50)]',\n    '[--button-soft-hover:var(--red-100)]',\n    '[--button-soft-foreground:var(--red-500)]',\n    '[--button-ghost-hover:var(--red-50)]',\n    '[--button-ghost-foreground:var(--red-500)]',\n    '[--button-link-foreground:var(--red-500)]',\n    'dark:[--button-solid:var(--red-500)]',\n    'dark:[--button-solid-hover:var(--red-600)]',\n    'dark:[--button-outline-border:var(--red-500)]',\n    'dark:[--button-outline-foreground:var(--red-500)]',\n    'dark:[--button-soft:var(--red-950)]',\n    'dark:[--button-soft-hover:var(--red-900)]',\n    'dark:[--button-soft-foreground:var(--red-500)]',\n    'dark:[--button-ghost-hover:var(--red-950)]',\n    'dark:[--button-ghost-foreground:var(--red-500)]',\n    'dark:[--button-link-foreground:var(--red-500)]'\n  ],\n  yellow: [\n    '[--button-solid:var(--yellow-500)]',\n    '[--button-solid-hover:var(--yellow-600)]',\n    '[--button-solid-foreground:var(--zinc-50)]',\n    '[--button-outline-border:var(--yellow-500)]',\n    '[--button-outline-foreground:var(--yellow-500)]',\n    '[--button-soft:var(--yellow-50)]',\n    '[--button-soft-hover:var(--yellow-100)]',\n    '[--button-soft-foreground:var(--yellow-500)]',\n    '[--button-ghost-hover:var(--yellow-50)]',\n    '[--button-ghost-foreground:var(--yellow-500)]',\n    '[--button-link-foreground:var(--yellow-500)]',\n    'dark:[--button-solid:var(--yellow-500)]',\n    'dark:[--button-solid-hover:var(--yellow-600)]',\n    'dark:[--button-outline-border:var(--yellow-500)]',\n    'dark:[--button-outline-foreground:var(--yellow-500)]',\n    'dark:[--button-soft:var(--yellow-950)]',\n    'dark:[--button-soft-hover:var(--yellow-900)]',\n    'dark:[--button-soft-foreground:var(--yellow-500)]',\n    'dark:[--button-ghost-hover:var(--yellow-950)]',\n    'dark:[--button-ghost-foreground:var(--yellow-500)]',\n    'dark:[--button-link-foreground:var(--yellow-500)]'\n  ],\n  blue: [\n    '[--button-solid:var(--blue-500)]',\n    '[--button-solid-hover:var(--blue-600)]',\n    '[--button-solid-foreground:var(--zinc-50)]',\n    '[--button-outline-border:var(--blue-500)]',\n    '[--button-outline-foreground:var(--blue-500)]',\n    '[--button-soft:var(--blue-50)]',\n    '[--button-soft-hover:var(--blue-100)]',\n    '[--button-soft-foreground:var(--blue-500)]',\n    '[--button-ghost-hover:var(--blue-50)]',\n    '[--button-ghost-foreground:var(--blue-500)]',\n    '[--button-link-foreground:var(--blue-500)]',\n    'dark:[--button-solid:var(--blue-500)]',\n    'dark:[--button-solid-hover:var(--blue-600)]',\n    'dark:[--button-outline-border:var(--blue-500)]',\n    'dark:[--button-outline-foreground:var(--blue-500)]',\n    'dark:[--button-soft:var(--blue-950)]',\n    'dark:[--button-soft-hover:var(--blue-900)]',\n    'dark:[--button-soft-foreground:var(--blue-500)]',\n    'dark:[--button-ghost-hover:var(--blue-950)]',\n    'dark:[--button-ghost-foreground:var(--blue-500)]',\n    'dark:[--button-link-foreground:var(--blue-500)]'\n  ],\n  indigo: [\n    '[--button-solid:var(--indigo-500)]',\n    '[--button-solid-hover:var(--indigo-600)]',\n    '[--button-solid-foreground:var(--zinc-50)]',\n    '[--button-outline-border:var(--indigo-500)]',\n    '[--button-outline-foreground:var(--indigo-500)]',\n    '[--button-soft:var(--indigo-50)]',\n    '[--button-soft-hover:var(--indigo-100)]',\n    '[--button-soft-foreground:var(--indigo-500)]',\n    '[--button-ghost-hover:var(--indigo-50)]',\n    '[--button-ghost-foreground:var(--indigo-500)]',\n    '[--button-link-foreground:var(--indigo-500)]',\n    'dark:[--button-solid:var(--indigo-500)]',\n    'dark:[--button-solid-hover:var(--indigo-600)]',\n    'dark:[--button-outline-border:var(--indigo-500)]',\n    'dark:[--button-outline-foreground:var(--indigo-500)]',\n    'dark:[--button-soft:var(--indigo-950)]',\n    'dark:[--button-soft-hover:var(--indigo-900)]',\n    'dark:[--button-soft-foreground:var(--indigo-500)]',\n    'dark:[--button-ghost-hover:var(--indigo-950)]',\n    'dark:[--button-ghost-foreground:var(--indigo-500)]',\n    'dark:[--button-link-foreground:var(--indigo-500)]'\n  ],\n  pink: [\n    '[--button-solid:var(--pink-500)]',\n    '[--button-solid-hover:var(--pink-600)]',\n    '[--button-solid-foreground:var(--zinc-50)]',\n    '[--button-outline-border:var(--pink-500)]',\n    '[--button-outline-foreground:var(--pink-500)]',\n    '[--button-soft:var(--pink-50)]',\n    '[--button-soft-hover:var(--pink-100)]',\n    '[--button-soft-foreground:var(--pink-500)]',\n    '[--button-ghost-hover:var(--pink-50)]',\n    '[--button-ghost-foreground:var(--pink-500)]',\n    '[--button-link-foreground:var(--pink-500)]',\n    'dark:[--button-solid:var(--pink-500)]',\n    'dark:[--button-solid-hover:var(--pink-600)]',\n    'dark:[--button-outline-border:var(--pink-500)]',\n    'dark:[--button-outline-foreground:var(--pink-500)]',\n    'dark:[--button-soft:var(--pink-950)]',\n    'dark:[--button-soft-hover:var(--pink-900)]',\n    'dark:[--button-soft-foreground:var(--pink-500)]',\n    'dark:[--button-ghost-hover:var(--pink-950)]',\n    'dark:[--button-ghost-foreground:var(--pink-500)]',\n    'dark:[--button-link-foreground:var(--pink-500)]'\n  ],\n  green: [\n    '[--button-solid:var(--green-500)]',\n    '[--button-solid-hover:var(--green-600)]',\n    '[--button-solid-foreground:var(--zinc-50)]',\n    '[--button-outline-border:var(--green-500)]',\n    '[--button-outline-foreground:var(--green-500)]',\n    '[--button-soft:var(--green-50)]',\n    '[--button-soft-hover:var(--green-100)]',\n    '[--button-soft-foreground:var(--green-500)]',\n    '[--button-ghost-hover:var(--green-50)]',\n    '[--button-ghost-foreground:var(--green-500)]',\n    '[--button-link-foreground:var(--green-500)]',\n    'dark:[--button-solid:var(--green-500)]',\n    'dark:[--button-solid-hover:var(--green-600)]',\n    'dark:[--button-outline-border:var(--green-500)]',\n    'dark:[--button-outline-foreground:var(--green-500)]',\n    'dark:[--button-soft:var(--green-950)]',\n    'dark:[--button-soft-hover:var(--green-900)]',\n    'dark:[--button-soft-foreground:var(--green-500)]',\n    'dark:[--button-ghost-hover:var(--green-950)]',\n    'dark:[--button-ghost-foreground:var(--green-500)]',\n    'dark:[--button-link-foreground:var(--green-500)]'\n  ]\n} as const satisfies Record<UIColor, readonly string[]>\n\nexport type ButtonColor = UIColor\n"],"mappings":"AAEA,MAAa,EAAsB,CACjC,QAAS,CACP,sCACA,4CACA,6CACA,+CACA,mDACA,oCACA,2CACA,gDACA,2CACA,iDACA,gDACA,2CACA,iDACA,oDACA,wDACA,0CACA,gDACA,qDACA,iDACA,sDACA,oDACF,EACA,MAAO,CACL,oCACA,0CACA,6CACA,6CACA,iDACA,kCACA,yCACA,8CACA,yCACA,+CACA,8CACA,yCACA,+CACA,kDACA,sDACA,wCACA,8CACA,mDACA,+CACA,oDACA,kDACF,EACA,KAAM,CACJ,mCACA,yCACA,6CACA,4CACA,gDACA,kCACA,wCACA,6CACA,yCACA,8CACA,6CACA,wCACA,8CACA,iDACA,qDACA,uCACA,6CACA,kDACA,8CACA,mDACA,iDACF,EACA,KAAM,CACJ,mCACA,yCACA,6CACA,4CACA,gDACA,kCACA,wCACA,6CACA,yCACA,8CACA,6CACA,wCACA,8CACA,iDACA,qDACA,uCACA,6CACA,kDACA,8CACA,mDACA,iDACF,EACA,IAAK,CACH,kCACA,wCACA,6CACA,2CACA,+CACA,gCACA,uCACA,4CACA,uCACA,6CACA,4CACA,uCACA,6CACA,gDACA,oDACA,sCACA,4CACA,iDACA,6CACA,kDACA,gDACF,EACA,OAAQ,CACN,qCACA,2CACA,6CACA,8CACA,kDACA,mCACA,0CACA,+CACA,0CACA,gDACA,+CACA,0CACA,gDACA,mDACA,uDACA,yCACA,+CACA,oDACA,gDACA,qDACA,mDACF,EACA,KAAM,CACJ,mCACA,yCACA,6CACA,4CACA,gDACA,iCACA,wCACA,6CACA,wCACA,8CACA,6CACA,wCACA,8CACA,iDACA,qDACA,uCACA,6CACA,kDACA,8CACA,mDACA,iDACF,EACA,OAAQ,CACN,qCACA,2CACA,6CACA,8CACA,kDACA,mCACA,0CACA,+CACA,0CACA,gDACA,+CACA,0CACA,gDACA,mDACA,uDACA,yCACA,+CACA,oDACA,gDACA,qDACA,mDACF,EACA,KAAM,CACJ,mCACA,yCACA,6CACA,4CACA,gDACA,iCACA,wCACA,6CACA,wCACA,8CACA,6CACA,wCACA,8CACA,iDACA,qDACA,uCACA,6CACA,kDACA,8CACA,mDACA,iDACF,EACA,MAAO,CACL,oCACA,0CACA,6CACA,6CACA,iDACA,kCACA,yCACA,8CACA,yCACA,+CACA,8CACA,yCACA,+CACA,kDACA,sDACA,wCACA,8CACA,mDACA,+CACA,oDACA,kDACF,CACF"}
+{"version":3,"file":"button.js","names":[],"sources":["../../src/lib/button.ts"],"sourcesContent":["import type { UIColor } from './color'\n\nexport const buttonColorVariants = {\n  primary: [\n    '[--button-solid:var(--primary)]',\n    '[--button-solid-hover:var(--primary-600)]',\n    '[--button-solid-foreground:var(--zinc-50)]',\n    '[--button-outline-border:var(--primary)]',\n    '[--button-outline-foreground:var(--primary)]',\n    '[--button-soft:var(--primary-50)]',\n    '[--button-soft-hover:var(--primary-100)]',\n    '[--button-soft-foreground:var(--primary)]',\n    '[--button-ghost-hover:var(--primary-50)]',\n    '[--button-ghost-foreground:var(--primary)]',\n    '[--button-link-foreground:var(--primary)]',\n    'dark:[--button-solid:var(--primary)]',\n    'dark:[--button-solid-hover:var(--primary-600)]',\n    'dark:[--button-outline-border:var(--primary)]',\n    'dark:[--button-outline-foreground:var(--primary)]',\n    'dark:[--button-soft:var(--primary-950)]',\n    'dark:[--button-soft-hover:var(--primary-900)]',\n    'dark:[--button-soft-foreground:var(--primary)]',\n    'dark:[--button-ghost-hover:var(--primary-950)]',\n    'dark:[--button-ghost-foreground:var(--primary)]',\n    'dark:[--button-link-foreground:var(--primary)]'\n  ],\n  brand: [\n    '[--button-solid:var(--brand)]',\n    '[--button-solid-hover:var(--brand-600)]',\n    '[--button-solid-foreground:var(--zinc-50)]',\n    '[--button-outline-border:var(--brand)]',\n    '[--button-outline-foreground:var(--brand)]',\n    '[--button-soft:var(--brand-50)]',\n    '[--button-soft-hover:var(--brand-100)]',\n    '[--button-soft-foreground:var(--brand)]',\n    '[--button-ghost-hover:var(--brand-50)]',\n    '[--button-ghost-foreground:var(--brand)]',\n    '[--button-link-foreground:var(--brand)]',\n    'dark:[--button-solid:var(--brand)]',\n    'dark:[--button-solid-hover:var(--brand-600)]',\n    'dark:[--button-outline-border:var(--brand)]',\n    'dark:[--button-outline-foreground:var(--brand)]',\n    'dark:[--button-soft:var(--brand-950)]',\n    'dark:[--button-soft-hover:var(--brand-900)]',\n    'dark:[--button-soft-foreground:var(--brand)]',\n    'dark:[--button-ghost-hover:var(--brand-950)]',\n    'dark:[--button-ghost-foreground:var(--brand)]',\n    'dark:[--button-link-foreground:var(--brand)]'\n  ],\n  gray: [\n    '[--button-solid:var(--gray)]',\n    '[--button-solid-hover:var(--gray-600)]',\n    '[--button-solid-foreground:var(--zinc-50)]',\n    '[--button-outline-border:var(--gray)]',\n    '[--button-outline-foreground:var(--gray)]',\n    '[--button-soft:var(--gray-100)]',\n    '[--button-soft-hover:var(--gray-200)]',\n    '[--button-soft-foreground:var(--gray)]',\n    '[--button-ghost-hover:var(--gray-100)]',\n    '[--button-ghost-foreground:var(--gray)]',\n    '[--button-link-foreground:var(--gray)]',\n    'dark:[--button-solid:var(--gray)]',\n    'dark:[--button-solid-hover:var(--gray-600)]',\n    'dark:[--button-outline-border:var(--gray)]',\n    'dark:[--button-outline-foreground:var(--gray)]',\n    'dark:[--button-soft:var(--gray-950)]',\n    'dark:[--button-soft-hover:var(--gray-900)]',\n    'dark:[--button-soft-foreground:var(--gray)]',\n    'dark:[--button-ghost-hover:var(--gray-950)]',\n    'dark:[--button-ghost-foreground:var(--gray)]',\n    'dark:[--button-link-foreground:var(--gray)]'\n  ],\n  zinc: [\n    '[--button-solid:var(--zinc)]',\n    '[--button-solid-hover:var(--zinc-600)]',\n    '[--button-solid-foreground:var(--zinc-50)]',\n    '[--button-outline-border:var(--zinc)]',\n    '[--button-outline-foreground:var(--zinc)]',\n    '[--button-soft:var(--zinc-100)]',\n    '[--button-soft-hover:var(--zinc-200)]',\n    '[--button-soft-foreground:var(--zinc)]',\n    '[--button-ghost-hover:var(--zinc-100)]',\n    '[--button-ghost-foreground:var(--zinc)]',\n    '[--button-link-foreground:var(--zinc)]',\n    'dark:[--button-solid:var(--zinc)]',\n    'dark:[--button-solid-hover:var(--zinc-600)]',\n    'dark:[--button-outline-border:var(--zinc)]',\n    'dark:[--button-outline-foreground:var(--zinc)]',\n    'dark:[--button-soft:var(--zinc-950)]',\n    'dark:[--button-soft-hover:var(--zinc-900)]',\n    'dark:[--button-soft-foreground:var(--zinc)]',\n    'dark:[--button-ghost-hover:var(--zinc-950)]',\n    'dark:[--button-ghost-foreground:var(--zinc)]',\n    'dark:[--button-link-foreground:var(--zinc)]'\n  ],\n  red: [\n    '[--button-solid:var(--red)]',\n    '[--button-solid-hover:var(--red-600)]',\n    '[--button-solid-foreground:var(--zinc-50)]',\n    '[--button-outline-border:var(--red)]',\n    '[--button-outline-foreground:var(--red)]',\n    '[--button-soft:var(--red-50)]',\n    '[--button-soft-hover:var(--red-100)]',\n    '[--button-soft-foreground:var(--red)]',\n    '[--button-ghost-hover:var(--red-50)]',\n    '[--button-ghost-foreground:var(--red)]',\n    '[--button-link-foreground:var(--red)]',\n    'dark:[--button-solid:var(--red)]',\n    'dark:[--button-solid-hover:var(--red-600)]',\n    'dark:[--button-outline-border:var(--red)]',\n    'dark:[--button-outline-foreground:var(--red)]',\n    'dark:[--button-soft:var(--red-950)]',\n    'dark:[--button-soft-hover:var(--red-900)]',\n    'dark:[--button-soft-foreground:var(--red)]',\n    'dark:[--button-ghost-hover:var(--red-950)]',\n    'dark:[--button-ghost-foreground:var(--red)]',\n    'dark:[--button-link-foreground:var(--red)]'\n  ],\n  yellow: [\n    '[--button-solid:var(--yellow)]',\n    '[--button-solid-hover:var(--yellow-600)]',\n    '[--button-solid-foreground:var(--zinc-50)]',\n    '[--button-outline-border:var(--yellow)]',\n    '[--button-outline-foreground:var(--yellow)]',\n    '[--button-soft:var(--yellow-50)]',\n    '[--button-soft-hover:var(--yellow-100)]',\n    '[--button-soft-foreground:var(--yellow)]',\n    '[--button-ghost-hover:var(--yellow-50)]',\n    '[--button-ghost-foreground:var(--yellow)]',\n    '[--button-link-foreground:var(--yellow)]',\n    'dark:[--button-solid:var(--yellow)]',\n    'dark:[--button-solid-hover:var(--yellow-600)]',\n    'dark:[--button-outline-border:var(--yellow)]',\n    'dark:[--button-outline-foreground:var(--yellow)]',\n    'dark:[--button-soft:var(--yellow-950)]',\n    'dark:[--button-soft-hover:var(--yellow-900)]',\n    'dark:[--button-soft-foreground:var(--yellow)]',\n    'dark:[--button-ghost-hover:var(--yellow-950)]',\n    'dark:[--button-ghost-foreground:var(--yellow)]',\n    'dark:[--button-link-foreground:var(--yellow)]'\n  ],\n  blue: [\n    '[--button-solid:var(--blue)]',\n    '[--button-solid-hover:var(--blue-600)]',\n    '[--button-solid-foreground:var(--zinc-50)]',\n    '[--button-outline-border:var(--blue)]',\n    '[--button-outline-foreground:var(--blue)]',\n    '[--button-soft:var(--blue-50)]',\n    '[--button-soft-hover:var(--blue-100)]',\n    '[--button-soft-foreground:var(--blue)]',\n    '[--button-ghost-hover:var(--blue-50)]',\n    '[--button-ghost-foreground:var(--blue)]',\n    '[--button-link-foreground:var(--blue)]',\n    'dark:[--button-solid:var(--blue)]',\n    'dark:[--button-solid-hover:var(--blue-600)]',\n    'dark:[--button-outline-border:var(--blue)]',\n    'dark:[--button-outline-foreground:var(--blue)]',\n    'dark:[--button-soft:var(--blue-950)]',\n    'dark:[--button-soft-hover:var(--blue-900)]',\n    'dark:[--button-soft-foreground:var(--blue)]',\n    'dark:[--button-ghost-hover:var(--blue-950)]',\n    'dark:[--button-ghost-foreground:var(--blue)]',\n    'dark:[--button-link-foreground:var(--blue)]'\n  ],\n  indigo: [\n    '[--button-solid:var(--indigo)]',\n    '[--button-solid-hover:var(--indigo-600)]',\n    '[--button-solid-foreground:var(--zinc-50)]',\n    '[--button-outline-border:var(--indigo)]',\n    '[--button-outline-foreground:var(--indigo)]',\n    '[--button-soft:var(--indigo-50)]',\n    '[--button-soft-hover:var(--indigo-100)]',\n    '[--button-soft-foreground:var(--indigo)]',\n    '[--button-ghost-hover:var(--indigo-50)]',\n    '[--button-ghost-foreground:var(--indigo)]',\n    '[--button-link-foreground:var(--indigo)]',\n    'dark:[--button-solid:var(--indigo)]',\n    'dark:[--button-solid-hover:var(--indigo-600)]',\n    'dark:[--button-outline-border:var(--indigo)]',\n    'dark:[--button-outline-foreground:var(--indigo)]',\n    'dark:[--button-soft:var(--indigo-950)]',\n    'dark:[--button-soft-hover:var(--indigo-900)]',\n    'dark:[--button-soft-foreground:var(--indigo)]',\n    'dark:[--button-ghost-hover:var(--indigo-950)]',\n    'dark:[--button-ghost-foreground:var(--indigo)]',\n    'dark:[--button-link-foreground:var(--indigo)]'\n  ],\n  pink: [\n    '[--button-solid:var(--pink)]',\n    '[--button-solid-hover:var(--pink-600)]',\n    '[--button-solid-foreground:var(--zinc-50)]',\n    '[--button-outline-border:var(--pink)]',\n    '[--button-outline-foreground:var(--pink)]',\n    '[--button-soft:var(--pink-50)]',\n    '[--button-soft-hover:var(--pink-100)]',\n    '[--button-soft-foreground:var(--pink)]',\n    '[--button-ghost-hover:var(--pink-50)]',\n    '[--button-ghost-foreground:var(--pink)]',\n    '[--button-link-foreground:var(--pink)]',\n    'dark:[--button-solid:var(--pink)]',\n    'dark:[--button-solid-hover:var(--pink-600)]',\n    'dark:[--button-outline-border:var(--pink)]',\n    'dark:[--button-outline-foreground:var(--pink)]',\n    'dark:[--button-soft:var(--pink-950)]',\n    'dark:[--button-soft-hover:var(--pink-900)]',\n    'dark:[--button-soft-foreground:var(--pink)]',\n    'dark:[--button-ghost-hover:var(--pink-950)]',\n    'dark:[--button-ghost-foreground:var(--pink)]',\n    'dark:[--button-link-foreground:var(--pink)]'\n  ],\n  green: [\n    '[--button-solid:var(--green)]',\n    '[--button-solid-hover:var(--green-600)]',\n    '[--button-solid-foreground:var(--zinc-50)]',\n    '[--button-outline-border:var(--green)]',\n    '[--button-outline-foreground:var(--green)]',\n    '[--button-soft:var(--green-50)]',\n    '[--button-soft-hover:var(--green-100)]',\n    '[--button-soft-foreground:var(--green)]',\n    '[--button-ghost-hover:var(--green-50)]',\n    '[--button-ghost-foreground:var(--green)]',\n    '[--button-link-foreground:var(--green)]',\n    'dark:[--button-solid:var(--green)]',\n    'dark:[--button-solid-hover:var(--green-600)]',\n    'dark:[--button-outline-border:var(--green)]',\n    'dark:[--button-outline-foreground:var(--green)]',\n    'dark:[--button-soft:var(--green-950)]',\n    'dark:[--button-soft-hover:var(--green-900)]',\n    'dark:[--button-soft-foreground:var(--green)]',\n    'dark:[--button-ghost-hover:var(--green-950)]',\n    'dark:[--button-ghost-foreground:var(--green)]',\n    'dark:[--button-link-foreground:var(--green)]'\n  ]\n} as const satisfies Record<UIColor, readonly string[]>\n\nexport type ButtonColor = UIColor\n"],"mappings":"AAEA,MAAa,EAAsB,CACjC,QAAS,CACP,kCACA,4CACA,6CACA,2CACA,+CACA,oCACA,2CACA,4CACA,2CACA,6CACA,4CACA,uCACA,iDACA,gDACA,oDACA,0CACA,gDACA,iDACA,iDACA,kDACA,gDACF,EACA,MAAO,CACL,gCACA,0CACA,6CACA,yCACA,6CACA,kCACA,yCACA,0CACA,yCACA,2CACA,0CACA,qCACA,+CACA,8CACA,kDACA,wCACA,8CACA,+CACA,+CACA,gDACA,8CACF,EACA,KAAM,CACJ,+BACA,yCACA,6CACA,wCACA,4CACA,kCACA,wCACA,yCACA,yCACA,0CACA,yCACA,oCACA,8CACA,6CACA,iDACA,uCACA,6CACA,8CACA,8CACA,+CACA,6CACF,EACA,KAAM,CACJ,+BACA,yCACA,6CACA,wCACA,4CACA,kCACA,wCACA,yCACA,yCACA,0CACA,yCACA,oCACA,8CACA,6CACA,iDACA,uCACA,6CACA,8CACA,8CACA,+CACA,6CACF,EACA,IAAK,CACH,8BACA,wCACA,6CACA,uCACA,2CACA,gCACA,uCACA,wCACA,uCACA,yCACA,wCACA,mCACA,6CACA,4CACA,gDACA,sCACA,4CACA,6CACA,6CACA,8CACA,4CACF,EACA,OAAQ,CACN,iCACA,2CACA,6CACA,0CACA,8CACA,mCACA,0CACA,2CACA,0CACA,4CACA,2CACA,sCACA,gDACA,+CACA,mDACA,yCACA,+CACA,gDACA,gDACA,iDACA,+CACF,EACA,KAAM,CACJ,+BACA,yCACA,6CACA,wCACA,4CACA,iCACA,wCACA,yCACA,wCACA,0CACA,yCACA,oCACA,8CACA,6CACA,iDACA,uCACA,6CACA,8CACA,8CACA,+CACA,6CACF,EACA,OAAQ,CACN,iCACA,2CACA,6CACA,0CACA,8CACA,mCACA,0CACA,2CACA,0CACA,4CACA,2CACA,sCACA,gDACA,+CACA,mDACA,yCACA,+CACA,gDACA,gDACA,iDACA,+CACF,EACA,KAAM,CACJ,+BACA,yCACA,6CACA,wCACA,4CACA,iCACA,wCACA,yCACA,wCACA,0CACA,yCACA,oCACA,8CACA,6CACA,iDACA,uCACA,6CACA,8CACA,8CACA,+CACA,6CACF,EACA,MAAO,CACL,gCACA,0CACA,6CACA,yCACA,6CACA,kCACA,yCACA,0CACA,yCACA,2CACA,0CACA,qCACA,+CACA,8CACA,kDACA,wCACA,8CACA,+CACA,+CACA,gDACA,8CACF,CACF"}

package/dist/lib/color.d.ts

@@ -4,16 +4,16 @@ import { n as __name } from "../chunk-CHh1Zzun.js";
 declare const uiColors: readonly ["primary", "brand", "gray", "zinc", "red", "yellow", "blue", "indigo", "pink", "green"];
 type UIColor = (typeof uiColors)[number];
 declare const selectionControlColorVariants: {
-  readonly primary: readonly ["[--selection-control:var(--primary-500)]", "[--selection-control-foreground:var(--zinc-50)]"];
-  readonly brand: readonly ["[--selection-control:var(--brand-500)]", "[--selection-control-foreground:var(--zinc-50)]"];
-  readonly gray: readonly ["[--selection-control:var(--gray-500)]", "[--selection-control-foreground:var(--zinc-50)]"];
-  readonly zinc: readonly ["[--selection-control:var(--zinc-500)]", "[--selection-control-foreground:var(--zinc-50)]"];
-  readonly red: readonly ["[--selection-control:var(--red-500)]", "[--selection-control-foreground:var(--zinc-50)]"];
-  readonly yellow: readonly ["[--selection-control:var(--yellow-500)]", "[--selection-control-foreground:var(--zinc-50)]"];
-  readonly blue: readonly ["[--selection-control:var(--blue-500)]", "[--selection-control-foreground:var(--zinc-50)]"];
-  readonly indigo: readonly ["[--selection-control:var(--indigo-500)]", "[--selection-control-foreground:var(--zinc-50)]"];
-  readonly pink: readonly ["[--selection-control:var(--pink-500)]", "[--selection-control-foreground:var(--zinc-50)]"];
-  readonly green: readonly ["[--selection-control:var(--green-500)]", "[--selection-control-foreground:var(--zinc-50)]"];
+  readonly primary: readonly ["[--selection-control:var(--primary)]", "[--selection-control-foreground:var(--zinc-50)]"];
+  readonly brand: readonly ["[--selection-control:var(--brand)]", "[--selection-control-foreground:var(--zinc-50)]"];
+  readonly gray: readonly ["[--selection-control:var(--gray)]", "[--selection-control-foreground:var(--zinc-50)]"];
+  readonly zinc: readonly ["[--selection-control:var(--zinc)]", "[--selection-control-foreground:var(--zinc-50)]"];
+  readonly red: readonly ["[--selection-control:var(--red)]", "[--selection-control-foreground:var(--zinc-50)]"];
+  readonly yellow: readonly ["[--selection-control:var(--yellow)]", "[--selection-control-foreground:var(--zinc-50)]"];
+  readonly blue: readonly ["[--selection-control:var(--blue)]", "[--selection-control-foreground:var(--zinc-50)]"];
+  readonly indigo: readonly ["[--selection-control:var(--indigo)]", "[--selection-control-foreground:var(--zinc-50)]"];
+  readonly pink: readonly ["[--selection-control:var(--pink)]", "[--selection-control-foreground:var(--zinc-50)]"];
+  readonly green: readonly ["[--selection-control:var(--green)]", "[--selection-control-foreground:var(--zinc-50)]"];
 };
 //#endregion
 export { UIColor, selectionControlColorVariants, uiColors };

package/dist/lib/color.js

@@ -1,2 +1,2 @@
-const e=[`primary`,`brand`,`gray`,`zinc`,`red`,`yellow`,`blue`,`indigo`,`pink`,`green`],t={primary:[`[--selection-control:var(--primary-500)]`,`[--selection-control-foreground:var(--zinc-50)]`],brand:[`[--selection-control:var(--brand-500)]`,`[--selection-control-foreground:var(--zinc-50)]`],gray:[`[--selection-control:var(--gray-500)]`,`[--selection-control-foreground:var(--zinc-50)]`],zinc:[`[--selection-control:var(--zinc-500)]`,`[--selection-control-foreground:var(--zinc-50)]`],red:[`[--selection-control:var(--red-500)]`,`[--selection-control-foreground:var(--zinc-50)]`],yellow:[`[--selection-control:var(--yellow-500)]`,`[--selection-control-foreground:var(--zinc-50)]`],blue:[`[--selection-control:var(--blue-500)]`,`[--selection-control-foreground:var(--zinc-50)]`],indigo:[`[--selection-control:var(--indigo-500)]`,`[--selection-control-foreground:var(--zinc-50)]`],pink:[`[--selection-control:var(--pink-500)]`,`[--selection-control-foreground:var(--zinc-50)]`],green:[`[--selection-control:var(--green-500)]`,`[--selection-control-foreground:var(--zinc-50)]`]};export{t as selectionControlColorVariants,e as uiColors};
+const e=[`primary`,`brand`,`gray`,`zinc`,`red`,`yellow`,`blue`,`indigo`,`pink`,`green`],t={primary:[`[--selection-control:var(--primary)]`,`[--selection-control-foreground:var(--zinc-50)]`],brand:[`[--selection-control:var(--brand)]`,`[--selection-control-foreground:var(--zinc-50)]`],gray:[`[--selection-control:var(--gray)]`,`[--selection-control-foreground:var(--zinc-50)]`],zinc:[`[--selection-control:var(--zinc)]`,`[--selection-control-foreground:var(--zinc-50)]`],red:[`[--selection-control:var(--red)]`,`[--selection-control-foreground:var(--zinc-50)]`],yellow:[`[--selection-control:var(--yellow)]`,`[--selection-control-foreground:var(--zinc-50)]`],blue:[`[--selection-control:var(--blue)]`,`[--selection-control-foreground:var(--zinc-50)]`],indigo:[`[--selection-control:var(--indigo)]`,`[--selection-control-foreground:var(--zinc-50)]`],pink:[`[--selection-control:var(--pink)]`,`[--selection-control-foreground:var(--zinc-50)]`],green:[`[--selection-control:var(--green)]`,`[--selection-control-foreground:var(--zinc-50)]`]};export{t as selectionControlColorVariants,e as uiColors};
 //# sourceMappingURL=color.js.map

package/dist/lib/color.js.map

@@ -1 +1 @@
-{"version":3,"file":"color.js","names":[],"sources":["../../src/lib/color.ts"],"sourcesContent":["export const uiColors = [\n  'primary',\n  'brand',\n  'gray',\n  'zinc',\n  'red',\n  'yellow',\n  'blue',\n  'indigo',\n  'pink',\n  'green'\n] as const\n\nexport type UIColor = (typeof uiColors)[number]\n\nexport const selectionControlColorVariants = {\n  primary: ['[--selection-control:var(--primary-500)]', '[--selection-control-foreground:var(--zinc-50)]'],\n  brand: ['[--selection-control:var(--brand-500)]', '[--selection-control-foreground:var(--zinc-50)]'],\n  gray: ['[--selection-control:var(--gray-500)]', '[--selection-control-foreground:var(--zinc-50)]'],\n  zinc: ['[--selection-control:var(--zinc-500)]', '[--selection-control-foreground:var(--zinc-50)]'],\n  red: ['[--selection-control:var(--red-500)]', '[--selection-control-foreground:var(--zinc-50)]'],\n  yellow: ['[--selection-control:var(--yellow-500)]', '[--selection-control-foreground:var(--zinc-50)]'],\n  blue: ['[--selection-control:var(--blue-500)]', '[--selection-control-foreground:var(--zinc-50)]'],\n  indigo: ['[--selection-control:var(--indigo-500)]', '[--selection-control-foreground:var(--zinc-50)]'],\n  pink: ['[--selection-control:var(--pink-500)]', '[--selection-control-foreground:var(--zinc-50)]'],\n  green: ['[--selection-control:var(--green-500)]', '[--selection-control-foreground:var(--zinc-50)]']\n} as const satisfies Record<UIColor, readonly string[]>\n"],"mappings":"AAAA,MAAa,EAAW,CACtB,UACA,QACA,OACA,OACA,MACA,SACA,OACA,SACA,OACA,OACF,EAIa,EAAgC,CAC3C,QAAS,CAAC,2CAA4C,iDAAiD,EACvG,MAAO,CAAC,yCAA0C,iDAAiD,EACnG,KAAM,CAAC,wCAAyC,iDAAiD,EACjG,KAAM,CAAC,wCAAyC,iDAAiD,EACjG,IAAK,CAAC,uCAAwC,iDAAiD,EAC/F,OAAQ,CAAC,0CAA2C,iDAAiD,EACrG,KAAM,CAAC,wCAAyC,iDAAiD,EACjG,OAAQ,CAAC,0CAA2C,iDAAiD,EACrG,KAAM,CAAC,wCAAyC,iDAAiD,EACjG,MAAO,CAAC,yCAA0C,iDAAiD,CACrG"}
+{"version":3,"file":"color.js","names":[],"sources":["../../src/lib/color.ts"],"sourcesContent":["export const uiColors = [\n  'primary',\n  'brand',\n  'gray',\n  'zinc',\n  'red',\n  'yellow',\n  'blue',\n  'indigo',\n  'pink',\n  'green'\n] as const\n\nexport type UIColor = (typeof uiColors)[number]\n\nexport const selectionControlColorVariants = {\n  primary: ['[--selection-control:var(--primary)]', '[--selection-control-foreground:var(--zinc-50)]'],\n  brand: ['[--selection-control:var(--brand)]', '[--selection-control-foreground:var(--zinc-50)]'],\n  gray: ['[--selection-control:var(--gray)]', '[--selection-control-foreground:var(--zinc-50)]'],\n  zinc: ['[--selection-control:var(--zinc)]', '[--selection-control-foreground:var(--zinc-50)]'],\n  red: ['[--selection-control:var(--red)]', '[--selection-control-foreground:var(--zinc-50)]'],\n  yellow: ['[--selection-control:var(--yellow)]', '[--selection-control-foreground:var(--zinc-50)]'],\n  blue: ['[--selection-control:var(--blue)]', '[--selection-control-foreground:var(--zinc-50)]'],\n  indigo: ['[--selection-control:var(--indigo)]', '[--selection-control-foreground:var(--zinc-50)]'],\n  pink: ['[--selection-control:var(--pink)]', '[--selection-control-foreground:var(--zinc-50)]'],\n  green: ['[--selection-control:var(--green)]', '[--selection-control-foreground:var(--zinc-50)]']\n} as const satisfies Record<UIColor, readonly string[]>\n"],"mappings":"AAAA,MAAa,EAAW,CACtB,UACA,QACA,OACA,OACA,MACA,SACA,OACA,SACA,OACA,OACF,EAIa,EAAgC,CAC3C,QAAS,CAAC,uCAAwC,iDAAiD,EACnG,MAAO,CAAC,qCAAsC,iDAAiD,EAC/F,KAAM,CAAC,oCAAqC,iDAAiD,EAC7F,KAAM,CAAC,oCAAqC,iDAAiD,EAC7F,IAAK,CAAC,mCAAoC,iDAAiD,EAC3F,OAAQ,CAAC,sCAAuC,iDAAiD,EACjG,KAAM,CAAC,oCAAqC,iDAAiD,EAC7F,OAAQ,CAAC,sCAAuC,iDAAiD,EACjG,KAAM,CAAC,oCAAqC,iDAAiD,EAC7F,MAAO,CAAC,qCAAsC,iDAAiD,CACjG"}

package/dist/skills/uselets-ui/references/component-catalog.md

@@ -105,7 +105,7 @@ Unless noted otherwise, each module also exports its public `*Props` types from
   - Notes: confirmation dialog composition
 - `badge`
   - Exports: `Badge`, `badgeVariants`
-  - Notes: pill-shaped tag with `size: 'xs' | 'sm' | 'md' | 'lg' | 'xl'` (default `md`), `solid`/`outline`/`subtle`/`ghost`/`link` variants, `color: UIColor` (`primary` default), and `asChild`
+  - Notes: pill-shaped tag with `size: 'xs' | 'sm' | 'md' | 'lg' | 'xl'` (default `md`), `solid`/`secondary`/`outline`/`subtle` variants, `color: UIColor` (`primary` default), and `asChild`
 - `button`
   - Exports: `Button`, `buttonVariants`
   - Notes: action button with `solid`, `secondary`, `outline`, `subtle`, `ghost`, and `link` variants, `color: UIColor` (`primary` default), sizes from `xs` through `xl` plus icon sizes through `icon-xl`, and `loading`
@@ -221,6 +221,7 @@ Unless noted otherwise, each module also exports its public `*Props` types from
   - Exports: `Avatar`, `AvatarBadge`, `AvatarFallback`, `AvatarGroup`, `AvatarGroupCount`, `AvatarImage`
 - `card`
   - Exports: `Card`, `CardAction`, `CardContent`, `CardDescription`, `CardFooter`, `CardHeader`, `CardTitle`
+  - Notes: supports `size: 'sm' | 'md' | 'lg'` with default `md`
 - `carousel`
   - Exports: `Carousel`, `CarouselContent`, `CarouselItem`, `CarouselPrevious`, `CarouselNext`, `CarouselIndicators`, `useCarousel`
 - `center`

package/dist/skills/uselets-ui/references/package-guide.md

@@ -266,10 +266,16 @@ The package stylesheet exposes these palette families:
 
 The same palette family names are exported as `uiColors` and `UIColor`. `Button`, `Toggle`, `Checkbox`, `RadioGroupItem`, and `Switch` use `UIColor` for color props. `ButtonColor` remains available as a compatibility alias, but new public APIs should use `UIColor`.
 
-Each palette family is exposed as:
+Each palette family is exposed in four layers:
 
 - CSS variables such as `--primary-500`, `--brand-500`, and `--zinc-900`
+- Semantic CSS aliases such as `--green`, `--red`, and `--gray`, mapped to `500` in light mode and `400` in dark mode
 - Tailwind v4 utilities such as `bg-primary-500`, `text-zinc-900`, `border-red-300`
+- Tailwind v4 semantic utilities such as `bg-green`, `text-red`, and `border-gray`
+
+Color-aware components use semantic family aliases for their primary color. For example, `color="green"` resolves
+to `--green-500` in light mode and `--green-400` in dark mode, while hover and subtle surfaces keep explicit
+palette steps.
 
 Primary semantic tokens:
 

package/dist/styles/gomax.css

@@ -138,6 +138,14 @@
   --primary-foreground: oklch(1 0 0);
   --brand: var(--brand-500);
   --brand-foreground: oklch(1 0 0);
+  --gray: var(--gray-500);
+  --zinc: var(--zinc-500);
+  --red: var(--red-500);
+  --yellow: var(--yellow-500);
+  --blue: var(--blue-500);
+  --indigo: var(--indigo-500);
+  --pink: var(--pink-500);
+  --green: var(--green-500);
   --secondary: var(--gray-100);
   --secondary-foreground: var(--gray-900);
   --muted: var(--gray-100);
@@ -175,6 +183,14 @@
   --primary-foreground: oklch(1 0 0);
   --brand: var(--brand-400);
   --brand-foreground: oklch(1 0 0);
+  --gray: var(--gray-400);
+  --zinc: var(--zinc-400);
+  --red: var(--red-400);
+  --yellow: var(--yellow-400);
+  --blue: var(--blue-400);
+  --indigo: var(--indigo-400);
+  --pink: var(--pink-400);
+  --green: var(--green-400);
   --secondary: var(--zinc-800);
   --secondary-foreground: var(--zinc-50);
   --muted: var(--zinc-800);

package/dist/styles/max.css

@@ -139,6 +139,14 @@
   --primary-foreground: var(--zinc-50);
   --brand: var(--brand-500);
   --brand-foreground: var(--zinc-50);
+  --gray: var(--gray-500);
+  --zinc: var(--zinc-500);
+  --red: var(--red-500);
+  --yellow: var(--yellow-500);
+  --blue: var(--blue-500);
+  --indigo: var(--indigo-500);
+  --pink: var(--pink-500);
+  --green: var(--green-500);
   --secondary: var(--zinc-100);
   --secondary-foreground: var(--zinc-900);
   --muted: var(--zinc-100);
@@ -176,6 +184,14 @@
   --primary-foreground: var(--zinc-50);
   --brand: var(--brand-400);
   --brand-foreground: var(--zinc-50);
+  --gray: var(--gray-400);
+  --zinc: var(--zinc-400);
+  --red: var(--red-400);
+  --yellow: var(--yellow-400);
+  --blue: var(--blue-400);
+  --indigo: var(--indigo-400);
+  --pink: var(--pink-400);
+  --green: var(--green-400);
   --secondary: var(--zinc-800);
   --secondary-foreground: var(--zinc-50);
   --muted: var(--zinc-800);

package/dist/styles/theme.css

@@ -154,6 +154,14 @@
   --color-green-900: var(--green-900);
   --color-green-950: var(--green-950);
 
+  --color-gray: var(--gray);
+  --color-zinc: var(--zinc);
+  --color-red: var(--red);
+  --color-yellow: var(--yellow);
+  --color-blue: var(--blue);
+  --color-indigo: var(--indigo);
+  --color-pink: var(--pink);
+  --color-green: var(--green);
   --color-sidebar-ring: var(--sidebar-ring);
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uselets/ui",
-  "version": "1.7.2",
+  "version": "1.8.0",
   "type": "module",
   "private": false,
   "description": "React component library for the LET'S design system.",

package/skills/uselets-ui/references/component-catalog.md

@@ -105,7 +105,7 @@ Unless noted otherwise, each module also exports its public `*Props` types from
   - Notes: confirmation dialog composition
 - `badge`
   - Exports: `Badge`, `badgeVariants`
-  - Notes: pill-shaped tag with `size: 'xs' | 'sm' | 'md' | 'lg' | 'xl'` (default `md`), `solid`/`outline`/`subtle`/`ghost`/`link` variants, `color: UIColor` (`primary` default), and `asChild`
+  - Notes: pill-shaped tag with `size: 'xs' | 'sm' | 'md' | 'lg' | 'xl'` (default `md`), `solid`/`secondary`/`outline`/`subtle` variants, `color: UIColor` (`primary` default), and `asChild`
 - `button`
   - Exports: `Button`, `buttonVariants`
   - Notes: action button with `solid`, `secondary`, `outline`, `subtle`, `ghost`, and `link` variants, `color: UIColor` (`primary` default), sizes from `xs` through `xl` plus icon sizes through `icon-xl`, and `loading`
@@ -221,6 +221,7 @@ Unless noted otherwise, each module also exports its public `*Props` types from
   - Exports: `Avatar`, `AvatarBadge`, `AvatarFallback`, `AvatarGroup`, `AvatarGroupCount`, `AvatarImage`
 - `card`
   - Exports: `Card`, `CardAction`, `CardContent`, `CardDescription`, `CardFooter`, `CardHeader`, `CardTitle`
+  - Notes: supports `size: 'sm' | 'md' | 'lg'` with default `md`
 - `carousel`
   - Exports: `Carousel`, `CarouselContent`, `CarouselItem`, `CarouselPrevious`, `CarouselNext`, `CarouselIndicators`, `useCarousel`
 - `center`

package/skills/uselets-ui/references/package-guide.md

@@ -266,10 +266,16 @@ The package stylesheet exposes these palette families:
 
 The same palette family names are exported as `uiColors` and `UIColor`. `Button`, `Toggle`, `Checkbox`, `RadioGroupItem`, and `Switch` use `UIColor` for color props. `ButtonColor` remains available as a compatibility alias, but new public APIs should use `UIColor`.
 
-Each palette family is exposed as:
+Each palette family is exposed in four layers:
 
 - CSS variables such as `--primary-500`, `--brand-500`, and `--zinc-900`
+- Semantic CSS aliases such as `--green`, `--red`, and `--gray`, mapped to `500` in light mode and `400` in dark mode
 - Tailwind v4 utilities such as `bg-primary-500`, `text-zinc-900`, `border-red-300`
+- Tailwind v4 semantic utilities such as `bg-green`, `text-red`, and `border-gray`
+
+Color-aware components use semantic family aliases for their primary color. For example, `color="green"` resolves
+to `--green-500` in light mode and `--green-400` in dark mode, while hover and subtle surfaces keep explicit
+palette steps.
 
 Primary semantic tokens: