@snapcall/design-system 1.20.0 → 1.21.1

package/dist/chunk-IO5BLXCA.mjs

@@ -0,0 +1,97 @@
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues,
+  cn
+} from "./chunk-BOWIL6WZ.mjs";
+
+// src/components/Avatar/Avatar.tsx
+import { forwardRef } from "react";
+import { cva } from "cva";
+import { jsx, jsxs } from "react/jsx-runtime";
+var avatarSizes = cva({
+  variants: {
+    size: {
+      xxs: "w-[8px] h-[8px] rounded-[3px]",
+      xs: "w-[16px] h-[16px] rounded-[3px] text-[10px]",
+      sm: "w-[24px] h-[24px] rounded-[4px] text-md",
+      md: "w-[36px] h-[36px] rounded-[6px] text-md",
+      lg: "w-[45px] h-[45px] rounded-[8px] text-md",
+      xl: "w-[72px] h-[72px] rounded-[10px] text-[30px]"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+var avatarColors = {
+  amber: "bg-amber-200 text-amber-700 data-[size=xxs]:bg-amber-700",
+  red: "bg-red-300 text-red-700 data-[size=xxs]:bg-red-700",
+  green: "bg-green-300 text-green-700 data-[size=xxs]:bg-green-700",
+  plum: "bg-plum-300 text-plum-700 data-[size=xxs]:bg-plum-700",
+  crimson: "bg-crimson-300 text-crimson-700 data-[size=xxs]:bg-crimson-700",
+  blue: "bg-blue-300 text-blue-700 data-[size=xxs]:bg-blue-700",
+  purple: "bg-purple-300 text-purple-700 data-[size=xxs]:bg-purple-700",
+  violet: "bg-violet-300 text-violet-700 data-[size=xxs]:bg-violet-700",
+  indigo: "bg-indigo-300 text-indigo-700 data-[size=xxs]:bg-indigo-700",
+  cyan: "bg-cyan-300 text-cyan-700 data-[size=xxs]:bg-cyan-700",
+  teal: "bg-teal-300 text-teal-700 data-[size=xxs]:bg-teal-700",
+  grass: "bg-grass-300 text-grass-700 data-[size=xxs]:bg-grass-700",
+  brown: "bg-brown-300 text-brown-700 data-[size=xxs]:bg-brown-700",
+  lime: "bg-lime-300 text-lime-700 data-[size=xxs]:bg-lime-700",
+  yellow: "bg-yellow-300 text-yellow-700 data-[size=xxs]:bg-yellow-700",
+  gold: "bg-gold-300 text-gold-700 data-[size=xxs]:bg-gold-700",
+  bronze: "bg-bronze-300 text-bronze-700 data-[size=xxs]:bg-bronze-700",
+  gray: "bg-gray-300 text-gray-700 data-[size=xxs]:bg-gray-700"
+};
+var avatarVariants = cva({
+  variants: {
+    variant: avatarColors
+  },
+  defaultVariants: {
+    variant: "blue"
+  }
+});
+var getNameInitials = (name) => {
+  const initial = name[0].toUpperCase();
+  return initial;
+};
+var getColorFromName = (name) => {
+  const nameValue = Array.from(name).reduce(
+    (total, current) => current.charCodeAt(0) + total,
+    0
+  );
+  const colorIndex = nameValue % Object.keys(avatarColors).length;
+  return Object.keys(avatarColors)[colorIndex];
+};
+var Avatar = forwardRef(function Avatar2(_a, forwardedRef) {
+  var _b = _a, { size, className, icon, name, variant, image } = _b, other = __objRest(_b, ["size", "className", "icon", "name", "variant", "image"]);
+  const color = getColorFromName(name);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    __spreadProps(__spreadValues({
+      "data-size": size,
+      ref: forwardedRef,
+      className: cn(
+        "flex items-center justify-center font-semibold relative overflow-hidden shrink-0",
+        variant ? avatarVariants({ variant }) : avatarVariants({
+          variant: color
+        }),
+        avatarSizes({ size }),
+        {
+          relative: Boolean(icon)
+        },
+        className
+      )
+    }, other), {
+      children: [
+        image ? image : name && size !== "xxs" ? getNameInitials(name) : null,
+        icon && /* @__PURE__ */ jsx("span", { className: "absolute bottom-0 right-0", children: icon })
+      ]
+    })
+  );
+});
+
+export {
+  Avatar
+};

package/dist/chunk-N65I4EXR.mjs

@@ -0,0 +1,48 @@
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "./chunk-BOWIL6WZ.mjs";
+
+// src/icons/spinner.tsx
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var SpinnerIcon = forwardRef(
+  function SpinnerIcon2(_a, ref) {
+    var _b = _a, { size = 24, className = "animate-spin text-gray-1000" } = _b, other = __objRest(_b, ["size", "className"]);
+    return /* @__PURE__ */ jsxs(
+      "svg",
+      __spreadProps(__spreadValues({
+        ref,
+        width: size,
+        height: size,
+        viewBox: "0 0 25 24",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        className
+      }, other), {
+        children: [
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              opacity: "0.12",
+              d: "M24.5 12C24.5 18.6274 19.1274 24 12.5 24C5.87258 24 0.5 18.6274 0.5 12C0.5 5.37258 5.87258 0 12.5 0C19.1274 0 24.5 5.37258 24.5 12ZM3.668 12C3.668 16.8778 7.62222 20.832 12.5 20.832C17.3778 20.832 21.332 16.8778 21.332 12C21.332 7.12222 17.3778 3.168 12.5 3.168C7.62222 3.168 3.668 7.12222 3.668 12Z",
+              fill: "currentColor"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: "M22.916 12C23.7908 12 24.5108 12.7122 24.3956 13.5794C24.1641 15.323 23.5512 17.0011 22.5928 18.4912C21.3476 20.4272 19.5719 21.9643 17.4774 22.919C15.3829 23.8738 13.058 24.206 10.7799 23.8761C8.50179 23.5461 6.36667 22.5679 4.62912 21.0581C2.89158 19.5483 1.62494 17.5706 0.98025 15.3609C0.335563 13.1511 0.340035 10.8026 0.993131 8.5953C1.64623 6.38803 2.92039 4.41517 4.66367 2.91199C6.00545 1.75501 7.58156 0.913857 9.27571 0.441275C10.1184 0.206218 10.9241 0.819698 11.0462 1.68595C11.1683 2.55221 10.5575 3.33995 9.72694 3.61463C8.63201 3.97673 7.61359 4.55146 6.73246 5.31122C5.44941 6.41757 4.51162 7.86959 4.03094 9.49414C3.55027 11.1187 3.54697 12.8472 4.02146 14.4736C4.49595 16.1 5.4282 17.5555 6.70703 18.6668C7.98587 19.778 9.55732 20.4979 11.234 20.7408C12.9107 20.9836 14.6218 20.7391 16.1634 20.0364C17.7049 19.3337 19.0119 18.2024 19.9283 16.7775C20.5576 15.799 20.9846 14.7103 21.1903 13.5755C21.3464 12.7148 22.0412 12 22.916 12Z",
+              fill: "currentColor"
+            }
+          )
+        ]
+      })
+    );
+  }
+);
+
+export {
+  SpinnerIcon
+};

package/dist/{chunk-WST7J5RJ.mjs → chunk-RN2FGOFK.mjs}

@@ -2,9 +2,11 @@ import {
   XCloseIcon
 } from "./chunk-FMJFBQTF.mjs";
 import {
-  Button,
+  Button
+} from "./chunk-XI3KELZM.mjs";
+import {
   SpinnerIcon
-} from "./chunk-O46NQFTB.mjs";
+} from "./chunk-N65I4EXR.mjs";
 import {
   Checkbox
 } from "./chunk-ZMQWNJ3B.mjs";

package/dist/{chunk-O46NQFTB.mjs → chunk-XI3KELZM.mjs}

@@ -1,3 +1,6 @@
+import {
+  SpinnerIcon
+} from "./chunk-N65I4EXR.mjs";
 import {
   __objRest,
   __spreadProps,
@@ -9,48 +12,7 @@ import {
 import * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { cva } from "cva";
-
-// src/icons/spinner.tsx
-import { forwardRef } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-var SpinnerIcon = forwardRef(
-  function SpinnerIcon2(_a, ref) {
-    var _b = _a, { size = 24, className = "animate-spin text-gray-1000" } = _b, other = __objRest(_b, ["size", "className"]);
-    return /* @__PURE__ */ jsxs(
-      "svg",
-      __spreadProps(__spreadValues({
-        ref,
-        width: size,
-        height: size,
-        viewBox: "0 0 25 24",
-        fill: "none",
-        xmlns: "http://www.w3.org/2000/svg",
-        className
-      }, other), {
-        children: [
-          /* @__PURE__ */ jsx(
-            "path",
-            {
-              opacity: "0.12",
-              d: "M24.5 12C24.5 18.6274 19.1274 24 12.5 24C5.87258 24 0.5 18.6274 0.5 12C0.5 5.37258 5.87258 0 12.5 0C19.1274 0 24.5 5.37258 24.5 12ZM3.668 12C3.668 16.8778 7.62222 20.832 12.5 20.832C17.3778 20.832 21.332 16.8778 21.332 12C21.332 7.12222 17.3778 3.168 12.5 3.168C7.62222 3.168 3.668 7.12222 3.668 12Z",
-              fill: "currentColor"
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "path",
-            {
-              d: "M22.916 12C23.7908 12 24.5108 12.7122 24.3956 13.5794C24.1641 15.323 23.5512 17.0011 22.5928 18.4912C21.3476 20.4272 19.5719 21.9643 17.4774 22.919C15.3829 23.8738 13.058 24.206 10.7799 23.8761C8.50179 23.5461 6.36667 22.5679 4.62912 21.0581C2.89158 19.5483 1.62494 17.5706 0.98025 15.3609C0.335563 13.1511 0.340035 10.8026 0.993131 8.5953C1.64623 6.38803 2.92039 4.41517 4.66367 2.91199C6.00545 1.75501 7.58156 0.913857 9.27571 0.441275C10.1184 0.206218 10.9241 0.819698 11.0462 1.68595C11.1683 2.55221 10.5575 3.33995 9.72694 3.61463C8.63201 3.97673 7.61359 4.55146 6.73246 5.31122C5.44941 6.41757 4.51162 7.86959 4.03094 9.49414C3.55027 11.1187 3.54697 12.8472 4.02146 14.4736C4.49595 16.1 5.4282 17.5555 6.70703 18.6668C7.98587 19.778 9.55732 20.4979 11.234 20.7408C12.9107 20.9836 14.6218 20.7391 16.1634 20.0364C17.7049 19.3337 19.0119 18.2024 19.9283 16.7775C20.5576 15.799 20.9846 14.7103 21.1903 13.5755C21.3464 12.7148 22.0412 12 22.916 12Z",
-              fill: "currentColor"
-            }
-          )
-        ]
-      })
-    );
-  }
-);
-
-// src/components/Button/Button.tsx
-import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var buttonVariants = cva({
   base: "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium ring-offset-background transition-colors relative focus-visible:outline-none focus-visible:ring-2 disabled:select-none disabled:pointer-events-none disabled:opacity-40",
   variants: {
@@ -128,7 +90,7 @@ var Button = React.forwardRef(
     var _a2;
     const Comp = asChild ? Slot : "button";
     const sizesStyle = icon ? iconButtonSizes : buttonSizes;
-    return /* @__PURE__ */ jsx2(
+    return /* @__PURE__ */ jsx(
       Comp,
       __spreadProps(__spreadValues({
         className: cn(
@@ -139,15 +101,15 @@ var Button = React.forwardRef(
         disabled: (_a2 = props.disabled) != null ? _a2 : isLoading,
         type
       }, props), {
-        children: isLoading ? /* @__PURE__ */ jsxs2(Fragment, { children: [
-          /* @__PURE__ */ jsx2(
+        children: isLoading ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
             SpinnerIcon,
             {
               size: iconSizes[size || "md"],
               className: "absolute text-inherit animate-spin"
             }
           ),
-          /* @__PURE__ */ jsx2("span", { className: "flex gap-[inherit] invisible", children })
+          /* @__PURE__ */ jsx("span", { className: "flex gap-[inherit] invisible", children })
         ] }) : children
       })
     );
@@ -156,7 +118,6 @@ var Button = React.forwardRef(
 Button.displayName = "Button";
 
 export {
-  SpinnerIcon,
   buttonVariants,
   buttonSizes,
   iconButtonSizes,

package/dist/components/AlertDialog/index.mjs

@@ -1,7 +1,8 @@
 import {
   buttonSizes,
   buttonVariants
-} from "../../chunk-O46NQFTB.mjs";
+} from "../../chunk-XI3KELZM.mjs";
+import "../../chunk-N65I4EXR.mjs";
 import {
   __objRest,
   __spreadProps,

package/dist/components/Avatar/index.mjs

@@ -1,96 +1,7 @@
 import {
-  __objRest,
-  __spreadProps,
-  __spreadValues,
-  cn
-} from "../../chunk-BOWIL6WZ.mjs";
-
-// src/components/Avatar/Avatar.tsx
-import { forwardRef } from "react";
-import { cva } from "cva";
-import { jsx, jsxs } from "react/jsx-runtime";
-var avatarSizes = cva({
-  variants: {
-    size: {
-      xxs: "w-[8px] h-[8px] rounded-[3px]",
-      xs: "w-[16px] h-[16px] rounded-[3px] text-[10px]",
-      sm: "w-[24px] h-[24px] rounded-[4px] text-md",
-      md: "w-[36px] h-[36px] rounded-[6px] text-md",
-      lg: "w-[45px] h-[45px] rounded-[8px] text-md",
-      xl: "w-[72px] h-[72px] rounded-[10px] text-[30px]"
-    }
-  },
-  defaultVariants: {
-    size: "md"
-  }
-});
-var avatarColors = {
-  amber: "bg-amber-200 text-amber-700 data-[size=xxs]:bg-amber-700",
-  red: "bg-red-300 text-red-700 data-[size=xxs]:bg-red-700",
-  green: "bg-green-300 text-green-700 data-[size=xxs]:bg-green-700",
-  plum: "bg-plum-300 text-plum-700 data-[size=xxs]:bg-plum-700",
-  crimson: "bg-crimson-300 text-crimson-700 data-[size=xxs]:bg-crimson-700",
-  blue: "bg-blue-300 text-blue-700 data-[size=xxs]:bg-blue-700",
-  purple: "bg-purple-300 text-purple-700 data-[size=xxs]:bg-purple-700",
-  violet: "bg-violet-300 text-violet-700 data-[size=xxs]:bg-violet-700",
-  indigo: "bg-indigo-300 text-indigo-700 data-[size=xxs]:bg-indigo-700",
-  cyan: "bg-cyan-300 text-cyan-700 data-[size=xxs]:bg-cyan-700",
-  teal: "bg-teal-300 text-teal-700 data-[size=xxs]:bg-teal-700",
-  grass: "bg-grass-300 text-grass-700 data-[size=xxs]:bg-grass-700",
-  brown: "bg-brown-300 text-brown-700 data-[size=xxs]:bg-brown-700",
-  lime: "bg-lime-300 text-lime-700 data-[size=xxs]:bg-lime-700",
-  yellow: "bg-yellow-300 text-yellow-700 data-[size=xxs]:bg-yellow-700",
-  gold: "bg-gold-300 text-gold-700 data-[size=xxs]:bg-gold-700",
-  bronze: "bg-bronze-300 text-bronze-700 data-[size=xxs]:bg-bronze-700",
-  gray: "bg-gray-300 text-gray-700 data-[size=xxs]:bg-gray-700"
-};
-var avatarVariants = cva({
-  variants: {
-    variant: avatarColors
-  },
-  defaultVariants: {
-    variant: "blue"
-  }
-});
-var getNameInitials = (name) => {
-  const initial = name[0].toUpperCase();
-  return initial;
-};
-var getColorFromName = (name) => {
-  const nameValue = Array.from(name).reduce(
-    (total, current) => current.charCodeAt(0) + total,
-    0
-  );
-  const colorIndex = nameValue % Object.keys(avatarColors).length;
-  return Object.keys(avatarColors)[colorIndex];
-};
-var Avatar = forwardRef(function Avatar2(_a, forwardedRef) {
-  var _b = _a, { size, className, icon, name, variant, image } = _b, other = __objRest(_b, ["size", "className", "icon", "name", "variant", "image"]);
-  const color = getColorFromName(name);
-  return /* @__PURE__ */ jsxs(
-    "div",
-    __spreadProps(__spreadValues({
-      "data-size": size,
-      ref: forwardedRef,
-      className: cn(
-        "flex items-center justify-center font-semibold relative overflow-hidden shrink-0",
-        variant ? avatarVariants({ variant }) : avatarVariants({
-          variant: color
-        }),
-        avatarSizes({ size }),
-        {
-          relative: Boolean(icon)
-        },
-        className
-      )
-    }, other), {
-      children: [
-        image ? image : name && size !== "xxs" ? getNameInitials(name) : null,
-        icon && /* @__PURE__ */ jsx("span", { className: "absolute bottom-0 right-0", children: icon })
-      ]
-    })
-  );
-});
+  Avatar
+} from "../../chunk-IO5BLXCA.mjs";
+import "../../chunk-BOWIL6WZ.mjs";
 export {
   Avatar
 };

package/dist/components/Button/index.mjs

@@ -3,7 +3,8 @@ import {
   buttonSizes,
   buttonVariants,
   iconButtonSizes
-} from "../../chunk-O46NQFTB.mjs";
+} from "../../chunk-XI3KELZM.mjs";
+import "../../chunk-N65I4EXR.mjs";
 import "../../chunk-BOWIL6WZ.mjs";
 export {
   Button,

package/dist/components/Calendar/index.mjs

@@ -7,7 +7,8 @@ import {
 import {
   buttonVariants,
   iconButtonSizes
-} from "../../chunk-O46NQFTB.mjs";
+} from "../../chunk-XI3KELZM.mjs";
+import "../../chunk-N65I4EXR.mjs";
 import {
   __objRest,
   __spreadValues,

package/dist/components/Carousel/index.mjs

@@ -1,6 +1,7 @@
 import {
   Button
-} from "../../chunk-O46NQFTB.mjs";
+} from "../../chunk-XI3KELZM.mjs";
+import "../../chunk-N65I4EXR.mjs";
 import {
   __objRest,
   __spreadProps,

package/dist/components/Command/index.mjs

@@ -7,9 +7,10 @@ import {
   CommandList,
   CommandLoading,
   CommandSeparator
-} from "../../chunk-WST7J5RJ.mjs";
+} from "../../chunk-RN2FGOFK.mjs";
 import "../../chunk-FMJFBQTF.mjs";
-import "../../chunk-O46NQFTB.mjs";
+import "../../chunk-XI3KELZM.mjs";
+import "../../chunk-N65I4EXR.mjs";
 import "../../chunk-ZMQWNJ3B.mjs";
 import "../../chunk-AFJWE6PJ.mjs";
 import "../../chunk-BOWIL6WZ.mjs";

package/dist/components/CreatableSelect/index.mjs

@@ -3,14 +3,15 @@ import {
   CommandItem,
   CommandList,
   CommandLoading
-} from "../../chunk-WST7J5RJ.mjs";
+} from "../../chunk-RN2FGOFK.mjs";
 import {
   XCloseIcon
 } from "../../chunk-FMJFBQTF.mjs";
 import {
   Badge
 } from "../../chunk-YC4ZDBIC.mjs";
-import "../../chunk-O46NQFTB.mjs";
+import "../../chunk-XI3KELZM.mjs";
+import "../../chunk-N65I4EXR.mjs";
 import "../../chunk-ZMQWNJ3B.mjs";
 import "../../chunk-AFJWE6PJ.mjs";
 import {

package/dist/components/Dialog/index.mjs

@@ -4,7 +4,8 @@ import {
 import {
   buttonVariants,
   iconButtonSizes
-} from "../../chunk-O46NQFTB.mjs";
+} from "../../chunk-XI3KELZM.mjs";
+import "../../chunk-N65I4EXR.mjs";
 import {
   __objRest,
   __spreadProps,

package/dist/components/FilterButton/index.mjs

@@ -3,7 +3,8 @@ import {
 } from "../../chunk-YC4ZDBIC.mjs";
 import {
   Button
-} from "../../chunk-O46NQFTB.mjs";
+} from "../../chunk-XI3KELZM.mjs";
+import "../../chunk-N65I4EXR.mjs";
 import {
   __objRest,
   __spreadProps,

package/dist/components/MediaCard/index.d.mts

@@ -0,0 +1,21 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { HTMLAttributes } from 'react';
+
+type MediaCardProps = {
+    title: string;
+    description?: string;
+    duration?: number;
+    type: 'audio' | 'video' | 'image';
+    image?: string | JSX.Element;
+    action?: JSX.Element;
+    actionBehavior?: 'default' | 'hover';
+    moderationStatus?: 'processing' | 'flagged' | 'safe' | null;
+    isLoading?: boolean;
+    size: 'small' | 'medium' | 'large';
+} & HTMLAttributes<HTMLDivElement>;
+declare const MediaCard: {
+    ({ title, description, duration, type, image, action, actionBehavior, isLoading, size, className, ...otherProps }: MediaCardProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+export { MediaCard };

package/dist/components/MediaCard/index.d.ts

@@ -0,0 +1,21 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { HTMLAttributes } from 'react';
+
+type MediaCardProps = {
+    title: string;
+    description?: string;
+    duration?: number;
+    type: 'audio' | 'video' | 'image';
+    image?: string | JSX.Element;
+    action?: JSX.Element;
+    actionBehavior?: 'default' | 'hover';
+    moderationStatus?: 'processing' | 'flagged' | 'safe' | null;
+    isLoading?: boolean;
+    size: 'small' | 'medium' | 'large';
+} & HTMLAttributes<HTMLDivElement>;
+declare const MediaCard: {
+    ({ title, description, duration, type, image, action, actionBehavior, isLoading, size, className, ...otherProps }: MediaCardProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+export { MediaCard };