@stll/ui 0.25.0 → 0.25.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -5,7 +5,7 @@ import { VariantProps } from "class-variance-authority";
5
5
  //#region src/components/input-group.d.ts
6
6
  declare const InputGroup: ({ className, ...props }: React$1.ComponentProps<"div">) => React$1.JSX.Element;
7
7
  declare const inputGroupAddonVariants: (props?: ({
8
- align?: "inline-end" | "inline-start" | "block-start" | "block-end" | null | undefined;
8
+ align?: "inline-end" | "inline-start" | "block-end" | "block-start" | null | undefined;
9
9
  } & import("class-variance-authority/types").ClassProp) | undefined) => string;
10
10
  declare const InputGroupAddon: ({ className, align, ...props }: React$1.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>) => React$1.JSX.Element;
11
11
  declare const InputGroupText: ({ className, ...props }: React$1.ComponentProps<"span">) => React$1.JSX.Element;
@@ -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 { CONTENT_SIZED_POSITIONER_CLASS_NAME, IN_FLOW_POPUP_CLASS_NAME } from "../lib/positioner-sizing.js";
4
5
  import { renderTooltipTrigger } from "./tooltip-trigger-helper.js";
5
6
  import { jsx } from "react/jsx-runtime";
6
7
  import { Popover as Popover$1 } from "@base-ui/react/popover";
@@ -20,13 +21,13 @@ const PopoverPopup = ({ children, className, side = "bottom", align = "center",
20
21
  align,
21
22
  alignOffset,
22
23
  anchor,
23
- className: cn("h-(--positioner-height) w-max max-w-(--available-width)", OVERLAY_LAYER_CLASS_NAMES[layer]),
24
+ className: cn(CONTENT_SIZED_POSITIONER_CLASS_NAME, OVERLAY_LAYER_CLASS_NAMES[layer]),
24
25
  collisionPadding: 8,
25
26
  "data-slot": "popover-positioner",
26
27
  side,
27
28
  sideOffset,
28
29
  children: /* @__PURE__ */ jsx(Popover$1.Popup, {
29
- className: cn("bg-popover text-popover-foreground relative flex h-(--popup-height,auto) w-(--popup-width,auto) origin-(--transform-origin) rounded-lg border shadow-lg/5 transition-[width,height,scale,opacity] not-dark:bg-clip-padding before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] data-starting-style:scale-98 data-starting-style:opacity-0 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]", tooltipStyle && "w-fit rounded-md text-xs text-balance shadow-md/5 before:rounded-[calc(var(--radius-md)-1px)]", className),
30
+ className: cn(IN_FLOW_POPUP_CLASS_NAME, "bg-popover text-popover-foreground flex h-(--popup-height,auto) w-(--popup-width,auto) origin-(--transform-origin) rounded-lg border shadow-lg/5 transition-[width,height,scale,opacity] not-dark:bg-clip-padding before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] data-starting-style:scale-98 data-starting-style:opacity-0 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]", tooltipStyle && "w-fit rounded-md text-xs text-balance shadow-md/5 before:rounded-[calc(var(--radius-md)-1px)]", className),
30
31
  "data-slot": "popover-popup",
31
32
  ...props,
32
33
  children: /* @__PURE__ */ jsx(Popover$1.Viewport, {
@@ -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 { CONTENT_SIZED_POSITIONER_CLASS_NAME, IN_FLOW_POPUP_CLASS_NAME } from "../lib/positioner-sizing.js";
4
5
  import { jsx } from "react/jsx-runtime";
5
6
  import { Tooltip as Tooltip$1 } from "@base-ui/react/tooltip";
6
7
  //#region src/components/tooltip.tsx
@@ -13,13 +14,13 @@ const TooltipTrigger = (props) => /* @__PURE__ */ jsx(Tooltip$1.Trigger, {
13
14
  });
14
15
  const TooltipPopup = ({ className, align = "center", sideOffset = 4, side = "top", layer = "default", children, ...props }) => /* @__PURE__ */ jsx(Tooltip$1.Portal, { children: /* @__PURE__ */ jsx(Tooltip$1.Positioner, {
15
16
  align,
16
- className: cn("h-(--positioner-height) w-max max-w-(--available-width) transition-[top,left,right,bottom,transform] data-instant:transition-none", OVERLAY_LAYER_CLASS_NAMES[layer]),
17
+ className: cn(CONTENT_SIZED_POSITIONER_CLASS_NAME, "transition-[top,left,right,bottom,transform] data-instant:transition-none", OVERLAY_LAYER_CLASS_NAMES[layer]),
17
18
  collisionPadding: 8,
18
19
  "data-slot": "tooltip-positioner",
19
20
  side,
20
21
  sideOffset,
21
22
  children: /* @__PURE__ */ jsx(Tooltip$1.Popup, {
22
- className: cn("bg-popover text-popover-foreground relative flex h-(--popup-height,auto) w-(--popup-width,auto) origin-(--transform-origin) rounded-md border text-xs text-balance shadow-md/5 transition-[width,height,scale,opacity] not-dark:bg-clip-padding before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-md)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] data-ending-style:scale-98 data-ending-style:opacity-0 data-instant:duration-0 data-starting-style:scale-98 data-starting-style:opacity-0 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]", className),
23
+ className: cn(IN_FLOW_POPUP_CLASS_NAME, "bg-popover text-popover-foreground flex h-(--popup-height,auto) w-(--popup-width,auto) origin-(--transform-origin) rounded-md border text-xs text-balance shadow-md/5 transition-[width,height,scale,opacity] not-dark:bg-clip-padding before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-md)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] data-ending-style:scale-98 data-ending-style:opacity-0 data-instant:duration-0 data-starting-style:scale-98 data-starting-style:opacity-0 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]", className),
23
24
  "data-slot": "tooltip-popup",
24
25
  ...props,
25
26
  children: /* @__PURE__ */ jsx(Tooltip$1.Viewport, {
@@ -45,7 +45,7 @@ const InspectorRailCell = ({ className, ...props }) => /* @__PURE__ */ jsx("div"
45
45
  });
46
46
  /** Scroll owner for rail tabs and other middle actions. */
47
47
  const InspectorRailContent = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
48
- className: cn("flex min-h-0 flex-1 flex-col overflow-x-hidden overflow-y-auto overscroll-contain", className),
48
+ className: cn("scrollbar-subtle flex min-h-0 flex-1 flex-col overflow-x-hidden overflow-y-auto overscroll-contain", className),
49
49
  "data-slot": "inspector-rail-content",
50
50
  ...props
51
51
  });
@@ -110,7 +110,7 @@ const InspectorActions = ({ className, ...props }) => /* @__PURE__ */ jsx("div",
110
110
  * being navigable.
111
111
  */
112
112
  const InspectorContent = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
113
- className: cn("flex min-h-0 flex-1 flex-col overflow-x-hidden overflow-y-auto overscroll-contain", className),
113
+ className: cn("scrollbar-subtle flex min-h-0 flex-1 flex-col overflow-x-hidden overflow-y-auto overscroll-contain", className),
114
114
  "data-slot": "inspector-content",
115
115
  ...props
116
116
  });
@@ -8,7 +8,7 @@ import { Tabs } from "@base-ui/react/tabs";
8
8
  */
9
9
  declare const InspectorTabs: ({ className, ...props }: Omit<Tabs.Root.Props, "orientation">) => React$1.JSX.Element;
10
10
  declare const INSPECTOR_RAIL_MEDIA_QUERY: "(min-width: 48rem)";
11
- declare const resolveInspectorTabOrientation: (isRailLayout: boolean) => "horizontal" | "vertical";
11
+ declare const resolveInspectorTabOrientation: (isRailLayout: boolean) => "vertical" | "horizontal";
12
12
  declare const InspectorTabList: ({ className, ...props }: Tabs.List.Props) => React$1.JSX.Element;
13
13
  declare const InspectorTab: ({ className, ...props }: Tabs.Tab.Props) => React$1.JSX.Element;
14
14
  declare const InspectorTabPanel: ({ className, ...props }: Tabs.Panel.Props) => React$1.JSX.Element;
@@ -1,4 +1,15 @@
1
+ import { panic } from "better-result";
1
2
  //#region src/kanban/grouping.ts
3
+ /**
4
+ * Kanban grouping: which columns a board has, and which rows may appear on it.
5
+ *
6
+ * The module never inspects a row. A caller describes its board with a
7
+ * `KanbanSchema`: the properties a board may group by, plus the built-in group
8
+ * resolvers for columns that do not come from a property (a status enum, a kind
9
+ * enum). The column list, the uncategorized bucket, and the row scope all
10
+ * derive from that description, so grouping has no opinion about what is being
11
+ * grouped.
12
+ */
2
13
  /** Resolve a stored group-by id against a schema. */
3
14
  const resolveKanbanGrouping = ({ groupBy, schema }) => {
4
15
  if (groupBy === "") return { type: "none" };
@@ -22,7 +33,7 @@ const getKanbanGroupingPropertyId = (grouping) => {
22
33
  case "none": return null;
23
34
  case "built-in":
24
35
  case "property": return grouping.propertyId;
25
- default: return grouping;
36
+ default: return panic(`Unhandled grouping: ${String(grouping)}`);
26
37
  }
27
38
  };
28
39
  /**
@@ -36,7 +47,7 @@ const isKanbanGroupingRenderable = (grouping) => {
36
47
  case "none": return false;
37
48
  case "built-in": return grouping.group.options.length > 0;
38
49
  case "property": return true;
39
- default: return grouping;
50
+ default: return panic(`Unhandled grouping: ${String(grouping)}`);
40
51
  }
41
52
  };
42
53
  /** The rows a grouping can place on the board, in their incoming order. */
@@ -45,7 +56,7 @@ const selectKanbanRows = (rows, grouping) => {
45
56
  case "none": return [];
46
57
  case "built-in": return grouping.group.selectRows ? grouping.group.selectRows(rows) : [...rows];
47
58
  case "property": return [...rows];
48
- default: return grouping;
59
+ default: return panic(`Unhandled grouping: ${String(grouping)}`);
49
60
  }
50
61
  };
51
62
  /** The static column options for a grouping, excluding uncategorized. */
@@ -54,7 +65,7 @@ const resolveKanbanGroupOptions = (grouping) => {
54
65
  case "none": return [];
55
66
  case "built-in": return grouping.group.options;
56
67
  case "property": return grouping.options;
57
- default: return grouping;
68
+ default: return panic(`Unhandled grouping: ${String(grouping)}`);
58
69
  }
59
70
  };
60
71
  /** Append the uncategorized bucket (null value) after the options. */
@@ -0,0 +1,5 @@
1
+ //#region src/lib/positioner-sizing.d.ts
2
+ declare const CONTENT_SIZED_POSITIONER_CLASS_NAME = "w-max max-w-(--available-width)";
3
+ declare const IN_FLOW_POPUP_CLASS_NAME = "relative!";
4
+ //#endregion
5
+ export { CONTENT_SIZED_POSITIONER_CLASS_NAME, IN_FLOW_POPUP_CLASS_NAME };
@@ -0,0 +1,5 @@
1
+ //#region src/lib/positioner-sizing.ts
2
+ const CONTENT_SIZED_POSITIONER_CLASS_NAME = "w-max max-w-(--available-width)";
3
+ const IN_FLOW_POPUP_CLASS_NAME = "relative!";
4
+ //#endregion
5
+ export { CONTENT_SIZED_POSITIONER_CLASS_NAME, IN_FLOW_POPUP_CLASS_NAME };
@@ -2,6 +2,7 @@ import { cn } from "../lib/utils.js";
2
2
  import { Button } from "../components/button.js";
3
3
  import { CheckIcon, RotateCcwIcon, XIcon } from "lucide-react";
4
4
  import { Fragment, jsx, jsxs } from "react/jsx-runtime";
5
+ import { panic } from "better-result";
5
6
  //#region src/review/review-decision-actions.tsx
6
7
  /** Accept / reject / revert / reopen, in one shape, for every review surface. */
7
8
  const ReviewDecisionActions = ({ state, onAccept, onReject, onRevert, onReopen, size = "sm", acceptLabel, rejectLabel, revertLabel, reopenLabel, acceptTooltip, rejectTooltip, disabled = false, className }) => {
@@ -67,7 +68,7 @@ const renderControls = ({ acceptLabel, acceptTooltip, disabled, onAccept, onReje
67
68
  variant: "ghost",
68
69
  children: /* @__PURE__ */ jsx(RotateCcwIcon, {})
69
70
  })] });
70
- default: return null;
71
+ default: return panic(`Unhandled state: ${String(state)}`);
71
72
  }
72
73
  };
73
74
  //#endregion
@@ -1,5 +1,6 @@
1
1
  import { cn } from "../lib/utils.js";
2
2
  import { jsx } from "react/jsx-runtime";
3
+ import { panic } from "better-result";
3
4
  //#region src/review/review-diff-text.tsx
4
5
  const TRACKED_DELETION_STYLE = {
5
6
  color: "color-mix(in oklch, var(--destructive) 35%, var(--muted-foreground))",
@@ -60,7 +61,7 @@ const ReviewDiffSegmentSpan = ({ segment }) => {
60
61
  case "equal": return /* @__PURE__ */ jsx("span", { children: segment.text });
61
62
  default:
62
63
  segment.type;
63
- return null;
64
+ return panic(`Unhandled type: ${String(segment.type)}`);
64
65
  }
65
66
  };
66
67
  //#endregion
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@stll/ui",
3
- "version": "0.25.0",
3
+ "version": "0.25.2",
4
4
  "description": "Stella's design system: bidi-aware React primitives built on Base UI, the dockable inspector pane, and the Tailwind v4 theme they are styled with.",
5
5
  "keywords": [
6
6
  "base-ui",
@@ -197,6 +197,10 @@
197
197
  "types": "./dist/components/popover.d.ts",
198
198
  "import": "./dist/components/popover.js"
199
199
  },
200
+ "./positioner-sizing": {
201
+ "types": "./dist/lib/positioner-sizing.d.ts",
202
+ "import": "./dist/lib/positioner-sizing.js"
203
+ },
200
204
  "./preview-card": {
201
205
  "types": "./dist/components/preview-card.d.ts",
202
206
  "import": "./dist/components/preview-card.js"
@@ -585,11 +589,11 @@
585
589
  "prepack": "bun run build"
586
590
  },
587
591
  "dependencies": {
588
- "better-result": "3.0.0",
592
+ "better-result": "3.0.1",
589
593
  "class-variance-authority": "^0.7.1",
590
594
  "clsx": "^2.1.1",
591
595
  "input-otp": "^1.5.0",
592
- "lucide-react": "1.30.0",
596
+ "lucide-react": "1.39.0",
593
597
  "tailwind-merge": "^3.6.0"
594
598
  },
595
599
  "devDependencies": {
@@ -604,7 +608,7 @@
604
608
  "@tanstack/react-virtual": "^3.14.10",
605
609
  "@types/react": "^19.2.17",
606
610
  "@types/react-dom": "^19.2.3",
607
- "bun-types": "1.4.1",
611
+ "bun-types": "1.4.2",
608
612
  "react": "^19.2.8",
609
613
  "react-dom": "^19.2.8",
610
614
  "tailwindcss": "4.3.3",