@opencode-ai/ui 0.0.0 → 1.17.13

package/src/v2/components/select-v2.css

@@ -0,0 +1,285 @@
+@import "./menu-v2.css";
+
+/* Above modal dialogs (z-index 50); matches legacy select-content. */
+[data-popper-positioner]:has([data-slot="select-v2-content"]) {
+  z-index: 60;
+}
+
+/* Dropdown surface (Type=menu) — overrides shared menu-v2 defaults for selects only. */
+[data-component="menu-v2-content"][data-slot="select-v2-content"] {
+  padding: 0;
+  min-width: 160px;
+  max-width: 23rem;
+  overflow: hidden;
+  z-index: 60;
+  pointer-events: auto;
+  background: var(--v2-background-bg-layer-01);
+  border-radius: 6px;
+  box-shadow: var(--v2-elevation-floating);
+  transform-origin: top center;
+  animation: select-v2-content-in 120ms ease-out;
+}
+
+[data-component="menu-v2-content"][data-slot="select-v2-content"][data-closed] {
+  animation: select-v2-content-out 80ms ease-in forwards;
+}
+
+@keyframes select-v2-content-in {
+  from {
+    opacity: 0;
+    transform: translateY(-2px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes select-v2-content-out {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(-2px);
+  }
+}
+
+/* Trigger shell — aligned with text-input-v2 */
+[data-component="select-v2"] {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+  padding: 0 6px 0 0;
+  gap: 8px;
+  width: 280px;
+  height: 28px;
+  border: 0;
+  border-radius: 6px;
+  outline: 1px solid transparent;
+  outline-offset: 0;
+  background:
+    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;
+  transition:
+    background 85ms ease-out,
+    outline-color 85ms ease-out,
+    box-shadow 85ms ease-out;
+}
+
+[data-component="select-v2"][data-appearance="large"] {
+  height: 32px;
+  padding: 0 8px 0 0;
+}
+
+[data-component="select-v2"]:where(:hover):not([data-disabled], [data-invalid]):not(:focus-within):not(
+    [data-expanded]
+  ) {
+  background:
+    linear-gradient(0deg, var(--v2-overlay-simple-overlay-hover), var(--v2-overlay-simple-overlay-hover)),
+    linear-gradient(180deg, var(--v2-alpha-light-2) 0%, var(--v2-alpha-light-0) 100%), var(--v2-background-bg-base);
+}
+
+[data-component="select-v2"]:where([data-expanded]):not([data-disabled], [data-invalid]) {
+  background:
+    linear-gradient(0deg, var(--v2-overlay-simple-overlay-hover), var(--v2-overlay-simple-overlay-hover)),
+    linear-gradient(180deg, var(--v2-alpha-light-2) 0%, var(--v2-alpha-light-0) 100%), var(--v2-background-bg-base);
+  outline-color: transparent;
+}
+
+[data-component="select-v2"]:where(:focus-within):not([data-disabled], [data-invalid]):not([data-expanded]) {
+  outline-color: var(--v2-border-border-focus);
+  box-shadow: none;
+}
+
+[data-component="select-v2"]:where([data-invalid]):not([data-disabled]) {
+  outline-color: var(--v2-state-fg-danger);
+  box-shadow: none;
+}
+
+[data-component="select-v2"]:where([data-disabled]) {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+[data-component="select-v2"] [data-slot="select-v2-value"] {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  align-self: stretch;
+  padding: 0;
+  min-width: 0;
+  flex: 1 1 auto;
+  min-height: 0;
+  cursor: default;
+}
+
+[data-component="select-v2"] [data-slot="select-v2-value-text"] {
+  display: block;
+  width: 100%;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding: 0 0 0 8px;
+  margin: 0;
+  border: 0;
+  background: transparent;
+  outline: none;
+  text-align: left;
+  font-style: normal;
+  font-weight: 440;
+  font-size: 13px;
+  line-height: 16px;
+  letter-spacing: -0.04px;
+  color: var(--v2-text-text-base);
+  font-variation-settings: "slnt" 0;
+  cursor: default;
+}
+
+[data-component="select-v2"] [data-slot="select-v2-value-text"][data-placeholder-shown] {
+  color: var(--v2-text-text-faint);
+}
+
+[data-component="select-v2"][data-numeric] [data-slot="select-v2-value-text"] {
+  font-variant-numeric: tabular-nums;
+}
+
+[data-component="select-v2"]:where([data-invalid]):not([data-disabled]) [data-slot="select-v2-value-text"] {
+  color: var(--v2-state-fg-danger);
+}
+
+[data-component="select-v2"] [data-slot="select-v2-chevron"] {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  align-self: center;
+  flex: none;
+  width: 20px;
+  height: 20px;
+  padding: 2px;
+  gap: 3px;
+  border: 0;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--v2-icon-icon-muted);
+  pointer-events: none;
+}
+
+[data-component="select-v2"] [data-slot="select-v2-chevron"] svg {
+  display: block;
+  flex: none;
+  transform: rotate(180deg);
+  transform-origin: 50% 50%;
+}
+
+[data-component="select-v2"][data-expanded] [data-slot="select-v2-chevron"] svg {
+  transform: rotate(0deg);
+}
+
+/* Compact trigger for settings rows and similar inline contexts. */
+[data-component="select-v2"][data-appearance="inline"] {
+  width: fit-content;
+  max-width: 100%;
+  height: 24px;
+  padding: 4px 4px 4px 8px;
+  gap: 4px;
+  border-radius: 4px;
+  background: transparent;
+  box-shadow: none;
+  outline: none;
+  align-self: auto;
+}
+
+[data-component="select-v2"][data-appearance="inline"]:where(:hover):not([data-disabled], [data-invalid]):not(
+    :focus-within
+  ):not([data-expanded]) {
+  background: var(--v2-overlay-simple-overlay-hover);
+}
+
+[data-component="select-v2"][data-appearance="inline"]:where([data-expanded]):not([data-disabled], [data-invalid]) {
+  background: var(--v2-overlay-simple-overlay-hover);
+  outline: none;
+  box-shadow: none;
+}
+
+[data-component="select-v2"][data-appearance="inline"]:where(:active):not([data-disabled], [data-invalid]):not(
+    [data-expanded]
+  ) {
+  background: var(--v2-overlay-simple-overlay-pressed);
+}
+
+[data-component="select-v2"][data-appearance="inline"] [data-slot="select-v2-value-text"] {
+  padding: 0;
+  font-weight: 530;
+}
+
+[data-component="select-v2"][data-appearance="inline"] [data-slot="select-v2-chevron"] {
+  width: 16px;
+  height: 16px;
+  padding: 0;
+}
+
+/* Listbox inside menu surface */
+[data-component="menu-v2-content"][data-slot="select-v2-content"] [data-slot="select-v2-listbox"] {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  margin: 0;
+  padding: 4px;
+  list-style: none;
+  min-width: 0;
+  width: 100%;
+  max-height: 12rem;
+  overflow-x: hidden;
+  overflow-y: auto;
+  outline: none;
+  white-space: nowrap;
+
+  &:focus {
+    outline: none;
+  }
+
+  > *:not([role="presentation"]) + *:not([role="presentation"]) {
+    margin-top: 2px;
+  }
+}
+
+[data-slot="select-v2-listbox"] [data-component="menu-v2-item"],
+[data-slot="select-v2-listbox"] [data-slot="menu-v2-group-label"] {
+  flex: none;
+}
+
+[data-slot="select-v2-listbox"] [data-component="menu-v2-item"] {
+  --menu-v2-fg: var(--v2-text-text-base);
+  --menu-v2-fg-muted: var(--v2-text-text-faint);
+  --menu-v2-fg-subtle: var(--v2-text-text-muted);
+  --menu-v2-icon: var(--v2-icon-icon-base);
+  --menu-v2-accent: var(--v2-text-text-accent);
+  --menu-v2-badge-bg: var(--v2-background-bg-layer-02);
+  --menu-v2-badge-border: var(--v2-border-border-base);
+  --menu-v2-hover: var(--v2-overlay-simple-overlay-hover);
+}
+
+/* Listbox uses data-selected; menu item CSS uses data-checked — mirror accent */
+[data-slot="select-v2-listbox"] [data-component="menu-v2-item"][data-selected] [data-slot="menu-v2-item-content"] {
+  font-weight: 530;
+  color: var(--menu-v2-accent);
+}
+
+[data-slot="select-v2-listbox"] [data-component="menu-v2-item"][data-selected] [data-slot="menu-v2-item-indicator"] {
+  color: var(--menu-v2-accent);
+}
+
+[data-slot="select-v2-listbox"]
+  [data-component="menu-v2-item"]:not([data-selected])
+  [data-slot="menu-v2-item-indicator"]
+  svg {
+  visibility: hidden;
+}

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

@@ -0,0 +1,208 @@
+import { Select as Kobalte } from "@kobalte/core/select"
+import { Show, createMemo, onCleanup, splitProps, type ComponentProps, type JSX } from "solid-js"
+import "./select-v2.css"
+
+function groupOptions<T>(options: T[], groupBy?: (x: T) => string): { category: string; options: T[] }[] {
+  if (!groupBy) {
+    return [{ category: "", options }]
+  }
+  const map = new Map<string, T[]>()
+  for (const opt of options) {
+    const key = groupBy(opt)
+    const arr = map.get(key)
+    if (arr) arr.push(opt)
+    else map.set(key, [opt])
+  }
+  return [...map.entries()].map(([category, opts]) => ({ category, options: opts }))
+}
+
+const ChevronDown = () => (
+  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+    <path
+      d="M11 9.5L8 6.5L5 9.5"
+      stroke="currentColor"
+      stroke-width="1"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+)
+
+const CheckSmall = () => (
+  <svg width="14" height="14" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+    <path
+      d="M3.53564 8.17857L6.39279 11.75L12.4642 4.25"
+      stroke="currentColor"
+      stroke-width="1"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+)
+
+export type SelectV2Props<T> = Omit<
+  ComponentProps<typeof Kobalte<T, { category: string; options: T[] }>>,
+  "value" | "onSelect" | "children" | "options" | "itemComponent" | "sectionComponent" | "defaultValue" | "multiple"
+> & {
+  placeholder?: string
+  options: T[]
+  /** Selected option (single selection). */
+  current?: T
+  value?: (x: T) => string
+  label?: (x: T) => string
+  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 function SelectV2<T>(props: SelectV2Props<T>) {
+  const [local, others] = splitProps(props, [
+    "class",
+    "classList",
+    "placeholder",
+    "options",
+    "current",
+    "value",
+    "label",
+    "groupBy",
+    "onSelect",
+    "onHighlight",
+    "onOpenChange",
+    "children",
+    "appearance",
+    "invalid",
+    "numeric",
+    "disabled",
+    "valueClass",
+    "placement",
+    "gutter",
+    "sameWidth",
+    "flip",
+    "slide",
+    "fitViewport",
+  ])
+
+  const inline = () => (local.appearance ?? "base") === "inline"
+
+  const state: { key?: string; cleanup?: void | (() => void) } = {}
+
+  const stop = () => {
+    state.cleanup?.()
+    state.cleanup = undefined
+    state.key = undefined
+  }
+
+  const keyFor = (item: T) => (local.value ? local.value(item) : String(item as string))
+
+  const move = (item: T | undefined) => {
+    if (!local.onHighlight) return
+    if (!item) {
+      stop()
+      return
+    }
+    const key = keyFor(item)
+    if (state.key === key) return
+    state.cleanup?.()
+    state.cleanup = local.onHighlight(item)
+    state.key = key
+  }
+
+  onCleanup(stop)
+
+  const grouped = createMemo(() => groupOptions(local.options, local.groupBy))
+
+  return (
+    <Kobalte<T, { category: string; options: T[] }>
+      {...others}
+      multiple={false}
+      disabled={local.disabled}
+      data-component="select-v2-root"
+      placement={local.placement ?? (inline() ? "bottom-end" : "bottom-start")}
+      gutter={local.gutter ?? 4}
+      sameWidth={local.sameWidth ?? !inline()}
+      flip={local.flip ?? true}
+      slide={local.slide ?? true}
+      fitViewport={local.fitViewport ?? false}
+      value={local.current}
+      options={grouped()}
+      optionValue={(x) => (local.value ? local.value(x) : String(x as string))}
+      optionTextValue={(x) => (local.label ? local.label(x) : String(x as string))}
+      optionGroupChildren="options"
+      placeholder={local.placeholder}
+      sectionComponent={(sectionProps) => (
+        <Kobalte.Section>
+          <Show when={sectionProps.section.rawValue.category}>
+            <div data-slot="menu-v2-group-label">{sectionProps.section.rawValue.category}</div>
+          </Show>
+        </Kobalte.Section>
+      )}
+      itemComponent={(itemProps) => (
+        <Kobalte.Item
+          {...itemProps}
+          data-component="menu-v2-item"
+          onPointerEnter={() => move(itemProps.item.rawValue)}
+          onPointerMove={() => move(itemProps.item.rawValue)}
+          onFocus={() => move(itemProps.item.rawValue)}
+        >
+          <Kobalte.ItemLabel data-slot="menu-v2-item-content" as="span">
+            {local.children
+              ? local.children(itemProps.item.rawValue)
+              : local.label
+                ? local.label(itemProps.item.rawValue)
+                : String(itemProps.item.rawValue as string)}
+          </Kobalte.ItemLabel>
+          <Kobalte.ItemIndicator data-slot="menu-v2-item-indicator" forceMount>
+            <CheckSmall />
+          </Kobalte.ItemIndicator>
+        </Kobalte.Item>
+      )}
+      onChange={(next) => {
+        const v = next == null ? null : Array.isArray(next) ? ((next[0] as T) ?? null) : (next as T)
+        local.onSelect?.(v)
+        stop()
+      }}
+      onOpenChange={(open) => {
+        local.onOpenChange?.(open)
+        if (!open) stop()
+      }}
+    >
+      <Kobalte.Trigger
+        as="div"
+        data-component="select-v2"
+        data-appearance={local.appearance ?? "base"}
+        data-invalid={local.invalid ? "" : undefined}
+        data-numeric={local.numeric ? "" : undefined}
+        disabled={local.disabled}
+        data-disabled={local.disabled ? "" : undefined}
+        classList={{
+          ...local.classList,
+          [local.class ?? ""]: !!local.class,
+        }}
+      >
+        <div data-slot="select-v2-value">
+          <Kobalte.Value<T> data-slot="select-v2-value-text" class={local.valueClass}>
+            {(st) => {
+              const selected = st.selectedOption()
+              if (local.label && selected != null) return local.label(selected)
+              return selected != null ? (selected as string) : ""
+            }}
+          </Kobalte.Value>
+        </div>
+        <span data-slot="select-v2-chevron" aria-hidden="true">
+          <ChevronDown />
+        </span>
+      </Kobalte.Trigger>
+      <Kobalte.Portal>
+        <Kobalte.Content data-component="menu-v2-content" data-slot="select-v2-content">
+          <Kobalte.Listbox data-slot="select-v2-listbox" />
+        </Kobalte.Content>
+      </Kobalte.Portal>
+    </Kobalte>
+  )
+}

package/src/v2/components/switch-v2.css

@@ -0,0 +1,154 @@
+[data-component="switch"] {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: default;
+
+  [data-slot="switch-input"] {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+  }
+
+  [data-slot="switch-control"] {
+    box-sizing: border-box;
+    display: inline-flex;
+    justify-content: flex-start;
+    align-items: center;
+    padding: 2px;
+    width: 24px;
+    height: 16px;
+    flex-shrink: 0;
+    border-radius: 4px;
+    border: none;
+    background:
+      linear-gradient(180deg, var(--v2-alpha-light-0) 0%, var(--v2-alpha-light-20) 100%),
+      var(--v2-background-bg-layer-03);
+    box-shadow: var(--v2-elevation-switch-off);
+    transition:
+      background 90ms ease-out,
+      opacity 90ms ease-out,
+      outline-color 90ms ease-out;
+  }
+
+  [data-slot="switch-thumb"] {
+    box-sizing: border-box;
+    width: 12px;
+    height: 12px;
+    transform: translateX(0);
+    border-radius: 2px;
+    border: 0.5px solid var(--v2-overlay-gradient-depth-overlay-depth-top);
+    background:
+      linear-gradient(
+        180deg,
+        var(--v2-overlay-gradient-depth-overlay-depth-top) 0%,
+        var(--v2-overlay-gradient-depth-overlay-depth-bot) 100%
+      ),
+      var(--v2-grey-200);
+    box-shadow: var(--v2-elevation-elements);
+    transition:
+      transform 90ms ease-out,
+      width 90ms ease-out,
+      border-radius 90ms,
+      background 90ms;
+  }
+
+  [data-slot="switch-label"] {
+    display: inline-flex;
+    align-items: center;
+    height: 16px;
+    user-select: none;
+    color: var(--v2-text-text-faint);
+    font-size: 11px;
+    font-style: normal;
+    font-weight: 440;
+    line-height: 16px;
+    letter-spacing: 0.05px;
+    font-variation-settings: "slnt" 0;
+  }
+
+  [data-slot="switch-error"] {
+    color: var(--v2-state-fg-danger);
+    font-size: 12px;
+    font-weight: var(--font-weight-regular);
+    line-height: var(--line-height-normal);
+    letter-spacing: var(--letter-spacing-normal);
+  }
+
+  [data-slot="switch-error"]:empty {
+    display: none;
+  }
+
+  &:hover:not([data-disabled], [data-readonly]) [data-slot="switch-control"] {
+    background:
+      linear-gradient(0deg, var(--v2-overlay-simple-overlay-hover), var(--v2-overlay-simple-overlay-hover)),
+      linear-gradient(180deg, var(--v2-alpha-light-0) 0%, var(--v2-alpha-light-20) 100%),
+      var(--v2-background-bg-layer-03);
+  }
+
+  &:hover:not([data-disabled], [data-readonly]) [data-slot="switch-thumb"] {
+    width: 13px;
+    border-radius: 3px;
+  }
+
+  &:not([data-readonly]) [data-slot="switch-input"]:focus-visible ~ [data-slot="switch-control"] {
+    outline: 2px solid var(--v2-border-border-focus);
+    outline-offset: 1px;
+  }
+
+  &[data-checked] [data-slot="switch-control"] {
+    background:
+      linear-gradient(180deg, var(--v2-alpha-light-0) 0%, var(--v2-alpha-light-10) 100%), var(--v2-background-bg-accent);
+    box-shadow: var(--v2-elevation-switch-on);
+  }
+
+  &[data-checked] [data-slot="switch-thumb"] {
+    transform: translateX(8px);
+    border-radius: 2px;
+    background:
+      linear-gradient(
+        180deg,
+        var(--v2-overlay-gradient-depth-overlay-depth-top) 0%,
+        var(--v2-overlay-gradient-depth-overlay-depth-bot) 100%
+      ),
+      var(--v2-grey-300);
+  }
+
+  &[data-checked]:hover:not([data-disabled], [data-readonly]) [data-slot="switch-control"] {
+    background:
+      linear-gradient(
+        0deg,
+        var(--v2-overlay-simple-overlay-contrast-hover),
+        var(--v2-overlay-simple-overlay-contrast-hover)
+      ),
+      linear-gradient(180deg, var(--v2-alpha-light-0) 0%, var(--v2-alpha-light-10) 100%), var(--v2-background-bg-accent);
+  }
+
+  &[data-checked]:hover:not([data-disabled], [data-readonly]) [data-slot="switch-thumb"] {
+    transform: translateX(7px);
+  }
+
+  &[data-disabled] {
+    cursor: not-allowed;
+  }
+
+  &[data-disabled] [data-slot="switch-control"] {
+    opacity: 0.5;
+  }
+
+  &[data-invalid] [data-slot="switch-control"] {
+    border-color: var(--v2-state-border-danger);
+  }
+
+  &[data-readonly] {
+    cursor: default;
+    pointer-events: none;
+  }
+}

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

@@ -0,0 +1,28 @@
+import { Switch as Kobalte } from "@kobalte/core/switch"
+import { Show, splitProps } from "solid-js"
+import type { ComponentProps, ParentProps } from "solid-js"
+import "./switch-v2.css"
+
+export interface SwitchProps extends ParentProps<ComponentProps<typeof Kobalte>> {
+  hideLabel?: boolean
+}
+
+export function Switch(props: SwitchProps) {
+  const [local, others] = splitProps(props, ["children", "class", "hideLabel"])
+  return (
+    <Kobalte {...others} class={local.class} data-component="switch">
+      <Kobalte.Input data-slot="switch-input" />
+      <Show when={local.children}>
+        {(label) => (
+          <Kobalte.Label data-slot="switch-label" classList={{ "sr-only": local.hideLabel }}>
+            {label()}
+          </Kobalte.Label>
+        )}
+      </Show>
+      <Kobalte.Control data-slot="switch-control">
+        <Kobalte.Thumb data-slot="switch-thumb" />
+      </Kobalte.Control>
+      <Kobalte.ErrorMessage data-slot="switch-error" />
+    </Kobalte>
+  )
+}