shru-design-system 0.1.0 → 0.1.2

package/README.md

@@ -1,59 +1,184 @@
 # shru-design-system
 
-A minimal React component library.
+A React component library with atoms and molecules built on Radix UI and Tailwind CSS.
 
-## Setup
+## Installation
 
 ```bash
-npm install
-npm run build
+npm install shru-design-system
 ```
 
-## Development
+## Quick Setup
 
-The package is built using `tsup` and outputs both ESM and CJS formats.
+After installation, run the setup script to configure Tailwind CSS:
 
-## Testing
+```bash
+npx shru-design-system-init
+```
+
+Or it will run automatically after `npm install` (you can skip this step if it already ran).
+
+## Manual Setup
+
+If you prefer to set up manually or the automatic setup didn't work:
 
-A test app is available in the `test/` folder:
+### 1. Install Tailwind CSS
 
 ```bash
-cd test
-npm install
-npm run dev
+npm install -D tailwindcss postcss autoprefixer
+npx tailwindcss init -p
 ```
 
-The test app installs the package locally using `file:..` and demonstrates the Button component.
-
-## Package 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: [],
+}
+```
 
+### 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));
+  }
+}
 ```
-.
-├── src/
-│   ├── Button.tsx    # Button component
-│   └── index.ts      # Package exports
-├── dist/             # Built output (ESM + CJS)
-├── test/             # Test application
-└── package.json      # Package configuration
+
+### 4. Import CSS
+
+Import the CSS file in your entry point (e.g., `src/main.tsx`):
+
+```tsx
+import './index.css'
 ```
 
 ## Usage
 
 ```tsx
-import { Button } from 'shru-design-system'
+import { Button, Badge, Modal, Select } from 'shru-design-system'
 
 function App() {
   return (
-    <Button variant="primary" size="md">
-      Click me
-    </Button>
+    <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>
   )
 }
 ```
 
-## Button Props
+## Components
+
+### Atoms
+- **Button** - Versatile button with multiple variants and sizes
+- **Badge** - Small status indicators
+
+### Molecules
+- **Modal** - Dialog component with overlay
+- **Select** - Dropdown select component
+
+## Peer Dependencies
+
+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
+```
 
-- `variant`: "primary" | "secondary" | "outline" (default: "primary")
-- `size`: "sm" | "md" | "lg" (default: "md")
-- All standard HTML button attributes are supported
+## License
 
+MIT

package/dist/index.d.mts

@@ -4,6 +4,7 @@ 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';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 
 declare const buttonVariants: (props?: ({
     readonly variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | null | undefined;
@@ -52,4 +53,103 @@ declare function SelectSeparator({ className, ...props }: React.ComponentProps<t
 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 };
+declare function TooltipProvider({ delayDuration, ...props }: React.ComponentProps<typeof TooltipPrimitive.Provider>): react_jsx_runtime.JSX.Element;
+declare function Tooltip({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Root>): react_jsx_runtime.JSX.Element;
+declare function TooltipTrigger({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Trigger>): react_jsx_runtime.JSX.Element;
+declare const tooltipSides: readonly ["top", "right", "bottom", "left"];
+declare function TooltipContent({ className, sideOffset, children, side, ...props }: React.ComponentProps<typeof TooltipPrimitive.Content> & {
+    side?: typeof tooltipSides[number];
+}): react_jsx_runtime.JSX.Element;
+
+interface ThemeToggleProps {
+    className?: string;
+    position?: "bottom-right" | "bottom-left" | "top-right" | "top-left";
+}
+declare function ThemeToggle({ className, position }: ThemeToggleProps): react_jsx_runtime.JSX.Element;
+
+type ThemeSelection = {
+    color?: string;
+    typography?: string;
+    shape?: string;
+    density?: string;
+    animation?: string;
+    custom?: string;
+};
+type ThemeMetadata$1 = {
+    name: string;
+    file: string;
+    icon: string;
+    description: string;
+};
+/**
+ * Hook for managing design system theme switching
+ */
+declare function useTheme(): {
+    selectedThemes: ThemeSelection;
+    updateTheme: (category: keyof ThemeSelection, themeId: string | undefined) => Promise<void>;
+    resetToDefaults: () => Promise<void>;
+    isLoading: boolean;
+    error: string | null;
+    getAvailableThemes: (category: string) => Promise<Record<string, ThemeMetadata$1>>;
+};
+
+declare function useThemeToggle(): {
+    selectedThemes: ThemeSelection;
+    isLoading: boolean;
+    getAvailableThemes: (category: string) => Promise<Record<string, ThemeMetadata$1>>;
+    isOpen: boolean;
+    selectedCategory: string | null;
+    themeCategories: any;
+    categories: [string, {
+        name: string;
+        themes: Record<string, any>;
+        order?: number;
+    }][];
+    menuRef: React.RefObject<HTMLDivElement>;
+    handleCategoryClick: (categoryKey: string) => void;
+    handleThemeSelect: (category: keyof ThemeSelection, themeId: string) => Promise<void>;
+    handleBack: () => void;
+    toggleMenu: () => void;
+};
+
+/**
+ * Theme Configuration
+ * Registry of all available themes organized by category
+ *
+ * Base themes are defined here. Additional themes can be discovered dynamically
+ * by scanning the /tokens/themes/ directory structure.
+ */
+type ThemeMetadata = {
+    name: string;
+    file: string;
+    icon: string;
+    description: string;
+};
+type ThemeCategory = {
+    name: string;
+    order: number;
+    themes: Record<string, ThemeMetadata>;
+};
+/**
+ * Register a custom theme dynamically
+ * Allows users to add themes without modifying the base config
+ */
+declare function registerTheme(category: string, themeId: string, metadata: ThemeMetadata): Record<string, ThemeCategory>;
+/**
+ * Get merged theme categories (base + discovered)
+ */
+declare function getThemeCategories(): Promise<Record<string, ThemeCategory>>;
+/**
+ * Get theme file path
+ */
+declare function getThemeFilePath(category: string, themeId: string): string | null;
+/**
+ * Get all themes for a category
+ */
+declare function getThemesForCategory(category: string): Promise<Record<string, ThemeMetadata>>;
+/**
+ * Get theme by ID
+ */
+declare function getTheme(category: string, themeId: string): Promise<ThemeMetadata | null>;
+
+export { Badge, Button, Modal, ModalClose, ModalContent, ModalDescription, ModalFooter, ModalHeader, ModalOverlay, ModalPortal, ModalTitle, ModalTrigger, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, type ThemeMetadata$1 as ThemeMetadata, type ThemeSelection, ThemeToggle, type ThemeToggleProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonVariants, getTheme, getThemeCategories, getThemeFilePath, getThemesForCategory, registerTheme, useTheme, useThemeToggle };

package/dist/index.d.ts

@@ -4,6 +4,7 @@ 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';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 
 declare const buttonVariants: (props?: ({
     readonly variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | null | undefined;
@@ -52,4 +53,103 @@ declare function SelectSeparator({ className, ...props }: React.ComponentProps<t
 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 };
+declare function TooltipProvider({ delayDuration, ...props }: React.ComponentProps<typeof TooltipPrimitive.Provider>): react_jsx_runtime.JSX.Element;
+declare function Tooltip({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Root>): react_jsx_runtime.JSX.Element;
+declare function TooltipTrigger({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Trigger>): react_jsx_runtime.JSX.Element;
+declare const tooltipSides: readonly ["top", "right", "bottom", "left"];
+declare function TooltipContent({ className, sideOffset, children, side, ...props }: React.ComponentProps<typeof TooltipPrimitive.Content> & {
+    side?: typeof tooltipSides[number];
+}): react_jsx_runtime.JSX.Element;
+
+interface ThemeToggleProps {
+    className?: string;
+    position?: "bottom-right" | "bottom-left" | "top-right" | "top-left";
+}
+declare function ThemeToggle({ className, position }: ThemeToggleProps): react_jsx_runtime.JSX.Element;
+
+type ThemeSelection = {
+    color?: string;
+    typography?: string;
+    shape?: string;
+    density?: string;
+    animation?: string;
+    custom?: string;
+};
+type ThemeMetadata$1 = {
+    name: string;
+    file: string;
+    icon: string;
+    description: string;
+};
+/**
+ * Hook for managing design system theme switching
+ */
+declare function useTheme(): {
+    selectedThemes: ThemeSelection;
+    updateTheme: (category: keyof ThemeSelection, themeId: string | undefined) => Promise<void>;
+    resetToDefaults: () => Promise<void>;
+    isLoading: boolean;
+    error: string | null;
+    getAvailableThemes: (category: string) => Promise<Record<string, ThemeMetadata$1>>;
+};
+
+declare function useThemeToggle(): {
+    selectedThemes: ThemeSelection;
+    isLoading: boolean;
+    getAvailableThemes: (category: string) => Promise<Record<string, ThemeMetadata$1>>;
+    isOpen: boolean;
+    selectedCategory: string | null;
+    themeCategories: any;
+    categories: [string, {
+        name: string;
+        themes: Record<string, any>;
+        order?: number;
+    }][];
+    menuRef: React.RefObject<HTMLDivElement>;
+    handleCategoryClick: (categoryKey: string) => void;
+    handleThemeSelect: (category: keyof ThemeSelection, themeId: string) => Promise<void>;
+    handleBack: () => void;
+    toggleMenu: () => void;
+};
+
+/**
+ * Theme Configuration
+ * Registry of all available themes organized by category
+ *
+ * Base themes are defined here. Additional themes can be discovered dynamically
+ * by scanning the /tokens/themes/ directory structure.
+ */
+type ThemeMetadata = {
+    name: string;
+    file: string;
+    icon: string;
+    description: string;
+};
+type ThemeCategory = {
+    name: string;
+    order: number;
+    themes: Record<string, ThemeMetadata>;
+};
+/**
+ * Register a custom theme dynamically
+ * Allows users to add themes without modifying the base config
+ */
+declare function registerTheme(category: string, themeId: string, metadata: ThemeMetadata): Record<string, ThemeCategory>;
+/**
+ * Get merged theme categories (base + discovered)
+ */
+declare function getThemeCategories(): Promise<Record<string, ThemeCategory>>;
+/**
+ * Get theme file path
+ */
+declare function getThemeFilePath(category: string, themeId: string): string | null;
+/**
+ * Get all themes for a category
+ */
+declare function getThemesForCategory(category: string): Promise<Record<string, ThemeMetadata>>;
+/**
+ * Get theme by ID
+ */
+declare function getTheme(category: string, themeId: string): Promise<ThemeMetadata | null>;
+
+export { Badge, Button, Modal, ModalClose, ModalContent, ModalDescription, ModalFooter, ModalHeader, ModalOverlay, ModalPortal, ModalTitle, ModalTrigger, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, type ThemeMetadata$1 as ThemeMetadata, type ThemeSelection, ThemeToggle, type ThemeToggleProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonVariants, getTheme, getThemeCategories, getThemeFilePath, getThemesForCategory, registerTheme, useTheme, useThemeToggle };