@opencode-ai/ui 0.0.0-beta-202606251302

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

@@ -0,0 +1,147 @@
+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 "./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="ml-2 text-xs text-text-weak">
+                {subtext()}
+              </span>
+            )}
+          </Show>
+        </span>
+      </Kobalte.Trigger>
+    </div>
+  )
+}
+
+function TabsV2CloseButton(props: TabsV2CloseButtonProps) {
+  const [split, rest] = splitProps(props, ["class", "classList", "onClick"])
+  return (
+    <div
+      role="button"
+      tabindex={0}
+      aria-label="Close tab"
+      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-input-v2.css

@@ -0,0 +1,145 @@
+[data-component="text-input-v2"] {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+  padding: 0 8px 0 0;
+  gap: 8px;
+  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;
+  transition:
+    background 85ms ease-out,
+    outline-color 85ms ease-out,
+    box-shadow 85ms ease-out;
+}
+
+[data-component="text-input-v2"][data-appearance="large"] {
+  height: 32px;
+}
+
+[data-component="text-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="text-input-v2"]:where(:focus-within):not([data-disabled], [data-invalid]) {
+  outline-color: var(--v2-border-border-focus);
+  box-shadow: none;
+}
+
+[data-component="text-input-v2"]:where([data-invalid]):not([data-disabled]) {
+  outline-color: var(--v2-state-fg-danger);
+  box-shadow: none;
+}
+
+[data-component="text-input-v2"]:where([data-disabled]) {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+[data-component="text-input-v2"] [data-slot="text-input-v2-value"] {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  align-self: stretch;
+  padding: 0;
+  min-width: 0;
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
+[data-component="text-input-v2"] [data-slot="text-input-v2-input"] {
+  display: block;
+  width: 100%;
+  min-width: 0;
+  height: 100%;
+  padding: 0 0 0 8px;
+  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="text-input-v2"] [data-slot="text-input-v2-input"]::placeholder {
+  color: var(--v2-text-text-faint);
+}
+
+[data-component="text-input-v2"][data-numeric] [data-slot="text-input-v2-input"] {
+  font-variant-numeric: tabular-nums;
+}
+
+[data-component="text-input-v2"] [data-slot="text-input-v2-icon-button"] {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  align-self: 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="text-input-v2"]
+  [data-slot="text-input-v2-icon-button"]:is(:hover, [data-state="hover"]):not(:disabled) {
+  background-color: var(--v2-overlay-simple-overlay-hover);
+}
+
+[data-component="text-input-v2"]
+  [data-slot="text-input-v2-icon-button"]:is(:active, [data-state="pressed"]):not(:disabled) {
+  background-color: var(--v2-overlay-simple-overlay-pressed);
+}
+
+[data-component="text-input-v2"] [data-slot="text-input-v2-icon-button"]:focus {
+  outline: none;
+}
+
+[data-component="text-input-v2"] [data-slot="text-input-v2-icon-button"]:focus-visible {
+  outline: 2px solid var(--v2-border-border-focus);
+  outline-offset: 1px;
+}
+
+[data-component="text-input-v2"]:where([data-disabled]) [data-slot="text-input-v2-icon-button"] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+[data-component="text-input-v2"] [data-slot="text-input-v2-icon-button"] [data-slot="icon-svg"] {
+  display: block;
+  flex: none;
+  color: currentColor;
+}
+
+[data-component="text-input-v2"][data-invalid]:not([data-disabled]) [data-slot="text-input-v2-input"] {
+  color: var(--v2-state-fg-danger);
+  caret-color: var(--v2-state-fg-danger);
+}
+
+[data-component="text-input-v2"][data-invalid]:not([data-disabled]) [data-slot="text-input-v2-input"]::placeholder {
+  color: var(--v2-state-fg-danger);
+  opacity: 1;
+}

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

@@ -0,0 +1,67 @@
+import { type ComponentProps, Show, splitProps } from "solid-js"
+import { Icon } from "./icon"
+import "./text-input-v2.css"
+
+export interface TextInputV2Props extends Omit<ComponentProps<"input">, "type"> {
+  /** Show the trailing copy action. */
+  showCopyButton?: boolean
+  /** Accessible label for the copy button. */
+  copyLabel?: string
+  onCopyClick?: (event: MouseEvent) => void
+  /** Apply tabular numerals to the 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 TextInputV2(props: TextInputV2Props) {
+  const [local, inputProps] = splitProps(props, [
+    "class",
+    "classList",
+    "showCopyButton",
+    "copyLabel",
+    "onCopyClick",
+    "numeric",
+    "invalid",
+    "appearance",
+    "disabled",
+  ])
+
+  return (
+    <div
+      data-component="text-input-v2"
+      data-disabled={local.disabled ? "" : undefined}
+      data-invalid={local.invalid ? "" : undefined}
+      data-numeric={local.numeric ? "" : undefined}
+      data-appearance={local.appearance ?? "base"}
+      classList={{
+        ...local.classList,
+        [local.class ?? ""]: !!local.class,
+      }}
+    >
+      <div data-slot="text-input-v2-value">
+        <input
+          {...inputProps}
+          type={inputProps.type ?? "text"}
+          disabled={local.disabled}
+          aria-invalid={local.invalid ? true : undefined}
+          data-slot="text-input-v2-input"
+        />
+      </div>
+      <Show when={local.showCopyButton}>
+        <button
+          type="button"
+          data-slot="text-input-v2-icon-button"
+          aria-label={local.copyLabel ?? "Copy"}
+          disabled={local.disabled}
+          onClick={local.onCopyClick}
+        >
+          <Icon name="copy" />
+        </button>
+      </Show>
+    </div>
+  )
+}

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

@@ -0,0 +1,125 @@
+* {
+  -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;
+  }
+}

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

@@ -0,0 +1,63 @@
+import { createEffect, createMemo, createSignal, onCleanup, type ValidComponent } from "solid-js"
+import { Dynamic } from "solid-js/web"
+import "./text-shimmer-v2.css"
+
+export const TextShimmerV2 = <T extends ValidComponent = "span">(props: {
+  text: string
+  class?: string
+  as?: T
+  active?: boolean
+  offset?: number
+}) => {
+  const text = createMemo(() => props.text ?? "")
+  const active = createMemo(() => props.active ?? true)
+  const offset = createMemo(() => props.offset ?? 0)
+  const [run, setRun] = createSignal(active())
+  const swap = 220
+  let timer: ReturnType<typeof setTimeout> | undefined
+
+  createEffect(() => {
+    if (timer) {
+      clearTimeout(timer)
+      timer = undefined
+    }
+
+    if (active()) {
+      setRun(true)
+      return
+    }
+
+    timer = setTimeout(() => {
+      timer = undefined
+      setRun(false)
+    }, swap)
+  })
+
+  onCleanup(() => {
+    if (!timer) return
+    clearTimeout(timer)
+  })
+
+  return (
+    <Dynamic
+      component={props.as ?? "span"}
+      data-component="text-shimmer-v2"
+      data-active={active() ? "true" : "false"}
+      class={props.class}
+      aria-label={text()}
+      style={{
+        "--_swap": `${swap}ms`,
+        "--_index": `${offset()}`,
+      }}
+    >
+      <span data-slot="text-shimmer-v2-char">
+        <span data-slot="text-shimmer-v2-base" aria-hidden="true">
+          {text()}
+        </span>
+        <span data-slot="text-shimmer-v2-shimmer" data-run={run() ? "true" : "false"} aria-hidden="true">
+          {text()}
+        </span>
+      </span>
+    </Dynamic>
+  )
+}

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

@@ -0,0 +1,78 @@
+[data-component="textarea-v2"] {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  padding: 0 2px 2px 0;
+  width: 280px;
+  min-height: 80px;
+  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;
+  transition:
+    background 85ms ease-out,
+    outline-color 85ms ease-out,
+    box-shadow 85ms ease-out;
+}
+
+[data-component="textarea-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="textarea-v2"]:where(:focus-within):not([data-disabled], [data-invalid]) {
+  outline-color: var(--v2-border-border-focus);
+  box-shadow: none;
+}
+
+[data-component="textarea-v2"]:where([data-invalid]):not([data-disabled]) {
+  outline-color: var(--v2-state-fg-danger);
+  box-shadow: none;
+}
+
+[data-component="textarea-v2"]:where([data-disabled]) {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+[data-component="textarea-v2"] [data-slot="textarea-v2-textarea"] {
+  display: block;
+  width: 100%;
+  min-width: 0;
+  min-height: 80px;
+  height: 100%;
+  padding: 8px;
+  margin: 0;
+  border: 0;
+  background: transparent;
+  outline: none;
+  resize: vertical;
+  font-style: normal;
+  font-weight: 440;
+  font-size: 13px;
+  line-height: 1.35;
+  letter-spacing: -0.04px;
+  color: var(--v2-text-text-base);
+  font-variation-settings: "slnt" 0;
+}
+
+[data-component="textarea-v2"] [data-slot="textarea-v2-textarea"]::placeholder {
+  color: var(--v2-text-text-faint);
+}
+
+[data-component="textarea-v2"][data-invalid]:not([data-disabled]) [data-slot="textarea-v2-textarea"] {
+  color: var(--v2-state-fg-danger);
+  caret-color: var(--v2-state-fg-danger);
+}
+
+[data-component="textarea-v2"][data-invalid]:not([data-disabled]) [data-slot="textarea-v2-textarea"]::placeholder {
+  color: var(--v2-state-fg-danger);
+  opacity: 1;
+}

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

@@ -0,0 +1,31 @@
+import { type ComponentProps, splitProps } from "solid-js"
+import "./textarea-v2.css"
+
+export interface TextareaV2Props extends ComponentProps<"textarea"> {
+  /** Error styling for the field and value text. */
+  invalid?: boolean
+}
+
+export function TextareaV2(props: TextareaV2Props) {
+  const [local, textareaProps] = splitProps(props, ["class", "classList", "invalid", "disabled", "rows"])
+
+  return (
+    <div
+      data-component="textarea-v2"
+      data-disabled={local.disabled ? "" : undefined}
+      data-invalid={local.invalid ? "" : undefined}
+      classList={{
+        ...local.classList,
+        [local.class ?? ""]: !!local.class,
+      }}
+    >
+      <textarea
+        {...textareaProps}
+        rows={local.rows ?? 3}
+        disabled={local.disabled}
+        aria-invalid={local.invalid ? true : undefined}
+        data-slot="textarea-v2-textarea"
+      />
+    </div>
+  )
+}