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

package/src/v2/components/accordion-v2.css

@@ -1,139 +0,0 @@
-[data-component="accordion-v2"] {
-  --accordion-v2-fg: var(--v2-text-text-base);
-  --accordion-v2-icon: var(--v2-icon-icon-base);
-  --accordion-v2-border: var(--v2-border-border-strong);
-  --accordion-v2-bg: var(--v2-background-bg-base);
-
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-
-  width: 100%;
-  background: var(--accordion-v2-bg);
-  border-radius: 6px;
-  box-shadow: 0 0 0 0.5px var(--accordion-v2-border);
-  overflow: hidden;
-
-  color: var(--accordion-v2-fg);
-
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-rendering: geometricPrecision;
-}
-
-[data-component="accordion-v2-item"] {
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  width: 100%;
-  background: var(--accordion-v2-bg);
-  box-shadow: inset 0 -0.5px 0 var(--accordion-v2-border);
-}
-
-[data-component="accordion-v2-item"]:last-child {
-  box-shadow: none;
-}
-
-[data-slot="accordion-v2-header"] {
-  display: flex;
-  margin: 0;
-}
-
-[data-component="accordion-v2-trigger"] {
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 4px;
-
-  width: 100%;
-  min-height: 30px;
-  padding: 0 12px;
-
-  background: transparent;
-  border: 0;
-  outline: none;
-  cursor: default;
-  user-select: none;
-
-  font-size: 13px;
-  font-weight: 440;
-  line-height: 100%;
-  letter-spacing: -0.04px;
-  color: var(--accordion-v2-fg);
-  text-align: left;
-}
-
-[data-component="accordion-v2-trigger"] [data-slot="accordion-v2-trigger-content"] {
-  display: flex;
-  flex: 1 1 auto;
-  flex-direction: row;
-  align-items: center;
-  gap: 8px;
-  min-width: 0;
-  height: 30px;
-}
-
-[data-component="accordion-v2-trigger"] [data-slot="accordion-v2-chevron"] {
-  flex: none;
-  width: 14px;
-  height: 14px;
-  color: var(--accordion-v2-icon);
-  transition: transform 150ms ease;
-}
-
-[data-component="accordion-v2-trigger"][data-expanded] [data-slot="accordion-v2-chevron"] {
-  transform: rotate(180deg);
-}
-
-[data-component="accordion-v2-item"][data-expanded] [data-component="accordion-v2-trigger"] {
-  box-shadow: inset 0 -0.5px 0 var(--accordion-v2-border);
-}
-
-[data-component="accordion-v2-trigger"][data-disabled] {
-  pointer-events: none;
-  opacity: 0.5;
-}
-
-[data-component="accordion-v2-content"] {
-  overflow: hidden;
-  font-size: 13px;
-  line-height: 140%;
-  color: var(--accordion-v2-fg);
-}
-
-[data-component="accordion-v2-content"][data-expanded] {
-  animation: accordion-v2-down 180ms ease-out;
-}
-
-[data-component="accordion-v2-content"][data-closed] {
-  animation: accordion-v2-up 180ms ease-out;
-}
-
-[data-component="accordion-v2-content"] [data-slot="accordion-v2-content-inner"] {
-  display: flex;
-  flex-direction: row;
-  align-items: flex-start;
-  width: 100%;
-  padding: 12px;
-}
-
-@keyframes accordion-v2-down {
-  from {
-    height: 0;
-  }
-  to {
-    height: var(--kb-collapsible-content-height);
-  }
-}
-
-@keyframes accordion-v2-up {
-  from {
-    height: var(--kb-collapsible-content-height);
-  }
-  to {
-    height: 0;
-  }
-}

package/src/v2/components/accordion-v2.tsx

@@ -1,86 +0,0 @@
-import { Accordion as Kobalte } from "@kobalte/core/accordion"
-import { Show, splitProps, type Component, type ComponentProps, type ParentProps } from "solid-js"
-import "./accordion-v2.css"
-
-const ChevronDown: Component = () => (
-  <svg
-    data-slot="accordion-v2-chevron"
-    width="14"
-    height="14"
-    viewBox="0 0 14 14"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    aria-hidden="true"
-  >
-    <path d="M4 5.5L7 8.5L10 5.5" stroke="currentColor" />
-  </svg>
-)
-
-export interface AccordionV2Props extends ComponentProps<typeof Kobalte> {}
-export interface AccordionV2ItemProps extends ComponentProps<typeof Kobalte.Item> {}
-export interface AccordionV2HeaderProps extends ComponentProps<typeof Kobalte.Header> {}
-export interface AccordionV2TriggerProps extends ComponentProps<typeof Kobalte.Trigger> {
-  hideChevron?: boolean
-}
-export interface AccordionV2ContentProps extends ComponentProps<typeof Kobalte.Content> {}
-
-function AccordionV2Root(props: ParentProps<AccordionV2Props>) {
-  const [s, r] = splitProps(props, ["class", "classList"])
-  return <Kobalte {...r} data-component="accordion-v2" classList={{ ...s.classList, [s.class ?? ""]: !!s.class }} />
-}
-
-function AccordionV2Item(props: ParentProps<AccordionV2ItemProps>) {
-  const [s, r] = splitProps(props, ["class", "classList"])
-  return (
-    <Kobalte.Item
-      {...r}
-      data-component="accordion-v2-item"
-      classList={{ ...s.classList, [s.class ?? ""]: !!s.class }}
-    />
-  )
-}
-
-function AccordionV2Header(props: ParentProps<AccordionV2HeaderProps>) {
-  const [s, r] = splitProps(props, ["class", "classList", "children"])
-  return (
-    <Kobalte.Header {...r} data-slot="accordion-v2-header" classList={{ ...s.classList, [s.class ?? ""]: !!s.class }}>
-      {s.children}
-    </Kobalte.Header>
-  )
-}
-
-function AccordionV2Trigger(props: ParentProps<AccordionV2TriggerProps>) {
-  const [s, r] = splitProps(props, ["class", "classList", "children", "hideChevron"])
-  return (
-    <Kobalte.Trigger
-      {...r}
-      data-component="accordion-v2-trigger"
-      classList={{ ...s.classList, [s.class ?? ""]: !!s.class }}
-    >
-      <span data-slot="accordion-v2-trigger-content">{s.children}</span>
-      <Show when={!s.hideChevron}>
-        <ChevronDown />
-      </Show>
-    </Kobalte.Trigger>
-  )
-}
-
-function AccordionV2Content(props: ParentProps<AccordionV2ContentProps>) {
-  const [s, r] = splitProps(props, ["class", "classList", "children"])
-  return (
-    <Kobalte.Content
-      {...r}
-      data-component="accordion-v2-content"
-      classList={{ ...s.classList, [s.class ?? ""]: !!s.class }}
-    >
-      <div data-slot="accordion-v2-content-inner">{s.children}</div>
-    </Kobalte.Content>
-  )
-}
-
-export const AccordionV2 = Object.assign(AccordionV2Root, {
-  Item: AccordionV2Item,
-  Header: AccordionV2Header,
-  Trigger: AccordionV2Trigger,
-  Content: AccordionV2Content,
-})

package/src/v2/components/checkbox-v2.css

@@ -1,184 +0,0 @@
-[data-slot="checkbox-v2"] {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  cursor: default;
-
-  &:where([data-disabled]) {
-    cursor: not-allowed;
-  }
-
-  [data-slot="checkbox-v2-error"] {
-    color: var(--v2-state-fg-danger);
-    font-size: 12px;
-    font-weight: var(--font-weight-regular);
-    line-height: var(--line-height-normal);
-    letter-spacing: var(--letter-spacing-normal);
-  }
-
-  [data-slot="checkbox-v2-error"]:empty {
-    display: none;
-  }
-}
-
-[data-slot="checkbox-v2-row"] {
-  position: relative;
-  display: flex;
-  flex-direction: row;
-  align-items: flex-start;
-  padding: 0px;
-  gap: 8px;
-
-  [data-slot="checkbox-v2-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-v2-control-stack"] {
-    position: relative;
-    width: 16px;
-    height: 20px;
-    flex: none;
-  }
-
-  [data-slot="checkbox-v2-control"] {
-    box-sizing: border-box;
-    position: absolute;
-    width: 16px;
-    height: 16px;
-    flex: none;
-    flex-shrink: 0;
-    left: 0;
-    top: calc(50% - 16px / 2);
-    border-radius: 4px;
-    border: none;
-    box-shadow: inset 0 0 0 0.5px var(--v2-border-border-strong);
-
-    background:
-      linear-gradient(180deg, var(--v2-alpha-light-6) 0%, var(--v2-alpha-light-0) 100%), var(--v2-background-bg-base);
-    transition:
-      background 170ms ease-out,
-      opacity 170ms ease-out,
-      outline-color 170ms ease-out;
-  }
-
-  [data-slot="checkbox-v2-indicator"] {
-    position: absolute;
-    inset: 0;
-    width: 16px;
-    height: 16px;
-    pointer-events: none;
-  }
-
-  [data-slot="checkbox-v2-text"] {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: flex-start;
-    padding: 0px;
-    gap: 6px;
-  }
-
-  [data-slot="checkbox-v2-label"] {
-    display: inline-flex;
-    user-select: none;
-    color: inherit;
-    font-style: normal;
-    font-weight: 440;
-    font-variant-numeric: tabular-nums;
-    font-variation-settings: "slnt" 0;
-  }
-
-  [data-slot="checkbox-v2-label-text"] {
-    display: inline-flex;
-    align-items: center;
-    user-select: none;
-    color: var(--v2-text-text-base);
-    font-size: 13px;
-    line-height: 20px;
-    letter-spacing: -0.04px;
-  }
-
-  [data-slot="checkbox-v2-description"] {
-    color: var(--v2-text-text-muted);
-    font-size: 11px;
-    font-weight: 440;
-    line-height: 1;
-    letter-spacing: 0.05px;
-    font-variant-numeric: tabular-nums;
-    user-select: none;
-  }
-}
-
-[data-slot="checkbox-v2"]:where(:not([data-readonly]))
-  [data-slot="checkbox-v2-input"]:focus-visible
-  ~ [data-slot="checkbox-v2-control-stack"]
-  [data-slot="checkbox-v2-control"] {
-  outline: 2px solid var(--v2-border-border-focus);
-  outline-offset: 1px;
-}
-
-[data-slot="checkbox-v2"]:where(:hover):where(:not([data-disabled], [data-readonly], [data-invalid])):where(
-    :not([data-checked], [data-indeterminate])
-  )
-  [data-slot="checkbox-v2-control"] {
-  background:
-    linear-gradient(0deg, var(--v2-overlay-simple-overlay-hover), var(--v2-overlay-simple-overlay-hover)),
-    linear-gradient(180deg, var(--v2-alpha-light-6) 0%, var(--v2-alpha-light-0) 100%), var(--v2-background-bg-base);
-}
-
-[data-slot="checkbox-v2"]:where([data-disabled]) [data-slot="checkbox-v2-control"] {
-  opacity: 0.5;
-}
-
-[data-slot="checkbox-v2"]:where([data-checked], [data-indeterminate]) [data-slot="checkbox-v2-control"] {
-  background:
-    linear-gradient(180deg, var(--v2-alpha-light-20) 0%, var(--v2-alpha-light-0) 100%), var(--v2-background-bg-accent);
-}
-
-[data-slot="checkbox-v2"]:where([data-checked], [data-indeterminate]):where(:hover):where(
-    :not([data-disabled], [data-readonly])
-  )
-  [data-slot="checkbox-v2-control"] {
-  background:
-    linear-gradient(
-      0deg,
-      var(--v2-overlay-simple-overlay-contrast-hover),
-      var(--v2-overlay-simple-overlay-contrast-hover)
-    ),
-    linear-gradient(180deg, var(--v2-alpha-light-20) 0%, var(--v2-alpha-light-0) 100%), var(--v2-background-bg-accent);
-}
-
-[data-slot="checkbox-v2"]:where([data-invalid]):where(:not([data-checked], [data-indeterminate]))
-  [data-slot="checkbox-v2-control"] {
-  background: var(--v2-state-bg-danger);
-  box-shadow: inset 0 0 0 0.5px var(--v2-state-border-danger);
-}
-
-[data-slot="checkbox-v2"] .checkbox-v2-icon {
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  display: none;
-}
-
-[data-slot="checkbox-v2"]:where([data-checked]):where(:not([data-indeterminate])) .checkbox-v2-icon--check {
-  display: block;
-}
-
-[data-slot="checkbox-v2"]:where([data-indeterminate]) .checkbox-v2-icon--minus {
-  display: block;
-}
-
-[data-slot="checkbox-v2"]:where([data-disabled]) [data-slot="checkbox-v2-label"],
-[data-slot="checkbox-v2"]:where([data-disabled]) [data-slot="checkbox-v2-description"] {
-  opacity: 0.5;
-}

package/src/v2/components/checkbox-v2.tsx

@@ -1,65 +0,0 @@
-import { Checkbox as Kobalte } from "@kobalte/core/checkbox"
-import { Show, splitProps, type JSX } from "solid-js"
-import type { ComponentProps } from "solid-js"
-import "./checkbox-v2.css"
-
-export interface CheckboxV2Props extends ComponentProps<typeof Kobalte> {
-  label: JSX.Element
-  description?: JSX.Element
-  hideLabel?: boolean
-}
-
-export function CheckboxV2(props: CheckboxV2Props) {
-  const [local, others] = splitProps(props, ["class", "classList", "label", "description", "hideLabel"])
-  return (
-    <Kobalte
-      {...others}
-      data-slot="checkbox-v2"
-      classList={{
-        ...local.classList,
-        [local.class ?? ""]: !!local.class,
-      }}
-    >
-      <div data-slot="checkbox-v2-row">
-        <Kobalte.Input data-slot="checkbox-v2-input" />
-        <div data-slot="checkbox-v2-control-stack">
-          <Kobalte.Control data-slot="checkbox-v2-control">
-            <Kobalte.Indicator data-slot="checkbox-v2-indicator">
-              <svg
-                class="checkbox-v2-icon checkbox-v2-icon--check"
-                width="16"
-                height="16"
-                viewBox="0 0 16 16"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-                aria-hidden="true"
-              >
-                <path d="M3.53564 8.17857L6.39279 11.75L12.4642 4.25" stroke="#FAFAFA" stroke-width="1" />
-              </svg>
-              <svg
-                class="checkbox-v2-icon checkbox-v2-icon--minus"
-                width="16"
-                height="16"
-                viewBox="0 0 16 16"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-                aria-hidden="true"
-              >
-                <path d="M12.75 8H3.25" stroke="#FAFAFA" stroke-linejoin="round" stroke-width="1" />
-              </svg>
-            </Kobalte.Indicator>
-          </Kobalte.Control>
-        </div>
-        <Kobalte.Label data-slot="checkbox-v2-label" classList={{ "sr-only": local.hideLabel }}>
-          <div data-slot="checkbox-v2-text">
-            <span data-slot="checkbox-v2-label-text">{local.label}</span>
-            <Show when={local.description}>
-              {(description) => <span data-slot="checkbox-v2-description">{description()}</span>}
-            </Show>
-          </div>
-        </Kobalte.Label>
-      </div>
-      <Kobalte.ErrorMessage data-slot="checkbox-v2-error" />
-    </Kobalte>
-  )
-}

package/src/v2/components/diff-changes-v2.css

@@ -1,26 +0,0 @@
-[data-component="diff-changes"] {
-  display: flex;
-  direction: ltr;
-  unicode-bidi: isolate;
-  gap: 8px;
-  justify-content: flex-end;
-  align-items: center;
-
-  [data-slot="diff-changes-additions"],
-  [data-slot="diff-changes-deletions"] {
-    font-size: 11px;
-    font-style: normal;
-    font-weight: 440;
-    line-height: 1;
-    letter-spacing: 0.05px;
-    text-align: right;
-  }
-
-  [data-slot="diff-changes-additions"] {
-    color: var(--v2-state-fg-success);
-  }
-
-  [data-slot="diff-changes-deletions"] {
-    color: var(--v2-state-fg-danger);
-  }
-}

package/src/v2/components/icon-button-v2.tsx

@@ -1,37 +0,0 @@
-import { Button as Kobalte } from "@kobalte/core/button"
-import { type ComponentProps, splitProps } from "solid-js"
-import { JSX } from "solid-js"
-import "./icon-button-v2.css"
-
-export interface IconButtonV2Props
-  extends ComponentProps<typeof Kobalte>,
-    Pick<ComponentProps<"button">, "class" | "classList"> {
-  // temporary
-  icon?: JSX.Element
-  // icon: IconProps["name"]
-  size?: "small" | "normal" | "large"
-  // iconSize?: IconProps["size"]
-  variant?: "neutral" | "contrast" | "ghost" | "ghost-muted"
-  state?: "rest" | "hover" | "pressed"
-}
-
-export function IconButtonV2(props: ComponentProps<"button"> & IconButtonV2Props) {
-  const [split, rest] = splitProps(props, ["variant", "size", "iconSize", "class", "classList", "state"])
-  return (
-    <Kobalte
-      {...rest}
-      data-component="icon-button-v2"
-      // data-icon={props.icon}
-      data-size={split.size || "normal"}
-      data-variant={split.variant || "neutral"}
-      data-state={split.state}
-      classList={{
-        ...split.classList,
-        [split.class ?? ""]: !!split.class,
-      }}
-    >
-      {props.icon}
-      {/*<Icon name={props.icon} size={split.iconSize ?? (split.size === "large" ? "normal" : "small")} />*/}
-    </Kobalte>
-  )
-}