@mzc-fe/design-system 0.0.1 → 0.0.2

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

@@ -1,40 +0,0 @@
-import { describe, it, expect } from "vitest";
-import { render } from "@testing-library/react";
-import {
-  InputGroup,
-  InputGroupAddon,
-  InputGroupInput,
-} from "./input-group";
-
-describe("InputGroup", () => {
-  it("should render input group", () => {
-    const { container } = render(
-      <InputGroup>
-        <InputGroupInput placeholder="Enter text" />
-      </InputGroup>
-    );
-    const group = container.querySelector('[data-slot="input-group"]');
-    expect(group).toBeInTheDocument();
-  });
-
-  it("should render input group with addon", () => {
-    const { getByText } = render(
-      <InputGroup>
-        <InputGroupAddon align="inline-start">$</InputGroupAddon>
-        <InputGroupInput placeholder="0.00" />
-      </InputGroup>
-    );
-    expect(getByText("$")).toBeInTheDocument();
-  });
-
-  it("should render input group input", () => {
-    const { container } = render(
-      <InputGroup>
-        <InputGroupInput placeholder="Enter text" />
-      </InputGroup>
-    );
-    const input = container.querySelector('[data-slot="input-group-control"]');
-    expect(input).toBeInTheDocument();
-  });
-});
-

package/src/components/input-group.tsx

@@ -1,170 +0,0 @@
-"use client";
-
-import * as React from "react";
-import { cva, type VariantProps } from "class-variance-authority";
-
-import { cn } from "@/lib/utils";
-import { Button } from "@/components/button";
-import { Input } from "@/components/input";
-import { Textarea } from "@/components/textarea";
-
-function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="input-group"
-      role="group"
-      className={cn(
-        "group/input-group border-input dark:bg-input/30 relative flex w-full items-center rounded-md border shadow-xs transition-[color,box-shadow] outline-none",
-        "h-9 min-w-0 has-[>textarea]:h-auto",
-
-        // Variants based on alignment.
-        "has-[>[data-align=inline-start]]:[&>input]:pl-2",
-        "has-[>[data-align=inline-end]]:[&>input]:pr-2",
-        "has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3",
-        "has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3",
-
-        // Focus state.
-        "has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px]",
-
-        // Error state.
-        "has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40",
-
-        className
-      )}
-      {...props}
-    />
-  );
-}
-
-const inputGroupAddonVariants = cva(
-  "text-muted-foreground flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium select-none [&>svg:not([class*='size-'])]:size-4 [&>kbd]:rounded-[calc(var(--radius)-5px)] group-data-[disabled=true]/input-group:opacity-50",
-  {
-    variants: {
-      align: {
-        "inline-start":
-          "order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]",
-        "inline-end":
-          "order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]",
-        "block-start":
-          "order-first w-full justify-start px-3 pt-3 [.border-b]:pb-3 group-has-[>input]/input-group:pt-2.5",
-        "block-end":
-          "order-last w-full justify-start px-3 pb-3 [.border-t]:pt-3 group-has-[>input]/input-group:pb-2.5",
-      },
-    },
-    defaultVariants: {
-      align: "inline-start",
-    },
-  }
-);
-
-function InputGroupAddon({
-  className,
-  align = "inline-start",
-  ...props
-}: React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>) {
-  return (
-    <div
-      role="group"
-      data-slot="input-group-addon"
-      data-align={align}
-      className={cn(inputGroupAddonVariants({ align }), className)}
-      onClick={(e) => {
-        if ((e.target as HTMLElement).closest("button")) {
-          return;
-        }
-        e.currentTarget.parentElement?.querySelector("input")?.focus();
-      }}
-      {...props}
-    />
-  );
-}
-
-const inputGroupButtonVariants = cva(
-  "text-sm shadow-none flex gap-2 items-center",
-  {
-    variants: {
-      size: {
-        xs: "h-6 gap-1 px-2 rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-3.5 has-[>svg]:px-2",
-        sm: "h-8 px-2.5 gap-1.5 rounded-md has-[>svg]:px-2.5",
-        "icon-xs":
-          "size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0",
-        "icon-sm": "size-8 p-0 has-[>svg]:p-0",
-      },
-    },
-    defaultVariants: {
-      size: "xs",
-    },
-  }
-);
-
-function InputGroupButton({
-  className,
-  type = "button",
-  variant = "ghost",
-  size = "xs",
-  ...props
-}: Omit<React.ComponentProps<typeof Button>, "size"> &
-  VariantProps<typeof inputGroupButtonVariants>) {
-  return (
-    <Button
-      type={type}
-      data-size={size}
-      variant={variant}
-      className={cn(inputGroupButtonVariants({ size }), className)}
-      {...props}
-    />
-  );
-}
-
-function InputGroupText({ className, ...props }: React.ComponentProps<"span">) {
-  return (
-    <span
-      className={cn(
-        "text-muted-foreground flex items-center gap-2 text-sm [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
-        className
-      )}
-      {...props}
-    />
-  );
-}
-
-function InputGroupInput({
-  className,
-  ...props
-}: React.ComponentProps<"input">) {
-  return (
-    <Input
-      data-slot="input-group-control"
-      className={cn(
-        "flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent",
-        className
-      )}
-      {...props}
-    />
-  );
-}
-
-function InputGroupTextarea({
-  className,
-  ...props
-}: React.ComponentProps<"textarea">) {
-  return (
-    <Textarea
-      data-slot="input-group-control"
-      className={cn(
-        "flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent",
-        className
-      )}
-      {...props}
-    />
-  );
-}
-
-export {
-  InputGroup,
-  InputGroupAddon,
-  InputGroupButton,
-  InputGroupText,
-  InputGroupInput,
-  InputGroupTextarea,
-};

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

@@ -1,94 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { InputOTP, InputOTPGroup, InputOTPSlot } from "./input-otp";
-
-const meta = {
-  title: "Components/InputOTP",
-  component: InputOTP,
-  parameters: {
-    layout: "padded",
-  },
-  tags: ["autodocs"],
-  argTypes: {
-    maxLength: {
-      control: "number",
-      description: "Maximum number of characters.",
-    },
-    children: {
-      table: {
-        disable: true,
-      },
-    },
-  },
-} satisfies Meta<typeof InputOTP>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    maxLength: 6,
-    children: <></>,
-  },
-  render: (args) => (
-    <InputOTP maxLength={args.maxLength}>
-      <InputOTPGroup>
-        {new Array(args.maxLength).fill(0).map((_, idx) => (
-          <InputOTPSlot index={idx} />
-        ))}
-      </InputOTPGroup>
-    </InputOTP>
-  ),
-};
-
-export const FourDigits: Story = {
-  args: {
-    maxLength: 4,
-    children: <></>,
-  },
-  argTypes: {
-    maxLength: {
-      table: {
-        disable: true,
-      },
-    },
-  },
-  render: () => (
-    <InputOTP maxLength={4}>
-      <InputOTPGroup>
-        <InputOTPSlot index={0} />
-        <InputOTPSlot index={1} />
-        <InputOTPSlot index={2} />
-        <InputOTPSlot index={3} />
-      </InputOTPGroup>
-    </InputOTP>
-  ),
-};
-
-export const WithSeparator: Story = {
-  args: {
-    maxLength: 6,
-    children: <></>,
-  },
-  argTypes: {
-    maxLength: {
-      table: {
-        disable: true,
-      },
-    },
-  },
-  render: () => (
-    <InputOTP maxLength={6}>
-      <InputOTPGroup>
-        <InputOTPSlot index={0} />
-        <InputOTPSlot index={1} />
-        <InputOTPSlot index={2} />
-      </InputOTPGroup>
-      <div className="w-2" />
-      <InputOTPGroup>
-        <InputOTPSlot index={3} />
-        <InputOTPSlot index={4} />
-        <InputOTPSlot index={5} />
-      </InputOTPGroup>
-    </InputOTP>
-  ),
-};

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

@@ -1,60 +0,0 @@
-import { describe, it, expect, vi } from "vitest";
-import { render } from "@testing-library/react";
-import {
-  InputOTP,
-  InputOTPGroup,
-  InputOTPSlot,
-} from "./input-otp";
-
-describe("InputOTP", () => {
-  it("should render input OTP", () => {
-    const { container } = render(
-      <InputOTP maxLength={6}>
-        <InputOTPGroup>
-          <InputOTPSlot index={0} />
-        </InputOTPGroup>
-      </InputOTP>
-    );
-    const inputOTP = container.querySelector('[data-slot="input-otp"]');
-    expect(inputOTP).toBeInTheDocument();
-  });
-
-  it("should render input OTP group", () => {
-    const { container } = render(
-      <InputOTP maxLength={6}>
-        <InputOTPGroup>
-          <InputOTPSlot index={0} />
-        </InputOTPGroup>
-      </InputOTP>
-    );
-    const group = container.querySelector('[data-slot="input-otp-group"]');
-    expect(group).toBeInTheDocument();
-  });
-
-  it("should render input OTP slots", () => {
-    const { container } = render(
-      <InputOTP maxLength={6}>
-        <InputOTPGroup>
-          <InputOTPSlot index={0} />
-          <InputOTPSlot index={1} />
-        </InputOTPGroup>
-      </InputOTP>
-    );
-    const slots = container.querySelectorAll('[data-slot="input-otp-slot"]');
-    expect(slots.length).toBe(2);
-  });
-
-  it("should handle value changes", () => {
-    const handleChange = vi.fn();
-    const { container } = render(
-      <InputOTP maxLength={6} onChange={handleChange}>
-        <InputOTPGroup>
-          <InputOTPSlot index={0} />
-        </InputOTPGroup>
-      </InputOTP>
-    );
-    const input = container.querySelector('input');
-    expect(input).toBeInTheDocument();
-  });
-});
-

package/src/components/input-otp.tsx

@@ -1,75 +0,0 @@
-import * as React from "react";
-import { OTPInput, OTPInputContext } from "input-otp";
-import { MinusIcon } from "lucide-react";
-
-import { cn } from "@/lib/utils";
-
-function InputOTP({
-  className,
-  containerClassName,
-  ...props
-}: React.ComponentProps<typeof OTPInput> & {
-  containerClassName?: string;
-}) {
-  return (
-    <OTPInput
-      data-slot="input-otp"
-      containerClassName={cn(
-        "flex items-center gap-2 has-disabled:opacity-50",
-        containerClassName
-      )}
-      className={cn("disabled:cursor-not-allowed", className)}
-      {...props}
-    />
-  );
-}
-
-function InputOTPGroup({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="input-otp-group"
-      className={cn("flex items-center", className)}
-      {...props}
-    />
-  );
-}
-
-function InputOTPSlot({
-  index,
-  className,
-  ...props
-}: React.ComponentProps<"div"> & {
-  index: number;
-}) {
-  const inputOTPContext = React.useContext(OTPInputContext);
-  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {};
-
-  return (
-    <div
-      data-slot="input-otp-slot"
-      data-active={isActive}
-      className={cn(
-        "data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 border-input relative flex h-9 w-9 items-center justify-center border-y border-r text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-[3px]",
-        className
-      )}
-      {...props}
-    >
-      {char}
-      {hasFakeCaret && (
-        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
-          <div className="animate-caret-blink bg-foreground h-4 w-px duration-1000" />
-        </div>
-      )}
-    </div>
-  );
-}
-
-function InputOTPSeparator({ ...props }: React.ComponentProps<"div">) {
-  return (
-    <div data-slot="input-otp-separator" role="separator" {...props}>
-      <MinusIcon />
-    </div>
-  );
-}
-
-export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator };

package/src/components/input.stories.tsx

@@ -1,94 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { Input } from "./input";
-import { Label } from "./label";
-
-const meta = {
-  title: "Components/Input",
-  component: Input,
-  parameters: {
-    layout: "padded",
-  },
-  tags: ["autodocs"],
-  argTypes: {
-    type: {
-      control: "select",
-      options: ["text", "email", "password", "number", "tel", "url"],
-      description: "The input type.",
-    },
-    disabled: {
-      control: "boolean",
-      description: "Whether the input is disabled.",
-    },
-    placeholder: {
-      control: "text",
-      description: "Placeholder text.",
-    },
-  },
-} satisfies Meta<typeof Input>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    type: "text",
-    placeholder: "Enter text...",
-  },
-};
-
-export const WithLabel: Story = {
-  render: () => (
-    <div className="space-y-2 w-[350px]">
-      <Label htmlFor="email">Email</Label>
-      <Input id="email" type="email" placeholder="name@example.com" />
-    </div>
-  ),
-};
-
-export const Types: Story = {
-  render: () => (
-    <div className="space-y-4 w-[350px]">
-      <div className="space-y-2">
-        <Label htmlFor="text">Text</Label>
-        <Input id="text" type="text" placeholder="Enter text" />
-      </div>
-      <div className="space-y-2">
-        <Label htmlFor="email">Email</Label>
-        <Input id="email" type="email" placeholder="name@example.com" />
-      </div>
-      <div className="space-y-2">
-        <Label htmlFor="password">Password</Label>
-        <Input id="password" type="password" placeholder="••••••••" />
-      </div>
-      <div className="space-y-2">
-        <Label htmlFor="number">Number</Label>
-        <Input id="number" type="number" placeholder="123" />
-      </div>
-    </div>
-  ),
-};
-
-export const Disabled: Story = {
-  render: () => (
-    <div className="space-y-4 w-[350px]">
-      <Input disabled placeholder="Disabled input" />
-      <Input disabled value="Disabled with value" />
-    </div>
-  ),
-};
-
-export const WithError: Story = {
-  render: () => (
-    <div className="space-y-2 w-[350px]">
-      <Label htmlFor="error">Email</Label>
-      <Input
-        id="error"
-        type="email"
-        placeholder="name@example.com"
-        aria-invalid="true"
-      />
-      <p className="text-sm text-destructive">Please enter a valid email.</p>
-    </div>
-  ),
-};
-

package/src/components/input.test.tsx

@@ -1,53 +0,0 @@
-import { describe, it, expect, vi } from "vitest";
-import { render } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { Input } from "./input";
-
-describe("Input", () => {
-  it("should render input element", () => {
-    const { container } = render(<Input />);
-    const input = container.querySelector('[data-slot="input"]');
-    expect(input).toBeInTheDocument();
-  });
-
-  it("should display placeholder text", () => {
-    const { getByPlaceholderText } = render(
-      <Input placeholder="Enter text..." />
-    );
-    expect(getByPlaceholderText("Enter text...")).toBeInTheDocument();
-  });
-
-  it("should accept and display value", () => {
-    const { container } = render(<Input value="test value" readOnly />);
-    const input = container.querySelector('[data-slot="input"]') as HTMLInputElement;
-    expect(input.value).toBe("test value");
-  });
-
-  it("should be disabled when disabled prop is true", () => {
-    const { container } = render(<Input disabled />);
-    const input = container.querySelector('[data-slot="input"]') as HTMLInputElement;
-    expect(input).toBeDisabled();
-  });
-
-  it("should call onChange handler when value changes", async () => {
-    const user = userEvent.setup();
-    const handleChange = vi.fn();
-    const { container } = render(<Input onChange={handleChange} />);
-    const input = container.querySelector('[data-slot="input"]') as HTMLInputElement;
-    await user.type(input, "test");
-    expect(handleChange).toHaveBeenCalled();
-  });
-
-  it("should apply aria-invalid attribute when invalid", () => {
-    const { container } = render(<Input aria-invalid="true" />);
-    const input = container.querySelector('[data-slot="input"]');
-    expect(input).toHaveAttribute("aria-invalid", "true");
-  });
-
-  it("should support different input types", () => {
-    const { container } = render(<Input type="email" />);
-    const input = container.querySelector('[data-slot="input"]') as HTMLInputElement;
-    expect(input.type).toBe("email");
-  });
-});
-

package/src/components/input.tsx

@@ -1,21 +0,0 @@
-import * as React from "react"
-
-import { cn } from "@/lib/utils"
-
-function Input({ className, type, ...props }: React.ComponentProps<"input">) {
-  return (
-    <input
-      type={type}
-      data-slot="input"
-      className={cn(
-        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
-        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export { Input }