@mastra/playground-ui 7.0.0-beta.22 → 7.0.0-beta.24

package/dist/spacings-Ddc7umGk.js

@@ -0,0 +1,196 @@
+const BorderRadius = {
+  none: "0px",
+  sm: "2px",
+  md: "4px",
+  lg: "6px"
+};
+
+const Colors = {
+  surface1: "#000000",
+  surface2: "#0F0F0F",
+  surface3: "#141414",
+  surface4: "#1A1A1A",
+  surface5: "rgba(46, 46, 46, 0.9)",
+  accent1: "#1AFB6F",
+  accent2: "#FF4931",
+  accent3: "#267AD2",
+  accent5: "#4A9DF2",
+  accent6: "#ECB047",
+  accent1Dark: "#16281f",
+  accent2Dark: "#281916",
+  accent3Dark: "#161a28",
+  accent5Dark: "#161a22",
+  accent6Dark: "#232214",
+  accent1Darker: "#141a16",
+  accent2Darker: "#1a1414",
+  accent3Darker: "#14141a",
+  accent5Darker: "#14161a",
+  accent6Darker: "#1a1a14",
+  neutral1: "#5C5C5C",
+  neutral2: "#707070",
+  neutral3: "#939393",
+  neutral4: "#A9A9A9",
+  neutral5: "#E6E6E6",
+  neutral6: "#FFFFFF",
+  // Semantic state colors
+  error: "#FF4931",
+  // Overlay colors
+  overlay: "rgba(0, 0, 0, 0.8)"
+};
+const BorderColors = {
+  border1: "rgba(48, 48, 48, 1)",
+  border2: "rgba(66, 66, 66, 1)"
+};
+
+const FontSizes = {
+  // UI text sizes
+  "ui-xs": "0.625rem",
+  // 10px - small labels, badges
+  "ui-sm": "0.75rem",
+  // 12px - secondary text
+  "ui-md": "0.875rem",
+  // 14px - body text
+  "ui-lg": "1rem",
+  // 16px - emphasized text
+  // Header sizes
+  "header-sm": "1.125rem",
+  // 18px
+  "header-md": "1.25rem",
+  // 20px
+  "header-lg": "1.5rem",
+  // 24px
+  "header-xl": "1.75rem"
+  // 28px
+};
+const LineHeights = {
+  "ui-xs": "160%",
+  // 16px
+  "ui-sm": "150%",
+  // 18px
+  "ui-md": "143%",
+  // 20px
+  "ui-lg": "150%",
+  // 24px
+  "header-sm": "133%",
+  // 24px
+  "header-md": "140%",
+  // 28px
+  "header-lg": "133%",
+  // 32px
+  "header-xl": "129%"
+  // 36px
+};
+
+const Shadows = {
+  // Elevation shadows
+  sm: "0 1px 2px rgba(0, 0, 0, 0.3)",
+  md: "0 4px 6px rgba(0, 0, 0, 0.3)",
+  lg: "0 10px 15px rgba(0, 0, 0, 0.4)",
+  // Inner shadow for pressed states
+  inner: "inset 0 2px 4px rgba(0, 0, 0, 0.3)",
+  // Card/elevated surface shadows
+  card: "0 2px 8px rgba(0, 0, 0, 0.4)",
+  elevated: "0 8px 24px rgba(0, 0, 0, 0.5)",
+  // Dialog/modal shadows
+  dialog: "0 16px 48px rgba(0, 0, 0, 0.6)"
+};
+const Glows = {
+  accent1: "0 0 20px rgba(26, 251, 111, 0.3)",
+  accent2: "0 0 20px rgba(255, 73, 49, 0.3)",
+  // Subtle glow for focus rings
+  focusRing: "0 0 0 3px rgba(26, 251, 111, 0.15)"
+};
+
+const Sizes = {
+  "icon-default": "16px",
+  "icon-lg": "20px",
+  "icon-sm": "12px",
+  "form-sm": "1.5rem",
+  "form-md": "2rem",
+  "form-lg": "2.5rem",
+  "header-default": "48px",
+  "table-header": "28px",
+  "table-row": "56px",
+  "table-row-small": "40px",
+  "badge-default": "20px",
+  "avatar-sm": "24px",
+  "avatar-md": "32px",
+  "avatar-lg": "40px",
+  "dropdown-max-height": "300px"
+};
+
+const Spacings = {
+  // Base scale (REM-based, matching Tailwind convention)
+  "0": "0rem",
+  px: "0.0625rem",
+  // 1px
+  "0.5": "0.125rem",
+  // 2px
+  "1": "0.25rem",
+  // 4px
+  "1.5": "0.375rem",
+  // 6px
+  "2": "0.5rem",
+  // 8px
+  "2.5": "0.625rem",
+  // 10px
+  "3": "0.75rem",
+  // 12px
+  "3.5": "0.875rem",
+  // 14px
+  "4": "1rem",
+  // 16px
+  "5": "1.25rem",
+  // 20px
+  "6": "1.5rem",
+  // 24px
+  "7": "1.75rem",
+  // 28px
+  "8": "2rem",
+  // 32px
+  "9": "2.25rem",
+  // 36px
+  "10": "2.5rem",
+  // 40px
+  "11": "2.75rem",
+  // 44px
+  "12": "3rem",
+  // 48px
+  "14": "3.5rem",
+  // 56px
+  "16": "4rem",
+  // 64px
+  "20": "5rem",
+  // 80px
+  "24": "6rem",
+  // 96px
+  "28": "7rem",
+  // 112px
+  "32": "8rem",
+  // 128px
+  "36": "9rem",
+  // 144px
+  "40": "10rem",
+  // 160px
+  "44": "11rem",
+  // 176px
+  "48": "12rem",
+  // 192px
+  "52": "13rem",
+  // 208px
+  "56": "14rem",
+  // 224px
+  "60": "15rem",
+  // 240px
+  "64": "16rem",
+  // 256px
+  "72": "18rem",
+  // 288px
+  "80": "20rem",
+  // 320px
+  "96": "24rem"
+  // 384px
+};
+
+export { BorderColors as B, Colors as C, FontSizes as F, Glows as G, LineHeights as L, Shadows as S, Sizes as a, BorderRadius as b, Spacings as c };
+//# sourceMappingURL=spacings-Ddc7umGk.js.map

package/dist/spacings-Ddc7umGk.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spacings-Ddc7umGk.js","sources":["../src/ds/tokens/borders.ts","../src/ds/tokens/colors.ts","../src/ds/tokens/fonts.ts","../src/ds/tokens/shadows.ts","../src/ds/tokens/sizes.ts","../src/ds/tokens/spacings.ts"],"sourcesContent":["export const BorderRadius = {\n  none: '0px',\n  sm: '2px',\n  md: '4px',\n  lg: '6px',\n};\n","export const Colors = {\n  surface1: '#000000',\n  surface2: '#0F0F0F',\n  surface3: '#141414',\n  surface4: '#1A1A1A',\n  surface5: 'rgba(46, 46, 46, 0.9)',\n  accent1: '#1AFB6F',\n  accent2: '#FF4931',\n  accent3: '#267AD2',\n  accent5: '#4A9DF2',\n  accent6: '#ECB047',\n  accent1Dark: '#16281f',\n  accent2Dark: '#281916',\n  accent3Dark: '#161a28',\n  accent5Dark: '#161a22',\n  accent6Dark: '#232214',\n  accent1Darker: '#141a16',\n  accent2Darker: '#1a1414',\n  accent3Darker: '#14141a',\n  accent5Darker: '#14161a',\n  accent6Darker: '#1a1a14',\n  neutral1: '#5C5C5C',\n  neutral2: '#707070',\n  neutral3: '#939393',\n  neutral4: '#A9A9A9',\n  neutral5: '#E6E6E6',\n  neutral6: '#FFFFFF',\n\n  // Semantic state colors\n  error: '#FF4931',\n\n  // Overlay colors\n  overlay: 'rgba(0, 0, 0, 0.8)',\n};\n\nexport const BorderColors = {\n  border1: 'rgba(48, 48, 48, 1)',\n  border2: 'rgba(66, 66, 66, 1)',\n};\n","export const FontSizes = {\n  // UI text sizes\n  'ui-xs': '0.625rem', // 10px - small labels, badges\n  'ui-sm': '0.75rem', // 12px - secondary text\n  'ui-md': '0.875rem', // 14px - body text\n  'ui-lg': '1rem', // 16px - emphasized text\n\n  // Header sizes\n  'header-sm': '1.125rem', // 18px\n  'header-md': '1.25rem', // 20px\n  'header-lg': '1.5rem', // 24px\n  'header-xl': '1.75rem', // 28px\n};\n\nexport const LineHeights = {\n  'ui-xs': '160%', // 16px\n  'ui-sm': '150%', // 18px\n  'ui-md': '143%', // 20px\n  'ui-lg': '150%', // 24px\n  'header-sm': '133%', // 24px\n  'header-md': '140%', // 28px\n  'header-lg': '133%', // 32px\n  'header-xl': '129%', // 36px\n};\n","export const Shadows = {\n  // Elevation shadows\n  sm: '0 1px 2px rgba(0, 0, 0, 0.3)',\n  md: '0 4px 6px rgba(0, 0, 0, 0.3)',\n  lg: '0 10px 15px rgba(0, 0, 0, 0.4)',\n\n  // Inner shadow for pressed states\n  inner: 'inset 0 2px 4px rgba(0, 0, 0, 0.3)',\n\n  // Card/elevated surface shadows\n  card: '0 2px 8px rgba(0, 0, 0, 0.4)',\n  elevated: '0 8px 24px rgba(0, 0, 0, 0.5)',\n\n  // Dialog/modal shadows\n  dialog: '0 16px 48px rgba(0, 0, 0, 0.6)',\n};\n\n// Glow effects for interactive elements (focus states, etc.)\nexport const Glows = {\n  accent1: '0 0 20px rgba(26, 251, 111, 0.3)',\n  accent2: '0 0 20px rgba(255, 73, 49, 0.3)',\n\n  // Subtle glow for focus rings\n  focusRing: '0 0 0 3px rgba(26, 251, 111, 0.15)',\n};\n","export const Sizes = {\n  'icon-default': '16px',\n  'icon-lg': '20px',\n  'icon-sm': '12px',\n  'form-sm': '1.5rem',\n  'form-md': '2rem',\n  'form-lg': '2.5rem',\n  'header-default': '48px',\n  'table-header': '28px',\n  'table-row': '56px',\n  'table-row-small': '40px',\n  'badge-default': '20px',\n  'avatar-sm': '24px',\n  'avatar-md': '32px',\n  'avatar-lg': '40px',\n  'dropdown-max-height': '300px',\n};\n","export const Spacings = {\n  // Base scale (REM-based, matching Tailwind convention)\n  '0': '0rem',\n  px: '0.0625rem', // 1px\n  '0.5': '0.125rem', // 2px\n  '1': '0.25rem', // 4px\n  '1.5': '0.375rem', // 6px\n  '2': '0.5rem', // 8px\n  '2.5': '0.625rem', // 10px\n  '3': '0.75rem', // 12px\n  '3.5': '0.875rem', // 14px\n  '4': '1rem', // 16px\n  '5': '1.25rem', // 20px\n  '6': '1.5rem', // 24px\n  '7': '1.75rem', // 28px\n  '8': '2rem', // 32px\n  '9': '2.25rem', // 36px\n  '10': '2.5rem', // 40px\n  '11': '2.75rem', // 44px\n  '12': '3rem', // 48px\n  '14': '3.5rem', // 56px\n  '16': '4rem', // 64px\n  '20': '5rem', // 80px\n  '24': '6rem', // 96px\n  '28': '7rem', // 112px\n  '32': '8rem', // 128px\n  '36': '9rem', // 144px\n  '40': '10rem', // 160px\n  '44': '11rem', // 176px\n  '48': '12rem', // 192px\n  '52': '13rem', // 208px\n  '56': '14rem', // 224px\n  '60': '15rem', // 240px\n  '64': '16rem', // 256px\n  '72': '18rem', // 288px\n  '80': '20rem', // 320px\n  '96': '24rem', // 384px\n} as const;\n\nexport type Spacing = keyof typeof Spacings;\n"],"names":[],"mappings":"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"}

package/dist/spacings-bCnRJAUT.cjs

@@ -0,0 +1,206 @@
+'use strict';
+
+const BorderRadius = {
+  none: "0px",
+  sm: "2px",
+  md: "4px",
+  lg: "6px"
+};
+
+const Colors = {
+  surface1: "#000000",
+  surface2: "#0F0F0F",
+  surface3: "#141414",
+  surface4: "#1A1A1A",
+  surface5: "rgba(46, 46, 46, 0.9)",
+  accent1: "#1AFB6F",
+  accent2: "#FF4931",
+  accent3: "#267AD2",
+  accent5: "#4A9DF2",
+  accent6: "#ECB047",
+  accent1Dark: "#16281f",
+  accent2Dark: "#281916",
+  accent3Dark: "#161a28",
+  accent5Dark: "#161a22",
+  accent6Dark: "#232214",
+  accent1Darker: "#141a16",
+  accent2Darker: "#1a1414",
+  accent3Darker: "#14141a",
+  accent5Darker: "#14161a",
+  accent6Darker: "#1a1a14",
+  neutral1: "#5C5C5C",
+  neutral2: "#707070",
+  neutral3: "#939393",
+  neutral4: "#A9A9A9",
+  neutral5: "#E6E6E6",
+  neutral6: "#FFFFFF",
+  // Semantic state colors
+  error: "#FF4931",
+  // Overlay colors
+  overlay: "rgba(0, 0, 0, 0.8)"
+};
+const BorderColors = {
+  border1: "rgba(48, 48, 48, 1)",
+  border2: "rgba(66, 66, 66, 1)"
+};
+
+const FontSizes = {
+  // UI text sizes
+  "ui-xs": "0.625rem",
+  // 10px - small labels, badges
+  "ui-sm": "0.75rem",
+  // 12px - secondary text
+  "ui-md": "0.875rem",
+  // 14px - body text
+  "ui-lg": "1rem",
+  // 16px - emphasized text
+  // Header sizes
+  "header-sm": "1.125rem",
+  // 18px
+  "header-md": "1.25rem",
+  // 20px
+  "header-lg": "1.5rem",
+  // 24px
+  "header-xl": "1.75rem"
+  // 28px
+};
+const LineHeights = {
+  "ui-xs": "160%",
+  // 16px
+  "ui-sm": "150%",
+  // 18px
+  "ui-md": "143%",
+  // 20px
+  "ui-lg": "150%",
+  // 24px
+  "header-sm": "133%",
+  // 24px
+  "header-md": "140%",
+  // 28px
+  "header-lg": "133%",
+  // 32px
+  "header-xl": "129%"
+  // 36px
+};
+
+const Shadows = {
+  // Elevation shadows
+  sm: "0 1px 2px rgba(0, 0, 0, 0.3)",
+  md: "0 4px 6px rgba(0, 0, 0, 0.3)",
+  lg: "0 10px 15px rgba(0, 0, 0, 0.4)",
+  // Inner shadow for pressed states
+  inner: "inset 0 2px 4px rgba(0, 0, 0, 0.3)",
+  // Card/elevated surface shadows
+  card: "0 2px 8px rgba(0, 0, 0, 0.4)",
+  elevated: "0 8px 24px rgba(0, 0, 0, 0.5)",
+  // Dialog/modal shadows
+  dialog: "0 16px 48px rgba(0, 0, 0, 0.6)"
+};
+const Glows = {
+  accent1: "0 0 20px rgba(26, 251, 111, 0.3)",
+  accent2: "0 0 20px rgba(255, 73, 49, 0.3)",
+  // Subtle glow for focus rings
+  focusRing: "0 0 0 3px rgba(26, 251, 111, 0.15)"
+};
+
+const Sizes = {
+  "icon-default": "16px",
+  "icon-lg": "20px",
+  "icon-sm": "12px",
+  "form-sm": "1.5rem",
+  "form-md": "2rem",
+  "form-lg": "2.5rem",
+  "header-default": "48px",
+  "table-header": "28px",
+  "table-row": "56px",
+  "table-row-small": "40px",
+  "badge-default": "20px",
+  "avatar-sm": "24px",
+  "avatar-md": "32px",
+  "avatar-lg": "40px",
+  "dropdown-max-height": "300px"
+};
+
+const Spacings = {
+  // Base scale (REM-based, matching Tailwind convention)
+  "0": "0rem",
+  px: "0.0625rem",
+  // 1px
+  "0.5": "0.125rem",
+  // 2px
+  "1": "0.25rem",
+  // 4px
+  "1.5": "0.375rem",
+  // 6px
+  "2": "0.5rem",
+  // 8px
+  "2.5": "0.625rem",
+  // 10px
+  "3": "0.75rem",
+  // 12px
+  "3.5": "0.875rem",
+  // 14px
+  "4": "1rem",
+  // 16px
+  "5": "1.25rem",
+  // 20px
+  "6": "1.5rem",
+  // 24px
+  "7": "1.75rem",
+  // 28px
+  "8": "2rem",
+  // 32px
+  "9": "2.25rem",
+  // 36px
+  "10": "2.5rem",
+  // 40px
+  "11": "2.75rem",
+  // 44px
+  "12": "3rem",
+  // 48px
+  "14": "3.5rem",
+  // 56px
+  "16": "4rem",
+  // 64px
+  "20": "5rem",
+  // 80px
+  "24": "6rem",
+  // 96px
+  "28": "7rem",
+  // 112px
+  "32": "8rem",
+  // 128px
+  "36": "9rem",
+  // 144px
+  "40": "10rem",
+  // 160px
+  "44": "11rem",
+  // 176px
+  "48": "12rem",
+  // 192px
+  "52": "13rem",
+  // 208px
+  "56": "14rem",
+  // 224px
+  "60": "15rem",
+  // 240px
+  "64": "16rem",
+  // 256px
+  "72": "18rem",
+  // 288px
+  "80": "20rem",
+  // 320px
+  "96": "24rem"
+  // 384px
+};
+
+exports.BorderColors = BorderColors;
+exports.BorderRadius = BorderRadius;
+exports.Colors = Colors;
+exports.FontSizes = FontSizes;
+exports.Glows = Glows;
+exports.LineHeights = LineHeights;
+exports.Shadows = Shadows;
+exports.Sizes = Sizes;
+exports.Spacings = Spacings;
+//# sourceMappingURL=spacings-bCnRJAUT.cjs.map

package/dist/spacings-bCnRJAUT.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"spacings-bCnRJAUT.cjs","sources":["../src/ds/tokens/borders.ts","../src/ds/tokens/colors.ts","../src/ds/tokens/fonts.ts","../src/ds/tokens/shadows.ts","../src/ds/tokens/sizes.ts","../src/ds/tokens/spacings.ts"],"sourcesContent":["export const BorderRadius = {\n  none: '0px',\n  sm: '2px',\n  md: '4px',\n  lg: '6px',\n};\n","export const Colors = {\n  surface1: '#000000',\n  surface2: '#0F0F0F',\n  surface3: '#141414',\n  surface4: '#1A1A1A',\n  surface5: 'rgba(46, 46, 46, 0.9)',\n  accent1: '#1AFB6F',\n  accent2: '#FF4931',\n  accent3: '#267AD2',\n  accent5: '#4A9DF2',\n  accent6: '#ECB047',\n  accent1Dark: '#16281f',\n  accent2Dark: '#281916',\n  accent3Dark: '#161a28',\n  accent5Dark: '#161a22',\n  accent6Dark: '#232214',\n  accent1Darker: '#141a16',\n  accent2Darker: '#1a1414',\n  accent3Darker: '#14141a',\n  accent5Darker: '#14161a',\n  accent6Darker: '#1a1a14',\n  neutral1: '#5C5C5C',\n  neutral2: '#707070',\n  neutral3: '#939393',\n  neutral4: '#A9A9A9',\n  neutral5: '#E6E6E6',\n  neutral6: '#FFFFFF',\n\n  // Semantic state colors\n  error: '#FF4931',\n\n  // Overlay colors\n  overlay: 'rgba(0, 0, 0, 0.8)',\n};\n\nexport const BorderColors = {\n  border1: 'rgba(48, 48, 48, 1)',\n  border2: 'rgba(66, 66, 66, 1)',\n};\n","export const FontSizes = {\n  // UI text sizes\n  'ui-xs': '0.625rem', // 10px - small labels, badges\n  'ui-sm': '0.75rem', // 12px - secondary text\n  'ui-md': '0.875rem', // 14px - body text\n  'ui-lg': '1rem', // 16px - emphasized text\n\n  // Header sizes\n  'header-sm': '1.125rem', // 18px\n  'header-md': '1.25rem', // 20px\n  'header-lg': '1.5rem', // 24px\n  'header-xl': '1.75rem', // 28px\n};\n\nexport const LineHeights = {\n  'ui-xs': '160%', // 16px\n  'ui-sm': '150%', // 18px\n  'ui-md': '143%', // 20px\n  'ui-lg': '150%', // 24px\n  'header-sm': '133%', // 24px\n  'header-md': '140%', // 28px\n  'header-lg': '133%', // 32px\n  'header-xl': '129%', // 36px\n};\n","export const Shadows = {\n  // Elevation shadows\n  sm: '0 1px 2px rgba(0, 0, 0, 0.3)',\n  md: '0 4px 6px rgba(0, 0, 0, 0.3)',\n  lg: '0 10px 15px rgba(0, 0, 0, 0.4)',\n\n  // Inner shadow for pressed states\n  inner: 'inset 0 2px 4px rgba(0, 0, 0, 0.3)',\n\n  // Card/elevated surface shadows\n  card: '0 2px 8px rgba(0, 0, 0, 0.4)',\n  elevated: '0 8px 24px rgba(0, 0, 0, 0.5)',\n\n  // Dialog/modal shadows\n  dialog: '0 16px 48px rgba(0, 0, 0, 0.6)',\n};\n\n// Glow effects for interactive elements (focus states, etc.)\nexport const Glows = {\n  accent1: '0 0 20px rgba(26, 251, 111, 0.3)',\n  accent2: '0 0 20px rgba(255, 73, 49, 0.3)',\n\n  // Subtle glow for focus rings\n  focusRing: '0 0 0 3px rgba(26, 251, 111, 0.15)',\n};\n","export const Sizes = {\n  'icon-default': '16px',\n  'icon-lg': '20px',\n  'icon-sm': '12px',\n  'form-sm': '1.5rem',\n  'form-md': '2rem',\n  'form-lg': '2.5rem',\n  'header-default': '48px',\n  'table-header': '28px',\n  'table-row': '56px',\n  'table-row-small': '40px',\n  'badge-default': '20px',\n  'avatar-sm': '24px',\n  'avatar-md': '32px',\n  'avatar-lg': '40px',\n  'dropdown-max-height': '300px',\n};\n","export const Spacings = {\n  // Base scale (REM-based, matching Tailwind convention)\n  '0': '0rem',\n  px: '0.0625rem', // 1px\n  '0.5': '0.125rem', // 2px\n  '1': '0.25rem', // 4px\n  '1.5': '0.375rem', // 6px\n  '2': '0.5rem', // 8px\n  '2.5': '0.625rem', // 10px\n  '3': '0.75rem', // 12px\n  '3.5': '0.875rem', // 14px\n  '4': '1rem', // 16px\n  '5': '1.25rem', // 20px\n  '6': '1.5rem', // 24px\n  '7': '1.75rem', // 28px\n  '8': '2rem', // 32px\n  '9': '2.25rem', // 36px\n  '10': '2.5rem', // 40px\n  '11': '2.75rem', // 44px\n  '12': '3rem', // 48px\n  '14': '3.5rem', // 56px\n  '16': '4rem', // 64px\n  '20': '5rem', // 80px\n  '24': '6rem', // 96px\n  '28': '7rem', // 112px\n  '32': '8rem', // 128px\n  '36': '9rem', // 144px\n  '40': '10rem', // 160px\n  '44': '11rem', // 176px\n  '48': '12rem', // 192px\n  '52': '13rem', // 208px\n  '56': '14rem', // 224px\n  '60': '15rem', // 240px\n  '64': '16rem', // 256px\n  '72': '18rem', // 288px\n  '80': '20rem', // 320px\n  '96': '24rem', // 384px\n} as const;\n\nexport type Spacing = keyof typeof Spacings;\n"],"names":[],"mappings":"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"}

package/dist/src/ds/components/Alert/Alert.d.ts

@@ -4,8 +4,9 @@ type AlertVariant = 'warning' | 'destructive' | 'info';
 export interface AlertProps {
     children: React.ReactNode;
     variant: AlertVariant;
+    className?: string;
 }
-export declare const Alert: ({ children, variant }: AlertProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Alert: ({ children, variant, className }: AlertProps) => import("react/jsx-runtime").JSX.Element;
 export declare const AlertTitle: ({ children, as: As }: {
     children: React.ReactNode;
     as?: TxtProps["as"];

package/dist/src/ds/components/Avatar/Avatar.d.ts

@@ -3,5 +3,6 @@ export type AvatarProps = {
     src?: string;
     name: string;
     size?: AvatarSize;
+    interactive?: boolean;
 };
-export declare const Avatar: ({ src, name, size }: AvatarProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Avatar: ({ src, name, size, interactive }: AvatarProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/ds/components/Badge/Badge.d.ts

@@ -1,7 +1,7 @@
 import { default as React } from '../../../../node_modules/@types/react';
 export interface BadgeProps {
     icon?: React.ReactNode;
-    variant?: 'default' | 'success' | 'error' | 'info';
+    variant?: 'default' | 'success' | 'error' | 'info' | 'warning';
     className?: string;
     children?: React.ReactNode;
 }

package/dist/src/ds/components/Button/Button.d.ts

@@ -8,7 +8,7 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
     prefetch?: boolean | null;
     children: React.ReactNode;
     size?: FormElementSize;
-    variant?: 'default' | 'light' | 'outline' | 'ghost';
+    variant?: 'default' | 'light' | 'outline' | 'ghost' | 'primary';
     target?: string;
     type?: 'button' | 'submit' | 'reset';
 }

package/dist/src/ds/components/Card/Card.d.ts

@@ -0,0 +1,26 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+declare const cardVariants: (props?: ({
+    elevation?: "flat" | "elevated" | "raised" | null | undefined;
+    interactive?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export type CardProps = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof cardVariants> & {
+    as?: React.ElementType;
+};
+export declare const Card: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & VariantProps<(props?: ({
+    elevation?: "flat" | "elevated" | "raised" | null | undefined;
+    interactive?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string> & {
+    as?: React.ElementType;
+} & React.RefAttributes<HTMLDivElement>>;
+export type CardHeaderProps = React.HTMLAttributes<HTMLDivElement>;
+export declare const CardHeader: React.ForwardRefExoticComponent<CardHeaderProps & React.RefAttributes<HTMLDivElement>>;
+export type CardTitleProps = React.HTMLAttributes<HTMLHeadingElement>;
+export declare const CardTitle: React.ForwardRefExoticComponent<CardTitleProps & React.RefAttributes<HTMLHeadingElement>>;
+export type CardDescriptionProps = React.HTMLAttributes<HTMLParagraphElement>;
+export declare const CardDescription: React.ForwardRefExoticComponent<CardDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
+export type CardContentProps = React.HTMLAttributes<HTMLDivElement>;
+export declare const CardContent: React.ForwardRefExoticComponent<CardContentProps & React.RefAttributes<HTMLDivElement>>;
+export type CardFooterProps = React.HTMLAttributes<HTMLDivElement>;
+export declare const CardFooter: React.ForwardRefExoticComponent<CardFooterProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/src/ds/components/Card/index.d.ts

@@ -0,0 +1,2 @@
+export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from './Card';
+export type { CardProps, CardHeaderProps, CardTitleProps, CardDescriptionProps, CardContentProps, CardFooterProps, } from './Card';

package/dist/src/ds/components/Collapsible/collapsible.d.ts

@@ -1,5 +1,6 @@
+import { default as React } from '../../../../node_modules/@types/react';
 import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
-declare const Collapsible: import('../../../../node_modules/@types/react').ForwardRefExoticComponent<CollapsiblePrimitive.CollapsibleProps & import('../../../../node_modules/@types/react').RefAttributes<HTMLDivElement>>;
-declare const CollapsibleTrigger: (props: CollapsiblePrimitive.CollapsibleTriggerProps) => import("react/jsx-runtime").JSX.Element;
-declare const CollapsibleContent: import('../../../../node_modules/@types/react').ForwardRefExoticComponent<CollapsiblePrimitive.CollapsibleContentProps & import('../../../../node_modules/@types/react').RefAttributes<HTMLDivElement>>;
+declare const Collapsible: React.ForwardRefExoticComponent<CollapsiblePrimitive.CollapsibleProps & React.RefAttributes<HTMLDivElement>>;
+declare const CollapsibleTrigger: React.ForwardRefExoticComponent<CollapsiblePrimitive.CollapsibleTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const CollapsibleContent: React.ForwardRefExoticComponent<CollapsiblePrimitive.CollapsibleContentProps & React.RefAttributes<HTMLDivElement>>;
 export { Collapsible, CollapsibleTrigger, CollapsibleContent };

package/dist/src/ds/components/EmptyState/EmptyState.d.ts

@@ -1,9 +1,10 @@
-import { ElementType, ReactNode } from '../../../../node_modules/@types/react';
-export interface EmptyStateProps {
-    as?: ElementType;
-    iconSlot: ReactNode;
-    titleSlot: ReactNode;
-    descriptionSlot: ReactNode;
-    actionSlot: ReactNode;
-}
-export declare const EmptyState: ({ iconSlot, titleSlot, descriptionSlot, actionSlot, as: Component, }: EmptyStateProps) => import("react/jsx-runtime").JSX.Element;
+import * as React from 'react';
+export type EmptyStateProps = {
+    iconSlot: React.ReactNode;
+    titleSlot: React.ReactNode;
+    descriptionSlot?: React.ReactNode;
+    actionSlot?: React.ReactNode;
+    className?: string;
+    as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+};
+export declare function EmptyState({ iconSlot, titleSlot, descriptionSlot, actionSlot, className, as: HeadingTag, }: EmptyStateProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/ds/components/EmptyState/index.d.ts

@@ -1 +1,2 @@
-export * from './EmptyState';
+export { EmptyState } from './EmptyState';
+export type { EmptyStateProps } from './EmptyState';

package/dist/src/ds/components/Input/input.d.ts

@@ -6,11 +6,13 @@ declare const inputVariants: (props?: ({
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> & VariantProps<typeof inputVariants> & {
     testId?: string;
+    error?: boolean;
 };
 declare const Input: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & VariantProps<(props?: ({
     variant?: "default" | "unstyled" | "filled" | null | undefined;
     size?: "sm" | "md" | "lg" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string> & {
     testId?: string;
+    error?: boolean;
 } & React.RefAttributes<HTMLInputElement>>;
 export { Input, inputVariants };

package/dist/src/ds/components/Kbd/kbd.d.ts

@@ -1,5 +1,6 @@
 export type KbdProps = {
     children: React.ReactNode;
     theme?: 'light' | 'dark';
+    className?: string;
 };
-export declare const Kbd: ({ children, theme }: KbdProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Kbd: ({ children, theme, className }: KbdProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/ds/components/Notification/notification.d.ts

@@ -5,6 +5,6 @@ export type NotificationProps = {
     autoDismiss?: boolean;
     dismissTime?: number;
     dismissible?: boolean;
-    type?: 'info' | 'error';
+    type?: 'info' | 'error' | 'success' | 'warning';
 };
 export declare function Notification({ children, className, isVisible, autoDismiss, dismissTime, dismissible, type, }: NotificationProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/src/ds/components/Spinner/spinner.d.ts

@@ -1,6 +1,7 @@
 export type SpinnerProps = {
     color?: string;
     className?: string;
+    size?: 'sm' | 'md' | 'lg';
 };
-declare function Spinner({ color, className }: SpinnerProps): import("react/jsx-runtime").JSX.Element;
+declare function Spinner({ color, className, size }: SpinnerProps): import("react/jsx-runtime").JSX.Element;
 export { Spinner };

package/dist/src/ds/components/StatusBadge/StatusBadge.d.ts

@@ -0,0 +1,13 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+declare const statusBadgeVariants: (props?: ({
+    variant?: "error" | "warning" | "info" | "success" | "neutral" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+    withDot?: boolean | null | undefined;
+    pulse?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export type StatusBadgeProps = React.HTMLAttributes<HTMLSpanElement> & VariantProps<typeof statusBadgeVariants> & {
+    children: React.ReactNode;
+};
+export declare function StatusBadge({ className, variant, size, withDot, pulse, children, ...props }: StatusBadgeProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/ds/components/StatusBadge/index.d.ts

@@ -0,0 +1,2 @@
+export { StatusBadge } from './StatusBadge';
+export type { StatusBadgeProps } from './StatusBadge';

package/dist/src/ds/primitives/form-element.d.ts

@@ -3,7 +3,8 @@ export declare const formElementSizes: {
     readonly md: "h-form-md";
     readonly lg: "h-form-lg";
 };
-export declare const formElementFocus = "focus:outline focus:outline-1 focus:outline-accent1";
-export declare const formElementFocusWithin = "focus-within:outline focus-within:outline-1 focus-within:outline-accent1 focus-within:-outline-offset-2";
+export declare const formElementFocus = "focus:outline-none focus:ring-1 focus:ring-accent1 focus:shadow-focus-ring transition-shadow duration-normal";
+export declare const formElementFocusWithin = "focus-within:outline-none focus-within:ring-1 focus-within:ring-accent1 focus-within:shadow-focus-ring transition-shadow duration-normal";
 export declare const formElementRadius = "rounded-md";
+export declare const formElementTransition = "transition-all duration-normal ease-out-custom";
 export type FormElementSize = keyof typeof formElementSizes;

package/dist/src/ds/primitives/transitions.d.ts

@@ -0,0 +1,22 @@
+export declare const transitions: {
+    readonly colors: "transition-colors duration-normal ease-out-custom";
+    readonly transform: "transition-transform duration-normal ease-out-custom";
+    readonly all: "transition-all duration-normal ease-out-custom";
+    readonly opacity: "transition-opacity duration-normal ease-out-custom";
+    readonly shadow: "transition-shadow duration-normal ease-out-custom";
+    readonly allSlow: "transition-all duration-slow ease-out-custom";
+};
+export declare const hoverEffects: {
+    readonly scale: "hover:scale-[1.02] active:scale-[0.98]";
+    readonly scaleSubtle: "active:scale-[0.98]";
+    readonly brightness: "hover:brightness-110";
+    readonly lift: "hover:bg-surface4";
+};
+export declare const focusRing: {
+    readonly default: "focus:outline-none focus:ring-1 focus:ring-accent1 focus:shadow-focus-ring";
+    readonly simple: "focus:outline-none focus:ring-1 focus:ring-accent1";
+    readonly visible: "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent1 focus-visible:shadow-focus-ring";
+};
+export type TransitionPreset = keyof typeof transitions;
+export type HoverEffect = keyof typeof hoverEffects;
+export type FocusRingStyle = keyof typeof focusRing;