@yuva-devlab/ui 1.4.3 → 1.4.4

package/README.md

@@ -1,202 +1,162 @@
 # 📦 @yuva-devlab/ui
 
 [![npm version](https://img.shields.io/npm/v/@yuva-devlab/ui.svg)](https://www.npmjs.com/package/@yuva-devlab/ui)
-[![npm downloads](https://img.shields.io/npm/dm/@yuva-devlab/ui.svg)](https://www.npmjs.com/package/@yuva-devlab/ui)
 [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)
+[![React 19](https://img.shields.io/badge/React-19.x-61dafb.svg)](https://react.dev)
+[![TypeScript](https://img.shields.io/badge/TypeScript-5.x%20%7C%206.x-3178c6.svg)](https://www.typescriptlang.org)
 
-> A production-ready, fully-typed React component library built with Vanilla
-> Extract, featuring a natural design system and comprehensive accessibility
-> support.
+> Production-ready, fully-typed React component library engineered for the DevLab ecosystem. Built on accessible Radix UI primitives, powered by OKLCH CSS design tokens (`@yuva-devlab/tokens`), and fully compatible with Tailwind CSS 4.
+
+---
 
 ## Features
 
-- 🎨 **Natural Design System** - Organic color palettes inspired by Material
-  Design 3
-- 🔒 **Type-Safe** - Full TypeScript support with comprehensive type definitions
-- 🎭 **Zero-Runtime CSS** - Vanilla Extract compiles styles at build time
-- ♿ **Accessible** - Built on Radix UI primitives with ARIA compliance
-- 🧩 **Polymorphic** - Components support `as` prop for semantic flexibility
-- 🎯 **Tree-Shakeable** - Import only what you need
-- 📦 **Monorepo Architecture** - Clean separation of tokens, primitives, and
-  components
+- 🎨 **Multi-Brand Theme Architecture** - Seamless brand isolation across OrchestrAI, VitalAI, FinAI, Logs, and Portal.
+- ⚡ **Zero-Runtime Overhead** - Driven by standard CSS custom properties and modern OKLCH color spaces.
+- ♿ **Accessible by Default** - Built on Radix UI primitives with complete WAI-ARIA and keyboard navigation compliance.
+- 🧩 **56+ Core UI Components** - Buttons, Calendars, DatePickers, Drawers, Sheets, Sidebars, Menus, Modals, and more.
+- 🔒 **End-to-End Type Safety** - First-class TypeScript definitions with full polymorphic `asChild` composition support.
+- 📦 **Tree-Shakeable ESM & CJS** - Optimized builds producing clean dual artifacts.
+
+---
 
 ## Installation
 
 ```bash
+# pnpm (recommended)
+pnpm add @yuva-devlab/ui @yuva-devlab/tokens lucide-react
+
 # npm
-npm install @yuva-devlab/ui
+npm install @yuva-devlab/ui @yuva-devlab/tokens lucide-react
 
 # yarn
-yarn add @yuva-devlab/ui
-
-# pnpm
-pnpm add @yuva-devlab/ui
+yarn add @yuva-devlab/ui @yuva-devlab/tokens lucide-react
 ```
 
 ### Peer Dependencies
 
+Ensure your project has the required peer dependencies installed:
+
 ```bash
-# npm
-npm install react@^19.2.0 react-dom@^19.2.0
+pnpm add react@^19.0.0 react-dom@^19.0.0 sonner@^2.0.0
+```
 
-# yarn
-yarn add react@^19.2.0 react-dom@^19.2.0
+---
+
+## Quick Start
+
+### 1. Configure Styles
+
+In your application's root stylesheet (e.g. `globals.css` or `app.css`), import the token preset, desired brand theme, and component styles:
 
-# pnpm
-pnpm add react@^19.2.0 react-dom@^19.2.0
+```css
+@import "tailwindcss";
+@import "@yuva-devlab/tokens/preset.css";
+@import "@yuva-devlab/tokens/themes/orchestrai.css";
+@import "@yuva-devlab/ui/components.css";
 ```
 
-## Quick Start
+> **Tip:** You can import any theme preset from `@yuva-devlab/tokens/themes/*` (`orchestrai`, `vitalai`, `finai`, `logs`, `portal`).
+
+### 2. Render Components
 
 ```tsx
-import { Button, Input, Stack, Container } from "@yuva-devlab/ui";
-import "@yuva-devlab/ui/styles.css";
+import { Button, Card, DatePicker, Badge } from "@yuva-devlab/ui";
+import { Sparkles } from "lucide-react";
 
-function App() {
+export default function DashboardCard() {
   return (
-    <Container size="lg">
-      <Stack gap="md">
-        <Input label="Email" placeholder="you@example.com" type="email" />
-        <Button variant="primary" size="md">
-          Sign In
+    <Card className="p-6 max-w-md shadow-md">
+      <div className="flex items-center justify-between mb-4">
+        <h2 className="text-xl font-bold">DevLab Project</h2>
+        <Badge variant="default">Production</Badge>
+      </div>
+
+      <div className="space-y-4">
+        <DatePicker />
+        <Button variant="primary" className="w-full">
+          <Sparkles className="w-4 h-4 mr-2" />
+          Deploy Pipeline
         </Button>
-      </Stack>
-    </Container>
+      </div>
+    </Card>
   );
 }
 ```
 
-## Available Components
-
-### Form Components
-
-- **Button** - Primary, secondary, tertiary variants with loading states
-- **Input** - Text input with label, error states, and helper text
-
-### Typography
-
-- **Typography** - Polymorphic text component supporting h1-h6, p, span, etc.
-
-### Layout Components
+---
 
-- **Box** - Polymorphic container with spacing utilities
-- **Flex** - Flexbox layout with alignment and gap props
-- **Grid** - CSS Grid layout with responsive columns
-- **Stack** - Vertical/horizontal stacking with consistent spacing
-- **Container** - Responsive max-width wrapper (sm, md, lg, xl, 2xl)
+## Multi-Brand Theming
 
-### Coming Soon
+DevLab UI supports multi-brand switching at runtime using `data-brand` and `data-theme` HTML attributes:
 
-- Select (Radix UI based)
-- Switch (Radix UI based)
-- Checkbox (Radix UI based)
-- Radio (Radix UI based)
-- InputNumber
+```html
+<!-- Switch to VitalAI Athletic Theme with Dark Mode -->
+<html data-brand="vitalai" class="dark">
+  ...
+</html>
+```
 
-## Component Examples
+### Supported Brand Themes
 
-### Button
+| Brand Key    | Theme Name        | Primary Aesthetic         | Token Import                                |
+| :----------- | :---------------- | :------------------------ | :------------------------------------------ |
+| `orchestrai` | **OrchestrAI**    | Midnight Neon Violet      | `@yuva-devlab/tokens/themes/orchestrai.css` |
+| `vitalai`    | **VitalAI**       | Athletic Volt Kinetic     | `@yuva-devlab/tokens/themes/vitalai.css`    |
+| `finai`      | **FinAI**         | High-Finance Emerald      | `@yuva-devlab/tokens/themes/finai.css`      |
+| `logs`       | **DevLab Logs**   | High-Density Matrix Amber | `@yuva-devlab/tokens/themes/logs.css`       |
+| `portal`     | **DevLab Portal** | Enterprise Modern Indigo  | `@yuva-devlab/tokens/themes/portal.css`     |
 
-```tsx
-import { Button } from "@yuva-devlab/ui";
+---
 
-// Variants
-<Button variant="primary">Primary Action</Button>
-<Button variant="secondary">Secondary Action</Button>
-<Button variant="tertiary">Tertiary Action</Button>
+## Component Catalog (56 Components)
 
-// Sizes
-<Button size="sm">Small</Button>
-<Button size="md">Medium</Button>
-<Button size="lg">Large</Button>
+### General & Layout
 
-// States
-<Button loading>Loading...</Button>
-<Button disabled>Disabled</Button>
+- **Button**, **CopyButton**, **Card**, **MetricCard**, **SecretRevealCard**, **Badge**, **StatusBadge**, **StatusChip**, **Separator**, **Skeleton**, **LoadingState**, **AspectRatio**, **ScrollArea**, **Resizable**
 
-// Polymorphic
-<Button as="a" href="/home">Link Button</Button>
-```
+### Form & Data Entry
 
-### Layout System
+- **Input**, **Textarea**, **Checkbox**, **Switch**, **Slider**, **RadioGroup**, **Select**, **SearchableSelect**, **DatePicker**, **Calendar**, **InputOTP**, **Toggle**, **ToggleGroup**, **Form**
 
-```tsx
-import { Container, Stack, Flex, Box } from "@yuva-devlab/ui";
-
-<Container size="xl">
-  <Stack gap="lg">
-    <Flex align="center" justify="between">
-      <Box p="md">Logo</Box>
-      <Box>Navigation</Box>
-    </Flex>
-
-    <Grid cols={{ base: 1, md: 2, lg: 3 }} gap="md">
-      <Box p="lg">Card 1</Box>
-      <Box p="lg">Card 2</Box>
-      <Box p="lg">Card 3</Box>
-    </Grid>
-  </Stack>
-</Container>;
-```
+### Navigation
 
-## Styling & Brand Theming
+- **Sidebar**, **NavigationMenu**, **Menubar**, **Breadcrumb**, **Tabs**, **Pagination**
 
-### 1. Global Styles Setup
+### Overlays & Dialogs
 
-Import the UI stylesheet in your root layout:
+- **Dialog**, **AlertDialog**, **ConfirmDialog**, **Drawer**, **Sheet**, **Popover**, **Tooltip**, **HoverCard**, **DropdownMenu**, **ContextMenu**
 
-```tsx
-import "@yuva-devlab/ui/styles.css";
-```
+### Feedback & Display
 
-Or import specific brand themes directly:
+- **Alert**, **Progress**, **Toaster** (Sonner integration), **Avatar**, **Table**, **Accordion**, **Collapsible**, **Carousel**, **Chart**, **Command**
 
-```css
-@import "@yuva-devlab/ui/styles.css";
-@import "@yuva-devlab/ui/themes/finai.css";
-```
+---
 
-### 2. Brand & Theme Provider (`ConfigProvider`)
+## TypeScript & Polymorphic Support
 
-Wrap your application with `ConfigProvider` (or `ThemeProvider`) and pass your `brand`:
+All components export full TypeScript definitions and support polymorphic composition via the `asChild` prop:
 
 ```tsx
-import { ConfigProvider } from "@yuva-devlab/ui";
+import Link from "next/link";
+import { Button } from "@yuva-devlab/ui";
 
-export function RootLayout({ children }: { children: React.ReactNode }) {
-  return (
-    <ConfigProvider brand="finai" defaultTheme="system">
-      {children}
-    </ConfigProvider>
-  );
-}
+<Button asChild variant="secondary">
+  <Link href="/dashboard">Navigate to Dashboard</Link>
+</Button>;
 ```
 
-The provider sets the appropriate `data-brand` and `data-theme` attributes on `<html>`, instantly activating the scoped design tokens for that brand without loading or exposing styles of other brands!
-
 ---
 
-## Development
+## Documentation & Live Previews
 
-```bash
-# Install dependencies
-pnpm install
+Explore the interactive component playground, live documentation, and API references at:
 
-# Build the library
-pnpm --filter @yuva-devlab/ui build
+- **Documentation**: [https://github.com/yuvadevlab/devlab-shared](https://github.com/yuvadevlab/devlab-shared)
+- **Repository**: [https://github.com/yuvadevlab/devlab-shared](https://github.com/yuvadevlab/devlab-shared)
 
-# Run tests
-pnpm --filter @yuva-devlab/ui test
-
-# Type check
-pnpm --filter @yuva-devlab/ui typecheck
-```
-
-## Documentation
-
-- **Storybook**: Run `pnpm dev:docs` to view interactive component documentation
-- **Playground**: Run `pnpm dev:playground` to test components in a live
+---
 
 ## License
 
-MIT © Yuva Devlab
+MIT © [Yuva DevLab](https://github.com/yuvadevlab)

package/dist/components/calendar/calendar.css

@@ -0,0 +1,238 @@
+.dl-calendar {
+  --cell-size: 2rem;
+  display: inline-block;
+  width: fit-content;
+  max-width: 100%;
+  padding: 0.75rem;
+  box-sizing: border-box;
+  color: var(--foreground);
+}
+
+.dl-calendar .rdp-root {
+  width: fit-content;
+  margin: 0 auto;
+}
+
+.dl-calendar .rdp-months {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  width: calc(var(--cell-size, 2rem) * 7);
+  box-sizing: border-box;
+}
+
+.dl-calendar .rdp-month {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  width: 100%;
+}
+
+.dl-calendar .rdp-month_caption {
+  position: relative;
+  display: flex;
+  height: var(--cell-size, 2rem);
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+  padding: 0 var(--cell-size, 2rem);
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--foreground);
+  box-sizing: border-box;
+}
+
+.dl-calendar .rdp-caption_label {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--foreground);
+  line-height: 1;
+}
+
+/* Navigation prev / next arrows */
+.dl-calendar .rdp-nav {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  height: var(--cell-size, 2rem);
+  pointer-events: none;
+}
+
+.dl-calendar .rdp-button_previous,
+.dl-calendar .rdp-button_next {
+  pointer-events: auto;
+  width: var(--cell-size, 2rem) !important;
+  height: var(--cell-size, 2rem) !important;
+  min-width: var(--cell-size, 2rem) !important;
+  padding: 0 !important;
+  display: inline-flex !important;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-md, 0.375rem) !important;
+  border: 1px solid var(--border);
+  background: var(--background);
+  color: var(--muted-foreground);
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.dl-calendar .rdp-button_previous:hover,
+.dl-calendar .rdp-button_next:hover {
+  background-color: var(--accent);
+  color: var(--accent-foreground);
+}
+
+.dl-calendar .rdp-button_previous svg,
+.dl-calendar .rdp-button_next svg {
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+}
+
+/* Grid Table */
+.dl-calendar table.rdp-month_grid,
+.dl-calendar table {
+  width: 100%;
+  border-collapse: collapse;
+  table-layout: fixed;
+  margin: 0;
+}
+
+/* Weekday header cells */
+.dl-calendar th.rdp-weekday,
+.dl-calendar th {
+  width: calc(100% / 7);
+  height: var(--cell-size, 2rem);
+  text-align: center;
+  vertical-align: middle;
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--muted-foreground);
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+}
+
+/* Day table cells */
+.dl-calendar td.rdp-day,
+.dl-calendar td {
+  width: calc(100% / 7);
+  height: var(--cell-size, 2rem);
+  padding: 2px !important;
+  margin: 0;
+  text-align: center;
+  vertical-align: middle;
+  background: transparent !important;
+  background-color: transparent !important;
+  border: none !important;
+  box-sizing: border-box;
+}
+
+/* Day Button inside td */
+.dl-calendar button.rdp-day_button,
+.dl-calendar .dl-calendar__day-button {
+  width: 100% !important;
+  height: 100% !important;
+  min-width: 0 !important;
+  min-height: 0 !important;
+  margin: 0 auto !important;
+  padding: 0 !important;
+  display: inline-flex !important;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-md, 0.375rem) !important;
+  border: none !important;
+  font-size: 0.875rem;
+  font-weight: 400;
+  color: var(--foreground);
+  background: transparent;
+  cursor: pointer;
+  box-sizing: border-box;
+  transition: all 0.15s ease;
+}
+
+.dl-calendar button.rdp-day_button:hover:not(:disabled) {
+  background-color: var(--accent) !important;
+  color: var(--accent-foreground) !important;
+}
+
+/* Selected Date Highlight */
+.dl-calendar td[aria-selected="true"] button.rdp-day_button,
+.dl-calendar td.rdp-selected button.rdp-day_button,
+.dl-calendar button.rdp-day_button[data-selected="true"],
+.dl-calendar button.rdp-day_button[data-selected-single="true"] {
+  background-color: var(--primary) !important;
+  color: var(--primary-foreground) !important;
+  border-radius: var(--radius-md, 0.375rem) !important;
+  font-weight: 600;
+  box-shadow: 0 1px 2px rgb(0 0 0 / 0.12);
+}
+
+.dl-calendar td[aria-selected="true"] button.rdp-day_button:hover,
+.dl-calendar td.rdp-selected button.rdp-day_button:hover,
+.dl-calendar button.rdp-day_button[data-selected="true"]:hover,
+.dl-calendar button.rdp-day_button[data-selected-single="true"]:hover {
+  background-color: color-mix(in oklch, var(--primary) 88%, black) !important;
+  color: var(--primary-foreground) !important;
+}
+
+/* Today indicator (when not selected) */
+.dl-calendar
+  td.rdp-today:not([aria-selected="true"]):not(.rdp-selected)
+  button.rdp-day_button {
+  background-color: color-mix(
+    in oklch,
+    var(--secondary) 60%,
+    transparent
+  ) !important;
+  color: var(--foreground) !important;
+  font-weight: 600;
+  border: 1px solid var(--border) !important;
+}
+
+/* Range selection styles */
+.dl-calendar td.rdp-range_start {
+  background-color: var(--accent) !important;
+  border-top-left-radius: var(--radius-md, 0.375rem) !important;
+  border-bottom-left-radius: var(--radius-md, 0.375rem) !important;
+}
+
+.dl-calendar td.rdp-range_middle {
+  background-color: var(--accent) !important;
+  border-radius: 0 !important;
+}
+
+.dl-calendar td.rdp-range_middle button.rdp-day_button {
+  background: transparent !important;
+  color: var(--accent-foreground) !important;
+  border-radius: 0 !important;
+}
+
+.dl-calendar td.rdp-range_end {
+  background-color: var(--accent) !important;
+  border-top-right-radius: var(--radius-md, 0.375rem) !important;
+  border-bottom-right-radius: var(--radius-md, 0.375rem) !important;
+}
+
+.dl-calendar td.rdp-outside button.rdp-day_button {
+  color: var(--muted-foreground) !important;
+  opacity: 0.35;
+}
+
+.dl-calendar button.rdp-day_button:disabled {
+  color: var(--muted-foreground) !important;
+  opacity: 0.25;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.dl-calendar td.rdp-hidden {
+  visibility: hidden;
+  pointer-events: none;
+}

package/dist/components/copy-button/copy-button.css

@@ -13,6 +13,8 @@
   cursor: pointer;
   transition: all 0.15s ease;
   user-select: none;
+  white-space: nowrap;
+  flex-shrink: 0;
 }
 
 .dl-copy-button:hover {

package/dist/components/date-picker/date-picker.css

@@ -24,7 +24,13 @@
   flex-shrink: 0;
 }
 
-.dl-date-picker-content {
-  width: auto;
-  padding: 0;
+.dl-date-picker-content,
+.dl-popover.dl-date-picker-content {
+  width: fit-content !important;
+  max-width: fit-content !important;
+  padding: 0 !important;
+  box-shadow: 0 4px 20px rgb(0 0 0 / 0.15);
+  border-radius: var(--radius-lg, 0.5rem);
+  border: 1px solid var(--border);
+  background-color: var(--popover);
 }

package/dist/components/popover/popover.css

@@ -15,3 +15,8 @@
 .dl-popover[data-state="closed"] {
   animation: dl-fade-out 150ms ease;
 }
+
+.dl-popover.dl-date-picker-content {
+  width: auto;
+  padding: 0;
+}

package/dist/components/secret-reveal-card/secret-reveal-card.css

@@ -26,6 +26,7 @@
   border: 1px solid var(--border);
   border-radius: calc(var(--radius, 0.5rem) - 2px);
   padding: 0.5rem 0.75rem;
+  flex-wrap: nowrap;
 }
 
 .dl-secret-reveal__code {
@@ -34,4 +35,6 @@
   color: var(--primary);
   word-break: break-all;
   user-select: all;
+  min-width: 0;
+  flex: 1;
 }