@szum-tech/design-system 2.0.3 → 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

@@ -0,0 +1,88 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+export * from '@radix-ui/react-icons';
+
+function GoogleLogoIcon(props) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      strokeWidth: "2",
+      stroke: "currentColor",
+      fill: "none",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M12 2a9.96 9.96 0 0 1 6.29 2.226a1 1 0 0 1 .04 1.52l-1.51 1.362a1 1 0 0 1 -1.265 .06a6 6 0 1 0 2.103 6.836l.001 -.004h-3.66a1 1 0 0 1 -.992 -.883l-.007 -.117v-2a1 1 0 0 1 1 -1h6.945a1 1 0 0 1 .994 .89c.04 .367 .061 .737 .061 1.11c0 5.523 -4.477 10 -10 10s-10 -4.477 -10 -10s4.477 -10 10 -10z",
+            strokeWidth: "0",
+            fill: "currentColor"
+          }
+        )
+      ]
+    }
+  );
+}
+function LoadingIcon(props) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      xmlnsXlink: "http://www.w3.org/1999/xlink",
+      fill: "currentColor",
+      version: "1.1",
+      viewBox: "0 0 26.349 26.35",
+      xmlSpace: "preserve",
+      ...props,
+      children: /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("circle", { cx: "13.792", cy: "3.082", r: "3.082" }),
+        /* @__PURE__ */ jsx("circle", { cx: "13.792", cy: "24.501", r: "1.849" }),
+        /* @__PURE__ */ jsx("circle", { cx: "6.219", cy: "6.218", r: "2.774" }),
+        /* @__PURE__ */ jsx("circle", { cx: "21.365", cy: "21.363", r: "1.541" }),
+        /* @__PURE__ */ jsx("circle", { cx: "3.082", cy: "13.792", r: "2.465" }),
+        /* @__PURE__ */ jsx("circle", { cx: "24.501", cy: "13.791", r: "1.232" }),
+        /* @__PURE__ */ jsx("path", { d: "M4.694,19.84c-0.843,0.843-0.843,2.207,0,3.05c0.842,0.843,2.208,0.843,3.05,0c0.843-0.843,0.843-2.207,0-3.05    C6.902,18.996,5.537,18.988,4.694,19.84z" }),
+        /* @__PURE__ */ jsx("circle", { cx: "21.364", cy: "6.218", r: "0.924" })
+      ] }) })
+    }
+  );
+}
+function Auth0LogoIcon(props) {
+  return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
+    /* @__PURE__ */ jsx("title", {}),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M21.98 7.448L19.62 0H4.347L2.02 7.448c-1.352 4.312.03 9.206 3.815 12.015L12.007 24l6.157-4.552c3.755-2.81 5.182-7.688 3.815-12.015l-6.16 4.58 2.343 7.45-6.157-4.597-6.158 4.58 2.358-7.433-6.188-4.55 7.63-.045L12.008 0l2.356 7.404 7.615.044z",
+        fill: "currentColor"
+      }
+    )
+  ] });
+}
+function XLogoIcon(props) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      version: "1.1",
+      id: "Layer_1",
+      width: "24px",
+      height: "24px",
+      viewBox: "0 0 24 24",
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M14.095479,10.316482L22.286354,1h-1.940718l-7.115352,8.087682L7.551414,1H1l8.589488,12.231093L1,23h1.940717  l7.509372-8.542861L16.448587,23H23L14.095479,10.316482z M11.436522,13.338465l-0.871624-1.218704l-6.924311-9.68815h2.981339  l5.58978,7.82155l0.867949,1.218704l7.26506,10.166271h-2.981339L11.436522,13.338465z",
+          fill: "currentColor"
+        }
+      )
+    }
+  );
+}
+
+export { Auth0LogoIcon, GoogleLogoIcon, LoadingIcon, XLogoIcon };

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 };