@intelligencebank/ui-primitives

Pure UI components for IntelligenceBank integrations.

📖 Live Documentation: storybook.connectingib.com

Installation

npm install @intelligencebank/ui-primitives

Usage

import { ThemeProvider, theme, Button, Card, Grid } from '@intelligencebank/ui-primitives';
import '@intelligencebank/ui-primitives/styles.css';

function App() {
  return (
    <ThemeProvider theme={theme}>
      <Card>
        <Grid columns={3}>
          <Button variant="primary">Click me</Button>
        </Grid>
      </Card>
    </ThemeProvider>
  );
}

Design Tokens

Access design tokens programmatically:

import { semanticColors, typography, spacing } from '@intelligencebank/ui-primitives/tokens';

// Use in styled components or inline styles
const style = {
  color: semanticColors.text.primary,
  fontFamily: typography.fontFamily.primary,
  padding: spacing[4],
};

Components

| Component | Description | |-----------|-------------| | Button | Primary action button with variants | | Card | Container with header/content/footer sections | | DropZone | Drag-and-drop file upload area | | Grid | Flexible grid layout | | Icon | Material icon or custom SVG | | Input | Text input with validation | | Menu | Dropdown menu with items | | Modal | Dialog overlay | | Multiselect | Multi-value dropdown with chips | | Paginator | Page navigation control | | Select | Dropdown selection | | Spinner | Loading indicator (circular, dots, bars) | | Tabs | Tab navigation component |

Theme Provider

All components require the ThemeProvider wrapper:

import { ThemeProvider, theme } from '@intelligencebank/ui-primitives';

function App() {
  return (
    <ThemeProvider theme={theme}>
      {/* Your application */}
    </ThemeProvider>
  );
}

Development

# Build the package
npm run build

# Run tests
npm run test

# Watch mode
npm run dev

Changelog

See CHANGELOG.md for version history and release notes.

Releases are managed via changesets. Run npx changeset to document changes before submitting a PR.

License

UNLICENSED - IntelligenceBank proprietary