@arolariu/components 0.5.0 → 1.0.0

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

@@ -1,19 +1,20 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { motion } from "motion/react";
-import { forwardRef } from "react";
+import { forwardRef, useCallback, useMemo } from "react";
 import { cn } from "../../lib/utilities.js";
-const defaultSpanClassName = "absolute inset-0 flex items-center justify-center rounded-lg";
+import flip_button_module from "./flip-button.module.js";
 const FlipButton = /*#__PURE__*/ forwardRef(({ frontText, backText, transition = {
     type: "spring",
     stiffness: 280,
     damping: 20
 }, className, frontClassName, backClassName, from = "top", ...props }, ref)=>{
+    const { key: _ignoredKey, ...restProps } = props;
     const isVertical = "top" === from || "bottom" === from;
     const rotateAxis = isVertical ? "rotateX" : "rotateY";
     const frontOffset = "top" === from || "left" === from ? "50%" : "-50%";
     const backOffset = "top" === from || "left" === from ? "-50%" : "50%";
-    const buildVariant = (opacity, rotation, offset = null)=>({
+    const buildVariant = useCallback((opacity, rotation, offset = null)=>({
             opacity,
             [rotateAxis]: rotation,
             ...isVertical && null !== offset ? {
@@ -22,15 +23,24 @@ const FlipButton = /*#__PURE__*/ forwardRef(({ frontText, backText, transition =
             ...!isVertical && null !== offset ? {
                 x: offset
             } : {}
-        });
-    const frontVariants = {
-        initial: buildVariant(1, 0, "0%"),
-        hover: buildVariant(0, 90, frontOffset)
-    };
-    const backVariants = {
-        initial: buildVariant(0, 90, backOffset),
-        hover: buildVariant(1, 0, "0%")
-    };
+        }), [
+        isVertical,
+        rotateAxis
+    ]);
+    const frontVariants = useMemo(()=>({
+            initial: buildVariant(1, 0, "0%"),
+            hover: buildVariant(0, 90, frontOffset)
+        }), [
+        buildVariant,
+        frontOffset
+    ]);
+    const backVariants = useMemo(()=>({
+            initial: buildVariant(0, 90, backOffset),
+            hover: buildVariant(1, 0, "0%")
+        }), [
+        backOffset,
+        buildVariant
+    ]);
     return /*#__PURE__*/ jsxs(motion.button, {
         ref: ref,
         initial: "initial",
@@ -38,23 +48,23 @@ const FlipButton = /*#__PURE__*/ forwardRef(({ frontText, backText, transition =
         whileTap: {
             scale: 0.95
         },
-        className: cn("relative inline-block h-10 cursor-pointer px-4 py-2 text-sm font-medium perspective-[1000px] focus:outline-none", className),
-        ...props,
+        className: cn(flip_button_module.button, className),
+        ...restProps,
         children: [
             /*#__PURE__*/ jsx(motion.span, {
                 variants: frontVariants,
                 transition: transition,
-                className: cn(defaultSpanClassName, "bg-muted text-black dark:text-white", frontClassName),
+                className: cn(flip_button_module.face, flip_button_module.front, frontClassName),
                 children: frontText
             }),
             /*#__PURE__*/ jsx(motion.span, {
                 variants: backVariants,
                 transition: transition,
-                className: cn(defaultSpanClassName, "bg-primary text-primary-foreground", backClassName),
+                className: cn(flip_button_module.face, flip_button_module.back, backClassName),
                 children: backText
             }),
             /*#__PURE__*/ jsx("span", {
-                className: "invisible",
+                className: flip_button_module.measure,
                 children: frontText
             })
         ]

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

@@ -1 +1 @@
-{"version":3,"file":"components/ui/flip-button.js","sources":["../../../src/components/ui/flip-button.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport {type HTMLMotionProps, type Transition, type Variant, motion} from \"motion/react\";\r\nimport * as React from \"react\";\r\n\r\nimport {cn} from \"@/lib/utilities\";\r\n\r\ntype FlipDirection = \"top\" | \"bottom\" | \"left\" | \"righ\";\r\n\r\ninterface FlipButtonProps extends HTMLMotionProps<\"button\"> {\r\n  frontText: string;\r\n  backText: string;\r\n  transition?: Transition;\r\n  frontClassName?: string;\r\n  backClassName?: string;\r\n  from?: FlipDirection;\r\n}\r\n\r\nconst defaultSpanClassName = \"absolute inset-0 flex items-center justify-center rounded-lg\";\r\n\r\nconst FlipButton = React.forwardRef<HTMLButtonElement, FlipButtonProps>(\r\n  (\r\n    {\r\n      frontText,\r\n      backText,\r\n      transition = {type: \"spring\", stiffness: 280, damping: 20},\r\n      className,\r\n      frontClassName,\r\n      backClassName,\r\n      from = \"top\",\r\n      ...props\r\n    },\r\n    ref,\r\n  ) => {\r\n    const isVertical = from === \"top\" || from === \"bottom\";\r\n    const rotateAxis = isVertical ? \"rotateX\" : \"rotateY\";\r\n\r\n    const frontOffset = from === \"top\" || from === \"left\" ? \"50%\" : \"-50%\";\r\n    const backOffset = from === \"top\" || from === \"left\" ? \"-50%\" : \"50%\";\r\n\r\n    const buildVariant = (opacity: number, rotation: number, offset: string | null = null): Variant => ({\r\n      opacity,\r\n      [rotateAxis]: rotation,\r\n      ...(isVertical && offset !== null ? {y: offset} : {}),\r\n      ...(!isVertical && offset !== null ? {x: offset} : {}),\r\n    });\r\n\r\n    const frontVariants = {\r\n      initial: buildVariant(1, 0, \"0%\"),\r\n      hover: buildVariant(0, 90, frontOffset),\r\n    };\r\n\r\n    const backVariants = {\r\n      initial: buildVariant(0, 90, backOffset),\r\n      hover: buildVariant(1, 0, \"0%\"),\r\n    };\r\n\r\n    return (\r\n      <motion.button\r\n        ref={ref}\r\n        initial='initial'\r\n        whileHover='hover'\r\n        whileTap={{scale: 0.95}}\r\n        className={cn(\r\n          \"relative inline-block h-10 cursor-pointer px-4 py-2 text-sm font-medium perspective-[1000px] focus:outline-none\",\r\n          className,\r\n        )}\r\n        {...props}>\r\n        <motion.span\r\n          variants={frontVariants}\r\n          transition={transition}\r\n          className={cn(defaultSpanClassName, \"bg-muted text-black dark:text-white\", frontClassName)}>\r\n          {frontText}\r\n        </motion.span>\r\n        <motion.span\r\n          variants={backVariants}\r\n          transition={transition}\r\n          className={cn(defaultSpanClassName, \"bg-primary text-primary-foreground\", backClassName)}>\r\n          {backText}\r\n        </motion.span>\r\n        <span className='invisible'>{frontText}</span>\r\n      </motion.button>\r\n    );\r\n  },\r\n);\r\n\r\nFlipButton.displayName = \"FlipButton\";\r\n\r\nexport {FlipButton, type FlipButtonProps, type FlipDirection};\r\n"],"names":["defaultSpanClassName","FlipButton","React","frontText","backText","transition","className","frontClassName","backClassName","from","props","ref","isVertical","rotateAxis","frontOffset","backOffset","buildVariant","opacity","rotation","offset","frontVariants","backVariants","motion","cn"],"mappings":";;;;;AAkBA,MAAMA,uBAAuB;AAE7B,MAAMC,aAAa,WAAbA,GAAaC,WACjB,CACE,EACEC,SAAS,EACTC,QAAQ,EACRC,aAAa;IAAC,MAAM;IAAU,WAAW;IAAK,SAAS;AAAE,CAAC,EAC1DC,SAAS,EACTC,cAAc,EACdC,aAAa,EACbC,OAAO,KAAK,EACZ,GAAGC,OACJ,EACDC;IAEA,MAAMC,aAAaH,AAAS,UAATA,QAAkBA,AAAS,aAATA;IACrC,MAAMI,aAAaD,aAAa,YAAY;IAE5C,MAAME,cAAcL,AAAS,UAATA,QAAkBA,AAAS,WAATA,OAAkB,QAAQ;IAChE,MAAMM,aAAaN,AAAS,UAATA,QAAkBA,AAAS,WAATA,OAAkB,SAAS;IAEhE,MAAMO,eAAe,CAACC,SAAiBC,UAAkBC,SAAwB,IAAI,GAAe;YAClGF;YACA,CAACJ,WAAW,EAAEK;YACd,GAAIN,cAAcO,AAAW,SAAXA,SAAkB;gBAAC,GAAGA;YAAM,IAAI,CAAC,CAAC;YACpD,GAAI,CAACP,cAAcO,AAAW,SAAXA,SAAkB;gBAAC,GAAGA;YAAM,IAAI,CAAC,CAAC;QACvD;IAEA,MAAMC,gBAAgB;QACpB,SAASJ,aAAa,GAAG,GAAG;QAC5B,OAAOA,aAAa,GAAG,IAAIF;IAC7B;IAEA,MAAMO,eAAe;QACnB,SAASL,aAAa,GAAG,IAAID;QAC7B,OAAOC,aAAa,GAAG,GAAG;IAC5B;IAEA,OAAO,WAAP,GACE,KAACM,OAAO,MAAM;QACZ,KAAKX;QACL,SAAQ;QACR,YAAW;QACX,UAAU;YAAC,OAAO;QAAI;QACtB,WAAWY,GACT,mHACAjB;QAED,GAAGI,KAAK;;0BACT,IAACY,OAAO,IAAI;gBACV,UAAUF;gBACV,YAAYf;gBACZ,WAAWkB,GAAGvB,sBAAsB,uCAAuCO;0BAC1EJ;;0BAEH,IAACmB,OAAO,IAAI;gBACV,UAAUD;gBACV,YAAYhB;gBACZ,WAAWkB,GAAGvB,sBAAsB,sCAAsCQ;0BACzEJ;;0BAEH,IAAC;gBAAK,WAAU;0BAAaD;;;;AAGnC;AAGFF,WAAW,WAAW,GAAG"}
+{"version":3,"file":"components/ui/flip-button.js","sources":["../../../src/components/ui/flip-button.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport {type HTMLMotionProps, motion, type Transition, type Variant} from \"motion/react\";\r\nimport * as React from \"react\";\r\n\r\nimport {cn} from \"@/lib/utilities\";\r\nimport styles from \"./flip-button.module.css\";\r\n\r\n/** Supported flip origins for the button animation. */\r\nexport type FlipDirection = \"top\" | \"bottom\" | \"left\" | \"righ\";\r\n\r\n/** Props accepted by {@link FlipButton}. */\r\nexport interface FlipButtonProps extends HTMLMotionProps<\"button\"> {\r\n  /** Label rendered on the default face of the button. @default undefined */\r\n  frontText: string;\r\n  /** Label revealed after the flip animation completes. @default undefined */\r\n  backText: string;\r\n  /** Motion transition applied to both button faces. @default {type: \"spring\", stiffness: 280, damping: 20} */\r\n  transition?: Transition;\r\n  /** Additional CSS classes merged with the front face. @default undefined */\r\n  frontClassName?: string;\r\n  /** Additional CSS classes merged with the back face. @default undefined */\r\n  backClassName?: string;\r\n  /** Direction from which the back face flips into view. @default \"top\" */\r\n  from?: FlipDirection;\r\n}\r\n\r\n/**\r\n * Renders a two-sided button that flips between front and back labels on hover.\r\n *\r\n * @remarks\r\n * - Animated component using the `motion` library\r\n * - Renders a `<button>` 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 * <FlipButton frontText=\"Learn more\" backText=\"Open\" />\r\n * ```\r\n *\r\n * @see {@link FlipButtonProps} for available props\r\n */\r\nconst FlipButton = React.forwardRef<HTMLButtonElement, FlipButtonProps>(\r\n  (\r\n    {\r\n      frontText,\r\n      backText,\r\n      transition = {type: \"spring\", stiffness: 280, damping: 20},\r\n      className,\r\n      frontClassName,\r\n      backClassName,\r\n      from = \"top\",\r\n      ...props\r\n    },\r\n    ref,\r\n  ) => {\r\n    // eslint-disable-next-line sonarjs/no-unused-vars -- removing React key avoids implicit key spreading\r\n    const {key: _ignoredKey, ...restProps} = props;\r\n    const isVertical = from === \"top\" || from === \"bottom\";\r\n    const rotateAxis = isVertical ? \"rotateX\" : \"rotateY\";\r\n\r\n    const frontOffset = from === \"top\" || from === \"left\" ? \"50%\" : \"-50%\";\r\n    const backOffset = from === \"top\" || from === \"left\" ? \"-50%\" : \"50%\";\r\n\r\n    const buildVariant = React.useCallback(\r\n      (opacity: number, rotation: number, offset: string | null = null): Variant => ({\r\n        opacity,\r\n        [rotateAxis]: rotation,\r\n        ...(isVertical && offset !== null ? {y: offset} : {}),\r\n        ...(!isVertical && offset !== null ? {x: offset} : {}),\r\n      }),\r\n      [isVertical, rotateAxis],\r\n    );\r\n\r\n    const frontVariants = React.useMemo(\r\n      () => ({\r\n        initial: buildVariant(1, 0, \"0%\"),\r\n        hover: buildVariant(0, 90, frontOffset),\r\n      }),\r\n      [buildVariant, frontOffset],\r\n    );\r\n\r\n    const backVariants = React.useMemo(\r\n      () => ({\r\n        initial: buildVariant(0, 90, backOffset),\r\n        hover: buildVariant(1, 0, \"0%\"),\r\n      }),\r\n      [backOffset, buildVariant],\r\n    );\r\n\r\n    return (\r\n      <motion.button\r\n        ref={ref}\r\n        initial='initial'\r\n        whileHover='hover'\r\n        whileTap={{scale: 0.95}}\r\n        className={cn(styles.button, className)}\r\n        {...restProps}>\r\n        <motion.span\r\n          variants={frontVariants}\r\n          transition={transition}\r\n          className={cn(styles.face, styles.front, frontClassName)}>\r\n          {frontText}\r\n        </motion.span>\r\n        <motion.span\r\n          variants={backVariants}\r\n          transition={transition}\r\n          className={cn(styles.face, styles.back, backClassName)}>\r\n          {backText}\r\n        </motion.span>\r\n        <span className={styles.measure}>{frontText}</span>\r\n      </motion.button>\r\n    );\r\n  },\r\n);\r\n\r\nFlipButton.displayName = \"FlipButton\";\r\n\r\nexport {FlipButton};\r\n"],"names":["FlipButton","React","frontText","backText","transition","className","frontClassName","backClassName","from","props","ref","_ignoredKey","restProps","isVertical","rotateAxis","frontOffset","backOffset","buildVariant","opacity","rotation","offset","frontVariants","backVariants","motion","cn","styles"],"mappings":";;;;;;AA2CA,MAAMA,aAAa,WAAHA,GAAGC,WACjB,CACE,EACEC,SAAS,EACTC,QAAQ,EACRC,aAAa;IAAC,MAAM;IAAU,WAAW;IAAK,SAAS;AAAE,CAAC,EAC1DC,SAAS,EACTC,cAAc,EACdC,aAAa,EACbC,OAAO,KAAK,EACZ,GAAGC,OACJ,EACDC;IAGA,MAAM,EAAC,KAAKC,WAAW,EAAE,GAAGC,WAAU,GAAGH;IACzC,MAAMI,aAAaL,AAAS,UAATA,QAAkBA,AAAS,aAATA;IACrC,MAAMM,aAAaD,aAAa,YAAY;IAE5C,MAAME,cAAcP,AAAS,UAATA,QAAkBA,AAAS,WAATA,OAAkB,QAAQ;IAChE,MAAMQ,aAAaR,AAAS,UAATA,QAAkBA,AAAS,WAATA,OAAkB,SAAS;IAEhE,MAAMS,eAAehB,YACnB,CAACiB,SAAiBC,UAAkBC,SAAwB,IAAI,GAAe;YAC7EF;YACA,CAACJ,WAAW,EAAEK;YACd,GAAIN,cAAcO,AAAW,SAAXA,SAAkB;gBAAC,GAAGA;YAAM,IAAI,CAAC,CAAC;YACpD,GAAI,CAACP,cAAcO,AAAW,SAAXA,SAAkB;gBAAC,GAAGA;YAAM,IAAI,CAAC,CAAC;QACvD,IACA;QAACP;QAAYC;KAAW;IAG1B,MAAMO,gBAAgBpB,QACpB,IAAO;YACL,SAASgB,aAAa,GAAG,GAAG;YAC5B,OAAOA,aAAa,GAAG,IAAIF;QAC7B,IACA;QAACE;QAAcF;KAAY;IAG7B,MAAMO,eAAerB,QACnB,IAAO;YACL,SAASgB,aAAa,GAAG,IAAID;YAC7B,OAAOC,aAAa,GAAG,GAAG;QAC5B,IACA;QAACD;QAAYC;KAAa;IAG5B,OAAO,WAAP,GACE,KAACM,OAAO,MAAM;QACZ,KAAKb;QACL,SAAQ;QACR,YAAW;QACX,UAAU;YAAC,OAAO;QAAI;QACtB,WAAWc,GAAGC,mBAAAA,MAAa,EAAEpB;QAC5B,GAAGO,SAAS;;0BACb,IAACW,OAAO,IAAI;gBACV,UAAUF;gBACV,YAAYjB;gBACZ,WAAWoB,GAAGC,mBAAAA,IAAW,EAAEA,mBAAAA,KAAY,EAAEnB;0BACxCJ;;0BAEH,IAACqB,OAAO,IAAI;gBACV,UAAUD;gBACV,YAAYlB;gBACZ,WAAWoB,GAAGC,mBAAAA,IAAW,EAAEA,mBAAAA,IAAW,EAAElB;0BACvCJ;;0BAEH,IAAC;gBAAK,WAAWsB,mBAAAA,OAAc;0BAAGvB;;;;AAGxC;AAGFF,WAAW,WAAW,GAAG"}

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

@@ -0,0 +1,11 @@
+import "./flip-button_module.css";
+const flip_button_module = {
+    button: "button-xnaeSA",
+    face: "face-i7p2h4",
+    front: "front-wlGqoF",
+    back: "back-g4U4Lz",
+    measure: "measure-MK5wm8"
+};
+export default flip_button_module;
+
+//# sourceMappingURL=flip-button.module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"components/ui/flip-button.module.js","sources":["../../../src/components/ui/flip-button.module.css"],"sourcesContent":["// extracted by LIB_CSS_EXTRACT_LOADER\nimport \"./flip-button_module.css\"\nexport default {\"button\":\"button-xnaeSA\",\"face\":\"face-i7p2h4\",\"front\":\"front-wlGqoF\",\"back\":\"back-g4U4Lz\",\"measure\":\"measure-MK5wm8\"};"],"names":[],"mappings":";AAEA,2BAAe;IAAC,QAAS;IAAgB,MAAO;IAAc,OAAQ;IAAe,MAAO;IAAc,SAAU;AAAgB"}

package/dist/components/ui/flip-button_module.css

@@ -0,0 +1,47 @@
+.button-xnaeSA {
+  color: inherit;
+  cursor: pointer;
+  font-size: var(--ac-text-sm);
+  perspective: 1000px;
+  background: none;
+  border: 0;
+  height: 2.5rem;
+  padding: .5rem 1rem;
+  font-weight: 500;
+  line-height: 1.25rem;
+  display: inline-block;
+  position: relative;
+}
+
+.button-xnaeSA:focus-visible {
+  outline: 2px solid var(--ac-ring);
+  outline-offset: 2px;
+}
+
+.face-i7p2h4 {
+  backface-visibility: hidden;
+  border-radius: var(--ac-radius-lg);
+  transform-style: preserve-3d;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  position: absolute;
+  inset: 0;
+}
+
+.front-wlGqoF {
+  background: var(--ac-muted);
+  color: var(--ac-foreground);
+}
+
+.back-g4U4Lz {
+  background: var(--ac-primary);
+  color: var(--ac-primary-foreground);
+}
+
+.measure-MK5wm8 {
+  visibility: hidden;
+}
+
+
+/*# sourceMappingURL=flip-button_module.css.map */

package/dist/components/ui/flip-button_module.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["webpack://./home/runner/work/arolariu.ro/arolariu.ro/packages/components/src/components/ui/flip-button.module.css","webpack://./src/components/ui/flip-button.module.css"],"names":[],"mappings":"AADA;ECEE,cAAc;EACd,eAAe;EACf,4BAA4B;EAC5B,mBAAmB;EACnB,gBAAgB;EAChB,SAAS;EACT,cAAc;EACd,mBAAmB;EACnB,gBAAgB;EAChB,oBAAoB;EACpB,qBAAqB;EACrB,kBAAkB;AACpB;;AAEA;EACE,iCAAiC;EACjC,mBAAmB;AACrB;;AAEA;EACE,2BAA2B;EAC3B,kCAAkC;EAClC,4BAA4B;EAC5B,uBAAuB;EACvB,mBAAmB;EACnB,aAAa;EACb,kBAAkB;EAClB,QAAQ;AACV;;AAEA;EACE,2BAA2B;EAC3B,2BAA2B;AAC7B;;AAEA;EACE,6BAA6B;EAC7B,mCAAmC;AACrC;;AAEA;EACE,kBAAkB;AACpB","sourcesContent":[".button{background:transparent;border:0;color:inherit;cursor:pointer;display:inline-block;font-size:var(--ac-text-sm);font-weight:500;height:2.5rem;line-height:1.25rem;padding:.5rem 1rem;perspective:1000px;position:relative}.button:focus-visible{outline:2px solid var(--ac-ring);outline-offset:2px}.face{align-items:center;backface-visibility:hidden;border-radius:var(--ac-radius-lg);display:flex;inset:0;justify-content:center;position:absolute;transform-style:preserve-3d}.front{background:var(--ac-muted);color:var(--ac-foreground)}.back{background:var(--ac-primary);color:var(--ac-primary-foreground)}.measure{visibility:hidden}",".button {\n  color: inherit;\n  cursor: pointer;\n  font-size: var(--ac-text-sm);\n  perspective: 1000px;\n  background: none;\n  border: 0;\n  height: 2.5rem;\n  padding: .5rem 1rem;\n  font-weight: 500;\n  line-height: 1.25rem;\n  display: inline-block;\n  position: relative;\n}\n\n.button:focus-visible {\n  outline: 2px solid var(--ac-ring);\n  outline-offset: 2px;\n}\n\n.face {\n  backface-visibility: hidden;\n  border-radius: var(--ac-radius-lg);\n  transform-style: preserve-3d;\n  justify-content: center;\n  align-items: center;\n  display: flex;\n  position: absolute;\n  inset: 0;\n}\n\n.front {\n  background: var(--ac-muted);\n  color: var(--ac-foreground);\n}\n\n.back {\n  background: var(--ac-primary);\n  color: var(--ac-primary-foreground);\n}\n\n.measure {\n  visibility: hidden;\n}\n"],"sourceRoot":""}

package/dist/components/ui/focus-scope.js

@@ -0,0 +1,70 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { forwardRef, useEffect, useRef } from "react";
+import { cn } from "../../lib/utilities.js";
+import focus_scope_module from "./focus-scope.module.js";
+const FOCUSABLE_SELECTOR = 'a[href], button:not(:disabled), input:not(:disabled), select:not(:disabled), textarea:not(:disabled), [tabindex]:not([tabindex="-1"]), [contenteditable]';
+function getFocusableElements(container) {
+    return [
+        ...container.querySelectorAll(FOCUSABLE_SELECTOR)
+    ].filter((element)=>!element.hasAttribute("disabled") && element.tabIndex >= 0);
+}
+const FocusScope = /*#__PURE__*/ forwardRef(({ contain = true, restoreFocus = true, autoFocus = false, children, className, ...props }, ref)=>{
+    const containerRef = useRef(null);
+    const previousFocusRef = useRef(null);
+    useEffect(()=>{
+        previousFocusRef.current = document.activeElement;
+        if (autoFocus && containerRef.current) {
+            const focusable = getFocusableElements(containerRef.current);
+            focusable[0]?.focus();
+        }
+        return ()=>{
+            if (restoreFocus && previousFocusRef.current instanceof HTMLElement) previousFocusRef.current.focus();
+        };
+    }, [
+        autoFocus,
+        restoreFocus
+    ]);
+    useEffect(()=>{
+        const container = containerRef.current;
+        if (!container) return;
+        const handleKeyDown = (event)=>{
+            if (!contain || "Tab" !== event.key) return;
+            const focusable = getFocusableElements(container);
+            if (0 === focusable.length) return;
+            const [first] = focusable;
+            const last = focusable.at(-1);
+            if (event.shiftKey && first?.isSameNode(document.activeElement)) {
+                event.preventDefault();
+                last?.focus();
+                return;
+            }
+            if (!event.shiftKey && last?.isSameNode(document.activeElement)) {
+                event.preventDefault();
+                first?.focus();
+            }
+        };
+        container.addEventListener("keydown", handleKeyDown);
+        return ()=>{
+            container.removeEventListener("keydown", handleKeyDown);
+        };
+    }, [
+        contain
+    ]);
+    return /*#__PURE__*/ jsx("div", {
+        ref: (node)=>{
+            containerRef.current = node;
+            if ("function" == typeof ref) return void ref(node);
+            if (ref) ref.current = node;
+        },
+        className: cn(focus_scope_module.scope, className),
+        role: props.role ?? "group",
+        tabIndex: props.tabIndex ?? -1,
+        ...props,
+        children: children
+    });
+});
+FocusScope.displayName = "FocusScope";
+export { FocusScope };
+
+//# sourceMappingURL=focus-scope.js.map

package/dist/components/ui/focus-scope.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/ui/focus-scope.js","sources":["../../../src/components/ui/focus-scope.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport * as React from \"react\";\r\n\r\nimport {cn} from \"@/lib/utilities\";\r\n\r\nimport styles from \"./focus-scope.module.css\";\r\n\r\n/**\r\n * Represents the configurable props for the {@link FocusScope} component.\r\n */\r\ninterface FocusScopeProps extends React.HTMLAttributes<HTMLDivElement> {\r\n  /**\r\n   * Whether focus should be trapped within the scope.\r\n   *\r\n   * @defaultValue true\r\n   */\r\n  contain?: boolean;\r\n  /**\r\n   * Whether to restore focus to the previously focused element on unmount.\r\n   *\r\n   * @defaultValue true\r\n   */\r\n  restoreFocus?: boolean;\r\n  /**\r\n   * Whether to auto-focus the first focusable element on mount.\r\n   *\r\n   * @defaultValue false\r\n   */\r\n  autoFocus?: boolean;\r\n  /**\r\n   * Content rendered within the focus scope.\r\n   */\r\n  children: React.ReactNode;\r\n}\r\n\r\nconst FOCUSABLE_SELECTOR = [\r\n  \"a[href]\",\r\n  \"button:not(:disabled)\",\r\n  \"input:not(:disabled)\",\r\n  \"select:not(:disabled)\",\r\n  \"textarea:not(:disabled)\",\r\n  '[tabindex]:not([tabindex=\"-1\"])',\r\n  \"[contenteditable]\",\r\n].join(\", \");\r\n\r\nfunction getFocusableElements(container: HTMLElement): HTMLElement[] {\r\n  return [...container.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR)].filter(\r\n    (element) => !element.hasAttribute(\"disabled\") && element.tabIndex >= 0,\r\n  );\r\n}\r\n\r\n/**\r\n * Traps keyboard focus within a container element.\r\n *\r\n * @remarks\r\n * Renders a `<div>` and cycles `Tab` and `Shift+Tab` navigation through its focusable\r\n * descendants without allowing focus to escape the scope. Use it for custom dialogs,\r\n * drawers, and composite widgets that need explicit focus containment and restoration.\r\n *\r\n * Base UI dialog-style primitives already manage focus internally, so prefer those\r\n * built-in mechanisms when available.\r\n *\r\n * @example\r\n * ```tsx\r\n * <FocusScope contain autoFocus>\r\n *   <input placeholder='First' />\r\n *   <input placeholder='Second' />\r\n *   <button type='submit'>Submit</button>\r\n * </FocusScope>\r\n * ```\r\n */\r\nconst FocusScope = React.forwardRef<HTMLDivElement, FocusScopeProps>(\r\n  ({contain = true, restoreFocus = true, autoFocus = false, children, className, ...props}, ref) => {\r\n    const containerRef = React.useRef<HTMLDivElement | null>(null);\r\n    const previousFocusRef = React.useRef<Element | null>(null);\r\n\r\n    React.useEffect(() => {\r\n      previousFocusRef.current = document.activeElement;\r\n\r\n      if (autoFocus && containerRef.current) {\r\n        const focusable = getFocusableElements(containerRef.current);\r\n\r\n        focusable[0]?.focus();\r\n      }\r\n\r\n      return () => {\r\n        if (restoreFocus && previousFocusRef.current instanceof HTMLElement) {\r\n          previousFocusRef.current.focus();\r\n        }\r\n      };\r\n    }, [autoFocus, restoreFocus]);\r\n\r\n    React.useEffect(() => {\r\n      const container = containerRef.current;\r\n\r\n      if (!container) {\r\n        return;\r\n      }\r\n\r\n      const handleKeyDown = (event: KeyboardEvent): void => {\r\n        if (!contain || event.key !== \"Tab\") {\r\n          return;\r\n        }\r\n\r\n        const focusable = getFocusableElements(container);\r\n\r\n        if (focusable.length === 0) {\r\n          return;\r\n        }\r\n\r\n        const [first] = focusable;\r\n        const last = focusable.at(-1);\r\n\r\n        if (event.shiftKey && first?.isSameNode(document.activeElement)) {\r\n          event.preventDefault();\r\n          last?.focus();\r\n          return;\r\n        }\r\n\r\n        if (!event.shiftKey && last?.isSameNode(document.activeElement)) {\r\n          event.preventDefault();\r\n          first?.focus();\r\n        }\r\n      };\r\n\r\n      container.addEventListener(\"keydown\", handleKeyDown);\r\n\r\n      return () => {\r\n        container.removeEventListener(\"keydown\", handleKeyDown);\r\n      };\r\n    }, [contain]);\r\n\r\n    return (\r\n      <div\r\n        ref={(node) => {\r\n          containerRef.current = node;\r\n\r\n          if (typeof ref === \"function\") {\r\n            ref(node);\r\n            return;\r\n          }\r\n\r\n          if (ref) {\r\n            ref.current = node;\r\n          }\r\n        }}\r\n        className={cn(styles.scope, className)}\r\n        role={props.role ?? \"group\"}\r\n        tabIndex={props.tabIndex ?? -1}\r\n        {...props}>\r\n        {children}\r\n      </div>\r\n    );\r\n  },\r\n);\r\nFocusScope.displayName = \"FocusScope\";\r\n\r\nexport {FocusScope};\r\nexport type {FocusScopeProps};\r\n"],"names":["FOCUSABLE_SELECTOR","getFocusableElements","container","element","FocusScope","React","contain","restoreFocus","autoFocus","children","className","props","ref","containerRef","previousFocusRef","document","focusable","HTMLElement","handleKeyDown","event","first","last","node","cn","styles"],"mappings":";;;;;AAoCA,MAAMA,qBAAqB;AAU3B,SAASC,qBAAqBC,SAAsB;IAClD,OAAO;WAAIA,UAAU,gBAAgB,CAAcF;KAAoB,CAAC,MAAM,CAC5E,CAACG,UAAY,CAACA,QAAQ,YAAY,CAAC,eAAeA,QAAQ,QAAQ,IAAI;AAE1E;AAsBA,MAAMC,aAAa,WAAHA,GAAGC,WACjB,CAAC,EAACC,UAAU,IAAI,EAAEC,eAAe,IAAI,EAAEC,YAAY,KAAK,EAAEC,QAAQ,EAAEC,SAAS,EAAE,GAAGC,OAAM,EAAEC;IACxF,MAAMC,eAAeR,OAAoC;IACzD,MAAMS,mBAAmBT,OAA6B;IAEtDA,UAAgB;QACdS,iBAAiB,OAAO,GAAGC,SAAS,aAAa;QAEjD,IAAIP,aAAaK,aAAa,OAAO,EAAE;YACrC,MAAMG,YAAYf,qBAAqBY,aAAa,OAAO;YAE3DG,SAAS,CAAC,EAAE,EAAE;QAChB;QAEA,OAAO;YACL,IAAIT,gBAAgBO,iBAAiB,OAAO,YAAYG,aACtDH,iBAAiB,OAAO,CAAC,KAAK;QAElC;IACF,GAAG;QAACN;QAAWD;KAAa;IAE5BF,UAAgB;QACd,MAAMH,YAAYW,aAAa,OAAO;QAEtC,IAAI,CAACX,WACH;QAGF,MAAMgB,gBAAgB,CAACC;YACrB,IAAI,CAACb,WAAWa,AAAc,UAAdA,MAAM,GAAG,EACvB;YAGF,MAAMH,YAAYf,qBAAqBC;YAEvC,IAAIc,AAAqB,MAArBA,UAAU,MAAM,EAClB;YAGF,MAAM,CAACI,MAAM,GAAGJ;YAChB,MAAMK,OAAOL,UAAU,EAAE,CAAC;YAE1B,IAAIG,MAAM,QAAQ,IAAIC,OAAO,WAAWL,SAAS,aAAa,GAAG;gBAC/DI,MAAM,cAAc;gBACpBE,MAAM;gBACN;YACF;YAEA,IAAI,CAACF,MAAM,QAAQ,IAAIE,MAAM,WAAWN,SAAS,aAAa,GAAG;gBAC/DI,MAAM,cAAc;gBACpBC,OAAO;YACT;QACF;QAEAlB,UAAU,gBAAgB,CAAC,WAAWgB;QAEtC,OAAO;YACLhB,UAAU,mBAAmB,CAAC,WAAWgB;QAC3C;IACF,GAAG;QAACZ;KAAQ;IAEZ,OAAO,WAAP,GACE,IAAC;QACC,KAAK,CAACgB;YACJT,aAAa,OAAO,GAAGS;YAEvB,IAAI,AAAe,cAAf,OAAOV,KAAoB,YAC7BA,IAAIU;YAIN,IAAIV,KACFA,IAAI,OAAO,GAAGU;QAElB;QACA,WAAWC,GAAGC,mBAAAA,KAAY,EAAEd;QAC5B,MAAMC,MAAM,IAAI,IAAI;QACpB,UAAUA,MAAM,QAAQ,IAAI;QAC3B,GAAGA,KAAK;kBACRF;;AAGP;AAEFL,WAAW,WAAW,GAAG"}

package/dist/components/ui/focus-scope.module.js

@@ -0,0 +1,7 @@
+import "./focus-scope_module.css";
+const focus_scope_module = {
+    scope: "scope-YXkVYQ"
+};
+export default focus_scope_module;
+
+//# sourceMappingURL=focus-scope.module.js.map

package/dist/components/ui/focus-scope.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/ui/focus-scope.module.js","sources":["../../../src/components/ui/focus-scope.module.css"],"sourcesContent":["// extracted by LIB_CSS_EXTRACT_LOADER\nimport \"./focus-scope_module.css\"\nexport default {\"scope\":\"scope-YXkVYQ\"};"],"names":[],"mappings":";AAEA,2BAAe;IAAC,OAAQ;AAAc"}

package/dist/components/ui/focus-scope_module.css

@@ -0,0 +1,6 @@
+.scope-YXkVYQ {
+  outline: none;
+}
+
+
+/*# sourceMappingURL=focus-scope_module.css.map */

package/dist/components/ui/focus-scope_module.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["webpack://./home/runner/work/arolariu.ro/arolariu.ro/packages/components/src/components/ui/focus-scope.module.css","webpack://./src/components/ui/focus-scope.module.css"],"names":[],"mappings":"AADA;ECEE,aAAa;AACf","sourcesContent":[".scope{outline:none}",".scope {\n  outline: none;\n}\n"],"sourceRoot":""}

package/dist/components/ui/form-skeleton.js

@@ -0,0 +1,32 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../lib/utilities.js";
+import form_skeleton_module from "./form-skeleton.module.js";
+import { Skeleton } from "./skeleton.js";
+const FormSkeleton = /*#__PURE__*/ forwardRef(({ fields = 4, className, ...props }, ref)=>/*#__PURE__*/ jsxs("div", {
+        ref: ref,
+        className: cn(form_skeleton_module.form, className),
+        ...props,
+        children: [
+            Array.from({
+                length: fields
+            }, (_, index)=>/*#__PURE__*/ jsxs("div", {
+                    className: form_skeleton_module.field,
+                    children: [
+                        /*#__PURE__*/ jsx(Skeleton, {
+                            className: form_skeleton_module.label
+                        }),
+                        /*#__PURE__*/ jsx(Skeleton, {
+                            className: form_skeleton_module.input
+                        })
+                    ]
+                }, index)),
+            /*#__PURE__*/ jsx(Skeleton, {
+                className: form_skeleton_module.submit
+            })
+        ]
+    }));
+FormSkeleton.displayName = "FormSkeleton";
+export { FormSkeleton };
+
+//# sourceMappingURL=form-skeleton.js.map

package/dist/components/ui/form-skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/ui/form-skeleton.js","sources":["../../../src/components/ui/form-skeleton.tsx"],"sourcesContent":["import * as React from \"react\";\r\n\r\nimport {cn} from \"@/lib/utilities\";\r\n\r\nimport styles from \"./form-skeleton.module.css\";\r\nimport {Skeleton} from \"./skeleton\";\r\n\r\n/**\r\n * Represents the configurable props for the {@link FormSkeleton} component.\r\n *\r\n * @remarks\r\n * Extends native `<div>` attributes so form-shaped placeholders can be composed into\r\n * dialogs, cards, and pages while still supporting accessibility annotations.\r\n */\r\ninterface FormSkeletonProps extends React.HTMLAttributes<HTMLDivElement> {\r\n  /**\r\n   * Number of labeled field placeholders rendered before the submit action.\r\n   *\r\n   * @default 4\r\n   */\r\n  fields?: number;\r\n}\r\n\r\n/**\r\n * Renders a skeleton placeholder shaped like a labeled form.\r\n *\r\n * @remarks\r\n * **Rendering Context**: Server- and client-compatible presentational component.\r\n *\r\n * Uses stacked label and input placeholders plus a trailing submit action placeholder to\r\n * preserve form layout during async initialization or schema-driven rendering.\r\n *\r\n * @example\r\n * ```tsx\r\n * <FormSkeleton fields={5} aria-label=\"Loading profile form\" />\r\n * ```\r\n *\r\n * @see {@link FormSkeletonProps} for available props\r\n */\r\nconst FormSkeleton = React.forwardRef<HTMLDivElement, FormSkeletonProps>(\r\n  ({fields = 4, className, ...props}: Readonly<FormSkeletonProps>, ref): React.JSX.Element => (\r\n    <div\r\n      ref={ref}\r\n      className={cn(styles.form, className)}\r\n      {...props}>\r\n      {Array.from({length: fields}, (_, index) => (\r\n        <div\r\n          key={index}\r\n          className={styles.field}>\r\n          <Skeleton className={styles.label} />\r\n          <Skeleton className={styles.input} />\r\n        </div>\r\n      ))}\r\n      <Skeleton className={styles.submit} />\r\n    </div>\r\n  ),\r\n);\r\n\r\nFormSkeleton.displayName = \"FormSkeleton\";\r\n\r\nexport {FormSkeleton};\r\nexport type {FormSkeletonProps};\r\n"],"names":["FormSkeleton","React","fields","className","props","ref","cn","styles","Array","_","index","Skeleton"],"mappings":";;;;;AAuCA,MAAMA,eAAe,WAAHA,GAAGC,WACnB,CAAC,EAACC,SAAS,CAAC,EAAEC,SAAS,EAAE,GAAGC,OAAmC,EAAEC,MAAAA,WAAAA,GAC/D,KAAC;QACC,KAAKA;QACL,WAAWC,GAAGC,qBAAAA,IAAW,EAAEJ;QAC1B,GAAGC,KAAK;;YACRI,MAAM,IAAI,CAAC;gBAAC,QAAQN;YAAM,GAAG,CAACO,GAAGC,QAAAA,WAAAA,GAChC,KAAC;oBAEC,WAAWH,qBAAAA,KAAY;;sCACvB,IAACI,UAAQA;4BAAC,WAAWJ,qBAAAA,KAAY;;sCACjC,IAACI,UAAQA;4BAAC,WAAWJ,qBAAAA,KAAY;;;mBAH5BG;0BAMT,IAACC,UAAQA;gBAAC,WAAWJ,qBAAAA,MAAa;;;;AAKxCP,aAAa,WAAW,GAAG"}

package/dist/components/ui/form-skeleton.module.js

@@ -0,0 +1,11 @@
+import "./form-skeleton_module.css";
+const form_skeleton_module = {
+    form: "form-gfhZPq",
+    field: "field-t5tCr8",
+    label: "label-iFnf4q",
+    input: "input-PmNyaP",
+    submit: "submit-CrufDt"
+};
+export default form_skeleton_module;
+
+//# sourceMappingURL=form-skeleton.module.js.map

package/dist/components/ui/form-skeleton.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/ui/form-skeleton.module.js","sources":["../../../src/components/ui/form-skeleton.module.css"],"sourcesContent":["// extracted by LIB_CSS_EXTRACT_LOADER\nimport \"./form-skeleton_module.css\"\nexport default {\"form\":\"form-gfhZPq\",\"field\":\"field-t5tCr8\",\"label\":\"label-iFnf4q\",\"input\":\"input-PmNyaP\",\"submit\":\"submit-CrufDt\"};"],"names":[],"mappings":";AAEA,6BAAe;IAAC,MAAO;IAAc,OAAQ;IAAe,OAAQ;IAAe,OAAQ;IAAe,QAAS;AAAe"}

package/dist/components/ui/form-skeleton_module.css

@@ -0,0 +1,30 @@
+.form-gfhZPq {
+  gap: var(--ac-space-4);
+}
+
+.field-t5tCr8, .form-gfhZPq {
+  flex-direction: column;
+  display: flex;
+}
+
+.field-t5tCr8 {
+  gap: var(--ac-space-1);
+}
+
+.label-iFnf4q {
+  width: 30%;
+  height: .875rem;
+}
+
+.input-PmNyaP, .submit-CrufDt {
+  border-radius: var(--ac-radius-md);
+  height: 2.5rem;
+}
+
+.submit-CrufDt {
+  align-self: flex-end;
+  width: 8rem;
+}
+
+
+/*# sourceMappingURL=form-skeleton_module.css.map */

package/dist/components/ui/form-skeleton_module.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["webpack://./home/runner/work/arolariu.ro/arolariu.ro/packages/components/src/components/ui/form-skeleton.module.css","webpack://./src/components/ui/form-skeleton.module.css"],"names":[],"mappings":"AADA;ECEE,sBAAsB;AACxB;;AAEA;EACE,sBAAsB;EACtB,aAAa;AACf;;AAEA;EACE,sBAAsB;AACxB;;AAEA;EACE,UAAU;EACV,eAAe;AACjB;;AAEA;EACE,kCAAkC;EAClC,cAAc;AAChB;;AAEA;EACE,oBAAoB;EACpB,WAAW;AACb","sourcesContent":[".form{gap:var(--ac-space-4)}.field,.form{display:flex;flex-direction:column}.field{gap:var(--ac-space-1)}.label{height:.875rem;width:30%}.input,.submit{border-radius:var(--ac-radius-md);height:2.5rem}.submit{align-self:flex-end;width:8rem}",".form {\n  gap: var(--ac-space-4);\n}\n\n.field, .form {\n  flex-direction: column;\n  display: flex;\n}\n\n.field {\n  gap: var(--ac-space-1);\n}\n\n.label {\n  width: 30%;\n  height: .875rem;\n}\n\n.input, .submit {\n  border-radius: var(--ac-radius-md);\n  height: 2.5rem;\n}\n\n.submit {\n  align-self: flex-end;\n  width: 8rem;\n}\n"],"sourceRoot":""}

package/dist/components/ui/form.d.ts

@@ -1,24 +1,154 @@
-import * as LabelPrimitive from "@radix-ui/react-label";
 import * as React from "react";
-import { type ControllerProps, type FieldPath, type FieldValues } from "react-hook-form";
-declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues = TFieldValues>(props: import("react-hook-form").FormProviderProps<TFieldValues, TContext, TTransformedValues>) => React.JSX.Element;
-declare const FormField: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ ...props }: ControllerProps<TFieldValues, TName>) => import("react/jsx-runtime").JSX.Element;
-declare const useFormField: () => {
-    invalid: boolean;
-    isDirty: boolean;
-    isTouched: boolean;
-    isValidating: boolean;
-    error?: import("react-hook-form").FieldError;
+import { useFormContext, type ControllerProps, type FieldPath, type FieldValues } from "react-hook-form";
+/**
+ * Provides the `react-hook-form` context to nested form primitives.
+ *
+ * @remarks
+ * - Renders the `FormProvider` component from `react-hook-form`
+ * - Built on `react-hook-form`
+ *
+ * @example
+ * ```tsx
+ * <Form {...form}>
+ *   <form>...</form>
+ * </Form>
+ * ```
+ *
+ * @see {@link https://react-hook-form.com/docs/formprovider | React Hook Form FormProvider Docs}
+ */
+declare const Form: (<TFieldValues extends FieldValues, TContext = any, TTransformedValues = TFieldValues>(props: import("react-hook-form").FormProviderProps<TFieldValues, TContext, TTransformedValues>) => React.JSX.Element) & {
+    displayName: string;
+};
+interface FormControlProps extends Omit<React.HTMLAttributes<HTMLElement>, "children"> {
+    /**
+     * Single form control element or fallback content to receive field accessibility attributes.
+     * @default undefined
+     */
+    children: React.ReactNode;
+}
+/**
+ * Binds a single field name to the shared form field context.
+ *
+ * @remarks
+ * - Renders the `Controller` component from `react-hook-form`
+ * - Built on `react-hook-form` controller primitives
+ *
+ * @example
+ * ```tsx
+ * <FormField
+ *   control={form.control}
+ *   name='email'
+ *   render={({field}) => <input {...field} />}
+ * />
+ * ```
+ *
+ * @see {@link https://react-hook-form.com/docs/usecontroller/controller | React Hook Form Controller Docs}
+ */
+declare const FormField: {
+    <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ ...props }: ControllerProps<TFieldValues, TName>): React.JSX.Element;
+    displayName: string;
+};
+type UseFormFieldReturn = {
     id: string;
-    name: string;
+    name: FieldPath<FieldValues>;
     formItemId: string;
     formDescriptionId: string;
     formMessageId: string;
+    invalid: boolean;
+    isDirty: boolean;
+    isTouched: boolean;
+    isValidating: boolean;
+    error?: ReturnType<ReturnType<typeof useFormContext>["getFieldState"]>["error"];
 };
+/**
+ * Returns the resolved form field metadata for nested form primitives.
+ *
+ * @remarks
+ * Reads the nearest {@link FormField} and {@link FormItem} contexts, then combines them
+ * with `react-hook-form` field state to expose stable IDs and validation metadata.
+ *
+ * @example
+ * ```tsx
+ * const field = useFormField();
+ * ```
+ *
+ * @see {@link https://react-hook-form.com/docs/useformcontext | React Hook Form useFormContext Docs}
+ */
+declare const useFormField: () => UseFormFieldReturn;
+/**
+ * Wraps a label, control, description, and message into a single form item.
+ *
+ * @remarks
+ * - Renders a `<div>` element
+ * - Built on the shared form item context
+ *
+ * @example
+ * ```tsx
+ * <FormItem>
+ *   <FormLabel>Email</FormLabel>
+ * </FormItem>
+ * ```
+ *
+ * @see {@link https://react-hook-form.com/docs/useformcontext | React Hook Form Docs}
+ */
 declare const FormItem: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
-declare const FormLabel: React.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & React.RefAttributes<HTMLLabelElement>, "ref"> & React.RefAttributes<HTMLLabelElement>>;
-declare const FormControl: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-slot").SlotProps & React.RefAttributes<HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>;
+/**
+ * Renders the accessible label for the current form item.
+ *
+ * @remarks
+ * - Renders a `<label>` element
+ * - Built on the shared form field metadata hook
+ *
+ * @example
+ * ```tsx
+ * <FormLabel>Email</FormLabel>
+ * ```
+ *
+ * @see {@link https://developer.mozilla.org/docs/Web/HTML/Element/label | HTML label element}
+ */
+declare const FormLabel: React.ForwardRefExoticComponent<React.LabelHTMLAttributes<HTMLLabelElement> & React.RefAttributes<HTMLLabelElement>>;
+/**
+ * Provides react-hook-form field metadata to a single control element.
+ *
+ * @remarks
+ * This replaces the former Radix Slot-based implementation by cloning the
+ * direct child element and merging the accessibility attributes required by the
+ * surrounding form primitives. A fallback wrapper is rendered only when the
+ * child is not a valid React element.
+ */
+declare const FormControl: React.ForwardRefExoticComponent<FormControlProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Renders helper text that describes the current form control.
+ *
+ * @remarks
+ * - Renders a `<p>` element
+ * - Built on the shared form field metadata hook
+ *
+ * @example
+ * ```tsx
+ * <FormDescription>We'll never share your email.</FormDescription>
+ * ```
+ *
+ * @see {@link https://developer.mozilla.org/docs/Web/HTML/Element/p | HTML paragraph element}
+ */
 declare const FormDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+/**
+ * Renders the validation message or fallback message for the current form control.
+ *
+ * @remarks
+ * - Renders a `<p>` element when content is available
+ * - Built on the shared form field metadata hook
+ *
+ * @example
+ * ```tsx
+ * <FormMessage />
+ * ```
+ *
+ * @see {@link https://developer.mozilla.org/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-invalid | ARIA invalid state}
+ */
 declare const FormMessage: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+export { Controller, useController, useFieldArray, useForm, useFormContext, useFormState, useWatch } from "react-hook-form";
+export type { Control, ControllerFieldState, ControllerProps, ControllerRenderProps, DefaultValues, FieldError, FieldErrors, FieldPath, FieldValues, Path, RegisterOptions, Resolver, SubmitHandler, UseControllerReturn, UseFieldArrayReturn, UseFormReturn, } from "react-hook-form";
 export { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useFormField };
+export type { FormControlProps };
 //# sourceMappingURL=form.d.ts.map

package/dist/components/ui/form.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"form.d.ts","sourceRoot":"","sources":["../../../src/components/ui/form.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,cAAc,MAAM,uBAAuB,CAAC;AAExD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAA2C,KAAK,eAAe,EAAE,KAAK,SAAS,EAAE,KAAK,WAAW,EAAC,MAAM,iBAAiB,CAAC;AAKjI,QAAA,MAAM,IAAI,4MAAe,CAAC;AAW1B,QAAA,MAAM,SAAS,GAAI,YAAY,SAAS,WAAW,GAAG,WAAW,EAAE,KAAK,SAAS,SAAS,CAAC,YAAY,CAAC,GAAG,SAAS,CAAC,YAAY,CAAC,EAAE,cAEjI,eAAe,CAAC,YAAY,EAAE,KAAK,CAAC,4CAMtC,CAAC;AAEF,QAAA,MAAM,YAAY;;;;;;;;;;;CAyBjB,CAAC;AAQF,QAAA,MAAM,QAAQ,6GAYZ,CAAC;AAGH,QAAA,MAAM,SAAS,yJAcb,CAAC;AAGH,QAAA,MAAM,WAAW,8JAYf,CAAC;AAGH,QAAA,MAAM,eAAe,yHAWnB,CAAC;AAGH,QAAA,MAAM,WAAW,yHAmBhB,CAAC;AAGF,OAAO,EAAC,IAAI,EAAE,WAAW,EAAE,eAAe,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,WAAW,EAAE,YAAY,EAAC,CAAC"}
+{"version":3,"file":"form.d.ts","sourceRoot":"","sources":["../../../src/components/ui/form.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAA2B,cAAc,EAAE,KAAK,eAAe,EAAE,KAAK,SAAS,EAAE,KAAK,WAAW,EAAC,MAAM,iBAAiB,CAAC;AAMjI;;;;;;;;;;;;;;;GAeG;AACH,QAAA,MAAM,IAAI;;CAAqD,CAAC;AAMhE,UAAU,gBAAiB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,UAAU,CAAC;IACpF;;;OAGG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAsCD;;;;;;;;;;;;;;;;;GAiBG;AACH,QAAA,MAAM,SAAS;KAAI,YAAY,SAAS,WAAW,gBAAgB,KAAK,SAAS,SAAS,CAAC,YAAY,CAAC,0CAErG,eAAe,CAAC,YAAY,EAAE,KAAK,CAAC,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO;;CAM1D,CAAC;AAEF,KAAK,kBAAkB,GAAG;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,SAAS,CAAC,WAAW,CAAC,CAAC;IAC7B,UAAU,EAAE,MAAM,CAAC;IACnB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,aAAa,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,UAAU,CAAC,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;CACjF,CAAC;AAEF;;;;;;;;;;;;;GAaG;AACH,QAAA,MAAM,YAAY,QAAO,kBA4BxB,CAAC;AAQF;;;;;;;;;;;;;;;GAeG;AACH,QAAA,MAAM,QAAQ,6GAYZ,CAAC;AAGH;;;;;;;;;;;;;GAaG;AACH,QAAA,MAAM,SAAS,sHAWb,CAAC;AAGH;;;;;;;;GAQG;AACH,QAAA,MAAM,WAAW,sFAkChB,CAAC;AAGF;;;;;;;;;;;;;GAaG;AACH,QAAA,MAAM,eAAe,yHAWnB,CAAC;AAGH;;;;;;;;;;;;;GAaG;AACH,QAAA,MAAM,WAAW,yHAmBhB,CAAC;AAIF,OAAO,EAAC,UAAU,EAAE,aAAa,EAAE,aAAa,EAAE,OAAO,EAAE,cAAc,EAAE,YAAY,EAAE,QAAQ,EAAC,MAAM,iBAAiB,CAAC;AAC1H,YAAY,EACV,OAAO,EACP,oBAAoB,EACpB,eAAe,EACf,qBAAqB,EACrB,aAAa,EACb,UAAU,EACV,WAAW,EACX,SAAS,EACT,WAAW,EACX,IAAI,EACJ,eAAe,EACf,QAAQ,EACR,aAAa,EACb,mBAAmB,EACnB,mBAAmB,EACnB,aAAa,GACd,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAC,IAAI,EAAE,WAAW,EAAE,eAAe,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,WAAW,EAAE,YAAY,EAAC,CAAC;AACvG,YAAY,EAAC,gBAAgB,EAAC,CAAC"}