@avenue-ticketing/ui 0.11.0 → 0.12.0-beta.1

package/dist/react/badge.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/lib/utils.ts","../../src/react/badge.tsx"],"names":[],"mappings":"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","file":"badge.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n","\"use client\";\n\nimport * as React from \"react\";\n\nimport { cn } from \"../lib/utils\";\n\n/** Matches `button.tsx` primary / secondary — no separate outline variants. */\nconst variantClass = {\n  primary:\n    \"border border-transparent bg-primary text-background\",\n  secondary:\n    \"border border-primary/10 bg-transparent text-primary\",\n} as const;\n\n/** Same keys as `button.tsx` `roundedClass`. */\nconst roundedClass = {\n  full: \"rounded-full\",\n  lg: \"rounded-lg\",\n  md: \"rounded-md\",\n} as const;\n\nconst sizeClass = {\n  md: \"min-h-6 min-w-6 px-2 text-xs\",\n  lg: \"min-h-7 min-w-7 px-2.5 text-sm\",\n} as const;\n\nconst OVERRIDE_BG_ALPHA = 0.18;\nconst OVERRIDE_BORDER_ALPHA = 0.38;\n\nfunction parseHexToRgb(\n  value: string,\n): { r: number; g: number; b: number } | null {\n  const v = value.trim();\n  if (!v.startsWith(\"#\") || v.length < 2) return null;\n  let h = v.slice(1);\n  if (h.length === 3) {\n    h = h\n      .split(\"\")\n      .map((c) => c + c)\n      .join(\"\");\n  } else if (h.length === 8) {\n    h = h.slice(0, 6);\n  }\n  if (h.length !== 6 || !/^[0-9A-Fa-f]{6}$/i.test(h)) return null;\n  const r = parseInt(h.slice(0, 2), 16);\n  const g = parseInt(h.slice(2, 4), 16);\n  const b = parseInt(h.slice(4, 6), 16);\n  if ([r, g, b].some((n) => Number.isNaN(n))) return null;\n  return { r, g, b };\n}\n\nfunction overrideColorStyles(rgb: { r: number; g: number; b: number }): {\n  backgroundColor: string;\n  color: string;\n  boxShadow: string;\n} {\n  const { r, g, b } = rgb;\n  return {\n    backgroundColor: `rgba(${r},${g},${b},${OVERRIDE_BG_ALPHA})`,\n    color: `rgb(${r},${g},${b})`,\n    boxShadow: `inset 0 0 0 1px rgba(${r},${g},${b},${OVERRIDE_BORDER_ALPHA})`,\n  };\n}\n\nexport type BadgeProps = React.HTMLAttributes<HTMLSpanElement> & {\n  /** @default secondary — same as Button default. */\n  variant?: keyof typeof variantClass;\n  /** @default md */\n  size?: keyof typeof sizeClass;\n  /**\n   * Corner radius — same options as `Button` (`full` | `lg` | `md`).\n   * @default full (pill)\n   */\n  rounded?: keyof typeof roundedClass;\n  /**\n   * When set, the label is the number capped at `max` with a \"+\" suffix\n   * (e.g. `max={99}` → `99+`). Ignores `children` for the visible text.\n   */\n  count?: number;\n  /** Upper bound before showing `{max}+`. Default `99`. */\n  max?: number;\n  /**\n   * Hex color (`#RGB`, `#RRGGBB`, or `#RRGGBBAA`) — tints the badge to that\n   * hue. When set, `variant` is ignored for colors. Invalid values are ignored\n   * and the badge falls back to `variant`.\n   */\n  overrideColor?: string;\n};\n\nfunction formatCount(count: number, max: number): string {\n  if (count > max) return `${max}+`;\n  return String(count);\n}\n\nconst Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(\n  (\n    {\n      className,\n      variant = \"secondary\",\n      size = \"md\",\n      rounded = \"full\",\n      count,\n      max = 99,\n      children,\n      \"aria-label\": ariaLabelProp,\n      overrideColor,\n      style,\n      ...props\n    },\n    ref,\n  ) => {\n    const content = count !== undefined ? formatCount(count, max) : children;\n    const rgb =\n      overrideColor && overrideColor.trim() !== \"\"\n        ? parseHexToRgb(overrideColor)\n        : null;\n    const useOverride = rgb != null;\n    const overrideStyle = useOverride\n      ? overrideColorStyles(rgb)\n      : undefined;\n\n    return (\n      <span\n        ref={ref}\n        data-slot=\"badge\"\n        data-size={size}\n        data-rounded={rounded}\n        data-override={useOverride ? \"true\" : undefined}\n        aria-label={ariaLabelProp}\n        className={cn(\n          \"inline-flex shrink-0 items-center justify-center font-semibold leading-none tabular-nums\",\n          roundedClass[rounded],\n          sizeClass[size],\n          !useOverride && variantClass[variant],\n          useOverride && \"border-0\",\n          className,\n        )}\n        style={{ ...overrideStyle, ...style }}\n        {...props}\n      >\n        {content}\n      </span>\n    );\n  },\n);\n\nBadge.displayName = \"Badge\";\n\nexport { Badge };\n"]}
+{"version":3,"sources":["../../../../components/foundations/dot-icon.tsx","../../../../utils/cx.ts","../../../../components/base/badges/badge-types.ts","../../../../components/base/badges/badges.tsx"],"names":["sizes","jsx","CloseX"],"mappings":"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","file":"badge.js","sourcesContent":["\"use client\";\n\nimport type { HTMLAttributes } from \"react\";\n\nconst sizes = {\n    sm: {\n        wh: 8,\n        c: 4,\n        r: 2.5,\n    },\n    md: {\n        wh: 10,\n        c: 5,\n        r: 4,\n    },\n};\n\nexport const Dot = ({ size = \"md\", ...props }: HTMLAttributes<HTMLOrSVGElement> & { size?: \"sm\" | \"md\" }) => {\n    return (\n        <svg width={sizes[size].wh} height={sizes[size].wh} viewBox={`0 0 ${sizes[size].wh} ${sizes[size].wh}`} fill=\"none\" {...props}>\n            <circle cx={sizes[size].c} cy={sizes[size].c} r={sizes[size].r} fill=\"currentColor\" stroke=\"currentColor\" />\n        </svg>\n    );\n};\n","import { extendTailwindMerge } from \"tailwind-merge\";\n\nconst twMerge = extendTailwindMerge({\n    extend: {\n        theme: {\n            text: [\"display-xs\", \"display-sm\", \"display-md\", \"display-lg\", \"display-xl\", \"display-2xl\"],\n        },\n    },\n});\n\n/**\n * This function is a wrapper around the twMerge function.\n * It is used to merge the classes inside style objects.\n */\nexport const cx = twMerge;\n\n/**\n * This function does nothing besides helping us to be able to\n * sort the classes inside style objects which is not supported\n * by the Tailwind IntelliSense by default.\n */\nexport function sortCx<T extends Record<string, string | number | Record<string, string | number | Record<string, string | number>>>>(classes: T): T {\n    return classes;\n}\n","export type IconComponentType = React.FunctionComponent<{\n    className?: string;\n    weight?: \"thin\" | \"light\" | \"regular\" | \"bold\" | \"fill\" | \"duotone\";\n}>;\n\nexport type Sizes = \"sm\" | \"md\" | \"lg\";\n\nexport type BadgeColors = \"gray\" | \"brand\" | \"error\" | \"warning\" | \"success\" | \"slate\" | \"sky\" | \"blue\" | \"indigo\" | \"purple\" | \"pink\" | \"orange\";\n\nexport type FlagTypes =\n    | \"AD\"\n    | \"AE\"\n    | \"AF\"\n    | \"AG\"\n    | \"AI\"\n    | \"AL\"\n    | \"AM\"\n    | \"AO\"\n    | \"AR\"\n    | \"AS\"\n    | \"AT\"\n    | \"AU\"\n    | \"AW\"\n    | \"AX\"\n    | \"AZ\"\n    | \"BA\"\n    | \"BB\"\n    | \"BD\"\n    | \"BE\"\n    | \"BF\"\n    | \"BG\"\n    | \"BH\"\n    | \"BI\"\n    | \"BJ\"\n    | \"BL\"\n    | \"BM\"\n    | \"BN\"\n    | \"BO\"\n    | \"BQ-1\"\n    | \"BQ-2\"\n    | \"BQ\"\n    | \"BR\"\n    | \"BS\"\n    | \"BT\"\n    | \"BW\"\n    | \"BY\"\n    | \"BZ\"\n    | \"CA\"\n    | \"CC\"\n    | \"CD-1\"\n    | \"CD\"\n    | \"CF\"\n    | \"CH\"\n    | \"CK\"\n    | \"CL\"\n    | \"CM\"\n    | \"CN\"\n    | \"CO\"\n    | \"CR\"\n    | \"CU\"\n    | \"CW\"\n    | \"CX\"\n    | \"CY\"\n    | \"CZ\"\n    | \"DE\"\n    | \"DJ\"\n    | \"DK\"\n    | \"DM\"\n    | \"DO\"\n    | \"DS\"\n    | \"DZ\"\n    | \"earth\"\n    | \"EC\"\n    | \"EE\"\n    | \"EG\"\n    | \"EH\"\n    | \"ER\"\n    | \"ES\"\n    | \"ET\"\n    | \"FI\"\n    | \"FJ\"\n    | \"FK\"\n    | \"FM\"\n    | \"FO\"\n    | \"FR\"\n    | \"GA\"\n    | \"GB-2\"\n    | \"GB\"\n    | \"GD\"\n    | \"GE\"\n    | \"GG\"\n    | \"GH\"\n    | \"GI\"\n    | \"GL\"\n    | \"GM\"\n    | \"GN\"\n    | \"GQ\"\n    | \"GR\"\n    | \"GT\"\n    | \"GU\"\n    | \"GW\"\n    | \"GY\"\n    | \"HK\"\n    | \"HN\"\n    | \"HR\"\n    | \"HT\"\n    | \"HU\"\n    | \"ID\"\n    | \"IE\"\n    | \"IL\"\n    | \"IM\"\n    | \"IN\"\n    | \"IO\"\n    | \"IQ\"\n    | \"IR\"\n    | \"IS\"\n    | \"IT\"\n    | \"JE\"\n    | \"JM\"\n    | \"JO\"\n    | \"JP\"\n    | \"KE\"\n    | \"KG\"\n    | \"KH\"\n    | \"KI\"\n    | \"KM\"\n    | \"KN\"\n    | \"KP\"\n    | \"KR\"\n    | \"KW\"\n    | \"KY\"\n    | \"KZ\"\n    | \"LA\"\n    | \"LB\"\n    | \"LC\"\n    | \"LI\"\n    | \"LK\"\n    | \"LR\"\n    | \"LS\"\n    | \"LT\"\n    | \"LU\"\n    | \"LV\"\n    | \"LY\"\n    | \"MA\"\n    | \"MC\"\n    | \"MD\"\n    | \"ME\"\n    | \"MG\"\n    | \"MH\"\n    | \"MK\"\n    | \"ML\"\n    | \"MM\"\n    | \"MN\"\n    | \"MO\"\n    | \"MP\"\n    | \"MQ\"\n    | \"MR\"\n    | \"MS\"\n    | \"MT\"\n    | \"MU\"\n    | \"MV\"\n    | \"MW\"\n    | \"MX\"\n    | \"MY\"\n    | \"MZ\"\n    | \"NA\"\n    | \"NE\"\n    | \"NF\"\n    | \"NG\"\n    | \"NI\"\n    | \"NL\"\n    | \"NO\"\n    | \"NP\"\n    | \"NR\"\n    | \"NU\"\n    | \"NZ\"\n    | \"OM\"\n    | \"PA\"\n    | \"PE\"\n    | \"PF\"\n    | \"PG\"\n    | \"PH\"\n    | \"PK\"\n    | \"PL\"\n    | \"PM\"\n    | \"PN\"\n    | \"PR\"\n    | \"PT\"\n    | \"PW\"\n    | \"PY\"\n    | \"QA\"\n    | \"RE\"\n    | \"RO\"\n    | \"RS\"\n    | \"RU\"\n    | \"RW\"\n    | \"SA\"\n    | \"SB\"\n    | \"SC\"\n    | \"SD\"\n    | \"SE\"\n    | \"SG\"\n    | \"SH\"\n    | \"SI\"\n    | \"SJ\"\n    | \"SK\"\n    | \"SL\"\n    | \"SM\"\n    | \"SN\"\n    | \"SO\"\n    | \"SR\"\n    | \"SS\"\n    | \"ST\"\n    | \"SV\"\n    | \"SX\"\n    | \"SY\"\n    | \"SZ\"\n    | \"TC\"\n    | \"TD\"\n    | \"TF\"\n    | \"TG\"\n    | \"TH\"\n    | \"TJ\"\n    | \"TK\"\n    | \"TL\"\n    | \"TM\"\n    | \"TN\"\n    | \"TO\"\n    | \"TR\"\n    | \"TT\"\n    | \"TV\"\n    | \"TZ\"\n    | \"UA\"\n    | \"UG\"\n    | \"UM\"\n    | \"US\"\n    | \"UY\"\n    | \"UZ\"\n    | \"VA\"\n    | \"VC\"\n    | \"VE\"\n    | \"VG\"\n    | \"VI\"\n    | \"VN\"\n    | \"VU\"\n    | \"WF\"\n    | \"WS\"\n    | \"YE\"\n    | \"YT\"\n    | \"ZA\"\n    | \"ZM\"\n    | \"ZW\";\n\nexport type ExtractColorKeys<T> = T extends { styles: infer C } ? keyof C : never;\nexport type ExtractBadgeKeys<T> = keyof T;\nexport type BadgeTypeToColorMap<T> = {\n    [K in ExtractBadgeKeys<T>]: ExtractColorKeys<T[K]>;\n};\nexport type BadgeTypeColors<T> = ExtractColorKeys<T[keyof T]>;\n\nexport const badgeTypes = {\n    pillColor: \"pill-color\",\n    badgeColor: \"color\",\n    badgeModern: \"modern\",\n} as const;\n\nexport type BadgeTypes = (typeof badgeTypes)[keyof typeof badgeTypes];\n","\"use client\";\n\n/** Figma: Badges (1046:3819) — pill borders use utility ring-inset; dismiss button uses spread focus ring. */\n\nimport type { MouseEventHandler, ReactNode } from \"react\";\nimport { XIcon as CloseX } from \"@phosphor-icons/react/dist/csr/X\";\nimport { Dot } from \"@/components/foundations/dot-icon\";\nimport { cx } from \"@/utils/cx\";\nimport type { BadgeColors, BadgeTypeToColorMap, BadgeTypes, FlagTypes, IconComponentType, Sizes } from \"./badge-types\";\nimport { badgeTypes } from \"./badge-types\";\n\nconst focusShadowPlain =\n    \"focus-visible:outline-none focus-visible:[box-shadow:0px_0px_0px_2px_var(--color-bg-primary),0px_0px_0px_4px_var(--color-focus-ring)]\";\n\nexport const filledColors: Record<BadgeColors, { root: string; addon: string; addonButton: string }> = {\n    gray: {\n        root: \"bg-utility-neutral-50 text-utility-neutral-700 ring-utility-neutral-200\",\n        addon: \"text-utility-neutral-500\",\n        addonButton: \"hover:bg-utility-neutral-100 text-utility-neutral-400 hover:text-utility-neutral-500\",\n    },\n    brand: {\n        root: \"bg-utility-brand-50 text-utility-brand-700 ring-utility-brand-200\",\n        addon: \"text-utility-brand-500\",\n        addonButton: \"hover:bg-utility-brand-100 text-utility-brand-400 hover:text-utility-brand-500\",\n    },\n    error: {\n        root: \"bg-utility-red-50 text-utility-red-700 ring-utility-red-200\",\n        addon: \"text-utility-red-500\",\n        addonButton: \"hover:bg-utility-red-100 text-utility-red-400 hover:text-utility-red-500\",\n    },\n    warning: {\n        root: \"bg-utility-yellow-50 text-utility-yellow-700 ring-utility-yellow-200\",\n        addon: \"text-utility-yellow-500\",\n        addonButton: \"hover:bg-utility-yellow-100 text-utility-yellow-400 hover:text-utility-yellow-500\",\n    },\n    success: {\n        root: \"bg-utility-green-50 text-utility-green-700 ring-utility-green-200\",\n        addon: \"text-utility-green-500\",\n        addonButton: \"hover:bg-utility-green-100 text-utility-green-400 hover:text-utility-green-500\",\n    },\n    slate: {\n        root: \"bg-utility-slate-50 text-utility-slate-700 ring-utility-slate-200\",\n        addon: \"text-utility-slate-500\",\n        addonButton: \"hover:bg-utility-slate-100 text-utility-slate-400 hover:text-utility-slate-500\",\n    },\n    sky: {\n        root: \"bg-utility-sky-50 text-utility-sky-700 ring-utility-sky-200\",\n        addon: \"text-utility-sky-500\",\n        addonButton: \"hover:bg-utility-sky-100 text-utility-sky-400 hover:text-utility-sky-500\",\n    },\n    blue: {\n        root: \"bg-utility-blue-50 text-utility-blue-700 ring-utility-blue-200\",\n        addon: \"text-utility-blue-500\",\n        addonButton: \"hover:bg-utility-blue-100 text-utility-blue-400 hover:text-utility-blue-500\",\n    },\n    indigo: {\n        root: \"bg-utility-indigo-50 text-utility-indigo-700 ring-utility-indigo-200\",\n        addon: \"text-utility-indigo-500\",\n        addonButton: \"hover:bg-utility-indigo-100 text-utility-indigo-400 hover:text-utility-indigo-500\",\n    },\n    purple: {\n        root: \"bg-utility-purple-50 text-utility-purple-700 ring-utility-purple-200\",\n        addon: \"text-utility-purple-500\",\n        addonButton: \"hover:bg-utility-purple-100 text-utility-purple-400 hover:text-utility-purple-500\",\n    },\n    pink: {\n        root: \"bg-utility-pink-50 text-utility-pink-700 ring-utility-pink-200\",\n        addon: \"text-utility-pink-500\",\n        addonButton: \"hover:bg-utility-pink-100 text-utility-pink-400 hover:text-utility-pink-500\",\n    },\n    orange: {\n        root: \"bg-utility-orange-50 text-utility-orange-700 ring-utility-orange-200\",\n        addon: \"text-utility-orange-500\",\n        addonButton: \"hover:bg-utility-orange-100 text-utility-orange-400 hover:text-utility-orange-500\",\n    },\n};\n\nconst addonOnlyColors = Object.fromEntries(Object.entries(filledColors).map(([key, value]) => [key, { root: \"\", addon: value.addon }])) as Record<\n    BadgeColors,\n    { root: string; addon: string }\n>;\n\nconst withPillTypes = {\n    [badgeTypes.pillColor]: {\n        common: \"size-max flex items-center whitespace-nowrap rounded-full ring-1 ring-inset\",\n        styles: filledColors,\n    },\n    [badgeTypes.badgeColor]: {\n        common: \"size-max flex items-center whitespace-nowrap rounded-md ring-1 ring-inset\",\n        styles: filledColors,\n    },\n    [badgeTypes.badgeModern]: {\n        common: \"size-max flex items-center whitespace-nowrap rounded-md ring-1 ring-inset shadow-xs\",\n        styles: {\n            gray: {\n                root: \"bg-primary text-secondary ring-primary\",\n                addon: \"text-neutral-500\",\n                addonButton: \"hover:bg-utility-neutral-100 text-utility-neutral-400 hover:text-utility-neutral-500\",\n            },\n        },\n    },\n};\n\nconst withBadgeTypes = {\n    [badgeTypes.pillColor]: {\n        common: \"size-max flex items-center whitespace-nowrap rounded-full ring-1 ring-inset\",\n        styles: filledColors,\n    },\n    [badgeTypes.badgeColor]: {\n        common: \"size-max flex items-center whitespace-nowrap rounded-md ring-1 ring-inset\",\n        styles: filledColors,\n    },\n    [badgeTypes.badgeModern]: {\n        common: \"size-max flex items-center whitespace-nowrap rounded-md ring-1 ring-inset bg-primary text-secondary ring-primary shadow-xs\",\n        styles: addonOnlyColors,\n    },\n};\n\nexport type BadgeColor<T extends BadgeTypes> = BadgeTypeToColorMap<typeof withPillTypes>[T];\n\ninterface BadgeProps<T extends BadgeTypes> {\n    type?: T;\n    size?: Sizes;\n    color?: BadgeColor<T>;\n    children: ReactNode;\n    className?: string;\n}\n\nexport const Badge = <T extends BadgeTypes>(props: BadgeProps<T>) => {\n    const { type = \"pill-color\", size = \"md\", color = \"gray\", children } = props;\n    const colors = withPillTypes[type];\n\n    const pillSizes = {\n        sm: \"py-0.5 px-2 text-xs font-semibold\",\n        md: \"py-0.5 px-2.5 text-sm font-semibold\",\n        lg: \"py-1 px-3 text-sm font-semibold\",\n    };\n    const badgeSizes = {\n        sm: \"py-0.5 px-1.5 text-xs font-semibold\",\n        md: \"py-0.5 px-2 text-sm font-semibold\",\n        lg: \"py-1 px-2.5 text-sm font-semibold rounded-lg\",\n    };\n\n    const sizes = {\n        [badgeTypes.pillColor]: pillSizes,\n        [badgeTypes.badgeColor]: badgeSizes,\n        [badgeTypes.badgeModern]: badgeSizes,\n    };\n\n    return <span className={cx(colors.common, sizes[type][size], colors.styles[color].root, props.className)}>{children}</span>;\n};\n\ninterface BadgeWithDotProps<T extends BadgeTypes> {\n    type?: T;\n    size?: Sizes;\n    color?: BadgeTypeToColorMap<typeof withBadgeTypes>[T];\n    className?: string;\n    children: ReactNode;\n}\n\nexport const BadgeWithDot = <T extends BadgeTypes>(props: BadgeWithDotProps<T>) => {\n    const { size = \"md\", color = \"gray\", type = \"pill-color\", className, children } = props;\n\n    const colors = withBadgeTypes[type];\n\n    const pillSizes = {\n        sm: \"gap-1 py-0.5 pl-1.5 pr-2 text-xs font-semibold\",\n        md: \"gap-1.5 py-0.5 pl-2 pr-2.5 text-sm font-semibold\",\n        lg: \"gap-1.5 py-1 pl-2.5 pr-3 text-sm font-semibold\",\n    };\n\n    const badgeSizes = {\n        sm: \"gap-1 py-0.5 px-1.5 text-xs font-semibold\",\n        md: \"gap-1.5 py-0.5 px-2 text-sm font-semibold\",\n        lg: \"gap-1.5 py-1 px-2.5 text-sm font-semibold rounded-lg\",\n    };\n\n    const sizes = {\n        [badgeTypes.pillColor]: pillSizes,\n        [badgeTypes.badgeColor]: badgeSizes,\n        [badgeTypes.badgeModern]: badgeSizes,\n    };\n\n    return (\n        <span className={cx(colors.common, sizes[type][size], colors.styles[color].root, className)}>\n            <Dot className={colors.styles[color].addon} size=\"sm\" />\n            {children}\n        </span>\n    );\n};\n\ninterface BadgeWithIconProps<T extends BadgeTypes> {\n    type?: T;\n    size?: Sizes;\n    color?: BadgeTypeToColorMap<typeof withBadgeTypes>[T];\n    iconLeading?: IconComponentType;\n    iconTrailing?: IconComponentType;\n    children: ReactNode;\n    className?: string;\n}\n\nconst badgeIconClassName = \"size-3\";\n\nexport const BadgeWithIcon = <T extends BadgeTypes>(props: BadgeWithIconProps<T>) => {\n    const { size = \"md\", color = \"gray\", type = \"pill-color\", iconLeading: IconLeading, iconTrailing: IconTrailing, children, className } = props;\n\n    const colors = withBadgeTypes[type];\n\n    const icon = IconLeading ? \"leading\" : \"trailing\";\n\n    const pillSizes = {\n        sm: {\n            trailing: \"gap-0.5 py-0.5 pl-2 pr-1.5 text-xs font-semibold\",\n            leading: \"gap-0.5 py-0.5 pr-2 pl-1.5 text-xs font-semibold\",\n        },\n        md: {\n            trailing: \"gap-1 py-0.5 pl-2.5 pr-2 text-sm font-semibold\",\n            leading: \"gap-1 py-0.5 pr-2.5 pl-2 text-sm font-semibold\",\n        },\n        lg: {\n            trailing: \"gap-1 py-1 pl-3 pr-2.5 text-sm font-semibold\",\n            leading: \"gap-1 py-1 pr-3 pl-2.5 text-sm font-semibold\",\n        },\n    };\n    const badgeSizes = {\n        sm: {\n            trailing: \"gap-0.5 py-0.5 pl-2 pr-1.5 text-xs font-semibold\",\n            leading: \"gap-0.5 py-0.5 pr-2 pl-1.5 text-xs font-semibold\",\n        },\n        md: {\n            trailing: \"gap-1 py-0.5 pl-2 pr-1.5 text-sm font-semibold\",\n            leading: \"gap-1 py-0.5 pr-2 pl-1.5 text-sm font-semibold\",\n        },\n        lg: {\n            trailing: \"gap-1 py-1 pl-2.5 pr-2 text-sm font-semibold rounded-lg\",\n            leading: \"gap-1 py-1 pr-2.5 pl-2 text-sm font-semibold rounded-lg\",\n        },\n    };\n\n    const sizes = {\n        [badgeTypes.pillColor]: pillSizes,\n        [badgeTypes.badgeColor]: badgeSizes,\n        [badgeTypes.badgeModern]: badgeSizes,\n    };\n\n    return (\n        <span className={cx(colors.common, sizes[type][size][icon], colors.styles[color].root, className)}>\n            {IconLeading && <IconLeading weight=\"bold\" className={cx(colors.styles[color].addon, badgeIconClassName)} />}\n            {children}\n            {IconTrailing && <IconTrailing weight=\"bold\" className={cx(colors.styles[color].addon, badgeIconClassName)} />}\n        </span>\n    );\n};\n\ninterface BadgeWithFlagProps<T extends BadgeTypes> {\n    type?: T;\n    size?: Sizes;\n    flag?: FlagTypes;\n    color?: BadgeTypeToColorMap<typeof withPillTypes>[T];\n    children: ReactNode;\n}\n\nexport const BadgeWithFlag = <T extends BadgeTypes>(props: BadgeWithFlagProps<T>) => {\n    const { size = \"md\", color = \"gray\", flag = \"AU\", type = \"pill-color\", children } = props;\n\n    const colors = withPillTypes[type];\n\n    const pillSizes = {\n        sm: \"gap-1 py-0.5 pl-0.75 pr-2 text-xs font-semibold\",\n        md: \"gap-1.5 py-0.5 pl-1 pr-2.5 text-sm font-semibold\",\n        lg: \"gap-1.5 py-1 pl-1.5 pr-3 text-sm font-semibold\",\n    };\n    const badgeSizes = {\n        sm: \"gap-1 py-0.5 pl-1 pr-1.5 text-xs font-semibold\",\n        md: \"gap-1.5 py-0.5 pl-1.5 pr-2 text-sm font-semibold\",\n        lg: \"gap-1.5 py-1 pl-2 pr-2.5 text-sm font-semibold rounded-lg\",\n    };\n\n    const sizes = {\n        [badgeTypes.pillColor]: pillSizes,\n        [badgeTypes.badgeColor]: badgeSizes,\n        [badgeTypes.badgeModern]: badgeSizes,\n    };\n\n    return (\n        <span className={cx(colors.common, sizes[type][size], colors.styles[color].root)}>\n            <img src={`https://www.untitledui.com/images/flags/${flag}.svg`} className=\"size-4 max-w-none rounded-full\" alt={`${flag} flag`} />\n            {children}\n        </span>\n    );\n};\n\ninterface BadgeWithImageProps<T extends BadgeTypes> {\n    type?: T;\n    size?: Sizes;\n    imgSrc: string;\n    color?: BadgeTypeToColorMap<typeof withPillTypes>[T];\n    children: ReactNode;\n}\n\nexport const BadgeWithImage = <T extends BadgeTypes>(props: BadgeWithImageProps<T>) => {\n    const { size = \"md\", color = \"gray\", type = \"pill-color\", imgSrc, children } = props;\n\n    const colors = withPillTypes[type];\n\n    const pillSizes = {\n        sm: \"gap-1 py-0.5 pl-0.75 pr-2 text-xs font-semibold\",\n        md: \"gap-1.5 py-0.5 pl-1 pr-2.5 text-sm font-semibold\",\n        lg: \"gap-1.5 py-1 pl-1.5 pr-3 text-sm font-semibold\",\n    };\n    const badgeSizes = {\n        sm: \"gap-1 py-0.5 pl-1 pr-1.5 text-xs font-semibold\",\n        md: \"gap-1.5 py-0.5 pl-1.5 pr-2 text-sm font-semibold\",\n        lg: \"gap-1.5 py-1 pl-2 pr-2.5 text-sm font-semibold rounded-lg\",\n    };\n\n    const sizes = {\n        [badgeTypes.pillColor]: pillSizes,\n        [badgeTypes.badgeColor]: badgeSizes,\n        [badgeTypes.badgeModern]: badgeSizes,\n    };\n\n    return (\n        <span className={cx(colors.common, sizes[type][size], colors.styles[color].root)}>\n            <img src={imgSrc} className=\"size-4 max-w-none rounded-full\" alt=\"Badge image\" />\n            {children}\n        </span>\n    );\n};\n\ninterface BadgeWithButtonProps<T extends BadgeTypes> {\n    type?: T;\n    size?: Sizes;\n    icon?: IconComponentType;\n    color?: BadgeTypeToColorMap<typeof withPillTypes>[T];\n    children: ReactNode;\n    /**\n     * The label for the button.\n     */\n    buttonLabel?: string;\n    /**\n     * The click event handler for the button.\n     */\n    onButtonClick?: MouseEventHandler<HTMLButtonElement>;\n}\n\nexport const BadgeWithButton = <T extends BadgeTypes>(props: BadgeWithButtonProps<T>) => {\n    const { size = \"md\", color = \"gray\", type = \"pill-color\", icon: Icon = CloseX, buttonLabel, children } = props;\n\n    const colors = withPillTypes[type];\n\n    const pillSizes = {\n        sm: \"gap-0.5 py-0.5 pl-2 pr-0.75 text-xs font-semibold\",\n        md: \"gap-0.5 py-0.5 pl-2.5 pr-1 text-sm font-semibold\",\n        lg: \"gap-0.5 py-1 pl-3 pr-1.5 text-sm font-semibold\",\n    };\n    const badgeSizes = {\n        sm: \"gap-0.5 py-0.5 pl-1.5 pr-0.75 text-xs font-semibold\",\n        md: \"gap-0.5 py-0.5 pl-2 pr-1 text-sm font-semibold\",\n        lg: \"gap-0.5 py-1 pl-2.5 pr-1.5 text-sm font-semibold rounded-lg\",\n    };\n\n    const sizes = {\n        [badgeTypes.pillColor]: pillSizes,\n        [badgeTypes.badgeColor]: badgeSizes,\n        [badgeTypes.badgeModern]: badgeSizes,\n    };\n\n    return (\n        <span className={cx(colors.common, sizes[type][size], colors.styles[color].root)}>\n            {children}\n            <button\n                type=\"button\"\n                aria-label={buttonLabel}\n                onClick={props.onButtonClick}\n                className={cx(\n                    \"flex cursor-pointer items-center justify-center p-0.5 transition duration-100 ease-linear\",\n                    focusShadowPlain,\n                    colors.styles[color].addonButton,\n                    type === \"pill-color\" ? \"rounded-full\" : \"rounded-[3px]\",\n                )}\n            >\n                <Icon weight=\"bold\" className={cx(badgeIconClassName, \"transition-inherit-all\")} />\n            </button>\n        </span>\n    );\n};\n\ninterface BadgeIconProps<T extends BadgeTypes> {\n    type?: T;\n    size?: Sizes;\n    icon: IconComponentType;\n    color?: BadgeTypeToColorMap<typeof withPillTypes>[T];\n    children?: ReactNode;\n}\n\nexport const BadgeIcon = <T extends BadgeTypes>(props: BadgeIconProps<T>) => {\n    const { size = \"md\", color = \"gray\", type = \"pill-color\", icon: Icon } = props;\n\n    const colors = withPillTypes[type];\n\n    const pillSizes = {\n        sm: \"p-1.25\",\n        md: \"p-1.5\",\n        lg: \"p-2\",\n    };\n\n    const badgeSizes = {\n        sm: \"p-1.25\",\n        md: \"p-1.5\",\n        lg: \"p-2 rounded-lg\",\n    };\n\n    const sizes = {\n        [badgeTypes.pillColor]: pillSizes,\n        [badgeTypes.badgeColor]: badgeSizes,\n        [badgeTypes.badgeModern]: badgeSizes,\n    };\n\n    return (\n        <span className={cx(colors.common, sizes[type][size], colors.styles[color].root)}>\n            <Icon weight=\"bold\" className={cx(badgeIconClassName, colors.styles[color].addon)} />\n        </span>\n    );\n};\n"]}

package/dist/react/button-group.d.ts

@@ -0,0 +1,43 @@
+import * as react from 'react';
+import { RefAttributes, PropsWithChildren, FC, ReactNode } from 'react';
+import { ToggleButtonGroupProps, ToggleButtonProps } from 'react-aria-components';
+
+declare const styles: {
+    common: {
+        root: string;
+        icon: string;
+    };
+    sizes: {
+        sm: {
+            root: string;
+            icon: string;
+        };
+        md: {
+            root: string;
+            icon: string;
+        };
+        lg: {
+            root: string;
+            icon: string;
+        };
+    };
+};
+type ButtonSize = keyof typeof styles.sizes;
+interface ButtonGroupItemProps extends ToggleButtonProps, RefAttributes<HTMLButtonElement> {
+    iconLeading?: FC<{
+        className?: string;
+    }> | ReactNode;
+    iconTrailing?: FC<{
+        className?: string;
+    }> | ReactNode;
+    onClick?: () => void;
+    className?: string;
+}
+declare const ButtonGroupItem: ({ iconLeading: IconLeading, iconTrailing: IconTrailing, children, className, ...otherProps }: PropsWithChildren<ButtonGroupItemProps>) => react.JSX.Element;
+interface ButtonGroupProps extends Omit<ToggleButtonGroupProps, "orientation">, RefAttributes<HTMLDivElement> {
+    size?: ButtonSize;
+    className?: string;
+}
+declare const ButtonGroup: ({ children, size, className, ...otherProps }: ButtonGroupProps) => react.JSX.Element;
+
+export { ButtonGroup, ButtonGroupItem, styles };

package/dist/react/button-group.js

@@ -0,0 +1,108 @@
+import { createContext, useContext, isValidElement } from 'react';
+import { ToggleButton, ToggleButtonGroup } from 'react-aria-components';
+import { extendTailwindMerge } from 'tailwind-merge';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var twMerge = extendTailwindMerge({
+  extend: {
+    theme: {
+      text: ["display-xs", "display-sm", "display-md", "display-lg", "display-xl", "display-2xl"]
+    }
+  }
+});
+var cx = twMerge;
+function sortCx(classes) {
+  return classes;
+}
+
+// ../../utils/is-react-component.ts
+var isFunctionComponent = (component) => {
+  return typeof component === "function";
+};
+var isClassComponent = (component) => {
+  return typeof component === "function" && component.prototype && (!!component.prototype.isReactComponent || !!component.prototype.render);
+};
+var isForwardRefComponent = (component) => {
+  return typeof component === "object" && component !== null && component.$$typeof.toString() === "Symbol(react.forward_ref)";
+};
+var isReactComponent = (component) => {
+  return isFunctionComponent(component) || isForwardRefComponent(component) || isClassComponent(component);
+};
+var focusShadowSkeuomorphic = "focus-visible:outline-none focus-visible:[box-shadow:var(--shadow-xs-skeuomorphic),0px_0px_0px_2px_var(--color-bg-primary),0px_0px_0px_4px_var(--color-focus-ring)]";
+var styles = sortCx({
+  common: {
+    root: [
+      "group/button-group relative inline-flex h-max cursor-pointer items-center overflow-hidden bg-primary font-semibold whitespace-nowrap text-secondary shadow-skeuomorphic ring-1 ring-primary transition duration-100 ease-linear ring-inset",
+      "pressed:scale-[0.985] pressed:duration-100 pressed:ease-linear motion-reduce:pressed:scale-100",
+      "after:pointer-events-none after:absolute after:inset-0 after:content-[''] after:[box-shadow:inset_0px_-1px_0px_0px_rgba(0,0,0,0.05)]",
+      // Hover and focus styles
+      "hover:bg-primary_hover hover:text-secondary_hover focus-visible:z-10",
+      focusShadowSkeuomorphic,
+      // Disabled styles
+      "disabled:cursor-not-allowed disabled:opacity-50",
+      // Selected styles
+      "selected:bg-primary_hover selected:text-secondary_hover"
+    ].join(" "),
+    icon: "pointer-events-none text-fg-quaternary transition-[inherit] group-hover/button-group:text-fg-quaternary_hover group-selected/button-group:text-fg-quaternary_hover"
+  },
+  sizes: {
+    sm: {
+      root: "gap-1.5 px-3.5 py-2 text-sm not-last:pr-[calc(calc(var(--spacing)*3.5)+1px)] first:rounded-l-lg last:rounded-r-lg data-icon-leading:pl-3 data-icon-only:px-2.5",
+      icon: "size-5"
+    },
+    md: {
+      root: "gap-1.5 px-4 py-2.5 text-sm not-last:pr-[calc(calc(var(--spacing)*4)+1px)] first:rounded-l-lg last:rounded-r-lg data-icon-leading:pl-3.5 data-icon-only:px-3",
+      icon: "size-5"
+    },
+    lg: {
+      root: "gap-2 px-4.5 py-2.5 text-md not-last:pr-[calc(calc(var(--spacing)*4.5)+1px)] first:rounded-l-lg last:rounded-r-lg data-icon-leading:pl-4 data-icon-only:px-3.5",
+      icon: "size-5"
+    }
+  }
+});
+var ButtonGroupContext = createContext({ size: "md" });
+var ButtonGroupItem = ({
+  iconLeading: IconLeading,
+  iconTrailing: IconTrailing,
+  children,
+  className,
+  ...otherProps
+}) => {
+  const context = useContext(ButtonGroupContext);
+  if (!context) {
+    throw new Error("ButtonGroupItem must be used within a ButtonGroup component");
+  }
+  const { size } = context;
+  const isIcon = (IconLeading || IconTrailing) && !children;
+  return /* @__PURE__ */ jsxs(
+    ToggleButton,
+    {
+      ...otherProps,
+      "data-icon-only": isIcon ? true : void 0,
+      "data-icon-leading": IconLeading ? true : void 0,
+      className: cx(styles.common.root, styles.sizes[size].root, className),
+      children: [
+        isReactComponent(IconLeading) && /* @__PURE__ */ jsx(IconLeading, { className: cx(styles.common.icon, styles.sizes[size].icon) }),
+        isValidElement(IconLeading) && IconLeading,
+        children,
+        isReactComponent(IconTrailing) && /* @__PURE__ */ jsx(IconTrailing, { className: cx(styles.common.icon, styles.sizes[size].icon) }),
+        isValidElement(IconTrailing) && IconTrailing
+      ]
+    }
+  );
+};
+var ButtonGroup = ({ children, size = "md", className, ...otherProps }) => {
+  return /* @__PURE__ */ jsx(ButtonGroupContext.Provider, { value: { size }, children: /* @__PURE__ */ jsx(
+    ToggleButtonGroup,
+    {
+      selectionMode: "single",
+      className: cx("relative z-0 inline-flex w-max -space-x-px rounded-lg shadow-xs", className),
+      ...otherProps,
+      children
+    }
+  ) });
+};
+
+export { ButtonGroup, ButtonGroupItem, styles };
+//# sourceMappingURL=button-group.js.map
+//# sourceMappingURL=button-group.js.map

package/dist/react/button-group.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../utils/cx.ts","../../../../utils/is-react-component.ts","../../../../components/base/button-group/button-group.tsx"],"names":["AriaToggleButton","AriaToggleButtonGroup"],"mappings":";;;;;AAEA,IAAM,UAAU,mBAAA,CAAoB;AAAA,EAChC,MAAA,EAAQ;AAAA,IACJ,KAAA,EAAO;AAAA,MACH,MAAM,CAAC,YAAA,EAAc,cAAc,YAAA,EAAc,YAAA,EAAc,cAAc,aAAa;AAAA;AAC9F;AAER,CAAC,CAAA;AAMM,IAAM,EAAA,GAAK,OAAA;AAOX,SAAS,OAAsH,OAAA,EAAe;AACjJ,EAAA,OAAO,OAAA;AACX;;;ACdO,IAAM,mBAAA,GAAsB,CAAC,SAAA,KAA+C;AAC/E,EAAA,OAAO,OAAO,SAAA,KAAc,UAAA;AAChC,CAAA;AAKO,IAAM,gBAAA,GAAmB,CAAC,SAAA,KAAgE;AAC7F,EAAA,OAAO,OAAO,SAAA,KAAc,UAAA,IAAc,SAAA,CAAU,SAAA,KAAc,CAAC,CAAC,SAAA,CAAU,SAAA,CAAU,gBAAA,IAAoB,CAAC,CAAC,UAAU,SAAA,CAAU,MAAA,CAAA;AACtI,CAAA;AAKO,IAAM,qBAAA,GAAwB,CAAC,SAAA,KAAsE;AACxG,EAAA,OAAO,OAAO,cAAc,QAAA,IAAY,SAAA,KAAc,QAAQ,SAAA,CAAU,QAAA,CAAS,UAAS,KAAM,2BAAA;AACpG,CAAA;AAKO,IAAM,gBAAA,GAAmB,CAAC,SAAA,KAAgD;AAC7E,EAAA,OAAO,oBAAoB,SAAS,CAAA,IAAK,sBAAsB,SAAS,CAAA,IAAK,iBAAiB,SAAS,CAAA;AAC3G,CAAA;ACbA,IAAM,uBAAA,GACF,qKAAA;AAEG,IAAM,SAAS,MAAA,CAAO;AAAA,EACzB,MAAA,EAAQ;AAAA,IACJ,IAAA,EAAM;AAAA,MACF,4OAAA;AAAA,MACA,gGAAA;AAAA,MACA,sIAAA;AAAA;AAAA,MAEA,sEAAA;AAAA,MACA,uBAAA;AAAA;AAAA,MAEA,iDAAA;AAAA;AAAA,MAEA;AAAA,KACJ,CAAE,KAAK,GAAG,CAAA;AAAA,IACV,IAAA,EAAM;AAAA,GACV;AAAA,EAEA,KAAA,EAAO;AAAA,IACH,EAAA,EAAI;AAAA,MACA,IAAA,EAAM,gKAAA;AAAA,MACN,IAAA,EAAM;AAAA,KACV;AAAA,IACA,EAAA,EAAI;AAAA,MACA,IAAA,EAAM,8JAAA;AAAA,MACN,IAAA,EAAM;AAAA,KACV;AAAA,IACA,EAAA,EAAI;AAAA,MACA,IAAA,EAAM,gKAAA;AAAA,MACN,IAAA,EAAM;AAAA;AACV;AAER,CAAC;AAID,IAAM,kBAAA,GAAqB,aAAA,CAAoC,EAAE,IAAA,EAAM,MAAM,CAAA;AAStE,IAAM,kBAAkB,CAAC;AAAA,EAC5B,WAAA,EAAa,WAAA;AAAA,EACb,YAAA,EAAc,YAAA;AAAA,EACd,QAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG;AACP,CAAA,KAA+C;AAC3C,EAAA,MAAM,OAAA,GAAU,WAAW,kBAAkB,CAAA;AAE7C,EAAA,IAAI,CAAC,OAAA,EAAS;AACV,IAAA,MAAM,IAAI,MAAM,6DAA6D,CAAA;AAAA,EACjF;AAEA,EAAA,MAAM,EAAE,MAAK,GAAI,OAAA;AAEjB,EAAA,MAAM,MAAA,GAAA,CAAU,WAAA,IAAe,YAAA,KAAiB,CAAC,QAAA;AAEjD,EAAA,uBACI,IAAA;AAAA,IAACA,YAAA;AAAA,IAAA;AAAA,MACI,GAAG,UAAA;AAAA,MACJ,gBAAA,EAAgB,SAAS,IAAA,GAAO,MAAA;AAAA,MAChC,mBAAA,EAAmB,cAAc,IAAA,GAAO,MAAA;AAAA,MACxC,SAAA,EAAW,EAAA,CAAG,MAAA,CAAO,MAAA,CAAO,IAAA,EAAM,OAAO,KAAA,CAAM,IAAI,CAAA,CAAE,IAAA,EAAM,SAAS,CAAA;AAAA,MAEnE,QAAA,EAAA;AAAA,QAAA,gBAAA,CAAiB,WAAW,CAAA,oBAAK,GAAA,CAAC,WAAA,EAAA,EAAY,WAAW,EAAA,CAAG,MAAA,CAAO,MAAA,CAAO,IAAA,EAAM,MAAA,CAAO,KAAA,CAAM,IAAI,CAAA,CAAE,IAAI,CAAA,EAAG,CAAA;AAAA,QAC1G,cAAA,CAAe,WAAW,CAAA,IAAK,WAAA;AAAA,QAE/B,QAAA;AAAA,QAEA,gBAAA,CAAiB,YAAY,CAAA,oBAAK,GAAA,CAAC,gBAAa,SAAA,EAAW,EAAA,CAAG,MAAA,CAAO,MAAA,CAAO,MAAM,MAAA,CAAO,KAAA,CAAM,IAAI,CAAA,CAAE,IAAI,CAAA,EAAG,CAAA;AAAA,QAC5G,cAAA,CAAe,YAAY,CAAA,IAAK;AAAA;AAAA;AAAA,GACrC;AAER;AAOO,IAAM,WAAA,GAAc,CAAC,EAAE,QAAA,EAAU,OAAO,IAAA,EAAM,SAAA,EAAW,GAAG,UAAA,EAAW,KAAwB;AAClG,EAAA,2BACK,kBAAA,CAAmB,QAAA,EAAnB,EAA4B,KAAA,EAAO,EAAE,MAAK,EACvC,QAAA,kBAAA,GAAA;AAAA,IAACC,iBAAA;AAAA,IAAA;AAAA,MACG,aAAA,EAAc,QAAA;AAAA,MACd,SAAA,EAAW,EAAA,CAAG,iEAAA,EAAmE,SAAS,CAAA;AAAA,MACzF,GAAG,UAAA;AAAA,MAEH;AAAA;AAAA,GACL,EACJ,CAAA;AAER","file":"button-group.js","sourcesContent":["import { extendTailwindMerge } from \"tailwind-merge\";\n\nconst twMerge = extendTailwindMerge({\n    extend: {\n        theme: {\n            text: [\"display-xs\", \"display-sm\", \"display-md\", \"display-lg\", \"display-xl\", \"display-2xl\"],\n        },\n    },\n});\n\n/**\n * This function is a wrapper around the twMerge function.\n * It is used to merge the classes inside style objects.\n */\nexport const cx = twMerge;\n\n/**\n * This function does nothing besides helping us to be able to\n * sort the classes inside style objects which is not supported\n * by the Tailwind IntelliSense by default.\n */\nexport function sortCx<T extends Record<string, string | number | Record<string, string | number | Record<string, string | number>>>>(classes: T): T {\n    return classes;\n}\n","/* We cannot use type `unknown` instead of `any` here because it will break the type assertion `isReactComponent` function is providing. */\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport type React from \"react\";\n\ntype ReactComponent = React.FC<any> | React.ComponentClass<any, any>;\n\n/**\n * Checks if a given value is a function component.\n */\nexport const isFunctionComponent = (component: any): component is React.FC<any> => {\n    return typeof component === \"function\";\n};\n\n/**\n * Checks if a given value is a class component.\n */\nexport const isClassComponent = (component: any): component is React.ComponentClass<any, any> => {\n    return typeof component === \"function\" && component.prototype && (!!component.prototype.isReactComponent || !!component.prototype.render);\n};\n\n/**\n * Checks if a given value is a forward ref component.\n */\nexport const isForwardRefComponent = (component: any): component is React.ForwardRefExoticComponent<any> => {\n    return typeof component === \"object\" && component !== null && component.$$typeof.toString() === \"Symbol(react.forward_ref)\";\n};\n\n/**\n * Checks if a given value is a valid React component.\n */\nexport const isReactComponent = (component: any): component is ReactComponent => {\n    return isFunctionComponent(component) || isForwardRefComponent(component) || isClassComponent(component);\n};\n","\"use client\";\n\nimport { type FC, type PropsWithChildren, type ReactNode, type RefAttributes, createContext, isValidElement, useContext } from \"react\";\nimport {\n    ToggleButton as AriaToggleButton,\n    ToggleButtonGroup as AriaToggleButtonGroup,\n    type ToggleButtonGroupProps,\n    type ToggleButtonProps,\n} from \"react-aria-components\";\nimport { cx, sortCx } from \"@/utils/cx\";\nimport { isReactComponent } from \"@/utils/is-react-component\";\n\n/**\n * Figma: Button groups (16:399)\n *\n * Segmented control items — secondary skeuomorphic surface + spread focus ring.\n */\n\n/** Spread focus ring — 2px surface gap + 4px focus-ring (matches Button secondary). */\nconst focusShadowSkeuomorphic =\n    \"focus-visible:outline-none focus-visible:[box-shadow:var(--shadow-xs-skeuomorphic),0px_0px_0px_2px_var(--color-bg-primary),0px_0px_0px_4px_var(--color-focus-ring)]\";\n\nexport const styles = sortCx({\n    common: {\n        root: [\n            \"group/button-group relative inline-flex h-max cursor-pointer items-center overflow-hidden bg-primary font-semibold whitespace-nowrap text-secondary shadow-skeuomorphic ring-1 ring-primary transition duration-100 ease-linear ring-inset\",\n            \"pressed:scale-[0.985] pressed:duration-100 pressed:ease-linear motion-reduce:pressed:scale-100\",\n            \"after:pointer-events-none after:absolute after:inset-0 after:content-[''] after:[box-shadow:inset_0px_-1px_0px_0px_rgba(0,0,0,0.05)]\",\n            // Hover and focus styles\n            \"hover:bg-primary_hover hover:text-secondary_hover focus-visible:z-10\",\n            focusShadowSkeuomorphic,\n            // Disabled styles\n            \"disabled:cursor-not-allowed disabled:opacity-50\",\n            // Selected styles\n            \"selected:bg-primary_hover selected:text-secondary_hover\",\n        ].join(\" \"),\n        icon: \"pointer-events-none text-fg-quaternary transition-[inherit] group-hover/button-group:text-fg-quaternary_hover group-selected/button-group:text-fg-quaternary_hover\",\n    },\n\n    sizes: {\n        sm: {\n            root: \"gap-1.5 px-3.5 py-2 text-sm not-last:pr-[calc(calc(var(--spacing)*3.5)+1px)] first:rounded-l-lg last:rounded-r-lg data-icon-leading:pl-3 data-icon-only:px-2.5\",\n            icon: \"size-5\",\n        },\n        md: {\n            root: \"gap-1.5 px-4 py-2.5 text-sm not-last:pr-[calc(calc(var(--spacing)*4)+1px)] first:rounded-l-lg last:rounded-r-lg data-icon-leading:pl-3.5 data-icon-only:px-3\",\n            icon: \"size-5\",\n        },\n        lg: {\n            root: \"gap-2 px-4.5 py-2.5 text-md not-last:pr-[calc(calc(var(--spacing)*4.5)+1px)] first:rounded-l-lg last:rounded-r-lg data-icon-leading:pl-4 data-icon-only:px-3.5\",\n            icon: \"size-5\",\n        },\n    },\n});\n\ntype ButtonSize = keyof typeof styles.sizes;\n\nconst ButtonGroupContext = createContext<{ size: ButtonSize }>({ size: \"md\" });\n\ninterface ButtonGroupItemProps extends ToggleButtonProps, RefAttributes<HTMLButtonElement> {\n    iconLeading?: FC<{ className?: string }> | ReactNode;\n    iconTrailing?: FC<{ className?: string }> | ReactNode;\n    onClick?: () => void;\n    className?: string;\n}\n\nexport const ButtonGroupItem = ({\n    iconLeading: IconLeading,\n    iconTrailing: IconTrailing,\n    children,\n    className,\n    ...otherProps\n}: PropsWithChildren<ButtonGroupItemProps>) => {\n    const context = useContext(ButtonGroupContext);\n\n    if (!context) {\n        throw new Error(\"ButtonGroupItem must be used within a ButtonGroup component\");\n    }\n\n    const { size } = context;\n\n    const isIcon = (IconLeading || IconTrailing) && !children;\n\n    return (\n        <AriaToggleButton\n            {...otherProps}\n            data-icon-only={isIcon ? true : undefined}\n            data-icon-leading={IconLeading ? true : undefined}\n            className={cx(styles.common.root, styles.sizes[size].root, className)}\n        >\n            {isReactComponent(IconLeading) && <IconLeading className={cx(styles.common.icon, styles.sizes[size].icon)} />}\n            {isValidElement(IconLeading) && IconLeading}\n\n            {children}\n\n            {isReactComponent(IconTrailing) && <IconTrailing className={cx(styles.common.icon, styles.sizes[size].icon)} />}\n            {isValidElement(IconTrailing) && IconTrailing}\n        </AriaToggleButton>\n    );\n};\n\ninterface ButtonGroupProps extends Omit<ToggleButtonGroupProps, \"orientation\">, RefAttributes<HTMLDivElement> {\n    size?: ButtonSize;\n    className?: string;\n}\n\nexport const ButtonGroup = ({ children, size = \"md\", className, ...otherProps }: ButtonGroupProps) => {\n    return (\n        <ButtonGroupContext.Provider value={{ size }}>\n            <AriaToggleButtonGroup\n                selectionMode=\"single\"\n                className={cx(\"relative z-0 inline-flex w-max -space-x-px rounded-lg shadow-xs\", className)}\n                {...otherProps}\n            >\n                {children}\n            </AriaToggleButtonGroup>\n        </ButtonGroupContext.Provider>\n    );\n};\n"]}

package/dist/react/button-utility.d.ts

@@ -0,0 +1,47 @@
+import * as react from 'react';
+import { FC, ReactNode, DetailedHTMLProps, ButtonHTMLAttributes, AnchorHTMLAttributes } from 'react';
+import { Placement } from 'react-aria';
+import { ButtonProps as ButtonProps$1, LinkProps as LinkProps$1 } from 'react-aria-components';
+
+declare const styles: {
+    secondary: string;
+    tertiary: string;
+};
+/**
+ * Common props shared between button and anchor variants
+ */
+interface CommonProps {
+    /** Disables the button and shows a disabled state */
+    isDisabled?: boolean;
+    /** The size variant of the button */
+    size?: "xs" | "sm";
+    /** The color variant of the button */
+    color?: "secondary" | "tertiary";
+    /** The icon to display in the button */
+    icon?: FC<{
+        className?: string;
+    }> | ReactNode;
+    /** The tooltip to display when hovering over the button */
+    tooltip?: string;
+    /** The placement of the tooltip */
+    tooltipPlacement?: Placement;
+}
+/**
+ * Props for the button variant (non-link)
+ */
+interface ButtonProps extends CommonProps, DetailedHTMLProps<Omit<ButtonHTMLAttributes<HTMLButtonElement>, "color" | "slot">, HTMLButtonElement> {
+    /** Slot name for react-aria component */
+    slot?: ButtonProps$1["slot"];
+}
+/**
+ * Props for the link variant (anchor tag)
+ */
+interface LinkProps extends CommonProps, DetailedHTMLProps<Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "color">, HTMLAnchorElement> {
+    /** Options for the configured client side router. */
+    routerOptions?: LinkProps$1["routerOptions"];
+}
+/** Union type of button and link props */
+type Props = ButtonProps | LinkProps;
+declare const ButtonUtility: ({ tooltip, className, isDisabled, icon: Icon, size, color, tooltipPlacement, ...otherProps }: Props) => react.JSX.Element;
+
+export { type ButtonProps, ButtonUtility, type CommonProps, type Props, styles };

package/dist/react/button-utility.js

@@ -0,0 +1,158 @@
+import { isValidElement } from 'react';
+import { Link, Button, TooltipTrigger, Tooltip as Tooltip$1, OverlayArrow } from 'react-aria-components';
+import { extendTailwindMerge } from 'tailwind-merge';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var twMerge = extendTailwindMerge({
+  extend: {
+    theme: {
+      text: ["display-xs", "display-sm", "display-md", "display-lg", "display-xl", "display-2xl"]
+    }
+  }
+});
+var cx = twMerge;
+var Tooltip = ({
+  title,
+  description,
+  children,
+  arrow = false,
+  delay = 100,
+  closeDelay = 0,
+  trigger,
+  isDisabled,
+  isOpen,
+  defaultOpen,
+  offset = 6,
+  crossOffset,
+  placement = "top",
+  onOpenChange,
+  ...tooltipProps
+}) => {
+  const isTopOrBottomLeft = ["top left", "top end", "bottom left", "bottom end"].includes(placement);
+  const isTopOrBottomRight = ["top right", "top start", "bottom right", "bottom start"].includes(placement);
+  const calculatedCrossOffset = isTopOrBottomLeft ? -12 : isTopOrBottomRight ? 12 : 0;
+  return /* @__PURE__ */ jsxs(TooltipTrigger, { ...{ trigger, delay, closeDelay, isDisabled, isOpen, defaultOpen, onOpenChange }, children: [
+    children,
+    /* @__PURE__ */ jsx(
+      Tooltip$1,
+      {
+        ...tooltipProps,
+        offset,
+        placement,
+        crossOffset: crossOffset ?? calculatedCrossOffset,
+        className: ({ isEntering, isExiting }) => cx(isEntering && "ease-out animate-in", isExiting && "ease-in animate-out"),
+        children: ({ isEntering, isExiting }) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cx(
+              "z-50 flex max-w-xs origin-(--trigger-anchor-point) flex-col items-start gap-1 rounded-lg bg-primary-solid px-3 shadow-lg will-change-transform",
+              description ? "py-3" : "py-2",
+              isEntering && "ease-out animate-in fade-in zoom-in-95 in-placement-left:slide-in-from-right-0.5 in-placement-right:slide-in-from-left-0.5 in-placement-top:slide-in-from-bottom-0.5 in-placement-bottom:slide-in-from-top-0.5",
+              isExiting && "ease-in animate-out fade-out zoom-out-95 in-placement-left:slide-out-to-right-0.5 in-placement-right:slide-out-to-left-0.5 in-placement-top:slide-out-to-bottom-0.5 in-placement-bottom:slide-out-to-top-0.5"
+            ),
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold text-white", children: title }),
+              description && /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-tooltip-supporting-text", children: description }),
+              arrow && /* @__PURE__ */ jsx(OverlayArrow, { children: /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  viewBox: "0 0 100 100",
+                  className: "size-2.5 fill-bg-primary-solid in-placement-left:-rotate-90 in-placement-right:rotate-90 in-placement-top:rotate-0 in-placement-bottom:rotate-180",
+                  children: /* @__PURE__ */ jsx("path", { d: "M0,0 L35.858,35.858 Q50,50 64.142,35.858 L100,0 Z" })
+                }
+              ) })
+            ]
+          }
+        )
+      }
+    )
+  ] });
+};
+
+// ../../utils/is-react-component.ts
+var isFunctionComponent = (component) => {
+  return typeof component === "function";
+};
+var isClassComponent = (component) => {
+  return typeof component === "function" && component.prototype && (!!component.prototype.isReactComponent || !!component.prototype.render);
+};
+var isForwardRefComponent = (component) => {
+  return typeof component === "object" && component !== null && component.$$typeof.toString() === "Symbol(react.forward_ref)";
+};
+var isReactComponent = (component) => {
+  return isFunctionComponent(component) || isForwardRefComponent(component) || isClassComponent(component);
+};
+var focusShadowPlain = "focus-visible:outline-none focus-visible:[box-shadow:0px_0px_0px_2px_var(--color-bg-primary),0px_0px_0px_4px_var(--color-focus-ring)]";
+var focusShadowSecondary = "focus-visible:outline-none focus-visible:[box-shadow:0px_1px_2px_0px_rgba(0,0,0,0.05),0px_0px_0px_2px_var(--color-bg-primary),0px_0px_0px_4px_var(--color-focus-ring)]";
+var secondaryInnerShadow = "after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] after:content-[''] after:[box-shadow:inset_0px_-1px_0px_0px_rgba(0,0,0,0.05)]";
+var styles = {
+  secondary: [
+    "relative overflow-hidden border border-solid border-primary bg-primary text-fg-quaternary shadow-xs",
+    secondaryInnerShadow,
+    focusShadowSecondary,
+    "hover:bg-primary_hover hover:text-fg-quaternary_hover",
+    "disabled:opacity-50"
+  ].join(" "),
+  tertiary: [
+    "text-fg-quaternary",
+    focusShadowPlain,
+    "hover:bg-primary_hover hover:text-fg-quaternary_hover",
+    "disabled:opacity-50"
+  ].join(" ")
+};
+var ButtonUtility = ({
+  tooltip,
+  className,
+  isDisabled,
+  icon: Icon,
+  size = "sm",
+  color = "secondary",
+  tooltipPlacement = "top",
+  ...otherProps
+}) => {
+  const href = "href" in otherProps ? otherProps.href : void 0;
+  const Component = href ? Link : Button;
+  let props = {};
+  if (href) {
+    props = {
+      ...otherProps,
+      href: isDisabled ? void 0 : href,
+      // Since anchor elements do not support the `disabled` attribute and state,
+      // we need to specify `data-rac` and `data-disabled` in classes.
+      ...isDisabled ? { "data-rac": true, "data-disabled": true } : {}
+    };
+  } else {
+    props = {
+      ...otherProps,
+      type: otherProps.type || "button",
+      isDisabled
+    };
+  }
+  const content = /* @__PURE__ */ jsxs(
+    Component,
+    {
+      "aria-label": tooltip,
+      ...props,
+      className: cx(
+        "group relative inline-flex h-max cursor-pointer items-center justify-center rounded-full p-1.5 transition duration-100 ease-linear disabled:cursor-not-allowed pressed:scale-[0.985] pressed:duration-100 motion-reduce:pressed:scale-100",
+        styles[color],
+        // Icon styles
+        "*:data-icon:pointer-events-none *:data-icon:shrink-0 *:data-icon:text-current *:data-icon:transition-inherit-all",
+        size === "xs" ? "*:data-icon:size-4" : "*:data-icon:size-5",
+        className
+      ),
+      children: [
+        isReactComponent(Icon) && /* @__PURE__ */ jsx(Icon, { "data-icon": true }),
+        isValidElement(Icon) && Icon
+      ]
+    }
+  );
+  if (tooltip) {
+    return /* @__PURE__ */ jsx(Tooltip, { title: tooltip, placement: tooltipPlacement, isDisabled, offset: size === "xs" ? 4 : 6, children: content });
+  }
+  return content;
+};
+
+export { ButtonUtility, styles };
+//# sourceMappingURL=button-utility.js.map
+//# sourceMappingURL=button-utility.js.map

package/dist/react/button-utility.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../utils/cx.ts","../../../../components/base/tooltip/tooltip.tsx","../../../../utils/is-react-component.ts","../../../../components/base/buttons/button-utility.tsx"],"names":["AriaTooltipTrigger","AriaTooltip","AriaOverlayArrow","AriaLink","AriaButton","jsxs","jsx"],"mappings":"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","file":"button-utility.js","sourcesContent":["import { extendTailwindMerge } from \"tailwind-merge\";\n\nconst twMerge = extendTailwindMerge({\n    extend: {\n        theme: {\n            text: [\"display-xs\", \"display-sm\", \"display-md\", \"display-lg\", \"display-xl\", \"display-2xl\"],\n        },\n    },\n});\n\n/**\n * This function is a wrapper around the twMerge function.\n * It is used to merge the classes inside style objects.\n */\nexport const cx = twMerge;\n\n/**\n * This function does nothing besides helping us to be able to\n * sort the classes inside style objects which is not supported\n * by the Tailwind IntelliSense by default.\n */\nexport function sortCx<T extends Record<string, string | number | Record<string, string | number | Record<string, string | number>>>>(classes: T): T {\n    return classes;\n}\n","\"use client\";\n\n/** Figma: Tooltip (1052:485) */\n\nimport type { ReactNode } from \"react\";\nimport type {\n    ButtonProps as AriaButtonProps,\n    TooltipProps as AriaTooltipProps,\n    TooltipTriggerComponentProps as AriaTooltipTriggerComponentProps,\n} from \"react-aria-components\";\nimport { Button as AriaButton, OverlayArrow as AriaOverlayArrow, Tooltip as AriaTooltip, TooltipTrigger as AriaTooltipTrigger } from \"react-aria-components\";\nimport { cx } from \"@/utils/cx\";\n\ninterface TooltipProps extends AriaTooltipTriggerComponentProps, Omit<AriaTooltipProps, \"children\"> {\n    /**\n     * The title of the tooltip.\n     */\n    title: ReactNode;\n    /**\n     * The description of the tooltip.\n     */\n    description?: ReactNode;\n    /**\n     * Whether to show the arrow on the tooltip.\n     *\n     * @default false\n     */\n    arrow?: boolean;\n    /**\n     * Delay in milliseconds before the tooltip is shown on first hover.\n     *\n     * @default 100\n     */\n    delay?: number;\n}\n\nexport const Tooltip = ({\n    title,\n    description,\n    children,\n    arrow = false,\n    delay = 100,\n    closeDelay = 0,\n    trigger,\n    isDisabled,\n    isOpen,\n    defaultOpen,\n    offset = 6,\n    crossOffset,\n    placement = \"top\",\n    onOpenChange,\n    ...tooltipProps\n}: TooltipProps) => {\n    const isTopOrBottomLeft = [\"top left\", \"top end\", \"bottom left\", \"bottom end\"].includes(placement);\n    const isTopOrBottomRight = [\"top right\", \"top start\", \"bottom right\", \"bottom start\"].includes(placement);\n    // Set negative cross offset for left and right placement to visually balance the tooltip.\n    const calculatedCrossOffset = isTopOrBottomLeft ? -12 : isTopOrBottomRight ? 12 : 0;\n\n    return (\n        <AriaTooltipTrigger {...{ trigger, delay, closeDelay, isDisabled, isOpen, defaultOpen, onOpenChange }}>\n            {children}\n\n            <AriaTooltip\n                {...tooltipProps}\n                offset={offset}\n                placement={placement}\n                crossOffset={crossOffset ?? calculatedCrossOffset}\n                className={({ isEntering, isExiting }) => cx(isEntering && \"ease-out animate-in\", isExiting && \"ease-in animate-out\")}\n            >\n                {({ isEntering, isExiting }) => (\n                    <div\n                        className={cx(\n                            \"z-50 flex max-w-xs origin-(--trigger-anchor-point) flex-col items-start gap-1 rounded-lg bg-primary-solid px-3 shadow-lg will-change-transform\",\n                            description ? \"py-3\" : \"py-2\",\n\n                            isEntering &&\n                                \"ease-out animate-in fade-in zoom-in-95 in-placement-left:slide-in-from-right-0.5 in-placement-right:slide-in-from-left-0.5 in-placement-top:slide-in-from-bottom-0.5 in-placement-bottom:slide-in-from-top-0.5\",\n                            isExiting &&\n                                \"ease-in animate-out fade-out zoom-out-95 in-placement-left:slide-out-to-right-0.5 in-placement-right:slide-out-to-left-0.5 in-placement-top:slide-out-to-bottom-0.5 in-placement-bottom:slide-out-to-top-0.5\",\n                        )}\n                    >\n                        <span className=\"text-xs font-semibold text-white\">{title}</span>\n\n                        {description && <span className=\"text-xs font-medium text-tooltip-supporting-text\">{description}</span>}\n\n                        {arrow && (\n                            <AriaOverlayArrow>\n                                <svg\n                                    viewBox=\"0 0 100 100\"\n                                    className=\"size-2.5 fill-bg-primary-solid in-placement-left:-rotate-90 in-placement-right:rotate-90 in-placement-top:rotate-0 in-placement-bottom:rotate-180\"\n                                >\n                                    <path d=\"M0,0 L35.858,35.858 Q50,50 64.142,35.858 L100,0 Z\" />\n                                </svg>\n                            </AriaOverlayArrow>\n                        )}\n                    </div>\n                )}\n            </AriaTooltip>\n        </AriaTooltipTrigger>\n    );\n};\n\ninterface TooltipTriggerProps extends AriaButtonProps {}\n\nexport const TooltipTrigger = ({ children, className, ...buttonProps }: TooltipTriggerProps) => {\n    return (\n        <AriaButton {...buttonProps} className={(values) => cx(\"h-max w-max outline-hidden\", typeof className === \"function\" ? className(values) : className)}>\n            {children}\n        </AriaButton>\n    );\n};\n","/* We cannot use type `unknown` instead of `any` here because it will break the type assertion `isReactComponent` function is providing. */\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport type React from \"react\";\n\ntype ReactComponent = React.FC<any> | React.ComponentClass<any, any>;\n\n/**\n * Checks if a given value is a function component.\n */\nexport const isFunctionComponent = (component: any): component is React.FC<any> => {\n    return typeof component === \"function\";\n};\n\n/**\n * Checks if a given value is a class component.\n */\nexport const isClassComponent = (component: any): component is React.ComponentClass<any, any> => {\n    return typeof component === \"function\" && component.prototype && (!!component.prototype.isReactComponent || !!component.prototype.render);\n};\n\n/**\n * Checks if a given value is a forward ref component.\n */\nexport const isForwardRefComponent = (component: any): component is React.ForwardRefExoticComponent<any> => {\n    return typeof component === \"object\" && component !== null && component.$$typeof.toString() === \"Symbol(react.forward_ref)\";\n};\n\n/**\n * Checks if a given value is a valid React component.\n */\nexport const isReactComponent = (component: any): component is ReactComponent => {\n    return isFunctionComponent(component) || isForwardRefComponent(component) || isClassComponent(component);\n};\n","\"use client\";\n\nimport type { AnchorHTMLAttributes, ButtonHTMLAttributes, DetailedHTMLProps, FC, ReactNode } from \"react\";\nimport { isValidElement } from \"react\";\nimport type { Placement } from \"react-aria\";\nimport type { ButtonProps as AriaButtonProps, LinkProps as AriaLinkProps } from \"react-aria-components\";\nimport { Button as AriaButton, Link as AriaLink } from \"react-aria-components\";\nimport { Tooltip } from \"@/components/base/tooltip/tooltip\";\nimport { cx } from \"@/utils/cx\";\nimport { isReactComponent } from \"@/utils/is-react-component\";\n\n/**\n * Figma: Buttons/Button utility (8003:526508)\n *\n * Secondary — border-primary + shadow-xs + skeuomorphic inset rim.\n * Tertiary — transparent; hover bg-primary_hover.\n * Focus: spread-shadow ring (2px surface gap + 4px focus-ring), not outline.\n */\n\n/** Plain focus — Tertiary (Figma Focus rings/focus-ring). */\nconst focusShadowPlain =\n    \"focus-visible:outline-none focus-visible:[box-shadow:0px_0px_0px_2px_var(--color-bg-primary),0px_0px_0px_4px_var(--color-focus-ring)]\";\n\n/** Secondary focus — shadow-xs + spread focus ring (Figma focus-ring-shadow-xs-skeuomorphic). */\nconst focusShadowSecondary =\n    \"focus-visible:outline-none focus-visible:[box-shadow:0px_1px_2px_0px_rgba(0,0,0,0.05),0px_0px_0px_2px_var(--color-bg-primary),0px_0px_0px_4px_var(--color-focus-ring)]\";\n\nconst secondaryInnerShadow =\n    \"after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] after:content-[''] after:[box-shadow:inset_0px_-1px_0px_0px_rgba(0,0,0,0.05)]\";\n\nexport const styles = {\n    secondary: [\n        \"relative overflow-hidden border border-solid border-primary bg-primary text-fg-quaternary shadow-xs\",\n        secondaryInnerShadow,\n        focusShadowSecondary,\n        \"hover:bg-primary_hover hover:text-fg-quaternary_hover\",\n        \"disabled:opacity-50\",\n    ].join(\" \"),\n    tertiary: [\n        \"text-fg-quaternary\",\n        focusShadowPlain,\n        \"hover:bg-primary_hover hover:text-fg-quaternary_hover\",\n        \"disabled:opacity-50\",\n    ].join(\" \"),\n};\n\n/**\n * Common props shared between button and anchor variants\n */\nexport interface CommonProps {\n    /** Disables the button and shows a disabled state */\n    isDisabled?: boolean;\n    /** The size variant of the button */\n    size?: \"xs\" | \"sm\";\n    /** The color variant of the button */\n    color?: \"secondary\" | \"tertiary\";\n    /** The icon to display in the button */\n    icon?: FC<{ className?: string }> | ReactNode;\n    /** The tooltip to display when hovering over the button */\n    tooltip?: string;\n    /** The placement of the tooltip */\n    tooltipPlacement?: Placement;\n}\n\n/**\n * Props for the button variant (non-link)\n */\nexport interface ButtonProps extends CommonProps, DetailedHTMLProps<Omit<ButtonHTMLAttributes<HTMLButtonElement>, \"color\" | \"slot\">, HTMLButtonElement> {\n    /** Slot name for react-aria component */\n    slot?: AriaButtonProps[\"slot\"];\n}\n\n/**\n * Props for the link variant (anchor tag)\n */\ninterface LinkProps extends CommonProps, DetailedHTMLProps<Omit<AnchorHTMLAttributes<HTMLAnchorElement>, \"color\">, HTMLAnchorElement> {\n    /** Options for the configured client side router. */\n    routerOptions?: AriaLinkProps[\"routerOptions\"];\n}\n\n/** Union type of button and link props */\nexport type Props = ButtonProps | LinkProps;\n\nexport const ButtonUtility = ({\n    tooltip,\n    className,\n    isDisabled,\n    icon: Icon,\n    size = \"sm\",\n    color = \"secondary\",\n    tooltipPlacement = \"top\",\n    ...otherProps\n}: Props) => {\n    const href = \"href\" in otherProps ? otherProps.href : undefined;\n    const Component = href ? AriaLink : AriaButton;\n\n    let props = {};\n\n    if (href) {\n        props = {\n            ...otherProps,\n\n            href: isDisabled ? undefined : href,\n\n            // Since anchor elements do not support the `disabled` attribute and state,\n            // we need to specify `data-rac` and `data-disabled` in classes.\n            ...(isDisabled ? { \"data-rac\": true, \"data-disabled\": true } : {}),\n        };\n    } else {\n        props = {\n            ...otherProps,\n\n            type: otherProps.type || \"button\",\n            isDisabled,\n        };\n    }\n\n    const content = (\n        <Component\n            aria-label={tooltip}\n            {...props}\n            className={cx(\n                \"group relative inline-flex h-max cursor-pointer items-center justify-center rounded-full p-1.5 transition duration-100 ease-linear disabled:cursor-not-allowed pressed:scale-[0.985] pressed:duration-100 motion-reduce:pressed:scale-100\",\n                styles[color],\n\n                // Icon styles\n                \"*:data-icon:pointer-events-none *:data-icon:shrink-0 *:data-icon:text-current *:data-icon:transition-inherit-all\",\n                size === \"xs\" ? \"*:data-icon:size-4\" : \"*:data-icon:size-5\",\n\n                className,\n            )}\n        >\n            {isReactComponent(Icon) && <Icon data-icon />}\n            {isValidElement(Icon) && Icon}\n        </Component>\n    );\n\n    if (tooltip) {\n        return (\n            <Tooltip title={tooltip} placement={tooltipPlacement} isDisabled={isDisabled} offset={size === \"xs\" ? 4 : 6}>\n                {content}\n            </Tooltip>\n        );\n    }\n\n    return content;\n};\n"]}