@abhir9/pd-design-system 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,42 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [0.1.0] - 2026-01-XX
+
+### Added
+
+- Initial release of @pd-design/system
+- Token system (base and semantic tokens)
+- Theme system with CSS variables
+- Headless primitives layer
+- Adapter layer (shadcn support)
+- Public components:
+  - Button
+  - Input
+  - Select
+  - Checkbox
+  - Radio
+  - Switch
+  - Modal
+  - Tooltip
+  - Dropdown
+  - Toast
+- Storybook integration
+- Full TypeScript support
+- Light/Dark mode support
+- Theme provider
+- Configuration API
+
+### Features
+
+- Props-only API (no className required)
+- Full TypeScript autocomplete
+- Variant system (variant, intent, size, state)
+- Adapter switching without app changes
+- Semantic versioning
+- Tree-shakable build
+- ESM + CJS output

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 PD Design System
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,275 @@
+# @pd-design/system
+
+Production-grade design system with adapter layer support. Built for teams who need a flexible, type-safe component library that can work with different UI engines without changing application code.
+
+## Philosophy
+
+This design system follows a **headless-first, adapter-based architecture**:
+
+- **Props-only API**: Consumers use only props and variants, no className required
+- **Full TypeScript**: Complete autocomplete and type safety
+- **Adapter Layer**: Switch between UI engines (shadcn, Material, etc.) without app changes
+- **Semantic Tokens**: Intent-based design tokens that work across themes
+- **Framework Agnostic**: Design tokens and semantics are framework-agnostic
+
+## Installation
+
+```bash
+npm install @pd-design/system
+```
+
+## Quick Start
+
+```tsx
+import { ThemeProvider, Button, Input } from '@pd-design/system';
+import '@pd-design/system/styles';
+
+function App() {
+  return (
+    <ThemeProvider adapter="shadcn" theme="base" mode="light">
+      <Button variant="primary" intent="danger" size="md">
+        Delete
+      </Button>
+      <Input placeholder="Enter text..." size="md" />
+    </ThemeProvider>
+  );
+}
+```
+
+## Configuration
+
+Configure the design system globally:
+
+```tsx
+import { setDesignSystemConfig } from '@pd-design/system';
+
+// Set adapter (shadcn or material)
+setDesignSystemConfig({
+  adapter: 'shadcn',
+  theme: 'base',
+  mode: 'light',
+});
+```
+
+Or use the `ThemeProvider`:
+
+```tsx
+<ThemeProvider adapter="shadcn" theme="base" mode="light">
+  {/* Your app */}
+</ThemeProvider>
+```
+
+## Components
+
+### Button
+
+```tsx
+<Button
+  variant="primary"    // primary | secondary | ghost | outline
+  intent="danger"      // primary | success | warning | danger | neutral
+  size="md"            // sm | md | lg
+  loading={false}
+  disabled={false}
+>
+  Click me
+</Button>
+```
+
+### Input
+
+```tsx
+<Input
+  size="md"            // sm | md | lg
+  error={false}
+  disabled={false}
+  placeholder="Enter text..."
+/>
+```
+
+### Select
+
+```tsx
+<Select placeholder="Choose an option..." size="md">
+  <SelectItem value="1">Option 1</SelectItem>
+  <SelectItem value="2">Option 2</SelectItem>
+</Select>
+```
+
+### Checkbox
+
+```tsx
+<Checkbox
+  checked={isChecked}
+  onCheckedChange={setIsChecked}
+  size="md"
+/>
+```
+
+### Radio
+
+```tsx
+<RadioGroup value={value} onValueChange={setValue}>
+  <div className="flex items-center space-x-2">
+    <RadioItem value="option1" id="r1" />
+    <label htmlFor="r1">Option 1</label>
+  </div>
+</RadioGroup>
+```
+
+### Switch
+
+```tsx
+<Switch
+  checked={isOn}
+  onCheckedChange={setIsOn}
+  size="md"
+/>
+```
+
+### Modal
+
+```tsx
+<Modal open={open} onOpenChange={setOpen}>
+  <ModalTrigger asChild>
+    <Button>Open Modal</Button>
+  </ModalTrigger>
+  <ModalContent>
+    <ModalHeader>
+      <ModalTitle>Title</ModalTitle>
+      <ModalDescription>Description</ModalDescription>
+    </ModalHeader>
+    <ModalClose asChild>
+      <Button>Close</Button>
+    </ModalClose>
+  </ModalContent>
+</Modal>
+```
+
+### Tooltip
+
+```tsx
+<Tooltip content="This is a tooltip" side="top">
+  <Button>Hover me</Button>
+</Tooltip>
+```
+
+### Dropdown
+
+```tsx
+<Dropdown trigger={<Button>Menu</Button>}>
+  <DropdownItem>Profile</DropdownItem>
+  <DropdownItem>Settings</DropdownItem>
+  <DropdownSeparator />
+  <DropdownItem>Logout</DropdownItem>
+</Dropdown>
+```
+
+### Toast
+
+```tsx
+<ToastProvider>
+  <Toast
+    open={open}
+    onOpenChange={setOpen}
+    title="Success"
+    description="Action completed"
+    intent="success"
+  />
+</ToastProvider>
+```
+
+## Variant System
+
+All components follow a strict, typed variant system:
+
+- **variant**: `primary` | `secondary` | `ghost` | `outline`
+- **intent**: `primary` | `success` | `warning` | `danger` | `neutral`
+- **size**: `sm` | `md` | `lg`
+- **state**: `loading` | `disabled`
+
+No arbitrary strings or raw class overrides are allowed.
+
+## Theming
+
+The design system uses CSS variables as the public contract. Themes can be switched without rebuilding:
+
+```tsx
+<ThemeProvider theme="base" mode="dark">
+  {/* Dark mode */}
+</ThemeProvider>
+```
+
+### Custom Themes
+
+You can extend themes by overriding CSS variables:
+
+```css
+:root {
+  --pd-intent-primary: #your-color;
+  --pd-intent-primary-hover: #your-hover-color;
+}
+```
+
+## Adapter Layer
+
+The adapter layer allows switching UI engines without changing application code:
+
+```tsx
+// Switch from shadcn to material
+setDesignSystemConfig({ adapter: 'material' });
+```
+
+Currently supported adapters:
+- **shadcn**: Radix UI + Tailwind CSS
+- **material**: Material UI (coming soon)
+
+## Storybook
+
+View all components and variants in Storybook:
+
+```bash
+npm run storybook
+```
+
+Storybook includes:
+- All component variants
+- Interactive controls
+- Theme switcher (light/dark)
+- Adapter switcher
+- Accessibility panel
+- Code snippets
+
+## Architecture
+
+```
+src/
+├── tokens/          # Base & semantic tokens
+├── theme/           # Theme system & provider
+├── primitives/      # Headless components
+├── adapters/        # UI engine adapters
+└── components/      # Public components
+```
+
+## TypeScript
+
+Full TypeScript support with autocomplete:
+
+```tsx
+<Button
+  variant="primary"  // ✅ Autocomplete
+  intent="danger"    // ✅ Autocomplete
+  size="md"          // ✅ Autocomplete
+/>
+```
+
+## Accessibility
+
+- Radix UI primitives for ARIA compliance
+- Keyboard navigation support
+- Focus ring standards
+- Screen reader labels
+- Contrast-safe tokens
+
+## License
+
+MIT