@marcoschwartz/lite-ui 0.1.0

package/README.md

@@ -0,0 +1,208 @@
+# Lite UI
+
+A lightweight UI component library built with Tailwind CSS and React.
+
+## Features
+
+- Built with TypeScript
+- Styled with Tailwind CSS
+- Tree-shakeable ESM and CJS builds
+- Live development with hot module reloading
+- Server Component compatible (works in Next.js App Router and other RSC frameworks)
+- Components are framework-agnostic React components
+- Built-in theming system with multiple pre-built themes
+
+## Development
+
+### Quick Start
+
+Run the library build watcher and demo app simultaneously:
+
+```bash
+npm run dev:all
+```
+
+This single command will:
+1. Start the UI library build in watch mode (auto-rebuilds on changes)
+2. Start the Next.js demo app on http://localhost:3000
+3. Automatically reflect changes from the library in the demo app
+
+### Individual Commands
+
+Build the library once:
+```bash
+npm run build
+```
+
+Build the library in watch mode:
+```bash
+npm run dev
+```
+
+Run the demo app only:
+```bash
+cd demo && npm run dev
+```
+
+## Components
+
+### Button
+
+A versatile button component with multiple variants and sizes.
+
+#### Variants
+- `primary` (default) - Blue button
+- `secondary` - Gray button
+- `success` - Green button
+- `danger` - Red button
+- `warning` - Yellow button
+- `info` - Cyan button
+
+#### Sizes
+- `sm` - Small
+- `md` (default) - Medium
+- `lg` - Large
+- `xl` - Extra Large
+
+#### Usage
+
+**In Server Components (Next.js App Router):**
+```tsx
+// app/page.tsx (Server Component)
+import { Button } from 'lite-ui';
+
+export default function Page() {
+  return (
+    <div>
+      <Button variant="primary" size="md">
+        Static Button (Server Rendered)
+      </Button>
+    </div>
+  );
+}
+```
+
+**In Client Components (with interactivity):**
+```tsx
+// app/components/InteractiveButton.tsx
+"use client";
+
+import { Button } from 'lite-ui';
+
+export function InteractiveButton() {
+  return (
+    <Button variant="success" onClick={() => alert('Clicked!')}>
+      Click Me
+    </Button>
+  );
+}
+```
+
+**In any React app:**
+```tsx
+import { Button } from 'lite-ui';
+
+function App() {
+  return (
+    <div>
+      <Button variant="primary" size="md">
+        Click Me
+      </Button>
+
+      <Button variant="success" size="lg" onClick={() => alert('Success!')}>
+        Submit
+      </Button>
+
+      <Button variant="danger" disabled>
+        Disabled
+      </Button>
+    </div>
+  );
+}
+```
+
+## Structure
+
+```
+lite-ui-js/
+├── src/              # UI library source code
+│   ├── components/   # React components
+│   └── index.ts      # Main export file
+├── demo/             # Next.js demo application
+├── dist/             # Built library (generated)
+└── dev.sh            # Development script
+```
+
+## Theming
+
+Lite UI includes a built-in theming system that allows you to easily switch between different visual styles.
+
+### Available Themes
+
+1. **Default** - Vibrant colors, shadows, and smooth animations
+2. **Minimalistic** - Flat design, subtle colors, minimal effects
+
+### Usage
+
+**Wrap your app with ThemeProvider:**
+```tsx
+import { ThemeProvider } from 'lite-ui';
+
+function App() {
+  return (
+    <ThemeProvider defaultTheme="default">
+      {/* your app */}
+    </ThemeProvider>
+  );
+}
+```
+
+**Switch themes dynamically:**
+```tsx
+"use client";
+
+import { useTheme, Button } from 'lite-ui';
+
+function ThemeSwitcher() {
+  const { themeName, setTheme } = useTheme();
+
+  return (
+    <div>
+      <p>Current theme: {themeName}</p>
+      <Button onClick={() => setTheme('default')}>Default Theme</Button>
+      <Button onClick={() => setTheme('minimalistic')}>Minimalistic Theme</Button>
+    </div>
+  );
+}
+```
+
+**Components work without ThemeProvider:**
+If you don't wrap your app in a ThemeProvider, components will automatically use the default theme.
+
+### Creating Custom Themes
+
+You can create custom themes by extending the theme configuration:
+
+```tsx
+import { themes, ThemeProvider } from 'lite-ui';
+
+const customTheme = {
+  ...themes.default,
+  name: 'custom',
+  button: {
+    ...themes.default.button,
+    variants: {
+      ...themes.default.button.variants,
+      primary: 'bg-purple-600 hover:bg-purple-700 text-white',
+    },
+  },
+};
+```
+
+## Technology Stack
+
+- **React 19** - UI framework
+- **TypeScript** - Type safety
+- **Tailwind CSS v4** - Styling
+- **tsup** - Build tool
+- **Next.js 15** - Demo app framework

package/dist/index.d.mts

@@ -0,0 +1,87 @@
+import React from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    children: React.ReactNode;
+}
+declare const Button: React.FC<ButtonProps>;
+
+interface SelectOption {
+    value: string;
+    label: string;
+}
+interface SelectProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'size' | 'onChange' | 'defaultValue'> {
+    options: SelectOption[];
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    placeholder?: string;
+    disabled?: boolean;
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+}
+declare const Select: React.FC<SelectProps>;
+
+type ThemeName = 'default' | 'minimalistic';
+interface ButtonTheme {
+    primary: string;
+    secondary: string;
+    success: string;
+    danger: string;
+    warning: string;
+    info: string;
+}
+interface SelectTheme {
+    base: string;
+    sizes: {
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    disabled: string;
+}
+interface Theme {
+    name: ThemeName;
+    button: {
+        base: string;
+        variants: ButtonTheme;
+        sizes: {
+            sm: string;
+            md: string;
+            lg: string;
+            xl: string;
+        };
+        disabled: string;
+    };
+    select: SelectTheme;
+}
+declare const themes: Record<ThemeName, Theme>;
+
+type ColorMode = 'light' | 'dark' | 'system';
+interface ThemeContextValue {
+    theme: Theme;
+    themeName: ThemeName;
+    setTheme: (themeName: ThemeName) => void;
+    colorMode: ColorMode;
+    setColorMode: (mode: ColorMode) => void;
+    resolvedColorMode: 'light' | 'dark';
+}
+declare function useTheme(): ThemeContextValue;
+interface ThemeProviderProps {
+    children: React.ReactNode;
+    defaultTheme?: ThemeName;
+    defaultColorMode?: ColorMode;
+}
+declare function ThemeProvider({ children, defaultTheme, defaultColorMode }: ThemeProviderProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Theme initialization script that runs before React hydration
+ * This prevents flickering by setting the theme before the page renders
+ * Must be inlined in the HTML <head> as a blocking script
+ */
+declare const themeScript = "\n(function() {\n  try {\n    // Get stored preferences\n    const storedTheme = localStorage.getItem('lite-ui-theme') || 'default';\n    const storedColorMode = localStorage.getItem('lite-ui-color-mode');\n\n    // Determine color mode (system, light, or dark)\n    let colorMode = storedColorMode;\n    if (!colorMode || colorMode === 'system') {\n      colorMode = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';\n    }\n\n    // Set attributes before render\n    document.documentElement.setAttribute('data-theme', storedTheme);\n    document.documentElement.setAttribute('data-color-mode', colorMode);\n\n    // Add dark class for Tailwind\n    if (colorMode === 'dark') {\n      document.documentElement.classList.add('dark');\n    } else {\n      document.documentElement.classList.remove('dark');\n    }\n  } catch (e) {\n    console.error('Failed to initialize theme:', e);\n  }\n})();\n";
+declare function getThemeScript(): string;
+
+export { Button, type ButtonProps, type ButtonTheme, type ColorMode, Select, type SelectOption, type SelectProps, type SelectTheme, type Theme, type ThemeName, ThemeProvider, getThemeScript, themeScript, themes, useTheme };

package/dist/index.d.ts

@@ -0,0 +1,87 @@
+import React from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    children: React.ReactNode;
+}
+declare const Button: React.FC<ButtonProps>;
+
+interface SelectOption {
+    value: string;
+    label: string;
+}
+interface SelectProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'size' | 'onChange' | 'defaultValue'> {
+    options: SelectOption[];
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    placeholder?: string;
+    disabled?: boolean;
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+}
+declare const Select: React.FC<SelectProps>;
+
+type ThemeName = 'default' | 'minimalistic';
+interface ButtonTheme {
+    primary: string;
+    secondary: string;
+    success: string;
+    danger: string;
+    warning: string;
+    info: string;
+}
+interface SelectTheme {
+    base: string;
+    sizes: {
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    disabled: string;
+}
+interface Theme {
+    name: ThemeName;
+    button: {
+        base: string;
+        variants: ButtonTheme;
+        sizes: {
+            sm: string;
+            md: string;
+            lg: string;
+            xl: string;
+        };
+        disabled: string;
+    };
+    select: SelectTheme;
+}
+declare const themes: Record<ThemeName, Theme>;
+
+type ColorMode = 'light' | 'dark' | 'system';
+interface ThemeContextValue {
+    theme: Theme;
+    themeName: ThemeName;
+    setTheme: (themeName: ThemeName) => void;
+    colorMode: ColorMode;
+    setColorMode: (mode: ColorMode) => void;
+    resolvedColorMode: 'light' | 'dark';
+}
+declare function useTheme(): ThemeContextValue;
+interface ThemeProviderProps {
+    children: React.ReactNode;
+    defaultTheme?: ThemeName;
+    defaultColorMode?: ColorMode;
+}
+declare function ThemeProvider({ children, defaultTheme, defaultColorMode }: ThemeProviderProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Theme initialization script that runs before React hydration
+ * This prevents flickering by setting the theme before the page renders
+ * Must be inlined in the HTML <head> as a blocking script
+ */
+declare const themeScript = "\n(function() {\n  try {\n    // Get stored preferences\n    const storedTheme = localStorage.getItem('lite-ui-theme') || 'default';\n    const storedColorMode = localStorage.getItem('lite-ui-color-mode');\n\n    // Determine color mode (system, light, or dark)\n    let colorMode = storedColorMode;\n    if (!colorMode || colorMode === 'system') {\n      colorMode = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';\n    }\n\n    // Set attributes before render\n    document.documentElement.setAttribute('data-theme', storedTheme);\n    document.documentElement.setAttribute('data-color-mode', colorMode);\n\n    // Add dark class for Tailwind\n    if (colorMode === 'dark') {\n      document.documentElement.classList.add('dark');\n    } else {\n      document.documentElement.classList.remove('dark');\n    }\n  } catch (e) {\n    console.error('Failed to initialize theme:', e);\n  }\n})();\n";
+declare function getThemeScript(): string;
+
+export { Button, type ButtonProps, type ButtonTheme, type ColorMode, Select, type SelectOption, type SelectProps, type SelectTheme, type Theme, type ThemeName, ThemeProvider, getThemeScript, themeScript, themes, useTheme };

package/dist/index.js

@@ -0,0 +1,358 @@
+"use client";
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  Button: () => Button,
+  Select: () => Select,
+  ThemeProvider: () => ThemeProvider,
+  getThemeScript: () => getThemeScript,
+  themeScript: () => themeScript,
+  themes: () => themes,
+  useTheme: () => useTheme
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/theme/ThemeProvider.tsx
+var import_react = require("react");
+
+// src/theme/themes.ts
+var themes = {
+  default: {
+    name: "default",
+    button: {
+      base: "font-semibold rounded-lg transition-all duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 active:scale-95",
+      variants: {
+        primary: "bg-blue-600 hover:bg-blue-700 active:bg-blue-800 text-white shadow-sm hover:shadow-md dark:bg-blue-500 dark:hover:bg-blue-600 dark:active:bg-blue-700",
+        secondary: "bg-gray-600 hover:bg-gray-700 active:bg-gray-800 text-white shadow-sm hover:shadow-md dark:bg-gray-500 dark:hover:bg-gray-600 dark:active:bg-gray-700",
+        success: "bg-green-600 hover:bg-green-700 active:bg-green-800 text-white shadow-sm hover:shadow-md dark:bg-green-500 dark:hover:bg-green-600 dark:active:bg-green-700",
+        danger: "bg-red-600 hover:bg-red-700 active:bg-red-800 text-white shadow-sm hover:shadow-md dark:bg-red-500 dark:hover:bg-red-600 dark:active:bg-red-700",
+        warning: "bg-yellow-500 hover:bg-yellow-600 active:bg-yellow-700 text-white shadow-sm hover:shadow-md dark:bg-yellow-400 dark:hover:bg-yellow-500 dark:active:bg-yellow-600",
+        info: "bg-cyan-600 hover:bg-cyan-700 active:bg-cyan-800 text-white shadow-sm hover:shadow-md dark:bg-cyan-500 dark:hover:bg-cyan-600 dark:active:bg-cyan-700"
+      },
+      sizes: {
+        sm: "px-3 py-1.5 text-sm",
+        md: "px-4 py-2 text-base",
+        lg: "px-6 py-3 text-lg",
+        xl: "px-8 py-4 text-xl"
+      },
+      disabled: "opacity-50 cursor-not-allowed hover:shadow-sm active:scale-100"
+    },
+    select: {
+      base: "w-full appearance-none rounded-lg border border-gray-300 bg-white text-gray-900 transition-all duration-150 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent shadow-sm hover:border-gray-400 pr-10 cursor-pointer dark:bg-gray-800 dark:border-gray-600 dark:text-gray-100 dark:hover:border-gray-500",
+      sizes: {
+        sm: "px-3 py-1.5 text-sm",
+        md: "px-4 py-2.5 text-base",
+        lg: "px-4 py-3 text-lg",
+        xl: "px-5 py-4 text-xl"
+      },
+      disabled: "opacity-50 cursor-not-allowed bg-gray-50 dark:bg-gray-900"
+    }
+  },
+  minimalistic: {
+    name: "minimalistic",
+    button: {
+      base: "font-normal rounded-none transition-colors duration-200 focus:outline-none border-2",
+      variants: {
+        primary: "bg-transparent border-white text-white hover:bg-white hover:text-black",
+        secondary: "bg-transparent border-gray-400 text-gray-400 hover:bg-gray-400 hover:text-black",
+        success: "bg-transparent border-green-400 text-green-400 hover:bg-green-400 hover:text-black",
+        danger: "bg-transparent border-red-400 text-red-400 hover:bg-red-400 hover:text-black",
+        warning: "bg-transparent border-yellow-400 text-yellow-400 hover:bg-yellow-400 hover:text-black",
+        info: "bg-transparent border-blue-400 text-blue-400 hover:bg-blue-400 hover:text-black"
+      },
+      sizes: {
+        sm: "px-4 py-2 text-sm uppercase tracking-wide",
+        md: "px-6 py-3 text-base uppercase tracking-wide",
+        lg: "px-8 py-4 text-lg uppercase tracking-wider",
+        xl: "px-10 py-5 text-xl uppercase tracking-wider"
+      },
+      disabled: "opacity-30 cursor-not-allowed hover:bg-transparent"
+    },
+    select: {
+      base: "w-full appearance-none rounded-none border-2 border-white bg-transparent text-white transition-colors duration-200 focus:outline-none pr-10 cursor-pointer placeholder:text-gray-500",
+      sizes: {
+        sm: "px-4 py-2 text-sm uppercase tracking-wide",
+        md: "px-4 py-3 text-base uppercase tracking-wide",
+        lg: "px-4 py-4 text-lg uppercase tracking-wider",
+        xl: "px-5 py-5 text-xl uppercase tracking-wider"
+      },
+      disabled: "opacity-30 cursor-not-allowed"
+    }
+  }
+};
+
+// src/theme/ThemeProvider.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var ThemeContext = (0, import_react.createContext)(void 0);
+function useTheme() {
+  const context = (0, import_react.useContext)(ThemeContext);
+  if (!context) {
+    throw new Error("useTheme must be used within a ThemeProvider");
+  }
+  return context;
+}
+function ThemeProvider({
+  children,
+  defaultTheme = "default",
+  defaultColorMode = "system"
+}) {
+  const [mounted, setMounted] = (0, import_react.useState)(false);
+  const [themeName, setThemeNameState] = (0, import_react.useState)(defaultTheme);
+  const [colorMode, setColorModeState] = (0, import_react.useState)(defaultColorMode);
+  const [resolvedColorMode, setResolvedColorMode] = (0, import_react.useState)("light");
+  (0, import_react.useEffect)(() => {
+    setMounted(true);
+    const storedTheme = localStorage.getItem("lite-ui-theme");
+    const storedColorMode = localStorage.getItem("lite-ui-color-mode");
+    const currentColorMode = document.documentElement.getAttribute("data-color-mode");
+    if (storedTheme) setThemeNameState(storedTheme);
+    if (storedColorMode) setColorModeState(storedColorMode);
+    if (currentColorMode) setResolvedColorMode(currentColorMode);
+  }, []);
+  const theme = themes[themeName];
+  const setTheme = (newThemeName) => {
+    setThemeNameState(newThemeName);
+    if (typeof window !== "undefined") {
+      localStorage.setItem("lite-ui-theme", newThemeName);
+      document.documentElement.setAttribute("data-theme", newThemeName);
+    }
+  };
+  const setColorMode = (mode) => {
+    if (typeof window === "undefined") return;
+    setColorModeState(mode);
+    localStorage.setItem("lite-ui-color-mode", mode);
+    let resolved;
+    if (mode === "system") {
+      resolved = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+    } else {
+      resolved = mode;
+    }
+    setResolvedColorMode(resolved);
+    document.documentElement.setAttribute("data-color-mode", resolved);
+    if (resolved === "dark") {
+      document.documentElement.classList.add("dark");
+    } else {
+      document.documentElement.classList.remove("dark");
+    }
+  };
+  (0, import_react.useEffect)(() => {
+    if (!mounted) return;
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    const handleChange = (e) => {
+      if (colorMode === "system") {
+        const resolved = e.matches ? "dark" : "light";
+        setResolvedColorMode(resolved);
+        document.documentElement.setAttribute("data-color-mode", resolved);
+        if (resolved === "dark") {
+          document.documentElement.classList.add("dark");
+        } else {
+          document.documentElement.classList.remove("dark");
+        }
+      }
+    };
+    mediaQuery.addEventListener("change", handleChange);
+    return () => mediaQuery.removeEventListener("change", handleChange);
+  }, [mounted, colorMode]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ThemeContext.Provider, { value: {
+    theme,
+    themeName,
+    setTheme,
+    colorMode,
+    setColorMode,
+    resolvedColorMode
+  }, children });
+}
+
+// src/components/Button.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var Button = ({
+  variant = "primary",
+  size = "md",
+  className = "",
+  children,
+  disabled,
+  ...props
+}) => {
+  const { theme } = useTheme();
+  const baseStyles = theme.button.base;
+  const variantStyles = theme.button.variants[variant];
+  const sizeStyles = theme.button.sizes[size];
+  const disabledStyles = disabled ? theme.button.disabled : "";
+  const classes = `${baseStyles} ${variantStyles} ${sizeStyles} ${disabledStyles} ${className}`.trim();
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "button",
+    {
+      className: classes,
+      disabled,
+      ...props,
+      children
+    }
+  );
+};
+
+// src/components/Select.tsx
+var import_react2 = require("react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var Select = ({
+  options,
+  size = "md",
+  placeholder,
+  className = "",
+  disabled,
+  value: controlledValue,
+  defaultValue,
+  onChange,
+  ...props
+}) => {
+  const { theme, themeName } = useTheme();
+  const [isOpen, setIsOpen] = (0, import_react2.useState)(false);
+  const [internalValue, setInternalValue] = (0, import_react2.useState)(defaultValue || "");
+  const dropdownRef = (0, import_react2.useRef)(null);
+  const value = controlledValue !== void 0 ? controlledValue : internalValue;
+  const selectedOption = options.find((opt) => opt.value === value);
+  const displayText = selectedOption ? selectedOption.label : placeholder || "Select...";
+  (0, import_react2.useEffect)(() => {
+    const handleClickOutside = (event) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    };
+    if (isOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+      return () => document.removeEventListener("mousedown", handleClickOutside);
+    }
+  }, [isOpen]);
+  const handleSelect = (optionValue) => {
+    if (disabled) return;
+    setInternalValue(optionValue);
+    onChange?.(optionValue);
+    setIsOpen(false);
+  };
+  const handleToggle = () => {
+    if (!disabled) {
+      setIsOpen(!isOpen);
+    }
+  };
+  const baseStyles = theme.select.base;
+  const sizeStyles = theme.select.sizes[size];
+  const disabledStyles = disabled ? theme.select.disabled : "";
+  const buttonClasses = `${baseStyles} ${sizeStyles} ${disabledStyles} ${className}`.trim();
+  const iconColor = themeName === "minimalistic" ? disabled ? "text-gray-600" : "text-white" : disabled ? "text-gray-400" : "text-gray-500";
+  const dropdownBaseStyles = themeName === "minimalistic" ? "bg-black border-2 border-white" : "bg-white border border-gray-300 shadow-lg dark:bg-gray-800 dark:border-gray-600";
+  const optionBaseStyles = themeName === "minimalistic" ? "text-white hover:bg-white hover:text-black transition-colors duration-200" : "text-gray-900 hover:bg-blue-50 transition-colors duration-150 dark:text-gray-100 dark:hover:bg-gray-700";
+  const optionSizeStyles = {
+    sm: "px-4 py-2 text-sm",
+    md: "px-4 py-2.5 text-base",
+    lg: "px-4 py-3 text-lg",
+    xl: "px-5 py-4 text-xl"
+  }[size];
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "relative inline-block w-full", ref: dropdownRef, ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "button",
+      {
+        type: "button",
+        className: buttonClasses,
+        onClick: handleToggle,
+        disabled,
+        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: !selectedOption && placeholder ? "opacity-50" : "", children: displayText })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "pointer-events-none absolute inset-y-0 right-0 flex items-center pr-4", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "svg",
+      {
+        className: `h-5 w-5 transition-transform duration-200 ${iconColor} ${isOpen ? "rotate-180" : ""}`,
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 20 20",
+        fill: "currentColor",
+        "aria-hidden": "true",
+        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "path",
+          {
+            fillRule: "evenodd",
+            d: "M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z",
+            clipRule: "evenodd"
+          }
+        )
+      }
+    ) }),
+    isOpen && !disabled && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "div",
+      {
+        className: `absolute z-50 w-full mt-1 ${dropdownBaseStyles} rounded-lg overflow-hidden`,
+        style: { maxHeight: "300px", overflowY: "auto" },
+        children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "div",
+          {
+            className: `${optionBaseStyles} ${optionSizeStyles} cursor-pointer ${value === option.value ? themeName === "minimalistic" ? "bg-white text-black" : "bg-blue-100 dark:bg-blue-900" : ""}`,
+            onClick: () => handleSelect(option.value),
+            children: option.label
+          },
+          option.value
+        ))
+      }
+    )
+  ] });
+};
+
+// src/utils/theme-script.ts
+var themeScript = `
+(function() {
+  try {
+    // Get stored preferences
+    const storedTheme = localStorage.getItem('lite-ui-theme') || 'default';
+    const storedColorMode = localStorage.getItem('lite-ui-color-mode');
+
+    // Determine color mode (system, light, or dark)
+    let colorMode = storedColorMode;
+    if (!colorMode || colorMode === 'system') {
+      colorMode = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+    }
+
+    // Set attributes before render
+    document.documentElement.setAttribute('data-theme', storedTheme);
+    document.documentElement.setAttribute('data-color-mode', colorMode);
+
+    // Add dark class for Tailwind
+    if (colorMode === 'dark') {
+      document.documentElement.classList.add('dark');
+    } else {
+      document.documentElement.classList.remove('dark');
+    }
+  } catch (e) {
+    console.error('Failed to initialize theme:', e);
+  }
+})();
+`;
+function getThemeScript() {
+  return themeScript;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Button,
+  Select,
+  ThemeProvider,
+  getThemeScript,
+  themeScript,
+  themes,
+  useTheme
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/theme/ThemeProvider.tsx","../src/theme/themes.ts","../src/components/Button.tsx","../src/components/Select.tsx","../src/utils/theme-script.ts"],"sourcesContent":["export { Button } from './components/Button';\nexport type { ButtonProps } from './components/Button';\n\nexport { Select } from './components/Select';\nexport type { SelectProps, SelectOption } from './components/Select';\n\nexport { ThemeProvider, useTheme } from './theme/ThemeProvider';\nexport type { ColorMode } from './theme/ThemeProvider';\nexport { themes } from './theme/themes';\nexport type { ThemeName, Theme, ButtonTheme, SelectTheme } from './theme/themes';\n\nexport { themeScript, getThemeScript } from './utils/theme-script';\n","\"use client\";\n\nimport React, { createContext, useContext, useState, useEffect } from 'react';\nimport { themes, ThemeName, Theme } from './themes';\n\nexport type ColorMode = 'light' | 'dark' | 'system';\n\ninterface ThemeContextValue {\n  theme: Theme;\n  themeName: ThemeName;\n  setTheme: (themeName: ThemeName) => void;\n  colorMode: ColorMode;\n  setColorMode: (mode: ColorMode) => void;\n  resolvedColorMode: 'light' | 'dark';\n}\n\nconst ThemeContext = createContext<ThemeContextValue | undefined>(undefined);\n\nexport function useTheme() {\n  const context = useContext(ThemeContext);\n  if (!context) {\n    throw new Error('useTheme must be used within a ThemeProvider');\n  }\n  return context;\n}\n\ninterface ThemeProviderProps {\n  children: React.ReactNode;\n  defaultTheme?: ThemeName;\n  defaultColorMode?: ColorMode;\n}\n\nexport function ThemeProvider({\n  children,\n  defaultTheme = 'default',\n  defaultColorMode = 'system'\n}: ThemeProviderProps) {\n  const [mounted, setMounted] = useState(false);\n\n  // Initialize from defaults (will sync with actual values after mount)\n  const [themeName, setThemeNameState] = useState<ThemeName>(defaultTheme);\n  const [colorMode, setColorModeState] = useState<ColorMode>(defaultColorMode);\n  const [resolvedColorMode, setResolvedColorMode] = useState<'light' | 'dark'>('light');\n\n  // Sync with actual values after mount to avoid hydration mismatch\n  useEffect(() => {\n    setMounted(true);\n\n    // Read actual values from localStorage and DOM\n    const storedTheme = localStorage.getItem('lite-ui-theme') as ThemeName;\n    const storedColorMode = localStorage.getItem('lite-ui-color-mode') as ColorMode;\n    const currentColorMode = document.documentElement.getAttribute('data-color-mode') as 'light' | 'dark';\n\n    if (storedTheme) setThemeNameState(storedTheme);\n    if (storedColorMode) setColorModeState(storedColorMode);\n    if (currentColorMode) setResolvedColorMode(currentColorMode);\n  }, []);\n\n  const theme = themes[themeName];\n\n  // Update theme\n  const setTheme = (newThemeName: ThemeName) => {\n    setThemeNameState(newThemeName);\n    if (typeof window !== 'undefined') {\n      localStorage.setItem('lite-ui-theme', newThemeName);\n      document.documentElement.setAttribute('data-theme', newThemeName);\n    }\n  };\n\n  // Update color mode\n  const setColorMode = (mode: ColorMode) => {\n    if (typeof window === 'undefined') return;\n\n    setColorModeState(mode);\n    localStorage.setItem('lite-ui-color-mode', mode);\n\n    let resolved: 'light' | 'dark';\n    if (mode === 'system') {\n      resolved = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';\n    } else {\n      resolved = mode;\n    }\n\n    setResolvedColorMode(resolved);\n    document.documentElement.setAttribute('data-color-mode', resolved);\n\n    if (resolved === 'dark') {\n      document.documentElement.classList.add('dark');\n    } else {\n      document.documentElement.classList.remove('dark');\n    }\n  };\n\n  // Listen for system theme changes\n  useEffect(() => {\n    if (!mounted) return;\n\n    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');\n\n    const handleChange = (e: MediaQueryListEvent) => {\n      if (colorMode === 'system') {\n        const resolved = e.matches ? 'dark' : 'light';\n        setResolvedColorMode(resolved);\n        document.documentElement.setAttribute('data-color-mode', resolved);\n\n        if (resolved === 'dark') {\n          document.documentElement.classList.add('dark');\n        } else {\n          document.documentElement.classList.remove('dark');\n        }\n      }\n    };\n\n    mediaQuery.addEventListener('change', handleChange);\n    return () => mediaQuery.removeEventListener('change', handleChange);\n  }, [mounted, colorMode]);\n\n  return (\n    <ThemeContext.Provider value={{\n      theme,\n      themeName,\n      setTheme,\n      colorMode,\n      setColorMode,\n      resolvedColorMode\n    }}>\n      {children}\n    </ThemeContext.Provider>\n  );\n}\n","export type ThemeName = 'default' | 'minimalistic';\n\nexport interface ButtonTheme {\n  primary: string;\n  secondary: string;\n  success: string;\n  danger: string;\n  warning: string;\n  info: string;\n}\n\nexport interface SelectTheme {\n  base: string;\n  sizes: {\n    sm: string;\n    md: string;\n    lg: string;\n    xl: string;\n  };\n  disabled: string;\n}\n\nexport interface Theme {\n  name: ThemeName;\n  button: {\n    base: string;\n    variants: ButtonTheme;\n    sizes: {\n      sm: string;\n      md: string;\n      lg: string;\n      xl: string;\n    };\n    disabled: string;\n  };\n  select: SelectTheme;\n}\n\nexport const themes: Record<ThemeName, Theme> = {\n  default: {\n    name: 'default',\n    button: {\n      base: 'font-semibold rounded-lg transition-all duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 active:scale-95',\n      variants: {\n        primary: 'bg-blue-600 hover:bg-blue-700 active:bg-blue-800 text-white shadow-sm hover:shadow-md dark:bg-blue-500 dark:hover:bg-blue-600 dark:active:bg-blue-700',\n        secondary: 'bg-gray-600 hover:bg-gray-700 active:bg-gray-800 text-white shadow-sm hover:shadow-md dark:bg-gray-500 dark:hover:bg-gray-600 dark:active:bg-gray-700',\n        success: 'bg-green-600 hover:bg-green-700 active:bg-green-800 text-white shadow-sm hover:shadow-md dark:bg-green-500 dark:hover:bg-green-600 dark:active:bg-green-700',\n        danger: 'bg-red-600 hover:bg-red-700 active:bg-red-800 text-white shadow-sm hover:shadow-md dark:bg-red-500 dark:hover:bg-red-600 dark:active:bg-red-700',\n        warning: 'bg-yellow-500 hover:bg-yellow-600 active:bg-yellow-700 text-white shadow-sm hover:shadow-md dark:bg-yellow-400 dark:hover:bg-yellow-500 dark:active:bg-yellow-600',\n        info: 'bg-cyan-600 hover:bg-cyan-700 active:bg-cyan-800 text-white shadow-sm hover:shadow-md dark:bg-cyan-500 dark:hover:bg-cyan-600 dark:active:bg-cyan-700',\n      },\n      sizes: {\n        sm: 'px-3 py-1.5 text-sm',\n        md: 'px-4 py-2 text-base',\n        lg: 'px-6 py-3 text-lg',\n        xl: 'px-8 py-4 text-xl',\n      },\n      disabled: 'opacity-50 cursor-not-allowed hover:shadow-sm active:scale-100',\n    },\n    select: {\n      base: 'w-full appearance-none rounded-lg border border-gray-300 bg-white text-gray-900 transition-all duration-150 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent shadow-sm hover:border-gray-400 pr-10 cursor-pointer dark:bg-gray-800 dark:border-gray-600 dark:text-gray-100 dark:hover:border-gray-500',\n      sizes: {\n        sm: 'px-3 py-1.5 text-sm',\n        md: 'px-4 py-2.5 text-base',\n        lg: 'px-4 py-3 text-lg',\n        xl: 'px-5 py-4 text-xl',\n      },\n      disabled: 'opacity-50 cursor-not-allowed bg-gray-50 dark:bg-gray-900',\n    },\n  },\n  minimalistic: {\n    name: 'minimalistic',\n    button: {\n      base: 'font-normal rounded-none transition-colors duration-200 focus:outline-none border-2',\n      variants: {\n        primary: 'bg-transparent border-white text-white hover:bg-white hover:text-black',\n        secondary: 'bg-transparent border-gray-400 text-gray-400 hover:bg-gray-400 hover:text-black',\n        success: 'bg-transparent border-green-400 text-green-400 hover:bg-green-400 hover:text-black',\n        danger: 'bg-transparent border-red-400 text-red-400 hover:bg-red-400 hover:text-black',\n        warning: 'bg-transparent border-yellow-400 text-yellow-400 hover:bg-yellow-400 hover:text-black',\n        info: 'bg-transparent border-blue-400 text-blue-400 hover:bg-blue-400 hover:text-black',\n      },\n      sizes: {\n        sm: 'px-4 py-2 text-sm uppercase tracking-wide',\n        md: 'px-6 py-3 text-base uppercase tracking-wide',\n        lg: 'px-8 py-4 text-lg uppercase tracking-wider',\n        xl: 'px-10 py-5 text-xl uppercase tracking-wider',\n      },\n      disabled: 'opacity-30 cursor-not-allowed hover:bg-transparent',\n    },\n    select: {\n      base: 'w-full appearance-none rounded-none border-2 border-white bg-transparent text-white transition-colors duration-200 focus:outline-none pr-10 cursor-pointer placeholder:text-gray-500',\n      sizes: {\n        sm: 'px-4 py-2 text-sm uppercase tracking-wide',\n        md: 'px-4 py-3 text-base uppercase tracking-wide',\n        lg: 'px-4 py-4 text-lg uppercase tracking-wider',\n        xl: 'px-5 py-5 text-xl uppercase tracking-wider',\n      },\n      disabled: 'opacity-30 cursor-not-allowed',\n    },\n  },\n};\n","\"use client\";\n\nimport React from 'react';\nimport { useTheme } from '../theme/ThemeProvider';\n\nexport interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  variant?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';\n  size?: 'sm' | 'md' | 'lg' | 'xl';\n  children: React.ReactNode;\n}\n\nexport const Button: React.FC<ButtonProps> = ({\n  variant = 'primary',\n  size = 'md',\n  className = '',\n  children,\n  disabled,\n  ...props\n}) => {\n  const { theme } = useTheme();\n\n  const baseStyles = theme.button.base;\n  const variantStyles = theme.button.variants[variant];\n  const sizeStyles = theme.button.sizes[size];\n  const disabledStyles = disabled ? theme.button.disabled : '';\n\n  const classes = `${baseStyles} ${variantStyles} ${sizeStyles} ${disabledStyles} ${className}`.trim();\n\n  return (\n    <button\n      className={classes}\n      disabled={disabled}\n      {...props}\n    >\n      {children}\n    </button>\n  );\n};\n","\"use client\";\n\nimport React, { useState, useRef, useEffect } from 'react';\nimport { useTheme } from '../theme/ThemeProvider';\n\nexport interface SelectOption {\n  value: string;\n  label: string;\n}\n\nexport interface SelectProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'size' | 'onChange' | 'defaultValue'> {\n  options: SelectOption[];\n  size?: 'sm' | 'md' | 'lg' | 'xl';\n  placeholder?: string;\n  disabled?: boolean;\n  value?: string;\n  defaultValue?: string;\n  onChange?: (value: string) => void;\n}\n\nexport const Select: React.FC<SelectProps> = ({\n  options,\n  size = 'md',\n  placeholder,\n  className = '',\n  disabled,\n  value: controlledValue,\n  defaultValue,\n  onChange,\n  ...props\n}) => {\n  const { theme, themeName } = useTheme();\n  const [isOpen, setIsOpen] = useState(false);\n  const [internalValue, setInternalValue] = useState(defaultValue || '');\n  const dropdownRef = useRef<HTMLDivElement>(null);\n\n  // Use controlled value if provided, otherwise use internal state\n  const value = controlledValue !== undefined ? controlledValue : internalValue;\n\n  // Find the selected option\n  const selectedOption = options.find(opt => opt.value === value);\n  const displayText = selectedOption ? selectedOption.label : placeholder || 'Select...';\n\n  // Close dropdown when clicking outside\n  useEffect(() => {\n    const handleClickOutside = (event: MouseEvent) => {\n      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {\n        setIsOpen(false);\n      }\n    };\n\n    if (isOpen) {\n      document.addEventListener('mousedown', handleClickOutside);\n      return () => document.removeEventListener('mousedown', handleClickOutside);\n    }\n  }, [isOpen]);\n\n  const handleSelect = (optionValue: string) => {\n    if (disabled) return;\n\n    setInternalValue(optionValue);\n    onChange?.(optionValue);\n    setIsOpen(false);\n  };\n\n  const handleToggle = () => {\n    if (!disabled) {\n      setIsOpen(!isOpen);\n    }\n  };\n\n  const baseStyles = theme.select.base;\n  const sizeStyles = theme.select.sizes[size];\n  const disabledStyles = disabled ? theme.select.disabled : '';\n\n  const buttonClasses = `${baseStyles} ${sizeStyles} ${disabledStyles} ${className}`.trim();\n\n  // Icon color based on theme\n  const iconColor = themeName === 'minimalistic'\n    ? (disabled ? 'text-gray-600' : 'text-white')\n    : (disabled ? 'text-gray-400' : 'text-gray-500');\n\n  // Dropdown menu styles based on theme\n  const dropdownBaseStyles = themeName === 'minimalistic'\n    ? 'bg-black border-2 border-white'\n    : 'bg-white border border-gray-300 shadow-lg dark:bg-gray-800 dark:border-gray-600';\n\n  const optionBaseStyles = themeName === 'minimalistic'\n    ? 'text-white hover:bg-white hover:text-black transition-colors duration-200'\n    : 'text-gray-900 hover:bg-blue-50 transition-colors duration-150 dark:text-gray-100 dark:hover:bg-gray-700';\n\n  const optionSizeStyles = {\n    sm: 'px-4 py-2 text-sm',\n    md: 'px-4 py-2.5 text-base',\n    lg: 'px-4 py-3 text-lg',\n    xl: 'px-5 py-4 text-xl',\n  }[size];\n\n  return (\n    <div className=\"relative inline-block w-full\" ref={dropdownRef} {...props}>\n      {/* Custom button that looks like select */}\n      <button\n        type=\"button\"\n        className={buttonClasses}\n        onClick={handleToggle}\n        disabled={disabled}\n      >\n        <span className={!selectedOption && placeholder ? 'opacity-50' : ''}>\n          {displayText}\n        </span>\n      </button>\n\n      {/* Chevron icon */}\n      <div className=\"pointer-events-none absolute inset-y-0 right-0 flex items-center pr-4\">\n        <svg\n          className={`h-5 w-5 transition-transform duration-200 ${iconColor} ${isOpen ? 'rotate-180' : ''}`}\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 20 20\"\n          fill=\"currentColor\"\n          aria-hidden=\"true\"\n        >\n          <path\n            fillRule=\"evenodd\"\n            d=\"M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z\"\n            clipRule=\"evenodd\"\n          />\n        </svg>\n      </div>\n\n      {/* Custom dropdown menu */}\n      {isOpen && !disabled && (\n        <div\n          className={`absolute z-50 w-full mt-1 ${dropdownBaseStyles} rounded-lg overflow-hidden`}\n          style={{ maxHeight: '300px', overflowY: 'auto' }}\n        >\n          {options.map((option) => (\n            <div\n              key={option.value}\n              className={`${optionBaseStyles} ${optionSizeStyles} cursor-pointer ${\n                value === option.value ? (themeName === 'minimalistic' ? 'bg-white text-black' : 'bg-blue-100 dark:bg-blue-900') : ''\n              }`}\n              onClick={() => handleSelect(option.value)}\n            >\n              {option.label}\n            </div>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n};\n","/**\n * Theme initialization script that runs before React hydration\n * This prevents flickering by setting the theme before the page renders\n * Must be inlined in the HTML <head> as a blocking script\n */\n\nexport const themeScript = `\n(function() {\n  try {\n    // Get stored preferences\n    const storedTheme = localStorage.getItem('lite-ui-theme') || 'default';\n    const storedColorMode = localStorage.getItem('lite-ui-color-mode');\n\n    // Determine color mode (system, light, or dark)\n    let colorMode = storedColorMode;\n    if (!colorMode || colorMode === 'system') {\n      colorMode = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';\n    }\n\n    // Set attributes before render\n    document.documentElement.setAttribute('data-theme', storedTheme);\n    document.documentElement.setAttribute('data-color-mode', colorMode);\n\n    // Add dark class for Tailwind\n    if (colorMode === 'dark') {\n      document.documentElement.classList.add('dark');\n    } else {\n      document.documentElement.classList.remove('dark');\n    }\n  } catch (e) {\n    console.error('Failed to initialize theme:', e);\n  }\n})();\n`;\n\nexport function getThemeScript() {\n  return themeScript;\n}\n"],"mappings":"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","names":["import_jsx_runtime","import_react","import_jsx_runtime"]}

package/dist/index.mjs

@@ -0,0 +1,326 @@
+"use client";
+
+// src/theme/ThemeProvider.tsx
+import { createContext, useContext, useState, useEffect } from "react";
+
+// src/theme/themes.ts
+var themes = {
+  default: {
+    name: "default",
+    button: {
+      base: "font-semibold rounded-lg transition-all duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 active:scale-95",
+      variants: {
+        primary: "bg-blue-600 hover:bg-blue-700 active:bg-blue-800 text-white shadow-sm hover:shadow-md dark:bg-blue-500 dark:hover:bg-blue-600 dark:active:bg-blue-700",
+        secondary: "bg-gray-600 hover:bg-gray-700 active:bg-gray-800 text-white shadow-sm hover:shadow-md dark:bg-gray-500 dark:hover:bg-gray-600 dark:active:bg-gray-700",
+        success: "bg-green-600 hover:bg-green-700 active:bg-green-800 text-white shadow-sm hover:shadow-md dark:bg-green-500 dark:hover:bg-green-600 dark:active:bg-green-700",
+        danger: "bg-red-600 hover:bg-red-700 active:bg-red-800 text-white shadow-sm hover:shadow-md dark:bg-red-500 dark:hover:bg-red-600 dark:active:bg-red-700",
+        warning: "bg-yellow-500 hover:bg-yellow-600 active:bg-yellow-700 text-white shadow-sm hover:shadow-md dark:bg-yellow-400 dark:hover:bg-yellow-500 dark:active:bg-yellow-600",
+        info: "bg-cyan-600 hover:bg-cyan-700 active:bg-cyan-800 text-white shadow-sm hover:shadow-md dark:bg-cyan-500 dark:hover:bg-cyan-600 dark:active:bg-cyan-700"
+      },
+      sizes: {
+        sm: "px-3 py-1.5 text-sm",
+        md: "px-4 py-2 text-base",
+        lg: "px-6 py-3 text-lg",
+        xl: "px-8 py-4 text-xl"
+      },
+      disabled: "opacity-50 cursor-not-allowed hover:shadow-sm active:scale-100"
+    },
+    select: {
+      base: "w-full appearance-none rounded-lg border border-gray-300 bg-white text-gray-900 transition-all duration-150 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent shadow-sm hover:border-gray-400 pr-10 cursor-pointer dark:bg-gray-800 dark:border-gray-600 dark:text-gray-100 dark:hover:border-gray-500",
+      sizes: {
+        sm: "px-3 py-1.5 text-sm",
+        md: "px-4 py-2.5 text-base",
+        lg: "px-4 py-3 text-lg",
+        xl: "px-5 py-4 text-xl"
+      },
+      disabled: "opacity-50 cursor-not-allowed bg-gray-50 dark:bg-gray-900"
+    }
+  },
+  minimalistic: {
+    name: "minimalistic",
+    button: {
+      base: "font-normal rounded-none transition-colors duration-200 focus:outline-none border-2",
+      variants: {
+        primary: "bg-transparent border-white text-white hover:bg-white hover:text-black",
+        secondary: "bg-transparent border-gray-400 text-gray-400 hover:bg-gray-400 hover:text-black",
+        success: "bg-transparent border-green-400 text-green-400 hover:bg-green-400 hover:text-black",
+        danger: "bg-transparent border-red-400 text-red-400 hover:bg-red-400 hover:text-black",
+        warning: "bg-transparent border-yellow-400 text-yellow-400 hover:bg-yellow-400 hover:text-black",
+        info: "bg-transparent border-blue-400 text-blue-400 hover:bg-blue-400 hover:text-black"
+      },
+      sizes: {
+        sm: "px-4 py-2 text-sm uppercase tracking-wide",
+        md: "px-6 py-3 text-base uppercase tracking-wide",
+        lg: "px-8 py-4 text-lg uppercase tracking-wider",
+        xl: "px-10 py-5 text-xl uppercase tracking-wider"
+      },
+      disabled: "opacity-30 cursor-not-allowed hover:bg-transparent"
+    },
+    select: {
+      base: "w-full appearance-none rounded-none border-2 border-white bg-transparent text-white transition-colors duration-200 focus:outline-none pr-10 cursor-pointer placeholder:text-gray-500",
+      sizes: {
+        sm: "px-4 py-2 text-sm uppercase tracking-wide",
+        md: "px-4 py-3 text-base uppercase tracking-wide",
+        lg: "px-4 py-4 text-lg uppercase tracking-wider",
+        xl: "px-5 py-5 text-xl uppercase tracking-wider"
+      },
+      disabled: "opacity-30 cursor-not-allowed"
+    }
+  }
+};
+
+// src/theme/ThemeProvider.tsx
+import { jsx } from "react/jsx-runtime";
+var ThemeContext = createContext(void 0);
+function useTheme() {
+  const context = useContext(ThemeContext);
+  if (!context) {
+    throw new Error("useTheme must be used within a ThemeProvider");
+  }
+  return context;
+}
+function ThemeProvider({
+  children,
+  defaultTheme = "default",
+  defaultColorMode = "system"
+}) {
+  const [mounted, setMounted] = useState(false);
+  const [themeName, setThemeNameState] = useState(defaultTheme);
+  const [colorMode, setColorModeState] = useState(defaultColorMode);
+  const [resolvedColorMode, setResolvedColorMode] = useState("light");
+  useEffect(() => {
+    setMounted(true);
+    const storedTheme = localStorage.getItem("lite-ui-theme");
+    const storedColorMode = localStorage.getItem("lite-ui-color-mode");
+    const currentColorMode = document.documentElement.getAttribute("data-color-mode");
+    if (storedTheme) setThemeNameState(storedTheme);
+    if (storedColorMode) setColorModeState(storedColorMode);
+    if (currentColorMode) setResolvedColorMode(currentColorMode);
+  }, []);
+  const theme = themes[themeName];
+  const setTheme = (newThemeName) => {
+    setThemeNameState(newThemeName);
+    if (typeof window !== "undefined") {
+      localStorage.setItem("lite-ui-theme", newThemeName);
+      document.documentElement.setAttribute("data-theme", newThemeName);
+    }
+  };
+  const setColorMode = (mode) => {
+    if (typeof window === "undefined") return;
+    setColorModeState(mode);
+    localStorage.setItem("lite-ui-color-mode", mode);
+    let resolved;
+    if (mode === "system") {
+      resolved = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+    } else {
+      resolved = mode;
+    }
+    setResolvedColorMode(resolved);
+    document.documentElement.setAttribute("data-color-mode", resolved);
+    if (resolved === "dark") {
+      document.documentElement.classList.add("dark");
+    } else {
+      document.documentElement.classList.remove("dark");
+    }
+  };
+  useEffect(() => {
+    if (!mounted) return;
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    const handleChange = (e) => {
+      if (colorMode === "system") {
+        const resolved = e.matches ? "dark" : "light";
+        setResolvedColorMode(resolved);
+        document.documentElement.setAttribute("data-color-mode", resolved);
+        if (resolved === "dark") {
+          document.documentElement.classList.add("dark");
+        } else {
+          document.documentElement.classList.remove("dark");
+        }
+      }
+    };
+    mediaQuery.addEventListener("change", handleChange);
+    return () => mediaQuery.removeEventListener("change", handleChange);
+  }, [mounted, colorMode]);
+  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value: {
+    theme,
+    themeName,
+    setTheme,
+    colorMode,
+    setColorMode,
+    resolvedColorMode
+  }, children });
+}
+
+// src/components/Button.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var Button = ({
+  variant = "primary",
+  size = "md",
+  className = "",
+  children,
+  disabled,
+  ...props
+}) => {
+  const { theme } = useTheme();
+  const baseStyles = theme.button.base;
+  const variantStyles = theme.button.variants[variant];
+  const sizeStyles = theme.button.sizes[size];
+  const disabledStyles = disabled ? theme.button.disabled : "";
+  const classes = `${baseStyles} ${variantStyles} ${sizeStyles} ${disabledStyles} ${className}`.trim();
+  return /* @__PURE__ */ jsx2(
+    "button",
+    {
+      className: classes,
+      disabled,
+      ...props,
+      children
+    }
+  );
+};
+
+// src/components/Select.tsx
+import { useState as useState2, useRef, useEffect as useEffect2 } from "react";
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+var Select = ({
+  options,
+  size = "md",
+  placeholder,
+  className = "",
+  disabled,
+  value: controlledValue,
+  defaultValue,
+  onChange,
+  ...props
+}) => {
+  const { theme, themeName } = useTheme();
+  const [isOpen, setIsOpen] = useState2(false);
+  const [internalValue, setInternalValue] = useState2(defaultValue || "");
+  const dropdownRef = useRef(null);
+  const value = controlledValue !== void 0 ? controlledValue : internalValue;
+  const selectedOption = options.find((opt) => opt.value === value);
+  const displayText = selectedOption ? selectedOption.label : placeholder || "Select...";
+  useEffect2(() => {
+    const handleClickOutside = (event) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    };
+    if (isOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+      return () => document.removeEventListener("mousedown", handleClickOutside);
+    }
+  }, [isOpen]);
+  const handleSelect = (optionValue) => {
+    if (disabled) return;
+    setInternalValue(optionValue);
+    onChange?.(optionValue);
+    setIsOpen(false);
+  };
+  const handleToggle = () => {
+    if (!disabled) {
+      setIsOpen(!isOpen);
+    }
+  };
+  const baseStyles = theme.select.base;
+  const sizeStyles = theme.select.sizes[size];
+  const disabledStyles = disabled ? theme.select.disabled : "";
+  const buttonClasses = `${baseStyles} ${sizeStyles} ${disabledStyles} ${className}`.trim();
+  const iconColor = themeName === "minimalistic" ? disabled ? "text-gray-600" : "text-white" : disabled ? "text-gray-400" : "text-gray-500";
+  const dropdownBaseStyles = themeName === "minimalistic" ? "bg-black border-2 border-white" : "bg-white border border-gray-300 shadow-lg dark:bg-gray-800 dark:border-gray-600";
+  const optionBaseStyles = themeName === "minimalistic" ? "text-white hover:bg-white hover:text-black transition-colors duration-200" : "text-gray-900 hover:bg-blue-50 transition-colors duration-150 dark:text-gray-100 dark:hover:bg-gray-700";
+  const optionSizeStyles = {
+    sm: "px-4 py-2 text-sm",
+    md: "px-4 py-2.5 text-base",
+    lg: "px-4 py-3 text-lg",
+    xl: "px-5 py-4 text-xl"
+  }[size];
+  return /* @__PURE__ */ jsxs("div", { className: "relative inline-block w-full", ref: dropdownRef, ...props, children: [
+    /* @__PURE__ */ jsx3(
+      "button",
+      {
+        type: "button",
+        className: buttonClasses,
+        onClick: handleToggle,
+        disabled,
+        children: /* @__PURE__ */ jsx3("span", { className: !selectedOption && placeholder ? "opacity-50" : "", children: displayText })
+      }
+    ),
+    /* @__PURE__ */ jsx3("div", { className: "pointer-events-none absolute inset-y-0 right-0 flex items-center pr-4", children: /* @__PURE__ */ jsx3(
+      "svg",
+      {
+        className: `h-5 w-5 transition-transform duration-200 ${iconColor} ${isOpen ? "rotate-180" : ""}`,
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 20 20",
+        fill: "currentColor",
+        "aria-hidden": "true",
+        children: /* @__PURE__ */ jsx3(
+          "path",
+          {
+            fillRule: "evenodd",
+            d: "M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z",
+            clipRule: "evenodd"
+          }
+        )
+      }
+    ) }),
+    isOpen && !disabled && /* @__PURE__ */ jsx3(
+      "div",
+      {
+        className: `absolute z-50 w-full mt-1 ${dropdownBaseStyles} rounded-lg overflow-hidden`,
+        style: { maxHeight: "300px", overflowY: "auto" },
+        children: options.map((option) => /* @__PURE__ */ jsx3(
+          "div",
+          {
+            className: `${optionBaseStyles} ${optionSizeStyles} cursor-pointer ${value === option.value ? themeName === "minimalistic" ? "bg-white text-black" : "bg-blue-100 dark:bg-blue-900" : ""}`,
+            onClick: () => handleSelect(option.value),
+            children: option.label
+          },
+          option.value
+        ))
+      }
+    )
+  ] });
+};
+
+// src/utils/theme-script.ts
+var themeScript = `
+(function() {
+  try {
+    // Get stored preferences
+    const storedTheme = localStorage.getItem('lite-ui-theme') || 'default';
+    const storedColorMode = localStorage.getItem('lite-ui-color-mode');
+
+    // Determine color mode (system, light, or dark)
+    let colorMode = storedColorMode;
+    if (!colorMode || colorMode === 'system') {
+      colorMode = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+    }
+
+    // Set attributes before render
+    document.documentElement.setAttribute('data-theme', storedTheme);
+    document.documentElement.setAttribute('data-color-mode', colorMode);
+
+    // Add dark class for Tailwind
+    if (colorMode === 'dark') {
+      document.documentElement.classList.add('dark');
+    } else {
+      document.documentElement.classList.remove('dark');
+    }
+  } catch (e) {
+    console.error('Failed to initialize theme:', e);
+  }
+})();
+`;
+function getThemeScript() {
+  return themeScript;
+}
+export {
+  Button,
+  Select,
+  ThemeProvider,
+  getThemeScript,
+  themeScript,
+  themes,
+  useTheme
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/theme/ThemeProvider.tsx","../src/theme/themes.ts","../src/components/Button.tsx","../src/components/Select.tsx","../src/utils/theme-script.ts"],"sourcesContent":["\"use client\";\n\nimport React, { createContext, useContext, useState, useEffect } from 'react';\nimport { themes, ThemeName, Theme } from './themes';\n\nexport type ColorMode = 'light' | 'dark' | 'system';\n\ninterface ThemeContextValue {\n  theme: Theme;\n  themeName: ThemeName;\n  setTheme: (themeName: ThemeName) => void;\n  colorMode: ColorMode;\n  setColorMode: (mode: ColorMode) => void;\n  resolvedColorMode: 'light' | 'dark';\n}\n\nconst ThemeContext = createContext<ThemeContextValue | undefined>(undefined);\n\nexport function useTheme() {\n  const context = useContext(ThemeContext);\n  if (!context) {\n    throw new Error('useTheme must be used within a ThemeProvider');\n  }\n  return context;\n}\n\ninterface ThemeProviderProps {\n  children: React.ReactNode;\n  defaultTheme?: ThemeName;\n  defaultColorMode?: ColorMode;\n}\n\nexport function ThemeProvider({\n  children,\n  defaultTheme = 'default',\n  defaultColorMode = 'system'\n}: ThemeProviderProps) {\n  const [mounted, setMounted] = useState(false);\n\n  // Initialize from defaults (will sync with actual values after mount)\n  const [themeName, setThemeNameState] = useState<ThemeName>(defaultTheme);\n  const [colorMode, setColorModeState] = useState<ColorMode>(defaultColorMode);\n  const [resolvedColorMode, setResolvedColorMode] = useState<'light' | 'dark'>('light');\n\n  // Sync with actual values after mount to avoid hydration mismatch\n  useEffect(() => {\n    setMounted(true);\n\n    // Read actual values from localStorage and DOM\n    const storedTheme = localStorage.getItem('lite-ui-theme') as ThemeName;\n    const storedColorMode = localStorage.getItem('lite-ui-color-mode') as ColorMode;\n    const currentColorMode = document.documentElement.getAttribute('data-color-mode') as 'light' | 'dark';\n\n    if (storedTheme) setThemeNameState(storedTheme);\n    if (storedColorMode) setColorModeState(storedColorMode);\n    if (currentColorMode) setResolvedColorMode(currentColorMode);\n  }, []);\n\n  const theme = themes[themeName];\n\n  // Update theme\n  const setTheme = (newThemeName: ThemeName) => {\n    setThemeNameState(newThemeName);\n    if (typeof window !== 'undefined') {\n      localStorage.setItem('lite-ui-theme', newThemeName);\n      document.documentElement.setAttribute('data-theme', newThemeName);\n    }\n  };\n\n  // Update color mode\n  const setColorMode = (mode: ColorMode) => {\n    if (typeof window === 'undefined') return;\n\n    setColorModeState(mode);\n    localStorage.setItem('lite-ui-color-mode', mode);\n\n    let resolved: 'light' | 'dark';\n    if (mode === 'system') {\n      resolved = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';\n    } else {\n      resolved = mode;\n    }\n\n    setResolvedColorMode(resolved);\n    document.documentElement.setAttribute('data-color-mode', resolved);\n\n    if (resolved === 'dark') {\n      document.documentElement.classList.add('dark');\n    } else {\n      document.documentElement.classList.remove('dark');\n    }\n  };\n\n  // Listen for system theme changes\n  useEffect(() => {\n    if (!mounted) return;\n\n    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');\n\n    const handleChange = (e: MediaQueryListEvent) => {\n      if (colorMode === 'system') {\n        const resolved = e.matches ? 'dark' : 'light';\n        setResolvedColorMode(resolved);\n        document.documentElement.setAttribute('data-color-mode', resolved);\n\n        if (resolved === 'dark') {\n          document.documentElement.classList.add('dark');\n        } else {\n          document.documentElement.classList.remove('dark');\n        }\n      }\n    };\n\n    mediaQuery.addEventListener('change', handleChange);\n    return () => mediaQuery.removeEventListener('change', handleChange);\n  }, [mounted, colorMode]);\n\n  return (\n    <ThemeContext.Provider value={{\n      theme,\n      themeName,\n      setTheme,\n      colorMode,\n      setColorMode,\n      resolvedColorMode\n    }}>\n      {children}\n    </ThemeContext.Provider>\n  );\n}\n","export type ThemeName = 'default' | 'minimalistic';\n\nexport interface ButtonTheme {\n  primary: string;\n  secondary: string;\n  success: string;\n  danger: string;\n  warning: string;\n  info: string;\n}\n\nexport interface SelectTheme {\n  base: string;\n  sizes: {\n    sm: string;\n    md: string;\n    lg: string;\n    xl: string;\n  };\n  disabled: string;\n}\n\nexport interface Theme {\n  name: ThemeName;\n  button: {\n    base: string;\n    variants: ButtonTheme;\n    sizes: {\n      sm: string;\n      md: string;\n      lg: string;\n      xl: string;\n    };\n    disabled: string;\n  };\n  select: SelectTheme;\n}\n\nexport const themes: Record<ThemeName, Theme> = {\n  default: {\n    name: 'default',\n    button: {\n      base: 'font-semibold rounded-lg transition-all duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 active:scale-95',\n      variants: {\n        primary: 'bg-blue-600 hover:bg-blue-700 active:bg-blue-800 text-white shadow-sm hover:shadow-md dark:bg-blue-500 dark:hover:bg-blue-600 dark:active:bg-blue-700',\n        secondary: 'bg-gray-600 hover:bg-gray-700 active:bg-gray-800 text-white shadow-sm hover:shadow-md dark:bg-gray-500 dark:hover:bg-gray-600 dark:active:bg-gray-700',\n        success: 'bg-green-600 hover:bg-green-700 active:bg-green-800 text-white shadow-sm hover:shadow-md dark:bg-green-500 dark:hover:bg-green-600 dark:active:bg-green-700',\n        danger: 'bg-red-600 hover:bg-red-700 active:bg-red-800 text-white shadow-sm hover:shadow-md dark:bg-red-500 dark:hover:bg-red-600 dark:active:bg-red-700',\n        warning: 'bg-yellow-500 hover:bg-yellow-600 active:bg-yellow-700 text-white shadow-sm hover:shadow-md dark:bg-yellow-400 dark:hover:bg-yellow-500 dark:active:bg-yellow-600',\n        info: 'bg-cyan-600 hover:bg-cyan-700 active:bg-cyan-800 text-white shadow-sm hover:shadow-md dark:bg-cyan-500 dark:hover:bg-cyan-600 dark:active:bg-cyan-700',\n      },\n      sizes: {\n        sm: 'px-3 py-1.5 text-sm',\n        md: 'px-4 py-2 text-base',\n        lg: 'px-6 py-3 text-lg',\n        xl: 'px-8 py-4 text-xl',\n      },\n      disabled: 'opacity-50 cursor-not-allowed hover:shadow-sm active:scale-100',\n    },\n    select: {\n      base: 'w-full appearance-none rounded-lg border border-gray-300 bg-white text-gray-900 transition-all duration-150 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent shadow-sm hover:border-gray-400 pr-10 cursor-pointer dark:bg-gray-800 dark:border-gray-600 dark:text-gray-100 dark:hover:border-gray-500',\n      sizes: {\n        sm: 'px-3 py-1.5 text-sm',\n        md: 'px-4 py-2.5 text-base',\n        lg: 'px-4 py-3 text-lg',\n        xl: 'px-5 py-4 text-xl',\n      },\n      disabled: 'opacity-50 cursor-not-allowed bg-gray-50 dark:bg-gray-900',\n    },\n  },\n  minimalistic: {\n    name: 'minimalistic',\n    button: {\n      base: 'font-normal rounded-none transition-colors duration-200 focus:outline-none border-2',\n      variants: {\n        primary: 'bg-transparent border-white text-white hover:bg-white hover:text-black',\n        secondary: 'bg-transparent border-gray-400 text-gray-400 hover:bg-gray-400 hover:text-black',\n        success: 'bg-transparent border-green-400 text-green-400 hover:bg-green-400 hover:text-black',\n        danger: 'bg-transparent border-red-400 text-red-400 hover:bg-red-400 hover:text-black',\n        warning: 'bg-transparent border-yellow-400 text-yellow-400 hover:bg-yellow-400 hover:text-black',\n        info: 'bg-transparent border-blue-400 text-blue-400 hover:bg-blue-400 hover:text-black',\n      },\n      sizes: {\n        sm: 'px-4 py-2 text-sm uppercase tracking-wide',\n        md: 'px-6 py-3 text-base uppercase tracking-wide',\n        lg: 'px-8 py-4 text-lg uppercase tracking-wider',\n        xl: 'px-10 py-5 text-xl uppercase tracking-wider',\n      },\n      disabled: 'opacity-30 cursor-not-allowed hover:bg-transparent',\n    },\n    select: {\n      base: 'w-full appearance-none rounded-none border-2 border-white bg-transparent text-white transition-colors duration-200 focus:outline-none pr-10 cursor-pointer placeholder:text-gray-500',\n      sizes: {\n        sm: 'px-4 py-2 text-sm uppercase tracking-wide',\n        md: 'px-4 py-3 text-base uppercase tracking-wide',\n        lg: 'px-4 py-4 text-lg uppercase tracking-wider',\n        xl: 'px-5 py-5 text-xl uppercase tracking-wider',\n      },\n      disabled: 'opacity-30 cursor-not-allowed',\n    },\n  },\n};\n","\"use client\";\n\nimport React from 'react';\nimport { useTheme } from '../theme/ThemeProvider';\n\nexport interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  variant?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';\n  size?: 'sm' | 'md' | 'lg' | 'xl';\n  children: React.ReactNode;\n}\n\nexport const Button: React.FC<ButtonProps> = ({\n  variant = 'primary',\n  size = 'md',\n  className = '',\n  children,\n  disabled,\n  ...props\n}) => {\n  const { theme } = useTheme();\n\n  const baseStyles = theme.button.base;\n  const variantStyles = theme.button.variants[variant];\n  const sizeStyles = theme.button.sizes[size];\n  const disabledStyles = disabled ? theme.button.disabled : '';\n\n  const classes = `${baseStyles} ${variantStyles} ${sizeStyles} ${disabledStyles} ${className}`.trim();\n\n  return (\n    <button\n      className={classes}\n      disabled={disabled}\n      {...props}\n    >\n      {children}\n    </button>\n  );\n};\n","\"use client\";\n\nimport React, { useState, useRef, useEffect } from 'react';\nimport { useTheme } from '../theme/ThemeProvider';\n\nexport interface SelectOption {\n  value: string;\n  label: string;\n}\n\nexport interface SelectProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'size' | 'onChange' | 'defaultValue'> {\n  options: SelectOption[];\n  size?: 'sm' | 'md' | 'lg' | 'xl';\n  placeholder?: string;\n  disabled?: boolean;\n  value?: string;\n  defaultValue?: string;\n  onChange?: (value: string) => void;\n}\n\nexport const Select: React.FC<SelectProps> = ({\n  options,\n  size = 'md',\n  placeholder,\n  className = '',\n  disabled,\n  value: controlledValue,\n  defaultValue,\n  onChange,\n  ...props\n}) => {\n  const { theme, themeName } = useTheme();\n  const [isOpen, setIsOpen] = useState(false);\n  const [internalValue, setInternalValue] = useState(defaultValue || '');\n  const dropdownRef = useRef<HTMLDivElement>(null);\n\n  // Use controlled value if provided, otherwise use internal state\n  const value = controlledValue !== undefined ? controlledValue : internalValue;\n\n  // Find the selected option\n  const selectedOption = options.find(opt => opt.value === value);\n  const displayText = selectedOption ? selectedOption.label : placeholder || 'Select...';\n\n  // Close dropdown when clicking outside\n  useEffect(() => {\n    const handleClickOutside = (event: MouseEvent) => {\n      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {\n        setIsOpen(false);\n      }\n    };\n\n    if (isOpen) {\n      document.addEventListener('mousedown', handleClickOutside);\n      return () => document.removeEventListener('mousedown', handleClickOutside);\n    }\n  }, [isOpen]);\n\n  const handleSelect = (optionValue: string) => {\n    if (disabled) return;\n\n    setInternalValue(optionValue);\n    onChange?.(optionValue);\n    setIsOpen(false);\n  };\n\n  const handleToggle = () => {\n    if (!disabled) {\n      setIsOpen(!isOpen);\n    }\n  };\n\n  const baseStyles = theme.select.base;\n  const sizeStyles = theme.select.sizes[size];\n  const disabledStyles = disabled ? theme.select.disabled : '';\n\n  const buttonClasses = `${baseStyles} ${sizeStyles} ${disabledStyles} ${className}`.trim();\n\n  // Icon color based on theme\n  const iconColor = themeName === 'minimalistic'\n    ? (disabled ? 'text-gray-600' : 'text-white')\n    : (disabled ? 'text-gray-400' : 'text-gray-500');\n\n  // Dropdown menu styles based on theme\n  const dropdownBaseStyles = themeName === 'minimalistic'\n    ? 'bg-black border-2 border-white'\n    : 'bg-white border border-gray-300 shadow-lg dark:bg-gray-800 dark:border-gray-600';\n\n  const optionBaseStyles = themeName === 'minimalistic'\n    ? 'text-white hover:bg-white hover:text-black transition-colors duration-200'\n    : 'text-gray-900 hover:bg-blue-50 transition-colors duration-150 dark:text-gray-100 dark:hover:bg-gray-700';\n\n  const optionSizeStyles = {\n    sm: 'px-4 py-2 text-sm',\n    md: 'px-4 py-2.5 text-base',\n    lg: 'px-4 py-3 text-lg',\n    xl: 'px-5 py-4 text-xl',\n  }[size];\n\n  return (\n    <div className=\"relative inline-block w-full\" ref={dropdownRef} {...props}>\n      {/* Custom button that looks like select */}\n      <button\n        type=\"button\"\n        className={buttonClasses}\n        onClick={handleToggle}\n        disabled={disabled}\n      >\n        <span className={!selectedOption && placeholder ? 'opacity-50' : ''}>\n          {displayText}\n        </span>\n      </button>\n\n      {/* Chevron icon */}\n      <div className=\"pointer-events-none absolute inset-y-0 right-0 flex items-center pr-4\">\n        <svg\n          className={`h-5 w-5 transition-transform duration-200 ${iconColor} ${isOpen ? 'rotate-180' : ''}`}\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 20 20\"\n          fill=\"currentColor\"\n          aria-hidden=\"true\"\n        >\n          <path\n            fillRule=\"evenodd\"\n            d=\"M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z\"\n            clipRule=\"evenodd\"\n          />\n        </svg>\n      </div>\n\n      {/* Custom dropdown menu */}\n      {isOpen && !disabled && (\n        <div\n          className={`absolute z-50 w-full mt-1 ${dropdownBaseStyles} rounded-lg overflow-hidden`}\n          style={{ maxHeight: '300px', overflowY: 'auto' }}\n        >\n          {options.map((option) => (\n            <div\n              key={option.value}\n              className={`${optionBaseStyles} ${optionSizeStyles} cursor-pointer ${\n                value === option.value ? (themeName === 'minimalistic' ? 'bg-white text-black' : 'bg-blue-100 dark:bg-blue-900') : ''\n              }`}\n              onClick={() => handleSelect(option.value)}\n            >\n              {option.label}\n            </div>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n};\n","/**\n * Theme initialization script that runs before React hydration\n * This prevents flickering by setting the theme before the page renders\n * Must be inlined in the HTML <head> as a blocking script\n */\n\nexport const themeScript = `\n(function() {\n  try {\n    // Get stored preferences\n    const storedTheme = localStorage.getItem('lite-ui-theme') || 'default';\n    const storedColorMode = localStorage.getItem('lite-ui-color-mode');\n\n    // Determine color mode (system, light, or dark)\n    let colorMode = storedColorMode;\n    if (!colorMode || colorMode === 'system') {\n      colorMode = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';\n    }\n\n    // Set attributes before render\n    document.documentElement.setAttribute('data-theme', storedTheme);\n    document.documentElement.setAttribute('data-color-mode', colorMode);\n\n    // Add dark class for Tailwind\n    if (colorMode === 'dark') {\n      document.documentElement.classList.add('dark');\n    } else {\n      document.documentElement.classList.remove('dark');\n    }\n  } catch (e) {\n    console.error('Failed to initialize theme:', e);\n  }\n})();\n`;\n\nexport function getThemeScript() {\n  return themeScript;\n}\n"],"mappings":"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","names":["jsx","useState","useEffect","jsx","useState","useEffect"]}

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "@marcoschwartz/lite-ui",
+  "version": "0.1.0",
+  "description": "A lightweight UI component library built with Tailwind CSS",
+  "author": "Marco Schwartz",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/marcoschwartz/lite-ui.git"
+  },
+  "homepage": "https://github.com/marcoschwartz/lite-ui#readme",
+  "bugs": {
+    "url": "https://github.com/marcoschwartz/lite-ui/issues"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./styles.css": "./dist/styles.css"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "npm run build -- --watch",
+    "dev:all": "./dev.sh",
+    "clean": "rm -rf dist",
+    "prepublishOnly": "npm run clean && npm run build"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "devDependencies": {
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "react": "^19",
+    "react-dom": "^19",
+    "tailwindcss": "^4",
+    "tsup": "^8.0.0",
+    "typescript": "^5"
+  },
+  "keywords": [
+    "react",
+    "ui",
+    "components",
+    "tailwind",
+    "tailwindcss",
+    "react-components",
+    "ui-library",
+    "design-system",
+    "dark-mode",
+    "theming"
+  ],
+  "publishConfig": {
+    "access": "public"
+  }
+}