@moving-walls/design-system 1.0.0

package/dist/src/types/index.d.ts

@@ -0,0 +1,87 @@
+import { ReactNode } from 'react';
+import { LucideProps } from 'lucide-react';
+export interface BaseProps {
+    className?: string;
+    children?: ReactNode;
+}
+export interface ButtonProps extends BaseProps {
+    variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'destructive';
+    size?: 'sm' | 'md' | 'lg';
+    disabled?: boolean;
+    loading?: boolean;
+    onClick?: () => void;
+    type?: 'button' | 'submit' | 'reset';
+}
+export interface CardProps extends BaseProps {
+    padding?: 'none' | 'sm' | 'md' | 'lg';
+    shadow?: 'none' | 'sm' | 'md' | 'lg';
+    border?: boolean;
+}
+export interface InputProps extends BaseProps {
+    type?: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url';
+    placeholder?: string;
+    value?: string;
+    defaultValue?: string;
+    disabled?: boolean;
+    required?: boolean;
+    error?: boolean;
+    helperText?: string;
+    label?: string;
+    onChange?: (value: string) => void;
+}
+export interface IconProps extends LucideProps {
+    name?: string;
+}
+export interface ModalProps extends BaseProps {
+    isOpen: boolean;
+    onClose: () => void;
+    title?: string;
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    closeOnOverlayClick?: boolean;
+    showCloseButton?: boolean;
+}
+export interface BadgeProps extends BaseProps {
+    variant?: 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'outline';
+    size?: 'sm' | 'md' | 'lg';
+}
+export interface ColorScale {
+    50: string;
+    100: string;
+    200: string;
+    300: string;
+    400: string;
+    500: string;
+    600: string;
+    700: string;
+    800: string;
+    900: string;
+}
+export interface DesignTokens {
+    colors: {
+        primary: ColorScale;
+        gray: ColorScale;
+        success: ColorScale;
+        warning: ColorScale;
+        error: ColorScale;
+    };
+    spacing: Record<string, string>;
+    typography: {
+        fontFamily: {
+            sans: string[];
+            mono: string[];
+        };
+        fontSize: Record<string, [string, {
+            lineHeight: string;
+        }]>;
+        fontWeight: Record<string, string>;
+    };
+    shadows: Record<string, string>;
+    breakpoints: Record<string, string>;
+    borderRadius: Record<string, string>;
+    zIndex: Record<string, string>;
+}
+export interface ThemeContextValue {
+    theme: 'light' | 'dark' | 'system';
+    setTheme: (theme: 'light' | 'dark' | 'system') => void;
+    resolvedTheme: 'light' | 'dark';
+}

package/dist/src/utils/iconCodeGenerator.d.ts

@@ -0,0 +1,18 @@
+export type CodeFormat = 'svg' | 'jsx' | 'vue' | 'svelte';
+export interface IconCustomization {
+    size: number;
+    color: string;
+    strokeWidth: number;
+    fillColor?: string;
+    className?: string;
+}
+export declare function generateIconCode(iconName: string, format: CodeFormat, customization: IconCustomization): string;
+export declare function generateCodeSnippets(iconName: string, customization: IconCustomization): {
+    svg: string;
+    jsx: string;
+    vue: string;
+    svelte: string;
+    html: string;
+    css: string;
+    tailwind: string;
+};

package/dist/src/utils/iconNameFormatter.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Utility functions for formatting icon names for display
+ */
+/**
+ * Formats an icon name for user-friendly display
+ * Converts camelCase, kebab-case, and snake_case to Title Case
+ *
+ * Examples:
+ * - "AlarmClock" -> "Alarm Clock"
+ * - "arrow-up-right" -> "Arrow Up Right"
+ * - "home_icon" -> "Home Icon"
+ * - "user" -> "User"
+ */
+export declare function formatIconName(iconName: string): string;
+/**
+ * Formats an icon name for technical contexts (keeping original format)
+ * Used in code snippets, file names, etc.
+ */
+export declare function formatTechnicalIconName(iconName: string): string;
+/**
+ * Generates a short description for an icon based on its name
+ */
+export declare function getIconDescription(iconName: string): string;

package/dist/src/utils/index.d.ts

@@ -0,0 +1,29 @@
+import { type ClassValue } from 'clsx';
+/**
+ * Combines class names using clsx and tailwind-merge
+ */
+export declare function cn(...inputs: ClassValue[]): string;
+/**
+ * Formats icon names from kebab-case to PascalCase
+ */
+export declare function formatIconName(name: string): string;
+/**
+ * Generates code snippets for icon usage
+ */
+export declare function generateIconCode(iconName: string, framework?: 'react' | 'vue' | 'html'): string;
+/**
+ * Debounce function for search and input operations
+ */
+export declare function debounce<T extends (...args: any[]) => any>(func: T, wait: number): (...args: Parameters<T>) => void;
+/**
+ * Converts hex color to RGB values
+ */
+export declare function hexToRgb(hex: string): {
+    r: number;
+    g: number;
+    b: number;
+} | null;
+/**
+ * Generates HSL color variations
+ */
+export declare function generateColorVariations(baseColor: string, steps?: number): string[];

package/dist/stories/Button.d.ts

@@ -0,0 +1,15 @@
+import './button.css';
+export interface ButtonProps {
+    /** Is this the principal call to action on the page? */
+    primary?: boolean;
+    /** What background color to use */
+    backgroundColor?: string;
+    /** How large should the button be? */
+    size?: 'small' | 'medium' | 'large';
+    /** Button contents */
+    label: string;
+    /** Optional click handler */
+    onClick?: () => void;
+}
+/** Primary UI component for user interaction */
+export declare const Button: ({ primary, size, backgroundColor, label, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/stories/Header.d.ts

@@ -0,0 +1,12 @@
+import './header.css';
+type User = {
+    name: string;
+};
+export interface HeaderProps {
+    user?: User;
+    onLogin?: () => void;
+    onLogout?: () => void;
+    onCreateAccount?: () => void;
+}
+export declare const Header: ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/stories/Page.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import './page.css';
+export declare const Page: React.FC;

package/dist/styles/index.css

@@ -0,0 +1 @@
+@keyframes wave{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes typewriter{0%{width:0}to{width:100%}}@keyframes glow{0%{text-shadow:0 0 5px #2563eb,0 0 10px #2563eb,0 0 15px #2563eb}to{text-shadow:0 0 10px #2563eb,0 0 20px #2563eb,0 0 30px #2563eb}}@keyframes typing{0%,80%,to{opacity:0}40%{opacity:1}}@keyframes scale{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}@keyframes mw-letter-1{0%,to{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-5px)}}@keyframes mw-letter-2{0%,to{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-5px)}}.mw-letter-1{animation:mw-letter-1 2s ease-in-out infinite;animation-delay:0s}.mw-letter-2{animation:mw-letter-2 2s ease-in-out infinite;animation-delay:.2s}@keyframes mw-progressive-fill{0%{clip-path:inset(0 100% 0 0)}50%{clip-path:inset(0 0 0 0)}to{clip-path:inset(0 100% 0 0)}}@keyframes mw-width-expand{0%{width:0}50%{width:100%}to{width:0}}@keyframes mw-slide-reveal{0%{transform:translateX(-100%)}50%{transform:translateX(0)}to{transform:translateX(100%)}}@keyframes mw-fill-left-right{0%{clip-path:inset(0 100% 0 0)}50%{clip-path:inset(0 0 0 0)}to{clip-path:inset(0 100% 0 0)}}@keyframes mw-fill-right-left{0%{clip-path:inset(0 0 0 100%)}50%{clip-path:inset(0 0 0 0)}to{clip-path:inset(0 0 0 100%)}}@keyframes mw-fill-top-bottom{0%{clip-path:inset(100% 0 0 0)}50%{clip-path:inset(0 0 0 0)}to{clip-path:inset(100% 0 0 0)}}@keyframes mw-fill-bottom-top{0%{clip-path:inset(0 0 100% 0)}50%{clip-path:inset(0 0 0 0)}to{clip-path:inset(0 0 100% 0)}}@keyframes mw-fill-center-out{0%{clip-path:inset(0 50% 0 50%)}50%{clip-path:inset(0 0 0 0)}to{clip-path:inset(0 50% 0 50%)}}@keyframes mw-fill-edges-in{0%{clip-path:inset(0 0 0 0)}25%{clip-path:inset(0 25% 0 25%)}50%{clip-path:inset(0 50% 0 50%)}75%{clip-path:inset(0 25% 0 25%)}to{clip-path:inset(0 0 0 0)}}@keyframes mw-glitch-low{0%,90%,to{transform:translate(0)}10%{transform:translate(-1px,1px)}20%{transform:translate(1px,-1px)}}@keyframes mw-glitch-medium{0%,80%,to{transform:translate(0)}10%{transform:translate(-2px,2px)}20%{transform:translate(2px,-2px)}30%{transform:translate(-1px,1px)}}@keyframes mw-glitch-high{0%,70%,to{transform:translate(0)}10%{transform:translate(-3px,3px)}20%{transform:translate(3px,-3px)}30%{transform:translate(-2px,2px)}40%{transform:translate(2px,-2px)}}@keyframes mw-glitch-red{0%,90%,to{transform:translate(0)}10%{transform:translate(-2px)}20%{transform:translate(2px)}}@keyframes mw-glitch-cyan{0%,90%,to{transform:translate(0)}10%{transform:translate(2px)}20%{transform:translate(-2px)}}@keyframes mw-heartbeat{0%,50%,to{transform:scale(1)}25%{transform:scale(1.1)}75%{transform:scale(1.05)}}@keyframes mw-matrix-rain{0%{transform:translateY(-100%)}to{transform:translateY(100%)}}@keyframes mw-matrix-1{0%{opacity:0;transform:translate(-20px,-30px)}50%{opacity:1}to{opacity:0;transform:translate(20px,30px)}}@keyframes mw-matrix-2{0%{opacity:0;transform:translate(10px,-20px)}50%{opacity:1}to{opacity:0;transform:translate(-10px,20px)}}@keyframes mw-matrix-3{0%{opacity:0;transform:translate(-10px,-25px)}50%{opacity:1}to{opacity:0;transform:translate(15px,25px)}}@keyframes mw-neon-flicker{0%,to{opacity:1}50%{opacity:.8}75%{opacity:1}85%{opacity:.9}95%{opacity:1}}@keyframes mw-bounce-letter{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}

package/dist/test/setup.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/test/test-utils.d.ts

@@ -0,0 +1,5 @@
+import { ReactElement } from 'react';
+import { RenderOptions } from '@testing-library/react';
+declare function customRender(ui: ReactElement, options?: Omit<RenderOptions, 'wrapper'>): import("@testing-library/react").RenderResult<typeof import("@testing-library/dom/types/queries"), HTMLElement, HTMLElement>;
+export * from '@testing-library/react';
+export { customRender as render };

package/dist/tokens/index.d.ts

@@ -0,0 +1,381 @@
+export declare const colors: {
+    primary: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    gray: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    success: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    warning: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    error: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+};
+export declare const spacing: {
+    0: string;
+    1: string;
+    2: string;
+    3: string;
+    4: string;
+    5: string;
+    6: string;
+    8: string;
+    10: string;
+    12: string;
+    16: string;
+    20: string;
+    24: string;
+    32: string;
+    40: string;
+    48: string;
+    56: string;
+    64: string;
+};
+export declare const typography: {
+    fontFamily: {
+        sans: string[];
+        mono: string[];
+    };
+    fontSize: {
+        xs: (string | {
+            lineHeight: string;
+        })[];
+        sm: (string | {
+            lineHeight: string;
+        })[];
+        base: (string | {
+            lineHeight: string;
+        })[];
+        lg: (string | {
+            lineHeight: string;
+        })[];
+        xl: (string | {
+            lineHeight: string;
+        })[];
+        '2xl': (string | {
+            lineHeight: string;
+        })[];
+        '3xl': (string | {
+            lineHeight: string;
+        })[];
+        '4xl': (string | {
+            lineHeight: string;
+        })[];
+        '5xl': (string | {
+            lineHeight: string;
+        })[];
+        '6xl': (string | {
+            lineHeight: string;
+        })[];
+    };
+    fontWeight: {
+        thin: string;
+        extralight: string;
+        light: string;
+        normal: string;
+        medium: string;
+        semibold: string;
+        bold: string;
+        extrabold: string;
+        black: string;
+    };
+};
+export declare const shadows: {
+    sm: string;
+    base: string;
+    md: string;
+    lg: string;
+    xl: string;
+    '2xl': string;
+    inner: string;
+};
+export declare const breakpoints: {
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    '2xl': string;
+};
+export declare const borderRadius: {
+    none: string;
+    sm: string;
+    base: string;
+    md: string;
+    lg: string;
+    xl: string;
+    '2xl': string;
+    '3xl': string;
+    full: string;
+};
+export declare const zIndex: {
+    auto: string;
+    0: string;
+    10: string;
+    20: string;
+    30: string;
+    40: string;
+    50: string;
+    dropdown: string;
+    sticky: string;
+    fixed: string;
+    modal: string;
+    popover: string;
+    tooltip: string;
+    toast: string;
+};
+export declare const tokens: {
+    colors: {
+        primary: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+        gray: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+        success: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+        warning: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+        error: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+    };
+    spacing: {
+        0: string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        5: string;
+        6: string;
+        8: string;
+        10: string;
+        12: string;
+        16: string;
+        20: string;
+        24: string;
+        32: string;
+        40: string;
+        48: string;
+        56: string;
+        64: string;
+    };
+    typography: {
+        fontFamily: {
+            sans: string[];
+            mono: string[];
+        };
+        fontSize: {
+            xs: (string | {
+                lineHeight: string;
+            })[];
+            sm: (string | {
+                lineHeight: string;
+            })[];
+            base: (string | {
+                lineHeight: string;
+            })[];
+            lg: (string | {
+                lineHeight: string;
+            })[];
+            xl: (string | {
+                lineHeight: string;
+            })[];
+            '2xl': (string | {
+                lineHeight: string;
+            })[];
+            '3xl': (string | {
+                lineHeight: string;
+            })[];
+            '4xl': (string | {
+                lineHeight: string;
+            })[];
+            '5xl': (string | {
+                lineHeight: string;
+            })[];
+            '6xl': (string | {
+                lineHeight: string;
+            })[];
+        };
+        fontWeight: {
+            thin: string;
+            extralight: string;
+            light: string;
+            normal: string;
+            medium: string;
+            semibold: string;
+            bold: string;
+            extrabold: string;
+            black: string;
+        };
+    };
+    shadows: {
+        sm: string;
+        base: string;
+        md: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+        inner: string;
+    };
+    breakpoints: {
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+    };
+    borderRadius: {
+        none: string;
+        sm: string;
+        base: string;
+        md: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+        '3xl': string;
+        full: string;
+    };
+    zIndex: {
+        auto: string;
+        0: string;
+        10: string;
+        20: string;
+        30: string;
+        40: string;
+        50: string;
+        dropdown: string;
+        sticky: string;
+        fixed: string;
+        modal: string;
+        popover: string;
+        tooltip: string;
+        toast: string;
+    };
+};
+export declare const cssVariables: {
+    ':root': {
+        '--mw-primary-50': string;
+        '--mw-primary-500': string;
+        '--mw-primary-600': string;
+        '--mw-gray-50': string;
+        '--mw-gray-100': string;
+        '--mw-gray-900': string;
+        '--mw-space-1': string;
+        '--mw-space-2': string;
+        '--mw-space-4': string;
+        '--mw-space-8': string;
+        '--mw-font-family-sans': string;
+        '--mw-text-sm': string | {
+            lineHeight: string;
+        };
+        '--mw-text-base': string | {
+            lineHeight: string;
+        };
+        '--mw-text-lg': string | {
+            lineHeight: string;
+        };
+        '--mw-shadow-sm': string;
+        '--mw-shadow-md': string;
+        '--mw-shadow-lg': string;
+        '--mw-radius-sm': string;
+        '--mw-radius-md': string;
+        '--mw-radius-lg': string;
+    };
+};
+export default tokens;