@opencode-ai/ui 0.0.0-beta-202606251302

package/src/components/tabs.tsx

@@ -0,0 +1,125 @@
+import { Tabs as Kobalte } from "@kobalte/core/tabs"
+import { Show, splitProps, type JSX } from "solid-js"
+import type { ComponentProps, ParentProps, Component } from "solid-js"
+
+export interface TabsProps extends ComponentProps<typeof Kobalte> {
+  variant?: "normal" | "alt" | "pill" | "settings"
+  orientation?: "horizontal" | "vertical"
+}
+export interface TabsListProps extends ComponentProps<typeof Kobalte.List> {}
+export interface TabsTriggerProps extends ComponentProps<typeof Kobalte.Trigger> {
+  classes?: {
+    button?: string
+  }
+  hideCloseButton?: boolean
+  closeButton?: JSX.Element
+  onMiddleClick?: () => void
+}
+export interface TabsContentProps extends ComponentProps<typeof Kobalte.Content> {}
+
+function TabsRoot(props: TabsProps) {
+  const [split, rest] = splitProps(props, ["class", "classList", "variant", "orientation"])
+  return (
+    <Kobalte
+      {...rest}
+      orientation={split.orientation}
+      data-component="tabs"
+      data-variant={split.variant || "normal"}
+      data-orientation={split.orientation || "horizontal"}
+      classList={{
+        ...split.classList,
+        [split.class ?? ""]: !!split.class,
+      }}
+    />
+  )
+}
+
+function TabsList(props: TabsListProps) {
+  const [split, rest] = splitProps(props, ["class", "classList"])
+  return (
+    <Kobalte.List
+      {...rest}
+      data-slot="tabs-list"
+      classList={{
+        ...split.classList,
+        [split.class ?? ""]: !!split.class,
+      }}
+    />
+  )
+}
+
+function TabsTrigger(props: ParentProps<TabsTriggerProps>) {
+  const [split, rest] = splitProps(props, [
+    "class",
+    "classList",
+    "classes",
+    "children",
+    "closeButton",
+    "hideCloseButton",
+    "onMiddleClick",
+  ])
+  return (
+    <div
+      data-slot="tabs-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-trigger"
+        data-value={props.value}
+        classList={{ [split.classes?.button ?? ""]: split.classes?.button }}
+      >
+        {split.children}
+      </Kobalte.Trigger>
+      <Show when={split.closeButton}>
+        {(closeButton) => (
+          <div data-slot="tabs-trigger-close-button" data-hidden={split.hideCloseButton}>
+            {closeButton()}
+          </div>
+        )}
+      </Show>
+    </div>
+  )
+}
+
+function TabsContent(props: ParentProps<TabsContentProps>) {
+  const [split, rest] = splitProps(props, ["class", "classList", "children"])
+  return (
+    <Kobalte.Content
+      {...rest}
+      data-slot="tabs-content"
+      classList={{
+        ...split.classList,
+        [split.class ?? ""]: !!split.class,
+      }}
+    >
+      {split.children}
+    </Kobalte.Content>
+  )
+}
+
+const TabsSectionTitle: Component<ParentProps> = (props) => {
+  return <div data-slot="tabs-section-title">{props.children}</div>
+}
+
+export const Tabs = Object.assign(TabsRoot, {
+  List: TabsList,
+  Trigger: TabsTrigger,
+  Content: TabsContent,
+  SectionTitle: TabsSectionTitle,
+})

package/src/components/tag.css

@@ -0,0 +1,37 @@
+[data-component="tag"] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  user-select: none;
+
+  border-radius: var(--radius-xs);
+  border: 0.5px solid var(--border-weak-base);
+  background: var(--surface-raised-base);
+  color: var(--text-base);
+
+  &[data-size="normal"] {
+    height: 18px;
+    padding: 0 6px;
+
+    /* text-12-medium */
+    font-family: var(--font-family-sans);
+    font-size: var(--font-size-small);
+    font-style: normal;
+    font-weight: var(--font-weight-medium);
+    line-height: var(--line-height-large); /* 166.667% */
+    letter-spacing: var(--letter-spacing-normal);
+  }
+
+  &[data-size="large"] {
+    height: 22px;
+    padding: 0 8px;
+
+    /* text-14-medium */
+    font-family: var(--font-family-sans);
+    font-size: 14px;
+    font-style: normal;
+    font-weight: var(--font-weight-medium);
+    line-height: var(--line-height-large); /* 142.857% */
+    letter-spacing: var(--letter-spacing-normal);
+  }
+}

package/src/components/tag.tsx

@@ -0,0 +1,22 @@
+import { type ComponentProps, splitProps } from "solid-js"
+
+export interface TagProps extends ComponentProps<"span"> {
+  size?: "normal" | "large"
+}
+
+export function Tag(props: TagProps) {
+  const [split, rest] = splitProps(props, ["size", "class", "classList", "children"])
+  return (
+    <span
+      {...rest}
+      data-component="tag"
+      data-size={split.size || "normal"}
+      classList={{
+        ...split.classList,
+        [split.class ?? ""]: !!split.class,
+      }}
+    >
+      {split.children}
+    </span>
+  )
+}

package/src/components/text-field.css

@@ -0,0 +1,134 @@
+[data-component="input"] {
+  width: 100%;
+
+  [data-slot="input-input"] {
+    width: 100%;
+    color: var(--text-strong);
+
+    /* text-14-regular */
+    font-family: var(--font-family-sans);
+    font-size: 14px;
+    font-style: normal;
+    font-weight: var(--font-weight-regular);
+    line-height: var(--line-height-large); /* 142.857% */
+    letter-spacing: var(--letter-spacing-normal);
+
+    &:focus {
+      outline: none;
+    }
+
+    &::placeholder {
+      color: var(--text-weak);
+    }
+  }
+
+  &[data-variant="normal"] {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+
+    [data-slot="input-label"] {
+      color: var(--text-weak);
+
+      /* text-12-medium */
+      font-family: var(--font-family-sans);
+      font-size: var(--font-size-small);
+      font-style: normal;
+      font-weight: var(--font-weight-medium);
+      line-height: 18px; /* 150% */
+      letter-spacing: var(--letter-spacing-normal);
+    }
+
+    [data-slot="input-wrapper"] {
+      display: flex;
+      align-items: start;
+      justify-content: space-between;
+      width: 100%;
+      padding-right: 4px;
+
+      border-radius: var(--radius-md);
+      border: 1px solid var(--border-weak-base);
+      background: var(--input-base);
+
+      &:focus-within:not(:has([data-readonly])) {
+        border-color: transparent;
+        /* border/shadow-xs/select */
+        box-shadow:
+          0 0 0 3px var(--border-weak-selected),
+          0 0 0 1px var(--border-selected),
+          0 1px 2px -1px rgba(19, 16, 16, 0.25),
+          0 1px 2px 0 rgba(19, 16, 16, 0.08),
+          0 1px 3px 0 rgba(19, 16, 16, 0.12);
+      }
+
+      &:has([data-invalid]) {
+        background: var(--surface-critical-weak);
+        border: 1px solid var(--border-critical-selected);
+      }
+
+      &:not(:has([data-slot="input-copy-button"])) {
+        padding-right: 0;
+      }
+    }
+
+    [data-slot="input-input"] {
+      color: var(--text-strong);
+
+      display: flex;
+      height: 32px;
+      padding: 2px 12px;
+      align-items: center;
+      flex: 1;
+      min-width: 0;
+
+      background: transparent;
+      border: none;
+
+      /* text-14-regular */
+      font-family: var(--font-family-sans);
+      font-size: 14px;
+      font-style: normal;
+      font-weight: var(--font-weight-regular);
+      line-height: var(--line-height-large); /* 142.857% */
+      letter-spacing: var(--letter-spacing-normal);
+
+      &:focus {
+        outline: none;
+      }
+
+      &::placeholder {
+        color: var(--text-weak);
+      }
+    }
+
+    textarea[data-slot="input-input"] {
+      height: auto;
+      min-height: 32px;
+      padding: 6px 12px;
+      resize: none;
+    }
+
+    [data-slot="input-copy-button"] {
+      flex-shrink: 0;
+      margin-top: 4px;
+      color: var(--icon-base);
+
+      &:hover {
+        color: var(--icon-strong-base);
+      }
+    }
+
+    [data-slot="input-error"] {
+      color: var(--text-on-critical-base);
+
+      /* text-12-medium */
+      font-family: var(--font-family-sans);
+      font-size: var(--font-size-small);
+      font-style: normal;
+      font-weight: var(--font-weight-medium);
+      line-height: 18px; /* 150% */
+      letter-spacing: var(--letter-spacing-normal);
+    }
+  }
+}

package/src/components/text-field.tsx

@@ -0,0 +1,128 @@
+import { TextField as Kobalte } from "@kobalte/core/text-field"
+import { createSignal, Show, splitProps } from "solid-js"
+import type { ComponentProps } from "solid-js"
+import { useI18n } from "../context/i18n"
+import { IconButton } from "./icon-button"
+import { Tooltip } from "./tooltip"
+
+export interface TextFieldProps
+  extends ComponentProps<typeof Kobalte.Input>,
+    Partial<
+      Pick<
+        ComponentProps<typeof Kobalte>,
+        | "name"
+        | "defaultValue"
+        | "value"
+        | "onChange"
+        | "onKeyDown"
+        | "validationState"
+        | "required"
+        | "disabled"
+        | "readOnly"
+      >
+    > {
+  label?: string
+  hideLabel?: boolean
+  description?: string
+  error?: string
+  variant?: "normal" | "ghost"
+  copyable?: boolean
+  copyKind?: "clipboard" | "link"
+  multiline?: boolean
+}
+
+export function TextField(props: TextFieldProps) {
+  const i18n = useI18n()
+  const [local, others] = splitProps(props, [
+    "name",
+    "defaultValue",
+    "value",
+    "onChange",
+    "onKeyDown",
+    "validationState",
+    "required",
+    "disabled",
+    "readOnly",
+    "class",
+    "label",
+    "hideLabel",
+    "description",
+    "error",
+    "variant",
+    "copyable",
+    "copyKind",
+    "multiline",
+  ])
+  const [copied, setCopied] = createSignal(false)
+
+  const label = () => {
+    if (copied()) return i18n.t("ui.textField.copied")
+    if (local.copyKind === "link") return i18n.t("ui.textField.copyLink")
+    return i18n.t("ui.textField.copyToClipboard")
+  }
+
+  const icon = () => {
+    if (copied()) return "check"
+    if (local.copyKind === "link") return "link"
+    return "copy"
+  }
+
+  async function handleCopy() {
+    const value = local.value ?? local.defaultValue ?? ""
+    await navigator.clipboard.writeText(value)
+    setCopied(true)
+    setTimeout(() => setCopied(false), 2000)
+  }
+
+  function handleClick() {
+    if (local.copyable) void handleCopy()
+  }
+
+  return (
+    <Kobalte
+      data-component="input"
+      data-variant={local.variant || "normal"}
+      name={local.name}
+      defaultValue={local.defaultValue}
+      value={local.value}
+      onChange={local.onChange}
+      onKeyDown={local.onKeyDown}
+      onClick={handleClick}
+      required={local.required}
+      disabled={local.disabled}
+      readOnly={local.readOnly}
+      validationState={local.validationState}
+    >
+      <Show when={local.label}>
+        <Kobalte.Label data-slot="input-label" classList={{ "sr-only": local.hideLabel }}>
+          {local.label}
+        </Kobalte.Label>
+      </Show>
+      <div data-slot="input-wrapper">
+        <Show
+          when={local.multiline}
+          fallback={<Kobalte.Input {...others} data-slot="input-input" class={local.class} />}
+        >
+          <Kobalte.TextArea {...others} autoResize data-slot="input-input" class={local.class} />
+        </Show>
+        <Show when={local.copyable}>
+          <Tooltip value={label()} placement="top" gutter={4} forceOpen={copied()} skipDelayDuration={0}>
+            <IconButton
+              type="button"
+              icon={icon()}
+              variant="ghost"
+              onClick={handleCopy}
+              tabIndex={-1}
+              data-slot="input-copy-button"
+              aria-label={label()}
+            />
+          </Tooltip>
+        </Show>
+      </div>
+      <Show when={local.description}>
+        <Kobalte.Description data-slot="input-description">{local.description}</Kobalte.Description>
+      </Show>
+      <Kobalte.ErrorMessage data-slot="input-error">{local.error}</Kobalte.ErrorMessage>
+    </Kobalte>
+  )
+}

package/src/components/text-reveal.css

@@ -0,0 +1,150 @@
+/*
+ * TextReveal — mask-position wipe animation
+ *
+ * Instead of sliding text through a fixed mask (odometer style),
+ * the mask itself sweeps across each span to reveal/hide text.
+ *
+ * Direction: top-to-bottom. New text drops in from above, old text exits downward.
+ *
+ * Entering: gradient reveals top-to-bottom (top of text appears first).
+ *   gradient(to bottom, white 33%, transparent 33%+edge)
+ *   pos 0 100% = transparent covers element = hidden
+ *   pos 0 0%   = white covers element       = visible
+ *
+ * Leaving: gradient hides top-to-bottom (top of text disappears first).
+ *   gradient(to top, white 33%, transparent 33%+edge)
+ *   pos 0 100% = white covers element       = visible
+ *   pos 0 0%   = transparent covers element = hidden
+ *
+ * Both transition from 0 100% (swap) → 0 0% (settled).
+ */
+
+[data-component="text-reveal"] {
+  --_edge: var(--text-reveal-edge, 17%);
+  --_dur: var(--text-reveal-duration, 450ms);
+  --_spring: var(--text-reveal-spring, cubic-bezier(0.34, 1.08, 0.64, 1));
+  --_spring-soft: var(--text-reveal-spring-soft, cubic-bezier(0.34, 1, 0.64, 1));
+  --_travel: var(--text-reveal-travel, 0px);
+
+  display: inline-flex;
+  align-items: center;
+  min-width: 0;
+  overflow: visible;
+
+  [data-slot="text-reveal-track"] {
+    display: grid;
+    min-height: 20px;
+    line-height: 20px;
+    justify-items: start;
+    align-items: center;
+    overflow: visible;
+    transition: width var(--_dur) var(--_spring-soft);
+  }
+
+  [data-slot="text-reveal-entering"],
+  [data-slot="text-reveal-leaving"] {
+    grid-area: 1 / 1;
+    line-height: 20px;
+    white-space: nowrap;
+    justify-self: start;
+    text-align: start;
+    mask-size: 100% 300%;
+    -webkit-mask-size: 100% 300%;
+    mask-repeat: no-repeat;
+    -webkit-mask-repeat: no-repeat;
+    transition-duration: var(--_dur);
+    transition-timing-function: var(--_spring);
+  }
+
+  /* ── entering: reveal top-to-bottom ──
+   * Gradient(to top): white at bottom, transparent at top of mask.
+   * Settled pos 0 100% = white covers element   = visible
+   * Swap    pos 0 0%   = transparent covers      = hidden
+   * Slides from above: translateY(-travel) → translateY(0)
+   */
+  [data-slot="text-reveal-entering"] {
+    mask-image: linear-gradient(to top, white 33%, transparent calc(33% + var(--_edge)));
+    -webkit-mask-image: linear-gradient(to top, white 33%, transparent calc(33% + var(--_edge)));
+    mask-position: 0 100%;
+    -webkit-mask-position: 0 100%;
+    transition-property:
+      mask-position,
+      -webkit-mask-position,
+      transform;
+    transform: translateY(0);
+  }
+
+  /* ── leaving: hide top-to-bottom + slide downward ──
+   * Gradient(to bottom): white at top, transparent at bottom of mask.
+   * Swap    pos 0 0%   = white covers element   = visible
+   * Settled pos 0 100% = transparent covers      = hidden
+   * Slides down: translateY(0) → translateY(travel)
+   */
+  [data-slot="text-reveal-leaving"] {
+    mask-image: linear-gradient(to bottom, white 33%, transparent calc(33% + var(--_edge)));
+    -webkit-mask-image: linear-gradient(to bottom, white 33%, transparent calc(33% + var(--_edge)));
+    mask-position: 0 100%;
+    -webkit-mask-position: 0 100%;
+    transition-property:
+      mask-position,
+      -webkit-mask-position,
+      transform;
+    transform: translateY(var(--_travel));
+  }
+
+  /* ── swapping: instant reset ──
+   * Snap entering to hidden (above), leaving to visible (center).
+   */
+  &[data-swapping="true"] [data-slot="text-reveal-entering"] {
+    mask-position: 0 0%;
+    -webkit-mask-position: 0 0%;
+    transform: translateY(calc(var(--_travel) * -1));
+    transition-duration: 0ms !important;
+  }
+
+  &[data-swapping="true"] [data-slot="text-reveal-leaving"] {
+    mask-position: 0 0%;
+    -webkit-mask-position: 0 0%;
+    transform: translateY(0);
+    transition-duration: 0ms !important;
+  }
+
+  /* ── not ready: kill all transitions ── */
+  &[data-ready="false"] [data-slot="text-reveal-track"] {
+    transition-duration: 0ms !important;
+  }
+
+  &[data-ready="false"] [data-slot="text-reveal-entering"],
+  &[data-ready="false"] [data-slot="text-reveal-leaving"] {
+    transition-duration: 0ms !important;
+  }
+
+  &[data-truncate="true"] {
+    width: 100%;
+  }
+
+  &[data-truncate="true"] [data-slot="text-reveal-track"] {
+    width: 100%;
+    min-width: 0;
+    overflow: hidden;
+  }
+
+  &[data-truncate="true"] [data-slot="text-reveal-entering"],
+  &[data-truncate="true"] [data-slot="text-reveal-leaving"] {
+    min-width: 0;
+    width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-component="text-reveal"] [data-slot="text-reveal-track"] {
+    transition-duration: 0ms !important;
+  }
+
+  [data-component="text-reveal"] [data-slot="text-reveal-entering"],
+  [data-component="text-reveal"] [data-slot="text-reveal-leaving"] {
+    transition-duration: 0ms !important;
+  }
+}