@stll/ui 0.7.0 → 0.9.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +41 -5
- package/dist/components/application-rail.d.ts +20 -0
- package/dist/components/application-rail.js +52 -0
- package/dist/components/application-shell.js +1 -1
- package/dist/components/button-variants.d.ts +1 -1
- package/dist/components/combobox.d.ts +3 -2
- package/dist/components/combobox.js +35 -7
- package/dist/components/command.d.ts +2 -1
- package/dist/components/command.js +8 -2
- package/dist/components/input.d.ts +2 -1
- package/dist/components/input.js +9 -2
- package/dist/components/select.d.ts +2 -1
- package/dist/components/select.js +8 -2
- package/dist/components/textarea.d.ts +2 -1
- package/dist/components/textarea.js +9 -2
- package/dist/index.d.ts +7 -1
- package/dist/index.js +8 -2
- package/dist/inspector/index.d.ts +2 -1
- package/dist/inspector/index.js +2 -1
- package/dist/inspector/tabs.d.ts +16 -0
- package/dist/inspector/tabs.js +49 -0
- package/dist/kanban/grouping.d.ts +2 -0
- package/dist/kanban/grouping.js +1 -0
- package/dist/kanban/index.d.ts +4 -1
- package/dist/kanban/index.js +4 -1
- package/dist/kanban/matrix.d.ts +85 -0
- package/dist/kanban/matrix.js +121 -0
- package/dist/kanban/subgroup-board.d.ts +36 -0
- package/dist/kanban/subgroup-board.js +115 -0
- package/dist/kanban/virtual-cell.d.ts +33 -0
- package/dist/kanban/virtual-cell.js +58 -0
- package/dist/lib/control-size.d.ts +10 -0
- package/dist/lib/control-size.js +9 -0
- package/package.json +16 -1
package/README.md
CHANGED
|
@@ -11,7 +11,7 @@ cannot reach into product code by accident. Lint enforces that boundary; the
|
|
|
11
11
|
export map below is what "part of the design system" means.
|
|
12
12
|
|
|
13
13
|
Peer dependencies: `react`, `react-dom`, `@base-ui/react`, `tailwindcss` (v4),
|
|
14
|
-
`@dnd-kit/core`,
|
|
14
|
+
`@dnd-kit/core`, `@dnd-kit/sortable`, and `@tanstack/react-virtual`.
|
|
15
15
|
|
|
16
16
|
## Import
|
|
17
17
|
|
|
@@ -58,10 +58,11 @@ spellings land on the same module for as long as they both exist.
|
|
|
58
58
|
|
|
59
59
|
## Sortable boards
|
|
60
60
|
|
|
61
|
-
`@stll/ui/kanban` provides
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
61
|
+
`@stll/ui/kanban` provides board matrices, subgroup swimlanes, bounded virtual
|
|
62
|
+
cells, and input/accessibility primitives. The caller keeps domain identifiers,
|
|
63
|
+
card rendering, permissions, and persisted mutations. Wrap sortable boards in
|
|
64
|
+
`KanbanSortableBoard`, render items through `useKanbanSortable`, and attach the
|
|
65
|
+
returned bindings to `KanbanDragHandle`.
|
|
65
66
|
|
|
66
67
|
```tsx
|
|
67
68
|
import {
|
|
@@ -100,6 +101,41 @@ auto-scroll options, and an `overlay` render function.
|
|
|
100
101
|
`input: "keyboard"` and require source and target indices, so every move has a
|
|
101
102
|
logical edge without relying on ambiguous geometry.
|
|
102
103
|
|
|
104
|
+
For Group/Sub-group boards, build one canonical matrix and render it with the
|
|
105
|
+
installable layout and virtual cell:
|
|
106
|
+
|
|
107
|
+
```tsx
|
|
108
|
+
import {
|
|
109
|
+
KanbanSubgroupBoard,
|
|
110
|
+
KanbanVirtualCell,
|
|
111
|
+
buildKanbanBoardMatrix,
|
|
112
|
+
} from "@stll/ui/kanban";
|
|
113
|
+
|
|
114
|
+
const matrix = buildKanbanBoardMatrix({
|
|
115
|
+
group,
|
|
116
|
+
subgroup,
|
|
117
|
+
rows,
|
|
118
|
+
resolveGroupValue,
|
|
119
|
+
uncategorizedLabel: "No value",
|
|
120
|
+
});
|
|
121
|
+
|
|
122
|
+
<KanbanSubgroupBoard
|
|
123
|
+
matrix={matrix}
|
|
124
|
+
renderColumnHeader={({ column, count }) => (
|
|
125
|
+
<ColumnHeader column={column} count={count} />
|
|
126
|
+
)}
|
|
127
|
+
renderLaneIdentity={({ group: lane }) => <Lane group={lane} />}
|
|
128
|
+
renderCell={({ cell }) => (
|
|
129
|
+
<KanbanVirtualCell
|
|
130
|
+
getRowKey={(row) => row.id}
|
|
131
|
+
pagination={{ type: "none" }}
|
|
132
|
+
renderRow={(row) => <Card row={row} />}
|
|
133
|
+
rows={cell.rows}
|
|
134
|
+
/>
|
|
135
|
+
)}
|
|
136
|
+
/>;
|
|
137
|
+
```
|
|
138
|
+
|
|
103
139
|
## Styles
|
|
104
140
|
|
|
105
141
|
No compiled CSS ships. The components carry Tailwind class names, so the
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import * as React$1 from "react";
|
|
2
|
+
//#region src/components/application-rail.d.ts
|
|
3
|
+
declare const APPLICATION_RAIL_WIDTH: "w-12";
|
|
4
|
+
declare const APPLICATION_RAIL_BUTTON_SIZE: "size-11";
|
|
5
|
+
declare const APPLICATION_RAIL_ICON_SIZE: "size-4";
|
|
6
|
+
/**
|
|
7
|
+
* A compact application navigation rail. It preserves the same desktop width,
|
|
8
|
+
* button rhythm, separators, and account affordance as a collapsed app
|
|
9
|
+
* sidebar without bringing sidebar expansion or mobile-sheet state into hosts
|
|
10
|
+
* that only need a fixed rail.
|
|
11
|
+
*/
|
|
12
|
+
declare const ApplicationRail: ({ className, ...props }: React$1.ComponentProps<"nav">) => React$1.JSX.Element;
|
|
13
|
+
declare const ApplicationRailHeader: ({ className, ...props }: React$1.ComponentProps<"div">) => React$1.JSX.Element;
|
|
14
|
+
declare const ApplicationRailContent: ({ className, ...props }: React$1.ComponentProps<"div">) => React$1.JSX.Element;
|
|
15
|
+
declare const ApplicationRailMenu: ({ className, ...props }: React$1.ComponentProps<"div">) => React$1.JSX.Element;
|
|
16
|
+
declare const ApplicationRailButton: ({ className, ...props }: React$1.ComponentProps<"button">) => React$1.JSX.Element;
|
|
17
|
+
declare const ApplicationRailSeparator: ({ className, ...props }: React$1.ComponentProps<"div">) => React$1.JSX.Element;
|
|
18
|
+
declare const ApplicationRailFooter: ({ className, ...props }: React$1.ComponentProps<"div">) => React$1.JSX.Element;
|
|
19
|
+
//#endregion
|
|
20
|
+
export { APPLICATION_RAIL_BUTTON_SIZE, APPLICATION_RAIL_ICON_SIZE, APPLICATION_RAIL_WIDTH, ApplicationRail, ApplicationRailButton, ApplicationRailContent, ApplicationRailFooter, ApplicationRailHeader, ApplicationRailMenu, ApplicationRailSeparator };
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
import { cn } from "../lib/utils.js";
|
|
2
|
+
import { TOOLBAR_ROW_HEIGHT } from "../inspector/layout-tokens.js";
|
|
3
|
+
import { jsx } from "react/jsx-runtime";
|
|
4
|
+
//#region src/components/application-rail.tsx
|
|
5
|
+
const APPLICATION_RAIL_WIDTH = "w-12";
|
|
6
|
+
const APPLICATION_RAIL_BUTTON_SIZE = "size-11";
|
|
7
|
+
const APPLICATION_RAIL_ICON_SIZE = "size-4";
|
|
8
|
+
/**
|
|
9
|
+
* A compact application navigation rail. It preserves the same desktop width,
|
|
10
|
+
* button rhythm, separators, and account affordance as a collapsed app
|
|
11
|
+
* sidebar without bringing sidebar expansion or mobile-sheet state into hosts
|
|
12
|
+
* that only need a fixed rail.
|
|
13
|
+
*/
|
|
14
|
+
const ApplicationRail = ({ className, ...props }) => /* @__PURE__ */ jsx("nav", {
|
|
15
|
+
className: cn("bg-sidebar text-sidebar-foreground hidden h-full min-h-0 shrink-0 flex-col border-e md:flex", APPLICATION_RAIL_WIDTH, className),
|
|
16
|
+
"data-slot": "application-rail",
|
|
17
|
+
...props
|
|
18
|
+
});
|
|
19
|
+
const ApplicationRailHeader = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
|
|
20
|
+
className: cn("flex shrink-0 items-center justify-center border-b p-0.5", TOOLBAR_ROW_HEIGHT, className),
|
|
21
|
+
"data-slot": "application-rail-header",
|
|
22
|
+
...props
|
|
23
|
+
});
|
|
24
|
+
const ApplicationRailContent = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
|
|
25
|
+
className: cn("flex min-h-0 flex-1 [scrollbar-width:none] flex-col gap-2 overflow-x-hidden overflow-y-auto [&::-webkit-scrollbar]:hidden", className),
|
|
26
|
+
"data-slot": "application-rail-content",
|
|
27
|
+
...props
|
|
28
|
+
});
|
|
29
|
+
const ApplicationRailMenu = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
|
|
30
|
+
className: cn("flex flex-col gap-0.5 p-0.5", className),
|
|
31
|
+
"data-slot": "application-rail-menu",
|
|
32
|
+
...props
|
|
33
|
+
});
|
|
34
|
+
const ApplicationRailButton = ({ className, ...props }) => /* @__PURE__ */ jsx("button", {
|
|
35
|
+
className: cn("text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground flex shrink-0 items-center justify-center rounded-md outline-hidden transition-colors focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50", APPLICATION_RAIL_BUTTON_SIZE, className),
|
|
36
|
+
"data-slot": "application-rail-button",
|
|
37
|
+
type: "button",
|
|
38
|
+
...props
|
|
39
|
+
});
|
|
40
|
+
const ApplicationRailSeparator = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
|
|
41
|
+
className: cn("bg-sidebar-border h-px shrink-0", className),
|
|
42
|
+
"data-slot": "application-rail-separator",
|
|
43
|
+
role: "separator",
|
|
44
|
+
...props
|
|
45
|
+
});
|
|
46
|
+
const ApplicationRailFooter = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
|
|
47
|
+
className: cn("mt-auto flex shrink-0 flex-col gap-0.5 p-0.5", className),
|
|
48
|
+
"data-slot": "application-rail-footer",
|
|
49
|
+
...props
|
|
50
|
+
});
|
|
51
|
+
//#endregion
|
|
52
|
+
export { APPLICATION_RAIL_BUTTON_SIZE, APPLICATION_RAIL_ICON_SIZE, APPLICATION_RAIL_WIDTH, ApplicationRail, ApplicationRailButton, ApplicationRailContent, ApplicationRailFooter, ApplicationRailHeader, ApplicationRailMenu, ApplicationRailSeparator };
|
|
@@ -14,7 +14,7 @@ const ApplicationShell = ({ children, className, header, inspector, mainClassNam
|
|
|
14
14
|
children: [
|
|
15
15
|
sidebar,
|
|
16
16
|
/* @__PURE__ */ jsxs("main", {
|
|
17
|
-
className: cn("bg-background relative flex w-full flex-1 flex-col overflow-hidden", "md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ms-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ms-2", mainClassName),
|
|
17
|
+
className: cn("bg-background relative flex w-full min-w-0 flex-1 flex-col overflow-hidden", "md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ms-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ms-2", mainClassName),
|
|
18
18
|
"data-slot": "application-shell-main",
|
|
19
19
|
children: [header, children]
|
|
20
20
|
}),
|
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
*/
|
|
11
11
|
declare const buttonAccessibleDisabledClass = "cursor-not-allowed opacity-64";
|
|
12
12
|
declare const buttonVariants: (props?: ({
|
|
13
|
-
size?: "xs" | "sm" | "icon" | "default" | "
|
|
13
|
+
size?: "xs" | "sm" | "icon" | "default" | "icon-lg" | "icon-sm" | "icon-xl" | "icon-xs" | "lg" | "xl" | null | undefined;
|
|
14
14
|
variant?: "destructive" | "outline" | "link" | "default" | "destructive-outline" | "ghost" | "secondary" | null | undefined;
|
|
15
15
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
16
16
|
//#endregion
|
|
@@ -1,16 +1,17 @@
|
|
|
1
|
+
import { ControlSize } from "../lib/control-size.js";
|
|
1
2
|
import * as React$1 from "react";
|
|
2
3
|
import { Combobox as Combobox$1 } from "@base-ui/react/combobox";
|
|
3
4
|
//#region src/components/combobox.d.ts
|
|
4
5
|
declare const Combobox: <Value, Multiple extends boolean | undefined = false>(props: Combobox$1.Root.Props<Value, Multiple>) => React$1.JSX.Element;
|
|
5
6
|
declare const ComboboxChipsInput: ({ className, size, ...props }: Omit<Combobox$1.Input.Props, "size"> & {
|
|
6
|
-
size?:
|
|
7
|
+
size?: ControlSize | number;
|
|
7
8
|
ref?: React$1.Ref<HTMLInputElement>;
|
|
8
9
|
}) => React$1.JSX.Element;
|
|
9
10
|
declare const ComboboxInput: ({ className, showTrigger, showClear, startAddon, size, ...props }: Omit<Combobox$1.Input.Props, "size"> & {
|
|
10
11
|
showTrigger?: boolean;
|
|
11
12
|
showClear?: boolean;
|
|
12
13
|
startAddon?: React$1.ReactNode;
|
|
13
|
-
size?:
|
|
14
|
+
size?: ControlSize | number;
|
|
14
15
|
ref?: React$1.Ref<HTMLInputElement>;
|
|
15
16
|
}) => React$1.JSX.Element;
|
|
16
17
|
declare const ComboboxTrigger: ({ className, ...props }: Combobox$1.Trigger.Props) => React$1.JSX.Element;
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
import { cn } from "../lib/utils.js";
|
|
3
3
|
import { OVERLAY_LAYER_CLASS_NAMES } from "../lib/overlay-layer.js";
|
|
4
4
|
import { containedHandler } from "../hooks/use-contained-handler.js";
|
|
5
|
+
import { CONTROL_SIZE } from "../lib/control-size.js";
|
|
5
6
|
import { Input } from "./input.js";
|
|
6
7
|
import { ScrollArea } from "./scroll-area.js";
|
|
7
8
|
import { ChevronsUpDownIcon, XIcon } from "lucide-react";
|
|
@@ -25,9 +26,10 @@ const Combobox = (props) => {
|
|
|
25
26
|
});
|
|
26
27
|
};
|
|
27
28
|
const ComboboxChipsInput = ({ className, size, ...props }) => {
|
|
28
|
-
const sizeValue = size ??
|
|
29
|
+
const sizeValue = size ?? CONTROL_SIZE.default;
|
|
30
|
+
const controlSize = typeof sizeValue === "number" ? CONTROL_SIZE.default : sizeValue;
|
|
29
31
|
return /* @__PURE__ */ jsx(Combobox$1.Input, {
|
|
30
|
-
className: cn("min-w-12 flex-1 text-base outline-none sm:text-sm [[data-slot=combobox-chip]+&]:ps-0.5",
|
|
32
|
+
className: cn("min-w-12 flex-1 text-base outline-none sm:text-sm [[data-slot=combobox-chip]+&]:ps-0.5", COMBOBOX_CHIPS_INPUT_SIZE_CLASS_NAMES[controlSize], className),
|
|
31
33
|
"data-size": typeof sizeValue === "string" ? sizeValue : void 0,
|
|
32
34
|
"data-slot": "combobox-chips-input",
|
|
33
35
|
size: typeof sizeValue === "number" ? sizeValue : void 0,
|
|
@@ -35,18 +37,19 @@ const ComboboxChipsInput = ({ className, size, ...props }) => {
|
|
|
35
37
|
});
|
|
36
38
|
};
|
|
37
39
|
const ComboboxInput = ({ className, showTrigger = true, showClear = false, startAddon, size, ...props }) => {
|
|
38
|
-
const sizeValue = size ??
|
|
40
|
+
const sizeValue = size ?? CONTROL_SIZE.default;
|
|
41
|
+
const controlSize = typeof sizeValue === "number" ? CONTROL_SIZE.default : sizeValue;
|
|
39
42
|
return /* @__PURE__ */ jsxs(Combobox$1.InputGroup, {
|
|
40
43
|
className: "text-foreground relative w-full not-has-[>*.w-full]:w-fit has-disabled:opacity-64",
|
|
41
44
|
children: [
|
|
42
45
|
Boolean(startAddon) && /* @__PURE__ */ jsx("div", {
|
|
43
46
|
"aria-hidden": "true",
|
|
44
|
-
className: "pointer-events-none absolute inset-y-0 start-px z-10 flex items-center
|
|
47
|
+
className: cn("pointer-events-none absolute inset-y-0 start-px z-10 flex items-center opacity-80 [&_svg]:-mx-0.5 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4", COMBOBOX_START_ADDON_SIZE_CLASS_NAMES[controlSize]),
|
|
45
48
|
"data-slot": "combobox-start-addon",
|
|
46
49
|
children: startAddon
|
|
47
50
|
}),
|
|
48
51
|
/* @__PURE__ */ jsx(Combobox$1.Input, {
|
|
49
|
-
className: cn(Boolean(startAddon) &&
|
|
52
|
+
className: cn(Boolean(startAddon) && COMBOBOX_INPUT_START_ADDON_SIZE_CLASS_NAMES[controlSize], COMBOBOX_INPUT_SIZE_CLASS_NAMES[controlSize], className),
|
|
50
53
|
"data-slot": "combobox-input",
|
|
51
54
|
render: /* @__PURE__ */ jsx(Input, {
|
|
52
55
|
className: "has-disabled:opacity-100",
|
|
@@ -56,16 +59,41 @@ const ComboboxInput = ({ className, showTrigger = true, showClear = false, start
|
|
|
56
59
|
...props
|
|
57
60
|
}),
|
|
58
61
|
showTrigger && /* @__PURE__ */ jsx(ComboboxTrigger, {
|
|
59
|
-
className: cn("absolute top-1/2 inline-flex size-8 shrink-0 -translate-y-1/2 cursor-pointer items-center justify-center rounded-md border border-transparent opacity-80 transition-opacity outline-none hover:opacity-100 has-[+[data-slot=combobox-clear]]:hidden sm:size-7 pointer-coarse:after:absolute pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4",
|
|
62
|
+
className: cn("absolute top-1/2 inline-flex size-8 shrink-0 -translate-y-1/2 cursor-pointer items-center justify-center rounded-md border border-transparent opacity-80 transition-opacity outline-none hover:opacity-100 has-[+[data-slot=combobox-clear]]:hidden sm:size-7 pointer-coarse:after:absolute pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4", COMBOBOX_ACTION_SIZE_CLASS_NAMES[controlSize]),
|
|
60
63
|
children: /* @__PURE__ */ jsx(ChevronsUpDownIcon, {})
|
|
61
64
|
}),
|
|
62
65
|
showClear && /* @__PURE__ */ jsx(ComboboxClear, {
|
|
63
|
-
className: cn("absolute top-1/2 inline-flex size-8 shrink-0 -translate-y-1/2 cursor-pointer items-center justify-center rounded-md border border-transparent opacity-80 transition-opacity outline-none hover:opacity-100 has-[+[data-slot=combobox-clear]]:hidden sm:size-7 pointer-coarse:after:absolute pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4",
|
|
66
|
+
className: cn("absolute top-1/2 inline-flex size-8 shrink-0 -translate-y-1/2 cursor-pointer items-center justify-center rounded-md border border-transparent opacity-80 transition-opacity outline-none hover:opacity-100 has-[+[data-slot=combobox-clear]]:hidden sm:size-7 pointer-coarse:after:absolute pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4", COMBOBOX_ACTION_SIZE_CLASS_NAMES[controlSize]),
|
|
64
67
|
children: /* @__PURE__ */ jsx(XIcon, {})
|
|
65
68
|
})
|
|
66
69
|
]
|
|
67
70
|
});
|
|
68
71
|
};
|
|
72
|
+
const COMBOBOX_CHIPS_INPUT_SIZE_CLASS_NAMES = {
|
|
73
|
+
[CONTROL_SIZE.sm]: "ps-1.5",
|
|
74
|
+
[CONTROL_SIZE.default]: "ps-2",
|
|
75
|
+
[CONTROL_SIZE.lg]: "ps-2"
|
|
76
|
+
};
|
|
77
|
+
const COMBOBOX_START_ADDON_SIZE_CLASS_NAMES = {
|
|
78
|
+
[CONTROL_SIZE.sm]: "ps-[calc(--spacing(2.5)-1px)]",
|
|
79
|
+
[CONTROL_SIZE.default]: "ps-[calc(--spacing(3)-1px)]",
|
|
80
|
+
[CONTROL_SIZE.lg]: "ps-[calc(--spacing(3)-1px)]"
|
|
81
|
+
};
|
|
82
|
+
const COMBOBOX_INPUT_START_ADDON_SIZE_CLASS_NAMES = {
|
|
83
|
+
[CONTROL_SIZE.sm]: "*:data-[slot=combobox-input]:ps-[calc(--spacing(7.5)-1px)] sm:*:data-[slot=combobox-input]:ps-[calc(--spacing(7)-1px)]",
|
|
84
|
+
[CONTROL_SIZE.default]: "*:data-[slot=combobox-input]:ps-[calc(--spacing(8.5)-1px)] sm:*:data-[slot=combobox-input]:ps-[calc(--spacing(8)-1px)]",
|
|
85
|
+
[CONTROL_SIZE.lg]: "*:data-[slot=combobox-input]:ps-[calc(--spacing(8.5)-1px)] sm:*:data-[slot=combobox-input]:ps-[calc(--spacing(8)-1px)]"
|
|
86
|
+
};
|
|
87
|
+
const COMBOBOX_INPUT_SIZE_CLASS_NAMES = {
|
|
88
|
+
[CONTROL_SIZE.sm]: "has-[+[data-slot=combobox-trigger],+[data-slot=combobox-clear]]:*:data-[slot=combobox-input]:pe-6.5",
|
|
89
|
+
[CONTROL_SIZE.default]: "has-[+[data-slot=combobox-trigger],+[data-slot=combobox-clear]]:*:data-[slot=combobox-input]:pe-7",
|
|
90
|
+
[CONTROL_SIZE.lg]: "has-[+[data-slot=combobox-trigger],+[data-slot=combobox-clear]]:*:data-[slot=combobox-input]:pe-7"
|
|
91
|
+
};
|
|
92
|
+
const COMBOBOX_ACTION_SIZE_CLASS_NAMES = {
|
|
93
|
+
[CONTROL_SIZE.sm]: "end-0",
|
|
94
|
+
[CONTROL_SIZE.default]: "end-0.5",
|
|
95
|
+
[CONTROL_SIZE.lg]: "end-0.5"
|
|
96
|
+
};
|
|
69
97
|
const ComboboxTrigger = ({ className, ...props }) => /* @__PURE__ */ jsx(Combobox$1.Trigger, {
|
|
70
98
|
className,
|
|
71
99
|
"data-slot": "combobox-trigger",
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { ControlSize } from "../lib/control-size.js";
|
|
1
2
|
import { DialogContent as DialogPopup } from "./dialog.js";
|
|
2
3
|
import * as React$1 from "react";
|
|
3
4
|
import { Autocomplete } from "@base-ui/react/autocomplete";
|
|
@@ -11,7 +12,7 @@ declare const CommandDialog: typeof Dialog.Root;
|
|
|
11
12
|
declare const CommandDialogTrigger: (props: Dialog.Trigger.Props) => React$1.JSX.Element;
|
|
12
13
|
declare const CommandDialogPopup: ({ className, showCloseButton, ...props }: React$1.ComponentProps<typeof DialogPopup>) => React$1.JSX.Element;
|
|
13
14
|
type CommandInputProps = Omit<Autocomplete.Input.Props, "size"> & {
|
|
14
|
-
size?:
|
|
15
|
+
size?: ControlSize | number;
|
|
15
16
|
wrapperClassName?: string;
|
|
16
17
|
ref?: React$1.Ref<HTMLInputElement>;
|
|
17
18
|
};
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { cn } from "../lib/utils.js";
|
|
3
|
+
import { CONTROL_SIZE } from "../lib/control-size.js";
|
|
3
4
|
import { useContentDir } from "../hooks/use-content-dir.js";
|
|
4
5
|
import { DialogContent as DialogPopup } from "./dialog.js";
|
|
5
6
|
import { SearchIcon } from "lucide-react";
|
|
@@ -24,7 +25,7 @@ const CommandDialogPopup = ({ className, showCloseButton = false, ...props }) =>
|
|
|
24
25
|
showCloseButton,
|
|
25
26
|
...props
|
|
26
27
|
});
|
|
27
|
-
const CommandInput = ({ className, size =
|
|
28
|
+
const CommandInput = ({ className, size = CONTROL_SIZE.lg, wrapperClassName, dir, onChange, ...props }) => {
|
|
28
29
|
const tracked = useContentDir({
|
|
29
30
|
dir: void 0,
|
|
30
31
|
value: void 0,
|
|
@@ -38,7 +39,7 @@ const CommandInput = ({ className, size = "lg", wrapperClassName, dir, onChange,
|
|
|
38
39
|
className: cn("flex min-w-0 flex-1 items-center gap-3", wrapperClassName),
|
|
39
40
|
"data-slot": "command-input-wrapper",
|
|
40
41
|
children: [/* @__PURE__ */ jsx(SearchIcon, { className: "text-muted-foreground size-5 shrink-0" }), /* @__PURE__ */ jsx(Autocomplete.Input, {
|
|
41
|
-
className: cn("placeholder:text-muted-foreground min-w-0 flex-1 bg-transparent text-base outline-none disabled:cursor-not-allowed disabled:opacity-64 sm:text-sm", size === "
|
|
42
|
+
className: cn("placeholder:text-muted-foreground min-w-0 flex-1 bg-transparent text-base outline-none disabled:cursor-not-allowed disabled:opacity-64 sm:text-sm", typeof size === "number" ? void 0 : COMMAND_INPUT_SIZE_CLASS_NAMES[size], className),
|
|
42
43
|
"data-slot": "command-input",
|
|
43
44
|
size: typeof size === "number" ? size : void 0,
|
|
44
45
|
...props,
|
|
@@ -47,6 +48,11 @@ const CommandInput = ({ className, size = "lg", wrapperClassName, dir, onChange,
|
|
|
47
48
|
})]
|
|
48
49
|
});
|
|
49
50
|
};
|
|
51
|
+
const COMMAND_INPUT_SIZE_CLASS_NAMES = {
|
|
52
|
+
[CONTROL_SIZE.sm]: "h-7 text-sm",
|
|
53
|
+
[CONTROL_SIZE.default]: "h-8",
|
|
54
|
+
[CONTROL_SIZE.lg]: "h-9"
|
|
55
|
+
};
|
|
50
56
|
const CommandPanel = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
|
|
51
57
|
className: cn("bg-popover text-popover-foreground flex min-h-0 flex-col rounded-lg border shadow-lg/5", className),
|
|
52
58
|
"data-slot": "command-panel",
|
|
@@ -1,8 +1,9 @@
|
|
|
1
|
+
import { ControlSize } from "../lib/control-size.js";
|
|
1
2
|
import * as React$1 from "react";
|
|
2
3
|
import { Input as Input$1 } from "@base-ui/react/input";
|
|
3
4
|
//#region src/components/input.d.ts
|
|
4
5
|
type InputProps = Omit<Input$1.Props & React$1.RefAttributes<HTMLInputElement>, "size" | "style"> & {
|
|
5
|
-
size?:
|
|
6
|
+
size?: ControlSize | number;
|
|
6
7
|
style?: React$1.CSSProperties;
|
|
7
8
|
unstyled?: boolean;
|
|
8
9
|
nativeInput?: boolean;
|
package/dist/components/input.js
CHANGED
|
@@ -1,11 +1,13 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { cn } from "../lib/utils.js";
|
|
3
|
+
import { CONTROL_SIZE } from "../lib/control-size.js";
|
|
3
4
|
import { isStructuredInputType, useContentDir } from "../hooks/use-content-dir.js";
|
|
4
5
|
import { SearchIcon } from "lucide-react";
|
|
5
6
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
6
7
|
import { Input as Input$1 } from "@base-ui/react/input";
|
|
7
8
|
//#region src/components/input.tsx
|
|
8
|
-
const Input = ({ className, size =
|
|
9
|
+
const Input = ({ className, size = CONTROL_SIZE.default, unstyled = false, nativeInput = false, dir, onChange, ...props }) => {
|
|
10
|
+
const controlSize = typeof size === "number" ? CONTROL_SIZE.default : size;
|
|
9
11
|
const contentDir = useContentDir({
|
|
10
12
|
dir: dir ?? (isStructuredInputType(props.type) ? "ltr" : void 0),
|
|
11
13
|
value: props.value,
|
|
@@ -15,7 +17,7 @@ const Input = ({ className, size = "default", unstyled = false, nativeInput = fa
|
|
|
15
17
|
contentDir.trackValue(event.currentTarget.value);
|
|
16
18
|
onChange?.(event);
|
|
17
19
|
};
|
|
18
|
-
const inputClassName = cn("placeholder:text-foreground-placeholder h-8.5 w-full min-w-0 rounded-[inherit] px-[calc(--spacing(3)-1px)] leading-8.5 outline-none [transition:background-color_5000000s_ease-in-out_0s] sm:h-7.5 sm:leading-7.5",
|
|
20
|
+
const inputClassName = cn("placeholder:text-foreground-placeholder h-8.5 w-full min-w-0 rounded-[inherit] px-[calc(--spacing(3)-1px)] leading-8.5 outline-none [transition:background-color_5000000s_ease-in-out_0s] sm:h-7.5 sm:leading-7.5", INPUT_SIZE_CLASS_NAMES[controlSize], props.type === "search" && "ps-8 [&::-webkit-search-cancel-button]:appearance-none [&::-webkit-search-decoration]:appearance-none [&::-webkit-search-results-button]:appearance-none [&::-webkit-search-results-decoration]:appearance-none", props.type === "file" && "text-muted-foreground file:text-foreground file:me-3 file:bg-transparent file:text-sm file:font-medium");
|
|
19
21
|
return /* @__PURE__ */ jsxs("span", {
|
|
20
22
|
className: cn(!unstyled && "border-input bg-background text-foreground ring-ring/24 has-autofill:bg-foreground/4 has-focus-visible:border-ring has-aria-invalid:border-destructive/36 has-focus-visible:has-aria-invalid:border-destructive/64 has-focus-visible:has-aria-invalid:ring-destructive/16 dark:bg-input/32 dark:has-autofill:bg-foreground/8 dark:has-aria-invalid:ring-destructive/24 relative inline-flex w-full rounded-lg border text-base shadow-xs/5 transition-shadow not-dark:bg-clip-padding before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-has-disabled:not-has-focus-visible:not-has-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] has-focus-visible:ring-[3px] has-disabled:opacity-64 has-[:disabled,:focus-visible,[aria-invalid]]:shadow-none sm:text-sm dark:not-has-disabled:not-has-focus-visible:not-has-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)]", className) || void 0,
|
|
21
23
|
"data-size": size,
|
|
@@ -42,5 +44,10 @@ const Input = ({ className, size = "default", unstyled = false, nativeInput = fa
|
|
|
42
44
|
})]
|
|
43
45
|
});
|
|
44
46
|
};
|
|
47
|
+
const INPUT_SIZE_CLASS_NAMES = {
|
|
48
|
+
[CONTROL_SIZE.sm]: "h-7.5 px-[calc(--spacing(2.5)-1px)] leading-7.5 sm:h-6.5 sm:leading-6.5",
|
|
49
|
+
[CONTROL_SIZE.default]: void 0,
|
|
50
|
+
[CONTROL_SIZE.lg]: "h-9.5 leading-9.5 sm:h-8.5 sm:leading-8.5"
|
|
51
|
+
};
|
|
45
52
|
//#endregion
|
|
46
53
|
export { Input };
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { ControlSize } from "../lib/control-size.js";
|
|
1
2
|
import * as React$1 from "react";
|
|
2
3
|
import { Select as Select$1 } from "@base-ui/react/select";
|
|
3
4
|
//#region src/components/select.d.ts
|
|
@@ -6,7 +7,7 @@ type SelectItemProps = Select$1.Item.Props & {
|
|
|
6
7
|
};
|
|
7
8
|
declare const Select: <Value, Multiple extends boolean | undefined = false>({ children, itemToStringLabel, ...props }: Select$1.Root.Props<Value, Multiple>) => React$1.JSX.Element;
|
|
8
9
|
declare const SelectTrigger: ({ className, size, children, ...props }: Select$1.Trigger.Props & {
|
|
9
|
-
size?:
|
|
10
|
+
size?: ControlSize;
|
|
10
11
|
}) => React$1.JSX.Element;
|
|
11
12
|
declare const SelectValue: ({ className, children, placeholder, ...props }: Select$1.Value.Props) => React$1.JSX.Element;
|
|
12
13
|
declare const SelectPopup: ({ className, children, side, sideOffset, align, alignOffset, alignItemWithTrigger, collisionAvoidance, ...props }: Select$1.Popup.Props & {
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { cn } from "../lib/utils.js";
|
|
3
3
|
import { OVERLAY_LAYER_CLASS_NAMES } from "../lib/overlay-layer.js";
|
|
4
|
+
import { CONTROL_SIZE } from "../lib/control-size.js";
|
|
4
5
|
import { ChevronDownIcon, ChevronUpIcon, ChevronsUpDownIcon } from "lucide-react";
|
|
5
6
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
6
7
|
import * as React$1 from "react";
|
|
@@ -31,8 +32,8 @@ const Select = ({ children, itemToStringLabel, ...props }) => {
|
|
|
31
32
|
children: root
|
|
32
33
|
});
|
|
33
34
|
};
|
|
34
|
-
const SelectTrigger = ({ className, size =
|
|
35
|
-
className: cn("border-input bg-background text-foreground ring-ring/24 focus-visible:border-ring aria-invalid:border-destructive/36 focus-visible:aria-invalid:border-destructive/64 focus-visible:aria-invalid:ring-destructive/16 dark:bg-input/32 dark:aria-invalid:ring-destructive/24 relative inline-flex min-h-9 w-full min-w-36 items-center justify-center gap-2 rounded-lg border px-[calc(--spacing(3)-1px)] text-start text-base shadow-xs/5 transition-shadow outline-none select-none not-dark:bg-clip-padding before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-data-disabled:not-focus-visible:not-aria-invalid:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] focus-visible:ring-[3px] data-disabled:pointer-events-none data-disabled:opacity-64 sm:min-h-8 sm:text-sm dark:not-data-disabled:not-focus-visible:not-aria-invalid:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/6%)] pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [[data-disabled],:focus-visible,[aria-invalid],[data-pressed]]:shadow-none", size
|
|
35
|
+
const SelectTrigger = ({ className, size = CONTROL_SIZE.default, children, ...props }) => /* @__PURE__ */ jsxs(Select$1.Trigger, {
|
|
36
|
+
className: cn("border-input bg-background text-foreground ring-ring/24 focus-visible:border-ring aria-invalid:border-destructive/36 focus-visible:aria-invalid:border-destructive/64 focus-visible:aria-invalid:ring-destructive/16 dark:bg-input/32 dark:aria-invalid:ring-destructive/24 relative inline-flex min-h-9 w-full min-w-36 items-center justify-center gap-2 rounded-lg border px-[calc(--spacing(3)-1px)] text-start text-base shadow-xs/5 transition-shadow outline-none select-none not-dark:bg-clip-padding before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-data-disabled:not-focus-visible:not-aria-invalid:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] focus-visible:ring-[3px] data-disabled:pointer-events-none data-disabled:opacity-64 sm:min-h-8 sm:text-sm dark:not-data-disabled:not-focus-visible:not-aria-invalid:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/6%)] pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [[data-disabled],:focus-visible,[aria-invalid],[data-pressed]]:shadow-none", SELECT_TRIGGER_SIZE_CLASS_NAMES[size], className),
|
|
36
37
|
"data-slot": "select-trigger",
|
|
37
38
|
...props,
|
|
38
39
|
children: [children, /* @__PURE__ */ jsx(Select$1.Icon, {
|
|
@@ -40,6 +41,11 @@ const SelectTrigger = ({ className, size = "default", children, ...props }) => /
|
|
|
40
41
|
children: /* @__PURE__ */ jsx(ChevronsUpDownIcon, { className: "-me-1 size-4.5 opacity-80 sm:size-4" })
|
|
41
42
|
})]
|
|
42
43
|
});
|
|
44
|
+
const SELECT_TRIGGER_SIZE_CLASS_NAMES = {
|
|
45
|
+
[CONTROL_SIZE.sm]: "min-h-8 gap-1.5 px-[calc(--spacing(2.5)-1px)] sm:min-h-7",
|
|
46
|
+
[CONTROL_SIZE.default]: void 0,
|
|
47
|
+
[CONTROL_SIZE.lg]: "min-h-10 sm:min-h-9"
|
|
48
|
+
};
|
|
43
49
|
const SelectValue = ({ className, children, placeholder, ...props }) => {
|
|
44
50
|
const displays = React$1.use(SelectItemDisplaysContext);
|
|
45
51
|
if (children !== void 0 || displays.size === 0) return /* @__PURE__ */ jsx(Select$1.Value, {
|
|
@@ -1,7 +1,8 @@
|
|
|
1
|
+
import { ControlSize } from "../lib/control-size.js";
|
|
1
2
|
import * as React$1 from "react";
|
|
2
3
|
//#region src/components/textarea.d.ts
|
|
3
4
|
type TextareaProps = React$1.ComponentProps<"textarea"> & {
|
|
4
|
-
size?:
|
|
5
|
+
size?: ControlSize | number;
|
|
5
6
|
unstyled?: boolean;
|
|
6
7
|
};
|
|
7
8
|
declare const Textarea: ({ className, size, unstyled, dir, onChange, ...props }: TextareaProps) => React$1.JSX.Element;
|
|
@@ -1,11 +1,13 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { cn } from "../lib/utils.js";
|
|
3
|
+
import { CONTROL_SIZE } from "../lib/control-size.js";
|
|
3
4
|
import { useContentDir } from "../hooks/use-content-dir.js";
|
|
4
5
|
import { jsx } from "react/jsx-runtime";
|
|
5
6
|
import { mergeProps } from "@base-ui/react/merge-props";
|
|
6
7
|
import { Field } from "@base-ui/react/field";
|
|
7
8
|
//#region src/components/textarea.tsx
|
|
8
|
-
const Textarea = ({ className, size =
|
|
9
|
+
const Textarea = ({ className, size = CONTROL_SIZE.default, unstyled = false, dir, onChange, ...props }) => {
|
|
10
|
+
const controlSize = typeof size === "number" ? CONTROL_SIZE.default : size;
|
|
9
11
|
const contentDir = useContentDir({
|
|
10
12
|
dir,
|
|
11
13
|
value: props.value,
|
|
@@ -20,12 +22,17 @@ const Textarea = ({ className, size = "default", unstyled = false, dir, onChange
|
|
|
20
22
|
"data-size": size,
|
|
21
23
|
"data-slot": "textarea-control",
|
|
22
24
|
children: /* @__PURE__ */ jsx(Field.Control, { render: (defaultProps) => /* @__PURE__ */ jsx("textarea", {
|
|
23
|
-
className: cn("field-sizing-content min-h-17.5 w-full rounded-[inherit] px-[calc(--spacing(3)-1px)] py-[calc(--spacing(1.5)-1px)] outline-none max-sm:min-h-20.5",
|
|
25
|
+
className: cn("field-sizing-content min-h-17.5 w-full rounded-[inherit] px-[calc(--spacing(3)-1px)] py-[calc(--spacing(1.5)-1px)] outline-none max-sm:min-h-20.5", TEXTAREA_SIZE_CLASS_NAMES[controlSize]),
|
|
24
26
|
"data-slot": "textarea",
|
|
25
27
|
...mergeProps(defaultProps, props, { onChange: handleChange }),
|
|
26
28
|
dir: contentDir.dir
|
|
27
29
|
}) })
|
|
28
30
|
});
|
|
29
31
|
};
|
|
32
|
+
const TEXTAREA_SIZE_CLASS_NAMES = {
|
|
33
|
+
[CONTROL_SIZE.sm]: "min-h-16.5 px-[calc(--spacing(2.5)-1px)] py-[calc(--spacing(1)-1px)] max-sm:min-h-19.5",
|
|
34
|
+
[CONTROL_SIZE.default]: void 0,
|
|
35
|
+
[CONTROL_SIZE.lg]: "min-h-18.5 py-[calc(--spacing(2)-1px)] max-sm:min-h-21.5"
|
|
36
|
+
};
|
|
30
37
|
//#endregion
|
|
31
38
|
export { Textarea };
|
package/dist/index.d.ts
CHANGED
|
@@ -5,6 +5,7 @@ import "./calendar/index.js";
|
|
|
5
5
|
import { Accordion, AccordionContent as AccordionPanel, AccordionItem, AccordionTrigger } from "./components/accordion.js";
|
|
6
6
|
import { OVERLAY_LAYER_CLASS_NAMES, OverlayLayer } from "./lib/overlay-layer.js";
|
|
7
7
|
import { AlertDialog, AlertDialogBackdrop, AlertDialogClose, AlertDialogContent as AlertDialogPopup, AlertDialogCreateHandle, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogPanel, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertDialogViewport } from "./components/alert-dialog.js";
|
|
8
|
+
import { APPLICATION_RAIL_BUTTON_SIZE, APPLICATION_RAIL_ICON_SIZE, APPLICATION_RAIL_WIDTH, ApplicationRail, ApplicationRailButton, ApplicationRailContent, ApplicationRailFooter, ApplicationRailHeader, ApplicationRailMenu, ApplicationRailSeparator } from "./components/application-rail.js";
|
|
8
9
|
import { ApplicationShell, ApplicationShellProps } from "./components/application-shell.js";
|
|
9
10
|
import { Avatar, AvatarFallback, AvatarImage } from "./components/avatar.js";
|
|
10
11
|
import { BidiDirection, BidiText, BidiTextProps, UserText } from "./components/bidi-text.js";
|
|
@@ -14,6 +15,7 @@ import { buttonAccessibleDisabledClass, buttonVariants } from "./components/butt
|
|
|
14
15
|
import { Button } from "./components/button.js";
|
|
15
16
|
import { Checkbox } from "./components/checkbox.js";
|
|
16
17
|
import { ColorPicker, ColorPickerContent, ColorPickerContentProps, ColorPickerProps, ColorPreset, DEFAULT_PRESETS } from "./components/color-picker.js";
|
|
18
|
+
import { CONTROL_SIZE, CONTROL_SIZES, ControlSize } from "./lib/control-size.js";
|
|
17
19
|
import { Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxClear, ComboboxCollection, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxList, ComboboxPopup, ComboboxRow, ComboboxSeparator, ComboboxStatus, ComboboxTrigger, ComboboxValue, useComboboxFilter } from "./components/combobox.js";
|
|
18
20
|
import { Dialog, DialogBackdrop, DialogClose, DialogContent as DialogPopup, DialogCreateHandle, DialogDescription, DialogFooter, DialogHeader, DialogPanel, DialogPortal, DialogTitle, DialogTrigger, DialogViewport } from "./components/dialog.js";
|
|
19
21
|
import { Command, CommandCollection, CommandDialog, CommandDialogPopup, CommandDialogTrigger, CommandEmpty, CommandFooter, CommandGroup, CommandGroupLabel, CommandInput, CommandItem, CommandList, CommandPanel, CommandSeparator, CommandShortcut } from "./components/command.js";
|
|
@@ -60,6 +62,7 @@ import { useIsMobile } from "./hooks/use-mobile.js";
|
|
|
60
62
|
import { useViewportWidth } from "./hooks/use-viewport-width.js";
|
|
61
63
|
import { Inspector, InspectorActions, InspectorContent, InspectorDescription, InspectorEmptyRow, InspectorHeader, InspectorHeaderText, InspectorProperty, InspectorPropertyLabel, InspectorPropertyList, InspectorPropertyValue, InspectorRail, InspectorRailCell, InspectorRailIconButton, InspectorRailTab, InspectorSection, InspectorSectionTitle, InspectorTitle } from "./inspector/chrome.js";
|
|
62
64
|
import { InspectorDock } from "./inspector/dock.js";
|
|
65
|
+
import { InspectorTab, InspectorTabList, InspectorTabPanel, InspectorTabs } from "./inspector/tabs.js";
|
|
63
66
|
import { PROPERTY_ROW_GRID, SIDE_RAIL_CONTAINER_CLASS, SIDE_RAIL_ICON_BUTTON_SIZE, SIDE_RAIL_TAB_ICON_SIZE, SIDE_RAIL_WIDTH, TOOLBAR_ROW_HEIGHT, TOOLBAR_ROW_HEIGHT_PX } from "./inspector/layout-tokens.js";
|
|
64
67
|
import { INSPECTOR_CONTENT_MIN_WIDTH, INSPECTOR_PANE_DEFAULT_WIDTH, INSPECTOR_PANE_MAX_WIDTH, INSPECTOR_PANE_MIN_WIDTH, INSPECTOR_RAIL_WIDTH, resolveInspectorDockWidth, resolveInspectorPaneMaxWidth, resolveInspectorPaneWidth, shouldForceSidebarCollapsed } from "./inspector/pane-width.js";
|
|
65
68
|
import { INSPECTOR_PANE_KEYBOARD_PAGE_STEP, INSPECTOR_PANE_KEYBOARD_STEP, parsePersistedPaneWidth, resolveDragWidth, resolveKeyboardWidth, useInspectorPaneWidth } from "./inspector/use-pane-width.js";
|
|
@@ -72,6 +75,9 @@ import { KANBAN_DIRECTIONS, KANBAN_HORIZONTAL_EDGES, KanbanDirection, KanbanHori
|
|
|
72
75
|
import { KANBAN_BOARD_AUTO_SCROLL_SOURCES, RegisterKanbanBoardAutoScrollOptions, RegisterKanbanCardDragOptions, registerKanbanBoardAutoScroll, registerKanbanCardDrag } from "./kanban/drag-interactions.js";
|
|
73
76
|
import { ColorVariants, OptionColor, emptyColor, optionColors, resolveOptionColor } from "./lib/option-color.js";
|
|
74
77
|
import { KanbanBuiltInGroup, KanbanGroup, KanbanGroupOption, KanbanGrouping, KanbanSchema, ResolveKanbanGroupingParams, getKanbanGroupingPropertyId, getKanbanGroups, isKanbanGroupingRenderable, resolveKanbanGroupOptions, resolveKanbanGrouping, selectKanbanRows } from "./kanban/grouping.js";
|
|
78
|
+
import { BuildKanbanBoardMatrixParams, CreateKanbanDropIntentParams, KANBAN_BOARD_AXES, KanbanBoardAxis, KanbanBoardCell, KanbanBoardCoordinate, KanbanBoardLane, KanbanBoardMatrix, KanbanDropAxisChange, KanbanDropIntent, OrderKanbanCellsByColumnsParams, ResolveKanbanGroupValueParams, buildKanbanBoardMatrix, createKanbanDropIntent, orderKanbanCellsByColumns } from "./kanban/matrix.js";
|
|
79
|
+
import { KanbanSubgroupBoard, KanbanSubgroupBoardProps, KanbanSubgroupCellContext, KanbanSubgroupColumnHeaderContext, KanbanSubgroupLaneIdentityContext } from "./kanban/subgroup-board.js";
|
|
80
|
+
import { KANBAN_VIRTUAL_CELL_PAGINATION, KanbanVirtualCell, KanbanVirtualCellPagination, KanbanVirtualCellProps } from "./kanban/virtual-cell.js";
|
|
75
81
|
import "./kanban/index.js";
|
|
76
82
|
import { getInitials } from "./lib/initials.js";
|
|
77
83
|
import { cn, composeRefs } from "./lib/utils.js";
|
|
@@ -83,4 +89,4 @@ import { ReviewDiffDeletion, ReviewDiffInsertion, ReviewDiffSegment, ReviewDiffS
|
|
|
83
89
|
import { ReviewOutOfDateNotice, ReviewOutOfDateReason, ReviewOutOfDateTone } from "./review/review-out-of-date-notice.js";
|
|
84
90
|
import { ReviewStatusBadge, ReviewStatusSize, ReviewStatusTone, ReviewStatusVariant } from "./review/review-status-badge.js";
|
|
85
91
|
import { ReviewSeverityDot, ReviewSeverityLevel, ReviewStatusDot, reviewSeverityTone } from "./review/review-severity-dot.js";
|
|
86
|
-
export { Accordion, AccordionPanel as AccordionContent, AccordionPanel, AccordionItem, AccordionTrigger, AlertDialog, AlertDialogBackdrop, AlertDialogBackdrop as AlertDialogOverlay, AlertDialogClose, AlertDialogPopup as AlertDialogContent, AlertDialogPopup, AlertDialogCreateHandle, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogPanel, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertDialogViewport, AnchoredToastProvider, ApplicationShell, type ApplicationShellProps, Avatar, AvatarFallback, AvatarImage, type BidiDirection, BidiText, type BidiTextProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, CalendarCell, type CalendarDateRange, CalendarEntryButton, CalendarEntrySurface, CalendarGrid, CalendarHeaderCell, CalendarHeaderRow, Checkbox, ColorPicker, ColorPickerContent, type ColorPickerContentProps, type ColorPickerProps, type ColorPreset, ColorVariants, Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxClear, ComboboxCollection, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxList, ComboboxPopup, ComboboxRow, ComboboxSeparator, ComboboxStatus, ComboboxTrigger, ComboboxValue, Command, CommandCollection, CommandDialog, CommandDialogPopup, CommandDialogTrigger, CommandEmpty, CommandFooter, CommandGroup, CommandGroupLabel, CommandInput, CommandItem, CommandList, CommandPanel, CommandSeparator, CommandShortcut, DEFAULT_PRESETS, DataTable, type DataTableAriaSort, type DataTableColumn, type DataTableProps, type DataTableRowAction, DatePickerPopover, type DatePickerPopoverProps, DestructiveActionConfirmation, DestructiveConfirmDialog, type DestructiveConfirmDialogProps, Dialog, DialogBackdrop, DialogBackdrop as DialogOverlay, DialogClose, DialogPopup as DialogContent, DialogPopup, DialogCreateHandle, DialogDescription, DialogFooter, DialogHeader, DialogPanel, DialogPortal, DialogTitle, DialogTrigger, DialogViewport, DirectionalIcon, DiscordLogoIcon, Menu as DropdownMenu, Menu, MenuCheckboxItem as DropdownMenuCheckboxItem, MenuCheckboxItem, MenuPopup as DropdownMenuContent, MenuPopup, MenuCreateHandle as DropdownMenuCreateHandle, MenuCreateHandle, MenuGroup as DropdownMenuGroup, MenuGroup, MenuItem as DropdownMenuItem, MenuItem, MenuGroupLabel as DropdownMenuLabel, MenuGroupLabel, MenuPortal as DropdownMenuPortal, MenuPortal, MenuRadioGroup as DropdownMenuRadioGroup, MenuRadioGroup, MenuRadioItem as DropdownMenuRadioItem, MenuRadioItem, MenuSeparator as DropdownMenuSeparator, MenuSeparator, MenuShortcut as DropdownMenuShortcut, MenuShortcut, MenuSub as DropdownMenuSub, MenuSub, MenuSubPopup as DropdownMenuSubContent, MenuSubPopup, MenuSubTrigger as DropdownMenuSubTrigger, MenuSubTrigger, MenuTrigger as DropdownMenuTrigger, MenuTrigger, Field, FieldControl, FieldDescription, FieldError, FieldItem, FieldLabel, FieldValidity, Form, Frame, FrameDescription, FrameFooter, FrameHeader, FramePanel, FrameTitle, GitHubLogoIcon, HexColorPicker, type HexColorPickerProps, PreviewCard as HoverCard, PreviewCard, PreviewCardPopup as HoverCardContent, PreviewCardPopup, PreviewCardTrigger as HoverCardTrigger, PreviewCardTrigger, INSPECTOR_CONTENT_MIN_WIDTH, INSPECTOR_PANE_DEFAULT_WIDTH, INSPECTOR_PANE_KEYBOARD_PAGE_STEP, INSPECTOR_PANE_KEYBOARD_STEP, INSPECTOR_PANE_MAX_WIDTH, INSPECTOR_PANE_MIN_WIDTH, INSPECTOR_RAIL_WIDTH, Input, InputGroup, InputGroupAddon, InputGroupInput, InputGroupText, InputGroupTextarea, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, type InputProps, Inspector, InspectorActions, InspectorContent, InspectorDescription, InspectorDock, InspectorEmptyRow, InspectorHeader, InspectorHeaderText, InspectorProperty, InspectorPropertyLabel, InspectorPropertyList, InspectorPropertyValue, InspectorRail, InspectorRailCell, InspectorRailIconButton, InspectorRailTab, InspectorSection, InspectorSectionTitle, InspectorTitle, KANBAN_BOARD_AUTO_SCROLL_SOURCES, KANBAN_DIRECTIONS, KANBAN_HORIZONTAL_EDGES, KANBAN_MOUSE_ACTIVATION_DISTANCE, KANBAN_TOUCH_ACTIVATION_CONSTRAINT, type KanbanBuiltInGroup, type KanbanCardFieldSelection, KanbanCardShell, type KanbanCardShellProps, KanbanColumnHeader, type KanbanColumnHeaderProps, type KanbanDirection, KanbanDragHandle, type KanbanDragHandleProps, type KanbanGroup, type KanbanGroupOption, type KanbanGrouping, type KanbanHorizontalEdge, type KanbanSchema, type KanbanSortableBindings, KanbanSortableBoard, type KanbanSortableBoardProps, KanbanSortableColumns, type KanbanSortableColumnsProps, KanbanSortableList, type KanbanSortableListProps, Label, MenuPreviewLayout, OVERLAY_LAYER_CLASS_NAMES, OptionColor, OutlineItem, OutlineRail, OutlineRailProps, OverlayLayer, PROPERTY_ROW_GRID, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverClose, PopoverPopup as PopoverContent, PopoverPopup, PopoverCreateHandle, PopoverDescription, PopoverPanel, PopoverTitle, PopoverTrigger, PreviewCardPrimitive, PreviewPane, type RegisterKanbanBoardAutoScrollOptions, type RegisterKanbanCardDragOptions, type ResolveKanbanGroupingParams, ResourceCalendar, type ResourceCalendarColumn, type ResourceCalendarEntry, type ResourceCalendarEntryTone, type ResourceCalendarLaneLayout, type ResourceCalendarLanePlacement, type ResourceCalendarPlacement, type ResourceCalendarResource, ReviewAuthorAvatar, ReviewCommentAuthor, ReviewCommentCard, ReviewDecisionActions, ReviewDecisionSize, ReviewDecisionState, ReviewDiffDeletion, ReviewDiffInsertion, ReviewDiffSegment, ReviewDiffSegmentType, ReviewDiffText, ReviewOutOfDateNotice, ReviewOutOfDateReason, ReviewOutOfDateTone, ReviewSeverityDot, ReviewSeverityLevel, ReviewStatusBadge, ReviewStatusDot, ReviewStatusSize, ReviewStatusTone, ReviewStatusVariant, SIDE_RAIL_CONTAINER_CLASS, SIDE_RAIL_ICON_BUTTON_SIZE, SIDE_RAIL_TAB_ICON_SIZE, SIDE_RAIL_WIDTH, ScrollArea, ScrollBar, ScrollToTop, ScrollToTopProps, SecretInput, type SecretInputProps, SegmentedIconToggle, Select, SelectPopup as SelectContent, SelectPopup, SelectGroup, SelectGroupLabel, SelectItem, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetBackdrop, SheetBackdrop as SheetOverlay, SheetClose, SheetPopup as SheetContent, SheetPopup, SheetDescription, SheetFooter, SheetHeader, SheetPanel, SheetPortal, type SheetSide, SheetTitle, SheetTrigger, Skeleton, type SortDirection, SortableHead, StellaMark, StellaWordmarkLatin, TOAST_RIGHT_OFFSET_VAR, TOOLBAR_ROW_HEIGHT, TOOLBAR_ROW_HEIGHT_PX, TRACKED_DELETION_STYLE, TRACKED_INSERTION_STYLE, Table, TableBody, TableCaption, TableCell, type TableColumnCapabilities, type TableColumnDescriptor, TableFooter, TableHead, TableHeader, TableRow, type TableSchema, Tabs, TabsPanel as TabsContent, TabsPanel, TabsList, TabsTab, TabsTab as TabsTrigger, TextSeparator, Textarea, type TextareaProps, type ToastPosition, ToastProvider, Tooltip, TooltipPopup as TooltipContent, TooltipPopup, TooltipCreateHandle, TooltipProvider, TooltipTrigger, UNKNOWN_AUTHOR_LABEL, type UseKanbanSortableOptions, UserText, assertConsecutiveCalendarDates, buttonAccessibleDisabledClass, buttonVariants, cn, composeRefs, containedEventHandler, containedHandler, contentDir, duplicateColumnIds, emptyColor, findTableColumn, getFirstWeekday, getInitials, getKanbanGroupingPropertyId, getKanbanGroups, getKanbanHorizontalEdge, getLocaleWeekInfo, getResourceCalendarPlacement, getWeekendDays, hideableColumnIds, isKanbanGroupingRenderable, isStructuredInputType, layoutResourceCalendarEntries, nextCalendarDate, optionColors, parsePersistedPaneWidth, registerKanbanBoardAutoScroll, registerKanbanCardDrag, resolveDragWidth, resolveInspectorDockWidth, resolveInspectorPaneMaxWidth, resolveInspectorPaneWidth, resolveKanbanGroupOptions, resolveKanbanGrouping, resolveKeyboardWidth, resolveOptionColor, reviewDiffSegmentKeys, reviewSeverityTone, selectKanbanCardFieldIds, selectKanbanRows, shouldForceSidebarCollapsed, sortableColumnIds, stellaToast, tableColumnIds, tableColumnSizing, useComboboxFilter, useContentDir, useDestructiveActionConfirmation, useInspectorPaneWidth, useIsMobile, useKanbanSortable, useKanbanSortableSensors, useLatest, useViewportWidth, visibleColumnIds };
|
|
92
|
+
export { APPLICATION_RAIL_BUTTON_SIZE, APPLICATION_RAIL_ICON_SIZE, APPLICATION_RAIL_WIDTH, Accordion, AccordionPanel as AccordionContent, AccordionPanel, AccordionItem, AccordionTrigger, AlertDialog, AlertDialogBackdrop, AlertDialogBackdrop as AlertDialogOverlay, AlertDialogClose, AlertDialogPopup as AlertDialogContent, AlertDialogPopup, AlertDialogCreateHandle, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogPanel, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertDialogViewport, AnchoredToastProvider, ApplicationRail, ApplicationRailButton, ApplicationRailContent, ApplicationRailFooter, ApplicationRailHeader, ApplicationRailMenu, ApplicationRailSeparator, ApplicationShell, type ApplicationShellProps, Avatar, AvatarFallback, AvatarImage, type BidiDirection, BidiText, type BidiTextProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, type BuildKanbanBoardMatrixParams, Button, CONTROL_SIZE, CONTROL_SIZES, CalendarCell, type CalendarDateRange, CalendarEntryButton, CalendarEntrySurface, CalendarGrid, CalendarHeaderCell, CalendarHeaderRow, Checkbox, ColorPicker, ColorPickerContent, type ColorPickerContentProps, type ColorPickerProps, type ColorPreset, ColorVariants, Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxClear, ComboboxCollection, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxList, ComboboxPopup, ComboboxRow, ComboboxSeparator, ComboboxStatus, ComboboxTrigger, ComboboxValue, Command, CommandCollection, CommandDialog, CommandDialogPopup, CommandDialogTrigger, CommandEmpty, CommandFooter, CommandGroup, CommandGroupLabel, CommandInput, CommandItem, CommandList, CommandPanel, CommandSeparator, CommandShortcut, type ControlSize, type CreateKanbanDropIntentParams, DEFAULT_PRESETS, DataTable, type DataTableAriaSort, type DataTableColumn, type DataTableProps, type DataTableRowAction, DatePickerPopover, type DatePickerPopoverProps, DestructiveActionConfirmation, DestructiveConfirmDialog, type DestructiveConfirmDialogProps, Dialog, DialogBackdrop, DialogBackdrop as DialogOverlay, DialogClose, DialogPopup as DialogContent, DialogPopup, DialogCreateHandle, DialogDescription, DialogFooter, DialogHeader, DialogPanel, DialogPortal, DialogTitle, DialogTrigger, DialogViewport, DirectionalIcon, DiscordLogoIcon, Menu as DropdownMenu, Menu, MenuCheckboxItem as DropdownMenuCheckboxItem, MenuCheckboxItem, MenuPopup as DropdownMenuContent, MenuPopup, MenuCreateHandle as DropdownMenuCreateHandle, MenuCreateHandle, MenuGroup as DropdownMenuGroup, MenuGroup, MenuItem as DropdownMenuItem, MenuItem, MenuGroupLabel as DropdownMenuLabel, MenuGroupLabel, MenuPortal as DropdownMenuPortal, MenuPortal, MenuRadioGroup as DropdownMenuRadioGroup, MenuRadioGroup, MenuRadioItem as DropdownMenuRadioItem, MenuRadioItem, MenuSeparator as DropdownMenuSeparator, MenuSeparator, MenuShortcut as DropdownMenuShortcut, MenuShortcut, MenuSub as DropdownMenuSub, MenuSub, MenuSubPopup as DropdownMenuSubContent, MenuSubPopup, MenuSubTrigger as DropdownMenuSubTrigger, MenuSubTrigger, MenuTrigger as DropdownMenuTrigger, MenuTrigger, Field, FieldControl, FieldDescription, FieldError, FieldItem, FieldLabel, FieldValidity, Form, Frame, FrameDescription, FrameFooter, FrameHeader, FramePanel, FrameTitle, GitHubLogoIcon, HexColorPicker, type HexColorPickerProps, PreviewCard as HoverCard, PreviewCard, PreviewCardPopup as HoverCardContent, PreviewCardPopup, PreviewCardTrigger as HoverCardTrigger, PreviewCardTrigger, INSPECTOR_CONTENT_MIN_WIDTH, INSPECTOR_PANE_DEFAULT_WIDTH, INSPECTOR_PANE_KEYBOARD_PAGE_STEP, INSPECTOR_PANE_KEYBOARD_STEP, INSPECTOR_PANE_MAX_WIDTH, INSPECTOR_PANE_MIN_WIDTH, INSPECTOR_RAIL_WIDTH, Input, InputGroup, InputGroupAddon, InputGroupInput, InputGroupText, InputGroupTextarea, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, type InputProps, Inspector, InspectorActions, InspectorContent, InspectorDescription, InspectorDock, InspectorEmptyRow, InspectorHeader, InspectorHeaderText, InspectorProperty, InspectorPropertyLabel, InspectorPropertyList, InspectorPropertyValue, InspectorRail, InspectorRailCell, InspectorRailIconButton, InspectorRailTab, InspectorSection, InspectorSectionTitle, InspectorTab, InspectorTabList, InspectorTabPanel, InspectorTabs, InspectorTitle, KANBAN_BOARD_AUTO_SCROLL_SOURCES, KANBAN_BOARD_AXES, KANBAN_DIRECTIONS, KANBAN_HORIZONTAL_EDGES, KANBAN_MOUSE_ACTIVATION_DISTANCE, KANBAN_TOUCH_ACTIVATION_CONSTRAINT, KANBAN_VIRTUAL_CELL_PAGINATION, type KanbanBoardAxis, type KanbanBoardCell, type KanbanBoardCoordinate, type KanbanBoardLane, type KanbanBoardMatrix, type KanbanBuiltInGroup, type KanbanCardFieldSelection, KanbanCardShell, type KanbanCardShellProps, KanbanColumnHeader, type KanbanColumnHeaderProps, type KanbanDirection, KanbanDragHandle, type KanbanDragHandleProps, type KanbanDropAxisChange, type KanbanDropIntent, type KanbanGroup, type KanbanGroupOption, type KanbanGrouping, type KanbanHorizontalEdge, type KanbanSchema, type KanbanSortableBindings, KanbanSortableBoard, type KanbanSortableBoardProps, KanbanSortableColumns, type KanbanSortableColumnsProps, KanbanSortableList, type KanbanSortableListProps, KanbanSubgroupBoard, type KanbanSubgroupBoardProps, type KanbanSubgroupCellContext, type KanbanSubgroupColumnHeaderContext, type KanbanSubgroupLaneIdentityContext, KanbanVirtualCell, type KanbanVirtualCellPagination, type KanbanVirtualCellProps, Label, MenuPreviewLayout, OVERLAY_LAYER_CLASS_NAMES, OptionColor, type OrderKanbanCellsByColumnsParams, OutlineItem, OutlineRail, OutlineRailProps, OverlayLayer, PROPERTY_ROW_GRID, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverClose, PopoverPopup as PopoverContent, PopoverPopup, PopoverCreateHandle, PopoverDescription, PopoverPanel, PopoverTitle, PopoverTrigger, PreviewCardPrimitive, PreviewPane, type RegisterKanbanBoardAutoScrollOptions, type RegisterKanbanCardDragOptions, type ResolveKanbanGroupValueParams, type ResolveKanbanGroupingParams, ResourceCalendar, type ResourceCalendarColumn, type ResourceCalendarEntry, type ResourceCalendarEntryTone, type ResourceCalendarLaneLayout, type ResourceCalendarLanePlacement, type ResourceCalendarPlacement, type ResourceCalendarResource, ReviewAuthorAvatar, ReviewCommentAuthor, ReviewCommentCard, ReviewDecisionActions, ReviewDecisionSize, ReviewDecisionState, ReviewDiffDeletion, ReviewDiffInsertion, ReviewDiffSegment, ReviewDiffSegmentType, ReviewDiffText, ReviewOutOfDateNotice, ReviewOutOfDateReason, ReviewOutOfDateTone, ReviewSeverityDot, ReviewSeverityLevel, ReviewStatusBadge, ReviewStatusDot, ReviewStatusSize, ReviewStatusTone, ReviewStatusVariant, SIDE_RAIL_CONTAINER_CLASS, SIDE_RAIL_ICON_BUTTON_SIZE, SIDE_RAIL_TAB_ICON_SIZE, SIDE_RAIL_WIDTH, ScrollArea, ScrollBar, ScrollToTop, ScrollToTopProps, SecretInput, type SecretInputProps, SegmentedIconToggle, Select, SelectPopup as SelectContent, SelectPopup, SelectGroup, SelectGroupLabel, SelectItem, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetBackdrop, SheetBackdrop as SheetOverlay, SheetClose, SheetPopup as SheetContent, SheetPopup, SheetDescription, SheetFooter, SheetHeader, SheetPanel, SheetPortal, type SheetSide, SheetTitle, SheetTrigger, Skeleton, type SortDirection, SortableHead, StellaMark, StellaWordmarkLatin, TOAST_RIGHT_OFFSET_VAR, TOOLBAR_ROW_HEIGHT, TOOLBAR_ROW_HEIGHT_PX, TRACKED_DELETION_STYLE, TRACKED_INSERTION_STYLE, Table, TableBody, TableCaption, TableCell, type TableColumnCapabilities, type TableColumnDescriptor, TableFooter, TableHead, TableHeader, TableRow, type TableSchema, Tabs, TabsPanel as TabsContent, TabsPanel, TabsList, TabsTab, TabsTab as TabsTrigger, TextSeparator, Textarea, type TextareaProps, type ToastPosition, ToastProvider, Tooltip, TooltipPopup as TooltipContent, TooltipPopup, TooltipCreateHandle, TooltipProvider, TooltipTrigger, UNKNOWN_AUTHOR_LABEL, type UseKanbanSortableOptions, UserText, assertConsecutiveCalendarDates, buildKanbanBoardMatrix, buttonAccessibleDisabledClass, buttonVariants, cn, composeRefs, containedEventHandler, containedHandler, contentDir, createKanbanDropIntent, duplicateColumnIds, emptyColor, findTableColumn, getFirstWeekday, getInitials, getKanbanGroupingPropertyId, getKanbanGroups, getKanbanHorizontalEdge, getLocaleWeekInfo, getResourceCalendarPlacement, getWeekendDays, hideableColumnIds, isKanbanGroupingRenderable, isStructuredInputType, layoutResourceCalendarEntries, nextCalendarDate, optionColors, orderKanbanCellsByColumns, parsePersistedPaneWidth, registerKanbanBoardAutoScroll, registerKanbanCardDrag, resolveDragWidth, resolveInspectorDockWidth, resolveInspectorPaneMaxWidth, resolveInspectorPaneWidth, resolveKanbanGroupOptions, resolveKanbanGrouping, resolveKeyboardWidth, resolveOptionColor, reviewDiffSegmentKeys, reviewSeverityTone, selectKanbanCardFieldIds, selectKanbanRows, shouldForceSidebarCollapsed, sortableColumnIds, stellaToast, tableColumnIds, tableColumnSizing, useComboboxFilter, useContentDir, useDestructiveActionConfirmation, useInspectorPaneWidth, useIsMobile, useKanbanSortable, useKanbanSortableSensors, useLatest, useViewportWidth, visibleColumnIds };
|