"content": "import { type VariantProps, cva } from \"class-variance-authority\";\nimport * as React from \"react\";\nimport {\n\tcn,\n\tcolors,\n\tflexBox,\n\tpadding,\n\tshape,\n\tspacing,\n\ttypography,\n} from \"../../core/core\";\n\nconst alertStyles = {\n\tbase: cn(\n\t\tshape.rounded,\n\t\t\"border\",\n\t\tflexBox.column,\n\t\tspacing.small,\n\t\tpadding.medium,\n\t),\n};\n\nconst alertVariants = cva(`${alertStyles.base}`, {\n\tvariants: {\n\t\tvariant: {\n\t\t\tdefault: cn(colors.accent.primary, \"border-outline-variant\"),\n\t\t\tsecondary: cn(colors.accent.secondary, \"border-outline-variant\"),\n\t\t\ttertiary: cn(colors.accent.tertiary, \"border-outline-variant\"),\n\t\t\tdestructive: cn(\n\t\t\t\tcolors.status.errorContainer,\n\t\t\t\t\"border-[color:var(--color-error)]\",\n\t\t\t),\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tvariant: \"default\",\n\t},\n});\n\nexport interface AlertProps\n\textends React.HTMLAttributes<HTMLDivElement>,\n\t\tVariantProps<typeof alertVariants> {}\n\nconst Alert = React.forwardRef<HTMLDivElement, AlertProps>(\n\t({ className, variant, ...props }, ref) => (\n\t\t<div\n\t\t\tref={ref}\n\t\t\trole=\"alert\"\n\t\t\tclassName={cn(alertVariants({ variant }), className)}\n\t\t\t{...props}\n\t\t/>\n\t),\n);\nAlert.displayName = \"Alert\";\n\nconst AlertTitle = React.forwardRef<\n\tHTMLParagraphElement,\n\tReact.HTMLAttributes<HTMLHeadingElement>\n>(({ className, ...props }, ref) => (\n\t<h5\n\t\tref={ref}\n\t\tclassName={cn(\n\t\t\ttypography.weight.semibold,\n\t\t\ttypography.size.medium,\n\t\t\t\"leading-none tracking-tight\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nAlertTitle.displayName = \"AlertTitle\";\n\nconst AlertDescription = React.forwardRef<\n\tHTMLDivElement,\n\tReact.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n\t<div\n\t\tref={ref}\n\t\tclassName={cn(typography.size.small, \"leading-relaxed\", className)}\n\t\t{...props}\n\t/>\n));\nAlertDescription.displayName = \"AlertDescription\";\n\nexport { Alert, AlertDescription, AlertTitle };\n"

"content": "import { mergeProps } from \"@base-ui-components/react\";\nimport { type VariantProps, cva } from \"class-variance-authority\";\nimport { clsx } from \"clsx\";\nimport { motion as framerMotion } from \"framer-motion\";\nimport * as React from \"react\";\nimport { twMerge } from \"tailwind-merge\";\nimport {\n\talignment,\n\tborders,\n\tcn,\n\tcolors,\n\tflexBox,\n\tinteractivity,\n\tmotion,\n\tpadding,\n\tpaddingX,\n\tpaddingY,\n\tshadows,\n\tshape,\n\tspacing,\n\ttypography,\n} from \"../../core/core\";\n\nconst buttonStyles = {\n\tbase: cn(\n\t\tshape.rounded,\n\t\tcolors.surface,\n\t\talignment.center,\n\t\tflexBox.inlineCenter,\n\t\tspacing.small,\n\t\ttypography.noWrap,\n\t\tshadows.focusRing.primary,\n\t\tinteractivity.states.clickable,\n\t\tinteractivity.states.hover,\n\t\tinteractivity.states.disabled,\n\t\tinteractivity.transitions.opacity,\n\t),\n};\n\nexport const buttonVariants = cva(`${buttonStyles.base}`, {\n\tvariants: {\n\t\tvariant: {\n\t\t\t...colors.accent,\n\t\t\toutline: `${colors.accent.justPrimary} ${borders.variant}`,\n\t\t\tlink: `${colors.accent.justPrimary} hover:underline shadow-none`,\n\t\t\tghost: `${colors.accent.justPrimary} shadow-none`,\n\t\t},\n\t\tsize: {\n\t\t\tsm: cn(\"h-sm\", paddingY.small, paddingX.medium, typography.size.small),\n\t\t\tmd: cn(\"h-md\", paddingY.medium, paddingX.medium, typography.size.medium),\n\t\t\tlg: cn(\"h-lg\", paddingY.large, paddingX.medium, typography.size.large),\n\t\t\ticon: padding.extraSmall,\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tvariant: \"primary\",\n\t\tsize: \"md\",\n\t},\n});\n\ntype ButtonBaseProps = Omit<\n\tReact.ButtonHTMLAttributes<HTMLButtonElement>,\n\t| \"onDrag\"\n\t| \"onDragEnd\"\n\t| \"onDragEnter\"\n\t| \"onDragExit\"\n\t| \"onDragLeave\"\n\t| \"onDragOver\"\n\t| \"onDragStart\"\n\t| \"onDrop\"\n\t| \"onAnimationStart\"\n\t| \"onAnimationEnd\"\n\t| \"onAnimationIteration\"\n\t| \"onTransitionEnd\"\n>;\n\nexport interface ButtonProps\n\textends ButtonBaseProps,\n\t\tVariantProps<typeof buttonVariants> {\n\tasChild?: boolean;\n\tanimate?: boolean;\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n\t(\n\t\t{ className, variant, size, asChild = false, animate = true, ...props },\n\t\tref,\n\t) => {\n\t\tconst mergedProps = asChild\n\t\t\t? mergeProps(props, { role: \"button\", tabIndex: 0 })\n\t\t\t: props;\n\n\t\tconst motionProps = animate\n\t\t\t? {\n\t\t\t\t\twhileTap: motion.tap.scale,\n\t\t\t\t\ttransition: motion.transitions.tap,\n\t\t\t\t}\n\t\t\t: {};\n\n\t\treturn (\n\t\t\t<framerMotion.button\n\t\t\t\tclassName={twMerge(clsx(buttonVariants({ variant, size, className })))}\n\t\t\t\tref={ref}\n\t\t\t\t{...motionProps}\n\t\t\t\t{...mergedProps}\n\t\t\t/>\n\t\t);\n\t},\n);\nButton.displayName = \"Button\";\n\nexport { Button };\n"