@jbpark/ui-kit 9.1.0 → 10.0.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.ko.md +18 -17
- package/README.md +18 -17
- package/dist/Button.d.mts +1 -1
- package/dist/Button.d.mts.map +1 -1
- package/dist/Button.mjs +4 -5
- package/dist/Button.mjs.map +1 -1
- package/dist/Tag.d.mts.map +1 -1
- package/dist/Tag.mjs.map +1 -1
- package/dist/components/atoms/checkbox/checkbox.mjs +1 -1
- package/dist/components/atoms/checkbox/checkbox.mjs.map +1 -1
- package/dist/components/atoms/option-group.mjs.map +1 -1
- package/dist/components/atoms/popover.d.mts +3 -1
- package/dist/components/atoms/popover.d.mts.map +1 -1
- package/dist/components/atoms/popover.mjs +10 -111
- package/dist/components/atoms/popover.mjs.map +1 -1
- package/dist/components/atoms/progress.mjs +3 -4
- package/dist/components/atoms/progress.mjs.map +1 -1
- package/dist/components/atoms/radio/context.mjs +2 -2
- package/dist/components/atoms/radio/context.mjs.map +1 -1
- package/dist/components/atoms/radio/group.d.mts.map +1 -1
- package/dist/components/atoms/radio/group.mjs +8 -6
- package/dist/components/atoms/radio/group.mjs.map +1 -1
- package/dist/components/atoms/radio/radio.d.mts +2 -5
- package/dist/components/atoms/radio/radio.d.mts.map +1 -1
- package/dist/components/atoms/radio/radio.mjs +0 -1
- package/dist/components/atoms/radio/radio.mjs.map +1 -1
- package/dist/components/atoms/rich-text-editor/content-classes.mjs +1 -1
- package/dist/components/atoms/rich-text-editor/content-classes.mjs.map +1 -1
- package/dist/components/atoms/rich-text-editor/rich-text-editor.mjs +1 -1
- package/dist/components/atoms/rich-text-editor/rich-text-editor.mjs.map +1 -1
- package/dist/components/atoms/rich-text-editor/toolbar-button.mjs.map +1 -1
- package/dist/components/atoms/rich-text-editor/toolbar-presets.mjs.map +1 -1
- package/dist/components/atoms/rich-text-editor/toolbar.mjs +1 -1
- package/dist/components/atoms/rich-text-editor/toolbar.mjs.map +1 -1
- package/dist/components/atoms/select.mjs +5 -1
- package/dist/components/atoms/select.mjs.map +1 -1
- package/dist/components/atoms/slider/slider.mjs.map +1 -1
- package/dist/components/atoms/switch.d.mts +1 -1
- package/dist/components/atoms/switch.d.mts.map +1 -1
- package/dist/components/atoms/switch.mjs +3 -3
- package/dist/components/atoms/switch.mjs.map +1 -1
- package/dist/components/molecules/collapse.mjs +3 -10
- package/dist/components/molecules/collapse.mjs.map +1 -1
- package/dist/components/organisms/drawer.d.mts +1 -2
- package/dist/components/organisms/drawer.d.mts.map +1 -1
- package/dist/components/organisms/drawer.mjs +5 -7
- package/dist/components/organisms/drawer.mjs.map +1 -1
- package/dist/components/organisms/modal.d.mts.map +1 -1
- package/dist/components/organisms/modal.mjs +1 -3
- package/dist/components/organisms/modal.mjs.map +1 -1
- package/dist/components/templates/container.d.mts +4 -3
- package/dist/components/templates/container.d.mts.map +1 -1
- package/dist/components/templates/container.mjs +10 -6
- package/dist/components/templates/container.mjs.map +1 -1
- package/dist/components/templates/index.d.mts +13 -0
- package/dist/components/templates/layout/content.d.mts +4 -3
- package/dist/components/templates/layout/content.d.mts.map +1 -1
- package/dist/components/templates/layout/content.mjs +14 -9
- package/dist/components/templates/layout/content.mjs.map +1 -1
- package/dist/core/accordion.d.mts +1 -1
- package/dist/core/accordion.mjs +12 -12
- package/dist/core/accordion.mjs.map +1 -1
- package/dist/core/badge.d.mts +4 -16
- package/dist/core/badge.d.mts.map +1 -1
- package/dist/core/badge.mjs +12 -21
- package/dist/core/badge.mjs.map +1 -1
- package/dist/core/button.d.mts +5 -4
- package/dist/core/button.d.mts.map +1 -1
- package/dist/core/button.mjs +4 -4
- package/dist/core/button.mjs.map +1 -1
- package/dist/core/calendar.mjs +2 -1
- package/dist/core/calendar.mjs.map +1 -1
- package/dist/core/checkbox.d.mts +1 -1
- package/dist/core/checkbox.mjs +14 -14
- package/dist/core/checkbox.mjs.map +1 -1
- package/dist/core/dialog.d.mts +1 -1
- package/dist/core/dialog.mjs +25 -33
- package/dist/core/dialog.mjs.map +1 -1
- package/dist/core/drawer.d.mts +1 -1
- package/dist/core/drawer.mjs +45 -46
- package/dist/core/drawer.mjs.map +1 -1
- package/dist/core/label.d.mts +1 -2
- package/dist/core/label.mjs +1 -3
- package/dist/core/label.mjs.map +1 -1
- package/dist/core/popover.d.mts +1 -1
- package/dist/core/popover.mjs +42 -37
- package/dist/core/popover.mjs.map +1 -1
- package/dist/core/progress.d.mts +1 -1
- package/dist/core/progress.mjs +7 -10
- package/dist/core/progress.mjs.map +1 -1
- package/dist/core/radio-group.d.mts +3 -7
- package/dist/core/radio-group.mjs +15 -20
- package/dist/core/radio-group.mjs.map +1 -1
- package/dist/core/select.d.mts +7 -3
- package/dist/core/select.d.mts.map +1 -1
- package/dist/core/select.mjs +60 -56
- package/dist/core/select.mjs.map +1 -1
- package/dist/core/separator.d.mts +1 -1
- package/dist/core/separator.mjs +6 -5
- package/dist/core/separator.mjs.map +1 -1
- package/dist/core/slider.d.mts +1 -1
- package/dist/core/slider.mjs +38 -27
- package/dist/core/slider.mjs.map +1 -1
- package/dist/core/switch.d.mts +1 -1
- package/dist/core/switch.mjs +15 -15
- package/dist/core/switch.mjs.map +1 -1
- package/dist/index.d.mts +1 -0
- package/dist/lib/z-layers.mjs +4 -6
- package/dist/lib/z-layers.mjs.map +1 -1
- package/dist/providers/config/config.mjs +2 -2
- package/dist/providers/config/config.mjs.map +1 -1
- package/dist/style.css +330 -455
- package/package.json +8 -20
- package/dist/core/radio-group.d.mts.map +0 -1
package/dist/core/calendar.mjs
CHANGED
|
@@ -17,7 +17,8 @@ function Calendar({ className, classNames, showOutsideDays = true, captionLayout
|
|
|
17
17
|
showOutsideDays,
|
|
18
18
|
className: cn(`bg-background group/calendar p-3 [--cell-size:2rem]
|
|
19
19
|
[[data-slot=card-content]_&]:bg-transparent
|
|
20
|
-
[[data-slot=popover-content]_&]:bg-transparent
|
|
20
|
+
[[data-slot=popover-content]_&]:bg-transparent
|
|
21
|
+
[[data-slot=popover-content]_&]:p-0`, String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`, String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`, className),
|
|
21
22
|
captionLayout,
|
|
22
23
|
formatters: {
|
|
23
24
|
formatMonthDropdown: (date) => date.toLocaleString("default", { month: "short" }),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"calendar.mjs","names":["React"],"sources":["../../src/core/calendar.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { DayButton, DayPicker, getDefaultClassNames } from 'react-day-picker';\n\nimport {\n ChevronDownIcon,\n ChevronLeftIcon,\n ChevronRightIcon,\n} from 'lucide-react';\n\nimport { cn } from '@repo/ui/utils';\n\nimport { Button, buttonVariants } from './button';\n\nfunction Calendar({\n className,\n classNames,\n showOutsideDays = true,\n captionLayout = 'label',\n buttonVariant = 'ghost',\n formatters,\n components,\n ...props\n}: React.ComponentProps<typeof DayPicker> & {\n buttonVariant?: React.ComponentProps<typeof Button>['variant'];\n}) {\n const defaultClassNames = getDefaultClassNames();\n\n return (\n <DayPicker\n showOutsideDays={showOutsideDays}\n className={cn(\n `bg-background group/calendar p-3 [--cell-size:2rem]\n [[data-slot=card-content]_&]:bg-transparent\n [[data-slot=popover-content]_&]:bg-transparent`,\n String.raw`rtl:**:[.rdp-button\\_next>svg]:rotate-180`,\n String.raw`rtl:**:[.rdp-button\\_previous>svg]:rotate-180`,\n className,\n )}\n captionLayout={captionLayout}\n formatters={{\n formatMonthDropdown: date =>\n date.toLocaleString('default', { month: 'short' }),\n ...formatters,\n }}\n classNames={{\n root: cn('w-fit', defaultClassNames.root),\n months: cn(\n 'relative flex flex-col gap-4 md:flex-row',\n defaultClassNames.months,\n ),\n month: cn('flex w-full flex-col gap-4', defaultClassNames.month),\n nav: cn(\n 'absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1',\n defaultClassNames.nav,\n ),\n button_previous: cn(\n buttonVariants({ variant: buttonVariant }),\n 'h-(--cell-size) w-(--cell-size) select-none p-0 aria-disabled:opacity-50',\n defaultClassNames.button_previous,\n ),\n button_next: cn(\n buttonVariants({ variant: buttonVariant }),\n 'h-(--cell-size) w-(--cell-size) select-none p-0 aria-disabled:opacity-50',\n defaultClassNames.button_next,\n ),\n month_caption: cn(\n 'flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)',\n defaultClassNames.month_caption,\n ),\n dropdowns: cn(\n 'flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium',\n defaultClassNames.dropdowns,\n ),\n dropdown_root: cn(\n `has-focus:border-ring border-input shadow-xs\n has-focus:ring-ring/50 has-focus:ring-[3px] relative rounded-md\n border`,\n defaultClassNames.dropdown_root,\n ),\n dropdown: cn(\n 'bg-popover absolute inset-0 opacity-0',\n defaultClassNames.dropdown,\n ),\n caption_label: cn(\n 'select-none font-medium',\n captionLayout === 'label'\n ? 'text-sm'\n : `[&>svg]:text-muted-foreground flex h-8 items-center gap-1\n rounded-md pl-2 pr-1 text-sm [&>svg]:size-3.5`,\n defaultClassNames.caption_label,\n ),\n month_grid: cn('w-full border-collapse', defaultClassNames.month_grid),\n weekdays: cn('flex', defaultClassNames.weekdays),\n weekday: cn(\n 'text-muted-foreground flex-1 select-none rounded-md text-[0.8rem] font-normal',\n defaultClassNames.weekday,\n ),\n week: cn('mt-2 flex w-full', defaultClassNames.week),\n week_number_header: cn(\n 'w-(--cell-size) select-none',\n defaultClassNames.week_number_header,\n ),\n week_number: cn(\n 'text-muted-foreground select-none text-[0.8rem]',\n defaultClassNames.week_number,\n ),\n day: cn(\n `group/day relative aspect-square h-full w-full select-none p-0\n text-center [&:first-child[data-selected=true]_button]:rounded-l-md\n [&:last-child[data-selected=true]_button]:rounded-r-md`,\n defaultClassNames.day,\n ),\n range_start: cn(\n 'bg-accent rounded-l-md',\n defaultClassNames.range_start,\n ),\n range_middle: cn('rounded-none', defaultClassNames.range_middle),\n range_end: cn('bg-accent rounded-r-md', defaultClassNames.range_end),\n today: cn(\n 'bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none',\n defaultClassNames.today,\n ),\n outside: cn(\n 'text-muted-foreground aria-selected:text-muted-foreground',\n defaultClassNames.outside,\n ),\n disabled: cn(\n 'text-muted-foreground opacity-50',\n defaultClassNames.disabled,\n ),\n hidden: cn('invisible', defaultClassNames.hidden),\n ...classNames,\n }}\n components={{\n // eslint-disable-next-line react/prop-types -- typed via DayPicker's `components` prop, not local PropTypes\n Root: ({ className, rootRef, ...props }) => {\n return (\n <div\n data-slot=\"calendar\"\n ref={rootRef}\n className={cn(className)}\n {...props}\n />\n );\n },\n // eslint-disable-next-line react/prop-types -- typed via DayPicker's `components` prop, not local PropTypes\n Chevron: ({ className, orientation, ...props }) => {\n if (orientation === 'left') {\n return (\n <ChevronLeftIcon className={cn('size-4', className)} {...props} />\n );\n }\n\n if (orientation === 'right') {\n return (\n <ChevronRightIcon\n className={cn('size-4', className)}\n {...props}\n />\n );\n }\n\n return (\n <ChevronDownIcon className={cn('size-4', className)} {...props} />\n );\n },\n DayButton: CalendarDayButton,\n WeekNumber: ({ children, ...props }) => {\n return (\n <td {...props}>\n <div\n className=\"flex size-(--cell-size) items-center justify-center\n text-center\"\n >\n {children}\n </div>\n </td>\n );\n },\n ...components,\n }}\n {...props}\n />\n );\n}\n\nfunction CalendarDayButton({\n className,\n day,\n modifiers,\n ...props\n}: React.ComponentProps<typeof DayButton>) {\n const defaultClassNames = getDefaultClassNames();\n\n const ref = React.useRef<HTMLButtonElement>(null);\n React.useEffect(() => {\n if (modifiers.focused) ref.current?.focus();\n }, [modifiers.focused]);\n\n return (\n <Button\n ref={ref}\n variant=\"ghost\"\n size=\"icon\"\n data-day={day.date.toLocaleDateString()}\n data-selected-single={\n modifiers.selected &&\n !modifiers.range_start &&\n !modifiers.range_end &&\n !modifiers.range_middle\n }\n data-range-start={modifiers.range_start}\n data-range-end={modifiers.range_end}\n data-range-middle={modifiers.range_middle}\n className={cn(\n `data-[selected-single=true]:bg-primary\n data-[selected-single=true]:text-primary-foreground\n data-[range-middle=true]:bg-accent\n data-[range-middle=true]:text-accent-foreground\n data-[range-start=true]:bg-primary\n data-[range-start=true]:text-primary-foreground\n data-[range-end=true]:bg-primary\n data-[range-end=true]:text-primary-foreground\n group-data-[focused=true]/day:border-ring\n group-data-[focused=true]/day:ring-ring/50 flex aspect-square h-auto\n w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal\n group-data-[focused=true]/day:relative\n group-data-[focused=true]/day:z-10\n group-data-[focused=true]/day:ring-[3px]\n data-[range-end=true]:rounded-md data-[range-middle=true]:rounded-none\n data-[range-start=true]:rounded-md [&>span]:text-xs [&>span]:opacity-70`,\n defaultClassNames.day,\n className,\n )}\n {...props}\n />\n );\n}\n\nexport { Calendar, CalendarDayButton };\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"calendar.mjs","names":["React"],"sources":["../../src/core/calendar.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { DayButton, DayPicker, getDefaultClassNames } from 'react-day-picker';\n\nimport {\n ChevronDownIcon,\n ChevronLeftIcon,\n ChevronRightIcon,\n} from 'lucide-react';\n\nimport { cn } from '@repo/ui/utils';\n\nimport { Button, buttonVariants } from './button';\n\nfunction Calendar({\n className,\n classNames,\n showOutsideDays = true,\n captionLayout = 'label',\n buttonVariant = 'ghost',\n formatters,\n components,\n ...props\n}: React.ComponentProps<typeof DayPicker> & {\n buttonVariant?: React.ComponentProps<typeof Button>['variant'];\n}) {\n const defaultClassNames = getDefaultClassNames();\n\n return (\n <DayPicker\n showOutsideDays={showOutsideDays}\n className={cn(\n `bg-background group/calendar p-3 [--cell-size:2rem]\n [[data-slot=card-content]_&]:bg-transparent\n [[data-slot=popover-content]_&]:bg-transparent\n [[data-slot=popover-content]_&]:p-0`,\n String.raw`rtl:**:[.rdp-button\\_next>svg]:rotate-180`,\n String.raw`rtl:**:[.rdp-button\\_previous>svg]:rotate-180`,\n className,\n )}\n captionLayout={captionLayout}\n formatters={{\n formatMonthDropdown: date =>\n date.toLocaleString('default', { month: 'short' }),\n ...formatters,\n }}\n classNames={{\n root: cn('w-fit', defaultClassNames.root),\n months: cn(\n 'relative flex flex-col gap-4 md:flex-row',\n defaultClassNames.months,\n ),\n month: cn('flex w-full flex-col gap-4', defaultClassNames.month),\n nav: cn(\n 'absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1',\n defaultClassNames.nav,\n ),\n button_previous: cn(\n buttonVariants({ variant: buttonVariant }),\n 'h-(--cell-size) w-(--cell-size) select-none p-0 aria-disabled:opacity-50',\n defaultClassNames.button_previous,\n ),\n button_next: cn(\n buttonVariants({ variant: buttonVariant }),\n 'h-(--cell-size) w-(--cell-size) select-none p-0 aria-disabled:opacity-50',\n defaultClassNames.button_next,\n ),\n month_caption: cn(\n 'flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)',\n defaultClassNames.month_caption,\n ),\n dropdowns: cn(\n 'flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium',\n defaultClassNames.dropdowns,\n ),\n dropdown_root: cn(\n `has-focus:border-ring border-input shadow-xs\n has-focus:ring-ring/50 has-focus:ring-[3px] relative rounded-md\n border`,\n defaultClassNames.dropdown_root,\n ),\n dropdown: cn(\n 'bg-popover absolute inset-0 opacity-0',\n defaultClassNames.dropdown,\n ),\n caption_label: cn(\n 'select-none font-medium',\n captionLayout === 'label'\n ? 'text-sm'\n : `[&>svg]:text-muted-foreground flex h-8 items-center gap-1\n rounded-md pl-2 pr-1 text-sm [&>svg]:size-3.5`,\n defaultClassNames.caption_label,\n ),\n month_grid: cn('w-full border-collapse', defaultClassNames.month_grid),\n weekdays: cn('flex', defaultClassNames.weekdays),\n weekday: cn(\n 'text-muted-foreground flex-1 select-none rounded-md text-[0.8rem] font-normal',\n defaultClassNames.weekday,\n ),\n week: cn('mt-2 flex w-full', defaultClassNames.week),\n week_number_header: cn(\n 'w-(--cell-size) select-none',\n defaultClassNames.week_number_header,\n ),\n week_number: cn(\n 'text-muted-foreground select-none text-[0.8rem]',\n defaultClassNames.week_number,\n ),\n day: cn(\n `group/day relative aspect-square h-full w-full select-none p-0\n text-center [&:first-child[data-selected=true]_button]:rounded-l-md\n [&:last-child[data-selected=true]_button]:rounded-r-md`,\n defaultClassNames.day,\n ),\n range_start: cn(\n 'bg-accent rounded-l-md',\n defaultClassNames.range_start,\n ),\n range_middle: cn('rounded-none', defaultClassNames.range_middle),\n range_end: cn('bg-accent rounded-r-md', defaultClassNames.range_end),\n today: cn(\n 'bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none',\n defaultClassNames.today,\n ),\n outside: cn(\n 'text-muted-foreground aria-selected:text-muted-foreground',\n defaultClassNames.outside,\n ),\n disabled: cn(\n 'text-muted-foreground opacity-50',\n defaultClassNames.disabled,\n ),\n hidden: cn('invisible', defaultClassNames.hidden),\n ...classNames,\n }}\n components={{\n // eslint-disable-next-line react/prop-types -- typed via DayPicker's `components` prop, not local PropTypes\n Root: ({ className, rootRef, ...props }) => {\n return (\n <div\n data-slot=\"calendar\"\n ref={rootRef}\n className={cn(className)}\n {...props}\n />\n );\n },\n // eslint-disable-next-line react/prop-types -- typed via DayPicker's `components` prop, not local PropTypes\n Chevron: ({ className, orientation, ...props }) => {\n if (orientation === 'left') {\n return (\n <ChevronLeftIcon className={cn('size-4', className)} {...props} />\n );\n }\n\n if (orientation === 'right') {\n return (\n <ChevronRightIcon\n className={cn('size-4', className)}\n {...props}\n />\n );\n }\n\n return (\n <ChevronDownIcon className={cn('size-4', className)} {...props} />\n );\n },\n DayButton: CalendarDayButton,\n WeekNumber: ({ children, ...props }) => {\n return (\n <td {...props}>\n <div\n className=\"flex size-(--cell-size) items-center justify-center\n text-center\"\n >\n {children}\n </div>\n </td>\n );\n },\n ...components,\n }}\n {...props}\n />\n );\n}\n\nfunction CalendarDayButton({\n className,\n day,\n modifiers,\n ...props\n}: React.ComponentProps<typeof DayButton>) {\n const defaultClassNames = getDefaultClassNames();\n\n const ref = React.useRef<HTMLButtonElement>(null);\n React.useEffect(() => {\n if (modifiers.focused) ref.current?.focus();\n }, [modifiers.focused]);\n\n return (\n <Button\n ref={ref}\n variant=\"ghost\"\n size=\"icon\"\n data-day={day.date.toLocaleDateString()}\n data-selected-single={\n modifiers.selected &&\n !modifiers.range_start &&\n !modifiers.range_end &&\n !modifiers.range_middle\n }\n data-range-start={modifiers.range_start}\n data-range-end={modifiers.range_end}\n data-range-middle={modifiers.range_middle}\n className={cn(\n `data-[selected-single=true]:bg-primary\n data-[selected-single=true]:text-primary-foreground\n data-[range-middle=true]:bg-accent\n data-[range-middle=true]:text-accent-foreground\n data-[range-start=true]:bg-primary\n data-[range-start=true]:text-primary-foreground\n data-[range-end=true]:bg-primary\n data-[range-end=true]:text-primary-foreground\n group-data-[focused=true]/day:border-ring\n group-data-[focused=true]/day:ring-ring/50 flex aspect-square h-auto\n w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal\n group-data-[focused=true]/day:relative\n group-data-[focused=true]/day:z-10\n group-data-[focused=true]/day:ring-[3px]\n data-[range-end=true]:rounded-md data-[range-middle=true]:rounded-none\n data-[range-start=true]:rounded-md [&>span]:text-xs [&>span]:opacity-70`,\n defaultClassNames.day,\n className,\n )}\n {...props}\n />\n );\n}\n\nexport { Calendar, CalendarDayButton };\n"],"mappings":"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"}
|
package/dist/core/checkbox.d.mts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import "react";
|
|
2
|
-
import "@
|
|
2
|
+
import { Checkbox } from "@base-ui/react/checkbox";
|
package/dist/core/checkbox.mjs
CHANGED
|
@@ -4,22 +4,22 @@ import { cn } from "../utils.mjs";
|
|
|
4
4
|
import "react";
|
|
5
5
|
import { CheckIcon } from "lucide-react";
|
|
6
6
|
import { jsx } from "react/jsx-runtime";
|
|
7
|
-
import
|
|
7
|
+
import { Checkbox } from "@base-ui/react/checkbox";
|
|
8
8
|
//#region src/core/checkbox.tsx
|
|
9
|
-
var checkbox_exports = /* @__PURE__ */ __exportAll({ Checkbox: () => Checkbox });
|
|
10
|
-
function Checkbox({ className, ...props }) {
|
|
11
|
-
return /* @__PURE__ */ jsx(
|
|
9
|
+
var checkbox_exports = /* @__PURE__ */ __exportAll({ Checkbox: () => Checkbox$1 });
|
|
10
|
+
function Checkbox$1({ className, ...props }) {
|
|
11
|
+
return /* @__PURE__ */ jsx(Checkbox.Root, {
|
|
12
12
|
"data-slot": "checkbox",
|
|
13
|
-
className: cn(`peer border-input dark:bg-input/30 data-
|
|
14
|
-
data-
|
|
15
|
-
|
|
16
|
-
focus-visible:
|
|
17
|
-
aria-invalid:ring-destructive/
|
|
18
|
-
|
|
19
|
-
shadow-xs transition-shadow outline-none focus-visible:ring-[3px]
|
|
20
|
-
disabled:cursor-not-allowed disabled:opacity-50`, className),
|
|
13
|
+
className: cn(`peer border-input dark:bg-input/30 data-checked:bg-primary
|
|
14
|
+
data-checked:text-primary-foreground dark:data-checked:bg-primary
|
|
15
|
+
data-checked:border-primary focus-visible:border-ring
|
|
16
|
+
focus-visible:ring-ring/50 aria-invalid:ring-destructive/20
|
|
17
|
+
dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive
|
|
18
|
+
inline-flex size-4 shrink-0 items-center justify-center rounded-[4px]
|
|
19
|
+
border shadow-xs transition-shadow outline-none focus-visible:ring-[3px]
|
|
20
|
+
data-disabled:cursor-not-allowed data-disabled:opacity-50`, className),
|
|
21
21
|
...props,
|
|
22
|
-
children: /* @__PURE__ */ jsx(
|
|
22
|
+
children: /* @__PURE__ */ jsx(Checkbox.Indicator, {
|
|
23
23
|
"data-slot": "checkbox-indicator",
|
|
24
24
|
className: "grid place-content-center text-current transition-none",
|
|
25
25
|
children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-3.5" })
|
|
@@ -27,6 +27,6 @@ function Checkbox({ className, ...props }) {
|
|
|
27
27
|
});
|
|
28
28
|
}
|
|
29
29
|
//#endregion
|
|
30
|
-
export { Checkbox, checkbox_exports };
|
|
30
|
+
export { Checkbox$1 as Checkbox, checkbox_exports };
|
|
31
31
|
|
|
32
32
|
//# sourceMappingURL=checkbox.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"checkbox.mjs","names":[],"sources":["../../src/core/checkbox.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport
|
|
1
|
+
{"version":3,"file":"checkbox.mjs","names":["Checkbox","CheckboxPrimitive"],"sources":["../../src/core/checkbox.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport { Checkbox as CheckboxPrimitive } from '@base-ui/react/checkbox';\nimport { CheckIcon } from 'lucide-react';\n\nimport { cn } from '@repo/ui/utils';\n\n// Base UI primitive with repo-owned styling; no longer vendored from shadcn.\nfunction Checkbox({\n className,\n ...props\n}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {\n return (\n <CheckboxPrimitive.Root\n data-slot=\"checkbox\"\n className={cn(\n `peer border-input dark:bg-input/30 data-checked:bg-primary\n data-checked:text-primary-foreground dark:data-checked:bg-primary\n data-checked:border-primary focus-visible:border-ring\n focus-visible:ring-ring/50 aria-invalid:ring-destructive/20\n dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive\n inline-flex size-4 shrink-0 items-center justify-center rounded-[4px]\n border shadow-xs transition-shadow outline-none focus-visible:ring-[3px]\n data-disabled:cursor-not-allowed data-disabled:opacity-50`,\n className,\n //\n )}\n {...props}\n >\n <CheckboxPrimitive.Indicator\n data-slot=\"checkbox-indicator\"\n className=\"grid place-content-center text-current transition-none\"\n >\n <CheckIcon className=\"size-3.5\" />\n </CheckboxPrimitive.Indicator>\n </CheckboxPrimitive.Root>\n );\n}\n\nexport { Checkbox };\n"],"mappings":";;;;;;;;;AAUA,SAASA,WAAS,EAChB,WACA,GAAG,SACmD;CACtD,OACE,oBAACC,SAAkB,MAAnB;EACE,aAAU;EACV,WAAW,GACT;;;;;;;oEAQA,SAEF;EACA,GAAI;EAEJ,UAAA,oBAACA,SAAkB,WAAnB;GACE,aAAU;GACV,WAAU;GAEV,UAAA,oBAAC,WAAD,EAAW,WAAU,WAAY,CAAA;EACN,CAAA;CACP,CAAA;AAE5B"}
|
package/dist/core/dialog.d.mts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import "react";
|
|
2
|
-
import "@
|
|
2
|
+
import { Dialog } from "@base-ui/react/dialog";
|
package/dist/core/dialog.mjs
CHANGED
|
@@ -7,10 +7,10 @@ import Button from "../Button.mjs";
|
|
|
7
7
|
import "react";
|
|
8
8
|
import { XIcon } from "lucide-react";
|
|
9
9
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
10
|
-
import
|
|
10
|
+
import { Dialog } from "@base-ui/react/dialog";
|
|
11
11
|
//#region src/core/dialog.tsx
|
|
12
12
|
var dialog_exports = /* @__PURE__ */ __exportAll({
|
|
13
|
-
Dialog: () => Dialog,
|
|
13
|
+
Dialog: () => Dialog$1,
|
|
14
14
|
DialogClose: () => DialogClose,
|
|
15
15
|
DialogContent: () => DialogContent,
|
|
16
16
|
DialogDescription: () => DialogDescription,
|
|
@@ -21,45 +21,41 @@ var dialog_exports = /* @__PURE__ */ __exportAll({
|
|
|
21
21
|
DialogTitle: () => DialogTitle,
|
|
22
22
|
DialogTrigger: () => DialogTrigger
|
|
23
23
|
});
|
|
24
|
-
function Dialog({ ...props }) {
|
|
25
|
-
return /* @__PURE__ */ jsx(
|
|
24
|
+
function Dialog$1({ ...props }) {
|
|
25
|
+
return /* @__PURE__ */ jsx(Dialog.Root, {
|
|
26
26
|
"data-slot": "dialog",
|
|
27
27
|
...props
|
|
28
28
|
});
|
|
29
29
|
}
|
|
30
30
|
function DialogTrigger({ ...props }) {
|
|
31
|
-
return /* @__PURE__ */ jsx(
|
|
31
|
+
return /* @__PURE__ */ jsx(Dialog.Trigger, {
|
|
32
32
|
"data-slot": "dialog-trigger",
|
|
33
33
|
...props
|
|
34
34
|
});
|
|
35
35
|
}
|
|
36
36
|
function DialogPortal({ ...props }) {
|
|
37
|
-
return /* @__PURE__ */ jsx(
|
|
38
|
-
"data-slot": "dialog-portal",
|
|
39
|
-
...props
|
|
40
|
-
});
|
|
37
|
+
return /* @__PURE__ */ jsx(Dialog.Portal, { ...props });
|
|
41
38
|
}
|
|
42
39
|
function DialogClose({ ...props }) {
|
|
43
|
-
return /* @__PURE__ */ jsx(
|
|
40
|
+
return /* @__PURE__ */ jsx(Dialog.Close, {
|
|
44
41
|
"data-slot": "dialog-close",
|
|
45
42
|
...props
|
|
46
43
|
});
|
|
47
44
|
}
|
|
48
45
|
function DialogOverlay({ className, ...props }) {
|
|
49
|
-
return /* @__PURE__ */ jsx(
|
|
46
|
+
return /* @__PURE__ */ jsx(Dialog.Backdrop, {
|
|
50
47
|
"data-slot": "dialog-overlay",
|
|
51
|
-
className: cn(`
|
|
52
|
-
data-
|
|
53
|
-
bg-black/50`, OVERLAY_LAYER, className),
|
|
48
|
+
className: cn(`fixed inset-0 bg-black/50 transition-opacity duration-200
|
|
49
|
+
data-ending-style:opacity-0 data-starting-style:opacity-0`, OVERLAY_LAYER, className),
|
|
54
50
|
...props
|
|
55
51
|
});
|
|
56
52
|
}
|
|
57
53
|
function DialogContent({ className, children, classNames, closeIcon: _closeIcon, closable, container, ...props }) {
|
|
58
54
|
const { getContainer } = useConfig();
|
|
59
55
|
const resolvedContainer = container ?? getContainer();
|
|
60
|
-
const closeIcon = /* @__PURE__ */ jsxs(
|
|
56
|
+
const closeIcon = /* @__PURE__ */ jsxs(Dialog.Close, {
|
|
61
57
|
"data-slot": "dialog-close",
|
|
62
|
-
className: "ring-offset-background focus:ring-ring
|
|
58
|
+
className: "ring-offset-background focus:ring-ring data-open:bg-accent\n data-open:text-muted-foreground absolute top-4 right-4 rounded-xs\n opacity-70 transition-opacity hover:opacity-100 focus:ring-2\n focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none\n [&_svg]:pointer-events-none [&_svg]:shrink-0\n [&_svg:not([class*='size-'])]:size-4",
|
|
63
59
|
disabled: typeof closable === "object" && closable.disabled,
|
|
64
60
|
children: [_closeIcon || /* @__PURE__ */ jsx(XIcon, {}), /* @__PURE__ */ jsx("span", {
|
|
65
61
|
className: "sr-only",
|
|
@@ -67,16 +63,15 @@ function DialogContent({ className, children, classNames, closeIcon: _closeIcon,
|
|
|
67
63
|
})]
|
|
68
64
|
});
|
|
69
65
|
return /* @__PURE__ */ jsxs(DialogPortal, {
|
|
70
|
-
"data-slot": "dialog-portal",
|
|
71
66
|
container: resolvedContainer,
|
|
72
|
-
children: [/* @__PURE__ */ jsx(DialogOverlay, { className: cn(classNames?.mask) }), /* @__PURE__ */ jsxs(
|
|
67
|
+
children: [/* @__PURE__ */ jsx(DialogOverlay, { className: cn(classNames?.mask) }), /* @__PURE__ */ jsxs(Dialog.Popup, {
|
|
73
68
|
"data-slot": "dialog-content",
|
|
74
|
-
className: cn(`bg-background
|
|
75
|
-
data-[state=closed]:animate-out data-[state=closed]:fade-out-0
|
|
76
|
-
data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95
|
|
77
|
-
data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] grid w-full
|
|
69
|
+
className: cn(`bg-background fixed top-[50%] left-[50%] grid w-full
|
|
78
70
|
max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4
|
|
79
|
-
rounded-lg border p-6 shadow-lg
|
|
71
|
+
rounded-lg border p-6 shadow-lg transition-[opacity,transform]
|
|
72
|
+
duration-200 outline-none data-ending-style:scale-95
|
|
73
|
+
data-ending-style:opacity-0 data-starting-style:scale-95
|
|
74
|
+
data-starting-style:opacity-0 sm:max-w-lg`, OVERLAY_LAYER, className),
|
|
80
75
|
...props,
|
|
81
76
|
children: [children, closable && closeIcon]
|
|
82
77
|
})]
|
|
@@ -94,30 +89,27 @@ function DialogFooter({ className, showCloseButton = false, children, ...props }
|
|
|
94
89
|
"data-slot": "dialog-footer",
|
|
95
90
|
className: cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className),
|
|
96
91
|
...props,
|
|
97
|
-
children: [children, showCloseButton && /* @__PURE__ */ jsx(
|
|
98
|
-
|
|
99
|
-
children:
|
|
100
|
-
|
|
101
|
-
children: "Close"
|
|
102
|
-
})
|
|
103
|
-
})]
|
|
92
|
+
children: [children, showCloseButton && /* @__PURE__ */ jsx(Dialog.Close, { render: /* @__PURE__ */ jsx(Button, {
|
|
93
|
+
variant: "outlined",
|
|
94
|
+
children: "Close"
|
|
95
|
+
}) })]
|
|
104
96
|
});
|
|
105
97
|
}
|
|
106
98
|
function DialogTitle({ className, ...props }) {
|
|
107
|
-
return /* @__PURE__ */ jsx(
|
|
99
|
+
return /* @__PURE__ */ jsx(Dialog.Title, {
|
|
108
100
|
"data-slot": "dialog-title",
|
|
109
101
|
className: cn("text-lg leading-none font-semibold", className),
|
|
110
102
|
...props
|
|
111
103
|
});
|
|
112
104
|
}
|
|
113
105
|
function DialogDescription({ className, ...props }) {
|
|
114
|
-
return /* @__PURE__ */ jsx(
|
|
106
|
+
return /* @__PURE__ */ jsx(Dialog.Description, {
|
|
115
107
|
"data-slot": "dialog-description",
|
|
116
108
|
className: cn("text-muted-foreground text-sm", className),
|
|
117
109
|
...props
|
|
118
110
|
});
|
|
119
111
|
}
|
|
120
112
|
//#endregion
|
|
121
|
-
export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, dialog_exports };
|
|
113
|
+
export { Dialog$1 as Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, dialog_exports };
|
|
122
114
|
|
|
123
115
|
//# sourceMappingURL=dialog.mjs.map
|
package/dist/core/dialog.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dialog.mjs","names":[],"sources":["../../src/core/dialog.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport
|
|
1
|
+
{"version":3,"file":"dialog.mjs","names":["Dialog","DialogPrimitive"],"sources":["../../src/core/dialog.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport { Dialog as DialogPrimitive } from '@base-ui/react/dialog';\nimport { XIcon } from 'lucide-react';\n\nimport { useConfig } from '@repo/ui/providers';\nimport { cn } from '@repo/ui/utils';\n\nimport Button from '../components/atoms/button';\nimport { OVERLAY_LAYER } from '../lib/z-layers';\n\n/*\n * Base UI primitives with repo-owned styling; no longer vendored from shadcn.\n *\n * Notes on the Radix → Base UI shape change:\n * - Radix's `Dialog.Overlay` becomes Base UI's `Dialog.Backdrop`, and\n * `Dialog.Content` becomes `Dialog.Popup`.\n * - Open/close styling moves from Radix's `data-[state=open|closed]:animate-*`\n * (inert here — this package never defined those keyframes) to Base UI's\n * `data-starting-style`/`data-ending-style` transition hooks, which are plain\n * Tailwind transitions and actually animate.\n * - Pointer-outside dismissal (antd's `maskClosable`) is a *root*-level concern\n * in Base UI (`disablePointerDismissal`), not a Content event. See\n * `organisms/modal`.\n *\n * Local patches retained from the shadcn version:\n * - `OVERLAY_LAYER` (src/lib/z-layers.ts) replaces upstream's `z-50` on the\n * backdrop and popup — this package is published and can't own the app's\n * z-index scale (#359).\n * - `DialogContent` takes a `container` prop (default `useConfig().getContainer()`)\n * passed to the portal, so portalled content stays inside the themed wrapper.\n * - `DialogContent` exposes `closable`/`closeIcon`/`classNames.mask` instead of\n * upstream's `showCloseButton`.\n * - `DialogFooter`'s close button uses this library's Button vocabulary.\n */\nfunction Dialog({\n ...props\n}: React.ComponentProps<typeof DialogPrimitive.Root>) {\n return <DialogPrimitive.Root data-slot=\"dialog\" {...props} />;\n}\n\nfunction DialogTrigger({\n ...props\n}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {\n return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />;\n}\n\nfunction DialogPortal({\n ...props\n}: React.ComponentProps<typeof DialogPrimitive.Portal>) {\n return <DialogPrimitive.Portal {...props} />;\n}\n\nfunction DialogClose({\n ...props\n}: React.ComponentProps<typeof DialogPrimitive.Close>) {\n return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />;\n}\n\nfunction DialogOverlay({\n className,\n ...props\n}: React.ComponentProps<typeof DialogPrimitive.Backdrop>) {\n return (\n <DialogPrimitive.Backdrop\n data-slot=\"dialog-overlay\"\n className={cn(\n `fixed inset-0 bg-black/50 transition-opacity duration-200\n data-ending-style:opacity-0 data-starting-style:opacity-0`,\n OVERLAY_LAYER,\n className,\n )}\n {...props}\n />\n );\n}\n\ninterface CustomContentProps {\n classNames?: Record<string, string>;\n closeIcon?: React.ReactNode;\n closable?: boolean | { disabled?: boolean };\n container?: HTMLElement;\n}\n\nfunction DialogContent({\n className,\n children,\n classNames,\n closeIcon: _closeIcon,\n closable,\n container,\n ...props\n}: React.ComponentProps<typeof DialogPrimitive.Popup> & CustomContentProps) {\n const { getContainer } = useConfig();\n const resolvedContainer = container ?? getContainer();\n\n const closeIcon = (\n <DialogPrimitive.Close\n data-slot=\"dialog-close\"\n className=\"ring-offset-background focus:ring-ring data-open:bg-accent\n data-open:text-muted-foreground absolute top-4 right-4 rounded-xs\n opacity-70 transition-opacity hover:opacity-100 focus:ring-2\n focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none\n [&_svg]:pointer-events-none [&_svg]:shrink-0\n [&_svg:not([class*='size-'])]:size-4\"\n disabled={typeof closable === 'object' && closable.disabled}\n >\n {_closeIcon || <XIcon />}\n <span className=\"sr-only\">Close</span>\n </DialogPrimitive.Close>\n );\n\n return (\n <DialogPortal container={resolvedContainer}>\n <DialogOverlay className={cn(classNames?.mask)} />\n <DialogPrimitive.Popup\n data-slot=\"dialog-content\"\n className={cn(\n `bg-background fixed top-[50%] left-[50%] grid w-full\n max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4\n rounded-lg border p-6 shadow-lg transition-[opacity,transform]\n duration-200 outline-none data-ending-style:scale-95\n data-ending-style:opacity-0 data-starting-style:scale-95\n data-starting-style:opacity-0 sm:max-w-lg`,\n OVERLAY_LAYER,\n className,\n )}\n {...props}\n >\n {children}\n {closable && closeIcon}\n </DialogPrimitive.Popup>\n </DialogPortal>\n );\n}\n\nfunction DialogHeader({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n <div\n data-slot=\"dialog-header\"\n className={cn('flex flex-col gap-2 text-center sm:text-left', className)}\n {...props}\n />\n );\n}\n\nfunction DialogFooter({\n className,\n showCloseButton = false,\n children,\n ...props\n}: React.ComponentProps<'div'> & {\n showCloseButton?: boolean;\n}) {\n return (\n <div\n data-slot=\"dialog-footer\"\n className={cn(\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\n render={<Button variant=\"outlined\">Close</Button>}\n />\n )}\n </div>\n );\n}\n\nfunction DialogTitle({\n className,\n ...props\n}: React.ComponentProps<typeof DialogPrimitive.Title>) {\n return (\n <DialogPrimitive.Title\n data-slot=\"dialog-title\"\n className={cn('text-lg leading-none font-semibold', className)}\n {...props}\n />\n );\n}\n\nfunction DialogDescription({\n className,\n ...props\n}: React.ComponentProps<typeof DialogPrimitive.Description>) {\n return (\n <DialogPrimitive.Description\n data-slot=\"dialog-description\"\n className={cn('text-muted-foreground text-sm', className)}\n {...props}\n />\n );\n}\n\nexport {\n Dialog,\n DialogClose,\n DialogContent,\n DialogDescription,\n DialogFooter,\n DialogHeader,\n DialogOverlay,\n DialogPortal,\n DialogTitle,\n DialogTrigger,\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAqCA,SAASA,SAAO,EACd,GAAG,SACiD;CACpD,OAAO,oBAACC,OAAgB,MAAjB;EAAsB,aAAU;EAAS,GAAI;CAAQ,CAAA;AAC9D;AAEA,SAAS,cAAc,EACrB,GAAG,SACoD;CACvD,OAAO,oBAACA,OAAgB,SAAjB;EAAyB,aAAU;EAAiB,GAAI;CAAQ,CAAA;AACzE;AAEA,SAAS,aAAa,EACpB,GAAG,SACmD;CACtD,OAAO,oBAACA,OAAgB,QAAjB,EAAwB,GAAI,MAAQ,CAAA;AAC7C;AAEA,SAAS,YAAY,EACnB,GAAG,SACkD;CACrD,OAAO,oBAACA,OAAgB,OAAjB;EAAuB,aAAU;EAAe,GAAI;CAAQ,CAAA;AACrE;AAEA,SAAS,cAAc,EACrB,WACA,GAAG,SACqD;CACxD,OACE,oBAACA,OAAgB,UAAjB;EACE,aAAU;EACV,WAAW,GACT;oEAEA,eACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AASA,SAAS,cAAc,EACrB,WACA,UACA,YACA,WAAW,YACX,UACA,WACA,GAAG,SACuE;CAC1E,MAAM,EAAE,iBAAiB,UAAU;CACnC,MAAM,oBAAoB,aAAa,aAAa;CAEpD,MAAM,YACJ,qBAACA,OAAgB,OAAjB;EACE,aAAU;EACV,WAAU;EAMV,UAAU,OAAO,aAAa,YAAY,SAAS;EARrD,UAAA,CAUG,cAAc,oBAAC,OAAD,CAAQ,CAAA,GACvB,oBAAC,QAAD;GAAM,WAAU;GAAU,UAAA;EAAW,CAAA,CAChB;;CAGzB,OACE,qBAAC,cAAD;EAAc,WAAW;EAAzB,UAAA,CACE,oBAAC,eAAD,EAAe,WAAW,GAAG,YAAY,IAAI,EAAI,CAAA,GACjD,qBAACA,OAAgB,OAAjB;GACE,aAAU;GACV,WAAW,GACT;;;;;sDAMA,eACA,SACF;GACA,GAAI;GAZN,UAAA,CAcG,UACA,YAAY,SACQ;EACX,CAAA,CAAA;;AAElB;AAEA,SAAS,aAAa,EAAE,WAAW,GAAG,SAAsC;CAC1E,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,gDAAgD,SAAS;EACvE,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,aAAa,EACpB,WACA,kBAAkB,OAClB,UACA,GAAG,SAGF;CACD,OACE,qBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,0DACA,SACF;EACA,GAAI;EANN,UAAA,CAQG,UACA,mBACC,oBAACA,OAAgB,OAAjB,EACE,QAAQ,oBAAC,QAAD;GAAQ,SAAQ;GAAW,UAAA;EAAa,CAAA,EACjD,CAAA,CAEA;;AAET;AAEA,SAAS,YAAY,EACnB,WACA,GAAG,SACkD;CACrD,OACE,oBAACA,OAAgB,OAAjB;EACE,aAAU;EACV,WAAW,GAAG,sCAAsC,SAAS;EAC7D,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,kBAAkB,EACzB,WACA,GAAG,SACwD;CAC3D,OACE,oBAACA,OAAgB,aAAjB;EACE,aAAU;EACV,WAAW,GAAG,iCAAiC,SAAS;EACxD,GAAI;CACL,CAAA;AAEL"}
|
package/dist/core/drawer.d.mts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import "react";
|
|
2
|
-
import {
|
|
2
|
+
import { Dialog } from "@base-ui/react/dialog";
|
package/dist/core/drawer.mjs
CHANGED
|
@@ -5,10 +5,10 @@ import { useConfig } from "../providers/config/context.mjs";
|
|
|
5
5
|
import { OVERLAY_LAYER } from "../lib/z-layers.mjs";
|
|
6
6
|
import "react";
|
|
7
7
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
8
|
-
import {
|
|
8
|
+
import { Dialog } from "@base-ui/react/dialog";
|
|
9
9
|
//#region src/core/drawer.tsx
|
|
10
10
|
var drawer_exports = /* @__PURE__ */ __exportAll({
|
|
11
|
-
Drawer: () => Drawer
|
|
11
|
+
Drawer: () => Drawer,
|
|
12
12
|
DrawerClose: () => DrawerClose,
|
|
13
13
|
DrawerContent: () => DrawerContent,
|
|
14
14
|
DrawerDescription: () => DrawerDescription,
|
|
@@ -19,69 +19,68 @@ var drawer_exports = /* @__PURE__ */ __exportAll({
|
|
|
19
19
|
DrawerTitle: () => DrawerTitle,
|
|
20
20
|
DrawerTrigger: () => DrawerTrigger
|
|
21
21
|
});
|
|
22
|
-
function Drawer
|
|
23
|
-
|
|
24
|
-
return /* @__PURE__ */ jsx(Drawer.Root, {
|
|
22
|
+
function Drawer({ ...props }) {
|
|
23
|
+
return /* @__PURE__ */ jsx(Dialog.Root, {
|
|
25
24
|
"data-slot": "drawer",
|
|
26
|
-
handleOnly: !draggable,
|
|
27
|
-
container: container ?? getContainer(),
|
|
28
25
|
...props
|
|
29
26
|
});
|
|
30
27
|
}
|
|
31
28
|
function DrawerTrigger({ ...props }) {
|
|
32
|
-
return /* @__PURE__ */ jsx(
|
|
29
|
+
return /* @__PURE__ */ jsx(Dialog.Trigger, {
|
|
33
30
|
"data-slot": "drawer-trigger",
|
|
34
31
|
...props
|
|
35
32
|
});
|
|
36
33
|
}
|
|
37
34
|
function DrawerPortal({ ...props }) {
|
|
38
|
-
return /* @__PURE__ */ jsx(
|
|
39
|
-
"data-slot": "drawer-portal",
|
|
40
|
-
...props
|
|
41
|
-
});
|
|
35
|
+
return /* @__PURE__ */ jsx(Dialog.Portal, { ...props });
|
|
42
36
|
}
|
|
43
37
|
function DrawerClose({ ...props }) {
|
|
44
|
-
return /* @__PURE__ */ jsx(
|
|
38
|
+
return /* @__PURE__ */ jsx(Dialog.Close, {
|
|
45
39
|
"data-slot": "drawer-close",
|
|
46
40
|
...props
|
|
47
41
|
});
|
|
48
42
|
}
|
|
49
43
|
function DrawerOverlay({ className, ...props }) {
|
|
50
|
-
return /* @__PURE__ */ jsx(
|
|
44
|
+
return /* @__PURE__ */ jsx(Dialog.Backdrop, {
|
|
51
45
|
"data-slot": "drawer-overlay",
|
|
52
|
-
className: cn(`
|
|
53
|
-
data-
|
|
54
|
-
bg-black/50`, OVERLAY_LAYER, className),
|
|
46
|
+
className: cn(`fixed inset-0 bg-black/50 transition-opacity duration-300
|
|
47
|
+
data-ending-style:opacity-0 data-starting-style:opacity-0`, OVERLAY_LAYER, className),
|
|
55
48
|
...props
|
|
56
49
|
});
|
|
57
50
|
}
|
|
58
|
-
function DrawerContent({ className, children, classNames = {}, handlebar, mask, ...props }) {
|
|
51
|
+
function DrawerContent({ className, children, classNames = {}, handlebar, mask = true, direction = "bottom", container, ...props }) {
|
|
52
|
+
const { getContainer } = useConfig();
|
|
53
|
+
const resolvedContainer = container ?? getContainer();
|
|
59
54
|
return /* @__PURE__ */ jsxs(DrawerPortal, {
|
|
60
|
-
|
|
61
|
-
children: [/* @__PURE__ */ jsx(DrawerOverlay, { className: cn(classNames?.mask
|
|
55
|
+
container: resolvedContainer,
|
|
56
|
+
children: [mask && /* @__PURE__ */ jsx(DrawerOverlay, { className: cn(classNames?.mask) }), /* @__PURE__ */ jsxs(Dialog.Popup, {
|
|
62
57
|
"data-slot": "drawer-content",
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
data-[
|
|
66
|
-
data-[
|
|
67
|
-
data-[
|
|
68
|
-
data-[
|
|
69
|
-
data-[
|
|
70
|
-
data-[
|
|
71
|
-
data-[
|
|
72
|
-
data-[
|
|
73
|
-
data-[
|
|
74
|
-
data-[
|
|
75
|
-
data-[
|
|
76
|
-
data-[
|
|
77
|
-
data-[
|
|
78
|
-
data-[
|
|
79
|
-
data-[
|
|
80
|
-
data-[
|
|
81
|
-
data-[
|
|
58
|
+
"data-direction": direction,
|
|
59
|
+
className: cn(`group/drawer-content bg-background fixed flex h-auto flex-col
|
|
60
|
+
transition-transform duration-300 ease-in-out`, OVERLAY_LAYER, `data-[direction=top]:inset-x-0 data-[direction=top]:top-0
|
|
61
|
+
data-[direction=top]:mb-24 data-[direction=top]:max-h-[80vh]
|
|
62
|
+
data-[direction=top]:w-full data-[direction=top]:rounded-b-lg
|
|
63
|
+
data-[direction=top]:border-b
|
|
64
|
+
data-[direction=top]:data-ending-style:-translate-y-full
|
|
65
|
+
data-[direction=top]:data-starting-style:-translate-y-full`, `data-[direction=bottom]:inset-x-0 data-[direction=bottom]:bottom-0
|
|
66
|
+
data-[direction=bottom]:mt-24 data-[direction=bottom]:max-h-[80vh]
|
|
67
|
+
data-[direction=bottom]:w-full data-[direction=bottom]:rounded-t-lg
|
|
68
|
+
data-[direction=bottom]:border-t
|
|
69
|
+
data-[direction=bottom]:data-ending-style:translate-y-full
|
|
70
|
+
data-[direction=bottom]:data-starting-style:translate-y-full`, `data-[direction=right]:inset-y-0 data-[direction=right]:right-0
|
|
71
|
+
data-[direction=right]:h-full data-[direction=right]:w-3/4
|
|
72
|
+
data-[direction=right]:border-l
|
|
73
|
+
data-[direction=right]:data-ending-style:translate-x-full
|
|
74
|
+
data-[direction=right]:data-starting-style:translate-x-full
|
|
75
|
+
data-[direction=right]:sm:max-w-sm`, `data-[direction=left]:inset-y-0 data-[direction=left]:left-0
|
|
76
|
+
data-[direction=left]:h-full data-[direction=left]:w-3/4
|
|
77
|
+
data-[direction=left]:border-r
|
|
78
|
+
data-[direction=left]:data-ending-style:-translate-x-full
|
|
79
|
+
data-[direction=left]:data-starting-style:-translate-x-full
|
|
80
|
+
data-[direction=left]:sm:max-w-sm`, className),
|
|
82
81
|
...props,
|
|
83
82
|
children: [handlebar && /* @__PURE__ */ jsx("div", { className: cn(`bg-muted mx-auto mt-4 hidden h-2 w-25 shrink-0 rounded-full
|
|
84
|
-
group-data-[
|
|
83
|
+
group-data-[direction=bottom]/drawer-content:block`, classNames?.handlebar) }), children]
|
|
85
84
|
})]
|
|
86
85
|
});
|
|
87
86
|
}
|
|
@@ -89,9 +88,9 @@ function DrawerHeader({ className, ...props }) {
|
|
|
89
88
|
return /* @__PURE__ */ jsx("div", {
|
|
90
89
|
"data-slot": "drawer-header",
|
|
91
90
|
className: cn(`flex flex-col gap-0.5 p-4
|
|
92
|
-
group-data-[
|
|
93
|
-
group-data-[
|
|
94
|
-
md:
|
|
91
|
+
group-data-[direction=bottom]/drawer-content:text-center
|
|
92
|
+
group-data-[direction=top]/drawer-content:text-center md:gap-1.5
|
|
93
|
+
md:text-left`, className),
|
|
95
94
|
...props
|
|
96
95
|
});
|
|
97
96
|
}
|
|
@@ -103,20 +102,20 @@ function DrawerFooter({ className, ...props }) {
|
|
|
103
102
|
});
|
|
104
103
|
}
|
|
105
104
|
function DrawerTitle({ className, ...props }) {
|
|
106
|
-
return /* @__PURE__ */ jsx(
|
|
105
|
+
return /* @__PURE__ */ jsx(Dialog.Title, {
|
|
107
106
|
"data-slot": "drawer-title",
|
|
108
107
|
className: cn("text-foreground font-semibold", className),
|
|
109
108
|
...props
|
|
110
109
|
});
|
|
111
110
|
}
|
|
112
111
|
function DrawerDescription({ className, ...props }) {
|
|
113
|
-
return /* @__PURE__ */ jsx(
|
|
112
|
+
return /* @__PURE__ */ jsx(Dialog.Description, {
|
|
114
113
|
"data-slot": "drawer-description",
|
|
115
114
|
className: cn("text-muted-foreground text-sm", className),
|
|
116
115
|
...props
|
|
117
116
|
});
|
|
118
117
|
}
|
|
119
118
|
//#endregion
|
|
120
|
-
export { Drawer
|
|
119
|
+
export { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, drawer_exports };
|
|
121
120
|
|
|
122
121
|
//# sourceMappingURL=drawer.mjs.map
|
package/dist/core/drawer.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"drawer.mjs","names":["
|
|
1
|
+
{"version":3,"file":"drawer.mjs","names":["DialogPrimitive"],"sources":["../../src/core/drawer.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport { Dialog as DialogPrimitive } from '@base-ui/react/dialog';\n\nimport { useConfig } from '@repo/ui/providers';\nimport { cn } from '@repo/ui/utils';\n\nimport { OVERLAY_LAYER } from '../lib/z-layers';\n\n/*\n * Drawer rebuilt on Base UI's Dialog primitives (ui-kit#375, Decision #2) —\n * no longer `vaul`. Base UI has no dedicated Drawer, so the side-sheet is a\n * Dialog whose popup is anchored to an edge and slides in/out.\n *\n * Consequences of dropping vaul:\n * - No drag-to-dismiss / snap points. The `handlebar` stays as a visual\n * affordance on bottom drawers but is no longer draggable.\n * - `direction` is a local `DrawerContent` prop (top/bottom/left/right) exposed\n * as `data-direction`, which drives both the popup's own placement/slide and\n * the `group-data-[direction=…]` hooks the header/handlebar rely on. It\n * replaces vaul's `data-vaul-drawer-direction`.\n * - Pointer-outside dismissal (`maskClosable`) is a root concern\n * (`disablePointerDismissal`), and mask/modal behaviour is driven by the\n * consumer — see `organisms/drawer`.\n *\n * Retained local patches: `OVERLAY_LAYER` (#359) over upstream's z-index, the\n * themed portal `container` (default `useConfig().getContainer()`), and the\n * `classNames`/`handlebar`/`mask` custom props.\n */\ntype Direction = 'top' | 'bottom' | 'left' | 'right';\n\nfunction Drawer({\n ...props\n}: React.ComponentProps<typeof DialogPrimitive.Root>) {\n return <DialogPrimitive.Root data-slot=\"drawer\" {...props} />;\n}\n\nfunction DrawerTrigger({\n ...props\n}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {\n return <DialogPrimitive.Trigger data-slot=\"drawer-trigger\" {...props} />;\n}\n\nfunction DrawerPortal({\n ...props\n}: React.ComponentProps<typeof DialogPrimitive.Portal>) {\n return <DialogPrimitive.Portal {...props} />;\n}\n\nfunction DrawerClose({\n ...props\n}: React.ComponentProps<typeof DialogPrimitive.Close>) {\n return <DialogPrimitive.Close data-slot=\"drawer-close\" {...props} />;\n}\n\nfunction DrawerOverlay({\n className,\n ...props\n}: React.ComponentProps<typeof DialogPrimitive.Backdrop>) {\n return (\n <DialogPrimitive.Backdrop\n data-slot=\"drawer-overlay\"\n className={cn(\n `fixed inset-0 bg-black/50 transition-opacity duration-300\n data-ending-style:opacity-0 data-starting-style:opacity-0`,\n OVERLAY_LAYER,\n className,\n )}\n {...props}\n />\n );\n}\n\ninterface CustomContentProps {\n classNames?: Record<string, string>;\n handlebar?: boolean;\n mask?: boolean;\n direction?: Direction;\n container?: HTMLElement;\n}\n\nfunction DrawerContent({\n className,\n children,\n classNames = {},\n handlebar,\n mask = true,\n direction = 'bottom',\n container,\n ...props\n}: React.ComponentProps<typeof DialogPrimitive.Popup> & CustomContentProps) {\n const { getContainer } = useConfig();\n const resolvedContainer = container ?? getContainer();\n\n return (\n <DrawerPortal container={resolvedContainer}>\n {mask && <DrawerOverlay className={cn(classNames?.mask)} />}\n <DialogPrimitive.Popup\n data-slot=\"drawer-content\"\n data-direction={direction}\n className={cn(\n `group/drawer-content bg-background fixed flex h-auto flex-col\n transition-transform duration-300 ease-in-out`,\n OVERLAY_LAYER,\n `data-[direction=top]:inset-x-0 data-[direction=top]:top-0\n data-[direction=top]:mb-24 data-[direction=top]:max-h-[80vh]\n data-[direction=top]:w-full data-[direction=top]:rounded-b-lg\n data-[direction=top]:border-b\n data-[direction=top]:data-ending-style:-translate-y-full\n data-[direction=top]:data-starting-style:-translate-y-full`,\n `data-[direction=bottom]:inset-x-0 data-[direction=bottom]:bottom-0\n data-[direction=bottom]:mt-24 data-[direction=bottom]:max-h-[80vh]\n data-[direction=bottom]:w-full data-[direction=bottom]:rounded-t-lg\n data-[direction=bottom]:border-t\n data-[direction=bottom]:data-ending-style:translate-y-full\n data-[direction=bottom]:data-starting-style:translate-y-full`,\n `data-[direction=right]:inset-y-0 data-[direction=right]:right-0\n data-[direction=right]:h-full data-[direction=right]:w-3/4\n data-[direction=right]:border-l\n data-[direction=right]:data-ending-style:translate-x-full\n data-[direction=right]:data-starting-style:translate-x-full\n data-[direction=right]:sm:max-w-sm`,\n `data-[direction=left]:inset-y-0 data-[direction=left]:left-0\n data-[direction=left]:h-full data-[direction=left]:w-3/4\n data-[direction=left]:border-r\n data-[direction=left]:data-ending-style:-translate-x-full\n data-[direction=left]:data-starting-style:-translate-x-full\n data-[direction=left]:sm:max-w-sm`,\n className,\n )}\n {...props}\n >\n {handlebar && (\n <div\n className={cn(\n `bg-muted mx-auto mt-4 hidden h-2 w-25 shrink-0 rounded-full\n group-data-[direction=bottom]/drawer-content:block`,\n classNames?.handlebar,\n )}\n />\n )}\n {children}\n </DialogPrimitive.Popup>\n </DrawerPortal>\n );\n}\n\nfunction DrawerHeader({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n <div\n data-slot=\"drawer-header\"\n className={cn(\n `flex flex-col gap-0.5 p-4\n group-data-[direction=bottom]/drawer-content:text-center\n group-data-[direction=top]/drawer-content:text-center md:gap-1.5\n md:text-left`,\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction DrawerFooter({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n <div\n data-slot=\"drawer-footer\"\n className={cn('mt-auto flex flex-col gap-2 p-4', className)}\n {...props}\n />\n );\n}\n\nfunction DrawerTitle({\n className,\n ...props\n}: React.ComponentProps<typeof DialogPrimitive.Title>) {\n return (\n <DialogPrimitive.Title\n data-slot=\"drawer-title\"\n className={cn('text-foreground font-semibold', className)}\n {...props}\n />\n );\n}\n\nfunction DrawerDescription({\n className,\n ...props\n}: React.ComponentProps<typeof DialogPrimitive.Description>) {\n return (\n <DialogPrimitive.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 DrawerPortal,\n DrawerOverlay,\n DrawerTrigger,\n DrawerClose,\n DrawerContent,\n DrawerHeader,\n DrawerFooter,\n DrawerTitle,\n DrawerDescription,\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAiCA,SAAS,OAAO,EACd,GAAG,SACiD;CACpD,OAAO,oBAACA,OAAgB,MAAjB;EAAsB,aAAU;EAAS,GAAI;CAAQ,CAAA;AAC9D;AAEA,SAAS,cAAc,EACrB,GAAG,SACoD;CACvD,OAAO,oBAACA,OAAgB,SAAjB;EAAyB,aAAU;EAAiB,GAAI;CAAQ,CAAA;AACzE;AAEA,SAAS,aAAa,EACpB,GAAG,SACmD;CACtD,OAAO,oBAACA,OAAgB,QAAjB,EAAwB,GAAI,MAAQ,CAAA;AAC7C;AAEA,SAAS,YAAY,EACnB,GAAG,SACkD;CACrD,OAAO,oBAACA,OAAgB,OAAjB;EAAuB,aAAU;EAAe,GAAI;CAAQ,CAAA;AACrE;AAEA,SAAS,cAAc,EACrB,WACA,GAAG,SACqD;CACxD,OACE,oBAACA,OAAgB,UAAjB;EACE,aAAU;EACV,WAAW,GACT;oEAEA,eACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAUA,SAAS,cAAc,EACrB,WACA,UACA,aAAa,CAAC,GACd,WACA,OAAO,MACP,YAAY,UACZ,WACA,GAAG,SACuE;CAC1E,MAAM,EAAE,iBAAiB,UAAU;CACnC,MAAM,oBAAoB,aAAa,aAAa;CAEpD,OACE,qBAAC,cAAD;EAAc,WAAW;EAAzB,UAAA,CACG,QAAQ,oBAAC,eAAD,EAAe,WAAW,GAAG,YAAY,IAAI,EAAI,CAAA,GAC1D,qBAACA,OAAgB,OAAjB;GACE,aAAU;GACV,kBAAgB;GAChB,WAAW,GACT;0DAEA,eACA;;;;;uEAMA;;;;;yEAMA;;;;;+CAMA;;;;;8CAMA,SACF;GACA,GAAI;GAjCN,UAAA,CAmCG,aACC,oBAAC,OAAD,EACE,WAAW,GACT;mEAEA,YAAY,SACd,EACD,CAAA,GAEF,QACoB;EACX,CAAA,CAAA;;AAElB;AAEA,SAAS,aAAa,EAAE,WAAW,GAAG,SAAsC;CAC1E,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT;;;uBAIA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,aAAa,EAAE,WAAW,GAAG,SAAsC;CAC1E,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,mCAAmC,SAAS;EAC1D,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,YAAY,EACnB,WACA,GAAG,SACkD;CACrD,OACE,oBAACA,OAAgB,OAAjB;EACE,aAAU;EACV,WAAW,GAAG,iCAAiC,SAAS;EACxD,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,kBAAkB,EACzB,WACA,GAAG,SACwD;CAC3D,OACE,oBAACA,OAAgB,aAAjB;EACE,aAAU;EACV,WAAW,GAAG,iCAAiC,SAAS;EACxD,GAAI;CACL,CAAA;AAEL"}
|
package/dist/core/label.d.mts
CHANGED
|
@@ -1,2 +1 @@
|
|
|
1
|
-
import "react";
|
|
2
|
-
import "@radix-ui/react-label";
|
|
1
|
+
import "react";
|
package/dist/core/label.mjs
CHANGED
|
@@ -1,13 +1,11 @@
|
|
|
1
|
-
"use client";
|
|
2
1
|
import { __exportAll } from "../_virtual/_rolldown/runtime.mjs";
|
|
3
2
|
import { cn } from "../utils.mjs";
|
|
4
3
|
import "react";
|
|
5
4
|
import { jsx } from "react/jsx-runtime";
|
|
6
|
-
import * as LabelPrimitive from "@radix-ui/react-label";
|
|
7
5
|
//#region src/core/label.tsx
|
|
8
6
|
var label_exports = /* @__PURE__ */ __exportAll({ Label: () => Label });
|
|
9
7
|
function Label({ className, ...props }) {
|
|
10
|
-
return /* @__PURE__ */ jsx(
|
|
8
|
+
return /* @__PURE__ */ jsx("label", {
|
|
11
9
|
"data-slot": "label",
|
|
12
10
|
className: cn(`flex items-center gap-2 text-sm leading-none font-medium select-none
|
|
13
11
|
group-data-[disabled=true]:pointer-events-none
|
package/dist/core/label.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"label.mjs","names":[],"sources":["../../src/core/label.tsx"],"sourcesContent":["
|
|
1
|
+
{"version":3,"file":"label.mjs","names":[],"sources":["../../src/core/label.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '@repo/ui/utils';\n\nfunction Label({ className, ...props }: React.ComponentProps<'label'>) {\n return (\n <label\n data-slot=\"label\"\n className={cn(\n `flex items-center gap-2 text-sm leading-none font-medium select-none\n group-data-[disabled=true]:pointer-events-none\n group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed\n peer-disabled:opacity-50`,\n className,\n )}\n {...props}\n />\n );\n}\n\nexport { Label };\n"],"mappings":";;;;;;AAIA,SAAS,MAAM,EAAE,WAAW,GAAG,SAAwC;CACrE,OACE,oBAAC,SAAD;EACE,aAAU;EACV,WAAW,GACT;;;mCAIA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}
|
package/dist/core/popover.d.mts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import "react";
|
|
2
|
-
import "@
|
|
2
|
+
import { Popover } from "@base-ui/react/popover";
|