@opencode/ui 0.0.0-reserved → 2.0.0

package/src/forms/switch/switch.css

@@ -0,0 +1,272 @@
+[data-component="switch"] {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: default;
+
+  [data-slot="switch-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="switch-control"] {
+    box-sizing: border-box;
+    display: inline-flex;
+    justify-content: flex-start;
+    align-items: center;
+    padding: 2px;
+    width: 24px;
+    height: 16px;
+    flex-shrink: 0;
+    border-radius: 4px;
+    border: none;
+    background:
+      linear-gradient(180deg, var(--v2-alpha-light-0) 0%, var(--v2-alpha-light-20) 100%),
+      var(--v2-background-bg-layer-04);
+    box-shadow: var(--v2-elevation-switch-off);
+    transition:
+      background 90ms ease-out,
+      opacity 90ms ease-out,
+      outline-color 90ms ease-out;
+  }
+
+  [data-slot="switch-thumb"] {
+    box-sizing: border-box;
+    width: 12px;
+    height: 12px;
+    transform: translateX(0);
+    border-radius: 2px;
+    border: 0.5px solid var(--v2-overlay-gradient-depth-overlay-depth-top);
+    background:
+      linear-gradient(
+        180deg,
+        var(--v2-overlay-gradient-depth-overlay-depth-top) 0%,
+        var(--v2-overlay-gradient-depth-overlay-depth-bot) 100%
+      ),
+      var(--v2-grey-200);
+    box-shadow: var(--v2-elevation-elements);
+    transition:
+      transform 90ms ease-out,
+      width 90ms ease-out,
+      border-radius 90ms,
+      background 90ms;
+  }
+
+  [data-slot="switch-label"] {
+    display: inline-flex;
+    align-items: center;
+    height: 16px;
+    user-select: none;
+    color: var(--v2-text-text-faint);
+    font-size: 11px;
+    font-style: normal;
+    font-weight: 440;
+    line-height: 16px;
+    letter-spacing: 0.05px;
+    font-variation-settings: "slnt" 0;
+  }
+
+  [data-slot="switch-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="switch-error"]:empty {
+    display: none;
+  }
+
+  &:hover:not([data-disabled], [data-readonly]) [data-slot="switch-control"] {
+    background:
+      linear-gradient(0deg, var(--v2-overlay-simple-overlay-hover), var(--v2-overlay-simple-overlay-hover)),
+      linear-gradient(180deg, var(--v2-alpha-light-0) 0%, var(--v2-alpha-light-20) 100%),
+      var(--v2-background-bg-layer-04);
+  }
+
+  &:hover:not([data-disabled], [data-readonly]) [data-slot="switch-thumb"] {
+    width: 13px;
+    border-radius: 3px;
+  }
+
+  &:not([data-readonly]) [data-slot="switch-input"]:focus-visible ~ [data-slot="switch-control"] {
+    outline: 2px solid var(--v2-border-border-focus);
+    outline-offset: 1px;
+  }
+
+  &[data-checked] [data-slot="switch-control"] {
+    background:
+      linear-gradient(180deg, var(--v2-alpha-light-0) 0%, var(--v2-alpha-light-10) 100%), var(--v2-background-bg-accent);
+    box-shadow: var(--v2-elevation-switch-on);
+  }
+
+  &[data-checked] [data-slot="switch-thumb"] {
+    transform: translateX(8px);
+    border-radius: 2px;
+    background:
+      linear-gradient(
+        180deg,
+        var(--v2-overlay-gradient-depth-overlay-depth-top) 0%,
+        var(--v2-overlay-gradient-depth-overlay-depth-bot) 100%
+      ),
+      var(--v2-grey-300);
+  }
+
+  &:dir(rtl)[data-checked] [data-slot="switch-thumb"] {
+    transform: translateX(-8px);
+  }
+
+  &[data-checked]:hover:not([data-disabled], [data-readonly]) [data-slot="switch-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-0) 0%, var(--v2-alpha-light-10) 100%), var(--v2-background-bg-accent);
+  }
+
+  &[data-checked]:hover:not([data-disabled], [data-readonly]) [data-slot="switch-thumb"] {
+    transform: translateX(7px);
+  }
+
+  &:dir(rtl)[data-checked]:hover:not([data-disabled], [data-readonly]) [data-slot="switch-thumb"] {
+    transform: translateX(-7px);
+  }
+
+  &[data-disabled] {
+    cursor: not-allowed;
+  }
+
+  &[data-disabled] [data-slot="switch-control"] {
+    opacity: 0.5;
+  }
+
+  &[data-invalid] [data-slot="switch-control"] {
+    border-color: var(--v2-state-border-danger);
+  }
+
+  &[data-readonly] {
+    cursor: default;
+    pointer-events: none;
+  }
+}
+
+[data-component="switch"][data-appearance="standard"] {
+  [data-slot="switch-control"] {
+    padding: 0;
+    width: 28px;
+    height: 16px;
+    border-radius: 3px;
+    border: 1px solid var(--border-weak-base);
+    background: var(--surface-base);
+    box-shadow: none;
+    transition:
+      background-color 150ms,
+      border-color 150ms;
+  }
+
+  [data-slot="switch-thumb"] {
+    box-sizing: content-box;
+    width: 14px;
+    height: 14px;
+    border-radius: 2px;
+    border: 1px solid var(--border-base);
+    background: var(--icon-invert-base);
+    box-shadow:
+      0 1px 2px -1px rgba(19, 16, 16, 0.04),
+      0 1px 2px 0 rgba(19, 16, 16, 0.06),
+      0 1px 3px 0 rgba(19, 16, 16, 0.08);
+    transform: translateX(-1px);
+    transition:
+      transform 150ms,
+      background-color 150ms;
+  }
+
+  [data-slot="switch-label"] {
+    color: var(--text-base);
+    font-family: var(--font-family-sans);
+    font-size: var(--font-size-small);
+    font-style: normal;
+    font-weight: var(--font-weight-regular);
+    line-height: var(--line-height-large);
+    letter-spacing: var(--letter-spacing-normal);
+  }
+
+  [data-slot="switch-description"] {
+    color: var(--text-base);
+    font-family: var(--font-family-sans);
+    font-size: 12px;
+    font-weight: var(--font-weight-regular);
+    line-height: var(--line-height-normal);
+    letter-spacing: var(--letter-spacing-normal);
+  }
+
+  [data-slot="switch-error"] {
+    color: var(--text-error);
+  }
+
+  &:hover:not([data-disabled], [data-readonly]) [data-slot="switch-control"] {
+    border-color: var(--border-hover);
+    background: var(--surface-hover);
+  }
+
+  &:hover:not([data-disabled], [data-readonly]) [data-slot="switch-thumb"] {
+    width: 14px;
+    border-radius: 2px;
+  }
+
+  &:not([data-readonly]) [data-slot="switch-input"]:focus-visible ~ [data-slot="switch-control"] {
+    border-color: var(--border-focus);
+    outline: none;
+    box-shadow: var(--shadow-xs-border-focus);
+  }
+
+  &[data-checked] [data-slot="switch-control"] {
+    border-color: var(--icon-strong-base);
+    background: var(--icon-strong-base);
+    box-shadow: none;
+  }
+
+  &[data-checked] [data-slot="switch-thumb"],
+  &[data-checked]:hover:not([data-disabled], [data-readonly]) [data-slot="switch-thumb"] {
+    width: 14px;
+    border: none;
+    border-radius: 2px;
+    transform: translateX(12px);
+    background: var(--icon-invert-base);
+  }
+
+  &:dir(rtl)[data-checked] [data-slot="switch-thumb"],
+  &:dir(rtl)[data-checked]:hover:not([data-disabled], [data-readonly]) [data-slot="switch-thumb"] {
+    transform: translateX(-12px);
+  }
+
+  &[data-checked]:hover:not([data-disabled], [data-readonly]) [data-slot="switch-control"] {
+    border-color: var(--border-hover);
+    background: var(--surface-hover);
+  }
+
+  &[data-disabled] [data-slot="switch-control"] {
+    border-color: var(--border-disabled);
+    background: var(--surface-disabled);
+    opacity: 1;
+  }
+
+  &[data-disabled] [data-slot="switch-thumb"] {
+    background: var(--icon-disabled);
+  }
+
+  &[data-invalid] [data-slot="switch-control"] {
+    border-color: var(--border-error);
+  }
+}

package/src/forms/switch/switch.tsx

@@ -0,0 +1,34 @@
+import { Control, Description, ErrorMessage, Input, Label, Root, Thumb } from "@kobalte/core/switch"
+import { Show, splitProps } from "solid-js"
+import type { ComponentProps, ParentProps } from "solid-js"
+import "./switch.css"
+
+export interface SwitchProps extends ParentProps<ComponentProps<typeof Root>> {
+  // I think we should consolidate - ask designers.
+  appearance?: "standard" | "compact"
+  hideLabel?: boolean
+  description?: string
+}
+
+export function Switch(props: SwitchProps) {
+  const [local, others] = splitProps(props, ["children", "class", "appearance", "hideLabel", "description"])
+  return (
+    <Root {...others} class={local.class} data-component="switch" data-appearance={local.appearance ?? "compact"}>
+      <Input data-slot="switch-input" />
+      <Show when={local.children}>
+        {(label) => (
+          <Label data-slot="switch-label" classList={{ "sr-only": local.hideLabel }}>
+            {label()}
+          </Label>
+        )}
+      </Show>
+      <Show when={local.description}>
+        <Description data-slot="switch-description">{local.description}</Description>
+      </Show>
+      <Control data-slot="switch-control">
+        <Thumb data-slot="switch-thumb" />
+      </Control>
+      <ErrorMessage data-slot="switch-error" />
+    </Root>
+  )
+}

package/src/forms/text-input/text-input.css

@@ -0,0 +1,181 @@
+[data-component="text-input-v2"] {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+  padding-block: 0;
+  padding-inline: 0 8px;
+  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-6) 0%, var(--v2-alpha-light-2) 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-6) 0%, var(--v2-alpha-light-2) 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;
+  gap: 6px;
+  min-width: 0;
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
+[data-component="text-input-v2"] [data-slot="text-input-v2-leading-icon"] {
+  display: flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  padding-inline-start: 8px;
+  color: var(--v2-icon-icon-muted);
+}
+
+[data-component="text-input-v2"] [data-slot="text-input-v2-leading-icon"] :is(svg, [data-slot="icon-svg"]) {
+  display: block;
+  flex: none;
+}
+
+[data-component="text-input-v2"][data-leading-icon] [data-slot="text-input-v2-input"] {
+  padding-inline-start: 0;
+}
+
+[data-component="text-input-v2"] [data-slot="text-input-v2-input"] {
+  display: block;
+  width: 100%;
+  min-width: 0;
+  height: 100%;
+  padding-block: 0;
+  padding-inline: 8px 0;
+  margin: 0;
+  border: 0;
+  background: transparent;
+  outline: none;
+  font-style: normal;
+  font-weight: 440;
+  font-size: 13px;
+  line-height: var(--line-height-compact);
+  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);
+  user-select: none;
+}
+
+[data-component="text-input-v2"] [data-slot="text-input-v2-input"][type="search"]::-webkit-search-cancel-button {
+  -webkit-appearance: none;
+  appearance: none;
+  display: none;
+}
+
+[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-slot="text-input-v2-icon-button"][data-variant="clear"] {
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border-radius: 6px;
+  margin-inline-end: -8px;
+}
+
+[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/forms/text-input/text-input.tsx

@@ -0,0 +1,99 @@
+import { type ComponentProps, type JSX, Show, splitProps } from "solid-js"
+import { Icon } from "@opencode/ui/icon"
+import { useI18n } from "../../context/i18n"
+import "./text-input.css"
+
+export interface TextInputProps extends Omit<ComponentProps<"input">, "type"> {
+  /** Icon or adornment shown before the field value. */
+  leadingIcon?: JSX.Element
+  /** Show the trailing copy action. */
+  showCopyButton?: boolean
+  /** Show the trailing clear action. */
+  showClearButton?: boolean
+  /** Accessible label for the copy button. */
+  copyLabel?: string
+  /** Accessible label for the clear button. */
+  clearLabel?: string
+  onCopyClick?: (event: MouseEvent) => void
+  onClearClick?: (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 TextInput(props: TextInputProps) {
+  const i18n = useI18n()
+  const [local, inputProps] = splitProps(props, [
+    "class",
+    "classList",
+    "leadingIcon",
+    "showCopyButton",
+    "showClearButton",
+    "copyLabel",
+    "clearLabel",
+    "onCopyClick",
+    "onClearClick",
+    "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"}
+      data-leading-icon={local.leadingIcon ? "" : undefined}
+      classList={{
+        ...local.classList,
+        [local.class ?? ""]: !!local.class,
+      }}
+    >
+      <div data-slot="text-input-v2-value">
+        <Show when={local.leadingIcon}>
+          <span data-slot="text-input-v2-leading-icon">{local.leadingIcon}</span>
+        </Show>
+        <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.showClearButton || local.showCopyButton}>
+        <button
+          type="button"
+          data-slot="text-input-v2-icon-button"
+          data-variant={local.showClearButton ? "clear" : "copy"}
+          aria-label={
+            local.showClearButton
+              ? (local.clearLabel ?? i18n.t("ui.common.clear"))
+              : (local.copyLabel ?? i18n.t("ui.message.copy"))
+          }
+          disabled={local.disabled}
+          onMouseDown={(event) => {
+            if (!local.showClearButton) return
+            event.preventDefault()
+          }}
+          onClick={(event) => {
+            if (local.showClearButton) {
+              local.onClearClick?.(event)
+              return
+            }
+            local.onCopyClick?.(event)
+          }}
+        >
+          <Icon name={local.showClearButton ? "xmark-small" : "copy"} />
+        </button>
+      </Show>
+    </div>
+  )
+}

package/src/forms/textarea/textarea.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/forms/textarea/textarea.tsx

@@ -0,0 +1,31 @@
+import { type ComponentProps, splitProps } from "solid-js"
+import "./textarea.css"
+
+export interface TextareaProps extends ComponentProps<"textarea"> {
+  /** Error styling for the field and value text. */
+  invalid?: boolean
+}
+
+export function Textarea(props: TextareaProps) {
+  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>
+  )
+}