{"_id":"@astacinco/rn-primitives","_rev":"3-a16be9723494c7da6652dee93a74c111","name":"@astacinco/rn-primitives","dist-tags":{"latest":"0.3.0"},"versions":{"0.1.0":{"name":"@astacinco/rn-primitives","version":"0.1.0","keywords":["react-native","components","ui","primitives","theme","design-system"],"author":{"name":"Spark Labs","email":"hello@sparklabs.dev"},"license":"MIT","_id":"@astacinco/rn-primitives@0.1.0","maintainers":[{"name":"sparklabs343","email":"gomez.rudy@gmail.com"}],"homepage":"https://github.com/jrudydev/rn-toolkit#readme","bugs":{"url":"https://github.com/jrudydev/rn-toolkit/issues"},"dist":{"shasum":"fa374ab98bd32d024717fc772189367905a508bc","tarball":"https://registry.npmjs.org/@astacinco/rn-primitives/-/rn-primitives-0.1.0.tgz","fileCount":38,"integrity":"sha512-t7JfdRNSBF2BI4/3XVZkAgixZNi+BnO0e/qSEhTn0PWdFZw7PbIn2ed5lO8kzGawWjit82Ra9bDxpOBETk27Zw==","signatures":[{"sig":"MEQCH1T9Q2QA2HWVQR/P9r3VcXEhw5azNplBHGpB81+qoEwCIQC0fLlqL/wT5WuyHeIJTfXzCXSo9yA9Sfngv3+L2QtZbg==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":45457},"main":"src/index.ts","types":"src/index.ts","gitHead":"6fa965625ad344ec91902e42e12b2000624373ea","scripts":{"lint":"eslint src --ext .ts,.tsx","test":"jest","build":"tsc"},"_npmUser":{"name":"sparklabs343","email":"gomez.rudy@gmail.com"},"repository":{"url":"git+https://github.com/jrudydev/rn-toolkit.git","type":"git","directory":"packages/primitives"},"_npmVersion":"10.8.2","description":"Theme-aware UI primitives for React Native","directories":{},"_nodeVersion":"20.19.6","dependencies":{"@astacinco/rn-theming":"*"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"18.2.0","typescript":"^5.3.3","@types/react":"^18.2.48","react-native":"0.73.4","react-test-renderer":"18.2.0","@astacinco/rn-testing":"*","@testing-library/react-native":"^12.4.3"},"peerDependencies":{"react":">=18.0.0","react-native":">=0.72.0"},"_npmOperationalInternal":{"tmp":"tmp/rn-primitives_0.1.0_1772793174141_0.8343622211188104","host":"s3://npm-registry-packages-npm-production"}},"0.2.0":{"name":"@astacinco/rn-primitives","version":"0.2.0","keywords":["react-native","components","ui","primitives","theme","design-system"],"author":{"name":"Spark Labs","email":"hello@sparklabs.dev"},"license":"MIT","_id":"@astacinco/rn-primitives@0.2.0","maintainers":[{"name":"sparklabs343","email":"gomez.rudy@gmail.com"}],"homepage":"https://github.com/jrudydev/rn-toolkit#readme","bugs":{"url":"https://github.com/jrudydev/rn-toolkit/issues"},"dist":{"shasum":"3471e54b7ad3f618074723298180b4fc32d0e332","tarball":"https://registry.npmjs.org/@astacinco/rn-primitives/-/rn-primitives-0.2.0.tgz","fileCount":80,"integrity":"sha512-H0ynIe4W75ecvgBnuCM8IIyJkbSnWwbnVnuJab1VPyM93u3AUTu6mSq+yGiIDJ39ZAi+bp1BzzlvBJiQZpvArQ==","signatures":[{"sig":"MEYCIQCPM8M0qCbqk2ZTxJ7u5R9Ju0V2p9QNx4recVtvbyPqPQIhAIyvh9/9ic1+zUExwgaTHOCfoD2/HdeVlSyKLBfu7dT7","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":119752},"main":"src/index.ts","types":"src/index.ts","gitHead":"ebaf6560babf6a6b935f53166ba59d28be7f4033","scripts":{"lint":"eslint src --ext .ts,.tsx","test":"jest","build":"tsc"},"_npmUser":{"name":"sparklabs343","email":"gomez.rudy@gmail.com"},"repository":{"url":"git+https://github.com/jrudydev/rn-toolkit.git","type":"git","directory":"packages/primitives"},"_npmVersion":"10.8.2","description":"Theme-aware UI primitives for React Native","directories":{},"_nodeVersion":"20.19.6","dependencies":{"@astacinco/rn-theming":"*"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"typescript":"^5.3.3","@types/react":"~19.1.0","react-test-renderer":"19.1.0","@astacinco/rn-testing":"*","@testing-library/react-native":"^12.4.3"},"peerDependencies":{"react":">=18.0.0","react-native":">=0.72.0","react-native-markdown-display":">=7.0.0"},"peerDependenciesMeta":{"react-native-markdown-display":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/rn-primitives_0.2.0_1773450982353_0.11546267462990256","host":"s3://npm-registry-packages-npm-production"}},"0.3.0":{"name":"@astacinco/rn-primitives","version":"0.3.0","description":"Theme-aware UI primitives for React Native","main":"src/index.ts","types":"src/index.ts","repository":{"type":"git","url":"git+https://github.com/jrudydev/rn-toolkit.git","directory":"packages/primitives"},"publishConfig":{"access":"public"},"author":{"name":"Spark Labs","email":"hello@sparklabs.dev"},"homepage":"https://github.com/jrudydev/rn-toolkit#readme","scripts":{"build":"tsc","test":"jest","lint":"eslint src --ext .ts,.tsx"},"peerDependencies":{"react":">=18.0.0","react-native":">=0.72.0","react-native-markdown-display":">=7.0.0"},"peerDependenciesMeta":{"react-native-markdown-display":{"optional":true}},"dependencies":{"@astacinco/rn-theming":"*"},"devDependencies":{"@astacinco/rn-testing":"*","@testing-library/react-native":"^13.3.3","@types/react":"~19.1.0","react-test-renderer":"19.1.0","typescript":"^5.3.3"},"keywords":["react-native","components","ui","primitives","theme","design-system"],"license":"MIT","_id":"@astacinco/rn-primitives@0.3.0","gitHead":"65c950d11222dcc4abb8dc15962b853eee2556c4","bugs":{"url":"https://github.com/jrudydev/rn-toolkit/issues"},"_nodeVersion":"20.19.6","_npmVersion":"10.8.2","dist":{"integrity":"sha512-ML9HCKQinlYSxb53X8uckiwnVEER7RzXU7ZUu9nCxUNGhEisJl5Lc2lDg2DTQ8Dn4XNlOFC1qw9+h0ueDEcA/g==","shasum":"14b7afc75ae1960c3d3ad6cbfdbd67a653585cd9","tarball":"https://registry.npmjs.org/@astacinco/rn-primitives/-/rn-primitives-0.3.0.tgz","fileCount":91,"unpackedSize":137249,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDC+xHaRZXsylf2oAZELoMHQbkw9qYfCdCZ0ozSHw9m0gIgU2UUw4mGDA23eNeu1swNdVlDgxaCU+YlRaFOnttth88="}]},"_npmUser":{"name":"sparklabs343","email":"gomez.rudy@gmail.com"},"directories":{},"maintainers":[{"name":"sparklabs343","email":"gomez.rudy@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/rn-primitives_0.3.0_1773637626678_0.19148200274767224"},"_hasShrinkwrap":false}},"time":{"created":"2026-03-06T10:32:54.035Z","modified":"2026-03-16T05:07:07.012Z","0.1.0":"2026-03-06T10:32:54.308Z","0.2.0":"2026-03-14T01:16:22.486Z","0.3.0":"2026-03-16T05:07:06.882Z"},"bugs":{"url":"https://github.com/jrudydev/rn-toolkit/issues"},"author":{"name":"Spark Labs","email":"hello@sparklabs.dev"},"license":"MIT","homepage":"https://github.com/jrudydev/rn-toolkit#readme","keywords":["react-native","components","ui","primitives","theme","design-system"],"repository":{"type":"git","url":"git+https://github.com/jrudydev/rn-toolkit.git","directory":"packages/primitives"},"description":"Theme-aware UI primitives for React Native","maintainers":[{"name":"sparklabs343","email":"gomez.rudy@gmail.com"}],"readme":"# @astacinco/rn-primitives\n\nTheme-aware UI primitives for React Native. All components automatically adapt to light/dark modes.\n\n## Installation\n\n```bash\nnpm install @astacinco/rn-primitives @astacinco/rn-theming\n```\n\n## Quick Start\n\n```typescript\nimport { ThemeProvider } from '@astacinco/rn-theming';\nimport { Text, Button, Card, VStack } from '@astacinco/rn-primitives';\n\nfunction App() {\n  return (\n    <ThemeProvider mode=\"auto\">\n      <VStack spacing=\"md\">\n        <Text variant=\"title\">Welcome</Text>\n        <Card>\n          <Text>This is a themed card</Text>\n        </Card>\n        <Button label=\"Get Started\" onPress={() => {}} />\n      </VStack>\n    </ThemeProvider>\n  );\n}\n```\n\n## Components\n\n### Text\n\nThemed text with variants.\n\n```typescript\n<Text variant=\"title\">Title Text</Text>\n<Text variant=\"subtitle\">Subtitle Text</Text>\n<Text variant=\"body\">Body Text</Text>\n<Text variant=\"caption\">Caption Text</Text>\n<Text variant=\"label\">Label Text</Text>\n```\n\n**Props:**\n- `variant` - `'title' | 'subtitle' | 'body' | 'caption' | 'label'` (default: `'body'`)\n- `color` - Override text color (uses theme colors by default)\n- All standard `Text` props from React Native\n\n### Button\n\nThemed button with variants.\n\n```typescript\n<Button label=\"Primary\" variant=\"primary\" onPress={handlePress} />\n<Button label=\"Secondary\" variant=\"secondary\" onPress={handlePress} />\n<Button label=\"Outline\" variant=\"outline\" onPress={handlePress} />\n<Button label=\"Ghost\" variant=\"ghost\" onPress={handlePress} />\n<Button label=\"Disabled\" disabled onPress={handlePress} />\n```\n\n**Props:**\n- `label` - Button text (required)\n- `variant` - `'primary' | 'secondary' | 'outline' | 'ghost'` (default: `'primary'`)\n- `size` - `'sm' | 'md' | 'lg'` (default: `'md'`)\n- `disabled` - Disable the button\n- `loading` - Show loading state\n- `onPress` - Press handler (required)\n\n### Card\n\nThemed card container.\n\n```typescript\n<Card>\n  <Text>Card content</Text>\n</Card>\n\n<Card variant=\"outlined\">\n  <Text>Outlined card</Text>\n</Card>\n\n<Card variant=\"elevated\">\n  <Text>Elevated card with shadow</Text>\n</Card>\n```\n\n**Props:**\n- `variant` - `'filled' | 'outlined' | 'elevated'` (default: `'filled'`)\n- `padding` - Override padding\n\n### Stack (VStack, HStack)\n\nLayout components for vertical and horizontal stacking.\n\n```typescript\n<VStack spacing=\"md\" align=\"center\">\n  <Text>Item 1</Text>\n  <Text>Item 2</Text>\n</VStack>\n\n<HStack spacing=\"sm\" justify=\"space-between\">\n  <Button label=\"Cancel\" variant=\"ghost\" />\n  <Button label=\"Save\" />\n</HStack>\n```\n\n**Props:**\n- `spacing` - Gap between items: `'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'`\n- `align` - Align items: `'start' | 'center' | 'end' | 'stretch'`\n- `justify` - Justify content: `'start' | 'center' | 'end' | 'space-between' | 'space-around'`\n\n### Container\n\nThemed container with padding and optional max width.\n\n```typescript\n<Container>\n  <Text>Full width content</Text>\n</Container>\n\n<Container maxWidth={600} centered>\n  <Text>Centered content with max width</Text>\n</Container>\n```\n\n**Props:**\n- `padding` - Override padding\n- `maxWidth` - Maximum width in pixels\n- `centered` - Center the container horizontally\n\n### Input\n\nThemed text input.\n\n```typescript\n<Input\n  label=\"Email\"\n  placeholder=\"Enter your email\"\n  value={email}\n  onChangeText={setEmail}\n/>\n\n<Input\n  label=\"Password\"\n  secureTextEntry\n  value={password}\n  onChangeText={setPassword}\n  error=\"Password is required\"\n/>\n```\n\n**Props:**\n- `label` - Input label\n- `placeholder` - Placeholder text\n- `error` - Error message to display\n- `disabled` - Disable the input\n- All standard `TextInput` props\n\n### Divider\n\nThemed horizontal divider.\n\n```typescript\n<Divider />\n<Divider variant=\"thick\" />\n<Divider color=\"#FF0000\" />\n```\n\n**Props:**\n- `variant` - `'thin' | 'thick'` (default: `'thin'`)\n- `color` - Override divider color\n\n### Switch\n\nThemed toggle switch.\n\n```typescript\n<Switch\n  value={isEnabled}\n  onValueChange={setIsEnabled}\n/>\n\n<Switch\n  value={isEnabled}\n  onValueChange={setIsEnabled}\n  label=\"Enable notifications\"\n  labelPosition=\"right\"\n  size=\"lg\"\n/>\n```\n\n**Props:**\n- `value` - Current switch state (required)\n- `onValueChange` - Callback when toggled (required)\n- `label` - Optional label text\n- `labelPosition` - `'left' | 'right'` (default: `'right'`)\n- `size` - `'sm' | 'md' | 'lg'` (default: `'md'`)\n- `disabled` - Disable the switch\n- `activeColor` - Override active track color\n- `inactiveColor` - Override inactive track color\n\n### Avatar\n\nUser avatar with image or fallback initials.\n\n```typescript\n// With image\n<Avatar\n  source={{ uri: 'https://example.com/photo.jpg' }}\n  size=\"md\"\n/>\n\n// With fallback initials\n<Avatar\n  fallback=\"John Doe\"\n  size=\"lg\"\n/>\n```\n\n**Props:**\n- `source` - Image source (same as RN Image)\n- `fallback` - Name to generate initials from\n- `size` - `'xs' | 'sm' | 'md' | 'lg' | 'xl'` (default: `'md'`)\n- `rounded` - Circular shape (default: `true`)\n- `borderWidth` - Border width in pixels\n- `customSize` - Override size with exact pixels\n\n### Badge\n\nNotification badge, positioned on children or standalone.\n\n```typescript\n// Count badge on avatar\n<Badge count={5} position=\"top-right\">\n  <Avatar source={...} />\n</Badge>\n\n// Dot badge\n<Badge dot variant=\"error\">\n  <Icon name=\"bell\" />\n</Badge>\n\n// Standalone badge\n<Badge count={99} maxCount={99} standalone />\n```\n\n**Props:**\n- `count` - Number to display\n- `dot` - Show as dot instead of count\n- `variant` - `'default' | 'primary' | 'error' | 'success' | 'warning'`\n- `position` - `'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'`\n- `size` - `'sm' | 'md' | 'lg'`\n- `maxCount` - Max number before showing \"99+\"\n- `showZero` - Show badge when count is 0\n- `standalone` - Render without positioning on children\n- `offset` - `[x, y]` fine-tune position\n\n### Tag\n\nInline label for categories, status, or attributes.\n\n```typescript\n// Basic usage\n<Tag label=\"New\" />\n\n// With color\n<Tag label=\"Success\" color=\"success\" />\n<Tag label=\"Warning\" color=\"warning\" />\n<Tag label=\"Error\" color=\"error\" />\n\n// Filled variant\n<Tag label=\"Active\" color=\"primary\" variant=\"filled\" />\n\n// Sizes\n<Tag label=\"Small\" size=\"sm\" />\n<Tag label=\"Large\" size=\"lg\" />\n```\n\n**Props:**\n- `label` - Tag text (required)\n- `color` - `'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info'`\n- `variant` - `'outlined' | 'filled'` (default: `'outlined'`)\n- `size` - `'sm' | 'md' | 'lg'` (default: `'md'`)\n\n### Timer\n\nCountdown timer with controls.\n\n```typescript\n// Basic timer\n<Timer durationMinutes={5} />\n\n// With callbacks\n<Timer\n  durationMinutes={90}\n  onStart={() => console.log('Started')}\n  onComplete={() => console.log('Done!')}\n  onPause={() => console.log('Paused')}\n  showProgress\n  showControls\n/>\n\n// Auto-start timer\n<Timer durationMinutes={60} autoStart />\n```\n\n**Props:**\n- `durationMinutes` - Timer duration in minutes (required)\n- `autoStart` - Start automatically (default: `false`)\n- `showControls` - Show start/pause/reset buttons (default: `true`)\n- `showProgress` - Show progress bar (default: `true`)\n- `lowTimeThreshold` - Seconds remaining for low-time warning (default: `300`)\n- `onStart` - Callback when timer starts\n- `onPause` - Callback when timer pauses\n- `onReset` - Callback when timer resets\n- `onComplete` - Callback when timer reaches zero\n- `onTick` - Callback each second with remaining time\n\n### Tabs\n\nHorizontal tab selector.\n\n```typescript\nconst options = [\n  { value: 'all', label: 'All' },\n  { value: 'active', label: 'Active' },\n  { value: 'completed', label: 'Completed' },\n];\n\n<Tabs\n  options={options}\n  selected={selectedTab}\n  onSelect={setSelectedTab}\n/>\n\n// Variants\n<Tabs options={options} selected={tab} onSelect={setTab} variant=\"pills\" />\n<Tabs options={options} selected={tab} onSelect={setTab} variant=\"outlined\" />\n<Tabs options={options} selected={tab} onSelect={setTab} variant=\"filled\" />\n\n// Sizes\n<Tabs options={options} selected={tab} onSelect={setTab} size=\"sm\" />\n<Tabs options={options} selected={tab} onSelect={setTab} size=\"lg\" />\n```\n\n**Props:**\n- `options` - Array of `{ value: T, label: string }` (required)\n- `selected` - Currently selected value (required)\n- `onSelect` - Callback when tab is selected (required)\n- `variant` - `'pills' | 'outlined' | 'filled'` (default: `'pills'`)\n- `size` - `'sm' | 'md' | 'lg'` (default: `'md'`)\n- `scrollable` - Enable horizontal scrolling (default: `true`)\n\n### MarkdownViewer\n\nRender markdown content with theme styling.\n\n```typescript\n<MarkdownViewer content=\"# Hello\\n\\nThis is **bold** text.\" />\n```\n\n**Props:**\n- `content` - Markdown string to render (required)\n- `style` - Override container style\n\n**Note:** Requires `react-native-markdown-display` as an optional peer dependency. Falls back to plain text if not installed.\n\n## Theme Integration\n\nAll components use the `useTheme()` hook from `@astacinco/rn-theming`. They automatically:\n\n- Adapt colors to light/dark mode\n- Use consistent spacing tokens\n- Apply proper typography styles\n- Support scoped theming\n\n## Testing\n\nUse `@astacinco/rn-testing` for testing primitives:\n\n```typescript\nimport { renderWithTheme, createThemeSnapshot } from '@astacinco/rn-testing';\nimport { Button } from '@astacinco/rn-primitives';\n\ndescribe('Button', () => {\n  createThemeSnapshot(<Button label=\"Click\" onPress={() => {}} />);\n});\n```\n","readmeFilename":"README.md"}