@claralight-design/react 0.0.1

package/dist/ui/popover.d.ts

@@ -0,0 +1,67 @@
+import { AnchoredSide } from "../lib/anchored.js";
+import { ComponentProps, ReactNode } from "react";
+import { Popover } from "@base-ui/react/popover";
+//#region src/ui/popover.d.ts
+declare const Popover$1: typeof Popover.Root;
+/** Re-exported unstyled, for building something other than the default content. */
+export declare const PopoverPortal: typeof Popover.Portal;
+export declare const PopoverPositioner: typeof Popover.Positioner;
+export declare const PopoverPopup: typeof Popover.Popup;
+export declare const PopoverArrow: typeof Popover.Arrow;
+export declare const PopoverBackdrop: typeof Popover.Backdrop;
+export type PopoverTriggerProps = Omit<ComponentProps<typeof Popover.Trigger>, "className"> & {
+  className?: string;
+};
+export declare function PopoverTrigger({ className, ...props }: PopoverTriggerProps): import("react").JSX.Element;
+export type PopoverContentProps = Omit<ComponentProps<typeof Popover.Popup>, "className"> & {
+  /** Applied to the clipped element: the frost, padding and text. */
+  className?: string;
+  /** Applied to the wrapper, which is what is positioned and animated. */
+  wrapperClassName?: string;
+  /** Preferred side of the trigger. Base UI flips when there is not enough room. */
+  side?: AnchoredSide;
+  align?: ComponentProps<typeof Popover.Positioner>["align"];
+  /** Gap between the trigger and the surface, in px. Measured from the arrow's tip. */
+  sideOffset?: number;
+  /** Space kept clear of the viewport edge, in px. */
+  collisionPadding?: number;
+  /** Whether the surface points at its trigger. */
+  arrow?: boolean;
+  children?: ReactNode;
+};
+/**
+ * Portal, positioner and the pointing frosted surface, in the composition
+ * everyone actually wants.
+ *
+ * `top` is the default side because that is ClaraLight's, not Base UI's — a
+ * popover belongs above the control that opened it, so the control stays
+ * visible under the reader's hand on touch.
+ *
+ * The arrow is part of the surface rather than an element beside it, so the
+ * `Arrow` rendered here paints nothing: Floating UI solves and clamps its
+ * position, and `AnchoredSurface` reads that back to splice the tail into the
+ * surface's own path. See `src/lib/anchored.tsx`.
+ *
+ * The entrance grows the surface out of its own tail rather than from Base UI's
+ * `--transform-origin`, which is the anchor's edge and therefore sits in the
+ * gap *outside* the surface. `AnchoredSurface` sets the origin from the tail it
+ * measured, and carries `.cl-anchored-root`, whose scale starts at zero instead
+ * of at a dialog's 95% nudge. `sticky` keeps the surface on screen once its
+ * trigger has been scrolled out of view, instead of letting it leave with it.
+ */
+export declare function PopoverContent({ className, wrapperClassName, side, align, sideOffset, collisionPadding, arrow, children, ...props }: PopoverContentProps): import("react").JSX.Element;
+export type PopoverTitleProps = Omit<ComponentProps<typeof Popover.Title>, "className"> & {
+  className?: string;
+};
+export declare function PopoverTitle({ className, ...props }: PopoverTitleProps): import("react").JSX.Element;
+export type PopoverDescriptionProps = Omit<ComponentProps<typeof Popover.Description>, "className"> & {
+  className?: string;
+};
+export declare function PopoverDescription({ className, ...props }: PopoverDescriptionProps): import("react").JSX.Element;
+export type PopoverCloseProps = Omit<ComponentProps<typeof Popover.Close>, "className"> & {
+  className?: string;
+};
+export declare function PopoverClose({ className, ...props }: PopoverCloseProps): import("react").JSX.Element;
+//#endregion
+export { Popover$1 as Popover };
+//# sourceMappingURL=popover.d.ts.map

package/dist/ui/popover.js

@@ -0,0 +1,93 @@
+"use client";
+import { cn } from "../lib/utils.js";
+import { AnchoredSurface, themedNumber, useThemedNumber } from "../lib/anchored.js";
+import { useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Popover } from "@base-ui/react/popover";
+//#region src/ui/popover.tsx
+const Popover$1 = Popover.Root;
+/** Re-exported unstyled, for building something other than the default content. */
+const PopoverPortal = Popover.Portal;
+const PopoverPositioner = Popover.Positioner;
+const PopoverPopup = Popover.Popup;
+const PopoverArrow = Popover.Arrow;
+const PopoverBackdrop = Popover.Backdrop;
+function PopoverTrigger({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Popover.Trigger, {
+		className,
+		...props
+	});
+}
+/**
+* Portal, positioner and the pointing frosted surface, in the composition
+* everyone actually wants.
+*
+* `top` is the default side because that is ClaraLight's, not Base UI's — a
+* popover belongs above the control that opened it, so the control stays
+* visible under the reader's hand on touch.
+*
+* The arrow is part of the surface rather than an element beside it, so the
+* `Arrow` rendered here paints nothing: Floating UI solves and clamps its
+* position, and `AnchoredSurface` reads that back to splice the tail into the
+* surface's own path. See `src/lib/anchored.tsx`.
+*
+* The entrance grows the surface out of its own tail rather than from Base UI's
+* `--transform-origin`, which is the anchor's edge and therefore sits in the
+* gap *outside* the surface. `AnchoredSurface` sets the origin from the tail it
+* measured, and carries `.cl-anchored-root`, whose scale starts at zero instead
+* of at a dialog's 95% nudge. `sticky` keeps the surface on screen once its
+* trigger has been scrolled out of view, instead of letting it leave with it.
+*/
+function PopoverContent({ className, wrapperClassName, side = "top", align = "center", sideOffset, collisionPadding, arrow = true, children, ...props }) {
+	const positionerRef = useRef(null);
+	const margin = useThemedNumber(positionerRef, "--cl-anchor-margin");
+	return /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(Popover.Positioner, {
+		ref: positionerRef,
+		side,
+		align,
+		sideOffset: sideOffset ?? (() => themedNumber(positionerRef.current, "--cl-anchor-gap") ?? 0),
+		collisionPadding: collisionPadding ?? margin,
+		sticky: true,
+		className: "z-50 outline-none",
+		children: /* @__PURE__ */ jsx(AnchoredSurface, {
+			asChild: true,
+			radius: "panel",
+			side,
+			arrow,
+			wrapperClassName: cn("w-fit", wrapperClassName),
+			children: /* @__PURE__ */ jsxs(Popover.Popup, {
+				"data-cl-slot": "popover-content",
+				className: cn("cl-exit-sentinel cl-frost shadow-none font-sans text-foreground", "[--cl-anchored-padding-x:var(--cl-popover-padding)]", "[--cl-anchored-padding-y:var(--cl-popover-padding)]", className),
+				...props,
+				children: [children, arrow ? /* @__PURE__ */ jsx(Popover.Arrow, {
+					"data-cl-anchor-probe": "",
+					className: "cl-anchor-probe"
+				}) : null]
+			})
+		})
+	}) });
+}
+function PopoverTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Popover.Title, {
+		"data-cl-slot": "popover-title",
+		className: cn("text-callout text-foreground", className),
+		...props
+	});
+}
+function PopoverDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Popover.Description, {
+		"data-cl-slot": "popover-description",
+		className: cn("text-caption text-foreground-tertiary", className),
+		...props
+	});
+}
+function PopoverClose({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Popover.Close, {
+		className,
+		...props
+	});
+}
+//#endregion
+export { Popover$1 as Popover, PopoverArrow, PopoverBackdrop, PopoverClose, PopoverContent, PopoverDescription, PopoverPopup, PopoverPortal, PopoverPositioner, PopoverTitle, PopoverTrigger };
+
+//# sourceMappingURL=popover.js.map

package/dist/ui/popover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover.js","names":["Popover","BasePopover"],"sources":["../../src/ui/popover.tsx"],"sourcesContent":["\"use client\";\n\nimport { Popover as BasePopover } from \"@base-ui/react/popover\";\nimport { type ComponentProps, type ReactNode, useRef } from \"react\";\nimport { type AnchoredSide, AnchoredSurface, themedNumber, useThemedNumber } from \"@/lib/anchored\";\nimport { cn } from \"@/lib/utils\";\n\nexport const Popover: typeof BasePopover.Root = BasePopover.Root;\n\n/** Re-exported unstyled, for building something other than the default content. */\nexport const PopoverPortal: typeof BasePopover.Portal = BasePopover.Portal;\nexport const PopoverPositioner: typeof BasePopover.Positioner = BasePopover.Positioner;\nexport const PopoverPopup: typeof BasePopover.Popup = BasePopover.Popup;\nexport const PopoverArrow: typeof BasePopover.Arrow = BasePopover.Arrow;\nexport const PopoverBackdrop: typeof BasePopover.Backdrop = BasePopover.Backdrop;\n\nexport type PopoverTriggerProps = Omit<ComponentProps<typeof BasePopover.Trigger>, \"className\"> & {\n  className?: string;\n};\n\nexport function PopoverTrigger({ className, ...props }: PopoverTriggerProps) {\n  return <BasePopover.Trigger className={className} {...props} />;\n}\n\nexport type PopoverContentProps = Omit<ComponentProps<typeof BasePopover.Popup>, \"className\"> & {\n  /** Applied to the clipped element: the frost, padding and text. */\n  className?: string;\n  /** Applied to the wrapper, which is what is positioned and animated. */\n  wrapperClassName?: string;\n  /** Preferred side of the trigger. Base UI flips when there is not enough room. */\n  side?: AnchoredSide;\n  align?: ComponentProps<typeof BasePopover.Positioner>[\"align\"];\n  /** Gap between the trigger and the surface, in px. Measured from the arrow's tip. */\n  sideOffset?: number;\n  /** Space kept clear of the viewport edge, in px. */\n  collisionPadding?: number;\n  /** Whether the surface points at its trigger. */\n  arrow?: boolean;\n  children?: ReactNode;\n};\n\n/**\n * Portal, positioner and the pointing frosted surface, in the composition\n * everyone actually wants.\n *\n * `top` is the default side because that is ClaraLight's, not Base UI's — a\n * popover belongs above the control that opened it, so the control stays\n * visible under the reader's hand on touch.\n *\n * The arrow is part of the surface rather than an element beside it, so the\n * `Arrow` rendered here paints nothing: Floating UI solves and clamps its\n * position, and `AnchoredSurface` reads that back to splice the tail into the\n * surface's own path. See `src/lib/anchored.tsx`.\n *\n * The entrance grows the surface out of its own tail rather than from Base UI's\n * `--transform-origin`, which is the anchor's edge and therefore sits in the\n * gap *outside* the surface. `AnchoredSurface` sets the origin from the tail it\n * measured, and carries `.cl-anchored-root`, whose scale starts at zero instead\n * of at a dialog's 95% nudge. `sticky` keeps the surface on screen once its\n * trigger has been scrolled out of view, instead of letting it leave with it.\n */\nexport function PopoverContent({\n  className,\n  wrapperClassName,\n  side = \"top\",\n  align = \"center\",\n  sideOffset,\n  collisionPadding,\n  arrow = true,\n  children,\n  ...props\n}: PopoverContentProps) {\n  const positionerRef = useRef<HTMLDivElement>(null);\n  const margin = useThemedNumber(positionerRef, \"--cl-anchor-margin\");\n\n  return (\n    <BasePopover.Portal>\n      <BasePopover.Positioner\n        ref={positionerRef}\n        side={side}\n        align={align}\n        sideOffset={\n          sideOffset ?? (() => themedNumber(positionerRef.current, \"--cl-anchor-gap\") ?? 0)\n        }\n        collisionPadding={collisionPadding ?? margin}\n        sticky\n        className=\"z-50 outline-none\"\n      >\n        <AnchoredSurface\n          asChild\n          radius=\"panel\"\n          side={side}\n          arrow={arrow}\n          wrapperClassName={cn(\"w-fit\", wrapperClassName)}\n        >\n          <BasePopover.Popup\n            data-cl-slot=\"popover-content\"\n            className={cn(\n              \"cl-exit-sentinel cl-frost shadow-none font-sans text-foreground\",\n              \"[--cl-anchored-padding-x:var(--cl-popover-padding)]\",\n              \"[--cl-anchored-padding-y:var(--cl-popover-padding)]\",\n              className,\n            )}\n            {...props}\n          >\n            {children}\n            {arrow ? (\n              <BasePopover.Arrow data-cl-anchor-probe=\"\" className=\"cl-anchor-probe\" />\n            ) : null}\n          </BasePopover.Popup>\n        </AnchoredSurface>\n      </BasePopover.Positioner>\n    </BasePopover.Portal>\n  );\n}\n\nexport type PopoverTitleProps = Omit<ComponentProps<typeof BasePopover.Title>, \"className\"> & {\n  className?: string;\n};\n\nexport function PopoverTitle({ className, ...props }: PopoverTitleProps) {\n  return (\n    <BasePopover.Title\n      data-cl-slot=\"popover-title\"\n      className={cn(\"text-callout text-foreground\", className)}\n      {...props}\n    />\n  );\n}\n\nexport type PopoverDescriptionProps = Omit<\n  ComponentProps<typeof BasePopover.Description>,\n  \"className\"\n> & { className?: string };\n\nexport function PopoverDescription({ className, ...props }: PopoverDescriptionProps) {\n  return (\n    <BasePopover.Description\n      data-cl-slot=\"popover-description\"\n      className={cn(\"text-caption text-foreground-tertiary\", className)}\n      {...props}\n    />\n  );\n}\n\nexport type PopoverCloseProps = Omit<ComponentProps<typeof BasePopover.Close>, \"className\"> & {\n  className?: string;\n};\n\nexport function PopoverClose({ className, ...props }: PopoverCloseProps) {\n  return <BasePopover.Close className={className} {...props} />;\n}\n"],"mappings":";;;;;;;AAOA,MAAaA,YAAmCC,QAAY;;AAG5D,MAAa,gBAA2CA,QAAY;AACpE,MAAa,oBAAmDA,QAAY;AAC5E,MAAa,eAAyCA,QAAY;AAClE,MAAa,eAAyCA,QAAY;AAClE,MAAa,kBAA+CA,QAAY;AAMxE,SAAgB,eAAe,EAAE,WAAW,GAAG,SAA8B;CAC3E,OAAO,oBAACA,QAAY,SAAb;EAAgC;EAAW,GAAI;CAAQ,CAAA;AAChE;;;;;;;;;;;;;;;;;;;;;AAuCA,SAAgB,eAAe,EAC7B,WACA,kBACA,OAAO,OACP,QAAQ,UACR,YACA,kBACA,QAAQ,MACR,UACA,GAAG,SACmB;CACtB,MAAM,gBAAgB,OAAuB,IAAI;CACjD,MAAM,SAAS,gBAAgB,eAAe,oBAAoB;CAElE,OACE,oBAACA,QAAY,QAAb,EAAA,UACE,oBAACA,QAAY,YAAb;EACE,KAAK;EACC;EACC;EACP,YACE,qBAAqB,aAAa,cAAc,SAAS,iBAAiB,KAAK;EAEjF,kBAAkB,oBAAoB;EACtC,QAAA;EACA,WAAU;EAEV,UAAA,oBAAC,iBAAD;GACE,SAAA;GACA,QAAO;GACD;GACC;GACP,kBAAkB,GAAG,SAAS,gBAAgB;GAE9C,UAAA,qBAACA,QAAY,OAAb;IACE,gBAAa;IACb,WAAW,GACT,mEACA,uDACA,uDACA,SACF;IACA,GAAI;IARN,UAAA,CAUG,UACA,QACC,oBAACA,QAAY,OAAb;KAAmB,wBAAqB;KAAG,WAAU;IAAmB,CAAA,IACtE,IACa;;EACJ,CAAA;CACK,CAAA,EACN,CAAA;AAExB;AAMA,SAAgB,aAAa,EAAE,WAAW,GAAG,SAA4B;CACvE,OACE,oBAACA,QAAY,OAAb;EACE,gBAAa;EACb,WAAW,GAAG,gCAAgC,SAAS;EACvD,GAAI;CACL,CAAA;AAEL;AAOA,SAAgB,mBAAmB,EAAE,WAAW,GAAG,SAAkC;CACnF,OACE,oBAACA,QAAY,aAAb;EACE,gBAAa;EACb,WAAW,GAAG,yCAAyC,SAAS;EAChE,GAAI;CACL,CAAA;AAEL;AAMA,SAAgB,aAAa,EAAE,WAAW,GAAG,SAA4B;CACvE,OAAO,oBAACA,QAAY,OAAb;EAA8B;EAAW,GAAI;CAAQ,CAAA;AAC9D"}

package/dist/ui/scroll-area.d.ts

@@ -0,0 +1,110 @@
+import { RadiusToken } from "../lib/squircle.js";
+import { ComponentProps, ReactNode, Ref } from "react";
+import { ScrollArea } from "@base-ui/react/scroll-area";
+//#region src/ui/scroll-area.d.ts
+/** Axes the content can move in. */
+export type ScrollAreaOrientation = "vertical" | "horizontal" | "both";
+/** Visibility policy for one scrollbar. */
+export type ScrollbarVisibility = "auto" | "always" | "hidden";
+/**
+ * How a side announces that there is more content behind it.
+ *
+ * `blur` is the full treatment: the content fades out *and* smears into the
+ * edge. **It needs an opaque fill** — `bg-panel` or `bg-background`, not
+ * `bg-control`, `bg-track` or `cl-frost`. The smooth-corner clip makes the
+ * surface its own backdrop root, so the blur can only see the surface's own
+ * fill and the scrolled content; over a translucent fill there is barely any
+ * colour there to blur and the engine lifts it into a white halo instead. See
+ * `scroll-area.css` for the measurements and why nothing else can be done
+ * about it.
+ *
+ * `mask` keeps only the fade. It has none of that coupling — it is a
+ * compositor-only effect that works over any fill — and it is the right choice
+ * for a translucent surface, or for a scroll area already inside something
+ * expensive. `none` leaves the edges hard.
+ */
+export type ScrollAreaEdge = "blur" | "mask" | "none";
+/** Re-exported unstyled, for building something other than the default area. */
+export declare const ScrollAreaRoot: typeof ScrollArea.Root;
+export declare const ScrollAreaViewport: typeof ScrollArea.Viewport;
+export declare const ScrollAreaContent: typeof ScrollArea.Content;
+export declare const ScrollAreaScrollbar: typeof ScrollArea.Scrollbar;
+export declare const ScrollAreaThumb: typeof ScrollArea.Thumb;
+export declare const ScrollAreaCorner: typeof ScrollArea.Corner;
+export interface ScrollAreaProps extends Omit<ComponentProps<typeof ScrollArea.Root>, "className" | "children"> {
+  /**
+   * Applied to the clipped element: fill, border, and **the area's size**.
+   *
+   * The size has to be here and it has to be definite. The viewport fills the
+   * surface absolutely, so a surface left to size itself to its content has no
+   * height at all — `className="h-64"`, not a bare `<ScrollArea>`.
+   */
+  className?: string;
+  /**
+   * Applied to the layout wrapper, which is the element the caller's grid or
+   * flex lays out. Placement goes here — `col-span-2`, `flex-1` — and when the
+   * placement is what decides the height, pair it with `className="h-full"` so
+   * the surface inside still resolves to something definite.
+   */
+  wrapperClassName?: string;
+  /** Applied to the scrolling element itself. */
+  viewportClassName?: string;
+  /**
+   * Applied to the box that moves. This is where padding belongs: put it on
+   * the surface instead and it stays pinned over the scrolling content, with
+   * the edge effects fading a gap rather than the content.
+   */
+  contentClassName?: string;
+  /**
+   * Axes the content can move in.
+   *
+   * `both` matches the Flutter widget and leaves the content unconstrained on
+   * each enabled axis, which is why the content box is `max-content` wide
+   * whenever the inline axis can scroll: a horizontally scrollable child has to
+   * be allowed to exceed the viewport before it has anything to scroll. Lock
+   * the axis with `vertical` and the box is pinned to the viewport instead, so
+   * the content wraps rather than running off an edge it cannot scroll to.
+   */
+  orientation?: ScrollAreaOrientation;
+  /** How the sides announce content behind them. */
+  edge?: ScrollAreaEdge;
+  /** One policy for both bars, or one per axis. */
+  scrollbars?: ScrollbarVisibility | {
+    x?: ScrollbarVisibility;
+    y?: ScrollbarVisibility;
+  };
+  /** Which `--radius-*` token shapes the corners. */
+  radius?: RadiusToken;
+  /** Figma's `xi`; see `Squircle`. */
+  smoothing?: number;
+  /**
+   * The scrolling element. This is the web's scroll controller — `scrollTo`,
+   * `scrollTop` and `scrollIntoView` on a child all work through it — so there
+   * is no separate controller object and no per-axis pairing to keep distinct.
+   */
+  viewportRef?: Ref<HTMLDivElement>;
+  children?: ReactNode;
+}
+/**
+ * A ClaraLight viewport: content that scrolls, sides that dissolve into the
+ * frame as more of it comes into range, and scrollbars that surface while you
+ * are using them.
+ *
+ * Almost nothing here runs in React. Base UI reports the four overflow edges
+ * both as booleans and as live pixel distances, and `scroll-area.css` drives
+ * the mask straight off the distances — so the fade tracks the scroll position
+ * exactly, with no animation, no timer and no re-render between the wheel and
+ * the pixels. Scrolling only re-renders when an edge is genuinely crossed.
+ *
+ * Everything dimensional is a CSS variable rather than a prop, which is how the
+ * per-side control the design asks for costs no API surface:
+ *
+ *     <ScrollArea className="[--cl-scroll-edge-block-end:0px]" />
+ *
+ * turns the bottom edge off, and scoping `--cl-scroll-blur` to one `[data-edge]`
+ * gives that side its own sigma.
+ */
+declare function ScrollArea$1({ className, wrapperClassName, viewportClassName, contentClassName, orientation, edge, scrollbars, radius, smoothing, viewportRef, children, ...props }: ScrollAreaProps): import("react").JSX.Element;
+//#endregion
+export { ScrollArea$1 as ScrollArea };
+//# sourceMappingURL=scroll-area.d.ts.map

package/dist/ui/scroll-area.js

@@ -0,0 +1,125 @@
+"use client";
+import { cn } from "../lib/utils.js";
+import { Squircle } from "../lib/squircle.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ScrollArea } from "@base-ui/react/scroll-area";
+//#region src/ui/scroll-area.tsx
+/** Re-exported unstyled, for building something other than the default area. */
+const ScrollAreaRoot = ScrollArea.Root;
+const ScrollAreaViewport = ScrollArea.Viewport;
+const ScrollAreaContent = ScrollArea.Content;
+const ScrollAreaScrollbar = ScrollArea.Scrollbar;
+const ScrollAreaThumb = ScrollArea.Thumb;
+const ScrollAreaCorner = ScrollArea.Corner;
+const EDGES = {
+	vertical: ["block-start", "block-end"],
+	horizontal: ["inline-start", "inline-end"]
+};
+/**
+* Three layers per edge, because a single `backdrop-filter` has one sigma for
+* its whole box and the effect needs sigma to fall off across the band. The
+* masks and the sigma ramp live in `scroll-area.css`; the count is here because
+* it is the one part the CSS cannot express on its own.
+*/
+function ScrollEdge({ edge }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-cl-slot": "scroll-area-edge",
+		"data-edge": edge,
+		className: "cl-scroll-edge",
+		"aria-hidden": true,
+		children: [
+			/* @__PURE__ */ jsx("div", { className: "cl-scroll-edge-layer" }),
+			/* @__PURE__ */ jsx("div", { className: "cl-scroll-edge-layer" }),
+			/* @__PURE__ */ jsx("div", { className: "cl-scroll-edge-layer" })
+		]
+	});
+}
+function resolveScrollbars(value) {
+	if (value === void 0) return {
+		x: "auto",
+		y: "auto"
+	};
+	if (typeof value === "string") return {
+		x: value,
+		y: value
+	};
+	return {
+		x: value.x ?? "auto",
+		y: value.y ?? "auto"
+	};
+}
+/**
+* A ClaraLight viewport: content that scrolls, sides that dissolve into the
+* frame as more of it comes into range, and scrollbars that surface while you
+* are using them.
+*
+* Almost nothing here runs in React. Base UI reports the four overflow edges
+* both as booleans and as live pixel distances, and `scroll-area.css` drives
+* the mask straight off the distances — so the fade tracks the scroll position
+* exactly, with no animation, no timer and no re-render between the wheel and
+* the pixels. Scrolling only re-renders when an edge is genuinely crossed.
+*
+* Everything dimensional is a CSS variable rather than a prop, which is how the
+* per-side control the design asks for costs no API surface:
+*
+*     <ScrollArea className="[--cl-scroll-edge-block-end:0px]" />
+*
+* turns the bottom edge off, and scoping `--cl-scroll-blur` to one `[data-edge]`
+* gives that side its own sigma.
+*/
+function ScrollArea$1({ className, wrapperClassName, viewportClassName, contentClassName, orientation = "both", edge = "blur", scrollbars, radius = "medium", smoothing, viewportRef, children, ...props }) {
+	const visibility = resolveScrollbars(scrollbars);
+	const vertical = orientation !== "horizontal";
+	const horizontal = orientation !== "vertical";
+	const activeEdges = edge === "blur" ? [...vertical ? EDGES.vertical : [], ...horizontal ? EDGES.horizontal : []] : [];
+	return /* @__PURE__ */ jsx(Squircle, {
+		asChild: true,
+		radius,
+		smoothing,
+		wrapperClassName,
+		children: /* @__PURE__ */ jsxs(ScrollArea.Root, {
+			"data-cl-slot": "scroll-area",
+			className: cn("cl-scroll-area", className),
+			...props,
+			children: [
+				/* @__PURE__ */ jsx(ScrollArea.Viewport, {
+					ref: viewportRef,
+					"data-cl-slot": "scroll-area-viewport",
+					className: cn("size-full overscroll-contain", edge !== "none" && "cl-scroll-viewport", viewportClassName),
+					style: vertical && horizontal ? void 0 : vertical ? { overflowX: "hidden" } : { overflowY: "hidden" },
+					children: /* @__PURE__ */ jsx(ScrollArea.Content, {
+						"data-cl-slot": "scroll-area-content",
+						className: contentClassName,
+						style: { minWidth: horizontal ? "max-content" : 0 },
+						children
+					})
+				}),
+				activeEdges.map((side) => /* @__PURE__ */ jsx(ScrollEdge, { edge: side }, side)),
+				vertical && visibility.y !== "hidden" && /* @__PURE__ */ jsx(ScrollArea.Scrollbar, {
+					orientation: "vertical",
+					"data-cl-slot": "scroll-area-scrollbar",
+					"data-cl-visibility": visibility.y,
+					className: "cl-scrollbar",
+					children: /* @__PURE__ */ jsx(ScrollArea.Thumb, {
+						"data-cl-slot": "scroll-area-thumb",
+						className: "cl-scroll-thumb"
+					})
+				}),
+				horizontal && visibility.x !== "hidden" && /* @__PURE__ */ jsx(ScrollArea.Scrollbar, {
+					orientation: "horizontal",
+					"data-cl-slot": "scroll-area-scrollbar",
+					"data-cl-visibility": visibility.x,
+					className: "cl-scrollbar",
+					children: /* @__PURE__ */ jsx(ScrollArea.Thumb, {
+						"data-cl-slot": "scroll-area-thumb",
+						className: "cl-scroll-thumb"
+					})
+				})
+			]
+		})
+	});
+}
+//#endregion
+export { ScrollArea$1 as ScrollArea, ScrollAreaContent, ScrollAreaCorner, ScrollAreaRoot, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaViewport };
+
+//# sourceMappingURL=scroll-area.js.map

package/dist/ui/scroll-area.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll-area.js","names":["BaseScrollArea","ScrollArea"],"sources":["../../src/ui/scroll-area.tsx"],"sourcesContent":["\"use client\";\n\nimport { ScrollArea as BaseScrollArea } from \"@base-ui/react/scroll-area\";\nimport type { ComponentProps, ReactNode, Ref } from \"react\";\nimport { type RadiusToken, Squircle } from \"@/lib/squircle\";\nimport { cn } from \"@/lib/utils\";\n\n/** Axes the content can move in. */\nexport type ScrollAreaOrientation = \"vertical\" | \"horizontal\" | \"both\";\n\n/** Visibility policy for one scrollbar. */\nexport type ScrollbarVisibility = \"auto\" | \"always\" | \"hidden\";\n\n/**\n * How a side announces that there is more content behind it.\n *\n * `blur` is the full treatment: the content fades out *and* smears into the\n * edge. **It needs an opaque fill** — `bg-panel` or `bg-background`, not\n * `bg-control`, `bg-track` or `cl-frost`. The smooth-corner clip makes the\n * surface its own backdrop root, so the blur can only see the surface's own\n * fill and the scrolled content; over a translucent fill there is barely any\n * colour there to blur and the engine lifts it into a white halo instead. See\n * `scroll-area.css` for the measurements and why nothing else can be done\n * about it.\n *\n * `mask` keeps only the fade. It has none of that coupling — it is a\n * compositor-only effect that works over any fill — and it is the right choice\n * for a translucent surface, or for a scroll area already inside something\n * expensive. `none` leaves the edges hard.\n */\nexport type ScrollAreaEdge = \"blur\" | \"mask\" | \"none\";\n\n/** Re-exported unstyled, for building something other than the default area. */\nexport const ScrollAreaRoot: typeof BaseScrollArea.Root = BaseScrollArea.Root;\nexport const ScrollAreaViewport: typeof BaseScrollArea.Viewport = BaseScrollArea.Viewport;\nexport const ScrollAreaContent: typeof BaseScrollArea.Content = BaseScrollArea.Content;\nexport const ScrollAreaScrollbar: typeof BaseScrollArea.Scrollbar = BaseScrollArea.Scrollbar;\nexport const ScrollAreaThumb: typeof BaseScrollArea.Thumb = BaseScrollArea.Thumb;\nexport const ScrollAreaCorner: typeof BaseScrollArea.Corner = BaseScrollArea.Corner;\n\nconst EDGES = {\n  vertical: [\"block-start\", \"block-end\"],\n  horizontal: [\"inline-start\", \"inline-end\"],\n} as const;\n\n/**\n * Three layers per edge, because a single `backdrop-filter` has one sigma for\n * its whole box and the effect needs sigma to fall off across the band. The\n * masks and the sigma ramp live in `scroll-area.css`; the count is here because\n * it is the one part the CSS cannot express on its own.\n */\nfunction ScrollEdge({ edge }: { edge: (typeof EDGES)[keyof typeof EDGES][number] }) {\n  return (\n    <div data-cl-slot=\"scroll-area-edge\" data-edge={edge} className=\"cl-scroll-edge\" aria-hidden>\n      <div className=\"cl-scroll-edge-layer\" />\n      <div className=\"cl-scroll-edge-layer\" />\n      <div className=\"cl-scroll-edge-layer\" />\n    </div>\n  );\n}\n\nexport interface ScrollAreaProps\n  extends Omit<ComponentProps<typeof BaseScrollArea.Root>, \"className\" | \"children\"> {\n  /**\n   * Applied to the clipped element: fill, border, and **the area's size**.\n   *\n   * The size has to be here and it has to be definite. The viewport fills the\n   * surface absolutely, so a surface left to size itself to its content has no\n   * height at all — `className=\"h-64\"`, not a bare `<ScrollArea>`.\n   */\n  className?: string;\n  /**\n   * Applied to the layout wrapper, which is the element the caller's grid or\n   * flex lays out. Placement goes here — `col-span-2`, `flex-1` — and when the\n   * placement is what decides the height, pair it with `className=\"h-full\"` so\n   * the surface inside still resolves to something definite.\n   */\n  wrapperClassName?: string;\n  /** Applied to the scrolling element itself. */\n  viewportClassName?: string;\n  /**\n   * Applied to the box that moves. This is where padding belongs: put it on\n   * the surface instead and it stays pinned over the scrolling content, with\n   * the edge effects fading a gap rather than the content.\n   */\n  contentClassName?: string;\n  /**\n   * Axes the content can move in.\n   *\n   * `both` matches the Flutter widget and leaves the content unconstrained on\n   * each enabled axis, which is why the content box is `max-content` wide\n   * whenever the inline axis can scroll: a horizontally scrollable child has to\n   * be allowed to exceed the viewport before it has anything to scroll. Lock\n   * the axis with `vertical` and the box is pinned to the viewport instead, so\n   * the content wraps rather than running off an edge it cannot scroll to.\n   */\n  orientation?: ScrollAreaOrientation;\n  /** How the sides announce content behind them. */\n  edge?: ScrollAreaEdge;\n  /** One policy for both bars, or one per axis. */\n  scrollbars?: ScrollbarVisibility | { x?: ScrollbarVisibility; y?: ScrollbarVisibility };\n  /** Which `--radius-*` token shapes the corners. */\n  radius?: RadiusToken;\n  /** Figma's `xi`; see `Squircle`. */\n  smoothing?: number;\n  /**\n   * The scrolling element. This is the web's scroll controller — `scrollTo`,\n   * `scrollTop` and `scrollIntoView` on a child all work through it — so there\n   * is no separate controller object and no per-axis pairing to keep distinct.\n   */\n  viewportRef?: Ref<HTMLDivElement>;\n  children?: ReactNode;\n}\n\nfunction resolveScrollbars(value: ScrollAreaProps[\"scrollbars\"]) {\n  if (value === undefined) return { x: \"auto\", y: \"auto\" } as const;\n  if (typeof value === \"string\") return { x: value, y: value };\n  return { x: value.x ?? \"auto\", y: value.y ?? \"auto\" };\n}\n\n/**\n * A ClaraLight viewport: content that scrolls, sides that dissolve into the\n * frame as more of it comes into range, and scrollbars that surface while you\n * are using them.\n *\n * Almost nothing here runs in React. Base UI reports the four overflow edges\n * both as booleans and as live pixel distances, and `scroll-area.css` drives\n * the mask straight off the distances — so the fade tracks the scroll position\n * exactly, with no animation, no timer and no re-render between the wheel and\n * the pixels. Scrolling only re-renders when an edge is genuinely crossed.\n *\n * Everything dimensional is a CSS variable rather than a prop, which is how the\n * per-side control the design asks for costs no API surface:\n *\n *     <ScrollArea className=\"[--cl-scroll-edge-block-end:0px]\" />\n *\n * turns the bottom edge off, and scoping `--cl-scroll-blur` to one `[data-edge]`\n * gives that side its own sigma.\n */\nexport function ScrollArea({\n  className,\n  wrapperClassName,\n  viewportClassName,\n  contentClassName,\n  orientation = \"both\",\n  edge = \"blur\",\n  scrollbars,\n  radius = \"medium\",\n  smoothing,\n  viewportRef,\n  children,\n  ...props\n}: ScrollAreaProps) {\n  const visibility = resolveScrollbars(scrollbars);\n  const vertical = orientation !== \"horizontal\";\n  const horizontal = orientation !== \"vertical\";\n\n  const activeEdges =\n    edge === \"blur\"\n      ? [...(vertical ? EDGES.vertical : []), ...(horizontal ? EDGES.horizontal : [])]\n      : [];\n\n  return (\n    <Squircle asChild radius={radius} smoothing={smoothing} wrapperClassName={wrapperClassName}>\n      <BaseScrollArea.Root\n        data-cl-slot=\"scroll-area\"\n        className={cn(\"cl-scroll-area\", className)}\n        {...props}\n      >\n        <BaseScrollArea.Viewport\n          ref={viewportRef}\n          data-cl-slot=\"scroll-area-viewport\"\n          // `size-full` is load-bearing, not cosmetic. Base UI gives the\n          // viewport `overflow: scroll` and nothing else, so left to itself it\n          // is an auto-height block that grows to its content and therefore\n          // never overflows: the area looks right, because the surface clips\n          // it, and scrolls nowhere. The height has to come from the surface.\n          className={cn(\n            \"size-full overscroll-contain\",\n            edge !== \"none\" && \"cl-scroll-viewport\",\n            viewportClassName,\n          )}\n          // Base UI writes `overflow: scroll`; a locked axis is layered on top\n          // of it rather than replacing it, so the element stays a scroller and\n          // keeps reporting the other axis' overflow.\n          style={\n            vertical && horizontal\n              ? undefined\n              : vertical\n                ? { overflowX: \"hidden\" }\n                : { overflowY: \"hidden\" }\n          }\n        >\n          <BaseScrollArea.Content\n            data-cl-slot=\"scroll-area-content\"\n            className={contentClassName}\n            // Base UI writes `min-width: fit-content` here inline, which no\n            // class can outrank — and inside a scroll container that keyword\n            // measures the content rather than the scrollport, so it is wrong\n            // in both directions: a scrollable axis is still capped at the\n            // viewport, and a locked axis is widened past it, where nothing can\n            // reach it. Each axis wants the opposite.\n            style={{ minWidth: horizontal ? \"max-content\" : 0 }}\n          >\n            {children}\n          </BaseScrollArea.Content>\n        </BaseScrollArea.Viewport>\n\n        {activeEdges.map((side) => (\n          <ScrollEdge key={side} edge={side} />\n        ))}\n\n        {vertical && visibility.y !== \"hidden\" && (\n          <BaseScrollArea.Scrollbar\n            orientation=\"vertical\"\n            data-cl-slot=\"scroll-area-scrollbar\"\n            data-cl-visibility={visibility.y}\n            className=\"cl-scrollbar\"\n          >\n            <BaseScrollArea.Thumb data-cl-slot=\"scroll-area-thumb\" className=\"cl-scroll-thumb\" />\n          </BaseScrollArea.Scrollbar>\n        )}\n\n        {horizontal && visibility.x !== \"hidden\" && (\n          <BaseScrollArea.Scrollbar\n            orientation=\"horizontal\"\n            data-cl-slot=\"scroll-area-scrollbar\"\n            data-cl-visibility={visibility.x}\n            className=\"cl-scrollbar\"\n          >\n            <BaseScrollArea.Thumb data-cl-slot=\"scroll-area-thumb\" className=\"cl-scroll-thumb\" />\n          </BaseScrollArea.Scrollbar>\n        )}\n      </BaseScrollArea.Root>\n    </Squircle>\n  );\n}\n"],"mappings":";;;;;;;AAiCA,MAAa,iBAA6CA,WAAe;AACzE,MAAa,qBAAqDA,WAAe;AACjF,MAAa,oBAAmDA,WAAe;AAC/E,MAAa,sBAAuDA,WAAe;AACnF,MAAa,kBAA+CA,WAAe;AAC3E,MAAa,mBAAiDA,WAAe;AAE7E,MAAM,QAAQ;CACZ,UAAU,CAAC,eAAe,WAAW;CACrC,YAAY,CAAC,gBAAgB,YAAY;AAC3C;;;;;;;AAQA,SAAS,WAAW,EAAE,QAA8D;CAClF,OACE,qBAAC,OAAD;EAAK,gBAAa;EAAmB,aAAW;EAAM,WAAU;EAAiB,eAAA;EAAjF,UAAA;GACE,oBAAC,OAAD,EAAK,WAAU,uBAAwB,CAAA;GACvC,oBAAC,OAAD,EAAK,WAAU,uBAAwB,CAAA;GACvC,oBAAC,OAAD,EAAK,WAAU,uBAAwB,CAAA;EACpC;;AAET;AAuDA,SAAS,kBAAkB,OAAsC;CAC/D,IAAI,UAAU,KAAA,GAAW,OAAO;EAAE,GAAG;EAAQ,GAAG;CAAO;CACvD,IAAI,OAAO,UAAU,UAAU,OAAO;EAAE,GAAG;EAAO,GAAG;CAAM;CAC3D,OAAO;EAAE,GAAG,MAAM,KAAK;EAAQ,GAAG,MAAM,KAAK;CAAO;AACtD;;;;;;;;;;;;;;;;;;;;AAqBA,SAAgBC,aAAW,EACzB,WACA,kBACA,mBACA,kBACA,cAAc,QACd,OAAO,QACP,YACA,SAAS,UACT,WACA,aACA,UACA,GAAG,SACe;CAClB,MAAM,aAAa,kBAAkB,UAAU;CAC/C,MAAM,WAAW,gBAAgB;CACjC,MAAM,aAAa,gBAAgB;CAEnC,MAAM,cACJ,SAAS,SACL,CAAC,GAAI,WAAW,MAAM,WAAW,CAAC,GAAI,GAAI,aAAa,MAAM,aAAa,CAAC,CAAE,IAC7E,CAAC;CAEP,OACE,oBAAC,UAAD;EAAU,SAAA;EAAgB;EAAmB;EAA6B;EACxE,UAAA,qBAACD,WAAe,MAAhB;GACE,gBAAa;GACb,WAAW,GAAG,kBAAkB,SAAS;GACzC,GAAI;GAHN,UAAA;IAKE,oBAACA,WAAe,UAAhB;KACE,KAAK;KACL,gBAAa;KAMb,WAAW,GACT,gCACA,SAAS,UAAU,sBACnB,iBACF;KAIA,OACE,YAAY,aACR,KAAA,IACA,WACE,EAAE,WAAW,SAAS,IACtB,EAAE,WAAW,SAAS;KAG9B,UAAA,oBAACA,WAAe,SAAhB;MACE,gBAAa;MACb,WAAW;MAOX,OAAO,EAAE,UAAU,aAAa,gBAAgB,EAAE;MAEjD;KACqB,CAAA;IACD,CAAA;IAExB,YAAY,KAAK,SAChB,oBAAC,YAAD,EAAuB,MAAM,KAAO,GAAnB,IAAmB,CACrC;IAEA,YAAY,WAAW,MAAM,YAC5B,oBAACA,WAAe,WAAhB;KACE,aAAY;KACZ,gBAAa;KACb,sBAAoB,WAAW;KAC/B,WAAU;KAEV,UAAA,oBAACA,WAAe,OAAhB;MAAsB,gBAAa;MAAoB,WAAU;KAAmB,CAAA;IAC5D,CAAA;IAG3B,cAAc,WAAW,MAAM,YAC9B,oBAACA,WAAe,WAAhB;KACE,aAAY;KACZ,gBAAa;KACb,sBAAoB,WAAW;KAC/B,WAAU;KAEV,UAAA,oBAACA,WAAe,OAAhB;MAAsB,gBAAa;MAAoB,WAAU;KAAmB,CAAA;IAC5D,CAAA;GAET;;CACb,CAAA;AAEd"}

package/dist/ui/select.d.ts

@@ -0,0 +1,113 @@
+import { ComponentProps } from "react";
+import { Select } from "@base-ui/react/select";
+//#region src/ui/select.d.ts
+declare const Select$1: typeof Select.Root;
+/** Re-exported unstyled, for building something other than the default content. */
+export declare const SelectPortal: typeof Select.Portal;
+export declare const SelectPositioner: typeof Select.Positioner;
+export declare const SelectPopup: typeof Select.Popup;
+export declare const SelectList: typeof Select.List;
+export type SelectTriggerProps = Omit<ComponentProps<typeof Select.Trigger>, "className"> & {
+  className?: string;
+  /** Applied to the wrapper, which is what a caller's layout sizes. */
+  wrapperClassName?: string;
+  /**
+   * Shared control-height tokens. Defaults to `md` rather than
+   * the button's `lg`, because a select is usually one control among several in
+   * a dense row.
+   */
+  size?: "sm" | "md" | "lg";
+};
+export declare function SelectTrigger({ className, wrapperClassName, size, ...props }: SelectTriggerProps): import("react").JSX.Element;
+export type SelectValueProps = Omit<ComponentProps<typeof Select.Value>, "className"> & {
+  className?: string;
+};
+export declare function SelectValue({ className, ...props }: SelectValueProps): import("react").JSX.Element;
+export type SelectIconProps = Omit<ComponentProps<typeof Select.Icon>, "className"> & {
+  className?: string;
+};
+/**
+ * Flips with the popup and is `aria-hidden` because Base UI already exposes the
+ * expanded state; the glyph is decoration, not information.
+ */
+export declare function SelectIcon({ className, ...props }: SelectIconProps): import("react").JSX.Element;
+export type SelectContentProps = Omit<ComponentProps<typeof Select.Popup>, "className"> & {
+  /** Applied to the clipped element: the frost, padding and text. */
+  className?: string;
+  /** Applied to the wrapper, which is what is positioned and animated. */
+  wrapperClassName?: string;
+  /** Gap between the trigger and the popup, in px. */
+  sideOffset?: number;
+  /** Preferred side; Base UI flips when there is not enough room. */
+  side?: ComponentProps<typeof Select.Positioner>["side"];
+  align?: ComponentProps<typeof Select.Positioner>["align"];
+};
+/**
+ * Portal, positioner and popup in the composition everyone actually wants.
+ *
+ * Two details come straight from Base UI:
+ *
+ * - `origin-[var(--transform-origin)]` — the positioner computes where the
+ *   popup should *appear to grow from* based on the trigger's position, so the
+ *   scale-in reads as the trigger unfolding rather than a box fading in.
+ * - `--available-height` / `--anchor-width` — measured space, so the list never
+ *   spills past the viewport and the popup can match the trigger's width.
+ */
+export declare function SelectContent({ className, wrapperClassName, children, sideOffset, side, align, ...props }: SelectContentProps): import("react").JSX.Element;
+export type SelectItemProps = Omit<ComponentProps<typeof Select.Item>, "className"> & {
+  className?: string;
+};
+/**
+ * The item radius has its own token so nested corners remain comfortable
+ * inside the medium-radius popup.
+ */
+export declare function SelectItem({ className, ...props }: SelectItemProps): import("react").JSX.Element;
+export type SelectItemIndicatorProps = Omit<ComponentProps<typeof Select.ItemIndicator>, "className"> & {
+  className?: string;
+};
+/**
+ * The selected mark, on the **trailing** edge of its item.
+ *
+ * The row is `[leading] [label] [gap] [check]`, which is the design's own — the
+ * check belongs after the value, where the eye already is, and it is what keeps
+ * the row honest in two ways that are easy to lose by reordering the JSX:
+ *
+ * - every row's label starts in the same column, because an unselected row has no
+ *   indicator at all and a leading one would indent only the selected row;
+ * - Base UI aligns the popup so the selected item's *text* sits over the
+ *   trigger's value text (native `<select>`, and the design's own overlap). A
+ *   leading indicator makes that text column 24px wider than the trigger's, so the
+ *   whole popup lands that far to the left of its anchor.
+ *
+ * `ml-auto` states the position in the indicator rather than relying on a sibling
+ * growing, so a row without a label still keeps its mark on the trailing edge.
+ */
+export declare function SelectItemIndicator({ className, ...props }: SelectItemIndicatorProps): import("react").JSX.Element;
+export type SelectItemTextProps = Omit<ComponentProps<typeof Select.ItemText>, "className"> & {
+  className?: string;
+};
+/**
+ * The label, which takes the row's free space so the trailing indicator is pushed
+ * against the far edge — the `Expanded` of the Flutter row, and what lets a long
+ * label truncate instead of moving the check out of the popup.
+ */
+export declare function SelectItemText({ className, ...props }: SelectItemTextProps): import("react").JSX.Element;
+export type SelectGroupProps = Omit<ComponentProps<typeof Select.Group>, "className"> & {
+  className?: string;
+};
+export declare function SelectGroup({ className, ...props }: SelectGroupProps): import("react").JSX.Element;
+export type SelectGroupLabelProps = Omit<ComponentProps<typeof Select.GroupLabel>, "className"> & {
+  className?: string;
+};
+export declare function SelectGroupLabel({ className, ...props }: SelectGroupLabelProps): import("react").JSX.Element;
+export type SelectSeparatorProps = Omit<ComponentProps<typeof Select.Separator>, "className"> & {
+  className?: string;
+};
+export declare function SelectSeparator({ className, ...props }: SelectSeparatorProps): import("react").JSX.Element;
+export type SelectLabelProps = Omit<ComponentProps<typeof Select.Label>, "className"> & {
+  className?: string;
+};
+export declare function SelectLabel({ className, ...props }: SelectLabelProps): import("react").JSX.Element;
+//#endregion
+export { Select$1 as Select };
+//# sourceMappingURL=select.d.ts.map