@opencode-ai/ui 0.0.0 → 1.17.13

package/src/v2/components/text-shimmer-v2.css

@@ -0,0 +1,125 @@
+* {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: geometricPrecision;
+}
+
+[data-component="text-shimmer-v2"] {
+  --_step: 45ms;
+  --_duration: 1200ms;
+  --_swap: 220ms;
+  --_index: 0;
+  --_angle: 90deg;
+  --_spread: 5.2ch;
+  --_size: 360%;
+  --_base-color: var(--v2-text-text-muted);
+  --_peak-color: var(--v2-text-text-base);
+  --_sweep: linear-gradient(
+    var(--_angle),
+    transparent calc(50% - var(--_spread)),
+    var(--_peak-color) 50%,
+    transparent calc(50% + var(--_spread))
+  );
+  --_base: linear-gradient(var(--_base-color), var(--_base-color));
+
+  display: inline-flex;
+  align-items: baseline;
+  font: inherit;
+  letter-spacing: inherit;
+  line-height: inherit;
+  user-select: none;
+}
+
+[data-component="text-shimmer-v2"] [data-slot="text-shimmer-v2-char"] {
+  display: inline-grid;
+  white-space: pre;
+  font: inherit;
+  letter-spacing: inherit;
+  line-height: inherit;
+}
+
+[data-component="text-shimmer-v2"] [data-slot="text-shimmer-v2-base"],
+[data-component="text-shimmer-v2"] [data-slot="text-shimmer-v2-shimmer"] {
+  grid-area: 1 / 1;
+  white-space: pre;
+  transition: opacity var(--_swap) ease-out;
+  font: inherit;
+  letter-spacing: inherit;
+  line-height: inherit;
+}
+
+[data-component="text-shimmer-v2"] [data-slot="text-shimmer-v2-base"] {
+  color: inherit;
+  opacity: 1;
+}
+
+[data-component="text-shimmer-v2"] [data-slot="text-shimmer-v2-shimmer"] {
+  color: var(--_base-color);
+  opacity: 0;
+}
+
+[data-component="text-shimmer-v2"][data-active="true"] [data-slot="text-shimmer-v2-shimmer"] {
+  opacity: 1;
+}
+
+[data-component="text-shimmer-v2"] [data-slot="text-shimmer-v2-shimmer"][data-run="true"] {
+  animation-name: text-shimmer-v2-sweep;
+  animation-duration: var(--_duration);
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+  animation-fill-mode: both;
+  animation-delay: calc(var(--_step) * var(--_index) * -1);
+  will-change: background-position;
+}
+
+@keyframes text-shimmer-v2-sweep {
+  0% {
+    background-position:
+      100% 0,
+      0 0;
+  }
+  100% {
+    background-position:
+      0% 0,
+      0 0;
+  }
+}
+
+@supports ((-webkit-background-clip: text) or (background-clip: text)) {
+  [data-component="text-shimmer-v2"] [data-slot="text-shimmer-v2-shimmer"] {
+    color: transparent;
+    -webkit-text-fill-color: transparent;
+    background-image: var(--_sweep), var(--_base);
+    background-size:
+      var(--_size) 100%,
+      100% 100%;
+    background-position:
+      100% 0,
+      0 0;
+    background-repeat: no-repeat;
+    -webkit-background-clip: text;
+    background-clip: text;
+  }
+
+  [data-component="text-shimmer-v2"][data-active="true"] [data-slot="text-shimmer-v2-base"] {
+    opacity: 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-component="text-shimmer-v2"] [data-slot="text-shimmer-v2-base"],
+  [data-component="text-shimmer-v2"] [data-slot="text-shimmer-v2-shimmer"] {
+    transition-duration: 0ms;
+  }
+
+  [data-component="text-shimmer-v2"] [data-slot="text-shimmer-v2-shimmer"] {
+    animation: none !important;
+    color: inherit;
+    -webkit-text-fill-color: currentColor;
+    background-image: none;
+  }
+
+  [data-component="text-shimmer-v2"] [data-slot="text-shimmer-v2-base"] {
+    opacity: 1 !important;
+  }
+}

package/src/v2/components/text-shimmer-v2.tsx

@@ -0,0 +1,63 @@
+import { createEffect, createMemo, createSignal, onCleanup, type ValidComponent } from "solid-js"
+import { Dynamic } from "solid-js/web"
+import "./text-shimmer-v2.css"
+
+export const TextShimmerV2 = <T extends ValidComponent = "span">(props: {
+  text: string
+  class?: string
+  as?: T
+  active?: boolean
+  offset?: number
+}) => {
+  const text = createMemo(() => props.text ?? "")
+  const active = createMemo(() => props.active ?? true)
+  const offset = createMemo(() => props.offset ?? 0)
+  const [run, setRun] = createSignal(active())
+  const swap = 220
+  let timer: ReturnType<typeof setTimeout> | undefined
+
+  createEffect(() => {
+    if (timer) {
+      clearTimeout(timer)
+      timer = undefined
+    }
+
+    if (active()) {
+      setRun(true)
+      return
+    }
+
+    timer = setTimeout(() => {
+      timer = undefined
+      setRun(false)
+    }, swap)
+  })
+
+  onCleanup(() => {
+    if (!timer) return
+    clearTimeout(timer)
+  })
+
+  return (
+    <Dynamic
+      component={props.as ?? "span"}
+      data-component="text-shimmer-v2"
+      data-active={active() ? "true" : "false"}
+      class={props.class}
+      aria-label={text()}
+      style={{
+        "--_swap": `${swap}ms`,
+        "--_index": `${offset()}`,
+      }}
+    >
+      <span data-slot="text-shimmer-v2-char">
+        <span data-slot="text-shimmer-v2-base" aria-hidden="true">
+          {text()}
+        </span>
+        <span data-slot="text-shimmer-v2-shimmer" data-run={run() ? "true" : "false"} aria-hidden="true">
+          {text()}
+        </span>
+      </span>
+    </Dynamic>
+  )
+}

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

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

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
+}