@arolariu/components 0.4.2 → 1.0.0

package/dist/components/ui/bubble-background.js

@@ -3,6 +3,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { motion, useMotionValue, useSpring } from "motion/react";
 import { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
 import { cn } from "../../lib/utilities.js";
+import bubble_background_module from "./bubble-background.module.js";
 const BubbleBackground = /*#__PURE__*/ forwardRef(({ className, children, interactive = false, transition = {
     stiffness: 100,
     damping: 20
@@ -15,7 +16,7 @@ const BubbleBackground = /*#__PURE__*/ forwardRef(({ className, children, intera
     sixth: "140,100,255"
 }, ...props }, ref)=>{
     const containerRef = useRef(null);
-    useImperativeHandle(ref, ()=>containerRef.current);
+    useImperativeHandle(ref, ()=>containerRef.current, []);
     const mouseX = useMotionValue(0);
     const mouseY = useMotionValue(0);
     const springX = useSpring(mouseX, transition);
@@ -24,40 +25,40 @@ const BubbleBackground = /*#__PURE__*/ forwardRef(({ className, children, intera
         if (!interactive) return;
         const currentContainer = containerRef.current;
         if (!currentContainer) return;
-        const handleMouseMove = (e)=>{
+        const handleMouseMove = (event)=>{
             const rect = currentContainer.getBoundingClientRect();
             const centerX = rect.left + rect.width / 2;
             const centerY = rect.top + rect.height / 2;
-            mouseX.set(e.clientX - centerX);
-            mouseY.set(e.clientY - centerY);
+            mouseX.set(event.clientX - centerX);
+            mouseY.set(event.clientY - centerY);
+        };
+        currentContainer.addEventListener("mousemove", handleMouseMove);
+        return ()=>{
+            currentContainer.removeEventListener("mousemove", handleMouseMove);
         };
-        currentContainer?.addEventListener("mousemove", handleMouseMove);
-        return ()=>currentContainer?.removeEventListener("mousemove", handleMouseMove);
     }, [
         interactive,
         mouseX,
         mouseY
     ]);
+    const style = {
+        "--ac-bubble-first-color": colors.first,
+        "--ac-bubble-second-color": colors.second,
+        "--ac-bubble-third-color": colors.third,
+        "--ac-bubble-fourth-color": colors.fourth,
+        "--ac-bubble-fifth-color": colors.fifth,
+        "--ac-bubble-sixth-color": colors.sixth
+    };
     return /*#__PURE__*/ jsxs("div", {
         ref: containerRef,
-        className: cn("relative size-full overflow-hidden bg-gradient-to-br from-violet-900 to-blue-900", className),
+        className: cn(bubble_background_module.root, className),
+        style: style,
         ...props,
         children: [
-            /*#__PURE__*/ jsx("style", {
-                children: `
-            :root {
-              --first-color: ${colors.first};
-              --second-color: ${colors.second};
-              --third-color: ${colors.third};
-              --fourth-color: ${colors.fourth};
-              --fifth-color: ${colors.fifth};
-              --sixth-color: ${colors.sixth};
-            }
-          `
-            }),
             /*#__PURE__*/ jsx("svg", {
                 xmlns: "http://www.w3.org/2000/svg",
-                className: "absolute top-0 left-0 h-0 w-0",
+                className: bubble_background_module.hiddenSvg,
+                "aria-hidden": "true",
                 children: /*#__PURE__*/ jsx("defs", {
                     children: /*#__PURE__*/ jsxs("filter", {
                         id: "goo",
@@ -82,13 +83,10 @@ const BubbleBackground = /*#__PURE__*/ forwardRef(({ className, children, intera
                 })
             }),
             /*#__PURE__*/ jsxs("div", {
-                className: "absolute inset-0",
-                style: {
-                    filter: "url(#goo) blur(40px)"
-                },
+                className: bubble_background_module.filterLayer,
                 children: [
                     /*#__PURE__*/ jsx(motion.div, {
-                        className: "absolute top-[10%] left-[10%] size-[80%] rounded-full bg-[radial-gradient(circle_at_center,rgba(var(--first-color),0.8)_0%,rgba(var(--first-color),0)_50%)] mix-blend-hard-light",
+                        className: cn(bubble_background_module.bubble, bubble_background_module.bubbleFirst),
                         animate: {
                             y: [
                                 -50,
@@ -103,7 +101,7 @@ const BubbleBackground = /*#__PURE__*/ forwardRef(({ className, children, intera
                         }
                     }),
                     /*#__PURE__*/ jsx(motion.div, {
-                        className: "absolute inset-0 flex origin-[calc(50%-400px)] items-center justify-center",
+                        className: cn(bubble_background_module.rotator, bubble_background_module.rotatorSecond),
                         animate: {
                             rotate: 360
                         },
@@ -114,11 +112,11 @@ const BubbleBackground = /*#__PURE__*/ forwardRef(({ className, children, intera
                             repeatType: "reverse"
                         },
                         children: /*#__PURE__*/ jsx("div", {
-                            className: "top-[10%] left-[10%] size-[80%] rounded-full bg-[radial-gradient(circle_at_center,rgba(var(--second-color),0.8)_0%,rgba(var(--second-color),0)_50%)] mix-blend-hard-light"
+                            className: cn(bubble_background_module.bubble, bubble_background_module.bubbleSecond)
                         })
                     }),
                     /*#__PURE__*/ jsx(motion.div, {
-                        className: "absolute inset-0 flex origin-[calc(50%+400px)] items-center justify-center",
+                        className: cn(bubble_background_module.rotator, bubble_background_module.rotatorThird),
                         animate: {
                             rotate: 360
                         },
@@ -128,11 +126,11 @@ const BubbleBackground = /*#__PURE__*/ forwardRef(({ className, children, intera
                             repeat: 1 / 0
                         },
                         children: /*#__PURE__*/ jsx("div", {
-                            className: "absolute top-[calc(50%+200px)] left-[calc(50%-500px)] size-[80%] rounded-full bg-[radial-gradient(circle_at_center,rgba(var(--third-color),0.8)_0%,rgba(var(--third-color),0)_50%)] mix-blend-hard-light"
+                            className: cn(bubble_background_module.bubble, bubble_background_module.bubbleThird)
                         })
                     }),
                     /*#__PURE__*/ jsx(motion.div, {
-                        className: "absolute top-[10%] left-[10%] size-[80%] rounded-full bg-[radial-gradient(circle_at_center,rgba(var(--fourth-color),0.8)_0%,rgba(var(--fourth-color),0)_50%)] opacity-70 mix-blend-hard-light",
+                        className: cn(bubble_background_module.bubble, bubble_background_module.bubbleFourth),
                         animate: {
                             x: [
                                 -50,
@@ -147,7 +145,7 @@ const BubbleBackground = /*#__PURE__*/ forwardRef(({ className, children, intera
                         }
                     }),
                     /*#__PURE__*/ jsx(motion.div, {
-                        className: "absolute inset-0 flex origin-[calc(50%_-_800px)_calc(50%_+_200px)] items-center justify-center",
+                        className: cn(bubble_background_module.rotator, bubble_background_module.rotatorFifth),
                         animate: {
                             rotate: 360
                         },
@@ -157,16 +155,16 @@ const BubbleBackground = /*#__PURE__*/ forwardRef(({ className, children, intera
                             repeat: 1 / 0
                         },
                         children: /*#__PURE__*/ jsx("div", {
-                            className: "absolute top-[calc(50%-80%)] left-[calc(50%-80%)] size-[160%] rounded-full bg-[radial-gradient(circle_at_center,rgba(var(--fifth-color),0.8)_0%,rgba(var(--fifth-color),0)_50%)] mix-blend-hard-light"
+                            className: cn(bubble_background_module.bubble, bubble_background_module.bubbleFifth)
                         })
                     }),
-                    Boolean(interactive) && /*#__PURE__*/ jsx(motion.div, {
-                        className: "absolute size-full rounded-full bg-[radial-gradient(circle_at_center,rgba(var(--sixth-color),0.8)_0%,rgba(var(--sixth-color),0)_50%)] opacity-70 mix-blend-hard-light",
+                    interactive ? /*#__PURE__*/ jsx(motion.div, {
+                        className: cn(bubble_background_module.bubble, bubble_background_module.bubbleInteractive),
                         style: {
                             x: springX,
                             y: springY
                         }
-                    })
+                    }) : null
                 ]
             }),
             children

package/dist/components/ui/bubble-background.js.map

@@ -1 +1 @@
-{"version":3,"file":"components/ui/bubble-background.js","sources":["../../../src/components/ui/bubble-background.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport {motion, type SpringOptions, Transition, useMotionValue, useSpring} from \"motion/react\";\r\nimport * as React from \"react\";\r\n\r\nimport {cn} from \"@/lib/utilities\";\r\n\r\ninterface BubbleBackgroundProps extends React.HTMLAttributes<HTMLDivElement> {\r\n  interactive?: boolean;\r\n  transition?: SpringOptions;\r\n  colors?: {\r\n    first: string;\r\n    second: string;\r\n    third: string;\r\n    fourth: string;\r\n    fifth: string;\r\n    sixth: string;\r\n  };\r\n}\r\n\r\nconst BubbleBackground = React.forwardRef<HTMLDivElement, BubbleBackgroundProps>(\r\n  (\r\n    {\r\n      className,\r\n      children,\r\n      interactive = false,\r\n      transition = {stiffness: 100, damping: 20},\r\n      colors = {\r\n        first: \"18,113,255\",\r\n        second: \"221,74,255\",\r\n        third: \"0,220,255\",\r\n        fourth: \"200,50,50\",\r\n        fifth: \"180,180,50\",\r\n        sixth: \"140,100,255\",\r\n      },\r\n      ...props\r\n    },\r\n    ref,\r\n  ) => {\r\n    const containerRef = React.useRef<HTMLDivElement>(null);\r\n    React.useImperativeHandle(ref, () => containerRef.current as HTMLDivElement);\r\n\r\n    const mouseX = useMotionValue(0);\r\n    const mouseY = useMotionValue(0);\r\n    const springX = useSpring(mouseX, transition);\r\n    const springY = useSpring(mouseY, transition);\r\n\r\n    React.useEffect(() => {\r\n      if (!interactive) return;\r\n\r\n      const currentContainer = containerRef.current;\r\n      if (!currentContainer) return;\r\n\r\n      const handleMouseMove = (e: MouseEvent) => {\r\n        const rect = currentContainer.getBoundingClientRect();\r\n        const centerX = rect.left + rect.width / 2;\r\n        const centerY = rect.top + rect.height / 2;\r\n        mouseX.set(e.clientX - centerX);\r\n        mouseY.set(e.clientY - centerY);\r\n      };\r\n\r\n      currentContainer?.addEventListener(\"mousemove\", handleMouseMove);\r\n      return () => currentContainer?.removeEventListener(\"mousemove\", handleMouseMove);\r\n    }, [interactive, mouseX, mouseY]);\r\n\r\n    return (\r\n      <div\r\n        ref={containerRef}\r\n        className={cn(\"relative size-full overflow-hidden bg-gradient-to-br from-violet-900 to-blue-900\", className)}\r\n        {...props}>\r\n        <style>\r\n          {`\r\n            :root {\r\n              --first-color: ${colors.first};\r\n              --second-color: ${colors.second};\r\n              --third-color: ${colors.third};\r\n              --fourth-color: ${colors.fourth};\r\n              --fifth-color: ${colors.fifth};\r\n              --sixth-color: ${colors.sixth};\r\n            }\r\n          `}\r\n        </style>\r\n\r\n        <svg\r\n          xmlns='http://www.w3.org/2000/svg'\r\n          className='absolute top-0 left-0 h-0 w-0'>\r\n          <defs>\r\n            <filter id='goo'>\r\n              <feGaussianBlur\r\n                in='SourceGraphic'\r\n                stdDeviation='10'\r\n                result='blur'\r\n              />\r\n              <feColorMatrix\r\n                in='blur'\r\n                mode='matrix'\r\n                values='1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -8'\r\n                result='goo'\r\n              />\r\n              <feBlend\r\n                in='SourceGraphic'\r\n                in2='goo'\r\n              />\r\n            </filter>\r\n          </defs>\r\n        </svg>\r\n\r\n        <div\r\n          className='absolute inset-0'\r\n          style={{filter: \"url(#goo) blur(40px)\"}}>\r\n          <motion.div\r\n            className='absolute top-[10%] left-[10%] size-[80%] rounded-full bg-[radial-gradient(circle_at_center,rgba(var(--first-color),0.8)_0%,rgba(var(--first-color),0)_50%)] mix-blend-hard-light'\r\n            animate={{y: [-50, 50, -50]}}\r\n            transition={{duration: 30, ease: \"easeInOut\", repeat: Infinity}}\r\n          />\r\n\r\n          <motion.div\r\n            className='absolute inset-0 flex origin-[calc(50%-400px)] items-center justify-center'\r\n            animate={{rotate: 360}}\r\n            transition={\r\n              {\r\n                duration: 20,\r\n                ease: \"linear\",\r\n                repeat: Infinity,\r\n                repeatType: \"reverse\",\r\n              } satisfies Transition\r\n            }>\r\n            <div className='top-[10%] left-[10%] size-[80%] rounded-full bg-[radial-gradient(circle_at_center,rgba(var(--second-color),0.8)_0%,rgba(var(--second-color),0)_50%)] mix-blend-hard-light' />\r\n          </motion.div>\r\n\r\n          <motion.div\r\n            className='absolute inset-0 flex origin-[calc(50%+400px)] items-center justify-center'\r\n            animate={{rotate: 360}}\r\n            transition={{duration: 40, ease: \"linear\", repeat: Infinity}}>\r\n            <div className='absolute top-[calc(50%+200px)] left-[calc(50%-500px)] size-[80%] rounded-full bg-[radial-gradient(circle_at_center,rgba(var(--third-color),0.8)_0%,rgba(var(--third-color),0)_50%)] mix-blend-hard-light' />\r\n          </motion.div>\r\n\r\n          <motion.div\r\n            className='absolute top-[10%] left-[10%] size-[80%] rounded-full bg-[radial-gradient(circle_at_center,rgba(var(--fourth-color),0.8)_0%,rgba(var(--fourth-color),0)_50%)] opacity-70 mix-blend-hard-light'\r\n            animate={{x: [-50, 50, -50]}}\r\n            transition={{duration: 40, ease: \"easeInOut\", repeat: Infinity}}\r\n          />\r\n\r\n          <motion.div\r\n            className='absolute inset-0 flex origin-[calc(50%_-_800px)_calc(50%_+_200px)] items-center justify-center'\r\n            animate={{rotate: 360}}\r\n            transition={{duration: 20, ease: \"linear\", repeat: Infinity}}>\r\n            <div className='absolute top-[calc(50%-80%)] left-[calc(50%-80%)] size-[160%] rounded-full bg-[radial-gradient(circle_at_center,rgba(var(--fifth-color),0.8)_0%,rgba(var(--fifth-color),0)_50%)] mix-blend-hard-light' />\r\n          </motion.div>\r\n\r\n          {Boolean(interactive) && (\r\n            <motion.div\r\n              className='absolute size-full rounded-full bg-[radial-gradient(circle_at_center,rgba(var(--sixth-color),0.8)_0%,rgba(var(--sixth-color),0)_50%)] opacity-70 mix-blend-hard-light'\r\n              style={{\r\n                x: springX,\r\n                y: springY,\r\n              }}\r\n            />\r\n          )}\r\n        </div>\r\n\r\n        {children}\r\n      </div>\r\n    );\r\n  },\r\n);\r\n\r\nBubbleBackground.displayName = \"BubbleBackground\";\r\n\r\nexport {BubbleBackground, type BubbleBackgroundProps};\r\n"],"names":["BubbleBackground","React","className","children","interactive","transition","colors","props","ref","containerRef","mouseX","useMotionValue","mouseY","springX","useSpring","springY","currentContainer","handleMouseMove","e","rect","centerX","centerY","cn","motion","Infinity","Boolean"],"mappings":"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"}
+{"version":3,"file":"components/ui/bubble-background.js","sources":["../../../src/components/ui/bubble-background.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport {motion, type SpringOptions, type Transition, useMotionValue, useSpring} from \"motion/react\";\r\nimport * as React from \"react\";\r\n\r\nimport {cn} from \"@/lib/utilities\";\r\nimport styles from \"./bubble-background.module.css\";\r\n\r\n/** Configurable bubble color channels consumed by the CSS module. */\r\nexport interface BubbleBackgroundColors {\r\n  /** Primary bubble RGB triplet. @default \"18,113,255\" */\r\n  first: string;\r\n  /** Secondary bubble RGB triplet. @default \"221,74,255\" */\r\n  second: string;\r\n  /** Tertiary bubble RGB triplet. @default \"0,220,255\" */\r\n  third: string;\r\n  /** Fourth bubble RGB triplet. @default \"200,50,50\" */\r\n  fourth: string;\r\n  /** Fifth bubble RGB triplet. @default \"180,180,50\" */\r\n  fifth: string;\r\n  /** Sixth bubble RGB triplet used by the interactive layer. @default \"140,100,255\" */\r\n  sixth: string;\r\n}\r\n\r\n/** Props accepted by {@link BubbleBackground}. */\r\nexport interface BubbleBackgroundProps extends React.HTMLAttributes<HTMLDivElement> {\r\n  /** Enables mouse-following motion for the interactive bubble layer. @default false */\r\n  interactive?: boolean;\r\n  /** Spring configuration applied to the interactive bubble motion. @default {stiffness: 100, damping: 20} */\r\n  transition?: SpringOptions;\r\n  /** Overrides the CSS custom property color palette for the bubbles. @default {first: \"18,113,255\", second: \"221,74,255\", third: \"0,220,255\", fourth: \"200,50,50\", fifth: \"180,180,50\", sixth: \"140,100,255\"} */\r\n  colors?: BubbleBackgroundColors;\r\n}\r\n\r\ntype BubbleStyleProperties = React.CSSProperties & {\r\n  \"--ac-bubble-first-color\": string;\r\n  \"--ac-bubble-second-color\": string;\r\n  \"--ac-bubble-third-color\": string;\r\n  \"--ac-bubble-fourth-color\": string;\r\n  \"--ac-bubble-fifth-color\": string;\r\n  \"--ac-bubble-sixth-color\": string;\r\n};\r\n\r\n/**\r\n * Renders drifting gradient bubbles with an optional interactive cursor follower.\r\n *\r\n * @remarks\r\n * - Animated component using the `motion` library\r\n * - Renders a `<div>` element\r\n * - Styling via CSS Modules with `--ac-*` custom properties\r\n * - Client-side only (`\"use client\"` directive)\r\n *\r\n * @example\r\n * ```tsx\r\n * <BubbleBackground interactive />\r\n * ```\r\n *\r\n * @see {@link BubbleBackgroundProps} for available props\r\n */\r\nconst BubbleBackground = React.forwardRef<HTMLDivElement, BubbleBackgroundProps>(\r\n  (\r\n    {\r\n      className,\r\n      children,\r\n      interactive = false,\r\n      transition = {stiffness: 100, damping: 20},\r\n      colors = {\r\n        first: \"18,113,255\",\r\n        second: \"221,74,255\",\r\n        third: \"0,220,255\",\r\n        fourth: \"200,50,50\",\r\n        fifth: \"180,180,50\",\r\n        sixth: \"140,100,255\",\r\n      },\r\n      ...props\r\n    },\r\n    ref,\r\n  ) => {\r\n    const containerRef = React.useRef<HTMLDivElement>(null);\r\n\r\n    React.useImperativeHandle(ref, () => containerRef.current!, []);\r\n\r\n    const mouseX = useMotionValue(0);\r\n    const mouseY = useMotionValue(0);\r\n    const springX = useSpring(mouseX, transition);\r\n    const springY = useSpring(mouseY, transition);\r\n\r\n    React.useEffect(() => {\r\n      if (!interactive) {\r\n        return;\r\n      }\r\n\r\n      const currentContainer = containerRef.current;\r\n      if (!currentContainer) {\r\n        return;\r\n      }\r\n\r\n      const handleMouseMove = (event: MouseEvent): void => {\r\n        const rect = currentContainer.getBoundingClientRect();\r\n        const centerX = rect.left + rect.width / 2;\r\n        const centerY = rect.top + rect.height / 2;\r\n        mouseX.set(event.clientX - centerX);\r\n        mouseY.set(event.clientY - centerY);\r\n      };\r\n\r\n      currentContainer.addEventListener(\"mousemove\", handleMouseMove);\r\n\r\n      return () => {\r\n        currentContainer.removeEventListener(\"mousemove\", handleMouseMove);\r\n      };\r\n    }, [interactive, mouseX, mouseY]);\r\n\r\n    const style: BubbleStyleProperties = {\r\n      \"--ac-bubble-first-color\": colors.first,\r\n      \"--ac-bubble-second-color\": colors.second,\r\n      \"--ac-bubble-third-color\": colors.third,\r\n      \"--ac-bubble-fourth-color\": colors.fourth,\r\n      \"--ac-bubble-fifth-color\": colors.fifth,\r\n      \"--ac-bubble-sixth-color\": colors.sixth,\r\n    };\r\n\r\n    return (\r\n      <div\r\n        ref={containerRef}\r\n        className={cn(styles.root, className)}\r\n        style={style}\r\n        {...props}>\r\n        <svg\r\n          xmlns='http://www.w3.org/2000/svg'\r\n          className={styles.hiddenSvg}\r\n          aria-hidden='true'>\r\n          <defs>\r\n            <filter id='goo'>\r\n              <feGaussianBlur\r\n                in='SourceGraphic'\r\n                stdDeviation='10'\r\n                result='blur'\r\n              />\r\n              <feColorMatrix\r\n                in='blur'\r\n                mode='matrix'\r\n                values='1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -8'\r\n                result='goo'\r\n              />\r\n              <feBlend\r\n                in='SourceGraphic'\r\n                in2='goo'\r\n              />\r\n            </filter>\r\n          </defs>\r\n        </svg>\r\n\r\n        <div className={styles.filterLayer}>\r\n          <motion.div\r\n            className={cn(styles.bubble, styles.bubbleFirst)}\r\n            animate={{y: [-50, 50, -50]}}\r\n            transition={{duration: 30, ease: \"easeInOut\", repeat: Infinity}}\r\n          />\r\n\r\n          <motion.div\r\n            className={cn(styles.rotator, styles.rotatorSecond)}\r\n            animate={{rotate: 360}}\r\n            transition={\r\n              {\r\n                duration: 20,\r\n                ease: \"linear\",\r\n                repeat: Infinity,\r\n                repeatType: \"reverse\",\r\n              } satisfies Transition\r\n            }>\r\n            <div className={cn(styles.bubble, styles.bubbleSecond)} />\r\n          </motion.div>\r\n\r\n          <motion.div\r\n            className={cn(styles.rotator, styles.rotatorThird)}\r\n            animate={{rotate: 360}}\r\n            transition={{duration: 40, ease: \"linear\", repeat: Infinity}}>\r\n            <div className={cn(styles.bubble, styles.bubbleThird)} />\r\n          </motion.div>\r\n\r\n          <motion.div\r\n            className={cn(styles.bubble, styles.bubbleFourth)}\r\n            animate={{x: [-50, 50, -50]}}\r\n            transition={{duration: 40, ease: \"easeInOut\", repeat: Infinity}}\r\n          />\r\n\r\n          <motion.div\r\n            className={cn(styles.rotator, styles.rotatorFifth)}\r\n            animate={{rotate: 360}}\r\n            transition={{duration: 20, ease: \"linear\", repeat: Infinity}}>\r\n            <div className={cn(styles.bubble, styles.bubbleFifth)} />\r\n          </motion.div>\r\n\r\n          {interactive ? (\r\n            <motion.div\r\n              className={cn(styles.bubble, styles.bubbleInteractive)}\r\n              style={{x: springX, y: springY}}\r\n            />\r\n          ) : null}\r\n        </div>\r\n\r\n        {children}\r\n      </div>\r\n    );\r\n  },\r\n);\r\n\r\nBubbleBackground.displayName = \"BubbleBackground\";\r\n\r\nexport {BubbleBackground};\r\n"],"names":["BubbleBackground","React","className","children","interactive","transition","colors","props","ref","containerRef","mouseX","useMotionValue","mouseY","springX","useSpring","springY","currentContainer","handleMouseMove","event","rect","centerX","centerY","style","cn","styles","motion","Infinity"],"mappings":"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"}

package/dist/components/ui/bubble-background.module.js

@@ -0,0 +1,20 @@
+import "./bubble-background_module.css";
+const bubble_background_module = {
+    root: "root-J8xptl",
+    hiddenSvg: "hiddenSvg-eHjXf_",
+    filterLayer: "filterLayer-9CIW2r",
+    bubble: "bubble-aokqGt",
+    bubbleFirst: "bubbleFirst-gPpCTk",
+    bubbleFourth: "bubbleFourth-JIcMNJ",
+    rotator: "rotator-zoYRBc",
+    rotatorSecond: "rotatorSecond-qNszdb",
+    bubbleSecond: "bubbleSecond-CC10ks",
+    rotatorThird: "rotatorThird-obzzF3",
+    bubbleThird: "bubbleThird-hOtab1",
+    rotatorFifth: "rotatorFifth-TckMdN",
+    bubbleFifth: "bubbleFifth-zchqfe",
+    bubbleInteractive: "bubbleInteractive-XwtaGk"
+};
+export default bubble_background_module;
+
+//# sourceMappingURL=bubble-background.module.js.map

package/dist/components/ui/bubble-background.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/ui/bubble-background.module.js","sources":["../../../src/components/ui/bubble-background.module.css"],"sourcesContent":["// extracted by LIB_CSS_EXTRACT_LOADER\nimport \"./bubble-background_module.css\"\nexport default {\"root\":\"root-J8xptl\",\"hiddenSvg\":\"hiddenSvg-eHjXf_\",\"filterLayer\":\"filterLayer-9CIW2r\",\"bubble\":\"bubble-aokqGt\",\"bubbleFirst\":\"bubbleFirst-gPpCTk\",\"bubbleFourth\":\"bubbleFourth-JIcMNJ\",\"rotator\":\"rotator-zoYRBc\",\"rotatorSecond\":\"rotatorSecond-qNszdb\",\"bubbleSecond\":\"bubbleSecond-CC10ks\",\"rotatorThird\":\"rotatorThird-obzzF3\",\"bubbleThird\":\"bubbleThird-hOtab1\",\"rotatorFifth\":\"rotatorFifth-TckMdN\",\"bubbleFifth\":\"bubbleFifth-zchqfe\",\"bubbleInteractive\":\"bubbleInteractive-XwtaGk\"};"],"names":[],"mappings":";AAEA,iCAAe;IAAC,MAAO;IAAc,WAAY;IAAmB,aAAc;IAAqB,QAAS;IAAgB,aAAc;IAAqB,cAAe;IAAsB,SAAU;IAAiB,eAAgB;IAAuB,cAAe;IAAsB,cAAe;IAAsB,aAAc;IAAqB,cAAe;IAAsB,aAAc;IAAqB,mBAAoB;AAA0B"}

package/dist/components/ui/bubble-background_module.css

@@ -0,0 +1,99 @@
+.root-J8xptl {
+  background: linear-gradient(135deg, #2e1065, #1d4ed8);
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+}
+
+.hiddenSvg-eHjXf_ {
+  width: 0;
+  height: 0;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.filterLayer-9CIW2r {
+  filter: url("#goo") blur(40px);
+  position: absolute;
+  inset: 0;
+}
+
+.bubble-aokqGt {
+  mix-blend-mode: hard-light;
+  border-radius: 9999px;
+  position: absolute;
+}
+
+.bubbleFirst-gPpCTk, .bubbleFourth-JIcMNJ {
+  width: 80%;
+  height: 80%;
+  top: 10%;
+  left: 10%;
+}
+
+.bubbleFirst-gPpCTk {
+  background: radial-gradient(circle at center,rgb(var(--ac-bubble-first-color)/.8) 0,rgb(var(--ac-bubble-first-color)/0) 50%);
+}
+
+.rotator-zoYRBc {
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  position: absolute;
+  inset: 0;
+}
+
+.rotatorSecond-qNszdb {
+  transform-origin: calc(50% - 400px);
+}
+
+.bubbleSecond-CC10ks {
+  background: radial-gradient(circle at center,rgb(var(--ac-bubble-second-color)/.8) 0,rgb(var(--ac-bubble-second-color)/0) 50%);
+  width: 80%;
+  height: 80%;
+  top: 10%;
+  left: 10%;
+}
+
+.rotatorThird-obzzF3 {
+  transform-origin: calc(50% + 400px);
+}
+
+.bubbleThird-hOtab1 {
+  background: radial-gradient(circle at center,rgb(var(--ac-bubble-third-color)/.8) 0,rgb(var(--ac-bubble-third-color)/0) 50%);
+  width: 80%;
+  height: 80%;
+  position: absolute;
+  top: calc(50% + 200px);
+  left: calc(50% - 500px);
+}
+
+.bubbleFourth-JIcMNJ {
+  background: radial-gradient(circle at center,rgb(var(--ac-bubble-fourth-color)/.8) 0,rgb(var(--ac-bubble-fourth-color)/0) 50%);
+  opacity: .7;
+}
+
+.rotatorFifth-TckMdN {
+  transform-origin: calc(50% - 800px) calc(50% + 200px);
+}
+
+.bubbleFifth-zchqfe {
+  background: radial-gradient(circle at center,rgb(var(--ac-bubble-fifth-color)/.8) 0,rgb(var(--ac-bubble-fifth-color)/0) 50%);
+  width: 160%;
+  height: 160%;
+  position: absolute;
+  top: -30%;
+  left: -30%;
+}
+
+.bubbleInteractive-XwtaGk {
+  background: radial-gradient(circle at center,rgb(var(--ac-bubble-sixth-color)/.8) 0,rgb(var(--ac-bubble-sixth-color)/0) 50%);
+  opacity: .7;
+  width: 100%;
+  height: 100%;
+}
+
+
+/*# sourceMappingURL=bubble-background_module.css.map */

package/dist/components/ui/bubble-background_module.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["webpack://./home/runner/work/arolariu.ro/arolariu.ro/packages/components/src/components/ui/bubble-background.module.css","webpack://./src/components/ui/bubble-background.module.css"],"names":[],"mappings":"AADA;ECEE,qDAAqD;EACrD,WAAW;EACX,YAAY;EACZ,kBAAkB;EAClB,gBAAgB;AAClB;;AAEA;EACE,QAAQ;EACR,SAAS;EACT,kBAAkB;EAClB,MAAM;EACN,OAAO;AACT;;AAEA;EACE,8BAA8B;EAC9B,kBAAkB;EAClB,QAAQ;AACV;;AAEA;EACE,0BAA0B;EAC1B,qBAAqB;EACrB,kBAAkB;AACpB;;AAEA;EACE,UAAU;EACV,WAAW;EACX,QAAQ;EACR,SAAS;AACX;;AAEA;EACE,4HAA4H;AAC9H;;AAEA;EACE,uBAAuB;EACvB,mBAAmB;EACnB,aAAa;EACb,kBAAkB;EAClB,QAAQ;AACV;;AAEA;EACE,mCAAmC;AACrC;;AAEA;EACE,8HAA8H;EAC9H,UAAU;EACV,WAAW;EACX,QAAQ;EACR,SAAS;AACX;;AAEA;EACE,mCAAmC;AACrC;;AAEA;EACE,4HAA4H;EAC5H,UAAU;EACV,WAAW;EACX,kBAAkB;EAClB,sBAAsB;EACtB,uBAAuB;AACzB;;AAEA;EACE,8HAA8H;EAC9H,WAAW;AACb;;AAEA;EACE,qDAAqD;AACvD;;AAEA;EACE,4HAA4H;EAC5H,WAAW;EACX,YAAY;EACZ,kBAAkB;EAClB,SAAS;EACT,UAAU;AACZ;;AAEA;EACE,4HAA4H;EAC5H,WAAW;EACX,WAAW;EACX,YAAY;AACd","sourcesContent":[".root{background:linear-gradient(135deg,#2e1065,#1d4ed8);height:100%;overflow:hidden;position:relative;width:100%}.hiddenSvg{height:0;left:0;position:absolute;top:0;width:0}.filterLayer{filter:url(#goo) blur(40px);inset:0;position:absolute}.bubble{border-radius:9999px;mix-blend-mode:hard-light;position:absolute}.bubbleFirst,.bubbleFourth{height:80%;left:10%;top:10%;width:80%}.bubbleFirst{background:radial-gradient(circle at center,rgb(var(--ac-bubble-first-color)/.8) 0,rgb(var(--ac-bubble-first-color)/0) 50%)}.rotator{align-items:center;display:flex;inset:0;justify-content:center;position:absolute}.rotatorSecond{transform-origin:calc(50% - 400px) 50%}.bubbleSecond{background:radial-gradient(circle at center,rgb(var(--ac-bubble-second-color)/.8) 0,rgb(var(--ac-bubble-second-color)/0) 50%);height:80%;left:10%;top:10%;width:80%}.rotatorThird{transform-origin:calc(50% + 400px) 50%}.bubbleThird{background:radial-gradient(circle at center,rgb(var(--ac-bubble-third-color)/.8) 0,rgb(var(--ac-bubble-third-color)/0) 50%);height:80%;left:calc(50% - 500px);position:absolute;top:calc(50% + 200px);width:80%}.bubbleFourth{background:radial-gradient(circle at center,rgb(var(--ac-bubble-fourth-color)/.8) 0,rgb(var(--ac-bubble-fourth-color)/0) 50%);opacity:.7}.rotatorFifth{transform-origin:calc(50% - 800px) calc(50% + 200px)}.bubbleFifth{background:radial-gradient(circle at center,rgb(var(--ac-bubble-fifth-color)/.8) 0,rgb(var(--ac-bubble-fifth-color)/0) 50%);height:160%;left:-30%;position:absolute;top:-30%;width:160%}.bubbleInteractive{background:radial-gradient(circle at center,rgb(var(--ac-bubble-sixth-color)/.8) 0,rgb(var(--ac-bubble-sixth-color)/0) 50%);height:100%;opacity:.7;width:100%}",".root {\n  background: linear-gradient(135deg, #2e1065, #1d4ed8);\n  width: 100%;\n  height: 100%;\n  position: relative;\n  overflow: hidden;\n}\n\n.hiddenSvg {\n  width: 0;\n  height: 0;\n  position: absolute;\n  top: 0;\n  left: 0;\n}\n\n.filterLayer {\n  filter: url(\"#goo\") blur(40px);\n  position: absolute;\n  inset: 0;\n}\n\n.bubble {\n  mix-blend-mode: hard-light;\n  border-radius: 9999px;\n  position: absolute;\n}\n\n.bubbleFirst, .bubbleFourth {\n  width: 80%;\n  height: 80%;\n  top: 10%;\n  left: 10%;\n}\n\n.bubbleFirst {\n  background: radial-gradient(circle at center,rgb(var(--ac-bubble-first-color)/.8) 0,rgb(var(--ac-bubble-first-color)/0) 50%);\n}\n\n.rotator {\n  justify-content: center;\n  align-items: center;\n  display: flex;\n  position: absolute;\n  inset: 0;\n}\n\n.rotatorSecond {\n  transform-origin: calc(50% - 400px);\n}\n\n.bubbleSecond {\n  background: radial-gradient(circle at center,rgb(var(--ac-bubble-second-color)/.8) 0,rgb(var(--ac-bubble-second-color)/0) 50%);\n  width: 80%;\n  height: 80%;\n  top: 10%;\n  left: 10%;\n}\n\n.rotatorThird {\n  transform-origin: calc(50% + 400px);\n}\n\n.bubbleThird {\n  background: radial-gradient(circle at center,rgb(var(--ac-bubble-third-color)/.8) 0,rgb(var(--ac-bubble-third-color)/0) 50%);\n  width: 80%;\n  height: 80%;\n  position: absolute;\n  top: calc(50% + 200px);\n  left: calc(50% - 500px);\n}\n\n.bubbleFourth {\n  background: radial-gradient(circle at center,rgb(var(--ac-bubble-fourth-color)/.8) 0,rgb(var(--ac-bubble-fourth-color)/0) 50%);\n  opacity: .7;\n}\n\n.rotatorFifth {\n  transform-origin: calc(50% - 800px) calc(50% + 200px);\n}\n\n.bubbleFifth {\n  background: radial-gradient(circle at center,rgb(var(--ac-bubble-fifth-color)/.8) 0,rgb(var(--ac-bubble-fifth-color)/0) 50%);\n  width: 160%;\n  height: 160%;\n  position: absolute;\n  top: -30%;\n  left: -30%;\n}\n\n.bubbleInteractive {\n  background: radial-gradient(circle at center,rgb(var(--ac-bubble-sixth-color)/.8) 0,rgb(var(--ac-bubble-sixth-color)/0) 50%);\n  opacity: .7;\n  width: 100%;\n  height: 100%;\n}\n"],"sourceRoot":""}

package/dist/components/ui/button-group.d.ts

@@ -1,13 +1,93 @@
-import { type VariantProps } from "class-variance-authority";
 import * as React from "react";
 import { Separator } from "./separator";
-declare const buttonGroupVariants: (props?: {
-    orientation?: "horizontal" | "vertical";
-} & import("class-variance-authority/types").ClassProp) => string;
-declare function ButtonGroup({ className, orientation, ...props }: React.ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants>): import("react/jsx-runtime").JSX.Element;
-declare function ButtonGroupText({ className, asChild, ...props }: React.ComponentProps<"div"> & {
+/** Supported layout directions for {@link ButtonGroup}. */
+export type ButtonGroupOrientation = "horizontal" | "vertical";
+interface ButtonGroupVariantOptions {
+    /** Orientation used to resolve the root style classes. @default "horizontal" */
+    orientation?: ButtonGroupOrientation;
+    /** Additional classes merged into the generated variant string. @default undefined */
+    className?: string;
+}
+/**
+ * Props for the {@link ButtonGroup} component.
+ */
+export interface ButtonGroupProps extends React.ComponentPropsWithoutRef<"div"> {
+    /** Arrangement of grouped controls. @default "horizontal" */
+    orientation?: ButtonGroupOrientation;
+}
+/**
+ * Props for the {@link ButtonGroupText} component.
+ */
+export interface ButtonGroupTextProps extends React.ComponentPropsWithoutRef<"div"> {
+    /** Enables rendering an existing div-compatible child element. @default false */
     asChild?: boolean;
-}): import("react/jsx-runtime").JSX.Element;
-declare function ButtonGroupSeparator({ className, orientation, ...props }: React.ComponentProps<typeof Separator>): import("react/jsx-runtime").JSX.Element;
+}
+/**
+ * Props for the {@link ButtonGroupSeparator} component.
+ */
+export type ButtonGroupSeparatorProps = React.ComponentPropsWithoutRef<typeof Separator>;
+/**
+ * Returns the CSS class list for a button group root.
+ *
+ * @param options - Variant options used to derive the generated class string.
+ * @returns The merged class name string for the requested orientation.
+ *
+ * @example
+ * ```tsx
+ * const className = buttonGroupVariants({orientation: "vertical"});
+ * ```
+ */
+declare function buttonGroupVariants({ orientation, className }?: Readonly<ButtonGroupVariantOptions>): string;
+/**
+ * Aligns related buttons into a single visual control group.
+ *
+ * @remarks
+ * - Pure CSS component (no Base UI primitive)
+ * - Renders a `<div>` element
+ * - Styling via CSS Modules with `--ac-*` custom properties
+ *
+ * @example
+ * ```tsx
+ * <ButtonGroup>
+ *   <button type='button'>Left</button>
+ *   <button type='button'>Right</button>
+ * </ButtonGroup>
+ * ```
+ *
+ * @see {@link ButtonGroupProps} for available props
+ */
+declare const ButtonGroup: React.ForwardRefExoticComponent<ButtonGroupProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Adds descriptive text content within a button group layout.
+ *
+ * @remarks
+ * - Pure CSS component (no Base UI primitive)
+ * - Renders a `<div>` element by default
+ * - Styling via CSS Modules with `--ac-*` custom properties
+ *
+ * @example
+ * ```tsx
+ * <ButtonGroupText>Actions</ButtonGroupText>
+ * ```
+ *
+ * @see {@link ButtonGroupTextProps} for available props
+ */
+declare const ButtonGroupText: React.ForwardRefExoticComponent<ButtonGroupTextProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Inserts a separator between grouped controls.
+ *
+ * @remarks
+ * - Pure CSS component (no Base UI primitive)
+ * - Renders a wrapped `Separator` component
+ * - Styling via CSS Modules with `--ac-*` custom properties
+ *
+ * @example
+ * ```tsx
+ * <ButtonGroupSeparator orientation='vertical' />
+ * ```
+ *
+ * @see {@link ButtonGroupSeparatorProps} for available props
+ */
+declare const ButtonGroupSeparator: React.ForwardRefExoticComponent<Omit<Readonly<import("./separator").SeparatorProps>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants };
 //# sourceMappingURL=button-group.d.ts.map

package/dist/components/ui/button-group.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button-group.d.ts","sourceRoot":"","sources":["../../../src/components/ui/button-group.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAM,KAAK,YAAY,EAAC,MAAM,0BAA0B,CAAC;AAChE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,SAAS,EAAC,MAAM,2BAA2B,CAAC;AAGpD,QAAA,MAAM,mBAAmB;;iEAcxB,CAAC;AAEF,iBAAS,WAAW,CAAC,EAAC,SAAS,EAAE,WAAW,EAAE,GAAG,KAAK,EAAC,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG,YAAY,CAAC,OAAO,mBAAmB,CAAC,2CAU9H;AAED,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,OAAe,EACf,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAC/B,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,2CAYA;AAED,iBAAS,oBAAoB,CAAC,EAAC,SAAS,EAAE,WAAwB,EAAE,GAAG,KAAK,EAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,2CASpH;AAED,OAAO,EAAC,WAAW,EAAE,oBAAoB,EAAE,eAAe,EAAE,mBAAmB,EAAC,CAAC"}
+{"version":3,"file":"button-group.d.ts","sourceRoot":"","sources":["../../../src/components/ui/button-group.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,SAAS,EAAC,MAAM,2BAA2B,CAAC;AAIpD,2DAA2D;AAC3D,MAAM,MAAM,sBAAsB,GAAG,YAAY,GAAG,UAAU,CAAC;AAE/D,UAAU,yBAAyB;IACjC,gFAAgF;IAChF,WAAW,CAAC,EAAE,sBAAsB,CAAC;IACrC,sFAAsF;IACtF,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC;IAC7E,6DAA6D;IAC7D,WAAW,CAAC,EAAE,sBAAsB,CAAC;CACtC;AAED;;GAEG;AACH,MAAM,WAAW,oBAAqB,SAAQ,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC;IACjF,iFAAiF;IACjF,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;GAEG;AACH,MAAM,MAAM,yBAAyB,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,SAAS,CAAC,CAAC;AAEzF;;;;;;;;;;GAUG;AACH,iBAAS,mBAAmB,CAAC,EAAC,WAA0B,EAAE,SAAS,EAAC,GAAE,QAAQ,CAAC,yBAAyB,CAAM,GAAG,MAAM,CAEtH;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,QAAA,MAAM,WAAW,yFAWhB,CAAC;AAEF;;;;;;;;;;;;;;GAcG;AACH,QAAA,MAAM,eAAe,6FAwBpB,CAAC;AAEF;;;;;;;;;;;;;;GAcG;AACH,QAAA,MAAM,oBAAoB,kJAUzB,CAAC;AAMF,OAAO,EAAC,WAAW,EAAE,oBAAoB,EAAE,eAAe,EAAE,mBAAmB,EAAC,CAAC"}

package/dist/components/ui/button-group.js

@@ -1,47 +1,50 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import { Slot } from "@radix-ui/react-slot";
-import { cva } from "class-variance-authority";
-import "react";
+import { cloneElement, forwardRef, isValidElement } from "react";
 import { Separator } from "./separator.js";
 import { cn } from "../../lib/utilities.js";
-const buttonGroupVariants = cva("flex w-fit items-stretch has-[>[data-slot=button-group]]:gap-2 [&>*]:focus-visible:relative [&>*]:focus-visible:z-10 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1", {
-    variants: {
-        orientation: {
-            horizontal: "[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none",
-            vertical: "flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none"
-        }
-    },
-    defaultVariants: {
-        orientation: "horizontal"
-    }
-});
-function ButtonGroup({ className, orientation, ...props }) {
-    return /*#__PURE__*/ jsx("div", {
+import button_group_module from "./button-group.module.js";
+function buttonGroupVariants({ orientation = "horizontal", className } = {}) {
+    return cn(button_group_module.root, "vertical" === orientation ? button_group_module.vertical : button_group_module.horizontal, className);
+}
+const ButtonGroup = /*#__PURE__*/ forwardRef(({ className, orientation = "horizontal", ...props }, ref)=>/*#__PURE__*/ jsx("div", {
+        ref: ref,
         role: "group",
         "data-slot": "button-group",
         "data-orientation": orientation,
-        className: cn(buttonGroupVariants({
-            orientation
-        }), className),
-        ...props
-    });
-}
-function ButtonGroupText({ className, asChild = false, ...props }) {
-    const Comp = asChild ? Slot : "div";
-    return /*#__PURE__*/ jsx(Comp, {
-        className: cn("flex items-center gap-2 rounded-md border border-neutral-200 bg-neutral-100 px-4 text-sm font-medium shadow-xs dark:border-neutral-800 dark:bg-neutral-800 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4", className),
+        className: buttonGroupVariants({
+            orientation,
+            className
+        }),
         ...props
+    }));
+const ButtonGroupText = /*#__PURE__*/ forwardRef(({ className, asChild = false, children, ...props }, ref)=>{
+    const mergedClassName = cn(button_group_module.text, className);
+    if (asChild && /*#__PURE__*/ isValidElement(children)) {
+        const child = children;
+        return /*#__PURE__*/ cloneElement(child, {
+            ...props,
+            ref,
+            className: cn(mergedClassName, child.props.className)
+        });
+    }
+    return /*#__PURE__*/ jsx("div", {
+        ref: ref,
+        className: mergedClassName,
+        ...props,
+        children: children
     });
-}
-function ButtonGroupSeparator({ className, orientation = "vertical", ...props }) {
-    return /*#__PURE__*/ jsx(Separator, {
+});
+const ButtonGroupSeparator = /*#__PURE__*/ forwardRef(({ className, orientation = "vertical", ...props }, ref)=>/*#__PURE__*/ jsx(Separator, {
+        ref: ref,
         "data-slot": "button-group-separator",
         orientation: orientation,
-        className: cn("relative !m-0 self-stretch bg-neutral-200 data-[orientation=vertical]:h-auto dark:bg-neutral-800", className),
+        className: cn(button_group_module.separator, className),
         ...props
-    });
-}
+    }));
+ButtonGroup.displayName = "ButtonGroup";
+ButtonGroupText.displayName = "ButtonGroupText";
+ButtonGroupSeparator.displayName = "ButtonGroupSeparator";
 export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants };
 
 //# sourceMappingURL=button-group.js.map

package/dist/components/ui/button-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"components/ui/button-group.js","sources":["../../../src/components/ui/button-group.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport {Slot} from \"@radix-ui/react-slot\";\r\nimport {cva, type VariantProps} from \"class-variance-authority\";\r\nimport * as React from \"react\";\r\n\r\nimport {Separator} from \"@/components/ui/separator\";\r\nimport {cn} from \"@/lib/utilities\";\r\n\r\nconst buttonGroupVariants = cva(\r\n  \"flex w-fit items-stretch has-[>[data-slot=button-group]]:gap-2 [&>*]:focus-visible:relative [&>*]:focus-visible:z-10 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1\",\r\n  {\r\n    variants: {\r\n      orientation: {\r\n        horizontal: \"[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none\",\r\n        vertical:\r\n          \"flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none\",\r\n      },\r\n    },\r\n    defaultVariants: {\r\n      orientation: \"horizontal\",\r\n    },\r\n  },\r\n);\r\n\r\nfunction ButtonGroup({className, orientation, ...props}: React.ComponentProps<\"div\"> & VariantProps<typeof buttonGroupVariants>) {\r\n  return (\r\n    <div\r\n      role='group'\r\n      data-slot='button-group'\r\n      data-orientation={orientation}\r\n      className={cn(buttonGroupVariants({orientation}), className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction ButtonGroupText({\r\n  className,\r\n  asChild = false,\r\n  ...props\r\n}: React.ComponentProps<\"div\"> & {\r\n  asChild?: boolean;\r\n}) {\r\n  const Comp = asChild ? Slot : \"div\";\r\n\r\n  return (\r\n    <Comp\r\n      className={cn(\r\n        \"flex items-center gap-2 rounded-md border border-neutral-200 bg-neutral-100 px-4 text-sm font-medium shadow-xs dark:border-neutral-800 dark:bg-neutral-800 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4\",\r\n        className,\r\n      )}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction ButtonGroupSeparator({className, orientation = \"vertical\", ...props}: React.ComponentProps<typeof Separator>) {\r\n  return (\r\n    <Separator\r\n      data-slot='button-group-separator'\r\n      orientation={orientation}\r\n      className={cn(\"relative !m-0 self-stretch bg-neutral-200 data-[orientation=vertical]:h-auto dark:bg-neutral-800\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nexport {ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants};\r\n"],"names":["buttonGroupVariants","cva","ButtonGroup","className","orientation","props","cn","ButtonGroupText","asChild","Comp","Slot","ButtonGroupSeparator","Separator"],"mappings":";;;;;;;AASA,MAAMA,sBAAsBC,IAC1B,oSACA;IACE,UAAU;QACR,aAAa;YACX,YAAY;YACZ,UACE;QACJ;IACF;IACA,iBAAiB;QACf,aAAa;IACf;AACF;AAGF,SAASC,YAAY,EAACC,SAAS,EAAEC,WAAW,EAAE,GAAGC,OAA8E;IAC7H,OAAO,WAAP,GACE,IAAC;QACC,MAAK;QACL,aAAU;QACV,oBAAkBD;QAClB,WAAWE,GAAGN,oBAAoB;YAACI;QAAW,IAAID;QACjD,GAAGE,KAAK;;AAGf;AAEA,SAASE,gBAAgB,EACvBJ,SAAS,EACTK,UAAU,KAAK,EACf,GAAGH,OAGJ;IACC,MAAMI,OAAOD,UAAUE,OAAO;IAE9B,OAAO,WAAP,GACE,IAACD,MAAAA;QACC,WAAWH,GACT,+NACAH;QAED,GAAGE,KAAK;;AAGf;AAEA,SAASM,qBAAqB,EAACR,SAAS,EAAEC,cAAc,UAAU,EAAE,GAAGC,OAA8C;IACnH,OAAO,WAAP,GACE,IAACO,WAASA;QACR,aAAU;QACV,aAAaR;QACb,WAAWE,GAAG,oGAAoGH;QACjH,GAAGE,KAAK;;AAGf"}
+{"version":3,"file":"components/ui/button-group.js","sources":["../../../src/components/ui/button-group.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport * as React from \"react\";\r\n\r\nimport {Separator} from \"@/components/ui/separator\";\r\nimport {cn} from \"@/lib/utilities\";\r\nimport styles from \"./button-group.module.css\";\r\n\r\n/** Supported layout directions for {@link ButtonGroup}. */\r\nexport type ButtonGroupOrientation = \"horizontal\" | \"vertical\";\r\n\r\ninterface ButtonGroupVariantOptions {\r\n  /** Orientation used to resolve the root style classes. @default \"horizontal\" */\r\n  orientation?: ButtonGroupOrientation;\r\n  /** Additional classes merged into the generated variant string. @default undefined */\r\n  className?: string;\r\n}\r\n\r\n/**\r\n * Props for the {@link ButtonGroup} component.\r\n */\r\nexport interface ButtonGroupProps extends React.ComponentPropsWithoutRef<\"div\"> {\r\n  /** Arrangement of grouped controls. @default \"horizontal\" */\r\n  orientation?: ButtonGroupOrientation;\r\n}\r\n\r\n/**\r\n * Props for the {@link ButtonGroupText} component.\r\n */\r\nexport interface ButtonGroupTextProps extends React.ComponentPropsWithoutRef<\"div\"> {\r\n  /** Enables rendering an existing div-compatible child element. @default false */\r\n  asChild?: boolean;\r\n}\r\n\r\n/**\r\n * Props for the {@link ButtonGroupSeparator} component.\r\n */\r\nexport type ButtonGroupSeparatorProps = React.ComponentPropsWithoutRef<typeof Separator>;\r\n\r\n/**\r\n * Returns the CSS class list for a button group root.\r\n *\r\n * @param options - Variant options used to derive the generated class string.\r\n * @returns The merged class name string for the requested orientation.\r\n *\r\n * @example\r\n * ```tsx\r\n * const className = buttonGroupVariants({orientation: \"vertical\"});\r\n * ```\r\n */\r\nfunction buttonGroupVariants({orientation = \"horizontal\", className}: Readonly<ButtonGroupVariantOptions> = {}): string {\r\n  return cn(styles.root, orientation === \"vertical\" ? styles.vertical : styles.horizontal, className);\r\n}\r\n\r\n/**\r\n * Aligns related buttons into a single visual control group.\r\n *\r\n * @remarks\r\n * - Pure CSS component (no Base UI primitive)\r\n * - Renders a `<div>` element\r\n * - Styling via CSS Modules with `--ac-*` custom properties\r\n *\r\n * @example\r\n * ```tsx\r\n * <ButtonGroup>\r\n *   <button type='button'>Left</button>\r\n *   <button type='button'>Right</button>\r\n * </ButtonGroup>\r\n * ```\r\n *\r\n * @see {@link ButtonGroupProps} for available props\r\n */\r\nconst ButtonGroup = React.forwardRef<HTMLDivElement, ButtonGroupProps>(\r\n  ({className, orientation = \"horizontal\", ...props}: Readonly<ButtonGroupProps>, ref): React.JSX.Element => (\r\n    <div\r\n      ref={ref}\r\n      role='group'\r\n      data-slot='button-group'\r\n      data-orientation={orientation}\r\n      className={buttonGroupVariants({orientation, className})}\r\n      {...props}\r\n    />\r\n  ),\r\n);\r\n\r\n/**\r\n * Adds descriptive text content within a button group layout.\r\n *\r\n * @remarks\r\n * - Pure CSS component (no Base UI primitive)\r\n * - Renders a `<div>` element by default\r\n * - Styling via CSS Modules with `--ac-*` custom properties\r\n *\r\n * @example\r\n * ```tsx\r\n * <ButtonGroupText>Actions</ButtonGroupText>\r\n * ```\r\n *\r\n * @see {@link ButtonGroupTextProps} for available props\r\n */\r\nconst ButtonGroupText = React.forwardRef<HTMLDivElement, ButtonGroupTextProps>(\r\n  ({className, asChild = false, children, ...props}: Readonly<ButtonGroupTextProps>, ref): React.JSX.Element => {\r\n    const mergedClassName = cn(styles.text, className);\r\n\r\n    if (asChild && React.isValidElement(children)) {\r\n      const child = children as React.ReactElement<React.ComponentPropsWithoutRef<\"div\"> & {ref?: React.Ref<HTMLDivElement>}>;\r\n\r\n      // eslint-disable-next-line react-x/no-clone-element -- replaces Radix Slot while preserving asChild prop merging\r\n      return React.cloneElement(child, {\r\n        ...props,\r\n        ref,\r\n        className: cn(mergedClassName, child.props.className),\r\n      });\r\n    }\r\n\r\n    return (\r\n      <div\r\n        ref={ref}\r\n        className={mergedClassName}\r\n        {...props}>\r\n        {children}\r\n      </div>\r\n    );\r\n  },\r\n);\r\n\r\n/**\r\n * Inserts a separator between grouped controls.\r\n *\r\n * @remarks\r\n * - Pure CSS component (no Base UI primitive)\r\n * - Renders a wrapped `Separator` component\r\n * - Styling via CSS Modules with `--ac-*` custom properties\r\n *\r\n * @example\r\n * ```tsx\r\n * <ButtonGroupSeparator orientation='vertical' />\r\n * ```\r\n *\r\n * @see {@link ButtonGroupSeparatorProps} for available props\r\n */\r\nconst ButtonGroupSeparator = React.forwardRef<HTMLDivElement, ButtonGroupSeparatorProps>(\r\n  ({className, orientation = \"vertical\", ...props}: Readonly<ButtonGroupSeparatorProps>, ref): React.JSX.Element => (\r\n    <Separator\r\n      ref={ref}\r\n      data-slot='button-group-separator'\r\n      orientation={orientation}\r\n      className={cn(styles.separator, className)}\r\n      {...props}\r\n    />\r\n  ),\r\n);\r\n\r\nButtonGroup.displayName = \"ButtonGroup\";\r\nButtonGroupText.displayName = \"ButtonGroupText\";\r\nButtonGroupSeparator.displayName = \"ButtonGroupSeparator\";\r\n\r\nexport {ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants};\r\n"],"names":["buttonGroupVariants","orientation","className","cn","styles","ButtonGroup","React","props","ref","ButtonGroupText","asChild","children","mergedClassName","child","ButtonGroupSeparator","Separator"],"mappings":";;;;;;AAkDA,SAASA,oBAAoB,EAACC,cAAc,YAAY,EAAEC,SAAS,EAAsC,GAAG,CAAC,CAAC;IAC5G,OAAOC,GAAGC,oBAAAA,IAAW,EAAEH,AAAgB,eAAhBA,cAA6BG,oBAAAA,QAAe,GAAGA,oBAAAA,UAAiB,EAAEF;AAC3F;AAoBA,MAAMG,cAAc,WAAHA,GAAGC,WAClB,CAAC,EAACJ,SAAS,EAAED,cAAc,YAAY,EAAE,GAAGM,OAAkC,EAAEC,MAAAA,WAAAA,GAC9E,IAAC;QACC,KAAKA;QACL,MAAK;QACL,aAAU;QACV,oBAAkBP;QAClB,WAAWD,oBAAoB;YAACC;YAAaC;QAAS;QACrD,GAAGK,KAAK;;AAoBf,MAAME,kBAAkB,WAAHA,GAAGH,WACtB,CAAC,EAACJ,SAAS,EAAEQ,UAAU,KAAK,EAAEC,QAAQ,EAAE,GAAGJ,OAAsC,EAAEC;IACjF,MAAMI,kBAAkBT,GAAGC,oBAAAA,IAAW,EAAEF;IAExC,IAAIQ,WAAW,WAAXA,GAAWJ,eAAqBK,WAAW;QAC7C,MAAME,QAAQF;QAGd,OAAO,WAAP,GAAOL,aAAmBO,OAAO;YAC/B,GAAGN,KAAK;YACRC;YACA,WAAWL,GAAGS,iBAAiBC,MAAM,KAAK,CAAC,SAAS;QACtD;IACF;IAEA,OAAO,WAAP,GACE,IAAC;QACC,KAAKL;QACL,WAAWI;QACV,GAAGL,KAAK;kBACRI;;AAGP;AAkBF,MAAMG,uBAAuB,WAAHA,GAAGR,WAC3B,CAAC,EAACJ,SAAS,EAAED,cAAc,UAAU,EAAE,GAAGM,OAA2C,EAAEC,MAAAA,WAAAA,GACrF,IAACO,WAASA;QACR,KAAKP;QACL,aAAU;QACV,aAAaP;QACb,WAAWE,GAAGC,oBAAAA,SAAgB,EAAEF;QAC/B,GAAGK,KAAK;;AAKfF,YAAY,WAAW,GAAG;AAC1BI,gBAAgB,WAAW,GAAG;AAC9BK,qBAAqB,WAAW,GAAG"}

package/dist/components/ui/button-group.module.js

@@ -0,0 +1,11 @@
+import "./button-group_module.css";
+const button_group_module = {
+    root: "root-Z5pCsu",
+    horizontal: "horizontal-kveVYa",
+    vertical: "vertical-L4G4Ah",
+    text: "text-VDSn9t",
+    separator: "separator-yqxF4d"
+};
+export default button_group_module;
+
+//# sourceMappingURL=button-group.module.js.map

package/dist/components/ui/button-group.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/ui/button-group.module.js","sources":["../../../src/components/ui/button-group.module.css"],"sourcesContent":["// extracted by LIB_CSS_EXTRACT_LOADER\nimport \"./button-group_module.css\"\nexport default {\"root\":\"root-Z5pCsu\",\"horizontal\":\"horizontal-kveVYa\",\"vertical\":\"vertical-L4G4Ah\",\"text\":\"text-VDSn9t\",\"separator\":\"separator-yqxF4d\"};"],"names":[],"mappings":";AAEA,4BAAe;IAAC,MAAO;IAAc,YAAa;IAAoB,UAAW;IAAkB,MAAO;IAAc,WAAY;AAAkB"}