@uselets/ui 1.7.0 → 1.7.2
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 +11 -1
- package/dist/components/accordion.js +1 -1
- package/dist/components/accordion.js.map +1 -1
- package/dist/components/badge.js +1 -1
- package/dist/components/badge.js.map +1 -1
- package/dist/components/drawer.d.ts +15 -9
- package/dist/components/drawer.js +1 -1
- package/dist/components/drawer.js.map +1 -1
- package/dist/components/skeleton.js +1 -1
- package/dist/components/skeleton.js.map +1 -1
- package/dist/skills/uselets-ui/references/component-catalog.md +1 -1
- package/dist/skills/uselets-ui/references/package-guide.md +4 -0
- package/dist/styles/base.css +1 -0
- package/dist/styles/theme.css +4 -0
- package/package.json +3 -3
- package/skills/uselets-ui/references/component-catalog.md +1 -1
- package/skills/uselets-ui/references/package-guide.md +4 -0
package/README.md
CHANGED
|
@@ -309,6 +309,16 @@ The palette includes one named gradient token:
|
|
|
309
309
|
|
|
310
310
|
This gradient is a documentation and styling primitive. It is not exposed as a Tailwind color family.
|
|
311
311
|
|
|
312
|
+
### Global scrollbar style
|
|
313
|
+
|
|
314
|
+
Importing either theme entrypoint applies a default page scrollbar style via the bundled
|
|
315
|
+
[`tailwind-scrollbar`](https://github.com/adoxography/tailwind-scrollbar) plugin: thin width,
|
|
316
|
+
transparent track, `muted` thumb with a `muted-foreground` hover state. The plugin's utilities
|
|
317
|
+
(`scrollbar-thin`, `scrollbar-thumb-*`, `scrollbar-track-*`, `scrollbar-hover:*`) are available
|
|
318
|
+
to override these defaults or to style internal scrollable regions. Firefox uses the standard
|
|
319
|
+
`scrollbar-color` property and does not honor the pseudo-element hover variant — the thumb
|
|
320
|
+
stays at the base color there.
|
|
321
|
+
|
|
312
322
|
## Components
|
|
313
323
|
|
|
314
324
|
You can import from the package root (`@uselets/ui`) or by subpath (`@uselets/ui/<component>`).
|
|
@@ -328,7 +338,7 @@ You can import from the package root (`@uselets/ui`) or by subpath (`@uselets/ui
|
|
|
328
338
|
| `code` | `Code` | Inline code primitive rendered as `<code>`. |
|
|
329
339
|
| `combobox` | `Combobox`, `ComboboxInput`, `ComboboxContent`, `ComboboxList`, `ComboboxItem`, `ComboboxGroup`, `ComboboxLabel`, `ComboboxCollection`, `ComboboxClear`, `ComboboxEmpty`, `ComboboxSeparator`, `ComboboxChips`, `ComboboxChip`, `ComboboxChipsInput`, `ComboboxTrigger`, `ComboboxValue`, `useComboboxAnchor` | `ComboboxInput` supports `icon?: React.ReactNode`, `triggerIcon?: React.ReactNode`, `showTrigger?: boolean`, and `showClear?: boolean`; `ComboboxContent` supports `container` for rendering inside overlays such as dialogs. |
|
|
330
340
|
| `dialog` | `Dialog`, `DialogTrigger`, `DialogPortal`, `DialogClose`, `DialogOverlay`, `DialogContent`, `DialogHeader`, `DialogBody`, `DialogFooter`, `DialogTitle`, `DialogDescription` | `Dialog` supports `size: 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl' \| '3xl' \| 'full'` (default: `md`); `full` occupies the entire viewport. `DialogContent` caps its height at `calc(100dvh - 2rem)` and arranges children as a flex column; wrap long content in `DialogBody` (`flex-1 overflow-y-auto`) so the body scrolls while `DialogHeader` and `DialogFooter` stay pinned. `DialogContent.showCloseButton` (default: `true`); `DialogFooter.showCloseButton` (default: `false`). `Dialog.dismissible` (default: `true`); when `false`, clicking outside and pressing Esc no longer close the dialog (the close button and `DialogClose` still work). |
|
|
331
|
-
| `drawer` | `Drawer`, `DrawerTrigger`, `DrawerPortal`, `DrawerClose`, `DrawerOverlay`, `DrawerContent`, `DrawerHeader`, `DrawerBody`, `DrawerFooter`, `DrawerTitle`, `DrawerDescription` | `Drawer` supports `size: 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl' \| '3xl' \| 'full'` (default: `md`); `DrawerBody` provides padded auto-scroll content; `DrawerFooter` stacks actions on mobile and aligns them to the end on larger breakpoints; `DrawerContent.showCloseButton` (default: `true`). `Drawer.dismissible` (default: `true
|
|
341
|
+
| `drawer` | `Drawer`, `DrawerTrigger`, `DrawerPortal`, `DrawerClose`, `DrawerOverlay`, `DrawerContent`, `DrawerHeader`, `DrawerBody`, `DrawerFooter`, `DrawerTitle`, `DrawerDescription` | `Drawer` supports `size: 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl' \| '3xl' \| 'full'` (default: `md`); `DrawerBody` provides padded auto-scroll content; `DrawerFooter` stacks actions on mobile and aligns them to the end on larger breakpoints; `DrawerContent.showCloseButton` (default: `true`). `Drawer.dismissible` (default: `true`); when `false`, clicking outside and pressing Esc no longer close the drawer (the close button and `DrawerClose` still work). `Drawer.direction: 'top' \| 'right' \| 'bottom' \| 'left'` (default: `right`) controls which edge the drawer slides in from. |
|
|
332
342
|
| `dropzone` | `Dropzone`, `DropzoneArea`, `DropzoneDescription`, `DropzoneFileList`, `DropzoneFileListItem`, `DropzoneFileMessage`, `DropzoneMessage`, `DropzoneRemoveFile`, `DropzoneRetryFile`, `DropzoneTrigger`, `InfiniteProgress`, `useDropzone` | `useDropzone` manages upload lifecycle, validation (`accept`, `minSize`, `maxSize`, `maxFiles`), retry handling, and optional `shiftOnMaxFiles` replacement. Compose the returned state with `Dropzone` and its subcomponents. |
|
|
333
343
|
| `dropdown-menu` | `DropdownMenu`, `DropdownMenuTrigger`, `DropdownMenuContent`, `DropdownMenuItem`, `DropdownMenuCheckboxItem`, `DropdownMenuRadioGroup`, `DropdownMenuRadioItem`, `DropdownMenuSub`, `DropdownMenuSubTrigger`, `DropdownMenuSubContent`, `DropdownMenuSeparator`, `DropdownMenuShortcut` | `DropdownMenuContent` supports `side`, `sideOffset`, `align`, `alignOffset`; items support `inset`, and `DropdownMenuItem` supports `variant: 'default' \| 'destructive'`. |
|
|
334
344
|
| `empty` | `Empty`, `EmptyHeader`, `EmptyMedia`, `EmptyTitle`, `EmptyDescription`, `EmptyContent` | `EmptyMedia` supports `variant: 'default' \| 'icon'` (default: `default`). |
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import"../chunk-CHh1Zzun.js";import{cn as e}from"../lib/utils.js";import{IconChevronDown as t,IconChevronUp as n}from"@tabler/icons-react";import{Accordion as r}from"radix-ui";import{jsx as i,jsxs as a}from"react/jsx-runtime";function Accordion({className:t,...n}){return i(r.Root,{"data-slot":`accordion`,className:e(`flex w-full flex-col border rounded-sm`,t),...n})}function AccordionItem({className:t,...n}){return i(r.Item,{"data-slot":`accordion-item`,className:e(`not-last:border-b px-4`,t),...n})}function AccordionTrigger({className:o,children:s,...c}){return i(r.Header,{className:`flex`,children:a(r.Trigger,{"data-slot":`accordion-trigger`,className:e(`group/accordion-trigger relative flex flex-1 items-start justify-between rounded-lg border border-transparent py-2.5 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:after:border-ring disabled:pointer-events-none disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground`,o),...c,children:[s,i(t,{"data-slot":`accordion-trigger-icon`,className:`pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden`}),i(n,{"data-slot":`accordion-trigger-icon`,className:`pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline`})]})})}function AccordionContent({className:t,children:n,...a}){return i(r.Content,{"data-slot":`accordion-content`,className:`wrap-break-word data-closed:overflow-hidden text-sm data-open:animate-accordion-down data-closed:animate-accordion-up`,...a,children:i(`div`,{className:e(`h-(--radix-accordion-content-height) pt-0 pb-2.5
|
|
1
|
+
import"../chunk-CHh1Zzun.js";import{cn as e}from"../lib/utils.js";import{IconChevronDown as t,IconChevronUp as n}from"@tabler/icons-react";import{Accordion as r}from"radix-ui";import{jsx as i,jsxs as a}from"react/jsx-runtime";function Accordion({className:t,...n}){return i(r.Root,{"data-slot":`accordion`,className:e(`flex w-full flex-col border rounded-sm`,t),...n})}function AccordionItem({className:t,...n}){return i(r.Item,{"data-slot":`accordion-item`,className:e(`not-last:border-b px-4`,t),...n})}function AccordionTrigger({className:o,children:s,...c}){return i(r.Header,{className:`flex`,children:a(r.Trigger,{"data-slot":`accordion-trigger`,className:e(`group/accordion-trigger relative flex flex-1 items-start justify-between rounded-lg border border-transparent py-2.5 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:after:border-ring disabled:pointer-events-none disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground`,o),...c,children:[s,i(t,{"data-slot":`accordion-trigger-icon`,className:`pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden`}),i(n,{"data-slot":`accordion-trigger-icon`,className:`pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline`})]})})}function AccordionContent({className:t,children:n,...a}){return i(r.Content,{"data-slot":`accordion-content`,className:`wrap-break-word data-closed:overflow-hidden text-sm data-open:animate-accordion-down data-closed:animate-accordion-up`,...a,children:i(`div`,{className:e(`h-(--radix-accordion-content-height) pt-0 pb-2.5`,t),children:n})})}export{Accordion,AccordionContent,AccordionItem,AccordionTrigger};
|
|
2
2
|
//# sourceMappingURL=accordion.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"accordion.js","names":["AccordionPrimitive"],"sources":["../../src/components/accordion.tsx"],"sourcesContent":["import type * as React from 'react'\n\nimport { IconChevronDown, IconChevronUp } from '@tabler/icons-react'\nimport { Accordion as AccordionPrimitive } from 'radix-ui'\n\nimport { cn } from '../lib/utils'\n\nexport type AccordionProps = React.ComponentProps<typeof AccordionPrimitive.Root>\n\nexport type AccordionItemProps = React.ComponentProps<typeof AccordionPrimitive.Item>\n\nexport type AccordionTriggerProps = React.ComponentProps<typeof AccordionPrimitive.Trigger>\n\nexport type AccordionContentProps = React.ComponentProps<typeof AccordionPrimitive.Content>\n\nfunction Accordion({ className, ...props }: AccordionProps) {\n return (\n <AccordionPrimitive.Root\n data-slot=\"accordion\"\n className={cn('flex w-full flex-col border rounded-sm', className)}\n {...props}\n />\n )\n}\n\nfunction AccordionItem({ className, ...props }: AccordionItemProps) {\n return (\n <AccordionPrimitive.Item\n data-slot=\"accordion-item\"\n className={cn('not-last:border-b px-4', className)}\n {...props}\n />\n )\n}\n\nfunction AccordionTrigger({ className, children, ...props }: AccordionTriggerProps) {\n return (\n <AccordionPrimitive.Header className=\"flex\">\n <AccordionPrimitive.Trigger\n data-slot=\"accordion-trigger\"\n className={cn(\n 'group/accordion-trigger relative flex flex-1 items-start justify-between rounded-lg border border-transparent py-2.5 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:after:border-ring disabled:pointer-events-none disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground',\n className\n )}\n {...props}\n >\n {children}\n <IconChevronDown\n data-slot=\"accordion-trigger-icon\"\n className=\"pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden\"\n />\n <IconChevronUp\n data-slot=\"accordion-trigger-icon\"\n className=\"pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline\"\n />\n </AccordionPrimitive.Trigger>\n </AccordionPrimitive.Header>\n )\n}\n\nfunction AccordionContent({ className, children, ...props }: AccordionContentProps) {\n return (\n <AccordionPrimitive.Content\n data-slot=\"accordion-content\"\n className=\"wrap-break-word data-closed:overflow-hidden text-sm data-open:animate-accordion-down data-closed:animate-accordion-up\"\n {...props}\n >\n <div className={cn('h-(--radix-accordion-content-height) pt-0 pb-2.5
|
|
1
|
+
{"version":3,"file":"accordion.js","names":["AccordionPrimitive"],"sources":["../../src/components/accordion.tsx"],"sourcesContent":["import type * as React from 'react'\n\nimport { IconChevronDown, IconChevronUp } from '@tabler/icons-react'\nimport { Accordion as AccordionPrimitive } from 'radix-ui'\n\nimport { cn } from '../lib/utils'\n\nexport type AccordionProps = React.ComponentProps<typeof AccordionPrimitive.Root>\n\nexport type AccordionItemProps = React.ComponentProps<typeof AccordionPrimitive.Item>\n\nexport type AccordionTriggerProps = React.ComponentProps<typeof AccordionPrimitive.Trigger>\n\nexport type AccordionContentProps = React.ComponentProps<typeof AccordionPrimitive.Content>\n\nfunction Accordion({ className, ...props }: AccordionProps) {\n return (\n <AccordionPrimitive.Root\n data-slot=\"accordion\"\n className={cn('flex w-full flex-col border rounded-sm', className)}\n {...props}\n />\n )\n}\n\nfunction AccordionItem({ className, ...props }: AccordionItemProps) {\n return (\n <AccordionPrimitive.Item\n data-slot=\"accordion-item\"\n className={cn('not-last:border-b px-4', className)}\n {...props}\n />\n )\n}\n\nfunction AccordionTrigger({ className, children, ...props }: AccordionTriggerProps) {\n return (\n <AccordionPrimitive.Header className=\"flex\">\n <AccordionPrimitive.Trigger\n data-slot=\"accordion-trigger\"\n className={cn(\n 'group/accordion-trigger relative flex flex-1 items-start justify-between rounded-lg border border-transparent py-2.5 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:after:border-ring disabled:pointer-events-none disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground',\n className\n )}\n {...props}\n >\n {children}\n <IconChevronDown\n data-slot=\"accordion-trigger-icon\"\n className=\"pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden\"\n />\n <IconChevronUp\n data-slot=\"accordion-trigger-icon\"\n className=\"pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline\"\n />\n </AccordionPrimitive.Trigger>\n </AccordionPrimitive.Header>\n )\n}\n\nfunction AccordionContent({ className, children, ...props }: AccordionContentProps) {\n return (\n <AccordionPrimitive.Content\n data-slot=\"accordion-content\"\n className=\"wrap-break-word data-closed:overflow-hidden text-sm data-open:animate-accordion-down data-closed:animate-accordion-up\"\n {...props}\n >\n <div className={cn('h-(--radix-accordion-content-height) pt-0 pb-2.5', className)}>{children}</div>\n </AccordionPrimitive.Content>\n )\n}\n\nexport { Accordion, AccordionContent, AccordionItem, AccordionTrigger }\n"],"mappings":"kOAeA,SAAS,UAAU,CAAE,YAAW,GAAG,GAAyB,CAC1D,OACE,EAACA,EAAmB,KAApB,CACE,YAAU,YACV,UAAW,EAAG,yCAA0C,CAAS,EACjE,GAAI,CACL,CAAA,CAEL,CAEA,SAAS,cAAc,CAAE,YAAW,GAAG,GAA6B,CAClE,OACE,EAACA,EAAmB,KAApB,CACE,YAAU,iBACV,UAAW,EAAG,yBAA0B,CAAS,EACjD,GAAI,CACL,CAAA,CAEL,CAEA,SAAS,iBAAiB,CAAE,YAAW,WAAU,GAAG,GAAgC,CAClF,OACE,EAACA,EAAmB,OAApB,CAA2B,UAAU,gBACnC,EAACA,EAAmB,QAApB,CACE,YAAU,oBACV,UAAW,EACT,mfACA,CACF,EACA,GAAI,WANN,CAQG,EACD,EAAC,EAAD,CACE,YAAU,yBACV,UAAU,2EACX,CAAA,EACD,EAAC,EAAD,CACE,YAAU,yBACV,UAAU,kFACX,CAAA,CACyB,GACH,CAAA,CAE/B,CAEA,SAAS,iBAAiB,CAAE,YAAW,WAAU,GAAG,GAAgC,CAClF,OACE,EAACA,EAAmB,QAApB,CACE,YAAU,oBACV,UAAU,wHACV,GAAI,WAEJ,EAAC,MAAD,CAAK,UAAW,EAAG,mDAAoD,CAAS,EAAI,UAAc,CAAA,CACxE,CAAA,CAEhC"}
|
package/dist/components/badge.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import"../chunk-CHh1Zzun.js";import{cn as e}from"../lib/utils.js";import{badgeColorVariants as t}from"../lib/badge.js";import{Slot as n}from"radix-ui";import{jsx as r}from"react/jsx-runtime";import{cva as i}from"class-variance-authority";const a=i(`group/badge inline-flex w-fit
|
|
1
|
+
import"../chunk-CHh1Zzun.js";import{cn as e}from"../lib/utils.js";import{badgeColorVariants as t}from"../lib/badge.js";import{Slot as n}from"radix-ui";import{jsx as r}from"react/jsx-runtime";import{cva as i}from"class-variance-authority";const a=i(`group/badge inline-flex w-fit items-center justify-center overflow-hidden border border-transparent font-semibold whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none`,{variants:{size:{xs:`h-4 gap-0.5 px-1.5 text-[10px] rounded-[4px] [&>svg]:size-2.5! has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1`,sm:`h-4.5 gap-0.5 px-2 text-[11px] rounded-[5px] [&>svg]:size-2.5! has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5`,md:`h-5 gap-1 px-2 py-0.5 text-xs rounded-[6px] [&>svg]:size-3! has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5`,lg:`h-6 gap-1 px-2.5 text-xs rounded-[7px] [&>svg]:size-3.5! has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2`,xl:`h-7 gap-1.5 px-3 text-sm rounded-[8px] [&>svg]:size-4! has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5`},variant:{solid:`bg-(--badge-solid) text-(--badge-solid-foreground) [a]:hover:opacity-90`,outline:`border-(--badge-outline-border) text-(--badge-outline-foreground) [a]:hover:bg-(--badge-soft) [a]:hover:text-(--badge-soft-foreground)`,subtle:`bg-(--badge-soft) text-(--badge-soft-foreground) [a]:hover:bg-(--badge-soft-hover)`,ghost:`text-(--badge-ghost-foreground) [a]:hover:bg-(--badge-ghost-hover) [a]:hover:text-(--badge-ghost-foreground)`,link:`text-(--badge-link-foreground) underline-offset-4 [a]:hover:underline`},color:t},defaultVariants:{size:`md`,variant:`solid`,color:`primary`}});function Badge({className:t,size:i=`md`,variant:o=`solid`,color:s=`primary`,asChild:c=!1,...l}){return r(c?n.Root:`span`,{"data-slot":`badge`,"data-size":i,"data-variant":o,"data-color":s,className:e(a({size:i,variant:o,color:s}),t),...l})}export{Badge,a as badgeVariants};
|
|
2
2
|
//# sourceMappingURL=badge.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"badge.js","names":[],"sources":["../../src/components/badge.tsx"],"sourcesContent":["import type * as React from 'react'\n\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { Slot } from 'radix-ui'\n\nimport { badgeColorVariants } from '../lib/badge'\nimport { cn } from '../lib/utils'\n\nconst badgeVariants = cva(\n 'group/badge inline-flex w-fit
|
|
1
|
+
{"version":3,"file":"badge.js","names":[],"sources":["../../src/components/badge.tsx"],"sourcesContent":["import type * as React from 'react'\n\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { Slot } from 'radix-ui'\n\nimport { badgeColorVariants } from '../lib/badge'\nimport { cn } from '../lib/utils'\n\nconst badgeVariants = cva(\n 'group/badge inline-flex w-fit items-center justify-center overflow-hidden border border-transparent font-semibold whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none',\n {\n variants: {\n size: {\n xs: 'h-4 gap-0.5 px-1.5 text-[10px] rounded-[4px] [&>svg]:size-2.5! has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1',\n sm: 'h-4.5 gap-0.5 px-2 text-[11px] rounded-[5px] [&>svg]:size-2.5! has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5',\n md: 'h-5 gap-1 px-2 py-0.5 text-xs rounded-[6px] [&>svg]:size-3! has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5',\n lg: 'h-6 gap-1 px-2.5 text-xs rounded-[7px] [&>svg]:size-3.5! has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',\n xl: 'h-7 gap-1.5 px-3 text-sm rounded-[8px] [&>svg]:size-4! has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5'\n },\n variant: {\n solid: 'bg-(--badge-solid) text-(--badge-solid-foreground) [a]:hover:opacity-90',\n outline:\n 'border-(--badge-outline-border) text-(--badge-outline-foreground) [a]:hover:bg-(--badge-soft) [a]:hover:text-(--badge-soft-foreground)',\n subtle: 'bg-(--badge-soft) text-(--badge-soft-foreground) [a]:hover:bg-(--badge-soft-hover)',\n ghost:\n 'text-(--badge-ghost-foreground) [a]:hover:bg-(--badge-ghost-hover) [a]:hover:text-(--badge-ghost-foreground)',\n link: 'text-(--badge-link-foreground) underline-offset-4 [a]:hover:underline'\n },\n color: badgeColorVariants\n },\n defaultVariants: {\n size: 'md',\n variant: 'solid',\n color: 'primary'\n }\n }\n)\n\nexport type BadgeProps = React.ComponentProps<'span'> &\n VariantProps<typeof badgeVariants> & {\n asChild?: boolean\n }\n\nfunction Badge({\n className,\n size = 'md',\n variant = 'solid',\n color = 'primary',\n asChild = false,\n ...props\n}: BadgeProps) {\n const Comp = asChild ? Slot.Root : 'span'\n\n return (\n <Comp\n data-slot=\"badge\"\n data-size={size}\n data-variant={variant}\n data-color={color}\n className={cn(badgeVariants({ size, variant, color }), className)}\n {...props}\n />\n )\n}\n\nexport { Badge, badgeVariants }\n"],"mappings":"8OAQA,MAAM,EAAgB,EACpB,sWACA,CACE,SAAU,CACR,KAAM,CACJ,GAAI,mIACJ,GAAI,uIACJ,GAAI,oIACJ,GAAI,6HACJ,GAAI,8HACN,EACA,QAAS,CACP,MAAO,0EACP,QACE,yIACF,OAAQ,qFACR,MACE,+GACF,KAAM,uEACR,EACA,MAAO,CACT,EACA,gBAAiB,CACf,KAAM,KACN,QAAS,QACT,MAAO,SACT,CACF,CACF,EAOA,SAAS,MAAM,CACb,YACA,OAAO,KACP,UAAU,QACV,QAAQ,UACR,UAAU,GACV,GAAG,GACU,CAGb,OACE,EAHW,EAAU,EAAK,KAAO,OAGjC,CACE,YAAU,QACV,YAAW,EACX,eAAc,EACd,aAAY,EACZ,UAAW,EAAG,EAAc,CAAE,OAAM,UAAS,OAAM,CAAC,EAAG,CAAS,EAChE,GAAI,CACL,CAAA,CAEL"}
|
|
@@ -1,30 +1,36 @@
|
|
|
1
1
|
import { n as __name } from "../chunk-CHh1Zzun.js";
|
|
2
|
+
import { Dialog } from "radix-ui";
|
|
2
3
|
import { VariantProps } from "class-variance-authority";
|
|
3
4
|
import * as React from "react";
|
|
4
|
-
import { Drawer as Drawer$1 } from "vaul";
|
|
5
5
|
|
|
6
6
|
//#region src/components/drawer.d.ts
|
|
7
7
|
declare const drawerContentVariants: (props?: ({
|
|
8
|
+
direction?: "top" | "right" | "bottom" | "left" | null | undefined;
|
|
8
9
|
size?: "sm" | "md" | "lg" | "xl" | "full" | "2xl" | "3xl" | null | undefined;
|
|
9
10
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
11
|
+
type DrawerDirection = NonNullable<VariantProps<typeof drawerContentVariants>['direction']>;
|
|
10
12
|
type DrawerSize = NonNullable<VariantProps<typeof drawerContentVariants>['size']>;
|
|
11
|
-
type DrawerProps = React.ComponentProps<typeof
|
|
13
|
+
type DrawerProps = React.ComponentProps<typeof Dialog.Root> & {
|
|
12
14
|
size?: DrawerSize;
|
|
15
|
+
direction?: DrawerDirection;
|
|
16
|
+
dismissible?: boolean;
|
|
13
17
|
};
|
|
14
|
-
type DrawerTriggerProps = React.ComponentProps<typeof
|
|
15
|
-
type DrawerPortalProps = React.ComponentProps<typeof
|
|
16
|
-
type DrawerCloseProps = React.ComponentProps<typeof
|
|
17
|
-
type DrawerOverlayProps = React.ComponentProps<typeof
|
|
18
|
-
type DrawerContentProps = React.ComponentProps<typeof
|
|
18
|
+
type DrawerTriggerProps = React.ComponentProps<typeof Dialog.Trigger>;
|
|
19
|
+
type DrawerPortalProps = React.ComponentProps<typeof Dialog.Portal>;
|
|
20
|
+
type DrawerCloseProps = React.ComponentProps<typeof Dialog.Close>;
|
|
21
|
+
type DrawerOverlayProps = React.ComponentProps<typeof Dialog.Overlay>;
|
|
22
|
+
type DrawerContentProps = React.ComponentProps<typeof Dialog.Content> & {
|
|
19
23
|
showCloseButton?: boolean;
|
|
20
24
|
};
|
|
21
25
|
type DrawerHeaderProps = React.ComponentProps<'div'>;
|
|
22
26
|
type DrawerBodyProps = React.ComponentProps<'div'>;
|
|
23
27
|
type DrawerFooterProps = React.ComponentProps<'div'>;
|
|
24
|
-
type DrawerTitleProps = React.ComponentProps<typeof
|
|
25
|
-
type DrawerDescriptionProps = React.ComponentProps<typeof
|
|
28
|
+
type DrawerTitleProps = React.ComponentProps<typeof Dialog.Title>;
|
|
29
|
+
type DrawerDescriptionProps = React.ComponentProps<typeof Dialog.Description>;
|
|
26
30
|
declare function Drawer({
|
|
27
31
|
size,
|
|
32
|
+
direction,
|
|
33
|
+
dismissible,
|
|
28
34
|
...props
|
|
29
35
|
}: DrawerProps): import("react/jsx-runtime").JSX.Element;
|
|
30
36
|
declare function DrawerTrigger({
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import"../chunk-CHh1Zzun.js";import{cn as e}from"../lib/utils.js";import{Button as t}from"./button.js";import{IconX as n}from"@tabler/icons-react";import{jsx as
|
|
1
|
+
import"../chunk-CHh1Zzun.js";import{cn as e}from"../lib/utils.js";import{Button as t}from"./button.js";import{IconX as n}from"@tabler/icons-react";import{Dialog as r}from"radix-ui";import{jsx as i,jsxs as a}from"react/jsx-runtime";import{cva as o}from"class-variance-authority";import*as s from"react";const c=o([`bg-background flex h-auto flex-col text-sm fixed z-50 outline-none duration-200`,`data-open:animate-in data-closed:animate-out`],{variants:{direction:{top:`inset-x-0 top-0 rounded-b-xl border-b data-closed:slide-out-to-top data-open:slide-in-from-top-10`,right:`inset-y-0 right-0 rounded-l-xl border-l data-closed:slide-out-to-right data-open:slide-in-from-right-10`,bottom:`inset-x-0 bottom-0 rounded-t-xl border-t data-closed:slide-out-to-bottom data-open:slide-in-from-bottom-10`,left:`inset-y-0 left-0 rounded-r-xl border-r data-closed:slide-out-to-left data-open:slide-in-from-left-10`},size:{sm:``,md:``,lg:``,xl:``,"2xl":``,"3xl":``,full:``}},compoundVariants:[{direction:[`left`,`right`],size:`sm`,className:`w-3/4 sm:max-w-sm`},{direction:[`left`,`right`],size:`md`,className:`w-4/5 sm:max-w-md`},{direction:[`left`,`right`],size:`lg`,className:`w-[90%] sm:max-w-lg`},{direction:[`left`,`right`],size:`xl`,className:`w-[90%] sm:max-w-195`},{direction:[`left`,`right`],size:`2xl`,className:`w-[90%] sm:max-w-240`},{direction:[`left`,`right`],size:`3xl`,className:`w-[90%] sm:max-w-300`},{direction:[`left`,`right`],size:`full`,className:`w-full`},{direction:`top`,size:`sm`,className:`mb-24 h-full max-h-96`},{direction:`top`,size:`md`,className:`mb-20 h-full max-h-112`},{direction:`top`,size:`lg`,className:`mb-12 h-full max-h-128`},{direction:`top`,size:`xl`,className:`mb-12 h-full max-h-195`},{direction:`top`,size:`2xl`,className:`mb-12 h-full max-h-240`},{direction:`top`,size:`3xl`,className:`mb-12 h-full max-h-300`},{direction:`top`,size:`full`,className:`mb-0 h-full`},{direction:`bottom`,size:`sm`,className:`mt-24 h-full max-h-96`},{direction:`bottom`,size:`md`,className:`mt-20 h-full max-h-112`},{direction:`bottom`,size:`lg`,className:`mt-12 h-full max-h-128`},{direction:`bottom`,size:`xl`,className:`mt-12 h-full max-h-195`},{direction:`bottom`,size:`2xl`,className:`mt-12 h-full max-h-240`},{direction:`bottom`,size:`3xl`,className:`mt-12 h-full max-h-300`},{direction:`bottom`,size:`full`,className:`mt-0 h-full`}],defaultVariants:{direction:`right`,size:`md`}}),l=s.createContext({size:`md`,direction:`right`,dismissible:!0});function Drawer({size:e=`md`,direction:t=`right`,dismissible:n=!0,...a}){let o=s.useMemo(()=>({size:e,direction:t,dismissible:n}),[e,t,n]);return i(l.Provider,{value:o,children:i(r.Root,{"data-slot":`drawer`,...a})})}function DrawerTrigger({...e}){return i(r.Trigger,{"data-slot":`drawer-trigger`,...e})}function DrawerPortal({...e}){return i(r.Portal,{"data-slot":`drawer-portal`,...e})}function DrawerClose({...e}){return i(r.Close,{"data-slot":`drawer-close`,...e})}function DrawerOverlay({className:t,...n}){return i(r.Overlay,{"data-slot":`drawer-overlay`,className:e(`bg-black/10 fixed inset-0 z-50`,`data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0`,`supports-backdrop-filter:backdrop-blur-xs`,t),...n})}function DrawerContent({className:o,children:u,showCloseButton:d=!0,...f}){let{size:p,direction:m,dismissible:h}=s.useContext(l);return a(DrawerPortal,{children:[i(DrawerOverlay,{}),a(r.Content,{"data-slot":`drawer-content`,className:e(c({size:p,direction:m}),o),...f,onEscapeKeyDown:e=>{h||e.preventDefault(),f.onEscapeKeyDown?.(e)},onInteractOutside:e=>{h||e.preventDefault(),f.onInteractOutside?.(e)},children:[u,d&&i(DrawerClose,{asChild:!0,children:a(t,{variant:`ghost`,className:`absolute top-3 right-3`,size:`icon-sm`,children:[i(n,{}),i(`span`,{className:`sr-only`,children:`Close`})]})})]})]})}function DrawerHeader({className:t,...n}){let{direction:r}=s.useContext(l);return i(`div`,{"data-slot":`drawer-header`,className:e(`p-4 flex flex-col gap-0.5 md:gap-0.5`,(r===`top`||r===`bottom`)&&`text-center md:text-left`,t),...n})}function DrawerBody({className:t,...n}){return i(`div`,{"data-slot":`drawer-body`,className:e(`px-4 pb-4 flex-1 min-h-0 overflow-y-auto`,t),...n})}function DrawerFooter({className:t,...n}){return i(`div`,{"data-slot":`drawer-footer`,className:e(`gap-2 p-4 mt-auto flex flex-col sm:flex-row sm:justify-end`,t),...n})}function DrawerTitle({className:t,...n}){return i(r.Title,{"data-slot":`drawer-title`,className:e(`text-foreground text-base font-medium`,t),...n})}function DrawerDescription({className:t,...n}){return i(r.Description,{"data-slot":`drawer-description`,className:e(`text-muted-foreground text-sm`,t),...n})}export{Drawer,DrawerBody,DrawerClose,DrawerContent,DrawerDescription,DrawerFooter,DrawerHeader,DrawerOverlay,DrawerPortal,DrawerTitle,DrawerTrigger};
|
|
2
2
|
//# sourceMappingURL=drawer.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"drawer.js","names":["DrawerPrimitive"],"sources":["../../src/components/drawer.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { IconX } from '@tabler/icons-react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { Drawer as DrawerPrimitive } from 'vaul'\n\nimport { cn } from '../lib/utils'\nimport { Button } from './button'\n\nconst drawerContentVariants = cva(\n 'bg-background flex h-auto flex-col text-sm data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:rounded-t-xl data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:rounded-r-xl data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:rounded-l-xl data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:rounded-b-xl data-[vaul-drawer-direction=top]:border-b group/drawer-content fixed z-50',\n {\n variants: {\n size: {\n sm: 'data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:sm:max-w-sm',\n md: 'data-[vaul-drawer-direction=bottom]:mt-20 data-[vaul-drawer-direction=bottom]:max-h-[85vh] data-[vaul-drawer-direction=top]:mb-20 data-[vaul-drawer-direction=top]:max-h-[85vh] data-[vaul-drawer-direction=left]:w-4/5 data-[vaul-drawer-direction=left]:sm:max-w-md data-[vaul-drawer-direction=right]:w-4/5 data-[vaul-drawer-direction=right]:sm:max-w-md',\n lg: 'data-[vaul-drawer-direction=bottom]:mt-12 data-[vaul-drawer-direction=bottom]:max-h-[90vh] data-[vaul-drawer-direction=top]:mb-12 data-[vaul-drawer-direction=top]:max-h-[90vh] data-[vaul-drawer-direction=left]:w-[90%] data-[vaul-drawer-direction=left]:sm:max-w-lg data-[vaul-drawer-direction=right]:w-[90%] data-[vaul-drawer-direction=right]:sm:max-w-lg',\n xl: 'data-[vaul-drawer-direction=bottom]:mt-12 data-[vaul-drawer-direction=bottom]:max-h-[90vh] data-[vaul-drawer-direction=top]:mb-12 data-[vaul-drawer-direction=top]:max-h-[90vh] data-[vaul-drawer-direction=left]:w-[90%] data-[vaul-drawer-direction=left]:sm:max-w-195 data-[vaul-drawer-direction=right]:w-[90%] data-[vaul-drawer-direction=right]:sm:max-w-195',\n '2xl':\n 'data-[vaul-drawer-direction=bottom]:mt-12 data-[vaul-drawer-direction=bottom]:max-h-[90vh] data-[vaul-drawer-direction=top]:mb-12 data-[vaul-drawer-direction=top]:max-h-[90vh] data-[vaul-drawer-direction=left]:w-[90%] data-[vaul-drawer-direction=left]:sm:max-w-240 data-[vaul-drawer-direction=right]:w-[90%] data-[vaul-drawer-direction=right]:sm:max-w-240',\n '3xl':\n 'data-[vaul-drawer-direction=bottom]:mt-12 data-[vaul-drawer-direction=bottom]:max-h-[90vh] data-[vaul-drawer-direction=top]:mb-12 data-[vaul-drawer-direction=top]:max-h-[90vh] data-[vaul-drawer-direction=left]:w-[90%] data-[vaul-drawer-direction=left]:sm:max-w-300 data-[vaul-drawer-direction=right]:w-[90%] data-[vaul-drawer-direction=right]:sm:max-w-300',\n full: 'data-[vaul-drawer-direction=bottom]:mt-0 data-[vaul-drawer-direction=bottom]:max-h-screen data-[vaul-drawer-direction=top]:mb-0 data-[vaul-drawer-direction=top]:max-h-screen data-[vaul-drawer-direction=left]:w-full data-[vaul-drawer-direction=right]:w-full'\n }\n },\n defaultVariants: {\n size: 'md'\n }\n }\n)\n\ntype DrawerSize = NonNullable<VariantProps<typeof drawerContentVariants>['size']>\ntype DrawerSizeContextValue = { size: DrawerSize }\nconst DrawerSizeContext = React.createContext<DrawerSizeContextValue>({ size: 'sm' })\n\nexport type DrawerProps = React.ComponentProps<typeof DrawerPrimitive.Root> & { size?: DrawerSize }\nexport type DrawerTriggerProps = React.ComponentProps<typeof DrawerPrimitive.Trigger>\nexport type DrawerPortalProps = React.ComponentProps<typeof DrawerPrimitive.Portal>\nexport type DrawerCloseProps = React.ComponentProps<typeof DrawerPrimitive.Close>\nexport type DrawerOverlayProps = React.ComponentProps<typeof DrawerPrimitive.Overlay>\nexport type DrawerContentProps = React.ComponentProps<typeof DrawerPrimitive.Content> & { showCloseButton?: boolean }\nexport type DrawerHeaderProps = React.ComponentProps<'div'>\nexport type DrawerBodyProps = React.ComponentProps<'div'>\nexport type DrawerFooterProps = React.ComponentProps<'div'>\nexport type DrawerTitleProps = React.ComponentProps<typeof DrawerPrimitive.Title>\nexport type DrawerDescriptionProps = React.ComponentProps<typeof DrawerPrimitive.Description>\n\nfunction Drawer({ size = 'md', ...props }: DrawerProps) {\n const contextValue = React.useMemo<DrawerSizeContextValue>(() => ({ size }), [size])\n\n return (\n <DrawerSizeContext.Provider value={contextValue}>\n <DrawerPrimitive.Root data-slot=\"drawer\" direction=\"right\" handleOnly {...props} />\n </DrawerSizeContext.Provider>\n )\n}\n\nfunction DrawerTrigger({ ...props }: DrawerTriggerProps) {\n return <DrawerPrimitive.Trigger data-slot=\"drawer-trigger\" {...props} />\n}\n\nfunction DrawerPortal({ ...props }: DrawerPortalProps) {\n return <DrawerPrimitive.Portal data-slot=\"drawer-portal\" {...props} />\n}\n\nfunction DrawerClose({ ...props }: DrawerCloseProps) {\n return <DrawerPrimitive.Close data-slot=\"drawer-close\" {...props} />\n}\n\nfunction DrawerOverlay({ className, ...props }: DrawerOverlayProps) {\n return (\n <DrawerPrimitive.Overlay\n data-slot=\"drawer-overlay\"\n className={cn(\n 'bg-black/10 fixed inset-0 z-50',\n 'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0',\n 'supports-backdrop-filter:backdrop-blur-xs',\n className\n )}\n {...props}\n />\n )\n}\n\nfunction DrawerContent({ className, children, showCloseButton = true, ...props }: DrawerContentProps) {\n const { size } = React.useContext(DrawerSizeContext)\n\n return (\n <DrawerPortal data-slot=\"drawer-portal\">\n <DrawerOverlay />\n <DrawerPrimitive.Content\n data-slot=\"drawer-content\"\n className={cn(drawerContentVariants({ size }), className)}\n {...props}\n >\n <div className=\"bg-muted mt-4 h-1 w-25 rounded-full mx-auto hidden shrink-0 group-data-[vaul-drawer-direction=bottom]/drawer-content:block\" />\n {children}\n {showCloseButton && (\n <DrawerClose asChild>\n <Button variant=\"ghost\" className=\"absolute top-3 right-3\" size=\"icon-sm\">\n <IconX />\n <span className=\"sr-only\">Close</span>\n </Button>\n </DrawerClose>\n )}\n </DrawerPrimitive.Content>\n </DrawerPortal>\n )\n}\n\nfunction DrawerHeader({ className, ...props }: DrawerHeaderProps) {\n return (\n <div\n data-slot=\"drawer-header\"\n className={cn(\n 'p-4 flex flex-col gap-0.5 md:gap-0.5',\n 'group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center',\n 'group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:text-left',\n className\n )}\n {...props}\n />\n )\n}\n\nfunction DrawerBody({ className, ...props }: DrawerBodyProps) {\n return (\n <div data-slot=\"drawer-body\" className={cn('px-4 pb-4 flex-1 min-h-0 overflow-y-auto', className)} {...props} />\n )\n}\n\nfunction DrawerFooter({ className, ...props }: DrawerFooterProps) {\n return (\n <div\n data-slot=\"drawer-footer\"\n className={cn('gap-2 p-4 mt-auto flex flex-col sm:flex-row sm:justify-end', className)}\n {...props}\n />\n )\n}\n\nfunction DrawerTitle({ className, ...props }: DrawerTitleProps) {\n return (\n <DrawerPrimitive.Title\n data-slot=\"drawer-title\"\n className={cn('text-foreground text-base font-medium', className)}\n {...props}\n />\n )\n}\n\nfunction DrawerDescription({ className, ...props }: DrawerDescriptionProps) {\n return (\n <DrawerPrimitive.Description\n data-slot=\"drawer-description\"\n className={cn('text-muted-foreground text-sm', className)}\n {...props}\n />\n )\n}\n\nexport {\n Drawer,\n DrawerBody,\n DrawerClose,\n DrawerContent,\n DrawerDescription,\n DrawerFooter,\n DrawerHeader,\n DrawerOverlay,\n DrawerPortal,\n DrawerTitle,\n DrawerTrigger\n}\n"],"mappings":"0SASA,MAAM,EAAwB,EAC5B,mxBACA,CACE,SAAU,CACR,KAAM,CACJ,GAAI,gWACJ,GAAI,gWACJ,GAAI,oWACJ,GAAI,sWACJ,MACE,sWACF,MACE,sWACF,KAAM,kQACR,CACF,EACA,gBAAiB,CACf,KAAM,IACR,CACF,CACF,EAIM,EAAoB,EAAM,cAAsC,CAAE,KAAM,IAAK,CAAC,EAcpF,SAAS,OAAO,CAAE,OAAO,KAAM,GAAG,GAAsB,CACtD,IAAM,EAAe,EAAM,aAAuC,CAAE,MAAK,GAAI,CAAC,CAAI,CAAC,EAEnF,OACE,EAAC,EAAkB,SAAnB,CAA4B,MAAO,WACjC,EAACA,EAAgB,KAAjB,CAAsB,YAAU,SAAS,UAAU,QAAQ,WAAA,GAAW,GAAI,CAAQ,CAAA,CACxD,CAAA,CAEhC,CAEA,SAAS,cAAc,CAAE,GAAG,GAA6B,CACvD,OAAO,EAACA,EAAgB,QAAjB,CAAyB,YAAU,iBAAiB,GAAI,CAAQ,CAAA,CACzE,CAEA,SAAS,aAAa,CAAE,GAAG,GAA4B,CACrD,OAAO,EAACA,EAAgB,OAAjB,CAAwB,YAAU,gBAAgB,GAAI,CAAQ,CAAA,CACvE,CAEA,SAAS,YAAY,CAAE,GAAG,GAA2B,CACnD,OAAO,EAACA,EAAgB,MAAjB,CAAuB,YAAU,eAAe,GAAI,CAAQ,CAAA,CACrE,CAEA,SAAS,cAAc,CAAE,YAAW,GAAG,GAA6B,CAClE,OACE,EAACA,EAAgB,QAAjB,CACE,YAAU,iBACV,UAAW,EACT,iCACA,0FACA,4CACA,CACF,EACA,GAAI,CACL,CAAA,CAEL,CAEA,SAAS,cAAc,CAAE,YAAW,WAAU,kBAAkB,GAAM,GAAG,GAA6B,CACpG,GAAM,CAAE,QAAS,EAAM,WAAW,CAAiB,EAEnD,OACE,EAAC,aAAD,CAAc,YAAU,yBAAxB,CACE,EAAC,cAAD,CAAgB,CAAA,EAChB,EAACA,EAAgB,QAAjB,CACE,YAAU,iBACV,UAAW,EAAG,EAAsB,CAAE,MAAK,CAAC,EAAG,CAAS,EACxD,GAAI,WAHN,CAKE,EAAC,MAAD,CAAK,UAAU,4HAA8H,CAAA,EAC5I,EACA,GACC,EAAC,YAAD,CAAa,QAAA,YACX,EAAC,EAAD,CAAQ,QAAQ,QAAQ,UAAU,yBAAyB,KAAK,mBAAhE,CACE,EAAC,EAAD,CAAQ,CAAA,EACR,EAAC,OAAD,CAAM,UAAU,mBAAU,OAAW,CAAA,CAC/B,GACG,CAAA,CAEQ,GACb,GAElB,CAEA,SAAS,aAAa,CAAE,YAAW,GAAG,GAA4B,CAChE,OACE,EAAC,MAAD,CACE,YAAU,gBACV,UAAW,EACT,uCACA,uEACA,iFACA,CACF,EACA,GAAI,CACL,CAAA,CAEL,CAEA,SAAS,WAAW,CAAE,YAAW,GAAG,GAA0B,CAC5D,OACE,EAAC,MAAD,CAAK,YAAU,cAAc,UAAW,EAAG,2CAA4C,CAAS,EAAG,GAAI,CAAQ,CAAA,CAEnH,CAEA,SAAS,aAAa,CAAE,YAAW,GAAG,GAA4B,CAChE,OACE,EAAC,MAAD,CACE,YAAU,gBACV,UAAW,EAAG,6DAA8D,CAAS,EACrF,GAAI,CACL,CAAA,CAEL,CAEA,SAAS,YAAY,CAAE,YAAW,GAAG,GAA2B,CAC9D,OACE,EAACA,EAAgB,MAAjB,CACE,YAAU,eACV,UAAW,EAAG,wCAAyC,CAAS,EAChE,GAAI,CACL,CAAA,CAEL,CAEA,SAAS,kBAAkB,CAAE,YAAW,GAAG,GAAiC,CAC1E,OACE,EAACA,EAAgB,YAAjB,CACE,YAAU,qBACV,UAAW,EAAG,gCAAiC,CAAS,EACxD,GAAI,CACL,CAAA,CAEL"}
|
|
1
|
+
{"version":3,"file":"drawer.js","names":["DrawerPrimitive"],"sources":["../../src/components/drawer.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { IconX } from '@tabler/icons-react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { Dialog as DrawerPrimitive } from 'radix-ui'\n\nimport { cn } from '../lib/utils'\nimport { Button } from './button'\n\nconst drawerContentVariants = cva(\n [\n 'bg-background flex h-auto flex-col text-sm fixed z-50 outline-none duration-200',\n 'data-open:animate-in data-closed:animate-out'\n ],\n {\n variants: {\n direction: {\n top: 'inset-x-0 top-0 rounded-b-xl border-b data-closed:slide-out-to-top data-open:slide-in-from-top-10',\n right:\n 'inset-y-0 right-0 rounded-l-xl border-l data-closed:slide-out-to-right data-open:slide-in-from-right-10',\n bottom:\n 'inset-x-0 bottom-0 rounded-t-xl border-t data-closed:slide-out-to-bottom data-open:slide-in-from-bottom-10',\n left: 'inset-y-0 left-0 rounded-r-xl border-r data-closed:slide-out-to-left data-open:slide-in-from-left-10'\n },\n size: {\n sm: '',\n md: '',\n lg: '',\n xl: '',\n '2xl': '',\n '3xl': '',\n full: ''\n }\n },\n compoundVariants: [\n { direction: ['left', 'right'], size: 'sm', className: 'w-3/4 sm:max-w-sm' },\n { direction: ['left', 'right'], size: 'md', className: 'w-4/5 sm:max-w-md' },\n { direction: ['left', 'right'], size: 'lg', className: 'w-[90%] sm:max-w-lg' },\n { direction: ['left', 'right'], size: 'xl', className: 'w-[90%] sm:max-w-195' },\n { direction: ['left', 'right'], size: '2xl', className: 'w-[90%] sm:max-w-240' },\n { direction: ['left', 'right'], size: '3xl', className: 'w-[90%] sm:max-w-300' },\n { direction: ['left', 'right'], size: 'full', className: 'w-full' },\n { direction: 'top', size: 'sm', className: 'mb-24 h-full max-h-96' },\n { direction: 'top', size: 'md', className: 'mb-20 h-full max-h-112' },\n { direction: 'top', size: 'lg', className: 'mb-12 h-full max-h-128' },\n { direction: 'top', size: 'xl', className: 'mb-12 h-full max-h-195' },\n { direction: 'top', size: '2xl', className: 'mb-12 h-full max-h-240' },\n { direction: 'top', size: '3xl', className: 'mb-12 h-full max-h-300' },\n { direction: 'top', size: 'full', className: 'mb-0 h-full' },\n { direction: 'bottom', size: 'sm', className: 'mt-24 h-full max-h-96' },\n { direction: 'bottom', size: 'md', className: 'mt-20 h-full max-h-112' },\n { direction: 'bottom', size: 'lg', className: 'mt-12 h-full max-h-128' },\n { direction: 'bottom', size: 'xl', className: 'mt-12 h-full max-h-195' },\n { direction: 'bottom', size: '2xl', className: 'mt-12 h-full max-h-240' },\n { direction: 'bottom', size: '3xl', className: 'mt-12 h-full max-h-300' },\n { direction: 'bottom', size: 'full', className: 'mt-0 h-full' }\n ],\n defaultVariants: {\n direction: 'right',\n size: 'md'\n }\n }\n)\n\ntype DrawerDirection = NonNullable<VariantProps<typeof drawerContentVariants>['direction']>\ntype DrawerSize = NonNullable<VariantProps<typeof drawerContentVariants>['size']>\ntype DrawerContextValue = { size: DrawerSize; direction: DrawerDirection; dismissible: boolean }\nconst DrawerContext = React.createContext<DrawerContextValue>({ size: 'md', direction: 'right', dismissible: true })\n\nexport type DrawerProps = React.ComponentProps<typeof DrawerPrimitive.Root> & {\n size?: DrawerSize\n direction?: DrawerDirection\n dismissible?: boolean\n}\nexport type DrawerTriggerProps = React.ComponentProps<typeof DrawerPrimitive.Trigger>\nexport type DrawerPortalProps = React.ComponentProps<typeof DrawerPrimitive.Portal>\nexport type DrawerCloseProps = React.ComponentProps<typeof DrawerPrimitive.Close>\nexport type DrawerOverlayProps = React.ComponentProps<typeof DrawerPrimitive.Overlay>\nexport type DrawerContentProps = React.ComponentProps<typeof DrawerPrimitive.Content> & { showCloseButton?: boolean }\nexport type DrawerHeaderProps = React.ComponentProps<'div'>\nexport type DrawerBodyProps = React.ComponentProps<'div'>\nexport type DrawerFooterProps = React.ComponentProps<'div'>\nexport type DrawerTitleProps = React.ComponentProps<typeof DrawerPrimitive.Title>\nexport type DrawerDescriptionProps = React.ComponentProps<typeof DrawerPrimitive.Description>\n\nfunction Drawer({ size = 'md', direction = 'right', dismissible = true, ...props }: DrawerProps) {\n const contextValue = React.useMemo<DrawerContextValue>(\n () => ({ size, direction, dismissible }),\n [size, direction, dismissible]\n )\n\n return (\n <DrawerContext.Provider value={contextValue}>\n <DrawerPrimitive.Root data-slot=\"drawer\" {...props} />\n </DrawerContext.Provider>\n )\n}\n\nfunction DrawerTrigger({ ...props }: DrawerTriggerProps) {\n return <DrawerPrimitive.Trigger data-slot=\"drawer-trigger\" {...props} />\n}\n\nfunction DrawerPortal({ ...props }: DrawerPortalProps) {\n return <DrawerPrimitive.Portal data-slot=\"drawer-portal\" {...props} />\n}\n\nfunction DrawerClose({ ...props }: DrawerCloseProps) {\n return <DrawerPrimitive.Close data-slot=\"drawer-close\" {...props} />\n}\n\nfunction DrawerOverlay({ className, ...props }: DrawerOverlayProps) {\n return (\n <DrawerPrimitive.Overlay\n data-slot=\"drawer-overlay\"\n className={cn(\n 'bg-black/10 fixed inset-0 z-50',\n 'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0',\n 'supports-backdrop-filter:backdrop-blur-xs',\n className\n )}\n {...props}\n />\n )\n}\n\nfunction DrawerContent({ className, children, showCloseButton = true, ...props }: DrawerContentProps) {\n const { size, direction, dismissible } = React.useContext(DrawerContext)\n\n return (\n <DrawerPortal>\n <DrawerOverlay />\n <DrawerPrimitive.Content\n data-slot=\"drawer-content\"\n className={cn(drawerContentVariants({ size, direction }), className)}\n {...props}\n onEscapeKeyDown={(event) => {\n if (!dismissible) event.preventDefault()\n props.onEscapeKeyDown?.(event)\n }}\n onInteractOutside={(event) => {\n if (!dismissible) event.preventDefault()\n props.onInteractOutside?.(event)\n }}\n >\n {children}\n {showCloseButton && (\n <DrawerClose asChild>\n <Button variant=\"ghost\" className=\"absolute top-3 right-3\" size=\"icon-sm\">\n <IconX />\n <span className=\"sr-only\">Close</span>\n </Button>\n </DrawerClose>\n )}\n </DrawerPrimitive.Content>\n </DrawerPortal>\n )\n}\n\nfunction DrawerHeader({ className, ...props }: DrawerHeaderProps) {\n const { direction } = React.useContext(DrawerContext)\n const isVertical = direction === 'top' || direction === 'bottom'\n\n return (\n <div\n data-slot=\"drawer-header\"\n className={cn('p-4 flex flex-col gap-0.5 md:gap-0.5', isVertical && 'text-center md:text-left', className)}\n {...props}\n />\n )\n}\n\nfunction DrawerBody({ className, ...props }: DrawerBodyProps) {\n return (\n <div data-slot=\"drawer-body\" className={cn('px-4 pb-4 flex-1 min-h-0 overflow-y-auto', className)} {...props} />\n )\n}\n\nfunction DrawerFooter({ className, ...props }: DrawerFooterProps) {\n return (\n <div\n data-slot=\"drawer-footer\"\n className={cn('gap-2 p-4 mt-auto flex flex-col sm:flex-row sm:justify-end', className)}\n {...props}\n />\n )\n}\n\nfunction DrawerTitle({ className, ...props }: DrawerTitleProps) {\n return (\n <DrawerPrimitive.Title\n data-slot=\"drawer-title\"\n className={cn('text-foreground text-base font-medium', className)}\n {...props}\n />\n )\n}\n\nfunction DrawerDescription({ className, ...props }: DrawerDescriptionProps) {\n return (\n <DrawerPrimitive.Description\n data-slot=\"drawer-description\"\n className={cn('text-muted-foreground text-sm', className)}\n {...props}\n />\n )\n}\n\nexport {\n Drawer,\n DrawerBody,\n DrawerClose,\n DrawerContent,\n DrawerDescription,\n DrawerFooter,\n DrawerHeader,\n DrawerOverlay,\n DrawerPortal,\n DrawerTitle,\n DrawerTrigger\n}\n"],"mappings":"8SASA,MAAM,EAAwB,EAC5B,CACE,kFACA,8CACF,EACA,CACE,SAAU,CACR,UAAW,CACT,IAAK,oGACL,MACE,0GACF,OACE,6GACF,KAAM,sGACR,EACA,KAAM,CACJ,GAAI,GACJ,GAAI,GACJ,GAAI,GACJ,GAAI,GACJ,MAAO,GACP,MAAO,GACP,KAAM,EACR,CACF,EACA,iBAAkB,CAChB,CAAE,UAAW,CAAC,OAAQ,OAAO,EAAG,KAAM,KAAM,UAAW,mBAAoB,EAC3E,CAAE,UAAW,CAAC,OAAQ,OAAO,EAAG,KAAM,KAAM,UAAW,mBAAoB,EAC3E,CAAE,UAAW,CAAC,OAAQ,OAAO,EAAG,KAAM,KAAM,UAAW,qBAAsB,EAC7E,CAAE,UAAW,CAAC,OAAQ,OAAO,EAAG,KAAM,KAAM,UAAW,sBAAuB,EAC9E,CAAE,UAAW,CAAC,OAAQ,OAAO,EAAG,KAAM,MAAO,UAAW,sBAAuB,EAC/E,CAAE,UAAW,CAAC,OAAQ,OAAO,EAAG,KAAM,MAAO,UAAW,sBAAuB,EAC/E,CAAE,UAAW,CAAC,OAAQ,OAAO,EAAG,KAAM,OAAQ,UAAW,QAAS,EAClE,CAAE,UAAW,MAAO,KAAM,KAAM,UAAW,uBAAwB,EACnE,CAAE,UAAW,MAAO,KAAM,KAAM,UAAW,wBAAyB,EACpE,CAAE,UAAW,MAAO,KAAM,KAAM,UAAW,wBAAyB,EACpE,CAAE,UAAW,MAAO,KAAM,KAAM,UAAW,wBAAyB,EACpE,CAAE,UAAW,MAAO,KAAM,MAAO,UAAW,wBAAyB,EACrE,CAAE,UAAW,MAAO,KAAM,MAAO,UAAW,wBAAyB,EACrE,CAAE,UAAW,MAAO,KAAM,OAAQ,UAAW,aAAc,EAC3D,CAAE,UAAW,SAAU,KAAM,KAAM,UAAW,uBAAwB,EACtE,CAAE,UAAW,SAAU,KAAM,KAAM,UAAW,wBAAyB,EACvE,CAAE,UAAW,SAAU,KAAM,KAAM,UAAW,wBAAyB,EACvE,CAAE,UAAW,SAAU,KAAM,KAAM,UAAW,wBAAyB,EACvE,CAAE,UAAW,SAAU,KAAM,MAAO,UAAW,wBAAyB,EACxE,CAAE,UAAW,SAAU,KAAM,MAAO,UAAW,wBAAyB,EACxE,CAAE,UAAW,SAAU,KAAM,OAAQ,UAAW,aAAc,CAChE,EACA,gBAAiB,CACf,UAAW,QACX,KAAM,IACR,CACF,CACF,EAKM,EAAgB,EAAM,cAAkC,CAAE,KAAM,KAAM,UAAW,QAAS,YAAa,EAAK,CAAC,EAkBnH,SAAS,OAAO,CAAE,OAAO,KAAM,YAAY,QAAS,cAAc,GAAM,GAAG,GAAsB,CAC/F,IAAM,EAAe,EAAM,aAClB,CAAE,OAAM,YAAW,aAAY,GACtC,CAAC,EAAM,EAAW,CAAW,CAC/B,EAEA,OACE,EAAC,EAAc,SAAf,CAAwB,MAAO,WAC7B,EAACA,EAAgB,KAAjB,CAAsB,YAAU,SAAS,GAAI,CAAQ,CAAA,CAC/B,CAAA,CAE5B,CAEA,SAAS,cAAc,CAAE,GAAG,GAA6B,CACvD,OAAO,EAACA,EAAgB,QAAjB,CAAyB,YAAU,iBAAiB,GAAI,CAAQ,CAAA,CACzE,CAEA,SAAS,aAAa,CAAE,GAAG,GAA4B,CACrD,OAAO,EAACA,EAAgB,OAAjB,CAAwB,YAAU,gBAAgB,GAAI,CAAQ,CAAA,CACvE,CAEA,SAAS,YAAY,CAAE,GAAG,GAA2B,CACnD,OAAO,EAACA,EAAgB,MAAjB,CAAuB,YAAU,eAAe,GAAI,CAAQ,CAAA,CACrE,CAEA,SAAS,cAAc,CAAE,YAAW,GAAG,GAA6B,CAClE,OACE,EAACA,EAAgB,QAAjB,CACE,YAAU,iBACV,UAAW,EACT,iCACA,0FACA,4CACA,CACF,EACA,GAAI,CACL,CAAA,CAEL,CAEA,SAAS,cAAc,CAAE,YAAW,WAAU,kBAAkB,GAAM,GAAG,GAA6B,CACpG,GAAM,CAAE,OAAM,YAAW,eAAgB,EAAM,WAAW,CAAa,EAEvE,OACE,EAAC,aAAD,CAAA,SAAA,CACE,EAAC,cAAD,CAAgB,CAAA,EAChB,EAACA,EAAgB,QAAjB,CACE,YAAU,iBACV,UAAW,EAAG,EAAsB,CAAE,OAAM,WAAU,CAAC,EAAG,CAAS,EACnE,GAAI,EACJ,gBAAkB,GAAU,CACrB,GAAa,EAAM,eAAe,EACvC,EAAM,kBAAkB,CAAK,CAC/B,EACA,kBAAoB,GAAU,CACvB,GAAa,EAAM,eAAe,EACvC,EAAM,oBAAoB,CAAK,CACjC,WAXF,CAaG,EACA,GACC,EAAC,YAAD,CAAa,QAAA,YACX,EAAC,EAAD,CAAQ,QAAQ,QAAQ,UAAU,yBAAyB,KAAK,mBAAhE,CACE,EAAC,EAAD,CAAQ,CAAA,EACR,EAAC,OAAD,CAAM,UAAU,mBAAU,OAAW,CAAA,CAC/B,GACG,CAAA,CAEQ,GACb,CAAA,CAAA,CAElB,CAEA,SAAS,aAAa,CAAE,YAAW,GAAG,GAA4B,CAChE,GAAM,CAAE,aAAc,EAAM,WAAW,CAAa,EAGpD,OACE,EAAC,MAAD,CACE,YAAU,gBACV,UAAW,EAAG,wCALC,IAAc,OAAS,IAAc,WAKgB,2BAA4B,CAAS,EACzG,GAAI,CACL,CAAA,CAEL,CAEA,SAAS,WAAW,CAAE,YAAW,GAAG,GAA0B,CAC5D,OACE,EAAC,MAAD,CAAK,YAAU,cAAc,UAAW,EAAG,2CAA4C,CAAS,EAAG,GAAI,CAAQ,CAAA,CAEnH,CAEA,SAAS,aAAa,CAAE,YAAW,GAAG,GAA4B,CAChE,OACE,EAAC,MAAD,CACE,YAAU,gBACV,UAAW,EAAG,6DAA8D,CAAS,EACrF,GAAI,CACL,CAAA,CAEL,CAEA,SAAS,YAAY,CAAE,YAAW,GAAG,GAA2B,CAC9D,OACE,EAACA,EAAgB,MAAjB,CACE,YAAU,eACV,UAAW,EAAG,wCAAyC,CAAS,EAChE,GAAI,CACL,CAAA,CAEL,CAEA,SAAS,kBAAkB,CAAE,YAAW,GAAG,GAAiC,CAC1E,OACE,EAACA,EAAgB,YAAjB,CACE,YAAU,qBACV,UAAW,EAAG,gCAAiC,CAAS,EACxD,GAAI,CACL,CAAA,CAEL"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import"../chunk-CHh1Zzun.js";import{cn as e}from"../lib/utils.js";import{jsx as t,jsxs as n}from"react/jsx-runtime";function Skeleton({className:r,children:i,visible:a=!0,...o}){return i==null?t(`div`,{"data-slot":`skeleton`,className:e(`bg-muted rounded-md animate-pulse`,r),...o}):n(`div`,{"data-slot":`skeleton`,"aria-busy":a||void 0,className:e(`relative
|
|
1
|
+
import"../chunk-CHh1Zzun.js";import{cn as e}from"../lib/utils.js";import{jsx as t,jsxs as n}from"react/jsx-runtime";function Skeleton({className:r,children:i,visible:a=!0,...o}){return i==null?t(`div`,{"data-slot":`skeleton`,className:e(`bg-muted rounded-md animate-pulse`,r),...o}):n(`div`,{"data-slot":`skeleton`,"aria-busy":a||void 0,className:e(`relative rounded-md`,r),...o,children:[t(`div`,{"data-slot":`skeleton-content`,className:e(a&&`invisible`),"aria-hidden":a||void 0,children:i}),a&&t(`div`,{"data-slot":`skeleton-overlay`,"aria-hidden":`true`,className:`pointer-events-none absolute inset-0 rounded-[inherit] bg-muted animate-pulse`})]})}export{Skeleton};
|
|
2
2
|
//# sourceMappingURL=skeleton.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"skeleton.js","names":[],"sources":["../../src/components/skeleton.tsx"],"sourcesContent":["import type * as React from 'react'\n\nimport { cn } from '../lib/utils'\n\nexport type SkeletonProps = React.ComponentProps<'div'> & {\n visible?: boolean\n}\n\nfunction Skeleton({ className, children, visible = true, ...props }: SkeletonProps) {\n if (children === undefined || children === null) {\n return <div data-slot=\"skeleton\" className={cn('bg-muted rounded-md animate-pulse', className)} {...props} />\n }\n\n return (\n <div\n data-slot=\"skeleton\"\n aria-busy={visible || undefined}\n className={cn('relative
|
|
1
|
+
{"version":3,"file":"skeleton.js","names":[],"sources":["../../src/components/skeleton.tsx"],"sourcesContent":["import type * as React from 'react'\n\nimport { cn } from '../lib/utils'\n\nexport type SkeletonProps = React.ComponentProps<'div'> & {\n visible?: boolean\n}\n\nfunction Skeleton({ className, children, visible = true, ...props }: SkeletonProps) {\n if (children === undefined || children === null) {\n return <div data-slot=\"skeleton\" className={cn('bg-muted rounded-md animate-pulse', className)} {...props} />\n }\n\n return (\n <div\n data-slot=\"skeleton\"\n aria-busy={visible || undefined}\n className={cn('relative rounded-md', className)}\n {...props}\n >\n <div data-slot=\"skeleton-content\" className={cn(visible && 'invisible')} aria-hidden={visible || undefined}>\n {children}\n </div>\n {visible && (\n <div\n data-slot=\"skeleton-overlay\"\n aria-hidden=\"true\"\n className=\"pointer-events-none absolute inset-0 rounded-[inherit] bg-muted animate-pulse\"\n />\n )}\n </div>\n )\n}\n\nexport { Skeleton }\n"],"mappings":"oHAQA,SAAS,SAAS,CAAE,YAAW,WAAU,UAAU,GAAM,GAAG,GAAwB,CAKlF,OAJI,GAAuC,KAClC,EAAC,MAAD,CAAK,YAAU,WAAW,UAAW,EAAG,oCAAqC,CAAS,EAAG,GAAI,CAAQ,CAAA,EAI5G,EAAC,MAAD,CACE,YAAU,WACV,YAAW,GAAW,IAAA,GACtB,UAAW,EAAG,sBAAuB,CAAS,EAC9C,GAAI,WAJN,CAME,EAAC,MAAD,CAAK,YAAU,mBAAmB,UAAW,EAAG,GAAW,WAAW,EAAG,cAAa,GAAW,IAAA,GAC9F,UACE,CAAA,EACJ,GACC,EAAC,MAAD,CACE,YAAU,mBACV,cAAY,OACZ,UAAU,+EACX,CAAA,CAEA,GAET"}
|
|
@@ -189,7 +189,7 @@ Unless noted otherwise, each module also exports its public `*Props` types from
|
|
|
189
189
|
- Notes: `Dialog` supports `size: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'` with default `md`; `full` occupies the entire viewport. `DialogContent` caps its height at `calc(100dvh - 2rem)` and lays out children as a flex column. For long content, wrap the middle in `DialogBody` (`flex-1 overflow-y-auto`) so the body scrolls while `DialogHeader` and `DialogFooter` remain pinned; for short content, omit `DialogBody`. `DialogContent.showCloseButton` defaults to `true`; `DialogFooter.showCloseButton` defaults to `false`. `Dialog.dismissible` defaults to `true`; set it to `false` to prevent closing via outside click and Esc (the close button and `DialogClose` still work)
|
|
190
190
|
- `drawer`
|
|
191
191
|
- Exports: `Drawer`, `DrawerBody`, `DrawerClose`, `DrawerContent`, `DrawerDescription`, `DrawerFooter`, `DrawerHeader`, `DrawerOverlay`, `DrawerPortal`, `DrawerTitle`, `DrawerTrigger`
|
|
192
|
-
- Notes: `Drawer` supports `size: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'` with default `md`; `DrawerBody` provides padded auto-scroll content; `DrawerFooter` stacks actions on mobile and aligns them to the end on larger breakpoints; `DrawerContent.showCloseButton` controls the automatic close button and defaults to `true`. `Drawer.dismissible` defaults to `true
|
|
192
|
+
- Notes: `Drawer` supports `size: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'` with default `md`; `DrawerBody` provides padded auto-scroll content; `DrawerFooter` stacks actions on mobile and aligns them to the end on larger breakpoints; `DrawerContent.showCloseButton` controls the automatic close button and defaults to `true`. `Drawer.dismissible` defaults to `true`; set it to `false` to prevent closing via outside click and Esc (the close button and `DrawerClose` still work). `Drawer.direction: 'top' | 'right' | 'bottom' | 'left'` (default: `right`) controls which edge the drawer slides in from
|
|
193
193
|
- `popover`
|
|
194
194
|
- Exports: `Popover`, `PopoverAnchor`, `PopoverContent`, `PopoverDescription`, `PopoverHeader`, `PopoverTitle`, `PopoverTrigger`
|
|
195
195
|
- `hover-card`
|
|
@@ -121,6 +121,10 @@ When the app uses installed `@uselets/ui` components, add a Tailwind source dire
|
|
|
121
121
|
@source '../node_modules/@uselets/ui/dist';
|
|
122
122
|
```
|
|
123
123
|
|
|
124
|
+
## Global scrollbar style
|
|
125
|
+
|
|
126
|
+
Importing either theme entrypoint applies a default page scrollbar style through the bundled `tailwind-scrollbar` plugin: thin width, transparent track, `muted` thumb, `muted-foreground` thumb on hover. Plugin utilities (`scrollbar-thin`, `scrollbar-thumb-*`, `scrollbar-track-*`, `scrollbar-hover:*`) are available for overrides and for styling internal scroll regions. Firefox does not honor the pseudo-element hover variant — the thumb keeps the base color there.
|
|
127
|
+
|
|
124
128
|
## Typography scale
|
|
125
129
|
|
|
126
130
|
The Max theme uses Inter as `font-sans` and overrides Tailwind CSS text size utilities from `text-xs` through
|
package/dist/styles/base.css
CHANGED
package/dist/styles/theme.css
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@uselets/ui",
|
|
3
|
-
"version": "1.7.
|
|
3
|
+
"version": "1.7.2",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"private": false,
|
|
6
6
|
"description": "React component library for the LET'S design system.",
|
|
@@ -76,8 +76,8 @@
|
|
|
76
76
|
"shadcn": "4.6.0",
|
|
77
77
|
"sonner": "2.0.7",
|
|
78
78
|
"tailwind-merge": "3.6.0",
|
|
79
|
-
"
|
|
80
|
-
"
|
|
79
|
+
"tailwind-scrollbar": "4.0.2",
|
|
80
|
+
"tw-animate-css": "1.4.0"
|
|
81
81
|
},
|
|
82
82
|
"peerDependencies": {
|
|
83
83
|
"react": ">=19",
|
|
@@ -189,7 +189,7 @@ Unless noted otherwise, each module also exports its public `*Props` types from
|
|
|
189
189
|
- Notes: `Dialog` supports `size: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'` with default `md`; `full` occupies the entire viewport. `DialogContent` caps its height at `calc(100dvh - 2rem)` and lays out children as a flex column. For long content, wrap the middle in `DialogBody` (`flex-1 overflow-y-auto`) so the body scrolls while `DialogHeader` and `DialogFooter` remain pinned; for short content, omit `DialogBody`. `DialogContent.showCloseButton` defaults to `true`; `DialogFooter.showCloseButton` defaults to `false`. `Dialog.dismissible` defaults to `true`; set it to `false` to prevent closing via outside click and Esc (the close button and `DialogClose` still work)
|
|
190
190
|
- `drawer`
|
|
191
191
|
- Exports: `Drawer`, `DrawerBody`, `DrawerClose`, `DrawerContent`, `DrawerDescription`, `DrawerFooter`, `DrawerHeader`, `DrawerOverlay`, `DrawerPortal`, `DrawerTitle`, `DrawerTrigger`
|
|
192
|
-
- Notes: `Drawer` supports `size: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'` with default `md`; `DrawerBody` provides padded auto-scroll content; `DrawerFooter` stacks actions on mobile and aligns them to the end on larger breakpoints; `DrawerContent.showCloseButton` controls the automatic close button and defaults to `true`. `Drawer.dismissible` defaults to `true
|
|
192
|
+
- Notes: `Drawer` supports `size: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'` with default `md`; `DrawerBody` provides padded auto-scroll content; `DrawerFooter` stacks actions on mobile and aligns them to the end on larger breakpoints; `DrawerContent.showCloseButton` controls the automatic close button and defaults to `true`. `Drawer.dismissible` defaults to `true`; set it to `false` to prevent closing via outside click and Esc (the close button and `DrawerClose` still work). `Drawer.direction: 'top' | 'right' | 'bottom' | 'left'` (default: `right`) controls which edge the drawer slides in from
|
|
193
193
|
- `popover`
|
|
194
194
|
- Exports: `Popover`, `PopoverAnchor`, `PopoverContent`, `PopoverDescription`, `PopoverHeader`, `PopoverTitle`, `PopoverTrigger`
|
|
195
195
|
- `hover-card`
|
|
@@ -121,6 +121,10 @@ When the app uses installed `@uselets/ui` components, add a Tailwind source dire
|
|
|
121
121
|
@source '../node_modules/@uselets/ui/dist';
|
|
122
122
|
```
|
|
123
123
|
|
|
124
|
+
## Global scrollbar style
|
|
125
|
+
|
|
126
|
+
Importing either theme entrypoint applies a default page scrollbar style through the bundled `tailwind-scrollbar` plugin: thin width, transparent track, `muted` thumb, `muted-foreground` thumb on hover. Plugin utilities (`scrollbar-thin`, `scrollbar-thumb-*`, `scrollbar-track-*`, `scrollbar-hover:*`) are available for overrides and for styling internal scroll regions. Firefox does not honor the pseudo-element hover variant — the thumb keeps the base color there.
|
|
127
|
+
|
|
124
128
|
## Typography scale
|
|
125
129
|
|
|
126
130
|
The Max theme uses Inter as `font-sans` and overrides Tailwind CSS text size utilities from `text-xs` through
|