@szum-tech/design-system 2.0.4 → 2.1.0

package/dist/chunk-463KEXY6.cjs

@@ -0,0 +1,79 @@
+'use strict';
+
+var radixUi = require('radix-ui');
+var tailwindMerge = require('tailwind-merge');
+var reactIcons = require('@radix-ui/react-icons');
+var classVarianceAuthority = require('class-variance-authority');
+var jsxRuntime = require('react/jsx-runtime');
+
+var Dialog = radixUi.Dialog.Root;
+var DialogClose = radixUi.Dialog.Close;
+var dialogContentStyles = classVarianceAuthority.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__ */ jsxRuntime.jsx(
+    radixUi.Dialog.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__ */ jsxRuntime.jsxs(radixUi.Dialog.Portal, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(DialogOverlay, {}),
+    /* @__PURE__ */ jsxRuntime.jsxs(radixUi.Dialog.Content, { className: tailwindMerge.twMerge(dialogContentStyles({ width }), className), ...props, children: [
+      children,
+      /* @__PURE__ */ jsxRuntime.jsxs(radixUi.Dialog.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__ */ jsxRuntime.jsx(reactIcons.Cross1Icon, { className: "size-4" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
+      ] })
+    ] })
+  ] });
+}
+var DialogTrigger = radixUi.Dialog.Trigger;
+function DialogHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: tailwindMerge.twMerge("mb-4 flex flex-col space-y-1.5 text-center sm:text-left", className), ...props });
+}
+function DialogFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: tailwindMerge.twMerge("mt-4 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className), ...props });
+}
+function DialogTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(radixUi.Dialog.Title, { className: tailwindMerge.twMerge("text-heading-6", className), ...props });
+}
+function DialogDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(radixUi.Dialog.Description, { className: tailwindMerge.twMerge("text-body-2 text-gray-200", className), ...props });
+}
+
+exports.Dialog = Dialog;
+exports.DialogClose = DialogClose;
+exports.DialogContent = DialogContent;
+exports.DialogDescription = DialogDescription;
+exports.DialogFooter = DialogFooter;
+exports.DialogHeader = DialogHeader;
+exports.DialogTitle = DialogTitle;
+exports.DialogTrigger = DialogTrigger;

package/dist/chunk-4YZSPNLW.cjs

@@ -0,0 +1,42 @@
+'use strict';
+
+var radixUi = require('radix-ui');
+var jsxRuntime = require('react/jsx-runtime');
+
+function Tooltip({
+  defaultOpen,
+  content,
+  open,
+  onOpenChange,
+  children,
+  side,
+  align,
+  collisionPadding = 8,
+  sideOffset = 8,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(radixUi.Tooltip.Root, { delayDuration: 0, open, defaultOpen, onOpenChange, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(radixUi.Tooltip.Trigger, { asChild: true, children }),
+    content ? /* @__PURE__ */ jsxRuntime.jsx(radixUi.Tooltip.Portal, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+      radixUi.Tooltip.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__ */ jsxRuntime.jsx(radixUi.Tooltip.Arrow, { width: 8, height: 4, className: "fill-white" })
+        ]
+      }
+    ) }) : null
+  ] });
+}
+function TooltipProvider({ children }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(radixUi.Tooltip.Provider, { skipDelayDuration: 500, children });
+}
+
+exports.Tooltip = Tooltip;
+exports.TooltipProvider = TooltipProvider;

package/dist/chunk-5EN2HNFU.js

@@ -0,0 +1,50 @@
+import { cn } from './chunk-ZD2QRAOX.js';
+import { AlertDialog as AlertDialog$1 } from 'radix-ui';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { twMerge } from 'tailwind-merge';
+
+var AlertDialog = AlertDialog$1.Root;
+var AlertDialogTrigger = AlertDialog$1.Trigger;
+function AlertDialogOverlay({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    AlertDialog$1.Overlay,
+    {
+      className: cn(
+        "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",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function AlertDialogContent({ className, ...props }) {
+  return /* @__PURE__ */ jsxs(AlertDialog$1.Portal, { children: [
+    /* @__PURE__ */ jsx(AlertDialogOverlay, {}),
+    /* @__PURE__ */ jsx(
+      AlertDialog$1.Content,
+      {
+        className: cn(
+          "bg-foreground 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%] fixed top-1/2 left-1/2 z-50 flex w-full max-w-lg -translate-x-1/2 -translate-y-1/2 flex-col rounded border border-gray-400 p-4 shadow-lg duration-200",
+          className
+        ),
+        ...props
+      }
+    )
+  ] });
+}
+function AlertDialogHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: twMerge("mb-4 flex flex-col space-y-2 text-center sm:text-left", className), ...props });
+}
+function AlertDialogFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: twMerge("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className), ...props });
+}
+function AlertDialogTitle({ className, ref, ...props }) {
+  return /* @__PURE__ */ jsx(AlertDialog$1.Title, { ref, className: cn("text-heading-6", className), ...props });
+}
+function AlertDialogDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsx(AlertDialog$1.Description, { className: cn("text-body-2 text-gray-200", className), ...props });
+}
+var AlertDialogAction = AlertDialog$1.Action;
+var AlertDialogCancel = AlertDialog$1.Cancel;
+
+export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger };

package/dist/chunk-5ENMEB5L.cjs

@@ -0,0 +1,341 @@
+'use strict';
+
+var chunkTSN5DAKH_cjs = require('./chunk-TSN5DAKH.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: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 = 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(chunkTSN5DAKH_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(chunkTSN5DAKH_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-AO4TMCYJ.js

@@ -0,0 +1,88 @@
+import { HelperText } from './chunk-WTVBTZ3P.js';
+import { Label } from './chunk-US32J7DK.js';
+import { useFormContext, FormProvider, Controller } from 'react-hook-form';
+import * as React2 from 'react';
+import { twMerge } from 'tailwind-merge';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Slot } from '@radix-ui/react-slot';
+
+var Form = FormProvider;
+var FormItemContext = React2.createContext({});
+var FormItem = React2.forwardRef(function({ className, ...props }, ref) {
+  const id = React2.useId();
+  return /* @__PURE__ */ jsx(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ jsx("div", { ref, className: twMerge("space-y-2", className), ...props }) });
+});
+FormItem.displayName = "FormItem";
+var FormFieldContext = React2.createContext({});
+var FormField = ({
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(FormFieldContext.Provider, { value: { name: props.name }, children: /* @__PURE__ */ jsx(Controller, { ...props }) });
+};
+var useFormField = () => {
+  const fieldContext = React2.useContext(FormFieldContext);
+  const itemContext = React2.useContext(FormItemContext);
+  const { getFieldState, formState } = useFormContext();
+  const fieldState = getFieldState(fieldContext.name, formState);
+  if (!fieldContext) {
+    throw new Error("useFormField should be used within <FormField>");
+  }
+  const { id } = itemContext;
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState
+  };
+};
+var FormLabel = React2.forwardRef(
+  ({ className, caption, ...props }, ref) => {
+    const { error, formItemId } = useFormField();
+    return /* @__PURE__ */ jsxs("div", { className: "flex flex-row items-end justify-between", children: [
+      /* @__PURE__ */ jsx(
+        Label,
+        {
+          ref,
+          className: twMerge(error ? "text-error-500" : null, className),
+          htmlFor: formItemId,
+          ...props
+        }
+      ),
+      caption ? /* @__PURE__ */ jsx("div", { className: "typography-caption text-gray-200", children: caption }) : null
+    ] });
+  }
+);
+FormLabel.displayName = "FormLabel";
+var FormControl = React2.forwardRef(function(props, ref) {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
+  const newProps = { ...props, invalid: !!error };
+  return /* @__PURE__ */ jsx(
+    Slot,
+    {
+      ref,
+      id: formItemId,
+      "aria-describedby": !error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`,
+      "aria-invalid": !!error,
+      ...newProps
+    }
+  );
+});
+FormControl.displayName = "FormControl";
+var FormMessage = React2.forwardRef(function({ children, ...props }, ref) {
+  const { error, formMessageId } = useFormField();
+  const body = error ? String(error?.message) : children;
+  if (!body) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(HelperText, { ref, type: "error", id: formMessageId, ...props, children: body });
+});
+FormMessage.displayName = "FormMessage";
+var FormDescription = React2.forwardRef(function(props, ref) {
+  const { formDescriptionId } = useFormField();
+  return /* @__PURE__ */ jsx(HelperText, { ref, id: formDescriptionId, ...props });
+});
+FormDescription.displayName = "FormDescription";
+
+export { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage };