analytica-frontend-lib 1.0.58 → 1.0.59

package/dist/Skeleton/index.js

@@ -0,0 +1,191 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/Skeleton/Skeleton.tsx
+var Skeleton_exports = {};
+__export(Skeleton_exports, {
+  Skeleton: () => Skeleton,
+  SkeletonCard: () => SkeletonCard,
+  SkeletonCircle: () => SkeletonCircle,
+  SkeletonList: () => SkeletonList,
+  SkeletonRectangle: () => SkeletonRectangle,
+  SkeletonRounded: () => SkeletonRounded,
+  SkeletonTable: () => SkeletonTable,
+  SkeletonText: () => SkeletonText
+});
+module.exports = __toCommonJS(Skeleton_exports);
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var SKELETON_ANIMATION_CLASSES = {
+  pulse: "animate-pulse",
+  none: ""
+};
+var SKELETON_VARIANT_CLASSES = {
+  text: "h-4 bg-background-200 rounded",
+  circular: "bg-background-200 rounded-full",
+  rectangular: "bg-background-200",
+  rounded: "bg-background-200 rounded-lg"
+};
+var SPACING_CLASSES = {
+  none: "",
+  small: "space-y-1",
+  medium: "space-y-2",
+  large: "space-y-3"
+};
+var Skeleton = (0, import_react.forwardRef)(
+  ({
+    variant = "text",
+    width,
+    height,
+    animation = "pulse",
+    lines = 1,
+    spacing = "none",
+    className = "",
+    children,
+    ...props
+  }, ref) => {
+    const animationClass = SKELETON_ANIMATION_CLASSES[animation];
+    const variantClass = SKELETON_VARIANT_CLASSES[variant];
+    const spacingClass = SPACING_CLASSES[spacing];
+    const style = {
+      width: typeof width === "number" ? `${width}px` : width,
+      height: typeof height === "number" ? `${height}px` : height
+    };
+    if (variant === "text" && lines > 1) {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "div",
+        {
+          ref,
+          className: `flex flex-col ${spacingClass} ${className}`,
+          ...props,
+          children: Array.from({ length: lines }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "div",
+            {
+              className: `${variantClass} ${animationClass}`,
+              style: index === lines - 1 ? { width: "60%" } : void 0
+            },
+            index
+          ))
+        }
+      );
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        ref,
+        className: `${variantClass} ${animationClass} ${className}`,
+        style,
+        ...props,
+        children
+      }
+    );
+  }
+);
+var SkeletonText = (0, import_react.forwardRef)(
+  (props, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Skeleton, { ref, variant: "text", ...props })
+);
+var SkeletonCircle = (0, import_react.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Skeleton, { ref, variant: "circular", ...props }));
+var SkeletonRectangle = (0, import_react.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Skeleton, { ref, variant: "rectangular", ...props }));
+var SkeletonRounded = (0, import_react.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Skeleton, { ref, variant: "rounded", ...props }));
+var SkeletonCard = (0, import_react.forwardRef)(
+  ({
+    showAvatar = true,
+    showTitle = true,
+    showDescription = true,
+    showActions = true,
+    lines = 2,
+    className = "",
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "div",
+      {
+        ref,
+        className: `w-full p-4 bg-background border border-border-200 rounded-lg ${className}`,
+        ...props,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-start space-x-3", children: [
+            showAvatar && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SkeletonCircle, { width: 40, height: 40 }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex-1 space-y-2", children: [
+              showTitle && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SkeletonText, { width: "60%", height: 20 }),
+              showDescription && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SkeletonText, { lines, spacing: "small" })
+            ] })
+          ] }),
+          showActions && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex justify-end space-x-2 mt-4", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SkeletonRectangle, { width: 80, height: 32 }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SkeletonRectangle, { width: 80, height: 32 })
+          ] })
+        ]
+      }
+    );
+  }
+);
+var SkeletonList = (0, import_react.forwardRef)(
+  ({
+    items = 3,
+    showAvatar = true,
+    showTitle = true,
+    showDescription = true,
+    lines = 1,
+    className = "",
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref, className: `space-y-3 ${className}`, ...props, children: Array.from({ length: items }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-start space-x-3 p-3", children: [
+      showAvatar && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SkeletonCircle, { width: 32, height: 32 }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex-1 space-y-2", children: [
+        showTitle && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SkeletonText, { width: "40%", height: 16 }),
+        showDescription && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SkeletonText, { lines, spacing: "small" })
+      ] })
+    ] }, index)) });
+  }
+);
+var SkeletonTable = (0, import_react.forwardRef)(
+  ({ rows = 5, columns = 4, showHeader = true, className = "", ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ref, className: `w-full ${className}`, ...props, children: [
+      showHeader && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex space-x-2 mb-3", children: Array.from({ length: columns }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        SkeletonText,
+        {
+          width: `${100 / columns}%`,
+          height: 20
+        },
+        index
+      )) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "space-y-2", children: Array.from({ length: rows }, (_, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex space-x-2", children: Array.from({ length: columns }, (_2, colIndex) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        SkeletonText,
+        {
+          width: `${100 / columns}%`,
+          height: 16
+        },
+        colIndex
+      )) }, rowIndex)) })
+    ] });
+  }
+);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Skeleton,
+  SkeletonCard,
+  SkeletonCircle,
+  SkeletonList,
+  SkeletonRectangle,
+  SkeletonRounded,
+  SkeletonTable,
+  SkeletonText
+});
+//# sourceMappingURL=index.js.map

package/dist/Skeleton/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Skeleton/Skeleton.tsx"],"sourcesContent":["import React, { forwardRef, HTMLAttributes } from 'react';\n\ninterface SkeletonProps extends HTMLAttributes<HTMLDivElement> {\n  variant?: 'text' | 'circular' | 'rectangular' | 'rounded';\n  width?: string | number;\n  height?: string | number;\n  animation?: 'pulse' | 'none';\n  lines?: number;\n  spacing?: 'none' | 'small' | 'medium' | 'large';\n}\n\nconst SKELETON_ANIMATION_CLASSES = {\n  pulse: 'animate-pulse',\n  none: '',\n};\n\nconst SKELETON_VARIANT_CLASSES = {\n  text: 'h-4 bg-background-200 rounded',\n  circular: 'bg-background-200 rounded-full',\n  rectangular: 'bg-background-200',\n  rounded: 'bg-background-200 rounded-lg',\n};\n\nconst SPACING_CLASSES = {\n  none: '',\n  small: 'space-y-1',\n  medium: 'space-y-2',\n  large: 'space-y-3',\n};\n\nconst Skeleton = forwardRef<HTMLDivElement, SkeletonProps>(\n  (\n    {\n      variant = 'text',\n      width,\n      height,\n      animation = 'pulse',\n      lines = 1,\n      spacing = 'none',\n      className = '',\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const animationClass = SKELETON_ANIMATION_CLASSES[animation];\n    const variantClass = SKELETON_VARIANT_CLASSES[variant];\n    const spacingClass = SPACING_CLASSES[spacing];\n\n    const style: React.CSSProperties = {\n      width: typeof width === 'number' ? `${width}px` : width,\n      height: typeof height === 'number' ? `${height}px` : height,\n    };\n\n    // Se for múltiplas linhas de texto\n    if (variant === 'text' && lines > 1) {\n      return (\n        <div\n          ref={ref}\n          className={`flex flex-col ${spacingClass} ${className}`}\n          {...props}\n        >\n          {Array.from({ length: lines }, (_, index) => (\n            <div\n              key={index}\n              className={`${variantClass} ${animationClass}`}\n              style={index === lines - 1 ? { width: '60%' } : undefined}\n            />\n          ))}\n        </div>\n      );\n    }\n\n    // Se for um único elemento\n    return (\n      <div\n        ref={ref}\n        className={`${variantClass} ${animationClass} ${className}`}\n        style={style}\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n\n// Componentes específicos para casos comuns\nconst SkeletonText = forwardRef<HTMLDivElement, Omit<SkeletonProps, 'variant'>>(\n  (props, ref) => <Skeleton ref={ref} variant=\"text\" {...props} />\n);\n\nconst SkeletonCircle = forwardRef<\n  HTMLDivElement,\n  Omit<SkeletonProps, 'variant'>\n>((props, ref) => <Skeleton ref={ref} variant=\"circular\" {...props} />);\n\nconst SkeletonRectangle = forwardRef<\n  HTMLDivElement,\n  Omit<SkeletonProps, 'variant'>\n>((props, ref) => <Skeleton ref={ref} variant=\"rectangular\" {...props} />);\n\nconst SkeletonRounded = forwardRef<\n  HTMLDivElement,\n  Omit<SkeletonProps, 'variant'>\n>((props, ref) => <Skeleton ref={ref} variant=\"rounded\" {...props} />);\n\n// Componente para card skeleton\ninterface SkeletonCardProps extends HTMLAttributes<HTMLDivElement> {\n  showAvatar?: boolean;\n  showTitle?: boolean;\n  showDescription?: boolean;\n  showActions?: boolean;\n  lines?: number;\n}\n\nconst SkeletonCard = forwardRef<HTMLDivElement, SkeletonCardProps>(\n  (\n    {\n      showAvatar = true,\n      showTitle = true,\n      showDescription = true,\n      showActions = true,\n      lines = 2,\n      className = '',\n      ...props\n    },\n    ref\n  ) => {\n    return (\n      <div\n        ref={ref}\n        className={`w-full p-4 bg-background border border-border-200 rounded-lg ${className}`}\n        {...props}\n      >\n        <div className=\"flex items-start space-x-3\">\n          {showAvatar && <SkeletonCircle width={40} height={40} />}\n\n          <div className=\"flex-1 space-y-2\">\n            {showTitle && <SkeletonText width=\"60%\" height={20} />}\n\n            {showDescription && <SkeletonText lines={lines} spacing=\"small\" />}\n          </div>\n        </div>\n\n        {showActions && (\n          <div className=\"flex justify-end space-x-2 mt-4\">\n            <SkeletonRectangle width={80} height={32} />\n            <SkeletonRectangle width={80} height={32} />\n          </div>\n        )}\n      </div>\n    );\n  }\n);\n\n// Componente para lista skeleton\ninterface SkeletonListProps extends HTMLAttributes<HTMLDivElement> {\n  items?: number;\n  showAvatar?: boolean;\n  showTitle?: boolean;\n  showDescription?: boolean;\n  lines?: number;\n}\n\nconst SkeletonList = forwardRef<HTMLDivElement, SkeletonListProps>(\n  (\n    {\n      items = 3,\n      showAvatar = true,\n      showTitle = true,\n      showDescription = true,\n      lines = 1,\n      className = '',\n      ...props\n    },\n    ref\n  ) => {\n    return (\n      <div ref={ref} className={`space-y-3 ${className}`} {...props}>\n        {Array.from({ length: items }, (_, index) => (\n          <div key={index} className=\"flex items-start space-x-3 p-3\">\n            {showAvatar && <SkeletonCircle width={32} height={32} />}\n\n            <div className=\"flex-1 space-y-2\">\n              {showTitle && <SkeletonText width=\"40%\" height={16} />}\n\n              {showDescription && (\n                <SkeletonText lines={lines} spacing=\"small\" />\n              )}\n            </div>\n          </div>\n        ))}\n      </div>\n    );\n  }\n);\n\n// Componente para tabela skeleton\ninterface SkeletonTableProps extends HTMLAttributes<HTMLDivElement> {\n  rows?: number;\n  columns?: number;\n  showHeader?: boolean;\n}\n\nconst SkeletonTable = forwardRef<HTMLDivElement, SkeletonTableProps>(\n  (\n    { rows = 5, columns = 4, showHeader = true, className = '', ...props },\n    ref\n  ) => {\n    return (\n      <div ref={ref} className={`w-full ${className}`} {...props}>\n        {showHeader && (\n          <div className=\"flex space-x-2 mb-3\">\n            {Array.from({ length: columns }, (_, index) => (\n              <SkeletonText\n                key={index}\n                width={`${100 / columns}%`}\n                height={20}\n              />\n            ))}\n          </div>\n        )}\n\n        <div className=\"space-y-2\">\n          {Array.from({ length: rows }, (_, rowIndex) => (\n            <div key={rowIndex} className=\"flex space-x-2\">\n              {Array.from({ length: columns }, (_, colIndex) => (\n                <SkeletonText\n                  key={colIndex}\n                  width={`${100 / columns}%`}\n                  height={16}\n                />\n              ))}\n            </div>\n          ))}\n        </div>\n      </div>\n    );\n  }\n);\n\nexport {\n  Skeleton,\n  SkeletonText,\n  SkeletonCircle,\n  SkeletonRectangle,\n  SkeletonRounded,\n  SkeletonCard,\n  SkeletonList,\n  SkeletonTable,\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkD;AA+DtC;AApDZ,IAAM,6BAA6B;AAAA,EACjC,OAAO;AAAA,EACP,MAAM;AACR;AAEA,IAAM,2BAA2B;AAAA,EAC/B,MAAM;AAAA,EACN,UAAU;AAAA,EACV,aAAa;AAAA,EACb,SAAS;AACX;AAEA,IAAM,kBAAkB;AAAA,EACtB,MAAM;AAAA,EACN,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AACT;AAEA,IAAM,eAAW;AAAA,EACf,CACE;AAAA,IACE,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,YAAY;AAAA,IACZ;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,iBAAiB,2BAA2B,SAAS;AAC3D,UAAM,eAAe,yBAAyB,OAAO;AACrD,UAAM,eAAe,gBAAgB,OAAO;AAE5C,UAAM,QAA6B;AAAA,MACjC,OAAO,OAAO,UAAU,WAAW,GAAG,KAAK,OAAO;AAAA,MAClD,QAAQ,OAAO,WAAW,WAAW,GAAG,MAAM,OAAO;AAAA,IACvD;AAGA,QAAI,YAAY,UAAU,QAAQ,GAAG;AACnC,aACE;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,WAAW,iBAAiB,YAAY,IAAI,SAAS;AAAA,UACpD,GAAG;AAAA,UAEH,gBAAM,KAAK,EAAE,QAAQ,MAAM,GAAG,CAAC,GAAG,UACjC;AAAA,YAAC;AAAA;AAAA,cAEC,WAAW,GAAG,YAAY,IAAI,cAAc;AAAA,cAC5C,OAAO,UAAU,QAAQ,IAAI,EAAE,OAAO,MAAM,IAAI;AAAA;AAAA,YAF3C;AAAA,UAGP,CACD;AAAA;AAAA,MACH;AAAA,IAEJ;AAGA,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,YAAY,IAAI,cAAc,IAAI,SAAS;AAAA,QACzD;AAAA,QACC,GAAG;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAGA,IAAM,mBAAe;AAAA,EACnB,CAAC,OAAO,QAAQ,4CAAC,YAAS,KAAU,SAAQ,QAAQ,GAAG,OAAO;AAChE;AAEA,IAAM,qBAAiB,yBAGrB,CAAC,OAAO,QAAQ,4CAAC,YAAS,KAAU,SAAQ,YAAY,GAAG,OAAO,CAAE;AAEtE,IAAM,wBAAoB,yBAGxB,CAAC,OAAO,QAAQ,4CAAC,YAAS,KAAU,SAAQ,eAAe,GAAG,OAAO,CAAE;AAEzE,IAAM,sBAAkB,yBAGtB,CAAC,OAAO,QAAQ,4CAAC,YAAS,KAAU,SAAQ,WAAW,GAAG,OAAO,CAAE;AAWrE,IAAM,mBAAe;AAAA,EACnB,CACE;AAAA,IACE,aAAa;AAAA,IACb,YAAY;AAAA,IACZ,kBAAkB;AAAA,IAClB,cAAc;AAAA,IACd,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,GAAG;AAAA,EACL,GACA,QACG;AACH,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,gEAAgE,SAAS;AAAA,QACnF,GAAG;AAAA,QAEJ;AAAA,uDAAC,SAAI,WAAU,8BACZ;AAAA,0BAAc,4CAAC,kBAAe,OAAO,IAAI,QAAQ,IAAI;AAAA,YAEtD,6CAAC,SAAI,WAAU,oBACZ;AAAA,2BAAa,4CAAC,gBAAa,OAAM,OAAM,QAAQ,IAAI;AAAA,cAEnD,mBAAmB,4CAAC,gBAAa,OAAc,SAAQ,SAAQ;AAAA,eAClE;AAAA,aACF;AAAA,UAEC,eACC,6CAAC,SAAI,WAAU,mCACb;AAAA,wDAAC,qBAAkB,OAAO,IAAI,QAAQ,IAAI;AAAA,YAC1C,4CAAC,qBAAkB,OAAO,IAAI,QAAQ,IAAI;AAAA,aAC5C;AAAA;AAAA;AAAA,IAEJ;AAAA,EAEJ;AACF;AAWA,IAAM,mBAAe;AAAA,EACnB,CACE;AAAA,IACE,QAAQ;AAAA,IACR,aAAa;AAAA,IACb,YAAY;AAAA,IACZ,kBAAkB;AAAA,IAClB,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,GAAG;AAAA,EACL,GACA,QACG;AACH,WACE,4CAAC,SAAI,KAAU,WAAW,aAAa,SAAS,IAAK,GAAG,OACrD,gBAAM,KAAK,EAAE,QAAQ,MAAM,GAAG,CAAC,GAAG,UACjC,6CAAC,SAAgB,WAAU,kCACxB;AAAA,oBAAc,4CAAC,kBAAe,OAAO,IAAI,QAAQ,IAAI;AAAA,MAEtD,6CAAC,SAAI,WAAU,oBACZ;AAAA,qBAAa,4CAAC,gBAAa,OAAM,OAAM,QAAQ,IAAI;AAAA,QAEnD,mBACC,4CAAC,gBAAa,OAAc,SAAQ,SAAQ;AAAA,SAEhD;AAAA,SATQ,KAUV,CACD,GACH;AAAA,EAEJ;AACF;AASA,IAAM,oBAAgB;AAAA,EACpB,CACE,EAAE,OAAO,GAAG,UAAU,GAAG,aAAa,MAAM,YAAY,IAAI,GAAG,MAAM,GACrE,QACG;AACH,WACE,6CAAC,SAAI,KAAU,WAAW,UAAU,SAAS,IAAK,GAAG,OAClD;AAAA,oBACC,4CAAC,SAAI,WAAU,uBACZ,gBAAM,KAAK,EAAE,QAAQ,QAAQ,GAAG,CAAC,GAAG,UACnC;AAAA,QAAC;AAAA;AAAA,UAEC,OAAO,GAAG,MAAM,OAAO;AAAA,UACvB,QAAQ;AAAA;AAAA,QAFH;AAAA,MAGP,CACD,GACH;AAAA,MAGF,4CAAC,SAAI,WAAU,aACZ,gBAAM,KAAK,EAAE,QAAQ,KAAK,GAAG,CAAC,GAAG,aAChC,4CAAC,SAAmB,WAAU,kBAC3B,gBAAM,KAAK,EAAE,QAAQ,QAAQ,GAAG,CAACA,IAAG,aACnC;AAAA,QAAC;AAAA;AAAA,UAEC,OAAO,GAAG,MAAM,OAAO;AAAA,UACvB,QAAQ;AAAA;AAAA,QAFH;AAAA,MAGP,CACD,KAPO,QAQV,CACD,GACH;AAAA,OACF;AAAA,EAEJ;AACF;","names":["_"]}

package/dist/Skeleton/index.mjs

@@ -0,0 +1,159 @@
+// src/components/Skeleton/Skeleton.tsx
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var SKELETON_ANIMATION_CLASSES = {
+  pulse: "animate-pulse",
+  none: ""
+};
+var SKELETON_VARIANT_CLASSES = {
+  text: "h-4 bg-background-200 rounded",
+  circular: "bg-background-200 rounded-full",
+  rectangular: "bg-background-200",
+  rounded: "bg-background-200 rounded-lg"
+};
+var SPACING_CLASSES = {
+  none: "",
+  small: "space-y-1",
+  medium: "space-y-2",
+  large: "space-y-3"
+};
+var Skeleton = forwardRef(
+  ({
+    variant = "text",
+    width,
+    height,
+    animation = "pulse",
+    lines = 1,
+    spacing = "none",
+    className = "",
+    children,
+    ...props
+  }, ref) => {
+    const animationClass = SKELETON_ANIMATION_CLASSES[animation];
+    const variantClass = SKELETON_VARIANT_CLASSES[variant];
+    const spacingClass = SPACING_CLASSES[spacing];
+    const style = {
+      width: typeof width === "number" ? `${width}px` : width,
+      height: typeof height === "number" ? `${height}px` : height
+    };
+    if (variant === "text" && lines > 1) {
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref,
+          className: `flex flex-col ${spacingClass} ${className}`,
+          ...props,
+          children: Array.from({ length: lines }, (_, index) => /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: `${variantClass} ${animationClass}`,
+              style: index === lines - 1 ? { width: "60%" } : void 0
+            },
+            index
+          ))
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: `${variantClass} ${animationClass} ${className}`,
+        style,
+        ...props,
+        children
+      }
+    );
+  }
+);
+var SkeletonText = forwardRef(
+  (props, ref) => /* @__PURE__ */ jsx(Skeleton, { ref, variant: "text", ...props })
+);
+var SkeletonCircle = forwardRef((props, ref) => /* @__PURE__ */ jsx(Skeleton, { ref, variant: "circular", ...props }));
+var SkeletonRectangle = forwardRef((props, ref) => /* @__PURE__ */ jsx(Skeleton, { ref, variant: "rectangular", ...props }));
+var SkeletonRounded = forwardRef((props, ref) => /* @__PURE__ */ jsx(Skeleton, { ref, variant: "rounded", ...props }));
+var SkeletonCard = forwardRef(
+  ({
+    showAvatar = true,
+    showTitle = true,
+    showDescription = true,
+    showActions = true,
+    lines = 2,
+    className = "",
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: `w-full p-4 bg-background border border-border-200 rounded-lg ${className}`,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-start space-x-3", children: [
+            showAvatar && /* @__PURE__ */ jsx(SkeletonCircle, { width: 40, height: 40 }),
+            /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-2", children: [
+              showTitle && /* @__PURE__ */ jsx(SkeletonText, { width: "60%", height: 20 }),
+              showDescription && /* @__PURE__ */ jsx(SkeletonText, { lines, spacing: "small" })
+            ] })
+          ] }),
+          showActions && /* @__PURE__ */ jsxs("div", { className: "flex justify-end space-x-2 mt-4", children: [
+            /* @__PURE__ */ jsx(SkeletonRectangle, { width: 80, height: 32 }),
+            /* @__PURE__ */ jsx(SkeletonRectangle, { width: 80, height: 32 })
+          ] })
+        ]
+      }
+    );
+  }
+);
+var SkeletonList = forwardRef(
+  ({
+    items = 3,
+    showAvatar = true,
+    showTitle = true,
+    showDescription = true,
+    lines = 1,
+    className = "",
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsx("div", { ref, className: `space-y-3 ${className}`, ...props, children: Array.from({ length: items }, (_, index) => /* @__PURE__ */ jsxs("div", { className: "flex items-start space-x-3 p-3", children: [
+      showAvatar && /* @__PURE__ */ jsx(SkeletonCircle, { width: 32, height: 32 }),
+      /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-2", children: [
+        showTitle && /* @__PURE__ */ jsx(SkeletonText, { width: "40%", height: 16 }),
+        showDescription && /* @__PURE__ */ jsx(SkeletonText, { lines, spacing: "small" })
+      ] })
+    ] }, index)) });
+  }
+);
+var SkeletonTable = forwardRef(
+  ({ rows = 5, columns = 4, showHeader = true, className = "", ...props }, ref) => {
+    return /* @__PURE__ */ jsxs("div", { ref, className: `w-full ${className}`, ...props, children: [
+      showHeader && /* @__PURE__ */ jsx("div", { className: "flex space-x-2 mb-3", children: Array.from({ length: columns }, (_, index) => /* @__PURE__ */ jsx(
+        SkeletonText,
+        {
+          width: `${100 / columns}%`,
+          height: 20
+        },
+        index
+      )) }),
+      /* @__PURE__ */ jsx("div", { className: "space-y-2", children: Array.from({ length: rows }, (_, rowIndex) => /* @__PURE__ */ jsx("div", { className: "flex space-x-2", children: Array.from({ length: columns }, (_2, colIndex) => /* @__PURE__ */ jsx(
+        SkeletonText,
+        {
+          width: `${100 / columns}%`,
+          height: 16
+        },
+        colIndex
+      )) }, rowIndex)) })
+    ] });
+  }
+);
+export {
+  Skeleton,
+  SkeletonCard,
+  SkeletonCircle,
+  SkeletonList,
+  SkeletonRectangle,
+  SkeletonRounded,
+  SkeletonTable,
+  SkeletonText
+};
+//# sourceMappingURL=index.mjs.map

package/dist/Skeleton/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Skeleton/Skeleton.tsx"],"sourcesContent":["import React, { forwardRef, HTMLAttributes } from 'react';\n\ninterface SkeletonProps extends HTMLAttributes<HTMLDivElement> {\n  variant?: 'text' | 'circular' | 'rectangular' | 'rounded';\n  width?: string | number;\n  height?: string | number;\n  animation?: 'pulse' | 'none';\n  lines?: number;\n  spacing?: 'none' | 'small' | 'medium' | 'large';\n}\n\nconst SKELETON_ANIMATION_CLASSES = {\n  pulse: 'animate-pulse',\n  none: '',\n};\n\nconst SKELETON_VARIANT_CLASSES = {\n  text: 'h-4 bg-background-200 rounded',\n  circular: 'bg-background-200 rounded-full',\n  rectangular: 'bg-background-200',\n  rounded: 'bg-background-200 rounded-lg',\n};\n\nconst SPACING_CLASSES = {\n  none: '',\n  small: 'space-y-1',\n  medium: 'space-y-2',\n  large: 'space-y-3',\n};\n\nconst Skeleton = forwardRef<HTMLDivElement, SkeletonProps>(\n  (\n    {\n      variant = 'text',\n      width,\n      height,\n      animation = 'pulse',\n      lines = 1,\n      spacing = 'none',\n      className = '',\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const animationClass = SKELETON_ANIMATION_CLASSES[animation];\n    const variantClass = SKELETON_VARIANT_CLASSES[variant];\n    const spacingClass = SPACING_CLASSES[spacing];\n\n    const style: React.CSSProperties = {\n      width: typeof width === 'number' ? `${width}px` : width,\n      height: typeof height === 'number' ? `${height}px` : height,\n    };\n\n    // Se for múltiplas linhas de texto\n    if (variant === 'text' && lines > 1) {\n      return (\n        <div\n          ref={ref}\n          className={`flex flex-col ${spacingClass} ${className}`}\n          {...props}\n        >\n          {Array.from({ length: lines }, (_, index) => (\n            <div\n              key={index}\n              className={`${variantClass} ${animationClass}`}\n              style={index === lines - 1 ? { width: '60%' } : undefined}\n            />\n          ))}\n        </div>\n      );\n    }\n\n    // Se for um único elemento\n    return (\n      <div\n        ref={ref}\n        className={`${variantClass} ${animationClass} ${className}`}\n        style={style}\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n\n// Componentes específicos para casos comuns\nconst SkeletonText = forwardRef<HTMLDivElement, Omit<SkeletonProps, 'variant'>>(\n  (props, ref) => <Skeleton ref={ref} variant=\"text\" {...props} />\n);\n\nconst SkeletonCircle = forwardRef<\n  HTMLDivElement,\n  Omit<SkeletonProps, 'variant'>\n>((props, ref) => <Skeleton ref={ref} variant=\"circular\" {...props} />);\n\nconst SkeletonRectangle = forwardRef<\n  HTMLDivElement,\n  Omit<SkeletonProps, 'variant'>\n>((props, ref) => <Skeleton ref={ref} variant=\"rectangular\" {...props} />);\n\nconst SkeletonRounded = forwardRef<\n  HTMLDivElement,\n  Omit<SkeletonProps, 'variant'>\n>((props, ref) => <Skeleton ref={ref} variant=\"rounded\" {...props} />);\n\n// Componente para card skeleton\ninterface SkeletonCardProps extends HTMLAttributes<HTMLDivElement> {\n  showAvatar?: boolean;\n  showTitle?: boolean;\n  showDescription?: boolean;\n  showActions?: boolean;\n  lines?: number;\n}\n\nconst SkeletonCard = forwardRef<HTMLDivElement, SkeletonCardProps>(\n  (\n    {\n      showAvatar = true,\n      showTitle = true,\n      showDescription = true,\n      showActions = true,\n      lines = 2,\n      className = '',\n      ...props\n    },\n    ref\n  ) => {\n    return (\n      <div\n        ref={ref}\n        className={`w-full p-4 bg-background border border-border-200 rounded-lg ${className}`}\n        {...props}\n      >\n        <div className=\"flex items-start space-x-3\">\n          {showAvatar && <SkeletonCircle width={40} height={40} />}\n\n          <div className=\"flex-1 space-y-2\">\n            {showTitle && <SkeletonText width=\"60%\" height={20} />}\n\n            {showDescription && <SkeletonText lines={lines} spacing=\"small\" />}\n          </div>\n        </div>\n\n        {showActions && (\n          <div className=\"flex justify-end space-x-2 mt-4\">\n            <SkeletonRectangle width={80} height={32} />\n            <SkeletonRectangle width={80} height={32} />\n          </div>\n        )}\n      </div>\n    );\n  }\n);\n\n// Componente para lista skeleton\ninterface SkeletonListProps extends HTMLAttributes<HTMLDivElement> {\n  items?: number;\n  showAvatar?: boolean;\n  showTitle?: boolean;\n  showDescription?: boolean;\n  lines?: number;\n}\n\nconst SkeletonList = forwardRef<HTMLDivElement, SkeletonListProps>(\n  (\n    {\n      items = 3,\n      showAvatar = true,\n      showTitle = true,\n      showDescription = true,\n      lines = 1,\n      className = '',\n      ...props\n    },\n    ref\n  ) => {\n    return (\n      <div ref={ref} className={`space-y-3 ${className}`} {...props}>\n        {Array.from({ length: items }, (_, index) => (\n          <div key={index} className=\"flex items-start space-x-3 p-3\">\n            {showAvatar && <SkeletonCircle width={32} height={32} />}\n\n            <div className=\"flex-1 space-y-2\">\n              {showTitle && <SkeletonText width=\"40%\" height={16} />}\n\n              {showDescription && (\n                <SkeletonText lines={lines} spacing=\"small\" />\n              )}\n            </div>\n          </div>\n        ))}\n      </div>\n    );\n  }\n);\n\n// Componente para tabela skeleton\ninterface SkeletonTableProps extends HTMLAttributes<HTMLDivElement> {\n  rows?: number;\n  columns?: number;\n  showHeader?: boolean;\n}\n\nconst SkeletonTable = forwardRef<HTMLDivElement, SkeletonTableProps>(\n  (\n    { rows = 5, columns = 4, showHeader = true, className = '', ...props },\n    ref\n  ) => {\n    return (\n      <div ref={ref} className={`w-full ${className}`} {...props}>\n        {showHeader && (\n          <div className=\"flex space-x-2 mb-3\">\n            {Array.from({ length: columns }, (_, index) => (\n              <SkeletonText\n                key={index}\n                width={`${100 / columns}%`}\n                height={20}\n              />\n            ))}\n          </div>\n        )}\n\n        <div className=\"space-y-2\">\n          {Array.from({ length: rows }, (_, rowIndex) => (\n            <div key={rowIndex} className=\"flex space-x-2\">\n              {Array.from({ length: columns }, (_, colIndex) => (\n                <SkeletonText\n                  key={colIndex}\n                  width={`${100 / columns}%`}\n                  height={16}\n                />\n              ))}\n            </div>\n          ))}\n        </div>\n      </div>\n    );\n  }\n);\n\nexport {\n  Skeleton,\n  SkeletonText,\n  SkeletonCircle,\n  SkeletonRectangle,\n  SkeletonRounded,\n  SkeletonCard,\n  SkeletonList,\n  SkeletonTable,\n};\n"],"mappings":";AAAA,SAAgB,kBAAkC;AA+DtC,cA2EF,YA3EE;AApDZ,IAAM,6BAA6B;AAAA,EACjC,OAAO;AAAA,EACP,MAAM;AACR;AAEA,IAAM,2BAA2B;AAAA,EAC/B,MAAM;AAAA,EACN,UAAU;AAAA,EACV,aAAa;AAAA,EACb,SAAS;AACX;AAEA,IAAM,kBAAkB;AAAA,EACtB,MAAM;AAAA,EACN,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AACT;AAEA,IAAM,WAAW;AAAA,EACf,CACE;AAAA,IACE,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,YAAY;AAAA,IACZ;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,iBAAiB,2BAA2B,SAAS;AAC3D,UAAM,eAAe,yBAAyB,OAAO;AACrD,UAAM,eAAe,gBAAgB,OAAO;AAE5C,UAAM,QAA6B;AAAA,MACjC,OAAO,OAAO,UAAU,WAAW,GAAG,KAAK,OAAO;AAAA,MAClD,QAAQ,OAAO,WAAW,WAAW,GAAG,MAAM,OAAO;AAAA,IACvD;AAGA,QAAI,YAAY,UAAU,QAAQ,GAAG;AACnC,aACE;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,WAAW,iBAAiB,YAAY,IAAI,SAAS;AAAA,UACpD,GAAG;AAAA,UAEH,gBAAM,KAAK,EAAE,QAAQ,MAAM,GAAG,CAAC,GAAG,UACjC;AAAA,YAAC;AAAA;AAAA,cAEC,WAAW,GAAG,YAAY,IAAI,cAAc;AAAA,cAC5C,OAAO,UAAU,QAAQ,IAAI,EAAE,OAAO,MAAM,IAAI;AAAA;AAAA,YAF3C;AAAA,UAGP,CACD;AAAA;AAAA,MACH;AAAA,IAEJ;AAGA,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,YAAY,IAAI,cAAc,IAAI,SAAS;AAAA,QACzD;AAAA,QACC,GAAG;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAGA,IAAM,eAAe;AAAA,EACnB,CAAC,OAAO,QAAQ,oBAAC,YAAS,KAAU,SAAQ,QAAQ,GAAG,OAAO;AAChE;AAEA,IAAM,iBAAiB,WAGrB,CAAC,OAAO,QAAQ,oBAAC,YAAS,KAAU,SAAQ,YAAY,GAAG,OAAO,CAAE;AAEtE,IAAM,oBAAoB,WAGxB,CAAC,OAAO,QAAQ,oBAAC,YAAS,KAAU,SAAQ,eAAe,GAAG,OAAO,CAAE;AAEzE,IAAM,kBAAkB,WAGtB,CAAC,OAAO,QAAQ,oBAAC,YAAS,KAAU,SAAQ,WAAW,GAAG,OAAO,CAAE;AAWrE,IAAM,eAAe;AAAA,EACnB,CACE;AAAA,IACE,aAAa;AAAA,IACb,YAAY;AAAA,IACZ,kBAAkB;AAAA,IAClB,cAAc;AAAA,IACd,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,GAAG;AAAA,EACL,GACA,QACG;AACH,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,gEAAgE,SAAS;AAAA,QACnF,GAAG;AAAA,QAEJ;AAAA,+BAAC,SAAI,WAAU,8BACZ;AAAA,0BAAc,oBAAC,kBAAe,OAAO,IAAI,QAAQ,IAAI;AAAA,YAEtD,qBAAC,SAAI,WAAU,oBACZ;AAAA,2BAAa,oBAAC,gBAAa,OAAM,OAAM,QAAQ,IAAI;AAAA,cAEnD,mBAAmB,oBAAC,gBAAa,OAAc,SAAQ,SAAQ;AAAA,eAClE;AAAA,aACF;AAAA,UAEC,eACC,qBAAC,SAAI,WAAU,mCACb;AAAA,gCAAC,qBAAkB,OAAO,IAAI,QAAQ,IAAI;AAAA,YAC1C,oBAAC,qBAAkB,OAAO,IAAI,QAAQ,IAAI;AAAA,aAC5C;AAAA;AAAA;AAAA,IAEJ;AAAA,EAEJ;AACF;AAWA,IAAM,eAAe;AAAA,EACnB,CACE;AAAA,IACE,QAAQ;AAAA,IACR,aAAa;AAAA,IACb,YAAY;AAAA,IACZ,kBAAkB;AAAA,IAClB,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,GAAG;AAAA,EACL,GACA,QACG;AACH,WACE,oBAAC,SAAI,KAAU,WAAW,aAAa,SAAS,IAAK,GAAG,OACrD,gBAAM,KAAK,EAAE,QAAQ,MAAM,GAAG,CAAC,GAAG,UACjC,qBAAC,SAAgB,WAAU,kCACxB;AAAA,oBAAc,oBAAC,kBAAe,OAAO,IAAI,QAAQ,IAAI;AAAA,MAEtD,qBAAC,SAAI,WAAU,oBACZ;AAAA,qBAAa,oBAAC,gBAAa,OAAM,OAAM,QAAQ,IAAI;AAAA,QAEnD,mBACC,oBAAC,gBAAa,OAAc,SAAQ,SAAQ;AAAA,SAEhD;AAAA,SATQ,KAUV,CACD,GACH;AAAA,EAEJ;AACF;AASA,IAAM,gBAAgB;AAAA,EACpB,CACE,EAAE,OAAO,GAAG,UAAU,GAAG,aAAa,MAAM,YAAY,IAAI,GAAG,MAAM,GACrE,QACG;AACH,WACE,qBAAC,SAAI,KAAU,WAAW,UAAU,SAAS,IAAK,GAAG,OAClD;AAAA,oBACC,oBAAC,SAAI,WAAU,uBACZ,gBAAM,KAAK,EAAE,QAAQ,QAAQ,GAAG,CAAC,GAAG,UACnC;AAAA,QAAC;AAAA;AAAA,UAEC,OAAO,GAAG,MAAM,OAAO;AAAA,UACvB,QAAQ;AAAA;AAAA,QAFH;AAAA,MAGP,CACD,GACH;AAAA,MAGF,oBAAC,SAAI,WAAU,aACZ,gBAAM,KAAK,EAAE,QAAQ,KAAK,GAAG,CAAC,GAAG,aAChC,oBAAC,SAAmB,WAAU,kBAC3B,gBAAM,KAAK,EAAE,QAAQ,QAAQ,GAAG,CAACA,IAAG,aACnC;AAAA,QAAC;AAAA;AAAA,UAEC,OAAO,GAAG,MAAM,OAAO;AAAA,UACvB,QAAQ;AAAA;AAAA,QAFH;AAAA,MAGP,CACD,KAPO,QAQV,CACD,GACH;AAAA,OACF;AAAA,EAEJ;AACF;","names":["_"]}

package/dist/index.css

@@ -75,6 +75,7 @@
     --radius-xl: 0.75rem;
     --radius-3xl: 1.5rem;
     --ease-out: cubic-bezier(0, 0, 0.2, 1);
+    --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
     --blur-xs: 4px;
     --default-transition-duration: 150ms;
     --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -717,15 +718,21 @@
   .min-h-6 {
     min-height: calc(var(--spacing) * 6);
   }
+  .min-h-16 {
+    min-height: calc(var(--spacing) * 16);
+  }
   .min-h-20 {
     min-height: calc(var(--spacing) * 20);
   }
-  .min-h-20\.5 {
-    min-height: calc(var(--spacing) * 20.5);
+  .min-h-24 {
+    min-height: calc(var(--spacing) * 24);
   }
   .min-h-\[50px\] {
     min-height: 50px;
   }
+  .min-h-\[80px\] {
+    min-height: 80px;
+  }
   .min-h-\[300px\] {
     min-height: 300px;
   }
@@ -903,6 +910,9 @@
   .min-w-\[2\.5rem\] {
     min-width: 2.5rem;
   }
+  .min-w-\[80px\] {
+    min-width: 80px;
+  }
   .min-w-\[210px\] {
     min-width: 210px;
   }
@@ -955,6 +965,9 @@
   .transform {
     transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
   }
+  .animate-pulse {
+    animation: var(--animate-pulse);
+  }
   .cursor-default {
     cursor: default;
   }
@@ -996,6 +1009,9 @@
   .grid-cols-7 {
     grid-template-columns: repeat(7, minmax(0, 1fr));
   }
+  .grid-cols-\[1fr_auto\] {
+    grid-template-columns: 1fr auto;
+  }
   .flex-col {
     flex-direction: column;
   }
@@ -1071,6 +1087,13 @@
   .gap-16 {
     gap: calc(var(--spacing) * 16);
   }
+  .space-y-1 {
+    :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));
+      margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
+    }
+  }
   .space-y-2 {
     :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;
@@ -1078,6 +1101,13 @@
       margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
     }
   }
+  .space-y-3 {
+    :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
+      margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
+    }
+  }
   .space-y-4 {
     :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;
@@ -1099,6 +1129,27 @@
       margin-block-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-y-reverse)));
     }
   }
+  .space-x-2 {
+    :where(& > :not(:last-child)) {
+      --tw-space-x-reverse: 0;
+      margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));
+      margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
+    }
+  }
+  .space-x-3 {
+    :where(& > :not(:last-child)) {
+      --tw-space-x-reverse: 0;
+      margin-inline-start: calc(calc(var(--spacing) * 3) * var(--tw-space-x-reverse));
+      margin-inline-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-x-reverse)));
+    }
+  }
+  .space-x-4 {
+    :where(& > :not(:last-child)) {
+      --tw-space-x-reverse: 0;
+      margin-inline-start: calc(calc(var(--spacing) * 4) * var(--tw-space-x-reverse));
+      margin-inline-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse)));
+    }
+  }
   .truncate {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -1333,6 +1384,9 @@
   .bg-background-100 {
     background-color: var(--color-background-100);
   }
+  .bg-background-200 {
+    background-color: var(--color-background-200);
+  }
   .bg-background-300 {
     background-color: var(--color-background-300);
   }
@@ -3643,6 +3697,7 @@
 @property --tw-skew-x { syntax: "*"; inherits: false; }
 @property --tw-skew-y { syntax: "*"; inherits: false; }
 @property --tw-space-y-reverse { syntax: "*"; inherits: false; initial-value: 0; }
+@property --tw-space-x-reverse { syntax: "*"; inherits: false; initial-value: 0; }
 @property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; }
 @property --tw-leading { syntax: "*"; inherits: false; }
 @property --tw-font-weight { syntax: "*"; inherits: false; }
@@ -3686,6 +3741,11 @@
 @property --tw-backdrop-sepia { syntax: "*"; inherits: false; }
 @property --tw-duration { syntax: "*"; inherits: false; }
 @property --tw-ease { syntax: "*"; inherits: false; }
+@keyframes pulse {
+  50% {
+    opacity: 0.5;
+  }
+}
 @layer properties {
   @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
     *,
@@ -3701,6 +3761,7 @@
       --tw-skew-x: initial;
       --tw-skew-y: initial;
       --tw-space-y-reverse: 0;
+      --tw-space-x-reverse: 0;
       --tw-border-style: solid;
       --tw-leading: initial;
       --tw-font-weight: initial;