hikayat-daily-ui

A React Native UI component library with design tokens, theming (light/dark), and glassmorphism support.

Installation

yarn add hikayat-daily-ui
# or
npm install hikayat-daily-ui

Peer Dependencies

yarn add react-native-linear-gradient react-native-svg

react-native-linear-gradient and react-native-svg are optional — only needed if you use GlassContainer or SVG-based components.

Font Setup

This library uses the Roboto font family. Link the fonts in your React Native project:

• Roboto-Light
• Roboto-Regular
• Roboto-Medium
• Roboto-Bold
• Roboto-Black

Quick Start

Wrap your app with ThemeProvider:

import { ThemeProvider } from 'hikayat-daily-ui';

export default function App() {
  return (
    <ThemeProvider defaultPreference="system">
      <YourApp />
    </ThemeProvider>
  );
}

Use components and tokens:

import {
  Text,
  Button,
  TextInput,
  Spacer,
  Colors,
  spacing,
  useThemeColors,
} from 'hikayat-daily-ui';

function MyScreen() {
  const colors = useThemeColors();

  return (
    <View style={{ flex: 1, backgroundColor: colors.background, padding: spacing.md }}>
      <Text variant="h2" weight="bold">Hello World</Text>
      <Spacer unit={16} />
      <TextInput label="Email" placeholder="[email protected]" />
      <Spacer unit={12} />
      <Button title="Sign In" onPress={() => {}} variant="primary" fullWidth />
    </View>
  );
}

What's Included

Design Tokens

| Token | Description | |-------|-------------| | Colors | 80+ semantic color tokens across 14 palettes | | Gradients | 50+ gradient presets (glass, AI, status, overlay) | | spacing | 4px grid system (xxs through massive) | | borderRadius | Consistent border radius scale | | typography | 30+ Material Design 3-inspired text presets | | fontFamily | Roboto font family definitions | | fontSize | xs (10) through 5xl (40) | | iconSize / avatarSize | Standard size scales | | hitSlop | Accessibility touch target presets |

Theme System

• Light and dark themes with 60+ semantic color properties
• ThemeProvider with system preference detection
• useThemeColors(), useThemeGradients(), useIsDarkMode() hooks
• onThemeChange callback for external persistence (Redux, AsyncStorage, etc.)

Components

| Component | Description | |-----------|-------------| | Text | Semantic typography with 8 variants and 7 weights | | Button | 6 variants (primary, secondary, action, outline, ghost, danger), 3 sizes, loading state | | TextInput | Label, error, icon slots, focus state, theme-aware | | Toggle | Theme-aware switch with 3 sizes | | Spacer | Vertical/horizontal spacing with preset sizes | | Divider | Horizontal/vertical separators | | GlassContainer | iOS glassmorphism with 7 variants (accepts optional LinearGradient) | | Modal | 4 types (success, error, warning, info) with primary/secondary buttons |

Theme Persistence

The ThemeProvider is storage-agnostic. Use onThemeChange to persist:

<ThemeProvider
  defaultPreference={savedPreference}
  onThemeChange={(pref) => AsyncStorage.setItem('theme', pref)}
/>

Color Palettes

• Primary — Slate Blue-Gray (#7D93A0)
• Secondary — Slate Purple (#7D82A0)
• Tertiary — Slate Teal (#7DA09C)
• Success — Sage Green (#5CA37E)
• Warning — Muted Gold (#C3B43C)
• Error — Terracotta (#B85C47)
• Info — Steel Blue (#4A6E84)
• AI Teal — Aurora (#14B8A6)
• AI Purple — Aurora (#A855F7)
• AI Gold — Amber (#F59E0B)
• AI Violet — Deep (#7C3AED)

License

MIT