@datum-cloud/datum-ui 3.7.1 → 3.10.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/dist/app-navigation/index.mjs +1 -1
- package/dist/{app-navigation-Bcx7hr9L.mjs → app-navigation-DyNZwlSG.mjs} +4 -4
- package/dist/assistant/index.mjs +9 -8
- package/dist/autocomplete/index.mjs +1 -1
- package/dist/{autocomplete-fSSmRLYK.mjs → autocomplete-CrCbO2VS.mjs} +12 -6
- package/dist/autosearch/index.mjs +3 -3
- package/dist/badge/index.mjs +182 -1
- package/dist/button/index.mjs +2 -2
- package/dist/{button-Dj6cKrWj.mjs → button-Cn4KagBO.mjs} +1 -1
- package/dist/{button-BU8TEbJ5.mjs → button-IK-Lnu_9.mjs} +1 -1
- package/dist/button-group/index.mjs +1 -1
- package/dist/{button-group-C3GKo-0p.mjs → button-group-DJ6X1SSj.mjs} +2 -2
- package/dist/{calendar-date-picker-BUwgVaI1.mjs → calendar-date-picker-BRKs56gR.mjs} +1 -1
- package/dist/card/index.mjs +1 -1
- package/dist/{card-save-bar-0XDpAJo_.mjs → card-save-bar-Te8jf-ie.mjs} +1 -1
- package/dist/checkbox/index.mjs +1 -1
- package/dist/checkbox-BAo5sbHk.mjs +84 -0
- package/dist/collapsible/index.mjs +1 -6
- package/dist/collapsible-B-KP3JZ-.mjs +104 -0
- package/dist/components/base/checkbox/checkbox.d.ts +11 -3
- package/dist/components/base/collapsible/collapsible.d.ts +28 -0
- package/dist/components/base/collapsible/index.d.ts +1 -1
- package/dist/components/base/radio-group/radio-group.d.ts +11 -5
- package/dist/components/base/spinner/index.d.ts +1 -1
- package/dist/components/base/spinner/spinner.d.ts +11 -0
- package/dist/components/base/switch/switch.d.ts +6 -1
- package/dist/components/base/typography/typography.d.ts +1 -1
- package/dist/components/features/_shared/copy-state-icon.d.ts +12 -0
- package/dist/components/features/_shared/index.d.ts +2 -0
- package/dist/components/features/_shared/motion-chip.d.ts +293 -0
- package/dist/components/features/logs/hooks/use-logs-url-state.d.ts +59 -0
- package/dist/components/features/logs/index.d.ts +4 -1
- package/dist/components/features/logs/utils/facet-counts.d.ts +50 -0
- package/dist/components/features/logs/utils/facets.d.ts +2 -0
- package/dist/components/features/logs/utils/index.d.ts +4 -0
- package/dist/components/features/logs/utils/url-state.d.ts +61 -0
- package/dist/components/icons/spinner.icon.d.ts +17 -3
- package/dist/copy-state-icon-DMvXXsZm.mjs +61 -0
- package/dist/data-table/index.mjs +1 -1
- package/dist/{data-table-s2YrE79S.mjs → data-table-DFUnUydN.mjs} +8 -8
- package/dist/date-picker/index.mjs +3 -3
- package/dist/date-time-picker/index.mjs +1 -1
- package/dist/{date-time-picker-CLdaGiGC.mjs → date-time-picker-BRMm2QSz.mjs} +1 -1
- package/dist/{date-time-range-picker-RZX4CS4b.mjs → date-time-range-picker-CqGGJTLS.mjs} +20 -9
- package/dist/dropzone/index.mjs +1 -1
- package/dist/{dropzone-Cer9E-VH.mjs → dropzone-qKYfSe7o.mjs} +1 -1
- package/dist/empty-content/index.mjs +1 -1
- package/dist/{empty-content-B2FZ9cyt.mjs → empty-content-CTMHak36.mjs} +1 -1
- package/dist/field-styles-D-FJatHt.mjs +31 -0
- package/dist/form/index.mjs +1 -1
- package/dist/form/stepper/index.mjs +1 -1
- package/dist/{form-C4XcxxjK.mjs → form-VdbSqDjL.mjs} +20 -13
- package/dist/grouped-table/index.mjs +1 -1
- package/dist/{grouped-table-32RO2v7U.mjs → grouped-table-B4HzLXq6.mjs} +3 -3
- package/dist/hooks/index.mjs +1 -1
- package/dist/hooks/use-breakpoint.d.ts +7 -2
- package/dist/icons/index.mjs +1 -1
- package/dist/index.mjs +37 -37
- package/dist/{layers-XEND2WKv.mjs → layers-BC1Ny49w.mjs} +11 -3
- package/dist/loader-overlay/index.mjs +1 -1
- package/dist/{loader-overlay-JvB8IQo3.mjs → loader-overlay-DP0pvHuG.mjs} +1 -1
- package/dist/logs/index.mjs +412 -115
- package/dist/map/index.mjs +1 -1
- package/dist/more-actions/index.mjs +1 -1
- package/dist/{more-actions-D9k1ILzT.mjs → more-actions-DXQiV-bN.mjs} +2 -2
- package/dist/motion-chip-BczV7spP.mjs +52 -0
- package/dist/multi-select/index.mjs +1 -1
- package/dist/{multi-select-BUgx6VZF.mjs → multi-select-DwcsJdHt.mjs} +82 -66
- package/dist/picker/index.mjs +2 -2
- package/dist/{picker-C0h30DHf.mjs → picker-BHPtncpv.mjs} +2 -2
- package/dist/radio-group/index.mjs +1 -1
- package/dist/radio-group-Boxi2hm0.mjs +83 -0
- package/dist/responsive-dropdown/index.mjs +1 -1
- package/dist/{responsive-dropdown-DsWgpE_i.mjs → responsive-dropdown-B9cDUeHt.mjs} +1 -1
- package/dist/responsive-popover/index.mjs +1 -1
- package/dist/{responsive-popover-DJYd8lOK.mjs → responsive-popover-B_pUxrZ1.mjs} +1 -1
- package/dist/rich-text-editor/index.mjs +1 -1
- package/dist/{rich-text-editor-ibngjhQV.mjs → rich-text-editor-CPd_6vdZ.mjs} +2 -2
- package/dist/select/index.mjs +1 -1
- package/dist/{select-DemYhwnG.mjs → select-B0Xlz-wD.mjs} +3 -2
- package/dist/{select-jgK6wyXj.mjs → select-CGsHf70u.mjs} +7 -2
- package/dist/spinner/index.mjs +1 -1
- package/dist/spinner-DSlDJdWl.mjs +23 -0
- package/dist/spinner.icon-BiUnMAxw.mjs +104 -0
- package/dist/switch/index.mjs +1 -1
- package/dist/switch-IduVwiPZ.mjs +114 -0
- package/dist/tabs/index.mjs +1 -1
- package/dist/tag-input/index.mjs +1 -1
- package/dist/{tag-input-DAMY703F.mjs → tag-input-a3ktkGrH.mjs} +39 -32
- package/dist/task-queue/index.mjs +1 -1
- package/dist/{task-queue-dropdown-BgQSGDwg.mjs → task-queue-dropdown-BflEFiMi.mjs} +4 -4
- package/dist/time-picker/index.mjs +1 -1
- package/dist/{time-picker-DgHjdcMZ.mjs → time-picker-BFwH-Vd3.mjs} +1 -1
- package/dist/{to-api-format-EZInfj0_.mjs → to-api-format-BiWOTFha.mjs} +4 -4
- package/dist/transfer/index.mjs +1 -1
- package/dist/{transfer-91lwTOhX.mjs → transfer-DGUeAQUL.mjs} +1 -1
- package/dist/{use-breakpoint-zY_JYINK.mjs → use-breakpoint-Ce5tS4cU.mjs} +11 -5
- package/dist/{use-option-picker-CBMU72LU.mjs → use-option-picker-DXY2SNnT.mjs} +2 -2
- package/dist/utils/field-styles.d.ts +21 -0
- package/package.json +1 -4
- package/dist/badge-D7A6GfWn.mjs +0 -182
- package/dist/checkbox-CNljVnKj.mjs +0 -28
- package/dist/radio-group-0RxTmRnF.mjs +0 -43
- package/dist/spinner-DjEpx6Q3.mjs +0 -13
- package/dist/spinner.icon-D0SKuGFG.mjs +0 -47
- package/dist/switch-CWvVN9ea.mjs +0 -33
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { C as SidebarProvider, S as SidebarGroupLabel, _ as SidebarMenuSubButton, a as SidebarInput, b as SidebarGroupAction, c as SidebarSeparator, d as SidebarMenuAction, f as SidebarMenuBadge, g as SidebarMenuSub, h as SidebarMenuSkeleton, i as SidebarHeader, l as SidebarTrigger, m as SidebarMenuItem, n as SidebarContent, o as SidebarInset, p as SidebarMenuButton, r as SidebarFooter, s as SidebarRail, t as Sidebar, u as SidebarMenu, v as SidebarMenuSubItem, w as useSidebar, x as SidebarGroupContent, y as SidebarGroup } from "../sidebar-DWnxQWQ8.mjs";
|
|
2
|
-
import { a as hasActiveDescendant, i as findItemByHref, n as NavMenu, o as isNavItemActive, r as NavMenuItem, s as normalizePath, t as AppNavigation } from "../app-navigation-
|
|
2
|
+
import { a as hasActiveDescendant, i as findItemByHref, n as NavMenu, o as isNavItemActive, r as NavMenuItem, s as normalizePath, t as AppNavigation } from "../app-navigation-DyNZwlSG.mjs";
|
|
3
3
|
export { AppNavigation, NavMenu, NavMenuItem, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, findItemByHref, hasActiveDescendant, isNavItemActive, normalizePath, useSidebar };
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import { c as SidebarSeparator, g as SidebarMenuSub, h as SidebarMenuSkeleton, i as SidebarHeader, l as SidebarTrigger, m as SidebarMenuItem, n as SidebarContent, p as SidebarMenuButton, r as SidebarFooter, t as Sidebar, u as SidebarMenu, w as useSidebar, x as SidebarGroupContent, y as SidebarGroup } from "./sidebar-DWnxQWQ8.mjs";
|
|
2
2
|
import { t as cn } from "./utils-CTIuhCOs.mjs";
|
|
3
3
|
import { n as EASE } from "./motion-DOrRbLmy.mjs";
|
|
4
|
-
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "./collapsible/index.mjs";
|
|
5
4
|
import { t as Icon } from "./icon-wrapper-CIk2th6R.mjs";
|
|
6
5
|
import { ChevronRight, ExternalLinkIcon } from "lucide-react";
|
|
7
6
|
import { createContext, memo, use, useCallback, useEffect, useMemo, useRef, useState } from "react";
|
|
8
7
|
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
|
|
9
8
|
import { motion } from "motion/react";
|
|
9
|
+
import { Content, Root, Trigger } from "@radix-ui/react-collapsible";
|
|
10
10
|
// src/components/features/app-navigation/nav-menu/active-path.ts
|
|
11
11
|
/**
|
|
12
12
|
* Pure active-path predicates for the nav menu.
|
|
@@ -284,7 +284,7 @@ function NavCollapsibleItem({ item, level }) {
|
|
|
284
284
|
item.showSeparatorAbove && /* @__PURE__ */ jsx(SidebarSeparator, { className: "my-2" }),
|
|
285
285
|
/* @__PURE__ */ jsx(SidebarMenu, {
|
|
286
286
|
className: rowInsetFor(level),
|
|
287
|
-
children: /* @__PURE__ */ jsx(
|
|
287
|
+
children: /* @__PURE__ */ jsx(Root, {
|
|
288
288
|
asChild: true,
|
|
289
289
|
open: panelOpen,
|
|
290
290
|
onOpenChange: (open) => {
|
|
@@ -304,7 +304,7 @@ function NavCollapsibleItem({ item, level }) {
|
|
|
304
304
|
className: "group/collapsible",
|
|
305
305
|
children: /* @__PURE__ */ jsxs(SidebarMenuItem, {
|
|
306
306
|
className: NAV_STYLES.menuItem,
|
|
307
|
-
children: [/* @__PURE__ */ jsx(
|
|
307
|
+
children: [/* @__PURE__ */ jsx(Trigger, {
|
|
308
308
|
asChild: true,
|
|
309
309
|
className: "w-full",
|
|
310
310
|
children: /* @__PURE__ */ jsxs(NavSidebarMenuButton, {
|
|
@@ -328,7 +328,7 @@ function NavCollapsibleItem({ item, level }) {
|
|
|
328
328
|
})
|
|
329
329
|
]
|
|
330
330
|
})
|
|
331
|
-
}), /* @__PURE__ */ jsx(
|
|
331
|
+
}), /* @__PURE__ */ jsx(Content, {
|
|
332
332
|
className: "data-[state=open]:animate-collapsible-down data-[state=closed]:animate-collapsible-up overflow-hidden group-data-[collapsible=icon]:hidden",
|
|
333
333
|
children: /* @__PURE__ */ jsx("div", {
|
|
334
334
|
style: {
|
package/dist/assistant/index.mjs
CHANGED
|
@@ -2,10 +2,11 @@ import { t as Tooltip } from "../tooltip-OIySjJWW.mjs";
|
|
|
2
2
|
import { t as Icon } from "../icon-wrapper-CIk2th6R.mjs";
|
|
3
3
|
import { t as cn } from "../utils-CTIuhCOs.mjs";
|
|
4
4
|
import { a as DropdownMenuRadioGroup, c as DropdownMenuTrigger, i as DropdownMenuLabel, o as DropdownMenuRadioItem, r as DropdownMenuContent, s as DropdownMenuSeparator, t as DropdownMenu } from "../dropdown-menu-CjgTr8Ab.mjs";
|
|
5
|
-
import { t as
|
|
5
|
+
import { t as CopyStateIcon } from "../copy-state-icon-DMvXXsZm.mjs";
|
|
6
|
+
import { t as Button } from "../button-Cn4KagBO.mjs";
|
|
6
7
|
import { n as EASE, t as DURATION } from "../motion-DOrRbLmy.mjs";
|
|
7
8
|
import { t as Dialog } from "../dialog-C8RXIQYm.mjs";
|
|
8
|
-
import { Archive, ArchiveRestore, ArrowDown, ArrowRight, ArrowUp, Box, Brain, Check, ChevronDown, ClipboardList, Clock, Code,
|
|
9
|
+
import { Archive, ArchiveRestore, ArrowDown, ArrowRight, ArrowUp, Box, Brain, Check, ChevronDown, ClipboardList, Clock, Code, Database, Download, Globe, Laptop, Link, MapPin, MessagesSquare, Mic, MicOff, Network, PanelLeft, Plus, RotateCw, Send, Server, Shield, Split, Square, SquarePen, Trash2, X } from "lucide-react";
|
|
9
10
|
import { Fragment, createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
|
|
10
11
|
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
|
|
11
12
|
import { AnimatePresence, motion } from "motion/react";
|
|
@@ -843,12 +844,12 @@ function MessageActions({ msg }) {
|
|
|
843
844
|
onClick: handleCopy,
|
|
844
845
|
"aria-label": "Copy message",
|
|
845
846
|
className: "hover:text-foreground rounded p-1 transition-colors",
|
|
846
|
-
children:
|
|
847
|
-
|
|
848
|
-
className: "size-3.5"
|
|
849
|
-
|
|
850
|
-
|
|
851
|
-
|
|
847
|
+
children: /* @__PURE__ */ jsx(CopyStateIcon, {
|
|
848
|
+
copied,
|
|
849
|
+
className: "size-3.5",
|
|
850
|
+
size: 16,
|
|
851
|
+
strokeWidth: 1,
|
|
852
|
+
absoluteStrokeWidth: true
|
|
852
853
|
})
|
|
853
854
|
})
|
|
854
855
|
}), /* @__PURE__ */ jsx(Tooltip, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export { t as Autocomplete } from "../autocomplete-
|
|
1
|
+
export { t as Autocomplete } from "../autocomplete-CrCbO2VS.mjs";
|
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
import { t as cn } from "./utils-CTIuhCOs.mjs";
|
|
2
|
-
import { n as OptionList, t as useOptionPicker } from "./use-option-picker-
|
|
3
|
-
import { t as ResponsivePopover } from "./responsive-popover-
|
|
4
|
-
import { t as
|
|
2
|
+
import { n as OptionList, t as useOptionPicker } from "./use-option-picker-DXY2SNnT.mjs";
|
|
3
|
+
import { t as ResponsivePopover } from "./responsive-popover-B_pUxrZ1.mjs";
|
|
4
|
+
import { n as fieldPlaceholderClassName, r as fieldTriggerClassName, t as fieldIconClassName } from "./field-styles-D-FJatHt.mjs";
|
|
5
|
+
import { t as Icon } from "./icon-wrapper-CIk2th6R.mjs";
|
|
6
|
+
import { t as LoaderOverlay } from "./loader-overlay-DP0pvHuG.mjs";
|
|
5
7
|
import { ChevronDown } from "lucide-react";
|
|
6
8
|
import * as React from "react";
|
|
7
9
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
@@ -17,7 +19,7 @@ function Trigger({ ref, selectedOption, createdValue, renderValue, placeholder,
|
|
|
17
19
|
children: createdValue
|
|
18
20
|
});
|
|
19
21
|
else displayContent = /* @__PURE__ */ jsx("span", {
|
|
20
|
-
className: "
|
|
22
|
+
className: cn("truncate", fieldPlaceholderClassName),
|
|
21
23
|
children: placeholder
|
|
22
24
|
});
|
|
23
25
|
return /* @__PURE__ */ jsxs("button", {
|
|
@@ -27,7 +29,7 @@ function Trigger({ ref, selectedOption, createdValue, renderValue, placeholder,
|
|
|
27
29
|
role: "combobox",
|
|
28
30
|
"aria-expanded": open,
|
|
29
31
|
disabled: disabled || loading,
|
|
30
|
-
className: cn(
|
|
32
|
+
className: cn(fieldTriggerClassName, "relative h-10 justify-between py-2", (disabled || loading) && "cursor-not-allowed opacity-50", className),
|
|
31
33
|
...rest,
|
|
32
34
|
children: [
|
|
33
35
|
loading && /* @__PURE__ */ jsx(LoaderOverlay, {}),
|
|
@@ -35,7 +37,11 @@ function Trigger({ ref, selectedOption, createdValue, renderValue, placeholder,
|
|
|
35
37
|
className: "min-w-0 flex-1",
|
|
36
38
|
children: displayContent
|
|
37
39
|
}),
|
|
38
|
-
/* @__PURE__ */ jsx(
|
|
40
|
+
/* @__PURE__ */ jsx(Icon, {
|
|
41
|
+
icon: ChevronDown,
|
|
42
|
+
className: fieldIconClassName,
|
|
43
|
+
"aria-hidden": "true"
|
|
44
|
+
})
|
|
39
45
|
]
|
|
40
46
|
});
|
|
41
47
|
}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { t as cn } from "../utils-CTIuhCOs.mjs";
|
|
2
|
-
import { t as Button } from "../button-
|
|
2
|
+
import { t as Button } from "../button-Cn4KagBO.mjs";
|
|
3
3
|
import { t as Input } from "../input-DsT5qkJn.mjs";
|
|
4
|
-
import { n as OptionList, t as useOptionPicker } from "../use-option-picker-
|
|
5
|
-
import { t as ResponsivePopover } from "../responsive-popover-
|
|
4
|
+
import { n as OptionList, t as useOptionPicker } from "../use-option-picker-DXY2SNnT.mjs";
|
|
5
|
+
import { t as ResponsivePopover } from "../responsive-popover-B_pUxrZ1.mjs";
|
|
6
6
|
import { t as Tooltip } from "../tooltip-OIySjJWW.mjs";
|
|
7
7
|
import { AlertCircle, Loader2, X } from "lucide-react";
|
|
8
8
|
import * as React from "react";
|
package/dist/badge/index.mjs
CHANGED
|
@@ -1 +1,182 @@
|
|
|
1
|
-
|
|
1
|
+
import { t as cn } from "../utils-CTIuhCOs.mjs";
|
|
2
|
+
import { cva } from "class-variance-authority";
|
|
3
|
+
import "react";
|
|
4
|
+
import { jsx } from "react/jsx-runtime";
|
|
5
|
+
// src/components/base/badge/badge.tsx
|
|
6
|
+
/**
|
|
7
|
+
* Datum Badge Component
|
|
8
|
+
* Similar to Button component but with badge-specific styling
|
|
9
|
+
* Supports types: primary, secondary, tertiary, quaternary, warning, danger, success
|
|
10
|
+
* Supports themes: solid, outline, light
|
|
11
|
+
*/
|
|
12
|
+
const badgeVariants = cva("inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-all focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2", {
|
|
13
|
+
variants: {
|
|
14
|
+
type: {
|
|
15
|
+
primary: "",
|
|
16
|
+
secondary: "",
|
|
17
|
+
tertiary: "",
|
|
18
|
+
quaternary: "",
|
|
19
|
+
info: "",
|
|
20
|
+
warning: "",
|
|
21
|
+
danger: "",
|
|
22
|
+
success: "",
|
|
23
|
+
muted: ""
|
|
24
|
+
},
|
|
25
|
+
theme: {
|
|
26
|
+
solid: "",
|
|
27
|
+
outline: "border",
|
|
28
|
+
light: "border-transparent"
|
|
29
|
+
}
|
|
30
|
+
},
|
|
31
|
+
compoundVariants: [
|
|
32
|
+
{
|
|
33
|
+
type: "primary",
|
|
34
|
+
theme: "solid",
|
|
35
|
+
className: "border-transparent bg-[var(--color-badge-primary)] text-[var(--color-badge-primary-foreground)]"
|
|
36
|
+
},
|
|
37
|
+
{
|
|
38
|
+
type: "primary",
|
|
39
|
+
theme: "outline",
|
|
40
|
+
className: "border-[var(--color-badge-primary)] text-[var(--color-badge-primary)] dark:border-[var(--color-badge-primary)] dark:text-[var(--color-badge-primary)]"
|
|
41
|
+
},
|
|
42
|
+
{
|
|
43
|
+
type: "primary",
|
|
44
|
+
theme: "light",
|
|
45
|
+
className: "text-[var(--color-badge-primary)] bg-[var(--color-badge-primary)]/10 dark:text-[var(--color-badge-primary)] dark:bg-[var(--color-badge-primary)]/20"
|
|
46
|
+
},
|
|
47
|
+
{
|
|
48
|
+
type: "secondary",
|
|
49
|
+
theme: "solid",
|
|
50
|
+
className: "border-transparent bg-[var(--color-badge-secondary)] text-[var(--color-badge-secondary-foreground)]"
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
type: "secondary",
|
|
54
|
+
theme: "outline",
|
|
55
|
+
className: "border-[var(--color-badge-secondary)] text-[var(--color-badge-secondary)] dark:border-[var(--color-badge-secondary)] dark:text-[var(--color-badge-secondary)]"
|
|
56
|
+
},
|
|
57
|
+
{
|
|
58
|
+
type: "secondary",
|
|
59
|
+
theme: "light",
|
|
60
|
+
className: "text-[var(--color-badge-secondary)] bg-[var(--color-badge-secondary)]/20 dark:text-[var(--color-badge-secondary)] dark:bg-[var(--color-badge-secondary)]/20"
|
|
61
|
+
},
|
|
62
|
+
{
|
|
63
|
+
type: "tertiary",
|
|
64
|
+
theme: "solid",
|
|
65
|
+
className: "border-transparent bg-[var(--color-badge-tertiary)] text-[var(--color-badge-tertiary-foreground)]"
|
|
66
|
+
},
|
|
67
|
+
{
|
|
68
|
+
type: "tertiary",
|
|
69
|
+
theme: "outline",
|
|
70
|
+
className: "border-[var(--color-badge-tertiary)] text-[var(--color-badge-tertiary)] dark:border-[var(--color-badge-tertiary)] dark:text-[var(--color-badge-tertiary)]"
|
|
71
|
+
},
|
|
72
|
+
{
|
|
73
|
+
type: "tertiary",
|
|
74
|
+
theme: "light",
|
|
75
|
+
className: "text-[var(--color-badge-tertiary)] bg-[var(--color-badge-tertiary)]/20 dark:text-[var(--color-badge-tertiary)] dark:bg-[var(--color-badge-tertiary)]/20"
|
|
76
|
+
},
|
|
77
|
+
{
|
|
78
|
+
type: "quaternary",
|
|
79
|
+
theme: "solid",
|
|
80
|
+
className: "border-transparent bg-[var(--color-badge-quaternary)] text-[var(--color-badge-quaternary-foreground)]"
|
|
81
|
+
},
|
|
82
|
+
{
|
|
83
|
+
type: "quaternary",
|
|
84
|
+
theme: "outline",
|
|
85
|
+
className: "border-[var(--color-badge-quaternary)] text-[var(--color-badge-quaternary-foreground)] dark:border-[var(--color-badge-quaternary)] dark:text-[var(--color-badge-quaternary-foreground)]"
|
|
86
|
+
},
|
|
87
|
+
{
|
|
88
|
+
type: "quaternary",
|
|
89
|
+
theme: "light",
|
|
90
|
+
className: "text-[var(--color-badge-quaternary-foreground)] bg-[var(--color-badge-quaternary)]/20 dark:text-[var(--color-badge-quaternary-foreground)] dark:bg-[var(--color-badge-quaternary)]/20"
|
|
91
|
+
},
|
|
92
|
+
{
|
|
93
|
+
type: "info",
|
|
94
|
+
theme: "solid",
|
|
95
|
+
className: "border-transparent bg-[var(--color-badge-info)] text-[var(--color-badge-info-foreground)]"
|
|
96
|
+
},
|
|
97
|
+
{
|
|
98
|
+
type: "info",
|
|
99
|
+
theme: "outline",
|
|
100
|
+
className: "border-[var(--color-badge-info)] text-[var(--color-badge-info)] dark:border-[var(--color-badge-info)] dark:text-[var(--color-badge-info)]"
|
|
101
|
+
},
|
|
102
|
+
{
|
|
103
|
+
type: "info",
|
|
104
|
+
theme: "light",
|
|
105
|
+
className: "text-[var(--color-badge-info)] bg-[var(--color-badge-info)]/20 dark:text-[var(--color-badge-info)] dark:bg-[var(--color-badge-info)]/20"
|
|
106
|
+
},
|
|
107
|
+
{
|
|
108
|
+
type: "warning",
|
|
109
|
+
theme: "solid",
|
|
110
|
+
className: "border-transparent bg-[var(--color-badge-warning)] text-[var(--color-badge-warning-foreground)]"
|
|
111
|
+
},
|
|
112
|
+
{
|
|
113
|
+
type: "warning",
|
|
114
|
+
theme: "outline",
|
|
115
|
+
className: "border-[var(--color-badge-warning)] text-[var(--color-badge-warning)] dark:border-[var(--color-badge-warning)] dark:text-[var(--color-badge-warning)]"
|
|
116
|
+
},
|
|
117
|
+
{
|
|
118
|
+
type: "warning",
|
|
119
|
+
theme: "light",
|
|
120
|
+
className: "text-[var(--color-badge-warning)] bg-[var(--color-badge-warning)]/20 dark:text-[var(--color-badge-warning)] dark:bg-[var(--color-badge-warning)]/20"
|
|
121
|
+
},
|
|
122
|
+
{
|
|
123
|
+
type: "danger",
|
|
124
|
+
theme: "solid",
|
|
125
|
+
className: "border-transparent bg-[var(--color-badge-danger)] text-[var(--color-badge-danger-foreground)]"
|
|
126
|
+
},
|
|
127
|
+
{
|
|
128
|
+
type: "danger",
|
|
129
|
+
theme: "outline",
|
|
130
|
+
className: "border-[var(--color-badge-danger)] text-[var(--color-badge-danger)] dark:border-[var(--color-badge-danger)] dark:text-[var(--color-badge-danger)]"
|
|
131
|
+
},
|
|
132
|
+
{
|
|
133
|
+
type: "danger",
|
|
134
|
+
theme: "light",
|
|
135
|
+
className: "text-[var(--color-badge-danger)] bg-[var(--color-badge-danger)]/20 dark:text-[var(--color-badge-danger)] dark:bg-[var(--color-badge-danger)]/20"
|
|
136
|
+
},
|
|
137
|
+
{
|
|
138
|
+
type: "success",
|
|
139
|
+
theme: "solid",
|
|
140
|
+
className: "border-transparent bg-[var(--color-badge-success)] text-[var(--color-badge-success-foreground)]"
|
|
141
|
+
},
|
|
142
|
+
{
|
|
143
|
+
type: "success",
|
|
144
|
+
theme: "outline",
|
|
145
|
+
className: "border-[var(--color-badge-success)] text-[var(--color-badge-success)] dark:border-[var(--color-badge-success)] dark:text-[var(--color-badge-success)]"
|
|
146
|
+
},
|
|
147
|
+
{
|
|
148
|
+
type: "success",
|
|
149
|
+
theme: "light",
|
|
150
|
+
className: "text-[var(--color-badge-success)] bg-[var(--color-badge-success)]/20 dark:text-[var(--color-badge-success)] dark:bg-[var(--color-badge-success)]/20"
|
|
151
|
+
},
|
|
152
|
+
{
|
|
153
|
+
type: "muted",
|
|
154
|
+
theme: "solid",
|
|
155
|
+
className: "border-transparent text-[var(--color-badge-muted-foreground)] bg-[var(--color-badge-muted)] dark:border-[var(--color-badge-muted)]/20 dark:text-[var(--color-badge-muted)] dark:bg-[var(--color-badge-muted)]/20"
|
|
156
|
+
},
|
|
157
|
+
{
|
|
158
|
+
type: "muted",
|
|
159
|
+
theme: "outline",
|
|
160
|
+
className: "border-[var(--color-badge-muted)] text-[var(--color-badge-muted)] dark:border-[var(--color-badge-muted)] dark:text-[var(--color-badge-muted)]"
|
|
161
|
+
},
|
|
162
|
+
{
|
|
163
|
+
type: "muted",
|
|
164
|
+
theme: "light",
|
|
165
|
+
className: "text-[var(--muted-foreground)] bg-[var(--muted-foreground)]/15 dark:text-[var(--color-badge-muted)] dark:bg-[var(--color-badge-muted)]/20"
|
|
166
|
+
}
|
|
167
|
+
],
|
|
168
|
+
defaultVariants: {
|
|
169
|
+
type: "muted",
|
|
170
|
+
theme: "solid"
|
|
171
|
+
}
|
|
172
|
+
});
|
|
173
|
+
function Badge({ className, type, theme, ...props }) {
|
|
174
|
+
return /* @__PURE__ */ jsx("div", {
|
|
175
|
+
className: cn(badgeVariants({
|
|
176
|
+
type,
|
|
177
|
+
theme
|
|
178
|
+
}), className),
|
|
179
|
+
...props
|
|
180
|
+
});
|
|
181
|
+
}
|
|
182
|
+
export { Badge, badgeVariants };
|
package/dist/button/index.mjs
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import { n as buttonVariants, t as Button } from "../button-
|
|
2
|
-
import { t as LinkButton } from "../button-
|
|
1
|
+
import { n as buttonVariants, t as Button } from "../button-Cn4KagBO.mjs";
|
|
2
|
+
import { t as LinkButton } from "../button-IK-Lnu_9.mjs";
|
|
3
3
|
export { Button, LinkButton, buttonVariants };
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { t as cn } from "./utils-CTIuhCOs.mjs";
|
|
2
|
-
import { t as SpinnerIcon } from "./spinner.icon-
|
|
2
|
+
import { t as SpinnerIcon } from "./spinner.icon-BiUnMAxw.mjs";
|
|
3
3
|
import { cva } from "class-variance-authority";
|
|
4
4
|
import "react";
|
|
5
5
|
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { n as buttonVariants, r as getIconOnlyClass } from "./button-
|
|
1
|
+
import { n as buttonVariants, r as getIconOnlyClass } from "./button-Cn4KagBO.mjs";
|
|
2
2
|
import { t as cn } from "./utils-CTIuhCOs.mjs";
|
|
3
3
|
import "react";
|
|
4
4
|
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export { t as ButtonGroup, n as ButtonGroupSeparator, r as ButtonGroupText, i as buttonGroupVariants } from "../button-group-
|
|
1
|
+
export { t as ButtonGroup, n as ButtonGroupSeparator, r as ButtonGroupText, i as buttonGroupVariants } from "../button-group-DJ6X1SSj.mjs";
|
|
@@ -4,7 +4,7 @@ import { cva } from "class-variance-authority";
|
|
|
4
4
|
import { jsx } from "react/jsx-runtime";
|
|
5
5
|
import { Slot } from "@radix-ui/react-slot";
|
|
6
6
|
// ../shadcn/ui/button-group.tsx
|
|
7
|
-
const buttonGroupVariants = cva("flex w-fit items-stretch has-[>[data-slot=button-group]]:gap-2 [&>*]:focus-visible:relative [&>*]:focus-visible:z-10 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-
|
|
7
|
+
const buttonGroupVariants = cva("flex w-fit items-stretch has-[>[data-slot=button-group]]:gap-2 [&>*]:focus-visible:relative [&>*]:focus-visible:z-10 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-lg [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1", {
|
|
8
8
|
variants: { orientation: {
|
|
9
9
|
horizontal: "[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none",
|
|
10
10
|
vertical: "flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none"
|
|
@@ -22,7 +22,7 @@ function ButtonGroup({ className, orientation, ...props }) {
|
|
|
22
22
|
}
|
|
23
23
|
function ButtonGroupText({ className, asChild = false, ...props }) {
|
|
24
24
|
return /* @__PURE__ */ jsx(asChild ? Slot : "div", {
|
|
25
|
-
className: cn("bg-muted flex items-center gap-2 rounded-
|
|
25
|
+
className: cn("bg-muted text-muted-foreground border-input-border flex items-center gap-2 rounded-lg border px-3 text-sm font-normal [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4", className),
|
|
26
26
|
...props
|
|
27
27
|
});
|
|
28
28
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { t as useDeprecationWarning } from "./use-deprecation-warning-BS1V4IS5.mjs";
|
|
2
|
-
import { a as DateRangePicker } from "./picker-
|
|
2
|
+
import { a as DateRangePicker } from "./picker-BHPtncpv.mjs";
|
|
3
3
|
import { jsx } from "react/jsx-runtime";
|
|
4
4
|
// src/components/features/calendar-date-picker/calendar-date-picker.tsx
|
|
5
5
|
/**
|
package/dist/card/index.mjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export { n as Card, r as CardAction, i as CardContent, u as CardDescription, a as CardField, o as CardFieldLabel, s as CardFieldValue, c as CardFooter, l as CardHeader, t as CardSaveBar, d as CardTitle } from "../card-save-bar-
|
|
1
|
+
export { n as Card, r as CardAction, i as CardContent, u as CardDescription, a as CardField, o as CardFieldLabel, s as CardFieldValue, c as CardFooter, l as CardHeader, t as CardSaveBar, d as CardTitle } from "../card-save-bar-Te8jf-ie.mjs";
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { t as cn } from "./utils-CTIuhCOs.mjs";
|
|
2
|
-
import { t as Button } from "./button-
|
|
2
|
+
import { t as Button } from "./button-Cn4KagBO.mjs";
|
|
3
3
|
import { cva } from "class-variance-authority";
|
|
4
4
|
import "react";
|
|
5
5
|
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
|
package/dist/checkbox/index.mjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export { t as Checkbox } from "../checkbox-
|
|
1
|
+
export { t as Checkbox } from "../checkbox-BAo5sbHk.mjs";
|
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
import { t as cn } from "./utils-CTIuhCOs.mjs";
|
|
2
|
+
import { n as EASE, t as DURATION } from "./motion-DOrRbLmy.mjs";
|
|
3
|
+
import { t as useControllableState } from "./use-controllable-state-DLeVgbAb.mjs";
|
|
4
|
+
import "react";
|
|
5
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
6
|
+
import { motion, useReducedMotion } from "motion/react";
|
|
7
|
+
import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
|
|
8
|
+
// src/components/base/checkbox/checkbox.tsx
|
|
9
|
+
const CHECK_PATH = "M20 6 9 17l-5-5";
|
|
10
|
+
const DASH_PATH = "M5 12h14";
|
|
11
|
+
/**
|
|
12
|
+
* One stroke of the indicator. Drawn on with `pathLength` when it appears and
|
|
13
|
+
* faded out (faster) when it leaves. Under reduced motion the stroke is not
|
|
14
|
+
* drawn, only faded, since the draw reads as movement.
|
|
15
|
+
*/
|
|
16
|
+
function IndicatorMark({ d, visible, reduceMotion }) {
|
|
17
|
+
return /* @__PURE__ */ jsx(motion.path, {
|
|
18
|
+
d,
|
|
19
|
+
initial: false,
|
|
20
|
+
animate: visible ? {
|
|
21
|
+
pathLength: 1,
|
|
22
|
+
opacity: 1
|
|
23
|
+
} : {
|
|
24
|
+
pathLength: reduceMotion ? 1 : 0,
|
|
25
|
+
opacity: 0
|
|
26
|
+
},
|
|
27
|
+
transition: visible ? {
|
|
28
|
+
pathLength: {
|
|
29
|
+
duration: reduceMotion ? 0 : .2,
|
|
30
|
+
ease: EASE.out
|
|
31
|
+
},
|
|
32
|
+
opacity: { duration: reduceMotion ? DURATION.fast : .05 }
|
|
33
|
+
} : {
|
|
34
|
+
duration: .1,
|
|
35
|
+
ease: EASE.out
|
|
36
|
+
}
|
|
37
|
+
});
|
|
38
|
+
}
|
|
39
|
+
/**
|
|
40
|
+
* Checkbox renders the Radix primitive directly rather than wrapping the
|
|
41
|
+
* shadcn one, so the indicator can stay mounted and animate out as well as in.
|
|
42
|
+
* The shadcn base stays untouched and can be regenerated from upstream.
|
|
43
|
+
*
|
|
44
|
+
* The checked state is mirrored here (controlled or not) because Motion needs
|
|
45
|
+
* it in JS to drive the check mark.
|
|
46
|
+
*/
|
|
47
|
+
function Checkbox({ ref, className, checked: checkedProp, defaultChecked, onCheckedChange, ...props }) {
|
|
48
|
+
const [checked, setChecked] = useControllableState(checkedProp, defaultChecked ?? false, onCheckedChange);
|
|
49
|
+
const reduceMotion = Boolean(useReducedMotion());
|
|
50
|
+
return /* @__PURE__ */ jsx(CheckboxPrimitive.Root, {
|
|
51
|
+
ref,
|
|
52
|
+
"data-slot": "checkbox",
|
|
53
|
+
checked,
|
|
54
|
+
onCheckedChange: setChecked,
|
|
55
|
+
className: cn("peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground data-[state=indeterminate]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50", "transition-[background-color,border-color,box-shadow,transform] duration-[var(--duration-fast)] ease-out active:scale-[0.92] disabled:active:scale-100", className),
|
|
56
|
+
...props,
|
|
57
|
+
children: /* @__PURE__ */ jsx(CheckboxPrimitive.Indicator, {
|
|
58
|
+
forceMount: true,
|
|
59
|
+
"data-slot": "checkbox-indicator",
|
|
60
|
+
className: "flex items-center justify-center text-current",
|
|
61
|
+
children: /* @__PURE__ */ jsxs("svg", {
|
|
62
|
+
"aria-hidden": true,
|
|
63
|
+
viewBox: "0 0 24 24",
|
|
64
|
+
fill: "none",
|
|
65
|
+
stroke: "currentColor",
|
|
66
|
+
strokeWidth: 3,
|
|
67
|
+
strokeLinecap: "round",
|
|
68
|
+
strokeLinejoin: "round",
|
|
69
|
+
className: "size-3.5",
|
|
70
|
+
children: [/* @__PURE__ */ jsx(IndicatorMark, {
|
|
71
|
+
d: CHECK_PATH,
|
|
72
|
+
visible: checked === true,
|
|
73
|
+
reduceMotion
|
|
74
|
+
}), /* @__PURE__ */ jsx(IndicatorMark, {
|
|
75
|
+
d: DASH_PATH,
|
|
76
|
+
visible: checked === "indeterminate",
|
|
77
|
+
reduceMotion
|
|
78
|
+
})]
|
|
79
|
+
})
|
|
80
|
+
})
|
|
81
|
+
});
|
|
82
|
+
}
|
|
83
|
+
Checkbox.displayName = "Checkbox";
|
|
84
|
+
export { Checkbox as t };
|
|
@@ -1,6 +1 @@
|
|
|
1
|
-
|
|
2
|
-
// ../shadcn/ui/collapsible.tsx
|
|
3
|
-
const Collapsible = CollapsiblePrimitive.Root;
|
|
4
|
-
const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
|
|
5
|
-
const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;
|
|
6
|
-
export { Collapsible, CollapsibleContent, CollapsibleTrigger };
|
|
1
|
+
export { t as Collapsible, n as CollapsibleContent, r as CollapsibleTrigger } from "../collapsible-B-KP3JZ-.mjs";
|
|
@@ -0,0 +1,104 @@
|
|
|
1
|
+
import { n as EASE, t as DURATION } from "./motion-DOrRbLmy.mjs";
|
|
2
|
+
import { t as useControllableState } from "./use-controllable-state-DLeVgbAb.mjs";
|
|
3
|
+
import * as React from "react";
|
|
4
|
+
import { jsx } from "react/jsx-runtime";
|
|
5
|
+
import { motion, useReducedMotion } from "motion/react";
|
|
6
|
+
import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
|
|
7
|
+
// src/components/base/collapsible/collapsible.tsx
|
|
8
|
+
/**
|
|
9
|
+
* Open state, mirrored from the root so `CollapsibleContent` can drive Motion.
|
|
10
|
+
* `null` means the content sits under a bare Radix root rather than ours, and
|
|
11
|
+
* falls back to Radix's own mount/unmount with no animation.
|
|
12
|
+
*/
|
|
13
|
+
const CollapsibleOpenContext = React.createContext(null);
|
|
14
|
+
function Collapsible({ ref, open: openProp, defaultOpen, onOpenChange, ...props }) {
|
|
15
|
+
const [open, setOpen] = useControllableState(openProp, defaultOpen ?? false, onOpenChange);
|
|
16
|
+
return /* @__PURE__ */ jsx(CollapsibleOpenContext, {
|
|
17
|
+
value: open,
|
|
18
|
+
children: /* @__PURE__ */ jsx(CollapsiblePrimitive.Root, {
|
|
19
|
+
ref,
|
|
20
|
+
"data-slot": "collapsible",
|
|
21
|
+
open,
|
|
22
|
+
onOpenChange: setOpen,
|
|
23
|
+
...props
|
|
24
|
+
})
|
|
25
|
+
});
|
|
26
|
+
}
|
|
27
|
+
Collapsible.displayName = "Collapsible";
|
|
28
|
+
const CollapsibleTrigger = CollapsiblePrimitive.Trigger;
|
|
29
|
+
const OPEN = {
|
|
30
|
+
height: {
|
|
31
|
+
duration: DURATION.medium,
|
|
32
|
+
ease: EASE.out
|
|
33
|
+
},
|
|
34
|
+
opacity: {
|
|
35
|
+
duration: DURATION.medium,
|
|
36
|
+
ease: EASE.out
|
|
37
|
+
}
|
|
38
|
+
};
|
|
39
|
+
const CLOSE = {
|
|
40
|
+
height: {
|
|
41
|
+
duration: .2,
|
|
42
|
+
ease: EASE.out
|
|
43
|
+
},
|
|
44
|
+
opacity: {
|
|
45
|
+
duration: .12,
|
|
46
|
+
ease: EASE.out
|
|
47
|
+
}
|
|
48
|
+
};
|
|
49
|
+
/**
|
|
50
|
+
* Collapsible content that animates its height and opacity with Motion.
|
|
51
|
+
*
|
|
52
|
+
* The node stays mounted. Radix would unmount it on close and drive the height
|
|
53
|
+
* from a measured CSS variable, which restarts from zero if the user toggles
|
|
54
|
+
* mid-animation and can measure 0px inside scroll containers. Motion animates
|
|
55
|
+
* to and from `height: auto` instead and retargets smoothly when interrupted.
|
|
56
|
+
* While closed the content is `inert`, so it is out of the tab order and the
|
|
57
|
+
* accessibility tree just as an unmounted node would be.
|
|
58
|
+
*
|
|
59
|
+
* Under reduced motion the height changes instantly and only the fade remains.
|
|
60
|
+
*/
|
|
61
|
+
function CollapsibleContent({ ref, className, children, ...props }) {
|
|
62
|
+
const open = React.use(CollapsibleOpenContext);
|
|
63
|
+
const reduceMotion = Boolean(useReducedMotion());
|
|
64
|
+
const [settledClosed, setSettledClosed] = React.useState(open === false);
|
|
65
|
+
if (open && settledClosed) setSettledClosed(false);
|
|
66
|
+
if (open === null || props.asChild) return /* @__PURE__ */ jsx(CollapsiblePrimitive.Content, {
|
|
67
|
+
ref,
|
|
68
|
+
"data-slot": "collapsible-content",
|
|
69
|
+
className,
|
|
70
|
+
...props,
|
|
71
|
+
children
|
|
72
|
+
});
|
|
73
|
+
const transition = open ? OPEN : CLOSE;
|
|
74
|
+
return /* @__PURE__ */ jsx(CollapsiblePrimitive.Content, {
|
|
75
|
+
ref,
|
|
76
|
+
forceMount: true,
|
|
77
|
+
hidden: !open && settledClosed,
|
|
78
|
+
asChild: true,
|
|
79
|
+
...props,
|
|
80
|
+
children: /* @__PURE__ */ jsx(motion.div, {
|
|
81
|
+
"data-slot": "collapsible-content",
|
|
82
|
+
initial: false,
|
|
83
|
+
animate: {
|
|
84
|
+
height: open ? "auto" : 0,
|
|
85
|
+
opacity: open ? 1 : 0
|
|
86
|
+
},
|
|
87
|
+
transition: reduceMotion ? {
|
|
88
|
+
...transition,
|
|
89
|
+
height: { duration: 0 }
|
|
90
|
+
} : transition,
|
|
91
|
+
onAnimationComplete: () => {
|
|
92
|
+
if (!open) setSettledClosed(true);
|
|
93
|
+
},
|
|
94
|
+
inert: !open,
|
|
95
|
+
style: { overflow: "hidden" },
|
|
96
|
+
children: /* @__PURE__ */ jsx("div", {
|
|
97
|
+
className,
|
|
98
|
+
children
|
|
99
|
+
})
|
|
100
|
+
})
|
|
101
|
+
});
|
|
102
|
+
}
|
|
103
|
+
CollapsibleContent.displayName = "CollapsibleContent";
|
|
104
|
+
export { CollapsibleContent as n, CollapsibleTrigger as r, Collapsible as t };
|
|
@@ -1,7 +1,15 @@
|
|
|
1
|
-
import
|
|
1
|
+
import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
|
|
2
2
|
import * as React from 'react';
|
|
3
|
-
|
|
4
|
-
|
|
3
|
+
/**
|
|
4
|
+
* Checkbox renders the Radix primitive directly rather than wrapping the
|
|
5
|
+
* shadcn one, so the indicator can stay mounted and animate out as well as in.
|
|
6
|
+
* The shadcn base stays untouched and can be regenerated from upstream.
|
|
7
|
+
*
|
|
8
|
+
* The checked state is mirrored here (controlled or not) because Motion needs
|
|
9
|
+
* it in JS to drive the check mark.
|
|
10
|
+
*/
|
|
11
|
+
declare function Checkbox({ ref, className, checked: checkedProp, defaultChecked, onCheckedChange, ...props }: React.ComponentProps<typeof CheckboxPrimitive.Root> & {
|
|
12
|
+
ref?: React.RefObject<React.ElementRef<typeof CheckboxPrimitive.Root> | null>;
|
|
5
13
|
}): React.JSX.Element;
|
|
6
14
|
declare namespace Checkbox {
|
|
7
15
|
var displayName: string;
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
declare function Collapsible({ ref, open: openProp, defaultOpen, onOpenChange, ...props }: React.ComponentProps<typeof CollapsiblePrimitive.Root> & {
|
|
4
|
+
ref?: React.RefObject<React.ElementRef<typeof CollapsiblePrimitive.Root> | null>;
|
|
5
|
+
}): React.JSX.Element;
|
|
6
|
+
declare namespace Collapsible {
|
|
7
|
+
var displayName: string;
|
|
8
|
+
}
|
|
9
|
+
declare const CollapsibleTrigger: React.ForwardRefExoticComponent<CollapsiblePrimitive.CollapsibleTriggerProps & React.RefAttributes<HTMLButtonElement>>;
|
|
10
|
+
/**
|
|
11
|
+
* Collapsible content that animates its height and opacity with Motion.
|
|
12
|
+
*
|
|
13
|
+
* The node stays mounted. Radix would unmount it on close and drive the height
|
|
14
|
+
* from a measured CSS variable, which restarts from zero if the user toggles
|
|
15
|
+
* mid-animation and can measure 0px inside scroll containers. Motion animates
|
|
16
|
+
* to and from `height: auto` instead and retargets smoothly when interrupted.
|
|
17
|
+
* While closed the content is `inert`, so it is out of the tab order and the
|
|
18
|
+
* accessibility tree just as an unmounted node would be.
|
|
19
|
+
*
|
|
20
|
+
* Under reduced motion the height changes instantly and only the fade remains.
|
|
21
|
+
*/
|
|
22
|
+
declare function CollapsibleContent({ ref, className, children, ...props }: React.ComponentProps<typeof CollapsiblePrimitive.Content> & {
|
|
23
|
+
ref?: React.RefObject<React.ElementRef<typeof CollapsiblePrimitive.Content> | null>;
|
|
24
|
+
}): React.JSX.Element;
|
|
25
|
+
declare namespace CollapsibleContent {
|
|
26
|
+
var displayName: string;
|
|
27
|
+
}
|
|
28
|
+
export { Collapsible, CollapsibleContent, CollapsibleTrigger };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export
|
|
1
|
+
export { Collapsible, CollapsibleContent, CollapsibleTrigger } from './collapsible';
|