@zentauri-ui/zentauri-components 2.1.7 → 2.1.9

package/src/design-system/code-diff.ts

@@ -0,0 +1,37 @@
+export const zuiCodeDiffBase = [
+  "relative overflow-auto rounded-lg border border-[color:var(--zui-code-diff-border,var(--zui-border,#0000001a))] dark:border-[color:var(--zui-code-diff-border-dark,var(--zui-border-dark,#ffffff1a))]",
+  "bg-[var(--zui-code-diff-bg,var(--zui-surface,oklch(98.4%_0.003_247.858)))] dark:bg-[var(--zui-code-diff-bg-dark,var(--zui-surface-dark,oklch(12.9%_0.042_264.695)))]",
+  "text-[color:var(--zui-code-diff-fg,var(--zui-fg,oklch(20.8%_0.042_265.755)))] dark:text-[color:var(--zui-code-diff-fg-dark,var(--zui-fg-dark,oklch(98.4%_0.003_247.858)))]",
+] as const;
+
+export const zuiCodeDiffSizes = {
+  sm: "text-xs leading-5",
+  md: "text-sm leading-6",
+  lg: "text-base leading-7",
+} as const;
+
+export const zuiCodeDiffHeaderBase =
+  "sticky top-0 z-10 flex items-center justify-between border-b border-[color:var(--zui-code-diff-border,var(--zui-border,#0000001a))] dark:border-[color:var(--zui-code-diff-border-dark,var(--zui-border-dark,#ffffff1a))] bg-[var(--zui-code-diff-header-bg,var(--zui-surface-muted,oklch(92.9%_0.013_255.508)))] dark:bg-[var(--zui-code-diff-header-bg-dark,var(--zui-surface-muted-dark,oklch(27.9%_0.041_260.031)))] px-4 py-2";
+
+export const zuiCodeDiffTableBase = "w-full border-collapse table-fixed";
+
+export const zuiCodeDiffLineNumberBase =
+  "select-none text-right align-top whitespace-nowrap border-r border-[color:var(--zui-code-diff-border,var(--zui-border,#0000001a))] dark:border-[color:var(--zui-code-diff-border-dark,var(--zui-border-dark,#ffffff1a))] px-3 text-[color:var(--zui-code-diff-line-number-fg,var(--zui-fg-muted,oklch(55.2%_0.046_257.417)))] dark:text-[color:var(--zui-code-diff-line-number-fg-dark,var(--zui-fg-muted-dark,oklch(70.8%_0.015_256.243)))]";
+
+export const zuiCodeDiffLineContentBase =
+  "whitespace-pre-wrap break-all px-4 align-top";
+
+export const zuiCodeDiffLineAdded =
+  "bg-[var(--zui-code-diff-added-bg,oklch(92.8%_0.109_150.96))] dark:bg-[var(--zui-code-diff-added-bg-dark,oklch(26.8%_0.077_146.44))] text-[color:var(--zui-code-diff-added-fg,oklch(29.1%_0.065_148.99))] dark:text-[color:var(--zui-code-diff-added-fg-dark,oklch(74%_0.131_149.02))]";
+
+export const zuiCodeDiffLineRemoved =
+  "bg-[var(--zui-code-diff-removed-bg,oklch(93.1%_0.08_22.4))] dark:bg-[var(--zui-code-diff-removed-bg-dark,oklch(26.9%_0.07_22.54))] text-[color:var(--zui-code-diff-removed-fg,oklch(30.7%_0.06_28.07))] dark:text-[color:var(--zui-code-diff-removed-fg-dark,oklch(74.2%_0.127_24.75))]";
+
+export const zuiCodeDiffLineUnchanged = "";
+
+export const zuiCodeDiffGutterMarker =
+  "inline-block w-4 text-center select-none";
+
+export const zuiCodeDiffAppearances = {
+  default: "",
+} as const;

package/src/design-system/index.ts

@@ -7,6 +7,7 @@ export * from "./badge";
 export * from "./breadcrumb";
 export * from "./button";
 export * from "./card";
+export * from "./code-diff";
 export * from "./checkbox";
 export * from "./combobox";
 export * from "./command";
@@ -32,6 +33,7 @@ export * from "./radio-group";
 export * from "./scroll-area";
 export * from "./select";
 export * from "./skeleton";
+export * from "./split-button";
 export * from "./slider";
 export * from "./spinner";
 export * from "./table";

package/src/design-system/split-button.ts

@@ -0,0 +1,38 @@
+export const zuiSplitButtonRoot =
+  "inline-flex align-middle data-[full-width=true]:w-full";
+
+export const zuiSplitButtonFullWidth = "w-full";
+
+export const zuiSplitButtonDropdown =
+  "data-[full-width=true]:block data-[full-width=true]:w-full";
+
+export const zuiSplitButtonGroup =
+  "inline-flex items-stretch data-[full-width=true]:w-full";
+
+export const zuiSplitButtonPrimary =
+  "rounded-r-none data-[full-width=true]:min-w-0 data-[full-width=true]:flex-1";
+
+export const zuiSplitButtonTrigger =
+  "rounded-l-none border-l border-[color:var(--zui-split-button-separator,var(--zui-border,#ffffff33))] dark:border-[color:var(--zui-split-button-separator-dark,var(--zui-border-dark,#00000033))] px-2.5";
+
+export const zuiSplitButtonTriggerSizes = {
+  sm: "min-w-8 px-2",
+  md: "min-w-10 px-2.5",
+  lg: "min-w-11 px-3",
+  xl: "min-w-12 px-3.5",
+  "2xl": "min-w-14 px-4",
+  "3xl": "min-w-16 px-4",
+  "4xl": "min-w-18 px-5",
+  "5xl": "min-w-20 px-5",
+  "6xl": "min-w-22 px-6",
+  "7xl": "min-w-24 px-6",
+  "8xl": "min-w-26 px-7",
+  "9xl": "min-w-28 px-7",
+  "10xl": "min-w-30 px-8",
+  icon: "min-w-10 px-0",
+} as const;
+
+export const zuiSplitButtonContent =
+  "min-w-[var(--zui-split-button-menu-min-width,12rem)]";
+
+export const zuiSplitButtonItemDisabled = "pointer-events-none opacity-50";

package/src/ui/code-diff/code-diff-base.tsx

@@ -0,0 +1,284 @@
+"use client";
+
+import { diffLines } from "diff";
+import { useMemo } from "react";
+
+import { cn } from "../../lib/utils";
+
+import type { CodeDiffBaseProps, DiffLine } from "./types";
+import {
+  codeDiffLineContentVariants,
+  codeDiffLineNumberVariants,
+  codeDiffVariants,
+} from "./variants";
+
+function computeDiff(oldCode: string, newCode: string): DiffLine[] {
+  const changes = diffLines(oldCode, newCode);
+  const lines: DiffLine[] = [];
+  let oldLineNum = 1;
+  let newLineNum = 1;
+
+  for (const change of changes) {
+    const changeLines = change.value.replace(/\n$/, "").split("\n");
+    for (const content of changeLines) {
+      if (change.added) {
+        lines.push({
+          type: "added",
+          content,
+          oldLineNumber: null,
+          newLineNumber: newLineNum++,
+        });
+      } else if (change.removed) {
+        lines.push({
+          type: "removed",
+          content,
+          oldLineNumber: oldLineNum++,
+          newLineNumber: null,
+        });
+      } else {
+        lines.push({
+          type: "unchanged",
+          content,
+          oldLineNumber: oldLineNum++,
+          newLineNumber: newLineNum++,
+        });
+      }
+    }
+  }
+  return lines;
+}
+
+interface SplitRow {
+  oldLine: DiffLine | null;
+  newLine: DiffLine | null;
+}
+
+function toSplitRows(lines: DiffLine[]): SplitRow[] {
+  const rows: SplitRow[] = [];
+  let i = 0;
+
+  while (i < lines.length) {
+    const current = lines[i]!;
+
+    if (current.type === "unchanged") {
+      rows.push({ oldLine: current, newLine: current });
+      i++;
+    } else if (current.type === "removed") {
+      const removedBlock: DiffLine[] = [];
+      while (i < lines.length && lines[i]!.type === "removed") {
+        removedBlock.push(lines[i]!);
+        i++;
+      }
+      const addedBlock: DiffLine[] = [];
+      while (i < lines.length && lines[i]!.type === "added") {
+        addedBlock.push(lines[i]!);
+        i++;
+      }
+      const maxLen = Math.max(removedBlock.length, addedBlock.length);
+      for (let j = 0; j < maxLen; j++) {
+        rows.push({
+          oldLine: j < removedBlock.length ? removedBlock[j]! : null,
+          newLine: j < addedBlock.length ? addedBlock[j]! : null,
+        });
+      }
+    } else if (current.type === "added") {
+      const addedBlock: DiffLine[] = [];
+      while (i < lines.length && lines[i]!.type === "added") {
+        addedBlock.push(lines[i]!);
+        i++;
+      }
+      for (const added of addedBlock) {
+        rows.push({ oldLine: null, newLine: added });
+      }
+    } else {
+      i++;
+    }
+  }
+  return rows;
+}
+
+function LineNumberCell({
+  lineNumber,
+  type,
+  showLineNumbers,
+}: {
+  lineNumber: number | null;
+  type: DiffLine["type"];
+  showLineNumbers: boolean;
+}) {
+  return (
+    <td
+      className={codeDiffLineNumberVariants({ type })}
+      style={{ width: showLineNumbers ? "4.5rem" : "2rem" }}
+    >
+      {showLineNumbers && lineNumber !== null ? lineNumber : ""}
+    </td>
+  );
+}
+
+function LineContentCell({
+  line,
+  type,
+  showGutterMarkers,
+}: {
+  line: string;
+  type: DiffLine["type"];
+  showGutterMarkers: boolean;
+}) {
+  return (
+    <td className={codeDiffLineContentVariants({ type })}>
+      {showGutterMarkers ? (
+        <span className="inline-block w-4 select-none text-center">
+          {type === "added" ? "+" : type === "removed" ? "-" : " "}
+        </span>
+      ) : null}
+      <span>{line || " "}</span>
+    </td>
+  );
+}
+
+function UnifiedView({
+  lines,
+  showLineNumbers,
+  showGutterMarkers,
+}: {
+  lines: DiffLine[];
+  showLineNumbers: boolean;
+  showGutterMarkers: boolean;
+}) {
+  return (
+    <table className="w-full border-collapse table-fixed">
+      <tbody>
+        {lines.map((line, idx) => (
+          <tr key={idx}>
+            <LineNumberCell
+              lineNumber={line.oldLineNumber}
+              type={line.type}
+              showLineNumbers={showLineNumbers}
+            />
+            <LineNumberCell
+              lineNumber={line.newLineNumber}
+              type={line.type}
+              showLineNumbers={showLineNumbers}
+            />
+            <LineContentCell
+              line={line.content}
+              type={line.type}
+              showGutterMarkers={showGutterMarkers}
+            />
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+}
+
+function SplitView({
+  lines,
+  showLineNumbers,
+  showGutterMarkers,
+}: {
+  lines: DiffLine[];
+  showLineNumbers: boolean;
+  showGutterMarkers: boolean;
+}) {
+  const rows = toSplitRows(lines);
+
+  return (
+    <table className="w-full border-collapse table-fixed">
+      <colgroup>
+        <col style={{ width: showLineNumbers ? "4.5rem" : "2rem" }} />
+        <col />
+        <col style={{ width: showLineNumbers ? "4.5rem" : "2rem" }} />
+        <col />
+      </colgroup>
+      <tbody>
+        {rows.map((row, idx) => (
+          <tr key={idx}>
+            <LineNumberCell
+              lineNumber={row.oldLine?.oldLineNumber ?? null}
+              type={row.oldLine?.type ?? "unchanged"}
+              showLineNumbers={showLineNumbers}
+            />
+            <LineContentCell
+              line={row.oldLine?.content ?? ""}
+              type={row.oldLine?.type ?? "unchanged"}
+              showGutterMarkers={showGutterMarkers}
+            />
+            <LineNumberCell
+              lineNumber={row.newLine?.newLineNumber ?? null}
+              type={row.newLine?.type ?? "unchanged"}
+              showLineNumbers={showLineNumbers}
+            />
+            <LineContentCell
+              line={row.newLine?.content ?? ""}
+              type={row.newLine?.type ?? "unchanged"}
+              showGutterMarkers={showGutterMarkers}
+            />
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+}
+
+export function CodeDiffBase({
+  className,
+  appearance,
+  size,
+  oldCode,
+  newCode,
+  viewType = "unified",
+  showLineNumbers = true,
+  showGutterMarkers = true,
+  oldTitle = "Old",
+  newTitle = "New",
+  ref,
+  as: Wrapper = "div",
+  ...rest
+}: CodeDiffBaseProps) {
+  const lines = useMemo(
+    () => computeDiff(oldCode ?? "", newCode ?? ""),
+    [oldCode, newCode],
+  );
+  const hasChanges = lines.some(
+    (l) => l.type === "added" || l.type === "removed",
+  );
+
+  return (
+    <Wrapper
+      ref={ref}
+      data-slot="code-diff"
+      className={cn(codeDiffVariants({ appearance, size }), className)}
+      {...rest}
+    >
+      {hasChanges ? (
+        <div className="sticky top-0 flex items-center justify-between border-b border-[color:var(--zui-code-diff-border,var(--zui-border,#0000001a))] dark:border-[color:var(--zui-code-diff-border-dark,var(--zui-border-dark,#ffffff1a))] bg-[var(--zui-code-diff-header-bg,var(--zui-surface-muted,oklch(92.9%_0.013_255.508)))] dark:bg-[var(--zui-code-diff-header-bg-dark,var(--zui-surface-muted-dark,oklch(27.9%_0.041_260.031)))] px-4 py-2">
+          <span className="text-xs font-medium">
+            {lines.filter((l) => l.type === "added").length} additions{" "}
+            <span className="mx-1">&bull;</span>{" "}
+            {lines.filter((l) => l.type === "removed").length} deletions
+          </span>
+          <span className="text-xs text-[color:var(--zui-code-diff-header-fg,var(--zui-fg-muted,oklch(55.2%_0.046_257.417)))] dark:text-[color:var(--zui-code-diff-header-fg-dark,var(--zui-fg-muted-dark,oklch(70.8%_0.015_256.243)))]">
+            {oldTitle} &rarr; {newTitle}
+          </span>
+        </div>
+      ) : null}
+      {viewType === "split" ? (
+        <SplitView
+          lines={lines}
+          showLineNumbers={showLineNumbers}
+          showGutterMarkers={showGutterMarkers}
+        />
+      ) : (
+        <UnifiedView
+          lines={lines}
+          showLineNumbers={showLineNumbers}
+          showGutterMarkers={showGutterMarkers}
+        />
+      )}
+    </Wrapper>
+  );
+}
+
+CodeDiffBase.displayName = "CodeDiff";

package/src/ui/code-diff/code-diff.test.tsx

@@ -0,0 +1,50 @@
+import { createRef } from "react";
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import { CodeDiff } from "./code-diff";
+
+const oldCode = "line one\nline two\nline three";
+const newCode = "line one\nline two modified\nline three\nline four";
+
+describe("CodeDiff", () => {
+  it("should expose displayName", () => {
+    expect(CodeDiff.displayName).toBe("CodeDiff");
+  });
+
+  it("should stamp data-slot", () => {
+    render(<CodeDiff oldCode={oldCode} newCode={newCode} />);
+    const root = document.querySelector('[data-slot="code-diff"]');
+    expect(root).toBeTruthy();
+    expect(root?.getAttribute("data-slot")).toBe("code-diff");
+  });
+
+  it("should render diff lines", () => {
+    render(<CodeDiff oldCode={oldCode} newCode={newCode} />);
+    expect(screen.getByText("line one")).toBeInTheDocument();
+    expect(screen.getByText("line two modified")).toBeInTheDocument();
+    expect(screen.getByText("line four")).toBeInTheDocument();
+  });
+
+  it("should show additions and deletions count", () => {
+    render(<CodeDiff oldCode={oldCode} newCode={newCode} />);
+    expect(screen.getByText(/additions/)).toBeInTheDocument();
+    expect(screen.getByText(/deletions/)).toBeInTheDocument();
+  });
+
+  it("should render unchanged code when no changes", () => {
+    render(<CodeDiff oldCode="same" newCode="same" />);
+    expect(screen.getByText("same")).toBeInTheDocument();
+  });
+
+  it("should forward ref", () => {
+    const ref = createRef<HTMLDivElement>();
+    render(<CodeDiff ref={ref} oldCode={oldCode} newCode={newCode} />);
+    expect(ref.current?.getAttribute("data-slot")).toBe("code-diff");
+  });
+
+  it("should render in split view", () => {
+    render(<CodeDiff oldCode={oldCode} newCode={newCode} viewType="split" />);
+    expect(screen.getAllByText("line one").length).toBeGreaterThanOrEqual(1);
+  });
+});

package/src/ui/code-diff/code-diff.tsx

@@ -0,0 +1,8 @@
+import { CodeDiffBase } from "./code-diff-base";
+import type { CodeDiffProps } from "./types";
+
+export function CodeDiff(props: CodeDiffProps) {
+  return <CodeDiffBase {...props} />;
+}
+
+CodeDiff.displayName = "CodeDiff";

package/src/ui/code-diff/index.ts

@@ -0,0 +1,15 @@
+"use client";
+
+export { CodeDiff } from "./code-diff";
+export type {
+  CodeDiffBaseProps,
+  CodeDiffProps,
+  CodeDiffVariantProps,
+  CodeDiffViewType,
+  DiffLine,
+} from "./types";
+export {
+  codeDiffLineContentVariants,
+  codeDiffLineNumberVariants,
+  codeDiffVariants,
+} from "./variants";

package/src/ui/code-diff/types.ts

@@ -0,0 +1,31 @@
+import type { VariantProps } from "class-variance-authority";
+import type { ComponentPropsWithRef, ElementType } from "react";
+
+import type { codeDiffVariants } from "./variants";
+
+export type CodeDiffVariantProps = VariantProps<typeof codeDiffVariants>;
+
+export type CodeDiffViewType = "split" | "unified";
+
+export interface CodeDiffBaseProps extends ComponentPropsWithRef<"div"> {
+  oldCode: string;
+  newCode: string;
+  language?: string;
+  viewType?: CodeDiffViewType;
+  showLineNumbers?: boolean;
+  showGutterMarkers?: boolean;
+  oldTitle?: string;
+  newTitle?: string;
+  appearance?: CodeDiffVariantProps["appearance"];
+  size?: CodeDiffVariantProps["size"];
+  as?: ElementType;
+}
+
+export type CodeDiffProps = Omit<CodeDiffBaseProps, "as">;
+
+export interface DiffLine {
+  type: "added" | "removed" | "unchanged";
+  content: string;
+  oldLineNumber: number | null;
+  newLineNumber: number | null;
+}

package/src/ui/code-diff/variants.ts

@@ -0,0 +1,49 @@
+import { cva } from "class-variance-authority";
+
+import {
+  zuiCodeDiffAppearances,
+  zuiCodeDiffBase,
+  zuiCodeDiffLineAdded,
+  zuiCodeDiffLineContentBase,
+  zuiCodeDiffLineNumberBase,
+  zuiCodeDiffLineRemoved,
+  zuiCodeDiffLineUnchanged,
+  zuiCodeDiffSizes,
+} from "../../design-system/code-diff";
+
+export const codeDiffVariants = cva(zuiCodeDiffBase, {
+  variants: {
+    appearance: zuiCodeDiffAppearances,
+    size: zuiCodeDiffSizes,
+  },
+  defaultVariants: {
+    appearance: "default",
+    size: "md",
+  },
+});
+
+export const codeDiffLineNumberVariants = cva(zuiCodeDiffLineNumberBase, {
+  variants: {
+    type: {
+      added: zuiCodeDiffLineAdded,
+      removed: zuiCodeDiffLineRemoved,
+      unchanged: zuiCodeDiffLineUnchanged,
+    },
+  },
+  defaultVariants: {
+    type: "unchanged",
+  },
+});
+
+export const codeDiffLineContentVariants = cva(zuiCodeDiffLineContentBase, {
+  variants: {
+    type: {
+      added: zuiCodeDiffLineAdded,
+      removed: zuiCodeDiffLineRemoved,
+      unchanged: zuiCodeDiffLineUnchanged,
+    },
+  },
+  defaultVariants: {
+    type: "unchanged",
+  },
+});

package/src/ui/dropdown/dropdown.tsx

@@ -37,10 +37,12 @@ const useDropdown = () => {
 ========================= */
 export const Dropdown = ({
   children,
+  className,
   defaultOpen = false,
   open: controlledOpen,
   onOpenChange,
   multiSelect = false,
+  ...props
 }: DropdownProps) => {
   const menuId = `${useId()}-menu`;
   const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
@@ -82,7 +84,9 @@ export const Dropdown = ({
         menuId,
       }}
     >
-      <div className="relative inline-block">{children}</div>
+      <div className={cn("relative inline-block", className)} {...props}>
+        {children}
+      </div>
     </DropdownContext.Provider>
   );
 };
@@ -180,10 +184,10 @@ export const DropdownItem = ({
   ...props
 }: DropdownItemProps) => {
   const { toggleSelect, selectedValues } = useDropdown();
-  const isSelected = selectedValues.includes(value);
+  const isSelected = value !== undefined && selectedValues.includes(value);
 
   const handleClick = () => {
-    toggleSelect(value);
+    if (value !== undefined) toggleSelect(value);
     onSelect?.();
   };
 

package/src/ui/dropdown/types.ts

@@ -14,7 +14,7 @@ export type DropdownContextType = {
 
 type Variant = keyof typeof zuiDropdownTriggerVariants;
 
-export type DropdownProps = {
+export type DropdownProps = HTMLAttributes<HTMLDivElement> & {
   children: ReactNode;
   defaultOpen?: boolean;
   open?: boolean;
@@ -37,7 +37,7 @@ export type DropdownContentProps = HTMLAttributes<HTMLDivElement> & {
 
 export type DropdownItemProps = HTMLAttributes<HTMLDivElement> & {
   children: ReactNode;
-  value: string;
+  value?: string;
   onSelect?: () => void;
   leftIcon?: ReactNode;
   rightIcon?: ReactNode;

package/src/ui/split-button/index.ts

@@ -0,0 +1,19 @@
+"use client";
+
+export { SplitButton } from "./split-button";
+export type {
+  SplitButtonAppearance,
+  SplitButtonItem,
+  SplitButtonProps,
+  SplitButtonSize,
+  SplitButtonVariant,
+} from "./types";
+export {
+  splitButtonContentVariants,
+  splitButtonDropdownVariants,
+  splitButtonGroupVariants,
+  splitButtonItemDisabledVariants,
+  splitButtonPrimaryVariants,
+  splitButtonRootVariants,
+  splitButtonTriggerVariants,
+} from "./variants";