@lo-ink/ui 0.1.1 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lo-ink/ui",
-  "version": "0.1.1",
+  "version": "0.3.0",
   "description": "Accessible React components for LO miniapps",
   "type": "module",
   "license": "MIT",
@@ -33,7 +33,7 @@
     "build": "tsc -p tsconfig.json && node scripts/copy-assets.mjs"
   },
   "dependencies": {
-    "@lo-ink/design-tokens": "0.1.1"
+    "@lo-ink/design-tokens": "0.3.0"
   },
   "peerDependencies": {
     "react": ">=18 <20",

package/src/AppIcon.tsx

@@ -21,6 +21,7 @@ export function AppIcon({
   return (
     <span
       {...props}
+      role={props.role ?? (!src && props["aria-label"] ? "img" : undefined)}
       className={classes(
         "lo-ui-app-icon",
         `lo-ui-app-icon--${size}`,

package/src/Dialog.tsx

@@ -0,0 +1,16 @@
+import { forwardRef, type DialogHTMLAttributes } from "react";
+import { classes } from "./utils.js";
+
+/** Native modal semantics; the caller controls showModal(), close() and cancellation. */
+export const Dialog = forwardRef<
+  HTMLDialogElement,
+  DialogHTMLAttributes<HTMLDialogElement>
+>(function Dialog({ className, ...props }, ref) {
+  return (
+    <dialog
+      {...props}
+      ref={ref}
+      className={classes("lo-ui-dialog", className)}
+    />
+  );
+});

package/src/EmptyState.tsx

@@ -6,6 +6,7 @@ export interface EmptyStateProps extends Omit<
   "title"
 > {
   title: ReactNode;
+  headingLevel?: 2 | 3 | 4 | 5 | 6;
   description?: ReactNode;
   icon?: ReactNode;
   action?: ReactNode;
@@ -13,12 +14,14 @@ export interface EmptyStateProps extends Omit<
 
 export function EmptyState({
   title,
+  headingLevel = 2,
   description,
   icon,
   action,
   className,
   ...props
 }: EmptyStateProps) {
+  const Tag = `h${headingLevel}` as "h2" | "h3" | "h4" | "h5" | "h6";
   return (
     <div {...props} className={classes("lo-ui-empty-state", className)}>
       {icon && (
@@ -26,7 +29,7 @@ export function EmptyState({
           {icon}
         </div>
       )}
-      <h2 className="lo-ui-empty-state__title">{title}</h2>
+      <Tag className="lo-ui-empty-state__title">{title}</Tag>
       {description && (
         <p className="lo-ui-empty-state__description">{description}</p>
       )}

package/src/List.tsx

@@ -3,16 +3,19 @@ import { classes } from "./utils.js";
 
 export interface ListProps extends HTMLAttributes<HTMLUListElement> {
   label?: ReactNode;
+  headingLevel?: 2 | 3 | 4 | 5 | 6;
 }
 
 export function List({
   label,
+  headingLevel = 2,
   children,
   className,
   "aria-label": ariaLabel,
   "aria-labelledby": ariaLabelledBy,
   ...props
 }: ListProps) {
+  const Tag = `h${headingLevel}` as "h2" | "h3" | "h4" | "h5" | "h6";
   const generatedId = useId();
   const labelId = label ? `${generatedId}-label` : undefined;
   const effectiveLabelledBy =
@@ -20,9 +23,9 @@ export function List({
   return (
     <section className="lo-ui-list-section">
       {label && (
-        <h2 className="lo-ui-list-label" id={labelId}>
+        <Tag className="lo-ui-list-label" id={labelId}>
           {label}
-        </h2>
+        </Tag>
       )}
       <ul
         {...props}

package/src/Progress.tsx

@@ -0,0 +1,11 @@
+import type { ProgressHTMLAttributes } from "react";
+import { classes } from "./utils.js";
+
+export function Progress({
+  className,
+  ...props
+}: ProgressHTMLAttributes<HTMLProgressElement>) {
+  return (
+    <progress {...props} className={classes("lo-ui-progress", className)} />
+  );
+}

package/src/Surface.tsx

@@ -0,0 +1,26 @@
+import type { CSSProperties, HTMLAttributes } from "react";
+import type { SpacingToken } from "@lo-ink/design-tokens";
+import { classes } from "./utils.js";
+
+export interface SurfaceProps extends HTMLAttributes<HTMLElement> {
+  padding?: SpacingToken;
+}
+export function Surface({
+  padding = 4,
+  className,
+  style,
+  ...props
+}: SurfaceProps) {
+  return (
+    <section
+      {...props}
+      className={classes("lo-ui-surface", className)}
+      style={
+        {
+          "--lo-surface-padding": `var(--lo-space-${padding})`,
+          ...style,
+        } as CSSProperties
+      }
+    />
+  );
+}

package/src/TextArea.tsx

@@ -0,0 +1,60 @@
+import {
+  forwardRef,
+  useId,
+  type ReactNode,
+  type TextareaHTMLAttributes,
+} from "react";
+import { classes } from "./utils.js";
+
+export interface TextAreaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+  label: ReactNode;
+  description?: ReactNode;
+  error?: ReactNode;
+}
+export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
+  function TextArea(
+    {
+      label,
+      description,
+      error,
+      id: providedId,
+      className,
+      "aria-describedby": describedBy,
+      ...props
+    },
+    ref,
+  ) {
+    const generatedId = useId();
+    const id = providedId ?? generatedId;
+    const descriptionId = description ? `${id}-description` : undefined;
+    const errorId = error ? `${id}-error` : undefined;
+    return (
+      <div className={classes("lo-ui-field", className)}>
+        <label className="lo-ui-field__label" htmlFor={id}>
+          {label}
+        </label>
+        <textarea
+          {...props}
+          ref={ref}
+          id={id}
+          aria-invalid={error ? true : props["aria-invalid"]}
+          aria-describedby={
+            [describedBy, descriptionId, errorId].filter(Boolean).join(" ") ||
+            undefined
+          }
+          className="lo-ui-field__input lo-ui-textarea"
+        />
+        {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/TextField.tsx

@@ -14,6 +14,7 @@ export interface TextFieldProps extends Omit<
   description?: ReactNode;
   error?: ReactNode;
   inputClassName?: string;
+  labelHidden?: boolean;
 }
 
 export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
@@ -25,6 +26,7 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
       id: providedId,
       className,
       inputClassName,
+      labelHidden = false,
       "aria-describedby": ariaDescribedBy,
       ...props
     },
@@ -39,7 +41,13 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
       .join(" ");
 
     return (
-      <div className={classes("lo-ui-field", className)}>
+      <div
+        className={classes(
+          "lo-ui-field",
+          labelHidden && "lo-ui-field--label-hidden",
+          className,
+        )}
+      >
         <label className="lo-ui-field__label" htmlFor={id}>
           {label}
         </label>

package/src/Typography.tsx

@@ -1,33 +1,51 @@
-import type { HTMLAttributes } from "react";
+import { forwardRef, type HTMLAttributes } from "react";
 import { classes } from "./utils.js";
 
-export interface TextProps extends HTMLAttributes<HTMLParagraphElement> {
-  tone?: "primary" | "secondary" | "danger";
-  size?: "caption" | "label" | "body";
+export interface TextProps extends HTMLAttributes<HTMLElement> {
+  as?: "p" | "span" | "strong" | "code" | "pre";
+  tone?: "primary" | "secondary" | "danger" | "success";
+  weight?: "regular" | "medium" | "bold";
+  family?: "ui" | "display" | "mono";
+  size?: "caption" | "label" | "body" | "title" | "display";
 }
 
 export function Text({
+  as: Tag = "p",
   tone = "primary",
+  weight,
+  family,
   size = "body",
   className,
   ...props
 }: TextProps) {
   return (
-    <p
+    <Tag
       {...props}
       className={classes(
         "lo-ui-text",
         `lo-ui-text--${tone}`,
         `lo-ui-text--${size}`,
+        weight && `lo-ui-text--weight-${weight}`,
+        family && `lo-ui-text--family-${family}`,
         className,
       )}
     />
   );
 }
 
-export function Heading({
-  className,
-  ...props
-}: HTMLAttributes<HTMLHeadingElement>) {
-  return <h1 {...props} className={classes("lo-ui-heading", className)} />;
+export interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {
+  level?: 1 | 2 | 3 | 4 | 5 | 6;
 }
+
+export const Heading = forwardRef<HTMLHeadingElement, HeadingProps>(
+  function Heading({ level = 1, className, ...props }, ref) {
+    const Tag = `h${level}` as "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+    return (
+      <Tag
+        {...props}
+        ref={ref}
+        className={classes("lo-ui-heading", className)}
+      />
+    );
+  },
+);

package/src/index.ts

@@ -9,4 +9,13 @@ export {
   type SelectionControlProps,
 } from "./SelectionControl.js";
 export { TextField, type TextFieldProps } from "./TextField.js";
-export { Heading, Text, type TextProps } from "./Typography.js";
+export {
+  Heading,
+  Text,
+  type HeadingProps,
+  type TextProps,
+} from "./Typography.js";
+export { TextArea, type TextAreaProps } from "./TextArea.js";
+export { Surface, type SurfaceProps } from "./Surface.js";
+export { Dialog } from "./Dialog.js";
+export { Progress } from "./Progress.js";

package/src/styles.css

@@ -13,12 +13,16 @@
   box-sizing: border-box;
 }
 
-:where(.lo-ui-root button, .lo-ui-root input) {
+:where(.lo-ui-root button, .lo-ui-root input, .lo-ui-root textarea) {
   font: inherit;
   -webkit-tap-highlight-color: transparent;
 }
 
-:where(.lo-ui-root button, .lo-ui-root input):focus-visible {
+:where(
+  .lo-ui-root button,
+  .lo-ui-root input,
+  .lo-ui-root textarea
+):focus-visible {
   outline: 3px solid var(--lo-color-focus);
   outline-offset: 2px;
 }
@@ -27,7 +31,12 @@
   min-height: var(--lo-size-control);
   padding: 0 var(--lo-space-5);
   border: 1px solid transparent;
-  border-radius: var(--lo-radius-md);
+  border-radius: var(--lo-radius-full);
+  min-width: 0;
+  max-width: 100%;
+  white-space: normal;
+  overflow-wrap: anywhere;
+  text-align: center;
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -62,7 +71,7 @@
 
 .lo-ui-button--primary {
   color: var(--lo-color-accent-contrast);
-  background: var(--lo-color-accent);
+  background: var(--lo-color-accent-fill);
 }
 
 .lo-ui-button--primary:hover:not(:disabled) {
@@ -70,12 +79,19 @@
 }
 
 .lo-ui-button--secondary {
-  color: var(--lo-color-text);
-  background: var(--lo-color-surface);
-  border-color: var(--lo-color-border);
+  color: var(--lo-color-accent-text);
+  background: var(--lo-color-accent-soft);
+  border-color: transparent;
+}
+
+.lo-ui-button--secondary:hover:not(:disabled) {
+  background: color-mix(
+    in srgb,
+    var(--lo-color-accent) 20%,
+    var(--lo-color-surface)
+  );
 }
 
-.lo-ui-button--secondary:hover:not(:disabled),
 .lo-ui-button--quiet:hover:not(:disabled) {
   background: var(--lo-color-accent-soft);
 }
@@ -91,7 +107,7 @@
 }
 
 .lo-ui-button--quiet {
-  color: var(--lo-color-accent);
+  color: var(--lo-color-accent-text);
   background: transparent;
 }
 
@@ -135,7 +151,7 @@
   padding: 10px var(--lo-space-3);
   color: var(--lo-color-text);
   background: var(--lo-color-surface);
-  border: 1px solid var(--lo-color-border);
+  border: 1px solid var(--lo-color-control-border);
   border-radius: var(--lo-radius-md);
   font-size: 16px;
   transition:
@@ -209,7 +225,8 @@
   justify-content: center;
 }
 
-.lo-ui-selection--control-only .lo-ui-selection__copy {
+.lo-ui-selection--control-only .lo-ui-selection__copy,
+.lo-ui-field--label-hidden .lo-ui-field__label {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -228,7 +245,7 @@
   padding: 2px;
   border: 0;
   border-radius: var(--lo-radius-full);
-  background: var(--lo-color-border);
+  background: var(--lo-color-control-border);
   cursor: pointer;
   transition: background-color var(--lo-motion-fast) var(--lo-ease-out);
 }
@@ -245,7 +262,7 @@
 }
 
 .lo-ui-switch:checked {
-  background: var(--lo-color-accent);
+  background: var(--lo-color-accent-fill);
 }
 
 .lo-ui-switch:checked::after {
@@ -265,7 +282,7 @@
   margin: 0;
   display: grid;
   place-items: center;
-  border: 1.5px solid var(--lo-color-border);
+  border: 1.5px solid var(--lo-color-control-border);
   border-radius: 7px;
   background: var(--lo-color-surface);
   cursor: pointer;
@@ -282,8 +299,13 @@
 }
 
 .lo-ui-checkbox:checked {
-  background: var(--lo-color-accent);
-  border-color: var(--lo-color-accent);
+  background: var(--lo-color-accent-fill);
+  border-color: var(--lo-color-accent-fill);
+}
+
+.lo-ui-checkbox:disabled {
+  cursor: default;
+  opacity: 0.5;
 }
 
 .lo-ui-checkbox:checked::after {
@@ -384,6 +406,7 @@
 
 .lo-ui-cell__title {
   font-size: var(--lo-font-size-body);
+  font-weight: var(--lo-font-weight-medium);
 }
 
 .lo-ui-cell__subtitle {
@@ -424,19 +447,24 @@
   place-items: center;
   border-radius: 11px;
   color: var(--lo-color-accent-contrast);
-  background: var(--lo-color-accent);
+  background: var(--lo-color-accent-fill);
+  font-size: 18px;
+  font-weight: var(--lo-font-weight-medium);
+  line-height: 1;
 }
 
 .lo-ui-app-icon--small {
   width: 32px;
   height: 32px;
   border-radius: 8px;
+  font-size: 14px;
 }
 
 .lo-ui-app-icon--large {
   width: 64px;
   height: 64px;
   border-radius: 16px;
+  font-size: 26px;
 }
 
 .lo-ui-app-icon > img {
@@ -452,28 +480,25 @@
 }
 
 .lo-ui-empty-state {
-  min-height: 240px;
-  padding: var(--lo-space-8) var(--lo-space-6);
+  padding: 30px 15px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: var(--lo-space-2);
+  gap: 10px;
   text-align: center;
-  border: 1px dashed var(--lo-color-border);
-  border-radius: var(--lo-radius-lg);
+  border: 1px solid color-mix(in srgb, var(--lo-color-accent) 4%, transparent);
+  border-radius: calc(var(--lo-radius-lg) + 2px);
   background: var(--lo-color-surface);
 }
 
 .lo-ui-empty-state__icon {
   width: 52px;
   height: 52px;
-  margin-bottom: var(--lo-space-2);
+  margin-bottom: 5px;
   display: grid;
   place-items: center;
-  border-radius: var(--lo-radius-md);
-  color: var(--lo-color-accent);
-  background: var(--lo-color-accent-soft);
+  color: var(--lo-color-accent-text);
 }
 
 .lo-ui-empty-state__icon > svg {
@@ -489,18 +514,20 @@
 }
 
 .lo-ui-empty-state__title {
-  font-size: var(--lo-font-size-body);
+  font-family: var(--lo-font-family);
+  color: var(--lo-color-text);
+  font-size: 26px;
   line-height: var(--lo-line-height-tight);
 }
 
 .lo-ui-empty-state__description {
   max-width: 36ch;
   color: var(--lo-color-text-secondary);
-  font-size: var(--lo-font-size-label);
+  font-size: var(--lo-font-size-body);
 }
 
 .lo-ui-empty-state__action {
-  margin-top: var(--lo-space-3);
+  margin-top: 5px;
 }
 
 .lo-ui-stack,
@@ -519,11 +546,15 @@
 }
 
 .lo-ui-heading {
+  font-family: var(--lo-font-family);
+  color: var(--lo-color-text);
+  font-weight: var(--lo-font-weight-bold);
   font-size: var(--lo-font-size-title);
   line-height: var(--lo-line-height-tight);
 }
 
 .lo-ui-text {
+  color: var(--lo-color-text);
   line-height: var(--lo-line-height-body);
 }
 
@@ -558,3 +589,129 @@
     animation: none;
   }
 }
+
+.lo-ui-surface {
+  min-width: 0;
+  padding: var(--lo-surface-padding);
+  border: 1px solid var(--lo-color-border);
+  border-radius: var(--lo-radius-lg);
+  background: var(--lo-color-surface);
+  color: var(--lo-color-text);
+}
+.lo-ui-dialog {
+  box-sizing: border-box;
+  width: min(560px, calc(100% - 32px));
+  max-height: calc(100dvh - 32px);
+  overflow-y: auto;
+  padding: var(--lo-space-5);
+  border: 1px solid var(--lo-color-border);
+  border-radius: var(--lo-radius-lg);
+  color: var(--lo-color-text);
+  background: var(--lo-color-surface);
+}
+.lo-ui-dialog::backdrop {
+  background: #12162466;
+}
+.lo-ui-textarea {
+  resize: vertical;
+  line-height: var(--lo-line-height-body);
+}
+.lo-ui-field__input[type="file"] {
+  padding: var(--lo-space-2);
+}
+.lo-ui-field__input::file-selector-button {
+  font: inherit;
+  color: var(--lo-color-accent-text);
+  background: var(--lo-color-accent-soft);
+  border: 0;
+  border-radius: var(--lo-radius-full);
+  padding: var(--lo-space-2) var(--lo-space-3);
+  margin-right: var(--lo-space-2);
+  cursor: pointer;
+}
+.lo-ui-progress {
+  display: block;
+  appearance: none;
+  border: 0;
+  width: 100%;
+  height: 10px;
+  border-radius: var(--lo-radius-full);
+  overflow: hidden;
+  background: var(--lo-color-border);
+  color: var(--lo-color-accent);
+}
+.lo-ui-progress::-webkit-progress-bar {
+  background: var(--lo-color-border);
+}
+.lo-ui-progress::-webkit-progress-value {
+  background: var(--lo-color-accent);
+  border-radius: var(--lo-radius-full);
+}
+.lo-ui-progress::-moz-progress-bar {
+  background: var(--lo-color-accent);
+  border-radius: var(--lo-radius-full);
+}
+
+:where(.lo-ui-root code, .lo-ui-root pre) {
+  font-family: var(--lo-font-family-mono);
+}
+
+.lo-ui-app-icon:has(> img) {
+  background: transparent;
+}
+.lo-ui-progress:indeterminate {
+  background-image: linear-gradient(
+    90deg,
+    var(--lo-color-border) 0% 30%,
+    var(--lo-color-accent) 30% 50%,
+    var(--lo-color-border) 50% 100%
+  );
+  background-size: 200% 100%;
+  animation: lo-ui-progress-pending 1.4s linear infinite;
+}
+.lo-ui-progress:indeterminate::-webkit-progress-bar {
+  background: transparent;
+}
+@keyframes lo-ui-progress-pending {
+  from {
+    background-position: 100% 0;
+  }
+  to {
+    background-position: 0% 0;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .lo-ui-progress:indeterminate {
+    animation: none;
+    background-position: 50% 0;
+  }
+}
+
+.lo-ui-text--title {
+  font-size: 26px;
+}
+.lo-ui-text--display {
+  font-size: 40px;
+  line-height: var(--lo-line-height-tight);
+}
+.lo-ui-text--success {
+  color: var(--lo-color-success);
+}
+.lo-ui-text--weight-regular {
+  font-weight: var(--lo-font-weight-regular);
+}
+.lo-ui-text--weight-medium {
+  font-weight: var(--lo-font-weight-medium);
+}
+.lo-ui-text--weight-bold {
+  font-weight: var(--lo-font-weight-bold);
+}
+.lo-ui-text--family-ui {
+  font-family: var(--lo-font-family);
+}
+.lo-ui-text--family-display {
+  font-family: var(--lo-font-family-display);
+}
+.lo-ui-text--family-mono {
+  font-family: var(--lo-font-family-mono);
+}