@sth87/shadcn-design-system 0.0.1

package/README.md

@@ -0,0 +1,487 @@
+# @dsui/design-system
+
+A modern, fully-typed React design system built on top of **shadcn/ui** with enhanced features, TypeScript, TailwindCSS, and Radix UI primitives.
+
+[![npm version](https://img.shields.io/npm/v/@dsui/design-system.svg)](https://www.npmjs.com/package/@dsui/design-system)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+
+## 📦 Installation
+
+DSUI bundles all its dependencies for easy installation:
+
+```bash
+# npm
+npm install dsui react react-dom
+
+# yarn
+yarn add dsui react react-dom
+
+# pnpm
+pnpm add dsui react react-dom
+```
+
+That's it! All other dependencies (motion, date-fns, lucide-react, tailwindcss, etc.) are automatically installed.
+
+See [INSTALLATION.md](./INSTALLATION.md) for detailed installation guide.
+
+## 🚀 Quick Start
+
+### 1. Import CSS
+
+Import the design system CSS in your app entry point:
+
+```tsx
+// main.tsx or App.tsx
+import "dsui/theme.css";
+import "dsui/index.css";
+import "dsui/animation.css";
+```
+
+### 2. Configure TailwindCSS
+
+Add the design system to your `tailwind.config.js`:
+
+```js
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./src/**/*.{js,jsx,ts,tsx}",
+    "./node_modules/dsui/dist/**/*.{js,mjs}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [require("tailwindcss-animate")],
+};
+```
+
+### 3. Use Components
+
+```tsx
+import { Button, Dialog } from "@dsui/design-system";
+
+function App() {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <div>
+      <Button variant="default">Click me</Button>
+
+      {/* Dialog with trigger prop */}
+      <Dialog
+        trigger={<Button>Open Dialog</Button>}
+        title="Welcome"
+        description="This is an enhanced dialog component"
+        footer={
+          <div className="flex gap-2 justify-end w-full">
+            <Button variant="outline" onClick={() => setOpen(false)}>
+              Cancel
+            </Button>
+            <Button>Confirm</Button>
+          </div>
+        }
+      >
+        <p>Dialog content goes here</p>
+      </Dialog>
+    </div>
+  );
+}
+```
+
+## 📚 Component Import
+
+### Full Import
+
+Import all components from the main entry:
+
+```tsx
+import {
+  Avatar,
+  Badge,
+  Button,
+  Calendar,
+  Checkbox,
+  Dialog,
+  Input,
+  Select,
+  Tabs,
+  Toast,
+} from "@dsui/design-system";
+```
+
+### Tree-shakeable Imports
+
+Import individual components for optimal bundle size:
+
+```tsx
+import { Button } from "@dsui/design-system/button";
+import { Dialog } from "@dsui/design-system/dialog";
+import { DatePicker } from "@dsui/design-system/datepicker";
+import { Input } from "@dsui/design-system/input";
+```
+
+## 🎨 Theme Configuration
+
+### CSS Variables
+
+The design system uses CSS variables for theming. Customize colors in your global CSS:
+
+```css
+:root {
+  /* Light mode */
+  --background: 0 0% 100%;
+  --foreground: 222.2 84% 4.9%;
+  --primary: 221.2 83.2% 53.3%;
+  --primary-foreground: 210 40% 98%;
+  --secondary: 210 40% 96.1%;
+  --secondary-foreground: 222.2 47.4% 11.2%;
+  --muted: 210 40% 96.1%;
+  --muted-foreground: 215.4 16.3% 46.9%;
+  --accent: 210 40% 96.1%;
+  --accent-foreground: 222.2 47.4% 11.2%;
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 210 40% 98%;
+  --border: 214.3 31.8% 91.4%;
+  --input: 214.3 31.8% 91.4%;
+  --ring: 221.2 83.2% 53.3%;
+  --radius: 0.5rem;
+}
+
+.dark {
+  /* Dark mode */
+  --background: 222.2 84% 4.9%;
+  --foreground: 210 40% 98%;
+  --primary: 217.2 91.2% 59.8%;
+  --primary-foreground: 222.2 47.4% 11.2%;
+  /* ... other dark mode variables */
+}
+```
+
+### Dark Mode
+
+Toggle dark mode by adding/removing the `dark` class on the root element:
+
+```tsx
+// Toggle dark mode
+document.documentElement.classList.toggle("dark");
+```
+
+## 🧩 Available Components
+
+### Form Components
+
+- **Button** - Primary, secondary, outline, ghost, and destructive variants
+- **Input** - Text, password, email with label support
+- **Checkbox** - Accessible checkbox with label
+- **Radio** - Radio button groups
+- **Switch** - Toggle switch component
+- **Select** - Dropdown select with search
+- **Textarea** - Multi-line text input
+- **Slider** - Range slider component
+- **InputOTP** - One-time password input
+
+### Data Display
+
+- **Avatar** - User profile pictures with fallback
+- **Badge** - Status badges and labels
+- **Calendar** - Date calendar picker
+- **DatePicker** - Date selection with range support
+- **Toast** - Notification toasts
+- **Tooltip** - Hover tooltips
+- **Skeleton** - Loading skeletons
+
+### Layout & Navigation
+
+- **Dialog** - Modal dialogs
+- **Sheet** - Side sheet/drawer
+- **Tabs** - Tab navigation
+- **Sidebar** - Navigation sidebar
+- **Breadcrumb** - Breadcrumb navigation
+- **Separator** - Visual dividers
+- **ScrollArea** - Custom scrollbars
+- **Collapsible** - Expandable sections
+
+### Overlay
+
+- **Popover** - Floating popovers
+- **Glass** - Glassmorphism effect component
+
+### Utility
+
+- **Theme** - Theme utilities and showcase
+- **FloatLabel** - Floating label for inputs
+
+## 🎯 Usage Examples
+
+### Button Component
+
+```tsx
+import { Button } from "@dsui/design-system";
+
+<Button variant="default" size="md">
+  Default Button
+</Button>
+
+<Button variant="outline" size="lg">
+  Outline Button
+</Button>
+
+<Button variant="solid" color="destructive">
+  Destructive Button
+</Button>
+```
+
+### Dialog Component
+
+The Dialog component is enhanced with additional features beyond shadcn/ui:
+
+```tsx
+import { Dialog, Button } from "@dsui/design-system";
+import { useState } from "react";
+
+function MyComponent() {
+  const [open, setOpen] = useState(false);
+
+  return (
+    // Simple dialog with trigger
+    <Dialog
+      open={open}
+      onOpenChange={setOpen}
+      trigger={<Button>Open Dialog</Button>}
+      title="Dialog Title"
+      description="Dialog description"
+      footer={
+        <div className="flex gap-2 justify-end w-full">
+          <Button variant="outline" onClick={() => setOpen(false)}>
+            Cancel
+          </Button>
+          <Button onClick={() => setOpen(false)}>Save Changes</Button>
+        </div>
+      }
+    >
+      <p className="text-sm text-muted-foreground">Dialog content goes here</p>
+    </Dialog>
+  );
+}
+```
+
+**Enhanced Dialog Features:**
+
+- **Variants**: `dialog`, `confirm`, `alert`, `info`, `warning`
+- **Sizes**: `sm`, `md`, `lg`, `xl`, `2xl`, `3xl`, `4xl`, `full`
+- **Positions**: `center`, `top`, `bottom`, `left`, `right`, `top-left`, `top-right`, `bottom-left`, `bottom-right`
+- **Animations**: `bounce`, `slide-up`, `slide-down`, `slide-left`, `slide-right`, `zoom-in`, `zoom-out`, `flip`, `glow`, `spec`
+- **Scroll Options**: `stickyHeader`, `stickyFooter`, `scrollable`
+
+```tsx
+// Confirm dialog variant
+<Dialog
+  variant="confirm"
+  trigger={<Button>Confirm Action</Button>}
+  title="Confirm Action"
+  description="Are you sure you want to proceed?"
+  onConfirm={() => console.log("Confirmed")}
+  onCancel={() => console.log("Cancelled")}
+/>
+
+// Alert dialog variant
+<Dialog
+  variant="alert"
+  trigger={<Button>Show Alert</Button>}
+  title="Warning"
+  description="This action cannot be undone"
+  onConfirm={() => console.log("Acknowledged")}
+  confirmText="I Understand"
+/>
+
+// Dialog with custom position and animation
+<Dialog
+  position="right"
+  animation="slide-left"
+  size="lg"
+  trigger={<Button>Side Panel</Button>}
+  title="Settings"
+>
+  <div className="space-y-4">
+    {/* Settings content */}
+  </div>
+</Dialog>
+
+// Scrollable dialog with sticky header/footer
+<Dialog
+  stickyHeader
+  stickyFooter
+  trigger={<Button>Long Content</Button>}
+  title="Scrollable Dialog"
+  footer={
+    <div className="flex gap-2 justify-end w-full">
+      <Button variant="outline">Cancel</Button>
+      <Button>Save</Button>
+    </div>
+  }
+>
+  <div className="space-y-4">
+    {Array.from({ length: 20 }).map((_, i) => (
+      <div key={i} className="p-4 border rounded">
+        Section {i + 1}
+      </div>
+    ))}
+  </div>
+</Dialog>
+```
+
+**Standalone Usage (without trigger prop):**
+
+```tsx
+function MyComponent() {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <Button onClick={() => setOpen(true)}>Open</Button>
+
+      <Dialog
+        open={open}
+        onOpenChange={setOpen}
+        title="Standalone Dialog"
+        description="Dialog without trigger prop"
+      >
+        <p>Content here</p>
+      </Dialog>
+    </>
+  );
+}
+```
+
+### DatePicker Component
+
+Enhanced DatePicker with range and time selection:
+
+```tsx
+import { DatePicker } from "@dsui/design-system";
+import { useState } from "react";
+
+function MyComponent() {
+  const [date, setDate] = useState<Date>();
+
+  return (
+    <DatePicker selected={date} onSelect={setDate} placeholder="Pick a date" />
+  );
+}
+```
+
+### Toast Notifications
+
+```tsx
+import { toast, Toaster } from "@dsui/design-system";
+
+function App() {
+  return (
+    <>
+      <Button onClick={() => toast.success("Success message!")}>
+        Show Toast
+      </Button>
+      <Button onClick={() => toast.error("Error message!")}>Show Error</Button>
+      <Button onClick={() => toast.info("Info message!")}>Show Info</Button>
+      <Toaster />
+    </>
+  );
+}
+```
+
+## 🎨 Styling & Customization
+
+### Using CSS Variables
+
+```tsx
+// Override specific component styles
+<Button
+  style={
+    {
+      "--primary": "200 100% 50%",
+      "--primary-foreground": "0 0% 100%",
+    } as React.CSSProperties
+  }
+>
+  Custom Styled Button
+</Button>
+```
+
+### Class Names
+
+All components accept `className` prop for custom styling:
+
+```tsx
+<Button className="custom-button-class">
+  Styled Button
+</Button>
+
+<Dialog
+  className="custom-dialog-class"
+  headerClassName="custom-header"
+  contentClassName="custom-content"
+  footerClassName="custom-footer"
+  trigger={<Button>Custom Styled Dialog</Button>}
+  title="Custom Dialog"
+>
+  <p>Content with custom styling</p>
+</Dialog>
+```
+
+### Variants with CVA
+
+Components use `class-variance-authority` for variant management:
+
+```tsx
+<Button variant="outline" size="lg" className="w-full">
+  Full Width Button
+</Button>
+```
+
+## 🔧 Development
+
+```bash
+# Install dependencies
+pnpm install
+
+# Start Storybook
+pnpm dev
+
+# Build library
+pnpm build
+
+# Run linting
+pnpm lint
+```
+
+## 📖 Documentation
+
+For detailed documentation and interactive examples, visit our [Storybook](https://your-storybook-url.com).
+
+## 🤝 Contributing
+
+Contributions are welcome! Please read our [Contributing Guide](CONTRIBUTING.md) for details.
+
+## 📄 License
+
+MIT © [Your Name]
+
+## 🙏 Credits
+
+This design system is built on top of [shadcn/ui](https://ui.shadcn.com/), enhancing it with:
+
+- Additional component variants and sizes
+- Enhanced animation support with Motion
+- Extended theming capabilities
+- Custom components like DatePicker with range/time support
+- Improved Dialog with positions, animations, and scroll options
+
+Built with:
+
+- [shadcn/ui](https://ui.shadcn.com/) - Base component library
+- [Radix UI](https://www.radix-ui.com/) - Unstyled, accessible primitives
+- [TailwindCSS](https://tailwindcss.com/) - Utility-first CSS framework
+- [Motion](https://motion.dev/) - Animation library
+- [date-fns](https://date-fns.org/) - Date utility library
+- [Lucide React](https://lucide.dev/) - Beautiful icon set
+- [React Day Picker](https://react-day-picker.js.org/) - Date picker component

package/dist/cjs/_virtual/_commonjsHelpers.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function e(t){return t&&t.__esModule&&Object.prototype.hasOwnProperty.call(t,"default")?t.default:t}exports.getDefaultExportFromCjs=e;
+//# sourceMappingURL=_commonjsHelpers.cjs.map

package/dist/cjs/_virtual/_commonjsHelpers.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"_commonjsHelpers.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/cjs/_virtual/index.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./_commonjsHelpers.cjs"),r=require("../node_modules/.pnpm/react-viewer@3.2.2/node_modules/react-viewer/dist/index.cjs");var t=r.__require();const o=e.getDefaultExportFromCjs(t);exports.default=o;
+//# sourceMappingURL=index.cjs.map

package/dist/cjs/_virtual/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/cjs/_virtual/index2.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});var e={exports:{}};exports.__module=e;
+//# sourceMappingURL=index2.cjs.map

package/dist/cjs/_virtual/index2.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index2.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/cjs/components/Accordion/Accordion.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react/jsx-runtime"),j=require("react"),t=require("@dsui/ui/components/accordion"),o=require("@dsui/ui/lib/utils"),A={primary:{trigger:"data-[state=open]:bg-primary/10 data-[state=open]:text-primary data-[state=open]:rounded-b-none data-[state=open]:border-primary/20",content:"bg-primary/10 rounded-b-md"},secondary:{trigger:"data-[state=open]:bg-secondary/10 data-[state=open]:text-secondary data-[state=open]:rounded-b-none data-[state=open]:border-secondary/20",content:"bg-secondary/10 rounded-b-md"},success:{trigger:"data-[state=open]:bg-success/10 data-[state=open]:text-success data-[state=open]:rounded-b-none data-[state=open]:border-success/20",content:"bg-success/10 rounded-b-md"},warning:{trigger:"data-[state=open]:bg-warning/10 data-[state=open]:text-warning data-[state=open]:rounded-b-none data-[state=open]:border-warning/20",content:"bg-warning/10 rounded-b-md"},error:{trigger:"data-[state=open]:bg-error/10 data-[state=open]:text-error data-[state=open]:rounded-b-none data-[state=open]:border-error/20",content:"bg-error/10 rounded-b-md"},glass:{trigger:"data-[state=open]:bg-glass/10 data-[state=open]:text-glass data-[state=open]:rounded-b-none data-[state=open]:border-glass/20",content:"bg-glass/10 rounded-b-md"}},v={default:{root:"rounded-lg",item:"px-0",trigger:"px-4 hover:bg-accent/50",content:"px-4"},bordered:{root:"rounded-lg border-2 divide-y-2",item:"px-0 border-0",trigger:"px-4 font-semibold hover:bg-accent",content:"px-4"},separated:{root:"space-y-2",item:"rounded-lg border bg-card last:border-b",trigger:"px-4 hover:bg-accent/50",content:"px-4"},ghost:{root:"",item:"border-0",trigger:"px-2 hover:bg-accent/30 rounded-md",content:"px-2"}},l=j.forwardRef((N,a)=>{const{items:i,variant:C="default",color:s,className:c,itemClassName:p,triggerClassName:u,contentClassName:b,children:g,type:m,...d}=N,r=v[C],x=s?A[s].trigger:"",y=s?A[s].content:"";return g&&!i?m==="multiple"?n.jsx(t.Accordion,{ref:a,type:"multiple",className:o.cn(r.root,c),...d,children:g}):n.jsx(t.Accordion,{ref:a,type:"single",className:o.cn(r.root,c),...d,children:g}):m==="multiple"?n.jsx(t.Accordion,{ref:a,type:"multiple",className:o.cn(r.root,c),...d,children:i?.map(e=>n.jsxs(t.AccordionItem,{value:e.value,disabled:e.disabled,className:o.cn(r.item,p,e.className),children:[n.jsx(t.AccordionTrigger,{className:o.cn(r.trigger,x,u,e.triggerClassName),children:e.trigger}),n.jsx(t.AccordionContent,{className:o.cn(r.content,y,b,e.contentClassName),children:e.content})]},e.value))}):n.jsx(t.Accordion,{ref:a,type:"single",className:o.cn(r.root,c),...d,children:i?.map(e=>n.jsxs(t.AccordionItem,{value:e.value,disabled:e.disabled,className:o.cn(r.item,p,e.className),children:[n.jsx(t.AccordionTrigger,{className:o.cn(r.trigger,x,u,e.triggerClassName),children:e.trigger}),n.jsx(t.AccordionContent,{className:o.cn(r.content,y,b,e.contentClassName),children:e?.content})]},e.value))})});l.displayName="Accordion";const h=Object.assign(l,{Item:t.AccordionItem,Trigger:t.AccordionTrigger,Content:t.AccordionContent});Object.defineProperty(exports,"AccordionContent",{enumerable:!0,get:()=>t.AccordionContent});Object.defineProperty(exports,"AccordionItem",{enumerable:!0,get:()=>t.AccordionItem});Object.defineProperty(exports,"AccordionTrigger",{enumerable:!0,get:()=>t.AccordionTrigger});exports.Accordion=l;exports.default=h;
+//# sourceMappingURL=Accordion.cjs.map

package/dist/cjs/components/Accordion/Accordion.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.cjs","sources":["../../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n  Accordion as SAccordion,\n  AccordionItem,\n  AccordionTrigger,\n  AccordionContent,\n} from \"@dsui/ui/components/accordion\";\nimport { cn } from \"@dsui/ui/lib/utils\";\nimport { type BasicColor } from \"@/types/variables\";\n\nexport type AccordionItemConfig = {\n  value: string;\n  trigger: React.ReactNode;\n  content?: React.ReactNode;\n  disabled?: boolean;\n  className?: string;\n  triggerClassName?: string;\n  contentClassName?: string;\n};\n\ntype AccordionBaseProps = {\n  items?: AccordionItemConfig[];\n  variant?: \"default\" | \"bordered\" | \"separated\" | \"ghost\";\n  color?: BasicColor;\n  itemClassName?: string;\n  triggerClassName?: string;\n  contentClassName?: string;\n  children?: React.ReactNode;\n  className?: string;\n  disabled?: boolean;\n  dir?: \"ltr\" | \"rtl\";\n  orientation?: \"horizontal\" | \"vertical\";\n  asChild?: boolean;\n};\n\ntype AccordionSingleProps = AccordionBaseProps & {\n  type: \"single\";\n  value?: string;\n  defaultValue?: string;\n  collapsible?: boolean;\n  onValueChange?: (newValue: string) => void;\n};\n\ntype AccordionMultipleProps = AccordionBaseProps & {\n  type: \"multiple\";\n  value?: string[];\n  defaultValue?: string[];\n  onValueChange?: (newValue: string[]) => void;\n};\n\nexport type AccordionProps = AccordionSingleProps | AccordionMultipleProps;\n\nconst colorVariants = {\n  primary: {\n    trigger:\n      \"data-[state=open]:bg-primary/10 data-[state=open]:text-primary data-[state=open]:rounded-b-none data-[state=open]:border-primary/20\",\n    content: \"bg-primary/10 rounded-b-md\",\n  },\n  secondary: {\n    trigger:\n      \"data-[state=open]:bg-secondary/10 data-[state=open]:text-secondary data-[state=open]:rounded-b-none data-[state=open]:border-secondary/20\",\n    content: \"bg-secondary/10 rounded-b-md\",\n  },\n  success: {\n    trigger:\n      \"data-[state=open]:bg-success/10 data-[state=open]:text-success data-[state=open]:rounded-b-none data-[state=open]:border-success/20\",\n    content: \"bg-success/10 rounded-b-md\",\n  },\n  warning: {\n    trigger:\n      \"data-[state=open]:bg-warning/10 data-[state=open]:text-warning data-[state=open]:rounded-b-none data-[state=open]:border-warning/20\",\n    content: \"bg-warning/10 rounded-b-md\",\n  },\n  error: {\n    trigger:\n      \"data-[state=open]:bg-error/10 data-[state=open]:text-error data-[state=open]:rounded-b-none data-[state=open]:border-error/20\",\n    content: \"bg-error/10 rounded-b-md\",\n  },\n  glass: {\n    trigger:\n      \"data-[state=open]:bg-glass/10 data-[state=open]:text-glass data-[state=open]:rounded-b-none data-[state=open]:border-glass/20\",\n    content: \"bg-glass/10 rounded-b-md\",\n  },\n};\n\nconst variantStyles = {\n  default: {\n    root: \"rounded-lg\",\n    item: \"px-0\",\n    trigger: \"px-4 hover:bg-accent/50\",\n    content: \"px-4\",\n  },\n  bordered: {\n    root: \"rounded-lg border-2 divide-y-2\",\n    item: \"px-0 border-0\",\n    trigger: \"px-4 font-semibold hover:bg-accent\",\n    content: \"px-4\",\n  },\n  separated: {\n    root: \"space-y-2\",\n    item: \"rounded-lg border bg-card last:border-b\",\n    trigger: \"px-4 hover:bg-accent/50\",\n    content: \"px-4\",\n  },\n  ghost: {\n    root: \"\",\n    item: \"border-0\",\n    trigger: \"px-2 hover:bg-accent/30 rounded-md\",\n    content: \"px-2\",\n  },\n};\n\nconst Accordion = React.forwardRef<HTMLDivElement, AccordionProps>(\n  (props, ref) => {\n    const {\n      items,\n      variant = \"default\",\n      color,\n      className,\n      itemClassName,\n      triggerClassName,\n      contentClassName,\n      children,\n      type,\n      ...rest\n    } = props;\n\n    const styles = variantStyles[variant];\n    const triggerColorClass = color ? colorVariants[color].trigger : \"\";\n    const contentColorClass = color ? colorVariants[color].content : \"\";\n\n    // If children are provided, use them directly (primitive usage)\n    if (children && !items) {\n      if (type === \"multiple\") {\n        return (\n          <SAccordion\n            ref={ref}\n            type=\"multiple\"\n            className={cn(styles.root, className)}\n            {...(rest as Omit<\n              AccordionMultipleProps,\n              keyof AccordionBaseProps | \"type\"\n            >)}\n          >\n            {children}\n          </SAccordion>\n        );\n      }\n      return (\n        <SAccordion\n          ref={ref}\n          type=\"single\"\n          className={cn(styles.root, className)}\n          {...(rest as Omit<\n            AccordionSingleProps,\n            keyof AccordionBaseProps | \"type\"\n          >)}\n        >\n          {children}\n        </SAccordion>\n      );\n    }\n\n    // Wrapper usage with items array\n    if (type === \"multiple\") {\n      return (\n        <SAccordion\n          ref={ref}\n          type=\"multiple\"\n          className={cn(styles.root, className)}\n          {...(rest as Omit<\n            AccordionMultipleProps,\n            keyof AccordionBaseProps | \"type\"\n          >)}\n        >\n          {items?.map((item) => (\n            <AccordionItem\n              key={item.value}\n              value={item.value}\n              disabled={item.disabled}\n              className={cn(styles.item, itemClassName, item.className)}\n            >\n              <AccordionTrigger\n                className={cn(\n                  styles.trigger,\n                  triggerColorClass,\n                  triggerClassName,\n                  item.triggerClassName,\n                )}\n              >\n                {item.trigger}\n              </AccordionTrigger>\n              <AccordionContent\n                className={cn(\n                  styles.content,\n                  contentColorClass,\n                  contentClassName,\n                  item.contentClassName,\n                )}\n              >\n                {item.content}\n              </AccordionContent>\n            </AccordionItem>\n          ))}\n        </SAccordion>\n      );\n    }\n\n    return (\n      <SAccordion\n        ref={ref}\n        type=\"single\"\n        className={cn(styles.root, className)}\n        {...(rest as Omit<\n          AccordionSingleProps,\n          keyof AccordionBaseProps | \"type\"\n        >)}\n      >\n        {items?.map((item) => (\n          <AccordionItem\n            key={item.value}\n            value={item.value}\n            disabled={item.disabled}\n            className={cn(styles.item, itemClassName, item.className)}\n          >\n            <AccordionTrigger\n              className={cn(\n                styles.trigger,\n                triggerColorClass,\n                triggerClassName,\n                item.triggerClassName,\n              )}\n            >\n              {item.trigger}\n            </AccordionTrigger>\n            <AccordionContent\n              className={cn(\n                styles.content,\n                contentColorClass,\n                contentClassName,\n                item.contentClassName,\n              )}\n            >\n              {item?.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </SAccordion>\n    );\n  },\n);\n\nAccordion.displayName = \"Accordion\";\n\n// Create compound component\nconst AccordionCompound = Object.assign(Accordion, {\n  Item: AccordionItem,\n  Trigger: AccordionTrigger,\n  Content: AccordionContent,\n});\n\nexport default AccordionCompound;\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent };\n"],"names":["colorVariants","variantStyles","Accordion","React","props","ref","items","variant","color","className","itemClassName","triggerClassName","contentClassName","children","type","rest","styles","triggerColorClass","contentColorClass","jsx","SAccordion","cn","item","jsxs","AccordionItem","AccordionTrigger","AccordionContent","AccordionCompound"],"mappings":"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"}

package/dist/cjs/components/Avatar/Avatar.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react/jsx-runtime"),v=require("react"),c=require("@dsui/ui/components/avatar"),d=require("@dsui/ui/index"),h=require("../../utils/animations.cjs");function p(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const a=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,a.get?a:{enumerable:!0,get:()=>e[r]})}}return t.default=e,Object.freeze(t)}const s=p(v);function y({size:e="md",variant:t="circle",animation:r,color:a,className:n,src:o,alt:l,fallback:g,...f}){const m=s.useMemo(()=>h.animationClass(r,n),[r,n]),b=s.useMemo(()=>{switch(e){case"xs":return"size-6";case"sm":return"size-8";case"md":return"size-10";case"lg":return"size-12";case"xl":return"size-16";default:return"size-10"}},[e]),x=s.useMemo(()=>{switch(t){case"circle":return"rounded-full";case"square":return"rounded-md";default:return"rounded-full"}},[t]),i=s.useMemo(()=>{switch(a){case"primary":return"bg-primary text-primary-foreground";case"secondary":return"bg-secondary text-secondary-foreground";case"dark":return"bg-neutral-900 text-white";case"light":return"bg-neutral-200 text-neutral-950";case"inverted":return"dark:bg-white dark:text-black";case"success":return"bg-success text-success-foreground";case"warning":return"bg-warning text-warning-foreground";case"error":return"bg-error text-error-foreground";case"glass":return"bg-white/15 backdrop-blur-sm";default:return""}},[a]);return u.jsxs(c.Avatar,{className:d.cn("relative flex shrink-0 transition-all duration-300",b,x,m?.className,i,n),...f,children:[o&&u.jsx(c.AvatarImage,{src:o,alt:l,className:"rounded-[inherit]"}),u.jsx(c.AvatarFallback,{className:d.cn("rounded-[inherit]",i,n),children:g})]})}exports.Avatar=y;
+//# sourceMappingURL=Avatar.cjs.map

package/dist/cjs/components/Avatar/Avatar.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.cjs","sources":["../../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import * as React from \"react\";\nimport {\n  Avatar as DsAvatar,\n  AvatarImage,\n  AvatarFallback,\n} from \"@dsui/ui/components/avatar\";\nimport { cn } from \"@dsui/ui/index\";\nimport type { BasicAnimation, BasicColor } from \"@/types/variables\";\nimport { animationClass } from \"@/utils/animations\";\n\ntype Color = BasicColor | \"dark\" | \"light\" | \"inverted\";\n\ntype Size = \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n\ntype Variant = \"circle\" | \"square\";\n\nexport type AvatarProps = React.ComponentProps<typeof DsAvatar> & {\n  size?: Size;\n  variant?: Variant;\n  animation?: BasicAnimation;\n  color?: Color | string;\n  src?: string;\n  alt?: string;\n  fallback?: React.ReactNode;\n};\n\nexport function Avatar({\n  size = \"md\",\n  variant = \"circle\",\n  animation,\n  color,\n  className,\n  src,\n  alt,\n  fallback,\n  ...props\n}: AvatarProps) {\n  const avatarAnimation = React.useMemo<{ className?: string } | null>(() => {\n    return animationClass(animation, className);\n  }, [animation, className]);\n\n  const avatarSize = React.useMemo<string>(() => {\n    switch (size) {\n      case \"xs\":\n        return \"size-6\";\n      case \"sm\":\n        return \"size-8\";\n      case \"md\":\n        return \"size-10\";\n      case \"lg\":\n        return \"size-12\";\n      case \"xl\":\n        return \"size-16\";\n      default:\n        return \"size-10\";\n    }\n  }, [size]);\n\n  const avatarVariant = React.useMemo<string>(() => {\n    switch (variant) {\n      case \"circle\":\n        return \"rounded-full\";\n      case \"square\":\n        return \"rounded-md\";\n      default:\n        return \"rounded-full\";\n    }\n  }, [variant]);\n\n  const avatarColor = React.useMemo<string>(() => {\n    switch (color) {\n      case \"primary\":\n        return \"bg-primary text-primary-foreground\";\n      case \"secondary\":\n        return \"bg-secondary text-secondary-foreground\";\n      case \"dark\":\n        return \"bg-neutral-900 text-white\";\n      case \"light\":\n        return \"bg-neutral-200 text-neutral-950\";\n      case \"inverted\":\n        return \"dark:bg-white dark:text-black\";\n      case \"success\":\n        return \"bg-success text-success-foreground\";\n      case \"warning\":\n        return \"bg-warning text-warning-foreground\";\n      case \"error\":\n        return \"bg-error text-error-foreground\";\n      case \"glass\":\n        return \"bg-white/15 backdrop-blur-sm\";\n      default:\n        return \"\";\n    }\n  }, [color]);\n\n  return (\n    <DsAvatar\n      className={cn(\n        \"relative flex shrink-0 transition-all duration-300\",\n        avatarSize,\n        avatarVariant,\n        avatarAnimation?.className,\n        avatarColor,\n        className,\n      )}\n      {...props}\n    >\n      {src && <AvatarImage src={src} alt={alt} className=\"rounded-[inherit]\" />}\n      <AvatarFallback\n        className={cn(\"rounded-[inherit]\", avatarColor, className)}\n      >\n        {fallback}\n      </AvatarFallback>\n    </DsAvatar>\n  );\n}\n"],"names":["Avatar","size","variant","animation","color","className","src","alt","fallback","props","avatarAnimation","React","animationClass","avatarSize","avatarVariant","avatarColor","jsxs","DsAvatar","cn","jsx","AvatarImage","AvatarFallback"],"mappings":"8gBA0BO,SAASA,EAAO,CACrB,KAAAC,EAAO,KACP,QAAAC,EAAU,SACV,UAAAC,EACA,MAAAC,EACA,UAAAC,EACA,IAAAC,EACA,IAAAC,EACA,SAAAC,EACA,GAAGC,CACL,EAAgB,CACd,MAAMC,EAAkBC,EAAM,QAAuC,IAC5DC,EAAAA,eAAeT,EAAWE,CAAS,EACzC,CAACF,EAAWE,CAAS,CAAC,EAEnBQ,EAAaF,EAAM,QAAgB,IAAM,CAC7C,OAAQV,EAAA,CACN,IAAK,KACH,MAAO,SACT,IAAK,KACH,MAAO,SACT,IAAK,KACH,MAAO,UACT,IAAK,KACH,MAAO,UACT,IAAK,KACH,MAAO,UACT,QACE,MAAO,SAAA,CAEb,EAAG,CAACA,CAAI,CAAC,EAEHa,EAAgBH,EAAM,QAAgB,IAAM,CAChD,OAAQT,EAAA,CACN,IAAK,SACH,MAAO,eACT,IAAK,SACH,MAAO,aACT,QACE,MAAO,cAAA,CAEb,EAAG,CAACA,CAAO,CAAC,EAENa,EAAcJ,EAAM,QAAgB,IAAM,CAC9C,OAAQP,EAAA,CACN,IAAK,UACH,MAAO,qCACT,IAAK,YACH,MAAO,yCACT,IAAK,OACH,MAAO,4BACT,IAAK,QACH,MAAO,kCACT,IAAK,WACH,MAAO,gCACT,IAAK,UACH,MAAO,qCACT,IAAK,UACH,MAAO,qCACT,IAAK,QACH,MAAO,iCACT,IAAK,QACH,MAAO,+BACT,QACE,MAAO,EAAA,CAEb,EAAG,CAACA,CAAK,CAAC,EAEV,OACEY,EAAAA,KAACC,EAAAA,OAAA,CACC,UAAWC,EAAAA,GACT,qDACAL,EACAC,EACAJ,GAAiB,UACjBK,EACAV,CAAA,EAED,GAAGI,EAEH,SAAA,CAAAH,GAAOa,EAAAA,IAACC,cAAA,CAAY,IAAAd,EAAU,IAAAC,EAAU,UAAU,oBAAoB,EACvEY,EAAAA,IAACE,EAAAA,eAAA,CACC,UAAWH,EAAAA,GAAG,oBAAqBH,EAAaV,CAAS,EAExD,SAAAG,CAAA,CAAA,CACH,CAAA,CAAA,CAGN"}

package/dist/cjs/components/Badge/Badge.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react/jsx-runtime"),r=require("react"),n=require("@dsui/ui/components/badge"),d=require("@dsui/ui/lib/utils"),o=require("lucide-react"),u=require("../../utils/animations.cjs"),t=r.forwardRef((c,l)=>{const{animation:i,...e}=c,s=r.useMemo(()=>u.animationEffect({animation:i,children:e?.children,className:e?.className,rootClassName:n.badgeVariants({variant:e?.variant,size:e?.size})}),[i,e]);return a.jsx(n.Badge,{ref:l,...e,className:d.cn(e?.className,s?.className),asChild:s?.children?!0:e.asChild,children:a.jsxs(a.Fragment,{children:[e?.isLoading&&a.jsx(o.LoaderCircle,{className:"animate-spin"}),!e?.isLoading&&(s?.children??e.children)]})})});t.displayName="Badge";exports.default=t;
+//# sourceMappingURL=Badge.cjs.map

package/dist/cjs/components/Badge/Badge.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.cjs","sources":["../../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport {\n  badgeVariants,\n  Badge as SBadge,\n  type BadgeProps as SBadgeProps,\n} from \"@dsui/ui/components/badge\";\nimport { cn } from \"@dsui/ui/lib/utils\";\nimport type { BadgeAnimation } from \"@/types/variables\";\nimport { LoaderCircle } from \"lucide-react\";\nimport { animationEffect } from \"@/utils/animations\";\n\nexport type BadgeProps = SBadgeProps & {\n  animation?: BadgeAnimation;\n  isLoading?: boolean;\n};\n\ntype AnimResult = {\n  className?: string;\n  style?: React.CSSProperties;\n  children?: React.ReactNode;\n  variant?: SBadgeProps[\"variant\"];\n};\n\nconst Badge = React.forwardRef<HTMLSpanElement, BadgeProps>((props, ref) => {\n  const { animation, ...rest } = props;\n\n  const badgeAnimation = useMemo<AnimResult | null>(() => {\n    return animationEffect<BadgeAnimation, SBadgeProps[\"variant\"]>({\n      animation,\n      children: rest?.children,\n      className: rest?.className,\n      rootClassName: badgeVariants({\n        variant: rest?.variant,\n        size: rest?.size,\n      }),\n    });\n  }, [animation, rest]);\n\n  return (\n    <SBadge\n      ref={ref}\n      {...rest}\n      className={cn(rest?.className, badgeAnimation?.className)}\n      asChild={badgeAnimation?.children ? true : rest.asChild}\n    >\n      <>\n        {rest?.isLoading && <LoaderCircle className=\"animate-spin\" />}\n        {!rest?.isLoading && (badgeAnimation?.children ?? rest.children)}\n      </>\n    </SBadge>\n  );\n});\n\nBadge.displayName = \"Badge\";\nexport default Badge;\n"],"names":["Badge","React","props","ref","animation","rest","badgeAnimation","useMemo","animationEffect","badgeVariants","jsx","SBadge","cn","jsxs","Fragment","LoaderCircle"],"mappings":"6SAuBMA,EAAQC,EAAM,WAAwC,CAACC,EAAOC,IAAQ,CAC1E,KAAM,CAAE,UAAAC,EAAW,GAAGC,CAAA,EAASH,EAEzBI,EAAiBC,EAAAA,QAA2B,IACzCC,kBAAwD,CAC7D,UAAAJ,EACA,SAAUC,GAAM,SAChB,UAAWA,GAAM,UACjB,cAAeI,EAAAA,cAAc,CAC3B,QAASJ,GAAM,QACf,KAAMA,GAAM,IAAA,CACb,CAAA,CACF,EACA,CAACD,EAAWC,CAAI,CAAC,EAEpB,OACEK,EAAAA,IAACC,EAAAA,MAAA,CACC,IAAAR,EACC,GAAGE,EACJ,UAAWO,EAAAA,GAAGP,GAAM,UAAWC,GAAgB,SAAS,EACxD,QAASA,GAAgB,SAAW,GAAOD,EAAK,QAEhD,SAAAQ,EAAAA,KAAAC,WAAA,CACG,SAAA,CAAAT,GAAM,WAAaK,EAAAA,IAACK,EAAAA,aAAA,CAAa,UAAU,eAAe,EAC1D,CAACV,GAAM,YAAcC,GAAgB,UAAYD,EAAK,SAAA,CAAA,CACzD,CAAA,CAAA,CAGN,CAAC,EAEDL,EAAM,YAAc"}

package/dist/cjs/components/Breadcrumb/Breadcrumb.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),o=require("react"),t=require("@dsui/ui/components/breadcrumb"),E=require("@dsui/ui/lib/utils"),g=require("lucide-react"),m=require("@dsui/ui/components/popover"),P={default:"",primary:"text-primary [&_[data-slot=breadcrumb-link]:hover]:text-primary/80 [&_[data-slot=breadcrumb-page]]:text-primary",secondary:"text-secondary [&_[data-slot=breadcrumb-link]:hover]:text-secondary/80 [&_[data-slot=breadcrumb-page]]:text-secondary",accent:"text-accent [&_[data-slot=breadcrumb-link]:hover]:text-accent/80 [&_[data-slot=breadcrumb-page]]:text-accent",destructive:"text-destructive [&_[data-slot=breadcrumb-link]:hover]:text-destructive/80 [&_[data-slot=breadcrumb-page]]:text-destructive",muted:"text-muted-foreground [&_[data-slot=breadcrumb-link]:hover]:text-muted-foreground/80 [&_[data-slot=breadcrumb-page]]:text-muted-foreground",success:"text-success [&_[data-slot=breadcrumb-link]:hover]:text-success/80 [&_[data-slot=breadcrumb-page]]:text-success",error:"text-error [&_[data-slot=breadcrumb-link]:hover]:text-error/80 [&_[data-slot=breadcrumb-page]]:text-error",warning:"text-warning [&_[data-slot=breadcrumb-link]:hover]:text-warning/80 [&_[data-slot=breadcrumb-page]]:text-warning"},C={default:"",compact:"text-xs [&_[data-slot=breadcrumb-list]]:gap-1 [&_[data-slot=breadcrumb-separator]>svg]:size-3",badge:"[&_[data-slot=breadcrumb-list]]:gap-1 [&_[data-slot=breadcrumb-item]]:border [&_[data-slot=breadcrumb-item]]:bg-muted [&_[data-slot=breadcrumb-item]]:px-2 [&_[data-slot=breadcrumb-item]]:py-0.5 [&_[data-slot=breadcrumb-item]]:rounded-full [&_[data-slot=breadcrumb-item]]:text-sm",bordered:"border rounded-md px-3 py-2"},f=o.forwardRef(({className:j,variant:v="default",color:_="default",items:y,separator:n,maxItems:i,showEllipsis:B=!0,showHome:b="label",showPopoverOnEllipsis:N=!1,...k},w)=>{const[S,I]=o.useState(!1),d=y;let a=[];const s=b===!0?"label":b;s&&(s==="label"?a=[{label:"Home",href:"/"}]:s==="icon"?a=[{icon:e.jsx(g.Home,{className:"size-4"}),href:"/"}]:s==="both"?a=[{label:"Home",icon:e.jsx(g.Home,{className:"size-4"}),href:"/"}]:typeof s=="object"&&!o.isValidElement(s)?a=[s]:a=[{label:s,href:"/"}]);let c=[],u=!1,x=[];if(i===0)c=[...a,...d];else if(i){const r=i-a.length,l=r>0?d.slice(-r):[];c=[...a,...l],u=r>0&&d.length>r&&B,x=r>0?d.slice(0,-r):d}else c=[...a,...d];const h=()=>N?e.jsxs(m.Popover,{open:S,onOpenChange:I,children:[e.jsx(m.PopoverTrigger,{asChild:!0,children:e.jsx(t.BreadcrumbItem,{children:e.jsx(t.BreadcrumbEllipsis,{})})}),e.jsx(m.PopoverContent,{className:"w-auto max-w-64 p-2",children:x.map((r,l)=>e.jsxs("div",{className:"flex items-center gap-2 py-1 px-3 rounded hover:bg-muted",children:[r.icon,r.label&&e.jsx("a",{href:r.href,className:"text-sm hover:underline",children:r.label})]},l))})]}):e.jsx(t.BreadcrumbItem,{children:e.jsx(t.BreadcrumbEllipsis,{})});return e.jsx(t.Breadcrumb,{ref:w,className:E.cn(C[v],j),...k,children:e.jsxs(t.BreadcrumbList,{className:P[_],children:[u&&a.length===0&&e.jsxs(e.Fragment,{children:[h(),e.jsx(t.BreadcrumbSeparator,{children:n})]}),c.map((r,l)=>{const p=l===c.length-1,q=u&&l===0&&a.length>0;return e.jsxs(o.Fragment,{children:[e.jsx(t.BreadcrumbItem,{children:p?e.jsx(t.BreadcrumbPage,{children:e.jsxs("div",{className:"flex items-center gap-1",children:[r.icon,r.label]})}):e.jsx(t.BreadcrumbLink,{href:r.href,children:e.jsxs("div",{className:"flex items-center gap-1",children:[r.icon,r.label]})})}),q&&e.jsxs(e.Fragment,{children:[e.jsx(t.BreadcrumbSeparator,{children:n}),h()]}),!p&&e.jsx(t.BreadcrumbSeparator,{children:n})]},l)})]})})});f.displayName="Breadcrumb";exports.default=f;
+//# sourceMappingURL=Breadcrumb.cjs.map

package/dist/cjs/components/Breadcrumb/Breadcrumb.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumb.cjs","sources":["../../../../src/components/Breadcrumb/Breadcrumb.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n  Breadcrumb as SBreadcrumb,\n  BreadcrumbList as SBreadcrumbList,\n  BreadcrumbItem as SBreadcrumbItem,\n  BreadcrumbLink as SBreadcrumbLink,\n  BreadcrumbPage as SBreadcrumbPage,\n  BreadcrumbSeparator as SBreadcrumbSeparator,\n  BreadcrumbEllipsis as SBreadcrumbEllipsis,\n} from \"@dsui/ui/components/breadcrumb\";\nimport { cn } from \"@dsui/ui/lib/utils\";\nimport { Home } from \"lucide-react\";\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@dsui/ui/components/popover\";\n\nexport type BreadcrumbItemType = {\n  label?: React.ReactNode;\n  href?: string;\n  icon?: React.ReactNode;\n};\n\nexport type BreadcrumbProps = React.ComponentProps<\"nav\"> & {\n  variant?: \"default\" | \"compact\" | \"badge\" | \"bordered\";\n  color?:\n    | \"default\"\n    | \"primary\"\n    | \"secondary\"\n    | \"accent\"\n    | \"destructive\"\n    | \"muted\"\n    | \"success\"\n    | \"error\"\n    | \"warning\";\n  items: BreadcrumbItemType[];\n  separator?: React.ReactNode;\n  maxItems?: number;\n  showEllipsis?: boolean;\n  showHome?:\n    | boolean\n    | \"label\"\n    | \"icon\"\n    | \"both\"\n    | React.ReactNode\n    | { label?: React.ReactNode; icon?: React.ReactNode; href?: string };\n  showPopoverOnEllipsis?: boolean;\n};\n\nconst colorClasses = {\n  default: \"\",\n  primary:\n    \"text-primary [&_[data-slot=breadcrumb-link]:hover]:text-primary/80 [&_[data-slot=breadcrumb-page]]:text-primary\",\n  secondary:\n    \"text-secondary [&_[data-slot=breadcrumb-link]:hover]:text-secondary/80 [&_[data-slot=breadcrumb-page]]:text-secondary\",\n  accent:\n    \"text-accent [&_[data-slot=breadcrumb-link]:hover]:text-accent/80 [&_[data-slot=breadcrumb-page]]:text-accent\",\n  destructive:\n    \"text-destructive [&_[data-slot=breadcrumb-link]:hover]:text-destructive/80 [&_[data-slot=breadcrumb-page]]:text-destructive\",\n  muted:\n    \"text-muted-foreground [&_[data-slot=breadcrumb-link]:hover]:text-muted-foreground/80 [&_[data-slot=breadcrumb-page]]:text-muted-foreground\",\n  success:\n    \"text-success [&_[data-slot=breadcrumb-link]:hover]:text-success/80 [&_[data-slot=breadcrumb-page]]:text-success\",\n  error:\n    \"text-error [&_[data-slot=breadcrumb-link]:hover]:text-error/80 [&_[data-slot=breadcrumb-page]]:text-error\",\n  warning:\n    \"text-warning [&_[data-slot=breadcrumb-link]:hover]:text-warning/80 [&_[data-slot=breadcrumb-page]]:text-warning\",\n};\n\nconst variantClasses = {\n  default: \"\",\n  compact:\n    \"text-xs [&_[data-slot=breadcrumb-list]]:gap-1 [&_[data-slot=breadcrumb-separator]>svg]:size-3\",\n  badge:\n    \"[&_[data-slot=breadcrumb-list]]:gap-1 [&_[data-slot=breadcrumb-item]]:border [&_[data-slot=breadcrumb-item]]:bg-muted [&_[data-slot=breadcrumb-item]]:px-2 [&_[data-slot=breadcrumb-item]]:py-0.5 [&_[data-slot=breadcrumb-item]]:rounded-full [&_[data-slot=breadcrumb-item]]:text-sm\",\n  bordered: \"border rounded-md px-3 py-2\",\n};\n\nconst Breadcrumb = React.forwardRef<HTMLElement, BreadcrumbProps>(\n  (\n    {\n      className,\n      variant = \"default\",\n      color = \"default\",\n      items,\n      separator,\n      maxItems,\n      showEllipsis = true,\n      showHome = \"label\",\n      showPopoverOnEllipsis = false,\n      ...props\n    },\n    ref,\n  ) => {\n    const [popoverOpen, setPopoverOpen] = React.useState(false);\n    const userItems = items;\n    let homeItem: BreadcrumbItemType[] = [];\n    const normalizedShowHome = showHome === true ? \"label\" : showHome;\n    if (normalizedShowHome) {\n      if (normalizedShowHome === \"label\") {\n        homeItem = [{ label: \"Home\", href: \"/\" }];\n      } else if (normalizedShowHome === \"icon\") {\n        homeItem = [{ icon: <Home className=\"size-4\" />, href: \"/\" }];\n      } else if (normalizedShowHome === \"both\") {\n        homeItem = [\n          { label: \"Home\", icon: <Home className=\"size-4\" />, href: \"/\" },\n        ];\n      } else if (\n        typeof normalizedShowHome === \"object\" &&\n        !React.isValidElement(normalizedShowHome)\n      ) {\n        // custom object\n        homeItem = [normalizedShowHome as BreadcrumbItemType];\n      } else {\n        // ReactNode\n        homeItem = [\n          { label: normalizedShowHome as React.ReactNode, href: \"/\" },\n        ];\n      }\n    }\n    // Calculate which items to display\n    let displayItems: BreadcrumbItemType[] = [];\n    let hasEllipsis = false;\n    let hiddenItems: BreadcrumbItemType[] = [];\n\n    if (maxItems === 0) {\n      displayItems = [...homeItem, ...userItems];\n    } else if (maxItems) {\n      const numUserItems = maxItems - homeItem.length;\n      const truncatedUserItems =\n        numUserItems > 0 ? userItems.slice(-numUserItems) : [];\n      displayItems = [...homeItem, ...truncatedUserItems];\n      hasEllipsis =\n        numUserItems > 0 && userItems.length > numUserItems && showEllipsis;\n      hiddenItems =\n        numUserItems > 0 ? userItems.slice(0, -numUserItems) : userItems;\n    } else {\n      displayItems = [...homeItem, ...userItems];\n    }\n\n    const renderEllipsis = () => {\n      if (showPopoverOnEllipsis) {\n        return (\n          <Popover open={popoverOpen} onOpenChange={setPopoverOpen}>\n            <PopoverTrigger asChild>\n              <SBreadcrumbItem>\n                <SBreadcrumbEllipsis />\n              </SBreadcrumbItem>\n            </PopoverTrigger>\n            <PopoverContent className=\"w-auto max-w-64 p-2\">\n              {hiddenItems.map((item, index) => (\n                <div\n                  key={index}\n                  className=\"flex items-center gap-2 py-1 px-3 rounded hover:bg-muted\"\n                >\n                  {item.icon}\n                  {item.label && (\n                    <a href={item.href} className=\"text-sm hover:underline\">\n                      {item.label}\n                    </a>\n                  )}\n                </div>\n              ))}\n            </PopoverContent>\n          </Popover>\n        );\n      }\n      return (\n        <SBreadcrumbItem>\n          <SBreadcrumbEllipsis />\n        </SBreadcrumbItem>\n      );\n    };\n\n    return (\n      <SBreadcrumb\n        ref={ref}\n        className={cn(variantClasses[variant], className)}\n        {...props}\n      >\n        <SBreadcrumbList className={colorClasses[color]}>\n          {hasEllipsis && homeItem.length === 0 && (\n            <>\n              {renderEllipsis()}\n              <SBreadcrumbSeparator>{separator}</SBreadcrumbSeparator>\n            </>\n          )}\n          {displayItems.map((item, index) => {\n            const isLast = index === displayItems.length - 1;\n            const shouldShowEllipsisAfter =\n              hasEllipsis && index === 0 && homeItem.length > 0;\n            return (\n              <React.Fragment key={index}>\n                <SBreadcrumbItem>\n                  {isLast ? (\n                    <SBreadcrumbPage>\n                      <div className=\"flex items-center gap-1\">\n                        {item.icon}\n                        {item.label}\n                      </div>\n                    </SBreadcrumbPage>\n                  ) : (\n                    <SBreadcrumbLink href={item.href}>\n                      <div className=\"flex items-center gap-1\">\n                        {item.icon}\n                        {item.label}\n                      </div>\n                    </SBreadcrumbLink>\n                  )}\n                </SBreadcrumbItem>\n                {shouldShowEllipsisAfter && (\n                  <>\n                    <SBreadcrumbSeparator>{separator}</SBreadcrumbSeparator>\n                    {renderEllipsis()}\n                  </>\n                )}\n                {!isLast && (\n                  <SBreadcrumbSeparator>{separator}</SBreadcrumbSeparator>\n                )}\n              </React.Fragment>\n            );\n          })}\n        </SBreadcrumbList>\n      </SBreadcrumb>\n    );\n  },\n);\n\nBreadcrumb.displayName = \"Breadcrumb\";\n\nexport default Breadcrumb;\n"],"names":["colorClasses","variantClasses","Breadcrumb","React","className","variant","color","items","separator","maxItems","showEllipsis","showHome","showPopoverOnEllipsis","props","ref","popoverOpen","setPopoverOpen","userItems","homeItem","normalizedShowHome","jsx","Home","displayItems","hasEllipsis","hiddenItems","numUserItems","truncatedUserItems","renderEllipsis","jsxs","Popover","PopoverTrigger","SBreadcrumbItem","SBreadcrumbEllipsis","PopoverContent","item","index","SBreadcrumb","cn","SBreadcrumbList","Fragment","SBreadcrumbSeparator","isLast","shouldShowEllipsisAfter","SBreadcrumbPage","SBreadcrumbLink"],"mappings":"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"}

package/dist/cjs/components/Button/Button.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react/jsx-runtime"),r=require("react"),o=require("@dsui/ui/components/button"),N=require("@dsui/ui/lib/utils"),b=require("lucide-react"),f=require("../../utils/animations.cjs"),l=r.forwardRef((c,u)=>{const{variant:n="solid",size:a="normal",color:d="muted",animation:i,...e}=c,t=r.useMemo(()=>f.animationEffect({animation:i,children:e?.children,className:e?.className,rootClassName:o.buttonVariants({variant:n,size:a}),variantType:n,...e}),[i,e,a,n]),m=(t?.children?!0:e.asChild)&&!e?.isLoading,h=e?.isLoading?s.jsxs(s.Fragment,{children:[s.jsx(b.LoaderCircle,{className:"animate-spin"}),t?.children??e.children??null]}):t?.children??e.children??null;return s.jsx(o.Button,{ref:u,...e,className:N.cn("cursor-pointer group",e?.className,t?.className),asChild:m,style:{...e.style||{},...t?.style||{}},variant:t?.variant??n,color:d,size:a,children:h})});l.displayName="Button";exports.default=l;
+//# sourceMappingURL=Button.cjs.map

package/dist/cjs/components/Button/Button.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.cjs","sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport {\n  buttonVariants,\n  Button as SButton,\n  type ButtonProps as SButtonProps,\n} from \"@dsui/ui/components/button\";\nimport { cn } from \"@dsui/ui/lib/utils\";\nimport type { ButtonAnimation } from \"@/types/variables\";\nimport { LoaderCircle } from \"lucide-react\";\nimport { animationEffect } from \"@/utils/animations\";\n\nexport type ButtonProps = SButtonProps & {\n  animation?: ButtonAnimation;\n  isLoading?: boolean;\n};\n\ntype AnimResult = {\n  className?: string;\n  style?: React.CSSProperties;\n  children?: React.ReactNode;\n  variant?: SButtonProps[\"variant\"];\n};\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  (props, ref) => {\n    const {\n      variant = \"solid\",\n      size = \"normal\",\n      color = \"muted\",\n      animation,\n      ...rest\n    } = props;\n\n    const buttonAnimation = useMemo<AnimResult | null>(() => {\n      return animationEffect<ButtonAnimation, SButtonProps[\"variant\"]>({\n        animation,\n        children: rest?.children,\n        className: rest?.className,\n        rootClassName: buttonVariants({\n          variant: variant,\n          size: size,\n        }),\n        variantType: variant,\n        ...rest,\n      });\n    }, [animation, rest, size, variant]);\n\n    // Disable asChild when loading to avoid React.Children.only error\n    const shouldUseAsChild =\n      (buttonAnimation?.children ? true : rest.asChild) && !rest?.isLoading;\n\n    const buttonContent = rest?.isLoading ? (\n      <>\n        <LoaderCircle className=\"animate-spin\" />\n        {\n          (buttonAnimation?.children ??\n            rest.children ??\n            null) as SButtonProps[\"children\"]\n        }\n      </>\n    ) : (\n      ((buttonAnimation?.children ??\n        rest.children ??\n        null) as SButtonProps[\"children\"])\n    );\n\n    return (\n      <SButton\n        ref={ref}\n        {...rest}\n        className={cn(\n          \"cursor-pointer group\",\n          rest?.className,\n          buttonAnimation?.className,\n        )}\n        asChild={shouldUseAsChild}\n        style={{ ...(rest.style || {}), ...(buttonAnimation?.style || {}) }}\n        variant={buttonAnimation?.variant ?? variant}\n        color={color}\n        size={size}\n      >\n        {buttonContent}\n      </SButton>\n    );\n  },\n);\n\nButton.displayName = \"Button\";\nexport default Button;\n"],"names":["Button","React","props","ref","variant","size","color","animation","rest","buttonAnimation","useMemo","animationEffect","buttonVariants","shouldUseAsChild","buttonContent","jsxs","Fragment","jsx","LoaderCircle","SButton","cn"],"mappings":"8SAuBMA,EAASC,EAAM,WACnB,CAACC,EAAOC,IAAQ,CACd,KAAM,CACJ,QAAAC,EAAU,QACV,KAAAC,EAAO,SACP,MAAAC,EAAQ,QACR,UAAAC,EACA,GAAGC,CAAA,EACDN,EAEEO,EAAkBC,EAAAA,QAA2B,IAC1CC,kBAA0D,CAC/D,UAAAJ,EACA,SAAUC,GAAM,SAChB,UAAWA,GAAM,UACjB,cAAeI,EAAAA,eAAe,CAC5B,QAAAR,EACA,KAAAC,CAAA,CACD,EACD,YAAaD,EACb,GAAGI,CAAA,CACJ,EACA,CAACD,EAAWC,EAAMH,EAAMD,CAAO,CAAC,EAG7BS,GACHJ,GAAiB,SAAW,GAAOD,EAAK,UAAY,CAACA,GAAM,UAExDM,EAAgBN,GAAM,UAC1BO,EAAAA,KAAAC,EAAAA,SAAA,CACE,SAAA,CAAAC,EAAAA,IAACC,EAAAA,aAAA,CAAa,UAAU,cAAA,CAAe,EAEpCT,GAAiB,UAChBD,EAAK,UACL,IAAA,CAAA,CAEN,EAEEC,GAAiB,UACjBD,EAAK,UACL,KAGJ,OACES,EAAAA,IAACE,EAAAA,OAAA,CACC,IAAAhB,EACC,GAAGK,EACJ,UAAWY,EAAAA,GACT,uBACAZ,GAAM,UACNC,GAAiB,SAAA,EAEnB,QAASI,EACT,MAAO,CAAE,GAAIL,EAAK,OAAS,CAAA,EAAK,GAAIC,GAAiB,OAAS,EAAC,EAC/D,QAASA,GAAiB,SAAWL,EACrC,MAAAE,EACA,KAAAD,EAEC,SAAAS,CAAA,CAAA,CAGP,CACF,EAEAd,EAAO,YAAc"}

package/dist/cjs/components/Button/ButtonGroup.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const B=require("react/jsx-runtime"),r=require("react"),o=require("@dsui/ui/components/button-group"),G=require("@dsui/ui/lib/utils");require("class-variance-authority");const q=require("./Button.cjs"),u=r.forwardRef(({className:i,orientation:a="horizontal",variant:s,color:l,size:p,animation:n,isLoading:c,disabled:d,children:m,...b},f)=>{const g=r.Children.map(m,t=>{if(r.isValidElement(t)&&t.type===q.default){const e=t.props;return r.cloneElement(t,{variant:n==="glass"?"ghost":e.variant??s,color:e.color??l,size:e.size??p,animation:e.animation??n,isLoading:e.isLoading??c,disabled:e.disabled??d})}return t});return B.jsx(o.ButtonGroup,{ref:f,orientation:a,className:G.cn(i),...b,children:g})});u.displayName="ButtonGroup";Object.defineProperty(exports,"ButtonGroupSeparator",{enumerable:!0,get:()=>o.ButtonGroupSeparator});Object.defineProperty(exports,"ButtonGroupText",{enumerable:!0,get:()=>o.ButtonGroupText});exports.default=u;
+//# sourceMappingURL=ButtonGroup.cjs.map

package/dist/cjs/components/Button/ButtonGroup.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonGroup.cjs","sources":["../../../../src/components/Button/ButtonGroup.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n  ButtonGroup as SButtonGroup,\n  ButtonGroupSeparator,\n  ButtonGroupText,\n  buttonGroupVariants,\n} from \"@dsui/ui/components/button-group\";\nimport { cn } from \"@dsui/ui/lib/utils\";\nimport { type VariantProps } from \"class-variance-authority\";\nimport Button, { type ButtonProps } from \"./Button\";\n\nexport type ButtonGroupProps = React.ComponentProps<typeof SButtonGroup> &\n  VariantProps<typeof buttonGroupVariants> & {\n    variant?: ButtonProps[\"variant\"];\n    color?: ButtonProps[\"color\"];\n    size?: ButtonProps[\"size\"];\n    animation?: ButtonProps[\"animation\"];\n    isLoading?: ButtonProps[\"isLoading\"];\n    disabled?: boolean;\n  };\n\nconst ButtonGroup = React.forwardRef<HTMLDivElement, ButtonGroupProps>(\n  (\n    {\n      className,\n      orientation = \"horizontal\",\n      variant,\n      color,\n      size,\n      animation,\n      isLoading,\n      disabled,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const childrenWithProps = React.Children.map(children, (child) => {\n      if (React.isValidElement(child) && child.type === Button) {\n        const childProps = child.props as ButtonProps;\n        return React.cloneElement(child as React.ReactElement<ButtonProps>, {\n          variant:\n            animation === \"glass\" ? \"ghost\" : (childProps.variant ?? variant),\n          color: childProps.color ?? color,\n          size: childProps.size ?? size,\n          animation: childProps.animation ?? animation,\n          isLoading: childProps.isLoading ?? isLoading,\n          disabled: childProps.disabled ?? disabled,\n        });\n      }\n      return child;\n    });\n\n    return (\n      <SButtonGroup\n        ref={ref}\n        orientation={orientation}\n        className={cn(className)}\n        {...props}\n      >\n        {childrenWithProps}\n      </SButtonGroup>\n    );\n  },\n);\n\nButtonGroup.displayName = \"ButtonGroup\";\n\nexport { ButtonGroupSeparator, ButtonGroupText };\nexport default ButtonGroup;\n"],"names":["ButtonGroup","React","className","orientation","variant","color","size","animation","isLoading","disabled","children","props","ref","childrenWithProps","child","Button","childProps","jsx","SButtonGroup","cn"],"mappings":"sTAqBMA,EAAcC,EAAM,WACxB,CACE,CACE,UAAAC,EACA,YAAAC,EAAc,aACd,QAAAC,EACA,MAAAC,EACA,KAAAC,EACA,UAAAC,EACA,UAAAC,EACA,SAAAC,EACA,SAAAC,EACA,GAAGC,CAAA,EAELC,IACG,CACH,MAAMC,EAAoBZ,EAAM,SAAS,IAAIS,EAAWI,GAAU,CAChE,GAAIb,EAAM,eAAea,CAAK,GAAKA,EAAM,OAASC,UAAQ,CACxD,MAAMC,EAAaF,EAAM,MACzB,OAAOb,EAAM,aAAaa,EAA0C,CAClE,QACEP,IAAc,QAAU,QAAWS,EAAW,SAAWZ,EAC3D,MAAOY,EAAW,OAASX,EAC3B,KAAMW,EAAW,MAAQV,EACzB,UAAWU,EAAW,WAAaT,EACnC,UAAWS,EAAW,WAAaR,EACnC,SAAUQ,EAAW,UAAYP,CAAA,CAClC,CACH,CACA,OAAOK,CACT,CAAC,EAED,OACEG,EAAAA,IAACC,EAAAA,YAAA,CACC,IAAAN,EACA,YAAAT,EACA,UAAWgB,EAAAA,GAAGjB,CAAS,EACtB,GAAGS,EAEH,SAAAE,CAAA,CAAA,CAGP,CACF,EAEAb,EAAY,YAAc"}