{"_id":"@dreadkn1ght123/ui-native","_rev":"2-e172b462896639f03e17751a3eb915f1","name":"@dreadkn1ght123/ui-native","dist-tags":{"latest":"0.1.1"},"versions":{"0.1.0":{"name":"@dreadkn1ght123/ui-native","version":"0.1.0","_id":"@dreadkn1ght123/ui-native@0.1.0","maintainers":[{"name":"dreadkn1ght123","email":"dreadkn1ght123@gmail.com"}],"dist":{"shasum":"0d941f6f29fdef6517776d7e6999e2d609398bf0","tarball":"https://registry.npmjs.org/@dreadkn1ght123/ui-native/-/ui-native-0.1.0.tgz","fileCount":19,"integrity":"sha512-RHGKqygDe3uP+GcuOrksZaoP454E5UQWKbRmwMDe3yK4ZHUeWga7+4omBpsVGLlfJch5hQ1U5km/7Ll7xx2Mxg==","signatures":[{"sig":"MEQCICFeukjK05hOLBFcn88rd+MuVUxms1hXM8/5xT2xiE+tAiBm4KKbDAV770wYyAoGbRKvV1ens2HvI+ziJSEmmz6oEw==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":23294},"main":"./dist/index.js","_from":"file:dreadkn1ght123-ui-native-0.1.0.tgz","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","default":"./dist/index.js","require":"./dist/index.js"}},"scripts":{"build":"vite build","release":"vite build && pnpm publish --no-git-checks","typecheck":"tsc -p tsconfig.json --noEmit"},"_npmUser":{"name":"dreadkn1ght123","email":"dreadkn1ght123@gmail.com"},"_resolved":"/tmp/fa5def4ff31ebf0669157c8d0037cb73/dreadkn1ght123-ui-native-0.1.0.tgz","_integrity":"sha512-RHGKqygDe3uP+GcuOrksZaoP454E5UQWKbRmwMDe3yK4ZHUeWga7+4omBpsVGLlfJch5hQ1U5km/7Ll7xx2Mxg==","_npmVersion":"11.6.2","description":"React Native / Expo companion to @dreadkn1ght123/ui — brand tokens and core primitives","directories":{},"_nodeVersion":"24.12.0","dependencies":{"@dreadkn1ght123/tokens":"^0.1.0"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^7.3.2","react":"19.1.0","typescript":"~5.9.3","@types/node":"^25.3.3","@types/react":"^19.2.0","react-native":"^0.79.0","vite-plugin-dts":"^4.5.4"},"peerDependencies":{"expo":">=51","react":">=18","react-native":">=0.74"},"peerDependenciesMeta":{"expo":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/ui-native_0.1.0_1787089298644_0.9534859616914582","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@dreadkn1ght123/ui-native","version":"0.1.1","description":"React Native / Expo companion to @dreadkn1ght123/ui — brand tokens and core primitives","exports":{".":{"types":"./dist/index.d.ts","require":"./dist/index.js","default":"./dist/index.js"}},"main":"./dist/index.js","types":"./dist/index.d.ts","publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"dependencies":{"@dreadkn1ght123/tokens":"^0.1.1"},"peerDependencies":{"expo":">=51","react":">=18","react-native":">=0.74"},"peerDependenciesMeta":{"expo":{"optional":true}},"devDependencies":{"@types/node":"^25.3.3","@types/react":"^19.2.0","react":"19.1.0","react-native":"^0.79.0","typescript":"~5.9.3","vite":"^7.3.2","vite-plugin-dts":"^4.5.4"},"scripts":{"build":"vite build","release":"vite build && node scripts/smoke-cjs.cjs && pnpm publish --no-git-checks","typecheck":"tsc -p tsconfig.json --noEmit","smoke":"node scripts/smoke-cjs.cjs"},"_id":"@dreadkn1ght123/ui-native@0.1.1","_integrity":"sha512-ZDtTDD6AbxJ7lGzKNGD0iVig34p/exzmphKHpDUXi/BmSYHhjMlN1OcyUDRxn7gqoqSnXNtwznW5aA6vFQEitA==","_resolved":"/tmp/16a984e05d10785b06b7f795be2ef201/dreadkn1ght123-ui-native-0.1.1.tgz","_from":"file:dreadkn1ght123-ui-native-0.1.1.tgz","_nodeVersion":"24.12.0","_npmVersion":"11.6.2","dist":{"integrity":"sha512-ZDtTDD6AbxJ7lGzKNGD0iVig34p/exzmphKHpDUXi/BmSYHhjMlN1OcyUDRxn7gqoqSnXNtwznW5aA6vFQEitA==","shasum":"37e6f1142178053bf218bb87712c3b42693a01f1","tarball":"https://registry.npmjs.org/@dreadkn1ght123/ui-native/-/ui-native-0.1.1.tgz","fileCount":19,"unpackedSize":23367,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDFPbuQlN4VWcWJ3DTLR+eFDuHAlaRG46i2VzvkMY86TAIhANU6XoU9/+nXyL6QOVARfHTmBn9dsUQwyOoYdD3zebfS"}]},"_npmUser":{"name":"dreadkn1ght123","email":"dreadkn1ght123@gmail.com"},"directories":{},"maintainers":[{"name":"dreadkn1ght123","email":"dreadkn1ght123@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/ui-native_0.1.1_1787089537691_0.19244268674857934"},"_hasShrinkwrap":false}},"time":{"created":"2026-08-18T21:41:38.387Z","modified":"2026-08-18T21:45:37.984Z","0.1.0":"2026-08-18T21:41:38.796Z","0.1.1":"2026-08-18T21:45:37.828Z"},"description":"React Native / Expo companion to @dreadkn1ght123/ui — brand tokens and core primitives","maintainers":[{"name":"dreadkn1ght123","email":"dreadkn1ght123@gmail.com"}],"readme":"# @dreadkn1ght123/ui-native\n\nReact Native / Expo companion to the web design system (`@dreadkn1ght123/ui`).\nShips the same brand tokens (via `@dreadkn1ght123/tokens`) plus core primitive\ncomponents styled for React Native — so mobile apps look like the web apps.\n\n## Install\n\n```sh\nnpx expo install react react-native   # peers (already present in an Expo app)\nnpm install @dreadkn1ght123/ui-native\n```\n\n- Peer dependencies: `react >= 18`, `react-native >= 0.74`, optionally `expo >= 51`.\n- The package ships CommonJS output (Metro-compatible, no ESM-only build) and TypeScript types.\n- `@dreadkn1ght123/tokens` is a regular dependency and installs automatically.\n\n## Components\n\nAll components accept the same variant vocabulary as the web library.\n\n| Component | Props (main) |\n|---|---|\n| `Button` | `variant`: `default` \\| `secondary` \\| `destructive` \\| `ghost` \\| `outline`; `size`: `sm` \\| `default` \\| `lg`; `loading` |\n| `Text` | `variant`: `default` \\| `muted` \\| `destructive`; `size`: `xs` \\| `sm` \\| `base` \\| `lg` |\n| `Heading` | `level`: `1`–`4` |\n| `Card` (+ `CardHeader`, `CardContent`, `CardFooter`) | `shadow` (token `sm` shadow, default on) |\n| `Badge` | `variant`: `default` \\| `secondary` \\| `destructive` \\| `outline` |\n| `Divider` | `orientation`: `horizontal` \\| `vertical` |\n| `Input` | `label`, `error` + all `TextInput` props |\n\nEvery component also accepts `colorScheme?: \"light\" | \"dark\"` to force a mode;\nby default they follow the OS appearance via `useColorScheme()`.\n\n```tsx\nimport { Button, Card, CardContent, Heading, Text, Input, Badge, Divider } from \"@dreadkn1ght123/ui-native\";\n\nexport function Example() {\n  return (\n    <Card style={{ margin: 16 }}>\n      <CardContent style={{ gap: 12 }}>\n        <Heading level={2}>Sign in</Heading>\n        <Badge variant=\"secondary\">Beta</Badge>\n        <Divider />\n        <Input label=\"Email\" placeholder=\"you@example.com\" keyboardType=\"email-address\" />\n        <Button onPress={() => {}}>Continue</Button>\n        <Button variant=\"ghost\">Cancel</Button>\n        <Text variant=\"muted\" size=\"sm\">We never share your email.</Text>\n      </CardContent>\n    </Card>\n  );\n}\n```\n\n## Tokens → StyleSheet\n\n`useTokens(colorScheme?)` returns the full token set for the active (or forced)\nscheme, ready for `StyleSheet` values:\n\n```tsx\nimport { StyleSheet, View } from \"react-native\";\nimport { useTokens } from \"@dreadkn1ght123/ui-native\";\n\nfunction Panel() {\n  const t = useTokens(); // follows OS light/dark; pass \"light\" | \"dark\" to force\n  const styles = StyleSheet.create({\n    panel: {\n      backgroundColor: t.colors.card,     // hex / rgba string → backgroundColor, color, borderColor\n      borderColor: t.colors.cardBorder,\n      borderWidth: 1,\n      borderRadius: t.radii.lg,           // number (px) → borderRadius\n      ...t.nativeShadows.md,              // RN shadow object → shadowColor/Offset/Opacity/Radius + elevation\n    },\n  });\n  return <View style={styles.panel} />;\n}\n```\n\nHow token groups map to StyleSheet properties:\n\n| Token group | Type | StyleSheet usage |\n|---|---|---|\n| `t.colors.*` | hex / `rgba()` string | `color`, `backgroundColor`, `borderColor`, `shadowColor` |\n| `t.radii.*` | number (px = dp) | `borderRadius` |\n| `t.fonts.*` | CSS font stack string | Web-oriented; in RN load the actual font (e.g. `expo-font` with Inter) and set `fontFamily: \"Inter\"` |\n| `t.shadows.*` | CSS `box-shadow` string | Not directly usable in RN — use `t.nativeShadows.*` instead |\n| `t.nativeShadows.*` | RN shadow object | Spread into a style: `...t.nativeShadows.sm` (`2xs`–`2xl`, iOS shadow + Android `elevation`) |\n\nOutside components (no hooks), use `getTokens(\"light\" | \"dark\")`.\nThe raw light/dark sets are also exported as `light` and `dark`.\n","readmeFilename":"README.md"}