@bioturing/components 0.32.0 → 0.32.1

package/dist/components/popup-panel/component.js

@@ -1,9 +1,9 @@
 "use client";
-import { jsx as t, jsxs as f } from "react/jsx-runtime";
+import { jsx as e, jsxs as s } from "react/jsx-runtime";
 import { Popover as o } from "@base-ui-components/react/popover";
-import { useMemo as _, useRef as A, useState as B, useEffect as m, useCallback as a } from "react";
-import { X as N } from "@bioturing/assets";
-import { PopupPanelSize as s } from "./constants.js";
+import { useMemo as Q, useRef as y, useState as W, useEffect as Y, useCallback as Z } from "react";
+import { X as _ } from "@bioturing/assets";
+import { PopupPanelSize as B } from "./constants.js";
 import { Stack as ee } from "../stack/index.js";
 import './style.css';/* empty css          */
 import { parseAntdPlacement as te, buildAntdPlacement as re } from "../utils/placement.js";
@@ -12,166 +12,166 @@ import { Resizable as ie } from "../resizable/component.js";
 import { useControlledState as oe } from "../hooks/useControlledState.js";
 import { useCls as pe } from "../utils/antdUtils.js";
 import { clsx as p } from "../utils/cn.js";
-import { IconButton as ue } from "../icon-button/component.js";
-const Ce = ({
-  children: K,
-  placement: j,
-  openOnHover: E = !1,
-  open: M,
-  onOpenChange: D,
-  content: F,
-  title: h,
-  trigger: T = "click",
-  className: U,
-  anchor: V,
-  beforeCloseButton: C,
-  afterCloseButton: S,
-  afterTitle: b,
-  size: v = "medium",
-  footer: l,
-  defaultOpen: X,
-  resizable: x = !1,
-  draggable: $ = !1,
-  maintainAspectRatio: q = !1,
-  classNames: e,
-  modal: G = !1,
-  closeOnClickOutside: J = !0,
-  onPlacementChange: P,
-  ...L
+import { IconButton as le } from "../icon-button/component.js";
+const Oe = ({
+  children: z,
+  placement: k,
+  openOnHover: H = !1,
+  open: I,
+  onOpenChange: K,
+  content: j,
+  title: f,
+  trigger: E = "click",
+  className: M,
+  anchor: D,
+  beforeCloseButton: O,
+  afterCloseButton: R,
+  afterTitle: m,
+  size: g = "medium",
+  footer: c,
+  defaultOpen: F,
+  resizable: A = !1,
+  draggable: T = !1,
+  maintainAspectRatio: U = !1,
+  classNames: r,
+  modal: V = !1,
+  closeOnClickOutside: X = !0,
+  onPlacementChange: h,
+  ...$
 }) => {
-  const [w, z] = oe(
-    M,
-    D,
-    X ?? !1
+  const [b, C] = oe(
+    I,
+    K,
+    F ?? !1
     // Always provide a default value to prevent undefined
-  ), r = pe(), c = te(j), k = _(() => /* @__PURE__ */ t(N, { size: 16 }), []), H = A(null), y = A(c.side), O = A(c.align), [Q, W] = B(0);
-  m(() => {
-    const u = H.current;
-    if (!u || !w) return;
-    const g = new MutationObserver((d) => {
-      let R = !1;
-      if (d.forEach((i) => {
+  ), t = pe(), u = te(k), N = Q(() => /* @__PURE__ */ e(_, { size: 16 }), []), S = y(null), v = y(u.side), P = y(u.align), [q, G] = W(0);
+  Y(() => {
+    const l = S.current;
+    if (!l || !b) return;
+    const d = new MutationObserver((a) => {
+      let w = !1;
+      if (a.forEach((i) => {
         if (i.type === "attributes" && i.attributeName === "data-side") {
-          const n = u.getAttribute(i.attributeName);
-          n && n !== y.current && (y.current = n, R = !0);
+          const n = l.getAttribute(i.attributeName);
+          n && n !== v.current && (v.current = n, w = !0);
         }
         if (i.type === "attributes" && i.attributeName === "data-align") {
-          const n = u.getAttribute(i.attributeName);
-          n && n !== O.current && (O.current = n, R = !0);
+          const n = l.getAttribute(i.attributeName);
+          n && n !== P.current && (P.current = n, w = !0);
         }
-      }), R) {
+      }), w) {
         const i = re({
-          side: y.current,
-          align: O.current
+          side: v.current,
+          align: P.current
         });
-        W((n) => n + 1), P && P(i);
+        G((n) => n + 1), h && h(i);
       }
     });
-    return g.observe(u, {
+    return d.observe(l, {
       attributes: !0,
       attributeFilter: ["data-side", "data-align"],
       attributeOldValue: !0
     }), () => {
-      g.disconnect();
+      d.disconnect();
     };
-  }, [P, w]);
-  const Y = a(() => /* @__PURE__ */ f("div", { className: p(r("popup-panel-header"), e == null ? void 0 : e.header), children: [
-    /* @__PURE__ */ f(
+  }, [h, b]);
+  const J = Z(() => /* @__PURE__ */ s("div", { className: p(t("popup-panel-header"), r?.header), children: [
+    /* @__PURE__ */ s(
       ee,
       {
         align: "center",
         gap: 8,
-        className: r("popup-panel-title-wrapper"),
+        className: t("popup-panel-title-wrapper"),
         children: [
-          /* @__PURE__ */ t(
+          /* @__PURE__ */ e(
             o.Title,
             {
-              render: /* @__PURE__ */ t("div", { className: p(r("grow", "truncate"), e == null ? void 0 : e.title), children: h })
+              render: /* @__PURE__ */ e("div", { className: p(t("grow", "truncate"), r?.title), children: f })
             }
           ),
-          /* @__PURE__ */ f("div", { className: "flex items-center gap-2", children: [
-            C,
-            /* @__PURE__ */ t(
+          /* @__PURE__ */ s("div", { className: "flex items-center gap-2", children: [
+            O,
+            /* @__PURE__ */ e(
               o.Close,
               {
-                render: /* @__PURE__ */ t(ue, { children: k })
+                render: /* @__PURE__ */ e(le, { children: N })
               }
             ),
-            S
+            R
           ] })
         ]
       }
     ),
-    b || null
+    m || null
   ] }), [
-    S,
-    b,
-    C,
-    r,
-    e == null ? void 0 : e.header,
-    e == null ? void 0 : e.title,
-    k,
-    h
-  ]), { ref: Z } = ne($), I = /* @__PURE__ */ f(
+    R,
+    m,
+    O,
+    t,
+    r?.header,
+    r?.title,
+    N,
+    f
+  ]), { ref: L } = ne(T), x = /* @__PURE__ */ s(
     o.Popup,
     {
       className: p(
-        r("popup-panel"),
-        r(`popup-panel-size-${v}`),
-        U,
-        e == null ? void 0 : e.popup
+        t("popup-panel"),
+        t(`popup-panel-size-${g}`),
+        M,
+        r?.popup
       ),
-      ref: Z,
+      ref: L,
       children: [
-        h && Y(),
-        /* @__PURE__ */ t("div", { className: p(r("popup-panel-content"), e == null ? void 0 : e.content), children: /* @__PURE__ */ t("div", { className: r("popup-panel-content-inner"), children: F }) }),
-        l && /* @__PURE__ */ t("div", { className: p(r("popup-panel-footer"), e == null ? void 0 : e.footer), children: typeof l == "function" ? l({ close: () => z(!1) }) : l })
+        f && J(),
+        /* @__PURE__ */ e("div", { className: p(t("popup-panel-content"), r?.content), children: /* @__PURE__ */ e("div", { className: t("popup-panel-content-inner"), children: j }) }),
+        c && /* @__PURE__ */ e("div", { className: p(t("popup-panel-footer"), r?.footer), children: typeof c == "function" ? c({ close: () => C(!1) }) : c })
       ]
     }
   );
-  return /* @__PURE__ */ f(
+  return /* @__PURE__ */ s(
     o.Root,
     {
-      openOnHover: T === "hover" ? !0 : E,
-      open: w,
-      onOpenChange: (u, g, d) => {
-        (d === "outside-press" || d === "focus-out") && !J || z(u, g, d);
+      openOnHover: E === "hover" ? !0 : H,
+      open: b,
+      onOpenChange: (l, d, a) => {
+        (a === "outside-press" || a === "focus-out") && !X || C(l, d, a);
       },
-      modal: G,
-      ...L,
+      modal: V,
+      ...$,
       children: [
-        /* @__PURE__ */ t(
+        /* @__PURE__ */ e(
           o.Trigger,
           {
-            render: K,
-            className: p(r("popup-panel-trigger"), e == null ? void 0 : e.trigger)
+            render: z,
+            className: p(t("popup-panel-trigger"), r?.trigger)
           }
         ),
-        /* @__PURE__ */ t(o.Portal, { children: /* @__PURE__ */ t(
+        /* @__PURE__ */ e(o.Portal, { children: /* @__PURE__ */ e(
           o.Positioner,
           {
-            ref: H,
-            className: p(r("popup-panel-root"), e == null ? void 0 : e.root),
-            side: c.side,
-            align: c.align,
+            ref: S,
+            className: p(t("popup-panel-root"), r?.root),
+            side: u.side,
+            align: u.align,
             sideOffset: 4,
-            anchor: V,
+            anchor: D,
             style: {
-              "--size-width": v ? s[v] : void 0
+              "--size-width": g ? B[g] : void 0
             },
-            children: x ? /* @__PURE__ */ t(
+            children: A ? /* @__PURE__ */ e(
               ie,
               {
-                resizable: x,
+                resizable: A,
                 absolutePositioning: !0,
-                resetKey: Q,
-                maintainAspectRatio: q,
+                resetKey: q,
+                maintainAspectRatio: U,
                 classNames: {
-                  resizeHandle: e == null ? void 0 : e.resizeHandle
+                  resizeHandle: r?.resizeHandle
                 },
-                children: I
+                children: x
               }
-            ) : I
+            ) : x
           }
         ) })
       ]
@@ -179,6 +179,6 @@ const Ce = ({
   );
 };
 export {
-  Ce as PopupPanel
+  Oe as PopupPanel
 };
 //# sourceMappingURL=component.js.map

package/dist/components/popup-panel/component.js.map

@@ -1 +1 @@
-{"version":3,"file":"component.js","sources":["../../../src/components/popup-panel/component.tsx"],"sourcesContent":["\"use client\";\nimport {\n  useCls,\n  clsx,\n  parseAntdPlacement,\n  buildAntdPlacement,\n  BaseUIPlacement,\n  BaseUISide,\n  BaseUIAlign,\n} from \"../utils\";\nimport { Popover } from \"@base-ui-components/react/popover\";\n\nimport { type PopoverProps } from \"antd/es/popover\";\nimport { useCallback, useEffect, useMemo, useState } from \"react\";\nimport { IconButton } from \"../icon-button\";\nimport { X } from \"@bioturing/assets\";\nimport { PopupPanelSize } from \"./constants\";\nimport { useControlledState, useDraggable } from \"../hooks\";\nimport { Resizable } from \"../resizable\";\nimport { Stack } from \"../stack\";\n\n// Import component-specific styles\nimport \"./style.css\";\nimport { useRef } from \"react\";\n\nexport interface PopupPanelProps\n  extends Omit<\n      React.ComponentPropsWithRef<\"div\">,\n      \"title\" | \"content\" | \"children\"\n    >,\n    Omit<Popover.Root.Props, \"children\"> {\n  /** The trigger element that opens the popup panel */\n  children?: React.ComponentProps<typeof Popover.Trigger>[\"render\"];\n  /** Placement of the popup panel relative to its trigger */\n  placement?: PopoverProps[\"placement\"];\n  /** Whether to open the popup panel on hover */\n  openOnHover?: boolean;\n  /** Controls the open state of the popup panel */\n  open?: boolean;\n  /** Callback fired when the open state changes */\n  onOpenChange?: Popover.Root.Props[\"onOpenChange\"];\n  /** Content to display inside the popup panel */\n  content?: React.ReactNode;\n  /** Title text or element to display in the panel header */\n  title?: React.ReactNode;\n  /** The event that triggers the popup panel */\n  /**\n   * @default \"click\"\n   */\n  trigger?: \"click\" | \"hover\";\n  /** Custom anchor element for positioning the panel */\n  anchor?: Popover.Positioner.Props[\"anchor\"];\n  /** Content to display before the close button */\n  beforeCloseButton?: React.ReactNode;\n  /** Content to display after the close button */\n  afterCloseButton?: React.ReactNode;\n  /** Content to display after the title */\n  afterTitle?: React.ReactNode;\n  /**\n   * Predefined sizes for the popup panel\n   * - xsmall: 320px\n   * - small: 400px\n   * - medium: 480px (default)\n   * - large: 640px\n   * - xlarge: 840px\n   * @default \"medium\" for default type, \"xsmall\" for other types\n   */\n  size?: keyof typeof PopupPanelSize;\n  /**\n   * Footer content for the popup panel\n   * Can be a React node or a function that returns a React node\n   */\n  footer?:\n    | React.ReactNode\n    | ((props: { close: () => void }) => React.ReactNode);\n  /**\n   * Whether the panel should be open by default when uncontrolled\n   * @default false\n   */\n  defaultOpen?: boolean;\n  /**\n   * Whether the panel should be resizable\n   * @default false\n   */\n  resizable?: boolean;\n  /**\n   * Whether the panel should be draggable\n   * @default false\n   */\n  draggable?: boolean;\n  /**\n   * Whether to maintain aspect ratio when resizing\n   * Only applies when resizable is true\n   * @default false\n   */\n  maintainAspectRatio?: boolean;\n  /**\n   * Custom class names for different parts of the popup panel\n   * @default {}\n   */\n  classNames?: {\n    root?: string;\n    trigger?: string;\n    popup?: string;\n    header?: string;\n    title?: string;\n    content?: string;\n    footer?: string;\n    resizeHandle?: string;\n  };\n  /**\n   * Whether to close the panel when clicking outside\n   * @default true\n   */\n  closeOnClickOutside?: boolean;\n  /**\n   * Whether to use modal mode\n   * @default false\n   */\n  modal?: Popover.Root.Props[\"modal\"];\n  /**\n   * Callback function when the placement changes\n   */\n  onPlacementChange?: (placement: PopoverProps[\"placement\"]) => void;\n}\n\nexport const PopupPanel = ({\n  children,\n  placement,\n  openOnHover = false,\n  open: outsideOpen,\n  onOpenChange: outsideOnOpenChange,\n  content,\n  title,\n  trigger = \"click\",\n  className,\n  anchor,\n  beforeCloseButton,\n  afterCloseButton,\n  afterTitle,\n  size = \"medium\",\n  footer,\n  defaultOpen,\n  resizable = false,\n  draggable = false,\n  maintainAspectRatio = false,\n  classNames,\n  modal = false,\n  closeOnClickOutside = true,\n  onPlacementChange,\n  ...rest\n}: PopupPanelProps) => {\n  // Use controlled state with proper initialization to prevent switching between controlled/uncontrolled\n  const [open, setOpen] = useControlledState(\n    outsideOpen,\n    outsideOnOpenChange,\n    defaultOpen ?? false, // Always provide a default value to prevent undefined\n  );\n\n  const cls = useCls();\n  const baseUIPlacement = parseAntdPlacement(placement);\n\n  const defaultCloseIcon = useMemo(() => <X size={16} />, []);\n\n  const positionerRef = useRef<HTMLDivElement>(null);\n  const currentSideRef = useRef<BaseUISide>(baseUIPlacement.side);\n  const currentAlignRef = useRef<BaseUIAlign>(baseUIPlacement.align);\n  const [placementChangeKey, setPlacementChangeKey] = useState(0);\n\n  useEffect(() => {\n    const positioner = positionerRef.current;\n    if (!positioner || !open) return; // Only observe when popup is open\n\n    // Create MutationObserver to watch for data-side changes\n    const observer = new MutationObserver((mutations) => {\n      let hasPlacementChanged = false;\n\n      mutations.forEach((mutation) => {\n        if (\n          mutation.type === \"attributes\" &&\n          mutation.attributeName === \"data-side\"\n        ) {\n          const newSide = positioner.getAttribute(mutation.attributeName);\n          if (newSide && newSide !== currentSideRef.current) {\n            currentSideRef.current = newSide as BaseUISide;\n            hasPlacementChanged = true;\n          }\n        }\n        if (\n          mutation.type === \"attributes\" &&\n          mutation.attributeName === \"data-align\"\n        ) {\n          const newAlign = positioner.getAttribute(mutation.attributeName);\n          if (newAlign && newAlign !== currentAlignRef.current) {\n            currentAlignRef.current = newAlign as BaseUIAlign;\n            hasPlacementChanged = true;\n          }\n        }\n      });\n\n      // Only trigger callbacks if placement actually changed\n      if (hasPlacementChanged) {\n        const newPlacement = buildAntdPlacement({\n          side: currentSideRef.current,\n          align: currentAlignRef.current,\n        });\n\n        // Trigger resizable dimensions reset when placement changes\n        setPlacementChangeKey((prev) => prev + 1);\n\n        if (onPlacementChange) {\n          onPlacementChange(newPlacement);\n        }\n      }\n    });\n\n    // Start observing\n    observer.observe(positioner, {\n      attributes: true,\n      attributeFilter: [\"data-side\", \"data-align\"],\n      attributeOldValue: true,\n    });\n\n    return () => {\n      observer.disconnect();\n    };\n  }, [onPlacementChange, open]);\n\n  const renderTitle = useCallback(() => {\n    return (\n      <div className={clsx(cls(\"popup-panel-header\"), classNames?.header)}>\n        <Stack\n          align=\"center\"\n          gap={8}\n          className={cls(\"popup-panel-title-wrapper\")}\n        >\n          <Popover.Title\n            render={\n              <div className={clsx(cls(\"grow\", \"truncate\"), classNames?.title)}>\n                {title}\n              </div>\n            }\n          ></Popover.Title>\n          <div className=\"flex items-center gap-2\">\n            {beforeCloseButton}\n            <Popover.Close\n              render={<IconButton>{defaultCloseIcon}</IconButton>}\n            />\n            {afterCloseButton}\n          </div>\n        </Stack>\n        {afterTitle ? afterTitle : null}\n      </div>\n    );\n  }, [\n    afterCloseButton,\n    afterTitle,\n    beforeCloseButton,\n    cls,\n    classNames?.header,\n    classNames?.title,\n    defaultCloseIcon,\n    title,\n  ]);\n\n  const { ref: draggableRef } = useDraggable(draggable);\n\n  const popup = (\n    <Popover.Popup\n      className={clsx(\n        cls(\"popup-panel\"),\n        cls(`popup-panel-size-${size}`),\n        className,\n        classNames?.popup,\n      )}\n      ref={draggableRef}\n    >\n      {title && renderTitle()}\n      <div className={clsx(cls(\"popup-panel-content\"), classNames?.content)}>\n        <div className={cls(\"popup-panel-content-inner\")}>{content}</div>\n      </div>\n      {footer && (\n        <div className={clsx(cls(\"popup-panel-footer\"), classNames?.footer)}>\n          {typeof footer === \"function\"\n            ? footer({ close: () => setOpen(false) })\n            : footer}\n        </div>\n      )}\n    </Popover.Popup>\n  );\n\n  return (\n    <Popover.Root\n      openOnHover={trigger === \"hover\" ? true : openOnHover}\n      open={open}\n      onOpenChange={(open, event, reason) => {\n        if (\n          (reason === \"outside-press\" || reason === \"focus-out\") &&\n          !closeOnClickOutside\n        )\n          return;\n        setOpen(open, event, reason);\n      }}\n      modal={modal}\n      {...rest}\n    >\n      <Popover.Trigger\n        render={children}\n        className={clsx(cls(\"popup-panel-trigger\"), classNames?.trigger)}\n      ></Popover.Trigger>\n      <Popover.Portal>\n        <Popover.Positioner\n          ref={positionerRef}\n          className={clsx(cls(\"popup-panel-root\"), classNames?.root)}\n          side={baseUIPlacement.side}\n          align={baseUIPlacement.align}\n          sideOffset={4}\n          anchor={anchor}\n          style={\n            {\n              \"--size-width\": size ? PopupPanelSize[size] : undefined,\n            } as React.CSSProperties\n          }\n        >\n          {resizable ? (\n            <Resizable\n              resizable={resizable}\n              absolutePositioning={true}\n              resetKey={placementChangeKey}\n              maintainAspectRatio={maintainAspectRatio}\n              classNames={{\n                resizeHandle: classNames?.resizeHandle,\n              }}\n            >\n              {popup}\n            </Resizable>\n          ) : (\n            popup\n          )}\n        </Popover.Positioner>\n      </Popover.Portal>\n    </Popover.Root>\n  );\n};\n"],"names":["PopupPanel","children","placement","openOnHover","outsideOpen","outsideOnOpenChange","content","title","trigger","className","anchor","beforeCloseButton","afterCloseButton","afterTitle","size","footer","defaultOpen","resizable","draggable","maintainAspectRatio","classNames","modal","closeOnClickOutside","onPlacementChange","rest","open","setOpen","useControlledState","cls","useCls","baseUIPlacement","parseAntdPlacement","defaultCloseIcon","useMemo","jsx","X","positionerRef","useRef","currentSideRef","currentAlignRef","placementChangeKey","setPlacementChangeKey","useState","useEffect","positioner","observer","mutations","hasPlacementChanged","mutation","newSide","newAlign","newPlacement","buildAntdPlacement","prev","renderTitle","useCallback","jsxs","clsx","Stack","Popover","IconButton","draggableRef","useDraggable","popup","event","reason","PopupPanelSize","Resizable"],"mappings":"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"}
+{"version":3,"file":"component.js","sources":["../../../src/components/popup-panel/component.tsx"],"sourcesContent":["\"use client\";\nimport {\n  useCls,\n  clsx,\n  parseAntdPlacement,\n  buildAntdPlacement,\n  BaseUIPlacement,\n  BaseUISide,\n  BaseUIAlign,\n} from \"../utils\";\nimport { Popover } from \"@base-ui-components/react/popover\";\n\nimport { type PopoverProps } from \"antd/es/popover\";\nimport { useCallback, useEffect, useMemo, useState } from \"react\";\nimport { IconButton } from \"../icon-button\";\nimport { X } from \"@bioturing/assets\";\nimport { PopupPanelSize } from \"./constants\";\nimport { useControlledState, useDraggable } from \"../hooks\";\nimport { Resizable } from \"../resizable\";\nimport { Stack } from \"../stack\";\n\n// Import component-specific styles\nimport \"./style.css\";\nimport { useRef } from \"react\";\n\nexport interface PopupPanelProps\n  extends Omit<\n      React.ComponentPropsWithRef<\"div\">,\n      \"title\" | \"content\" | \"children\"\n    >,\n    Omit<Popover.Root.Props, \"children\"> {\n  /** The trigger element that opens the popup panel */\n  children?: React.ComponentProps<typeof Popover.Trigger>[\"render\"];\n  /** Placement of the popup panel relative to its trigger */\n  placement?: PopoverProps[\"placement\"];\n  /** Whether to open the popup panel on hover */\n  openOnHover?: boolean;\n  /** Controls the open state of the popup panel */\n  open?: boolean;\n  /** Callback fired when the open state changes */\n  onOpenChange?: Popover.Root.Props[\"onOpenChange\"];\n  /** Content to display inside the popup panel */\n  content?: React.ReactNode;\n  /** Title text or element to display in the panel header */\n  title?: React.ReactNode;\n  /** The event that triggers the popup panel */\n  /**\n   * @default \"click\"\n   */\n  trigger?: \"click\" | \"hover\";\n  /** Custom anchor element for positioning the panel */\n  anchor?: Popover.Positioner.Props[\"anchor\"];\n  /** Content to display before the close button */\n  beforeCloseButton?: React.ReactNode;\n  /** Content to display after the close button */\n  afterCloseButton?: React.ReactNode;\n  /** Content to display after the title */\n  afterTitle?: React.ReactNode;\n  /**\n   * Predefined sizes for the popup panel\n   * - xsmall: 320px\n   * - small: 400px\n   * - medium: 480px (default)\n   * - large: 640px\n   * - xlarge: 840px\n   * @default \"medium\" for default type, \"xsmall\" for other types\n   */\n  size?: keyof typeof PopupPanelSize;\n  /**\n   * Footer content for the popup panel\n   * Can be a React node or a function that returns a React node\n   */\n  footer?:\n    | React.ReactNode\n    | ((props: { close: () => void }) => React.ReactNode);\n  /**\n   * Whether the panel should be open by default when uncontrolled\n   * @default false\n   */\n  defaultOpen?: boolean;\n  /**\n   * Whether the panel should be resizable\n   * @default false\n   */\n  resizable?: boolean;\n  /**\n   * Whether the panel should be draggable\n   * @default false\n   */\n  draggable?: boolean;\n  /**\n   * Whether to maintain aspect ratio when resizing\n   * Only applies when resizable is true\n   * @default false\n   */\n  maintainAspectRatio?: boolean;\n  /**\n   * Custom class names for different parts of the popup panel\n   * @default {}\n   */\n  classNames?: {\n    root?: string;\n    trigger?: string;\n    popup?: string;\n    header?: string;\n    title?: string;\n    content?: string;\n    footer?: string;\n    resizeHandle?: string;\n  };\n  /**\n   * Whether to close the panel when clicking outside\n   * @default true\n   */\n  closeOnClickOutside?: boolean;\n  /**\n   * Whether to use modal mode\n   * @default false\n   */\n  modal?: Popover.Root.Props[\"modal\"];\n  /**\n   * Callback function when the placement changes\n   */\n  onPlacementChange?: (placement: PopoverProps[\"placement\"]) => void;\n}\n\nexport const PopupPanel = ({\n  children,\n  placement,\n  openOnHover = false,\n  open: outsideOpen,\n  onOpenChange: outsideOnOpenChange,\n  content,\n  title,\n  trigger = \"click\",\n  className,\n  anchor,\n  beforeCloseButton,\n  afterCloseButton,\n  afterTitle,\n  size = \"medium\",\n  footer,\n  defaultOpen,\n  resizable = false,\n  draggable = false,\n  maintainAspectRatio = false,\n  classNames,\n  modal = false,\n  closeOnClickOutside = true,\n  onPlacementChange,\n  ...rest\n}: PopupPanelProps) => {\n  // Use controlled state with proper initialization to prevent switching between controlled/uncontrolled\n  const [open, setOpen] = useControlledState(\n    outsideOpen,\n    outsideOnOpenChange,\n    defaultOpen ?? false, // Always provide a default value to prevent undefined\n  );\n\n  const cls = useCls();\n  const baseUIPlacement = parseAntdPlacement(placement);\n\n  const defaultCloseIcon = useMemo(() => <X size={16} />, []);\n\n  const positionerRef = useRef<HTMLDivElement>(null);\n  const currentSideRef = useRef<BaseUISide>(baseUIPlacement.side);\n  const currentAlignRef = useRef<BaseUIAlign>(baseUIPlacement.align);\n  const [placementChangeKey, setPlacementChangeKey] = useState(0);\n\n  useEffect(() => {\n    const positioner = positionerRef.current;\n    if (!positioner || !open) return; // Only observe when popup is open\n\n    // Create MutationObserver to watch for data-side changes\n    const observer = new MutationObserver((mutations) => {\n      let hasPlacementChanged = false;\n\n      mutations.forEach((mutation) => {\n        if (\n          mutation.type === \"attributes\" &&\n          mutation.attributeName === \"data-side\"\n        ) {\n          const newSide = positioner.getAttribute(mutation.attributeName);\n          if (newSide && newSide !== currentSideRef.current) {\n            currentSideRef.current = newSide as BaseUISide;\n            hasPlacementChanged = true;\n          }\n        }\n        if (\n          mutation.type === \"attributes\" &&\n          mutation.attributeName === \"data-align\"\n        ) {\n          const newAlign = positioner.getAttribute(mutation.attributeName);\n          if (newAlign && newAlign !== currentAlignRef.current) {\n            currentAlignRef.current = newAlign as BaseUIAlign;\n            hasPlacementChanged = true;\n          }\n        }\n      });\n\n      // Only trigger callbacks if placement actually changed\n      if (hasPlacementChanged) {\n        const newPlacement = buildAntdPlacement({\n          side: currentSideRef.current,\n          align: currentAlignRef.current,\n        });\n\n        // Trigger resizable dimensions reset when placement changes\n        setPlacementChangeKey((prev) => prev + 1);\n\n        if (onPlacementChange) {\n          onPlacementChange(newPlacement);\n        }\n      }\n    });\n\n    // Start observing\n    observer.observe(positioner, {\n      attributes: true,\n      attributeFilter: [\"data-side\", \"data-align\"],\n      attributeOldValue: true,\n    });\n\n    return () => {\n      observer.disconnect();\n    };\n  }, [onPlacementChange, open]);\n\n  const renderTitle = useCallback(() => {\n    return (\n      <div className={clsx(cls(\"popup-panel-header\"), classNames?.header)}>\n        <Stack\n          align=\"center\"\n          gap={8}\n          className={cls(\"popup-panel-title-wrapper\")}\n        >\n          <Popover.Title\n            render={\n              <div className={clsx(cls(\"grow\", \"truncate\"), classNames?.title)}>\n                {title}\n              </div>\n            }\n          ></Popover.Title>\n          <div className=\"flex items-center gap-2\">\n            {beforeCloseButton}\n            <Popover.Close\n              render={<IconButton>{defaultCloseIcon}</IconButton>}\n            />\n            {afterCloseButton}\n          </div>\n        </Stack>\n        {afterTitle ? afterTitle : null}\n      </div>\n    );\n  }, [\n    afterCloseButton,\n    afterTitle,\n    beforeCloseButton,\n    cls,\n    classNames?.header,\n    classNames?.title,\n    defaultCloseIcon,\n    title,\n  ]);\n\n  const { ref: draggableRef } = useDraggable(draggable);\n\n  const popup = (\n    <Popover.Popup\n      className={clsx(\n        cls(\"popup-panel\"),\n        cls(`popup-panel-size-${size}`),\n        className,\n        classNames?.popup,\n      )}\n      ref={draggableRef}\n    >\n      {title && renderTitle()}\n      <div className={clsx(cls(\"popup-panel-content\"), classNames?.content)}>\n        <div className={cls(\"popup-panel-content-inner\")}>{content}</div>\n      </div>\n      {footer && (\n        <div className={clsx(cls(\"popup-panel-footer\"), classNames?.footer)}>\n          {typeof footer === \"function\"\n            ? footer({ close: () => setOpen(false) })\n            : footer}\n        </div>\n      )}\n    </Popover.Popup>\n  );\n\n  return (\n    <Popover.Root\n      openOnHover={trigger === \"hover\" ? true : openOnHover}\n      open={open}\n      onOpenChange={(open, event, reason) => {\n        if (\n          (reason === \"outside-press\" || reason === \"focus-out\") &&\n          !closeOnClickOutside\n        )\n          return;\n        setOpen(open, event, reason);\n      }}\n      modal={modal}\n      {...rest}\n    >\n      <Popover.Trigger\n        render={children}\n        className={clsx(cls(\"popup-panel-trigger\"), classNames?.trigger)}\n      ></Popover.Trigger>\n      <Popover.Portal>\n        <Popover.Positioner\n          ref={positionerRef}\n          className={clsx(cls(\"popup-panel-root\"), classNames?.root)}\n          side={baseUIPlacement.side}\n          align={baseUIPlacement.align}\n          sideOffset={4}\n          anchor={anchor}\n          style={\n            {\n              \"--size-width\": size ? PopupPanelSize[size] : undefined,\n            } as React.CSSProperties\n          }\n        >\n          {resizable ? (\n            <Resizable\n              resizable={resizable}\n              absolutePositioning={true}\n              resetKey={placementChangeKey}\n              maintainAspectRatio={maintainAspectRatio}\n              classNames={{\n                resizeHandle: classNames?.resizeHandle,\n              }}\n            >\n              {popup}\n            </Resizable>\n          ) : (\n            popup\n          )}\n        </Popover.Positioner>\n      </Popover.Portal>\n    </Popover.Root>\n  );\n};\n"],"names":["PopupPanel","children","placement","openOnHover","outsideOpen","outsideOnOpenChange","content","title","trigger","className","anchor","beforeCloseButton","afterCloseButton","afterTitle","size","footer","defaultOpen","resizable","draggable","maintainAspectRatio","classNames","modal","closeOnClickOutside","onPlacementChange","rest","open","setOpen","useControlledState","cls","useCls","baseUIPlacement","parseAntdPlacement","defaultCloseIcon","useMemo","jsx","X","positionerRef","useRef","currentSideRef","currentAlignRef","placementChangeKey","setPlacementChangeKey","useState","useEffect","positioner","observer","mutations","hasPlacementChanged","mutation","newSide","newAlign","newPlacement","buildAntdPlacement","prev","renderTitle","useCallback","jsxs","clsx","Stack","Popover","IconButton","draggableRef","useDraggable","popup","event","reason","PopupPanelSize","Resizable"],"mappings":";;;;;;;;;;;;;;;AA8HO,MAAMA,KAAa,CAAC;AAAA,EACzB,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,MAAMC;AAAA,EACN,cAAcC;AAAA,EACd,SAAAC;AAAA,EACA,OAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,WAAAC;AAAA,EACA,QAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,YAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,QAAAC;AAAA,EACA,aAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,WAAAC,IAAY;AAAA,EACZ,qBAAAC,IAAsB;AAAA,EACtB,YAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,qBAAAC,IAAsB;AAAA,EACtB,mBAAAC;AAAA,EACA,GAAGC;AACL,MAAuB;AAErB,QAAM,CAACC,GAAMC,CAAO,IAAIC;AAAA,IACtBvB;AAAA,IACAC;AAAA,IACAW,KAAe;AAAA;AAAA,EAAA,GAGXY,IAAMC,GAAA,GACNC,IAAkBC,GAAmB7B,CAAS,GAE9C8B,IAAmBC,EAAQ,MAAM,gBAAAC,EAACC,KAAE,MAAM,IAAI,GAAI,EAAE,GAEpDC,IAAgBC,EAAuB,IAAI,GAC3CC,IAAiBD,EAAmBP,EAAgB,IAAI,GACxDS,IAAkBF,EAAoBP,EAAgB,KAAK,GAC3D,CAACU,GAAoBC,CAAqB,IAAIC,EAAS,CAAC;AAE9D,EAAAC,EAAU,MAAM;AACd,UAAMC,IAAaR,EAAc;AACjC,QAAI,CAACQ,KAAc,CAACnB,EAAM;AAG1B,UAAMoB,IAAW,IAAI,iBAAiB,CAACC,MAAc;AACnD,UAAIC,IAAsB;AA0B1B,UAxBAD,EAAU,QAAQ,CAACE,MAAa;AAC9B,YACEA,EAAS,SAAS,gBAClBA,EAAS,kBAAkB,aAC3B;AACA,gBAAMC,IAAUL,EAAW,aAAaI,EAAS,aAAa;AAC9D,UAAIC,KAAWA,MAAYX,EAAe,YACxCA,EAAe,UAAUW,GACzBF,IAAsB;AAAA,QAE1B;AACA,YACEC,EAAS,SAAS,gBAClBA,EAAS,kBAAkB,cAC3B;AACA,gBAAME,IAAWN,EAAW,aAAaI,EAAS,aAAa;AAC/D,UAAIE,KAAYA,MAAaX,EAAgB,YAC3CA,EAAgB,UAAUW,GAC1BH,IAAsB;AAAA,QAE1B;AAAA,MACF,CAAC,GAGGA,GAAqB;AACvB,cAAMI,IAAeC,GAAmB;AAAA,UACtC,MAAMd,EAAe;AAAA,UACrB,OAAOC,EAAgB;AAAA,QAAA,CACxB;AAGD,QAAAE,EAAsB,CAACY,MAASA,IAAO,CAAC,GAEpC9B,KACFA,EAAkB4B,CAAY;AAAA,MAElC;AAAA,IACF,CAAC;AAGD,WAAAN,EAAS,QAAQD,GAAY;AAAA,MAC3B,YAAY;AAAA,MACZ,iBAAiB,CAAC,aAAa,YAAY;AAAA,MAC3C,mBAAmB;AAAA,IAAA,CACpB,GAEM,MAAM;AACX,MAAAC,EAAS,WAAA;AAAA,IACX;AAAA,EACF,GAAG,CAACtB,GAAmBE,CAAI,CAAC;AAE5B,QAAM6B,IAAcC,EAAY,MAE5B,gBAAAC,EAAC,SAAI,WAAWC,EAAK7B,EAAI,oBAAoB,GAAGR,GAAY,MAAM,GAChE,UAAA;AAAA,IAAA,gBAAAoC;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,OAAM;AAAA,QACN,KAAK;AAAA,QACL,WAAW9B,EAAI,2BAA2B;AAAA,QAE1C,UAAA;AAAA,UAAA,gBAAAM;AAAA,YAACyB,EAAQ;AAAA,YAAR;AAAA,cACC,QACE,gBAAAzB,EAAC,OAAA,EAAI,WAAWuB,EAAK7B,EAAI,QAAQ,UAAU,GAAGR,GAAY,KAAK,GAC5D,UAAAb,EAAA,CACH;AAAA,YAAA;AAAA,UAAA;AAAA,UAGJ,gBAAAiD,EAAC,OAAA,EAAI,WAAU,2BACZ,UAAA;AAAA,YAAA7C;AAAA,YACD,gBAAAuB;AAAA,cAACyB,EAAQ;AAAA,cAAR;AAAA,gBACC,QAAQ,gBAAAzB,EAAC0B,IAAA,EAAY,UAAA5B,EAAA,CAAiB;AAAA,cAAA;AAAA,YAAA;AAAA,YAEvCpB;AAAA,UAAA,EAAA,CACH;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAEDC,KAA0B;AAAA,EAAA,GAC7B,GAED;AAAA,IACDD;AAAA,IACAC;AAAA,IACAF;AAAA,IACAiB;AAAA,IACAR,GAAY;AAAA,IACZA,GAAY;AAAA,IACZY;AAAA,IACAzB;AAAA,EAAA,CACD,GAEK,EAAE,KAAKsD,MAAiBC,GAAa5C,CAAS,GAE9C6C,IACJ,gBAAAP;AAAA,IAACG,EAAQ;AAAA,IAAR;AAAA,MACC,WAAWF;AAAA,QACT7B,EAAI,aAAa;AAAA,QACjBA,EAAI,oBAAoBd,CAAI,EAAE;AAAA,QAC9BL;AAAA,QACAW,GAAY;AAAA,MAAA;AAAA,MAEd,KAAKyC;AAAA,MAEJ,UAAA;AAAA,QAAAtD,KAAS+C,EAAA;AAAA,0BACT,OAAA,EAAI,WAAWG,EAAK7B,EAAI,qBAAqB,GAAGR,GAAY,OAAO,GAClE,4BAAC,OAAA,EAAI,WAAWQ,EAAI,2BAA2B,GAAI,aAAQ,GAC7D;AAAA,QACCb,uBACE,OAAA,EAAI,WAAW0C,EAAK7B,EAAI,oBAAoB,GAAGR,GAAY,MAAM,GAC/D,iBAAOL,KAAW,aACfA,EAAO,EAAE,OAAO,MAAMW,EAAQ,EAAK,GAAG,IACtCX,EAAA,CACN;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAKN,SACE,gBAAAyC;AAAA,IAACG,EAAQ;AAAA,IAAR;AAAA,MACC,aAAanD,MAAY,UAAU,KAAOL;AAAA,MAC1C,MAAAsB;AAAA,MACA,cAAc,CAACA,GAAMuC,GAAOC,MAAW;AACrC,SACGA,MAAW,mBAAmBA,MAAW,gBAC1C,CAAC3C,KAGHI,EAAQD,GAAMuC,GAAOC,CAAM;AAAA,MAC7B;AAAA,MACA,OAAA5C;AAAA,MACC,GAAGG;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAU;AAAA,UAACyB,EAAQ;AAAA,UAAR;AAAA,YACC,QAAQ1D;AAAA,YACR,WAAWwD,EAAK7B,EAAI,qBAAqB,GAAGR,GAAY,OAAO;AAAA,UAAA;AAAA,QAAA;AAAA,QAEjE,gBAAAc,EAACyB,EAAQ,QAAR,EACC,UAAA,gBAAAzB;AAAA,UAACyB,EAAQ;AAAA,UAAR;AAAA,YACC,KAAKvB;AAAA,YACL,WAAWqB,EAAK7B,EAAI,kBAAkB,GAAGR,GAAY,IAAI;AAAA,YACzD,MAAMU,EAAgB;AAAA,YACtB,OAAOA,EAAgB;AAAA,YACvB,YAAY;AAAA,YACZ,QAAApB;AAAA,YACA,OACE;AAAA,cACE,gBAAgBI,IAAOoD,EAAepD,CAAI,IAAI;AAAA,YAAA;AAAA,YAIjD,UAAAG,IACC,gBAAAiB;AAAA,cAACiC;AAAA,cAAA;AAAA,gBACC,WAAAlD;AAAA,gBACA,qBAAqB;AAAA,gBACrB,UAAUuB;AAAA,gBACV,qBAAArB;AAAA,gBACA,YAAY;AAAA,kBACV,cAAcC,GAAY;AAAA,gBAAA;AAAA,gBAG3B,UAAA2C;AAAA,cAAA;AAAA,YAAA,IAGHA;AAAA,UAAA;AAAA,QAAA,EAEJ,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/components/popup-panel/constants.d.ts

@@ -0,0 +1,8 @@
+export declare enum PopupPanelSize {
+    xsmall = "320px",
+    small = "400px",
+    medium = "480px",
+    large = "640px",
+    xlarge = "840px"
+}
+//# sourceMappingURL=constants.d.ts.map

package/dist/components/popup-panel/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/components/popup-panel/constants.ts"],"names":[],"mappings":"AACA,oBAAY,cAAc;IACxB,MAAM,UAAU;IAChB,KAAK,UAAU;IACf,MAAM,UAAU;IAChB,KAAK,UAAU;IACf,MAAM,UAAU;CACjB"}

package/dist/components/popup-panel/constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"constants.js","sources":["../../../src/components/popup-panel/constants.ts"],"sourcesContent":["// Size map for predefined modal sizes\nexport enum PopupPanelSize {\n  xsmall = \"320px\",\n  small = \"400px\",\n  medium = \"480px\",\n  large = \"640px\",\n  xlarge = \"840px\",\n}\n"],"names":["PopupPanelSize"],"mappings":"AACY,IAAAA,sBAAAA,OACVA,EAAA,SAAS,SACTA,EAAA,QAAQ,SACRA,EAAA,SAAS,SACTA,EAAA,QAAQ,SACRA,EAAA,SAAS,SALCA,IAAAA,KAAA,CAAA,CAAA;"}
+{"version":3,"file":"constants.js","sources":["../../../src/components/popup-panel/constants.ts"],"sourcesContent":["// Size map for predefined modal sizes\nexport enum PopupPanelSize {\n  xsmall = \"320px\",\n  small = \"400px\",\n  medium = \"480px\",\n  large = \"640px\",\n  xlarge = \"840px\",\n}\n"],"names":["PopupPanelSize"],"mappings":"AACO,IAAKA,sBAAAA,OACVA,EAAA,SAAS,SACTA,EAAA,QAAQ,SACRA,EAAA,SAAS,SACTA,EAAA,QAAQ,SACRA,EAAA,SAAS,SALCA,IAAAA,KAAA,CAAA,CAAA;"}

package/dist/components/popup-panel/index.d.ts

@@ -0,0 +1,2 @@
+export * from './component';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/popup-panel/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/popup-panel/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC"}

package/dist/components/radio/component.d.ts

@@ -0,0 +1,8 @@
+import { RadioGroupProps } from './interface';
+export declare const Radio: import('react').ForwardRefExoticComponent<import('antd').RadioProps & import('react').RefAttributes<import('antd').CheckboxRef>> & {
+    Group: (props: RadioGroupProps & {
+        ref?: React.Ref<HTMLDivElement>;
+    }) => import("react/jsx-runtime").JSX.Element;
+    Button: import('react').ForwardRefExoticComponent<import('antd').RadioProps & import('react').RefAttributes<import('antd').CheckboxRef>>;
+};
+//# sourceMappingURL=component.d.ts.map

package/dist/components/radio/component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../src/components/radio/component.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAwB,eAAe,EAAE,MAAM,aAAa,CAAC;AAGzE,OAAO,aAAa,CAAC;AA8BrB,eAAO,MAAM,KAAK;mBApBT,eAAe,GAAG;QAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAA;KAAE;;CAuB5D,CAAC"}

package/dist/components/radio/component.js.map

@@ -1 +1 @@
-{"version":3,"file":"component.js","sources":["../../../src/components/radio/component.tsx"],"sourcesContent":["\"use client\";\nimport {\n  default as AntdRadio,\n  Group as AntdRadioGroup,\n  Button as AntdRadioButton,\n} from \"antd/es/radio\";\nimport { forwardRef } from \"react\";\nimport type { RadioProps, RadioRef, RadioGroupProps } from \"./interface\";\n\n// Import component-specific styles\nimport \"./style.css\";\n\nconst RadioInner = (\n  { className, style, ...rest }: RadioProps,\n  ref: React.Ref<RadioRef>\n) => {\n  return <AntdRadio ref={ref} className={className} style={style} {...rest} />;\n};\n\nconst RadioGroup = (\n  props: RadioGroupProps & { ref?: React.Ref<HTMLDivElement> }\n) => {\n  return <AntdRadioGroup {...props} />;\n};\n\nconst RadioButton = forwardRef<RadioRef, RadioProps>(\n  ({ className, style, ...rest }, ref) => {\n    return (\n      <AntdRadioButton\n        ref={ref}\n        className={className}\n        style={style}\n        {...rest}\n      />\n    );\n  }\n);\n\nconst ForwardedRadio = forwardRef<RadioRef, RadioProps>(RadioInner);\n\nexport const Radio = Object.assign(ForwardedRadio, {\n  Group: RadioGroup,\n  Button: RadioButton,\n});\n"],"names":["RadioInner","className","style","rest","ref","AntdRadio","RadioGroup","props","jsx","AntdRadioGroup","RadioButton","forwardRef","AntdRadioButton","ForwardedRadio","Radio"],"mappings":";;;;;AAYA,MAAMA,IAAa,CACjB,EAAE,WAAAC,GAAW,OAAAC,GAAO,GAAGC,KACvBC,wBAEQC,GAAU,EAAA,KAAAD,GAAU,WAAAH,GAAsB,OAAAC,GAAe,GAAGC,GAAM,GAGtEG,IAAa,CACjBC,MAEO,gBAAAC,EAACC,GAAgB,EAAA,GAAGF,EAAO,CAAA,GAG9BG,IAAcC;AAAA,EAClB,CAAC,EAAE,WAAAV,GAAW,OAAAC,GAAO,GAAGC,EAAA,GAAQC,MAE5B,gBAAAI;AAAA,IAACI;AAAAA,IAAA;AAAA,MACC,KAAAR;AAAA,MACA,WAAAH;AAAA,MACA,OAAAC;AAAA,MACC,GAAGC;AAAA,IAAA;AAAA,EACN;AAGN,GAEMU,IAAiBF,EAAiCX,CAAU,GAErDc,IAAQ,OAAO,OAAOD,GAAgB;AAAA,EACjD,OAAOP;AAAA,EACP,QAAQI;AACV,CAAC;"}
+{"version":3,"file":"component.js","sources":["../../../src/components/radio/component.tsx"],"sourcesContent":["\"use client\";\nimport {\n  default as AntdRadio,\n  Group as AntdRadioGroup,\n  Button as AntdRadioButton,\n} from \"antd/es/radio\";\nimport { forwardRef } from \"react\";\nimport type { RadioProps, RadioRef, RadioGroupProps } from \"./interface\";\n\n// Import component-specific styles\nimport \"./style.css\";\n\nconst RadioInner = (\n  { className, style, ...rest }: RadioProps,\n  ref: React.Ref<RadioRef>\n) => {\n  return <AntdRadio ref={ref} className={className} style={style} {...rest} />;\n};\n\nconst RadioGroup = (\n  props: RadioGroupProps & { ref?: React.Ref<HTMLDivElement> }\n) => {\n  return <AntdRadioGroup {...props} />;\n};\n\nconst RadioButton = forwardRef<RadioRef, RadioProps>(\n  ({ className, style, ...rest }, ref) => {\n    return (\n      <AntdRadioButton\n        ref={ref}\n        className={className}\n        style={style}\n        {...rest}\n      />\n    );\n  }\n);\n\nconst ForwardedRadio = forwardRef<RadioRef, RadioProps>(RadioInner);\n\nexport const Radio = Object.assign(ForwardedRadio, {\n  Group: RadioGroup,\n  Button: RadioButton,\n});\n"],"names":["RadioInner","className","style","rest","ref","AntdRadio","RadioGroup","props","jsx","AntdRadioGroup","RadioButton","forwardRef","AntdRadioButton","ForwardedRadio","Radio"],"mappings":";;;;;AAYA,MAAMA,IAAa,CACjB,EAAE,WAAAC,GAAW,OAAAC,GAAO,GAAGC,EAAA,GACvBC,wBAEQC,GAAA,EAAU,KAAAD,GAAU,WAAAH,GAAsB,OAAAC,GAAe,GAAGC,GAAM,GAGtEG,IAAa,CACjBC,MAEO,gBAAAC,EAACC,GAAA,EAAgB,GAAGF,EAAA,CAAO,GAG9BG,IAAcC;AAAA,EAClB,CAAC,EAAE,WAAAV,GAAW,OAAAC,GAAO,GAAGC,EAAA,GAAQC,MAE5B,gBAAAI;AAAA,IAACI;AAAAA,IAAA;AAAA,MACC,KAAAR;AAAA,MACA,WAAAH;AAAA,MACA,OAAAC;AAAA,MACC,GAAGC;AAAA,IAAA;AAAA,EAAA;AAIZ,GAEMU,IAAiBF,EAAiCX,CAAU,GAErDc,IAAQ,OAAO,OAAOD,GAAgB;AAAA,EACjD,OAAOP;AAAA,EACP,QAAQI;AACV,CAAC;"}

package/dist/components/radio/index.d.ts

@@ -0,0 +1,3 @@
+export * from './component';
+export * from './interface';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/radio/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/radio/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC"}

package/dist/components/radio/interface.d.ts

@@ -0,0 +1,6 @@
+import { RadioProps as AntdRadioProps, RadioRef as AntdRadioRef, RadioGroupProps as AntdRadioGroupProps, RadioChangeEvent as AntdRadioChangeEvent } from 'antd/es/radio';
+export type RadioProps = AntdRadioProps;
+export type RadioRef = AntdRadioRef;
+export type RadioGroupProps = AntdRadioGroupProps;
+export type RadioChangeEvent = AntdRadioChangeEvent;
+//# sourceMappingURL=interface.d.ts.map

package/dist/components/radio/interface.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"interface.d.ts","sourceRoot":"","sources":["../../../src/components/radio/interface.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,UAAU,IAAI,cAAc,EAC5B,QAAQ,IAAI,YAAY,EACxB,eAAe,IAAI,mBAAmB,EACtC,gBAAgB,IAAI,oBAAoB,EACzC,MAAM,eAAe,CAAC;AAEvB,MAAM,MAAM,UAAU,GAAG,cAAc,CAAC;AACxC,MAAM,MAAM,QAAQ,GAAG,YAAY,CAAC;AACpC,MAAM,MAAM,eAAe,GAAG,mBAAmB,CAAC;AAClD,MAAM,MAAM,gBAAgB,GAAG,oBAAoB,CAAC"}

package/dist/components/resizable/component.d.ts

@@ -0,0 +1,70 @@
+import { default as React } from 'react';
+import { MoveValues, ResizableProps as UseResizableProps } from 'react-use-resizable';
+import { WithRenderPropProps } from '../utils';
+export interface ResizableProps extends Omit<WithRenderPropProps, keyof UseResizableProps>, UseResizableProps {
+    /**
+     * Single React element child that will be enhanced with resize handles
+     */
+    children: React.ReactNode;
+    /**
+     * Whether the component should be resizable
+     * @default false
+     */
+    resizable?: boolean;
+    /**
+     * Configure which resize handles to show
+     * @default { bottom: true, right: true, left: true, top: true }
+     */
+    handles?: {
+        bottom?: boolean;
+        right?: boolean;
+        left?: boolean;
+        top?: boolean;
+    };
+    /**
+     * Whether to use absolute positioning for left handle resizing
+     * Set to true when used in absolutely positioned containers like PopupPanel
+     * @default false
+     */
+    absolutePositioning?: boolean;
+    /**
+     * Custom class names for different parts of the resizable component
+     */
+    classNames?: {
+        root?: string;
+        resizeHandle?: string;
+    };
+    /**
+     * Key to reset dimensions to current element size
+     * When this value changes, the component will recalculate its dimensions
+     * Similar to React's key prop pattern for forcing component resets
+     */
+    resetKey?: React.Key;
+    /**
+     * Maximum width the component can be resized to
+     */
+    maxWidth?: number;
+    /**
+     * Maximum height the component can be resized to
+     */
+    maxHeight?: number;
+    /**
+     * Minimum width the component can be resized to
+     */
+    minWidth?: number;
+    /**
+     * Minimum height the component can be resized to
+     */
+    minHeight?: number;
+    /**
+     * Callback fired during resize operations
+     */
+    onResize?: (values: MoveValues) => void;
+    /**
+     * Whether to maintain aspect ratio during resize
+     * @default false
+     */
+    maintainAspectRatio?: boolean;
+}
+export declare const Resizable: ({ children, resizable, handles, absolutePositioning, classNames, className: containerClassName, style: containerStyle, resetKey, maxHeight, maxWidth, minHeight, minWidth, lockHorizontal, lockVertical, onResize, onDragEnd: onDragEndProp, onDragStart: onDragStartProp, disabled, maintainAspectRatio, interval, initialHeight: initialHeightProp, initialWidth: initialWidthProp, ...rest }: ResizableProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=component.d.ts.map

package/dist/components/resizable/component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../src/components/resizable/component.tsx"],"names":[],"mappings":"AACA,OAAO,KAA2D,MAAM,OAAO,CAAC;AAChF,OAAO,EAEL,KAAK,UAAU,EACf,cAAc,IAAI,iBAAiB,EACpC,MAAM,qBAAqB,CAAC;AAE7B,OAAO,EAIL,mBAAmB,EAGpB,MAAM,UAAU,CAAC;AAGlB,OAAO,aAAa,CAAC;AAGrB,MAAM,WAAW,cACf,SAAQ,IAAI,CAAC,mBAAmB,EAAE,MAAM,iBAAiB,CAAC,EACxD,iBAAiB;IACnB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE;QACR,MAAM,CAAC,EAAE,OAAO,CAAC;QACjB,KAAK,CAAC,EAAE,OAAO,CAAC;QAChB,IAAI,CAAC,EAAE,OAAO,CAAC;QACf,GAAG,CAAC,EAAE,OAAO,CAAC;KACf,CAAC;IACF;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;OAEG;IACH,UAAU,CAAC,EAAE;QACX,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,YAAY,CAAC,EAAE,MAAM,CAAC;KACvB,CAAC;IACF;;;;OAIG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;IACxC;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B;AAED,eAAO,MAAM,SAAS,GAAI,iYA2BvB,cAAc,4CA8ThB,CAAC"}