@opencode-ai/ui 0.0.0 → 1.17.12

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

@@ -0,0 +1,114 @@
+import { Dialog as Kobalte } from "@kobalte/core/dialog"
+import { type ComponentProps, type JSXElement, type ParentProps, Show, children, splitProps } from "solid-js"
+import "./dialog-v2.css"
+
+export interface DialogProps extends ParentProps {
+  size?: "normal" | "large" | "x-large"
+  variant?: "default" | "settings"
+  class?: ComponentProps<"div">["class"]
+  classList?: ComponentProps<"div">["classList"]
+  fit?: boolean
+}
+
+export interface DialogHeaderProps extends ParentProps {
+  closeLabel?: string
+  hideClose?: boolean
+}
+
+export interface DialogTitleGroupProps {
+  title?: JSXElement
+  description: JSXElement
+}
+
+export function DialogFooter(props: ParentProps) {
+  return <div data-slot="dialog-footer">{props.children}</div>
+}
+
+export function DialogBody(props: ParentProps & { class?: ComponentProps<"div">["class"] }) {
+  const [local] = splitProps(props, ["class", "children"])
+  return (
+    <div data-slot="dialog-body" class={local.class}>
+      {local.children}
+    </div>
+  )
+}
+
+export function DialogTitle(props: ParentProps) {
+  return <Kobalte.Title data-slot="dialog-header-title">{props.children}</Kobalte.Title>
+}
+
+export function DialogTitleGroup(props: DialogTitleGroupProps) {
+  const title = children(() => props.title)
+  const description = children(() => props.description)
+
+  return (
+    <div data-slot="dialog-title-group">
+      <Show when={title()}>{(t) => <Kobalte.Title data-slot="dialog-title">{t()}</Kobalte.Title>}</Show>
+      <Kobalte.Description data-slot="dialog-description">{description()}</Kobalte.Description>
+    </div>
+  )
+}
+
+export function DialogHeader(props: DialogHeaderProps) {
+  const [local] = splitProps(props, ["closeLabel", "hideClose", "children"])
+  const hideClose = () => local.hideClose === true
+
+  return (
+    <div data-slot="dialog-header" data-hide-close={hideClose() ? "" : undefined}>
+      {local.children}
+      {!hideClose() && (
+        <Kobalte.CloseButton data-slot="dialog-close-button" aria-label={local.closeLabel ?? "Close"}>
+          <svg
+            width="16"
+            height="16"
+            viewBox="0 0 16 16"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            aria-hidden="true"
+          >
+            <path
+              d="M12.4446 3.55469L3.55566 12.4436M3.55566 3.55469L12.4446 12.4436"
+              stroke="currentColor"
+              stroke-linejoin="round"
+            />
+          </svg>
+        </Kobalte.CloseButton>
+      )}
+    </div>
+  )
+}
+
+export function Dialog(props: DialogProps) {
+  const [local] = splitProps(props, ["size", "variant", "class", "classList", "fit", "children"])
+
+  return (
+    <div
+      data-component="dialog-v2"
+      data-variant={local.variant === "settings" ? "settings" : undefined}
+      data-fit={local.fit ? true : undefined}
+      data-size={local.size || "normal"}
+    >
+      <div data-slot="dialog-container">
+        <Kobalte.Content
+          data-slot="dialog-content"
+          classList={{
+            ...local.classList,
+            [local.class ?? ""]: !!local.class,
+          }}
+          onOpenAutoFocus={(e) => {
+            const target = e.currentTarget as HTMLElement | null
+            const autofocusEl = target?.querySelector("[autofocus]") as HTMLElement | null
+            if (autofocusEl) {
+              e.preventDefault()
+              autofocusEl.focus()
+            }
+          }}
+        >
+          {local.children}
+        </Kobalte.Content>
+      </div>
+    </div>
+  )
+}
+
+export const DialogV2 = Dialog

package/src/v2/components/diff-changes-v2.css

@@ -0,0 +1,24 @@
+[data-component="diff-changes"] {
+  display: flex;
+  gap: 8px;
+  justify-content: flex-end;
+  align-items: center;
+
+  [data-slot="diff-changes-additions"],
+  [data-slot="diff-changes-deletions"] {
+    font-size: 11px;
+    font-style: normal;
+    font-weight: 440;
+    line-height: 1;
+    letter-spacing: 0.05px;
+    text-align: right;
+  }
+
+  [data-slot="diff-changes-additions"] {
+    color: var(--v2-state-fg-success);
+  }
+
+  [data-slot="diff-changes-deletions"] {
+    color: var(--v2-state-fg-danger);
+  }
+}

package/src/v2/components/diff-changes-v2.tsx

@@ -0,0 +1,28 @@
+import { createMemo, Show } from "solid-js"
+import "./diff-changes-v2.css"
+
+export function DiffChanges(props: {
+  class?: string
+  changes: { additions: number; deletions: number } | { additions: number; deletions: number }[]
+}) {
+  const additions = createMemo(() =>
+    Array.isArray(props.changes)
+      ? props.changes.reduce((acc, diff) => acc + (diff.additions ?? 0), 0)
+      : props.changes.additions,
+  )
+  const deletions = createMemo(() =>
+    Array.isArray(props.changes)
+      ? props.changes.reduce((acc, diff) => acc + (diff.deletions ?? 0), 0)
+      : props.changes.deletions,
+  )
+  const total = createMemo(() => (additions() ?? 0) + (deletions() ?? 0))
+
+  return (
+    <Show when={total() > 0}>
+      <div data-component="diff-changes" classList={{ [props.class ?? ""]: true }}>
+        <span data-slot="diff-changes-additions">{`+${additions()}`}</span>
+        <span data-slot="diff-changes-deletions">{`-${deletions()}`}</span>
+      </div>
+    </Show>
+  )
+}

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

@@ -0,0 +1,11 @@
+[data-component="divider-v2"] {
+  box-sizing: border-box;
+  width: 100%;
+  height: 0.5px;
+  margin-block: 0.25px;
+  border: none;
+  background: var(--v2-border-border-strong);
+  flex: none;
+  align-self: stretch;
+  flex-grow: 0;
+}

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

@@ -0,0 +1,20 @@
+import { type ComponentProps, splitProps } from "solid-js"
+import "./divider-v2.css"
+
+export interface DividerV2Props extends ComponentProps<"div"> {}
+
+export function DividerV2(props: DividerV2Props) {
+  const [local, rest] = splitProps(props, ["class", "classList"])
+  return (
+    <div
+      {...rest}
+      role="separator"
+      aria-orientation="horizontal"
+      data-component="divider-v2"
+      classList={{
+        ...local.classList,
+        [local.class ?? ""]: !!local.class,
+      }}
+    />
+  )
+}

package/src/v2/components/field-v2.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: 1;
+  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/v2/components/field-v2.tsx

@@ -0,0 +1,265 @@
+import {
+  createContext,
+  createEffect,
+  createSignal,
+  createUniqueId,
+  onCleanup,
+  onMount,
+  splitProps,
+  useContext,
+  Show,
+  type ComponentProps,
+  type ParentProps,
+} from "solid-js"
+import { TooltipV2 } from "./tooltip-v2"
+import "./field-v2.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-slot='inline-input-v2-input']",
+].join(", ")
+
+export interface FieldV2Props extends ComponentProps<"div"> {
+  invalid?: boolean
+}
+
+function FieldV2Root(props: ParentProps<FieldV2Props>) {
+  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-v2']",
+    ) 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) => (
+          <TooltipV2 value={tooltip()}>
+            <button
+              type="button"
+              data-slot="field-v2-label-info"
+              aria-label={tooltip()}
+              onClick={(e) => e.stopPropagation()}
+            >
+              <FieldLabelInfoIcon />
+            </button>
+          </TooltipV2>
+        )}
+      </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 FieldV2 = Object.assign(FieldV2Root, {
+  Label: FieldLabel,
+  Prefix: FieldPrefix,
+  Suffix: FieldSuffix,
+  Control: FieldControl,
+})
+
+export const Field = FieldV2