@opencode-ai/ui 0.0.0-beta-202606251302

package/src/components/checkbox.css

@@ -0,0 +1,131 @@
+[data-component="checkbox"] {
+  display: flex;
+  align-items: var(--checkbox-align, center);
+  gap: 12px;
+  cursor: default;
+
+  [data-slot="checkbox-checkbox-input"] {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+  }
+
+  [data-slot="checkbox-checkbox-control"] {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 16px;
+    height: 16px;
+    padding: 2px;
+    margin-top: var(--checkbox-offset, 0px);
+    aspect-ratio: 1;
+    flex-shrink: 0;
+    border-radius: var(--radius-sm);
+    border: 1px solid var(--border-weak-base);
+    transition:
+      border-color 220ms var(--tool-motion-ease, cubic-bezier(0.22, 1, 0.36, 1)),
+      background-color 220ms var(--tool-motion-ease, cubic-bezier(0.22, 1, 0.36, 1)),
+      box-shadow 220ms var(--tool-motion-ease, cubic-bezier(0.22, 1, 0.36, 1));
+    /* background-color: var(--surface-weak); */
+  }
+
+  [data-slot="checkbox-checkbox-indicator"] {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    color: var(--icon-base);
+    opacity: 0;
+    transform: scale(0.9);
+    transition:
+      opacity 180ms var(--tool-motion-ease, cubic-bezier(0.22, 1, 0.36, 1)),
+      transform 220ms var(--tool-motion-ease, cubic-bezier(0.22, 1, 0.36, 1));
+  }
+
+  /* [data-slot="checkbox-checkbox-content"] { */
+  /* } */
+
+  [data-slot="checkbox-checkbox-label"] {
+    user-select: none;
+    color: var(--text-base);
+
+    /* text-12-regular */
+    font-family: var(--font-family-sans);
+    font-size: var(--font-size-small);
+    font-style: normal;
+    font-weight: var(--font-weight-regular);
+    line-height: var(--line-height-large); /* 166.667% */
+    letter-spacing: var(--letter-spacing-normal);
+  }
+
+  [data-slot="checkbox-checkbox-description"] {
+    color: var(--text-base);
+    font-family: var(--font-family-sans);
+    font-size: 12px;
+    font-weight: var(--font-weight-regular);
+    line-height: var(--line-height-normal);
+    letter-spacing: var(--letter-spacing-normal);
+  }
+
+  [data-slot="checkbox-checkbox-error"] {
+    color: var(--text-error);
+    font-family: var(--font-family-sans);
+    font-size: 12px;
+    font-weight: var(--font-weight-regular);
+    line-height: var(--line-height-normal);
+    letter-spacing: var(--letter-spacing-normal);
+  }
+
+  &:hover:not([data-disabled], [data-readonly]) [data-slot="checkbox-checkbox-control"] {
+    border-color: var(--border-hover);
+    background-color: var(--surface-hover);
+  }
+
+  &:not([data-readonly]) [data-slot="checkbox-checkbox-input"]:focus-visible + [data-slot="checkbox-checkbox-control"] {
+    border-color: var(--border-focus);
+    box-shadow: var(--shadow-xs-border-focus);
+  }
+
+  &[data-checked] [data-slot="checkbox-checkbox-control"],
+  &[data-indeterminate] [data-slot="checkbox-checkbox-control"] {
+    border-color: var(--border-base);
+    background-color: var(--surface-weak);
+  }
+
+  &[data-checked]:hover:not([data-disabled], [data-readonly]) [data-slot="checkbox-checkbox-control"],
+  &[data-indeterminate]:hover:not([data-disabled]) [data-slot="checkbox-checkbox-control"] {
+    border-color: var(--border-hover);
+    background-color: var(--surface-hover);
+  }
+
+  &[data-checked] [data-slot="checkbox-checkbox-indicator"],
+  &[data-indeterminate] [data-slot="checkbox-checkbox-indicator"] {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  &[data-disabled] {
+    cursor: not-allowed;
+  }
+
+  &[data-disabled] [data-slot="checkbox-checkbox-control"] {
+    border-color: var(--border-disabled);
+    background-color: var(--surface-disabled);
+  }
+
+  &[data-invalid] [data-slot="checkbox-checkbox-control"] {
+    border-color: var(--border-error);
+  }
+
+  &[data-readonly] {
+    cursor: default;
+    pointer-events: none;
+  }
+}

package/src/components/checkbox.tsx

@@ -0,0 +1,43 @@
+import { Checkbox as Kobalte } from "@kobalte/core/checkbox"
+import { Show, splitProps } from "solid-js"
+import type { ComponentProps, JSX, ParentProps } from "solid-js"
+
+export interface CheckboxProps extends ParentProps<ComponentProps<typeof Kobalte>> {
+  hideLabel?: boolean
+  description?: string
+  icon?: JSX.Element
+}
+
+export function Checkbox(props: CheckboxProps) {
+  const [local, others] = splitProps(props, ["children", "class", "label", "hideLabel", "description", "icon"])
+  return (
+    <Kobalte {...others} data-component="checkbox">
+      <Kobalte.Input data-slot="checkbox-checkbox-input" />
+      <Kobalte.Control data-slot="checkbox-checkbox-control">
+        <Kobalte.Indicator data-slot="checkbox-checkbox-indicator">
+          {local.icon || (
+            <svg viewBox="0 0 12 12" fill="none" width="10" height="10" xmlns="http://www.w3.org/2000/svg">
+              <path
+                d="M3 7.17905L5.02703 8.85135L9 3.5"
+                stroke="currentColor"
+                stroke-width="1.5"
+                stroke-linecap="square"
+              />
+            </svg>
+          )}
+        </Kobalte.Indicator>
+      </Kobalte.Control>
+      <div data-slot="checkbox-checkbox-content">
+        <Show when={props.children}>
+          <Kobalte.Label data-slot="checkbox-checkbox-label" classList={{ "sr-only": local.hideLabel }}>
+            {props.children}
+          </Kobalte.Label>
+        </Show>
+        <Show when={local.description}>
+          <Kobalte.Description data-slot="checkbox-checkbox-description">{local.description}</Kobalte.Description>
+        </Show>
+        <Kobalte.ErrorMessage data-slot="checkbox-checkbox-error" />
+      </div>
+    </Kobalte>
+  )
+}

package/src/components/collapsible.css

@@ -0,0 +1,148 @@
+[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;
+    }
+  }
+}
+
+@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 "./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="chevron-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);
+  }
+}