@opencode/ui 0.0.0-beta-19275

package/src/actions/button/button.tsx

@@ -0,0 +1,41 @@
+import { Root } from "@kobalte/core/button"
+import { type ComponentProps, Show, splitProps } from "solid-js"
+import { Icon, type IconProps } from "@opencode/ui/icon"
+import "./button.css"
+
+export interface ButtonProps
+  extends ComponentProps<typeof Root>,
+    Pick<ComponentProps<"button">, "class" | "classList" | "children"> {
+  size?: "small" | "normal" | "large"
+  variant?:
+    | "neutral"
+    | "danger"
+    | "warning"
+    | "outline"
+    | "contrast"
+    | "ghost"
+    | "ghost-muted"
+    | "ghost-faint"
+    | "loading"
+  icon?: IconProps["name"]
+}
+
+export function Button(props: ButtonProps) {
+  const [split, rest] = splitProps(props, ["variant", "size", "icon", "class", "classList"])
+  return (
+    <Root
+      {...rest}
+      data-component="button-v2"
+      data-size={split.size || "normal"}
+      data-variant={split.variant || "neutral"}
+      data-icon={split.icon}
+      classList={{
+        ...split.classList,
+        [split.class ?? ""]: !!split.class,
+      }}
+    >
+      <Show when={split.icon}>{(icon) => <Icon name={icon()} />}</Show>
+      {props.children}
+    </Root>
+  )
+}

package/src/actions/icon-button/icon-button.css

@@ -0,0 +1,177 @@
+* {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: geometricPrecision;
+}
+
+[data-component="icon-button-v2"] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 6px;
+  color: var(--v2-text-text-base);
+  user-select: none;
+  outline: none;
+  padding: 0;
+  cursor: default;
+}
+
+[data-component="icon-button-v2"]:focus {
+  outline: none;
+}
+
+[data-component="icon-button-v2"]:is(:focus-visible, [data-state="focus"]):not(:disabled) {
+  outline: 2px solid var(--v2-border-border-focus);
+  outline-offset: 2.5px;
+}
+
+[data-component="icon-button-v2"][data-size="small"] {
+  width: 20px;
+  height: 20px;
+  border-radius: 4px;
+}
+
+[data-component="icon-button-v2"][data-size="normal"] {
+  width: 24px;
+  height: 24px;
+}
+
+[data-component="icon-button-v2"][data-size="large"] {
+  width: 28px;
+  height: 28px;
+}
+
+[data-component="icon-button-v2"] [data-slot="icon-svg"] {
+  color: currentColor;
+}
+
+/* Neutral */
+[data-component="icon-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="icon-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="icon-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="icon-button-v2"][data-variant="neutral"]:is(:disabled, [data-state="disabled"]) {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Contrast */
+[data-component="icon-button-v2"][data-variant="contrast"] {
+  --icon-button-contrast-highlight: var(--v2-alpha-light-20);
+  --icon-button-contrast-hover: var(--v2-overlay-simple-overlay-contrast-hover);
+
+  background-image:
+    linear-gradient(180deg, var(--icon-button-contrast-highlight) 0%, var(--v2-alpha-light-0) 100%),
+    linear-gradient(
+      90deg,
+      var(--v2-background-bg-icon-button-contrast) 0%,
+      var(--v2-background-bg-icon-button-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-color-scheme="dark"] [data-component="icon-button-v2"][data-variant="contrast"] {
+  --icon-button-contrast-highlight: var(--v2-alpha-light-60);
+  --icon-button-contrast-hover: var(--v2-alpha-dark-8);
+
+  color: var(--v2-icon-icon-inverse);
+}
+
+[data-component="icon-button-v2"][data-variant="contrast"]:is(:hover, [data-state="hover"]):not(:disabled) {
+  background-image:
+    linear-gradient(90deg, var(--icon-button-contrast-hover) 0%, var(--icon-button-contrast-hover) 100%),
+    linear-gradient(180deg, var(--icon-button-contrast-highlight) 0%, var(--v2-alpha-light-0) 100%),
+    linear-gradient(
+      90deg,
+      var(--v2-background-bg-icon-button-contrast) 0%,
+      var(--v2-background-bg-icon-button-contrast) 100%
+    );
+}
+
+[data-component="icon-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(--icon-button-contrast-highlight) 0%, var(--v2-alpha-light-0) 100%),
+    linear-gradient(
+      90deg,
+      var(--v2-background-bg-icon-button-contrast) 0%,
+      var(--v2-background-bg-icon-button-contrast) 100%
+    );
+}
+
+[data-component="icon-button-v2"][data-variant="contrast"]:is(:disabled, [data-state="disabled"]) {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* Ghost */
+[data-component="icon-button-v2"][data-variant="ghost"] {
+  background-color: transparent;
+  color: var(--v2-text-text-base);
+}
+
+[data-component="icon-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="icon-button-v2"][data-variant="ghost"]:is(:active, [data-state="pressed"]):not(:disabled) {
+  background-color: var(--v2-overlay-simple-overlay-pressed);
+}
+
+[data-component="icon-button-v2"][data-variant="ghost"]:where([data-expanded]):not(:disabled) {
+  background-color: var(--v2-overlay-simple-overlay-pressed);
+}
+
+[data-component="icon-button-v2"][data-variant="ghost"]:is(:disabled, [data-state="disabled"]) {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Ghost */
+[data-component="icon-button-v2"][data-variant="ghost-muted"] {
+  background-color: transparent;
+  color: var(--v2-icon-icon-muted);
+}
+
+[data-component="icon-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="icon-button-v2"][data-variant="ghost-muted"]:is(:active, [data-state="pressed"]):not(:disabled) {
+  background-color: var(--v2-overlay-simple-overlay-pressed);
+  color: var(--v2-icon-icon-base);
+}
+
+[data-component="icon-button-v2"][data-variant="ghost-muted"]:where([data-expanded]):not(:disabled) {
+  background-color: var(--v2-overlay-simple-overlay-pressed);
+  color: var(--v2-icon-icon-base);
+}
+
+[data-component="icon-button-v2"][data-variant="ghost-muted"]:is(:disabled, [data-state="disabled"]) {
+  opacity: 0.5;
+  cursor: not-allowed;
+}

package/src/actions/icon-button/icon-button.tsx

@@ -0,0 +1,32 @@
+import { Root } from "@kobalte/core/button"
+import { type ComponentProps, splitProps } from "solid-js"
+import { JSX } from "solid-js"
+import "./icon-button.css"
+
+export interface IconButtonProps
+  extends ComponentProps<typeof Root>,
+    Pick<ComponentProps<"button">, "class" | "classList"> {
+  icon?: JSX.Element
+  size?: "small" | "normal" | "large"
+  variant?: "neutral" | "contrast" | "ghost" | "ghost-muted"
+  state?: "rest" | "hover" | "pressed"
+}
+
+export function IconButton(props: ComponentProps<"button"> & IconButtonProps) {
+  const [local, rest] = splitProps(props, ["variant", "size", "icon", "class", "classList", "state"])
+  return (
+    <Root
+      {...rest}
+      data-component="icon-button-v2"
+      data-size={local.size || "normal"}
+      data-variant={local.variant || "neutral"}
+      data-state={local.state}
+      classList={{
+        ...local.classList,
+        [local.class ?? ""]: !!local.class,
+      }}
+    >
+      {local.icon}
+    </Root>
+  )
+}

package/src/actions/split-button/split-button.css

@@ -0,0 +1,95 @@
+[data-component="split-button-v2"] {
+  display: inline-flex;
+  align-items: stretch;
+  flex-shrink: 0;
+  height: 28px;
+  border-radius: 6px;
+  background-color: transparent;
+  box-shadow: none;
+  overflow: hidden;
+}
+
+[data-component="split-button-v2"].session-review-v2-open-in-app,
+[data-component="split-button-v2"]:is(:hover, :has([data-component="split-button-v2-menu-trigger"][data-expanded])) {
+  box-shadow: inset 0 0 0 1px var(--v2-border-border-muted);
+}
+
+[data-component="split-button-v2-action"],
+[data-component="split-button-v2-menu-trigger"] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 28px;
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: var(--v2-icon-icon-base);
+  cursor: default;
+  outline: none;
+}
+
+[data-component="split-button-v2-action"] {
+  width: 28px;
+  flex-shrink: 0;
+}
+
+[data-component="split-button-v2-action"]:hover:not(:disabled) {
+  background-color: var(--v2-overlay-simple-overlay-hover);
+}
+
+[data-component="split-button-v2-action"]:is(:active, [data-pressed]):not(:disabled) {
+  background-color: var(--v2-overlay-simple-overlay-pressed);
+}
+
+[data-component="split-button-v2-action"]:is(:focus-visible, [data-focus]) {
+  outline: 2px solid var(--v2-border-border-focus);
+  outline-offset: -2px;
+  z-index: 1;
+}
+
+[data-component="split-button-v2-action"]:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+[data-component="split-button-v2-menu-trigger"] {
+  width: 20px;
+  flex-shrink: 0;
+}
+
+[data-component="split-button-v2-menu-trigger"]:is(:hover, [data-expanded]):not(:disabled) {
+  background-color: var(--v2-overlay-simple-overlay-hover);
+}
+
+[data-component="split-button-v2-menu-trigger"]:is(:active, [data-pressed]):not(:disabled) {
+  background-color: var(--v2-overlay-simple-overlay-pressed);
+}
+
+[data-component="split-button-v2-menu-trigger"]:is(:focus-visible, [data-focus]) {
+  outline: 2px solid var(--v2-border-border-focus);
+  outline-offset: -2px;
+  z-index: 1;
+}
+
+[data-component="split-button-v2-menu-trigger"]:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+[data-component="split-button-v2-action"] [data-component="app-icon"] {
+  width: 16px;
+  height: 16px;
+}
+
+[data-component="menu-v2-content"].open-in-app-v2-menu [data-component="app-icon"] {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+}
+
+[data-component="menu-v2-content"].open-in-app-v2-menu [data-slot="icon-svg"] {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+}

package/src/actions/split-button/split-button.tsx

@@ -0,0 +1,48 @@
+import { splitProps, type ComponentProps, type ParentProps } from "solid-js"
+import "./split-button.css"
+
+export function SplitButton(props: ParentProps<ComponentProps<"div">>) {
+  const [split, rest] = splitProps(props, ["class", "classList", "children"])
+  return (
+    <div
+      data-component="split-button-v2"
+      classList={{
+        ...split.classList,
+        [split.class ?? ""]: !!split.class,
+      }}
+      {...rest}
+    >
+      {split.children}
+    </div>
+  )
+}
+
+export function SplitButtonAction(props: ComponentProps<"button">) {
+  const [split, rest] = splitProps(props, ["class", "classList"])
+  return (
+    <button
+      type="button"
+      data-component="split-button-v2-action"
+      classList={{
+        ...split.classList,
+        [split.class ?? ""]: !!split.class,
+      }}
+      {...rest}
+    />
+  )
+}
+
+export function SplitButtonMenuTrigger(props: ComponentProps<"button">) {
+  const [split, rest] = splitProps(props, ["class", "classList"])
+  return (
+    <button
+      type="button"
+      data-component="split-button-v2-menu-trigger"
+      classList={{
+        ...split.classList,
+        [split.class ?? ""]: !!split.class,
+      }}
+      {...rest}
+    />
+  )
+}