@stll/ui 0.5.1 → 0.5.2

package/dist/components/input-group.d.ts

@@ -5,7 +5,7 @@ import * as React$1 from "react";
 //#region src/components/input-group.d.ts
 declare const InputGroup: ({ className, ...props }: React$1.ComponentProps<"div">) => React$1.JSX.Element;
 declare const inputGroupAddonVariants: (props?: ({
-  align?: "inline-end" | "inline-start" | "block-end" | "block-start" | null | undefined;
+  align?: "inline-start" | "block-end" | "block-start" | "inline-end" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare const InputGroupAddon: ({ className, align, ...props }: React$1.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>) => React$1.JSX.Element;
 declare const InputGroupText: ({ className, ...props }: React$1.ComponentProps<"span">) => React$1.JSX.Element;

package/dist/inspector/chrome.d.ts

@@ -30,11 +30,7 @@ declare const InspectorRail: ({ className, ...props }: React$1.ComponentProps<"n
 /** A rail cell: same height as every header strip and property row. */
 declare const InspectorRailCell: ({ className, ...props }: React$1.ComponentProps<"div">) => React$1.JSX.Element;
 declare const InspectorRailIconButton: ({ className, ...props }: React$1.ComponentProps<"button">) => React$1.JSX.Element;
-/**
- * A rail tab. The active tab carries a 2px spine on the rail's inline-start
- * edge — the same affordance the workspace rail uses to say "this pane is
- * showing that tab".
- */
+/** A square rail chip. Active state uses the same filled box in every dock. */
 declare const InspectorRailTab: ({ active, className, ...props }: React$1.ComponentProps<"button"> & {
   active?: boolean;
 }) => React$1.JSX.Element;

package/dist/inspector/chrome.js

@@ -1,5 +1,5 @@
 import { cn } from "../lib/utils.js";
-import { PROPERTY_ROW_GRID, SIDE_RAIL_CONTAINER_CLASS, SIDE_RAIL_ICON_BUTTON_SIZE, TOOLBAR_ROW_HEIGHT } from "./layout-tokens.js";
+import { PROPERTY_ROW_GRID, SIDE_RAIL_CONTAINER_CLASS, SIDE_RAIL_ICON_BUTTON_SIZE, SIDE_RAIL_TAB_HIT_TARGET_SIZE, TOOLBAR_ROW_HEIGHT } from "./layout-tokens.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/inspector/chrome.tsx
 /**
@@ -49,14 +49,10 @@ const InspectorRailIconButton = ({ className, ...props }) => /* @__PURE__ */ jsx
 	type: "button",
 	...props
 });
-/**
-* A rail tab. The active tab carries a 2px spine on the rail's inline-start
-* edge — the same affordance the workspace rail uses to say "this pane is
-* showing that tab".
-*/
+/** A square rail chip. Active state uses the same filled box in every dock. */
 const InspectorRailTab = ({ active = false, className, ...props }) => /* @__PURE__ */ jsx("button", {
 	"aria-current": active ? "true" : void 0,
-	className: cn("group/tab relative flex min-h-8 w-full items-center justify-center border-b transition-colors", TOOLBAR_ROW_HEIGHT, active ? "bg-background text-foreground before:bg-primary before:absolute before:inset-y-0 before:inset-s-0 before:w-0.5" : "text-muted-foreground hover:bg-accent hover:text-foreground", className),
+	className: cn("group/tab relative flex items-center justify-center rounded-md transition-colors before:pointer-events-none before:absolute before:inset-2 before:rounded-md before:transition-colors before:content-[''] [&>*]:relative [&>*]:z-10", SIDE_RAIL_TAB_HIT_TARGET_SIZE, active ? "text-foreground before:bg-accent" : "text-muted-foreground hover:text-foreground hover:before:bg-accent", className),
 	"data-active": active ? "" : void 0,
 	"data-slot": "inspector-rail-tab",
 	type: "button",

package/dist/inspector/layout-tokens.d.ts

@@ -21,8 +21,9 @@ declare const SIDE_RAIL_WIDTH: "w-12";
  */
 declare const SIDE_RAIL_CONTAINER_CLASS: "bg-sidebar flex shrink-0 flex-col border-s border-e w-12";
 declare const SIDE_RAIL_ICON_BUTTON_SIZE: "size-8";
+declare const SIDE_RAIL_TAB_HIT_TARGET_SIZE: "size-12";
 declare const SIDE_RAIL_TAB_ICON_SIZE: "size-3.5";
 /** Two-column grid the key/value rows share. */
 declare const PROPERTY_ROW_GRID: "grid-cols-[8rem_minmax(0,1fr)]";
 //#endregion
-export { 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 };
+export { PROPERTY_ROW_GRID, SIDE_RAIL_CONTAINER_CLASS, SIDE_RAIL_ICON_BUTTON_SIZE, SIDE_RAIL_TAB_HIT_TARGET_SIZE, SIDE_RAIL_TAB_ICON_SIZE, SIDE_RAIL_WIDTH, TOOLBAR_ROW_HEIGHT, TOOLBAR_ROW_HEIGHT_PX };

package/dist/inspector/layout-tokens.js

@@ -21,8 +21,9 @@ const SIDE_RAIL_WIDTH = "w-12";
 */
 const SIDE_RAIL_CONTAINER_CLASS = `bg-sidebar flex shrink-0 flex-col border-s border-e ${SIDE_RAIL_WIDTH}`;
 const SIDE_RAIL_ICON_BUTTON_SIZE = "size-8";
+const SIDE_RAIL_TAB_HIT_TARGET_SIZE = "size-12";
 const SIDE_RAIL_TAB_ICON_SIZE = "size-3.5";
 /** Two-column grid the key/value rows share. */
 const PROPERTY_ROW_GRID = "grid-cols-[8rem_minmax(0,1fr)]";
 //#endregion
-export { 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 };
+export { PROPERTY_ROW_GRID, SIDE_RAIL_CONTAINER_CLASS, SIDE_RAIL_ICON_BUTTON_SIZE, SIDE_RAIL_TAB_HIT_TARGET_SIZE, SIDE_RAIL_TAB_ICON_SIZE, SIDE_RAIL_WIDTH, TOOLBAR_ROW_HEIGHT, TOOLBAR_ROW_HEIGHT_PX };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stll/ui",
-  "version": "0.5.1",
+  "version": "0.5.2",
   "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.",
   "keywords": [
     "base-ui",
@@ -500,7 +500,7 @@
   "dependencies": {
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "input-otp": "^1.4.2",
+    "input-otp": "^1.5.0",
     "lucide-react": "1.30.0",
     "tailwind-merge": "^3.6.0"
   },