@szum-tech/design-system 2.7.0 → 3.1.0

package/dist/chunk-HD7ZDQWW.js

@@ -0,0 +1,173 @@
+import { Label } from './chunk-I3RSTJP6.js';
+import { Separator } from './chunk-XJIUGEPN.js';
+import { cn } from './chunk-ZD2QRAOX.js';
+import { cva } from 'class-variance-authority';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import * as React from 'react';
+
+var fieldVariants = cva("group/field flex w-full gap-3 data-[invalid=true]:text-error", {
+  variants: {
+    orientation: {
+      vertical: ["flex-col [&>*]:w-full [&>.sr-only]:w-auto"],
+      horizontal: [
+        "flex-row items-center",
+        "[&>[data-slot=field-label]]:flex-auto",
+        "has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px"
+      ],
+      responsive: [
+        "flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto",
+        "@md/field-group:[&>[data-slot=field-label]]:flex-auto",
+        "@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px"
+      ]
+    }
+  },
+  defaultVariants: {
+    orientation: "vertical"
+  }
+});
+function Field({ className, orientation = "vertical", ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "group",
+      "data-slot": "field",
+      "data-orientation": orientation,
+      className: cn(fieldVariants({ orientation }), className),
+      ...props
+    }
+  );
+}
+function FieldContent({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "field-content",
+      className: cn("group/field-content flex flex-1 flex-col gap-1.5 leading-snug", className),
+      ...props
+    }
+  );
+}
+function FieldDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      "data-slot": "field-description",
+      className: cn(
+        "text-muted-foreground text-sm leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance",
+        "last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5",
+        "[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function FieldError({ className, children, errors, ...props }) {
+  const content = React.useMemo(() => {
+    if (children) {
+      return children;
+    }
+    if (!errors?.length) {
+      return null;
+    }
+    const uniqueErrors = [...new Map(errors.map((error) => [error?.message, error])).values()];
+    if (uniqueErrors?.length == 1) {
+      return uniqueErrors[0]?.message;
+    }
+    return /* @__PURE__ */ jsx("ul", { className: "ml-4 flex list-disc flex-col gap-1", children: uniqueErrors.map((error, index) => error?.message && /* @__PURE__ */ jsx("li", { children: error.message }, index)) });
+  }, [children, errors]);
+  if (!content) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx("div", { role: "alert", "data-slot": "field-error", className: cn("text-error text-sm font-normal", className), ...props, children: content });
+}
+function FieldGroup({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "field-group",
+      className: cn(
+        "group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function FieldLabel({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Label,
+    {
+      "data-slot": "field-label",
+      className: cn(
+        "group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50",
+        "has-[>[data-slot=field]]:border-border has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4",
+        "has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function FieldLegend({ className, variant = "legend", ...props }) {
+  return /* @__PURE__ */ jsx(
+    "legend",
+    {
+      "data-slot": "field-legend",
+      "data-variant": variant,
+      className: cn("mb-3 font-medium", "data-[variant=legend]:text-base", "data-[variant=label]:text-sm", className),
+      ...props
+    }
+  );
+}
+function FieldSeparator({ children, className, ...props }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "field-separator",
+      "data-content": !!children,
+      className: cn("relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(Separator, { className: "absolute inset-0 top-1/2" }),
+        children ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "bg-background text-muted-foreground relative mx-auto block w-fit px-2",
+            "data-slot": "field-separator-content",
+            children
+          }
+        ) : null
+      ]
+    }
+  );
+}
+function FieldSet({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "fieldset",
+    {
+      "data-slot": "field-set",
+      className: cn(
+        "flex flex-col gap-6",
+        "has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function FieldTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "field-label",
+      className: cn(
+        "flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+export { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle };

package/dist/chunk-I3RSTJP6.js

@@ -0,0 +1,20 @@
+import { cn } from './chunk-ZD2QRAOX.js';
+import { Label as Label$1 } from 'radix-ui';
+import { jsx } from 'react/jsx-runtime';
+
+function Label({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Label$1.Root,
+    {
+      "data-slot": "label",
+      className: cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none",
+        "group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+export { Label };

package/dist/chunk-I7AV5IQO.cjs

@@ -0,0 +1,33 @@
+'use strict';
+
+var chunkH2BWO3SI_cjs = require('./chunk-H2BWO3SI.cjs');
+var radixUi = require('radix-ui');
+var jsxRuntime = require('react/jsx-runtime');
+
+function Avatar({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    radixUi.Avatar.Root,
+    {
+      "data-slot": "avatar",
+      className: chunkH2BWO3SI_cjs.cn("relative flex size-8 shrink-0 overflow-hidden rounded", className),
+      ...props
+    }
+  );
+}
+function AvatarImage({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(radixUi.Avatar.Image, { "data-slot": "avatar-image", className: chunkH2BWO3SI_cjs.cn("aspect-square size-full", className), ...props });
+}
+function AvatarFallback({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    radixUi.Avatar.Fallback,
+    {
+      "data-slot": "avatar-fallback",
+      className: chunkH2BWO3SI_cjs.cn("bg-muted flex size-full items-center justify-center rounded-full", className),
+      ...props
+    }
+  );
+}
+
+exports.Avatar = Avatar;
+exports.AvatarFallback = AvatarFallback;
+exports.AvatarImage = AvatarImage;

package/dist/chunk-N4O2GO6V.cjs

@@ -0,0 +1,204 @@
+'use strict';
+
+var chunkS3ANEJJ7_cjs = require('./chunk-S3ANEJJ7.cjs');
+var chunkUIOBJSKZ_cjs = require('./chunk-UIOBJSKZ.cjs');
+var chunkH2BWO3SI_cjs = require('./chunk-H2BWO3SI.cjs');
+var classVarianceAuthority = require('class-variance-authority');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+
+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 fieldVariants = classVarianceAuthority.cva("group/field flex w-full gap-3 data-[invalid=true]:text-error", {
+  variants: {
+    orientation: {
+      vertical: ["flex-col [&>*]:w-full [&>.sr-only]:w-auto"],
+      horizontal: [
+        "flex-row items-center",
+        "[&>[data-slot=field-label]]:flex-auto",
+        "has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px"
+      ],
+      responsive: [
+        "flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto",
+        "@md/field-group:[&>[data-slot=field-label]]:flex-auto",
+        "@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px"
+      ]
+    }
+  },
+  defaultVariants: {
+    orientation: "vertical"
+  }
+});
+function Field({ className, orientation = "vertical", ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      role: "group",
+      "data-slot": "field",
+      "data-orientation": orientation,
+      className: chunkH2BWO3SI_cjs.cn(fieldVariants({ orientation }), className),
+      ...props
+    }
+  );
+}
+function FieldContent({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "field-content",
+      className: chunkH2BWO3SI_cjs.cn("group/field-content flex flex-1 flex-col gap-1.5 leading-snug", className),
+      ...props
+    }
+  );
+}
+function FieldDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "p",
+    {
+      "data-slot": "field-description",
+      className: chunkH2BWO3SI_cjs.cn(
+        "text-muted-foreground text-sm leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance",
+        "last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5",
+        "[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function FieldError({ className, children, errors, ...props }) {
+  const content = React__namespace.useMemo(() => {
+    if (children) {
+      return children;
+    }
+    if (!errors?.length) {
+      return null;
+    }
+    const uniqueErrors = [...new Map(errors.map((error) => [error?.message, error])).values()];
+    if (uniqueErrors?.length == 1) {
+      return uniqueErrors[0]?.message;
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "ml-4 flex list-disc flex-col gap-1", children: uniqueErrors.map((error, index) => error?.message && /* @__PURE__ */ jsxRuntime.jsx("li", { children: error.message }, index)) });
+  }, [children, errors]);
+  if (!content) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { role: "alert", "data-slot": "field-error", className: chunkH2BWO3SI_cjs.cn("text-error text-sm font-normal", className), ...props, children: content });
+}
+function FieldGroup({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "field-group",
+      className: chunkH2BWO3SI_cjs.cn(
+        "group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function FieldLabel({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    chunkS3ANEJJ7_cjs.Label,
+    {
+      "data-slot": "field-label",
+      className: chunkH2BWO3SI_cjs.cn(
+        "group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50",
+        "has-[>[data-slot=field]]:border-border has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4",
+        "has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function FieldLegend({ className, variant = "legend", ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "legend",
+    {
+      "data-slot": "field-legend",
+      "data-variant": variant,
+      className: chunkH2BWO3SI_cjs.cn("mb-3 font-medium", "data-[variant=legend]:text-base", "data-[variant=label]:text-sm", className),
+      ...props
+    }
+  );
+}
+function FieldSeparator({ children, className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-slot": "field-separator",
+      "data-content": !!children,
+      className: chunkH2BWO3SI_cjs.cn("relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(chunkUIOBJSKZ_cjs.Separator, { className: "absolute inset-0 top-1/2" }),
+        children ? /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: "bg-background text-muted-foreground relative mx-auto block w-fit px-2",
+            "data-slot": "field-separator-content",
+            children
+          }
+        ) : null
+      ]
+    }
+  );
+}
+function FieldSet({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "fieldset",
+    {
+      "data-slot": "field-set",
+      className: chunkH2BWO3SI_cjs.cn(
+        "flex flex-col gap-6",
+        "has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function FieldTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "field-label",
+      className: chunkH2BWO3SI_cjs.cn(
+        "flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+exports.Field = Field;
+exports.FieldContent = FieldContent;
+exports.FieldDescription = FieldDescription;
+exports.FieldError = FieldError;
+exports.FieldGroup = FieldGroup;
+exports.FieldLabel = FieldLabel;
+exports.FieldLegend = FieldLegend;
+exports.FieldSeparator = FieldSeparator;
+exports.FieldSet = FieldSet;
+exports.FieldTitle = FieldTitle;

package/dist/chunk-NGVFYKAT.js

@@ -0,0 +1,29 @@
+import { cn } from './chunk-ZD2QRAOX.js';
+import { Avatar as Avatar$1 } from 'radix-ui';
+import { jsx } from 'react/jsx-runtime';
+
+function Avatar({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Avatar$1.Root,
+    {
+      "data-slot": "avatar",
+      className: cn("relative flex size-8 shrink-0 overflow-hidden rounded", className),
+      ...props
+    }
+  );
+}
+function AvatarImage({ className, ...props }) {
+  return /* @__PURE__ */ jsx(Avatar$1.Image, { "data-slot": "avatar-image", className: cn("aspect-square size-full", className), ...props });
+}
+function AvatarFallback({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Avatar$1.Fallback,
+    {
+      "data-slot": "avatar-fallback",
+      className: cn("bg-muted flex size-full items-center justify-center rounded-full", className),
+      ...props
+    }
+  );
+}
+
+export { Avatar, AvatarFallback, AvatarImage };

package/dist/chunk-NU5UQPBX.cjs

@@ -0,0 +1,25 @@
+'use strict';
+
+var chunkH2BWO3SI_cjs = require('./chunk-H2BWO3SI.cjs');
+var jsxRuntime = require('react/jsx-runtime');
+
+function Textarea({ className, invalid = false, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "textarea",
+    {
+      "data-slot": "textarea",
+      "aria-invalid": props["aria-invalid"] || invalid,
+      className: chunkH2BWO3SI_cjs.cn(
+        "border-input dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none md:text-sm",
+        "placeholder:text-muted-foreground",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        "aria-invalid:ring-error/20 dark:aria-invalid:ring-error/40 aria-invalid:border-error",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+exports.Textarea = Textarea;

package/dist/chunk-OQCNPNPS.js

@@ -0,0 +1,23 @@
+import { cn } from './chunk-ZD2QRAOX.js';
+import { jsx } from 'react/jsx-runtime';
+
+function Textarea({ className, invalid = false, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "textarea",
+    {
+      "data-slot": "textarea",
+      "aria-invalid": props["aria-invalid"] || invalid,
+      className: cn(
+        "border-input dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none md:text-sm",
+        "placeholder:text-muted-foreground",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        "aria-invalid:ring-error/20 dark:aria-invalid:ring-error/40 aria-invalid:border-error",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+export { Textarea };

package/dist/chunk-S3ANEJJ7.cjs

@@ -0,0 +1,22 @@
+'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,
+    {
+      "data-slot": "label",
+      className: chunkH2BWO3SI_cjs.cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none",
+        "group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+exports.Label = Label;