@opencode-ai/ui 0.0.0-dev-202608261632 → 0.0.0-dev-18317

package/src/{v2/components/menu-v2.tsx → navigation/menu/menu.tsx}

@@ -1,7 +1,17 @@
 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"
+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
@@ -29,6 +39,18 @@ const CheckMark: Component = () => (
   </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
@@ -46,15 +68,21 @@ function ItemBody(
   )
 }
 
-export interface MenuV2ItemProps extends ComponentProps<typeof DropdownMenu.Item> {
+export interface MenuItemProps extends ComponentProps<typeof DropdownMenu.Item> {
   shortcut?: JSX.Element | string
   badge?: JSX.Element | string
 }
 
-function MenuV2Item(props: ParentProps<MenuV2ItemProps>) {
+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" classList={{ ...s.classList, [s.class ?? ""]: !!s.class }}>
+    <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>
@@ -62,17 +90,19 @@ function MenuV2Item(props: ParentProps<MenuV2ItemProps>) {
   )
 }
 
-export interface MenuV2CheckboxItemProps extends ComponentProps<typeof DropdownMenu.CheckboxItem> {
+export interface MenuCheckboxItemProps extends ComponentProps<typeof DropdownMenu.CheckboxItem> {
   shortcut?: JSX.Element | string
   badge?: JSX.Element | string
 }
 
-function MenuV2CheckboxItem(props: ParentProps<MenuV2CheckboxItemProps>) {
+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
@@ -90,17 +120,19 @@ function MenuV2CheckboxItem(props: ParentProps<MenuV2CheckboxItemProps>) {
   )
 }
 
-export interface MenuV2RadioItemProps extends ComponentProps<typeof DropdownMenu.RadioItem> {
+export interface MenuRadioItemProps extends ComponentProps<typeof DropdownMenu.RadioItem> {
   shortcut?: JSX.Element | string
   badge?: JSX.Element | string
 }
 
-function MenuV2RadioItem(props: ParentProps<MenuV2RadioItemProps>) {
+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
@@ -118,17 +150,19 @@ function MenuV2RadioItem(props: ParentProps<MenuV2RadioItemProps>) {
   )
 }
 
-export interface MenuV2SubTriggerProps extends ComponentProps<typeof DropdownMenu.SubTrigger> {
+export interface MenuSubTriggerProps extends ComponentProps<typeof DropdownMenu.SubTrigger> {
   shortcut?: JSX.Element | string
   badge?: JSX.Element | string
 }
 
-function MenuV2SubTrigger(props: ParentProps<MenuV2SubTriggerProps>) {
+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 />}>
@@ -138,88 +172,118 @@ function MenuV2SubTrigger(props: ParentProps<MenuV2SubTriggerProps>) {
   )
 }
 
-function MenuV2SubContent(props: ComponentProps<typeof DropdownMenu.SubContent>) {
+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 MenuV2GroupLabel(props: ComponentProps<typeof DropdownMenu.GroupLabel>) {
+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 MenuV2Separator(props: ComponentProps<typeof DropdownMenu.Separator>) {
+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 MenuV2Content(props: ComponentProps<typeof DropdownMenu.Content>) {
+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 }}
     />
   )
 }
 
-function MenuV2Root(props: ComponentProps<typeof DropdownMenu>) {
-  return <DropdownMenu {...props} />
+export interface MenuProps extends ComponentProps<typeof DropdownMenu> {
+  appearance?: MenuAppearance
 }
 
-function MenuV2ContextRoot(props: ComponentProps<typeof ContextMenu>) {
-  return <ContextMenu {...props} />
+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 MenuV2ContextContent(props: ComponentProps<typeof ContextMenu.Content>) {
+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 MenuV2Context = Object.assign(MenuV2ContextRoot, {
+const MenuContext = Object.assign(MenuContextRoot, {
   Trigger: ContextMenu.Trigger,
   Portal: ContextMenu.Portal,
-  Content: MenuV2ContextContent,
+  Content: MenuContextContent,
 })
 
-export const MenuV2 = Object.assign(MenuV2Root, {
+export const Menu = Object.assign(MenuRoot, {
   Trigger: DropdownMenu.Trigger,
   Portal: DropdownMenu.Portal,
-  Content: MenuV2Content,
-  Item: MenuV2Item,
-  CheckboxItem: MenuV2CheckboxItem,
+  Content: MenuContent,
+  Item: MenuItem,
+  CheckboxItem: MenuCheckboxItem,
   RadioGroup: DropdownMenu.RadioGroup,
-  RadioItem: MenuV2RadioItem,
+  RadioItem: MenuRadioItem,
   Group: DropdownMenu.Group,
-  GroupLabel: MenuV2GroupLabel,
-  Separator: MenuV2Separator,
+  GroupLabel: MenuGroupLabel,
+  Separator: MenuSeparator,
   Sub: DropdownMenu.Sub,
-  SubTrigger: MenuV2SubTrigger,
-  SubContent: MenuV2SubContent,
-  Context: MenuV2Context,
+  SubTrigger: MenuSubTrigger,
+  SubContent: MenuSubContent,
+  Context: MenuContext,
 })

package/src/{v2/components/segmented-control-v2.css → navigation/segmented-control/segmented-control.css}

@@ -37,7 +37,7 @@
   font-style: normal;
   font-weight: 440;
   font-size: 13px;
-  line-height: 100%;
+  line-height: var(--line-height-compact);
   letter-spacing: -0.04px;
   font-variant-numeric: tabular-nums;
   font-variation-settings: "slnt" 0;

package/src/{v2/components/segmented-control-v2.tsx → navigation/segmented-control/segmented-control.tsx}

@@ -10,7 +10,7 @@ import {
   type ParentProps,
 } from "solid-js"
 import type { ComponentProps } from "solid-js"
-import "./segmented-control-v2.css"
+import "./segmented-control.css"
 
 type OnChange = (value: string | null) => void
 
@@ -26,11 +26,11 @@ const SegmentedControlContext = createContext<SegmentedControlContextValue>()
 
 function useSegmentedControlContext() {
   const ctx = useContext(SegmentedControlContext)
-  if (!ctx) throw new Error("SegmentedControlItemV2 must be used inside SegmentedControlV2")
+  if (!ctx) throw new Error("SegmentedControlItem must be used inside SegmentedControl")
   return ctx
 }
 
-export type SegmentedControlV2Props = Omit<ComponentProps<"div">, "onChange"> &
+export type SegmentedControlProps = Omit<ComponentProps<"div">, "onChange"> &
   ParentProps<{
     /** Selected value when controlled (including `null` when empty). Omit key for uncontrolled. */
     value?: string | null
@@ -42,7 +42,7 @@ export type SegmentedControlV2Props = Omit<ComponentProps<"div">, "onChange"> &
     disabled?: boolean
   }>
 
-export function SegmentedControlV2(props: SegmentedControlV2Props) {
+export function SegmentedControl(props: SegmentedControlProps) {
   const isControlled = createMemo(() => Object.hasOwn(props as object, "value"))
   const merged = mergeProps({ allowDeselect: false, disabled: false }, props)
   const [local, rest] = splitProps(merged, [
@@ -119,7 +119,7 @@ export function SegmentedControlV2(props: SegmentedControlV2Props) {
   )
 }
 
-export type SegmentedControlItemV2Props = Omit<ComponentProps<"button">, "type" | "children"> &
+export type SegmentedControlItemProps = Omit<ComponentProps<"button">, "type" | "children"> &
   ParentProps<{
     value: string
     children: JSX.Element
@@ -132,7 +132,7 @@ function invokeButtonHandler<E extends Event>(
   if (typeof handler === "function") (handler as (ev: typeof e) => void)(e)
 }
 
-export function SegmentedControlItemV2(props: SegmentedControlItemV2Props) {
+export function SegmentedControlItem(props: SegmentedControlItemProps) {
   const merged = mergeProps({ disabled: false }, props)
   const [local, rest] = splitProps(merged, [
     "class",
@@ -159,13 +159,14 @@ export function SegmentedControlItemV2(props: SegmentedControlItemV2Props) {
     invokeButtonHandler(local.onKeyDown, e)
     if (e.defaultPrevented || disabled()) return
     const t = e.currentTarget
+    const horizontal = t.closest(`[data-slot="segmented-control-v2"]`)?.matches(":dir(rtl)") ? -1 : 1
 
     if (e.key === "ArrowRight") {
       e.preventDefault()
-      ctx.focusNext(t, 1)
+      ctx.focusNext(t, horizontal)
     } else if (e.key === "ArrowLeft") {
       e.preventDefault()
-      ctx.focusNext(t, -1)
+      ctx.focusNext(t, -horizontal as 1 | -1)
     }
 
     // accessibility stuff

package/src/{v2/components/tabs-v2.css → navigation/tabs/tabs-current.css}

@@ -59,7 +59,7 @@
 
   font-size: 13px;
   font-weight: 440;
-  line-height: 100%;
+  line-height: var(--line-height-compact);
   letter-spacing: -0.04px;
 }
 
@@ -68,22 +68,29 @@
   box-shadow: none;
 }
 
-[data-component="tabs-v2"] [data-slot="tabs-v2-close-button"] {
-  width: 20px;
-  height: 20px;
+[data-slot="tabs-v2-trigger-close-button"] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   margin-inline-start: -5px;
   flex: none;
+}
+
+[data-slot="tabs-v2-trigger-close-button"] [data-slot="tabs-close-button"] {
+  width: 20px;
+  height: 20px;
+  padding: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--v2-text-text-faint);
 }
 
-[data-component="tabs-v2"] [data-slot="tabs-v2-close-button"]:hover {
+[data-slot="tabs-v2-trigger-close-button"] [data-slot="tabs-close-button"]:hover {
   color: var(--v2-text-text-muted);
 }
 
-[data-component="tabs-v2"] [data-component="icon-button"] {
+[data-component="tabs-v2"] [data-component="icon-button-v2"] {
   margin: 0;
 }
 
@@ -175,7 +182,7 @@
   border: 0.5px solid var(--v2-border-border-muted);
 }
 
-[data-component="tabs-v2"][data-variant="settings"][data-orientation="vertical"] [data-slot="tabs-v2-list"] {
+[data-component="tabs-v2"][data-variant="settings"][data-orientation="vertical"] > [data-slot="tabs-v2-list"] {
   flex-direction: column;
   width: 240px;
   min-width: 200px;
@@ -186,7 +193,9 @@
   border-inline-end: 1px solid var(--v2-border-border-base);
 }
 
-[data-component="tabs-v2"][data-variant="settings"][data-orientation="vertical"] [data-slot="tabs-v2-section-title"] {
+[data-component="tabs-v2"][data-variant="settings"][data-orientation="vertical"]
+  > [data-slot="tabs-v2-list"]
+  [data-slot="tabs-v2-section-title"] {
   width: 100%;
   padding-inline-start: 4px;
   color: var(--v2-text-text-muted);
@@ -195,7 +204,9 @@
   user-select: none;
 }
 
-[data-component="tabs-v2"][data-variant="settings"][data-orientation="vertical"] [data-slot="tabs-v2-trigger-wrapper"] {
+[data-component="tabs-v2"][data-variant="settings"][data-orientation="vertical"]
+  > [data-slot="tabs-v2-list"]
+  [data-slot="tabs-v2-trigger-wrapper"] {
   width: 100%;
   height: 28px;
   border-radius: 4px;
@@ -203,7 +214,9 @@
   color: var(--v2-text-text-muted);
 }
 
-[data-component="tabs-v2"][data-variant="settings"][data-orientation="vertical"] [data-slot="tabs-v2-trigger"] {
+[data-component="tabs-v2"][data-variant="settings"][data-orientation="vertical"]
+  > [data-slot="tabs-v2-list"]
+  [data-slot="tabs-v2-trigger"] {
   width: 100%;
   height: 100%;
   justify-content: flex-start;
@@ -212,12 +225,14 @@
 }
 
 [data-component="tabs-v2"][data-variant="settings"][data-orientation="vertical"]
+  > [data-slot="tabs-v2-list"]
   [data-slot="tabs-v2-trigger-wrapper"]:hover:not(:disabled):not(:has([data-selected])) {
   background-color: var(--v2-background-bg-layer-03);
   color: var(--v2-text-text-base);
 }
 
 [data-component="tabs-v2"][data-variant="settings"][data-orientation="vertical"]
+  > [data-slot="tabs-v2-list"]
   [data-slot="tabs-v2-trigger-wrapper"]:has([data-selected]) {
   background-color: var(--v2-background-bg-layer-03);
   color: var(--v2-text-text-base);