@szum-tech/design-system 2.6.0 → 3.0.0

package/dist/chunk-EU7G37IS.js

@@ -1,36 +0,0 @@
-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 = "md", 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("flex h-full w-full items-center justify-center bg-gray-600", className),
-      ...props
-    }
-  );
-}
-
-export { Avatar, AvatarFallback, AvatarImage };

package/dist/chunk-FVSO3RHT.cjs

@@ -1,17 +0,0 @@
-'use strict';
-
-var chunkH2BWO3SI_cjs = require('./chunk-H2BWO3SI.cjs');
-var radixUi = require('radix-ui');
-var jsxRuntime = require('react/jsx-runtime');
-
-function Label({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    radixUi.Label.Root,
-    {
-      className: chunkH2BWO3SI_cjs.cn("text-subtitle-1 peer-disabled:cursor-not-allowed peer-disabled:opacity-70", className),
-      ...props
-    }
-  );
-}
-
-exports.Label = Label;

package/dist/chunk-G6VXQ7DJ.cjs

@@ -1,63 +0,0 @@
-'use strict';
-
-var chunkH2BWO3SI_cjs = require('./chunk-H2BWO3SI.cjs');
-var lucideReact = require('lucide-react');
-var radixUi = require('radix-ui');
-var classVarianceAuthority = require('class-variance-authority');
-var jsxRuntime = require('react/jsx-runtime');
-
-var selectCva = classVarianceAuthority.cva(
-  [
-    "bg-app-foreground font-poppins text-body-2 inline-flex h-10 w-full items-center justify-between gap-2 border py-2 pl-3 pr-1.5 outline-0 transition-colors duration-300 ease-in-out [&>span]:line-clamp-1",
-    "data-[placeholder]:select-none data-[placeholder]:text-gray-400",
-    "invalid:border-error-500 focus:border-primary-500 active:border-primary-500",
-    "disabled:cursor-not-allowed disabled:border-gray-800 disabled:text-gray-300 disabled:placeholder:text-gray-600 disabled:[&>svg]:text-gray-300"
-  ],
-  {
-    variants: {
-      invalid: {
-        true: ["text-error-500 border-error-500 hover:border-error-400 focus:text-gray-100"],
-        false: ["hover:border-primary-600 border-gray-600 text-gray-100"]
-      }
-    },
-    defaultVariants: {
-      invalid: false
-    }
-  }
-);
-function Select({ children, placeholder, invalid = false, ref, ...props }) {
-  const selectStyles = selectCva({ invalid });
-  return /* @__PURE__ */ jsxRuntime.jsxs(radixUi.Select.Root, { ...props, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(radixUi.Select.Trigger, { className: selectStyles, ref, "aria-invalid": invalid || void 0, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(radixUi.Select.Value, { placeholder }),
-      /* @__PURE__ */ jsxRuntime.jsx(radixUi.Select.Icon, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "size-5 text-gray-100" }) })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(radixUi.Select.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
-      radixUi.Select.Content,
-      {
-        sideOffset: 4,
-        className: "bg-app-foreground z-50 w-full overflow-hidden border border-gray-800 py-1",
-        children: /* @__PURE__ */ jsxRuntime.jsx(radixUi.Select.Viewport, { children })
-      }
-    ) })
-  ] });
-}
-function SelectItem({ children, className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    radixUi.Select.Item,
-    {
-      className: chunkH2BWO3SI_cjs.cn(
-        "text-body-2 data-[state=checked]:bg-primary-500 data-[state=checked]:text-app-foreground 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-900 data-[highlighted]:outline-none data-[state=checked]:outline-none",
-        className
-      ),
-      ...props,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(radixUi.Select.ItemText, { className: "flex-1", children }),
-        /* @__PURE__ */ jsxRuntime.jsx(radixUi.Select.ItemIndicator, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "size-4" }) })
-      ]
-    }
-  );
-}
-
-exports.Select = Select;
-exports.SelectItem = SelectItem;

package/dist/chunk-IAI7BIAG.js

@@ -1,31 +0,0 @@
-import { cva } from 'class-variance-authority';
-import { jsx } from 'react/jsx-runtime';
-
-// src/components/textarea/textarea.styles.tsx
-var textareaCva = cva(
-  [
-    "bg-app-foreground font-poppins h-28 min-h-10 w-full appearance-none border px-3 py-2 outline-0 transition-colors duration-300 ease-in-out",
-    "placeholder:select-none placeholder:text-gray-400",
-    "invalid:border-error-500",
-    "focus:border-primary-500",
-    "active:border-primary-500",
-    "disabled:cursor-not-allowed disabled:border-gray-800 disabled:text-gray-300 disabled:placeholder:text-gray-600"
-  ],
-  {
-    variants: {
-      invalid: {
-        true: ["text-error-500 border-error-500 hover:border-error-400 focus:text-gray-100"],
-        false: ["hover:border-primary-600 border-gray-600 text-gray-100"]
-      }
-    },
-    defaultVariants: {
-      invalid: false
-    }
-  }
-);
-function Textarea({ invalid = false, ...props }) {
-  const textareaStyles = textareaCva({ invalid });
-  return /* @__PURE__ */ jsx("textarea", { "aria-invalid": invalid || void 0, className: textareaStyles, ...props });
-}
-
-export { Textarea };

package/dist/chunk-K4TRAPRN.cjs

@@ -1,341 +0,0 @@
-'use strict';
-
-var chunkUKWZ5BHD_cjs = require('./chunk-UKWZ5BHD.cjs');
-var React = require('react');
-var reactSlot = require('@radix-ui/react-slot');
-var classVarianceAuthority = require('class-variance-authority');
-var jsxRuntime = require('react/jsx-runtime');
-
-function _interopNamespace(e) {
-  if (e && e.__esModule) return e;
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
-        });
-      }
-    });
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-
-var React__namespace = /*#__PURE__*/_interopNamespace(React);
-
-var buttonCva = classVarianceAuthority.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:text-app-foreground hover:border-gray-500 hover:bg-gray-500",
-          "active:border-gray-600 active:bg-gray-600"
-        ]
-      },
-      {
-        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-500 text-gray-100", "hover:text-app-foreground hover:bg-gray-500", "active:bg-gray-600"]
-      },
-      {
-        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-500 bg-gray-500 text-gray-100",
-          "hover:text-app-foreground hover:border-gray-400 hover:bg-gray-400",
-          "active:border-gray-600 active:bg-gray-600"
-        ]
-      },
-      {
-        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 = classVarianceAuthority.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 = classVarianceAuthority.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 ? reactSlot.Slot : "button";
-  const buttonStyles = buttonCva({ fullWidth, size, variant, color });
-  const isDisabled = disabled || loading;
-  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(ButtonContent, { children }) : /* @__PURE__ */ jsxRuntime.jsx(ButtonContent, { ...props })
-    }
-  );
-}
-function ButtonContent({
-  children,
-  loading = false,
-  size = "md",
-  loadingPosition = "start",
-  startIcon,
-  endIcon,
-  ...props
-}) {
-  const isStartLoading = loading && loadingPosition === "start";
-  const StartIcon = isStartLoading ? /* @__PURE__ */ jsxRuntime.jsx(chunkUKWZ5BHD_cjs.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__ */ jsxRuntime.jsx(chunkUKWZ5BHD_cjs.LoadingIcon, { "aria-label": "Loading" }) : endIcon || null;
-  const endIconStyles = iconCva({ size, loading: isEndLoading });
-  const endIconContainerStyles = iconContainerCva({ size, site: "right" });
-  const LeadingIcon = StartIcon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: startIconContainerStyles, role: isStartLoading ? "progressbar" : void 0, children: React__namespace.cloneElement(StartIcon, { className: startIconStyles }) }) : null;
-  const TrailingIcon = EndIcon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: endIconContainerStyles, role: isEndLoading ? "progressbar" : void 0, children: React__namespace.cloneElement(EndIcon, { className: endIconStyles }) }) : null;
-  return React__namespace.isValidElement(children) ? React__namespace.cloneElement(
-    children,
-    props,
-    /* @__PURE__ */ jsxRuntime.jsxs(React__namespace.Fragment, { children: [
-      LeadingIcon,
-      React__namespace.isValidElement(children) ? children.props?.children : null,
-      TrailingIcon
-    ] })
-  ) : /* @__PURE__ */ jsxRuntime.jsxs(React__namespace.Fragment, { children: [
-    LeadingIcon,
-    children,
-    TrailingIcon
-  ] });
-}
-
-exports.Button = Button;

package/dist/chunk-MI3CQBHC.js

@@ -1,60 +0,0 @@
-import { cn } from './chunk-ZD2QRAOX.js';
-import { ChevronDown, Check } from 'lucide-react';
-import { Select as Select$1 } from 'radix-ui';
-import { cva } from 'class-variance-authority';
-import { jsxs, jsx } from 'react/jsx-runtime';
-
-var selectCva = cva(
-  [
-    "bg-app-foreground font-poppins text-body-2 inline-flex h-10 w-full items-center justify-between gap-2 border py-2 pl-3 pr-1.5 outline-0 transition-colors duration-300 ease-in-out [&>span]:line-clamp-1",
-    "data-[placeholder]:select-none data-[placeholder]:text-gray-400",
-    "invalid:border-error-500 focus:border-primary-500 active:border-primary-500",
-    "disabled:cursor-not-allowed disabled:border-gray-800 disabled:text-gray-300 disabled:placeholder:text-gray-600 disabled:[&>svg]:text-gray-300"
-  ],
-  {
-    variants: {
-      invalid: {
-        true: ["text-error-500 border-error-500 hover:border-error-400 focus:text-gray-100"],
-        false: ["hover:border-primary-600 border-gray-600 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, "aria-invalid": invalid || void 0, children: [
-      /* @__PURE__ */ jsx(Select$1.Value, { placeholder }),
-      /* @__PURE__ */ jsx(Select$1.Icon, { asChild: true, children: /* @__PURE__ */ jsx(ChevronDown, { className: "size-5 text-gray-100" }) })
-    ] }),
-    /* @__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-800 py-1",
-        children: /* @__PURE__ */ jsx(Select$1.Viewport, { children })
-      }
-    ) })
-  ] });
-}
-function SelectItem({ children, className, ...props }) {
-  return /* @__PURE__ */ jsxs(
-    Select$1.Item,
-    {
-      className: cn(
-        "text-body-2 data-[state=checked]:bg-primary-500 data-[state=checked]:text-app-foreground 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-900 data-[highlighted]:outline-none data-[state=checked]:outline-none",
-        className
-      ),
-      ...props,
-      children: [
-        /* @__PURE__ */ jsx(Select$1.ItemText, { className: "flex-1", children }),
-        /* @__PURE__ */ jsx(Select$1.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "size-4" }) })
-      ]
-    }
-  );
-}
-
-export { Select, SelectItem };

package/dist/chunk-OIWEXHFE.cjs

@@ -1,33 +0,0 @@
-'use strict';
-
-var classVarianceAuthority = require('class-variance-authority');
-var jsxRuntime = require('react/jsx-runtime');
-
-// src/components/textarea/textarea.styles.tsx
-var textareaCva = classVarianceAuthority.cva(
-  [
-    "bg-app-foreground font-poppins h-28 min-h-10 w-full appearance-none border px-3 py-2 outline-0 transition-colors duration-300 ease-in-out",
-    "placeholder:select-none placeholder:text-gray-400",
-    "invalid:border-error-500",
-    "focus:border-primary-500",
-    "active:border-primary-500",
-    "disabled:cursor-not-allowed disabled:border-gray-800 disabled:text-gray-300 disabled:placeholder:text-gray-600"
-  ],
-  {
-    variants: {
-      invalid: {
-        true: ["text-error-500 border-error-500 hover:border-error-400 focus:text-gray-100"],
-        false: ["hover:border-primary-600 border-gray-600 text-gray-100"]
-      }
-    },
-    defaultVariants: {
-      invalid: false
-    }
-  }
-);
-function Textarea({ invalid = false, ...props }) {
-  const textareaStyles = textareaCva({ invalid });
-  return /* @__PURE__ */ jsxRuntime.jsx("textarea", { "aria-invalid": invalid || void 0, className: textareaStyles, ...props });
-}
-
-exports.Textarea = Textarea;

package/dist/chunk-P4J2TTH7.cjs

@@ -1,32 +0,0 @@
-'use strict';
-
-var tailwindMerge = require('tailwind-merge');
-var classVarianceAuthority = require('class-variance-authority');
-var jsxRuntime = require('react/jsx-runtime');
-
-// src/components/helper-text/helper-text.tsx
-var helperTextCva = classVarianceAuthority.cva("", {
-  variants: {
-    type: {
-      description: "text-body-2 text-gray-300",
-      error: "text-caption text-error-500"
-    }
-  },
-  defaultVariants: {
-    type: "description"
-  }
-});
-function HelperText({ className, children, type = "description", role, ref, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "p",
-    {
-      ref,
-      className: tailwindMerge.twMerge(helperTextCva({ type }), className),
-      role: type === "error" ? "alert" : role,
-      ...props,
-      children
-    }
-  );
-}
-
-exports.HelperText = HelperText;