@kala-ui/react 0.0.1-beta.7 → 0.0.2

package/dist/components/text/text.stories.js

@@ -7,11 +7,35 @@ const meta = {
     argTypes: {
         size: {
             control: "select",
-            options: ["xs", "sm", "base", "lg", "xl", "2xl", "3xl", "4xl", "5xl", "6xl", "7xl", "8xl", "9xl"],
+            options: [
+                "xs",
+                "sm",
+                "base",
+                "lg",
+                "xl",
+                "2xl",
+                "3xl",
+                "4xl",
+                "5xl",
+                "6xl",
+                "7xl",
+                "8xl",
+                "9xl",
+            ],
         },
         weight: {
             control: "select",
-            options: ["thin", "extralight", "light", "normal", "medium", "semibold", "bold", "extrabold", "black"],
+            options: [
+                "thin",
+                "extralight",
+                "light",
+                "normal",
+                "medium",
+                "semibold",
+                "bold",
+                "extrabold",
+                "black",
+            ],
         },
         align: {
             control: "select",
@@ -19,7 +43,14 @@ const meta = {
         },
         color: {
             control: "select",
-            options: ["default", "muted", "primary", "secondary", "destructive", "accent"],
+            options: [
+                "default",
+                "muted",
+                "primary",
+                "secondary",
+                "destructive",
+                "accent",
+            ],
         },
         truncate: {
             control: "boolean",

package/dist/components/textarea/textarea.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from "../../lib/utils";
-import { Skeleton } from "../skeleton/skeleton";
+import { Skeleton } from "../skeleton";
 function Textarea({ className, isLoading = false, rows, ...props }) {
     if (isLoading) {
         return (_jsx(Skeleton, { className: cn("min-h-[80px] w-full rounded-md", className), style: { height: rows ? `${rows * 1.5}rem` : undefined } }));

package/dist/components/textarea/textarea.stories.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Label } from "../label";
-import { Skeleton } from "../skeleton/skeleton";
+import { Skeleton } from "../skeleton";
 import { Textarea } from "./textarea";
 const meta = {
     title: "Forms/Textarea",

package/dist/components/timeline/index.d.ts

@@ -0,0 +1 @@
+export * from "./timeline";

package/dist/components/timeline/index.js

@@ -0,0 +1 @@
+export * from "./timeline";

package/dist/components/timeline/timeline.d.ts

@@ -0,0 +1,35 @@
+import * as React from "react";
+export interface TimelineProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Active item index */
+    active?: number;
+    /** Bullet size in px */
+    bulletSize?: number;
+    /** Line width in px */
+    lineWidth?: number;
+    /** Reverse active direction */
+    reverseActive?: boolean;
+    /** Color of the active items (class name) */
+    activeClass?: string;
+    /** Align items */
+    align?: "right" | "left";
+}
+export interface TimelineItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+    /** Bullet content */
+    bullet?: React.ReactNode;
+    /** Item title */
+    title?: React.ReactNode;
+    /** Line variant */
+    lineVariant?: "solid" | "dashed" | "dotted";
+    /** Internal prop: index */
+    __index?: number;
+    /** Internal prop: active state */
+    __active?: boolean;
+    /** Internal prop: line active state */
+    __lineActive?: boolean;
+    /** Internal prop: bullet size */
+    __bulletSize?: number;
+    /** Internal prop: line width */
+    __lineWidth?: number;
+}
+export declare const TimelineItem: React.ForwardRefExoticComponent<TimelineItemProps & React.RefAttributes<HTMLDivElement>>;
+export declare const Timeline: React.ForwardRefExoticComponent<TimelineProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/timeline/timeline.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+export const TimelineItem = React.forwardRef(({ className, bullet, title, children, lineVariant = "solid", __index, __active, __lineActive, __bulletSize = 20, __lineWidth = 4, ...props }, ref) => {
+    return (_jsxs("div", { ref: ref, className: cn("relative pl-8 pb-8 last:pb-0", className), style: { paddingLeft: __bulletSize + 12 }, ...props, children: [_jsx("div", { className: cn("absolute top-0 bottom-0 border-l border-muted transition-colors", __lineActive && "border-primary", lineVariant === "dashed" && "border-dashed", lineVariant === "dotted" && "border-dotted"), style: {
+                    left: (__bulletSize - __lineWidth) / 2,
+                    width: __lineWidth,
+                    borderLeftWidth: __lineWidth,
+                } }), _jsx("div", { className: cn("absolute top-0 flex items-center justify-center rounded-full border bg-background text-xs font-medium transition-colors", __active
+                    ? "border-primary bg-primary text-primary-foreground"
+                    : "border-muted text-muted-foreground"), style: {
+                    width: __bulletSize,
+                    height: __bulletSize,
+                    left: 0,
+                    borderWidth: __lineWidth / 2,
+                }, children: bullet }), _jsxs("div", { className: "flex flex-col -mt-1", children: [title && _jsx("div", { className: "font-semibold text-sm mb-1", children: title }), _jsx("div", { className: "text-muted-foreground text-sm", children: children })] })] }));
+});
+TimelineItem.displayName = "TimelineItem";
+export const Timeline = React.forwardRef(({ className, children, active = -1, reverseActive = false, bulletSize = 20, lineWidth = 4, ...props }, ref) => {
+    const items = React.Children.toArray(children);
+    return (_jsx("div", { ref: ref, className: cn("flex flex-col", className), ...props, children: items.map((item, index) => {
+            if (React.isValidElement(item)) {
+                return React.cloneElement(item, {
+                    __index: index,
+                    __active: active >= index ||
+                        (reverseActive && active >= items.length - 1 - index),
+                    __lineActive: active > index ||
+                        (reverseActive && active > items.length - 1 - index),
+                    __bulletSize: bulletSize,
+                    __lineWidth: lineWidth,
+                });
+            }
+            return item;
+        }) }));
+});
+Timeline.displayName = "Timeline";

package/dist/components/timeline/timeline.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Timeline } from "./timeline";
+declare const meta: Meta<typeof Timeline>;
+export default meta;
+type Story = StoryObj<typeof Timeline>;
+export declare const Default: Story;
+export declare const CustomBullets: Story;

package/dist/components/timeline/timeline.stories.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Check, GitCommit, GitPullRequest, MessageSquare } from "lucide-react";
+import { Timeline, TimelineItem } from "./timeline";
+const meta = {
+    title: "Components/Timeline",
+    component: Timeline,
+    tags: ["autodocs"],
+    argTypes: {
+        active: { control: "number" },
+        bulletSize: { control: "number" },
+        lineWidth: { control: "number" },
+        reverseActive: { control: "boolean" },
+    },
+};
+export default meta;
+export const Default = {
+    render: (args) => (_jsxs(Timeline, { active: 1, ...args, children: [_jsxs(TimelineItem, { bullet: _jsx(GitCommit, { size: 12 }), title: "New Branch", children: ["You created a new branch ", _jsx("b", { children: "fix/timeline" })] }), _jsx(TimelineItem, { bullet: _jsx(GitPullRequest, { size: 12 }), title: "Pull Request", children: "You created a pull request" }), _jsxs(TimelineItem, { bullet: _jsx(MessageSquare, { size: 12 }), title: "Code Review", children: [_jsx("b", { children: "Robert" }), " commented on your changes"] }), _jsx(TimelineItem, { bullet: _jsx(Check, { size: 12 }), title: "Merged", children: "Pull request merged" })] })),
+};
+export const CustomBullets = {
+    render: () => (_jsxs(Timeline, { active: 2, bulletSize: 24, lineWidth: 2, children: [_jsx(TimelineItem, { title: "Ordered 1", children: "Order placed" }), _jsx(TimelineItem, { title: "Ordered 2", children: "Order shipped" }), _jsx(TimelineItem, { title: "Ordered 3", children: "Order delivered" })] })),
+};

package/dist/components/toast/toast.js

@@ -3,12 +3,12 @@ import { Toaster as Sonner } from "sonner";
 const Toast = ({ ...props }) => {
     return (_jsx(Sonner, { className: "toaster group", closeButton: true, toastOptions: {
             classNames: {
-                toast: 'group toast group-[.toaster]:bg-popover group-[.toaster]:text-foreground group-[.toaster]:border data-[type=error]:!border-destructive data-[type=success]:!border-success data-[type=warning]:!border-warning data-[type=info]:!border-info data-[type=success]:[&_[data-icon]]:!text-success data-[type=error]:[&_[data-icon]]:!text-destructive data-[type=warning]:[&_[data-icon]]:!text-warning data-[type=info]:[&_[data-icon]]:!text-info',
-                description: 'group-[.toast]:text-muted-foreground',
-                actionButton: 'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground group-data-[type=success]:!bg-success group-data-[type=success]:!text-success-foreground group-data-[type=error]:!bg-destructive group-data-[type=error]:!text-destructive-foreground group-data-[type=warning]:!bg-warning group-data-[type=warning]:!text-warning-foreground group-data-[type=info]:!bg-info group-data-[type=info]:!text-info-foreground',
-                cancelButton: 'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground',
-                icon: 'group-[.toast]:!text-current',
-                closeButton: 'group-[.toast]:bg-popover group-[.toast]:border group-[.toast]:hover:bg-accent group-[.toast]:!left-auto group-[.toast]:!-right-4 group-[.toast]:!-top-1 group-data-[type=success]:!border-success group-data-[type=error]:!border-destructive group-data-[type=warning]:!border-warning group-data-[type=info]:!border-info',
+                toast: "group toast group-[.toaster]:bg-popover group-[.toaster]:text-foreground group-[.toaster]:border data-[type=error]:!border-destructive data-[type=success]:!border-success data-[type=warning]:!border-warning data-[type=info]:!border-info data-[type=success]:[&_[data-icon]]:!text-success data-[type=error]:[&_[data-icon]]:!text-destructive data-[type=warning]:[&_[data-icon]]:!text-warning data-[type=info]:[&_[data-icon]]:!text-info",
+                description: "group-[.toast]:text-muted-foreground",
+                actionButton: "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground group-data-[type=success]:!bg-success group-data-[type=success]:!text-success-foreground group-data-[type=error]:!bg-destructive group-data-[type=error]:!text-destructive-foreground group-data-[type=warning]:!bg-warning group-data-[type=warning]:!text-warning-foreground group-data-[type=info]:!bg-info group-data-[type=info]:!text-info-foreground",
+                cancelButton: "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
+                icon: "group-[.toast]:!text-current",
+                closeButton: "group-[.toast]:bg-popover group-[.toast]:border group-[.toast]:hover:bg-accent group-[.toast]:!left-auto group-[.toast]:!-right-4 group-[.toast]:!-top-1 group-data-[type=success]:!border-success group-data-[type=error]:!border-destructive group-data-[type=warning]:!border-warning group-data-[type=info]:!border-info",
             },
         }, ...props }));
 };

package/dist/components/toggle/toggle.stories.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Bold, BookmarkIcon, Italic, Underline } from "lucide-react";
-import { Skeleton } from "../skeleton/skeleton";
+import { Skeleton } from "../skeleton";
 import { Toggle } from "./toggle";
 const meta = {
     title: "Forms/Toggle",

package/dist/components/tooltip/tooltip.stories.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button } from "../button";
-import { Skeleton } from "../skeleton/skeleton";
+import { Skeleton } from "../skeleton";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "./tooltip";
 const meta = {
     title: "Overlay/Tooltip",

package/dist/components/user-menu-dropdown/user-menu-dropdown.js

@@ -4,7 +4,7 @@ import { LogOut, Settings, User } from "lucide-react";
 import { cn } from "../../lib/utils";
 import { Avatar, AvatarFallback, AvatarImage } from "../avatar";
 import { Button } from "../button";
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "../dropdown-menu/dropdown-menu";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "../dropdown-menu";
 export function UserMenuDropdown({ user, isOpen, onOpenChange, onLogout, baseUrl = "/admin", className, }) {
     const initials = user.name
         ? user.name

package/dist/config/tailwind-base.d.ts

@@ -145,6 +145,16 @@ export declare const baseConfig: {
                     DEFAULT: string;
                     foreground: string;
                 };
+                brand: {
+                    readonly google: "#4285F4";
+                    readonly facebook: "#1877F2";
+                    readonly twitter: "#1DA1F2";
+                    readonly github: "#181717";
+                    readonly discord: "#5865F2";
+                    readonly linkedin: "#0A66C2";
+                    readonly apple: "#000000";
+                    readonly microsoft: "#00A4EF";
+                };
                 separator: string;
             };
             spacing: {

package/dist/config/tailwind-base.js

@@ -84,6 +84,7 @@ export const baseConfig = {
                     DEFAULT: "hsl(var(--destructive))",
                     foreground: "hsl(var(--destructive-foreground))",
                 },
+                brand: colors.brand,
                 separator: "hsl(var(--separator, var(--border)) / var(--border-alpha, 1))",
             },
             spacing: spacing,

package/dist/index.d.ts

@@ -1,17 +1,24 @@
 export * from "./components/accordion";
 export * from "./components/alert";
 export * from "./components/alert-dialog";
+export * from "./components/app-shell";
 export * from "./components/aspect-ratio";
 export * from "./components/avatar";
 export * from "./components/badge";
 export * from "./components/banner";
+export * from "./components/box";
 export * from "./components/breadcrumbs";
+export * from "./components/burger";
 export * from "./components/button";
 export * from "./components/button-group";
 export * from "./components/calendar";
 export * from "./components/card";
+export * from "./components/center";
 export * from "./components/charts";
 export * from "./components/checkbox";
+export * from "./components/code";
+export * from "./components/collapse";
+export * from "./components/color-input";
 export * from "./components/combobox";
 export * from "./components/command";
 export * from "./components/container";
@@ -27,42 +34,60 @@ export * from "./components/field";
 export * from "./components/file-upload";
 export * from "./components/flex";
 export * from "./components/footer";
+export * from "./components/grid";
 export * from "./components/group";
 export * from "./components/header";
 export * from "./components/heading";
+export * from "./components/indicator";
 export * from "./components/input";
 export * from "./components/input-group";
 export * from "./components/input-otp";
+export * from "./components/kbd";
 export * from "./components/label";
 export * from "./components/list";
 export * from "./components/loading";
+export * from "./components/loading-overlay";
 export * from "./components/menubar";
 export * from "./components/metric-card";
 export * from "./components/multi-select";
+export * from "./components/nav-link";
 export * from "./components/navigation";
 export * from "./components/navigation-menu";
+export * from "./components/number-input";
+export * from "./components/overlay";
 export * from "./components/page-transition";
 export * from "./components/pagination";
+export * from "./components/paper";
 export * from "./components/password-strength-indicator";
 export * from "./components/popover";
 export * from "./components/progress";
 export * from "./components/radio-group";
 export * from "./components/resizable";
+export * from "./components/ring-progress";
 export * from "./components/scroll-area";
+export * from "./components/segmented-control";
 export * from "./components/select";
 export * from "./components/separator";
 export * from "./components/session-card";
 export * from "./components/sidebar";
+export * from "./components/skeleton";
+export * from "./components/skip-to-content";
 export * from "./components/slider";
 export * from "./components/social-login-button";
+export * from "./components/social-login-buttons";
 export * from "./components/sparkline-chart";
+export * from "./components/spinner";
+export * from "./components/spoiler";
 export * from "./components/stack";
+export * from "./components/steps";
 export * from "./components/switch";
 export * from "./components/table";
 export * from "./components/tabs";
 export * from "./components/tag-input";
 export * from "./components/text";
 export * from "./components/textarea";
+export * from "./components/timeline";
 export * from "./components/toast";
+export * from "./components/toggle";
 export * from "./components/tooltip";
 export * from "./components/user-menu-dropdown";

package/dist/index.js

@@ -3,23 +3,29 @@
 export * from "./components/accordion";
 export * from "./components/alert";
 export * from "./components/alert-dialog";
+export * from "./components/app-shell";
 export * from "./components/aspect-ratio";
 export * from "./components/avatar";
 export * from "./components/badge";
 export * from "./components/banner";
+export * from "./components/box";
 export * from "./components/breadcrumbs";
+export * from "./components/burger";
 export * from "./components/button";
 export * from "./components/button-group";
 export * from "./components/calendar";
 export * from "./components/card";
+export * from "./components/center";
 export * from "./components/charts";
 export * from "./components/checkbox";
+export * from "./components/code";
+export * from "./components/collapse";
+export * from "./components/color-input";
 export * from "./components/combobox";
 export * from "./components/command";
 export * from "./components/container";
 export * from "./components/data-table";
 export * from "./components/date-picker";
-// export * from "./components/design-system"; // No index
 export * from "./components/dialog";
 export * from "./components/dnd";
 export * from "./components/drawer";
@@ -30,51 +36,60 @@ export * from "./components/field";
 export * from "./components/file-upload";
 export * from "./components/flex";
 export * from "./components/footer";
+export * from "./components/grid";
 export * from "./components/group";
 export * from "./components/header";
 export * from "./components/heading";
+export * from "./components/indicator";
 export * from "./components/input";
 export * from "./components/input-group";
 export * from "./components/input-otp";
+export * from "./components/kbd";
 export * from "./components/label";
 export * from "./components/list";
 export * from "./components/loading";
+export * from "./components/loading-overlay";
 export * from "./components/menubar";
 export * from "./components/metric-card";
 export * from "./components/multi-select";
+export * from "./components/nav-link";
 export * from "./components/navigation";
 export * from "./components/navigation-menu";
+export * from "./components/number-input";
+export * from "./components/overlay";
 export * from "./components/page-transition";
 export * from "./components/pagination";
+export * from "./components/paper";
 export * from "./components/password-strength-indicator";
 export * from "./components/popover";
 export * from "./components/progress";
 export * from "./components/radio-group";
 export * from "./components/resizable";
+export * from "./components/ring-progress";
 export * from "./components/scroll-area";
+export * from "./components/segmented-control";
 export * from "./components/select";
 export * from "./components/separator";
 export * from "./components/session-card";
 export * from "./components/sidebar";
-// export * from "./components/skeleton"; // Conflicts with others
+export * from "./components/skeleton";
+export * from "./components/skip-to-content";
 export * from "./components/slider";
 export * from "./components/social-login-button";
+export * from "./components/social-login-buttons";
 export * from "./components/sparkline-chart";
+export * from "./components/spinner";
+export * from "./components/spoiler";
 export * from "./components/stack";
+export * from "./components/steps";
 export * from "./components/switch";
 export * from "./components/table";
 export * from "./components/tabs";
 export * from "./components/tag-input";
 export * from "./components/text";
 export * from "./components/textarea";
+export * from "./components/timeline";
 export * from "./components/toast";
+export * from "./components/toggle";
 export * from "./components/tooltip";
 export * from "./components/user-menu-dropdown";
-// Export styles - but styles is a css file, not ts
-// export * from "./styles";
-// Export config - no index
-// export * from "./config";
-// Export lib - no index
-// export * from "./lib";
-// Export primitives - no index
-// export * from "./primitives";

package/dist/lib/animations.js

@@ -94,100 +94,100 @@ export const transitionClasses = {
  * Define the actual CSS keyframes in your global styles or Tailwind config.
  * These values match the keyframes from design tokens.
  */
-export const keyframesCSS = `
-  @keyframes fade-in {
-    from { opacity: 0; }
-    to { opacity: 1; }
-  }
-
-  @keyframes fade-out {
-    from { opacity: 1; }
-    to { opacity: 0; }
-  }
-
-  @keyframes slide-in-from-top {
-    from { transform: translateY(-100%); }
-    to { transform: translateY(0); }
-  }
-
-  @keyframes slide-in-from-bottom {
-    from { transform: translateY(100%); }
-    to { transform: translateY(0); }
-  }
-
-  @keyframes slide-in-from-left {
-    from { transform: translateX(-100%); }
-    to { transform: translateX(0); }
-  }
-
-  @keyframes slide-in-from-right {
-    from { transform: translateX(100%); }
-    to { transform: translateX(0); }
-  }
-
-  @keyframes slide-out-to-top {
-    from { transform: translateY(0); }
-    to { transform: translateY(-100%); }
-  }
-
-  @keyframes slide-out-to-bottom {
-    from { transform: translateY(0); }
-    to { transform: translateY(100%); }
-  }
-
-  @keyframes slide-out-to-left {
-    from { transform: translateX(0); }
-    to { transform: translateX(-100%); }
-  }
-
-  @keyframes slide-out-to-right {
-    from { transform: translateX(0); }
-    to { transform: translateX(100%); }
-  }
-
-  @keyframes scale-in {
-    from { transform: scale(0.95); opacity: 0; }
-    to { transform: scale(1); opacity: 1; }
-  }
-
-  @keyframes scale-out {
-    from { transform: scale(1); opacity: 1; }
-    to { transform: scale(0.95); opacity: 0; }
-  }
-
-  @keyframes expand-vertical {
-    from {
-      max-height: 0;
-      opacity: 0;
-    }
-    to {
-      max-height: var(--max-height, 1000px);
-      opacity: 1;
-    }
-  }
-
-  @keyframes collapse-vertical {
-    from {
-      max-height: var(--max-height, 1000px);
-      opacity: 1;
-    }
-    to {
-      max-height: 0;
-      opacity: 0;
-    }
-  }
-
-  /* Respect prefers-reduced-motion */
-  @media (prefers-reduced-motion: reduce) {
-    *,
-    *::before,
-    *::after {
-      animation-duration: 0.01ms !important;
-      animation-iteration-count: 1 !important;
-      transition-duration: 0.01ms !important;
-      scroll-behavior: auto !important;
-    }
-  }
+export const keyframesCSS = `
+  @keyframes fade-in {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
+
+  @keyframes fade-out {
+    from { opacity: 1; }
+    to { opacity: 0; }
+  }
+
+  @keyframes slide-in-from-top {
+    from { transform: translateY(-100%); }
+    to { transform: translateY(0); }
+  }
+
+  @keyframes slide-in-from-bottom {
+    from { transform: translateY(100%); }
+    to { transform: translateY(0); }
+  }
+
+  @keyframes slide-in-from-left {
+    from { transform: translateX(-100%); }
+    to { transform: translateX(0); }
+  }
+
+  @keyframes slide-in-from-right {
+    from { transform: translateX(100%); }
+    to { transform: translateX(0); }
+  }
+
+  @keyframes slide-out-to-top {
+    from { transform: translateY(0); }
+    to { transform: translateY(-100%); }
+  }
+
+  @keyframes slide-out-to-bottom {
+    from { transform: translateY(0); }
+    to { transform: translateY(100%); }
+  }
+
+  @keyframes slide-out-to-left {
+    from { transform: translateX(0); }
+    to { transform: translateX(-100%); }
+  }
+
+  @keyframes slide-out-to-right {
+    from { transform: translateX(0); }
+    to { transform: translateX(100%); }
+  }
+
+  @keyframes scale-in {
+    from { transform: scale(0.95); opacity: 0; }
+    to { transform: scale(1); opacity: 1; }
+  }
+
+  @keyframes scale-out {
+    from { transform: scale(1); opacity: 1; }
+    to { transform: scale(0.95); opacity: 0; }
+  }
+
+  @keyframes expand-vertical {
+    from {
+      max-height: 0;
+      opacity: 0;
+    }
+    to {
+      max-height: var(--max-height, 1000px);
+      opacity: 1;
+    }
+  }
+
+  @keyframes collapse-vertical {
+    from {
+      max-height: var(--max-height, 1000px);
+      opacity: 1;
+    }
+    to {
+      max-height: 0;
+      opacity: 0;
+    }
+  }
+
+  /* Respect prefers-reduced-motion */
+  @media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+      scroll-behavior: auto !important;
+    }
+  }
 `;
 /**
  * Utility function to build animation class string