@stll/ui 0.28.1 → 0.28.2

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

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

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/scroll-area.d.ts

@@ -1,7 +1,19 @@
 import { Ref } from "react";
 import { ScrollArea as ScrollArea$1 } from "@base-ui/react/scroll-area";
 //#region src/components/scroll-area.d.ts
-declare const ScrollArea: ({ className, children, scrollFade, scrollbarClassName, scrollbarGutter, viewportRef, ...props }: ScrollArea$1.Root.Props & {
+/**
+ * Which way the area may scroll. `both` is the primitive's own behaviour: a
+ * viewport that scrolls whichever axis its content overflows. `vertical` is
+ * for a surface whose inline size belongs to the reader rather than to its
+ * content — a resizable pane, a column that can be dragged down to 320px —
+ * where a sideways scrollbar means something inside refused to wrap, and the
+ * honest answer is to make it wrap. An element that genuinely needs the axis
+ * (a wide table, a code block) carries its own `overflow-x-auto` and scrolls
+ * locally, inside the column.
+ */
+type ScrollAreaAxis = "both" | "vertical";
+declare const ScrollArea: ({ axis, className, children, scrollFade, scrollbarClassName, scrollbarGutter, viewportRef, ...props }: ScrollArea$1.Root.Props & {
+  axis?: ScrollAreaAxis;
   scrollFade?: boolean;
   /**
    * Extra classes applied to both scrollbars, on top of their default

package/dist/components/scroll-area.js

@@ -3,13 +3,17 @@ import { cn } from "../lib/utils.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ScrollArea as ScrollArea$1 } from "@base-ui/react/scroll-area";
 //#region src/components/scroll-area.tsx
-const ScrollArea = ({ className, children, scrollFade = false, scrollbarClassName, scrollbarGutter = false, viewportRef, ...props }) => /* @__PURE__ */ jsxs(ScrollArea$1.Root, {
+const AXIS_VIEWPORT_CLASS = {
+	both: "",
+	vertical: "overflow-x-hidden"
+};
+const ScrollArea = ({ axis = "both", className, children, scrollFade = false, scrollbarClassName, scrollbarGutter = false, viewportRef, ...props }) => /* @__PURE__ */ jsxs(ScrollArea$1.Root, {
 	className: cn("size-full min-h-0", className),
 	...props,
 	children: [
 		/* @__PURE__ */ jsx(ScrollArea$1.Viewport, {
 			ref: viewportRef,
-			className: cn("focus-visible:ring-ring focus-visible:ring-offset-background h-full overscroll-contain rounded-[inherit] transition-shadow outline-none focus-visible:ring-2 focus-visible:ring-offset-1 data-has-overflow-x:overscroll-x-contain", scrollFade && "mask-t-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-y-start)))] mask-r-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-x-end)))] mask-b-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-y-end)))] mask-l-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-x-start)))] [--fade-size:1.5rem]", scrollbarGutter && "data-has-overflow-x:pb-2.5 data-has-overflow-y:pe-2.5"),
+			className: cn("focus-visible:ring-ring focus-visible:ring-offset-background h-full overscroll-contain rounded-[inherit] transition-shadow outline-none focus-visible:ring-2 focus-visible:ring-offset-1 data-has-overflow-x:overscroll-x-contain", scrollFade && "mask-t-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-y-start)))] mask-r-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-x-end)))] mask-b-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-y-end)))] mask-l-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-x-start)))] [--fade-size:1.5rem]", scrollbarGutter && "data-has-overflow-x:pb-2.5 data-has-overflow-y:pe-2.5", AXIS_VIEWPORT_CLASS[axis]),
 			"data-slot": "scroll-area-viewport",
 			children
 		}),
@@ -17,7 +21,7 @@ const ScrollArea = ({ className, children, scrollFade = false, scrollbarClassNam
 			className: scrollbarClassName,
 			orientation: "vertical"
 		}),
-		/* @__PURE__ */ jsx(ScrollBar, {
+		axis === "both" && /* @__PURE__ */ jsx(ScrollBar, {
 			className: scrollbarClassName,
 			orientation: "horizontal"
 		}),

package/dist/components/sidebar.d.ts

@@ -82,7 +82,7 @@ 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;
+  variant?: "default" | "outline" | null | undefined;
   size?: "sm" | "default" | "lg" | "rail" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare const SidebarMenuButton: ({ asChild, isActive, variant, size, tooltip, className, ...props }: React.ComponentProps<"button"> & {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stll/ui",
-  "version": "0.28.1",
+  "version": "0.28.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",