@customafk/lunas-ui 0.0.2-h → 0.0.2-j

package/dist/Atoms/Avatar/index.js

@@ -10,8 +10,7 @@ var DEFAULT_ICON_SIZE = 24;
 
 // packages/Icons/AvatarIcon.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
-var AvatarIcon = (props) => {
-  const { bgColor, color, size } = props;
+var AvatarIcon = ({ bgColor, color, size, ...Props }) => {
   return /* @__PURE__ */ jsxs(
     "svg",
     {
@@ -20,7 +19,7 @@ var AvatarIcon = (props) => {
       height: size ?? DEFAULT_ICON_SIZE,
       viewBox: "0 0 96 96",
       fill: "none",
-      ...props,
+      ...Props,
       children: [
         /* @__PURE__ */ jsx(
           "path",

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

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

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

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { FC } from 'react';
 
 interface IProps {
     readonly fullname: string;
@@ -7,6 +7,6 @@ interface IProps {
     readonly size?: number;
     readonly isButton?: boolean;
 }
-declare const UserAvatar: React.MemoExoticComponent<React.ForwardRefExoticComponent<IProps & React.RefAttributes<HTMLButtonElement>>>;
+declare const UserAvatar: FC<IProps>;
 
 export { UserAvatar as default };

package/dist/Atoms/UserAvatar/index.js

@@ -3,15 +3,14 @@ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { en
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 
 // packages/Atoms/UserAvatar/index.tsx
-import { forwardRef, memo } from "react";
+import { memo } 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;
+var AvatarIcon = ({ bgColor, color, size, ...Props }) => {
   return /* @__PURE__ */ jsxs(
     "svg",
     {
@@ -20,7 +19,7 @@ var AvatarIcon = (props) => {
       height: size ?? DEFAULT_ICON_SIZE,
       viewBox: "0 0 96 96",
       fill: "none",
-      ...props,
+      ...Props,
       children: [
         /* @__PURE__ */ jsx(
           "path",
@@ -433,33 +432,29 @@ var cn = (...inputs) => {
 
 // packages/Atoms/UserAvatar/index.tsx
 import { jsx as jsx2 } from "react/jsx-runtime";
-var UserAvatar = memo(
-  forwardRef(
-    ({ fullname, email, src: source, size, isButton = true }, reference) => {
-      return /* @__PURE__ */ jsx2(
-        "button",
+var UserAvatar = memo(({ fullname, email, src: source, size, isButton = true }) => {
+  const Comp = isButton ? "button" : "div";
+  return /* @__PURE__ */ jsx2(
+    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__ */ jsx2(
+        "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__ */ jsx2(
-            "img",
-            {
-              style: { width: size, height: size },
-              className: cn("rounded-full object-fill"),
-              src: source,
-              alt: fullname
-            }
-          ) : /* @__PURE__ */ jsx2(AvatarIcon_default, { bgColor: color_hash_default.hex(fullname + email), size })
+          style: { width: size, height: size },
+          className: cn("rounded-full object-fill"),
+          src: source,
+          alt: fullname
         }
-      );
+      ) : /* @__PURE__ */ jsx2(AvatarIcon_default, { bgColor: color_hash_default.hex(fullname + email), size })
     }
-  )
-);
+  );
+});
 UserAvatar.displayName = "UserAvatar";
 var UserAvatar_default = UserAvatar;
 export {

package/dist/Authentication/ThankYou/index.js

@@ -812,10 +812,19 @@ var ThankYou = () => {
       ] }),
       /* @__PURE__ */ jsx6("p", { className: "text-ui-note font-light text-ui-text-700", children: "Ch\xFAng t\xF4i \u0111\xE3 g\u1EEDi email x\xE1c nh\u1EADn t\u1EDBi \u0111\u1ECBa ch\u1EC9 c\u1EE7a b\u1EA1n. Vui l\xF2ng ki\u1EC3m tra h\u1ED9p th\u01B0 v\xE0 l\xE0m theo h\u01B0\u1EDBng d\u1EABn \u0111\u1EC3 k\xEDch ho\u1EA1t t\xE0i kho\u1EA3n." }),
       /* @__PURE__ */ jsx6("p", { className: "text-ui-note font-light text-ui-text-400", children: "N\u1EBFu b\u1EA1n kh\xF4ng th\u1EA5y email x\xE1c nh\u1EADn, h\xE3y ki\u1EC3m tra trong m\u1EE5c \u201CTh\u01B0 r\xE1c\u201D ho\u1EB7c \u201CQu\u1EA3ng c\xE1o\u201D c\u1EE7a b\u1EA1n." }),
-      /* @__PURE__ */ jsx6(Flex_default, { py: "2", pr: "2", children: /* @__PURE__ */ jsx6("a", { href: "https://gmail.com", target: "_blank", rel: "noreferrer", children: /* @__PURE__ */ jsxs2(Button_default, { className: "rounded-sm", children: [
-        /* @__PURE__ */ jsx6(Lucide2MailIcon_default, { color: "currentColor" }),
-        /* @__PURE__ */ jsx6("span", { children: "Ki\u1EC3m tra email" })
-      ] }) }) })
+      /* @__PURE__ */ jsx6(Flex_default, { py: "2", pr: "2", children: /* @__PURE__ */ jsx6(
+        "a",
+        {
+          href: "https://gmail.com",
+          target: "_blank",
+          rel: "noreferrer",
+          onClick: () => window.close(),
+          children: /* @__PURE__ */ jsxs2(Button_default, { className: "rounded-sm", children: [
+            /* @__PURE__ */ jsx6(Lucide2MailIcon_default, { color: "currentColor" }),
+            /* @__PURE__ */ jsx6("span", { children: "Ki\u1EC3m tra email" })
+          ] })
+        }
+      ) })
     ] }),
     /* @__PURE__ */ jsxs2(Flex_default, { vertical: true, width: "full", px: "2", gapY: "1", align: "start", children: [
       /* @__PURE__ */ jsx6(Separator, { className: "mb-2" }),

package/dist/Icons/index.d.ts

@@ -3,7 +3,7 @@ import { I as IIconProps } from '../types-BgHhiNa-.js';
 import { FC } from 'react';
 
 declare const AvatarIcon: {
-    (props: IIconProps): react_jsx_runtime.JSX.Element;
+    ({ bgColor, color, size, ...Props }: IIconProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 

package/dist/Icons/index.js

@@ -3,8 +3,7 @@ var DEFAULT_ICON_SIZE = 24;
 
 // packages/Icons/AvatarIcon.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
-var AvatarIcon = (props) => {
-  const { bgColor, color, size } = props;
+var AvatarIcon = ({ bgColor, color, size, ...Props }) => {
   return /* @__PURE__ */ jsxs(
     "svg",
     {
@@ -13,7 +12,7 @@ var AvatarIcon = (props) => {
       height: size ?? DEFAULT_ICON_SIZE,
       viewBox: "0 0 96 96",
       fill: "none",
-      ...props,
+      ...Props,
       children: [
         /* @__PURE__ */ jsx(
           "path",

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(
+        "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-fill"),
+          src: source,
+          alt: fullname
         }
-      );
+      ) : /* @__PURE__ */ jsx5(AvatarIcon_default, { bgColor: color_hash_default.hex(fullname + email), size })
     }
-  )
-);
+  );
+});
 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.js

@@ -1137,9 +1137,10 @@ var Lucide2XIcon_default = Lucide2XIcon;
 
 // packages/Atoms/XButton/index.tsx
 import { jsx as jsx12 } from "react/jsx-runtime";
-var XButton = ({ isDisabled, onClick }) => {
+var XButton = ({ isButton = true, isDisabled, onClick }) => {
+  const Comp = isButton ? "button" : "div";
   return /* @__PURE__ */ jsx12(
-    "button",
+    Comp,
     {
       disabled: isDisabled,
       className: cn(
@@ -1211,7 +1212,20 @@ var SheetContent = forwardRef5(
         ...props,
         children: [
           children,
-          /* @__PURE__ */ jsx13(SheetPrimitive.Close, { className: "absolute right-4 top-4", children: /* @__PURE__ */ jsx13(XButton_default, {}) })
+          /* @__PURE__ */ jsx13(
+            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__ */ jsx13(XButton_default, { isButton: false })
+            }
+          )
         ]
       }
     )
@@ -1271,6 +1285,7 @@ var Lucide2FillCartIcon = ({ color, size }) => {
 var Lucide2FillCartIcon_default = Lucide2FillCartIcon;
 
 // packages/Molecules/CartSheet/index.tsx
+import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
 import { jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
 var CartSheet = ({
   isNew,
@@ -1303,7 +1318,8 @@ var CartSheet = ({
           /* @__PURE__ */ jsx15(Button_default, { className: "px-5 py-3", onClick: onCheckout, children: "Thanh to\xE1n" })
         ] })
       ] })
-    ] }) })
+    ] }) }),
+    /* @__PURE__ */ jsx15(VisuallyHidden, { children: /* @__PURE__ */ jsx15(SheetTitle, {}) })
   ] });
 };
 var CartSheet_default = memo5(CartSheet);
@@ -1657,12 +1673,11 @@ var MenuItem = ({
 var MenuItem_default = memo6(MenuItem);
 
 // packages/Atoms/UserAvatar/index.tsx
-import { forwardRef as forwardRef8, memo as memo7 } from "react";
+import { memo as memo7 } from "react";
 
 // packages/Icons/AvatarIcon.tsx
 import { jsx as jsx20, jsxs as jsxs14 } from "react/jsx-runtime";
-var AvatarIcon = (props) => {
-  const { bgColor, color, size } = props;
+var AvatarIcon = ({ bgColor, color, size, ...Props }) => {
   return /* @__PURE__ */ jsxs14(
     "svg",
     {
@@ -1671,7 +1686,7 @@ var AvatarIcon = (props) => {
       height: size ?? DEFAULT_ICON_SIZE,
       viewBox: "0 0 96 96",
       fill: "none",
-      ...props,
+      ...Props,
       children: [
         /* @__PURE__ */ jsx20(
           "path",
@@ -1840,33 +1855,29 @@ var color_hash_default = colorHash;
 
 // packages/Atoms/UserAvatar/index.tsx
 import { jsx as jsx21 } from "react/jsx-runtime";
-var UserAvatar = memo7(
-  forwardRef8(
-    ({ fullname, email, src: source, size, isButton = true }, reference) => {
-      return /* @__PURE__ */ jsx21(
-        "button",
+var UserAvatar = memo7(({ fullname, email, src: source, size, isButton = true }) => {
+  const Comp = isButton ? "button" : "div";
+  return /* @__PURE__ */ jsx21(
+    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__ */ jsx21(
+        "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__ */ jsx21(
-            "img",
-            {
-              style: { width: size, height: size },
-              className: cn("rounded-full object-fill"),
-              src: source,
-              alt: fullname
-            }
-          ) : /* @__PURE__ */ jsx21(AvatarIcon_default, { bgColor: color_hash_default.hex(fullname + email), size })
+          style: { width: size, height: size },
+          className: cn("rounded-full object-fill"),
+          src: source,
+          alt: fullname
         }
-      );
+      ) : /* @__PURE__ */ jsx21(AvatarIcon_default, { bgColor: color_hash_default.hex(fullname + email), size })
     }
-  )
-);
+  );
+});
 UserAvatar.displayName = "UserAvatar";
 var UserAvatar_default = UserAvatar;
 
@@ -2036,6 +2047,7 @@ Lucide2UserIcon.displayName = "Lucide2UserIcon";
 var Lucide2UserIcon_default = Lucide2UserIcon;
 
 // packages/Molecules/UserSheet/index.tsx
+import { VisuallyHidden as VisuallyHidden2 } from "@radix-ui/react-visually-hidden";
 import { Fragment as Fragment2, jsx as jsx28, jsxs as jsxs16 } from "react/jsx-runtime";
 var UserSheet = ({
   initialActiveItem,
@@ -2049,7 +2061,7 @@ var UserSheet = ({
     setActiveItem(initialActiveItem);
   }, [initialActiveItem]);
   return /* @__PURE__ */ jsxs16(Sheet, { children: [
-    /* @__PURE__ */ jsx28(SheetTrigger, { className: "rounded-full border border-ui-border-200", children: /* @__PURE__ */ jsx28(UserAvatar_default, { fullname, email, src: avatar, size: 36 }) }),
+    /* @__PURE__ */ jsx28(SheetTrigger, { className: "rounded-full border border-ui-border-200", children: /* @__PURE__ */ jsx28(UserAvatar_default, { isButton: false, fullname, email, src: avatar, size: 36 }) }),
     /* @__PURE__ */ jsxs16(SheetContent, { className: "w-64", children: [
       /* @__PURE__ */ jsx28(Flex_default, { vertical: true, gapY: "3", width: "full", px: "6", pt: "6", pb: "4", align: "start", children: !fullname || !email ? /* @__PURE__ */ jsxs16(Fragment2, { children: [
         /* @__PURE__ */ jsx28(Skeleton, { className: "size-16 rounded-full" }),
@@ -2159,7 +2171,8 @@ var UserSheet = ({
           }
         }
       ) })
-    ] })
+    ] }),
+    /* @__PURE__ */ jsx28(VisuallyHidden2, { children: /* @__PURE__ */ jsx28(SheetTitle, {}) })
   ] });
 };
 var UserSheet_default = memo8(UserSheet);
@@ -2184,7 +2197,7 @@ var Header = memo9((props) => {
     "header",
     {
       className: cn(
-        "relative flex h-fit w-full items-center justify-start bg-ui-surface-50 py-2 pl-8 pr-4 shadow-ui-sticky-nav",
+        "relative flex h-fit min-h-[3.375rem] w-full items-center justify-start bg-ui-surface-50 py-2 pl-8 pr-4 shadow-ui-sticky-nav",
         className
       ),
       children: [

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@customafk/lunas-ui",
   "private": false,
-  "version": "0.0.2-h",
+  "version": "0.0.2-j",
   "type": "module",
   "homepage": "https://docs.customafk.com",
   "repository": {
@@ -308,6 +308,7 @@
     "@radix-ui/react-slider": "^1.2.1",
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-switch": "^1.1.1",
+    "@radix-ui/react-visually-hidden": "^1.1.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "cmdk": "^1.0.0",