@customafk/lunas-ui 0.0.2 → 0.0.3-a

package/dist/Ecommerce/Categories/index.js

@@ -0,0 +1,1426 @@
+// packages/Ecommerce/Categories/index.tsx
+import { useCallback as useCallback4, useState as useState7 } from "react";
+
+// packages/Ecommerce/Categories/components/AcceptBtn.tsx
+import { useState } from "react";
+
+// packages/Atoms/Select/index.tsx
+import { forwardRef } from "react";
+
+// packages/utils/constants.ts
+var DEFAULT_ICON_SIZE = 24;
+
+// packages/Icons/Lucide2ChevronDownIcon.tsx
+import { jsx } from "react/jsx-runtime";
+var Lucide2ChevronDownIcon = (props) => {
+  const { color, size } = props;
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size ?? DEFAULT_ICON_SIZE,
+      height: size ?? DEFAULT_ICON_SIZE,
+      viewBox: "0 0 16 16",
+      fill: "none",
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M4 6L8 10L12 6",
+          stroke: color ?? "#434349",
+          strokeWidth: "1.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  );
+};
+Lucide2ChevronDownIcon.displayName = "Lucide2ChevronDownIcon";
+var Lucide2ChevronDownIcon_default = Lucide2ChevronDownIcon;
+
+// 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/Select/index.tsx
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { Check, ChevronDown, ChevronUp } from "lucide-react";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var Select = SelectPrimitive.Root;
+var SelectValue = SelectPrimitive.Value;
+var SelectTrigger = forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+  SelectPrimitive.Trigger,
+  {
+    ref,
+    className: cn(
+      "flex items-center justify-between",
+      "h-10 w-full",
+      "px-3 py-2",
+      "rounded-md border border-ui-primary-500",
+      "text-sm",
+      "bg-ui-surface-50",
+      "placeholder:text-ui-text-500",
+      "focus:outline-none",
+      "focus:ring-1",
+      "focus:ring-offset-2",
+      "focus:ring-offset-ui-primary-200",
+      "disabled:cursor-not-allowed",
+      "disabled:opacity-50 [&>span]:line-clamp-1",
+      className
+    ),
+    ...props,
+    children: [
+      children,
+      /* @__PURE__ */ jsx2(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx2(Lucide2ChevronDownIcon_default, { className: "size-4 opacity-50" }) })
+    ]
+  }
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+var SelectScrollUpButton = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx2(
+  SelectPrimitive.ScrollUpButton,
+  {
+    ref,
+    className: cn("flex items-center justify-center", "cursor-all-scroll py-1", className),
+    ...props,
+    children: /* @__PURE__ */ jsx2(ChevronUp, { className: "size-4" })
+  }
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+var SelectScrollDownButton = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx2(
+  SelectPrimitive.ScrollDownButton,
+  {
+    ref,
+    className: cn("flex cursor-all-scroll items-center justify-center py-1", className),
+    ...props,
+    children: /* @__PURE__ */ jsx2(ChevronDown, { className: "size-4" })
+  }
+));
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
+var SelectContent = forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx2(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
+  SelectPrimitive.Content,
+  {
+    ref,
+    className: cn(
+      "relative z-50",
+      "max-h-96 min-w-[8rem]",
+      "overflow-hidden",
+      "rounded-md border",
+      "bg-ui-surface-50",
+      "text-ui-text-900",
+      "shadow-ui-dialog",
+      "data-[state=open]:animate-in",
+      "data-[state=open]:zoom-in-95",
+      "data-[state=open]:fade-in-0",
+      "data-[state=closed]:animate-out",
+      "data-[state=closed]:fade-out-0",
+      "data-[state=closed]:zoom-out-95",
+      "data-[side=bottom]:slide-in-from-top-2",
+      "data-[side=left]:slide-in-from-right-2",
+      "data-[side=right]:slide-in-from-left-2",
+      "data-[side=top]:slide-in-from-bottom-2",
+      position === "popper" && "data-[side=bottom]:translate-y-1",
+      position === "popper" && "data-[side=left]:-translate-x-1",
+      position === "popper" && "data-[side=right]:translate-x-1",
+      position === "popper" && "data-[side=top]:-translate-y-1",
+      className
+    ),
+    position,
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx2(SelectScrollUpButton, {}),
+      /* @__PURE__ */ jsx2(
+        SelectPrimitive.Viewport,
+        {
+          className: cn(
+            "p-1",
+            position === "popper" && "h-[var(--radix-select-trigger-height)]",
+            position === "popper" && "w-full",
+            position === "popper" && "min-w-[var(--radix-select-trigger-width)]"
+          ),
+          children
+        }
+      ),
+      /* @__PURE__ */ jsx2(SelectScrollDownButton, {})
+    ]
+  }
+) }));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+var SelectLabel = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx2(
+  SelectPrimitive.Label,
+  {
+    ref,
+    className: cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className),
+    ...props
+  }
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+var SelectItem = forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+  SelectPrimitive.Item,
+  {
+    ref,
+    className: cn(
+      "relative",
+      "flex items-center",
+      "w-full",
+      "py-1.5 pl-8 pr-2",
+      "rounded-sm",
+      "text-sm",
+      "cursor-pointer",
+      "select-none",
+      "outline-none",
+      "focus:bg-ui-primary-100",
+      "focus:text-ui-text-900",
+      "data-[disabled]:pointer-events-none",
+      "data-[disabled]:opacity-50",
+      className
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx2("span", { className: "absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx2(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx2(Check, { className: "size-4" }) }) }),
+      /* @__PURE__ */ jsx2(SelectPrimitive.ItemText, { children })
+    ]
+  }
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+var SelectSeparator = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx2(
+  SelectPrimitive.Separator,
+  {
+    ref,
+    className: cn("-mx-1 my-1 h-px bg-ui-border-400", className),
+    ...props
+  }
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+
+// packages/Ecommerce/Categories/components/DateSelect.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var DateSelect = ({ onSortChange }) => {
+  return /* @__PURE__ */ jsxs2("div", { className: "flex flex-col gap-y-1", children: [
+    /* @__PURE__ */ jsx3("p", { className: "text-ui-small-note font-medium text-ui-text-600", children: "S\u1EAFp x\u1EBFp theo" }),
+    /* @__PURE__ */ jsxs2(Select, { onValueChange: onSortChange, defaultValue: "date-desc", children: [
+      /* @__PURE__ */ jsx3(SelectTrigger, { className: "h-fit min-w-28 rounded border border-ui-border-400 px-2 py-1 text-ui-small-note font-semibold text-ui-text-500", children: /* @__PURE__ */ jsx3(SelectValue, { placeholder: "Gi\xE1 th\u1EA5p nh\u1EA5t" }) }),
+      /* @__PURE__ */ jsxs2(SelectContent, { className: "[&_div]:pl-2 [&_svg]:hidden", children: [
+        /* @__PURE__ */ jsx3(SelectItem, { value: "price-asc", children: "Gi\xE1 th\u1EA5p nh\u1EA5t" }),
+        /* @__PURE__ */ jsx3(SelectItem, { value: "price-desc", children: "Gi\xE1 cao nh\u1EA5t" }),
+        /* @__PURE__ */ jsx3(SelectItem, { value: "date-desc", children: "M\u1EDBi nh\u1EA5t" }),
+        /* @__PURE__ */ jsx3(SelectItem, { value: "date-asc", children: "C\u0169 nh\u1EA5t" })
+      ] })
+    ] })
+  ] });
+};
+var DateSelect_default = DateSelect;
+
+// packages/Ecommerce/Categories/Providers/useBrandProvider.tsx
+import { createContext, useContext } from "react";
+var BrandContext = createContext(null);
+function useBrandProvider() {
+  const context = useContext(BrandContext);
+  if (!context) {
+    throw new Error("useBrandContext must be used within a BrandProvider");
+  }
+  return context;
+}
+
+// packages/Ecommerce/Categories/Providers/usePriceProvider.tsx
+import { createContext as createContext2, useContext as useContext2 } from "react";
+var PriceContext = createContext2(null);
+function usePriceProvider() {
+  const context = useContext2(PriceContext);
+  if (!context) {
+    throw new Error("usePriceContext must be used within a PriceProvider");
+  }
+  return context;
+}
+
+// packages/Atoms/Button/index.tsx
+import { forwardRef as forwardRef2, memo } from "react";
+
+// packages/Atoms/Button/buttonVariants.ts
+import { cva } from "class-variance-authority";
+var buttonVariants = cva(
+  "flex items-center justify-center gap-1 rounded-md transition duration-150 ease-in-out enabled:hover:opacity-80 enabled:active:opacity-100 enabled:active:ring-4 disabled:cursor-not-allowed disabled:opacity-40",
+  {
+    variants: {
+      variant: {
+        default: "bg-ui-btn-primary !text-ui-text-50 enabled:focus:ring-ui-primary-200",
+        secondary: "bg-ui-surface-50 !text-ui-primary-500 shadow-ui-overlay enabled:focus:ring-ui-primary-200",
+        outline: "border border-solid border-ui-primary-400 !text-ui-primary-500 enabled:hover:shadow-ui-flat enabled:active:ring-ui-primary-200",
+        destructive: "bg-ui-destructive-500 !text-ui-text-50 enabled:active:ring-ui-destructive-200",
+        "destructive-secondary": "bg-ui-destructive-50 !text-ui-destructive-500 enabled:active:ring-ui-destructive-200",
+        "destructive-outline": "border border-solid border-ui-destructive-400 bg-ui-destructive-50 !text-ui-destructive-500 ring-ui-destructive-200 disabled:opacity-60",
+        "sort-outline": "bg-ui-primary-50 !text-ui-primary-500 enabled:focus:ring-ui-primary-200",
+        normal: "border-ui-black border border-solid bg-ui-white enabled:active:shadow-ui-xl"
+      },
+      size: {
+        default: "px-3 py-1.5 text-ui-note font-semibold",
+        base: "px-3 py-1.5 text-ui-note font-semibold",
+        large: "px-4 py-2 text-ui-p font-semibold",
+        small: "px-2 py-1 text-ui-small-note font-semibold"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+
+// packages/Atoms/Button/index.tsx
+import { Slot, Slottable } from "@radix-ui/react-slot";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var Button = memo(
+  forwardRef2(
+    ({
+      className,
+      variant = "default",
+      size,
+      icon,
+      rightIcon,
+      asChild = false,
+      children,
+      ...props
+    }, reference) => {
+      const Comp = asChild ? Slot : "button";
+      return /* @__PURE__ */ jsxs3(
+        Comp,
+        {
+          className: cn(buttonVariants({ variant, size, className })),
+          ref: reference,
+          ...props,
+          children: [
+            icon,
+            /* @__PURE__ */ jsx4(Slottable, { children }),
+            rightIcon
+          ]
+        }
+      );
+    }
+  )
+);
+Button.displayName = "Button";
+var Button_default = Button;
+
+// packages/Icons/Lucide2TunnelIcon.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+var Lucide2TunnelIcon = ({ size, color }) => {
+  return /* @__PURE__ */ jsx5(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size ?? 16,
+      height: size ?? 16,
+      viewBox: "0 0 16 16",
+      fill: "none",
+      children: /* @__PURE__ */ jsx5(
+        "path",
+        {
+          d: "M6.90667 12.8087L5.33333 13.3333V7.66667L2.34667 4.38133C2.12363 4.13595 2.00004 3.81626 2 3.48467V2H12.6667V3.448C12.6666 3.80159 12.5261 4.14068 12.276 4.39067L9.33333 7.33333M12.8 12.8L14 14M9.33333 11.3333C9.33333 11.8638 9.54405 12.3725 9.91912 12.7475C10.2942 13.1226 10.8029 13.3333 11.3333 13.3333C11.8638 13.3333 12.3725 13.1226 12.7475 12.7475C13.1226 12.3725 13.3333 11.8638 13.3333 11.3333C13.3333 10.8029 13.1226 10.2942 12.7475 9.91912C12.3725 9.54405 11.8638 9.33333 11.3333 9.33333C10.8029 9.33333 10.2942 9.54405 9.91912 9.91912C9.54405 10.2942 9.33333 10.8029 9.33333 11.3333Z",
+          stroke: color ?? "currentColor",
+          strokeWidth: "1.3",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  );
+};
+var Lucide2TunnelIcon_default = Lucide2TunnelIcon;
+
+// packages/Ecommerce/Categories/components/AcceptBtn.tsx
+import { Fragment, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+var AcceptBtn = ({ onFilterConfirm }) => {
+  const { brandSelected } = useBrandProvider();
+  const { price } = usePriceProvider();
+  const [sort, setSort] = useState("date-desc");
+  return /* @__PURE__ */ jsxs4(Fragment, { children: [
+    /* @__PURE__ */ jsx6(DateSelect_default, { onSortChange: (value) => setSort(value) }),
+    /* @__PURE__ */ jsx6(
+      Button_default,
+      {
+        variant: "outline",
+        icon: /* @__PURE__ */ jsx6(Lucide2TunnelIcon_default, { size: 16, color: "#828EF7" }),
+        className: "h-fit border-2 pl-4 pr-6 text-ui-note font-bold",
+        onClick: () => onFilterConfirm?.({
+          brand: brandSelected,
+          price,
+          sort
+        }),
+        children: /* @__PURE__ */ jsx6("span", { children: "L\u1ECDc k\u1EBFt qu\u1EA3" })
+      }
+    )
+  ] });
+};
+var AcceptBtn_default = AcceptBtn;
+
+// packages/Ecommerce/Categories/components/BrandTag.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+var BrandTag = ({ name }) => {
+  return /* @__PURE__ */ jsx7("div", { className: "size-fit select-none rounded border border-purple-400 bg-purple-50 px-3 py-1 text-ui-small-note font-semibold text-purple-500", children: name });
+};
+var BrandTag_default = BrandTag;
+
+// packages/Ecommerce/Categories/components/BrandDisplay.tsx
+import { Fragment as Fragment2, jsx as jsx8 } from "react/jsx-runtime";
+var BrandDisplay = () => {
+  const { brandSelected } = useBrandProvider();
+  return /* @__PURE__ */ jsx8(Fragment2, { children: brandSelected.map((brand) => /* @__PURE__ */ jsx8(BrandTag_default, { ...brand }, brand.uuid)) });
+};
+var BrandDisplay_default = BrandDisplay;
+
+// packages/Ecommerce/Categories/components/BrandModal.tsx
+import { memo as memo2, useCallback, useState as useState2 } from "react";
+
+// packages/Icons/Lucide2PlusIcon.tsx
+import { jsx as jsx9 } from "react/jsx-runtime";
+var Lucide2PlusIcon = ({ size, color }) => {
+  return /* @__PURE__ */ jsx9(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size ?? 16,
+      height: size ?? 16,
+      viewBox: "0 0 16 16",
+      fill: "none",
+      children: /* @__PURE__ */ jsx9(
+        "path",
+        {
+          d: "M3.33325 7.99998H12.6666M7.99992 3.33331V12.6666",
+          stroke: color ?? "black",
+          strokeWidth: "1.33333",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  );
+};
+var Lucide2PlusIcon_default = Lucide2PlusIcon;
+
+// packages/Ecommerce/Categories/components/FilterBtn.tsx
+import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
+var FilterBtn = ({ title, onClick }) => {
+  return /* @__PURE__ */ jsxs5(
+    "button",
+    {
+      onClick,
+      className: "flex h-fit items-center gap-x-1 rounded border border-dashed border-ui-border-400 px-3 py-1 shadow-ui-overlay",
+      children: [
+        /* @__PURE__ */ jsx10(Lucide2PlusIcon_default, { size: 16, color: "#A1A1AA" }),
+        /* @__PURE__ */ jsx10("p", { className: "text-ui-small-note font-medium text-ui-text-400", children: title })
+      ]
+    }
+  );
+};
+var FilterBtn_default = FilterBtn;
+
+// packages/Atoms/Command/index.tsx
+import * as React2 from "react";
+
+// packages/Atoms/Dialog/index.tsx
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { X } from "lucide-react";
+import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
+var Dialog = DialogPrimitive.Root;
+var DialogPortal = DialogPrimitive.Portal;
+var DialogOverlay = React.forwardRef(({ className, ...props }, reference) => /* @__PURE__ */ jsx11(
+  DialogPrimitive.Overlay,
+  {
+    ref: reference,
+    className: cn(
+      "fixed inset-0 z-50 bg-black/80",
+      "data-[state=open]:animate-in",
+      "data-[state=closed]:animate-out",
+      "data-[state=closed]:fade-out-0",
+      "data-[state=open]:fade-in-0",
+      className
+    ),
+    ...props
+  }
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+var DialogContent = React.forwardRef(({ className, children, ...props }, reference) => /* @__PURE__ */ jsxs6(DialogPortal, { children: [
+  /* @__PURE__ */ jsx11(DialogOverlay, {}),
+  /* @__PURE__ */ jsxs6(
+    DialogPrimitive.Content,
+    {
+      ref: reference,
+      className: cn(
+        "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%]",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsxs6(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__ */ jsx11(X, { className: "size-4" }),
+          /* @__PURE__ */ jsx11("span", { className: "sr-only", children: "Close" })
+        ] })
+      ]
+    }
+  )
+] }));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+var DialogHeader = ({ className, ...props }) => /* @__PURE__ */ jsx11("div", { className: cn("flex flex-col space-y-1.5 text-center sm:text-left", className), ...props });
+DialogHeader.displayName = "DialogHeader";
+var DialogFooter = ({ className, ...props }) => /* @__PURE__ */ jsx11(
+  "div",
+  {
+    className: cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className),
+    ...props
+  }
+);
+DialogFooter.displayName = "DialogFooter";
+var DialogTitle = React.forwardRef(({ className, ...props }, reference) => /* @__PURE__ */ jsx11(
+  DialogPrimitive.Title,
+  {
+    ref: reference,
+    className: cn("text-lg font-semibold leading-none tracking-tight", className),
+    ...props
+  }
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+var DialogDescription = React.forwardRef(({ className, ...props }, reference) => /* @__PURE__ */ jsx11(
+  DialogPrimitive.Description,
+  {
+    ref: reference,
+    className: cn("text-sm text-ui-text-400", className),
+    ...props
+  }
+));
+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 jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
+var Command = React2.forwardRef(({ className, ...props }, reference) => /* @__PURE__ */ jsx12(
+  CommandPrimitive,
+  {
+    ref: reference,
+    className: cn(
+      "flex h-full w-full flex-col overflow-hidden rounded-md bg-ui-white text-ui-text-800",
+      className
+    ),
+    ...props
+  }
+));
+Command.displayName = CommandPrimitive.displayName;
+var CommandDialog = ({ children, ...props }) => {
+  return /* @__PURE__ */ jsxs7(Dialog, { ...props, children: [
+    /* @__PURE__ */ jsx12(DialogContent, { className: "p-0 shadow-lg", children: /* @__PURE__ */ jsx12(
+      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__ */ jsx12(VisuallyHidden, { children: /* @__PURE__ */ jsx12(DialogTitle, {}) })
+  ] });
+};
+var CommandInput = React2.forwardRef(({ className, ...props }, reference) => /* @__PURE__ */ jsxs7("div", { className: "flex items-center border-b px-3", children: [
+  /* @__PURE__ */ jsx12(Search, { className: "mr-2 size-4 shrink-0 opacity-50" }),
+  /* @__PURE__ */ jsx12(
+    CommandPrimitive.Input,
+    {
+      ref: reference,
+      className: cn(
+        "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none",
+        "placeholder:!text-ui-text-300",
+        "disabled:cursor-not-allowed",
+        "disabled:opacity-50",
+        className
+      ),
+      ...props
+    }
+  )
+] }));
+CommandInput.displayName = CommandPrimitive.Input.displayName;
+var CommandList = React2.forwardRef(({ className, ...props }, reference) => /* @__PURE__ */ jsx12(
+  CommandPrimitive.List,
+  {
+    ref: reference,
+    className: cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className),
+    ...props
+  }
+));
+CommandList.displayName = CommandPrimitive.List.displayName;
+var CommandEmpty = React2.forwardRef((props, reference) => /* @__PURE__ */ jsx12(CommandPrimitive.Empty, { ref: reference, className: "py-6 text-center text-sm", ...props }));
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
+var CommandGroup = React2.forwardRef(({ className, ...props }, reference) => /* @__PURE__ */ jsx12(
+  CommandPrimitive.Group,
+  {
+    ref: reference,
+    className: cn(
+      "overflow-hidden p-1 text-ui-text-800",
+      "[&_[cmdk-group-heading]]:px-2",
+      "[&_[cmdk-group-heading]]:py-1.5",
+      "[&_[cmdk-group-heading]]:text-xs",
+      "[&_[cmdk-group-heading]]:font-medium",
+      "[&_[cmdk-group-heading]]:text-ui-text-800",
+      className
+    ),
+    ...props
+  }
+));
+CommandGroup.displayName = CommandPrimitive.Group.displayName;
+var CommandSeparator = React2.forwardRef(({ className, ...props }, reference) => /* @__PURE__ */ jsx12(
+  CommandPrimitive.Separator,
+  {
+    ref: reference,
+    className: cn("bg-border -mx-1 h-px", className),
+    ...props
+  }
+));
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
+var CommandItem = React2.forwardRef(({ className, ...props }, reference) => /* @__PURE__ */ jsx12(
+  CommandPrimitive.Item,
+  {
+    ref: reference,
+    className: cn(
+      "relative flex cursor-default select-none items-center gap-x-1 rounded-lg px-2 py-1.5 text-sm outline-none",
+      "data-[selected=true]:text-ui-text-800",
+      "data-[disabled=true]:pointer-events-none",
+      "data-[disabled=true]:opacity-50",
+      "hover:cursor-pointer hover:bg-ui-surface-100",
+      "transition-color duration-150 ease-in-out",
+      className
+    ),
+    ...props
+  }
+));
+CommandItem.displayName = CommandPrimitive.Item.displayName;
+var CommandShortcut = ({ className, ...props }) => {
+  return /* @__PURE__ */ jsx12(
+    "span",
+    {
+      className: cn("ml-auto text-xs tracking-widest text-ui-text-400", className),
+      ...props
+    }
+  );
+};
+CommandShortcut.displayName = "CommandShortcut";
+
+// packages/Ecommerce/Categories/components/BrandModal.tsx
+import { Fragment as Fragment3, jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
+var BrandModal = ({ data }) => {
+  const { brandSelected, setBrandSelected } = useBrandProvider();
+  const [open, setOpen] = useState2(false);
+  const handleOpen = useCallback(() => setOpen(true), []);
+  const handleResetBtn = useCallback(() => {
+    setBrandSelected([]);
+    setOpen(false);
+  }, [setBrandSelected]);
+  return /* @__PURE__ */ jsxs8(Fragment3, { children: [
+    /* @__PURE__ */ jsx13(FilterBtn_default, { title: "T\xECm ki\u1EBFm th\u01B0\u01A1ng hi\u1EC7u", onClick: handleOpen }),
+    /* @__PURE__ */ jsxs8(CommandDialog, { open, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ jsx13(CommandInput, { placeholder: "T\xECm ki\u1EBFm th\u01B0\u01A1ng hi\u1EC7u..." }),
+      /* @__PURE__ */ jsx13(
+        CommandList,
+        {
+          className: cn(
+            "[&>div]:flex",
+            "[&>div]:flex-wrap",
+            "[&>div]:gap-2",
+            "[&>div]:px-4",
+            "[&>div]:pt-3"
+          ),
+          children: data.map(({ uuid, name }) => /* @__PURE__ */ jsx13(CommandItem, { value: name, className: "!p-0", children: /* @__PURE__ */ jsx13(
+            "button",
+            {
+              className: cn(
+                "rounded-md border border-ui-border-400 !px-3 !py-1 text-ui-note font-medium",
+                brandSelected.find((brand) => brand.uuid === uuid) && "border-ui-tertiary-400 bg-ui-tertiary-50 text-ui-tertiary-500 shadow-ui-flat"
+              ),
+              onClick: () => {
+                if (brandSelected.some((brand) => brand.uuid === uuid)) {
+                  setBrandSelected(brandSelected.filter((brand) => brand.uuid !== uuid));
+                  return;
+                }
+                setBrandSelected((prev) => [...prev, { uuid, name }]);
+              },
+              children: name
+            }
+          ) }, uuid))
+        }
+      ),
+      /* @__PURE__ */ jsx13("div", { className: cn("flex w-full justify-end gap-x-2.5 p-3"), children: /* @__PURE__ */ jsx13(Button_default, { variant: "outline", onClick: handleResetBtn, children: "Reset" }) })
+    ] })
+  ] });
+};
+var BrandModal_default = memo2(BrandModal);
+
+// packages/Ecommerce/Categories/components/PricePopover.tsx
+import { useCallback as useCallback3, useMemo as useMemo2, useState as useState4 } from "react";
+
+// packages/Ecommerce/Categories/components/PriceTag.tsx
+import { jsx as jsx14 } from "react/jsx-runtime";
+var PriceTag = ({ name }) => {
+  return /* @__PURE__ */ jsx14("div", { className: "size-fit select-none text-nowrap rounded border border-ui-tertiary-400 bg-ui-tertiary-50 px-3 py-1 text-ui-small-note font-semibold text-ui-tertiary-500", children: name });
+};
+var PriceTag_default = PriceTag;
+
+// packages/Atoms/NumberInput/index.tsx
+import {
+  forwardRef as forwardRef5,
+  useCallback as useCallback2,
+  useMemo,
+  useRef,
+  useState as useState3
+} from "react";
+import { jsx as jsx15 } from "react/jsx-runtime";
+var NumberInput = forwardRef5(({ className, value: initialValue, onChange, onValueChange, ...props }, ref) => {
+  const isFocused = useRef(false);
+  const [value, setValue] = useState3(void 0);
+  const formattedValue = useMemo(() => {
+    const regex = /\B(?=(?:\d{3})+(?!\d))/g;
+    const focused = isFocused.current;
+    if (initialValue) {
+      return focused ? initialValue : initialValue.toString().replaceAll(regex, ",");
+    }
+    if (!value) return "";
+    if (focused) return value.toString().replaceAll(regex, "");
+    return value.toString().replaceAll(regex, ",");
+  }, [initialValue, value]);
+  const handleChange = useCallback2(
+    (e) => {
+      const { value: value2 } = e.target;
+      if (/[^\d,]/.test(value2)) return;
+      setValue(value2.replaceAll(",", ""));
+      onChange?.(e);
+      onValueChange?.(Number(value2));
+    },
+    [onChange, onValueChange]
+  );
+  const handleFocus = useCallback2(() => {
+    isFocused.current = true;
+    if (initialValue) {
+      setValue((initialValue ?? "").toString().replaceAll(",", ""));
+      return;
+    }
+    setValue((value ?? "").toString().replaceAll(",", ""));
+  }, [initialValue, value]);
+  const handleBlur = useCallback2(() => {
+    isFocused.current = false;
+    setValue((value ?? "").toString().replaceAll(/\B(?=(?:\d{3})+(?!\d))/g, ","));
+  }, [value]);
+  return /* @__PURE__ */ jsx15(
+    "input",
+    {
+      ref,
+      value: formattedValue,
+      className: cn(
+        "relative",
+        "outline-none",
+        "px-2 py-1",
+        "!text-ui-note text-ui-text-600",
+        "rounded border border-ui-border-300",
+        "placeholder:!text-ui-note placeholder:text-ui-text-400",
+        "focus-within:border-ui-primary-500",
+        "focus-within:ring-4",
+        "focus-within:ring-ui-primary-50",
+        "transition-all duration-300 ease-in-out",
+        className
+      ),
+      ...props,
+      onChange: handleChange,
+      onFocus: handleFocus,
+      onBlur: handleBlur
+    }
+  );
+});
+var NumberInput_default = NumberInput;
+
+// packages/Atoms/Popover/index.tsx
+import { forwardRef as forwardRef6 } from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { jsx as jsx16 } from "react/jsx-runtime";
+var Popover = PopoverPrimitive.Root;
+var PopoverTrigger = PopoverPrimitive.Trigger;
+var PopoverContent = forwardRef6(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx16(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx16(
+  PopoverPrimitive.Content,
+  {
+    ref,
+    align,
+    sideOffset,
+    className: cn(
+      "z-50 w-72",
+      "rounded-md border",
+      "bg-ui-surface-50 p-4 text-ui-text-800",
+      "shadow-md outline-none",
+      "data-[state=open]:animate-in",
+      "data-[state=open]:fade-in-0",
+      "data-[state=open]:zoom-in-95",
+      "data-[state=closed]:animate-out",
+      "data-[state=closed]:fade-out-0",
+      "data-[state=closed]:zoom-out-95",
+      "data-[side=bottom]:slide-in-from-top-2",
+      "data-[side=left]:slide-in-from-right-2",
+      "data-[side=right]:slide-in-from-left-2",
+      "data-[side=top]:slide-in-from-bottom-2",
+      className
+    ),
+    ...props
+  }
+) }));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+// packages/Ecommerce/Categories/components/PricePopover.tsx
+import { Fragment as Fragment4, jsx as jsx17, jsxs as jsxs9 } from "react/jsx-runtime";
+var PricePopover = () => {
+  const { price, setPrice } = usePriceProvider();
+  const [isOpen, setIsOpen] = useState4(false);
+  const data = useMemo2(
+    () => [
+      {
+        value: "0-100000",
+        label: "D\u01B0\u1EDBi 100.000",
+        option: {
+          from: 0,
+          to: 1e5
+        }
+      },
+      {
+        value: "100000-300000",
+        label: "100.000 - 300.000",
+        option: {
+          from: 1e5,
+          to: 3e5
+        }
+      },
+      {
+        value: "300000-600000",
+        label: "300.000 - 600.000",
+        option: {
+          from: 3e5,
+          to: 6e5
+        }
+      },
+      {
+        value: "600000-1000000",
+        label: "600.000 - 1.000.000",
+        option: {
+          from: 6e5,
+          to: 1e6
+        }
+      },
+      {
+        value: "1000000-2000000",
+        label: "1.000.000 - 2.000.000",
+        option: {
+          from: 1e6,
+          to: 2e6
+        }
+      },
+      {
+        value: "2000000-5000000",
+        label: "2.000.000 - 5.000.000",
+        option: {
+          from: 2e6,
+          to: 5e6
+        }
+      },
+      {
+        value: "5000000-8000000",
+        label: "5.000.000 - 8.000.000",
+        option: {
+          from: 5e6,
+          to: 8e6
+        }
+      },
+      {
+        value: "8000000-",
+        label: "Tr\xEAn 8.000.000",
+        option: {
+          from: 8e6,
+          to: Infinity
+        }
+      }
+    ],
+    []
+  );
+  const Item2 = useCallback3(
+    (props) => {
+      const { value, label } = props;
+      return /* @__PURE__ */ jsx17(
+        "button",
+        {
+          className: cn(
+            "rounded-md border border-ui-border-400 !px-3 !py-1 !text-ui-note font-medium text-ui-text-400 shadow-ui-flat",
+            price?.value === value && "border-ui-tertiary-400 bg-ui-tertiary-50 text-ui-tertiary-500"
+          ),
+          onClick: () => setPrice(props),
+          children: label
+        }
+      );
+    },
+    [price?.value, setPrice]
+  );
+  const handleSubmit = useCallback3(() => {
+    if (price && price.option.from > price.option.to) {
+      setPrice(void 0);
+    }
+    setIsOpen(false);
+  }, [price, setPrice]);
+  return /* @__PURE__ */ jsx17(Fragment4, { children: /* @__PURE__ */ jsxs9(Popover, { open: isOpen, onOpenChange: setIsOpen, children: [
+    /* @__PURE__ */ jsx17(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs9("div", { className: "flex flex-wrap gap-2", children: [
+      price && /* @__PURE__ */ jsx17(PriceTag_default, { name: price?.label }),
+      /* @__PURE__ */ jsx17(FilterBtn_default, { title: "T\xECm ki\u1EBFm theo gi\xE1", onClick: () => setIsOpen(true) })
+    ] }) }),
+    /* @__PURE__ */ jsxs9(
+      PopoverContent,
+      {
+        className: "flex w-auto max-w-[34.25rem] flex-col gap-y-2.5",
+        align: "start",
+        sideOffset: 10,
+        onInteractOutside: handleSubmit,
+        children: [
+          /* @__PURE__ */ jsxs9("div", { className: "flex flex-col gap-y-2", children: [
+            /* @__PURE__ */ jsx17("p", { className: "text-ui-note font-medium", children: "Kho\u1EA3ng gi\xE1" }),
+            /* @__PURE__ */ jsxs9("div", { className: "flex gap-x-2", children: [
+              /* @__PURE__ */ jsx17(
+                NumberInput_default,
+                {
+                  placeholder: "T\u1EEB",
+                  value: price?.option.from.toString(),
+                  onValueChange: (value) => {
+                    setPrice((prev) => ({
+                      ...prev,
+                      option: { ...prev?.option, from: value, to: prev?.option.to ?? 0 },
+                      label: `${value.toLocaleString()} - ${prev?.option.to?.toLocaleString()}`,
+                      value: `${value}-${prev?.option.to}`
+                    }));
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx17(
+                NumberInput_default,
+                {
+                  placeholder: "\u0110\u1EBFn",
+                  value: price?.option.to === Infinity ? "" : price?.option.to.toString(),
+                  onValueChange: (value) => setPrice((prev) => {
+                    if (prev) {
+                      return {
+                        ...prev,
+                        option: { ...prev.option, to: value ?? 0 },
+                        label: `${prev.option.from.toLocaleString()} - ${value.toLocaleString()}`,
+                        value: `${prev.option.from}-${value}`
+                      };
+                    }
+                    return prev;
+                  })
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs9("div", { className: "flex flex-col gap-y-2 py-2", children: [
+            /* @__PURE__ */ jsx17("p", { className: "text-ui-small-note text-ui-text-500", children: "G\u1EE3i \xFD" }),
+            /* @__PURE__ */ jsx17("div", { className: "flex flex-wrap gap-2 px-3", children: data.map((item) => /* @__PURE__ */ jsx17(Item2, { ...item }, item.value)) })
+          ] }),
+          /* @__PURE__ */ jsxs9("div", { className: "flex justify-end gap-x-2 [&>button]:px-6", children: [
+            /* @__PURE__ */ jsx17(Button_default, { variant: "outline", onClick: () => setPrice(void 0), children: "X\xF3a ch\u1ECDn" }),
+            /* @__PURE__ */ jsx17(Button_default, { onClick: handleSubmit, children: "X\xE1c nh\u1EADn" })
+          ] })
+        ]
+      }
+    )
+  ] }) });
+};
+var PricePopover_default = PricePopover;
+
+// packages/Ecommerce/Categories/Providers/BrandProvider.tsx
+import { useState as useState5 } from "react";
+import { jsx as jsx18 } from "react/jsx-runtime";
+var BrandProvider = ({ children }) => {
+  const [brandSelected, setBrandSelected] = useState5([]);
+  return /* @__PURE__ */ jsx18(BrandContext.Provider, { value: { brandSelected, setBrandSelected }, children });
+};
+var BrandProvider_default = BrandProvider;
+
+// packages/Ecommerce/Categories/Providers/PriceProvider.tsx
+import { useState as useState6 } from "react";
+import { jsx as jsx19 } from "react/jsx-runtime";
+var PriceProvider = ({ children }) => {
+  const [price, setPrice] = useState6({
+    value: "0-100000",
+    label: "D\u01B0\u1EDBi 100.000",
+    option: {
+      from: 0,
+      to: 1e5
+    }
+  });
+  return /* @__PURE__ */ jsx19(PriceContext.Provider, { value: { price, setPrice }, children });
+};
+var PriceProvider_default = PriceProvider;
+
+// packages/Icons/Lucide2LayoutGrid.tsx
+import { jsx as jsx20, jsxs as jsxs10 } from "react/jsx-runtime";
+var Lucide2LayoutGrid = ({ color, size }) => {
+  return /* @__PURE__ */ jsxs10(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size ?? DEFAULT_ICON_SIZE,
+      height: size ?? DEFAULT_ICON_SIZE,
+      viewBox: "0 0 17 17",
+      fill: "none",
+      children: [
+        /* @__PURE__ */ jsx20(
+          "path",
+          {
+            d: "M7.28923 2.58765H2.62256V7.25431H7.28923V2.58765Z",
+            stroke: color ?? "#3B3C3F",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ jsx20(
+          "path",
+          {
+            d: "M14.6225 2.58765H9.95581V7.25431H14.6225V2.58765Z",
+            stroke: color ?? "#3B3C3F",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ jsx20(
+          "path",
+          {
+            d: "M14.6225 9.9209H9.95581V14.5876H14.6225V9.9209Z",
+            stroke: color ?? "#3B3C3F",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ jsx20(
+          "path",
+          {
+            d: "M7.28923 9.9209H2.62256V14.5876H7.28923V9.9209Z",
+            stroke: color ?? "#3B3C3F",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        )
+      ]
+    }
+  );
+};
+var Lucide2LayoutGrid_default = Lucide2LayoutGrid;
+
+// packages/Icons/Lucide2LayoutListIcon.tsx
+import { jsx as jsx21, jsxs as jsxs11 } from "react/jsx-runtime";
+var Lucide2LayoutListIcon = ({ color, size, ...props }) => {
+  return /* @__PURE__ */ jsxs11(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size ?? DEFAULT_ICON_SIZE,
+      height: size ?? DEFAULT_ICON_SIZE,
+      viewBox: "0 0 17 17",
+      fill: "none",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx21(
+          "path",
+          {
+            d: "M7.28923 9.9209H2.62256V14.5876H7.28923V9.9209Z",
+            stroke: color ?? "#3B3C3F",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ jsx21(
+          "path",
+          {
+            d: "M7.28923 2.58765H2.62256V7.25431H7.28923V2.58765Z",
+            stroke: color ?? "#3B3C3F",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ jsx21(
+          "path",
+          {
+            d: "M9.95581 3.25439H14.6225",
+            stroke: color ?? "#3B3C3F",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ jsx21(
+          "path",
+          {
+            d: "M9.95581 6.58765H14.6225",
+            stroke: color ?? "#3B3C3F",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ jsx21(
+          "path",
+          {
+            d: "M9.95581 10.5876H14.6225",
+            stroke: color ?? "#3B3C3F",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ jsx21(
+          "path",
+          {
+            d: "M9.95581 13.9209H14.6225",
+            stroke: color ?? "#3B3C3F",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        )
+      ]
+    }
+  );
+};
+var Lucide2LayoutListIcon_default = Lucide2LayoutListIcon;
+
+// packages/Ecommerce/Categories/index.tsx
+import { jsx as jsx22, jsxs as jsxs12 } from "react/jsx-runtime";
+var CategoriesPage = ({
+  initialLayout = "GRID",
+  brandData,
+  children,
+  onFilterConfirm,
+  onLayoutChange
+}) => {
+  const [layout, setLayout] = useState7(initialLayout);
+  const handleGridSelect = useCallback4(() => {
+    setLayout("GRID");
+    onLayoutChange?.("GRID");
+  }, [onLayoutChange]);
+  const handleListSelect = useCallback4(() => {
+    setLayout("LIST");
+    onLayoutChange?.("LIST");
+  }, [onLayoutChange]);
+  return /* @__PURE__ */ jsxs12(
+    "main",
+    {
+      className: cn(
+        "flex flex-[1_0_0] flex-col overflow-clip",
+        "items-start",
+        "gap-y-8",
+        "rounded-2xl bg-ui-surface-50 shadow-ui-overlay"
+      ),
+      children: [
+        /* @__PURE__ */ jsxs12(
+          "section",
+          {
+            className: cn("flex flex-col", "items-stretch gap-y-4", "h-fit w-full", "px-6 py-4"),
+            children: [
+              /* @__PURE__ */ jsxs12("div", { className: "flex h-fit w-full flex-col gap-y-0", children: [
+                /* @__PURE__ */ jsxs12("div", { className: "flex items-center justify-between py-1", children: [
+                  /* @__PURE__ */ jsx22("h3", { className: "text-ui-h3 font-semibold text-ui-text-950", children: "T\u1EA5t c\u1EA3 s\u1EA3n ph\u1EA9m" }),
+                  /* @__PURE__ */ jsxs12("div", { className: "flex size-fit items-center gap-x-2", children: [
+                    /* @__PURE__ */ jsx22("button", { onClick: handleGridSelect, children: /* @__PURE__ */ jsx22(Lucide2LayoutGrid_default, { size: 16, color: layout === "GRID" ? "#18181B" : "#D4D4D8" }) }),
+                    /* @__PURE__ */ jsx22("button", { onClick: handleListSelect, children: /* @__PURE__ */ jsx22(
+                      Lucide2LayoutListIcon_default,
+                      {
+                        size: 16,
+                        color: layout === "LIST" ? "#18181B" : "#D4D4D8"
+                      }
+                    ) })
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsx22("div", { className: "h-2 w-full bg-ui-line" })
+              ] }),
+              /* @__PURE__ */ jsx22(BrandProvider_default, { children: /* @__PURE__ */ jsx22(PriceProvider_default, { children: /* @__PURE__ */ jsxs12("div", { className: "grid grid-cols-3 gap-x-6 p-0", children: [
+                /* @__PURE__ */ jsxs12("div", { className: "flex grow flex-col gap-y-1", children: [
+                  /* @__PURE__ */ jsx22("p", { className: "text-ui-small-note font-medium text-ui-text-800", children: "Th\u01B0\u01A1ng hi\u1EC7u" }),
+                  /* @__PURE__ */ jsxs12("div", { className: "flex h-full w-full flex-wrap gap-2 border-r border-ui-border-400", children: [
+                    /* @__PURE__ */ jsx22(BrandDisplay_default, {}),
+                    /* @__PURE__ */ jsx22(BrandModal_default, { data: brandData })
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxs12("div", { className: "flex grow flex-col gap-y-1", children: [
+                  /* @__PURE__ */ jsx22("p", { className: "text-ui-small-note font-medium text-ui-text-800", children: "Kho\u1EA3ng gi\xE1" }),
+                  /* @__PURE__ */ jsx22("div", { className: "flex size-full flex-wrap items-start gap-2 border-r border-ui-border-400", children: /* @__PURE__ */ jsx22(PricePopover_default, {}) })
+                ] }),
+                /* @__PURE__ */ jsx22("div", { className: "flex h-fit items-end justify-between gap-x-4", children: /* @__PURE__ */ jsx22(AcceptBtn_default, { onFilterConfirm }) })
+              ] }) }) })
+            ]
+          }
+        ),
+        children
+      ]
+    }
+  );
+};
+var Categories_default = CategoriesPage;
+export {
+  Categories_default as default
+};