open-index/open-npm huggingface dataset:
npm package: @org-design-system/components
Description: UI components for the @org-design-system
Latest version: 0.1.16

# @org-design-system/components ⚡

The core UI component library for the Antaris Design System. Engineered with a focus on accessibility, customizability, and performance.

## 🏛️ Architecture

Our components are built on top of a modern technology stack designed for the next decade of web development:

- **Radix UI**: Provides the accessible, unstyled foundation for complex primitives (Dialogs, Selects, Popovers, etc.).
- **Tailwind CSS v4**: Utilizes the latest CSS-in-CSS features, high-performance compilation, and native CSS variable integration.
- **CVA (Class Variance Authority)**: Manages component variants, sizes, and intents in a type-safe manner.
- **Lucide React**: Integrated as the default iconography engine.

## 🎨 Styling System

This package leverages the `@org-design-system/styles` engine. Components are not utility-heavy; instead, they use semantic abstraction:

- **Semantic Tokens**: We don't use `bg-blue-500`. We use `bg-[var(--color-surface-focus)]`.
- **Theme Integration**: All colors are defined in the OKLCH color space for superior visual consistency.

## 📦 Usage

While this package can be used standalone, it is recommended to consume it via the `@org-design-system/core` metapackage.

```tsx
import { Button, Badge, Toggle } from "@org-design-system/components";

function MyComponent() {
  return (
    <Button variant="solid" intent="primary">
      Professional Action
    </Button>
  );
}
```

## 🛠️ Internal Development

### Adding a New Component
1. Create the component in `src/components/[name].tsx`.
2. Export it from `src/index.ts`.
3. Add a story in `apps/storybook` for testing.
4. Run `npm run build` to generate the bundled CSS and JS.

### Build Process
- uses `tsup` for bundling JS/TS.
- uses a custom sync process to bundle component-specific CSS into `dist/index.css`.

---
*Built for the next generation of web applications.*
npm package: @org-design-system/core
Description: The professional design system for organization
Latest version: 0.1.16

# @org-design-system/core 💎

The official Antaris Design System metapackage. This package provides a unified, production-ready entry point for all components, icons, and styles.

## 🚀 Key Features

- **Simplified Consumption**: Access everything via a single package.
- **Subpath Exports**: Dedicated exports for `components`, `icons`, and `styles`.
- **Tree-Shakable**: Built with `tsup` for optimal performance.
- **Type-Safe**: Complete TypeScript support for all re-exported libraries.

## 📦 Installation

```bash
npm install @org-design-system/core
# or
pnpm add @org-design-system/core
# or
yarn add @org-design-system/core
```

## ⚙️ Setup

### 1. Global Styles
Import the consolidated design system styles into your root application file (e.g., `_app.tsx` or `layout.tsx`):

```css
@import "@org-design-system/core/styles.css";
```

### 2. Tailwind CSS v4 (Optional but Recommended)
If you are using Tailwind CSS v4, our styles will automatically integrate with your `@theme` if you import them after the `tailwindcss` directive.

## 🛠️ Usage

### Main Entry
Re-exports everything for simple usage.

```tsx
import { Button, RocketIcon, Badge } from "@org-design-system/core";

export default function Home() {
  return (
    <div className="flex flex-col gap-4">
      <Badge intent="success">Online</Badge>
      <Button variant="solid" intent="primary" leftIcon={<RocketIcon />}>
        Track Asset
      </Button>
    </div>
  );
}
```

### Subpath Entry
For more granular control or to avoid potential naming conflicts.

```tsx
import { Button } from "@org-design-system/core/components";
import { RocketIcon } from "@org-design-system/core/icons";
```

### Direct Package Usage (Recommended for complex apps)
Because `@org-design-system/core` provides these as peer dependencies, you can also import them directly without separate installation:

```tsx
import { Button } from "@org-design-system/components";
import { RocketIcon } from "@org-design-system/icons";
```

## 🏗️ Internal Structure

This package is a "metapackage" that depends on and re-exports the following internal libraries:
- `@org-design-system/components`: Core UI components.
- `@org-design-system/icons`: optimized SVG icon library.
- `@org-design-system/styles`: The design token and styling engine.

---
*Professional UI for High-Performance Teams.*
npm package: @org-design-system/icons
Description: Icon components for the @org-design-system
Latest version: 0.1.16

# @org-design-system/icons 🛰️

A specialized icon library for the Antaris Design System. This package transforms raw SVGs into optimized, type-safe React components.

## 🚀 Features

- **Icon Suffix**: All components follow the `[Name]Icon` convention (e.g., `SatelliteIcon`) for clarity and to avoid collision with standard HTML tags.
- **Dynamic Styling**: uses `currentColor` for fills/strokes, allowing icons to be styled with standard CSS `color` or Tailwind `text-*` utilities.
- **Sizing Control**: Standardized `width` and `height` props with sensible defaults.
- **Performance**: Fully tree-shakable ES modules.

## 🛠️ Build Process

We use a custom automated pipeline to handle icons:

1. **SVG Optimization**: Raw SVGs are processed to remove hardcoded colors, unnecessary metadata, and standard styling.
2. **SVGR Transformation**: optimized SVGs are converted into React components.
3. **Component Generation**: Components are written to `src/components/` with proper React and TypeScript boilerplate.
4. **Index Generation**: A central export file is created to facilitate clean imports.

### Adding New Icons
Simply drop your `.svg` file into the `svg/` directory and run:
```bash
npm run build
```

## 📦 Usage

```tsx
import { RocketIcon, SatelliteIcon } from "@org-design-system/icons";

function Dashboard() {
  return (
    <div className="text-zinc-50 flex gap-2">
      <RocketIcon className="text-blue-500" width={24} height={24} />
      <span>Mission Control</span>
    </div>
  );
}
```

---
*Precision tools for visual communication.*
npm package: @org-design-system/styles
Description: Design tokens for the @org-design-system
Latest version: 0.1.16

# @org-design-system/styles 🎨

The design token engine and foundational styling layer for the Antaris Design System.

## 🧱 What's Inside?

- **Semantic Tokens**: Abstracted variables for colors, spacing, typography, and effects (e.g., `bg-surface`, `text-primary`).
- **OKLCH Color Engine**: Our color system uses the OKLCH color space for perceptually uniform lightness and vibrant, consistent colors across displays.
- **CSS Variable Injection**: Automatically injects standard CSS variables into the `:root` pseudo-class.
- **Type-Safe Constants**: JavaScript and TypeScript exports for use in logical conditions or CSS-in-JS.

## ⚙️ Token Architecture

We utilize a **multi-layer** variable system:
1. **Pimitives**: Raw values (e.g., `green-500`, `radius-4`).
2. **Semantic**: Contextual variables mapping to primitives (e.g., `surface-success` -> `green-alpha-4`).
3. **Component-Specific**: Targeted overrides when necessary.

## 🛠️ Figma Integration

This package is designed to stay in sync with our Figma workspace.
```bash
# Sync tokens from Figma Variables API
npm run sync
```
*Note: Requires `FIGMA_ACCESS_TOKEN` and `FIGMA_FILE_KEY` environment variables.*

## 📦 Consumption

This package is marked as **private** and is intended to be consumed internally by the `@org-design-system/components` package or via the main `@org-design-system/core` metapackage.

### Direct Import (Internal Only)
```tsx
import { tokens } from "@org-design-system/styles";

const successColor = tokens.colors.success;
```

---
*The foundation of visual excellence.*