luan-ui 0.5.3 → 0.6.1

package/dist/components/popover/popover.d.ts

@@ -1,4 +1,5 @@
-import { Popover as RadixPopover } from "radix-ui";
+import { Popover as PopoverPrimitive } from "@base-ui/react/popover";
+import type { ComponentProps } from "react";
 /**
  * Popover
  */
@@ -6,14 +7,18 @@ export type PopoverProps = {
     showArrow?: boolean;
     closeButtonAriaLabel?: string;
     showCloseButton?: boolean;
-} & RadixPopover.PopoverProps & Pick<RadixPopover.PopoverContentProps, "side">;
+    side?: "top" | "right" | "bottom" | "left";
+    sideOffset?: number;
+    children?: React.ReactNode;
+} & ComponentProps<typeof PopoverPrimitive.Root>;
 /**
  * Popover component that provides a popover container with a trigger and content.
  *
  * @param {boolean} [props.showArrow=true] - Whether to show the arrow pointing to the trigger
  * @param {string} [props.closeButtonAriaLabel="Close"] - Aria label for the close button
  * @param {boolean} [props.showCloseButton=true] - Whether to show the close button
- * @param {RadixPopover.PopoverContentProps["side"]} [props.side] - The preferred side to show the popover
+ * @param {"top" | "right" | "bottom" | "left"} [props.side] - The preferred side to show the popover
+ * @param {number} [props.sideOffset=4] - The offset from the trigger
  *
  * @example
  * ```tsx
@@ -25,11 +30,13 @@ export type PopoverProps = {
  * </Popover>
  * ```
  */
-declare const Popover: ({ children, showArrow, closeButtonAriaLabel, showCloseButton, side, ...props }: PopoverProps) => import("react/jsx-runtime").JSX.Element;
-declare const PopoverTrigger: import("react").ForwardRefExoticComponent<RadixPopover.PopoverTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
-export type PopoverContentProps = RadixPopover.PopoverContentProps & {
+declare function Popover({ children, showArrow, closeButtonAriaLabel, showCloseButton, side, sideOffset, ...props }: PopoverProps): import("react/jsx-runtime").JSX.Element;
+export type PopoverTriggerProps = ComponentProps<typeof PopoverPrimitive.Trigger>;
+declare function PopoverTrigger({ className, ref, ...props }: PopoverTriggerProps): import("react/jsx-runtime").JSX.Element;
+export type PopoverContentProps = ComponentProps<typeof PopoverPrimitive.Popup> & {
     showArrow?: boolean;
     closeButtonAriaLabel?: string;
+    sideOffset?: number;
 };
 /**
  * Popover Content
@@ -45,20 +52,29 @@ export type PopoverContentProps = RadixPopover.PopoverContentProps & {
  * </PopoverContent>
  * ```
  */
-declare const PopoverContent: import("react").ForwardRefExoticComponent<RadixPopover.PopoverContentProps & {
-    showArrow?: boolean;
-    closeButtonAriaLabel?: string;
-} & import("react").RefAttributes<HTMLDivElement>>;
+declare function PopoverContent({ children, className, sideOffset: sideOffsetProp, ref, ...props }: PopoverContentProps): import("react/jsx-runtime").JSX.Element;
 /**
  * Popover Close
  */
-declare const PopoverClose: import("react").ForwardRefExoticComponent<RadixPopover.PopoverCloseProps & import("react").RefAttributes<HTMLButtonElement>>;
+export type PopoverCloseProps = ComponentProps<typeof PopoverPrimitive.Close>;
+declare function PopoverClose({ className, ref, ...props }: PopoverCloseProps): import("react/jsx-runtime").JSX.Element;
 /**
  * Popover Portal
  */
-declare const PopoverPortal: import("react").FC<RadixPopover.PopoverPortalProps>;
+declare const PopoverPortal: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").PopoverPortalProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 /**
  * Popover Anchor
  */
-declare const PopoverAnchor: import("react").ForwardRefExoticComponent<RadixPopover.PopoverAnchorProps & import("react").RefAttributes<HTMLDivElement>>;
-export { Popover, PopoverTrigger, PopoverContent, PopoverClose, PopoverPortal, PopoverAnchor, };
+export type PopoverAnchorProps = ComponentProps<typeof PopoverPrimitive.Positioner> & {
+    children?: React.ReactNode;
+};
+declare function PopoverAnchor({ children, ref, ...props }: PopoverAnchorProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Popover Title
+ */
+declare const PopoverTitle: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").PopoverTitleProps, "ref"> & import("react").RefAttributes<HTMLHeadingElement>>;
+/**
+ * Popover Description
+ */
+declare const PopoverDescription: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").PopoverDescriptionProps, "ref"> & import("react").RefAttributes<HTMLParagraphElement>>;
+export { Popover, PopoverTrigger, PopoverContent, PopoverClose, PopoverPortal, PopoverAnchor, PopoverTitle, PopoverDescription, };

package/dist/components/popover/popover.js

@@ -1,12 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Popover as PopoverPrimitive } from "@base-ui/react/popover";
 import { Icon } from "../icon/icon";
 import { Cross1Icon } from "@radix-ui/react-icons";
 import { cn } from "../../utilities/cn/cn";
-import { Popover as RadixPopover } from "radix-ui";
-import { createContext, forwardRef, useContext, useMemo, } from "react";
-/**
- * Popover Context
- */
+import { createContext, useContext, useMemo } from "react";
 const PopoverContext = createContext(undefined);
 const usePopoverContext = () => {
     const context = useContext(PopoverContext);
@@ -21,7 +18,8 @@ const usePopoverContext = () => {
  * @param {boolean} [props.showArrow=true] - Whether to show the arrow pointing to the trigger
  * @param {string} [props.closeButtonAriaLabel="Close"] - Aria label for the close button
  * @param {boolean} [props.showCloseButton=true] - Whether to show the close button
- * @param {RadixPopover.PopoverContentProps["side"]} [props.side] - The preferred side to show the popover
+ * @param {"top" | "right" | "bottom" | "left"} [props.side] - The preferred side to show the popover
+ * @param {number} [props.sideOffset=4] - The offset from the trigger
  *
  * @example
  * ```tsx
@@ -33,16 +31,19 @@ const usePopoverContext = () => {
  * </Popover>
  * ```
  */
-const Popover = ({ children, showArrow = true, closeButtonAriaLabel = "Close", showCloseButton = true, side, ...props }) => {
+function Popover({ children, showArrow = true, closeButtonAriaLabel = "Close", showCloseButton = true, side, sideOffset = 10, ...props }) {
     const contextValue = useMemo(() => ({
         showArrow,
         closeButtonAriaLabel,
         side,
         showCloseButton,
-    }), [showArrow, closeButtonAriaLabel, side, showCloseButton]);
-    return (_jsx(PopoverContext.Provider, { value: contextValue, children: _jsx(RadixPopover.Root, { ...props, children: children }) }));
-};
-const PopoverTrigger = RadixPopover.Trigger;
+        sideOffset,
+    }), [showArrow, closeButtonAriaLabel, side, showCloseButton, sideOffset]);
+    return (_jsx(PopoverContext.Provider, { value: contextValue, children: _jsx(PopoverPrimitive.Root, { ...props, children: children }) }));
+}
+function PopoverTrigger({ className, ref, ...props }) {
+    return (_jsx(PopoverPrimitive.Trigger, { ref: ref, className: className, ...props }));
+}
 /**
  * Popover Content
  */
@@ -57,21 +58,28 @@ const PopoverTrigger = RadixPopover.Trigger;
  * </PopoverContent>
  * ```
  */
-const PopoverContent = forwardRef(({ children, className, sideOffset = 4, ...props }, ref) => {
-    const { showArrow, closeButtonAriaLabel, side, showCloseButton } = usePopoverContext();
-    return (_jsxs(RadixPopover.Content, { className: cn("relative z-50 w-fit max-w-72 rounded-md bg-gray-700 p-4 text-sm text-white shadow-md", className), sideOffset: sideOffset, side: side, ...props, ref: ref, children: [showCloseButton && (_jsx(PopoverClose, { className: "absolute top-4 right-4", "aria-label": closeButtonAriaLabel, children: _jsx(Icon, { asChild: true, size: "small", children: _jsx(Cross1Icon, {}) }) })), children, showArrow && _jsx(RadixPopover.Arrow, { className: "fill-gray-700" })] }));
-});
+function PopoverContent({ children, className, sideOffset: sideOffsetProp, ref, ...props }) {
+    const { showArrow, closeButtonAriaLabel, side, showCloseButton, sideOffset: sideOffsetContext, } = usePopoverContext();
+    const sideOffset = sideOffsetProp ?? sideOffsetContext ?? 10;
+    return (_jsx(PopoverPrimitive.Portal, { children: _jsx(PopoverPrimitive.Positioner, { side: side, sideOffset: sideOffset, children: _jsxs(PopoverPrimitive.Popup, { className: cn("relative z-50 w-fit max-w-72 rounded-md bg-gray-700 p-4 text-sm text-white shadow-md", className), ...props, ref: ref, children: [showCloseButton && (_jsx(PopoverClose, { className: "absolute top-4 right-4", "aria-label": closeButtonAriaLabel, children: _jsx(Icon, { render: _jsx(Cross1Icon, {}), size: "small" }) })), children, showArrow && (_jsx(PopoverPrimitive.Arrow, { className: "data-[side=bottom]:-top-1.25 data-[side=left]:-right-1.25 data-[side=top]:-bottom-1.25 data-[side=right]:-left-1.25", children: _jsx("div", { className: "h-2.5 w-2.5 rotate-45 bg-gray-700" }) }))] }) }) }));
+}
+function PopoverClose({ className, ref, ...props }) {
+    return _jsx(PopoverPrimitive.Close, { ref: ref, className: className, ...props });
+}
 /**
- * Popover Close
+ * Popover Portal
  */
-const PopoverClose = RadixPopover.Close;
+const PopoverPortal = PopoverPrimitive.Portal;
+function PopoverAnchor({ children, ref, ...props }) {
+    return (_jsx(PopoverPrimitive.Positioner, { ref: ref, ...props, children: children }));
+}
 /**
- * Popover Portal
+ * Popover Title
  */
-const PopoverPortal = RadixPopover.Portal;
+const PopoverTitle = PopoverPrimitive.Title;
 /**
- * Popover Anchor
+ * Popover Description
  */
-const PopoverAnchor = RadixPopover.Anchor;
-export { Popover, PopoverTrigger, PopoverContent, PopoverClose, PopoverPortal, PopoverAnchor, };
+const PopoverDescription = PopoverPrimitive.Description;
+export { Popover, PopoverTrigger, PopoverContent, PopoverClose, PopoverPortal, PopoverAnchor, PopoverTitle, PopoverDescription, };
 //# sourceMappingURL=popover.js.map

package/dist/components/popover/popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"popover.js","sourceRoot":"/","sources":["components/popover/popover.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,EAAE,EAAE,EAAE,MAAM,kBAAkB,CAAC;AACtC,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,UAAU,CAAC;AACnD,OAAO,EAEN,aAAa,EACb,UAAU,EACV,UAAU,EACV,OAAO,GACP,MAAM,OAAO,CAAC;AAEf;;GAEG;AAEH,MAAM,cAAc,GAAG,aAAa,CAA2B,SAAS,CAAC,CAAC;AAE1E,MAAM,iBAAiB,GAAG,GAAG,EAAE;IAC9B,MAAM,OAAO,GAAG,UAAU,CAAC,cAAc,CAAC,CAAC;IAC3C,IAAI,CAAC,OAAO,EAAE,CAAC;QACd,MAAM,IAAI,KAAK,CAAC,kDAAkD,CAAC,CAAC;IACrE,CAAC;IACD,OAAO,OAAO,CAAC;AAChB,CAAC,CAAC;AAaF;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,OAAO,GAAG,CAAC,EAChB,QAAQ,EACR,SAAS,GAAG,IAAI,EAChB,oBAAoB,GAAG,OAAO,EAC9B,eAAe,GAAG,IAAI,EACtB,IAAI,EACJ,GAAG,KAAK,EACM,EAAE,EAAE;IAClB,MAAM,YAAY,GAAG,OAAO,CAC3B,GAAG,EAAE,CAAC,CAAC;QACN,SAAS;QACT,oBAAoB;QACpB,IAAI;QACJ,eAAe;KACf,CAAC,EACF,CAAC,SAAS,EAAE,oBAAoB,EAAE,IAAI,EAAE,eAAe,CAAC,CACxD,CAAC;IACF,OAAO,CACN,KAAC,cAAc,CAAC,QAAQ,IAAC,KAAK,EAAE,YAAY,YAC3C,KAAC,YAAY,CAAC,IAAI,OAAK,KAAK,YAAG,QAAQ,GAAqB,GACnC,CAC1B,CAAC;AACH,CAAC,CAAC;AAEF,MAAM,cAAc,GAAG,YAAY,CAAC,OAAO,CAAC;AAO5C;;GAEG;AAEH;;;;;;;;;;GAUG;AACH,MAAM,cAAc,GAAG,UAAU,CAG/B,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,GAAG,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IAC5D,MAAM,EAAE,SAAS,EAAE,oBAAoB,EAAE,IAAI,EAAE,eAAe,EAAE,GAC/D,iBAAiB,EAAE,CAAC;IACrB,OAAO,CACN,MAAC,YAAY,CAAC,OAAO,IACpB,SAAS,EAAE,EAAE,CACZ,sFAAsF,EACtF,SAAS,CACT,EACD,UAAU,EAAE,UAAU,EACtB,IAAI,EAAE,IAAI,KACN,KAAK,EACT,GAAG,EAAE,GAAG,aAEP,eAAe,IAAI,CACnB,KAAC,YAAY,IACZ,SAAS,EAAC,wBAAwB,gBACtB,oBAAoB,YAEhC,KAAC,IAAI,IAAC,OAAO,QAAC,IAAI,EAAC,OAAO,YACzB,KAAC,UAAU,KAAG,GACR,GACO,CACf,EACA,QAAQ,EACR,SAAS,IAAI,KAAC,YAAY,CAAC,KAAK,IAAC,SAAS,EAAC,eAAe,GAAG,IACxC,CACvB,CAAC;AACH,CAAC,CAAC,CAAC;AAEH;;GAEG;AAEH,MAAM,YAAY,GAAG,YAAY,CAAC,KAAK,CAAC;AAExC;;GAEG;AAEH,MAAM,aAAa,GAAG,YAAY,CAAC,MAAM,CAAC;AAE1C;;GAEG;AAEH,MAAM,aAAa,GAAG,YAAY,CAAC,MAAM,CAAC;AAE1C,OAAO,EACN,OAAO,EACP,cAAc,EACd,cAAc,EACd,YAAY,EACZ,aAAa,EACb,aAAa,GACb,CAAC","sourcesContent":["import { Icon } from \"@components/icon/icon\";\nimport { Cross1Icon } from \"@radix-ui/react-icons\";\nimport { cn } from \"@utilities/cn/cn\";\nimport { Popover as RadixPopover } from \"radix-ui\";\nimport {\n\ttype ComponentRef,\n\tcreateContext,\n\tforwardRef,\n\tuseContext,\n\tuseMemo,\n} from \"react\";\n\n/**\n * Popover Context\n */\n\nconst PopoverContext = createContext<PopoverProps | undefined>(undefined);\n\nconst usePopoverContext = () => {\n\tconst context = useContext(PopoverContext);\n\tif (!context) {\n\t\tthrow new Error(\"Popover components must be used within a Popover\");\n\t}\n\treturn context;\n};\n\n/**\n * Popover\n */\n\nexport type PopoverProps = {\n\tshowArrow?: boolean;\n\tcloseButtonAriaLabel?: string;\n\tshowCloseButton?: boolean;\n} & RadixPopover.PopoverProps &\n\tPick<RadixPopover.PopoverContentProps, \"side\">;\n\n/**\n * Popover component that provides a popover container with a trigger and content.\n *\n * @param {boolean} [props.showArrow=true] - Whether to show the arrow pointing to the trigger\n * @param {string} [props.closeButtonAriaLabel=\"Close\"] - Aria label for the close button\n * @param {boolean} [props.showCloseButton=true] - Whether to show the close button\n * @param {RadixPopover.PopoverContentProps[\"side\"]} [props.side] - The preferred side to show the popover\n *\n * @example\n * ```tsx\n * <Popover>\n *   <PopoverTrigger>Open Popover</PopoverTrigger>\n *   <PopoverContent>\n *     <p>Popover content goes here</p>\n *   </PopoverContent>\n * </Popover>\n * ```\n */\nconst Popover = ({\n\tchildren,\n\tshowArrow = true,\n\tcloseButtonAriaLabel = \"Close\",\n\tshowCloseButton = true,\n\tside,\n\t...props\n}: PopoverProps) => {\n\tconst contextValue = useMemo(\n\t\t() => ({\n\t\t\tshowArrow,\n\t\t\tcloseButtonAriaLabel,\n\t\t\tside,\n\t\t\tshowCloseButton,\n\t\t}),\n\t\t[showArrow, closeButtonAriaLabel, side, showCloseButton],\n\t);\n\treturn (\n\t\t<PopoverContext.Provider value={contextValue}>\n\t\t\t<RadixPopover.Root {...props}>{children}</RadixPopover.Root>\n\t\t</PopoverContext.Provider>\n\t);\n};\n\nconst PopoverTrigger = RadixPopover.Trigger;\n\nexport type PopoverContentProps = RadixPopover.PopoverContentProps & {\n\tshowArrow?: boolean;\n\tcloseButtonAriaLabel?: string;\n};\n\n/**\n * Popover Content\n */\n\n/**\n * Popover Content component that provides the content area for the Popover.\n * Inherits size from parent Popover component.\n *\n * @example\n * ```tsx\n * <PopoverContent>\n *   <p>Popover content goes here</p>\n * </PopoverContent>\n * ```\n */\nconst PopoverContent = forwardRef<\n\tComponentRef<typeof RadixPopover.Content>,\n\tPopoverContentProps\n>(({ children, className, sideOffset = 4, ...props }, ref) => {\n\tconst { showArrow, closeButtonAriaLabel, side, showCloseButton } =\n\t\tusePopoverContext();\n\treturn (\n\t\t<RadixPopover.Content\n\t\t\tclassName={cn(\n\t\t\t\t\"relative z-50 w-fit max-w-72 rounded-md bg-gray-700 p-4 text-sm text-white shadow-md\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tsideOffset={sideOffset}\n\t\t\tside={side}\n\t\t\t{...props}\n\t\t\tref={ref}\n\t\t>\n\t\t\t{showCloseButton && (\n\t\t\t\t<PopoverClose\n\t\t\t\t\tclassName=\"absolute top-4 right-4\"\n\t\t\t\t\taria-label={closeButtonAriaLabel}\n\t\t\t\t>\n\t\t\t\t\t<Icon asChild size=\"small\">\n\t\t\t\t\t\t<Cross1Icon />\n\t\t\t\t\t</Icon>\n\t\t\t\t</PopoverClose>\n\t\t\t)}\n\t\t\t{children}\n\t\t\t{showArrow && <RadixPopover.Arrow className=\"fill-gray-700\" />}\n\t\t</RadixPopover.Content>\n\t);\n});\n\n/**\n * Popover Close\n */\n\nconst PopoverClose = RadixPopover.Close;\n\n/**\n * Popover Portal\n */\n\nconst PopoverPortal = RadixPopover.Portal;\n\n/**\n * Popover Anchor\n */\n\nconst PopoverAnchor = RadixPopover.Anchor;\n\nexport {\n\tPopover,\n\tPopoverTrigger,\n\tPopoverContent,\n\tPopoverClose,\n\tPopoverPortal,\n\tPopoverAnchor,\n};\n"]}
+{"version":3,"file":"popover.js","sourceRoot":"/","sources":["components/popover/popover.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Popover as PopoverPrimitive } from \"@base-ui/react/popover\";\nimport { Icon } from \"@components/icon/icon\";\nimport { Cross1Icon } from \"@radix-ui/react-icons\";\nimport { cn } from \"@utilities/cn/cn\";\nimport type { ComponentProps } from \"react\";\nimport { createContext, useContext, useMemo } from \"react\";\n\n/**\n * Popover Context\n */\n\ntype PopoverContextValue = {\n\tshowArrow?: boolean;\n\tcloseButtonAriaLabel?: string;\n\tshowCloseButton?: boolean;\n\tside?: \"top\" | \"right\" | \"bottom\" | \"left\";\n\tsideOffset?: number;\n};\n\nconst PopoverContext = createContext<PopoverContextValue | undefined>(\n\tundefined,\n);\n\nconst usePopoverContext = () => {\n\tconst context = useContext(PopoverContext);\n\tif (!context) {\n\t\tthrow new Error(\"Popover components must be used within a Popover\");\n\t}\n\treturn context;\n};\n\n/**\n * Popover\n */\n\nexport type PopoverProps = {\n\tshowArrow?: boolean;\n\tcloseButtonAriaLabel?: string;\n\tshowCloseButton?: boolean;\n\tside?: \"top\" | \"right\" | \"bottom\" | \"left\";\n\tsideOffset?: number;\n\tchildren?: React.ReactNode;\n} & ComponentProps<typeof PopoverPrimitive.Root>;\n\n/**\n * Popover component that provides a popover container with a trigger and content.\n *\n * @param {boolean} [props.showArrow=true] - Whether to show the arrow pointing to the trigger\n * @param {string} [props.closeButtonAriaLabel=\"Close\"] - Aria label for the close button\n * @param {boolean} [props.showCloseButton=true] - Whether to show the close button\n * @param {\"top\" | \"right\" | \"bottom\" | \"left\"} [props.side] - The preferred side to show the popover\n * @param {number} [props.sideOffset=4] - The offset from the trigger\n *\n * @example\n * ```tsx\n * <Popover>\n *   <PopoverTrigger>Open Popover</PopoverTrigger>\n *   <PopoverContent>\n *     <p>Popover content goes here</p>\n *   </PopoverContent>\n * </Popover>\n * ```\n */\nfunction Popover({\n\tchildren,\n\tshowArrow = true,\n\tcloseButtonAriaLabel = \"Close\",\n\tshowCloseButton = true,\n\tside,\n\tsideOffset = 10,\n\t...props\n}: PopoverProps) {\n\tconst contextValue = useMemo(\n\t\t() => ({\n\t\t\tshowArrow,\n\t\t\tcloseButtonAriaLabel,\n\t\t\tside,\n\t\t\tshowCloseButton,\n\t\t\tsideOffset,\n\t\t}),\n\t\t[showArrow, closeButtonAriaLabel, side, showCloseButton, sideOffset],\n\t);\n\treturn (\n\t\t<PopoverContext.Provider value={contextValue}>\n\t\t\t<PopoverPrimitive.Root {...props}>{children}</PopoverPrimitive.Root>\n\t\t</PopoverContext.Provider>\n\t);\n}\n\nexport type PopoverTriggerProps = ComponentProps<\n\ttypeof PopoverPrimitive.Trigger\n>;\n\nfunction PopoverTrigger({ className, ref, ...props }: PopoverTriggerProps) {\n\treturn (\n\t\t<PopoverPrimitive.Trigger ref={ref} className={className} {...props} />\n\t);\n}\n\nexport type PopoverContentProps = ComponentProps<\n\ttypeof PopoverPrimitive.Popup\n> & {\n\tshowArrow?: boolean;\n\tcloseButtonAriaLabel?: string;\n\tsideOffset?: number;\n};\n\n/**\n * Popover Content\n */\n\n/**\n * Popover Content component that provides the content area for the Popover.\n * Inherits size from parent Popover component.\n *\n * @example\n * ```tsx\n * <PopoverContent>\n *   <p>Popover content goes here</p>\n * </PopoverContent>\n * ```\n */\nfunction PopoverContent({\n\tchildren,\n\tclassName,\n\tsideOffset: sideOffsetProp,\n\tref,\n\t...props\n}: PopoverContentProps) {\n\tconst {\n\t\tshowArrow,\n\t\tcloseButtonAriaLabel,\n\t\tside,\n\t\tshowCloseButton,\n\t\tsideOffset: sideOffsetContext,\n\t} = usePopoverContext();\n\tconst sideOffset = sideOffsetProp ?? sideOffsetContext ?? 10;\n\n\treturn (\n\t\t<PopoverPrimitive.Portal>\n\t\t\t<PopoverPrimitive.Positioner side={side} sideOffset={sideOffset}>\n\t\t\t\t<PopoverPrimitive.Popup\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\"relative z-50 w-fit max-w-72 rounded-md bg-gray-700 p-4 text-sm text-white shadow-md\",\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t)}\n\t\t\t\t\t{...props}\n\t\t\t\t\tref={ref}\n\t\t\t\t>\n\t\t\t\t\t{showCloseButton && (\n\t\t\t\t\t\t<PopoverClose\n\t\t\t\t\t\t\tclassName=\"absolute top-4 right-4\"\n\t\t\t\t\t\t\taria-label={closeButtonAriaLabel}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Icon render={<Cross1Icon />} size=\"small\" />\n\t\t\t\t\t\t</PopoverClose>\n\t\t\t\t\t)}\n\t\t\t\t\t{children}\n\t\t\t\t\t{showArrow && (\n\t\t\t\t\t\t<PopoverPrimitive.Arrow className=\"data-[side=bottom]:-top-1.25 data-[side=left]:-right-1.25 data-[side=top]:-bottom-1.25 data-[side=right]:-left-1.25\">\n\t\t\t\t\t\t\t<div className=\"h-2.5 w-2.5 rotate-45 bg-gray-700\" />\n\t\t\t\t\t\t</PopoverPrimitive.Arrow>\n\t\t\t\t\t)}\n\t\t\t\t</PopoverPrimitive.Popup>\n\t\t\t</PopoverPrimitive.Positioner>\n\t\t</PopoverPrimitive.Portal>\n\t);\n}\n\n/**\n * Popover Close\n */\n\nexport type PopoverCloseProps = ComponentProps<typeof PopoverPrimitive.Close>;\n\nfunction PopoverClose({ className, ref, ...props }: PopoverCloseProps) {\n\treturn <PopoverPrimitive.Close ref={ref} className={className} {...props} />;\n}\n\n/**\n * Popover Portal\n */\n\nconst PopoverPortal = PopoverPrimitive.Portal;\n\n/**\n * Popover Anchor\n */\n\nexport type PopoverAnchorProps = ComponentProps<\n\ttypeof PopoverPrimitive.Positioner\n> & {\n\tchildren?: React.ReactNode;\n};\n\nfunction PopoverAnchor({ children, ref, ...props }: PopoverAnchorProps) {\n\treturn (\n\t\t<PopoverPrimitive.Positioner ref={ref} {...props}>\n\t\t\t{children}\n\t\t</PopoverPrimitive.Positioner>\n\t);\n}\n\n/**\n * Popover Title\n */\n\nconst PopoverTitle = PopoverPrimitive.Title;\n\n/**\n * Popover Description\n */\n\nconst PopoverDescription = PopoverPrimitive.Description;\n\nexport {\n\tPopover,\n\tPopoverTrigger,\n\tPopoverContent,\n\tPopoverClose,\n\tPopoverPortal,\n\tPopoverAnchor,\n\tPopoverTitle,\n\tPopoverDescription,\n};\n"]}

package/dist/components/progress/progress.d.ts

@@ -1,6 +1,6 @@
-import { Progress as ProgressPrimitive } from "radix-ui";
-import { type ComponentPropsWithoutRef } from "react";
-export type ProgressProps = ComponentPropsWithoutRef<typeof ProgressPrimitive.Root> & {
+import { Progress as ProgressPrimitive } from "@base-ui/react/progress";
+import type { ComponentProps } from "react";
+export type ProgressProps = ComponentProps<typeof ProgressPrimitive.Root> & {
     showLabel?: boolean;
 };
 /**
@@ -11,7 +11,5 @@ export type ProgressProps = ComponentPropsWithoutRef<typeof ProgressPrimitive.Ro
  * @param {number} props.value - The value of the progress bar.
  * @param {boolean} props.showLabel - Whether to show the label.
  */
-declare const Progress: import("react").ForwardRefExoticComponent<Omit<ProgressPrimitive.ProgressProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
-    showLabel?: boolean;
-} & import("react").RefAttributes<HTMLDivElement>>;
+declare function Progress({ className, value, showLabel, max, ref, ...props }: ProgressProps): import("react/jsx-runtime").JSX.Element;
 export { Progress };

package/dist/components/progress/progress.js

@@ -1,7 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Progress as ProgressPrimitive } from "@base-ui/react/progress";
 import { cn } from "../../utilities/cn/cn";
-import { Progress as ProgressPrimitive } from "radix-ui";
-import { forwardRef, } from "react";
 /**
  * A progress bar component that displays a progress indicator and a label.
  *
@@ -10,9 +9,8 @@ import { forwardRef, } from "react";
  * @param {number} props.value - The value of the progress bar.
  * @param {boolean} props.showLabel - Whether to show the label.
  */
-const Progress = forwardRef(({ className, value, showLabel = true, max = 100, ...props }, ref) => (_jsxs("div", { className: "flex items-center gap-4", children: [_jsx(ProgressPrimitive.Root, { className: cn("relative h-2 w-full overflow-hidden rounded-full bg-gray-200/80", className), max: max, ...props, ref: ref, children: _jsx(ProgressPrimitive.Indicator, { className: "h-full w-full flex-1 bg-gray-700/80 transition-all", style: {
-                    transform: `translateX(-${100 - ((value || 0) / max) * 100}%)`,
-                } }) }), showLabel && _jsxs("div", { className: "text-gray-500 text-sm", children: [value, "%"] })] })));
-Progress.displayName = ProgressPrimitive.Root.displayName;
+function Progress({ className, value, showLabel = true, max = 100, ref, ...props }) {
+    return (_jsxs(ProgressPrimitive.Root, { className: "flex items-center gap-4", value: value, max: max, ref: ref, ...props, children: [_jsx(ProgressPrimitive.Track, { className: cn("relative h-2 w-full overflow-hidden rounded-full bg-gray-200/80", className), children: _jsx(ProgressPrimitive.Indicator, { className: "h-full bg-gray-700/80 transition-all" }) }), showLabel && (_jsx(ProgressPrimitive.Value, { className: "text-gray-500 text-sm", children: (_formattedValue, rawValue) => `${rawValue}%` }))] }));
+}
 export { Progress };
 //# sourceMappingURL=progress.js.map

package/dist/components/progress/progress.js.map

@@ -1 +1 @@
-{"version":3,"file":"progress.js","sourceRoot":"/","sources":["components/progress/progress.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,kBAAkB,CAAC;AACtC,OAAO,EAAE,QAAQ,IAAI,iBAAiB,EAAE,MAAM,UAAU,CAAC;AACzD,OAAO,EAGN,UAAU,GACV,MAAM,OAAO,CAAC;AAQf;;;;;;;GAOG;AAEH,MAAM,QAAQ,GAAG,UAAU,CAGzB,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,GAAG,IAAI,EAAE,GAAG,GAAG,GAAG,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CACvE,eAAK,SAAS,EAAC,yBAAyB,aACvC,KAAC,iBAAiB,CAAC,IAAI,IACtB,SAAS,EAAE,EAAE,CACZ,iEAAiE,EACjE,SAAS,CACT,EACD,GAAG,EAAE,GAAG,KACJ,KAAK,EACT,GAAG,EAAE,GAAG,YAER,KAAC,iBAAiB,CAAC,SAAS,IAC3B,SAAS,EAAC,oDAAoD,EAC9D,KAAK,EAAE;oBACN,SAAS,EAAE,eAAe,GAAG,GAAG,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,GAAG,GAAG,CAAC,GAAG,GAAG,IAAI;iBAC9D,GACA,GACsB,EACxB,SAAS,IAAI,eAAK,SAAS,EAAC,uBAAuB,aAAE,KAAK,SAAQ,IAC9D,CACN,CAAC,CAAC;AACH,QAAQ,CAAC,WAAW,GAAG,iBAAiB,CAAC,IAAI,CAAC,WAAW,CAAC;AAE1D,OAAO,EAAE,QAAQ,EAAE,CAAC","sourcesContent":["import { cn } from \"@utilities/cn/cn\";\nimport { Progress as ProgressPrimitive } from \"radix-ui\";\nimport {\n\ttype ComponentPropsWithoutRef,\n\ttype ComponentRef,\n\tforwardRef,\n} from \"react\";\n\nexport type ProgressProps = ComponentPropsWithoutRef<\n\ttypeof ProgressPrimitive.Root\n> & {\n\tshowLabel?: boolean;\n};\n\n/**\n * A progress bar component that displays a progress indicator and a label.\n *\n * @param {Object} props - The component props.\n * @param {string} props.className - The class name for the component.\n * @param {number} props.value - The value of the progress bar.\n * @param {boolean} props.showLabel - Whether to show the label.\n */\n\nconst Progress = forwardRef<\n\tComponentRef<typeof ProgressPrimitive.Root>,\n\tProgressProps\n>(({ className, value, showLabel = true, max = 100, ...props }, ref) => (\n\t<div className=\"flex items-center gap-4\">\n\t\t<ProgressPrimitive.Root\n\t\t\tclassName={cn(\n\t\t\t\t\"relative h-2 w-full overflow-hidden rounded-full bg-gray-200/80\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tmax={max}\n\t\t\t{...props}\n\t\t\tref={ref}\n\t\t>\n\t\t\t<ProgressPrimitive.Indicator\n\t\t\t\tclassName=\"h-full w-full flex-1 bg-gray-700/80 transition-all\"\n\t\t\t\tstyle={{\n\t\t\t\t\ttransform: `translateX(-${100 - ((value || 0) / max) * 100}%)`,\n\t\t\t\t}}\n\t\t\t/>\n\t\t</ProgressPrimitive.Root>\n\t\t{showLabel && <div className=\"text-gray-500 text-sm\">{value}%</div>}\n\t</div>\n));\nProgress.displayName = ProgressPrimitive.Root.displayName;\n\nexport { Progress };\n"]}
+{"version":3,"file":"progress.js","sourceRoot":"/","sources":["components/progress/progress.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,IAAI,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AACxE,OAAO,EAAE,EAAE,EAAE,MAAM,kBAAkB,CAAC;AAOtC;;;;;;;GAOG;AAEH,SAAS,QAAQ,CAAC,EACjB,SAAS,EACT,KAAK,EACL,SAAS,GAAG,IAAI,EAChB,GAAG,GAAG,GAAG,EACT,GAAG,EACH,GAAG,KAAK,EACO;IACf,OAAO,CACN,MAAC,iBAAiB,CAAC,IAAI,IACtB,SAAS,EAAC,yBAAyB,EACnC,KAAK,EAAE,KAAK,EACZ,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,KACJ,KAAK,aAET,KAAC,iBAAiB,CAAC,KAAK,IACvB,SAAS,EAAE,EAAE,CACZ,iEAAiE,EACjE,SAAS,CACT,YAED,KAAC,iBAAiB,CAAC,SAAS,IAAC,SAAS,EAAC,sCAAsC,GAAG,GACvD,EACzB,SAAS,IAAI,CACb,KAAC,iBAAiB,CAAC,KAAK,IAAC,SAAS,EAAC,uBAAuB,YACxD,CAAC,eAA8B,EAAE,QAAuB,EAAE,EAAE,CAC5D,GAAG,QAAQ,GAAG,GAEU,CAC1B,IACuB,CACzB,CAAC;AACH,CAAC;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC","sourcesContent":["import { Progress as ProgressPrimitive } from \"@base-ui/react/progress\";\nimport { cn } from \"@utilities/cn/cn\";\nimport type { ComponentProps } from \"react\";\n\nexport type ProgressProps = ComponentProps<typeof ProgressPrimitive.Root> & {\n\tshowLabel?: boolean;\n};\n\n/**\n * A progress bar component that displays a progress indicator and a label.\n *\n * @param {Object} props - The component props.\n * @param {string} props.className - The class name for the component.\n * @param {number} props.value - The value of the progress bar.\n * @param {boolean} props.showLabel - Whether to show the label.\n */\n\nfunction Progress({\n\tclassName,\n\tvalue,\n\tshowLabel = true,\n\tmax = 100,\n\tref,\n\t...props\n}: ProgressProps) {\n\treturn (\n\t\t<ProgressPrimitive.Root\n\t\t\tclassName=\"flex items-center gap-4\"\n\t\t\tvalue={value}\n\t\t\tmax={max}\n\t\t\tref={ref}\n\t\t\t{...props}\n\t\t>\n\t\t\t<ProgressPrimitive.Track\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"relative h-2 w-full overflow-hidden rounded-full bg-gray-200/80\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t<ProgressPrimitive.Indicator className=\"h-full bg-gray-700/80 transition-all\" />\n\t\t\t</ProgressPrimitive.Track>\n\t\t\t{showLabel && (\n\t\t\t\t<ProgressPrimitive.Value className=\"text-gray-500 text-sm\">\n\t\t\t\t\t{(_formattedValue: string | null, rawValue: number | null) =>\n\t\t\t\t\t\t`${rawValue}%`\n\t\t\t\t\t}\n\t\t\t\t</ProgressPrimitive.Value>\n\t\t\t)}\n\t\t</ProgressPrimitive.Root>\n\t);\n}\n\nexport { Progress };\n"]}

package/dist/components/radio-group/radio-group.d.ts

@@ -1,4 +1,6 @@
-import { RadioGroup as RadixRadioGroup } from "radix-ui";
+import { Radio } from "@base-ui/react/radio";
+import { RadioGroup as BaseRadioGroup } from "@base-ui/react/radio-group";
+import type { ComponentProps } from "react";
 /**
  * A RadioGroup component that provides a set of radio buttons where only one can be selected at a time.
  *
@@ -23,11 +25,10 @@ import { RadioGroup as RadixRadioGroup } from "radix-ui";
  * @param {boolean} [disabled] - When true, prevents the user from interacting with the radio group
  * @param {boolean} [required] - When true, indicates that the user must select a value before the owning form can be submitted
  * @param {string} [name] - The name of the group. Submitted with its owning form as part of a name/value pair
- * @param {string} [dir] - The reading direction of the radio group
- * @param {string} [orientation] - The orientation of the radio group
- * @param {boolean} [loop] - When true, keyboard navigation will loop from last item to first, and vice versa
- * @returns {React.ForwardRefExoticComponent} A React component that renders a radio group
+ * @returns {React.ReactElement} A React component that renders a radio group
  */
-declare const RadioGroup: import("react").ForwardRefExoticComponent<Omit<RadixRadioGroup.RadioGroupProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-declare const RadioGroupItem: import("react").ForwardRefExoticComponent<Omit<RadixRadioGroup.RadioGroupItemProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+export type RadioGroupProps = ComponentProps<typeof BaseRadioGroup>;
+declare function RadioGroup({ className, disabled: initialDisabled, required: initialRequired, ref, ...props }: RadioGroupProps): import("react/jsx-runtime").JSX.Element;
+export type RadioGroupItemProps = ComponentProps<typeof Radio.Root>;
+declare function RadioGroupItem({ className, ref, ...props }: RadioGroupItemProps): import("react/jsx-runtime").JSX.Element;
 export { RadioGroup, RadioGroupItem };

package/dist/components/radio-group/radio-group.js

@@ -1,44 +1,17 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { Radio } from "@base-ui/react/radio";
+import { RadioGroup as BaseRadioGroup } from "@base-ui/react/radio-group";
 import { useFormContext } from "../form-field/form-field-context";
 import { cn } from "../../utilities/cn/cn";
-import { RadioGroup as RadixRadioGroup } from "radix-ui";
-import { forwardRef, } from "react";
-/**
- * A RadioGroup component that provides a set of radio buttons where only one can be selected at a time.
- *
- * @example
- * ```tsx
- * <RadioGroup defaultValue="option1">
- *   <div>
- *     <RadioGroupItem value="option1" id="option1" />
- *     <label htmlFor="option1">Option 1</label>
- *   </div>
- *   <div>
- *     <RadioGroupItem value="option2" id="option2" />
- *     <label htmlFor="option2">Option 2</label>
- *   </div>
- * </RadioGroup>
- * ```
- *
- * @param {string} [className] - Additional CSS classes to apply to the root element
- * @param {string} [defaultValue] - The value of the radio item that should be checked when initially rendered
- * @param {string} [value] - The controlled value of the radio item to check
- * @param {function} [onValueChange] - Event handler called when the value changes
- * @param {boolean} [disabled] - When true, prevents the user from interacting with the radio group
- * @param {boolean} [required] - When true, indicates that the user must select a value before the owning form can be submitted
- * @param {string} [name] - The name of the group. Submitted with its owning form as part of a name/value pair
- * @param {string} [dir] - The reading direction of the radio group
- * @param {string} [orientation] - The orientation of the radio group
- * @param {boolean} [loop] - When true, keyboard navigation will loop from last item to first, and vice versa
- * @returns {React.ForwardRefExoticComponent} A React component that renders a radio group
- */
-const RadioGroup = forwardRef(({ className, disabled: initialDisabled, required: initialRequired, ...props }, ref) => {
+function RadioGroup({ className, disabled: initialDisabled, required: initialRequired, ref, ...props }) {
     const { disabled, required } = useFormContext({
         disabled: initialDisabled,
         required: initialRequired,
     });
-    return (_jsx(RadixRadioGroup.Root, { ref: ref, className: cn("flex flex-col gap-2", className), disabled: disabled, required: required, ...props }));
-});
-const RadioGroupItem = forwardRef(({ className, ...props }, ref) => (_jsx(RadixRadioGroup.Item, { ref: ref, className: cn("flex h-4 w-4 items-center justify-center rounded-full border border-gray-700 bg-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-700 data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50", className), ...props, children: _jsx(RadixRadioGroup.Indicator, { className: "relative h-2 w-2 rounded-full bg-gray-500" }) })));
+    return (_jsx(BaseRadioGroup, { ref: ref, className: cn("flex flex-col gap-2", className), disabled: disabled, required: required, ...props }));
+}
+function RadioGroupItem({ className, ref, ...props }) {
+    return (_jsx(Radio.Root, { ref: ref, className: cn("flex h-4 w-4 items-center justify-center rounded-full border border-gray-700 bg-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-700 data-disabled:cursor-not-allowed data-disabled:opacity-50", className), ...props, children: _jsx(Radio.Indicator, { className: "relative h-2 w-2 rounded-full bg-gray-500" }) }));
+}
 export { RadioGroup, RadioGroupItem };
 //# sourceMappingURL=radio-group.js.map

package/dist/components/radio-group/radio-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio-group.js","sourceRoot":"/","sources":["components/radio-group/radio-group.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,2CAA2C,CAAC;AAC3E,OAAO,EAAE,EAAE,EAAE,MAAM,kBAAkB,CAAC;AACtC,OAAO,EAAE,UAAU,IAAI,eAAe,EAAE,MAAM,UAAU,CAAC;AACzD,OAAO,EAGN,UAAU,GACV,MAAM,OAAO,CAAC;AAEf;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,MAAM,UAAU,GAAG,UAAU,CAI5B,CACC,EACC,SAAS,EACT,QAAQ,EAAE,eAAe,EACzB,QAAQ,EAAE,eAAe,EACzB,GAAG,KAAK,EACR,EACD,GAAG,EACF,EAAE;IACH,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,cAAc,CAAC;QAC7C,QAAQ,EAAE,eAAe;QACzB,QAAQ,EAAE,eAAe;KACzB,CAAC,CAAC;IACH,OAAO,CACN,KAAC,eAAe,CAAC,IAAI,IACpB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,qBAAqB,EAAE,SAAS,CAAC,EAC/C,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,KACd,KAAK,GACR,CACF,CAAC;AACH,CAAC,CACD,CAAC;AAEF,MAAM,cAAc,GAAG,UAAU,CAG/B,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CACnC,KAAC,eAAe,CAAC,IAAI,IACpB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACZ,iOAAiO,EACjO,SAAS,CACT,KACG,KAAK,YAET,KAAC,eAAe,CAAC,SAAS,IAAC,SAAS,EAAC,2CAA2C,GAAG,GAC7D,CACvB,CAAC,CAAC;AAEH,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,CAAC","sourcesContent":["import { useFormContext } from \"@components/form-field/form-field-context\";\nimport { cn } from \"@utilities/cn/cn\";\nimport { RadioGroup as RadixRadioGroup } from \"radix-ui\";\nimport {\n\ttype ComponentPropsWithoutRef,\n\ttype ComponentRef,\n\tforwardRef,\n} from \"react\";\n\n/**\n * A RadioGroup component that provides a set of radio buttons where only one can be selected at a time.\n *\n * @example\n * ```tsx\n * <RadioGroup defaultValue=\"option1\">\n *   <div>\n *     <RadioGroupItem value=\"option1\" id=\"option1\" />\n *     <label htmlFor=\"option1\">Option 1</label>\n *   </div>\n *   <div>\n *     <RadioGroupItem value=\"option2\" id=\"option2\" />\n *     <label htmlFor=\"option2\">Option 2</label>\n *   </div>\n * </RadioGroup>\n * ```\n *\n * @param {string} [className] - Additional CSS classes to apply to the root element\n * @param {string} [defaultValue] - The value of the radio item that should be checked when initially rendered\n * @param {string} [value] - The controlled value of the radio item to check\n * @param {function} [onValueChange] - Event handler called when the value changes\n * @param {boolean} [disabled] - When true, prevents the user from interacting with the radio group\n * @param {boolean} [required] - When true, indicates that the user must select a value before the owning form can be submitted\n * @param {string} [name] - The name of the group. Submitted with its owning form as part of a name/value pair\n * @param {string} [dir] - The reading direction of the radio group\n * @param {string} [orientation] - The orientation of the radio group\n * @param {boolean} [loop] - When true, keyboard navigation will loop from last item to first, and vice versa\n * @returns {React.ForwardRefExoticComponent} A React component that renders a radio group\n */\nconst RadioGroup = forwardRef<\n\tComponentRef<typeof RadixRadioGroup.Root>,\n\tComponentPropsWithoutRef<typeof RadixRadioGroup.Root>\n>(\n\t(\n\t\t{\n\t\t\tclassName,\n\t\t\tdisabled: initialDisabled,\n\t\t\trequired: initialRequired,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst { disabled, required } = useFormContext({\n\t\t\tdisabled: initialDisabled,\n\t\t\trequired: initialRequired,\n\t\t});\n\t\treturn (\n\t\t\t<RadixRadioGroup.Root\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cn(\"flex flex-col gap-2\", className)}\n\t\t\t\tdisabled={disabled}\n\t\t\t\trequired={required}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\n\nconst RadioGroupItem = forwardRef<\n\tComponentRef<typeof RadixRadioGroup.Item>,\n\tComponentPropsWithoutRef<typeof RadixRadioGroup.Item>\n>(({ className, ...props }, ref) => (\n\t<RadixRadioGroup.Item\n\t\tref={ref}\n\t\tclassName={cn(\n\t\t\t\"flex h-4 w-4 items-center justify-center rounded-full border border-gray-700 bg-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-700 data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t>\n\t\t<RadixRadioGroup.Indicator className=\"relative h-2 w-2 rounded-full bg-gray-500\" />\n\t</RadixRadioGroup.Item>\n));\n\nexport { RadioGroup, RadioGroupItem };\n"]}
+{"version":3,"file":"radio-group.js","sourceRoot":"/","sources":["components/radio-group/radio-group.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAC7C,OAAO,EAAE,UAAU,IAAI,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAC1E,OAAO,EAAE,cAAc,EAAE,MAAM,2CAA2C,CAAC;AAC3E,OAAO,EAAE,EAAE,EAAE,MAAM,kBAAkB,CAAC;AAgCtC,SAAS,UAAU,CAAC,EACnB,SAAS,EACT,QAAQ,EAAE,eAAe,EACzB,QAAQ,EAAE,eAAe,EACzB,GAAG,EACH,GAAG,KAAK,EACS;IACjB,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,cAAc,CAAC;QAC7C,QAAQ,EAAE,eAAe;QACzB,QAAQ,EAAE,eAAe;KACzB,CAAC,CAAC;IACH,OAAO,CACN,KAAC,cAAc,IACd,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,qBAAqB,EAAE,SAAS,CAAC,EAC/C,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,KACd,KAAK,GACR,CACF,CAAC;AACH,CAAC;AAID,SAAS,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,EAAE,GAAG,KAAK,EAAuB;IACxE,OAAO,CACN,KAAC,KAAK,CAAC,IAAI,IACV,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACZ,6NAA6N,EAC7N,SAAS,CACT,KACG,KAAK,YAET,KAAC,KAAK,CAAC,SAAS,IAAC,SAAS,EAAC,2CAA2C,GAAG,GAC7D,CACb,CAAC;AACH,CAAC;AAED,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,CAAC","sourcesContent":["import { Radio } from \"@base-ui/react/radio\";\nimport { RadioGroup as BaseRadioGroup } from \"@base-ui/react/radio-group\";\nimport { useFormContext } from \"@components/form-field/form-field-context\";\nimport { cn } from \"@utilities/cn/cn\";\nimport type { ComponentProps } from \"react\";\n\n/**\n * A RadioGroup component that provides a set of radio buttons where only one can be selected at a time.\n *\n * @example\n * ```tsx\n * <RadioGroup defaultValue=\"option1\">\n *   <div>\n *     <RadioGroupItem value=\"option1\" id=\"option1\" />\n *     <label htmlFor=\"option1\">Option 1</label>\n *   </div>\n *   <div>\n *     <RadioGroupItem value=\"option2\" id=\"option2\" />\n *     <label htmlFor=\"option2\">Option 2</label>\n *   </div>\n * </RadioGroup>\n * ```\n *\n * @param {string} [className] - Additional CSS classes to apply to the root element\n * @param {string} [defaultValue] - The value of the radio item that should be checked when initially rendered\n * @param {string} [value] - The controlled value of the radio item to check\n * @param {function} [onValueChange] - Event handler called when the value changes\n * @param {boolean} [disabled] - When true, prevents the user from interacting with the radio group\n * @param {boolean} [required] - When true, indicates that the user must select a value before the owning form can be submitted\n * @param {string} [name] - The name of the group. Submitted with its owning form as part of a name/value pair\n * @returns {React.ReactElement} A React component that renders a radio group\n */\n\nexport type RadioGroupProps = ComponentProps<typeof BaseRadioGroup>;\n\nfunction RadioGroup({\n\tclassName,\n\tdisabled: initialDisabled,\n\trequired: initialRequired,\n\tref,\n\t...props\n}: RadioGroupProps) {\n\tconst { disabled, required } = useFormContext({\n\t\tdisabled: initialDisabled,\n\t\trequired: initialRequired,\n\t});\n\treturn (\n\t\t<BaseRadioGroup\n\t\t\tref={ref}\n\t\t\tclassName={cn(\"flex flex-col gap-2\", className)}\n\t\t\tdisabled={disabled}\n\t\t\trequired={required}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport type RadioGroupItemProps = ComponentProps<typeof Radio.Root>;\n\nfunction RadioGroupItem({ className, ref, ...props }: RadioGroupItemProps) {\n\treturn (\n\t\t<Radio.Root\n\t\t\tref={ref}\n\t\t\tclassName={cn(\n\t\t\t\t\"flex h-4 w-4 items-center justify-center rounded-full border border-gray-700 bg-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-700 data-disabled:cursor-not-allowed data-disabled:opacity-50\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<Radio.Indicator className=\"relative h-2 w-2 rounded-full bg-gray-500\" />\n\t\t</Radio.Root>\n\t);\n}\n\nexport { RadioGroup, RadioGroupItem };\n"]}

package/dist/components/select/select.d.ts

@@ -1,43 +1,54 @@
-import { Select as SelectPrimitive } from "radix-ui";
-import { type ComponentPropsWithoutRef } from "react";
+import { Select as SelectPrimitive } from "@base-ui/react/select";
+import type { ComponentProps } from "react";
 /**
  * Select
  */
-declare const Select: ({ disabled: initialDisabled, required: initialRequired, ...props }: ComponentPropsWithoutRef<typeof SelectPrimitive.Root>) => import("react/jsx-runtime").JSX.Element;
+export type SelectProps = ComponentProps<typeof SelectPrimitive.Root>;
+declare function Select({ disabled: initialDisabled, required: initialRequired, ...props }: SelectProps): import("react/jsx-runtime").JSX.Element;
 /**
  * SelectGroup
  */
-declare const SelectGroup: import("react").ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+declare const SelectGroup: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").SelectGroupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 /**
  * SelectValue
  */
-declare const SelectValue: import("react").ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & import("react").RefAttributes<HTMLSpanElement>>;
+export type SelectValueProps = ComponentProps<typeof SelectPrimitive.Value>;
+declare function SelectValue({ ref, ...props }: SelectValueProps): import("react/jsx-runtime").JSX.Element;
 /**
  * SelectTrigger
  */
-declare const SelectTrigger: import("react").ForwardRefExoticComponent<Omit<SelectPrimitive.SelectTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+export type SelectTriggerProps = ComponentProps<typeof SelectPrimitive.Trigger>;
+declare function SelectTrigger({ className, children, ref, ...props }: SelectTriggerProps): import("react/jsx-runtime").JSX.Element;
 /**
- * SelectScrollUpButton
+ * SelectScrollUpArrow
  */
-declare const SelectScrollUpButton: import("react").ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollUpButtonProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export type SelectScrollUpArrowProps = ComponentProps<typeof SelectPrimitive.ScrollUpArrow>;
+declare function SelectScrollUpArrow({ className, ref, ...props }: SelectScrollUpArrowProps): import("react/jsx-runtime").JSX.Element;
 /**
- * SelectScrollDownButton
+ * SelectScrollDownArrow
  */
-declare const SelectScrollDownButton: import("react").ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollDownButtonProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export type SelectScrollDownArrowProps = ComponentProps<typeof SelectPrimitive.ScrollDownArrow>;
+declare function SelectScrollDownArrow({ className, ref, ...props }: SelectScrollDownArrowProps): import("react/jsx-runtime").JSX.Element;
 /**
  * SelectContent
  */
-declare const SelectContent: import("react").ForwardRefExoticComponent<Omit<SelectPrimitive.SelectContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export type SelectContentProps = ComponentProps<typeof SelectPrimitive.Popup> & {
+    sideOffset?: number;
+};
+declare function SelectContent({ className, children, sideOffset, ref, ...props }: SelectContentProps): import("react/jsx-runtime").JSX.Element;
 /**
  * SelectLabel
  */
-declare const SelectLabel: import("react").ForwardRefExoticComponent<Omit<SelectPrimitive.SelectLabelProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export type SelectLabelProps = ComponentProps<typeof SelectPrimitive.GroupLabel>;
+declare function SelectLabel({ className, ref, ...props }: SelectLabelProps): import("react/jsx-runtime").JSX.Element;
 /**
  * SelectItem
  */
-declare const SelectItem: import("react").ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export type SelectItemProps = ComponentProps<typeof SelectPrimitive.Item>;
+declare function SelectItem({ className, children, ref, ...props }: SelectItemProps): import("react/jsx-runtime").JSX.Element;
 /**
  * SelectSeparator
  */
-declare const SelectSeparator: import("react").ForwardRefExoticComponent<Omit<SelectPrimitive.SelectSeparatorProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-export { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectLabel, SelectItem, SelectSeparator, SelectScrollUpButton, SelectScrollDownButton, };
+export type SelectSeparatorProps = ComponentProps<typeof SelectPrimitive.Separator>;
+declare function SelectSeparator({ className, ref, ...props }: SelectSeparatorProps): import("react/jsx-runtime").JSX.Element;
+export { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectLabel, SelectItem, SelectSeparator, SelectScrollUpArrow, SelectScrollDownArrow, };

package/dist/components/select/select.js

@@ -1,65 +1,43 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Select as SelectPrimitive } from "@base-ui/react/select";
 import { useFormContext } from "../form-field/form-field-context";
 import { Icon } from "../icon/icon";
 import { CheckIcon, ChevronDownIcon, ChevronUpIcon, } from "@radix-ui/react-icons";
 import { cn } from "../../utilities/cn/cn";
-import { Select as SelectPrimitive } from "radix-ui";
-import { forwardRef, } from "react";
-/**
- * Select
- */
-const Select = ({ disabled: initialDisabled, required: initialRequired, ...props }) => {
+function Select({ disabled: initialDisabled, required: initialRequired, ...props }) {
     const { disabled, required } = useFormContext({
         disabled: initialDisabled,
         required: initialRequired,
     });
     return (_jsx(SelectPrimitive.Root, { disabled: disabled, required: required, ...props }));
-};
+}
 /**
  * SelectGroup
  */
 const SelectGroup = SelectPrimitive.Group;
-/**
- * SelectValue
- */
-const SelectValue = SelectPrimitive.Value;
-/**
- * SelectTrigger
- */
-const SelectTrigger = forwardRef(({ className, children, ...props }, ref) => (_jsxs(SelectPrimitive.Trigger, { ref: ref, className: cn("flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-gray-400 bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[placeholder]:text-gray-500 [&>span]:line-clamp-1", className), ...props, children: [children, _jsx(SelectPrimitive.Icon, { asChild: true, children: _jsx(Icon, { asChild: true, size: "small", className: "opacity-50", children: _jsx(ChevronDownIcon, {}) }) })] })));
-SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
-/**
- * SelectScrollUpButton
- */
-const SelectScrollUpButton = forwardRef(({ className, ...props }, ref) => (_jsx(SelectPrimitive.ScrollUpButton, { ref: ref, className: cn("flex cursor-default items-center justify-center py-1", className), ...props, children: _jsx(Icon, { asChild: true, size: "small", className: "opacity-50", children: _jsx(ChevronUpIcon, {}) }) })));
-SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
-/**
- * SelectScrollDownButton
- */
-const SelectScrollDownButton = forwardRef(({ className, ...props }, ref) => (_jsx(SelectPrimitive.ScrollDownButton, { ref: ref, className: cn("flex cursor-default items-center justify-center py-1", className), ...props, children: _jsx(Icon, { asChild: true, size: "small", className: "opacity-50", children: _jsx(ChevronDownIcon, {}) }) })));
-SelectScrollDownButton.displayName =
-    SelectPrimitive.ScrollDownButton.displayName;
-/**
- * SelectContent
- */
-const SelectContent = forwardRef(({ className, children, position = "popper", ...props }, ref) => (_jsx(SelectPrimitive.Portal, { children: _jsxs(SelectPrimitive.Content, { ref: ref, className: cn("data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] origin-[--radix-select-content-transform-origin] overflow-y-auto overflow-x-hidden rounded-md border border-gray-400 bg-white text-gray-700 shadow-md data-[state=closed]:animate-fade-out data-[state=closed]:animate-out data-[state=open]:animate-fade-in data-[state=open]:animate-in", position === "popper" &&
-            "data-[side=left]:-translate-x-1 data-[side=top]:-translate-y-1 data-[side=right]:translate-x-1 data-[side=bottom]:translate-y-1", className), position: position, ...props, children: [_jsx(SelectScrollUpButton, {}), _jsx(SelectPrimitive.Viewport, { className: cn("p-1", position === "popper" &&
-                    "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"), children: children }), _jsx(SelectScrollDownButton, {})] }) })));
-SelectContent.displayName = SelectPrimitive.Content.displayName;
-/**
- * SelectLabel
- */
-const SelectLabel = forwardRef(({ className, ...props }, ref) => (_jsx(SelectPrimitive.Label, { ref: ref, className: cn("px-2 py-1.5 font-semibold text-sm", className), ...props })));
-SelectLabel.displayName = SelectPrimitive.Label.displayName;
-/**
- * SelectItem
- */
-const SelectItem = forwardRef(({ className, children, ...props }, ref) => (_jsxs(SelectPrimitive.Item, { ref: ref, className: cn("relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pr-8 pl-2 text-sm outline-none focus-visible:bg-gray-700 focus-visible:text-white data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className), ...props, children: [_jsx("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: _jsx(SelectPrimitive.ItemIndicator, { children: _jsx(Icon, { asChild: true, size: "small", children: _jsx(CheckIcon, {}) }) }) }), _jsx(SelectPrimitive.ItemText, { children: children })] })));
-SelectItem.displayName = SelectPrimitive.Item.displayName;
-/**
- * SelectSeparator
- */
-const SelectSeparator = forwardRef(({ className, ...props }, ref) => (_jsx(SelectPrimitive.Separator, { ref: ref, className: cn("my-2 h-px bg-gray-200", className), ...props })));
-SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
-export { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectLabel, SelectItem, SelectSeparator, SelectScrollUpButton, SelectScrollDownButton, };
+function SelectValue({ ref, ...props }) {
+    return _jsx(SelectPrimitive.Value, { ref: ref, ...props });
+}
+function SelectTrigger({ className, children, ref, ...props }) {
+    return (_jsxs(SelectPrimitive.Trigger, { ref: ref, className: cn("flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-gray-400 bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-placeholder:text-gray-500 [&>span]:line-clamp-1", className), ...props, children: [children, _jsx(SelectPrimitive.Icon, { render: _jsx(Icon, { size: "small", className: "opacity-50", children: _jsx(ChevronDownIcon, {}) }) })] }));
+}
+function SelectScrollUpArrow({ className, ref, ...props }) {
+    return (_jsx(SelectPrimitive.ScrollUpArrow, { ref: ref, className: cn("flex cursor-default items-center justify-center py-1", className), ...props, children: _jsx(Icon, { size: "small", className: "opacity-50", children: _jsx(ChevronUpIcon, {}) }) }));
+}
+function SelectScrollDownArrow({ className, ref, ...props }) {
+    return (_jsx(SelectPrimitive.ScrollDownArrow, { ref: ref, className: cn("flex cursor-default items-center justify-center py-1", className), ...props, children: _jsx(Icon, { size: "small", className: "opacity-50", children: _jsx(ChevronDownIcon, {}) }) }));
+}
+function SelectContent({ className, children, sideOffset = 4, ref, ...props }) {
+    return (_jsx(SelectPrimitive.Portal, { children: _jsxs(SelectPrimitive.Positioner, { sideOffset: sideOffset, alignItemWithTrigger: false, children: [_jsx(SelectScrollUpArrow, {}), _jsx(SelectPrimitive.Popup, { ref: ref, className: cn("data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-closed:fade-out data-closed:zoom-out-95 data-open:fade-in data-open:zoom-in-95 relative z-50 max-h-(--available-height) min-w-32 origin-(--transform-origin) overflow-y-auto overflow-x-hidden rounded-md border border-gray-400 bg-white text-gray-700 shadow-md transition-all data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=bottom]:translate-y-1 data-[side=top]:-translate-y-1 data-closed:animate-out data-open:animate-in", className), ...props, children: _jsx(SelectPrimitive.List, { className: "w-full min-w-(--anchor-width) p-1", children: children }) }), _jsx(SelectScrollDownArrow, {})] }) }));
+}
+function SelectLabel({ className, ref, ...props }) {
+    return (_jsx(SelectPrimitive.GroupLabel, { ref: ref, className: cn("px-2 py-1.5 font-semibold text-sm", className), ...props }));
+}
+function SelectItem({ className, children, ref, ...props }) {
+    return (_jsxs(SelectPrimitive.Item, { ref: ref, className: cn("relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pr-8 pl-2 text-sm outline-none data-disabled:pointer-events-none data-highlighted:bg-gray-700 data-highlighted:text-white data-disabled:opacity-50", className), ...props, children: [_jsx("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: _jsx(SelectPrimitive.ItemIndicator, { children: _jsx(Icon, { size: "small", children: _jsx(CheckIcon, {}) }) }) }), _jsx(SelectPrimitive.ItemText, { children: children })] }));
+}
+function SelectSeparator({ className, ref, ...props }) {
+    return (_jsx(SelectPrimitive.Separator, { ref: ref, className: cn("my-2 h-px bg-gray-200", className), ...props }));
+}
+export { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectLabel, SelectItem, SelectSeparator, SelectScrollUpArrow, SelectScrollDownArrow, };
 //# sourceMappingURL=select.js.map