@lo-ink/ui 0.2.0 → 0.3.1

package/dist/AppIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AppIcon.d.ts","sourceRoot":"","sources":["../src/AppIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAG1E,MAAM,WAAW,YAAa,SAAQ,cAAc,CAAC,eAAe,CAAC;IACnE,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,UAAU,CAAC,EAAE,IAAI,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC,CAAC;CACvE;AAED,wBAAgB,OAAO,CAAC,EACtB,GAAG,EACH,GAAQ,EACR,IAAe,EACf,QAAQ,EACR,UAAU,EACV,SAAS,EACT,GAAG,KAAK,EACT,EAAE,YAAY,+BAad"}
+{"version":3,"file":"AppIcon.d.ts","sourceRoot":"","sources":["../src/AppIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAG1E,MAAM,WAAW,YAAa,SAAQ,cAAc,CAAC,eAAe,CAAC;IACnE,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,UAAU,CAAC,EAAE,IAAI,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC,CAAC;CACvE;AAED,wBAAgB,OAAO,CAAC,EACtB,GAAG,EACH,GAAQ,EACR,IAAe,EACf,QAAQ,EACR,UAAU,EACV,SAAS,EACT,GAAG,KAAK,EACT,EAAE,YAAY,+BAcd"}

package/dist/AppIcon.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { classes } from "./utils.js";
 export function AppIcon({ src, alt = "", size = "medium", children, imageProps, className, ...props }) {
-    return (_jsx("span", { ...props, className: classes("lo-ui-app-icon", `lo-ui-app-icon--${size}`, className), children: src ? _jsx("img", { ...imageProps, src: src, alt: alt }) : children }));
+    return (_jsx("span", { ...props, role: props.role ?? (!src && props["aria-label"] ? "img" : undefined), className: classes("lo-ui-app-icon", `lo-ui-app-icon--${size}`, className), children: src ? _jsx("img", { ...imageProps, src: src, alt: alt }) : children }));
 }

package/dist/Dialog.d.ts

@@ -0,0 +1,4 @@
+import { type DialogHTMLAttributes } from "react";
+/** Native modal semantics; the caller controls showModal(), close() and cancellation. */
+export declare const Dialog: import("react").ForwardRefExoticComponent<DialogHTMLAttributes<HTMLDialogElement> & import("react").RefAttributes<HTMLDialogElement>>;
+//# sourceMappingURL=Dialog.d.ts.map

package/dist/Dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../src/Dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAG9D,yFAAyF;AACzF,eAAO,MAAM,MAAM,uIAWjB,CAAC"}

package/dist/Dialog.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { classes } from "./utils.js";
+/** Native modal semantics; the caller controls showModal(), close() and cancellation. */
+export const Dialog = forwardRef(function Dialog({ className, ...props }, ref) {
+    return (_jsx("dialog", { ...props, ref: ref, className: classes("lo-ui-dialog", className) }));
+});

package/dist/Progress.d.ts

@@ -0,0 +1,3 @@
+import type { ProgressHTMLAttributes } from "react";
+export declare function Progress({ className, ...props }: ProgressHTMLAttributes<HTMLProgressElement>): import("react").JSX.Element;
+//# sourceMappingURL=Progress.d.ts.map

package/dist/Progress.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Progress.d.ts","sourceRoot":"","sources":["../src/Progress.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,OAAO,CAAC;AAGpD,wBAAgB,QAAQ,CAAC,EACvB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,sBAAsB,CAAC,mBAAmB,CAAC,+BAI7C"}

package/dist/Progress.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { classes } from "./utils.js";
+export function Progress({ className, ...props }) {
+    return (_jsx("progress", { ...props, className: classes("lo-ui-progress", className) }));
+}

package/dist/Surface.d.ts

@@ -0,0 +1,7 @@
+import type { HTMLAttributes } from "react";
+import type { SpacingToken } from "@lo-ink/design-tokens";
+export interface SurfaceProps extends HTMLAttributes<HTMLElement> {
+    padding?: SpacingToken;
+}
+export declare function Surface({ padding, className, style, ...props }: SurfaceProps): import("react").JSX.Element;
+//# sourceMappingURL=Surface.d.ts.map

package/dist/Surface.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Surface.d.ts","sourceRoot":"","sources":["../src/Surface.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAiB,cAAc,EAAE,MAAM,OAAO,CAAC;AAC3D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAG1D,MAAM,WAAW,YAAa,SAAQ,cAAc,CAAC,WAAW,CAAC;IAC/D,OAAO,CAAC,EAAE,YAAY,CAAC;CACxB;AACD,wBAAgB,OAAO,CAAC,EACtB,OAAW,EACX,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,YAAY,+BAad"}

package/dist/Surface.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { classes } from "./utils.js";
+export function Surface({ padding = 4, className, style, ...props }) {
+    return (_jsx("section", { ...props, className: classes("lo-ui-surface", className), style: {
+            "--lo-surface-padding": `var(--lo-space-${padding})`,
+            ...style,
+        } }));
+}

package/dist/TextArea.d.ts

@@ -0,0 +1,8 @@
+import { type ReactNode, type TextareaHTMLAttributes } from "react";
+export interface TextAreaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+    label: ReactNode;
+    description?: ReactNode;
+    error?: ReactNode;
+}
+export declare const TextArea: import("react").ForwardRefExoticComponent<TextAreaProps & import("react").RefAttributes<HTMLTextAreaElement>>;
+//# sourceMappingURL=TextArea.d.ts.map

package/dist/TextArea.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../src/TextArea.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,SAAS,EACd,KAAK,sBAAsB,EAC5B,MAAM,OAAO,CAAC;AAGf,MAAM,WAAW,aAAc,SAAQ,sBAAsB,CAAC,mBAAmB,CAAC;IAChF,KAAK,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AACD,eAAO,MAAM,QAAQ,+GA8CpB,CAAC"}

package/dist/TextArea.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useId, } from "react";
+import { classes } from "./utils.js";
+export const TextArea = forwardRef(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 (_jsxs("div", { className: classes("lo-ui-field", className), children: [_jsx("label", { className: "lo-ui-field__label", htmlFor: id, children: label }), _jsx("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 && (_jsx("div", { className: "lo-ui-field__description", id: descriptionId, children: description })), error && (_jsx("div", { className: "lo-ui-field__error", id: errorId, children: error }))] }));
+});

package/dist/TextField.d.ts

@@ -4,6 +4,7 @@ export interface TextFieldProps extends Omit<InputHTMLAttributes<HTMLInputElemen
     description?: ReactNode;
     error?: ReactNode;
     inputClassName?: string;
+    labelHidden?: boolean;
 }
 export declare const TextField: import("react").ForwardRefExoticComponent<TextFieldProps & import("react").RefAttributes<HTMLInputElement>>;
 //# sourceMappingURL=TextField.d.ts.map

package/dist/TextField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../src/TextField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,mBAAmB,EACxB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,MAAM,WAAW,cAAe,SAAQ,IAAI,CAC1C,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,MAAM,CACP;IACC,KAAK,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,eAAO,MAAM,SAAS,6GAgDrB,CAAC"}
+{"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../src/TextField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,mBAAmB,EACxB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,MAAM,WAAW,cAAe,SAAQ,IAAI,CAC1C,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,MAAM,CACP;IACC,KAAK,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,eAAO,MAAM,SAAS,6GAuDrB,CAAC"}

package/dist/TextField.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useId, } from "react";
 import { classes } from "./utils.js";
-export const TextField = forwardRef(function TextField({ label, description, error, id: providedId, className, inputClassName, "aria-describedby": ariaDescribedBy, ...props }, ref) {
+export const TextField = forwardRef(function TextField({ label, description, error, id: providedId, className, inputClassName, labelHidden = false, "aria-describedby": ariaDescribedBy, ...props }, ref) {
     const generatedId = useId();
     const id = providedId ?? generatedId;
     const descriptionId = description ? `${id}-description` : undefined;
@@ -9,5 +9,5 @@ export const TextField = forwardRef(function TextField({ label, description, err
     const describedBy = [ariaDescribedBy, descriptionId, errorId]
         .filter(Boolean)
         .join(" ");
-    return (_jsxs("div", { className: classes("lo-ui-field", className), children: [_jsx("label", { className: "lo-ui-field__label", htmlFor: id, children: label }), _jsx("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 && (_jsx("div", { className: "lo-ui-field__description", id: descriptionId, children: description })), error && (_jsx("div", { className: "lo-ui-field__error", id: errorId, children: error }))] }));
+    return (_jsxs("div", { className: classes("lo-ui-field", labelHidden && "lo-ui-field--label-hidden", className), children: [_jsx("label", { className: "lo-ui-field__label", htmlFor: id, children: label }), _jsx("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 && (_jsx("div", { className: "lo-ui-field__description", id: descriptionId, children: description })), error && (_jsx("div", { className: "lo-ui-field__error", id: errorId, children: error }))] }));
 });

package/dist/Typography.d.ts

@@ -1,11 +1,14 @@
-import type { HTMLAttributes } from "react";
-export interface TextProps extends HTMLAttributes<HTMLParagraphElement> {
-    tone?: "primary" | "secondary" | "danger";
-    size?: "caption" | "label" | "body";
+import { type HTMLAttributes } from "react";
+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 declare function Text({ tone, size, className, ...props }: TextProps): import("react").JSX.Element;
+export declare function Text({ as: Tag, tone, weight, family, size, className, ...props }: TextProps): import("react").JSX.Element;
 export interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {
     level?: 1 | 2 | 3 | 4 | 5 | 6;
 }
-export declare function Heading({ level, className, ...props }: HeadingProps): import("react").JSX.Element;
+export declare const Heading: import("react").ForwardRefExoticComponent<HeadingProps & import("react").RefAttributes<HTMLHeadingElement>>;
 //# sourceMappingURL=Typography.d.ts.map

package/dist/Typography.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Typography.d.ts","sourceRoot":"","sources":["../src/Typography.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAG5C,MAAM,WAAW,SAAU,SAAQ,cAAc,CAAC,oBAAoB,CAAC;IACrE,IAAI,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,QAAQ,CAAC;IAC1C,IAAI,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;CACrC;AAED,wBAAgB,IAAI,CAAC,EACnB,IAAgB,EAChB,IAAa,EACb,SAAS,EACT,GAAG,KAAK,EACT,EAAE,SAAS,+BAYX;AAED,MAAM,WAAW,YAAa,SAAQ,cAAc,CAAC,kBAAkB,CAAC;IACtE,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;CAC/B;AAED,wBAAgB,OAAO,CAAC,EAAE,KAAS,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,+BAGvE"}
+{"version":3,"file":"Typography.d.ts","sourceRoot":"","sources":["../src/Typography.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAGxD,MAAM,WAAW,SAAU,SAAQ,cAAc,CAAC,WAAW,CAAC;IAC5D,EAAE,CAAC,EAAE,GAAG,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,KAAK,CAAC;IAC9C,IAAI,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,QAAQ,GAAG,SAAS,CAAC;IACtD,MAAM,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,MAAM,CAAC;IACvC,MAAM,CAAC,EAAE,IAAI,GAAG,SAAS,GAAG,MAAM,CAAC;IACnC,IAAI,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC;CAC3D;AAED,wBAAgB,IAAI,CAAC,EACnB,EAAE,EAAE,GAAS,EACb,IAAgB,EAChB,MAAM,EACN,MAAM,EACN,IAAa,EACb,SAAS,EACT,GAAG,KAAK,EACT,EAAE,SAAS,+BAcX;AAED,MAAM,WAAW,YAAa,SAAQ,cAAc,CAAC,kBAAkB,CAAC;IACtE,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;CAC/B;AAED,eAAO,MAAM,OAAO,6GAWnB,CAAC"}

package/dist/Typography.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
 import { classes } from "./utils.js";
-export function Text({ tone = "primary", size = "body", className, ...props }) {
-    return (_jsx("p", { ...props, className: classes("lo-ui-text", `lo-ui-text--${tone}`, `lo-ui-text--${size}`, className) }));
+export function Text({ as: Tag = "p", tone = "primary", weight, family, size = "body", className, ...props }) {
+    return (_jsx(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({ level = 1, className, ...props }) {
+export const Heading = forwardRef(function Heading({ level = 1, className, ...props }, ref) {
     const Tag = `h${level}`;
-    return _jsx(Tag, { ...props, className: classes("lo-ui-heading", className) });
-}
+    return (_jsx(Tag, { ...props, ref: ref, className: classes("lo-ui-heading", className) }));
+});

package/dist/index.d.ts

@@ -6,4 +6,8 @@ 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 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";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,cAAc,CAAC;AAC1D,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,aAAa,CAAC;AACvD,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,iBAAiB,CAAC;AACnE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAC5C,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,WAAW,CAAC;AACvE,OAAO,EACL,QAAQ,EACR,MAAM,EACN,KAAK,qBAAqB,GAC3B,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAChE,OAAO,EACL,OAAO,EACP,IAAI,EACJ,KAAK,YAAY,EACjB,KAAK,SAAS,GACf,MAAM,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,cAAc,CAAC;AAC1D,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,aAAa,CAAC;AACvD,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,iBAAiB,CAAC;AACnE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAC5C,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,WAAW,CAAC;AACvE,OAAO,EACL,QAAQ,EACR,MAAM,EACN,KAAK,qBAAqB,GAC3B,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAChE,OAAO,EACL,OAAO,EACP,IAAI,EACJ,KAAK,YAAY,EACjB,KAAK,SAAS,GACf,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,eAAe,CAAC;AAC7D,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,cAAc,CAAC;AAC1D,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC"}

package/dist/index.js

@@ -6,3 +6,7 @@ export { Cell, List } from "./List.js";
 export { Checkbox, Switch, } from "./SelectionControl.js";
 export { TextField } from "./TextField.js";
 export { Heading, Text, } from "./Typography.js";
+export { TextArea } from "./TextArea.js";
+export { Surface } from "./Surface.js";
+export { Dialog } from "./Dialog.js";
+export { Progress } from "./Progress.js";

package/dist/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;
 }
@@ -221,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;
@@ -443,18 +448,23 @@
   border-radius: 11px;
   color: var(--lo-color-accent-contrast);
   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 {
@@ -470,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 {
@@ -507,19 +514,20 @@
 }
 
 .lo-ui-empty-state__title {
+  font-family: var(--lo-font-family);
   color: var(--lo-color-text);
-  font-size: var(--lo-font-size-body);
+  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,
@@ -538,6 +546,7 @@
 }
 
 .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);
@@ -580,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);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lo-ink/ui",
-  "version": "0.2.0",
+  "version": "0.3.1",
   "description": "Accessible React components for LO miniapps",
   "type": "module",
   "license": "MIT",
@@ -30,10 +30,10 @@
   },
   "scripts": {
     "prepack": "npm run build",
-    "build": "tsc -p tsconfig.json && node scripts/copy-assets.mjs"
+    "build": "node ../../scripts/build-package.mjs"
   },
   "dependencies": {
-    "@lo-ink/design-tokens": "0.2.0"
+    "@lo-ink/design-tokens": "0.3.1"
   },
   "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/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,24 +1,32 @@
-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,
       )}
     />
@@ -29,7 +37,15 @@ export interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {
   level?: 1 | 2 | 3 | 4 | 5 | 6;
 }
 
-export function Heading({ level = 1, className, ...props }: HeadingProps) {
-  const Tag = `h${level}` as "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
-  return <Tag {...props} className={classes("lo-ui-heading", className)} />;
-}
+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

@@ -15,3 +15,7 @@ export {
   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;
 }
@@ -221,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;
@@ -443,18 +448,23 @@
   border-radius: 11px;
   color: var(--lo-color-accent-contrast);
   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 {
@@ -470,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 {
@@ -507,19 +514,20 @@
 }
 
 .lo-ui-empty-state__title {
+  font-family: var(--lo-font-family);
   color: var(--lo-color-text);
-  font-size: var(--lo-font-size-body);
+  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,
@@ -538,6 +546,7 @@
 }
 
 .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);
@@ -580,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);
+}