@opencode-ai/ui 0.0.0-dev-19142 → 0.0.0-dev-202609050337

package/src/v2/components/tabs-v2.tsx

@@ -0,0 +1,149 @@
+import { Tabs as Kobalte } from "@kobalte/core/tabs"
+import { Show, splitProps, type JSX } from "solid-js"
+import type { ComponentProps, ParentProps, Component } from "solid-js"
+import { useI18n } from "../../context/i18n"
+import "./tabs-v2.css"
+
+export interface TabsV2Props extends ComponentProps<typeof Kobalte> {
+  variant?: "normal" | "pill" | "settings"
+  orientation?: "horizontal" | "vertical"
+}
+export interface TabsV2ListProps extends ComponentProps<typeof Kobalte.List> {}
+export interface TabsV2TriggerProps extends ComponentProps<typeof Kobalte.Trigger> {
+  onMiddleClick?: () => void
+  /** Optional subtext shown beside the primary content (muted style) */
+  subtext?: JSX.Element | string
+}
+export interface TabsV2CloseButtonProps extends ComponentProps<"div"> {}
+export interface TabsV2ContentProps extends ComponentProps<typeof Kobalte.Content> {}
+
+function TabsV2Root(props: TabsV2Props) {
+  const [split, rest] = splitProps(props, ["class", "classList", "variant", "orientation"])
+  return (
+    <Kobalte
+      {...rest}
+      orientation={split.orientation}
+      data-component="tabs-v2"
+      data-variant={split.variant || "normal"}
+      data-orientation={split.orientation || "horizontal"}
+      classList={{
+        ...split.classList,
+        [split.class ?? ""]: !!split.class,
+      }}
+    />
+  )
+}
+
+function TabsV2List(props: TabsV2ListProps) {
+  const [split, rest] = splitProps(props, ["class", "classList"])
+  return (
+    <Kobalte.List
+      {...rest}
+      data-slot="tabs-v2-list"
+      classList={{
+        ...split.classList,
+        [split.class ?? ""]: !!split.class,
+      }}
+    />
+  )
+}
+
+function TabsV2Trigger(props: ParentProps<TabsV2TriggerProps>) {
+  const [split, rest] = splitProps(props, ["class", "classList", "children", "onMiddleClick", "subtext"])
+  return (
+    <div
+      data-slot="tabs-v2-trigger-wrapper"
+      data-value={props.value}
+      classList={{
+        ...split.classList,
+        [split.class ?? ""]: !!split.class,
+      }}
+      onMouseDown={(e) => {
+        if (e.button === 1 && split.onMiddleClick) {
+          e.preventDefault()
+        }
+      }}
+      onAuxClick={(e) => {
+        if (e.button === 1 && split.onMiddleClick) {
+          e.preventDefault()
+          split.onMiddleClick()
+        }
+      }}
+    >
+      <Kobalte.Trigger {...rest} data-slot="tabs-v2-trigger" data-value={props.value}>
+        <span class="inline-flex items-center gap-2" data-slot="tabs-v2-trigger-content">
+          {split.children}
+          <Show when={split.subtext}>
+            {(subtext) => (
+              <span data-slot="tabs-v2-subtext" class="ms-2 text-xs text-text-weak">
+                {subtext()}
+              </span>
+            )}
+          </Show>
+        </span>
+      </Kobalte.Trigger>
+    </div>
+  )
+}
+
+function TabsV2CloseButton(props: TabsV2CloseButtonProps) {
+  const i18n = useI18n()
+  const [split, rest] = splitProps(props, ["class", "classList", "onClick"])
+  return (
+    <div
+      role="button"
+      tabindex={0}
+      aria-label={i18n.t("ui.tabs.close")}
+      data-slot="tabs-v2-close-button"
+      {...rest}
+      classList={{
+        [split.class ?? ""]: !!split.class,
+        ...split.classList,
+      }}
+      onClick={(e) => {
+        e.preventDefault()
+        e.stopPropagation()
+        if (typeof split.onClick === "function") {
+          split.onClick(e)
+        }
+      }}
+      onMouseDown={(e) => {
+        e.preventDefault()
+        e.stopPropagation()
+      }}
+    >
+      <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M10.8889 3.11108L3.11108 10.8889" stroke="currentColor" stroke-linejoin="round" />
+        <path d="M3.11108 3.11108L10.8889 10.8889" stroke="currentColor" stroke-linejoin="round" />
+      </svg>
+    </div>
+  )
+}
+
+function TabsV2Content(props: ParentProps<TabsV2ContentProps>) {
+  const [split, rest] = splitProps(props, ["class", "classList", "children"])
+  return (
+    <Kobalte.Content
+      {...rest}
+      data-slot="tabs-v2-content"
+      classList={{
+        ...split.classList,
+        [split.class ?? ""]: !!split.class,
+      }}
+    >
+      {split.children}
+    </Kobalte.Content>
+  )
+}
+
+const TabsV2SectionTitle: Component<ParentProps> = (props) => {
+  return <div data-slot="tabs-v2-section-title">{props.children}</div>
+}
+
+export const TabsV2 = Object.assign(TabsV2Root, {
+  List: TabsV2List,
+  Trigger: TabsV2Trigger,
+  CloseButton: TabsV2CloseButton,
+  Content: TabsV2Content,
+  SectionTitle: TabsV2SectionTitle,
+})

package/src/{forms/text-input/text-input.css → v2/components/text-input-v2.css}

@@ -13,7 +13,7 @@
   outline: 1px solid transparent;
   outline-offset: 0;
   background:
-    linear-gradient(180deg, var(--v2-alpha-light-6) 0%, var(--v2-alpha-light-2) 100%), var(--v2-background-bg-base);
+    linear-gradient(180deg, var(--v2-alpha-light-2) 0%, var(--v2-alpha-light-0) 100%), var(--v2-background-bg-base);
   box-shadow: var(--v2-elevation-button-neutral);
   flex: none;
   align-self: stretch;
@@ -30,7 +30,7 @@
 [data-component="text-input-v2"]:where(:hover):not([data-disabled], [data-invalid]):not(:focus-within) {
   background:
     linear-gradient(0deg, var(--v2-overlay-simple-overlay-hover), var(--v2-overlay-simple-overlay-hover)),
-    linear-gradient(180deg, var(--v2-alpha-light-6) 0%, var(--v2-alpha-light-2) 100%), var(--v2-background-bg-base);
+    linear-gradient(180deg, var(--v2-alpha-light-2) 0%, var(--v2-alpha-light-0) 100%), var(--v2-background-bg-base);
 }
 
 [data-component="text-input-v2"]:where(:focus-within):not([data-disabled], [data-invalid]) {
@@ -92,7 +92,7 @@
   font-style: normal;
   font-weight: 440;
   font-size: 13px;
-  line-height: var(--line-height-compact);
+  line-height: 1;
   letter-spacing: -0.04px;
   color: var(--v2-text-text-base);
   font-variation-settings: "slnt" 0;

package/src/{forms/text-input/text-input.tsx → v2/components/text-input-v2.tsx}

@@ -1,9 +1,9 @@
 import { type ComponentProps, type JSX, Show, splitProps } from "solid-js"
-import { Icon } from "@opencode-ai/ui/icon"
+import { Icon } from "./icon"
 import { useI18n } from "../../context/i18n"
-import "./text-input.css"
+import "./text-input-v2.css"
 
-export interface TextInputProps extends Omit<ComponentProps<"input">, "type"> {
+export interface TextInputV2Props extends Omit<ComponentProps<"input">, "type"> {
   /** Icon or adornment shown before the field value. */
   leadingIcon?: JSX.Element
   /** Show the trailing copy action. */
@@ -25,7 +25,7 @@ export interface TextInputProps extends Omit<ComponentProps<"input">, "type"> {
   type?: ComponentProps<"input">["type"]
 }
 
-export function TextInput(props: TextInputProps) {
+export function TextInputV2(props: TextInputV2Props) {
   const i18n = useI18n()
   const [local, inputProps] = splitProps(props, [
     "class",

package/src/v2/components/text-shimmer-v2.css

@@ -0,0 +1,125 @@
+* {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: geometricPrecision;
+}
+
+[data-component="text-shimmer-v2"] {
+  --_step: 45ms;
+  --_duration: 1200ms;
+  --_swap: 220ms;
+  --_index: 0;
+  --_angle: 90deg;
+  --_spread: 5.2ch;
+  --_size: 360%;
+  --_base-color: var(--v2-text-text-muted);
+  --_peak-color: var(--v2-text-text-base);
+  --_sweep: linear-gradient(
+    var(--_angle),
+    transparent calc(50% - var(--_spread)),
+    var(--_peak-color) 50%,
+    transparent calc(50% + var(--_spread))
+  );
+  --_base: linear-gradient(var(--_base-color), var(--_base-color));
+
+  display: inline-flex;
+  align-items: baseline;
+  font: inherit;
+  letter-spacing: inherit;
+  line-height: inherit;
+  user-select: none;
+}
+
+[data-component="text-shimmer-v2"] [data-slot="text-shimmer-v2-char"] {
+  display: inline-grid;
+  white-space: pre;
+  font: inherit;
+  letter-spacing: inherit;
+  line-height: inherit;
+}
+
+[data-component="text-shimmer-v2"] [data-slot="text-shimmer-v2-base"],
+[data-component="text-shimmer-v2"] [data-slot="text-shimmer-v2-shimmer"] {
+  grid-area: 1 / 1;
+  white-space: pre;
+  transition: opacity var(--_swap) ease-out;
+  font: inherit;
+  letter-spacing: inherit;
+  line-height: inherit;
+}
+
+[data-component="text-shimmer-v2"] [data-slot="text-shimmer-v2-base"] {
+  color: inherit;
+  opacity: 1;
+}
+
+[data-component="text-shimmer-v2"] [data-slot="text-shimmer-v2-shimmer"] {
+  color: var(--_base-color);
+  opacity: 0;
+}
+
+[data-component="text-shimmer-v2"][data-active="true"] [data-slot="text-shimmer-v2-shimmer"] {
+  opacity: 1;
+}
+
+[data-component="text-shimmer-v2"] [data-slot="text-shimmer-v2-shimmer"][data-run="true"] {
+  animation-name: text-shimmer-v2-sweep;
+  animation-duration: var(--_duration);
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+  animation-fill-mode: both;
+  animation-delay: calc(var(--_step) * var(--_index) * -1);
+  will-change: background-position;
+}
+
+@keyframes text-shimmer-v2-sweep {
+  0% {
+    background-position:
+      100% 0,
+      0 0;
+  }
+  100% {
+    background-position:
+      0% 0,
+      0 0;
+  }
+}
+
+@supports ((-webkit-background-clip: text) or (background-clip: text)) {
+  [data-component="text-shimmer-v2"] [data-slot="text-shimmer-v2-shimmer"] {
+    color: transparent;
+    -webkit-text-fill-color: transparent;
+    background-image: var(--_sweep), var(--_base);
+    background-size:
+      var(--_size) 100%,
+      100% 100%;
+    background-position:
+      100% 0,
+      0 0;
+    background-repeat: no-repeat;
+    -webkit-background-clip: text;
+    background-clip: text;
+  }
+
+  [data-component="text-shimmer-v2"][data-active="true"] [data-slot="text-shimmer-v2-base"] {
+    opacity: 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-component="text-shimmer-v2"] [data-slot="text-shimmer-v2-base"],
+  [data-component="text-shimmer-v2"] [data-slot="text-shimmer-v2-shimmer"] {
+    transition-duration: 0ms;
+  }
+
+  [data-component="text-shimmer-v2"] [data-slot="text-shimmer-v2-shimmer"] {
+    animation: none !important;
+    color: inherit;
+    -webkit-text-fill-color: currentColor;
+    background-image: none;
+  }
+
+  [data-component="text-shimmer-v2"] [data-slot="text-shimmer-v2-base"] {
+    opacity: 1 !important;
+  }
+}

package/src/v2/components/text-shimmer-v2.tsx

@@ -0,0 +1,63 @@
+import { createEffect, createMemo, createSignal, onCleanup, type ValidComponent } from "solid-js"
+import { Dynamic } from "solid-js/web"
+import "./text-shimmer-v2.css"
+
+export const TextShimmerV2 = <T extends ValidComponent = "span">(props: {
+  text: string
+  class?: string
+  as?: T
+  active?: boolean
+  offset?: number
+}) => {
+  const text = createMemo(() => props.text ?? "")
+  const active = createMemo(() => props.active ?? true)
+  const offset = createMemo(() => props.offset ?? 0)
+  const [run, setRun] = createSignal(active())
+  const swap = 220
+  let timer: ReturnType<typeof setTimeout> | undefined
+
+  createEffect(() => {
+    if (timer) {
+      clearTimeout(timer)
+      timer = undefined
+    }
+
+    if (active()) {
+      setRun(true)
+      return
+    }
+
+    timer = setTimeout(() => {
+      timer = undefined
+      setRun(false)
+    }, swap)
+  })
+
+  onCleanup(() => {
+    if (!timer) return
+    clearTimeout(timer)
+  })
+
+  return (
+    <Dynamic
+      component={props.as ?? "span"}
+      data-component="text-shimmer-v2"
+      data-active={active() ? "true" : "false"}
+      class={props.class}
+      aria-label={text()}
+      style={{
+        "--_swap": `${swap}ms`,
+        "--_index": `${offset()}`,
+      }}
+    >
+      <span data-slot="text-shimmer-v2-char">
+        <span data-slot="text-shimmer-v2-base" aria-hidden="true">
+          {text()}
+        </span>
+        <span data-slot="text-shimmer-v2-shimmer" data-run={run() ? "true" : "false"} aria-hidden="true">
+          {text()}
+        </span>
+      </span>
+    </Dynamic>
+  )
+}

package/src/{forms/textarea/textarea.tsx → v2/components/textarea-v2.tsx}

@@ -1,12 +1,12 @@
 import { type ComponentProps, splitProps } from "solid-js"
-import "./textarea.css"
+import "./textarea-v2.css"
 
-export interface TextareaProps extends ComponentProps<"textarea"> {
+export interface TextareaV2Props extends ComponentProps<"textarea"> {
   /** Error styling for the field and value text. */
   invalid?: boolean
 }
 
-export function Textarea(props: TextareaProps) {
+export function TextareaV2(props: TextareaV2Props) {
   const [local, textareaProps] = splitProps(props, ["class", "classList", "invalid", "disabled", "rows"])
 
   return (

package/src/{feedback/toast/toast.tsx → v2/components/toast-v2.tsx}

@@ -4,12 +4,12 @@ import type { ComponentProps, JSX } from "solid-js"
 import { createContext, onCleanup, onMount, splitProps, useContext } from "solid-js"
 import { Portal } from "solid-js/web"
 import { useI18n } from "../../context/i18n"
-import "../../actions/button/button.css"
-import "./toast.css"
+import "./button-v2.css"
+import "./toast-v2.css"
 
-export interface ToastRegionProps extends ToasterProps {}
+export interface ToastV2RegionProps extends ToasterProps {}
 
-function ToastRegion(props: ToastRegionProps) {
+function ToastV2Region(props: ToastV2RegionProps) {
   const i18n = useI18n()
   const [local, rest] = splitProps(props, ["class", "className", "style", "toastOptions", "swipeDirections"])
   onMount(() => {
@@ -67,40 +67,40 @@ function ToastRegion(props: ToastRegionProps) {
   )
 }
 
-const ToastContext = createContext<number>()
+const ToastV2Context = createContext<number>()
 
-export interface ToastRootComponentProps {
+export interface ToastV2RootComponentProps {
   toastId: number
   children?: JSX.Element
 }
 
-function ToastRoot(props: ToastRootComponentProps) {
-  return <ToastContext.Provider value={props.toastId}>{props.children}</ToastContext.Provider>
+function ToastV2Root(props: ToastV2RootComponentProps) {
+  return <ToastV2Context.Provider value={props.toastId}>{props.children}</ToastV2Context.Provider>
 }
 
-function ToastIcon(props: ComponentProps<"div">) {
+function ToastV2Icon(props: ComponentProps<"div">) {
   return <div data-slot="toast-v2-icon" {...props} />
 }
 
-function ToastContent(props: ComponentProps<"div">) {
+function ToastV2Content(props: ComponentProps<"div">) {
   return <div data-slot="toast-v2-content" {...props} />
 }
 
-function ToastTitle(props: ComponentProps<"div">) {
+function ToastV2Title(props: ComponentProps<"div">) {
   return <div data-slot="toast-v2-title" {...props} />
 }
 
-function ToastDescription(props: ComponentProps<"div">) {
+function ToastV2Description(props: ComponentProps<"div">) {
   return <div data-slot="toast-v2-description" {...props} />
 }
 
-function ToastActions(props: ComponentProps<"div">) {
+function ToastV2Actions(props: ComponentProps<"div">) {
   return <div data-slot="toast-v2-actions" {...props} />
 }
 
-function ToastCloseButton(props: ComponentProps<"button">) {
+function ToastV2CloseButton(props: ComponentProps<"button">) {
   const i18n = useI18n()
-  const toastId = useContext(ToastContext)
+  const toastId = useContext(ToastV2Context)
   const [local, rest] = splitProps(props, ["children", "onClick"])
   return (
     <button
@@ -110,7 +110,7 @@ function ToastCloseButton(props: ComponentProps<"button">) {
       {...rest}
       onClick={(event) => {
         if (typeof local.onClick === "function") local.onClick(event)
-        if (!event.defaultPrevented && toastId !== undefined) toaster.dismiss(toastId)
+        if (!event.defaultPrevented && toastId !== undefined) toasterV2.dismiss(toastId)
       }}
     >
       {local.children ?? <CloseIcon />}
@@ -127,19 +127,19 @@ function CloseIcon() {
   )
 }
 
-export const Toast = Object.assign(ToastRoot, {
-  Region: ToastRegion,
-  Icon: ToastIcon,
-  Content: ToastContent,
-  Title: ToastTitle,
-  Description: ToastDescription,
-  Actions: ToastActions,
-  CloseButton: ToastCloseButton,
+export const ToastV2 = Object.assign(ToastV2Root, {
+  Region: ToastV2Region,
+  Icon: ToastV2Icon,
+  Content: ToastV2Content,
+  Title: ToastV2Title,
+  Description: ToastV2Description,
+  Actions: ToastV2Actions,
+  CloseButton: ToastV2CloseButton,
 })
 
 let toastV2Id = 0
 
-export const toaster = {
+export const toasterV2 = {
   show(render: (props: { toastId: number }) => JSX.Element, options?: { duration?: number; persistent?: boolean }) {
     const toastId = --toastV2Id
     toast.custom((id) => render({ toastId: Number(id) }), {
@@ -152,43 +152,43 @@ export const toaster = {
   },
   dismiss(toastId?: number) {
     if (toastId === undefined) {
-      activeToastByKey.clear()
-      activeToastById.clear()
+      activeToastV2ByKey.clear()
+      activeToastV2ById.clear()
     } else {
-      releaseToast(activeToastById.get(toastId))
+      releaseToastV2(activeToastV2ById.get(toastId))
     }
     return toast.dismiss(toastId)
   },
 }
 
-export interface ToastAction {
+export interface ToastV2Action {
   label: string
   variant?: "primary" | "secondary"
   onClick: "dismiss" | (() => void)
 }
 
-export interface ToastOptions {
+export interface ToastV2Options {
   title?: string
   description?: string
   icon?: JSX.Element
   variant?: "default" | "success" | "error" | "loading"
   duration?: number
   persistent?: boolean
-  actions?: ToastAction[]
+  actions?: ToastV2Action[]
 }
 
-interface ActiveToast {
+interface ActiveToastV2 {
   id: number
   key: string
-  options: ToastOptions
+  options: ToastV2Options
   actions?: JSX.Element
 }
 
-const activeToastByKey = new Map<string, ActiveToast>()
-const activeToastById = new Map<number, ActiveToast>()
+const activeToastV2ByKey = new Map<string, ActiveToastV2>()
+const activeToastV2ById = new Map<number, ActiveToastV2>()
 
-export function showToast(options: ToastOptions | string) {
-  const opts: ToastOptions = typeof options === "string" ? { description: options } : options
+export function showToastV2(options: ToastV2Options | string) {
+  const opts: ToastV2Options = typeof options === "string" ? { description: options } : options
   const key = JSON.stringify({
     title: opts.title,
     description: opts.description,
@@ -197,29 +197,29 @@ export function showToast(options: ToastOptions | string) {
     persistent: opts.persistent,
     actions: opts.actions?.map((action) => [action.label, action.variant]),
   })
-  const active = activeToastByKey.get(key)
+  const active = activeToastV2ByKey.get(key)
   const toasts = toast.getToasts()
 
   if (active && toasts.at(-1)?.id === active.id) {
     active.options = opts
-    publishToast(active)
-    pulseToast(active.id)
+    publishToastV2(active)
+    pulseToastV2(active.id)
     return active.id
   }
 
-  if (active && toasts.some((item) => item.id === active.id)) toaster.dismiss(active.id)
-  releaseToast(active)
+  if (active && toasts.some((item) => item.id === active.id)) toasterV2.dismiss(active.id)
+  releaseToastV2(active)
 
-  const entry: ActiveToast = { id: --toastV2Id, key, options: opts }
-  entry.actions = createToastActions(entry)
-  activeToastByKey.set(key, entry)
-  activeToastById.set(entry.id, entry)
-  publishToast(entry)
+  const entry: ActiveToastV2 = { id: --toastV2Id, key, options: opts }
+  entry.actions = createToastV2Actions(entry)
+  activeToastV2ByKey.set(key, entry)
+  activeToastV2ById.set(entry.id, entry)
+  publishToastV2(entry)
   return entry.id
 }
 
-function publishToast(entry: ActiveToast) {
-  const release = () => releaseToast(entry)
+function publishToastV2(entry: ActiveToastV2) {
+  const release = () => releaseToastV2(entry)
   toast(entry.options.title ?? "", {
     id: entry.id,
     description: entry.options.description,
@@ -235,12 +235,10 @@ function publishToast(entry: ActiveToast) {
   })
 }
 
-function createToastActions(entry: ActiveToast) {
+function createToastV2Actions(entry: ActiveToastV2) {
   if (!entry.options.actions?.length) return undefined
   return (
-    <Toast.Actions>
-      {/* Static map, not <For>: this JSX is created imperatively outside any Solid
-          root, where a <For> computation would never be disposed. */}
+    <ToastV2.Actions>
       {entry.options.actions.map((action, index) => (
         <button
           type="button"
@@ -251,17 +249,17 @@ function createToastActions(entry: ActiveToast) {
           onClick={() => {
             const onClick = entry.options.actions?.[index]?.onClick
             if (typeof onClick === "function") onClick()
-            toaster.dismiss(entry.id)
+            toasterV2.dismiss(entry.id)
           }}
         >
           {action.label}
         </button>
       ))}
-    </Toast.Actions>
+    </ToastV2.Actions>
   )
 }
 
-function pulseToast(toastId: number) {
+function pulseToastV2(toastId: number) {
   if (typeof document === "undefined" || typeof requestAnimationFrame === "undefined") return
   requestAnimationFrame(() => {
     const element = document.querySelector<HTMLElement>(`[data-testid="toast-v2-${toastId}"]`)
@@ -270,13 +268,13 @@ function pulseToast(toastId: number) {
   })
 }
 
-function releaseToast(entry: ActiveToast | undefined) {
+function releaseToastV2(entry: ActiveToastV2 | undefined) {
   if (!entry) return
-  if (activeToastByKey.get(entry.key) === entry) activeToastByKey.delete(entry.key)
-  if (activeToastById.get(entry.id) === entry) activeToastById.delete(entry.id)
+  if (activeToastV2ByKey.get(entry.key) === entry) activeToastV2ByKey.delete(entry.key)
+  if (activeToastV2ById.get(entry.id) === entry) activeToastV2ById.delete(entry.id)
 }
 
-export interface ToastPromiseOptions<T, U = unknown> {
+export interface ToastV2PromiseOptions<T, U = unknown> {
   loading?: JSX.Element
   success?: (data: T) => JSX.Element
   error?: (error: U) => JSX.Element