@stll/ui 0.0.1-placeholder.0 → 0.3.0

package/dist/components/pagination.js

@@ -0,0 +1,78 @@
+"use client";
+import { cn } from "../lib/utils.js";
+import { DirectionalIcon } from "./directional-icon.js";
+import { buttonVariants } from "./button-variants.js";
+import { ChevronLeftIcon, ChevronRightIcon, MoreHorizontalIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/pagination.tsx
+const Pagination = ({ className, ...props }) => /* @__PURE__ */ jsx("nav", {
+	"aria-label": "Pagination",
+	className: cn("mx-auto flex w-full justify-center", className),
+	"data-slot": "pagination",
+	...props
+});
+const PaginationContent = ({ className, ...props }) => /* @__PURE__ */ jsx("ul", {
+	className: cn("flex flex-row items-center gap-1", className),
+	"data-slot": "pagination-content",
+	...props
+});
+const PaginationItem = ({ ...props }) => /* @__PURE__ */ jsx("li", {
+	"data-slot": "pagination-item",
+	...props
+});
+function PaginationLink({ className, isActive, size = "icon", render, ...props }) {
+	const defaultProps = {
+		"aria-current": isActive ? "page" : void 0,
+		className: render ? className : cn(buttonVariants({
+			size,
+			variant: isActive ? "outline" : "ghost"
+		}), className),
+		"data-active": isActive,
+		"data-slot": "pagination-link"
+	};
+	return useRender({
+		defaultTagName: "a",
+		props: mergeProps(defaultProps, props),
+		render
+	});
+}
+const PaginationPrevious = ({ className, ...props }) => /* @__PURE__ */ jsxs(PaginationLink, {
+	"aria-label": "Go to previous page",
+	className: cn("max-sm:aspect-square max-sm:p-0", className),
+	size: "default",
+	...props,
+	children: [/* @__PURE__ */ jsx(DirectionalIcon, {
+		className: "sm:-ms-1",
+		icon: ChevronLeftIcon
+	}), /* @__PURE__ */ jsx("span", {
+		className: "max-sm:hidden",
+		children: "Previous"
+	})]
+});
+const PaginationNext = ({ className, ...props }) => /* @__PURE__ */ jsxs(PaginationLink, {
+	"aria-label": "Go to next page",
+	className: cn("max-sm:aspect-square max-sm:p-0", className),
+	size: "default",
+	...props,
+	children: [/* @__PURE__ */ jsx("span", {
+		className: "max-sm:hidden",
+		children: "Next"
+	}), /* @__PURE__ */ jsx(DirectionalIcon, {
+		className: "sm:-me-1",
+		icon: ChevronRightIcon
+	})]
+});
+const PaginationEllipsis = ({ className, ...props }) => /* @__PURE__ */ jsxs("span", {
+	"aria-hidden": true,
+	className: cn("flex min-w-7 justify-center", className),
+	"data-slot": "pagination-ellipsis",
+	...props,
+	children: [/* @__PURE__ */ jsx(MoreHorizontalIcon, { className: "size-5 sm:size-4" }), /* @__PURE__ */ jsx("span", {
+		className: "sr-only",
+		children: "More pages"
+	})]
+});
+//#endregion
+export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious };

package/dist/components/popover.d.ts

@@ -0,0 +1,34 @@
+import { OverlayLayer } from "../lib/overlay-layer.js";
+import * as React$1 from "react";
+import { ComponentProps } from "react";
+import { Popover as Popover$1 } from "@base-ui/react/popover";
+//#region src/components/popover.d.ts
+declare const PopoverCreateHandle: typeof Popover$1.createHandle;
+declare const Popover: typeof Popover$1.Root;
+declare function PopoverTrigger({ tooltip, ...props }: Popover$1.Trigger.Props & {
+  tooltip?: React$1.ReactNode;
+}): React$1.JSX.Element;
+declare const PopoverPopup: ({ children, className, side, align, sideOffset, alignOffset, tooltipStyle, anchor, layer, ...props }: Popover$1.Popup.Props & {
+  side?: Popover$1.Positioner.Props["side"];
+  align?: Popover$1.Positioner.Props["align"];
+  sideOffset?: Popover$1.Positioner.Props["sideOffset"];
+  alignOffset?: Popover$1.Positioner.Props["alignOffset"];
+  anchor?: Popover$1.Positioner.Props["anchor"];
+  layer?: OverlayLayer;
+  tooltipStyle?: boolean;
+}) => React$1.JSX.Element;
+/**
+ * Popover surface with the content layout baked in: children stack in a vertical
+ * flex container. coss renders popup children inside a separate inner Viewport,
+ * so layout utilities placed on the popup `className` silently miss the content.
+ * This wrapper removes that footgun — `className` styles the surface (e.g.
+ * width), `contentClassName` tweaks the content stack.
+ */
+declare const PopoverPanel: ({ children, contentClassName, ...props }: ComponentProps<typeof PopoverPopup> & {
+  contentClassName?: string;
+}) => React$1.JSX.Element;
+declare const PopoverClose: ({ ...props }: Popover$1.Close.Props) => React$1.JSX.Element;
+declare const PopoverTitle: ({ className, ...props }: Popover$1.Title.Props) => React$1.JSX.Element;
+declare const PopoverDescription: ({ className, ...props }: Popover$1.Description.Props) => React$1.JSX.Element;
+//#endregion
+export { Popover, PopoverClose, PopoverPopup as PopoverContent, PopoverPopup, PopoverCreateHandle, PopoverDescription, PopoverPanel, PopoverTitle, PopoverTrigger };

package/dist/components/popover.js

@@ -0,0 +1,67 @@
+"use client";
+import { cn } from "../lib/utils.js";
+import { OVERLAY_LAYER_CLASS_NAMES } from "../lib/overlay-layer.js";
+import { renderTooltipTrigger } from "./tooltip-trigger-helper.js";
+import { jsx } from "react/jsx-runtime";
+import { Popover as Popover$1 } from "@base-ui/react/popover";
+//#region src/components/popover.tsx
+const PopoverCreateHandle = Popover$1.createHandle;
+const Popover = Popover$1.Root;
+function PopoverTrigger({ tooltip, ...props }) {
+	return renderTooltipTrigger({
+		tooltip: tooltip ?? props["aria-label"] ?? props.title,
+		trigger: /* @__PURE__ */ jsx(Popover$1.Trigger, {
+			"data-slot": "popover-trigger",
+			...props
+		})
+	});
+}
+const PopoverPopup = ({ children, className, side = "bottom", align = "center", sideOffset = 4, alignOffset = 0, tooltipStyle = false, anchor, layer = "default", ...props }) => /* @__PURE__ */ jsx(Popover$1.Portal, { children: /* @__PURE__ */ jsx(Popover$1.Positioner, {
+	align,
+	alignOffset,
+	anchor,
+	className: cn("h-(--positioner-height) w-(--positioner-width) max-w-(--available-width)", OVERLAY_LAYER_CLASS_NAMES[layer]),
+	"data-slot": "popover-positioner",
+	side,
+	sideOffset,
+	children: /* @__PURE__ */ jsx(Popover$1.Popup, {
+		className: cn("bg-popover text-popover-foreground relative flex h-(--popup-height,auto) w-(--popup-width,auto) origin-(--transform-origin) rounded-lg border shadow-lg/5 transition-[width,height,scale,opacity] not-dark:bg-clip-padding before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] data-starting-style:scale-98 data-starting-style:opacity-0 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]", tooltipStyle && "w-fit rounded-md text-xs text-balance shadow-md/5 before:rounded-[calc(var(--radius-md)-1px)]", className),
+		"data-slot": "popover-popup",
+		...props,
+		children: /* @__PURE__ */ jsx(Popover$1.Viewport, {
+			className: cn("relative size-full max-h-(--available-height) overflow-clip px-(--viewport-inline-padding) py-4 outline-none [--viewport-inline-padding:--spacing(4)] **:data-current:w-[calc(var(--popup-width)-2*var(--viewport-inline-padding)-2px)] **:data-current:opacity-100 **:data-current:transition-opacity **:data-current:data-ending-style:opacity-0 data-instant:transition-none **:data-previous:w-[calc(var(--popup-width)-2*var(--viewport-inline-padding)-2px)] **:data-previous:opacity-100 **:data-previous:transition-opacity **:data-previous:data-ending-style:opacity-0 **:data-current:data-starting-style:opacity-0 **:data-previous:data-starting-style:opacity-0", tooltipStyle ? "py-1 [--viewport-inline-padding:--spacing(2)]" : "not-data-transitioning:overflow-y-auto"),
+			"data-slot": "popover-viewport",
+			children
+		})
+	})
+}) });
+/**
+* Popover surface with the content layout baked in: children stack in a vertical
+* flex container. coss renders popup children inside a separate inner Viewport,
+* so layout utilities placed on the popup `className` silently miss the content.
+* This wrapper removes that footgun — `className` styles the surface (e.g.
+* width), `contentClassName` tweaks the content stack.
+*/
+const PopoverPanel = ({ children, contentClassName, ...props }) => /* @__PURE__ */ jsx(PopoverPopup, {
+	...props,
+	children: /* @__PURE__ */ jsx("div", {
+		className: cn("flex flex-col gap-3", contentClassName),
+		children
+	})
+});
+const PopoverClose = ({ ...props }) => /* @__PURE__ */ jsx(Popover$1.Close, {
+	"data-slot": "popover-close",
+	...props
+});
+const PopoverTitle = ({ className, ...props }) => /* @__PURE__ */ jsx(Popover$1.Title, {
+	className: cn("text-lg leading-none font-semibold", className),
+	"data-slot": "popover-title",
+	...props
+});
+const PopoverDescription = ({ className, ...props }) => /* @__PURE__ */ jsx(Popover$1.Description, {
+	className: cn("text-muted-foreground text-sm", className),
+	"data-slot": "popover-description",
+	...props
+});
+//#endregion
+export { Popover, PopoverClose, PopoverPopup as PopoverContent, PopoverPopup, PopoverCreateHandle, PopoverDescription, PopoverPanel, PopoverTitle, PopoverTrigger };

package/dist/components/preview-card.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import { PreviewCard as PreviewCardPrimitive } from "@base-ui/react/preview-card";
+//#region src/components/preview-card.d.ts
+declare const PreviewCard: typeof PreviewCardPrimitive.Root;
+declare const PreviewCardTrigger: ({ ...props }: PreviewCardPrimitive.Trigger.Props) => React.ReactElement;
+declare const PreviewCardPopup: ({ className, children, align, sideOffset, anchor, ...props }: PreviewCardPrimitive.Popup.Props & {
+  align?: PreviewCardPrimitive.Positioner.Props["align"];
+  sideOffset?: PreviewCardPrimitive.Positioner.Props["sideOffset"];
+  anchor?: PreviewCardPrimitive.Positioner.Props["anchor"];
+}) => React.ReactElement;
+//#endregion
+export { PreviewCard as HoverCard, PreviewCard, PreviewCardPopup as HoverCardContent, PreviewCardPopup, PreviewCardTrigger as HoverCardTrigger, PreviewCardTrigger, PreviewCardPrimitive };

package/dist/components/preview-card.js

@@ -0,0 +1,25 @@
+"use client";
+import { cn } from "../lib/utils.js";
+import { jsx } from "react/jsx-runtime";
+import { PreviewCard as PreviewCardPrimitive } from "@base-ui/react/preview-card";
+//#region src/components/preview-card.tsx
+const PreviewCard = PreviewCardPrimitive.Root;
+const PreviewCardTrigger = ({ ...props }) => /* @__PURE__ */ jsx(PreviewCardPrimitive.Trigger, {
+	"data-slot": "preview-card-trigger",
+	...props
+});
+const PreviewCardPopup = ({ className, children, align = "center", sideOffset = 4, anchor, ...props }) => /* @__PURE__ */ jsx(PreviewCardPrimitive.Portal, { children: /* @__PURE__ */ jsx(PreviewCardPrimitive.Positioner, {
+	align,
+	anchor,
+	className: "z-50",
+	"data-slot": "preview-card-positioner",
+	sideOffset,
+	children: /* @__PURE__ */ jsx(PreviewCardPrimitive.Popup, {
+		className: cn("bg-popover text-popover-foreground relative flex w-64 origin-(--transform-origin) rounded-lg border p-4 text-sm text-balance shadow-lg/5 transition-[scale,opacity] not-dark:bg-clip-padding before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] data-ending-style:scale-98 data-ending-style:opacity-0 data-starting-style:scale-98 data-starting-style:opacity-0 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]", className),
+		"data-slot": "preview-card-content",
+		...props,
+		children
+	})
+}) });
+//#endregion
+export { PreviewCard as HoverCard, PreviewCard, PreviewCardPopup as HoverCardContent, PreviewCardPopup, PreviewCardTrigger as HoverCardTrigger, PreviewCardTrigger, PreviewCardPrimitive };

package/dist/components/preview-pane.d.ts

@@ -0,0 +1,23 @@
+import * as React$1 from "react";
+//#region src/components/preview-pane.d.ts
+/**
+ * Side-pane preview pattern: a list of options (menu items, rows) with a
+ * fixed-width pane beside it that previews the highlighted option. The pane
+ * stays mounted so the container never resizes mid-interaction; drive it
+ * from `onMouseEnter`/`onFocus` on the options and render `PreviewPane`
+ * empty (no children) while nothing is highlighted.
+ */
+declare const MenuPreviewLayout: ({ children, preview, className }: React$1.PropsWithChildren<{
+  preview: React$1.ReactNode;
+  className?: string;
+}>) => React$1.JSX.Element;
+type PreviewPaneProps = React$1.ComponentProps<"div"> & {
+  /**
+   * `default` is the side pane described above. `thumbnail` is the same pane
+   * shrunk to sit inline inside a card or list row beside its own label.
+   */
+  size?: "default" | "thumbnail";
+};
+declare const PreviewPane: ({ children, className, size, ...props }: PreviewPaneProps) => React$1.JSX.Element;
+//#endregion
+export { MenuPreviewLayout, PreviewPane };

package/dist/components/preview-pane.js

@@ -0,0 +1,33 @@
+import { cn } from "../lib/utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/preview-pane.tsx
+/**
+* Side-pane preview pattern: a list of options (menu items, rows) with a
+* fixed-width pane beside it that previews the highlighted option. The pane
+* stays mounted so the container never resizes mid-interaction; drive it
+* from `onMouseEnter`/`onFocus` on the options and render `PreviewPane`
+* empty (no children) while nothing is highlighted.
+*/
+const MenuPreviewLayout = ({ children, preview, className }) => /* @__PURE__ */ jsxs("div", {
+	className: cn("flex items-stretch", className),
+	"data-slot": "menu-preview-layout",
+	children: [/* @__PURE__ */ jsx("div", {
+		className: "flex min-w-32 flex-1 flex-col",
+		children
+	}), /* @__PURE__ */ jsx("div", {
+		className: "ms-1 hidden border-s ps-1 sm:block",
+		children: preview
+	})]
+});
+const PreviewPane = ({ children, className, size = "default", ...props }) => /* @__PURE__ */ jsx("div", {
+	className: cn("pointer-events-none select-none", size === "thumbnail" ? "w-32" : "w-64 p-2", className),
+	"data-slot": "preview-pane",
+	...props,
+	children: /* @__PURE__ */ jsx("div", {
+		"aria-hidden": true,
+		className: cn("bg-muted/40 overflow-hidden rounded-md border", size === "thumbnail" ? "h-20 p-1.5" : "h-36 p-2"),
+		children
+	})
+});
+//#endregion
+export { MenuPreviewLayout, PreviewPane };

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

@@ -0,0 +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 & {
+  scrollFade?: boolean;
+  /**
+   * Extra classes applied to both scrollbars, on top of their default
+   * styling — the escape hatch for a consumer whose scrollbar must win a
+   * stacking fight against a sibling with its own z-index (e.g. a floating
+   * composer veil docked over the scroll area). Omit for the default
+   * (unelevated) overlay-thumb treatment.
+   */
+  scrollbarClassName?: string;
+  scrollbarGutter?: boolean;
+  viewportRef?: Ref<HTMLDivElement>;
+}) => import("react").JSX.Element;
+declare const ScrollBar: ({ className, orientation, ...props }: ScrollArea$1.Scrollbar.Props) => import("react").JSX.Element;
+//#endregion
+export { ScrollArea, ScrollBar };

package/dist/components/scroll-area.js

@@ -0,0 +1,38 @@
+"use client";
+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, {
+	className: cn("size-full min-h-0", className),
+	...props,
+	children: [
+		/* @__PURE__ */ jsx(ScrollArea$1.Viewport, {
+			ref: viewportRef,
+			className: cn("transition-shadows focus-visible:ring-ring focus-visible:ring-offset-background h-full overscroll-contain rounded-[inherit] 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"),
+			"data-slot": "scroll-area-viewport",
+			children
+		}),
+		/* @__PURE__ */ jsx(ScrollBar, {
+			className: scrollbarClassName,
+			orientation: "vertical"
+		}),
+		/* @__PURE__ */ jsx(ScrollBar, {
+			className: scrollbarClassName,
+			orientation: "horizontal"
+		}),
+		/* @__PURE__ */ jsx(ScrollArea$1.Corner, { "data-slot": "scroll-area-corner" })
+	]
+});
+const ScrollBar = ({ className, orientation = "vertical", ...props }) => /* @__PURE__ */ jsx(ScrollArea$1.Scrollbar, {
+	className: cn("m-1 flex opacity-0 transition-opacity delay-300 data-hovering:opacity-100 data-hovering:delay-0 data-hovering:duration-100 data-scrolling:opacity-100 data-scrolling:delay-0 data-scrolling:duration-100 data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:flex-col data-[orientation=vertical]:w-1.5", className),
+	"data-slot": "scroll-area-scrollbar",
+	orientation,
+	...props,
+	children: /* @__PURE__ */ jsx(ScrollArea$1.Thumb, {
+		className: "bg-foreground/20 relative flex-1 rounded-full",
+		"data-slot": "scroll-area-thumb"
+	})
+});
+//#endregion
+export { ScrollArea, ScrollBar };

package/dist/components/scroll-to-top.d.ts

@@ -0,0 +1,12 @@
+import { RefObject } from "react";
+//#region src/components/scroll-to-top.d.ts
+type ScrollToTopProps = {
+  scrollContainerRef: RefObject<HTMLElement | null>;
+  /** Show once scrollTop exceeds this many px. */
+  threshold?: number;
+  label?: string;
+  className?: string;
+};
+declare const ScrollToTop: ({ scrollContainerRef, threshold, label, className }: ScrollToTopProps) => import("react").JSX.Element;
+//#endregion
+export { ScrollToTop, ScrollToTopProps };

package/dist/components/scroll-to-top.js

@@ -0,0 +1,43 @@
+"use client";
+import { cn } from "../lib/utils.js";
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+//#region src/components/scroll-to-top.tsx
+/**
+* Scroll-to-top affordance — a subtle floating button that fades in once a
+* scroll container is scrolled past a threshold and jumps back to the top
+* (instant, not animated, so it stays snappy on very long documents).
+*/
+const ScrollToTop = ({ scrollContainerRef, threshold = 600, label = "Scroll to top", className }) => {
+	const [visible, setVisible] = useState(false);
+	useEffect(() => {
+		const container = scrollContainerRef.current;
+		if (!container) return;
+		const onScroll = () => setVisible(container.scrollTop > threshold);
+		onScroll();
+		container.addEventListener("scroll", onScroll, { passive: true });
+		return () => container.removeEventListener("scroll", onScroll);
+	}, [scrollContainerRef, threshold]);
+	return /* @__PURE__ */ jsx("button", {
+		"aria-label": label,
+		className: cn("border-border bg-popover/90 text-muted-foreground hover:text-foreground absolute end-6 bottom-6 z-30 flex size-9 items-center justify-center rounded-full border shadow-md backdrop-blur transition-[opacity,transform] duration-200", visible ? "translate-y-0 opacity-100" : "pointer-events-none translate-y-2 opacity-0", className),
+		onClick: () => scrollContainerRef.current?.scrollTo({
+			top: 0,
+			behavior: "instant"
+		}),
+		type: "button",
+		children: /* @__PURE__ */ jsx("svg", {
+			"aria-hidden": true,
+			className: "size-4",
+			fill: "none",
+			stroke: "currentColor",
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			strokeWidth: "2",
+			viewBox: "0 0 24 24",
+			children: /* @__PURE__ */ jsx("path", { d: "m18 15-6-6-6 6" })
+		})
+	});
+};
+//#endregion
+export { ScrollToTop };

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

@@ -0,0 +1,9 @@
+import { InputProps } from "./input.js";
+//#region src/components/secret-input.d.ts
+type SecretInputProps = Omit<InputProps, "type"> & {
+  hideValueLabel: string;
+  showValueLabel: string;
+};
+declare const SecretInput: ({ className, dir, disabled, hideValueLabel, showValueLabel, ...props }: SecretInputProps) => import("react").JSX.Element;
+//#endregion
+export { SecretInput, type SecretInputProps };

package/dist/components/secret-input.js

@@ -0,0 +1,38 @@
+"use client";
+import { cn } from "../lib/utils.js";
+import { Button } from "./button.js";
+import { Input } from "./input.js";
+import { EyeIcon, EyeOffIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+//#region src/components/secret-input.tsx
+const SecretInput = ({ className, dir, disabled, hideValueLabel, showValueLabel, ...props }) => {
+	const [visibility, setVisibility] = useState("concealed");
+	const isRevealed = visibility === "revealed";
+	const label = isRevealed ? hideValueLabel : showValueLabel;
+	return /* @__PURE__ */ jsxs("span", {
+		className: "relative inline-flex w-full",
+		"data-slot": "secret-input",
+		dir: dir ?? "ltr",
+		children: [/* @__PURE__ */ jsx(Input, {
+			className: cn("**:[input]:pe-9", className),
+			disabled,
+			...props,
+			dir: dir ?? "ltr",
+			type: isRevealed ? "text" : "password"
+		}), /* @__PURE__ */ jsx(Button, {
+			"aria-label": label,
+			"aria-pressed": isRevealed,
+			className: "text-muted-foreground hover:text-foreground absolute end-1 top-1/2 z-1 -translate-y-1/2",
+			"data-slot": "secret-input-visibility-toggle",
+			disabled,
+			onClick: () => setVisibility(isRevealed ? "concealed" : "revealed"),
+			size: "icon-xs",
+			type: "button",
+			variant: "ghost",
+			children: isRevealed ? /* @__PURE__ */ jsx(EyeOffIcon, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx(EyeIcon, { "aria-hidden": "true" })
+		})]
+	});
+};
+//#endregion
+export { SecretInput };

package/dist/components/segmented-icon-toggle.d.ts

@@ -0,0 +1,22 @@
+import { ComponentType } from "react";
+//#region src/components/segmented-icon-toggle.d.ts
+type SegmentedIconToggleOption<T extends string> = {
+  value: T;
+  icon: ComponentType<{
+    className?: string;
+  }>;
+  /** Already-translated label; shown as a tooltip and the accessible name. */
+  label: string;
+};
+type SegmentedIconToggleProps<T extends string> = {
+  value: T;
+  options: readonly SegmentedIconToggleOption<T>[];
+  onChange: (value: T) => void;
+  size?: "compact" | "touch";
+};
+/** Compact segmented control of icon buttons (e.g. table row wrap, list
+ * density). One shared shell so every density/mode switch looks and behaves
+ * the same across the app. */
+declare const SegmentedIconToggle: <T extends string>({ value, options, onChange, size }: SegmentedIconToggleProps<T>) => import("react").JSX.Element;
+//#endregion
+export { SegmentedIconToggle };

package/dist/components/segmented-icon-toggle.js

@@ -0,0 +1,30 @@
+"use client";
+import { cn } from "../lib/utils.js";
+import { Tooltip, TooltipContent as TooltipPopup, TooltipTrigger } from "./tooltip.js";
+import { Button } from "./button.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/segmented-icon-toggle.tsx
+/** Compact segmented control of icon buttons (e.g. table row wrap, list
+* density). One shared shell so every density/mode switch looks and behaves
+* the same across the app. */
+const SegmentedIconToggle = ({ value, options, onChange, size = "compact" }) => /* @__PURE__ */ jsx("div", {
+	className: cn("border-border/70 bg-muted/30 inline-flex shrink-0 items-center overflow-hidden rounded-md border p-0.5", size === "touch" ? "h-7 [@media(any-pointer:coarse)]:h-12" : "h-7"),
+	children: options.map((option) => {
+		const Icon = option.icon;
+		const isActive = value === option.value;
+		return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+			render: /* @__PURE__ */ jsx(Button, {
+				"aria-label": option.label,
+				"aria-pressed": isActive,
+				className: cn("text-muted-foreground h-6 min-h-0 w-7 rounded-[4px] p-0", size === "touch" && "[@media(any-pointer:coarse)]:h-11 [@media(any-pointer:coarse)]:min-h-11 [@media(any-pointer:coarse)]:w-11", isActive && "bg-muted text-foreground ring-border/80 hover:bg-muted hover:text-foreground shadow-xs ring-1"),
+				onClick: () => onChange(option.value),
+				size: "icon-xs",
+				type: "button",
+				variant: "ghost"
+			}),
+			children: /* @__PURE__ */ jsx(Icon, { className: "size-3.5" })
+		}), /* @__PURE__ */ jsx(TooltipPopup, { children: option.label })] }, option.value);
+	})
+});
+//#endregion
+export { SegmentedIconToggle };

package/dist/components/select.d.ts

@@ -0,0 +1,25 @@
+import * as React$1 from "react";
+import { Select as Select$1 } from "@base-ui/react/select";
+//#region src/components/select.d.ts
+type SelectItemProps = Select$1.Item.Props & {
+  label?: string;
+};
+declare const Select: <Value, Multiple extends boolean | undefined = false>({ children, itemToStringLabel, ...props }: Select$1.Root.Props<Value, Multiple>) => React$1.JSX.Element;
+declare const SelectTrigger: ({ className, size, children, ...props }: Select$1.Trigger.Props & {
+  size?: "sm" | "default" | "lg";
+}) => React$1.JSX.Element;
+declare const SelectValue: ({ className, children, placeholder, ...props }: Select$1.Value.Props) => React$1.JSX.Element;
+declare const SelectPopup: ({ className, children, side, sideOffset, align, alignOffset, alignItemWithTrigger, collisionAvoidance, ...props }: Select$1.Popup.Props & {
+  side?: Select$1.Positioner.Props["side"];
+  sideOffset?: Select$1.Positioner.Props["sideOffset"];
+  align?: Select$1.Positioner.Props["align"];
+  alignOffset?: Select$1.Positioner.Props["alignOffset"];
+  alignItemWithTrigger?: Select$1.Positioner.Props["alignItemWithTrigger"];
+  collisionAvoidance?: Select$1.Positioner.Props["collisionAvoidance"];
+}) => React$1.JSX.Element;
+declare const SelectItem: ({ className, children, label: _label, ...props }: SelectItemProps) => React$1.JSX.Element;
+declare const SelectSeparator: ({ className, ...props }: Select$1.Separator.Props) => React$1.JSX.Element;
+declare const SelectGroup: (props: Select$1.Group.Props) => React$1.JSX.Element;
+declare const SelectGroupLabel: (props: Select$1.GroupLabel.Props) => React$1.JSX.Element;
+//#endregion
+export { Select, SelectPopup as SelectContent, SelectPopup, SelectGroup, SelectGroupLabel, SelectItem, SelectSeparator, SelectTrigger, SelectValue };