@opencode/ui 0.0.0-beta-19275

package/src/components/card.tsx

@@ -0,0 +1,123 @@
+import { type ComponentProps, Show, splitProps } from "solid-js"
+import { Icon, type IconProps } from "@opencode/ui/icon"
+
+type Variant = "normal" | "error" | "warning" | "success" | "info"
+
+export interface CardProps extends ComponentProps<"div"> {
+  variant?: Variant
+}
+
+export interface CardTitleProps extends ComponentProps<"div"> {
+  variant?: Variant
+
+  /**
+   * Optional title icon.
+   *
+   * - `undefined`: picks a default icon based on `variant` (error/warning/success/info)
+   * - `false`/`null`: disables the icon
+   * - `Icon` name: forces a specific icon
+   */
+  icon?: IconProps["name"] | false | null
+}
+
+function pick(variant: Variant) {
+  if (variant === "error") return "circle-ban-sign" as const
+  if (variant === "warning") return "warning" as const
+  if (variant === "success") return "circle-check" as const
+  if (variant === "info") return "help" as const
+  return
+}
+
+function mix(style: ComponentProps<"div">["style"], value?: string) {
+  if (!value) return style
+  if (!style) return { "--card-accent": value }
+  if (typeof style === "string") return `${style};--card-accent:${value};`
+  return { ...(style as Record<string, string | number>), "--card-accent": value }
+}
+
+export function Card(props: CardProps) {
+  const [split, rest] = splitProps(props, ["variant", "style", "class", "classList"])
+  const variant = () => split.variant ?? "normal"
+  const accent = () => {
+    const v = variant()
+    if (v === "error") return "var(--v2-state-fg-danger)"
+    if (v === "warning") return "var(--icon-warning-active)"
+    if (v === "success") return "var(--icon-success-active)"
+    if (v === "info") return "var(--icon-info-active)"
+    return
+  }
+  return (
+    <div
+      {...rest}
+      data-component="card"
+      data-variant={variant()}
+      style={mix(split.style, accent())}
+      classList={{
+        ...split.classList,
+        [split.class ?? ""]: !!split.class,
+      }}
+    >
+      {props.children}
+    </div>
+  )
+}
+
+export function CardTitle(props: CardTitleProps) {
+  const [split, rest] = splitProps(props, ["variant", "icon", "class", "classList", "children"])
+  const show = () => split.icon !== false && split.icon !== null
+  const name = () => {
+    if (split.icon === false || split.icon === null) return
+    if (typeof split.icon === "string") return split.icon
+    return pick(split.variant ?? "normal")
+  }
+  const placeholder = () => !name()
+  return (
+    <div
+      {...rest}
+      data-slot="card-title"
+      classList={{
+        ...split.classList,
+        [split.class ?? ""]: !!split.class,
+      }}
+    >
+      <Show when={show()}>
+        <span data-slot="card-title-icon" data-placeholder={placeholder() || undefined}>
+          <Icon name={name() ?? "dash"} size="small" />
+        </span>
+      </Show>
+      {split.children}
+    </div>
+  )
+}
+
+export function CardDescription(props: ComponentProps<"div">) {
+  const [split, rest] = splitProps(props, ["class", "classList", "children"])
+  return (
+    <div
+      {...rest}
+      data-slot="card-description"
+      classList={{
+        ...split.classList,
+        [split.class ?? ""]: !!split.class,
+      }}
+    >
+      {split.children}
+    </div>
+  )
+}
+
+export function CardActions(props: ComponentProps<"div">) {
+  const [split, rest] = splitProps(props, ["class", "classList", "children"])
+  return (
+    <div
+      {...rest}
+      data-slot="card-actions"
+      classList={{
+        ...split.classList,
+        [split.class ?? ""]: !!split.class,
+      }}
+    >
+      {split.children}
+    </div>
+  )
+}

package/src/components/collapsible.css

@@ -0,0 +1,154 @@
+[data-component="collapsible"] {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  background-color: transparent;
+  border: none;
+  transition: background-color 0.15s ease;
+  border-radius: var(--radius-md);
+  overflow: visible;
+
+  &.tool-collapsible {
+    --tool-content-gap: 4px;
+    gap: var(--tool-content-gap);
+  }
+
+  [data-slot="collapsible-trigger"] {
+    width: 100%;
+    display: flex;
+    height: 32px;
+    padding: 0;
+    align-items: center;
+    align-self: stretch;
+    cursor: default;
+    user-select: none;
+    color: var(--text-base);
+
+    [data-slot="collapsible-arrow"] {
+      opacity: 0;
+      transition: opacity 0.15s ease;
+      will-change: opacity;
+      transform: translateZ(0);
+    }
+
+    [data-slot="collapsible-arrow-icon"] {
+      display: inline-flex;
+      color: var(--icon-weaker);
+      transform: translateZ(0) rotate(-90deg);
+      transition: transform 0.15s ease;
+      will-change: transform;
+    }
+
+    &:hover [data-slot="collapsible-arrow"] {
+      opacity: 1;
+    }
+
+    /* 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);
+
+    /* &:hover { */
+    /*   background-color: var(--surface-base); */
+    /* } */
+    &:focus-visible {
+      outline: none;
+      background-color: var(--surface-raised-base-hover);
+    }
+    &[data-disabled] {
+      cursor: not-allowed;
+    }
+
+    &[data-hide-details="true"] {
+      height: auto;
+      align-items: stretch;
+    }
+
+    [data-slot="collapsible-arrow"] {
+      flex-shrink: 0;
+      width: 24px;
+      height: 24px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+
+  [data-slot="collapsible-trigger"][aria-expanded="true"] {
+    [data-slot="collapsible-arrow"] {
+      opacity: 1;
+    }
+
+    [data-slot="collapsible-arrow-icon"] {
+      transform: translateZ(0) rotate(0deg);
+    }
+  }
+
+  [data-slot="collapsible-content"] {
+    overflow: hidden;
+    /* animation: slideUp 250ms ease-out; */
+
+    &[data-expanded] {
+      overflow: visible;
+    }
+
+    /* &[data-expanded] { */
+    /*   animation: slideDown 250ms ease-out; */
+    /* } */
+  }
+
+  &[data-variant="ghost"] {
+    background-color: transparent;
+    border: none;
+
+    > [data-slot="collapsible-trigger"] {
+      background-color: transparent;
+      border: none;
+      padding: 0;
+
+      /* &:hover { */
+      /*   color: var(--text-strong); */
+      /* } */
+      &:focus-visible {
+        outline: none;
+        background-color: var(--surface-raised-base-hover);
+      }
+      &[data-disabled] {
+        cursor: not-allowed;
+      }
+    }
+  }
+
+  &[data-variant="ghost"][data-scope="filetree"] {
+    > [data-slot="collapsible-trigger"] {
+      height: 24px;
+    }
+  }
+
+  &[data-variant="ghost"][data-scope="file-tree-v2"] {
+    > [data-slot="collapsible-trigger"] {
+      height: 28px;
+    }
+  }
+}
+
+@keyframes slideDown {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--kb-collapsible-content-height);
+  }
+}
+
+@keyframes slideUp {
+  from {
+    height: var(--kb-collapsible-content-height);
+  }
+  to {
+    height: 0;
+  }
+}

package/src/components/collapsible.tsx

@@ -0,0 +1,48 @@
+import { Collapsible as Kobalte, CollapsibleRootProps } from "@kobalte/core/collapsible"
+import { ComponentProps, ParentProps, splitProps } from "solid-js"
+import { Icon } from "@opencode/ui/icon"
+
+export interface CollapsibleProps extends ParentProps<CollapsibleRootProps> {
+  class?: string
+  classList?: ComponentProps<"div">["classList"]
+  variant?: "normal" | "ghost"
+}
+
+function CollapsibleRoot(props: CollapsibleProps) {
+  const [local, others] = splitProps(props, ["class", "classList", "variant"])
+  return (
+    <Kobalte
+      data-component="collapsible"
+      data-variant={local.variant || "normal"}
+      classList={{
+        ...local.classList,
+        [local.class ?? ""]: !!local.class,
+      }}
+      {...others}
+    />
+  )
+}
+
+function CollapsibleTrigger(props: ComponentProps<typeof Kobalte.Trigger>) {
+  return <Kobalte.Trigger data-slot="collapsible-trigger" {...props} />
+}
+
+function CollapsibleContent(props: ComponentProps<typeof Kobalte.Content>) {
+  return <Kobalte.Content data-slot="collapsible-content" {...props} />
+}
+
+function CollapsibleArrow(props?: ComponentProps<"div">) {
+  return (
+    <div data-slot="collapsible-arrow" {...(props || {})}>
+      <span data-slot="collapsible-arrow-icon">
+        <Icon name="fill-triangle-down" size="small" />
+      </span>
+    </div>
+  )
+}
+
+export const Collapsible = Object.assign(CollapsibleRoot, {
+  Arrow: CollapsibleArrow,
+  Trigger: CollapsibleTrigger,
+  Content: CollapsibleContent,
+})

package/src/components/context-menu.css

@@ -0,0 +1,134 @@
+[data-component="context-menu-content"],
+[data-component="context-menu-sub-content"] {
+  min-width: 8rem;
+  overflow: hidden;
+  border: none;
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-xs-border);
+  background-clip: padding-box;
+  background-color: var(--surface-raised-stronger-non-alpha);
+  padding: 4px;
+  z-index: 100;
+  transform-origin: var(--kb-menu-content-transform-origin);
+
+  &:focus-within,
+  &:focus {
+    outline: none;
+  }
+
+  animation: contextMenuContentHide var(--transition-duration) var(--transition-easing) forwards;
+
+  @starting-style {
+    animation: none;
+  }
+
+  &[data-expanded] {
+    pointer-events: auto;
+    animation: contextMenuContentShow var(--transition-duration) var(--transition-easing) forwards;
+  }
+}
+
+[data-component="context-menu-content"],
+[data-component="context-menu-sub-content"] {
+  [data-slot="context-menu-item"],
+  [data-slot="context-menu-checkbox-item"],
+  [data-slot="context-menu-radio-item"],
+  [data-slot="context-menu-sub-trigger"] {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 4px 8px;
+    border-radius: var(--radius-sm);
+    cursor: default;
+    outline: none;
+
+    font-family: var(--font-family-sans);
+    font-size: var(--font-size-base);
+    font-weight: var(--font-weight-medium);
+    line-height: var(--line-height-large);
+    letter-spacing: var(--letter-spacing-normal);
+    color: var(--text-strong);
+
+    transition-property: background-color, color;
+    transition-duration: var(--transition-duration);
+    transition-timing-function: var(--transition-easing);
+    user-select: none;
+
+    &:hover {
+      background-color: var(--surface-raised-base-hover);
+    }
+
+    &[data-disabled] {
+      color: var(--text-weak);
+      pointer-events: none;
+    }
+  }
+
+  [data-slot="context-menu-sub-trigger"] {
+    &[data-expanded] {
+      background: var(--surface-raised-base-hover);
+      outline: none;
+      border: none;
+    }
+  }
+
+  [data-slot="context-menu-item-indicator"] {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 16px;
+    height: 16px;
+  }
+
+  [data-slot="context-menu-item-label"] {
+    flex: 1;
+  }
+
+  [data-slot="context-menu-item-description"] {
+    font-size: var(--font-size-x-small);
+    color: var(--text-weak);
+  }
+
+  [data-slot="context-menu-separator"] {
+    height: 1px;
+    margin: 4px -4px;
+    border-top-color: var(--border-weak-base);
+  }
+
+  [data-slot="context-menu-group-label"] {
+    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="context-menu-arrow"] {
+    fill: var(--surface-raised-stronger-non-alpha);
+  }
+}
+
+@keyframes contextMenuContentShow {
+  from {
+    opacity: 0;
+    transform: scaleY(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scaleY(1);
+  }
+}
+
+@keyframes contextMenuContentHide {
+  from {
+    opacity: 1;
+    transform: scaleY(1);
+  }
+  to {
+    opacity: 0;
+    transform: scaleY(0.95);
+  }
+}