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

package/src/components/keybind.tsx

@@ -1,20 +0,0 @@
-import type { ComponentProps, ParentProps } from "solid-js"
-
-export interface KeybindProps extends ParentProps {
-  class?: string
-  classList?: ComponentProps<"span">["classList"]
-}
-
-export function Keybind(props: KeybindProps) {
-  return (
-    <span
-      data-component="keybind"
-      classList={{
-        ...props.classList,
-        [props.class ?? ""]: !!props.class,
-      }}
-    >
-      {props.children}
-    </span>
-  )
-}

package/src/components/progress-circle.css

@@ -1,16 +0,0 @@
-[data-component="progress-circle"] {
-  transform: rotate(-90deg);
-
-  [data-slot="progress-circle-background"] {
-    stroke: var(--progress-circle-background, var(--border-weak-base));
-  }
-
-  [data-slot="progress-circle-background-overlay"] {
-    stroke: var(--progress-circle-background-overlay, transparent);
-  }
-
-  [data-slot="progress-circle-progress"] {
-    stroke: var(--progress-circle-progress, var(--border-active));
-    transition: stroke-dashoffset 0.35s cubic-bezier(0.65, 0, 0.35, 1);
-  }
-}

package/src/components/progress-circle.tsx

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

package/src/components/radio-group.css

@@ -1,187 +0,0 @@
-[data-component="radio-group"] {
-  --radio-group-height: 28px;
-  --radio-group-gap: 4px;
-  --radio-group-padding: 2px;
-
-  display: inline-flex;
-
-  [data-slot="radio-group-wrapper"] {
-    all: unset;
-    background-color: var(--surface-inset-base);
-    border-radius: var(--radius-sm);
-    box-shadow: var(--shadow-xxs-border);
-    display: inline-flex;
-    height: var(--radio-group-height);
-    margin: 0;
-    overflow: visible;
-    padding: 0;
-    position: relative;
-    width: fit-content;
-  }
-
-  &[data-fill] [data-slot="radio-group-wrapper"] {
-    width: 100%;
-  }
-
-  [data-slot="radio-group-items"] {
-    display: inline-flex;
-    flex-direction: row;
-    gap: var(--radio-group-gap);
-    height: 100%;
-    list-style: none;
-    position: relative;
-    z-index: 1;
-  }
-
-  &[data-fill] [data-slot="radio-group-items"] {
-    width: 100%;
-  }
-
-  [data-slot="radio-group-indicator"] {
-    background: var(--button-secondary-base);
-    border-radius: var(--radius-sm);
-    box-shadow: var(--shadow-xs-border-base);
-    content: "";
-    opacity: var(--indicator-opacity, 1);
-    pointer-events: none;
-    position: absolute;
-    transition:
-      opacity 200ms ease-out,
-      box-shadow 100ms ease-in-out,
-      width 200ms cubic-bezier(0.22, 1.2, 0.36, 1),
-      height 200ms cubic-bezier(0.22, 1.2, 0.36, 1),
-      transform 300ms cubic-bezier(0.22, 1.2, 0.36, 1);
-    will-change: transform;
-    z-index: 0;
-  }
-
-  [data-slot="radio-group-item"] {
-    display: flex;
-    height: 100%;
-    min-width: 0;
-    position: relative;
-  }
-
-  &[data-fill] [data-slot="radio-group-item"] {
-    flex: 1;
-  }
-
-  [data-slot="radio-group-item-input"] {
-    border-width: 0;
-    clip: rect(0 0 0 0);
-    height: 1px;
-    margin: -1px;
-    overflow: hidden;
-    padding: 0;
-    position: absolute;
-    white-space: nowrap;
-    width: 1px;
-  }
-
-  [data-slot="radio-group-item-label"] {
-    color: var(--text-weak);
-    cursor: default;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-family: var(--font-family-sans);
-    font-size: var(--font-size-small);
-    font-weight: var(--font-weight-medium);
-    flex: 1;
-    height: 100%;
-    line-height: 1;
-    padding: var(--radio-group-padding);
-    position: relative;
-    transition:
-      color 200ms ease-out,
-      opacity 200ms ease-out;
-    user-select: none;
-  }
-
-  [data-slot="radio-group-item-control"] {
-    align-items: center;
-    border-radius: var(--radius-xs);
-    display: inline-flex;
-    height: 100%;
-    justify-content: center;
-    min-width: 0;
-    padding: var(--radio-group-control-padding, 0 10px);
-    transition: background-color 200ms ease-out;
-    width: 100%;
-  }
-
-  &[data-pad="none"] {
-    --radio-group-control-padding: 0;
-  }
-
-  &[data-pad="normal"] {
-    --radio-group-control-padding: 0 10px;
-  }
-
-  /* Checked state */
-  [data-slot="radio-group-item-input"][data-checked] + [data-slot="radio-group-item-label"] {
-    color: var(--text-strong);
-  }
-
-  /* Hover state: match the inset background (adds subtle density) */
-  [data-slot="radio-group-item-input"]:not([data-checked], [data-disabled])
-    + [data-slot="radio-group-item-label"]:hover
-    [data-slot="radio-group-item-control"] {
-    background-color: var(--surface-inset-base);
-  }
-
-  /* Do not overlay hover on the active segment */
-  [data-slot="radio-group-item-input"][data-checked]
-    + [data-slot="radio-group-item-label"]:hover
-    [data-slot="radio-group-item-control"] {
-    background-color: transparent;
-  }
-
-  /* Disabled state */
-  [data-slot="radio-group-item-input"][data-disabled] + [data-slot="radio-group-item-label"] {
-    cursor: not-allowed;
-    opacity: 0.5;
-  }
-
-  /* Focus state */
-  [data-slot="radio-group-wrapper"]:has([data-slot="radio-group-item-input"]:focus-visible)
-    [data-slot="radio-group-indicator"] {
-    box-shadow: var(--shadow-xs-border-focus);
-  }
-
-  /* Hide indicator when nothing is checked */
-  [data-slot="radio-group-wrapper"]:not(:has([data-slot="radio-group-item-input"][data-checked]))
-    [data-slot="radio-group-indicator"] {
-    --indicator-opacity: 0;
-  }
-
-  /* Vertical orientation */
-  &[aria-orientation="vertical"] [data-slot="radio-group-items"] {
-    flex-direction: column;
-  }
-
-  /* Small size variant */
-  &[data-size="small"] {
-    --radio-group-height: 24px;
-    --radio-group-gap: 3px;
-    --radio-group-padding: 2px;
-
-    [data-slot="radio-group-item-label"] {
-      font-size: 12px;
-    }
-
-    [data-slot="radio-group-item-control"] {
-      padding: var(--radio-group-control-padding, 0 8px);
-    }
-  }
-
-  &[data-size="small"][data-pad="normal"] {
-    --radio-group-control-padding: 0 8px;
-  }
-
-  /* Disabled root state */
-  &[data-disabled] {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-}

package/src/components/radio-group.tsx

@@ -1,83 +0,0 @@
-import { SegmentedControl as Kobalte } from "@kobalte/core/segmented-control"
-import { For, splitProps } from "solid-js"
-import type { ComponentProps, JSX } from "solid-js"
-
-export type RadioGroupProps<T> = Omit<
-  ComponentProps<typeof Kobalte>,
-  "value" | "defaultValue" | "onChange" | "children"
-> & {
-  options: T[]
-  current?: T
-  defaultValue?: T
-  value?: (x: T) => string
-  label?: (x: T) => JSX.Element | string
-  onSelect?: (value: T | undefined) => void
-  class?: ComponentProps<"div">["class"]
-  classList?: ComponentProps<"div">["classList"]
-  size?: "small" | "medium"
-  fill?: boolean
-  pad?: "none" | "normal"
-}
-
-export function RadioGroup<T>(props: RadioGroupProps<T>) {
-  const [local, others] = splitProps(props, [
-    "class",
-    "classList",
-    "options",
-    "current",
-    "defaultValue",
-    "value",
-    "label",
-    "onSelect",
-    "size",
-    "fill",
-    "pad",
-  ])
-
-  const getValue = (item: T): string => {
-    if (local.value) return local.value(item)
-    return String(item)
-  }
-
-  const getLabel = (item: T): JSX.Element | string => {
-    if (local.label) return local.label(item)
-    return String(item)
-  }
-
-  const findOption = (v: string): T | undefined => {
-    return local.options.find((opt) => getValue(opt) === v)
-  }
-
-  return (
-    <Kobalte
-      {...others}
-      data-component="radio-group"
-      data-size={local.size ?? "medium"}
-      data-fill={local.fill ? "" : undefined}
-      data-pad={local.pad ?? "normal"}
-      classList={{
-        ...local.classList,
-        [local.class ?? ""]: !!local.class,
-      }}
-      value={local.current ? getValue(local.current) : undefined}
-      defaultValue={local.defaultValue ? getValue(local.defaultValue) : undefined}
-      onChange={(v) => local.onSelect?.(findOption(v))}
-    >
-      <div role="presentation" data-slot="radio-group-wrapper">
-        <Kobalte.Indicator data-slot="radio-group-indicator" />
-        <div role="presentation" data-slot="radio-group-items">
-          <For each={local.options}>
-            {(option) => (
-              <Kobalte.Item value={getValue(option)} data-slot="radio-group-item" data-value={getValue(option)}>
-                <Kobalte.ItemInput data-slot="radio-group-item-input" />
-                <Kobalte.ItemLabel data-slot="radio-group-item-label">
-                  <span data-slot="radio-group-item-control">{getLabel(option)}</span>
-                </Kobalte.ItemLabel>
-              </Kobalte.Item>
-            )}
-          </For>
-        </div>
-      </div>
-    </Kobalte>
-  )
-}

package/src/components/select.css

@@ -1,201 +0,0 @@
-[data-component="select"] {
-  [data-slot="select-select-trigger"] {
-    padding-block: 0;
-    padding-inline: 8px 4px;
-    box-shadow: none;
-
-    [data-slot="select-select-trigger-value"] {
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-    [data-slot="select-select-trigger-icon"] {
-      width: 16px;
-      height: 16px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      flex-shrink: 0;
-      color: var(--text-weak);
-      transition: transform 0.1s ease-in-out;
-    }
-
-    &[data-expanded] {
-      &[data-variant="secondary"] {
-        background-color: var(--button-secondary-hover);
-      }
-      &[data-variant="ghost"] {
-        background-color: var(--surface-raised-base-active);
-      }
-      &[data-variant="primary"] {
-        background-color: var(--icon-strong-active);
-      }
-    }
-
-    &:not([data-expanded]):focus-visible {
-      &[data-variant="secondary"] {
-        background-color: var(--button-secondary-base);
-      }
-      &[data-variant="ghost"] {
-        background-color: var(--surface-raised-base-hover);
-      }
-      &[data-variant="primary"] {
-        background-color: var(--icon-strong-base);
-      }
-    }
-  }
-
-  &[data-trigger-style="settings"] {
-    [data-slot="select-select-trigger"] {
-      padding-block: 6px;
-      padding-inline: 12px 6px;
-      box-shadow: none;
-      border-radius: 6px;
-      min-width: 160px;
-      height: 32px;
-      justify-content: flex-end;
-      gap: 12px;
-      background-color: transparent;
-
-      [data-slot="select-select-trigger-value"] {
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        font-size: var(--font-size-base);
-        font-weight: var(--font-weight-regular);
-      }
-      [data-slot="select-select-trigger-icon"] {
-        width: 16px;
-        height: 20px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-shrink: 0;
-        color: var(--text-weak);
-        background-color: var(--surface-raised-base);
-        border-radius: 4px;
-        transition: transform 0.1s ease-in-out;
-      }
-
-      &[data-slot="select-select-trigger"]:hover:not(:disabled),
-      &[data-slot="select-select-trigger"][data-expanded],
-      &[data-slot="select-select-trigger"][data-expanded]:hover:not(:disabled) {
-        background-color: var(--input-base);
-        box-shadow: var(--shadow-xs-border-base);
-      }
-
-      &:not([data-expanded]):not(:focus-visible):focus {
-        background-color: transparent;
-        box-shadow: none;
-      }
-    }
-  }
-}
-
-[data-component="select-content"] {
-  min-width: 104px;
-  max-width: 23rem;
-  overflow: hidden;
-  border-radius: var(--radius-md);
-  background-color: var(--surface-raised-stronger-non-alpha);
-  padding: 4px;
-  box-shadow: var(--shadow-xs-border);
-  z-index: 60;
-
-  &[data-expanded] {
-    animation: select-open 0.15s ease-out;
-  }
-
-  [data-slot="select-select-content-list"] {
-    overflow-y: auto;
-    max-height: 12rem;
-    white-space: nowrap;
-    overflow-x: hidden;
-    display: flex;
-    flex-direction: column;
-
-    &:focus {
-      outline: none;
-    }
-
-    > *:not([role="presentation"]) + *:not([role="presentation"]) {
-      margin-top: 2px;
-    }
-  }
-
-  [data-slot="select-select-item"] {
-    position: relative;
-    display: flex;
-    align-items: center;
-    padding: 2px 8px;
-    gap: 12px;
-    border-radius: 4px;
-    cursor: default;
-
-    /* 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);
-
-    color: var(--text-strong);
-
-    outline: none;
-    user-select: none;
-
-    &[data-highlighted] {
-      background: var(--surface-raised-base-hover);
-    }
-    &[data-disabled] {
-      background-color: var(--surface-raised-base);
-      pointer-events: none;
-    }
-    [data-slot="select-select-item-indicator"] {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      margin-inline-start: auto;
-      width: 16px;
-      height: 16px;
-    }
-    &:focus {
-      outline: none;
-    }
-    &:hover {
-      background: var(--surface-raised-base-hover);
-    }
-  }
-}
-
-[data-component="select-content"][data-trigger-style="settings"] {
-  min-width: 160px;
-  border-radius: 8px;
-  padding: 0;
-
-  [data-slot="select-select-content-list"] {
-    padding: 4px;
-  }
-
-  [data-slot="select-select-item"] {
-    /* text-14-regular */
-    font-family: var(--font-family-sans);
-    font-size: var(--font-size-base);
-    font-style: normal;
-    font-weight: var(--font-weight-regular);
-    line-height: var(--line-height-large);
-    letter-spacing: var(--letter-spacing-normal);
-  }
-}
-
-@keyframes select-open {
-  from {
-    opacity: 0;
-    transform: scale(0.95);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
-}