@spatika/react 1.1.0 → 1.2.0

package/dist/primitives/ToggleButton.d.ts

@@ -0,0 +1,28 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const toggleButtonVariants: (props?: ({
+    size?: "sm" | "lg" | "md" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type ToggleButtonGroupProps = Omit<React.ComponentPropsWithoutRef<"div">, "onChange" | "value" | "defaultValue"> & {
+    exclusive?: boolean;
+    value?: string | string[] | null;
+    defaultValue?: string | string[] | null;
+    onValueChange?: (value: string | string[] | null) => void;
+    size?: VariantProps<typeof toggleButtonVariants>["size"];
+    disabled?: boolean;
+    orientation?: "horizontal" | "vertical";
+};
+declare function ToggleButtonGroup({ exclusive, value: valueProp, defaultValue, onValueChange, size, disabled, orientation, className, children, ...props }: ToggleButtonGroupProps): React.JSX.Element;
+declare namespace ToggleButtonGroup {
+    var displayName: string;
+}
+export type ToggleButtonProps = Omit<React.ComponentPropsWithoutRef<"button">, "value"> & VariantProps<typeof toggleButtonVariants> & {
+    value: string;
+    selected?: boolean;
+};
+declare function ToggleButton({ value, selected, size: sizeProp, className, disabled, onClick, children, ...props }: ToggleButtonProps): React.JSX.Element;
+declare namespace ToggleButton {
+    var displayName: string;
+}
+export { ToggleButton, ToggleButtonGroup, toggleButtonVariants };
+//# sourceMappingURL=ToggleButton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleButton.d.ts","sourceRoot":"","sources":["../../src/primitives/ToggleButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAIlE,QAAA,MAAM,oBAAoB;;8EAYzB,CAAC;AAYF,MAAM,MAAM,sBAAsB,GAAG,IAAI,CACvC,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,EACrC,UAAU,GAAG,OAAO,GAAG,cAAc,CACtC,GAAG;IACF,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,IAAI,CAAC;IACjC,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,IAAI,CAAC;IACxC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,IAAI,KAAK,IAAI,CAAC;IAC1D,IAAI,CAAC,EAAE,YAAY,CAAC,OAAO,oBAAoB,CAAC,CAAC,MAAM,CAAC,CAAC;IACzD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;CACzC,CAAC;AAEF,iBAAS,iBAAiB,CAAC,EACzB,SAAiB,EACjB,KAAK,EAAE,SAAS,EAChB,YAAY,EACZ,aAAa,EACb,IAAW,EACX,QAAgB,EAChB,WAA0B,EAC1B,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,sBAAsB,qBAmCxB;kBA9CQ,iBAAiB;;;AAiD1B,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC,GACrF,YAAY,CAAC,OAAO,oBAAoB,CAAC,GAAG;IAC1C,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEJ,iBAAS,YAAY,CAAC,EACpB,KAAK,EACL,QAAQ,EACR,IAAI,EAAE,QAAQ,EACd,SAAS,EACT,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,iBAAiB,qBAsCnB;kBA/CQ,YAAY;;;AAkDrB,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,CAAC"}

package/dist/primitives/ToggleButton.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { useControllableState } from "../lib/use-controllable-state";
+import { cn } from "../lib/cn";
+const toggleButtonVariants = cva("inline-flex items-center justify-center gap-1.5 border text-sm font-bold outline-none transition-colors focus-visible:z-10 focus-visible:ring-ring/50 focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-40 [&_svg]:size-4", {
+    variants: {
+        size: {
+            sm: "h-8 px-2.5 text-xs",
+            md: "h-9 px-3",
+            lg: "h-10 px-4",
+        },
+    },
+    defaultVariants: { size: "md" },
+});
+const ToggleGroupContext = React.createContext(null);
+function ToggleButtonGroup({ exclusive = false, value: valueProp, defaultValue, onValueChange, size = "md", disabled = false, orientation = "horizontal", className, children, ...props }) {
+    const [value, setValue] = useControllableState({
+        prop: valueProp,
+        defaultProp: defaultValue ?? (exclusive ? null : []),
+        onChange: onValueChange,
+    });
+    const setFromChild = (next) => {
+        if (disabled)
+            return;
+        setValue((prev) => {
+            if (exclusive)
+                return prev === next ? null : next;
+            const list = Array.isArray(prev) ? prev : prev ? [prev] : [];
+            return list.includes(next) ? list.filter((v) => v !== next) : [...list, next];
+        });
+    };
+    return (_jsx(ToggleGroupContext.Provider, { value: { exclusive, value: value ?? null, setValue: setFromChild, size: size ?? "md", disabled }, children: _jsx("div", { role: "group", "data-slot": "toggle-button-group", "data-orientation": orientation, className: cn("inline-flex isolate", orientation === "vertical" ? "flex-col" : "flex-row", className), ...props, children: children }) }));
+}
+ToggleButtonGroup.displayName = "ToggleButtonGroup";
+function ToggleButton({ value, selected, size: sizeProp, className, disabled, onClick, children, ...props }) {
+    const ctx = React.useContext(ToggleGroupContext);
+    const size = sizeProp ?? ctx?.size ?? "md";
+    const isSelected = selected ??
+        (ctx
+            ? Array.isArray(ctx.value)
+                ? ctx.value.includes(value)
+                : ctx.value === value
+            : false);
+    const isDisabled = disabled || ctx?.disabled;
+    return (_jsx("button", { type: "button", "data-slot": "toggle-button", "data-state": isSelected ? "on" : "off", "aria-pressed": isSelected, disabled: isDisabled, className: cn(toggleButtonVariants({ size }), isSelected
+            ? "z-[1] border-primary/50 bg-primary/15 text-primary"
+            : "border-border/60 bg-background/80 text-foreground hover:bg-muted/40", ctx && "first:rounded-l-lg last:rounded-r-lg [&:not(:first-child)]:rounded-l-none [&:not(:last-child)]:rounded-r-none [&:not(:first-child)]:-ml-px", !ctx && "rounded-lg", className), onClick: (event) => {
+            onClick?.(event);
+            if (event.defaultPrevented || isDisabled)
+                return;
+            ctx?.setValue(value);
+        }, ...props, children: children }));
+}
+ToggleButton.displayName = "ToggleButton";
+export { ToggleButton, ToggleButtonGroup, toggleButtonVariants };

package/dist/primitives/TransferList.d.ts

@@ -0,0 +1,21 @@
+import * as React from "react";
+export type TransferListProps = {
+    left: string[];
+    right: string[];
+    onChange?: (next: {
+        left: string[];
+        right: string[];
+    }) => void;
+    leftTitle?: string;
+    rightTitle?: string;
+    className?: string;
+};
+/**
+ * Two-list shuttle for picking items — MUI Transfer List analogue.
+ */
+declare function TransferList({ left, right, onChange, leftTitle, rightTitle, className, }: TransferListProps): React.JSX.Element;
+declare namespace TransferList {
+    var displayName: string;
+}
+export { TransferList };
+//# sourceMappingURL=TransferList.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TransferList.d.ts","sourceRoot":"","sources":["../../src/primitives/TransferList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,MAAM,MAAM,iBAAiB,GAAG;IAC9B,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,IAAI,EAAE,MAAM,EAAE,CAAC;QAAC,KAAK,EAAE,MAAM,EAAE,CAAA;KAAE,KAAK,IAAI,CAAC;IAC/D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAgDF;;GAEG;AACH,iBAAS,YAAY,CAAC,EACpB,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,SAAqB,EACrB,UAAqB,EACrB,SAAS,GACV,EAAE,iBAAiB,qBAkCnB;kBAzCQ,YAAY;;;AA4CrB,OAAO,EAAE,YAAY,EAAE,CAAC"}

package/dist/primitives/TransferList.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { cn } from "../lib/cn";
+import { Button } from "./Button";
+import { List, ListItemButton, ListItemIcon, ListItemText } from "./List";
+import { Paper } from "./Paper";
+function move(source, target, picked) {
+    return {
+        source: source.filter((item) => !picked.includes(item)),
+        target: [...target, ...source.filter((item) => picked.includes(item))],
+    };
+}
+function Column({ title, items, checked, onToggle, }) {
+    return (_jsxs(Paper, { variant: "outlined", className: "min-w-40 flex-1 overflow-hidden", children: [_jsx("div", { className: "border-b border-border/40 px-3 py-2 text-xs font-black uppercase tracking-widest text-muted-foreground", children: title }), _jsx(List, { dense: true, disablePadding: true, className: "max-h-48 overflow-auto", children: items.map((item) => (_jsxs(ListItemButton, { selected: checked.includes(item), onClick: () => onToggle(item), children: [_jsx(ListItemIcon, { children: _jsx("span", { className: cn("size-3.5 rounded-sm border", checked.includes(item) ? "border-primary bg-primary" : "border-border") }) }), _jsx(ListItemText, { primary: item })] }, item))) })] }));
+}
+/**
+ * Two-list shuttle for picking items — MUI Transfer List analogue.
+ */
+function TransferList({ left, right, onChange, leftTitle = "Choices", rightTitle = "Chosen", className, }) {
+    const [checkedLeft, setCheckedLeft] = React.useState([]);
+    const [checkedRight, setCheckedRight] = React.useState([]);
+    const toggle = (item, side) => {
+        const setter = side === "left" ? setCheckedLeft : setCheckedRight;
+        setter((prev) => (prev.includes(item) ? prev.filter((x) => x !== item) : [...prev, item]));
+    };
+    const toRight = () => {
+        const next = move(left, right, checkedLeft);
+        onChange?.({ left: next.source, right: next.target });
+        setCheckedLeft([]);
+    };
+    const toLeft = () => {
+        const next = move(right, left, checkedRight);
+        onChange?.({ left: next.target, right: next.source });
+        setCheckedRight([]);
+    };
+    return (_jsxs("div", { "data-slot": "transfer-list", className: cn("flex items-center gap-3", className), children: [_jsx(Column, { title: leftTitle, items: left, checked: checkedLeft, onToggle: (item) => toggle(item, "left") }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Button, { size: "sm", variant: "outline", disabled: !checkedLeft.length, onClick: toRight, "aria-label": "Move right", children: _jsx(ChevronRight, { className: "size-4" }) }), _jsx(Button, { size: "sm", variant: "outline", disabled: !checkedRight.length, onClick: toLeft, "aria-label": "Move left", children: _jsx(ChevronLeft, { className: "size-4" }) })] }), _jsx(Column, { title: rightTitle, items: right, checked: checkedRight, onToggle: (item) => toggle(item, "right") })] }));
+}
+TransferList.displayName = "TransferList";
+export { TransferList };

package/dist/primitives/Typography.d.ts

@@ -0,0 +1,23 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const typographyVariants: (props?: ({
+    variant?: "overline" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "subtitle1" | "subtitle2" | "body1" | "body2" | null | undefined;
+    color?: "inherit" | "default" | "primary" | "muted" | null | undefined;
+    align?: "inherit" | "center" | "left" | "right" | null | undefined;
+    gutterBottom?: boolean | null | undefined;
+    noWrap?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type TypographyProps = Omit<React.ComponentPropsWithoutRef<"p">, "color"> & VariantProps<typeof typographyVariants> & {
+    component?: React.ElementType;
+};
+declare const Typography: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref">, "color"> & VariantProps<(props?: ({
+    variant?: "overline" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "subtitle1" | "subtitle2" | "body1" | "body2" | null | undefined;
+    color?: "inherit" | "default" | "primary" | "muted" | null | undefined;
+    align?: "inherit" | "center" | "left" | "right" | null | undefined;
+    gutterBottom?: boolean | null | undefined;
+    noWrap?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string> & {
+    component?: React.ElementType;
+} & React.RefAttributes<HTMLElement>>;
+export { Typography, typographyVariants };
+//# sourceMappingURL=Typography.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Typography.d.ts","sourceRoot":"","sources":["../../src/primitives/Typography.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGlE,QAAA,MAAM,kBAAkB;;;;;;8EA4CtB,CAAC;AAoBH,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,GAAG,CAAC,EAAE,OAAO,CAAC,GAC9E,YAAY,CAAC,OAAO,kBAAkB,CAAC,GAAG;IACxC,SAAS,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;CAC/B,CAAC;AAEJ,QAAA,MAAM,UAAU;;;;;;;gBAHA,KAAK,CAAC,WAAW;qCAgBhC,CAAC;AAGF,OAAO,EAAE,UAAU,EAAE,kBAAkB,EAAE,CAAC"}

package/dist/primitives/Typography.js

@@ -0,0 +1,69 @@
+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 typographyVariants = cva("text-foreground", {
+    variants: {
+        variant: {
+            h1: "text-4xl font-black tracking-tight",
+            h2: "text-3xl font-black tracking-tight",
+            h3: "text-2xl font-bold tracking-tight",
+            h4: "text-xl font-bold",
+            h5: "text-lg font-bold",
+            h6: "text-base font-bold",
+            subtitle1: "text-base font-semibold",
+            subtitle2: "text-sm font-semibold",
+            body1: "text-base font-medium leading-relaxed",
+            body2: "text-sm font-medium leading-relaxed",
+            caption: "text-xs font-medium text-muted-foreground",
+            overline: "text-[10px] font-black uppercase tracking-widest text-muted-foreground",
+        },
+        color: {
+            default: "",
+            muted: "text-muted-foreground",
+            primary: "text-primary",
+            inherit: "text-inherit",
+        },
+        align: {
+            inherit: "",
+            left: "text-left",
+            center: "text-center",
+            right: "text-right",
+        },
+        gutterBottom: {
+            true: "mb-2",
+            false: "",
+        },
+        noWrap: {
+            true: "truncate",
+            false: "",
+        },
+    },
+    defaultVariants: {
+        variant: "body1",
+        color: "default",
+        align: "inherit",
+        gutterBottom: false,
+        noWrap: false,
+    },
+});
+const variantElement = {
+    h1: "h1",
+    h2: "h2",
+    h3: "h3",
+    h4: "h4",
+    h5: "h5",
+    h6: "h6",
+    subtitle1: "h6",
+    subtitle2: "h6",
+    body1: "p",
+    body2: "p",
+    caption: "span",
+    overline: "span",
+};
+const Typography = React.forwardRef(({ className, variant = "body1", color, align, gutterBottom, noWrap, component, ...props }, ref) => {
+    const Comp = (component ?? variantElement[variant ?? "body1"]);
+    return (_jsx(Comp, { ref: ref, "data-slot": "typography", "data-variant": variant, className: cn(typographyVariants({ variant, color, align, gutterBottom, noWrap }), className), ...props }));
+});
+Typography.displayName = "Typography";
+export { Typography, typographyVariants };

package/dist/primitives/transitions.d.ts

@@ -0,0 +1,29 @@
+import * as React from "react";
+type TransitionProps = Omit<React.ComponentPropsWithoutRef<"div">, "in"> & {
+    in?: boolean;
+    timeout?: number;
+    unmountOnExit?: boolean;
+    appear?: boolean;
+};
+declare function Fade({ in: open, unmountOnExit, className, children, ...props }: TransitionProps): React.JSX.Element | null;
+declare namespace Fade {
+    var displayName: string;
+}
+declare function Grow({ in: open, unmountOnExit, className, children, ...props }: TransitionProps): React.JSX.Element | null;
+declare namespace Grow {
+    var displayName: string;
+}
+export type SlideProps = TransitionProps & {
+    direction?: "up" | "down" | "left" | "right";
+};
+declare function Slide({ in: open, direction, unmountOnExit, className, children, ...props }: SlideProps): React.JSX.Element | null;
+declare namespace Slide {
+    var displayName: string;
+}
+declare function Zoom({ in: open, unmountOnExit, className, children, ...props }: TransitionProps): React.JSX.Element | null;
+declare namespace Zoom {
+    var displayName: string;
+}
+export { Fade, Grow, Slide, Zoom };
+export type { TransitionProps };
+//# sourceMappingURL=transitions.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"transitions.d.ts","sourceRoot":"","sources":["../../src/primitives/transitions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,KAAK,eAAe,GAAG,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC,GAAG;IACzE,EAAE,CAAC,EAAE,OAAO,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AAgBF,iBAAS,IAAI,CAAC,EAAE,EAAE,EAAE,IAAY,EAAE,aAAqB,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,4BAgBxG;kBAhBQ,IAAI;;;AAmBb,iBAAS,IAAI,CAAC,EAAE,EAAE,EAAE,IAAY,EAAE,aAAqB,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,4BAgBxG;kBAhBQ,IAAI;;;AAmBb,MAAM,MAAM,UAAU,GAAG,eAAe,GAAG;IACzC,SAAS,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;CAC9C,CAAC;AASF,iBAAS,KAAK,CAAC,EACb,EAAE,EAAE,IAAY,EAChB,SAAgB,EAChB,aAAqB,EACrB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,UAAU,4BAgBZ;kBAvBQ,KAAK;;;AA0Bd,iBAAS,IAAI,CAAC,EAAE,EAAE,EAAE,IAAY,EAAE,aAAqB,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,4BAgBxG;kBAhBQ,IAAI;;;AAmBb,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC;AACnC,YAAY,EAAE,eAAe,EAAE,CAAC"}

package/dist/primitives/transitions.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../lib/cn";
+function useTransitionVisible(open, unmountOnExit) {
+    const [present, setPresent] = React.useState(open);
+    React.useEffect(() => {
+        if (open) {
+            setPresent(true);
+            return;
+        }
+        if (!unmountOnExit)
+            return;
+        const id = window.setTimeout(() => setPresent(false), 220);
+        return () => window.clearTimeout(id);
+    }, [open, unmountOnExit]);
+    return present;
+}
+function Fade({ in: open = false, unmountOnExit = false, className, children, ...props }) {
+    const present = useTransitionVisible(open, unmountOnExit);
+    if (!present)
+        return null;
+    return (_jsx("div", { "data-slot": "fade", className: cn("transition-opacity duration-200 ease-out", open ? "opacity-100" : "opacity-0", className), ...props, children: children }));
+}
+Fade.displayName = "Fade";
+function Grow({ in: open = false, unmountOnExit = false, className, children, ...props }) {
+    const present = useTransitionVisible(open, unmountOnExit);
+    if (!present)
+        return null;
+    return (_jsx("div", { "data-slot": "grow", className: cn("origin-center transition-[opacity,transform] duration-200 ease-out", open ? "scale-100 opacity-100" : "scale-90 opacity-0", className), ...props, children: children }));
+}
+Grow.displayName = "Grow";
+const slideClosed = {
+    up: "translate-y-4 opacity-0",
+    down: "-translate-y-4 opacity-0",
+    left: "translate-x-4 opacity-0",
+    right: "-translate-x-4 opacity-0",
+};
+function Slide({ in: open = false, direction = "up", unmountOnExit = false, className, children, ...props }) {
+    const present = useTransitionVisible(open, unmountOnExit);
+    if (!present)
+        return null;
+    return (_jsx("div", { "data-slot": "slide", className: cn("transition-[opacity,transform] duration-200 ease-out", open ? "translate-x-0 translate-y-0 opacity-100" : slideClosed[direction], className), ...props, children: children }));
+}
+Slide.displayName = "Slide";
+function Zoom({ in: open = false, unmountOnExit = false, className, children, ...props }) {
+    const present = useTransitionVisible(open, unmountOnExit);
+    if (!present)
+        return null;
+    return (_jsx("div", { "data-slot": "zoom", className: cn("origin-center transition-[opacity,transform] duration-200 ease-out", open ? "scale-100 opacity-100" : "scale-75 opacity-0", className), ...props, children: children }));
+}
+Zoom.displayName = "Zoom";
+export { Fade, Grow, Slide, Zoom };

package/package.json

@@ -1,8 +1,30 @@
 {
   "name": "@spatika/react",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "license": "MIT",
-  "description": "Spatika React primitives and composites",
+  "description": "Spatika UI — glass React primitives and composites for production apps",
+  "homepage": "https://spatika.sreelal.me",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/SreelalChalil/spatika",
+    "directory": "packages/react"
+  },
+  "bugs": {
+    "url": "https://github.com/SreelalChalil/spatika/issues"
+  },
+  "author": "Sreelal Chalil",
+  "keywords": [
+    "spatika",
+    "spatika-ui",
+    "spadik",
+    "spadik-ui",
+    "react",
+    "design-system",
+    "component-library",
+    "glass",
+    "glassmorphism",
+    "ui"
+  ],
   "type": "module",
   "sideEffects": false,
   "main": "./dist/index.js",
@@ -18,7 +40,9 @@
   },
   "files": [
     "dist",
-    "src"
+    "src",
+    "AGENTS.md",
+    "skills"
   ],
   "scripts": {
     "build": "tsc -p tsconfig.build.json",
@@ -35,7 +59,7 @@
     "react-dom": "^18.2.0 || ^19.0.0"
   },
   "dependencies": {
-    "@spatika/tokens": "1.1.0",
+    "@spatika/tokens": "1.2.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",

package/skills/spatika-ui/SKILL.md

@@ -0,0 +1,96 @@
+---
+name: spatika-ui
+description: Build UI with Spatika glass React components from @spatika/react. Use when adding pages, forms, app chrome, dialogs, charts, or when the user mentions Spatika, Spadik, @spatika/react, glass UI, or the Spatika design system.
+---
+
+# Spatika UI
+
+Glass React design system. Never invent Spatika components. Import from `@spatika/react`. Fetch https://spatika.sreelal.me/llms.txt for the live catalog.
+
+## Bootstrap
+
+```bash
+npm install @spatika/tokens @spatika/react
+```
+
+```tsx
+import "@spatika/tokens/styles.css";
+import { SpatikaThemeProvider, Button } from "@spatika/react";
+
+export function App() {
+  return (
+    <SpatikaThemeProvider defaultTheme="neelam">
+      <Button>Hello Spatika</Button>
+    </SpatikaThemeProvider>
+  );
+}
+```
+
+## Rules
+
+- Import `@spatika/tokens/styles.css` before any component
+- Wrap the tree in `SpatikaThemeProvider`
+- Themes: `mukta` | `neelam` | `usha` | `sandhya`
+- Prefer composites over restyling primitives
+- Token CSS variables only — no hardcoded hex
+- `size="touch"` on mobile primary actions
+- Never `transition-all` on glass
+
+## Pick a component
+
+| Need | Use |
+|---|---|
+| Page frame | `PageShell` |
+| Directory chrome | `FloatingPageChromeBar` + `FloatingPageChromeIdentity` |
+| Safe-area bar | `AppHeader variant="chrome"` |
+| Mobile tabs | `MobileTabBar` |
+| Cover / profile | `CoverHero` / `ProfileHero` + `useCoverChromeBleed` |
+| Glass panel | `GlassCard` |
+| Labeled field | `TextField` |
+| Filters | `FilterSheet` + `ChipGroup` |
+| Empty | `EmptyState` |
+| Modal | `Dialog` |
+| Toasts | `Toaster` + `useToast` |
+| Chart | `BarChart` / `LineChart` / `ChartContainer` |
+| Calendar | `EventCalendar` |
+
+## App shell
+
+```tsx
+import {
+  AppHeader,
+  Button,
+  FloatingPageChromeBar,
+  FloatingPageChromeIdentity,
+  FloatingPageChromeSearchField,
+  MobileTabBar,
+  PageShell,
+} from "@spatika/react";
+import { Home, Search, User } from "lucide-react";
+
+<PageShell>
+  <AppHeader variant="chrome" title="Spatika" />
+  <FloatingPageChromeBar
+    identity={<FloatingPageChromeIdentity title="Leads" count={128} />}
+    search={
+      <FloatingPageChromeSearchField value={query} onChange={setQuery} placeholder="Search…" />
+    }
+    actions={<Button size="sm">New</Button>}
+  >
+    <main className="app-tabbar-clearance px-4 py-6">{children}</main>
+  </FloatingPageChromeBar>
+  <MobileTabBar
+    items={[
+      { id: "home", label: "Home", icon: Home, active: true },
+      { id: "search", label: "Search", icon: Search },
+      { id: "you", label: "You", icon: User },
+    ]}
+  />
+</PageShell>
+```
+
+## Next
+
+1. Fetch the component markdown: `https://spatika.sreelal.me/docs/{slug}.md`
+2. Read prop types from `node_modules/@spatika/react/dist/index.d.ts`
+3. Icons in examples use `lucide-react`

package/src/composites/Card.tsx

@@ -1,4 +1,4 @@
-import type { ReactNode } from "react";
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
 import { cn } from "../lib/cn";
 
 export type CardProps = {
@@ -101,6 +101,56 @@ export function CardContent({
   );
 }
 
+export function CardActionArea({
+  className,
+  children,
+  ...props
+}: ComponentPropsWithoutRef<"button">) {
+  return (
+    <button
+      type="button"
+      data-slot="card-action-area"
+      className={cn(
+        "block w-full text-left outline-none transition-[transform,box-shadow] duration-150",
+        "hover:-translate-y-0.5 focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+}
+
+export function CardMedia({
+  className,
+  component = "img",
+  image,
+  src,
+  alt,
+  height = 160,
+  ...props
+}: ComponentPropsWithoutRef<"img"> & {
+  component?: "img" | "div";
+  image?: string;
+  height?: number;
+}) {
+  const Comp = component;
+  return (
+    <Comp
+      data-slot="card-media"
+      src={component === "img" ? (src ?? image) : undefined}
+      alt={alt}
+      className={cn("w-full object-cover", component === "div" && "bg-muted", className)}
+      style={{
+        height,
+        ...(component === "div" && image ? { backgroundImage: `url(${image})`, backgroundSize: "cover" } : undefined),
+      }}
+      {...(props as ComponentPropsWithoutRef<"img">)}
+    />
+  );
+}
+
 export function CardFooter({
   className,
   children,

package/src/composites/ChartDataGrid.test.tsx

@@ -0,0 +1,57 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it } from "vitest";
+import { ChartDataGrid, renderChartCell } from "./ChartDataGrid";
+
+describe("ChartDataGrid", () => {
+  it("renders a linked table and highlights a selected row", async () => {
+    const user = userEvent.setup();
+    const { container } = render(
+      <ChartDataGrid
+        height={140}
+        categoryField="name"
+        valueField="views"
+        rows={[
+          { id: "web", name: "Web", views: 10, trend: [1, 2, 3] },
+          { id: "ios", name: "iOS", views: 6, trend: [2, 2, 1] },
+        ]}
+        columns={[
+          { field: "name", headerName: "Channel" },
+          { field: "views", headerName: "Views", type: "number" },
+          { field: "trend", headerName: "Trend", type: "sparkline" },
+        ]}
+      />,
+    );
+    expect(container.querySelector('[data-slot="chart-data-grid"]')).toBeTruthy();
+    expect(screen.getByText("Channel")).toBeInTheDocument();
+    const row = container.querySelector(
+      '[data-slot="chart-data-grid"] tbody [data-slot="table-row"]:nth-child(2)',
+    );
+    await user.click(row!);
+    expect(row).toHaveAttribute("data-state", "selected");
+  });
+
+  it("hides the chart when requested", () => {
+    const { container } = render(
+      <ChartDataGrid
+        hideChart
+        categoryField="name"
+        valueField="views"
+        rows={[{ id: "web", name: "Web", views: 10 }]}
+        columns={[{ field: "name", headerName: "Channel" }]}
+      />,
+    );
+    expect(container.querySelector('[data-slot="chart-container"]')).toBeNull();
+  });
+});
+
+describe("renderChartCell", () => {
+  it("returns a dash for non-numeric values", () => {
+    expect(renderChartCell("n/a")).toBe("—");
+  });
+
+  it("renders a sparkline for numeric arrays", () => {
+    const { container } = render(<>{renderChartCell([1, 4, 2], { variant: "sparkline" })}</>);
+    expect(container.querySelector('[data-slot="sparkline"]')).toBeTruthy();
+  });
+});