@opencode-ai/ui 0.0.0-dev-18909 → 0.0.0-dev-202609021553

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

@@ -1,17 +1,7 @@
 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"
+import { Show, splitProps, type Component, type ComponentProps, type JSX, type ParentProps } from "solid-js"
+import "./menu-v2.css"
 
 const ChevronRight: Component = () => (
   <svg
@@ -39,18 +29,6 @@ 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
@@ -68,21 +46,15 @@ function ItemBody(
   )
 }
 
-export interface MenuItemProps extends ComponentProps<typeof DropdownMenu.Item> {
+export interface MenuV2ItemProps extends ComponentProps<typeof DropdownMenu.Item> {
   shortcut?: JSX.Element | string
   badge?: JSX.Element | string
 }
 
-function MenuItem(props: ParentProps<MenuItemProps>) {
-  const ctx = useMenuContext()
+function MenuV2Item(props: ParentProps<MenuV2ItemProps>) {
   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 }}
-    >
+    <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>
@@ -90,19 +62,17 @@ function MenuItem(props: ParentProps<MenuItemProps>) {
   )
 }
 
-export interface MenuCheckboxItemProps extends ComponentProps<typeof DropdownMenu.CheckboxItem> {
+export interface MenuV2CheckboxItemProps extends ComponentProps<typeof DropdownMenu.CheckboxItem> {
   shortcut?: JSX.Element | string
   badge?: JSX.Element | string
 }
 
-function MenuCheckboxItem(props: ParentProps<MenuCheckboxItemProps>) {
-  const ctx = useMenuContext()
+function MenuV2CheckboxItem(props: ParentProps<MenuV2CheckboxItemProps>) {
   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
@@ -120,19 +90,17 @@ function MenuCheckboxItem(props: ParentProps<MenuCheckboxItemProps>) {
   )
 }
 
-export interface MenuRadioItemProps extends ComponentProps<typeof DropdownMenu.RadioItem> {
+export interface MenuV2RadioItemProps extends ComponentProps<typeof DropdownMenu.RadioItem> {
   shortcut?: JSX.Element | string
   badge?: JSX.Element | string
 }
 
-function MenuRadioItem(props: ParentProps<MenuRadioItemProps>) {
-  const ctx = useMenuContext()
+function MenuV2RadioItem(props: ParentProps<MenuV2RadioItemProps>) {
   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
@@ -150,19 +118,17 @@ function MenuRadioItem(props: ParentProps<MenuRadioItemProps>) {
   )
 }
 
-export interface MenuSubTriggerProps extends ComponentProps<typeof DropdownMenu.SubTrigger> {
+export interface MenuV2SubTriggerProps extends ComponentProps<typeof DropdownMenu.SubTrigger> {
   shortcut?: JSX.Element | string
   badge?: JSX.Element | string
 }
 
-function MenuSubTrigger(props: ParentProps<MenuSubTriggerProps>) {
-  const ctx = useMenuContext()
+function MenuV2SubTrigger(props: ParentProps<MenuV2SubTriggerProps>) {
   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 />}>
@@ -172,118 +138,88 @@ function MenuSubTrigger(props: ParentProps<MenuSubTriggerProps>) {
   )
 }
 
-function MenuSubContent(props: ComponentProps<typeof DropdownMenu.SubContent>) {
-  const ctx = useMenuContext()
+function MenuV2SubContent(props: ComponentProps<typeof DropdownMenu.SubContent>) {
   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()
+function MenuV2GroupLabel(props: ComponentProps<typeof DropdownMenu.GroupLabel>) {
   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()
+function MenuV2Separator(props: ComponentProps<typeof DropdownMenu.Separator>) {
   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()
+function MenuV2Content(props: ComponentProps<typeof DropdownMenu.Content>) {
   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 MenuV2Root(props: ComponentProps<typeof DropdownMenu>) {
+  return <DropdownMenu {...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 MenuV2ContextRoot(props: ComponentProps<typeof ContextMenu>) {
+  return <ContextMenu {...props} />
 }
 
-function MenuContextContent(props: ComponentProps<typeof ContextMenu.Content>) {
-  const ctx = useMenuContext()
+function MenuV2ContextContent(props: ComponentProps<typeof ContextMenu.Content>) {
   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, {
+const MenuV2Context = Object.assign(MenuV2ContextRoot, {
   Trigger: ContextMenu.Trigger,
   Portal: ContextMenu.Portal,
-  Content: MenuContextContent,
+  Content: MenuV2ContextContent,
 })
 
-export const Menu = Object.assign(MenuRoot, {
+export const MenuV2 = Object.assign(MenuV2Root, {
   Trigger: DropdownMenu.Trigger,
   Portal: DropdownMenu.Portal,
-  Content: MenuContent,
-  Item: MenuItem,
-  CheckboxItem: MenuCheckboxItem,
+  Content: MenuV2Content,
+  Item: MenuV2Item,
+  CheckboxItem: MenuV2CheckboxItem,
   RadioGroup: DropdownMenu.RadioGroup,
-  RadioItem: MenuRadioItem,
+  RadioItem: MenuV2RadioItem,
   Group: DropdownMenu.Group,
-  GroupLabel: MenuGroupLabel,
-  Separator: MenuSeparator,
+  GroupLabel: MenuV2GroupLabel,
+  Separator: MenuV2Separator,
   Sub: DropdownMenu.Sub,
-  SubTrigger: MenuSubTrigger,
-  SubContent: MenuSubContent,
-  Context: MenuContext,
+  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/{data-display/project-avatar/project-avatar.tsx → v2/components/project-avatar-v2.tsx}

@@ -1,5 +1,5 @@
 import { type ComponentProps, splitProps, Show } from "solid-js"
-import "./project-avatar.css"
+import "./project-avatar-v2.css"
 
 const segmenter =
   typeof Intl !== "undefined" && "Segmenter" in Intl

package/src/{forms/radio/radio.tsx → v2/components/radio-v2.tsx}

@@ -1,28 +1,18 @@
-import {
-  Description,
-  ErrorMessage,
-  Item,
-  ItemControl,
-  ItemIndicator,
-  ItemInput,
-  ItemLabel,
-  Label,
-  Root,
-} from "@kobalte/core/radio-group"
+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.css"
+import "./radio-v2.css"
 
-export interface RadioGroupProps extends ParentProps<ComponentProps<typeof Root>> {
+export interface RadioGroupV2Props extends ParentProps<ComponentProps<typeof Kobalte>> {
   label?: JSX.Element
   description?: JSX.Element
   hideLabel?: boolean
 }
 
-export function RadioGroup(props: RadioGroupProps) {
+export function RadioGroupV2(props: RadioGroupV2Props) {
   const [local, others] = splitProps(props, ["class", "classList", "children", "label", "description", "hideLabel"])
   return (
-    <Root
+    <Kobalte
       {...others}
       data-component="radio-v2"
       classList={{
@@ -32,30 +22,30 @@ export function RadioGroup(props: RadioGroupProps) {
     >
       <Show when={local.label}>
         {(label) => (
-          <Label data-slot="radio-v2-label" classList={{ "sr-only": local.hideLabel }}>
+          <Kobalte.Label data-slot="radio-v2-label" classList={{ "sr-only": local.hideLabel }}>
             {label()}
-          </Label>
+          </Kobalte.Label>
         )}
       </Show>
       <Show when={local.description}>
-        {(description) => <Description data-slot="radio-v2-description">{description()}</Description>}
+        {(description) => <Kobalte.Description data-slot="radio-v2-description">{description()}</Kobalte.Description>}
       </Show>
       <div data-slot="radio-v2-items">{local.children}</div>
-      <ErrorMessage data-slot="radio-v2-error" />
-    </Root>
+      <Kobalte.ErrorMessage data-slot="radio-v2-error" />
+    </Kobalte>
   )
 }
 
-export interface RadioItemProps extends ComponentProps<typeof Item> {
+export interface RadioItemV2Props extends ComponentProps<typeof Kobalte.Item> {
   label: JSX.Element
   description?: JSX.Element
   hideLabel?: boolean
 }
 
-export function RadioItem(props: RadioItemProps) {
+export function RadioItemV2(props: RadioItemV2Props) {
   const [local, others] = splitProps(props, ["class", "classList", "label", "description", "hideLabel"])
   return (
-    <Item
+    <Kobalte.Item
       {...others}
       data-slot="radio-v2-item"
       classList={{
@@ -63,20 +53,20 @@ export function RadioItem(props: RadioItemProps) {
         [local.class ?? ""]: !!local.class,
       }}
     >
-      <ItemInput data-slot="radio-v2-item-input" />
+      <Kobalte.ItemInput data-slot="radio-v2-item-input" />
       <div data-slot="radio-v2-item-control-stack">
-        <ItemControl data-slot="radio-v2-item-control">
-          <ItemIndicator data-slot="radio-v2-item-indicator" />
-        </ItemControl>
+        <Kobalte.ItemControl data-slot="radio-v2-item-control">
+          <Kobalte.ItemIndicator data-slot="radio-v2-item-indicator" />
+        </Kobalte.ItemControl>
       </div>
-      <ItemLabel data-slot="radio-v2-item-label" classList={{ "sr-only": local.hideLabel }}>
+      <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>
-      </ItemLabel>
-    </Item>
+      </Kobalte.ItemLabel>
+    </Kobalte.Item>
   )
 }

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

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

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

@@ -10,7 +10,7 @@ import {
   type ParentProps,
 } from "solid-js"
 import type { ComponentProps } from "solid-js"
-import "./segmented-control.css"
+import "./segmented-control-v2.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("SegmentedControlItem must be used inside SegmentedControl")
+  if (!ctx) throw new Error("SegmentedControlItemV2 must be used inside SegmentedControlV2")
   return ctx
 }
 
-export type SegmentedControlProps = Omit<ComponentProps<"div">, "onChange"> &
+export type SegmentedControlV2Props = 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 SegmentedControlProps = Omit<ComponentProps<"div">, "onChange"> &
     disabled?: boolean
   }>
 
-export function SegmentedControl(props: SegmentedControlProps) {
+export function SegmentedControlV2(props: SegmentedControlV2Props) {
   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 SegmentedControl(props: SegmentedControlProps) {
   )
 }
 
-export type SegmentedControlItemProps = Omit<ComponentProps<"button">, "type" | "children"> &
+export type SegmentedControlItemV2Props = 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 SegmentedControlItem(props: SegmentedControlItemProps) {
+export function SegmentedControlItemV2(props: SegmentedControlItemV2Props) {
   const merged = mergeProps({ disabled: false }, props)
   const [local, rest] = splitProps(merged, [
     "class",
@@ -159,14 +159,13 @@ export function SegmentedControlItem(props: SegmentedControlItemProps) {
     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, horizontal)
+      ctx.focusNext(t, 1)
     } else if (e.key === "ArrowLeft") {
       e.preventDefault()
-      ctx.focusNext(t, -horizontal as 1 | -1)
+      ctx.focusNext(t, -1)
     }
 
     // accessibility stuff

package/src/{forms/select/select.css → v2/components/select-v2.css}

@@ -1,4 +1,4 @@
-@import "../../navigation/menu/menu.css";
+@import "./menu-v2.css";
 
 /* Above modal dialogs (z-index 50); matches legacy select-content. */
 [data-popper-positioner]:has([data-slot="select-v2-content"]) {
@@ -46,7 +46,7 @@
   }
 }
 
-/* Shared trigger structure for the inline control. */
+/* Trigger shell — aligned with text-input-v2 */
 [data-component="select-v2"] {
   box-sizing: border-box;
   display: flex;
@@ -73,6 +73,12 @@
     box-shadow 85ms ease-out;
 }
 
+[data-component="select-v2"][data-appearance="large"] {
+  height: 32px;
+  padding-block: 0;
+  padding-inline: 0 8px;
+}
+
 [data-component="select-v2"]:where(:hover):not([data-disabled], [data-invalid]):not(:focus-within):not(
     [data-expanded]
   ) {