@lp-labs/ui-components 0.0.0-stage → 1.0.0

package/dist/cjs/theme/ThemeProvider.js

@@ -0,0 +1,185 @@
+import React, { createContext, useContext, ReactNode } from 'react';
+
+export type ThemeName = 'light' | 'dark' | 'auto';
+
+export interface ThemeColors {
+  primary: string;
+  secondary: string;
+  success: string;
+  warning: string;
+  danger: string;
+  info: string;
+  background: string;
+  backgroundAlt: string;
+  text: string;
+  textMuted: string;
+  border: string;
+  borderLight: string;
+}
+
+export interface ThemeSpacing {
+  xs: string;
+  sm: string;
+  md: string;
+  lg: string;
+  xl: string;
+  '2xl': string;
+}
+
+export interface ThemeTypography {
+  fontFamily: string;
+  fontSize: {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    '2xl': string;
+  };
+  lineHeight: {
+    tight: number;
+    normal: number;
+    relaxed: number;
+  };
+  fontWeight: {
+    light: number;
+    normal: number;
+    medium: number;
+    semibold: number;
+    bold: number;
+  };
+}
+
+export interface ThemeConfig {
+  colors: ThemeColors;
+  spacing: ThemeSpacing;
+  typography: ThemeTypography;
+  borderRadius: {
+    sm: string;
+    md: string;
+    lg: string;
+    full: string;
+  };
+  shadows: {
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+  };
+  transitions: {
+    fast: string;
+    normal: string;
+    slow: string;
+  };
+}
+
+const defaultTheme: ThemeConfig = {
+  colors: {
+    primary: '#007bff',
+    secondary: '#6c757d',
+    success: '#28a745',
+    warning: '#ffc107',
+    danger: '#dc3545',
+    info: '#17a2b8',
+    background: '#ffffff',
+    backgroundAlt: '#f8f9fa',
+    text: '#212529',
+    textMuted: '#6c757d',
+    border: '#dee2e6',
+    borderLight: '#e9ecef',
+  },
+  spacing: {
+    xs: '4px',
+    sm: '8px',
+    md: '16px',
+    lg: '24px',
+    xl: '32px',
+    '2xl': '48px',
+  },
+  typography: {
+    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+    fontSize: {
+      xs: '12px',
+      sm: '14px',
+      md: '16px',
+      lg: '18px',
+      xl: '20px',
+      '2xl': '24px',
+    },
+    lineHeight: {
+      tight: 1.2,
+      normal: 1.5,
+      relaxed: 1.75,
+    },
+    fontWeight: {
+      light: 300,
+      normal: 400,
+      medium: 500,
+      semibold: 600,
+      bold: 700,
+    },
+  },
+  borderRadius: {
+    sm: '4px',
+    md: '8px',
+    lg: '12px',
+    full: '9999px',
+  },
+  shadows: {
+    sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
+    md: '0 4px 6px -1px rgba(0, 0, 0, 0.1)',
+    lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1)',
+    xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1)',
+  },
+  transitions: {
+    fast: '150ms ease-in-out',
+    normal: '250ms ease-in-out',
+    slow: '350ms ease-in-out',
+  },
+};
+
+interface ThemeContextValue {
+  theme: ThemeConfig;
+  themeName: ThemeName;
+}
+
+const ThemeContext = createContext<ThemeContextValue | undefined>(undefined);
+
+export interface ThemeProviderProps {
+  children: ReactNode;
+  theme?: ThemeName | ThemeConfig;
+}
+
+export function ThemeProvider({ children, theme = 'light' }: ThemeProviderProps) {
+  const themeConfig = typeof theme === 'string' ? defaultTheme : { ...defaultTheme, ...theme };
+  const themeName = typeof theme === 'string' ? theme : 'light';
+
+  const value: ThemeContextValue = {
+    theme: themeConfig,
+    themeName: themeName as ThemeName,
+  };
+
+  return (
+    <ThemeContext.Provider value={value}>
+      <div data-theme={themeName}>{children}</div>
+    </ThemeContext.Provider>
+  );
+}
+
+export function useTheme(): ThemeConfig {
+  const context = useContext(ThemeContext);
+  if (!context) {
+    console.warn(
+      'useTheme must be used within a ThemeProvider. Falling back to default theme.',
+    );
+    return defaultTheme;
+  }
+  return context.theme;
+}
+
+export function useThemeName(): ThemeName {
+  const context = useContext(ThemeContext);
+  return context?.themeName || 'light';
+}
+
+export { defaultTheme };

package/dist/cjs/theme/index.d.ts

@@ -0,0 +1,2 @@
+export { ThemeProvider, useTheme, useThemeName, defaultTheme } from './ThemeProvider';
+export type { ThemeConfig, ThemeColors, ThemeSpacing, ThemeTypography, ThemeName } from './ThemeProvider';

package/dist/cjs/theme/index.js

@@ -0,0 +1,2 @@
+export { ThemeProvider, useTheme, useThemeName, defaultTheme } from './ThemeProvider';
+export type { ThemeConfig, ThemeColors, ThemeSpacing, ThemeTypography, ThemeName } from './ThemeProvider';

package/dist/cjs/utilities/classNames.d.ts

@@ -0,0 +1,200 @@
+/**
+ * Class name utilities for combining and conditionally applying class names
+ */
+
+export function cn(...classes: (string | undefined | null | false)[]): string {
+  return classes
+    .filter((cls) => typeof cls === 'string' && cls.trim())
+    .join(' ');
+}
+
+/**
+ * Spacing utility classes
+ */
+export const spacing = {
+  padding: {
+    none: 'p-0',
+    xs: 'p-1',
+    sm: 'p-2',
+    medium: 'p-4',
+    md: 'p-4',
+    lg: 'p-6',
+    xl: 'p-8',
+    '2xl': 'p-12',
+  },
+  margin: {
+    none: 'm-0',
+    xs: 'm-1',
+    sm: 'm-2',
+    medium: 'm-4',
+    md: 'm-4',
+    lg: 'm-6',
+    xl: 'm-8',
+    '2xl': 'm-12',
+  },
+  gap: {
+    xs: 'gap-1',
+    sm: 'gap-2',
+    md: 'gap-4',
+    lg: 'gap-6',
+    xl: 'gap-8',
+    '2xl': 'gap-12',
+  },
+};
+
+/**
+ * Color utility classes
+ */
+export const colors = {
+  background: {
+    light: 'bg-white',
+    alt: 'bg-gray-50',
+    dark: 'bg-gray-900',
+    primary: 'bg-blue-50',
+    success: 'bg-green-50',
+    warning: 'bg-yellow-50',
+    danger: 'bg-red-50',
+  },
+  text: {
+    dark: 'text-gray-900',
+    primary: 'text-gray-700',
+    muted: 'text-gray-500',
+    light: 'text-white',
+    success: 'text-green-600',
+    warning: 'text-yellow-600',
+    danger: 'text-red-600',
+    info: 'text-blue-600',
+  },
+  border: {
+    light: 'border-gray-200',
+    medium: 'border-gray-300',
+    dark: 'border-gray-400',
+  },
+};
+
+/**
+ * Typography utility classes
+ */
+export const typography = {
+  size: {
+    xs: 'text-xs',
+    sm: 'text-sm',
+    base: 'text-base',
+    md: 'text-base',
+    lg: 'text-lg',
+    xl: 'text-xl',
+    '2xl': 'text-2xl',
+  },
+  weight: {
+    light: 'font-light',
+    normal: 'font-normal',
+    medium: 'font-medium',
+    semibold: 'font-semibold',
+    bold: 'font-bold',
+  },
+  line: {
+    tight: 'leading-tight',
+    normal: 'leading-normal',
+    relaxed: 'leading-relaxed',
+  },
+};
+
+/**
+ * Border radius utility classes
+ */
+export const radius = {
+  none: 'rounded-none',
+  sm: 'rounded-sm',
+  md: 'rounded-md',
+  lg: 'rounded-lg',
+  full: 'rounded-full',
+};
+
+/**
+ * Shadow utility classes
+ */
+export const shadows = {
+  none: 'shadow-none',
+  sm: 'shadow-sm',
+  md: 'shadow-md',
+  lg: 'shadow-lg',
+  xl: 'shadow-xl',
+};
+
+/**
+ * Flex utility classes
+ */
+export const flex = {
+  center: 'flex items-center justify-center',
+  between: 'flex items-center justify-between',
+  start: 'flex items-start justify-start',
+  end: 'flex items-end justify-end',
+  col: 'flex flex-col',
+  colCenter: 'flex flex-col items-center justify-center',
+};
+
+/**
+ * Responsive utility classes
+ */
+export const responsive = {
+  hidden: 'hidden',
+  smOnly: 'sm:block hidden',
+  mdOnly: 'md:block hidden lg:hidden',
+  lgOnly: 'lg:block hidden',
+  smHidden: 'sm:hidden',
+  mdHidden: 'md:hidden',
+  lgHidden: 'lg:hidden',
+};
+
+/**
+ * Display utility classes
+ */
+export const display = {
+  block: 'block',
+  inline: 'inline',
+  inlineBlock: 'inline-block',
+  flex: 'flex',
+  grid: 'grid',
+  hidden: 'hidden',
+};
+
+/**
+ * Position utility classes
+ */
+export const position = {
+  relative: 'relative',
+  absolute: 'absolute',
+  fixed: 'fixed',
+  sticky: 'sticky',
+};
+
+/**
+ * Size utility classes
+ */
+export const size = {
+  full: 'w-full h-full',
+  screen: 'w-screen h-screen',
+  min: 'w-min h-min',
+  max: 'w-max h-max',
+};
+
+/**
+ * Variant helper function for creating consistent variant classes
+ */
+export function variant(
+  variants: Record<string, string>,
+  defaultVariant: string,
+  selected?: string,
+): string {
+  return variants[selected || defaultVariant] || variants[defaultVariant];
+}
+
+/**
+ * State utility classes
+ */
+export const state = {
+  focus: 'focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2',
+  hover: 'hover:opacity-90 transition-opacity',
+  active: 'active:opacity-75',
+  disabled: 'disabled:opacity-50 disabled:cursor-not-allowed',
+};

package/dist/cjs/utilities/classNames.js

@@ -0,0 +1,200 @@
+/**
+ * Class name utilities for combining and conditionally applying class names
+ */
+
+export function cn(...classes: (string | undefined | null | false)[]): string {
+  return classes
+    .filter((cls) => typeof cls === 'string' && cls.trim())
+    .join(' ');
+}
+
+/**
+ * Spacing utility classes
+ */
+export const spacing = {
+  padding: {
+    none: 'p-0',
+    xs: 'p-1',
+    sm: 'p-2',
+    medium: 'p-4',
+    md: 'p-4',
+    lg: 'p-6',
+    xl: 'p-8',
+    '2xl': 'p-12',
+  },
+  margin: {
+    none: 'm-0',
+    xs: 'm-1',
+    sm: 'm-2',
+    medium: 'm-4',
+    md: 'm-4',
+    lg: 'm-6',
+    xl: 'm-8',
+    '2xl': 'm-12',
+  },
+  gap: {
+    xs: 'gap-1',
+    sm: 'gap-2',
+    md: 'gap-4',
+    lg: 'gap-6',
+    xl: 'gap-8',
+    '2xl': 'gap-12',
+  },
+};
+
+/**
+ * Color utility classes
+ */
+export const colors = {
+  background: {
+    light: 'bg-white',
+    alt: 'bg-gray-50',
+    dark: 'bg-gray-900',
+    primary: 'bg-blue-50',
+    success: 'bg-green-50',
+    warning: 'bg-yellow-50',
+    danger: 'bg-red-50',
+  },
+  text: {
+    dark: 'text-gray-900',
+    primary: 'text-gray-700',
+    muted: 'text-gray-500',
+    light: 'text-white',
+    success: 'text-green-600',
+    warning: 'text-yellow-600',
+    danger: 'text-red-600',
+    info: 'text-blue-600',
+  },
+  border: {
+    light: 'border-gray-200',
+    medium: 'border-gray-300',
+    dark: 'border-gray-400',
+  },
+};
+
+/**
+ * Typography utility classes
+ */
+export const typography = {
+  size: {
+    xs: 'text-xs',
+    sm: 'text-sm',
+    base: 'text-base',
+    md: 'text-base',
+    lg: 'text-lg',
+    xl: 'text-xl',
+    '2xl': 'text-2xl',
+  },
+  weight: {
+    light: 'font-light',
+    normal: 'font-normal',
+    medium: 'font-medium',
+    semibold: 'font-semibold',
+    bold: 'font-bold',
+  },
+  line: {
+    tight: 'leading-tight',
+    normal: 'leading-normal',
+    relaxed: 'leading-relaxed',
+  },
+};
+
+/**
+ * Border radius utility classes
+ */
+export const radius = {
+  none: 'rounded-none',
+  sm: 'rounded-sm',
+  md: 'rounded-md',
+  lg: 'rounded-lg',
+  full: 'rounded-full',
+};
+
+/**
+ * Shadow utility classes
+ */
+export const shadows = {
+  none: 'shadow-none',
+  sm: 'shadow-sm',
+  md: 'shadow-md',
+  lg: 'shadow-lg',
+  xl: 'shadow-xl',
+};
+
+/**
+ * Flex utility classes
+ */
+export const flex = {
+  center: 'flex items-center justify-center',
+  between: 'flex items-center justify-between',
+  start: 'flex items-start justify-start',
+  end: 'flex items-end justify-end',
+  col: 'flex flex-col',
+  colCenter: 'flex flex-col items-center justify-center',
+};
+
+/**
+ * Responsive utility classes
+ */
+export const responsive = {
+  hidden: 'hidden',
+  smOnly: 'sm:block hidden',
+  mdOnly: 'md:block hidden lg:hidden',
+  lgOnly: 'lg:block hidden',
+  smHidden: 'sm:hidden',
+  mdHidden: 'md:hidden',
+  lgHidden: 'lg:hidden',
+};
+
+/**
+ * Display utility classes
+ */
+export const display = {
+  block: 'block',
+  inline: 'inline',
+  inlineBlock: 'inline-block',
+  flex: 'flex',
+  grid: 'grid',
+  hidden: 'hidden',
+};
+
+/**
+ * Position utility classes
+ */
+export const position = {
+  relative: 'relative',
+  absolute: 'absolute',
+  fixed: 'fixed',
+  sticky: 'sticky',
+};
+
+/**
+ * Size utility classes
+ */
+export const size = {
+  full: 'w-full h-full',
+  screen: 'w-screen h-screen',
+  min: 'w-min h-min',
+  max: 'w-max h-max',
+};
+
+/**
+ * Variant helper function for creating consistent variant classes
+ */
+export function variant(
+  variants: Record<string, string>,
+  defaultVariant: string,
+  selected?: string,
+): string {
+  return variants[selected || defaultVariant] || variants[defaultVariant];
+}
+
+/**
+ * State utility classes
+ */
+export const state = {
+  focus: 'focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2',
+  hover: 'hover:opacity-90 transition-opacity',
+  active: 'active:opacity-75',
+  disabled: 'disabled:opacity-50 disabled:cursor-not-allowed',
+};

package/dist/cjs/utilities/index.d.ts

@@ -0,0 +1,3 @@
+export { cn, spacing, colors, typography, radius, shadows, flex, responsive, display, position, size, variant, state } from './classNames';
+export { createStyles, combineStyles, media, createCSSVariables, getCSSVariable, setCSSVariable, animations } from './styles';
+export type { StyleObject } from './styles';

package/dist/cjs/utilities/index.js

@@ -0,0 +1,3 @@
+export { cn, spacing, colors, typography, radius, shadows, flex, responsive, display, position, size, variant, state } from './classNames';
+export { createStyles, combineStyles, media, createCSSVariables, getCSSVariable, setCSSVariable, animations } from './styles';
+export type { StyleObject } from './styles';

package/dist/cjs/utilities/styles.d.ts

@@ -0,0 +1,94 @@
+/**
+ * CSS-in-JS style utilities for dynamic styling
+ */
+
+export interface StyleObject {
+  [key: string]: string | number | undefined;
+}
+
+export function createStyles(styles: StyleObject): React.CSSProperties {
+  const result: React.CSSProperties = {};
+
+  for (const [key, value] of Object.entries(styles)) {
+    if (value !== undefined) {
+      // Convert camelCase CSS property names to kebab-case if needed
+      const cssKey = key as keyof React.CSSProperties;
+      result[cssKey] = value;
+    }
+  }
+
+  return result;
+}
+
+export function combineStyles(...styles: (StyleObject | undefined | null)[]): React.CSSProperties {
+  const result: React.CSSProperties = {};
+
+  for (const style of styles) {
+    if (style) {
+      Object.assign(result, createStyles(style));
+    }
+  }
+
+  return result;
+}
+
+/**
+ * Media query builder
+ */
+export const media = {
+  sm: '@media (min-width: 640px)',
+  md: '@media (min-width: 768px)',
+  lg: '@media (min-width: 1024px)',
+  xl: '@media (min-width: 1280px)',
+  '2xl': '@media (min-width: 1536px)',
+  dark: '@media (prefers-color-scheme: dark)',
+  light: '@media (prefers-color-scheme: light)',
+  motion: '@media (prefers-reduced-motion: no-preference)',
+};
+
+/**
+ * CSS variable builder
+ */
+export function createCSSVariables(variables: Record<string, string>): Record<string, string> {
+  const result: Record<string, string> = {};
+
+  for (const [key, value] of Object.entries(variables)) {
+    result[`--${key}`] = value;
+  }
+
+  return result;
+}
+
+/**
+ * Get CSS variable value
+ */
+export function getCSSVariable(name: string): string {
+  if (typeof window === 'undefined') {
+    return '';
+  }
+  return getComputedStyle(document.documentElement).getPropertyValue(`--${name}`).trim();
+}
+
+/**
+ * Set CSS variable value
+ */
+export function setCSSVariable(name: string, value: string): void {
+  if (typeof document === 'undefined') {
+    return;
+  }
+  document.documentElement.style.setProperty(`--${name}`, value);
+}
+
+/**
+ * CSS animation utilities
+ */
+export const animations = {
+  fadeIn: 'animation: fadeIn 0.3s ease-in-out',
+  fadeOut: 'animation: fadeOut 0.3s ease-in-out',
+  slideInUp: 'animation: slideInUp 0.3s ease-in-out',
+  slideOutDown: 'animation: slideOutDown 0.3s ease-in-out',
+  slideInRight: 'animation: slideInRight 0.3s ease-in-out',
+  slideOutLeft: 'animation: slideOutLeft 0.3s ease-in-out',
+  scaleIn: 'animation: scaleIn 0.3s ease-in-out',
+  scaleOut: 'animation: scaleOut 0.3s ease-in-out',
+};