@opencode-ai/ui 0.0.0-dev-202608201855 → 0.0.0-dev-17750

package/dist/actions/button/button.d.ts

@@ -0,0 +1,10 @@
+import { Root } from "@kobalte/core/button";
+import { type ComponentProps } from "solid-js";
+import { type IconProps } from "@opencode-ai/ui/icon";
+import "./button.css";
+export interface ButtonProps extends ComponentProps<typeof Root>, Pick<ComponentProps<"button">, "class" | "classList" | "children"> {
+    size?: "small" | "normal" | "large";
+    variant?: "neutral" | "danger" | "warning" | "outline" | "contrast" | "ghost" | "ghost-muted" | "loading";
+    icon?: IconProps["name"];
+}
+export declare function Button(props: ButtonProps): import("solid-js").JSX.Element;

package/dist/actions/icon-button/icon-button.d.ts

@@ -0,0 +1,11 @@
+import { Root } from "@kobalte/core/button";
+import { type ComponentProps } from "solid-js";
+import { JSX } from "solid-js";
+import "./icon-button.css";
+export interface IconButtonProps extends ComponentProps<typeof Root>, Pick<ComponentProps<"button">, "class" | "classList"> {
+    icon?: JSX.Element;
+    size?: "small" | "normal" | "large";
+    variant?: "neutral" | "contrast" | "ghost" | "ghost-muted";
+    state?: "rest" | "hover" | "pressed";
+}
+export declare function IconButton(props: ComponentProps<"button"> & IconButtonProps): JSX.Element;

package/dist/actions/split-button/split-button.d.ts

@@ -0,0 +1,5 @@
+import { type ComponentProps, type ParentProps } from "solid-js";
+import "./split-button.css";
+export declare function SplitButton(props: ParentProps<ComponentProps<"div">>): import("solid-js").JSX.Element;
+export declare function SplitButtonAction(props: ComponentProps<"button">): import("solid-js").JSX.Element;
+export declare function SplitButtonMenuTrigger(props: ComponentProps<"button">): import("solid-js").JSX.Element;

package/dist/components/card.d.ts

@@ -1,5 +1,5 @@
 import { type ComponentProps } from "solid-js";
-import { type IconProps } from "./icon";
+import { type IconProps } from "@opencode-ai/ui/icon";
 type Variant = "normal" | "error" | "warning" | "success" | "info";
 export interface CardProps extends ComponentProps<"div"> {
     variant?: Variant;

package/dist/components/list.d.ts

@@ -1,6 +1,6 @@
 import { type FilteredListProps } from "@opencode-ai/ui/hooks";
 import { type JSX } from "solid-js";
-import { type IconProps } from "./icon";
+import { type IconProps } from "@opencode-ai/ui/icon";
 export interface ListSearchProps {
     placeholder?: string;
     autofocus?: boolean;

package/dist/components/scroll-view.d.ts

@@ -1,4 +1,4 @@
-import { type Accessor, type ComponentProps } from "solid-js";
+import { type ComponentProps } from "solid-js";
 export type ScrollViewThumbVisibility = "hover" | "scroll";
 export interface ScrollViewProps extends ComponentProps<"div"> {
     viewportRef?: (el: HTMLDivElement) => void;
@@ -11,9 +11,9 @@ export interface ScrollViewProps extends ComponentProps<"div"> {
      * */
     thumbVisibility?: ScrollViewThumbVisibility;
     /** Mount the thumb into an external track. Scroll metrics still come from this ScrollView. */
-    thumbContainer?: HTMLElement | Accessor<HTMLElement | undefined>;
+    thumbContainer?: HTMLElement;
     /** Element whose hover reveals the thumb. Defaults to the ScrollView root when unset. */
-    thumbHoverTarget?: HTMLElement | Accessor<HTMLElement | undefined>;
+    thumbHoverTarget?: HTMLElement;
 }
 export declare const scrollKey: (event: Pick<KeyboardEvent, "key" | "altKey" | "ctrlKey" | "metaKey" | "shiftKey">) => "end" | "home" | "page-down" | "page-up" | "up" | "down" | undefined;
 export declare function canScrollKey(element: HTMLElement, key: NonNullable<ReturnType<typeof scrollKey>>): boolean;

package/dist/context/i18n.d.ts

@@ -1,16 +1,19 @@
 import { type Accessor, type ParentProps } from "solid-js";
-import { dict as en } from "../i18n/en";
-export type UiI18nKey = keyof typeof en;
-export declare const UI_PLURAL_KEYS: readonly ["ui.sessionTurn.diffs.changed", "ui.messagePart.context.read", "ui.messagePart.context.search", "ui.messagePart.context.list"];
-export type UiI18nPluralKey = (typeof UI_PLURAL_KEYS)[number];
-export type UiPluralCategory = "zero" | "one" | "two" | "few" | "many" | "other";
-export type UiI18nPluralLookupKey = `${UiI18nPluralKey}.${UiPluralCategory}`;
+import type { Key, LocaleKey, PluralCategory, PluralKey, PluralLookupKey } from "../i18n/en";
+export type UiI18nKey = Key;
+export type UiI18nPluralKey = PluralKey;
+export type UiPluralCategory = PluralCategory;
+export type UiI18nPluralLookupKey = PluralLookupKey;
+export type UiI18nLocaleKey = LocaleKey;
+type UiTranslationKey<Value extends string> = Value extends UiI18nPluralLookupKey ? never : Value;
 export type UiI18nParams = Record<string, string | number | boolean>;
+export type UiTranslate = <Value extends string>(key: UiTranslationKey<Value>, params?: UiI18nParams) => string;
 export type UiI18n = {
     locale: Accessor<string>;
     layoutLocale?: Accessor<string>;
-    t: (key: UiI18nKey, params?: UiI18nParams) => string;
+    t: UiTranslate;
     plural: (key: UiI18nPluralKey, count: number, params?: UiI18nParams) => string;
+    pluralForm?: (key: UiI18nPluralKey, category: UiPluralCategory, params?: UiI18nParams) => string;
 };
 export declare function pluralCategory(locale: string, count: number): UiPluralCategory;
 export declare function pluralKey(key: UiI18nPluralKey, category: UiPluralCategory): UiI18nPluralLookupKey;

package/dist/{components → data-display/accordion}/accordion.d.ts

@@ -1,14 +1,14 @@
-import { Accordion as Kobalte } from "@kobalte/core/accordion";
+import { Content, Header, Item, Root, Trigger } from "@kobalte/core/accordion";
 import type { ComponentProps, ParentProps } from "solid-js";
-export interface AccordionProps extends ComponentProps<typeof Kobalte> {
+export interface AccordionProps extends ComponentProps<typeof Root> {
 }
-export interface AccordionItemProps extends ComponentProps<typeof Kobalte.Item> {
+export interface AccordionItemProps extends ComponentProps<typeof Item> {
 }
-export interface AccordionHeaderProps extends ComponentProps<typeof Kobalte.Header> {
+export interface AccordionHeaderProps extends ComponentProps<typeof Header> {
 }
-export interface AccordionTriggerProps extends ComponentProps<typeof Kobalte.Trigger> {
+export interface AccordionTriggerProps extends ComponentProps<typeof Trigger> {
 }
-export interface AccordionContentProps extends ComponentProps<typeof Kobalte.Content> {
+export interface AccordionContentProps extends ComponentProps<typeof Content> {
 }
 declare function AccordionRoot(props: AccordionProps): import("solid-js").JSX.Element;
 declare function AccordionItem(props: AccordionItemProps): import("solid-js").JSX.Element;

package/dist/{v2/components/avatar-v2.d.ts → data-display/avatar/avatar.d.ts}

@@ -1,5 +1,5 @@
 import { type ComponentProps } from "solid-js";
-import "./avatar-v2.css";
+import "./avatar.css";
 export interface AvatarProps extends ComponentProps<"div"> {
     fallback: string;
     src?: string;

package/dist/data-display/badge/badge.d.ts

@@ -0,0 +1,7 @@
+import { type ComponentProps } from "solid-js";
+import "./badge.css";
+export interface BadgeProps extends ComponentProps<"span"> {
+    appearance?: "standard" | "compact";
+    variant?: "neutral" | "accent";
+}
+export declare function Badge(props: BadgeProps): import("solid-js").JSX.Element;

package/dist/{components → data-display/diff-changes}/diff-changes.d.ts

@@ -1,5 +1,7 @@
+import "./diff-changes.css";
 export declare function DiffChanges(props: {
     class?: string;
+    appearance?: "standard" | "compact";
     changes: {
         additions: number;
         deletions: number;
@@ -7,5 +9,4 @@ export declare function DiffChanges(props: {
         additions: number;
         deletions: number;
     }[];
-    variant?: "default" | "bars";
 }): import("solid-js").JSX.Element;

package/dist/data-display/keybind/keybind.d.ts

@@ -0,0 +1,7 @@
+import { type ComponentProps } from "solid-js";
+import "./keybind.css";
+export interface KeybindProps extends ComponentProps<"div"> {
+    keys: string[];
+    variant?: "neutral" | "ghost";
+}
+export declare function Keybind(props: KeybindProps): import("solid-js").JSX.Element;

package/dist/{v2/components/line-comment-v2.d.ts → data-display/line-comment/line-comment.d.ts}

@@ -1,20 +1,20 @@
 import { type ComponentProps, type JSX } from "solid-js";
-import "./line-comment-v2.css";
+import "./line-comment.css";
 /** Horizontal “more” glyph for the display-card overflow control (Figma outline-dots). */
-export declare function LineCommentV2OverflowIcon(props: ComponentProps<"svg">): JSX.Element;
-export interface LineCommentV2Props extends ComponentProps<"div"> {
+export declare function LineCommentOverflowIcon(props: ComponentProps<"svg">): JSX.Element;
+export interface LineCommentProps extends ComponentProps<"div"> {
     /** Main comment body (text or rich content). */
     comment: JSX.Element;
     /** Line / selection context (e.g. “Comment on line 40”). */
     selection: JSX.Element;
-    /** Typically an overflow menu trigger; use `LineCommentV2OverflowIcon` inside `line-comment-v2-overflow`. */
+    /** Typically an overflow menu trigger; use `LineCommentOverflowIcon` inside `line-comment-v2-overflow`. */
     actions?: JSX.Element;
 }
-export declare function LineCommentV2(props: LineCommentV2Props): JSX.Element;
-export type LineCommentEditorV2Mention = {
+export declare function LineComment(props: LineCommentProps): JSX.Element;
+export type LineCommentEditorMention = {
     items: (query: string) => string[] | Promise<string[]>;
 };
-export interface LineCommentEditorV2Props extends Omit<ComponentProps<"div">, "children" | "onInput" | "onSubmit"> {
+export interface LineCommentEditorProps extends Omit<ComponentProps<"div">, "children" | "onInput" | "onSubmit"> {
     /** Visible field label above the textarea (default: “Comment”). */
     heading?: JSX.Element | string;
     value: string;
@@ -27,6 +27,6 @@ export interface LineCommentEditorV2Props extends Omit<ComponentProps<"div">, "c
     cancelLabel?: string;
     submitLabel?: string;
     autofocus?: boolean;
-    mention?: LineCommentEditorV2Mention;
+    mention?: LineCommentEditorMention;
 }
-export declare function LineCommentEditorV2(props: LineCommentEditorV2Props): JSX.Element;
+export declare function LineCommentEditor(props: LineCommentEditorProps): JSX.Element;

package/dist/{v2/components/project-avatar-v2.d.ts → data-display/project-avatar/project-avatar.d.ts}

@@ -1,5 +1,5 @@
 import { type ComponentProps } from "solid-js";
-import "./project-avatar-v2.css";
+import "./project-avatar.css";
 export declare const PROJECT_AVATAR_VARIANTS: readonly ["orange", "yellow", "cyan", "green", "red", "pink", "blue", "purple", "gray"];
 export type ProjectAvatarVariant = (typeof PROJECT_AVATAR_VARIANTS)[number];
 export type ProjectAvatarStyle = ProjectAvatarVariant | "outline";

package/dist/feedback/loader/loader.d.ts

@@ -0,0 +1,3 @@
+import { type ComponentProps } from "solid-js";
+import "./loader.css";
+export declare function Loader(props: ComponentProps<"svg">): import("solid-js").JSX.Element;

package/dist/{components → feedback/progress-circle}/progress-circle.d.ts

@@ -1,6 +1,8 @@
 import { type ComponentProps } from "solid-js";
+import "./progress-circle.css";
 export interface ProgressCircleProps extends Pick<ComponentProps<"svg">, "class" | "classList" | "style"> {
     percentage: number;
+    appearance?: "compact" | "indicator";
     size?: number;
     strokeWidth?: number;
 }

package/dist/feedback/toast/toast.d.ts

@@ -0,0 +1,57 @@
+import { type ToasterProps } from "solid-sonner";
+import type { ComponentProps, JSX } from "solid-js";
+import "../../actions/button/button.css";
+import "./toast.css";
+export interface ToastRegionProps extends ToasterProps {
+}
+declare function ToastRegion(props: ToastRegionProps): JSX.Element;
+export interface ToastRootComponentProps {
+    toastId: number;
+    children?: JSX.Element;
+}
+declare function ToastRoot(props: ToastRootComponentProps): JSX.Element;
+declare function ToastIcon(props: ComponentProps<"div">): JSX.Element;
+declare function ToastContent(props: ComponentProps<"div">): JSX.Element;
+declare function ToastTitle(props: ComponentProps<"div">): JSX.Element;
+declare function ToastDescription(props: ComponentProps<"div">): JSX.Element;
+declare function ToastActions(props: ComponentProps<"div">): JSX.Element;
+declare function ToastCloseButton(props: ComponentProps<"button">): JSX.Element;
+export declare const Toast: typeof ToastRoot & {
+    Region: typeof ToastRegion;
+    Icon: typeof ToastIcon;
+    Content: typeof ToastContent;
+    Title: typeof ToastTitle;
+    Description: typeof ToastDescription;
+    Actions: typeof ToastActions;
+    CloseButton: typeof ToastCloseButton;
+};
+export declare const toaster: {
+    show(render: (props: {
+        toastId: number;
+    }) => JSX.Element, options?: {
+        duration?: number;
+        persistent?: boolean;
+    }): number;
+    dismiss(toastId?: number): string | number | undefined;
+};
+export interface ToastAction {
+    label: string;
+    variant?: "primary" | "secondary";
+    onClick: "dismiss" | (() => void);
+}
+export interface ToastOptions {
+    title?: string;
+    description?: string;
+    icon?: JSX.Element;
+    variant?: "default" | "success" | "error" | "loading";
+    duration?: number;
+    persistent?: boolean;
+    actions?: ToastAction[];
+}
+export declare function showToast(options: ToastOptions | string): number;
+export interface ToastPromiseOptions<T, U = unknown> {
+    loading?: JSX.Element;
+    success?: (data: T) => JSX.Element;
+    error?: (error: U) => JSX.Element;
+}
+export {};

package/dist/{components → forms/checkbox}/checkbox.d.ts

@@ -1,6 +1,6 @@
-import { Checkbox as Kobalte } from "@kobalte/core/checkbox";
+import { Root } from "@kobalte/core/checkbox";
 import type { ComponentProps, JSX, ParentProps } from "solid-js";
-export interface CheckboxProps extends ParentProps<ComponentProps<typeof Kobalte>> {
+export interface CheckboxProps extends ParentProps<ComponentProps<typeof Root>> {
     hideLabel?: boolean;
     description?: string;
     icon?: JSX.Element;

package/dist/{v2/components/field-v2.d.ts → forms/field/field.d.ts}

@@ -1,9 +1,9 @@
 import { type ComponentProps, type ParentProps } from "solid-js";
-import "./field-v2.css";
-export interface FieldV2Props extends ComponentProps<"div"> {
+import "./field.css";
+export interface FieldProps extends ComponentProps<"div"> {
     invalid?: boolean;
 }
-declare function FieldV2Root(props: ParentProps<FieldV2Props>): import("solid-js").JSX.Element;
+declare function FieldRoot(props: ParentProps<FieldProps>): import("solid-js").JSX.Element;
 export interface FieldLabelProps extends ComponentProps<"label"> {
     /** When set, shows the info icon with a tooltip containing this text. */
     tooltip?: string;
@@ -13,13 +13,7 @@ declare function FieldPrefix(props: ParentProps<ComponentProps<"div">>): import(
 declare function FieldSuffix(props: ParentProps<ComponentProps<"div">>): import("solid-js").JSX.Element;
 /** Optional layout wrapper around the control. */
 declare function FieldControl(props: ParentProps<ComponentProps<"div">>): import("solid-js").JSX.Element;
-export declare const FieldV2: typeof FieldV2Root & {
-    Label: typeof FieldLabel;
-    Prefix: typeof FieldPrefix;
-    Suffix: typeof FieldSuffix;
-    Control: typeof FieldControl;
-};
-export declare const Field: typeof FieldV2Root & {
+export declare const Field: typeof FieldRoot & {
     Label: typeof FieldLabel;
     Prefix: typeof FieldPrefix;
     Suffix: typeof FieldSuffix;

package/dist/forms/radio/radio.d.ts

@@ -0,0 +1,16 @@
+import { Item, Root } from "@kobalte/core/radio-group";
+import { type JSX } from "solid-js";
+import type { ComponentProps, ParentProps } from "solid-js";
+import "./radio.css";
+export interface RadioGroupProps extends ParentProps<ComponentProps<typeof Root>> {
+    label?: JSX.Element;
+    description?: JSX.Element;
+    hideLabel?: boolean;
+}
+export declare function RadioGroup(props: RadioGroupProps): JSX.Element;
+export interface RadioItemProps extends ComponentProps<typeof Item> {
+    label: JSX.Element;
+    description?: JSX.Element;
+    hideLabel?: boolean;
+}
+export declare function RadioItem(props: RadioItemProps): JSX.Element;

package/dist/{v2/components/select-v2.d.ts → forms/select/select.d.ts}

@@ -1,7 +1,7 @@
-import { Select as Kobalte } from "@kobalte/core/select";
+import { Root } from "@kobalte/core/select";
 import { type ComponentProps, type JSX } from "solid-js";
-import "./select-v2.css";
-export type SelectV2Props<T> = Omit<ComponentProps<typeof Kobalte<T, {
+import "./select.css";
+export type SelectProps<T> = Omit<ComponentProps<typeof Root<T, {
     category: string;
     options: T[];
 }>>, "value" | "onSelect" | "children" | "options" | "itemComponent" | "sectionComponent" | "defaultValue" | "multiple"> & {
@@ -14,11 +14,9 @@ export type SelectV2Props<T> = Omit<ComponentProps<typeof Kobalte<T, {
     groupBy?: (x: T) => string;
     onSelect?: (value: T | null) => void;
     onHighlight?: (value: T | undefined) => void | (() => void);
-    /** `base` / `large` match text-input-v2; `inline` is a compact settings-row trigger. */
-    appearance?: "base" | "large" | "inline";
     invalid?: boolean;
     numeric?: boolean;
     children?: (item: T) => JSX.Element;
     valueClass?: string;
 };
-export declare function SelectV2<T>(props: SelectV2Props<T>): JSX.Element;
+export declare function Select<T>(props: SelectProps<T>): JSX.Element;

package/dist/{components → forms/switch}/switch.d.ts

@@ -1,6 +1,8 @@
-import { Switch as Kobalte } from "@kobalte/core/switch";
+import { Root } from "@kobalte/core/switch";
 import type { ComponentProps, ParentProps } from "solid-js";
-export interface SwitchProps extends ParentProps<ComponentProps<typeof Kobalte>> {
+import "./switch.css";
+export interface SwitchProps extends ParentProps<ComponentProps<typeof Root>> {
+    appearance?: "standard" | "compact";
     hideLabel?: boolean;
     description?: string;
 }

package/dist/{v2/components/text-input-v2.d.ts → forms/text-input/text-input.d.ts}

@@ -1,6 +1,6 @@
 import { type ComponentProps, type JSX } from "solid-js";
-import "./text-input-v2.css";
-export interface TextInputV2Props extends Omit<ComponentProps<"input">, "type"> {
+import "./text-input.css";
+export interface TextInputProps extends Omit<ComponentProps<"input">, "type"> {
     /** Icon or adornment shown before the field value. */
     leadingIcon?: JSX.Element;
     /** Show the trailing copy action. */
@@ -21,4 +21,4 @@ export interface TextInputV2Props extends Omit<ComponentProps<"input">, "type">
     appearance?: "base" | "large";
     type?: ComponentProps<"input">["type"];
 }
-export declare function TextInputV2(props: TextInputV2Props): JSX.Element;
+export declare function TextInput(props: TextInputProps): JSX.Element;

package/dist/forms/textarea/textarea.d.ts

@@ -0,0 +1,7 @@
+import { type ComponentProps } from "solid-js";
+import "./textarea.css";
+export interface TextareaProps extends ComponentProps<"textarea"> {
+    /** Error styling for the field and value text. */
+    invalid?: boolean;
+}
+export declare function Textarea(props: TextareaProps): import("solid-js").JSX.Element;

package/dist/i18n/ar.d.ts

@@ -152,8 +152,6 @@ export declare const dict: {
     "ui.tool.websearch.provider": string;
     "ui.tool.shell": string;
     "ui.tool.patch": string;
-    "ui.tool.todos": string;
-    "ui.tool.todos.read": string;
     "ui.tool.questions": string;
     "ui.tool.questions.numbered": string;
     "ui.tool.agent": string;

package/dist/i18n/bg.d.ts

@@ -141,8 +141,6 @@ export declare const dict: {
     "ui.tool.websearch.provider": string;
     "ui.tool.shell": string;
     "ui.tool.patch": string;
-    "ui.tool.todos": string;
-    "ui.tool.todos.read": string;
     "ui.tool.questions": string;
     "ui.tool.questions.numbered": string;
     "ui.tool.agent": string;

package/dist/i18n/br.d.ts

@@ -140,8 +140,6 @@ export declare const dict: {
     "ui.tool.websearch.provider": string;
     "ui.tool.shell": string;
     "ui.tool.patch": string;
-    "ui.tool.todos": string;
-    "ui.tool.todos.read": string;
     "ui.tool.questions": string;
     "ui.tool.questions.numbered": string;
     "ui.tool.agent": string;

package/dist/i18n/bs.d.ts

@@ -140,8 +140,6 @@ export declare const dict: {
     "ui.tool.websearch.provider": string;
     "ui.tool.shell": string;
     "ui.tool.patch": string;
-    "ui.tool.todos": string;
-    "ui.tool.todos.read": string;
     "ui.tool.questions": string;
     "ui.tool.questions.numbered": string;
     "ui.tool.agent": string;

package/dist/i18n/da.d.ts

@@ -118,8 +118,6 @@ export declare const dict: {
     "ui.tool.websearch.provider": string;
     "ui.tool.shell": string;
     "ui.tool.patch": string;
-    "ui.tool.todos": string;
-    "ui.tool.todos.read": string;
     "ui.tool.questions": string;
     "ui.tool.questions.numbered": string;
     "ui.tool.agent": string;

package/dist/i18n/de.d.ts

@@ -118,8 +118,6 @@ export declare const dict: {
     "ui.tool.websearch.provider": string;
     "ui.tool.shell": string;
     "ui.tool.patch": string;
-    "ui.tool.todos": string;
-    "ui.tool.todos.read": string;
     "ui.tool.questions": string;
     "ui.tool.questions.numbered": string;
     "ui.tool.agent": string;