atelier-ui-react 1.0.2

package/src/Divider/Divider.css

@@ -0,0 +1,47 @@
+.ui-divider {
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+}
+
+.ui-divider--horizontal {
+  width: 100%;
+  flex-direction: row;
+}
+
+.ui-divider--vertical {
+  height: 100%;
+  min-height: 1em;
+  flex-direction: column;
+}
+
+.ui-divider__line {
+  flex-grow: 1;
+  background-color: var(--ui-color-border);
+}
+
+.ui-divider--horizontal .ui-divider__line {
+  height: 1px;
+}
+
+.ui-divider--vertical .ui-divider__line {
+  width: 1px;
+}
+
+.ui-divider__content {
+  padding: 0 var(--ui-space-sm);
+  font-size: var(--ui-font-size-xs);
+  color: var(--ui-color-foreground-muted);
+  font-weight: var(--ui-font-weight-medium);
+  white-space: nowrap;
+}
+
+.ui-divider--align-left .ui-divider__line:first-child {
+  flex-grow: 0;
+  width: var(--ui-space-lg);
+}
+
+.ui-divider--align-right .ui-divider__line:last-child {
+  flex-grow: 0;
+  width: var(--ui-space-lg);
+}

package/src/Divider/Divider.tsx

@@ -0,0 +1,53 @@
+import React, { forwardRef } from 'react';
+import type { DividerProps } from './Divider.types';
+import { cx, getSpaceValue } from '../utils';
+import './Divider.css';
+
+export const Divider = forwardRef<HTMLDivElement, DividerProps>(function Divider(
+  {
+    orientation = 'horizontal',
+    spacing = 'md',
+    label,
+    align = 'center',
+    className,
+    style,
+    children,
+    ...rest
+  },
+  ref
+) {
+  const content = label || children;
+  const spacingVal = getSpaceValue(spacing);
+
+  const classes = cx(
+    'ui-divider',
+    `ui-divider--${orientation}`,
+    content && `ui-divider--align-${align}`,
+    className
+  );
+
+  const combinedStyle: React.CSSProperties = {
+    marginTop: orientation === 'horizontal' ? spacingVal : undefined,
+    marginBottom: orientation === 'horizontal' ? spacingVal : undefined,
+    marginLeft: orientation === 'vertical' ? spacingVal : undefined,
+    marginRight: orientation === 'vertical' ? spacingVal : undefined,
+    ...style,
+  };
+
+  return (
+    <div
+      ref={ref}
+      role="separator"
+      aria-orientation={orientation}
+      className={classes}
+      style={combinedStyle}
+      {...rest}
+    >
+      <div className="ui-divider__line" />
+      {content && <span className="ui-divider__content">{content}</span>}
+      {content && <div className="ui-divider__line" />}
+    </div>
+  );
+});
+
+Divider.displayName = 'Divider';

package/src/Divider/Divider.types.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { SpaceToken } from '../utils';
+
+export type DividerOrientation = 'horizontal' | 'vertical';
+
+export interface DividerProps extends React.HTMLAttributes<HTMLDivElement> {
+  orientation?: DividerOrientation;
+  spacing?: SpaceToken;
+  label?: React.ReactNode;
+  align?: 'left' | 'center' | 'right';
+  children?: React.ReactNode;
+}

package/src/Divider/index.ts

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

package/src/Heading/Heading.css

@@ -0,0 +1,30 @@
+.ui-heading {
+  margin: 0;
+  padding: 0;
+  font-family: var(--ui-font-sans);
+  color: var(--ui-color-foreground);
+  line-height: var(--ui-line-height-tight);
+  letter-spacing: -0.02em;
+  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
+}
+
+/* Heading Sizes */
+.ui-heading--size-xs  { font-size: var(--ui-font-size-sm); }
+.ui-heading--size-sm  { font-size: var(--ui-font-size-md); }
+.ui-heading--size-md  { font-size: var(--ui-font-size-lg); }
+.ui-heading--size-lg  { font-size: var(--ui-font-size-xl); }
+.ui-heading--size-xl  { font-size: var(--ui-font-size-2xl); }
+.ui-heading--size-2xl { font-size: var(--ui-font-size-3xl); }
+.ui-heading--size-3xl { font-size: var(--ui-font-size-4xl); }
+.ui-heading--size-4xl { font-size: 2.75rem; letter-spacing: -0.03em; }
+
+/* Heading Weights */
+.ui-heading--weight-normal   { font-weight: var(--ui-font-weight-normal); }
+.ui-heading--weight-medium   { font-weight: var(--ui-font-weight-medium); }
+.ui-heading--weight-semibold { font-weight: var(--ui-font-weight-semibold); }
+.ui-heading--weight-bold     { font-weight: var(--ui-font-weight-bold); }
+
+/* Alignments */
+.ui-heading--align-left   { text-align: left; }
+.ui-heading--align-center { text-align: center; }
+.ui-heading--align-right  { text-align: right; }

package/src/Heading/Heading.tsx

@@ -0,0 +1,50 @@
+import React, { forwardRef } from 'react';
+import type { HeadingProps, HeadingSize } from './Heading.types';
+import { cx } from '../utils';
+import './Heading.css';
+
+const defaultLevelSizeMap: Record<number, HeadingSize> = {
+  1: '3xl',
+  2: '2xl',
+  3: 'xl',
+  4: 'lg',
+  5: 'md',
+  6: 'sm',
+};
+
+export const Heading = forwardRef<HTMLHeadingElement, HeadingProps>(function Heading(
+  {
+    level = 2,
+    as,
+    size,
+    weight = 'semibold',
+    align,
+    className,
+    children,
+    ...rest
+  },
+  ref
+) {
+  const Component = as || (`h${level}` as const);
+  const resolvedSize = size || defaultLevelSizeMap[level] || 'xl';
+
+  const classes = cx(
+    'ui-heading',
+    `ui-heading--size-${resolvedSize}`,
+    `ui-heading--weight-${weight}`,
+    align && `ui-heading--align-${align}`,
+    className
+  );
+
+  return React.createElement(
+    Component,
+    {
+      ref,
+      className: classes,
+      ...rest,
+    },
+    children
+  );
+});
+
+Heading.displayName = 'Heading';

package/src/Heading/Heading.types.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+
+export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+export type HeadingElement = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span' | 'div';
+export type HeadingSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl';
+export type HeadingWeight = 'normal' | 'medium' | 'semibold' | 'bold';
+export type HeadingAlign = 'left' | 'center' | 'right';
+
+export interface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {
+  level?: HeadingLevel;
+  as?: HeadingElement;
+  size?: HeadingSize;
+  weight?: HeadingWeight;
+  align?: HeadingAlign;
+  children?: React.ReactNode;
+}

package/src/Heading/index.ts

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

package/src/Icon/Icon.css

@@ -0,0 +1,26 @@
+.ui-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  vertical-align: middle;
+  flex-shrink: 0;
+  line-height: 1;
+}
+
+.ui-icon svg {
+  width: 100%;
+  height: 100%;
+}
+
+.ui-icon--spin {
+  animation: ui-spin 1s linear infinite;
+}
+
+@keyframes ui-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

package/src/Icon/Icon.tsx

@@ -0,0 +1,79 @@
+import React, { forwardRef } from 'react';
+import type { IconProps, IconSize } from './Icon.types';
+import { cx } from '../utils';
+import './Icon.css';
+
+const sizeMap: Record<string, number> = {
+  xs: 14,
+  sm: 16,
+  md: 20,
+  lg: 24,
+  xl: 32,
+};
+
+export const Icon = forwardRef<SVGSVGElement, IconProps>(function Icon(
+  {
+    icon: Component,
+    size = 'md',
+    color = 'inherit',
+    spin = false,
+    className,
+    style,
+    children,
+    ...rest
+  },
+  ref
+) {
+  const pixelSize = typeof size === 'number' ? size : sizeMap[size] || 20;
+
+  let resolvedColor = color;
+  const tokenColors: Record<string, string> = {
+    default: 'var(--ui-color-foreground)',
+    muted: 'var(--ui-color-foreground-muted)',
+    subtle: 'var(--ui-color-foreground-subtle)',
+    primary: 'var(--ui-color-primary)',
+    success: 'var(--ui-color-success)',
+    warning: 'var(--ui-color-warning)',
+    danger: 'var(--ui-color-danger)',
+    inherit: 'currentColor',
+  };
+
+  if (tokenColors[color]) {
+    resolvedColor = tokenColors[color];
+  }
+
+  const classes = cx(
+    'ui-icon',
+    spin && 'ui-icon--spin',
+    className
+  );
+
+  const combinedStyle: React.CSSProperties = {
+    width: `${pixelSize}px`,
+    height: `${pixelSize}px`,
+    color: resolvedColor,
+    ...style,
+  };
+
+  if (Component) {
+    return (
+      <span className={classes} style={combinedStyle}>
+        <Component
+          ref={ref}
+          width={pixelSize}
+          height={pixelSize}
+          aria-hidden="true"
+          {...rest}
+        />
+      </span>
+    );
+  }
+
+  return (
+    <span className={classes} style={combinedStyle} aria-hidden="true">
+      {children}
+    </span>
+  );
+});
+
+Icon.displayName = 'Icon';

package/src/Icon/Icon.types.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+
+export type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | number;
+export type IconColor = 'default' | 'muted' | 'subtle' | 'primary' | 'success' | 'warning' | 'danger' | 'inherit' | string;
+
+export interface IconProps extends React.SVGAttributes<SVGElement> {
+  icon?: React.ElementType;
+  size?: IconSize;
+  color?: IconColor;
+  spin?: boolean;
+  className?: string;
+  children?: React.ReactNode;
+}

package/src/Icon/index.ts

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

package/src/Input/Input.css

@@ -0,0 +1,145 @@
+.ui-input-wrapper {
+  display: inline-flex;
+  flex-direction: column;
+  gap: var(--ui-space-2xs);
+  box-sizing: border-box;
+  font-family: var(--ui-font-sans);
+}
+
+.ui-input-wrapper--full-width {
+  width: 100%;
+}
+
+/* Label */
+.ui-input-label {
+  font-size: var(--ui-font-size-xs);
+  font-weight: var(--ui-font-weight-medium);
+  color: var(--ui-color-foreground);
+  user-select: none;
+}
+
+.ui-input-label--disabled {
+  color: var(--ui-color-foreground-muted);
+}
+
+/* Inner input container (with icons) */
+.ui-input-container {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  border-radius: var(--ui-radius-md);
+  transition: border-color var(--ui-transition-fast), box-shadow var(--ui-transition-fast);
+}
+
+/* Base input field */
+.ui-input {
+  width: 100%;
+  font-family: var(--ui-font-sans);
+  color: var(--ui-color-foreground);
+  background-color: var(--ui-color-surface);
+  border: 1px solid var(--ui-color-border);
+  border-radius: var(--ui-radius-md);
+  outline: none;
+  transition:
+    border-color var(--ui-transition-fast),
+    box-shadow var(--ui-transition-fast),
+    background-color var(--ui-transition-fast);
+}
+
+.ui-input::placeholder {
+  color: var(--ui-color-foreground-subtle);
+}
+
+/* Focus state */
+.ui-input:focus {
+  border-color: var(--ui-color-focus-border);
+  box-shadow: 0 0 0 var(--ui-focus-ring-width) var(--ui-color-focus-ring);
+}
+
+/* Sizes */
+.ui-input--size-sm {
+  height: 32px;
+  padding: 0 10px;
+  font-size: var(--ui-font-size-xs);
+  border-radius: var(--ui-radius-sm);
+}
+
+.ui-input--size-md {
+  height: 40px;
+  padding: 0 12px;
+  font-size: var(--ui-font-size-sm);
+  border-radius: var(--ui-radius-md);
+}
+
+.ui-input--size-lg {
+  height: 48px;
+  padding: 0 16px;
+  font-size: var(--ui-font-size-md);
+  border-radius: var(--ui-radius-md);
+}
+
+/* Variants */
+.ui-input--variant-filled {
+  background-color: var(--ui-color-surface-inset);
+  border-color: transparent;
+}
+
+.ui-input--variant-filled:focus {
+  background-color: var(--ui-color-surface);
+  border-color: var(--ui-color-focus-border);
+}
+
+/* Padding adjustments for icons */
+.ui-input--has-left-icon.ui-input--size-sm { padding-left: 30px; }
+.ui-input--has-left-icon.ui-input--size-md { padding-left: 36px; }
+.ui-input--has-left-icon.ui-input--size-lg { padding-left: 42px; }
+
+.ui-input--has-right-icon.ui-input--size-sm { padding-right: 30px; }
+.ui-input--has-right-icon.ui-input--size-md { padding-right: 36px; }
+.ui-input--has-right-icon.ui-input--size-lg { padding-right: 42px; }
+
+/* Icons */
+.ui-input__icon {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--ui-color-foreground-muted);
+  pointer-events: none;
+}
+
+.ui-input__icon--left {
+  left: 10px;
+}
+
+.ui-input__icon--right {
+  right: 10px;
+}
+
+/* States */
+.ui-input:disabled {
+  background-color: var(--ui-color-surface-inset);
+  color: var(--ui-color-foreground-muted);
+  border-color: var(--ui-color-border-subtle);
+  cursor: not-allowed;
+  opacity: 0.7;
+}
+
+.ui-input--error,
+.ui-input--error:focus {
+  border-color: var(--ui-color-danger);
+  box-shadow: 0 0 0 var(--ui-focus-ring-width) rgba(220, 38, 38, 0.2);
+}
+
+/* Helper / Error text */
+.ui-input-helper {
+  font-size: var(--ui-font-size-xs);
+  color: var(--ui-color-foreground-muted);
+  line-height: 1.4;
+}
+
+.ui-input-helper--error {
+  color: var(--ui-color-danger);
+  font-weight: var(--ui-font-weight-medium);
+}

package/src/Input/Input.tsx

@@ -0,0 +1,86 @@
+import React, { forwardRef, useId } from 'react';
+import type { InputProps } from './Input.types';
+import { cx } from '../utils';
+import './Input.css';
+
+export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
+  {
+    size = 'md',
+    variant = 'default',
+    label,
+    helperText,
+    error,
+    leftIcon,
+    rightIcon,
+    fullWidth = false,
+    disabled = false,
+    id: explicitId,
+    className,
+    ...rest
+  },
+  ref
+) {
+  const generatedId = useId();
+  const id = explicitId || generatedId;
+  const helperId = `${id}-helper`;
+  const hasError = Boolean(error);
+  const errorMessage = typeof error === 'string' ? error : undefined;
+
+  const isReadOnly = rest.readOnly !== undefined ? rest.readOnly : (rest.value !== undefined && !rest.onChange ? true : undefined);
+
+  const wrapperClasses = cx(
+    'ui-input-wrapper',
+    fullWidth && 'ui-input-wrapper--full-width'
+  );
+
+  const inputClasses = cx(
+    'ui-input',
+    `ui-input--size-${size}`,
+    `ui-input--variant-${variant}`,
+    leftIcon && 'ui-input--has-left-icon',
+    rightIcon && 'ui-input--has-right-icon',
+    hasError && 'ui-input--error',
+    className
+  );
+
+  return (
+    <div className={wrapperClasses}>
+      {label && (
+        <label
+          htmlFor={id}
+          className={cx('ui-input-label', disabled && 'ui-input-label--disabled')}
+        >
+          {label}
+        </label>
+      )}
+
+      <div className="ui-input-container">
+        {leftIcon && <span className="ui-input__icon ui-input__icon--left">{leftIcon}</span>}
+
+        <input
+          ref={ref}
+          id={id}
+          disabled={disabled}
+          readOnly={isReadOnly}
+          aria-invalid={hasError}
+          aria-describedby={helperText || errorMessage ? helperId : undefined}
+          className={inputClasses}
+          {...rest}
+        />
+
+        {rightIcon && <span className="ui-input__icon ui-input__icon--right">{rightIcon}</span>}
+      </div>
+
+      {(errorMessage || helperText) && (
+        <span
+          id={helperId}
+          className={cx('ui-input-helper', hasError && 'ui-input-helper--error')}
+        >
+          {errorMessage || helperText}
+        </span>
+      )}
+    </div>
+  );
+});
+
+Input.displayName = 'Input';

package/src/Input/Input.types.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+
+export type InputSize = 'sm' | 'md' | 'lg';
+export type InputVariant = 'default' | 'filled';
+
+export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
+  size?: InputSize;
+  variant?: InputVariant;
+  label?: React.ReactNode;
+  helperText?: React.ReactNode;
+  error?: string | boolean;
+  leftIcon?: React.ReactNode;
+  rightIcon?: React.ReactNode;
+  fullWidth?: boolean;
+}

package/src/Input/index.ts

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

package/src/Link/Link.css

@@ -0,0 +1,50 @@
+.ui-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-family: var(--ui-font-sans);
+  font-weight: var(--ui-font-weight-medium);
+  cursor: pointer;
+  text-decoration: none;
+  transition: color var(--ui-transition-fast), text-decoration-color var(--ui-transition-fast);
+  border-radius: var(--ui-radius-sm);
+}
+
+.ui-link:focus-visible {
+  outline: var(--ui-focus-ring-width) solid var(--ui-color-focus-ring);
+  outline-offset: var(--ui-focus-ring-offset);
+}
+
+/* Sizes */
+.ui-link--size-sm { font-size: var(--ui-font-size-xs); }
+.ui-link--size-md { font-size: var(--ui-font-size-sm); }
+.ui-link--size-lg { font-size: var(--ui-font-size-md); }
+
+/* Variants */
+.ui-link--variant-default {
+  color: var(--ui-color-accent);
+}
+
+.ui-link--variant-default:hover {
+  color: var(--ui-color-accent-hover);
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+
+.ui-link--variant-subtle {
+  color: var(--ui-color-foreground-muted);
+}
+
+.ui-link--variant-subtle:hover {
+  color: var(--ui-color-foreground);
+}
+
+.ui-link--variant-underline {
+  color: var(--ui-color-foreground);
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+
+.ui-link--variant-underline:hover {
+  color: var(--ui-color-accent);
+}