@dynamic-mockups/design-system 0.1.0

package/dist/src/tokens/colors.d.ts

@@ -0,0 +1,168 @@
+/**
+ * Color tokens for the design system
+ * Uses RadixUI color CSS custom properties for consistent, accessible colors
+ *
+ * Color System:
+ * - Each color has light (1-12) and alpha/transparent (a1-a12) variants
+ * - Radix UI automatically handles light/dark mode via CSS variables
+ * - Alpha variants provide transparency for layering effects
+ */
+export declare const colors: {
+    readonly brand: {
+        readonly primary: {
+            readonly 1: "var(--blue-1)";
+            readonly 2: "var(--blue-2)";
+            readonly 3: "var(--blue-3)";
+            readonly 4: "var(--blue-4)";
+            readonly 5: "var(--blue-5)";
+            readonly 6: "var(--blue-6)";
+            readonly 7: "var(--blue-7)";
+            readonly 8: "var(--blue-8)";
+            readonly 9: "var(--blue-9)";
+            readonly 10: "var(--blue-10)";
+            readonly 11: "var(--blue-11)";
+            readonly 12: "var(--blue-12)";
+            readonly a1: "var(--blue-a1)";
+            readonly a2: "var(--blue-a2)";
+            readonly a3: "var(--blue-a3)";
+            readonly a4: "var(--blue-a4)";
+            readonly a5: "var(--blue-a5)";
+            readonly a6: "var(--blue-a6)";
+            readonly a7: "var(--blue-a7)";
+            readonly a8: "var(--blue-a8)";
+            readonly a9: "var(--blue-a9)";
+            readonly a10: "var(--blue-a10)";
+            readonly a11: "var(--blue-a11)";
+            readonly a12: "var(--blue-a12)";
+        };
+        readonly secondary: {
+            readonly 1: "var(--slate-1)";
+            readonly 2: "var(--slate-2)";
+            readonly 3: "var(--slate-3)";
+            readonly 4: "var(--slate-4)";
+            readonly 5: "var(--slate-5)";
+            readonly 6: "var(--slate-6)";
+            readonly 7: "var(--slate-7)";
+            readonly 8: "var(--slate-8)";
+            readonly 9: "var(--slate-9)";
+            readonly 10: "var(--slate-10)";
+            readonly 11: "var(--slate-11)";
+            readonly 12: "var(--slate-12)";
+            readonly a1: "var(--slate-a1)";
+            readonly a2: "var(--slate-a2)";
+            readonly a3: "var(--slate-a3)";
+            readonly a4: "var(--slate-a4)";
+            readonly a5: "var(--slate-a5)";
+            readonly a6: "var(--slate-a6)";
+            readonly a7: "var(--slate-a7)";
+            readonly a8: "var(--slate-a8)";
+            readonly a9: "var(--slate-a9)";
+            readonly a10: "var(--slate-a10)";
+            readonly a11: "var(--slate-a11)";
+            readonly a12: "var(--slate-a12)";
+        };
+        readonly accent: {
+            readonly 1: "var(--violet-1)";
+            readonly 2: "var(--violet-2)";
+            readonly 3: "var(--violet-3)";
+            readonly 4: "var(--violet-4)";
+            readonly 5: "var(--violet-5)";
+            readonly 6: "var(--violet-6)";
+            readonly 7: "var(--violet-7)";
+            readonly 8: "var(--violet-8)";
+            readonly 9: "var(--violet-9)";
+            readonly 10: "var(--violet-10)";
+            readonly 11: "var(--violet-11)";
+            readonly 12: "var(--violet-12)";
+            readonly a1: "var(--violet-a1)";
+            readonly a2: "var(--violet-a2)";
+            readonly a3: "var(--violet-a3)";
+            readonly a4: "var(--violet-a4)";
+            readonly a5: "var(--violet-a5)";
+            readonly a6: "var(--violet-a6)";
+            readonly a7: "var(--violet-a7)";
+            readonly a8: "var(--violet-a8)";
+            readonly a9: "var(--violet-a9)";
+            readonly a10: "var(--violet-a10)";
+            readonly a11: "var(--violet-a11)";
+            readonly a12: "var(--violet-a12)";
+        };
+    };
+    readonly semantic: {
+        readonly success: {
+            readonly subtle: "var(--green-3)";
+            readonly light: "var(--green-9)";
+            readonly main: "var(--green-10)";
+            readonly dark: "var(--green-11)";
+            readonly subtleAlpha: "var(--green-a3)";
+            readonly lightAlpha: "var(--green-a9)";
+            readonly mainAlpha: "var(--green-a10)";
+            readonly darkAlpha: "var(--green-a11)";
+        };
+        readonly error: {
+            readonly subtle: "var(--red-3)";
+            readonly light: "var(--red-9)";
+            readonly main: "var(--red-10)";
+            readonly dark: "var(--red-11)";
+            readonly subtleAlpha: "var(--red-a3)";
+            readonly lightAlpha: "var(--red-a9)";
+            readonly mainAlpha: "var(--red-a10)";
+            readonly darkAlpha: "var(--red-a11)";
+        };
+        readonly warning: {
+            readonly subtle: "var(--amber-3)";
+            readonly light: "var(--amber-9)";
+            readonly main: "var(--amber-10)";
+            readonly dark: "var(--amber-11)";
+            readonly subtleAlpha: "var(--amber-a3)";
+            readonly lightAlpha: "var(--amber-a9)";
+            readonly mainAlpha: "var(--amber-a10)";
+            readonly darkAlpha: "var(--amber-a11)";
+        };
+        readonly info: {
+            readonly subtle: "var(--sky-3)";
+            readonly light: "var(--sky-9)";
+            readonly main: "var(--sky-10)";
+            readonly dark: "var(--sky-11)";
+            readonly subtleAlpha: "var(--sky-a3)";
+            readonly lightAlpha: "var(--sky-a9)";
+            readonly mainAlpha: "var(--sky-a10)";
+            readonly darkAlpha: "var(--sky-a11)";
+        };
+    };
+    readonly neutral: {
+        readonly 1: "var(--gray-1)";
+        readonly 2: "var(--gray-2)";
+        readonly 3: "var(--gray-3)";
+        readonly 4: "var(--gray-4)";
+        readonly 5: "var(--gray-5)";
+        readonly 6: "var(--gray-6)";
+        readonly 7: "var(--gray-7)";
+        readonly 8: "var(--gray-8)";
+        readonly 9: "var(--gray-9)";
+        readonly 10: "var(--gray-10)";
+        readonly 11: "var(--gray-11)";
+        readonly 12: "var(--gray-12)";
+        readonly a1: "var(--gray-a1)";
+        readonly a2: "var(--gray-a2)";
+        readonly a3: "var(--gray-a3)";
+        readonly a4: "var(--gray-a4)";
+        readonly a5: "var(--gray-a5)";
+        readonly a6: "var(--gray-a6)";
+        readonly a7: "var(--gray-a7)";
+        readonly a8: "var(--gray-a8)";
+        readonly a9: "var(--gray-a9)";
+        readonly a10: "var(--gray-a10)";
+        readonly a11: "var(--gray-a11)";
+        readonly a12: "var(--gray-a12)";
+    };
+    readonly common: {
+        readonly white: "var(--color-background)";
+        readonly black: "var(--gray-12)";
+        readonly transparent: "transparent";
+    };
+};
+export type ColorScale = typeof colors.brand.primary;
+export type BrandColors = typeof colors.brand;
+export type SemanticColors = typeof colors.semantic;
+export type Colors = typeof colors;

package/dist/src/tokens/index.d.ts

@@ -0,0 +1,270 @@
+/**
+ * Design Tokens
+ * Central export for all design tokens
+ */
+export * from "./colors";
+export * from "./colorTokens";
+export * from "./spacing";
+export * from "./radii";
+export * from "./typography";
+export * from "./shadows";
+export declare const tokens: {
+    readonly colors: {
+        readonly brand: {
+            readonly primary: {
+                readonly 1: "var(--blue-1)";
+                readonly 2: "var(--blue-2)";
+                readonly 3: "var(--blue-3)";
+                readonly 4: "var(--blue-4)";
+                readonly 5: "var(--blue-5)";
+                readonly 6: "var(--blue-6)";
+                readonly 7: "var(--blue-7)";
+                readonly 8: "var(--blue-8)";
+                readonly 9: "var(--blue-9)";
+                readonly 10: "var(--blue-10)";
+                readonly 11: "var(--blue-11)";
+                readonly 12: "var(--blue-12)";
+                readonly a1: "var(--blue-a1)";
+                readonly a2: "var(--blue-a2)";
+                readonly a3: "var(--blue-a3)";
+                readonly a4: "var(--blue-a4)";
+                readonly a5: "var(--blue-a5)";
+                readonly a6: "var(--blue-a6)";
+                readonly a7: "var(--blue-a7)";
+                readonly a8: "var(--blue-a8)";
+                readonly a9: "var(--blue-a9)";
+                readonly a10: "var(--blue-a10)";
+                readonly a11: "var(--blue-a11)";
+                readonly a12: "var(--blue-a12)";
+            };
+            readonly secondary: {
+                readonly 1: "var(--slate-1)";
+                readonly 2: "var(--slate-2)";
+                readonly 3: "var(--slate-3)";
+                readonly 4: "var(--slate-4)";
+                readonly 5: "var(--slate-5)";
+                readonly 6: "var(--slate-6)";
+                readonly 7: "var(--slate-7)";
+                readonly 8: "var(--slate-8)";
+                readonly 9: "var(--slate-9)";
+                readonly 10: "var(--slate-10)";
+                readonly 11: "var(--slate-11)";
+                readonly 12: "var(--slate-12)";
+                readonly a1: "var(--slate-a1)";
+                readonly a2: "var(--slate-a2)";
+                readonly a3: "var(--slate-a3)";
+                readonly a4: "var(--slate-a4)";
+                readonly a5: "var(--slate-a5)";
+                readonly a6: "var(--slate-a6)";
+                readonly a7: "var(--slate-a7)";
+                readonly a8: "var(--slate-a8)";
+                readonly a9: "var(--slate-a9)";
+                readonly a10: "var(--slate-a10)";
+                readonly a11: "var(--slate-a11)";
+                readonly a12: "var(--slate-a12)";
+            };
+            readonly accent: {
+                readonly 1: "var(--violet-1)";
+                readonly 2: "var(--violet-2)";
+                readonly 3: "var(--violet-3)";
+                readonly 4: "var(--violet-4)";
+                readonly 5: "var(--violet-5)";
+                readonly 6: "var(--violet-6)";
+                readonly 7: "var(--violet-7)";
+                readonly 8: "var(--violet-8)";
+                readonly 9: "var(--violet-9)";
+                readonly 10: "var(--violet-10)";
+                readonly 11: "var(--violet-11)";
+                readonly 12: "var(--violet-12)";
+                readonly a1: "var(--violet-a1)";
+                readonly a2: "var(--violet-a2)";
+                readonly a3: "var(--violet-a3)";
+                readonly a4: "var(--violet-a4)";
+                readonly a5: "var(--violet-a5)";
+                readonly a6: "var(--violet-a6)";
+                readonly a7: "var(--violet-a7)";
+                readonly a8: "var(--violet-a8)";
+                readonly a9: "var(--violet-a9)";
+                readonly a10: "var(--violet-a10)";
+                readonly a11: "var(--violet-a11)";
+                readonly a12: "var(--violet-a12)";
+            };
+        };
+        readonly semantic: {
+            readonly success: {
+                readonly subtle: "var(--green-3)";
+                readonly light: "var(--green-9)";
+                readonly main: "var(--green-10)";
+                readonly dark: "var(--green-11)";
+                readonly subtleAlpha: "var(--green-a3)";
+                readonly lightAlpha: "var(--green-a9)";
+                readonly mainAlpha: "var(--green-a10)";
+                readonly darkAlpha: "var(--green-a11)";
+            };
+            readonly error: {
+                readonly subtle: "var(--red-3)";
+                readonly light: "var(--red-9)";
+                readonly main: "var(--red-10)";
+                readonly dark: "var(--red-11)";
+                readonly subtleAlpha: "var(--red-a3)";
+                readonly lightAlpha: "var(--red-a9)";
+                readonly mainAlpha: "var(--red-a10)";
+                readonly darkAlpha: "var(--red-a11)";
+            };
+            readonly warning: {
+                readonly subtle: "var(--amber-3)";
+                readonly light: "var(--amber-9)";
+                readonly main: "var(--amber-10)";
+                readonly dark: "var(--amber-11)";
+                readonly subtleAlpha: "var(--amber-a3)";
+                readonly lightAlpha: "var(--amber-a9)";
+                readonly mainAlpha: "var(--amber-a10)";
+                readonly darkAlpha: "var(--amber-a11)";
+            };
+            readonly info: {
+                readonly subtle: "var(--sky-3)";
+                readonly light: "var(--sky-9)";
+                readonly main: "var(--sky-10)";
+                readonly dark: "var(--sky-11)";
+                readonly subtleAlpha: "var(--sky-a3)";
+                readonly lightAlpha: "var(--sky-a9)";
+                readonly mainAlpha: "var(--sky-a10)";
+                readonly darkAlpha: "var(--sky-a11)";
+            };
+        };
+        readonly neutral: {
+            readonly 1: "var(--gray-1)";
+            readonly 2: "var(--gray-2)";
+            readonly 3: "var(--gray-3)";
+            readonly 4: "var(--gray-4)";
+            readonly 5: "var(--gray-5)";
+            readonly 6: "var(--gray-6)";
+            readonly 7: "var(--gray-7)";
+            readonly 8: "var(--gray-8)";
+            readonly 9: "var(--gray-9)";
+            readonly 10: "var(--gray-10)";
+            readonly 11: "var(--gray-11)";
+            readonly 12: "var(--gray-12)";
+            readonly a1: "var(--gray-a1)";
+            readonly a2: "var(--gray-a2)";
+            readonly a3: "var(--gray-a3)";
+            readonly a4: "var(--gray-a4)";
+            readonly a5: "var(--gray-a5)";
+            readonly a6: "var(--gray-a6)";
+            readonly a7: "var(--gray-a7)";
+            readonly a8: "var(--gray-a8)";
+            readonly a9: "var(--gray-a9)";
+            readonly a10: "var(--gray-a10)";
+            readonly a11: "var(--gray-a11)";
+            readonly a12: "var(--gray-a12)";
+        };
+        readonly common: {
+            readonly white: "var(--color-background)";
+            readonly black: "var(--gray-12)";
+            readonly transparent: "transparent";
+        };
+    };
+    readonly spacing: {
+        readonly 0: "0px";
+        readonly 1: "4px";
+        readonly 2: "8px";
+        readonly 3: "12px";
+        readonly 4: "16px";
+        readonly 5: "20px";
+        readonly 6: "24px";
+        readonly 7: "28px";
+        readonly 8: "32px";
+        readonly 9: "36px";
+        readonly 10: "40px";
+        readonly 11: "44px";
+        readonly 12: "48px";
+        readonly 14: "56px";
+        readonly 16: "64px";
+        readonly 20: "80px";
+        readonly 24: "96px";
+        readonly 28: "112px";
+        readonly 32: "128px";
+        readonly 36: "144px";
+        readonly 40: "160px";
+        readonly 44: "176px";
+        readonly 48: "192px";
+        readonly 52: "208px";
+        readonly 56: "224px";
+        readonly 60: "240px";
+        readonly 64: "256px";
+        readonly 72: "288px";
+        readonly 80: "320px";
+        readonly 96: "384px";
+    };
+    readonly radii: {
+        readonly none: "0px";
+        readonly sm: "2px";
+        readonly base: "4px";
+        readonly md: "6px";
+        readonly lg: "8px";
+        readonly xl: "12px";
+        readonly "2xl": "16px";
+        readonly "3xl": "24px";
+        readonly full: "9999px";
+    };
+    readonly typography: {
+        readonly fontFamily: {
+            readonly sans: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif";
+            readonly mono: "ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace";
+            readonly display: "Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif";
+        };
+        readonly fontSize: {
+            readonly xs: "12px";
+            readonly sm: "14px";
+            readonly base: "16px";
+            readonly lg: "18px";
+            readonly xl: "20px";
+            readonly "2xl": "24px";
+            readonly "3xl": "30px";
+            readonly "4xl": "36px";
+            readonly "5xl": "48px";
+            readonly "6xl": "60px";
+            readonly "7xl": "72px";
+            readonly "8xl": "96px";
+            readonly "9xl": "128px";
+        };
+        readonly fontWeight: {
+            readonly thin: "100";
+            readonly extralight: "200";
+            readonly light: "300";
+            readonly normal: "400";
+            readonly medium: "500";
+            readonly semibold: "600";
+            readonly bold: "700";
+            readonly extrabold: "800";
+            readonly black: "900";
+        };
+        readonly lineHeight: {
+            readonly none: "1";
+            readonly tight: "1.25";
+            readonly snug: "1.375";
+            readonly normal: "1.5";
+            readonly relaxed: "1.625";
+            readonly loose: "2";
+        };
+        readonly letterSpacing: {
+            readonly tighter: "-0.8px";
+            readonly tight: "-0.4px";
+            readonly normal: "0px";
+            readonly wide: "0.4px";
+            readonly wider: "0.8px";
+            readonly widest: "1.6px";
+        };
+    };
+    readonly shadows: {
+        readonly none: "none";
+        readonly sm: "0 1px 2px 0 rgba(0, 0, 0, 0.05)";
+        readonly base: "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)";
+        readonly md: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)";
+        readonly lg: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)";
+        readonly xl: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)";
+        readonly "2xl": "0 25px 50px -12px rgba(0, 0, 0, 0.25)";
+        readonly inner: "inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)";
+    };
+};
+export type Tokens = typeof tokens;

package/dist/src/tokens/radii.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Border radius tokens
+ * Defines consistent border radius values across components
+ */
+export declare const radii: {
+    readonly none: "0px";
+    readonly sm: "2px";
+    readonly base: "4px";
+    readonly md: "6px";
+    readonly lg: "8px";
+    readonly xl: "12px";
+    readonly "2xl": "16px";
+    readonly "3xl": "24px";
+    readonly full: "9999px";
+};
+export type Radii = typeof radii;
+export type RadiiKey = keyof Radii;

package/dist/src/tokens/shadows.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Shadow tokens
+ * Defines elevation levels through shadow values
+ */
+export declare const shadows: {
+    readonly none: "none";
+    readonly sm: "0 1px 2px 0 rgba(0, 0, 0, 0.05)";
+    readonly base: "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)";
+    readonly md: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)";
+    readonly lg: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)";
+    readonly xl: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)";
+    readonly "2xl": "0 25px 50px -12px rgba(0, 0, 0, 0.25)";
+    readonly inner: "inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)";
+};
+export type Shadows = typeof shadows;
+export type ShadowKey = keyof Shadows;

package/dist/src/tokens/spacing.d.ts

@@ -0,0 +1,38 @@
+/**
+ * Spacing tokens following 8px base grid system
+ * Provides consistent spacing throughout the design system
+ */
+export declare const spacing: {
+    readonly 0: "0px";
+    readonly 1: "4px";
+    readonly 2: "8px";
+    readonly 3: "12px";
+    readonly 4: "16px";
+    readonly 5: "20px";
+    readonly 6: "24px";
+    readonly 7: "28px";
+    readonly 8: "32px";
+    readonly 9: "36px";
+    readonly 10: "40px";
+    readonly 11: "44px";
+    readonly 12: "48px";
+    readonly 14: "56px";
+    readonly 16: "64px";
+    readonly 20: "80px";
+    readonly 24: "96px";
+    readonly 28: "112px";
+    readonly 32: "128px";
+    readonly 36: "144px";
+    readonly 40: "160px";
+    readonly 44: "176px";
+    readonly 48: "192px";
+    readonly 52: "208px";
+    readonly 56: "224px";
+    readonly 60: "240px";
+    readonly 64: "256px";
+    readonly 72: "288px";
+    readonly 80: "320px";
+    readonly 96: "384px";
+};
+export type Spacing = typeof spacing;
+export type SpacingKey = keyof Spacing;

package/dist/src/tokens/typography.d.ts

@@ -0,0 +1,57 @@
+/**
+ * Typography tokens
+ * Defines font families, sizes, weights, and line heights
+ */
+export declare const typography: {
+    readonly fontFamily: {
+        readonly sans: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif";
+        readonly mono: "ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace";
+        readonly display: "Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif";
+    };
+    readonly fontSize: {
+        readonly xs: "12px";
+        readonly sm: "14px";
+        readonly base: "16px";
+        readonly lg: "18px";
+        readonly xl: "20px";
+        readonly "2xl": "24px";
+        readonly "3xl": "30px";
+        readonly "4xl": "36px";
+        readonly "5xl": "48px";
+        readonly "6xl": "60px";
+        readonly "7xl": "72px";
+        readonly "8xl": "96px";
+        readonly "9xl": "128px";
+    };
+    readonly fontWeight: {
+        readonly thin: "100";
+        readonly extralight: "200";
+        readonly light: "300";
+        readonly normal: "400";
+        readonly medium: "500";
+        readonly semibold: "600";
+        readonly bold: "700";
+        readonly extrabold: "800";
+        readonly black: "900";
+    };
+    readonly lineHeight: {
+        readonly none: "1";
+        readonly tight: "1.25";
+        readonly snug: "1.375";
+        readonly normal: "1.5";
+        readonly relaxed: "1.625";
+        readonly loose: "2";
+    };
+    readonly letterSpacing: {
+        readonly tighter: "-0.8px";
+        readonly tight: "-0.4px";
+        readonly normal: "0px";
+        readonly wide: "0.4px";
+        readonly wider: "0.8px";
+        readonly widest: "1.6px";
+    };
+};
+export type Typography = typeof typography;
+export type FontFamily = keyof typeof typography.fontFamily;
+export type FontSize = keyof typeof typography.fontSize;
+export type FontWeight = keyof typeof typography.fontWeight;

package/package.json

@@ -0,0 +1,104 @@
+{
+  "name": "@dynamic-mockups/design-system",
+  "version": "0.1.0",
+  "description": "A professional, scalable design system built with React 18, TypeScript, Radix UI, and Storybook",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "type": "module",
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git@gitlab.designcopilot.io:design-copilot/design-system.git"
+  },
+  "bugs": {
+    "url": "https://gitlab.designcopilot.io/design-copilot/design-system/-/issues"
+  },
+  "homepage": "https://gitlab.designcopilot.io/design-copilot/design-system#readme",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./styles.css": "./dist/design-system.css"
+  },
+  "scripts": {
+    "test": "vitest run --config vitest.config.unit.ts",
+    "test:unit": "vitest run --config vitest.config.unit.ts",
+    "test:unit:watch": "vitest --config vitest.config.unit.ts",
+    "test:storybook": "vitest run --config vitest.config.js",
+    "test:storybook:watch": "vitest --config vitest.config.js --watch",
+    "test:coverage": "vitest run --config vitest.config.unit.ts --coverage",
+    "build": "vite build && tsc -p tsconfig.build.json && node scripts/post-build.cjs",
+    "dev": "vite",
+    "preview": "vite preview",
+    "typecheck": "tsc --noEmit",
+    "storybook": "storybook dev -p 6006",
+    "storybook:test": "storybook dev -p 6006 --test",
+    "build-storybook": "storybook build",
+    "prepublishOnly": "npm run typecheck && npm run test && npm run build",
+    "version": "npm run build && git add -A dist",
+    "postversion": "git push && git push --tags"
+  },
+  "keywords": [
+    "design-system",
+    "react",
+    "typescript",
+    "radix-ui",
+    "storybook",
+    "components",
+    "ui"
+  ],
+  "author": "Dynamic Mockups LTD <support@dynamicmockups.com>",
+  "license": "MIT",
+  "peerDependencies": {
+    "@radix-ui/themes": "^3.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "dependencies": {
+    "@iconify-icon/react": "^3.0.3",
+    "@radix-ui/colors": "^3.0.0"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^4.1.3",
+    "@radix-ui/themes": "^3.2.1",
+    "@storybook/addon-a11y": "^10.1.4",
+    "@storybook/addon-docs": "^10.1.4",
+    "@storybook/addon-mcp": "^0.1.5",
+    "@storybook/addon-onboarding": "^10.1.4",
+    "@storybook/addon-themes": "^10.1.4",
+    "@storybook/addon-vitest": "^10.1.4",
+    "@storybook/react-vite": "^10.1.4",
+    "@testing-library/react": "^14",
+    "@types/react": "^18.3.27",
+    "@types/react-dom": "^18.3.7",
+    "@vitejs/plugin-react": "^4.3.4",
+    "@vitest/browser-playwright": "^4.0.15",
+    "@vitest/coverage-v8": "^4.0.15",
+    "happy-dom": "^20.0.11",
+    "jsdom": "^27.4.0",
+    "playwright": "^1.57.0",
+    "prop-types": "^15.8.1",
+    "react": "^18.3.1",
+    "react-docgen-typescript": "^2.4.0",
+    "react-dom": "^18.3.1",
+    "sass": "^1.94.2",
+    "storybook": "^10.1.4",
+    "typescript": "^5.9.3",
+    "vite": "^6.0.7",
+    "vitest": "^4.0.15"
+  },
+  "sideEffects": [
+    "**/*.css",
+    "**/*.scss"
+  ]
+}