@opencode-ai/ui 0.0.0-dev-202606261234 → 0.0.0-dev-202606261324

package/dist/v2/components/button-v2.d.ts

@@ -4,7 +4,7 @@ import { 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";
+    variant?: "neutral" | "danger" | "contrast" | "ghost" | "ghost-muted";
     icon?: IconProps["name"];
 }
 export declare function ButtonV2(props: ButtonV2Props): import("solid-js").JSX.Element;

package/dist/v2/components/dialog-v2.d.ts

@@ -1,14 +1,25 @@
 import { type ComponentProps, type JSXElement, type ParentProps } from "solid-js";
 import "./dialog-v2.css";
 export interface DialogProps extends ParentProps {
-    title?: JSXElement;
-    description?: JSXElement;
-    action?: JSXElement;
     size?: "normal" | "large" | "x-large";
     variant?: "default" | "settings";
     class?: ComponentProps<"div">["class"];
     classList?: ComponentProps<"div">["classList"];
     fit?: boolean;
 }
+export interface DialogHeaderProps extends ParentProps {
+    closeLabel?: string;
+    hideClose?: boolean;
+}
+export interface DialogTitleGroupProps {
+    title?: JSXElement;
+    description: JSXElement;
+}
 export declare function DialogFooter(props: ParentProps): import("solid-js").JSX.Element;
+export declare function DialogBody(props: ParentProps & {
+    class?: ComponentProps<"div">["class"];
+}): import("solid-js").JSX.Element;
+export declare function DialogTitle(props: ParentProps): import("solid-js").JSX.Element;
+export declare function DialogTitleGroup(props: DialogTitleGroupProps): import("solid-js").JSX.Element;
+export declare function DialogHeader(props: DialogHeaderProps): import("solid-js").JSX.Element;
 export declare function Dialog(props: DialogProps): import("solid-js").JSX.Element;

package/dist/v2/components/divider-v2.d.ts

@@ -0,0 +1,5 @@
+import { type ComponentProps } from "solid-js";
+import "./divider-v2.css";
+export interface DividerV2Props extends ComponentProps<"div"> {
+}
+export declare function DividerV2(props: DividerV2Props): import("solid-js").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opencode-ai/ui",
-  "version": "0.0.0-dev-202606261234",
+  "version": "0.0.0-dev-202606261324",
   "type": "module",
   "license": "MIT",
   "repository": {

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

@@ -89,6 +89,30 @@
   cursor: not-allowed;
 }
 
+/* Danger */
+[data-component="button-v2"][data-variant="danger"] {
+  background-color: var(--v2-background-bg-button-neutral);
+  color: var(--v2-state-fg-danger);
+  box-shadow: var(--v2-elevation-button-neutral);
+}
+
+[data-component="button-v2"][data-variant="danger"]: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="danger"]: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="danger"]:is(:disabled, [data-state="disabled"]) {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
 /* Contrast */
 [data-component="button-v2"][data-variant="contrast"] {
   background-image:

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

@@ -7,7 +7,7 @@ export interface ButtonV2Props
   extends ComponentProps<typeof Kobalte>,
     Pick<ComponentProps<"button">, "class" | "classList" | "children"> {
   size?: "small" | "normal" | "large"
-  variant?: "neutral" | "contrast" | "ghost" | "ghost-muted"
+  variant?: "neutral" | "danger" | "contrast" | "ghost" | "ghost-muted"
   icon?: IconProps["name"]
 }
 

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

@@ -49,34 +49,51 @@
         display: flex;
         flex-direction: row;
         align-items: flex-start;
+        align-self: stretch;
+        width: 100%;
+        gap: 0;
         padding: 16px;
-        gap: 8px;
         flex-shrink: 0;
-        align-self: stretch;
+
+        [data-slot="dialog-header-title"] {
+          margin: 0;
+          flex: 1;
+          min-width: 0;
+          font-weight: 530;
+          font-size: 13px;
+          line-height: 16px;
+          letter-spacing: -0.04px;
+          color: var(--v2-text-text-base);
+          font-variation-settings: "slnt" 0;
+        }
 
         [data-slot="dialog-title-group"] {
           display: flex;
           flex-direction: column;
           align-items: flex-start;
-          gap: 8px;
+          gap: 4px;
           flex: 1;
           min-width: 0;
         }
 
         [data-slot="dialog-title"] {
           margin: 0;
+          flex: none;
+          flex-grow: 0;
           font-weight: 530;
           font-size: 15px;
-          line-height: 100%;
+          line-height: 20px;
           letter-spacing: -0.13px;
           color: var(--v2-text-text-base);
           font-variation-settings: "slnt" 0;
         }
 
         [data-slot="dialog-description"] {
+          flex: none;
+          flex-grow: 0;
           font-weight: 440;
           font-size: 13px;
-          line-height: 100%;
+          line-height: 20px;
           letter-spacing: -0.04px;
           color: var(--v2-text-text-muted);
           font-variation-settings: "slnt" 0;
@@ -86,8 +103,11 @@
           display: flex;
           justify-content: center;
           align-items: center;
-          width: 24px;
-          height: 24px;
+          width: 20px;
+          height: 20px;
+          margin-top: -2px;
+          margin-right: -2px;
+          margin-left: auto;
           border-radius: 4px;
           flex-shrink: 0;
           cursor: pointer;
@@ -97,6 +117,10 @@
             background: var(--v2-overlay-simple-overlay-hover);
           }
         }
+
+        &[data-hide-close] [data-slot="dialog-close-button"] {
+          display: none;
+        }
       }
 
       [data-slot="dialog-footer"] {

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

@@ -3,9 +3,6 @@ import { type ComponentProps, type JSXElement, type ParentProps, Show, children,
 import "./dialog-v2.css"
 
 export interface DialogProps extends ParentProps {
-  title?: JSXElement
-  description?: JSXElement
-  action?: JSXElement
   size?: "normal" | "large" | "x-large"
   variant?: "default" | "settings"
   class?: ComponentProps<"div">["class"]
@@ -13,26 +10,76 @@ export interface DialogProps extends ParentProps {
   fit?: boolean
 }
 
+export interface DialogHeaderProps extends ParentProps {
+  closeLabel?: string
+  hideClose?: boolean
+}
+
+export interface DialogTitleGroupProps {
+  title?: JSXElement
+  description: JSXElement
+}
+
 export function DialogFooter(props: ParentProps) {
   return <div data-slot="dialog-footer">{props.children}</div>
 }
 
+export function DialogBody(props: ParentProps & { class?: ComponentProps<"div">["class"] }) {
+  const [local] = splitProps(props, ["class", "children"])
+  return (
+    <div data-slot="dialog-body" class={local.class}>
+      {local.children}
+    </div>
+  )
+}
+
+export function DialogTitle(props: ParentProps) {
+  return <Kobalte.Title data-slot="dialog-header-title">{props.children}</Kobalte.Title>
+}
+
+export function DialogTitleGroup(props: DialogTitleGroupProps) {
+  const title = children(() => props.title)
+  const description = children(() => props.description)
+
+  return (
+    <div data-slot="dialog-title-group">
+      <Show when={title()}>{(t) => <Kobalte.Title data-slot="dialog-title">{t()}</Kobalte.Title>}</Show>
+      <Kobalte.Description data-slot="dialog-description">{description()}</Kobalte.Description>
+    </div>
+  )
+}
+
+export function DialogHeader(props: DialogHeaderProps) {
+  const [local] = splitProps(props, ["closeLabel", "hideClose", "children"])
+  const hideClose = () => local.hideClose === true
+
+  return (
+    <div data-slot="dialog-header" data-hide-close={hideClose() ? "" : undefined}>
+      {local.children}
+      {!hideClose() && (
+        <Kobalte.CloseButton data-slot="dialog-close-button" aria-label={local.closeLabel ?? "Close"}>
+          <svg
+            width="16"
+            height="16"
+            viewBox="0 0 16 16"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            aria-hidden="true"
+          >
+            <path
+              d="M12.4446 3.55469L3.55566 12.4436M3.55566 3.55469L12.4446 12.4436"
+              stroke="currentColor"
+              stroke-linejoin="round"
+            />
+          </svg>
+        </Kobalte.CloseButton>
+      )}
+    </div>
+  )
+}
+
 export function Dialog(props: DialogProps) {
-  const [local] = splitProps(props, [
-    "title",
-    "description",
-    "action",
-    "size",
-    "variant",
-    "class",
-    "classList",
-    "fit",
-    "children",
-  ])
-  const title = children(() => local.title)
-  const description = children(() => local.description)
-  const action = children(() => local.action)
-  const hasHeader = () => title() || action()
+  const [local] = splitProps(props, ["size", "variant", "class", "classList", "fit", "children"])
 
   return (
     <div
@@ -44,7 +91,6 @@ export function Dialog(props: DialogProps) {
       <div data-slot="dialog-container">
         <Kobalte.Content
           data-slot="dialog-content"
-          data-no-header={!hasHeader() ? "" : undefined}
           classList={{
             ...local.classList,
             [local.class ?? ""]: !!local.class,
@@ -58,34 +104,7 @@ export function Dialog(props: DialogProps) {
             }
           }}
         >
-          <Show when={hasHeader()}>
-            <div data-slot="dialog-header">
-              <div data-slot="dialog-title-group">
-                <Show when={title()}>{(t) => <Kobalte.Title data-slot="dialog-title">{t()}</Kobalte.Title>}</Show>
-                <Show when={description()}>
-                  {(d) => <Kobalte.Description data-slot="dialog-description">{d()}</Kobalte.Description>}
-                </Show>
-              </div>
-              <Show when={action()}>{(a) => a()}</Show>
-              <Kobalte.CloseButton data-slot="dialog-close-button" aria-label="Close">
-                <svg
-                  width="16"
-                  height="16"
-                  viewBox="0 0 16 16"
-                  fill="none"
-                  xmlns="http://www.w3.org/2000/svg"
-                  aria-hidden="true"
-                >
-                  <path
-                    d="M12.4446 3.55469L3.55566 12.4436M3.55566 3.55469L12.4446 12.4436"
-                    stroke="currentColor"
-                    stroke-linejoin="round"
-                  />
-                </svg>
-              </Kobalte.CloseButton>
-            </div>
-          </Show>
-          <div data-slot="dialog-body">{local.children}</div>
+          {local.children}
         </Kobalte.Content>
       </div>
     </div>

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

@@ -0,0 +1,11 @@
+[data-component="divider-v2"] {
+  box-sizing: border-box;
+  width: 100%;
+  height: 0.5px;
+  margin-block: 0.25px;
+  border: none;
+  background: var(--v2-border-border-strong);
+  flex: none;
+  align-self: stretch;
+  flex-grow: 0;
+}

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

@@ -0,0 +1,20 @@
+import { type ComponentProps, splitProps } from "solid-js"
+import "./divider-v2.css"
+
+export interface DividerV2Props extends ComponentProps<"div"> {}
+
+export function DividerV2(props: DividerV2Props) {
+  const [local, rest] = splitProps(props, ["class", "classList"])
+  return (
+    <div
+      {...rest}
+      role="separator"
+      aria-orientation="horizontal"
+      data-component="divider-v2"
+      classList={{
+        ...local.classList,
+        [local.class ?? ""]: !!local.class,
+      }}
+    />
+  )
+}