@definable/ui 0.1.30 → 0.1.32

package/dist/components/alert.js

@@ -8,7 +8,7 @@ const g = p(
   {
     variants: {
       variant: {
-        default: "bg-background text-foreground",
+        default: "bg-secondary text-foreground",
         destructive: "border-destructive/50 text-destructive dark:border-destructive"
       }
     },
@@ -16,7 +16,7 @@ const g = p(
       variant: "default"
     }
   }
-), b = i.forwardRef(({ className: t, variant: r, isOpen: e, onClose: o, onConfirm: l, title: s, description: n, confirmText: m, cancelText: c, ...f }, u) => e !== void 0 && o && l && s && n ? /* @__PURE__ */ a(
+), x = i.forwardRef(({ className: t, variant: r, isOpen: e, onClose: o, onConfirm: l, title: s, description: n, confirmText: m, cancelText: c, ...f }, u) => e !== void 0 && o && l && s && n ? /* @__PURE__ */ a(
   v,
   {
     isOpen: e,
@@ -37,8 +37,8 @@ const g = p(
     ...f
   }
 ));
-b.displayName = "Alert";
-const x = i.forwardRef(({ className: t, ...r }, e) => /* @__PURE__ */ a(
+x.displayName = "Alert";
+const A = i.forwardRef(({ className: t, ...r }, e) => /* @__PURE__ */ a(
   "h5",
   {
     ref: e,
@@ -46,8 +46,8 @@ const x = i.forwardRef(({ className: t, ...r }, e) => /* @__PURE__ */ a(
     ...r
   }
 ));
-x.displayName = "AlertTitle";
-const A = i.forwardRef(({ className: t, ...r }, e) => /* @__PURE__ */ a(
+A.displayName = "AlertTitle";
+const N = i.forwardRef(({ className: t, ...r }, e) => /* @__PURE__ */ a(
   "div",
   {
     ref: e,
@@ -55,9 +55,9 @@ const A = i.forwardRef(({ className: t, ...r }, e) => /* @__PURE__ */ a(
     ...r
   }
 ));
-A.displayName = "AlertDescription";
+N.displayName = "AlertDescription";
 export {
-  b as Alert,
-  A as AlertDescription,
-  x as AlertTitle
+  x as Alert,
+  N as AlertDescription,
+  A as AlertTitle
 };

package/dist/components/badge.d.ts

@@ -1,7 +1,7 @@
 import { VariantProps } from 'class-variance-authority';
 import * as React from "react";
 declare const badgeVariants: (props?: ({
-    variant?: "default" | "secondary" | "destructive" | "outline" | null | undefined;
+    variant?: "secondary" | "outline" | "default" | "destructive" | null | undefined;
 } & import('class-variance-authority/dist/types').ClassProp) | undefined) => string;
 export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
 }

package/dist/components/button.d.ts

@@ -1,13 +1,14 @@
-import { default as React } from 'react';
-import { LucideIcon } from 'lucide-react';
-interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-    variant?: 'default' | 'secondary' | 'ghost' | 'destructive' | 'outline' | 'dark';
-    size?: 'sm' | 'md' | 'lg' | 'xl' | 'icon';
-    icon?: LucideIcon;
-    iconPosition?: 'left' | 'right';
+import { ReactNode, ButtonHTMLAttributes } from 'react';
+type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'outline';
+type ButtonSize = 'icon' | 'sm' | 'md' | 'lg';
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    children: ReactNode;
+    leftIcon?: ReactNode;
+    rightIcon?: ReactNode;
     isLoading?: boolean;
-    asChild?: boolean;
-    children?: React.ReactNode;
+    fullWidth?: boolean;
 }
-export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const Button: import('react').ForwardRefExoticComponent<ButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
 export {};

package/dist/components/button.js

@@ -1,49 +1,58 @@
-import { jsxs as h, Fragment as v, jsx as r } from "react/jsx-runtime";
-import l, { forwardRef as y } from "react";
-import { Slot as w } from "@radix-ui/react-slot";
-import { cn as n } from "../lib/utils.js";
-const N = {
-  default: "bg-primary text-primary-foreground shadow hover:bg-primary/90 rounded-md",
-  secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80 rounded-md",
-  outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground rounded-md",
-  ghost: "hover:bg-accent hover:text-accent-foreground rounded-md",
-  destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90 rounded-md",
-  dark: "bg-zinc-800 text-white shadow-lg hover:bg-zinc-700 rounded-md"
-}, j = y(({
-  className: b,
-  variant: f = "default",
-  size: g = "md",
-  icon: t,
-  iconPosition: d = "left",
-  isLoading: o,
-  disabled: p,
-  asChild: a = !1,
-  children: e,
-  ...m
-}, i) => {
-  const u = a ? w : "button", c = /* @__PURE__ */ h(v, { children: [
-    o ? /* @__PURE__ */ r("div", { className: "mr-2 h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent" }) : t && (d === "left" || !e) ? /* @__PURE__ */ r(t, { className: n("h-4 w-4", e && "mr-2") }) : null,
-    e,
-    t && d === "right" && e && !o && /* @__PURE__ */ r(t, { className: "ml-2 h-4 w-4" })
-  ] }), x = {
-    sm: "h-8 px-3 text-xs",
-    md: "h-9 px-4 text-sm",
-    lg: "h-10 px-5 text-base",
-    xl: "h-14 px-8 text-lg font-semibold",
-    icon: "h-6 w-6 p-0"
-  }, s = n(
-    "inline-flex items-center justify-center font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
-    N[f],
-    x[g],
-    !e && t && "px-2",
-    b
-  );
-  return a ? /* @__PURE__ */ r(u, { className: s, ref: i, ...m, children: l.isValidElement(e) ? l.cloneElement(e, {
-    className: n(s, e.props.className),
-    children: c
-  }) : e }) : /* @__PURE__ */ r(u, { className: s, ref: i, disabled: o || p, ...m, children: c });
-});
-j.displayName = "Button";
+import { jsxs as t, jsx as a } from "react/jsx-runtime";
+import { forwardRef as m } from "react";
+const x = {
+  icon: "p-0",
+  sm: "px-2.5 py-1 text-[12px]",
+  md: "px-4 py-1.5 text-[13px]",
+  lg: "px-5 py-2 text-[14px]"
+}, b = m(({
+  variant: o = "primary",
+  size: s = "md",
+  children: c,
+  leftIcon: d,
+  rightIcon: l,
+  isLoading: r = !1,
+  fullWidth: n = !1,
+  className: i = "",
+  disabled: e,
+  ...p
+}, h) => /* @__PURE__ */ t(
+  "button",
+  {
+    ref: h,
+    className: `
+        inline-flex items-center justify-center gap-2 font-medium rounded
+        transition-all duration-200 active:scale-95
+        ${(() => {
+      switch (o) {
+        case "primary":
+          return "bg-black hover:bg-black/90 dark:bg-blue-600 dark:hover:bg-blue-700 text-white";
+        case "secondary":
+          return "bg-secondary dark:bg-dark-secondary border-light dark:border-dark text-primary dark:text-dark-primary hover:bg-hover dark:hover:bg-dark-hover";
+        case "ghost":
+          return "text-secondary dark:text-dark-secondary hover:text-primary dark:hover:text-dark-primary hover:bg-hover dark:hover:bg-dark-hover";
+        case "outline":
+          return "border border-light bg-card text-foreground hover:bg-muted/50";
+      }
+    })()}
+        ${x[s]}
+        ${n ? "w-full" : ""}
+        ${e || r ? "opacity-50 cursor-not-allowed" : ""}
+        ${i}
+      `,
+    disabled: e || r,
+    ...p,
+    children: [
+      r ? /* @__PURE__ */ t("svg", { className: "animate-spin w-4 h-4", fill: "none", viewBox: "0 0 24 24", children: [
+        /* @__PURE__ */ a("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+        /* @__PURE__ */ a("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })
+      ] }) : d,
+      c,
+      !r && l
+    ]
+  }
+));
+b.displayName = "Button";
 export {
-  j as Button
+  b as Button
 };

package/dist/components/card.js

@@ -1,61 +1,61 @@
 import { jsx as d } from "react/jsx-runtime";
-import * as o from "react";
-import { cn as t } from "../lib/utils.js";
-const s = o.forwardRef(({ className: e, ...a }, r) => /* @__PURE__ */ d(
+import * as t from "react";
+import { cn as o } from "../lib/utils.js";
+const s = t.forwardRef(({ className: a, ...e }, r) => /* @__PURE__ */ d(
   "div",
   {
     ref: r,
-    className: t(
-      "rounded-lg border-border/50 bg-card text-card-foreground ",
-      e
+    className: o(
+      "rounded-lg border-light bg-card text-card-foreground ",
+      a
     ),
-    ...a
+    ...e
   }
 ));
 s.displayName = "Card";
-const i = o.forwardRef(({ className: e, ...a }, r) => /* @__PURE__ */ d(
+const i = t.forwardRef(({ className: a, ...e }, r) => /* @__PURE__ */ d(
   "div",
   {
     ref: r,
-    className: t("flex flex-col space-y-1.5 p-6", e),
-    ...a
+    className: o("flex flex-col space-y-1.5 p-6", a),
+    ...e
   }
 ));
 i.displayName = "CardHeader";
-const c = o.forwardRef(({ className: e, ...a }, r) => /* @__PURE__ */ d(
+const l = t.forwardRef(({ className: a, ...e }, r) => /* @__PURE__ */ d(
   "h3",
   {
     ref: r,
-    className: t("text-lg font-semibold leading-none tracking-tight", e),
-    ...a
+    className: o("text-lg font-semibold leading-none tracking-tight", a),
+    ...e
   }
 ));
-c.displayName = "CardTitle";
-const l = o.forwardRef(({ className: e, ...a }, r) => /* @__PURE__ */ d(
+l.displayName = "CardTitle";
+const c = t.forwardRef(({ className: a, ...e }, r) => /* @__PURE__ */ d(
   "p",
   {
     ref: r,
-    className: t("text-sm text-muted-foreground", e),
-    ...a
+    className: o("text-sm text-muted-foreground", a),
+    ...e
   }
 ));
-l.displayName = "CardDescription";
-const m = o.forwardRef(({ className: e, ...a }, r) => /* @__PURE__ */ d("div", { ref: r, className: t("p-6 pt-0", e), ...a }));
+c.displayName = "CardDescription";
+const m = t.forwardRef(({ className: a, ...e }, r) => /* @__PURE__ */ d("div", { ref: r, className: o("p-6 pt-0", a), ...e }));
 m.displayName = "CardContent";
-const n = o.forwardRef(({ className: e, ...a }, r) => /* @__PURE__ */ d(
+const n = t.forwardRef(({ className: a, ...e }, r) => /* @__PURE__ */ d(
   "div",
   {
     ref: r,
-    className: t("flex items-center p-6 pt-0", e),
-    ...a
+    className: o("flex items-center p-6 pt-0", a),
+    ...e
   }
 ));
 n.displayName = "CardFooter";
 export {
   s as Card,
   m as CardContent,
-  l as CardDescription,
+  c as CardDescription,
   n as CardFooter,
   i as CardHeader,
-  c as CardTitle
+  l as CardTitle
 };

package/dist/components/command-menu.js

@@ -1,8 +1,8 @@
 import { jsx as e, jsxs as n } from "react/jsx-runtime";
-import { CommandDialog as l, Command as a, CommandInput as i, CommandList as u, CommandEmpty as h, CommandGroup as s, CommandItem as d, CommandSeparator as p } from "./command.js";
+import { CommandDialog as l, Command as a, CommandInput as i, CommandList as u, CommandEmpty as h, CommandGroup as d, CommandItem as s, CommandSeparator as p } from "./command.js";
 import { useEffect as f, useCallback as g, useState as x } from "react";
-import { Home as S, FileText as b, FolderOpen as N, Settings as C, Search as w } from "lucide-react";
-function y({ open: t, onOpenChange: o }) {
+import { Home as S, FileText as b, FolderOpen as N, Settings as y, Search as C } from "lucide-react";
+function w({ open: t, onOpenChange: o }) {
   f(() => {
     const m = (c) => {
       c.key === "k" && (c.metaKey || c.ctrlKey) && (c.preventDefault(), o(!t));
@@ -16,9 +16,9 @@ function y({ open: t, onOpenChange: o }) {
     /* @__PURE__ */ e(i, { placeholder: "Type a command or search..." }),
     /* @__PURE__ */ n(u, { children: [
       /* @__PURE__ */ e(h, { children: "No results found." }),
-      /* @__PURE__ */ n(s, { heading: "Suggestions", children: [
+      /* @__PURE__ */ n(d, { heading: "Suggestions", children: [
         /* @__PURE__ */ n(
-          d,
+          s,
           {
             onSelect: () => r(() => console.log("Home")),
             children: [
@@ -28,7 +28,7 @@ function y({ open: t, onOpenChange: o }) {
           }
         ),
         /* @__PURE__ */ n(
-          d,
+          s,
           {
             onSelect: () => r(() => console.log("Documents")),
             children: [
@@ -38,7 +38,7 @@ function y({ open: t, onOpenChange: o }) {
           }
         ),
         /* @__PURE__ */ n(
-          d,
+          s,
           {
             onSelect: () => r(() => console.log("Projects")),
             children: [
@@ -49,12 +49,12 @@ function y({ open: t, onOpenChange: o }) {
         )
       ] }),
       /* @__PURE__ */ e(p, {}),
-      /* @__PURE__ */ e(s, { heading: "Settings", children: /* @__PURE__ */ n(
-        d,
+      /* @__PURE__ */ e(d, { heading: "Settings", children: /* @__PURE__ */ n(
+        s,
         {
           onSelect: () => r(() => console.log("Settings")),
           children: [
-            /* @__PURE__ */ e(C, { className: "mr-2 h-4 w-4" }),
+            /* @__PURE__ */ e(y, { className: "mr-2 h-4 w-4" }),
             /* @__PURE__ */ e("span", { children: "Settings" })
           ]
         }
@@ -69,9 +69,9 @@ function E() {
       "button",
       {
         onClick: () => o(!0),
-        className: "inline-flex items-center justify-center gap-1 rounded-md border border-input bg-background px-4 py-2 text-sm font-medium text-foreground hover:bg-accent hover:text-accent-foreground",
+        className: "inline-flex items-center justify-center gap-1 rounded-md border border-input bg-secondary px-4 py-2 text-sm font-medium text-foreground hover:bg-accent hover:text-accent-foreground",
         children: [
-          /* @__PURE__ */ e(w, { className: "h-4 w-4" }),
+          /* @__PURE__ */ e(C, { className: "h-4 w-4" }),
           /* @__PURE__ */ e("span", { children: "Search..." }),
           /* @__PURE__ */ n("kbd", { className: "pointer-events-none ml-1 inline-flex h-5 select-none items-center gap-1 rounded border border-input bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground", children: [
             /* @__PURE__ */ e("span", { className: "text-xs", children: "⌘" }),
@@ -80,10 +80,10 @@ function E() {
         ]
       }
     ),
-    /* @__PURE__ */ e(y, { open: t, onOpenChange: o })
+    /* @__PURE__ */ e(w, { open: t, onOpenChange: o })
   ] });
 }
 export {
-  y as CommandMenu,
+  w as CommandMenu,
   E as CommandMenuDemo
 };

package/dist/components/command.d.ts

@@ -5,7 +5,7 @@ declare const Command: React.ForwardRefExoticComponent<Omit<{
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
     label?: string;
     shouldFilter?: boolean;
     filter?: (value: string, search: string, keywords?: string[]) => number;
@@ -25,7 +25,7 @@ declare const CommandInput: React.ForwardRefExoticComponent<Omit<Omit<Pick<Pick<
     ref?: React.Ref<HTMLInputElement>;
 } & {
     asChild?: boolean;
-}, "asChild" | "key" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "type" | "value" | "onChange"> & {
+}, "key" | "asChild" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "type" | "value" | "onChange"> & {
     value?: string;
     onValueChange?: (search: string) => void;
 } & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
@@ -35,7 +35,7 @@ declare const CommandList: React.ForwardRefExoticComponent<Omit<{
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
     label?: string;
 } & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const CommandEmpty: React.ForwardRefExoticComponent<Omit<{
@@ -44,14 +44,14 @@ declare const CommandEmpty: React.ForwardRefExoticComponent<Omit<{
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const CommandGroup: React.ForwardRefExoticComponent<Omit<{
     children?: React.ReactNode;
 } & Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "value" | "heading"> & {
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild">, "value" | "heading"> & {
     heading?: React.ReactNode;
     value?: string;
     forceMount?: boolean;
@@ -60,7 +60,7 @@ declare const CommandSeparator: React.ForwardRefExoticComponent<Omit<Pick<Pick<R
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
     alwaysRender?: boolean;
 } & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const CommandItem: React.ForwardRefExoticComponent<Omit<{
@@ -69,7 +69,7 @@ declare const CommandItem: React.ForwardRefExoticComponent<Omit<{
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "disabled" | "value" | "onSelect"> & {
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild">, "disabled" | "value" | "onSelect"> & {
     disabled?: boolean;
     onSelect?: (value: string) => void;
     value?: string;

package/dist/components/command.js

@@ -15,7 +15,7 @@ const i = r.forwardRef(({ className: e, ...a }, o) => /* @__PURE__ */ d(
   }
 ));
 i.displayName = t.displayName;
-const w = ({
+const b = ({
   children: e,
   open: a,
   onOpenChange: o
@@ -23,7 +23,7 @@ const w = ({
   "div",
   {
     className: s(
-      "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "fixed inset-0 z-50 bg-secondary/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       a ? "block" : "hidden"
     ),
     onClick: (n) => {
@@ -32,12 +32,12 @@ const w = ({
     children: /* @__PURE__ */ d(
       "div",
       {
-        className: "fixed left-[50%] top-[50%] z-50 w-full max-w-lg translate-x-[-50%] translate-y-[-50%] overflow-hidden rounded-lg border border-border bg-popover shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]",
+        className: "fixed left-[50%] top-[50%] z-50 w-full max-w-lg translate-x-[-50%] translate-y-[-50%] overflow-hidden rounded-lg border border-light bg-popover shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]",
         children: e
       }
     )
   }
-), p = r.forwardRef(({ className: e, ...a }, o) => /* @__PURE__ */ m("div", { className: "flex items-center border-b border-border px-3", "cmdk-input-wrapper": "", children: [
+), p = r.forwardRef(({ className: e, ...a }, o) => /* @__PURE__ */ m("div", { className: "flex items-center border-b border-light px-3", "cmdk-input-wrapper": "", children: [
   /* @__PURE__ */ d(l, { className: "mr-2 h-4 w-4 shrink-0 opacity-50" }),
   /* @__PURE__ */ d(
     t.Input,
@@ -105,7 +105,7 @@ const g = r.forwardRef(({ className: e, ...a }, o) => /* @__PURE__ */ d(
 g.displayName = t.Item.displayName;
 export {
   i as Command,
-  w as CommandDialog,
+  b as CommandDialog,
   f as CommandEmpty,
   u as CommandGroup,
   p as CommandInput,

package/dist/components/dialog.js

@@ -1,10 +1,10 @@
-import { jsx as o, jsxs as l } from "react/jsx-runtime";
-import * as r from "react";
+import { jsx as o, jsxs as r } from "react/jsx-runtime";
+import * as l from "react";
 import * as a from "@radix-ui/react-dialog";
 import { cn as s } from "../lib/utils.js";
 import { X as m } from "lucide-react";
-import { motion as n, AnimatePresence as g } from "framer-motion";
-const w = ({ ...e }) => /* @__PURE__ */ o(a.Root, { ...e }), C = a.Trigger, p = a.Portal, R = a.Close, c = r.forwardRef(({ className: e, ...i }, t) => /* @__PURE__ */ o(
+import { motion as n, AnimatePresence as p } from "framer-motion";
+const w = ({ ...e }) => /* @__PURE__ */ o(a.Root, { ...e }), C = a.Trigger, g = a.Portal, R = a.Close, c = l.forwardRef(({ className: e, ...i }, t) => /* @__PURE__ */ o(
   a.Overlay,
   {
     ref: t,
@@ -14,7 +14,7 @@ const w = ({ ...e }) => /* @__PURE__ */ o(a.Root, { ...e }), C = a.Trigger, p =
       n.div,
       {
         className: s(
-          "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm",
+          "fixed inset-0 z-50 bg-secondary/80 backdrop-blur-sm",
           e
         ),
         initial: { opacity: 0 },
@@ -26,7 +26,7 @@ const w = ({ ...e }) => /* @__PURE__ */ o(a.Root, { ...e }), C = a.Trigger, p =
   }
 ));
 c.displayName = a.Overlay.displayName;
-const f = r.forwardRef(({ className: e, children: i, ...t }, d) => /* @__PURE__ */ o(p, { children: /* @__PURE__ */ l(g, { mode: "wait", children: [
+const f = l.forwardRef(({ className: e, children: i, ...t }, d) => /* @__PURE__ */ o(g, { children: /* @__PURE__ */ r(p, { mode: "wait", children: [
   /* @__PURE__ */ o(c, {}),
   /* @__PURE__ */ o(
     a.Content,
@@ -34,11 +34,11 @@ const f = r.forwardRef(({ className: e, children: i, ...t }, d) => /* @__PURE__
       ref: d,
       asChild: !0,
       ...t,
-      children: /* @__PURE__ */ l(
+      children: /* @__PURE__ */ r(
         n.div,
         {
           className: s(
-            "fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg gap-4 border-border/50 bg-background p-6 shadow-lg rounded-lg",
+            "fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg gap-4 border-light bg-secondary p-6 shadow-lg rounded-lg",
             e
           ),
           initial: { opacity: 0, scale: 0.95, x: "-50%", y: "-50%" },
@@ -47,7 +47,7 @@ const f = r.forwardRef(({ className: e, children: i, ...t }, d) => /* @__PURE__
           transition: { duration: 0.2 },
           children: [
             i,
-            /* @__PURE__ */ l(a.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground", children: [
+            /* @__PURE__ */ r(a.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground", children: [
               /* @__PURE__ */ o(m, { className: "h-4 w-4" }),
               /* @__PURE__ */ o("span", { className: "sr-only", children: "Close" })
             ] })
@@ -86,7 +86,7 @@ const x = ({
   }
 );
 x.displayName = "DialogFooter";
-const u = r.forwardRef(({ className: e, ...i }, t) => /* @__PURE__ */ o(
+const u = l.forwardRef(({ className: e, ...i }, t) => /* @__PURE__ */ o(
   a.Title,
   {
     ref: t,
@@ -98,7 +98,7 @@ const u = r.forwardRef(({ className: e, ...i }, t) => /* @__PURE__ */ o(
   }
 ));
 u.displayName = a.Title.displayName;
-const N = r.forwardRef(({ className: e, ...i }, t) => /* @__PURE__ */ o(
+const N = l.forwardRef(({ className: e, ...i }, t) => /* @__PURE__ */ o(
   a.Description,
   {
     ref: t,
@@ -115,7 +115,7 @@ export {
   x as DialogFooter,
   y as DialogHeader,
   c as DialogOverlay,
-  p as DialogPortal,
+  g as DialogPortal,
   u as DialogTitle,
   C as DialogTrigger
 };

package/dist/components/drawer.js

@@ -60,7 +60,7 @@ const c = m.forwardRef(({ className: r, children: t, ...a }, l) => /* @__PURE__
     {
       ref: l,
       className: i(
-        "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[20px] bg-background",
+        "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[20px] bg-secondary",
         r
       ),
       ...a,

package/dist/components/dropzone.js

@@ -2,7 +2,7 @@ import { jsxs as o, jsx as e } from "react/jsx-runtime";
 import { useCallback as u } from "react";
 import { useDropzone as b } from "react-dropzone";
 import { Upload as f } from "lucide-react";
-function D({
+function y({
   onDrop: r,
   children: t,
   className: n = "",
@@ -30,7 +30,7 @@ function D({
       className: n,
       children: [
         /* @__PURE__ */ e("input", { ...p() }),
-        c && a && /* @__PURE__ */ e("div", { className: `absolute inset-0 bg-background/80 flex items-center justify-center z-10 pointer-events-none ${s}`, children: /* @__PURE__ */ o("div", { className: "border-2 border-dashed border-primary rounded-lg p-8 text-center", children: [
+        c && a && /* @__PURE__ */ e("div", { className: `absolute inset-0 bg-secondary/80 flex items-center justify-center z-10 pointer-events-none ${s}`, children: /* @__PURE__ */ o("div", { className: "border-2 border-dashed border-primary rounded-lg p-8 text-center", children: [
           /* @__PURE__ */ e(f, { className: "h-12 w-12 mb-2 text-primary mx-auto" }),
           /* @__PURE__ */ e("p", { className: "text-base font-medium mb-1", children: "Drop files here" })
         ] }) }),
@@ -40,5 +40,5 @@ function D({
   );
 }
 export {
-  D as Dropzone
+  y as Dropzone
 };