@stll/ui 0.20.0 → 0.21.0

package/dist/components/button-variants.d.ts

@@ -10,8 +10,8 @@
  */
 declare const buttonAccessibleDisabledClass = "cursor-not-allowed opacity-64";
 declare const buttonVariants: (props?: ({
-  size?: "xs" | "sm" | "icon" | "default" | "lg" | "icon-sm" | "chip" | "icon-lg" | "icon-xl" | "icon-xs" | "xl" | null | undefined;
-  variant?: "link" | "destructive" | "outline" | "default" | "destructive-outline" | "ghost" | "secondary" | null | undefined;
+  size?: "default" | "chip" | "icon" | "icon-lg" | "icon-sm" | "icon-xl" | "icon-xs" | "lg" | "sm" | "xl" | "xs" | null | undefined;
+  variant?: "link" | "default" | "destructive" | "destructive-outline" | "ghost" | "outline" | "secondary" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 //#endregion
 export { buttonAccessibleDisabledClass, buttonVariants };

package/dist/components/context-menu.d.ts

@@ -0,0 +1,37 @@
+import { ReactNode } from "react";
+//#region src/components/context-menu.d.ts
+type ContextMenuAction = {
+  label: string;
+  icon?: ReactNode;
+  onClick?: () => void;
+  variant?: "default" | "destructive";
+  disabled?: boolean;
+  /** Set on a toggle-style action: it renders as a checkbox item whose
+   *  state assistive technology can read. `onClick` flips it. */
+  checked?: boolean;
+  submenu?: readonly ContextMenuAction[];
+  /** Draw a divider above this item — e.g. to set a trailing "New …" action
+   *  apart from the list of existing choices above it. */
+  separatorBefore?: boolean;
+  /** Keep the menu open after the click, for a toggle the user may flip
+   *  several of in a row. */
+  closeOnClick?: boolean;
+};
+type ContextMenuProps = {
+  actions: readonly ContextMenuAction[];
+  children: ReactNode;
+};
+/**
+ * Wrap arbitrary content with a right-click context menu. Built on
+ * base-ui's `ContextMenu`, which is purpose-built for right-click /
+ * long-press triggers — it tracks the cursor anchor itself and uses
+ * dismissal semantics tuned for context menus, so the popup doesn't
+ * close on incidental pointer movement the way a hover/click `Menu`
+ * does.
+ *
+ * Renders only the children when `actions` is empty so callers can
+ * pass conditionally.
+ */
+declare const ContextMenu: ({ actions, children }: ContextMenuProps) => ReactNode;
+//#endregion
+export { ContextMenu, ContextMenuAction, ContextMenuProps };

package/dist/components/context-menu.js

@@ -0,0 +1,48 @@
+"use client";
+import { cn } from "../lib/utils.js";
+import { DropdownMenuCheckboxItem as MenuCheckboxItem, DropdownMenuContent as MenuPopup, DropdownMenuItem as MenuItem, DropdownMenuSeparator as MenuSeparator, DropdownMenuSub as MenuSub, DropdownMenuSubContent as MenuSubPopup, DropdownMenuSubTrigger as MenuSubTrigger } from "./menu.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ContextMenu as ContextMenu$1 } from "@base-ui/react/context-menu";
+//#region src/components/context-menu.tsx
+/**
+* Wrap arbitrary content with a right-click context menu. Built on
+* base-ui's `ContextMenu`, which is purpose-built for right-click /
+* long-press triggers — it tracks the cursor anchor itself and uses
+* dismissal semantics tuned for context menus, so the popup doesn't
+* close on incidental pointer movement the way a hover/click `Menu`
+* does.
+*
+* Renders only the children when `actions` is empty so callers can
+* pass conditionally.
+*/
+const ContextMenu = ({ actions, children }) => {
+	if (actions.length === 0) return children;
+	return /* @__PURE__ */ jsxs(ContextMenu$1.Root, { children: [/* @__PURE__ */ jsx(ContextMenu$1.Trigger, {
+		"data-slot": "context-menu-trigger",
+		render: /* @__PURE__ */ jsx("div", { className: "contents" }),
+		children
+	}), /* @__PURE__ */ jsx(MenuPopup, {
+		"data-slot": "context-menu-popup",
+		children: actions.map((action) => /* @__PURE__ */ jsx(ContextMenuActionItem, { action }, action.label))
+	})] });
+};
+const ContextMenuActionItem = ({ action }) => {
+	const separator = action.separatorBefore ? /* @__PURE__ */ jsx(MenuSeparator, {}) : null;
+	if (action.submenu) return /* @__PURE__ */ jsxs(Fragment, { children: [separator, /* @__PURE__ */ jsxs(MenuSub, { children: [/* @__PURE__ */ jsxs(MenuSubTrigger, { children: [action.icon, action.label] }), /* @__PURE__ */ jsx(MenuSubPopup, { children: action.submenu.map((sub) => /* @__PURE__ */ jsx(ContextMenuActionItem, { action: sub }, sub.label)) })] })] });
+	if (action.checked !== void 0) return /* @__PURE__ */ jsxs(Fragment, { children: [separator, /* @__PURE__ */ jsxs(MenuCheckboxItem, {
+		checked: action.checked,
+		closeOnClick: action.closeOnClick ?? true,
+		disabled: action.disabled === true,
+		onCheckedChange: () => action.onClick?.(),
+		children: [action.icon, action.label]
+	})] });
+	return /* @__PURE__ */ jsxs(Fragment, { children: [separator, /* @__PURE__ */ jsxs(MenuItem, {
+		className: cn(action.variant === "destructive" && "text-destructive"),
+		closeOnClick: action.closeOnClick ?? true,
+		disabled: action.disabled === true,
+		onClick: action.onClick,
+		children: [action.icon, action.label]
+	})] });
+};
+//#endregion
+export { ContextMenu };

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

@@ -5,7 +5,7 @@ import { VariantProps } from "class-variance-authority";
 //#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/components/sidebar.d.ts

@@ -30,7 +30,7 @@ declare function useSidebar(): SidebarContextProps;
  * left for the content column. Mobile reports 0: there the sidebar is an
  * overlay sheet and occupies no layout width.
  */
-declare function useSidebarInlineSize(): 0 | 256 | 48;
+declare function useSidebarInlineSize(): 0 | 48 | 256;
 declare const SidebarProvider: ({ defaultOpen, forceCollapsed, open: openProp, onOpenChange: setOpenProp, className, style, children, ...props }: React.ComponentProps<"div"> & {
   defaultOpen?: boolean;
   forceCollapsed?: boolean;
@@ -82,8 +82,8 @@ declare const SidebarGroupContent: ({ className, ...props }: React.ComponentProp
 declare const SidebarMenu: ({ className, ...props }: React.ComponentProps<"ul">) => import("react").JSX.Element;
 declare const SidebarMenuItem: ({ className, ...props }: React.ComponentProps<"li">) => import("react").JSX.Element;
 declare const sidebarMenuButtonVariants: (props?: ({
-  variant?: "outline" | "default" | null | undefined;
-  size?: "sm" | "default" | "lg" | "rail" | null | undefined;
+  variant?: "default" | "outline" | null | undefined;
+  size?: "default" | "lg" | "sm" | "rail" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare const SidebarMenuButton: ({ asChild, isActive, variant, size, tooltip, className, ...props }: React.ComponentProps<"button"> & {
   asChild?: boolean;

package/dist/components/sidebar.js

@@ -269,7 +269,7 @@ const sidebarMenuButtonVariants = cva("peer/menu-button ring-sidebar-ring hover:
 			lg: "h-12 text-sm",
 			/** A 44px target in both states, for a sidebar that stands in for
 			* the application rail on touch and hybrid devices. */
-			rail: "h-11 text-sm group-data-[collapsible=icon]:size-11! group-data-[collapsible=icon]:justify-center"
+			rail: "h-11 text-sm group-data-[collapsible=icon]:size-11! group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:p-0! group-data-[collapsible=icon]:[&>span:last-child]:sr-only"
 		}
 	},
 	defaultVariants: {

package/dist/inspector/tabs.d.ts

@@ -8,7 +8,7 @@ import { Tabs } from "@base-ui/react/tabs";
  */
 declare const InspectorTabs: ({ className, ...props }: Omit<Tabs.Root.Props, "orientation">) => React$1.JSX.Element;
 declare const INSPECTOR_RAIL_MEDIA_QUERY: "(min-width: 48rem)";
-declare const resolveInspectorTabOrientation: (isRailLayout: boolean) => "vertical" | "horizontal";
+declare const resolveInspectorTabOrientation: (isRailLayout: boolean) => "horizontal" | "vertical";
 declare const InspectorTabList: ({ className, ...props }: Tabs.List.Props) => React$1.JSX.Element;
 declare const InspectorTab: ({ className, ...props }: Tabs.Tab.Props) => React$1.JSX.Element;
 declare const InspectorTabPanel: ({ className, ...props }: Tabs.Panel.Props) => React$1.JSX.Element;

package/dist/kanban/subgroup-board.js

@@ -226,9 +226,9 @@ const KanbanSubgroupBoard = ({ matrix, renderColumnHeader, renderLaneIdentity, r
 			className: "min-w-max",
 			children: [
 				/* @__PURE__ */ jsxs("div", {
-					className: "bg-background sticky top-0 z-20 pt-4 pb-3",
+					className: "bg-background sticky top-0 z-20 pt-2 pb-2",
 					children: [hasBands ? /* @__PURE__ */ jsx("div", {
-						className: "flex items-end gap-3 pb-1.5",
+						className: "flex items-end gap-3 pb-1",
 						"data-kanban-band-row": "",
 						children: spans.map((span) => {
 							const band = span.band;
@@ -285,7 +285,7 @@ const KanbanSubgroupBoard = ({ matrix, renderColumnHeader, renderLaneIdentity, r
 					const collapsed = isLaneCollapsed ? isLaneCollapsed(group, count) : defaultCollapsed;
 					const cellFor = (column) => cells.find((candidate) => columnKey(candidate.coordinate.column) === columnKey(column));
 					return /* @__PURE__ */ jsxs("section", {
-						className: "border-border/60 border-b py-2 first:pt-0 last:border-b-0",
+						className: "border-border/60 border-b py-1 first:pt-0 last:border-b-0",
 						children: [
 							/* @__PURE__ */ jsx("div", {
 								className: "bg-background/95 sticky start-0 z-10 flex min-h-11 items-center backdrop-blur-sm",
@@ -311,7 +311,7 @@ const KanbanSubgroupBoard = ({ matrix, renderColumnHeader, renderLaneIdentity, r
 									]
 								})
 							}),
-							renderRow({
+							collapsed && renderRow({
 								label: "Lane column counts",
 								renderColumn: (column) => {
 									const columnRows = cellFor(column)?.rows.length ?? 0;

package/dist/lib/control-size.d.ts

@@ -5,6 +5,6 @@ declare const CONTROL_SIZE: Readonly<{
   readonly lg: "lg";
 }>;
 type ControlSize = (typeof CONTROL_SIZE)[keyof typeof CONTROL_SIZE];
-declare const CONTROL_SIZES: readonly ("sm" | "default" | "lg")[];
+declare const CONTROL_SIZES: readonly ("default" | "lg" | "sm")[];
 //#endregion
 export { CONTROL_SIZE, CONTROL_SIZES, type ControlSize };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stll/ui",
-  "version": "0.20.0",
+  "version": "0.21.0",
   "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",
@@ -93,6 +93,10 @@
       "types": "./dist/components/composer.d.ts",
       "import": "./dist/components/composer.js"
     },
+    "./context-menu": {
+      "types": "./dist/components/context-menu.d.ts",
+      "import": "./dist/components/context-menu.js"
+    },
     "./control-size": {
       "types": "./dist/lib/control-size.d.ts",
       "import": "./dist/lib/control-size.js"