@szum-tech/design-system 2.0.4 → 2.1.0

package/dist/chunk-C5YRMEKV.js

@@ -0,0 +1,319 @@
+import { LoadingIcon } from './chunk-INJBKPIE.js';
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var buttonCva = cva(
+  [
+    "inline-flex cursor-pointer items-center justify-center align-middle no-underline transition-colors duration-300 ease-in-out",
+    "select-none appearance-none rounded-sm border font-sans font-medium tracking-[.02857em]",
+    "aria-disabled:pointer-events-none aria-disabled:cursor-not-allowed aria-disabled:opacity-50"
+  ],
+  {
+    variants: {
+      fullWidth: {
+        true: "w-full"
+      },
+      color: {
+        neutral: "",
+        primary: "",
+        success: "",
+        warning: "",
+        error: ""
+      },
+      size: {
+        sm: "px-2.5 py-1 text-[.8125rem] leading-4",
+        md: "px-4 py-1.5 text-[0.875rem] leading-5",
+        lg: "px-5 py-2 text-[.9375rem] leading-6"
+      },
+      variant: {
+        text: "border-transparent bg-transparent",
+        outlined: "bg-transparent",
+        contained: ""
+      }
+    },
+    compoundVariants: [
+      // ---------- TEXT ---------- //
+      {
+        variant: "text",
+        color: "neutral",
+        class: [
+          "text-gray-100",
+          "hover:border-gray-350 hover:bg-gray-350 hover:text-gray-100",
+          "active:border-gray-400 active:bg-gray-400"
+        ]
+      },
+      {
+        variant: "text",
+        color: "primary",
+        class: [
+          "text-primary-500",
+          "hover:border-primary-500 hover:bg-primary-500 hover:text-white",
+          "active:border-primary-600 active:bg-primary-600 active:text-white"
+        ]
+      },
+      {
+        variant: "text",
+        color: "success",
+        class: [
+          "text-success-500",
+          "hover:border-success-500 hover:bg-success-500 hover:text-white",
+          "active:border-success-600 active:bg-success-600 active:text-white"
+        ]
+      },
+      {
+        variant: "text",
+        color: "warning",
+        class: [
+          "text-warning-500",
+          "hover:border-warning-500 hover:bg-warning-500 hover:text-white",
+          "active:border-warning-600 active:bg-warning-600 active:text-white"
+        ]
+      },
+      {
+        variant: "text",
+        color: "error",
+        class: [
+          "text-error-500",
+          "hover:border-error-500 hover:bg-error-500 hover:text-white",
+          "active:border-error-600 active:bg-error-600 active:text-white"
+        ]
+      },
+      // ---------- OUTLINED ---------- //
+      {
+        variant: "outlined",
+        color: "neutral",
+        class: ["border-gray-350 text-gray-100", "hover:bg-gray-350", "active:bg-gray-400"]
+      },
+      {
+        variant: "outlined",
+        color: "primary",
+        class: [
+          "text-primary-500 border-primary-500",
+          "hover:bg-primary-500 hover:text-white",
+          "active:bg-primary-600 active:text-white"
+        ]
+      },
+      {
+        variant: "outlined",
+        color: "success",
+        class: [
+          "text-success-500 border-success-500",
+          "hover:bg-success-500 hover:text-white",
+          "active:bg-success-600 active:text-white"
+        ]
+      },
+      {
+        variant: "outlined",
+        color: "warning",
+        class: [
+          "text-warning-500 border-warning-500",
+          "hover:bg-warning-500 hover:text-white",
+          "active:bg-warning-600 active:text-white"
+        ]
+      },
+      {
+        variant: "outlined",
+        color: "error",
+        class: [
+          "text-error-500 border-error-500",
+          "hover:bg-error-500 hover:text-white",
+          "active:bg-error-600 active:text-white"
+        ]
+      },
+      // ---------- OUTLINED ---------- //
+      {
+        variant: "contained",
+        color: "neutral",
+        class: [
+          "border-gray-350 bg-gray-350 text-gray-100",
+          "hover:border-gray-300 hover:bg-gray-300",
+          "active:border-gray-400 active:bg-gray-400"
+        ]
+      },
+      {
+        variant: "contained",
+        color: "primary",
+        class: [
+          "border-primary-500 bg-primary-500 text-white",
+          "hover:border-primary-400 hover:bg-primary-400",
+          "active:border-primary-600 active:bg-primary-600"
+        ]
+      },
+      {
+        variant: "contained",
+        color: "success",
+        class: [
+          "border-success-500 bg-success-500 text-white",
+          "hover:border-success-400 hover:bg-success-400",
+          "active:border-success-600 active:bg-success-600"
+        ]
+      },
+      {
+        variant: "contained",
+        color: "warning",
+        class: [
+          "border-warning-500 bg-warning-500 text-white",
+          "hover:border-warning-400 hover:bg-warning-400",
+          "active:border-warning-600 active:bg-warning-600"
+        ]
+      },
+      {
+        variant: "contained",
+        color: "error",
+        class: [
+          "border-error-500 bg-error-500 text-white",
+          "hover:border-error-400 hover:bg-error-400",
+          "active:border-error-600 active:bg-error-600"
+        ]
+      }
+    ],
+    defaultVariants: {
+      fullWidth: false,
+      color: "primary",
+      size: "md",
+      variant: "text"
+    }
+  }
+);
+var iconContainerCva = cva("", {
+  variants: {
+    site: {
+      left: "",
+      right: ""
+    },
+    size: {
+      sm: "",
+      md: "",
+      lg: ""
+    }
+  },
+  compoundVariants: [
+    // ---------- LEFT ---------- //
+    {
+      site: "left",
+      size: "sm",
+      class: "-ml-0.5 mr-1.5"
+    },
+    {
+      site: "left",
+      size: "md",
+      class: "-ml-1 mr-2"
+    },
+    {
+      site: "left",
+      size: "lg",
+      class: "-ml-1.5 mr-2.5"
+    },
+    // ---------- RIGHT ---------- //
+    {
+      site: "right",
+      size: "sm",
+      class: "-mr-0.5 ml-1.5"
+    },
+    {
+      site: "right",
+      size: "md",
+      class: "-mr-1 ml-2"
+    },
+    {
+      site: "right",
+      size: "lg",
+      class: "-mr-1.5 ml-2.5"
+    }
+  ],
+  defaultVariants: {
+    site: "left",
+    size: "md"
+  }
+});
+var iconCva = cva("", {
+  variants: {
+    loading: {
+      true: "animate-spin motion-reduce:hidden"
+    },
+    size: {
+      sm: "h-4.5 w-4.5",
+      md: "size-5",
+      lg: "h-5.5 w-5.5"
+    }
+  },
+  defaultVariants: {
+    loading: false,
+    size: "md"
+  }
+});
+function Button({
+  asChild = false,
+  variant = "text",
+  color = "primary",
+  disabled = false,
+  fullWidth = false,
+  loadingPosition = "start",
+  ref,
+  ...props
+}) {
+  const {
+    children,
+    type = "button",
+    loading = false,
+    size = "md",
+    endIcon,
+    startIcon,
+    ...rest
+  } = { ...props, loadingPosition };
+  const Comp = asChild ? Slot : "button";
+  const buttonStyles = buttonCva({ fullWidth, size, variant, color });
+  const isDisabled = disabled || loading;
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      ...asChild ? props : rest,
+      "aria-disabled": isDisabled || void 0,
+      className: buttonStyles,
+      "data-state": loading ? "loading" : void 0,
+      disabled: isDisabled,
+      ref,
+      role: Comp !== "button" ? "button" : void 0,
+      tabIndex: isDisabled ? -1 : 0,
+      type: Comp === "button" ? type : void 0,
+      children: asChild ? /* @__PURE__ */ jsx(ButtonContent, { children }) : /* @__PURE__ */ jsx(ButtonContent, { ...props })
+    }
+  );
+}
+function ButtonContent({
+  children,
+  loading = false,
+  size = "md",
+  loadingPosition = "start",
+  startIcon,
+  endIcon,
+  ...props
+}) {
+  const isStartLoading = loading && loadingPosition === "start";
+  const StartIcon = isStartLoading ? /* @__PURE__ */ jsx(LoadingIcon, { "aria-label": "Loading" }) : startIcon || null;
+  const startIconStyles = iconCva({ size, loading: isStartLoading });
+  const startIconContainerStyles = iconContainerCva({ size, site: "left" });
+  const isEndLoading = loading && loadingPosition === "end";
+  const EndIcon = isEndLoading ? /* @__PURE__ */ jsx(LoadingIcon, { "aria-label": "Loading" }) : endIcon || null;
+  const endIconStyles = iconCva({ size, loading: isEndLoading });
+  const endIconContainerStyles = iconContainerCva({ size, site: "right" });
+  const LeadingIcon = StartIcon ? /* @__PURE__ */ jsx("span", { className: startIconContainerStyles, role: isStartLoading ? "progressbar" : void 0, children: React.cloneElement(StartIcon, { className: startIconStyles }) }) : null;
+  const TrailingIcon = EndIcon ? /* @__PURE__ */ jsx("span", { className: endIconContainerStyles, role: isEndLoading ? "progressbar" : void 0, children: React.cloneElement(EndIcon, { className: endIconStyles }) }) : null;
+  return React.isValidElement(children) ? React.cloneElement(
+    children,
+    props,
+    /* @__PURE__ */ jsxs(React.Fragment, { children: [
+      LeadingIcon,
+      React.isValidElement(children) ? children.props?.children : null,
+      TrailingIcon
+    ] })
+  ) : /* @__PURE__ */ jsxs(React.Fragment, { children: [
+    LeadingIcon,
+    children,
+    TrailingIcon
+  ] });
+}
+
+export { Button };

package/dist/chunk-H2BWO3SI.cjs

@@ -3,7 +3,6 @@
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 
-// src/utils/index.ts
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }

package/dist/chunk-HFHADY43.js

@@ -0,0 +1,36 @@
+import { cn } from './chunk-ZD2QRAOX.js';
+import { Avatar as Avatar$1 } from 'radix-ui';
+import { cva } from 'class-variance-authority';
+import { jsx } from 'react/jsx-runtime';
+
+var avatarCva = cva("relative flex shrink-0 overflow-hidden rounded text-gray-100", {
+  variants: {
+    size: {
+      sm: "size-6 text-xs",
+      md: "size-10 text-lg",
+      lg: "size-14 text-2xl"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+function Avatar({ className, size, ref, ...props }) {
+  const avatarStyles = avatarCva({ size });
+  return /* @__PURE__ */ jsx(Avatar$1.Root, { ref, className: cn(avatarStyles, className), ...props });
+}
+function AvatarImage({ className, ref, ...props }) {
+  return /* @__PURE__ */ jsx(Avatar$1.Image, { ref, className: cn("aspect-square h-full w-full", className), ...props });
+}
+function AvatarFallback({ className, ref, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Avatar$1.Fallback,
+    {
+      ref,
+      className: cn("bg-gray-350 flex h-full w-full items-center justify-center", className),
+      ...props
+    }
+  );
+}
+
+export { Avatar, AvatarFallback, AvatarImage };

package/dist/chunk-HIWVHD4V.js

@@ -0,0 +1,56 @@
+import { Select as Select$1 } from 'radix-ui';
+import { CaretSortIcon, CheckIcon } from '@radix-ui/react-icons';
+import { cva } from 'class-variance-authority';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var selectCva = cva(
+  [
+    "bg-app-foreground text-body-2 inline-flex h-10 w-full appearance-none items-center justify-between gap-2 border px-3 py-2 text-gray-100 outline-0 transition-colors duration-300 ease-in-out",
+    "placeholder:select-none placeholder:text-gray-200",
+    "invalid:border-error-500 focus:border-primary-400 active:border-primary-400",
+    "disabled:border-gray-400 disabled:text-gray-200 disabled:placeholder:text-gray-300"
+  ],
+  {
+    variants: {
+      invalid: {
+        true: ["text-error-500 border-error-500 hover:border-error-400 focus:text-gray-100"],
+        false: ["border-gray-350 hover:border-primary-500 text-gray-100"]
+      }
+    },
+    defaultVariants: {
+      invalid: false
+    }
+  }
+);
+function Select({ children, placeholder, invalid = false, ref, ...props }) {
+  const selectStyles = selectCva({ invalid });
+  return /* @__PURE__ */ jsxs(Select$1.Root, { ...props, children: [
+    /* @__PURE__ */ jsxs(Select$1.Trigger, { className: selectStyles, ref, children: [
+      /* @__PURE__ */ jsx(Select$1.Value, { placeholder }),
+      /* @__PURE__ */ jsx(Select$1.Icon, { className: "-mr-1.5", children: /* @__PURE__ */ jsx(CaretSortIcon, { className: "size-5 text-gray-200" }) })
+    ] }),
+    /* @__PURE__ */ jsx(Select$1.Portal, { children: /* @__PURE__ */ jsx(
+      Select$1.Content,
+      {
+        sideOffset: 4,
+        className: "bg-app-foreground z-50 w-full overflow-hidden border border-gray-400 py-1",
+        children: /* @__PURE__ */ jsx(Select$1.Viewport, { children })
+      }
+    ) })
+  ] });
+}
+function SelectItem({ children, ...props }) {
+  return /* @__PURE__ */ jsxs(
+    Select$1.Item,
+    {
+      className: "text-body-2 data-[state=checked]:bg-primary-300 flex w-full flex-row items-center justify-between px-3 py-2 text-gray-100 select-none data-[disabled]:pointer-events-none data-[highlighted]:bg-gray-400 data-[highlighted]:outline-none",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(Select$1.ItemText, { className: "flex-1", children }),
+        /* @__PURE__ */ jsx(Select$1.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-4" }) })
+      ]
+    }
+  );
+}
+
+export { Select, SelectItem };

package/dist/chunk-HXC3EALP.js

@@ -0,0 +1,39 @@
+import { Tooltip as Tooltip$1 } from 'radix-ui';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function Tooltip({
+  defaultOpen,
+  content,
+  open,
+  onOpenChange,
+  children,
+  side,
+  align,
+  collisionPadding = 8,
+  sideOffset = 8,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(Tooltip$1.Root, { delayDuration: 0, open, defaultOpen, onOpenChange, children: [
+    /* @__PURE__ */ jsx(Tooltip$1.Trigger, { asChild: true, children }),
+    content ? /* @__PURE__ */ jsx(Tooltip$1.Portal, { children: /* @__PURE__ */ jsxs(
+      Tooltip$1.Content,
+      {
+        className: "text-body-1 data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade rounded bg-white p-2 text-gray-100 will-change-[transform,opacity] select-none",
+        sideOffset,
+        side,
+        align,
+        collisionPadding,
+        ...props,
+        children: [
+          content,
+          /* @__PURE__ */ jsx(Tooltip$1.Arrow, { width: 8, height: 4, className: "fill-white" })
+        ]
+      }
+    ) }) : null
+  ] });
+}
+function TooltipProvider({ children }) {
+  return /* @__PURE__ */ jsx(Tooltip$1.Provider, { skipDelayDuration: 500, children });
+}
+
+export { Tooltip, TooltipProvider };

package/dist/chunk-IFBQNWVG.js

@@ -0,0 +1,70 @@
+import { cn } from './chunk-ZD2QRAOX.js';
+import { cva } from 'class-variance-authority';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var inputCva = cva(
+  [
+    "bg-app-foreground font-poppins h-10 w-full appearance-none border py-2 outline-0 transition-colors duration-300 ease-in-out",
+    "placeholder:select-none placeholder:text-gray-200",
+    "invalid:border-error-500 focus:border-primary-400 active:border-primary-400",
+    "disabled:border-gray-400 disabled:text-gray-200 disabled:placeholder:text-gray-300"
+  ],
+  {
+    variants: {
+      invalid: {
+        true: ["text-error-500 border-error-500 hover:border-error-400 focus:text-gray-100"],
+        false: ["border-gray-350 hover:border-primary-500 text-gray-100"]
+      },
+      withStartIcon: {
+        true: "pl-11",
+        false: "pl-3"
+      },
+      withEndIcon: {
+        true: "pr-11",
+        false: "pr-3"
+      }
+    },
+    defaultVariants: {
+      invalid: false,
+      withStartIcon: false,
+      withEndIcon: false
+    }
+  }
+);
+var inputIconContainerCva = cva(
+  ["pointer-events-none absolute inset-y-2 inline-flex w-10 place-content-center items-center text-center"],
+  {
+    variants: {
+      disabled: {
+        true: "text-gray-200"
+      },
+      site: {
+        right: "right-0 border-l border-l-gray-400 pr-1",
+        left: "left-0 border-r border-r-gray-400 pl-1"
+      }
+    },
+    defaultVariants: {
+      disabled: false
+    }
+  }
+);
+function Input({ invalid = false, startIcon, endIcon, disabled = false, className, ...props }) {
+  const inputStyles = inputCva({ withEndIcon: !!endIcon, withStartIcon: !!startIcon, invalid });
+  const inputIconStartContainer = inputIconContainerCva({ site: "left", disabled });
+  const inputIconEndContainer = inputIconContainerCva({ site: "right", disabled });
+  return /* @__PURE__ */ jsxs("div", { className: "text-body-2 relative text-gray-100", children: [
+    startIcon ? /* @__PURE__ */ jsx("span", { className: inputIconStartContainer, children: startIcon }) : null,
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        "aria-invalid": invalid || void 0,
+        disabled,
+        className: cn(inputStyles, className),
+        ...props
+      }
+    ),
+    endIcon ? /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: inputIconEndContainer, children: endIcon }) : null
+  ] });
+}
+
+export { Input };

package/dist/chunk-INJBKPIE.js

@@ -1,7 +1,6 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 export * from '@radix-ui/react-icons';
 
-// src/icons/google-logo.tsx
 function GoogleLogoIcon(props) {
   return /* @__PURE__ */ jsxs(
     "svg",

package/dist/chunk-J264N6AZ.js

@@ -0,0 +1,22 @@
+import { cn } from './chunk-ZD2QRAOX.js';
+import { Separator as Separator$1 } from 'radix-ui';
+import { jsx } from 'react/jsx-runtime';
+
+function Separator({ className, orientation = "horizontal", decorative = false, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Separator$1.Root,
+    {
+      decorative,
+      orientation,
+      "aria-orientation": orientation,
+      className: cn(
+        "shrink-0 bg-gray-400",
+        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+export { Separator };

package/dist/chunk-J56UDYA3.js

@@ -0,0 +1,70 @@
+import { Dialog as Dialog$1 } from 'radix-ui';
+import { twMerge } from 'tailwind-merge';
+import { Cross1Icon } from '@radix-ui/react-icons';
+import { cva } from 'class-variance-authority';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var Dialog = Dialog$1.Root;
+var DialogClose = Dialog$1.Close;
+var dialogContentStyles = cva(
+  [
+    "bg-foreground fixed left-1/2 top-1/2 z-50 flex w-full -translate-x-1/2 -translate-y-1/2 flex-col rounded border border-gray-400 p-4 shadow-lg",
+    "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] duration-200"
+  ],
+  {
+    variants: {
+      width: {
+        xs: "max-w-xs",
+        sm: "max-w-sm",
+        md: "max-w-md",
+        lg: "max-w-lg",
+        xl: "max-w-xl",
+        "2xl": "max-w-2xl",
+        "3xl": "max-w-3xl",
+        "4xl": "max-w-4xl",
+        "5xl": "max-w-5xl",
+        "6xl": "max-w-6xl",
+        full: "max-w-full"
+      }
+    },
+    defaultVariants: {
+      width: "md"
+    }
+  }
+);
+function DialogOverlay(props) {
+  return /* @__PURE__ */ jsx(
+    Dialog$1.Overlay,
+    {
+      className: "bg-background/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 backdrop-blur-xs",
+      ...props
+    }
+  );
+}
+function DialogContent({ className, children, width = "md", ...props }) {
+  return /* @__PURE__ */ jsxs(Dialog$1.Portal, { children: [
+    /* @__PURE__ */ jsx(DialogOverlay, {}),
+    /* @__PURE__ */ jsxs(Dialog$1.Content, { className: twMerge(dialogContentStyles({ width }), className), ...props, children: [
+      children,
+      /* @__PURE__ */ jsxs(Dialog$1.Close, { className: "focus:ring-ring ring-primary-500 ring-offset-foreground data-[state=open]:bg-foreground absolute top-4 right-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:pointer-events-none", children: [
+        /* @__PURE__ */ jsx(Cross1Icon, { className: "size-4" }),
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+      ] })
+    ] })
+  ] });
+}
+var DialogTrigger = Dialog$1.Trigger;
+function DialogHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: twMerge("mb-4 flex flex-col space-y-1.5 text-center sm:text-left", className), ...props });
+}
+function DialogFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: twMerge("mt-4 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className), ...props });
+}
+function DialogTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx(Dialog$1.Title, { className: twMerge("text-heading-6", className), ...props });
+}
+function DialogDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsx(Dialog$1.Description, { className: twMerge("text-body-2 text-gray-200", className), ...props });
+}
+
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger };

package/dist/chunk-KPB3CBHE.cjs

@@ -0,0 +1,40 @@
+'use strict';
+
+var chunkH2BWO3SI_cjs = require('./chunk-H2BWO3SI.cjs');
+var radixUi = require('radix-ui');
+var classVarianceAuthority = require('class-variance-authority');
+var jsxRuntime = require('react/jsx-runtime');
+
+var avatarCva = classVarianceAuthority.cva("relative flex shrink-0 overflow-hidden rounded text-gray-100", {
+  variants: {
+    size: {
+      sm: "size-6 text-xs",
+      md: "size-10 text-lg",
+      lg: "size-14 text-2xl"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+function Avatar({ className, size, ref, ...props }) {
+  const avatarStyles = avatarCva({ size });
+  return /* @__PURE__ */ jsxRuntime.jsx(radixUi.Avatar.Root, { ref, className: chunkH2BWO3SI_cjs.cn(avatarStyles, className), ...props });
+}
+function AvatarImage({ className, ref, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(radixUi.Avatar.Image, { ref, className: chunkH2BWO3SI_cjs.cn("aspect-square h-full w-full", className), ...props });
+}
+function AvatarFallback({ className, ref, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    radixUi.Avatar.Fallback,
+    {
+      ref,
+      className: chunkH2BWO3SI_cjs.cn("bg-gray-350 flex h-full w-full items-center justify-center", className),
+      ...props
+    }
+  );
+}
+
+exports.Avatar = Avatar;
+exports.AvatarFallback = AvatarFallback;
+exports.AvatarImage = AvatarImage;