@12min/ds 0.1.0 → 1.0.0

package/README.md

@@ -1,12 +1,3 @@
-```text
- ██╗  ██████╗     ███╗   ███╗  ██╗  ███╗   ██╗              ██████╗   ███████╗
-███║  ╚════██╗    ████╗ ████║  ██║  ████╗  ██║              ██╔══██╗  ██╔════╝
-╚██║   █████╔╝    ██╔████╔██║  ██║  ██╔██╗ ██║    █████╗    ██║  ██║  ███████╗
- ██║  ██╔═══╝     ██║╚██╔╝██║  ██║  ██║╚██╗██║    ╚════╝    ██║  ██║  ╚════██║
- ██║  ███████╗    ██║ ╚═╝ ██║  ██║  ██║ ╚████║              ██████╔╝  ███████║
- ╚═╝  ╚══════╝    ╚═╝     ╚═╝  ╚═╝  ╚═╝  ╚═══╝              ╚═════╝   ╚══════╝
-```
-
 # `@12min/ds`
 
 Single source of truth for 12min's visual language — tokens, styles, and components shared across web and mobile.
@@ -15,12 +6,15 @@ Single source of truth for 12min's visual language — tokens, styles, and compo
 
 ## What's included
 
-| | Now | Phase 2 |
-|---|---|---|
-| Color tokens | ✅ | |
-| CSS theme (`theme.css`) | ✅ | |
-| Semantic themes (light / dark) | ✅ | |
-| Core components (Button, Input, Card, Modal) | | ✅ |
+| | Status |
+|---|---|
+| Color palette (`marianBlue`, `midnight`, `gray`, `mustard`, `ketchup`, `mint`) | ✅ |
+| Typography tokens (14-entry scale) | ✅ |
+| CSS theme (`theme.css`) — colors + `@utility text-*` blocks | ✅ |
+| Semantic themes (light / dark) | ✅ |
+| Components — Button, Chip, Alert, ProgressBar, Input, Checkbox, RadioItem, RadioGroup, ActionItem, Stepper, RatingScale | ✅ |
+| `DSThemeProvider` + `useTheme` (native programmatic dark mode) | ✅ |
+| Storybook 8 | ✅ |
 
 ---
 
@@ -37,26 +31,14 @@ pnpm add @12min/ds
 pnpm add tailwindcss@^4.0.0
 
 # mobile
-bun add nativewind@5.0.0-preview.3
-bun add --dev tailwindcss@^4.0.0
+pnpm add nativewind@5.0.0-preview.3
+pnpm add --dev tailwindcss@^4.0.0
 ```
 
 ---
 
 ## Usage
 
-### Tokens
-
-Raw token values as TypeScript — use anywhere, including `StyleSheet.create`.
-
-```ts
-import { colors } from '@12min/ds/tokens'
-
-const styles = StyleSheet.create({
-  button: { backgroundColor: colors.brand.primary },
-})
-```
-
 ### Web — Tailwind v4
 
 Import the generated theme in your global CSS entry point:
@@ -67,15 +49,28 @@ Import the generated theme in your global CSS entry point:
 @import "@12min/ds/tailwind/theme.css";
 ```
 
-All tokens are now available as Tailwind utilities:
+All palette tokens are available as Tailwind utilities, and typography utilities are pre-built:
+
+```tsx
+<div className="bg-marian-blue-600 text-white">
+<p className="text-body-default">Body text</p>
+<h1 className="text-h1">Heading</h1>
+```
+
+Import components from `@12min/ds`:
 
 ```tsx
-<div className="bg-brand-primary text-neutral-0">
-<div className="bg-success text-neutral-0">
-<div className="bg-error-light">
+import { Button, Input, RadioItem, RadioGroup } from '@12min/ds'
+
+<Button variant="primary" size="md">Continue</Button>
+
+<RadioGroup label="Pick your profile">
+  <RadioItem label="Leader" selected={selected === 'leader'} onClick={() => setSelected('leader')} />
+  <RadioItem label="Student" selected={selected === 'student'} onClick={() => setSelected('student')} />
+</RadioGroup>
 ```
 
-### Mobile — NativeWind v5
+### Mobile — React Native + NativeWind v5
 
 Point Metro at the published theme file:
 
@@ -88,36 +83,73 @@ module.exports = withNativeWind(config, {
 })
 ```
 
-Same class names, compiled to `StyleSheet` at build time:
+Wrap your app in `DSThemeProvider` for programmatic dark mode:
 
 ```tsx
-<View className="bg-brand-primary dark:bg-neutral-900">
-  <Text className="text-neutral-0">Hello</Text>
-</View>
+import { DSThemeProvider, Button, Input } from '@12min/ds'
+
+export default function App() {
+  const colorScheme = useColorScheme()
+  return (
+    <DSThemeProvider colorScheme={colorScheme ?? 'light'}>
+      <Button variant="primary" onPress={handlePress}>Continue</Button>
+      <Input placeholder="Email" state="default" />
+    </DSThemeProvider>
+  )
+}
+```
+
+Access theme tokens directly via `useTheme()`:
+
+```tsx
+import { useTheme } from '@12min/ds'
+
+const { theme } = useTheme()
+// theme.primary, theme.background, theme.error, ...
 ```
 
-### Semantic themes (optional)
+### Tokens (framework-agnostic)
 
-For programmatic access to token values — useful for chart libraries, animations, or any non-Tailwind consumer:
+Raw token values as TypeScript — useful for chart libraries, animations, or any non-Tailwind consumer:
 
 ```ts
+import { colors, typography } from '@12min/ds/tokens'
 import { lightTheme, darkTheme } from '@12min/ds'
-import { useColorScheme } from 'react-native'
 
-const scheme = useColorScheme()
-const theme = scheme === 'dark' ? darkTheme : lightTheme
-
-// theme.primary === '#FF6B35'
-// theme.background, theme.surface, theme.error, ...
+// colors.marianBlue[600] === '#475CBB'
+// typography.bodyDefault.fontSize === 14
+// lightTheme.primary === '#475CBB'
 ```
 
 ---
 
+## Components
+
+All components are available on both web and native from the same `@12min/ds` import.
+
+| Component | Props |
+|---|---|
+| `Button` | `variant` (primary/secondary/ghost), `size` (sm/md/lg), `disabled` |
+| `Chip` | `children`, `checked`, `onPress`/`onClick` |
+| `Alert` | `variant` (info/success), `title`, `description` |
+| `ProgressBar` | `value` (0–100) |
+| `Input` | `state` (default/filled/error/disabled), `leadingIcon`, `placeholder` |
+| `Checkbox` | `checked`, `onChange`, `disabled` |
+| `RadioItem` | `label`, `description`, `selected`, `icon`, `onPress`/`onClick` |
+| `RadioGroup` | `label` (for a11y), `className`/`style` — wraps `RadioItem` list |
+| `ActionItem` | `label`, `description`, `selected`, `icon`, `onPress`/`onClick` |
+| `Stepper` | `steps`, `currentStep` |
+| `RatingScale` | `value`, `onChange`, `options` (default: 5 emoji options) |
+
+> Native components accept a `style` prop for layout overrides. Web components accept `className`.
+
+---
+
 ## Development
 
 ### Requirements
 
-- Node 20+
+- Node 22+
 - pnpm 10+
 
 ```sh
@@ -132,13 +164,15 @@ pnpm install
 | `pnpm dev` | Watch mode (tsup) |
 | `pnpm generate:theme` | Regenerate `src/tailwind/theme.css` from tokens |
 | `pnpm typecheck` | TypeScript — library code |
+| `pnpm test:unit` | Run unit tests (vitest) |
+| `pnpm storybook` | Start Storybook on port 6006 |
 | `pnpm lint` | ESLint |
 
 ### Adding or changing tokens
 
-1. Edit `src/tokens/colors.ts`
+1. Edit `src/tokens/colors.ts` or `src/tokens/typography.ts`
 2. Run `pnpm generate:theme` to regenerate `theme.css`
-3. Verify the output in `src/tailwind/theme.css`
+3. If adding a new semantic token, update `src/themes/types.ts` first, then both `lightTheme.ts` and `darkTheme.ts`
 4. Run `pnpm build` before committing
 
 `theme.css` is gitignored — it is always generated from source.
@@ -159,8 +193,7 @@ pnpm version major   # 0.1.0 → 1.0.0
 git push origin main --tags
 ```
 
-The GitHub Actions release workflow publishes to npm automatically on `v*` tags.  
-See [`docs/next-steps.md §5`](docs/next-steps.md) for the full workflow file.
+The GitHub Actions CI runs typecheck, build, and unit tests on every push to `main` and on pull requests.
 
 ---
 

package/dist/chunk-CC3QVZS2.mjs

@@ -0,0 +1,80 @@
+import {
+  colors
+} from "./chunk-NK4IHR7O.mjs";
+
+// src/themes/lightTheme.ts
+var lightTheme = {
+  background: colors.marianBlue[50],
+  surface: colors.marianBlue[100],
+  border: colors.marianBlue[200],
+  onBackground: colors.midnight[900],
+  onSurface: colors.midnight[700],
+  muted: colors.gray[500],
+  primary: colors.marianBlue[600],
+  secondary: colors.midnight[900],
+  success: colors.mint[800],
+  error: colors.ketchup[600],
+  warning: colors.mustard[500],
+  info: colors.marianBlue[500],
+  surfaceDisabled: colors.gray[50],
+  successBg: colors.successBg,
+  textSecondary: colors.gray[700],
+  textTertiary: colors.gray[500],
+  textInverse: colors.white,
+  borderStrong: colors.marianBlue[600],
+  borderSubtle: colors.marianBlue[200],
+  interactivePressed: colors.marianBlue[800]
+};
+
+// src/themes/darkTheme.ts
+var darkTheme = {
+  background: colors.midnight[900],
+  surface: colors.midnight[700],
+  border: colors.midnight[500],
+  onBackground: colors.marianBlue[50],
+  onSurface: colors.gray[50],
+  muted: colors.gray[600],
+  primary: colors.marianBlue[400],
+  secondary: colors.marianBlue[50],
+  success: colors.mint[400],
+  error: colors.ketchup[400],
+  warning: colors.mustard[400],
+  info: colors.marianBlue[300],
+  surfaceDisabled: colors.midnight[600],
+  successBg: colors.midnight[800],
+  textSecondary: colors.gray[400],
+  textTertiary: colors.gray[500],
+  textInverse: colors.midnight[900],
+  borderStrong: colors.marianBlue[400],
+  borderSubtle: colors.midnight[600],
+  interactivePressed: colors.marianBlue[300]
+};
+
+// src/components/RatingScale/RatingScale.styles.ts
+var ratingScaleTokens = {
+  itemWidth: 60,
+  circleSize: 60,
+  circlePadding: 8,
+  circleRadius: 30,
+  emojiFontSize: 38,
+  emojiLineHeight: 44,
+  labelFontSize: 12,
+  numberFontSize: 10,
+  itemGap: 8,
+  labelNumberGap: 11
+};
+var DEFAULT_OPTIONS = [
+  { emoji: "\u{1F61E}", label: "Nada\na ver" },
+  { emoji: "\u{1F641}", label: "Pouco\na ver" },
+  { emoji: "\u{1F610}", label: "Mais ou\nmenos" },
+  { emoji: "\u{1F642}", label: "Tem\na ver" },
+  { emoji: "\u{1F60A}", label: "Totalmente\neu" }
+];
+
+export {
+  lightTheme,
+  darkTheme,
+  ratingScaleTokens,
+  DEFAULT_OPTIONS
+};
+//# sourceMappingURL=chunk-CC3QVZS2.mjs.map

package/dist/chunk-CC3QVZS2.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/themes/lightTheme.ts","../src/themes/darkTheme.ts","../src/components/RatingScale/RatingScale.styles.ts"],"sourcesContent":["import { colors } from '../tokens/colors'\nimport type { Theme } from './types'\n\nexport const lightTheme: Theme = {\n  background:   colors.marianBlue[50],\n  surface:      colors.marianBlue[100],\n  border:       colors.marianBlue[200],\n  onBackground: colors.midnight[900],\n  onSurface:    colors.midnight[700],\n  muted:        colors.gray[500],\n  primary:      colors.marianBlue[600],\n  secondary:    colors.midnight[900],\n  success:      colors.mint[800],\n  error:        colors.ketchup[600],\n  warning:      colors.mustard[500],\n  info:         colors.marianBlue[500],\n\n  surfaceDisabled:    colors.gray[50],\n  successBg:          colors.successBg,\n  textSecondary:      colors.gray[700],\n  textTertiary:       colors.gray[500],\n  textInverse:        colors.white,\n  borderStrong:       colors.marianBlue[600],\n  borderSubtle:       colors.marianBlue[200],\n  interactivePressed: colors.marianBlue[800],\n}\n","import { colors } from '../tokens/colors'\nimport type { Theme } from './types'\n\nexport const darkTheme: Theme = {\n  background:   colors.midnight[900],\n  surface:      colors.midnight[700],\n  border:       colors.midnight[500],\n  onBackground: colors.marianBlue[50],\n  onSurface:    colors.gray[50],\n  muted:        colors.gray[600],\n  primary:      colors.marianBlue[400],\n  secondary:    colors.marianBlue[50],\n  success:      colors.mint[400],\n  error:        colors.ketchup[400],\n  warning:      colors.mustard[400],\n  info:         colors.marianBlue[300],\n\n  surfaceDisabled:    colors.midnight[600],\n  successBg:          colors.midnight[800],\n  textSecondary:      colors.gray[400],\n  textTertiary:       colors.gray[500],\n  textInverse:        colors.midnight[900],\n  borderStrong:       colors.marianBlue[400],\n  borderSubtle:       colors.midnight[600],\n  interactivePressed: colors.marianBlue[300],\n} as const\n","export const ratingScaleTokens = {\n  itemWidth: 60,\n  circleSize: 60,\n  circlePadding: 8,\n  circleRadius: 30,\n  emojiFontSize: 38,\n  emojiLineHeight: 44,\n  labelFontSize: 12,\n  numberFontSize: 10,\n  itemGap: 8,\n  labelNumberGap: 11,\n}\n\nexport const DEFAULT_OPTIONS = [\n  { emoji: '😞', label: 'Nada\\na ver' },\n  { emoji: '🙁', label: 'Pouco\\na ver' },\n  { emoji: '😐', label: 'Mais ou\\nmenos' },\n  { emoji: '🙂', label: 'Tem\\na ver' },\n  { emoji: '😊', label: 'Totalmente\\neu' },\n] as const\n"],"mappings":";;;;;AAGO,IAAM,aAAoB;AAAA,EAC/B,YAAc,OAAO,WAAW,EAAE;AAAA,EAClC,SAAc,OAAO,WAAW,GAAG;AAAA,EACnC,QAAc,OAAO,WAAW,GAAG;AAAA,EACnC,cAAc,OAAO,SAAS,GAAG;AAAA,EACjC,WAAc,OAAO,SAAS,GAAG;AAAA,EACjC,OAAc,OAAO,KAAK,GAAG;AAAA,EAC7B,SAAc,OAAO,WAAW,GAAG;AAAA,EACnC,WAAc,OAAO,SAAS,GAAG;AAAA,EACjC,SAAc,OAAO,KAAK,GAAG;AAAA,EAC7B,OAAc,OAAO,QAAQ,GAAG;AAAA,EAChC,SAAc,OAAO,QAAQ,GAAG;AAAA,EAChC,MAAc,OAAO,WAAW,GAAG;AAAA,EAEnC,iBAAoB,OAAO,KAAK,EAAE;AAAA,EAClC,WAAoB,OAAO;AAAA,EAC3B,eAAoB,OAAO,KAAK,GAAG;AAAA,EACnC,cAAoB,OAAO,KAAK,GAAG;AAAA,EACnC,aAAoB,OAAO;AAAA,EAC3B,cAAoB,OAAO,WAAW,GAAG;AAAA,EACzC,cAAoB,OAAO,WAAW,GAAG;AAAA,EACzC,oBAAoB,OAAO,WAAW,GAAG;AAC3C;;;ACtBO,IAAM,YAAmB;AAAA,EAC9B,YAAc,OAAO,SAAS,GAAG;AAAA,EACjC,SAAc,OAAO,SAAS,GAAG;AAAA,EACjC,QAAc,OAAO,SAAS,GAAG;AAAA,EACjC,cAAc,OAAO,WAAW,EAAE;AAAA,EAClC,WAAc,OAAO,KAAK,EAAE;AAAA,EAC5B,OAAc,OAAO,KAAK,GAAG;AAAA,EAC7B,SAAc,OAAO,WAAW,GAAG;AAAA,EACnC,WAAc,OAAO,WAAW,EAAE;AAAA,EAClC,SAAc,OAAO,KAAK,GAAG;AAAA,EAC7B,OAAc,OAAO,QAAQ,GAAG;AAAA,EAChC,SAAc,OAAO,QAAQ,GAAG;AAAA,EAChC,MAAc,OAAO,WAAW,GAAG;AAAA,EAEnC,iBAAoB,OAAO,SAAS,GAAG;AAAA,EACvC,WAAoB,OAAO,SAAS,GAAG;AAAA,EACvC,eAAoB,OAAO,KAAK,GAAG;AAAA,EACnC,cAAoB,OAAO,KAAK,GAAG;AAAA,EACnC,aAAoB,OAAO,SAAS,GAAG;AAAA,EACvC,cAAoB,OAAO,WAAW,GAAG;AAAA,EACzC,cAAoB,OAAO,SAAS,GAAG;AAAA,EACvC,oBAAoB,OAAO,WAAW,GAAG;AAC3C;;;ACzBO,IAAM,oBAAoB;AAAA,EAC/B,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,eAAe;AAAA,EACf,cAAc;AAAA,EACd,eAAe;AAAA,EACf,iBAAiB;AAAA,EACjB,eAAe;AAAA,EACf,gBAAgB;AAAA,EAChB,SAAS;AAAA,EACT,gBAAgB;AAClB;AAEO,IAAM,kBAAkB;AAAA,EAC7B,EAAE,OAAO,aAAM,OAAO,cAAc;AAAA,EACpC,EAAE,OAAO,aAAM,OAAO,eAAe;AAAA,EACrC,EAAE,OAAO,aAAM,OAAO,iBAAiB;AAAA,EACvC,EAAE,OAAO,aAAM,OAAO,aAAa;AAAA,EACnC,EAAE,OAAO,aAAM,OAAO,iBAAiB;AACzC;","names":[]}

package/dist/chunk-NK4IHR7O.mjs

@@ -0,0 +1,101 @@
+// src/tokens/colors.ts
+var colors = {
+  marianBlue: {
+    50: "#FAFBFF",
+    100: "#F1F4FE",
+    200: "#E1E7FF",
+    300: "#C3CCF7",
+    400: "#94A5F2",
+    500: "#697DD6",
+    600: "#475CBB",
+    700: "#31428B",
+    800: "#25326A",
+    900: "#131937"
+  },
+  midnight: {
+    50: "#707070",
+    100: "#5C5C5C",
+    200: "#525252",
+    300: "#474747",
+    400: "#3D3D3D",
+    500: "#333333",
+    600: "#1E1E1E",
+    700: "#161616",
+    800: "#141414",
+    900: "#0A0A0A"
+  },
+  gray: {
+    50: "#B1B5BE",
+    100: "#A6ABB5",
+    200: "#9BA0AB",
+    300: "#9095A2",
+    400: "#858B99",
+    500: "#7A8190",
+    600: "#6F7685",
+    700: "#5E6471",
+    800: "#5D636F",
+    900: "#545964"
+  },
+  mustard: {
+    50: "#FFF2D6",
+    100: "#FFECC2",
+    200: "#FFE5AD",
+    300: "#FFDF99",
+    400: "#FFD885",
+    500: "#FFD270",
+    600: "#FFCB5C",
+    700: "#FFC140",
+    800: "#FFBE33",
+    900: "#FFB81F"
+  },
+  ketchup: {
+    50: "#FFD6D6",
+    100: "#FFC2C2",
+    200: "#FFADAD",
+    300: "#FF9999",
+    400: "#FF8585",
+    500: "#FF7070",
+    600: "#FF5C5C",
+    700: "#FF4040",
+    800: "#FF3333",
+    900: "#FF1F1F"
+  },
+  mint: {
+    50: "#A7F1B7",
+    100: "#96EEA9",
+    200: "#84EB9A",
+    300: "#73E88C",
+    400: "#61E57E",
+    500: "#50E26F",
+    600: "#3EE061",
+    700: "#24DC4C",
+    800: "#22D348",
+    900: "#1FC142"
+  },
+  white: "#FFFFFF",
+  successBg: "#E5FBE9"
+};
+
+// src/tokens/typography.ts
+var typography = {
+  display: { fontSize: 32, fontWeight: "700", lineHeight: 1.2, fontFamily: "Poppins" },
+  h1: { fontSize: 24, fontWeight: "700", lineHeight: 1.3, fontFamily: "Poppins" },
+  h2: { fontSize: 20, fontWeight: "600", lineHeight: 1.3, fontFamily: "Poppins" },
+  h3: { fontSize: 18, fontWeight: "600", lineHeight: 1.4, fontFamily: "Poppins" },
+  bodyLarge: { fontSize: 16, fontWeight: "400", lineHeight: 1.5, fontFamily: "Inter" },
+  bodyDefault: { fontSize: 14, fontWeight: "400", lineHeight: 1.5, fontFamily: "Inter" },
+  bodySmall: { fontSize: 12, fontWeight: "400", lineHeight: 1.5, fontFamily: "Inter" },
+  labelLarge: { fontSize: 16, fontWeight: "500", lineHeight: 1.5, fontFamily: "Inter" },
+  labelDefault: { fontSize: 14, fontWeight: "500", lineHeight: 1.5, fontFamily: "Inter" },
+  labelSmall: { fontSize: 12, fontWeight: "500", lineHeight: 1.5, fontFamily: "Inter" },
+  caption: { fontSize: 12, fontWeight: "500", lineHeight: 1.5, fontFamily: "Inter" },
+  overline: { fontSize: 10, fontWeight: "600", lineHeight: 1, fontFamily: "Inter" },
+  buttonLarge: { fontSize: 16, fontWeight: "600", lineHeight: 1.5, fontFamily: "Inter" },
+  buttonDefault: { fontSize: 14, fontWeight: "600", lineHeight: 1.5, fontFamily: "Inter" }
+};
+
+export {
+  colors,
+  typography
+};
+//# sourceMappingURL=chunk-NK4IHR7O.mjs.map

package/dist/chunk-NK4IHR7O.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tokens/colors.ts","../src/tokens/typography.ts"],"sourcesContent":["export const colors = {\n  marianBlue: {\n    50:  '#FAFBFF',\n    100: '#F1F4FE',\n    200: '#E1E7FF',\n    300: '#C3CCF7',\n    400: '#94A5F2',\n    500: '#697DD6',\n    600: '#475CBB',\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: '#1E1E1E',\n    700: '#161616',\n    800: '#141414',\n    900: '#0A0A0A',\n  },\n\n  gray: {\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  mustard: {\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:  '#FFD6D6',\n    100: '#FFC2C2',\n    200: '#FFADAD',\n    300: '#FF9999',\n    400: '#FF8585',\n    500: '#FF7070',\n    600: '#FF5C5C',\n    700: '#FF4040',\n    800: '#FF3333',\n    900: '#FF1F1F',\n  },\n\n  mint: {\n    50:  '#A7F1B7',\n    100: '#96EEA9',\n    200: '#84EB9A',\n    300: '#73E88C',\n    400: '#61E57E',\n    500: '#50E26F',\n    600: '#3EE061',\n    700: '#24DC4C',\n    800: '#22D348',\n    900: '#1FC142',\n  },\n\n  white: '#FFFFFF',\n  successBg: '#E5FBE9',\n} as const\n\nexport type Colors = typeof colors\n","export const typography = {\n  display:       { fontSize: 32, fontWeight: '700', lineHeight: 1.2, fontFamily: 'Poppins' },\n  h1:            { fontSize: 24, fontWeight: '700', lineHeight: 1.3, fontFamily: 'Poppins' },\n  h2:            { fontSize: 20, fontWeight: '600', lineHeight: 1.3, fontFamily: 'Poppins' },\n  h3:            { fontSize: 18, fontWeight: '600', lineHeight: 1.4, fontFamily: 'Poppins' },\n  bodyLarge:     { fontSize: 16, fontWeight: '400', lineHeight: 1.5, fontFamily: 'Inter' },\n  bodyDefault:   { fontSize: 14, fontWeight: '400', lineHeight: 1.5, fontFamily: 'Inter' },\n  bodySmall:     { fontSize: 12, fontWeight: '400', lineHeight: 1.5, fontFamily: 'Inter' },\n  labelLarge:    { fontSize: 16, fontWeight: '500', lineHeight: 1.5, fontFamily: 'Inter' },\n  labelDefault:  { fontSize: 14, fontWeight: '500', lineHeight: 1.5, fontFamily: 'Inter' },\n  labelSmall:    { fontSize: 12, fontWeight: '500', lineHeight: 1.5, fontFamily: 'Inter' },\n  caption:       { fontSize: 12, fontWeight: '500', lineHeight: 1.5, fontFamily: 'Inter' },\n  overline:      { fontSize: 10, fontWeight: '600', lineHeight: 1.0, fontFamily: 'Inter' },\n  buttonLarge:   { fontSize: 16, fontWeight: '600', lineHeight: 1.5, fontFamily: 'Inter' },\n  buttonDefault: { fontSize: 14, fontWeight: '600', lineHeight: 1.5, fontFamily: 'Inter' },\n} as const\n\nexport type Typography = typeof typography\n"],"mappings":";AAAO,IAAM,SAAS;AAAA,EACpB,YAAY;AAAA,IACV,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,UAAU;AAAA,IACR,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,MAAM;AAAA,IACJ,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,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,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,MAAM;AAAA,IACJ,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,OAAO;AAAA,EACP,WAAW;AACb;;;ACjFO,IAAM,aAAa;AAAA,EACxB,SAAe,EAAE,UAAU,IAAI,YAAY,OAAO,YAAY,KAAK,YAAY,UAAU;AAAA,EACzF,IAAe,EAAE,UAAU,IAAI,YAAY,OAAO,YAAY,KAAK,YAAY,UAAU;AAAA,EACzF,IAAe,EAAE,UAAU,IAAI,YAAY,OAAO,YAAY,KAAK,YAAY,UAAU;AAAA,EACzF,IAAe,EAAE,UAAU,IAAI,YAAY,OAAO,YAAY,KAAK,YAAY,UAAU;AAAA,EACzF,WAAe,EAAE,UAAU,IAAI,YAAY,OAAO,YAAY,KAAK,YAAY,QAAQ;AAAA,EACvF,aAAe,EAAE,UAAU,IAAI,YAAY,OAAO,YAAY,KAAK,YAAY,QAAQ;AAAA,EACvF,WAAe,EAAE,UAAU,IAAI,YAAY,OAAO,YAAY,KAAK,YAAY,QAAQ;AAAA,EACvF,YAAe,EAAE,UAAU,IAAI,YAAY,OAAO,YAAY,KAAK,YAAY,QAAQ;AAAA,EACvF,cAAe,EAAE,UAAU,IAAI,YAAY,OAAO,YAAY,KAAK,YAAY,QAAQ;AAAA,EACvF,YAAe,EAAE,UAAU,IAAI,YAAY,OAAO,YAAY,KAAK,YAAY,QAAQ;AAAA,EACvF,SAAe,EAAE,UAAU,IAAI,YAAY,OAAO,YAAY,KAAK,YAAY,QAAQ;AAAA,EACvF,UAAe,EAAE,UAAU,IAAI,YAAY,OAAO,YAAY,GAAK,YAAY,QAAQ;AAAA,EACvF,aAAe,EAAE,UAAU,IAAI,YAAY,OAAO,YAAY,KAAK,YAAY,QAAQ;AAAA,EACvF,eAAe,EAAE,UAAU,IAAI,YAAY,OAAO,YAAY,KAAK,YAAY,QAAQ;AACzF;","names":[]}

package/dist/darkTheme-gaad4-zD.d.mts

@@ -0,0 +1,28 @@
+interface Theme {
+    background: string;
+    surface: string;
+    border: string;
+    onBackground: string;
+    onSurface: string;
+    muted: string;
+    primary: string;
+    secondary: string;
+    success: string;
+    error: string;
+    warning: string;
+    info: string;
+    surfaceDisabled: string;
+    successBg: string;
+    textSecondary: string;
+    textTertiary: string;
+    textInverse: string;
+    borderStrong: string;
+    borderSubtle: string;
+    interactivePressed: string;
+}
+
+declare const lightTheme: Theme;
+
+declare const darkTheme: Theme;
+
+export { type Theme as T, darkTheme as d, lightTheme as l };

package/dist/darkTheme-gaad4-zD.d.ts

@@ -0,0 +1,28 @@
+interface Theme {
+    background: string;
+    surface: string;
+    border: string;
+    onBackground: string;
+    onSurface: string;
+    muted: string;
+    primary: string;
+    secondary: string;
+    success: string;
+    error: string;
+    warning: string;
+    info: string;
+    surfaceDisabled: string;
+    successBg: string;
+    textSecondary: string;
+    textTertiary: string;
+    textInverse: string;
+    borderStrong: string;
+    borderSubtle: string;
+    interactivePressed: string;
+}
+
+declare const lightTheme: Theme;
+
+declare const darkTheme: Theme;
+
+export { type Theme as T, darkTheme as d, lightTheme as l };

package/dist/index.native.d.mts

@@ -1,2 +1,118 @@
-export { Colors, colors } from './tokens/index.mjs';
-export { Theme, darkTheme, lightTheme } from './index.web.mjs';
+export { Colors, Typography, colors, typography } from './tokens/index.mjs';
+import { T as Theme } from './darkTheme-gaad4-zD.mjs';
+export { d as darkTheme, l as lightTheme } from './darkTheme-gaad4-zD.mjs';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { PressableProps, StyleProp, ViewStyle } from 'react-native';
+
+type DSThemeCtx = {
+    theme: Theme;
+    colorScheme: 'light' | 'dark';
+};
+declare function DSThemeProvider({ colorScheme, children, }: {
+    colorScheme?: 'light' | 'dark';
+    children: React.ReactNode;
+}): react_jsx_runtime.JSX.Element;
+declare function useTheme(): DSThemeCtx;
+
+type ButtonVariant = 'primary' | 'secondary' | 'ghost';
+type ButtonSize = 'sm' | 'md' | 'lg';
+type ButtonProps = {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    disabled?: boolean;
+    children: React.ReactNode;
+    onPress?: PressableProps['onPress'];
+};
+declare function Button({ variant, size, disabled, children, onPress }: ButtonProps): react_jsx_runtime.JSX.Element;
+
+type ChipProps = {
+    children: React.ReactNode;
+    checked?: boolean;
+    onPress?: () => void;
+    style?: StyleProp<ViewStyle>;
+};
+declare function Chip({ children, checked, onPress, style }: ChipProps): react_jsx_runtime.JSX.Element;
+
+type AlertVariant = 'success' | 'info';
+type AlertProps = {
+    variant?: AlertVariant;
+    title: string;
+    description?: string;
+};
+declare function Alert({ variant, title, description }: AlertProps): react_jsx_runtime.JSX.Element;
+
+type ProgressBarProps = {
+    value: number;
+};
+declare function ProgressBar({ value }: ProgressBarProps): react_jsx_runtime.JSX.Element;
+
+type InputState = 'default' | 'filled' | 'error' | 'disabled';
+type InputProps = {
+    value?: string;
+    placeholder?: string;
+    state?: InputState;
+    leadingIcon?: React.ReactNode;
+    onChangeText?: (text: string) => void;
+    onFocus?: () => void;
+    onBlur?: () => void;
+    style?: StyleProp<ViewStyle>;
+};
+declare function Input({ value, placeholder, state, leadingIcon, onChangeText, onFocus, onBlur, style }: InputProps): react_jsx_runtime.JSX.Element;
+
+type CheckboxProps = {
+    checked?: boolean;
+    onChange?: (checked: boolean) => void;
+    disabled?: boolean;
+};
+declare function Checkbox({ checked, onChange, disabled }: CheckboxProps): react_jsx_runtime.JSX.Element;
+
+type RadioItemProps = {
+    label: string;
+    description?: string;
+    selected?: boolean;
+    icon?: React.ReactNode;
+    onPress?: () => void;
+    style?: StyleProp<ViewStyle>;
+};
+declare function RadioItem({ label, description, selected, icon, onPress, style }: RadioItemProps): react_jsx_runtime.JSX.Element;
+
+type RadioGroupProps = {
+    children: React.ReactNode;
+    label?: string;
+    style?: StyleProp<ViewStyle>;
+};
+declare function RadioGroup({ children, label, style }: RadioGroupProps): react_jsx_runtime.JSX.Element;
+
+type ActionItemProps = {
+    label: string;
+    description?: string;
+    selected?: boolean;
+    icon?: React.ReactNode;
+    onPress?: () => void;
+    style?: StyleProp<ViewStyle>;
+};
+declare function ActionItem({ label, description, selected, icon, onPress, style }: ActionItemProps): react_jsx_runtime.JSX.Element;
+
+type Step = {
+    label: string;
+};
+type StepperProps = {
+    steps: Step[];
+    currentStep: number;
+    style?: StyleProp<ViewStyle>;
+};
+declare function Stepper({ steps, currentStep, style }: StepperProps): react_jsx_runtime.JSX.Element;
+
+type RatingScaleOption = {
+    emoji: string;
+    label: string;
+};
+type RatingScaleProps = {
+    value?: number | null;
+    onChange?: (value: number) => void;
+    options?: ReadonlyArray<RatingScaleOption>;
+    style?: StyleProp<ViewStyle>;
+};
+declare function RatingScale({ value, onChange, options, style }: RatingScaleProps): react_jsx_runtime.JSX.Element;
+
+export { ActionItem, Alert, Button, Checkbox, Chip, DSThemeProvider, Input, ProgressBar, RadioGroup, RadioItem, RatingScale, Stepper, Theme, useTheme };