@zentauri-ui/zentauri-components 1.8.0 → 1.8.1

package/src/ui/kbd/animated/kbd-animated.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import { motion } from "framer-motion";
+
+import { KbdBase } from "../kbd-base";
+import type { KbdBaseProps } from "../types";
+
+import { kbdAnimationPresets } from "./animations";
+import type { KbdAnimatedProps } from "./types";
+
+export function KbdAnimated({ animation = "none", ...props }: KbdAnimatedProps) {
+  const motionProps = kbdAnimationPresets[animation];
+
+  return (
+    <KbdBase
+      {...({
+        as: motion.span,
+        initial: animation === "none" ? false : undefined,
+        ...motionProps,
+        ...props,
+      } as KbdBaseProps)}
+    />
+  );
+}
+
+KbdAnimated.displayName = "KbdAnimated";

package/src/ui/kbd/animated/types.ts

@@ -0,0 +1,16 @@
+import type { HTMLMotionProps } from "framer-motion";
+
+import type { KbdBaseProps } from "../types";
+
+export type KbdAnimation = "none" | "press" | "pop";
+
+export type KbdAnimatedProps = Omit<KbdBaseProps, "as"> & {
+  animation?: KbdAnimation;
+};
+
+type KbdPresetMotionProps = Pick<
+  HTMLMotionProps<"span">,
+  "transition" | "whileHover" | "whileTap" | "animate" | "initial"
+>;
+
+export type KbdAnimationPresets = Record<KbdAnimation, KbdPresetMotionProps>;

package/src/ui/kbd/index.ts

@@ -0,0 +1,5 @@
+"use client";
+
+export { Kbd } from "./kbd";
+export type { KbdBaseProps, KbdProps, KbdVariantProps } from "./types";
+export { kbdKeyVariants, kbdSeparatorVariants } from "./variants";

package/src/ui/kbd/kbd-base.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import { Fragment } from "react";
+
+import { zuiKbdBase } from "../../design-system/kbd";
+import { cn } from "../../lib/utils";
+
+import type { KbdBaseProps } from "./types";
+import { kbdKeyVariants, kbdSeparatorVariants } from "./variants";
+
+export function KbdBase({
+  keys,
+  separator,
+  appearance,
+  size,
+  children,
+  className,
+  as: Wrapper = "span",
+  ref,
+  ...rest
+}: KbdBaseProps) {
+  const items = keys ?? (children != null ? [children] : []);
+
+  return (
+    <Wrapper
+      ref={ref}
+      data-slot="kbd"
+      className={cn(zuiKbdBase, className)}
+      {...rest}
+    >
+      {items.map((key, index) => (
+        <Fragment key={index}>
+          {index > 0 && separator != null ? (
+            <span data-slot="kbd-separator" className={kbdSeparatorVariants({ size })}>
+              {separator}
+            </span>
+          ) : null}
+          <kbd
+            data-slot="kbd-key"
+            className={kbdKeyVariants({ appearance, size })}
+          >
+            {key}
+          </kbd>
+        </Fragment>
+      ))}
+    </Wrapper>
+  );
+}
+
+KbdBase.displayName = "Kbd";

package/src/ui/kbd/kbd.test.tsx

@@ -0,0 +1,48 @@
+import { createRef } from "react";
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import { Kbd } from "./kbd";
+
+describe("Kbd", () => {
+  it("should expose displayName", () => {
+    expect(Kbd.displayName).toBe("Kbd");
+  });
+
+  it("should stamp data-slot on the wrapper", () => {
+    render(<Kbd keys={["⌘", "K"]} />);
+    expect(document.querySelector('[data-slot="kbd"]')).toBeInTheDocument();
+  });
+
+  it("should render one keycap per key", () => {
+    render(<Kbd keys={["Ctrl", "Shift", "P"]} />);
+    expect(document.querySelectorAll('[data-slot="kbd-key"]')).toHaveLength(3);
+  });
+
+  it("should render children as a single keycap", () => {
+    render(<Kbd>Esc</Kbd>);
+    expect(document.querySelectorAll('[data-slot="kbd-key"]')).toHaveLength(1);
+    expect(screen.getByText("Esc")).toBeInTheDocument();
+  });
+
+  it("should render separators between keys", () => {
+    render(<Kbd keys={["⌘", "K"]} separator="+" />);
+    expect(
+      document.querySelectorAll('[data-slot="kbd-separator"]'),
+    ).toHaveLength(1);
+  });
+
+  it("should apply the appearance token", () => {
+    render(<Kbd keys={["A"]} appearance="emerald" />);
+    const key = document.querySelector(
+      '[data-slot="kbd-key"]',
+    ) as HTMLElement;
+    expect(key.className).toMatch(/--zui-kbd-emerald-bg/);
+  });
+
+  it("should forward ref", () => {
+    const ref = createRef<HTMLSpanElement>();
+    render(<Kbd ref={ref} keys={["A"]} />);
+    expect(ref.current?.getAttribute("data-slot")).toBe("kbd");
+  });
+});

package/src/ui/kbd/kbd.tsx

@@ -0,0 +1,9 @@
+// kbd.tsx — default static entry (no framer-motion)
+import { KbdBase } from "./kbd-base";
+import type { KbdProps } from "./types";
+
+export function Kbd(props: KbdProps) {
+  return <KbdBase {...props} />;
+}
+
+Kbd.displayName = "Kbd";

package/src/ui/kbd/types.ts

@@ -0,0 +1,21 @@
+import type { VariantProps } from "class-variance-authority";
+import type { ComponentPropsWithRef, ElementType, ReactNode } from "react";
+
+import type { kbdKeyVariants } from "./variants";
+
+export type KbdVariantProps = VariantProps<typeof kbdKeyVariants>;
+
+export interface KbdBaseProps
+  extends Omit<ComponentPropsWithRef<"span">, "children"> {
+  /** Keys to render as individual keycaps, e.g. `["⌘", "K"]`. Takes precedence over `children`. */
+  keys?: ReactNode[];
+  /** Optional node rendered between keycaps (e.g. "+" or "then"). */
+  separator?: ReactNode;
+  appearance?: KbdVariantProps["appearance"];
+  size?: KbdVariantProps["size"];
+  /** Single keycap content when `keys` is not provided. */
+  children?: ReactNode;
+  as?: ElementType;
+}
+
+export type KbdProps = Omit<KbdBaseProps, "as">;

package/src/ui/kbd/variants.ts

@@ -0,0 +1,31 @@
+import { cva } from "class-variance-authority";
+
+import {
+  zuiKbdKeyAppearances,
+  zuiKbdKeyBase,
+  zuiKbdKeySizes,
+  zuiKbdSeparatorSizes,
+} from "../../design-system/kbd";
+
+export const kbdKeyVariants = cva(zuiKbdKeyBase, {
+  variants: {
+    appearance: zuiKbdKeyAppearances,
+    size: zuiKbdKeySizes,
+  },
+  defaultVariants: {
+    appearance: "outline",
+    size: "md",
+  },
+});
+
+export const kbdSeparatorVariants = cva(
+  "text-[color:var(--zui-kbd-separator-fg,#94a3b8)] dark:text-[color:var(--zui-kbd-separator-fg-dark,#64748b)]",
+  {
+    variants: {
+      size: zuiKbdSeparatorSizes,
+    },
+    defaultVariants: {
+      size: "md",
+    },
+  },
+);