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

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

@@ -5,7 +5,7 @@ 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;
+    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/Command/index.d.ts

@@ -8,7 +8,7 @@ declare const Command: React.ForwardRefExoticComponent<Omit<{
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
+}, "key" | "asChild" | keyof React.HTMLAttributes<HTMLDivElement>> & {
     label?: string;
     shouldFilter?: boolean;
     filter?: (value: string, search: string, keywords?: string[]) => number;
@@ -26,7 +26,7 @@ declare const CommandInput: React.ForwardRefExoticComponent<Omit<Omit<Pick<Pick<
     ref?: React.Ref<HTMLInputElement>;
 } & {
     asChild?: boolean;
-}, "key" | "asChild" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "onChange" | "type" | "value"> & {
+}, "key" | "asChild" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "type" | "value" | "onChange"> & {
     value?: string;
     onValueChange?: (search: string) => void;
 } & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
@@ -36,7 +36,7 @@ declare const CommandList: React.ForwardRefExoticComponent<Omit<{
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
+}, "key" | "asChild" | keyof React.HTMLAttributes<HTMLDivElement>> & {
     label?: string;
 } & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const CommandEmpty: React.ForwardRefExoticComponent<Omit<{
@@ -45,14 +45,14 @@ declare const CommandEmpty: React.ForwardRefExoticComponent<Omit<{
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+}, "key" | "asChild" | keyof React.HTMLAttributes<HTMLDivElement>> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const CommandGroup: React.ForwardRefExoticComponent<Omit<{
     children?: React.ReactNode;
 } & Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild">, "value" | "heading"> & {
+}, "key" | "asChild" | keyof React.HTMLAttributes<HTMLDivElement>>, "value" | "heading"> & {
     heading?: React.ReactNode;
     value?: string;
     forceMount?: boolean;
@@ -61,7 +61,7 @@ declare const CommandSeparator: React.ForwardRefExoticComponent<Omit<Pick<Pick<R
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
+}, "key" | "asChild" | keyof React.HTMLAttributes<HTMLDivElement>> & {
     alwaysRender?: boolean;
 } & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const CommandItem: React.ForwardRefExoticComponent<Omit<{
@@ -70,7 +70,7 @@ declare const CommandItem: React.ForwardRefExoticComponent<Omit<{
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild">, "onSelect" | "disabled" | "value"> & {
+}, "key" | "asChild" | keyof React.HTMLAttributes<HTMLDivElement>>, "disabled" | "value" | "onSelect"> & {
     disabled?: boolean;
     onSelect?: (value: string) => void;
     value?: string;

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/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

@@ -400,12 +400,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 +413,7 @@ var AvatarIcon = (props) => {
       height: size ?? DEFAULT_ICON_SIZE,
       viewBox: "0 0 96 96",
       fill: "none",
-      ...props,
+      ...Props,
       children: [
         /* @__PURE__ */ jsx4(
           "path",
@@ -583,38 +582,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 +912,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

@@ -1271,6 +1271,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 +1304,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 +1659,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 +1672,7 @@ var AvatarIcon = (props) => {
       height: size ?? DEFAULT_ICON_SIZE,
       viewBox: "0 0 96 96",
       fill: "none",
-      ...props,
+      ...Props,
       children: [
         /* @__PURE__ */ jsx20(
           "path",
@@ -1840,33 +1841,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 +2033,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 +2047,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 +2157,8 @@ var UserSheet = ({
           }
         }
       ) })
-    ] })
+    ] }),
+    /* @__PURE__ */ jsx28(VisuallyHidden2, { children: /* @__PURE__ */ jsx28(SheetTitle, {}) })
   ] });
 };
 var UserSheet_default = memo8(UserSheet);
@@ -2184,7 +2183,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-i",
   "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",