@stll/ui 0.51.0 → 0.52.0

package/dist/components/alert-dialog.d.ts

@@ -4,7 +4,7 @@ import * as React$1 from "react";
 //#region src/components/alert-dialog.d.ts
 declare const AlertDialogCreateHandle: typeof AlertDialog$1.createHandle;
 declare const AlertDialog: typeof AlertDialog$1.Root;
-declare const AlertDialogPortal: React$1.ForwardRefExoticComponent<Omit<import("@base-ui/react").DialogPortalProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const AlertDialogPortal: React$1.ForwardRefExoticComponent<Omit<import("@base-ui/react").AlertDialogPortalProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 declare function AlertDialogTrigger({ tooltip, ...props }: AlertDialog$1.Trigger.Props & {
   tooltip?: React$1.ReactNode;
 }): React$1.JSX.Element;

package/dist/components/bidi-text.d.ts

@@ -1,7 +1,7 @@
 import * as React$1 from "react";
 //#region src/components/bidi-text.d.ts
 export declare const BidiText: (props: BidiTextProps) => React$1.JSX.Element;
-export declare const UserText: typeof BidiText;
+export declare const UserText: (props: BidiTextProps) => React$1.JSX.Element;
 type BidiDirection = "auto" | "ltr" | "rtl";
 type BdiElementProps = Omit<React$1.ComponentPropsWithoutRef<"bdi">, "dir"> & {
   as?: "bdi";

package/dist/components/button.d.ts

@@ -13,8 +13,8 @@ import { VariantProps } from "class-variance-authority";
  */
 declare const buttonAccessibleDisabledClass = "cursor-not-allowed opacity-64";
 declare const buttonVariants: (props?: ({
-  size?: "chip" | "default" | "icon" | "icon-lg" | "icon-sm" | "icon-xl" | "icon-xs" | "lg" | "row" | "sm" | "xl" | "xs" | null | undefined;
-  variant?: "default" | "destructive" | "destructive-ghost" | "destructive-outline" | "ghost" | "link" | "muted" | "outline" | "secondary" | null | undefined;
+  size?: "default" | "sm" | "lg" | "icon" | "xs" | "row" | "chip" | "icon-lg" | "icon-sm" | "icon-xl" | "icon-xs" | "xl" | null | undefined;
+  variant?: "link" | "default" | "outline" | "destructive" | "muted" | "destructive-outline" | "destructive-ghost" | "ghost" | "secondary" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type ButtonProps = {
   variant?: VariantProps<typeof buttonVariants>["variant"];

package/dist/components/dialog.d.ts

@@ -14,7 +14,7 @@ declare const DialogProvider: ({ labels, children }: React$1.PropsWithChildren<{
 declare const Dialog: <Payload>({ dirty, onOpenChange, onOpenChangeComplete, ...props }: Dialog$1.Root.Props<Payload> & {
   dirty?: boolean;
 }) => React$1.JSX.Element;
-declare const DialogPortal: React$1.ForwardRefExoticComponent<Omit<import("@base-ui/react").DialogPortalProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const DialogPortal: React$1.ForwardRefExoticComponent<Omit<import("@base-ui/react").AlertDialogPortalProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 declare function DialogTrigger({ tooltip, ...props }: Dialog$1.Trigger.Props & {
   tooltip?: React$1.ReactNode;
 }): React$1.JSX.Element;

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?: "block-end" | "block-start" | "inline-end" | "inline-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/menu.d.ts

@@ -3,7 +3,7 @@ import { Menu as Menu$1 } from "@base-ui/react/menu";
 //#region src/components/menu.d.ts
 declare const MenuCreateHandle: typeof Menu$1.createHandle;
 declare const Menu: <Payload>(props: Menu$1.Root.Props<Payload>) => React$1.JSX.Element;
-declare const MenuPortal: React$1.ForwardRefExoticComponent<Omit<import("@base-ui/react").MenuPortalProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const MenuPortal: React$1.ForwardRefExoticComponent<Omit<import("@base-ui/react").ContextMenuPortalProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 declare function MenuTrigger({ tooltip, ...props }: Menu$1.Trigger.Props & {
   tooltip?: React$1.ReactNode;
 }): React$1.JSX.Element;

package/dist/components/prose.d.ts

@@ -2,7 +2,7 @@ import * as React$1 from "react";
 import { VariantProps } from "class-variance-authority";
 //#region src/components/prose.d.ts
 declare const proseVariants: (props?: ({
-  size?: "default" | "lede" | "sm" | null | undefined;
+  size?: "default" | "sm" | "lede" | null | undefined;
   tone?: "default" | "muted" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 /** A readable measure for narrative copy; task-shaped text should not use it. */

package/dist/components/sheet.d.ts

@@ -2,7 +2,7 @@ import * as React$1 from "react";
 import { Dialog } from "@base-ui/react/dialog";
 //#region src/components/sheet.d.ts
 declare const Sheet: <Payload>(props: Dialog.Root.Props<Payload>) => React$1.JSX.Element;
-declare const SheetPortal: React$1.ForwardRefExoticComponent<Omit<import("@base-ui/react").DialogPortalProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const SheetPortal: React$1.ForwardRefExoticComponent<Omit<import("@base-ui/react").AlertDialogPortalProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 type SheetSide = "inline-start" | "inline-end" | "block-start" | "block-end";
 declare function SheetTrigger({ tooltip, ...props }: Dialog.Trigger.Props & {
   tooltip?: React$1.ReactNode;

package/dist/components/sidebar.d.ts

@@ -86,7 +86,7 @@ declare const SidebarMenu: ({ className, ...props }: React.ComponentProps<"ul">)
 declare const SidebarMenuItem: ({ className, ...props }: React.ComponentProps<"li">) => import("react").JSX.Element;
 declare const sidebarMenuButtonVariants: (props?: ({
   variant?: "default" | "outline" | null | undefined;
-  size?: "default" | "lg" | "rail" | "sm" | null | undefined;
+  size?: "default" | "sm" | "lg" | "rail" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 /**
  * The footer's avatar trigger, signed in (user menu) or not (sign-in): a

package/dist/components/steps.d.ts

@@ -0,0 +1,18 @@
+import * as React$1 from "react";
+import { VariantProps } from "class-variance-authority";
+//#region src/components/steps.d.ts
+declare const stepsVariants: (props?: ({
+  variant?: "progress" | "default" | "compact" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type StepsProps = React$1.ComponentProps<"ol"> & VariantProps<typeof stepsVariants> & {
+  markerStyle: NonNullable<React$1.CSSProperties["listStyleType"]>;
+};
+/** A meaningful procedure, timeline, or ranking. The list owns its numbers. */
+declare const Steps: ({ className, variant, markerStyle, style, ...props }: StepsProps) => React$1.JSX.Element;
+declare const stepVariants: (props?: ({
+  status?: "current" | "completed" | "upcoming" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type StepProps = React$1.ComponentProps<"li"> & VariantProps<typeof stepVariants>;
+declare const Step: ({ className, status, ...props }: StepProps) => React$1.JSX.Element;
+//#endregion
+export { Step, Steps };

package/dist/components/steps.js

@@ -0,0 +1,34 @@
+import { cn } from "../lib/utils.js";
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+//#region src/components/steps.tsx
+const stepsVariants = cva("list-decimal ps-6 marker:font-medium", {
+	variants: { variant: {
+		default: "space-y-4",
+		compact: "space-y-0.5",
+		progress: "grid grid-cols-4 gap-2"
+	} },
+	defaultVariants: { variant: "default" }
+});
+/** A meaningful procedure, timeline, or ranking. The list owns its numbers. */
+const Steps = ({ className, variant, markerStyle, style, ...props }) => /* @__PURE__ */ jsx("ol", {
+	className: cn(stepsVariants({ variant }), className),
+	"data-slot": "steps",
+	style: {
+		...style,
+		listStyleType: markerStyle
+	},
+	...props
+});
+const stepVariants = cva("ps-2", { variants: { status: {
+	current: "border-foreground border-t-2 pt-2 text-sm font-medium",
+	completed: "border-foreground border-t-2 pt-2 text-sm font-medium",
+	upcoming: "border-muted text-muted-foreground border-t-2 pt-2 text-sm"
+} } });
+const Step = ({ className, status, ...props }) => /* @__PURE__ */ jsx("li", {
+	className: cn(stepVariants({ status }), className),
+	"data-slot": "step",
+	...props
+});
+//#endregion
+export { Step, Steps };

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 ("default" | "lg" | "sm")[];
+declare const CONTROL_SIZES: readonly ("default" | "sm" | "lg")[];
 //#endregion
 export { CONTROL_SIZE, CONTROL_SIZES, type ControlSize };

package/dist/lib/matter-colors.d.ts

@@ -1,7 +1,7 @@
 import { CSSProperties } from "react";
 //#region src/lib/matter-colors.d.ts
 export declare const MATTER_SWATCHES: readonly ["--option-blue", "--option-emerald", "--option-amber", "--option-violet", "--option-red", "--option-cyan", "--option-orange", "--option-teal"];
-export declare const getMatterSwatch: (id: string) => "--option-amber" | "--option-blue" | "--option-cyan" | "--option-emerald" | "--option-orange" | "--option-red" | "--option-teal" | "--option-violet";
+export declare const getMatterSwatch: (id: string) => "--option-blue" | "--option-emerald" | "--option-amber" | "--option-violet" | "--option-red" | "--option-cyan" | "--option-orange" | "--option-teal";
 export declare const getMatterColor: (id: string) => string;
 export declare const getMatterPickerColor: (id: string, color: string | null) => string;
 export declare const toStoredMatterColor: (color: string) => string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stll/ui",
-  "version": "0.51.0",
+  "version": "0.52.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",
@@ -269,6 +269,10 @@
       "types": "./dist/components/popover.d.ts",
       "import": "./dist/components/popover.js"
     },
+    "./steps": {
+      "types": "./dist/components/steps.d.ts",
+      "import": "./dist/components/steps.js"
+    },
     "./positioner-sizing": {
       "types": "./dist/lib/positioner-sizing.d.ts",
       "import": "./dist/lib/positioner-sizing.js"
@@ -748,11 +752,11 @@
     "@atlaskit/pragmatic-drag-and-drop": "^4.0.0",
     "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^3.2.1",
     "@base-ui/react": "1.8.0",
-    "@happy-dom/global-registrator": "21.0.1",
+    "@happy-dom/global-registrator": "21.0.4",
     "@playwright/test": "^1.63.0",
     "@stll/typescript-config": "0.0.0",
     "@tailwindcss/vite": "4.3.3",
-    "@tanstack/react-virtual": "^3.14.13",
+    "@tanstack/react-virtual": "^3.14.21",
     "@testing-library/dom": "10.4.2",
     "@testing-library/react": "16.3.3",
     "@types/react": "^19.3.0",