@neurocode-ai/ui 1.18.8

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

@@ -0,0 +1,177 @@
+/* [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;
+        align-self: stretch;
+        width: 100%;
+        gap: 0;
+        padding: 16px;
+        flex-shrink: 0;
+
+        [data-slot="dialog-header-title"] {
+          margin: 0;
+          flex: 1;
+          min-width: 0;
+          user-select: none;
+          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: 4px;
+          flex: 1;
+          min-width: 0;
+        }
+
+        [data-slot="dialog-title"] {
+          margin: 0;
+          flex: none;
+          flex-grow: 0;
+          user-select: none;
+          font-weight: 530;
+          font-size: 15px;
+          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;
+          user-select: none;
+          font-weight: 440;
+          font-size: 13px;
+          line-height: 20px;
+          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: 20px;
+          height: 20px;
+          margin-top: -2px;
+          margin-right: -2px;
+          margin-left: auto;
+          border-radius: 4px;
+          flex-shrink: 0;
+          cursor: pointer;
+          color: var(--v2-icon-icon-muted);
+
+          &:hover {
+            background: var(--v2-overlay-simple-overlay-hover);
+          }
+        }
+
+        &[data-hide-close] [data-slot="dialog-close-button"] {
+          display: none;
+        }
+      }
+
+      [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);
+  }
+}

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

@@ -0,0 +1,115 @@
+import { Dialog as Kobalte } from "@kobalte/core/dialog"
+import { type ComponentProps, type JSXElement, type ParentProps, Show, children, splitProps } from "solid-js"
+import "./dialog-v2.css"
+
+export interface DialogProps extends ParentProps {
+  size?: "normal" | "large" | "x-large"
+  variant?: "default" | "settings"
+  class?: ComponentProps<"div">["class"]
+  containerClass?: 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 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, ["size", "variant", "class", "containerClass", "classList", "fit", "children"])
+
+  return (
+    <div
+      data-component="dialog-v2"
+      data-variant={local.variant === "settings" ? "settings" : undefined}
+      data-fit={local.fit ? true : undefined}
+      data-size={local.size || "normal"}
+    >
+      <div data-slot="dialog-container" class={local.containerClass}>
+        <Kobalte.Content
+          data-slot="dialog-content"
+          classList={{
+            ...local.classList,
+            [local.class ?? ""]: !!local.class,
+          }}
+          onOpenAutoFocus={(e) => {
+            const target = e.currentTarget as HTMLElement | null
+            const autofocusEl = target?.querySelector("[autofocus]") as HTMLElement | null
+            if (autofocusEl) {
+              e.preventDefault()
+              autofocusEl.focus({ preventScroll: true })
+            }
+          }}
+        >
+          {local.children}
+        </Kobalte.Content>
+      </div>
+    </div>
+  )
+}
+
+export const DialogV2 = Dialog

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

@@ -0,0 +1,24 @@
+[data-component="diff-changes"] {
+  display: flex;
+  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/diff-changes-v2.tsx

@@ -0,0 +1,28 @@
+import { createMemo, Show } from "solid-js"
+import "./diff-changes-v2.css"
+
+export function DiffChanges(props: {
+  class?: string
+  changes: { additions: number; deletions: number } | { additions: number; deletions: number }[]
+}) {
+  const additions = createMemo(() =>
+    Array.isArray(props.changes)
+      ? props.changes.reduce((acc, diff) => acc + (diff.additions ?? 0), 0)
+      : props.changes.additions,
+  )
+  const deletions = createMemo(() =>
+    Array.isArray(props.changes)
+      ? props.changes.reduce((acc, diff) => acc + (diff.deletions ?? 0), 0)
+      : props.changes.deletions,
+  )
+  const total = createMemo(() => (additions() ?? 0) + (deletions() ?? 0))
+
+  return (
+    <Show when={total() > 0}>
+      <div data-component="diff-changes" classList={{ [props.class ?? ""]: true }}>
+        <span data-slot="diff-changes-additions">{`+${additions()}`}</span>
+        <span data-slot="diff-changes-deletions">{`-${deletions()}`}</span>
+      </div>
+    </Show>
+  )
+}

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

@@ -0,0 +1,11 @@
+[data-component="divider-v2"] {
+  box-sizing: border-box;
+  width: 100%;
+  height: 1px;
+  transform: scaleY(0.5);
+  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,
+      }}
+    />
+  )
+}

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

@@ -0,0 +1,94 @@
+[data-component="field-v2"] {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
+  width: 100%;
+  min-width: 0;
+}
+
+[data-component="field-v2"] [data-slot="field-v2-label"] {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  align-self: stretch;
+  gap: 4px;
+  min-height: 16px;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-style: normal;
+  font-weight: 530;
+  font-size: 13px;
+  line-height: 1;
+  letter-spacing: -0.04px;
+  color: var(--v2-text-text-base);
+  font-variation-settings: "slnt" 0;
+  cursor: default;
+  user-select: none;
+}
+
+[data-component="field-v2"] [data-slot="field-v2-label-text"] {
+  display: inline-flex;
+  align-items: center;
+}
+
+[data-component="field-v2"] [data-slot="field-v2-label"] [data-component="tooltip-v2-trigger"] {
+  display: inline-flex;
+  flex: none;
+  width: 16px;
+  height: 16px;
+}
+
+[data-component="field-v2"] [data-slot="field-v2-label-info"] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  width: 16px;
+  height: 16px;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  color: var(--v2-icon-icon-muted);
+  cursor: pointer;
+  outline: none;
+}
+
+[data-component="field-v2"] [data-slot="field-v2-label-info"]:is(:hover, [data-state="hover"]) {
+  color: var(--v2-text-text-base);
+}
+
+[data-component="field-v2"] [data-slot="field-v2-label-info"]:focus {
+  outline: none;
+}
+
+[data-component="field-v2"] [data-slot="field-v2-label-info"]:focus-visible {
+  outline: 2px solid var(--v2-border-border-focus);
+  outline-offset: 1px;
+  border-radius: 2px;
+}
+
+[data-component="field-v2"] [data-slot="field-v2-prefix"],
+[data-component="field-v2"] [data-slot="field-v2-suffix"] {
+  align-self: stretch;
+  width: 100%;
+  min-height: 11px;
+  font-style: normal;
+  font-weight: 440;
+  font-size: 11px;
+  line-height: 1;
+  letter-spacing: 0.05px;
+  color: var(--v2-text-text-muted);
+  font-variation-settings: "slnt" 0;
+  user-select: none;
+}
+
+[data-component="field-v2"] [data-slot="field-v2-control"] {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  width: 100%;
+  min-width: 0;
+}