@mzc-fe/design-system 0.0.1 → 0.0.2-rc.0

package/src/components/item.tsx

@@ -1,193 +0,0 @@
-import * as React from "react";
-import { Slot } from "@radix-ui/react-slot";
-import { cva, type VariantProps } from "class-variance-authority";
-
-import { cn } from "@/lib/utils";
-import { Separator } from "@/components/separator";
-
-function ItemGroup({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      role="list"
-      data-slot="item-group"
-      className={cn("group/item-group flex flex-col", className)}
-      {...props}
-    />
-  );
-}
-
-function ItemSeparator({
-  className,
-  ...props
-}: React.ComponentProps<typeof Separator>) {
-  return (
-    <Separator
-      data-slot="item-separator"
-      orientation="horizontal"
-      className={cn("my-0", className)}
-      {...props}
-    />
-  );
-}
-
-const itemVariants = cva(
-  "group/item flex items-center border border-transparent text-sm rounded-md transition-colors [a]:hover:bg-accent/50 [a]:transition-colors duration-100 flex-wrap outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
-  {
-    variants: {
-      variant: {
-        default: "bg-transparent",
-        outline: "border-border",
-        muted: "bg-muted/50",
-      },
-      size: {
-        default: "p-4 gap-4 ",
-        sm: "py-3 px-4 gap-2.5",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  }
-);
-
-function Item({
-  className,
-  variant = "default",
-  size = "default",
-  asChild = false,
-  ...props
-}: React.ComponentProps<"div"> &
-  VariantProps<typeof itemVariants> & { asChild?: boolean }) {
-  const Comp = asChild ? Slot : "div";
-  return (
-    <Comp
-      data-slot="item"
-      data-variant={variant}
-      data-size={size}
-      className={cn(itemVariants({ variant, size, className }))}
-      {...props}
-    />
-  );
-}
-
-const itemMediaVariants = cva(
-  "flex shrink-0 items-center justify-center gap-2 group-has-[[data-slot=item-description]]/item:self-start [&_svg]:pointer-events-none group-has-[[data-slot=item-description]]/item:translate-y-0.5",
-  {
-    variants: {
-      variant: {
-        default: "bg-transparent",
-        icon: "size-8 border rounded-sm bg-muted [&_svg:not([class*='size-'])]:size-4",
-        image:
-          "size-10 rounded-sm overflow-hidden [&_img]:size-full [&_img]:object-cover",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  }
-);
-
-function ItemMedia({
-  className,
-  variant = "default",
-  ...props
-}: React.ComponentProps<"div"> & VariantProps<typeof itemMediaVariants>) {
-  return (
-    <div
-      data-slot="item-media"
-      data-variant={variant}
-      className={cn(itemMediaVariants({ variant, className }))}
-      {...props}
-    />
-  );
-}
-
-function ItemContent({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="item-content"
-      className={cn(
-        "flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none",
-        className
-      )}
-      {...props}
-    />
-  );
-}
-
-function ItemTitle({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="item-title"
-      className={cn(
-        "flex w-fit items-center gap-2 text-sm leading-snug font-medium",
-        className
-      )}
-      {...props}
-    />
-  );
-}
-
-function ItemDescription({ className, ...props }: React.ComponentProps<"p">) {
-  return (
-    <p
-      data-slot="item-description"
-      className={cn(
-        "text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance",
-        "[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
-        className
-      )}
-      {...props}
-    />
-  );
-}
-
-function ItemActions({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="item-actions"
-      className={cn("flex items-center gap-2", className)}
-      {...props}
-    />
-  );
-}
-
-function ItemHeader({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="item-header"
-      className={cn(
-        "flex basis-full items-center justify-between gap-2",
-        className
-      )}
-      {...props}
-    />
-  );
-}
-
-function ItemFooter({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="item-footer"
-      className={cn(
-        "flex basis-full items-center justify-between gap-2",
-        className
-      )}
-      {...props}
-    />
-  );
-}
-
-export {
-  Item,
-  ItemMedia,
-  ItemContent,
-  ItemActions,
-  ItemGroup,
-  ItemSeparator,
-  ItemTitle,
-  ItemDescription,
-  ItemHeader,
-  ItemFooter,
-};

package/src/components/kbd.stories.tsx

@@ -1,100 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { Kbd, KbdGroup } from "./kbd";
-
-const meta = {
-  title: "Components/Kbd",
-  component: Kbd,
-  parameters: {
-    layout: "padded",
-  },
-  tags: ["autodocs"],
-} satisfies Meta<typeof Kbd>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: () => (
-    <div className="space-y-4">
-      <div>
-        Press <Kbd>⌘</Kbd> + <Kbd>K</Kbd> to open command menu
-      </div>
-      <div>
-        Press <Kbd>Ctrl</Kbd> + <Kbd>Alt</Kbd> + <Kbd>Del</Kbd>
-      </div>
-    </div>
-  ),
-};
-
-export const WithGroup: Story = {
-  render: () => (
-    <div className="space-y-4">
-      <div>
-        <KbdGroup>
-          <Kbd>⌘</Kbd>
-          <Kbd>K</Kbd>
-        </KbdGroup>
-      </div>
-      <div>
-        <KbdGroup>
-          <Kbd>Ctrl</Kbd>
-          <Kbd>Shift</Kbd>
-          <Kbd>P</Kbd>
-        </KbdGroup>
-      </div>
-    </div>
-  ),
-};
-
-export const InText: Story = {
-  render: () => (
-    <div className="space-y-2 text-sm">
-      <p>
-        Use <Kbd>Tab</Kbd> to navigate through form fields.
-      </p>
-      <p>
-        Press <Kbd>Enter</Kbd> to submit the form.
-      </p>
-      <p>
-        Use <Kbd>Esc</Kbd> to close dialogs.
-      </p>
-    </div>
-  ),
-};
-
-export const Shortcuts: Story = {
-  render: () => (
-    <div className="space-y-2">
-      <div className="flex items-center justify-between">
-        <span className="text-sm">Copy</span>
-        <KbdGroup>
-          <Kbd>⌘</Kbd>
-          <Kbd>C</Kbd>
-        </KbdGroup>
-      </div>
-      <div className="flex items-center justify-between">
-        <span className="text-sm">Paste</span>
-        <KbdGroup>
-          <Kbd>⌘</Kbd>
-          <Kbd>V</Kbd>
-        </KbdGroup>
-      </div>
-      <div className="flex items-center justify-between">
-        <span className="text-sm">Undo</span>
-        <KbdGroup>
-          <Kbd>⌘</Kbd>
-          <Kbd>Z</Kbd>
-        </KbdGroup>
-      </div>
-      <div className="flex items-center justify-between">
-        <span className="text-sm">Redo</span>
-        <KbdGroup>
-          <Kbd>⌘</Kbd>
-          <Kbd>Shift</Kbd>
-          <Kbd>Z</Kbd>
-        </KbdGroup>
-      </div>
-    </div>
-  ),
-};
-

package/src/components/kbd.test.tsx

@@ -1,28 +0,0 @@
-import { describe, it, expect } from "vitest";
-import { render } from "@testing-library/react";
-import { Kbd, KbdGroup } from "./kbd";
-
-describe("Kbd", () => {
-  it("should render kbd element", () => {
-    const { container } = render(<Kbd>⌘</Kbd>);
-    const kbd = container.querySelector('[data-slot="kbd"]');
-    expect(kbd).toBeInTheDocument();
-  });
-
-  it("should render kbd with text", () => {
-    const { getByText } = render(<Kbd>Ctrl</Kbd>);
-    expect(getByText("Ctrl")).toBeInTheDocument();
-  });
-
-  it("should render kbd group", () => {
-    const { container } = render(
-      <KbdGroup>
-        <Kbd>⌘</Kbd>
-        <Kbd>K</Kbd>
-      </KbdGroup>
-    );
-    const group = container.querySelector('[data-slot="kbd-group"]');
-    expect(group).toBeInTheDocument();
-  });
-});
-

package/src/components/kbd.tsx

@@ -1,28 +0,0 @@
-import { cn } from "@/lib/utils"
-
-function Kbd({ className, ...props }: React.ComponentProps<"kbd">) {
-  return (
-    <kbd
-      data-slot="kbd"
-      className={cn(
-        "bg-muted text-muted-foreground pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium select-none",
-        "[&_svg:not([class*='size-'])]:size-3",
-        "[[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function KbdGroup({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <kbd
-      data-slot="kbd-group"
-      className={cn("inline-flex items-center gap-1", className)}
-      {...props}
-    />
-  )
-}
-
-export { Kbd, KbdGroup }

package/src/components/label.stories.tsx

@@ -1,48 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { Label } from "./label";
-import { Input } from "./input";
-
-const meta = {
-  title: "Components/Label",
-  component: Label,
-  parameters: {
-    layout: "padded",
-  },
-  tags: ["autodocs"],
-} satisfies Meta<typeof Label>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: 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 Required: Story = {
-  render: () => (
-    <div className="space-y-2 w-[350px]">
-      <Label htmlFor="required">
-        Email <span className="text-destructive">*</span>
-      </Label>
-      <Input id="required" type="email" placeholder="name@example.com" />
-    </div>
-  ),
-};
-
-export const WithDescription: Story = {
-  render: () => (
-    <div className="space-y-2 w-[350px]">
-      <Label htmlFor="password">Password</Label>
-      <Input id="password" type="password" placeholder="Enter password" />
-      <p className="text-sm text-muted-foreground">
-        Must be at least 8 characters long.
-      </p>
-    </div>
-  ),
-};
-

package/src/components/label.test.tsx

@@ -1,28 +0,0 @@
-import { describe, it, expect } from "vitest";
-import { render } from "@testing-library/react";
-import { Label } from "./label";
-
-describe("Label", () => {
-  it("should render label", () => {
-    const { container } = render(<Label>Label text</Label>);
-    const label = container.querySelector('[data-slot="label"]');
-    expect(label).toBeInTheDocument();
-  });
-
-  it("should associate label with input using htmlFor", () => {
-    const { container } = render(
-      <>
-        <Label htmlFor="test-input">Test Label</Label>
-        <input id="test-input" />
-      </>
-    );
-    const label = container.querySelector('[data-slot="label"]');
-    expect(label).toHaveAttribute("for", "test-input");
-  });
-
-  it("should render label text", () => {
-    const { getByText } = render(<Label>Email</Label>);
-    expect(getByText("Email")).toBeInTheDocument();
-  });
-});
-

package/src/components/label.tsx

@@ -1,24 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as LabelPrimitive from "@radix-ui/react-label"
-
-import { cn } from "@/lib/utils"
-
-function Label({
-  className,
-  ...props
-}: React.ComponentProps<typeof LabelPrimitive.Root>) {
-  return (
-    <LabelPrimitive.Root
-      data-slot="label"
-      className={cn(
-        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export { Label }