@thesage/ui 0.1.0 → 1.0.0

package/README.md

@@ -6,36 +6,58 @@
 [![License](https://img.shields.io/npm/l/@thesage/ui?color=blue&style=flat-square)](https://github.com/shalomormsby/ecosystem/blob/main/LICENSE)
 [![Downloads](https://img.shields.io/npm/dt/@thesage/ui?color=teal&style=flat-square)](https://www.npmjs.com/package/@thesage/ui)
 
-**The Design Engine for the Solopreneur.**
+**Sage — Make it Lovable.**
 
-[Documentation](https://thesage.dev) • [Components](https://thesage.dev/components) • [GitHub](https://github.com/shalomormsby/ecosystem)
+Components that feel alive. Themes with real personality. Motion your users control. Designed for humans. Fluent with AI.
+
+[Documentation](https://thesage.dev) | [Components](https://thesage.dev/components) | [GitHub](https://github.com/shalomormsby/ecosystem)
 
 </div>
 
 ---
 
-**Sage Design Engine** is not just a component library—it's a systematic design engine built for speed, consistency, and beauty. Built on top of **Radix UI** for headless accessibility and **Tailwind CSS** for styling, it provides a comprehensive suite of 45+ polished components that work together seamlessly.
+**Sage Design Engine** is a component library and design system built on **Radix UI** primitives and **Tailwind CSS**. 48+ accessible components, three distinct themes with runtime switching, and a user-controlled motion system — all wired through a 4-layer design token architecture.
+
+## Features
 
-## ✨ Features
+- **Accessible by default** — Built on WAI-ARIA standards via Radix UI. Keyboard navigable, screen reader compatible, WCAG AA contrast.
+- **Three themes, real personality** — Studio (professional), Terra (organic), Volt (electric). Runtime switching via CSS variables, light and dark modes each.
+- **User-controlled motion** — A 0–10 intensity scale that respects `prefers-reduced-motion`. Intensity 0 works perfectly — no degraded experience.
+- **Modular imports** — Core stays lean. Heavy features (forms, dates, tables, drag-and-drop, WebGL) ship as optional subpath exports — install only what you use.
+- **Type safe** — Written in TypeScript with full type inference. React 19 ref-as-prop pattern throughout.
+- **Design token system** — Colors, typography, spacing, motion, and syntax tokens. Change one primary color, everything updates.
 
-- **🎨 Systematic Design**: Powered by a robust design token system (colors, typography, spacing).
-- **♿ Fully Accessible**: Built on WAI-ARIA standards via Radix UI primitives.
-- **🌗 Mode Aware**: First-class support for light and dark modes with automatic color harmonization.
-- **🧩 Composable**: Components designed to fit together like LEGO blocks.
-- **🛠️ Type Safe**: Written in TypeScript with full type inference.
+## Installation
 
-## 🚀 Installation
+```bash
+pnpm add @thesage/ui
+```
 
-### 1. Install Dependencies
-Sage Design Engine is built on Tailwind CSS. You need to install the package and its peer dependencies.
+Sage requires **Tailwind CSS** as a styling engine:
 
 ```bash
-pnpm add @thesage/ui @thesage/tokens @thesage/hooks lucide-react clsx tailwind-merge
 pnpm add -D tailwindcss@^3.4 postcss autoprefixer
 ```
 
-### 2. Configure Tailwind
-Update your `tailwind.config.js` contents to use the preset and scan the component definitions.
+### Optional subpath exports
+
+Install peer dependencies only for the features you need:
+
+```bash
+# Forms (react-hook-form + zod validation)
+pnpm add react-hook-form @hookform/resolvers zod
+
+# Date picker
+pnpm add react-day-picker date-fns
+
+# Data tables
+pnpm add @tanstack/react-table
+
+# Drag and drop
+pnpm add @dnd-kit/core @dnd-kit/sortable @dnd-kit/utilities
+```
+
+### Configure Tailwind
 
 ```js
 /** @type {import('tailwindcss').Config} */
@@ -45,69 +67,82 @@ module.exports = {
     "./src/**/*.{ts,tsx}",
     "./node_modules/@thesage/ui/dist/**/*.{js,ts,jsx,tsx}"
   ],
-  theme: {
-    extend: {},
-  },
-  plugins: [],
 }
 ```
 
-### 3. Import Styles
-Import the global CSS file (which contains the theme variables) in your root entry file (e.g., `main.tsx` or `App.tsx`).
+### Import styles
 
 ```tsx
 import '@thesage/ui/globals.css';
 ```
 
-## 💻 Usage
-
-Sage Design Engine components are designed to be dropped into any React application.
+## Usage
 
 ```tsx
-import { Button, Card, Text, Heading } from '@thesage/ui';
+import { Button, Card, ThemeProvider } from '@thesage/ui';
 
-export default function WelcomeCard() {
+export default function App() {
   return (
-    <Card className="max-w-md p-6">
-      <Heading level={3} className="mb-2">Welcome to Sage</Heading>
-      <Text variant="muted" className="mb-4">
-        Build faster with components that look premium out of the box.
-      </Text>
-      <div className="flex gap-2">
-        <Button variant="primary">Get Started</Button>
-        <Button variant="ghost">Documentation</Button>
-      </div>
-    </Card>
+    <ThemeProvider theme="studio" defaultMode="system">
+      <Card className="max-w-md p-6">
+        <h3 className="mb-2 text-lg font-semibold">Welcome to Sage</h3>
+        <p className="mb-4 text-muted-foreground">
+          Build beautifully with components that feel premium out of the box.
+        </p>
+        <div className="flex gap-2">
+          <Button>Get Started</Button>
+          <Button variant="ghost">Documentation</Button>
+        </div>
+      </Card>
+    </ThemeProvider>
   );
 }
 ```
 
-## 🖌️ Theming
-
-Sage Design Engine uses a 4-layer token system. Changing a single primary color automatically updates buttons, focus rings, and chart colors across your entire application.
+### Subpath imports
 
 ```tsx
-// Example: Customizing the theme
-import { ThemeProvider } from '@thesage/ui';
-
-export default function App({ children }) {
-  return (
-    <ThemeProvider theme="sage" defaultMode="system">
-      {children}
-    </ThemeProvider>
-  );
-}
+import { useMotionPreference, useTheme } from '@thesage/ui/hooks'
+import { ThemeProvider } from '@thesage/ui/providers'
+import { cn } from '@thesage/ui/utils'
+
+// Optional feature imports
+import { Form, FormField } from '@thesage/ui/forms'
+import { DatePicker } from '@thesage/ui/dates'
+import { DataTable } from '@thesage/ui/tables'
+import { SortableList } from '@thesage/ui/dnd'
 ```
 
-## 📦 Component Categories
-
-- **Actions**: Button, Toggle, ToggleGroup
-- **Forms**: Input, Select, Checkbox, Switch, Slider, Form
-- **Navigation**: Tabs, Menubar, Breadcrumb, Pagination
-- **Overlays**: Dialog, Sheet, Popover, Tooltip, Toast
-- **Data Display**: Card, Avatar, Badge, Table, ScrollArea
-- **Feedback**: Alert, Progress, Skeleton, Sonner
-
-## 📄 License
-
-MIT © [Shalom Ormsby](https://github.com/shalomormsby)
+## Component categories
+
+| Category | Examples |
+|----------|----------|
+| **Actions** | Button, Toggle, ToggleGroup |
+| **Forms** | Input, Select, Checkbox, Switch, Slider, SearchBar |
+| **Navigation** | Tabs, Menubar, Breadcrumb, Pagination, NavigationMenu |
+| **Overlays** | Dialog, Sheet, Popover, Tooltip, ContextMenu, HoverCard |
+| **Data Display** | Card, Avatar, Badge, Table, ScrollArea, Carousel |
+| **Feedback** | Alert, Progress, Skeleton, Toast (Sonner) |
+| **Layout** | Accordion, Separator, ResizablePanels, Collapsible |
+| **Features** | Customizer, ThemeSwitcher |
+
+## Bundle size
+
+Core and optional entry points are independently tracked via [size-limit](https://github.com/ai/size-limit):
+
+| Entry point | Brotli size |
+|-------------|-------------|
+| Core | ~146 KB |
+| Hooks | ~40 KB |
+| Providers | ~60 KB |
+| Tokens | ~70 KB |
+| Utils | ~25 KB |
+| Forms | ~9.4 KB |
+| Dates | ~29 KB |
+| Tables | ~8.3 KB |
+| DnD | ~8.3 KB |
+| WebGL | ~1.1 KB |
+
+## License
+
+MIT &copy; [Shalom Ormsby](https://github.com/shalomormsby)

package/dist/dates.d.mts

@@ -0,0 +1,20 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { DayPicker } from 'react-day-picker';
+
+type CalendarProps = React.ComponentProps<typeof DayPicker>;
+declare function Calendar({ className, classNames, showOutsideDays, ...props }: CalendarProps): react_jsx_runtime.JSX.Element;
+declare namespace Calendar {
+    var displayName: string;
+}
+
+interface DatePickerProps {
+    date?: Date;
+    onDateChange?: (date: Date | undefined) => void;
+    placeholder?: string;
+    className?: string;
+    disabled?: boolean;
+}
+declare function DatePicker({ date, onDateChange, placeholder, className, disabled, }: DatePickerProps): react_jsx_runtime.JSX.Element;
+
+export { Calendar, type CalendarProps, DatePicker, type DatePickerProps };

package/dist/dates.d.ts

@@ -0,0 +1,20 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { DayPicker } from 'react-day-picker';
+
+type CalendarProps = React.ComponentProps<typeof DayPicker>;
+declare function Calendar({ className, classNames, showOutsideDays, ...props }: CalendarProps): react_jsx_runtime.JSX.Element;
+declare namespace Calendar {
+    var displayName: string;
+}
+
+interface DatePickerProps {
+    date?: Date;
+    onDateChange?: (date: Date | undefined) => void;
+    placeholder?: string;
+    className?: string;
+    disabled?: boolean;
+}
+declare function DatePicker({ date, onDateChange, placeholder, className, disabled, }: DatePickerProps): react_jsx_runtime.JSX.Element;
+
+export { Calendar, type CalendarProps, DatePicker, type DatePickerProps };

package/dist/dates.js

@@ -0,0 +1,230 @@
+"use client";
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/dates.ts
+var dates_exports = {};
+__export(dates_exports, {
+  Calendar: () => Calendar,
+  DatePicker: () => DatePicker
+});
+module.exports = __toCommonJS(dates_exports);
+
+// src/components/data-display/Calendar.tsx
+var import_lucide_react = require("lucide-react");
+var import_react_day_picker = require("react-day-picker");
+
+// src/lib/utils.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+function cn(...inputs) {
+  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
+}
+
+// src/components/actions/Button.tsx
+var import_class_variance_authority = require("class-variance-authority");
+var import_react_slot = require("@radix-ui/react-slot");
+var import_jsx_runtime = require("react/jsx-runtime");
+var buttonVariants = (0, import_class_variance_authority.cva)(
+  "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 sage-interactive [&_svg]:transition-transform [&_svg]:duration-300 hover:[&_svg]:translate-x-1",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground shadow",
+        primary: "bg-primary text-primary-foreground shadow",
+        // Alias for default
+        destructive: "bg-destructive text-destructive-foreground shadow-sm",
+        outline: "border border-input bg-transparent shadow-sm hover:bg-primary hover:text-primary-foreground hover:border-primary",
+        secondary: "bg-black/5 dark:bg-white/10 backdrop-blur-md border border-black/5 dark:border-white/10 text-secondary-foreground shadow-sm hover:bg-primary hover:text-primary-foreground dark:hover:bg-primary dark:hover:text-primary-foreground",
+        ghost: "hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+var Button = ({
+  ref,
+  className,
+  variant,
+  size,
+  asChild = false,
+  children,
+  ...props
+}) => {
+  const Comp = asChild ? import_react_slot.Slot : "button";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    Comp,
+    {
+      className: cn(buttonVariants({ variant, size, className })),
+      ref,
+      ...props,
+      children: asChild ? children : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "relative z-20 flex items-center justify-center gap-2", children })
+    }
+  );
+};
+
+// src/components/data-display/Calendar.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    import_react_day_picker.DayPicker,
+    {
+      showOutsideDays,
+      className: cn("p-3", className),
+      classNames: {
+        months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
+        month: "space-y-4",
+        caption: "flex justify-center pt-1 relative items-center",
+        caption_label: "text-sm font-medium",
+        nav: "space-x-1 flex items-center",
+        nav_button: cn(
+          buttonVariants({ variant: "outline" }),
+          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
+        ),
+        nav_button_previous: "absolute left-1",
+        nav_button_next: "absolute right-1",
+        table: "w-full border-collapse space-y-1",
+        head_row: "flex",
+        head_cell: "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
+        row: "flex w-full mt-2",
+        cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
+        day: cn(
+          buttonVariants({ variant: "ghost" }),
+          "h-9 w-9 p-0 font-normal aria-selected:opacity-100"
+        ),
+        day_range_end: "day-range-end",
+        day_selected: "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
+        day_today: "bg-accent text-accent-foreground",
+        day_outside: "day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30",
+        day_disabled: "text-muted-foreground opacity-50",
+        day_range_middle: "aria-selected:bg-accent aria-selected:text-accent-foreground",
+        day_hidden: "invisible",
+        ...classNames
+      },
+      components: {
+        Chevron: ({ ...props2 }) => {
+          if (props2.orientation === "left") {
+            return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react.ChevronLeft, { className: "h-4 w-4" });
+          }
+          return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react.ChevronRight, { className: "h-4 w-4" });
+        }
+      },
+      ...props
+    }
+  );
+}
+Calendar.displayName = "Calendar";
+
+// src/components/layout/DatePicker.tsx
+var import_date_fns = require("date-fns");
+var import_lucide_react2 = require("lucide-react");
+
+// src/components/overlays/Popover.tsx
+var PopoverPrimitive = __toESM(require("@radix-ui/react-popover"));
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var Popover = PopoverPrimitive.Root;
+var PopoverTrigger = PopoverPrimitive.Trigger;
+var PopoverContent = ({
+  ref,
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(PopoverPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  PopoverPrimitive.Content,
+  {
+    ref,
+    align,
+    sideOffset,
+    className: cn(
+      "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    ),
+    ...props
+  }
+) });
+
+// src/components/layout/DatePicker.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function DatePicker({
+  date,
+  onDateChange,
+  placeholder = "Pick a date",
+  className,
+  disabled = false
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(Popover, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+      Button,
+      {
+        variant: "outline",
+        className: cn(
+          "w-[280px] justify-start text-left font-normal",
+          !date && "text-muted-foreground",
+          className
+        ),
+        disabled,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react2.Calendar, { className: "mr-2 h-4 w-4" }),
+          date ? (0, import_date_fns.format)(date, "PPP") : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: placeholder })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(PopoverContent, { className: "w-auto p-0", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      Calendar,
+      {
+        mode: "single",
+        selected: date,
+        onSelect: onDateChange,
+        initialFocus: true
+      }
+    ) })
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Calendar,
+  DatePicker
+});
+//# sourceMappingURL=dates.js.map

package/dist/dates.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/dates.ts","../src/components/data-display/Calendar.tsx","../src/lib/utils.ts","../src/components/actions/Button.tsx","../src/components/layout/DatePicker.tsx","../src/components/overlays/Popover.tsx"],"sourcesContent":["export * from './components/data-display/Calendar';\nexport * from './components/layout/DatePicker';\n","\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronLeft, ChevronRight } from \"lucide-react\"\nimport { DayPicker } from \"react-day-picker\"\n\nimport { cn } from \"../../lib/utils\"\nimport { buttonVariants } from \"../actions/Button\"\n\nexport type CalendarProps = React.ComponentProps<typeof DayPicker>\n\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  ...props\n}: CalendarProps) {\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\"p-3\", className)}\n      classNames={{\n        months: \"flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0\",\n        month: \"space-y-4\",\n        caption: \"flex justify-center pt-1 relative items-center\",\n        caption_label: \"text-sm font-medium\",\n        nav: \"space-x-1 flex items-center\",\n        nav_button: cn(\n          buttonVariants({ variant: \"outline\" }),\n          \"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100\"\n        ),\n        nav_button_previous: \"absolute left-1\",\n        nav_button_next: \"absolute right-1\",\n        table: \"w-full border-collapse space-y-1\",\n        head_row: \"flex\",\n        head_cell:\n          \"text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]\",\n        row: \"flex w-full mt-2\",\n        cell: \"h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20\",\n        day: cn(\n          buttonVariants({ variant: \"ghost\" }),\n          \"h-9 w-9 p-0 font-normal aria-selected:opacity-100\"\n        ),\n        day_range_end: \"day-range-end\",\n        day_selected:\n          \"bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground\",\n        day_today: \"bg-accent text-accent-foreground\",\n        day_outside:\n          \"day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30\",\n        day_disabled: \"text-muted-foreground opacity-50\",\n        day_range_middle:\n          \"aria-selected:bg-accent aria-selected:text-accent-foreground\",\n        day_hidden: \"invisible\",\n        ...classNames,\n      }}\n      components={{\n        Chevron: ({ ...props }) => {\n          if (props.orientation === \"left\") {\n            return <ChevronLeft className=\"h-4 w-4\" />\n          }\n          return <ChevronRight className=\"h-4 w-4\" />\n        },\n      }}\n      {...props}\n    />\n  )\n}\nCalendar.displayName = \"Calendar\"\n\nexport { Calendar }\n","import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n    return twMerge(clsx(inputs));\n}\n","import * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../lib/utils';\nimport { Slot } from '@radix-ui/react-slot';\n\nconst buttonVariants = cva(\n    'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 sage-interactive [&_svg]:transition-transform [&_svg]:duration-300 hover:[&_svg]:translate-x-1',\n    {\n        variants: {\n            variant: {\n                default: 'bg-primary text-primary-foreground shadow',\n                primary: 'bg-primary text-primary-foreground shadow', // Alias for default\n                destructive: 'bg-destructive text-destructive-foreground shadow-sm',\n                outline: 'border border-input bg-transparent shadow-sm hover:bg-primary hover:text-primary-foreground hover:border-primary',\n                secondary: 'bg-black/5 dark:bg-white/10 backdrop-blur-md border border-black/5 dark:border-white/10 text-secondary-foreground shadow-sm hover:bg-primary hover:text-primary-foreground dark:hover:bg-primary dark:hover:text-primary-foreground',\n                ghost: 'hover:text-accent-foreground',\n                link: 'text-primary underline-offset-4 hover:underline',\n            },\n            size: {\n                default: 'h-9 px-4 py-2',\n                sm: 'h-8 rounded-md px-3 text-xs',\n                lg: 'h-10 rounded-md px-8',\n                icon: 'h-9 w-9',\n            },\n        },\n        defaultVariants: {\n            variant: 'default',\n            size: 'default',\n        },\n    }\n);\n\nexport interface ButtonProps\n    extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof buttonVariants> {\n    asChild?: boolean;\n}\n\nconst Button = (\n    {\n        ref,\n        className,\n        variant,\n        size,\n        asChild = false,\n        children,\n        ...props\n    }: ButtonProps & {\n        ref?: React.Ref<HTMLButtonElement>;\n    }\n) => {\n    const Comp = asChild ? Slot : \"button\"\n    return (\n        <Comp\n            className={cn(buttonVariants({ variant, size, className }))}\n            ref={ref}\n            {...props}\n        >\n            {asChild ? (\n                children\n            ) : (\n                <span className=\"relative z-20 flex items-center justify-center gap-2\">\n                    {children}\n                </span>\n            )}\n        </Comp>\n    )\n}\n\nexport { Button, buttonVariants };\n","\"use client\"\n\nimport * as React from \"react\"\nimport { format } from \"date-fns\"\nimport { Calendar as CalendarIcon } from \"lucide-react\"\n\nimport { cn } from \"../../lib/utils\"\nimport { Button } from \"../actions/Button\"\nimport { Calendar } from \"../data-display/Calendar\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"../overlays/Popover\"\n\nexport interface DatePickerProps {\n  date?: Date\n  onDateChange?: (date: Date | undefined) => void\n  placeholder?: string\n  className?: string\n  disabled?: boolean\n}\n\nexport function DatePicker({\n  date,\n  onDateChange,\n  placeholder = \"Pick a date\",\n  className,\n  disabled = false,\n}: DatePickerProps) {\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <Button\n          variant=\"outline\"\n          className={cn(\n            \"w-[280px] justify-start text-left font-normal\",\n            !date && \"text-muted-foreground\",\n            className\n          )}\n          disabled={disabled}\n        >\n          <CalendarIcon className=\"mr-2 h-4 w-4\" />\n          {date ? format(date, \"PPP\") : <span>{placeholder}</span>}\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"w-auto p-0\">\n        <Calendar\n          mode=\"single\"\n          selected={date}\n          onSelect={onDateChange}\n          initialFocus\n        />\n      </PopoverContent>\n    </Popover>\n  )\n}\n","\"use client\";\nimport * as React from \"react\"\nimport * as PopoverPrimitive from \"@radix-ui/react-popover\"\n\nimport { cn } from \"../../lib/utils\"\n\nconst Popover = PopoverPrimitive.Root\n\nconst PopoverTrigger = PopoverPrimitive.Trigger\n\nconst PopoverAnchor = PopoverPrimitive.Anchor\n\nconst PopoverContent = (\n  {\n    ref,\n    className,\n    align = \"center\",\n    sideOffset = 4,\n    ...props\n  }: React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> & {\n    ref?: React.Ref<React.ElementRef<typeof PopoverPrimitive.Content>>;\n  }\n) => (<PopoverPrimitive.Portal>\n  <PopoverPrimitive.Content\n    ref={ref}\n    align={align}\n    sideOffset={sideOffset}\n    className={cn(\n      \"z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n      className\n    )}\n    {...props}\n  />\n</PopoverPrimitive.Portal>)\n\nexport { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }\n"],"mappings":"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","names":["import_jsx_runtime","props","import_lucide_react","import_jsx_runtime","import_jsx_runtime","CalendarIcon"]}