@opencode-ai/ui 0.0.0-beta-202606251302

package/src/components/popover.tsx

@@ -0,0 +1,153 @@
+import { Popover as Kobalte } from "@kobalte/core/popover"
+import { ComponentProps, JSXElement, ParentProps, Show, createEffect, splitProps, ValidComponent } from "solid-js"
+import { createStore } from "solid-js/store"
+import { makeEventListener } from "@solid-primitives/event-listener"
+import { useI18n } from "../context/i18n"
+import { IconButton } from "./icon-button"
+
+export interface PopoverProps<T extends ValidComponent = "div">
+  extends ParentProps,
+    Omit<ComponentProps<typeof Kobalte>, "children"> {
+  trigger?: JSXElement
+  triggerAs?: T
+  triggerProps?: ComponentProps<T>
+  title?: JSXElement
+  description?: JSXElement
+  class?: ComponentProps<"div">["class"]
+  classList?: ComponentProps<"div">["classList"]
+  style?: ComponentProps<"div">["style"]
+  portal?: boolean
+}
+
+export function Popover<T extends ValidComponent = "div">(props: PopoverProps<T>) {
+  const i18n = useI18n()
+  const [local, rest] = splitProps(props, [
+    "trigger",
+    "triggerAs",
+    "triggerProps",
+    "title",
+    "description",
+    "class",
+    "classList",
+    "style",
+    "children",
+    "portal",
+    "open",
+    "defaultOpen",
+    "onOpenChange",
+    "modal",
+  ])
+
+  const [state, setState] = createStore({
+    contentRef: undefined as HTMLElement | undefined,
+    triggerRef: undefined as HTMLElement | undefined,
+    dismiss: null as "escape" | "outside" | null,
+    uncontrolledOpen: local.defaultOpen ?? false,
+  })
+
+  const controlled = () => local.open !== undefined
+  const opened = () => {
+    if (controlled()) return local.open ?? false
+    return state.uncontrolledOpen
+  }
+
+  const onOpenChange = (next: boolean) => {
+    if (next) setState("dismiss", null)
+    if (local.onOpenChange) local.onOpenChange(next)
+    if (controlled()) return
+    setState("uncontrolledOpen", next)
+  }
+
+  createEffect(() => {
+    if (!opened()) return
+
+    const inside = (node: Node | null | undefined) => {
+      if (!node) return false
+      const content = state.contentRef
+      if (content && content.contains(node)) return true
+      const trigger = state.triggerRef
+      if (trigger && trigger.contains(node)) return true
+      return false
+    }
+
+    const close = (reason: "escape" | "outside") => {
+      setState("dismiss", reason)
+      onOpenChange(false)
+    }
+
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key !== "Escape") return
+      close("escape")
+      event.preventDefault()
+      event.stopPropagation()
+    }
+
+    const onPointerDown = (event: PointerEvent) => {
+      const target = event.target
+      if (!(target instanceof Node)) return
+      if (inside(target)) return
+      close("outside")
+    }
+
+    const onFocusIn = (event: FocusEvent) => {
+      const target = event.target
+      if (!(target instanceof Node)) return
+      if (inside(target)) return
+      close("outside")
+    }
+
+    makeEventListener(window, "keydown", onKeyDown, { capture: true })
+    makeEventListener(window, "pointerdown", onPointerDown, { capture: true })
+    makeEventListener(window, "focusin", onFocusIn, { capture: true })
+  })
+
+  const content = () => (
+    <Kobalte.Content
+      ref={(el: HTMLElement | undefined) => setState("contentRef", el)}
+      data-component="popover-content"
+      classList={{
+        ...local.classList,
+        [local.class ?? ""]: !!local.class,
+      }}
+      style={local.style}
+      onCloseAutoFocus={(event: Event) => {
+        if (state.dismiss === "outside") event.preventDefault()
+        setState("dismiss", null)
+      }}
+    >
+      {/* <Kobalte.Arrow data-slot="popover-arrow" /> */}
+      <Show when={local.title}>
+        <div data-slot="popover-header">
+          <Kobalte.Title data-slot="popover-title">{local.title}</Kobalte.Title>
+          <Kobalte.CloseButton
+            data-slot="popover-close-button"
+            as={IconButton}
+            icon="close"
+            variant="ghost"
+            aria-label={i18n.t("ui.common.close")}
+          />
+        </div>
+      </Show>
+      <Show when={local.description}>
+        <Kobalte.Description data-slot="popover-description">{local.description}</Kobalte.Description>
+      </Show>
+      <div data-slot="popover-body">{local.children}</div>
+    </Kobalte.Content>
+  )
+
+  return (
+    <Kobalte gutter={4} {...rest} open={opened()} onOpenChange={onOpenChange} modal={local.modal ?? false}>
+      <Kobalte.Trigger
+        ref={(el: HTMLElement) => setState("triggerRef", el)}
+        as={local.triggerAs ?? "div"}
+        data-slot="popover-trigger"
+        {...(local.triggerProps as any)}
+      >
+        {local.trigger}
+      </Kobalte.Trigger>
+      <Show when={local.portal ?? true} fallback={content()}>
+        <Kobalte.Portal>{content()}</Kobalte.Portal>
+      </Show>
+    </Kobalte>
+  )
+}

package/src/components/progress-circle.css

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

package/src/components/progress-circle.tsx

@@ -0,0 +1,57 @@
+import { type ComponentProps, createMemo, splitProps } from "solid-js"
+
+export interface ProgressCircleProps extends Pick<ComponentProps<"svg">, "class" | "classList"> {
+  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-progress"
+        stroke-width={strokeWidth()}
+        stroke-dasharray={circumference().toString()}
+        stroke-dashoffset={offset()}
+      />
+    </svg>
+  )
+}

package/src/components/progress.css

@@ -0,0 +1,63 @@
+[data-component="progress"] {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+
+  [data-slot="progress-header"] {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+  }
+
+  [data-slot="progress-label"],
+  [data-slot="progress-value-label"] {
+    font-family: var(--font-family-sans);
+    font-size: var(--font-size-small);
+    font-weight: var(--font-weight-regular);
+    line-height: var(--line-height-large);
+    letter-spacing: var(--letter-spacing-normal);
+  }
+
+  [data-slot="progress-label"] {
+    color: var(--text-base);
+  }
+
+  [data-slot="progress-value-label"] {
+    color: var(--text-weak);
+    font-variant-numeric: tabular-nums;
+  }
+
+  [data-slot="progress-track"] {
+    position: relative;
+    width: 100%;
+    height: 8px;
+    overflow: hidden;
+    border-radius: 999px;
+    border: 1px solid var(--border-weak-base);
+    background-color: var(--surface-base);
+  }
+
+  [data-slot="progress-fill"] {
+    height: 100%;
+    width: var(--kb-progress-fill-width);
+    border-radius: inherit;
+    background-color: var(--border-active);
+    transition: width 200ms ease;
+  }
+
+  &[data-indeterminate] [data-slot="progress-fill"] {
+    width: 35%;
+    animation: progress-indeterminate 1.3s ease-in-out infinite;
+  }
+}
+
+@keyframes progress-indeterminate {
+  from {
+    transform: translateX(-100%);
+  }
+
+  to {
+    transform: translateX(300%);
+  }
+}

package/src/components/progress.tsx

@@ -0,0 +1,39 @@
+import { Progress as Kobalte } from "@kobalte/core/progress"
+import { Show, splitProps } from "solid-js"
+import type { ComponentProps, ParentProps } from "solid-js"
+
+export interface ProgressProps extends ParentProps<ComponentProps<typeof Kobalte>> {
+  hideLabel?: boolean
+  showValueLabel?: boolean
+}
+
+export function Progress(props: ProgressProps) {
+  const [local, others] = splitProps(props, ["children", "class", "classList", "hideLabel", "showValueLabel"])
+
+  return (
+    <Kobalte
+      {...others}
+      data-component="progress"
+      classList={{
+        ...local.classList,
+        [local.class ?? ""]: !!local.class,
+      }}
+    >
+      <Show when={local.children || local.showValueLabel}>
+        <div data-slot="progress-header">
+          <Show when={local.children}>
+            <Kobalte.Label data-slot="progress-label" classList={{ "sr-only": local.hideLabel }}>
+              {local.children}
+            </Kobalte.Label>
+          </Show>
+          <Show when={local.showValueLabel}>
+            <Kobalte.ValueLabel data-slot="progress-value-label" />
+          </Show>
+        </div>
+      </Show>
+      <Kobalte.Track data-slot="progress-track">
+        <Kobalte.Fill data-slot="progress-fill" />
+      </Kobalte.Track>
+    </Kobalte>
+  )
+}

package/src/components/provider-icon.css

@@ -0,0 +1,5 @@
+[data-component="provider-icon"] {
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+}

package/src/components/provider-icon.tsx

@@ -0,0 +1,25 @@
+import type { Component, JSX } from "solid-js"
+import { createMemo, splitProps } from "solid-js"
+import sprite from "./provider-icons/sprite.svg"
+import { iconNames, type IconName } from "./provider-icons/types"
+
+export type ProviderIconProps = JSX.SVGElementTags["svg"] & {
+  id: string
+}
+
+export const ProviderIcon: Component<ProviderIconProps> = (props) => {
+  const [local, rest] = splitProps(props, ["id", "class", "classList"])
+  const resolved = createMemo(() => (iconNames.includes(local.id as IconName) ? local.id : "synthetic"))
+  return (
+    <svg
+      data-component="provider-icon"
+      {...rest}
+      classList={{
+        ...local.classList,
+        [local.class ?? ""]: !!local.class,
+      }}
+    >
+      <use href={`${sprite}#${resolved()}`} />
+    </svg>
+  )
+}