@claralight-design/react 0.0.1

package/dist/ui/select.js

@@ -0,0 +1,213 @@
+"use client";
+import { cn } from "../lib/utils.js";
+import { Squircle } from "../lib/squircle.js";
+import { useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { Select } from "@base-ui/react/select";
+//#region src/ui/select.tsx
+/**
+* Inlined rather than pulled from an icon library: three glyphs is not worth a
+* dependency in a component consumers copy into their own project, and swapping
+* `lucide-react` in later is a one-line change per icon via `components.json`.
+*/
+function ChevronDownIcon({ className, ...props }) {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 16 16",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 1.6,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		className,
+		...props,
+		children: /* @__PURE__ */ jsx("path", { d: "m4 6.5 4 4 4-4" })
+	});
+}
+function CheckIcon({ className, ...props }) {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 16 16",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 1.8,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		className,
+		...props,
+		children: /* @__PURE__ */ jsx("path", { d: "m3.5 8.5 3 3 6-7" })
+	});
+}
+const Select$1 = Select.Root;
+/** Re-exported unstyled, for building something other than the default content. */
+const SelectPortal = Select.Portal;
+const SelectPositioner = Select.Positioner;
+const SelectPopup = Select.Popup;
+const SelectList = Select.List;
+const triggerSizes = {
+	sm: "h-control-sm px-2 text-caption",
+	md: "h-control-md px-3 text-callout",
+	lg: "h-control-lg px-4 text-body"
+};
+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)]"
+};
+function SelectTrigger({ className, wrapperClassName, size = "md", ...props }) {
+	return /* @__PURE__ */ jsx(Squircle, {
+		asChild: true,
+		radius: "control",
+		ring: "field",
+		wrapperClassName: cn("cl-press w-full", pressScales[size], wrapperClassName),
+		children: /* @__PURE__ */ jsx(Select.Trigger, {
+			"data-cl-slot": "select-trigger",
+			className: cn("group flex w-full items-center justify-between gap-2", "border border-outline bg-control text-left font-sans text-foreground", "hover:bg-control-highlight", "data-[popup-open]:bg-control-highlight", "data-[disabled]:pointer-events-none data-[disabled]:text-foreground-disabled", "data-[placeholder]:text-foreground-hint", triggerSizes[size], className),
+			...props
+		})
+	});
+}
+function SelectValue({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Select.Value, {
+		"data-cl-slot": "select-value",
+		className: cn("truncate", className),
+		...props
+	});
+}
+/**
+* Flips with the popup and is `aria-hidden` because Base UI already exposes the
+* expanded state; the glyph is decoration, not information.
+*/
+function SelectIcon({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Select.Icon, {
+		"data-cl-slot": "select-icon",
+		className: cn("shrink-0 text-foreground-tertiary", "transition-transform duration-(--cl-duration-fast) ease-cl-out", "group-data-[popup-open]:rotate-180", "[&_svg]:size-4", className),
+		...props,
+		children: /* @__PURE__ */ jsx(ChevronDownIcon, {})
+	});
+}
+/**
+* Portal, positioner and popup in the composition everyone actually wants.
+*
+* Two details come straight from Base UI:
+*
+* - `origin-[var(--transform-origin)]` — the positioner computes where the
+*   popup should *appear to grow from* based on the trigger's position, so the
+*   scale-in reads as the trigger unfolding rather than a box fading in.
+* - `--available-height` / `--anchor-width` — measured space, so the list never
+*   spills past the viewport and the popup can match the trigger's width.
+*/
+function SelectContent({ className, wrapperClassName, children, sideOffset, side, align = "start", ...props }) {
+	const positionerRef = useRef(null);
+	const themedSideOffset = () => {
+		const element = positionerRef.current;
+		if (!element) return 0;
+		const value = element.ownerDocument.defaultView?.getComputedStyle(element).getPropertyValue("--cl-select-side-offset");
+		return Number.parseFloat(value ?? "") || 0;
+	};
+	return /* @__PURE__ */ jsx(Select.Portal, { children: /* @__PURE__ */ jsx(Select.Positioner, {
+		ref: positionerRef,
+		sideOffset: sideOffset ?? themedSideOffset,
+		side,
+		align,
+		className: "z-50 outline-none select-none",
+		children: /* @__PURE__ */ jsx(Squircle, {
+			asChild: true,
+			radius: "medium",
+			wrapperClassName: cn("cl-enter-root origin-[var(--transform-origin)] w-fit", "min-w-[var(--anchor-width)] max-w-[min(var(--cl-select-max-width),var(--available-width))]", wrapperClassName),
+			children: /* @__PURE__ */ jsx(Select.Popup, {
+				"data-cl-slot": "select-content",
+				className: cn("cl-exit-sentinel cl-frost p-1 font-sans text-foreground", className),
+				...props,
+				children: /* @__PURE__ */ jsx(Select.List, {
+					className: "max-h-[min(var(--available-height),var(--cl-select-max-height))] overflow-y-auto overscroll-contain",
+					children
+				})
+			})
+		})
+	}) });
+}
+const itemBase = [
+	"relative flex cursor-default items-center gap-2 rounded-item px-2 py-1.5",
+	"text-callout text-foreground-secondary outline-none select-none",
+	"data-[highlighted]:bg-control data-[highlighted]:text-foreground",
+	"data-[selected]:bg-accent-background data-[selected]:text-foreground",
+	"data-[disabled]:pointer-events-none data-[disabled]:text-foreground-disabled",
+	"[&_svg]:size-4",
+	"transition-colors duration-(--cl-duration-fast) ease-cl-out"
+].join(" ");
+/**
+* The item radius has its own token so nested corners remain comfortable
+* inside the medium-radius popup.
+*/
+function SelectItem({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Select.Item, {
+		"data-cl-slot": "select-item",
+		className: cn(itemBase, className),
+		...props
+	});
+}
+/**
+* The selected mark, on the **trailing** edge of its item.
+*
+* The row is `[leading] [label] [gap] [check]`, which is the design's own — the
+* check belongs after the value, where the eye already is, and it is what keeps
+* the row honest in two ways that are easy to lose by reordering the JSX:
+*
+* - every row's label starts in the same column, because an unselected row has no
+*   indicator at all and a leading one would indent only the selected row;
+* - Base UI aligns the popup so the selected item's *text* sits over the
+*   trigger's value text (native `<select>`, and the design's own overlap). A
+*   leading indicator makes that text column 24px wider than the trigger's, so the
+*   whole popup lands that far to the left of its anchor.
+*
+* `ml-auto` states the position in the indicator rather than relying on a sibling
+* growing, so a row without a label still keeps its mark on the trailing edge.
+*/
+function SelectItemIndicator({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Select.ItemIndicator, {
+		"data-cl-slot": "select-item-indicator",
+		className: cn("ml-auto flex w-4 shrink-0 items-center justify-center text-accent", className),
+		...props,
+		children: /* @__PURE__ */ jsx(CheckIcon, {})
+	});
+}
+/**
+* The label, which takes the row's free space so the trailing indicator is pushed
+* against the far edge — the `Expanded` of the Flutter row, and what lets a long
+* label truncate instead of moving the check out of the popup.
+*/
+function SelectItemText({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Select.ItemText, {
+		className: cn("grow truncate", className),
+		...props
+	});
+}
+function SelectGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Select.Group, {
+		className,
+		...props
+	});
+}
+function SelectGroupLabel({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Select.GroupLabel, {
+		className: cn("px-2 py-1.5 text-label text-foreground-hint", className),
+		...props
+	});
+}
+function SelectSeparator({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Select.Separator, {
+		className: cn("my-1 h-px bg-separator", className),
+		...props
+	});
+}
+function SelectLabel({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Select.Label, {
+		className: cn("text-label text-foreground-tertiary", className),
+		...props
+	});
+}
+//#endregion
+export { Select$1 as Select, SelectContent, SelectGroup, SelectGroupLabel, SelectIcon, SelectItem, SelectItemIndicator, SelectItemText, SelectLabel, SelectList, SelectPopup, SelectPortal, SelectPositioner, SelectSeparator, SelectTrigger, SelectValue };
+
+//# sourceMappingURL=select.js.map

package/dist/ui/select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.js","names":["Select","BaseSelect"],"sources":["../../src/ui/select.tsx"],"sourcesContent":["\"use client\";\n\nimport { Select as BaseSelect } from \"@base-ui/react/select\";\nimport { type ComponentProps, useRef } from \"react\";\nimport { Squircle } from \"@/lib/squircle\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * Inlined rather than pulled from an icon library: three glyphs is not worth a\n * dependency in a component consumers copy into their own project, and swapping\n * `lucide-react` in later is a one-line change per icon via `components.json`.\n */\nfunction ChevronDownIcon({ className, ...props }: ComponentProps<\"svg\">) {\n  return (\n    <svg\n      viewBox=\"0 0 16 16\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={1.6}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden=\"true\"\n      className={className}\n      {...props}\n    >\n      <path d=\"m4 6.5 4 4 4-4\" />\n    </svg>\n  );\n}\n\nfunction CheckIcon({ className, ...props }: ComponentProps<\"svg\">) {\n  return (\n    <svg\n      viewBox=\"0 0 16 16\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={1.8}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden=\"true\"\n      className={className}\n      {...props}\n    >\n      <path d=\"m3.5 8.5 3 3 6-7\" />\n    </svg>\n  );\n}\n\nexport const Select: typeof BaseSelect.Root = BaseSelect.Root;\n\n/** Re-exported unstyled, for building something other than the default content. */\nexport const SelectPortal: typeof BaseSelect.Portal = BaseSelect.Portal;\nexport const SelectPositioner: typeof BaseSelect.Positioner = BaseSelect.Positioner;\nexport const SelectPopup: typeof BaseSelect.Popup = BaseSelect.Popup;\nexport const SelectList: typeof BaseSelect.List = BaseSelect.List;\n\nexport type SelectTriggerProps = Omit<ComponentProps<typeof BaseSelect.Trigger>, \"className\"> & {\n  className?: string;\n  /** Applied to the wrapper, which is what a caller's layout sizes. */\n  wrapperClassName?: string;\n  /**\n   * Shared control-height tokens. Defaults to `md` rather than\n   * the button's `lg`, because a select is usually one control among several in\n   * a dense row.\n   */\n  size?: \"sm\" | \"md\" | \"lg\";\n};\n\nconst triggerSizes = {\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} as const;\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 function SelectTrigger({\n  className,\n  wrapperClassName,\n  size = \"md\",\n  ...props\n}: SelectTriggerProps) {\n  return (\n    <Squircle\n      asChild\n      radius=\"control\"\n      ring=\"field\"\n      wrapperClassName={cn(\"cl-press w-full\", pressScales[size], wrapperClassName)}\n    >\n      <BaseSelect.Trigger\n        data-cl-slot=\"select-trigger\"\n        className={cn(\n          \"group flex w-full items-center justify-between gap-2\",\n          \"border border-outline bg-control text-left font-sans text-foreground\",\n          \"hover:bg-control-highlight\",\n          \"data-[popup-open]:bg-control-highlight\",\n          \"data-[disabled]:pointer-events-none data-[disabled]:text-foreground-disabled\",\n          \"data-[placeholder]:text-foreground-hint\",\n          triggerSizes[size],\n          className,\n        )}\n        {...props}\n      />\n    </Squircle>\n  );\n}\n\nexport type SelectValueProps = Omit<ComponentProps<typeof BaseSelect.Value>, \"className\"> & {\n  className?: string;\n};\n\nexport function SelectValue({ className, ...props }: SelectValueProps) {\n  return (\n    <BaseSelect.Value\n      data-cl-slot=\"select-value\"\n      className={cn(\"truncate\", className)}\n      {...props}\n    />\n  );\n}\n\nexport type SelectIconProps = Omit<ComponentProps<typeof BaseSelect.Icon>, \"className\"> & {\n  className?: string;\n};\n\n/**\n * Flips with the popup and is `aria-hidden` because Base UI already exposes the\n * expanded state; the glyph is decoration, not information.\n */\nexport function SelectIcon({ className, ...props }: SelectIconProps) {\n  return (\n    <BaseSelect.Icon\n      data-cl-slot=\"select-icon\"\n      className={cn(\n        \"shrink-0 text-foreground-tertiary\",\n        \"transition-transform duration-(--cl-duration-fast) ease-cl-out\",\n        \"group-data-[popup-open]:rotate-180\",\n        \"[&_svg]:size-4\",\n        className,\n      )}\n      {...props}\n    >\n      <ChevronDownIcon />\n    </BaseSelect.Icon>\n  );\n}\n\nexport type SelectContentProps = Omit<ComponentProps<typeof BaseSelect.Popup>, \"className\"> & {\n  /** Applied to the clipped element: the frost, padding and text. */\n  className?: string;\n  /** Applied to the wrapper, which is what is positioned and animated. */\n  wrapperClassName?: string;\n  /** Gap between the trigger and the popup, in px. */\n  sideOffset?: number;\n  /** Preferred side; Base UI flips when there is not enough room. */\n  side?: ComponentProps<typeof BaseSelect.Positioner>[\"side\"];\n  align?: ComponentProps<typeof BaseSelect.Positioner>[\"align\"];\n};\n\n/**\n * Portal, positioner and popup in the composition everyone actually wants.\n *\n * Two details come straight from Base UI:\n *\n * - `origin-[var(--transform-origin)]` — the positioner computes where the\n *   popup should *appear to grow from* based on the trigger's position, so the\n *   scale-in reads as the trigger unfolding rather than a box fading in.\n * - `--available-height` / `--anchor-width` — measured space, so the list never\n *   spills past the viewport and the popup can match the trigger's width.\n */\nexport function SelectContent({\n  className,\n  wrapperClassName,\n  children,\n  sideOffset,\n  side,\n  align = \"start\",\n  ...props\n}: SelectContentProps) {\n  const positionerRef = useRef<HTMLDivElement>(null);\n  const themedSideOffset = () => {\n    const element = positionerRef.current;\n    if (!element) return 0;\n    const value = element.ownerDocument.defaultView\n      ?.getComputedStyle(element)\n      .getPropertyValue(\"--cl-select-side-offset\");\n    return Number.parseFloat(value ?? \"\") || 0;\n  };\n\n  return (\n    <BaseSelect.Portal>\n      <BaseSelect.Positioner\n        ref={positionerRef}\n        sideOffset={sideOffset ?? themedSideOffset}\n        side={side}\n        align={align}\n        className=\"z-50 outline-none select-none\"\n      >\n        {/*\n          The width constraints and the entrance sit on the wrapper: it is what\n          the SVG overlays anchor to, so it has to be exactly the shape's box,\n          and it is what `.cl-enter-root` scales. `--transform-origin` is set by\n          Base UI on the positioner above and inherits down, so the popup still\n          grows out of the trigger.\n        */}\n        <Squircle\n          asChild\n          radius=\"medium\"\n          wrapperClassName={cn(\n            \"cl-enter-root origin-[var(--transform-origin)] w-fit\",\n            \"min-w-[var(--anchor-width)] max-w-[min(var(--cl-select-max-width),var(--available-width))]\",\n            wrapperClassName,\n          )}\n        >\n          <BaseSelect.Popup\n            data-cl-slot=\"select-content\"\n            className={cn(\"cl-exit-sentinel cl-frost p-1 font-sans text-foreground\", className)}\n            {...props}\n          >\n            <BaseSelect.List className=\"max-h-[min(var(--available-height),var(--cl-select-max-height))] overflow-y-auto overscroll-contain\">\n              {children}\n            </BaseSelect.List>\n          </BaseSelect.Popup>\n        </Squircle>\n      </BaseSelect.Positioner>\n    </BaseSelect.Portal>\n  );\n}\n\nexport type SelectItemProps = Omit<ComponentProps<typeof BaseSelect.Item>, \"className\"> & {\n  className?: string;\n};\n\nconst itemBase = [\n  \"relative flex cursor-default items-center gap-2 rounded-item px-2 py-1.5\",\n  \"text-callout text-foreground-secondary outline-none select-none\",\n  \"data-[highlighted]:bg-control data-[highlighted]:text-foreground\",\n  \"data-[selected]:bg-accent-background data-[selected]:text-foreground\",\n  \"data-[disabled]:pointer-events-none data-[disabled]:text-foreground-disabled\",\n  \"[&_svg]:size-4\",\n  \"transition-colors duration-(--cl-duration-fast) ease-cl-out\",\n].join(\" \");\n\n/**\n * The item radius has its own token so nested corners remain comfortable\n * inside the medium-radius popup.\n */\nexport function SelectItem({ className, ...props }: SelectItemProps) {\n  return (\n    <BaseSelect.Item data-cl-slot=\"select-item\" className={cn(itemBase, className)} {...props} />\n  );\n}\n\nexport type SelectItemIndicatorProps = Omit<\n  ComponentProps<typeof BaseSelect.ItemIndicator>,\n  \"className\"\n> & { className?: string };\n\n/**\n * The selected mark, on the **trailing** edge of its item.\n *\n * The row is `[leading] [label] [gap] [check]`, which is the design's own — the\n * check belongs after the value, where the eye already is, and it is what keeps\n * the row honest in two ways that are easy to lose by reordering the JSX:\n *\n * - every row's label starts in the same column, because an unselected row has no\n *   indicator at all and a leading one would indent only the selected row;\n * - Base UI aligns the popup so the selected item's *text* sits over the\n *   trigger's value text (native `<select>`, and the design's own overlap). A\n *   leading indicator makes that text column 24px wider than the trigger's, so the\n *   whole popup lands that far to the left of its anchor.\n *\n * `ml-auto` states the position in the indicator rather than relying on a sibling\n * growing, so a row without a label still keeps its mark on the trailing edge.\n */\nexport function SelectItemIndicator({ className, ...props }: SelectItemIndicatorProps) {\n  return (\n    <BaseSelect.ItemIndicator\n      data-cl-slot=\"select-item-indicator\"\n      className={cn(\"ml-auto flex w-4 shrink-0 items-center justify-center text-accent\", className)}\n      {...props}\n    >\n      <CheckIcon />\n    </BaseSelect.ItemIndicator>\n  );\n}\n\nexport type SelectItemTextProps = Omit<ComponentProps<typeof BaseSelect.ItemText>, \"className\"> & {\n  className?: string;\n};\n\n/**\n * The label, which takes the row's free space so the trailing indicator is pushed\n * against the far edge — the `Expanded` of the Flutter row, and what lets a long\n * label truncate instead of moving the check out of the popup.\n */\nexport function SelectItemText({ className, ...props }: SelectItemTextProps) {\n  return <BaseSelect.ItemText className={cn(\"grow truncate\", className)} {...props} />;\n}\n\nexport type SelectGroupProps = Omit<ComponentProps<typeof BaseSelect.Group>, \"className\"> & {\n  className?: string;\n};\n\nexport function SelectGroup({ className, ...props }: SelectGroupProps) {\n  return <BaseSelect.Group className={className} {...props} />;\n}\n\nexport type SelectGroupLabelProps = Omit<\n  ComponentProps<typeof BaseSelect.GroupLabel>,\n  \"className\"\n> & { className?: string };\n\nexport function SelectGroupLabel({ className, ...props }: SelectGroupLabelProps) {\n  return (\n    <BaseSelect.GroupLabel\n      className={cn(\"px-2 py-1.5 text-label text-foreground-hint\", className)}\n      {...props}\n    />\n  );\n}\n\nexport type SelectSeparatorProps = Omit<\n  ComponentProps<typeof BaseSelect.Separator>,\n  \"className\"\n> & { className?: string };\n\nexport function SelectSeparator({ className, ...props }: SelectSeparatorProps) {\n  return <BaseSelect.Separator className={cn(\"my-1 h-px bg-separator\", className)} {...props} />;\n}\n\nexport type SelectLabelProps = Omit<ComponentProps<typeof BaseSelect.Label>, \"className\"> & {\n  className?: string;\n};\n\nexport function SelectLabel({ className, ...props }: SelectLabelProps) {\n  return (\n    <BaseSelect.Label className={cn(\"text-label text-foreground-tertiary\", className)} {...props} />\n  );\n}\n"],"mappings":"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"}

package/dist/ui/tooltip.d.ts

@@ -0,0 +1,108 @@
+import { AnchoredSide } from "../lib/anchored.js";
+import { ComponentProps, ReactNode } from "react";
+import { Tooltip } from "@base-ui/react/tooltip";
+//#region src/ui/tooltip.d.ts
+export type TooltipProps = ComponentProps<typeof Tooltip.Root>;
+export type TooltipMotion = "default" | "morph";
+/**
+ * A tooltip and its trigger.
+ *
+ * `disableHoverablePopup` defaults to on, which Base UI does not: a ClaraLight
+ * tooltip is inert, so there is no popup to hover and keeping one open while
+ * the pointer travels towards it only delays the close. Pass `false` to get
+ * Base UI's behaviour back — worth doing only alongside a `TooltipContent` that
+ * has been made interactive.
+ */
+declare function Tooltip$1({ disableHoverablePopup, ...props }: TooltipProps): import("react").JSX.Element;
+/** Re-exported unstyled, for building something other than the default content. */
+export declare const TooltipPortal: typeof Tooltip.Portal;
+export declare const TooltipPositioner: typeof Tooltip.Positioner;
+export declare const TooltipPopup: typeof Tooltip.Popup;
+export declare const TooltipArrow: typeof Tooltip.Arrow;
+export declare const TooltipViewport: typeof Tooltip.Viewport;
+export type TooltipProviderProps = ComponentProps<typeof Tooltip.Provider>;
+/**
+ * Shares one dwell across a group of tooltips: once any of them has been shown,
+ * the next opens instantly until `timeout` has passed.
+ *
+ * Worth wiring up even for a single tooltip — scanning a toolbar otherwise
+ * means waiting out the dwell at every control.
+ *
+ * `timeout` reads `--cl-tooltip-grace` from the document, not from an element:
+ * the provider renders no DOM of its own, and a grace period is a property of
+ * the whole document's pointer, not of one subtree's theme.
+ */
+export declare function TooltipProvider({ timeout, ...props }: TooltipProviderProps): import("react").JSX.Element;
+export type TooltipTriggerProps = Omit<ComponentProps<typeof Tooltip.Trigger>, "className"> & {
+  className?: string;
+};
+/**
+ * Hover and keyboard focus reveal the tooltip; Base UI owns both, along with
+ * dismissing it on Escape.
+ *
+ * There is deliberately no touch behaviour. A tooltip that needs a long press
+ * to read is a tooltip nobody reads — on touch, put the information in the
+ * interface or use a `Popover`.
+ *
+ * The dwell comes from `--cl-tooltip-delay` on the trigger's own cascade, so a
+ * scoped override applies to the controls inside it.
+ */
+export declare function TooltipTrigger({ className, delay, closeDelay, ...props }: TooltipTriggerProps): import("react").JSX.Element;
+export type TooltipContentProps = Omit<ComponentProps<typeof Tooltip.Popup>, "className"> & {
+  /** Applied to the clipped element: the frost, padding and text. */
+  className?: string;
+  /** Applied to the wrapper, which is what is positioned and animated. */
+  wrapperClassName?: string;
+  /** Preferred side of the trigger. Base UI flips when there is not enough room. */
+  side?: AnchoredSide;
+  align?: ComponentProps<typeof Tooltip.Positioner>["align"];
+  /** Gap between the trigger and the surface, in px. Measured from the arrow's tip. */
+  sideOffset?: number;
+  /** Space kept clear of the viewport edge, in px. */
+  collisionPadding?: number;
+  /** Whether the surface points at its trigger. */
+  arrow?: boolean;
+  /** How content behaves when one popup moves between multiple triggers. */
+  motion?: TooltipMotion;
+  children?: ReactNode;
+};
+/**
+ * The same anchored surface as `Popover`, one step quieter: a medium radius, a
+ * plain outline rather than the strong one, and the label's own padding.
+ *
+ * A tooltip never takes the pointer — hovering it must not keep it open, and it
+ * must not sit between the pointer and what it describes — so the whole
+ * positioner is inert.
+ */
+export declare function TooltipContent({ className, wrapperClassName, side, align, sideOffset, collisionPadding, arrow, motion, children, ...props }: TooltipContentProps): import("react").JSX.Element;
+export type TooltipGroupProps = Omit<TooltipProps, "children"> & {
+  /** The triggers that share one popup. Pass each label through `payload`. */
+  children?: ReactNode;
+  /** Applied to the shared popup surface. */
+  className?: string;
+  /** Applied to the shared popup wrapper. */
+  wrapperClassName?: string;
+  /** Preferred side of the trigger. Base UI flips when there is not enough room. */
+  side?: AnchoredSide;
+  align?: ComponentProps<typeof Tooltip.Positioner>["align"];
+  /** Gap between the trigger and the surface, in px. */
+  sideOffset?: number;
+  /** Space kept clear of the viewport edge, in px. */
+  collisionPadding?: number;
+  /** Whether the surface points at its trigger. */
+  arrow?: boolean;
+  /** How content behaves when the popup moves between triggers. */
+  motion?: TooltipMotion;
+};
+/**
+ * Several triggers backed by one mounted tooltip popup.
+ *
+ * Base UI keeps the popup alive while the active trigger changes, which lets
+ * ClaraLight animate the position, surface size and content instead of closing
+ * one tooltip and opening another. The regular `Tooltip` remains the right
+ * choice when each trigger needs its own placement or independent lifecycle.
+ */
+export declare function TooltipGroup({ children, disableHoverablePopup, motion, side, align, sideOffset, collisionPadding, arrow, className, wrapperClassName, ...rootProps }: TooltipGroupProps): import("react").JSX.Element;
+//#endregion
+export { Tooltip$1 as Tooltip };
+//# sourceMappingURL=tooltip.d.ts.map

package/dist/ui/tooltip.js

@@ -0,0 +1,142 @@
+"use client";
+import { cn } from "../lib/utils.js";
+import { AnchoredSurface, themedNumber, useThemedNumber } from "../lib/anchored.js";
+import { useRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Tooltip } from "@base-ui/react/tooltip";
+//#region src/ui/tooltip.tsx
+/**
+* A tooltip and its trigger.
+*
+* `disableHoverablePopup` defaults to on, which Base UI does not: a ClaraLight
+* tooltip is inert, so there is no popup to hover and keeping one open while
+* the pointer travels towards it only delays the close. Pass `false` to get
+* Base UI's behaviour back — worth doing only alongside a `TooltipContent` that
+* has been made interactive.
+*/
+function Tooltip$1({ disableHoverablePopup = true, ...props }) {
+	return /* @__PURE__ */ jsx(Tooltip.Root, {
+		disableHoverablePopup,
+		...props
+	});
+}
+/** Re-exported unstyled, for building something other than the default content. */
+const TooltipPortal = Tooltip.Portal;
+const TooltipPositioner = Tooltip.Positioner;
+const TooltipPopup = Tooltip.Popup;
+const TooltipArrow = Tooltip.Arrow;
+const TooltipViewport = Tooltip.Viewport;
+/**
+* Shares one dwell across a group of tooltips: once any of them has been shown,
+* the next opens instantly until `timeout` has passed.
+*
+* Worth wiring up even for a single tooltip — scanning a toolbar otherwise
+* means waiting out the dwell at every control.
+*
+* `timeout` reads `--cl-tooltip-grace` from the document, not from an element:
+* the provider renders no DOM of its own, and a grace period is a property of
+* the whole document's pointer, not of one subtree's theme.
+*/
+function TooltipProvider({ timeout, ...props }) {
+	const root = useRef(typeof document === "undefined" ? null : document.documentElement);
+	const grace = useThemedNumber(root, "--cl-tooltip-grace");
+	return /* @__PURE__ */ jsx(Tooltip.Provider, {
+		timeout: timeout ?? grace,
+		...props
+	});
+}
+/**
+* Hover and keyboard focus reveal the tooltip; Base UI owns both, along with
+* dismissing it on Escape.
+*
+* There is deliberately no touch behaviour. A tooltip that needs a long press
+* to read is a tooltip nobody reads — on touch, put the information in the
+* interface or use a `Popover`.
+*
+* The dwell comes from `--cl-tooltip-delay` on the trigger's own cascade, so a
+* scoped override applies to the controls inside it.
+*/
+function TooltipTrigger({ className, delay, closeDelay, ...props }) {
+	const ref = useRef(null);
+	const dwell = useThemedNumber(ref, "--cl-tooltip-delay");
+	const close = useThemedNumber(ref, "--cl-tooltip-close-delay");
+	return /* @__PURE__ */ jsx(Tooltip.Trigger, {
+		ref,
+		delay: delay ?? dwell,
+		closeDelay: closeDelay ?? close,
+		className,
+		...props
+	});
+}
+/**
+* The same anchored surface as `Popover`, one step quieter: a medium radius, a
+* plain outline rather than the strong one, and the label's own padding.
+*
+* A tooltip never takes the pointer — hovering it must not keep it open, and it
+* must not sit between the pointer and what it describes — so the whole
+* positioner is inert.
+*/
+function TooltipContent({ className, wrapperClassName, side = "top", align = "center", sideOffset, collisionPadding, arrow = true, motion = "default", children, ...props }) {
+	const positionerRef = useRef(null);
+	const margin = useThemedNumber(positionerRef, "--cl-anchor-margin");
+	return /* @__PURE__ */ jsx(Tooltip.Portal, { children: /* @__PURE__ */ jsx(Tooltip.Positioner, {
+		ref: positionerRef,
+		side,
+		align,
+		sideOffset: sideOffset ?? (() => themedNumber(positionerRef.current, "--cl-anchor-gap") ?? 0),
+		collisionPadding: collisionPadding ?? margin,
+		sticky: true,
+		"data-cl-anchor-track": motion === "morph" ? "" : void 0,
+		className: cn("pointer-events-none z-50 outline-none", motion === "morph" && "cl-tooltip-positioner"),
+		children: /* @__PURE__ */ jsx(AnchoredSurface, {
+			asChild: true,
+			radius: "medium",
+			side,
+			arrow,
+			tailMotion: motion === "morph" ? "fast" : "none",
+			wrapperClassName: cn("w-fit", wrapperClassName),
+			children: /* @__PURE__ */ jsxs(Tooltip.Popup, {
+				"data-cl-slot": "tooltip-content",
+				className: cn("cl-exit-sentinel cl-frost border-outline shadow-none", "font-sans text-callout text-foreground-secondary", "[--cl-anchored-padding-x:var(--cl-tooltip-padding-x)]", "[--cl-anchored-padding-y:var(--cl-tooltip-padding-y)]", motion === "morph" && "cl-tooltip-popup", className),
+				...props,
+				children: [motion === "morph" ? /* @__PURE__ */ jsx(Tooltip.Viewport, {
+					"data-cl-slot": "tooltip-viewport",
+					className: "cl-tooltip-viewport",
+					children
+				}) : children, arrow ? /* @__PURE__ */ jsx(Tooltip.Arrow, {
+					"data-cl-anchor-probe": "",
+					className: "cl-anchor-probe"
+				}) : null]
+			})
+		})
+	}) });
+}
+/**
+* Several triggers backed by one mounted tooltip popup.
+*
+* Base UI keeps the popup alive while the active trigger changes, which lets
+* ClaraLight animate the position, surface size and content instead of closing
+* one tooltip and opening another. The regular `Tooltip` remains the right
+* choice when each trigger needs its own placement or independent lifecycle.
+*/
+function TooltipGroup({ children, disableHoverablePopup = true, motion = "morph", side, align, sideOffset, collisionPadding, arrow, className, wrapperClassName, ...rootProps }) {
+	return /* @__PURE__ */ jsx(Tooltip.Root, {
+		disableHoverablePopup,
+		...rootProps,
+		children: ({ payload }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [children, /* @__PURE__ */ jsx(TooltipContent, {
+			motion,
+			side,
+			align,
+			sideOffset,
+			collisionPadding,
+			arrow,
+			className,
+			wrapperClassName,
+			children: payload
+		})] })
+	});
+}
+//#endregion
+export { Tooltip$1 as Tooltip, TooltipArrow, TooltipContent, TooltipGroup, TooltipPopup, TooltipPortal, TooltipPositioner, TooltipProvider, TooltipTrigger, TooltipViewport };
+
+//# sourceMappingURL=tooltip.js.map

package/dist/ui/tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.js","names":["Tooltip","BaseTooltip"],"sources":["../../src/ui/tooltip.tsx"],"sourcesContent":["\"use client\";\n\nimport { Tooltip as BaseTooltip } from \"@base-ui/react/tooltip\";\nimport { type ComponentProps, type ReactNode, useRef } from \"react\";\nimport { type AnchoredSide, AnchoredSurface, themedNumber, useThemedNumber } from \"@/lib/anchored\";\nimport { cn } from \"@/lib/utils\";\n\nexport type TooltipProps = ComponentProps<typeof BaseTooltip.Root>;\nexport type TooltipMotion = \"default\" | \"morph\";\n\n/**\n * A tooltip and its trigger.\n *\n * `disableHoverablePopup` defaults to on, which Base UI does not: a ClaraLight\n * tooltip is inert, so there is no popup to hover and keeping one open while\n * the pointer travels towards it only delays the close. Pass `false` to get\n * Base UI's behaviour back — worth doing only alongside a `TooltipContent` that\n * has been made interactive.\n */\nexport function Tooltip({ disableHoverablePopup = true, ...props }: TooltipProps) {\n  return <BaseTooltip.Root disableHoverablePopup={disableHoverablePopup} {...props} />;\n}\n\n/** Re-exported unstyled, for building something other than the default content. */\nexport const TooltipPortal: typeof BaseTooltip.Portal = BaseTooltip.Portal;\nexport const TooltipPositioner: typeof BaseTooltip.Positioner = BaseTooltip.Positioner;\nexport const TooltipPopup: typeof BaseTooltip.Popup = BaseTooltip.Popup;\nexport const TooltipArrow: typeof BaseTooltip.Arrow = BaseTooltip.Arrow;\nexport const TooltipViewport: typeof BaseTooltip.Viewport = BaseTooltip.Viewport;\n\nexport type TooltipProviderProps = ComponentProps<typeof BaseTooltip.Provider>;\n\n/**\n * Shares one dwell across a group of tooltips: once any of them has been shown,\n * the next opens instantly until `timeout` has passed.\n *\n * Worth wiring up even for a single tooltip — scanning a toolbar otherwise\n * means waiting out the dwell at every control.\n *\n * `timeout` reads `--cl-tooltip-grace` from the document, not from an element:\n * the provider renders no DOM of its own, and a grace period is a property of\n * the whole document's pointer, not of one subtree's theme.\n */\nexport function TooltipProvider({ timeout, ...props }: TooltipProviderProps) {\n  // Not a ref onto anything rendered here — the provider renders nothing. It\n  // reuses the reader's shape to keep the read in a layout effect rather than\n  // in render, where it would force a synchronous layout on every pass.\n  const root = useRef<Element | null>(\n    typeof document === \"undefined\" ? null : document.documentElement,\n  );\n  const grace = useThemedNumber(root, \"--cl-tooltip-grace\");\n  return <BaseTooltip.Provider timeout={timeout ?? grace} {...props} />;\n}\n\nexport type TooltipTriggerProps = Omit<ComponentProps<typeof BaseTooltip.Trigger>, \"className\"> & {\n  className?: string;\n};\n\n/**\n * Hover and keyboard focus reveal the tooltip; Base UI owns both, along with\n * dismissing it on Escape.\n *\n * There is deliberately no touch behaviour. A tooltip that needs a long press\n * to read is a tooltip nobody reads — on touch, put the information in the\n * interface or use a `Popover`.\n *\n * The dwell comes from `--cl-tooltip-delay` on the trigger's own cascade, so a\n * scoped override applies to the controls inside it.\n */\nexport function TooltipTrigger({ className, delay, closeDelay, ...props }: TooltipTriggerProps) {\n  const ref = useRef<HTMLButtonElement>(null);\n  const dwell = useThemedNumber(ref, \"--cl-tooltip-delay\");\n  const close = useThemedNumber(ref, \"--cl-tooltip-close-delay\");\n  return (\n    <BaseTooltip.Trigger\n      ref={ref}\n      delay={delay ?? dwell}\n      closeDelay={closeDelay ?? close}\n      className={className}\n      {...props}\n    />\n  );\n}\n\nexport type TooltipContentProps = Omit<ComponentProps<typeof BaseTooltip.Popup>, \"className\"> & {\n  /** Applied to the clipped element: the frost, padding and text. */\n  className?: string;\n  /** Applied to the wrapper, which is what is positioned and animated. */\n  wrapperClassName?: string;\n  /** Preferred side of the trigger. Base UI flips when there is not enough room. */\n  side?: AnchoredSide;\n  align?: ComponentProps<typeof BaseTooltip.Positioner>[\"align\"];\n  /** Gap between the trigger and the surface, in px. Measured from the arrow's tip. */\n  sideOffset?: number;\n  /** Space kept clear of the viewport edge, in px. */\n  collisionPadding?: number;\n  /** Whether the surface points at its trigger. */\n  arrow?: boolean;\n  /** How content behaves when one popup moves between multiple triggers. */\n  motion?: TooltipMotion;\n  children?: ReactNode;\n};\n\n/**\n * The same anchored surface as `Popover`, one step quieter: a medium radius, a\n * plain outline rather than the strong one, and the label's own padding.\n *\n * A tooltip never takes the pointer — hovering it must not keep it open, and it\n * must not sit between the pointer and what it describes — so the whole\n * positioner is inert.\n */\nexport function TooltipContent({\n  className,\n  wrapperClassName,\n  side = \"top\",\n  align = \"center\",\n  sideOffset,\n  collisionPadding,\n  arrow = true,\n  motion = \"default\",\n  children,\n  ...props\n}: TooltipContentProps) {\n  const positionerRef = useRef<HTMLDivElement>(null);\n  const margin = useThemedNumber(positionerRef, \"--cl-anchor-margin\");\n\n  return (\n    <BaseTooltip.Portal>\n      <BaseTooltip.Positioner\n        ref={positionerRef}\n        side={side}\n        align={align}\n        sideOffset={\n          sideOffset ?? (() => themedNumber(positionerRef.current, \"--cl-anchor-gap\") ?? 0)\n        }\n        collisionPadding={collisionPadding ?? margin}\n        sticky\n        /*\n         * `data-cl-anchor-track` marks this as the element whose travel the tail\n         * leads. Base UI writes the place it is going to as inline insets and the\n         * transition below walks them, so the surface can read its own remaining\n         * travel off it and keep the tail on the new trigger while the body is\n         * still on its way; see `AnchoredSurface`.\n         */\n        data-cl-anchor-track={motion === \"morph\" ? \"\" : undefined}\n        className={cn(\n          \"pointer-events-none z-50 outline-none\",\n          motion === \"morph\" && \"cl-tooltip-positioner\",\n        )}\n      >\n        <AnchoredSurface\n          asChild\n          radius=\"medium\"\n          side={side}\n          arrow={arrow}\n          tailMotion={motion === \"morph\" ? \"fast\" : \"none\"}\n          wrapperClassName={cn(\"w-fit\", wrapperClassName)}\n        >\n          <BaseTooltip.Popup\n            data-cl-slot=\"tooltip-content\"\n            className={cn(\n              \"cl-exit-sentinel cl-frost border-outline shadow-none\",\n              \"font-sans text-callout text-foreground-secondary\",\n              \"[--cl-anchored-padding-x:var(--cl-tooltip-padding-x)]\",\n              \"[--cl-anchored-padding-y:var(--cl-tooltip-padding-y)]\",\n              motion === \"morph\" && \"cl-tooltip-popup\",\n              className,\n            )}\n            {...props}\n          >\n            {motion === \"morph\" ? (\n              <BaseTooltip.Viewport data-cl-slot=\"tooltip-viewport\" className=\"cl-tooltip-viewport\">\n                {children}\n              </BaseTooltip.Viewport>\n            ) : (\n              children\n            )}\n            {arrow ? (\n              <BaseTooltip.Arrow data-cl-anchor-probe=\"\" className=\"cl-anchor-probe\" />\n            ) : null}\n          </BaseTooltip.Popup>\n        </AnchoredSurface>\n      </BaseTooltip.Positioner>\n    </BaseTooltip.Portal>\n  );\n}\n\nexport type TooltipGroupProps = Omit<TooltipProps, \"children\"> & {\n  /** The triggers that share one popup. Pass each label through `payload`. */\n  children?: ReactNode;\n  /** Applied to the shared popup surface. */\n  className?: string;\n  /** Applied to the shared popup wrapper. */\n  wrapperClassName?: string;\n  /** Preferred side of the trigger. Base UI flips when there is not enough room. */\n  side?: AnchoredSide;\n  align?: ComponentProps<typeof BaseTooltip.Positioner>[\"align\"];\n  /** Gap between the trigger and the surface, in px. */\n  sideOffset?: number;\n  /** Space kept clear of the viewport edge, in px. */\n  collisionPadding?: number;\n  /** Whether the surface points at its trigger. */\n  arrow?: boolean;\n  /** How content behaves when the popup moves between triggers. */\n  motion?: TooltipMotion;\n};\n\n/**\n * Several triggers backed by one mounted tooltip popup.\n *\n * Base UI keeps the popup alive while the active trigger changes, which lets\n * ClaraLight animate the position, surface size and content instead of closing\n * one tooltip and opening another. The regular `Tooltip` remains the right\n * choice when each trigger needs its own placement or independent lifecycle.\n */\nexport function TooltipGroup({\n  children,\n  disableHoverablePopup = true,\n  motion = \"morph\",\n  side,\n  align,\n  sideOffset,\n  collisionPadding,\n  arrow,\n  className,\n  wrapperClassName,\n  ...rootProps\n}: TooltipGroupProps) {\n  return (\n    <BaseTooltip.Root disableHoverablePopup={disableHoverablePopup} {...rootProps}>\n      {({ payload }) => (\n        <>\n          {children}\n          <TooltipContent\n            motion={motion}\n            side={side}\n            align={align}\n            sideOffset={sideOffset}\n            collisionPadding={collisionPadding}\n            arrow={arrow}\n            className={className}\n            wrapperClassName={wrapperClassName}\n          >\n            {payload as ReactNode}\n          </TooltipContent>\n        </>\n      )}\n    </BaseTooltip.Root>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAmBA,SAAgBA,UAAQ,EAAE,wBAAwB,MAAM,GAAG,SAAuB;CAChF,OAAO,oBAACC,QAAY,MAAb;EAAyC;EAAuB,GAAI;CAAQ,CAAA;AACrF;;AAGA,MAAa,gBAA2CA,QAAY;AACpE,MAAa,oBAAmDA,QAAY;AAC5E,MAAa,eAAyCA,QAAY;AAClE,MAAa,eAAyCA,QAAY;AAClE,MAAa,kBAA+CA,QAAY;;;;;;;;;;;;AAexE,SAAgB,gBAAgB,EAAE,SAAS,GAAG,SAA+B;CAI3E,MAAM,OAAO,OACX,OAAO,aAAa,cAAc,OAAO,SAAS,eACpD;CACA,MAAM,QAAQ,gBAAgB,MAAM,oBAAoB;CACxD,OAAO,oBAACA,QAAY,UAAb;EAAsB,SAAS,WAAW;EAAO,GAAI;CAAQ,CAAA;AACtE;;;;;;;;;;;;AAiBA,SAAgB,eAAe,EAAE,WAAW,OAAO,YAAY,GAAG,SAA8B;CAC9F,MAAM,MAAM,OAA0B,IAAI;CAC1C,MAAM,QAAQ,gBAAgB,KAAK,oBAAoB;CACvD,MAAM,QAAQ,gBAAgB,KAAK,0BAA0B;CAC7D,OACE,oBAACA,QAAY,SAAb;EACO;EACL,OAAO,SAAS;EAChB,YAAY,cAAc;EACf;EACX,GAAI;CACL,CAAA;AAEL;;;;;;;;;AA6BA,SAAgB,eAAe,EAC7B,WACA,kBACA,OAAO,OACP,QAAQ,UACR,YACA,kBACA,QAAQ,MACR,SAAS,WACT,UACA,GAAG,SACmB;CACtB,MAAM,gBAAgB,OAAuB,IAAI;CACjD,MAAM,SAAS,gBAAgB,eAAe,oBAAoB;CAElE,OACE,oBAACA,QAAY,QAAb,EAAA,UACE,oBAACA,QAAY,YAAb;EACE,KAAK;EACC;EACC;EACP,YACE,qBAAqB,aAAa,cAAc,SAAS,iBAAiB,KAAK;EAEjF,kBAAkB,oBAAoB;EACtC,QAAA;EAQA,wBAAsB,WAAW,UAAU,KAAK,KAAA;EAChD,WAAW,GACT,yCACA,WAAW,WAAW,uBACxB;EAEA,UAAA,oBAAC,iBAAD;GACE,SAAA;GACA,QAAO;GACD;GACC;GACP,YAAY,WAAW,UAAU,SAAS;GAC1C,kBAAkB,GAAG,SAAS,gBAAgB;GAE9C,UAAA,qBAACA,QAAY,OAAb;IACE,gBAAa;IACb,WAAW,GACT,wDACA,oDACA,yDACA,yDACA,WAAW,WAAW,oBACtB,SACF;IACA,GAAI;IAVN,UAAA,CAYG,WAAW,UACV,oBAACA,QAAY,UAAb;KAAsB,gBAAa;KAAmB,WAAU;KAC7D;IACmB,CAAA,IAEtB,UAED,QACC,oBAACA,QAAY,OAAb;KAAmB,wBAAqB;KAAG,WAAU;IAAmB,CAAA,IACtE,IACa;;EACJ,CAAA;CACK,CAAA,EACN,CAAA;AAExB;;;;;;;;;AA8BA,SAAgB,aAAa,EAC3B,UACA,wBAAwB,MACxB,SAAS,SACT,MACA,OACA,YACA,kBACA,OACA,WACA,kBACA,GAAG,aACiB;CACpB,OACE,oBAACA,QAAY,MAAb;EAAyC;EAAuB,GAAI;EAChE,WAAA,EAAE,cACF,qBAAA,YAAA,EAAA,UAAA,CACG,UACD,oBAAC,gBAAD;GACU;GACF;GACC;GACK;GACM;GACX;GACI;GACO;GAEjB,UAAA;EACa,CAAA,CAChB,EAAA,CAAA;CAEY,CAAA;AAEtB"}

package/package.json

@@ -0,0 +1,72 @@
+{
+  "name": "@claralight-design/react",
+  "version": "0.0.1",
+  "description": "ClaraLight Design \u2014 a quiet, layered design language for React. Base UI primitives, Tailwind v4 tokens, copy-in source.",
+  "license": "MIT",
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "files": [
+    "dist",
+    "styles"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./styles.css": "./styles/index.css",
+    "./theme.css": "./styles/theme.css",
+    "./base.css": "./styles/base.css",
+    "./anchored.css": "./styles/anchored.css",
+    "./tooltip.css": "./styles/tooltip.css",
+    "./scroll-area.css": "./styles/scroll-area.css",
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "build": "tsdown",
+    "dev": "tsdown --watch",
+    "prepack": "pnpm build && pnpm typecheck",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "check:exports": "publint --strict"
+  },
+  "dependencies": {
+    "@lisse/core": "catalog:",
+    "@lisse/react": "catalog:",
+    "class-variance-authority": "^0.7.1",
+    "cn": "^0.2.6"
+  },
+  "peerDependencies": {
+    "@base-ui/react": "^1.8.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@base-ui/react": "catalog:",
+    "@biomejs/biome": "catalog:",
+    "@types/node": "catalog:",
+    "@types/react": "catalog:",
+    "@types/react-dom": "catalog:",
+    "class-variance-authority": "catalog:",
+    "publint": "catalog:",
+    "react": "catalog:",
+    "react-dom": "catalog:",
+    "tsdown": "catalog:",
+    "typescript": "catalog:",
+    "vitest": "catalog:"
+  },
+  "keywords": [
+    "claralight",
+    "design-system",
+    "react",
+    "base-ui",
+    "tailwindcss",
+    "registry"
+  ],
+  "publishConfig": {
+    "access": "public"
+  }
+}