@lo-ink/ui 0.1.1 → 0.3.0

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/EmptyState.d.ts

@@ -1,9 +1,10 @@
 import type { HTMLAttributes, ReactNode } from "react";
 export interface EmptyStateProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
     title: ReactNode;
+    headingLevel?: 2 | 3 | 4 | 5 | 6;
     description?: ReactNode;
     icon?: ReactNode;
     action?: ReactNode;
 }
-export declare function EmptyState({ title, description, icon, action, className, ...props }: EmptyStateProps): import("react").JSX.Element;
+export declare function EmptyState({ title, headingLevel, description, icon, action, className, ...props }: EmptyStateProps): import("react").JSX.Element;
 //# sourceMappingURL=EmptyState.d.ts.map

package/dist/EmptyState.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EmptyState.d.ts","sourceRoot":"","sources":["../src/EmptyState.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvD,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAC3C,cAAc,CAAC,cAAc,CAAC,EAC9B,OAAO,CACR;IACC,KAAK,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AAED,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,WAAW,EACX,IAAI,EACJ,MAAM,EACN,SAAS,EACT,GAAG,KAAK,EACT,EAAE,eAAe,+BAejB"}
+{"version":3,"file":"EmptyState.d.ts","sourceRoot":"","sources":["../src/EmptyState.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvD,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAC3C,cAAc,CAAC,cAAc,CAAC,EAC9B,OAAO,CACR;IACC,KAAK,EAAE,SAAS,CAAC;IACjB,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACjC,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AAED,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,YAAgB,EAChB,WAAW,EACX,IAAI,EACJ,MAAM,EACN,SAAS,EACT,GAAG,KAAK,EACT,EAAE,eAAe,+BAgBjB"}

package/dist/EmptyState.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { classes } from "./utils.js";
-export function EmptyState({ title, description, icon, action, className, ...props }) {
-    return (_jsxs("div", { ...props, className: classes("lo-ui-empty-state", className), children: [icon && (_jsx("div", { className: "lo-ui-empty-state__icon", "aria-hidden": "true", children: icon })), _jsx("h2", { className: "lo-ui-empty-state__title", children: title }), description && (_jsx("p", { className: "lo-ui-empty-state__description", children: description })), action && _jsx("div", { className: "lo-ui-empty-state__action", children: action })] }));
+export function EmptyState({ title, headingLevel = 2, description, icon, action, className, ...props }) {
+    const Tag = `h${headingLevel}`;
+    return (_jsxs("div", { ...props, className: classes("lo-ui-empty-state", className), children: [icon && (_jsx("div", { className: "lo-ui-empty-state__icon", "aria-hidden": "true", children: icon })), _jsx(Tag, { className: "lo-ui-empty-state__title", children: title }), description && (_jsx("p", { className: "lo-ui-empty-state__description", children: description })), action && _jsx("div", { className: "lo-ui-empty-state__action", children: action })] }));
 }

package/dist/List.d.ts

@@ -1,8 +1,9 @@
 import { type HTMLAttributes, type ReactNode } from "react";
 export interface ListProps extends HTMLAttributes<HTMLUListElement> {
     label?: ReactNode;
+    headingLevel?: 2 | 3 | 4 | 5 | 6;
 }
-export declare function List({ label, children, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }: ListProps): import("react").JSX.Element;
+export declare function List({ label, headingLevel, children, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }: ListProps): import("react").JSX.Element;
 export interface CellProps extends Omit<HTMLAttributes<HTMLLIElement>, "title"> {
     title: ReactNode;
     subtitle?: ReactNode;

package/dist/List.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"List.d.ts","sourceRoot":"","sources":["../src/List.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqB,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAG/E,MAAM,WAAW,SAAU,SAAQ,cAAc,CAAC,gBAAgB,CAAC;IACjE,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAED,wBAAgB,IAAI,CAAC,EACnB,KAAK,EACL,QAAQ,EACR,SAAS,EACT,YAAY,EAAE,SAAS,EACvB,iBAAiB,EAAE,cAAc,EACjC,GAAG,KAAK,EACT,EAAE,SAAS,+BAsBX;AAED,MAAM,WAAW,SAAU,SAAQ,IAAI,CACrC,cAAc,CAAC,aAAa,CAAC,EAC7B,OAAO,CACR;IACC,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,kFAAkF;IAClF,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,wEAAwE;IACxE,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,IAAI,qGA6Df,CAAC"}
+{"version":3,"file":"List.d.ts","sourceRoot":"","sources":["../src/List.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqB,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAG/E,MAAM,WAAW,SAAU,SAAQ,cAAc,CAAC,gBAAgB,CAAC;IACjE,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;CAClC;AAED,wBAAgB,IAAI,CAAC,EACnB,KAAK,EACL,YAAgB,EAChB,QAAQ,EACR,SAAS,EACT,YAAY,EAAE,SAAS,EACvB,iBAAiB,EAAE,cAAc,EACjC,GAAG,KAAK,EACT,EAAE,SAAS,+BAuBX;AAED,MAAM,WAAW,SAAU,SAAQ,IAAI,CACrC,cAAc,CAAC,aAAa,CAAC,EAC7B,OAAO,CACR;IACC,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,kFAAkF;IAClF,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,wEAAwE;IACxE,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,IAAI,qGA6Df,CAAC"}

package/dist/List.js

@@ -1,11 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { forwardRef, useId } from "react";
 import { classes } from "./utils.js";
-export function List({ label, children, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }) {
+export function List({ label, headingLevel = 2, children, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }) {
+    const Tag = `h${headingLevel}`;
     const generatedId = useId();
     const labelId = label ? `${generatedId}-label` : undefined;
     const effectiveLabelledBy = ariaLabelledBy ?? (ariaLabel === undefined ? labelId : undefined);
-    return (_jsxs("section", { className: "lo-ui-list-section", children: [label && (_jsx("h2", { className: "lo-ui-list-label", id: labelId, children: label })), _jsx("ul", { ...props, "aria-label": ariaLabel, "aria-labelledby": effectiveLabelledBy, className: classes("lo-ui-list", className), children: children })] }));
+    return (_jsxs("section", { className: "lo-ui-list-section", children: [label && (_jsx(Tag, { className: "lo-ui-list-label", id: labelId, children: label })), _jsx("ul", { ...props, "aria-label": ariaLabel, "aria-labelledby": effectiveLabelledBy, className: classes("lo-ui-list", className), children: children })] }));
 }
 export const Cell = forwardRef(function Cell({ title, subtitle, leading, trailing, trailingAction, onPress, disabled = false, className, ...props }, ref) {
     const content = (_jsxs(_Fragment, { children: [leading && _jsx("span", { className: "lo-ui-cell__leading", children: leading }), _jsxs("span", { className: "lo-ui-cell__body", children: [_jsx("span", { className: "lo-ui-cell__title", children: title }), subtitle && _jsx("span", { className: "lo-ui-cell__subtitle", children: subtitle })] }), trailing && _jsx("span", { className: "lo-ui-cell__trailing", children: trailing }), onPress && !trailing && !trailingAction && (_jsx("svg", { className: "lo-ui-cell__chevron", viewBox: "0 0 20 20", "aria-hidden": "true", children: _jsx("path", { d: "m7.5 4 6 6-6 6" }) }))] }));

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,8 +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 Heading({ className, ...props }: HTMLAttributes<HTMLHeadingElement>): 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 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,wBAAgB,OAAO,CAAC,EACtB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,kBAAkB,CAAC,+BAEpC"}
+{"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,8 +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 Heading({ className, ...props }) {
-    return _jsx("h1", { ...props, className: classes("lo-ui-heading", 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 const Heading = forwardRef(function Heading({ level = 1, className, ...props }, ref) {
+    const Tag = `h${level}`;
+    return (_jsx(Tag, { ...props, ref: ref, className: classes("lo-ui-heading", className) }));
+});

package/dist/index.d.ts

@@ -5,5 +5,9 @@ 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";
+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,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,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

@@ -5,4 +5,8 @@ export { Inline, Stack } from "./Layout.js";
 export { Cell, List } from "./List.js";
 export { Checkbox, Switch, } from "./SelectionControl.js";
 export { TextField } from "./TextField.js";
-export { Heading, Text } from "./Typography.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;
 }
@@ -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);
+}