@uselets/ui 1.2.2 → 1.4.0
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/README.md +96 -5
- package/dist/chart-DHS2QeM8.d.ts +80 -0
- package/dist/cli/uselets.mjs.map +1 -1
- package/dist/components/accordion.d.ts +4 -5
- package/dist/components/accordion.js.map +1 -1
- package/dist/components/alert-dialog.d.ts +12 -13
- package/dist/components/alert-dialog.js.map +1 -1
- package/dist/components/alert.d.ts +5 -7
- package/dist/components/alert.js.map +1 -1
- package/dist/components/anchor.d.ts +2 -4
- package/dist/components/anchor.js.map +1 -1
- package/dist/components/area-chart.d.ts +58 -0
- package/dist/components/area-chart.js +2 -0
- package/dist/components/area-chart.js.map +1 -0
- package/dist/components/avatar.d.ts +6 -7
- package/dist/components/avatar.js.map +1 -1
- package/dist/components/badge.d.ts +2 -4
- package/dist/components/badge.js.map +1 -1
- package/dist/components/bar-chart.d.ts +54 -0
- package/dist/components/bar-chart.js +2 -0
- package/dist/components/bar-chart.js.map +1 -0
- package/dist/components/breadcrumb.d.ts +7 -8
- package/dist/components/breadcrumb.js.map +1 -1
- package/dist/components/button-group.d.ts +4 -6
- package/dist/components/button-group.js.map +1 -1
- package/dist/components/button.d.ts +2 -4
- package/dist/components/button.js.map +1 -1
- package/dist/components/calendar.d.ts +2 -3
- package/dist/components/calendar.js.map +1 -1
- package/dist/components/card.d.ts +7 -8
- package/dist/components/card.js.map +1 -1
- package/dist/components/carousel.d.ts +17 -7
- package/dist/components/carousel.js +1 -1
- package/dist/components/carousel.js.map +1 -1
- package/dist/components/carousel.spec.d.ts +1 -0
- package/dist/components/carousel.spec.js +2 -0
- package/dist/components/carousel.spec.js.map +1 -0
- package/dist/components/center.d.ts +2 -4
- package/dist/components/center.js.map +1 -1
- package/dist/components/chart.d.ts +2 -263
- package/dist/components/chart.js +1 -1
- package/dist/components/chart.js.map +1 -1
- package/dist/components/checkbox.d.ts +2 -4
- package/dist/components/checkbox.js +1 -1
- package/dist/components/checkbox.js.map +1 -1
- package/dist/components/code.d.ts +1 -2
- package/dist/components/code.js.map +1 -1
- package/dist/components/collapsible.d.ts +3 -4
- package/dist/components/collapsible.js.map +1 -1
- package/dist/components/combobox.d.ts +15 -16
- package/dist/components/combobox.js.map +1 -1
- package/dist/components/command.d.ts +9 -10
- package/dist/components/command.js.map +1 -1
- package/dist/components/container.d.ts +2 -4
- package/dist/components/container.js.map +1 -1
- package/dist/components/data-table.d.ts +164 -0
- package/dist/components/data-table.js +2 -0
- package/dist/components/data-table.js.map +1 -0
- package/dist/components/date-range-picker.d.ts +11 -12
- package/dist/components/date-range-picker.js.map +1 -1
- package/dist/components/dialog.d.ts +11 -13
- package/dist/components/dialog.js.map +1 -1
- package/dist/components/donut-chart.d.ts +22 -0
- package/dist/components/donut-chart.js +2 -0
- package/dist/components/donut-chart.js.map +1 -0
- package/dist/components/drawer.d.ts +12 -14
- package/dist/components/drawer.js.map +1 -1
- package/dist/components/dropdown-menu.d.ts +15 -16
- package/dist/components/dropdown-menu.js.map +1 -1
- package/dist/components/dropzone.d.ts +1 -2
- package/dist/components/dropzone.js.map +1 -1
- package/dist/components/empty.d.ts +7 -9
- package/dist/components/empty.js.map +1 -1
- package/dist/components/field.d.ts +11 -13
- package/dist/components/field.js.map +1 -1
- package/dist/components/field.spec.js +1 -1
- package/dist/components/field.spec.js.map +1 -1
- package/dist/components/flex.d.ts +25 -0
- package/dist/components/flex.js +2 -0
- package/dist/components/flex.js.map +1 -0
- package/dist/components/grid.d.ts +2 -3
- package/dist/components/grid.js +1 -1
- package/dist/components/grid.js.map +1 -1
- package/dist/components/group.d.ts +6 -4
- package/dist/components/group.js +1 -1
- package/dist/components/group.js.map +1 -1
- package/dist/components/heading.d.ts +2 -4
- package/dist/components/heading.js.map +1 -1
- package/dist/components/hover-card.d.ts +3 -4
- package/dist/components/hover-card.js.map +1 -1
- package/dist/components/input-group.d.ts +8 -10
- package/dist/components/input-group.js.map +1 -1
- package/dist/components/input-otp.d.ts +4 -5
- package/dist/components/input-otp.js.map +1 -1
- package/dist/components/input.d.ts +1 -2
- package/dist/components/input.js.map +1 -1
- package/dist/components/kbd.d.ts +2 -3
- package/dist/components/kbd.js.map +1 -1
- package/dist/components/label.d.ts +1 -2
- package/dist/components/label.js.map +1 -1
- package/dist/components/list.d.ts +4 -6
- package/dist/components/list.js.map +1 -1
- package/dist/components/mask-input.d.ts +25 -0
- package/dist/components/mask-input.js +2 -0
- package/dist/components/mask-input.js.map +1 -0
- package/dist/components/native-select.d.ts +3 -4
- package/dist/components/native-select.js.map +1 -1
- package/dist/components/navigation-menu.d.ts +9 -11
- package/dist/components/navigation-menu.js.map +1 -1
- package/dist/components/pagination.d.ts +7 -8
- package/dist/components/pagination.js.map +1 -1
- package/dist/components/pie-chart.d.ts +58 -0
- package/dist/components/pie-chart.js +2 -0
- package/dist/components/pie-chart.js.map +1 -0
- package/dist/components/popover.d.ts +7 -8
- package/dist/components/popover.js.map +1 -1
- package/dist/components/progress.d.ts +1 -2
- package/dist/components/progress.js.map +1 -1
- package/dist/components/radio-group.d.ts +3 -5
- package/dist/components/radio-group.js.map +1 -1
- package/dist/components/resizable.d.ts +3 -4
- package/dist/components/resizable.js.map +1 -1
- package/dist/components/scroll-area.d.ts +2 -3
- package/dist/components/scroll-area.js.map +1 -1
- package/dist/components/select.d.ts +10 -11
- package/dist/components/select.js.map +1 -1
- package/dist/components/separator.d.ts +1 -2
- package/dist/components/separator.js.map +1 -1
- package/dist/components/sidebar.d.ts +24 -26
- package/dist/components/sidebar.js.map +1 -1
- package/dist/components/simple-grid.d.ts +1 -2
- package/dist/components/simple-grid.js +1 -1
- package/dist/components/simple-grid.js.map +1 -1
- package/dist/components/skeleton.d.ts +1 -2
- package/dist/components/skeleton.js.map +1 -1
- package/dist/components/skeleton.spec.js +1 -1
- package/dist/components/skeleton.spec.js.map +1 -1
- package/dist/components/slider.d.ts +1 -2
- package/dist/components/slider.js.map +1 -1
- package/dist/components/sonner.d.ts +1 -2
- package/dist/components/sonner.js.map +1 -1
- package/dist/components/spinner.d.ts +2 -4
- package/dist/components/spinner.js.map +1 -1
- package/dist/components/stack.d.ts +6 -4
- package/dist/components/stack.js +1 -1
- package/dist/components/stack.js.map +1 -1
- package/dist/components/switch.d.ts +1 -2
- package/dist/components/switch.js.map +1 -1
- package/dist/components/table.d.ts +29 -11
- package/dist/components/table.js +1 -1
- package/dist/components/table.js.map +1 -1
- package/dist/components/tabs.d.ts +5 -7
- package/dist/components/tabs.js.map +1 -1
- package/dist/components/text.d.ts +2 -4
- package/dist/components/text.js.map +1 -1
- package/dist/components/textarea.d.ts +1 -2
- package/dist/components/textarea.js.map +1 -1
- package/dist/components/theme.d.ts +2 -3
- package/dist/components/theme.js +1 -1
- package/dist/components/theme.js.map +1 -1
- package/dist/components/timeline.d.ts +3 -4
- package/dist/components/timeline.js.map +1 -1
- package/dist/components/toggle-group.d.ts +2 -3
- package/dist/components/toggle-group.js.map +1 -1
- package/dist/components/toggle.d.ts +2 -4
- package/dist/components/toggle.js.map +1 -1
- package/dist/components/tooltip.d.ts +5 -6
- package/dist/components/tooltip.js.map +1 -1
- package/dist/components/unstyled-button.d.ts +1 -2
- package/dist/components/unstyled-button.js.map +1 -1
- package/dist/components/visibility.d.ts +2 -3
- package/dist/components/visibility.js.map +1 -1
- package/dist/dist-C35vdEt2.js +129 -0
- package/dist/dist-C35vdEt2.js.map +1 -0
- package/dist/hooks/use-breakpoint-value.js.map +1 -1
- package/dist/hooks/use-breakpoint-value.spec.js +1 -14
- package/dist/hooks/use-breakpoint-value.spec.js.map +1 -1
- package/dist/hooks/use-breakpoint.js.map +1 -1
- package/dist/hooks/use-breakpoint.spec.js +1 -1
- package/dist/hooks/use-breakpoint.spec.js.map +1 -1
- package/dist/hooks/use-disclosure.js.map +1 -1
- package/dist/hooks/use-disclosure.spec.js +1 -1
- package/dist/hooks/use-disclosure.spec.js.map +1 -1
- package/dist/hooks/use-document-visibility.js.map +1 -1
- package/dist/hooks/use-document-visibility.spec.js +1 -1
- package/dist/hooks/use-document-visibility.spec.js.map +1 -1
- package/dist/hooks/use-idle.js.map +1 -1
- package/dist/hooks/use-idle.spec.js +1 -1
- package/dist/hooks/use-idle.spec.js.map +1 -1
- package/dist/hooks/use-interval.js.map +1 -1
- package/dist/hooks/use-interval.spec.js +1 -1
- package/dist/hooks/use-interval.spec.js.map +1 -1
- package/dist/hooks/use-local-storage.js.map +1 -1
- package/dist/hooks/use-local-storage.spec.js +1 -1
- package/dist/hooks/use-local-storage.spec.js.map +1 -1
- package/dist/hooks/use-mask.d.ts +9 -0
- package/dist/hooks/use-mask.js +2 -0
- package/dist/hooks/use-mask.js.map +1 -0
- package/dist/hooks/use-mobile.js.map +1 -1
- package/dist/hooks/use-mobile.spec.js +1 -1
- package/dist/hooks/use-mobile.spec.js.map +1 -1
- package/dist/index.d.ts +12 -4
- package/dist/index.js +1 -1
- package/dist/lib/button.js.map +1 -1
- package/dist/lib/color.js.map +1 -1
- package/dist/lib/utils.js.map +1 -1
- package/dist/magic-string.es-C-uSEkg2.js +15 -0
- package/dist/magic-string.es-C-uSEkg2.js.map +1 -0
- package/dist/postcss.config.js.map +1 -1
- package/dist/{react.esm-B3a5z6DL.js → react.esm-BagSCtI3.js} +12 -3
- package/dist/{react.esm-B3a5z6DL.js.map → react.esm-BagSCtI3.js.map} +1 -1
- package/dist/skills/uselets-ui/SKILL.md +1 -0
- package/dist/skills/uselets-ui/references/component-catalog.md +37 -7
- package/dist/skills/uselets-ui/references/package-guide.md +139 -2
- package/package.json +15 -13
- package/skills/uselets-ui/SKILL.md +1 -0
- package/skills/uselets-ui/references/component-catalog.md +37 -7
- package/skills/uselets-ui/references/package-guide.md +139 -2
|
@@ -1,19 +1,21 @@
|
|
|
1
1
|
import { n as __name } from "../chunk-CHh1Zzun.js";
|
|
2
|
-
import * as _$react_jsx_runtime0 from "react/jsx-runtime";
|
|
3
2
|
import { VariantProps } from "class-variance-authority";
|
|
4
3
|
import * as React from "react";
|
|
5
|
-
import * as _$class_variance_authority_types0 from "class-variance-authority/types";
|
|
6
4
|
|
|
7
5
|
//#region src/components/stack.d.ts
|
|
8
6
|
declare const stackVariants: (props?: ({
|
|
7
|
+
align?: "center" | "end" | "start" | "baseline" | "stretch" | null | undefined;
|
|
8
|
+
justify?: "center" | "end" | "start" | "between" | "around" | "evenly" | null | undefined;
|
|
9
9
|
gap?: "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
|
|
10
|
-
} &
|
|
10
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
11
11
|
type StackProps = React.ComponentProps<'div'> & VariantProps<typeof stackVariants>;
|
|
12
12
|
declare function Stack({
|
|
13
13
|
className,
|
|
14
|
+
align,
|
|
15
|
+
justify,
|
|
14
16
|
gap,
|
|
15
17
|
...props
|
|
16
|
-
}: StackProps):
|
|
18
|
+
}: StackProps): import("react/jsx-runtime").JSX.Element;
|
|
17
19
|
//#endregion
|
|
18
20
|
export { Stack, StackProps, stackVariants };
|
|
19
21
|
//# sourceMappingURL=stack.d.ts.map
|
package/dist/components/stack.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import"../chunk-CHh1Zzun.js";import{cn as e}from"../lib/utils.js";import{jsx as t}from"react/jsx-runtime";import{cva as n}from"class-variance-authority";const r=n(`flex flex-col`,{variants:{gap:{xs:`gap-1`,sm:`gap-2`,md:`gap-
|
|
1
|
+
import"../chunk-CHh1Zzun.js";import{cn as e}from"../lib/utils.js";import{jsx as t}from"react/jsx-runtime";import{cva as n}from"class-variance-authority";const r=n(`flex flex-col`,{variants:{align:{start:`items-start`,end:`items-end`,center:`items-center`,baseline:`items-baseline`,stretch:`items-stretch`},justify:{start:`justify-start`,end:`justify-end`,center:`justify-center`,between:`justify-between`,around:`justify-around`,evenly:`justify-evenly`},gap:{xs:`gap-1`,sm:`gap-2`,md:`gap-4`,lg:`gap-6`,xl:`gap-8`}},defaultVariants:{gap:`md`}});function Stack({className:n,align:i,justify:a,gap:o=`md`,...s}){return t(`div`,{"data-slot":`stack`,"data-align":i,"data-justify":a,"data-gap":o,className:e(r({align:i,justify:a,gap:o}),n),...s})}export{Stack,r as stackVariants};
|
|
2
2
|
//# sourceMappingURL=stack.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"stack.js","names":[],"sources":["../../src/components/stack.tsx"],"sourcesContent":["import type * as React from 'react'\n\nimport { cva, type VariantProps } from 'class-variance-authority'\n\nimport { cn } from '../lib/utils'\n\nconst stackVariants = cva('flex flex-col', {\n variants: {\n gap: {\n xs: 'gap-1',\n sm: 'gap-2',\n md: 'gap-
|
|
1
|
+
{"version":3,"file":"stack.js","names":[],"sources":["../../src/components/stack.tsx"],"sourcesContent":["import type * as React from 'react'\n\nimport { cva, type VariantProps } from 'class-variance-authority'\n\nimport { cn } from '../lib/utils'\n\nconst stackVariants = cva('flex flex-col', {\n variants: {\n align: {\n start: 'items-start',\n end: 'items-end',\n center: 'items-center',\n baseline: 'items-baseline',\n stretch: 'items-stretch'\n },\n justify: {\n start: 'justify-start',\n end: 'justify-end',\n center: 'justify-center',\n between: 'justify-between',\n around: 'justify-around',\n evenly: 'justify-evenly'\n },\n gap: {\n xs: 'gap-1',\n sm: 'gap-2',\n md: 'gap-4',\n lg: 'gap-6',\n xl: 'gap-8'\n }\n },\n defaultVariants: {\n gap: 'md'\n }\n})\n\nexport type StackProps = React.ComponentProps<'div'> & VariantProps<typeof stackVariants>\n\nfunction Stack({ className, align, justify, gap = 'md', ...props }: StackProps) {\n return (\n <div\n data-slot=\"stack\"\n data-align={align}\n data-justify={justify}\n data-gap={gap}\n className={cn(stackVariants({ align, justify, gap }), className)}\n {...props}\n />\n )\n}\n\nexport { Stack, stackVariants }\n"],"mappings":"yJAMA,MAAM,EAAgB,EAAI,gBAAiB,CACzC,SAAU,CACR,MAAO,CACL,MAAO,cACP,IAAK,YACL,OAAQ,eACR,SAAU,iBACV,QAAS,eACX,EACA,QAAS,CACP,MAAO,gBACP,IAAK,cACL,OAAQ,iBACR,QAAS,kBACT,OAAQ,iBACR,OAAQ,gBACV,EACA,IAAK,CACH,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,GAAI,OACN,CACF,EACA,gBAAiB,CACf,IAAK,IACP,CACF,CAAC,EAID,SAAS,MAAM,CAAE,YAAW,QAAO,UAAS,MAAM,KAAM,GAAG,GAAqB,CAC9E,OACE,EAAC,MAAD,CACE,YAAU,QACV,aAAY,EACZ,eAAc,EACd,WAAU,EACV,UAAW,EAAG,EAAc,CAAE,QAAO,UAAS,KAAI,CAAC,EAAG,CAAS,EAC/D,GAAI,CACL,CAAA,CAEL"}
|
|
@@ -2,7 +2,6 @@ import { n as __name } from "../chunk-CHh1Zzun.js";
|
|
|
2
2
|
import { UIColor } from "../lib/color.js";
|
|
3
3
|
import { LabelProps } from "./label.js";
|
|
4
4
|
import { Switch as Switch$1 } from "radix-ui";
|
|
5
|
-
import * as _$react_jsx_runtime0 from "react/jsx-runtime";
|
|
6
5
|
import * as React from "react";
|
|
7
6
|
import { ReactNode } from "react";
|
|
8
7
|
|
|
@@ -21,7 +20,7 @@ declare function Switch({
|
|
|
21
20
|
labelProps,
|
|
22
21
|
size,
|
|
23
22
|
...props
|
|
24
|
-
}: SwitchProps):
|
|
23
|
+
}: SwitchProps): import("react/jsx-runtime").JSX.Element;
|
|
25
24
|
//#endregion
|
|
26
25
|
export { Switch, SwitchProps };
|
|
27
26
|
//# sourceMappingURL=switch.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"switch.js","names":["SwitchPrimitive","Label"],"sources":["../../src/components/switch.tsx"],"sourcesContent":["import type * as React from 'react'\nimport { type ReactNode, useId } from 'react'\n\nimport { cva } from 'class-variance-authority'\nimport { Switch as SwitchPrimitive } from 'radix-ui'\n\nimport type { UIColor } from '../lib/color'\nimport { cn } from '../lib/utils'\nimport { useFieldControlId } from './field'\nimport { Label, type LabelProps } from './label'\n\nexport type SwitchProps = React.ComponentProps<typeof SwitchPrimitive.Root> & {\n color?: UIColor\n label?: ReactNode\n labelProps?: Omit<LabelProps, 'children' | 'htmlFor'>\n size?: 'sm' | 'md' | 'lg'\n}\n\nconst switchColorVariants: Record<UIColor, string> = {\n primary: '[--switch-checked:var(--primary-500)]',\n brand: '[--switch-checked:var(--brand-500)]',\n gray: '[--switch-checked:var(--gray-500)]',\n zinc: '[--switch-checked:var(--zinc-500)]',\n red: '[--switch-checked:var(--red-500)]',\n yellow: '[--switch-checked:var(--yellow-500)]',\n blue: '[--switch-checked:var(--blue-500)]',\n indigo: '[--switch-checked:var(--indigo-500)]',\n pink: '[--switch-checked:var(--pink-500)]',\n green: '[--switch-checked:var(--green-500)]'\n}\n\nconst switchLabelVariants = cva('', {\n variants: {\n size: {\n sm: 'text-xs',\n md: 'text-sm',\n lg: 'text-xl'\n }\n },\n defaultVariants: {\n size: 'md'\n }\n})\n\nfunction Switch({ className, color = 'green', id, label, labelProps, size = 'md', ...props }: SwitchProps) {\n const generatedId = useId()\n const fieldControlId = useFieldControlId(id)\n const hasLabel = label !== undefined\n const resolvedId = fieldControlId ?? (hasLabel ? generatedId : undefined)\n const { className: labelClassName, ...labelRootProps } = labelProps ?? {}\n\n const switchControl = (\n <SwitchPrimitive.Root\n data-slot=\"switch\"\n data-color={color}\n data-size={size}\n id={resolvedId}\n className={cn(\n 'peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none',\n 'after:absolute after:-inset-x-3 after:-inset-y-2',\n 'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50',\n 'aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20',\n 'data-[size=lg]:h-5.5 data-[size=lg]:w-12 data-[size=md]:h-5 data-[size=md]:w-10.5 data-[size=sm]:h-4 data-[size=sm]:w-8.5',\n 'dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40',\n 'data-checked:bg-(--switch-checked) data-unchecked:bg-input dark:data-unchecked:bg-input/80',\n 'data-disabled:cursor-not-allowed data-disabled:opacity-50',\n switchColorVariants[color],\n className\n )}\n {...props}\n >\n <SwitchPrimitive.Thumb\n data-slot=\"switch-thumb\"\n className={cn(\n 'pointer-events-none flex items-center justify-center rounded-full bg-background ring-0 transition-transform',\n 'group-data-[size=lg]/switch:size-4.5 group-data-[size=md]/switch:size-4 group-data-[size=sm]/switch:size-3',\n 'group-data-[size=lg]/switch:data-checked:translate-x-7',\n 'group-data-[size=md]/switch:data-checked:translate-x-6',\n 'group-data-[size=sm]/switch:data-checked:translate-x-5',\n 'group-data-[size=lg]/switch:data-unchecked:translate-x-0.5',\n 'group-data-[size=md]/switch:data-unchecked:translate-x-0.5',\n 'group-data-[size=sm]/switch:data-unchecked:translate-x-0.5',\n 'dark:data-checked:bg-primary-foreground dark:data-unchecked:bg-foreground'\n )}\n >\n <span\n data-slot=\"switch-thumb-indicator\"\n className={cn(\n 'rounded-full transition-colors',\n 'group-data-[size=lg]/switch:size-2.5 group-data-[size=md]/switch:size-2 group-data-[size=sm]/switch:size-1.5',\n 'group-data-checked/switch:bg-(--switch-checked) group-data-unchecked/switch:bg-input',\n 'group-data-unchecked/switch:dark:bg-input/80'\n )}\n />\n </SwitchPrimitive.Thumb>\n </SwitchPrimitive.Root>\n )\n\n if (!hasLabel) {\n return switchControl\n }\n\n return (\n <div data-slot=\"switch-field\" className=\"flex items-center gap-2\">\n {switchControl}\n <Label {...labelRootProps} htmlFor={resolvedId} className={cn(switchLabelVariants({ size }), labelClassName)}>\n {label}\n </Label>\n </div>\n )\n}\n\nexport { Switch }\n"],"mappings":"qTAkBA,MAAM,EAA+C,CACnD,QAAS,wCACT,MAAO,sCACP,KAAM,qCACN,KAAM,qCACN,IAAK,oCACL,OAAQ,uCACR,KAAM,qCACN,OAAQ,uCACR,KAAM,qCACN,MAAO,
|
|
1
|
+
{"version":3,"file":"switch.js","names":["SwitchPrimitive","Label"],"sources":["../../src/components/switch.tsx"],"sourcesContent":["import type * as React from 'react'\nimport { type ReactNode, useId } from 'react'\n\nimport { cva } from 'class-variance-authority'\nimport { Switch as SwitchPrimitive } from 'radix-ui'\n\nimport type { UIColor } from '../lib/color'\nimport { cn } from '../lib/utils'\nimport { useFieldControlId } from './field'\nimport { Label, type LabelProps } from './label'\n\nexport type SwitchProps = React.ComponentProps<typeof SwitchPrimitive.Root> & {\n color?: UIColor\n label?: ReactNode\n labelProps?: Omit<LabelProps, 'children' | 'htmlFor'>\n size?: 'sm' | 'md' | 'lg'\n}\n\nconst switchColorVariants: Record<UIColor, string> = {\n primary: '[--switch-checked:var(--primary-500)]',\n brand: '[--switch-checked:var(--brand-500)]',\n gray: '[--switch-checked:var(--gray-500)]',\n zinc: '[--switch-checked:var(--zinc-500)]',\n red: '[--switch-checked:var(--red-500)]',\n yellow: '[--switch-checked:var(--yellow-500)]',\n blue: '[--switch-checked:var(--blue-500)]',\n indigo: '[--switch-checked:var(--indigo-500)]',\n pink: '[--switch-checked:var(--pink-500)]',\n green: '[--switch-checked:var(--green-500)]'\n}\n\nconst switchLabelVariants = cva('', {\n variants: {\n size: {\n sm: 'text-xs',\n md: 'text-sm',\n lg: 'text-xl'\n }\n },\n defaultVariants: {\n size: 'md'\n }\n})\n\nfunction Switch({ className, color = 'green', id, label, labelProps, size = 'md', ...props }: SwitchProps) {\n const generatedId = useId()\n const fieldControlId = useFieldControlId(id)\n const hasLabel = label !== undefined\n const resolvedId = fieldControlId ?? (hasLabel ? generatedId : undefined)\n const { className: labelClassName, ...labelRootProps } = labelProps ?? {}\n\n const switchControl = (\n <SwitchPrimitive.Root\n data-slot=\"switch\"\n data-color={color}\n data-size={size}\n id={resolvedId}\n className={cn(\n 'peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none',\n 'after:absolute after:-inset-x-3 after:-inset-y-2',\n 'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50',\n 'aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20',\n 'data-[size=lg]:h-5.5 data-[size=lg]:w-12 data-[size=md]:h-5 data-[size=md]:w-10.5 data-[size=sm]:h-4 data-[size=sm]:w-8.5',\n 'dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40',\n 'data-checked:bg-(--switch-checked) data-unchecked:bg-input dark:data-unchecked:bg-input/80',\n 'data-disabled:cursor-not-allowed data-disabled:opacity-50',\n switchColorVariants[color],\n className\n )}\n {...props}\n >\n <SwitchPrimitive.Thumb\n data-slot=\"switch-thumb\"\n className={cn(\n 'pointer-events-none flex items-center justify-center rounded-full bg-background ring-0 transition-transform',\n 'group-data-[size=lg]/switch:size-4.5 group-data-[size=md]/switch:size-4 group-data-[size=sm]/switch:size-3',\n 'group-data-[size=lg]/switch:data-checked:translate-x-7',\n 'group-data-[size=md]/switch:data-checked:translate-x-6',\n 'group-data-[size=sm]/switch:data-checked:translate-x-5',\n 'group-data-[size=lg]/switch:data-unchecked:translate-x-0.5',\n 'group-data-[size=md]/switch:data-unchecked:translate-x-0.5',\n 'group-data-[size=sm]/switch:data-unchecked:translate-x-0.5',\n 'dark:data-checked:bg-primary-foreground dark:data-unchecked:bg-foreground'\n )}\n >\n <span\n data-slot=\"switch-thumb-indicator\"\n className={cn(\n 'rounded-full transition-colors',\n 'group-data-[size=lg]/switch:size-2.5 group-data-[size=md]/switch:size-2 group-data-[size=sm]/switch:size-1.5',\n 'group-data-checked/switch:bg-(--switch-checked) group-data-unchecked/switch:bg-input',\n 'group-data-unchecked/switch:dark:bg-input/80'\n )}\n />\n </SwitchPrimitive.Thumb>\n </SwitchPrimitive.Root>\n )\n\n if (!hasLabel) {\n return switchControl\n }\n\n return (\n <div data-slot=\"switch-field\" className=\"flex items-center gap-2\">\n {switchControl}\n <Label {...labelRootProps} htmlFor={resolvedId} className={cn(switchLabelVariants({ size }), labelClassName)}>\n {label}\n </Label>\n </div>\n )\n}\n\nexport { Switch }\n"],"mappings":"qTAkBA,MAAM,EAA+C,CACnD,QAAS,wCACT,MAAO,sCACP,KAAM,qCACN,KAAM,qCACN,IAAK,oCACL,OAAQ,uCACR,KAAM,qCACN,OAAQ,uCACR,KAAM,qCACN,MAAO,qCACT,EAEM,EAAsB,EAAI,GAAI,CAClC,SAAU,CACR,KAAM,CACJ,GAAI,UACJ,GAAI,UACJ,GAAI,SACN,CACF,EACA,gBAAiB,CACf,KAAM,IACR,CACF,CAAC,EAED,SAAS,OAAO,CAAE,YAAW,QAAQ,QAAS,KAAI,QAAO,aAAY,OAAO,KAAM,GAAG,GAAsB,CACzG,IAAM,EAAc,EAAM,EACpB,EAAiB,EAAkB,CAAE,EACrC,EAAW,IAAU,IAAA,GACrB,EAAa,IAAmB,EAAW,EAAc,IAAA,IACzD,CAAE,UAAW,EAAgB,GAAG,GAAmB,GAAc,CAAC,EAElE,EACJ,EAACA,EAAgB,KAAjB,CACE,YAAU,SACV,aAAY,EACZ,YAAW,EACX,GAAI,EACJ,UAAW,EACT,kIACA,mDACA,4EACA,uFACA,4HACA,gFACA,6FACA,4DACA,EAAoB,GACpB,CACF,EACA,GAAI,WAEJ,EAACA,EAAgB,MAAjB,CACE,YAAU,eACV,UAAW,EACT,8GACA,6GACA,yDACA,yDACA,yDACA,6DACA,6DACA,6DACA,2EACF,WAEA,EAAC,OAAD,CACE,YAAU,yBACV,UAAW,EACT,iCACA,+GACA,uFACA,8CACF,CACD,CAAA,CACoB,CAAA,CACH,CAAA,EAOxB,OAJK,EAKH,EAAC,MAAD,CAAK,YAAU,eAAe,UAAU,mCAAxC,CACG,EACD,EAACC,EAAD,CAAO,GAAI,EAAgB,QAAS,EAAY,UAAW,EAAG,EAAoB,CAAE,MAAK,CAAC,EAAG,CAAc,WACxG,CACI,CAAA,CACJ,IATE,CAWX"}
|
|
@@ -1,9 +1,18 @@
|
|
|
1
1
|
import { n as __name } from "../chunk-CHh1Zzun.js";
|
|
2
|
-
import
|
|
2
|
+
import { VariantProps } from "class-variance-authority";
|
|
3
3
|
import * as React from "react";
|
|
4
4
|
|
|
5
5
|
//#region src/components/table.d.ts
|
|
6
|
-
type
|
|
6
|
+
type TableContainerProps = React.ComponentProps<'div'> & {
|
|
7
|
+
minWidth?: number | string;
|
|
8
|
+
};
|
|
9
|
+
declare const tableVariants: (props?: ({
|
|
10
|
+
variant?: "outline" | "line" | null | undefined;
|
|
11
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
12
|
+
type TableProps = React.ComponentProps<'table'> & VariantProps<typeof tableVariants> & {
|
|
13
|
+
striped?: boolean;
|
|
14
|
+
stickyHeader?: boolean;
|
|
15
|
+
};
|
|
7
16
|
type TableHeaderProps = React.ComponentProps<'thead'>;
|
|
8
17
|
type TableBodyProps = React.ComponentProps<'tbody'>;
|
|
9
18
|
type TableFooterProps = React.ComponentProps<'tfoot'>;
|
|
@@ -11,38 +20,47 @@ type TableRowProps = React.ComponentProps<'tr'>;
|
|
|
11
20
|
type TableHeadProps = React.ComponentProps<'th'>;
|
|
12
21
|
type TableCellProps = React.ComponentProps<'td'>;
|
|
13
22
|
type TableCaptionProps = React.ComponentProps<'caption'>;
|
|
23
|
+
declare function TableContainer({
|
|
24
|
+
className,
|
|
25
|
+
minWidth,
|
|
26
|
+
style,
|
|
27
|
+
...props
|
|
28
|
+
}: TableContainerProps): import("react/jsx-runtime").JSX.Element;
|
|
14
29
|
declare function Table({
|
|
15
30
|
className,
|
|
31
|
+
variant,
|
|
32
|
+
striped,
|
|
33
|
+
stickyHeader,
|
|
16
34
|
...props
|
|
17
|
-
}: TableProps):
|
|
35
|
+
}: TableProps): import("react/jsx-runtime").JSX.Element;
|
|
18
36
|
declare function TableHeader({
|
|
19
37
|
className,
|
|
20
38
|
...props
|
|
21
|
-
}: TableHeaderProps):
|
|
39
|
+
}: TableHeaderProps): import("react/jsx-runtime").JSX.Element;
|
|
22
40
|
declare function TableBody({
|
|
23
41
|
className,
|
|
24
42
|
...props
|
|
25
|
-
}: TableBodyProps):
|
|
43
|
+
}: TableBodyProps): import("react/jsx-runtime").JSX.Element;
|
|
26
44
|
declare function TableFooter({
|
|
27
45
|
className,
|
|
28
46
|
...props
|
|
29
|
-
}: TableFooterProps):
|
|
47
|
+
}: TableFooterProps): import("react/jsx-runtime").JSX.Element;
|
|
30
48
|
declare function TableRow({
|
|
31
49
|
className,
|
|
32
50
|
...props
|
|
33
|
-
}: TableRowProps):
|
|
51
|
+
}: TableRowProps): import("react/jsx-runtime").JSX.Element;
|
|
34
52
|
declare function TableHead({
|
|
35
53
|
className,
|
|
36
54
|
...props
|
|
37
|
-
}: TableHeadProps):
|
|
55
|
+
}: TableHeadProps): import("react/jsx-runtime").JSX.Element;
|
|
38
56
|
declare function TableCell({
|
|
39
57
|
className,
|
|
40
58
|
...props
|
|
41
|
-
}: TableCellProps):
|
|
59
|
+
}: TableCellProps): import("react/jsx-runtime").JSX.Element;
|
|
42
60
|
declare function TableCaption({
|
|
43
61
|
className,
|
|
44
62
|
...props
|
|
45
|
-
}: TableCaptionProps):
|
|
63
|
+
}: TableCaptionProps): import("react/jsx-runtime").JSX.Element;
|
|
46
64
|
//#endregion
|
|
47
|
-
export { Table, TableBody, TableBodyProps, TableCaption, TableCaptionProps, TableCell, TableCellProps, TableFooter, TableFooterProps, TableHead, TableHeadProps, TableHeader, TableHeaderProps, TableProps, TableRow, TableRowProps };
|
|
65
|
+
export { Table, TableBody, TableBodyProps, TableCaption, TableCaptionProps, TableCell, TableCellProps, TableContainer, TableContainerProps, TableFooter, TableFooterProps, TableHead, TableHeadProps, TableHeader, TableHeaderProps, TableProps, TableRow, TableRowProps, tableVariants };
|
|
48
66
|
//# sourceMappingURL=table.d.ts.map
|
package/dist/components/table.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import"../chunk-CHh1Zzun.js";import{cn as e}from"../lib/utils.js";import{jsx as t}from"react/jsx-runtime";function
|
|
1
|
+
import"../chunk-CHh1Zzun.js";import{cn as e}from"../lib/utils.js";import{jsx as t}from"react/jsx-runtime";import{cva as n}from"class-variance-authority";const r=n(`w-full caption-bottom text-sm`,{variants:{variant:{line:``,outline:e(`rounded-lg border border-separate border-spacing-0`,`[&_thead_th]:border-b`,`[&_tbody_tr:not(:last-child)>td]:border-b`)}},defaultVariants:{variant:`line`}});function TableContainer({className:n,minWidth:r,style:i,...a}){return t(`div`,{"data-slot":`table-container`,className:e(`relative w-full overflow-x-auto`,`has-[>table[data-variant=outline]]:rounded-lg has-[>table[data-variant=outline]]:border`,`[&>table[data-variant=outline]]:rounded-none [&>table[data-variant=outline]]:border-0`,n),style:r===void 0?i:{minWidth:r,...i},...a})}function Table({className:n,variant:i=`line`,striped:a=!0,stickyHeader:o=!1,...s}){return t(`table`,{"data-slot":`table`,"data-variant":i,"data-striped":a?`true`:`false`,"data-sticky-header":o?`true`:`false`,className:e(r({variant:i}),`data-[striped=true]:[&_tbody_tr:nth-child(even):not([data-state=selected]):not(:hover)]:bg-muted/30`,`data-[sticky-header=true]:[&_thead]:sticky data-[sticky-header=true]:[&_thead]:top-0 data-[sticky-header=true]:[&_thead]:z-10 data-[sticky-header=true]:[&_thead]:bg-background`,n),...s})}function TableHeader({className:n,...r}){return t(`thead`,{"data-slot":`table-header`,className:e(`[&_tr]:border-b`,n),...r})}function TableBody({className:n,...r}){return t(`tbody`,{"data-slot":`table-body`,className:e(`[&_tr:last-child]:border-0`,n),...r})}function TableFooter({className:n,...r}){return t(`tfoot`,{"data-slot":`table-footer`,className:e(`border-t bg-muted/50 font-medium [&>tr]:last:border-b-0`,n),...r})}function TableRow({className:n,...r}){return t(`tr`,{"data-slot":`table-row`,className:e(`border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted`,n),...r})}function TableHead({className:n,...r}){return t(`th`,{"data-slot":`table-head`,className:e(`h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground has-[[role=checkbox]]:pr-0`,n),...r})}function TableCell({className:n,...r}){return t(`td`,{"data-slot":`table-cell`,className:e(`p-2 align-middle whitespace-nowrap has-[[role=checkbox]]:pr-0`,n),...r})}function TableCaption({className:n,...r}){return t(`caption`,{"data-slot":`table-caption`,className:e(`mt-4 text-sm text-muted-foreground`,n),...r})}export{Table,TableBody,TableCaption,TableCell,TableContainer,TableFooter,TableHead,TableHeader,TableRow,r as tableVariants};
|
|
2
2
|
//# sourceMappingURL=table.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table.js","names":[],"sources":["../../src/components/table.tsx"],"sourcesContent":["import type * as React from 'react'\n\nimport { cn } from '../lib/utils'\n\nexport type TableProps = React.ComponentProps<'table'
|
|
1
|
+
{"version":3,"file":"table.js","names":[],"sources":["../../src/components/table.tsx"],"sourcesContent":["import type * as React from 'react'\n\nimport { cva, type VariantProps } from 'class-variance-authority'\n\nimport { cn } from '../lib/utils'\n\nexport type TableContainerProps = React.ComponentProps<'div'> & {\n minWidth?: number | string\n}\n\nconst tableVariants = cva('w-full caption-bottom text-sm', {\n variants: {\n variant: {\n line: '',\n outline: cn(\n 'rounded-lg border border-separate border-spacing-0',\n '[&_thead_th]:border-b',\n '[&_tbody_tr:not(:last-child)>td]:border-b'\n )\n }\n },\n defaultVariants: {\n variant: 'line'\n }\n})\n\nexport type TableProps = React.ComponentProps<'table'> &\n VariantProps<typeof tableVariants> & {\n striped?: boolean\n stickyHeader?: boolean\n }\n\nexport type TableHeaderProps = React.ComponentProps<'thead'>\n\nexport type TableBodyProps = React.ComponentProps<'tbody'>\n\nexport type TableFooterProps = React.ComponentProps<'tfoot'>\n\nexport type TableRowProps = React.ComponentProps<'tr'>\n\nexport type TableHeadProps = React.ComponentProps<'th'>\n\nexport type TableCellProps = React.ComponentProps<'td'>\n\nexport type TableCaptionProps = React.ComponentProps<'caption'>\n\nfunction TableContainer({ className, minWidth, style, ...props }: TableContainerProps) {\n return (\n <div\n data-slot=\"table-container\"\n className={cn(\n 'relative w-full overflow-x-auto',\n 'has-[>table[data-variant=outline]]:rounded-lg has-[>table[data-variant=outline]]:border',\n '[&>table[data-variant=outline]]:rounded-none [&>table[data-variant=outline]]:border-0',\n className\n )}\n style={minWidth !== undefined ? { minWidth, ...style } : style}\n {...props}\n />\n )\n}\n\nfunction Table({ className, variant = 'line', striped = true, stickyHeader = false, ...props }: TableProps) {\n return (\n <table\n data-slot=\"table\"\n data-variant={variant}\n data-striped={striped ? 'true' : 'false'}\n data-sticky-header={stickyHeader ? 'true' : 'false'}\n className={cn(\n tableVariants({ variant }),\n 'data-[striped=true]:[&_tbody_tr:nth-child(even):not([data-state=selected]):not(:hover)]:bg-muted/30',\n 'data-[sticky-header=true]:[&_thead]:sticky data-[sticky-header=true]:[&_thead]:top-0 data-[sticky-header=true]:[&_thead]:z-10 data-[sticky-header=true]:[&_thead]:bg-background',\n className\n )}\n {...props}\n />\n )\n}\n\nfunction TableHeader({ className, ...props }: TableHeaderProps) {\n return <thead data-slot=\"table-header\" className={cn('[&_tr]:border-b', className)} {...props} />\n}\n\nfunction TableBody({ className, ...props }: TableBodyProps) {\n return <tbody data-slot=\"table-body\" className={cn('[&_tr:last-child]:border-0', className)} {...props} />\n}\n\nfunction TableFooter({ className, ...props }: TableFooterProps) {\n return (\n <tfoot\n data-slot=\"table-footer\"\n className={cn('border-t bg-muted/50 font-medium [&>tr]:last:border-b-0', className)}\n {...props}\n />\n )\n}\n\nfunction TableRow({ className, ...props }: TableRowProps) {\n return (\n <tr\n data-slot=\"table-row\"\n className={cn('border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted', className)}\n {...props}\n />\n )\n}\n\nfunction TableHead({ className, ...props }: TableHeadProps) {\n return (\n <th\n data-slot=\"table-head\"\n className={cn(\n 'h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground 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('p-2 align-middle whitespace-nowrap has-[[role=checkbox]]:pr-0', className)}\n {...props}\n />\n )\n}\n\nfunction TableCaption({ className, ...props }: TableCaptionProps) {\n return (\n <caption data-slot=\"table-caption\" className={cn('mt-4 text-sm text-muted-foreground', className)} {...props} />\n )\n}\n\nexport {\n Table,\n TableBody,\n TableCaption,\n TableCell,\n TableContainer,\n TableFooter,\n TableHead,\n TableHeader,\n TableRow,\n tableVariants\n}\n"],"mappings":"yJAUA,MAAM,EAAgB,EAAI,gCAAiC,CACzD,SAAU,CACR,QAAS,CACP,KAAM,GACN,QAAS,EACP,qDACA,wBACA,2CACF,CACF,CACF,EACA,gBAAiB,CACf,QAAS,MACX,CACF,CAAC,EAsBD,SAAS,eAAe,CAAE,YAAW,WAAU,QAAO,GAAG,GAA8B,CACrF,OACE,EAAC,MAAD,CACE,YAAU,kBACV,UAAW,EACT,kCACA,0FACA,wFACA,CACF,EACA,MAAO,IAAa,IAAA,GAAqC,EAAzB,CAAE,WAAU,GAAG,CAAM,EACrD,GAAI,CACL,CAAA,CAEL,CAEA,SAAS,MAAM,CAAE,YAAW,UAAU,OAAQ,UAAU,GAAM,eAAe,GAAO,GAAG,GAAqB,CAC1G,OACE,EAAC,QAAD,CACE,YAAU,QACV,eAAc,EACd,eAAc,EAAU,OAAS,QACjC,qBAAoB,EAAe,OAAS,QAC5C,UAAW,EACT,EAAc,CAAE,SAAQ,CAAC,EACzB,sGACA,kLACA,CACF,EACA,GAAI,CACL,CAAA,CAEL,CAEA,SAAS,YAAY,CAAE,YAAW,GAAG,GAA2B,CAC9D,OAAO,EAAC,QAAD,CAAO,YAAU,eAAe,UAAW,EAAG,kBAAmB,CAAS,EAAG,GAAI,CAAQ,CAAA,CAClG,CAEA,SAAS,UAAU,CAAE,YAAW,GAAG,GAAyB,CAC1D,OAAO,EAAC,QAAD,CAAO,YAAU,aAAa,UAAW,EAAG,6BAA8B,CAAS,EAAG,GAAI,CAAQ,CAAA,CAC3G,CAEA,SAAS,YAAY,CAAE,YAAW,GAAG,GAA2B,CAC9D,OACE,EAAC,QAAD,CACE,YAAU,eACV,UAAW,EAAG,0DAA2D,CAAS,EAClF,GAAI,CACL,CAAA,CAEL,CAEA,SAAS,SAAS,CAAE,YAAW,GAAG,GAAwB,CACxD,OACE,EAAC,KAAD,CACE,YAAU,YACV,UAAW,EAAG,8EAA+E,CAAS,EACtG,GAAI,CACL,CAAA,CAEL,CAEA,SAAS,UAAU,CAAE,YAAW,GAAG,GAAyB,CAC1D,OACE,EAAC,KAAD,CACE,YAAU,aACV,UAAW,EACT,4GACA,CACF,EACA,GAAI,CACL,CAAA,CAEL,CAEA,SAAS,UAAU,CAAE,YAAW,GAAG,GAAyB,CAC1D,OACE,EAAC,KAAD,CACE,YAAU,aACV,UAAW,EAAG,gEAAiE,CAAS,EACxF,GAAI,CACL,CAAA,CAEL,CAEA,SAAS,aAAa,CAAE,YAAW,GAAG,GAA4B,CAChE,OACE,EAAC,UAAD,CAAS,YAAU,gBAAgB,UAAW,EAAG,qCAAsC,CAAS,EAAG,GAAI,CAAQ,CAAA,CAEnH"}
|
|
@@ -1,9 +1,7 @@
|
|
|
1
1
|
import { n as __name } from "../chunk-CHh1Zzun.js";
|
|
2
2
|
import { Tabs as Tabs$1 } from "radix-ui";
|
|
3
|
-
import * as _$react_jsx_runtime0 from "react/jsx-runtime";
|
|
4
3
|
import { VariantProps } from "class-variance-authority";
|
|
5
4
|
import * as React from "react";
|
|
6
|
-
import * as _$class_variance_authority_types0 from "class-variance-authority/types";
|
|
7
5
|
|
|
8
6
|
//#region src/components/tabs.d.ts
|
|
9
7
|
type TabsProps = React.ComponentProps<typeof Tabs$1.Root>;
|
|
@@ -11,10 +9,10 @@ declare function Tabs({
|
|
|
11
9
|
className,
|
|
12
10
|
orientation,
|
|
13
11
|
...props
|
|
14
|
-
}: TabsProps):
|
|
12
|
+
}: TabsProps): import("react/jsx-runtime").JSX.Element;
|
|
15
13
|
declare const tabsListVariants: (props?: ({
|
|
16
14
|
variant?: "line" | "enclosed" | null | undefined;
|
|
17
|
-
} &
|
|
15
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
18
16
|
type TabsListProps = React.ComponentProps<typeof Tabs$1.List> & VariantProps<typeof tabsListVariants> & {
|
|
19
17
|
grow?: boolean;
|
|
20
18
|
};
|
|
@@ -25,15 +23,15 @@ declare function TabsList({
|
|
|
25
23
|
variant,
|
|
26
24
|
grow,
|
|
27
25
|
...props
|
|
28
|
-
}: TabsListProps):
|
|
26
|
+
}: TabsListProps): import("react/jsx-runtime").JSX.Element;
|
|
29
27
|
declare function TabsTrigger({
|
|
30
28
|
className,
|
|
31
29
|
...props
|
|
32
|
-
}: TabsTriggerProps):
|
|
30
|
+
}: TabsTriggerProps): import("react/jsx-runtime").JSX.Element;
|
|
33
31
|
declare function TabsContent({
|
|
34
32
|
className,
|
|
35
33
|
...props
|
|
36
|
-
}: TabsContentProps):
|
|
34
|
+
}: TabsContentProps): import("react/jsx-runtime").JSX.Element;
|
|
37
35
|
//#endregion
|
|
38
36
|
export { Tabs, TabsContent, TabsContentProps, TabsList, TabsListProps, TabsProps, TabsTrigger, TabsTriggerProps, tabsListVariants };
|
|
39
37
|
//# sourceMappingURL=tabs.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tabs.js","names":["TabsPrimitive"],"sources":["../../src/components/tabs.tsx"],"sourcesContent":["import type * as React from 'react'\n\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { Tabs as TabsPrimitive } from 'radix-ui'\n\nimport { cn } from '../lib/utils'\n\nexport type TabsProps = React.ComponentProps<typeof TabsPrimitive.Root>\n\nfunction Tabs({ className, orientation = 'horizontal', ...props }: TabsProps) {\n return (\n <TabsPrimitive.Root\n data-slot=\"tabs\"\n data-orientation={orientation}\n className={cn('group/tabs flex gap-2 data-horizontal:flex-col', className)}\n {...props}\n />\n )\n}\n\nconst tabsListVariants = cva(\n 'group/tabs-list inline-flex items-center justify-start rounded-lg group-data-horizontal/tabs:h-8 group-data-horizontal/tabs:w-full group-data-vertical/tabs:h-fit group-data-vertical/tabs:w-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none',\n {\n variants: {\n variant: {\n enclosed: 'bg-muted p-0.75',\n line: 'gap-1 bg-transparent group-data-horizontal/tabs:border-b group-data-horizontal/tabs:border-b-border group-data-vertical/tabs:border-r group-data-vertical/tabs:border-r-border'\n }\n },\n defaultVariants: {\n variant: 'line'\n }\n }\n)\n\nexport type TabsListProps = React.ComponentProps<typeof TabsPrimitive.List> &\n VariantProps<typeof tabsListVariants> & {\n grow?: boolean\n }\n\nexport type TabsTriggerProps = React.ComponentProps<typeof TabsPrimitive.Trigger>\n\nexport type TabsContentProps = React.ComponentProps<typeof TabsPrimitive.Content>\n\nfunction TabsList({ className, variant = 'line', grow = false, ...props }: TabsListProps) {\n return (\n <TabsPrimitive.List\n data-slot=\"tabs-list\"\n data-variant={variant}\n data-grow={grow}\n className={cn(tabsListVariants({ variant }), className)}\n {...props}\n />\n )\n}\n\nfunction TabsTrigger({ className, ...props }: TabsTriggerProps) {\n return (\n <TabsPrimitive.Trigger\n data-slot=\"tabs-trigger\"\n className={cn(\n \"relative inline-flex h-[calc(100%-1px)] items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-normal whitespace-nowrap text-foreground transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:bg-muted focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 group-data-[variant=enclosed]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n 'group-data-horizontal/tabs:group-data-[grow=true]/tabs-list:flex-1',\n 'group-data-[variant=line]/tabs-list:bg-transparent group-data-horizontal/tabs:group-data-[variant=line]/tabs-list:rounded-t-[8px] group-data-horizontal/tabs:group-data-[variant=line]/tabs-list:rounded-b-none group-data-vertical/tabs:group-data-[variant=line]/tabs-list:rounded-l-[8px] group-data-vertical/tabs:group-data-[variant=line]/tabs-list:rounded-r-none',\n 'group-data-horizontal/tabs:group-data-[variant=line]/tabs-list:data-active:border-b-primary-500 group-data-vertical/tabs:group-data-[variant=line]/tabs-list:data-active:border-r-primary-500',\n 'group-data-[variant=enclosed]/tabs-list:data-active:bg-background group-data-[variant=enclosed]/tabs-list:data-active:hover:bg-muted dark:group-data-[variant=enclosed]/tabs-list:data-active:border-input dark:group-data-[variant=enclosed]/tabs-list:data-active:bg-input/30',\n className\n )}\n {...props}\n />\n )\n}\n\nfunction TabsContent({ className, ...props }: TabsContentProps) {\n return (\n <TabsPrimitive.Content\n data-slot=\"tabs-content\"\n className={cn('flex-1 text-sm outline-none', className)}\n {...props}\n />\n )\n}\n\nexport { Tabs, TabsContent, TabsList, TabsTrigger, tabsListVariants }\n"],"mappings":"yLASA,SAAS,KAAK,CAAE,YAAW,cAAc,aAAc,GAAG,GAAoB,CAC5E,OACE,EAACA,EAAc,KAAf,CACE,YAAU,OACV,mBAAkB,EAClB,UAAW,EAAG,iDAAkD,
|
|
1
|
+
{"version":3,"file":"tabs.js","names":["TabsPrimitive"],"sources":["../../src/components/tabs.tsx"],"sourcesContent":["import type * as React from 'react'\n\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { Tabs as TabsPrimitive } from 'radix-ui'\n\nimport { cn } from '../lib/utils'\n\nexport type TabsProps = React.ComponentProps<typeof TabsPrimitive.Root>\n\nfunction Tabs({ className, orientation = 'horizontal', ...props }: TabsProps) {\n return (\n <TabsPrimitive.Root\n data-slot=\"tabs\"\n data-orientation={orientation}\n className={cn('group/tabs flex gap-2 data-horizontal:flex-col', className)}\n {...props}\n />\n )\n}\n\nconst tabsListVariants = cva(\n 'group/tabs-list inline-flex items-center justify-start rounded-lg group-data-horizontal/tabs:h-8 group-data-horizontal/tabs:w-full group-data-vertical/tabs:h-fit group-data-vertical/tabs:w-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none',\n {\n variants: {\n variant: {\n enclosed: 'bg-muted p-0.75',\n line: 'gap-1 bg-transparent group-data-horizontal/tabs:border-b group-data-horizontal/tabs:border-b-border group-data-vertical/tabs:border-r group-data-vertical/tabs:border-r-border'\n }\n },\n defaultVariants: {\n variant: 'line'\n }\n }\n)\n\nexport type TabsListProps = React.ComponentProps<typeof TabsPrimitive.List> &\n VariantProps<typeof tabsListVariants> & {\n grow?: boolean\n }\n\nexport type TabsTriggerProps = React.ComponentProps<typeof TabsPrimitive.Trigger>\n\nexport type TabsContentProps = React.ComponentProps<typeof TabsPrimitive.Content>\n\nfunction TabsList({ className, variant = 'line', grow = false, ...props }: TabsListProps) {\n return (\n <TabsPrimitive.List\n data-slot=\"tabs-list\"\n data-variant={variant}\n data-grow={grow}\n className={cn(tabsListVariants({ variant }), className)}\n {...props}\n />\n )\n}\n\nfunction TabsTrigger({ className, ...props }: TabsTriggerProps) {\n return (\n <TabsPrimitive.Trigger\n data-slot=\"tabs-trigger\"\n className={cn(\n \"relative inline-flex h-[calc(100%-1px)] items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-normal whitespace-nowrap text-foreground transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:bg-muted focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 group-data-[variant=enclosed]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n 'group-data-horizontal/tabs:group-data-[grow=true]/tabs-list:flex-1',\n 'group-data-[variant=line]/tabs-list:bg-transparent group-data-horizontal/tabs:group-data-[variant=line]/tabs-list:rounded-t-[8px] group-data-horizontal/tabs:group-data-[variant=line]/tabs-list:rounded-b-none group-data-vertical/tabs:group-data-[variant=line]/tabs-list:rounded-l-[8px] group-data-vertical/tabs:group-data-[variant=line]/tabs-list:rounded-r-none',\n 'group-data-horizontal/tabs:group-data-[variant=line]/tabs-list:data-active:border-b-primary-500 group-data-vertical/tabs:group-data-[variant=line]/tabs-list:data-active:border-r-primary-500',\n 'group-data-[variant=enclosed]/tabs-list:data-active:bg-background group-data-[variant=enclosed]/tabs-list:data-active:hover:bg-muted dark:group-data-[variant=enclosed]/tabs-list:data-active:border-input dark:group-data-[variant=enclosed]/tabs-list:data-active:bg-input/30',\n className\n )}\n {...props}\n />\n )\n}\n\nfunction TabsContent({ className, ...props }: TabsContentProps) {\n return (\n <TabsPrimitive.Content\n data-slot=\"tabs-content\"\n className={cn('flex-1 text-sm outline-none', className)}\n {...props}\n />\n )\n}\n\nexport { Tabs, TabsContent, TabsList, TabsTrigger, tabsListVariants }\n"],"mappings":"yLASA,SAAS,KAAK,CAAE,YAAW,cAAc,aAAc,GAAG,GAAoB,CAC5E,OACE,EAACA,EAAc,KAAf,CACE,YAAU,OACV,mBAAkB,EAClB,UAAW,EAAG,iDAAkD,CAAS,EACzE,GAAI,CACL,CAAA,CAEL,CAEA,MAAM,EAAmB,EACvB,sQACA,CACE,SAAU,CACR,QAAS,CACP,SAAU,kBACV,KAAM,gLACR,CACF,EACA,gBAAiB,CACf,QAAS,MACX,CACF,CACF,EAWA,SAAS,SAAS,CAAE,YAAW,UAAU,OAAQ,OAAO,GAAO,GAAG,GAAwB,CACxF,OACE,EAACA,EAAc,KAAf,CACE,YAAU,YACV,eAAc,EACd,YAAW,EACX,UAAW,EAAG,EAAiB,CAAE,SAAQ,CAAC,EAAG,CAAS,EACtD,GAAI,CACL,CAAA,CAEL,CAEA,SAAS,YAAY,CAAE,YAAW,GAAG,GAA2B,CAC9D,OACE,EAACA,EAAc,QAAf,CACE,YAAU,eACV,UAAW,EACT,0pBACA,qEACA,2WACA,gMACA,kRACA,CACF,EACA,GAAI,CACL,CAAA,CAEL,CAEA,SAAS,YAAY,CAAE,YAAW,GAAG,GAA2B,CAC9D,OACE,EAACA,EAAc,QAAf,CACE,YAAU,eACV,UAAW,EAAG,8BAA+B,CAAS,EACtD,GAAI,CACL,CAAA,CAEL"}
|
|
@@ -1,13 +1,11 @@
|
|
|
1
1
|
import { n as __name } from "../chunk-CHh1Zzun.js";
|
|
2
|
-
import * as _$react_jsx_runtime0 from "react/jsx-runtime";
|
|
3
2
|
import { VariantProps } from "class-variance-authority";
|
|
4
3
|
import * as React from "react";
|
|
5
|
-
import * as _$class_variance_authority_types0 from "class-variance-authority/types";
|
|
6
4
|
|
|
7
5
|
//#region src/components/text.d.ts
|
|
8
6
|
declare const textVariants: (props?: ({
|
|
9
7
|
size?: "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
|
|
10
|
-
} &
|
|
8
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
11
9
|
type TextProps = React.ComponentProps<'p'> & VariantProps<typeof textVariants> & {
|
|
12
10
|
asChild?: boolean;
|
|
13
11
|
};
|
|
@@ -16,7 +14,7 @@ declare function Text({
|
|
|
16
14
|
size,
|
|
17
15
|
asChild,
|
|
18
16
|
...props
|
|
19
|
-
}: TextProps):
|
|
17
|
+
}: TextProps): import("react/jsx-runtime").JSX.Element;
|
|
20
18
|
//#endregion
|
|
21
19
|
export { Text, TextProps, textVariants };
|
|
22
20
|
//# sourceMappingURL=text.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"text.js","names":[],"sources":["../../src/components/text.tsx"],"sourcesContent":["import type * as React from 'react'\n\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { Slot } from 'radix-ui'\n\nimport { cn } from '../lib/utils'\n\nconst textVariants = cva('text-foreground font-normal', {\n variants: {\n size: {\n xs: 'text-xs',\n sm: 'text-sm',\n md: 'text-base',\n lg: 'text-lg',\n xl: 'text-xl'\n }\n },\n defaultVariants: {\n size: 'md'\n }\n})\n\nexport type TextProps = React.ComponentProps<'p'> &\n VariantProps<typeof textVariants> & {\n asChild?: boolean\n }\n\nfunction Text({ className, size = 'md', asChild = false, ...props }: TextProps) {\n const Comp = asChild ? Slot.Root : 'p'\n\n return <Comp data-slot=\"text\" data-size={size} className={cn(textVariants({ size }), className)} {...props} />\n}\n\nexport { Text, textVariants }\n"],"mappings":"yLAOA,MAAM,EAAe,EAAI,8BAA+B,CACtD,SAAU,CACR,KAAM,CACJ,GAAI,UACJ,GAAI,UACJ,GAAI,YACJ,GAAI,UACJ,GAAI,
|
|
1
|
+
{"version":3,"file":"text.js","names":[],"sources":["../../src/components/text.tsx"],"sourcesContent":["import type * as React from 'react'\n\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { Slot } from 'radix-ui'\n\nimport { cn } from '../lib/utils'\n\nconst textVariants = cva('text-foreground font-normal', {\n variants: {\n size: {\n xs: 'text-xs',\n sm: 'text-sm',\n md: 'text-base',\n lg: 'text-lg',\n xl: 'text-xl'\n }\n },\n defaultVariants: {\n size: 'md'\n }\n})\n\nexport type TextProps = React.ComponentProps<'p'> &\n VariantProps<typeof textVariants> & {\n asChild?: boolean\n }\n\nfunction Text({ className, size = 'md', asChild = false, ...props }: TextProps) {\n const Comp = asChild ? Slot.Root : 'p'\n\n return <Comp data-slot=\"text\" data-size={size} className={cn(textVariants({ size }), className)} {...props} />\n}\n\nexport { Text, textVariants }\n"],"mappings":"yLAOA,MAAM,EAAe,EAAI,8BAA+B,CACtD,SAAU,CACR,KAAM,CACJ,GAAI,UACJ,GAAI,UACJ,GAAI,YACJ,GAAI,UACJ,GAAI,SACN,CACF,EACA,gBAAiB,CACf,KAAM,IACR,CACF,CAAC,EAOD,SAAS,KAAK,CAAE,YAAW,OAAO,KAAM,UAAU,GAAO,GAAG,GAAoB,CAG9E,OAAO,EAFM,EAAU,EAAK,KAAO,IAE5B,CAAM,YAAU,OAAO,YAAW,EAAM,UAAW,EAAG,EAAa,CAAE,MAAK,CAAC,EAAG,CAAS,EAAG,GAAI,CAAQ,CAAA,CAC/G"}
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { n as __name } from "../chunk-CHh1Zzun.js";
|
|
2
|
-
import * as _$react_jsx_runtime0 from "react/jsx-runtime";
|
|
3
2
|
import * as React from "react";
|
|
4
3
|
|
|
5
4
|
//#region src/components/textarea.d.ts
|
|
@@ -8,7 +7,7 @@ declare function Textarea({
|
|
|
8
7
|
className,
|
|
9
8
|
id,
|
|
10
9
|
...props
|
|
11
|
-
}: TextareaProps):
|
|
10
|
+
}: TextareaProps): import("react/jsx-runtime").JSX.Element;
|
|
12
11
|
//#endregion
|
|
13
12
|
export { Textarea, TextareaProps };
|
|
14
13
|
//# sourceMappingURL=textarea.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"textarea.js","names":[],"sources":["../../src/components/textarea.tsx"],"sourcesContent":["import type * as React from 'react'\n\nimport { cn } from '../lib/utils'\nimport { useFieldControlId } from './field'\n\nexport type TextareaProps = React.ComponentProps<'textarea'>\n\nfunction Textarea({ className, id, ...props }: TextareaProps) {\n const fieldControlId = useFieldControlId(id)\n\n return (\n <textarea\n id={fieldControlId}\n data-slot=\"textarea\"\n className={cn(\n 'flex field-sizing-content min-h-16 w-full rounded-lg border border-input bg-transparent px-2.5 py-2 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40',\n className\n )}\n {...props}\n />\n )\n}\n\nexport { Textarea }\n"],"mappings":"yJAOA,SAAS,SAAS,CAAE,YAAW,KAAI,GAAG,GAAwB,CAG5D,OACE,EAAC,WAAD,CACE,GAJmB,EAAkB,
|
|
1
|
+
{"version":3,"file":"textarea.js","names":[],"sources":["../../src/components/textarea.tsx"],"sourcesContent":["import type * as React from 'react'\n\nimport { cn } from '../lib/utils'\nimport { useFieldControlId } from './field'\n\nexport type TextareaProps = React.ComponentProps<'textarea'>\n\nfunction Textarea({ className, id, ...props }: TextareaProps) {\n const fieldControlId = useFieldControlId(id)\n\n return (\n <textarea\n id={fieldControlId}\n data-slot=\"textarea\"\n className={cn(\n 'flex field-sizing-content min-h-16 w-full rounded-lg border border-input bg-transparent px-2.5 py-2 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40',\n className\n )}\n {...props}\n />\n )\n}\n\nexport { Textarea }\n"],"mappings":"yJAOA,SAAS,SAAS,CAAE,YAAW,KAAI,GAAG,GAAwB,CAG5D,OACE,EAAC,WAAD,CACE,GAJmB,EAAkB,CAIpB,EACjB,YAAU,WACV,UAAW,EACT,yhBACA,CACF,EACA,GAAI,CACL,CAAA,CAEL"}
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { n as __name } from "../chunk-CHh1Zzun.js";
|
|
2
2
|
import { Button } from "./button.js";
|
|
3
|
-
import * as _$react_jsx_runtime0 from "react/jsx-runtime";
|
|
4
3
|
import * as React from "react";
|
|
5
4
|
|
|
6
5
|
//#region src/components/theme.d.ts
|
|
@@ -20,9 +19,9 @@ declare function ThemeProvider({
|
|
|
20
19
|
defaultTheme,
|
|
21
20
|
storageKey,
|
|
22
21
|
...props
|
|
23
|
-
}: ThemeProviderProps):
|
|
22
|
+
}: ThemeProviderProps): import("react/jsx-runtime").JSX.Element;
|
|
24
23
|
declare const useTheme: () => ThemeProviderState;
|
|
25
|
-
declare function ModeToggle(props: ModeToggleProps):
|
|
24
|
+
declare function ModeToggle(props: ModeToggleProps): import("react/jsx-runtime").JSX.Element;
|
|
26
25
|
//#endregion
|
|
27
26
|
export { ModeToggle, ModeToggleProps, Theme, ThemeProvider, ThemeProviderProps, ThemeProviderState, useTheme };
|
|
28
27
|
//# sourceMappingURL=theme.d.ts.map
|
package/dist/components/theme.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import"../chunk-CHh1Zzun.js";import{Button as e}from"./button.js";import{DropdownMenu as t,DropdownMenuContent as n,DropdownMenuItem as r,DropdownMenuTrigger as i}from"./dropdown-menu.js";import{IconMoon as a,IconSun as o}from"@tabler/icons-react";import{jsx as s,jsxs as c}from"react/jsx-runtime";import{createContext as l,use as u,useEffect as d,useState as f}from"react";const p=l({});function ThemeProvider({children:e,defaultTheme:t=`system`,storageKey:n=`vite-ui-theme`,...r}){let[i,a]=f(()=>localStorage.getItem(n)||t);d(()=>{let e=window.document.documentElement;if(e.classList.remove(`light`,`dark`),i===`system`){let t=window.matchMedia(`(prefers-color-scheme: dark)`).matches?`dark`:`light`;e.classList.add(t);return}e.classList.add(i)},[i]);let o={theme:i,setTheme:e=>{localStorage.setItem(n,e),a(e)}};return s(p.Provider,{...r,value:o,children:e})}const useTheme=()=>{let e=u(p);if(e===void 0||Object.keys(e).length===0)throw Error(`useTheme must be used within a ThemeProvider`);return e};function ModeToggle(l){let{setTheme:u}=useTheme();return c(t,{children:[s(i,{children:c(e,{variant:`outline`,size:`icon`,...l,children:[s(o,{className:`h-[1.2rem] w-[1.2rem] scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90`}),s(a,{className:`absolute h-[1.2rem] w-[1.2rem] scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0`}),s(`span`,{className:`sr-only`,children:`Toggle theme`})]})}),c(n,{align:`end`,children:[s(r,{onClick:()=>u(`light`),children:`Light`}),s(r,{onClick:()=>u(`dark`),children:`Dark`}),s(r,{onClick:()=>u(`system`),children:`System`})]})]})}export{ModeToggle,ThemeProvider,useTheme};
|
|
1
|
+
import"../chunk-CHh1Zzun.js";import{Button as e}from"./button.js";import{DropdownMenu as t,DropdownMenuContent as n,DropdownMenuItem as r,DropdownMenuTrigger as i}from"./dropdown-menu.js";import{IconMoon as a,IconSun as o}from"@tabler/icons-react";import{jsx as s,jsxs as c}from"react/jsx-runtime";import{createContext as l,use as u,useEffect as d,useState as f}from"react";const p=l({});function ThemeProvider({children:e,defaultTheme:t=`system`,storageKey:n=`vite-ui-theme`,...r}){let[i,a]=f(()=>localStorage.getItem(n)||t);d(()=>{let e=window.document.documentElement;if(e.classList.remove(`light`,`dark`),i===`system`){let t=window.matchMedia(`(prefers-color-scheme: dark)`).matches?`dark`:`light`;e.classList.add(t);return}e.classList.add(i)},[i]);let o={theme:i,setTheme:e=>{localStorage.setItem(n,e),a(e)}};return s(p.Provider,{...r,value:o,children:e})}const useTheme=()=>{let e=u(p);if(e===void 0||Object.keys(e).length===0)throw Error(`useTheme must be used within a ThemeProvider`);return e};function ModeToggle(l){let{setTheme:u}=useTheme();return c(t,{children:[s(i,{asChild:!0,children:c(e,{variant:`outline`,size:`icon`,...l,children:[s(o,{className:`h-[1.2rem] w-[1.2rem] scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90`}),s(a,{className:`absolute h-[1.2rem] w-[1.2rem] scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0`}),s(`span`,{className:`sr-only`,children:`Toggle theme`})]})}),c(n,{align:`end`,children:[s(r,{onClick:()=>u(`light`),children:`Light`}),s(r,{onClick:()=>u(`dark`),children:`Dark`}),s(r,{onClick:()=>u(`system`),children:`System`})]})]})}export{ModeToggle,ThemeProvider,useTheme};
|
|
2
2
|
//# sourceMappingURL=theme.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"theme.js","names":[],"sources":["../../src/components/theme.tsx"],"sourcesContent":["import type * as React from 'react'\nimport { createContext, use, useEffect, useState } from 'react'\n\nimport { IconMoon, IconSun } from '@tabler/icons-react'\n\nimport { Button } from './button'\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from './dropdown-menu'\n\nexport type Theme = 'dark' | 'light' | 'system'\n\nexport type ThemeProviderProps = {\n children: React.ReactNode\n defaultTheme?: Theme\n storageKey?: string\n}\n\nexport type ThemeProviderState = {\n theme: Theme\n setTheme: (theme: Theme) => void\n}\n\nexport type ModeToggleProps = React.ComponentProps<typeof Button>\n\nconst ThemeProviderContext = createContext({} as ThemeProviderState)\n\nexport function ThemeProvider({\n children,\n defaultTheme = 'system',\n storageKey = 'vite-ui-theme',\n ...props\n}: ThemeProviderProps) {\n const [theme, setTheme] = useState<Theme>(() => (localStorage.getItem(storageKey) as Theme) || defaultTheme)\n\n useEffect(() => {\n const root = window.document.documentElement\n\n root.classList.remove('light', 'dark')\n\n if (theme === 'system') {\n const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'\n\n root.classList.add(systemTheme)\n return\n }\n\n root.classList.add(theme)\n }, [theme])\n\n const value = {\n theme,\n setTheme: (theme: Theme) => {\n localStorage.setItem(storageKey, theme)\n setTheme(theme)\n }\n }\n\n return (\n <ThemeProviderContext.Provider {...props} value={value}>\n {children}\n </ThemeProviderContext.Provider>\n )\n}\n\nexport const useTheme = () => {\n const context = use(ThemeProviderContext)\n\n if (context === undefined || Object.keys(context).length === 0) {\n throw new Error('useTheme must be used within a ThemeProvider')\n }\n\n return context\n}\n\nexport function ModeToggle(props: ModeToggleProps) {\n const { setTheme } = useTheme()\n\n return (\n <DropdownMenu>\n <DropdownMenuTrigger>\n <Button variant=\"outline\" size=\"icon\" {...props}>\n <IconSun className=\"h-[1.2rem] w-[1.2rem] scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90\" />\n <IconMoon className=\"absolute h-[1.2rem] w-[1.2rem] scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0\" />\n <span className=\"sr-only\">Toggle theme</span>\n </Button>\n </DropdownMenuTrigger>\n <DropdownMenuContent align=\"end\">\n <DropdownMenuItem onClick={() => setTheme('light')}>Light</DropdownMenuItem>\n <DropdownMenuItem onClick={() => setTheme('dark')}>Dark</DropdownMenuItem>\n <DropdownMenuItem onClick={() => setTheme('system')}>System</DropdownMenuItem>\n </DropdownMenuContent>\n </DropdownMenu>\n )\n}\n"],"mappings":"sXAuBA,MAAM,EAAuB,EAAc,
|
|
1
|
+
{"version":3,"file":"theme.js","names":[],"sources":["../../src/components/theme.tsx"],"sourcesContent":["import type * as React from 'react'\nimport { createContext, use, useEffect, useState } from 'react'\n\nimport { IconMoon, IconSun } from '@tabler/icons-react'\n\nimport { Button } from './button'\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from './dropdown-menu'\n\nexport type Theme = 'dark' | 'light' | 'system'\n\nexport type ThemeProviderProps = {\n children: React.ReactNode\n defaultTheme?: Theme\n storageKey?: string\n}\n\nexport type ThemeProviderState = {\n theme: Theme\n setTheme: (theme: Theme) => void\n}\n\nexport type ModeToggleProps = React.ComponentProps<typeof Button>\n\nconst ThemeProviderContext = createContext({} as ThemeProviderState)\n\nexport function ThemeProvider({\n children,\n defaultTheme = 'system',\n storageKey = 'vite-ui-theme',\n ...props\n}: ThemeProviderProps) {\n const [theme, setTheme] = useState<Theme>(() => (localStorage.getItem(storageKey) as Theme) || defaultTheme)\n\n useEffect(() => {\n const root = window.document.documentElement\n\n root.classList.remove('light', 'dark')\n\n if (theme === 'system') {\n const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'\n\n root.classList.add(systemTheme)\n return\n }\n\n root.classList.add(theme)\n }, [theme])\n\n const value = {\n theme,\n setTheme: (theme: Theme) => {\n localStorage.setItem(storageKey, theme)\n setTheme(theme)\n }\n }\n\n return (\n <ThemeProviderContext.Provider {...props} value={value}>\n {children}\n </ThemeProviderContext.Provider>\n )\n}\n\nexport const useTheme = () => {\n const context = use(ThemeProviderContext)\n\n if (context === undefined || Object.keys(context).length === 0) {\n throw new Error('useTheme must be used within a ThemeProvider')\n }\n\n return context\n}\n\nexport function ModeToggle(props: ModeToggleProps) {\n const { setTheme } = useTheme()\n\n return (\n <DropdownMenu>\n <DropdownMenuTrigger asChild>\n <Button variant=\"outline\" size=\"icon\" {...props}>\n <IconSun className=\"h-[1.2rem] w-[1.2rem] scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90\" />\n <IconMoon className=\"absolute h-[1.2rem] w-[1.2rem] scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0\" />\n <span className=\"sr-only\">Toggle theme</span>\n </Button>\n </DropdownMenuTrigger>\n <DropdownMenuContent align=\"end\">\n <DropdownMenuItem onClick={() => setTheme('light')}>Light</DropdownMenuItem>\n <DropdownMenuItem onClick={() => setTheme('dark')}>Dark</DropdownMenuItem>\n <DropdownMenuItem onClick={() => setTheme('system')}>System</DropdownMenuItem>\n </DropdownMenuContent>\n </DropdownMenu>\n )\n}\n"],"mappings":"sXAuBA,MAAM,EAAuB,EAAc,CAAC,CAAuB,EAEnE,SAAgB,cAAc,CAC5B,WACA,eAAe,SACf,aAAa,gBACb,GAAG,GACkB,CACrB,GAAM,CAAC,EAAO,GAAY,MAAuB,aAAa,QAAQ,CAAU,GAAe,CAAY,EAE3G,MAAgB,CACd,IAAM,EAAO,OAAO,SAAS,gBAI7B,GAFA,EAAK,UAAU,OAAO,QAAS,MAAM,EAEjC,IAAU,SAAU,CACtB,IAAM,EAAc,OAAO,WAAW,8BAA8B,EAAE,QAAU,OAAS,QAEzF,EAAK,UAAU,IAAI,CAAW,EAC9B,MACF,CAEA,EAAK,UAAU,IAAI,CAAK,CAC1B,EAAG,CAAC,CAAK,CAAC,EAEV,IAAM,EAAQ,CACZ,QACA,SAAW,GAAiB,CAC1B,aAAa,QAAQ,EAAY,CAAK,EACtC,EAAS,CAAK,CAChB,CACF,EAEA,OACE,EAAC,EAAqB,SAAtB,CAA+B,GAAI,EAAc,QAC9C,UAC4B,CAAA,CAEnC,CAEA,MAAa,aAAiB,CAC5B,IAAM,EAAU,EAAI,CAAoB,EAExC,GAAI,IAAY,IAAA,IAAa,OAAO,KAAK,CAAO,EAAE,SAAW,EAC3D,MAAU,MAAM,8CAA8C,EAGhE,OAAO,CACT,EAEA,SAAgB,WAAW,EAAwB,CACjD,GAAM,CAAE,YAAa,SAAS,EAE9B,OACE,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAqB,QAAA,YACnB,EAAC,EAAD,CAAQ,QAAQ,UAAU,KAAK,OAAO,GAAI,WAA1C,CACE,EAAC,EAAD,CAAS,UAAU,sFAAwF,CAAA,EAC3G,EAAC,EAAD,CAAU,UAAU,8FAAgG,CAAA,EACpH,EAAC,OAAD,CAAM,UAAU,mBAAU,cAAkB,CAAA,CACtC,GACW,CAAA,EACrB,EAAC,EAAD,CAAqB,MAAM,eAA3B,CACE,EAAC,EAAD,CAAkB,YAAe,EAAS,OAAO,WAAG,OAAuB,CAAA,EAC3E,EAAC,EAAD,CAAkB,YAAe,EAAS,MAAM,WAAG,MAAsB,CAAA,EACzE,EAAC,EAAD,CAAkB,YAAe,EAAS,QAAQ,WAAG,QAAwB,CAAA,CAC1D,GACT,CAAA,CAAA,CAElB"}
|
|
@@ -1,20 +1,19 @@
|
|
|
1
1
|
import { n as __name } from "../chunk-CHh1Zzun.js";
|
|
2
2
|
import { VariantProps } from "class-variance-authority";
|
|
3
3
|
import * as React from "react";
|
|
4
|
-
import * as _$class_variance_authority_types0 from "class-variance-authority/types";
|
|
5
4
|
|
|
6
5
|
//#region src/components/timeline.d.ts
|
|
7
6
|
declare const timelineVariants: (props?: ({
|
|
8
7
|
size?: "sm" | "md" | "lg" | null | undefined;
|
|
9
|
-
} &
|
|
8
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
10
9
|
declare const timelineConnectorVariants: (props?: ({
|
|
11
10
|
status?: "pending" | "completed" | "in-progress" | null | undefined;
|
|
12
11
|
color?: "destructive" | "secondary" | "primary" | "muted" | "accent" | "gradient" | null | undefined;
|
|
13
|
-
} &
|
|
12
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
14
13
|
declare const timelineIconVariants: (props?: ({
|
|
15
14
|
color?: "destructive" | "secondary" | "primary" | "muted" | "accent" | null | undefined;
|
|
16
15
|
size?: "sm" | "md" | "lg" | null | undefined;
|
|
17
|
-
} &
|
|
16
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
18
17
|
type TimelineIconSize = NonNullable<VariantProps<typeof timelineIconVariants>['size']>;
|
|
19
18
|
type TimelineConnectorColor = NonNullable<VariantProps<typeof timelineConnectorVariants>['color']>;
|
|
20
19
|
type TimelineIconColor = NonNullable<VariantProps<typeof timelineIconVariants>['color']>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"timeline.js","names":[],"sources":["../../src/components/timeline.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { IconAlertCircle } from '@tabler/icons-react'\nimport { cva, type VariantProps } from 'class-variance-authority'\n\nimport { cn } from '../lib/utils'\nimport { Spinner } from './spinner'\n\nconst timelineVariants = cva('relative mx-auto m-0 flex w-full max-w-2xl min-h-150 list-none flex-col p-0 py-8', {\n variants: {\n size: {\n sm: 'gap-4',\n md: 'gap-6',\n lg: 'gap-8'\n }\n },\n defaultVariants: {\n size: 'md'\n }\n})\n\nconst timelineItemVariants = cva('relative w-full last:mb-0', {\n variants: {\n tone: {\n default: 'mb-2',\n error: 'mb-2'\n }\n },\n defaultVariants: {\n tone: 'default'\n }\n})\n\nconst timelineConnectorVariants = cva('w-0.5', {\n variants: {\n status: {\n completed: 'bg-primary',\n 'in-progress': 'bg-accent',\n pending: 'bg-muted'\n },\n color: {\n primary: 'bg-primary',\n secondary: 'bg-secondary',\n muted: 'bg-muted',\n accent: 'bg-accent',\n destructive: 'bg-destructive',\n gradient: 'bg-linear-to-b from-primary to-muted'\n }\n }\n})\n\nconst timelineIconVariants = cva(\n 'relative flex items-center justify-center rounded-full ring-8 ring-background shadow-sm',\n {\n variants: {\n color: {\n primary: 'bg-primary text-primary-foreground',\n secondary: 'bg-secondary text-secondary-foreground',\n muted: 'bg-muted text-muted-foreground',\n accent: 'bg-accent text-accent-foreground',\n destructive: 'bg-destructive text-destructive-foreground'\n },\n size: {\n sm: 'h-8 w-8',\n md: 'h-10 w-10',\n lg: 'h-12 w-12'\n }\n },\n defaultVariants: {\n color: 'primary',\n size: 'md'\n }\n }\n)\n\nconst timelineIconContentVariants = cva('flex items-center justify-center', {\n variants: {\n size: {\n sm: 'h-4 w-4',\n md: 'h-5 w-5',\n lg: 'h-6 w-6'\n }\n },\n defaultVariants: {\n size: 'md'\n }\n})\n\nexport type TimelineIconSize = NonNullable<VariantProps<typeof timelineIconVariants>['size']>\nexport type TimelineConnectorColor = NonNullable<VariantProps<typeof timelineConnectorVariants>['color']>\nexport type TimelineIconColor = NonNullable<VariantProps<typeof timelineIconVariants>['color']>\nexport type TimelineStatus = NonNullable<VariantProps<typeof timelineConnectorVariants>['status']>\n\nexport type TimelineProps = React.ComponentProps<'ol'> &\n VariantProps<typeof timelineVariants> & {\n iconSize?: TimelineIconSize\n }\n\nconst Timeline = React.forwardRef<HTMLOListElement, TimelineProps>(\n ({ className, iconSize, size = 'md', children, ...props }, ref) => {\n const childArray = React.Children.toArray(children)\n const totalItems = childArray.filter(isTimelineItemElement).length\n\n if (totalItems === 0) {\n return (\n <ol\n ref={ref}\n aria-label=\"Timeline\"\n data-slot=\"timeline\"\n data-size={size}\n className={cn(timelineVariants({ size }), className)}\n {...props}\n >\n <li className=\"list-none\">\n <TimelineEmpty />\n </li>\n </ol>\n )\n }\n\n let itemIndex = 0\n\n return (\n <ol\n ref={ref}\n aria-label=\"Timeline\"\n data-slot=\"timeline\"\n data-size={size}\n className={cn(timelineVariants({ size }), className)}\n {...props}\n >\n {React.Children.map(children, (child) => {\n if (!isTimelineItemElement(child)) {\n return child\n }\n\n const isLastItem = itemIndex === totalItems - 1\n itemIndex += 1\n\n return React.cloneElement(child, {\n iconSize: child.props.iconSize ?? iconSize,\n showConnector: child.props.showConnector ?? !isLastItem\n })\n })}\n </ol>\n )\n }\n)\nTimeline.displayName = 'Timeline'\n\nexport type TimelineItemProps = React.ComponentProps<'li'> & {\n date?: React.ReactNode\n title?: React.ReactNode\n description?: React.ReactNode\n icon?: React.ReactNode\n iconColor?: TimelineIconColor\n status?: TimelineStatus\n connectorColor?: TimelineConnectorColor\n showConnector?: boolean\n iconSize?: TimelineIconSize\n loading?: boolean\n error?: React.ReactNode\n}\n\nconst TimelineItem = React.forwardRef<HTMLLIElement, TimelineItemProps>(\n (\n {\n className,\n children,\n date,\n title,\n description,\n icon,\n iconColor,\n status = 'completed',\n connectorColor,\n showConnector = true,\n iconSize,\n loading = false,\n error,\n ...props\n },\n ref\n ) => {\n if (loading) {\n return (\n <li\n ref={ref}\n aria-busy=\"true\"\n data-slot=\"timeline-item\"\n data-status={status}\n className={cn(timelineItemVariants(), className)}\n {...props}\n >\n <div className=\"grid grid-cols-[minmax(auto,8rem)_auto_1fr] items-start px-4\">\n <div className=\"pr-4 text-right\">\n <div className=\"h-4 w-24 animate-pulse rounded bg-muted\" />\n </div>\n\n <div className=\"mx-3 flex flex-col items-center justify-start gap-y-2\">\n <div className=\"relative flex h-8 w-8 animate-pulse items-center justify-center rounded-full bg-muted ring-8 ring-background\">\n <Spinner />\n </div>\n {showConnector && <div className=\"h-full w-0.5 animate-pulse bg-muted\" />}\n </div>\n\n <div className=\"flex flex-col gap-2 pl-2\">\n <div className=\"space-y-2\">\n <div className=\"h-4 w-24 animate-pulse rounded bg-muted\" />\n <div className=\"h-3 w-48 animate-pulse rounded bg-muted\" />\n </div>\n </div>\n </div>\n </li>\n )\n }\n\n if (error) {\n return (\n <li\n ref={ref}\n role=\"alert\"\n data-slot=\"timeline-item\"\n data-status=\"error\"\n className={cn(timelineItemVariants({ tone: 'error' }), className)}\n {...props}\n >\n <div className=\"grid grid-cols-[minmax(auto,8rem)_auto_1fr] items-start px-4\">\n <div className=\"pr-4 text-right\">\n <TimelineTime className=\"text-destructive\">{date}</TimelineTime>\n </div>\n\n <div className=\"mx-3 flex flex-col items-center justify-start gap-y-2\">\n <div className=\"relative flex h-8 w-8 items-center justify-center rounded-full bg-destructive/20 ring-8 ring-background\">\n <IconAlertCircle className=\"h-4 w-4 text-destructive\" />\n </div>\n {showConnector && <TimelineConnector color=\"destructive\" className=\"h-full\" />}\n </div>\n\n <div className=\"flex flex-col gap-2 pl-2\">\n <TimelineHeader>\n <TimelineTitle className=\"text-destructive\">{title || 'Error'}</TimelineTitle>\n </TimelineHeader>\n <TimelineDescription className=\"text-destructive\">{error}</TimelineDescription>\n </div>\n </div>\n </li>\n )\n }\n\n if (children != null) {\n return (\n <li\n ref={ref}\n data-slot=\"timeline-item\"\n data-status={status}\n className={cn(timelineItemVariants(), className)}\n aria-current={status === 'in-progress' ? 'step' : undefined}\n {...props}\n >\n {children}\n </li>\n )\n }\n\n return (\n <li\n ref={ref}\n data-slot=\"timeline-item\"\n data-status={status}\n className={cn(timelineItemVariants(), className)}\n aria-current={status === 'in-progress' ? 'step' : undefined}\n {...props}\n >\n <div className=\"grid grid-cols-[1fr_auto_1fr] items-start gap-4\">\n <div className=\"flex flex-col justify-start pt-1\">\n <TimelineTime className=\"pr-4 text-right\">{date}</TimelineTime>\n </div>\n\n <div className=\"flex flex-col items-center\">\n <div className=\"relative z-10\">\n <TimelineIcon\n icon={icon}\n color={iconColor ?? (status === 'pending' ? 'muted' : 'primary')}\n size={iconSize}\n />\n </div>\n {showConnector && <TimelineConnector status={status} color={connectorColor} className=\"mt-2 h-16\" />}\n </div>\n\n <TimelineContent>\n <TimelineHeader>\n <TimelineTitle>{title}</TimelineTitle>\n </TimelineHeader>\n <TimelineDescription>{description}</TimelineDescription>\n </TimelineContent>\n </div>\n </li>\n )\n }\n)\nTimelineItem.displayName = 'TimelineItem'\n\nexport type TimelineTimeProps = React.ComponentProps<'time'> & {\n date?: string | Date | number\n format?: Intl.DateTimeFormatOptions\n}\n\nconst defaultDateFormat: Intl.DateTimeFormatOptions = {\n year: 'numeric',\n month: 'short',\n day: '2-digit'\n}\n\nconst TimelineTime = React.forwardRef<HTMLTimeElement, TimelineTimeProps>(\n ({ className, date, format, children, ...props }, ref) => {\n const dateValue = React.useMemo(() => getValidDate(date), [date])\n\n const formattedDate = React.useMemo(() => {\n if (!dateValue) {\n return ''\n }\n\n return new Intl.DateTimeFormat('en-US', {\n ...defaultDateFormat,\n ...format\n }).format(dateValue)\n }, [dateValue, format])\n\n return (\n <time\n ref={ref}\n data-slot=\"timeline-time\"\n dateTime={dateValue?.toISOString()}\n className={cn('text-sm font-medium tracking-tight text-muted-foreground', className)}\n {...props}\n >\n {children || formattedDate}\n </time>\n )\n }\n)\nTimelineTime.displayName = 'TimelineTime'\n\nexport type TimelineConnectorProps = React.ComponentProps<'div'> & VariantProps<typeof timelineConnectorVariants>\n\nconst TimelineConnector = React.forwardRef<HTMLDivElement, TimelineConnectorProps>(\n ({ className, status = 'completed', color, ...props }, ref) => (\n <div\n ref={ref}\n data-slot=\"timeline-connector\"\n data-status={status}\n data-color={color}\n className={cn(color ? timelineConnectorVariants({ color }) : timelineConnectorVariants({ status }), className)}\n {...props}\n />\n )\n)\nTimelineConnector.displayName = 'TimelineConnector'\n\nexport type TimelineHeaderProps = React.ComponentProps<'div'>\n\nconst TimelineHeader = React.forwardRef<HTMLDivElement, TimelineHeaderProps>(({ className, ...props }, ref) => (\n <div ref={ref} data-slot=\"timeline-header\" className={cn('flex items-center gap-4', className)} {...props} />\n))\nTimelineHeader.displayName = 'TimelineHeader'\n\nexport type TimelineTitleProps = React.ComponentProps<'h3'>\n\nconst TimelineTitle = React.forwardRef<HTMLHeadingElement, TimelineTitleProps>(({ className, ...props }, ref) => (\n <h3\n ref={ref}\n data-slot=\"timeline-title\"\n className={cn('font-semibold leading-none tracking-tight text-secondary-foreground', className)}\n {...props}\n />\n))\nTimelineTitle.displayName = 'TimelineTitle'\n\nexport type TimelineIconProps = React.ComponentProps<'div'> &\n VariantProps<typeof timelineIconVariants> & {\n icon?: React.ReactNode\n }\n\nconst TimelineIcon = React.forwardRef<HTMLDivElement, TimelineIconProps>(\n ({ className, color = 'primary', icon, size = 'md', ...props }, ref) => (\n <div\n ref={ref}\n data-slot=\"timeline-icon\"\n data-color={color}\n data-size={size}\n className={cn(timelineIconVariants({ color, size }), className)}\n {...props}\n >\n {icon ? (\n <div className={timelineIconContentVariants({ size })}>{icon}</div>\n ) : (\n <div className={cn('rounded-full', timelineIconContentVariants({ size }))} />\n )}\n </div>\n )\n)\nTimelineIcon.displayName = 'TimelineIcon'\n\nexport type TimelineDescriptionProps = React.ComponentProps<'p'>\n\nconst TimelineDescription = React.forwardRef<HTMLParagraphElement, TimelineDescriptionProps>(\n ({ className, ...props }, ref) => (\n <p\n ref={ref}\n data-slot=\"timeline-description\"\n className={cn('max-w-sm text-sm text-muted-foreground', className)}\n {...props}\n />\n )\n)\nTimelineDescription.displayName = 'TimelineDescription'\n\nexport type TimelineContentProps = React.ComponentProps<'div'>\n\nconst TimelineContent = React.forwardRef<HTMLDivElement, TimelineContentProps>(({ className, ...props }, ref) => (\n <div ref={ref} data-slot=\"timeline-content\" className={cn('flex flex-col gap-2 pl-2', className)} {...props} />\n))\nTimelineContent.displayName = 'TimelineContent'\n\nexport type TimelineEmptyProps = React.ComponentProps<'div'>\n\nconst TimelineEmpty = React.forwardRef<HTMLDivElement, TimelineEmptyProps>(({ className, children, ...props }, ref) => (\n <div\n ref={ref}\n data-slot=\"timeline-empty\"\n className={cn('flex flex-col items-center justify-center p-8 text-center', className)}\n {...props}\n >\n <p className=\"text-sm text-muted-foreground\">{children || 'No timeline items to display'}</p>\n </div>\n))\nTimelineEmpty.displayName = 'TimelineEmpty'\n\nfunction getValidDate(date?: string | Date | number) {\n if (date == null || date === '') {\n return null\n }\n\n const parsedDate = date instanceof Date ? date : new Date(date)\n\n return Number.isNaN(parsedDate.getTime()) ? null : parsedDate\n}\n\nfunction isTimelineItemElement(child: React.ReactNode): child is React.ReactElement<TimelineItemProps> {\n return React.isValidElement(child) && child.type === TimelineItem\n}\n\nexport {\n Timeline,\n TimelineConnector,\n TimelineContent,\n TimelineDescription,\n TimelineEmpty,\n TimelineHeader,\n TimelineIcon,\n TimelineItem,\n TimelineTime,\n TimelineTitle,\n timelineVariants\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"timeline.js","names":[],"sources":["../../src/components/timeline.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { IconAlertCircle } from '@tabler/icons-react'\nimport { cva, type VariantProps } from 'class-variance-authority'\n\nimport { cn } from '../lib/utils'\nimport { Spinner } from './spinner'\n\nconst timelineVariants = cva('relative mx-auto m-0 flex w-full max-w-2xl min-h-150 list-none flex-col p-0 py-8', {\n variants: {\n size: {\n sm: 'gap-4',\n md: 'gap-6',\n lg: 'gap-8'\n }\n },\n defaultVariants: {\n size: 'md'\n }\n})\n\nconst timelineItemVariants = cva('relative w-full last:mb-0', {\n variants: {\n tone: {\n default: 'mb-2',\n error: 'mb-2'\n }\n },\n defaultVariants: {\n tone: 'default'\n }\n})\n\nconst timelineConnectorVariants = cva('w-0.5', {\n variants: {\n status: {\n completed: 'bg-primary',\n 'in-progress': 'bg-accent',\n pending: 'bg-muted'\n },\n color: {\n primary: 'bg-primary',\n secondary: 'bg-secondary',\n muted: 'bg-muted',\n accent: 'bg-accent',\n destructive: 'bg-destructive',\n gradient: 'bg-linear-to-b from-primary to-muted'\n }\n }\n})\n\nconst timelineIconVariants = cva(\n 'relative flex items-center justify-center rounded-full ring-8 ring-background shadow-sm',\n {\n variants: {\n color: {\n primary: 'bg-primary text-primary-foreground',\n secondary: 'bg-secondary text-secondary-foreground',\n muted: 'bg-muted text-muted-foreground',\n accent: 'bg-accent text-accent-foreground',\n destructive: 'bg-destructive text-destructive-foreground'\n },\n size: {\n sm: 'h-8 w-8',\n md: 'h-10 w-10',\n lg: 'h-12 w-12'\n }\n },\n defaultVariants: {\n color: 'primary',\n size: 'md'\n }\n }\n)\n\nconst timelineIconContentVariants = cva('flex items-center justify-center', {\n variants: {\n size: {\n sm: 'h-4 w-4',\n md: 'h-5 w-5',\n lg: 'h-6 w-6'\n }\n },\n defaultVariants: {\n size: 'md'\n }\n})\n\nexport type TimelineIconSize = NonNullable<VariantProps<typeof timelineIconVariants>['size']>\nexport type TimelineConnectorColor = NonNullable<VariantProps<typeof timelineConnectorVariants>['color']>\nexport type TimelineIconColor = NonNullable<VariantProps<typeof timelineIconVariants>['color']>\nexport type TimelineStatus = NonNullable<VariantProps<typeof timelineConnectorVariants>['status']>\n\nexport type TimelineProps = React.ComponentProps<'ol'> &\n VariantProps<typeof timelineVariants> & {\n iconSize?: TimelineIconSize\n }\n\nconst Timeline = React.forwardRef<HTMLOListElement, TimelineProps>(\n ({ className, iconSize, size = 'md', children, ...props }, ref) => {\n const childArray = React.Children.toArray(children)\n const totalItems = childArray.filter(isTimelineItemElement).length\n\n if (totalItems === 0) {\n return (\n <ol\n ref={ref}\n aria-label=\"Timeline\"\n data-slot=\"timeline\"\n data-size={size}\n className={cn(timelineVariants({ size }), className)}\n {...props}\n >\n <li className=\"list-none\">\n <TimelineEmpty />\n </li>\n </ol>\n )\n }\n\n let itemIndex = 0\n\n return (\n <ol\n ref={ref}\n aria-label=\"Timeline\"\n data-slot=\"timeline\"\n data-size={size}\n className={cn(timelineVariants({ size }), className)}\n {...props}\n >\n {React.Children.map(children, (child) => {\n if (!isTimelineItemElement(child)) {\n return child\n }\n\n const isLastItem = itemIndex === totalItems - 1\n itemIndex += 1\n\n return React.cloneElement(child, {\n iconSize: child.props.iconSize ?? iconSize,\n showConnector: child.props.showConnector ?? !isLastItem\n })\n })}\n </ol>\n )\n }\n)\nTimeline.displayName = 'Timeline'\n\nexport type TimelineItemProps = React.ComponentProps<'li'> & {\n date?: React.ReactNode\n title?: React.ReactNode\n description?: React.ReactNode\n icon?: React.ReactNode\n iconColor?: TimelineIconColor\n status?: TimelineStatus\n connectorColor?: TimelineConnectorColor\n showConnector?: boolean\n iconSize?: TimelineIconSize\n loading?: boolean\n error?: React.ReactNode\n}\n\nconst TimelineItem = React.forwardRef<HTMLLIElement, TimelineItemProps>(\n (\n {\n className,\n children,\n date,\n title,\n description,\n icon,\n iconColor,\n status = 'completed',\n connectorColor,\n showConnector = true,\n iconSize,\n loading = false,\n error,\n ...props\n },\n ref\n ) => {\n if (loading) {\n return (\n <li\n ref={ref}\n aria-busy=\"true\"\n data-slot=\"timeline-item\"\n data-status={status}\n className={cn(timelineItemVariants(), className)}\n {...props}\n >\n <div className=\"grid grid-cols-[minmax(auto,8rem)_auto_1fr] items-start px-4\">\n <div className=\"pr-4 text-right\">\n <div className=\"h-4 w-24 animate-pulse rounded bg-muted\" />\n </div>\n\n <div className=\"mx-3 flex flex-col items-center justify-start gap-y-2\">\n <div className=\"relative flex h-8 w-8 animate-pulse items-center justify-center rounded-full bg-muted ring-8 ring-background\">\n <Spinner />\n </div>\n {showConnector && <div className=\"h-full w-0.5 animate-pulse bg-muted\" />}\n </div>\n\n <div className=\"flex flex-col gap-2 pl-2\">\n <div className=\"space-y-2\">\n <div className=\"h-4 w-24 animate-pulse rounded bg-muted\" />\n <div className=\"h-3 w-48 animate-pulse rounded bg-muted\" />\n </div>\n </div>\n </div>\n </li>\n )\n }\n\n if (error) {\n return (\n <li\n ref={ref}\n role=\"alert\"\n data-slot=\"timeline-item\"\n data-status=\"error\"\n className={cn(timelineItemVariants({ tone: 'error' }), className)}\n {...props}\n >\n <div className=\"grid grid-cols-[minmax(auto,8rem)_auto_1fr] items-start px-4\">\n <div className=\"pr-4 text-right\">\n <TimelineTime className=\"text-destructive\">{date}</TimelineTime>\n </div>\n\n <div className=\"mx-3 flex flex-col items-center justify-start gap-y-2\">\n <div className=\"relative flex h-8 w-8 items-center justify-center rounded-full bg-destructive/20 ring-8 ring-background\">\n <IconAlertCircle className=\"h-4 w-4 text-destructive\" />\n </div>\n {showConnector && <TimelineConnector color=\"destructive\" className=\"h-full\" />}\n </div>\n\n <div className=\"flex flex-col gap-2 pl-2\">\n <TimelineHeader>\n <TimelineTitle className=\"text-destructive\">{title || 'Error'}</TimelineTitle>\n </TimelineHeader>\n <TimelineDescription className=\"text-destructive\">{error}</TimelineDescription>\n </div>\n </div>\n </li>\n )\n }\n\n if (children != null) {\n return (\n <li\n ref={ref}\n data-slot=\"timeline-item\"\n data-status={status}\n className={cn(timelineItemVariants(), className)}\n aria-current={status === 'in-progress' ? 'step' : undefined}\n {...props}\n >\n {children}\n </li>\n )\n }\n\n return (\n <li\n ref={ref}\n data-slot=\"timeline-item\"\n data-status={status}\n className={cn(timelineItemVariants(), className)}\n aria-current={status === 'in-progress' ? 'step' : undefined}\n {...props}\n >\n <div className=\"grid grid-cols-[1fr_auto_1fr] items-start gap-4\">\n <div className=\"flex flex-col justify-start pt-1\">\n <TimelineTime className=\"pr-4 text-right\">{date}</TimelineTime>\n </div>\n\n <div className=\"flex flex-col items-center\">\n <div className=\"relative z-10\">\n <TimelineIcon\n icon={icon}\n color={iconColor ?? (status === 'pending' ? 'muted' : 'primary')}\n size={iconSize}\n />\n </div>\n {showConnector && <TimelineConnector status={status} color={connectorColor} className=\"mt-2 h-16\" />}\n </div>\n\n <TimelineContent>\n <TimelineHeader>\n <TimelineTitle>{title}</TimelineTitle>\n </TimelineHeader>\n <TimelineDescription>{description}</TimelineDescription>\n </TimelineContent>\n </div>\n </li>\n )\n }\n)\nTimelineItem.displayName = 'TimelineItem'\n\nexport type TimelineTimeProps = React.ComponentProps<'time'> & {\n date?: string | Date | number\n format?: Intl.DateTimeFormatOptions\n}\n\nconst defaultDateFormat: Intl.DateTimeFormatOptions = {\n year: 'numeric',\n month: 'short',\n day: '2-digit'\n}\n\nconst TimelineTime = React.forwardRef<HTMLTimeElement, TimelineTimeProps>(\n ({ className, date, format, children, ...props }, ref) => {\n const dateValue = React.useMemo(() => getValidDate(date), [date])\n\n const formattedDate = React.useMemo(() => {\n if (!dateValue) {\n return ''\n }\n\n return new Intl.DateTimeFormat('en-US', {\n ...defaultDateFormat,\n ...format\n }).format(dateValue)\n }, [dateValue, format])\n\n return (\n <time\n ref={ref}\n data-slot=\"timeline-time\"\n dateTime={dateValue?.toISOString()}\n className={cn('text-sm font-medium tracking-tight text-muted-foreground', className)}\n {...props}\n >\n {children || formattedDate}\n </time>\n )\n }\n)\nTimelineTime.displayName = 'TimelineTime'\n\nexport type TimelineConnectorProps = React.ComponentProps<'div'> & VariantProps<typeof timelineConnectorVariants>\n\nconst TimelineConnector = React.forwardRef<HTMLDivElement, TimelineConnectorProps>(\n ({ className, status = 'completed', color, ...props }, ref) => (\n <div\n ref={ref}\n data-slot=\"timeline-connector\"\n data-status={status}\n data-color={color}\n className={cn(color ? timelineConnectorVariants({ color }) : timelineConnectorVariants({ status }), className)}\n {...props}\n />\n )\n)\nTimelineConnector.displayName = 'TimelineConnector'\n\nexport type TimelineHeaderProps = React.ComponentProps<'div'>\n\nconst TimelineHeader = React.forwardRef<HTMLDivElement, TimelineHeaderProps>(({ className, ...props }, ref) => (\n <div ref={ref} data-slot=\"timeline-header\" className={cn('flex items-center gap-4', className)} {...props} />\n))\nTimelineHeader.displayName = 'TimelineHeader'\n\nexport type TimelineTitleProps = React.ComponentProps<'h3'>\n\nconst TimelineTitle = React.forwardRef<HTMLHeadingElement, TimelineTitleProps>(({ className, ...props }, ref) => (\n <h3\n ref={ref}\n data-slot=\"timeline-title\"\n className={cn('font-semibold leading-none tracking-tight text-secondary-foreground', className)}\n {...props}\n />\n))\nTimelineTitle.displayName = 'TimelineTitle'\n\nexport type TimelineIconProps = React.ComponentProps<'div'> &\n VariantProps<typeof timelineIconVariants> & {\n icon?: React.ReactNode\n }\n\nconst TimelineIcon = React.forwardRef<HTMLDivElement, TimelineIconProps>(\n ({ className, color = 'primary', icon, size = 'md', ...props }, ref) => (\n <div\n ref={ref}\n data-slot=\"timeline-icon\"\n data-color={color}\n data-size={size}\n className={cn(timelineIconVariants({ color, size }), className)}\n {...props}\n >\n {icon ? (\n <div className={timelineIconContentVariants({ size })}>{icon}</div>\n ) : (\n <div className={cn('rounded-full', timelineIconContentVariants({ size }))} />\n )}\n </div>\n )\n)\nTimelineIcon.displayName = 'TimelineIcon'\n\nexport type TimelineDescriptionProps = React.ComponentProps<'p'>\n\nconst TimelineDescription = React.forwardRef<HTMLParagraphElement, TimelineDescriptionProps>(\n ({ className, ...props }, ref) => (\n <p\n ref={ref}\n data-slot=\"timeline-description\"\n className={cn('max-w-sm text-sm text-muted-foreground', className)}\n {...props}\n />\n )\n)\nTimelineDescription.displayName = 'TimelineDescription'\n\nexport type TimelineContentProps = React.ComponentProps<'div'>\n\nconst TimelineContent = React.forwardRef<HTMLDivElement, TimelineContentProps>(({ className, ...props }, ref) => (\n <div ref={ref} data-slot=\"timeline-content\" className={cn('flex flex-col gap-2 pl-2', className)} {...props} />\n))\nTimelineContent.displayName = 'TimelineContent'\n\nexport type TimelineEmptyProps = React.ComponentProps<'div'>\n\nconst TimelineEmpty = React.forwardRef<HTMLDivElement, TimelineEmptyProps>(({ className, children, ...props }, ref) => (\n <div\n ref={ref}\n data-slot=\"timeline-empty\"\n className={cn('flex flex-col items-center justify-center p-8 text-center', className)}\n {...props}\n >\n <p className=\"text-sm text-muted-foreground\">{children || 'No timeline items to display'}</p>\n </div>\n))\nTimelineEmpty.displayName = 'TimelineEmpty'\n\nfunction getValidDate(date?: string | Date | number) {\n if (date == null || date === '') {\n return null\n }\n\n const parsedDate = date instanceof Date ? date : new Date(date)\n\n return Number.isNaN(parsedDate.getTime()) ? null : parsedDate\n}\n\nfunction isTimelineItemElement(child: React.ReactNode): child is React.ReactElement<TimelineItemProps> {\n return React.isValidElement(child) && child.type === TimelineItem\n}\n\nexport {\n Timeline,\n TimelineConnector,\n TimelineContent,\n TimelineDescription,\n TimelineEmpty,\n TimelineHeader,\n TimelineIcon,\n TimelineItem,\n TimelineTime,\n TimelineTitle,\n timelineVariants\n}\n"],"mappings":"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"}
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { n as __name } from "../chunk-CHh1Zzun.js";
|
|
2
2
|
import { toggleVariants } from "./toggle.js";
|
|
3
3
|
import { ToggleGroup as ToggleGroup$1 } from "radix-ui";
|
|
4
|
-
import * as _$react_jsx_runtime0 from "react/jsx-runtime";
|
|
5
4
|
import { VariantProps } from "class-variance-authority";
|
|
6
5
|
import * as React from "react";
|
|
7
6
|
|
|
@@ -20,7 +19,7 @@ declare function ToggleGroup({
|
|
|
20
19
|
orientation,
|
|
21
20
|
children,
|
|
22
21
|
...props
|
|
23
|
-
}: ToggleGroupProps):
|
|
22
|
+
}: ToggleGroupProps): import("react/jsx-runtime").JSX.Element;
|
|
24
23
|
declare function ToggleGroupItem({
|
|
25
24
|
className,
|
|
26
25
|
children,
|
|
@@ -28,7 +27,7 @@ declare function ToggleGroupItem({
|
|
|
28
27
|
color,
|
|
29
28
|
size,
|
|
30
29
|
...props
|
|
31
|
-
}: ToggleGroupItemProps):
|
|
30
|
+
}: ToggleGroupItemProps): import("react/jsx-runtime").JSX.Element;
|
|
32
31
|
//#endregion
|
|
33
32
|
export { ToggleGroup, ToggleGroupItem, ToggleGroupItemProps, ToggleGroupProps };
|
|
34
33
|
//# sourceMappingURL=toggle-group.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"toggle-group.js","names":["ToggleGroupPrimitive"],"sources":["../../src/components/toggle-group.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport type { VariantProps } from 'class-variance-authority'\nimport { ToggleGroup as ToggleGroupPrimitive } from 'radix-ui'\n\nimport { cn } from '../lib/utils'\nimport { toggleVariants } from './toggle'\n\nconst ToggleGroupContext = React.createContext<\n VariantProps<typeof toggleVariants> & {\n spacing?: number\n orientation?: 'horizontal' | 'vertical'\n }\n>({\n size: 'md',\n variant: 'ghost',\n color: 'primary',\n spacing: 0,\n orientation: 'horizontal'\n})\n\nexport type ToggleGroupProps = React.ComponentProps<typeof ToggleGroupPrimitive.Root> &\n VariantProps<typeof toggleVariants> & {\n spacing?: number\n orientation?: 'horizontal' | 'vertical'\n }\n\nexport type ToggleGroupItemProps = React.ComponentProps<typeof ToggleGroupPrimitive.Item> &\n VariantProps<typeof toggleVariants>\n\nfunction ToggleGroup({\n className,\n variant,\n color,\n size,\n spacing = 0,\n orientation = 'horizontal',\n children,\n ...props\n}: ToggleGroupProps) {\n return (\n <ToggleGroupPrimitive.Root\n data-slot=\"toggle-group\"\n data-variant={variant ?? 'ghost'}\n data-color={color ?? 'primary'}\n data-size={size ?? 'md'}\n data-spacing={spacing}\n data-orientation={orientation}\n style={{ '--gap': spacing } as React.CSSProperties}\n className={cn(\n 'group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] rounded-lg data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-vertical:flex-col data-vertical:items-stretch',\n className\n )}\n {...props}\n >\n <ToggleGroupContext.Provider value={{ variant, color, size, spacing, orientation }}>\n {children}\n </ToggleGroupContext.Provider>\n </ToggleGroupPrimitive.Root>\n )\n}\n\nfunction ToggleGroupItem({\n className,\n children,\n variant = 'ghost',\n color = 'primary',\n size = 'md',\n ...props\n}: ToggleGroupItemProps) {\n const context = React.useContext(ToggleGroupContext)\n\n return (\n <ToggleGroupPrimitive.Item\n data-slot=\"toggle-group-item\"\n data-variant={context.variant || variant}\n data-color={context.color || color}\n data-size={context.size || size}\n data-spacing={context.spacing}\n className={cn(\n 'shrink-0 group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 focus:z-10 focus-visible:z-10 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-lg group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-lg group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-lg group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-lg group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t',\n toggleVariants({\n variant: context.variant || variant,\n color: context.color || color,\n size: context.size || size\n }),\n className\n )}\n {...props}\n >\n {children}\n </ToggleGroupPrimitive.Item>\n )\n}\n\nexport { ToggleGroup, ToggleGroupItem }\n"],"mappings":"sNAQA,MAAM,EAAqB,EAAM,cAK/B,CACA,KAAM,KACN,QAAS,QACT,MAAO,UACP,QAAS,EACT,YAAa,
|
|
1
|
+
{"version":3,"file":"toggle-group.js","names":["ToggleGroupPrimitive"],"sources":["../../src/components/toggle-group.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport type { VariantProps } from 'class-variance-authority'\nimport { ToggleGroup as ToggleGroupPrimitive } from 'radix-ui'\n\nimport { cn } from '../lib/utils'\nimport { toggleVariants } from './toggle'\n\nconst ToggleGroupContext = React.createContext<\n VariantProps<typeof toggleVariants> & {\n spacing?: number\n orientation?: 'horizontal' | 'vertical'\n }\n>({\n size: 'md',\n variant: 'ghost',\n color: 'primary',\n spacing: 0,\n orientation: 'horizontal'\n})\n\nexport type ToggleGroupProps = React.ComponentProps<typeof ToggleGroupPrimitive.Root> &\n VariantProps<typeof toggleVariants> & {\n spacing?: number\n orientation?: 'horizontal' | 'vertical'\n }\n\nexport type ToggleGroupItemProps = React.ComponentProps<typeof ToggleGroupPrimitive.Item> &\n VariantProps<typeof toggleVariants>\n\nfunction ToggleGroup({\n className,\n variant,\n color,\n size,\n spacing = 0,\n orientation = 'horizontal',\n children,\n ...props\n}: ToggleGroupProps) {\n return (\n <ToggleGroupPrimitive.Root\n data-slot=\"toggle-group\"\n data-variant={variant ?? 'ghost'}\n data-color={color ?? 'primary'}\n data-size={size ?? 'md'}\n data-spacing={spacing}\n data-orientation={orientation}\n style={{ '--gap': spacing } as React.CSSProperties}\n className={cn(\n 'group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] rounded-lg data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-vertical:flex-col data-vertical:items-stretch',\n className\n )}\n {...props}\n >\n <ToggleGroupContext.Provider value={{ variant, color, size, spacing, orientation }}>\n {children}\n </ToggleGroupContext.Provider>\n </ToggleGroupPrimitive.Root>\n )\n}\n\nfunction ToggleGroupItem({\n className,\n children,\n variant = 'ghost',\n color = 'primary',\n size = 'md',\n ...props\n}: ToggleGroupItemProps) {\n const context = React.useContext(ToggleGroupContext)\n\n return (\n <ToggleGroupPrimitive.Item\n data-slot=\"toggle-group-item\"\n data-variant={context.variant || variant}\n data-color={context.color || color}\n data-size={context.size || size}\n data-spacing={context.spacing}\n className={cn(\n 'shrink-0 group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 focus:z-10 focus-visible:z-10 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-lg group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-lg group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-lg group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-lg group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t',\n toggleVariants({\n variant: context.variant || variant,\n color: context.color || color,\n size: context.size || size\n }),\n className\n )}\n {...props}\n >\n {children}\n </ToggleGroupPrimitive.Item>\n )\n}\n\nexport { ToggleGroup, ToggleGroupItem }\n"],"mappings":"sNAQA,MAAM,EAAqB,EAAM,cAK/B,CACA,KAAM,KACN,QAAS,QACT,MAAO,UACP,QAAS,EACT,YAAa,YACf,CAAC,EAWD,SAAS,YAAY,CACnB,YACA,UACA,QACA,OACA,UAAU,EACV,cAAc,aACd,WACA,GAAG,GACgB,CACnB,OACE,EAACA,EAAqB,KAAtB,CACE,YAAU,eACV,eAAc,GAAW,QACzB,aAAY,GAAS,UACrB,YAAW,GAAQ,KACnB,eAAc,EACd,mBAAkB,EAClB,MAAO,CAAE,QAAS,CAAQ,EAC1B,UAAW,EACT,oMACA,CACF,EACA,GAAI,WAEJ,EAAC,EAAmB,SAApB,CAA6B,MAAO,CAAE,UAAS,QAAO,OAAM,UAAS,aAAY,EAC9E,UAC0B,CAAA,CACJ,CAAA,CAE/B,CAEA,SAAS,gBAAgB,CACvB,YACA,WACA,UAAU,QACV,QAAQ,UACR,OAAO,KACP,GAAG,GACoB,CACvB,IAAM,EAAU,EAAM,WAAW,CAAkB,EAEnD,OACE,EAACA,EAAqB,KAAtB,CACE,YAAU,oBACV,eAAc,EAAQ,SAAW,EACjC,aAAY,EAAQ,OAAS,EAC7B,YAAW,EAAQ,MAAQ,EAC3B,eAAc,EAAQ,QACtB,UAAW,EACT,qvBACA,EAAe,CACb,QAAS,EAAQ,SAAW,EAC5B,MAAO,EAAQ,OAAS,EACxB,KAAM,EAAQ,MAAQ,CACxB,CAAC,EACD,CACF,EACA,GAAI,EAEH,UACwB,CAAA,CAE/B"}
|