@waveso/ui 0.7.1 → 0.7.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/badge.d.ts CHANGED
@@ -5,7 +5,7 @@ import * as _$class_variance_authority_types0 from "class-variance-authority/typ
5
5
 
6
6
  //#region src/badge.d.ts
7
7
  declare const badgeVariants: (props?: ({
8
- variant?: "default" | "outline" | "secondary" | "ghost" | "success" | "destructive" | "link" | "warning" | null | undefined;
8
+ variant?: "default" | "link" | "success" | "destructive" | "warning" | "secondary" | "outline" | "ghost" | null | undefined;
9
9
  } & _$class_variance_authority_types0.ClassProp) | undefined) => string;
10
10
  type BadgeProps = useRender.ComponentProps<"span"> & VariantProps<typeof badgeVariants>;
11
11
  declare function Badge({
package/dist/badge.js CHANGED
@@ -7,9 +7,9 @@ import { useRender } from "@base-ui/react/use-render";
7
7
  const badgeVariants = cva("h-5 gap-1 rounded-full border border-transparent px-2 py-0.5 text-xs font-medium motion-color has-data-[icon=inline-start]:pl-1.5 has-data-[icon=inline-end]:pr-1.5 [&>svg]:size-3! inline-flex items-center justify-center w-fit whitespace-nowrap shrink-0 [&>svg]:pointer-events-none focus-visible:border-focus focus-visible:ring-focus/50 focus-visible:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive overflow-hidden group/badge", {
8
8
  variants: { variant: {
9
9
  default: "bg-primary text-white [a]:hover:bg-primary/80",
10
- success: "bg-success/10 [a]:hover:bg-success/20 focus-visible:ring-success/20 dark:focus-visible:ring-success/40 text-success dark:bg-success/20",
11
- destructive: "bg-destructive/10 text-destructive [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20",
12
- warning: "bg-warning/10 text-warning [a]:hover:bg-warning/20 focus-visible:ring-warning/20 dark:focus-visible:ring-warning/40 dark:bg-warning/20",
10
+ success: "bg-success/10 [a]:hover:bg-success/20 focus-visible:ring-success/50 text-success dark:bg-success/20",
11
+ destructive: "bg-destructive/10 text-destructive [a]:hover:bg-destructive/20 focus-visible:ring-destructive/50 dark:bg-destructive/20",
12
+ warning: "bg-warning/10 text-warning [a]:hover:bg-warning/20 focus-visible:ring-warning/50 dark:bg-warning/20",
13
13
  secondary: "bg-secondary text-contrast [a]:hover:bg-secondary/80",
14
14
  outline: "border-line text-contrast [a]:hover:bg-secondary [a]:hover:text-muted",
15
15
  ghost: "hover:bg-secondary hover:text-muted dark:hover:bg-secondary/50",
package/dist/badge.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"badge.js","names":[],"sources":["../src/badge.tsx"],"sourcesContent":["\"use client\"\n\nimport { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"./lib/utils\"\n\nconst badgeVariants = cva(\n \"h-5 gap-1 rounded-full border border-transparent px-2 py-0.5 text-xs font-medium motion-color has-data-[icon=inline-start]:pl-1.5 has-data-[icon=inline-end]:pr-1.5 [&>svg]:size-3! inline-flex items-center justify-center w-fit whitespace-nowrap shrink-0 [&>svg]:pointer-events-none focus-visible:border-focus focus-visible:ring-focus/50 focus-visible:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive overflow-hidden group/badge\",\n {\n variants: {\n variant: {\n default:\n \"bg-primary text-white [a]:hover:bg-primary/80\",\n success:\n \"bg-success/10 [a]:hover:bg-success/20 focus-visible:ring-success/20 dark:focus-visible:ring-success/40 text-success dark:bg-success/20\",\n destructive:\n \"bg-destructive/10 text-destructive [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20\",\n warning:\n \"bg-warning/10 text-warning [a]:hover:bg-warning/20 focus-visible:ring-warning/20 dark:focus-visible:ring-warning/40 dark:bg-warning/20\",\n secondary:\n \"bg-secondary text-contrast [a]:hover:bg-secondary/80\",\n outline:\n \"border-line text-contrast [a]:hover:bg-secondary [a]:hover:text-muted\",\n ghost:\n \"hover:bg-secondary hover:text-muted dark:hover:bg-secondary/50\",\n link: \"text-primary underline-offset-4 hover:underline\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n }\n)\n\ntype BadgeProps = useRender.ComponentProps<\"span\"> & VariantProps<typeof badgeVariants>\n\nfunction Badge({\n className,\n variant = \"default\",\n render,\n ...props\n}: BadgeProps) {\n return useRender({\n defaultTagName: \"span\",\n props: mergeProps<\"span\">(\n {\n className: cn(badgeVariants({ className, variant })),\n },\n props\n ),\n render,\n state: {\n slot: \"badge\",\n variant,\n },\n })\n}\n\nexport { Badge, badgeVariants }\n"],"mappings":";;;;;;AAQA,MAAM,gBAAgB,IACpB,2eACA;CACE,UAAU,EACR,SAAS;EACP,SACE;EACF,SACE;EACF,aACE;EACF,SACE;EACF,WACE;EACF,SACE;EACF,OACE;EACF,MAAM;EACP,EACF;CACD,iBAAiB,EACf,SAAS,WACV;CACF,CACF;AAID,SAAS,MAAM,EACb,WACA,UAAU,WACV,QACA,GAAG,SACU;AACb,QAAO,UAAU;EACf,gBAAgB;EAChB,OAAO,WACL,EACE,WAAW,GAAG,cAAc;GAAE;GAAW;GAAS,CAAC,CAAC,EACrD,EACD,MACD;EACD;EACA,OAAO;GACL,MAAM;GACN;GACD;EACF,CAAC"}
1
+ {"version":3,"file":"badge.js","names":[],"sources":["../src/badge.tsx"],"sourcesContent":["\"use client\"\n\nimport { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"./lib/utils\"\n\nconst badgeVariants = cva(\n \"h-5 gap-1 rounded-full border border-transparent px-2 py-0.5 text-xs font-medium motion-color has-data-[icon=inline-start]:pl-1.5 has-data-[icon=inline-end]:pr-1.5 [&>svg]:size-3! inline-flex items-center justify-center w-fit whitespace-nowrap shrink-0 [&>svg]:pointer-events-none focus-visible:border-focus focus-visible:ring-focus/50 focus-visible:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive overflow-hidden group/badge\",\n {\n variants: {\n variant: {\n default:\n \"bg-primary text-white [a]:hover:bg-primary/80\",\n success:\n \"bg-success/10 [a]:hover:bg-success/20 focus-visible:ring-success/50 text-success dark:bg-success/20\",\n destructive:\n \"bg-destructive/10 text-destructive [a]:hover:bg-destructive/20 focus-visible:ring-destructive/50 dark:bg-destructive/20\",\n warning:\n \"bg-warning/10 text-warning [a]:hover:bg-warning/20 focus-visible:ring-warning/50 dark:bg-warning/20\",\n secondary:\n \"bg-secondary text-contrast [a]:hover:bg-secondary/80\",\n outline:\n \"border-line text-contrast [a]:hover:bg-secondary [a]:hover:text-muted\",\n ghost:\n \"hover:bg-secondary hover:text-muted dark:hover:bg-secondary/50\",\n link: \"text-primary underline-offset-4 hover:underline\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n }\n)\n\ntype BadgeProps = useRender.ComponentProps<\"span\"> & VariantProps<typeof badgeVariants>\n\nfunction Badge({\n className,\n variant = \"default\",\n render,\n ...props\n}: BadgeProps) {\n return useRender({\n defaultTagName: \"span\",\n props: mergeProps<\"span\">(\n {\n className: cn(badgeVariants({ className, variant })),\n },\n props\n ),\n render,\n state: {\n slot: \"badge\",\n variant,\n },\n })\n}\n\nexport { Badge, badgeVariants }\n"],"mappings":";;;;;;AAQA,MAAM,gBAAgB,IACpB,2eACA;CACE,UAAU,EACR,SAAS;EACP,SACE;EACF,SACE;EACF,aACE;EACF,SACE;EACF,WACE;EACF,SACE;EACF,OACE;EACF,MAAM;EACP,EACF;CACD,iBAAiB,EACf,SAAS,WACV;CACF,CACF;AAID,SAAS,MAAM,EACb,WACA,UAAU,WACV,QACA,GAAG,SACU;AACb,QAAO,UAAU;EACf,gBAAgB;EAChB,OAAO,WACL,EACE,WAAW,GAAG,cAAc;GAAE;GAAW;GAAS,CAAC,CAAC,EACrD,EACD,MACD;EACD;EACA,OAAO;GACL,MAAM;GACN;GACD;EACF,CAAC"}
package/dist/button.d.ts CHANGED
@@ -6,8 +6,8 @@ import * as _$class_variance_authority_types0 from "class-variance-authority/typ
6
6
 
7
7
  //#region src/button.d.ts
8
8
  declare const buttonVariants: (props?: ({
9
- variant?: "default" | "outline" | "secondary" | "ghost" | "success" | "destructive" | "link" | null | undefined;
10
- size?: "default" | "xs" | "sm" | "lg" | "xl" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
9
+ variant?: "default" | "link" | "success" | "destructive" | "secondary" | "outline" | "ghost" | null | undefined;
10
+ size?: "default" | "icon" | "xs" | "sm" | "lg" | "xl" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
11
11
  } & _$class_variance_authority_types0.ClassProp) | undefined) => string;
12
12
  type ButtonProps = React.ComponentProps<typeof Button$1> & VariantProps<typeof buttonVariants>;
13
13
  declare function Button({
@@ -60,7 +60,7 @@ function ContextMenuItem({ className, inset, variant = "default", ...props }) {
60
60
  "data-slot": "context-menu-item",
61
61
  "data-inset": inset,
62
62
  "data-variant": variant,
63
- className: cn("focus:bg-primary focus:text-white data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive focus:*:[svg]:text-white group/context-menu-item relative flex cursor-clickable items-center gap-1.5 rounded-sm px-1.5 py-1 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
63
+ className: cn("focus:bg-primary focus:text-white data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive focus:*:[svg]:text-white data-[variant=destructive]:focus:*:[svg]:text-destructive group/context-menu-item relative flex cursor-clickable items-center gap-1.5 rounded-sm px-1.5 py-1 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
64
64
  ...props
65
65
  });
66
66
  }
@@ -94,7 +94,7 @@ function ContextMenuCheckboxItem({ className, children, checked, inset, ...props
94
94
  return /* @__PURE__ */ jsxs(ContextMenu$1.CheckboxItem, {
95
95
  "data-slot": "context-menu-checkbox-item",
96
96
  "data-inset": inset,
97
- className: cn("focus:bg-primary focus:text-white relative flex cursor-clickable items-center gap-1.5 rounded-sm py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
97
+ className: cn("focus:bg-primary focus:text-white focus:*:[svg]:text-white relative flex cursor-clickable items-center gap-1.5 rounded-sm py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
98
98
  checked,
99
99
  ...props,
100
100
  children: [/* @__PURE__ */ jsx("span", {
@@ -114,7 +114,7 @@ function ContextMenuRadioItem({ className, children, inset, ...props }) {
114
114
  return /* @__PURE__ */ jsxs(ContextMenu$1.RadioItem, {
115
115
  "data-slot": "context-menu-radio-item",
116
116
  "data-inset": inset,
117
- className: cn("focus:bg-primary focus:text-white relative flex cursor-clickable items-center gap-1.5 rounded-sm py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
117
+ className: cn("focus:bg-primary focus:text-white focus:*:[svg]:text-white relative flex cursor-clickable items-center gap-1.5 rounded-sm py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
118
118
  ...props,
119
119
  children: [/* @__PURE__ */ jsx("span", {
120
120
  "data-slot": "context-menu-radio-item-indicator",
@@ -1 +1 @@
1
- {"version":3,"file":"context-menu.js","names":["ContextMenuPrimitive"],"sources":["../src/context-menu.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { ContextMenu as ContextMenuPrimitive } from \"@base-ui/react/context-menu\"\n\nimport { ChevronRightIcon, CheckIcon } from \"./lib/internal-icons\"\n\nimport { cn } from \"./lib/utils\"\nimport { resolveFinalFocus, type RestoreFocusOnClose } from \"./lib/focus\"\n\ntype ContextMenuProps = React.ComponentProps<typeof ContextMenuPrimitive.Root>\ntype ContextMenuPortalProps = React.ComponentProps<typeof ContextMenuPrimitive.Portal>\ntype ContextMenuTriggerProps = React.ComponentProps<typeof ContextMenuPrimitive.Trigger>\n\ntype ContextMenuContentProps = React.ComponentProps<typeof ContextMenuPrimitive.Popup> &\n Pick<\n React.ComponentProps<typeof ContextMenuPrimitive.Positioner>,\n \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n > & {\n /**\n * Focus-restoration policy when the menu closes. Defaults to Base\n * UI's behaviour (restore to the trigger). Use `\"keyboard\"` when\n * the trigger is hover/focus-within–revealed so a pointer close\n * doesn't keep it pinned visible. See {@link RestoreFocusOnClose}.\n */\n restoreFocusOnClose?: RestoreFocusOnClose\n }\n\ntype ContextMenuGroupProps = React.ComponentProps<typeof ContextMenuPrimitive.Group>\n\ntype ContextMenuLabelProps = React.ComponentProps<typeof ContextMenuPrimitive.GroupLabel> & {\n inset?: boolean\n}\n\ntype ContextMenuItemProps = React.ComponentProps<typeof ContextMenuPrimitive.Item> & {\n inset?: boolean\n variant?: \"default\" | \"destructive\"\n}\n\ntype ContextMenuSubProps = React.ComponentProps<typeof ContextMenuPrimitive.SubmenuRoot>\n\ntype ContextMenuSubTriggerProps = React.ComponentProps<typeof ContextMenuPrimitive.SubmenuTrigger> & {\n inset?: boolean\n}\n\ntype ContextMenuCheckboxItemProps = React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem> & {\n inset?: boolean\n}\n\ntype ContextMenuRadioGroupProps = React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>\n\ntype ContextMenuRadioItemProps = React.ComponentProps<typeof ContextMenuPrimitive.RadioItem> & {\n inset?: boolean\n}\n\ntype ContextMenuSeparatorProps = React.ComponentProps<typeof ContextMenuPrimitive.Separator>\n\ntype ContextMenuSubContentProps = React.ComponentProps<typeof ContextMenuContent>\ntype ContextMenuShortcutProps = React.ComponentProps<\"span\">\n\nfunction ContextMenu(props: ContextMenuProps) {\n return <ContextMenuPrimitive.Root data-slot=\"context-menu\" {...props} />\n}\n\nfunction ContextMenuPortal(props: ContextMenuPortalProps) {\n return <ContextMenuPrimitive.Portal data-slot=\"context-menu-portal\" {...props} />\n}\n\nfunction ContextMenuTrigger({ className, ...props }: ContextMenuTriggerProps) {\n return (\n <ContextMenuPrimitive.Trigger\n data-slot=\"context-menu-trigger\"\n className={cn(\"select-none\", className)}\n {...props}\n />\n )\n}\n\nfunction ContextMenuContent({\n className,\n align = \"start\",\n alignOffset = 4,\n side = \"right\",\n sideOffset = 0,\n restoreFocusOnClose,\n finalFocus,\n ...props\n}: ContextMenuContentProps) {\n return (\n <ContextMenuPrimitive.Portal>\n <ContextMenuPrimitive.Positioner\n data-slot=\"context-menu-positioner\"\n className=\"isolate z-50 outline-none\"\n align={align}\n alignOffset={alignOffset}\n side={side}\n sideOffset={sideOffset}\n >\n <ContextMenuPrimitive.Popup\n data-slot=\"context-menu-content\"\n className={cn(\n \"motion-pop-md ring-contrast/10 bg-elevated text-contrast z-50 max-h-(--available-height) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md p-1 shadow-md ring-1 outline-none\",\n className,\n )}\n finalFocus={resolveFinalFocus(restoreFocusOnClose, finalFocus)}\n {...props}\n />\n </ContextMenuPrimitive.Positioner>\n </ContextMenuPrimitive.Portal>\n )\n}\n\nfunction ContextMenuGroup(props: ContextMenuGroupProps) {\n return <ContextMenuPrimitive.Group data-slot=\"context-menu-group\" {...props} />\n}\n\nfunction ContextMenuLabel({ className, inset, ...props }: ContextMenuLabelProps) {\n return (\n <ContextMenuPrimitive.GroupLabel\n data-slot=\"context-menu-label\"\n data-inset={inset}\n className={cn(\n \"text-muted px-1.5 py-1 text-xs font-medium data-inset:pl-7\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction ContextMenuItem({\n className,\n inset,\n variant = \"default\",\n ...props\n}: ContextMenuItemProps) {\n return (\n <ContextMenuPrimitive.Item\n data-slot=\"context-menu-item\"\n data-inset={inset}\n data-variant={variant}\n className={cn(\n \"focus:bg-primary focus:text-white data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive focus:*:[svg]:text-white group/context-menu-item relative flex cursor-clickable items-center gap-1.5 rounded-sm px-1.5 py-1 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n className,\n )}\n {...props}\n />\n )\n}\n\nfunction ContextMenuSub(props: ContextMenuSubProps) {\n return <ContextMenuPrimitive.SubmenuRoot data-slot=\"context-menu-sub\" {...props} />\n}\n\nfunction ContextMenuSubTrigger({ className, inset, children, ...props }: ContextMenuSubTriggerProps) {\n return (\n <ContextMenuPrimitive.SubmenuTrigger\n data-slot=\"context-menu-sub-trigger\"\n data-inset={inset}\n className={cn(\n \"focus:bg-primary focus:text-white data-open:bg-primary data-open:text-white flex cursor-clickable items-center gap-1.5 rounded-sm px-1.5 py-1 text-sm outline-hidden select-none data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n className,\n )}\n {...props}\n >\n {children}\n <ChevronRightIcon className=\"ml-auto\" />\n </ContextMenuPrimitive.SubmenuTrigger>\n )\n}\n\nfunction ContextMenuSubContent({\n align = \"start\",\n // -4 cancels the popup's p-1 (4px) top padding so the submenu's first\n // item lines up with the parent item row, not the popup container edge.\n alignOffset = -4,\n side = \"right\",\n sideOffset = 0,\n className,\n ...props\n}: ContextMenuSubContentProps) {\n return (\n <ContextMenuContent\n data-slot=\"context-menu-sub-content\"\n className={cn(\"w-auto min-w-24 shadow-md\", className)}\n align={align}\n alignOffset={alignOffset}\n side={side}\n sideOffset={sideOffset}\n {...props}\n />\n )\n}\n\nfunction ContextMenuCheckboxItem({\n className,\n children,\n checked,\n inset,\n ...props\n}: ContextMenuCheckboxItemProps) {\n return (\n <ContextMenuPrimitive.CheckboxItem\n data-slot=\"context-menu-checkbox-item\"\n data-inset={inset}\n className={cn(\n \"focus:bg-primary focus:text-white relative flex cursor-clickable items-center gap-1.5 rounded-sm py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n className,\n )}\n checked={checked}\n {...props}\n >\n <span\n data-slot=\"context-menu-checkbox-item-indicator\"\n className=\"absolute right-2 pointer-events-none\"\n >\n <ContextMenuPrimitive.CheckboxItemIndicator>\n <CheckIcon />\n </ContextMenuPrimitive.CheckboxItemIndicator>\n </span>\n {children}\n </ContextMenuPrimitive.CheckboxItem>\n )\n}\n\nfunction ContextMenuRadioGroup(props: ContextMenuRadioGroupProps) {\n return <ContextMenuPrimitive.RadioGroup data-slot=\"context-menu-radio-group\" {...props} />\n}\n\nfunction ContextMenuRadioItem({ className, children, inset, ...props }: ContextMenuRadioItemProps) {\n return (\n <ContextMenuPrimitive.RadioItem\n data-slot=\"context-menu-radio-item\"\n data-inset={inset}\n className={cn(\n \"focus:bg-primary focus:text-white relative flex cursor-clickable items-center gap-1.5 rounded-sm py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n className,\n )}\n {...props}\n >\n <span\n data-slot=\"context-menu-radio-item-indicator\"\n className=\"absolute right-2 pointer-events-none\"\n >\n <ContextMenuPrimitive.RadioItemIndicator>\n <CheckIcon />\n </ContextMenuPrimitive.RadioItemIndicator>\n </span>\n {children}\n </ContextMenuPrimitive.RadioItem>\n )\n}\n\nfunction ContextMenuSeparator({ className, ...props }: ContextMenuSeparatorProps) {\n return (\n <ContextMenuPrimitive.Separator\n data-slot=\"context-menu-separator\"\n className={cn(\"bg-line -mx-1 my-1 h-px\", className)}\n {...props}\n />\n )\n}\n\nfunction ContextMenuShortcut({ className, ...props }: ContextMenuShortcutProps) {\n return (\n <span\n data-slot=\"context-menu-shortcut\"\n className={cn(\n \"text-muted group-focus/context-menu-item:text-white ml-auto text-xs tracking-widest\",\n className,\n )}\n {...props}\n />\n )\n}\n\nexport {\n ContextMenu,\n ContextMenuCheckboxItem,\n ContextMenuContent,\n ContextMenuGroup,\n ContextMenuItem,\n ContextMenuLabel,\n ContextMenuPortal,\n ContextMenuRadioGroup,\n ContextMenuRadioItem,\n ContextMenuSeparator,\n ContextMenuShortcut,\n ContextMenuSub,\n ContextMenuSubContent,\n ContextMenuSubTrigger,\n ContextMenuTrigger,\n}"],"mappings":"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"}
1
+ {"version":3,"file":"context-menu.js","names":["ContextMenuPrimitive"],"sources":["../src/context-menu.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { ContextMenu as ContextMenuPrimitive } from \"@base-ui/react/context-menu\"\n\nimport { ChevronRightIcon, CheckIcon } from \"./lib/internal-icons\"\n\nimport { cn } from \"./lib/utils\"\nimport { resolveFinalFocus, type RestoreFocusOnClose } from \"./lib/focus\"\n\ntype ContextMenuProps = React.ComponentProps<typeof ContextMenuPrimitive.Root>\ntype ContextMenuPortalProps = React.ComponentProps<typeof ContextMenuPrimitive.Portal>\ntype ContextMenuTriggerProps = React.ComponentProps<typeof ContextMenuPrimitive.Trigger>\n\ntype ContextMenuContentProps = React.ComponentProps<typeof ContextMenuPrimitive.Popup> &\n Pick<\n React.ComponentProps<typeof ContextMenuPrimitive.Positioner>,\n \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n > & {\n /**\n * Focus-restoration policy when the menu closes. Defaults to Base\n * UI's behaviour (restore to the trigger). Use `\"keyboard\"` when\n * the trigger is hover/focus-within–revealed so a pointer close\n * doesn't keep it pinned visible. See {@link RestoreFocusOnClose}.\n */\n restoreFocusOnClose?: RestoreFocusOnClose\n }\n\ntype ContextMenuGroupProps = React.ComponentProps<typeof ContextMenuPrimitive.Group>\n\ntype ContextMenuLabelProps = React.ComponentProps<typeof ContextMenuPrimitive.GroupLabel> & {\n inset?: boolean\n}\n\ntype ContextMenuItemProps = React.ComponentProps<typeof ContextMenuPrimitive.Item> & {\n inset?: boolean\n variant?: \"default\" | \"destructive\"\n}\n\ntype ContextMenuSubProps = React.ComponentProps<typeof ContextMenuPrimitive.SubmenuRoot>\n\ntype ContextMenuSubTriggerProps = React.ComponentProps<typeof ContextMenuPrimitive.SubmenuTrigger> & {\n inset?: boolean\n}\n\ntype ContextMenuCheckboxItemProps = React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem> & {\n inset?: boolean\n}\n\ntype ContextMenuRadioGroupProps = React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>\n\ntype ContextMenuRadioItemProps = React.ComponentProps<typeof ContextMenuPrimitive.RadioItem> & {\n inset?: boolean\n}\n\ntype ContextMenuSeparatorProps = React.ComponentProps<typeof ContextMenuPrimitive.Separator>\n\ntype ContextMenuSubContentProps = React.ComponentProps<typeof ContextMenuContent>\ntype ContextMenuShortcutProps = React.ComponentProps<\"span\">\n\nfunction ContextMenu(props: ContextMenuProps) {\n return <ContextMenuPrimitive.Root data-slot=\"context-menu\" {...props} />\n}\n\nfunction ContextMenuPortal(props: ContextMenuPortalProps) {\n return <ContextMenuPrimitive.Portal data-slot=\"context-menu-portal\" {...props} />\n}\n\nfunction ContextMenuTrigger({ className, ...props }: ContextMenuTriggerProps) {\n return (\n <ContextMenuPrimitive.Trigger\n data-slot=\"context-menu-trigger\"\n className={cn(\"select-none\", className)}\n {...props}\n />\n )\n}\n\nfunction ContextMenuContent({\n className,\n align = \"start\",\n alignOffset = 4,\n side = \"right\",\n sideOffset = 0,\n restoreFocusOnClose,\n finalFocus,\n ...props\n}: ContextMenuContentProps) {\n return (\n <ContextMenuPrimitive.Portal>\n <ContextMenuPrimitive.Positioner\n data-slot=\"context-menu-positioner\"\n className=\"isolate z-50 outline-none\"\n align={align}\n alignOffset={alignOffset}\n side={side}\n sideOffset={sideOffset}\n >\n <ContextMenuPrimitive.Popup\n data-slot=\"context-menu-content\"\n className={cn(\n \"motion-pop-md ring-contrast/10 bg-elevated text-contrast z-50 max-h-(--available-height) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md p-1 shadow-md ring-1 outline-none\",\n className,\n )}\n finalFocus={resolveFinalFocus(restoreFocusOnClose, finalFocus)}\n {...props}\n />\n </ContextMenuPrimitive.Positioner>\n </ContextMenuPrimitive.Portal>\n )\n}\n\nfunction ContextMenuGroup(props: ContextMenuGroupProps) {\n return <ContextMenuPrimitive.Group data-slot=\"context-menu-group\" {...props} />\n}\n\nfunction ContextMenuLabel({ className, inset, ...props }: ContextMenuLabelProps) {\n return (\n <ContextMenuPrimitive.GroupLabel\n data-slot=\"context-menu-label\"\n data-inset={inset}\n className={cn(\n \"text-muted px-1.5 py-1 text-xs font-medium data-inset:pl-7\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction ContextMenuItem({\n className,\n inset,\n variant = \"default\",\n ...props\n}: ContextMenuItemProps) {\n return (\n <ContextMenuPrimitive.Item\n data-slot=\"context-menu-item\"\n data-inset={inset}\n data-variant={variant}\n className={cn(\n \"focus:bg-primary focus:text-white data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive focus:*:[svg]:text-white data-[variant=destructive]:focus:*:[svg]:text-destructive group/context-menu-item relative flex cursor-clickable items-center gap-1.5 rounded-sm px-1.5 py-1 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n className,\n )}\n {...props}\n />\n )\n}\n\nfunction ContextMenuSub(props: ContextMenuSubProps) {\n return <ContextMenuPrimitive.SubmenuRoot data-slot=\"context-menu-sub\" {...props} />\n}\n\nfunction ContextMenuSubTrigger({ className, inset, children, ...props }: ContextMenuSubTriggerProps) {\n return (\n <ContextMenuPrimitive.SubmenuTrigger\n data-slot=\"context-menu-sub-trigger\"\n data-inset={inset}\n className={cn(\n \"focus:bg-primary focus:text-white data-open:bg-primary data-open:text-white flex cursor-clickable items-center gap-1.5 rounded-sm px-1.5 py-1 text-sm outline-hidden select-none data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n className,\n )}\n {...props}\n >\n {children}\n <ChevronRightIcon className=\"ml-auto\" />\n </ContextMenuPrimitive.SubmenuTrigger>\n )\n}\n\nfunction ContextMenuSubContent({\n align = \"start\",\n // -4 cancels the popup's p-1 (4px) top padding so the submenu's first\n // item lines up with the parent item row, not the popup container edge.\n alignOffset = -4,\n side = \"right\",\n sideOffset = 0,\n className,\n ...props\n}: ContextMenuSubContentProps) {\n return (\n <ContextMenuContent\n data-slot=\"context-menu-sub-content\"\n className={cn(\"w-auto min-w-24 shadow-md\", className)}\n align={align}\n alignOffset={alignOffset}\n side={side}\n sideOffset={sideOffset}\n {...props}\n />\n )\n}\n\nfunction ContextMenuCheckboxItem({\n className,\n children,\n checked,\n inset,\n ...props\n}: ContextMenuCheckboxItemProps) {\n return (\n <ContextMenuPrimitive.CheckboxItem\n data-slot=\"context-menu-checkbox-item\"\n data-inset={inset}\n className={cn(\n \"focus:bg-primary focus:text-white focus:*:[svg]:text-white relative flex cursor-clickable items-center gap-1.5 rounded-sm py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n className,\n )}\n checked={checked}\n {...props}\n >\n <span\n data-slot=\"context-menu-checkbox-item-indicator\"\n className=\"absolute right-2 pointer-events-none\"\n >\n <ContextMenuPrimitive.CheckboxItemIndicator>\n <CheckIcon />\n </ContextMenuPrimitive.CheckboxItemIndicator>\n </span>\n {children}\n </ContextMenuPrimitive.CheckboxItem>\n )\n}\n\nfunction ContextMenuRadioGroup(props: ContextMenuRadioGroupProps) {\n return <ContextMenuPrimitive.RadioGroup data-slot=\"context-menu-radio-group\" {...props} />\n}\n\nfunction ContextMenuRadioItem({ className, children, inset, ...props }: ContextMenuRadioItemProps) {\n return (\n <ContextMenuPrimitive.RadioItem\n data-slot=\"context-menu-radio-item\"\n data-inset={inset}\n className={cn(\n \"focus:bg-primary focus:text-white focus:*:[svg]:text-white relative flex cursor-clickable items-center gap-1.5 rounded-sm py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n className,\n )}\n {...props}\n >\n <span\n data-slot=\"context-menu-radio-item-indicator\"\n className=\"absolute right-2 pointer-events-none\"\n >\n <ContextMenuPrimitive.RadioItemIndicator>\n <CheckIcon />\n </ContextMenuPrimitive.RadioItemIndicator>\n </span>\n {children}\n </ContextMenuPrimitive.RadioItem>\n )\n}\n\nfunction ContextMenuSeparator({ className, ...props }: ContextMenuSeparatorProps) {\n return (\n <ContextMenuPrimitive.Separator\n data-slot=\"context-menu-separator\"\n className={cn(\"bg-line -mx-1 my-1 h-px\", className)}\n {...props}\n />\n )\n}\n\nfunction ContextMenuShortcut({ className, ...props }: ContextMenuShortcutProps) {\n return (\n <span\n data-slot=\"context-menu-shortcut\"\n className={cn(\n \"text-muted group-focus/context-menu-item:text-white ml-auto text-xs tracking-widest\",\n className,\n )}\n {...props}\n />\n )\n}\n\nexport {\n ContextMenu,\n ContextMenuCheckboxItem,\n ContextMenuContent,\n ContextMenuGroup,\n ContextMenuItem,\n ContextMenuLabel,\n ContextMenuPortal,\n ContextMenuRadioGroup,\n ContextMenuRadioItem,\n ContextMenuSeparator,\n ContextMenuShortcut,\n ContextMenuSub,\n ContextMenuSubContent,\n ContextMenuSubTrigger,\n ContextMenuTrigger,\n}"],"mappings":"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"}
package/dist/field.js CHANGED
@@ -21,7 +21,7 @@ function FieldLabel({ className, ...props }) {
21
21
  function FieldControl({ className, ...props }) {
22
22
  return /* @__PURE__ */ jsx(FieldPrimitive.Control, {
23
23
  "data-slot": "field-control",
24
- className: cn("rounded-md outline-none focus-visible:ring-2 focus-visible:ring-focus focus-visible:ring-offset-2 data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50", className),
24
+ className: cn("rounded-md outline-none focus-visible:ring-3 focus-visible:ring-focus/50 data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50", className),
25
25
  ...props
26
26
  });
27
27
  }
package/dist/field.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"field.js","names":[],"sources":["../src/field.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { Field as FieldPrimitive } from \"@base-ui/react/field\"\n\nimport { cn } from \"./lib/utils\"\n\nexport type FieldProps = React.ComponentProps<typeof FieldPrimitive.Root>\nexport type FieldLabelProps = React.ComponentProps<typeof FieldPrimitive.Label>\nexport type FieldDescriptionProps = React.ComponentProps<typeof FieldPrimitive.Description>\nexport type FieldItemProps = React.ComponentProps<typeof FieldPrimitive.Item>\nexport type FieldErrorProps = React.ComponentProps<typeof FieldPrimitive.Error>\nexport type FieldValidityProps = React.ComponentProps<typeof FieldPrimitive.Validity>\n\n// `ref` matters here for React Hook Form / focus management; it flows\n// through to the control via standard prop forwarding (React 19).\nexport type FieldControlProps = React.ComponentProps<typeof FieldPrimitive.Control>\n\nexport function Field({ className, ...props }: FieldProps) {\n return (\n <FieldPrimitive.Root\n data-slot=\"field\"\n className={cn(\n \"grid w-full gap-2 data-[invalid]:text-destructive\",\n className\n )}\n {...props}\n />\n )\n}\n\nexport function FieldLabel({ className, ...props }: FieldLabelProps) {\n return (\n <FieldPrimitive.Label\n data-slot=\"field-label\"\n className={cn(\n \"text-sm font-medium leading-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-70\",\n className,\n )}\n {...props}\n />\n )\n}\n\nexport function FieldControl({ className, ...props }: FieldControlProps) {\n return (\n <FieldPrimitive.Control\n data-slot=\"field-control\"\n className={cn(\n \"rounded-md outline-none focus-visible:ring-2 focus-visible:ring-focus focus-visible:ring-offset-2 data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50\",\n className,\n )}\n {...props}\n />\n )\n}\n\nexport function FieldDescription({ className, ...props }: FieldDescriptionProps) {\n return (\n <FieldPrimitive.Description\n data-slot=\"field-description\"\n className={cn(\n \"text-muted text-left text-sm leading-normal font-normal group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5\",\n \"last:mt-0 nth-last-2:-mt-1\",\n \"[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4\",\n className\n )}\n {...props}\n />\n )\n}\n\nexport function FieldItem({ className, ...props }: FieldItemProps) {\n return (\n <FieldPrimitive.Item\n data-slot=\"field-item\"\n className={cn(\"flex items-center gap-2\", className)}\n {...props}\n />\n )\n}\n\nexport function FieldError({ className, ...props }: FieldErrorProps) {\n return (\n <FieldPrimitive.Error\n data-slot=\"field-error\"\n className={cn(\"text-destructive text-sm font-normal\", className)}\n {...props}\n />\n )\n}\n\n// Base UI's Validity does not accept `className`/`ref` (and we don't need to style it yet), so we export it as-is.\nexport const FieldValidity = FieldPrimitive.Validity\n\nexport { FieldPrimitive }"],"mappings":";;;;;;AAkBA,SAAgB,MAAM,EAAE,WAAW,GAAG,SAAqB;AACzD,QACE,oBAAC,eAAe,MAAhB;EACE,aAAU;EACV,WAAW,GACT,qDACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAgB,WAAW,EAAE,WAAW,GAAG,SAA0B;AACnE,QACE,oBAAC,eAAe,OAAhB;EACE,aAAU;EACV,WAAW,GACT,kGACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAgB,aAAa,EAAE,WAAW,GAAG,SAA4B;AACvE,QACE,oBAAC,eAAe,SAAhB;EACE,aAAU;EACV,WAAW,GACT,mKACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAgB,iBAAiB,EAAE,WAAW,GAAG,SAAgC;AAC/E,QACE,oBAAC,eAAe,aAAhB;EACE,aAAU;EACV,WAAW,GACT,0IACA,8BACA,qEACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAgB,UAAU,EAAE,WAAW,GAAG,SAAyB;AACjE,QACE,oBAAC,eAAe,MAAhB;EACE,aAAU;EACV,WAAW,GAAG,2BAA2B,UAAU;EACnD,GAAI;EACJ,CAAA;;AAIN,SAAgB,WAAW,EAAE,WAAW,GAAG,SAA0B;AACnE,QACE,oBAAC,eAAe,OAAhB;EACE,aAAU;EACV,WAAW,GAAG,wCAAwC,UAAU;EAChE,GAAI;EACJ,CAAA;;AAKN,MAAa,gBAAgB,eAAe"}
1
+ {"version":3,"file":"field.js","names":[],"sources":["../src/field.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { Field as FieldPrimitive } from \"@base-ui/react/field\"\n\nimport { cn } from \"./lib/utils\"\n\nexport type FieldProps = React.ComponentProps<typeof FieldPrimitive.Root>\nexport type FieldLabelProps = React.ComponentProps<typeof FieldPrimitive.Label>\nexport type FieldDescriptionProps = React.ComponentProps<typeof FieldPrimitive.Description>\nexport type FieldItemProps = React.ComponentProps<typeof FieldPrimitive.Item>\nexport type FieldErrorProps = React.ComponentProps<typeof FieldPrimitive.Error>\nexport type FieldValidityProps = React.ComponentProps<typeof FieldPrimitive.Validity>\n\n// `ref` matters here for React Hook Form / focus management; it flows\n// through to the control via standard prop forwarding (React 19).\nexport type FieldControlProps = React.ComponentProps<typeof FieldPrimitive.Control>\n\nexport function Field({ className, ...props }: FieldProps) {\n return (\n <FieldPrimitive.Root\n data-slot=\"field\"\n className={cn(\n \"grid w-full gap-2 data-[invalid]:text-destructive\",\n className\n )}\n {...props}\n />\n )\n}\n\nexport function FieldLabel({ className, ...props }: FieldLabelProps) {\n return (\n <FieldPrimitive.Label\n data-slot=\"field-label\"\n className={cn(\n \"text-sm font-medium leading-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-70\",\n className,\n )}\n {...props}\n />\n )\n}\n\nexport function FieldControl({ className, ...props }: FieldControlProps) {\n return (\n <FieldPrimitive.Control\n data-slot=\"field-control\"\n className={cn(\n \"rounded-md outline-none focus-visible:ring-3 focus-visible:ring-focus/50 data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50\",\n className,\n )}\n {...props}\n />\n )\n}\n\nexport function FieldDescription({ className, ...props }: FieldDescriptionProps) {\n return (\n <FieldPrimitive.Description\n data-slot=\"field-description\"\n className={cn(\n \"text-muted text-left text-sm leading-normal font-normal group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5\",\n \"last:mt-0 nth-last-2:-mt-1\",\n \"[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4\",\n className\n )}\n {...props}\n />\n )\n}\n\nexport function FieldItem({ className, ...props }: FieldItemProps) {\n return (\n <FieldPrimitive.Item\n data-slot=\"field-item\"\n className={cn(\"flex items-center gap-2\", className)}\n {...props}\n />\n )\n}\n\nexport function FieldError({ className, ...props }: FieldErrorProps) {\n return (\n <FieldPrimitive.Error\n data-slot=\"field-error\"\n className={cn(\"text-destructive text-sm font-normal\", className)}\n {...props}\n />\n )\n}\n\n// Base UI's Validity does not accept `className`/`ref` (and we don't need to style it yet), so we export it as-is.\nexport const FieldValidity = FieldPrimitive.Validity\n\nexport { FieldPrimitive }"],"mappings":";;;;;;AAkBA,SAAgB,MAAM,EAAE,WAAW,GAAG,SAAqB;AACzD,QACE,oBAAC,eAAe,MAAhB;EACE,aAAU;EACV,WAAW,GACT,qDACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAgB,WAAW,EAAE,WAAW,GAAG,SAA0B;AACnE,QACE,oBAAC,eAAe,OAAhB;EACE,aAAU;EACV,WAAW,GACT,kGACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAgB,aAAa,EAAE,WAAW,GAAG,SAA4B;AACvE,QACE,oBAAC,eAAe,SAAhB;EACE,aAAU;EACV,WAAW,GACT,0IACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAgB,iBAAiB,EAAE,WAAW,GAAG,SAAgC;AAC/E,QACE,oBAAC,eAAe,aAAhB;EACE,aAAU;EACV,WAAW,GACT,0IACA,8BACA,qEACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAgB,UAAU,EAAE,WAAW,GAAG,SAAyB;AACjE,QACE,oBAAC,eAAe,MAAhB;EACE,aAAU;EACV,WAAW,GAAG,2BAA2B,UAAU;EACnD,GAAI;EACJ,CAAA;;AAIN,SAAgB,WAAW,EAAE,WAAW,GAAG,SAA0B;AACnE,QACE,oBAAC,eAAe,OAAhB;EACE,aAAU;EACV,WAAW,GAAG,wCAAwC,UAAU;EAChE,GAAI;EACJ,CAAA;;AAKN,MAAa,gBAAgB,eAAe"}
@@ -1 +1 @@
1
- {"version":3,"file":"form.d.ts","names":[],"sources":["../src/form.tsx"],"mappings":";;;;;;;KAsBK,SAAA,sBAA+B,WAAA;EAClC,IAAA,EAAM,aAAA,CAAc,YAAA;EACpB,QAAA,EAAU,aAAA,CAAc,YAAA;AAAA,IACtB,IAAA,CAAK,KAAA,CAAM,cAAA;AAAA,KAEV,aAAA,GAAgB,KAAA,CAAM,cAAA;AAAA,KACtB,cAAA,GAAiB,KAAA,CAAM,cAAA;AAAA,KACvB,gBAAA,GAAmB,KAAA,CAAM,cAAA;AAAA,KACzB,gBAAA,GAAmB,KAAA,CAAM,cAAA;AAAA,iBAErB,IAAA,sBAA0B,WAAA,CAAA,CAAA;EAAe,IAAA;EAAM,QAAA;EAAA,GAAa;AAAA,GAAS,SAAA,CAAU,YAAA,IAAa,oBAAA,CAAA,GAAA,CAAA,OAAA;;;;;;;;;;iBAiB5F,QAAA,CAAA;EAAW,SAAA;EAAA,GAAc;AAAA,GAAS,aAAA,GAAa,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,KAMnD,mBAAA,sBACkB,WAAA,gBACP,SAAA,CAAU,YAAA;EAExB,EAAA;EACA,KAAA,EAAO,qBAAA,CAAsB,YAAA,EAAc,KAAA;EAC3C,UAAA,EAAY,oBAAA;AAAA;AAAA,KAGT,cAAA,sBACkB,WAAA,gBACP,SAAA,CAAU,YAAA;EAExB,IAAA,EAAM,KAAA;EACN,EAAA;EACA,QAAA;EACA,KAAA,GAAQ,KAAA,CAAM,SAAA;EACd,WAAA,GAAc,KAAA,CAAM,SAAA;EACpB,KAAA,GAAQ,eAAA,CAAgB,YAAA,EAAc,KAAA;;;;AA9CC;;;;;EAuDvC,MAAA,GAAS,IAAA,EAAM,mBAAA,CAAoB,YAAA,EAAc,KAAA,MAAW,KAAA,CAAM,SAAA;AAAA,IAChE,IAAA,CACF,KAAA,CAAM,cAAA,QAAsB,KAAA;;;;AAvDc;;;iBAiEnC,SAAA,sBACc,WAAA,gBACP,SAAA,CAAU,YAAA,EAAA,CACxB,KAAA,EAAO,cAAA,CAAe,YAAA,EAAc,KAAA,IAAM,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAyDnC,SAAA,CAAA;EAAY,SAAA;EAAA,GAAc;AAAA,GAAS,cAAA,GAAc,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBA2BjD,WAAA,CAAA;EAAc,SAAA;EAAA,GAAc;AAAA,GAAS,gBAAA,GAAgB,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAUrD,WAAA,CAAA;EAAc,SAAA;EAAA,GAAc;AAAA,GAAS,gBAAA,GAAgB,oBAAA,CAAA,GAAA,CAAA,OAAA;;;;;;iBAWrD,iBAAA,sBACc,WAAA,gBACP,SAAA,CAAU,YAAA,EAAA,CAExB,KAAA,EAAO,qBAAA,CAAsB,YAAA,EAAc,KAAA,GAC3C,IAAA;EACE,EAAA;EACA,WAAA;EACA,OAAA;EACA,MAAA;AAAA"}
1
+ {"version":3,"file":"form.d.ts","names":[],"sources":["../src/form.tsx"],"mappings":";;;;;;;KAsBK,SAAA,sBAA+B,WAAA;EAClC,IAAA,EAAM,aAAA,CAAc,YAAA;EACpB,QAAA,EAAU,aAAA,CAAc,YAAA;AAAA,IACtB,IAAA,CAAK,KAAA,CAAM,cAAA;AAAA,KAEV,aAAA,GAAgB,KAAA,CAAM,cAAA;AAAA,KACtB,cAAA,GAAiB,KAAA,CAAM,cAAA;AAAA,KACvB,gBAAA,GAAmB,KAAA,CAAM,cAAA;AAAA,KACzB,gBAAA,GAAmB,KAAA,CAAM,cAAA;AAAA,iBAErB,IAAA,sBAA0B,WAAA,CAAA,CAAA;EAAe,IAAA;EAAM,QAAA;EAAA,GAAa;AAAA,GAAS,SAAA,CAAU,YAAA,IAAa,oBAAA,CAAA,GAAA,CAAA,OAAA;;;;;;;;;;iBAiB5F,QAAA,CAAA;EAAW,SAAA;EAAA,GAAc;AAAA,GAAS,aAAA,GAAa,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,KAMnD,mBAAA,sBACkB,WAAA,gBACP,SAAA,CAAU,YAAA;EAExB,EAAA;EACA,KAAA,EAAO,qBAAA,CAAsB,YAAA,EAAc,KAAA;EAC3C,UAAA,EAAY,oBAAA;AAAA;AAAA,KAGT,cAAA,sBACkB,WAAA,gBACP,SAAA,CAAU,YAAA;EAExB,IAAA,EAAM,KAAA;EACN,EAAA;EACA,QAAA;EACA,KAAA,GAAQ,KAAA,CAAM,SAAA;EACd,WAAA,GAAc,KAAA,CAAM,SAAA;EACpB,KAAA,GAAQ,eAAA,CAAgB,YAAA,EAAc,KAAA;;;;AA9CC;;;;;EAuDvC,MAAA,GAAS,IAAA,EAAM,mBAAA,CAAoB,YAAA,EAAc,KAAA,MAAW,KAAA,CAAM,SAAA;AAAA,IAChE,IAAA,CACF,KAAA,CAAM,cAAA,QAAsB,KAAA;;;;AAvDc;;;iBAiEnC,SAAA,sBACc,WAAA,gBACP,SAAA,CAAU,YAAA,EAAA,CACxB,KAAA,EAAO,cAAA,CAAe,YAAA,EAAc,KAAA,IAAM,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAyDnC,SAAA,CAAA;EAAY,SAAA;EAAA,GAAc;AAAA,GAAS,cAAA,GAAc,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBA4BjD,WAAA,CAAA;EAAc,SAAA;EAAA,GAAc;AAAA,GAAS,gBAAA,GAAgB,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAUrD,WAAA,CAAA;EAAc,SAAA;EAAA,GAAc;AAAA,GAAS,gBAAA,GAAgB,oBAAA,CAAA,GAAA,CAAA,OAAA;;;;;;iBAWrD,iBAAA,sBACc,WAAA,gBACP,SAAA,CAAU,YAAA,EAAA,CAExB,KAAA,EAAO,qBAAA,CAAsB,YAAA,EAAc,KAAA,GAC3C,IAAA;EACE,EAAA;EACA,WAAA;EACA,OAAA;EACA,MAAA;AAAA"}
package/dist/form.js CHANGED
@@ -85,6 +85,7 @@ function FormError({ className, ...props }) {
85
85
  if (!message) return null;
86
86
  return /* @__PURE__ */ jsx("p", {
87
87
  "data-slot": "form-error",
88
+ role: "alert",
88
89
  className: cn("text-destructive rounded-lg border border-destructive/30 bg-destructive/5 p-4 text-sm", className),
89
90
  ...props,
90
91
  children: message
package/dist/form.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"form.js","names":[],"sources":["../src/form.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport {\n Controller,\n FormProvider,\n useFormContext,\n useForm,\n useWatch,\n type SubmitHandler,\n type UseFormReturn,\n type ControllerFieldState,\n type ControllerRenderProps,\n type FieldPath,\n type FieldValues,\n type RegisterOptions,\n} from \"react-hook-form\";\n\nimport { Field, FieldDescription, FieldError, FieldLabel } from \"./field\";\n\nimport { cn } from \"./lib/utils\";\n\ntype FormProps<TFieldValues extends FieldValues> = {\n form: UseFormReturn<TFieldValues>;\n onSubmit: SubmitHandler<TFieldValues>;\n} & Omit<React.ComponentProps<\"form\">, \"onSubmit\">;\n\ntype FormRootProps = React.ComponentProps<\"form\">;\ntype FormErrorProps = React.ComponentProps<\"p\">;\ntype FormActionsProps = React.ComponentProps<\"div\">;\ntype FormMessageProps = React.ComponentProps<\"p\">;\n\nfunction Form<TFieldValues extends FieldValues>({ form, onSubmit, ...props }: FormProps<TFieldValues>) {\n return (\n <FormProvider {...form}>\n <FormRoot {...props} onSubmit={form.handleSubmit(onSubmit)} />\n </FormProvider>\n );\n}\n\n/**\n * Plain `<form>` element with RHF integration.\n *\n * Uses a native `<form>` instead of `@base-ui/react/form` because Base UI\n * Form's internal submit/validation handling conflicts with React Hook Form\n * and blocks button click events inside modal dialogs. Since RHF already\n * provides validation, error handling, and submit management, the Base UI\n * Form wrapper adds no value at the moment.\n */\nfunction FormRoot({ className, ...props }: FormRootProps) {\n return (\n <form noValidate data-slot=\"form\" className={cn(\"flex flex-col gap-6\", className)} {...props} />\n );\n}\n\ntype FormFieldRenderArgs<\n TFieldValues extends FieldValues,\n TName extends FieldPath<TFieldValues>,\n> = {\n id: string;\n field: ControllerRenderProps<TFieldValues, TName>;\n fieldState: ControllerFieldState;\n};\n\ntype FormFieldProps<\n TFieldValues extends FieldValues,\n TName extends FieldPath<TFieldValues>,\n> = {\n name: TName;\n id?: string;\n required?: boolean;\n label?: React.ReactNode;\n description?: React.ReactNode;\n rules?: RegisterOptions<TFieldValues, TName>;\n /**\n * Render the actual control.\n *\n * - For Base UI controls, prefer `onValueChange`.\n * - For native/standard inputs, use `onChange`.\n *\n * Use `fieldControlProps(field)` to get both.\n */\n render: (args: FormFieldRenderArgs<TFieldValues, TName>) => React.ReactNode;\n} & Omit<\n React.ComponentProps<typeof Field>,\n \"children\" | \"name\" | \"invalid\" | \"touched\" | \"dirty\" | \"render\"\n>;\n\n/**\n * Base UI + React Hook Form field helper.\n *\n * It maps RHF Controller state onto Base UI's <Field> state so styling can\n * rely on `data-[invalid]`, `data-[touched]`, `data-[dirty]`, etc.\n */\nfunction FormField<\n TFieldValues extends FieldValues,\n TName extends FieldPath<TFieldValues>,\n>(props: FormFieldProps<TFieldValues, TName>) {\n const { name, id, required, label, description, rules, render, ...rootProps } = props;\n const { control } = useFormContext<TFieldValues>();\n\n const reactId = React.useId();\n const safeName = String(name).replace(/[^a-zA-Z0-9_-]/g, \"-\");\n const controlId = id ?? `field-${safeName}-${reactId}`;\n\n const inferredRequired = (() => {\n if (!rules || !(\"required\" in rules)) return false;\n const req = (rules as { required?: unknown }).required;\n if (typeof req === \"boolean\") return req;\n if (typeof req === \"string\") return true;\n if (req && typeof req === \"object\" && \"value\" in (req as Record<string, unknown>)) {\n return Boolean((req as { value?: unknown }).value);\n }\n return Boolean(req);\n })();\n\n const isRequired = required ?? inferredRequired;\n\n return (\n <Controller\n name={name}\n control={control}\n rules={rules}\n render={({ field, fieldState }) => (\n <Field\n {...rootProps}\n name={field.name}\n invalid={fieldState.invalid}\n touched={fieldState.isTouched}\n dirty={fieldState.isDirty}\n >\n {label ? (\n <FieldLabel>\n {label}\n {isRequired ? (\n <span aria-hidden=\"true\" className=\"text-destructive ml-1\">\n *\n </span>\n ) : null}\n </FieldLabel>\n ) : null}\n {description ? <FieldDescription>{description}</FieldDescription> : null}\n\n {render({ id: controlId, field, fieldState })}\n\n {fieldState.error ? (\n <FieldError>{fieldState.error.message}</FieldError>\n ) : null}\n </Field>\n )}\n />\n );\n}\n\nfunction FormError({ className, ...props }: FormErrorProps) {\n const {\n formState: { errors },\n } = useFormContext();\n\n const message =\n (errors as Record<string, unknown>)?.root &&\n typeof (errors as { root?: { message?: unknown } }).root?.message === \"string\"\n ? String((errors as { root?: { message?: unknown } }).root?.message)\n : null;\n\n if (!message) return null;\n\n return (\n <p\n data-slot=\"form-error\"\n className={cn(\n \"text-destructive rounded-lg border border-destructive/30 bg-destructive/5 p-4 text-sm\",\n className,\n )}\n {...props}\n >\n {message}\n </p>\n );\n}\n\nfunction FormActions({ className, ...props }: FormActionsProps) {\n return (\n <div\n data-slot=\"form-actions\"\n className={cn(\"flex flex-wrap items-center gap-2\", className)}\n {...props}\n />\n );\n}\n\nfunction FormMessage({ className, ...props }: FormMessageProps) {\n return (\n <p data-slot=\"form-message\" className={cn(\"text-sm text-contrast/80\", className)} {...props} />\n );\n}\n\n/**\n * Convenience helper for mapping RHF field props onto either:\n * - Base UI controls (use `onValueChange`)\n * - Native/standard inputs (use `onChange`)\n */\nfunction fieldControlProps<\n TFieldValues extends FieldValues,\n TName extends FieldPath<TFieldValues>,\n>(\n field: ControllerRenderProps<TFieldValues, TName>,\n opts?: {\n id?: string;\n describedBy?: string;\n invalid?: boolean;\n native?: boolean;\n },\n) {\n return {\n id: opts?.id,\n name: field.name,\n ref: field.ref,\n value: field.value ?? \"\",\n onBlur: field.onBlur,\n onChange: field.onChange,\n ...(opts?.native ? {} : { onValueChange: field.onChange }),\n \"aria-describedby\": opts?.describedBy,\n \"aria-invalid\": opts?.invalid,\n };\n}\n\nexport {\n Form,\n FormRoot,\n FormField,\n FormError,\n FormActions,\n FormMessage,\n fieldControlProps,\n useForm,\n useWatch,\n type FormFieldRenderArgs,\n type FormFieldProps,\n};\n"],"mappings":";;;;;;;AAgCA,SAAS,KAAuC,EAAE,MAAM,UAAU,GAAG,SAAkC;AACrG,QACE,oBAAC,cAAD;EAAc,GAAI;YAChB,oBAAC,UAAD;GAAU,GAAI;GAAO,UAAU,KAAK,aAAa,SAAS;GAAI,CAAA;EACjD,CAAA;;;;;;;;;;;AAanB,SAAS,SAAS,EAAE,WAAW,GAAG,SAAwB;AACxD,QACE,oBAAC,QAAD;EAAM,YAAA;EAAW,aAAU;EAAO,WAAW,GAAG,uBAAuB,UAAU;EAAE,GAAI;EAAS,CAAA;;;;;;;;AA2CpG,SAAS,UAGP,OAA4C;CAC5C,MAAM,EAAE,MAAM,IAAI,UAAU,OAAO,aAAa,OAAO,QAAQ,GAAG,cAAc;CAChF,MAAM,EAAE,YAAY,gBAA8B;CAElD,MAAM,UAAU,MAAM,OAAO;CAC7B,MAAM,WAAW,OAAO,KAAK,CAAC,QAAQ,mBAAmB,IAAI;CAC7D,MAAM,YAAY,MAAM,SAAS,SAAS,GAAG;CAE7C,MAAM,0BAA0B;AAC9B,MAAI,CAAC,SAAS,EAAE,cAAc,OAAQ,QAAO;EAC7C,MAAM,MAAO,MAAiC;AAC9C,MAAI,OAAO,QAAQ,UAAW,QAAO;AACrC,MAAI,OAAO,QAAQ,SAAU,QAAO;AACpC,MAAI,OAAO,OAAO,QAAQ,YAAY,WAAY,IAChD,QAAO,QAAS,IAA4B,MAAM;AAEpD,SAAO,QAAQ,IAAI;KACjB;CAEJ,MAAM,aAAa,YAAY;AAE/B,QACE,oBAAC,YAAD;EACQ;EACG;EACF;EACP,SAAS,EAAE,OAAO,iBAChB,qBAAC,OAAD;GACE,GAAI;GACJ,MAAM,MAAM;GACZ,SAAS,WAAW;GACpB,SAAS,WAAW;GACpB,OAAO,WAAW;aALpB;IAOG,QACC,qBAAC,YAAD,EAAA,UAAA,CACG,OACA,aACC,oBAAC,QAAD;KAAM,eAAY;KAAO,WAAU;eAAwB;KAEpD,CAAA,GACL,KACO,EAAA,CAAA,GACX;IACH,cAAc,oBAAC,kBAAD,EAAA,UAAmB,aAA+B,CAAA,GAAG;IAEnE,OAAO;KAAE,IAAI;KAAW;KAAO;KAAY,CAAC;IAE5C,WAAW,QACV,oBAAC,YAAD,EAAA,UAAa,WAAW,MAAM,SAAqB,CAAA,GACjD;IACE;;EAEV,CAAA;;AAIN,SAAS,UAAU,EAAE,WAAW,GAAG,SAAyB;CAC1D,MAAM,EACJ,WAAW,EAAE,aACX,gBAAgB;CAEpB,MAAM,UACH,QAAoC,QACrC,OAAQ,OAA4C,MAAM,YAAY,WAClE,OAAQ,OAA4C,MAAM,QAAQ,GAClE;AAEN,KAAI,CAAC,QAAS,QAAO;AAErB,QACE,oBAAC,KAAD;EACE,aAAU;EACV,WAAW,GACT,yFACA,UACD;EACD,GAAI;YAEH;EACC,CAAA;;AAIR,SAAS,YAAY,EAAE,WAAW,GAAG,SAA2B;AAC9D,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,qCAAqC,UAAU;EAC7D,GAAI;EACJ,CAAA;;AAIN,SAAS,YAAY,EAAE,WAAW,GAAG,SAA2B;AAC9D,QACE,oBAAC,KAAD;EAAG,aAAU;EAAe,WAAW,GAAG,4BAA4B,UAAU;EAAE,GAAI;EAAS,CAAA;;;;;;;AASnG,SAAS,kBAIP,OACA,MAMA;AACA,QAAO;EACL,IAAI,MAAM;EACV,MAAM,MAAM;EACZ,KAAK,MAAM;EACX,OAAO,MAAM,SAAS;EACtB,QAAQ,MAAM;EACd,UAAU,MAAM;EAChB,GAAI,MAAM,SAAS,EAAE,GAAG,EAAE,eAAe,MAAM,UAAU;EACzD,oBAAoB,MAAM;EAC1B,gBAAgB,MAAM;EACvB"}
1
+ {"version":3,"file":"form.js","names":[],"sources":["../src/form.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport {\n Controller,\n FormProvider,\n useFormContext,\n useForm,\n useWatch,\n type SubmitHandler,\n type UseFormReturn,\n type ControllerFieldState,\n type ControllerRenderProps,\n type FieldPath,\n type FieldValues,\n type RegisterOptions,\n} from \"react-hook-form\";\n\nimport { Field, FieldDescription, FieldError, FieldLabel } from \"./field\";\n\nimport { cn } from \"./lib/utils\";\n\ntype FormProps<TFieldValues extends FieldValues> = {\n form: UseFormReturn<TFieldValues>;\n onSubmit: SubmitHandler<TFieldValues>;\n} & Omit<React.ComponentProps<\"form\">, \"onSubmit\">;\n\ntype FormRootProps = React.ComponentProps<\"form\">;\ntype FormErrorProps = React.ComponentProps<\"p\">;\ntype FormActionsProps = React.ComponentProps<\"div\">;\ntype FormMessageProps = React.ComponentProps<\"p\">;\n\nfunction Form<TFieldValues extends FieldValues>({ form, onSubmit, ...props }: FormProps<TFieldValues>) {\n return (\n <FormProvider {...form}>\n <FormRoot {...props} onSubmit={form.handleSubmit(onSubmit)} />\n </FormProvider>\n );\n}\n\n/**\n * Plain `<form>` element with RHF integration.\n *\n * Uses a native `<form>` instead of `@base-ui/react/form` because Base UI\n * Form's internal submit/validation handling conflicts with React Hook Form\n * and blocks button click events inside modal dialogs. Since RHF already\n * provides validation, error handling, and submit management, the Base UI\n * Form wrapper adds no value at the moment.\n */\nfunction FormRoot({ className, ...props }: FormRootProps) {\n return (\n <form noValidate data-slot=\"form\" className={cn(\"flex flex-col gap-6\", className)} {...props} />\n );\n}\n\ntype FormFieldRenderArgs<\n TFieldValues extends FieldValues,\n TName extends FieldPath<TFieldValues>,\n> = {\n id: string;\n field: ControllerRenderProps<TFieldValues, TName>;\n fieldState: ControllerFieldState;\n};\n\ntype FormFieldProps<\n TFieldValues extends FieldValues,\n TName extends FieldPath<TFieldValues>,\n> = {\n name: TName;\n id?: string;\n required?: boolean;\n label?: React.ReactNode;\n description?: React.ReactNode;\n rules?: RegisterOptions<TFieldValues, TName>;\n /**\n * Render the actual control.\n *\n * - For Base UI controls, prefer `onValueChange`.\n * - For native/standard inputs, use `onChange`.\n *\n * Use `fieldControlProps(field)` to get both.\n */\n render: (args: FormFieldRenderArgs<TFieldValues, TName>) => React.ReactNode;\n} & Omit<\n React.ComponentProps<typeof Field>,\n \"children\" | \"name\" | \"invalid\" | \"touched\" | \"dirty\" | \"render\"\n>;\n\n/**\n * Base UI + React Hook Form field helper.\n *\n * It maps RHF Controller state onto Base UI's <Field> state so styling can\n * rely on `data-[invalid]`, `data-[touched]`, `data-[dirty]`, etc.\n */\nfunction FormField<\n TFieldValues extends FieldValues,\n TName extends FieldPath<TFieldValues>,\n>(props: FormFieldProps<TFieldValues, TName>) {\n const { name, id, required, label, description, rules, render, ...rootProps } = props;\n const { control } = useFormContext<TFieldValues>();\n\n const reactId = React.useId();\n const safeName = String(name).replace(/[^a-zA-Z0-9_-]/g, \"-\");\n const controlId = id ?? `field-${safeName}-${reactId}`;\n\n const inferredRequired = (() => {\n if (!rules || !(\"required\" in rules)) return false;\n const req = (rules as { required?: unknown }).required;\n if (typeof req === \"boolean\") return req;\n if (typeof req === \"string\") return true;\n if (req && typeof req === \"object\" && \"value\" in (req as Record<string, unknown>)) {\n return Boolean((req as { value?: unknown }).value);\n }\n return Boolean(req);\n })();\n\n const isRequired = required ?? inferredRequired;\n\n return (\n <Controller\n name={name}\n control={control}\n rules={rules}\n render={({ field, fieldState }) => (\n <Field\n {...rootProps}\n name={field.name}\n invalid={fieldState.invalid}\n touched={fieldState.isTouched}\n dirty={fieldState.isDirty}\n >\n {label ? (\n <FieldLabel>\n {label}\n {isRequired ? (\n <span aria-hidden=\"true\" className=\"text-destructive ml-1\">\n *\n </span>\n ) : null}\n </FieldLabel>\n ) : null}\n {description ? <FieldDescription>{description}</FieldDescription> : null}\n\n {render({ id: controlId, field, fieldState })}\n\n {fieldState.error ? (\n <FieldError>{fieldState.error.message}</FieldError>\n ) : null}\n </Field>\n )}\n />\n );\n}\n\nfunction FormError({ className, ...props }: FormErrorProps) {\n const {\n formState: { errors },\n } = useFormContext();\n\n const message =\n (errors as Record<string, unknown>)?.root &&\n typeof (errors as { root?: { message?: unknown } }).root?.message === \"string\"\n ? String((errors as { root?: { message?: unknown } }).root?.message)\n : null;\n\n if (!message) return null;\n\n return (\n <p\n data-slot=\"form-error\"\n role=\"alert\"\n className={cn(\n \"text-destructive rounded-lg border border-destructive/30 bg-destructive/5 p-4 text-sm\",\n className,\n )}\n {...props}\n >\n {message}\n </p>\n );\n}\n\nfunction FormActions({ className, ...props }: FormActionsProps) {\n return (\n <div\n data-slot=\"form-actions\"\n className={cn(\"flex flex-wrap items-center gap-2\", className)}\n {...props}\n />\n );\n}\n\nfunction FormMessage({ className, ...props }: FormMessageProps) {\n return (\n <p data-slot=\"form-message\" className={cn(\"text-sm text-contrast/80\", className)} {...props} />\n );\n}\n\n/**\n * Convenience helper for mapping RHF field props onto either:\n * - Base UI controls (use `onValueChange`)\n * - Native/standard inputs (use `onChange`)\n */\nfunction fieldControlProps<\n TFieldValues extends FieldValues,\n TName extends FieldPath<TFieldValues>,\n>(\n field: ControllerRenderProps<TFieldValues, TName>,\n opts?: {\n id?: string;\n describedBy?: string;\n invalid?: boolean;\n native?: boolean;\n },\n) {\n return {\n id: opts?.id,\n name: field.name,\n ref: field.ref,\n value: field.value ?? \"\",\n onBlur: field.onBlur,\n onChange: field.onChange,\n ...(opts?.native ? {} : { onValueChange: field.onChange }),\n \"aria-describedby\": opts?.describedBy,\n \"aria-invalid\": opts?.invalid,\n };\n}\n\nexport {\n Form,\n FormRoot,\n FormField,\n FormError,\n FormActions,\n FormMessage,\n fieldControlProps,\n useForm,\n useWatch,\n type FormFieldRenderArgs,\n type FormFieldProps,\n};\n"],"mappings":";;;;;;;AAgCA,SAAS,KAAuC,EAAE,MAAM,UAAU,GAAG,SAAkC;AACrG,QACE,oBAAC,cAAD;EAAc,GAAI;YAChB,oBAAC,UAAD;GAAU,GAAI;GAAO,UAAU,KAAK,aAAa,SAAS;GAAI,CAAA;EACjD,CAAA;;;;;;;;;;;AAanB,SAAS,SAAS,EAAE,WAAW,GAAG,SAAwB;AACxD,QACE,oBAAC,QAAD;EAAM,YAAA;EAAW,aAAU;EAAO,WAAW,GAAG,uBAAuB,UAAU;EAAE,GAAI;EAAS,CAAA;;;;;;;;AA2CpG,SAAS,UAGP,OAA4C;CAC5C,MAAM,EAAE,MAAM,IAAI,UAAU,OAAO,aAAa,OAAO,QAAQ,GAAG,cAAc;CAChF,MAAM,EAAE,YAAY,gBAA8B;CAElD,MAAM,UAAU,MAAM,OAAO;CAC7B,MAAM,WAAW,OAAO,KAAK,CAAC,QAAQ,mBAAmB,IAAI;CAC7D,MAAM,YAAY,MAAM,SAAS,SAAS,GAAG;CAE7C,MAAM,0BAA0B;AAC9B,MAAI,CAAC,SAAS,EAAE,cAAc,OAAQ,QAAO;EAC7C,MAAM,MAAO,MAAiC;AAC9C,MAAI,OAAO,QAAQ,UAAW,QAAO;AACrC,MAAI,OAAO,QAAQ,SAAU,QAAO;AACpC,MAAI,OAAO,OAAO,QAAQ,YAAY,WAAY,IAChD,QAAO,QAAS,IAA4B,MAAM;AAEpD,SAAO,QAAQ,IAAI;KACjB;CAEJ,MAAM,aAAa,YAAY;AAE/B,QACE,oBAAC,YAAD;EACQ;EACG;EACF;EACP,SAAS,EAAE,OAAO,iBAChB,qBAAC,OAAD;GACE,GAAI;GACJ,MAAM,MAAM;GACZ,SAAS,WAAW;GACpB,SAAS,WAAW;GACpB,OAAO,WAAW;aALpB;IAOG,QACC,qBAAC,YAAD,EAAA,UAAA,CACG,OACA,aACC,oBAAC,QAAD;KAAM,eAAY;KAAO,WAAU;eAAwB;KAEpD,CAAA,GACL,KACO,EAAA,CAAA,GACX;IACH,cAAc,oBAAC,kBAAD,EAAA,UAAmB,aAA+B,CAAA,GAAG;IAEnE,OAAO;KAAE,IAAI;KAAW;KAAO;KAAY,CAAC;IAE5C,WAAW,QACV,oBAAC,YAAD,EAAA,UAAa,WAAW,MAAM,SAAqB,CAAA,GACjD;IACE;;EAEV,CAAA;;AAIN,SAAS,UAAU,EAAE,WAAW,GAAG,SAAyB;CAC1D,MAAM,EACJ,WAAW,EAAE,aACX,gBAAgB;CAEpB,MAAM,UACH,QAAoC,QACrC,OAAQ,OAA4C,MAAM,YAAY,WAClE,OAAQ,OAA4C,MAAM,QAAQ,GAClE;AAEN,KAAI,CAAC,QAAS,QAAO;AAErB,QACE,oBAAC,KAAD;EACE,aAAU;EACV,MAAK;EACL,WAAW,GACT,yFACA,UACD;EACD,GAAI;YAEH;EACC,CAAA;;AAIR,SAAS,YAAY,EAAE,WAAW,GAAG,SAA2B;AAC9D,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,qCAAqC,UAAU;EAC7D,GAAI;EACJ,CAAA;;AAIN,SAAS,YAAY,EAAE,WAAW,GAAG,SAA2B;AAC9D,QACE,oBAAC,KAAD;EAAG,aAAU;EAAe,WAAW,GAAG,4BAA4B,UAAU;EAAE,GAAI;EAAS,CAAA;;;;;;;AASnG,SAAS,kBAIP,OACA,MAMA;AACA,QAAO;EACL,IAAI,MAAM;EACV,MAAM,MAAM;EACZ,KAAK,MAAM;EACX,OAAO,MAAM,SAAS;EACtB,QAAQ,MAAM;EACd,UAAU,MAAM;EAChB,GAAI,MAAM,SAAS,EAAE,GAAG,EAAE,eAAe,MAAM,UAAU;EACzD,oBAAoB,MAAM;EAC1B,gBAAgB,MAAM;EACvB"}
@@ -18,7 +18,7 @@ declare function InputGroup({
18
18
  ...props
19
19
  }: InputGroupProps): _$react_jsx_runtime0.JSX.Element;
20
20
  declare const inputGroupAddonVariants: (props?: ({
21
- align?: "inline-start" | "inline-end" | "block-start" | "block-end" | null | undefined;
21
+ align?: "inline-end" | "inline-start" | "block-end" | "block-start" | null | undefined;
22
22
  } & _$class_variance_authority_types0.ClassProp) | undefined) => string;
23
23
  declare function InputGroupAddon({
24
24
  className,
@@ -1 +1 @@
1
- {"version":3,"file":"item.d.ts","names":[],"sources":["../src/item.tsx"],"mappings":";;;;;;;;cAUM,YAAA,GAAY,KAAA;;;IAoBjB,iCAAA,CAAA,SAAA;AAAA,cAEK,iBAAA,GAAiB,KAAA;;IActB,iCAAA,CAAA,SAAA;AAAA,KAEI,cAAA,GAAiB,KAAA,CAAM,cAAA;AAAA,KACvB,kBAAA,GAAqB,KAAA,CAAM,cAAA,QAAsB,SAAA;AAAA,KACjD,SAAA,GAAY,SAAA,CAAU,cAAA,UAAwB,YAAA,QAAoB,YAAA;AAAA,KAClE,cAAA,GAAiB,KAAA,CAAM,cAAA,UAAwB,YAAA,QAAoB,iBAAA;AAAA,KACnE,gBAAA,GAAmB,KAAA,CAAM,cAAA;AAAA,KACzB,cAAA,GAAiB,KAAA,CAAM,cAAA;AAAA,KACvB,oBAAA,GAAuB,KAAA,CAAM,cAAA;AAAA,KAC7B,gBAAA,GAAmB,KAAA,CAAM,cAAA;AAAA,KACzB,eAAA,GAAkB,KAAA,CAAM,cAAA;AAAA,KACxB,eAAA,GAAkB,KAAA,CAAM,cAAA;AAAA,iBAEpB,SAAA,CAAA;EAAY,SAAA;EAAA,GAAc;AAAA,GAAS,cAAA,GAAc,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAcjD,aAAA,CAAA;EAAgB,SAAA;EAAA,GAAc;AAAA,GAAS,kBAAA,GAAkB,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAWzD,IAAA,CAAA;EACP,SAAA;EACA,OAAA;EACA,IAAA;EACA,MAAA;EAAA,GACG;AAAA,GACF,SAAA,GAAS,KAAA,CAAA,YAAA,mBAAA,KAAA,CAAA,qBAAA;AAAA,iBAkBH,SAAA,CAAA;EAAY,SAAA;EAAW,OAAA;EAAA,GAAwB;AAAA,GAAS,cAAA,GAAc,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAWtE,WAAA,CAAA;EAAc,SAAA;EAAA,GAAc;AAAA,GAAS,gBAAA,GAAgB,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAarD,SAAA,CAAA;EAAY,SAAA;EAAA,GAAc;AAAA,GAAS,cAAA,GAAc,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAajD,eAAA,CAAA;EAAkB,SAAA;EAAA,GAAc;AAAA,GAAS,oBAAA,GAAoB,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAa7D,WAAA,CAAA;EAAc,SAAA;EAAA,GAAc;AAAA,GAAS,gBAAA,GAAgB,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAUrD,UAAA,CAAA;EAAa,SAAA;EAAA,GAAc;AAAA,GAAS,eAAA,GAAe,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAanD,UAAA,CAAA;EAAa,SAAA;EAAA,GAAc;AAAA,GAAS,eAAA,GAAe,oBAAA,CAAA,GAAA,CAAA,OAAA"}
1
+ {"version":3,"file":"item.d.ts","names":[],"sources":["../src/item.tsx"],"mappings":";;;;;;;;cAUM,YAAA,GAAY,KAAA;;;IAoBjB,iCAAA,CAAA,SAAA;AAAA,cAEK,iBAAA,GAAiB,KAAA;;IActB,iCAAA,CAAA,SAAA;AAAA,KAEI,cAAA,GAAiB,KAAA,CAAM,cAAA;AAAA,KACvB,kBAAA,GAAqB,KAAA,CAAM,cAAA,QAAsB,SAAA;AAAA,KACjD,SAAA,GAAY,SAAA,CAAU,cAAA,UAAwB,YAAA,QAAoB,YAAA;AAAA,KAClE,cAAA,GAAiB,KAAA,CAAM,cAAA,UAAwB,YAAA,QAAoB,iBAAA;AAAA,KACnE,gBAAA,GAAmB,KAAA,CAAM,cAAA;AAAA,KACzB,cAAA,GAAiB,KAAA,CAAM,cAAA;AAAA,KACvB,oBAAA,GAAuB,KAAA,CAAM,cAAA;AAAA,KAC7B,gBAAA,GAAmB,KAAA,CAAM,cAAA;AAAA,KACzB,eAAA,GAAkB,KAAA,CAAM,cAAA;AAAA,KACxB,eAAA,GAAkB,KAAA,CAAM,cAAA;AAAA,iBAEpB,SAAA,CAAA;EAAY,SAAA;EAAA,GAAc;AAAA,GAAS,cAAA,GAAc,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAajD,aAAA,CAAA;EAAgB,SAAA;EAAA,GAAc;AAAA,GAAS,kBAAA,GAAkB,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAWzD,IAAA,CAAA;EACP,SAAA;EACA,OAAA;EACA,IAAA;EACA,MAAA;EAAA,GACG;AAAA,GACF,SAAA,GAAS,KAAA,CAAA,YAAA,mBAAA,KAAA,CAAA,qBAAA;AAAA,iBAkBH,SAAA,CAAA;EAAY,SAAA;EAAW,OAAA;EAAA,GAAwB;AAAA,GAAS,cAAA,GAAc,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAWtE,WAAA,CAAA;EAAc,SAAA;EAAA,GAAc;AAAA,GAAS,gBAAA,GAAgB,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAarD,SAAA,CAAA;EAAY,SAAA;EAAA,GAAc;AAAA,GAAS,cAAA,GAAc,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAajD,eAAA,CAAA;EAAkB,SAAA;EAAA,GAAc;AAAA,GAAS,oBAAA,GAAoB,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAa7D,WAAA,CAAA;EAAc,SAAA;EAAA,GAAc;AAAA,GAAS,gBAAA,GAAgB,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAUrD,UAAA,CAAA;EAAa,SAAA;EAAA,GAAc;AAAA,GAAS,eAAA,GAAe,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAanD,UAAA,CAAA;EAAa,SAAA;EAAA,GAAc;AAAA,GAAS,eAAA,GAAe,oBAAA,CAAA,GAAA,CAAA,OAAA"}
package/dist/item.js CHANGED
@@ -35,7 +35,6 @@ const itemMediaVariants = cva("gap-2 group-has-data-[slot=item-description]/item
35
35
  });
36
36
  function ItemGroup({ className, ...props }) {
37
37
  return /* @__PURE__ */ jsx("div", {
38
- role: "list",
39
38
  "data-slot": "item-group",
40
39
  className: cn("group/item-group flex w-full flex-col gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2", className),
41
40
  ...props
package/dist/item.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"item.js","names":[],"sources":["../src/item.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"./lib/utils\"\nimport { Separator } from \"./separator\"\n\nconst itemVariants = cva(\n \"[a]:hover:bg-secondary rounded-md border text-sm w-full group/item focus-visible:border-focus focus-visible:ring-focus/50 flex items-center flex-wrap outline-none transition-colors duration-200 focus-visible:ring-3 [a]:transition-colors\",\n {\n variants: {\n variant: {\n default: \"border-transparent\",\n outline: \"border-line\",\n muted: \"bg-secondary/50 border-transparent\",\n },\n size: {\n default: \"gap-2.5 px-3 py-2.5\",\n sm: \"gap-2.5 px-3 py-2.5\",\n xs: \"gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n }\n)\n\nconst itemMediaVariants = cva(\n \"gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start flex shrink-0 items-center justify-center [&_svg]:pointer-events-none\",\n {\n variants: {\n variant: {\n default: \"bg-transparent\",\n icon: \"[&_svg:not([class*='size-'])]:size-4\",\n image: \"size-10 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n }\n)\n\ntype ItemGroupProps = React.ComponentProps<\"div\">\ntype ItemSeparatorProps = React.ComponentProps<typeof Separator>\ntype ItemProps = useRender.ComponentProps<\"div\"> & VariantProps<typeof itemVariants>\ntype ItemMediaProps = React.ComponentProps<\"div\"> & VariantProps<typeof itemMediaVariants>\ntype ItemContentProps = React.ComponentProps<\"div\">\ntype ItemTitleProps = React.ComponentProps<\"div\">\ntype ItemDescriptionProps = React.ComponentProps<\"p\">\ntype ItemActionsProps = React.ComponentProps<\"div\">\ntype ItemHeaderProps = React.ComponentProps<\"div\">\ntype ItemFooterProps = React.ComponentProps<\"div\">\n\nfunction ItemGroup({ className, ...props }: ItemGroupProps) {\n return (\n <div\n role=\"list\"\n data-slot=\"item-group\"\n className={cn(\n \"group/item-group flex w-full flex-col gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction ItemSeparator({ className, ...props }: ItemSeparatorProps) {\n return (\n <Separator\n data-slot=\"item-separator\"\n orientation=\"horizontal\"\n className={cn(\"my-2\", className)}\n {...props}\n />\n )\n}\n\nfunction Item({\n className,\n variant = \"default\",\n size = \"default\",\n render,\n ...props\n}: ItemProps) {\n return useRender({\n defaultTagName: \"div\",\n props: mergeProps<\"div\">(\n {\n className: cn(itemVariants({ variant, size, className })),\n },\n props\n ),\n render,\n state: {\n slot: \"item\",\n variant,\n size,\n },\n })\n}\n\nfunction ItemMedia({ className, variant = \"default\", ...props }: ItemMediaProps) {\n return (\n <div\n data-slot=\"item-media\"\n data-variant={variant}\n className={cn(itemMediaVariants({ variant, className }))}\n {...props}\n />\n )\n}\n\nfunction ItemContent({ className, ...props }: ItemContentProps) {\n return (\n <div\n data-slot=\"item-content\"\n className={cn(\n \"flex flex-1 flex-col gap-1 group-data-[size=xs]/item:gap-0 [&+[data-slot=item-content]]:flex-none\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction ItemTitle({ className, ...props }: ItemTitleProps) {\n return (\n <div\n data-slot=\"item-title\"\n className={cn(\n \"line-clamp-1 flex w-fit items-center gap-2 text-sm leading-snug font-medium underline-offset-4\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction ItemDescription({ className, ...props }: ItemDescriptionProps) {\n return (\n <p\n data-slot=\"item-description\"\n className={cn(\n \"text-muted [&>a:hover]:text-primary line-clamp-2 text-left text-sm leading-normal font-normal group-data-[size=xs]/item:text-xs [&>a]:underline [&>a]:underline-offset-4\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction ItemActions({ className, ...props }: ItemActionsProps) {\n return (\n <div\n data-slot=\"item-actions\"\n className={cn(\"flex items-center gap-2\", className)}\n {...props}\n />\n )\n}\n\nfunction ItemHeader({ className, ...props }: ItemHeaderProps) {\n return (\n <div\n data-slot=\"item-header\"\n className={cn(\n \"flex basis-full items-center justify-between gap-2\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction ItemFooter({ className, ...props }: ItemFooterProps) {\n return (\n <div\n data-slot=\"item-footer\"\n className={cn(\n \"flex basis-full items-center justify-between gap-2\",\n className\n )}\n {...props}\n />\n )\n}\n\nexport {\n Item,\n ItemMedia,\n ItemContent,\n ItemActions,\n ItemGroup,\n ItemSeparator,\n ItemTitle,\n ItemDescription,\n ItemHeader,\n ItemFooter,\n}\n"],"mappings":";;;;;;;;;AAUA,MAAM,eAAe,IACnB,gPACA;CACE,UAAU;EACR,SAAS;GACP,SAAS;GACT,SAAS;GACT,OAAO;GACR;EACD,MAAM;GACJ,SAAS;GACT,IAAI;GACJ,IAAI;GACL;EACF;CACD,iBAAiB;EACf,SAAS;EACT,MAAM;EACP;CACF,CACF;AAED,MAAM,oBAAoB,IACxB,kMACA;CACE,UAAU,EACR,SAAS;EACP,SAAS;EACT,MAAM;EACN,OAAO;EACR,EACF;CACD,iBAAiB,EACf,SAAS,WACV;CACF,CACF;AAaD,SAAS,UAAU,EAAE,WAAW,GAAG,SAAyB;AAC1D,QACE,oBAAC,OAAD;EACE,MAAK;EACL,aAAU;EACV,WAAW,GACT,mGACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,cAAc,EAAE,WAAW,GAAG,SAA6B;AAClE,QACE,oBAAC,WAAD;EACE,aAAU;EACV,aAAY;EACZ,WAAW,GAAG,QAAQ,UAAU;EAChC,GAAI;EACJ,CAAA;;AAIN,SAAS,KAAK,EACZ,WACA,UAAU,WACV,OAAO,WACP,QACA,GAAG,SACS;AACZ,QAAO,UAAU;EACf,gBAAgB;EAChB,OAAO,WACL,EACE,WAAW,GAAG,aAAa;GAAE;GAAS;GAAM;GAAW,CAAC,CAAC,EAC1D,EACD,MACD;EACD;EACA,OAAO;GACL,MAAM;GACN;GACA;GACD;EACF,CAAC;;AAGJ,SAAS,UAAU,EAAE,WAAW,UAAU,WAAW,GAAG,SAAyB;AAC/E,QACE,oBAAC,OAAD;EACE,aAAU;EACV,gBAAc;EACd,WAAW,GAAG,kBAAkB;GAAE;GAAS;GAAW,CAAC,CAAC;EACxD,GAAI;EACJ,CAAA;;AAIN,SAAS,YAAY,EAAE,WAAW,GAAG,SAA2B;AAC9D,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,qGACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,UAAU,EAAE,WAAW,GAAG,SAAyB;AAC1D,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,kGACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAA+B;AACtE,QACE,oBAAC,KAAD;EACE,aAAU;EACV,WAAW,GACT,4KACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,YAAY,EAAE,WAAW,GAAG,SAA2B;AAC9D,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,2BAA2B,UAAU;EACnD,GAAI;EACJ,CAAA;;AAIN,SAAS,WAAW,EAAE,WAAW,GAAG,SAA0B;AAC5D,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,sDACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,WAAW,EAAE,WAAW,GAAG,SAA0B;AAC5D,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,sDACA,UACD;EACD,GAAI;EACJ,CAAA"}
1
+ {"version":3,"file":"item.js","names":[],"sources":["../src/item.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"./lib/utils\"\nimport { Separator } from \"./separator\"\n\nconst itemVariants = cva(\n \"[a]:hover:bg-secondary rounded-md border text-sm w-full group/item focus-visible:border-focus focus-visible:ring-focus/50 flex items-center flex-wrap outline-none transition-colors duration-200 focus-visible:ring-3 [a]:transition-colors\",\n {\n variants: {\n variant: {\n default: \"border-transparent\",\n outline: \"border-line\",\n muted: \"bg-secondary/50 border-transparent\",\n },\n size: {\n default: \"gap-2.5 px-3 py-2.5\",\n sm: \"gap-2.5 px-3 py-2.5\",\n xs: \"gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n }\n)\n\nconst itemMediaVariants = cva(\n \"gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start flex shrink-0 items-center justify-center [&_svg]:pointer-events-none\",\n {\n variants: {\n variant: {\n default: \"bg-transparent\",\n icon: \"[&_svg:not([class*='size-'])]:size-4\",\n image: \"size-10 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n }\n)\n\ntype ItemGroupProps = React.ComponentProps<\"div\">\ntype ItemSeparatorProps = React.ComponentProps<typeof Separator>\ntype ItemProps = useRender.ComponentProps<\"div\"> & VariantProps<typeof itemVariants>\ntype ItemMediaProps = React.ComponentProps<\"div\"> & VariantProps<typeof itemMediaVariants>\ntype ItemContentProps = React.ComponentProps<\"div\">\ntype ItemTitleProps = React.ComponentProps<\"div\">\ntype ItemDescriptionProps = React.ComponentProps<\"p\">\ntype ItemActionsProps = React.ComponentProps<\"div\">\ntype ItemHeaderProps = React.ComponentProps<\"div\">\ntype ItemFooterProps = React.ComponentProps<\"div\">\n\nfunction ItemGroup({ className, ...props }: ItemGroupProps) {\n return (\n <div\n data-slot=\"item-group\"\n className={cn(\n \"group/item-group flex w-full flex-col gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction ItemSeparator({ className, ...props }: ItemSeparatorProps) {\n return (\n <Separator\n data-slot=\"item-separator\"\n orientation=\"horizontal\"\n className={cn(\"my-2\", className)}\n {...props}\n />\n )\n}\n\nfunction Item({\n className,\n variant = \"default\",\n size = \"default\",\n render,\n ...props\n}: ItemProps) {\n return useRender({\n defaultTagName: \"div\",\n props: mergeProps<\"div\">(\n {\n className: cn(itemVariants({ variant, size, className })),\n },\n props\n ),\n render,\n state: {\n slot: \"item\",\n variant,\n size,\n },\n })\n}\n\nfunction ItemMedia({ className, variant = \"default\", ...props }: ItemMediaProps) {\n return (\n <div\n data-slot=\"item-media\"\n data-variant={variant}\n className={cn(itemMediaVariants({ variant, className }))}\n {...props}\n />\n )\n}\n\nfunction ItemContent({ className, ...props }: ItemContentProps) {\n return (\n <div\n data-slot=\"item-content\"\n className={cn(\n \"flex flex-1 flex-col gap-1 group-data-[size=xs]/item:gap-0 [&+[data-slot=item-content]]:flex-none\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction ItemTitle({ className, ...props }: ItemTitleProps) {\n return (\n <div\n data-slot=\"item-title\"\n className={cn(\n \"line-clamp-1 flex w-fit items-center gap-2 text-sm leading-snug font-medium underline-offset-4\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction ItemDescription({ className, ...props }: ItemDescriptionProps) {\n return (\n <p\n data-slot=\"item-description\"\n className={cn(\n \"text-muted [&>a:hover]:text-primary line-clamp-2 text-left text-sm leading-normal font-normal group-data-[size=xs]/item:text-xs [&>a]:underline [&>a]:underline-offset-4\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction ItemActions({ className, ...props }: ItemActionsProps) {\n return (\n <div\n data-slot=\"item-actions\"\n className={cn(\"flex items-center gap-2\", className)}\n {...props}\n />\n )\n}\n\nfunction ItemHeader({ className, ...props }: ItemHeaderProps) {\n return (\n <div\n data-slot=\"item-header\"\n className={cn(\n \"flex basis-full items-center justify-between gap-2\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction ItemFooter({ className, ...props }: ItemFooterProps) {\n return (\n <div\n data-slot=\"item-footer\"\n className={cn(\n \"flex basis-full items-center justify-between gap-2\",\n className\n )}\n {...props}\n />\n )\n}\n\nexport {\n Item,\n ItemMedia,\n ItemContent,\n ItemActions,\n ItemGroup,\n ItemSeparator,\n ItemTitle,\n ItemDescription,\n ItemHeader,\n ItemFooter,\n}\n"],"mappings":";;;;;;;;;AAUA,MAAM,eAAe,IACnB,gPACA;CACE,UAAU;EACR,SAAS;GACP,SAAS;GACT,SAAS;GACT,OAAO;GACR;EACD,MAAM;GACJ,SAAS;GACT,IAAI;GACJ,IAAI;GACL;EACF;CACD,iBAAiB;EACf,SAAS;EACT,MAAM;EACP;CACF,CACF;AAED,MAAM,oBAAoB,IACxB,kMACA;CACE,UAAU,EACR,SAAS;EACP,SAAS;EACT,MAAM;EACN,OAAO;EACR,EACF;CACD,iBAAiB,EACf,SAAS,WACV;CACF,CACF;AAaD,SAAS,UAAU,EAAE,WAAW,GAAG,SAAyB;AAC1D,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,mGACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,cAAc,EAAE,WAAW,GAAG,SAA6B;AAClE,QACE,oBAAC,WAAD;EACE,aAAU;EACV,aAAY;EACZ,WAAW,GAAG,QAAQ,UAAU;EAChC,GAAI;EACJ,CAAA;;AAIN,SAAS,KAAK,EACZ,WACA,UAAU,WACV,OAAO,WACP,QACA,GAAG,SACS;AACZ,QAAO,UAAU;EACf,gBAAgB;EAChB,OAAO,WACL,EACE,WAAW,GAAG,aAAa;GAAE;GAAS;GAAM;GAAW,CAAC,CAAC,EAC1D,EACD,MACD;EACD;EACA,OAAO;GACL,MAAM;GACN;GACA;GACD;EACF,CAAC;;AAGJ,SAAS,UAAU,EAAE,WAAW,UAAU,WAAW,GAAG,SAAyB;AAC/E,QACE,oBAAC,OAAD;EACE,aAAU;EACV,gBAAc;EACd,WAAW,GAAG,kBAAkB;GAAE;GAAS;GAAW,CAAC,CAAC;EACxD,GAAI;EACJ,CAAA;;AAIN,SAAS,YAAY,EAAE,WAAW,GAAG,SAA2B;AAC9D,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,qGACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,UAAU,EAAE,WAAW,GAAG,SAAyB;AAC1D,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,kGACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAA+B;AACtE,QACE,oBAAC,KAAD;EACE,aAAU;EACV,WAAW,GACT,4KACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,YAAY,EAAE,WAAW,GAAG,SAA2B;AAC9D,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,2BAA2B,UAAU;EACnD,GAAI;EACJ,CAAA;;AAIN,SAAS,WAAW,EAAE,WAAW,GAAG,SAA0B;AAC5D,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,sDACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,WAAW,EAAE,WAAW,GAAG,SAA0B;AAC5D,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,sDACA,UACD;EACD,GAAI;EACJ,CAAA"}
@@ -1 +1 @@
1
- {"version":3,"file":"masonry.d.ts","names":[],"sources":["../src/masonry.tsx"],"mappings":";;;;;KAaK,YAAA,GAAe,KAAA,CAAM,cAAA;EACxB,OAAA;EACA,WAAA;EACA,GAAA;AAAA;AAAA,KAGG,gBAAA,GAAmB,IAAA,CAAK,eAAA;EAC3B,IAAA;EACA,QAAA,GAAW,KAAA,CAAM,SAAA;AAAA;AAAA,iBAGV,OAAA,CAAA;EACP,OAAA;EACA,WAAA;EACA,GAAA;EACA,SAAA;EACA,QAAA;EAAA,GACG;AAAA,GACF,YAAA,GAAY,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAyNN,WAAA,CAAA;EACP,SAAA;EACA,IAAA;EACA,QAAA;EAAA,GACG;AAAA,GACF,gBAAA,GAAgB,oBAAA,CAAA,GAAA,CAAA,OAAA"}
1
+ {"version":3,"file":"masonry.d.ts","names":[],"sources":["../src/masonry.tsx"],"mappings":";;;;;KAaK,YAAA,GAAe,KAAA,CAAM,cAAA;EACxB,OAAA;EACA,WAAA;EACA,GAAA;AAAA;AAAA,KAGG,gBAAA,GAAmB,IAAA,CAAK,eAAA;EAC3B,IAAA;EACA,QAAA,GAAW,KAAA,CAAM,SAAA;AAAA;AAAA,iBAGV,OAAA,CAAA;EACP,OAAA;EACA,WAAA;EACA,GAAA;EACA,SAAA;EACA,QAAA;EAAA,GACG;AAAA,GACF,YAAA,GAAY,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBA0NN,WAAA,CAAA;EACP,SAAA;EACA,IAAA;EACA,QAAA;EAAA,GACG;AAAA,GACF,gBAAA,GAAgB,oBAAA,CAAA,GAAA,CAAA,OAAA"}
package/dist/masonry.js CHANGED
@@ -146,6 +146,7 @@ function FeaturedBadge() {
146
146
  return /* @__PURE__ */ jsx("span", {
147
147
  "data-slot": "masonry-badge",
148
148
  className: "absolute top-2 right-2 z-10 flex size-5 items-center justify-center pointer-events-none",
149
+ role: "img",
149
150
  "aria-label": "Featured",
150
151
  children: /* @__PURE__ */ jsx(StarIcon, {
151
152
  width: 10,
@@ -1 +1 @@
1
- {"version":3,"file":"masonry.js","names":[],"sources":["../src/masonry.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\n\nimport { AnimatePresence, type HTMLMotionProps, motion } from \"motion/react\"\n\nimport { StarIcon } from \"./lib/internal-icons\"\nimport { cn } from \"./lib/utils\"\n\nconst STAGGER_STEP = 0.05 // 50ms between each item's enter animation\n\nconst MasonryStaggerContext = React.createContext<(() => number) | null>(null)\n\ntype MasonryProps = React.ComponentProps<\"div\"> & {\n columns?: number\n columnWidth?: number\n gap?: number\n}\n\ntype MasonryItemProps = Omit<HTMLMotionProps<\"div\">, \"children\"> & {\n span?: number\n children?: React.ReactNode\n}\n\nfunction Masonry({\n columns,\n columnWidth,\n gap = 4,\n className,\n children,\n ...props\n}: MasonryProps) {\n const containerRef = React.useRef<HTMLDivElement>(null)\n const rafRef = React.useRef<number>(0)\n const staggerCounterRef = React.useRef(0)\n\n // Reset counter each render so new items in a batch get fresh 0-based indices\n staggerCounterRef.current = 0\n\n const getStaggerIndex = React.useCallback(\n () => staggerCounterRef.current++,\n [],\n )\n\n React.useLayoutEffect(() => {\n const container = containerRef.current\n if (!container) return\n\n const remPx = parseFloat(\n getComputedStyle(document.documentElement).fontSize,\n )\n const gapPx = gap * 0.25 * remPx\n\n function reflow() {\n const allChildren = Array.from(container!.children) as HTMLElement[]\n // Skip exiting items — they keep their position during exit animation\n const items = allChildren.filter((el) => el.dataset.exiting == null)\n\n if (items.length === 0) {\n container!.style.removeProperty(\"height\")\n return\n }\n\n const containerWidth = container!.clientWidth\n if (containerWidth === 0) return\n\n let colCount: number\n if (columns != null) {\n colCount = Math.max(1, columns)\n } else if (columnWidth != null) {\n colCount = Math.max(\n 1,\n Math.floor((containerWidth + gapPx) / (columnWidth + gapPx)),\n )\n } else {\n colCount = Math.max(\n 1,\n Math.floor((containerWidth + gapPx) / (240 + gapPx)),\n )\n }\n\n // Single column: use normal flow with gap\n if (colCount <= 1) {\n container!.style.removeProperty(\"height\")\n container!.style.display = \"flex\"\n container!.style.flexDirection = \"column\"\n container!.style.gap = `${gapPx}px`\n for (const item of items) {\n item.style.removeProperty(\"position\")\n item.style.removeProperty(\"top\")\n item.style.removeProperty(\"left\")\n item.style.removeProperty(\"width\")\n }\n return\n }\n\n // Multi-column: clear single-column styles\n container!.style.removeProperty(\"display\")\n container!.style.removeProperty(\"flex-direction\")\n container!.style.removeProperty(\"gap\")\n\n const colWidth = (containerWidth - (colCount - 1) * gapPx) / colCount\n const columnBottoms = new Array<number>(colCount).fill(0)\n\n // Partition items: spanning (top-pinned) vs regular\n const topItems: { el: HTMLElement; span: number }[] = []\n const regularItems: HTMLElement[] = []\n for (const item of items) {\n const raw = parseInt(item.dataset.span || \"1\", 10)\n if (raw > 1) {\n topItems.push({ el: item, span: Math.min(raw, colCount) })\n } else {\n regularItems.push(item)\n }\n }\n\n // First pass: set width on all items for correct height measurement\n for (const { el, span } of topItems) {\n el.style.position = \"absolute\"\n el.style.width = `${span * colWidth + (span - 1) * gapPx}px`\n }\n for (const item of regularItems) {\n item.style.position = \"absolute\"\n item.style.width = `${colWidth}px`\n }\n\n // Second pass: batch-read heights\n const topHeights: number[] = []\n for (const { el } of topItems) {\n topHeights.push(el.offsetHeight)\n }\n const regularHeights: number[] = []\n for (const item of regularItems) {\n regularHeights.push(item.offsetHeight)\n }\n\n // Third pass: place top items at Y=0, left-to-right\n let nextCol = 0\n for (let i = 0; i < topItems.length; i++) {\n const { el, span } = topItems[i]!\n const s = Math.min(span, colCount - nextCol)\n\n const x = nextCol * (colWidth + gapPx)\n el.style.top = \"0px\"\n el.style.left = `${x}px`\n // Recalculate width if span was clamped\n if (s !== span) {\n el.style.width = `${s * colWidth + (s - 1) * gapPx}px`\n }\n\n const bottom = topHeights[i]! + gapPx\n for (let c = nextCol; c < nextCol + s; c++) {\n columnBottoms[c] = bottom\n }\n\n nextCol += s\n }\n\n // Fourth pass: place regular items in shortest column\n for (let i = 0; i < regularItems.length; i++) {\n let shortestCol = 0\n for (let c = 1; c < colCount; c++) {\n if (columnBottoms[c]! < columnBottoms[shortestCol]!) {\n shortestCol = c\n }\n }\n\n const x = shortestCol * (colWidth + gapPx)\n const y = columnBottoms[shortestCol]!\n\n regularItems[i]!.style.top = `${y}px`\n regularItems[i]!.style.left = `${x}px`\n\n columnBottoms[shortestCol] = y + regularHeights[i]! + gapPx\n }\n\n const maxBottom = Math.max(...columnBottoms) - gapPx\n container!.style.height = `${Math.max(0, maxBottom)}px`\n }\n\n function scheduleReflow() {\n cancelAnimationFrame(rafRef.current)\n rafRef.current = requestAnimationFrame(reflow)\n }\n\n reflow()\n\n const ro = new ResizeObserver(scheduleReflow)\n ro.observe(container)\n\n const mo = new MutationObserver(scheduleReflow)\n mo.observe(container, {\n childList: true,\n subtree: true,\n attributes: true,\n attributeFilter: [\"data-exiting\", \"data-span\"],\n })\n\n // Detect image/media loads that change item heights\n container.addEventListener(\"load\", scheduleReflow, true)\n\n return () => {\n cancelAnimationFrame(rafRef.current)\n ro.disconnect()\n mo.disconnect()\n container.removeEventListener(\"load\", scheduleReflow, true)\n container.style.removeProperty(\"height\")\n container.style.removeProperty(\"display\")\n container.style.removeProperty(\"flex-direction\")\n container.style.removeProperty(\"gap\")\n const items = Array.from(container.children) as HTMLElement[]\n for (const item of items) {\n item.style.removeProperty(\"position\")\n item.style.removeProperty(\"top\")\n item.style.removeProperty(\"left\")\n item.style.removeProperty(\"width\")\n }\n }\n }, [columns, columnWidth, gap])\n\n return (\n <MasonryStaggerContext.Provider value={getStaggerIndex}>\n <div\n ref={containerRef}\n data-slot=\"masonry\"\n className={cn(\"relative\", className)}\n {...props}\n >\n <AnimatePresence>\n {children}\n </AnimatePresence>\n </div>\n </MasonryStaggerContext.Provider>\n )\n}\n\nfunction FeaturedBadge() {\n return (\n <span\n data-slot=\"masonry-badge\"\n className=\"absolute top-2 right-2 z-10 flex size-5 items-center justify-center pointer-events-none\"\n aria-label=\"Featured\"\n >\n <StarIcon width={10} height={10} fill=\"currentColor\" aria-hidden />\n </span>\n )\n}\n\nfunction MasonryItem({\n className,\n span,\n children,\n ...props\n}: MasonryItemProps) {\n const isSpanned = span != null && span > 1\n const getStaggerIndex = React.useContext(MasonryStaggerContext)\n\n // Capture stagger index once on mount — useState initializer runs exactly once\n const [staggerDelay] = React.useState(() =>\n getStaggerIndex ? getStaggerIndex() * STAGGER_STEP : 0,\n )\n\n return (\n <motion.div\n data-slot=\"masonry-item\"\n data-span={isSpanned ? span : undefined}\n className={cn(\"relative\", className)}\n initial={{\n opacity: 0,\n y: 10,\n filter: \"blur(8px)\"\n }}\n animate={{\n opacity: 1,\n y: 0,\n filter: \"blur(0px)\"\n }}\n transition={{\n type: \"spring\",\n stiffness: 100,\n damping: 10,\n delay: staggerDelay,\n }}\n exit={{\n opacity: 0,\n scale: 1.2,\n filter: \"blur(8px)\",\n }}\n {...props}\n >\n {children}\n {isSpanned && <FeaturedBadge />}\n </motion.div>\n )\n}\n\nexport { Masonry, MasonryItem }\n"],"mappings":"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"}
1
+ {"version":3,"file":"masonry.js","names":[],"sources":["../src/masonry.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\n\nimport { AnimatePresence, type HTMLMotionProps, motion } from \"motion/react\"\n\nimport { StarIcon } from \"./lib/internal-icons\"\nimport { cn } from \"./lib/utils\"\n\nconst STAGGER_STEP = 0.05 // 50ms between each item's enter animation\n\nconst MasonryStaggerContext = React.createContext<(() => number) | null>(null)\n\ntype MasonryProps = React.ComponentProps<\"div\"> & {\n columns?: number\n columnWidth?: number\n gap?: number\n}\n\ntype MasonryItemProps = Omit<HTMLMotionProps<\"div\">, \"children\"> & {\n span?: number\n children?: React.ReactNode\n}\n\nfunction Masonry({\n columns,\n columnWidth,\n gap = 4,\n className,\n children,\n ...props\n}: MasonryProps) {\n const containerRef = React.useRef<HTMLDivElement>(null)\n const rafRef = React.useRef<number>(0)\n const staggerCounterRef = React.useRef(0)\n\n // Reset counter each render so new items in a batch get fresh 0-based indices\n staggerCounterRef.current = 0\n\n const getStaggerIndex = React.useCallback(\n () => staggerCounterRef.current++,\n [],\n )\n\n React.useLayoutEffect(() => {\n const container = containerRef.current\n if (!container) return\n\n const remPx = parseFloat(\n getComputedStyle(document.documentElement).fontSize,\n )\n const gapPx = gap * 0.25 * remPx\n\n function reflow() {\n const allChildren = Array.from(container!.children) as HTMLElement[]\n // Skip exiting items — they keep their position during exit animation\n const items = allChildren.filter((el) => el.dataset.exiting == null)\n\n if (items.length === 0) {\n container!.style.removeProperty(\"height\")\n return\n }\n\n const containerWidth = container!.clientWidth\n if (containerWidth === 0) return\n\n let colCount: number\n if (columns != null) {\n colCount = Math.max(1, columns)\n } else if (columnWidth != null) {\n colCount = Math.max(\n 1,\n Math.floor((containerWidth + gapPx) / (columnWidth + gapPx)),\n )\n } else {\n colCount = Math.max(\n 1,\n Math.floor((containerWidth + gapPx) / (240 + gapPx)),\n )\n }\n\n // Single column: use normal flow with gap\n if (colCount <= 1) {\n container!.style.removeProperty(\"height\")\n container!.style.display = \"flex\"\n container!.style.flexDirection = \"column\"\n container!.style.gap = `${gapPx}px`\n for (const item of items) {\n item.style.removeProperty(\"position\")\n item.style.removeProperty(\"top\")\n item.style.removeProperty(\"left\")\n item.style.removeProperty(\"width\")\n }\n return\n }\n\n // Multi-column: clear single-column styles\n container!.style.removeProperty(\"display\")\n container!.style.removeProperty(\"flex-direction\")\n container!.style.removeProperty(\"gap\")\n\n const colWidth = (containerWidth - (colCount - 1) * gapPx) / colCount\n const columnBottoms = new Array<number>(colCount).fill(0)\n\n // Partition items: spanning (top-pinned) vs regular\n const topItems: { el: HTMLElement; span: number }[] = []\n const regularItems: HTMLElement[] = []\n for (const item of items) {\n const raw = parseInt(item.dataset.span || \"1\", 10)\n if (raw > 1) {\n topItems.push({ el: item, span: Math.min(raw, colCount) })\n } else {\n regularItems.push(item)\n }\n }\n\n // First pass: set width on all items for correct height measurement\n for (const { el, span } of topItems) {\n el.style.position = \"absolute\"\n el.style.width = `${span * colWidth + (span - 1) * gapPx}px`\n }\n for (const item of regularItems) {\n item.style.position = \"absolute\"\n item.style.width = `${colWidth}px`\n }\n\n // Second pass: batch-read heights\n const topHeights: number[] = []\n for (const { el } of topItems) {\n topHeights.push(el.offsetHeight)\n }\n const regularHeights: number[] = []\n for (const item of regularItems) {\n regularHeights.push(item.offsetHeight)\n }\n\n // Third pass: place top items at Y=0, left-to-right\n let nextCol = 0\n for (let i = 0; i < topItems.length; i++) {\n const { el, span } = topItems[i]!\n const s = Math.min(span, colCount - nextCol)\n\n const x = nextCol * (colWidth + gapPx)\n el.style.top = \"0px\"\n el.style.left = `${x}px`\n // Recalculate width if span was clamped\n if (s !== span) {\n el.style.width = `${s * colWidth + (s - 1) * gapPx}px`\n }\n\n const bottom = topHeights[i]! + gapPx\n for (let c = nextCol; c < nextCol + s; c++) {\n columnBottoms[c] = bottom\n }\n\n nextCol += s\n }\n\n // Fourth pass: place regular items in shortest column\n for (let i = 0; i < regularItems.length; i++) {\n let shortestCol = 0\n for (let c = 1; c < colCount; c++) {\n if (columnBottoms[c]! < columnBottoms[shortestCol]!) {\n shortestCol = c\n }\n }\n\n const x = shortestCol * (colWidth + gapPx)\n const y = columnBottoms[shortestCol]!\n\n regularItems[i]!.style.top = `${y}px`\n regularItems[i]!.style.left = `${x}px`\n\n columnBottoms[shortestCol] = y + regularHeights[i]! + gapPx\n }\n\n const maxBottom = Math.max(...columnBottoms) - gapPx\n container!.style.height = `${Math.max(0, maxBottom)}px`\n }\n\n function scheduleReflow() {\n cancelAnimationFrame(rafRef.current)\n rafRef.current = requestAnimationFrame(reflow)\n }\n\n reflow()\n\n const ro = new ResizeObserver(scheduleReflow)\n ro.observe(container)\n\n const mo = new MutationObserver(scheduleReflow)\n mo.observe(container, {\n childList: true,\n subtree: true,\n attributes: true,\n attributeFilter: [\"data-exiting\", \"data-span\"],\n })\n\n // Detect image/media loads that change item heights\n container.addEventListener(\"load\", scheduleReflow, true)\n\n return () => {\n cancelAnimationFrame(rafRef.current)\n ro.disconnect()\n mo.disconnect()\n container.removeEventListener(\"load\", scheduleReflow, true)\n container.style.removeProperty(\"height\")\n container.style.removeProperty(\"display\")\n container.style.removeProperty(\"flex-direction\")\n container.style.removeProperty(\"gap\")\n const items = Array.from(container.children) as HTMLElement[]\n for (const item of items) {\n item.style.removeProperty(\"position\")\n item.style.removeProperty(\"top\")\n item.style.removeProperty(\"left\")\n item.style.removeProperty(\"width\")\n }\n }\n }, [columns, columnWidth, gap])\n\n return (\n <MasonryStaggerContext.Provider value={getStaggerIndex}>\n <div\n ref={containerRef}\n data-slot=\"masonry\"\n className={cn(\"relative\", className)}\n {...props}\n >\n <AnimatePresence>\n {children}\n </AnimatePresence>\n </div>\n </MasonryStaggerContext.Provider>\n )\n}\n\nfunction FeaturedBadge() {\n return (\n <span\n data-slot=\"masonry-badge\"\n className=\"absolute top-2 right-2 z-10 flex size-5 items-center justify-center pointer-events-none\"\n role=\"img\"\n aria-label=\"Featured\"\n >\n <StarIcon width={10} height={10} fill=\"currentColor\" aria-hidden />\n </span>\n )\n}\n\nfunction MasonryItem({\n className,\n span,\n children,\n ...props\n}: MasonryItemProps) {\n const isSpanned = span != null && span > 1\n const getStaggerIndex = React.useContext(MasonryStaggerContext)\n\n // Capture stagger index once on mount — useState initializer runs exactly once\n const [staggerDelay] = React.useState(() =>\n getStaggerIndex ? getStaggerIndex() * STAGGER_STEP : 0,\n )\n\n return (\n <motion.div\n data-slot=\"masonry-item\"\n data-span={isSpanned ? span : undefined}\n className={cn(\"relative\", className)}\n initial={{\n opacity: 0,\n y: 10,\n filter: \"blur(8px)\"\n }}\n animate={{\n opacity: 1,\n y: 0,\n filter: \"blur(0px)\"\n }}\n transition={{\n type: \"spring\",\n stiffness: 100,\n damping: 10,\n delay: staggerDelay,\n }}\n exit={{\n opacity: 0,\n scale: 1.2,\n filter: \"blur(8px)\",\n }}\n {...props}\n >\n {children}\n {isSpanned && <FeaturedBadge />}\n </motion.div>\n )\n}\n\nexport { Masonry, MasonryItem }\n"],"mappings":"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"}
@@ -7,7 +7,8 @@ type PaginationProps = React.ComponentProps<"nav">;
7
7
  type PaginationContentProps = React.ComponentProps<"ul">;
8
8
  type PaginationItemProps = React.ComponentProps<"li">;
9
9
  type PaginationLinkProps = {
10
- isActive?: boolean;
10
+ isActive?: boolean; /** Marks the link disabled — aria-disabled, removed from tab order, non-interactive. */
11
+ disabled?: boolean;
11
12
  } & Pick<React.ComponentProps<typeof Button>, "size"> & React.ComponentProps<"a">;
12
13
  type PaginationPreviousProps = PaginationLinkProps & {
13
14
  text?: string;
@@ -28,6 +29,7 @@ declare function PaginationItem(props: PaginationItemProps): _$react_jsx_runtime
28
29
  declare function PaginationLink({
29
30
  className,
30
31
  isActive,
32
+ disabled,
31
33
  size,
32
34
  ...props
33
35
  }: PaginationLinkProps): _$react_jsx_runtime0.JSX.Element;
@@ -1 +1 @@
1
- {"version":3,"file":"pagination.d.ts","names":[],"sources":["../src/pagination.tsx"],"mappings":";;;;;KAWK,eAAA,GAAkB,KAAA,CAAM,cAAA;AAAA,KAExB,sBAAA,GAAyB,KAAA,CAAM,cAAA;AAAA,KAE/B,mBAAA,GAAsB,KAAA,CAAM,cAAA;AAAA,KAE5B,mBAAA;EACH,QAAA;AAAA,IACE,IAAA,CAAK,KAAA,CAAM,cAAA,QAAsB,MAAA,aACnC,KAAA,CAAM,cAAA;AAAA,KAEH,uBAAA,GAA0B,mBAAA;EAC7B,IAAA;AAAA;AAAA,KAGG,mBAAA,GAAsB,mBAAA;EACzB,IAAA;AAAA;AAAA,KAGG,uBAAA,GAA0B,KAAA,CAAM,cAAA;AAAA,iBAE5B,UAAA,CAAA;EAAa,SAAA;EAAA,GAAc;AAAA,GAAS,eAAA,GAAe,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAenD,iBAAA,CAAA;EAAoB,SAAA;EAAA,GAAc;AAAA,GAAS,sBAAA,GAAsB,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAajE,cAAA,CAAe,KAAA,EAAO,mBAAA,GAAmB,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAIzC,cAAA,CAAA;EACP,SAAA;EACA,QAAA;EACA,IAAA;EAAA,GACG;AAAA,GACF,mBAAA,GAAmB,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAkBb,kBAAA,CAAA;EACP,SAAA;EACA,IAAA;EAAA,GACG;AAAA,GACF,uBAAA,GAAuB,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAcjB,cAAA,CAAA;EACP,SAAA;EACA,IAAA;EAAA,GACG;AAAA,GACF,mBAAA,GAAmB,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAcb,kBAAA,CAAA;EAAqB,SAAA;EAAA,GAAc;AAAA,GAAS,uBAAA,GAAuB,oBAAA,CAAA,GAAA,CAAA,OAAA"}
1
+ {"version":3,"file":"pagination.d.ts","names":[],"sources":["../src/pagination.tsx"],"mappings":";;;;;KAWK,eAAA,GAAkB,KAAA,CAAM,cAAA;AAAA,KAExB,sBAAA,GAAyB,KAAA,CAAM,cAAA;AAAA,KAE/B,mBAAA,GAAsB,KAAA,CAAM,cAAA;AAAA,KAE5B,mBAAA;EACH,QAAA;EAEA,QAAA;AAAA,IACE,IAAA,CAAK,KAAA,CAAM,cAAA,QAAsB,MAAA,aACnC,KAAA,CAAM,cAAA;AAAA,KAEH,uBAAA,GAA0B,mBAAA;EAC7B,IAAA;AAAA;AAAA,KAGG,mBAAA,GAAsB,mBAAA;EACzB,IAAA;AAAA;AAAA,KAGG,uBAAA,GAA0B,KAAA,CAAM,cAAA;AAAA,iBAE5B,UAAA,CAAA;EAAa,SAAA;EAAA,GAAc;AAAA,GAAS,eAAA,GAAe,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAenD,iBAAA,CAAA;EAAoB,SAAA;EAAA,GAAc;AAAA,GAAS,sBAAA,GAAsB,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAajE,cAAA,CAAe,KAAA,EAAO,mBAAA,GAAmB,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAIzC,cAAA,CAAA;EACP,SAAA;EACA,QAAA;EACA,QAAA;EACA,IAAA;EAAA,GACG;AAAA,GACF,mBAAA,GAAmB,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAoBb,kBAAA,CAAA;EACP,SAAA;EACA,IAAA;EAAA,GACG;AAAA,GACF,uBAAA,GAAuB,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAcjB,cAAA,CAAA;EACP,SAAA;EACA,IAAA;EAAA,GACG;AAAA,GACF,mBAAA,GAAmB,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAcb,kBAAA,CAAA;EAAqB,SAAA;EAAA,GAAc;AAAA,GAAS,uBAAA,GAAuB,oBAAA,CAAA,GAAA,CAAA,OAAA"}
@@ -26,15 +26,17 @@ function PaginationItem(props) {
26
26
  ...props
27
27
  });
28
28
  }
29
- function PaginationLink({ className, isActive, size = "icon", ...props }) {
29
+ function PaginationLink({ className, isActive, disabled, size = "icon", ...props }) {
30
30
  return /* @__PURE__ */ jsx(Button, {
31
31
  variant: isActive ? "outline" : "ghost",
32
32
  size,
33
- className,
33
+ className: cn(disabled && "pointer-events-none opacity-50", className),
34
34
  render: /* @__PURE__ */ jsx("a", {
35
35
  "aria-current": isActive ? "page" : void 0,
36
+ "aria-disabled": disabled || void 0,
36
37
  "data-slot": "pagination-link",
37
38
  "data-active": isActive || void 0,
39
+ tabIndex: disabled ? -1 : void 0,
38
40
  ...props
39
41
  })
40
42
  });
@@ -65,7 +67,6 @@ function PaginationNext({ className, text = "Next", ...props }) {
65
67
  }
66
68
  function PaginationEllipsis({ className, ...props }) {
67
69
  return /* @__PURE__ */ jsxs("span", {
68
- "aria-hidden": true,
69
70
  "data-slot": "pagination-ellipsis",
70
71
  className: cn("flex size-8 items-center justify-center [&_svg:not([class*='size-'])]:size-4", className),
71
72
  ...props,
@@ -1 +1 @@
1
- {"version":3,"file":"pagination.js","names":[],"sources":["../src/pagination.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport { Button } from \"./button\"\nimport {\n ChevronLeftIcon,\n ChevronRightIcon,\n EllipsisIcon,\n} from \"./lib/internal-icons\"\n\nimport { cn } from \"./lib/utils\"\n\ntype PaginationProps = React.ComponentProps<\"nav\">\n\ntype PaginationContentProps = React.ComponentProps<\"ul\">\n\ntype PaginationItemProps = React.ComponentProps<\"li\">\n\ntype PaginationLinkProps = {\n isActive?: boolean\n} & Pick<React.ComponentProps<typeof Button>, \"size\"> &\n React.ComponentProps<\"a\">\n\ntype PaginationPreviousProps = PaginationLinkProps & {\n text?: string\n}\n\ntype PaginationNextProps = PaginationLinkProps & {\n text?: string\n}\n\ntype PaginationEllipsisProps = React.ComponentProps<\"span\">\n\nfunction Pagination({ className, ...props }: PaginationProps) {\n return (\n <nav\n role=\"navigation\"\n aria-label=\"pagination\"\n data-slot=\"pagination\"\n className={cn(\n \"mx-auto flex w-full justify-center\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction PaginationContent({ className, ...props }: PaginationContentProps) {\n return (\n <ul\n data-slot=\"pagination-content\"\n className={cn(\n \"flex items-center gap-0.5\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction PaginationItem(props: PaginationItemProps) {\n return <li data-slot=\"pagination-item\" {...props} />\n}\n\nfunction PaginationLink({\n className,\n isActive,\n size = \"icon\",\n ...props\n}: PaginationLinkProps) {\n return (\n <Button\n variant={isActive ? \"outline\" : \"ghost\"}\n size={size}\n className={className}\n render={\n <a\n aria-current={isActive ? \"page\" : undefined}\n data-slot=\"pagination-link\"\n data-active={isActive || undefined}\n {...props}\n />\n }\n />\n )\n}\n\nfunction PaginationPrevious({\n className,\n text = \"Previous\",\n ...props\n}: PaginationPreviousProps) {\n return (\n <PaginationLink\n aria-label=\"Go to previous page\"\n size=\"default\"\n className={cn(\"pl-1.5!\", className)}\n {...props}\n >\n <ChevronLeftIcon data-icon=\"inline-start\" />\n <span className=\"hidden sm:block\">{text}</span>\n </PaginationLink>\n )\n}\n\nfunction PaginationNext({\n className,\n text = \"Next\",\n ...props\n}: PaginationNextProps) {\n return (\n <PaginationLink\n aria-label=\"Go to next page\"\n size=\"default\"\n className={cn(\"pr-1.5!\", className)}\n {...props}\n >\n <span className=\"hidden sm:block\">{text}</span>\n <ChevronRightIcon data-icon=\"inline-end\" />\n </PaginationLink>\n )\n}\n\nfunction PaginationEllipsis({ className, ...props }: PaginationEllipsisProps) {\n return (\n <span\n aria-hidden\n data-slot=\"pagination-ellipsis\"\n className={cn(\n \"flex size-8 items-center justify-center [&_svg:not([class*='size-'])]:size-4\",\n className,\n )}\n {...props}\n >\n <EllipsisIcon />\n <span className=\"sr-only\">More pages</span>\n </span>\n )\n}\n\nexport {\n Pagination,\n PaginationContent,\n PaginationEllipsis,\n PaginationItem,\n PaginationLink,\n PaginationNext,\n PaginationPrevious,\n}\n"],"mappings":";;;;;;AAgCA,SAAS,WAAW,EAAE,WAAW,GAAG,SAA0B;AAC5D,QACE,oBAAC,OAAD;EACE,MAAK;EACL,cAAW;EACX,aAAU;EACV,WAAW,GACT,sCACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,kBAAkB,EAAE,WAAW,GAAG,SAAiC;AAC1E,QACE,oBAAC,MAAD;EACE,aAAU;EACV,WAAW,GACT,6BACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,eAAe,OAA4B;AAClD,QAAO,oBAAC,MAAD;EAAI,aAAU;EAAkB,GAAI;EAAS,CAAA;;AAGtD,SAAS,eAAe,EACtB,WACA,UACA,OAAO,QACP,GAAG,SACmB;AACtB,QACE,oBAAC,QAAD;EACE,SAAS,WAAW,YAAY;EAC1B;EACK;EACX,QACE,oBAAC,KAAD;GACE,gBAAc,WAAW,SAAS,KAAA;GAClC,aAAU;GACV,eAAa,YAAY,KAAA;GACzB,GAAI;GACJ,CAAA;EAEJ,CAAA;;AAIN,SAAS,mBAAmB,EAC1B,WACA,OAAO,YACP,GAAG,SACuB;AAC1B,QACE,qBAAC,gBAAD;EACE,cAAW;EACX,MAAK;EACL,WAAW,GAAG,WAAW,UAAU;EACnC,GAAI;YAJN,CAME,oBAAC,iBAAD,EAAiB,aAAU,gBAAiB,CAAA,EAC5C,oBAAC,QAAD;GAAM,WAAU;aAAmB;GAAY,CAAA,CAChC;;;AAIrB,SAAS,eAAe,EACtB,WACA,OAAO,QACP,GAAG,SACmB;AACtB,QACE,qBAAC,gBAAD;EACE,cAAW;EACX,MAAK;EACL,WAAW,GAAG,WAAW,UAAU;EACnC,GAAI;YAJN,CAME,oBAAC,QAAD;GAAM,WAAU;aAAmB;GAAY,CAAA,EAC/C,oBAAC,kBAAD,EAAkB,aAAU,cAAe,CAAA,CAC5B;;;AAIrB,SAAS,mBAAmB,EAAE,WAAW,GAAG,SAAkC;AAC5E,QACE,qBAAC,QAAD;EACE,eAAA;EACA,aAAU;EACV,WAAW,GACT,gFACA,UACD;EACD,GAAI;YAPN,CASE,oBAAC,cAAD,EAAgB,CAAA,EAChB,oBAAC,QAAD;GAAM,WAAU;aAAU;GAAiB,CAAA,CACtC"}
1
+ {"version":3,"file":"pagination.js","names":[],"sources":["../src/pagination.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport { Button } from \"./button\"\nimport {\n ChevronLeftIcon,\n ChevronRightIcon,\n EllipsisIcon,\n} from \"./lib/internal-icons\"\n\nimport { cn } from \"./lib/utils\"\n\ntype PaginationProps = React.ComponentProps<\"nav\">\n\ntype PaginationContentProps = React.ComponentProps<\"ul\">\n\ntype PaginationItemProps = React.ComponentProps<\"li\">\n\ntype PaginationLinkProps = {\n isActive?: boolean\n /** Marks the link disabled — aria-disabled, removed from tab order, non-interactive. */\n disabled?: boolean\n} & Pick<React.ComponentProps<typeof Button>, \"size\"> &\n React.ComponentProps<\"a\">\n\ntype PaginationPreviousProps = PaginationLinkProps & {\n text?: string\n}\n\ntype PaginationNextProps = PaginationLinkProps & {\n text?: string\n}\n\ntype PaginationEllipsisProps = React.ComponentProps<\"span\">\n\nfunction Pagination({ className, ...props }: PaginationProps) {\n return (\n <nav\n role=\"navigation\"\n aria-label=\"pagination\"\n data-slot=\"pagination\"\n className={cn(\n \"mx-auto flex w-full justify-center\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction PaginationContent({ className, ...props }: PaginationContentProps) {\n return (\n <ul\n data-slot=\"pagination-content\"\n className={cn(\n \"flex items-center gap-0.5\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction PaginationItem(props: PaginationItemProps) {\n return <li data-slot=\"pagination-item\" {...props} />\n}\n\nfunction PaginationLink({\n className,\n isActive,\n disabled,\n size = \"icon\",\n ...props\n}: PaginationLinkProps) {\n return (\n <Button\n variant={isActive ? \"outline\" : \"ghost\"}\n size={size}\n className={cn(disabled && \"pointer-events-none opacity-50\", className)}\n render={\n <a\n aria-current={isActive ? \"page\" : undefined}\n aria-disabled={disabled || undefined}\n data-slot=\"pagination-link\"\n data-active={isActive || undefined}\n tabIndex={disabled ? -1 : undefined}\n {...props}\n />\n }\n />\n )\n}\n\nfunction PaginationPrevious({\n className,\n text = \"Previous\",\n ...props\n}: PaginationPreviousProps) {\n return (\n <PaginationLink\n aria-label=\"Go to previous page\"\n size=\"default\"\n className={cn(\"pl-1.5!\", className)}\n {...props}\n >\n <ChevronLeftIcon data-icon=\"inline-start\" />\n <span className=\"hidden sm:block\">{text}</span>\n </PaginationLink>\n )\n}\n\nfunction PaginationNext({\n className,\n text = \"Next\",\n ...props\n}: PaginationNextProps) {\n return (\n <PaginationLink\n aria-label=\"Go to next page\"\n size=\"default\"\n className={cn(\"pr-1.5!\", className)}\n {...props}\n >\n <span className=\"hidden sm:block\">{text}</span>\n <ChevronRightIcon data-icon=\"inline-end\" />\n </PaginationLink>\n )\n}\n\nfunction PaginationEllipsis({ className, ...props }: PaginationEllipsisProps) {\n return (\n <span\n data-slot=\"pagination-ellipsis\"\n className={cn(\n \"flex size-8 items-center justify-center [&_svg:not([class*='size-'])]:size-4\",\n className,\n )}\n {...props}\n >\n <EllipsisIcon />\n <span className=\"sr-only\">More pages</span>\n </span>\n )\n}\n\nexport {\n Pagination,\n PaginationContent,\n PaginationEllipsis,\n PaginationItem,\n PaginationLink,\n PaginationNext,\n PaginationPrevious,\n}\n"],"mappings":";;;;;;AAkCA,SAAS,WAAW,EAAE,WAAW,GAAG,SAA0B;AAC5D,QACE,oBAAC,OAAD;EACE,MAAK;EACL,cAAW;EACX,aAAU;EACV,WAAW,GACT,sCACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,kBAAkB,EAAE,WAAW,GAAG,SAAiC;AAC1E,QACE,oBAAC,MAAD;EACE,aAAU;EACV,WAAW,GACT,6BACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,eAAe,OAA4B;AAClD,QAAO,oBAAC,MAAD;EAAI,aAAU;EAAkB,GAAI;EAAS,CAAA;;AAGtD,SAAS,eAAe,EACtB,WACA,UACA,UACA,OAAO,QACP,GAAG,SACmB;AACtB,QACE,oBAAC,QAAD;EACE,SAAS,WAAW,YAAY;EAC1B;EACN,WAAW,GAAG,YAAY,kCAAkC,UAAU;EACtE,QACE,oBAAC,KAAD;GACE,gBAAc,WAAW,SAAS,KAAA;GAClC,iBAAe,YAAY,KAAA;GAC3B,aAAU;GACV,eAAa,YAAY,KAAA;GACzB,UAAU,WAAW,KAAK,KAAA;GAC1B,GAAI;GACJ,CAAA;EAEJ,CAAA;;AAIN,SAAS,mBAAmB,EAC1B,WACA,OAAO,YACP,GAAG,SACuB;AAC1B,QACE,qBAAC,gBAAD;EACE,cAAW;EACX,MAAK;EACL,WAAW,GAAG,WAAW,UAAU;EACnC,GAAI;YAJN,CAME,oBAAC,iBAAD,EAAiB,aAAU,gBAAiB,CAAA,EAC5C,oBAAC,QAAD;GAAM,WAAU;aAAmB;GAAY,CAAA,CAChC;;;AAIrB,SAAS,eAAe,EACtB,WACA,OAAO,QACP,GAAG,SACmB;AACtB,QACE,qBAAC,gBAAD;EACE,cAAW;EACX,MAAK;EACL,WAAW,GAAG,WAAW,UAAU;EACnC,GAAI;YAJN,CAME,oBAAC,QAAD;GAAM,WAAU;aAAmB;GAAY,CAAA,EAC/C,oBAAC,kBAAD,EAAkB,aAAU,cAAe,CAAA,CAC5B;;;AAIrB,SAAS,mBAAmB,EAAE,WAAW,GAAG,SAAkC;AAC5E,QACE,qBAAC,QAAD;EACE,aAAU;EACV,WAAW,GACT,gFACA,UACD;EACD,GAAI;YANN,CAQE,oBAAC,cAAD,EAAgB,CAAA,EAChB,oBAAC,QAAD;GAAM,WAAU;aAAU;GAAiB,CAAA,CACtC"}
@@ -1 +1 @@
1
- {"version":3,"file":"sidebar.d.ts","names":[],"sources":["../src/sidebar.tsx"],"mappings":"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"}
1
+ {"version":3,"file":"sidebar.d.ts","names":[],"sources":["../src/sidebar.tsx"],"mappings":";;;;;;;;;;;;;;;AAyBkB;;;;;;;;iBAyBT,aAAA,CAAc,IAAA,WAAwB,MAAA,aACrC,IAAA;AAAa;;;;;AAiBA;;;;;;AAjBA,iBAgBd,mBAAA,CAAoB,GAAA,aACnB,IAAA;AAAA,KASL,mBAAA;EACH,KAAA;EACA,IAAA;EACA,OAAA,GAAU,IAAA;EACV,UAAA;EACA,aAAA,GAAgB,IAAA;EAChB,QAAA;EACA,aAAA;AAAA;AAAA,iBAKO,UAAA,CAAA,GAAU,mBAAA;AAAA,iBASV,eAAA,CAAA;EACP,WAAA;EACA,IAAA,EAAM,QAAA;EACN,YAAA,EAAc,WAAA;EACd,OAAA;EACA,gBAAA;EACA,gBAAA;EACA,SAAA;EACA,KAAA;EACA,QAAA;EAAA,GACG;AAAA,GACF,KAAA,CAAM,cAAA;EACP,WAAA;EACA,IAAA;EACA,YAAA,IAAgB,IAAA;EAdM;;;;;;;;;;;;EA2BtB,OAAA,IAAW,IAAA,oBAKZ;EAHC,gBAAA,mBA5BA;EA8BA,gBAAA;AAAA,IACD,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAmFQ,OAAA,CAAA;EACP,IAAA;EACA,OAAA;EACA,WAAA;EACA,SAAA;EACA,QAAA;EAAA,GACG;AAAA,GACF,KAAA,CAAM,cAAA;EACP,IAAA;EACA,OAAA;EACA,WAAA;AAAA,IACD,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBA8FQ,cAAA,CAAA;EACP,SAAA;EACA,OAAA;EAAA,GACG;AAAA,GACF,KAAA,CAAM,cAAA,QAAsB,MAAA,IAAO,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAsB7B,WAAA,CAAA;EAAc,SAAA;EAAA,GAAc;AAAA,GAAS,KAAA,CAAM,cAAA,aAAwB,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAwBnE,YAAA,CAAA;EAAe,SAAA;EAAA,GAAc;AAAA,GAAS,KAAA,CAAM,cAAA,WAAsB,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAalE,YAAA,CAAA;EACP,SAAA;EAAA,GACG;AAAA,GACF,KAAA,CAAM,cAAA,QAAsB,KAAA,IAAM,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAU5B,aAAA,CAAA;EAAgB,SAAA;EAAA,GAAc;AAAA,GAAS,KAAA,CAAM,cAAA,UAAqB,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAUlE,aAAA,CAAA;EAAgB,SAAA;EAAA,GAAc;AAAA,GAAS,KAAA,CAAM,cAAA,UAAqB,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAUlE,gBAAA,CAAA;EACP,SAAA;EAAA,GACG;AAAA,GACF,KAAA,CAAM,cAAA,QAAsB,SAAA,IAAU,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAUhC,cAAA,CAAA;EAAiB,SAAA;EAAW,KAAA;EAAA,GAAU;AAAA,GAAS,KAAA,CAAM,cAAA,UAAqB,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAkB1E,YAAA,CAAA;EAAe,SAAA;EAAA,GAAc;AAAA,GAAS,KAAA,CAAM,cAAA,UAAqB,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAajE,iBAAA,CAAA;EACP,SAAA;EACA,MAAA;EAAA,GACG;AAAA,GACF,SAAA,CAAU,cAAA,UAAwB,KAAA,CAAM,cAAA,UAAqB,KAAA,CAAA,YAAA,mBAAA,KAAA,CAAA,qBAAA;AAAA,iBAmBvD,kBAAA,CAAA;EACP,SAAA;EACA,MAAA;EAAA,GACG;AAAA,GACF,SAAA,CAAU,cAAA,aAA2B,KAAA,CAAM,cAAA,aAAwB,KAAA,CAAA,YAAA,mBAAA,KAAA,CAAA,qBAAA;AAAA,iBAmB7D,mBAAA,CAAA;EACP,SAAA;EAAA,GACG;AAAA,GACF,KAAA,CAAM,cAAA,UAAqB,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAUrB,WAAA,CAAA;EAAc,SAAA;EAAA,GAAc;AAAA,GAAS,KAAA,CAAM,cAAA,SAAoB,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAU/D,eAAA,CAAA;EAAkB,SAAA;EAAA,GAAc;AAAA,GAAS,KAAA,CAAM,cAAA,SAAoB,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,cAUtE,yBAAA,GAAyB,KAAA;;;IAmB9B,iCAAA,CAAA,SAAA;AAAA,iBAEQ,iBAAA,CAAA;EACP,MAAA;EACA,QAAA;EACA,OAAA;EACA,IAAA;EACA,OAAA;EACA,SAAA;EAAA,GACG;AAAA,GACF,SAAA,CAAU,cAAA,aACX,KAAA,CAAM,cAAA;EACJ,QAAA;EACA,OAAA,YAAmB,KAAA,CAAM,cAAA,QAAsB,cAAA;AAAA,IAC7C,YAAA,QAAoB,yBAAA,IAA0B,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAiD3C,iBAAA,CAAA;EACP,SAAA;EACA,MAAA;EACA,WAAA;EAAA,GACG;AAAA,GACF,SAAA,CAAU,cAAA,aACX,KAAA,CAAM,cAAA;EACJ,WAAA;AAAA,IACD,KAAA,CAAA,YAAA,mBAAA,KAAA,CAAA,qBAAA;AAAA,iBAqBM,gBAAA,CAAA;EACP,SAAA;EAAA,GACG;AAAA,GACF,KAAA,CAAM,cAAA,UAAqB,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAarB,mBAAA,CAAA;EACP,SAAA;EACA,QAAA;EAAA,GACG;AAAA,GACF,KAAA,CAAM,cAAA;EACP,QAAA;AAAA,IACD,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBA0BQ,cAAA,CAAA;EAAiB,SAAA;EAAA,GAAc;AAAA,GAAS,KAAA,CAAM,cAAA,SAAoB,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAUlE,kBAAA,CAAA;EACP,SAAA;EAAA,GACG;AAAA,GACF,KAAA,CAAM,cAAA,SAAoB,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAUpB,oBAAA,CAAA;EACP,MAAA;EACA,IAAA;EACA,QAAA;EACA,SAAA;EAAA,GACG;AAAA,GACF,SAAA,CAAU,cAAA,QACX,KAAA,CAAM,cAAA;EACJ,IAAA;EACA,QAAA;AAAA,IACD,KAAA,CAAA,YAAA,mBAAA,KAAA,CAAA,qBAAA"}
package/dist/sidebar.js CHANGED
@@ -178,9 +178,10 @@ function Sidebar({ side = "left", variant = "sidebar", collapsible = "offcanvas"
178
178
  });
179
179
  }
180
180
  function SidebarTrigger({ className, onClick, ...props }) {
181
- const { toggleSidebar } = useSidebar();
181
+ const { toggleSidebar, open } = useSidebar();
182
182
  return /* @__PURE__ */ jsxs(Button, {
183
183
  "data-slot": "sidebar-trigger",
184
+ "aria-expanded": open,
184
185
  variant: "ghost",
185
186
  size: "icon-sm",
186
187
  className: cn(className),
@@ -264,7 +265,7 @@ function SidebarGroup({ className, ...props }) {
264
265
  function SidebarGroupLabel({ className, render, ...props }) {
265
266
  return useRender({
266
267
  defaultTagName: "div",
267
- props: mergeProps({ className: cn("text-contrast/70 ring-focus h-8 rounded-md px-2 text-xs font-medium group-data-[collapsible=icon]:hidden focus-visible:ring-2 [&>svg]:size-4 flex shrink-0 items-center outline-hidden [&>svg]:shrink-0", className) }, props),
268
+ props: mergeProps({ className: cn("text-contrast/70 ring-focus/50 h-8 rounded-md px-2 text-xs font-medium group-data-[collapsible=icon]:hidden focus-visible:ring-3 [&>svg]:size-4 flex shrink-0 items-center outline-hidden [&>svg]:shrink-0", className) }, props),
268
269
  render,
269
270
  state: { slot: "sidebar-group-label" }
270
271
  });
@@ -272,7 +273,7 @@ function SidebarGroupLabel({ className, render, ...props }) {
272
273
  function SidebarGroupAction({ className, render, ...props }) {
273
274
  return useRender({
274
275
  defaultTagName: "button",
275
- props: mergeProps({ className: cn("text-contrast ring-focus hover:bg-primary hover:text-white absolute top-1.5 right-3 w-5 rounded-sm p-0 focus-visible:ring-2 [&>svg]:size-4 flex aspect-square items-center justify-center outline-hidden transition-transform [&>svg]:shrink-0 after:absolute after:-inset-2 md:after:hidden group-data-[collapsible=icon]:hidden", className) }, props),
276
+ props: mergeProps({ className: cn("text-contrast ring-focus/50 hover:bg-primary hover:text-white absolute top-1.5 right-3 w-5 rounded-sm p-0 focus-visible:ring-3 [&>svg]:size-4 flex aspect-square items-center justify-center outline-hidden transition-transform [&>svg]:shrink-0 after:absolute after:-inset-2 md:after:hidden group-data-[collapsible=icon]:hidden", className) }, props),
276
277
  render,
277
278
  state: { slot: "sidebar-group-action" }
278
279
  });
@@ -298,7 +299,7 @@ function SidebarMenuItem({ className, ...props }) {
298
299
  ...props
299
300
  });
300
301
  }
301
- const sidebarMenuButtonVariants = cva("ring-focus hover:bg-primary hover:text-white active:bg-primary active:text-white data-active:bg-primary data-active:text-white data-open:hover:bg-primary data-open:hover:text-white gap-2 rounded-md p-2 text-left text-sm transition-[width,height,padding] group-has-data-[slot=sidebar-menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:w-full group-data-[collapsible=icon]:aspect-square group-data-[collapsible=icon]:h-11 focus-visible:ring-2 data-active:font-medium peer/menu-button flex w-full items-center overflow-hidden outline-hidden group/menu-button disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&_svg]:shrink-0", {
302
+ const sidebarMenuButtonVariants = cva("ring-focus/50 hover:bg-primary hover:text-white active:bg-primary active:text-white data-active:bg-primary data-active:text-white data-open:hover:bg-primary data-open:hover:text-white gap-2 rounded-md p-2 text-left text-sm transition-[width,height,padding] group-has-data-[slot=sidebar-menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:w-full group-data-[collapsible=icon]:aspect-square group-data-[collapsible=icon]:h-11 focus-visible:ring-3 data-active:font-medium peer/menu-button flex w-full items-center overflow-hidden outline-hidden group/menu-button disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&_svg]:shrink-0", {
302
303
  variants: {
303
304
  variant: {
304
305
  default: "hover:bg-primary hover:text-white",
@@ -343,7 +344,7 @@ function SidebarMenuButton({ render, isActive = false, variant = "default", size
343
344
  function SidebarMenuAction({ className, render, showOnHover = false, ...props }) {
344
345
  return useRender({
345
346
  defaultTagName: "button",
346
- props: mergeProps({ className: cn("text-contrast ring-focus hover:bg-primary hover:text-white peer-hover/menu-button:text-white absolute top-1/2 -translate-y-1/2 right-1 aspect-square w-5 rounded-sm p-0 focus-visible:ring-2 [&>svg]:size-4 flex items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>svg]:shrink-0", showOnHover && "peer-data-active/menu-button:text-white group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-open:opacity-100 md:opacity-0", className) }, props),
347
+ props: mergeProps({ className: cn("text-contrast ring-focus/50 hover:bg-primary hover:text-white peer-hover/menu-button:text-white absolute top-1/2 -translate-y-1/2 right-1 aspect-square w-5 rounded-sm p-0 focus-visible:ring-3 [&>svg]:size-4 flex items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>svg]:shrink-0", showOnHover && "peer-data-active/menu-button:text-white group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-open:opacity-100 md:opacity-0", className) }, props),
347
348
  render,
348
349
  state: { slot: "sidebar-menu-action" }
349
350
  });
@@ -386,7 +387,7 @@ function SidebarMenuSubItem({ className, ...props }) {
386
387
  function SidebarMenuSubButton({ render, size = "md", isActive = false, className, ...props }) {
387
388
  return useRender({
388
389
  defaultTagName: "a",
389
- props: mergeProps({ className: cn("text-contrast ring-focus hover:bg-primary hover:text-white active:bg-primary active:text-white [&>svg]:text-white data-active:bg-primary data-active:text-white h-7 gap-2 rounded-md px-2 focus-visible:ring-2 data-[size=md]:text-sm data-[size=sm]:text-xs [&>svg]:size-4 flex min-w-0 -translate-x-px items-center overflow-hidden outline-hidden group-data-[collapsible=icon]:hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:shrink-0", className) }, props),
390
+ props: mergeProps({ className: cn("text-contrast ring-focus/50 hover:bg-primary hover:text-white active:bg-primary active:text-white [&>svg]:text-white data-active:bg-primary data-active:text-white h-7 gap-2 rounded-md px-2 focus-visible:ring-3 data-[size=md]:text-sm data-[size=sm]:text-xs [&>svg]:size-4 flex min-w-0 -translate-x-px items-center overflow-hidden outline-hidden group-data-[collapsible=icon]:hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:shrink-0", className) }, props),
390
391
  render,
391
392
  state: {
392
393
  slot: "sidebar-menu-sub-button",
@@ -1 +1 @@
1
- {"version":3,"file":"sidebar.js","names":["CollapsiblePrimitive"],"sources":["../src/sidebar.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { Collapsible as CollapsiblePrimitive } from \"@base-ui/react/collapsible\"\nimport { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"./lib/utils\"\nimport { Button } from \"./button\"\nimport {\n Drawer,\n DrawerContent,\n DrawerDescription,\n DrawerHeader,\n DrawerTitle,\n} from \"./drawer\"\nimport { Input } from \"./input\"\nimport { Separator } from \"./separator\"\nimport { Skeleton } from \"./skeleton\"\nimport {\n Tooltip,\n TooltipContent,\n TooltipProvider,\n TooltipTrigger,\n} from \"./tooltip\"\nimport { useIsMobile } from \"./hooks/use-mobile\"\nimport { SidebarPanelIcon } from \"./lib/internal-icons\"\n\nconst SIDEBAR_WIDTH = \"16rem\"\nconst SIDEBAR_WIDTH_MOBILE = \"18rem\"\nconst SIDEBAR_WIDTH_ICON = \"3rem\"\nconst SIDEBAR_DEFAULT_KEYBOARD_SHORTCUT = \"b\"\n\n// ---------------------------------------------------------------------------\n// Persistence helpers — ready-made functions for the `persist` prop.\n// ---------------------------------------------------------------------------\n\n/**\n * Persist sidebar state to a cookie.\n *\n * @param name - Cookie name. Defaults to `\"sidebar-state\"`.\n * @param maxAge - Cookie max-age in seconds. Defaults to 7 days (604 800).\n *\n * @example\n * ```tsx\n * <SidebarProvider persist={cookiePersist()}>\n * <SidebarProvider persist={cookiePersist(\"my-sidebar\", 86400)}>\n * ```\n */\nfunction cookiePersist(name = \"sidebar-state\", maxAge = 60 * 60 * 24 * 7) {\n return (open: boolean) => {\n document.cookie = `${name}=${open}; path=/; max-age=${maxAge}`\n }\n}\n\n/**\n * Persist sidebar state to localStorage.\n *\n * @param key - Storage key. Defaults to `\"sidebar-state\"`.\n *\n * @example\n * ```tsx\n * <SidebarProvider persist={localStoragePersist()}>\n * <SidebarProvider persist={localStoragePersist(\"my-sidebar\")}>\n * ```\n */\nfunction localStoragePersist(key = \"sidebar-state\") {\n return (open: boolean) => {\n try {\n localStorage.setItem(key, String(open))\n } catch {\n // Storage full or unavailable (SSR, private browsing) — silently ignore.\n }\n }\n}\n\ntype SidebarContextProps = {\n state: \"expanded\" | \"collapsed\"\n open: boolean\n setOpen: (open: boolean) => void\n openMobile: boolean\n setOpenMobile: (open: boolean) => void\n isMobile: boolean\n toggleSidebar: () => void\n}\n\nconst SidebarContext = React.createContext<SidebarContextProps | null>(null)\n\nfunction useSidebar() {\n const context = React.useContext(SidebarContext)\n if (!context) {\n throw new Error(\"useSidebar must be used within a SidebarProvider.\")\n }\n\n return context\n}\n\nfunction SidebarProvider({\n defaultOpen = true,\n open: openProp,\n onOpenChange: setOpenProp,\n persist,\n keyboardShortcut = SIDEBAR_DEFAULT_KEYBOARD_SHORTCUT,\n mobileBreakpoint,\n className,\n style,\n children,\n ...props\n}: React.ComponentProps<\"div\"> & {\n defaultOpen?: boolean\n open?: boolean\n onOpenChange?: (open: boolean) => void\n /**\n * Optional callback to persist open state. Called on every toggle.\n * Use the built-in helpers `cookiePersist()` or `localStoragePersist()`,\n * or provide a custom function (e.g. server action).\n *\n * @example\n * ```tsx\n * <SidebarProvider persist={cookiePersist()}>\n * <SidebarProvider persist={localStoragePersist(\"sidebar\")}>\n * <SidebarProvider persist={(open) => saveToServer(open)}>\n * ```\n */\n persist?: (open: boolean) => void\n /** Key for Cmd/Ctrl+key toggle shortcut. Defaults to \"b\". Pass `false` to disable. */\n keyboardShortcut?: string | false\n /** Breakpoint (px) below which the sidebar uses a mobile drawer. Defaults to 768. */\n mobileBreakpoint?: number\n}) {\n const isMobile = useIsMobile(mobileBreakpoint)\n const [openMobile, setOpenMobile] = React.useState(false)\n\n const [_open, _setOpen] = React.useState(defaultOpen)\n const open = openProp ?? _open\n const persistRef = React.useRef(persist)\n persistRef.current = persist\n\n const setOpen = React.useCallback(\n (value: boolean | ((value: boolean) => boolean)) => {\n const openState = typeof value === \"function\" ? value(open) : value\n if (setOpenProp) {\n setOpenProp(openState)\n } else {\n _setOpen(openState)\n }\n\n persistRef.current?.(openState)\n },\n [setOpenProp, open]\n )\n\n const toggleSidebar = React.useCallback(() => {\n return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)\n }, [isMobile, setOpen, setOpenMobile])\n\n React.useEffect(() => {\n if (keyboardShortcut === false) return\n\n const handleKeyDown = (event: KeyboardEvent) => {\n if (\n event.key === keyboardShortcut &&\n (event.metaKey || event.ctrlKey)\n ) {\n event.preventDefault()\n toggleSidebar()\n }\n }\n\n window.addEventListener(\"keydown\", handleKeyDown)\n return () => window.removeEventListener(\"keydown\", handleKeyDown)\n }, [toggleSidebar, keyboardShortcut])\n\n // On mobile the sidebar renders as a full-width drawer, so always treat as expanded.\n const state = isMobile || open ? \"expanded\" : \"collapsed\"\n\n const contextValue = React.useMemo<SidebarContextProps>(\n () => ({\n state,\n open,\n setOpen,\n isMobile,\n openMobile,\n setOpenMobile,\n toggleSidebar,\n }),\n [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]\n )\n\n return (\n <SidebarContext.Provider value={contextValue}>\n <div\n data-slot=\"sidebar-wrapper\"\n style={\n {\n \"--sidebar-width\": SIDEBAR_WIDTH,\n \"--sidebar-width-icon\": SIDEBAR_WIDTH_ICON,\n ...style,\n } as React.CSSProperties\n }\n className={cn(\n \"group/sidebar-wrapper has-data-[variant=inset]:bg-surface flex min-h-svh w-full\",\n className\n )}\n {...props}\n >\n {children}\n </div>\n </SidebarContext.Provider>\n )\n}\n\nfunction Sidebar({\n side = \"left\",\n variant = \"sidebar\",\n collapsible = \"offcanvas\",\n className,\n children,\n ...props\n}: React.ComponentProps<\"div\"> & {\n side?: \"left\" | \"right\"\n variant?: \"sidebar\" | \"floating\" | \"inset\"\n collapsible?: \"offcanvas\" | \"icon\" | \"none\"\n}) {\n const { isMobile, state, open, setOpen, openMobile, setOpenMobile } = useSidebar()\n\n if (collapsible === \"none\") {\n return (\n <div\n data-slot=\"sidebar\"\n className={cn(\n \"bg-surface text-contrast flex h-full w-(--sidebar-width) flex-col\",\n className\n )}\n {...props}\n >\n {children}\n </div>\n )\n }\n\n if (isMobile) {\n return (\n <Drawer\n open={openMobile}\n onOpenChange={setOpenMobile}\n swipeDirection={side}\n >\n <DrawerContent\n data-slot=\"sidebar\"\n data-mobile=\"true\"\n className=\"bg-surface text-contrast w-(--sidebar-width) max-w-none rounded-none border-0 p-0 sm:max-w-none\"\n style={\n {\n \"--sidebar-width\": SIDEBAR_WIDTH_MOBILE,\n } as React.CSSProperties\n }\n >\n <DrawerHeader className=\"sr-only\">\n <DrawerTitle>Sidebar</DrawerTitle>\n <DrawerDescription>Displays the mobile sidebar.</DrawerDescription>\n </DrawerHeader>\n <div className=\"flex h-full w-full flex-col\">{children}</div>\n </DrawerContent>\n </Drawer>\n )\n }\n\n return (\n <CollapsiblePrimitive.Root\n open={open}\n onOpenChange={setOpen}\n className=\"group peer text-contrast hidden md:block\"\n data-collapsible={state === \"collapsed\" ? collapsible : \"\"}\n data-variant={variant}\n data-side={side}\n data-slot=\"sidebar\"\n >\n {/* This is what handles the sidebar gap on desktop */}\n <div\n data-slot=\"sidebar-gap\"\n className={cn(\n \"relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear\",\n \"group-data-[collapsible=offcanvas]:w-0\",\n \"group-data-[side=right]:rotate-180\",\n variant === \"floating\" || variant === \"inset\"\n ? \"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]\"\n : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon)\"\n )}\n />\n <div\n data-slot=\"sidebar-container\"\n className={cn(\n \"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex\",\n side === \"left\"\n ? \"left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]\"\n : \"right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]\",\n variant === \"floating\" || variant === \"inset\"\n ? \"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]\"\n : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon) after:absolute after:inset-y-0 after:w-px after:bg-line\" + (side === \"left\" ? \" after:right-0\" : \" after:left-0\"),\n className\n )}\n {...props}\n >\n <TooltipProvider delay={0} closeDelay={300}>\n <div\n data-slot=\"sidebar-inner\"\n className=\"bg-surface group-data-[variant=floating]:ring-line group-data-[variant=floating]:rounded-md group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 flex size-full flex-col\"\n >\n {children}\n </div>\n </TooltipProvider>\n </div>\n </CollapsiblePrimitive.Root>\n )\n}\n\nfunction SidebarTrigger({\n className,\n onClick,\n ...props\n}: React.ComponentProps<typeof Button>) {\n const { toggleSidebar } = useSidebar()\n\n return (\n <Button\n data-slot=\"sidebar-trigger\"\n variant=\"ghost\"\n size=\"icon-sm\"\n className={cn(className)}\n onClick={(event) => {\n onClick?.(event)\n toggleSidebar()\n }}\n {...props}\n >\n <SidebarPanelIcon />\n <span className=\"sr-only\">Toggle Sidebar</span>\n </Button>\n )\n}\n\nfunction SidebarRail({ className, ...props }: React.ComponentProps<\"button\">) {\n const { toggleSidebar } = useSidebar()\n\n return (\n <button\n data-slot=\"sidebar-rail\"\n aria-label=\"Toggle Sidebar\"\n tabIndex={-1}\n onClick={toggleSidebar}\n title=\"Toggle Sidebar\"\n className={cn(\n \"hover:after:bg-line absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-[left,right,transform] duration-200 ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex\",\n \"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize\",\n \"[[data-side=left][data-closed]_&]:cursor-e-resize [[data-side=right][data-closed]_&]:cursor-w-resize\",\n \"hover:group-data-[collapsible=offcanvas]:bg-surface group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full\",\n \"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2\",\n \"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction SidebarInset({ className, ...props }: React.ComponentProps<\"main\">) {\n return (\n <main\n data-slot=\"sidebar-inset\"\n className={cn(\n \"bg-foundation md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-lg md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[closed]:ml-2 relative flex min-w-0 w-full flex-1 flex-col\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction SidebarInput({\n className,\n ...props\n}: React.ComponentProps<typeof Input>) {\n return (\n <Input\n data-slot=\"sidebar-input\"\n className={cn(\"bg-foundation h-8 w-full shadow-none\", className)}\n {...props}\n />\n )\n}\n\nfunction SidebarHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"sidebar-header\"\n className={cn(\"gap-2 p-2 flex flex-col\", className)}\n {...props}\n />\n )\n}\n\nfunction SidebarFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"sidebar-footer\"\n className={cn(\"gap-2 p-2 flex flex-col\", className)}\n {...props}\n />\n )\n}\n\nfunction SidebarSeparator({\n className,\n ...props\n}: React.ComponentProps<typeof Separator>) {\n return (\n <Separator\n data-slot=\"sidebar-separator\"\n className={cn(\"bg-line mx-2 data-[orientation=horizontal]:w-auto\", className)}\n {...props}\n />\n )\n}\n\nfunction SidebarContent({ className, style, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"sidebar-content\"\n className={cn(\n \"gap-1 flex min-h-0 flex-1 flex-col overflow-auto scrollbar-none group-data-[collapsible=icon]:overflow-x-hidden\",\n className\n )}\n style={{\n maskImage: \"linear-gradient(to bottom, black calc(100% - 44px), transparent 100%)\",\n WebkitMaskImage: \"linear-gradient(to bottom, black calc(100% - 44px), transparent 100%)\",\n ...style,\n }}\n {...props}\n />\n )\n}\n\nfunction SidebarGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"sidebar-group\"\n className={cn(\n \"px-2 first:pt-2 last:pb-2 relative flex w-full min-w-0 flex-col\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction SidebarGroupLabel({\n className,\n render,\n ...props\n}: useRender.ComponentProps<\"div\"> & React.ComponentProps<\"div\">) {\n return useRender({\n defaultTagName: \"div\",\n props: mergeProps<\"div\">(\n {\n className: cn(\n \"text-contrast/70 ring-focus h-8 rounded-md px-2 text-xs font-medium group-data-[collapsible=icon]:hidden focus-visible:ring-2 [&>svg]:size-4 flex shrink-0 items-center outline-hidden [&>svg]:shrink-0\",\n className\n ),\n },\n props\n ),\n render,\n state: {\n slot: \"sidebar-group-label\",\n },\n })\n}\n\nfunction SidebarGroupAction({\n className,\n render,\n ...props\n}: useRender.ComponentProps<\"button\"> & React.ComponentProps<\"button\">) {\n return useRender({\n defaultTagName: \"button\",\n props: mergeProps<\"button\">(\n {\n className: cn(\n \"text-contrast ring-focus hover:bg-primary hover:text-white absolute top-1.5 right-3 w-5 rounded-sm p-0 focus-visible:ring-2 [&>svg]:size-4 flex aspect-square items-center justify-center outline-hidden transition-transform [&>svg]:shrink-0 after:absolute after:-inset-2 md:after:hidden group-data-[collapsible=icon]:hidden\",\n className\n ),\n },\n props\n ),\n render,\n state: {\n slot: \"sidebar-group-action\",\n },\n })\n}\n\nfunction SidebarGroupContent({\n className,\n ...props\n}: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"sidebar-group-content\"\n className={cn(\"text-sm w-full\", className)}\n {...props}\n />\n )\n}\n\nfunction SidebarMenu({ className, ...props }: React.ComponentProps<\"ul\">) {\n return (\n <ul\n data-slot=\"sidebar-menu\"\n className={cn(\"gap-1 flex w-full min-w-0 flex-col\", className)}\n {...props}\n />\n )\n}\n\nfunction SidebarMenuItem({ className, ...props }: React.ComponentProps<\"li\">) {\n return (\n <li\n data-slot=\"sidebar-menu-item\"\n className={cn(\"group/menu-item relative has-data-[slot=sidebar-menu-sub]:mb-[-0.25rem]\", className)}\n {...props}\n />\n )\n}\n\nconst sidebarMenuButtonVariants = cva(\n \"ring-focus hover:bg-primary hover:text-white active:bg-primary active:text-white data-active:bg-primary data-active:text-white data-open:hover:bg-primary data-open:hover:text-white gap-2 rounded-md p-2 text-left text-sm transition-[width,height,padding] group-has-data-[slot=sidebar-menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:w-full group-data-[collapsible=icon]:aspect-square group-data-[collapsible=icon]:h-11 focus-visible:ring-2 data-active:font-medium peer/menu-button flex w-full items-center overflow-hidden outline-hidden group/menu-button disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&_svg]:shrink-0\",\n {\n variants: {\n variant: {\n default: \"hover:bg-primary hover:text-white\",\n outline: \"bg-foundation hover:bg-primary hover:text-white ring-1 ring-line hover:ring-focus\",\n },\n size: {\n default: \"h-11 text-sm\",\n sm: \"h-8 text-xs\",\n lg: \"h-12 text-sm\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n }\n)\n\nfunction SidebarMenuButton({\n render,\n isActive = false,\n variant = \"default\",\n size = \"default\",\n tooltip,\n className,\n ...props\n}: useRender.ComponentProps<\"button\"> &\n React.ComponentProps<\"button\"> & {\n isActive?: boolean\n tooltip?: string | React.ComponentProps<typeof TooltipContent>\n } & VariantProps<typeof sidebarMenuButtonVariants>) {\n const { isMobile, state } = useSidebar()\n\n if (process.env.NODE_ENV === \"development\" && tooltip && render) {\n console.warn(\n \"[SidebarMenuButton] Both `render` and `tooltip` were provided. \" +\n \"When `tooltip` is set, the button is wrapped in a TooltipTrigger and the `render` prop is ignored.\"\n )\n }\n\n const comp = useRender({\n defaultTagName: \"button\",\n props: mergeProps<\"button\">(\n {\n className: cn(sidebarMenuButtonVariants({ variant, size }), className),\n },\n props\n ),\n render: !tooltip ? render : TooltipTrigger,\n state: {\n slot: \"sidebar-menu-button\",\n size,\n active: isActive,\n },\n })\n\n if (!tooltip) {\n return comp\n }\n\n if (typeof tooltip === \"string\") {\n tooltip = {\n children: tooltip,\n }\n }\n\n return (\n <Tooltip>\n {comp}\n <TooltipContent\n side=\"right\"\n align=\"center\"\n hidden={state !== \"collapsed\" || isMobile}\n {...tooltip}\n />\n </Tooltip>\n )\n}\n\nfunction SidebarMenuAction({\n className,\n render,\n showOnHover = false,\n ...props\n}: useRender.ComponentProps<\"button\"> &\n React.ComponentProps<\"button\"> & {\n showOnHover?: boolean\n }) {\n return useRender({\n defaultTagName: \"button\",\n props: mergeProps<\"button\">(\n {\n className: cn(\n \"text-contrast ring-focus hover:bg-primary hover:text-white peer-hover/menu-button:text-white absolute top-1/2 -translate-y-1/2 right-1 aspect-square w-5 rounded-sm p-0 focus-visible:ring-2 [&>svg]:size-4 flex items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>svg]:shrink-0\",\n showOnHover &&\n \"peer-data-active/menu-button:text-white group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-open:opacity-100 md:opacity-0\",\n className\n ),\n },\n props\n ),\n render,\n state: {\n slot: \"sidebar-menu-action\",\n },\n })\n}\n\nfunction SidebarMenuBadge({\n className,\n ...props\n}: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"sidebar-menu-badge\"\n className={cn(\n \"text-contrast peer-hover/menu-button:text-white peer-data-active/menu-button:text-white pointer-events-none absolute right-1 top-1/2 -translate-y-1/2 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none group-data-[collapsible=icon]:hidden\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction SidebarMenuSkeleton({\n className,\n showIcon = false,\n ...props\n}: React.ComponentProps<\"div\"> & {\n showIcon?: boolean\n}) {\n const [width] = React.useState(() => {\n return `${Math.floor(Math.random() * 40) + 50}%`\n })\n\n return (\n <div\n data-slot=\"sidebar-menu-skeleton\"\n className={cn(\"h-8 gap-2 rounded-md px-2 flex items-center\", className)}\n {...props}\n >\n {showIcon && (\n <Skeleton className=\"size-4 rounded-md\" />\n )}\n <Skeleton\n className=\"h-4 max-w-(--skeleton-width) flex-1\"\n style={\n {\n \"--skeleton-width\": width,\n } as React.CSSProperties\n }\n />\n </div>\n )\n}\n\nfunction SidebarMenuSub({ className, ...props }: React.ComponentProps<\"ul\">) {\n return (\n <ul\n data-slot=\"sidebar-menu-sub\"\n className={cn(\"border-line ml-3.5 mr-0 translate-x-px gap-0.5 border-l pl-2.5 pr-0 py-0.5 group-data-[collapsible=icon]:hidden flex min-w-0 flex-col\", className)}\n {...props}\n />\n )\n}\n\nfunction SidebarMenuSubItem({\n className,\n ...props\n}: React.ComponentProps<\"li\">) {\n return (\n <li\n data-slot=\"sidebar-menu-sub-item\"\n className={cn(\"group/menu-sub-item relative\", className)}\n {...props}\n />\n )\n}\n\nfunction SidebarMenuSubButton({\n render,\n size = \"md\",\n isActive = false,\n className,\n ...props\n}: useRender.ComponentProps<\"a\"> &\n React.ComponentProps<\"a\"> & {\n size?: \"sm\" | \"md\"\n isActive?: boolean\n }) {\n return useRender({\n defaultTagName: \"a\",\n props: mergeProps<\"a\">(\n {\n className: cn(\n \"text-contrast ring-focus hover:bg-primary hover:text-white active:bg-primary active:text-white [&>svg]:text-white data-active:bg-primary data-active:text-white h-7 gap-2 rounded-md px-2 focus-visible:ring-2 data-[size=md]:text-sm data-[size=sm]:text-xs [&>svg]:size-4 flex min-w-0 -translate-x-px items-center overflow-hidden outline-hidden group-data-[collapsible=icon]:hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:shrink-0\",\n className\n ),\n },\n props\n ),\n render,\n state: {\n slot: \"sidebar-menu-sub-button\",\n size,\n active: isActive,\n },\n })\n}\n\nexport {\n cookiePersist,\n localStoragePersist,\n Sidebar,\n SidebarContent,\n SidebarFooter,\n SidebarGroup,\n SidebarGroupAction,\n SidebarGroupContent,\n SidebarGroupLabel,\n SidebarHeader,\n SidebarInput,\n SidebarInset,\n SidebarMenu,\n SidebarMenuAction,\n SidebarMenuBadge,\n SidebarMenuButton,\n SidebarMenuItem,\n SidebarMenuSkeleton,\n SidebarMenuSub,\n SidebarMenuSubButton,\n SidebarMenuSubItem,\n SidebarProvider,\n SidebarRail,\n SidebarSeparator,\n SidebarTrigger,\n useSidebar,\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AA6BA,MAAM,gBAAgB;AACtB,MAAM,uBAAuB;AAC7B,MAAM,qBAAqB;AAC3B,MAAM,oCAAoC;;;;;;;;;;;;;AAkB1C,SAAS,cAAc,OAAO,iBAAiB,SAAS,OAAU,KAAK,GAAG;AACxE,SAAQ,SAAkB;AACxB,WAAS,SAAS,GAAG,KAAK,GAAG,KAAK,oBAAoB;;;;;;;;;;;;;;AAe1D,SAAS,oBAAoB,MAAM,iBAAiB;AAClD,SAAQ,SAAkB;AACxB,MAAI;AACF,gBAAa,QAAQ,KAAK,OAAO,KAAK,CAAC;UACjC;;;AAgBZ,MAAM,iBAAiB,MAAM,cAA0C,KAAK;AAE5E,SAAS,aAAa;CACpB,MAAM,UAAU,MAAM,WAAW,eAAe;AAChD,KAAI,CAAC,QACH,OAAM,IAAI,MAAM,oDAAoD;AAGtE,QAAO;;AAGT,SAAS,gBAAgB,EACvB,cAAc,MACd,MAAM,UACN,cAAc,aACd,SACA,mBAAmB,mCACnB,kBACA,WACA,OACA,UACA,GAAG,SAsBF;CACD,MAAM,WAAW,YAAY,iBAAiB;CAC9C,MAAM,CAAC,YAAY,iBAAiB,MAAM,SAAS,MAAM;CAEzD,MAAM,CAAC,OAAO,YAAY,MAAM,SAAS,YAAY;CACrD,MAAM,OAAO,YAAY;CACzB,MAAM,aAAa,MAAM,OAAO,QAAQ;AACxC,YAAW,UAAU;CAErB,MAAM,UAAU,MAAM,aACnB,UAAmD;EAClD,MAAM,YAAY,OAAO,UAAU,aAAa,MAAM,KAAK,GAAG;AAC9D,MAAI,YACF,aAAY,UAAU;MAEtB,UAAS,UAAU;AAGrB,aAAW,UAAU,UAAU;IAEjC,CAAC,aAAa,KAAK,CACpB;CAED,MAAM,gBAAgB,MAAM,kBAAkB;AAC5C,SAAO,WAAW,eAAe,SAAS,CAAC,KAAK,GAAG,SAAS,SAAS,CAAC,KAAK;IAC1E;EAAC;EAAU;EAAS;EAAc,CAAC;AAEtC,OAAM,gBAAgB;AACpB,MAAI,qBAAqB,MAAO;EAEhC,MAAM,iBAAiB,UAAyB;AAC9C,OACE,MAAM,QAAQ,qBACb,MAAM,WAAW,MAAM,UACxB;AACA,UAAM,gBAAgB;AACtB,mBAAe;;;AAInB,SAAO,iBAAiB,WAAW,cAAc;AACjD,eAAa,OAAO,oBAAoB,WAAW,cAAc;IAChE,CAAC,eAAe,iBAAiB,CAAC;CAGrC,MAAM,QAAQ,YAAY,OAAO,aAAa;CAE9C,MAAM,eAAe,MAAM,eAClB;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACD,GACD;EAAC;EAAO;EAAM;EAAS;EAAU;EAAY;EAAe;EAAc,CAC3E;AAED,QACE,oBAAC,eAAe,UAAhB;EAAyB,OAAO;YAC9B,oBAAC,OAAD;GACE,aAAU;GACV,OACE;IACE,mBAAmB;IACnB,wBAAwB;IACxB,GAAG;IACJ;GAEH,WAAW,GACT,mFACA,UACD;GACD,GAAI;GAEH;GACG,CAAA;EACkB,CAAA;;AAI9B,SAAS,QAAQ,EACf,OAAO,QACP,UAAU,WACV,cAAc,aACd,WACA,UACA,GAAG,SAKF;CACD,MAAM,EAAE,UAAU,OAAO,MAAM,SAAS,YAAY,kBAAkB,YAAY;AAElF,KAAI,gBAAgB,OAClB,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,qEACA,UACD;EACD,GAAI;EAEH;EACG,CAAA;AAIV,KAAI,SACF,QACE,oBAAC,QAAD;EACE,MAAM;EACN,cAAc;EACd,gBAAgB;YAEhB,qBAAC,eAAD;GACE,aAAU;GACV,eAAY;GACZ,WAAU;GACV,OACE,EACE,mBAAmB,sBACpB;aAPL,CAUE,qBAAC,cAAD;IAAc,WAAU;cAAxB,CACE,oBAAC,aAAD,EAAA,UAAa,WAAqB,CAAA,EAClC,oBAAC,mBAAD,EAAA,UAAmB,gCAAgD,CAAA,CACtD;OACf,oBAAC,OAAD;IAAK,WAAU;IAA+B;IAAe,CAAA,CAC/C;;EACT,CAAA;AAIb,QACE,qBAACA,YAAqB,MAAtB;EACQ;EACN,cAAc;EACd,WAAU;EACV,oBAAkB,UAAU,cAAc,cAAc;EACxD,gBAAc;EACd,aAAW;EACX,aAAU;YAPZ,CAUE,oBAAC,OAAD;GACE,aAAU;GACV,WAAW,GACT,2FACA,0CACA,sCACA,YAAY,cAAc,YAAY,UAClC,qFACA,yDACL;GACD,CAAA,EACF,oBAAC,OAAD;GACE,aAAU;GACV,WAAW,GACT,wHACA,SAAS,SACL,mFACA,oFACJ,YAAY,cAAc,YAAY,UAClC,6FACA,oHAAoH,SAAS,SAAS,mBAAmB,kBAC7J,UACD;GACD,GAAI;aAEJ,oBAAC,iBAAD;IAAiB,OAAO;IAAG,YAAY;cACrC,oBAAC,OAAD;KACE,aAAU;KACV,WAAU;KAET;KACG,CAAA;IACU,CAAA;GACd,CAAA,CACoB;;;AAIhC,SAAS,eAAe,EACtB,WACA,SACA,GAAG,SACmC;CACtC,MAAM,EAAE,kBAAkB,YAAY;AAEtC,QACE,qBAAC,QAAD;EACE,aAAU;EACV,SAAQ;EACR,MAAK;EACL,WAAW,GAAG,UAAU;EACxB,UAAU,UAAU;AAClB,aAAU,MAAM;AAChB,kBAAe;;EAEjB,GAAI;YATN,CAWE,oBAAC,kBAAD,EAAoB,CAAA,EACpB,oBAAC,QAAD;GAAM,WAAU;aAAU;GAAqB,CAAA,CACxC;;;AAIb,SAAS,YAAY,EAAE,WAAW,GAAG,SAAyC;CAC5E,MAAM,EAAE,kBAAkB,YAAY;AAEtC,QACE,oBAAC,UAAD;EACE,aAAU;EACV,cAAW;EACX,UAAU;EACV,SAAS;EACT,OAAM;EACN,WAAW,GACT,yQACA,4EACA,wGACA,2JACA,6DACA,6DACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,aAAa,EAAE,WAAW,GAAG,SAAuC;AAC3E,QACE,oBAAC,QAAD;EACE,aAAU;EACV,WAAW,GACT,qQACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,aAAa,EACpB,WACA,GAAG,SACkC;AACrC,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,wCAAwC,UAAU;EAChE,GAAI;EACJ,CAAA;;AAIN,SAAS,cAAc,EAAE,WAAW,GAAG,SAAsC;AAC3E,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,2BAA2B,UAAU;EACnD,GAAI;EACJ,CAAA;;AAIN,SAAS,cAAc,EAAE,WAAW,GAAG,SAAsC;AAC3E,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,2BAA2B,UAAU;EACnD,GAAI;EACJ,CAAA;;AAIN,SAAS,iBAAiB,EACxB,WACA,GAAG,SACsC;AACzC,QACE,oBAAC,WAAD;EACE,aAAU;EACV,WAAW,GAAG,qDAAqD,UAAU;EAC7E,GAAI;EACJ,CAAA;;AAIN,SAAS,eAAe,EAAE,WAAW,OAAO,GAAG,SAAsC;AACnF,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,mHACA,UACD;EACD,OAAO;GACL,WAAW;GACX,iBAAiB;GACjB,GAAG;GACJ;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,aAAa,EAAE,WAAW,GAAG,SAAsC;AAC1E,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,mEACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,kBAAkB,EACzB,WACA,QACA,GAAG,SAC6D;AAChE,QAAO,UAAU;EACf,gBAAgB;EAChB,OAAO,WACL,EACE,WAAW,GACT,2MACA,UACD,EACF,EACD,MACD;EACD;EACA,OAAO,EACL,MAAM,uBACP;EACF,CAAC;;AAGJ,SAAS,mBAAmB,EAC1B,WACA,QACA,GAAG,SACmE;AACtE,QAAO,UAAU;EACf,gBAAgB;EAChB,OAAO,WACL,EACE,WAAW,GACT,qUACA,UACD,EACF,EACD,MACD;EACD;EACA,OAAO,EACL,MAAM,wBACP;EACF,CAAC;;AAGJ,SAAS,oBAAoB,EAC3B,WACA,GAAG,SAC2B;AAC9B,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,kBAAkB,UAAU;EAC1C,GAAI;EACJ,CAAA;;AAIN,SAAS,YAAY,EAAE,WAAW,GAAG,SAAqC;AACxE,QACE,oBAAC,MAAD;EACE,aAAU;EACV,WAAW,GAAG,sCAAsC,UAAU;EAC9D,GAAI;EACJ,CAAA;;AAIN,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAAqC;AAC5E,QACE,oBAAC,MAAD;EACE,aAAU;EACV,WAAW,GAAG,2EAA2E,UAAU;EACnG,GAAI;EACJ,CAAA;;AAIN,MAAM,4BAA4B,IAChC,gtBACA;CACE,UAAU;EACR,SAAS;GACP,SAAS;GACT,SAAS;GACV;EACD,MAAM;GACJ,SAAS;GACT,IAAI;GACJ,IAAI;GACL;EACF;CACD,iBAAiB;EACf,SAAS;EACT,MAAM;EACP;CACF,CACF;AAED,SAAS,kBAAkB,EACzB,QACA,WAAW,OACX,UAAU,WACV,OAAO,WACP,SACA,WACA,GAAG,SAKiD;CACpD,MAAM,EAAE,UAAU,UAAU,YAAY;AAExC,KAAI,QAAQ,IAAI,aAAa,iBAAiB,WAAW,OACvD,SAAQ,KACN,oKAED;CAGH,MAAM,OAAO,UAAU;EACrB,gBAAgB;EAChB,OAAO,WACL,EACE,WAAW,GAAG,0BAA0B;GAAE;GAAS;GAAM,CAAC,EAAE,UAAU,EACvE,EACD,MACD;EACD,QAAQ,CAAC,UAAU,SAAS;EAC5B,OAAO;GACL,MAAM;GACN;GACA,QAAQ;GACT;EACF,CAAC;AAEF,KAAI,CAAC,QACH,QAAO;AAGT,KAAI,OAAO,YAAY,SACrB,WAAU,EACR,UAAU,SACX;AAGH,QACE,qBAAC,SAAD,EAAA,UAAA,CACG,MACD,oBAAC,gBAAD;EACE,MAAK;EACL,OAAM;EACN,QAAQ,UAAU,eAAe;EACjC,GAAI;EACJ,CAAA,CACM,EAAA,CAAA;;AAId,SAAS,kBAAkB,EACzB,WACA,QACA,cAAc,OACd,GAAG,SAIA;AACH,QAAO,UAAU;EACf,gBAAgB;EAChB,OAAO,WACL,EACE,WAAW,GACT,wXACA,eACA,yJACA,UACD,EACF,EACD,MACD;EACD;EACA,OAAO,EACL,MAAM,uBACP;EACF,CAAC;;AAGJ,SAAS,iBAAiB,EACxB,WACA,GAAG,SAC2B;AAC9B,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,wSACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,oBAAoB,EAC3B,WACA,WAAW,OACX,GAAG,SAGF;CACD,MAAM,CAAC,SAAS,MAAM,eAAe;AACnC,SAAO,GAAG,KAAK,MAAM,KAAK,QAAQ,GAAG,GAAG,GAAG,GAAG;GAC9C;AAEF,QACE,qBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,+CAA+C,UAAU;EACvE,GAAI;YAHN,CAKG,YACC,oBAAC,UAAD,EAAU,WAAU,qBAAsB,CAAA,EAE5C,oBAAC,UAAD;GACE,WAAU;GACV,OACE,EACE,oBAAoB,OACrB;GAEH,CAAA,CACE;;;AAIV,SAAS,eAAe,EAAE,WAAW,GAAG,SAAqC;AAC3E,QACE,oBAAC,MAAD;EACE,aAAU;EACV,WAAW,GAAG,yIAAyI,UAAU;EACjK,GAAI;EACJ,CAAA;;AAIN,SAAS,mBAAmB,EAC1B,WACA,GAAG,SAC0B;AAC7B,QACE,oBAAC,MAAD;EACE,aAAU;EACV,WAAW,GAAG,gCAAgC,UAAU;EACxD,GAAI;EACJ,CAAA;;AAIN,SAAS,qBAAqB,EAC5B,QACA,OAAO,MACP,WAAW,OACX,WACA,GAAG,SAKA;AACH,QAAO,UAAU;EACf,gBAAgB;EAChB,OAAO,WACL,EACE,WAAW,GACT,uhBACA,UACD,EACF,EACD,MACD;EACD;EACA,OAAO;GACL,MAAM;GACN;GACA,QAAQ;GACT;EACF,CAAC"}
1
+ {"version":3,"file":"sidebar.js","names":["CollapsiblePrimitive"],"sources":["../src/sidebar.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { Collapsible as CollapsiblePrimitive } from \"@base-ui/react/collapsible\"\nimport { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"./lib/utils\"\nimport { Button } from \"./button\"\nimport {\n Drawer,\n DrawerContent,\n DrawerDescription,\n DrawerHeader,\n DrawerTitle,\n} from \"./drawer\"\nimport { Input } from \"./input\"\nimport { Separator } from \"./separator\"\nimport { Skeleton } from \"./skeleton\"\nimport {\n Tooltip,\n TooltipContent,\n TooltipProvider,\n TooltipTrigger,\n} from \"./tooltip\"\nimport { useIsMobile } from \"./hooks/use-mobile\"\nimport { SidebarPanelIcon } from \"./lib/internal-icons\"\n\nconst SIDEBAR_WIDTH = \"16rem\"\nconst SIDEBAR_WIDTH_MOBILE = \"18rem\"\nconst SIDEBAR_WIDTH_ICON = \"3rem\"\nconst SIDEBAR_DEFAULT_KEYBOARD_SHORTCUT = \"b\"\n\n// ---------------------------------------------------------------------------\n// Persistence helpers — ready-made functions for the `persist` prop.\n// ---------------------------------------------------------------------------\n\n/**\n * Persist sidebar state to a cookie.\n *\n * @param name - Cookie name. Defaults to `\"sidebar-state\"`.\n * @param maxAge - Cookie max-age in seconds. Defaults to 7 days (604 800).\n *\n * @example\n * ```tsx\n * <SidebarProvider persist={cookiePersist()}>\n * <SidebarProvider persist={cookiePersist(\"my-sidebar\", 86400)}>\n * ```\n */\nfunction cookiePersist(name = \"sidebar-state\", maxAge = 60 * 60 * 24 * 7) {\n return (open: boolean) => {\n document.cookie = `${name}=${open}; path=/; max-age=${maxAge}`\n }\n}\n\n/**\n * Persist sidebar state to localStorage.\n *\n * @param key - Storage key. Defaults to `\"sidebar-state\"`.\n *\n * @example\n * ```tsx\n * <SidebarProvider persist={localStoragePersist()}>\n * <SidebarProvider persist={localStoragePersist(\"my-sidebar\")}>\n * ```\n */\nfunction localStoragePersist(key = \"sidebar-state\") {\n return (open: boolean) => {\n try {\n localStorage.setItem(key, String(open))\n } catch {\n // Storage full or unavailable (SSR, private browsing) — silently ignore.\n }\n }\n}\n\ntype SidebarContextProps = {\n state: \"expanded\" | \"collapsed\"\n open: boolean\n setOpen: (open: boolean) => void\n openMobile: boolean\n setOpenMobile: (open: boolean) => void\n isMobile: boolean\n toggleSidebar: () => void\n}\n\nconst SidebarContext = React.createContext<SidebarContextProps | null>(null)\n\nfunction useSidebar() {\n const context = React.useContext(SidebarContext)\n if (!context) {\n throw new Error(\"useSidebar must be used within a SidebarProvider.\")\n }\n\n return context\n}\n\nfunction SidebarProvider({\n defaultOpen = true,\n open: openProp,\n onOpenChange: setOpenProp,\n persist,\n keyboardShortcut = SIDEBAR_DEFAULT_KEYBOARD_SHORTCUT,\n mobileBreakpoint,\n className,\n style,\n children,\n ...props\n}: React.ComponentProps<\"div\"> & {\n defaultOpen?: boolean\n open?: boolean\n onOpenChange?: (open: boolean) => void\n /**\n * Optional callback to persist open state. Called on every toggle.\n * Use the built-in helpers `cookiePersist()` or `localStoragePersist()`,\n * or provide a custom function (e.g. server action).\n *\n * @example\n * ```tsx\n * <SidebarProvider persist={cookiePersist()}>\n * <SidebarProvider persist={localStoragePersist(\"sidebar\")}>\n * <SidebarProvider persist={(open) => saveToServer(open)}>\n * ```\n */\n persist?: (open: boolean) => void\n /** Key for Cmd/Ctrl+key toggle shortcut. Defaults to \"b\". Pass `false` to disable. */\n keyboardShortcut?: string | false\n /** Breakpoint (px) below which the sidebar uses a mobile drawer. Defaults to 768. */\n mobileBreakpoint?: number\n}) {\n const isMobile = useIsMobile(mobileBreakpoint)\n const [openMobile, setOpenMobile] = React.useState(false)\n\n const [_open, _setOpen] = React.useState(defaultOpen)\n const open = openProp ?? _open\n const persistRef = React.useRef(persist)\n persistRef.current = persist\n\n const setOpen = React.useCallback(\n (value: boolean | ((value: boolean) => boolean)) => {\n const openState = typeof value === \"function\" ? value(open) : value\n if (setOpenProp) {\n setOpenProp(openState)\n } else {\n _setOpen(openState)\n }\n\n persistRef.current?.(openState)\n },\n [setOpenProp, open]\n )\n\n const toggleSidebar = React.useCallback(() => {\n return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)\n }, [isMobile, setOpen, setOpenMobile])\n\n React.useEffect(() => {\n if (keyboardShortcut === false) return\n\n const handleKeyDown = (event: KeyboardEvent) => {\n if (\n event.key === keyboardShortcut &&\n (event.metaKey || event.ctrlKey)\n ) {\n event.preventDefault()\n toggleSidebar()\n }\n }\n\n window.addEventListener(\"keydown\", handleKeyDown)\n return () => window.removeEventListener(\"keydown\", handleKeyDown)\n }, [toggleSidebar, keyboardShortcut])\n\n // On mobile the sidebar renders as a full-width drawer, so always treat as expanded.\n const state = isMobile || open ? \"expanded\" : \"collapsed\"\n\n const contextValue = React.useMemo<SidebarContextProps>(\n () => ({\n state,\n open,\n setOpen,\n isMobile,\n openMobile,\n setOpenMobile,\n toggleSidebar,\n }),\n [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]\n )\n\n return (\n <SidebarContext.Provider value={contextValue}>\n <div\n data-slot=\"sidebar-wrapper\"\n style={\n {\n \"--sidebar-width\": SIDEBAR_WIDTH,\n \"--sidebar-width-icon\": SIDEBAR_WIDTH_ICON,\n ...style,\n } as React.CSSProperties\n }\n className={cn(\n \"group/sidebar-wrapper has-data-[variant=inset]:bg-surface flex min-h-svh w-full\",\n className\n )}\n {...props}\n >\n {children}\n </div>\n </SidebarContext.Provider>\n )\n}\n\nfunction Sidebar({\n side = \"left\",\n variant = \"sidebar\",\n collapsible = \"offcanvas\",\n className,\n children,\n ...props\n}: React.ComponentProps<\"div\"> & {\n side?: \"left\" | \"right\"\n variant?: \"sidebar\" | \"floating\" | \"inset\"\n collapsible?: \"offcanvas\" | \"icon\" | \"none\"\n}) {\n const { isMobile, state, open, setOpen, openMobile, setOpenMobile } = useSidebar()\n\n if (collapsible === \"none\") {\n return (\n <div\n data-slot=\"sidebar\"\n className={cn(\n \"bg-surface text-contrast flex h-full w-(--sidebar-width) flex-col\",\n className\n )}\n {...props}\n >\n {children}\n </div>\n )\n }\n\n if (isMobile) {\n return (\n <Drawer\n open={openMobile}\n onOpenChange={setOpenMobile}\n swipeDirection={side}\n >\n <DrawerContent\n data-slot=\"sidebar\"\n data-mobile=\"true\"\n className=\"bg-surface text-contrast w-(--sidebar-width) max-w-none rounded-none border-0 p-0 sm:max-w-none\"\n style={\n {\n \"--sidebar-width\": SIDEBAR_WIDTH_MOBILE,\n } as React.CSSProperties\n }\n >\n <DrawerHeader className=\"sr-only\">\n <DrawerTitle>Sidebar</DrawerTitle>\n <DrawerDescription>Displays the mobile sidebar.</DrawerDescription>\n </DrawerHeader>\n <div className=\"flex h-full w-full flex-col\">{children}</div>\n </DrawerContent>\n </Drawer>\n )\n }\n\n return (\n <CollapsiblePrimitive.Root\n open={open}\n onOpenChange={setOpen}\n className=\"group peer text-contrast hidden md:block\"\n data-collapsible={state === \"collapsed\" ? collapsible : \"\"}\n data-variant={variant}\n data-side={side}\n data-slot=\"sidebar\"\n >\n {/* This is what handles the sidebar gap on desktop */}\n <div\n data-slot=\"sidebar-gap\"\n className={cn(\n \"relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear\",\n \"group-data-[collapsible=offcanvas]:w-0\",\n \"group-data-[side=right]:rotate-180\",\n variant === \"floating\" || variant === \"inset\"\n ? \"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]\"\n : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon)\"\n )}\n />\n <div\n data-slot=\"sidebar-container\"\n className={cn(\n \"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex\",\n side === \"left\"\n ? \"left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]\"\n : \"right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]\",\n variant === \"floating\" || variant === \"inset\"\n ? \"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]\"\n : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon) after:absolute after:inset-y-0 after:w-px after:bg-line\" + (side === \"left\" ? \" after:right-0\" : \" after:left-0\"),\n className\n )}\n {...props}\n >\n <TooltipProvider delay={0} closeDelay={300}>\n <div\n data-slot=\"sidebar-inner\"\n className=\"bg-surface group-data-[variant=floating]:ring-line group-data-[variant=floating]:rounded-md group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 flex size-full flex-col\"\n >\n {children}\n </div>\n </TooltipProvider>\n </div>\n </CollapsiblePrimitive.Root>\n )\n}\n\nfunction SidebarTrigger({\n className,\n onClick,\n ...props\n}: React.ComponentProps<typeof Button>) {\n const { toggleSidebar, open } = useSidebar()\n\n return (\n <Button\n data-slot=\"sidebar-trigger\"\n aria-expanded={open}\n variant=\"ghost\"\n size=\"icon-sm\"\n className={cn(className)}\n onClick={(event) => {\n onClick?.(event)\n toggleSidebar()\n }}\n {...props}\n >\n <SidebarPanelIcon />\n <span className=\"sr-only\">Toggle Sidebar</span>\n </Button>\n )\n}\n\nfunction SidebarRail({ className, ...props }: React.ComponentProps<\"button\">) {\n const { toggleSidebar } = useSidebar()\n\n return (\n <button\n data-slot=\"sidebar-rail\"\n aria-label=\"Toggle Sidebar\"\n tabIndex={-1}\n onClick={toggleSidebar}\n title=\"Toggle Sidebar\"\n className={cn(\n \"hover:after:bg-line absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-[left,right,transform] duration-200 ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex\",\n \"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize\",\n \"[[data-side=left][data-closed]_&]:cursor-e-resize [[data-side=right][data-closed]_&]:cursor-w-resize\",\n \"hover:group-data-[collapsible=offcanvas]:bg-surface group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full\",\n \"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2\",\n \"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction SidebarInset({ className, ...props }: React.ComponentProps<\"main\">) {\n return (\n <main\n data-slot=\"sidebar-inset\"\n className={cn(\n \"bg-foundation md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-lg md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[closed]:ml-2 relative flex min-w-0 w-full flex-1 flex-col\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction SidebarInput({\n className,\n ...props\n}: React.ComponentProps<typeof Input>) {\n return (\n <Input\n data-slot=\"sidebar-input\"\n className={cn(\"bg-foundation h-8 w-full shadow-none\", className)}\n {...props}\n />\n )\n}\n\nfunction SidebarHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"sidebar-header\"\n className={cn(\"gap-2 p-2 flex flex-col\", className)}\n {...props}\n />\n )\n}\n\nfunction SidebarFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"sidebar-footer\"\n className={cn(\"gap-2 p-2 flex flex-col\", className)}\n {...props}\n />\n )\n}\n\nfunction SidebarSeparator({\n className,\n ...props\n}: React.ComponentProps<typeof Separator>) {\n return (\n <Separator\n data-slot=\"sidebar-separator\"\n className={cn(\"bg-line mx-2 data-[orientation=horizontal]:w-auto\", className)}\n {...props}\n />\n )\n}\n\nfunction SidebarContent({ className, style, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"sidebar-content\"\n className={cn(\n \"gap-1 flex min-h-0 flex-1 flex-col overflow-auto scrollbar-none group-data-[collapsible=icon]:overflow-x-hidden\",\n className\n )}\n style={{\n maskImage: \"linear-gradient(to bottom, black calc(100% - 44px), transparent 100%)\",\n WebkitMaskImage: \"linear-gradient(to bottom, black calc(100% - 44px), transparent 100%)\",\n ...style,\n }}\n {...props}\n />\n )\n}\n\nfunction SidebarGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"sidebar-group\"\n className={cn(\n \"px-2 first:pt-2 last:pb-2 relative flex w-full min-w-0 flex-col\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction SidebarGroupLabel({\n className,\n render,\n ...props\n}: useRender.ComponentProps<\"div\"> & React.ComponentProps<\"div\">) {\n return useRender({\n defaultTagName: \"div\",\n props: mergeProps<\"div\">(\n {\n className: cn(\n \"text-contrast/70 ring-focus/50 h-8 rounded-md px-2 text-xs font-medium group-data-[collapsible=icon]:hidden focus-visible:ring-3 [&>svg]:size-4 flex shrink-0 items-center outline-hidden [&>svg]:shrink-0\",\n className\n ),\n },\n props\n ),\n render,\n state: {\n slot: \"sidebar-group-label\",\n },\n })\n}\n\nfunction SidebarGroupAction({\n className,\n render,\n ...props\n}: useRender.ComponentProps<\"button\"> & React.ComponentProps<\"button\">) {\n return useRender({\n defaultTagName: \"button\",\n props: mergeProps<\"button\">(\n {\n className: cn(\n \"text-contrast ring-focus/50 hover:bg-primary hover:text-white absolute top-1.5 right-3 w-5 rounded-sm p-0 focus-visible:ring-3 [&>svg]:size-4 flex aspect-square items-center justify-center outline-hidden transition-transform [&>svg]:shrink-0 after:absolute after:-inset-2 md:after:hidden group-data-[collapsible=icon]:hidden\",\n className\n ),\n },\n props\n ),\n render,\n state: {\n slot: \"sidebar-group-action\",\n },\n })\n}\n\nfunction SidebarGroupContent({\n className,\n ...props\n}: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"sidebar-group-content\"\n className={cn(\"text-sm w-full\", className)}\n {...props}\n />\n )\n}\n\nfunction SidebarMenu({ className, ...props }: React.ComponentProps<\"ul\">) {\n return (\n <ul\n data-slot=\"sidebar-menu\"\n className={cn(\"gap-1 flex w-full min-w-0 flex-col\", className)}\n {...props}\n />\n )\n}\n\nfunction SidebarMenuItem({ className, ...props }: React.ComponentProps<\"li\">) {\n return (\n <li\n data-slot=\"sidebar-menu-item\"\n className={cn(\"group/menu-item relative has-data-[slot=sidebar-menu-sub]:mb-[-0.25rem]\", className)}\n {...props}\n />\n )\n}\n\nconst sidebarMenuButtonVariants = cva(\n \"ring-focus/50 hover:bg-primary hover:text-white active:bg-primary active:text-white data-active:bg-primary data-active:text-white data-open:hover:bg-primary data-open:hover:text-white gap-2 rounded-md p-2 text-left text-sm transition-[width,height,padding] group-has-data-[slot=sidebar-menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:w-full group-data-[collapsible=icon]:aspect-square group-data-[collapsible=icon]:h-11 focus-visible:ring-3 data-active:font-medium peer/menu-button flex w-full items-center overflow-hidden outline-hidden group/menu-button disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&_svg]:shrink-0\",\n {\n variants: {\n variant: {\n default: \"hover:bg-primary hover:text-white\",\n outline: \"bg-foundation hover:bg-primary hover:text-white ring-1 ring-line hover:ring-focus\",\n },\n size: {\n default: \"h-11 text-sm\",\n sm: \"h-8 text-xs\",\n lg: \"h-12 text-sm\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n }\n)\n\nfunction SidebarMenuButton({\n render,\n isActive = false,\n variant = \"default\",\n size = \"default\",\n tooltip,\n className,\n ...props\n}: useRender.ComponentProps<\"button\"> &\n React.ComponentProps<\"button\"> & {\n isActive?: boolean\n tooltip?: string | React.ComponentProps<typeof TooltipContent>\n } & VariantProps<typeof sidebarMenuButtonVariants>) {\n const { isMobile, state } = useSidebar()\n\n if (process.env.NODE_ENV === \"development\" && tooltip && render) {\n console.warn(\n \"[SidebarMenuButton] Both `render` and `tooltip` were provided. \" +\n \"When `tooltip` is set, the button is wrapped in a TooltipTrigger and the `render` prop is ignored.\"\n )\n }\n\n const comp = useRender({\n defaultTagName: \"button\",\n props: mergeProps<\"button\">(\n {\n className: cn(sidebarMenuButtonVariants({ variant, size }), className),\n },\n props\n ),\n render: !tooltip ? render : TooltipTrigger,\n state: {\n slot: \"sidebar-menu-button\",\n size,\n active: isActive,\n },\n })\n\n if (!tooltip) {\n return comp\n }\n\n if (typeof tooltip === \"string\") {\n tooltip = {\n children: tooltip,\n }\n }\n\n return (\n <Tooltip>\n {comp}\n <TooltipContent\n side=\"right\"\n align=\"center\"\n hidden={state !== \"collapsed\" || isMobile}\n {...tooltip}\n />\n </Tooltip>\n )\n}\n\nfunction SidebarMenuAction({\n className,\n render,\n showOnHover = false,\n ...props\n}: useRender.ComponentProps<\"button\"> &\n React.ComponentProps<\"button\"> & {\n showOnHover?: boolean\n }) {\n return useRender({\n defaultTagName: \"button\",\n props: mergeProps<\"button\">(\n {\n className: cn(\n \"text-contrast ring-focus/50 hover:bg-primary hover:text-white peer-hover/menu-button:text-white absolute top-1/2 -translate-y-1/2 right-1 aspect-square w-5 rounded-sm p-0 focus-visible:ring-3 [&>svg]:size-4 flex items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>svg]:shrink-0\",\n showOnHover &&\n \"peer-data-active/menu-button:text-white group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-open:opacity-100 md:opacity-0\",\n className\n ),\n },\n props\n ),\n render,\n state: {\n slot: \"sidebar-menu-action\",\n },\n })\n}\n\nfunction SidebarMenuBadge({\n className,\n ...props\n}: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"sidebar-menu-badge\"\n className={cn(\n \"text-contrast peer-hover/menu-button:text-white peer-data-active/menu-button:text-white pointer-events-none absolute right-1 top-1/2 -translate-y-1/2 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none group-data-[collapsible=icon]:hidden\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction SidebarMenuSkeleton({\n className,\n showIcon = false,\n ...props\n}: React.ComponentProps<\"div\"> & {\n showIcon?: boolean\n}) {\n const [width] = React.useState(() => {\n return `${Math.floor(Math.random() * 40) + 50}%`\n })\n\n return (\n <div\n data-slot=\"sidebar-menu-skeleton\"\n className={cn(\"h-8 gap-2 rounded-md px-2 flex items-center\", className)}\n {...props}\n >\n {showIcon && (\n <Skeleton className=\"size-4 rounded-md\" />\n )}\n <Skeleton\n className=\"h-4 max-w-(--skeleton-width) flex-1\"\n style={\n {\n \"--skeleton-width\": width,\n } as React.CSSProperties\n }\n />\n </div>\n )\n}\n\nfunction SidebarMenuSub({ className, ...props }: React.ComponentProps<\"ul\">) {\n return (\n <ul\n data-slot=\"sidebar-menu-sub\"\n className={cn(\"border-line ml-3.5 mr-0 translate-x-px gap-0.5 border-l pl-2.5 pr-0 py-0.5 group-data-[collapsible=icon]:hidden flex min-w-0 flex-col\", className)}\n {...props}\n />\n )\n}\n\nfunction SidebarMenuSubItem({\n className,\n ...props\n}: React.ComponentProps<\"li\">) {\n return (\n <li\n data-slot=\"sidebar-menu-sub-item\"\n className={cn(\"group/menu-sub-item relative\", className)}\n {...props}\n />\n )\n}\n\nfunction SidebarMenuSubButton({\n render,\n size = \"md\",\n isActive = false,\n className,\n ...props\n}: useRender.ComponentProps<\"a\"> &\n React.ComponentProps<\"a\"> & {\n size?: \"sm\" | \"md\"\n isActive?: boolean\n }) {\n return useRender({\n defaultTagName: \"a\",\n props: mergeProps<\"a\">(\n {\n className: cn(\n \"text-contrast ring-focus/50 hover:bg-primary hover:text-white active:bg-primary active:text-white [&>svg]:text-white data-active:bg-primary data-active:text-white h-7 gap-2 rounded-md px-2 focus-visible:ring-3 data-[size=md]:text-sm data-[size=sm]:text-xs [&>svg]:size-4 flex min-w-0 -translate-x-px items-center overflow-hidden outline-hidden group-data-[collapsible=icon]:hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:shrink-0\",\n className\n ),\n },\n props\n ),\n render,\n state: {\n slot: \"sidebar-menu-sub-button\",\n size,\n active: isActive,\n },\n })\n}\n\nexport {\n cookiePersist,\n localStoragePersist,\n Sidebar,\n SidebarContent,\n SidebarFooter,\n SidebarGroup,\n SidebarGroupAction,\n SidebarGroupContent,\n SidebarGroupLabel,\n SidebarHeader,\n SidebarInput,\n SidebarInset,\n SidebarMenu,\n SidebarMenuAction,\n SidebarMenuBadge,\n SidebarMenuButton,\n SidebarMenuItem,\n SidebarMenuSkeleton,\n SidebarMenuSub,\n SidebarMenuSubButton,\n SidebarMenuSubItem,\n SidebarProvider,\n SidebarRail,\n SidebarSeparator,\n SidebarTrigger,\n useSidebar,\n}\n"],"mappings":"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"}
package/dist/slider.d.ts CHANGED
@@ -5,14 +5,23 @@ import { Slider as Slider$1 } from "@base-ui/react/slider";
5
5
  //#region src/slider.d.ts
6
6
  type SliderProps = React.ComponentProps<typeof Slider$1.Root> & {
7
7
  controlClassName?: string;
8
+ /**
9
+ * Accessible name for the thumb(s). The thumb is the interactive slider
10
+ * control, so it needs its own name — a plain `aria-label` on `<Slider>`
11
+ * labels the group, not the thumb. Receives the thumb index for range sliders.
12
+ */
13
+ getThumbAriaLabel?: (index: number) => string;
8
14
  };
9
15
  declare function Slider({
10
16
  className,
17
+ controlClassName,
11
18
  defaultValue,
12
19
  value,
13
20
  min,
14
21
  max,
15
22
  orientation,
23
+ "aria-label": ariaLabel,
24
+ getThumbAriaLabel,
16
25
  ...props
17
26
  }: SliderProps): _$react_jsx_runtime0.JSX.Element;
18
27
  //#endregion
@@ -1 +1 @@
1
- {"version":3,"file":"slider.d.ts","names":[],"sources":["../src/slider.tsx"],"mappings":";;;;;KAOK,WAAA,GAAc,KAAA,CAAM,cAAA,QAAsB,QAAA,CAAgB,IAAA;EAC7D,gBAAA;AAAA;AAAA,iBAGO,MAAA,CAAA;EACP,SAAA;EACA,YAAA;EACA,KAAA;EACA,GAAA;EACA,GAAA;EACA,WAAA;EAAA,GACG;AAAA,GACF,WAAA,GAAW,oBAAA,CAAA,GAAA,CAAA,OAAA"}
1
+ {"version":3,"file":"slider.d.ts","names":[],"sources":["../src/slider.tsx"],"mappings":";;;;;KAOK,WAAA,GAAc,KAAA,CAAM,cAAA,QAAsB,QAAA,CAAgB,IAAA;EAC7D,gBAAA;;AAL+D;;;;EAW/D,iBAAA,IAAqB,KAAA;AAAA;AAAA,iBAGd,MAAA,CAAA;EACP,SAAA;EACA,gBAAA;EACA,YAAA;EACA,KAAA;EACA,GAAA;EACA,GAAA;EACA,WAAA;EAAA,cACc,SAAA;EACd,iBAAA;EAAA,GACG;AAAA,GACF,WAAA,GAAW,oBAAA,CAAA,GAAA,CAAA,OAAA"}
package/dist/slider.js CHANGED
@@ -4,7 +4,7 @@ import * as React from "react";
4
4
  import { jsx, jsxs } from "react/jsx-runtime";
5
5
  import { Slider as Slider$1 } from "@base-ui/react/slider";
6
6
  //#region src/slider.tsx
7
- function Slider({ className, defaultValue, value, min = 0, max = 100, orientation = "horizontal", ...props }) {
7
+ function Slider({ className, controlClassName, defaultValue, value, min = 0, max = 100, orientation = "horizontal", "aria-label": ariaLabel, getThumbAriaLabel, ...props }) {
8
8
  const _values = React.useMemo(() => Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max], [
9
9
  value,
10
10
  defaultValue,
@@ -12,7 +12,7 @@ function Slider({ className, defaultValue, value, min = 0, max = 100, orientatio
12
12
  max
13
13
  ]);
14
14
  return /* @__PURE__ */ jsx(Slider$1.Root, {
15
- className: "data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full",
15
+ className: cn("data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full", className),
16
16
  "data-slot": "slider",
17
17
  defaultValue,
18
18
  value,
@@ -22,7 +22,7 @@ function Slider({ className, defaultValue, value, min = 0, max = 100, orientatio
22
22
  thumbAlignment: "edge",
23
23
  ...props,
24
24
  children: /* @__PURE__ */ jsxs(Slider$1.Control, {
25
- className: cn("relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-disabled:cursor-not-allowed data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-40 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col", className),
25
+ className: cn("relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-disabled:cursor-not-allowed data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-40 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col", controlClassName),
26
26
  children: [/* @__PURE__ */ jsx(Slider$1.Track, {
27
27
  "data-slot": "slider-track",
28
28
  className: "bg-secondary relative grow overflow-hidden rounded-full select-none data-[orientation=horizontal]:h-1 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1",
@@ -32,6 +32,7 @@ function Slider({ className, defaultValue, value, min = 0, max = 100, orientatio
32
32
  })
33
33
  }), Array.from({ length: _values.length }, (_, index) => /* @__PURE__ */ jsx(Slider$1.Thumb, {
34
34
  "data-slot": "slider-thumb",
35
+ "aria-label": getThumbAriaLabel ? getThumbAriaLabel(index) : ariaLabel,
35
36
  className: "border-focus ring-focus/50 relative block size-3 shrink-0 rounded-full border bg-white motion-color cursor-clickable select-none after:absolute after:-inset-2 hover:ring-3 focus-visible:ring-3 focus-visible:outline-hidden active:ring-3 data-disabled:pointer-events-none"
36
37
  }, index))]
37
38
  })
@@ -1 +1 @@
1
- {"version":3,"file":"slider.js","names":["SliderPrimitive"],"sources":["../src/slider.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { Slider as SliderPrimitive } from \"@base-ui/react/slider\"\n\nimport { cn } from \"./lib/utils\"\n\ntype SliderProps = React.ComponentProps<typeof SliderPrimitive.Root> & {\n controlClassName?: string\n}\n\nfunction Slider({\n className,\n defaultValue,\n value,\n min = 0,\n max = 100,\n orientation = \"horizontal\",\n ...props\n}: SliderProps) {\n const _values = React.useMemo(\n () =>\n Array.isArray(value)\n ? value\n : Array.isArray(defaultValue)\n ? defaultValue\n : [min, max],\n [value, defaultValue, min, max]\n )\n\n return (\n <SliderPrimitive.Root\n className=\"data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full\"\n data-slot=\"slider\"\n defaultValue={defaultValue}\n value={value}\n min={min}\n max={max}\n orientation={orientation}\n thumbAlignment=\"edge\"\n {...props}\n >\n <SliderPrimitive.Control\n className={cn(\n \"relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-disabled:cursor-not-allowed data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-40 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col\",\n className\n )}\n >\n <SliderPrimitive.Track\n data-slot=\"slider-track\"\n className=\"bg-secondary relative grow overflow-hidden rounded-full select-none data-[orientation=horizontal]:h-1 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1\"\n >\n <SliderPrimitive.Indicator\n data-slot=\"slider-range\"\n className=\"bg-primary select-none data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full\"\n />\n </SliderPrimitive.Track>\n {Array.from({ length: _values.length }, (_, index) => (\n <SliderPrimitive.Thumb\n data-slot=\"slider-thumb\"\n key={index}\n className=\"border-focus ring-focus/50 relative block size-3 shrink-0 rounded-full border bg-white motion-color cursor-clickable select-none after:absolute after:-inset-2 hover:ring-3 focus-visible:ring-3 focus-visible:outline-hidden active:ring-3 data-disabled:pointer-events-none\"\n />\n ))}\n </SliderPrimitive.Control>\n </SliderPrimitive.Root>\n )\n}\n\nexport { Slider }\n"],"mappings":";;;;;;AAWA,SAAS,OAAO,EACd,WACA,cACA,OACA,MAAM,GACN,MAAM,KACN,cAAc,cACd,GAAG,SACW;CACd,MAAM,UAAU,MAAM,cAElB,MAAM,QAAQ,MAAM,GAChB,QACA,MAAM,QAAQ,aAAa,GACzB,eACA,CAAC,KAAK,IAAI,EAClB;EAAC;EAAO;EAAc;EAAK;EAAI,CAChC;AAED,QACE,oBAACA,SAAgB,MAAjB;EACE,WAAU;EACV,aAAU;EACI;EACP;EACF;EACA;EACQ;EACb,gBAAe;EACf,GAAI;YAEJ,qBAACA,SAAgB,SAAjB;GACE,WAAW,GACT,sQACA,UACD;aAJH,CAME,oBAACA,SAAgB,OAAjB;IACE,aAAU;IACV,WAAU;cAEV,oBAACA,SAAgB,WAAjB;KACE,aAAU;KACV,WAAU;KACV,CAAA;IACoB,CAAA,EACvB,MAAM,KAAK,EAAE,QAAQ,QAAQ,QAAQ,GAAG,GAAG,UAC1C,oBAACA,SAAgB,OAAjB;IACE,aAAU;IAEV,WAAU;IACV,EAFK,MAEL,CACF,CACsB;;EACL,CAAA"}
1
+ {"version":3,"file":"slider.js","names":["SliderPrimitive"],"sources":["../src/slider.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { Slider as SliderPrimitive } from \"@base-ui/react/slider\"\n\nimport { cn } from \"./lib/utils\"\n\ntype SliderProps = React.ComponentProps<typeof SliderPrimitive.Root> & {\n controlClassName?: string\n /**\n * Accessible name for the thumb(s). The thumb is the interactive slider\n * control, so it needs its own name — a plain `aria-label` on `<Slider>`\n * labels the group, not the thumb. Receives the thumb index for range sliders.\n */\n getThumbAriaLabel?: (index: number) => string\n}\n\nfunction Slider({\n className,\n controlClassName,\n defaultValue,\n value,\n min = 0,\n max = 100,\n orientation = \"horizontal\",\n \"aria-label\": ariaLabel,\n getThumbAriaLabel,\n ...props\n}: SliderProps) {\n const _values = React.useMemo(\n () =>\n Array.isArray(value)\n ? value\n : Array.isArray(defaultValue)\n ? defaultValue\n : [min, max],\n [value, defaultValue, min, max]\n )\n\n return (\n <SliderPrimitive.Root\n className={cn(\n \"data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full\",\n className\n )}\n data-slot=\"slider\"\n defaultValue={defaultValue}\n value={value}\n min={min}\n max={max}\n orientation={orientation}\n thumbAlignment=\"edge\"\n {...props}\n >\n <SliderPrimitive.Control\n className={cn(\n \"relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-disabled:cursor-not-allowed data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-40 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col\",\n controlClassName\n )}\n >\n <SliderPrimitive.Track\n data-slot=\"slider-track\"\n className=\"bg-secondary relative grow overflow-hidden rounded-full select-none data-[orientation=horizontal]:h-1 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1\"\n >\n <SliderPrimitive.Indicator\n data-slot=\"slider-range\"\n className=\"bg-primary select-none data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full\"\n />\n </SliderPrimitive.Track>\n {Array.from({ length: _values.length }, (_, index) => (\n <SliderPrimitive.Thumb\n data-slot=\"slider-thumb\"\n key={index}\n aria-label={getThumbAriaLabel ? getThumbAriaLabel(index) : ariaLabel}\n className=\"border-focus ring-focus/50 relative block size-3 shrink-0 rounded-full border bg-white motion-color cursor-clickable select-none after:absolute after:-inset-2 hover:ring-3 focus-visible:ring-3 focus-visible:outline-hidden active:ring-3 data-disabled:pointer-events-none\"\n />\n ))}\n </SliderPrimitive.Control>\n </SliderPrimitive.Root>\n )\n}\n\nexport { Slider }\n"],"mappings":";;;;;;AAiBA,SAAS,OAAO,EACd,WACA,kBACA,cACA,OACA,MAAM,GACN,MAAM,KACN,cAAc,cACd,cAAc,WACd,mBACA,GAAG,SACW;CACd,MAAM,UAAU,MAAM,cAElB,MAAM,QAAQ,MAAM,GAChB,QACA,MAAM,QAAQ,aAAa,GACzB,eACA,CAAC,KAAK,IAAI,EAClB;EAAC;EAAO;EAAc;EAAK;EAAI,CAChC;AAED,QACE,oBAACA,SAAgB,MAAjB;EACE,WAAW,GACT,2EACA,UACD;EACD,aAAU;EACI;EACP;EACF;EACA;EACQ;EACb,gBAAe;EACf,GAAI;YAEJ,qBAACA,SAAgB,SAAjB;GACE,WAAW,GACT,sQACA,iBACD;aAJH,CAME,oBAACA,SAAgB,OAAjB;IACE,aAAU;IACV,WAAU;cAEV,oBAACA,SAAgB,WAAjB;KACE,aAAU;KACV,WAAU;KACV,CAAA;IACoB,CAAA,EACvB,MAAM,KAAK,EAAE,QAAQ,QAAQ,QAAQ,GAAG,GAAG,UAC1C,oBAACA,SAAgB,OAAjB;IACE,aAAU;IAEV,cAAY,oBAAoB,kBAAkB,MAAM,GAAG;IAC3D,WAAU;IACV,EAHK,MAGL,CACF,CACsB;;EACL,CAAA"}
@@ -1 +1 @@
1
- {"version":3,"file":"table.d.ts","names":[],"sources":["../src/table.tsx"],"mappings":";;;;KAMK,UAAA,GAAa,KAAA,CAAM,cAAA;AAAA,KACnB,gBAAA,GAAmB,KAAA,CAAM,cAAA;AAAA,KACzB,cAAA,GAAiB,KAAA,CAAM,cAAA;AAAA,KACvB,gBAAA,GAAmB,KAAA,CAAM,cAAA;AAAA,KACzB,aAAA,GAAgB,KAAA,CAAM,cAAA;AAAA,KACtB,cAAA,GAAiB,KAAA,CAAM,cAAA;AAAA,KACvB,cAAA,GAAiB,KAAA,CAAM,cAAA;AAAA,KACvB,iBAAA,GAAoB,KAAA,CAAM,cAAA;AAAA,iBAEtB,KAAA,CAAA;EAAQ,SAAA;EAAA,GAAc;AAAA,GAAS,UAAA,GAAU,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAezC,WAAA,CAAA;EAAc,SAAA;EAAA,GAAc;AAAA,GAAS,gBAAA,GAAgB,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAUrD,SAAA,CAAA;EAAY,SAAA;EAAA,GAAc;AAAA,GAAS,cAAA,GAAc,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAUjD,WAAA,CAAA;EAAc,SAAA;EAAA,GAAc;AAAA,GAAS,gBAAA,GAAgB,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAarD,QAAA,CAAA;EAAW,SAAA;EAAA,GAAc;AAAA,GAAS,aAAA,GAAa,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAa/C,SAAA,CAAA;EAAY,SAAA;EAAA,GAAc;AAAA,GAAS,cAAA,GAAc,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAajD,SAAA,CAAA;EAAY,SAAA;EAAA,GAAc;AAAA,GAAS,cAAA,GAAc,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAajD,YAAA,CAAA;EAAe,SAAA;EAAA,GAAc;AAAA,GAAS,iBAAA,GAAiB,oBAAA,CAAA,GAAA,CAAA,OAAA"}
1
+ {"version":3,"file":"table.d.ts","names":[],"sources":["../src/table.tsx"],"mappings":";;;;KAMK,UAAA,GAAa,KAAA,CAAM,cAAA;AAAA,KACnB,gBAAA,GAAmB,KAAA,CAAM,cAAA;AAAA,KACzB,cAAA,GAAiB,KAAA,CAAM,cAAA;AAAA,KACvB,gBAAA,GAAmB,KAAA,CAAM,cAAA;AAAA,KACzB,aAAA,GAAgB,KAAA,CAAM,cAAA;AAAA,KACtB,cAAA,GAAiB,KAAA,CAAM,cAAA;AAAA,KACvB,cAAA,GAAiB,KAAA,CAAM,cAAA;AAAA,KACvB,iBAAA,GAAoB,KAAA,CAAM,cAAA;AAAA,iBAEtB,KAAA,CAAA;EAAQ,SAAA;EAAA,GAAc;AAAA,GAAS,UAAA,GAAU,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAkBzC,WAAA,CAAA;EAAc,SAAA;EAAA,GAAc;AAAA,GAAS,gBAAA,GAAgB,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAUrD,SAAA,CAAA;EAAY,SAAA;EAAA,GAAc;AAAA,GAAS,cAAA,GAAc,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAUjD,WAAA,CAAA;EAAc,SAAA;EAAA,GAAc;AAAA,GAAS,gBAAA,GAAgB,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAarD,QAAA,CAAA;EAAW,SAAA;EAAA,GAAc;AAAA,GAAS,aAAA,GAAa,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAa/C,SAAA,CAAA;EAAY,SAAA;EAAA,GAAc;AAAA,GAAS,cAAA,GAAc,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAajD,SAAA,CAAA;EAAY,SAAA;EAAA,GAAc;AAAA,GAAS,cAAA,GAAc,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAajD,YAAA,CAAA;EAAe,SAAA;EAAA,GAAc;AAAA,GAAS,iBAAA,GAAiB,oBAAA,CAAA,GAAA,CAAA,OAAA"}
package/dist/table.js CHANGED
@@ -6,7 +6,10 @@ import { jsx } from "react/jsx-runtime";
6
6
  function Table({ className, ...props }) {
7
7
  return /* @__PURE__ */ jsx("div", {
8
8
  "data-slot": "table-container",
9
- className: "relative w-full overflow-x-auto",
9
+ role: "region",
10
+ "aria-label": "Table",
11
+ tabIndex: 0,
12
+ className: "relative w-full overflow-x-auto focus-visible:outline-hidden focus-visible:ring-3 focus-visible:ring-focus/50",
10
13
  children: /* @__PURE__ */ jsx("table", {
11
14
  "data-slot": "table",
12
15
  className: cn("w-full caption-bottom text-sm", className),
package/dist/table.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"table.js","names":[],"sources":["../src/table.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"./lib/utils\"\n\ntype TableProps = React.ComponentProps<\"table\">\ntype TableHeaderProps = React.ComponentProps<\"thead\">\ntype TableBodyProps = React.ComponentProps<\"tbody\">\ntype TableFooterProps = React.ComponentProps<\"tfoot\">\ntype TableRowProps = React.ComponentProps<\"tr\">\ntype TableHeadProps = React.ComponentProps<\"th\">\ntype TableCellProps = React.ComponentProps<\"td\">\ntype TableCaptionProps = React.ComponentProps<\"caption\">\n\nfunction Table({ className, ...props }: TableProps) {\n return (\n <div\n data-slot=\"table-container\"\n className=\"relative w-full overflow-x-auto\"\n >\n <table\n data-slot=\"table\"\n className={cn(\"w-full caption-bottom text-sm\", className)}\n {...props}\n />\n </div>\n )\n}\n\nfunction TableHeader({ className, ...props }: TableHeaderProps) {\n return (\n <thead\n data-slot=\"table-header\"\n className={cn(\"[&_tr]:border-b [&_tr]:border-edge\", className)}\n {...props}\n />\n )\n}\n\nfunction TableBody({ className, ...props }: TableBodyProps) {\n return (\n <tbody\n data-slot=\"table-body\"\n className={cn(\"[&_tr:last-child]:border-0\", className)}\n {...props}\n />\n )\n}\n\nfunction TableFooter({ className, ...props }: TableFooterProps) {\n return (\n <tfoot\n data-slot=\"table-footer\"\n className={cn(\n \"bg-secondary/50 border-t border-edge font-medium [&>tr]:last:border-b-0\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction TableRow({ className, ...props }: TableRowProps) {\n return (\n <tr\n data-slot=\"table-row\"\n className={cn(\n \"hover:bg-secondary/50 aria-selected:bg-secondary border-b border-edge transition-colors\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction TableHead({ className, ...props }: TableHeadProps) {\n return (\n <th\n data-slot=\"table-head\"\n className={cn(\n \"text-contrast h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction TableCell({ className, ...props }: TableCellProps) {\n return (\n <td\n data-slot=\"table-cell\"\n className={cn(\n \"p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction TableCaption({ className, ...props }: TableCaptionProps) {\n return (\n <caption\n data-slot=\"table-caption\"\n className={cn(\"text-muted mt-4 text-sm\", className)}\n {...props}\n />\n )\n}\n\nexport {\n Table,\n TableHeader,\n TableBody,\n TableFooter,\n TableHead,\n TableRow,\n TableCell,\n TableCaption,\n}\n"],"mappings":";;;;;AAeA,SAAS,MAAM,EAAE,WAAW,GAAG,SAAqB;AAClD,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAU;YAEV,oBAAC,SAAD;GACE,aAAU;GACV,WAAW,GAAG,iCAAiC,UAAU;GACzD,GAAI;GACJ,CAAA;EACE,CAAA;;AAIV,SAAS,YAAY,EAAE,WAAW,GAAG,SAA2B;AAC9D,QACE,oBAAC,SAAD;EACE,aAAU;EACV,WAAW,GAAG,sCAAsC,UAAU;EAC9D,GAAI;EACJ,CAAA;;AAIN,SAAS,UAAU,EAAE,WAAW,GAAG,SAAyB;AAC1D,QACE,oBAAC,SAAD;EACE,aAAU;EACV,WAAW,GAAG,8BAA8B,UAAU;EACtD,GAAI;EACJ,CAAA;;AAIN,SAAS,YAAY,EAAE,WAAW,GAAG,SAA2B;AAC9D,QACE,oBAAC,SAAD;EACE,aAAU;EACV,WAAW,GACT,2EACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,SAAS,EAAE,WAAW,GAAG,SAAwB;AACxD,QACE,oBAAC,MAAD;EACE,aAAU;EACV,WAAW,GACT,2FACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,UAAU,EAAE,WAAW,GAAG,SAAyB;AAC1D,QACE,oBAAC,MAAD;EACE,aAAU;EACV,WAAW,GACT,8GACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,UAAU,EAAE,WAAW,GAAG,SAAyB;AAC1D,QACE,oBAAC,MAAD;EACE,aAAU;EACV,WAAW,GACT,oEACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,aAAa,EAAE,WAAW,GAAG,SAA4B;AAChE,QACE,oBAAC,WAAD;EACE,aAAU;EACV,WAAW,GAAG,2BAA2B,UAAU;EACnD,GAAI;EACJ,CAAA"}
1
+ {"version":3,"file":"table.js","names":[],"sources":["../src/table.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"./lib/utils\"\n\ntype TableProps = React.ComponentProps<\"table\">\ntype TableHeaderProps = React.ComponentProps<\"thead\">\ntype TableBodyProps = React.ComponentProps<\"tbody\">\ntype TableFooterProps = React.ComponentProps<\"tfoot\">\ntype TableRowProps = React.ComponentProps<\"tr\">\ntype TableHeadProps = React.ComponentProps<\"th\">\ntype TableCellProps = React.ComponentProps<\"td\">\ntype TableCaptionProps = React.ComponentProps<\"caption\">\n\nfunction Table({ className, ...props }: TableProps) {\n return (\n <div\n data-slot=\"table-container\"\n role=\"region\"\n aria-label=\"Table\"\n tabIndex={0}\n className=\"relative w-full overflow-x-auto focus-visible:outline-hidden focus-visible:ring-3 focus-visible:ring-focus/50\"\n >\n <table\n data-slot=\"table\"\n className={cn(\"w-full caption-bottom text-sm\", className)}\n {...props}\n />\n </div>\n )\n}\n\nfunction TableHeader({ className, ...props }: TableHeaderProps) {\n return (\n <thead\n data-slot=\"table-header\"\n className={cn(\"[&_tr]:border-b [&_tr]:border-edge\", className)}\n {...props}\n />\n )\n}\n\nfunction TableBody({ className, ...props }: TableBodyProps) {\n return (\n <tbody\n data-slot=\"table-body\"\n className={cn(\"[&_tr:last-child]:border-0\", className)}\n {...props}\n />\n )\n}\n\nfunction TableFooter({ className, ...props }: TableFooterProps) {\n return (\n <tfoot\n data-slot=\"table-footer\"\n className={cn(\n \"bg-secondary/50 border-t border-edge font-medium [&>tr]:last:border-b-0\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction TableRow({ className, ...props }: TableRowProps) {\n return (\n <tr\n data-slot=\"table-row\"\n className={cn(\n \"hover:bg-secondary/50 aria-selected:bg-secondary border-b border-edge transition-colors\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction TableHead({ className, ...props }: TableHeadProps) {\n return (\n <th\n data-slot=\"table-head\"\n className={cn(\n \"text-contrast h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction TableCell({ className, ...props }: TableCellProps) {\n return (\n <td\n data-slot=\"table-cell\"\n className={cn(\n \"p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction TableCaption({ className, ...props }: TableCaptionProps) {\n return (\n <caption\n data-slot=\"table-caption\"\n className={cn(\"text-muted mt-4 text-sm\", className)}\n {...props}\n />\n )\n}\n\nexport {\n Table,\n TableHeader,\n TableBody,\n TableFooter,\n TableHead,\n TableRow,\n TableCell,\n TableCaption,\n}\n"],"mappings":";;;;;AAeA,SAAS,MAAM,EAAE,WAAW,GAAG,SAAqB;AAClD,QACE,oBAAC,OAAD;EACE,aAAU;EACV,MAAK;EACL,cAAW;EACX,UAAU;EACV,WAAU;YAEV,oBAAC,SAAD;GACE,aAAU;GACV,WAAW,GAAG,iCAAiC,UAAU;GACzD,GAAI;GACJ,CAAA;EACE,CAAA;;AAIV,SAAS,YAAY,EAAE,WAAW,GAAG,SAA2B;AAC9D,QACE,oBAAC,SAAD;EACE,aAAU;EACV,WAAW,GAAG,sCAAsC,UAAU;EAC9D,GAAI;EACJ,CAAA;;AAIN,SAAS,UAAU,EAAE,WAAW,GAAG,SAAyB;AAC1D,QACE,oBAAC,SAAD;EACE,aAAU;EACV,WAAW,GAAG,8BAA8B,UAAU;EACtD,GAAI;EACJ,CAAA;;AAIN,SAAS,YAAY,EAAE,WAAW,GAAG,SAA2B;AAC9D,QACE,oBAAC,SAAD;EACE,aAAU;EACV,WAAW,GACT,2EACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,SAAS,EAAE,WAAW,GAAG,SAAwB;AACxD,QACE,oBAAC,MAAD;EACE,aAAU;EACV,WAAW,GACT,2FACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,UAAU,EAAE,WAAW,GAAG,SAAyB;AAC1D,QACE,oBAAC,MAAD;EACE,aAAU;EACV,WAAW,GACT,8GACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,UAAU,EAAE,WAAW,GAAG,SAAyB;AAC1D,QACE,oBAAC,MAAD;EACE,aAAU;EACV,WAAW,GACT,oEACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,aAAa,EAAE,WAAW,GAAG,SAA4B;AAChE,QACE,oBAAC,WAAD;EACE,aAAU;EACV,WAAW,GAAG,2BAA2B,UAAU;EACnD,GAAI;EACJ,CAAA"}
package/dist/toast.d.ts CHANGED
@@ -7,7 +7,7 @@ import * as _$_base_ui_react0 from "@base-ui/react";
7
7
  //#region src/toast.d.ts
8
8
  declare const toastRootClass = "bg-elevated text-contrast ring-contrast/10 rounded-md p-4 text-sm shadow-md ring-1 outline-none select-none";
9
9
  declare const toastIconVariants: (props?: ({
10
- type?: "success" | "loading" | "info" | "warning" | "error" | null | undefined;
10
+ type?: "success" | "warning" | "loading" | "info" | "error" | null | undefined;
11
11
  } & _$class_variance_authority_types0.ClassProp) | undefined) => string;
12
12
  declare const toastViewportVariants: (props?: ({
13
13
  position?: "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right" | null | undefined;
@@ -1 +1 @@
1
- {"version":3,"file":"toast.d.ts","names":[],"sources":["../src/toast.tsx"],"mappings":";;;;;;;cAoBM,cAAA;AAAA,cAGA,iBAAA,GAAiB,KAAA;;IAatB,iCAAA,CAAA,SAAA;AAAA,cAEK,qBAAA,GAAqB,KAAA;;IAiB1B,iCAAA,CAAA,SAAA;AAAA,KAMI,SAAA;AAAA,KAEA,YAAA;EACH,KAAA;EACA,WAAA;EACA,IAAA,GAAO,SAAA;EACP,OAAA;EACA,QAAA;EACA,WAAA,GAAc,KAAA,CAAM,wBAAA;EACpB,OAAA;EACA,QAAA;AAAA;AAAA,KAGG,eAAA;AAAA,KAQA,YAAA;EACH,QAAA,GAAW,eAAA;EACX,KAAA;EACA,OAAA;AAAA;AAAA,KAGG,UAAA,GAAa,KAAA,CAAM,cAAA,QAAsB,OAAA,CAAe,IAAA;AAAA,KACxD,eAAA,GAAkB,KAAA,CAAM,cAAA,QAAsB,OAAA,CAAe,KAAA;AAAA,KAC7D,qBAAA,GAAwB,KAAA,CAAM,cAAA,QAAsB,OAAA,CAAe,WAAA;AAAA,KACnE,gBAAA,GAAmB,KAAA,CAAM,cAAA,QAAsB,OAAA,CAAe,MAAA;AAAA,KAC9D,eAAA,GAAkB,KAAA,CAAM,cAAA,QAAsB,OAAA,CAAe,KAAA;AAAA,cAM5D,YAAA,EAAkD,iBAAA,CAAtC,YAAA;AAAA,cAEZ,KAAA,IAAK,cAAA,WACiB,YAAA;2BAQD,OAAA,GAAY,IAAA,CAAK,YAAA;yBAGnB,OAAA,GAAY,IAAA,CAAK,YAAA;2BAGf,OAAA,GAAY,IAAA,CAAK,YAAA;wBAGpB,OAAA,GAAY,IAAA,CAAK,YAAA;2BAGd,OAAA,GAAY,IAAA,CAAK,YAAA;;uBAUrB,OAAA,EAAW,OAAA,CAAQ,YAAA;;;iBAmBjC,SAAA,CAAA;EAAY;AAAA;EAAU,IAAA,GAAO,SAAA;AAAA,IAAW,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAUxC,KAAA,CAAA;EAAQ,SAAA;EAAA,GAAc;AAAA,GAAS,UAAA,GAAU,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAoBzC,UAAA,CAAA;EAAa,SAAA;EAAA,GAAc;AAAA,GAAS,eAAA,GAAe,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAUnD,gBAAA,CAAA;EAAmB,SAAA;EAAA,GAAc;AAAA,GAAS,qBAAA,GAAqB,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAU/D,WAAA,CAAA;EAAc,SAAA;EAAA,GAAc;AAAA,GAAS,gBAAA,GAAgB,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAarD,UAAA,CAAA;EAAa,SAAA;EAAW,QAAA;EAAA,GAAa;AAAA,GAAS,eAAA,GAAe,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBA0K7D,OAAA,CAAA;EAAU,QAAA;EAAU,KAAA;EAAO;AAAA,GAAW,YAAA,GAAY,oBAAA,CAAA,GAAA,CAAA,OAAA"}
1
+ {"version":3,"file":"toast.d.ts","names":[],"sources":["../src/toast.tsx"],"mappings":";;;;;;;cAoBM,cAAA;AAAA,cAGA,iBAAA,GAAiB,KAAA;;IAatB,iCAAA,CAAA,SAAA;AAAA,cAEK,qBAAA,GAAqB,KAAA;;IAiB1B,iCAAA,CAAA,SAAA;AAAA,KAMI,SAAA;AAAA,KAEA,YAAA;EACH,KAAA;EACA,WAAA;EACA,IAAA,GAAO,SAAA;EACP,OAAA;EACA,QAAA;EACA,WAAA,GAAc,KAAA,CAAM,wBAAA;EACpB,OAAA;EACA,QAAA;AAAA;AAAA,KAGG,eAAA;AAAA,KAQA,YAAA;EACH,QAAA,GAAW,eAAA;EACX,KAAA;EACA,OAAA;AAAA;AAAA,KAGG,UAAA,GAAa,KAAA,CAAM,cAAA,QAAsB,OAAA,CAAe,IAAA;AAAA,KACxD,eAAA,GAAkB,KAAA,CAAM,cAAA,QAAsB,OAAA,CAAe,KAAA;AAAA,KAC7D,qBAAA,GAAwB,KAAA,CAAM,cAAA,QAAsB,OAAA,CAAe,WAAA;AAAA,KACnE,gBAAA,GAAmB,KAAA,CAAM,cAAA,QAAsB,OAAA,CAAe,MAAA;AAAA,KAC9D,eAAA,GAAkB,KAAA,CAAM,cAAA,QAAsB,OAAA,CAAe,KAAA;AAAA,cAM5D,YAAA,EAAkD,iBAAA,CAAtC,YAAA;AAAA,cAEZ,KAAA,IAAK,cAAA,WACiB,YAAA;2BAQD,OAAA,GAAY,IAAA,CAAK,YAAA;yBAGnB,OAAA,GAAY,IAAA,CAAK,YAAA;2BAGf,OAAA,GAAY,IAAA,CAAK,YAAA;wBAGpB,OAAA,GAAY,IAAA,CAAK,YAAA;2BAGd,OAAA,GAAY,IAAA,CAAK,YAAA;;uBAUrB,OAAA,EAAW,OAAA,CAAQ,YAAA;;;iBA2BjC,SAAA,CAAA;EAAY;AAAA;EAAU,IAAA,GAAO,SAAA;AAAA,IAAW,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAiBxC,KAAA,CAAA;EAAQ,SAAA;EAAA,GAAc;AAAA,GAAS,UAAA,GAAU,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAoBzC,UAAA,CAAA;EAAa,SAAA;EAAA,GAAc;AAAA,GAAS,eAAA,GAAe,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAUnD,gBAAA,CAAA;EAAmB,SAAA;EAAA,GAAc;AAAA,GAAS,qBAAA,GAAqB,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAU/D,WAAA,CAAA;EAAc,SAAA;EAAA,GAAc;AAAA,GAAS,gBAAA,GAAgB,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAarD,UAAA,CAAA;EAAa,SAAA;EAAW,QAAA;EAAA,GAAa;AAAA,GAAS,eAAA,GAAe,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBA0K7D,OAAA,CAAA;EAAU,QAAA;EAAU,KAAA;EAAO;AAAA,GAAW,YAAA,GAAY,oBAAA,CAAA,GAAA,CAAA,OAAA"}
package/dist/toast.js CHANGED
@@ -67,10 +67,20 @@ const iconMap = {
67
67
  warning: AlertTriangleIcon,
68
68
  error: ErrorCircleIcon
69
69
  };
70
+ const toastTypeLabels = {
71
+ loading: "Loading",
72
+ success: "Success",
73
+ info: "Information",
74
+ warning: "Warning",
75
+ error: "Error"
76
+ };
70
77
  function ToastIcon({ type }) {
71
78
  if (!type) return null;
72
79
  const Icon = iconMap[type];
73
- return /* @__PURE__ */ jsx(Icon, { className: cn(toastIconVariants({ type })) });
80
+ return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Icon, { className: cn(toastIconVariants({ type })) }), /* @__PURE__ */ jsx("span", {
81
+ className: "sr-only",
82
+ children: toastTypeLabels[type]
83
+ })] });
74
84
  }
75
85
  function Toast({ className, ...props }) {
76
86
  return /* @__PURE__ */ jsx(Toast$1.Root, {
@@ -103,14 +113,14 @@ function ToastDescription({ className, ...props }) {
103
113
  function ToastAction({ className, ...props }) {
104
114
  return /* @__PURE__ */ jsx(Toast$1.Action, {
105
115
  "data-slot": "toast-action",
106
- className: cn("hover:bg-secondary inline-flex h-7 items-center rounded-md border border-line px-2.5 text-xs font-medium transition-colors", className),
116
+ className: cn("hover:bg-secondary inline-flex h-7 items-center rounded-md border border-line px-2.5 text-xs font-medium transition-colors outline-none focus-visible:border-focus focus-visible:ring-focus/50 focus-visible:ring-3", className),
107
117
  ...props
108
118
  });
109
119
  }
110
120
  function ToastClose({ className, children, ...props }) {
111
121
  return /* @__PURE__ */ jsx(Toast$1.Close, {
112
122
  "data-slot": "toast-close",
113
- className: cn("text-muted hover:text-contrast shrink-0 rounded-md p-0.5 transition-colors", className),
123
+ className: cn("text-muted hover:text-contrast shrink-0 rounded-md p-0.5 transition-colors outline-none focus-visible:ring-focus/50 focus-visible:ring-3", className),
114
124
  ...props,
115
125
  children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(CloseIcon, { className: "size-4" }), /* @__PURE__ */ jsx("span", {
116
126
  className: "sr-only",
package/dist/toast.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"toast.js","names":["ToastPrimitive"],"sources":["../src/toast.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { Toast as ToastPrimitive } from \"@base-ui/react/toast\"\nimport { cva } from \"class-variance-authority\"\n\nimport { cn } from \"./lib/utils\"\nimport {\n CloseIcon,\n SuccessCircleIcon,\n InfoCircleIcon,\n AlertTriangleIcon,\n ErrorCircleIcon,\n LoaderIcon,\n} from \"./lib/internal-icons\"\n\n// ---------------------------------------------------------------------------\n// Styles\n// ---------------------------------------------------------------------------\n\nconst toastRootClass =\n \"bg-elevated text-contrast ring-contrast/10 rounded-md p-4 text-sm shadow-md ring-1 outline-none select-none\"\n\nconst toastIconVariants = cva(\n \"mt-0.5 size-4 shrink-0\",\n {\n variants: {\n type: {\n loading: \"text-muted animate-spin\",\n success: \"text-success\",\n info: \"text-info\",\n warning: \"text-warning\",\n error: \"text-destructive\",\n },\n },\n }\n)\n\nconst toastViewportVariants = cva(\n \"fixed z-[100] flex w-full outline-none sm:max-w-sm\",\n {\n variants: {\n position: {\n \"top-left\": \"top-4 left-4\",\n \"top-center\": \"top-4 right-0 left-0 mx-auto\",\n \"top-right\": \"top-4 right-4\",\n \"bottom-left\": \"bottom-4 left-4\",\n \"bottom-center\": \"bottom-4 right-0 left-0 mx-auto\",\n \"bottom-right\": \"bottom-4 right-4\",\n },\n },\n defaultVariants: {\n position: \"bottom-right\",\n },\n },\n)\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\ntype ToastType = \"loading\" | \"success\" | \"info\" | \"warning\" | \"error\"\n\ntype ToastOptions = {\n title?: string\n description?: string\n type?: ToastType\n timeout?: number\n priority?: \"low\" | \"high\"\n actionProps?: React.ComponentPropsWithoutRef<\"button\">\n onClose?: () => void\n onRemove?: () => void\n}\n\ntype ToasterPosition =\n | \"top-left\"\n | \"top-center\"\n | \"top-right\"\n | \"bottom-left\"\n | \"bottom-center\"\n | \"bottom-right\"\n\ntype ToasterProps = {\n position?: ToasterPosition\n limit?: number\n timeout?: number\n}\n\ntype ToastProps = React.ComponentProps<typeof ToastPrimitive.Root>\ntype ToastTitleProps = React.ComponentProps<typeof ToastPrimitive.Title>\ntype ToastDescriptionProps = React.ComponentProps<typeof ToastPrimitive.Description>\ntype ToastActionProps = React.ComponentProps<typeof ToastPrimitive.Action>\ntype ToastCloseProps = React.ComponentProps<typeof ToastPrimitive.Close>\n\n// ---------------------------------------------------------------------------\n// Toast manager API\n// ---------------------------------------------------------------------------\n\nconst toastManager = ToastPrimitive.createToastManager()\n\nconst toast = Object.assign(\n (titleOrOptions: string | ToastOptions) => {\n const options =\n typeof titleOrOptions === \"string\"\n ? { title: titleOrOptions }\n : titleOrOptions\n return toastManager.add(options)\n },\n {\n success: (title: string, options?: Omit<ToastOptions, \"type\" | \"title\">) =>\n toastManager.add({ ...options, type: \"success\", title }),\n\n error: (title: string, options?: Omit<ToastOptions, \"type\" | \"title\">) =>\n toastManager.add({ ...options, type: \"error\", title }),\n\n warning: (title: string, options?: Omit<ToastOptions, \"type\" | \"title\">) =>\n toastManager.add({ ...options, type: \"warning\", title }),\n\n info: (title: string, options?: Omit<ToastOptions, \"type\" | \"title\">) =>\n toastManager.add({ ...options, type: \"info\", title }),\n\n loading: (title: string, options?: Omit<ToastOptions, \"type\" | \"title\">) =>\n toastManager.add({\n ...options,\n type: \"loading\",\n title,\n timeout: options?.timeout ?? 0,\n }),\n\n dismiss: (id: string) => toastManager.close(id),\n\n update: (id: string, updates: Partial<ToastOptions>) =>\n toastManager.update(id, updates),\n\n promise: toastManager.promise.bind(toastManager),\n },\n)\n\n// ---------------------------------------------------------------------------\n// Icons\n// ---------------------------------------------------------------------------\n\nconst iconMap = {\n loading: LoaderIcon,\n success: SuccessCircleIcon,\n info: InfoCircleIcon,\n warning: AlertTriangleIcon,\n error: ErrorCircleIcon,\n} as const\n\nfunction ToastIcon({ type }: { type?: ToastType }) {\n if (!type) return null\n const Icon = iconMap[type]\n return <Icon className={cn(toastIconVariants({ type }))} />\n}\n\n// ---------------------------------------------------------------------------\n// Toast primitives\n// ---------------------------------------------------------------------------\n\nfunction Toast({ className, ...props }: ToastProps) {\n return (\n <ToastPrimitive.Root\n data-slot=\"toast\"\n className={cn(toastRootClass, className)}\n {...props}\n />\n )\n}\n\nfunction ToastBody({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"toast-body\"\n className={cn(\"flex flex-1 flex-col gap-1\", className)}\n {...props}\n />\n )\n}\n\nfunction ToastTitle({ className, ...props }: ToastTitleProps) {\n return (\n <ToastPrimitive.Title\n data-slot=\"toast-title\"\n className={cn(\"text-sm font-medium\", className)}\n {...props}\n />\n )\n}\n\nfunction ToastDescription({ className, ...props }: ToastDescriptionProps) {\n return (\n <ToastPrimitive.Description\n data-slot=\"toast-description\"\n className={cn(\"text-muted text-sm\", className)}\n {...props}\n />\n )\n}\n\nfunction ToastAction({ className, ...props }: ToastActionProps) {\n return (\n <ToastPrimitive.Action\n data-slot=\"toast-action\"\n className={cn(\n \"hover:bg-secondary inline-flex h-7 items-center rounded-md border border-line px-2.5 text-xs font-medium transition-colors\",\n className,\n )}\n {...props}\n />\n )\n}\n\nfunction ToastClose({ className, children, ...props }: ToastCloseProps) {\n return (\n <ToastPrimitive.Close\n data-slot=\"toast-close\"\n className={cn(\n \"text-muted hover:text-contrast shrink-0 rounded-md p-0.5 transition-colors\",\n className,\n )}\n {...props}\n >\n {children ?? (\n <>\n <CloseIcon className=\"size-4\" />\n <span className=\"sr-only\">Close</span>\n </>\n )}\n </ToastPrimitive.Close>\n )\n}\n\n// ---------------------------------------------------------------------------\n// 3D stacking\n// ---------------------------------------------------------------------------\n\n// Shared classes for both top and bottom positions\nconst STACKING_BASE = [\n // CSS custom properties\n \"[--toast-gap:0.5rem]\",\n \"[--toast-peek:0.5rem]\",\n \"[--toast-scale:calc(max(0,1-(var(--toast-index)*0.05)))]\",\n \"[--toast-shrink:calc(1-var(--toast-scale))]\",\n \"[--toast-stack-height:var(--toast-frontmost-height,var(--toast-height))]\",\n // Layout\n \"absolute w-full\",\n \"[z-index:calc(1000-var(--toast-index))]\",\n \"h-[var(--toast-stack-height)] data-[expanded]:h-[var(--toast-height)]\",\n // Depth blur — subtle defocus on behind toasts, cleared on expand\n \"[filter:blur(calc(var(--toast-index)*0.4px))]\",\n \"data-[expanded]:[filter:none]\",\n // Expanded (hover)\n \"data-[expanded]:[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-stack-offset-y)))]\",\n // Exit — shared\n \"data-[ending-style]:opacity-0\",\n \"data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))]\",\n \"data-[expanded]:data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))]\",\n \"data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--toast-stack-offset-y))]\",\n \"data-[expanded]:data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--toast-stack-offset-y))]\",\n \"data-[ending-style]:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))]\",\n \"data-[expanded]:data-[ending-style]:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))]\",\n \"data-[limited]:opacity-0\",\n \"[transition:transform_0.5s_cubic-bezier(0.22,1,0.36,1),opacity_0.5s,filter_0.5s,height_0.15s]\",\n].join(\" \")\n\n// Direction-specific classes — sign flips for anchor, offset, transform, enter/exit\nconst STACKING_TOP = [\n \"[--toast-stack-offset-y:calc(var(--toast-offset-y)+calc(var(--toast-index)*var(--toast-gap))+var(--toast-swipe-movement-y))]\",\n \"top-0 origin-top\",\n \"[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)+(var(--toast-index)*var(--toast-peek))+(var(--toast-shrink)*var(--toast-stack-height))))_scale(var(--toast-scale))]\",\n \"after:absolute after:bottom-full after:left-0 after:h-[calc(var(--toast-gap)+1px)] after:w-full after:content-['']\",\n \"data-[starting-style]:[transform:translateY(-150%)]\",\n \"[&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:[transform:translateY(-150%)]\",\n].join(\" \")\n\nconst STACKING_BOTTOM = [\n \"[--toast-stack-offset-y:calc(var(--toast-offset-y)*-1+calc(var(--toast-index)*var(--toast-gap)*-1)+var(--toast-swipe-movement-y))]\",\n \"bottom-0 origin-bottom\",\n \"[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)-(var(--toast-index)*var(--toast-peek))-(var(--toast-shrink)*var(--toast-stack-height))))_scale(var(--toast-scale))]\",\n \"after:absolute after:top-full after:left-0 after:h-[calc(var(--toast-gap)+1px)] after:w-full after:content-['']\",\n \"data-[starting-style]:[transform:translateY(150%)]\",\n \"[&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:[transform:translateY(150%)]\",\n].join(\" \")\n\nconst STACKING_TOP_CLASS = `${STACKING_BASE} ${STACKING_TOP}`\nconst STACKING_BOTTOM_CLASS = `${STACKING_BASE} ${STACKING_BOTTOM}`\n\n// ---------------------------------------------------------------------------\n// Toaster\n// ---------------------------------------------------------------------------\n\nfunction ToasterContent({ position = \"bottom-right\" }: Pick<ToasterProps, \"position\">) {\n const { toasts } = ToastPrimitive.useToastManager()\n const isTop = position.startsWith(\"top\")\n\n return (\n <ToastPrimitive.Portal>\n <ToastPrimitive.Viewport\n data-slot=\"toast-viewport\"\n className={cn(toastViewportVariants({ position }))}\n >\n {toasts.map((t) => (\n <Toast\n key={t.id}\n toast={t}\n swipeDirection={isTop ? [\"up\", \"right\"] : [\"down\", \"right\"]}\n className={isTop ? STACKING_TOP_CLASS : STACKING_BOTTOM_CLASS}\n >\n <ToastPrimitive.Content\n data-slot=\"toast-content\"\n className=\"flex items-start gap-3 overflow-hidden transition-opacity duration-200 data-[behind]:pointer-events-none data-[behind]:opacity-0 data-[expanded]:pointer-events-auto data-[expanded]:opacity-100\"\n >\n <ToastIcon type={t.type as ToastType | undefined} />\n\n <ToastBody>\n {t.title && <ToastTitle>{t.title}</ToastTitle>}\n {t.description && (\n <ToastDescription>{t.description}</ToastDescription>\n )}\n {t.actionProps && (\n <div className=\"mt-1.5\">\n <ToastAction {...t.actionProps} />\n </div>\n )}\n </ToastBody>\n\n <ToastClose />\n </ToastPrimitive.Content>\n </Toast>\n ))}\n </ToastPrimitive.Viewport>\n </ToastPrimitive.Portal>\n )\n}\n\n// The toast manager is a module-level singleton, so every mounted <Toaster/>\n// renders the SAME shared toast list — duplicating every toast. This registry\n// elects a single primary Toaster (the first mounted); the rest render null.\n// Guards against a consumer accidentally rendering two, and against Storybook\n// autodocs rendering several stories — each with a Toaster — on one page.\nconst mountedToasters: symbol[] = []\nconst toasterListeners = new Set<() => void>()\n\nfunction notifyToasters() {\n for (const listener of toasterListeners) {\n listener()\n }\n}\n\nfunction useIsPrimaryToaster() {\n const keyRef = React.useRef<symbol | null>(null)\n if (keyRef.current === null) {\n keyRef.current = Symbol(\"toaster\")\n }\n const key = keyRef.current\n\n const isPrimary = React.useSyncExternalStore(\n React.useCallback((onChange: () => void) => {\n toasterListeners.add(onChange)\n return () => {\n toasterListeners.delete(onChange)\n }\n }, []),\n () => mountedToasters[0] === key,\n () => false,\n )\n\n React.useEffect(() => {\n mountedToasters.push(key)\n notifyToasters()\n return () => {\n const index = mountedToasters.indexOf(key)\n if (index !== -1) {\n mountedToasters.splice(index, 1)\n }\n notifyToasters()\n }\n }, [key])\n\n return isPrimary\n}\n\nfunction Toaster({ position, limit, timeout }: ToasterProps) {\n const isPrimary = useIsPrimaryToaster()\n if (!isPrimary) {\n return null\n }\n return (\n <ToastPrimitive.Provider\n toastManager={toastManager}\n limit={limit}\n timeout={timeout}\n >\n <ToasterContent position={position} />\n </ToastPrimitive.Provider>\n )\n}\n\nexport {\n toastRootClass,\n toastIconVariants,\n toastViewportVariants,\n toastManager,\n toast,\n Toaster,\n Toast,\n ToastIcon,\n ToastTitle,\n ToastDescription,\n ToastAction,\n ToastClose,\n}\n\nexport type {\n ToastType,\n ToastOptions,\n ToasterPosition,\n ToasterProps\n}"],"mappings":"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"}
1
+ {"version":3,"file":"toast.js","names":["ToastPrimitive"],"sources":["../src/toast.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { Toast as ToastPrimitive } from \"@base-ui/react/toast\"\nimport { cva } from \"class-variance-authority\"\n\nimport { cn } from \"./lib/utils\"\nimport {\n CloseIcon,\n SuccessCircleIcon,\n InfoCircleIcon,\n AlertTriangleIcon,\n ErrorCircleIcon,\n LoaderIcon,\n} from \"./lib/internal-icons\"\n\n// ---------------------------------------------------------------------------\n// Styles\n// ---------------------------------------------------------------------------\n\nconst toastRootClass =\n \"bg-elevated text-contrast ring-contrast/10 rounded-md p-4 text-sm shadow-md ring-1 outline-none select-none\"\n\nconst toastIconVariants = cva(\n \"mt-0.5 size-4 shrink-0\",\n {\n variants: {\n type: {\n loading: \"text-muted animate-spin\",\n success: \"text-success\",\n info: \"text-info\",\n warning: \"text-warning\",\n error: \"text-destructive\",\n },\n },\n }\n)\n\nconst toastViewportVariants = cva(\n \"fixed z-[100] flex w-full outline-none sm:max-w-sm\",\n {\n variants: {\n position: {\n \"top-left\": \"top-4 left-4\",\n \"top-center\": \"top-4 right-0 left-0 mx-auto\",\n \"top-right\": \"top-4 right-4\",\n \"bottom-left\": \"bottom-4 left-4\",\n \"bottom-center\": \"bottom-4 right-0 left-0 mx-auto\",\n \"bottom-right\": \"bottom-4 right-4\",\n },\n },\n defaultVariants: {\n position: \"bottom-right\",\n },\n },\n)\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\ntype ToastType = \"loading\" | \"success\" | \"info\" | \"warning\" | \"error\"\n\ntype ToastOptions = {\n title?: string\n description?: string\n type?: ToastType\n timeout?: number\n priority?: \"low\" | \"high\"\n actionProps?: React.ComponentPropsWithoutRef<\"button\">\n onClose?: () => void\n onRemove?: () => void\n}\n\ntype ToasterPosition =\n | \"top-left\"\n | \"top-center\"\n | \"top-right\"\n | \"bottom-left\"\n | \"bottom-center\"\n | \"bottom-right\"\n\ntype ToasterProps = {\n position?: ToasterPosition\n limit?: number\n timeout?: number\n}\n\ntype ToastProps = React.ComponentProps<typeof ToastPrimitive.Root>\ntype ToastTitleProps = React.ComponentProps<typeof ToastPrimitive.Title>\ntype ToastDescriptionProps = React.ComponentProps<typeof ToastPrimitive.Description>\ntype ToastActionProps = React.ComponentProps<typeof ToastPrimitive.Action>\ntype ToastCloseProps = React.ComponentProps<typeof ToastPrimitive.Close>\n\n// ---------------------------------------------------------------------------\n// Toast manager API\n// ---------------------------------------------------------------------------\n\nconst toastManager = ToastPrimitive.createToastManager()\n\nconst toast = Object.assign(\n (titleOrOptions: string | ToastOptions) => {\n const options =\n typeof titleOrOptions === \"string\"\n ? { title: titleOrOptions }\n : titleOrOptions\n return toastManager.add(options)\n },\n {\n success: (title: string, options?: Omit<ToastOptions, \"type\" | \"title\">) =>\n toastManager.add({ ...options, type: \"success\", title }),\n\n error: (title: string, options?: Omit<ToastOptions, \"type\" | \"title\">) =>\n toastManager.add({ ...options, type: \"error\", title }),\n\n warning: (title: string, options?: Omit<ToastOptions, \"type\" | \"title\">) =>\n toastManager.add({ ...options, type: \"warning\", title }),\n\n info: (title: string, options?: Omit<ToastOptions, \"type\" | \"title\">) =>\n toastManager.add({ ...options, type: \"info\", title }),\n\n loading: (title: string, options?: Omit<ToastOptions, \"type\" | \"title\">) =>\n toastManager.add({\n ...options,\n type: \"loading\",\n title,\n timeout: options?.timeout ?? 0,\n }),\n\n dismiss: (id: string) => toastManager.close(id),\n\n update: (id: string, updates: Partial<ToastOptions>) =>\n toastManager.update(id, updates),\n\n promise: toastManager.promise.bind(toastManager),\n },\n)\n\n// ---------------------------------------------------------------------------\n// Icons\n// ---------------------------------------------------------------------------\n\nconst iconMap = {\n loading: LoaderIcon,\n success: SuccessCircleIcon,\n info: InfoCircleIcon,\n warning: AlertTriangleIcon,\n error: ErrorCircleIcon,\n} as const\n\nconst toastTypeLabels: Record<ToastType, string> = {\n loading: \"Loading\",\n success: \"Success\",\n info: \"Information\",\n warning: \"Warning\",\n error: \"Error\",\n}\n\nfunction ToastIcon({ type }: { type?: ToastType }) {\n if (!type) return null\n const Icon = iconMap[type]\n return (\n <>\n <Icon className={cn(toastIconVariants({ type }))} />\n {/* The icon is decorative (color/shape); announce the type in words so it\n * isn't conveyed by color alone. */}\n <span className=\"sr-only\">{toastTypeLabels[type]}</span>\n </>\n )\n}\n\n// ---------------------------------------------------------------------------\n// Toast primitives\n// ---------------------------------------------------------------------------\n\nfunction Toast({ className, ...props }: ToastProps) {\n return (\n <ToastPrimitive.Root\n data-slot=\"toast\"\n className={cn(toastRootClass, className)}\n {...props}\n />\n )\n}\n\nfunction ToastBody({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"toast-body\"\n className={cn(\"flex flex-1 flex-col gap-1\", className)}\n {...props}\n />\n )\n}\n\nfunction ToastTitle({ className, ...props }: ToastTitleProps) {\n return (\n <ToastPrimitive.Title\n data-slot=\"toast-title\"\n className={cn(\"text-sm font-medium\", className)}\n {...props}\n />\n )\n}\n\nfunction ToastDescription({ className, ...props }: ToastDescriptionProps) {\n return (\n <ToastPrimitive.Description\n data-slot=\"toast-description\"\n className={cn(\"text-muted text-sm\", className)}\n {...props}\n />\n )\n}\n\nfunction ToastAction({ className, ...props }: ToastActionProps) {\n return (\n <ToastPrimitive.Action\n data-slot=\"toast-action\"\n className={cn(\n \"hover:bg-secondary inline-flex h-7 items-center rounded-md border border-line px-2.5 text-xs font-medium transition-colors outline-none focus-visible:border-focus focus-visible:ring-focus/50 focus-visible:ring-3\",\n className,\n )}\n {...props}\n />\n )\n}\n\nfunction ToastClose({ className, children, ...props }: ToastCloseProps) {\n return (\n <ToastPrimitive.Close\n data-slot=\"toast-close\"\n className={cn(\n \"text-muted hover:text-contrast shrink-0 rounded-md p-0.5 transition-colors outline-none focus-visible:ring-focus/50 focus-visible:ring-3\",\n className,\n )}\n {...props}\n >\n {children ?? (\n <>\n <CloseIcon className=\"size-4\" />\n <span className=\"sr-only\">Close</span>\n </>\n )}\n </ToastPrimitive.Close>\n )\n}\n\n// ---------------------------------------------------------------------------\n// 3D stacking\n// ---------------------------------------------------------------------------\n\n// Shared classes for both top and bottom positions\nconst STACKING_BASE = [\n // CSS custom properties\n \"[--toast-gap:0.5rem]\",\n \"[--toast-peek:0.5rem]\",\n \"[--toast-scale:calc(max(0,1-(var(--toast-index)*0.05)))]\",\n \"[--toast-shrink:calc(1-var(--toast-scale))]\",\n \"[--toast-stack-height:var(--toast-frontmost-height,var(--toast-height))]\",\n // Layout\n \"absolute w-full\",\n \"[z-index:calc(1000-var(--toast-index))]\",\n \"h-[var(--toast-stack-height)] data-[expanded]:h-[var(--toast-height)]\",\n // Depth blur — subtle defocus on behind toasts, cleared on expand\n \"[filter:blur(calc(var(--toast-index)*0.4px))]\",\n \"data-[expanded]:[filter:none]\",\n // Expanded (hover)\n \"data-[expanded]:[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-stack-offset-y)))]\",\n // Exit — shared\n \"data-[ending-style]:opacity-0\",\n \"data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))]\",\n \"data-[expanded]:data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))]\",\n \"data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--toast-stack-offset-y))]\",\n \"data-[expanded]:data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--toast-stack-offset-y))]\",\n \"data-[ending-style]:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))]\",\n \"data-[expanded]:data-[ending-style]:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))]\",\n \"data-[limited]:opacity-0\",\n \"[transition:transform_0.5s_cubic-bezier(0.22,1,0.36,1),opacity_0.5s,filter_0.5s,height_0.15s]\",\n].join(\" \")\n\n// Direction-specific classes — sign flips for anchor, offset, transform, enter/exit\nconst STACKING_TOP = [\n \"[--toast-stack-offset-y:calc(var(--toast-offset-y)+calc(var(--toast-index)*var(--toast-gap))+var(--toast-swipe-movement-y))]\",\n \"top-0 origin-top\",\n \"[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)+(var(--toast-index)*var(--toast-peek))+(var(--toast-shrink)*var(--toast-stack-height))))_scale(var(--toast-scale))]\",\n \"after:absolute after:bottom-full after:left-0 after:h-[calc(var(--toast-gap)+1px)] after:w-full after:content-['']\",\n \"data-[starting-style]:[transform:translateY(-150%)]\",\n \"[&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:[transform:translateY(-150%)]\",\n].join(\" \")\n\nconst STACKING_BOTTOM = [\n \"[--toast-stack-offset-y:calc(var(--toast-offset-y)*-1+calc(var(--toast-index)*var(--toast-gap)*-1)+var(--toast-swipe-movement-y))]\",\n \"bottom-0 origin-bottom\",\n \"[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)-(var(--toast-index)*var(--toast-peek))-(var(--toast-shrink)*var(--toast-stack-height))))_scale(var(--toast-scale))]\",\n \"after:absolute after:top-full after:left-0 after:h-[calc(var(--toast-gap)+1px)] after:w-full after:content-['']\",\n \"data-[starting-style]:[transform:translateY(150%)]\",\n \"[&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:[transform:translateY(150%)]\",\n].join(\" \")\n\nconst STACKING_TOP_CLASS = `${STACKING_BASE} ${STACKING_TOP}`\nconst STACKING_BOTTOM_CLASS = `${STACKING_BASE} ${STACKING_BOTTOM}`\n\n// ---------------------------------------------------------------------------\n// Toaster\n// ---------------------------------------------------------------------------\n\nfunction ToasterContent({ position = \"bottom-right\" }: Pick<ToasterProps, \"position\">) {\n const { toasts } = ToastPrimitive.useToastManager()\n const isTop = position.startsWith(\"top\")\n\n return (\n <ToastPrimitive.Portal>\n <ToastPrimitive.Viewport\n data-slot=\"toast-viewport\"\n className={cn(toastViewportVariants({ position }))}\n >\n {toasts.map((t) => (\n <Toast\n key={t.id}\n toast={t}\n swipeDirection={isTop ? [\"up\", \"right\"] : [\"down\", \"right\"]}\n className={isTop ? STACKING_TOP_CLASS : STACKING_BOTTOM_CLASS}\n >\n <ToastPrimitive.Content\n data-slot=\"toast-content\"\n className=\"flex items-start gap-3 overflow-hidden transition-opacity duration-200 data-[behind]:pointer-events-none data-[behind]:opacity-0 data-[expanded]:pointer-events-auto data-[expanded]:opacity-100\"\n >\n <ToastIcon type={t.type as ToastType | undefined} />\n\n <ToastBody>\n {t.title && <ToastTitle>{t.title}</ToastTitle>}\n {t.description && (\n <ToastDescription>{t.description}</ToastDescription>\n )}\n {t.actionProps && (\n <div className=\"mt-1.5\">\n <ToastAction {...t.actionProps} />\n </div>\n )}\n </ToastBody>\n\n <ToastClose />\n </ToastPrimitive.Content>\n </Toast>\n ))}\n </ToastPrimitive.Viewport>\n </ToastPrimitive.Portal>\n )\n}\n\n// The toast manager is a module-level singleton, so every mounted <Toaster/>\n// renders the SAME shared toast list — duplicating every toast. This registry\n// elects a single primary Toaster (the first mounted); the rest render null.\n// Guards against a consumer accidentally rendering two, and against Storybook\n// autodocs rendering several stories — each with a Toaster — on one page.\nconst mountedToasters: symbol[] = []\nconst toasterListeners = new Set<() => void>()\n\nfunction notifyToasters() {\n for (const listener of toasterListeners) {\n listener()\n }\n}\n\nfunction useIsPrimaryToaster() {\n const keyRef = React.useRef<symbol | null>(null)\n if (keyRef.current === null) {\n keyRef.current = Symbol(\"toaster\")\n }\n const key = keyRef.current\n\n const isPrimary = React.useSyncExternalStore(\n React.useCallback((onChange: () => void) => {\n toasterListeners.add(onChange)\n return () => {\n toasterListeners.delete(onChange)\n }\n }, []),\n () => mountedToasters[0] === key,\n () => false,\n )\n\n React.useEffect(() => {\n mountedToasters.push(key)\n notifyToasters()\n return () => {\n const index = mountedToasters.indexOf(key)\n if (index !== -1) {\n mountedToasters.splice(index, 1)\n }\n notifyToasters()\n }\n }, [key])\n\n return isPrimary\n}\n\nfunction Toaster({ position, limit, timeout }: ToasterProps) {\n const isPrimary = useIsPrimaryToaster()\n if (!isPrimary) {\n return null\n }\n return (\n <ToastPrimitive.Provider\n toastManager={toastManager}\n limit={limit}\n timeout={timeout}\n >\n <ToasterContent position={position} />\n </ToastPrimitive.Provider>\n )\n}\n\nexport {\n toastRootClass,\n toastIconVariants,\n toastViewportVariants,\n toastManager,\n toast,\n Toaster,\n Toast,\n ToastIcon,\n ToastTitle,\n ToastDescription,\n ToastAction,\n ToastClose,\n}\n\nexport type {\n ToastType,\n ToastOptions,\n ToasterPosition,\n ToasterProps\n}"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@waveso/ui",
3
- "version": "0.7.1",
3
+ "version": "0.7.4",
4
4
  "description": "Wave UI component library built on Base UI and Tailwind CSS",
5
5
  "type": "module",
6
6
  "sideEffects": [