@snapcall/design-system 1.16.0 → 1.17.1

package/dist/index.js

@@ -1133,6 +1133,7 @@ __export(src_exports, {
   Sheet: () => Sheet,
   SheetClose: () => SheetClose,
   SheetContent: () => SheetContent,
+  SheetDescription: () => SheetDescription,
   SheetHeader: () => SheetHeader,
   SheetTitle: () => SheetTitle,
   SheetTrigger: () => SheetTrigger,
@@ -1156,6 +1157,7 @@ __export(src_exports, {
   Signal2Icon: () => Signal2Icon,
   Signal3Icon: () => Signal3Icon,
   SimcardIcon: () => SimcardIcon,
+  Skeleton: () => Skeleton,
   SkewIcon: () => SkewIcon,
   SkipBackIcon: () => SkipBackIcon,
   SkipForwardIcon: () => SkipForwardIcon,
@@ -54456,7 +54458,16 @@ var Sheet = SheetPrimitive.Root;
 var SheetTrigger = SheetPrimitive.Trigger;
 var SheetClose = React17.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime1243.jsx)(SheetPrimitive.Close, __spreadProps(__spreadValues({}, props), { ref, asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime1243.jsx)(Button, { size: "sm", variant: "secondary", icon: true, children: /* @__PURE__ */ (0, import_jsx_runtime1243.jsx)(XCloseIcon, { size: 16 }) }) }));
+  return /* @__PURE__ */ (0, import_jsx_runtime1243.jsx)(
+    SheetPrimitive.Close,
+    __spreadProps(__spreadValues({
+      className: cn("absolute right-0 top-0", className)
+    }, props), {
+      ref,
+      asChild: true,
+      children: /* @__PURE__ */ (0, import_jsx_runtime1243.jsx)(Button, { size: "sm", variant: "secondary", icon: true, children: /* @__PURE__ */ (0, import_jsx_runtime1243.jsx)(XCloseIcon, { size: 16 }) })
+    })
+  );
 });
 SheetClose.displayName = SheetPrimitive.Close.displayName;
 var SheetPortal = SheetPrimitive.Portal;
@@ -54537,12 +54548,17 @@ var SheetHeader = (_a) => {
   } = _b, props = __objRest(_b, [
     "className"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime1243.jsx)("div", __spreadValues({ className: cn("flex justify-between", className) }, props));
+  return /* @__PURE__ */ (0, import_jsx_runtime1243.jsx)(
+    "div",
+    __spreadValues({
+      className: cn("flex justify-between relative flex-col gap-2", className)
+    }, props)
+  );
 };
 SheetHeader.displayName = "SheetHeader";
 var SheetTitle = React17.forwardRef((_a, ref) => {
   var _b = _a, { className, icon } = _b, props = __objRest(_b, ["className", "icon"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime1243.jsxs)("div", { className: "flex gap-3 items-center p-2 overflow-hidden", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime1243.jsxs)("div", { className: "flex gap-3 items-center py-2 pr-2 overflow-hidden mr-9", children: [
     icon && React17.cloneElement(icon, {
       size: 18,
       className: cn("shrink-0", icon.props.className)
@@ -54557,14 +54573,41 @@ var SheetTitle = React17.forwardRef((_a, ref) => {
   ] });
 });
 SheetTitle.displayName = SheetPrimitive.Title.displayName;
+var SheetDescription = React17.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime1243.jsx)(
+    SheetPrimitive.Description,
+    __spreadValues({
+      ref,
+      className: cn("text-sm text-gray-700", className)
+    }, props)
+  );
+});
+SheetDescription.displayName = SheetPrimitive.Description.displayName;
+
+// src/components/Skeleton/Skeleton.tsx
+var import_jsx_runtime1244 = require("react/jsx-runtime");
+function Skeleton(_a) {
+  var _b = _a, {
+    className
+  } = _b, props = __objRest(_b, [
+    "className"
+  ]);
+  return /* @__PURE__ */ (0, import_jsx_runtime1244.jsx)(
+    "div",
+    __spreadValues({
+      className: cn("animate-pulse rounded-full bg-gray-100", className)
+    }, props)
+  );
+}
 
 // src/components/Switch/Switch.tsx
 var React18 = __toESM(require("react"));
 var SwitchPrimitive = __toESM(require("@radix-ui/react-switch"));
-var import_jsx_runtime1244 = require("react/jsx-runtime");
+var import_jsx_runtime1245 = require("react/jsx-runtime");
 var Switch = React18.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime1244.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime1245.jsx)(
     SwitchPrimitive.Root,
     __spreadProps(__spreadValues({
       className: cn(
@@ -54573,7 +54616,7 @@ var Switch = React18.forwardRef((_a, ref) => {
       )
     }, props), {
       ref,
-      children: /* @__PURE__ */ (0, import_jsx_runtime1244.jsx)(SwitchPrimitive.Thumb, { className: "inline-block w-4 h-4 bg-gray-600 rounded-full translate-x-0.5 data-[state=checked]:translate-x-5 data-[state=checked]:bg-white transition-transform ease-linear will-change-transform" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime1245.jsx)(SwitchPrimitive.Thumb, { className: "inline-block w-4 h-4 bg-gray-600 rounded-full translate-x-0.5 data-[state=checked]:translate-x-5 data-[state=checked]:bg-white transition-transform ease-linear will-change-transform" })
     })
   );
 });
@@ -54581,10 +54624,10 @@ Switch.displayName = SwitchPrimitive.Root.displayName;
 
 // src/components/Table/Table.tsx
 var React19 = __toESM(require("react"));
-var import_jsx_runtime1245 = require("react/jsx-runtime");
+var import_jsx_runtime1246 = require("react/jsx-runtime");
 var Table = React19.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime1245.jsx)("div", { className: "w-full overflow-auto border rounded-lg", children: /* @__PURE__ */ (0, import_jsx_runtime1245.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime1246.jsx)("div", { className: "w-full overflow-auto border rounded-lg", children: /* @__PURE__ */ (0, import_jsx_runtime1246.jsx)(
     "table",
     __spreadValues({
       ref,
@@ -54595,7 +54638,7 @@ var Table = React19.forwardRef((_a, ref) => {
 Table.displayName = "Table";
 var TableHeader = React19.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime1245.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime1246.jsx)(
     "thead",
     __spreadValues({
       ref,
@@ -54606,7 +54649,7 @@ var TableHeader = React19.forwardRef((_a, ref) => {
 TableHeader.displayName = "TableHeader";
 var TableBody = React19.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime1245.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime1246.jsx)(
     "tbody",
     __spreadValues({
       ref,
@@ -54620,7 +54663,7 @@ var TableBody = React19.forwardRef((_a, ref) => {
 TableBody.displayName = "TableBody";
 var TableRow = React19.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime1245.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime1246.jsx)(
     "tr",
     __spreadValues({
       ref,
@@ -54634,7 +54677,7 @@ var TableRow = React19.forwardRef((_a, ref) => {
 TableRow.displayName = "TableRow";
 var TableHead = React19.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime1245.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime1246.jsx)(
     "th",
     __spreadValues({
       ref,
@@ -54648,7 +54691,7 @@ var TableHead = React19.forwardRef((_a, ref) => {
 TableHead.displayName = "TableHead";
 var TableCell = React19.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime1245.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime1246.jsx)(
     "td",
     __spreadValues({
       ref,
@@ -54662,16 +54705,16 @@ var TableCell = React19.forwardRef((_a, ref) => {
 TableCell.displayName = "TableCell";
 var TableEmpty = React19.forwardRef((_a, ref) => {
   var _b = _a, { className, title, description, children } = _b, props = __objRest(_b, ["className", "title", "description", "children"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime1245.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime1246.jsxs)(
     "div",
     __spreadProps(__spreadValues({
       ref,
       className: cn("flex flex-col gap-6 items-center py-12", className)
     }, props), {
       children: [
-        title && /* @__PURE__ */ (0, import_jsx_runtime1245.jsx)("span", { className: "text-lg font-semibold text-gray-1000", children: title }),
-        description && /* @__PURE__ */ (0, import_jsx_runtime1245.jsx)("span", { className: "text-sm font-normal text-gray-900", children: description }),
-        /* @__PURE__ */ (0, import_jsx_runtime1245.jsx)("div", { children })
+        title && /* @__PURE__ */ (0, import_jsx_runtime1246.jsx)("span", { className: "text-lg font-semibold text-gray-1000", children: title }),
+        description && /* @__PURE__ */ (0, import_jsx_runtime1246.jsx)("span", { className: "text-sm font-normal text-gray-900", children: description }),
+        /* @__PURE__ */ (0, import_jsx_runtime1246.jsx)("div", { children })
       ]
     })
   );
@@ -54681,11 +54724,11 @@ TableEmpty.displayName = "TableEmpty";
 // src/components/Tabs/Tabs.tsx
 var React20 = __toESM(require("react"));
 var TabsPrimitive = __toESM(require("@radix-ui/react-tabs"));
-var import_jsx_runtime1246 = require("react/jsx-runtime");
+var import_jsx_runtime1247 = require("react/jsx-runtime");
 var Tabs = TabsPrimitive.Root;
 var TabsList = React20.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime1246.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime1247.jsx)(
     TabsPrimitive.List,
     __spreadValues({
       ref,
@@ -54699,7 +54742,7 @@ var TabsList = React20.forwardRef((_a, ref) => {
 TabsList.displayName = TabsPrimitive.List.displayName;
 var TabsTrigger = React20.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime1246.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime1247.jsx)(
     TabsPrimitive.Trigger,
     __spreadValues({
       ref,
@@ -54716,7 +54759,7 @@ var TabsTrigger = React20.forwardRef((_a, ref) => {
 TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
 var TabsContent = React20.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime1246.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime1247.jsx)(
     TabsPrimitive.Content,
     __spreadValues({
       ref,
@@ -54731,12 +54774,12 @@ TabsContent.displayName = TabsPrimitive.Content.displayName;
 
 // src/components/Textarea/Textarea.tsx
 var React21 = __toESM(require("react"));
-var import_jsx_runtime1247 = require("react/jsx-runtime");
+var import_jsx_runtime1248 = require("react/jsx-runtime");
 var Textarea = React21.forwardRef(
   (_a, ref) => {
     var _b = _a, { className, disabled } = _b, props = __objRest(_b, ["className", "disabled"]);
     const isDisabled = !!props["data-is-disabled"] || disabled;
-    return /* @__PURE__ */ (0, import_jsx_runtime1247.jsx)("div", { className: "flex gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime1247.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime1248.jsx)("div", { className: "flex gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime1248.jsx)(
       "div",
       {
         className: cn(
@@ -54747,7 +54790,7 @@ var Textarea = React21.forwardRef(
           },
           className
         ),
-        children: /* @__PURE__ */ (0, import_jsx_runtime1247.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime1248.jsx)(
           "textarea",
           __spreadProps(__spreadValues({}, props), {
             disabled: isDisabled,
@@ -54765,16 +54808,16 @@ Textarea.displayName = "Textarea";
 var React22 = __toESM(require("react"));
 var ToastPrimitives = __toESM(require("@radix-ui/react-toast"));
 var import_class_variance_authority5 = require("class-variance-authority");
-var import_jsx_runtime1248 = require("react/jsx-runtime");
+var import_jsx_runtime1249 = require("react/jsx-runtime");
 var ToastProvider = ToastPrimitives.Provider;
 var ToastViewport = React22.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime1248.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime1249.jsx)(
     ToastPrimitives.Viewport,
     __spreadValues({
       ref,
       className: cn(
-        "fixed top-8 left-1/2 -translate-x-1/2 z-[100] flex max-h-screen flex-col-reverse sm:flex-col w-max md:max-w-[420px]",
+        "fixed top-8 left-1/2 -translate-x-1/2 z-[100] flex max-h-screen flex-col-reverse sm:flex-col w-max max-w-[90vw] md:max-w-[420px]",
         className
       )
     }, props)
@@ -54797,7 +54840,7 @@ var toastVariants = (0, import_class_variance_authority5.cva)(
 );
 var Toast = React22.forwardRef((_a, ref) => {
   var _b = _a, { className, variant } = _b, props = __objRest(_b, ["className", "variant"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime1248.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime1249.jsx)(
     ToastPrimitives.Root,
     __spreadValues({
       ref,
@@ -54808,37 +54851,37 @@ var Toast = React22.forwardRef((_a, ref) => {
 Toast.displayName = ToastPrimitives.Root.displayName;
 var ToastAction = React22.forwardRef((_a, ref) => {
   var _b = _a, { className, altText } = _b, props = __objRest(_b, ["className", "altText"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime1248.jsx)(ToastPrimitives.Action, { altText, ref, asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime1248.jsx)(Button, __spreadValues({ size: "xs" }, props)) });
+  return /* @__PURE__ */ (0, import_jsx_runtime1249.jsx)(ToastPrimitives.Action, { altText, ref, asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime1249.jsx)(Button, __spreadValues({ size: "xs" }, props)) });
 });
 ToastAction.displayName = ToastPrimitives.Action.displayName;
 var ToastClose = React22.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime1248.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime1249.jsx)(
     ToastPrimitives.Close,
     __spreadProps(__spreadValues({
       ref,
       className: cn("focus:outline-none focus:ring-1", className),
       "toast-close": ""
     }, props), {
-      children: /* @__PURE__ */ (0, import_jsx_runtime1248.jsx)(XCloseIcon, { className: "text-white", size: 16 })
+      children: /* @__PURE__ */ (0, import_jsx_runtime1249.jsx)(XCloseIcon, { className: "text-white", size: 16 })
     })
   );
 });
 ToastClose.displayName = ToastPrimitives.Close.displayName;
 var ToastTitle = React22.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime1248.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime1249.jsx)(
     ToastPrimitives.Title,
     __spreadValues({
       ref,
-      className: cn("text-sm font-medium", className)
+      className: cn("text-sm font-medium truncate", className)
     }, props)
   );
 });
 ToastTitle.displayName = ToastPrimitives.Title.displayName;
 var ToastDescription = React22.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime1248.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime1249.jsx)(
     ToastPrimitives.Description,
     __spreadValues({
       ref,
@@ -54978,7 +55021,7 @@ function useToast({ toasterId = "default" } = {}) {
 }
 
 // src/components/Toaster/Toaster.tsx
-var import_jsx_runtime1249 = require("react/jsx-runtime");
+var import_jsx_runtime1250 = require("react/jsx-runtime");
 var ToastContent = ({
   title,
   description,
@@ -54986,19 +55029,19 @@ var ToastContent = ({
   actions,
   hideClose
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime1249.jsxs)("div", { className: "flex flex-col gap-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime1249.jsxs)("div", { className: "flex items-center gap-4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime1249.jsxs)("div", { className: "flex items-center flex-grow gap-2", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime1250.jsxs)("div", { className: "flex flex-col gap-2 overflow-hidden", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime1250.jsxs)("div", { className: "flex items-center gap-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime1250.jsxs)("div", { className: "flex items-center flex-grow gap-2 overflow-hidden", children: [
         icon && import_react1231.default.cloneElement(icon, {
           size: 16,
           className: cn("shrink-0", icon.props.className)
         }),
-        title && /* @__PURE__ */ (0, import_jsx_runtime1249.jsx)(ToastTitle, { children: title })
+        title && /* @__PURE__ */ (0, import_jsx_runtime1250.jsx)(ToastTitle, { children: title })
       ] }),
       actions,
-      !hideClose && /* @__PURE__ */ (0, import_jsx_runtime1249.jsx)(ToastClose, {})
+      !hideClose && /* @__PURE__ */ (0, import_jsx_runtime1250.jsx)(ToastClose, {})
     ] }),
-    description && /* @__PURE__ */ (0, import_jsx_runtime1249.jsx)(ToastDescription, { children: description })
+    description && /* @__PURE__ */ (0, import_jsx_runtime1250.jsx)(ToastDescription, { children: description })
   ] });
 };
 function Toaster(_a) {
@@ -55010,7 +55053,7 @@ function Toaster(_a) {
     "toasterId"
   ]);
   const { toasts } = useToast({ toasterId });
-  return /* @__PURE__ */ (0, import_jsx_runtime1249.jsxs)(ToastProvider, __spreadProps(__spreadValues({}, props), { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime1250.jsxs)(ToastProvider, __spreadProps(__spreadValues({}, props), { children: [
     toasts.filter((t) => t.parentId === toasterId).map(
       (_a2) => {
         var _b2 = _a2, {
@@ -55030,7 +55073,7 @@ function Toaster(_a) {
           "icon",
           "hideClose"
         ]);
-        return /* @__PURE__ */ (0, import_jsx_runtime1249.jsx)(Toast, __spreadProps(__spreadValues({}, props2), { children: /* @__PURE__ */ (0, import_jsx_runtime1249.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime1250.jsx)(Toast, __spreadProps(__spreadValues({}, props2), { children: /* @__PURE__ */ (0, import_jsx_runtime1250.jsx)(
           ToastContent,
           {
             title,
@@ -55042,27 +55085,27 @@ function Toaster(_a) {
         ) }), id);
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime1249.jsx)(ToastViewport, { className })
+    /* @__PURE__ */ (0, import_jsx_runtime1250.jsx)(ToastViewport, { className })
   ] }));
 }
 
 // src/components/Tooltip/Tooltip.tsx
 var React25 = __toESM(require("react"));
 var TooltipPrimitive = __toESM(require("@radix-ui/react-tooltip"));
-var import_jsx_runtime1250 = require("react/jsx-runtime");
+var import_jsx_runtime1251 = require("react/jsx-runtime");
 var TooltipProvider = (_a) => {
   var _b = _a, {
     delayDuration = 0
   } = _b, props = __objRest(_b, [
     "delayDuration"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime1250.jsx)(TooltipPrimitive.Provider, __spreadValues({ delayDuration }, props));
+  return /* @__PURE__ */ (0, import_jsx_runtime1251.jsx)(TooltipPrimitive.Provider, __spreadValues({ delayDuration }, props));
 };
 var Tooltip = TooltipPrimitive.Root;
 var TooltipTrigger = TooltipPrimitive.Trigger;
 var TooltipContent = React25.forwardRef((_a, ref) => {
   var _b = _a, { className, sideOffset = 4 } = _b, props = __objRest(_b, ["className", "sideOffset"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime1250.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime1251.jsx)(
     TooltipPrimitive.Content,
     __spreadValues({
       ref,
@@ -56151,6 +56194,7 @@ TooltipContent.displayName = TooltipPrimitive.Content.displayName;
   Sheet,
   SheetClose,
   SheetContent,
+  SheetDescription,
   SheetHeader,
   SheetTitle,
   SheetTrigger,
@@ -56174,6 +56218,7 @@ TooltipContent.displayName = TooltipPrimitive.Content.displayName;
   Signal2Icon,
   Signal3Icon,
   SimcardIcon,
+  Skeleton,
   SkewIcon,
   SkipBackIcon,
   SkipForwardIcon,