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

package/dist/Atoms/Avatar/index.js

@@ -0,0 +1,470 @@
+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);
+
+// packages/Atoms/Avatar/index.tsx
+import { forwardRef } from "react";
+
+// packages/utils/constants.ts
+var DEFAULT_ICON_SIZE = 24;
+
+// packages/Icons/AvatarIcon.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var AvatarIcon = (props) => {
+  const { bgColor, color, size } = props;
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size ?? DEFAULT_ICON_SIZE,
+      height: size ?? DEFAULT_ICON_SIZE,
+      viewBox: "0 0 96 96",
+      fill: "none",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M1.9 48C1.9 73.4604 22.5397 94.1 48 94.1C73.4604 94.1 94.1 73.4604 94.1 48C94.1 22.5397 73.4604 1.9 48 1.9C22.5397 1.9 1.9 22.5397 1.9 48Z",
+            fill: bgColor ?? "#6C70F0",
+            stroke: "#D4D4D4",
+            strokeWidth: "0.2"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M48 93.75C22.733 93.75 2.25 73.2671 2.25 48C2.25 22.733 22.733 2.25 48 2.25C73.2671 2.25 93.75 22.733 93.75 48C93.75 73.2671 73.2671 93.75 48 93.75Z",
+            stroke: color ?? "#FAFAFA",
+            strokeWidth: "0.5"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M47.5064 20C50.0492 20 52.5348 20.7624 54.6492 22.1909C56.7636 23.6194 58.4116 25.6497 59.3848 28.0251C60.358 30.4006 60.6124 33.0144 60.1164 35.5362C59.6204 38.0579 58.3956 40.3744 56.5976 42.1924C54.7996 44.0104 52.5084 45.2488 50.0144 45.7504C47.5204 46.252 44.9352 45.9944 42.586 45.0104C40.2368 44.0264 38.2286 42.3604 36.8158 40.2224C35.4031 38.0846 34.649 35.5712 34.649 33L34.6619 32.4358C34.8057 29.089 36.2217 25.9274 38.6148 23.6105C41.008 21.2936 44.1932 20.0002 47.5064 20ZM52.6492 51.2C56.0592 51.2 65.3292 52.5696 67.7404 55.0076C70.1516 57.4456 71.0124 60.552 71.0124 64V66.8C71.0124 68.1792 70.4708 69.5016 69.5064 70.4768C68.5416 71.452 67.2336 72 65.8696 72H29.1428C27.7789 72 26.4708 71.452 25.5063 70.4768C24.5418 69.5016 24 68.1792 24 66.8V64.2C24 60.752 25.3546 57.4456 27.7658 55.0076C30.177 52.5696 38.9534 51.2 42.3632 51.2H52.6492Z",
+            fill: color ?? "#FAFAFA"
+          }
+        )
+      ]
+    }
+  );
+};
+AvatarIcon.displayName = "AvatarIcon";
+var AvatarIcon_default = AvatarIcon;
+
+// 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/libs/color-hash/cores/bkdr-hash.ts
+var BKDRHash = (str) => {
+  const seed = 131;
+  const seed2 = 137;
+  let hash = 0;
+  str += "x";
+  const MAX_SAFE_INTEGER = Math.floor(9007199254740991 / seed2);
+  str.split("").forEach((char) => {
+    if (hash > MAX_SAFE_INTEGER) {
+      hash = Math.floor(hash / seed2);
+    }
+    hash = hash * seed + char.charCodeAt(0);
+  });
+  return hash;
+};
+var bkdr_hash_default = BKDRHash;
+
+// packages/libs/color-hash/cores/colors.ts
+var RGB2HEX = (RGBArray) => {
+  let hex = "#";
+  RGBArray.forEach((color) => {
+    if (color < 16) {
+      hex += "0";
+    }
+    hex += color.toString(16);
+  });
+  return hex;
+};
+var HSL2RGB = (H, S, L) => {
+  H /= 360;
+  let q = L < 0.5 ? L * (1 + S) : L + S - L * S;
+  let p = 2 * L - q;
+  return [H + 1 / 3, H, H - 1 / 3].map((color) => {
+    if (color < 0) {
+      color++;
+    }
+    if (color > 1) {
+      color--;
+    }
+    if (color < 1 / 6) {
+      color = p + (q - p) * 6 * color;
+    } else if (color < 0.5) {
+      color = q;
+    } else if (color < 2 / 3) {
+      color = p + (q - p) * 6 * (2 / 3 - color);
+    } else {
+      color = p;
+    }
+    return Math.round(color * 255);
+  });
+};
+
+// packages/libs/color-hash/index.ts
+var ColorHash = class {
+  constructor(options) {
+    __publicField(this, "_L");
+    __publicField(this, "_S");
+    __publicField(this, "_hueRange");
+    __publicField(this, "_hash");
+    /**
+     * Returns the hash in [h, s, l].
+     * Note that H ∈ [0, 360); S ∈ [0, 1]; L ∈ [0, 1];
+     *
+     * @param {String} str string to hash
+     * @returns {Array} [h, s, l]
+     */
+    __publicField(this, "hsl", (str) => {
+      let H, S, L;
+      let hash = this._hash(str);
+      const hueResolution = 727;
+      if (this._hueRange.length) {
+        const range = this._hueRange[hash % this._hueRange.length];
+        H = hash / this._hueRange.length % hueResolution * (range.max - range.min) / hueResolution + range.min;
+      } else {
+        H = hash % 359;
+      }
+      hash = Math.ceil(hash / 360);
+      S = this._S[hash % this._S.length];
+      hash = Math.ceil(hash / this._S.length);
+      L = this._L[hash % this._L.length];
+      return [H, S, L];
+    });
+    /**
+     * Returns the hash in [r, g, b].
+     * Note that R, G, B ∈ [0, 255]
+     *
+     * @param {String} str string to hash
+     * @returns {Array} [r, g, b]
+     */
+    __publicField(this, "rgb", (str) => {
+      const hsl = this.hsl(str);
+      return HSL2RGB.apply(this, hsl);
+    });
+    /**
+     * Returns the hash in hex
+     *
+     * @param {String} str string to hash
+     * @returns {String} hex with #
+     */
+    __publicField(this, "hex", (str) => {
+      const rgb = this.rgb(str);
+      return RGB2HEX(rgb);
+    });
+    const [L, S] = [options.lightness, options.saturation].map((param) => {
+      param = param !== void 0 ? param : [0.35, 0.5, 0.65];
+      return Array.isArray(param) ? param.concat() : [param];
+    });
+    this._L = L;
+    this._S = S;
+    if (typeof options.hue === "number") {
+      options.hue = { min: options.hue, max: options.hue };
+    }
+    if (typeof options.hue === "object" && !Array.isArray(options.hue)) {
+      options.hue = [options.hue];
+    }
+    if (typeof options.hue === "undefined" || options.hue === null) {
+      options.hue = [];
+    }
+    this._hueRange = options.hue.map((range) => {
+      return {
+        min: typeof range.min === "undefined" ? 0 : range.min,
+        max: typeof range.max === "undefined" ? 360 : range.max
+      };
+    });
+    this._hash = bkdr_hash_default;
+  }
+};
+var colorHash = new ColorHash({
+  hue: { min: 0, max: 359 },
+  saturation: [0.35, 0.5, 0.65],
+  lightness: [0.35, 0.5, 0.65]
+});
+var color_hash_default = colorHash;
+
+// packages/Atoms/Avatar/index.tsx
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var Avatar = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx2(
+  AvatarPrimitive.Root,
+  {
+    ref,
+    className: cn("relative flex size-10 shrink-0 overflow-hidden rounded-full", className),
+    ...props
+  }
+));
+Avatar.displayName = AvatarPrimitive.Root.displayName;
+var AvatarImage = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx2(
+  AvatarPrimitive.Image,
+  {
+    ref,
+    className: cn("aspect-square size-full", className),
+    ...props
+  }
+));
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
+var AvatarFallback = forwardRef(({ hexColor = "#6C70F0", className, ...props }, ref) => /* @__PURE__ */ jsx2(
+  AvatarPrimitive.Fallback,
+  {
+    ref,
+    className: cn("flex size-full items-center justify-center rounded-full", className),
+    ...props,
+    style: { color: color_hash_default.hex(hexColor) },
+    children: /* @__PURE__ */ jsx2(AvatarIcon_default, { size: 36 })
+  }
+));
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+export {
+  Avatar,
+  AvatarFallback,
+  AvatarImage
+};

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

@@ -0,0 +1,10 @@
+import { FC, ReactNode } from 'react';
+
+interface IBadgeProps {
+    isNew?: boolean;
+    children: ReactNode;
+    className?: string;
+}
+declare const Badge: FC<IBadgeProps>;
+
+export { Badge as default };