atelier-ui-react 1.0.2

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "atelier-ui-react",
+  "version": "1.0.2",
+  "description": "A modern, accessible React + TypeScript UI framework built with pure CSS design tokens.",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./src/index.ts",
+  "style": "./dist/index.css",
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    },
+    "./styles.css": "./dist/index.css",
+    "./tokens": "./src/theme/tokens.css"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "scripts": {
+    "build": "npm run build:css && npm run build:js",
+    "build:css": "esbuild src/styles/globals.css --outfile=dist/index.css",
+    "build:js": "esbuild src/index.ts --bundle --format=esm --packages=external --outfile=dist/index.mjs && esbuild src/index.ts --bundle --format=cjs --packages=external --outfile=dist/index.cjs",
+    "lint": "tsc --noEmit",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "react",
+    "ui",
+    "design-system",
+    "components",
+    "css-variables",
+    "typescript"
+  ],
+  "author": "Atelier UI Team",
+  "license": "MIT",
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "esbuild": "^0.25.0",
+    "typescript": "^5.0.0",
+    "@types/react": "^18.0.0 || ^19.0.0",
+    "@types/react-dom": "^18.0.0 || ^19.0.0"
+  }
+}

package/src/Button/Button.css

@@ -0,0 +1,169 @@
+.ui-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--ui-space-xs);
+  font-family: var(--ui-font-sans);
+  font-weight: var(--ui-font-weight-medium);
+  line-height: var(--ui-line-height-none);
+  white-space: nowrap;
+  border-radius: var(--ui-radius-md);
+  border: 1px solid transparent;
+  cursor: pointer;
+  user-select: none;
+  text-decoration: none;
+  position: relative;
+  transition:
+    background-color var(--ui-transition-fast),
+    border-color var(--ui-transition-fast),
+    color var(--ui-transition-fast),
+    box-shadow var(--ui-transition-fast),
+    transform 100ms ease;
+}
+
+.ui-btn:focus-visible {
+  outline: var(--ui-focus-ring-width) solid var(--ui-color-focus-ring);
+  outline-offset: var(--ui-focus-ring-offset);
+}
+
+.ui-btn:active:not(:disabled):not([aria-disabled="true"]) {
+  transform: scale(0.98);
+}
+
+/* Sizes */
+.ui-btn--size-sm {
+  height: 32px;
+  padding: 0 12px;
+  font-size: var(--ui-font-size-xs);
+  gap: 6px;
+  border-radius: var(--ui-radius-sm);
+}
+
+.ui-btn--size-md {
+  height: 40px;
+  padding: 0 16px;
+  font-size: var(--ui-font-size-sm);
+  gap: 8px;
+  border-radius: var(--ui-radius-md);
+}
+
+.ui-btn--size-lg {
+  height: 48px;
+  padding: 0 24px;
+  font-size: var(--ui-font-size-md);
+  gap: 10px;
+  border-radius: var(--ui-radius-md);
+}
+
+/* Variant: Primary */
+.ui-btn--variant-primary {
+  background-color: var(--ui-color-primary);
+  color: var(--ui-color-primary-fg);
+  box-shadow: var(--ui-shadow-xs);
+}
+
+.ui-btn--variant-primary:hover:not(:disabled):not([aria-disabled="true"]) {
+  background-color: var(--ui-color-primary-hover);
+}
+
+.ui-btn--variant-primary:active:not(:disabled):not([aria-disabled="true"]) {
+  background-color: var(--ui-color-primary-active);
+}
+
+/* Variant: Secondary */
+.ui-btn--variant-secondary {
+  background-color: var(--ui-color-secondary);
+  color: var(--ui-color-secondary-fg);
+  border-color: var(--ui-color-border);
+}
+
+.ui-btn--variant-secondary:hover:not(:disabled):not([aria-disabled="true"]) {
+  background-color: var(--ui-color-secondary-hover);
+  border-color: var(--ui-color-border-hover);
+}
+
+.ui-btn--variant-secondary:active:not(:disabled):not([aria-disabled="true"]) {
+  background-color: var(--ui-color-secondary-active);
+}
+
+/* Variant: Outline */
+.ui-btn--variant-outline {
+  background-color: transparent;
+  color: var(--ui-color-foreground);
+  border-color: var(--ui-color-border);
+}
+
+.ui-btn--variant-outline:hover:not(:disabled):not([aria-disabled="true"]) {
+  background-color: var(--ui-color-surface-hover);
+  border-color: var(--ui-color-border-strong);
+}
+
+.ui-btn--variant-outline:active:not(:disabled):not([aria-disabled="true"]) {
+  background-color: var(--ui-color-secondary);
+}
+
+/* Variant: Ghost */
+.ui-btn--variant-ghost {
+  background-color: transparent;
+  color: var(--ui-color-foreground);
+  border-color: transparent;
+}
+
+.ui-btn--variant-ghost:hover:not(:disabled):not([aria-disabled="true"]) {
+  background-color: var(--ui-color-surface-hover);
+}
+
+.ui-btn--variant-ghost:active:not(:disabled):not([aria-disabled="true"]) {
+  background-color: var(--ui-color-secondary);
+}
+
+/* Variant: Danger */
+.ui-btn--variant-danger {
+  background-color: var(--ui-color-danger);
+  color: var(--ui-color-danger-fg);
+  box-shadow: var(--ui-shadow-xs);
+}
+
+.ui-btn--variant-danger:hover:not(:disabled):not([aria-disabled="true"]) {
+  background-color: var(--ui-color-danger-hover);
+}
+
+.ui-btn--variant-danger:active:not(:disabled):not([aria-disabled="true"]) {
+  background-color: var(--ui-color-danger-active);
+}
+
+/* Modifiers */
+.ui-btn--full-width {
+  width: 100%;
+}
+
+.ui-btn--disabled,
+.ui-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+  box-shadow: none;
+}
+
+.ui-btn--loading {
+  cursor: wait;
+  pointer-events: none;
+}
+
+/* Spinner inside button */
+.ui-btn__spinner {
+  width: 1em;
+  height: 1em;
+  border: 2px solid currentColor;
+  border-right-color: transparent;
+  border-radius: 50%;
+  animation: ui-btn-spin 0.65s linear infinite;
+  display: inline-block;
+  flex-shrink: 0;
+}
+
+@keyframes ui-btn-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}

package/src/Button/Button.tsx

@@ -0,0 +1,57 @@
+import React, { forwardRef } from 'react';
+import type { ButtonProps } from './Button.types';
+import { cx } from '../utils';
+import './Button.css';
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
+  {
+    variant = 'primary',
+    size = 'md',
+    loading = false,
+    disabled = false,
+    iconLeft,
+    iconRight,
+    fullWidth = false,
+    as: Component = 'button',
+    type = 'button',
+    className,
+    children,
+    ...rest
+  },
+  ref
+) {
+  const isActuallyDisabled = disabled || loading;
+
+  const classes = cx(
+    'ui-btn',
+    `ui-btn--variant-${variant}`,
+    `ui-btn--size-${size}`,
+    fullWidth && 'ui-btn--full-width',
+    isActuallyDisabled && 'ui-btn--disabled',
+    loading && 'ui-btn--loading',
+    className
+  );
+
+  const buttonProps = Component === 'button' ? { type, disabled: isActuallyDisabled } : { 'aria-disabled': isActuallyDisabled };
+
+  return React.createElement(
+    Component,
+    {
+      ref,
+      className: classes,
+      ...buttonProps,
+      ...rest,
+    },
+    <>
+      {loading ? (
+        <span className="ui-btn__spinner" aria-hidden="true" />
+      ) : (
+        iconLeft && <span className="ui-btn__icon-left">{iconLeft}</span>
+      )}
+      {children && <span className="ui-btn__label">{children}</span>}
+      {!loading && iconRight && <span className="ui-btn__icon-right">{iconRight}</span>}
+    </>
+  );
+});
+
+Button.displayName = 'Button';

package/src/Button/Button.types.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+
+export type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger';
+export type ButtonSize = 'sm' | 'md' | 'lg';
+
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  loading?: boolean;
+  disabled?: boolean;
+  iconLeft?: React.ReactNode;
+  iconRight?: React.ReactNode;
+  fullWidth?: boolean;
+  as?: React.ElementType;
+  href?: string;
+  target?: string;
+  rel?: string;
+  children?: React.ReactNode;
+}

package/src/Button/index.ts

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

package/src/Card/Card.css

@@ -0,0 +1,73 @@
+.ui-card {
+  box-sizing: border-box;
+  background-color: var(--ui-color-surface);
+  border-radius: var(--ui-radius-lg);
+  color: var(--ui-color-foreground);
+  position: relative;
+  transition:
+    background-color var(--ui-transition-fast),
+    border-color var(--ui-transition-fast),
+    box-shadow var(--ui-transition-fast),
+    transform var(--ui-transition-fast);
+}
+
+/* Variants */
+.ui-card--variant-outlined {
+  border: 1px solid var(--ui-color-border);
+  box-shadow: none;
+}
+
+.ui-card--variant-elevated {
+  border: 1px solid var(--ui-color-border-subtle);
+  box-shadow: var(--ui-shadow-sm);
+}
+
+.ui-card--variant-flat {
+  background-color: var(--ui-color-surface-inset);
+  border: 1px solid transparent;
+  box-shadow: none;
+}
+
+/* Paddings */
+.ui-card--padding-none { padding: 0; }
+.ui-card--padding-xs   { padding: var(--ui-space-xs); }
+.ui-card--padding-sm   { padding: var(--ui-space-sm); }
+.ui-card--padding-md   { padding: var(--ui-space-md); }
+.ui-card--padding-lg   { padding: var(--ui-space-lg); }
+.ui-card--padding-xl   { padding: var(--ui-space-xl); }
+
+/* Interactive hover */
+.ui-card--interactive {
+  cursor: pointer;
+}
+
+.ui-card--interactive:hover {
+  border-color: var(--ui-color-border-strong);
+  box-shadow: var(--ui-shadow-md);
+  transform: translateY(-1px);
+}
+
+.ui-card--interactive:active {
+  transform: translateY(0);
+}
+
+/* Sub-components */
+.ui-card__header {
+  padding-bottom: var(--ui-space-sm);
+  border-bottom: 1px solid var(--ui-color-border-subtle);
+  margin-bottom: var(--ui-space-md);
+}
+
+.ui-card__body {
+  flex: 1 1 auto;
+}
+
+.ui-card__footer {
+  padding-top: var(--ui-space-sm);
+  border-top: 1px solid var(--ui-color-border-subtle);
+  margin-top: var(--ui-space-md);
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--ui-space-sm);
+}

package/src/Card/Card.tsx

@@ -0,0 +1,79 @@
+import React, { forwardRef } from 'react';
+import type { CardProps, CardHeaderProps, CardBodyProps, CardFooterProps } from './Card.types';
+import { cx } from '../utils';
+import './Card.css';
+
+const CardBase = forwardRef<HTMLDivElement, CardProps>(function Card(
+  {
+    as: Component = 'div',
+    variant = 'outlined',
+    padding = 'lg',
+    interactive = false,
+    className,
+    children,
+    ...rest
+  },
+  ref
+) {
+  const classes = cx(
+    'ui-card',
+    `ui-card--variant-${variant}`,
+    `ui-card--padding-${padding}`,
+    interactive && 'ui-card--interactive',
+    className
+  );
+
+  return React.createElement(
+    Component,
+    {
+      ref,
+      className: classes,
+      ...rest,
+    },
+    children
+  );
+});
+
+const CardHeader = forwardRef<HTMLDivElement, CardHeaderProps>(function CardHeader(
+  { className, children, ...rest },
+  ref
+) {
+  return (
+    <div ref={ref} className={cx('ui-card__header', className)} {...rest}>
+      {children}
+    </div>
+  );
+});
+CardHeader.displayName = 'Card.Header';
+
+const CardBody = forwardRef<HTMLDivElement, CardBodyProps>(function CardBody(
+  { className, children, ...rest },
+  ref
+) {
+  return (
+    <div ref={ref} className={cx('ui-card__body', className)} {...rest}>
+      {children}
+    </div>
+  );
+});
+CardBody.displayName = 'Card.Body';
+
+const CardFooter = forwardRef<HTMLDivElement, CardFooterProps>(function CardFooter(
+  { className, children, ...rest },
+  ref
+) {
+  return (
+    <div ref={ref} className={cx('ui-card__footer', className)} {...rest}>
+      {children}
+    </div>
+  );
+});
+CardFooter.displayName = 'Card.Footer';
+
+export const Card = Object.assign(CardBase, {
+  Header: CardHeader,
+  Body: CardBody,
+  Footer: CardFooter,
+});
+
+Card.displayName = 'Card';

package/src/Card/Card.types.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+import type { SpaceToken } from '../utils';
+
+export type CardVariant = 'elevated' | 'outlined' | 'flat';
+export type CardPadding = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+  as?: React.ElementType;
+  variant?: CardVariant;
+  padding?: CardPadding;
+  interactive?: boolean;
+  children?: React.ReactNode;
+}
+
+export interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+  children?: React.ReactNode;
+}
+
+export interface CardBodyProps extends React.HTMLAttributes<HTMLDivElement> {
+  children?: React.ReactNode;
+}
+
+export interface CardFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+  children?: React.ReactNode;
+}

package/src/Card/index.ts

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

package/src/Checkbox/Checkbox.css

@@ -0,0 +1,101 @@
+.ui-checkbox-wrapper {
+  display: inline-flex;
+  align-items: flex-start;
+  gap: var(--ui-space-xs);
+  cursor: pointer;
+  user-select: none;
+  font-family: var(--ui-font-sans);
+  position: relative;
+}
+
+.ui-checkbox-wrapper--disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+/* Hidden native input */
+.ui-checkbox-input {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+  margin: 0;
+  pointer-events: none;
+}
+
+/* Visual box */
+.ui-checkbox-box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  border: 1px solid var(--ui-color-border-strong);
+  background-color: var(--ui-color-surface);
+  border-radius: var(--ui-radius-sm);
+  color: var(--ui-color-primary-fg);
+  transition:
+    background-color var(--ui-transition-fast),
+    border-color var(--ui-transition-fast),
+    box-shadow var(--ui-transition-fast);
+}
+
+/* Sizes */
+.ui-checkbox-box--sm {
+  width: 16px;
+  height: 16px;
+  margin-top: 2px;
+}
+
+.ui-checkbox-box--md {
+  width: 18px;
+  height: 18px;
+  margin-top: 2px;
+}
+
+/* Checked / Indeterminate state */
+.ui-checkbox-box--checked,
+.ui-checkbox-box--indeterminate {
+  background-color: var(--ui-color-primary);
+  border-color: var(--ui-color-primary);
+}
+
+/* Focus */
+.ui-checkbox-input:focus-visible + .ui-checkbox-box {
+  outline: var(--ui-focus-ring-width) solid var(--ui-color-focus-ring);
+  outline-offset: var(--ui-focus-ring-offset);
+}
+
+/* Error */
+.ui-checkbox-box--error {
+  border-color: var(--ui-color-danger);
+}
+
+/* Icon svg */
+.ui-checkbox-icon {
+  width: 12px;
+  height: 12px;
+  stroke: currentColor;
+  stroke-width: 2.5;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  fill: none;
+}
+
+/* Content labels */
+.ui-checkbox-content {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  line-height: 1.4;
+}
+
+.ui-checkbox-label {
+  font-size: var(--ui-font-size-sm);
+  font-weight: var(--ui-font-weight-medium);
+  color: var(--ui-color-foreground);
+}
+
+.ui-checkbox-desc {
+  font-size: var(--ui-font-size-xs);
+  color: var(--ui-color-foreground-muted);
+}

package/src/Checkbox/Checkbox.tsx

@@ -0,0 +1,85 @@
+import React, { forwardRef, useEffect, useRef } from 'react';
+import type { CheckboxProps } from './Checkbox.types';
+import { cx } from '../utils';
+import './Checkbox.css';
+
+export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(function Checkbox(
+  {
+    size = 'md',
+    label,
+    description,
+    indeterminate = false,
+    checked,
+    defaultChecked,
+    disabled = false,
+    error,
+    className,
+    onChange,
+    readOnly,
+    ...rest
+  },
+  forwardedRef
+) {
+  const innerRef = useRef<HTMLInputElement>(null);
+  const inputRef = (forwardedRef as React.RefObject<HTMLInputElement>) || innerRef;
+
+  useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.indeterminate = Boolean(indeterminate);
+    }
+  }, [indeterminate, inputRef]);
+
+  const isChecked = checked !== undefined ? checked : undefined;
+  const isReadOnly = readOnly !== undefined ? readOnly : (checked !== undefined && !onChange ? true : undefined);
+
+  const wrapperClasses = cx(
+    'ui-checkbox-wrapper',
+    disabled && 'ui-checkbox-wrapper--disabled',
+    className
+  );
+
+  const boxClasses = cx(
+    'ui-checkbox-box',
+    `ui-checkbox-box--${size}`,
+    (isChecked || defaultChecked) && 'ui-checkbox-box--checked',
+    indeterminate && 'ui-checkbox-box--indeterminate',
+    error && 'ui-checkbox-box--error'
+  );
+
+  return (
+    <label className={wrapperClasses}>
+      <input
+        ref={inputRef}
+        type="checkbox"
+        checked={checked}
+        defaultChecked={defaultChecked}
+        disabled={disabled}
+        readOnly={isReadOnly}
+        onChange={onChange}
+        className="ui-checkbox-input"
+        {...rest}
+      />
+
+      <span className={boxClasses} aria-hidden="true">
+        {indeterminate ? (
+          <svg className="ui-checkbox-icon" viewBox="0 0 24 24">
+            <line x1="5" y1="12" x2="19" y2="12" />
+          </svg>
+        ) : (
+          <svg className="ui-checkbox-icon" viewBox="0 0 24 24">
+            <polyline points="20 6 9 17 4 12" />
+          </svg>
+        )}
+      </span>
+
+      {(label || description) && (
+        <span className="ui-checkbox-content">
+          {label && <span className="ui-checkbox-label">{label}</span>}
+          {description && <span className="ui-checkbox-desc">{description}</span>}
+        </span>
+      )}
+    </label>
+  );
+});
+
+Checkbox.displayName = 'Checkbox';

package/src/Checkbox/Checkbox.types.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+
+export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
+  size?: 'sm' | 'md';
+  label?: React.ReactNode;
+  description?: React.ReactNode;
+  indeterminate?: boolean;
+  error?: string | boolean;
+}

package/src/Checkbox/index.ts

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