unicorn-design-system 1.0.0

package/README.md

@@ -0,0 +1,62 @@
+# 🦄 Unicorn Design System
+
+A beautiful React component library with design tokens.
+
+## Installation
+```bash
+npm install unicorn-design-system
+```
+
+## Quick Start
+```tsx
+import { Button, Card, Badge } from 'unicorn-design-system';
+
+export default function App() {
+  return (
+    <Card padding="lg">
+      <h1>Hello Unicorn!</h1>
+      <Badge variant="success">Ready</Badge>
+      <Button variant="primary">Click Me</Button>
+    </Card>
+  );
+}
+```
+
+## Components
+
+- Button - Click interactions
+- Card - Content containers
+- Badge - Status indicators
+- Input - Text input
+- Modal - Dialogs
+- Alert - Messages
+
+## Colors
+
+- Primary: #2A6ECC (Blue)
+- Success: #00995A (Green)
+- Warning: #F9B02A (Amber)
+- Danger: #FA5858 (Red)
+
+## License
+
+MIT
+```
+
+**What this does:** Creates a description page that shows on npm.
+
+---
+
+### **Step 8: Create LICENSE**
+
+Create a file named `LICENSE` and paste this:
+```
+MIT License
+
+Copyright (c) 2024 Unicorn 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.

package/dist/components/Alert.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export interface AlertProps {
+    type?: 'info' | 'success' | 'warning' | 'error';
+    title?: string;
+    message: string;
+    closable?: boolean;
+    onClose?: () => void;
+}
+export declare const Alert: React.FC<AlertProps>;
+export default Alert;

package/dist/components/Alert.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const Alert = ({ type = 'info', title, message, closable, onClose, }) => {
+    const types = {
+        info: 'bg-cyan-50 border-l-4 border-cyan-500 text-cyan-900',
+        success: 'bg-emerald-50 border-l-4 border-emerald-500 text-emerald-900',
+        warning: 'bg-amber-50 border-l-4 border-amber-500 text-amber-900',
+        error: 'bg-red-50 border-l-4 border-red-500 text-red-900',
+    };
+    return (_jsxs("div", { className: `p-4 rounded-lg ${types[type]}`, children: [title && _jsx("h3", { className: "font-semibold mb-1", children: title }), _jsx("p", { className: "text-sm", children: message }), closable && (_jsx("button", { onClick: onClose, className: "ml-auto text-sm font-semibold hover:opacity-70", children: "\u2715" }))] }));
+};
+export default Alert;

package/dist/components/Badge.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+    variant?: 'primary' | 'success' | 'warning' | 'danger';
+}
+export declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLSpanElement>>;
+export default Badge;

package/dist/components/Badge.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+export const Badge = React.forwardRef(({ variant = 'primary', className, children, ...props }, ref) => {
+    const variants = {
+        primary: 'bg-blue-100 text-blue-800',
+        success: 'bg-emerald-100 text-emerald-800',
+        warning: 'bg-amber-100 text-amber-800',
+        danger: 'bg-red-100 text-red-800',
+    };
+    return (_jsx("span", { ref: ref, className: `
+          inline-flex px-3 py-1.5 rounded-full text-sm font-semibold
+          ${variants[variant]}
+          ${className || ''}
+        `, ...props, children: children }));
+});
+Badge.displayName = 'Badge';
+export default Badge;

package/dist/components/Button.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: 'primary' | 'secondary' | 'success' | 'danger';
+    size?: 'sm' | 'md' | 'lg';
+}
+export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export default Button;

package/dist/components/Button.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+export const Button = React.forwardRef(({ variant = 'primary', size = 'md', className, children, ...props }, ref) => {
+    const variants = {
+        primary: 'bg-blue-600 text-white hover:bg-blue-700',
+        secondary: 'bg-gray-200 text-gray-900 hover:bg-gray-300',
+        success: 'bg-emerald-600 text-white hover:bg-emerald-700',
+        danger: 'bg-red-600 text-white hover:bg-red-700',
+    };
+    const sizes = {
+        sm: 'px-3 py-1.5 text-sm',
+        md: 'px-4 py-2 text-base',
+        lg: 'px-6 py-3 text-lg',
+    };
+    return (_jsx("button", { ref: ref, className: `
+          rounded-lg font-semibold transition-colors
+          ${variants[variant]}
+          ${sizes[size]}
+          ${className || ''}
+        `, ...props, children: children }));
+});
+Button.displayName = 'Button';
+export default Button;

package/dist/components/Card.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+    variant?: 'default' | 'elevated' | 'flat';
+    padding?: 'sm' | 'md' | 'lg';
+}
+export declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;
+export default Card;

package/dist/components/Card.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+export const Card = React.forwardRef(({ variant = 'default', padding = 'lg', className, children, ...props }, ref) => {
+    const variants = {
+        default: 'bg-white border border-gray-200 shadow-sm',
+        elevated: 'bg-white shadow-lg',
+        flat: 'bg-gray-50 border border-gray-100',
+    };
+    const paddings = {
+        sm: 'p-2',
+        md: 'p-4',
+        lg: 'p-6',
+    };
+    return (_jsx("div", { ref: ref, className: `
+          rounded-lg transition-all
+          ${variants[variant]}
+          ${paddings[padding]}
+          ${className || ''}
+        `, ...props, children: children }));
+});
+Card.displayName = 'Card';
+export default Card;

package/dist/components/Input.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    label?: string;
+    error?: string;
+}
+export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+export default Input;

package/dist/components/Input.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+export const Input = React.forwardRef(({ label, error, className, ...props }, ref) => {
+    return (_jsxs("div", { className: "w-full", children: [label && _jsx("label", { className: "block text-sm font-semibold mb-2", children: label }), _jsx("input", { ref: ref, className: `
+            w-full px-4 py-2 border rounded-lg
+            focus:outline-none focus:ring-2 focus:ring-blue-500
+            ${error ? 'border-red-500' : 'border-gray-300'}
+            ${className || ''}
+          `, ...props }), error && _jsx("p", { className: "text-sm text-red-600 mt-1", children: error })] }));
+});
+Input.displayName = 'Input';
+export default Input;

package/dist/components/Modal.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export interface ModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    title?: string;
+    children: React.ReactNode;
+    footer?: React.ReactNode;
+}
+export declare const Modal: React.FC<ModalProps>;
+export default Modal;

package/dist/components/Modal.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+export const Modal = ({ isOpen, onClose, title, children, footer, }) => {
+    if (!isOpen)
+        return null;
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "fixed inset-0 bg-black bg-opacity-50 z-40", onClick: onClose }), _jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center", children: _jsxs("div", { className: "bg-white rounded-lg shadow-2xl max-w-md w-full mx-4", children: [title && (_jsx("div", { className: "p-6 border-b border-gray-200", children: _jsx("h2", { className: "text-xl font-bold", children: title }) })), _jsx("div", { className: "p-6", children: children }), footer && _jsx("div", { className: "p-6 border-t border-gray-200 bg-gray-50", children: footer })] }) })] }));
+};
+export default Modal;

package/dist/index.d.ts

@@ -0,0 +1,15 @@
+export { Button } from './components/Button';
+export type { ButtonProps } from './components/Button';
+export { Card } from './components/Card';
+export type { CardProps } from './components/Card';
+export { Badge } from './components/Badge';
+export type { BadgeProps } from './components/Badge';
+export { Input } from './components/Input';
+export type { InputProps } from './components/Input';
+export { Modal } from './components/Modal';
+export type { ModalProps } from './components/Modal';
+export { Alert } from './components/Alert';
+export type { AlertProps } from './components/Alert';
+export { colors } from './tokens/colors';
+export { typography } from './tokens/typography';
+export { spacing, borderRadius, shadows } from './tokens/spacing';

package/dist/index.js

@@ -0,0 +1,11 @@
+// Export all components
+export { Button } from './components/Button';
+export { Card } from './components/Card';
+export { Badge } from './components/Badge';
+export { Input } from './components/Input';
+export { Modal } from './components/Modal';
+export { Alert } from './components/Alert';
+// Export all tokens
+export { colors } from './tokens/colors';
+export { typography } from './tokens/typography';
+export { spacing, borderRadius, shadows } from './tokens/spacing';

package/dist/tokens/src/tokens/colors.d.ts

@@ -0,0 +1,29 @@
+export declare const colors: {
+    primary: {
+        500: string;
+        600: string;
+        700: string;
+    };
+    success: {
+        500: string;
+        600: string;
+        700: string;
+    };
+    warning: {
+        500: string;
+        600: string;
+        700: string;
+    };
+    danger: {
+        500: string;
+        600: string;
+        700: string;
+    };
+    gray: {
+        50: string;
+        100: string;
+        200: string;
+        500: string;
+        900: string;
+    };
+};

package/dist/tokens/src/tokens/colors.js

@@ -0,0 +1,29 @@
+export const colors = {
+    primary: {
+        500: '#2A6ECC',
+        600: '#235ABD',
+        700: '#1C45AE',
+    },
+    success: {
+        500: '#00995A',
+        600: '#007A4A',
+        700: '#005C3A',
+    },
+    warning: {
+        500: '#F9B02A',
+        600: '#E8A100',
+        700: '#D69200',
+    },
+    danger: {
+        500: '#FA5858',
+        600: '#E84545',
+        700: '#D63232',
+    },
+    gray: {
+        50: '#F9FAFB',
+        100: '#F3F4F6',
+        200: '#E5E7EB',
+        500: '#6B7280',
+        900: '#111827',
+    },
+};

package/dist/tokens/src/tokens/spacing.d.ts

@@ -0,0 +1,19 @@
+export declare const spacing: {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    '2xl': string;
+};
+export declare const borderRadius: {
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+};
+export declare const shadows: {
+    sm: string;
+    md: string;
+    lg: string;
+};

package/dist/tokens/src/tokens/spacing.js

@@ -0,0 +1,19 @@
+export const spacing = {
+    xs: '4px',
+    sm: '8px',
+    md: '12px',
+    lg: '16px',
+    xl: '24px',
+    '2xl': '32px',
+};
+export const borderRadius = {
+    sm: '4px',
+    md: '6px',
+    lg: '8px',
+    xl: '12px',
+};
+export const shadows = {
+    sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
+    md: '0 4px 6px -1px rgba(0, 0, 0, 0.1)',
+    lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1)',
+};

package/dist/tokens/src/tokens/typography.d.ts

@@ -0,0 +1,21 @@
+export declare const typography: {
+    fontFamily: {
+        primary: string;
+        mono: string;
+    };
+    fontSize: {
+        xs: string;
+        sm: string;
+        base: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+        '3xl': string;
+    };
+    fontWeight: {
+        regular: number;
+        medium: number;
+        semibold: number;
+        bold: number;
+    };
+};

package/dist/tokens/src/tokens/typography.js

@@ -0,0 +1,21 @@
+export const typography = {
+    fontFamily: {
+        primary: 'Poppins, -apple-system, BlinkMacSystemFont, sans-serif',
+        mono: '"Roboto Mono", monospace',
+    },
+    fontSize: {
+        xs: '10px',
+        sm: '12px',
+        base: '14px',
+        lg: '16px',
+        xl: '18px',
+        '2xl': '20px',
+        '3xl': '24px',
+    },
+    fontWeight: {
+        regular: 400,
+        medium: 500,
+        semibold: 600,
+        bold: 700,
+    },
+};

package/package.json

@@ -0,0 +1,43 @@
+{
+    "name": "unicorn-design-system",
+    "version": "1.0.0",
+    "description": "🦄 Beautiful React components and design tokens",
+    "main": "dist/index.js",
+    "module": "dist/index.esm.js",
+    "types": "dist/index.d.ts",
+    "exports": {
+        ".": {
+            "types": "./dist/index.d.ts",
+            "import": "./dist/index.esm.js",
+            "require": "./dist/index.js"
+        },
+        "./styles": "./dist/styles.css"
+    },
+    "files": [
+        "dist",
+        "README.md",
+        "LICENSE"
+    ],
+    "scripts": {
+        "build": "tsc",
+        "dev": "tsc --watch"
+    },
+    "keywords": [
+        "react",
+        "components",
+        "design-system",
+        "ui-library",
+        "typescript"
+    ],
+    "author": "Your Name",
+    "license": "MIT",
+    "peerDependencies": {
+        "react": ">=18.0.0",
+        "react-dom": ">=18.0.0"
+    },
+    "devDependencies": {
+        "@types/react": "^18.2.0",
+        "@types/react-dom": "^18.2.0",
+        "typescript": "^5.3.0"
+    }
+}