@opencode-ai/ui 0.0.0-dev-202609050337 → 0.0.0-dev-19145

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

@@ -1,184 +0,0 @@
-[data-slot="checkbox-v2"] {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  cursor: default;
-
-  &:where([data-disabled]) {
-    cursor: not-allowed;
-  }
-
-  [data-slot="checkbox-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="checkbox-v2-error"]:empty {
-    display: none;
-  }
-}
-
-[data-slot="checkbox-v2-row"] {
-  position: relative;
-  display: flex;
-  flex-direction: row;
-  align-items: flex-start;
-  padding: 0px;
-  gap: 8px;
-
-  [data-slot="checkbox-v2-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="checkbox-v2-control-stack"] {
-    position: relative;
-    width: 16px;
-    height: 20px;
-    flex: none;
-  }
-
-  [data-slot="checkbox-v2-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: 4px;
-    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;
-  }
-
-  [data-slot="checkbox-v2-indicator"] {
-    position: absolute;
-    inset: 0;
-    width: 16px;
-    height: 16px;
-    pointer-events: none;
-  }
-
-  [data-slot="checkbox-v2-text"] {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: flex-start;
-    padding: 0px;
-    gap: 6px;
-  }
-
-  [data-slot="checkbox-v2-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="checkbox-v2-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="checkbox-v2-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;
-  }
-}
-
-[data-slot="checkbox-v2"]:where(:not([data-readonly]))
-  [data-slot="checkbox-v2-input"]:focus-visible
-  ~ [data-slot="checkbox-v2-control-stack"]
-  [data-slot="checkbox-v2-control"] {
-  outline: 2px solid var(--v2-border-border-focus);
-  outline-offset: 1px;
-}
-
-[data-slot="checkbox-v2"]:where(:hover):where(:not([data-disabled], [data-readonly], [data-invalid])):where(
-    :not([data-checked], [data-indeterminate])
-  )
-  [data-slot="checkbox-v2-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);
-}
-
-[data-slot="checkbox-v2"]:where([data-disabled]) [data-slot="checkbox-v2-control"] {
-  opacity: 0.5;
-}
-
-[data-slot="checkbox-v2"]:where([data-checked], [data-indeterminate]) [data-slot="checkbox-v2-control"] {
-  background:
-    linear-gradient(180deg, var(--v2-alpha-light-20) 0%, var(--v2-alpha-light-0) 100%), var(--v2-background-bg-accent);
-}
-
-[data-slot="checkbox-v2"]:where([data-checked], [data-indeterminate]):where(:hover):where(
-    :not([data-disabled], [data-readonly])
-  )
-  [data-slot="checkbox-v2-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);
-}
-
-[data-slot="checkbox-v2"]:where([data-invalid]):where(:not([data-checked], [data-indeterminate]))
-  [data-slot="checkbox-v2-control"] {
-  background: var(--v2-state-bg-danger);
-  box-shadow: inset 0 0 0 0.5px var(--v2-state-border-danger);
-}
-
-[data-slot="checkbox-v2"] .checkbox-v2-icon {
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  display: none;
-}
-
-[data-slot="checkbox-v2"]:where([data-checked]):where(:not([data-indeterminate])) .checkbox-v2-icon--check {
-  display: block;
-}
-
-[data-slot="checkbox-v2"]:where([data-indeterminate]) .checkbox-v2-icon--minus {
-  display: block;
-}
-
-[data-slot="checkbox-v2"]:where([data-disabled]) [data-slot="checkbox-v2-label"],
-[data-slot="checkbox-v2"]:where([data-disabled]) [data-slot="checkbox-v2-description"] {
-  opacity: 0.5;
-}

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

@@ -1,65 +0,0 @@
-import { Checkbox as Kobalte } from "@kobalte/core/checkbox"
-import { Show, splitProps, type JSX } from "solid-js"
-import type { ComponentProps } from "solid-js"
-import "./checkbox-v2.css"
-
-export interface CheckboxV2Props extends ComponentProps<typeof Kobalte> {
-  label: JSX.Element
-  description?: JSX.Element
-  hideLabel?: boolean
-}
-
-export function CheckboxV2(props: CheckboxV2Props) {
-  const [local, others] = splitProps(props, ["class", "classList", "label", "description", "hideLabel"])
-  return (
-    <Kobalte
-      {...others}
-      data-slot="checkbox-v2"
-      classList={{
-        ...local.classList,
-        [local.class ?? ""]: !!local.class,
-      }}
-    >
-      <div data-slot="checkbox-v2-row">
-        <Kobalte.Input data-slot="checkbox-v2-input" />
-        <div data-slot="checkbox-v2-control-stack">
-          <Kobalte.Control data-slot="checkbox-v2-control">
-            <Kobalte.Indicator data-slot="checkbox-v2-indicator">
-              <svg
-                class="checkbox-v2-icon checkbox-v2-icon--check"
-                width="16"
-                height="16"
-                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="#FAFAFA" stroke-width="1" />
-              </svg>
-              <svg
-                class="checkbox-v2-icon checkbox-v2-icon--minus"
-                width="16"
-                height="16"
-                viewBox="0 0 16 16"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-                aria-hidden="true"
-              >
-                <path d="M12.75 8H3.25" stroke="#FAFAFA" stroke-linejoin="round" stroke-width="1" />
-              </svg>
-            </Kobalte.Indicator>
-          </Kobalte.Control>
-        </div>
-        <Kobalte.Label data-slot="checkbox-v2-label" classList={{ "sr-only": local.hideLabel }}>
-          <div data-slot="checkbox-v2-text">
-            <span data-slot="checkbox-v2-label-text">{local.label}</span>
-            <Show when={local.description}>
-              {(description) => <span data-slot="checkbox-v2-description">{description()}</span>}
-            </Show>
-          </div>
-        </Kobalte.Label>
-      </div>
-      <Kobalte.ErrorMessage data-slot="checkbox-v2-error" />
-    </Kobalte>
-  )
-}

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

@@ -1,26 +0,0 @@
-[data-component="diff-changes"] {
-  display: flex;
-  direction: ltr;
-  unicode-bidi: isolate;
-  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/icon-button-v2.tsx

@@ -1,37 +0,0 @@
-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>
-  )
-}

package/src/v2/components/inline-input-v2.css

@@ -1,225 +0,0 @@
-[data-component="inline-input-v2"] {
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: row;
-  align-items: stretch;
-  padding: 0;
-  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;
-  overflow: hidden;
-  transition:
-    background 85ms ease-out,
-    outline-color 85ms ease-out,
-    box-shadow 85ms ease-out;
-}
-
-[data-component="inline-input-v2"][data-appearance="large"] {
-  height: 32px;
-}
-
-[data-component="inline-input-v2"]:where(:hover):not([data-disabled], [data-invalid]):not(:focus-within) {
-  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="inline-input-v2"]:where(:hover):not([data-disabled], [data-invalid]):not(:focus-within)
-  [data-slot="inline-input-v2-prefix"] {
-  background: transparent;
-}
-
-[data-component="inline-input-v2"]:where(:focus-within):not([data-disabled], [data-invalid]) {
-  outline-color: var(--v2-border-border-focus);
-  box-shadow: none;
-}
-
-[data-component="inline-input-v2"]:where([data-invalid]):not([data-disabled]) {
-  outline-color: var(--v2-state-fg-danger);
-  box-shadow: none;
-}
-
-[data-component="inline-input-v2"]:where([data-disabled]) {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-[data-component="inline-input-v2"] [data-slot="inline-input-v2-prefix"] {
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: flex-start;
-  flex: none;
-  align-self: stretch;
-  width: fit-content;
-  min-width: 0;
-  max-width: 100%;
-  padding: 4px 8px;
-  gap: 4px;
-  background: var(--v2-background-bg-layer-01);
-  border-radius: 4px 0 0 4px;
-  cursor: default;
-  transition: background 85ms ease-out;
-}
-
-[data-component="inline-input-v2"]:where([data-disabled]) [data-slot="inline-input-v2-prefix"] {
-  cursor: not-allowed;
-}
-
-[data-component="inline-input-v2"][data-label-width] [data-slot="inline-input-v2-prefix"] {
-  width: var(--inline-input-v2-label-width);
-  min-width: var(--inline-input-v2-label-width);
-  max-width: var(--inline-input-v2-label-width);
-}
-
-[data-component="inline-input-v2"] [data-slot="inline-input-v2-prefix-text"] {
-  display: block;
-  width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-style: normal;
-  font-weight: 440;
-  font-size: 13px;
-  line-height: 1;
-  letter-spacing: -0.04px;
-  color: var(--v2-text-text-muted);
-  font-variation-settings: "slnt" 0;
-  user-select: none;
-}
-
-[data-component="inline-input-v2"][data-numeric] [data-slot="inline-input-v2-prefix-text"] {
-  font-variant-numeric: tabular-nums;
-}
-
-[data-component="inline-input-v2"] [data-slot="inline-input-v2-divider"] {
-  flex: none;
-  align-self: stretch;
-  width: 0.5px;
-  min-width: 0.5px;
-  background: var(--v2-border-border-base);
-}
-
-[data-component="inline-input-v2"] [data-slot="inline-input-v2-field"] {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  align-self: stretch;
-  flex: 1 1 auto;
-  min-width: 0;
-  padding: 4px 8px;
-  gap: 8px;
-}
-
-[data-component="inline-input-v2"][data-appearance="large"] [data-slot="inline-input-v2-field"] {
-  padding-top: 6px;
-  padding-bottom: 6px;
-}
-
-[data-component="inline-input-v2"] [data-slot="inline-input-v2-value"] {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  flex: 1 1 auto;
-  min-width: 0;
-  min-height: 0;
-}
-
-[data-component="inline-input-v2"] [data-slot="inline-input-v2-input"] {
-  display: block;
-  width: 100%;
-  min-width: 0;
-  height: 100%;
-  padding: 0;
-  margin: 0;
-  border: 0;
-  background: transparent;
-  outline: none;
-  font-style: normal;
-  font-weight: 440;
-  font-size: 13px;
-  line-height: 1;
-  letter-spacing: -0.04px;
-  color: var(--v2-text-text-base);
-  font-variation-settings: "slnt" 0;
-}
-
-[data-component="inline-input-v2"] [data-slot="inline-input-v2-input"]::placeholder {
-  color: var(--v2-text-text-faint);
-  user-select: none;
-}
-
-[data-component="inline-input-v2"][data-numeric] [data-slot="inline-input-v2-input"] {
-  font-variant-numeric: tabular-nums;
-}
-
-[data-component="inline-input-v2"] [data-slot="inline-input-v2-icon-button"] {
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  flex: none;
-  width: 20px;
-  height: 20px;
-  padding: 2px;
-  gap: 3px;
-  border: 0;
-  border-radius: 4px;
-  background: transparent;
-  color: var(--v2-icon-icon-muted);
-  cursor: pointer;
-  outline: none;
-}
-
-[data-component="inline-input-v2"]
-  [data-slot="inline-input-v2-icon-button"]:is(:hover, [data-state="hover"]):not(:disabled) {
-  background-color: var(--v2-overlay-simple-overlay-hover);
-}
-
-[data-component="inline-input-v2"]
-  [data-slot="inline-input-v2-icon-button"]:is(:active, [data-state="pressed"]):not(:disabled) {
-  background-color: var(--v2-overlay-simple-overlay-pressed);
-}
-
-[data-component="inline-input-v2"] [data-slot="inline-input-v2-icon-button"]:focus {
-  outline: none;
-}
-
-[data-component="inline-input-v2"] [data-slot="inline-input-v2-icon-button"]:focus-visible {
-  outline: 2px solid var(--v2-border-border-focus);
-  outline-offset: 1px;
-}
-
-[data-component="inline-input-v2"]:where([data-disabled]) [data-slot="inline-input-v2-icon-button"] {
-  cursor: not-allowed;
-  pointer-events: none;
-}
-
-[data-component="inline-input-v2"] [data-slot="inline-input-v2-icon-button"] [data-slot="icon-svg"] {
-  display: block;
-  flex: none;
-  color: currentColor;
-}
-
-[data-component="inline-input-v2"][data-invalid]:not([data-disabled]) [data-slot="inline-input-v2-prefix-text"] {
-  color: var(--v2-text-text-muted);
-}
-
-[data-component="inline-input-v2"][data-invalid]:not([data-disabled]) [data-slot="inline-input-v2-input"] {
-  color: var(--v2-state-fg-danger);
-  caret-color: var(--v2-state-fg-danger);
-}
-
-[data-component="inline-input-v2"][data-invalid]:not([data-disabled]) [data-slot="inline-input-v2-input"]::placeholder {
-  color: var(--v2-state-fg-danger);
-  opacity: 1;
-}

package/src/v2/components/inline-input-v2.tsx

@@ -1,107 +0,0 @@
-import { type ComponentProps, type JSX, Show, splitProps } from "solid-js"
-import { Icon } from "./icon"
-import { useI18n } from "../../context/i18n"
-import "./inline-input-v2.css"
-
-export interface InlineInputV2Props extends Omit<ComponentProps<"input">, "type" | "prefix"> {
-  /** Inline label shown before the field (prefix segment). */
-  prefix: JSX.Element
-  /** Fixed width for the prefix segment (px number or CSS length). Omit for fit-content. */
-  labelWidth?: number | string
-  /** Show the trailing copy action. */
-  showCopyButton?: boolean
-  /** Accessible label for the copy button. */
-  copyLabel?: string
-  onCopyClick?: (event: MouseEvent) => void
-  /** Apply tabular numerals to the prefix and field value. */
-  numeric?: boolean
-  /** Error styling for the field and value text. */
-  invalid?: boolean
-  /** `base` is 28px tall; `large` is 32px tall. */
-  appearance?: "base" | "large"
-  type?: ComponentProps<"input">["type"]
-}
-
-export function InlineInputV2(props: InlineInputV2Props) {
-  const i18n = useI18n()
-  const [local, inputProps] = splitProps(props, [
-    "class",
-    "classList",
-    "prefix",
-    "labelWidth",
-    "showCopyButton",
-    "copyLabel",
-    "onCopyClick",
-    "numeric",
-    "invalid",
-    "appearance",
-    "disabled",
-    "style",
-  ])
-
-  let input: HTMLInputElement | undefined
-
-  return (
-    <div
-      data-component="inline-input-v2"
-      data-disabled={local.disabled ? "" : undefined}
-      data-invalid={local.invalid ? "" : undefined}
-      data-numeric={local.numeric ? "" : undefined}
-      data-appearance={local.appearance ?? "base"}
-      data-label-width={local.labelWidth != null ? "" : undefined}
-      classList={{
-        ...local.classList,
-        [local.class ?? ""]: !!local.class,
-      }}
-      style={{
-        ...(typeof local.style === "object" && local.style != null ? local.style : {}),
-        ...(local.labelWidth != null
-          ? {
-              "--inline-input-v2-label-width":
-                typeof local.labelWidth === "number" ? `${local.labelWidth}px` : local.labelWidth,
-            }
-          : {}),
-      }}
-    >
-      <div
-        data-slot="inline-input-v2-prefix"
-        onMouseDown={(event) => {
-          if (local.disabled || event.button !== 0) return
-          // Keep focus on the input without using a native <label>, so external labels still work.
-          event.preventDefault()
-          input?.focus()
-        }}
-      >
-        <span data-slot="inline-input-v2-prefix-text">{local.prefix}</span>
-      </div>
-      <div data-slot="inline-input-v2-divider" aria-hidden="true" />
-      <div data-slot="inline-input-v2-field">
-        <div data-slot="inline-input-v2-value">
-          <input
-            {...inputProps}
-            ref={(el) => {
-              input = el
-              const ref = inputProps.ref
-              if (typeof ref === "function") ref(el)
-            }}
-            type={inputProps.type ?? "text"}
-            disabled={local.disabled}
-            aria-invalid={local.invalid ? true : undefined}
-            data-slot="inline-input-v2-input"
-          />
-        </div>
-        <Show when={local.showCopyButton}>
-          <button
-            type="button"
-            data-slot="inline-input-v2-icon-button"
-            aria-label={local.copyLabel ?? i18n.t("ui.message.copy")}
-            disabled={local.disabled}
-            onClick={local.onCopyClick}
-          >
-            <Icon name="copy" />
-          </button>
-        </Show>
-      </div>
-    </div>
-  )
-}

package/src/v2/components/progress-circle-v2.css

@@ -1,13 +0,0 @@
-[data-component="progress-circle-v2"] {
-  display: block;
-  transform: rotate(-90deg);
-}
-
-[data-component="progress-circle-v2"] [data-slot="progress-circle-v2-background"] {
-  stroke: var(--v2-background-bg-layer-04);
-}
-
-[data-component="progress-circle-v2"] [data-slot="progress-circle-v2-progress"] {
-  stroke: var(--v2-icon-icon-base);
-  transition: stroke-dashoffset 0.35s cubic-bezier(0.65, 0, 0.35, 1);
-}