@customafk/lunas-ui 0.0.1-e → 0.0.2-a

package/dist/Layout/{index.js → Flex/index.js}

@@ -1,191 +1,40 @@
-// packages/tailwindTheme.ts
-var themes = {
-  spacing: {
-    30: "7.5rem",
-    // 120px
-    33: "8.25rem"
-    // 132px
-  },
-  colors: {
-    ui: {
-      white: "#F8F8F8",
-      "white-primary": "#FDFDFD",
-      "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: "#AE54F5",
-        50: "#FAF5FF",
-        100: "#F4E8FF",
-        200: "#EBD5FF",
-        300: "#DBB5FD",
-        400: "#C685FB",
-        500: "#AE54F5",
-        600: "#9B35E8",
-        700: "#8624CC",
-        800: "#7123A6",
-        900: "#5D1D86",
-        950: "#3F0863"
-      },
-      tertiary: {
-        default: "#4277EF",
-        50: "#F0F5FE",
-        100: "#DCE8FD",
-        200: "#C1D7FC",
-        300: "#84B2F8",
-        400: "#669BF4",
-        500: "#4277EF",
-        600: "#2C58E4",
-        700: "#2444D1",
-        800: "#2339AA",
-        900: "#223486",
-        950: "#192252"
-      },
-      text: {
-        black: "#19191B",
-        white: "#F7F7F8",
-        50: "#F7F7F8",
-        100: "#EEEEF0",
-        200: "#DADADD",
-        300: "#B9BAC0",
-        400: "#93949D",
-        500: "#767681",
-        600: "#606169",
-        700: "#4E4E56",
-        800: "#434349",
-        900: "#3B3C3F",
-        950: "#19191B"
-      },
-      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"
-      },
-      // 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, #9EA1FF 0%, #607DE8 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%)"
-  },
-  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)"
-  },
-  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"]
-  }
-};
-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/Layout/Box/index.tsx
+// packages/Layout/Flex/index.tsx
 import { forwardRef, memo, useMemo } from "react";
 
-// packages/Layout/Box/box.variant.ts
+// packages/Layout/Flex/flexVariant.ts
 import { cva } from "class-variance-authority";
-var boxVariant = cva("", {
+var flexVariants = cva("flex flex-row", {
   variants: {
-    display: {
-      block: "block",
-      "inline-block": "inline-block",
-      inline: "inline",
-      none: "none"
+    wrap: {
+      nowrap: "flex-nowrap",
+      wrap: "flex-wrap",
+      "wrap-reverse": "flex-wrap-reverse"
+    },
+    justify: {
+      start: "justify-start",
+      end: "justify-end",
+      center: "justify-center",
+      between: "justify-between",
+      around: "justify-around",
+      normal: "justify-normal",
+      stretch: "justify-stretch",
+      evenly: "justify-evenly"
+    },
+    align: {
+      start: "items-start",
+      end: "items-end",
+      center: "items-center",
+      stretch: "items-stretch",
+      baseline: "items-baseline"
     }
   },
   defaultVariants: {
-    display: "block"
+    wrap: "nowrap",
+    justify: "start",
+    align: "stretch"
   }
 });
-var box_variant_default = boxVariant;
+var flexVariant_default = flexVariants;
 
 // packages/Layout/commons/index.ts
 import { cva as cva2 } from "class-variance-authority";
@@ -443,170 +292,261 @@ var commonLayout = cva2("", {
     }
   },
   defaultVariants: {
-    gap: "2",
-    p: "2",
     position: "relative",
-    overflow: "auto",
+    overflow: "visible",
     flexGrow: 0,
     flexShrink: 1
   }
 });
 
-// packages/Layout/Box/index.tsx
-import { jsx } from "react/jsx-runtime";
-var Box = memo(
-  forwardRef(
-    ({
-      children,
-      className,
-      display,
-      width = "fit",
-      height = "fit",
-      p,
-      px,
-      py,
-      pt,
-      pr,
-      pb,
-      pl,
-      position,
-      top,
-      right,
-      bottom,
-      left,
-      flexGrow,
-      flexShrink,
-      ...props
-    }, reference) => {
-      const generateStyle = useMemo(() => {
-        let widthValue = "fit";
-        let heightValue = "fit";
-        switch (width) {
-          case "full": {
-            widthValue = "100%";
-            break;
-          }
-          case "screen": {
-            widthValue = "100vw";
-            break;
-          }
-          case "auto": {
-            widthValue = "auto";
-            break;
-          }
-          case "fit": {
-            widthValue = "fit-content";
-            break;
-          }
-          default: {
-            widthValue = `${width}px`;
-            break;
-          }
-        }
-        switch (height) {
-          case "full": {
-            heightValue = "100%";
-            break;
-          }
-          case "screen": {
-            heightValue = "100vh";
-            break;
-          }
-          case "auto": {
-            heightValue = "auto";
-            break;
-          }
-          case "fit": {
-            heightValue = "fit-content";
-            break;
-          }
-          default: {
-            heightValue = `${height}px`;
-            break;
-          }
-        }
-        return {
-          width: widthValue,
-          height: heightValue
-        };
-      }, [width, height]);
-      return /* @__PURE__ */ jsx(
-        "div",
-        {
-          ref: reference,
-          className: cn(
-            box_variant_default({ display }),
-            commonLayout({
-              position,
-              top,
-              right,
-              bottom,
-              left,
-              flexGrow,
-              flexShrink
-            }),
-            `p-${p}`,
-            `px-${px}`,
-            `py-${py}`,
-            `pt-${pt}`,
-            `pr-${pr}`,
-            `pb-${pb}`,
-            `pl-${pl}`,
-            className
-          ),
-          style: generateStyle,
-          ...props,
-          children
+// 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"
         }
-      );
+      }
     }
-  )
-);
-Box.displayName = "Box";
-var Box_default = Box;
-
-// packages/Layout/Flex/index.tsx
-import { forwardRef as forwardRef2, memo as memo2, useMemo as useMemo2 } from "react";
-
-// packages/Layout/Flex/flexVariant.ts
-import { cva as cva3 } from "class-variance-authority";
-var flexVariants = cva3("flex flex-row", {
-  variants: {
-    wrap: {
-      nowrap: "flex-nowrap",
-      wrap: "flex-wrap",
-      "wrap-reverse": "flex-wrap-reverse"
-    },
-    justify: {
-      start: "justify-start",
-      end: "justify-end",
-      center: "justify-center",
-      between: "justify-between",
-      around: "justify-around",
-      normal: "justify-normal",
-      stretch: "justify-stretch",
-      evenly: "justify-evenly"
+  },
+  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)" }
     },
-    align: {
-      start: "items-start",
-      end: "items-end",
-      center: "items-center",
-      stretch: "items-stretch",
-      baseline: "items-baseline"
+    "accordion-up": {
+      from: { height: "var(--radix-accordion-content-height)" },
+      to: { height: "0" }
     }
   },
-  defaultVariants: {
-    wrap: "nowrap",
-    justify: "start",
-    align: "stretch"
+  animation: {
+    "accordion-down": "accordion-down 0.2s ease-out",
+    "accordion-up": "accordion-up 0.2s ease-out"
   }
-});
-var flexVariant_default = flexVariants;
+};
+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/Layout/Flex/index.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
-var Flex = memo2(
-  forwardRef2(
+import { jsx } from "react/jsx-runtime";
+var Flex = memo(
+  forwardRef(
     ({
       vertical = false,
       wrap = "nowrap",
@@ -614,10 +554,10 @@ var Flex = memo2(
       height = "fit",
       justify = "start",
       align = "center",
-      gap = "2",
+      gap,
       gapX,
       gapY,
-      p = "0",
+      p,
       px,
       py,
       pt,
@@ -635,7 +575,7 @@ var Flex = memo2(
       className,
       ...props
     }, reference) => {
-      const generateStyle = useMemo2(() => {
+      const generateStyle = useMemo(() => {
         let widthValue = "fit";
         let heightValue = "fit";
         switch (width) {
@@ -687,7 +627,7 @@ var Flex = memo2(
           height: heightValue
         };
       }, [width, height]);
-      return /* @__PURE__ */ jsx2(
+      return /* @__PURE__ */ jsx(
         "div",
         {
           ref: reference,
@@ -728,6 +668,5 @@ var Flex = memo2(
 Flex.displayName = "Flex";
 var Flex_default = Flex;
 export {
-  Box_default as Box,
-  Flex_default as Flex
+  Flex_default as default
 };