auxalia-ui-kit 1.0.0

package/README.md

@@ -0,0 +1,456 @@
+# Auxalia UI — `auxalia-ui`
+
+A modern, accessible React component library built with **TypeScript**, **Radix UI**, and **Tailwind CSS v4**. Designed for seamless integration into large-scale projects.
+
+[![npm version](https://img.shields.io/npm/v/auxalia-ui)](https://www.npmjs.com/package/auxalia-ui)
+[![License: ISC](https://img.shields.io/badge/License-ISC-blue.svg)](https://opensource.org/licenses/ISC)
+
+---
+
+## Table of Contents
+
+- [Features](#features)
+- [Requirements](#requirements)
+- [Installation](#installation)
+- [Setup](#setup)
+- [Components](#components)
+- [Tailwind Preset](#tailwind-preset)
+- [Design Tokens](#design-tokens)
+- [Development](#development)
+- [License](#license)
+
+---
+
+## Features
+
+- **Customizable** — CVA-powered variants for predictable, type-safe styling
+- **Accessible** — Built on Radix UI primitives, WCAG compliant
+- **Tree-Shakeable** — ESM + CJS dual output for optimal bundle size
+- **Type-Safe** — Full TypeScript with strict types
+- **Dark Mode** — All components support light/dark themes via CSS class
+- **Tailwind v4** — Ships a Tailwind preset with Auxalia brand tokens
+- **Storybook** — Interactive component explorer included
+
+---
+
+## Requirements
+
+| Dependency  | Version |
+| ----------- | ------- |
+| React       | ^19.2.0 |
+| react-dom   | ^19.2.0 |
+| tailwindcss | ^4.0.0  |
+
+---
+
+## Installation
+
+```bash
+npm install auxalia-ui
+```
+
+---
+
+## Setup
+
+### 1. Import styles
+
+In your app's entry CSS file:
+
+```css
+@import 'auxalia-ui/styles.css';
+```
+
+Or import the design tokens separately:
+
+```css
+@import 'auxalia-ui/tokens.css';
+```
+
+### 2. Configure Tailwind v4
+
+In your CSS config file (e.g. `app.css`):
+
+```css
+@import 'tailwindcss';
+@import 'auxalia-ui/tokens.css';
+```
+
+Or use the Tailwind preset in your `tailwind.config.ts`:
+
+```ts
+import auxaliaPreset from 'auxalia-ui/tailwind.preset';
+
+export default {
+  presets: [auxaliaPreset],
+};
+```
+
+### 3. Use components
+
+```tsx
+import { Button } from 'auxalia-ui';
+
+export default function App() {
+  return (
+    <Button variant="default" color="primary">
+      Click me
+    </Button>
+  );
+}
+```
+
+---
+
+## Components
+
+### Button
+
+```tsx
+import { Button } from 'auxalia-ui';
+
+<Button variant="default" color="primary" size="default">Save</Button>
+<Button variant="outline" color="secondary">Cancel</Button>
+<Button variant="ghost" color="destructive" size="sm">Delete</Button>
+```
+
+| Prop      | Type                                                                 | Default     |
+| --------- | -------------------------------------------------------------------- | ----------- |
+| `variant` | `'default' \| 'outline' \| 'ghost' \| 'link'`                        | `'default'` |
+| `color`   | `'default' \| 'primary' \| 'secondary' \| 'accent' \| 'destructive'` | `'primary'` |
+| `size`    | `'sm' \| 'default' \| 'lg' \| 'icon'`                                | `'default'` |
+| `asChild` | `boolean`                                                            | `false`     |
+
+---
+
+### Card
+
+```tsx
+import { Card } from 'auxalia-ui';
+
+<Card variant="default">Content</Card>
+<Card variant="elevated">Elevated</Card>
+<Card variant="outlined">Outlined</Card>
+```
+
+| Prop      | Type                                                                            | Default     |
+| --------- | ------------------------------------------------------------------------------- | ----------- |
+| `variant` | `'default' \| 'outlined' \| 'elevated' \| 'success' \| 'accent' \| 'secondary'` | `'default'` |
+
+---
+
+### Input
+
+```tsx
+import { Input } from 'auxalia-ui';
+
+<Input placeholder="Enter text..." />
+<Input size="lg" variant="error" />
+```
+
+| Prop      | Type                   | Default     |
+| --------- | ---------------------- | ----------- |
+| `variant` | `'default' \| 'error'` | `'default'` |
+| `size`    | `'sm' \| 'md' \| 'lg'` | `'md'`      |
+
+---
+
+### Select
+
+```tsx
+import {
+  Select,
+  SelectTrigger,
+  SelectValue,
+  SelectContent,
+  SelectItem,
+} from 'auxalia-ui';
+
+<Select>
+  <SelectTrigger variant="primary" size="md">
+    <SelectValue placeholder="Pick one" />
+  </SelectTrigger>
+  <SelectContent>
+    <SelectItem value="a">Option A</SelectItem>
+    <SelectItem value="b">Option B</SelectItem>
+  </SelectContent>
+</Select>;
+```
+
+**SelectTrigger variants:** `'default' | 'primary' | 'secondary' | 'accent' | 'destructive' | 'error'`
+
+**SelectTrigger sizes:** `'sm' | 'md' | 'lg'`
+
+**SelectItem variants:** `'default' | 'primary' | 'secondary' | 'accent' | 'destructive'`
+
+---
+
+### DropdownMenu
+
+```tsx
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuLabel,
+} from 'auxalia-ui';
+
+<DropdownMenu>
+  <DropdownMenuTrigger>Open</DropdownMenuTrigger>
+  <DropdownMenuContent>
+    <DropdownMenuLabel>Actions</DropdownMenuLabel>
+    <DropdownMenuSeparator />
+    <DropdownMenuItem variant="default">Edit</DropdownMenuItem>
+    <DropdownMenuItem variant="destructive">Delete</DropdownMenuItem>
+  </DropdownMenuContent>
+</DropdownMenu>;
+```
+
+**DropdownMenuItem variants:** `'default' | 'primary' | 'secondary' | 'accent' | 'destructive'`
+
+Also exports: `DropdownMenuCheckboxItem`, `DropdownMenuRadioItem`, `DropdownMenuRadioGroup`,
+`DropdownMenuGroup`, `DropdownMenuSub`, `DropdownMenuSubTrigger`, `DropdownMenuSubContent`,
+`DropdownMenuShortcut`, `DropdownMenuPortal`
+
+---
+
+### Tabs
+
+```tsx
+import { Tabs, TabsList, TabsTrigger, TabsContent } from 'auxalia-ui';
+
+const [tab, setTab] = useState('overview');
+
+<Tabs value={tab} onValueChange={setTab}>
+  <TabsList>
+    <TabsTrigger value="overview">Overview</TabsTrigger>
+    <TabsTrigger value="settings">Settings</TabsTrigger>
+  </TabsList>
+  <TabsContent value="overview">Overview content</TabsContent>
+  <TabsContent value="settings">Settings content</TabsContent>
+</Tabs>;
+```
+
+---
+
+### Text
+
+```tsx
+import { Text } from 'auxalia-ui';
+
+<Text size="xl" align="center">
+  Hello World
+</Text>;
+```
+
+| Prop    | Type                                             | Default  |
+| ------- | ------------------------------------------------ | -------- |
+| `size`  | `'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl' \| '3xl'` | `'md'`   |
+| `align` | `'left' \| 'center' \| 'right'`                  | `'left'` |
+
+---
+
+### Field (Form Wrapper)
+
+```tsx
+import { Field, FieldLabel, FieldDescription, FieldError } from 'auxalia-ui';
+
+<Field orientation="vertical">
+  <FieldLabel>Email</FieldLabel>
+  <Input type="email" />
+  <FieldDescription>We'll never share your email.</FieldDescription>
+  <FieldError errors={['Email is required']} />
+</Field>;
+```
+
+**Orientation:** `'vertical'` (default) | `'horizontal'` | `'responsive'`
+
+Also exports: `FieldContent`, `FieldGroup`, `FieldSet`, `FieldLegend`, `FieldSeparator`, `FieldTitle`
+
+---
+
+### Tooltip
+
+```tsx
+import { Tooltip, TooltipTrigger, TooltipContent } from 'auxalia-ui';
+
+<Tooltip>
+  <TooltipTrigger>Hover me</TooltipTrigger>
+  <TooltipContent>Helpful hint</TooltipContent>
+</Tooltip>;
+```
+
+Also exports: `TooltipProvider`
+
+---
+
+### Popover
+
+```tsx
+import { Popover, PopoverTrigger, PopoverContent } from 'auxalia-ui';
+
+<Popover>
+  <PopoverTrigger>Open</PopoverTrigger>
+  <PopoverContent>Popover content here</PopoverContent>
+</Popover>;
+```
+
+Also exports: `PopoverAnchor`
+
+---
+
+### Pagination
+
+```tsx
+import {
+  Pagination,
+  PaginationContent,
+  PaginationItem,
+  PaginationLink,
+  PaginationPrevious,
+  PaginationNext,
+  PaginationEllipsis,
+} from 'auxalia-ui';
+
+<Pagination>
+  <PaginationContent>
+    <PaginationItem>
+      <PaginationPrevious href="#" />
+    </PaginationItem>
+    <PaginationItem>
+      <PaginationLink href="#" isActive>
+        1
+      </PaginationLink>
+    </PaginationItem>
+    <PaginationItem>
+      <PaginationLink href="#">2</PaginationLink>
+    </PaginationItem>
+    <PaginationItem>
+      <PaginationEllipsis />
+    </PaginationItem>
+    <PaginationItem>
+      <PaginationNext href="#" />
+    </PaginationItem>
+  </PaginationContent>
+</Pagination>;
+```
+
+---
+
+### Collapsible
+
+```tsx
+import {
+  CollapsibleRoot,
+  CollapsibleTrigger,
+  CollapsibleContent,
+} from 'auxalia-ui';
+
+<CollapsibleRoot>
+  <CollapsibleTrigger>Toggle</CollapsibleTrigger>
+  <CollapsibleContent>Hidden content</CollapsibleContent>
+</CollapsibleRoot>;
+```
+
+---
+
+### Label
+
+```tsx
+import { Label } from 'auxalia-ui';
+
+<Label htmlFor="email">Email address</Label>;
+```
+
+---
+
+### TableView
+
+A full-featured controlled data table with sorting, filtering, pagination, and search.
+
+```tsx
+import { TableView } from 'auxalia-ui';
+import type { TableField, TableConfig } from 'auxalia-ui';
+
+const fields: TableField[] = [
+  { key: 'name', label: 'Name', sortable: true },
+  { key: 'email', label: 'Email' },
+];
+
+<TableView
+  data={rows}
+  fields={fields}
+  config={config}
+  queryParams={queryParams}
+  onQueryChange={setQueryParams}
+/>;
+```
+
+---
+
+## Tailwind Preset
+
+The preset includes the full Auxalia brand token system:
+
+```ts
+import auxaliaPreset from 'auxalia-ui/tailwind.preset';
+
+export default {
+  presets: [auxaliaPreset],
+};
+```
+
+**Brand colors available in Tailwind utilities:**
+
+| Token              | Value        | Usage                   |
+| ------------------ | ------------ | ----------------------- |
+| `primary`          | #A7D500      | Auxalia Green           |
+| `secondary`        | #3e6897      | Auxalia Blue            |
+| `accent`           | #0f868b      | Auxalia Petrol          |
+| `destructive`      | #dc2626      | Errors / danger         |
+| `auxalia-green-*`  | 50–900 scale | Extended green palette  |
+| `auxalia-blue-*`   | 50–900 scale | Extended blue palette   |
+| `auxalia-petrol-*` | 50–900 scale | Extended petrol palette |
+
+**Dark mode:** configured via the `dark` class on the root element.
+
+---
+
+## Design Tokens
+
+Tokens are exposed as CSS custom properties and can be used independently:
+
+```css
+@import 'auxalia-ui/tokens.css';
+```
+
+```css
+/* Example usage in your CSS */
+.my-element {
+  color: rgb(var(--color-primary));
+  background: rgb(var(--color-surface));
+}
+```
+
+---
+
+## Development
+
+```bash
+# Install dependencies
+npm install
+
+# Run Storybook (port 6006)
+npm run storybook
+
+# Build static Storybook
+npm run build-storybook
+```
+
+---
+
+## License
+
+ISC — [Auxalia](https://github.com/Artur-Badalyan/auxalia-ui)

package/dist/chunk-O6RHMFJG.js

@@ -0,0 +1,165 @@
+// src/tailwind.preset.ts
+var auxaliaColors = {
+  // Primary Brand Color - Fresh Green
+  "auxalia-green": {
+    50: "#f8fbf0",
+    100: "#f0f7e1",
+    200: "#ddf0c0",
+    300: "#c3e88a",
+    400: "#a7d500",
+    // Brand primary
+    500: "#93b800",
+    600: "#749400",
+    700: "#5a7600",
+    800: "#3d5000",
+    900: "#1f2800"
+  },
+  // Secondary Brand Color - Dark Blue
+  "auxalia-blue": {
+    50: "#f0f4f8",
+    100: "#e0eaf3",
+    200: "#c0d6e6",
+    300: "#8fb3d1",
+    400: "#5c8fb5",
+    500: "#3e6897",
+    // Brand secondary
+    600: "#2d5080",
+    700: "#1f3860",
+    800: "#142a47",
+    900: "#0a1628"
+  },
+  // Accent - Petrol Green
+  "auxalia-petrol": {
+    50: "#f0fbfc",
+    100: "#dff8f9",
+    200: "#bef1f3",
+    300: "#7fe6eb",
+    400: "#3fd9e1",
+    500: "#0f868b",
+    // Auxalia petrol
+    600: "#0a646b",
+    700: "#064952",
+    800: "#033539",
+    900: "#011f22"
+  },
+  // Supporting Colors
+  "auxalia-orange": "#dc6b39",
+  "auxalia-yellow": "#cfd12d",
+  "auxalia-red": "#93383a",
+  "auxalia-cyan": "#abbfbd"
+};
+var preset = {
+  darkMode: "class",
+  theme: {
+    extend: {
+      fontFamily: {
+        display: ['"Weissenhof Grotesk"', '"Calibri"', "sans-serif"],
+        body: ['"Weissenhof Grotesk"', '"Calibri"', "sans-serif"]
+      },
+      colors: {
+        // Primary using Auxalia Green — RGB channels enable Tailwind opacity modifiers (e.g. bg-primary/20)
+        primary: "rgb(var(--color-primary) / <alpha-value>)",
+        "primary-foreground": "var(--color-primary-foreground)",
+        "primary-hover": "var(--color-primary-hover)",
+        // Secondary using Auxalia Blue
+        secondary: "rgb(var(--color-secondary) / <alpha-value>)",
+        "secondary-foreground": "var(--color-secondary-foreground)",
+        "secondary-hover": "var(--color-secondary-hover)",
+        // Accent using Auxalia Petrol
+        accent: "rgb(var(--color-accent) / <alpha-value>)",
+        "accent-foreground": "var(--color-accent-foreground)",
+        surface: "var(--color-surface)",
+        "surface-hover": "var(--color-surface-hover)",
+        "surface-foreground": "var(--color-surface-foreground)",
+        destructive: "rgb(var(--color-destructive) / <alpha-value>)",
+        "destructive-hover": "var(--color-destructive-hover)",
+        "destructive-foreground": "var(--color-destructive-foreground)",
+        // Auxalia specific colors for direct use
+        "auxalia-green": auxaliaColors["auxalia-green"],
+        "auxalia-blue": auxaliaColors["auxalia-blue"],
+        "auxalia-petrol": auxaliaColors["auxalia-petrol"]
+      },
+      textColor: {
+        primary: "var(--color-text)",
+        secondary: "var(--color-text-secondary)",
+        muted: "var(--color-text-muted)"
+      },
+      backgroundColor: {
+        hero: "var(--color-bg-hero)",
+        card: "var(--surface-card)",
+        cardHover: "var(--surface-card-hover)"
+      },
+      backgroundImage: {
+        "gradient-radial-green": "radial-gradient(circle at 20% 20%, rgba(167, 213, 0, 0.15), transparent 35%)",
+        "gradient-radial-blue": "radial-gradient(circle at 80% 0%, rgba(62, 104, 151, 0.1), transparent 40%)",
+        "gradient-glow": "linear-gradient(to bottom right, rgba(6, 182, 212, 0.1), transparent, rgba(255, 255, 255, 0.05))"
+      }
+    }
+  }
+};
+preset.safelist = [
+  // ─── Button: filled (default) ──────────────────────────────────────────────
+  "bg-primary",
+  "bg-secondary",
+  "bg-accent",
+  "bg-destructive",
+  "text-primary-foreground",
+  "text-secondary-foreground",
+  "text-accent-foreground",
+  "text-destructive-foreground",
+  "hover:bg-primary-hover",
+  "hover:bg-secondary-hover",
+  "hover:bg-destructive-hover",
+  "shadow-sm",
+  // ─── Button: outline ───────────────────────────────────────────────────────
+  "border-2",
+  "border-primary",
+  "border-secondary",
+  "border-accent",
+  "border-destructive",
+  "text-primary",
+  "text-secondary",
+  "text-accent",
+  "text-destructive",
+  "hover:bg-primary",
+  "hover:bg-secondary",
+  "hover:bg-accent",
+  "hover:bg-destructive",
+  "hover:text-primary-foreground",
+  "hover:text-secondary-foreground",
+  "hover:text-accent-foreground",
+  "hover:text-destructive-foreground",
+  "dark:border-primary",
+  "dark:text-primary",
+  // ─── Button: ghost ─────────────────────────────────────────────────────────
+  "hover:bg-primary/10",
+  "dark:hover:bg-primary/20",
+  "hover:bg-secondary/10",
+  "hover:bg-accent/10",
+  "hover:bg-destructive/10",
+  // ─── Button: link ──────────────────────────────────────────────────────────
+  "underline",
+  "hover:text-primary-hover",
+  "hover:text-secondary-hover",
+  // ─── Card: border opacity ──────────────────────────────────────────────────
+  "border-primary/10",
+  "border-primary/20",
+  "border-primary/30",
+  "border-primary/40",
+  "border-primary/50",
+  "hover:border-primary/20",
+  "hover:border-primary/50",
+  "dark:border-primary/20",
+  "dark:border-primary/40",
+  "border-accent/10",
+  // ─── Card: background opacity ──────────────────────────────────────────────
+  "bg-primary/10",
+  "bg-primary/20",
+  "hover:shadow-md",
+  "hover:shadow-xl"
+];
+var tailwind_preset_default = preset;
+
+export {
+  tailwind_preset_default
+};