shru-design-system 0.0.9 → 0.1.0

package/README.md

@@ -1,131 +1,59 @@
-# 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.
+A minimal React component library.
 
-## 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
-
-## Installation
+## Setup
 
 ```bash
-npm install shru-design-system
-# or
-pnpm add shru-design-system
+npm install
+npm run build
 ```
 
-## Quick Start
-
-```tsx
-// 1. Import CSS (required)
-import '@shru/design-system/styles'
-
-// 2. Import component
-import { ThemeToggle } from 'shru-design-system'
-
-function App() {
-  return <ThemeToggle position="bottom-right" />
-}
-```
+## Development
 
-**Note:** You must import the CSS file - it contains Tailwind setup and base CSS variables. The theme system will dynamically override variables at runtime.
+The package is built using `tsup` and outputs both ESM and CJS formats.
 
-See [USAGE.md](./USAGE.md) for complete usage guide.
+## Testing
 
-## Build Process
+A test app is available in the `test/` folder:
 
 ```bash
-# Build the library
-npm run build:lib
-# Generates: dist/index.js (ESM), dist/index.cjs (CJS), dist/index.d.ts (types)
-
-# Run the showcase app
+cd test
+npm install
 npm run dev
-# Visit: http://localhost:3000/design-system
 ```
 
-## Project Structure
+The test app installs the package locally using `file:..` and demonstrates the Button component.
+
+## Package Structure
 
 ```
 .
-├── 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
+├── src/
+│   ├── Button.tsx    # Button component
+│   └── index.ts      # Package exports
+├── dist/             # Built output (ESM + CJS)
+├── test/             # Test application
+└── package.json      # Package configuration
 ```
 
-## Documentation
-
-### 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
-
-### Advanced Topics
-- **[TOKEN_EXTENSION.md](./TOKEN_EXTENSION.md)** - Extending themes with custom token files
-- **[COMPONENT_DEPENDENCIES.md](./COMPONENT_DEPENDENCIES.md)** - Complete dependencies reference
-
-### 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
-
-## Contributing
-
-### Getting Started
+## Usage
 
-1. **Clone and install:**
-   ```bash
-   git clone <repo-url>
-   npm install
-   ```
-
-2. **Run the showcase:**
-   ```bash
-   npm run dev
-   ```
-
-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`
+```tsx
+import { Button } from 'shru-design-system'
 
-### Development Workflow
+function App() {
+  return (
+    <Button variant="primary" size="md">
+      Click me
+    </Button>
+  )
+}
+```
 
-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`
+## Button Props
 
-## License
+- `variant`: "primary" | "secondary" | "outline" (default: "primary")
+- `size`: "sm" | "md" | "lg" (default: "md")
+- All standard HTML button attributes are supported
 
-MIT

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 };