@12min/ds 0.1.0 → 3.0.0

package/dist/tokens/index.js

@@ -20,52 +20,261 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/tokens/index.ts
 var tokens_exports = {};
 __export(tokens_exports, {
-  colors: () => colors
+  borderWidth: () => borderWidth,
+  colors: () => colors,
+  grid: () => grid,
+  opacity: () => opacity,
+  radius: () => radius,
+  shadow: () => shadow,
+  spacing: () => spacing,
+  typography: () => typography
 });
 module.exports = __toCommonJS(tokens_exports);
 
 // src/tokens/colors.ts
 var colors = {
-  brand: {
-    primary: "#FF6B35",
-    secondary: "#1A1A2E"
+  marianBlue: {
+    50: "#FAFBFF",
+    100: "#F6F8FF",
+    200: "#E1E7FF",
+    300: "#C3CCF7",
+    400: "#94A5F2",
+    500: "#697DD6",
+    600: "#4357AD",
+    700: "#31428B",
+    800: "#25326A",
+    900: "#131937"
   },
-  neutral: {
-    0: "#FFFFFF",
-    50: "#FAFAFA",
-    100: "#F5F5F5",
-    200: "#E5E5E5",
-    300: "#D4D4D4",
-    400: "#A3A3A3",
-    500: "#737373",
-    600: "#525252",
-    700: "#404040",
-    800: "#262626",
-    900: "#121212"
+  midnight: {
+    50: "#707070",
+    100: "#5C5C5C",
+    200: "#525252",
+    300: "#474747",
+    400: "#3D3D3D",
+    500: "#333333",
+    600: "#292929",
+    700: "#161616",
+    800: "#141414",
+    900: "#0A0A0A"
   },
-  success: {
-    light: "#4ADE80",
-    default: "#22C55E",
-    dark: "#16A34A"
+  gray: {
+    15: "#F4F5F8",
+    25: "#EDEEF1",
+    35: "#DDE0E6",
+    50: "#B1B5BE",
+    100: "#A6ABB5",
+    200: "#9BA0AB",
+    300: "#9095A2",
+    400: "#858B99",
+    500: "#7A8190",
+    600: "#6F7685",
+    700: "#5E6471",
+    800: "#5D636F",
+    900: "#545964"
   },
-  error: {
-    light: "#F87171",
-    default: "#EF4444",
-    dark: "#DC2626"
+  amber: {
+    50: "#FFFBEB",
+    100: "#FEF3C7",
+    200: "#FDE68A",
+    300: "#FCD34D",
+    400: "#FBBF24",
+    500: "#F59E0B",
+    600: "#D97706",
+    700: "#B45309",
+    800: "#92400E",
+    900: "#78350F",
+    text: "#BA5C0A"
   },
-  warning: {
-    light: "#FCD34D",
-    default: "#F59E0B",
-    dark: "#D97706"
+  yellow: {
+    50: "#FFF2D6",
+    100: "#FFECC2",
+    200: "#FFE5AD",
+    300: "#FFDF99",
+    400: "#FFD885",
+    500: "#FFD270",
+    600: "#FFCB5C",
+    700: "#FFC140",
+    800: "#FFBE33",
+    900: "#FFB81F"
   },
-  info: {
-    light: "#60A5FA",
-    default: "#3B82F6",
-    dark: "#2563EB"
+  ketchup: {
+    50: "#FEF2F2",
+    100: "#FEE2E2",
+    200: "#FECACA",
+    300: "#FCA5A5",
+    400: "#F87171",
+    500: "#EF4444",
+    600: "#DC2626",
+    700: "#B91C1C",
+    800: "#991B1B",
+    900: "#7F1D1D",
+    text: "#D91F3C"
+  },
+  green: {
+    50: "#F2FDF4",
+    100: "#E5FBE9",
+    200: "#C7F4D0",
+    300: "#99E5AC",
+    400: "#5FCD80",
+    500: "#36B260",
+    600: "#258F4B",
+    700: "#1B6F3B",
+    800: "#145430",
+    900: "#0E3622",
+    text: "#0E8745"
+  },
+  blue: {
+    50: "#EFF6FF",
+    100: "#DBEAFE",
+    200: "#BFDBFE",
+    300: "#93C5FD",
+    400: "#60A5FA",
+    500: "#3B82F6",
+    600: "#2563EB",
+    700: "#1D4ED8",
+    800: "#1E40AF",
+    900: "#1E3A8A",
+    text: "#1E40AF"
+  },
+  // Single brand accent green — the vibrant tone that was previously green/300
+  // before the green scale was retuned to muted values in the Figma v2 palette.
+  brandGreen: "#6DFFB4",
+  overlayBlack: {
+    5: "#0000000D",
+    8: "#00000014",
+    12: "#0000001F",
+    16: "#00000029"
+  },
+  overlayWhite: {
+    5: "#FFFFFF0D",
+    8: "#FFFFFF14",
+    12: "#FFFFFF1F",
+    16: "#FFFFFF29"
+  },
+  white: "#FFFFFF",
+  black: "#000000"
+};
+
+// src/tokens/typography.ts
+var typography = {
+  display1: { fontFamily: "Poppins", fontSize: 32, fontWeight: "700", lineHeight: 40, letterSpacing: -1, textTransform: "none" },
+  display2: { fontFamily: "Poppins", fontSize: 32, fontWeight: "700", lineHeight: 40, letterSpacing: -1, textTransform: "none" },
+  h1: { fontFamily: "Poppins", fontSize: 24, fontWeight: "700", lineHeight: 32, letterSpacing: -1, textTransform: "none" },
+  h2: { fontFamily: "Poppins", fontSize: 20, fontWeight: "700", lineHeight: 28, letterSpacing: 0, textTransform: "none" },
+  h3: { fontFamily: "Poppins", fontSize: 16, fontWeight: "600", lineHeight: 24, letterSpacing: 0, textTransform: "none" },
+  bodyLarge: { fontFamily: "Inter", fontSize: 16, fontWeight: "500", lineHeight: 24, letterSpacing: 0, textTransform: "none" },
+  bodyDefault: { fontFamily: "Inter", fontSize: 14, fontWeight: "500", lineHeight: 20, letterSpacing: 0, textTransform: "none" },
+  bodySmall: { fontFamily: "Inter", fontSize: 12, fontWeight: "400", lineHeight: 16, letterSpacing: 0.2, textTransform: "none" },
+  labelLarge: { fontFamily: "Inter", fontSize: 16, fontWeight: "600", lineHeight: 20, letterSpacing: 0, textTransform: "none" },
+  labelDefault: { fontFamily: "Inter", fontSize: 14, fontWeight: "600", lineHeight: 20, letterSpacing: 0, textTransform: "none" },
+  labelSmall: { fontFamily: "Inter", fontSize: 12, fontWeight: "600", lineHeight: 16, letterSpacing: 0.2, textTransform: "none" },
+  labelTiny: { fontFamily: "Inter", fontSize: 10, fontWeight: "600", lineHeight: 14, letterSpacing: 0, textTransform: "none" },
+  caption: { fontFamily: "Inter", fontSize: 12, fontWeight: "500", lineHeight: 16, letterSpacing: 0.5, textTransform: "none" },
+  captionUppercase: { fontFamily: "Inter", fontSize: 12, fontWeight: "500", lineHeight: 16, letterSpacing: 0.5, textTransform: "uppercase" },
+  overline: { fontFamily: "Inter", fontSize: 10, fontWeight: "600", lineHeight: 16, letterSpacing: 8, textTransform: "uppercase" },
+  buttonLarge: { fontFamily: "Inter", fontSize: 16, fontWeight: "600", lineHeight: 20, letterSpacing: 0, textTransform: "none" },
+  buttonDefault: { fontFamily: "Inter", fontSize: 14, fontWeight: "600", lineHeight: 20, letterSpacing: 0, textTransform: "none" },
+  buttonSmall: { fontFamily: "Inter", fontSize: 12, fontWeight: "600", lineHeight: 16, letterSpacing: 0, textTransform: "none" }
+};
+
+// src/tokens/spacing.ts
+var spacing = {
+  unit: 4,
+  gap: {
+    "0.5": 2,
+    "1": 4,
+    "2": 8,
+    "3": 12,
+    "4": 16,
+    "5": 20,
+    "6": 24,
+    "8": 32,
+    "10": 40,
+    "12": 48,
+    "14": 56,
+    "16": 64,
+    "18": 72,
+    "20": 80,
+    "22": 88,
+    "24": 96
+  },
+  screen: {
+    x: 16,
+    y: 24
+  }
+};
+
+// src/tokens/grid.ts
+var grid = {
+  // 8px square baseline — line-height/* steps 16/24/32/40 snap; 20 and 28 land on a half-cell
+  baseline: 8,
+  breakpoints: {
+    mobile: 0,
+    tablet: 768,
+    desktop: 1024
+  },
+  columns: {
+    mobile: 4,
+    tablet: 8,
+    desktop: 12
+  },
+  gutter: {
+    mobile: 8,
+    tablet: 16,
+    desktop: 24
+  },
+  margin: {
+    mobile: 20,
+    tablet: 24,
+    desktop: 32
   }
 };
+
+// src/tokens/radius.ts
+var radius = {
+  none: 0,
+  sm: 8,
+  md: 12,
+  lg: 16,
+  xl: 20,
+  "2xl": 24,
+  full: 9999,
+  button: 16,
+  card: 20,
+  input: 12,
+  chip: 9999,
+  badge: 8
+};
+
+// src/tokens/borderWidth.ts
+var borderWidth = {
+  default: 1,
+  strong: 1.5,
+  heavy: 2
+};
+
+// src/tokens/shadow.ts
+var shadow = {
+  sm: { offsetX: 0, offsetY: 1, blur: 3, spread: 0, color: "#000000", opacity: { light: 0.08, dark: 0.4 } },
+  md: { offsetX: 0, offsetY: 4, blur: 12, spread: 0, color: "#000000", opacity: { light: 0.1, dark: 0.5 } },
+  lg: { offsetX: 0, offsetY: 8, blur: 24, spread: -4, color: "#000000", opacity: { light: 0.12, dark: 0.6 } }
+};
+
+// src/tokens/opacity.ts
+var opacity = {
+  disabled: 0.4,
+  hover: 0.08,
+  pressed: 0.12
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  colors
+  borderWidth,
+  colors,
+  grid,
+  opacity,
+  radius,
+  shadow,
+  spacing,
+  typography
 });
 //# sourceMappingURL=index.js.map

package/dist/tokens/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/tokens/index.ts","../../src/tokens/colors.ts"],"sourcesContent":["export * from './colors'\n","export const colors = {\n  brand: {\n    primary:   '#FF6B35',\n    secondary: '#1A1A2E',\n  },\n\n  neutral: {\n    0:   '#FFFFFF',\n    50:  '#FAFAFA',\n    100: '#F5F5F5',\n    200: '#E5E5E5',\n    300: '#D4D4D4',\n    400: '#A3A3A3',\n    500: '#737373',\n    600: '#525252',\n    700: '#404040',\n    800: '#262626',\n    900: '#121212',\n  },\n\n  success: {\n    light:   '#4ADE80',\n    default: '#22C55E',\n    dark:    '#16A34A',\n  },\n\n  error: {\n    light:   '#F87171',\n    default: '#EF4444',\n    dark:    '#DC2626',\n  },\n\n  warning: {\n    light:   '#FCD34D',\n    default: '#F59E0B',\n    dark:    '#D97706',\n  },\n\n  info: {\n    light:   '#60A5FA',\n    default: '#3B82F6',\n    dark:    '#2563EB',\n  },\n} as const\n\nexport type Colors = typeof colors\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAO,IAAM,SAAS;AAAA,EACpB,OAAO;AAAA,IACL,SAAW;AAAA,IACX,WAAW;AAAA,EACb;AAAA,EAEA,SAAS;AAAA,IACP,GAAK;AAAA,IACL,IAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,EACP;AAAA,EAEA,SAAS;AAAA,IACP,OAAS;AAAA,IACT,SAAS;AAAA,IACT,MAAS;AAAA,EACX;AAAA,EAEA,OAAO;AAAA,IACL,OAAS;AAAA,IACT,SAAS;AAAA,IACT,MAAS;AAAA,EACX;AAAA,EAEA,SAAS;AAAA,IACP,OAAS;AAAA,IACT,SAAS;AAAA,IACT,MAAS;AAAA,EACX;AAAA,EAEA,MAAM;AAAA,IACJ,OAAS;AAAA,IACT,SAAS;AAAA,IACT,MAAS;AAAA,EACX;AACF;","names":[]}
+{"version":3,"sources":["../../src/tokens/index.ts","../../src/tokens/colors.ts","../../src/tokens/typography.ts","../../src/tokens/spacing.ts","../../src/tokens/grid.ts","../../src/tokens/radius.ts","../../src/tokens/borderWidth.ts","../../src/tokens/shadow.ts","../../src/tokens/opacity.ts"],"sourcesContent":["export * from './colors'\nexport * from './typography'\nexport * from './spacing'\nexport * from './grid'\nexport * from './radius'\nexport * from './borderWidth'\nexport * from './shadow'\nexport * from './opacity'\n","export const colors = {\n  marianBlue: {\n    50:  '#FAFBFF',\n    100: '#F6F8FF',\n    200: '#E1E7FF',\n    300: '#C3CCF7',\n    400: '#94A5F2',\n    500: '#697DD6',\n    600: '#4357AD',\n    700: '#31428B',\n    800: '#25326A',\n    900: '#131937',\n  },\n\n  midnight: {\n    50:  '#707070',\n    100: '#5C5C5C',\n    200: '#525252',\n    300: '#474747',\n    400: '#3D3D3D',\n    500: '#333333',\n    600: '#292929',\n    700: '#161616',\n    800: '#141414',\n    900: '#0A0A0A',\n  },\n\n  gray: {\n    15:  '#F4F5F8',\n    25:  '#EDEEF1',\n    35:  '#DDE0E6',\n    50:  '#B1B5BE',\n    100: '#A6ABB5',\n    200: '#9BA0AB',\n    300: '#9095A2',\n    400: '#858B99',\n    500: '#7A8190',\n    600: '#6F7685',\n    700: '#5E6471',\n    800: '#5D636F',\n    900: '#545964',\n  },\n\n  amber: {\n    50:   '#FFFBEB',\n    100:  '#FEF3C7',\n    200:  '#FDE68A',\n    300:  '#FCD34D',\n    400:  '#FBBF24',\n    500:  '#F59E0B',\n    600:  '#D97706',\n    700:  '#B45309',\n    800:  '#92400E',\n    900:  '#78350F',\n    text: '#BA5C0A',\n  },\n\n  yellow: {\n    50:  '#FFF2D6',\n    100: '#FFECC2',\n    200: '#FFE5AD',\n    300: '#FFDF99',\n    400: '#FFD885',\n    500: '#FFD270',\n    600: '#FFCB5C',\n    700: '#FFC140',\n    800: '#FFBE33',\n    900: '#FFB81F',\n  },\n\n  ketchup: {\n    50:   '#FEF2F2',\n    100:  '#FEE2E2',\n    200:  '#FECACA',\n    300:  '#FCA5A5',\n    400:  '#F87171',\n    500:  '#EF4444',\n    600:  '#DC2626',\n    700:  '#B91C1C',\n    800:  '#991B1B',\n    900:  '#7F1D1D',\n    text: '#D91F3C',\n  },\n\n  green: {\n    50:   '#F2FDF4',\n    100:  '#E5FBE9',\n    200:  '#C7F4D0',\n    300:  '#99E5AC',\n    400:  '#5FCD80',\n    500:  '#36B260',\n    600:  '#258F4B',\n    700:  '#1B6F3B',\n    800:  '#145430',\n    900:  '#0E3622',\n    text: '#0E8745',\n  },\n\n  blue: {\n    50:   '#EFF6FF',\n    100:  '#DBEAFE',\n    200:  '#BFDBFE',\n    300:  '#93C5FD',\n    400:  '#60A5FA',\n    500:  '#3B82F6',\n    600:  '#2563EB',\n    700:  '#1D4ED8',\n    800:  '#1E40AF',\n    900:  '#1E3A8A',\n    text: '#1E40AF',\n  },\n\n  // Single brand accent green — the vibrant tone that was previously green/300\n  // before the green scale was retuned to muted values in the Figma v2 palette.\n  brandGreen: '#6DFFB4',\n\n  overlayBlack: {\n    5:  '#0000000D',\n    8:  '#00000014',\n    12: '#0000001F',\n    16: '#00000029',\n  },\n\n  overlayWhite: {\n    5:  '#FFFFFF0D',\n    8:  '#FFFFFF14',\n    12: '#FFFFFF1F',\n    16: '#FFFFFF29',\n  },\n\n  white: '#FFFFFF',\n  black: '#000000',\n} as const\n\nexport type Colors = typeof colors\n","export const typography = {\n  display1:      { fontFamily: 'Poppins', fontSize: 32, fontWeight: '700', lineHeight: 40, letterSpacing: -1,  textTransform: 'none' },\n  display2:      { fontFamily: 'Poppins', fontSize: 32, fontWeight: '700', lineHeight: 40, letterSpacing: -1,  textTransform: 'none' },\n  h1:            { fontFamily: 'Poppins', fontSize: 24, fontWeight: '700', lineHeight: 32, letterSpacing: -1,  textTransform: 'none' },\n  h2:            { fontFamily: 'Poppins', fontSize: 20, fontWeight: '700', lineHeight: 28, letterSpacing: 0,   textTransform: 'none' },\n  h3:            { fontFamily: 'Poppins', fontSize: 16, fontWeight: '600', lineHeight: 24, letterSpacing: 0,   textTransform: 'none' },\n  bodyLarge:     { fontFamily: 'Inter',   fontSize: 16, fontWeight: '500', lineHeight: 24, letterSpacing: 0,   textTransform: 'none' },\n  bodyDefault:   { fontFamily: 'Inter',   fontSize: 14, fontWeight: '500', lineHeight: 20, letterSpacing: 0,   textTransform: 'none' },\n  bodySmall:     { fontFamily: 'Inter',   fontSize: 12, fontWeight: '400', lineHeight: 16, letterSpacing: 0.2, textTransform: 'none' },\n  labelLarge:    { fontFamily: 'Inter',   fontSize: 16, fontWeight: '600', lineHeight: 20, letterSpacing: 0,   textTransform: 'none' },\n  labelDefault:  { fontFamily: 'Inter',   fontSize: 14, fontWeight: '600', lineHeight: 20, letterSpacing: 0,   textTransform: 'none' },\n  labelSmall:    { fontFamily: 'Inter',   fontSize: 12, fontWeight: '600', lineHeight: 16, letterSpacing: 0.2, textTransform: 'none' },\n  labelTiny:     { fontFamily: 'Inter',   fontSize: 10, fontWeight: '600', lineHeight: 14, letterSpacing: 0,   textTransform: 'none' },\n  caption:       { fontFamily: 'Inter',   fontSize: 12, fontWeight: '500', lineHeight: 16, letterSpacing: 0.5, textTransform: 'none' },\n  captionUppercase: { fontFamily: 'Inter', fontSize: 12, fontWeight: '500', lineHeight: 16, letterSpacing: 0.5, textTransform: 'uppercase' },\n  overline:      { fontFamily: 'Inter',   fontSize: 10, fontWeight: '600', lineHeight: 16, letterSpacing: 8,   textTransform: 'uppercase' },\n  buttonLarge:   { fontFamily: 'Inter',   fontSize: 16, fontWeight: '600', lineHeight: 20, letterSpacing: 0,   textTransform: 'none' },\n  buttonDefault: { fontFamily: 'Inter',   fontSize: 14, fontWeight: '600', lineHeight: 20, letterSpacing: 0,   textTransform: 'none' },\n  buttonSmall:   { fontFamily: 'Inter',   fontSize: 12, fontWeight: '600', lineHeight: 16, letterSpacing: 0,   textTransform: 'none' },\n} as const\n\nexport type Typography = typeof typography\n","export const spacing = {\n  unit: 4,\n  gap: {\n    '0.5': 2,\n    '1':   4,\n    '2':   8,\n    '3':   12,\n    '4':   16,\n    '5':   20,\n    '6':   24,\n    '8':   32,\n    '10':  40,\n    '12':  48,\n    '14':  56,\n    '16':  64,\n    '18':  72,\n    '20':  80,\n    '22':  88,\n    '24':  96,\n  },\n  screen: {\n    x: 16,\n    y: 24,\n  },\n} as const\n\nexport type Spacing = typeof spacing\n","export const grid = {\n  // 8px square baseline — line-height/* steps 16/24/32/40 snap; 20 and 28 land on a half-cell\n  baseline: 8,\n  breakpoints: {\n    mobile:  0,\n    tablet:  768,\n    desktop: 1024,\n  },\n  columns: {\n    mobile:  4,\n    tablet:  8,\n    desktop: 12,\n  },\n  gutter: {\n    mobile:  8,\n    tablet:  16,\n    desktop: 24,\n  },\n  margin: {\n    mobile:  20,\n    tablet:  24,\n    desktop: 32,\n  },\n} as const\n\nexport type Grid = typeof grid\n","export const radius = {\n  none:   0,\n  sm:     8,\n  md:     12,\n  lg:     16,\n  xl:     20,\n  '2xl':  24,\n  full:   9999,\n\n  button: 16,\n  card:   20,\n  input:  12,\n  chip:   9999,\n  badge:  8,\n} as const\n\nexport type Radius = typeof radius\n","export const borderWidth = {\n  default: 1,\n  strong:  1.5,\n  heavy:   2,\n} as const\n\nexport type BorderWidth = typeof borderWidth\n","export const shadow = {\n  sm: { offsetX: 0, offsetY: 1, blur: 3,  spread: 0,  color: '#000000', opacity: { light: 0.08, dark: 0.40 } },\n  md: { offsetX: 0, offsetY: 4, blur: 12, spread: 0,  color: '#000000', opacity: { light: 0.10, dark: 0.50 } },\n  lg: { offsetX: 0, offsetY: 8, blur: 24, spread: -4, color: '#000000', opacity: { light: 0.12, dark: 0.60 } },\n} as const\n\nexport type Shadow = typeof shadow\n","export const opacity = {\n  disabled: 0.4,\n  hover:    0.08,\n  pressed:  0.12,\n} as const\n\nexport type Opacity = typeof opacity\n"],"mappings":"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","names":[]}

package/dist/tokens/index.mjs

@@ -1,7 +1,21 @@
 import {
-  colors
-} from "../chunk-E2C4G6H4.mjs";
+  borderWidth,
+  colors,
+  grid,
+  opacity,
+  radius,
+  shadow,
+  spacing,
+  typography
+} from "../chunk-ZK7NW4WW.mjs";
 export {
-  colors
+  borderWidth,
+  colors,
+  grid,
+  opacity,
+  radius,
+  shadow,
+  spacing,
+  typography
 };
 //# sourceMappingURL=index.mjs.map

package/package.json

@@ -1,7 +1,10 @@
 {
   "name": "@12min/ds",
-  "version": "0.1.0",
-  "sideEffects": ["dist/tailwind/theme.css"],
+  "version": "3.0.0",
+  "packageManager": "pnpm@11.15.1",
+  "sideEffects": [
+    "dist/tailwind/theme.css"
+  ],
   "main": "./dist/index.web.js",
   "module": "./dist/index.web.mjs",
   "types": "./dist/index.web.d.ts",
@@ -36,7 +39,14 @@
     "dev": "tsup --watch",
     "typecheck": "tsc --noEmit",
     "lint": "eslint src --ext ts,tsx",
-    "prepublishOnly": "pnpm build && pnpm typecheck"
+    "prepublishOnly": "pnpm build && pnpm typecheck",
+    "prestorybook": "pnpm generate:theme",
+    "storybook": "storybook dev -p 6006",
+    "prebuild:storybook": "pnpm generate:theme",
+    "build:storybook": "storybook build --output-dir storybook-static",
+    "test:unit": "vitest run",
+    "test:unit:watch": "vitest",
+    "test:unit:coverage": "vitest run --coverage"
   },
   "peerDependencies": {
     "react": ">=18",
@@ -50,12 +60,25 @@
     "tailwind-merge": "^3.0.0"
   },
   "devDependencies": {
+    "@storybook/addon-a11y": "^8.6.18",
+    "@storybook/addon-essentials": "^8",
+    "@storybook/addon-themes": "^8.6.18",
+    "@storybook/blocks": "^8",
+    "@storybook/react": "^8.6.18",
+    "@storybook/react-vite": "^8.6.18",
+    "@tailwindcss/vite": "^4.2.4",
     "@types/node": "^25.6.0",
     "@types/react": "^19.2.14",
     "@types/react-native": "^0.73.0",
+    "@vitejs/plugin-react": "^4.7.0",
+    "@vitest/coverage-v8": "^4.1.5",
     "eslint": "^9.39.4",
+    "storybook": "^8.6.18",
+    "tailwindcss": "^4.2.4",
     "tsup": "^8.0.0",
     "tsx": "^4.7.0",
-    "typescript": "^5.3.0"
+    "typescript": "^5.3.0",
+    "vite": "^6.4.2",
+    "vitest": "^4.1.5"
   }
-}
+}

package/dist/chunk-E2C4G6H4.mjs

@@ -1,45 +0,0 @@
-// src/tokens/colors.ts
-var colors = {
-  brand: {
-    primary: "#FF6B35",
-    secondary: "#1A1A2E"
-  },
-  neutral: {
-    0: "#FFFFFF",
-    50: "#FAFAFA",
-    100: "#F5F5F5",
-    200: "#E5E5E5",
-    300: "#D4D4D4",
-    400: "#A3A3A3",
-    500: "#737373",
-    600: "#525252",
-    700: "#404040",
-    800: "#262626",
-    900: "#121212"
-  },
-  success: {
-    light: "#4ADE80",
-    default: "#22C55E",
-    dark: "#16A34A"
-  },
-  error: {
-    light: "#F87171",
-    default: "#EF4444",
-    dark: "#DC2626"
-  },
-  warning: {
-    light: "#FCD34D",
-    default: "#F59E0B",
-    dark: "#D97706"
-  },
-  info: {
-    light: "#60A5FA",
-    default: "#3B82F6",
-    dark: "#2563EB"
-  }
-};
-
-export {
-  colors
-};
-//# sourceMappingURL=chunk-E2C4G6H4.mjs.map

package/dist/chunk-E2C4G6H4.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/tokens/colors.ts"],"sourcesContent":["export const colors = {\n  brand: {\n    primary:   '#FF6B35',\n    secondary: '#1A1A2E',\n  },\n\n  neutral: {\n    0:   '#FFFFFF',\n    50:  '#FAFAFA',\n    100: '#F5F5F5',\n    200: '#E5E5E5',\n    300: '#D4D4D4',\n    400: '#A3A3A3',\n    500: '#737373',\n    600: '#525252',\n    700: '#404040',\n    800: '#262626',\n    900: '#121212',\n  },\n\n  success: {\n    light:   '#4ADE80',\n    default: '#22C55E',\n    dark:    '#16A34A',\n  },\n\n  error: {\n    light:   '#F87171',\n    default: '#EF4444',\n    dark:    '#DC2626',\n  },\n\n  warning: {\n    light:   '#FCD34D',\n    default: '#F59E0B',\n    dark:    '#D97706',\n  },\n\n  info: {\n    light:   '#60A5FA',\n    default: '#3B82F6',\n    dark:    '#2563EB',\n  },\n} as const\n\nexport type Colors = typeof colors\n"],"mappings":";AAAO,IAAM,SAAS;AAAA,EACpB,OAAO;AAAA,IACL,SAAW;AAAA,IACX,WAAW;AAAA,EACb;AAAA,EAEA,SAAS;AAAA,IACP,GAAK;AAAA,IACL,IAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,EACP;AAAA,EAEA,SAAS;AAAA,IACP,OAAS;AAAA,IACT,SAAS;AAAA,IACT,MAAS;AAAA,EACX;AAAA,EAEA,OAAO;AAAA,IACL,OAAS;AAAA,IACT,SAAS;AAAA,IACT,MAAS;AAAA,EACX;AAAA,EAEA,SAAS;AAAA,IACP,OAAS;AAAA,IACT,SAAS;AAAA,IACT,MAAS;AAAA,EACX;AAAA,EAEA,MAAM;AAAA,IACJ,OAAS;AAAA,IACT,SAAS;AAAA,IACT,MAAS;AAAA,EACX;AACF;","names":[]}

package/dist/chunk-QIJRSFZB.mjs

@@ -1,41 +0,0 @@
-import {
-  colors
-} from "./chunk-E2C4G6H4.mjs";
-
-// src/themes/lightTheme.ts
-var lightTheme = {
-  background: colors.neutral[0],
-  surface: colors.neutral[100],
-  border: colors.neutral[200],
-  onBackground: colors.neutral[900],
-  onSurface: colors.neutral[800],
-  muted: colors.neutral[500],
-  primary: colors.brand.primary,
-  secondary: colors.brand.secondary,
-  success: colors.success.default,
-  error: colors.error.default,
-  warning: colors.warning.default,
-  info: colors.info.default
-};
-
-// src/themes/darkTheme.ts
-var darkTheme = {
-  background: colors.neutral[900],
-  surface: colors.neutral[800],
-  border: colors.neutral[700],
-  onBackground: colors.neutral[0],
-  onSurface: colors.neutral[100],
-  muted: colors.neutral[400],
-  primary: colors.brand.primary,
-  secondary: colors.brand.secondary,
-  success: colors.success.light,
-  error: colors.error.light,
-  warning: colors.warning.light,
-  info: colors.info.light
-};
-
-export {
-  lightTheme,
-  darkTheme
-};
-//# sourceMappingURL=chunk-QIJRSFZB.mjs.map

package/dist/chunk-QIJRSFZB.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/themes/lightTheme.ts","../src/themes/darkTheme.ts"],"sourcesContent":["import { colors } from '../tokens/colors'\nimport type { Theme } from './types'\n\nexport const lightTheme: Theme = {\n  background:   colors.neutral[0],\n  surface:      colors.neutral[100],\n  border:       colors.neutral[200],\n  onBackground: colors.neutral[900],\n  onSurface:    colors.neutral[800],\n  muted:        colors.neutral[500],\n  primary:      colors.brand.primary,\n  secondary:    colors.brand.secondary,\n  success:      colors.success.default,\n  error:        colors.error.default,\n  warning:      colors.warning.default,\n  info:         colors.info.default,\n}\n","import { colors } from '../tokens/colors'\nimport type { Theme } from './types'\n\nexport const darkTheme: Theme = {\n  background:    colors.neutral[900],\n  surface:       colors.neutral[800],\n  border:        colors.neutral[700],\n  onBackground:  colors.neutral[0],\n  onSurface:     colors.neutral[100],\n  muted:         colors.neutral[400],\n  primary:       colors.brand.primary,\n  secondary:     colors.brand.secondary,\n  success:       colors.success.light,\n  error:         colors.error.light,\n  warning:       colors.warning.light,\n  info:          colors.info.light,\n} as const\n"],"mappings":";;;;;AAGO,IAAM,aAAoB;AAAA,EAC/B,YAAc,OAAO,QAAQ,CAAC;AAAA,EAC9B,SAAc,OAAO,QAAQ,GAAG;AAAA,EAChC,QAAc,OAAO,QAAQ,GAAG;AAAA,EAChC,cAAc,OAAO,QAAQ,GAAG;AAAA,EAChC,WAAc,OAAO,QAAQ,GAAG;AAAA,EAChC,OAAc,OAAO,QAAQ,GAAG;AAAA,EAChC,SAAc,OAAO,MAAM;AAAA,EAC3B,WAAc,OAAO,MAAM;AAAA,EAC3B,SAAc,OAAO,QAAQ;AAAA,EAC7B,OAAc,OAAO,MAAM;AAAA,EAC3B,SAAc,OAAO,QAAQ;AAAA,EAC7B,MAAc,OAAO,KAAK;AAC5B;;;ACbO,IAAM,YAAmB;AAAA,EAC9B,YAAe,OAAO,QAAQ,GAAG;AAAA,EACjC,SAAe,OAAO,QAAQ,GAAG;AAAA,EACjC,QAAe,OAAO,QAAQ,GAAG;AAAA,EACjC,cAAe,OAAO,QAAQ,CAAC;AAAA,EAC/B,WAAe,OAAO,QAAQ,GAAG;AAAA,EACjC,OAAe,OAAO,QAAQ,GAAG;AAAA,EACjC,SAAe,OAAO,MAAM;AAAA,EAC5B,WAAe,OAAO,MAAM;AAAA,EAC5B,SAAe,OAAO,QAAQ;AAAA,EAC9B,OAAe,OAAO,MAAM;AAAA,EAC5B,SAAe,OAAO,QAAQ;AAAA,EAC9B,MAAe,OAAO,KAAK;AAC7B;","names":[]}