@lo-ink/ui 0.3.0 → 0.4.0

package/dist/Surface.d.ts.map

@@ -1 +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"}
+{"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,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,+BAc5E"}

package/dist/Surface.js

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

package/dist/Tabs.d.ts

@@ -0,0 +1,15 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+export interface TabOption {
+    value: string;
+    label: ReactNode;
+    disabled?: boolean;
+    panelId?: string;
+}
+export interface TabsProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
+    options: readonly TabOption[];
+    value: string;
+    onValueChange: (value: string) => void;
+}
+/** Controlled horizontal tabs. Labels retain their width and scroll into view. */
+export declare function Tabs({ options, value, onValueChange, id: providedId, className, ...props }: TabsProps): import("react").JSX.Element;
+//# sourceMappingURL=Tabs.d.ts.map

package/dist/Tabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../src/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,cAAc,EACnB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AACD,MAAM,WAAW,SAAU,SAAQ,IAAI,CACrC,cAAc,CAAC,cAAc,CAAC,EAC9B,UAAU,CACX;IACC,OAAO,EAAE,SAAS,SAAS,EAAE,CAAC;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACxC;AAED,kFAAkF;AAClF,wBAAgB,IAAI,CAAC,EACnB,OAAO,EACP,KAAK,EACL,aAAa,EACb,EAAE,EAAE,UAAU,EACd,SAAS,EACT,GAAG,KAAK,EACT,EAAE,SAAS,+BA8EX"}

package/dist/Tabs.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useId, useRef, } from "react";
+import { classes } from "./utils.js";
+/** Controlled horizontal tabs. Labels retain their width and scroll into view. */
+export function Tabs({ options, value, onValueChange, id: providedId, className, ...props }) {
+    const generatedId = useId();
+    const id = providedId ?? generatedId;
+    const row = useRef(null);
+    const focusValue = options.some((option) => option.value === value && !option.disabled)
+        ? value
+        : options.find((option) => !option.disabled)?.value;
+    useEffect(() => {
+        const selected = row.current?.querySelector('[aria-selected="true"]');
+        if (!selected || !row.current)
+            return;
+        const viewport = row.current;
+        const bounds = selected.getBoundingClientRect();
+        const visible = viewport.getBoundingClientRect();
+        if (bounds.left < visible.left)
+            viewport.scrollLeft += bounds.left - visible.left;
+        else if (bounds.right > visible.right)
+            viewport.scrollLeft += bounds.right - visible.right;
+    }, [value, options]);
+    return (_jsx("div", { ...props, id: id, ref: row, role: "tablist", "aria-orientation": "horizontal", className: classes("lo-ui-tabs", className), children: options.map((option, index) => (_jsx("button", { id: `${id}-tab-${index}`, type: "button", role: "tab", "aria-selected": option.value === value, "aria-controls": option.panelId, tabIndex: option.value === focusValue ? 0 : -1, disabled: option.disabled, className: "lo-ui-tab", onClick: () => onValueChange(option.value), onKeyDown: (event) => {
+                if (!["ArrowLeft", "ArrowRight", "Home", "End"].includes(event.key))
+                    return;
+                event.preventDefault();
+                const enabled = options
+                    .map((item, i) => (item.disabled ? -1 : i))
+                    .filter((i) => i >= 0);
+                if (!enabled.length)
+                    return;
+                const current = enabled.indexOf(index);
+                const forward = getComputedStyle(event.currentTarget).direction === "rtl"
+                    ? "ArrowLeft"
+                    : "ArrowRight";
+                const next = event.key === "Home"
+                    ? enabled[0]
+                    : event.key === "End"
+                        ? enabled[enabled.length - 1]
+                        : enabled[(current +
+                            (event.key === forward ? 1 : -1) +
+                            enabled.length) %
+                            enabled.length];
+                onValueChange(options[next].value);
+                const buttons = row.current?.querySelectorAll('[role="tab"]');
+                buttons?.[next]?.focus();
+            }, children: option.label }, option.value))) }));
+}

package/dist/TextField.d.ts

@@ -5,6 +5,7 @@ export interface TextFieldProps extends Omit<InputHTMLAttributes<HTMLInputElemen
     error?: ReactNode;
     inputClassName?: string;
     labelHidden?: boolean;
+    variant?: "outlined" | "search";
 }
 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;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,eAAO,MAAM,SAAS,6GAuDrB,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;IACtB,OAAO,CAAC,EAAE,UAAU,GAAG,QAAQ,CAAC;CACjC;AAED,eAAO,MAAM,SAAS,6GA6DrB,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, labelHidden = false, "aria-describedby": ariaDescribedBy, ...props }, ref) {
+export const TextField = forwardRef(function TextField({ label, description, error, id: providedId, className, inputClassName, labelHidden = false, variant = "outlined", "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", 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 }))] }));
+    return (_jsxs("div", { className: classes("lo-ui-field", `lo-ui-field--${variant}`, 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", variant === "search" && "lo-ui-field__input--search", 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/index.d.ts

@@ -10,4 +10,5 @@ export { TextArea, type TextAreaProps } from "./TextArea.js";
 export { Surface, type SurfaceProps } from "./Surface.js";
 export { Dialog } from "./Dialog.js";
 export { Progress } from "./Progress.js";
+export { Tabs, type TabsProps, type TabOption } from "./Tabs.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;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"}
+{"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;AACzC,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,WAAW,CAAC"}

package/dist/index.js

@@ -10,3 +10,4 @@ export { TextArea } from "./TextArea.js";
 export { Surface } from "./Surface.js";
 export { Dialog } from "./Dialog.js";
 export { Progress } from "./Progress.js";
+export { Tabs } from "./Tabs.js";

package/dist/styles.css

@@ -33,9 +33,10 @@
   border: 1px solid transparent;
   border-radius: var(--lo-radius-full);
   min-width: 0;
+  flex-shrink: 0;
   max-width: 100%;
   white-space: normal;
-  overflow-wrap: anywhere;
+  overflow-wrap: break-word;
   text-align: center;
   display: inline-flex;
   align-items: center;
@@ -147,18 +148,76 @@
 .lo-ui-field__input {
   width: 100%;
   min-width: 0;
-  min-height: var(--lo-size-control);
-  padding: 10px var(--lo-space-3);
+  min-height: 44px;
+  padding: 9px 10px;
   color: var(--lo-color-text);
   background: var(--lo-color-surface);
   border: 1px solid var(--lo-color-control-border);
-  border-radius: var(--lo-radius-md);
+  border-radius: 10px;
   font-size: 16px;
   transition:
     border-color var(--lo-motion-fast) var(--lo-ease-out),
     box-shadow var(--lo-motion-fast) var(--lo-ease-out);
 }
 
+.lo-ui-field__input--search {
+  min-height: 38px;
+  padding: 6px 15px;
+  border-color: transparent;
+  border-radius: 6px;
+  background: #76768015;
+  font-size: 14px;
+}
+
+.lo-ui-tabs {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  min-width: 0;
+  max-width: 100%;
+  overflow-x: auto;
+  overscroll-behavior-x: contain;
+  scrollbar-width: none;
+  padding: 2px;
+}
+.lo-ui-tabs::-webkit-scrollbar {
+  display: none;
+}
+.lo-ui-tab {
+  position: relative;
+  isolation: isolate;
+  flex: 0 0 auto;
+  min-height: 44px;
+  padding: 0 15px;
+  border: 0;
+  border-radius: var(--lo-radius-full);
+  color: var(--lo-color-text-secondary);
+  background: transparent;
+  font-size: var(--lo-font-size-label);
+  font-weight: var(--lo-font-weight-medium);
+  white-space: nowrap;
+  cursor: pointer;
+}
+.lo-ui-tab[aria-selected="true"] {
+  color: var(--lo-color-accent-text);
+}
+.lo-ui-tab[aria-selected="true"]::before {
+  content: "";
+  position: absolute;
+  z-index: -1;
+  inset: 5px 0;
+  border-radius: var(--lo-radius-full);
+  background: var(--lo-color-accent-soft);
+}
+.lo-ui-tab:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+.lo-ui-tab:focus-visible {
+  outline-offset: -3px;
+}
+
 .lo-ui-field__input::placeholder {
   color: var(--lo-color-text-secondary);
   opacity: 1;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lo-ink/ui",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "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.3.0"
+    "@lo-ink/design-tokens": "0.3.1"
   },
   "peerDependencies": {
     "react": ">=18 <20",

package/src/Surface.tsx

@@ -5,19 +5,15 @@ import { classes } from "./utils.js";
 export interface SurfaceProps extends HTMLAttributes<HTMLElement> {
   padding?: SpacingToken;
 }
-export function Surface({
-  padding = 4,
-  className,
-  style,
-  ...props
-}: SurfaceProps) {
+export function Surface({ padding, className, style, ...props }: SurfaceProps) {
   return (
     <section
       {...props}
       className={classes("lo-ui-surface", className)}
       style={
         {
-          "--lo-surface-padding": `var(--lo-space-${padding})`,
+          "--lo-surface-padding":
+            padding === undefined ? "10px" : `var(--lo-space-${padding})`,
           ...style,
         } as CSSProperties
       }

package/src/Tabs.tsx

@@ -0,0 +1,111 @@
+import {
+  useEffect,
+  useId,
+  useRef,
+  type HTMLAttributes,
+  type ReactNode,
+} from "react";
+import { classes } from "./utils.js";
+
+export interface TabOption {
+  value: string;
+  label: ReactNode;
+  disabled?: boolean;
+  panelId?: string;
+}
+export interface TabsProps extends Omit<
+  HTMLAttributes<HTMLDivElement>,
+  "onChange"
+> {
+  options: readonly TabOption[];
+  value: string;
+  onValueChange: (value: string) => void;
+}
+
+/** Controlled horizontal tabs. Labels retain their width and scroll into view. */
+export function Tabs({
+  options,
+  value,
+  onValueChange,
+  id: providedId,
+  className,
+  ...props
+}: TabsProps) {
+  const generatedId = useId();
+  const id = providedId ?? generatedId;
+  const row = useRef<HTMLDivElement>(null);
+  const focusValue = options.some(
+    (option) => option.value === value && !option.disabled,
+  )
+    ? value
+    : options.find((option) => !option.disabled)?.value;
+  useEffect(() => {
+    const selected = row.current?.querySelector<HTMLElement>(
+      '[aria-selected="true"]',
+    );
+    if (!selected || !row.current) return;
+    const viewport = row.current;
+    const bounds = selected.getBoundingClientRect();
+    const visible = viewport.getBoundingClientRect();
+    if (bounds.left < visible.left)
+      viewport.scrollLeft += bounds.left - visible.left;
+    else if (bounds.right > visible.right)
+      viewport.scrollLeft += bounds.right - visible.right;
+  }, [value, options]);
+  return (
+    <div
+      {...props}
+      id={id}
+      ref={row}
+      role="tablist"
+      aria-orientation="horizontal"
+      className={classes("lo-ui-tabs", className)}
+    >
+      {options.map((option, index) => (
+        <button
+          key={option.value}
+          id={`${id}-tab-${index}`}
+          type="button"
+          role="tab"
+          aria-selected={option.value === value}
+          aria-controls={option.panelId}
+          tabIndex={option.value === focusValue ? 0 : -1}
+          disabled={option.disabled}
+          className="lo-ui-tab"
+          onClick={() => onValueChange(option.value)}
+          onKeyDown={(event) => {
+            if (!["ArrowLeft", "ArrowRight", "Home", "End"].includes(event.key))
+              return;
+            event.preventDefault();
+            const enabled = options
+              .map((item, i) => (item.disabled ? -1 : i))
+              .filter((i) => i >= 0);
+            if (!enabled.length) return;
+            const current = enabled.indexOf(index);
+            const forward =
+              getComputedStyle(event.currentTarget).direction === "rtl"
+                ? "ArrowLeft"
+                : "ArrowRight";
+            const next =
+              event.key === "Home"
+                ? enabled[0]
+                : event.key === "End"
+                  ? enabled[enabled.length - 1]
+                  : enabled[
+                      (current +
+                        (event.key === forward ? 1 : -1) +
+                        enabled.length) %
+                        enabled.length
+                    ];
+            onValueChange(options[next].value);
+            const buttons =
+              row.current?.querySelectorAll<HTMLButtonElement>('[role="tab"]');
+            buttons?.[next]?.focus();
+          }}
+        >
+          {option.label}
+        </button>
+      ))}
+    </div>
+  );
+}

package/src/TextField.tsx

@@ -15,6 +15,7 @@ export interface TextFieldProps extends Omit<
   error?: ReactNode;
   inputClassName?: string;
   labelHidden?: boolean;
+  variant?: "outlined" | "search";
 }
 
 export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
@@ -27,6 +28,7 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
       className,
       inputClassName,
       labelHidden = false,
+      variant = "outlined",
       "aria-describedby": ariaDescribedBy,
       ...props
     },
@@ -44,6 +46,7 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
       <div
         className={classes(
           "lo-ui-field",
+          `lo-ui-field--${variant}`,
           labelHidden && "lo-ui-field--label-hidden",
           className,
         )}
@@ -57,7 +60,11 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
           id={id}
           aria-invalid={error ? true : props["aria-invalid"]}
           aria-describedby={describedBy || undefined}
-          className={classes("lo-ui-field__input", inputClassName)}
+          className={classes(
+            "lo-ui-field__input",
+            variant === "search" && "lo-ui-field__input--search",
+            inputClassName,
+          )}
         />
         {description && (
           <div className="lo-ui-field__description" id={descriptionId}>

package/src/index.ts

@@ -19,3 +19,4 @@ export { TextArea, type TextAreaProps } from "./TextArea.js";
 export { Surface, type SurfaceProps } from "./Surface.js";
 export { Dialog } from "./Dialog.js";
 export { Progress } from "./Progress.js";
+export { Tabs, type TabsProps, type TabOption } from "./Tabs.js";

package/src/styles.css

@@ -33,9 +33,10 @@
   border: 1px solid transparent;
   border-radius: var(--lo-radius-full);
   min-width: 0;
+  flex-shrink: 0;
   max-width: 100%;
   white-space: normal;
-  overflow-wrap: anywhere;
+  overflow-wrap: break-word;
   text-align: center;
   display: inline-flex;
   align-items: center;
@@ -147,18 +148,76 @@
 .lo-ui-field__input {
   width: 100%;
   min-width: 0;
-  min-height: var(--lo-size-control);
-  padding: 10px var(--lo-space-3);
+  min-height: 44px;
+  padding: 9px 10px;
   color: var(--lo-color-text);
   background: var(--lo-color-surface);
   border: 1px solid var(--lo-color-control-border);
-  border-radius: var(--lo-radius-md);
+  border-radius: 10px;
   font-size: 16px;
   transition:
     border-color var(--lo-motion-fast) var(--lo-ease-out),
     box-shadow var(--lo-motion-fast) var(--lo-ease-out);
 }
 
+.lo-ui-field__input--search {
+  min-height: 38px;
+  padding: 6px 15px;
+  border-color: transparent;
+  border-radius: 6px;
+  background: #76768015;
+  font-size: 14px;
+}
+
+.lo-ui-tabs {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  min-width: 0;
+  max-width: 100%;
+  overflow-x: auto;
+  overscroll-behavior-x: contain;
+  scrollbar-width: none;
+  padding: 2px;
+}
+.lo-ui-tabs::-webkit-scrollbar {
+  display: none;
+}
+.lo-ui-tab {
+  position: relative;
+  isolation: isolate;
+  flex: 0 0 auto;
+  min-height: 44px;
+  padding: 0 15px;
+  border: 0;
+  border-radius: var(--lo-radius-full);
+  color: var(--lo-color-text-secondary);
+  background: transparent;
+  font-size: var(--lo-font-size-label);
+  font-weight: var(--lo-font-weight-medium);
+  white-space: nowrap;
+  cursor: pointer;
+}
+.lo-ui-tab[aria-selected="true"] {
+  color: var(--lo-color-accent-text);
+}
+.lo-ui-tab[aria-selected="true"]::before {
+  content: "";
+  position: absolute;
+  z-index: -1;
+  inset: 5px 0;
+  border-radius: var(--lo-radius-full);
+  background: var(--lo-color-accent-soft);
+}
+.lo-ui-tab:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+.lo-ui-tab:focus-visible {
+  outline-offset: -3px;
+}
+
 .lo-ui-field__input::placeholder {
   color: var(--lo-color-text-secondary);
   opacity: 1;