atelier-ui-react 1.0.2

package/src/Link/Link.tsx

@@ -0,0 +1,64 @@
+import React, { forwardRef } from 'react';
+import type { LinkProps } from './Link.types';
+import { cx } from '../utils';
+import './Link.css';
+
+export const Link = forwardRef<HTMLAnchorElement, LinkProps>(function Link(
+  {
+    variant = 'default',
+    size = 'md',
+    external = false,
+    iconLeft,
+    iconRight,
+    className,
+    target,
+    rel,
+    children,
+    ...rest
+  },
+  ref
+) {
+  const classes = cx(
+    'ui-link',
+    `ui-link--variant-${variant}`,
+    `ui-link--size-${size}`,
+    className
+  );
+
+  const resolvedTarget = external ? '_blank' : target;
+  const resolvedRel = external ? (rel ? `${rel} noopener noreferrer` : 'noopener noreferrer') : rel;
+
+  return (
+    <a
+      ref={ref}
+      className={classes}
+      target={resolvedTarget}
+      rel={resolvedRel}
+      {...rest}
+    >
+      {iconLeft && <span className="ui-link__icon-left">{iconLeft}</span>}
+      <span>{children}</span>
+      {iconRight && <span className="ui-link__icon-right">{iconRight}</span>}
+      {external && !iconRight && (
+        <svg
+          width="12"
+          height="12"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          className="ui-link__external-icon"
+          aria-hidden="true"
+        >
+          <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
+          <polyline points="15 3 21 3 21 9" />
+          <line x1="10" y1="14" x2="21" y2="3" />
+        </svg>
+      )}
+    </a>
+  );
+});
+
+Link.displayName = 'Link';

package/src/Link/Link.types.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+
+export type LinkVariant = 'default' | 'subtle' | 'underline';
+export type LinkSize = 'sm' | 'md' | 'lg';
+
+export interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+  variant?: LinkVariant;
+  size?: LinkSize;
+  external?: boolean;
+  iconLeft?: React.ReactNode;
+  iconRight?: React.ReactNode;
+  children?: React.ReactNode;
+}

package/src/Link/index.ts

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

package/src/Select/Select.css

@@ -0,0 +1,115 @@
+.ui-select-wrapper {
+  display: inline-flex;
+  flex-direction: column;
+  gap: var(--ui-space-2xs);
+  box-sizing: border-box;
+  font-family: var(--ui-font-sans);
+}
+
+.ui-select-wrapper--full-width {
+  width: 100%;
+}
+
+/* Label */
+.ui-select-label {
+  font-size: var(--ui-font-size-xs);
+  font-weight: var(--ui-font-weight-medium);
+  color: var(--ui-color-foreground);
+  user-select: none;
+}
+
+.ui-select-label--disabled {
+  color: var(--ui-color-foreground-muted);
+}
+
+/* Select Container */
+.ui-select-container {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+
+/* Native select styled cleanly */
+.ui-select {
+  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);
+  appearance: none;
+  -webkit-appearance: none;
+  padding-right: 36px;
+  cursor: pointer;
+  outline: none;
+  transition:
+    border-color var(--ui-transition-fast),
+    box-shadow var(--ui-transition-fast),
+    background-color var(--ui-transition-fast);
+}
+
+.ui-select: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-select--size-sm {
+  height: 32px;
+  padding-left: 10px;
+  font-size: var(--ui-font-size-xs);
+  border-radius: var(--ui-radius-sm);
+}
+
+.ui-select--size-md {
+  height: 40px;
+  padding-left: 12px;
+  font-size: var(--ui-font-size-sm);
+  border-radius: var(--ui-radius-md);
+}
+
+.ui-select--size-lg {
+  height: 48px;
+  padding-left: 16px;
+  font-size: var(--ui-font-size-md);
+  border-radius: var(--ui-radius-md);
+}
+
+/* States */
+.ui-select: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-select--error,
+.ui-select--error:focus {
+  border-color: var(--ui-color-danger);
+  box-shadow: 0 0 0 var(--ui-focus-ring-width) rgba(220, 38, 38, 0.2);
+}
+
+/* Chevron arrow */
+.ui-select-icon {
+  position: absolute;
+  right: 12px;
+  pointer-events: none;
+  color: var(--ui-color-foreground-muted);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Helper / Error */
+.ui-select-helper {
+  font-size: var(--ui-font-size-xs);
+  color: var(--ui-color-foreground-muted);
+  line-height: 1.4;
+}
+
+.ui-select-helper--error {
+  color: var(--ui-color-danger);
+  font-weight: var(--ui-font-weight-medium);
+}

package/src/Select/Select.tsx

@@ -0,0 +1,109 @@
+import React, { forwardRef, useId } from 'react';
+import type { SelectProps } from './Select.types';
+import { cx } from '../utils';
+import './Select.css';
+
+export const Select = forwardRef<HTMLSelectElement, SelectProps>(function Select(
+  {
+    options,
+    placeholder,
+    size = 'md',
+    label,
+    helperText,
+    error,
+    fullWidth = false,
+    disabled = false,
+    id: explicitId,
+    className,
+    children,
+    value,
+    defaultValue,
+    ...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 wrapperClasses = cx(
+    'ui-select-wrapper',
+    fullWidth && 'ui-select-wrapper--full-width'
+  );
+
+  const selectClasses = cx(
+    'ui-select',
+    `ui-select--size-${size}`,
+    hasError && 'ui-select--error',
+    className
+  );
+
+  return (
+    <div className={wrapperClasses}>
+      {label && (
+        <label
+          htmlFor={id}
+          className={cx('ui-select-label', disabled && 'ui-select-label--disabled')}
+        >
+          {label}
+        </label>
+      )}
+
+      <div className="ui-select-container">
+        <select
+          ref={ref}
+          id={id}
+          disabled={disabled}
+          value={value}
+          defaultValue={defaultValue}
+          aria-invalid={hasError}
+          aria-describedby={helperText || errorMessage ? helperId : undefined}
+          className={selectClasses}
+          {...rest}
+        >
+          {placeholder && (
+            <option value="" disabled>
+              {placeholder}
+            </option>
+          )}
+
+          {options
+            ? options.map((opt) => (
+                <option key={opt.value} value={opt.value} disabled={opt.disabled}>
+                  {opt.label}
+                </option>
+              ))
+            : children}
+        </select>
+
+        <span className="ui-select-icon" aria-hidden="true">
+          <svg
+            width="16"
+            height="16"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <polyline points="6 9 12 15 18 9" />
+          </svg>
+        </span>
+      </div>
+
+      {(errorMessage || helperText) && (
+        <span
+          id={helperId}
+          className={cx('ui-select-helper', hasError && 'ui-select-helper--error')}
+        >
+          {errorMessage || helperText}
+        </span>
+      )}
+    </div>
+  );
+});
+
+Select.displayName = 'Select';

package/src/Select/Select.types.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+
+export interface SelectOption {
+  label: string;
+  value: string | number;
+  disabled?: boolean;
+}
+
+export type SelectSize = 'sm' | 'md' | 'lg';
+
+export interface SelectProps extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'size'> {
+  options?: SelectOption[];
+  placeholder?: string;
+  size?: SelectSize;
+  label?: React.ReactNode;
+  helperText?: React.ReactNode;
+  error?: string | boolean;
+  fullWidth?: boolean;
+}

package/src/Select/index.ts

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

package/src/Text/Text.css

@@ -0,0 +1,49 @@
+.ui-text {
+  margin: 0;
+  padding: 0;
+  font-family: var(--ui-font-sans);
+  line-height: var(--ui-line-height-normal);
+  color: var(--ui-color-foreground);
+  transition: color var(--ui-transition-fast);
+}
+
+/* Sizes */
+.ui-text--size-xs  { font-size: var(--ui-font-size-xs); }
+.ui-text--size-sm  { font-size: var(--ui-font-size-sm); }
+.ui-text--size-md  { font-size: var(--ui-font-size-md); }
+.ui-text--size-lg  { font-size: var(--ui-font-size-lg); }
+.ui-text--size-xl  { font-size: var(--ui-font-size-xl); }
+.ui-text--size-2xl { font-size: var(--ui-font-size-2xl); }
+
+/* Weights */
+.ui-text--weight-normal   { font-weight: var(--ui-font-weight-normal); }
+.ui-text--weight-medium   { font-weight: var(--ui-font-weight-medium); }
+.ui-text--weight-semibold { font-weight: var(--ui-font-weight-semibold); }
+.ui-text--weight-bold     { font-weight: var(--ui-font-weight-bold); }
+
+/* Colors */
+.ui-text--color-default  { color: var(--ui-color-foreground); }
+.ui-text--color-muted    { color: var(--ui-color-foreground-muted); }
+.ui-text--color-subtle   { color: var(--ui-color-foreground-subtle); }
+.ui-text--color-primary  { color: var(--ui-color-primary); }
+.ui-text--color-success  { color: var(--ui-color-success); }
+.ui-text--color-warning  { color: var(--ui-color-warning); }
+.ui-text--color-danger   { color: var(--ui-color-danger); }
+.ui-text--color-inherit  { color: inherit; }
+
+/* Alignments */
+.ui-text--align-left    { text-align: left; }
+.ui-text--align-center  { text-align: center; }
+.ui-text--align-right   { text-align: right; }
+.ui-text--align-justify { text-align: justify; }
+
+/* Modifiers */
+.ui-text--truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ui-text--mono {
+  font-family: var(--ui-font-mono);
+}

package/src/Text/Text.tsx

@@ -0,0 +1,46 @@
+import React, { forwardRef } from 'react';
+import type { TextProps } from './Text.types';
+import { cx } from '../utils';
+import './Text.css';
+
+export const Text = forwardRef<HTMLElement, TextProps>(function Text(
+  {
+    as: Component = 'p',
+    size = 'md',
+    weight = 'normal',
+    color = 'default',
+    muted = false,
+    align,
+    truncate = false,
+    mono = false,
+    className,
+    children,
+    ...rest
+  },
+  ref
+) {
+  const resolvedColor = muted ? 'muted' : color;
+
+  const classes = cx(
+    'ui-text',
+    `ui-text--size-${size}`,
+    `ui-text--weight-${weight}`,
+    `ui-text--color-${resolvedColor}`,
+    align && `ui-text--align-${align}`,
+    truncate && 'ui-text--truncate',
+    mono && 'ui-text--mono',
+    className
+  );
+
+  return React.createElement(
+    Component,
+    {
+      ref,
+      className: classes,
+      ...rest,
+    },
+    children
+  );
+});
+
+Text.displayName = 'Text';

package/src/Text/Text.types.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+
+export type TextElement = 'p' | 'span' | 'div' | 'label' | 'strong' | 'em' | 'small' | 'code';
+export type TextSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+export type TextWeight = 'normal' | 'medium' | 'semibold' | 'bold';
+export type TextColor = 'default' | 'muted' | 'subtle' | 'primary' | 'success' | 'warning' | 'danger' | 'inherit';
+export type TextAlign = 'left' | 'center' | 'right' | 'justify';
+
+export interface TextProps extends React.HTMLAttributes<HTMLElement> {
+  as?: TextElement;
+  size?: TextSize;
+  weight?: TextWeight;
+  color?: TextColor;
+  muted?: boolean;
+  align?: TextAlign;
+  truncate?: boolean;
+  mono?: boolean;
+  children?: React.ReactNode;
+}

package/src/Text/index.ts

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

package/src/index.ts

@@ -0,0 +1,34 @@
+/**
+ * Atelier UI — Modern, minimalist, accessible React + TypeScript UI framework
+ */
+
+// Foundation
+export * from './Text';
+export * from './Heading';
+export * from './Icon';
+export * from './Divider';
+
+// Actions
+export * from './Button';
+export * from './Link';
+
+// Forms
+export * from './Input';
+export * from './Checkbox';
+export * from './Select';
+
+// Containers
+export * from './Card';
+
+// Layout
+export * from './layout/Stack';
+export * from './layout/Flex';
+export * from './layout/Grid';
+export * from './layout/Container';
+
+// Theme
+export * from './theme';
+
+// Utils
+export { cx, getSpaceValue } from './utils';
+export type { SpaceToken, ClassValue } from './utils';

package/src/layout/Container/Container.css

@@ -0,0 +1,16 @@
+.ui-container {
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.ui-container--centered {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+/* Container max-widths */
+.ui-container--size-sm   { max-width: 640px; }
+.ui-container--size-md   { max-width: 768px; }
+.ui-container--size-lg   { max-width: 1024px; }
+.ui-container--size-xl   { max-width: 1280px; }
+.ui-container--size-full { max-width: 100%; }

package/src/layout/Container/Container.tsx

@@ -0,0 +1,51 @@
+import React, { forwardRef } from 'react';
+import type { ContainerProps } from './Container.types';
+import { cx, getSpaceValue } from '../../utils';
+import './Container.css';
+
+export const Container = forwardRef<HTMLDivElement, ContainerProps>(function Container(
+  {
+    as: Component = 'div',
+    size = 'lg',
+    centered = true,
+    padding = 'md',
+    className,
+    style,
+    children,
+    ...rest
+  },
+  ref
+) {
+  const classes = cx(
+    'ui-container',
+    `ui-container--size-${size}`,
+    centered && 'ui-container--centered',
+    className
+  );
+
+  let paddingValue: string | undefined;
+  if (typeof padding === 'boolean') {
+    paddingValue = padding ? 'var(--ui-space-md)' : '0';
+  } else if (padding) {
+    paddingValue = getSpaceValue(padding);
+  }
+
+  const combinedStyle: React.CSSProperties = {
+    paddingLeft: paddingValue,
+    paddingRight: paddingValue,
+    ...style,
+  };
+
+  return React.createElement(
+    Component,
+    {
+      ref,
+      className: classes,
+      style: combinedStyle,
+      ...rest,
+    },
+    children
+  );
+});
+
+Container.displayName = 'Container';

package/src/layout/Container/Container.types.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { SpaceToken } from '../../utils';
+
+export type ContainerSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
+
+export interface ContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+  as?: React.ElementType;
+  size?: ContainerSize;
+  centered?: boolean;
+  padding?: SpaceToken | boolean;
+  children?: React.ReactNode;
+}

package/src/layout/Container/index.ts

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

package/src/layout/Flex/Flex.css

@@ -0,0 +1,34 @@
+.ui-flex {
+  display: flex;
+  box-sizing: border-box;
+}
+
+.ui-flex--inline {
+  display: inline-flex;
+}
+
+/* Directions */
+.ui-flex--direction-row         { flex-direction: row; }
+.ui-flex--direction-row-reverse { flex-direction: row-reverse; }
+.ui-flex--direction-col         { flex-direction: column; }
+.ui-flex--direction-col-reverse { flex-direction: column-reverse; }
+
+/* Align */
+.ui-flex--align-start    { align-items: flex-start; }
+.ui-flex--align-center   { align-items: center; }
+.ui-flex--align-end      { align-items: flex-end; }
+.ui-flex--align-stretch  { align-items: stretch; }
+.ui-flex--align-baseline { align-items: baseline; }
+
+/* Justify */
+.ui-flex--justify-start   { justify-content: flex-start; }
+.ui-flex--justify-center  { justify-content: center; }
+.ui-flex--justify-end     { justify-content: flex-end; }
+.ui-flex--justify-between { justify-content: space-between; }
+.ui-flex--justify-around  { justify-content: space-around; }
+.ui-flex--justify-evenly  { justify-content: space-evenly; }
+
+/* Wrap */
+.ui-flex--wrap         { flex-wrap: wrap; }
+.ui-flex--wrap-nowrap  { flex-wrap: nowrap; }
+.ui-flex--wrap-reverse { flex-wrap: wrap-reverse; }

package/src/layout/Flex/Flex.tsx

@@ -0,0 +1,56 @@
+import React, { forwardRef } from 'react';
+import type { FlexProps } from './Flex.types';
+import { cx, getSpaceValue } from '../../utils';
+import './Flex.css';
+
+export const Flex = forwardRef<HTMLElement, FlexProps>(function Flex(
+  {
+    as: Component = 'div',
+    direction = 'row',
+    align,
+    justify,
+    gap,
+    wrap,
+    inline = false,
+    className,
+    style,
+    children,
+    ...rest
+  },
+  ref
+) {
+  const resolvedGap = getSpaceValue(gap);
+
+  const wrapClass =
+    typeof wrap === 'boolean'
+      ? wrap ? 'ui-flex--wrap' : 'ui-flex--wrap-nowrap'
+      : wrap ? `ui-flex--wrap-${wrap}` : undefined;
+
+  const classes = cx(
+    'ui-flex',
+    inline && 'ui-flex--inline',
+    direction && `ui-flex--direction-${direction}`,
+    align && `ui-flex--align-${align}`,
+    justify && `ui-flex--justify-${justify}`,
+    wrapClass,
+    className
+  );
+
+  const combinedStyle: React.CSSProperties = {
+    gap: resolvedGap,
+    ...style,
+  };
+
+  return React.createElement(
+    Component,
+    {
+      ref,
+      className: classes,
+      style: combinedStyle,
+      ...rest,
+    },
+    children
+  );
+});
+
+Flex.displayName = 'Flex';

package/src/layout/Flex/Flex.types.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import type { SpaceToken } from '../../utils';
+
+export type FlexDirection = 'row' | 'row-reverse' | 'col' | 'col-reverse';
+export type FlexAlign = 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+export type FlexJustify = 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
+export type FlexWrap = boolean | 'wrap' | 'nowrap' | 'wrap-reverse';
+
+export interface FlexProps extends React.HTMLAttributes<HTMLElement> {
+  as?: React.ElementType;
+  direction?: FlexDirection;
+  align?: FlexAlign;
+  justify?: FlexJustify;
+  gap?: SpaceToken;
+  wrap?: FlexWrap;
+  inline?: boolean;
+  children?: React.ReactNode;
+}

package/src/layout/Flex/index.ts

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