@brutalcomponent/react/dist/chunk-KMHX64YN.mjs.map

Brutalist React components

{"version":3,"sources":["../src/utils/cn.utils.ts"],"names":[],"mappings":"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","file":"chunk-KMHX64YN.mjs","sourcesContent":["/**\n * @file src/utils/cn.utils.ts\n * @author David (https://dvh.sh)\n * @license MIT\n *\n * @created Thu Sep 11 2025\n * @updated Sat Sep 13 2025\n *\n * @description\n * Universal classname utilities for all brutal components\n */\nimport { clsx, type ClassValue } from \"clsx\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return clsx(inputs);\n}\n\n// All brutal colors\nexport const brutalColors = [\n  \"brutal-pink\",\n  \"brutal-peach\",\n  \"brutal-yellow\",\n  \"brutal-mint\",\n  \"brutal-sky\",\n  \"brutal-lavender\",\n  \"brutal-coral\",\n] as const;\n\nexport type BrutalColor = (typeof brutalColors)[number];\n\n// Static class mappings for all color variants\nexport const brutalAccentClasses = {\n  \"brutal-pink\": {\n    text: \"text-brutal-pink\",\n    bg: \"bg-brutal-pink\",\n    border: \"border-brutal-pink\",\n    borderLeft: \"border-l-brutal-pink\",\n    borderRight: \"border-r-brutal-pink\",\n    borderTop: \"border-t-brutal-pink\",\n    borderBottom: \"border-b-brutal-pink\",\n    ring: \"ring-brutal-pink\",\n  },\n  \"brutal-peach\": {\n    text: \"text-brutal-peach\",\n    bg: \"bg-brutal-peach\",\n    border: \"border-brutal-peach\",\n    borderLeft: \"border-l-brutal-peach\",\n    borderRight: \"border-r-brutal-peach\",\n    borderTop: \"border-t-brutal-peach\",\n    borderBottom: \"border-b-brutal-peach\",\n    ring: \"ring-brutal-peach\",\n  },\n  \"brutal-yellow\": {\n    text: \"text-brutal-yellow\",\n    bg: \"bg-brutal-yellow\",\n    border: \"border-brutal-yellow\",\n    borderLeft: \"border-l-brutal-yellow\",\n    borderRight: \"border-r-brutal-yellow\",\n    borderTop: \"border-t-brutal-yellow\",\n    borderBottom: \"border-b-brutal-yellow\",\n    ring: \"ring-brutal-yellow\",\n  },\n  \"brutal-mint\": {\n    text: \"text-brutal-mint\",\n    bg: \"bg-brutal-mint\",\n    border: \"border-brutal-mint\",\n    borderLeft: \"border-l-brutal-mint\",\n    borderRight: \"border-r-brutal-mint\",\n    borderTop: \"border-t-brutal-mint\",\n    borderBottom: \"border-b-brutal-mint\",\n    ring: \"ring-brutal-mint\",\n  },\n  \"brutal-sky\": {\n    text: \"text-brutal-sky\",\n    bg: \"bg-brutal-sky\",\n    border: \"border-brutal-sky\",\n    borderLeft: \"border-l-brutal-sky\",\n    borderRight: \"border-r-brutal-sky\",\n    borderTop: \"border-t-brutal-sky\",\n    borderBottom: \"border-b-brutal-sky\",\n    ring: \"ring-brutal-sky\",\n  },\n  \"brutal-lavender\": {\n    text: \"text-brutal-lavender\",\n    bg: \"bg-brutal-lavender\",\n    border: \"border-brutal-lavender\",\n    borderLeft: \"border-l-brutal-lavender\",\n    borderRight: \"border-r-brutal-lavender\",\n    borderTop: \"border-t-brutal-lavender\",\n    borderBottom: \"border-b-brutal-lavender\",\n    ring: \"ring-brutal-lavender\",\n  },\n  \"brutal-coral\": {\n    text: \"text-brutal-coral\",\n    bg: \"bg-brutal-coral\",\n    border: \"border-brutal-coral\",\n    borderLeft: \"border-l-brutal-coral\",\n    borderRight: \"border-r-brutal-coral\",\n    borderTop: \"border-t-brutal-coral\",\n    borderBottom: \"border-b-brutal-coral\",\n    ring: \"ring-brutal-coral\",\n  },\n} as const;\n\n// Main utility - works for ANY component\nexport const getAccentClasses = (accentColor: string = \"brutal-pink\") => {\n  // Normalize the color name\n  const normalizedColor = accentColor.startsWith(\"brutal-\")\n    ? accentColor\n    : `brutal-${accentColor}`;\n\n  return (\n    brutalAccentClasses[normalizedColor as keyof typeof brutalAccentClasses] ||\n    brutalAccentClasses[\"brutal-pink\"]\n  ); // fallback\n};\n\n// Get a specific accent class variant\nexport const getAccentClass = (\n  accentColor: string,\n  variant: keyof (typeof brutalAccentClasses)[\"brutal-pink\"],\n) => {\n  const classes = getAccentClasses(accentColor);\n  return classes[variant];\n};\n\n// Universal brutal base classes for any component\nexport const brutalBase = {\n  // Core styling\n  surface: \"bg-brutal-white\",\n  border: \"border-4 border-brutal-black\",\n  shadow: \"shadow-brutal\",\n\n  // Interactive states\n  hover: \"hover:shadow-brutal-md hover:-translate-y-0.5\",\n  active: \"active:shadow-brutal-sm active:translate-y-0.5\",\n  focus: \"focus:outline-none focus:shadow-brutal-lg\",\n\n  // Transforms\n  skew: \"transform -rotate-1 hover:rotate-0\",\n  skewReverse: \"transform rotate-1 hover:rotate-0\",\n\n  // Typography\n  heading: \"font-black uppercase tracking-wider\",\n  body: \"font-mono leading-relaxed\",\n  accent: \"font-black\",\n\n  // Transitions\n  transition: \"transition-all duration-300\",\n  transitionFast: \"transition-all duration-200\",\n\n  // Spacing\n  padding: \"p-6\",\n  paddingSm: \"p-3\",\n  paddingLg: \"p-8\",\n} as const;\n\n// Size variants that work across all components\nexport const brutalSizes = {\n  xs: {\n    padding: \"px-2 py-1\",\n    text: \"text-xs\",\n    border: \"border-2\",\n    shadow: \"shadow-brutal-sm\",\n  },\n  sm: {\n    padding: \"px-3 py-2\",\n    text: \"text-sm\",\n    border: \"border-3\",\n    shadow: \"shadow-brutal-sm\",\n  },\n  md: {\n    padding: \"px-4 py-3\",\n    text: \"text-base\",\n    border: \"border-4\",\n    shadow: \"shadow-brutal\",\n  },\n  lg: {\n    padding: \"px-6 py-4\",\n    text: \"text-lg\",\n    border: \"border-4\",\n    shadow: \"shadow-brutal-md\",\n  },\n  xl: {\n    padding: \"px-8 py-6\",\n    text: \"text-xl\",\n    border: \"border-4\",\n    shadow: \"shadow-brutal-lg\",\n  },\n} as const;\n\nexport type BrutalSize = keyof typeof brutalSizes;\n\nexport const getSizeClasses = (size: BrutalSize = \"md\") => {\n  return brutalSizes[size];\n};\n\n// Universal brutal variants\nexport const brutalVariants = {\n  // Surface variants\n  flat: \"bg-brutal-white\",\n  raised: \"bg-brutal-white shadow-brutal\",\n  sunken: \"bg-brutal-gray-100\",\n  bordered: \"bg-brutal-white border-4 border-brutal-black\",\n\n  // State variants\n  default: \"bg-brutal-white text-brutal-black\",\n  primary: \"bg-brutal-black text-brutal-white\",\n  secondary: \"bg-brutal-gray-100 text-brutal-black\",\n  ghost: \"bg-transparent text-brutal-black border-4 border-brutal-black\",\n  danger: \"bg-brutal-coral text-brutal-black\",\n  success: \"bg-brutal-mint text-brutal-black\",\n  warning: \"bg-brutal-yellow text-brutal-black\",\n  info: \"bg-brutal-sky text-brutal-black\",\n} as const;\n\nexport type BrutalVariant = keyof typeof brutalVariants;\n\nexport const getVariantClasses = (variant: BrutalVariant = \"default\") => {\n  return brutalVariants[variant];\n};\n\n// Universal brutal component builder\nexport const createBrutalClasses = (\n  options: {\n    accent?: string;\n    size?: BrutalSize;\n    variant?: BrutalVariant;\n    brutal?: boolean;\n    hover?: boolean;\n    skew?: boolean;\n    padding?: boolean;\n    border?: boolean;\n    shadow?: boolean;\n    transition?: boolean;\n  } = {},\n) => {\n  const {\n    accent = \"brutal-pink\",\n    size = \"md\",\n    variant = \"default\",\n    brutal = true,\n    hover = true,\n    skew = false,\n    padding = true,\n    border = true,\n    shadow = true,\n    transition = true,\n  } = options;\n\n  const accentClasses = getAccentClasses(accent);\n  const sizeClasses = getSizeClasses(size);\n  const variantClasses = getVariantClasses(variant);\n\n  return cn(\n    // Base variant\n    variantClasses,\n\n    // Size\n    padding && sizeClasses.padding,\n    sizeClasses.text,\n\n    // Brutal styling\n    brutal && [\n      border && [sizeClasses.border, \"border-brutal-black\"],\n      shadow && sizeClasses.shadow,\n      skew && brutalBase.skew,\n    ],\n\n    // Interactive states\n    hover && brutal && brutalBase.hover,\n\n    // Transitions\n    transition && brutalBase.transition,\n  );\n};\n"]}