cortena-ui 1.3.0 → 1.4.0

package/dist/components/sortable-list.js

@@ -0,0 +1,206 @@
+"use client";
+"use client";
+import { cn } from "../lib/cn.js";
+import { GripVertical } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { DndContext, DragOverlay, KeyboardSensor, MouseSensor, PointerSensor, TouchSensor, closestCenter, useSensor, useSensors } from "@dnd-kit/core";
+import { SortableContext, arrayMove, horizontalListSortingStrategy, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+//#region src/components/sortable-list.tsx
+/**
+* SortableList.
+*
+* A reorderable list over dnd-kit: `DndContext` + `SortableContext` around one
+* `useSortable` item per entry. The list owns nothing — it calls `onReorder`
+* with the next array and the consumer stores it. Pointer and keyboard sensors
+* are wired (Space picks up, arrows move, Space drops, Escape cancels) and a
+* `DragOverlay` paints the lifted copy with `--ds-shadow-lg` while the item
+* left behind dims and takes the ring colour.
+*
+* By default the whole row is the drag activator. Pass `handle` to restrict
+* dragging to a `<SortableHandle>` (or any element given `handleProps`) so
+* buttons and inputs inside a row stay clickable.
+*
+* ## Touch
+*
+* A pointer drag and a touch scroll start the same way, so something has to
+* say which one a finger means. In handle mode only the small handle is
+* `touch-none`, so the rest of the row scrolls: nothing to decide. In
+* whole-row mode the whole row is `touch-none`, which is why a touch list
+* whose rows are the activators cannot be scrolled by dragging over them.
+*
+* `touchScroll` is the way out, and it defaults to whichever of those is
+* already true — `true` in handle mode, `false` in whole-row mode, so existing
+* lists behave exactly as before. Setting it `true` on a whole-row list drops
+* `touch-none` and swaps the PointerSensor for a MouseSensor plus a
+* TouchSensor with delay activation: a quick swipe scrolls, a press held for
+* {@link TOUCH_DELAY_MS} picks the row up. `false` in handle mode is the
+* opposite trade — the row never scrolls under a finger.
+*/
+/** How long a finger must rest on a row before it becomes a drag. */
+const TOUCH_DELAY_MS = 250;
+/** How far it may slip in that time and still count as a press, not a scroll. */
+const TOUCH_TOLERANCE_PX = 8;
+/** dnd-kit types its listeners as a bag of `Function`s; narrow them to the handlers they are. */
+function asHandlers(listeners) {
+	return listeners ?? {};
+}
+const noopRef = () => {};
+const inertHandle = { ref: noopRef };
+const SortableItemContext = /* @__PURE__ */ React.createContext({
+	handleProps: inertHandle,
+	isDragging: false,
+	disabled: false
+});
+const itemClassName = /* @__PURE__ */ cn("relative rounded-[var(--ds-radius-md)] outline-none", "focus-visible:ring-[3px] focus-visible:ring-[var(--ds-ring)]/40", "data-[dragging]:opacity-50 data-[dragging]:ring-2 data-[dragging]:ring-[var(--ds-ring)]");
+function SortableItem({ id, item, handle, disabled, touchScroll, renderItem, className }) {
+	const { attributes, listeners, setNodeRef, setActivatorNodeRef, transform, transition, isDragging } = useSortable({
+		id,
+		disabled
+	});
+	const handleProps = React.useMemo(() => ({
+		...attributes,
+		...asHandlers(listeners),
+		ref: setActivatorNodeRef
+	}), [
+		attributes,
+		listeners,
+		setActivatorNodeRef
+	]);
+	const context = React.useMemo(() => ({
+		handleProps,
+		isDragging,
+		disabled
+	}), [
+		handleProps,
+		isDragging,
+		disabled
+	]);
+	const rowActivator = handle ? void 0 : {
+		...attributes,
+		...asHandlers(listeners)
+	};
+	return /* @__PURE__ */ jsx(SortableItemContext.Provider, {
+		value: context,
+		children: /* @__PURE__ */ jsx("li", {
+			ref: setNodeRef,
+			"data-slot": "sortable-item",
+			"data-dragging": isDragging || void 0,
+			"data-disabled": disabled || void 0,
+			style: {
+				transform: CSS.Translate.toString(transform),
+				transition
+			},
+			className: cn(itemClassName, !handle && !disabled && "cursor-grab data-[dragging]:cursor-grabbing", !touchScroll && !disabled && "touch-none", className),
+			...rowActivator,
+			children: renderItem(item, {
+				handleProps,
+				isDragging
+			})
+		})
+	});
+}
+/**
+* A grip button that starts the drag for its row. Reads the row's activator
+* props from context, so it needs no wiring beyond being rendered inside
+* `renderItem`. Hidden (kept in layout) when the list is disabled.
+*/
+function SortableHandle({ className, children, ...props }) {
+	const { handleProps, disabled } = React.useContext(SortableItemContext);
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		"data-slot": "sortable-handle",
+		"aria-label": "Drag to reorder",
+		className: cn("inline-flex size-7 shrink-0 cursor-grab touch-none items-center justify-center", "rounded-[var(--ds-radius-sm)] text-[color:var(--ds-text-tertiary)]", "hover:bg-[var(--ds-hover)] hover:text-[color:var(--ds-muted-foreground)]", "outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--ds-ring)]/40", "active:cursor-grabbing disabled:pointer-events-none disabled:opacity-50", "[&_svg]:size-4 [&_svg]:pointer-events-none", disabled && "invisible", className),
+		disabled,
+		...handleProps,
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(GripVertical, { "aria-hidden": true })
+	});
+}
+function SortableList({ items, getId, onReorder, renderItem, orientation = "vertical", handle = false, disabled = false, touchScroll = handle, itemClassName: itemClass, className, ...props }) {
+	const [activeId, setActiveId] = React.useState(null);
+	const delayTouch = touchScroll && !handle;
+	const pointerSensor = useSensor(PointerSensor, { activationConstraint: { distance: 4 } });
+	const mouseSensor = useSensor(MouseSensor, { activationConstraint: { distance: 4 } });
+	const touchSensor = useSensor(TouchSensor, { activationConstraint: {
+		delay: TOUCH_DELAY_MS,
+		tolerance: TOUCH_TOLERANCE_PX
+	} });
+	const keyboardSensor = useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates });
+	const pointerSensors = useSensors(pointerSensor, keyboardSensor);
+	const splitSensors = useSensors(mouseSensor, touchSensor, keyboardSensor);
+	const sensors = delayTouch ? splitSensors : pointerSensors;
+	const ids = React.useMemo(() => items.map(getId), [items, getId]);
+	const activeItem = activeId === null ? void 0 : items[ids.indexOf(activeId)];
+	const onDragStart = React.useCallback((event) => {
+		setActiveId(event.active.id);
+	}, []);
+	const onDragEnd = React.useCallback((event) => {
+		setActiveId(null);
+		const { active, over } = event;
+		if (!over || active.id === over.id) return;
+		const from = ids.indexOf(active.id);
+		const to = ids.indexOf(over.id);
+		if (from < 0 || to < 0) return;
+		onReorder(arrayMove([...items], from, to), {
+			from,
+			to,
+			activeId: active.id,
+			overId: over.id
+		});
+	}, [
+		ids,
+		items,
+		onReorder
+	]);
+	const onDragCancel = React.useCallback(() => setActiveId(null), []);
+	return /* @__PURE__ */ jsxs(DndContext, {
+		sensors,
+		collisionDetection: closestCenter,
+		onDragStart,
+		onDragEnd,
+		onDragCancel,
+		children: [/* @__PURE__ */ jsx(SortableContext, {
+			items: ids,
+			strategy: orientation === "horizontal" ? horizontalListSortingStrategy : verticalListSortingStrategy,
+			disabled,
+			children: /* @__PURE__ */ jsx("ul", {
+				"data-slot": "sortable-list",
+				"data-orientation": orientation,
+				"data-disabled": disabled || void 0,
+				"data-touch-scroll": touchScroll ? "" : void 0,
+				className: cn("flex list-none gap-2 p-0", orientation === "horizontal" ? "flex-row flex-wrap" : "flex-col", className),
+				...props,
+				children: items.map((item, index) => /* @__PURE__ */ jsx(SortableItem, {
+					id: ids[index] ?? index,
+					item,
+					handle,
+					disabled,
+					touchScroll,
+					renderItem,
+					className: itemClass
+				}, ids[index] ?? index))
+			})
+		}), /* @__PURE__ */ jsx(DragOverlay, { children: activeItem === void 0 ? null : /* @__PURE__ */ jsx(SortableItemContext.Provider, {
+			value: {
+				handleProps: inertHandle,
+				isDragging: true,
+				disabled: false
+			},
+			children: /* @__PURE__ */ jsx("div", {
+				"data-slot": "sortable-overlay",
+				className: cn("cursor-grabbing rounded-[var(--ds-radius-md)] bg-[var(--ds-card)]", "shadow-[var(--ds-shadow-lg)] ring-1 ring-[var(--ds-ring)]", itemClass),
+				children: renderItem(activeItem, {
+					handleProps: inertHandle,
+					isDragging: true
+				})
+			})
+		}) })]
+	});
+}
+//#endregion
+export { SortableHandle, SortableList, arrayMove };
+
+//# sourceMappingURL=sortable-list.js.map

package/dist/components/sortable-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sortable-list.js","names":[],"sources":["../../src/components/sortable-list.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  DndContext,\n  DragOverlay,\n  KeyboardSensor,\n  MouseSensor,\n  PointerSensor,\n  TouchSensor,\n  closestCenter,\n  useSensor,\n  useSensors,\n  type DragEndEvent,\n  type DragStartEvent,\n  type DraggableAttributes,\n  type DraggableSyntheticListeners,\n  type UniqueIdentifier,\n} from \"@dnd-kit/core\";\nimport {\n  SortableContext,\n  arrayMove,\n  horizontalListSortingStrategy,\n  sortableKeyboardCoordinates,\n  useSortable,\n  verticalListSortingStrategy,\n} from \"@dnd-kit/sortable\";\nimport { CSS } from \"@dnd-kit/utilities\";\nimport { GripVertical } from \"lucide-react\";\nimport * as React from \"react\";\nimport { cn } from \"@/lib/cn\";\n\n/**\n * SortableList.\n *\n * A reorderable list over dnd-kit: `DndContext` + `SortableContext` around one\n * `useSortable` item per entry. The list owns nothing — it calls `onReorder`\n * with the next array and the consumer stores it. Pointer and keyboard sensors\n * are wired (Space picks up, arrows move, Space drops, Escape cancels) and a\n * `DragOverlay` paints the lifted copy with `--ds-shadow-lg` while the item\n * left behind dims and takes the ring colour.\n *\n * By default the whole row is the drag activator. Pass `handle` to restrict\n * dragging to a `<SortableHandle>` (or any element given `handleProps`) so\n * buttons and inputs inside a row stay clickable.\n *\n * ## Touch\n *\n * A pointer drag and a touch scroll start the same way, so something has to\n * say which one a finger means. In handle mode only the small handle is\n * `touch-none`, so the rest of the row scrolls: nothing to decide. In\n * whole-row mode the whole row is `touch-none`, which is why a touch list\n * whose rows are the activators cannot be scrolled by dragging over them.\n *\n * `touchScroll` is the way out, and it defaults to whichever of those is\n * already true — `true` in handle mode, `false` in whole-row mode, so existing\n * lists behave exactly as before. Setting it `true` on a whole-row list drops\n * `touch-none` and swaps the PointerSensor for a MouseSensor plus a\n * TouchSensor with delay activation: a quick swipe scrolls, a press held for\n * {@link TOUCH_DELAY_MS} picks the row up. `false` in handle mode is the\n * opposite trade — the row never scrolls under a finger.\n */\n\n/** How long a finger must rest on a row before it becomes a drag. */\nconst TOUCH_DELAY_MS = 250;\n/** How far it may slip in that time and still count as a press, not a scroll. */\nconst TOUCH_TOLERANCE_PX = 8;\n\n/** Spread onto the element that should start a drag. */\nexport interface SortableHandleProps extends Partial<DraggableAttributes> {\n  ref: (element: HTMLElement | null) => void;\n  onKeyDown?: React.KeyboardEventHandler<HTMLElement>;\n  onPointerDown?: React.PointerEventHandler<HTMLElement>;\n  onMouseDown?: React.MouseEventHandler<HTMLElement>;\n  onTouchStart?: React.TouchEventHandler<HTMLElement>;\n}\n\n/** dnd-kit types its listeners as a bag of `Function`s; narrow them to the handlers they are. */\nfunction asHandlers(listeners: DraggableSyntheticListeners): Partial<SortableHandleProps> {\n  return (listeners ?? {}) as Partial<SortableHandleProps>;\n}\n\nexport interface SortableRenderState {\n  /** Attributes, listeners and ref for a custom drag handle. */\n  handleProps: SortableHandleProps;\n  /** True for the item being dragged (and for the overlay copy). */\n  isDragging: boolean;\n}\n\n/** What moved where, passed to `onReorder` alongside the reordered array. */\nexport interface SortableReorderDetails {\n  /** Index the item came from, in the array as it was passed in. */\n  from: number;\n  /** Index it landed on. */\n  to: number;\n  /** Id of the item that moved (`getId` of the dragged item). */\n  activeId: UniqueIdentifier;\n  /** Id of the item it was dropped onto. */\n  overId: UniqueIdentifier;\n}\n\nexport interface SortableListProps<T> extends Omit<React.ComponentProps<\"ul\">, \"children\"> {\n  items: readonly T[];\n  /** Stable id per item; must be unique within the list. */\n  getId: (item: T) => UniqueIdentifier;\n  /**\n   * Called with the reordered array after a successful drop, and with the move\n   * itself — `{ from, to, activeId, overId }` — for a server that persists a\n   * position rather than the whole list.\n   */\n  onReorder: (next: T[], details: SortableReorderDetails) => void;\n  renderItem: (item: T, state: SortableRenderState) => React.ReactNode;\n  /** Layout axis; also selects the sorting strategy. */\n  orientation?: \"vertical\" | \"horizontal\";\n  /** Only a `<SortableHandle>` (or an element given `handleProps`) starts a drag. */\n  handle?: boolean;\n  /**\n   * Let a finger scroll the page over the rows. Defaults to `handle`: `true`\n   * in handle mode, `false` in whole-row mode, which is what each already did.\n   * `true` on a whole-row list drops `touch-none` and uses a TouchSensor with\n   * delay activation, so a swipe scrolls and a held press drags.\n   */\n  touchScroll?: boolean;\n  /** Disables every sensor and hides the handles. */\n  disabled?: boolean;\n  /** Class name for each item wrapper. */\n  itemClassName?: string;\n}\n\ninterface ItemContextValue {\n  handleProps: SortableHandleProps;\n  isDragging: boolean;\n  disabled: boolean;\n}\n\nconst noopRef = () => {};\nconst inertHandle: SortableHandleProps = { ref: noopRef };\n\nconst SortableItemContext = /* @__PURE__ */ React.createContext<ItemContextValue>({\n  handleProps: inertHandle,\n  isDragging: false,\n  disabled: false,\n});\n\nconst itemClassName = /* @__PURE__ */ cn(\n  \"relative rounded-[var(--ds-radius-md)] outline-none\",\n  \"focus-visible:ring-[3px] focus-visible:ring-[var(--ds-ring)]/40\",\n  \"data-[dragging]:opacity-50 data-[dragging]:ring-2 data-[dragging]:ring-[var(--ds-ring)]\",\n);\n\ninterface SortableItemProps<T> {\n  id: UniqueIdentifier;\n  item: T;\n  handle: boolean;\n  disabled: boolean;\n  touchScroll: boolean;\n  renderItem: SortableListProps<T>[\"renderItem\"];\n  className: string | undefined;\n}\n\nfunction SortableItem<T>({ id, item, handle, disabled, touchScroll, renderItem, className }: SortableItemProps<T>) {\n  const { attributes, listeners, setNodeRef, setActivatorNodeRef, transform, transition, isDragging } =\n    useSortable({ id, disabled });\n\n  const handleProps = React.useMemo<SortableHandleProps>(\n    () => ({ ...attributes, ...asHandlers(listeners), ref: setActivatorNodeRef }),\n    [attributes, listeners, setActivatorNodeRef],\n  );\n  const context = React.useMemo<ItemContextValue>(\n    () => ({ handleProps, isDragging, disabled }),\n    [handleProps, isDragging, disabled],\n  );\n  const rowActivator = handle ? undefined : { ...attributes, ...asHandlers(listeners) };\n\n  return (\n    <SortableItemContext.Provider value={context}>\n      <li\n        ref={setNodeRef}\n        data-slot=\"sortable-item\"\n        data-dragging={isDragging || undefined}\n        data-disabled={disabled || undefined}\n        style={{ transform: CSS.Translate.toString(transform), transition }}\n        className={cn(\n          itemClassName,\n          !handle && !disabled && \"cursor-grab data-[dragging]:cursor-grabbing\",\n          // touch-action is what decides whether a finger scrolls or drags.\n          !touchScroll && !disabled && \"touch-none\",\n          className,\n        )}\n        {...rowActivator}\n      >\n        {renderItem(item, { handleProps, isDragging })}\n      </li>\n    </SortableItemContext.Provider>\n  );\n}\n\n/**\n * A grip button that starts the drag for its row. Reads the row's activator\n * props from context, so it needs no wiring beyond being rendered inside\n * `renderItem`. Hidden (kept in layout) when the list is disabled.\n */\nfunction SortableHandle({ className, children, ...props }: React.ComponentProps<\"button\">) {\n  const { handleProps, disabled } = React.useContext(SortableItemContext);\n  return (\n    <button\n      type=\"button\"\n      data-slot=\"sortable-handle\"\n      aria-label=\"Drag to reorder\"\n      className={cn(\n        \"inline-flex size-7 shrink-0 cursor-grab touch-none items-center justify-center\",\n        \"rounded-[var(--ds-radius-sm)] text-[color:var(--ds-text-tertiary)]\",\n        \"hover:bg-[var(--ds-hover)] hover:text-[color:var(--ds-muted-foreground)]\",\n        \"outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--ds-ring)]/40\",\n        \"active:cursor-grabbing disabled:pointer-events-none disabled:opacity-50\",\n        \"[&_svg]:size-4 [&_svg]:pointer-events-none\",\n        disabled && \"invisible\",\n        className,\n      )}\n      disabled={disabled}\n      {...handleProps}\n      {...props}\n    >\n      {children ?? <GripVertical aria-hidden />}\n    </button>\n  );\n}\n\nfunction SortableList<T>({\n  items,\n  getId,\n  onReorder,\n  renderItem,\n  orientation = \"vertical\",\n  handle = false,\n  disabled = false,\n  touchScroll = handle,\n  itemClassName: itemClass,\n  className,\n  ...props\n}: SortableListProps<T>) {\n  const [activeId, setActiveId] = React.useState<UniqueIdentifier | null>(null);\n  // Only a whole-row list needs the split sensors: in handle mode the row is\n  // already scrollable because only the handle is touch-none, and swapping\n  // sensors there would put a 250 ms delay on the handle for no gain.\n  const delayTouch = touchScroll && !handle;\n  // Every sensor is created on every render (they are hooks); which ones are\n  // handed to DndContext is what changes.\n  const pointerSensor = useSensor(PointerSensor, { activationConstraint: { distance: 4 } });\n  const mouseSensor = useSensor(MouseSensor, { activationConstraint: { distance: 4 } });\n  const touchSensor = useSensor(TouchSensor, {\n    activationConstraint: { delay: TOUCH_DELAY_MS, tolerance: TOUCH_TOLERANCE_PX },\n  });\n  const keyboardSensor = useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates });\n  const pointerSensors = useSensors(pointerSensor, keyboardSensor);\n  const splitSensors = useSensors(mouseSensor, touchSensor, keyboardSensor);\n  const sensors = delayTouch ? splitSensors : pointerSensors;\n  const ids = React.useMemo(() => items.map(getId), [items, getId]);\n  const activeItem = activeId === null ? undefined : items[ids.indexOf(activeId)];\n\n  const onDragStart = React.useCallback((event: DragStartEvent) => {\n    setActiveId(event.active.id);\n  }, []);\n  const onDragEnd = React.useCallback(\n    (event: DragEndEvent) => {\n      setActiveId(null);\n      const { active, over } = event;\n      if (!over || active.id === over.id) return;\n      const from = ids.indexOf(active.id);\n      const to = ids.indexOf(over.id);\n      if (from < 0 || to < 0) return;\n      onReorder(arrayMove([...items], from, to), {\n        from,\n        to,\n        activeId: active.id,\n        overId: over.id,\n      });\n    },\n    [ids, items, onReorder],\n  );\n  const onDragCancel = React.useCallback(() => setActiveId(null), []);\n\n  return (\n    <DndContext\n      sensors={sensors}\n      collisionDetection={closestCenter}\n      onDragStart={onDragStart}\n      onDragEnd={onDragEnd}\n      onDragCancel={onDragCancel}\n    >\n      <SortableContext\n        items={ids}\n        strategy={orientation === \"horizontal\" ? horizontalListSortingStrategy : verticalListSortingStrategy}\n        disabled={disabled}\n      >\n        <ul\n          data-slot=\"sortable-list\"\n          data-orientation={orientation}\n          data-disabled={disabled || undefined}\n          data-touch-scroll={touchScroll ? \"\" : undefined}\n          className={cn(\n            \"flex list-none gap-2 p-0\",\n            orientation === \"horizontal\" ? \"flex-row flex-wrap\" : \"flex-col\",\n            className,\n          )}\n          {...props}\n        >\n          {items.map((item, index) => (\n            <SortableItem\n              key={ids[index] ?? index}\n              id={ids[index] ?? index}\n              item={item}\n              handle={handle}\n              disabled={disabled}\n              touchScroll={touchScroll}\n              renderItem={renderItem}\n              className={itemClass}\n            />\n          ))}\n        </ul>\n      </SortableContext>\n      <DragOverlay>\n        {activeItem === undefined ? null : (\n          <SortableItemContext.Provider\n            value={{ handleProps: inertHandle, isDragging: true, disabled: false }}\n          >\n            <div\n              data-slot=\"sortable-overlay\"\n              className={cn(\n                \"cursor-grabbing rounded-[var(--ds-radius-md)] bg-[var(--ds-card)]\",\n                \"shadow-[var(--ds-shadow-lg)] ring-1 ring-[var(--ds-ring)]\",\n                itemClass,\n              )}\n            >\n              {renderItem(activeItem, { handleProps: inertHandle, isDragging: true })}\n            </div>\n          </SortableItemContext.Provider>\n        )}\n      </DragOverlay>\n    </DndContext>\n  );\n}\n\nexport { SortableList, SortableHandle, arrayMove };\n"],"mappings":"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"}

package/dist/components/spinner.d.ts

@@ -0,0 +1,29 @@
+"use client";
+import * as React from "react";
+//#region src/components/spinner.d.ts
+export interface SpinnerProps extends React.ComponentProps<"span"> {
+  /** Diameter in px. Defaults to 16. */
+  size?: number;
+  /**
+   * `inverse` for a spinner on a filled surface — inside a primary or
+   * destructive Button, on a toast, on any `-foreground` pairing. The default
+   * ring is `--ds-border` with a `--ds-primary` leading edge, which all but
+   * disappears on a primary fill; `inverse` draws both from
+   * `--ds-primary-foreground` instead.
+   */
+  tone?: "default" | "inverse";
+}
+/**
+ * Spinner — a ring with a coloured leading edge. Announces itself as
+ * `role="status"` with a "Loading" label; pass `aria-label` to override.
+ *
+ * ```tsx
+ * <Button disabled>
+ *   <Spinner tone="inverse" /> Saving…
+ * </Button>
+ * ```
+ */
+declare function Spinner({ className, size, tone, style, ...props }: SpinnerProps): React.JSX.Element;
+//#endregion
+export { Spinner };
+//# sourceMappingURL=spinner.d.ts.map

package/dist/components/spinner.js

@@ -0,0 +1,34 @@
+"use client";
+"use client";
+import { cn } from "../lib/cn.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/spinner.tsx
+/**
+* Spinner — a ring with a coloured leading edge. Announces itself as
+* `role="status"` with a "Loading" label; pass `aria-label` to override.
+*
+* ```tsx
+* <Button disabled>
+*   <Spinner tone="inverse" /> Saving…
+* </Button>
+* ```
+*/
+function Spinner({ className, size = 16, tone = "default", style, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "spinner",
+		"data-tone": tone,
+		role: "status",
+		"aria-label": "Loading",
+		className: cn("inline-block shrink-0 animate-spin rounded-[var(--ds-radius-full)] border-2", tone === "inverse" ? "border-[var(--ds-primary-foreground)]/35 border-t-[var(--ds-primary-foreground)]" : "border-[var(--ds-border)] border-t-[var(--ds-primary)]", className),
+		style: {
+			width: size,
+			height: size,
+			...style
+		},
+		...props
+	});
+}
+//#endregion
+export { Spinner };
+
+//# sourceMappingURL=spinner.js.map

package/dist/components/spinner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.js","names":[],"sources":["../../src/components/spinner.tsx"],"sourcesContent":["\"use client\";\n\nimport type * as React from \"react\";\nimport { cn } from \"@/lib/cn\";\n\nexport interface SpinnerProps extends React.ComponentProps<\"span\"> {\n  /** Diameter in px. Defaults to 16. */\n  size?: number;\n  /**\n   * `inverse` for a spinner on a filled surface — inside a primary or\n   * destructive Button, on a toast, on any `-foreground` pairing. The default\n   * ring is `--ds-border` with a `--ds-primary` leading edge, which all but\n   * disappears on a primary fill; `inverse` draws both from\n   * `--ds-primary-foreground` instead.\n   */\n  tone?: \"default\" | \"inverse\";\n}\n\n/**\n * Spinner — a ring with a coloured leading edge. Announces itself as\n * `role=\"status\"` with a \"Loading\" label; pass `aria-label` to override.\n *\n * ```tsx\n * <Button disabled>\n *   <Spinner tone=\"inverse\" /> Saving…\n * </Button>\n * ```\n */\nfunction Spinner({ className, size = 16, tone = \"default\", style, ...props }: SpinnerProps) {\n  return (\n    <span\n      data-slot=\"spinner\"\n      data-tone={tone}\n      role=\"status\"\n      aria-label=\"Loading\"\n      className={cn(\n        \"inline-block shrink-0 animate-spin rounded-[var(--ds-radius-full)] border-2\",\n        tone === \"inverse\"\n          ? \"border-[var(--ds-primary-foreground)]/35 border-t-[var(--ds-primary-foreground)]\"\n          : \"border-[var(--ds-border)] border-t-[var(--ds-primary)]\",\n        className,\n      )}\n      style={{ width: size, height: size, ...style }}\n      {...props}\n    />\n  );\n}\n\nexport { Spinner };\n"],"mappings":";;;;;;;;;;;;;;;AA4BA,SAAS,QAAQ,EAAE,WAAW,OAAO,IAAI,OAAO,WAAW,OAAO,GAAG,SAAuB;CAC1F,OACE,oBAAC,QAAD;EACE,aAAU;EACV,aAAW;EACX,MAAK;EACL,cAAW;EACX,WAAW,GACT,+EACA,SAAS,YACL,qFACA,0DACJ,SACF;EACA,OAAO;GAAE,OAAO;GAAM,QAAQ;GAAM,GAAG;EAAM;EAC7C,GAAI;CACL,CAAA;AAEL"}

package/dist/components/status-dot.d.ts

@@ -0,0 +1,26 @@
+"use client";
+import * as React from "react";
+//#region src/components/status-dot.d.ts
+/**
+ * The error tone is `destructive`, the same spelling Button, Alert and Badge
+ * use. `danger` is a deprecated alias of it and paints the same.
+ */
+type StatusDotTone = "accent" | "success" | "warning" | "destructive" |
+/** @deprecated Use `destructive`; this alias paints the same. */
+"danger" | "info" | "neutral";
+export interface StatusDotProps extends Omit<React.ComponentProps<"span">, "children"> {
+  tone?: StatusDotTone;
+  /** Adds a pinging halo behind the dot for "currently active" states. */
+  live?: boolean;
+  label?: React.ReactNode;
+  /** Dot diameter in px. Defaults to 7. */
+  size?: number;
+}
+/**
+ * StatusDot — a coloured dot with an optional caption. `live` layers a ping
+ * ring in the same tone behind the dot.
+ */
+declare function StatusDot({ className, tone, live, label, size, style, ...props }: StatusDotProps): React.JSX.Element;
+//#endregion
+export { StatusDot, type StatusDotTone };
+//# sourceMappingURL=status-dot.d.ts.map

package/dist/components/status-dot.js

@@ -0,0 +1,47 @@
+"use client";
+"use client";
+import { cn } from "../lib/cn.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/status-dot.tsx
+const TONE_CLASS = {
+	accent: "bg-[var(--ds-primary)]",
+	success: "bg-[var(--ds-success)]",
+	warning: "bg-[var(--ds-warning)]",
+	destructive: "bg-[var(--ds-destructive)]",
+	danger: "bg-[var(--ds-destructive)]",
+	info: "bg-[var(--ds-info)]",
+	neutral: "bg-[var(--ds-text-tertiary)]"
+};
+/**
+* StatusDot — a coloured dot with an optional caption. `live` layers a ping
+* ring in the same tone behind the dot.
+*/
+function StatusDot({ className, tone = "accent", live, label, size = 7, style, ...props }) {
+	return /* @__PURE__ */ jsxs("span", {
+		"data-slot": "status-dot",
+		"data-tone": tone,
+		className: cn("inline-flex items-center gap-1.5", "text-[length:var(--ds-text-caption)] text-[color:var(--ds-muted-foreground)]", className),
+		...props,
+		children: [/* @__PURE__ */ jsxs("span", {
+			"aria-hidden": true,
+			"data-slot": "status-dot-indicator",
+			className: "relative inline-flex shrink-0",
+			style: {
+				width: size,
+				height: size,
+				...style
+			},
+			children: [live ? /* @__PURE__ */ jsx("span", {
+				"data-slot": "status-dot-ping",
+				className: cn("absolute inset-0 animate-ping rounded-[var(--ds-radius-full)] opacity-60", TONE_CLASS[tone])
+			}) : null, /* @__PURE__ */ jsx("span", {
+				"data-slot": "status-dot-fill",
+				className: cn("relative inline-block size-full rounded-[var(--ds-radius-full)]", TONE_CLASS[tone])
+			})]
+		}), label]
+	});
+}
+//#endregion
+export { StatusDot };
+
+//# sourceMappingURL=status-dot.js.map

package/dist/components/status-dot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"status-dot.js","names":[],"sources":["../../src/components/status-dot.tsx"],"sourcesContent":["\"use client\";\n\nimport type * as React from \"react\";\nimport { cn } from \"@/lib/cn\";\n\n/**\n * The error tone is `destructive`, the same spelling Button, Alert and Badge\n * use. `danger` is a deprecated alias of it and paints the same.\n */\ntype StatusDotTone =\n  | \"accent\"\n  | \"success\"\n  | \"warning\"\n  | \"destructive\"\n  /** @deprecated Use `destructive`; this alias paints the same. */\n  | \"danger\"\n  | \"info\"\n  | \"neutral\";\n\nconst TONE_CLASS: Record<StatusDotTone, string> = {\n  accent: \"bg-[var(--ds-primary)]\",\n  success: \"bg-[var(--ds-success)]\",\n  warning: \"bg-[var(--ds-warning)]\",\n  destructive: \"bg-[var(--ds-destructive)]\",\n  danger: \"bg-[var(--ds-destructive)]\",\n  info: \"bg-[var(--ds-info)]\",\n  neutral: \"bg-[var(--ds-text-tertiary)]\",\n};\n\nexport interface StatusDotProps extends Omit<React.ComponentProps<\"span\">, \"children\"> {\n  tone?: StatusDotTone;\n  /** Adds a pinging halo behind the dot for \"currently active\" states. */\n  live?: boolean;\n  label?: React.ReactNode;\n  /** Dot diameter in px. Defaults to 7. */\n  size?: number;\n}\n\n/**\n * StatusDot — a coloured dot with an optional caption. `live` layers a ping\n * ring in the same tone behind the dot.\n */\nfunction StatusDot({\n  className,\n  tone = \"accent\",\n  live,\n  label,\n  size = 7,\n  style,\n  ...props\n}: StatusDotProps) {\n  return (\n    <span\n      data-slot=\"status-dot\"\n      data-tone={tone}\n      className={cn(\n        \"inline-flex items-center gap-1.5\",\n        \"text-[length:var(--ds-text-caption)] text-[color:var(--ds-muted-foreground)]\",\n        className,\n      )}\n      {...props}\n    >\n      <span\n        aria-hidden\n        data-slot=\"status-dot-indicator\"\n        className=\"relative inline-flex shrink-0\"\n        style={{ width: size, height: size, ...style }}\n      >\n        {live ? (\n          <span\n            data-slot=\"status-dot-ping\"\n            className={cn(\n              \"absolute inset-0 animate-ping rounded-[var(--ds-radius-full)] opacity-60\",\n              TONE_CLASS[tone],\n            )}\n          />\n        ) : null}\n        <span\n          data-slot=\"status-dot-fill\"\n          className={cn(\n            \"relative inline-block size-full rounded-[var(--ds-radius-full)]\",\n            TONE_CLASS[tone],\n          )}\n        />\n      </span>\n      {label}\n    </span>\n  );\n}\n\nexport { StatusDot, type StatusDotTone };\n"],"mappings":";;;;;AAmBA,MAAM,aAA4C;CAChD,QAAQ;CACR,SAAS;CACT,SAAS;CACT,aAAa;CACb,QAAQ;CACR,MAAM;CACN,SAAS;AACX;;;;;AAeA,SAAS,UAAU,EACjB,WACA,OAAO,UACP,MACA,OACA,OAAO,GACP,OACA,GAAG,SACc;CACjB,OACE,qBAAC,QAAD;EACE,aAAU;EACV,aAAW;EACX,WAAW,GACT,oCACA,gFACA,SACF;EACA,GAAI;EARN,UAAA,CAUE,qBAAC,QAAD;GACE,eAAA;GACA,aAAU;GACV,WAAU;GACV,OAAO;IAAE,OAAO;IAAM,QAAQ;IAAM,GAAG;GAAM;GAJ/C,UAAA,CAMG,OACC,oBAAC,QAAD;IACE,aAAU;IACV,WAAW,GACT,4EACA,WAAW,KACb;GACD,CAAA,IACC,MACJ,oBAAC,QAAD;IACE,aAAU;IACV,WAAW,GACT,mEACA,WAAW,KACb;GACD,CAAA,CACG;EACL,CAAA,GAAA,KACG;;AAEV"}

package/dist/components/switch.d.ts

@@ -0,0 +1,21 @@
+"use client";
+import * as React from "react";
+import { Switch } from "@base-ui/react/switch";
+//#region src/components/switch.d.ts
+/**
+ * Switch.
+ *
+ * Base UI renders a `<span role="switch">` with a hidden `<input>` beside it,
+ * so the control submits with forms and takes `checked`/`defaultChecked`
+ * exactly like a checkbox. State is exposed as `data-checked` /
+ * `data-unchecked` / `data-disabled`, which is what the classes key on.
+ *
+ * cortenaweb users: `checked` and `onCheckedChange` keep their names, but the
+ * control is now uncontrolled by default; pass `defaultChecked` if you do not
+ * hold the state yourself.
+ */
+export interface SwitchProps extends React.ComponentProps<typeof Switch.Root> {}
+declare function Switch$1({ className, ...props }: SwitchProps): React.JSX.Element;
+//#endregion
+export { Switch$1 as Switch };
+//# sourceMappingURL=switch.d.ts.map

package/dist/components/switch.js

@@ -0,0 +1,21 @@
+"use client";
+"use client";
+import { cn } from "../lib/cn.js";
+import { jsx } from "react/jsx-runtime";
+import { Switch } from "@base-ui/react/switch";
+//#region src/components/switch.tsx
+function Switch$1({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Switch.Root, {
+		"data-slot": "switch",
+		className: cn("relative inline-flex h-5 w-9 shrink-0 items-center rounded-[var(--ds-radius-full)] border", "transition-[background-color,border-color,box-shadow] duration-[var(--ds-duration-fast)] ease-[var(--ds-ease-out)]", "outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--ds-ring)]/40", "data-[unchecked]:border-[var(--ds-border)] data-[unchecked]:bg-[var(--ds-input)]", "data-[checked]:border-[var(--ds-primary)] data-[checked]:bg-[var(--ds-primary)]", "data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className),
+		...props,
+		children: /* @__PURE__ */ jsx(Switch.Thumb, {
+			"data-slot": "switch-thumb",
+			className: cn("pointer-events-none block size-3.5 rounded-[var(--ds-radius-full)] bg-[var(--ds-primary-foreground)]", "transition-transform duration-[var(--ds-duration-fast)] ease-[var(--ds-ease-out)]", "data-[unchecked]:translate-x-0.5 data-[checked]:translate-x-4.5")
+		})
+	});
+}
+//#endregion
+export { Switch$1 as Switch };
+
+//# sourceMappingURL=switch.js.map

package/dist/components/switch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch.js","names":["Switch","BaseSwitch"],"sources":["../../src/components/switch.tsx"],"sourcesContent":["\"use client\";\n\nimport { Switch as BaseSwitch } from \"@base-ui/react/switch\";\nimport type * as React from \"react\";\nimport { cn } from \"@/lib/cn\";\n\n/**\n * Switch.\n *\n * Base UI renders a `<span role=\"switch\">` with a hidden `<input>` beside it,\n * so the control submits with forms and takes `checked`/`defaultChecked`\n * exactly like a checkbox. State is exposed as `data-checked` /\n * `data-unchecked` / `data-disabled`, which is what the classes key on.\n *\n * cortenaweb users: `checked` and `onCheckedChange` keep their names, but the\n * control is now uncontrolled by default; pass `defaultChecked` if you do not\n * hold the state yourself.\n */\nexport interface SwitchProps extends React.ComponentProps<typeof BaseSwitch.Root> {}\n\nfunction Switch({ className, ...props }: SwitchProps) {\n  return (\n    <BaseSwitch.Root\n      data-slot=\"switch\"\n      className={cn(\n        \"relative inline-flex h-5 w-9 shrink-0 items-center rounded-[var(--ds-radius-full)] border\",\n        \"transition-[background-color,border-color,box-shadow] duration-[var(--ds-duration-fast)] ease-[var(--ds-ease-out)]\",\n        \"outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--ds-ring)]/40\",\n        \"data-[unchecked]:border-[var(--ds-border)] data-[unchecked]:bg-[var(--ds-input)]\",\n        \"data-[checked]:border-[var(--ds-primary)] data-[checked]:bg-[var(--ds-primary)]\",\n        \"data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n        className,\n      )}\n      {...props}\n    >\n      <BaseSwitch.Thumb\n        data-slot=\"switch-thumb\"\n        className={cn(\n          \"pointer-events-none block size-3.5 rounded-[var(--ds-radius-full)] bg-[var(--ds-primary-foreground)]\",\n          \"transition-transform duration-[var(--ds-duration-fast)] ease-[var(--ds-ease-out)]\",\n          \"data-[unchecked]:translate-x-0.5 data-[checked]:translate-x-4.5\",\n        )}\n      />\n    </BaseSwitch.Root>\n  );\n}\n\nexport { Switch };\n"],"mappings":";;;;;;AAoBA,SAASA,SAAO,EAAE,WAAW,GAAG,SAAsB;CACpD,OACE,oBAACC,OAAW,MAAZ;EACE,aAAU;EACV,WAAW,GACT,6FACA,sHACA,gFACA,oFACA,mFACA,kEACA,SACF;EACA,GAAI;EAEJ,UAAA,oBAACA,OAAW,OAAZ;GACE,aAAU;GACV,WAAW,GACT,wGACA,qFACA,iEACF;EACD,CAAA;CACc,CAAA;AAErB"}

package/dist/components/tabs.d.ts

@@ -0,0 +1,24 @@
+"use client";
+import { Tabs } from "@base-ui/react/tabs";
+//#region src/components/tabs.d.ts
+/**
+ * Tabs — the underlined pattern (primary-coloured underline under the active
+ * tab). For the inset segmented style use Segmented.
+ *
+ * The underline is a Base UI `Tabs.Indicator` rendered inside `TabsList`, so it
+ * slides between tabs instead of snapping. Base UI exposes the active tab's
+ * box as `--active-tab-left` / `--active-tab-width` on the indicator.
+ *
+ * Radix users: `data-state="active"` is now `data-active`; `TabsTrigger` and
+ * `TabsContent` are Base UI's `Tab` and `Panel` under the shadcn names. Arrow
+ * keys activate as they move (Radix's `activationMode="automatic"`); pass
+ * `activateOnFocus={false}` on `TabsList` for manual activation.
+ */
+declare function Tabs$1({ className, ...props }: Tabs.Root.Props): import("react").JSX.Element;
+declare function TabsList({ className, children, activateOnFocus, ...props }: Tabs.List.Props): import("react").JSX.Element;
+declare function TabsIndicator({ className, ...props }: Tabs.Indicator.Props): import("react").JSX.Element;
+declare function TabsTrigger({ className, ...props }: Tabs.Tab.Props): import("react").JSX.Element;
+declare function TabsContent({ className, ...props }: Tabs.Panel.Props): import("react").JSX.Element;
+//#endregion
+export { Tabs$1 as Tabs, TabsContent, TabsIndicator, TabsList, TabsTrigger };
+//# sourceMappingURL=tabs.d.ts.map

package/dist/components/tabs.js

@@ -0,0 +1,60 @@
+"use client";
+"use client";
+import { cn } from "../lib/cn.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Tabs } from "@base-ui/react/tabs";
+//#region src/components/tabs.tsx
+/**
+* Tabs — the underlined pattern (primary-coloured underline under the active
+* tab). For the inset segmented style use Segmented.
+*
+* The underline is a Base UI `Tabs.Indicator` rendered inside `TabsList`, so it
+* slides between tabs instead of snapping. Base UI exposes the active tab's
+* box as `--active-tab-left` / `--active-tab-width` on the indicator.
+*
+* Radix users: `data-state="active"` is now `data-active`; `TabsTrigger` and
+* `TabsContent` are Base UI's `Tab` and `Panel` under the shadcn names. Arrow
+* keys activate as they move (Radix's `activationMode="automatic"`); pass
+* `activateOnFocus={false}` on `TabsList` for manual activation.
+*/
+function Tabs$1({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Tabs.Root, {
+		"data-slot": "tabs",
+		className: cn("flex flex-col data-[orientation=vertical]:flex-row", className),
+		...props
+	});
+}
+function TabsList({ className, children, activateOnFocus = true, ...props }) {
+	return /* @__PURE__ */ jsxs(Tabs.List, {
+		"data-slot": "tabs-list",
+		activateOnFocus,
+		className: cn("relative inline-flex items-center gap-0.5 self-start", "border-[var(--ds-border-subtle)] text-[color:var(--ds-muted-foreground)]", "data-[orientation=horizontal]:border-b", "data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch data-[orientation=vertical]:border-r", className),
+		...props,
+		children: [children, /* @__PURE__ */ jsx(TabsIndicator, {})]
+	});
+}
+function TabsIndicator({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Tabs.Indicator, {
+		"data-slot": "tabs-indicator",
+		className: cn("absolute rounded-[var(--ds-radius-full)] bg-[var(--ds-primary)]", "transition-[width,height,translate] duration-[var(--ds-duration-base)] ease-[var(--ds-ease-out)]", "data-[orientation=horizontal]:-bottom-px data-[orientation=horizontal]:left-0 data-[orientation=horizontal]:h-0.5", "data-[orientation=horizontal]:w-[var(--active-tab-width,0px)] data-[orientation=horizontal]:translate-x-[var(--active-tab-left,0px)]", "data-[orientation=vertical]:-right-px data-[orientation=vertical]:top-0 data-[orientation=vertical]:w-0.5", "data-[orientation=vertical]:h-[var(--active-tab-height,0px)] data-[orientation=vertical]:translate-y-[var(--active-tab-top,0px)]", className),
+		...props
+	});
+}
+function TabsTrigger({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Tabs.Tab, {
+		"data-slot": "tabs-trigger",
+		className: cn("relative inline-flex items-center gap-1.5 whitespace-nowrap px-3.5 py-2", "text-[length:var(--ds-text-caption-lg)] font-medium text-[color:var(--ds-muted-foreground)]", "rounded-[var(--ds-radius-sm)] outline-none", "transition-colors duration-[var(--ds-duration-fast)] ease-[var(--ds-ease-out)]", "hover:text-[color:var(--ds-foreground)]", "focus-visible:ring-[3px] focus-visible:ring-[var(--ds-ring)]/40", "data-[active]:text-[color:var(--ds-primary)]", "data-[disabled]:pointer-events-none data-[disabled]:opacity-50", "[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", className),
+		...props
+	});
+}
+function TabsContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Tabs.Panel, {
+		"data-slot": "tabs-content",
+		className: cn("mt-3 flex-1 rounded-[var(--ds-radius-sm)] outline-none", "focus-visible:ring-[3px] focus-visible:ring-[var(--ds-ring)]/40", className),
+		...props
+	});
+}
+//#endregion
+export { Tabs$1 as Tabs, TabsContent, TabsIndicator, TabsList, TabsTrigger };
+
+//# sourceMappingURL=tabs.js.map

package/dist/components/tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.js","names":["Tabs","TabsPrimitive"],"sources":["../../src/components/tabs.tsx"],"sourcesContent":["\"use client\";\n\nimport { Tabs as TabsPrimitive } from \"@base-ui/react/tabs\";\nimport { cn } from \"@/lib/cn\";\n\n/**\n * Tabs — the underlined pattern (primary-coloured underline under the active\n * tab). For the inset segmented style use Segmented.\n *\n * The underline is a Base UI `Tabs.Indicator` rendered inside `TabsList`, so it\n * slides between tabs instead of snapping. Base UI exposes the active tab's\n * box as `--active-tab-left` / `--active-tab-width` on the indicator.\n *\n * Radix users: `data-state=\"active\"` is now `data-active`; `TabsTrigger` and\n * `TabsContent` are Base UI's `Tab` and `Panel` under the shadcn names. Arrow\n * keys activate as they move (Radix's `activationMode=\"automatic\"`); pass\n * `activateOnFocus={false}` on `TabsList` for manual activation.\n */\nfunction Tabs({ className, ...props }: TabsPrimitive.Root.Props) {\n  return (\n    <TabsPrimitive.Root\n      data-slot=\"tabs\"\n      className={cn(\"flex flex-col data-[orientation=vertical]:flex-row\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction TabsList({\n  className,\n  children,\n  activateOnFocus = true,\n  ...props\n}: TabsPrimitive.List.Props) {\n  return (\n    <TabsPrimitive.List\n      data-slot=\"tabs-list\"\n      activateOnFocus={activateOnFocus}\n      className={cn(\n        \"relative inline-flex items-center gap-0.5 self-start\",\n        \"border-[var(--ds-border-subtle)] text-[color:var(--ds-muted-foreground)]\",\n        \"data-[orientation=horizontal]:border-b\",\n        \"data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch data-[orientation=vertical]:border-r\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <TabsIndicator />\n    </TabsPrimitive.List>\n  );\n}\n\nfunction TabsIndicator({ className, ...props }: TabsPrimitive.Indicator.Props) {\n  return (\n    <TabsPrimitive.Indicator\n      data-slot=\"tabs-indicator\"\n      className={cn(\n        \"absolute rounded-[var(--ds-radius-full)] bg-[var(--ds-primary)]\",\n        \"transition-[width,height,translate] duration-[var(--ds-duration-base)] ease-[var(--ds-ease-out)]\",\n        // Horizontal: an underline that slides along the bottom edge.\n        \"data-[orientation=horizontal]:-bottom-px data-[orientation=horizontal]:left-0 data-[orientation=horizontal]:h-0.5\",\n        \"data-[orientation=horizontal]:w-[var(--active-tab-width,0px)] data-[orientation=horizontal]:translate-x-[var(--active-tab-left,0px)]\",\n        // Vertical: a bar on the trailing edge that slides down the list.\n        \"data-[orientation=vertical]:-right-px data-[orientation=vertical]:top-0 data-[orientation=vertical]:w-0.5\",\n        \"data-[orientation=vertical]:h-[var(--active-tab-height,0px)] data-[orientation=vertical]:translate-y-[var(--active-tab-top,0px)]\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {\n  return (\n    <TabsPrimitive.Tab\n      data-slot=\"tabs-trigger\"\n      className={cn(\n        \"relative inline-flex items-center gap-1.5 whitespace-nowrap px-3.5 py-2\",\n        \"text-[length:var(--ds-text-caption-lg)] font-medium text-[color:var(--ds-muted-foreground)]\",\n        \"rounded-[var(--ds-radius-sm)] outline-none\",\n        \"transition-colors duration-[var(--ds-duration-fast)] ease-[var(--ds-ease-out)]\",\n        \"hover:text-[color:var(--ds-foreground)]\",\n        \"focus-visible:ring-[3px] focus-visible:ring-[var(--ds-ring)]/40\",\n        \"data-[active]:text-[color:var(--ds-primary)]\",\n        \"data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n        \"[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction TabsContent({ className, ...props }: TabsPrimitive.Panel.Props) {\n  return (\n    <TabsPrimitive.Panel\n      data-slot=\"tabs-content\"\n      className={cn(\n        \"mt-3 flex-1 rounded-[var(--ds-radius-sm)] outline-none\",\n        \"focus-visible:ring-[3px] focus-visible:ring-[var(--ds-ring)]/40\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent, TabsIndicator };\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAkBA,SAASA,OAAK,EAAE,WAAW,GAAG,SAAmC;CAC/D,OACE,oBAACC,KAAc,MAAf;EACE,aAAU;EACV,WAAW,GAAG,sDAAsD,SAAS;EAC7E,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,SAAS,EAChB,WACA,UACA,kBAAkB,MAClB,GAAG,SACwB;CAC3B,OACE,qBAACA,KAAc,MAAf;EACE,aAAU;EACO;EACjB,WAAW,GACT,wDACA,4EACA,0CACA,uHACA,SACF;EACA,GAAI;EAVN,UAAA,CAYG,UACD,oBAAC,eAAD,CAAgB,CAAA,CACE;;AAExB;AAEA,SAAS,cAAc,EAAE,WAAW,GAAG,SAAwC;CAC7E,OACE,oBAACA,KAAc,WAAf;EACE,aAAU;EACV,WAAW,GACT,mEACA,oGAEA,qHACA,wIAEA,6GACA,oIACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,SAAkC;CACrE,OACE,oBAACA,KAAc,KAAf;EACE,aAAU;EACV,WAAW,GACT,2EACA,+FACA,8CACA,kFACA,2CACA,mEACA,gDACA,kEACA,+DACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,SAAoC;CACvE,OACE,oBAACA,KAAc,OAAf;EACE,aAAU;EACV,WAAW,GACT,0DACA,mEACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}

package/dist/components/textarea.d.ts

@@ -0,0 +1,19 @@
+"use client";
+import * as React from "react";
+//#region src/components/textarea.d.ts
+/**
+ * Textarea.
+ *
+ * Same surface, border, focus ring and invalid state as Input so the two sit
+ * together in a form. `autoGrow` resizes the element to its content on every
+ * change (and on mount), which is how chat composers and note fields use it.
+ */
+declare const textareaClassName: string;
+export interface TextareaProps extends React.ComponentProps<"textarea"> {
+  /** When true the textarea grows to fit its content instead of scrolling. */
+  autoGrow?: boolean;
+}
+declare function Textarea({ className, autoGrow, onChange, ref, ...props }: TextareaProps): React.JSX.Element;
+//#endregion
+export { Textarea, textareaClassName };
+//# sourceMappingURL=textarea.d.ts.map

package/dist/components/textarea.js

@@ -0,0 +1,47 @@
+"use client";
+"use client";
+import { cn } from "../lib/cn.js";
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+//#region src/components/textarea.tsx
+/**
+* Textarea.
+*
+* Same surface, border, focus ring and invalid state as Input so the two sit
+* together in a form. `autoGrow` resizes the element to its content on every
+* change (and on mount), which is how chat composers and note fields use it.
+*/
+const textareaClassName = /* @__PURE__ */ cn("flex min-h-20 w-full min-w-0 rounded-[var(--ds-radius-md)] border border-[var(--ds-border)] bg-[var(--ds-muted)] px-3 py-2", "text-[length:var(--ds-text-caption-lg)] leading-[var(--ds-text-caption-lg--line-height)] text-[color:var(--ds-foreground)]", "placeholder:text-[color:var(--ds-text-tertiary)]", "transition-[border-color,box-shadow] duration-[var(--ds-duration-fast)] ease-[var(--ds-ease-out)]", "hover:border-[var(--ds-border-strong)]", "outline-none focus-visible:border-[var(--ds-ring)] focus-visible:ring-[3px] focus-visible:ring-[var(--ds-ring)]/40", "disabled:cursor-not-allowed disabled:opacity-50", "aria-invalid:border-[var(--ds-destructive)] aria-invalid:ring-[3px] aria-invalid:ring-[var(--ds-destructive)]/20");
+function Textarea({ className, autoGrow = false, onChange, ref, ...props }) {
+	const internalRef = React.useRef(null);
+	const setRefs = React.useCallback((node) => {
+		internalRef.current = node;
+		if (typeof ref === "function") ref(node);
+		else if (ref) ref.current = node;
+	}, [ref]);
+	const fitToContent = React.useCallback(() => {
+		const el = internalRef.current;
+		if (el && autoGrow) {
+			el.style.height = "auto";
+			el.style.height = `${el.scrollHeight}px`;
+		}
+	}, [autoGrow]);
+	React.useEffect(() => {
+		fitToContent();
+	}, [fitToContent]);
+	const handleChange = React.useCallback((event) => {
+		onChange?.(event);
+		fitToContent();
+	}, [onChange, fitToContent]);
+	return /* @__PURE__ */ jsx("textarea", {
+		"data-slot": "textarea",
+		className: cn(textareaClassName, autoGrow && "resize-none overflow-hidden", className),
+		ref: setRefs,
+		onChange: handleChange,
+		...props
+	});
+}
+//#endregion
+export { Textarea, textareaClassName };
+
+//# sourceMappingURL=textarea.js.map

package/dist/components/textarea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.js","names":[],"sources":["../../src/components/textarea.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/cn\";\n\n/**\n * Textarea.\n *\n * Same surface, border, focus ring and invalid state as Input so the two sit\n * together in a form. `autoGrow` resizes the element to its content on every\n * change (and on mount), which is how chat composers and note fields use it.\n */\nconst textareaClassName = /* @__PURE__ */ cn(\n  \"flex min-h-20 w-full min-w-0 rounded-[var(--ds-radius-md)] border border-[var(--ds-border)] bg-[var(--ds-muted)] px-3 py-2\",\n  \"text-[length:var(--ds-text-caption-lg)] leading-[var(--ds-text-caption-lg--line-height)] text-[color:var(--ds-foreground)]\",\n  \"placeholder:text-[color:var(--ds-text-tertiary)]\",\n  \"transition-[border-color,box-shadow] duration-[var(--ds-duration-fast)] ease-[var(--ds-ease-out)]\",\n  \"hover:border-[var(--ds-border-strong)]\",\n  \"outline-none focus-visible:border-[var(--ds-ring)] focus-visible:ring-[3px] focus-visible:ring-[var(--ds-ring)]/40\",\n  \"disabled:cursor-not-allowed disabled:opacity-50\",\n  \"aria-invalid:border-[var(--ds-destructive)] aria-invalid:ring-[3px] aria-invalid:ring-[var(--ds-destructive)]/20\",\n);\n\nexport interface TextareaProps extends React.ComponentProps<\"textarea\"> {\n  /** When true the textarea grows to fit its content instead of scrolling. */\n  autoGrow?: boolean;\n}\n\nfunction Textarea({ className, autoGrow = false, onChange, ref, ...props }: TextareaProps) {\n  const internalRef = React.useRef<HTMLTextAreaElement | null>(null);\n\n  const setRefs = React.useCallback(\n    (node: HTMLTextAreaElement | null) => {\n      internalRef.current = node;\n      if (typeof ref === \"function\") {\n        ref(node);\n      } else if (ref) {\n        ref.current = node;\n      }\n    },\n    [ref],\n  );\n\n  const fitToContent = React.useCallback(() => {\n    const el = internalRef.current;\n    if (el && autoGrow) {\n      el.style.height = \"auto\";\n      el.style.height = `${el.scrollHeight}px`;\n    }\n  }, [autoGrow]);\n\n  React.useEffect(() => {\n    fitToContent();\n  }, [fitToContent]);\n\n  const handleChange = React.useCallback(\n    (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n      onChange?.(event);\n      fitToContent();\n    },\n    [onChange, fitToContent],\n  );\n\n  return (\n    <textarea\n      data-slot=\"textarea\"\n      className={cn(textareaClassName, autoGrow && \"resize-none overflow-hidden\", className)}\n      ref={setRefs}\n      onChange={handleChange}\n      {...props}\n    />\n  );\n}\n\nexport { Textarea, textareaClassName };\n"],"mappings":";;;;;;;;;;;;;AAYA,MAAM,oBAAoC,mBACxC,8HACA,8HACA,oDACA,qGACA,0CACA,sHACA,mDACA,kHACF;AAOA,SAAS,SAAS,EAAE,WAAW,WAAW,OAAO,UAAU,KAAK,GAAG,SAAwB;CACzF,MAAM,cAAc,MAAM,OAAmC,IAAI;CAEjE,MAAM,UAAU,MAAM,aACnB,SAAqC;EACpC,YAAY,UAAU;EACtB,IAAI,OAAO,QAAQ,YACjB,IAAI,IAAI;OACH,IAAI,KACT,IAAI,UAAU;CAElB,GACA,CAAC,GAAG,CACN;CAEA,MAAM,eAAe,MAAM,kBAAkB;EAC3C,MAAM,KAAK,YAAY;EACvB,IAAI,MAAM,UAAU;GAClB,GAAG,MAAM,SAAS;GAClB,GAAG,MAAM,SAAS,GAAG,GAAG,aAAa;EACvC;CACF,GAAG,CAAC,QAAQ,CAAC;CAEb,MAAM,gBAAgB;EACpB,aAAa;CACf,GAAG,CAAC,YAAY,CAAC;CAEjB,MAAM,eAAe,MAAM,aACxB,UAAkD;EACjD,WAAW,KAAK;EAChB,aAAa;CACf,GACA,CAAC,UAAU,YAAY,CACzB;CAEA,OACE,oBAAC,YAAD;EACE,aAAU;EACV,WAAW,GAAG,mBAAmB,YAAY,+BAA+B,SAAS;EACrF,KAAK;EACL,UAAU;EACV,GAAI;CACL,CAAA;AAEL"}