@opencode-ai/ui 0.0.0-dev-202609040530 → 0.0.0-dev-19079

package/src/components/toast.tsx

@@ -1,185 +0,0 @@
-import { Toast as Kobalte, toaster } from "@kobalte/core/toast"
-import type { ToastRootProps, ToastCloseButtonProps, ToastTitleProps, ToastDescriptionProps } from "@kobalte/core/toast"
-import type { ComponentProps, JSX } from "solid-js"
-import { Show } from "solid-js"
-import { Portal } from "solid-js/web"
-import { useI18n } from "../context/i18n"
-import { Icon, type IconProps } from "./icon"
-import { IconButton } from "./icon-button"
-
-export interface ToastRegionProps extends ComponentProps<typeof Kobalte.Region> {}
-
-function ToastRegion(props: ToastRegionProps) {
-  return (
-    <Portal>
-      <Kobalte.Region data-component="toast-region" {...props}>
-        <Kobalte.List data-slot="toast-list" />
-      </Kobalte.Region>
-    </Portal>
-  )
-}
-
-export interface ToastRootComponentProps extends ToastRootProps {
-  class?: string
-  classList?: ComponentProps<"li">["classList"]
-  children?: JSX.Element
-}
-
-function ToastRoot(props: ToastRootComponentProps) {
-  return (
-    <Kobalte
-      data-component="toast"
-      classList={{
-        ...props.classList,
-        [props.class ?? ""]: !!props.class,
-      }}
-      {...props}
-    />
-  )
-}
-
-function ToastIcon(props: { name: IconProps["name"] }) {
-  return (
-    <div data-slot="toast-icon">
-      <Icon name={props.name} />
-    </div>
-  )
-}
-
-function ToastContent(props: ComponentProps<"div">) {
-  return <div data-slot="toast-content" {...props} />
-}
-
-function ToastTitle(props: ToastTitleProps & ComponentProps<"div">) {
-  return <Kobalte.Title data-slot="toast-title" {...props} />
-}
-
-function ToastDescription(props: ToastDescriptionProps & ComponentProps<"div">) {
-  return <Kobalte.Description data-slot="toast-description" {...props} />
-}
-
-function ToastActions(props: ComponentProps<"div">) {
-  return <div data-slot="toast-actions" {...props} />
-}
-
-function ToastCloseButton(props: ToastCloseButtonProps & ComponentProps<"button">) {
-  const i18n = useI18n()
-  return (
-    <Kobalte.CloseButton
-      data-slot="toast-close-button"
-      as={IconButton}
-      icon="close"
-      variant="ghost"
-      aria-label={i18n.t("ui.common.dismiss")}
-      {...props}
-    />
-  )
-}
-
-function ToastProgressTrack(props: ComponentProps<typeof Kobalte.ProgressTrack>) {
-  return <Kobalte.ProgressTrack data-slot="toast-progress-track" {...props} />
-}
-
-function ToastProgressFill(props: ComponentProps<typeof Kobalte.ProgressFill>) {
-  return <Kobalte.ProgressFill data-slot="toast-progress-fill" {...props} />
-}
-
-export const Toast = Object.assign(ToastRoot, {
-  Region: ToastRegion,
-  Icon: ToastIcon,
-  Content: ToastContent,
-  Title: ToastTitle,
-  Description: ToastDescription,
-  Actions: ToastActions,
-  CloseButton: ToastCloseButton,
-  ProgressTrack: ToastProgressTrack,
-  ProgressFill: ToastProgressFill,
-})
-
-export { toaster }
-
-export type ToastVariant = "default" | "success" | "error" | "loading"
-
-export interface ToastAction {
-  label: string
-  onClick: "dismiss" | (() => void)
-}
-
-export interface ToastOptions {
-  title?: string
-  description?: string
-  icon?: IconProps["name"]
-  variant?: ToastVariant
-  duration?: number
-  persistent?: boolean
-  actions?: ToastAction[]
-}
-
-export function showToast(options: ToastOptions | string) {
-  const opts = typeof options === "string" ? { description: options } : options
-  return toaster.show((props) => (
-    <Toast
-      toastId={props.toastId}
-      duration={opts.duration}
-      persistent={opts.persistent}
-      data-variant={opts.variant ?? "default"}
-    >
-      <Show when={opts.icon}>
-        <Toast.Icon name={opts.icon!} />
-      </Show>
-      <Toast.Content>
-        <Show when={opts.title}>
-          <Toast.Title>{opts.title}</Toast.Title>
-        </Show>
-        <Show when={opts.description}>
-          <Toast.Description>{opts.description}</Toast.Description>
-        </Show>
-        <Show when={opts.actions?.length}>
-          <Toast.Actions>
-            {opts.actions!.map((action) => (
-              <button
-                data-slot="toast-action"
-                onClick={() => {
-                  if (typeof action.onClick === "function") {
-                    action.onClick()
-                  }
-                  toaster.dismiss(props.toastId)
-                }}
-              >
-                {action.label}
-              </button>
-            ))}
-          </Toast.Actions>
-        </Show>
-      </Toast.Content>
-      <Toast.CloseButton />
-    </Toast>
-  ))
-}
-
-export interface ToastPromiseOptions<T, U = unknown> {
-  loading?: JSX.Element
-  success?: (data: T) => JSX.Element
-  error?: (error: U) => JSX.Element
-}
-
-export function showPromiseToast<T, U = unknown>(
-  promise: Promise<T> | (() => Promise<T>),
-  options: ToastPromiseOptions<T, U>,
-) {
-  return toaster.promise(promise, (props) => (
-    <Toast
-      toastId={props.toastId}
-      data-variant={props.state === "pending" ? "loading" : props.state === "fulfilled" ? "success" : "error"}
-    >
-      <Toast.Content>
-        <Toast.Description>
-          {props.state === "pending" && options.loading}
-          {props.state === "fulfilled" && options.success?.(props.data!)}
-          {props.state === "rejected" && options.error?.(props.error)}
-        </Toast.Description>
-      </Toast.Content>
-      <Toast.CloseButton />
-    </Toast>
-  ))
-}

package/src/components/tooltip.css

@@ -1,74 +0,0 @@
-[data-component="tooltip-trigger"] {
-  display: flex;
-}
-
-[data-slot="tooltip-keybind"] {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-[data-slot="tooltip-keybind-key"] {
-  color: var(--text-invert-base);
-  font-size: var(--font-size-small);
-  font-weight: var(--font-weight-medium);
-  line-height: var(--line-height-large);
-}
-
-[data-component="tooltip"] {
-  z-index: 1000;
-  max-width: 320px;
-  border-radius: var(--radius-sm);
-  background-color: var(--surface-float-base);
-  color: var(--text-invert-strong);
-  background: var(--surface-float-base);
-  padding: 2px 8px;
-  border: 1px solid var(--border-weak-base, rgba(0, 0, 0, 0.07));
-
-  box-shadow: var(--shadow-md);
-  pointer-events: none !important;
-  /* transition: all 150ms ease-out; */
-  /* transform: translate3d(0, 0, 0); */
-  /* transform-origin: var(--kb-tooltip-content-transform-origin); */
-
-  /* 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-expanded] {
-    opacity: 1;
-    /* transform: translate3d(0, 0, 0); */
-  }
-
-  &[data-closed]:not([data-force-open="true"]) {
-    opacity: 0;
-  }
-
-  /* &[data-placement="top"] { */
-  /*   &[data-closed] { */
-  /*     transform: translate3d(0, 4px, 0); */
-  /*   } */
-  /* } */
-  /**/
-  /* &[data-placement="bottom"] { */
-  /*   &[data-closed] { */
-  /*     transform: translate3d(0, -4px, 0); */
-  /*   } */
-  /* } */
-  /**/
-  /* &[data-placement="left"] { */
-  /*   &[data-closed] { */
-  /*     transform: translate3d(4px, 0, 0); */
-  /*   } */
-  /* } */
-  /**/
-  /* &[data-placement="right"] { */
-  /*   &[data-closed] { */
-  /*     transform: translate3d(-4px, 0, 0); */
-  /*   } */
-  /* } */
-}

package/src/components/tooltip.tsx

@@ -1,163 +0,0 @@
-import { Tooltip as KobalteTooltip } from "@kobalte/core/tooltip"
-import { createEffect, Match, onCleanup, splitProps, Switch, type JSX } from "solid-js"
-import type { ComponentProps } from "solid-js"
-import { createStore } from "solid-js/store"
-
-export interface TooltipProps extends ComponentProps<typeof KobalteTooltip> {
-  value: JSX.Element
-  class?: string
-  contentClass?: string
-  contentStyle?: JSX.CSSProperties
-  inactive?: boolean
-  forceOpen?: boolean
-}
-
-export interface TooltipKeybindProps extends Omit<TooltipProps, "value"> {
-  title: string
-  keybind: string
-}
-
-export function TooltipKeybind(props: TooltipKeybindProps) {
-  const [local, others] = splitProps(props, ["title", "keybind"])
-  return (
-    <Tooltip
-      {...others}
-      value={
-        <div data-slot="tooltip-keybind">
-          <span>{local.title}</span>
-          <span data-slot="tooltip-keybind-key">{local.keybind}</span>
-        </div>
-      }
-    />
-  )
-}
-
-export function Tooltip(props: TooltipProps) {
-  let ref: HTMLDivElement | undefined
-  const [state, setState] = createStore({
-    open: false,
-    block: false,
-    expand: false,
-  })
-  const [local, others] = splitProps(props, [
-    "children",
-    "class",
-    "contentClass",
-    "contentStyle",
-    "inactive",
-    "forceOpen",
-    "ignoreSafeArea",
-    "value",
-  ])
-
-  const close = () => setState("open", false)
-
-  const inside = () => {
-    const active = document.activeElement
-    if (!ref || !active) return false
-    return ref.contains(active)
-  }
-
-  const drop = (expand = state.expand) => {
-    if (expand) return
-    if (ref?.matches(":hover")) return
-    if (inside()) return
-    setState("block", false)
-  }
-
-  const sync = () => {
-    const expand = !!ref?.querySelector('[aria-expanded="true"], [data-expanded]')
-    setState("expand", expand)
-    if (expand) {
-      setState("block", true)
-      close()
-      return
-    }
-    drop(expand)
-  }
-
-  const arm = () => {
-    setState("block", true)
-    close()
-  }
-
-  const leave = () => {
-    if (!inside()) close()
-    drop()
-  }
-
-  createEffect(() => {
-    if (!ref) return
-    sync()
-    const obs = new MutationObserver(sync)
-    obs.observe(ref, {
-      subtree: true,
-      childList: true,
-      attributes: true,
-      attributeFilter: ["aria-expanded", "data-expanded"],
-    })
-    onCleanup(() => obs.disconnect())
-  })
-
-  let justClickedTrigger = false
-
-  return (
-    <Switch>
-      <Match when={local.inactive}>{local.children}</Match>
-      <Match when={true}>
-        <KobalteTooltip
-          gutter={4}
-          openDelay={400}
-          skipDelayDuration={300}
-          {...others}
-          closeDelay={0}
-          ignoreSafeArea={local.ignoreSafeArea ?? true}
-          open={local.forceOpen || state.open}
-          onOpenChange={(open) => {
-            if (local.forceOpen) return
-            if (state.block && open) return
-            if (justClickedTrigger) {
-              justClickedTrigger = false
-              return
-            }
-            setState("open", open)
-          }}
-        >
-          <KobalteTooltip.Trigger
-            ref={ref}
-            as={"div"}
-            data-component="tooltip-trigger"
-            class={local.class}
-            onPointerDownCapture={arm}
-            onKeyDownCapture={(event: KeyboardEvent) => {
-              if (event.key !== "Enter" && event.key !== " ") return
-              arm()
-            }}
-            onPointerLeave={leave}
-            onFocusOut={() => requestAnimationFrame(() => drop())}
-          >
-            {local.children}
-          </KobalteTooltip.Trigger>
-          <KobalteTooltip.Portal>
-            <KobalteTooltip.Content
-              data-component="tooltip"
-              data-placement={props.placement}
-              data-force-open={local.forceOpen}
-              class={local.contentClass}
-              style={local.contentStyle}
-              onPointerDownOutside={(e) => {
-                if (ref === e.target || (e.target instanceof Node && ref?.contains(e.target))) {
-                  justClickedTrigger = true
-                }
-                e.preventDefault()
-              }}
-            >
-              {local.value}
-              {/* <KobalteTooltip.Arrow data-slot="tooltip-arrow" /> */}
-            </KobalteTooltip.Content>
-          </KobalteTooltip.Portal>
-        </KobalteTooltip>
-      </Match>
-    </Switch>
-  )
-}

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

@@ -1,139 +0,0 @@
-[data-component="accordion-v2"] {
-  --accordion-v2-fg: var(--v2-text-text-base);
-  --accordion-v2-icon: var(--v2-icon-icon-base);
-  --accordion-v2-border: var(--v2-border-border-strong);
-  --accordion-v2-bg: var(--v2-background-bg-base);
-
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-
-  width: 100%;
-  background: var(--accordion-v2-bg);
-  border-radius: 6px;
-  box-shadow: 0 0 0 0.5px var(--accordion-v2-border);
-  overflow: hidden;
-
-  color: var(--accordion-v2-fg);
-
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-rendering: geometricPrecision;
-}
-
-[data-component="accordion-v2-item"] {
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  width: 100%;
-  background: var(--accordion-v2-bg);
-  box-shadow: inset 0 -0.5px 0 var(--accordion-v2-border);
-}
-
-[data-component="accordion-v2-item"]:last-child {
-  box-shadow: none;
-}
-
-[data-slot="accordion-v2-header"] {
-  display: flex;
-  margin: 0;
-}
-
-[data-component="accordion-v2-trigger"] {
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 4px;
-
-  width: 100%;
-  min-height: 30px;
-  padding: 0 12px;
-
-  background: transparent;
-  border: 0;
-  outline: none;
-  cursor: default;
-  user-select: none;
-
-  font-size: 13px;
-  font-weight: 440;
-  line-height: 100%;
-  letter-spacing: -0.04px;
-  color: var(--accordion-v2-fg);
-  text-align: left;
-}
-
-[data-component="accordion-v2-trigger"] [data-slot="accordion-v2-trigger-content"] {
-  display: flex;
-  flex: 1 1 auto;
-  flex-direction: row;
-  align-items: center;
-  gap: 8px;
-  min-width: 0;
-  height: 30px;
-}
-
-[data-component="accordion-v2-trigger"] [data-slot="accordion-v2-chevron"] {
-  flex: none;
-  width: 14px;
-  height: 14px;
-  color: var(--accordion-v2-icon);
-  transition: transform 150ms ease;
-}
-
-[data-component="accordion-v2-trigger"][data-expanded] [data-slot="accordion-v2-chevron"] {
-  transform: rotate(180deg);
-}
-
-[data-component="accordion-v2-item"][data-expanded] [data-component="accordion-v2-trigger"] {
-  box-shadow: inset 0 -0.5px 0 var(--accordion-v2-border);
-}
-
-[data-component="accordion-v2-trigger"][data-disabled] {
-  pointer-events: none;
-  opacity: 0.5;
-}
-
-[data-component="accordion-v2-content"] {
-  overflow: hidden;
-  font-size: 13px;
-  line-height: 140%;
-  color: var(--accordion-v2-fg);
-}
-
-[data-component="accordion-v2-content"][data-expanded] {
-  animation: accordion-v2-down 180ms ease-out;
-}
-
-[data-component="accordion-v2-content"][data-closed] {
-  animation: accordion-v2-up 180ms ease-out;
-}
-
-[data-component="accordion-v2-content"] [data-slot="accordion-v2-content-inner"] {
-  display: flex;
-  flex-direction: row;
-  align-items: flex-start;
-  width: 100%;
-  padding: 12px;
-}
-
-@keyframes accordion-v2-down {
-  from {
-    height: 0;
-  }
-  to {
-    height: var(--kb-collapsible-content-height);
-  }
-}
-
-@keyframes accordion-v2-up {
-  from {
-    height: var(--kb-collapsible-content-height);
-  }
-  to {
-    height: 0;
-  }
-}

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

@@ -1,86 +0,0 @@
-import { Accordion as Kobalte } from "@kobalte/core/accordion"
-import { Show, splitProps, type Component, type ComponentProps, type ParentProps } from "solid-js"
-import "./accordion-v2.css"
-
-const ChevronDown: Component = () => (
-  <svg
-    data-slot="accordion-v2-chevron"
-    width="14"
-    height="14"
-    viewBox="0 0 14 14"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    aria-hidden="true"
-  >
-    <path d="M4 5.5L7 8.5L10 5.5" stroke="currentColor" />
-  </svg>
-)
-
-export interface AccordionV2Props extends ComponentProps<typeof Kobalte> {}
-export interface AccordionV2ItemProps extends ComponentProps<typeof Kobalte.Item> {}
-export interface AccordionV2HeaderProps extends ComponentProps<typeof Kobalte.Header> {}
-export interface AccordionV2TriggerProps extends ComponentProps<typeof Kobalte.Trigger> {
-  hideChevron?: boolean
-}
-export interface AccordionV2ContentProps extends ComponentProps<typeof Kobalte.Content> {}
-
-function AccordionV2Root(props: ParentProps<AccordionV2Props>) {
-  const [s, r] = splitProps(props, ["class", "classList"])
-  return <Kobalte {...r} data-component="accordion-v2" classList={{ ...s.classList, [s.class ?? ""]: !!s.class }} />
-}
-
-function AccordionV2Item(props: ParentProps<AccordionV2ItemProps>) {
-  const [s, r] = splitProps(props, ["class", "classList"])
-  return (
-    <Kobalte.Item
-      {...r}
-      data-component="accordion-v2-item"
-      classList={{ ...s.classList, [s.class ?? ""]: !!s.class }}
-    />
-  )
-}
-
-function AccordionV2Header(props: ParentProps<AccordionV2HeaderProps>) {
-  const [s, r] = splitProps(props, ["class", "classList", "children"])
-  return (
-    <Kobalte.Header {...r} data-slot="accordion-v2-header" classList={{ ...s.classList, [s.class ?? ""]: !!s.class }}>
-      {s.children}
-    </Kobalte.Header>
-  )
-}
-
-function AccordionV2Trigger(props: ParentProps<AccordionV2TriggerProps>) {
-  const [s, r] = splitProps(props, ["class", "classList", "children", "hideChevron"])
-  return (
-    <Kobalte.Trigger
-      {...r}
-      data-component="accordion-v2-trigger"
-      classList={{ ...s.classList, [s.class ?? ""]: !!s.class }}
-    >
-      <span data-slot="accordion-v2-trigger-content">{s.children}</span>
-      <Show when={!s.hideChevron}>
-        <ChevronDown />
-      </Show>
-    </Kobalte.Trigger>
-  )
-}
-
-function AccordionV2Content(props: ParentProps<AccordionV2ContentProps>) {
-  const [s, r] = splitProps(props, ["class", "classList", "children"])
-  return (
-    <Kobalte.Content
-      {...r}
-      data-component="accordion-v2-content"
-      classList={{ ...s.classList, [s.class ?? ""]: !!s.class }}
-    >
-      <div data-slot="accordion-v2-content-inner">{s.children}</div>
-    </Kobalte.Content>
-  )
-}
-
-export const AccordionV2 = Object.assign(AccordionV2Root, {
-  Item: AccordionV2Item,
-  Header: AccordionV2Header,
-  Trigger: AccordionV2Trigger,
-  Content: AccordionV2Content,
-})

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

@@ -1,35 +0,0 @@
-import { Button as Kobalte } from "@kobalte/core/button"
-import { type ComponentProps, Show, createMemo, splitProps } from "solid-js"
-import { Icon, type IconProps } from "./icon"
-import "./button-v2.css"
-
-export interface ButtonV2Props
-  extends ComponentProps<typeof Kobalte>,
-    Pick<ComponentProps<"button">, "class" | "classList" | "children"> {
-  size?: "small" | "normal" | "large"
-  variant?: "neutral" | "danger" | "warning" | "outline" | "contrast" | "ghost" | "ghost-muted" | "loading"
-  icon?: IconProps["name"]
-}
-
-export function ButtonV2(props: ButtonV2Props) {
-  const [split, rest] = splitProps(props, ["variant", "size", "icon", "class", "classList"])
-  const resolvedIcon = createMemo(() => split.icon)
-  return (
-    <Kobalte
-      {...rest}
-      data-component="button-v2"
-      data-size={split.size || "normal"}
-      data-variant={split.variant || "neutral"}
-      data-icon={resolvedIcon()}
-      classList={{
-        ...split.classList,
-        [split.class ?? ""]: !!split.class,
-      }}
-    >
-      <Show when={resolvedIcon()}>
-        <Icon name={resolvedIcon()!} />
-      </Show>
-      {props.children}
-    </Kobalte>
-  )
-}