@opencode-ai/ui 0.0.0 → 1.17.13

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

@@ -0,0 +1,64 @@
+[data-component="tooltip-v2-trigger"] {
+  display: flex;
+}
+
+[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);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-component="tooltip-v2"],
+  [data-component="tooltip-v2"][data-closed] {
+    animation: none;
+  }
+}

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

@@ -0,0 +1,147 @@
+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}
+          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-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>
+  )
+}

package/src/v2/styles/colors.css

@@ -0,0 +1,172 @@
+@layer theme {
+  :root {
+    /* ── Grey ── */
+    --v2-grey-50: #ffffffff;
+    --v2-grey-100: #fafafaff;
+    --v2-grey-200: #f2f2f2ff;
+    --v2-grey-300: #eeeeeeff;
+    --v2-grey-400: #dbdbdbff;
+    --v2-grey-500: #aeaeaeff;
+    --v2-grey-600: #808080ff;
+    --v2-grey-700: #5c5c5cff;
+    --v2-grey-800: #3a3a3aff;
+    --v2-grey-900: #2e2e2eff;
+    --v2-grey-1000: #242424ff;
+    --v2-grey-1100: #161616ff;
+    --v2-grey-1200: #080808ff;
+
+    /* ── Alpha Dark ── */
+    --v2-alpha-dark-100: #000000ff;
+    --v2-alpha-dark-90: #000000e5;
+    --v2-alpha-dark-80: #000000cc;
+    --v2-alpha-dark-70: #000000b2;
+    --v2-alpha-dark-60: #00000099;
+    --v2-alpha-dark-50: #00000080;
+    --v2-alpha-dark-40: #00000066;
+    --v2-alpha-dark-30: #0000004d;
+    --v2-alpha-dark-24: #0000003d;
+    --v2-alpha-dark-20: #00000033;
+    --v2-alpha-dark-16: #00000029;
+    --v2-alpha-dark-14: #00000024;
+    --v2-alpha-dark-12: #0000001f;
+    --v2-alpha-dark-10: #0000001a;
+    --v2-alpha-dark-8: #00000014;
+    --v2-alpha-dark-6: #0000000f;
+    --v2-alpha-dark-4: #0000000a;
+    --v2-alpha-dark-2: #00000005;
+    --v2-alpha-dark-0: #00000000;
+
+    /* ── Alpha Light ── */
+    --v2-alpha-light-100: #ffffffff;
+    --v2-alpha-light-90: #ffffffe5;
+    --v2-alpha-light-80: #ffffffcc;
+    --v2-alpha-light-70: #ffffffb2;
+    --v2-alpha-light-60: #ffffff99;
+    --v2-alpha-light-50: #ffffff80;
+    --v2-alpha-light-40: #ffffff66;
+    --v2-alpha-light-30: #ffffff4d;
+    --v2-alpha-light-24: #ffffff3d;
+    --v2-alpha-light-20: #ffffff33;
+    --v2-alpha-light-16: #ffffff29;
+    --v2-alpha-light-14: #ffffff24;
+    --v2-alpha-light-12: #ffffff1f;
+    --v2-alpha-light-10: #ffffff1a;
+    --v2-alpha-light-8: #ffffff14;
+    --v2-alpha-light-6: #ffffff0f;
+    --v2-alpha-light-4: #ffffff0a;
+    --v2-alpha-light-2: #ffffff05;
+    --v2-alpha-light-0: #ffffff00;
+
+    /* ── Red ── */
+    --v2-red-100: #fcecebff;
+    --v2-red-200: #f6d5d3ff;
+    --v2-red-300: #f2bbb7ff;
+    --v2-red-400: #f29b96ff;
+    --v2-red-500: #f17471ff;
+    --v2-red-600: #f1484fff;
+    --v2-red-700: #d92e3cff;
+    --v2-red-800: #b82d35ff;
+    --v2-red-900: #97252bff;
+    --v2-red-1000: #7a1f23ff;
+    --v2-red-1100: #5f1a1cff;
+    --v2-red-1200: #461516ff;
+
+    /* ── Orange ── */
+    --v2-orange-100: #fdf2edff;
+    --v2-orange-200: #ffe7dcff;
+    --v2-orange-300: #ffd8c6ff;
+    --v2-orange-400: #ffc1a4ff;
+    --v2-orange-500: #ffa478ff;
+    --v2-orange-600: #ff8648ff;
+    --v2-orange-700: #ee7330ff;
+    --v2-orange-800: #d16427ff;
+    --v2-orange-900: #b35624ff;
+    --v2-orange-1000: #954c27ff;
+    --v2-orange-1100: #723d22ff;
+    --v2-orange-1200: #5a2c14ff;
+
+    /* ── Yellow ── */
+    --v2-yellow-100: #fefaecff;
+    --v2-yellow-200: #fcefd0ff;
+    --v2-yellow-300: #f7e5b5ff;
+    --v2-yellow-400: #f3da9bff;
+    --v2-yellow-500: #f2cf76ff;
+    --v2-yellow-600: #f6c251ff;
+    --v2-yellow-700: #e7af36ff;
+    --v2-yellow-800: #cb9f34ff;
+    --v2-yellow-900: #ac8833ff;
+    --v2-yellow-1000: #8e7231ff;
+    --v2-yellow-1100: #68552bff;
+    --v2-yellow-1200: #4b4025ff;
+
+    /* ── Green ── */
+    --v2-green-100: #e7f9eaff;
+    --v2-green-200: #d0f0d5ff;
+    --v2-green-300: #b8e9c1ff;
+    --v2-green-400: #96e3a6ff;
+    --v2-green-500: #6bd586ff;
+    --v2-green-600: #49c970ff;
+    --v2-green-700: #2eaf5aff;
+    --v2-green-800: #198b43ff;
+    --v2-green-900: #1d783cff;
+    --v2-green-1000: #196130ff;
+    --v2-green-1100: #164c26ff;
+    --v2-green-1200: #14361dff;
+
+    /* ── Cyan ── */
+    --v2-cyan-100: #e2f7fbff;
+    --v2-cyan-200: #c4edf4ff;
+    --v2-cyan-300: #a3e4efff;
+    --v2-cyan-400: #65d9ebff;
+    --v2-cyan-500: #00c5dfff;
+    --v2-cyan-600: #00abcfff;
+    --v2-cyan-700: #0096b8ff;
+    --v2-cyan-800: #007d9bff;
+    --v2-cyan-900: #006c85ff;
+    --v2-cyan-1000: #005a6eff;
+    --v2-cyan-1100: #004756ff;
+    --v2-cyan-1200: #00353fff;
+
+    /* ── Blue ── */
+    --v2-blue-100: #ecf1feff;
+    --v2-blue-200: #d7e2fcff;
+    --v2-blue-300: #c3d4fdff;
+    --v2-blue-400: #a2bcffff;
+    --v2-blue-500: #7698fdff;
+    --v2-blue-600: #3b5cf6ff;
+    --v2-blue-700: #3250dfff;
+    --v2-blue-800: #2c47c8ff;
+    --v2-blue-900: #263fa9ff;
+    --v2-blue-1000: #22388fff;
+    --v2-blue-1100: #1c2e70ff;
+    --v2-blue-1200: #1b2852ff;
+
+    /* ── Purple ── */
+    --v2-purple-100: #ebecfeff;
+    --v2-purple-200: #d5d5fcff;
+    --v2-purple-300: #b9b8f5ff;
+    --v2-purple-400: #9e99f7ff;
+    --v2-purple-500: #8271f8ff;
+    --v2-purple-600: #7152f4ff;
+    --v2-purple-700: #623be2ff;
+    --v2-purple-800: #5230c2ff;
+    --v2-purple-900: #442aa1ff;
+    --v2-purple-1000: #361f83ff;
+    --v2-purple-1100: #2b1b6aff;
+    --v2-purple-1200: #221358ff;
+
+    /* ── Pink ── */
+    --v2-pink-100: #fdecf3ff;
+    --v2-pink-200: #f7d5e4ff;
+    --v2-pink-300: #fabcd8ff;
+    --v2-pink-400: #f799c6ff;
+    --v2-pink-500: #f26cb2ff;
+    --v2-pink-600: #f64aabff;
+    --v2-pink-700: #e4429eff;
+    --v2-pink-800: #c83d8bff;
+    --v2-pink-900: #aa3576ff;
+    --v2-pink-1000: #8c2d61ff;
+    --v2-pink-1100: #6f284fff;
+    --v2-pink-1200: #5c1d3fff;
+  }
+}

package/src/v2/styles/tailwind.css

@@ -0,0 +1,2 @@
+@import "./colors.css";
+@import "./theme.css";