@customafk/lunas-ui 0.0.2 → 0.0.3-b

package/dist/Atoms/AspectRatio/index.js

@@ -1,3 +1,5 @@
+"use client";
+
 // packages/Atoms/AspectRatio/index.tsx
 import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio";
 var AspectRatio = AspectRatioPrimitive.Root;

package/dist/Atoms/Avatar/index.js

@@ -1,3 +1,4 @@
+"use client";
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
@@ -10,8 +11,7 @@ var DEFAULT_ICON_SIZE = 24;
 
 // packages/Icons/AvatarIcon.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
-var AvatarIcon = (props) => {
-  const { bgColor, color, size } = props;
+var AvatarIcon = ({ bgColor, color, size, ...Props }) => {
   return /* @__PURE__ */ jsxs(
     "svg",
     {
@@ -20,7 +20,7 @@ var AvatarIcon = (props) => {
       height: size ?? DEFAULT_ICON_SIZE,
       viewBox: "0 0 96 96",
       fill: "none",
-      ...props,
+      ...Props,
       children: [
         /* @__PURE__ */ jsx(
           "path",

package/dist/Atoms/Badge/index.js

@@ -1,3 +1,5 @@
+"use client";
+
 // packages/Atoms/Badge/index.tsx
 import { memo } from "react";
 

package/dist/Atoms/Breadcrumb/index.js

@@ -1,3 +1,5 @@
+"use client";
+
 // packages/Atoms/Breadcrumb/index.tsx
 import { forwardRef } from "react";
 
@@ -327,30 +329,12 @@ var BreadcrumbPage = forwardRef(
   )
 );
 BreadcrumbPage.displayName = "BreadcrumbPage";
-var BreadcrumbSeparator = ({ children, className, ...props }) => /* @__PURE__ */ jsx2(
-  "li",
-  {
-    role: "presentation",
-    "aria-hidden": "true",
-    className: cn("[&>svg]:size-3.5", className),
-    ...props,
-    children: children ?? /* @__PURE__ */ jsx2(Lucide2ChevronRight_default, {})
-  }
-);
+var BreadcrumbSeparator = ({ children, className, ...props }) => /* @__PURE__ */ jsx2("li", { className: cn("[&>svg]:size-3.5", className), ...props, children: children ?? /* @__PURE__ */ jsx2(Lucide2ChevronRight_default, {}) });
 BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
-var BreadcrumbEllipsis = ({ className, ...props }) => /* @__PURE__ */ jsxs(
-  "span",
-  {
-    role: "presentation",
-    "aria-hidden": "true",
-    className: cn("flex size-9 items-center justify-center", className),
-    ...props,
-    children: [
-      /* @__PURE__ */ jsx2(MoreHorizontal, { className: "size-4" }),
-      /* @__PURE__ */ jsx2("span", { className: "sr-only", children: "More" })
-    ]
-  }
-);
+var BreadcrumbEllipsis = ({ className, ...props }) => /* @__PURE__ */ jsxs("span", { className: cn("flex size-9 items-center justify-center", className), ...props, children: [
+  /* @__PURE__ */ jsx2(MoreHorizontal, { className: "size-4" }),
+  /* @__PURE__ */ jsx2("span", { className: "sr-only", children: "More" })
+] });
 BreadcrumbEllipsis.displayName = "BreadcrumbElipssis";
 export {
   Breadcrumb,

package/dist/Atoms/Button/index.d.ts

@@ -4,8 +4,8 @@ import * as class_variance_authority_dist_types from 'class-variance-authority/d
 import { VariantProps } from 'class-variance-authority';
 
 declare const buttonVariants: (props?: ({
-    variant?: "default" | "outline" | "normal" | "secondary" | "destructive" | "destructive-secondary" | "destructive-outline" | "sort-outline" | null | undefined;
-    size?: "base" | "small" | "default" | "large" | null | undefined;
+    variant?: "default" | "secondary" | "outline" | "destructive" | "destructive-secondary" | "destructive-outline" | "sort-outline" | "normal" | null | undefined;
+    size?: "small" | "default" | "base" | "large" | null | undefined;
 } & class_variance_authority_dist_types.ClassProp) | undefined) => string;
 
 interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {

package/dist/Atoms/Button/index.js

@@ -1,3 +1,5 @@
+"use client";
+
 // packages/Atoms/Button/index.tsx
 import { forwardRef, memo } from "react";
 

package/dist/Atoms/Card/index.js

@@ -1,3 +1,5 @@
+"use client";
+
 // packages/Atoms/Card/index.tsx
 import React from "react";
 

package/dist/Atoms/Checkbox/index.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+
+declare const Checkbox: React.ForwardRefExoticComponent<Omit<CheckboxPrimitive.CheckboxProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+
+export { Checkbox };

package/dist/Atoms/Checkbox/index.js

@@ -0,0 +1,276 @@
+"use client";
+
+// packages/Atoms/Checkbox/index.tsx
+import { forwardRef } from "react";
+
+// packages/tailwindTheme.ts
+var themes = {
+  spacing: {
+    30: "7.5rem",
+    // 120px
+    33: "8.25rem"
+    // 132px
+  },
+  colors: {
+    ui: {
+      white: "#ffffff",
+      "white-primary": "#ffffff",
+      "black-primary": "#111315",
+      "bg-white": "#FAFAFA",
+      primary: {
+        default: "#6C70F0",
+        50: "#EEF2FF",
+        100: "#E0E7FF",
+        200: "#C8D2FD",
+        300: "#A6B6FB",
+        400: "#828EF7",
+        500: "#6C70F0",
+        600: "#5048E3",
+        700: "#443AC8",
+        800: "#3731A2",
+        900: "#312F80",
+        950: "#1F1C4A"
+      },
+      secondary: {
+        default: "#C170FF",
+        50: "#F9F1FF",
+        100: "#F3E2FF",
+        200: "#ECD4FF",
+        300: "#E0B8FF",
+        400: "#D49BFF",
+        500: "#C170FF",
+        600: "#AE65E6",
+        700: "#9A5ACC",
+        800: "#874EB3",
+        900: "#613880",
+        950: "#3A224C"
+      },
+      tertiary: {
+        default: "#5B8CFF",
+        50: "#EFF4FF",
+        100: "#DEE8FF",
+        200: "#CEDDFF",
+        300: "#BDD1FF",
+        400: "#7CA3FF",
+        500: "#5B8CFF",
+        600: "#527EE6",
+        700: "#4062B3",
+        800: "#2E4680",
+        900: "#243866",
+        950: "#1B2A4C"
+      },
+      destructive: {
+        default: "#EF4444",
+        50: "#FEF2F2",
+        100: "#FEE2E2",
+        200: "#FECACA",
+        300: "#FCA5A5",
+        400: "#F87171",
+        500: "#EF4444",
+        600: "#DC2626",
+        700: "#B91C1C",
+        800: "#991B1B",
+        900: "#7F1D1D",
+        950: "#450A0A"
+      },
+      success: {
+        default: "#22c55e",
+        50: "#f0fdf4",
+        100: "#dcfce7",
+        200: "#bbf7d0",
+        300: "#86efac",
+        400: "#4ade80",
+        500: "#22c55e",
+        600: "#16a34a",
+        700: "#15803d",
+        800: "#166534",
+        900: "#14532d",
+        950: "#052e16"
+      },
+      warn: {
+        default: "#f59e0b",
+        50: "#fffbeb",
+        100: "#fef3c7",
+        200: "#fde68a",
+        300: "#fcd34d",
+        400: "#fbbf24",
+        500: "#f59e0b",
+        600: "#d97706",
+        700: "#b45309",
+        800: "#92400e",
+        900: "#78350f",
+        950: "#451a03"
+      },
+      text: {
+        black: "#09090b",
+        white: "#fafafa",
+        50: "#fafafa",
+        100: "#f4f4f5",
+        200: "#e4e4e7",
+        300: "#d4d4d8",
+        400: "#a1a1aa",
+        500: "#71717a",
+        600: "#52525b",
+        700: "#3f3f46",
+        800: "#27272a",
+        900: "#18181b",
+        950: "#09090b"
+      },
+      surface: {
+        default: "#ffffff",
+        50: "#ffffff",
+        100: "#f5f5f5",
+        200: "#e5e5e5",
+        300: "#d4d4d4",
+        400: "#a3a3a3",
+        500: "#737373",
+        600: "#525252",
+        700: "#404040",
+        800: "#262626",
+        900: "#171717",
+        950: "#0a0a0a"
+      },
+      border: {
+        default: "#64748B",
+        50: "#f9fafb",
+        100: "#f3f4f6",
+        200: "#e5e7eb",
+        300: "#d1d5db",
+        400: "#9ca3af",
+        500: "#64748B",
+        600: "#475569",
+        700: "#334155",
+        800: "#1E293B",
+        900: "#0F172A",
+        950: "#020817"
+      },
+      // TEXT COLOR
+      "text-primary": "#111315",
+      "text-secondary": "#30353C",
+      "text-third": "#30353CCC",
+      "text-placeholder": "#11131566",
+      "text-white-placeholder": "#FDFDFD99",
+      "text-black": {
+        primary: "#19191B",
+        secondary: "#222325",
+        third: "#292A2E",
+        fourth: "#5F606A",
+        placeholder: "#B2B3BD"
+      },
+      "text-white": {
+        primary: "#FCFCFC",
+        secondary: "#F9F9F9",
+        third: "#D9D9D9"
+      },
+      // COLOR SPECIAL
+      "positive-flat": "#4ADE80",
+      "destruction-flat": "#EF4444",
+      "neutral-flat": "#BFDBFE",
+      rating: "#FDE047",
+      input: {
+        border: {
+          active: "#71717A",
+          disabled: "#D4D4D8"
+        },
+        bg: {
+          default: "#FDFDFD",
+          error: "#FEF2F2"
+        }
+      }
+    }
+  },
+  backgroundImage: {
+    "ui-bg-color": "linear-gradient(110deg, #9CD5F5 3.09%, #B1B8E6 33.47%, rgba(185, 155, 215, 0.90) 62.82%, #A293DF 84.45%, #878AEA 106.08%)",
+    "ui-bg-page": "radial-gradient(70.47% 70.47% at 50% 50%, #FDFDFD 0%, #F3F1FF 50%, #F1FCFF 100%)",
+    "ui-btn-primary": "linear-gradient(180deg, #828EF7 0%, #6C70F0 100%)",
+    "ui-btn-secondary": "linear-gradient(180deg, #4277EF 0%, #669BF4 100%)",
+    "ui-btn-accept": "linear-gradient(282deg, #30C36D 6.81%, #6BCD8A 93.19%)",
+    "ui-btn-destructive": "linear-gradient(282deg, #FF384A 7.07%, #FF5463 92.93%)",
+    "ui-status-bg-positive": "linear-gradient(0deg, #C4FFD8 0%, #68FF9D 100%)",
+    "ui-status-bg-negative": "linear-gradient(0deg, #FECACA 0%, #FF8F8F 100%)",
+    "ui-status-bg-neutral": "linear-gradient(0deg, #E1EBFF 0%, #C7E8FF 100%)",
+    "ui-status-order": "linear-gradient(282deg, #30C36D 6.81%, #6BCD8A 93.19%)",
+    "ui-status-out-of-stock": "linear-gradient(282deg, #FF384A 7.07%, #FF5463 92.93%)",
+    "ui-status-in-stock": "linear-gradient(282deg, #30A8FF 6.81%, #73BAED 93.19%)",
+    "ui-line": "linear-gradient(90deg, #D3D4FF 0%, #7587EA 50%, #AEC0FF 100%)"
+  },
+  boxShadow: {
+    "ui-sd-primary": "0 4px 20px 0 rgba(104, 109, 224, 0.5)",
+    "ui-sd-base": "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)",
+    "ui-sd-destructive": "0 10px 10px 0 rgba(255, 56, 74, 0.15)",
+    "ui-sd-accept": "0 10px 10px 0 rgba(46, 213, 115, 0.15)",
+    "ui-xl": "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
+    "ui-soft": "0px 5px 12px 0px rgba(0, 67, 101, 0.08)",
+    "ui-muli": "0px 5px 50px 0px rgba(0, 67, 101, 0.08), 0px 2px 6px 0px rgba(130, 169, 188, 0.08)",
+    "ui-category-effect": "0px 4px 50px 0px rgba(0, 67, 101, 0.08)",
+    "ui-flat": "0px 0.25rem 0.625rem 0px rgba(99, 102, 241, 0.07)",
+    "ui-overlay": "0px 4px 4px 1px rgba(99, 102, 241, 0.04)",
+    "ui-sticky-nav": "0px 3px 12px -1px rgba(151, 71, 255, 0.07)",
+    "ui-dialog": "0px 8px 12px 0px rgba(99, 102, 241, 0.15)"
+  },
+  fontSize: {
+    "ui-h1": ["1.5rem", "2rem"],
+    "ui-h2": ["1.25rem", "1.75rem"],
+    "ui-h3": ["1.125rem", "1.75rem"],
+    "ui-p": ["1rem", "1.5rem"],
+    "ui-note": ["0.875rem", "1.25rem"],
+    "ui-small-note": ["0.75rem", "1rem"]
+  },
+  keyframes: {
+    "accordion-down": {
+      from: { height: "0" },
+      to: { height: "var(--radix-accordion-content-height)" }
+    },
+    "accordion-up": {
+      from: { height: "var(--radix-accordion-content-height)" },
+      to: { height: "0" }
+    }
+  },
+  animation: {
+    "accordion-down": "accordion-down 0.2s ease-out",
+    "accordion-up": "accordion-up 0.2s ease-out"
+  }
+};
+var tailwindTheme_default = themes;
+
+// packages/libs/utils.ts
+import clsx from "clsx";
+import { extendTailwindMerge } from "tailwind-merge";
+var customTailwindMerge = () => {
+  return extendTailwindMerge({
+    ...tailwindTheme_default,
+    prefix: ""
+  });
+};
+var cn = (...inputs) => {
+  const customTwMerge = customTailwindMerge();
+  return customTwMerge(clsx(inputs));
+};
+
+// packages/Atoms/Checkbox/index.tsx
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { Check } from "lucide-react";
+import { jsx } from "react/jsx-runtime";
+var Checkbox = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  CheckboxPrimitive.Root,
+  {
+    ref,
+    className: cn(
+      "size-4 shrink-0 rounded",
+      "border border-ui-primary-600",
+      "focus-within:ring-2 focus-within:ring-ui-primary-200",
+      "disabled:cursor-not-allowed",
+      "disabled:opacity-50",
+      "data-[state=checked]:bg-ui-primary-default",
+      "data-[state=checked]:text-ui-text-50",
+      "transition-colors duration-200",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsx(CheckboxPrimitive.Indicator, { className: cn("flex items-center justify-center text-current"), children: /* @__PURE__ */ jsx(Check, { className: "size-4" }) })
+  }
+));
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+export {
+  Checkbox
+};

package/dist/Atoms/Command/index.d.ts

@@ -8,7 +8,7 @@ declare const Command: React.ForwardRefExoticComponent<Omit<{
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
+}, "key" | "asChild" | keyof React.HTMLAttributes<HTMLDivElement>> & {
     label?: string;
     shouldFilter?: boolean;
     filter?: (value: string, search: string, keywords?: string[]) => number;
@@ -26,7 +26,7 @@ declare const CommandInput: React.ForwardRefExoticComponent<Omit<Omit<Pick<Pick<
     ref?: React.Ref<HTMLInputElement>;
 } & {
     asChild?: boolean;
-}, "key" | "asChild" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "onChange" | "type" | "value"> & {
+}, "key" | "asChild" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "type" | "value" | "onChange"> & {
     value?: string;
     onValueChange?: (search: string) => void;
 } & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
@@ -36,7 +36,7 @@ declare const CommandList: React.ForwardRefExoticComponent<Omit<{
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
+}, "key" | "asChild" | keyof React.HTMLAttributes<HTMLDivElement>> & {
     label?: string;
 } & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const CommandEmpty: React.ForwardRefExoticComponent<Omit<{
@@ -45,14 +45,14 @@ declare const CommandEmpty: React.ForwardRefExoticComponent<Omit<{
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+}, "key" | "asChild" | keyof React.HTMLAttributes<HTMLDivElement>> & 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;
-}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild">, "value" | "heading"> & {
+}, "key" | "asChild" | keyof React.HTMLAttributes<HTMLDivElement>>, "value" | "heading"> & {
     heading?: React.ReactNode;
     value?: string;
     forceMount?: boolean;
@@ -61,7 +61,7 @@ declare const CommandSeparator: React.ForwardRefExoticComponent<Omit<Pick<Pick<R
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
+}, "key" | "asChild" | keyof React.HTMLAttributes<HTMLDivElement>> & {
     alwaysRender?: boolean;
 } & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const CommandItem: React.ForwardRefExoticComponent<Omit<{
@@ -70,7 +70,7 @@ declare const CommandItem: React.ForwardRefExoticComponent<Omit<{
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild">, "onSelect" | "disabled" | "value"> & {
+}, "key" | "asChild" | keyof React.HTMLAttributes<HTMLDivElement>>, "disabled" | "value" | "onSelect"> & {
     disabled?: boolean;
     onSelect?: (value: string) => void;
     value?: string;

package/dist/Atoms/Command/index.js

@@ -252,7 +252,6 @@ var cn = (...inputs) => {
 
 // packages/Atoms/Dialog/index.tsx
 import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { motion } from "framer-motion";
 import { X } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 var Dialog = DialogPrimitive.Root;
@@ -275,7 +274,7 @@ var DialogOverlay = React.forwardRef(({ className, ...props }, reference) => /*
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 var DialogContent = React.forwardRef(({ className, children, ...props }, reference) => /* @__PURE__ */ jsxs(DialogPortal, { children: [
   /* @__PURE__ */ jsx(DialogOverlay, {}),
-  /* @__PURE__ */ jsx(
+  /* @__PURE__ */ jsxs(
     DialogPrimitive.Content,
     {
       ref: reference,
@@ -283,43 +282,29 @@ var DialogContent = React.forwardRef(({ className, children, ...props }, referen
         "fixed",
         "left-[50%] top-[50%] z-50",
         "grid w-full max-w-lg",
+        "rounded bg-ui-surface-50",
         "translate-x-[-50%] translate-y-[-50%]",
         "transition-all duration-300",
+        "data-[state=open]:animate-in",
+        "data-[state=open]:fade-in-0",
+        "data-[state=open]:zoom-in-95",
+        "data-[state=open]:slide-in-from-left-1/2",
+        "data-[state=open]:slide-in-from-top-[48%]",
         "data-[state=closed]:animate-out",
         "data-[state=closed]:fade-out-0",
         "data-[state=closed]:zoom-out-[0.8]",
         "data-[state=closed]:slide-out-to-left-1/2",
-        "data-[state=closed]:slide-out-to-top-[80%]"
+        "data-[state=closed]:slide-out-to-top-[80%]",
+        className
       ),
       ...props,
-      children: /* @__PURE__ */ jsxs(
-        motion.div,
-        {
-          initial: {
-            opacity: 0,
-            scale: 0.6,
-            y: -40
-          },
-          animate: {
-            opacity: 1,
-            scale: 1,
-            y: 0
-          },
-          transition: {
-            type: "spring",
-            damping: 20,
-            stiffness: 300
-          },
-          className: cn("w-full gap-4 bg-ui-surface-50 p-6 shadow-lg sm:rounded-lg", className),
-          children: [
-            children,
-            /* @__PURE__ */ jsxs(DialogPrimitive.Close, { className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none", children: [
-              /* @__PURE__ */ jsx(X, { className: "size-4" }),
-              /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
-            ] })
-          ]
-        }
-      )
+      children: [
+        children,
+        /* @__PURE__ */ jsxs(DialogPrimitive.Close, { className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none", children: [
+          /* @__PURE__ */ jsx(X, { className: "size-4" }),
+          /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+        ] })
+      ]
     }
   )
 ] }));
@@ -354,6 +339,7 @@ var DialogDescription = React.forwardRef(({ className, ...props }, reference) =>
 DialogDescription.displayName = DialogPrimitive.Description.displayName;
 
 // packages/Atoms/Command/index.tsx
+import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
 import { Command as CommandPrimitive } from "cmdk";
 import { Search } from "lucide-react";
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
@@ -370,25 +356,28 @@ var Command = React2.forwardRef(({ className, ...props }, reference) => /* @__PU
 ));
 Command.displayName = CommandPrimitive.displayName;
 var CommandDialog = ({ children, ...props }) => {
-  return /* @__PURE__ */ jsx2(Dialog, { ...props, children: /* @__PURE__ */ jsx2(DialogContent, { className: "p-0 shadow-lg", children: /* @__PURE__ */ jsx2(
-    Command,
-    {
-      className: cn(
-        "bg-neutral-50",
-        "[&_[cmdk-group-heading]]:px-0",
-        "[&_[cmdk-group-heading]]:font-medium",
-        "[&_[cmdk-group-heading]]:text-ui-text-800",
-        "[&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0",
-        "[&_[cmdk-group]]:px-2",
-        "[&_[cmdk-input-wrapper]_svg]:size-5",
-        "[&_[cmdk-input]]:h-12",
-        "[&_[cmdk-item]]:px-2",
-        "[&_[cmdk-item]]:py-3",
-        "[&_[cmdk-item]_svg]:size-5"
-      ),
-      children
-    }
-  ) }) });
+  return /* @__PURE__ */ jsxs2(Dialog, { ...props, children: [
+    /* @__PURE__ */ jsx2(DialogContent, { className: "p-0 shadow-lg", children: /* @__PURE__ */ jsx2(
+      Command,
+      {
+        className: cn(
+          "bg-neutral-50",
+          "[&_[cmdk-group-heading]]:px-0",
+          "[&_[cmdk-group-heading]]:font-medium",
+          "[&_[cmdk-group-heading]]:text-ui-text-800",
+          "[&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0",
+          "[&_[cmdk-group]]:px-2",
+          "[&_[cmdk-input-wrapper]_svg]:size-5",
+          "[&_[cmdk-input]]:h-12",
+          "[&_[cmdk-item]]:px-2",
+          "[&_[cmdk-item]]:py-3",
+          "[&_[cmdk-item]_svg]:size-5"
+        ),
+        children
+      }
+    ) }),
+    /* @__PURE__ */ jsx2(VisuallyHidden, { children: /* @__PURE__ */ jsx2(DialogTitle, {}) })
+  ] });
 };
 var CommandInput = React2.forwardRef(({ className, ...props }, reference) => /* @__PURE__ */ jsxs2("div", { className: "flex items-center border-b px-3", children: [
   /* @__PURE__ */ jsx2(Search, { className: "mr-2 size-4 shrink-0 opacity-50" }),

package/dist/Atoms/Dialog/index.js

@@ -249,7 +249,6 @@ var cn = (...inputs) => {
 
 // packages/Atoms/Dialog/index.tsx
 import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { motion } from "framer-motion";
 import { X } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 var Dialog = DialogPrimitive.Root;
@@ -274,7 +273,7 @@ var DialogOverlay = React.forwardRef(({ className, ...props }, reference) => /*
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 var DialogContent = React.forwardRef(({ className, children, ...props }, reference) => /* @__PURE__ */ jsxs(DialogPortal, { children: [
   /* @__PURE__ */ jsx(DialogOverlay, {}),
-  /* @__PURE__ */ jsx(
+  /* @__PURE__ */ jsxs(
     DialogPrimitive.Content,
     {
       ref: reference,
@@ -282,43 +281,29 @@ var DialogContent = React.forwardRef(({ className, children, ...props }, referen
         "fixed",
         "left-[50%] top-[50%] z-50",
         "grid w-full max-w-lg",
+        "rounded bg-ui-surface-50",
         "translate-x-[-50%] translate-y-[-50%]",
         "transition-all duration-300",
+        "data-[state=open]:animate-in",
+        "data-[state=open]:fade-in-0",
+        "data-[state=open]:zoom-in-95",
+        "data-[state=open]:slide-in-from-left-1/2",
+        "data-[state=open]:slide-in-from-top-[48%]",
         "data-[state=closed]:animate-out",
         "data-[state=closed]:fade-out-0",
         "data-[state=closed]:zoom-out-[0.8]",
         "data-[state=closed]:slide-out-to-left-1/2",
-        "data-[state=closed]:slide-out-to-top-[80%]"
+        "data-[state=closed]:slide-out-to-top-[80%]",
+        className
       ),
       ...props,
-      children: /* @__PURE__ */ jsxs(
-        motion.div,
-        {
-          initial: {
-            opacity: 0,
-            scale: 0.6,
-            y: -40
-          },
-          animate: {
-            opacity: 1,
-            scale: 1,
-            y: 0
-          },
-          transition: {
-            type: "spring",
-            damping: 20,
-            stiffness: 300
-          },
-          className: cn("w-full gap-4 bg-ui-surface-50 p-6 shadow-lg sm:rounded-lg", className),
-          children: [
-            children,
-            /* @__PURE__ */ jsxs(DialogPrimitive.Close, { className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none", children: [
-              /* @__PURE__ */ jsx(X, { className: "size-4" }),
-              /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
-            ] })
-          ]
-        }
-      )
+      children: [
+        children,
+        /* @__PURE__ */ jsxs(DialogPrimitive.Close, { className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none", children: [
+          /* @__PURE__ */ jsx(X, { className: "size-4" }),
+          /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+        ] })
+      ]
     }
   )
 ] }));

package/dist/Atoms/DropdownMenu/index.js

@@ -1,3 +1,5 @@
+"use client";
+
 // packages/Atoms/DropdownMenu/index.tsx
 import React from "react";