@szum-tech/design-system 3.5.0 → 3.6.0

package/dist/{chunk-Y6EVJSAH.cjs → chunk-3ZRMIVJM.cjs}

@@ -3749,6 +3749,12 @@ function RemoveScrollSideCar(props) {
     if ("touches" in event && moveDirection === "h" && target.type === "range") {
       return false;
     }
+    var selection = window.getSelection();
+    var anchorNode = selection && selection.anchorNode;
+    var isTouchingSelection = anchorNode ? anchorNode === target || anchorNode.contains(target) : false;
+    if (isTouchingSelection) {
+      return false;
+    }
     var canBeScrolledInMainDirection = locationCouldBeScrolled(moveDirection, target);
     if (!canBeScrolledInMainDirection) {
       return true;

package/dist/chunk-54PWKHYF.cjs

@@ -0,0 +1,58 @@
+'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 badgeVariants = classVarianceAuthority.cva(
+  "border-border focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-error/20 dark:aria-invalid:ring-error/40 aria-invalid:border-error inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden whitespace-nowrap rounded border px-2 py-0.5 text-xs font-medium transition-[color,box-shadow] focus-visible:ring [&>svg]:pointer-events-none [&>svg]:size-3",
+  {
+    variants: {
+      variant: {
+        primary: "bg-primary text-primary-foreground [a&]:hover:bg-primary/90 border-transparent",
+        secondary: "bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90 border-transparent",
+        outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+        success: "bg-success text-success-foreground [a&]:hover:bg-success/90 border-transparent focus-visible:ring-success/20",
+        warning: "bg-warning text-warning-foreground [a&]:hover:bg-warning/90 border-transparent focus-visible:ring-warning/20",
+        error: "bg-error [a&]:hover:bg-error/90 focus-visible:ring-error/20 dark:focus-visible:ring-error/40 dark:bg-error/60 text-error-foreground border-transparent"
+      }
+    },
+    defaultVariants: {
+      variant: "primary"
+    }
+  }
+);
+function Badge({ className, variant = "primary", asChild = false, ...props }) {
+  const Comp = asChild ? radixUi.Slot.Slot : "span";
+  return /* @__PURE__ */ jsxRuntime.jsx(Comp, { "data-slot": "badge", className: chunkH2BWO3SI_cjs.cn(badgeVariants({ variant }), className), ...props });
+}
+function BadgeButton({ className, asChild = false, ...props }) {
+  const Comp = asChild ? radixUi.Slot.Slot : "span";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Comp,
+    {
+      "data-slot": "badge-button",
+      className: chunkH2BWO3SI_cjs.cn(
+        "-me-0.5 inline-flex size-3.5 cursor-pointer items-center justify-center rounded-md p-0 leading-none opacity-60 transition-all hover:opacity-100 [&>svg]:size-3.5! [&>svg]:opacity-100!",
+        className
+      ),
+      role: "button",
+      ...props
+    }
+  );
+}
+function BadgeDot({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      "data-slot": "badge-dot",
+      className: chunkH2BWO3SI_cjs.cn("size-1.5 rounded-full bg-[currentColor] opacity-75", className),
+      ...props
+    }
+  );
+}
+
+exports.Badge = Badge;
+exports.BadgeButton = BadgeButton;
+exports.BadgeDot = BadgeDot;

package/dist/chunk-5Q3H4MOX.js

@@ -0,0 +1,123 @@
+import { cn } from './chunk-ZD2QRAOX.js';
+import { Dialog as Dialog$1 } from 'radix-ui';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { XIcon } from 'lucide-react';
+import { twMerge } from 'tailwind-merge';
+import { cva } from 'class-variance-authority';
+
+function Dialog(props) {
+  return /* @__PURE__ */ jsx(Dialog$1.Root, { "data-slot": "dialog", ...props });
+}
+function DialogClose(props) {
+  return /* @__PURE__ */ jsx(Dialog$1.Close, { "data-slot": "dialog-close", ...props });
+}
+var dialogContentVariants = cva(
+  [
+    "bg-background fixed top-[50%] left-[50%] z-50 grid w-full gap-4 rounded border border-border p-6 shadow-lg duration-200 translate-x-[-50%] translate-y-[-50%] max-w-[calc(100%-1rem)]",
+    "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 "
+  ],
+  {
+    variants: {
+      width: {
+        xs: "w-xs",
+        sm: "w-sm",
+        md: "w-md",
+        lg: "w-lg",
+        xl: "w-xl",
+        "2xl": "w-2xl",
+        "3xl": "w-3xl",
+        "4xl": "w-4xl",
+        "5xl": "w-5xl",
+        "6xl": "w-6xl",
+        full: "w-full"
+      }
+    },
+    defaultVariants: {
+      width: "md"
+    }
+  }
+);
+function DialogContent({
+  className,
+  children,
+  width = "md",
+  showCloseButton = false,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(Dialog$1.Portal, { "data-slot": "dialog-portal", children: [
+    /* @__PURE__ */ jsx(
+      Dialog$1.Overlay,
+      {
+        "data-slot": "dialog-overlay",
+        className: "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 bg-background/80 fixed inset-0 z-50 backdrop-blur-xs"
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      Dialog$1.Content,
+      {
+        "data-slot": "dialog-content",
+        className: twMerge(dialogContentVariants({ width }), className),
+        ...props,
+        children: [
+          children,
+          showCloseButton ? /* @__PURE__ */ jsxs(
+            Dialog$1.Close,
+            {
+              "data-slot": "dialog-close",
+              className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+              children: [
+                /* @__PURE__ */ jsx(XIcon, {}),
+                /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+              ]
+            }
+          ) : null
+        ]
+      }
+    )
+  ] });
+}
+function DialogTrigger({ ...props }) {
+  return /* @__PURE__ */ jsx(Dialog$1.Trigger, { "data-slot": "dialog-trigger", ...props });
+}
+function DialogHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "dialog-header",
+      className: cn("flex flex-col gap-2 text-center sm:text-left", className),
+      ...props
+    }
+  );
+}
+function DialogFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "dialog-footer",
+      className: cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className),
+      ...props
+    }
+  );
+}
+function DialogTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Dialog$1.Title,
+    {
+      "data-slot": "dialog-title",
+      className: cn("text-lg leading-none font-semibold", className),
+      ...props
+    }
+  );
+}
+function DialogDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Dialog$1.Description,
+    {
+      "data-slot": "dialog-description",
+      className: cn("text-muted-foreground text-sm", className),
+      ...props
+    }
+  );
+}
+
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger };

package/dist/chunk-6WGZMVJT.cjs

@@ -0,0 +1,132 @@
+'use strict';
+
+var chunkH2BWO3SI_cjs = require('./chunk-H2BWO3SI.cjs');
+var radixUi = require('radix-ui');
+var jsxRuntime = require('react/jsx-runtime');
+var lucideReact = require('lucide-react');
+var tailwindMerge = require('tailwind-merge');
+var classVarianceAuthority = require('class-variance-authority');
+
+function Dialog(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(radixUi.Dialog.Root, { "data-slot": "dialog", ...props });
+}
+function DialogClose(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(radixUi.Dialog.Close, { "data-slot": "dialog-close", ...props });
+}
+var dialogContentVariants = classVarianceAuthority.cva(
+  [
+    "bg-background fixed top-[50%] left-[50%] z-50 grid w-full gap-4 rounded border border-border p-6 shadow-lg duration-200 translate-x-[-50%] translate-y-[-50%] max-w-[calc(100%-1rem)]",
+    "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 "
+  ],
+  {
+    variants: {
+      width: {
+        xs: "w-xs",
+        sm: "w-sm",
+        md: "w-md",
+        lg: "w-lg",
+        xl: "w-xl",
+        "2xl": "w-2xl",
+        "3xl": "w-3xl",
+        "4xl": "w-4xl",
+        "5xl": "w-5xl",
+        "6xl": "w-6xl",
+        full: "w-full"
+      }
+    },
+    defaultVariants: {
+      width: "md"
+    }
+  }
+);
+function DialogContent({
+  className,
+  children,
+  width = "md",
+  showCloseButton = false,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(radixUi.Dialog.Portal, { "data-slot": "dialog-portal", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      radixUi.Dialog.Overlay,
+      {
+        "data-slot": "dialog-overlay",
+        className: "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 bg-background/80 fixed inset-0 z-50 backdrop-blur-xs"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      radixUi.Dialog.Content,
+      {
+        "data-slot": "dialog-content",
+        className: tailwindMerge.twMerge(dialogContentVariants({ width }), className),
+        ...props,
+        children: [
+          children,
+          showCloseButton ? /* @__PURE__ */ jsxRuntime.jsxs(
+            radixUi.Dialog.Close,
+            {
+              "data-slot": "dialog-close",
+              className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, {}),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
+              ]
+            }
+          ) : null
+        ]
+      }
+    )
+  ] });
+}
+function DialogTrigger({ ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(radixUi.Dialog.Trigger, { "data-slot": "dialog-trigger", ...props });
+}
+function DialogHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "dialog-header",
+      className: chunkH2BWO3SI_cjs.cn("flex flex-col gap-2 text-center sm:text-left", className),
+      ...props
+    }
+  );
+}
+function DialogFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "dialog-footer",
+      className: chunkH2BWO3SI_cjs.cn("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,
+    {
+      "data-slot": "dialog-title",
+      className: chunkH2BWO3SI_cjs.cn("text-lg leading-none font-semibold", className),
+      ...props
+    }
+  );
+}
+function DialogDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    radixUi.Dialog.Description,
+    {
+      "data-slot": "dialog-description",
+      className: chunkH2BWO3SI_cjs.cn("text-muted-foreground text-sm", 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-FUS2IGBX.js

@@ -0,0 +1,54 @@
+import { cn } from './chunk-ZD2QRAOX.js';
+import { Slot } from 'radix-ui';
+import { cva } from 'class-variance-authority';
+import { jsx } from 'react/jsx-runtime';
+
+var badgeVariants = cva(
+  "border-border focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-error/20 dark:aria-invalid:ring-error/40 aria-invalid:border-error inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden whitespace-nowrap rounded border px-2 py-0.5 text-xs font-medium transition-[color,box-shadow] focus-visible:ring [&>svg]:pointer-events-none [&>svg]:size-3",
+  {
+    variants: {
+      variant: {
+        primary: "bg-primary text-primary-foreground [a&]:hover:bg-primary/90 border-transparent",
+        secondary: "bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90 border-transparent",
+        outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+        success: "bg-success text-success-foreground [a&]:hover:bg-success/90 border-transparent focus-visible:ring-success/20",
+        warning: "bg-warning text-warning-foreground [a&]:hover:bg-warning/90 border-transparent focus-visible:ring-warning/20",
+        error: "bg-error [a&]:hover:bg-error/90 focus-visible:ring-error/20 dark:focus-visible:ring-error/40 dark:bg-error/60 text-error-foreground border-transparent"
+      }
+    },
+    defaultVariants: {
+      variant: "primary"
+    }
+  }
+);
+function Badge({ className, variant = "primary", asChild = false, ...props }) {
+  const Comp = asChild ? Slot.Slot : "span";
+  return /* @__PURE__ */ jsx(Comp, { "data-slot": "badge", className: cn(badgeVariants({ variant }), className), ...props });
+}
+function BadgeButton({ className, asChild = false, ...props }) {
+  const Comp = asChild ? Slot.Slot : "span";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      "data-slot": "badge-button",
+      className: cn(
+        "-me-0.5 inline-flex size-3.5 cursor-pointer items-center justify-center rounded-md p-0 leading-none opacity-60 transition-all hover:opacity-100 [&>svg]:size-3.5! [&>svg]:opacity-100!",
+        className
+      ),
+      role: "button",
+      ...props
+    }
+  );
+}
+function BadgeDot({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-slot": "badge-dot",
+      className: cn("size-1.5 rounded-full bg-[currentColor] opacity-75", className),
+      ...props
+    }
+  );
+}
+
+export { Badge, BadgeButton, BadgeDot };

package/dist/{chunk-LLQ52RQE.js → chunk-GWRG4LH5.js}

@@ -1,4 +1,4 @@
-import { useComposedRefs } from './chunk-U4AWAABZ.js';
+import { useComposedRefs } from './chunk-O7QFYWMK.js';
 import { Spinner } from './chunk-P5IUC7HJ.js';
 import { useDirection, Direction } from './chunk-H5O5L6XT.js';
 import { useLazyRef, useIsomorphicLayoutEffect } from './chunk-DFD2WUOU.js';

package/dist/{chunk-YHDEDCPE.cjs → chunk-JXZ27PK6.cjs}

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkY6EVJSAH_cjs = require('./chunk-Y6EVJSAH.cjs');
+var chunk3ZRMIVJM_cjs = require('./chunk-3ZRMIVJM.cjs');
 var chunk3WSQRFUY_cjs = require('./chunk-3WSQRFUY.cjs');
 var chunkEW6TE3N5_cjs = require('./chunk-EW6TE3N5.cjs');
 var chunk7EYMOUWG_cjs = require('./chunk-7EYMOUWG.cjs');
@@ -315,7 +315,7 @@ function StepperNav({ className, children, asChild, ref, ...listProps }) {
   const isClickFocusRef = React5__namespace.useRef(false);
   const itemsRef = React5__namespace.useRef(/* @__PURE__ */ new Map());
   const listRef = React5__namespace.useRef(null);
-  const composedRef = chunkY6EVJSAH_cjs.useComposedRefs(ref, listRef);
+  const composedRef = chunk3ZRMIVJM_cjs.useComposedRefs(ref, listRef);
   const onItemFocus = React5__namespace.useCallback((tabStopId2) => {
     setTabStopId(tabStopId2);
   }, []);
@@ -533,7 +533,7 @@ function StepperTrigger({ asChild, disabled, className, ref, ...triggerProps })
   const isTabStop = focusContext.tabStopId === triggerId;
   const dataState = getDataState(value, itemValue, stepState, steps);
   const triggerRef = React5__namespace.useRef(null);
-  const composedRef = chunkY6EVJSAH_cjs.useComposedRefs(ref, triggerRef);
+  const composedRef = chunk3ZRMIVJM_cjs.useComposedRefs(ref, triggerRef);
   const isArrowKeyPressedRef = React5__namespace.useRef(false);
   const isMouseClickRef = React5__namespace.useRef(false);
   React5__namespace.useEffect(() => {

package/dist/chunk-N2Q3D32M.js

@@ -0,0 +1,86 @@
+import { cn } from './chunk-ZD2QRAOX.js';
+import * as React from 'react';
+import { Slot } from 'radix-ui';
+import { cva } from 'class-variance-authority';
+import { jsx } from 'react/jsx-runtime';
+
+var colorSwatchVariants = cva(
+  "box-border rounded border border-border shadow-sm [background-clip:padding-box] data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+  {
+    variants: {
+      size: {
+        default: "size-8",
+        sm: "size-6",
+        lg: "size-12"
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
+
+// src/components/color-swatch/color-swatch.utils.ts
+function getIsCssColor(v) {
+  try {
+    return typeof CSS !== "undefined" && typeof CSS.supports === "function" ? CSS.supports("color", v) : true;
+  } catch {
+    return false;
+  }
+}
+function getHasAlpha(v) {
+  const s = v.trim().toLowerCase();
+  if (s === "transparent") return true;
+  if (/^#(?:[0-9a-f]{4}|[0-9a-f]{8})$/i.test(s)) return true;
+  if (/\b(?:rgba|hsla)\s*\(/i.test(s)) return true;
+  return /\b(?:rgb|hsl|lab|lch|oklab|oklch|color)\s*\([^)]*\/\s*[\d.]+%?\s*\)/i.test(s);
+}
+function ColorSwatch({
+  color,
+  size = "default",
+  asChild = false,
+  disabled = false,
+  withoutTransparency = false,
+  className,
+  style,
+  ...props
+}) {
+  const colorValue = color?.trim();
+  const backgroundStyle = React.useMemo(() => {
+    if (!colorValue) {
+      return {
+        background: "linear-gradient(to bottom right, transparent calc(50% - 1px), hsl(var(--destructive)) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)) no-repeat"
+      };
+    }
+    if (!getIsCssColor(colorValue)) {
+      return { backgroundColor: "transparent" };
+    }
+    if (!withoutTransparency && getHasAlpha(colorValue)) {
+      return {
+        background: `linear-gradient(${colorValue}, ${colorValue}), repeating-conic-gradient(#ccc 0% 25%, #fff 0% 50%) 0% 50% / 10px 10px`
+      };
+    }
+    return { backgroundColor: colorValue };
+  }, [colorValue, withoutTransparency]);
+  const ariaLabel = !colorValue ? "No color selected" : `Color swatch: ${colorValue}`;
+  const Primitive = asChild ? Slot.Slot : "div";
+  return /* @__PURE__ */ jsx(
+    Primitive,
+    {
+      role: "img",
+      "aria-label": ariaLabel,
+      "aria-disabled": disabled || void 0,
+      "data-disabled": disabled ? "" : void 0,
+      "data-slot": "color-swatch",
+      ...props,
+      className: cn(colorSwatchVariants({ size }), className),
+      style: {
+        ...backgroundStyle,
+        forcedColorAdjust: "none",
+        ...style
+      }
+    }
+  );
+}
+
+export { ColorSwatch };

package/dist/{chunk-U4AWAABZ.js → chunk-O7QFYWMK.js}

@@ -3728,6 +3728,12 @@ function RemoveScrollSideCar(props) {
     if ("touches" in event && moveDirection === "h" && target.type === "range") {
       return false;
     }
+    var selection = window.getSelection();
+    var anchorNode = selection && selection.anchorNode;
+    var isTouchingSelection = anchorNode ? anchorNode === target || anchorNode.contains(target) : false;
+    if (isTouchingSelection) {
+      return false;
+    }
     var canBeScrolledInMainDirection = locationCouldBeScrolled(moveDirection, target);
     if (!canBeScrolledInMainDirection) {
       return true;

package/dist/chunk-Z33XUQTB.cjs

@@ -0,0 +1,108 @@
+'use strict';
+
+var chunkH2BWO3SI_cjs = require('./chunk-H2BWO3SI.cjs');
+var React = require('react');
+var radixUi = require('radix-ui');
+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 colorSwatchVariants = classVarianceAuthority.cva(
+  "box-border rounded border border-border shadow-sm [background-clip:padding-box] data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+  {
+    variants: {
+      size: {
+        default: "size-8",
+        sm: "size-6",
+        lg: "size-12"
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
+
+// src/components/color-swatch/color-swatch.utils.ts
+function getIsCssColor(v) {
+  try {
+    return typeof CSS !== "undefined" && typeof CSS.supports === "function" ? CSS.supports("color", v) : true;
+  } catch {
+    return false;
+  }
+}
+function getHasAlpha(v) {
+  const s = v.trim().toLowerCase();
+  if (s === "transparent") return true;
+  if (/^#(?:[0-9a-f]{4}|[0-9a-f]{8})$/i.test(s)) return true;
+  if (/\b(?:rgba|hsla)\s*\(/i.test(s)) return true;
+  return /\b(?:rgb|hsl|lab|lch|oklab|oklch|color)\s*\([^)]*\/\s*[\d.]+%?\s*\)/i.test(s);
+}
+function ColorSwatch({
+  color,
+  size = "default",
+  asChild = false,
+  disabled = false,
+  withoutTransparency = false,
+  className,
+  style,
+  ...props
+}) {
+  const colorValue = color?.trim();
+  const backgroundStyle = React__namespace.useMemo(() => {
+    if (!colorValue) {
+      return {
+        background: "linear-gradient(to bottom right, transparent calc(50% - 1px), hsl(var(--destructive)) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)) no-repeat"
+      };
+    }
+    if (!getIsCssColor(colorValue)) {
+      return { backgroundColor: "transparent" };
+    }
+    if (!withoutTransparency && getHasAlpha(colorValue)) {
+      return {
+        background: `linear-gradient(${colorValue}, ${colorValue}), repeating-conic-gradient(#ccc 0% 25%, #fff 0% 50%) 0% 50% / 10px 10px`
+      };
+    }
+    return { backgroundColor: colorValue };
+  }, [colorValue, withoutTransparency]);
+  const ariaLabel = !colorValue ? "No color selected" : `Color swatch: ${colorValue}`;
+  const Primitive = asChild ? radixUi.Slot.Slot : "div";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Primitive,
+    {
+      role: "img",
+      "aria-label": ariaLabel,
+      "aria-disabled": disabled || void 0,
+      "data-disabled": disabled ? "" : void 0,
+      "data-slot": "color-swatch",
+      ...props,
+      className: chunkH2BWO3SI_cjs.cn(colorSwatchVariants({ size }), className),
+      style: {
+        ...backgroundStyle,
+        forcedColorAdjust: "none",
+        ...style
+      }
+    }
+  );
+}
+
+exports.ColorSwatch = ColorSwatch;

package/dist/components/badge/index.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkRDYKJP7U_cjs = require('../../chunk-RDYKJP7U.cjs');
+var chunk54PWKHYF_cjs = require('../../chunk-54PWKHYF.cjs');
 require('../../chunk-H2BWO3SI.cjs');
 require('../../chunk-3376ZTRC.cjs');
 
@@ -8,5 +8,13 @@ require('../../chunk-3376ZTRC.cjs');
 
 Object.defineProperty(exports, "Badge", {
   enumerable: true,
-  get: function () { return chunkRDYKJP7U_cjs.Badge; }
+  get: function () { return chunk54PWKHYF_cjs.Badge; }
+});
+Object.defineProperty(exports, "BadgeButton", {
+  enumerable: true,
+  get: function () { return chunk54PWKHYF_cjs.BadgeButton; }
+});
+Object.defineProperty(exports, "BadgeDot", {
+  enumerable: true,
+  get: function () { return chunk54PWKHYF_cjs.BadgeDot; }
 });

package/dist/components/badge/index.d.cts

@@ -1,10 +1,11 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
+import React__default from 'react';
 import { VariantProps } from 'class-variance-authority';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 
 declare const badgeVariants: (props?: ({
-    variant?: "default" | "secondary" | "error" | "outline" | null | undefined;
+    variant?: "primary" | "secondary" | "outline" | "success" | "warning" | "error" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 
 type BadgeVariantsProps = VariantProps<typeof badgeVariants>;
@@ -16,4 +17,12 @@ type BadgeProps = React.ComponentProps<"span"> & {
 };
 declare function Badge({ className, variant, asChild, ...props }: BadgeProps): react_jsx_runtime.JSX.Element;
 
-export { Badge, type BadgeProps, type BadgeVariant };
+type BadgeButtonProps = React__default.ComponentProps<"button"> & {
+    asChild?: boolean;
+};
+declare function BadgeButton({ className, asChild, ...props }: BadgeButtonProps): react_jsx_runtime.JSX.Element;
+
+type BadgeDotProps = React.ComponentProps<"span">;
+declare function BadgeDot({ className, ...props }: React.ComponentProps<"span">): react_jsx_runtime.JSX.Element;
+
+export { Badge, BadgeButton, type BadgeButtonProps, BadgeDot, type BadgeDotProps, type BadgeProps, type BadgeVariant };