@stll/ui 0.0.1-placeholder.0 → 0.3.0

package/README.md

@@ -0,0 +1,84 @@
+# @stll/ui
+
+Stella's design system: the React primitives the product surfaces are built
+from, the dockable inspector pane, and the Tailwind v4 theme they are styled
+with.
+
+The package is self-contained by construction. It imports no application
+module, no path alias, and no other workspace package, so every component can
+be rendered and tested without a surrounding application — and a change to one
+cannot reach into product code by accident. Lint enforces that boundary; the
+export map below is what "part of the design system" means.
+
+Peer dependencies: `react`, `react-dom`, `@base-ui/react`, `tailwindcss` (v4).
+
+## Import
+
+Every module has its own subpath, and the package declares `sideEffects: false`,
+so a bundler keeps only what is imported:
+
+```tsx
+import { Button } from "@stll/ui/button";
+import { Dialog, DialogPopup } from "@stll/ui/dialog";
+import { Inspector, InspectorDock } from "@stll/ui/inspector";
+import { cn } from "@stll/ui/utils";
+```
+
+One flat subpath per module: `@stll/ui/<name>` for components, hooks, and
+helpers alike. `@stll/ui` re-exports all of them under one specifier for
+convenience; the subpaths are the real surface, and in-repo code uses those.
+
+### Deprecated grouped subpaths
+
+`@stll/ui/components/<name>`, `@stll/ui/hooks/<name>`, and
+`@stll/ui/lib/<name>` still resolve to the same modules and are kept for one
+minor. They will be removed after that; the export guard checks that both
+spellings land on the same module for as long as they both exist.
+
+## Styles
+
+No compiled CSS ships. The components carry Tailwind class names, so the
+Tailwind build stays with the application that uses them:
+
+```css
+@import "tailwindcss";
+@import "@stll/ui/theme.css";
+@source "../node_modules/@stll/ui/dist";
+```
+
+`theme.css` carries the `@theme` token map, the palettes, the base layer, and
+the custom utilities. The `@source` line is what makes Tailwind scan the
+shipped components for the utilities they use — node_modules is outside its
+default source detection.
+
+`theme.css` is the only stylesheet the package exports. Each application owns
+its own Tailwind entry (`apps/web/src/styles/app.css`,
+`apps/desktop/src/mainview/index.css`, `apps/playground/src/styles.css`), which
+is where the source globs for that application belong.
+
+## Layout direction
+
+The components are bidirectional. Use logical properties (`ms-*`, `pe-*`,
+`start-*`) rather than physical ones, and let the slots that render
+caller-supplied values (names, identifiers, filenames) keep their `dir="auto"`
+and bidi isolation.
+
+## Development
+
+```sh
+bun run build       # tsdown, one output module per source module, with .d.ts
+bun run test        # bun test src
+bun run typecheck
+bun run lint
+```
+
+`bun scripts/check-published-exports.ts packages/ui` (from the repository root)
+runs the publish path end to end: build, `prepare-publish`, `bun pm pack`, then
+resolves and imports every declared subpath from the built `dist`.
+
+This package is published, so a change here needs a changeset:
+
+```sh
+bun changeset            # anything a consumer of the package can observe
+bun changeset --empty    # internal refactor, no change to the public surface
+```

package/dist/components/accordion.d.ts

@@ -0,0 +1,8 @@
+import { Accordion as Accordion$1 } from "@base-ui/react/accordion";
+//#region src/components/accordion.d.ts
+declare const Accordion: <Value = unknown>(props: Accordion$1.Root.Props<Value>) => import("react").JSX.Element;
+declare const AccordionItem: ({ className, ...props }: Accordion$1.Item.Props) => import("react").JSX.Element;
+declare const AccordionTrigger: ({ className, children, ...props }: Accordion$1.Trigger.Props) => import("react").JSX.Element;
+declare const AccordionPanel: ({ className, children, ...props }: Accordion$1.Panel.Props) => import("react").JSX.Element;
+//#endregion
+export { Accordion, AccordionPanel as AccordionContent, AccordionPanel, AccordionItem, AccordionTrigger };

package/dist/components/accordion.js

@@ -0,0 +1,38 @@
+"use client";
+import { cn } from "../lib/utils.js";
+import { Accordion as Accordion$1 } from "@base-ui/react/accordion";
+import { ChevronDownIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/accordion.tsx
+const Accordion = (props) => /* @__PURE__ */ jsx(Accordion$1.Root, {
+	"data-slot": "accordion",
+	...props
+});
+const AccordionItem = ({ className, ...props }) => /* @__PURE__ */ jsx(Accordion$1.Item, {
+	className: cn("border-b last:border-b-0", className),
+	"data-slot": "accordion-item",
+	...props
+});
+const AccordionTrigger = ({ className, children, ...props }) => /* @__PURE__ */ jsx(Accordion$1.Header, {
+	className: "flex",
+	children: /* @__PURE__ */ jsxs(Accordion$1.Trigger, {
+		className: cn("focus-visible:ring-ring flex flex-1 cursor-pointer items-start justify-between gap-4 rounded-md py-4 text-start text-sm font-medium outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-64 data-panel-open:*:data-[slot=accordion-indicator]:rotate-180", className),
+		"data-slot": "accordion-trigger",
+		...props,
+		children: [children, /* @__PURE__ */ jsx(ChevronDownIcon, {
+			className: "pointer-events-none size-4 shrink-0 translate-y-0.5 opacity-80 transition-transform duration-200 ease-in-out",
+			"data-slot": "accordion-indicator"
+		})]
+	})
+});
+const AccordionPanel = ({ className, children, ...props }) => /* @__PURE__ */ jsx(Accordion$1.Panel, {
+	className: "text-muted-foreground h-(--accordion-panel-height) overflow-hidden text-sm transition-[height] duration-200 ease-in-out data-ending-style:h-0 data-starting-style:h-0",
+	"data-slot": "accordion-panel",
+	...props,
+	children: /* @__PURE__ */ jsx("div", {
+		className: cn("pt-0 pb-4", className),
+		children
+	})
+});
+//#endregion
+export { Accordion, AccordionPanel as AccordionContent, AccordionPanel, AccordionItem, AccordionTrigger };

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

@@ -0,0 +1,32 @@
+import { OverlayLayer } from "../lib/overlay-layer.js";
+import { AlertDialog as AlertDialog$1 } from "@base-ui/react/alert-dialog";
+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").AlertDialogPortalProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare function AlertDialogTrigger({ tooltip, ...props }: AlertDialog$1.Trigger.Props & {
+  tooltip?: React$1.ReactNode;
+}): React$1.JSX.Element;
+declare const AlertDialogBackdrop: ({ className, layer, ...props }: AlertDialog$1.Backdrop.Props & {
+  layer?: OverlayLayer;
+}) => React$1.JSX.Element;
+declare const AlertDialogViewport: ({ className, layer, ...props }: AlertDialog$1.Viewport.Props & {
+  layer?: OverlayLayer;
+}) => React$1.JSX.Element;
+declare const AlertDialogPopup: ({ className, bottomStickOnMobile, layer, ...props }: AlertDialog$1.Popup.Props & {
+  bottomStickOnMobile?: boolean;
+  layer?: OverlayLayer;
+}) => React$1.JSX.Element;
+declare const AlertDialogHeader: ({ className, ...props }: React$1.ComponentProps<"div">) => React$1.JSX.Element;
+declare const AlertDialogFooter: ({ className, variant, ...props }: React$1.ComponentProps<"div"> & {
+  variant?: "default" | "bare";
+}) => React$1.JSX.Element;
+declare const AlertDialogPanel: ({ className, ...props }: React$1.ComponentProps<"div">) => React$1.JSX.Element;
+declare const AlertDialogTitle: ({ className, ...props }: AlertDialog$1.Title.Props) => React$1.JSX.Element;
+declare const AlertDialogDescription: ({ className, ...props }: AlertDialog$1.Description.Props) => React$1.JSX.Element;
+declare function AlertDialogClose({ tooltip, ...props }: AlertDialog$1.Close.Props & {
+  tooltip?: React$1.ReactNode;
+}): React$1.JSX.Element;
+//#endregion
+export { AlertDialog, AlertDialogBackdrop, AlertDialogBackdrop as AlertDialogOverlay, AlertDialogClose, AlertDialogPopup as AlertDialogContent, AlertDialogPopup, AlertDialogCreateHandle, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogPanel, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertDialogViewport };

package/dist/components/alert-dialog.js

@@ -0,0 +1,75 @@
+"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, jsxs } from "react/jsx-runtime";
+import { AlertDialog as AlertDialog$1 } from "@base-ui/react/alert-dialog";
+//#region src/components/alert-dialog.tsx
+const AlertDialogCreateHandle = AlertDialog$1.createHandle;
+const AlertDialog = AlertDialog$1.Root;
+const AlertDialogPortal = AlertDialog$1.Portal;
+function AlertDialogTrigger({ tooltip, ...props }) {
+	return renderTooltipTrigger({
+		tooltip: tooltip ?? props["aria-label"] ?? props.title,
+		trigger: /* @__PURE__ */ jsx(AlertDialog$1.Trigger, {
+			"data-slot": "alert-dialog-trigger",
+			nativeButton: false,
+			...props
+		})
+	});
+}
+const AlertDialogBackdrop = ({ className, layer = "default", ...props }) => /* @__PURE__ */ jsx(AlertDialog$1.Backdrop, {
+	className: cn("fixed inset-0 bg-black/32 backdrop-blur-sm transition-opacity duration-200 ease-out data-ending-style:opacity-0 data-starting-style:opacity-0", OVERLAY_LAYER_CLASS_NAMES[layer], className),
+	"data-slot": "alert-dialog-backdrop",
+	...props
+});
+const AlertDialogViewport = ({ className, layer = "default", ...props }) => /* @__PURE__ */ jsx(AlertDialog$1.Viewport, {
+	className: cn("fixed inset-0 grid grid-rows-[1fr_auto_3fr] justify-items-center p-4", OVERLAY_LAYER_CLASS_NAMES[layer], className),
+	"data-slot": "alert-dialog-viewport",
+	...props
+});
+const AlertDialogPopup = ({ className, bottomStickOnMobile = true, layer = "default", ...props }) => /* @__PURE__ */ jsxs(AlertDialogPortal, { children: [/* @__PURE__ */ jsx(AlertDialogBackdrop, { layer }), /* @__PURE__ */ jsx(AlertDialogViewport, {
+	className: cn(bottomStickOnMobile && "max-sm:grid-rows-[1fr_auto] max-sm:p-0 max-sm:pt-12"),
+	layer,
+	children: /* @__PURE__ */ jsx(AlertDialog$1.Popup, {
+		className: cn("bg-popover text-popover-foreground relative row-start-2 flex max-h-full min-h-0 w-full max-w-lg min-w-0 -translate-y-[calc(1.25rem*var(--nested-dialogs))] scale-[calc(1-0.1*var(--nested-dialogs))] flex-col rounded-2xl border opacity-[calc(1-0.1*var(--nested-dialogs))] shadow-lg/5 transition-[scale,opacity,translate] duration-200 ease-in-out will-change-transform not-dark:bg-clip-padding before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-2xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] data-ending-style:scale-98 data-ending-style:opacity-0 data-nested:data-ending-style:translate-y-8 data-nested-dialog-open:origin-top data-starting-style:scale-98 data-starting-style:opacity-0 data-nested:data-starting-style:translate-y-8 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]", bottomStickOnMobile && "max-sm:max-w-none max-sm:rounded-none max-sm:border-x-0 max-sm:border-t max-sm:border-b-0 max-sm:opacity-[calc(1-min(var(--nested-dialogs),1))] max-sm:before:hidden max-sm:before:rounded-none max-sm:data-ending-style:translate-y-4 max-sm:data-starting-style:translate-y-4", className),
+		"data-slot": "alert-dialog-popup",
+		...props
+	})
+})] });
+const AlertDialogHeader = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
+	className: cn("flex flex-col gap-2 p-6 text-center in-[[data-slot=alert-dialog-popup]:has([data-slot=alert-dialog-panel])]:pb-3 max-sm:pb-4 sm:text-start", className),
+	"data-slot": "alert-dialog-header",
+	...props
+});
+const AlertDialogFooter = ({ className, variant = "default", ...props }) => /* @__PURE__ */ jsx("div", {
+	className: cn("flex flex-col-reverse gap-2 px-6 sm:flex-row sm:justify-end sm:rounded-b-[calc(var(--radius-2xl)-1px)]", variant === "default" && "bg-muted/72 border-t py-4", variant === "bare" && "pb-6", className),
+	"data-slot": "alert-dialog-footer",
+	...props
+});
+const AlertDialogPanel = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
+	className: cn("px-6 pt-1 pb-6 in-[[data-slot=alert-dialog-popup]:has([data-slot=alert-dialog-footer])]:pb-4", className),
+	"data-slot": "alert-dialog-panel",
+	...props
+});
+const AlertDialogTitle = ({ className, ...props }) => /* @__PURE__ */ jsx(AlertDialog$1.Title, {
+	className: cn("font-heading text-xl leading-none font-semibold", className),
+	"data-slot": "alert-dialog-title",
+	...props
+});
+const AlertDialogDescription = ({ className, ...props }) => /* @__PURE__ */ jsx(AlertDialog$1.Description, {
+	className: cn("text-muted-foreground text-sm", className),
+	"data-slot": "alert-dialog-description",
+	...props
+});
+function AlertDialogClose({ tooltip, ...props }) {
+	return renderTooltipTrigger({
+		tooltip: tooltip ?? props["aria-label"] ?? props.title,
+		trigger: /* @__PURE__ */ jsx(AlertDialog$1.Close, {
+			"data-slot": "alert-dialog-close",
+			...props
+		})
+	});
+}
+//#endregion
+export { AlertDialog, AlertDialogBackdrop, AlertDialogBackdrop as AlertDialogOverlay, AlertDialogClose, AlertDialogPopup as AlertDialogContent, AlertDialogPopup, AlertDialogCreateHandle, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogPanel, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertDialogViewport };

package/dist/components/avatar.d.ts

@@ -0,0 +1,7 @@
+import { Avatar as Avatar$1 } from "@base-ui/react/avatar";
+//#region src/components/avatar.d.ts
+declare const Avatar: ({ className, ...props }: Avatar$1.Root.Props) => import("react").JSX.Element;
+declare const AvatarImage: ({ className, ...props }: Avatar$1.Image.Props) => import("react").JSX.Element;
+declare const AvatarFallback: ({ className, ...props }: Avatar$1.Fallback.Props) => import("react").JSX.Element;
+//#endregion
+export { Avatar, AvatarFallback, AvatarImage };

package/dist/components/avatar.js

@@ -0,0 +1,22 @@
+"use client";
+import { cn } from "../lib/utils.js";
+import { jsx } from "react/jsx-runtime";
+import { Avatar as Avatar$1 } from "@base-ui/react/avatar";
+//#region src/components/avatar.tsx
+const Avatar = ({ className, ...props }) => /* @__PURE__ */ jsx(Avatar$1.Root, {
+	className: cn("bg-background inline-flex size-8 shrink-0 items-center justify-center overflow-hidden rounded-full align-middle text-xs font-medium select-none", className),
+	"data-slot": "avatar",
+	...props
+});
+const AvatarImage = ({ className, ...props }) => /* @__PURE__ */ jsx(Avatar$1.Image, {
+	className: cn("size-full object-cover", className),
+	"data-slot": "avatar-image",
+	...props
+});
+const AvatarFallback = ({ className, ...props }) => /* @__PURE__ */ jsx(Avatar$1.Fallback, {
+	className: cn("bg-muted flex size-full items-center justify-center rounded-full", className),
+	"data-slot": "avatar-fallback",
+	...props
+});
+//#endregion
+export { Avatar, AvatarFallback, AvatarImage };

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

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

package/dist/components/bidi-text.js

@@ -0,0 +1,38 @@
+"use client";
+import { cn } from "../lib/utils.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/bidi-text.tsx
+const BidiText = (props) => {
+	if (props.as === "span") {
+		const { as: _as, className, direction = "auto", ...rest } = props;
+		return /* @__PURE__ */ jsx("span", {
+			className: cn("[unicode-bidi:isolate]", className),
+			dir: direction,
+			...rest
+		});
+	}
+	if (props.as === "div") {
+		const { as: _as, className, direction = "auto", ...rest } = props;
+		return /* @__PURE__ */ jsx("div", {
+			className: cn("[unicode-bidi:isolate]", className),
+			dir: direction,
+			...rest
+		});
+	}
+	if (props.as === "p") {
+		const { as: _as, className, direction = "auto", ...rest } = props;
+		return /* @__PURE__ */ jsx("p", {
+			className: cn("[unicode-bidi:isolate]", className),
+			dir: direction,
+			...rest
+		});
+	}
+	const { as: _as, direction = "auto", ...rest } = props;
+	return /* @__PURE__ */ jsx("bdi", {
+		dir: direction,
+		...rest
+	});
+};
+const UserText = BidiText;
+//#endregion
+export { BidiText, UserText };

package/dist/components/brand-icons.d.ts

@@ -0,0 +1,7 @@
+import * as React$1 from "react";
+//#region src/components/brand-icons.d.ts
+type BrandIconProps = React$1.ComponentProps<"svg">;
+declare const DiscordLogoIcon: (props: BrandIconProps) => React$1.JSX.Element;
+declare const GitHubLogoIcon: (props: BrandIconProps) => React$1.JSX.Element;
+//#endregion
+export { DiscordLogoIcon, GitHubLogoIcon };

package/dist/components/brand-icons.js

@@ -0,0 +1,18 @@
+import { jsx } from "react/jsx-runtime";
+//#region src/components/brand-icons.tsx
+const DiscordLogoIcon = (props) => /* @__PURE__ */ jsx("svg", {
+	"aria-hidden": "true",
+	fill: "currentColor",
+	viewBox: "0 0 126.644 96",
+	...props,
+	children: /* @__PURE__ */ jsx("path", { d: "M81.15,0c-1.2376,2.1973-2.3489,4.4704-3.3591,6.794-9.5975-1.4396-19.3718-1.4396-28.9945,0-.985-2.3236-2.1216-4.5967-3.3591-6.794-9.0166,1.5407-17.8059,4.2431-26.1405,8.0568C2.779,32.5304-1.6914,56.3725.5312,79.8863c9.6732,7.1476,20.5083,12.603,32.0505,16.0884,2.6014-3.4854,4.8998-7.1981,6.8698-11.0623-3.738-1.3891-7.3497-3.1318-10.8098-5.1523.9092-.6567,1.7932-1.3386,2.6519-1.9953,20.281,9.547,43.7696,9.547,64.0758,0,.8587.7072,1.7427,1.3891,2.6519,1.9953-3.4601,2.0457-7.0718,3.7632-10.835,5.1776,1.97,3.8642,4.2683,7.5769,6.8698,11.0623,11.5419-3.4854,22.3769-8.9156,32.0509-16.0631,2.626-27.2771-4.496-50.9172-18.817-71.8548C98.9811,4.2684,90.1918,1.5659,81.1752.0505l-.0252-.0505ZM42.2802,65.4144c-6.2383,0-11.4159-5.6575-11.4159-12.6535s4.9755-12.6788,11.3907-12.6788,11.5169,5.708,11.4159,12.6788c-.101,6.9708-5.026,12.6535-11.3907,12.6535ZM84.3576,65.4144c-6.2637,0-11.3907-5.6575-11.3907-12.6535s4.9755-12.6788,11.3907-12.6788,11.4917,5.708,11.3906,12.6788c-.101,6.9708-5.026,12.6535-11.3906,12.6535Z" })
+});
+const GitHubLogoIcon = (props) => /* @__PURE__ */ jsx("svg", {
+	"aria-hidden": "true",
+	fill: "currentColor",
+	viewBox: "0 0 16 16",
+	...props,
+	children: /* @__PURE__ */ jsx("path", { d: "M6.766 11.328c-2.063-.25-3.516-1.734-3.516-3.656 0-.781.281-1.625.75-2.188-.203-.515-.172-1.609.063-2.062.625-.078 1.468.25 1.968.703.594-.187 1.219-.281 1.985-.281.765 0 1.39.094 1.953.265.484-.437 1.344-.765 1.969-.687.218.422.25 1.515.046 2.047.5.593.766 1.39.766 2.203 0 1.922-1.453 3.375-3.547 3.64.531.344.89 1.094.89 1.954v1.625c0 .468.391.734.86.547C13.781 14.359 16 11.53 16 8.03 16 3.61 12.406 0 7.984 0 3.563 0 0 3.61 0 8.031a7.88 7.88 0 0 0 5.172 7.422c.422.156.828-.125.828-.547v-1.25c-.219.094-.5.156-.75.156-1.031 0-1.64-.562-2.078-1.609-.172-.422-.36-.672-.719-.719-.187-.015-.25-.093-.25-.187 0-.188.313-.328.625-.328.453 0 .844.281 1.25.86.313.452.64.655 1.031.655s.641-.14 1-.5c.266-.265.47-.5.657-.656" })
+});
+//#endregion
+export { DiscordLogoIcon, GitHubLogoIcon };

package/dist/components/breadcrumb.d.ts

@@ -0,0 +1,12 @@
+import { useRender } from "@base-ui/react/use-render";
+import * as React$1 from "react";
+//#region src/components/breadcrumb.d.ts
+declare const Breadcrumb: ({ ...props }: React$1.ComponentProps<"nav">) => React$1.JSX.Element;
+declare const BreadcrumbList: ({ className, ...props }: React$1.ComponentProps<"ol">) => React$1.JSX.Element;
+declare const BreadcrumbItem: ({ className, ...props }: React$1.ComponentProps<"li">) => React$1.JSX.Element;
+declare function BreadcrumbLink({ className, render, ...props }: useRender.ComponentProps<"a">): React$1.ReactElement<unknown, string | React$1.JSXElementConstructor<any>>;
+declare const BreadcrumbPage: ({ className, ...props }: React$1.ComponentProps<"span">) => React$1.JSX.Element;
+declare const BreadcrumbSeparator: ({ children, className, ...props }: React$1.ComponentProps<"li">) => React$1.JSX.Element;
+declare const BreadcrumbEllipsis: ({ className, ...props }: React$1.ComponentProps<"span">) => React$1.JSX.Element;
+//#endregion
+export { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator };

package/dist/components/breadcrumb.js

@@ -0,0 +1,61 @@
+"use client";
+import { cn } from "../lib/utils.js";
+import { DirectionalIcon } from "./directional-icon.js";
+import { ChevronRight, MoreHorizontal } 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/breadcrumb.tsx
+const Breadcrumb = ({ ...props }) => /* @__PURE__ */ jsx("nav", {
+	"aria-label": "Breadcrumb",
+	"data-slot": "breadcrumb",
+	...props
+});
+const BreadcrumbList = ({ className, ...props }) => /* @__PURE__ */ jsx("ol", {
+	className: cn("text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm wrap-break-word sm:gap-2.5", className),
+	"data-slot": "breadcrumb-list",
+	...props
+});
+const BreadcrumbItem = ({ className, ...props }) => /* @__PURE__ */ jsx("li", {
+	className: cn("inline-flex items-center gap-1.5", className),
+	"data-slot": "breadcrumb-item",
+	...props
+});
+function BreadcrumbLink({ className, render, ...props }) {
+	const defaultProps = {
+		className: cn("hover:text-foreground transition-colors", className),
+		"data-slot": "breadcrumb-link"
+	};
+	return useRender({
+		defaultTagName: "a",
+		props: mergeProps(defaultProps, props),
+		render
+	});
+}
+const BreadcrumbPage = ({ className, ...props }) => /* @__PURE__ */ jsx("span", {
+	"aria-current": "page",
+	className: cn("text-foreground font-normal", className),
+	"data-slot": "breadcrumb-page",
+	...props
+});
+const BreadcrumbSeparator = ({ children, className, ...props }) => /* @__PURE__ */ jsx("li", {
+	"aria-hidden": "true",
+	className: cn("opacity-80 [&>svg]:size-4", className),
+	"data-slot": "breadcrumb-separator",
+	role: "presentation",
+	...props,
+	children: children ?? /* @__PURE__ */ jsx(DirectionalIcon, { icon: ChevronRight })
+});
+const BreadcrumbEllipsis = ({ className, ...props }) => /* @__PURE__ */ jsxs("span", {
+	"aria-hidden": "true",
+	className,
+	"data-slot": "breadcrumb-ellipsis",
+	role: "presentation",
+	...props,
+	children: [/* @__PURE__ */ jsx(MoreHorizontal, { className: "size-4" }), /* @__PURE__ */ jsx("span", {
+		className: "sr-only",
+		children: "More"
+	})]
+});
+//#endregion
+export { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator };

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

@@ -0,0 +1,17 @@
+//#region src/components/button-variants.d.ts
+/**
+ * Disabled styling for a button that is only `aria-disabled`.
+ *
+ * The `disabled:` utilities below are CSS `:disabled`, which cannot match an
+ * element that carries no native `disabled` attribute, and `pointer-events-none`
+ * is deliberately not repeated: that rule is the reason a disabled button's
+ * tooltip can never open. Matches the treatment `disabled:opacity-64` gives, and
+ * swaps the cursor so the control still reads as unavailable on hover.
+ */
+declare const buttonAccessibleDisabledClass = "cursor-not-allowed opacity-64";
+declare const buttonVariants: (props?: ({
+  size?: "default" | "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/button-variants.js

@@ -0,0 +1,43 @@
+import { cva } from "class-variance-authority";
+//#region src/components/button-variants.tsx
+/**
+* Disabled styling for a button that is only `aria-disabled`.
+*
+* The `disabled:` utilities below are CSS `:disabled`, which cannot match an
+* element that carries no native `disabled` attribute, and `pointer-events-none`
+* is deliberately not repeated: that rule is the reason a disabled button's
+* tooltip can never open. Matches the treatment `disabled:opacity-64` gives, and
+* swaps the cursor so the control still reads as unavailable on hover.
+*/
+const buttonAccessibleDisabledClass = "cursor-not-allowed opacity-64";
+const buttonVariants = cva("focus-visible:ring-ring focus-visible:ring-offset-background relative inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 rounded-lg border text-base font-medium whitespace-nowrap transition-shadow outline-none before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] focus-visible:ring-2 focus-visible:ring-offset-1 disabled:pointer-events-none disabled:opacity-64 sm:text-sm pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 [&_svg]:pointer-events-none [&_svg]:-mx-0.5 [&_svg]:shrink-0 [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4", {
+	defaultVariants: {
+		size: "default",
+		variant: "default"
+	},
+	variants: {
+		size: {
+			default: "h-9 px-[calc(--spacing(3)-1px)] sm:h-8",
+			icon: "size-9 sm:size-8",
+			"icon-lg": "size-10 sm:size-9",
+			"icon-sm": "size-8 sm:size-7",
+			"icon-xl": "size-11 sm:size-10 [&_svg:not([class*='size-'])]:size-5 sm:[&_svg:not([class*='size-'])]:size-4.5",
+			"icon-xs": "size-7 rounded-md before:rounded-[calc(var(--radius-md)-1px)] sm:size-6 not-in-data-[slot=input-group]:[&_svg:not([class*='size-'])]:size-4 sm:not-in-data-[slot=input-group]:[&_svg:not([class*='size-'])]:size-3.5",
+			lg: "h-10 px-[calc(--spacing(3.5)-1px)] sm:h-9",
+			sm: "h-8 gap-1.5 px-[calc(--spacing(2.5)-1px)] sm:h-7",
+			xl: "h-11 px-[calc(--spacing(4)-1px)] text-lg sm:h-10 sm:text-base [&_svg:not([class*='size-'])]:size-5 sm:[&_svg:not([class*='size-'])]:size-4.5",
+			xs: "h-7 gap-1 rounded-md px-[calc(--spacing(2)-1px)] text-sm before:rounded-[calc(var(--radius-md)-1px)] sm:h-6 sm:text-xs [&_svg:not([class*='size-'])]:size-4 sm:[&_svg:not([class*='size-'])]:size-3.5"
+		},
+		variant: {
+			default: "border-primary bg-primary text-primary-foreground shadow-primary/24 [:hover,[data-pressed]]:bg-primary/90 shadow-xs not-disabled:inset-shadow-[0_1px_--theme(--color-white/16%)] [:active,[data-pressed]]:inset-shadow-[0_1px_--theme(--color-black/8%)] [:disabled,:active,[data-pressed]]:shadow-none",
+			destructive: "border-destructive/32 bg-destructive/10 text-destructive-foreground shadow-destructive/8 [:hover,[data-pressed]]:border-destructive/40 [:hover,[data-pressed]]:bg-destructive/14 [:active,[data-pressed]]:bg-destructive/18 shadow-xs not-dark:bg-clip-padding not-disabled:not-active:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] [:disabled,:active,[data-pressed]]:shadow-none",
+			"destructive-outline": "border-input bg-popover text-destructive-foreground dark:bg-input/32 [:hover,[data-pressed]]:border-destructive/32 [:hover,[data-pressed]]:bg-destructive/4 shadow-xs/5 not-dark:bg-clip-padding not-disabled:not-active:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] dark:not-disabled:before:shadow-[0_-1px_--theme(--color-white/2%)] dark:not-disabled:not-active:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/6%)] [:disabled,:active,[data-pressed]]:shadow-none",
+			ghost: "text-foreground data-pressed:bg-accent [:hover,[data-pressed]]:bg-accent border-transparent",
+			link: "border-transparent underline-offset-4 [:hover,[data-pressed]]:underline",
+			outline: "border-input bg-popover text-foreground dark:bg-input/32 [:hover,[data-pressed]]:bg-accent/50 dark:[:hover,[data-pressed]]:bg-input/64 shadow-xs/5 not-dark:bg-clip-padding not-disabled:not-active:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] dark:not-disabled:before:shadow-[0_-1px_--theme(--color-white/2%)] dark:not-disabled:not-active:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/6%)] [:disabled,:active,[data-pressed]]:shadow-none",
+			secondary: "bg-secondary text-secondary-foreground [:active,[data-pressed]]:bg-secondary/80 [:hover,[data-pressed]]:bg-secondary/90 border-transparent"
+		}
+	}
+});
+//#endregion
+export { buttonAccessibleDisabledClass, buttonVariants };

package/dist/components/button.d.ts

@@ -0,0 +1,20 @@
+import { OverlayLayer } from "../lib/overlay-layer.js";
+import { buttonVariants } from "./button-variants.js";
+import { useRender } from "@base-ui/react/use-render";
+import { VariantProps } from "class-variance-authority";
+import * as React$1 from "react";
+//#region src/components/button.d.ts
+type ButtonProps = {
+  variant?: VariantProps<typeof buttonVariants>["variant"];
+  size?: VariantProps<typeof buttonVariants>["size"];
+  loading?: boolean;
+  tooltip?: React$1.ReactNode;
+  /**
+   * Overlay band for the tooltip popup. Needed when the button sits in floating
+   * chrome whose own band would otherwise paint over the popup.
+   */
+  tooltipLayer?: OverlayLayer | undefined;
+} & useRender.ComponentProps<"button">;
+declare function Button({ className, variant, size, render, loading, children, disabled, tooltip, tooltipLayer, ...props }: ButtonProps): React$1.JSX.Element;
+//#endregion
+export { Button };

package/dist/components/button.js

@@ -0,0 +1,53 @@
+"use client";
+import { cn } from "../lib/utils.js";
+import { renderTooltipTrigger } from "./tooltip-trigger-helper.js";
+import { BUTTON_DISPOSITION, blockDisabledActivation, blockDisabledKeyActivation, resolveButtonDisposition } from "../lib/button-disposition.js";
+import { buttonVariants } from "./button-variants.js";
+import { LoaderIcon } from "lucide-react";
+import { Fragment, 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/button.tsx
+function Button({ className, variant, size, render, loading, children, disabled, tooltip, tooltipLayer, ...props }) {
+	const typeValue = render ? void 0 : "button";
+	const tooltipContent = tooltip ?? props["aria-label"] ?? props.title;
+	const disposition = resolveButtonDisposition({
+		disabled,
+		loading,
+		tooltip: tooltipContent
+	});
+	const isAccessibleDisabled = disposition === BUTTON_DISPOSITION.accessibleDisabled;
+	const defaultProps = {
+		children: loading ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(LoaderIcon, { className: "animate-spin" }), children] }) : children,
+		className: cn(buttonVariants({
+			className,
+			size,
+			variant
+		}), isAccessibleDisabled && "cursor-not-allowed opacity-64"),
+		"data-slot": "button",
+		...isAccessibleDisabled ? {
+			"aria-disabled": true,
+			"data-disabled": "",
+			tabIndex: 0
+		} : { disabled: disposition === BUTTON_DISPOSITION.nativeDisabled },
+		type: typeValue
+	};
+	const button = useRender({
+		defaultTagName: "button",
+		props: isAccessibleDisabled ? mergeProps(defaultProps, props, {
+			onClick: blockDisabledActivation,
+			onKeyDown: blockDisabledKeyActivation,
+			onKeyUp: blockDisabledKeyActivation,
+			onMouseDown: blockDisabledActivation,
+			onPointerDown: blockDisabledActivation
+		}) : mergeProps(defaultProps, props),
+		render
+	});
+	return renderTooltipTrigger({
+		tooltip: tooltipContent,
+		trigger: button,
+		...tooltipLayer === void 0 ? {} : { layer: tooltipLayer }
+	});
+}
+//#endregion
+export { Button };

package/dist/components/checkbox.d.ts

@@ -0,0 +1,5 @@
+import { Checkbox as Checkbox$1 } from "@base-ui/react/checkbox";
+//#region src/components/checkbox.d.ts
+declare const Checkbox: ({ className, ...props }: Checkbox$1.Root.Props) => import("react").JSX.Element;
+//#endregion
+export { Checkbox };

package/dist/components/checkbox.js

@@ -0,0 +1,44 @@
+"use client";
+import { cn } from "../lib/utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Checkbox as Checkbox$1 } from "@base-ui/react/checkbox";
+//#region src/components/checkbox.tsx
+const Checkbox = ({ className, ...props }) => /* @__PURE__ */ jsx(Checkbox$1.Root, {
+	className: cn("border-input bg-background ring-ring focus-visible:ring-offset-background aria-invalid:border-destructive/36 focus-visible:aria-invalid:border-destructive/64 focus-visible:aria-invalid:ring-destructive/48 dark:not-data-checked:bg-input/32 dark:aria-invalid:ring-destructive/24 relative inline-flex size-4.5 shrink-0 items-center justify-center rounded-[4px] border shadow-xs/5 transition-shadow outline-none not-dark:bg-clip-padding before:pointer-events-none before:absolute before:inset-0 before:rounded-[3px] not-data-disabled:not-data-checked:not-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] focus-visible:ring-2 focus-visible:ring-offset-1 data-disabled:opacity-64 sm:size-4 dark:not-data-disabled:not-data-checked:not-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)] [[data-disabled],[data-checked],[aria-invalid]]:shadow-none", className),
+	"data-slot": "checkbox",
+	...props,
+	children: /* @__PURE__ */ jsx(Checkbox$1.Indicator, {
+		className: "text-primary-foreground data-checked:bg-primary data-indeterminate:text-foreground absolute -inset-px flex items-center justify-center rounded-[4px] data-unchecked:hidden",
+		"data-slot": "checkbox-indicator",
+		render: (indicatorProps, state) => /* @__PURE__ */ jsx("span", {
+			...indicatorProps,
+			children: state.indeterminate ? /* @__PURE__ */ jsxs("svg", {
+				className: "size-3.5 sm:size-3",
+				fill: "none",
+				height: "24",
+				stroke: "currentColor",
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				strokeWidth: "3",
+				viewBox: "0 0 24 24",
+				width: "24",
+				xmlns: "http://www.w3.org/2000/svg",
+				children: [/* @__PURE__ */ jsx("title", { children: "Indeterminate" }), /* @__PURE__ */ jsx("path", { d: "M5.252 12h13.496" })]
+			}) : /* @__PURE__ */ jsxs("svg", {
+				className: "size-3.5 sm:size-3",
+				fill: "none",
+				height: "24",
+				stroke: "currentColor",
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				strokeWidth: "3",
+				viewBox: "0 0 24 24",
+				width: "24",
+				xmlns: "http://www.w3.org/2000/svg",
+				children: [/* @__PURE__ */ jsx("title", { children: "Checked" }), /* @__PURE__ */ jsx("path", { d: "M5.252 12.7 10.2 18.63 18.748 5.37" })]
+			})
+		})
+	})
+});
+//#endregion
+export { Checkbox };