@opencode-ai/ui 0.0.0-dev-202608201855 → 0.0.0-dev-17751

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

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

@@ -1,52 +0,0 @@
-import { type ComponentProps, createMemo, splitProps } from "solid-js"
-import "./progress-circle-v2.css"
-
-export interface ProgressCircleV2Props extends Pick<ComponentProps<"svg">, "class" | "classList"> {
-  percentage: number
-  size?: number
-  strokeWidth?: number
-}
-
-export function ProgressCircleV2(props: ProgressCircleV2Props) {
-  const [split, rest] = splitProps(props, ["percentage", "size", "strokeWidth", "class", "classList"])
-
-  const size = () => split.size ?? 14
-  const strokeWidth = () => split.strokeWidth ?? 1.5
-  const viewBoxSize = 14
-  const center = viewBoxSize / 2
-  const radius = () => center - strokeWidth() / 2
-  const circumference = createMemo(() => 2 * Math.PI * radius())
-  const offset = createMemo(() => circumference() * (1 - Math.max(0, Math.min(100, split.percentage || 0)) / 100))
-
-  return (
-    <svg
-      {...rest}
-      width={size()}
-      height={size()}
-      viewBox={`0 0 ${viewBoxSize} ${viewBoxSize}`}
-      fill="none"
-      data-component="progress-circle-v2"
-      classList={{
-        ...split.classList,
-        [split.class ?? ""]: !!split.class,
-      }}
-    >
-      <circle
-        cx={center}
-        cy={center}
-        r={radius()}
-        data-slot="progress-circle-v2-background"
-        stroke-width={strokeWidth()}
-      />
-      <circle
-        cx={center}
-        cy={center}
-        r={radius()}
-        data-slot="progress-circle-v2-progress"
-        stroke-width={strokeWidth()}
-        stroke-dasharray={circumference().toString()}
-        stroke-dashoffset={offset()}
-      />
-    </svg>
-  )
-}

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

@@ -1,28 +0,0 @@
-import { Switch as Kobalte } from "@kobalte/core/switch"
-import { Show, splitProps } from "solid-js"
-import type { ComponentProps, ParentProps } from "solid-js"
-import "./switch-v2.css"
-
-export interface SwitchProps extends ParentProps<ComponentProps<typeof Kobalte>> {
-  hideLabel?: boolean
-}
-
-export function Switch(props: SwitchProps) {
-  const [local, others] = splitProps(props, ["children", "class", "hideLabel"])
-  return (
-    <Kobalte {...others} class={local.class} data-component="switch">
-      <Kobalte.Input data-slot="switch-input" />
-      <Show when={local.children}>
-        {(label) => (
-          <Kobalte.Label data-slot="switch-label" classList={{ "sr-only": local.hideLabel }}>
-            {label()}
-          </Kobalte.Label>
-        )}
-      </Show>
-      <Kobalte.Control data-slot="switch-control">
-        <Kobalte.Thumb data-slot="switch-thumb" />
-      </Kobalte.Control>
-      <Kobalte.ErrorMessage data-slot="switch-error" />
-    </Kobalte>
-  )
-}

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

@@ -1,149 +0,0 @@
-import { Tabs as Kobalte } from "@kobalte/core/tabs"
-import { Show, splitProps, type JSX } from "solid-js"
-import type { ComponentProps, ParentProps, Component } from "solid-js"
-import { useI18n } from "../../context/i18n"
-import "./tabs-v2.css"
-
-export interface TabsV2Props extends ComponentProps<typeof Kobalte> {
-  variant?: "normal" | "pill" | "settings"
-  orientation?: "horizontal" | "vertical"
-}
-export interface TabsV2ListProps extends ComponentProps<typeof Kobalte.List> {}
-export interface TabsV2TriggerProps extends ComponentProps<typeof Kobalte.Trigger> {
-  onMiddleClick?: () => void
-  /** Optional subtext shown beside the primary content (muted style) */
-  subtext?: JSX.Element | string
-}
-export interface TabsV2CloseButtonProps extends ComponentProps<"div"> {}
-export interface TabsV2ContentProps extends ComponentProps<typeof Kobalte.Content> {}
-
-function TabsV2Root(props: TabsV2Props) {
-  const [split, rest] = splitProps(props, ["class", "classList", "variant", "orientation"])
-  return (
-    <Kobalte
-      {...rest}
-      orientation={split.orientation}
-      data-component="tabs-v2"
-      data-variant={split.variant || "normal"}
-      data-orientation={split.orientation || "horizontal"}
-      classList={{
-        ...split.classList,
-        [split.class ?? ""]: !!split.class,
-      }}
-    />
-  )
-}
-
-function TabsV2List(props: TabsV2ListProps) {
-  const [split, rest] = splitProps(props, ["class", "classList"])
-  return (
-    <Kobalte.List
-      {...rest}
-      data-slot="tabs-v2-list"
-      classList={{
-        ...split.classList,
-        [split.class ?? ""]: !!split.class,
-      }}
-    />
-  )
-}
-
-function TabsV2Trigger(props: ParentProps<TabsV2TriggerProps>) {
-  const [split, rest] = splitProps(props, ["class", "classList", "children", "onMiddleClick", "subtext"])
-  return (
-    <div
-      data-slot="tabs-v2-trigger-wrapper"
-      data-value={props.value}
-      classList={{
-        ...split.classList,
-        [split.class ?? ""]: !!split.class,
-      }}
-      onMouseDown={(e) => {
-        if (e.button === 1 && split.onMiddleClick) {
-          e.preventDefault()
-        }
-      }}
-      onAuxClick={(e) => {
-        if (e.button === 1 && split.onMiddleClick) {
-          e.preventDefault()
-          split.onMiddleClick()
-        }
-      }}
-    >
-      <Kobalte.Trigger {...rest} data-slot="tabs-v2-trigger" data-value={props.value}>
-        <span class="inline-flex items-center gap-2" data-slot="tabs-v2-trigger-content">
-          {split.children}
-          <Show when={split.subtext}>
-            {(subtext) => (
-              <span data-slot="tabs-v2-subtext" class="ms-2 text-xs text-text-weak">
-                {subtext()}
-              </span>
-            )}
-          </Show>
-        </span>
-      </Kobalte.Trigger>
-    </div>
-  )
-}
-
-function TabsV2CloseButton(props: TabsV2CloseButtonProps) {
-  const i18n = useI18n()
-  const [split, rest] = splitProps(props, ["class", "classList", "onClick"])
-  return (
-    <div
-      role="button"
-      tabindex={0}
-      aria-label={i18n.t("ui.tabs.close")}
-      data-slot="tabs-v2-close-button"
-      {...rest}
-      classList={{
-        [split.class ?? ""]: !!split.class,
-        ...split.classList,
-      }}
-      onClick={(e) => {
-        e.preventDefault()
-        e.stopPropagation()
-        if (typeof split.onClick === "function") {
-          split.onClick(e)
-        }
-      }}
-      onMouseDown={(e) => {
-        e.preventDefault()
-        e.stopPropagation()
-      }}
-    >
-      <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path d="M10.8889 3.11108L3.11108 10.8889" stroke="currentColor" stroke-linejoin="round" />
-        <path d="M3.11108 3.11108L10.8889 10.8889" stroke="currentColor" stroke-linejoin="round" />
-      </svg>
-    </div>
-  )
-}
-
-function TabsV2Content(props: ParentProps<TabsV2ContentProps>) {
-  const [split, rest] = splitProps(props, ["class", "classList", "children"])
-  return (
-    <Kobalte.Content
-      {...rest}
-      data-slot="tabs-v2-content"
-      classList={{
-        ...split.classList,
-        [split.class ?? ""]: !!split.class,
-      }}
-    >
-      {split.children}
-    </Kobalte.Content>
-  )
-}
-
-const TabsV2SectionTitle: Component<ParentProps> = (props) => {
-  return <div data-slot="tabs-v2-section-title">{props.children}</div>
-}
-
-export const TabsV2 = Object.assign(TabsV2Root, {
-  List: TabsV2List,
-  Trigger: TabsV2Trigger,
-  CloseButton: TabsV2CloseButton,
-  Content: TabsV2Content,
-  SectionTitle: TabsV2SectionTitle,
-})

package/src/v2/components/text-shimmer-v2.css

@@ -1,125 +0,0 @@
-* {
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-rendering: geometricPrecision;
-}
-
-[data-component="text-shimmer-v2"] {
-  --_step: 45ms;
-  --_duration: 1200ms;
-  --_swap: 220ms;
-  --_index: 0;
-  --_angle: 90deg;
-  --_spread: 5.2ch;
-  --_size: 360%;
-  --_base-color: var(--v2-text-text-muted);
-  --_peak-color: var(--v2-text-text-base);
-  --_sweep: linear-gradient(
-    var(--_angle),
-    transparent calc(50% - var(--_spread)),
-    var(--_peak-color) 50%,
-    transparent calc(50% + var(--_spread))
-  );
-  --_base: linear-gradient(var(--_base-color), var(--_base-color));
-
-  display: inline-flex;
-  align-items: baseline;
-  font: inherit;
-  letter-spacing: inherit;
-  line-height: inherit;
-  user-select: none;
-}
-
-[data-component="text-shimmer-v2"] [data-slot="text-shimmer-v2-char"] {
-  display: inline-grid;
-  white-space: pre;
-  font: inherit;
-  letter-spacing: inherit;
-  line-height: inherit;
-}
-
-[data-component="text-shimmer-v2"] [data-slot="text-shimmer-v2-base"],
-[data-component="text-shimmer-v2"] [data-slot="text-shimmer-v2-shimmer"] {
-  grid-area: 1 / 1;
-  white-space: pre;
-  transition: opacity var(--_swap) ease-out;
-  font: inherit;
-  letter-spacing: inherit;
-  line-height: inherit;
-}
-
-[data-component="text-shimmer-v2"] [data-slot="text-shimmer-v2-base"] {
-  color: inherit;
-  opacity: 1;
-}
-
-[data-component="text-shimmer-v2"] [data-slot="text-shimmer-v2-shimmer"] {
-  color: var(--_base-color);
-  opacity: 0;
-}
-
-[data-component="text-shimmer-v2"][data-active="true"] [data-slot="text-shimmer-v2-shimmer"] {
-  opacity: 1;
-}
-
-[data-component="text-shimmer-v2"] [data-slot="text-shimmer-v2-shimmer"][data-run="true"] {
-  animation-name: text-shimmer-v2-sweep;
-  animation-duration: var(--_duration);
-  animation-iteration-count: infinite;
-  animation-timing-function: linear;
-  animation-fill-mode: both;
-  animation-delay: calc(var(--_step) * var(--_index) * -1);
-  will-change: background-position;
-}
-
-@keyframes text-shimmer-v2-sweep {
-  0% {
-    background-position:
-      100% 0,
-      0 0;
-  }
-  100% {
-    background-position:
-      0% 0,
-      0 0;
-  }
-}
-
-@supports ((-webkit-background-clip: text) or (background-clip: text)) {
-  [data-component="text-shimmer-v2"] [data-slot="text-shimmer-v2-shimmer"] {
-    color: transparent;
-    -webkit-text-fill-color: transparent;
-    background-image: var(--_sweep), var(--_base);
-    background-size:
-      var(--_size) 100%,
-      100% 100%;
-    background-position:
-      100% 0,
-      0 0;
-    background-repeat: no-repeat;
-    -webkit-background-clip: text;
-    background-clip: text;
-  }
-
-  [data-component="text-shimmer-v2"][data-active="true"] [data-slot="text-shimmer-v2-base"] {
-    opacity: 0;
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  [data-component="text-shimmer-v2"] [data-slot="text-shimmer-v2-base"],
-  [data-component="text-shimmer-v2"] [data-slot="text-shimmer-v2-shimmer"] {
-    transition-duration: 0ms;
-  }
-
-  [data-component="text-shimmer-v2"] [data-slot="text-shimmer-v2-shimmer"] {
-    animation: none !important;
-    color: inherit;
-    -webkit-text-fill-color: currentColor;
-    background-image: none;
-  }
-
-  [data-component="text-shimmer-v2"] [data-slot="text-shimmer-v2-base"] {
-    opacity: 1 !important;
-  }
-}