@saybridge/ui

Design system and cross-platform UI component library for Saybridge (supporting both React Web and React Native Mobile).

Installation

npm install @saybridge/ui

1. Usage in Web Applications (React Web / DOM)

Before rendering any components, initialize the CSS tokens dynamically:

import { injectTokens } from '@saybridge/ui';

// Call once at the application entry point (e.g., main.tsx / index.tsx)
injectTokens();

Importing Web Components

All premium glassmorphism styled components can be imported directly from the package root:

import { Button, GlassCard, LiquidModal, PageContainer } from '@saybridge/ui';

function MyWebComponent() {
  return (
    <PageContainer title="Settings">
      <GlassCard title="Workspace Settings">
        <Button variant="primary">Save Changes</Button>
      </GlassCard>
    </PageContainer>
  );
}

2. Usage in Mobile Applications (React Native)

All mobile-specific Native components are optimized for iOS/Android and exported under the /mobile subpath:

import { 
  ButtonMobile, 
  TextInputMobile, 
  BadgeMobile, 
  ToggleMobile 
} from '@saybridge/ui/mobile';

function MyMobileComponent() {
  return (
    <TextInputMobile 
      label="API KEY" 
      placeholder="Enter your API key..."
      onChangeText={(text) => console.log(text)}
    />
  );
}

Sharing Design Tokens in JS/TS

You can import the central theme design tokens directly in React Native StyleSheet:

import { DesignTokens } from '@saybridge/ui/mobile';
import { StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  container: {
    backgroundColor: DesignTokens.colors.bgBase,
    borderRadius: DesignTokens.radius.md,
  }
});

Package Exports Structure

The package is compiled into a CommonJS/ESM hybrid package in dist/. Entry points are configured via package.json exports mapping:

• @saybridge/ui -> resolves Web entry point (dist/index.js)
• @saybridge/ui/mobile -> resolves Mobile entry point (dist/mobile.js)