@claralight-design/react 0.0.1

package/dist/ui/button.js

@@ -0,0 +1,104 @@
+"use client";
+import { cn } from "../lib/utils.js";
+import { Squircle } from "../lib/squircle.js";
+import { jsx } from "react/jsx-runtime";
+import { Button } from "@base-ui/react/button";
+import { cva } from "class-variance-authority";
+//#region src/ui/button.tsx
+/**
+* ClaraLight button variants.
+*
+* `secondary` is the default because ClaraLight is a tool-like design
+* language: most buttons in a real screen are neutral glass controls, and the
+* accent should mark one primary action per view, not every button.
+*/
+const buttonVariants = cva([
+	"inline-flex select-none items-center justify-center gap-2",
+	"border font-sans whitespace-nowrap",
+	"[&_svg]:pointer-events-none [&_svg]:shrink-0",
+	"data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed"
+], {
+	variants: {
+		/**
+		* Filled variants use the theme's perceptual hover mix. `ghost` instead
+		* reveals a fill, because lifting nothing is still nothing.
+		*
+		* Disabled behaviour is deliberate and differs per variant: neutral
+		* controls keep their glass layer, and semantic actions keep their
+		* identity — except `danger`, which drops its colour so a destructive
+		* action never reads as available.
+		*/
+		variant: {
+			primary: [
+				"border-outline bg-accent text-on-accent",
+				"hover:bg-accent-hover",
+				"data-[disabled]:text-foreground-disabled"
+			],
+			secondary: [
+				"border-outline bg-floating text-on-floating backdrop-blur-frost",
+				"hover:bg-floating-hover",
+				"data-[disabled]:text-foreground-disabled"
+			],
+			ghost: [
+				"border-transparent bg-transparent text-foreground",
+				"hover:bg-control-highlight",
+				"data-[disabled]:text-foreground-disabled"
+			],
+			danger: [
+				"border-outline bg-danger text-on-danger",
+				"hover:bg-danger-hover",
+				"data-[disabled]:border-transparent data-[disabled]:bg-control",
+				"data-[disabled]:text-foreground-disabled"
+			]
+		},
+		/**
+		* Heights, icon geometry, press travel and label typography come from
+		* theme tokens. Smaller controls travel further in relative terms.
+		*/
+		size: {
+			sm: ["h-control-sm gap-1.5 px-3 text-label", "[&_svg]:size-icon-sm"],
+			md: ["h-control-md gap-2 px-4 text-label", "[&_svg]:size-icon-md"],
+			lg: ["h-control-lg gap-2 px-4 text-button", "[&_svg]:size-icon-lg"]
+		}
+	},
+	defaultVariants: {
+		variant: "secondary",
+		size: "lg"
+	}
+});
+const pressScales = {
+	sm: "[--cl-press-scale:var(--cl-press-scale-sm)]",
+	md: "[--cl-press-scale:var(--cl-press-scale-md)]",
+	lg: "[--cl-press-scale:var(--cl-press-scale-lg)]"
+};
+/**
+* A ClaraLight capsule button.
+*
+* Wraps Base UI's `Button` rather than rendering a bare `<button>`: that gives
+* the `render` prop for polymorphism (rendering an `<a>` while keeping button
+* semantics), and correct disabled behaviour for non-native elements, which a
+* plain `disabled` attribute cannot express.
+*
+* @example
+* <Button variant="primary">Upload</Button>
+* <Button render={<a href="/docs" />}>Docs</Button>
+*/
+function Button$1({ className, wrapperClassName, variant, size, ...props }) {
+	return /* @__PURE__ */ jsx(Squircle, {
+		asChild: true,
+		radius: "capsule",
+		ring: true,
+		wrapperClassName: cn("cl-press inline-flex shrink-0", pressScales[size ?? "lg"], wrapperClassName),
+		children: /* @__PURE__ */ jsx(Button, {
+			className: cn(buttonVariants({
+				variant,
+				size
+			}), className),
+			...props
+		})
+	});
+}
+//#endregion
+export { Button$1 as Button, buttonVariants };
+
+//# sourceMappingURL=button.js.map

package/dist/ui/button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.js","names":["Button","BaseButton"],"sources":["../../src/ui/button.tsx"],"sourcesContent":["\"use client\";\n\nimport { Button as BaseButton } from \"@base-ui/react/button\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport type { ComponentProps } from \"react\";\nimport { Squircle } from \"@/lib/squircle\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * ClaraLight button variants.\n *\n * `secondary` is the default because ClaraLight is a tool-like design\n * language: most buttons in a real screen are neutral glass controls, and the\n * accent should mark one primary action per view, not every button.\n */\nexport const buttonVariants = cva(\n  [\n    \"inline-flex select-none items-center justify-center gap-2\",\n    \"border font-sans whitespace-nowrap\",\n    // Icons inherit the variant's foreground through currentColor.\n    \"[&_svg]:pointer-events-none [&_svg]:shrink-0\",\n    \"data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed\",\n  ],\n  {\n    variants: {\n      /**\n       * Filled variants use the theme's perceptual hover mix. `ghost` instead\n       * reveals a fill, because lifting nothing is still nothing.\n       *\n       * Disabled behaviour is deliberate and differs per variant: neutral\n       * controls keep their glass layer, and semantic actions keep their\n       * identity — except `danger`, which drops its colour so a destructive\n       * action never reads as available.\n       */\n      variant: {\n        primary: [\n          \"border-outline bg-accent text-on-accent\",\n          \"hover:bg-accent-hover\",\n          \"data-[disabled]:text-foreground-disabled\",\n        ],\n        secondary: [\n          \"border-outline bg-floating text-on-floating backdrop-blur-frost\",\n          \"hover:bg-floating-hover\",\n          \"data-[disabled]:text-foreground-disabled\",\n        ],\n        ghost: [\n          \"border-transparent bg-transparent text-foreground\",\n          \"hover:bg-control-highlight\",\n          \"data-[disabled]:text-foreground-disabled\",\n        ],\n        danger: [\n          \"border-outline bg-danger text-on-danger\",\n          \"hover:bg-danger-hover\",\n          \"data-[disabled]:border-transparent data-[disabled]:bg-control\",\n          \"data-[disabled]:text-foreground-disabled\",\n        ],\n      },\n      /**\n       * Heights, icon geometry, press travel and label typography come from\n       * theme tokens. Smaller controls travel further in relative terms.\n       */\n      size: {\n        sm: [\"h-control-sm gap-1.5 px-3 text-label\", \"[&_svg]:size-icon-sm\"],\n        md: [\"h-control-md gap-2 px-4 text-label\", \"[&_svg]:size-icon-md\"],\n        lg: [\"h-control-lg gap-2 px-4 text-button\", \"[&_svg]:size-icon-lg\"],\n      },\n    },\n    defaultVariants: { variant: \"secondary\", size: \"lg\" },\n  },\n);\n\nconst pressScales = {\n  sm: \"[--cl-press-scale:var(--cl-press-scale-sm)]\",\n  md: \"[--cl-press-scale:var(--cl-press-scale-md)]\",\n  lg: \"[--cl-press-scale:var(--cl-press-scale-lg)]\",\n} as const;\n\nexport type ButtonProps = Omit<ComponentProps<typeof BaseButton>, \"className\"> &\n  VariantProps<typeof buttonVariants> & {\n    /** Applied to the clipped element: fill, border, label. */\n    className?: string;\n    /**\n     * Applied to the wrapper, which is what a caller's flex or grid lays out —\n     * put width, margin and placement here.\n     */\n    wrapperClassName?: string;\n  };\n\n/**\n * A ClaraLight capsule button.\n *\n * Wraps Base UI's `Button` rather than rendering a bare `<button>`: that gives\n * the `render` prop for polymorphism (rendering an `<a>` while keeping button\n * semantics), and correct disabled behaviour for non-native elements, which a\n * plain `disabled` attribute cannot express.\n *\n * @example\n * <Button variant=\"primary\">Upload</Button>\n * <Button render={<a href=\"/docs\" />}>Docs</Button>\n */\nexport function Button({ className, wrapperClassName, variant, size, ...props }: ButtonProps) {\n  return (\n    /*\n     * `.cl-press` sits on the wrapper so the press scale moves fill, border and\n     * shadow together — the SVG overlays are siblings of the shape, so scaling\n     * the shape alone would tear the 1px border off the edge. `:active`\n     * propagates to ancestors, so the wrapper sees the press with no JS.\n     *\n     * `ring` puts the focus indicator on the same element, because `clip-path`\n     * crops `outline` to nothing on the shape.\n     */\n    <Squircle\n      asChild\n      radius=\"capsule\"\n      ring\n      wrapperClassName={cn(\n        \"cl-press inline-flex shrink-0\",\n        pressScales[size ?? \"lg\"],\n        wrapperClassName,\n      )}\n    >\n      <BaseButton className={cn(buttonVariants({ variant, size }), className)} {...props} />\n    </Squircle>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;AAeA,MAAa,iBAAiB,IAC5B;CACE;CACA;CAEA;CACA;AACF,GACA;CACE,UAAU;;;;;;;;;;EAUR,SAAS;GACP,SAAS;IACP;IACA;IACA;GACF;GACA,WAAW;IACT;IACA;IACA;GACF;GACA,OAAO;IACL;IACA;IACA;GACF;GACA,QAAQ;IACN;IACA;IACA;IACA;GACF;EACF;;;;;EAKA,MAAM;GACJ,IAAI,CAAC,wCAAwC,sBAAsB;GACnE,IAAI,CAAC,sCAAsC,sBAAsB;GACjE,IAAI,CAAC,uCAAuC,sBAAsB;EACpE;CACF;CACA,iBAAiB;EAAE,SAAS;EAAa,MAAM;CAAK;AACtD,CACF;AAEA,MAAM,cAAc;CAClB,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;;;;;;;;;;;;;AAyBA,SAAgBA,SAAO,EAAE,WAAW,kBAAkB,SAAS,MAAM,GAAG,SAAsB;CAC5F,OAUE,oBAAC,UAAD;EACE,SAAA;EACA,QAAO;EACP,MAAA;EACA,kBAAkB,GAChB,iCACA,YAAY,QAAQ,OACpB,gBACF;EAEA,UAAA,oBAACC,QAAD;GAAY,WAAW,GAAG,eAAe;IAAE;IAAS;GAAK,CAAC,GAAG,SAAS;GAAG,GAAI;EAAQ,CAAA;CAC7E,CAAA;AAEd"}

package/dist/ui/card.d.ts

@@ -0,0 +1,54 @@
+import { RadiusToken } from "../lib/squircle.js";
+import { ComponentProps, ReactNode } from "react";
+import { VariantProps } from "class-variance-authority";
+//#region src/ui/card.d.ts
+/**
+ * Card surfaces, mapped onto the ClaraLight layer stack.
+ *
+ * `panel` is a container sitting on the window background (the default).
+ * `control` puts the card *inside* a panel, where the translucent overlay
+ * reads correctly over `--color-panel`.
+ * `frost` is for cards that float over arbitrary content and need a backdrop
+ * blur.
+ *
+ * The corner shape itself is not here: `Squircle` owns it, and renders these
+ * classes onto the clipped element while the SVG border and shadow overlays go
+ * on its wrapper. So `border-*` and `shadow-*` below are declarations Lisse
+ * reads and re-renders as squircle-shaped SVG, not declarations that paint.
+ */
+export declare const cardVariants: (props?: ({
+  variant?: "control" | "frost" | "panel" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface CardProps extends ComponentProps<"div">, VariantProps<typeof cardVariants> {
+  /** Applied to the clipped element: fill, padding, grid placement inside the card. */
+  className?: string;
+  /**
+   * Applied to the layout wrapper, which is the element the caller's grid or
+   * flex actually lays out. Put span and size classes here —
+   * `wrapperClassName="sm:col-span-2"`, not `className`.
+   */
+  wrapperClassName?: string;
+  /** Which `--radius-*` token shapes the corners. */
+  radius?: RadiusToken;
+  /** Figma's `xi`; see `Squircle`. */
+  smoothing?: number;
+  children?: ReactNode;
+}
+/** A ClaraLight surface. Compose with the parts below, or use it bare. */
+export declare function Card({ className, wrapperClassName, variant, radius, smoothing, children, ...props }: CardProps): import("react").JSX.Element;
+export type CardHeaderProps = ComponentProps<"div">;
+export declare function CardHeader({ className, ...props }: CardHeaderProps): import("react").JSX.Element;
+export type CardTitleProps = ComponentProps<"h3">;
+/**
+ * `headline` (18/24 bold, tightened to -0.55px) rather than `title`, so a card
+ * title outranks the row text it contains.
+ */
+export declare function CardTitle({ className, ...props }: CardTitleProps): import("react").JSX.Element;
+export type CardDescriptionProps = ComponentProps<"p">;
+export declare function CardDescription({ className, ...props }: CardDescriptionProps): import("react").JSX.Element;
+export type CardContentProps = ComponentProps<"div">;
+export declare function CardContent({ className, ...props }: CardContentProps): import("react").JSX.Element;
+export type CardFooterProps = ComponentProps<"div">;
+export declare function CardFooter({ className, ...props }: CardFooterProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=card.d.ts.map

package/dist/ui/card.js

@@ -0,0 +1,82 @@
+import { cn } from "../lib/utils.js";
+import { Squircle } from "../lib/squircle.js";
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+//#region src/ui/card.tsx
+/**
+* Card surfaces, mapped onto the ClaraLight layer stack.
+*
+* `panel` is a container sitting on the window background (the default).
+* `control` puts the card *inside* a panel, where the translucent overlay
+* reads correctly over `--color-panel`.
+* `frost` is for cards that float over arbitrary content and need a backdrop
+* blur.
+*
+* The corner shape itself is not here: `Squircle` owns it, and renders these
+* classes onto the clipped element while the SVG border and shadow overlays go
+* on its wrapper. So `border-*` and `shadow-*` below are declarations Lisse
+* reads and re-renders as squircle-shaped SVG, not declarations that paint.
+*/
+const cardVariants = cva(["text-foreground", "[&_svg]:shrink-0"], {
+	variants: { variant: {
+		panel: "border border-outline bg-panel shadow-panel",
+		control: "border border-outline bg-control",
+		frost: "cl-frost"
+	} },
+	defaultVariants: { variant: "panel" }
+});
+/** A ClaraLight surface. Compose with the parts below, or use it bare. */
+function Card({ className, wrapperClassName, variant, radius = "medium", smoothing, children, ...props }) {
+	return /* @__PURE__ */ jsx(Squircle, {
+		radius,
+		smoothing,
+		wrapperClassName,
+		className: cn(cardVariants({ variant }), className),
+		"data-cl-slot": "card",
+		...props,
+		children
+	});
+}
+function CardHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-cl-slot": "card-header",
+		className: cn("flex flex-col gap-1 p-4", className),
+		...props
+	});
+}
+/**
+* `headline` (18/24 bold, tightened to -0.55px) rather than `title`, so a card
+* title outranks the row text it contains.
+*/
+function CardTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx("h3", {
+		"data-cl-slot": "card-title",
+		className: cn("text-headline text-foreground", className),
+		...props
+	});
+}
+function CardDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx("p", {
+		"data-cl-slot": "card-description",
+		className: cn("text-caption text-foreground-tertiary", className),
+		...props
+	});
+}
+function CardContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-cl-slot": "card-content",
+		className: cn("px-4 pb-4 [&:first-child]:pt-4", className),
+		...props
+	});
+}
+function CardFooter({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-cl-slot": "card-footer",
+		className: cn("flex items-center gap-2 px-4 pb-4", className),
+		...props
+	});
+}
+//#endregion
+export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, cardVariants };
+
+//# sourceMappingURL=card.js.map

package/dist/ui/card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.js","names":[],"sources":["../../src/ui/card.tsx"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\";\nimport type { ComponentProps, ReactNode } from \"react\";\nimport { type RadiusToken, Squircle } from \"@/lib/squircle\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * Card surfaces, mapped onto the ClaraLight layer stack.\n *\n * `panel` is a container sitting on the window background (the default).\n * `control` puts the card *inside* a panel, where the translucent overlay\n * reads correctly over `--color-panel`.\n * `frost` is for cards that float over arbitrary content and need a backdrop\n * blur.\n *\n * The corner shape itself is not here: `Squircle` owns it, and renders these\n * classes onto the clipped element while the SVG border and shadow overlays go\n * on its wrapper. So `border-*` and `shadow-*` below are declarations Lisse\n * reads and re-renders as squircle-shaped SVG, not declarations that paint.\n */\nexport const cardVariants = cva([\"text-foreground\", \"[&_svg]:shrink-0\"], {\n  variants: {\n    variant: {\n      panel: \"border border-outline bg-panel shadow-panel\",\n      control: \"border border-outline bg-control\",\n      frost: \"cl-frost\",\n    },\n  },\n  defaultVariants: { variant: \"panel\" },\n});\n\nexport interface CardProps extends ComponentProps<\"div\">, VariantProps<typeof cardVariants> {\n  /** Applied to the clipped element: fill, padding, grid placement inside the card. */\n  className?: string;\n  /**\n   * Applied to the layout wrapper, which is the element the caller's grid or\n   * flex actually lays out. Put span and size classes here —\n   * `wrapperClassName=\"sm:col-span-2\"`, not `className`.\n   */\n  wrapperClassName?: string;\n  /** Which `--radius-*` token shapes the corners. */\n  radius?: RadiusToken;\n  /** Figma's `xi`; see `Squircle`. */\n  smoothing?: number;\n  children?: ReactNode;\n}\n\n/** A ClaraLight surface. Compose with the parts below, or use it bare. */\nexport function Card({\n  className,\n  wrapperClassName,\n  variant,\n  radius = \"medium\",\n  smoothing,\n  children,\n  ...props\n}: CardProps) {\n  return (\n    <Squircle\n      radius={radius}\n      smoothing={smoothing}\n      wrapperClassName={wrapperClassName}\n      className={cn(cardVariants({ variant }), className)}\n      data-cl-slot=\"card\"\n      {...props}\n    >\n      {children}\n    </Squircle>\n  );\n}\n\nexport type CardHeaderProps = ComponentProps<\"div\">;\nexport function CardHeader({ className, ...props }: CardHeaderProps) {\n  return (\n    <div\n      data-cl-slot=\"card-header\"\n      className={cn(\"flex flex-col gap-1 p-4\", className)}\n      {...props}\n    />\n  );\n}\n\nexport type CardTitleProps = ComponentProps<\"h3\">;\n\n/**\n * `headline` (18/24 bold, tightened to -0.55px) rather than `title`, so a card\n * title outranks the row text it contains.\n */\nexport function CardTitle({ className, ...props }: CardTitleProps) {\n  return (\n    <h3\n      data-cl-slot=\"card-title\"\n      className={cn(\"text-headline text-foreground\", className)}\n      {...props}\n    />\n  );\n}\n\nexport type CardDescriptionProps = ComponentProps<\"p\">;\n\nexport function CardDescription({ className, ...props }: CardDescriptionProps) {\n  return (\n    <p\n      data-cl-slot=\"card-description\"\n      className={cn(\"text-caption text-foreground-tertiary\", className)}\n      {...props}\n    />\n  );\n}\n\nexport type CardContentProps = ComponentProps<\"div\">;\n\nexport function CardContent({ className, ...props }: CardContentProps) {\n  return (\n    <div\n      data-cl-slot=\"card-content\"\n      className={cn(\"px-4 pb-4 [&:first-child]:pt-4\", className)}\n      {...props}\n    />\n  );\n}\n\nexport type CardFooterProps = ComponentProps<\"div\">;\n\nexport function CardFooter({ className, ...props }: CardFooterProps) {\n  return (\n    <div\n      data-cl-slot=\"card-footer\"\n      className={cn(\"flex items-center gap-2 px-4 pb-4\", className)}\n      {...props}\n    />\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAmBA,MAAa,eAAe,IAAI,CAAC,mBAAmB,kBAAkB,GAAG;CACvE,UAAU,EACR,SAAS;EACP,OAAO;EACP,SAAS;EACT,OAAO;CACT,EACF;CACA,iBAAiB,EAAE,SAAS,QAAQ;AACtC,CAAC;;AAmBD,SAAgB,KAAK,EACnB,WACA,kBACA,SACA,SAAS,UACT,WACA,UACA,GAAG,SACS;CACZ,OACE,oBAAC,UAAD;EACU;EACG;EACO;EAClB,WAAW,GAAG,aAAa,EAAE,QAAQ,CAAC,GAAG,SAAS;EAClD,gBAAa;EACb,GAAI;EAEH;CACO,CAAA;AAEd;AAGA,SAAgB,WAAW,EAAE,WAAW,GAAG,SAA0B;CACnE,OACE,oBAAC,OAAD;EACE,gBAAa;EACb,WAAW,GAAG,2BAA2B,SAAS;EAClD,GAAI;CACL,CAAA;AAEL;;;;;AAQA,SAAgB,UAAU,EAAE,WAAW,GAAG,SAAyB;CACjE,OACE,oBAAC,MAAD;EACE,gBAAa;EACb,WAAW,GAAG,iCAAiC,SAAS;EACxD,GAAI;CACL,CAAA;AAEL;AAIA,SAAgB,gBAAgB,EAAE,WAAW,GAAG,SAA+B;CAC7E,OACE,oBAAC,KAAD;EACE,gBAAa;EACb,WAAW,GAAG,yCAAyC,SAAS;EAChE,GAAI;CACL,CAAA;AAEL;AAIA,SAAgB,YAAY,EAAE,WAAW,GAAG,SAA2B;CACrE,OACE,oBAAC,OAAD;EACE,gBAAa;EACb,WAAW,GAAG,kCAAkC,SAAS;EACzD,GAAI;CACL,CAAA;AAEL;AAIA,SAAgB,WAAW,EAAE,WAAW,GAAG,SAA0B;CACnE,OACE,oBAAC,OAAD;EACE,gBAAa;EACb,WAAW,GAAG,qCAAqC,SAAS;EAC5D,GAAI;CACL,CAAA;AAEL"}

package/dist/ui/dialog.d.ts

@@ -0,0 +1,82 @@
+import { ComponentProps, ReactNode } from "react";
+import { Dialog } from "@base-ui/react/dialog";
+//#region src/ui/dialog.d.ts
+export type DialogProps<Payload = unknown> = Dialog.Root.Props<Payload>;
+/**
+ * The modal root, which also remembers where it was opened from.
+ *
+ * `Dialog.Popup` grows out of the trigger's rectangle, so the two have to know
+ * about each other; passing the anchor between siblings is what this component
+ * exists for. It is the same provider the select will use, so both surfaces
+ * morph with one implementation.
+ *
+ * The open state is mirrored here — not invented here. `open` still wins when it
+ * is controlled, and `onOpenChange` still fires for every change, so a consumer's
+ * own state stays the single source of truth; the mirror only exists because the
+ * popup, which is a *sibling* of the trigger, has to know when a dismissal began
+ * in order to reverse the morph before Base UI unmounts it.
+ */ declare function Dialog$1<Payload = unknown>({ open, defaultOpen, onOpenChange, ...props }: DialogProps<Payload>): import("react").JSX.Element;
+export type DialogTriggerProps = Omit<ComponentProps<typeof Dialog.Trigger>, "className"> & {
+  className?: string;
+};
+export declare function DialogTrigger({ className, ref, ...props }: DialogTriggerProps): import("react").JSX.Element;
+export type DialogBackdropProps = Omit<ComponentProps<typeof Dialog.Backdrop>, "className"> & {
+  className?: string;
+};
+/**
+ * The barrier behind the dialog. Fades on one duration only, so it lands fast
+ * enough that the page behind never feels stuck.
+ */
+export declare function DialogBackdrop({ className, ...props }: DialogBackdropProps): import("react").JSX.Element;
+export type DialogPopupProps = Omit<ComponentProps<typeof Dialog.Popup>, "className"> & {
+  /** Applied to the clipped element: the frost, padding and text. */
+  className?: string;
+  /** Applied to the wrapper, which is what gets positioned and animated. */
+  wrapperClassName?: string;
+  /** Rendered inside the popup, above the body. */
+  children?: ReactNode;
+};
+/**
+ * The frosted modal surface.
+ *
+ * Base UI marks the popup with `data-starting-style` and `data-ending-style`
+ * and waits for animations on the popup element before calling `forceUnmount`.
+ * The visible transition belongs to the wrapper, so `cl-exit-sentinel` adds a
+ * non-visual custom-property animation to the popup; Base UI can then wait for
+ * the wrapper's exit duration without moving the clipped surface separately.
+ *
+ * The positioning and the entrance live on the **wrapper**, not the popup. The
+ * popup is the clipped element and the SVG border and shadow overlays are its
+ * siblings, so scaling the popup alone would leave the 1px border and the shadow
+ * at their final size — 5% of a 512px dialog is 25px, plainly visible over the
+ * 250ms entrance. `.cl-enter-root` lifts Base UI's transition state onto the
+ * wrapper with `:has()`, so fill, border and shadow move as one object.
+ *
+ * The wrapper is also what `useSurfaceMorph` transforms: the dialog is laid out
+ * at its final size and carried from the trigger's rectangle onto itself, which
+ * is the one entrance the whole language shares. The geometry drives the
+ * content's opacity with it, so the layer is still visible while it collapses
+ * back into its trigger.
+ *
+ * **No shadow**, unlike every other floating layer. A modal is separated from the
+ * page by its scrim, and `--shadow-frost` under a 45% scrim is two depth cues
+ * claiming the same edge, which reads as a halo rather than as distance. A dialog
+ * that has no scrim — `modal={false}`, or one laid over its own artwork — asks for
+ * it back with `shadow-dialog`, which is what that token is for.
+ */
+export declare function DialogPopup({ className, wrapperClassName, ...props }: DialogPopupProps): import("react").JSX.Element;
+export type DialogTitleProps = Omit<ComponentProps<typeof Dialog.Title>, "className"> & {
+  className?: string;
+};
+export declare function DialogTitle({ className, ...props }: DialogTitleProps): import("react").JSX.Element;
+export type DialogDescriptionProps = Omit<ComponentProps<typeof Dialog.Description>, "className"> & {
+  className?: string;
+};
+export declare function DialogDescription({ className, ...props }: DialogDescriptionProps): import("react").JSX.Element;
+export type DialogCloseProps = Omit<ComponentProps<typeof Dialog.Close>, "className"> & {
+  className?: string;
+};
+export declare function DialogClose({ className, ...props }: DialogCloseProps): import("react").JSX.Element;
+//#endregion
+export { Dialog$1 as Dialog };
+//# sourceMappingURL=dialog.d.ts.map

package/dist/ui/dialog.js

@@ -0,0 +1,129 @@
+"use client";
+import { cn } from "../lib/utils.js";
+import { Squircle, composeRefs } from "../lib/squircle.js";
+import { MorphSourceProvider, useMorphAnchor, useMorphSource, useSurfaceMorph } from "../lib/morph.js";
+import { useCallback, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Dialog } from "@base-ui/react/dialog";
+//#region src/ui/dialog.tsx
+/**
+* The modal root, which also remembers where it was opened from.
+*
+* `Dialog.Popup` grows out of the trigger's rectangle, so the two have to know
+* about each other; passing the anchor between siblings is what this component
+* exists for. It is the same provider the select will use, so both surfaces
+* morph with one implementation.
+*
+* The open state is mirrored here — not invented here. `open` still wins when it
+* is controlled, and `onOpenChange` still fires for every change, so a consumer's
+* own state stays the single source of truth; the mirror only exists because the
+* popup, which is a *sibling* of the trigger, has to know when a dismissal began
+* in order to reverse the morph before Base UI unmounts it.
+*/ function Dialog$1({ open, defaultOpen, onOpenChange, ...props }) {
+	const [uncontrolled, setUncontrolled] = useState(defaultOpen ?? false);
+	const handleOpenChange = useCallback((next, details) => {
+		setUncontrolled(next);
+		onOpenChange?.(next, details);
+	}, [onOpenChange]);
+	return /* @__PURE__ */ jsx(MorphSourceProvider, {
+		open: open ?? uncontrolled,
+		children: /* @__PURE__ */ jsx(Dialog.Root, {
+			open,
+			defaultOpen: open === void 0 ? defaultOpen : void 0,
+			onOpenChange: handleOpenChange,
+			...props
+		})
+	});
+}
+function DialogTrigger({ className, ref, ...props }) {
+	const anchor = useMorphAnchor();
+	const mergedRef = useMemo(() => composeRefs(anchor ?? void 0, ref), [anchor, ref]);
+	return /* @__PURE__ */ jsx(Dialog.Trigger, {
+		ref: mergedRef,
+		className,
+		...props
+	});
+}
+/**
+* The barrier behind the dialog. Fades on one duration only, so it lands fast
+* enough that the page behind never feels stuck.
+*/
+function DialogBackdrop({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Dialog.Backdrop, {
+		"data-cl-slot": "dialog-backdrop",
+		className: cn("fixed inset-0 z-50 bg-scrim", "transition-opacity duration-(--cl-duration-surface) ease-cl-out", "data-[starting-style]:opacity-0 data-[ending-style]:opacity-0", className),
+		...props
+	});
+}
+/**
+* The frosted modal surface.
+*
+* Base UI marks the popup with `data-starting-style` and `data-ending-style`
+* and waits for animations on the popup element before calling `forceUnmount`.
+* The visible transition belongs to the wrapper, so `cl-exit-sentinel` adds a
+* non-visual custom-property animation to the popup; Base UI can then wait for
+* the wrapper's exit duration without moving the clipped surface separately.
+*
+* The positioning and the entrance live on the **wrapper**, not the popup. The
+* popup is the clipped element and the SVG border and shadow overlays are its
+* siblings, so scaling the popup alone would leave the 1px border and the shadow
+* at their final size — 5% of a 512px dialog is 25px, plainly visible over the
+* 250ms entrance. `.cl-enter-root` lifts Base UI's transition state onto the
+* wrapper with `:has()`, so fill, border and shadow move as one object.
+*
+* The wrapper is also what `useSurfaceMorph` transforms: the dialog is laid out
+* at its final size and carried from the trigger's rectangle onto itself, which
+* is the one entrance the whole language shares. The geometry drives the
+* content's opacity with it, so the layer is still visible while it collapses
+* back into its trigger.
+*
+* **No shadow**, unlike every other floating layer. A modal is separated from the
+* page by its scrim, and `--shadow-frost` under a 45% scrim is two depth cues
+* claiming the same edge, which reads as a halo rather than as distance. A dialog
+* that has no scrim — `modal={false}`, or one laid over its own artwork — asks for
+* it back with `shadow-dialog`, which is what that token is for.
+*/
+function DialogPopup({ className, wrapperClassName, ...props }) {
+	const source = useMorphSource();
+	const [surface, setSurface] = useState(null);
+	useSurfaceMorph({
+		surface,
+		anchor: source?.anchor,
+		open: source?.open ?? true
+	});
+	return /* @__PURE__ */ jsxs(Dialog.Portal, { children: [/* @__PURE__ */ jsx(DialogBackdrop, {}), /* @__PURE__ */ jsx(Squircle, {
+		asChild: true,
+		radius: "dialog",
+		wrapperRef: setSurface,
+		wrapperClassName: cn("cl-enter-root cl-morph fixed top-1/2 left-1/2 z-50 w-full max-w-lg", "-translate-x-1/2 -translate-y-1/2", wrapperClassName),
+		children: /* @__PURE__ */ jsx(Dialog.Popup, {
+			"data-cl-slot": "dialog-popup",
+			className: cn("cl-exit-sentinel cl-frost p-6 font-sans text-foreground shadow-none", className),
+			...props
+		})
+	})] });
+}
+function DialogTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Dialog.Title, {
+		"data-cl-slot": "dialog-title",
+		className: cn("text-headline text-foreground", className),
+		...props
+	});
+}
+function DialogDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Dialog.Description, {
+		"data-cl-slot": "dialog-description",
+		className: cn("text-caption text-foreground-tertiary", className),
+		...props
+	});
+}
+function DialogClose({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Dialog.Close, {
+		className,
+		...props
+	});
+}
+//#endregion
+export { Dialog$1 as Dialog, DialogBackdrop, DialogClose, DialogDescription, DialogPopup, DialogTitle, DialogTrigger };
+
+//# sourceMappingURL=dialog.js.map

package/dist/ui/dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.js","names":["Dialog","BaseDialog"],"sources":["../../src/ui/dialog.tsx"],"sourcesContent":["\"use client\";\n\nimport { Dialog as BaseDialog } from \"@base-ui/react/dialog\";\nimport { type ComponentProps, type ReactNode, useCallback, useMemo, useState } from \"react\";\nimport { MorphSourceProvider, useMorphAnchor, useMorphSource, useSurfaceMorph } from \"@/lib/morph\";\nimport { composeRefs, Squircle } from \"@/lib/squircle\";\nimport { cn } from \"@/lib/utils\";\n\nexport type DialogProps<Payload = unknown> = BaseDialog.Root.Props<Payload>;\n\n/**\n * The modal root, which also remembers where it was opened from.\n *\n * `Dialog.Popup` grows out of the trigger's rectangle, so the two have to know\n * about each other; passing the anchor between siblings is what this component\n * exists for. It is the same provider the select will use, so both surfaces\n * morph with one implementation.\n *\n * The open state is mirrored here — not invented here. `open` still wins when it\n * is controlled, and `onOpenChange` still fires for every change, so a consumer's\n * own state stays the single source of truth; the mirror only exists because the\n * popup, which is a *sibling* of the trigger, has to know when a dismissal began\n * in order to reverse the morph before Base UI unmounts it.\n */ export function Dialog<Payload = unknown>({\n  open,\n  defaultOpen,\n  onOpenChange,\n  ...props\n}: DialogProps<Payload>) {\n  const [uncontrolled, setUncontrolled] = useState(defaultOpen ?? false);\n  const handleOpenChange = useCallback(\n    (next: boolean, details: BaseDialog.Root.ChangeEventDetails) => {\n      setUncontrolled(next);\n      onOpenChange?.(next, details);\n    },\n    [onOpenChange],\n  );\n\n  return (\n    <MorphSourceProvider open={open ?? uncontrolled}>\n      <BaseDialog.Root\n        open={open}\n        defaultOpen={open === undefined ? defaultOpen : undefined}\n        onOpenChange={handleOpenChange}\n        {...props}\n      />\n    </MorphSourceProvider>\n  );\n}\n\nexport type DialogTriggerProps = Omit<ComponentProps<typeof BaseDialog.Trigger>, \"className\"> & {\n  className?: string;\n};\n\nexport function DialogTrigger({ className, ref, ...props }: DialogTriggerProps) {\n  const anchor = useMorphAnchor();\n  const mergedRef = useMemo(() => composeRefs(anchor ?? undefined, ref), [anchor, ref]);\n  return <BaseDialog.Trigger ref={mergedRef} className={className} {...props} />;\n}\n\nexport type DialogBackdropProps = Omit<ComponentProps<typeof BaseDialog.Backdrop>, \"className\"> & {\n  className?: string;\n};\n\n/**\n * The barrier behind the dialog. Fades on one duration only, so it lands fast\n * enough that the page behind never feels stuck.\n */\nexport function DialogBackdrop({ className, ...props }: DialogBackdropProps) {\n  return (\n    <BaseDialog.Backdrop\n      data-cl-slot=\"dialog-backdrop\"\n      className={cn(\n        \"fixed inset-0 z-50 bg-scrim\",\n        \"transition-opacity duration-(--cl-duration-surface) ease-cl-out\",\n        \"data-[starting-style]:opacity-0 data-[ending-style]:opacity-0\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport type DialogPopupProps = Omit<ComponentProps<typeof BaseDialog.Popup>, \"className\"> & {\n  /** Applied to the clipped element: the frost, padding and text. */\n  className?: string;\n  /** Applied to the wrapper, which is what gets positioned and animated. */\n  wrapperClassName?: string;\n  /** Rendered inside the popup, above the body. */\n  children?: ReactNode;\n};\n\n/**\n * The frosted modal surface.\n *\n * Base UI marks the popup with `data-starting-style` and `data-ending-style`\n * and waits for animations on the popup element before calling `forceUnmount`.\n * The visible transition belongs to the wrapper, so `cl-exit-sentinel` adds a\n * non-visual custom-property animation to the popup; Base UI can then wait for\n * the wrapper's exit duration without moving the clipped surface separately.\n *\n * The positioning and the entrance live on the **wrapper**, not the popup. The\n * popup is the clipped element and the SVG border and shadow overlays are its\n * siblings, so scaling the popup alone would leave the 1px border and the shadow\n * at their final size — 5% of a 512px dialog is 25px, plainly visible over the\n * 250ms entrance. `.cl-enter-root` lifts Base UI's transition state onto the\n * wrapper with `:has()`, so fill, border and shadow move as one object.\n *\n * The wrapper is also what `useSurfaceMorph` transforms: the dialog is laid out\n * at its final size and carried from the trigger's rectangle onto itself, which\n * is the one entrance the whole language shares. The geometry drives the\n * content's opacity with it, so the layer is still visible while it collapses\n * back into its trigger.\n *\n * **No shadow**, unlike every other floating layer. A modal is separated from the\n * page by its scrim, and `--shadow-frost` under a 45% scrim is two depth cues\n * claiming the same edge, which reads as a halo rather than as distance. A dialog\n * that has no scrim — `modal={false}`, or one laid over its own artwork — asks for\n * it back with `shadow-dialog`, which is what that token is for.\n */\nexport function DialogPopup({ className, wrapperClassName, ...props }: DialogPopupProps) {\n  const source = useMorphSource();\n  const [surface, setSurface] = useState<HTMLDivElement | null>(null);\n  useSurfaceMorph({ surface, anchor: source?.anchor, open: source?.open ?? true });\n\n  return (\n    <BaseDialog.Portal>\n      <DialogBackdrop />\n      <Squircle\n        asChild\n        radius=\"dialog\"\n        wrapperRef={setSurface}\n        wrapperClassName={cn(\n          \"cl-enter-root cl-morph fixed top-1/2 left-1/2 z-50 w-full max-w-lg\",\n          \"-translate-x-1/2 -translate-y-1/2\",\n          wrapperClassName,\n        )}\n      >\n        <BaseDialog.Popup\n          data-cl-slot=\"dialog-popup\"\n          className={cn(\n            \"cl-exit-sentinel cl-frost p-6 font-sans text-foreground shadow-none\",\n            className,\n          )}\n          {...props}\n        />\n      </Squircle>\n    </BaseDialog.Portal>\n  );\n}\n\nexport type DialogTitleProps = Omit<ComponentProps<typeof BaseDialog.Title>, \"className\"> & {\n  className?: string;\n};\n\nexport function DialogTitle({ className, ...props }: DialogTitleProps) {\n  return (\n    <BaseDialog.Title\n      data-cl-slot=\"dialog-title\"\n      className={cn(\"text-headline text-foreground\", className)}\n      {...props}\n    />\n  );\n}\n\nexport type DialogDescriptionProps = Omit<\n  ComponentProps<typeof BaseDialog.Description>,\n  \"className\"\n> & { className?: string };\n\nexport function DialogDescription({ className, ...props }: DialogDescriptionProps) {\n  return (\n    <BaseDialog.Description\n      data-cl-slot=\"dialog-description\"\n      className={cn(\"text-caption text-foreground-tertiary\", className)}\n      {...props}\n    />\n  );\n}\n\nexport type DialogCloseProps = Omit<ComponentProps<typeof BaseDialog.Close>, \"className\"> & {\n  className?: string;\n};\n\nexport function DialogClose({ className, ...props }: DialogCloseProps) {\n  return <BaseDialog.Close className={className} {...props} />;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;GAuBI,SAAgBA,SAA0B,EAC5C,MACA,aACA,cACA,GAAG,SACoB;CACvB,MAAM,CAAC,cAAc,mBAAmB,SAAS,eAAe,KAAK;CACrE,MAAM,mBAAmB,aACtB,MAAe,YAAgD;EAC9D,gBAAgB,IAAI;EACpB,eAAe,MAAM,OAAO;CAC9B,GACA,CAAC,YAAY,CACf;CAEA,OACE,oBAAC,qBAAD;EAAqB,MAAM,QAAQ;EACjC,UAAA,oBAACC,OAAW,MAAZ;GACQ;GACN,aAAa,SAAS,KAAA,IAAY,cAAc,KAAA;GAChD,cAAc;GACd,GAAI;EACL,CAAA;CACkB,CAAA;AAEzB;AAMA,SAAgB,cAAc,EAAE,WAAW,KAAK,GAAG,SAA6B;CAC9E,MAAM,SAAS,eAAe;CAC9B,MAAM,YAAY,cAAc,YAAY,UAAU,KAAA,GAAW,GAAG,GAAG,CAAC,QAAQ,GAAG,CAAC;CACpF,OAAO,oBAACA,OAAW,SAAZ;EAAoB,KAAK;EAAsB;EAAW,GAAI;CAAQ,CAAA;AAC/E;;;;;AAUA,SAAgB,eAAe,EAAE,WAAW,GAAG,SAA8B;CAC3E,OACE,oBAACA,OAAW,UAAZ;EACE,gBAAa;EACb,WAAW,GACT,+BACA,mEACA,iEACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuCA,SAAgB,YAAY,EAAE,WAAW,kBAAkB,GAAG,SAA2B;CACvF,MAAM,SAAS,eAAe;CAC9B,MAAM,CAAC,SAAS,cAAc,SAAgC,IAAI;CAClE,gBAAgB;EAAE;EAAS,QAAQ,QAAQ;EAAQ,MAAM,QAAQ,QAAQ;CAAK,CAAC;CAE/E,OACE,qBAACA,OAAW,QAAZ,EAAA,UAAA,CACE,oBAAC,gBAAD,CAAiB,CAAA,GACjB,oBAAC,UAAD;EACE,SAAA;EACA,QAAO;EACP,YAAY;EACZ,kBAAkB,GAChB,sEACA,qCACA,gBACF;EAEA,UAAA,oBAACA,OAAW,OAAZ;GACE,gBAAa;GACb,WAAW,GACT,uEACA,SACF;GACA,GAAI;EACL,CAAA;CACO,CAAA,CACO,EAAA,CAAA;AAEvB;AAMA,SAAgB,YAAY,EAAE,WAAW,GAAG,SAA2B;CACrE,OACE,oBAACA,OAAW,OAAZ;EACE,gBAAa;EACb,WAAW,GAAG,iCAAiC,SAAS;EACxD,GAAI;CACL,CAAA;AAEL;AAOA,SAAgB,kBAAkB,EAAE,WAAW,GAAG,SAAiC;CACjF,OACE,oBAACA,OAAW,aAAZ;EACE,gBAAa;EACb,WAAW,GAAG,yCAAyC,SAAS;EAChE,GAAI;CACL,CAAA;AAEL;AAMA,SAAgB,YAAY,EAAE,WAAW,GAAG,SAA2B;CACrE,OAAO,oBAACA,OAAW,OAAZ;EAA6B;EAAW,GAAI;CAAQ,CAAA;AAC7D"}

package/dist/ui/input.d.ts

@@ -0,0 +1,34 @@
+import { ComponentProps } from "react";
+import { VariantProps } from "class-variance-authority";
+import { Input } from "@base-ui/react/input";
+//#region src/ui/input.d.ts
+/**
+ * ClaraLight text field.
+ *
+ * The fill is `control` — a translucent overlay rather than an opaque colour —
+ * so the same field reads correctly whether it sits on `background` or on a
+ * `panel`. That is the core trick of the layered surface stack and it is why
+ * this component must not hard-code a background.
+ */
+export declare const inputVariants: (props?: ({
+  size?: "lg" | "md" | "sm" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type InputProps = Omit<ComponentProps<typeof Input>, "className" | "size"> & VariantProps<typeof inputVariants> & {
+  className?: string;
+  /** Applied to the wrapper, which is what a caller's layout sizes. */
+  wrapperClassName?: string;
+};
+/**
+ * A ClaraLight text field.
+ *
+ * `sm` uses caption, `md` uses callout, and `lg` uses body typography.
+ * Dense inspector rows stay legible without shrinking the hit target.
+ *
+ * Note the `size` in `InputProps` is the ClaraLight density step, not the
+ * native `<input size>` character-width hint — the native attribute is omitted
+ * above, because the two collide and an intersection would make both unusable.
+ */
+declare function Input$1({ className, wrapperClassName, size, ...props }: InputProps): import("react").JSX.Element;
+//#endregion
+export { Input$1 as Input };
+//# sourceMappingURL=input.d.ts.map

package/dist/ui/input.js

@@ -0,0 +1,60 @@
+"use client";
+import { cn } from "../lib/utils.js";
+import { Squircle } from "../lib/squircle.js";
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { Input } from "@base-ui/react/input";
+//#region src/ui/input.tsx
+/**
+* ClaraLight text field.
+*
+* The fill is `control` — a translucent overlay rather than an opaque colour —
+* so the same field reads correctly whether it sits on `background` or on a
+* `panel`. That is the core trick of the layered surface stack and it is why
+* this component must not hard-code a background.
+*/
+const inputVariants = cva([
+	"w-full border border-outline",
+	"bg-control font-sans text-foreground",
+	"placeholder:text-foreground-hint",
+	"transition-[background-color,border-color,color] duration-(--cl-duration-fast) ease-cl-out",
+	"hover:bg-control-highlight",
+	"data-[disabled]:pointer-events-none",
+	"data-[disabled]:text-foreground-disabled data-[disabled]:placeholder:text-foreground-disabled",
+	"data-[invalid]:border-danger"
+], {
+	variants: { 
+	/** Shared control geometry; typography follows density. */
+size: {
+		sm: "h-control-sm px-2 text-caption",
+		md: "h-control-md px-3 text-callout",
+		lg: "h-control-lg px-4 text-body"
+	} },
+	defaultVariants: { size: "md" }
+});
+/**
+* A ClaraLight text field.
+*
+* `sm` uses caption, `md` uses callout, and `lg` uses body typography.
+* Dense inspector rows stay legible without shrinking the hit target.
+*
+* Note the `size` in `InputProps` is the ClaraLight density step, not the
+* native `<input size>` character-width hint — the native attribute is omitted
+* above, because the two collide and an intersection would make both unusable.
+*/
+function Input$1({ className, wrapperClassName, size, ...props }) {
+	return /* @__PURE__ */ jsx(Squircle, {
+		asChild: true,
+		radius: "control",
+		ring: "field",
+		wrapperClassName: cn("block w-full", wrapperClassName),
+		children: /* @__PURE__ */ jsx(Input, {
+			className: cn(inputVariants({ size }), className),
+			...props
+		})
+	});
+}
+//#endregion
+export { Input$1 as Input, inputVariants };
+
+//# sourceMappingURL=input.js.map

package/dist/ui/input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.js","names":["Input","BaseInput"],"sources":["../../src/ui/input.tsx"],"sourcesContent":["\"use client\";\n\nimport { Input as BaseInput } from \"@base-ui/react/input\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport type { ComponentProps } from \"react\";\nimport { Squircle } from \"@/lib/squircle\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * ClaraLight text field.\n *\n * The fill is `control` — a translucent overlay rather than an opaque colour —\n * so the same field reads correctly whether it sits on `background` or on a\n * `panel`. That is the core trick of the layered surface stack and it is why\n * this component must not hard-code a background.\n */\nexport const inputVariants = cva(\n  [\n    \"w-full border border-outline\",\n    \"bg-control font-sans text-foreground\",\n    \"placeholder:text-foreground-hint\",\n    \"transition-[background-color,border-color,color] duration-(--cl-duration-fast) ease-cl-out\",\n    \"hover:bg-control-highlight\",\n    \"data-[disabled]:pointer-events-none\",\n    \"data-[disabled]:text-foreground-disabled data-[disabled]:placeholder:text-foreground-disabled\",\n    // Set by Base UI when the field sits inside a Field.Root.\n    \"data-[invalid]:border-danger\",\n  ],\n  {\n    variants: {\n      /** Shared control geometry; typography follows density. */\n      size: {\n        sm: \"h-control-sm px-2 text-caption\",\n        md: \"h-control-md px-3 text-callout\",\n        lg: \"h-control-lg px-4 text-body\",\n      },\n    },\n    defaultVariants: { size: \"md\" },\n  },\n);\n\nexport type InputProps = Omit<ComponentProps<typeof BaseInput>, \"className\" | \"size\"> &\n  VariantProps<typeof inputVariants> & {\n    className?: string;\n    /** Applied to the wrapper, which is what a caller's layout sizes. */\n    wrapperClassName?: string;\n  };\n\n/**\n * A ClaraLight text field.\n *\n * `sm` uses caption, `md` uses callout, and `lg` uses body typography.\n * Dense inspector rows stay legible without shrinking the hit target.\n *\n * Note the `size` in `InputProps` is the ClaraLight density step, not the\n * native `<input size>` character-width hint — the native attribute is omitted\n * above, because the two collide and an intersection would make both unusable.\n */\nexport function Input({ className, wrapperClassName, size, ...props }: InputProps) {\n  return (\n    <Squircle\n      asChild\n      radius=\"control\"\n      ring=\"field\"\n      wrapperClassName={cn(\"block w-full\", wrapperClassName)}\n    >\n      <BaseInput className={cn(inputVariants({ size }), className)} {...props} />\n    </Squircle>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;AAgBA,MAAa,gBAAgB,IAC3B;CACE;CACA;CACA;CACA;CACA;CACA;CACA;CAEA;AACF,GACA;CACE,UAAU;;AAER,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;CACN,EACF;CACA,iBAAiB,EAAE,MAAM,KAAK;AAChC,CACF;;;;;;;;;;;AAmBA,SAAgBA,QAAM,EAAE,WAAW,kBAAkB,MAAM,GAAG,SAAqB;CACjF,OACE,oBAAC,UAAD;EACE,SAAA;EACA,QAAO;EACP,MAAK;EACL,kBAAkB,GAAG,gBAAgB,gBAAgB;EAErD,UAAA,oBAACC,OAAD;GAAW,WAAW,GAAG,cAAc,EAAE,KAAK,CAAC,GAAG,SAAS;GAAG,GAAI;EAAQ,CAAA;CAClE,CAAA;AAEd"}