@opencode/ui 0.0.0-beta-19275

package/src/forms/field/field.css

@@ -0,0 +1,94 @@
+[data-component="field-v2"] {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
+  width: 100%;
+  min-width: 0;
+}
+
+[data-component="field-v2"] [data-slot="field-v2-label"] {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  align-self: stretch;
+  gap: 4px;
+  min-height: 16px;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-style: normal;
+  font-weight: 530;
+  font-size: 13px;
+  line-height: var(--line-height-compact);
+  letter-spacing: -0.04px;
+  color: var(--v2-text-text-base);
+  font-variation-settings: "slnt" 0;
+  cursor: default;
+  user-select: none;
+}
+
+[data-component="field-v2"] [data-slot="field-v2-label-text"] {
+  display: inline-flex;
+  align-items: center;
+}
+
+[data-component="field-v2"] [data-slot="field-v2-label"] [data-component="tooltip-v2-trigger"] {
+  display: inline-flex;
+  flex: none;
+  width: 16px;
+  height: 16px;
+}
+
+[data-component="field-v2"] [data-slot="field-v2-label-info"] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  width: 16px;
+  height: 16px;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  color: var(--v2-icon-icon-muted);
+  cursor: pointer;
+  outline: none;
+}
+
+[data-component="field-v2"] [data-slot="field-v2-label-info"]:is(:hover, [data-state="hover"]) {
+  color: var(--v2-text-text-base);
+}
+
+[data-component="field-v2"] [data-slot="field-v2-label-info"]:focus {
+  outline: none;
+}
+
+[data-component="field-v2"] [data-slot="field-v2-label-info"]:focus-visible {
+  outline: 2px solid var(--v2-border-border-focus);
+  outline-offset: 1px;
+  border-radius: 2px;
+}
+
+[data-component="field-v2"] [data-slot="field-v2-prefix"],
+[data-component="field-v2"] [data-slot="field-v2-suffix"] {
+  align-self: stretch;
+  width: 100%;
+  min-height: 11px;
+  font-style: normal;
+  font-weight: 440;
+  font-size: 11px;
+  line-height: 1;
+  letter-spacing: 0.05px;
+  color: var(--v2-text-text-muted);
+  font-variation-settings: "slnt" 0;
+  user-select: none;
+}
+
+[data-component="field-v2"] [data-slot="field-v2-control"] {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  width: 100%;
+  min-width: 0;
+}

package/src/forms/field/field.tsx

@@ -0,0 +1,263 @@
+import {
+  createContext,
+  createEffect,
+  createSignal,
+  createUniqueId,
+  onCleanup,
+  onMount,
+  splitProps,
+  useContext,
+  Show,
+  type ComponentProps,
+  type ParentProps,
+} from "solid-js"
+import { Tooltip } from "@opencode/ui/tooltip"
+import "./field.css"
+
+type FieldContextValue = {
+  controlId: string
+  labelId: string
+  prefixId: string
+  suffixId: string
+  invalid: () => boolean
+  registerPrefix: () => void
+  unregisterPrefix: () => void
+  registerSuffix: () => void
+  unregisterSuffix: () => void
+  getDescribedBy: () => string | undefined
+}
+
+const FieldContext = createContext<FieldContextValue>()
+
+function useField() {
+  const ctx = useContext(FieldContext)
+  if (!ctx) {
+    throw new Error("Field subcomponents must be used within <Field>")
+  }
+  return ctx
+}
+
+const CONTROL_SELECTOR = [
+  "[data-slot='text-input-v2-input']",
+  "[data-slot='textarea-v2-textarea']",
+  "[data-component='inline-input']",
+].join(", ")
+
+export interface FieldProps extends ComponentProps<"div"> {
+  invalid?: boolean
+}
+
+function FieldRoot(props: ParentProps<FieldProps>) {
+  const [local, rest] = splitProps(props, ["invalid", "class", "classList", "children"])
+
+  const controlId = `field-control-${createUniqueId()}`
+  const labelId = `field-label-${createUniqueId()}`
+  const prefixId = `field-prefix-${createUniqueId()}`
+  const suffixId = `field-suffix-${createUniqueId()}`
+
+  const [prefixCount, setPrefixCount] = createSignal(0)
+  const [suffixCount, setSuffixCount] = createSignal(0)
+
+  let rootRef: HTMLDivElement | undefined
+
+  const ctx: FieldContextValue = {
+    controlId,
+    labelId,
+    prefixId,
+    suffixId,
+    invalid: () => !!local.invalid,
+    registerPrefix: () => setPrefixCount((n) => n + 1),
+    unregisterPrefix: () => setPrefixCount((n) => Math.max(0, n - 1)),
+    registerSuffix: () => setSuffixCount((n) => n + 1),
+    unregisterSuffix: () => setSuffixCount((n) => Math.max(0, n - 1)),
+    getDescribedBy: () => {
+      const ids: string[] = []
+      if (prefixCount() > 0) ids.push(prefixId)
+      if (suffixCount() > 0) ids.push(suffixId)
+      return ids.length > 0 ? ids.join(" ") : undefined
+    },
+  }
+
+  const syncControlA11y = () => {
+    const root = rootRef
+    if (!root) return
+
+    const control = root.querySelector(CONTROL_SELECTOR) as HTMLInputElement | HTMLTextAreaElement | null
+    if (!control) return
+
+    const shell = control.closest(
+      "[data-component='text-input-v2'], [data-component='textarea-v2'], [data-component='inline-input']",
+    ) as HTMLElement | null
+
+    control.id = controlId
+    control.setAttribute("aria-labelledby", labelId)
+
+    const describedBy = ctx.getDescribedBy()
+    if (describedBy) {
+      control.setAttribute("aria-describedby", describedBy)
+    } else {
+      control.removeAttribute("aria-describedby")
+    }
+
+    if (ctx.invalid()) {
+      control.setAttribute("aria-invalid", "true")
+      shell?.setAttribute("data-invalid", "")
+    } else {
+      control.removeAttribute("aria-invalid")
+      shell?.removeAttribute("data-invalid")
+    }
+  }
+
+  onMount(() => {
+    syncControlA11y()
+  })
+
+  createEffect(() => {
+    prefixCount()
+    suffixCount()
+    local.invalid
+    syncControlA11y()
+  })
+
+  return (
+    <FieldContext.Provider value={ctx}>
+      <div
+        {...rest}
+        ref={rootRef}
+        data-component="field-v2"
+        data-invalid={local.invalid ? "" : undefined}
+        classList={{
+          ...local.classList,
+          [local.class ?? ""]: !!local.class,
+        }}
+      >
+        {local.children}
+      </div>
+    </FieldContext.Provider>
+  )
+}
+
+function FieldLabelInfoIcon() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M13 13H3V3H13V13ZM6.46777 6.81641V7.81641H7.5791V11.3721H8.5791V6.81641H6.46777ZM7.30078 4.62891V5.62891H8.85645V4.62891H7.30078Z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}
+
+export interface FieldLabelProps extends ComponentProps<"label"> {
+  /** When set, shows the info icon with a tooltip containing this text. */
+  tooltip?: string
+}
+
+function FieldLabel(props: ParentProps<FieldLabelProps>) {
+  const [local, rest] = splitProps(props, ["class", "classList", "children", "tooltip"])
+  const field = useField()
+
+  return (
+    <label
+      {...rest}
+      id={field.labelId}
+      for={field.controlId}
+      data-slot="field-v2-label"
+      classList={{
+        ...local.classList,
+        [local.class ?? ""]: !!local.class,
+      }}
+    >
+      <span data-slot="field-v2-label-text">{local.children}</span>
+      <Show when={local.tooltip}>
+        {(tooltip) => (
+          <Tooltip value={tooltip()}>
+            <button
+              type="button"
+              data-slot="field-v2-label-info"
+              aria-label={tooltip()}
+              onClick={(e) => e.stopPropagation()}
+            >
+              <FieldLabelInfoIcon />
+            </button>
+          </Tooltip>
+        )}
+      </Show>
+    </label>
+  )
+}
+
+function FieldPrefix(props: ParentProps<ComponentProps<"div">>) {
+  const [local, rest] = splitProps(props, ["class", "classList", "children"])
+  const field = useField()
+
+  onMount(() => {
+    field.registerPrefix()
+    onCleanup(() => field.unregisterPrefix())
+  })
+
+  return (
+    <div
+      {...rest}
+      id={field.prefixId}
+      data-slot="field-v2-prefix"
+      classList={{
+        ...local.classList,
+        [local.class ?? ""]: !!local.class,
+      }}
+    >
+      {local.children}
+    </div>
+  )
+}
+
+function FieldSuffix(props: ParentProps<ComponentProps<"div">>) {
+  const [local, rest] = splitProps(props, ["class", "classList", "children"])
+  const field = useField()
+
+  onMount(() => {
+    field.registerSuffix()
+    onCleanup(() => field.unregisterSuffix())
+  })
+
+  return (
+    <div
+      {...rest}
+      id={field.suffixId}
+      data-slot="field-v2-suffix"
+      classList={{
+        ...local.classList,
+        [local.class ?? ""]: !!local.class,
+      }}
+    >
+      {local.children}
+    </div>
+  )
+}
+
+/** Optional layout wrapper around the control. */
+function FieldControl(props: ParentProps<ComponentProps<"div">>) {
+  const [local, rest] = splitProps(props, ["class", "classList", "children"])
+
+  return (
+    <div
+      {...rest}
+      data-slot="field-v2-control"
+      classList={{
+        ...local.classList,
+        [local.class ?? ""]: !!local.class,
+      }}
+    >
+      {local.children}
+    </div>
+  )
+}
+
+export const Field = Object.assign(FieldRoot, {
+  Label: FieldLabel,
+  Prefix: FieldPrefix,
+  Suffix: FieldSuffix,
+  Control: FieldControl,
+})

package/src/forms/inline-input/inline-input.css

@@ -0,0 +1,17 @@
+[data-component="inline-input"] {
+  color: inherit;
+  background: transparent;
+  border: 0;
+  border-radius: var(--radius-md);
+  padding: 0;
+  min-width: 0;
+  font: inherit;
+  letter-spacing: inherit;
+  line-height: inherit;
+  box-sizing: border-box;
+
+  &:focus {
+    outline: none;
+    box-shadow: var(--inline-input-shadow, 0 0 0 1px var(--border-interactive-focus));
+  }
+}

package/src/forms/inline-input/inline-input.tsx

@@ -0,0 +1,22 @@
+import type { ComponentProps } from "solid-js"
+import { splitProps } from "solid-js"
+
+export type InlineInputProps = ComponentProps<"input"> & {
+  width?: string
+}
+
+export function InlineInput(props: InlineInputProps) {
+  const [local, others] = splitProps(props, ["class", "width", "style"])
+
+  const style = () => {
+    if (!local.style) return { width: local.width }
+    if (typeof local.style === "string") {
+      if (!local.width) return local.style
+      return `${local.style};width:${local.width}`
+    }
+    if (!local.width) return local.style
+    return { ...local.style, width: local.width }
+  }
+
+  return <input data-component="inline-input" class={local.class} style={style()} {...others} />
+}

package/src/forms/radio/radio.css

@@ -0,0 +1,202 @@
+[data-component="radio-v2"] {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  cursor: default;
+
+  [data-slot="radio-v2-label"] {
+    display: inline-flex;
+    align-items: center;
+    user-select: none;
+    color: var(--v2-text-text-faint);
+    font-size: 11px;
+    font-style: normal;
+    font-weight: 440;
+    line-height: 1;
+    letter-spacing: 0.05px;
+    font-variation-settings: "slnt" 0;
+  }
+
+  [data-slot="radio-v2-description"] {
+    color: var(--v2-text-text-faint);
+    font-size: 11px;
+    font-weight: 440;
+    line-height: 1.2;
+    letter-spacing: 0.05px;
+  }
+
+  [data-slot="radio-v2-items"] {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  [data-slot="radio-v2-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="radio-v2-error"]:empty {
+    display: none;
+  }
+}
+
+[data-slot="radio-v2-item"] {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  padding: 0px;
+  gap: 8px;
+
+  &:where([data-disabled]) {
+    cursor: not-allowed;
+  }
+
+  [data-slot="radio-v2-item-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="radio-v2-item-control-stack"] {
+    position: relative;
+    width: 16px;
+    height: 20px;
+    flex: none;
+  }
+
+  [data-slot="radio-v2-item-control"] {
+    box-sizing: border-box;
+    position: absolute;
+    width: 16px;
+    height: 16px;
+    flex: none;
+    flex-shrink: 0;
+    left: 0;
+    top: calc(50% - 16px / 2);
+
+    border-radius: 9999px;
+    border: none;
+    box-shadow: inset 0 0 0 0.5px var(--v2-border-border-strong);
+
+    background:
+      linear-gradient(180deg, var(--v2-alpha-light-6) 0%, var(--v2-alpha-light-0) 100%), var(--v2-background-bg-base);
+    transition:
+      background 170ms ease-out,
+      opacity 170ms ease-out,
+      outline-color 170ms ease-out;
+  }
+
+  &:where(:not([data-readonly]))
+    [data-slot="radio-v2-item-input"]:focus-visible
+    ~ [data-slot="radio-v2-item-control-stack"]
+    [data-slot="radio-v2-item-control"] {
+    outline: 2px solid var(--v2-border-border-focus);
+    outline-offset: 1px;
+  }
+
+  &:where(:hover):where(:not([data-disabled], [data-readonly])):where(:not([data-checked]))
+    [data-slot="radio-v2-item-control"] {
+    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-0) 100%), var(--v2-background-bg-base);
+  }
+
+  &:where([data-disabled]) [data-slot="radio-v2-item-control"] {
+    opacity: 0.5;
+  }
+
+  &:where([data-checked]) [data-slot="radio-v2-item-control"] {
+    background:
+      linear-gradient(180deg, var(--v2-alpha-light-20) 0%, var(--v2-alpha-light-0) 100%), var(--v2-background-bg-accent);
+  }
+
+  &:where([data-checked]):where(:hover):where(:not([data-disabled], [data-readonly]))
+    [data-slot="radio-v2-item-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-20) 0%, var(--v2-alpha-light-0) 100%), var(--v2-background-bg-accent);
+  }
+
+  &:where([data-invalid]):where(:not([data-checked])) [data-slot="radio-v2-item-control"] {
+    background: var(--v2-state-bg-danger);
+    box-shadow: inset 0 0 0 0.5px var(--v2-state-border-danger);
+  }
+
+  [data-slot="radio-v2-item-indicator"] {
+    box-sizing: border-box;
+    position: absolute;
+    width: 6px;
+    height: 6px;
+    left: calc(50% - 6px / 2);
+    top: calc(50% - 6px / 2);
+    border-radius: 9999px;
+
+    background: var(--v2-grey-300);
+    border: none;
+    box-shadow:
+      inset 0 0 0 0.5px var(--v2-overlay-gradient-depth-overlay-depth-top),
+      0px 0.5px 0.5px rgba(0, 0, 0, 0.4);
+  }
+
+  [data-slot="radio-v2-item-text"] {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    padding: 0px;
+    gap: 6px;
+  }
+
+  [data-slot="radio-v2-item-label"] {
+    display: inline-flex;
+    user-select: none;
+    color: inherit;
+    font-style: normal;
+    font-weight: 440;
+    font-variant-numeric: tabular-nums;
+    font-variation-settings: "slnt" 0;
+  }
+
+  [data-slot="radio-v2-item-label-text"] {
+    display: inline-flex;
+    align-items: center;
+    user-select: none;
+    color: var(--v2-text-text-base);
+    font-size: 13px;
+    line-height: 20px;
+    letter-spacing: -0.04px;
+  }
+
+  [data-slot="radio-v2-item-description"] {
+    color: var(--v2-text-text-muted);
+    font-size: 11px;
+    font-weight: 440;
+    line-height: 1;
+    letter-spacing: 0.05px;
+    font-variant-numeric: tabular-nums;
+    user-select: none;
+  }
+
+  &:where([data-disabled]) [data-slot="radio-v2-item-label-text"] {
+    color: var(--v2-text-text-muted);
+  }
+
+  &:where([data-disabled]) [data-slot="radio-v2-item-description"] {
+    color: var(--v2-text-text-faint);
+  }
+}

package/src/forms/radio/radio.tsx

@@ -0,0 +1,82 @@
+import {
+  Description,
+  ErrorMessage,
+  Item,
+  ItemControl,
+  ItemIndicator,
+  ItemInput,
+  ItemLabel,
+  Label,
+  Root,
+} from "@kobalte/core/radio-group"
+import { Show, splitProps, 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 function RadioGroup(props: RadioGroupProps) {
+  const [local, others] = splitProps(props, ["class", "classList", "children", "label", "description", "hideLabel"])
+  return (
+    <Root
+      {...others}
+      data-component="radio-v2"
+      classList={{
+        ...local.classList,
+        [local.class ?? ""]: !!local.class,
+      }}
+    >
+      <Show when={local.label}>
+        {(label) => (
+          <Label data-slot="radio-v2-label" classList={{ "sr-only": local.hideLabel }}>
+            {label()}
+          </Label>
+        )}
+      </Show>
+      <Show when={local.description}>
+        {(description) => <Description data-slot="radio-v2-description">{description()}</Description>}
+      </Show>
+      <div data-slot="radio-v2-items">{local.children}</div>
+      <ErrorMessage data-slot="radio-v2-error" />
+    </Root>
+  )
+}
+
+export interface RadioItemProps extends ComponentProps<typeof Item> {
+  label: JSX.Element
+  description?: JSX.Element
+  hideLabel?: boolean
+}
+
+export function RadioItem(props: RadioItemProps) {
+  const [local, others] = splitProps(props, ["class", "classList", "label", "description", "hideLabel"])
+  return (
+    <Item
+      {...others}
+      data-slot="radio-v2-item"
+      classList={{
+        ...local.classList,
+        [local.class ?? ""]: !!local.class,
+      }}
+    >
+      <ItemInput data-slot="radio-v2-item-input" />
+      <div data-slot="radio-v2-item-control-stack">
+        <ItemControl data-slot="radio-v2-item-control">
+          <ItemIndicator data-slot="radio-v2-item-indicator" />
+        </ItemControl>
+      </div>
+      <ItemLabel data-slot="radio-v2-item-label" classList={{ "sr-only": local.hideLabel }}>
+        <div data-slot="radio-v2-item-text">
+          <span data-slot="radio-v2-item-label-text">{local.label}</span>
+          <Show when={local.description}>
+            {(description) => <span data-slot="radio-v2-item-description">{description()}</span>}
+          </Show>
+        </div>
+      </ItemLabel>
+    </Item>
+  )
+}