@uselets/ui 1.6.0 → 1.7.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 +2 -2
- package/dist/components/accordion.js +1 -1
- package/dist/components/accordion.js.map +1 -1
- package/dist/components/dialog.d.ts +2 -0
- package/dist/components/dialog.js +1 -1
- package/dist/components/dialog.js.map +1 -1
- package/dist/components/drawer.d.ts +1 -1
- package/dist/components/drawer.js +1 -1
- package/dist/components/drawer.js.map +1 -1
- package/dist/components/flex.d.ts +2 -2
- package/dist/components/group.d.ts +2 -2
- package/dist/components/group.js +1 -1
- package/dist/components/group.js.map +1 -1
- package/dist/components/stack.d.ts +2 -2
- package/dist/components/tabs.js +1 -1
- package/dist/components/tabs.js.map +1 -1
- package/dist/skills/uselets-ui/references/component-catalog.md +2 -2
- package/package.json +1 -1
- package/skills/uselets-ui/references/component-catalog.md +2 -2
package/README.md
CHANGED
|
@@ -327,8 +327,8 @@ You can import from the package root (`@uselets/ui`) or by subpath (`@uselets/ui
|
|
|
327
327
|
| `checkbox` | `Checkbox` | `Checkbox` supports `size: 'sm' \| 'md' \| 'lg'` (default: `md`), `color: UIColor` (default: `primary`), `label?: React.ReactNode`, and `labelProps` for the composed `Label`. When `label` is provided without `id`, it generates an id and wires `htmlFor` automatically. Label text follows checkbox size: `sm` 12px, `md` 14px, `lg` 20px. |
|
|
328
328
|
| `code` | `Code` | Inline code primitive rendered as `<code>`. |
|
|
329
329
|
| `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
|
-
| `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`). |
|
|
331
|
-
| `drawer` | `Drawer`, `DrawerTrigger`, `DrawerPortal`, `DrawerClose`, `DrawerOverlay`, `DrawerContent`, `DrawerHeader`, `DrawerBody`, `DrawerFooter`, `DrawerTitle`, `DrawerDescription` | `Drawer` supports `size: 'sm' \| 'md' \| 'lg' \| 'xl'` (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`). Direction (`top/right/bottom/left`) is handled by Vaul root props. |
|
|
330
|
+
| `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`, via Vaul); when `false`, dragging, clicking outside, and pressing Esc no longer close the drawer (the close button and `DrawerClose` still work). Direction (`top/right/bottom/left`) is handled by Vaul root props. |
|
|
332
332
|
| `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
333
|
| `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
334
|
| `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`,t),...n})}function AccordionItem({className:t,...n}){return i(r.Item,{"data-slot":`accordion-item`,className:e(`not-last:border-b`,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:`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 [&_p:not(:last-child)]:mb-4`,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 <AccordionPrimitive.Root
|
|
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 [&_p:not(:last-child)]:mb-4', className)}>\n {children}\n </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,+EAAgF,CAAS,EACzG,UACE,CAAA,CACqB,CAAA,CAEhC"}
|
|
@@ -10,6 +10,7 @@ declare const dialogContentVariants: (props?: ({
|
|
|
10
10
|
type DialogSize = NonNullable<VariantProps<typeof dialogContentVariants>['size']>;
|
|
11
11
|
type DialogProps = React.ComponentProps<typeof Dialog$1.Root> & {
|
|
12
12
|
size?: DialogSize;
|
|
13
|
+
dismissible?: boolean;
|
|
13
14
|
};
|
|
14
15
|
type DialogTriggerProps = React.ComponentProps<typeof Dialog$1.Trigger>;
|
|
15
16
|
type DialogPortalProps = React.ComponentProps<typeof Dialog$1.Portal>;
|
|
@@ -28,6 +29,7 @@ type DialogTitleProps = React.ComponentProps<typeof Dialog$1.Title>;
|
|
|
28
29
|
type DialogDescriptionProps = React.ComponentProps<typeof Dialog$1.Description>;
|
|
29
30
|
declare function Dialog({
|
|
30
31
|
size,
|
|
32
|
+
dismissible,
|
|
31
33
|
...props
|
|
32
34
|
}: DialogProps): import("react/jsx-runtime").JSX.Element;
|
|
33
35
|
declare function DialogTrigger({
|
|
@@ -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{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 ring-foreground/10 fixed top-1/2 left-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2 outline-none`,`flex flex-col gap-4 rounded-xl p-4 text-sm ring-1 duration-100`,`max-w-[calc(100%-2rem)] max-h-[calc(100dvh-2rem)] overflow-hidden`,`data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95`],{variants:{size:{sm:`sm:max-w-sm`,md:`sm:max-w-md`,lg:`sm:max-w-lg`,xl:`sm:max-w-xl`,"2xl":`sm:max-w-2xl`,"3xl":`sm:max-w-3xl`,full:`w-screen h-screen max-w-none max-h-screen rounded-none sm:max-w-none`}},defaultVariants:{size:`md`}}),l=s.createContext({size:`sm
|
|
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 ring-foreground/10 fixed top-1/2 left-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2 outline-none`,`flex flex-col gap-4 rounded-xl p-4 text-sm ring-1 duration-100`,`max-w-[calc(100%-2rem)] max-h-[calc(100dvh-2rem)] overflow-hidden`,`data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95`],{variants:{size:{sm:`sm:max-w-sm`,md:`sm:max-w-md`,lg:`sm:max-w-lg`,xl:`sm:max-w-xl`,"2xl":`sm:max-w-2xl`,"3xl":`sm:max-w-3xl`,full:`w-screen h-screen max-w-none max-h-screen rounded-none sm:max-w-none`}},defaultVariants:{size:`md`}}),l=s.createContext({size:`sm`,dismissible:!0});function Dialog({size:e=`sm`,dismissible:t=!0,...n}){let a=s.useMemo(()=>({size:e,dismissible:t}),[e,t]);return i(l.Provider,{value:a,children:i(r.Root,{"data-slot":`dialog`,...n})})}function DialogTrigger({...e}){return i(r.Trigger,{"data-slot":`dialog-trigger`,...e})}function DialogPortal({...e}){return i(r.Portal,{"data-slot":`dialog-portal`,...e})}function DialogClose({...e}){return i(r.Close,{"data-slot":`dialog-close`,...e})}function DialogOverlay({className:t,...n}){return i(r.Overlay,{"data-slot":`dialog-overlay`,className:e(`bg-black/10 fixed inset-0 isolate z-50`,`data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0`,`duration-100 supports-backdrop-filter:backdrop-blur-xs`,t),...n})}function DialogContent({className:o,children:u,showCloseButton:d=!0,overlayRef:f,...p}){let{size:m,dismissible:h}=s.useContext(l);return a(DialogPortal,{children:[i(DialogOverlay,{ref:f}),a(r.Content,{"data-slot":`dialog-content`,className:e(c({size:m}),o),...p,onEscapeKeyDown:e=>{h||e.preventDefault(),p.onEscapeKeyDown?.(e)},onInteractOutside:e=>{h||e.preventDefault(),p.onInteractOutside?.(e)},children:[u,d&&i(r.Close,{"data-slot":`dialog-close`,asChild:!0,children:a(t,{variant:`ghost`,className:`absolute top-2 right-2`,size:`icon-sm`,children:[i(n,{}),i(`span`,{className:`sr-only`,children:`Close`})]})})]})]})}function DialogHeader({className:t,...n}){return i(`div`,{"data-slot":`dialog-header`,className:e(`gap-2 flex flex-col shrink-0`,t),...n})}function DialogBody({className:t,...n}){return i(`div`,{"data-slot":`dialog-body`,className:e(`-mx-4 px-4 flex-1 overflow-y-auto`,t),...n})}function DialogFooter({className:n,showCloseButton:o=!1,children:s,...c}){return a(`div`,{"data-slot":`dialog-footer`,className:e(`bg-muted/50 -mx-4 -mb-4 rounded-b-xl border-t p-4 shrink-0`,`flex flex-col-reverse gap-2 sm:flex-row sm:justify-end`,n),...c,children:[s,o&&i(r.Close,{asChild:!0,children:i(t,{variant:`outline`,children:`Close`})})]})}function DialogTitle({className:t,...n}){return i(r.Title,{"data-slot":`dialog-title`,className:e(`text-base leading-none font-medium`,t),...n})}function DialogDescription({className:t,...n}){return i(r.Description,{"data-slot":`dialog-description`,className:e(`text-muted-foreground text-sm`,`*:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground`,t),...n})}export{Dialog,DialogBody,DialogClose,DialogContent,DialogDescription,DialogFooter,DialogHeader,DialogOverlay,DialogPortal,DialogTitle,DialogTrigger};
|
|
2
2
|
//# sourceMappingURL=dialog.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dialog.js","names":["DialogPrimitive"],"sources":["../../src/components/dialog.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 DialogPrimitive } from 'radix-ui'\n\nimport { cn } from '../lib/utils'\nimport { Button } from './button'\n\nconst dialogContentVariants = cva(\n [\n 'bg-background ring-foreground/10 fixed top-1/2 left-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2 outline-none',\n 'flex flex-col gap-4 rounded-xl p-4 text-sm ring-1 duration-100',\n 'max-w-[calc(100%-2rem)] max-h-[calc(100dvh-2rem)] overflow-hidden',\n 'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95'\n ],\n {\n variants: {\n size: {\n sm: 'sm:max-w-sm',\n md: 'sm:max-w-md',\n lg: 'sm:max-w-lg',\n xl: 'sm:max-w-xl',\n '2xl': 'sm:max-w-2xl',\n '3xl': 'sm:max-w-3xl',\n full: 'w-screen h-screen max-w-none max-h-screen rounded-none sm:max-w-none'\n }\n },\n defaultVariants: {\n size: 'md'\n }\n }\n)\n\ntype DialogSize = NonNullable<VariantProps<typeof dialogContentVariants>['size']>\ntype
|
|
1
|
+
{"version":3,"file":"dialog.js","names":["DialogPrimitive"],"sources":["../../src/components/dialog.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 DialogPrimitive } from 'radix-ui'\n\nimport { cn } from '../lib/utils'\nimport { Button } from './button'\n\nconst dialogContentVariants = cva(\n [\n 'bg-background ring-foreground/10 fixed top-1/2 left-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2 outline-none',\n 'flex flex-col gap-4 rounded-xl p-4 text-sm ring-1 duration-100',\n 'max-w-[calc(100%-2rem)] max-h-[calc(100dvh-2rem)] overflow-hidden',\n 'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95'\n ],\n {\n variants: {\n size: {\n sm: 'sm:max-w-sm',\n md: 'sm:max-w-md',\n lg: 'sm:max-w-lg',\n xl: 'sm:max-w-xl',\n '2xl': 'sm:max-w-2xl',\n '3xl': 'sm:max-w-3xl',\n full: 'w-screen h-screen max-w-none max-h-screen rounded-none sm:max-w-none'\n }\n },\n defaultVariants: {\n size: 'md'\n }\n }\n)\n\ntype DialogSize = NonNullable<VariantProps<typeof dialogContentVariants>['size']>\ntype DialogContextValue = { size: DialogSize; dismissible: boolean }\nconst DialogContext = React.createContext<DialogContextValue>({ size: 'sm', dismissible: true })\n\nexport type DialogProps = React.ComponentProps<typeof DialogPrimitive.Root> & {\n size?: DialogSize\n dismissible?: boolean\n}\nexport type DialogTriggerProps = React.ComponentProps<typeof DialogPrimitive.Trigger>\nexport type DialogPortalProps = React.ComponentProps<typeof DialogPrimitive.Portal>\nexport type DialogCloseProps = React.ComponentProps<typeof DialogPrimitive.Close>\nexport type DialogOverlayProps = React.ComponentProps<typeof DialogPrimitive.Overlay>\nexport type DialogContentProps = React.ComponentProps<typeof DialogPrimitive.Content> & {\n showCloseButton?: boolean\n overlayRef?: React.Ref<HTMLDivElement>\n}\nexport type DialogHeaderProps = React.ComponentProps<'div'>\nexport type DialogBodyProps = React.ComponentProps<'div'>\nexport type DialogFooterProps = React.ComponentProps<'div'> & { showCloseButton?: boolean }\nexport type DialogTitleProps = React.ComponentProps<typeof DialogPrimitive.Title>\nexport type DialogDescriptionProps = React.ComponentProps<typeof DialogPrimitive.Description>\n\nfunction Dialog({ size = 'sm', dismissible = true, ...props }: DialogProps) {\n const contextValue = React.useMemo<DialogContextValue>(() => ({ size, dismissible }), [size, dismissible])\n\n return (\n <DialogContext.Provider value={contextValue}>\n <DialogPrimitive.Root data-slot=\"dialog\" {...props} />\n </DialogContext.Provider>\n )\n}\n\nfunction DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>) {\n return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />\n}\n\nfunction DialogPortal({ ...props }: DialogPortalProps) {\n return <DialogPrimitive.Portal data-slot=\"dialog-portal\" {...props} />\n}\n\nfunction DialogClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>) {\n return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />\n}\n\nfunction DialogOverlay({ className, ...props }: DialogOverlayProps) {\n return (\n <DialogPrimitive.Overlay\n data-slot=\"dialog-overlay\"\n className={cn(\n 'bg-black/10 fixed inset-0 isolate z-50',\n 'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0',\n 'duration-100 supports-backdrop-filter:backdrop-blur-xs',\n className\n )}\n {...props}\n />\n )\n}\n\nfunction DialogContent({ className, children, showCloseButton = true, overlayRef, ...props }: DialogContentProps) {\n const { size, dismissible } = React.useContext(DialogContext)\n\n return (\n <DialogPortal>\n <DialogOverlay ref={overlayRef} />\n <DialogPrimitive.Content\n data-slot=\"dialog-content\"\n className={cn(dialogContentVariants({ size }), 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 <DialogPrimitive.Close data-slot=\"dialog-close\" asChild>\n <Button variant=\"ghost\" className=\"absolute top-2 right-2\" size=\"icon-sm\">\n <IconX />\n <span className=\"sr-only\">Close</span>\n </Button>\n </DialogPrimitive.Close>\n )}\n </DialogPrimitive.Content>\n </DialogPortal>\n )\n}\n\nfunction DialogHeader({ className, ...props }: DialogHeaderProps) {\n return <div data-slot=\"dialog-header\" className={cn('gap-2 flex flex-col shrink-0', className)} {...props} />\n}\n\nfunction DialogBody({ className, ...props }: DialogBodyProps) {\n return <div data-slot=\"dialog-body\" className={cn('-mx-4 px-4 flex-1 overflow-y-auto', className)} {...props} />\n}\n\nfunction DialogFooter({ className, showCloseButton = false, children, ...props }: DialogFooterProps) {\n return (\n <div\n data-slot=\"dialog-footer\"\n className={cn(\n 'bg-muted/50 -mx-4 -mb-4 rounded-b-xl border-t p-4 shrink-0',\n 'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',\n className\n )}\n {...props}\n >\n {children}\n {showCloseButton && (\n <DialogPrimitive.Close asChild>\n <Button variant=\"outline\">Close</Button>\n </DialogPrimitive.Close>\n )}\n </div>\n )\n}\n\nfunction DialogTitle({ className, ...props }: DialogTitleProps) {\n return (\n <DialogPrimitive.Title\n data-slot=\"dialog-title\"\n className={cn('text-base leading-none font-medium', className)}\n {...props}\n />\n )\n}\n\nfunction DialogDescription({ className, ...props }: DialogDescriptionProps) {\n return (\n <DialogPrimitive.Description\n data-slot=\"dialog-description\"\n className={cn(\n 'text-muted-foreground text-sm',\n '*:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground',\n className\n )}\n {...props}\n />\n )\n}\n\nexport {\n Dialog,\n DialogBody,\n DialogClose,\n DialogContent,\n DialogDescription,\n DialogFooter,\n DialogHeader,\n DialogOverlay,\n DialogPortal,\n DialogTitle,\n DialogTrigger\n}\n"],"mappings":"8SASA,MAAM,EAAwB,EAC5B,CACE,qHACA,iEACA,oEACA,sIACF,EACA,CACE,SAAU,CACR,KAAM,CACJ,GAAI,cACJ,GAAI,cACJ,GAAI,cACJ,GAAI,cACJ,MAAO,eACP,MAAO,eACP,KAAM,sEACR,CACF,EACA,gBAAiB,CACf,KAAM,IACR,CACF,CACF,EAIM,EAAgB,EAAM,cAAkC,CAAE,KAAM,KAAM,YAAa,EAAK,CAAC,EAoB/F,SAAS,OAAO,CAAE,OAAO,KAAM,cAAc,GAAM,GAAG,GAAsB,CAC1E,IAAM,EAAe,EAAM,aAAmC,CAAE,OAAM,aAAY,GAAI,CAAC,EAAM,CAAW,CAAC,EAEzG,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,GAA+D,CACzF,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,GAA6D,CACrF,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,yCACA,0FACA,yDACA,CACF,EACA,GAAI,CACL,CAAA,CAEL,CAEA,SAAS,cAAc,CAAE,YAAW,WAAU,kBAAkB,GAAM,aAAY,GAAG,GAA6B,CAChH,GAAM,CAAE,OAAM,eAAgB,EAAM,WAAW,CAAa,EAE5D,OACE,EAAC,aAAD,CAAA,SAAA,CACE,EAAC,cAAD,CAAe,IAAK,CAAa,CAAA,EACjC,EAACA,EAAgB,QAAjB,CACE,YAAU,iBACV,UAAW,EAAG,EAAsB,CAAE,MAAK,CAAC,EAAG,CAAS,EACxD,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,EAACA,EAAgB,MAAjB,CAAuB,YAAU,eAAe,QAAA,YAC9C,EAAC,EAAD,CAAQ,QAAQ,QAAQ,UAAU,yBAAyB,KAAK,mBAAhE,CACE,EAAC,EAAD,CAAQ,CAAA,EACR,EAAC,OAAD,CAAM,UAAU,mBAAU,OAAW,CAAA,CAC/B,GACa,CAAA,CAEF,GACb,CAAA,CAAA,CAElB,CAEA,SAAS,aAAa,CAAE,YAAW,GAAG,GAA4B,CAChE,OAAO,EAAC,MAAD,CAAK,YAAU,gBAAgB,UAAW,EAAG,+BAAgC,CAAS,EAAG,GAAI,CAAQ,CAAA,CAC9G,CAEA,SAAS,WAAW,CAAE,YAAW,GAAG,GAA0B,CAC5D,OAAO,EAAC,MAAD,CAAK,YAAU,cAAc,UAAW,EAAG,oCAAqC,CAAS,EAAG,GAAI,CAAQ,CAAA,CACjH,CAEA,SAAS,aAAa,CAAE,YAAW,kBAAkB,GAAO,WAAU,GAAG,GAA4B,CACnG,OACE,EAAC,MAAD,CACE,YAAU,gBACV,UAAW,EACT,6DACA,yDACA,CACF,EACA,GAAI,WAPN,CASG,EACA,GACC,EAACA,EAAgB,MAAjB,CAAuB,QAAA,YACrB,EAAC,EAAD,CAAQ,QAAQ,mBAAU,OAAa,CAAA,CAClB,CAAA,CAEtB,GAET,CAEA,SAAS,YAAY,CAAE,YAAW,GAAG,GAA2B,CAC9D,OACE,EAACA,EAAgB,MAAjB,CACE,YAAU,eACV,UAAW,EAAG,qCAAsC,CAAS,EAC7D,GAAI,CACL,CAAA,CAEL,CAEA,SAAS,kBAAkB,CAAE,YAAW,GAAG,GAAiC,CAC1E,OACE,EAACA,EAAgB,YAAjB,CACE,YAAU,qBACV,UAAW,EACT,gCACA,uEACA,CACF,EACA,GAAI,CACL,CAAA,CAEL"}
|
|
@@ -5,7 +5,7 @@ import { Drawer as Drawer$1 } from "vaul";
|
|
|
5
5
|
|
|
6
6
|
//#region src/components/drawer.d.ts
|
|
7
7
|
declare const drawerContentVariants: (props?: ({
|
|
8
|
-
size?: "sm" | "md" | "lg" | "xl" | null | undefined;
|
|
8
|
+
size?: "sm" | "md" | "lg" | "xl" | "full" | "2xl" | "3xl" | null | undefined;
|
|
9
9
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
10
10
|
type DrawerSize = NonNullable<VariantProps<typeof drawerContentVariants>['size']>;
|
|
11
11
|
type DrawerProps = React.ComponentProps<typeof Drawer$1.Root> & {
|
|
@@ -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 r,jsxs as i}from"react/jsx-runtime";import{cva as a}from"class-variance-authority";import*as o from"react";import{Drawer as s}from"vaul";const c=a(`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`,{variants:{size:{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`,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`,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`,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-[
|
|
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 r,jsxs as i}from"react/jsx-runtime";import{cva as a}from"class-variance-authority";import*as o from"react";import{Drawer as s}from"vaul";const c=a(`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`,{variants:{size:{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`,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`,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`,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`,"2xl":`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`,"3xl":`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`,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`}},defaultVariants:{size:`md`}}),l=o.createContext({size:`sm`});function Drawer({size:e=`md`,...t}){let n=o.useMemo(()=>({size:e}),[e]);return r(l.Provider,{value:n,children:r(s.Root,{"data-slot":`drawer`,direction:`right`,handleOnly:!0,...t})})}function DrawerTrigger({...e}){return r(s.Trigger,{"data-slot":`drawer-trigger`,...e})}function DrawerPortal({...e}){return r(s.Portal,{"data-slot":`drawer-portal`,...e})}function DrawerClose({...e}){return r(s.Close,{"data-slot":`drawer-close`,...e})}function DrawerOverlay({className:t,...n}){return r(s.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:a,children:u,showCloseButton:d=!0,...f}){let{size:p}=o.useContext(l);return i(DrawerPortal,{"data-slot":`drawer-portal`,children:[r(DrawerOverlay,{}),i(s.Content,{"data-slot":`drawer-content`,className:e(c({size:p}),a),...f,children:[r(`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`}),u,d&&r(DrawerClose,{asChild:!0,children:i(t,{variant:`ghost`,className:`absolute top-3 right-3`,size:`icon-sm`,children:[r(n,{}),r(`span`,{className:`sr-only`,children:`Close`})]})})]})]})}function DrawerHeader({className:t,...n}){return r(`div`,{"data-slot":`drawer-header`,className:e(`p-4 flex flex-col gap-0.5 md:gap-0.5`,`group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center`,`group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:text-left`,t),...n})}function DrawerBody({className:t,...n}){return r(`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 r(`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 r(s.Title,{"data-slot":`drawer-title`,className:e(`text-foreground text-base font-medium`,t),...n})}function DrawerDescription({className:t,...n}){return r(s.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-[780px] data-[vaul-drawer-direction=right]:w-[90%] data-[vaul-drawer-direction=right]:sm:max-w-[780px]'\n }\n },\n defaultVariants: {\n size: 'sm'\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,6WACN,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 { 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"}
|
|
@@ -5,8 +5,8 @@ import * as React from "react";
|
|
|
5
5
|
//#region src/components/flex.d.ts
|
|
6
6
|
declare const flexVariants: (props?: ({
|
|
7
7
|
direction?: "row" | "row-reverse" | "column" | "column-reverse" | null | undefined;
|
|
8
|
-
align?: "
|
|
9
|
-
justify?: "
|
|
8
|
+
align?: "center" | "end" | "start" | "baseline" | "stretch" | null | undefined;
|
|
9
|
+
justify?: "center" | "end" | "start" | "between" | "around" | "evenly" | null | undefined;
|
|
10
10
|
wrap?: boolean | null | undefined;
|
|
11
11
|
gap?: "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
|
|
12
12
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
@@ -4,8 +4,8 @@ import * as React from "react";
|
|
|
4
4
|
|
|
5
5
|
//#region src/components/group.d.ts
|
|
6
6
|
declare const groupVariants: (props?: ({
|
|
7
|
-
align?: "
|
|
8
|
-
justify?: "
|
|
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
|
wrap?: boolean | null | undefined;
|
|
11
11
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
package/dist/components/group.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-row`,{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`},wrap:{true:`flex-wrap`,false:`flex-nowrap`}},defaultVariants:{align:`center`,gap:`md`,wrap:!1}});function Group({className:n,align:i=`center`,justify:a,gap:o=`md`,wrap:s=!
|
|
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-row`,{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`},wrap:{true:`flex-wrap`,false:`flex-nowrap`}},defaultVariants:{align:`center`,gap:`md`,wrap:!1}});function Group({className:n,align:i=`center`,justify:a,gap:o=`md`,wrap:s=!0,...c}){return t(`div`,{"data-slot":`group`,"data-align":i,"data-justify":a,"data-gap":o,"data-wrap":s?`true`:`false`,className:e(r({align:i,justify:a,gap:o,wrap:s}),n),...c})}export{Group,r as groupVariants};
|
|
2
2
|
//# sourceMappingURL=group.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"group.js","names":[],"sources":["../../src/components/group.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 groupVariants = cva('flex flex-row', {\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 wrap: {\n true: 'flex-wrap',\n false: 'flex-nowrap'\n }\n },\n defaultVariants: {\n align: 'center',\n gap: 'md',\n wrap: false\n }\n})\n\nexport type GroupProps = React.ComponentProps<'div'> & VariantProps<typeof groupVariants>\n\nfunction Group({ className, align = 'center', justify, gap = 'md', wrap =
|
|
1
|
+
{"version":3,"file":"group.js","names":[],"sources":["../../src/components/group.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 groupVariants = cva('flex flex-row', {\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 wrap: {\n true: 'flex-wrap',\n false: 'flex-nowrap'\n }\n },\n defaultVariants: {\n align: 'center',\n gap: 'md',\n wrap: false\n }\n})\n\nexport type GroupProps = React.ComponentProps<'div'> & VariantProps<typeof groupVariants>\n\nfunction Group({ className, align = 'center', justify, gap = 'md', wrap = true, ...props }: GroupProps) {\n return (\n <div\n data-slot=\"group\"\n data-align={align}\n data-justify={justify}\n data-gap={gap}\n data-wrap={wrap ? 'true' : 'false'}\n className={cn(groupVariants({ align, justify, gap, wrap }), className)}\n {...props}\n />\n )\n}\n\nexport { Group, groupVariants }\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,EACA,KAAM,CACJ,KAAM,YACN,MAAO,aACT,CACF,EACA,gBAAiB,CACf,MAAO,SACP,IAAK,KACL,KAAM,EACR,CACF,CAAC,EAID,SAAS,MAAM,CAAE,YAAW,QAAQ,SAAU,UAAS,MAAM,KAAM,OAAO,GAAM,GAAG,GAAqB,CACtG,OACE,EAAC,MAAD,CACE,YAAU,QACV,aAAY,EACZ,eAAc,EACd,WAAU,EACV,YAAW,EAAO,OAAS,QAC3B,UAAW,EAAG,EAAc,CAAE,QAAO,UAAS,MAAK,MAAK,CAAC,EAAG,CAAS,EACrE,GAAI,CACL,CAAA,CAEL"}
|
|
@@ -4,8 +4,8 @@ import * as React from "react";
|
|
|
4
4
|
|
|
5
5
|
//#region src/components/stack.d.ts
|
|
6
6
|
declare const stackVariants: (props?: ({
|
|
7
|
-
align?: "
|
|
8
|
-
justify?: "
|
|
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>;
|
package/dist/components/tabs.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import"../chunk-CHh1Zzun.js";import{cn as e}from"../lib/utils.js";import{Tabs as t}from"radix-ui";import{jsx as n}from"react/jsx-runtime";import{cva as r}from"class-variance-authority";function Tabs({className:r,orientation:i=`horizontal`,...a}){return n(t.Root,{"data-slot":`tabs`,"data-orientation":i,className:e(`group/tabs flex gap-2 data-horizontal:flex-col`,r),...a})}const i=r(`group/tabs-list inline-flex items-center justify-start rounded-lg h-fit group-data-horizontal/tabs:w-full group-data-vertical/tabs:w-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none`,{variants:{variant:{enclosed:`bg-muted p-0.75`,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`}},defaultVariants:{variant:`line`}});function TabsList({className:r,variant:a=`line`,grow:o=!1,...s}){return n(t.List,{"data-slot":`tabs-list`,"data-variant":a,"data-grow":o,className:e(i({variant:a}),r),...s})}function TabsTrigger({className:r,...i}){return n(t.Trigger,{"data-slot":`tabs-trigger`,className:e(`relative inline-flex 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`,`group-data-horizontal/tabs:group-data-[grow=true]/tabs-list:flex-1`,`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`,`group-data-[variant=line]/tabs-list:h-8 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`,`group-data-[variant=enclosed]/tabs-list:h-[calc(100%-1px)] 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`,r),...i})}function TabsContent({className:r,...i}){return n(t.Content,{"data-slot":`tabs-content`,className:e(`flex-1 text-sm outline-none`,r),...i})}export{Tabs,TabsContent,TabsList,TabsTrigger,i as tabsListVariants};
|
|
1
|
+
import"../chunk-CHh1Zzun.js";import{cn as e}from"../lib/utils.js";import{Tabs as t}from"radix-ui";import{jsx as n}from"react/jsx-runtime";import{cva as r}from"class-variance-authority";function Tabs({className:r,orientation:i=`horizontal`,...a}){return n(t.Root,{"data-slot":`tabs`,"data-orientation":i,className:e(`group/tabs flex gap-2 data-horizontal:flex-col`,r),...a})}const i=r(`group/tabs-list inline-flex items-center justify-start rounded-lg h-fit group-data-horizontal/tabs:flex-wrap group-data-horizontal/tabs:w-full group-data-vertical/tabs:w-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none`,{variants:{variant:{enclosed:`bg-muted p-0.75`,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`}},defaultVariants:{variant:`line`}});function TabsList({className:r,variant:a=`line`,grow:o=!1,...s}){return n(t.List,{"data-slot":`tabs-list`,"data-variant":a,"data-grow":o,className:e(i({variant:a}),r),...s})}function TabsTrigger({className:r,...i}){return n(t.Trigger,{"data-slot":`tabs-trigger`,className:e(`relative inline-flex 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`,`group-data-horizontal/tabs:group-data-[grow=true]/tabs-list:flex-1`,`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`,`group-data-[variant=line]/tabs-list:h-8 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`,`group-data-[variant=enclosed]/tabs-list:h-[calc(100%-1px)] 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`,r),...i})}function TabsContent({className:r,...i}){return n(t.Content,{"data-slot":`tabs-content`,className:e(`flex-1 text-sm outline-none`,r),...i})}export{Tabs,TabsContent,TabsList,TabsTrigger,i as tabsListVariants};
|
|
2
2
|
//# sourceMappingURL=tabs.js.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 h-fit group-data-horizontal/tabs:w-full 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 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-[variant=line]/tabs-list:h-8 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:h-[calc(100%-1px)] 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,
|
|
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 h-fit group-data-horizontal/tabs:flex-wrap group-data-horizontal/tabs:w-full 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 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-[variant=line]/tabs-list:h-8 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:h-[calc(100%-1px)] 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,mPACA,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,uoBACA,qEACA,2WACA,wOACA,6UACA,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"}
|
|
@@ -186,10 +186,10 @@ Unless noted otherwise, each module also exports its public `*Props` types from
|
|
|
186
186
|
|
|
187
187
|
- `dialog`
|
|
188
188
|
- Exports: `Dialog`, `DialogBody`, `DialogClose`, `DialogContent`, `DialogDescription`, `DialogFooter`, `DialogHeader`, `DialogOverlay`, `DialogPortal`, `DialogTitle`, `DialogTrigger`
|
|
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`
|
|
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'` 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`
|
|
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` (via Vaul); set it to `false` to prevent closing via dragging, outside click, and Esc (the close button and `DrawerClose` still work)
|
|
193
193
|
- `popover`
|
|
194
194
|
- Exports: `Popover`, `PopoverAnchor`, `PopoverContent`, `PopoverDescription`, `PopoverHeader`, `PopoverTitle`, `PopoverTrigger`
|
|
195
195
|
- `hover-card`
|
package/package.json
CHANGED
|
@@ -186,10 +186,10 @@ Unless noted otherwise, each module also exports its public `*Props` types from
|
|
|
186
186
|
|
|
187
187
|
- `dialog`
|
|
188
188
|
- Exports: `Dialog`, `DialogBody`, `DialogClose`, `DialogContent`, `DialogDescription`, `DialogFooter`, `DialogHeader`, `DialogOverlay`, `DialogPortal`, `DialogTitle`, `DialogTrigger`
|
|
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`
|
|
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'` 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`
|
|
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` (via Vaul); set it to `false` to prevent closing via dragging, outside click, and Esc (the close button and `DrawerClose` still work)
|
|
193
193
|
- `popover`
|
|
194
194
|
- Exports: `Popover`, `PopoverAnchor`, `PopoverContent`, `PopoverDescription`, `PopoverHeader`, `PopoverTitle`, `PopoverTrigger`
|
|
195
195
|
- `hover-card`
|