@waveso/ui 0.7.2 → 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 +1 -1
- package/dist/button.d.ts +2 -2
- package/dist/field.js +1 -1
- package/dist/field.js.map +1 -1
- package/dist/input-group.d.ts +1 -1
- package/dist/item.d.ts +2 -2
- package/dist/item.d.ts.map +1 -1
- package/dist/item.js +0 -1
- package/dist/item.js.map +1 -1
- package/dist/pagination.d.ts +3 -1
- package/dist/pagination.d.ts.map +1 -1
- package/dist/pagination.js +4 -3
- package/dist/pagination.js.map +1 -1
- package/dist/sidebar.js +5 -5
- package/dist/sidebar.js.map +1 -1
- package/dist/table.d.ts.map +1 -1
- package/dist/table.js +4 -1
- package/dist/table.js.map +1 -1
- package/dist/toast.d.ts +1 -1
- package/dist/toast.d.ts.map +1 -1
- package/dist/toast.js +13 -3
- package/dist/toast.js.map +1 -1
- package/package.json +1 -1
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" | "link" | "
|
|
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/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" | "link" | "
|
|
10
|
-
size?: "default" | "
|
|
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({
|
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-
|
|
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-
|
|
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"}
|
package/dist/input-group.d.ts
CHANGED
|
@@ -26,7 +26,7 @@ declare function InputGroupAddon({
|
|
|
26
26
|
...props
|
|
27
27
|
}: InputGroupAddonProps): _$react_jsx_runtime0.JSX.Element;
|
|
28
28
|
declare const inputGroupButtonVariants: (props?: ({
|
|
29
|
-
size?: "
|
|
29
|
+
size?: "xs" | "sm" | "icon-xs" | "icon-sm" | null | undefined;
|
|
30
30
|
} & _$class_variance_authority_types0.ClassProp) | undefined) => string;
|
|
31
31
|
declare function InputGroupButton({
|
|
32
32
|
className,
|
package/dist/item.d.ts
CHANGED
|
@@ -8,10 +8,10 @@ import * as _$class_variance_authority_types0 from "class-variance-authority/typ
|
|
|
8
8
|
//#region src/item.d.ts
|
|
9
9
|
declare const itemVariants: (props?: ({
|
|
10
10
|
variant?: "default" | "outline" | "muted" | null | undefined;
|
|
11
|
-
size?: "default" | "
|
|
11
|
+
size?: "default" | "xs" | "sm" | null | undefined;
|
|
12
12
|
} & _$class_variance_authority_types0.ClassProp) | undefined) => string;
|
|
13
13
|
declare const itemMediaVariants: (props?: ({
|
|
14
|
-
variant?: "default" | "
|
|
14
|
+
variant?: "default" | "icon" | "image" | null | undefined;
|
|
15
15
|
} & _$class_variance_authority_types0.ClassProp) | undefined) => string;
|
|
16
16
|
type ItemGroupProps = React.ComponentProps<"div">;
|
|
17
17
|
type ItemSeparatorProps = React.ComponentProps<typeof Separator>;
|
package/dist/item.d.ts.map
CHANGED
|
@@ -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,
|
|
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
|
|
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"}
|
package/dist/pagination.d.ts
CHANGED
|
@@ -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;
|
package/dist/pagination.d.ts.map
CHANGED
|
@@ -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,
|
|
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"}
|
package/dist/pagination.js
CHANGED
|
@@ -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,
|
package/dist/pagination.js.map
CHANGED
|
@@ -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
|
|
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"}
|
package/dist/sidebar.js
CHANGED
|
@@ -265,7 +265,7 @@ function SidebarGroup({ className, ...props }) {
|
|
|
265
265
|
function SidebarGroupLabel({ className, render, ...props }) {
|
|
266
266
|
return useRender({
|
|
267
267
|
defaultTagName: "div",
|
|
268
|
-
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-
|
|
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),
|
|
269
269
|
render,
|
|
270
270
|
state: { slot: "sidebar-group-label" }
|
|
271
271
|
});
|
|
@@ -273,7 +273,7 @@ function SidebarGroupLabel({ className, render, ...props }) {
|
|
|
273
273
|
function SidebarGroupAction({ className, render, ...props }) {
|
|
274
274
|
return useRender({
|
|
275
275
|
defaultTagName: "button",
|
|
276
|
-
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-
|
|
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),
|
|
277
277
|
render,
|
|
278
278
|
state: { slot: "sidebar-group-action" }
|
|
279
279
|
});
|
|
@@ -299,7 +299,7 @@ function SidebarMenuItem({ className, ...props }) {
|
|
|
299
299
|
...props
|
|
300
300
|
});
|
|
301
301
|
}
|
|
302
|
-
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-
|
|
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", {
|
|
303
303
|
variants: {
|
|
304
304
|
variant: {
|
|
305
305
|
default: "hover:bg-primary hover:text-white",
|
|
@@ -344,7 +344,7 @@ function SidebarMenuButton({ render, isActive = false, variant = "default", size
|
|
|
344
344
|
function SidebarMenuAction({ className, render, showOnHover = false, ...props }) {
|
|
345
345
|
return useRender({
|
|
346
346
|
defaultTagName: "button",
|
|
347
|
-
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-
|
|
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),
|
|
348
348
|
render,
|
|
349
349
|
state: { slot: "sidebar-menu-action" }
|
|
350
350
|
});
|
|
@@ -387,7 +387,7 @@ function SidebarMenuSubItem({ className, ...props }) {
|
|
|
387
387
|
function SidebarMenuSubButton({ render, size = "md", isActive = false, className, ...props }) {
|
|
388
388
|
return useRender({
|
|
389
389
|
defaultTagName: "a",
|
|
390
|
-
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-
|
|
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),
|
|
391
391
|
render,
|
|
392
392
|
state: {
|
|
393
393
|
slot: "sidebar-menu-sub-button",
|
package/dist/sidebar.js.map
CHANGED
|
@@ -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, 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 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":"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"}
|
|
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/table.d.ts.map
CHANGED
|
@@ -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,
|
|
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
|
-
|
|
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" | "
|
|
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;
|
package/dist/toast.d.ts.map
CHANGED
|
@@ -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;;;
|
|
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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"}
|