atelier-ui-react 1.0.2

package/src/layout/Grid/Grid.css

@@ -0,0 +1,18 @@
+.ui-grid {
+  display: grid;
+  box-sizing: border-box;
+}
+
+/* Align */
+.ui-grid--align-start   { align-items: start; }
+.ui-grid--align-center  { align-items: center; }
+.ui-grid--align-end     { align-items: end; }
+.ui-grid--align-stretch { align-items: stretch; }
+
+/* Justify */
+.ui-grid--justify-start   { justify-content: start; }
+.ui-grid--justify-center  { justify-content: center; }
+.ui-grid--justify-end     { justify-content: end; }
+.ui-grid--justify-between { justify-content: space-between; }
+.ui-grid--justify-around  { justify-content: space-around; }
+.ui-grid--justify-evenly  { justify-content: space-evenly; }

package/src/layout/Grid/Grid.tsx

@@ -0,0 +1,61 @@
+import React, { forwardRef } from 'react';
+import type { GridProps } from './Grid.types';
+import { cx, getSpaceValue } from '../../utils';
+import './Grid.css';
+
+export const Grid = forwardRef<HTMLElement, GridProps>(function Grid(
+  {
+    as: Component = 'div',
+    columns,
+    minChildWidth,
+    gap = 'md',
+    rowGap,
+    columnGap,
+    align,
+    justify,
+    className,
+    style,
+    children,
+    ...rest
+  },
+  ref
+) {
+  let gridTemplateColumns: string | undefined;
+
+  if (minChildWidth) {
+    const minWidth = typeof minChildWidth === 'number' ? `${minChildWidth}px` : minChildWidth;
+    gridTemplateColumns = `repeat(auto-fit, minmax(${minWidth}, 1fr))`;
+  } else if (typeof columns === 'number') {
+    gridTemplateColumns = `repeat(${columns}, minmax(0, 1fr))`;
+  } else if (typeof columns === 'string') {
+    gridTemplateColumns = columns;
+  }
+
+  const classes = cx(
+    'ui-grid',
+    align && `ui-grid--align-${align}`,
+    justify && `ui-grid--justify-${justify}`,
+    className
+  );
+
+  const combinedStyle: React.CSSProperties = {
+    gridTemplateColumns,
+    gap: getSpaceValue(gap),
+    rowGap: getSpaceValue(rowGap),
+    columnGap: getSpaceValue(columnGap),
+    ...style,
+  };
+
+  return React.createElement(
+    Component,
+    {
+      ref,
+      className: classes,
+      style: combinedStyle,
+      ...rest,
+    },
+    children
+  );
+});
+
+Grid.displayName = 'Grid';

package/src/layout/Grid/Grid.types.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import type { SpaceToken } from '../../utils';
+
+export type GridAlign = 'start' | 'center' | 'end' | 'stretch';
+export type GridJustify = 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
+
+export interface GridProps extends React.HTMLAttributes<HTMLElement> {
+  as?: React.ElementType;
+  columns?: number | string;
+  minChildWidth?: number | string;
+  gap?: SpaceToken;
+  rowGap?: SpaceToken;
+  columnGap?: SpaceToken;
+  align?: GridAlign;
+  justify?: GridJustify;
+  children?: React.ReactNode;
+}

package/src/layout/Grid/index.ts

@@ -0,0 +1,2 @@
+export * from './Grid';
+export * from './Grid.types';

package/src/layout/Stack/Stack.css

@@ -0,0 +1,50 @@
+.ui-stack {
+  display: flex;
+  box-sizing: border-box;
+}
+
+/* Direction */
+.ui-stack--vertical {
+  flex-direction: column;
+}
+
+.ui-stack--horizontal {
+  flex-direction: row;
+}
+
+/* Align */
+.ui-stack--align-start    { align-items: flex-start; }
+.ui-stack--align-center   { align-items: center; }
+.ui-stack--align-end      { align-items: flex-end; }
+.ui-stack--align-stretch  { align-items: stretch; }
+.ui-stack--align-baseline { align-items: baseline; }
+
+/* Justify */
+.ui-stack--justify-start   { justify-content: flex-start; }
+.ui-stack--justify-center  { justify-content: center; }
+.ui-stack--justify-end     { justify-content: flex-end; }
+.ui-stack--justify-between { justify-content: space-between; }
+.ui-stack--justify-around  { justify-content: space-around; }
+.ui-stack--justify-evenly  { justify-content: space-evenly; }
+
+.ui-stack--wrap {
+  flex-wrap: wrap;
+}
+
+/* Built-in divider element */
+.ui-stack-divider {
+  align-self: stretch;
+  background-color: var(--ui-color-border);
+  border: none;
+  margin: 0;
+}
+
+.ui-stack--vertical > .ui-stack-divider {
+  height: 1px;
+  width: 100%;
+}
+
+.ui-stack--horizontal > .ui-stack-divider {
+  width: 1px;
+  height: 100%;
+}

package/src/layout/Stack/Stack.tsx

@@ -0,0 +1,70 @@
+import React, { forwardRef, Children } from 'react';
+import type { StackProps } from './Stack.types';
+import { cx, getSpaceValue } from '../../utils';
+import './Stack.css';
+
+export const Stack = forwardRef<HTMLElement, StackProps>(function Stack(
+  {
+    as: Component = 'div',
+    direction = 'vertical',
+    gap = 'md',
+    align,
+    justify,
+    wrap = false,
+    divider,
+    className,
+    style,
+    children,
+    ...rest
+  },
+  ref
+) {
+  const resolvedGap = gap === 'none' ? '0px' : getSpaceValue(gap);
+
+  const classes = cx(
+    'ui-stack',
+    `ui-stack--${direction}`,
+    align && `ui-stack--align-${align}`,
+    justify && `ui-stack--justify-${justify}`,
+    wrap && 'ui-stack--wrap',
+    className
+  );
+
+  const combinedStyle: React.CSSProperties = {
+    gap: resolvedGap,
+    ...style,
+  };
+
+  let renderedChildren = children;
+  if (divider) {
+    const validChildren = Children.toArray(children).filter(Boolean);
+    renderedChildren = validChildren.map((child, index) => {
+      const isLast = index === validChildren.length - 1;
+      return (
+        <React.Fragment key={index}>
+          {child}
+          {!isLast && (
+            React.isValidElement(divider) ? (
+              divider
+            ) : (
+              <div className="ui-stack-divider" role="separator" />
+            )
+          )}
+        </React.Fragment>
+      );
+    });
+  }
+
+  return React.createElement(
+    Component,
+    {
+      ref,
+      className: classes,
+      style: combinedStyle,
+      ...rest,
+    },
+    renderedChildren
+  );
+});
+
+Stack.displayName = 'Stack';

package/src/layout/Stack/Stack.types.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import type { SpaceToken } from '../../utils';
+
+export type StackDirection = 'vertical' | 'horizontal';
+export type StackAlign = 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+export type StackJustify = 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
+
+export interface StackProps extends React.HTMLAttributes<HTMLElement> {
+  as?: React.ElementType;
+  direction?: StackDirection;
+  gap?: SpaceToken | 'none';
+  align?: StackAlign;
+  justify?: StackJustify;
+  wrap?: boolean;
+  divider?: React.ReactNode;
+  children?: React.ReactNode;
+}

package/src/layout/Stack/index.ts

@@ -0,0 +1,2 @@
+export * from './Stack';
+export * from './Stack.types';

package/src/styles/globals.css

@@ -0,0 +1,28 @@
+@import "./reset.css";
+@import "../theme/tokens.css";
+@import "../theme/light.css";
+@import "../theme/dark.css";
+
+/* Base Body Application */
+html, body {
+  font-family: var(--ui-font-sans);
+  font-size: var(--ui-font-size-md);
+  line-height: var(--ui-line-height-normal);
+  color: var(--ui-color-foreground);
+  background-color: var(--ui-color-background);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+  transition: background-color var(--ui-transition-base), color var(--ui-transition-base);
+}
+
+::selection {
+  background-color: var(--ui-color-primary);
+  color: var(--ui-color-primary-fg);
+}
+
+/* Accessibility Focus Visible standard fallback */
+:focus-visible {
+  outline: var(--ui-focus-ring-width) solid var(--ui-color-focus-ring);
+  outline-offset: var(--ui-focus-ring-offset);
+}

package/src/styles/reset.css

@@ -0,0 +1,44 @@
+/* Atelier UI — Modern Scoped CSS Reset */
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+
+html {
+  -webkit-text-size-adjust: 100%;
+  tab-size: 4;
+}
+
+body {
+  margin: 0;
+  line-height: inherit;
+}
+
+hr {
+  height: 0;
+  color: inherit;
+  border-top-width: 1px;
+}
+
+button, input, optgroup, select, textarea {
+  font-family: inherit;
+  font-size: 100%;
+  font-weight: inherit;
+  line-height: inherit;
+  color: inherit;
+  margin: 0;
+  padding: 0;
+}
+
+button, select {
+  text-transform: none;
+}
+
+button, [type='button'], [type='reset'], [type='submit'] {
+  -webkit-appearance: button;
+  background-color: transparent;
+  background-image: none;
+}
+
+input::placeholder, textarea::placeholder {
+  opacity: 1;
+}

package/src/theme/ThemeProvider.tsx

@@ -0,0 +1,83 @@
+import React, { createContext, useContext, useEffect, useState, useMemo } from 'react';
+import type { ThemeContextValue, ThemeMode, ThemeProviderProps, ResolvedTheme } from './theme.types';
+
+const ThemeContext = createContext<ThemeContextValue | undefined>(undefined);
+
+export function ThemeProvider({
+  children,
+  defaultTheme = 'light',
+  storageKey = 'atelier-ui-theme',
+  attribute = 'data-theme',
+  enableSystem = true,
+}: ThemeProviderProps) {
+  const [theme, setThemeState] = useState<ThemeMode>(() => {
+    if (typeof window === 'undefined') return defaultTheme;
+    try {
+      const stored = localStorage.getItem(storageKey);
+      if (stored === 'light' || stored === 'dark' || stored === 'system') {
+        return stored;
+      }
+    } catch {
+      // Ignore localStorage read errors
+    }
+    return defaultTheme;
+  });
+
+  const [resolvedTheme, setResolvedTheme] = useState<ResolvedTheme>('light');
+
+  useEffect(() => {
+    const root = document.documentElement;
+
+    const getSystemTheme = (): ResolvedTheme => {
+      return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+    };
+
+    const active = theme === 'system' && enableSystem ? getSystemTheme() : (theme === 'dark' ? 'dark' : 'light');
+    setResolvedTheme(active);
+    root.setAttribute(attribute, active);
+
+    if (theme === 'system' && enableSystem) {
+      const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+      const listener = (e: MediaQueryListEvent) => {
+        const nextTheme = e.matches ? 'dark' : 'light';
+        setResolvedTheme(nextTheme);
+        root.setAttribute(attribute, nextTheme);
+      };
+      mediaQuery.addEventListener('change', listener);
+      return () => mediaQuery.removeEventListener('change', listener);
+    }
+  }, [theme, attribute, enableSystem]);
+
+  const setTheme = (newTheme: ThemeMode) => {
+    try {
+      localStorage.setItem(storageKey, newTheme);
+    } catch {
+      // Ignore localStorage write errors
+    }
+    setThemeState(newTheme);
+  };
+
+  const toggleTheme = () => {
+    setTheme(resolvedTheme === 'light' ? 'dark' : 'light');
+  };
+
+  const value = useMemo(
+    () => ({
+      theme,
+      resolvedTheme,
+      setTheme,
+      toggleTheme,
+    }),
+    [theme, resolvedTheme]
+  );
+
+  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;
+}
+
+export function useTheme(): ThemeContextValue {
+  const context = useContext(ThemeContext);
+  if (!context) {
+    throw new Error('useTheme must be used within an Atelier UI ThemeProvider');
+  }
+  return context;
+}

package/src/theme/dark.css

@@ -0,0 +1,62 @@
+/**
+ * Atelier UI — Dark Theme
+ * Refined deep obsidian graphite theme with zero eye fatigue and balanced contrast
+ */
+[data-theme="dark"] {
+  --ui-color-background: #090a0b;
+  --ui-color-surface: #121316;
+  --ui-color-surface-hover: #191b1f;
+  --ui-color-surface-raised: #181a1e;
+  --ui-color-surface-inset: #0e0f12;
+
+  --ui-color-foreground: #f4f4f5;
+  --ui-color-foreground-muted: #a1a1aa;
+  --ui-color-foreground-subtle: #71717a;
+
+  --ui-color-border: #23262b;
+  --ui-color-border-hover: #32363d;
+  --ui-color-border-subtle: #191c20;
+  --ui-color-border-strong: #454a54;
+
+  /* Brand / Primary */
+  --ui-color-primary: #f4f4f5;
+  --ui-color-primary-hover: #e4e4e7;
+  --ui-color-primary-active: #d4d4d8;
+  --ui-color-primary-fg: #090a0b;
+
+  /* Secondary */
+  --ui-color-secondary: #1a1c20;
+  --ui-color-secondary-hover: #24272d;
+  --ui-color-secondary-active: #2e3239;
+  --ui-color-secondary-fg: #f4f4f5;
+
+  /* Accent */
+  --ui-color-accent: #3b82f6;
+  --ui-color-accent-hover: #60a5fa;
+  --ui-color-accent-fg: #ffffff;
+  --ui-color-accent-subtle: #172554;
+
+  /* Status Colors */
+  --ui-color-success: #22c55e;
+  --ui-color-success-hover: #4ade80;
+  --ui-color-success-fg: #052e16;
+  --ui-color-success-subtle: #052e16;
+  --ui-color-success-border: #14532d;
+
+  --ui-color-warning: #f59e0b;
+  --ui-color-warning-hover: #fbbf24;
+  --ui-color-warning-fg: #451a03;
+  --ui-color-warning-subtle: #451a03;
+  --ui-color-warning-border: #78350f;
+
+  --ui-color-danger: #ef4444;
+  --ui-color-danger-hover: #f87171;
+  --ui-color-danger-active: #dc2626;
+  --ui-color-danger-fg: #ffffff;
+  --ui-color-danger-subtle: #450a0a;
+  --ui-color-danger-border: #7f1d1d;
+
+  /* Focus Ring */
+  --ui-color-focus-ring: rgba(59, 130, 246, 0.45);
+  --ui-color-focus-border: #60a5fa;
+}

package/src/theme/index.ts

@@ -0,0 +1,2 @@
+export * from './ThemeProvider';
+export * from './theme.types';

package/src/theme/light.css

@@ -0,0 +1,62 @@
+/**
+ * Atelier UI — Light Theme
+ * Crisp, warm-tinted modern paper neutral aesthetic with high contrast
+ */
+:root, [data-theme="light"] {
+  --ui-color-background: #fafaf9;
+  --ui-color-surface: #ffffff;
+  --ui-color-surface-hover: #f5f5f4;
+  --ui-color-surface-raised: #ffffff;
+  --ui-color-surface-inset: #f5f5f4;
+
+  --ui-color-foreground: #1c1917;
+  --ui-color-foreground-muted: #78716c;
+  --ui-color-foreground-subtle: #a8a29e;
+
+  --ui-color-border: #e7e5e4;
+  --ui-color-border-hover: #d6d3d1;
+  --ui-color-border-subtle: #f0eeed;
+  --ui-color-border-strong: #a8a29e;
+
+  /* Brand / Primary */
+  --ui-color-primary: #18181b;
+  --ui-color-primary-hover: #27272a;
+  --ui-color-primary-active: #09090b;
+  --ui-color-primary-fg: #ffffff;
+
+  /* Secondary */
+  --ui-color-secondary: #f4f4f5;
+  --ui-color-secondary-hover: #e4e4e7;
+  --ui-color-secondary-active: #d4d4d8;
+  --ui-color-secondary-fg: #18181b;
+
+  /* Accent */
+  --ui-color-accent: #2563eb;
+  --ui-color-accent-hover: #1d4ed8;
+  --ui-color-accent-fg: #ffffff;
+  --ui-color-accent-subtle: #eff6ff;
+
+  /* Status Colors */
+  --ui-color-success: #16a34a;
+  --ui-color-success-hover: #15803d;
+  --ui-color-success-fg: #ffffff;
+  --ui-color-success-subtle: #f0fdf4;
+  --ui-color-success-border: #bbf7d0;
+
+  --ui-color-warning: #d97706;
+  --ui-color-warning-hover: #b45309;
+  --ui-color-warning-fg: #ffffff;
+  --ui-color-warning-subtle: #fffbeb;
+  --ui-color-warning-border: #fde68a;
+
+  --ui-color-danger: #dc2626;
+  --ui-color-danger-hover: #b91c1c;
+  --ui-color-danger-active: #991b1b;
+  --ui-color-danger-fg: #ffffff;
+  --ui-color-danger-subtle: #fef2f2;
+  --ui-color-danger-border: #fecaca;
+
+  /* Focus Ring */
+  --ui-color-focus-ring: rgba(37, 99, 235, 0.35);
+  --ui-color-focus-border: #2563eb;
+}

package/src/theme/theme.types.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+
+export type ThemeMode = 'light' | 'dark' | 'system';
+export type ResolvedTheme = 'light' | 'dark';
+
+export interface ThemeContextValue {
+  theme: ThemeMode;
+  resolvedTheme: ResolvedTheme;
+  setTheme: (theme: ThemeMode) => void;
+  toggleTheme: () => void;
+}
+
+export interface ThemeProviderProps {
+  children: React.ReactNode;
+  defaultTheme?: ThemeMode;
+  storageKey?: string;
+  attribute?: string;
+  enableSystem?: boolean;
+}

package/src/theme/tokens.css

@@ -0,0 +1,61 @@
+/**
+ * Atelier UI — Design Tokens
+ * Scalable, consistent, unit-harmonized scales
+ */
+:root {
+  /* Typography Scale */
+  --ui-font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+  --ui-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+
+  --ui-font-size-xs: 0.75rem;     /* 12px */
+  --ui-font-size-sm: 0.875rem;    /* 14px */
+  --ui-font-size-md: 1rem;        /* 16px */
+  --ui-font-size-lg: 1.125rem;    /* 18px */
+  --ui-font-size-xl: 1.25rem;     /* 20px */
+  --ui-font-size-2xl: 1.5rem;     /* 24px */
+  --ui-font-size-3xl: 1.875rem;   /* 30px */
+  --ui-font-size-4xl: 2.25rem;    /* 36px */
+
+  --ui-font-weight-normal: 400;
+  --ui-font-weight-medium: 500;
+  --ui-font-weight-semibold: 600;
+  --ui-font-weight-bold: 700;
+
+  --ui-line-height-none: 1;
+  --ui-line-height-tight: 1.25;
+  --ui-line-height-normal: 1.5;
+  --ui-line-height-relaxed: 1.65;
+
+  /* Spacing Scale */
+  --ui-space-2xs: 0.25rem; /* 4px */
+  --ui-space-xs: 0.5rem;   /* 8px */
+  --ui-space-sm: 0.75rem;  /* 12px */
+  --ui-space-md: 1rem;     /* 16px */
+  --ui-space-lg: 1.5rem;   /* 24px */
+  --ui-space-xl: 2rem;     /* 32px */
+  --ui-space-2xl: 3rem;    /* 48px */
+  --ui-space-3xl: 4rem;    /* 64px */
+
+  /* Border Radius */
+  --ui-radius-none: 0px;
+  --ui-radius-sm: 6px;
+  --ui-radius-md: 10px;
+  --ui-radius-lg: 14px;
+  --ui-radius-full: 9999px;
+
+  /* Shadows */
+  --ui-shadow-none: none;
+  --ui-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
+  --ui-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
+  --ui-shadow-md: 0 4px 12px -2px rgba(0, 0, 0, 0.08), 0 2px 6px -1px rgba(0, 0, 0, 0.04);
+  --ui-shadow-lg: 0 12px 24px -4px rgba(0, 0, 0, 0.1), 0 4px 8px -2px rgba(0, 0, 0, 0.04);
+
+  /* Transitions */
+  --ui-transition-fast: 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  --ui-transition-base: 220ms cubic-bezier(0.16, 1, 0.3, 1);
+  --ui-transition-transform: transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
+
+  /* Focus Ring */
+  --ui-focus-ring-width: 3px;
+  --ui-focus-ring-offset: 2px;
+}

package/src/utils/index.ts

@@ -0,0 +1,44 @@
+/**
+ * Atelier UI — Internal Utilities
+ */
+
+export type ClassValue = string | number | bigint | boolean | undefined | null | { [key: string]: any } | ClassValue[];
+
+/**
+ * Lightweight classNames / cx utility with zero dependencies
+ */
+export function cx(...classes: ClassValue[]): string {
+  const result: string[] = [];
+
+  for (const item of classes) {
+    if (!item) continue;
+
+    if (typeof item === 'string' || typeof item === 'number') {
+      result.push(String(item));
+    } else if (Array.isArray(item)) {
+      const inner = cx(...item);
+      if (inner) result.push(inner);
+    } else if (typeof item === 'object') {
+      for (const [key, value] of Object.entries(item)) {
+        if (value) result.push(key);
+      }
+    }
+  }
+
+  return result.join(' ');
+}
+
+/**
+ * Maps space scale token values to css variable or raw css length
+ */
+export type SpaceToken = '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | number | string;
+
+export function getSpaceValue(val?: SpaceToken): string | undefined {
+  if (val === undefined) return undefined;
+  if (typeof val === 'number') return `${val}px`;
+  const tokenList = ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl'];
+  if (tokenList.includes(val)) {
+    return `var(--ui-space-${val})`;
+  }
+  return val;
+}