@indra-inter/neobrutalism-components 0.1.3 → 0.2.0

package/README.md

@@ -1,11 +1,21 @@
 # Neobrutalism Components
 
-A token-driven neobrutalism component library for React Native iOS and Android.
-It provides reusable foundation, form, selection, feedback, and overlay
-components with light and dark themes.
+A token-driven React Native component library for iOS and Android. It provides
+neobrutalist foundations, forms, navigation, feedback, and overlays with Blue
+and Coral families in light and dark mode.
 
-> This package is currently used as a local package. The npm command below is
-> the intended installation flow after the package has been published.
+## Start here
+
+Use this README in order:
+
+1. [Install the package](#installation) and its native peers.
+2. Add the required [app providers](#app-providers) once at the application root.
+3. Choose [React Native styles or NativeWind](#styling-components), then configure
+   [theming](#theming) if the app supports mode or family switching.
+4. Use the [component reference](#components) for component-specific examples.
+
+All public examples use the scoped package name
+`@indra-inter/neobrutalism-components`.
 
 ## Installation
 
@@ -21,13 +31,13 @@ During local development, add the package from its sibling directory:
 pnpm add ../neobrutalism-components-rn
 ```
 
-After publishing to npm:
+Install the published package:
 
 ```bash
-pnpm add neobrutalism-components
+pnpm add @indra-inter/neobrutalism-components
 ```
 
-## NativeWind and React Native styles
+## Styling components
 
 NativeWind v4 is a required peer dependency. Configure it in the consuming
 application, then import components from the same package entry point. Neo's
@@ -38,7 +48,7 @@ components also expose named class slots that match their existing `*Style`
 props.
 
 ```tsx
-import { Button, Radio } from 'neobrutalism-components';
+import { Button, Radio } from '@indra-inter/neobrutalism-components';
 
 <Radio
   className="min-h-14 items-center px-2 py-2"
@@ -48,7 +58,7 @@ import { Button, Radio } from 'neobrutalism-components';
 />
 
 <Button
-  className="bg-sky-500"
+  className="bg-primary"
   containerClassName="self-end"
   containerStyle={{ marginTop: 12 }}>
   Continue
@@ -71,34 +81,15 @@ control.
 <Button className="mt-4" rounded="sharp" shadow={false}>Save</Button>
 <Input className="bg-card" containerClassName="gap-2" />
 <Badge variant="destructive" rounded="pill">Failed</Badge>
-<Avatar mode="image" source={photo} />
-```
-
-The following aliases remain supported for compatibility. Prefer the canonical
-prop in new code: `Button variant="noShadow"` → `shadow={false}`,
-`Badge.type` → `Badge.variant`, `Avatar.variant` → `Avatar.mode`,
-`AppBar.Content.variant` → `AppBar.Content.layout`, and
-`DropdownMenu.variant` → `DropdownMenu.mode`. If both values are supplied,
-the canonical prop takes precedence.
-
-## Example app
-
-The repository includes a private Expo Router example application in
-[`example/`](./example). It demonstrates the package in Chats, Calls, Discover,
-and Me screens, while the external `company-ui-test` project remains the focused
-regression consumer. The example is excluded from the npm tarball.
-
-```bash
-# repository root
-pnpm build
-pnpm --dir example install
-pnpm --dir example start
+<Avatar variant="image" source={photo} />
 ```
 
-See [`example/README.md`](./example/README.md) for the local workflow and
-validation commands.
+Use the canonical selector props only: `Avatar.variant`, `Badge.variant`, and
+`DropdownMenu.variant`. Shadow color is always semantic: use
+`shadowVariant="primary"` or another Neo role; arbitrary `shadowColor` values
+are intentionally not supported.
 
-## Setup
+## App providers
 
 Wrap the application once. `SafeAreaProvider` supplies insets used by toasts,
 dialogs, and bottom sheets. `DialogProvider` provides the portal host for
@@ -112,7 +103,7 @@ import {
   ThemeProvider,
   ToastProvider,
   type ThemeMode,
-} from 'neobrutalism-components';
+} from '@indra-inter/neobrutalism-components';
 
 export function AppProviders({ children }: PropsWithChildren) {
   const [mode] = useState<ThemeMode>('light');
@@ -131,20 +122,30 @@ export function AppProviders({ children }: PropsWithChildren) {
 
 ## Theming
 
-`ThemeProvider` supports `light` and `dark` modes. Components react to a mode
-change automatically.
+`ThemeProvider` supports `light` and `dark` modes plus `blue` and `coral` theme
+families. Blue is the default. Components automatically react to mode and
+family changes.
 
 ```tsx
 import { useState } from 'react';
-import { Button, ThemeProvider, type ThemeMode } from 'neobrutalism-components';
+import {
+  Button,
+  ThemeProvider,
+  type ThemeMode,
+  type ThemeVariant,
+} from '@indra-inter/neobrutalism-components';
 
 export function ThemeExample() {
   const [mode, setMode] = useState<ThemeMode>('light');
+  const [variant, setVariant] = useState<ThemeVariant>('blue');
 
   return (
-    <ThemeProvider mode={mode}>
+    <ThemeProvider mode={mode} variant={variant}>
       <Button onPress={() => setMode(mode === 'light' ? 'dark' : 'light')}>
-        Switch theme
+        Switch mode
+      </Button>
+      <Button onPress={() => setVariant(variant === 'blue' ? 'coral' : 'blue')}>
+        Switch family
       </Button>
     </ThemeProvider>
   );
@@ -156,7 +157,7 @@ tokens:
 
 ```tsx
 import { Text, View } from 'react-native';
-import { useTheme } from 'neobrutalism-components';
+import { useTheme } from '@indra-inter/neobrutalism-components';
 
 export function ThemedPanel() {
   const theme = useTheme();
@@ -171,31 +172,65 @@ export function ThemedPanel() {
 
 `createTheme`, `theme`, `designTokens`, and `defaultDesignTokenModes` are also
 exported when an application needs to inspect theme data outside a component.
+For example, `createTheme('dark', 'coral')` returns the same palette used by
+`ThemeProvider mode="dark" variant="coral"`.
 
 ### Figma token workflow
 
-Figma exports are versioned in [`tokens/figma/`](./tokens/figma). Regenerate
-the runtime TypeScript tokens and the NativeWind-compatible CSS variables after
-updating those files:
+Figma exports are versioned in [`tokens/figma/`](./tokens/figma). After changing
+them, regenerate the TypeScript theme and NativeWind semantic variables:
 
 ```bash
 pnpm generate:design-tokens
 pnpm test:design-tokens
 ```
 
-For standard NativeWind semantic utilities, import the generated opt-in
-semantic stylesheet once in the consuming application's global CSS:
+For NativeWind semantic utilities, import the generated stylesheet once in the
+consuming application's global CSS:
 
 ```css
 @import '@indra-inter/neobrutalism-components/nativewind.css';
 ```
 
-This provides direct light and dark values for semantic classes such as
-`text-foreground`, `bg-primary`, and `bg-success-100`, matching the package
-`ThemeProvider` palette without a consumer-maintained token bridge.
+It provides semantic roles and status scales such as `text-foreground`,
+`bg-sidebar`, `text-code-foreground`, `bg-success-100`, `bg-info-100`,
+`bg-warning-100`, and `bg-error-100`.
+
+For apps that switch Blue/Coral while running, use `NativeWindThemeProvider`
+instead of `ThemeProvider`. It keeps `useTheme()` and descendant NativeWind
+classes on the same generated variable record:
+
+```tsx
+import {
+  NativeWindThemeProvider,
+  type ThemeMode,
+  type ThemeVariant,
+} from '@indra-inter/neobrutalism-components';
+import { useState, type PropsWithChildren } from 'react';
 
-`tokens.css` remains available for compatibility and for consumers that need
-the namespaced `--neo-*` variables directly:
+function AppTheme({ children }: PropsWithChildren) {
+  const [mode] = useState<ThemeMode>('dark');
+  const [variant] = useState<ThemeVariant>('coral');
+
+  return (
+    <NativeWindThemeProvider mode={mode} variant={variant}>
+      {children}
+    </NativeWindThemeProvider>
+  );
+}
+```
+
+The selected family changes all semantic classes together. For example:
+
+```tsx
+<View className="bg-success-100 border-success-300" />
+<View className="bg-info-100 border-info-300" />
+<View className="bg-warning-100 border-warning-300" />
+<View className="bg-error-100 border-error-300" />
+```
+
+For advanced integrations that need the namespaced `--neo-*` variables
+directly, import `tokens.css` instead:
 
 ```css
 @import '@indra-inter/neobrutalism-components/tokens.css';
@@ -203,6 +238,10 @@ the namespaced `--neo-*` variables directly:
 
 ## Components
 
+Each section documents the decision-making props and a focused example. The
+exported TypeScript props remain the complete source of truth for optional
+style slots and platform-native props.
+
 | Group | Components |
 | --- | --- |
 | Foundation | `Button`, `IconButton`, `Badge`, `Card`, `Avatar` |
@@ -214,7 +253,7 @@ the namespaced `--neo-*` variables directly:
 
 ```tsx
 import { Text } from 'react-native';
-import { Button } from 'neobrutalism-components';
+import { Button } from '@indra-inter/neobrutalism-components';
 
 <Button
   accessibilityLabel="Continue"
@@ -229,7 +268,7 @@ import { Button } from 'neobrutalism-components';
 
 | Key prop | Description |
 | --- | --- |
-| `variant` | `primary`, `secondary`, `ghost`, `outline`, `destructive`, `warning`, `success`, `info`, `neutral`, or `noShadow`. |
+| `variant` | `primary`, `secondary`, `ghost`, `outline`, `destructive`, `warning`, `success`, or `info`. |
 | `size` | `sm`, `md` (default), or `lg`. |
 | `radius` | Overrides the theme border radius. |
 | `rounded` | `rounded` (default) uses the theme radius; `sharp` sets the surface radius to `0`. An explicit `radius` takes precedence. |
@@ -250,7 +289,7 @@ other icon-first actions. The application supplies the icon and behavior.
 
 ```tsx
 import { MicOff, PhoneOff } from 'lucide-react-native';
-import { IconButton } from 'neobrutalism-components';
+import { IconButton } from '@indra-inter/neobrutalism-components';
 
 <IconButton
   accessibilityLabel="Mute microphone"
@@ -275,7 +314,7 @@ import { IconButton } from 'neobrutalism-components';
 | `variant` | `default`, `primary`, or `destructive`. |
 | `size` | Side length of the icon surface; defaults to `60`. |
 | `rounded` / `radius` | `rounded` uses the theme radius, `sharp` uses `0`; an explicit `radius` takes precedence. |
-| `shadow` / `shadowColor` | Hard shadow is enabled by default. Disable it or override its color when needed. |
+| `shadow` / `shadowVariant` | Hard shadow is enabled by default. Disable it or select a semantic Neo shadow color when needed. |
 
 ### ListItem
 
@@ -285,7 +324,7 @@ data mapping remain in the consuming application.
 ```tsx
 import { useState } from 'react';
 import { Text } from 'react-native';
-import { Avatar, ListItem, Switch } from 'neobrutalism-components';
+import { Avatar, ListItem, Switch } from '@indra-inter/neobrutalism-components';
 
 const [notificationsEnabled, setNotificationsEnabled] = useState(true);
 
@@ -343,7 +382,7 @@ sections. It has no shadow or border of its own, and uses `theme.border.color`
 at one pixel by default.
 
 ```tsx
-import { Divider } from 'neobrutalism-components';
+import { Divider } from '@indra-inter/neobrutalism-components';
 
 <Divider />
 <Divider inset="md" />
@@ -363,7 +402,7 @@ message preview, and an unread counter. Data mapping, navigation, avatar choice,
 and selection state stay in the app.
 
 ```tsx
-import { Avatar, ChatListItem } from 'neobrutalism-components';
+import { Avatar, ChatListItem } from '@indra-inter/neobrutalism-components';
 
 <ChatListItem
   leading={<Avatar initials="AK" size="md" />}
@@ -374,7 +413,7 @@ import { Avatar, ChatListItem } from 'neobrutalism-components';
   state="unread"
   timestamp="10:11"
   title="Ariana Kim"
-  unreadBadgeProps={{ radius: 8, shadowColor: '#01ABFF' }}
+  unreadBadgeProps={{ radius: 8, shadowVariant: 'primary' }}
   unreadCount={2}
 />
 ```
@@ -386,7 +425,7 @@ import { Avatar, ChatListItem } from 'neobrutalism-components';
 | `leading` / `leadingStyle` | Optional avatar or custom 40px leading content, with a style override. |
 | `title`, `message`, `timestamp` | Required consumer-owned chat content. |
 | `titleNumberOfLines`, `messageNumberOfLines`, `timestampNumberOfLines` | Per-field truncation limits. The default title limit is `1` (`2` for `request`), while message and timestamp default to `1`. |
-| `unreadBadgeProps` | Optional `Badge` props for the unread counter, such as `radius`, `rounded`, `shadow`, and `shadowColor`. |
+| `unreadBadgeProps` | Optional `Badge` props for the unread counter, such as `radius`, `rounded`, `shadow`, and `shadowVariant`. |
 | `divider`, `onPress`, `onLongPress`, `disabled` | Row behavior and section composition. `onLongPress` is useful for consumer-owned multiselect flows. |
 
 ### CallItem
@@ -396,7 +435,7 @@ provides its avatar, phone/video icon, copy, and interaction.
 
 ```tsx
 import { Phone } from 'lucide-react-native';
-import { Avatar, CallItem } from 'neobrutalism-components';
+import { Avatar, CallItem } from '@indra-inter/neobrutalism-components';
 
 <CallItem
   detail="Incoming · 5:23"
@@ -418,21 +457,21 @@ import { Avatar, CallItem } from 'neobrutalism-components';
 ### Badge
 
 ```tsx
-import { Badge } from 'neobrutalism-components';
+import { Badge } from '@indra-inter/neobrutalism-components';
 
-<Badge size="md" type="success">Published</Badge>
+<Badge size="md" variant="success">Published</Badge>
 
-<Badge className="min-h-8 px-2" shadow={false} size="md" type="primary">
+<Badge className="min-h-8 px-2" shadow={false} size="md" variant="primary">
   Category
 </Badge>
 ```
 
 | Key prop | Description |
 | --- | --- |
-| `type` | `default`, `primary`, `info`, `error`, `warning`, or `success`. |
+| `variant` | `default`, `primary`, `info`, `error`, `warning`, or `success`. |
 | `size` | `sm` or `md`. |
 | `radius` / `rounded` | `radius` has priority; otherwise `rounded` is `rounded` (default) or `sharp`. |
-| `shadow` / `shadowColor` | Show or hide the hard shadow, and optionally override its color. |
+| `shadow` / `shadowVariant` | Show or hide the hard shadow, and select its semantic Neo color. |
 | `className` | NativeWind classes mapped to the Badge visual style surface. |
 | `leadingIcon` | Optional icon before the badge label. |
 
@@ -442,7 +481,7 @@ import { Badge } from 'neobrutalism-components';
 application or backend.
 
 ```tsx
-import { Progress } from 'neobrutalism-components';
+import { Progress } from '@indra-inter/neobrutalism-components';
 
 <Progress value={75} />
 
@@ -475,7 +514,7 @@ and text blocks. It uses a lightweight native opacity pulse and requires no
 additional animation or gradient dependency.
 
 ```tsx
-import { Skeleton } from 'neobrutalism-components';
+import { Skeleton } from '@indra-inter/neobrutalism-components';
 
 <Skeleton type="chat" />
 
@@ -488,7 +527,7 @@ import { Skeleton } from 'neobrutalism-components';
 | --- | --- |
 | `type` | `textBlock` (default), `list`, or `chat`. Each renders the corresponding Figma placeholder layout. |
 | `rounded` / `radius` | `sharp` is the default; `rounded` uses the theme radius. An explicit `radius` takes precedence. |
-| `shadow` / `shadowColor` / `shadowOffset` | Hard shadow is on by default. Override its color or right-and-bottom offset as needed. |
+| `shadow` / `shadowVariant` / `shadowOffset` | Hard shadow is on by default. Select its semantic Neo color or override its right-and-bottom offset as needed. |
 | `animated` / `animationDuration` | Enables the native opacity pulse by default. Set `animated={false}` for static loading states. |
 | `style` | Styles the outer preset container, such as its width or placement. |
 
@@ -504,7 +543,7 @@ exchange JavaScript `Date` objects with the consuming application.
 
 ```tsx
 import { useState } from 'react';
-import { Calendar, type CalendarRangeValue } from 'neobrutalism-components';
+import { Calendar, type CalendarRangeValue } from '@indra-inter/neobrutalism-components';
 
 const [date, setDate] = useState<string | undefined>('2026-08-31');
 const [range, setRange] = useState<CalendarRangeValue | undefined>({
@@ -548,7 +587,7 @@ the consuming application.
 
 ```tsx
 import { Text } from 'react-native';
-import { Accordion } from 'neobrutalism-components';
+import { Accordion } from '@indra-inter/neobrutalism-components';
 
 <Accordion
   defaultValue="overview"
@@ -586,7 +625,6 @@ Use `type="multiple"` when several sections may remain open:
 | `value` / `defaultValue` / `onValueChange` | Controlled or uncontrolled expanded state. Single mode uses a string or `null`; multiple mode uses a string array. |
 | `collapsible` | Defaults to `true`; set `false` to keep the expanded item open in single mode. |
 | `shadowVariant` | `default`, `primary`, `secondary`, `destructive`, `warning`, `success`, or `info`; it applies to expanded sections only. |
-| `shadowColor` | Direct hard-shadow override; takes precedence over `shadowVariant`. |
 | Style props | `containerStyle`, `style`, `headerStyle`, `contentStyle`, and `titleStyle`. |
 
 Expanded headers use the current theme's `primaryHover` color. The chevron,
@@ -597,7 +635,7 @@ border, hard shadow, and disabled state are package-managed.
 ```tsx
 import { useState } from 'react';
 import { Text } from 'react-native';
-import { Input } from 'neobrutalism-components';
+import { Input } from '@indra-inter/neobrutalism-components';
 
 const [email, setEmail] = useState('');
 
@@ -635,7 +673,7 @@ high by default and aligns text at the top.
 
 ```tsx
 import { useState } from 'react';
-import { TextArea } from 'neobrutalism-components';
+import { TextArea } from '@indra-inter/neobrutalism-components';
 
 export function BioField() {
   const [bio, setBio] = useState('');
@@ -670,7 +708,7 @@ surface. Visibility can be controlled by the app or managed internally.
 
 ```tsx
 import { useState } from 'react';
-import { PasswordInput } from 'neobrutalism-components';
+import { PasswordInput } from '@indra-inter/neobrutalism-components';
 
 const [password, setPassword] = useState('');
 
@@ -697,7 +735,7 @@ const [password, setPassword] = useState('');
 segment without requiring the consuming app to compose it manually.
 
 ```tsx
-import { UrlInput } from 'neobrutalism-components';
+import { UrlInput } from '@indra-inter/neobrutalism-components';
 
 <UrlInput
   label="Website"
@@ -720,7 +758,7 @@ import { UrlInput } from 'neobrutalism-components';
 defaults. The app owns country selection and phone-number validation.
 
 ```tsx
-import { PhoneInput } from 'neobrutalism-components';
+import { PhoneInput } from '@indra-inter/neobrutalism-components';
 
 <PhoneInput
   country={{ dialCode: '+62', isoCode: 'ID' }}
@@ -745,7 +783,7 @@ segments. Values are intentionally unformatted so the consuming app can apply
 its own locale, decimal, and submission rules.
 
 ```tsx
-import { CurrencyInput } from 'neobrutalism-components';
+import { CurrencyInput } from '@indra-inter/neobrutalism-components';
 
 <CurrencyInput
   currencyCode="IDR"
@@ -771,7 +809,7 @@ paste behavior on iOS and Android.
 
 ```tsx
 import { useState } from 'react';
-import { OtpInput } from 'neobrutalism-components';
+import { OtpInput } from '@indra-inter/neobrutalism-components';
 
 const [code, setCode] = useState('');
 
@@ -809,10 +847,9 @@ import {
   CardFooter,
   CardHeader,
   CardTitle,
-} from 'neobrutalism-components';
+} from '@indra-inter/neobrutalism-components';
 
 <Card
-  backgroundColor="#FFFFFF"
   radius={{ topLeft: 16, topRight: 16, bottomLeft: 0, bottomRight: 0 }}
   shadowVariant="primary">
   <CardHeader>
@@ -830,10 +867,9 @@ import {
 
 | Key prop | Description |
 | --- | --- |
-| `backgroundColor` | Overrides the theme surface color. |
+| `backgroundColor` | Explicit runtime override for the theme surface. Prefer `className`, `style`, or a semantic theme token when the color is known ahead of time. |
 | `radius` | A number or corner object with `topLeft`, `topRight`, `bottomRight`, and `bottomLeft`. |
 | `shadowVariant` | `default`, `primary`, `secondary`, `destructive`, `warning`, `success`, or `info`. |
-| `shadowColor` | Direct hard-shadow override; takes precedence over `shadowVariant`. |
 | `contentStyle` | Overrides the default content layout, for example `{{ padding: 0 }}` for full-bleed list rows. |
 | `containerStyle` / `style` | Styles for the shadow wrapper or card surface. |
 | `containerClassName` / `className` / `contentClassName` | NativeWind equivalents for `containerStyle`, `style`, and `contentStyle`; `contentClassName` is applied last. |
@@ -841,7 +877,7 @@ import {
 ### Avatar
 
 ```tsx
-import { Avatar } from 'neobrutalism-components';
+import { Avatar } from '@indra-inter/neobrutalism-components';
 
 <Avatar initials="AK" size="md" />
 <Avatar size="lg" source={{ uri: profileUri }} variant="image" />
@@ -856,17 +892,17 @@ import { Avatar } from 'neobrutalism-components';
 | `source` | Native `ImageSourcePropType` for the `image` variant. |
 | `showAdd` | Shows the add indicator for `md`, `lg`, and `xl` avatars. |
 | `rounded` | `rounded` (default) uses the theme radius; `sharp` makes the avatar square. |
-| `shadow` / `shadowColor` | Show or hide the hard shadow, and optionally override its color. |
+| `shadow` / `shadowVariant` | Show or hide the hard shadow, and select its semantic Neo color. |
 
 ### AppBar
 
 `AppBar` supplies the screen-header surface; navigation and every interactive
 slot remain owned by the consuming application. Keep the application wrapped
-with `SafeAreaProvider` as shown in [Setup](#setup).
+with `SafeAreaProvider` as shown in [App providers](#app-providers).
 
 ```tsx
 import { Text } from 'react-native';
-import { AppBar, Avatar, Checkbox, Tabs } from 'neobrutalism-components';
+import { AppBar, Avatar, Checkbox, Tabs } from '@indra-inter/neobrutalism-components';
 
 <AppBar>
   <AppBar.Content
@@ -888,12 +924,12 @@ inset or when the bar intentionally overlays screen content. Use
 negative values are clamped at zero:
 
 ```tsx
-<AppBar backgroundColor="#25A9EB" safeArea={false}>
+<AppBar safeArea={false}>
   <AppBar.Content title="Select items" trailing={<Text>2 selected</Text>} />
 </AppBar>
 ```
 
-Use `variant="select"` for a bulk-selection header. The selection count stays in
+Use `layout="select"` for a bulk-selection header. The selection count stays in
 the flexible title slot, while the select-all control stays pinned to the right:
 
 ```tsx
@@ -910,7 +946,7 @@ the flexible title slot, while the select-all control stays pinned to the right:
         style={{ width: 106 }}
       />
     }
-    variant="select"
+    layout="select"
   />
 </AppBar>
 ```
@@ -919,7 +955,7 @@ the flexible title slot, while the select-all control stays pinned to the right:
 | --- | --- |
 | `safeArea` | Defaults to `true`; applies the top device inset through `SafeAreaProvider`. |
 | `safeAreaOffset` | Adds to the top inset when `safeArea` is enabled. Defaults to `0`; the final inset never becomes negative. |
-| `backgroundColor` | Overrides the default primary app-bar surface. |
+| `backgroundColor` | Explicit runtime override for the default primary surface. Prefer a semantic theme token when the color is known ahead of time. |
 | `variant` | `default` (default) or `select`. `select` matches the compact bottom padding of Figma's selection header. |
 | `leading` / `avatar` / `trailing` | Consumer-owned React-node slots in `AppBar.Content`. Supply accessible pressable controls for actions. |
 | `title` / `subtitle` | String or number values receive theme text styling and truncate safely to one line; custom React nodes remain unchanged. |
@@ -932,7 +968,7 @@ These controls are controlled by their value props and callbacks.
 
 ```tsx
 import { useState } from 'react';
-import { Checkbox, Radio, Switch } from 'neobrutalism-components';
+import { Checkbox, Radio, Switch } from '@indra-inter/neobrutalism-components';
 
 const [accepted, setAccepted] = useState(false);
 const [plan, setPlan] = useState<'standard' | 'express'>('standard');
@@ -974,7 +1010,7 @@ screen content in the consuming application.
 ```tsx
 import { useState } from 'react';
 import { Text } from 'react-native';
-import { Badge, Tabs, type TabItem } from 'neobrutalism-components';
+import { Badge, Tabs, type TabItem } from '@indra-inter/neobrutalism-components';
 
 const items: readonly TabItem[] = [
   { label: 'Overview', value: 'overview' },
@@ -1034,7 +1070,7 @@ and navigation calls in the consuming application.
 ```tsx
 import { useState } from 'react';
 import { Text } from 'react-native';
-import { BottomNavigation } from 'neobrutalism-components';
+import { BottomNavigation } from '@indra-inter/neobrutalism-components';
 
 export function AppNavigation() {
   const [tab, setTab] = useState('chats');
@@ -1043,7 +1079,7 @@ export function AppNavigation() {
     <BottomNavigation
       items={[
         {
-          activeIcon: <Text style={{ color: '#01ABFF' }}>●</Text>,
+          activeIcon: <Text>●</Text>,
           icon: <Text>○</Text>,
           label: 'Chats',
           value: 'chats',
@@ -1068,7 +1104,6 @@ export function AppNavigation() {
 | `indicatorRadius` | Radius for the selected tab's bottom indicator. Defaults to `0` for the square Figma treatment. |
 | `shadow` | Enables the hard shadow; defaults to `true`. Use `false` for a flat navigation surface. |
 | `shadowVariant` | `default`, `primary`, `secondary`, `destructive`, `warning`, `success`, or `info`. It defaults to `primary` to match the Figma navigation shadow. |
-| `shadowColor` | Direct hard-shadow override. It takes precedence over `shadowVariant`. |
 | `containerStyle` / `style` / `contentStyle` | Style the outer wrapper, safe-area surface, or bordered navigation row. |
 
 Each item exposes the native `tab` role with selected and disabled state. Use
@@ -1082,7 +1117,7 @@ Use `Dropdown` for value selection. `single` is the default; use
 
 ```tsx
 import { useState } from 'react';
-import { Dropdown } from 'neobrutalism-components';
+import { Dropdown } from '@indra-inter/neobrutalism-components';
 
 const [team, setTeam] = useState<string>();
 
@@ -1104,7 +1139,7 @@ the application and provide mapper callbacks instead of reshaping every
 response into UI data first.
 
 ```tsx
-import { Avatar, Dropdown } from 'neobrutalism-components';
+import { Avatar, Dropdown } from '@indra-inter/neobrutalism-components';
 
 type Team = {
   avatarUri?: string;
@@ -1168,7 +1203,7 @@ const [teamIds, setTeamIds] = useState<readonly string[]>([]);
 `DropdownMenu` is an action menu, not a value-select control.
 
 ```tsx
-import { Button, DropdownMenu } from 'neobrutalism-components';
+import { Button, DropdownMenu } from '@indra-inter/neobrutalism-components';
 
 <DropdownMenu
   align="end"
@@ -1190,7 +1225,6 @@ import { Button, DropdownMenu } from 'neobrutalism-components';
 | `side` / `sideOffset` | Menu side (`top` or `bottom`) and gap from its trigger. Defaults to `bottom` and `6`. |
 | `shadow` | Enables the neobrutalist shadow. Defaults to `true`. |
 | `shadowVariant` | Shadow color token: `default`, `primary`, `secondary`, `destructive`, `warning`, `success`, or `info`. |
-| `shadowColor` | Explicit shadow color. Takes precedence over `shadowVariant`. |
 | `shadowOffset` | Right-and-bottom shadow thickness. Defaults to the theme shadow offset. |
 | `children` | One trigger element, usually a `Button`. |
 
@@ -1199,7 +1233,7 @@ import { Button, DropdownMenu } from 'neobrutalism-components';
 Use `useToast` inside `ToastProvider` for application notifications.
 
 ```tsx
-import { Button, useToast } from 'neobrutalism-components';
+import { Button, useToast } from '@indra-inter/neobrutalism-components';
 
 export function SaveButton() {
   const { show } = useToast();
@@ -1231,7 +1265,7 @@ export function SaveButton() {
 `onOpenChange`.
 
 ```tsx
-import { Toast } from 'neobrutalism-components';
+import { Toast } from '@indra-inter/neobrutalism-components';
 
 <Toast
   description="Your changes have been saved successfully."
@@ -1255,7 +1289,7 @@ import {
   DialogBody,
   DialogFooter,
   DialogHeader,
-} from 'neobrutalism-components';
+} from '@indra-inter/neobrutalism-components';
 
 const [open, setOpen] = useState(false);
 
@@ -1273,7 +1307,7 @@ const [open, setOpen] = useState(false);
 ```
 
 ```tsx
-import { ConfirmDialog } from 'neobrutalism-components';
+import { ConfirmDialog } from '@indra-inter/neobrutalism-components';
 
 <ConfirmDialog
   confirmLabel="Delete"
@@ -1299,7 +1333,7 @@ screen header that also needs to be cleared.
 
 ```tsx
 import { useState } from 'react';
-import { Button, BottomSheet, BottomSheetBody, BottomSheetFooter, BottomSheetHeader } from 'neobrutalism-components';
+import { Button, BottomSheet, BottomSheetBody, BottomSheetFooter, BottomSheetHeader } from '@indra-inter/neobrutalism-components';
 
 const [open, setOpen] = useState(false);
 
@@ -1310,7 +1344,8 @@ const [open, setOpen] = useState(false);
     animationDuration={220}
     onOpenChange={setOpen}
     open={open}
-    radius={16}>
+    rounded="rounded"
+    shadowVariant="primary">
     <BottomSheetHeader title="Update profile" />
     <BottomSheetBody>{/* Application-owned form content */}</BottomSheetBody>
     <BottomSheetFooter>
@@ -1326,26 +1361,7 @@ const [open, setOpen] = useState(false);
 | `open` / `onOpenChange` | Controlled visibility. Tapping the backdrop invokes `onOpenChange(false)`. |
 | `animation` | `slide` (default) or `none`. |
 | `animationDuration` | Open and close duration in milliseconds; defaults to `220`. |
-| `radius` | Overrides both top corner radii. |
-| `shadow` | Shows the platform surface shadow. Defaults to `true`; use `false` for a flat sheet. |
+| `rounded` / `radius` | Controls the two top corner radii. `rounded` uses the Neo shape presets; numeric `radius` takes precedence. |
+| `shadow` / `shadowVariant` | Controls elevation. Shadow is enabled by default; set `shadow={false}` for a flat sheet or choose a semantic color role. |
 | `bottomPadding` | Overrides the safe-area spacing below the sheet content. |
 | `keyboardVerticalOffset` | Header offset for keyboard positioning; defaults to `0`. |
-
-## Local Development and Publishing
-
-The package currently resolves directly to `src/index.ts` and has
-`"private": true` in `package.json`; this is deliberate for local iteration.
-
-Before publishing to npm, add an intentional release configuration that:
-
-1. builds JavaScript output rather than shipping TypeScript source only;
-2. emits `.d.ts` declaration files and points `types`/`exports` to them;
-3. removes `private`, chooses a version, and verifies the npm tarball; and
-4. documents the supported React Native and Expo ranges for that release.
-
-Until then, consume the package through the local file dependency and run the
-package typecheck after API changes:
-
-```bash
-pnpm run typecheck
-```