@opencode-ai/ui 0.0.0-beta-202606251302

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

@@ -0,0 +1,225 @@
+import { DropdownMenu } from "@kobalte/core/dropdown-menu"
+import { ContextMenu } from "@kobalte/core/context-menu"
+import { Show, splitProps, type Component, type ComponentProps, type JSX, type ParentProps } from "solid-js"
+import "./menu-v2.css"
+
+const ChevronRight: Component = () => (
+  <svg
+    data-slot="menu-v2-item-chevron"
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-hidden="true"
+  >
+    <path d="M6 4L10 8L6 12V4Z" fill="currentColor" />
+  </svg>
+)
+
+const CheckMark: Component = () => (
+  <svg width="14" height="14" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+    <path
+      d="M3.53564 8.17857L6.39279 11.75L12.4642 4.25"
+      stroke="currentColor"
+      stroke-width="1"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+)
+
+function ItemBody(
+  props: ParentProps<{
+    shortcut?: JSX.Element | string
+    badge?: JSX.Element | string
+    trailing?: JSX.Element
+  }>,
+) {
+  return (
+    <>
+      <span data-slot="menu-v2-item-content">{props.children}</span>
+      <Show when={props.shortcut}>{(shortcut) => <span data-slot="menu-v2-item-shortcut">{shortcut()}</span>}</Show>
+      <Show when={props.badge}>{(badge) => <span data-slot="menu-v2-item-badge">{badge()}</span>}</Show>
+      {props.trailing}
+    </>
+  )
+}
+
+export interface MenuV2ItemProps extends ComponentProps<typeof DropdownMenu.Item> {
+  shortcut?: JSX.Element | string
+  badge?: JSX.Element | string
+}
+
+function MenuV2Item(props: ParentProps<MenuV2ItemProps>) {
+  const [s, r] = splitProps(props, ["class", "classList", "children", "shortcut", "badge"])
+  return (
+    <DropdownMenu.Item {...r} data-component="menu-v2-item" classList={{ ...s.classList, [s.class ?? ""]: !!s.class }}>
+      <ItemBody shortcut={s.shortcut} badge={s.badge}>
+        {s.children}
+      </ItemBody>
+    </DropdownMenu.Item>
+  )
+}
+
+export interface MenuV2CheckboxItemProps extends ComponentProps<typeof DropdownMenu.CheckboxItem> {
+  shortcut?: JSX.Element | string
+  badge?: JSX.Element | string
+}
+
+function MenuV2CheckboxItem(props: ParentProps<MenuV2CheckboxItemProps>) {
+  const [s, r] = splitProps(props, ["class", "classList", "children", "shortcut", "badge"])
+  return (
+    <DropdownMenu.CheckboxItem
+      {...r}
+      data-component="menu-v2-item"
+      classList={{ ...s.classList, [s.class ?? ""]: !!s.class }}
+    >
+      <ItemBody
+        shortcut={s.shortcut}
+        badge={s.badge}
+        trailing={
+          <DropdownMenu.ItemIndicator data-slot="menu-v2-item-indicator" forceMount>
+            <CheckMark />
+          </DropdownMenu.ItemIndicator>
+        }
+      >
+        {s.children}
+      </ItemBody>
+    </DropdownMenu.CheckboxItem>
+  )
+}
+
+export interface MenuV2RadioItemProps extends ComponentProps<typeof DropdownMenu.RadioItem> {
+  shortcut?: JSX.Element | string
+  badge?: JSX.Element | string
+}
+
+function MenuV2RadioItem(props: ParentProps<MenuV2RadioItemProps>) {
+  const [s, r] = splitProps(props, ["class", "classList", "children", "shortcut", "badge"])
+  return (
+    <DropdownMenu.RadioItem
+      {...r}
+      data-component="menu-v2-item"
+      classList={{ ...s.classList, [s.class ?? ""]: !!s.class }}
+    >
+      <ItemBody
+        shortcut={s.shortcut}
+        badge={s.badge}
+        trailing={
+          <DropdownMenu.ItemIndicator data-slot="menu-v2-item-indicator" forceMount>
+            <CheckMark />
+          </DropdownMenu.ItemIndicator>
+        }
+      >
+        {s.children}
+      </ItemBody>
+    </DropdownMenu.RadioItem>
+  )
+}
+
+export interface MenuV2SubTriggerProps extends ComponentProps<typeof DropdownMenu.SubTrigger> {
+  shortcut?: JSX.Element | string
+  badge?: JSX.Element | string
+}
+
+function MenuV2SubTrigger(props: ParentProps<MenuV2SubTriggerProps>) {
+  const [s, r] = splitProps(props, ["class", "classList", "children", "shortcut", "badge"])
+  return (
+    <DropdownMenu.SubTrigger
+      {...r}
+      data-component="menu-v2-item"
+      classList={{ ...s.classList, [s.class ?? ""]: !!s.class }}
+    >
+      <ItemBody shortcut={s.shortcut} badge={s.badge} trailing={<ChevronRight />}>
+        {s.children}
+      </ItemBody>
+    </DropdownMenu.SubTrigger>
+  )
+}
+
+function MenuV2SubContent(props: ComponentProps<typeof DropdownMenu.SubContent>) {
+  const [s, r] = splitProps(props, ["class", "classList"])
+  return (
+    <DropdownMenu.SubContent
+      {...r}
+      data-component="menu-v2-content"
+      classList={{ ...s.classList, [s.class ?? ""]: !!s.class }}
+    />
+  )
+}
+
+function MenuV2GroupLabel(props: ComponentProps<typeof DropdownMenu.GroupLabel>) {
+  const [s, r] = splitProps(props, ["class", "classList"])
+  return (
+    <DropdownMenu.GroupLabel
+      {...r}
+      data-slot="menu-v2-group-label"
+      classList={{ ...s.classList, [s.class ?? ""]: !!s.class }}
+    />
+  )
+}
+
+function MenuV2Separator(props: ComponentProps<typeof DropdownMenu.Separator>) {
+  const [s, r] = splitProps(props, ["class", "classList"])
+  return (
+    <DropdownMenu.Separator
+      {...r}
+      data-slot="menu-v2-separator"
+      classList={{ ...s.classList, [s.class ?? ""]: !!s.class }}
+    />
+  )
+}
+
+function MenuV2Content(props: ComponentProps<typeof DropdownMenu.Content>) {
+  const [s, r] = splitProps(props, ["class", "classList"])
+  return (
+    <DropdownMenu.Content
+      {...r}
+      data-component="menu-v2-content"
+      classList={{ ...s.classList, [s.class ?? ""]: !!s.class }}
+    />
+  )
+}
+
+function MenuV2Root(props: ComponentProps<typeof DropdownMenu>) {
+  return <DropdownMenu {...props} />
+}
+
+function MenuV2ContextRoot(props: ComponentProps<typeof ContextMenu>) {
+  return <ContextMenu {...props} />
+}
+
+function MenuV2ContextContent(props: ComponentProps<typeof ContextMenu.Content>) {
+  const [s, r] = splitProps(props, ["class", "classList"])
+  return (
+    <ContextMenu.Content
+      {...r}
+      data-component="menu-v2-content"
+      classList={{ ...s.classList, [s.class ?? ""]: !!s.class }}
+    />
+  )
+}
+
+const MenuV2Context = Object.assign(MenuV2ContextRoot, {
+  Trigger: ContextMenu.Trigger,
+  Portal: ContextMenu.Portal,
+  Content: MenuV2ContextContent,
+})
+
+export const MenuV2 = Object.assign(MenuV2Root, {
+  Trigger: DropdownMenu.Trigger,
+  Portal: DropdownMenu.Portal,
+  Content: MenuV2Content,
+  Item: MenuV2Item,
+  CheckboxItem: MenuV2CheckboxItem,
+  RadioGroup: DropdownMenu.RadioGroup,
+  RadioItem: MenuV2RadioItem,
+  Group: DropdownMenu.Group,
+  GroupLabel: MenuV2GroupLabel,
+  Separator: MenuV2Separator,
+  Sub: DropdownMenu.Sub,
+  SubTrigger: MenuV2SubTrigger,
+  SubContent: MenuV2SubContent,
+  Context: MenuV2Context,
+})

package/src/v2/components/project-avatar-v2.css

@@ -0,0 +1,126 @@
+[data-component="project-avatar-v2"] {
+  position: relative;
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+}
+
+[data-component="project-avatar-v2"][data-unread] {
+  overflow: visible;
+}
+
+[data-slot="project-avatar-surface"] {
+  --project-avatar-bg: var(--v2-avatar-bg-gray);
+  --project-avatar-border: var(--v2-avatar-border-gray);
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  width: 100%;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  border-radius: 4px;
+  background:
+    linear-gradient(180deg, var(--v2-alpha-light-16) 0%, var(--v2-alpha-light-0) 100%), var(--project-avatar-bg);
+  box-shadow: inset 0 0 0 0.5px var(--project-avatar-border);
+  font-weight: 530;
+  font-size: 11px;
+  line-height: 1;
+  letter-spacing: 0.05px;
+  font-variant-numeric: tabular-nums;
+  text-transform: uppercase;
+  color: var(--v2-avatar-fg);
+  text-shadow: 0 0 4px var(--v2-alpha-dark-20);
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+[data-slot="project-avatar-surface"][data-variant="orange"] {
+  --project-avatar-bg: var(--v2-avatar-bg-orange);
+  --project-avatar-border: var(--v2-avatar-border-orange);
+}
+
+[data-slot="project-avatar-surface"][data-variant="yellow"] {
+  --project-avatar-bg: var(--v2-avatar-bg-yellow);
+  --project-avatar-border: var(--v2-avatar-border-yellow);
+}
+
+[data-slot="project-avatar-surface"][data-variant="cyan"] {
+  --project-avatar-bg: var(--v2-avatar-bg-cyan);
+  --project-avatar-border: var(--v2-avatar-border-cyan);
+}
+
+[data-slot="project-avatar-surface"][data-variant="green"] {
+  --project-avatar-bg: var(--v2-avatar-bg-green);
+  --project-avatar-border: var(--v2-avatar-border-green);
+}
+
+[data-slot="project-avatar-surface"][data-variant="red"] {
+  --project-avatar-bg: var(--v2-avatar-bg-red);
+  --project-avatar-border: var(--v2-avatar-border-red);
+}
+
+[data-slot="project-avatar-surface"][data-variant="pink"] {
+  --project-avatar-bg: var(--v2-avatar-bg-pink);
+  --project-avatar-border: var(--v2-avatar-border-pink);
+}
+
+[data-slot="project-avatar-surface"][data-variant="blue"] {
+  --project-avatar-bg: var(--v2-avatar-bg-blue);
+  --project-avatar-border: var(--v2-avatar-border-blue);
+}
+
+[data-slot="project-avatar-surface"][data-variant="purple"] {
+  --project-avatar-bg: var(--v2-avatar-bg-purple);
+  --project-avatar-border: var(--v2-avatar-border-purple);
+}
+
+[data-slot="project-avatar-surface"][data-variant="gray"] {
+  --project-avatar-bg: var(--v2-avatar-bg-gray);
+  --project-avatar-border: var(--v2-avatar-border-gray);
+}
+
+[data-slot="project-avatar-surface"][data-has-image] {
+  background: var(--project-avatar-bg);
+}
+
+[data-slot="project-avatar-surface"] [data-slot="project-avatar-image"] {
+  position: relative;
+  z-index: 1;
+  display: block;
+  width: 100%;
+  height: 100%;
+  border-radius: inherit;
+  object-fit: cover;
+  user-select: none;
+  -webkit-user-select: none;
+  -webkit-user-drag: none;
+}
+
+[data-component="project-avatar-v2"][data-unread] [data-slot="project-avatar-surface"] {
+  -webkit-mask-image: radial-gradient(circle 4.5px at calc(100% - 1px) 1px, transparent 4.5px, black 4.5px);
+  mask-image: radial-gradient(circle 4.5px at calc(100% - 1px) 1px, transparent 4.5px, black 4.5px);
+}
+
+[data-slot="project-avatar-unread-dot"] {
+  position: absolute;
+  z-index: 3;
+  width: 6px;
+  height: 6px;
+  right: -2px;
+  top: -2px;
+  border-radius: 9999px;
+  background: var(--v2-background-bg-accent);
+  pointer-events: none;
+}
+
+[data-slot="project-avatar-slot"] {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  overflow: visible;
+}

package/src/v2/components/project-avatar-v2.tsx

@@ -0,0 +1,64 @@
+import { type ComponentProps, splitProps, Show } from "solid-js"
+import "./project-avatar-v2.css"
+
+const segmenter =
+  typeof Intl !== "undefined" && "Segmenter" in Intl
+    ? new Intl.Segmenter(undefined, { granularity: "grapheme" })
+    : undefined
+
+function first(value: string) {
+  if (!value) return ""
+  if (!segmenter) return Array.from(value)[0] ?? ""
+  return segmenter.segment(value)[Symbol.iterator]().next().value?.segment ?? Array.from(value)[0] ?? ""
+}
+
+export const PROJECT_AVATAR_VARIANTS = [
+  "orange",
+  "yellow",
+  "cyan",
+  "green",
+  "red",
+  "pink",
+  "blue",
+  "purple",
+  "gray",
+] as const
+
+export type ProjectAvatarVariant = (typeof PROJECT_AVATAR_VARIANTS)[number]
+
+export interface ProjectAvatarProps extends ComponentProps<"div"> {
+  fallback: string
+  src?: string
+  variant?: ProjectAvatarVariant
+  unread?: boolean
+}
+
+export function ProjectAvatar(props: ProjectAvatarProps) {
+  const [split, rest] = splitProps(props, ["fallback", "src", "variant", "unread", "class", "classList", "style"])
+  const src = split.src
+  return (
+    <div
+      {...rest}
+      data-component="project-avatar-v2"
+      data-unread={split.unread ? "" : undefined}
+      classList={{
+        ...split.classList,
+        [split.class ?? ""]: !!split.class,
+      }}
+      style={typeof split.style === "object" ? split.style : undefined}
+    >
+      <div
+        data-slot="project-avatar-surface"
+        data-variant={split.variant ?? "gray"}
+        data-has-image={src ? "" : undefined}
+      >
+        <Show when={src} fallback={first(split.fallback)}>
+          {(value) => <img src={value()} draggable={false} data-slot="project-avatar-image" />}
+        </Show>
+      </div>
+      <Show when={split.unread}>
+        <span data-slot="project-avatar-unread-dot" aria-hidden="true" />
+      </Show>
+    </div>
+  )
+}

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

@@ -0,0 +1,202 @@
+[data-component="radio-v2"] {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  cursor: default;
+
+  [data-slot="radio-v2-label"] {
+    display: inline-flex;
+    align-items: center;
+    user-select: none;
+    color: var(--v2-text-text-faint);
+    font-size: 11px;
+    font-style: normal;
+    font-weight: 440;
+    line-height: 1;
+    letter-spacing: 0.05px;
+    font-variation-settings: "slnt" 0;
+  }
+
+  [data-slot="radio-v2-description"] {
+    color: var(--v2-text-text-faint);
+    font-size: 11px;
+    font-weight: 440;
+    line-height: 1.2;
+    letter-spacing: 0.05px;
+  }
+
+  [data-slot="radio-v2-items"] {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  [data-slot="radio-v2-error"] {
+    color: var(--v2-state-fg-danger);
+    font-size: 12px;
+    font-weight: var(--font-weight-regular);
+    line-height: var(--line-height-normal);
+    letter-spacing: var(--letter-spacing-normal);
+  }
+
+  [data-slot="radio-v2-error"]:empty {
+    display: none;
+  }
+}
+
+[data-slot="radio-v2-item"] {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  padding: 0px;
+  gap: 8px;
+
+  &:where([data-disabled]) {
+    cursor: not-allowed;
+  }
+
+  [data-slot="radio-v2-item-input"] {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+  }
+
+  [data-slot="radio-v2-item-control-stack"] {
+    position: relative;
+    width: 16px;
+    height: 20px;
+    flex: none;
+  }
+
+  [data-slot="radio-v2-item-control"] {
+    box-sizing: border-box;
+    position: absolute;
+    width: 16px;
+    height: 16px;
+    flex: none;
+    flex-shrink: 0;
+    left: 0;
+    top: calc(50% - 16px / 2);
+
+    border-radius: 9999px;
+    border: none;
+    box-shadow: inset 0 0 0 0.5px var(--v2-border-border-strong);
+
+    background:
+      linear-gradient(180deg, var(--v2-alpha-light-6) 0%, var(--v2-alpha-light-0) 100%), var(--v2-background-bg-base);
+    transition:
+      background 170ms ease-out,
+      opacity 170ms ease-out,
+      outline-color 170ms ease-out;
+  }
+
+  &:where(:not([data-readonly]))
+    [data-slot="radio-v2-item-input"]:focus-visible
+    ~ [data-slot="radio-v2-item-control-stack"]
+    [data-slot="radio-v2-item-control"] {
+    outline: 2px solid var(--v2-border-border-focus);
+    outline-offset: 1px;
+  }
+
+  &:where(:hover):where(:not([data-disabled], [data-readonly])):where(:not([data-checked]))
+    [data-slot="radio-v2-item-control"] {
+    background:
+      linear-gradient(0deg, var(--v2-overlay-simple-overlay-hover), var(--v2-overlay-simple-overlay-hover)),
+      linear-gradient(180deg, var(--v2-alpha-light-6) 0%, var(--v2-alpha-light-0) 100%), var(--v2-background-bg-base);
+  }
+
+  &:where([data-disabled]) [data-slot="radio-v2-item-control"] {
+    opacity: 0.5;
+  }
+
+  &:where([data-checked]) [data-slot="radio-v2-item-control"] {
+    background:
+      linear-gradient(180deg, var(--v2-alpha-light-20) 0%, var(--v2-alpha-light-0) 100%), var(--v2-background-bg-accent);
+  }
+
+  &:where([data-checked]):where(:hover):where(:not([data-disabled], [data-readonly]))
+    [data-slot="radio-v2-item-control"] {
+    background:
+      linear-gradient(
+        0deg,
+        var(--v2-overlay-simple-overlay-contrast-hover),
+        var(--v2-overlay-simple-overlay-contrast-hover)
+      ),
+      linear-gradient(180deg, var(--v2-alpha-light-20) 0%, var(--v2-alpha-light-0) 100%), var(--v2-background-bg-accent);
+  }
+
+  &:where([data-checked][data-disabled]) [data-slot="radio-v2-item-control"] {
+    opacity: 0.5;
+  }
+
+  &:where([data-invalid]):where(:not([data-checked])) [data-slot="radio-v2-item-control"] {
+    background: var(--v2-state-bg-danger);
+    box-shadow: inset 0 0 0 0.5px var(--v2-state-border-danger);
+  }
+
+  [data-slot="radio-v2-item-indicator"] {
+    box-sizing: border-box;
+    position: absolute;
+    width: 6px;
+    height: 6px;
+    left: calc(50% - 6px / 2);
+    top: calc(50% - 6px / 2);
+    border-radius: 9999px;
+
+    background: var(--v2-grey-300);
+    border: none;
+    box-shadow:
+      inset 0 0 0 0.5px var(--v2-overlay-gradient-depth-overlay-depth-top),
+      0px 0.5px 0.5px rgba(0, 0, 0, 0.4);
+  }
+
+  [data-slot="radio-v2-item-text"] {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    padding: 0px;
+    gap: 6px;
+  }
+
+  [data-slot="radio-v2-item-label"] {
+    display: inline-flex;
+    user-select: none;
+    color: inherit;
+    font-style: normal;
+    font-weight: 440;
+    font-variant-numeric: tabular-nums;
+    font-variation-settings: "slnt" 0;
+  }
+
+  [data-slot="radio-v2-item-label-text"] {
+    display: inline-flex;
+    align-items: center;
+    user-select: none;
+    color: var(--v2-text-text-base);
+    font-size: 13px;
+    line-height: 20px;
+    letter-spacing: -0.04px;
+  }
+
+  [data-slot="radio-v2-item-description"] {
+    color: var(--v2-text-text-muted);
+    font-size: 11px;
+    font-weight: 440;
+    line-height: 1;
+    letter-spacing: 0.05px;
+    font-variant-numeric: tabular-nums;
+    user-select: none;
+  }
+
+  &:where([data-disabled]) [data-slot="radio-v2-item-label"],
+  &:where([data-disabled]) [data-slot="radio-v2-item-description"] {
+    opacity: 0.5;
+  }
+}

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

@@ -0,0 +1,72 @@
+import { RadioGroup as Kobalte } from "@kobalte/core/radio-group"
+import { Show, splitProps, type JSX } from "solid-js"
+import type { ComponentProps, ParentProps } from "solid-js"
+import "./radio-v2.css"
+
+export interface RadioGroupV2Props extends ParentProps<ComponentProps<typeof Kobalte>> {
+  label?: JSX.Element
+  description?: JSX.Element
+  hideLabel?: boolean
+}
+
+export function RadioGroupV2(props: RadioGroupV2Props) {
+  const [local, others] = splitProps(props, ["class", "classList", "children", "label", "description", "hideLabel"])
+  return (
+    <Kobalte
+      {...others}
+      data-component="radio-v2"
+      classList={{
+        ...local.classList,
+        [local.class ?? ""]: !!local.class,
+      }}
+    >
+      <Show when={local.label}>
+        {(label) => (
+          <Kobalte.Label data-slot="radio-v2-label" classList={{ "sr-only": local.hideLabel }}>
+            {label()}
+          </Kobalte.Label>
+        )}
+      </Show>
+      <Show when={local.description}>
+        {(description) => <Kobalte.Description data-slot="radio-v2-description">{description()}</Kobalte.Description>}
+      </Show>
+      <div data-slot="radio-v2-items">{local.children}</div>
+      <Kobalte.ErrorMessage data-slot="radio-v2-error" />
+    </Kobalte>
+  )
+}
+
+export interface RadioItemV2Props extends ComponentProps<typeof Kobalte.Item> {
+  label: JSX.Element
+  description?: JSX.Element
+  hideLabel?: boolean
+}
+
+export function RadioItemV2(props: RadioItemV2Props) {
+  const [local, others] = splitProps(props, ["class", "classList", "label", "description", "hideLabel"])
+  return (
+    <Kobalte.Item
+      {...others}
+      data-slot="radio-v2-item"
+      classList={{
+        ...local.classList,
+        [local.class ?? ""]: !!local.class,
+      }}
+    >
+      <Kobalte.ItemInput data-slot="radio-v2-item-input" />
+      <div data-slot="radio-v2-item-control-stack">
+        <Kobalte.ItemControl data-slot="radio-v2-item-control">
+          <Kobalte.ItemIndicator data-slot="radio-v2-item-indicator" />
+        </Kobalte.ItemControl>
+      </div>
+      <Kobalte.ItemLabel data-slot="radio-v2-item-label" classList={{ "sr-only": local.hideLabel }}>
+        <div data-slot="radio-v2-item-text">
+          <span data-slot="radio-v2-item-label-text">{local.label}</span>
+          <Show when={local.description}>
+            {(description) => <span data-slot="radio-v2-item-description">{description()}</span>}
+          </Show>
+        </div>
+      </Kobalte.ItemLabel>
+    </Kobalte.Item>
+  )
+}