@opencode-ai/ui 0.0.0-beta-202606251302

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

@@ -0,0 +1,215 @@
+[data-component="toast-v2-region"] {
+  position: fixed;
+  bottom: 48px;
+  right: 32px;
+  z-index: 1000;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  max-width: min(320px, calc(100vw - 64px));
+  max-height: none;
+  width: 100%;
+  overflow: visible;
+  pointer-events: none;
+
+  [data-slot="toast-v2-list"] {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    max-height: none;
+    overflow-y: visible;
+    overflow-x: visible;
+    scrollbar-width: none;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+}
+
+[data-component="toast-v2"] {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  width: 320px;
+  padding: 12px;
+  max-height: min(420px, calc(100dvh - 96px));
+  overflow: hidden;
+  pointer-events: auto;
+  transition: transform 140ms ease-out;
+
+  border-radius: 8px;
+  color: var(--v2-text-text-base);
+  background: var(--v2-background-bg-layer-01);
+  box-shadow: var(--v2-elevation-floating);
+
+  &[data-opened] {
+    animation: toastV2PopIn 140ms ease-out;
+  }
+
+  &[data-closed] {
+    animation: toastV2PopOut 100ms ease-in forwards;
+  }
+
+  [data-slot="toast-v2-header"] {
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+    width: 100%;
+  }
+
+  [data-slot="toast-v2-icon"] {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 16px;
+    height: 20px;
+    min-width: 16px;
+    min-height: 20px;
+    color: var(--v2-icon-icon-base);
+
+    [data-component="icon"] {
+      color: var(--v2-icon-icon-base);
+      width: 16px;
+      height: 16px;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    > * {
+      width: 16px;
+      height: 16px;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+    }
+
+    svg {
+      width: 16px;
+      height: 16px;
+      display: block;
+      flex-shrink: 0;
+    }
+  }
+
+  [data-slot="toast-v2-content"] {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    min-height: 0;
+    min-width: 0;
+    overflow: hidden;
+  }
+
+  [data-slot="toast-v2-title"] {
+    color: var(--v2-text-text-base);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: 13px;
+    font-style: normal;
+    font-weight: 530;
+    line-height: 20px;
+    letter-spacing: -0.04px;
+    font-synthesis: none;
+    margin: 0;
+  }
+
+  [data-slot="toast-v2-description"] {
+    color: var(--v2-text-text-muted);
+    text-wrap-style: pretty;
+    overflow-wrap: anywhere;
+    word-break: break-word;
+    font-size: 13px;
+    font-style: normal;
+    font-weight: 440;
+    line-height: 20px;
+    letter-spacing: -0.04px;
+    font-synthesis: none;
+    margin: 0;
+  }
+
+  [data-slot="toast-v2-actions"] {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    padding-left: 28px;
+  }
+
+  [data-slot="toast-v2-actions"] [data-component="button-v2"] {
+    min-height: 24px;
+    font-size: 13px;
+    font-style: normal;
+    font-weight: 530;
+    line-height: 20px;
+    letter-spacing: -0.04px;
+    font-synthesis: none;
+  }
+
+  [data-slot="toast-v2-close-button"] {
+    flex-shrink: 0;
+    width: 20px;
+    height: 20px;
+    min-width: 20px;
+    min-height: 20px;
+    padding: 0;
+    border: 0;
+    border-radius: 4px;
+    background: transparent;
+    color: var(--v2-icon-icon-muted);
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    &:hover {
+      background: var(--v2-overlay-simple-overlay-hover);
+      color: var(--v2-icon-icon-base);
+    }
+
+    &:active {
+      background: var(--v2-overlay-simple-overlay-pressed);
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--v2-border-border-focus);
+      outline-offset: 2px;
+    }
+
+    svg {
+      width: 16px;
+      height: 16px;
+      display: block;
+    }
+  }
+}
+
+@keyframes toastV2PopIn {
+  from {
+    opacity: 0.8;
+    transform: translateY(6px);
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+@keyframes toastV2PopOut {
+  from {
+    transform: translateY(0);
+    opacity: 1;
+  }
+  to {
+    transform: translateY(6px);
+    opacity: 0.8;
+  }
+}

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

@@ -0,0 +1,144 @@
+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, children } from "solid-js"
+import { Portal } from "solid-js/web"
+import { ButtonV2 } from "./button-v2"
+import "./toast-v2.css"
+
+export interface ToastV2RegionProps extends ComponentProps<typeof Kobalte.Region> {}
+
+function ToastV2Region(props: ToastV2RegionProps) {
+  return (
+    <Portal>
+      <Kobalte.Region data-component="toast-v2-region" {...props}>
+        <Kobalte.List data-slot="toast-v2-list" />
+      </Kobalte.Region>
+    </Portal>
+  )
+}
+
+export interface ToastV2RootComponentProps extends ToastRootProps {
+  class?: string
+  classList?: ComponentProps<"li">["classList"]
+  children?: JSX.Element
+}
+
+function ToastV2Root(props: ToastV2RootComponentProps) {
+  return (
+    <Kobalte
+      data-component="toast-v2"
+      classList={{
+        ...props.classList,
+        [props.class ?? ""]: !!props.class,
+      }}
+      {...props}
+    />
+  )
+}
+
+function ToastV2Icon(props: ComponentProps<"div">) {
+  return <div data-slot="toast-v2-icon" {...props} />
+}
+
+function ToastV2Content(props: ComponentProps<"div">) {
+  return <div data-slot="toast-v2-content" {...props} />
+}
+
+function ToastV2Title(props: ToastTitleProps & ComponentProps<"div">) {
+  return <Kobalte.Title data-slot="toast-v2-title" {...props} />
+}
+
+function ToastV2Description(props: ToastDescriptionProps & ComponentProps<"div">) {
+  return <Kobalte.Description data-slot="toast-v2-description" {...props} />
+}
+
+function ToastV2Actions(props: ComponentProps<"div">) {
+  return <div data-slot="toast-v2-actions" {...props} />
+}
+
+function ToastV2CloseButton(props: ToastCloseButtonProps & ComponentProps<"button">) {
+  return (
+    <Kobalte.CloseButton data-slot="toast-v2-close-button" aria-label="Dismiss" {...props}>
+      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+        <path d="M4.25 11.75L11.75 4.25" stroke="currentColor" />
+        <path d="M11.75 11.75L4.25 4.25" stroke="currentColor" />
+      </svg>
+    </Kobalte.CloseButton>
+  )
+}
+
+export const ToastV2 = Object.assign(ToastV2Root, {
+  Region: ToastV2Region,
+  Icon: ToastV2Icon,
+  Content: ToastV2Content,
+  Title: ToastV2Title,
+  Description: ToastV2Description,
+  Actions: ToastV2Actions,
+  CloseButton: ToastV2CloseButton,
+})
+
+export { toaster as toasterV2 }
+
+export interface ToastV2Action {
+  label: string
+  variant?: "primary" | "secondary"
+  onClick: "dismiss" | (() => void)
+}
+
+export interface ToastV2Options {
+  title?: string
+  description?: string
+  icon?: JSX.Element
+  duration?: number
+  persistent?: boolean
+  actions?: ToastV2Action[]
+}
+
+export function showToastV2(options: ToastV2Options | string) {
+  const opts = typeof options === "string" ? { description: options } : options
+  const resolvedIcon = children(() => opts.icon)
+  return toaster.show((props) => (
+    <ToastV2 toastId={props.toastId} duration={opts.duration} persistent={opts.persistent}>
+      <div data-slot="toast-v2-header">
+        <Show when={resolvedIcon()}>
+          <ToastV2.Icon>{resolvedIcon()}</ToastV2.Icon>
+        </Show>
+        <ToastV2.Content>
+          <Show when={opts.title}>
+            <ToastV2.Title>{opts.title}</ToastV2.Title>
+          </Show>
+          <Show when={opts.description}>
+            <ToastV2.Description>{opts.description}</ToastV2.Description>
+          </Show>
+        </ToastV2.Content>
+        <ToastV2.CloseButton />
+      </div>
+      <Show when={opts.actions?.length}>
+        <ToastV2.Actions>
+          {opts.actions!.map((action) => (
+            <ButtonV2
+              variant={action.variant === "secondary" ? "ghost" : "neutral"}
+              size="small"
+              data-action-variant={action.variant ?? "primary"}
+              onClick={() => {
+                if (typeof action.onClick === "function") {
+                  action.onClick()
+                }
+                toaster.dismiss(props.toastId)
+              }}
+            >
+              {action.label}
+            </ButtonV2>
+          ))}
+        </ToastV2.Actions>
+      </Show>
+    </ToastV2>
+  ))
+}
+
+export interface ToastV2PromiseOptions<T, U = unknown> {
+  loading?: JSX.Element
+  success?: (data: T) => JSX.Element
+  error?: (error: U) => JSX.Element
+}

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

@@ -0,0 +1,53 @@
+[data-component="tooltip-v2"] {
+  box-sizing: border-box;
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 5px 6px;
+  gap: 6px;
+
+  background: var(--v2-background-bg-layer-01);
+  box-shadow: var(--v2-elevation-floating);
+  border-radius: 4px;
+
+  font-style: normal;
+  font-weight: 530;
+  font-size: 11px;
+  line-height: 12px;
+  letter-spacing: 0.05px;
+  color: var(--v2-text-text-base);
+  font-variant-numeric: tabular-nums;
+  font-variation-settings: "slnt" 0;
+
+  user-select: none;
+  pointer-events: none;
+
+  animation: tooltipV2In 120ms ease-out;
+  transform-origin: var(--kb-tooltip-content-transform-origin);
+
+  &[data-closed] {
+    animation: tooltipV2Out 80ms ease-in forwards;
+  }
+}
+
+@keyframes tooltipV2In {
+  from {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes tooltipV2Out {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+}

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

@@ -0,0 +1,146 @@
+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"
+import "./tooltip-v2.css"
+
+export interface TooltipV2Props extends ComponentProps<typeof KobalteTooltip> {
+  value: JSX.Element
+  class?: string
+  contentClass?: string
+  contentStyle?: JSX.CSSProperties
+  inactive?: boolean
+  forceOpen?: boolean
+}
+
+export function TooltipV2(props: TooltipV2Props) {
+  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}
+          {...others}
+          openDelay={0}
+          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-v2-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
+              ref={(el) => {
+                const theme = ref?.closest("[data-theme]")?.getAttribute("data-theme")
+                if (theme) el.setAttribute("data-theme", theme)
+              }}
+              data-component="tooltip-v2"
+              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.Content>
+          </KobalteTooltip.Portal>
+        </KobalteTooltip>
+      </Match>
+    </Switch>
+  )
+}

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

@@ -0,0 +1,92 @@
+import { createUniqueId, type ComponentProps } from "solid-js"
+
+export function WordmarkV2(props: Pick<ComponentProps<"svg">, "class">) {
+  const filter = createUniqueId()
+  const mask = createUniqueId()
+  const maskGradient = createUniqueId()
+
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 720.002 129.001"
+      fill="none"
+      preserveAspectRatio="none"
+      classList={{ [props.class ?? ""]: !!props.class }}
+    >
+      <g opacity="0.16" filter={`url(#${filter})`} mask={`url(#${mask})`}>
+        <path
+          opacity="0.7"
+          d="M55.3846 36.8583H18.4615V92.144H55.3846V36.8583ZM73.8462 110.573H0V18.4297H73.8462V110.573Z"
+          fill="currentColor"
+        />
+        <path
+          opacity="0.7"
+          d="M110.774 92.144H147.697V36.8583H110.774V92.144ZM166.159 110.573H110.774V129.001H92.3125V18.4297H166.159V110.573Z"
+          fill="currentColor"
+        />
+        <path
+          opacity="0.7"
+          d="M258.463 73.7154H203.079V92.144H258.463V110.573H184.617V18.4297H258.463V73.7154ZM203.079 55.2868H240.002V36.8583H203.079V55.2868Z"
+          fill="currentColor"
+        />
+        <path
+          opacity="0.7"
+          d="M332.306 36.8583H295.383V110.573H276.922V18.4297H332.306V36.8583ZM350.768 110.573H332.306V36.8583H350.768V110.573Z"
+          fill="currentColor"
+        />
+        <path
+          opacity="0.7"
+          d="M443.081 36.8583H387.696V92.144H443.081V110.573H369.234V18.4297H443.081V36.8583Z"
+          fill="currentColor"
+        />
+        <path
+          opacity="0.7"
+          d="M516.924 36.8583H480.001V92.144H516.924V36.8583ZM535.385 110.573H461.539V18.4297H535.385V110.573Z"
+          fill="currentColor"
+        />
+        <path
+          opacity="0.7"
+          d="M609.228 36.8571H572.305V92.1429H609.228V36.8571ZM627.69 110.571H553.844V18.4286H609.228V0H627.69V110.571Z"
+          fill="currentColor"
+        />
+        <path
+          opacity="0.7"
+          d="M664.618 36.8583V55.2868H701.541V36.8583H664.618ZM720.002 73.7154H664.618V92.144H720.002V110.573H646.156V18.4297H720.002V73.7154Z"
+          fill="currentColor"
+        />
+      </g>
+      <defs>
+        <mask id={mask} maskUnits="userSpaceOnUse" x="0" y="0" width="720" height="129">
+          <rect width="720" height="129" fill={`url(#${maskGradient})`} />
+        </mask>
+        <linearGradient id={maskGradient} x1="360" y1="0" x2="360" y2="112" gradientUnits="userSpaceOnUse">
+          <stop stop-color="white" stop-opacity="0.7" />
+          <stop offset="1" stop-color="white" stop-opacity="0" />
+        </linearGradient>
+        <filter
+          id={filter}
+          x="0"
+          y="0"
+          width="720.002"
+          height="130.001"
+          filterUnits="userSpaceOnUse"
+          color-interpolation-filters="sRGB"
+        >
+          <feFlood flood-opacity="0" result="BackgroundImageFix" />
+          <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+          <feColorMatrix
+            in="SourceAlpha"
+            type="matrix"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+            result="hardAlpha"
+          />
+          <feOffset dy="1" />
+          <feGaussianBlur stdDeviation="1" />
+          <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+          <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0" />
+          <feBlend mode="normal" in2="shape" result="effect1_innerShadow_4938_16028" />
+        </filter>
+      </defs>
+    </svg>
+  )
+}