@opencode-ai/ui 0.0.0-beta-202606251302

package/src/v2/components/segmented-control-v2.css

@@ -0,0 +1,80 @@
+[data-slot="segmented-control-v2"].segmented-control-v2--full-width {
+  width: 100%;
+}
+
+[data-slot="segmented-control-v2"] {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 0;
+  width: 232px;
+  max-width: 100%;
+  height: 28px;
+  background: var(--v2-background-bg-layer-01);
+  border: none;
+  border-radius: 6px;
+  box-shadow: 0 0 0 0.5px var(--v2-border-border-base);
+  flex: none;
+}
+
+[data-slot="segmented-control-v2-item"] {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 0 12px;
+  flex: 1 1 0;
+  min-width: 0;
+  height: 28px;
+  margin: 0;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  box-shadow: none;
+  cursor: pointer;
+  font-style: normal;
+  font-weight: 440;
+  font-size: 13px;
+  line-height: 100%;
+  letter-spacing: -0.04px;
+  font-variant-numeric: tabular-nums;
+  font-variation-settings: "slnt" 0;
+  color: var(--v2-text-text-muted);
+  transition:
+    background-color 0.12s ease,
+    color 0.12s ease,
+    box-shadow 0.12s ease;
+}
+
+[data-slot="segmented-control-v2-item"]:where(:disabled) {
+  cursor: not-allowed;
+  opacity: 0.45;
+}
+
+[data-slot="segmented-control-v2-item"]:where(:focus-visible) {
+  outline: 2px solid var(--v2-border-border-focus);
+  outline-offset: 1px;
+  z-index: 2;
+}
+
+[data-slot="segmented-control-v2-item"]:where([data-pressed]) {
+  background: var(--v2-background-bg-base);
+  color: var(--v2-text-text-base);
+  box-shadow: 0 0 0 0.5px var(--v2-border-border-strong);
+  z-index: 1;
+}
+
+[data-slot="segmented-control-v2-item-label"] {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  padding: 0;
+  min-width: 0;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

package/src/v2/components/segmented-control-v2.tsx

@@ -0,0 +1,208 @@
+import {
+  createContext,
+  createMemo,
+  createSignal,
+  mergeProps,
+  splitProps,
+  useContext,
+  type Accessor,
+  type JSX,
+  type ParentProps,
+} from "solid-js"
+import type { ComponentProps } from "solid-js"
+import "./segmented-control-v2.css"
+
+type OnChange = (value: string | null) => void
+
+type SegmentedControlContextValue = {
+  selected: Accessor<string | null>
+  groupDisabled: Accessor<boolean>
+  select: (value: string) => void
+  clearIfAllowed: (value: string) => void
+  focusNext: (from: HTMLButtonElement, direction: 1 | -1) => void
+}
+
+const SegmentedControlContext = createContext<SegmentedControlContextValue>()
+
+function useSegmentedControlContext() {
+  const ctx = useContext(SegmentedControlContext)
+  if (!ctx) throw new Error("SegmentedControlItemV2 must be used inside SegmentedControlV2")
+  return ctx
+}
+
+export type SegmentedControlV2Props = Omit<ComponentProps<"div">, "onChange"> &
+  ParentProps<{
+    /** Selected value when controlled (including `null` when empty). Omit key for uncontrolled. */
+    value?: string | null
+    /** Initial value when uncontrolled. */
+    defaultValue?: string
+    onChange?: OnChange
+    /** When true, clicking the active segment clears selection (`onChange(null)`). Default false. */
+    allowDeselect?: boolean
+    disabled?: boolean
+  }>
+
+export function SegmentedControlV2(props: SegmentedControlV2Props) {
+  const isControlled = createMemo(() => Object.hasOwn(props as object, "value"))
+  const merged = mergeProps({ allowDeselect: false, disabled: false }, props)
+  const [local, rest] = splitProps(merged, [
+    "class",
+    "classList",
+    "children",
+    "value",
+    "defaultValue",
+    "onChange",
+    "allowDeselect",
+    "disabled",
+    "ref",
+  ])
+
+  const [internal, setInternal] = createSignal<string | null>(local.defaultValue ?? null)
+
+  const selected = createMemo(() => (isControlled() ? (local.value ?? null) : internal()))
+
+  const setSelected = (next: string | null) => {
+    if (!isControlled()) setInternal(next)
+    local.onChange?.(next)
+  }
+
+  const select = (value: string) => {
+    setSelected(value)
+  }
+
+  const clearIfAllowed = (value: string) => {
+    if (!local.allowDeselect || selected() !== value) return
+    setSelected(null)
+  }
+
+  const focusNext = (from: HTMLButtonElement, direction: 1 | -1) => {
+    const root = from.closest(`[data-slot="segmented-control-v2"]`)
+    if (!root) return
+    const buttons = Array.from(
+      root.querySelectorAll<HTMLButtonElement>(`button[data-slot="segmented-control-v2-item"]`),
+    ).filter((b) => !b.disabled)
+    const i = buttons.indexOf(from)
+    const next = buttons[i + direction]
+    next?.focus()
+  }
+
+  const ctx: SegmentedControlContextValue = {
+    selected,
+    groupDisabled: () => !!local.disabled,
+    select,
+    clearIfAllowed,
+    focusNext,
+  }
+
+  const assignRef = (el: HTMLDivElement | undefined) => {
+    const r = local.ref
+    if (typeof r === "function") (r as (el: HTMLDivElement | undefined) => void)(el)
+    else if (r != null && typeof r === "object" && "value" in r) (r as { value: HTMLDivElement | undefined }).value = el
+  }
+
+  return (
+    <SegmentedControlContext.Provider value={ctx}>
+      <div
+        {...rest}
+        ref={assignRef}
+        role="group"
+        data-component="segmented-control-v2"
+        data-slot="segmented-control-v2"
+        classList={{
+          ...local.classList,
+          [local.class ?? ""]: !!local.class,
+        }}
+      >
+        {local.children}
+      </div>
+    </SegmentedControlContext.Provider>
+  )
+}
+
+export type SegmentedControlItemV2Props = Omit<ComponentProps<"button">, "type" | "children"> &
+  ParentProps<{
+    value: string
+    children: JSX.Element
+  }>
+
+function invokeButtonHandler<E extends Event>(
+  handler: JSX.EventHandlerUnion<HTMLButtonElement, E> | undefined,
+  e: E & { currentTarget: HTMLButtonElement },
+) {
+  if (typeof handler === "function") (handler as (ev: typeof e) => void)(e)
+}
+
+export function SegmentedControlItemV2(props: SegmentedControlItemV2Props) {
+  const merged = mergeProps({ disabled: false }, props)
+  const [local, rest] = splitProps(merged, [
+    "class",
+    "classList",
+    "children",
+    "value",
+    "disabled",
+    "onClick",
+    "onKeyDown",
+  ])
+  const ctx = useSegmentedControlContext()
+
+  const pressed = createMemo(() => ctx.selected() === local.value)
+  const disabled = createMemo(() => ctx.groupDisabled() || !!local.disabled)
+
+  const onClick: JSX.EventHandlerUnion<HTMLButtonElement, MouseEvent> = (e) => {
+    invokeButtonHandler(local.onClick, e)
+    if (e.defaultPrevented || disabled()) return
+    if (pressed()) ctx.clearIfAllowed(local.value)
+    else ctx.select(local.value)
+  }
+
+  const onKeyDown: JSX.EventHandlerUnion<HTMLButtonElement, KeyboardEvent> = (e) => {
+    invokeButtonHandler(local.onKeyDown, e)
+    if (e.defaultPrevented || disabled()) return
+    const t = e.currentTarget
+
+    if (e.key === "ArrowRight") {
+      e.preventDefault()
+      ctx.focusNext(t, 1)
+    } else if (e.key === "ArrowLeft") {
+      e.preventDefault()
+      ctx.focusNext(t, -1)
+    }
+
+    // accessibility stuff
+    else if (e.key === "Home") {
+      e.preventDefault()
+      const root = t.closest(`[data-slot="segmented-control-v2"]`)
+      const first = root?.querySelector<HTMLButtonElement>(
+        `button[data-slot="segmented-control-v2-item"]:not(:disabled)`,
+      )
+      first?.focus()
+    } else if (e.key === "End") {
+      e.preventDefault()
+      const root = t.closest(`[data-slot="segmented-control-v2"]`)
+      const buttons = root?.querySelectorAll<HTMLButtonElement>(
+        `button[data-slot="segmented-control-v2-item"]:not(:disabled)`,
+      )
+      const last = buttons?.[buttons.length - 1]
+      last?.focus()
+    }
+  }
+
+  return (
+    <button
+      {...rest}
+      type="button"
+      data-slot="segmented-control-v2-item"
+      data-pressed={pressed() ? "" : undefined}
+      aria-pressed={pressed()}
+      disabled={disabled()}
+      classList={{
+        ...local.classList,
+        [local.class ?? ""]: !!local.class,
+      }}
+      onClick={onClick}
+      onKeyDown={onKeyDown}
+    >
+      <span data-slot="segmented-control-v2-item-label">{local.children}</span>
+    </button>
+  )
+}

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;
+}