@neurocode-ai/ui 1.18.8

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

@@ -0,0 +1,190 @@
+/* Above modal dialogs (z-index 50); matches select-v2-content. */
+[data-popper-positioner]:has([data-component="menu-v2-content"]) {
+  z-index: 60;
+}
+
+[data-component="menu-v2-content"] {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  padding: 2px;
+  min-width: 160px;
+  z-index: 60;
+  pointer-events: auto;
+
+  background: var(--v2-background-bg-layer-01);
+  border-radius: 6px;
+  box-shadow: var(--v2-elevation-floating);
+
+  outline: none;
+
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: geometricPrecision;
+
+  transform-origin: var(--kb-menu-content-transform-origin);
+  animation: menu-v2-in 120ms ease-out;
+
+  &:focus-visible {
+    outline: none;
+  }
+}
+
+[data-component="menu-v2-item"] {
+  --menu-v2-fg: var(--v2-text-text-base);
+  --menu-v2-fg-muted: var(--v2-text-text-faint);
+  --menu-v2-fg-subtle: var(--v2-text-text-muted);
+  --menu-v2-icon: var(--v2-icon-icon-base);
+  --menu-v2-accent: var(--v2-text-text-accent);
+  --menu-v2-badge-bg: var(--v2-background-bg-layer-02);
+  --menu-v2-badge-border: var(--v2-border-border-base);
+  --menu-v2-hover: var(--v2-overlay-simple-overlay-hover);
+
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: geometricPrecision;
+
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
+  height: 28px;
+  padding: 0 12px;
+  background: transparent;
+  border-radius: 4px;
+  outline: none;
+  cursor: default;
+  user-select: none;
+
+  font-variation-settings: "slnt" 0;
+  font-variant-numeric: tabular-nums;
+  color: var(--menu-v2-fg);
+
+  [data-slot="menu-v2-item-content"] {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: row;
+    align-items: center;
+    gap: 8px;
+    min-width: 0;
+
+    font-size: 13px;
+    font-weight: 440;
+    line-height: 100%;
+    letter-spacing: -0.04px;
+    color: var(--menu-v2-fg);
+  }
+
+  [data-slot="menu-v2-item-shortcut"] {
+    display: inline-flex;
+    align-items: center;
+    flex: none;
+    height: 11px;
+
+    font-size: 11px;
+    font-weight: 530;
+    line-height: 100%;
+    letter-spacing: 0.05px;
+    color: var(--menu-v2-fg-muted);
+    white-space: nowrap;
+  }
+
+  [data-slot="menu-v2-item-badge"] {
+    box-sizing: border-box;
+    display: inline-flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    flex: none;
+    gap: 4px;
+    height: 16px;
+    padding: 0 4px;
+
+    background: var(--menu-v2-badge-bg);
+    border: 0.5px solid var(--menu-v2-badge-border);
+    border-radius: 2px;
+
+    font-size: 11px;
+    font-weight: 530;
+    line-height: 100%;
+    letter-spacing: 0.05px;
+    color: var(--menu-v2-fg-subtle);
+    white-space: nowrap;
+  }
+
+  [data-slot="menu-v2-item-indicator"] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex: none;
+    width: 16px;
+    height: 16px;
+    color: var(--menu-v2-icon);
+  }
+
+  [data-slot="menu-v2-item-indicator"]:not([data-checked]) > svg {
+    visibility: hidden;
+  }
+
+  [data-slot="menu-v2-item-chevron"] {
+    flex: none;
+    width: 16px;
+    height: 16px;
+    color: var(--menu-v2-fg-muted);
+  }
+
+  &[data-highlighted] {
+    background: var(--menu-v2-hover);
+  }
+
+  &[data-checked] [data-slot="menu-v2-item-content"] {
+    font-weight: 530;
+    color: var(--menu-v2-accent);
+  }
+
+  &[data-checked] [data-slot="menu-v2-item-indicator"] {
+    color: var(--menu-v2-accent);
+  }
+
+  &[data-disabled] {
+    pointer-events: none;
+    opacity: 0.5;
+  }
+}
+
+[data-slot="menu-v2-separator"] {
+  height: 1px;
+  width: calc(100% + 4px);
+  margin: 2px -2px;
+  background: var(--v2-border-border-muted);
+  border: none;
+}
+
+[data-slot="menu-v2-group-label"] {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  height: 28px;
+  padding: 0 12px;
+
+  font-size: 11px;
+  font-weight: 530;
+  line-height: 100%;
+  letter-spacing: 0.05px;
+  color: var(--v2-text-text-faint);
+  user-select: none;
+  font-variant-numeric: tabular-nums;
+}
+
+@keyframes menu-v2-in {
+  from {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}

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/progress-circle-v2.css

@@ -0,0 +1,13 @@
+[data-component="progress-circle-v2"] {
+  display: block;
+  transform: rotate(-90deg);
+}
+
+[data-component="progress-circle-v2"] [data-slot="progress-circle-v2-background"] {
+  stroke: var(--v2-background-bg-layer-04);
+}
+
+[data-component="progress-circle-v2"] [data-slot="progress-circle-v2-progress"] {
+  stroke: var(--v2-icon-icon-base);
+  transition: stroke-dashoffset 0.35s cubic-bezier(0.65, 0, 0.35, 1);
+}

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

@@ -0,0 +1,52 @@
+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/project-avatar-v2.css

@@ -0,0 +1,132 @@
+[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-variant="outline"] {
+  --project-avatar-bg: var(--v2-background-bg-base);
+  --project-avatar-border: var(--v2-border-border-strong);
+  color: var(--v2-text-text-muted);
+  text-shadow: none;
+}
+
+[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;
+  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,66 @@
+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]
+
+// "outline" is a neutral, muted style (e.g. recently closed projects) and is not part of the color rotation.
+export type ProjectAvatarStyle = ProjectAvatarVariant | "outline"
+
+export interface ProjectAvatarProps extends ComponentProps<"div"> {
+  fallback: string
+  src?: string
+  variant?: ProjectAvatarStyle
+  unread?: boolean
+}
+
+export function ProjectAvatar(props: ProjectAvatarProps) {
+  const [split, rest] = splitProps(props, ["fallback", "src", "variant", "unread", "class", "classList", "style"])
+  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={split.src ? "" : undefined}
+      >
+        <Show when={split.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>
+  )
+}