@clasing/ui 2.9.0 → 2.9.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{button-DSpGxL2e.js → button-CKrOlPSD.js} +17 -19
- package/dist/components/alert-dialog.js +1 -1
- package/dist/components/breadcrumb.js +17 -4
- package/dist/components/button-group.js +29 -5
- package/dist/components/button.js +1 -1
- package/dist/components/calendar.js +42 -38
- package/dist/components/field.d.ts +26 -0
- package/dist/components/field.js +66 -0
- package/dist/components/input.js +1 -1
- package/dist/components/pagination.d.ts +38 -0
- package/dist/components/pagination.js +107 -0
- package/dist/components/phone-input.js +1 -1
- package/dist/components/radio-group.d.ts +5 -0
- package/dist/components/radio-group.js +45 -0
- package/dist/components/select.js +10 -2
- package/dist/components/sidebar.d.ts +83 -0
- package/dist/components/tabs.d.ts +13 -0
- package/dist/components/tabs.js +81 -0
- package/dist/components/tree.d.ts +37 -0
- package/dist/components/tree.js +312 -0
- package/dist/entries/field.d.ts +1 -0
- package/dist/entries/pagination.d.ts +1 -0
- package/dist/entries/radio-group.d.ts +1 -0
- package/dist/entries/tabs.d.ts +1 -0
- package/dist/entries/tree.d.ts +1 -0
- package/dist/hooks/useIsMobile.d.ts +2 -0
- package/dist/{input-D9gqZjs0.js → input-BlcRuIEB.js} +1 -1
- package/dist/ui.css +25 -54
- package/package.json +27 -4
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import { j as a, c as t } from "../index-C_XDkVGm.js";
|
|
2
|
+
import { CircleIcon as d } from "@phosphor-icons/react";
|
|
3
|
+
import * as r from "@radix-ui/react-radio-group";
|
|
4
|
+
import * as s from "react";
|
|
5
|
+
const l = s.forwardRef(({ className: e, ...o }, i) => /* @__PURE__ */ a.jsx(
|
|
6
|
+
r.Root,
|
|
7
|
+
{
|
|
8
|
+
"data-slot": "radio-group",
|
|
9
|
+
className: t("grid gap-3", e),
|
|
10
|
+
...o,
|
|
11
|
+
ref: i
|
|
12
|
+
}
|
|
13
|
+
));
|
|
14
|
+
l.displayName = r.Root.displayName;
|
|
15
|
+
const m = s.forwardRef(({ className: e, ...o }, i) => /* @__PURE__ */ a.jsx(
|
|
16
|
+
r.Item,
|
|
17
|
+
{
|
|
18
|
+
"data-slot": "radio-group-item",
|
|
19
|
+
ref: i,
|
|
20
|
+
className: t(
|
|
21
|
+
`
|
|
22
|
+
aspect-square size-4 shrink-0 rounded-full border border-input
|
|
23
|
+
text-primary focusable-item
|
|
24
|
+
disabled:cursor-not-allowed disabled:opacity-50
|
|
25
|
+
aria-invalid:border-destructive-foreground
|
|
26
|
+
dark:bg-input/30
|
|
27
|
+
`,
|
|
28
|
+
e
|
|
29
|
+
),
|
|
30
|
+
...o,
|
|
31
|
+
children: /* @__PURE__ */ a.jsx(
|
|
32
|
+
r.Indicator,
|
|
33
|
+
{
|
|
34
|
+
"data-slot": "radio-group-indicator",
|
|
35
|
+
className: "flex items-center justify-center",
|
|
36
|
+
children: /* @__PURE__ */ a.jsx(d, { weight: "fill", className: "size-2" })
|
|
37
|
+
}
|
|
38
|
+
)
|
|
39
|
+
}
|
|
40
|
+
));
|
|
41
|
+
m.displayName = r.Item.displayName;
|
|
42
|
+
export {
|
|
43
|
+
l as RadioGroup,
|
|
44
|
+
m as RadioGroupItem
|
|
45
|
+
};
|
|
@@ -73,7 +73,7 @@ function b({
|
|
|
73
73
|
function v({
|
|
74
74
|
className: t,
|
|
75
75
|
children: a,
|
|
76
|
-
position: l = "
|
|
76
|
+
position: l = "item-aligned",
|
|
77
77
|
collisionPadding: o = 24,
|
|
78
78
|
...n
|
|
79
79
|
}) {
|
|
@@ -167,7 +167,15 @@ function y({
|
|
|
167
167
|
),
|
|
168
168
|
...l,
|
|
169
169
|
children: [
|
|
170
|
-
/* @__PURE__ */ e.jsx(
|
|
170
|
+
/* @__PURE__ */ e.jsx(
|
|
171
|
+
"span",
|
|
172
|
+
{
|
|
173
|
+
className: `\r
|
|
174
|
+
absolute right-2 flex size-3.5 items-center justify-center\r
|
|
175
|
+
`,
|
|
176
|
+
children: /* @__PURE__ */ e.jsx(s.ItemIndicator, { children: /* @__PURE__ */ e.jsx(i, { className: "size-4" }) })
|
|
177
|
+
}
|
|
178
|
+
),
|
|
171
179
|
/* @__PURE__ */ e.jsx(s.ItemText, { children: a })
|
|
172
180
|
]
|
|
173
181
|
}
|
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
import { type VariantProps } from 'class-variance-authority';
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
import { Button } from './button';
|
|
4
|
+
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from './collapsible';
|
|
5
|
+
import { Divider } from './divider';
|
|
6
|
+
import { Input } from './input';
|
|
7
|
+
import { TooltipContent } from './tooltip';
|
|
8
|
+
type SidebarContextProps = {
|
|
9
|
+
state: 'expanded' | 'collapsed';
|
|
10
|
+
open: boolean;
|
|
11
|
+
setOpen: (open: boolean) => void;
|
|
12
|
+
openMobile: boolean;
|
|
13
|
+
setOpenMobile: (open: boolean) => void;
|
|
14
|
+
isMobile: boolean;
|
|
15
|
+
toggleSidebar: () => void;
|
|
16
|
+
};
|
|
17
|
+
declare function useSidebar(): SidebarContextProps;
|
|
18
|
+
declare function SidebarProvider({ defaultOpen, open: openProp, onOpenChange: setOpenProp, className, style, children, ...props }: React.ComponentProps<'div'> & {
|
|
19
|
+
defaultOpen?: boolean;
|
|
20
|
+
open?: boolean;
|
|
21
|
+
onOpenChange?: (open: boolean) => void;
|
|
22
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
23
|
+
declare function Sidebar({ side, variant, collapsible, className, children, ...props }: React.ComponentProps<'div'> & {
|
|
24
|
+
side?: 'left' | 'right';
|
|
25
|
+
variant?: 'sidebar' | 'floating' | 'inset';
|
|
26
|
+
collapsible?: 'offcanvas' | 'icon' | 'none';
|
|
27
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
28
|
+
declare function SidebarTrigger({ className, onClick, ...props }: React.ComponentProps<typeof Button>): import("react/jsx-runtime").JSX.Element;
|
|
29
|
+
declare function SidebarRail({ className, ...props }: React.ComponentProps<'button'>): import("react/jsx-runtime").JSX.Element;
|
|
30
|
+
declare function SidebarInset({ className, ...props }: React.ComponentProps<'main'>): import("react/jsx-runtime").JSX.Element;
|
|
31
|
+
declare function SidebarInput({ className, ...props }: React.ComponentProps<typeof Input>): import("react/jsx-runtime").JSX.Element;
|
|
32
|
+
declare function SidebarHeader({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
|
|
33
|
+
declare function SidebarFooter({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
|
|
34
|
+
declare function SidebarSeparator({ className, ...props }: React.ComponentProps<typeof Divider>): import("react/jsx-runtime").JSX.Element;
|
|
35
|
+
declare function SidebarContent({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
|
|
36
|
+
declare function SidebarGroup({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
|
|
37
|
+
declare function SidebarGroupLabel({ className, asChild, ...props }: React.ComponentProps<'div'> & {
|
|
38
|
+
asChild?: boolean;
|
|
39
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
40
|
+
declare function SidebarGroupAction({ className, asChild, ...props }: React.ComponentProps<'button'> & {
|
|
41
|
+
asChild?: boolean;
|
|
42
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
43
|
+
declare function SidebarGroupContent({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
|
|
44
|
+
declare function SidebarMenu({ className, ...props }: React.ComponentProps<'ul'>): import("react/jsx-runtime").JSX.Element;
|
|
45
|
+
declare function SidebarMenuItem({ className, ...props }: React.ComponentProps<'li'>): import("react/jsx-runtime").JSX.Element;
|
|
46
|
+
declare const sidebarMenuButtonVariants: (props?: ({
|
|
47
|
+
variant?: "default" | "outline" | null | undefined;
|
|
48
|
+
size?: "default" | "lg" | "sm" | null | undefined;
|
|
49
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
50
|
+
declare function SidebarMenuButton({ asChild, isActive, variant, size, tooltip, dropdownItems, className, ...props }: React.ComponentProps<'button'> & {
|
|
51
|
+
asChild?: boolean;
|
|
52
|
+
isActive?: boolean;
|
|
53
|
+
tooltip?: string | React.ComponentProps<typeof TooltipContent>;
|
|
54
|
+
dropdownItems?: {
|
|
55
|
+
title: string;
|
|
56
|
+
href: string;
|
|
57
|
+
}[];
|
|
58
|
+
} & VariantProps<typeof sidebarMenuButtonVariants>): import("react/jsx-runtime").JSX.Element;
|
|
59
|
+
declare function SidebarMenuAction({ className, asChild, showOnHover, ...props }: React.ComponentProps<'button'> & {
|
|
60
|
+
asChild?: boolean;
|
|
61
|
+
showOnHover?: boolean;
|
|
62
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
63
|
+
declare function SidebarMenuBadge({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
|
|
64
|
+
declare function SidebarMenuSkeleton({ className, showIcon, ...props }: React.ComponentProps<'div'> & {
|
|
65
|
+
showIcon?: boolean;
|
|
66
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
67
|
+
declare function SidebarMenuSub({ className, ...props }: React.ComponentProps<'ul'>): import("react/jsx-runtime").JSX.Element;
|
|
68
|
+
declare function SidebarMenuSubItem({ className, ...props }: React.ComponentProps<'li'>): import("react/jsx-runtime").JSX.Element;
|
|
69
|
+
declare function SidebarMenuSubButton({ asChild, size, isActive, className, ...props }: React.ComponentProps<'a'> & {
|
|
70
|
+
asChild?: boolean;
|
|
71
|
+
size?: 'sm' | 'md' | 'lg';
|
|
72
|
+
isActive?: boolean;
|
|
73
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
74
|
+
declare function SidebarSubMenu({ defaultOpen, className, children, ...props }: React.ComponentProps<typeof Collapsible>): import("react/jsx-runtime").JSX.Element;
|
|
75
|
+
declare function SidebarSubMenuTrigger({ className, children, dropdownItems, ...props }: React.ComponentProps<typeof CollapsibleTrigger> & {
|
|
76
|
+
dropdownItems?: {
|
|
77
|
+
title: string;
|
|
78
|
+
href: string;
|
|
79
|
+
}[];
|
|
80
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
81
|
+
declare function SidebarSubMenuContent({ children, ...props }: React.ComponentProps<typeof CollapsibleContent>): import("react/jsx-runtime").JSX.Element;
|
|
82
|
+
declare function SidebarSubMenuItem({ children, ...props }: React.ComponentProps<typeof SidebarMenuSubItem>): import("react/jsx-runtime").JSX.Element;
|
|
83
|
+
export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarSubMenu, SidebarSubMenuContent, SidebarSubMenuItem, SidebarSubMenuTrigger, SidebarTrigger, useSidebar, };
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import * as TabsPrimitive from '@radix-ui/react-tabs';
|
|
2
|
+
import { type VariantProps } from 'class-variance-authority';
|
|
3
|
+
import * as React from 'react';
|
|
4
|
+
declare const Tabs: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
5
|
+
declare const tabsListVariants: (props?: ({
|
|
6
|
+
size?: "lg" | "md" | "sm" | null | undefined;
|
|
7
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
8
|
+
interface TabsListProps extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>, VariantProps<typeof tabsListVariants> {
|
|
9
|
+
}
|
|
10
|
+
declare const TabsList: React.ForwardRefExoticComponent<TabsListProps & React.RefAttributes<HTMLDivElement>>;
|
|
11
|
+
declare const TabsTrigger: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
|
|
12
|
+
declare const TabsContent: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
13
|
+
export { Tabs, TabsContent, TabsList, tabsListVariants, TabsTrigger };
|
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
import { j as o, c as i } from "../index-C_XDkVGm.js";
|
|
2
|
+
import * as a from "@radix-ui/react-tabs";
|
|
3
|
+
import { cva as n } from "class-variance-authority";
|
|
4
|
+
import * as r from "react";
|
|
5
|
+
const m = r.forwardRef(({ className: t, ...s }, e) => /* @__PURE__ */ o.jsx(
|
|
6
|
+
a.Root,
|
|
7
|
+
{
|
|
8
|
+
ref: e,
|
|
9
|
+
"data-slot": "tabs",
|
|
10
|
+
className: i("flex flex-col gap-2", t),
|
|
11
|
+
...s
|
|
12
|
+
}
|
|
13
|
+
));
|
|
14
|
+
m.displayName = a.Root.displayName;
|
|
15
|
+
const l = n(
|
|
16
|
+
`
|
|
17
|
+
inline-flex items-center justify-center gap-1 rounded-lg bg-muted p-1
|
|
18
|
+
text-muted-foreground
|
|
19
|
+
`,
|
|
20
|
+
{
|
|
21
|
+
variants: {
|
|
22
|
+
size: {
|
|
23
|
+
sm: "h-8",
|
|
24
|
+
md: "h-10",
|
|
25
|
+
lg: "h-12"
|
|
26
|
+
}
|
|
27
|
+
},
|
|
28
|
+
defaultVariants: {
|
|
29
|
+
size: "md"
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
), c = r.forwardRef(({ className: t, size: s, ...e }, d) => /* @__PURE__ */ o.jsx(
|
|
33
|
+
a.List,
|
|
34
|
+
{
|
|
35
|
+
ref: d,
|
|
36
|
+
"data-slot": "tabs-list",
|
|
37
|
+
className: i(l({ size: s }), t),
|
|
38
|
+
...e
|
|
39
|
+
}
|
|
40
|
+
));
|
|
41
|
+
c.displayName = a.List.displayName;
|
|
42
|
+
const p = n(
|
|
43
|
+
`
|
|
44
|
+
inline-flex items-center justify-center gap-2 rounded-md px-3 py-1.5
|
|
45
|
+
label-md font-medium whitespace-nowrap focusable-item
|
|
46
|
+
transition-[color,background-color,box-shadow]
|
|
47
|
+
disabled:pointer-events-none disabled:opacity-50
|
|
48
|
+
data-[state=active]:bg-background data-[state=active]:text-foreground
|
|
49
|
+
data-[state=active]:shadow-xs
|
|
50
|
+
[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0
|
|
51
|
+
`,
|
|
52
|
+
{
|
|
53
|
+
variants: {}
|
|
54
|
+
}
|
|
55
|
+
), f = r.forwardRef(({ className: t, ...s }, e) => /* @__PURE__ */ o.jsx(
|
|
56
|
+
a.Trigger,
|
|
57
|
+
{
|
|
58
|
+
ref: e,
|
|
59
|
+
"data-slot": "tabs-trigger",
|
|
60
|
+
className: i(p(), t),
|
|
61
|
+
...s
|
|
62
|
+
}
|
|
63
|
+
));
|
|
64
|
+
f.displayName = a.Trigger.displayName;
|
|
65
|
+
const g = r.forwardRef(({ className: t, ...s }, e) => /* @__PURE__ */ o.jsx(
|
|
66
|
+
a.Content,
|
|
67
|
+
{
|
|
68
|
+
ref: e,
|
|
69
|
+
"data-slot": "tabs-content",
|
|
70
|
+
className: i("mt-3 focusable-item", t),
|
|
71
|
+
...s
|
|
72
|
+
}
|
|
73
|
+
));
|
|
74
|
+
g.displayName = a.Content.displayName;
|
|
75
|
+
export {
|
|
76
|
+
m as Tabs,
|
|
77
|
+
g as TabsContent,
|
|
78
|
+
c as TabsList,
|
|
79
|
+
f as TabsTrigger,
|
|
80
|
+
l as tabsListVariants
|
|
81
|
+
};
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import { type VariantProps } from 'class-variance-authority';
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
type TreeContextProps = {
|
|
4
|
+
selectedId: string | null;
|
|
5
|
+
onSelect: (id: string) => void;
|
|
6
|
+
expandedIds: Set<string>;
|
|
7
|
+
toggleExpanded: (id: string) => void;
|
|
8
|
+
expandOnSelect: boolean;
|
|
9
|
+
registerItem: (id: string, element: HTMLElement) => void;
|
|
10
|
+
unregisterItem: (id: string) => void;
|
|
11
|
+
focusedId: string | null;
|
|
12
|
+
setFocusedId: (id: string | null) => void;
|
|
13
|
+
getVisibleItems: () => string[];
|
|
14
|
+
};
|
|
15
|
+
declare function useTree(): TreeContextProps;
|
|
16
|
+
declare const treeItemTriggerVariants: (props?: ({
|
|
17
|
+
isSelected?: boolean | null | undefined;
|
|
18
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
19
|
+
interface TreeProps extends Omit<React.ComponentProps<'div'>, 'onSelect'> {
|
|
20
|
+
selectedId?: string | null;
|
|
21
|
+
onSelect?: (id: string) => void;
|
|
22
|
+
defaultExpandedIds?: string[];
|
|
23
|
+
expandOnSelect?: boolean;
|
|
24
|
+
}
|
|
25
|
+
declare function Tree({ selectedId, onSelect, defaultExpandedIds, expandOnSelect, className, children, ...props }: TreeProps): import("react/jsx-runtime").JSX.Element;
|
|
26
|
+
interface TreeItemProps extends React.ComponentProps<'div'> {
|
|
27
|
+
value: string;
|
|
28
|
+
disabled?: boolean;
|
|
29
|
+
}
|
|
30
|
+
declare function TreeItem({ value, disabled, className, children, ...props }: TreeItemProps): import("react/jsx-runtime").JSX.Element;
|
|
31
|
+
interface TreeItemTriggerProps extends React.ComponentProps<'div'>, VariantProps<typeof treeItemTriggerVariants> {
|
|
32
|
+
}
|
|
33
|
+
declare function TreeItemTrigger({ className, children, ...props }: TreeItemTriggerProps): import("react/jsx-runtime").JSX.Element;
|
|
34
|
+
interface TreeItemContentProps extends React.ComponentProps<'div'> {
|
|
35
|
+
}
|
|
36
|
+
declare function TreeItemContent({ className, children, ...props }: TreeItemContentProps): import("react/jsx-runtime").JSX.Element | null;
|
|
37
|
+
export { Tree, TreeItem, TreeItemContent, TreeItemTrigger, useTree };
|
|
@@ -0,0 +1,312 @@
|
|
|
1
|
+
import { j as p, c as C } from "../index-C_XDkVGm.js";
|
|
2
|
+
import { CaretRightIcon as M } from "@phosphor-icons/react";
|
|
3
|
+
import { cva as q } from "class-variance-authority";
|
|
4
|
+
import * as N from "react";
|
|
5
|
+
import { createContext as _, useState as S, useRef as H, useCallback as m, useMemo as K, use as A } from "react";
|
|
6
|
+
const V = _(null), R = _(null);
|
|
7
|
+
function z() {
|
|
8
|
+
const e = A(V);
|
|
9
|
+
if (!e)
|
|
10
|
+
throw new Error("useTree must be used within a Tree component.");
|
|
11
|
+
return e;
|
|
12
|
+
}
|
|
13
|
+
function F() {
|
|
14
|
+
const e = A(R);
|
|
15
|
+
if (!e)
|
|
16
|
+
throw new Error("useTreeItem must be used within a TreeItem component.");
|
|
17
|
+
return e;
|
|
18
|
+
}
|
|
19
|
+
const L = q(
|
|
20
|
+
[
|
|
21
|
+
"flex w-full items-center gap-2 rounded-md px-2 py-1.5 paragraph-sm",
|
|
22
|
+
"focusable-item",
|
|
23
|
+
"disabled:pointer-events-none disabled:opacity-50",
|
|
24
|
+
"[&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"
|
|
25
|
+
],
|
|
26
|
+
{
|
|
27
|
+
variants: {
|
|
28
|
+
isSelected: {
|
|
29
|
+
true: "bg-primary/10 font-medium text-primary",
|
|
30
|
+
false: `
|
|
31
|
+
text-foreground
|
|
32
|
+
hover:bg-muted
|
|
33
|
+
`
|
|
34
|
+
}
|
|
35
|
+
},
|
|
36
|
+
defaultVariants: {
|
|
37
|
+
isSelected: !1
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
);
|
|
41
|
+
function G({
|
|
42
|
+
selectedId: e = null,
|
|
43
|
+
onSelect: i,
|
|
44
|
+
defaultExpandedIds: g = [],
|
|
45
|
+
expandOnSelect: s = !0,
|
|
46
|
+
className: n,
|
|
47
|
+
children: l,
|
|
48
|
+
...I
|
|
49
|
+
}) {
|
|
50
|
+
const [c, f] = S(
|
|
51
|
+
() => new Set(g)
|
|
52
|
+
), [d, E] = S(null), u = H(/* @__PURE__ */ new Map()), b = m((t) => {
|
|
53
|
+
f((o) => {
|
|
54
|
+
const r = new Set(o);
|
|
55
|
+
return r.has(t) ? r.delete(t) : r.add(t), r;
|
|
56
|
+
});
|
|
57
|
+
}, []), v = m((t, o) => {
|
|
58
|
+
u.current.set(t, o);
|
|
59
|
+
}, []), D = m((t) => {
|
|
60
|
+
u.current.delete(t);
|
|
61
|
+
}, []), x = m(() => {
|
|
62
|
+
const t = u.current;
|
|
63
|
+
return t.size === 0 ? [] : Array.from(
|
|
64
|
+
document.querySelectorAll('[role="treeitem"]')
|
|
65
|
+
).filter((r) => t.has(r.dataset.treeitemId ?? "")).map((r) => r.dataset.treeitemId ?? "").filter(Boolean);
|
|
66
|
+
}, []), T = m(
|
|
67
|
+
(t) => {
|
|
68
|
+
const o = x();
|
|
69
|
+
if (o.length === 0) return;
|
|
70
|
+
const r = d ?? e, j = r ? o.indexOf(r) : -1, w = (a) => {
|
|
71
|
+
E(a);
|
|
72
|
+
const y = u.current.get(a), k = y?.querySelector(
|
|
73
|
+
'[role="button"]'
|
|
74
|
+
);
|
|
75
|
+
k ? k.focus() : y?.focus();
|
|
76
|
+
};
|
|
77
|
+
switch (t.key) {
|
|
78
|
+
case "ArrowDown": {
|
|
79
|
+
t.preventDefault();
|
|
80
|
+
const a = Math.min(j + 1, o.length - 1);
|
|
81
|
+
w(o[a]);
|
|
82
|
+
break;
|
|
83
|
+
}
|
|
84
|
+
case "ArrowUp": {
|
|
85
|
+
t.preventDefault();
|
|
86
|
+
const a = Math.max(j - 1, 0);
|
|
87
|
+
w(o[a]);
|
|
88
|
+
break;
|
|
89
|
+
}
|
|
90
|
+
case "ArrowRight": {
|
|
91
|
+
if (t.preventDefault(), r)
|
|
92
|
+
if (!c.has(r))
|
|
93
|
+
f((a) => /* @__PURE__ */ new Set([...a, r]));
|
|
94
|
+
else {
|
|
95
|
+
const a = j + 1;
|
|
96
|
+
a < o.length && w(o[a]);
|
|
97
|
+
}
|
|
98
|
+
break;
|
|
99
|
+
}
|
|
100
|
+
case "ArrowLeft": {
|
|
101
|
+
if (t.preventDefault(), r)
|
|
102
|
+
if (c.has(r))
|
|
103
|
+
f((a) => {
|
|
104
|
+
const y = new Set(a);
|
|
105
|
+
return y.delete(r), y;
|
|
106
|
+
});
|
|
107
|
+
else {
|
|
108
|
+
const k = u.current.get(r)?.closest('[role="group"]')?.closest('[role="treeitem"]')?.dataset.treeitemId;
|
|
109
|
+
k && w(k);
|
|
110
|
+
}
|
|
111
|
+
break;
|
|
112
|
+
}
|
|
113
|
+
case "Home": {
|
|
114
|
+
t.preventDefault(), o.length > 0 && w(o[0]);
|
|
115
|
+
break;
|
|
116
|
+
}
|
|
117
|
+
case "End": {
|
|
118
|
+
t.preventDefault(), o.length > 0 && w(o[o.length - 1]);
|
|
119
|
+
break;
|
|
120
|
+
}
|
|
121
|
+
case "Enter":
|
|
122
|
+
case " ": {
|
|
123
|
+
t.preventDefault(), r && (i?.(r), s && b(r));
|
|
124
|
+
break;
|
|
125
|
+
}
|
|
126
|
+
}
|
|
127
|
+
},
|
|
128
|
+
[
|
|
129
|
+
d,
|
|
130
|
+
e,
|
|
131
|
+
c,
|
|
132
|
+
x,
|
|
133
|
+
i,
|
|
134
|
+
s,
|
|
135
|
+
b
|
|
136
|
+
]
|
|
137
|
+
), h = K(
|
|
138
|
+
() => ({
|
|
139
|
+
selectedId: e,
|
|
140
|
+
onSelect: i ?? (() => {
|
|
141
|
+
}),
|
|
142
|
+
expandedIds: c,
|
|
143
|
+
toggleExpanded: b,
|
|
144
|
+
expandOnSelect: s,
|
|
145
|
+
registerItem: v,
|
|
146
|
+
unregisterItem: D,
|
|
147
|
+
focusedId: d,
|
|
148
|
+
setFocusedId: E,
|
|
149
|
+
getVisibleItems: x
|
|
150
|
+
}),
|
|
151
|
+
[
|
|
152
|
+
e,
|
|
153
|
+
i,
|
|
154
|
+
c,
|
|
155
|
+
b,
|
|
156
|
+
s,
|
|
157
|
+
v,
|
|
158
|
+
D,
|
|
159
|
+
d,
|
|
160
|
+
E,
|
|
161
|
+
x
|
|
162
|
+
]
|
|
163
|
+
);
|
|
164
|
+
return /* @__PURE__ */ p.jsx(V, { value: h, children: /* @__PURE__ */ p.jsx(
|
|
165
|
+
"div",
|
|
166
|
+
{
|
|
167
|
+
"data-slot": "tree",
|
|
168
|
+
role: "tree",
|
|
169
|
+
"aria-label": "File tree",
|
|
170
|
+
className: C(
|
|
171
|
+
"flex flex-col gap-0.5",
|
|
172
|
+
// Focus ring for keyboard navigation
|
|
173
|
+
`
|
|
174
|
+
focus:ring-2 focus:ring-ring-default focus:ring-offset-1
|
|
175
|
+
focus:outline-hidden
|
|
176
|
+
`,
|
|
177
|
+
`
|
|
178
|
+
focus-visible:ring-2 focus-visible:ring-ring-default
|
|
179
|
+
focus-visible:ring-offset-1 focus-visible:outline-hidden
|
|
180
|
+
`,
|
|
181
|
+
n
|
|
182
|
+
),
|
|
183
|
+
onKeyDown: T,
|
|
184
|
+
tabIndex: 0,
|
|
185
|
+
...I,
|
|
186
|
+
children: l
|
|
187
|
+
}
|
|
188
|
+
) });
|
|
189
|
+
}
|
|
190
|
+
function J({
|
|
191
|
+
value: e,
|
|
192
|
+
disabled: i = !1,
|
|
193
|
+
className: g,
|
|
194
|
+
children: s,
|
|
195
|
+
...n
|
|
196
|
+
}) {
|
|
197
|
+
const l = z(), I = A(R), c = I ? I.level + 1 : 1, f = l.expandedIds.has(e), d = l.selectedId === e, E = l.focusedId === e, [u, b] = S(!1), v = H(null);
|
|
198
|
+
N.useEffect(() => {
|
|
199
|
+
const h = v.current;
|
|
200
|
+
if (h)
|
|
201
|
+
return l.registerItem(e, h), () => l.unregisterItem(e);
|
|
202
|
+
}, [e, l]);
|
|
203
|
+
const D = m(
|
|
204
|
+
(h) => {
|
|
205
|
+
const t = v.current?.closest('[role="tree"]');
|
|
206
|
+
t && t.dispatchEvent(
|
|
207
|
+
new KeyboardEvent("keydown", {
|
|
208
|
+
key: h.key,
|
|
209
|
+
code: h.code,
|
|
210
|
+
bubbles: !0,
|
|
211
|
+
cancelable: !0
|
|
212
|
+
})
|
|
213
|
+
);
|
|
214
|
+
},
|
|
215
|
+
[]
|
|
216
|
+
), x = K(
|
|
217
|
+
() => ({ value: e, isExpanded: f, isSelected: d, hasChildren: u, level: c, disabled: i }),
|
|
218
|
+
[e, f, d, u, c, i]
|
|
219
|
+
), T = K(
|
|
220
|
+
() => ({ ...x, _setHasChildren: b }),
|
|
221
|
+
[x]
|
|
222
|
+
);
|
|
223
|
+
return /* @__PURE__ */ p.jsx(R, { value: T, children: /* @__PURE__ */ p.jsx(
|
|
224
|
+
"div",
|
|
225
|
+
{
|
|
226
|
+
ref: v,
|
|
227
|
+
"data-slot": "tree-item",
|
|
228
|
+
"data-treeitem-id": e,
|
|
229
|
+
role: "treeitem",
|
|
230
|
+
"aria-expanded": u ? f : void 0,
|
|
231
|
+
"aria-selected": d,
|
|
232
|
+
"aria-level": c,
|
|
233
|
+
"aria-disabled": i || void 0,
|
|
234
|
+
tabIndex: E || l.focusedId === null && d ? 0 : -1,
|
|
235
|
+
"data-state": f ? "open" : "closed",
|
|
236
|
+
"data-selected": d ? "true" : "false",
|
|
237
|
+
"data-disabled": i ? "true" : void 0,
|
|
238
|
+
className: C("outline-none", g),
|
|
239
|
+
onKeyDown: D,
|
|
240
|
+
...n,
|
|
241
|
+
children: s
|
|
242
|
+
}
|
|
243
|
+
) });
|
|
244
|
+
}
|
|
245
|
+
function P({
|
|
246
|
+
className: e,
|
|
247
|
+
children: i,
|
|
248
|
+
...g
|
|
249
|
+
}) {
|
|
250
|
+
const s = z(), n = F(), l = m(() => {
|
|
251
|
+
n.disabled || (s.onSelect(n.value), s.setFocusedId(n.value), n.hasChildren && s.expandOnSelect && s.toggleExpanded(n.value));
|
|
252
|
+
}, [n, s]), I = m(
|
|
253
|
+
(c) => {
|
|
254
|
+
n.disabled || (c.key === "Enter" || c.key === " ") && (c.preventDefault(), l());
|
|
255
|
+
},
|
|
256
|
+
[n.disabled, l]
|
|
257
|
+
);
|
|
258
|
+
return /* @__PURE__ */ p.jsxs(
|
|
259
|
+
"div",
|
|
260
|
+
{
|
|
261
|
+
"data-slot": "tree-item-trigger",
|
|
262
|
+
role: "button",
|
|
263
|
+
tabIndex: n.disabled ? -1 : 0,
|
|
264
|
+
"aria-disabled": n.disabled || void 0,
|
|
265
|
+
className: C(
|
|
266
|
+
L({ isSelected: n.isSelected }),
|
|
267
|
+
e
|
|
268
|
+
),
|
|
269
|
+
style: { paddingLeft: `${(n.level - 1) * 16 + 8}px` },
|
|
270
|
+
onClick: l,
|
|
271
|
+
onKeyDown: I,
|
|
272
|
+
...g,
|
|
273
|
+
children: [
|
|
274
|
+
n.hasChildren ? /* @__PURE__ */ p.jsx(
|
|
275
|
+
M,
|
|
276
|
+
{
|
|
277
|
+
className: C(
|
|
278
|
+
"size-4 shrink-0 transition-transform duration-200",
|
|
279
|
+
n.isExpanded && "rotate-90"
|
|
280
|
+
),
|
|
281
|
+
"aria-hidden": "true"
|
|
282
|
+
}
|
|
283
|
+
) : /* @__PURE__ */ p.jsx("span", { className: "size-4 shrink-0", "aria-hidden": "true" }),
|
|
284
|
+
i
|
|
285
|
+
]
|
|
286
|
+
}
|
|
287
|
+
);
|
|
288
|
+
}
|
|
289
|
+
function Q({
|
|
290
|
+
className: e,
|
|
291
|
+
children: i,
|
|
292
|
+
...g
|
|
293
|
+
}) {
|
|
294
|
+
const s = F();
|
|
295
|
+
return N.useEffect(() => (s._setHasChildren?.(!0), () => s._setHasChildren?.(!1)), [s]), s.isExpanded ? /* @__PURE__ */ p.jsx(
|
|
296
|
+
"div",
|
|
297
|
+
{
|
|
298
|
+
"data-slot": "tree-item-content",
|
|
299
|
+
role: "group",
|
|
300
|
+
className: C("flex flex-col gap-0.5", e),
|
|
301
|
+
...g,
|
|
302
|
+
children: i
|
|
303
|
+
}
|
|
304
|
+
) : null;
|
|
305
|
+
}
|
|
306
|
+
export {
|
|
307
|
+
G as Tree,
|
|
308
|
+
J as TreeItem,
|
|
309
|
+
Q as TreeItemContent,
|
|
310
|
+
P as TreeItemTrigger,
|
|
311
|
+
z as useTree
|
|
312
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { Field, FieldDescription, FieldGroup, FieldLabel, FieldMessage, } from '@/components/field';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, } from '@/components/pagination';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { RadioGroup, RadioGroupItem } from '@/components/radio-group';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants, } from '@/components/tabs';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { Tree, TreeItem, TreeItemTrigger, TreeItemContent, useTree } from '@/components/tree';
|
|
@@ -2,7 +2,7 @@ import { j as r, c as n } from "./index-C_XDkVGm.js";
|
|
|
2
2
|
import { EyeSlashIcon as f, EyeIcon as m } from "@phosphor-icons/react";
|
|
3
3
|
import { cva as x } from "class-variance-authority";
|
|
4
4
|
import * as g from "react";
|
|
5
|
-
import { B as b } from "./button-
|
|
5
|
+
import { B as b } from "./button-CKrOlPSD.js";
|
|
6
6
|
const o = x(
|
|
7
7
|
`
|
|
8
8
|
flex w-full min-w-0 rounded-md border border-input bg-transparent
|