@customafk/lunas-ui 0.0.2 → 0.0.3-a

package/dist/Molecules/AuthenForm/index.js

@@ -931,9 +931,9 @@ var Button_default = Button;
 // packages/Atoms/Form/index.tsx
 import * as React2 from "react";
 import {
-  Controller as ControllerBase,
-  FormProvider as FormProviderBase,
-  useFormContext as useFormContextBase
+  Controller,
+  FormProvider,
+  useFormContext
 } from "react-hook-form";
 
 // packages/Atoms/Label/index.tsx
@@ -950,17 +950,17 @@ Label.displayName = LabelPrimitive.Root.displayName;
 // packages/Atoms/Form/index.tsx
 import { Slot as Slot2 } from "@radix-ui/react-slot";
 import { jsx as jsx12 } from "react/jsx-runtime";
-var Form = FormProviderBase;
+var Form = FormProvider;
 var FormFieldContext = React2.createContext({});
 var FormField = ({
   ...props
 }) => {
-  return /* @__PURE__ */ jsx12(FormFieldContext.Provider, { value: { name: props.name }, children: /* @__PURE__ */ jsx12(ControllerBase, { ...props }) });
+  return /* @__PURE__ */ jsx12(FormFieldContext.Provider, { value: { name: props.name }, children: /* @__PURE__ */ jsx12(Controller, { ...props }) });
 };
 var useFormField = () => {
   const fieldContext = React2.useContext(FormFieldContext);
   const itemContext = React2.useContext(FormItemContext);
-  const { getFieldState, formState } = useFormContextBase();
+  const { getFieldState, formState } = useFormContext();
   const fieldState = getFieldState(fieldContext.name, formState);
   if (!fieldContext) {
     throw new Error("useFormField should be used within <FormField>");
@@ -977,55 +977,64 @@ var useFormField = () => {
 };
 var FormItemContext = React2.createContext({});
 var FormItem = React2.forwardRef(
-  ({ className, ...props }, reference) => {
+  ({ className, ...props }, ref) => {
     const id = React2.useId();
-    return /* @__PURE__ */ jsx12(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ jsx12("div", { ref: reference, className: cn("space-y-2", className), ...props }) });
+    return /* @__PURE__ */ jsx12(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ jsx12("div", { ref, className: cn("space-y-2", className), ...props }) });
   }
 );
 FormItem.displayName = "FormItem";
-var FormLabel = React2.forwardRef(({ className, ...props }, reference) => {
+var FormLabel = React2.forwardRef(({ className, ...props }, ref) => {
   const { error, formItemId } = useFormField();
   return /* @__PURE__ */ jsx12(
     Label,
     {
-      ref: reference,
-      className: cn(error && "text-destructive", className),
+      ref,
+      className: cn(error && "text-ui-destructive-500", className),
       htmlFor: formItemId,
       ...props
     }
   );
 });
 FormLabel.displayName = "FormLabel";
-var FormControl = React2.forwardRef(({ ...props }, reference) => {
-  const { formItemId } = useFormField();
-  return /* @__PURE__ */ jsx12(Slot2, { ref: reference, id: formItemId, ...props });
+var FormControl = React2.forwardRef(({ ...props }, ref) => {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
+  return /* @__PURE__ */ jsx12(
+    Slot2,
+    {
+      ref,
+      id: formItemId,
+      "aria-describedby": !error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`,
+      "aria-invalid": !!error,
+      ...props
+    }
+  );
 });
 FormControl.displayName = "FormControl";
-var FormDescription = React2.forwardRef(({ className, ...props }, reference) => {
+var FormDescription = React2.forwardRef(({ className, ...props }, ref) => {
   const { formDescriptionId } = useFormField();
   return /* @__PURE__ */ jsx12(
     "p",
     {
-      ref: reference,
+      ref,
       id: formDescriptionId,
-      className: cn("text-muted-foreground text-sm", className),
+      className: cn("text-sm text-ui-text-500", className),
       ...props
     }
   );
 });
 FormDescription.displayName = "FormDescription";
-var FormMessage = React2.forwardRef(({ className, children, ...props }, reference) => {
+var FormMessage = React2.forwardRef(({ className, children, ...props }, ref) => {
   const { error, formMessageId } = useFormField();
   const body = error ? String(error?.message) : children;
   if (!body) {
-    return void 0;
+    return null;
   }
   return /* @__PURE__ */ jsx12(
     "p",
     {
-      ref: reference,
+      ref,
       id: formMessageId,
-      className: cn("text-destructive text-sm font-medium", className),
+      className: cn("text-sm font-medium text-ui-destructive-500", className),
       ...props,
       children: body
     }

package/dist/Molecules/Search/index.js

@@ -253,7 +253,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;
@@ -276,7 +275,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,
@@ -284,43 +283,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" })
+        ] })
+      ]
     }
   )
 ] }));
@@ -355,6 +340,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";
@@ -371,25 +357,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" }),
@@ -902,7 +891,7 @@ var Flex_default = Flex;
 
 // packages/Molecules/Search/index.tsx
 import { CommandLoading } from "cmdk";
-import { motion as motion2 } from "framer-motion";
+import { motion } from "framer-motion";
 import { Fragment, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 var Search2 = ({ search = "", isLoading = false, items = [], onSearch }) => {
   const [open, setOpen] = useState(false);
@@ -932,13 +921,13 @@ var Search2 = ({ search = "", isLoading = false, items = [], onSearch }) => {
         py: "1",
         width: "fit",
         gapX: "2",
-        className: "mr-8 border rounded-lg border-neutral-200 bg-ui-surface-50 hover:cursor-pointer hover:bg-ui-surface-100",
+        className: "mr-8 rounded-lg border border-neutral-200 bg-ui-surface-50 hover:cursor-pointer hover:bg-ui-surface-100",
         onClick: handleOpen,
         children: [
           /* @__PURE__ */ jsx4("p", { className: "pt-0.5 text-ui-small-note font-medium text-ui-text-500", children: "T\xECm ki\u1EBFm s\u1EA3n ph\u1EA9m, th\u01B0\u01A1ng hi\u1EC7u,..." }),
           /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-x-1 rounded-md bg-ui-surface-200 px-2 py-0.5 text-ui-small-note", children: [
             isMac ? /* @__PURE__ */ jsx4("kbd", { className: "mt-0.5 h-4", children: "\u2318" }) : /* @__PURE__ */ jsx4("kbd", { className: "mt-0.5 h-3 font-semibold", children: "^" }),
-            /* @__PURE__ */ jsx4("span", { className: "font-medium text-ui-small-note", children: "K" })
+            /* @__PURE__ */ jsx4("span", { className: "text-ui-small-note font-medium", children: "K" })
           ] })
         ]
       }
@@ -953,9 +942,9 @@ var Search2 = ({ search = "", isLoading = false, items = [], onSearch }) => {
         }
       ),
       /* @__PURE__ */ jsxs3(CommandList, { children: [
-        !isLoading && /* @__PURE__ */ jsx4(CommandEmpty, { className: "flex items-center justify-center px-4 h-52", children: /* @__PURE__ */ jsx4("span", { className: "font-medium text-ui-text-800", children: "Kh\xF4ng c\xF3 k\u1EBFt qu\u1EA3" }) }),
-        isLoading ? /* @__PURE__ */ jsx4(CommandLoading, { className: "flex items-center justify-center h-52", children: /* @__PURE__ */ jsx4(
-          motion2.div,
+        !isLoading && /* @__PURE__ */ jsx4(CommandEmpty, { className: "flex h-52 items-center justify-center px-4", children: /* @__PURE__ */ jsx4("span", { className: "font-medium text-ui-text-800", children: "Kh\xF4ng c\xF3 k\u1EBFt qu\u1EA3" }) }),
+        isLoading ? /* @__PURE__ */ jsx4(CommandLoading, { className: "flex h-52 items-center justify-center", children: /* @__PURE__ */ jsx4(
+          motion.div,
           {
             animate: {
               scale: [1, 2, 2, 1, 1],
@@ -969,7 +958,7 @@ var Search2 = ({ search = "", isLoading = false, items = [], onSearch }) => {
               repeat: Infinity,
               repeatDelay: 1
             },
-            className: "rounded-full box size-16 bg-neutral-200"
+            className: "box size-16 rounded-full bg-neutral-200"
           }
         ) }) : /* @__PURE__ */ jsx4(CommandGroup, { children: items.map((item, index) => /* @__PURE__ */ jsx4(CommandItem, { value: item.value, children: item.component }, index)) })
       ] })

package/dist/Molecules/UserDropdown/index.js

@@ -289,9 +289,10 @@ var cn = (...inputs) => {
 
 // packages/Atoms/XButton/index.tsx
 import { jsx as jsx2 } from "react/jsx-runtime";
-var XButton = ({ isDisabled, onClick }) => {
+var XButton = ({ isButton = true, isDisabled, onClick }) => {
+  const Comp = isButton ? "button" : "div";
   return /* @__PURE__ */ jsx2(
-    "button",
+    Comp,
     {
       disabled: isDisabled,
       className: cn(
@@ -363,7 +364,20 @@ var SheetContent = forwardRef(
         ...props,
         children: [
           children,
-          /* @__PURE__ */ jsx3(SheetPrimitive.Close, { className: "absolute right-4 top-4", children: /* @__PURE__ */ jsx3(XButton_default, {}) })
+          /* @__PURE__ */ jsx3(
+            SheetPrimitive.Close,
+            {
+              className: cn(
+                "absolute right-4 top-4",
+                "rounded-full",
+                "enabled:hover:bg-ui-surface-100",
+                "enabled:hover:text-ui-text-700",
+                "enabled:active:bg-ui-surface-200",
+                "enabled:active:text-ui-text-900"
+              ),
+              children: /* @__PURE__ */ jsx3(XButton_default, { isButton: false })
+            }
+          )
         ]
       }
     )
@@ -400,12 +414,11 @@ var SheetDescription = forwardRef(({ className, ...props }, ref) => /* @__PURE__
 SheetDescription.displayName = SheetPrimitive.Description.displayName;
 
 // packages/Atoms/UserAvatar/index.tsx
-import { forwardRef as forwardRef2, memo as memo2 } from "react";
+import { memo as memo2 } from "react";
 
 // packages/Icons/AvatarIcon.tsx
 import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
-var AvatarIcon = (props) => {
-  const { bgColor, color, size } = props;
+var AvatarIcon = ({ bgColor, color, size, ...Props }) => {
   return /* @__PURE__ */ jsxs2(
     "svg",
     {
@@ -414,7 +427,7 @@ var AvatarIcon = (props) => {
       height: size ?? DEFAULT_ICON_SIZE,
       viewBox: "0 0 96 96",
       fill: "none",
-      ...props,
+      ...Props,
       children: [
         /* @__PURE__ */ jsx4(
           "path",
@@ -583,38 +596,34 @@ var color_hash_default = colorHash;
 
 // packages/Atoms/UserAvatar/index.tsx
 import { jsx as jsx5 } from "react/jsx-runtime";
-var UserAvatar = memo2(
-  forwardRef2(
-    ({ fullname, email, src: source, size, isButton = true }, reference) => {
-      return /* @__PURE__ */ jsx5(
-        "button",
+var UserAvatar = memo2(({ fullname, email, src: source, size, isButton = true }) => {
+  const Comp = isButton ? "button" : "div";
+  return /* @__PURE__ */ jsx5(
+    Comp,
+    {
+      disabled: !isButton,
+      className: cn(
+        "flex size-fit items-center justify-center rounded-full transition-all duration-300",
+        "enabled:hover:shadow-ui-flat",
+        "enabled:hover:scale-110"
+      ),
+      children: source ? /* @__PURE__ */ jsx5(AvatarIcon_default, { bgColor: color_hash_default.hex(fullname + email), size }) : /* @__PURE__ */ jsx5(
+        "img",
         {
-          disabled: !isButton,
-          ref: reference,
-          className: cn(
-            "flex size-fit items-center justify-center rounded-full transition-all duration-300",
-            "enabled:hover:shadow-ui-flat",
-            "enabled:hover:scale-110"
-          ),
-          children: source ? /* @__PURE__ */ jsx5(
-            "img",
-            {
-              style: { width: size, height: size },
-              className: cn("rounded-full object-fill"),
-              src: source,
-              alt: fullname
-            }
-          ) : /* @__PURE__ */ jsx5(AvatarIcon_default, { bgColor: color_hash_default.hex(fullname + email), size })
+          style: { width: size, height: size },
+          className: cn("rounded-full object-contain"),
+          src: source,
+          alt: fullname
         }
-      );
+      )
     }
-  )
-);
+  );
+});
 UserAvatar.displayName = "UserAvatar";
 var UserAvatar_default = UserAvatar;
 
 // packages/Layout/Flex/index.tsx
-import { forwardRef as forwardRef3, memo as memo3, useMemo } from "react";
+import { forwardRef as forwardRef2, memo as memo3, useMemo } from "react";
 
 // packages/Layout/Flex/flexVariant.ts
 import { cva as cva2 } from "class-variance-authority";
@@ -917,7 +926,7 @@ var commonLayout = cva3("", {
 // packages/Layout/Flex/index.tsx
 import { jsx as jsx6 } from "react/jsx-runtime";
 var Flex = memo3(
-  forwardRef3(
+  forwardRef2(
     ({
       vertical = false,
       wrap = "nowrap",

package/dist/Organisms/Header/index.d.ts

@@ -1,24 +1,46 @@
 import { ReactNode, FC } from 'react';
-import { T as TUser, a as TUserSettingSelect } from '../../types-BgHhiNa-.js';
+import { T as TUser, a as TUserSettingSelect } from '../../types-BlE003QY.js';
+
+interface ICategory {
+    uuid: string;
+    name: string;
+    slug: string;
+    url?: string;
+    description?: string;
+    sub: {
+        uuid: string;
+        name: string;
+        slug: string;
+        url?: string;
+        description?: string;
+    }[];
+}
 
 type THeaderNav = 'CATEGORY' | 'SERIES' | 'GUIDE' | 'NEWS' | null;
 interface IHeaderProps {
     user?: TUser;
     search?: string;
     isLoading?: boolean;
+    hasNewCart?: boolean;
     items?: {
         value: string;
         component: ReactNode;
     }[];
-    hasNewCart?: boolean;
-    cartContent?: ReactNode;
+    cartOrder?: ReactNode;
+    cartInStock?: ReactNode;
+    activeUserNav?: 'PROFILE' | 'SECURITY' | 'NOTIFICATION' | 'RESERVATION' | 'ADDRESS' | 'LOGOUT';
+    categories: ICategory[];
+    cartsAmountTotal?: number;
     className?: string;
     onSignIn?: () => void;
     onSignUp?: () => void;
     onSearch?: (value: string) => void;
     onSettingSelected?: (value: TUserSettingSelect) => void;
+    onShowAllProduct?: () => void;
     onCartCheckout?: () => void;
     onCartShowAll?: () => void;
+    onCartTypeSelected?: (value: 'ORDER' | 'IN_STOCK') => void;
+    onCategorySelected?: (slug: string) => void;
 }
 declare const Header: FC<IHeaderProps>;