@lo-ink/ui 0.1.0

package/src/EmptyState.tsx

@@ -0,0 +1,36 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import { classes } from "./utils.js";
+
+export interface EmptyStateProps extends Omit<
+  HTMLAttributes<HTMLDivElement>,
+  "title"
+> {
+  title: ReactNode;
+  description?: ReactNode;
+  icon?: ReactNode;
+  action?: ReactNode;
+}
+
+export function EmptyState({
+  title,
+  description,
+  icon,
+  action,
+  className,
+  ...props
+}: EmptyStateProps) {
+  return (
+    <div {...props} className={classes("lo-ui-empty-state", className)}>
+      {icon && (
+        <div className="lo-ui-empty-state__icon" aria-hidden="true">
+          {icon}
+        </div>
+      )}
+      <h2 className="lo-ui-empty-state__title">{title}</h2>
+      {description && (
+        <p className="lo-ui-empty-state__description">{description}</p>
+      )}
+      {action && <div className="lo-ui-empty-state__action">{action}</div>}
+    </div>
+  );
+}

package/src/Layout.tsx

@@ -0,0 +1,32 @@
+import type { CSSProperties, HTMLAttributes } from "react";
+import { classes } from "./utils.js";
+
+type Gap = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10;
+type LayoutProps = HTMLAttributes<HTMLDivElement> & { gap?: Gap };
+
+function layoutStyle(gap: Gap, style?: CSSProperties): CSSProperties {
+  return {
+    "--lo-layout-gap": `var(--lo-space-${gap})`,
+    ...style,
+  } as CSSProperties;
+}
+
+export function Stack({ gap = 4, className, style, ...props }: LayoutProps) {
+  return (
+    <div
+      {...props}
+      className={classes("lo-ui-stack", className)}
+      style={layoutStyle(gap, style)}
+    />
+  );
+}
+
+export function Inline({ gap = 2, className, style, ...props }: LayoutProps) {
+  return (
+    <div
+      {...props}
+      className={classes("lo-ui-inline", className)}
+      style={layoutStyle(gap, style)}
+    />
+  );
+}

package/src/List.tsx

@@ -0,0 +1,115 @@
+import { forwardRef, useId, type HTMLAttributes, type ReactNode } from "react";
+import { classes } from "./utils.js";
+
+export interface ListProps extends HTMLAttributes<HTMLUListElement> {
+  label?: ReactNode;
+}
+
+export function List({
+  label,
+  children,
+  className,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  ...props
+}: ListProps) {
+  const generatedId = useId();
+  const labelId = label ? `${generatedId}-label` : undefined;
+  const effectiveLabelledBy =
+    ariaLabelledBy ?? (ariaLabel === undefined ? labelId : undefined);
+  return (
+    <section className="lo-ui-list-section">
+      {label && (
+        <h2 className="lo-ui-list-label" id={labelId}>
+          {label}
+        </h2>
+      )}
+      <ul
+        {...props}
+        aria-label={ariaLabel}
+        aria-labelledby={effectiveLabelledBy}
+        className={classes("lo-ui-list", className)}
+      >
+        {children}
+      </ul>
+    </section>
+  );
+}
+
+export interface CellProps extends Omit<
+  HTMLAttributes<HTMLLIElement>,
+  "title"
+> {
+  title: ReactNode;
+  subtitle?: ReactNode;
+  leading?: ReactNode;
+  /** Noninteractive metadata included in the row action and its accessible name. */
+  trailing?: ReactNode;
+  /** An independently operable control rendered beside the row action. */
+  trailingAction?: ReactNode;
+  onPress?: () => void;
+  disabled?: boolean;
+}
+
+export const Cell = forwardRef<HTMLLIElement, CellProps>(function Cell(
+  {
+    title,
+    subtitle,
+    leading,
+    trailing,
+    trailingAction,
+    onPress,
+    disabled = false,
+    className,
+    ...props
+  },
+  ref,
+) {
+  const content = (
+    <>
+      {leading && <span className="lo-ui-cell__leading">{leading}</span>}
+      <span className="lo-ui-cell__body">
+        <span className="lo-ui-cell__title">{title}</span>
+        {subtitle && <span className="lo-ui-cell__subtitle">{subtitle}</span>}
+      </span>
+      {trailing && <span className="lo-ui-cell__trailing">{trailing}</span>}
+      {onPress && !trailing && !trailingAction && (
+        <svg
+          className="lo-ui-cell__chevron"
+          viewBox="0 0 20 20"
+          aria-hidden="true"
+        >
+          <path d="m7.5 4 6 6-6 6" />
+        </svg>
+      )}
+    </>
+  );
+
+  return (
+    <li {...props} ref={ref} className={classes("lo-ui-cell", className)}>
+      {onPress || trailingAction ? (
+        <div className="lo-ui-cell__actions">
+          {onPress ? (
+            <button
+              className="lo-ui-cell__control"
+              type="button"
+              onClick={onPress}
+              disabled={disabled}
+            >
+              {content}
+            </button>
+          ) : (
+            <div className="lo-ui-cell__content">{content}</div>
+          )}
+          {trailingAction && (
+            <span className="lo-ui-cell__trailing-action">
+              {trailingAction}
+            </span>
+          )}
+        </div>
+      ) : (
+        <div className="lo-ui-cell__content">{content}</div>
+      )}
+    </li>
+  );
+});

package/src/SelectionControl.tsx

@@ -0,0 +1,128 @@
+import {
+  forwardRef,
+  useId,
+  type InputHTMLAttributes,
+  type ReactNode,
+} from "react";
+import { classes } from "./utils.js";
+
+export type SelectionControlProps = Omit<
+  InputHTMLAttributes<HTMLInputElement>,
+  "type"
+> & {
+  label: ReactNode;
+  description?: ReactNode;
+  labelHidden?: boolean;
+};
+
+function SelectionControl({
+  control,
+  label,
+  description,
+  labelHidden = false,
+  id,
+}: {
+  control: ReactNode;
+  label: ReactNode;
+  description?: ReactNode;
+  labelHidden?: boolean;
+  id: string;
+}) {
+  return (
+    <label
+      className={classes(
+        "lo-ui-selection",
+        labelHidden && "lo-ui-selection--control-only",
+      )}
+      htmlFor={id}
+    >
+      <span className="lo-ui-selection__copy">
+        <span className="lo-ui-selection__label" id={`${id}-label`}>
+          {label}
+        </span>
+        {description && (
+          <span
+            className="lo-ui-selection__description"
+            id={`${id}-description`}
+          >
+            {description}
+          </span>
+        )}
+      </span>
+      {control}
+    </label>
+  );
+}
+
+export const Switch = forwardRef<HTMLInputElement, SelectionControlProps>(
+  function Switch(
+    { label, description, labelHidden, id: providedId, className, ...props },
+    ref,
+  ) {
+    const generatedId = useId();
+    const id = providedId ?? generatedId;
+    return (
+      <SelectionControl
+        id={id}
+        label={label}
+        description={description}
+        labelHidden={labelHidden}
+        control={
+          <input
+            {...props}
+            ref={ref}
+            id={id}
+            type="checkbox"
+            role="switch"
+            aria-labelledby={
+              props["aria-labelledby"] ??
+              (props["aria-label"] ? undefined : `${id}-label`)
+            }
+            aria-describedby={
+              [props["aria-describedby"], description && `${id}-description`]
+                .filter(Boolean)
+                .join(" ") || undefined
+            }
+            className={classes("lo-ui-switch", className)}
+          />
+        }
+      />
+    );
+  },
+);
+
+export const Checkbox = forwardRef<HTMLInputElement, SelectionControlProps>(
+  function Checkbox(
+    { label, description, labelHidden, id: providedId, className, ...props },
+    ref,
+  ) {
+    const generatedId = useId();
+    const id = providedId ?? generatedId;
+    return (
+      <SelectionControl
+        id={id}
+        label={label}
+        description={description}
+        labelHidden={labelHidden}
+        control={
+          <input
+            {...props}
+            ref={ref}
+            id={id}
+            type="checkbox"
+            aria-labelledby={
+              props["aria-labelledby"] ??
+              (props["aria-label"] ? undefined : `${id}-label`)
+            }
+            aria-describedby={
+              [props["aria-describedby"], description && `${id}-description`]
+                .filter(Boolean)
+                .join(" ") || undefined
+            }
+            className={classes("lo-ui-checkbox", className)}
+          />
+        }
+      />
+    );
+  },
+);

package/src/TextField.tsx

@@ -0,0 +1,67 @@
+import {
+  forwardRef,
+  useId,
+  type InputHTMLAttributes,
+  type ReactNode,
+} from "react";
+import { classes } from "./utils.js";
+
+export interface TextFieldProps extends Omit<
+  InputHTMLAttributes<HTMLInputElement>,
+  "size"
+> {
+  label: ReactNode;
+  description?: ReactNode;
+  error?: ReactNode;
+  inputClassName?: string;
+}
+
+export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
+  function TextField(
+    {
+      label,
+      description,
+      error,
+      id: providedId,
+      className,
+      inputClassName,
+      "aria-describedby": ariaDescribedBy,
+      ...props
+    },
+    ref,
+  ) {
+    const generatedId = useId();
+    const id = providedId ?? generatedId;
+    const descriptionId = description ? `${id}-description` : undefined;
+    const errorId = error ? `${id}-error` : undefined;
+    const describedBy = [ariaDescribedBy, descriptionId, errorId]
+      .filter(Boolean)
+      .join(" ");
+
+    return (
+      <div className={classes("lo-ui-field", className)}>
+        <label className="lo-ui-field__label" htmlFor={id}>
+          {label}
+        </label>
+        <input
+          {...props}
+          ref={ref}
+          id={id}
+          aria-invalid={error ? true : props["aria-invalid"]}
+          aria-describedby={describedBy || undefined}
+          className={classes("lo-ui-field__input", inputClassName)}
+        />
+        {description && (
+          <div className="lo-ui-field__description" id={descriptionId}>
+            {description}
+          </div>
+        )}
+        {error && (
+          <div className="lo-ui-field__error" id={errorId}>
+            {error}
+          </div>
+        )}
+      </div>
+    );
+  },
+);

package/src/Typography.tsx

@@ -0,0 +1,33 @@
+import type { HTMLAttributes } from "react";
+import { classes } from "./utils.js";
+
+export interface TextProps extends HTMLAttributes<HTMLParagraphElement> {
+  tone?: "primary" | "secondary" | "danger";
+  size?: "caption" | "label" | "body";
+}
+
+export function Text({
+  tone = "primary",
+  size = "body",
+  className,
+  ...props
+}: TextProps) {
+  return (
+    <p
+      {...props}
+      className={classes(
+        "lo-ui-text",
+        `lo-ui-text--${tone}`,
+        `lo-ui-text--${size}`,
+        className,
+      )}
+    />
+  );
+}
+
+export function Heading({
+  className,
+  ...props
+}: HTMLAttributes<HTMLHeadingElement>) {
+  return <h1 {...props} className={classes("lo-ui-heading", className)} />;
+}

package/src/index.ts

@@ -0,0 +1,12 @@
+export { AppIcon, type AppIconProps } from "./AppIcon.js";
+export { Button, type ButtonProps } from "./Button.js";
+export { EmptyState, type EmptyStateProps } from "./EmptyState.js";
+export { Inline, Stack } from "./Layout.js";
+export { Cell, List, type CellProps, type ListProps } from "./List.js";
+export {
+  Checkbox,
+  Switch,
+  type SelectionControlProps,
+} from "./SelectionControl.js";
+export { TextField, type TextFieldProps } from "./TextField.js";
+export { Heading, Text, type TextProps } from "./Typography.js";