{"_id":"@azranazwer/rn-ui","name":"@azranazwer/rn-ui","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@azranazwer/rn-ui","version":"1.0.0","description":"A React Native component library using Atomic Design — colors, fonts, scale utils, and i18n are injected per project.","main":"src/index.ts","types":"src/index.ts","keywords":["react-native","ui","components","atomic-design","design-system","component-library","i18n","localization"],"author":{"name":"Azran Azwer"},"license":"MIT","publishConfig":{"access":"public"},"peerDependencies":{"react":">=18.0.0","react-native":">=0.72.0","i18next":">=23.0.0","react-i18next":">=14.0.0","react-native-localize":">=3.0.0","@react-native-async-storage/async-storage":">=1.19.0","react-native-restart":">=0.0.27","react-native-flash-message":">=0.3.0","react-native-vector-icons":">=10.0.0"},"peerDependenciesMeta":{"i18next":{"optional":true},"react-i18next":{"optional":true},"react-native-localize":{"optional":true},"@react-native-async-storage/async-storage":{"optional":true},"react-native-restart":{"optional":true},"react-native-flash-message":{"optional":true},"react-native-vector-icons":{"optional":true}},"devDependencies":{"@types/react":"^18.0.0","@types/react-native":"^0.72.0","typescript":"^5.0.0"},"_id":"@azranazwer/rn-ui@1.0.0","_nodeVersion":"20.19.4","_npmVersion":"10.8.2","dist":{"integrity":"sha512-FKg/Z+aneyAKTrnvvEXeAi+XOc2QAIyksmYBP388l+T2FAc76i+gA+r3oriKXNKgJ2pn3vHjqlSRt+4oEbXyqA==","shasum":"8a76deaea8d2422c540ae876226a82d780836b9c","tarball":"https://registry.npmjs.org/@azranazwer/rn-ui/-/rn-ui-1.0.0.tgz","fileCount":25,"unpackedSize":60181,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCICdTkoWwE5raLDt7bOs2OcclCwHOxKzZxuoX3FAbaT9jAiEA4kL4Js/jzs+djvp1I3on0e8hYbweK9n0Q9VYy6ac8Js="}]},"_npmUser":{"name":"azranazwer","email":"azranmam@gmail.com"},"directories":{},"maintainers":[{"name":"azranazwer","email":"azranmam@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/rn-ui_1.0.0_1781098301341_0.35609489584281384"},"_hasShrinkwrap":false}},"time":{"created":"2026-06-10T13:31:41.077Z","1.0.0":"2026-06-10T13:31:41.480Z","modified":"2026-06-10T13:31:41.752Z"},"maintainers":[{"name":"azranazwer","email":"azranmam@gmail.com"}],"description":"A React Native component library using Atomic Design — colors, fonts, scale utils, and i18n are injected per project.","keywords":["react-native","ui","components","atomic-design","design-system","component-library","i18n","localization"],"author":{"name":"Azran Azwer"},"license":"MIT","readme":"# @azranazwer/rn-ui\n\n> React Native component library built with **Atomic Design**.  \n> Install once. Use everywhere. **Bring your own theme, fonts, and colors.**\n\n[![npm version](https://img.shields.io/npm/v/@azranazwer/rn-ui.svg)](https://www.npmjs.com/package/@azranazwer/rn-ui)\n[![license](https://img.shields.io/npm/l/@azranazwer/rn-ui.svg)](https://www.npmjs.com/package/@azranazwer/rn-ui)\n\n---\n\n## Installation\n\n```bash\nnpm install @azranazwer/rn-ui\n# or\nyarn add @azranazwer/rn-ui\n```\n\n---\n\n## Setup — Inject your project's theme\n\nThe library has **no hardcoded colors or fonts**. Every project feeds in its own resolved theme via `ThemeProvider`.\n\n```tsx\n// App.tsx\nimport { ThemeProvider } from '@azranazwer/rn-ui';\nimport { FONT_FAMILY } from '~/assets/fonts';\nimport { useAppStore } from '~/stores/appStore';\nimport {\n  SURFACE_DARK, SURFACE_LIGHT,\n  BACKGROUND_DARK, BACKGROUND_LIGHT,\n  BACKGROUND_STATE_DARK, BACKGROUND_STATE_LIGHT,\n  CONTENT_DARK, CONTENT_LIGHT,\n  CONTENT_STATE_DARK, CONTENT_STATE_LIGHT,\n  BORDER_DARK, BORDER_LIGHT,\n  BORDER_STATE_DARK, BORDER_STATE_LIGHT,\n  BACKGROUND_BRAND_DARK, BACKGROUND_BRAND_LIGHT,\n  CONTENT_BRAND_DARK, CONTENT_BRAND_LIGHT,\n  BORDER_BRAND_DARK, BORDER_BRAND_LIGHT,\n  OVERLAY_DARK, OVERLAY_LIGHT,\n} from '~/theme/colors';\n\nexport default function App() {\n  const isDarkMode = useAppStore(s => s.isDarkMode);\n\n  const theme = {\n    isDarkMode,\n    FONT_FAMILY,\n    SURFACE:          isDarkMode ? SURFACE_DARK          : SURFACE_LIGHT,\n    BACKGROUND:       isDarkMode ? BACKGROUND_DARK       : BACKGROUND_LIGHT,\n    BACKGROUND_STATE: isDarkMode ? BACKGROUND_STATE_DARK : BACKGROUND_STATE_LIGHT,\n    CONTENT:          isDarkMode ? CONTENT_DARK          : CONTENT_LIGHT,\n    CONTENT_STATE:    isDarkMode ? CONTENT_STATE_DARK    : CONTENT_STATE_LIGHT,\n    BORDER:           isDarkMode ? BORDER_DARK           : BORDER_LIGHT,\n    BORDER_STATE:     isDarkMode ? BORDER_STATE_DARK     : BORDER_STATE_LIGHT,\n    BACKGROUND_BRAND: isDarkMode ? BACKGROUND_BRAND_DARK : BACKGROUND_BRAND_LIGHT,\n    CONTENT_BRAND:    isDarkMode ? CONTENT_BRAND_DARK    : CONTENT_BRAND_LIGHT,\n    BORDER_BRAND:     isDarkMode ? BORDER_BRAND_DARK     : BORDER_BRAND_LIGHT,\n    OVERLAY:          isDarkMode ? OVERLAY_DARK          : OVERLAY_LIGHT,\n  };\n\n  return (\n    <ThemeProvider theme={theme}>\n      <RootNavigator />\n    </ThemeProvider>\n  );\n}\n```\n\nThat's it — every component automatically picks up your colors and fonts.\n\n---\n\n## Usage\n\n```tsx\nimport { Button, InputField, Card, AlertBanner, ListItem, SearchBar } from '@azranazwer/rn-ui';\n\nexport default function LoginScreen() {\n  return (\n    <Card variant=\"elevated\" padding=\"lg\">\n      <AlertBanner variant=\"info\" message=\"Please sign in to continue.\" />\n      <InputField\n        label=\"Email\"\n        placeholder=\"you@example.com\"\n        keyboardType=\"email-address\"\n        required\n      />\n      <InputField\n        label=\"Password\"\n        placeholder=\"••••••••\"\n        secureTextEntry\n        required\n      />\n      <Button label=\"Sign In\" onPress={() => {}} fullWidth />\n    </Card>\n  );\n}\n```\n\n---\n\n## Components\n\n### ⚛️ Atoms\n\n| Component    | Description                                    | Theme tokens used                            |\n|--------------|------------------------------------------------|----------------------------------------------|\n| `Button`     | Primary, secondary, outline, ghost, negative   | BACKGROUND, BACKGROUND_STATE, CONTENT        |\n| `AppText`    | Full typography scale (Display → Link)         | CONTENT, CONTENT_STATE                       |\n| `Input`      | Text input with focus / error states           | SURFACE, BORDER, BORDER_STATE, CONTENT_STATE |\n| `Avatar`     | Image or initials, 4 sizes                     | BACKGROUND, CONTENT                          |\n| `Badge`      | Status pill — info, positive, negative, notice | BACKGROUND_STATE, CONTENT_STATE              |\n| `Divider`    | Horizontal separator                           | BORDER                                       |\n| `Spinner`    | Loading indicator with centered option         | BACKGROUND                                   |\n\n### 🧬 Molecules\n\n| Component        | Description                                  | Theme tokens used                             |\n|------------------|----------------------------------------------|-----------------------------------------------|\n| `Card`           | Elevated, outlined, or flat container        | SURFACE, BORDER                               |\n| `InputField`     | Input + Label + Error message                | CONTENT, CONTENT_STATE, BORDER_STATE          |\n| `ListItem`       | Avatar + Title + Subtitle + Badge + Chevron  | SURFACE, CONTENT                              |\n| `SearchBar`      | Input with search icon and clear button      | SURFACE, BORDER, CONTENT, CONTENT_STATE       |\n| `AlertBanner`    | Inline positive/negative/notice/info banner  | BACKGROUND_STATE, BORDER_STATE, CONTENT_STATE |\n| `BannerMessage`  | Toast notifications via flash-message        | BACKGROUND, BACKGROUND_STATE, CONTENT_STATE   |\n\n---\n\n## Typography\n\nTypography is built from your project's font families and scales automatically using the company Figma base (390×844).\n\n```tsx\nimport { useTypography, useTheme } from '@azranazwer/rn-ui';\n\nconst MyScreen = () => {\n  const { Heading, Body, Label, BodyStrong, Link, Display } = useTypography();\n  const { CONTENT } = useTheme();\n\n  return (\n    <View>\n      <Text style={[Heading.M,     { color: CONTENT.PRIMARY }]}>Page Title</Text>\n      <Text style={[Body.S,        { color: CONTENT.SECONDARY }]}>Description</Text>\n      <Text style={[Label.XS,      { color: CONTENT.TERTIARY }]}>Helper text</Text>\n      <Text style={[BodyStrong.M,  { color: CONTENT.PRIMARY }]}>Bold body</Text>\n      <Text style={[Link.S,        { color: CONTENT.LINK }]}>Tap here</Text>\n    </View>\n  );\n};\n```\n\nOr use the `AppText` atom:\n\n```tsx\nimport { AppText } from '@azranazwer/rn-ui';\n\n<AppText group=\"Heading\" scale=\"M\" color=\"primary\">Page Title</AppText>\n<AppText group=\"Body\"    scale=\"S\" color=\"secondary\">Description</AppText>\n<AppText group=\"Label\"   scale=\"XS\" color=\"disabled\">Helper text</AppText>\n```\n\n---\n\n## Scale Utils & Dimensions\n\nShared across all projects — based on Figma base dimensions (390×844).\n\n```tsx\nimport { scale, verticalScale, moderateScale, CORNER_RADIUS, SECTION_CONTENT_SPACE, GAP } from '@azranazwer/rn-ui';\n\nconst styles = StyleSheet.create({\n  container: {\n    padding:      SECTION_CONTENT_SPACE.M,\n    gap:          GAP.M,\n    borderRadius: CORNER_RADIUS.L,\n    height:       verticalScale(56),\n  },\n});\n```\n\n---\n\n## Banner Message (Toast)\n\nRequires `react-native-flash-message` and `react-native-vector-icons`.\n\n```tsx\n// App.tsx — initialize once, re-run on dark/light change\nimport { initBannerMessage } from '@azranazwer/rn-ui';\nimport { FONT_FAMILY } from '~/assets/fonts';\nimport i18n from '~/i18n';\n\nuseEffect(() => {\n  initBannerMessage(resolvedTheme, FONT_FAMILY, i18n.t('flightBooking.undo'));\n}, [isDarkMode]);\n```\n\n```tsx\n// Anywhere in the app\nimport { showBannerMessage } from '@azranazwer/rn-ui';\n\nshowBannerMessage({ title: 'Saved!', type: 'success' });\nshowBannerMessage({ title: 'Failed', description: 'Try again.', type: 'error' });\nshowBannerMessage({ title: 'Item deleted', type: 'undo', onUndoPress: () => restore() });\n```\n\n---\n\n## Using theme tokens in your own components\n\n```tsx\nimport { useTheme, useTypography } from '@azranazwer/rn-ui';\n\nexport const MyComponent = () => {\n  const { BACKGROUND, CONTENT, BORDER, SURFACE } = useTheme();\n  const { Heading, Body } = useTypography();\n\n  return (\n    <View style={{ backgroundColor: SURFACE.L1, borderColor: BORDER.TERTIARY }}>\n      <Text style={[Heading.S, { color: CONTENT.PRIMARY }]}>Title</Text>\n      <Text style={[Body.M,    { color: CONTENT.SECONDARY }]}>Body</Text>\n    </View>\n  );\n};\n```\n\n---\n\n## What each project provides vs what the library owns\n\n| Token | Owned by |\n|---|---|\n| `scale`, `verticalScale`, `moderateScale` | **Library** — fixed Figma base (390×844) |\n| `CORNER_RADIUS`, `SECTION_CONTENT_SPACE`, `GAP` | **Library** — same across all projects |\n| Typography sizes, line-heights, RTL adjustments | **Library** |\n| `FONT_FAMILY` (Regular, Medium, SemiBold, Bold) | **Each project** |\n| All color tokens (BACKGROUND, CONTENT, BORDER…) | **Each project** |\n\n---\n\n## Peer Dependencies\n\n```json\n{\n  \"react\": \">=18.0.0\",\n  \"react-native\": \">=0.72.0\",\n  \"react-native-flash-message\": \">=0.3.0\",\n  \"react-native-vector-icons\": \">=10.0.0\"\n}\n```\n\n`react-native-flash-message` and `react-native-vector-icons` are optional — only needed if you use `showBannerMessage`.\n\n---\n\n## Publishing a new version\n\n```bash\nnpm version patch   # bug fix    → 1.0.1\nnpm version minor   # new component → 1.1.0\nnpm version major   # breaking change → 2.0.0\n\nnpm publish\n```\n\n---\n\n## Author\n\n**Azran Azwer** — [npmjs.com/~azranazwer](https://www.npmjs.com/~azranazwer)\n","readmeFilename":"README.md","_rev":"1-0bc462a0e81aa76e4cb098c5912d32c2"}