@elabs-ai/components-ui 4.0.0

package/src/components/input-group/input-group.tsx

@@ -0,0 +1,170 @@
+import { forwardRef, type ComponentProps } from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../../lib/cn";
+import { Button } from "../button";
+import { Input } from "../input";
+import { Textarea } from "../textarea";
+
+export const inputGroupVariants = cva(
+  cn(
+    "group/input-group relative flex w-full flex-wrap items-center rounded-md outline-none transition-[color,box-shadow] duration-fast ease-standard",
+    // Grow to fit a textarea even when it's nested (e.g. wrapped in a
+    // `display:contents` body like PromptInputBody). `:has(>textarea)`
+    // misses through that wrapper, so match any descendant textarea.
+    "h-9 has-[textarea]:h-auto",
+    "has-[[data-slot=input-group-control]:focus-visible]:ring-2 has-[[data-slot=input-group-control]:focus-visible]:ring-ring has-[[data-slot=input-group-control]:focus-visible]:ring-offset-1 has-[[data-slot=input-group-control]:focus-visible]:ring-offset-background",
+    "has-[[data-slot=input-group-control][aria-invalid=true]]:ring-2 has-[[data-slot=input-group-control][aria-invalid=true]]:ring-destructive",
+  ),
+  {
+    variants: {
+      variant: {
+        // The form-field look: the strong `--input` boundary is the field's
+        // sole structural cue, so it stays on the strong rung.
+        outline: "border border-input shadow-sm",
+        // The composer look (#194, research 08 §C.1/§D): a soft fill with the
+        // focus-within ring carrying focus — NO hard border. Separation comes
+        // from the fill (the chat footer already draws its own `border-t`).
+        surface: "bg-surface-muted",
+        // The double-card well (#254): a `bg-card` fill meant to nest inside
+        // an ALREADY-tinted outer frame (e.g. `bg-surface-muted`) — the outer
+        // tint is the redundant/complementary cue, so the well itself needs no
+        // border either. NOT universally "white": `--card`'s lightness
+        // relative to `--surface-muted` is theme-driven, same trade-off as the
+        // `bg-surface-muted`-as-a-well note above — raised (lighter than the
+        // outer frame) on light themes, recessed (darker) on dark and
+        // a low-chroma palette. The well still reads as a distinct, legible tone in every
+        // theme; only the light-themes' "raised" framing is theme-specific.
+        card: "bg-card",
+      },
+    },
+    defaultVariants: { variant: "outline" },
+  },
+);
+
+export type InputGroupProps = ComponentProps<"div"> & VariantProps<typeof inputGroupVariants>;
+
+export const InputGroup = forwardRef<HTMLDivElement, InputGroupProps>(function InputGroup(
+  { className, variant, ...props },
+  ref,
+) {
+  return (
+    <div
+      ref={ref}
+      role="group"
+      data-slot="input-group"
+      className={cn(inputGroupVariants({ variant }), className)}
+      {...props}
+    />
+  );
+});
+
+export const inputGroupAddonVariants = cva(
+  "flex h-auto cursor-text items-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none [&>svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      align: {
+        "inline-start": "order-first ps-3 has-[>button]:ms-[-0.45rem]",
+        "inline-end": "order-last pe-3 has-[>button]:me-[-0.45rem]",
+        "block-start": "order-first w-full justify-start px-3 pt-2.5",
+        "block-end": "order-last w-full justify-start px-3 pt-0 pb-2.5",
+      },
+    },
+    defaultVariants: { align: "inline-start" },
+  },
+);
+
+export const InputGroupAddon = forwardRef<
+  HTMLDivElement,
+  ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>
+>(function InputGroupAddon({ className, align = "inline-start", ...props }, ref) {
+  return (
+    <div
+      ref={ref}
+      role="group"
+      data-slot="input-group-addon"
+      data-align={align}
+      className={cn(inputGroupAddonVariants({ align }), className)}
+      {...props}
+    />
+  );
+});
+
+const inputGroupButtonVariants = cva("flex items-center gap-2 text-sm shadow-none", {
+  variants: {
+    size: {
+      xs: "h-6 gap-1 rounded-sm px-2 has-[>svg]:px-2 [&>svg:not([class*='size-'])]:size-3.5",
+      sm: "h-8 gap-1.5 rounded-md px-2.5 has-[>svg]:px-2.5",
+      "icon-xs": "size-6 rounded-sm p-0 has-[>svg]:p-0",
+      "icon-sm": "size-8 p-0 has-[>svg]:p-0",
+    },
+  },
+  defaultVariants: { size: "xs" },
+});
+
+export const InputGroupButton = forwardRef<
+  HTMLButtonElement,
+  Omit<ComponentProps<typeof Button>, "size"> & {
+    size?: "xs" | "sm" | "icon-xs" | "icon-sm";
+  }
+>(function InputGroupButton(
+  { className, type = "button", variant = "ghost", size = "xs", ...props },
+  ref,
+) {
+  return (
+    <Button
+      ref={ref}
+      type={type}
+      data-size={size}
+      variant={variant}
+      className={cn(inputGroupButtonVariants({ size }), className)}
+      {...props}
+    />
+  );
+});
+
+export const InputGroupText = forwardRef<HTMLSpanElement, ComponentProps<"span">>(
+  function InputGroupText({ className, ...props }, ref) {
+    return (
+      <span
+        ref={ref}
+        className={cn(
+          "flex items-center gap-2 text-sm text-muted-foreground [&_svg:not([class*='size-'])]:size-4",
+          className,
+        )}
+        {...props}
+      />
+    );
+  },
+);
+
+export const InputGroupInput = forwardRef<HTMLInputElement, ComponentProps<typeof Input>>(
+  function InputGroupInput({ className, ...props }, ref) {
+    return (
+      <Input
+        ref={ref}
+        data-slot="input-group-control"
+        className={cn(
+          "flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 focus-visible:ring-offset-0",
+          className,
+        )}
+        {...props}
+      />
+    );
+  },
+);
+
+export const InputGroupTextarea = forwardRef<HTMLTextAreaElement, ComponentProps<typeof Textarea>>(
+  function InputGroupTextarea({ className, ...props }, ref) {
+    return (
+      <Textarea
+        ref={ref}
+        data-slot="input-group-control"
+        className={cn(
+          "flex-1 resize-none rounded-none border-0 bg-transparent py-2.5 shadow-none focus-visible:ring-0 focus-visible:ring-offset-0",
+          className,
+        )}
+        {...props}
+      />
+    );
+  },
+);

package/src/components/input-otp/index.ts

@@ -0,0 +1 @@
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator } from "./input-otp";

package/src/components/input-otp/input-otp.stories.tsx

@@ -0,0 +1,66 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect } from "storybook/test";
+import { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from "./input-otp";
+const meta = {
+  title: "Forms/InputOTP",
+  component: InputOTP,
+  tags: ["autodocs"],
+  argTypes: {
+    maxLength: {
+      description: "Total number of OTP digits.",
+      control: "number",
+      table: { category: "Behavior" },
+    },
+    value: {
+      description: "Controlled OTP value string.",
+      control: "text",
+      table: { category: "State" },
+    },
+    onChange: {
+      description: "Called when the OTP value changes.",
+      control: false,
+      table: { category: "Behavior" },
+    },
+    disabled: {
+      description: "Disables the OTP input.",
+      control: "boolean",
+      table: { category: "State" },
+    },
+    pattern: {
+      description: "Regex pattern to validate each character (e.g. digits-only).",
+      control: false,
+      table: { category: "Behavior" },
+    },
+    className: {
+      description: "Additional CSS classes applied to the input element.",
+      control: "text",
+      table: { category: "Appearance" },
+    },
+  },
+} satisfies Meta<typeof InputOTP>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const Default: Story = {
+  render: () => (
+    <InputOTP maxLength={6}>
+      <InputOTPGroup>
+        <InputOTPSlot index={0} />
+        <InputOTPSlot index={1} />
+        <InputOTPSlot index={2} />
+      </InputOTPGroup>
+      <InputOTPSeparator />
+      <InputOTPGroup>
+        <InputOTPSlot index={3} />
+        <InputOTPSlot index={4} />
+        <InputOTPSlot index={5} />
+      </InputOTPGroup>
+    </InputOTP>
+  ),
+  // Types three digits into the OTP and confirms the input reflects the value.
+  play: async ({ canvas, userEvent }) => {
+    const input = canvas.getByRole("textbox");
+    await userEvent.click(input);
+    await userEvent.type(input, "123");
+    await expect(input).toHaveValue("123");
+  },
+};

package/src/components/input-otp/input-otp.tsx

@@ -0,0 +1,68 @@
+import { forwardRef, useContext, type ComponentPropsWithoutRef, type ElementRef } from "react";
+import { OTPInput, OTPInputContext } from "input-otp";
+import { Minus } from "lucide-react";
+import { cn } from "../../lib/cn";
+
+export const InputOTP = forwardRef<
+  ElementRef<typeof OTPInput>,
+  ComponentPropsWithoutRef<typeof OTPInput>
+>(function InputOTP({ className, containerClassName, ...props }, ref) {
+  return (
+    <OTPInput
+      ref={ref}
+      containerClassName={cn(
+        "flex items-center gap-2 has-[:disabled]:opacity-50",
+        containerClassName,
+      )}
+      className={cn("disabled:cursor-not-allowed", className)}
+      {...props}
+    />
+  );
+});
+
+export const InputOTPGroup = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  function InputOTPGroup({ className, ...props }, ref) {
+    return <div ref={ref} className={cn("flex items-center", className)} {...props} />;
+  },
+);
+
+export const InputOTPSlot = forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & { index: number }
+>(function InputOTPSlot({ index, className, ...props }, ref) {
+  const ctx = useContext(OTPInputContext);
+  const slot = ctx.slots[index];
+  const { char, hasFakeCaret, isActive } = slot ?? {
+    char: null,
+    hasFakeCaret: false,
+    isActive: false,
+  };
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        "relative flex size-9 items-center justify-center border-y border-e border-input text-sm shadow-sm transition-[color,border-color,box-shadow] duration-fast ease-standard first:rounded-s-md first:border-s last:rounded-e-md",
+        isActive && "z-10 ring-2 ring-ring",
+        className,
+      )}
+      {...props}
+    >
+      {char}
+      {hasFakeCaret && (
+        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+          <div className="h-4 w-px animate-caret-blink bg-foreground" />
+        </div>
+      )}
+    </div>
+  );
+});
+
+export const InputOTPSeparator = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  function InputOTPSeparator(props, ref) {
+    return (
+      <div ref={ref} role="separator" {...props}>
+        <Minus className="size-4 text-muted-foreground" />
+      </div>
+    );
+  },
+);

package/src/components/kbd/index.ts

@@ -0,0 +1 @@
+export { Kbd } from "./kbd";

package/src/components/kbd/kbd.stories.tsx

@@ -0,0 +1,45 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Kbd } from "./kbd";
+const meta = {
+  title: "Display/Kbd",
+  component: Kbd,
+  tags: ["autodocs"],
+  argTypes: {
+    children: {
+      description:
+        'Key label — a glyph (⌘, ⇧) or short text (Enter, K). Wrapped in `translate="no"`.',
+      control: "text",
+      table: { category: "Content" },
+    },
+    className: {
+      description: "Extra Tailwind classes merged via cn().",
+      control: "text",
+      table: { category: "Appearance" },
+    },
+  },
+} satisfies Meta<typeof Kbd>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const Default: Story = {
+  render: () => (
+    <span className="text-body">
+      Press <Kbd>⌘</Kbd> <Kbd>K</Kbd>
+    </span>
+  ),
+};
+
+export const Combination: Story = {
+  render: () => (
+    <span className="text-body">
+      <Kbd>⇧</Kbd> <Kbd>⌘</Kbd> <Kbd>P</Kbd>
+    </span>
+  ),
+};
+
+export const TextKey: Story = {
+  render: () => (
+    <span className="text-body">
+      Press <Kbd>Enter</Kbd> to confirm
+    </span>
+  ),
+};

package/src/components/kbd/kbd.tsx

@@ -0,0 +1,20 @@
+import { forwardRef, type HTMLAttributes } from "react";
+import { cn } from "../../lib/cn";
+
+/** Keyboard key hint, e.g. <Kbd>⌘K</Kbd>. */
+export const Kbd = forwardRef<HTMLElement, HTMLAttributes<HTMLElement>>(function Kbd(
+  { className, ...props },
+  ref,
+) {
+  return (
+    <kbd
+      translate="no"
+      ref={ref}
+      className={cn(
+        "inline-flex h-5 min-w-5 select-none items-center justify-center gap-1 rounded border bg-muted px-1.5 font-mono text-[0.7rem] font-medium text-muted-foreground",
+        className,
+      )}
+      {...props}
+    />
+  );
+});

package/src/components/key-value-editor/index.ts

@@ -0,0 +1 @@
+export { KeyValueEditor, type KeyValueEditorProps, type KeyValueRow } from "./key-value-editor";

package/src/components/key-value-editor/key-value-editor.stories.tsx

@@ -0,0 +1,130 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect } from "storybook/test";
+import { useState } from "react";
+import { KeyValueEditor, type KeyValueRow } from "./key-value-editor";
+
+const meta = {
+  title: "Forms/KeyValueEditor",
+  component: KeyValueEditor,
+  tags: ["autodocs"],
+  args: {
+    keyPlaceholder: "KEY…",
+    valuePlaceholder: "value…",
+  },
+  argTypes: {
+    value: {
+      description: "Controlled, ordered rows.",
+      control: false,
+      table: { category: "State" },
+    },
+    defaultValue: {
+      description: "Uncontrolled initial rows.",
+      control: false,
+      table: { category: "State" },
+    },
+    keyPlaceholder: {
+      description: "Placeholder for each row's key field.",
+      control: "text",
+      table: { category: "Content" },
+    },
+    valuePlaceholder: {
+      description: "Placeholder for each row's value field.",
+      control: "text",
+      table: { category: "Content" },
+    },
+    addLabel: {
+      description: 'Label for the "add row" control.',
+      control: "text",
+      table: { category: "Content" },
+    },
+    disabled: {
+      description: "Disables the whole editor.",
+      control: "boolean",
+      table: { category: "State" },
+    },
+    onValueChange: {
+      description: "Called when the rows change.",
+      control: false,
+      table: { category: "Behavior" },
+    },
+    className: {
+      description: "Additional CSS classes applied to the root element.",
+      control: "text",
+      table: { category: "Appearance" },
+    },
+  },
+} satisfies Meta<typeof KeyValueEditor>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    defaultValue: [
+      { key: "REGION", value: "us-east-1" },
+      { key: "LOG_LEVEL", value: "debug" },
+    ],
+  },
+};
+
+/** A secret row renders masked with a reveal toggle; its value is never exposed while masked. */
+export const WithSecret: Story = {
+  args: {
+    defaultValue: [
+      { key: "REGION", value: "us-east-1" },
+      { key: "API_KEY", value: "sk-live-51H8x9K", secret: true },
+    ],
+  },
+  play: async ({ canvas, userEvent }) => {
+    const valueInput = canvas.getByLabelText("Value 2");
+    await expect(valueInput).toHaveAttribute("type", "password");
+
+    const revealBtn = canvas.getByRole("button", { name: /reveal value 2/i });
+    await userEvent.click(revealBtn);
+    await expect(valueInput).toHaveAttribute("type", "text");
+    await expect(valueInput).toHaveValue("sk-live-51H8x9K");
+
+    await userEvent.click(canvas.getByRole("button", { name: /hide value 2/i }));
+    await expect(valueInput).toHaveAttribute("type", "password");
+  },
+};
+
+export const Controlled: Story = {
+  render: () => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [rows, setRows] = useState<KeyValueRow[]>([{ key: "TOKEN", value: "", secret: true }]);
+    return (
+      <div className="flex flex-col gap-2 max-w-md">
+        <KeyValueEditor value={rows} onValueChange={setRows} />
+        <p className="text-body text-muted-foreground">{rows.length} row(s)</p>
+      </div>
+    );
+  },
+};
+
+/** Add a row, edit its key/value, and remove it — all via the composed primitives. */
+export const AddEditRemove: Story = {
+  args: { defaultValue: [] },
+  play: async ({ canvas, userEvent }) => {
+    await userEvent.click(canvas.getByRole("button", { name: /add row/i }));
+    const keyInput = canvas.getByLabelText("Key 1");
+    const valueInput = canvas.getByLabelText("Value 1");
+    await userEvent.type(keyInput, "REGION");
+    await userEvent.type(valueInput, "eu-west-1");
+    await expect(keyInput).toHaveValue("REGION");
+    await expect(valueInput).toHaveValue("eu-west-1");
+
+    await userEvent.click(canvas.getByRole("button", { name: /remove row 1/i }));
+    await expect(canvas.queryByLabelText("Key 1")).not.toBeInTheDocument();
+  },
+};
+
+export const Disabled: Story = {
+  args: { defaultValue: [{ key: "LOCKED", value: "true" }], disabled: true },
+};
+
+export const Empty: Story = {
+  args: { defaultValue: [] },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByText("No entries yet.")).toBeInTheDocument();
+  },
+};