@opencode-ai/ui 0.0.0-beta-202606251302

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

@@ -0,0 +1,186 @@
+* {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: geometricPrecision;
+}
+
+[data-component="button-v2"] {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  border-radius: 6px;
+  font-style: normal;
+  font-weight: 530;
+  font-size: 13px;
+  line-height: 1;
+  color: var(--v2-text-text-base);
+  text-shadow: none;
+  font-variant-numeric: tabular-nums;
+  letter-spacing: -0.04px;
+  user-select: none;
+  cursor: pointer;
+  outline: none;
+}
+
+[data-component="button-v2"]:focus {
+  outline: none;
+}
+
+[data-component="button-v2"]:is(:focus-visible, [data-state="focus"]):not(:disabled) {
+  outline: 2px solid var(--v2-border-border-focus);
+  outline-offset: 2.5px;
+}
+
+[data-component="button-v2"][data-size="normal"] {
+  height: 28px;
+  padding: 0 11px;
+}
+
+[data-component="button-v2"][data-size="small"] {
+  height: 24px;
+  padding: 0 9px;
+  border-radius: 4px;
+}
+
+[data-component="button-v2"][data-size="large"] {
+  height: 32px;
+  padding: 0 15px;
+}
+
+[data-component="button-v2"][data-icon][data-size="small"] {
+  padding-left: 9px;
+}
+
+[data-component="button-v2"][data-icon][data-size="normal"] {
+  padding-left: 11px;
+}
+
+[data-component="button-v2"][data-icon][data-size="large"] {
+  padding-left: 15px;
+}
+
+[data-component="button-v2"] [data-slot="icon-svg"] {
+  color: currentColor;
+}
+
+/* Neutral */
+[data-component="button-v2"][data-variant="neutral"] {
+  background-color: var(--v2-background-bg-button-neutral);
+  color: var(--v2-text-text-base);
+  box-shadow: var(--v2-elevation-button-neutral);
+}
+
+[data-component="button-v2"][data-variant="neutral"]:is(:hover, [data-state="hover"]):not(:disabled) {
+  background-image:
+    linear-gradient(90deg, var(--v2-overlay-simple-overlay-hover) 0%, var(--v2-overlay-simple-overlay-hover) 100%),
+    linear-gradient(90deg, var(--v2-background-bg-button-neutral) 0%, var(--v2-background-bg-button-neutral) 100%);
+}
+
+[data-component="button-v2"][data-variant="neutral"]:is(:active, [data-state="pressed"]):not(:disabled) {
+  background-image:
+    linear-gradient(90deg, var(--v2-overlay-simple-overlay-pressed) 0%, var(--v2-overlay-simple-overlay-pressed) 100%),
+    linear-gradient(90deg, var(--v2-background-bg-button-neutral) 0%, var(--v2-background-bg-button-neutral) 100%);
+}
+
+[data-component="button-v2"][data-variant="neutral"]:is(:disabled, [data-state="disabled"]) {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Contrast */
+[data-component="button-v2"][data-variant="contrast"] {
+  background-image:
+    linear-gradient(180deg, var(--v2-alpha-light-20) 0%, var(--v2-alpha-light-0) 100%),
+    linear-gradient(90deg, var(--v2-background-bg-contrast) 0%, var(--v2-background-bg-contrast) 100%);
+  color: var(--v2-text-text-contrast);
+  text-shadow: 0 0.5px 0.5px rgba(0, 0, 0, 0.3);
+  box-shadow: var(--v2-elevation-button-contrast);
+}
+
+[data-component="button-v2"][data-variant="contrast"]:is(:hover, [data-state="hover"]):not(:disabled) {
+  background-image:
+    linear-gradient(
+      90deg,
+      var(--v2-overlay-simple-overlay-contrast-hover) 0%,
+      var(--v2-overlay-simple-overlay-contrast-hover) 100%
+    ),
+    linear-gradient(180deg, var(--v2-alpha-light-20) 0%, var(--v2-alpha-light-0) 100%),
+    linear-gradient(90deg, var(--v2-background-bg-contrast) 0%, var(--v2-background-bg-contrast) 100%);
+}
+
+[data-component="button-v2"][data-variant="contrast"]:is(:active, [data-state="pressed"]):not(:disabled) {
+  background-image:
+    linear-gradient(
+      90deg,
+      var(--v2-overlay-simple-overlay-contrast-pressed) 0%,
+      var(--v2-overlay-simple-overlay-contrast-pressed) 100%
+    ),
+    linear-gradient(180deg, var(--v2-alpha-light-20) 0%, var(--v2-alpha-light-0) 100%),
+    linear-gradient(90deg, var(--v2-background-bg-contrast) 0%, var(--v2-background-bg-contrast) 100%);
+}
+
+[data-component="button-v2"][data-variant="contrast"]:is(:disabled, [data-state="disabled"]) {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* Ghost */
+[data-component="button-v2"][data-variant="ghost"] {
+  background-color: transparent;
+  color: var(--v2-text-text-base);
+}
+
+[data-component="button-v2"][data-variant="ghost"]:is(:hover, [data-state="hover"]):not(:disabled):not(
+    [data-expanded]
+  ) {
+  background-color: var(--v2-overlay-simple-overlay-hover);
+}
+
+[data-component="button-v2"][data-variant="ghost"]:is(:active, [data-state="pressed"]):not(:disabled) {
+  background-color: var(--v2-overlay-simple-overlay-pressed);
+}
+
+[data-component="button-v2"][data-variant="ghost"]:where([data-expanded]):not(:disabled) {
+  background-color: var(--v2-overlay-simple-overlay-pressed);
+}
+
+[data-component="button-v2"][data-variant="ghost"]:is(:disabled, [data-state="disabled"]) {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Ghost muted */
+[data-component="button-v2"][data-variant="ghost-muted"] {
+  background-color: transparent;
+  color: var(--v2-text-text-muted);
+}
+
+[data-component="button-v2"][data-variant="ghost-muted"] [data-slot="icon-svg"] {
+  color: var(--v2-icon-icon-muted);
+}
+
+[data-component="button-v2"][data-variant="ghost-muted"]:is(:hover, [data-state="hover"]):not(:disabled):not(
+    [data-expanded]
+  ) {
+  background-color: var(--v2-overlay-simple-overlay-hover);
+}
+
+[data-component="button-v2"][data-variant="ghost-muted"]:is(:active, [data-state="pressed"]):not(:disabled) {
+  background-color: var(--v2-overlay-simple-overlay-pressed);
+}
+
+[data-component="button-v2"][data-variant="ghost-muted"]:where([data-expanded]):not(:disabled) {
+  background-color: var(--v2-overlay-simple-overlay-pressed);
+  color: var(--v2-text-text-base);
+}
+
+[data-component="button-v2"][data-variant="ghost-muted"]:where([data-expanded]):not(:disabled) [data-slot="icon-svg"] {
+  color: var(--v2-icon-icon-base);
+}
+
+[data-component="button-v2"][data-variant="ghost-muted"]:is(:disabled, [data-state="disabled"]) {
+  opacity: 0.5;
+  cursor: not-allowed;
+}

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

@@ -0,0 +1,35 @@
+import { Button as Kobalte } from "@kobalte/core/button"
+import { type ComponentProps, Show, createMemo, splitProps } from "solid-js"
+import { Icon, type IconProps } from "./icon"
+import "./button-v2.css"
+
+export interface ButtonV2Props
+  extends ComponentProps<typeof Kobalte>,
+    Pick<ComponentProps<"button">, "class" | "classList" | "children"> {
+  size?: "small" | "normal" | "large"
+  variant?: "neutral" | "contrast" | "ghost" | "ghost-muted"
+  icon?: IconProps["name"]
+}
+
+export function ButtonV2(props: ButtonV2Props) {
+  const [split, rest] = splitProps(props, ["variant", "size", "icon", "class", "classList"])
+  const resolvedIcon = createMemo(() => split.icon)
+  return (
+    <Kobalte
+      {...rest}
+      data-component="button-v2"
+      data-size={split.size || "normal"}
+      data-variant={split.variant || "neutral"}
+      data-icon={resolvedIcon()}
+      classList={{
+        ...split.classList,
+        [split.class ?? ""]: !!split.class,
+      }}
+    >
+      <Show when={resolvedIcon()}>
+        <Icon name={resolvedIcon()!} />
+      </Show>
+      {props.children}
+    </Kobalte>
+  )
+}

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

@@ -0,0 +1,184 @@
+[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

@@ -0,0 +1,65 @@
+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/dialog-v2.css

@@ -0,0 +1,150 @@
+/* [data-component="dialog-trigger"] { } */
+
+[data-component="dialog-overlay"] {
+  position: fixed;
+  inset: 0;
+  z-index: 50;
+  background-color: var(--v2-overlay-simple-overlay-scrim);
+}
+
+[data-component="dialog-v2"] {
+  position: fixed;
+  inset: 0;
+  z-index: 50;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+
+  [data-slot="dialog-container"] {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    width: 480px;
+    height: 368px;
+    background: var(--v2-background-bg-layer-01);
+    box-shadow: var(--v2-elevation-overlay);
+    border-radius: 6px;
+    overflow: hidden;
+    pointer-events: auto;
+
+    [data-slot="dialog-content"] {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      align-self: stretch;
+      width: 100%;
+      max-height: 100%;
+      flex: 1;
+      overflow: auto;
+      background: transparent;
+
+      scrollbar-width: none;
+      -ms-overflow-style: none;
+      &::-webkit-scrollbar {
+        display: none;
+      }
+
+      [data-slot="dialog-header"] {
+        display: flex;
+        flex-direction: row;
+        align-items: flex-start;
+        padding: 16px;
+        gap: 8px;
+        flex-shrink: 0;
+        align-self: stretch;
+
+        [data-slot="dialog-title-group"] {
+          display: flex;
+          flex-direction: column;
+          align-items: flex-start;
+          gap: 8px;
+          flex: 1;
+          min-width: 0;
+        }
+
+        [data-slot="dialog-title"] {
+          margin: 0;
+          font-weight: 530;
+          font-size: 15px;
+          line-height: 100%;
+          letter-spacing: -0.13px;
+          color: var(--v2-text-text-base);
+          font-variation-settings: "slnt" 0;
+        }
+
+        [data-slot="dialog-description"] {
+          font-weight: 440;
+          font-size: 13px;
+          line-height: 100%;
+          letter-spacing: -0.04px;
+          color: var(--v2-text-text-muted);
+          font-variation-settings: "slnt" 0;
+        }
+
+        [data-slot="dialog-close-button"] {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          width: 24px;
+          height: 24px;
+          border-radius: 4px;
+          flex-shrink: 0;
+          cursor: pointer;
+          color: var(--v2-icon-icon-muted);
+
+          &:hover {
+            background: var(--v2-overlay-simple-overlay-hover);
+          }
+        }
+      }
+
+      [data-slot="dialog-footer"] {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-end;
+        align-items: flex-start;
+        padding: 16px;
+        gap: 8px;
+        align-self: stretch;
+        flex-shrink: 0;
+      }
+
+      [data-slot="dialog-body"] {
+        width: 100%;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+        overflow: hidden;
+
+        &:focus-visible {
+          outline: none;
+        }
+      }
+      &:focus-visible {
+        outline: none;
+      }
+    }
+  }
+
+  &[data-fit] {
+    [data-slot="dialog-container"] {
+      height: auto;
+
+      [data-slot="dialog-content"] {
+        min-height: 0;
+      }
+    }
+  }
+
+  &[data-size="large"] [data-slot="dialog-container"] {
+    width: 640px;
+    height: 480px;
+  }
+
+  &[data-size="x-large"] [data-slot="dialog-container"] {
+    width: min(calc(100vw - 32px), 980px);
+    height: min(calc(100vh - 92px), 600px);
+  }
+}