shru-design-system 0.0.9 → 0.1.1

package/README.md

@@ -1,130 +1,183 @@
-# Design System Repository
+# shru-design-system
 
-A comprehensive design system with 72+ reusable components and a theme management library. This monorepo contains both a Next.js showcase application and publishable npm libraries.
-
-## Purpose
-
-A design system with 72+ reusable components and a theme management library. Includes both a Next.js showcase application and publishable npm libraries.
-
-## Key Features
-
-### Design System Components
-- **72+ Components** organized by category (atoms, molecules, layout, primitives)
-- **Radix UI Based** - Accessible, unstyled primitives with custom styling
-- **Tailwind CSS** - Utility-first styling with CSS variables
-- **TypeScript** - Full type definitions for all components
-- **Component Showcases** - Live, interactive examples for every component
-
-### Theme System
-- **Token-based Theming** with multi-category support (color, typography, shape, density, animation)
-- **Reusable Library** - Theme toggle component and utilities published as `shru-design-system`
-- **Zero CSS Imports** - CSS variables generated and injected automatically
-- **Dynamic Theme Switching** - Runtime theme composition and application
-- **Modular Architecture** - Clean separation of UI, hooks, config, and utilities
-
-### Architecture
-- **Module-based Structure** - Clean separation of UI, hooks, config, and utils
-- **Centralized Exports** - Clean import paths with `index.ts` files
-- **Atomic Design** - Components organized by complexity and purpose
+A React component library with atoms and molecules built on Radix UI and Tailwind CSS.
 
 ## Installation
 
 ```bash
 npm install shru-design-system
-# or
-pnpm add shru-design-system
 ```
 
-## Quick Start
+## Quick Setup
 
-```tsx
-// 1. Import CSS (required)
-import '@shru/design-system/styles'
+After installation, run the setup script to configure Tailwind CSS:
 
-// 2. Import component
-import { ThemeToggle } from 'shru-design-system'
-
-function App() {
-  return <ThemeToggle position="bottom-right" />
-}
+```bash
+npx shru-design-system-init
 ```
 
-**Note:** You must import the CSS file - it contains Tailwind setup and base CSS variables. The theme system will dynamically override variables at runtime.
+Or it will run automatically after `npm install` (you can skip this step if it already ran).
 
-See [USAGE.md](./USAGE.md) for complete usage guide.
+## Manual Setup
 
-## Build Process
+If you prefer to set up manually or the automatic setup didn't work:
 
-```bash
-# Build the library
-npm run build:lib
-# Generates: dist/index.js (ESM), dist/index.cjs (CJS), dist/index.d.ts (types)
+### 1. Install Tailwind CSS
 
-# Run the showcase app
-npm run dev
-# Visit: http://localhost:3000/design-system
+```bash
+npm install -D tailwindcss postcss autoprefixer
+npx tailwindcss init -p
 ```
 
-## Project Structure
-
+### 2. Configure Tailwind
+
+Update `tailwind.config.js`:
+
+```js
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+    "./node_modules/shru-design-system/dist/**/*.{js,mjs}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+    },
+  },
+  plugins: [],
+}
 ```
-.
-├── apps/
-│   └── design-system/          # Next.js showcase application
-│       ├── app/                # Routes (minimal)
-│       ├── src/design-system/ # Component library & themes
-│       ├── config/            # App configuration
-│       ├── hooks/             # App-level hooks
-│       ├── lib/               # Shared utilities
-│       └── public/tokens/     # Design tokens (symlinked to src/tokens)
-├── src/                        # Reusable library code
-│   ├── tokens/                # Design tokens (JSON files)
-│   └── index.ts               # Library entry point (re-exports from app's theme system)
-├── dist/                       # Built library files (generated)
-└── package.json                # Root package config
+
+### 3. Add CSS Variables
+
+Create or update `src/index.css`:
+
+```css
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 222.2 84% 4.9%;
+    --radius: 0.5rem;
+  }
+  
+  * {
+    border-color: hsl(var(--border));
+  }
+  
+  body {
+    background-color: hsl(var(--background));
+    color: hsl(var(--foreground));
+  }
+}
 ```
 
-## Documentation
+### 4. Import CSS
 
-### Getting Started
-- **[USAGE.md](./USAGE.md)** - Complete usage guide: setup, theme toggle, components, how it works
-- **[CURSOR_PROMPT.md](./CURSOR_PROMPT.md)** - Ready-to-use Cursor prompt for integrating the library
+Import the CSS file in your entry point (e.g., `src/main.tsx`):
 
-### Advanced Topics
-- **[TOKEN_EXTENSION.md](./TOKEN_EXTENSION.md)** - Extending themes with custom token files
-- **[COMPONENT_DEPENDENCIES.md](./COMPONENT_DEPENDENCIES.md)** - Complete dependencies reference
+```tsx
+import './index.css'
+```
 
-### Contributing & Development
-- **[CONTRIBUTING.md](./CONTRIBUTING.md)** - Contribution guidelines and development workflow
-- **[apps/design-system/ARCHITECTURE.md](./apps/design-system/ARCHITECTURE.md)** - Architecture overview
-- **[apps/design-system/src/design-system/components/README.md](./apps/design-system/src/design-system/components/README.md)** - Adding components
-- **[apps/design-system/src/design-system/themes/README.md](./apps/design-system/src/design-system/themes/README.md)** - Theme system internals
+## Usage
 
-## Contributing
+```tsx
+import { Button, Badge, Modal, Select } from 'shru-design-system'
 
-### Getting Started
+function App() {
+  return (
+    <div>
+      <Button variant="default">Click me</Button>
+      <Badge>New</Badge>
+      
+      <Modal>
+        <ModalTrigger asChild>
+          <Button>Open Modal</Button>
+        </ModalTrigger>
+        <ModalContent>
+          <ModalHeader>
+            <ModalTitle>Hello</ModalTitle>
+            <ModalDescription>This is a modal</ModalDescription>
+          </ModalHeader>
+        </ModalContent>
+      </Modal>
+    </div>
+  )
+}
+```
 
-1. **Clone and install:**
-   ```bash
-   git clone <repo-url>
-   npm install
-   ```
+## Components
 
-2. **Run the showcase:**
-   ```bash
-   npm run dev
-   ```
+### Atoms
+- **Button** - Versatile button with multiple variants and sizes
+- **Badge** - Small status indicators
 
-3. **Make changes:**
-   - **Adding a component**: See [Component System Docs](./apps/design-system/src/design-system/components/README.md#how-to-add-a-component)
-   - **Adding a theme**: See [Theme System Docs](./apps/design-system/src/design-system/themes/README.md#how-to-add-a-new-theme)
-   - **Library changes**: Edit `src/`, then run `npm run build:lib`
+### Molecules
+- **Modal** - Dialog component with overlay
+- **Select** - Dropdown select component
 
-### Development Workflow
+## Peer Dependencies
 
-1. Make changes in appropriate module (`components/`, `themes/`, etc.)
-2. Test in the showcase app (`npm run dev`)
-3. If changing library code (`src/`), rebuild: `npm run build:lib`
+Make sure to install these peer dependencies:
+
+```bash
+npm install @radix-ui/react-slot @radix-ui/react-dialog @radix-ui/react-select class-variance-authority clsx tailwind-merge lucide-react
+```
 
 ## License
 

package/dist/index.d.mts

@@ -0,0 +1,55 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import { VariantProps } from 'class-variance-authority';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import * as SelectPrimitive from '@radix-ui/react-select';
+
+declare const buttonVariants: (props?: ({
+    readonly variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | null | undefined;
+    readonly size?: "default" | "sm" | "lg" | "icon" | "icon-sm" | "icon-lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const Button: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLButtonElement> & React.ButtonHTMLAttributes<HTMLButtonElement> & VariantProps<(props?: ({
+    readonly variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | null | undefined;
+    readonly size?: "default" | "sm" | "lg" | "icon" | "icon-sm" | "icon-lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string> & {
+    asChild?: boolean;
+}, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+
+declare const badgeVariants: (props?: ({
+    readonly variant?: "default" | "destructive" | "outline" | "secondary" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const Badge: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLSpanElement> & React.HTMLAttributes<HTMLSpanElement> & VariantProps<(props?: ({
+    readonly variant?: "default" | "destructive" | "outline" | "secondary" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string> & {
+    asChild?: boolean;
+}, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+
+declare function Modal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>): react_jsx_runtime.JSX.Element;
+declare function ModalTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>): react_jsx_runtime.JSX.Element;
+declare function ModalPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>): react_jsx_runtime.JSX.Element;
+declare function ModalClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>): react_jsx_runtime.JSX.Element;
+declare function ModalOverlay({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Overlay>): react_jsx_runtime.JSX.Element;
+declare function ModalContent({ className, children, showCloseButton, ...props }: React.ComponentProps<typeof DialogPrimitive.Content> & {
+    showCloseButton?: boolean;
+}): react_jsx_runtime.JSX.Element;
+declare function ModalHeader({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function ModalFooter({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function ModalTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>): react_jsx_runtime.JSX.Element;
+declare function ModalDescription({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Description>): react_jsx_runtime.JSX.Element;
+
+declare function Select({ ...props }: React.ComponentProps<typeof SelectPrimitive.Root>): react_jsx_runtime.JSX.Element;
+declare function SelectGroup({ ...props }: React.ComponentProps<typeof SelectPrimitive.Group>): react_jsx_runtime.JSX.Element;
+declare function SelectValue({ ...props }: React.ComponentProps<typeof SelectPrimitive.Value>): react_jsx_runtime.JSX.Element;
+declare const selectTriggerSizes: readonly ["sm", "default"];
+declare function SelectTrigger({ className, size, children, ...props }: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
+    size?: typeof selectTriggerSizes[number];
+}): react_jsx_runtime.JSX.Element;
+declare function SelectContent({ className, children, position, align, ...props }: React.ComponentProps<typeof SelectPrimitive.Content>): react_jsx_runtime.JSX.Element;
+declare function SelectLabel({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Label>): react_jsx_runtime.JSX.Element;
+declare function SelectItem({ className, children, ...props }: React.ComponentProps<typeof SelectPrimitive.Item>): react_jsx_runtime.JSX.Element;
+declare function SelectSeparator({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Separator>): react_jsx_runtime.JSX.Element;
+declare function SelectScrollUpButton({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>): react_jsx_runtime.JSX.Element;
+declare function SelectScrollDownButton({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>): react_jsx_runtime.JSX.Element;
+
+export { Badge, Button, Modal, ModalClose, ModalContent, ModalDescription, ModalFooter, ModalHeader, ModalOverlay, ModalPortal, ModalTitle, ModalTrigger, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, badgeVariants, buttonVariants };