@epicbagel/saas-kit 0.0.0-stage → 1.0.0

package/dist/primitives/image.js

@@ -0,0 +1,52 @@
+"use client";
+import {
+  cn
+} from "../chunk-G6SRSWXB.js";
+
+// src/primitives/image.tsx
+import { forwardRef, useEffect, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+var fitStyles = { cover: "object-cover", contain: "object-contain" };
+var radiusStyles = { none: "", sm: "rounded-sm", md: "rounded-md", xl: "rounded-xl", full: "rounded-full" };
+var Image = forwardRef(function Image2({ fit = "cover", frameHeight, radius = "none", width = "auto", align = "start", border = false, shadow = "none", emphasis = "full", loadingIndicator = "none", className, onLoad, onError, src, ...props }, ref) {
+  const [loaded, setLoaded] = useState(loadingIndicator === "none" || !src);
+  useEffect(() => {
+    setLoaded(loadingIndicator === "none" || !src);
+  }, [loadingIndicator, src]);
+  const loading = loadingIndicator === "pulse" && !loaded;
+  return /* @__PURE__ */ jsx(
+    "img",
+    {
+      ref,
+      className: cn(
+        fitStyles[fit],
+        radiusStyles[radius],
+        frameHeight === "sm" && "h-16",
+        frameHeight === "md" && "h-28",
+        width === "full" && "w-full",
+        width === "preview" && "w-full max-w-[380px]",
+        width === "preview-lg" && "w-full max-w-[440px]",
+        align === "center" && "mx-auto",
+        border && "border",
+        shadow === "subtle" && "shadow-xs",
+        loading && "animate-pulse bg-muted",
+        emphasis === "soft-until-parent-hover" && "transition-opacity duration-200 md:opacity-70 md:group-hover:opacity-100",
+        className
+      ),
+      src,
+      ...props,
+      "aria-busy": loading || void 0,
+      onLoad: (event) => {
+        setLoaded(true);
+        onLoad?.(event);
+      },
+      onError: (event) => {
+        setLoaded(true);
+        onError?.(event);
+      }
+    }
+  );
+});
+export {
+  Image
+};

package/dist/primitives/inline-code.cjs

@@ -0,0 +1,34 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
+
+
+var _chunkKWLSBTB2cjs = require('../chunk-KWLSBTB2.cjs');
+
+// src/primitives/inline-code.tsx
+var _react = require('react');
+var _jsxruntime = require('react/jsx-runtime');
+var InlineCode = _react.forwardRef.call(void 0, 
+  function InlineCode2({ size = "inherit", grow = false, minWidth = "auto", truncate = false, marginX = "none", marginStart = "none", className, ...props }, ref) {
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "code",
+      {
+        ref,
+        className: _chunkKWLSBTB2cjs.cn.call(void 0, 
+          "rounded bg-muted px-1 py-0.5 font-mono text-[0.9em]",
+          size === "micro" && "text-[11px]",
+          size === "xs" && "text-xs",
+          size === "sm" && "text-sm",
+          grow && "flex-1",
+          minWidth === "zero" && "min-w-0",
+          truncate && "truncate",
+          marginX === "xs" && "mx-1",
+          marginStart === "sm" && "ml-1",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+
+
+exports.InlineCode = InlineCode;

package/dist/primitives/inline-code.d.cts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { HTMLAttributes } from 'react';
+
+interface InlineCodeProps extends HTMLAttributes<HTMLElement> {
+    size?: "inherit" | "micro" | "xs" | "sm";
+    grow?: boolean;
+    minWidth?: "auto" | "zero";
+    truncate?: boolean;
+    marginX?: "none" | "xs";
+    marginStart?: "none" | "sm";
+}
+/** A short code token embedded in prose, labels, or metadata. */
+declare const InlineCode: React.ForwardRefExoticComponent<InlineCodeProps & React.RefAttributes<HTMLElement>>;
+
+export { InlineCode, type InlineCodeProps };

package/dist/primitives/inline-code.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { HTMLAttributes } from 'react';
+
+interface InlineCodeProps extends HTMLAttributes<HTMLElement> {
+    size?: "inherit" | "micro" | "xs" | "sm";
+    grow?: boolean;
+    minWidth?: "auto" | "zero";
+    truncate?: boolean;
+    marginX?: "none" | "xs";
+    marginStart?: "none" | "sm";
+}
+/** A short code token embedded in prose, labels, or metadata. */
+declare const InlineCode: React.ForwardRefExoticComponent<InlineCodeProps & React.RefAttributes<HTMLElement>>;
+
+export { InlineCode, type InlineCodeProps };

package/dist/primitives/inline-code.js

@@ -0,0 +1,34 @@
+"use client";
+import {
+  cn
+} from "../chunk-G6SRSWXB.js";
+
+// src/primitives/inline-code.tsx
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+var InlineCode = forwardRef(
+  function InlineCode2({ size = "inherit", grow = false, minWidth = "auto", truncate = false, marginX = "none", marginStart = "none", className, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      "code",
+      {
+        ref,
+        className: cn(
+          "rounded bg-muted px-1 py-0.5 font-mono text-[0.9em]",
+          size === "micro" && "text-[11px]",
+          size === "xs" && "text-xs",
+          size === "sm" && "text-sm",
+          grow && "flex-1",
+          minWidth === "zero" && "min-w-0",
+          truncate && "truncate",
+          marginX === "xs" && "mx-1",
+          marginStart === "sm" && "ml-1",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+export {
+  InlineCode
+};

package/dist/primitives/input.cjs

@@ -0,0 +1,8 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
+
+
+var _chunkPQUSJEXLcjs = require('../chunk-PQUSJEXL.cjs');
+require('../chunk-KWLSBTB2.cjs');
+
+
+exports.Input = _chunkPQUSJEXLcjs.Input;

package/dist/primitives/input.d.cts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+
+interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    /**
+     * When true, the input selects its existing text on focus — useful
+     * for popover/drawer editors where the user opens the field to
+     * replace the value, not append to it.
+     */
+    selectOnFocus?: boolean;
+    font?: "sans" | "mono";
+    textSize?: "default" | "xs";
+    controlSize?: "default" | "sm" | "lg";
+    surface?: "default" | "ghost";
+    grow?: boolean;
+    marginTop?: "none" | "xs";
+    tone?: "default" | "muted";
+    controlWidth?: "full" | "compact";
+    shrink?: boolean;
+    weight?: "normal" | "medium";
+}
+declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+
+export { Input, type InputProps };

package/dist/primitives/input.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+
+interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    /**
+     * When true, the input selects its existing text on focus — useful
+     * for popover/drawer editors where the user opens the field to
+     * replace the value, not append to it.
+     */
+    selectOnFocus?: boolean;
+    font?: "sans" | "mono";
+    textSize?: "default" | "xs";
+    controlSize?: "default" | "sm" | "lg";
+    surface?: "default" | "ghost";
+    grow?: boolean;
+    marginTop?: "none" | "xs";
+    tone?: "default" | "muted";
+    controlWidth?: "full" | "compact";
+    shrink?: boolean;
+    weight?: "normal" | "medium";
+}
+declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+
+export { Input, type InputProps };

package/dist/primitives/input.js

@@ -0,0 +1,8 @@
+"use client";
+import {
+  Input
+} from "../chunk-QMA3WVB7.js";
+import "../chunk-G6SRSWXB.js";
+export {
+  Input
+};

package/dist/primitives/inset.cjs

@@ -0,0 +1,20 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } }"use client";
+
+
+var _chunkKWLSBTB2cjs = require('../chunk-KWLSBTB2.cjs');
+
+// src/primitives/inset.tsx
+var _react = require('react');
+var _jsxruntime = require('react/jsx-runtime');
+var spacing = {
+  all: { xs: "p-[10px]", sm: "p-[14px]", md: "p-[22px]", lg: "p-[26px]", xl: "p-[30px]" },
+  horizontal: { xs: "px-[10px]", sm: "px-[14px]", md: "px-[22px]", lg: "px-[26px]", xl: "px-[30px]" },
+  vertical: { xs: "py-[10px]", sm: "py-[14px]", md: "py-[22px]", lg: "py-[26px]", xl: "py-[30px]" }
+};
+var Inset = _react.forwardRef.call(void 0, function Inset2({ as, axis = "all", space = "md", className, ...props }, ref) {
+  const Component = _nullishCoalesce(as, () => ( "div"));
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Component, { ref, className: _chunkKWLSBTB2cjs.cn.call(void 0, spacing[axis][space], className), ...props });
+});
+
+
+exports.Inset = Inset;

package/dist/primitives/inset.d.cts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { HTMLAttributes, ElementType } from 'react';
+
+interface InsetProps extends HTMLAttributes<HTMLElement> {
+    as?: ElementType;
+    axis?: "all" | "horizontal" | "vertical";
+    space?: "xs" | "sm" | "md" | "lg" | "xl";
+}
+/** Tokenised padding wrapper for content that needs inset without bespoke utilities. */
+declare const Inset: React.ForwardRefExoticComponent<InsetProps & React.RefAttributes<HTMLElement>>;
+
+export { Inset, type InsetProps };

package/dist/primitives/inset.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { HTMLAttributes, ElementType } from 'react';
+
+interface InsetProps extends HTMLAttributes<HTMLElement> {
+    as?: ElementType;
+    axis?: "all" | "horizontal" | "vertical";
+    space?: "xs" | "sm" | "md" | "lg" | "xl";
+}
+/** Tokenised padding wrapper for content that needs inset without bespoke utilities. */
+declare const Inset: React.ForwardRefExoticComponent<InsetProps & React.RefAttributes<HTMLElement>>;
+
+export { Inset, type InsetProps };

package/dist/primitives/inset.js

@@ -0,0 +1,20 @@
+"use client";
+import {
+  cn
+} from "../chunk-G6SRSWXB.js";
+
+// src/primitives/inset.tsx
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+var spacing = {
+  all: { xs: "p-[10px]", sm: "p-[14px]", md: "p-[22px]", lg: "p-[26px]", xl: "p-[30px]" },
+  horizontal: { xs: "px-[10px]", sm: "px-[14px]", md: "px-[22px]", lg: "px-[26px]", xl: "px-[30px]" },
+  vertical: { xs: "py-[10px]", sm: "py-[14px]", md: "py-[22px]", lg: "py-[26px]", xl: "py-[30px]" }
+};
+var Inset = forwardRef(function Inset2({ as, axis = "all", space = "md", className, ...props }, ref) {
+  const Component = as ?? "div";
+  return /* @__PURE__ */ jsx(Component, { ref, className: cn(spacing[axis][space], className), ...props });
+});
+export {
+  Inset
+};

package/dist/primitives/interactive-card.cjs

@@ -0,0 +1,11 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
+"use client";
+
+
+
+var _chunkBEJJN2SYcjs = require('../chunk-BEJJN2SY.cjs');
+require('../chunk-KWLSBTB2.cjs');
+
+
+
+exports.InteractiveCard = _chunkBEJJN2SYcjs.InteractiveCard; exports.interactiveCardClass = _chunkBEJJN2SYcjs.interactiveCardClass;

package/dist/primitives/interactive-card.d.cts

@@ -0,0 +1,68 @@
+import * as React from 'react';
+import { ElementType, ComponentPropsWithoutRef } from 'react';
+
+interface InteractiveCardVariants {
+    /** Currently chosen — the card the detail pane is showing. */
+    selected?: boolean;
+    /**
+     * @deprecated Interactive cards now have one universal border-only treatment.
+     * Retained as a no-op so existing call sites keep compiling.
+     */
+    flat?: boolean;
+    /** Clip child media/content to the card's rounded boundary. */
+    clip?: boolean;
+    /**
+     * Spacing is semantic so product-required breathing room survives refactors.
+     * `comfortable` is for identity/detail rows such as candidate summaries.
+     */
+    padding?: "none" | "compact" | "row" | "comfortable" | "roomy";
+    radius?: "none" | "lg" | "xl";
+    joined?: "none" | "top";
+    border?: "default" | "none";
+    /** Keep the standard treatment or use a quieter 1px border for nested rows. */
+    borderWidth?: "default" | "thin";
+    display?: "inline" | "block";
+    textSize?: "inherit" | "sm";
+    opacity?: "full" | "subdued";
+    /** Theme-token surface. Subtle adds quiet grouping without changing interaction states. */
+    surface?: "card" | "subtle";
+    /**
+     * @deprecated Interactive cards no longer render a leading accent bar.
+     * Retained as a no-op so existing call sites keep compiling.
+     */
+    indicator?: "bar" | "none";
+}
+/**
+ * The hover treatment for any card you can click.
+ *
+ * Exported as a class recipe as well as a component so other card primitives
+ * can adopt exactly the same states without being restructured.
+ * Two competing hover treatments in one kit is how a design system starts
+ * drifting.
+ *
+ * The card owns a stable border, so hover and focus can strengthen its colour
+ * without moving the content. It defaults to 2px; nested rows can request the
+ * 1px `thin` treatment. It has no accent bar, shadow or lift.
+ * Consumers can opt into one quiet token-based surface tint when a dense list
+ * needs stronger structure without inventing product-specific colours.
+ *
+ * Focus-visible gets the same treatment as hover, so keyboard navigation is
+ * not a second-class way to move through a list. Tailwind v4 scopes `hover:`
+ * to devices that actually hover, so a tap on a phone doesn't leave a card
+ * stuck looking active.
+ */
+declare function interactiveCardClass({ selected, surface, borderWidth, }?: InteractiveCardVariants): string;
+type InteractiveCardProps<T extends ElementType = "button"> = InteractiveCardVariants & {
+    /** Defaults to `button`. Use `a` for a real navigation target. */
+    as?: T;
+} & Omit<ComponentPropsWithoutRef<T>, "as">;
+/**
+ * A clickable list card wearing `interactiveCardClass`.
+ *
+ * Defaults to a `<button>` because most of these select something rather than
+ * navigate; pass `as="a"` (or a router link) when the card really is a link,
+ * so it can be middle-clicked and opened in a new tab.
+ */
+declare const InteractiveCard: React.ForwardRefExoticComponent<Omit<InteractiveCardProps<ElementType>, "ref"> & React.RefAttributes<HTMLElement>>;
+
+export { InteractiveCard, type InteractiveCardProps, type InteractiveCardVariants, interactiveCardClass };

package/dist/primitives/interactive-card.d.ts

@@ -0,0 +1,68 @@
+import * as React from 'react';
+import { ElementType, ComponentPropsWithoutRef } from 'react';
+
+interface InteractiveCardVariants {
+    /** Currently chosen — the card the detail pane is showing. */
+    selected?: boolean;
+    /**
+     * @deprecated Interactive cards now have one universal border-only treatment.
+     * Retained as a no-op so existing call sites keep compiling.
+     */
+    flat?: boolean;
+    /** Clip child media/content to the card's rounded boundary. */
+    clip?: boolean;
+    /**
+     * Spacing is semantic so product-required breathing room survives refactors.
+     * `comfortable` is for identity/detail rows such as candidate summaries.
+     */
+    padding?: "none" | "compact" | "row" | "comfortable" | "roomy";
+    radius?: "none" | "lg" | "xl";
+    joined?: "none" | "top";
+    border?: "default" | "none";
+    /** Keep the standard treatment or use a quieter 1px border for nested rows. */
+    borderWidth?: "default" | "thin";
+    display?: "inline" | "block";
+    textSize?: "inherit" | "sm";
+    opacity?: "full" | "subdued";
+    /** Theme-token surface. Subtle adds quiet grouping without changing interaction states. */
+    surface?: "card" | "subtle";
+    /**
+     * @deprecated Interactive cards no longer render a leading accent bar.
+     * Retained as a no-op so existing call sites keep compiling.
+     */
+    indicator?: "bar" | "none";
+}
+/**
+ * The hover treatment for any card you can click.
+ *
+ * Exported as a class recipe as well as a component so other card primitives
+ * can adopt exactly the same states without being restructured.
+ * Two competing hover treatments in one kit is how a design system starts
+ * drifting.
+ *
+ * The card owns a stable border, so hover and focus can strengthen its colour
+ * without moving the content. It defaults to 2px; nested rows can request the
+ * 1px `thin` treatment. It has no accent bar, shadow or lift.
+ * Consumers can opt into one quiet token-based surface tint when a dense list
+ * needs stronger structure without inventing product-specific colours.
+ *
+ * Focus-visible gets the same treatment as hover, so keyboard navigation is
+ * not a second-class way to move through a list. Tailwind v4 scopes `hover:`
+ * to devices that actually hover, so a tap on a phone doesn't leave a card
+ * stuck looking active.
+ */
+declare function interactiveCardClass({ selected, surface, borderWidth, }?: InteractiveCardVariants): string;
+type InteractiveCardProps<T extends ElementType = "button"> = InteractiveCardVariants & {
+    /** Defaults to `button`. Use `a` for a real navigation target. */
+    as?: T;
+} & Omit<ComponentPropsWithoutRef<T>, "as">;
+/**
+ * A clickable list card wearing `interactiveCardClass`.
+ *
+ * Defaults to a `<button>` because most of these select something rather than
+ * navigate; pass `as="a"` (or a router link) when the card really is a link,
+ * so it can be middle-clicked and opened in a new tab.
+ */
+declare const InteractiveCard: React.ForwardRefExoticComponent<Omit<InteractiveCardProps<ElementType>, "ref"> & React.RefAttributes<HTMLElement>>;
+
+export { InteractiveCard, type InteractiveCardProps, type InteractiveCardVariants, interactiveCardClass };

package/dist/primitives/interactive-card.js

@@ -0,0 +1,11 @@
+"use client";
+"use client";
+import {
+  InteractiveCard,
+  interactiveCardClass
+} from "../chunk-F73ONTCK.js";
+import "../chunk-G6SRSWXB.js";
+export {
+  InteractiveCard,
+  interactiveCardClass
+};

package/dist/primitives/label.cjs

@@ -0,0 +1,8 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
+
+
+var _chunkIQZLUT2Ycjs = require('../chunk-IQZLUT2Y.cjs');
+require('../chunk-KWLSBTB2.cjs');
+
+
+exports.Label = _chunkIQZLUT2Ycjs.Label;

package/dist/primitives/label.d.cts

@@ -0,0 +1,12 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import * as LabelPrimitive from '@radix-ui/react-label';
+import { VariantProps } from 'class-variance-authority';
+
+declare const Label: React.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & React.RefAttributes<HTMLLabelElement>, "ref"> & VariantProps<(props?: ({
+    size?: "xs" | "sm" | null | undefined;
+    appearance?: "default" | "eyebrow" | null | undefined;
+    display?: "block" | "inline-flex" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string> & React.RefAttributes<HTMLLabelElement>>;
+
+export { Label };

package/dist/primitives/label.d.ts

@@ -0,0 +1,12 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import * as LabelPrimitive from '@radix-ui/react-label';
+import { VariantProps } from 'class-variance-authority';
+
+declare const Label: React.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & React.RefAttributes<HTMLLabelElement>, "ref"> & VariantProps<(props?: ({
+    size?: "xs" | "sm" | null | undefined;
+    appearance?: "default" | "eyebrow" | null | undefined;
+    display?: "block" | "inline-flex" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string> & React.RefAttributes<HTMLLabelElement>>;
+
+export { Label };

package/dist/primitives/label.js

@@ -0,0 +1,8 @@
+"use client";
+import {
+  Label
+} from "../chunk-E2TQMDO7.js";
+import "../chunk-G6SRSWXB.js";
+export {
+  Label
+};

package/dist/primitives/line-break.cjs

@@ -0,0 +1,10 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
+
+// src/primitives/line-break.tsx
+var _jsxruntime = require('react/jsx-runtime');
+function LineBreak() {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "br", {});
+}
+
+
+exports.LineBreak = LineBreak;

package/dist/primitives/line-break.d.cts

@@ -0,0 +1,6 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+/** Typography-owned forced line break for composed headings. */
+declare function LineBreak(): react_jsx_runtime.JSX.Element;
+
+export { LineBreak };

package/dist/primitives/line-break.d.ts

@@ -0,0 +1,6 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+/** Typography-owned forced line break for composed headings. */
+declare function LineBreak(): react_jsx_runtime.JSX.Element;
+
+export { LineBreak };

package/dist/primitives/line-break.js

@@ -0,0 +1,10 @@
+"use client";
+
+// src/primitives/line-break.tsx
+import { jsx } from "react/jsx-runtime";
+function LineBreak() {
+  return /* @__PURE__ */ jsx("br", {});
+}
+export {
+  LineBreak
+};

package/dist/primitives/list.cjs

@@ -0,0 +1,68 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
+
+
+var _chunkKWLSBTB2cjs = require('../chunk-KWLSBTB2.cjs');
+
+// src/primitives/list.tsx
+var _react = require('react');
+var _jsxruntime = require('react/jsx-runtime');
+var spacingStyles = { none: "", tight: "space-y-1.5", normal: "space-y-3" };
+var markerStyles = {
+  none: "list-none",
+  disc: "list-disc pl-5",
+  decimal: "list-decimal pl-5"
+};
+var List = _react.forwardRef.call(void 0, function List2({ ordered = false, spacing = "none", marker = "none", divided = false, inset = "none", guide = false, textSize = "inherit", tone = "inherit", marginTop = "none", surface = "none", radius = "none", className, ...props }, ref) {
+  const Component = ordered ? "ol" : "ul";
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    Component,
+    {
+      ref,
+      className: _chunkKWLSBTB2cjs.cn.call(void 0, 
+        spacingStyles[spacing],
+        markerStyles[marker],
+        divided && "divide-y divide-border",
+        inset === "xs" && "pl-1",
+        inset === "md" && "pl-4",
+        guide && "border-l border-border",
+        textSize === "xs" && "text-xs",
+        textSize === "sm" && "text-sm",
+        tone === "muted" && "text-muted-foreground",
+        tone === "soft" && "text-foreground/80",
+        marginTop === "sm" && "mt-2",
+        marginTop === "md" && "mt-4",
+        surface === "bordered" && "border border-border bg-background",
+        radius === "md" && "rounded-md",
+        className
+      ),
+      ...props
+    }
+  );
+});
+var ListItem = _react.forwardRef.call(void 0, function ListItem2({ className, layout = "plain", surface = "none", padding = "none", textSize = "inherit", tone = "inherit", position = "static", justify = "start", align = "start", gap = "xs", interactiveGroup = false, radius = "none", accent = "none", ...props }, ref) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "li", { ref, className: _chunkKWLSBTB2cjs.cn.call(void 0, 
+    layout === "row" && "flex items-start",
+    surface === "bordered" && "rounded-md border",
+    padding === "sm" && "p-2",
+    padding === "md" && "px-3 py-2",
+    padding === "compact" && "py-2.5",
+    textSize === "xs" && "text-xs",
+    textSize === "sm" && "text-sm",
+    tone === "soft" && "text-foreground/80",
+    position === "relative" && "relative",
+    justify === "between" && "justify-between gap-3",
+    align === "center" && "items-center",
+    align === "baseline" && "items-baseline",
+    gap === "xs" && "gap-1.5",
+    gap === "sm" && "gap-2",
+    interactiveGroup && "group",
+    radius === "md" && "rounded-md",
+    accent === "success" && "border-l-2 border-emerald-500 bg-emerald-500/5",
+    accent === "destructive" && "border-l-2 border-red-500 bg-red-500/5",
+    className
+  ), ...props });
+});
+
+
+
+exports.List = List; exports.ListItem = ListItem;

package/dist/primitives/list.d.cts

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { HTMLAttributes } from 'react';
+
+interface ListProps extends HTMLAttributes<HTMLUListElement | HTMLOListElement> {
+    ordered?: boolean;
+    spacing?: "none" | "tight" | "normal";
+    marker?: "none" | "disc" | "decimal";
+    divided?: boolean;
+    inset?: "none" | "xs" | "md";
+    guide?: boolean;
+    textSize?: "inherit" | "xs" | "sm";
+    tone?: "inherit" | "muted" | "soft";
+    marginTop?: "none" | "sm" | "md";
+    surface?: "none" | "bordered";
+    radius?: "none" | "md";
+}
+/** Semantic ordered or unordered list with controlled rhythm and markers. */
+declare const List: React.ForwardRefExoticComponent<ListProps & React.RefAttributes<HTMLOListElement | HTMLUListElement>>;
+interface ListItemProps extends HTMLAttributes<HTMLLIElement> {
+    layout?: "plain" | "row";
+    surface?: "none" | "bordered";
+    padding?: "none" | "sm" | "compact" | "md";
+    textSize?: "inherit" | "xs" | "sm";
+    tone?: "inherit" | "soft";
+    position?: "static" | "relative";
+    justify?: "start" | "between";
+    align?: "start" | "center" | "baseline";
+    gap?: "none" | "xs" | "sm";
+    interactiveGroup?: boolean;
+    radius?: "none" | "md";
+    accent?: "none" | "success" | "destructive";
+}
+declare const ListItem: React.ForwardRefExoticComponent<ListItemProps & React.RefAttributes<HTMLLIElement>>;
+
+export { List, ListItem, type ListItemProps, type ListProps };