@opencode/ui 0.0.0-reserved → 2.0.0

package/src/navigation/menu/menu.css

@@ -0,0 +1,311 @@
+/* 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;
+  }
+}
+
+:dir(rtl) [data-slot="menu-v2-item-chevron"] {
+  transform: scaleX(-1);
+}
+
+[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-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-shrink: 0;
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
+  height: 28px;
+  padding: 0 12px;
+  padding-inline-end: 6px;
+  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: var(--line-height-compact);
+    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: 440;
+    color: var(--menu-v2-fg);
+  }
+
+  &[data-checked] [data-slot="menu-v2-item-indicator"] {
+    color: var(--menu-v2-icon);
+  }
+
+  &[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;
+  letter-spacing: 0.05px;
+  color: var(--v2-text-text-faint);
+  user-select: none;
+  font-variant-numeric: tabular-nums;
+}
+
+[data-component="menu-v2-content"][data-appearance="standard"] {
+  min-width: 8rem;
+  padding: 4px;
+  overflow: hidden;
+  border: 1px solid color-mix(in oklch, var(--border-base) 50%, transparent);
+  border-radius: var(--radius-md);
+  background: var(--surface-raised-stronger-non-alpha);
+  background-clip: padding-box;
+  box-shadow: var(--shadow-md);
+  z-index: 60;
+  animation: dropdown-menu-open 150ms ease-out;
+
+  &[data-closed] {
+    animation: dropdown-menu-close 150ms ease-out;
+  }
+
+  [data-component="menu-v2-item"] {
+    position: relative;
+    height: auto;
+    min-height: 0;
+    padding: 4px 8px;
+    border-radius: var(--radius-sm);
+    color: var(--text-strong);
+    font-family: var(--font-family-sans);
+    font-size: var(--font-size-small);
+    font-weight: var(--font-weight-medium);
+    line-height: var(--line-height-large);
+    letter-spacing: var(--letter-spacing-normal);
+    font-variant-numeric: normal;
+    -webkit-font-smoothing: auto;
+    text-rendering: auto;
+
+    [data-slot="menu-v2-item-content"] {
+      font-family: inherit;
+      font-size: inherit;
+      font-weight: inherit;
+      line-height: inherit;
+      letter-spacing: inherit;
+      color: inherit;
+    }
+
+    &[data-highlighted] {
+      background: var(--surface-raised-base-hover);
+    }
+
+    &[data-disabled] {
+      color: var(--text-weak);
+      opacity: 1;
+    }
+
+    &[data-checked] {
+      padding-inline-end: 28px;
+    }
+
+    &[data-checked] [data-slot="menu-v2-item-content"] {
+      font-weight: inherit;
+      color: inherit;
+    }
+
+    [data-slot="menu-v2-item-indicator"] {
+      position: absolute;
+      inset-inline-end: 8px;
+      top: 50%;
+      width: 16px;
+      height: 16px;
+      transform: translateY(-50%);
+      color: var(--icon-base);
+    }
+
+    [data-slot="menu-v2-item-chevron"] {
+      margin-inline-start: auto;
+      color: var(--icon-base);
+    }
+  }
+
+  [data-slot="menu-v2-separator"] {
+    width: calc(100% + 8px);
+    height: 1px;
+    margin: 4px -4px;
+    background: var(--border-weak-base);
+  }
+
+  [data-slot="menu-v2-group-label"] {
+    height: auto;
+    padding: 4px 8px;
+    color: var(--text-weak);
+    font-family: var(--font-family-sans);
+    font-size: var(--font-size-x-small);
+    font-weight: var(--font-weight-medium);
+    line-height: var(--line-height-large);
+    letter-spacing: var(--letter-spacing-normal);
+    font-variant-numeric: normal;
+  }
+}
+
+@keyframes dropdown-menu-open {
+  from {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes dropdown-menu-close {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+}
+
+@keyframes menu-v2-in {
+  from {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}

package/src/navigation/menu/menu.tsx

@@ -0,0 +1,289 @@
+import { DropdownMenu } from "@kobalte/core/dropdown-menu"
+import { ContextMenu } from "@kobalte/core/context-menu"
+import {
+  createContext,
+  Show,
+  splitProps,
+  useContext,
+  type Accessor,
+  type Component,
+  type ComponentProps,
+  type JSX,
+  type ParentProps,
+} from "solid-js"
+import "./menu.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>
+)
+
+export type MenuAppearance = "standard" | "compact"
+
+const MenuAppearanceContext = createContext<{ appearance: Accessor<MenuAppearance> }>({
+  appearance: (): MenuAppearance => "compact",
+})
+
+function useMenuContext() {
+  const ctx = useContext(MenuAppearanceContext)
+  if (!ctx) throw new Error("Menu components must be used inside Menu or Menu.Context")
+  return ctx
+}
+
+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 MenuItemProps extends ComponentProps<typeof DropdownMenu.Item> {
+  shortcut?: JSX.Element | string
+  badge?: JSX.Element | string
+}
+
+function MenuItem(props: ParentProps<MenuItemProps>) {
+  const ctx = useMenuContext()
+  const [s, r] = splitProps(props, ["class", "classList", "children", "shortcut", "badge"])
+  return (
+    <DropdownMenu.Item
+      {...r}
+      data-component="menu-v2-item"
+      data-appearance={ctx.appearance()}
+      classList={{ ...s.classList, [s.class ?? ""]: !!s.class }}
+    >
+      <ItemBody shortcut={s.shortcut} badge={s.badge}>
+        {s.children}
+      </ItemBody>
+    </DropdownMenu.Item>
+  )
+}
+
+export interface MenuCheckboxItemProps extends ComponentProps<typeof DropdownMenu.CheckboxItem> {
+  shortcut?: JSX.Element | string
+  badge?: JSX.Element | string
+}
+
+function MenuCheckboxItem(props: ParentProps<MenuCheckboxItemProps>) {
+  const ctx = useMenuContext()
+  const [s, r] = splitProps(props, ["class", "classList", "children", "shortcut", "badge"])
+  return (
+    <DropdownMenu.CheckboxItem
+      {...r}
+      data-component="menu-v2-item"
+      data-appearance={ctx.appearance()}
+      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 MenuRadioItemProps extends ComponentProps<typeof DropdownMenu.RadioItem> {
+  shortcut?: JSX.Element | string
+  badge?: JSX.Element | string
+}
+
+function MenuRadioItem(props: ParentProps<MenuRadioItemProps>) {
+  const ctx = useMenuContext()
+  const [s, r] = splitProps(props, ["class", "classList", "children", "shortcut", "badge"])
+  return (
+    <DropdownMenu.RadioItem
+      {...r}
+      data-component="menu-v2-item"
+      data-appearance={ctx.appearance()}
+      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 MenuSubTriggerProps extends ComponentProps<typeof DropdownMenu.SubTrigger> {
+  shortcut?: JSX.Element | string
+  badge?: JSX.Element | string
+}
+
+function MenuSubTrigger(props: ParentProps<MenuSubTriggerProps>) {
+  const ctx = useMenuContext()
+  const [s, r] = splitProps(props, ["class", "classList", "children", "shortcut", "badge"])
+  return (
+    <DropdownMenu.SubTrigger
+      {...r}
+      data-component="menu-v2-item"
+      data-appearance={ctx.appearance()}
+      classList={{ ...s.classList, [s.class ?? ""]: !!s.class }}
+    >
+      <ItemBody shortcut={s.shortcut} badge={s.badge} trailing={<ChevronRight />}>
+        {s.children}
+      </ItemBody>
+    </DropdownMenu.SubTrigger>
+  )
+}
+
+function MenuSubContent(props: ComponentProps<typeof DropdownMenu.SubContent>) {
+  const ctx = useMenuContext()
+  const [s, r] = splitProps(props, ["class", "classList"])
+  return (
+    <DropdownMenu.SubContent
+      {...r}
+      data-component="menu-v2-content"
+      data-appearance={ctx.appearance()}
+      classList={{ ...s.classList, [s.class ?? ""]: !!s.class }}
+    />
+  )
+}
+
+function MenuGroupLabel(props: ComponentProps<typeof DropdownMenu.GroupLabel>) {
+  const ctx = useMenuContext()
+  const [s, r] = splitProps(props, ["class", "classList"])
+  return (
+    <DropdownMenu.GroupLabel
+      {...r}
+      data-slot="menu-v2-group-label"
+      data-appearance={ctx.appearance()}
+      classList={{ ...s.classList, [s.class ?? ""]: !!s.class }}
+    />
+  )
+}
+
+function MenuSeparator(props: ComponentProps<typeof DropdownMenu.Separator>) {
+  const ctx = useMenuContext()
+  const [s, r] = splitProps(props, ["class", "classList"])
+  return (
+    <DropdownMenu.Separator
+      {...r}
+      data-slot="menu-v2-separator"
+      data-appearance={ctx.appearance()}
+      classList={{ ...s.classList, [s.class ?? ""]: !!s.class }}
+    />
+  )
+}
+
+function MenuContent(props: ComponentProps<typeof DropdownMenu.Content>) {
+  const ctx = useMenuContext()
+  const [s, r] = splitProps(props, ["class", "classList"])
+  return (
+    <DropdownMenu.Content
+      {...r}
+      data-component="menu-v2-content"
+      data-appearance={ctx.appearance()}
+      classList={{ ...s.classList, [s.class ?? ""]: !!s.class }}
+    />
+  )
+}
+
+export interface MenuProps extends ComponentProps<typeof DropdownMenu> {
+  appearance?: MenuAppearance
+}
+
+function MenuRoot(props: MenuProps) {
+  const [local, rest] = splitProps(props, ["appearance", "children"])
+  const appearance = () => local.appearance ?? "compact"
+  return (
+    <MenuAppearanceContext.Provider value={{ appearance }}>
+      <DropdownMenu {...rest}>{local.children}</DropdownMenu>
+    </MenuAppearanceContext.Provider>
+  )
+}
+
+export interface MenuContextProps extends ComponentProps<typeof ContextMenu> {
+  appearance?: MenuAppearance
+}
+
+function MenuContextRoot(props: MenuContextProps) {
+  const [local, rest] = splitProps(props, ["appearance", "children"])
+  const appearance = () => local.appearance ?? "compact"
+  return (
+    <MenuAppearanceContext.Provider value={{ appearance }}>
+      <ContextMenu {...rest}>{local.children}</ContextMenu>
+    </MenuAppearanceContext.Provider>
+  )
+}
+
+function MenuContextContent(props: ComponentProps<typeof ContextMenu.Content>) {
+  const ctx = useMenuContext()
+  const [s, r] = splitProps(props, ["class", "classList"])
+  return (
+    <ContextMenu.Content
+      {...r}
+      data-component="menu-v2-content"
+      data-appearance={ctx.appearance()}
+      classList={{ ...s.classList, [s.class ?? ""]: !!s.class }}
+    />
+  )
+}
+
+const MenuContext = Object.assign(MenuContextRoot, {
+  Trigger: ContextMenu.Trigger,
+  Portal: ContextMenu.Portal,
+  Content: MenuContextContent,
+})
+
+export const Menu = Object.assign(MenuRoot, {
+  Trigger: DropdownMenu.Trigger,
+  Portal: DropdownMenu.Portal,
+  Content: MenuContent,
+  Item: MenuItem,
+  CheckboxItem: MenuCheckboxItem,
+  RadioGroup: DropdownMenu.RadioGroup,
+  RadioItem: MenuRadioItem,
+  Group: DropdownMenu.Group,
+  GroupLabel: MenuGroupLabel,
+  Separator: MenuSeparator,
+  Sub: DropdownMenu.Sub,
+  SubTrigger: MenuSubTrigger,
+  SubContent: MenuSubContent,
+  Context: MenuContext,
+})

package/src/navigation/segmented-control/segmented-control.css

@@ -0,0 +1,80 @@
+[data-slot="segmented-control-v2"].segmented-control-v2--full-width {
+  width: 100%;
+}
+
+[data-slot="segmented-control-v2"] {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 0;
+  width: 232px;
+  max-width: 100%;
+  height: 28px;
+  background: var(--v2-background-bg-layer-01);
+  border: none;
+  border-radius: 6px;
+  box-shadow: 0 0 0 0.5px var(--v2-border-border-base);
+  flex: none;
+}
+
+[data-slot="segmented-control-v2-item"] {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 0 12px;
+  flex: 1 1 0;
+  min-width: 0;
+  height: 28px;
+  margin: 0;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  box-shadow: none;
+  cursor: pointer;
+  font-style: normal;
+  font-weight: 440;
+  font-size: 13px;
+  line-height: var(--line-height-compact);
+  letter-spacing: -0.04px;
+  font-variant-numeric: tabular-nums;
+  font-variation-settings: "slnt" 0;
+  color: var(--v2-text-text-muted);
+  transition:
+    background-color 0.12s ease,
+    color 0.12s ease,
+    box-shadow 0.12s ease;
+}
+
+[data-slot="segmented-control-v2-item"]:where(:disabled) {
+  cursor: not-allowed;
+  opacity: 0.45;
+}
+
+[data-slot="segmented-control-v2-item"]:where(:focus-visible) {
+  outline: 2px solid var(--v2-border-border-focus);
+  outline-offset: 1px;
+  z-index: 2;
+}
+
+[data-slot="segmented-control-v2-item"]:where([data-pressed]) {
+  background: var(--v2-background-bg-base);
+  color: var(--v2-text-text-base);
+  box-shadow: 0 0 0 0.5px var(--v2-border-border-strong);
+  z-index: 1;
+}
+
+[data-slot="segmented-control-v2-item-label"] {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  padding: 0;
+  min-width: 0;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}