@opencode-ai/ui 0.0.0-dev-202608201855 → 0.0.0-dev-17751

package/src/components/dropdown-menu.css

@@ -1,135 +0,0 @@
-[data-component="dropdown-menu-content"],
-[data-component="dropdown-menu-sub-content"] {
-  min-width: 8rem;
-  overflow: hidden;
-  border-radius: var(--radius-md);
-  border: 1px solid color-mix(in oklch, var(--border-base) 50%, transparent);
-  background-clip: padding-box;
-  background-color: var(--surface-raised-stronger-non-alpha);
-  padding: 4px;
-  box-shadow: var(--shadow-md);
-  z-index: 50;
-  transform-origin: var(--kb-menu-content-transform-origin);
-
-  &:focus,
-  &:focus-visible {
-    outline: none;
-  }
-
-  &[data-closed] {
-    animation: dropdown-menu-close 0.15s ease-out;
-  }
-
-  &[data-expanded] {
-    animation: dropdown-menu-open 0.15s ease-out;
-  }
-}
-
-[data-component="dropdown-menu-content"],
-[data-component="dropdown-menu-sub-content"] {
-  [data-slot="dropdown-menu-item"],
-  [data-slot="dropdown-menu-checkbox-item"],
-  [data-slot="dropdown-menu-radio-item"],
-  [data-slot="dropdown-menu-sub-trigger"] {
-    position: relative;
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    padding: 4px 8px;
-    border-radius: var(--radius-sm);
-    cursor: default;
-    user-select: none;
-    outline: none;
-
-    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);
-    color: var(--text-strong);
-
-    &[data-highlighted] {
-      background: var(--surface-raised-base-hover);
-    }
-
-    &[data-disabled] {
-      color: var(--text-weak);
-      pointer-events: none;
-    }
-  }
-
-  [data-slot="dropdown-menu-checkbox-item"],
-  [data-slot="dropdown-menu-radio-item"] {
-    padding-inline-end: 28px;
-  }
-
-  [data-slot="dropdown-menu-sub-trigger"] {
-    &[data-expanded] {
-      background: var(--surface-raised-base-hover);
-    }
-  }
-
-  [data-slot="dropdown-menu-item-indicator"] {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 16px;
-    height: 16px;
-    position: absolute;
-    inset-inline-end: 8px;
-    top: 50%;
-    transform: translateY(-50%);
-  }
-
-  [data-slot="dropdown-menu-item-label"] {
-    flex: 1;
-  }
-
-  [data-slot="dropdown-menu-item-description"] {
-    font-size: var(--font-size-x-small);
-    color: var(--text-weak);
-  }
-
-  [data-slot="dropdown-menu-separator"] {
-    height: 1px;
-    margin: 4px -4px;
-    border-top-color: var(--border-weak-base);
-  }
-
-  [data-slot="dropdown-menu-group-label"] {
-    display: block;
-    padding: 4px 8px;
-    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);
-    color: var(--text-weak);
-  }
-
-  [data-slot="dropdown-menu-arrow"] {
-    fill: var(--surface-raised-stronger-non-alpha);
-  }
-}
-
-@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);
-  }
-}

package/src/components/dropdown-menu.tsx

@@ -1,308 +0,0 @@
-import { DropdownMenu as Kobalte } from "@kobalte/core/dropdown-menu"
-import { splitProps } from "solid-js"
-import type { ComponentProps, ParentProps } from "solid-js"
-
-export interface DropdownMenuProps extends ComponentProps<typeof Kobalte> {}
-export interface DropdownMenuTriggerProps extends ComponentProps<typeof Kobalte.Trigger> {}
-export interface DropdownMenuIconProps extends ComponentProps<typeof Kobalte.Icon> {}
-export interface DropdownMenuPortalProps extends ComponentProps<typeof Kobalte.Portal> {}
-export interface DropdownMenuContentProps extends ComponentProps<typeof Kobalte.Content> {}
-export interface DropdownMenuArrowProps extends ComponentProps<typeof Kobalte.Arrow> {}
-export interface DropdownMenuSeparatorProps extends ComponentProps<typeof Kobalte.Separator> {}
-export interface DropdownMenuGroupProps extends ComponentProps<typeof Kobalte.Group> {}
-export interface DropdownMenuGroupLabelProps extends ComponentProps<typeof Kobalte.GroupLabel> {}
-export interface DropdownMenuItemProps extends ComponentProps<typeof Kobalte.Item> {}
-export interface DropdownMenuItemLabelProps extends ComponentProps<typeof Kobalte.ItemLabel> {}
-export interface DropdownMenuItemDescriptionProps extends ComponentProps<typeof Kobalte.ItemDescription> {}
-export interface DropdownMenuItemIndicatorProps extends ComponentProps<typeof Kobalte.ItemIndicator> {}
-export interface DropdownMenuRadioGroupProps extends ComponentProps<typeof Kobalte.RadioGroup> {}
-export interface DropdownMenuRadioItemProps extends ComponentProps<typeof Kobalte.RadioItem> {}
-export interface DropdownMenuCheckboxItemProps extends ComponentProps<typeof Kobalte.CheckboxItem> {}
-export interface DropdownMenuSubProps extends ComponentProps<typeof Kobalte.Sub> {}
-export interface DropdownMenuSubTriggerProps extends ComponentProps<typeof Kobalte.SubTrigger> {}
-export interface DropdownMenuSubContentProps extends ComponentProps<typeof Kobalte.SubContent> {}
-
-function DropdownMenuRoot(props: DropdownMenuProps) {
-  return <Kobalte {...props} data-component="dropdown-menu" />
-}
-
-function DropdownMenuTrigger(props: ParentProps<DropdownMenuTriggerProps>) {
-  const [local, rest] = splitProps(props, ["class", "classList", "children"])
-  return (
-    <Kobalte.Trigger
-      {...rest}
-      data-slot="dropdown-menu-trigger"
-      classList={{
-        ...local.classList,
-        [local.class ?? ""]: !!local.class,
-      }}
-    >
-      {local.children}
-    </Kobalte.Trigger>
-  )
-}
-
-function DropdownMenuIcon(props: ParentProps<DropdownMenuIconProps>) {
-  const [local, rest] = splitProps(props, ["class", "classList", "children"])
-  return (
-    <Kobalte.Icon
-      {...rest}
-      data-slot="dropdown-menu-icon"
-      classList={{
-        ...local.classList,
-        [local.class ?? ""]: !!local.class,
-      }}
-    >
-      {local.children}
-    </Kobalte.Icon>
-  )
-}
-
-function DropdownMenuPortal(props: DropdownMenuPortalProps) {
-  return <Kobalte.Portal {...props} />
-}
-
-function DropdownMenuContent(props: ParentProps<DropdownMenuContentProps>) {
-  const [local, rest] = splitProps(props, ["class", "classList", "children"])
-  return (
-    <Kobalte.Content
-      {...rest}
-      data-component="dropdown-menu-content"
-      classList={{
-        ...local.classList,
-        [local.class ?? ""]: !!local.class,
-      }}
-    >
-      {local.children}
-    </Kobalte.Content>
-  )
-}
-
-function DropdownMenuArrow(props: DropdownMenuArrowProps) {
-  const [local, rest] = splitProps(props, ["class", "classList"])
-  return (
-    <Kobalte.Arrow
-      {...rest}
-      data-slot="dropdown-menu-arrow"
-      classList={{
-        ...local.classList,
-        [local.class ?? ""]: !!local.class,
-      }}
-    />
-  )
-}
-
-function DropdownMenuSeparator(props: DropdownMenuSeparatorProps) {
-  const [local, rest] = splitProps(props, ["class", "classList"])
-  return (
-    <Kobalte.Separator
-      {...rest}
-      data-slot="dropdown-menu-separator"
-      classList={{
-        ...local.classList,
-        [local.class ?? ""]: !!local.class,
-      }}
-    />
-  )
-}
-
-function DropdownMenuGroup(props: ParentProps<DropdownMenuGroupProps>) {
-  const [local, rest] = splitProps(props, ["class", "classList", "children"])
-  return (
-    <Kobalte.Group
-      {...rest}
-      data-slot="dropdown-menu-group"
-      classList={{
-        ...local.classList,
-        [local.class ?? ""]: !!local.class,
-      }}
-    >
-      {local.children}
-    </Kobalte.Group>
-  )
-}
-
-function DropdownMenuGroupLabel(props: ParentProps<DropdownMenuGroupLabelProps>) {
-  const [local, rest] = splitProps(props, ["class", "classList", "children"])
-  return (
-    <Kobalte.GroupLabel
-      {...rest}
-      data-slot="dropdown-menu-group-label"
-      classList={{
-        ...local.classList,
-        [local.class ?? ""]: !!local.class,
-      }}
-    >
-      {local.children}
-    </Kobalte.GroupLabel>
-  )
-}
-
-function DropdownMenuItem(props: ParentProps<DropdownMenuItemProps>) {
-  const [local, rest] = splitProps(props, ["class", "classList", "children"])
-  return (
-    <Kobalte.Item
-      {...rest}
-      data-slot="dropdown-menu-item"
-      classList={{
-        ...local.classList,
-        [local.class ?? ""]: !!local.class,
-      }}
-    >
-      {local.children}
-    </Kobalte.Item>
-  )
-}
-
-function DropdownMenuItemLabel(props: ParentProps<DropdownMenuItemLabelProps>) {
-  const [local, rest] = splitProps(props, ["class", "classList", "children"])
-  return (
-    <Kobalte.ItemLabel
-      {...rest}
-      data-slot="dropdown-menu-item-label"
-      classList={{
-        ...local.classList,
-        [local.class ?? ""]: !!local.class,
-      }}
-    >
-      {local.children}
-    </Kobalte.ItemLabel>
-  )
-}
-
-function DropdownMenuItemDescription(props: ParentProps<DropdownMenuItemDescriptionProps>) {
-  const [local, rest] = splitProps(props, ["class", "classList", "children"])
-  return (
-    <Kobalte.ItemDescription
-      {...rest}
-      data-slot="dropdown-menu-item-description"
-      classList={{
-        ...local.classList,
-        [local.class ?? ""]: !!local.class,
-      }}
-    >
-      {local.children}
-    </Kobalte.ItemDescription>
-  )
-}
-
-function DropdownMenuItemIndicator(props: ParentProps<DropdownMenuItemIndicatorProps>) {
-  const [local, rest] = splitProps(props, ["class", "classList", "children"])
-  return (
-    <Kobalte.ItemIndicator
-      {...rest}
-      data-slot="dropdown-menu-item-indicator"
-      classList={{
-        ...local.classList,
-        [local.class ?? ""]: !!local.class,
-      }}
-    >
-      {local.children}
-    </Kobalte.ItemIndicator>
-  )
-}
-
-function DropdownMenuRadioGroup(props: ParentProps<DropdownMenuRadioGroupProps>) {
-  const [local, rest] = splitProps(props, ["class", "classList", "children"])
-  return (
-    <Kobalte.RadioGroup
-      {...rest}
-      data-slot="dropdown-menu-radio-group"
-      classList={{
-        ...local.classList,
-        [local.class ?? ""]: !!local.class,
-      }}
-    >
-      {local.children}
-    </Kobalte.RadioGroup>
-  )
-}
-
-function DropdownMenuRadioItem(props: ParentProps<DropdownMenuRadioItemProps>) {
-  const [local, rest] = splitProps(props, ["class", "classList", "children"])
-  return (
-    <Kobalte.RadioItem
-      {...rest}
-      data-slot="dropdown-menu-radio-item"
-      classList={{
-        ...local.classList,
-        [local.class ?? ""]: !!local.class,
-      }}
-    >
-      {local.children}
-    </Kobalte.RadioItem>
-  )
-}
-
-function DropdownMenuCheckboxItem(props: ParentProps<DropdownMenuCheckboxItemProps>) {
-  const [local, rest] = splitProps(props, ["class", "classList", "children"])
-  return (
-    <Kobalte.CheckboxItem
-      {...rest}
-      data-slot="dropdown-menu-checkbox-item"
-      classList={{
-        ...local.classList,
-        [local.class ?? ""]: !!local.class,
-      }}
-    >
-      {local.children}
-    </Kobalte.CheckboxItem>
-  )
-}
-
-function DropdownMenuSub(props: DropdownMenuSubProps) {
-  return <Kobalte.Sub {...props} />
-}
-
-function DropdownMenuSubTrigger(props: ParentProps<DropdownMenuSubTriggerProps>) {
-  const [local, rest] = splitProps(props, ["class", "classList", "children"])
-  return (
-    <Kobalte.SubTrigger
-      {...rest}
-      data-slot="dropdown-menu-sub-trigger"
-      classList={{
-        ...local.classList,
-        [local.class ?? ""]: !!local.class,
-      }}
-    >
-      {local.children}
-    </Kobalte.SubTrigger>
-  )
-}
-
-function DropdownMenuSubContent(props: ParentProps<DropdownMenuSubContentProps>) {
-  const [local, rest] = splitProps(props, ["class", "classList", "children"])
-  return (
-    <Kobalte.SubContent
-      {...rest}
-      data-component="dropdown-menu-sub-content"
-      classList={{
-        ...local.classList,
-        [local.class ?? ""]: !!local.class,
-      }}
-    >
-      {local.children}
-    </Kobalte.SubContent>
-  )
-}
-
-export const DropdownMenu = Object.assign(DropdownMenuRoot, {
-  Trigger: DropdownMenuTrigger,
-  Icon: DropdownMenuIcon,
-  Portal: DropdownMenuPortal,
-  Content: DropdownMenuContent,
-  Arrow: DropdownMenuArrow,
-  Separator: DropdownMenuSeparator,
-  Group: DropdownMenuGroup,
-  GroupLabel: DropdownMenuGroupLabel,
-  Item: DropdownMenuItem,
-  ItemLabel: DropdownMenuItemLabel,
-  ItemDescription: DropdownMenuItemDescription,
-  ItemIndicator: DropdownMenuItemIndicator,
-  RadioGroup: DropdownMenuRadioGroup,
-  RadioItem: DropdownMenuRadioItem,
-  CheckboxItem: DropdownMenuCheckboxItem,
-  Sub: DropdownMenuSub,
-  SubTrigger: DropdownMenuSubTrigger,
-  SubContent: DropdownMenuSubContent,
-})

package/src/components/icon-button.css

@@ -1,181 +0,0 @@
-[data-component="icon-button"] {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: var(--radius-sm);
-  text-decoration: none;
-  user-select: none;
-  aspect-ratio: 1;
-  flex-shrink: 0;
-
-  &[data-variant="primary"] {
-    background-color: var(--icon-strong-base);
-
-    [data-slot="icon-svg"] {
-      /* color: var(--icon-weak-base); */
-      color: var(--icon-invert-base);
-
-      /* &:hover:not(:disabled) { */
-      /*   color: var(--icon-weak-hover); */
-      /* } */
-      /* &:active:not(:disabled) { */
-      /*   color: var(--icon-strong-active); */
-      /* } */
-    }
-
-    &:hover:not(:disabled) {
-      background-color: var(--icon-strong-hover);
-    }
-    &:focus:not(:disabled) {
-      background-color: var(--icon-strong-focus);
-    }
-    &:active:not(:disabled) {
-      background-color: var(--icon-strong-active);
-    }
-    &:disabled {
-      background-color: var(--icon-strong-disabled);
-
-      [data-slot="icon-svg"] {
-        color: var(--icon-invert-base);
-      }
-    }
-  }
-
-  &[data-variant="secondary"] {
-    border: transparent;
-    background-color: var(--button-secondary-base);
-    color: var(--text-strong);
-    box-shadow: var(--shadow-xs-border-base);
-
-    &:hover:not(:disabled) {
-      background-color: var(--button-secondary-hover);
-    }
-    &:focus:not(:disabled) {
-      background-color: var(--button-secondary-base);
-    }
-    &:focus-visible:not(:active) {
-      background-color: var(--button-secondary-base);
-      box-shadow: var(--shadow-xs-border-focus);
-    }
-    &:focus-visible:active {
-      box-shadow: none;
-    }
-    &:active:not(:disabled) {
-      background-color: var(--button-secondary-base);
-    }
-
-    [data-slot="icon-svg"] {
-      color: var(--icon-strong-base);
-    }
-
-    &:disabled {
-      background-color: var(--icon-strong-disabled);
-      color: var(--icon-invert-base);
-      cursor: not-allowed;
-    }
-  }
-
-  &[data-variant="ghost"] {
-    background-color: transparent;
-    /* color: var(--icon-base); */
-
-    [data-slot="icon-svg"] {
-      color: var(--icon-base);
-    }
-
-    &:hover:not(:disabled) {
-      background-color: var(--surface-base-hover);
-
-      /* [data-slot="icon-svg"] { */
-      /*   color: var(--icon-hover); */
-      /* } */
-    }
-    &:focus-visible:not(:disabled) {
-      background-color: var(--surface-base-hover);
-    }
-    &:active:not(:disabled) {
-      background-color: var(--surface-base-active);
-      /* [data-slot="icon-svg"] { */
-      /*   color: var(--icon-active); */
-      /* } */
-    }
-    &:selected:not(:disabled) {
-      background-color: var(--surface-base-active);
-      /* [data-slot="icon-svg"] { */
-      /*   color: var(--icon-selected); */
-      /* } */
-    }
-    &:disabled {
-      color: var(--icon-invert-base);
-      cursor: not-allowed;
-    }
-  }
-
-  &[data-size="normal"] {
-    width: 24px;
-    height: 24px;
-
-    font-size: var(--font-size-small);
-    line-height: var(--line-height-large);
-    gap: calc(var(--spacing) * 0.5);
-  }
-
-  &[data-size="small"] {
-    width: 20px;
-    height: 20px;
-  }
-
-  &[data-size="large"] {
-    height: 32px;
-    /* padding: 0 8px 0 6px; */
-    gap: 8px;
-
-    /* text-12-medium */
-    font-family: var(--font-family-sans);
-    font-size: var(--font-size-small);
-    font-style: normal;
-    font-weight: var(--font-weight-medium);
-    line-height: var(--line-height-large); /* 166.667% */
-    letter-spacing: var(--letter-spacing-normal);
-  }
-
-  &:focus {
-    outline: none;
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  [data-component="icon-button"][data-icon="stop"] [data-slot="icon-svg"] rect {
-    transform-origin: center;
-    transform-box: fill-box;
-    animation: stop-pulse 1.8s ease-in-out infinite;
-  }
-}
-
-@keyframes stop-pulse {
-  0%,
-  100% {
-    transform: scale(0.95);
-  }
-  50% {
-    transform: scale(1.12);
-  }
-}
-
-[data-component="icon-button"].titlebar-icon {
-  width: 32px;
-  height: 24px;
-  aspect-ratio: auto;
-}
-
-[data-component="icon-button"].titlebar-icon[data-variant="ghost"][aria-expanded="true"] {
-  background-color: var(--surface-raised-base-active);
-}
-
-[data-component="icon-button"].titlebar-icon[data-variant="ghost"][aria-expanded="true"] [data-slot="icon-svg"] {
-  color: var(--icon-strong-base);
-}
-
-[data-component="icon-button"].titlebar-icon[data-variant="ghost"][aria-expanded="true"]:hover:not(:disabled) {
-  background-color: var(--surface-raised-base-active);
-}

package/src/components/icon-button.tsx

@@ -1,29 +0,0 @@
-import { Button as Kobalte } from "@kobalte/core/button"
-import { type ComponentProps, splitProps } from "solid-js"
-import { Icon, IconProps } from "./icon"
-
-export interface IconButtonProps extends ComponentProps<typeof Kobalte> {
-  icon: IconProps["name"]
-  size?: "small" | "normal" | "large"
-  iconSize?: IconProps["size"]
-  variant?: "primary" | "secondary" | "ghost"
-}
-
-export function IconButton(props: ComponentProps<"button"> & IconButtonProps) {
-  const [split, rest] = splitProps(props, ["variant", "size", "iconSize", "class", "classList"])
-  return (
-    <Kobalte
-      {...rest}
-      data-component="icon-button"
-      data-icon={props.icon}
-      data-size={split.size || "normal"}
-      data-variant={split.variant || "secondary"}
-      classList={{
-        ...split.classList,
-        [split.class ?? ""]: !!split.class,
-      }}
-    >
-      <Icon name={props.icon} size={split.iconSize ?? (split.size === "large" ? "normal" : "small")} />
-    </Kobalte>
-  )
-}

package/src/components/icon.css

@@ -1,39 +0,0 @@
-[data-component="icon"] {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  /* resize: both; */
-  aspect-ratio: 1/1;
-  color: var(--icon-base);
-
-  &[data-size="small"] {
-    width: 16px;
-    height: 16px;
-  }
-
-  &[data-size="normal"] {
-    width: 20px;
-    height: 20px;
-  }
-
-  &[data-size="medium"] {
-    width: 24px;
-    height: 24px;
-  }
-
-  &[data-size="large"] {
-    width: 24px;
-    height: 24px;
-  }
-
-  [data-slot="icon-svg"] {
-    width: 100%;
-    height: auto;
-  }
-}
-
-:dir(rtl) [data-component="icon"][data-directional] [data-slot="icon-svg"],
-:dir(rtl) [data-slot="menu-v2-item-chevron"] {
-  transform: scaleX(-1);
-}

package/src/components/keybind.css

@@ -1,18 +0,0 @@
-[data-component="keybind"] {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  height: 20px;
-  padding: 0 8px;
-  border-radius: 2px;
-  background: var(--surface-base);
-  box-shadow: var(--shadow-xxs-border);
-
-  /* text-12-regular */
-  font-family: var(--font-family-sans);
-  font-size: 12px;
-  font-weight: var(--font-weight-regular);
-  line-height: 1;
-  color: var(--text-weak);
-}