@opencode-ai/ui 0.0.0-dev-202609071625 → 0.0.0-dev-19265

package/src/v2/components/progress-circle-v2.tsx

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

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

@@ -1,28 +0,0 @@
-import { Switch as Kobalte } from "@kobalte/core/switch"
-import { Show, splitProps } from "solid-js"
-import type { ComponentProps, ParentProps } from "solid-js"
-import "./switch-v2.css"
-
-export interface SwitchProps extends ParentProps<ComponentProps<typeof Kobalte>> {
-  hideLabel?: boolean
-}
-
-export function Switch(props: SwitchProps) {
-  const [local, others] = splitProps(props, ["children", "class", "hideLabel"])
-  return (
-    <Kobalte {...others} class={local.class} data-component="switch">
-      <Kobalte.Input data-slot="switch-input" />
-      <Show when={local.children}>
-        {(label) => (
-          <Kobalte.Label data-slot="switch-label" classList={{ "sr-only": local.hideLabel }}>
-            {label()}
-          </Kobalte.Label>
-        )}
-      </Show>
-      <Kobalte.Control data-slot="switch-control">
-        <Kobalte.Thumb data-slot="switch-thumb" />
-      </Kobalte.Control>
-      <Kobalte.ErrorMessage data-slot="switch-error" />
-    </Kobalte>
-  )
-}

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

@@ -1,149 +0,0 @@
-import { Tabs as Kobalte } from "@kobalte/core/tabs"
-import { Show, splitProps, type JSX } from "solid-js"
-import type { ComponentProps, ParentProps, Component } from "solid-js"
-import { useI18n } from "../../context/i18n"
-import "./tabs-v2.css"
-
-export interface TabsV2Props extends ComponentProps<typeof Kobalte> {
-  variant?: "normal" | "pill" | "settings"
-  orientation?: "horizontal" | "vertical"
-}
-export interface TabsV2ListProps extends ComponentProps<typeof Kobalte.List> {}
-export interface TabsV2TriggerProps extends ComponentProps<typeof Kobalte.Trigger> {
-  onMiddleClick?: () => void
-  /** Optional subtext shown beside the primary content (muted style) */
-  subtext?: JSX.Element | string
-}
-export interface TabsV2CloseButtonProps extends ComponentProps<"div"> {}
-export interface TabsV2ContentProps extends ComponentProps<typeof Kobalte.Content> {}
-
-function TabsV2Root(props: TabsV2Props) {
-  const [split, rest] = splitProps(props, ["class", "classList", "variant", "orientation"])
-  return (
-    <Kobalte
-      {...rest}
-      orientation={split.orientation}
-      data-component="tabs-v2"
-      data-variant={split.variant || "normal"}
-      data-orientation={split.orientation || "horizontal"}
-      classList={{
-        ...split.classList,
-        [split.class ?? ""]: !!split.class,
-      }}
-    />
-  )
-}
-
-function TabsV2List(props: TabsV2ListProps) {
-  const [split, rest] = splitProps(props, ["class", "classList"])
-  return (
-    <Kobalte.List
-      {...rest}
-      data-slot="tabs-v2-list"
-      classList={{
-        ...split.classList,
-        [split.class ?? ""]: !!split.class,
-      }}
-    />
-  )
-}
-
-function TabsV2Trigger(props: ParentProps<TabsV2TriggerProps>) {
-  const [split, rest] = splitProps(props, ["class", "classList", "children", "onMiddleClick", "subtext"])
-  return (
-    <div
-      data-slot="tabs-v2-trigger-wrapper"
-      data-value={props.value}
-      classList={{
-        ...split.classList,
-        [split.class ?? ""]: !!split.class,
-      }}
-      onMouseDown={(e) => {
-        if (e.button === 1 && split.onMiddleClick) {
-          e.preventDefault()
-        }
-      }}
-      onAuxClick={(e) => {
-        if (e.button === 1 && split.onMiddleClick) {
-          e.preventDefault()
-          split.onMiddleClick()
-        }
-      }}
-    >
-      <Kobalte.Trigger {...rest} data-slot="tabs-v2-trigger" data-value={props.value}>
-        <span class="inline-flex items-center gap-2" data-slot="tabs-v2-trigger-content">
-          {split.children}
-          <Show when={split.subtext}>
-            {(subtext) => (
-              <span data-slot="tabs-v2-subtext" class="ms-2 text-xs text-text-weak">
-                {subtext()}
-              </span>
-            )}
-          </Show>
-        </span>
-      </Kobalte.Trigger>
-    </div>
-  )
-}
-
-function TabsV2CloseButton(props: TabsV2CloseButtonProps) {
-  const i18n = useI18n()
-  const [split, rest] = splitProps(props, ["class", "classList", "onClick"])
-  return (
-    <div
-      role="button"
-      tabindex={0}
-      aria-label={i18n.t("ui.tabs.close")}
-      data-slot="tabs-v2-close-button"
-      {...rest}
-      classList={{
-        [split.class ?? ""]: !!split.class,
-        ...split.classList,
-      }}
-      onClick={(e) => {
-        e.preventDefault()
-        e.stopPropagation()
-        if (typeof split.onClick === "function") {
-          split.onClick(e)
-        }
-      }}
-      onMouseDown={(e) => {
-        e.preventDefault()
-        e.stopPropagation()
-      }}
-    >
-      <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path d="M10.8889 3.11108L3.11108 10.8889" stroke="currentColor" stroke-linejoin="round" />
-        <path d="M3.11108 3.11108L10.8889 10.8889" stroke="currentColor" stroke-linejoin="round" />
-      </svg>
-    </div>
-  )
-}
-
-function TabsV2Content(props: ParentProps<TabsV2ContentProps>) {
-  const [split, rest] = splitProps(props, ["class", "classList", "children"])
-  return (
-    <Kobalte.Content
-      {...rest}
-      data-slot="tabs-v2-content"
-      classList={{
-        ...split.classList,
-        [split.class ?? ""]: !!split.class,
-      }}
-    >
-      {split.children}
-    </Kobalte.Content>
-  )
-}
-
-const TabsV2SectionTitle: Component<ParentProps> = (props) => {
-  return <div data-slot="tabs-v2-section-title">{props.children}</div>
-}
-
-export const TabsV2 = Object.assign(TabsV2Root, {
-  List: TabsV2List,
-  Trigger: TabsV2Trigger,
-  CloseButton: TabsV2CloseButton,
-  Content: TabsV2Content,
-  SectionTitle: TabsV2SectionTitle,
-})

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

@@ -1,125 +0,0 @@
-* {
-  -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

@@ -1,63 +0,0 @@
-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/wordmark-v2.tsx

@@ -1,71 +0,0 @@
-import { createUniqueId, type ComponentProps } from "solid-js"
-
-export function WordmarkV2(props: Pick<ComponentProps<"svg">, "class">) {
-  const mask = createUniqueId()
-  const maskGradient = createUniqueId()
-
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 720 129"
-      fill="none"
-      classList={{ [props.class ?? ""]: !!props.class }}
-    >
-      <g opacity="0.6">
-        <g mask={`url(#${mask})`}>
-          <g opacity="0.16">
-            <path
-              opacity="0.7"
-              d="M55.3846 36.4286H18.4615V91.7143H55.3846V36.4286ZM73.8462 110.143H0V18H73.8462V110.143Z"
-              fill="currentColor"
-            />
-            <path
-              opacity="0.7"
-              d="M110.462 91.7143H147.385V36.4286H110.462V91.7143ZM165.846 110.143H110.462V128.571H92V18H165.846V110.143Z"
-              fill="currentColor"
-            />
-            <path
-              opacity="0.7"
-              d="M258.846 73.2857H203.462V91.7143H258.846V110.143H185V18H258.846V73.2857ZM203.462 54.8571H240.385V36.4286H203.462V54.8571Z"
-              fill="currentColor"
-            />
-            <path
-              opacity="0.7"
-              d="M332.385 36.4286H295.462V110.143H277V18H332.385V36.4286ZM350.846 110.143H332.385V36.4286H350.846V110.143Z"
-              fill="currentColor"
-            />
-            <path
-              opacity="0.7"
-              d="M442.846 36.4286H387.462V91.7143H442.846V110.143H369V18H442.846V36.4286Z"
-              fill="currentColor"
-            />
-            <path
-              opacity="0.7"
-              d="M517.385 36.4286H480.462V91.7143H517.385V36.4286ZM535.846 110.143H462V18H535.846V110.143Z"
-              fill="currentColor"
-            />
-            <path
-              opacity="0.7"
-              d="M609.385 36.8571H572.462V92.1429H609.385V36.8571ZM627.846 110.571H554V18.4286H609.385V0H627.846V110.571Z"
-              fill="currentColor"
-            />
-            <path
-              opacity="0.7"
-              d="M664.462 36.4286V54.8571H701.385V36.4286H664.462ZM719.846 73.2857H664.462V91.7143H719.846V110.143H646V18H719.846V73.2857Z"
-              fill="currentColor"
-            />
-          </g>
-        </g>
-      </g>
-      <defs>
-        <mask id={mask} style="mask-type:alpha" 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="68" x2="360" y2="129" gradientUnits="userSpaceOnUse">
-          <stop stop-color="white" stop-opacity="0.7" />
-          <stop offset="1" stop-color="white" stop-opacity="0" />
-        </linearGradient>
-      </defs>
-    </svg>
-  )
-}