@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 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`, and `@dnd-kit/sortable`.
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 input and accessibility primitives only; the caller
62
- keeps item identifiers, order changes, and persisted mutations. Wrap the board
63
- in `KanbanSortableBoard`, render sortable items through `useKanbanSortable`,
64
- and attach the returned bindings to `KanbanDragHandle`.
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" | "lg" | "icon-lg" | "icon-sm" | "icon-xl" | "icon-xs" | "xl" | null | undefined;
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?: "sm" | "default" | "lg" | number;
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?: "sm" | "default" | "lg" | number;
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 ?? "default";
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", sizeValue === "sm" ? "ps-1.5" : "ps-2", className),
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 ?? "default";
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 ps-[calc(--spacing(3)-1px)] opacity-80 has-[+[data-size=sm]]:ps-[calc(--spacing(2.5)-1px)] [&_svg]:-mx-0.5 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4",
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) && "*:data-[slot=combobox-input]:ps-[calc(--spacing(8.5)-1px)] data-[size=sm]:*:data-[slot=combobox-input]:ps-[calc(--spacing(7.5)-1px)] sm:*:data-[slot=combobox-input]:ps-[calc(--spacing(8)-1px)] sm:data-[size=sm]:*:data-[slot=combobox-input]:ps-[calc(--spacing(7)-1px)]", sizeValue === "sm" ? "has-[+[data-slot=combobox-trigger],+[data-slot=combobox-clear]]:*:data-[slot=combobox-input]:pe-6.5" : "has-[+[data-slot=combobox-trigger],+[data-slot=combobox-clear]]:*:data-[slot=combobox-input]:pe-7", className),
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", sizeValue === "sm" ? "end-0" : "end-0.5"),
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", sizeValue === "sm" ? "end-0" : "end-0.5"),
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?: "sm" | "default" | "lg" | number;
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 = "lg", wrapperClassName, dir, onChange, ...props }) => {
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 === "sm" && "h-7 text-sm", size === "default" && "h-8", size === "lg" && "h-9", className),
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?: "sm" | "default" | "lg" | number;
6
+ size?: ControlSize | number;
6
7
  style?: React$1.CSSProperties;
7
8
  unstyled?: boolean;
8
9
  nativeInput?: boolean;
@@ -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 = "default", unstyled = false, nativeInput = false, dir, onChange, ...props }) => {
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", size === "sm" && "h-7.5 px-[calc(--spacing(2.5)-1px)] leading-7.5 sm:h-6.5 sm:leading-6.5", size === "lg" && "h-9.5 leading-9.5 sm:h-8.5 sm:leading-8.5", 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");
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?: "sm" | "default" | "lg";
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 = "default", children, ...props }) => /* @__PURE__ */ jsxs(Select$1.Trigger, {
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 === "sm" && "min-h-8 gap-1.5 px-[calc(--spacing(2.5)-1px)] sm:min-h-7", size === "lg" && "min-h-10 sm:min-h-9", className),
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?: "sm" | "default" | "lg" | number;
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 = "default", unstyled = false, dir, onChange, ...props }) => {
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", size === "sm" && "min-h-16.5 px-[calc(--spacing(2.5)-1px)] py-[calc(--spacing(1)-1px)] max-sm:min-h-19.5", size === "lg" && "min-h-18.5 py-[calc(--spacing(2)-1px)] max-sm:min-h-21.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 };