@uselets/ui 1.5.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 +5 -5
- package/dist/components/accordion.js +1 -1
- package/dist/components/accordion.js.map +1 -1
- package/dist/components/anchor.d.ts +1 -1
- package/dist/components/badge.d.ts +2 -2
- package/dist/components/button-group.d.ts +1 -1
- package/dist/components/button.d.ts +2 -2
- package/dist/components/button.js +1 -1
- package/dist/components/button.js.map +1 -1
- package/dist/components/center.d.ts +2 -2
- package/dist/components/dialog.d.ts +9 -2
- 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/dropzone.js +1 -1
- package/dist/components/dropzone.js.map +1 -1
- package/dist/components/empty.d.ts +1 -1
- package/dist/components/field.d.ts +1 -1
- package/dist/components/field.js +1 -1
- package/dist/components/field.js.map +1 -1
- package/dist/components/flex.d.ts +3 -3
- package/dist/components/group.d.ts +3 -3
- package/dist/components/group.js +1 -1
- package/dist/components/group.js.map +1 -1
- package/dist/components/heading.d.ts +1 -1
- package/dist/components/input-group.d.ts +1 -1
- package/dist/components/list.d.ts +2 -2
- package/dist/components/mask-input.d.ts +1 -0
- package/dist/components/mask-input.js +1 -1
- package/dist/components/mask-input.js.map +1 -1
- package/dist/components/sidebar.d.ts +1 -1
- package/dist/components/stack.d.ts +3 -3
- package/dist/components/table.d.ts +1 -1
- package/dist/components/tabs.js +1 -1
- package/dist/components/tabs.js.map +1 -1
- package/dist/components/text.d.ts +1 -1
- package/dist/components/timeline.d.ts +2 -2
- package/dist/index.d.ts +3 -2
- package/dist/index.js +1 -1
- package/dist/lib/compose-refs.d.ts +9 -0
- package/dist/lib/compose-refs.js +2 -0
- package/dist/lib/compose-refs.js.map +1 -0
- package/dist/skills/uselets-ui/references/component-catalog.md +9 -4
- package/dist/skills/uselets-ui/references/package-guide.md +1 -1
- package/package.json +1 -1
- package/skills/uselets-ui/references/component-catalog.md +9 -4
- package/skills/uselets-ui/references/package-guide.md +1 -1
package/README.md
CHANGED
|
@@ -319,7 +319,7 @@ You can import from the package root (`@uselets/ui`) or by subpath (`@uselets/ui
|
|
|
319
319
|
| `anchor` | `Anchor`, `anchorVariants` | Link primitive rendered as `<a>` with `size: 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`, `underline: 'always' \| 'hover' \| 'never' \| 'not-hover'` (default: `hover`), and `asChild`. |
|
|
320
320
|
| `avatar` | `Avatar`, `AvatarImage`, `AvatarFallback`, `AvatarBadge`, `AvatarGroup`, `AvatarGroupCount` | `Avatar` supports `size: 'sm' \| 'md' \| 'lg'` (default: `md`). |
|
|
321
321
|
| `badge` | `Badge`, `badgeVariants` | `size: 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` (default: `md`); `variant: 'solid' \| 'outline' \| 'subtle' \| 'ghost' \| 'link'` (default: `solid`); `color: UIColor` (default: `primary`); `asChild?: boolean`. |
|
|
322
|
-
| `button` | `Button`, `buttonVariants` | `variant: 'solid' \| 'outline' \| 'subtle' \| 'ghost' \| 'link'` (default: `solid`); `color: UIColor` (default: `primary`); `size: 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'icon-xs' \| 'icon-sm' \| 'icon' \| 'icon-lg' \| 'icon-xl'`; `loading?: boolean`. |
|
|
322
|
+
| `button` | `Button`, `buttonVariants` | `variant: 'solid' \| 'secondary' \| 'outline' \| 'subtle' \| 'ghost' \| 'link'` (default: `solid`); `color: UIColor` (default: `primary`); `size: 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'icon-xs' \| 'icon-sm' \| 'icon' \| 'icon-lg' \| 'icon-xl'`; `loading?: boolean`. |
|
|
323
323
|
| `unstyled-button` | `UnstyledButton` | Button primitive with reset styles, pointer cursor, accessible focus ring, default `type="button"`, and `asChild`. |
|
|
324
324
|
| `calendar` | `Calendar`, `CalendarDayButton` | Also exports the `DateRange` type. Weekends render with destructive text, week numbers are low-emphasis, and selected single/range endpoints use the `primary` palette with a subtle primary range fill. |
|
|
325
325
|
| `date-range-picker` | `DateRangePicker`, `DateRangePickerTrigger`, `DateRangePickerValue`, `DateRangePickerContent`, `DateRangePickerPresets`, `DateRangePickerPreset`, `DateRangePickerCalendar`, `DateRangePickerDateFields`, `DateRangePickerActions`, `DateRangePickerApply`, `DateRangePickerReset` | Compound popover picker backed by `Calendar` range mode. Draft edits from fixed presets, relative-day inputs, date inputs, and calendar stay in sync until `Apply`; reset/clear emits `null` through `onValueChange`. |
|
|
@@ -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`, `DialogFooter`, `DialogTitle`, `DialogDescription` | `Dialog` supports `size: 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl'` (default: `
|
|
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`). |
|
|
@@ -338,7 +338,7 @@ You can import from the package root (`@uselets/ui`) or by subpath (`@uselets/ui
|
|
|
338
338
|
| `heading` | `Heading`, `headingVariants` | Heading primitive with `size: 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` (default: `md`) and `asChild`. |
|
|
339
339
|
| `input` | `Input` | Wrapper for Base UI Input with all native `<input>` props. |
|
|
340
340
|
| `input-otp` | `InputOTP`, `InputOTPGroup`, `InputOTPSlot`, `InputOTPSeparator`, `REGEXP_ONLY_CHARS`, `REGEXP_ONLY_DIGITS`, `REGEXP_ONLY_DIGITS_AND_CHARS` | `InputOTP` supports all `input-otp` props plus `containerClassName`; use `maxLength` and `pattern` for validation. |
|
|
341
|
-
| `mask-input` | `MaskInput` | Formatted input backed by `@react-input/mask`. Accepts `mask` plus optional `replacement`, `showMask`, `separate`, `track`, `modify`. Default replacement tokens: `9` (digit), `a` (letter), `*` (any). The `useMask` hook is also exported from `@uselets/ui/hooks/use-mask` for custom inputs. |
|
|
341
|
+
| `mask-input` | `MaskInput` | Formatted input backed by `@react-input/mask`. Accepts `mask` plus optional `replacement`, `showMask`, `separate`, `track`, `modify`. Default replacement tokens: `9` (digit), `a` (letter), `*` (any). Forwards an external `ref` prop to the underlying `<input>`, composed with the mask ref. The `useMask` hook is also exported from `@uselets/ui/hooks/use-mask` for custom inputs. |
|
|
342
342
|
| `kbd` | `Kbd`, `KbdGroup` | Keyboard shortcut presentation primitives. |
|
|
343
343
|
| `label` | `Label` | Styled `<label>` wrapper. |
|
|
344
344
|
| `list` | `List`, `ListItem`, `ListIcon`, `listVariants` | `List.type: 'unordered' \| 'ordered'`; `size` and `spacing` use the `xs` to `xl` scale; `ListIcon` can use `asChild` and replaces the default marker with a primary-colored icon. |
|
|
@@ -406,7 +406,7 @@ const [draft, setDraft] = useLocalStorage('draft', {
|
|
|
406
406
|
})
|
|
407
407
|
```
|
|
408
408
|
|
|
409
|
-
Utilities are exported from the package root and `@uselets/ui/utils`, including `cn` and `randomId`.
|
|
409
|
+
Utilities are exported from the package root and `@uselets/ui/utils`, including `cn` and `randomId`. The package also exports `composeRefs` (and `setRef`) from `@uselets/ui/lib/compose-refs` for composing multiple refs into a single callback ref — handy when a component needs to merge a forwarded `ref` with an internal one (for example `MaskInput`).
|
|
410
410
|
|
|
411
411
|
### Sonner example
|
|
412
412
|
|
|
@@ -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"}
|
|
@@ -4,7 +4,7 @@ import * as React from "react";
|
|
|
4
4
|
|
|
5
5
|
//#region src/components/anchor.d.ts
|
|
6
6
|
declare const anchorVariants: (props?: ({
|
|
7
|
-
size?: "
|
|
7
|
+
size?: "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
|
|
8
8
|
underline?: "always" | "hover" | "never" | "not-hover" | null | undefined;
|
|
9
9
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
10
10
|
type AnchorProps = React.ComponentProps<'a'> & VariantProps<typeof anchorVariants> & {
|
|
@@ -4,8 +4,8 @@ import * as React from "react";
|
|
|
4
4
|
|
|
5
5
|
//#region src/components/badge.d.ts
|
|
6
6
|
declare const badgeVariants: (props?: ({
|
|
7
|
-
size?: "
|
|
8
|
-
variant?: "
|
|
7
|
+
size?: "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
|
|
8
|
+
variant?: "solid" | "outline" | "subtle" | "ghost" | "link" | null | undefined;
|
|
9
9
|
color?: "primary" | "brand" | "gray" | "zinc" | "red" | "yellow" | "blue" | "indigo" | "pink" | "green" | null | undefined;
|
|
10
10
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
11
11
|
type BadgeProps = React.ComponentProps<'span'> & VariantProps<typeof badgeVariants> & {
|
|
@@ -4,7 +4,7 @@ import { VariantProps } from "class-variance-authority";
|
|
|
4
4
|
|
|
5
5
|
//#region src/components/button-group.d.ts
|
|
6
6
|
declare const buttonGroupVariants: (props?: ({
|
|
7
|
-
orientation?: "
|
|
7
|
+
orientation?: "horizontal" | "vertical" | null | undefined;
|
|
8
8
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
9
9
|
type ButtonGroupProps = React.ComponentProps<'div'> & VariantProps<typeof buttonGroupVariants>;
|
|
10
10
|
type ButtonGroupTextProps = React.ComponentProps<'div'> & {
|
|
@@ -4,9 +4,9 @@ import * as React from "react";
|
|
|
4
4
|
|
|
5
5
|
//#region src/components/button.d.ts
|
|
6
6
|
declare const buttonVariants: (props?: ({
|
|
7
|
-
variant?: "
|
|
7
|
+
variant?: "solid" | "outline" | "subtle" | "ghost" | "link" | "secondary" | null | undefined;
|
|
8
8
|
color?: "primary" | "brand" | "gray" | "zinc" | "red" | "yellow" | "blue" | "indigo" | "pink" | "green" | null | undefined;
|
|
9
|
-
size?: "
|
|
9
|
+
size?: "xs" | "sm" | "md" | "lg" | "xl" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | "icon-xl" | null | undefined;
|
|
10
10
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
11
11
|
type ButtonProps = React.ComponentProps<'button'> & VariantProps<typeof buttonVariants> & {
|
|
12
12
|
asChild?: boolean;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import"../chunk-CHh1Zzun.js";import{cn as e}from"../lib/utils.js";import{buttonColorVariants as t}from"../lib/button.js";import{Spinner as n}from"./spinner.js";import{Slot as r}from"radix-ui";import{Fragment as i,jsx as a,jsxs as o}from"react/jsx-runtime";import{cva as s}from"class-variance-authority";const c=s(`focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 relative rounded-full border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all [&_svg]:transition-colors disabled:pointer-events-none disabled:opacity-50 disabled:data-[loading=true]:pointer-events-auto disabled:data-[loading=true]:cursor-not-allowed disabled:data-[loading=true]:opacity-100 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none`,{variants:{variant:{solid:`bg-(--button-solid) text-(--button-solid-foreground) hover:bg-(--button-solid-hover) data-[loading=true]:hover:bg-(--button-solid)`,outline:`border-(--button-outline-border) bg-transparent text-(--button-outline-foreground) hover:bg-(--button-solid) hover:text-(--button-solid-foreground) hover:[&_svg]:text-(--button-solid-foreground) data-[loading=true]:hover:bg-background data-[loading=true]:hover:text-(--button-outline-foreground) aria-expanded:bg-(--button-solid) aria-expanded:text-(--button-solid-foreground) aria-expanded:[&_svg]:text-(--button-solid-foreground)`,subtle:`bg-(--button-soft) text-(--button-soft-foreground) hover:bg-(--button-soft-hover) hover:text-(--button-soft-foreground) data-[loading=true]:hover:bg-(--button-soft) data-[loading=true]:hover:text-(--button-soft-foreground) aria-expanded:bg-(--button-soft-hover) aria-expanded:text-(--button-soft-foreground)`,ghost:`text-(--button-ghost-foreground) hover:bg-(--button-ghost-hover) hover:text-(--button-ghost-foreground) data-[loading=true]:hover:bg-transparent data-[loading=true]:hover:text-(--button-ghost-foreground) aria-expanded:bg-(--button-ghost-hover) aria-expanded:text-(--button-ghost-foreground)`,link:`text-(--button-link-foreground) underline-offset-4 hover:underline data-[loading=true]:hover:no-underline`},color:t,size:{xs:`h-7 gap-1 px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3`,sm:`h-8 gap-1 px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5`,md:`h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2`,lg:`h-10 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3`,xl:`h-11 gap-2 px-3 has-data-[icon=inline-end]:pr-4 has-data-[icon=inline-start]:pl-4`,icon:`size-9`,"icon-xs":`size-7 in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3`,"icon-sm":`size-8 in-data-[slot=button-group]:rounded-lg`,"icon-lg":`size-10`,"icon-xl":`size-11`}},defaultVariants:{variant:`solid`,color:`primary`,size:`md`}});function Button({children:t,className:s,variant:l=`solid`,color:u=`primary`,size:d=`md`,asChild:f=!1,disabled:p,loading:m=!1,...h}){return a(f?r.Root:`button`,{type:f?void 0:`button`,"data-slot":`button`,"data-variant":l,"data-color":u,"data-size":d,"data-loading":m,"aria-busy":m?!0:void 0,disabled:p||m,className:e(c({variant:l,color:u,size:d,className:s})),...h,children:m&&!f?o(i,{children:[a(`span`,{className:`invisible inline-flex items-center gap-[inherit]`,children:t}),a(`span`,{className:`absolute inset-0 inline-flex items-center justify-center`,children:a(n,{})})]}):m?a(n,{}):t})}export{Button,c as buttonVariants};
|
|
1
|
+
import"../chunk-CHh1Zzun.js";import{cn as e}from"../lib/utils.js";import{buttonColorVariants as t}from"../lib/button.js";import{Spinner as n}from"./spinner.js";import{Slot as r}from"radix-ui";import{Fragment as i,jsx as a,jsxs as o}from"react/jsx-runtime";import{cva as s}from"class-variance-authority";const c=s(`focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 relative rounded-full border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all [&_svg]:transition-colors disabled:pointer-events-none disabled:opacity-50 disabled:data-[loading=true]:pointer-events-auto disabled:data-[loading=true]:cursor-not-allowed disabled:data-[loading=true]:opacity-100 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none`,{variants:{variant:{solid:`bg-(--button-solid) text-(--button-solid-foreground) hover:bg-(--button-solid-hover) data-[loading=true]:hover:bg-(--button-solid)`,secondary:`border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50`,outline:`border-(--button-outline-border) bg-transparent text-(--button-outline-foreground) hover:bg-(--button-solid) hover:text-(--button-solid-foreground) hover:[&_svg]:text-(--button-solid-foreground) data-[loading=true]:hover:bg-background data-[loading=true]:hover:text-(--button-outline-foreground) aria-expanded:bg-(--button-solid) aria-expanded:text-(--button-solid-foreground) aria-expanded:[&_svg]:text-(--button-solid-foreground)`,subtle:`bg-(--button-soft) text-(--button-soft-foreground) hover:bg-(--button-soft-hover) hover:text-(--button-soft-foreground) data-[loading=true]:hover:bg-(--button-soft) data-[loading=true]:hover:text-(--button-soft-foreground) aria-expanded:bg-(--button-soft-hover) aria-expanded:text-(--button-soft-foreground)`,ghost:`text-(--button-ghost-foreground) hover:bg-(--button-ghost-hover) hover:text-(--button-ghost-foreground) data-[loading=true]:hover:bg-transparent data-[loading=true]:hover:text-(--button-ghost-foreground) aria-expanded:bg-(--button-ghost-hover) aria-expanded:text-(--button-ghost-foreground)`,link:`text-(--button-link-foreground) underline-offset-4 hover:underline data-[loading=true]:hover:no-underline`},color:t,size:{xs:`h-7 gap-1 px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3`,sm:`h-8 gap-1 px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5`,md:`h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2`,lg:`h-10 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3`,xl:`h-11 gap-2 px-3 has-data-[icon=inline-end]:pr-4 has-data-[icon=inline-start]:pl-4`,icon:`size-9`,"icon-xs":`size-7 in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3`,"icon-sm":`size-8 in-data-[slot=button-group]:rounded-lg`,"icon-lg":`size-10`,"icon-xl":`size-11`}},defaultVariants:{variant:`solid`,color:`primary`,size:`md`}});function Button({children:t,className:s,variant:l=`solid`,color:u=`primary`,size:d=`md`,asChild:f=!1,disabled:p,loading:m=!1,...h}){return a(f?r.Root:`button`,{type:f?void 0:`button`,"data-slot":`button`,"data-variant":l,"data-color":u,"data-size":d,"data-loading":m,"aria-busy":m?!0:void 0,disabled:p||m,className:e(c({variant:l,color:u,size:d,className:s})),...h,children:m&&!f?o(i,{children:[a(`span`,{className:`invisible inline-flex items-center gap-[inherit]`,children:t}),a(`span`,{className:`absolute inset-0 inline-flex items-center justify-center`,children:a(n,{})})]}):m?a(n,{}):t})}export{Button,c as buttonVariants};
|
|
2
2
|
//# sourceMappingURL=button.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.js","names":[],"sources":["../../src/components/button.tsx"],"sourcesContent":["import type * as React from 'react'\n\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { Slot } from 'radix-ui'\n\nimport { buttonColorVariants } from '../lib/button'\nimport { cn } from '../lib/utils'\nimport { Spinner } from './spinner'\n\nconst buttonVariants = cva(\n \"focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 relative rounded-full border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all [&_svg]:transition-colors disabled:pointer-events-none disabled:opacity-50 disabled:data-[loading=true]:pointer-events-auto disabled:data-[loading=true]:cursor-not-allowed disabled:data-[loading=true]:opacity-100 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none\",\n {\n variants: {\n variant: {\n solid:\n 'bg-(--button-solid) text-(--button-solid-foreground) hover:bg-(--button-solid-hover) data-[loading=true]:hover:bg-(--button-solid)',\n outline:\n 'border-(--button-outline-border) bg-transparent text-(--button-outline-foreground) hover:bg-(--button-solid) hover:text-(--button-solid-foreground) hover:[&_svg]:text-(--button-solid-foreground) data-[loading=true]:hover:bg-background data-[loading=true]:hover:text-(--button-outline-foreground) aria-expanded:bg-(--button-solid) aria-expanded:text-(--button-solid-foreground) aria-expanded:[&_svg]:text-(--button-solid-foreground)',\n subtle:\n 'bg-(--button-soft) text-(--button-soft-foreground) hover:bg-(--button-soft-hover) hover:text-(--button-soft-foreground) data-[loading=true]:hover:bg-(--button-soft) data-[loading=true]:hover:text-(--button-soft-foreground) aria-expanded:bg-(--button-soft-hover) aria-expanded:text-(--button-soft-foreground)',\n ghost:\n 'text-(--button-ghost-foreground) hover:bg-(--button-ghost-hover) hover:text-(--button-ghost-foreground) data-[loading=true]:hover:bg-transparent data-[loading=true]:hover:text-(--button-ghost-foreground) aria-expanded:bg-(--button-ghost-hover) aria-expanded:text-(--button-ghost-foreground)',\n link: 'text-(--button-link-foreground) underline-offset-4 hover:underline data-[loading=true]:hover:no-underline'\n },\n color: buttonColorVariants,\n size: {\n xs: \"h-7 gap-1 px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3\",\n sm: \"h-8 gap-1 px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5\",\n md: 'h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',\n lg: 'h-10 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3',\n xl: 'h-11 gap-2 px-3 has-data-[icon=inline-end]:pr-4 has-data-[icon=inline-start]:pl-4',\n icon: 'size-9',\n 'icon-xs': \"size-7 in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3\",\n 'icon-sm': 'size-8 in-data-[slot=button-group]:rounded-lg',\n 'icon-lg': 'size-10',\n 'icon-xl': 'size-11'\n }\n },\n defaultVariants: {\n variant: 'solid',\n color: 'primary',\n size: 'md'\n }\n }\n)\n\nexport type ButtonProps = React.ComponentProps<'button'> &\n VariantProps<typeof buttonVariants> & {\n asChild?: boolean\n loading?: boolean\n }\n\nfunction Button({\n children,\n className,\n variant = 'solid',\n color = 'primary',\n size = 'md',\n asChild = false,\n disabled,\n loading = false,\n ...props\n}: ButtonProps) {\n const Comp = asChild ? Slot.Root : 'button'\n const isDisabled = disabled || loading\n\n return (\n <Comp\n type={!asChild ? 'button' : undefined}\n data-slot=\"button\"\n data-variant={variant}\n data-color={color}\n data-size={size}\n data-loading={loading}\n aria-busy={loading ? true : undefined}\n disabled={isDisabled}\n className={cn(buttonVariants({ variant, color, size, className }))}\n {...props}\n >\n {loading && !asChild ? (\n <>\n <span className=\"invisible inline-flex items-center gap-[inherit]\">{children}</span>\n <span className=\"absolute inset-0 inline-flex items-center justify-center\">\n <Spinner />\n </span>\n </>\n ) : loading ? (\n <Spinner />\n ) : (\n children\n )}\n </Comp>\n )\n}\n\nexport { Button, buttonVariants }\n"],"mappings":"+SASA,MAAM,EAAiB,EACrB,kuBACA,CACE,SAAU,CACR,QAAS,CACP,MACE,qIACF,QACE,kbACF,OACE,sTACF,MACE,qSACF,KAAM,2GACR,EACA,MAAO,EACP,KAAM,CACJ,GAAI,2KACJ,GAAI,qLACJ,GAAI,8HACJ,GAAI,wFACJ,GAAI,oFACJ,KAAM,SACN,UAAW,qFACX,UAAW,gDACX,UAAW,UACX,UAAW,SACb,CACF,EACA,gBAAiB,CACf,QAAS,QACT,MAAO,UACP,KAAM,IACR,CACF,CACF,EAQA,SAAS,OAAO,CACd,WACA,YACA,UAAU,QACV,QAAQ,UACR,OAAO,KACP,UAAU,GACV,WACA,UAAU,GACV,GAAG,GACW,CAId,OACE,EAJW,EAAU,EAAK,KAAO,SAIjC,CACE,KAAO,EAAqB,IAAA,GAAX,SACjB,YAAU,SACV,eAAc,EACd,aAAY,EACZ,YAAW,EACX,eAAc,EACd,YAAW,EAAU,GAAO,IAAA,GAC5B,SAXe,GAAY,EAY3B,UAAW,EAAG,EAAe,CAAE,UAAS,QAAO,OAAM,WAAU,CAAC,CAAC,EACjE,GAAI,WAEH,GAAW,CAAC,EACX,EAAA,EAAA,CAAA,SAAA,CACE,EAAC,OAAD,CAAM,UAAU,mDAAoD,UAAe,CAAA,EACnF,EAAC,OAAD,CAAM,UAAU,oEACd,EAAC,EAAD,CAAU,CAAA,CACN,CAAA,CACN,CAAA,CAAA,EACA,EACF,EAAC,EAAD,CAAU,CAAA,EAEV,CAEE,CAAA,CAEV"}
|
|
1
|
+
{"version":3,"file":"button.js","names":[],"sources":["../../src/components/button.tsx"],"sourcesContent":["import type * as React from 'react'\n\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { Slot } from 'radix-ui'\n\nimport { buttonColorVariants } from '../lib/button'\nimport { cn } from '../lib/utils'\nimport { Spinner } from './spinner'\n\nconst buttonVariants = cva(\n \"focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 relative rounded-full border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all [&_svg]:transition-colors disabled:pointer-events-none disabled:opacity-50 disabled:data-[loading=true]:pointer-events-auto disabled:data-[loading=true]:cursor-not-allowed disabled:data-[loading=true]:opacity-100 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none\",\n {\n variants: {\n variant: {\n solid:\n 'bg-(--button-solid) text-(--button-solid-foreground) hover:bg-(--button-solid-hover) data-[loading=true]:hover:bg-(--button-solid)',\n secondary:\n 'border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50',\n outline:\n 'border-(--button-outline-border) bg-transparent text-(--button-outline-foreground) hover:bg-(--button-solid) hover:text-(--button-solid-foreground) hover:[&_svg]:text-(--button-solid-foreground) data-[loading=true]:hover:bg-background data-[loading=true]:hover:text-(--button-outline-foreground) aria-expanded:bg-(--button-solid) aria-expanded:text-(--button-solid-foreground) aria-expanded:[&_svg]:text-(--button-solid-foreground)',\n subtle:\n 'bg-(--button-soft) text-(--button-soft-foreground) hover:bg-(--button-soft-hover) hover:text-(--button-soft-foreground) data-[loading=true]:hover:bg-(--button-soft) data-[loading=true]:hover:text-(--button-soft-foreground) aria-expanded:bg-(--button-soft-hover) aria-expanded:text-(--button-soft-foreground)',\n ghost:\n 'text-(--button-ghost-foreground) hover:bg-(--button-ghost-hover) hover:text-(--button-ghost-foreground) data-[loading=true]:hover:bg-transparent data-[loading=true]:hover:text-(--button-ghost-foreground) aria-expanded:bg-(--button-ghost-hover) aria-expanded:text-(--button-ghost-foreground)',\n link: 'text-(--button-link-foreground) underline-offset-4 hover:underline data-[loading=true]:hover:no-underline'\n },\n color: buttonColorVariants,\n size: {\n xs: \"h-7 gap-1 px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3\",\n sm: \"h-8 gap-1 px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5\",\n md: 'h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',\n lg: 'h-10 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3',\n xl: 'h-11 gap-2 px-3 has-data-[icon=inline-end]:pr-4 has-data-[icon=inline-start]:pl-4',\n icon: 'size-9',\n 'icon-xs': \"size-7 in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3\",\n 'icon-sm': 'size-8 in-data-[slot=button-group]:rounded-lg',\n 'icon-lg': 'size-10',\n 'icon-xl': 'size-11'\n }\n },\n defaultVariants: {\n variant: 'solid',\n color: 'primary',\n size: 'md'\n }\n }\n)\n\nexport type ButtonProps = React.ComponentProps<'button'> &\n VariantProps<typeof buttonVariants> & {\n asChild?: boolean\n loading?: boolean\n }\n\nfunction Button({\n children,\n className,\n variant = 'solid',\n color = 'primary',\n size = 'md',\n asChild = false,\n disabled,\n loading = false,\n ...props\n}: ButtonProps) {\n const Comp = asChild ? Slot.Root : 'button'\n const isDisabled = disabled || loading\n\n return (\n <Comp\n type={!asChild ? 'button' : undefined}\n data-slot=\"button\"\n data-variant={variant}\n data-color={color}\n data-size={size}\n data-loading={loading}\n aria-busy={loading ? true : undefined}\n disabled={isDisabled}\n className={cn(buttonVariants({ variant, color, size, className }))}\n {...props}\n >\n {loading && !asChild ? (\n <>\n <span className=\"invisible inline-flex items-center gap-[inherit]\">{children}</span>\n <span className=\"absolute inset-0 inline-flex items-center justify-center\">\n <Spinner />\n </span>\n </>\n ) : loading ? (\n <Spinner />\n ) : (\n children\n )}\n </Comp>\n )\n}\n\nexport { Button, buttonVariants }\n"],"mappings":"+SASA,MAAM,EAAiB,EACrB,kuBACA,CACE,SAAU,CACR,QAAS,CACP,MACE,qIACF,UACE,kLACF,QACE,kbACF,OACE,sTACF,MACE,qSACF,KAAM,2GACR,EACA,MAAO,EACP,KAAM,CACJ,GAAI,2KACJ,GAAI,qLACJ,GAAI,8HACJ,GAAI,wFACJ,GAAI,oFACJ,KAAM,SACN,UAAW,qFACX,UAAW,gDACX,UAAW,UACX,UAAW,SACb,CACF,EACA,gBAAiB,CACf,QAAS,QACT,MAAO,UACP,KAAM,IACR,CACF,CACF,EAQA,SAAS,OAAO,CACd,WACA,YACA,UAAU,QACV,QAAQ,UACR,OAAO,KACP,UAAU,GACV,WACA,UAAU,GACV,GAAG,GACW,CAId,OACE,EAJW,EAAU,EAAK,KAAO,SAIjC,CACE,KAAO,EAAqB,IAAA,GAAX,SACjB,YAAU,SACV,eAAc,EACd,aAAY,EACZ,YAAW,EACX,eAAc,EACd,YAAW,EAAU,GAAO,IAAA,GAC5B,SAXe,GAAY,EAY3B,UAAW,EAAG,EAAe,CAAE,UAAS,QAAO,OAAM,WAAU,CAAC,CAAC,EACjE,GAAI,WAEH,GAAW,CAAC,EACX,EAAA,EAAA,CAAA,SAAA,CACE,EAAC,OAAD,CAAM,UAAU,mDAAoD,UAAe,CAAA,EACnF,EAAC,OAAD,CAAM,UAAU,oEACd,EAAC,EAAD,CAAU,CAAA,CACN,CAAA,CACN,CAAA,CAAA,EACA,EACF,EAAC,EAAD,CAAU,CAAA,EAEV,CAEE,CAAA,CAEV"}
|
|
@@ -4,8 +4,8 @@ import * as React from "react";
|
|
|
4
4
|
|
|
5
5
|
//#region src/components/center.d.ts
|
|
6
6
|
declare const centerVariants: (props?: ({
|
|
7
|
-
direction?: "
|
|
8
|
-
size?: "
|
|
7
|
+
direction?: "horizontal" | "vertical" | null | undefined;
|
|
8
|
+
size?: "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
|
|
9
9
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
10
10
|
type CenterProps = React.ComponentProps<'div'> & VariantProps<typeof centerVariants>;
|
|
11
11
|
declare function Center({
|
|
@@ -5,11 +5,12 @@ import * as React from "react";
|
|
|
5
5
|
|
|
6
6
|
//#region src/components/dialog.d.ts
|
|
7
7
|
declare const dialogContentVariants: (props?: ({
|
|
8
|
-
size?: "sm" | "md" | "lg" | "xl" | "2xl" | 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 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>;
|
|
@@ -20,6 +21,7 @@ type DialogContentProps = React.ComponentProps<typeof Dialog$1.Content> & {
|
|
|
20
21
|
overlayRef?: React.Ref<HTMLDivElement>;
|
|
21
22
|
};
|
|
22
23
|
type DialogHeaderProps = React.ComponentProps<'div'>;
|
|
24
|
+
type DialogBodyProps = React.ComponentProps<'div'>;
|
|
23
25
|
type DialogFooterProps = React.ComponentProps<'div'> & {
|
|
24
26
|
showCloseButton?: boolean;
|
|
25
27
|
};
|
|
@@ -27,6 +29,7 @@ type DialogTitleProps = React.ComponentProps<typeof Dialog$1.Title>;
|
|
|
27
29
|
type DialogDescriptionProps = React.ComponentProps<typeof Dialog$1.Description>;
|
|
28
30
|
declare function Dialog({
|
|
29
31
|
size,
|
|
32
|
+
dismissible,
|
|
30
33
|
...props
|
|
31
34
|
}: DialogProps): import("react/jsx-runtime").JSX.Element;
|
|
32
35
|
declare function DialogTrigger({
|
|
@@ -53,6 +56,10 @@ declare function DialogHeader({
|
|
|
53
56
|
className,
|
|
54
57
|
...props
|
|
55
58
|
}: DialogHeaderProps): import("react/jsx-runtime").JSX.Element;
|
|
59
|
+
declare function DialogBody({
|
|
60
|
+
className,
|
|
61
|
+
...props
|
|
62
|
+
}: DialogBodyProps): import("react/jsx-runtime").JSX.Element;
|
|
56
63
|
declare function DialogFooter({
|
|
57
64
|
className,
|
|
58
65
|
showCloseButton,
|
|
@@ -68,5 +75,5 @@ declare function DialogDescription({
|
|
|
68
75
|
...props
|
|
69
76
|
}: DialogDescriptionProps): import("react/jsx-runtime").JSX.Element;
|
|
70
77
|
//#endregion
|
|
71
|
-
export { Dialog, DialogClose, DialogCloseProps, DialogContent, DialogContentProps, DialogDescription, DialogDescriptionProps, DialogFooter, DialogFooterProps, DialogHeader, DialogHeaderProps, DialogOverlay, DialogOverlayProps, DialogPortal, DialogPortalProps, DialogProps, DialogTitle, DialogTitleProps, DialogTrigger, DialogTriggerProps };
|
|
78
|
+
export { Dialog, DialogBody, DialogBodyProps, DialogClose, DialogCloseProps, DialogContent, DialogContentProps, DialogDescription, DialogDescriptionProps, DialogFooter, DialogFooterProps, DialogHeader, DialogHeaderProps, DialogOverlay, DialogOverlayProps, DialogPortal, DialogPortalProps, DialogProps, DialogTitle, DialogTitleProps, DialogTrigger, DialogTriggerProps };
|
|
72
79
|
//# sourceMappingURL=dialog.d.ts.map
|
|
@@ -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
|
|
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 'bg-background
|
|
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"}
|
|
@@ -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{jsx as
|
|
1
|
+
import"../chunk-CHh1Zzun.js";import{cn as e}from"../lib/utils.js";import{Button as t}from"./button.js";import{composeRefs as n}from"../lib/compose-refs.js";import{jsx as r,jsxs as i}from"react/jsx-runtime";import*as a from"react";import{ErrorCode as o,useDropzone as s}from"react-dropzone";const c=[o.FileInvalidType,o.FileTooLarge,o.FileTooSmall,o.TooManyFiles],l=new Set(c),u={pending:`indeterminate`,success:`100%`,error:`error`},d=a.createContext(null),f=a.createContext(null);function fileStatusReducer(e,t){switch(t.type){case`add`:return[...e,{id:t.id,fileName:t.fileName,file:t.file,status:`pending`,tries:1}];case`remove`:return e.filter(e=>e.id!==t.id);case`update-status`:return e.map(e=>e.id===t.id?t.status===`pending`?{...e,status:`pending`,error:void 0,message:void 0,result:void 0,tries:e.tries+1}:t.status===`error`?{...e,status:`error`,error:t.error,message:t.message,result:void 0}:{...e,status:`success`,result:t.result,error:void 0,message:void 0}:e)}}function formatAcceptedTypes(e){if(!e)return;let t=Object.entries(e).flatMap(([e,t])=>t.length>0?t:[e]);return t.length>0?t.join(`, `):void 0}function getDropzoneErrorCodes(e){let t=e.flatMap(e=>e.errors.map(e=>e.code).filter(e=>l.has(e)));return Array.from(new Set(t))}function getRootError(e,t){let n=e.flatMap(e=>{switch(e){case`file-invalid-type`:{let e=formatAcceptedTypes(t.accept);return e?[`only ${e} files are allowed`]:[`this file type is not allowed`]}case`file-too-large`:return t.maxSize?[`max size is ${(t.maxSize/(1024*1024)).toFixed(2)} MB`]:[`this file is too large`];case`file-too-small`:return t.minSize?[`min size is ${(t.minSize/(1024*1024)).toFixed(2)} MB`]:[`this file is too small`];case`too-many-files`:return t.maxFiles?[`max ${t.maxFiles} files`]:[`too many files`];default:return[]}});if(n.length===0)return`Unable to add the selected files`;let[r,...i]=n;return`${r.charAt(0).toUpperCase()}${r.slice(1)}${i.length>0?`, ${i.join(`, `)}`:``}`}function getRejectionMessage(e,t){let n=getDropzoneErrorCodes(e);return n.length>0?getRootError(n,t):e[0]?.errors[0]?.message??`Unable to add the selected files`}function getUploadErrorMessage(e,t){if(t){let n=t(e);if(n!==void 0)return n}if(typeof e==`string`)return e;if(e instanceof Error)return e.message}function useDropzoneContext(){let e=a.useContext(d);if(!e)throw Error(`Dropzone components must be used within a Dropzone.`);return e}function useDropzoneFileListContext(){let e=a.useContext(f);if(!e)throw Error(`Dropzone file actions must be used within a DropzoneFileListItem.`);return e}function useDropzone(e){let{onDropFile:t,onRemoveFile:n,shapeUploadError:r,onFileUploaded:i,onFileUploadError:c,onAllUploaded:l,onRootError:u,maxRetryCount:d,autoRetry:f=!1,validation:p,shiftOnMaxFiles:m=!1}=e,h=a.useId(),g=`${h}-message`,_=`${h}-description`,[v,y]=a.useState(void 0),b=a.useCallback(e=>{y(e),u?.(e)},[u]),[x,S]=a.useReducer(fileStatusReducer,[]),C=a.useCallback(e=>`${h}-${e}-message`,[h]),w=a.useMemo(()=>v!==void 0||x.some(e=>e.status===`error`),[x,v]),T=a.useCallback(async(e,n,a=0)=>{try{let o=await t(e);if(o.status===`error`){if(f&&a<(d??1/0))return S({type:`update-status`,id:n,status:`pending`}),T(e,n,a+1);S({type:`update-status`,id:n,status:`error`,error:o.error,message:getUploadErrorMessage(o.error,r)}),c?.(o.error);return}S({type:`update-status`,id:n,status:`success`,result:o.result}),i?.(o.result)}catch(e){let t=e;S({type:`update-status`,id:n,status:`error`,error:t,message:getUploadErrorMessage(t,r)}),c?.(t)}},[f,t,d,c,i,r]),E=a.useCallback(async e=>{await n?.(e),S({type:`remove`,id:e})},[n]),D=a.useCallback(e=>{let t=x.find(t=>t.id===e);return t?.status===`error`&&t.tries<=(d??1/0)},[x,d]),O=a.useCallback(async e=>{if(!D(e))return;let t=x.find(t=>t.id===e);!t||t.status!==`error`||(S({type:`update-status`,id:e,status:`pending`}),await T(t.file,e))},[D,x,T]),k=s({accept:p?.accept,minSize:p?.minSize,maxSize:p?.maxSize,maxFiles:p?.maxFiles,noClick:!0,noKeyboard:!0,onDropAccepted:async e=>{b(void 0);let t=e,n=p?.maxFiles??1/0,r=Number.isFinite(n)?Math.max(x.length+e.length-n,0):0;if(r>0)if(m){let n=x.slice(0,Math.min(r,x.length));await Promise.all(n.map(e=>E(e.id)));let i=r-n.length;i>0&&(t=e.slice(i))}else{b(getRootError([o.TooManyFiles],p??{}));let r=Math.max(n-x.length,0);t=e.slice(0,r)}t.length!==0&&(await Promise.all(t.map(async e=>{let t=crypto.randomUUID();S({type:`add`,id:t,fileName:e.name,file:e}),await T(e,t)})),l?.())},onDropRejected:e=>{b(getRejectionMessage(e,p??{}))}});return{getRootProps:k.getRootProps,getInputProps:k.getInputProps,open:k.open,onRemoveFile:E,onRetry:O,canRetry:D,fileStatuses:x,isInvalid:w,isDragActive:k.isDragActive,rootError:v,inputId:h,rootMessageId:g,rootDescriptionId:_,getFileMessageId:C}}function Dropzone({children:e,...t}){return r(d.Provider,{value:t,children:e})}const p=a.forwardRef(({className:t,children:a,...o},s)=>{let c=useDropzoneContext(),l=[c.rootDescriptionId,c.isInvalid?c.rootMessageId:void 0].filter(Boolean).join(` `)||void 0,{ref:u,...d}=c.getRootProps({...o,"data-slot":`dropzone-area`,"aria-describedby":l,"aria-invalid":c.isInvalid||void 0,className:e(`flex min-h-44 flex-col items-center justify-center gap-4 rounded-xl border border-dashed border-input bg-muted/20 px-6 py-8 text-center transition-colors`,c.isDragActive&&`border-primary bg-primary/5`,c.isInvalid&&`border-destructive bg-destructive/5`,t)}),f=c.getInputProps({id:c.inputId,className:`sr-only`,"aria-describedby":l,"aria-invalid":c.isInvalid,tabIndex:-1});return i(`div`,{...d,ref:n(s,u),children:[r(`input`,{...f}),a]})}),m=a.forwardRef(({className:t,...n},i)=>r(`p`,{ref:i,id:useDropzoneContext().rootDescriptionId,"data-slot":`dropzone-description`,className:e(`text-sm text-muted-foreground`,t),...n})),h=a.forwardRef(({className:t,...n},i)=>(useDropzoneContext(),r(`ol`,{ref:i,"data-slot":`dropzone-file-list`,className:e(`space-y-3`,t),...n}))),g=a.forwardRef(({className:t,file:n,children:i,...o},s)=>{let c=useDropzoneContext(),l=c.getFileMessageId(n.id),u=n.status===`error`,d=c.canRetry(n.id),p=a.useMemo(()=>({onRemoveFile:()=>c.onRemoveFile(n.id),onRetry:()=>c.onRetry(n.id),fileStatus:n,canRetry:d,dropzoneId:c.inputId,messageId:l}),[d,c,n,l]);return r(f.Provider,{value:p,children:r(`li`,{ref:s,"data-slot":`dropzone-file-item`,"data-status":n.status,"aria-describedby":u?l:void 0,className:e(`rounded-xl border bg-card px-4 py-3 shadow-xs`,n.status===`error`&&`border-destructive/50`,t),...o,children:i})})}),_=a.forwardRef(({className:t,children:n,...i},a)=>{let o=useDropzoneFileListContext(),s=o.fileStatus.status===`error`?o.fileStatus.message??String(o.fileStatus.error):n;return r(`p`,{ref:a,id:o.messageId,"data-slot":`dropzone-file-message`,className:e(`min-h-5 text-[0.8rem] font-medium`,o.fileStatus.status===`error`&&`text-destructive`,t),...i,children:s})}),v=a.forwardRef(({className:t,children:n,...i},a)=>{let o=useDropzoneContext(),s=o.rootError??n;return r(`p`,{ref:a,id:o.rootMessageId,"data-slot":`dropzone-message`,className:e(`min-h-5 text-[0.8rem] font-medium text-destructive`,t),...i,children:s})}),y=a.forwardRef(({className:n,onClick:i,size:o=`icon-sm`,type:s=`button`,variant:c=`ghost`,...l},u)=>{let d=useDropzoneFileListContext(),f=a.useCallback(e=>{i?.(e),!e.defaultPrevented&&d.onRemoveFile()},[d,i]);return r(t,{ref:u,"data-slot":`dropzone-remove-file`,className:e(n),onClick:f,size:o,type:s,variant:c,...l})}),b=a.forwardRef(({className:n,disabled:i,onClick:o,size:s=`icon-sm`,type:c=`button`,variant:l=`ghost`,...u},d)=>{let f=useDropzoneFileListContext(),p=i||!f.canRetry,m=a.useCallback(e=>{o?.(e),!(e.defaultPrevented||p)&&f.onRetry()},[f,p,o]);return r(t,{ref:d,"data-slot":`dropzone-retry-file`,className:e(n),disabled:p,onClick:m,size:s,type:c,variant:l,...u})}),x=a.forwardRef(({className:n,onClick:i,size:o=`sm`,type:s=`button`,variant:c=`subtle`,...l},u)=>{let d=useDropzoneContext(),f=[d.rootDescriptionId,d.isInvalid?d.rootMessageId:void 0].filter(Boolean).join(` `)||void 0,p=a.useCallback(e=>{i?.(e),!e.defaultPrevented&&d.open()},[d,i]);return r(t,{ref:u,"aria-controls":d.inputId,"aria-describedby":f,"aria-invalid":d.isInvalid||void 0,"data-slot":`dropzone-trigger`,className:e(n),onClick:p,size:o,type:s,variant:c,...l})}),S=a.forwardRef(({className:t,status:n,...i},a)=>{let o=n===`success`||n===`error`,s=n===`error`;return r(`div`,{ref:a,"aria-valuemax":100,"aria-valuemin":0,"aria-valuetext":u[n],"data-slot":`dropzone-progress`,"data-status":n,role:`progressbar`,className:e(`relative h-2 w-full overflow-hidden rounded-full bg-muted`,t),...i,children:r(`div`,{className:e(`h-full w-full rounded-full bg-primary transition-transform`,o?`translate-x-0`:`animate-infinite-progress`,s&&`bg-destructive`)})})});Dropzone.displayName=`Dropzone`,p.displayName=`DropzoneArea`,m.displayName=`DropzoneDescription`,h.displayName=`DropzoneFileList`,g.displayName=`DropzoneFileListItem`,_.displayName=`DropzoneFileMessage`,v.displayName=`DropzoneMessage`,y.displayName=`DropzoneRemoveFile`,b.displayName=`DropzoneRetryFile`,x.displayName=`DropzoneTrigger`,S.displayName=`InfiniteProgress`;export{Dropzone,p as DropzoneArea,m as DropzoneDescription,h as DropzoneFileList,g as DropzoneFileListItem,_ as DropzoneFileMessage,v as DropzoneMessage,y as DropzoneRemoveFile,b as DropzoneRetryFile,x as DropzoneTrigger,o as ErrorCode,S as InfiniteProgress,useDropzone};
|
|
2
2
|
//# sourceMappingURL=dropzone.js.map
|