Chip

import { Chip } from "@fanvue/ui";
import type { ChipProps, ChipSize, ChipVariant } from "@fanvue/ui";

import { Chip } from "@fanvue/ui";

<Chip outlined>Chip</Chip>

import { Chip } from "@fanvue/ui";

<Chip outlined selected>Chip</Chip>

import { Chip } from "@fanvue/ui";

<Chip leftDot>Chip</Chip>

import { Fragment } from "react";
import { Chip } from "@fanvue/ui";
import type { ChipProps, ChipSize, ChipVariant } from "@fanvue/ui";

const STATE_COLUMNS = ["Default", "Active", "Disabled"] as const;

type StateColumn = (typeof STATE_COLUMNS)[number];

const MATRIX_ROWS: { label: string; size: ChipSize; dotted: boolean }[] = [
  { label: "40px", size: "40", dotted: false },
  { label: "32px", size: "32", dotted: false },
  { label: "40px · dotted", size: "40", dotted: true },
  { label: "32px · dotted", size: "32", dotted: true },
];

const stateProps = (state: StateColumn): Partial<ChipProps> => {
  switch (state) {
    case "Active":
      return { selected: true, onClick: () => {} };
    case "Disabled":
      return { disabled: true };
    default:
      return { onClick: () => {} };
  }
};

const VariantMatrix = ({ variant }: { variant: ChipVariant }) => (
  <div className="flex flex-col gap-3">
    <h3 className="typography-body-small-14px-semibold text-content-primary capitalize">
      {variant}
    </h3>
    <div className="grid grid-cols-[auto_repeat(3,minmax(0,1fr))] items-center gap-x-6 gap-y-4">
      <span />
      {STATE_COLUMNS.map((state) => (
        <span key={state} className="typography-description-12px-semibold text-content-tertiary">
          {state}
        </span>
      ))}
      {/* `dark` ignores `dotted`, so those rows would just repeat the solid ones. */}
      {MATRIX_ROWS.filter((row) => !(variant === "dark" && row.dotted)).map((row) => (
        <Fragment key={row.label}>
          <span className="typography-description-12px-semibold whitespace-nowrap text-content-tertiary">
            {row.label}
          </span>
          {STATE_COLUMNS.map((state) => (
            <span key={state} className="flex">
              <Chip variant={variant} size={row.size} dotted={row.dotted} {...stateProps(state)}>
                Chip
              </Chip>
            </span>
          ))}
        </Fragment>
      ))}
    </div>
  </div>
);

<div className="flex flex-col gap-8">
  <VariantMatrix variant="rounded" />
  <VariantMatrix variant="square" />
  <VariantMatrix variant="dark" />
</div>

import { Chip } from "@fanvue/ui";

<Chip>Chip</Chip>