@carandesign/drawui 0.1.0 → 0.1.2

package/README.md

@@ -1,73 +1,24 @@
-# React + TypeScript + Vite
+# DrawUI
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+**Sketch-style React UI component library**  
+DrawUI provides a set of hand-drawn sketch-inspired UI components for React, including Buttons, IconButtons, Cards, Inputs, Collapsibles, Dividers, and a library of reusable SVG icons.
 
-Currently, two official plugins are available:
+---
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+## Features
 
-## React Compiler
+- Hand-drawn sketch style using `roughjs`
+- Themeable: colors, stroke widths, radii, roughness
+- Fully typed with TypeScript
+- Ready-to-use Icons in SVG
+- Supports different sizes and variants
+- Flexible: header/footer support for Cards, collapsible content, icon buttons
 
-The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+---
 
-## Expanding the ESLint configuration
+## Installation
 
-If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
-
-```js
-export default defineConfig([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
-
-      // Remove tseslint.configs.recommended and replace with this
-      tseslint.configs.recommendedTypeChecked,
-      // Alternatively, use this for stricter rules
-      tseslint.configs.strictTypeChecked,
-      // Optionally, add this for stylistic rules
-      tseslint.configs.stylisticTypeChecked,
-
-      // Other configs...
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
-    },
-  },
-])
-```
-
-You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
-
-```js
-// eslint.config.js
-import reactX from 'eslint-plugin-react-x'
-import reactDom from 'eslint-plugin-react-dom'
-
-export default defineConfig([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
-      // Enable lint rules for React
-      reactX.configs['recommended-typescript'],
-      // Enable lint rules for React DOM
-      reactDom.configs.recommended,
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
-    },
-  },
-])
-```
+```bash
+npm install @carandesign/drawui
+# or
+yarn add @carandesign/drawui

package/dist/components/button/DrawuiButton.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+import { DrawuiButtonProps } from './DrawuiButton.types';
+export declare const DrawuiButton: React.FC<DrawuiButtonProps>;

package/dist/components/button/DrawuiButton.types.d.ts

@@ -0,0 +1,7 @@
+import { RadiusToken, SizeToken, StrokeWeight } from '../../theme/types';
+export interface DrawuiButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    strokeWeight?: StrokeWeight;
+    size?: SizeToken;
+    radius?: RadiusToken;
+    backgroundColor?: string;
+}

package/dist/components/button/index.d.ts

@@ -0,0 +1,2 @@
+export { DrawuiButton } from './DrawuiButton';
+export * from './DrawuiButton.types';

package/dist/components/card/DrawuiCard.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+import { DrawuiCardProps } from './DrawuiCard.types';
+export declare const DrawuiCard: React.FC<DrawuiCardProps>;

package/dist/components/card/DrawuiCard.types.d.ts

@@ -0,0 +1,13 @@
+import { RadiusToken, StrokeWeight } from '../../theme/types';
+import { ReactNode } from 'react';
+export interface DrawuiCardProps {
+    strokeWeight?: StrokeWeight;
+    radius?: RadiusToken;
+    width?: number;
+    height?: number;
+    backgroundColor?: string;
+    header?: ReactNode;
+    footer?: ReactNode;
+    children?: ReactNode;
+    className?: string;
+}

package/dist/components/card/index.d.ts

@@ -0,0 +1,2 @@
+export { DrawuiCard } from './DrawuiCard';
+export * from './DrawuiCard.types';

package/dist/components/collapse/DrawuiCollapse.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+import { DrawuiCollapseProps } from './DrawuiCollapse.types';
+export declare const DrawuiCollapse: React.FC<DrawuiCollapseProps>;

package/dist/components/collapse/DrawuiCollapse.types.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+import { RadiusToken, StrokeWeight } from '../../theme/types';
+export interface DrawuiCollapseProps {
+    header: ReactNode;
+    children: ReactNode;
+    strokeWeight?: StrokeWeight;
+    radius?: RadiusToken;
+    className?: string;
+    width?: number;
+}

package/dist/components/collapse/index.d.ts

@@ -0,0 +1,2 @@
+export { DrawuiCollapse } from './DrawuiCollapse';
+export * from './DrawuiCollapse.types';

package/dist/components/divider/DrawuiDivider.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+import { DrawuiDividerProps } from './DrawuiDivider.types';
+export declare const DrawuiDivider: React.FC<DrawuiDividerProps>;

package/dist/components/divider/DrawuiDivider.types.d.ts

@@ -0,0 +1,7 @@
+import { StrokeWeight } from '../../theme/types';
+export interface DrawuiDividerProps {
+    strokeWeight?: StrokeWeight;
+    width?: number | string;
+    vertical?: boolean;
+    className?: string;
+}

package/dist/components/divider/index.d.ts

@@ -0,0 +1,2 @@
+export { DrawuiDivider } from './DrawuiDivider';
+export * from './DrawuiDivider.types';

package/dist/components/iconButton/DrawuiIconButton.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+import { DrawuiIconButtonProps } from './DrawuiIconButton.types';
+export declare const DrawuiIconButton: React.FC<DrawuiIconButtonProps>;

package/dist/components/iconButton/DrawuiIconButton.types.d.ts

@@ -0,0 +1,8 @@
+import { RadiusToken, SizeToken, StrokeWeight } from '../../theme/types';
+export interface DrawuiIconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    strokeWeight?: StrokeWeight;
+    size?: SizeToken;
+    icon: React.ReactNode;
+    radius?: RadiusToken;
+    backgroundColor?: string;
+}

package/dist/components/iconButton/index.d.ts

@@ -0,0 +1,2 @@
+export { DrawuiIconButton } from './DrawuiIconButton';
+export * from './DrawuiIconButton.types';

package/dist/components/index.d.ts

@@ -0,0 +1,6 @@
+export * from './button';
+export * from './card';
+export * from './collapse';
+export * from './divider';
+export * from './iconButton';
+export * from './input';

package/dist/components/input/DrawuiInput.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+import { DrawuiInputProps } from './DrawuiInput.types';
+export declare const DrawuiInput: React.FC<DrawuiInputProps>;

package/dist/components/input/DrawuiInput.types.d.ts

@@ -0,0 +1,8 @@
+import { StrokeWeight, RadiusToken, SizeToken } from '../../theme/types';
+import { InputHTMLAttributes } from 'react';
+export interface DrawuiInputProps extends InputHTMLAttributes<HTMLInputElement> {
+    strokeWeight?: StrokeWeight;
+    radius?: RadiusToken;
+    inputSize: SizeToken;
+    backgroundColor?: string;
+}

package/dist/components/input/index.d.ts

@@ -0,0 +1,2 @@
+export { DrawuiInput } from './DrawuiInput';
+export * from './DrawuiInput.types';

package/dist/icons/IconBell.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+import { DrawuiIconProps } from './types';
+export declare const IconBell: React.FC<DrawuiIconProps>;

package/dist/icons/IconHome.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+import { DrawuiIconProps } from './types';
+export declare const IconHome: React.FC<DrawuiIconProps>;

package/dist/icons/IconMinus.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+import { DrawuiIconProps } from './types';
+export declare const IconMinus: React.FC<DrawuiIconProps>;

package/dist/icons/IconPlus.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+import { DrawuiIconProps } from './types';
+export declare const IconPlus: React.FC<DrawuiIconProps>;

package/dist/icons/IconSearch.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+import { DrawuiIconProps } from './types';
+export declare const IconSearch: React.FC<DrawuiIconProps>;

package/dist/icons/IconSettings.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+import { DrawuiIconProps } from './types';
+export declare const IconSettings: React.FC<DrawuiIconProps>;

package/dist/icons/IconUser.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+import { DrawuiIconProps } from './types';
+export declare const IconUser: React.FC<DrawuiIconProps>;

package/dist/icons/index.d.ts

@@ -0,0 +1,7 @@
+export { IconBell } from './IconBell';
+export { IconHome } from './IconHome';
+export { IconMinus } from './IconMinus';
+export { IconPlus } from './IconPlus';
+export { IconSearch } from './IconSearch';
+export { IconSettings } from './IconSettings';
+export { IconUser } from './IconUser';

package/dist/icons/types.d.ts

@@ -0,0 +1,7 @@
+import { StrokeWeight } from '../theme/types';
+export interface DrawuiIconProps {
+    size?: number;
+    strokeWeight?: StrokeWeight;
+    color?: string;
+    className?: string;
+}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export * from './components';
+export * from './icons';
+export * from './theme';

package/dist/theme/DrawuiThemeContext.d.ts

@@ -0,0 +1,2 @@
+import { DrawuiTheme } from './types';
+export declare const DrawuiThemeContext: import('react').Context<DrawuiTheme>;

package/dist/theme/DrawuiThemeProvider.d.ts

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+import { DrawuiTheme } from './types';
+export declare const DrawuiThemeProvider: React.FC<{
+    theme?: Partial<DrawuiTheme>;
+    children: React.ReactNode;
+}>;

package/dist/theme/defaultTheme.d.ts

@@ -0,0 +1,2 @@
+import { DrawuiTheme } from './types';
+export declare const defaultDrawuiTheme: DrawuiTheme;

package/dist/theme/index.d.ts

@@ -0,0 +1,3 @@
+export { DrawuiThemeProvider } from './DrawuiThemeProvider';
+export { useDrawuiTheme } from './useDrawuiTheme';
+export * from './types';

package/dist/theme/types.d.ts

@@ -0,0 +1,31 @@
+export type StrokeWeight = "thin" | "medium" | "thick";
+export type RadiusToken = "none" | "sm" | "md" | "lg" | "full";
+export type SizeToken = "sm" | "md" | "lg" | "xl";
+export interface DrawuiButtonSize {
+    width: number;
+    height: number;
+    fontSize: number;
+}
+export interface DrawuiInputSize {
+    height: number;
+    fontSize: number;
+    paddingX: number;
+}
+export interface DrawuiStroke {
+    color: string;
+    width: number;
+}
+export interface DrawuiRoughness {
+    roughness: number;
+    bowing: number;
+}
+export interface DrawuiTheme {
+    stroke: Record<StrokeWeight, DrawuiStroke>;
+    roughness: DrawuiRoughness;
+    fill: {
+        background: string;
+    };
+    radius: Record<RadiusToken, number>;
+    buttonSize: Record<SizeToken, DrawuiButtonSize>;
+    inputSize: Record<SizeToken, DrawuiInputSize>;
+}

package/dist/theme/useDrawuiTheme.d.ts

@@ -0,0 +1 @@
+export declare const useDrawuiTheme: () => import('./types').DrawuiTheme;

package/dist/utils/roughPaths.d.ts

@@ -0,0 +1 @@
+export declare const roundedRect: (x: number, y: number, width: number, height: number, r: number) => string;

package/package.json

@@ -1,31 +1,32 @@
 {
-"name": "@carandesign/drawui",
-  "version": "0.1.0",
-  "description": "Sketch-style React UI component library",
-  "type": "module",
-  "main": "dist/drawui.cjs.js",
-  "module": "dist/drawui.es.js",
-  "types": "dist/index.d.ts",
-  "files": ["dist"],
-  "sideEffects": false,
-  "scripts": {
-    "build": "vite build",
-    "prepublishOnly": "npm run build"
-  },
-  "peerDependencies": {
-    "react": "^18 || ^19",
-    "react-dom": "^18 || ^19"
-  },
-  "dependencies": {
-    "roughjs": "^4.6.6"
-  },
-  "devDependencies": {
-    "@types/react": "^19.2.5",
-    "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^5.1.1",
-    "vite": "^7.2.4",
-    "vite-plugin-dts": "^4.5.4",
-    "typescript": "~5.9.3",
-    "eslint": "^9.39.1"
-  }
+   "name": "@carandesign/drawui",
+   "version": "0.1.2",
+   "description": "Sketch-style React UI component library",
+   "type": "module",
+   "main": "dist/drawui.cjs.js",
+   "module": "dist/drawui.es.js",
+   "types": "dist/index.d.ts",
+   "files": [
+      "dist"
+   ],
+   "scripts": {
+      "build": "vite build",
+      "prepublishOnly": "npm run build"
+   },
+   "peerDependencies": {
+      "react": "^18 || ^19",
+      "react-dom": "^18 || ^19"
+   },
+   "dependencies": {
+      "roughjs": "^4.6.6"
+   },
+   "devDependencies": {
+      "@types/react": "^19.2.5",
+      "@types/react-dom": "^19.2.3",
+      "@vitejs/plugin-react": "^5.1.1",
+      "vite": "^7.2.4",
+      "vite-plugin-dts": "^4.5.4",
+      "typescript": "~5.9.3",
+      "eslint": "^9.39.1"
+   }
 }