web/packages/design-system/lib/components/ChipButton/variants.ts

import { cva } from "class-variance-authority"

import { deepmerge } from "deepmerge-ts"
import styles from "./chip-button.module.css"
import { config as typographyConfig } from "../Typography/variants"

const variantKeys = {
  variant: {
    Default: "Default",
    Outlined: "Outlined",
    FilterRounded: "FilterRounded",
  },
  style: {
    Medium: "Medium",
    Large: "Large",
  },
  typography: {
    Bold: "Body/Supporting text (caption)/smBold",
    Regular: "Body/Supporting text (caption)/smRegular",
  },
} as const

export const config = {
  variants: {
    variant: {
      [variantKeys.variant.Default]: styles.Default,
      [variantKeys.variant.Outlined]: styles.Outlined,
      [variantKeys.variant.FilterRounded]: styles.FilterRounded,
    },
    selected: {
      true: "",
      false: "",
    },
    size: {
      [variantKeys.style.Medium]: "",
      [variantKeys.style.Large]: "",
    },
  },
  compoundVariants: [
    {
      variant: variantKeys.variant.Default,
      className: [
        typographyConfig.variants.variant[
          "Body/Supporting text (caption)/smBold"
        ],
      ],
    },
    {
      variant: variantKeys.variant.Outlined,
      className: [
        typographyConfig.variants.variant[
          "Body/Supporting text (caption)/smBold"
        ],
      ],
    },
    {
      variant: variantKeys.variant.FilterRounded,
      size: variantKeys.style.Medium,
      selected: true,
      className: [
        typographyConfig.variants.variant[
          "Body/Supporting text (caption)/smRegular"
        ],
        styles.selected,
        styles.medium,
      ],
    },
    {
      variant: variantKeys.variant.FilterRounded,
      size: variantKeys.style.Medium,
      selected: false,
      className: [
        typographyConfig.variants.variant[
          "Body/Supporting text (caption)/smRegular"
        ],
        styles.medium,
      ],
    },
    {
      variant: variantKeys.variant.FilterRounded,
      size: variantKeys.style.Large,
      selected: true,
      className: [
        typographyConfig.variants.variant[
          "Body/Supporting text (caption)/smRegular"
        ],
        styles.selected,
        styles.large,
      ],
    },
    {
      variant: variantKeys.variant.FilterRounded,
      size: variantKeys.style.Large,
      selected: false,
      className: [
        typographyConfig.variants.variant[
          "Body/Supporting text (caption)/smRegular"
        ],
        styles.large,
      ],
    },
  ],
  defaultVariants: {
    variant: variantKeys.variant.Default,
  },
}

export const variants = cva(styles.chip, config)

const chipConfig = {
  variants: {
    ...config.variants,
  },
  defaultVariants: config.defaultVariants,
} as const

export function withChipButton<T>(config: T) {
  return deepmerge(chipConfig, config)
}