@spatika/react 1.1.0 → 1.2.0

package/dist/primitives/Paper.d.ts

@@ -0,0 +1,22 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const paperVariants: (props?: ({
+    variant?: "glass" | "elevation" | "outlined" | null | undefined;
+    square?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type PaperProps = React.ComponentPropsWithoutRef<"div"> & VariantProps<typeof paperVariants> & {
+    /** 0–3. Ignored when variant is outlined. */
+    elevation?: 0 | 1 | 2 | 3;
+};
+/**
+ * Surface primitive. Prefer Card / GlassCard for structured content.
+ */
+declare const Paper: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & VariantProps<(props?: ({
+    variant?: "glass" | "elevation" | "outlined" | null | undefined;
+    square?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string> & {
+    /** 0–3. Ignored when variant is outlined. */
+    elevation?: 0 | 1 | 2 | 3;
+} & React.RefAttributes<HTMLDivElement>>;
+export { Paper, paperVariants };
+//# sourceMappingURL=Paper.d.ts.map

package/dist/primitives/Paper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Paper.d.ts","sourceRoot":"","sources":["../../src/primitives/Paper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGlE,QAAA,MAAM,aAAa;;;8EAgBjB,CAAC;AAEH,MAAM,MAAM,UAAU,GAAG,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,GAC5D,YAAY,CAAC,OAAO,aAAa,CAAC,GAAG;IACnC,6CAA6C;IAC7C,SAAS,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;CAC3B,CAAC;AASJ;;GAEG;AACH,QAAA,MAAM,KAAK;;;;IAdP,6CAA6C;gBACjC,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC;wCA0B5B,CAAC;AAGF,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,CAAC"}

package/dist/primitives/Paper.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { cn } from "../lib/cn";
+const paperVariants = cva("text-card-foreground", {
+    variants: {
+        variant: {
+            elevation: "bg-card/70 shadow-sm",
+            outlined: "border border-border/50 bg-card/40",
+            glass: "glass",
+        },
+        square: {
+            true: "rounded-none",
+            false: "rounded-[var(--radius-card)]",
+        },
+    },
+    defaultVariants: {
+        variant: "elevation",
+        square: false,
+    },
+});
+const elevationClass = {
+    0: "shadow-none",
+    1: "shadow-sm",
+    2: "shadow-md",
+    3: "shadow-lg",
+};
+/**
+ * Surface primitive. Prefer Card / GlassCard for structured content.
+ */
+const Paper = React.forwardRef(({ className, variant, square, elevation = 1, ...props }, ref) => (_jsx("div", { ref: ref, "data-slot": "paper", className: cn(paperVariants({ variant, square }), variant !== "outlined" && elevationClass[elevation], className), ...props })));
+Paper.displayName = "Paper";
+export { Paper, paperVariants };

package/dist/primitives/Progress.d.ts

@@ -2,7 +2,11 @@ import * as React from "react";
 type ProgressProps = React.ComponentPropsWithoutRef<"div"> & {
     value?: number | null;
     max?: number;
+    variant?: "determinate" | "indeterminate";
 };
-declare function Progress({ className, value, max, ...props }: ProgressProps): React.JSX.Element;
-export { Progress };
+declare function Progress({ className, value, max, variant, ...props }: ProgressProps): React.JSX.Element;
+/** MUI-compatible alias. */
+declare const LinearProgress: typeof Progress;
+export { Progress, LinearProgress };
+export type { ProgressProps };
 //# sourceMappingURL=Progress.d.ts.map

package/dist/primitives/Progress.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Progress.d.ts","sourceRoot":"","sources":["../../src/primitives/Progress.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,KAAK,aAAa,GAAG,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,GAAG;IAC3D,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,GAAG,CAAC,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,iBAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,GAAS,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,qBAoBzE;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC"}
+{"version":3,"file":"Progress.d.ts","sourceRoot":"","sources":["../../src/primitives/Progress.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,KAAK,aAAa,GAAG,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,GAAG;IAC3D,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,aAAa,GAAG,eAAe,CAAC;CAC3C,CAAC;AAEF,iBAAS,QAAQ,CAAC,EAChB,SAAS,EACT,KAAK,EACL,GAAS,EACT,OAAuB,EACvB,GAAG,KAAK,EACT,EAAE,aAAa,qBA2Bf;AAED,4BAA4B;AAC5B,QAAA,MAAM,cAAc,iBAAW,CAAC;AAEhC,OAAO,EAAE,QAAQ,EAAE,cAAc,EAAE,CAAC;AACpC,YAAY,EAAE,aAAa,EAAE,CAAC"}

package/dist/primitives/Progress.js

@@ -1,7 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from "../lib/cn";
-function Progress({ className, value, max = 100, ...props }) {
+function Progress({ className, value, max = 100, variant = "determinate", ...props }) {
     const pct = Math.min(100, Math.max(0, ((value || 0) / max) * 100));
-    return (_jsx("div", { "data-slot": "progress", role: "progressbar", "aria-valuemin": 0, "aria-valuemax": max, "aria-valuenow": value ?? undefined, className: cn("bg-primary/20 relative h-2 w-full overflow-hidden rounded-full", className), ...props, children: _jsx("div", { "data-slot": "progress-indicator", className: "bg-primary h-full w-full flex-1 transition-all", style: { transform: `translateX(-${100 - pct}%)` } }) }));
+    const indeterminate = variant === "indeterminate";
+    return (_jsx("div", { "data-slot": "progress", role: "progressbar", "aria-valuemin": indeterminate ? undefined : 0, "aria-valuemax": indeterminate ? undefined : max, "aria-valuenow": indeterminate ? undefined : (value ?? undefined), "aria-label": indeterminate ? "Loading" : undefined, className: cn("bg-primary/20 relative h-2 w-full overflow-hidden rounded-full", className), ...props, children: _jsx("div", { "data-slot": "progress-indicator", className: cn("bg-primary h-full", indeterminate
+                ? "absolute inset-y-0 left-0 w-1/3 animate-progress-indeterminate"
+                : "w-full flex-1 transition-transform duration-300"), style: indeterminate ? undefined : { transform: `translateX(-${100 - pct}%)` } }) }));
 }
-export { Progress };
+/** MUI-compatible alias. */
+const LinearProgress = Progress;
+export { Progress, LinearProgress };

package/dist/primitives/Snackbar.d.ts

@@ -0,0 +1,23 @@
+import * as React from "react";
+export type SnackbarOrigin = {
+    vertical?: "top" | "bottom";
+    horizontal?: "left" | "center" | "right";
+};
+export type SnackbarProps = Omit<React.ComponentPropsWithoutRef<"div">, "content"> & {
+    open?: boolean;
+    onClose?: () => void;
+    autoHideDuration?: number | null;
+    message?: React.ReactNode;
+    action?: React.ReactNode;
+    anchorOrigin?: SnackbarOrigin;
+};
+declare function Snackbar({ open, onClose, autoHideDuration, message, action, anchorOrigin, className, children, ...props }: SnackbarProps): React.JSX.Element | null;
+declare namespace Snackbar {
+    var displayName: string;
+}
+declare function SnackbarContent({ className, ...props }: React.ComponentPropsWithoutRef<"div">): React.JSX.Element;
+declare namespace SnackbarContent {
+    var displayName: string;
+}
+export { Snackbar, SnackbarContent };
+//# sourceMappingURL=Snackbar.d.ts.map

package/dist/primitives/Snackbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Snackbar.d.ts","sourceRoot":"","sources":["../../src/primitives/Snackbar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,MAAM,MAAM,cAAc,GAAG;IAC3B,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAC5B,UAAU,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;CAC1C,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC,GAAG;IACnF,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,gBAAgB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACjC,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,YAAY,CAAC,EAAE,cAAc,CAAC;CAC/B,CAAC;AAWF,iBAAS,QAAQ,CAAC,EAChB,IAAY,EACZ,OAAO,EACP,gBAAuB,EACvB,OAAO,EACP,MAAM,EACN,YAAyD,EACzD,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,aAAa,4BAkCf;kBA5CQ,QAAQ;;;AA+CjB,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,qBAEtF;kBAFQ,eAAe;;;AAKxB,OAAO,EAAE,QAAQ,EAAE,eAAe,EAAE,CAAC"}

package/dist/primitives/Snackbar.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { X } from "lucide-react";
+import { Portal } from "../lib/portal";
+import { cn } from "../lib/cn";
+import { OVERLAY_Z_INDEX, fixedLayerStyle } from "../lib/overlay-stack";
+import { IconButton } from "./IconButton";
+const originClass = {
+    "top-left": "top-4 left-4",
+    "top-center": "top-4 left-1/2 -translate-x-1/2",
+    "top-right": "top-4 right-4",
+    "bottom-left": "bottom-4 left-4",
+    "bottom-center": "bottom-4 left-1/2 -translate-x-1/2",
+    "bottom-right": "bottom-4 right-4",
+};
+function Snackbar({ open = false, onClose, autoHideDuration = 4000, message, action, anchorOrigin = { vertical: "bottom", horizontal: "left" }, className, children, ...props }) {
+    React.useEffect(() => {
+        if (!open || !autoHideDuration || !onClose)
+            return;
+        const id = window.setTimeout(onClose, autoHideDuration);
+        return () => window.clearTimeout(id);
+    }, [open, autoHideDuration, onClose]);
+    if (!open)
+        return null;
+    const key = `${anchorOrigin.vertical ?? "bottom"}-${anchorOrigin.horizontal ?? "left"}`;
+    return (_jsx(Portal, { children: _jsxs("div", { role: "status", "data-slot": "snackbar", className: cn("glass-menu fixed z-[11000] flex max-w-sm items-center gap-3 rounded-xl border border-border/50 px-4 py-3 text-sm font-medium shadow-xl", originClass[key], className), style: fixedLayerStyle(OVERLAY_Z_INDEX.modal), ...props, children: [_jsx("div", { className: "min-w-0 flex-1", children: message ?? children }), action, onClose ? (_jsx(IconButton, { "aria-label": "Close", size: "sm", onClick: onClose, children: _jsx(X, { className: "size-3.5" }) })) : null] }) }));
+}
+Snackbar.displayName = "Snackbar";
+function SnackbarContent({ className, ...props }) {
+    return _jsx("div", { "data-slot": "snackbar-content", className: cn("text-sm font-medium", className), ...props });
+}
+SnackbarContent.displayName = "SnackbarContent";
+export { Snackbar, SnackbarContent };

package/dist/primitives/SpeedDial.d.ts

@@ -0,0 +1,26 @@
+import * as React from "react";
+export type SpeedDialProps = Omit<React.ComponentPropsWithoutRef<"div">, "onChange"> & {
+    ariaLabel: string;
+    icon?: React.ReactNode;
+    openIcon?: React.ReactNode;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    direction?: "up" | "down" | "left" | "right";
+    /** Hide the dimmer behind actions. */
+    hideBackdrop?: boolean;
+};
+declare function SpeedDial({ ariaLabel, icon, openIcon, open: openProp, defaultOpen, onOpenChange, direction, hideBackdrop, className, children, ...props }: SpeedDialProps): React.JSX.Element;
+declare namespace SpeedDial {
+    var displayName: string;
+}
+export type SpeedDialActionProps = React.ComponentPropsWithoutRef<"button"> & {
+    icon: React.ReactNode;
+    tooltipTitle?: React.ReactNode;
+};
+declare function SpeedDialAction({ icon, tooltipTitle, className, ...props }: SpeedDialActionProps): React.JSX.Element;
+declare namespace SpeedDialAction {
+    var displayName: string;
+}
+export { SpeedDial, SpeedDialAction };
+//# sourceMappingURL=SpeedDial.d.ts.map

package/dist/primitives/SpeedDial.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpeedDial.d.ts","sourceRoot":"","sources":["../../src/primitives/SpeedDial.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG;IACrF,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,SAAS,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;IAC7C,sCAAsC;IACtC,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,CAAC;AASF,iBAAS,SAAS,CAAC,EACjB,SAAS,EACT,IAAI,EACJ,QAAQ,EACR,IAAI,EAAE,QAAQ,EACd,WAAmB,EACnB,YAAY,EACZ,SAAgB,EAChB,YAAoB,EACpB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,cAAc,qBAsChB;kBAlDQ,SAAS;;;AAqDlB,MAAM,MAAM,oBAAoB,GAAG,KAAK,CAAC,wBAAwB,CAAC,QAAQ,CAAC,GAAG;IAC5E,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAChC,CAAC;AAEF,iBAAS,eAAe,CAAC,EACvB,IAAI,EACJ,YAAY,EACZ,SAAS,EACT,GAAG,KAAK,EACT,EAAE,oBAAoB,qBAiBtB;kBAtBQ,eAAe;;;AAyBxB,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC"}

package/dist/primitives/SpeedDial.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Plus, X } from "lucide-react";
+import { useControllableState } from "../lib/use-controllable-state";
+import { cn } from "../lib/cn";
+import { Backdrop } from "./Backdrop";
+import { Fab } from "./Fab";
+const directionClass = {
+    up: "bottom-full mb-3 flex-col-reverse",
+    down: "top-full mt-3 flex-col",
+    left: "right-full mr-3 flex-row-reverse",
+    right: "left-full ml-3 flex-row",
+};
+function SpeedDial({ ariaLabel, icon, openIcon, open: openProp, defaultOpen = false, onOpenChange, direction = "up", hideBackdrop = false, className, children, ...props }) {
+    const [open = false, setOpen] = useControllableState({
+        prop: openProp,
+        defaultProp: defaultOpen,
+        onChange: onOpenChange,
+    });
+    return (_jsxs("div", { "data-slot": "speed-dial", "data-open": open ? "" : undefined, className: cn("relative inline-flex", className), ...props, children: [!hideBackdrop ? (_jsx(Backdrop, { open: open, invisible: true, onClick: () => setOpen(false) })) : null, _jsx("div", { className: cn("absolute z-10 flex items-center gap-3 transition-[opacity,transform] duration-200", directionClass[direction], open ? "pointer-events-auto opacity-100" : "pointer-events-none opacity-0"), role: "menu", "aria-hidden": !open, children: children }), _jsx(Fab, { "aria-label": ariaLabel, "aria-expanded": open, size: "md", onClick: () => setOpen(!open), children: open ? (openIcon ?? _jsx(X, { className: "size-5" })) : (icon ?? _jsx(Plus, { className: "size-5" })) })] }));
+}
+SpeedDial.displayName = "SpeedDial";
+function SpeedDialAction({ icon, tooltipTitle, className, ...props }) {
+    return (_jsxs("button", { type: "button", role: "menuitem", "data-slot": "speed-dial-action", title: typeof tooltipTitle === "string" ? tooltipTitle : undefined, className: cn("flex size-10 items-center justify-center rounded-full border border-border/50 bg-card text-foreground shadow-md outline-none transition-[transform,box-shadow] duration-150 hover:-translate-y-0.5 hover:shadow-lg focus-visible:ring-ring/50 focus-visible:ring-[3px]", className), ...props, children: [_jsx("span", { className: "sr-only", children: tooltipTitle }), icon] }));
+}
+SpeedDialAction.displayName = "SpeedDialAction";
+export { SpeedDial, SpeedDialAction };

package/dist/primitives/Stack.d.ts

@@ -0,0 +1,15 @@
+import * as React from "react";
+export type StackProps = React.ComponentPropsWithoutRef<"div"> & {
+    direction?: "row" | "column" | "row-reverse" | "column-reverse";
+    spacing?: number;
+    align?: "start" | "center" | "end" | "stretch" | "baseline";
+    justify?: "start" | "center" | "end" | "between" | "around" | "evenly";
+    wrap?: boolean;
+    divider?: React.ReactNode;
+};
+declare function Stack({ direction, spacing, align, justify, wrap, divider, className, children, ...props }: StackProps): React.JSX.Element;
+declare namespace Stack {
+    var displayName: string;
+}
+export { Stack };
+//# sourceMappingURL=Stack.d.ts.map

package/dist/primitives/Stack.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stack.d.ts","sourceRoot":"","sources":["../../src/primitives/Stack.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAgB/B,MAAM,MAAM,UAAU,GAAG,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,GAAG;IAC/D,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,aAAa,GAAG,gBAAgB,CAAC;IAChE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,GAAG,UAAU,CAAC;IAC5D,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,CAAC;IACvE,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AA0BF,iBAAS,KAAK,CAAC,EACb,SAAoB,EACpB,OAAW,EACX,KAAK,EACL,OAAO,EACP,IAAY,EACZ,OAAO,EACP,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,UAAU,qBAyBZ;kBAnCQ,KAAK;;;AAsCd,OAAO,EAAE,KAAK,EAAE,CAAC"}

package/dist/primitives/Stack.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../lib/cn";
+const gapClass = {
+    0: "gap-0",
+    1: "gap-1",
+    2: "gap-2",
+    3: "gap-3",
+    4: "gap-4",
+    5: "gap-5",
+    6: "gap-6",
+    8: "gap-8",
+    10: "gap-10",
+    12: "gap-12",
+};
+const directionClass = {
+    row: "flex-row",
+    column: "flex-col",
+    "row-reverse": "flex-row-reverse",
+    "column-reverse": "flex-col-reverse",
+};
+const alignClass = {
+    start: "items-start",
+    center: "items-center",
+    end: "items-end",
+    stretch: "items-stretch",
+    baseline: "items-baseline",
+};
+const justifyClass = {
+    start: "justify-start",
+    center: "justify-center",
+    end: "justify-end",
+    between: "justify-between",
+    around: "justify-around",
+    evenly: "justify-evenly",
+};
+function Stack({ direction = "column", spacing = 2, align, justify, wrap = false, divider, className, children, ...props }) {
+    const items = React.Children.toArray(children).filter(Boolean);
+    const gap = gapClass[spacing] ?? "gap-2";
+    return (_jsx("div", { "data-slot": "stack", className: cn("flex", directionClass[direction], align && alignClass[align], justify && justifyClass[justify], wrap && "flex-wrap", !divider && gap, className), ...props, children: divider
+            ? items.flatMap((child, index) => index === 0 ? [child] : [divider, child])
+            : items }));
+}
+Stack.displayName = "Stack";
+export { Stack };

package/dist/primitives/StarRating.d.ts

@@ -1,4 +1,22 @@
 import * as React from "react";
+export type RatingProps = Omit<React.ComponentPropsWithoutRef<"div">, "onChange" | "defaultValue"> & {
+    value?: number;
+    defaultValue?: number;
+    onChange?: (value: number) => void;
+    max?: number;
+    precision?: 0.5 | 1;
+    readOnly?: boolean;
+    disabled?: boolean;
+    size?: "sm" | "md" | "lg";
+    emptyLabelText?: string;
+};
+/**
+ * Star rating. `StarRating` is the same component with a required `value`.
+ */
+declare function Rating({ value: valueProp, defaultValue, onChange, max, precision, readOnly, disabled, size, emptyLabelText, className, ...props }: RatingProps): React.JSX.Element;
+declare namespace Rating {
+    var displayName: string;
+}
 declare function StarRating({ value, onChange, max, readOnly, className, }: {
     value: number;
     onChange?: (next: number) => void;
@@ -6,5 +24,5 @@ declare function StarRating({ value, onChange, max, readOnly, className, }: {
     readOnly?: boolean;
     className?: string;
 }): React.JSX.Element;
-export { StarRating };
+export { Rating, StarRating };
 //# sourceMappingURL=StarRating.d.ts.map

package/dist/primitives/StarRating.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StarRating.d.ts","sourceRoot":"","sources":["../../src/primitives/StarRating.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,iBAAS,UAAU,CAAC,EAClB,KAAK,EACL,QAAQ,EACR,GAAO,EACP,QAAgB,EAChB,SAAS,GACV,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,qBAkCA;AAED,OAAO,EAAE,UAAU,EAAE,CAAC"}
+{"version":3,"file":"StarRating.d.ts","sourceRoot":"","sources":["../../src/primitives/StarRating.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,MAAM,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,GAAG,cAAc,CAAC,GAAG;IACnG,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,GAAG,GAAG,CAAC,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAQF;;GAEG;AACH,iBAAS,MAAM,CAAC,EACd,KAAK,EAAE,SAAS,EAChB,YAAgB,EAChB,QAAQ,EACR,GAAO,EACP,SAAa,EACb,QAAgB,EAChB,QAAgB,EAChB,IAAW,EACX,cAAyB,EACzB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,WAAW,qBAoDb;kBAhEQ,MAAM;;;AAmEf,iBAAS,UAAU,CAAC,EAClB,KAAK,EACL,QAAQ,EACR,GAAO,EACP,QAAgB,EAChB,SAAS,GACV,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,qBAIA;AAED,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,CAAC"}

package/dist/primitives/StarRating.js

@@ -1,11 +1,41 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
 import { Star } from "lucide-react";
+import { useControllableState } from "../lib/use-controllable-state";
 import { cn } from "../lib/cn";
-function StarRating({ value, onChange, max = 5, readOnly = false, className, }) {
-    return (_jsx("div", { "data-slot": "star-rating", className: cn("inline-flex items-center gap-0.5", className), role: readOnly ? "img" : "group", "aria-label": `${value} of ${max} stars`, children: Array.from({ length: max }, (_, i) => {
+const sizeClass = {
+    sm: "size-4",
+    md: "size-5",
+    lg: "size-6",
+};
+/**
+ * Star rating. `StarRating` is the same component with a required `value`.
+ */
+function Rating({ value: valueProp, defaultValue = 0, onChange, max = 5, precision = 1, readOnly = false, disabled = false, size = "md", emptyLabelText = "Rating", className, ...props }) {
+    const [value = 0, setValue] = useControllableState({
+        prop: valueProp,
+        defaultProp: defaultValue,
+        onChange,
+    });
+    const [hover, setHover] = React.useState(null);
+    const display = hover ?? value;
+    const locked = readOnly || disabled;
+    return (_jsx("div", { "data-slot": "rating", role: locked ? "img" : "radiogroup", "aria-label": `${display} of ${max} stars`, className: cn("inline-flex items-center gap-0.5", disabled && "opacity-50", className), ...props, children: Array.from({ length: max }, (_, i) => {
             const n = i + 1;
-            const active = n <= value;
-            return (_jsx("button", { type: "button", disabled: readOnly, "aria-label": `${n} star`, className: cn("rounded p-0.5 transition-colors", readOnly ? "cursor-default" : "hover:scale-110 active:scale-95"), onClick: () => onChange?.(n), children: _jsx(Star, { className: cn("size-5", active ? "fill-primary text-primary" : "text-muted-foreground/40") }) }, n));
+            const fill = Math.min(1, Math.max(0, display - i));
+            return (_jsxs("button", { type: "button", role: locked ? undefined : "radio", "aria-checked": locked ? undefined : n === Math.ceil(value), "aria-label": `${n} ${emptyLabelText}`, disabled: locked, className: cn("relative rounded p-0.5", locked ? "cursor-default" : "hover:scale-110 active:scale-95"), onMouseEnter: () => {
+                    if (!locked)
+                        setHover(n);
+                }, onMouseLeave: () => setHover(null), onClick: () => {
+                    if (locked)
+                        return;
+                    const next = precision === 0.5 && value === n ? n - 0.5 : n;
+                    setValue(next);
+                }, children: [_jsx(Star, { className: cn(sizeClass[size], "text-muted-foreground/35") }), _jsx("span", { className: "absolute inset-0.5 overflow-hidden", style: { width: `${fill * 100}%` }, children: _jsx(Star, { className: cn(sizeClass[size], "fill-primary text-primary") }) })] }, n));
         }) }));
 }
-export { StarRating };
+Rating.displayName = "Rating";
+function StarRating({ value, onChange, max = 5, readOnly = false, className, }) {
+    return (_jsx(Rating, { value: value, onChange: onChange, max: max, readOnly: readOnly, className: className }));
+}
+export { Rating, StarRating };

package/dist/primitives/Stepper.d.ts

@@ -0,0 +1,36 @@
+import * as React from "react";
+export type StepperProps = React.ComponentPropsWithoutRef<"div"> & {
+    activeStep?: number;
+    orientation?: "horizontal" | "vertical";
+    alternativeLabel?: boolean;
+};
+declare function Stepper({ activeStep, orientation, alternativeLabel, className, children, ...props }: StepperProps): React.JSX.Element;
+declare namespace Stepper {
+    var displayName: string;
+}
+export type StepProps = React.ComponentPropsWithoutRef<"div"> & {
+    completed?: boolean;
+    disabled?: boolean;
+};
+declare function Step({ completed, disabled, className, children, ...props }: StepProps): React.JSX.Element;
+declare namespace Step {
+    var displayName: string;
+}
+declare function StepConnector({ className, ...props }: React.ComponentPropsWithoutRef<"div">): React.JSX.Element;
+declare namespace StepConnector {
+    var displayName: string;
+}
+export type StepLabelProps = React.ComponentPropsWithoutRef<"div"> & {
+    optional?: React.ReactNode;
+    error?: boolean;
+};
+declare function StepLabel({ className, optional, error, children, ...props }: StepLabelProps): React.JSX.Element;
+declare namespace StepLabel {
+    var displayName: string;
+}
+declare function StepContent({ className, children, ...props }: React.ComponentPropsWithoutRef<"div">): React.JSX.Element | null;
+declare namespace StepContent {
+    var displayName: string;
+}
+export { Stepper, Step, StepLabel, StepContent, StepConnector };
+//# sourceMappingURL=Stepper.d.ts.map

package/dist/primitives/Stepper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stepper.d.ts","sourceRoot":"","sources":["../../src/primitives/Stepper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAmB/B,MAAM,MAAM,YAAY,GAAG,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,GAAG;IACjE,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B,CAAC;AAEF,iBAAS,OAAO,CAAC,EACf,UAAc,EACd,WAA0B,EAC1B,gBAAwB,EACxB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,YAAY,qBA0Bd;kBAjCQ,OAAO;;;AAoChB,MAAM,MAAM,SAAS,GAAG,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,GAAG;IAC9D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,iBAAS,IAAI,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,qBAuB9E;kBAvBQ,IAAI;;;AA0Bb,iBAAS,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,qBAmBpF;kBAnBQ,aAAa;;;AAsBtB,MAAM,MAAM,cAAc,GAAG,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,GAAG;IACnE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAEF,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,qBA2CpF;kBA3CQ,SAAS;;;AA8ClB,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,4BAe5F;kBAfQ,WAAW;;;AAkBpB,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,WAAW,EAAE,aAAa,EAAE,CAAC"}

package/dist/primitives/Stepper.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Check } from "lucide-react";
+import { cn } from "../lib/cn";
+const StepperContext = React.createContext(null);
+const StepIndexContext = React.createContext(0);
+function useStepper(component) {
+    const ctx = React.useContext(StepperContext);
+    if (!ctx)
+        throw new Error(`${component} must be used within <Stepper>`);
+    return ctx;
+}
+function Stepper({ activeStep = 0, orientation = "horizontal", alternativeLabel = false, className, children, ...props }) {
+    const steps = React.Children.toArray(children);
+    return (_jsx(StepperContext.Provider, { value: { activeStep, orientation, alternativeLabel }, children: _jsx("div", { "data-slot": "stepper", "data-orientation": orientation, className: cn("flex w-full", orientation === "vertical" ? "flex-col gap-0" : "flex-row items-start", className), ...props, children: steps.map((child, index) => (_jsxs(StepIndexContext.Provider, { value: index, children: [child, index < steps.length - 1 ? _jsx(StepConnector, {}) : null] }, index))) }) }));
+}
+Stepper.displayName = "Stepper";
+function Step({ completed, disabled, className, children, ...props }) {
+    const stepper = useStepper("Step");
+    const index = React.useContext(StepIndexContext);
+    const active = stepper.activeStep === index;
+    const isCompleted = completed ?? index < stepper.activeStep;
+    return (_jsx("div", { "data-slot": "step", "data-active": active ? "" : undefined, "data-completed": isCompleted ? "" : undefined, "data-disabled": disabled ? "" : undefined, className: cn("flex min-w-0", stepper.orientation === "vertical" ? "flex-col" : "flex-none", stepper.alternativeLabel && "flex-col items-center", className), ...props, children: children }));
+}
+Step.displayName = "Step";
+function StepConnector({ className, ...props }) {
+    const stepper = useStepper("StepConnector");
+    const index = React.useContext(StepIndexContext);
+    const completed = index < stepper.activeStep;
+    return (_jsx("div", { "data-slot": "step-connector", "aria-hidden": true, className: cn(stepper.orientation === "vertical"
+            ? "ml-[15px] h-6 w-px shrink-0"
+            : "mx-2 mt-[15px] h-px min-w-4 flex-1", completed ? "bg-primary" : "bg-border", className), ...props }));
+}
+StepConnector.displayName = "StepConnector";
+function StepLabel({ className, optional, error, children, ...props }) {
+    const stepper = useStepper("StepLabel");
+    const index = React.useContext(StepIndexContext);
+    const active = stepper.activeStep === index;
+    const completed = index < stepper.activeStep;
+    return (_jsxs("div", { "data-slot": "step-label", className: cn("flex items-center gap-3", stepper.alternativeLabel && "flex-col gap-2 text-center", className), ...props, children: [_jsx("span", { className: cn("flex size-8 shrink-0 items-center justify-center rounded-full text-xs font-black", completed && "bg-primary text-primary-foreground", active && !completed && "bg-primary text-primary-foreground ring-4 ring-primary/20", !active && !completed && "border border-border/60 bg-muted/40 text-muted-foreground", error && "bg-destructive text-white ring-0"), children: completed ? _jsx(Check, { className: "size-4" }) : index + 1 }), _jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: cn("text-sm font-bold", active || completed ? "text-foreground" : "text-muted-foreground", error && "text-destructive"), children: children }), optional ? (_jsx("div", { className: "text-xs font-medium text-muted-foreground", children: optional })) : null] })] }));
+}
+StepLabel.displayName = "StepLabel";
+function StepContent({ className, children, ...props }) {
+    const stepper = useStepper("StepContent");
+    const index = React.useContext(StepIndexContext);
+    if (stepper.orientation !== "vertical")
+        return null;
+    if (stepper.activeStep !== index)
+        return null;
+    return (_jsx("div", { "data-slot": "step-content", className: cn("ml-4 border-l border-border/40 py-3 pl-7 text-sm", className), ...props, children: children }));
+}
+StepContent.displayName = "StepContent";
+export { Stepper, Step, StepLabel, StepContent, StepConnector };

package/dist/primitives/TablePagination.d.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+export type TablePaginationProps = {
+    count: number;
+    page: number;
+    onPageChange: (page: number) => void;
+    rowsPerPage?: number;
+    onRowsPerPageChange?: (rows: number) => void;
+    rowsPerPageOptions?: number[];
+    className?: string;
+};
+declare function TablePagination({ count, page, onPageChange, rowsPerPage, onRowsPerPageChange, rowsPerPageOptions, className, }: TablePaginationProps): React.JSX.Element;
+declare namespace TablePagination {
+    var displayName: string;
+}
+export { TablePagination };
+//# sourceMappingURL=TablePagination.d.ts.map

package/dist/primitives/TablePagination.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TablePagination.d.ts","sourceRoot":"","sources":["../../src/primitives/TablePagination.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,MAAM,MAAM,oBAAoB,GAAG;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mBAAmB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,kBAAkB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,iBAAS,eAAe,CAAC,EACvB,KAAK,EACL,IAAI,EACJ,YAAY,EACZ,WAAgB,EAChB,mBAAmB,EACnB,kBAAgC,EAChC,SAAS,GACV,EAAE,oBAAoB,qBA+BtB;kBAvCQ,eAAe;;;AA0CxB,OAAO,EAAE,eAAe,EAAE,CAAC"}

package/dist/primitives/TablePagination.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/cn";
+import { NativeSelect } from "./NativeSelect";
+import { Pagination } from "../composites/Pagination";
+function TablePagination({ count, page, onPageChange, rowsPerPage = 10, onRowsPerPageChange, rowsPerPageOptions = [5, 10, 25], className, }) {
+    const pageCount = Math.max(1, Math.ceil(count / rowsPerPage));
+    const from = count === 0 ? 0 : page * rowsPerPage + 1;
+    const to = Math.min(count, (page + 1) * rowsPerPage);
+    return (_jsxs("div", { "data-slot": "table-pagination", className: cn("flex flex-wrap items-center justify-end gap-4 px-2 py-2 text-sm", className), children: [onRowsPerPageChange ? (_jsxs("label", { className: "flex items-center gap-2 text-xs font-bold text-muted-foreground", children: ["Rows", _jsx(NativeSelect, { value: String(rowsPerPage), onChange: (event) => onRowsPerPageChange(Number(event.target.value)), children: rowsPerPageOptions.map((n) => (_jsx("option", { value: n, children: n }, n))) })] })) : null, _jsxs("span", { className: "text-xs font-medium text-muted-foreground", children: [from, "\u2013", to, " of ", count] }), _jsx(Pagination, { page: page + 1, pageCount: pageCount, onPageChange: (next) => onPageChange(next - 1) })] }));
+}
+TablePagination.displayName = "TablePagination";
+export { TablePagination };

package/dist/primitives/TextField.d.ts

@@ -0,0 +1,24 @@
+import * as React from "react";
+export type TextFieldProps = Omit<React.ComponentPropsWithoutRef<"input">, "size"> & {
+    label?: React.ReactNode;
+    helperText?: React.ReactNode;
+    error?: boolean;
+    multiline?: boolean;
+    rows?: number;
+    fullWidth?: boolean;
+    size?: "sm" | "md";
+};
+/**
+ * Labeled input (or textarea) with helper / error copy — MUI TextField analogue.
+ */
+declare const TextField: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "size"> & {
+    label?: React.ReactNode;
+    helperText?: React.ReactNode;
+    error?: boolean;
+    multiline?: boolean;
+    rows?: number;
+    fullWidth?: boolean;
+    size?: "sm" | "md";
+} & React.RefAttributes<HTMLInputElement>>;
+export { TextField };
+//# sourceMappingURL=TextField.d.ts.map

package/dist/primitives/TextField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../../src/primitives/TextField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC,GAAG;IACnF,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;CACpB,CAAC;AAEF;;GAEG;AACH,QAAA,MAAM,SAAS;YAZL,KAAK,CAAC,SAAS;iBACV,KAAK,CAAC,SAAS;YACpB,OAAO;gBACH,OAAO;WACZ,MAAM;gBACD,OAAO;WACZ,IAAI,GAAG,IAAI;0CAwFnB,CAAC;AAGF,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/dist/primitives/TextField.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../lib/cn";
+import { Input } from "./Input";
+import { Label } from "./Label";
+import { Textarea } from "./Textarea";
+/**
+ * Labeled input (or textarea) with helper / error copy — MUI TextField analogue.
+ */
+const TextField = React.forwardRef(({ id, label, helperText, error, multiline, rows = 3, fullWidth, size = "md", className, disabled, required, type, ...props }, ref) => {
+    const autoId = React.useId();
+    const fieldId = id ?? autoId;
+    const helperId = helperText ? `${fieldId}-helper` : undefined;
+    const fieldClass = cn(size === "sm" && "h-8 text-sm", error && "aria-invalid:border-destructive", className);
+    const control = multiline ? (_jsx(Textarea, { id: fieldId, rows: rows, disabled: disabled, required: required, "aria-invalid": error || undefined, "aria-describedby": helperId, className: cn(fullWidth && "w-full", className), ...props })) : (_jsx(Input, { ref: ref, id: fieldId, type: type, disabled: disabled, required: required, "aria-invalid": error || undefined, "aria-describedby": helperId, className: cn(fullWidth && "w-full", fieldClass), ...props }));
+    return (_jsxs("div", { "data-slot": "text-field", "data-error": error ? "" : undefined, className: cn("flex flex-col gap-1.5", fullWidth && "w-full"), children: [label ? (_jsxs(Label, { htmlFor: fieldId, children: [label, required ? _jsx("span", { className: "text-destructive", children: "*" }) : null] })) : null, control, helperText ? (_jsx("p", { id: helperId, "data-slot": "text-field-helper", className: cn("text-xs font-medium", error ? "text-destructive" : "text-muted-foreground"), children: helperText })) : null] }));
+});
+TextField.displayName = "TextField";
+export { TextField };

package/dist/primitives/TextareaAutosize.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+export type TextareaAutosizeProps = React.ComponentPropsWithoutRef<"textarea"> & {
+    minRows?: number;
+    maxRows?: number;
+};
+declare const TextareaAutosize: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "ref"> & {
+    minRows?: number;
+    maxRows?: number;
+} & React.RefAttributes<HTMLTextAreaElement>>;
+export { TextareaAutosize };
+//# sourceMappingURL=TextareaAutosize.d.ts.map

package/dist/primitives/TextareaAutosize.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextareaAutosize.d.ts","sourceRoot":"","sources":["../../src/primitives/TextareaAutosize.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,MAAM,qBAAqB,GAAG,KAAK,CAAC,wBAAwB,CAAC,UAAU,CAAC,GAAG;IAC/E,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,QAAA,MAAM,gBAAgB;cAJV,MAAM;cACN,MAAM;6CAuCjB,CAAC;AAGF,OAAO,EAAE,gBAAgB,EAAE,CAAC"}

package/dist/primitives/TextareaAutosize.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { composeRefs } from "../lib/compose-refs";
+import { cn } from "../lib/cn";
+const TextareaAutosize = React.forwardRef(({ className, minRows = 2, maxRows, onChange, style, ...props }, ref) => {
+    const inner = React.useRef(null);
+    const resize = React.useCallback(() => {
+        const node = inner.current;
+        if (!node)
+            return;
+        node.style.height = "auto";
+        const line = Number.parseFloat(getComputedStyle(node).lineHeight) || 20;
+        const min = minRows * line;
+        const max = maxRows ? maxRows * line : Number.POSITIVE_INFINITY;
+        node.style.height = `${Math.min(max, Math.max(min, node.scrollHeight))}px`;
+    }, [minRows, maxRows]);
+    React.useLayoutEffect(() => {
+        resize();
+    });
+    return (_jsx("textarea", { ref: composeRefs(ref, inner), "data-slot": "textarea-autosize", rows: minRows, className: cn("border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 flex w-full rounded-md border bg-input-background px-3 py-2 text-sm outline-none focus-visible:ring-[3px]", className), style: { overflow: "hidden", resize: "none", ...style }, onChange: (event) => {
+            onChange?.(event);
+            resize();
+        }, ...props }));
+});
+TextareaAutosize.displayName = "TextareaAutosize";
+export { TextareaAutosize };