@opencode-ai/ui 0.0.0-beta-202606251302

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

@@ -0,0 +1,93 @@
+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 {
+  title?: JSXElement
+  description?: JSXElement
+  action?: JSXElement
+  size?: "normal" | "large" | "x-large"
+  variant?: "default" | "settings"
+  class?: ComponentProps<"div">["class"]
+  classList?: ComponentProps<"div">["classList"]
+  fit?: boolean
+}
+
+export function DialogFooter(props: ParentProps) {
+  return <div data-slot="dialog-footer">{props.children}</div>
+}
+
+export function Dialog(props: DialogProps) {
+  const [local] = splitProps(props, [
+    "title",
+    "description",
+    "action",
+    "size",
+    "variant",
+    "class",
+    "classList",
+    "fit",
+    "children",
+  ])
+  const title = children(() => local.title)
+  const description = children(() => local.description)
+  const action = children(() => local.action)
+  const hasHeader = () => title() || action()
+
+  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"
+          data-no-header={!hasHeader() ? "" : undefined}
+          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()
+            }
+          }}
+        >
+          <Show when={hasHeader()}>
+            <div data-slot="dialog-header">
+              <div data-slot="dialog-title-group">
+                <Show when={title()}>{(t) => <Kobalte.Title data-slot="dialog-title">{t()}</Kobalte.Title>}</Show>
+                <Show when={description()}>
+                  {(d) => <Kobalte.Description data-slot="dialog-description">{d()}</Kobalte.Description>}
+                </Show>
+              </div>
+              <Show when={action()}>{(a) => a()}</Show>
+              <Kobalte.CloseButton data-slot="dialog-close-button" aria-label="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>
+          </Show>
+          <div data-slot="dialog-body">{local.children}</div>
+        </Kobalte.Content>
+      </div>
+    </div>
+  )
+}

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/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

package/src/v2/components/icon-button-v2.css

@@ -0,0 +1,155 @@
+* {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: geometricPrecision;
+}
+
+[data-component="icon-button-v2"] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 6px;
+  color: var(--v2-text-text-base);
+  user-select: none;
+  outline: none;
+  padding: 0;
+  cursor: default;
+}
+
+[data-component="icon-button-v2"]:focus {
+  outline: none;
+}
+
+[data-component="icon-button-v2"]:is(:focus-visible, [data-state="focus"]):not(:disabled) {
+  outline: 2px solid var(--v2-border-border-focus);
+  outline-offset: 2.5px;
+}
+
+[data-component="icon-button-v2"][data-size="small"] {
+  width: 20px;
+  height: 20px;
+  border-radius: 4px;
+}
+
+[data-component="icon-button-v2"][data-size="normal"] {
+  width: 24px;
+  height: 24px;
+}
+
+[data-component="icon-button-v2"][data-size="large"] {
+  width: 28px;
+  height: 28px;
+}
+
+[data-component="icon-button-v2"] [data-slot="icon-svg"] {
+  color: currentColor;
+}
+
+/* Neutral */
+[data-component="icon-button-v2"][data-variant="neutral"] {
+  background-color: var(--v2-background-bg-button-neutral);
+  color: var(--v2-text-text-base);
+  box-shadow: var(--v2-elevation-button-neutral);
+}
+
+[data-component="icon-button-v2"][data-variant="neutral"]:is(:hover, [data-state="hover"]):not(:disabled) {
+  background-image:
+    linear-gradient(90deg, var(--v2-overlay-simple-overlay-hover) 0%, var(--v2-overlay-simple-overlay-hover) 100%),
+    linear-gradient(90deg, var(--v2-background-bg-button-neutral) 0%, var(--v2-background-bg-button-neutral) 100%);
+}
+
+[data-component="icon-button-v2"][data-variant="neutral"]:is(:active, [data-state="pressed"]):not(:disabled) {
+  background-image:
+    linear-gradient(90deg, var(--v2-overlay-simple-overlay-pressed) 0%, var(--v2-overlay-simple-overlay-pressed) 100%),
+    linear-gradient(90deg, var(--v2-background-bg-button-neutral) 0%, var(--v2-background-bg-button-neutral) 100%);
+}
+
+[data-component="icon-button-v2"][data-variant="neutral"]:is(:disabled, [data-state="disabled"]) {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Contrast */
+[data-component="icon-button-v2"][data-variant="contrast"] {
+  background-image:
+    linear-gradient(180deg, var(--v2-alpha-light-20) 0%, var(--v2-alpha-light-0) 100%),
+    linear-gradient(90deg, var(--v2-background-bg-contrast) 0%, var(--v2-background-bg-contrast) 100%);
+  color: var(--v2-text-text-contrast);
+  text-shadow: 0 0.5px 0.5px rgba(0, 0, 0, 0.3);
+  box-shadow: var(--v2-elevation-button-contrast);
+}
+
+[data-component="icon-button-v2"][data-variant="contrast"]:is(:hover, [data-state="hover"]):not(:disabled) {
+  background-image:
+    linear-gradient(
+      90deg,
+      var(--v2-overlay-simple-overlay-contrast-hover) 0%,
+      var(--v2-overlay-simple-overlay-contrast-hover) 100%
+    ),
+    linear-gradient(180deg, var(--v2-alpha-light-20) 0%, var(--v2-alpha-light-0) 100%),
+    linear-gradient(90deg, var(--v2-background-bg-contrast) 0%, var(--v2-background-bg-contrast) 100%);
+}
+
+[data-component="icon-button-v2"][data-variant="contrast"]:is(:active, [data-state="pressed"]):not(:disabled) {
+  background-image:
+    linear-gradient(
+      90deg,
+      var(--v2-overlay-simple-overlay-contrast-pressed) 0%,
+      var(--v2-overlay-simple-overlay-contrast-pressed) 100%
+    ),
+    linear-gradient(180deg, var(--v2-alpha-light-20) 0%, var(--v2-alpha-light-0) 100%),
+    linear-gradient(90deg, var(--v2-background-bg-contrast) 0%, var(--v2-background-bg-contrast) 100%);
+}
+
+[data-component="icon-button-v2"][data-variant="contrast"]:is(:disabled, [data-state="disabled"]) {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* Ghost */
+[data-component="icon-button-v2"][data-variant="ghost"] {
+  background-color: transparent;
+  color: var(--v2-text-text-base);
+}
+
+[data-component="icon-button-v2"][data-variant="ghost"]:is(:hover, [data-state="hover"], [data-expanded]):not(
+    :disabled
+  ) {
+  background-color: var(--v2-overlay-simple-overlay-hover);
+}
+
+[data-component="icon-button-v2"][data-variant="ghost"]:is(:active, [data-state="pressed"]):not(:disabled) {
+  background-color: var(--v2-overlay-simple-overlay-pressed);
+}
+
+[data-component="icon-button-v2"][data-variant="ghost"]:is(:disabled, [data-state="disabled"]) {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Ghost */
+[data-component="icon-button-v2"][data-variant="ghost-muted"] {
+  background-color: transparent;
+  color: var(--v2-icon-icon-muted);
+}
+
+[data-component="icon-button-v2"][data-variant="ghost-muted"]:is(:hover, [data-state="hover"], [data-expanded]):not(
+    :disabled
+  ) {
+  background-color: var(--v2-overlay-simple-overlay-hover);
+}
+
+[data-component="icon-button-v2"][data-variant="ghost-muted"]:is(:active, [data-state="pressed"]):not(:disabled) {
+  background-color: var(--v2-overlay-simple-overlay-pressed);
+  color: var(--v2-icon-icon-base);
+}
+
+[data-component="icon-button-v2"][data-variant="ghost-muted"]:where([data-expanded]):not(:disabled) {
+  background-color: var(--v2-overlay-simple-overlay-pressed);
+  color: var(--v2-icon-icon-base);
+}
+
+[data-component="icon-button-v2"][data-variant="ghost-muted"]:is(:disabled, [data-state="disabled"]) {
+  opacity: 0.5;
+  cursor: not-allowed;
+}

package/src/v2/components/icon-button-v2.tsx

@@ -0,0 +1,37 @@
+import { Button as Kobalte } from "@kobalte/core/button"
+import { type ComponentProps, splitProps } from "solid-js"
+import { JSX } from "solid-js"
+import "./icon-button-v2.css"
+
+export interface IconButtonV2Props
+  extends ComponentProps<typeof Kobalte>,
+    Pick<ComponentProps<"button">, "class" | "classList"> {
+  // temporary
+  icon?: JSX.Element
+  // icon: IconProps["name"]
+  size?: "small" | "normal" | "large"
+  // iconSize?: IconProps["size"]
+  variant?: "neutral" | "contrast" | "ghost" | "ghost-muted"
+  state?: "rest" | "hover" | "pressed"
+}
+
+export function IconButtonV2(props: ComponentProps<"button"> & IconButtonV2Props) {
+  const [split, rest] = splitProps(props, ["variant", "size", "iconSize", "class", "classList", "state"])
+  return (
+    <Kobalte
+      {...rest}
+      data-component="icon-button-v2"
+      // data-icon={props.icon}
+      data-size={split.size || "normal"}
+      data-variant={split.variant || "neutral"}
+      data-state={split.state}
+      classList={{
+        ...split.classList,
+        [split.class ?? ""]: !!split.class,
+      }}
+    >
+      {props.icon}
+      {/*<Icon name={props.icon} size={split.iconSize ?? (split.size === "large" ? "normal" : "small")} />*/}
+    </Kobalte>
+  )
+}