@chayns-ui/core 0.3.2 → 0.4.1

package/dist/components/popup/Popup.js

@@ -1,107 +1,119 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { cloneElement, useCallback, useEffect, useId, useLayoutEffect, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { cloneElement, createContext, forwardRef, isValidElement, useCallback, useContext, useEffect, useId, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 //#region src/components/popup/Popup.tsx
-var Popup = ({ children, className, trigger }) => {
-	const [open, setOpen] = useState(false);
-	const [position, setPosition] = useState({
-		left: 0,
-		top: 0
-	});
-	const triggerRef = useRef(null);
-	const popupRef = useRef(null);
-	const popupId = useId();
-	const updatePosition = () => {
-		const anchor = triggerRef.current;
-		if (!anchor) return;
-		const rect = anchor.getBoundingClientRect();
-		const popup = popupRef.current;
-		const popupWidth = popup?.offsetWidth ?? 0;
-		const popupHeight = popup?.offsetHeight ?? 0;
-		const gap = 8;
-		const margin = 8;
-		const left = Math.min(Math.max(margin, rect.left), Math.max(margin, window.innerWidth - popupWidth - margin));
-		const below = rect.bottom + gap;
-		const top = below + popupHeight <= window.innerHeight - margin ? below : Math.max(margin, rect.top - popupHeight - gap);
-		setPosition({
-			left,
-			top
-		});
+var PopupContext = createContext(null);
+function usePopup(part) {
+	const context = useContext(PopupContext);
+	if (!context) throw new Error(`Popup.${part} must be rendered within Popup.`);
+	return context;
+}
+var Trigger = forwardRef(function Trigger({ asChild = false, children, onClick, ...props }, ref) {
+	const popup = usePopup("Trigger");
+	const setRef = (node) => {
+		popup.setTriggerElement(node);
+		if (typeof ref === "function") ref(node);
+		else if (ref) ref.current = node;
 	};
-	const close = (restoreFocus) => {
-		setOpen(false);
-		if (restoreFocus) queueMicrotask(() => triggerRef.current?.focus());
+	const triggerProps = {
+		...props,
+		"aria-controls": popup.contentId,
+		"aria-expanded": popup.open,
+		onClick: (event) => {
+			onClick?.(event);
+			if (!event.defaultPrevented) popup.setOpen(!popup.open);
+		},
+		ref: setRef
 	};
-	const setTriggerRef = useCallback((node) => {
-		triggerRef.current = node;
-	}, []);
-	useLayoutEffect(() => {
-		if (!open) return;
-		updatePosition();
-		(popupRef.current?.querySelector("[role=\"menuitem\"]"))?.focus();
-	}, [open]);
+	if (asChild && isValidElement(children)) return cloneElement(children, triggerProps);
+	return /* @__PURE__ */ jsx("button", {
+		...triggerProps,
+		ref: setRef,
+		type: "button",
+		children
+	});
+});
+var Content = forwardRef(function Content({ children, ...props }, ref) {
+	const popup = usePopup("Content");
+	const contentRef = useRef(null);
 	useEffect(() => {
-		if (!open) return;
-		const handlePointerDown = (event) => {
-			const target = event.target;
-			if (target instanceof Node && !triggerRef.current?.contains(target) && !popupRef.current?.contains(target)) close(false);
-		};
-		const handleKeyDown = (event) => {
-			if (event.key === "Escape") {
+		if (popup.open) contentRef.current?.querySelector("[role=\"menuitem\"]")?.focus();
+	}, [popup.open]);
+	function setRef(element) {
+		contentRef.current = element;
+		if (typeof ref === "function") ref(element);
+		else if (ref) ref.current = element;
+	}
+	if (!popup.open || typeof document === "undefined") return null;
+	return createPortal(/* @__PURE__ */ jsx("div", {
+		...props,
+		className: ["chayns-popup", props.className].filter(Boolean).join(" "),
+		id: popup.contentId,
+		ref: setRef,
+		children
+	}), document.body);
+});
+var Root = ({ children, closeOnEscape = true, closeOnOutsidePress = true, defaultOpen = false, onOpenChange, open }) => {
+	const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+	const [triggerElement, setTriggerElement] = useState(null);
+	const contentId = useId();
+	const isOpen = open ?? uncontrolledOpen;
+	const setOpen = useCallback((next, restore = true) => {
+		if (open === void 0) setUncontrolledOpen(next);
+		onOpenChange?.(next);
+		if (!next && restore) queueMicrotask(() => triggerElement?.focus());
+	}, [
+		onOpenChange,
+		open,
+		triggerElement
+	]);
+	useEffect(() => {
+		if (!isOpen) return;
+		const key = (event) => {
+			if (event.key === "Escape" && closeOnEscape) {
 				event.preventDefault();
-				close(true);
+				setOpen(false);
 			}
-			if (event.key === "Tab") close(false);
+			if (event.key === "Tab") setOpen(false, false);
 		};
-		const handleViewportChange = () => updatePosition();
-		const handlePopupClick = (event) => {
-			if (event.target.closest("[role=\"menuitem\"]")) close(true);
+		const outside = (event) => {
+			const target = event.target;
+			if (closeOnOutsidePress && target instanceof Node && !triggerElement?.contains(target) && !document.getElementById(contentId)?.contains(target)) setOpen(false, false);
+		};
+		const menuAction = (event) => {
+			if (event.target.closest("[role=\"menuitem\"]")) setOpen(false);
 		};
-		const popupElement = popupRef.current;
-		document.addEventListener("pointerdown", handlePointerDown);
-		document.addEventListener("keydown", handleKeyDown);
-		window.addEventListener("resize", handleViewportChange);
-		window.addEventListener("scroll", handleViewportChange, true);
-		popupElement?.addEventListener("click", handlePopupClick);
+		document.addEventListener("keydown", key);
+		document.addEventListener("pointerdown", outside);
+		document.addEventListener("click", menuAction);
 		return () => {
-			document.removeEventListener("pointerdown", handlePointerDown);
-			document.removeEventListener("keydown", handleKeyDown);
-			window.removeEventListener("resize", handleViewportChange);
-			window.removeEventListener("scroll", handleViewportChange, true);
-			popupElement?.removeEventListener("click", handlePopupClick);
+			document.removeEventListener("keydown", key);
+			document.removeEventListener("pointerdown", outside);
+			document.removeEventListener("click", menuAction);
 		};
-	}, [open]);
-	const triggerElement = trigger;
-	const enhancedTrigger = cloneElement(triggerElement, {
-		"aria-controls": popupId,
-		"aria-expanded": open,
-		"aria-haspopup": "menu",
-		onClick: (event) => {
-			triggerElement.props.onClick?.(event);
-			if (!event.defaultPrevented) setOpen((value) => !value);
-		},
-		onKeyDown: (event) => {
-			triggerElement.props.onKeyDown?.(event);
-			if (event.defaultPrevented) return;
-			if (event.key === "ArrowDown" || event.key === "ArrowUp") {
-				event.preventDefault();
-				setOpen(true);
-			}
-		},
-		ref: setTriggerRef
-	});
-	return /* @__PURE__ */ jsxs(Fragment, { children: [enhancedTrigger, open ? createPortal(/* @__PURE__ */ jsx("div", {
-		className: ["chayns-popup", className].filter(Boolean).join(" "),
-		id: popupId,
-		ref: popupRef,
-		style: {
-			left: position.left,
-			top: position.top
+	}, [
+		isOpen,
+		closeOnEscape,
+		closeOnOutsidePress,
+		contentId,
+		setOpen,
+		triggerElement
+	]);
+	return /* @__PURE__ */ jsx(PopupContext.Provider, {
+		value: {
+			contentId,
+			open: isOpen,
+			setOpen,
+			setTriggerElement
 		},
 		children
-	}), document.body) : null] });
+	});
 };
+var Popup_default = Object.assign(Root, {
+	Trigger,
+	Content
+});
 //#endregion
-export { Popup as default };
+export { Popup_default as default };
 
 //# sourceMappingURL=Popup.js.map

package/dist/components/popup/Popup.js.map

@@ -1 +1 @@
-{"version":3,"file":"Popup.js","names":[],"sources":["../../../src/components/popup/Popup.tsx"],"sourcesContent":["import {\n  cloneElement,\n  useCallback,\n  useEffect,\n  useId,\n  useLayoutEffect,\n  useRef,\n  useState,\n  type KeyboardEvent,\n  type MouseEvent,\n  type Ref,\n  type ReactElement,\n} from 'react';\nimport { createPortal } from 'react-dom';\n\nimport type { PopupProps } from './Popup.types.js';\n\ninterface PopupTriggerProps {\n  'aria-controls'?: string;\n  'aria-expanded'?: boolean;\n  'aria-haspopup'?: string;\n  onClick?: (event: MouseEvent) => void;\n  onKeyDown?: (event: KeyboardEvent) => void;\n}\n\ntype PopupTriggerElement = ReactElement<PopupTriggerProps & { ref?: Ref<HTMLElement> }>;\nconst Popup = ({ children, className, trigger }: PopupProps) => {\n  const [open, setOpen] = useState(false);\n  const [position, setPosition] = useState({ left: 0, top: 0 });\n  const triggerRef = useRef<HTMLElement>(null);\n  const popupRef = useRef<HTMLDivElement>(null);\n  const popupId = useId();\n\n  const updatePosition = () => {\n    const anchor = triggerRef.current;\n    if (!anchor) return;\n\n    const rect = anchor.getBoundingClientRect();\n    const popup = popupRef.current;\n    const popupWidth = popup?.offsetWidth ?? 0;\n    const popupHeight = popup?.offsetHeight ?? 0;\n    const gap = 8;\n    const margin = 8;\n    const left = Math.min(\n      Math.max(margin, rect.left),\n      Math.max(margin, window.innerWidth - popupWidth - margin),\n    );\n    const below = rect.bottom + gap;\n    const top =\n      below + popupHeight <= window.innerHeight - margin\n        ? below\n        : Math.max(margin, rect.top - popupHeight - gap);\n\n    setPosition({ left, top });\n  };\n\n  const close = (restoreFocus: boolean) => {\n    setOpen(false);\n    if (restoreFocus) {\n      queueMicrotask(() => triggerRef.current?.focus());\n    }\n  };\n\n  const setTriggerRef = useCallback((node: HTMLElement | null) => {\n    triggerRef.current = node;\n  }, []);\n\n  useLayoutEffect(() => {\n    if (!open) return;\n    updatePosition();\n    const firstItem = popupRef.current?.querySelector<HTMLElement>('[role=\"menuitem\"]');\n    firstItem?.focus();\n  }, [open]);\n\n  useEffect(() => {\n    if (!open) return;\n\n    const handlePointerDown = (event: PointerEvent) => {\n      const target = event.target;\n      if (\n        target instanceof Node &&\n        !triggerRef.current?.contains(target) &&\n        !popupRef.current?.contains(target)\n      ) {\n        close(false);\n      }\n    };\n    const handleKeyDown = (event: globalThis.KeyboardEvent) => {\n      if (event.key === 'Escape') {\n        event.preventDefault();\n        close(true);\n      }\n      if (event.key === 'Tab') close(false);\n    };\n    const handleViewportChange = () => updatePosition();\n    const handlePopupClick = (event: globalThis.MouseEvent) => {\n      if ((event.target as HTMLElement).closest('[role=\"menuitem\"]')) {\n        close(true);\n      }\n    };\n\n    const popupElement = popupRef.current;\n\n    document.addEventListener('pointerdown', handlePointerDown);\n    document.addEventListener('keydown', handleKeyDown);\n    window.addEventListener('resize', handleViewportChange);\n    window.addEventListener('scroll', handleViewportChange, true);\n    popupElement?.addEventListener('click', handlePopupClick);\n\n    return () => {\n      document.removeEventListener('pointerdown', handlePointerDown);\n      document.removeEventListener('keydown', handleKeyDown);\n      window.removeEventListener('resize', handleViewportChange);\n      window.removeEventListener('scroll', handleViewportChange, true);\n      popupElement?.removeEventListener('click', handlePopupClick);\n    };\n  }, [open]);\n\n  const triggerElement = trigger as PopupTriggerElement;\n  // cloneElement forwards `ref` as a plain prop to merge it with the trigger's own ref; the ref\n  // is never read during this render, only later by React when attaching the trigger DOM node.\n  // eslint-disable-next-line react-hooks/refs\n  const enhancedTrigger = cloneElement(triggerElement, {\n    'aria-controls': popupId,\n    'aria-expanded': open,\n    'aria-haspopup': 'menu',\n    onClick: (event: React.MouseEvent) => {\n      triggerElement.props.onClick?.(event);\n      if (!event.defaultPrevented) setOpen((value) => !value);\n    },\n    onKeyDown: (event: KeyboardEvent) => {\n      triggerElement.props.onKeyDown?.(event);\n      if (event.defaultPrevented) return;\n      if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {\n        event.preventDefault();\n        setOpen(true);\n      }\n    },\n    ref: setTriggerRef,\n  });\n\n  return (\n    <>\n      {enhancedTrigger}\n      {open\n        ? createPortal(\n            <div\n              className={['chayns-popup', className].filter(Boolean).join(' ')}\n              id={popupId}\n              ref={popupRef}\n              style={{ left: position.left, top: position.top }}\n            >\n              {children}\n            </div>,\n            document.body,\n          )\n        : null}\n    </>\n  );\n};\n\nexport default Popup;\n"],"mappings":"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"}
+{"version":3,"file":"Popup.js","names":[],"sources":["../../../src/components/popup/Popup.tsx"],"sourcesContent":["import {\n  cloneElement,\n  createContext,\n  forwardRef,\n  isValidElement,\n  useCallback,\n  useContext,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport type { PopupContentProps, PopupProps, PopupTriggerProps } from './Popup.types.js';\n\ninterface PopupContextValue {\n  contentId: string;\n  open: boolean;\n  setOpen: (open: boolean, restore?: boolean) => void;\n  setTriggerElement: (element: HTMLButtonElement | null) => void;\n}\nconst PopupContext = createContext<PopupContextValue | null>(null);\nfunction usePopup(part: string) {\n  const context = useContext(PopupContext);\n  if (!context) throw new Error(`Popup.${part} must be rendered within Popup.`);\n  return context;\n}\n\nconst Trigger = forwardRef<HTMLButtonElement, PopupTriggerProps>(function Trigger(\n  { asChild = false, children, onClick, ...props },\n  ref,\n) {\n  const popup = usePopup('Trigger');\n  const setRef = (node: HTMLButtonElement | null) => {\n    popup.setTriggerElement(node);\n    if (typeof ref === 'function') ref(node);\n    else if (ref) ref.current = node;\n  };\n  const triggerProps = {\n    ...props,\n    'aria-controls': popup.contentId,\n    'aria-expanded': popup.open,\n    onClick: (event: React.MouseEvent<HTMLButtonElement>) => {\n      onClick?.(event);\n      if (!event.defaultPrevented) popup.setOpen(!popup.open);\n    },\n    ref: setRef,\n  };\n\n  if (asChild && isValidElement(children)) {\n    // eslint-disable-next-line react-hooks/refs\n    return cloneElement(children, triggerProps);\n  }\n\n  return (\n    <button {...triggerProps} ref={setRef} type=\"button\">\n      {children}\n    </button>\n  );\n});\nconst Content = forwardRef<HTMLDivElement, PopupContentProps>(function Content(\n  { children, ...props },\n  ref,\n) {\n  const popup = usePopup('Content');\n  const contentRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    if (popup.open) {\n      contentRef.current?.querySelector<HTMLElement>('[role=\"menuitem\"]')?.focus();\n    }\n  }, [popup.open]);\n\n  function setRef(element: HTMLDivElement | null) {\n    contentRef.current = element;\n\n    if (typeof ref === 'function') ref(element);\n    else if (ref) ref.current = element;\n  }\n\n  if (!popup.open || typeof document === 'undefined') return null;\n  return createPortal(\n    <div\n      {...props}\n      className={['chayns-popup', props.className].filter(Boolean).join(' ')}\n      id={popup.contentId}\n      ref={setRef}\n    >\n      {children}\n    </div>,\n    document.body,\n  );\n});\nconst Root = ({\n  children,\n  closeOnEscape = true,\n  closeOnOutsidePress = true,\n  defaultOpen = false,\n  onOpenChange,\n  open,\n}: PopupProps) => {\n  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);\n  const [triggerElement, setTriggerElement] = useState<HTMLButtonElement | null>(null);\n  const contentId = useId();\n  const isOpen = open ?? uncontrolledOpen;\n  const setOpen = useCallback(\n    (next: boolean, restore = true) => {\n      if (open === undefined) setUncontrolledOpen(next);\n      onOpenChange?.(next);\n      if (!next && restore) queueMicrotask(() => triggerElement?.focus());\n    },\n    [onOpenChange, open, triggerElement],\n  );\n  useEffect(() => {\n    if (!isOpen) return;\n    const key = (event: KeyboardEvent) => {\n      if (event.key === 'Escape' && closeOnEscape) {\n        event.preventDefault();\n        setOpen(false);\n      }\n      if (event.key === 'Tab') setOpen(false, false);\n    };\n    const outside = (event: PointerEvent) => {\n      const target = event.target;\n      if (\n        closeOnOutsidePress &&\n        target instanceof Node &&\n        !triggerElement?.contains(target) &&\n        !document.getElementById(contentId)?.contains(target)\n      )\n        setOpen(false, false);\n    };\n    const menuAction = (event: MouseEvent) => {\n      if ((event.target as HTMLElement).closest('[role=\"menuitem\"]')) setOpen(false);\n    };\n    document.addEventListener('keydown', key);\n    document.addEventListener('pointerdown', outside);\n    document.addEventListener('click', menuAction);\n    return () => {\n      document.removeEventListener('keydown', key);\n      document.removeEventListener('pointerdown', outside);\n      document.removeEventListener('click', menuAction);\n    };\n  }, [isOpen, closeOnEscape, closeOnOutsidePress, contentId, setOpen, triggerElement]);\n  return (\n    <PopupContext.Provider value={{ contentId, open: isOpen, setOpen, setTriggerElement }}>\n      {children}\n    </PopupContext.Provider>\n  );\n};\nexport default Object.assign(Root, { Trigger, Content });\n"],"mappings":"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"}

package/dist/components/popup/Popup.types.d.ts

@@ -1,17 +1,27 @@
-import type { ReactElement, ReactNode } from 'react';
+import type { ComponentPropsWithRef, ReactNode } from 'react';
 import type { ButtonIcon } from '../button/Button.types.js';
+export interface PopupProps {
+    children: ReactNode;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    closeOnEscape?: boolean;
+    closeOnOutsidePress?: boolean;
+}
+export interface PopupTriggerProps extends Omit<ComponentPropsWithRef<'button'>, 'children' | 'type' | 'aria-controls' | 'aria-expanded'> {
+    children: ReactNode;
+    /** Internal composition escape hatch for PopupList's documented trigger element. */
+    asChild?: boolean;
+    type?: never;
+}
+export type PopupContentProps = ComponentPropsWithRef<'div'>;
 export interface PopupListItem {
     icon: ButtonIcon;
     text: string;
     onClick: () => void;
 }
-export interface PopupProps {
-    trigger: ReactElement;
-    children: ReactNode;
-    className?: string;
-}
 export interface PopupListProps {
-    trigger: ReactElement;
+    trigger: ReactNode;
     items: PopupListItem[];
     className?: string;
 }

package/dist/components/popup/Popup.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Popup.types.d.ts","sourceRoot":"","sources":["../../../src/components/popup/Popup.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAErD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAE5D,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,UAAU,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,MAAM,WAAW,UAAU;IACzB,OAAO,EAAE,YAAY,CAAC;IACtB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,cAAc;IAC7B,OAAO,EAAE,YAAY,CAAC;IACtB,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}
+{"version":3,"file":"Popup.types.d.ts","sourceRoot":"","sources":["../../../src/components/popup/Popup.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC9D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAE5D,MAAM,WAAW,UAAU;IACzB,QAAQ,EAAE,SAAS,CAAC;IACpB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B;AACD,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAC7C,qBAAqB,CAAC,QAAQ,CAAC,EAC/B,UAAU,GAAG,MAAM,GAAG,eAAe,GAAG,eAAe,CACxD;IACC,QAAQ,EAAE,SAAS,CAAC;IACpB,oFAAoF;IACpF,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,KAAK,CAAC;CACd;AACD,MAAM,MAAM,iBAAiB,GAAG,qBAAqB,CAAC,KAAK,CAAC,CAAC;AAC7D,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,UAAU,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AACD,MAAM,WAAW,cAAc;IAC7B,OAAO,EAAE,SAAS,CAAC;IACnB,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}

package/dist/components/popup/PopupList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PopupList.d.ts","sourceRoot":"","sources":["../../../src/components/popup/PopupList.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAEvD,QAAA,MAAM,SAAS,GAAI,+BAA+B,cAAc,gCAwC/D,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"PopupList.d.ts","sourceRoot":"","sources":["../../../src/components/popup/PopupList.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAEvD,QAAA,MAAM,SAAS,GAAI,+BAA+B,cAAc,gCA2C/D,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/components/popup/PopupList.js

@@ -1,5 +1,5 @@
 import ButtonIcon from "../button/button-icon/ButtonIcon.js";
-import Popup from "./Popup.js";
+import Popup_default from "./Popup.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useRef } from "react";
 //#region src/components/popup/PopupList.tsx
@@ -18,9 +18,11 @@ var PopupList = ({ className, items, trigger }) => {
 			itemRefs.current[event.key === "Home" ? 0 : items.length - 1]?.focus();
 		}
 	};
-	return /* @__PURE__ */ jsx(Popup, {
-		...className ? { className } : {},
-		trigger,
+	return /* @__PURE__ */ jsxs(Popup_default, { children: [/* @__PURE__ */ jsx(Popup_default.Trigger, {
+		asChild: true,
+		children: trigger
+	}), /* @__PURE__ */ jsx(Popup_default.Content, {
+		className,
 		children: /* @__PURE__ */ jsx("div", {
 			onKeyDown: handleKeyDown,
 			role: "menu",
@@ -36,7 +38,7 @@ var PopupList = ({ className, items, trigger }) => {
 				children: [/* @__PURE__ */ jsx(ButtonIcon, { icon: item.icon }), /* @__PURE__ */ jsx("span", { children: item.text })]
 			}, `${item.text}-${index}`))
 		})
-	});
+	})] });
 };
 //#endregion
 export { PopupList as default };

package/dist/components/popup/PopupList.js.map

@@ -1 +1 @@
-{"version":3,"file":"PopupList.js","names":[],"sources":["../../../src/components/popup/PopupList.tsx"],"sourcesContent":["import { useRef, type KeyboardEvent } from 'react';\n\nimport ButtonIcon from '../button/button-icon/ButtonIcon.js';\nimport Popup from './Popup.js';\nimport type { PopupListProps } from './Popup.types.js';\n\nconst PopupList = ({ className, items, trigger }: PopupListProps) => {\n  const itemRefs = useRef<(HTMLButtonElement | null)[]>([]);\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    const index = itemRefs.current.indexOf(document.activeElement as HTMLButtonElement);\n    if (index < 0 || items.length === 0) return;\n\n    if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {\n      event.preventDefault();\n      const direction = event.key === 'ArrowDown' ? 1 : -1;\n      const nextIndex = (index + direction + items.length) % items.length;\n      itemRefs.current[nextIndex]?.focus();\n    }\n    if (event.key === 'Home' || event.key === 'End') {\n      event.preventDefault();\n      itemRefs.current[event.key === 'Home' ? 0 : items.length - 1]?.focus();\n    }\n  };\n\n  return (\n    <Popup {...(className ? { className } : {})} trigger={trigger}>\n      <div onKeyDown={handleKeyDown} role=\"menu\" tabIndex={-1}>\n        {items.map((item, index) => (\n          <button\n            className=\"chayns-popup-list__item\"\n            key={`${item.text}-${index}`}\n            onClick={item.onClick}\n            ref={(element) => {\n              itemRefs.current[index] = element;\n            }}\n            role=\"menuitem\"\n            type=\"button\"\n          >\n            <ButtonIcon icon={item.icon} />\n            <span>{item.text}</span>\n          </button>\n        ))}\n      </div>\n    </Popup>\n  );\n};\n\nexport default PopupList;\n"],"mappings":";;;;;AAMA,IAAM,aAAa,EAAE,WAAW,OAAO,cAA8B;CACnE,MAAM,WAAW,OAAqC,CAAC,CAAC;CAExD,MAAM,iBAAiB,UAAyC;EAC9D,MAAM,QAAQ,SAAS,QAAQ,QAAQ,SAAS,aAAkC;EAClF,IAAI,QAAQ,KAAK,MAAM,WAAW,GAAG;EAErC,IAAI,MAAM,QAAQ,eAAe,MAAM,QAAQ,WAAW;GACxD,MAAM,eAAe;GAErB,MAAM,aAAa,SADD,MAAM,QAAQ,cAAc,IAAI,MACX,MAAM,UAAU,MAAM;GAC7D,SAAS,QAAQ,UAAU,EAAE,MAAM;EACrC;EACA,IAAI,MAAM,QAAQ,UAAU,MAAM,QAAQ,OAAO;GAC/C,MAAM,eAAe;GACrB,SAAS,QAAQ,MAAM,QAAQ,SAAS,IAAI,MAAM,SAAS,EAAE,EAAE,MAAM;EACvE;CACF;CAEA,OACE,oBAAC,OAAD;EAAO,GAAK,YAAY,EAAE,UAAU,IAAI,CAAC;EAAa;EACpD,UAAA,oBAAC,OAAD;GAAK,WAAW;GAAe,MAAK;GAAO,UAAU;GAClD,UAAA,MAAM,KAAK,MAAM,UAChB,qBAAC,UAAD;IACE,WAAU;IAEV,SAAS,KAAK;IACd,MAAM,YAAY;KAChB,SAAS,QAAQ,SAAS;IAC5B;IACA,MAAK;IACL,MAAK;IARP,UAAA,CAUE,oBAAC,YAAD,EAAY,MAAM,KAAK,KAAO,CAAA,GAC9B,oBAAC,QAAD,EAAA,UAAO,KAAK,KAAW,CAAA,CACjB;GAVD,GAAA,GAAG,KAAK,KAAK,GAAG,OAUf,CACT;EACE,CAAA;CACA,CAAA;AAEX"}
+{"version":3,"file":"PopupList.js","names":[],"sources":["../../../src/components/popup/PopupList.tsx"],"sourcesContent":["import { useRef, type KeyboardEvent } from 'react';\n\nimport ButtonIcon from '../button/button-icon/ButtonIcon.js';\nimport Popup from './Popup.js';\nimport type { PopupListProps } from './Popup.types.js';\n\nconst PopupList = ({ className, items, trigger }: PopupListProps) => {\n  const itemRefs = useRef<(HTMLButtonElement | null)[]>([]);\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    const index = itemRefs.current.indexOf(document.activeElement as HTMLButtonElement);\n    if (index < 0 || items.length === 0) return;\n\n    if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {\n      event.preventDefault();\n      const direction = event.key === 'ArrowDown' ? 1 : -1;\n      const nextIndex = (index + direction + items.length) % items.length;\n      itemRefs.current[nextIndex]?.focus();\n    }\n    if (event.key === 'Home' || event.key === 'End') {\n      event.preventDefault();\n      itemRefs.current[event.key === 'Home' ? 0 : items.length - 1]?.focus();\n    }\n  };\n\n  return (\n    <Popup>\n      <Popup.Trigger asChild>{trigger}</Popup.Trigger>\n      <Popup.Content className={className}>\n        <div onKeyDown={handleKeyDown} role=\"menu\" tabIndex={-1}>\n          {items.map((item, index) => (\n            <button\n              className=\"chayns-popup-list__item\"\n              key={`${item.text}-${index}`}\n              onClick={item.onClick}\n              ref={(element) => {\n                itemRefs.current[index] = element;\n              }}\n              role=\"menuitem\"\n              type=\"button\"\n            >\n              <ButtonIcon icon={item.icon} />\n              <span>{item.text}</span>\n            </button>\n          ))}\n        </div>\n      </Popup.Content>\n    </Popup>\n  );\n};\n\nexport default PopupList;\n"],"mappings":";;;;;AAMA,IAAM,aAAa,EAAE,WAAW,OAAO,cAA8B;CACnE,MAAM,WAAW,OAAqC,CAAC,CAAC;CAExD,MAAM,iBAAiB,UAAyC;EAC9D,MAAM,QAAQ,SAAS,QAAQ,QAAQ,SAAS,aAAkC;EAClF,IAAI,QAAQ,KAAK,MAAM,WAAW,GAAG;EAErC,IAAI,MAAM,QAAQ,eAAe,MAAM,QAAQ,WAAW;GACxD,MAAM,eAAe;GAErB,MAAM,aAAa,SADD,MAAM,QAAQ,cAAc,IAAI,MACX,MAAM,UAAU,MAAM;GAC7D,SAAS,QAAQ,UAAU,EAAE,MAAM;EACrC;EACA,IAAI,MAAM,QAAQ,UAAU,MAAM,QAAQ,OAAO;GAC/C,MAAM,eAAe;GACrB,SAAS,QAAQ,MAAM,QAAQ,SAAS,IAAI,MAAM,SAAS,EAAE,EAAE,MAAM;EACvE;CACF;CAEA,OACE,qBAAC,eAAD,EAAA,UAAA,CACE,oBAAC,cAAM,SAAP;EAAe,SAAA;EAAS,UAAA;CAAuB,CAAA,GAC/C,oBAAC,cAAM,SAAP;EAA0B;EACxB,UAAA,oBAAC,OAAD;GAAK,WAAW;GAAe,MAAK;GAAO,UAAU;GAClD,UAAA,MAAM,KAAK,MAAM,UAChB,qBAAC,UAAD;IACE,WAAU;IAEV,SAAS,KAAK;IACd,MAAM,YAAY;KAChB,SAAS,QAAQ,SAAS;IAC5B;IACA,MAAK;IACL,MAAK;IARP,UAAA,CAUE,oBAAC,YAAD,EAAY,MAAM,KAAK,KAAO,CAAA,GAC9B,oBAAC,QAAD,EAAA,UAAO,KAAK,KAAW,CAAA,CACjB;GAVD,GAAA,GAAG,KAAK,KAAK,GAAG,OAUf,CACT;EACE,CAAA;CACQ,CAAA,CACV,EAAA,CAAA;AAEX"}

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

@@ -0,0 +1,6 @@
+import type { RadioGroupProps, RadioProps } from './RadioGroup.types.js';
+declare const RadioGroup: import("react").ForwardRefExoticComponent<Omit<RadioGroupProps, "ref"> & import("react").RefAttributes<HTMLFieldSetElement>> & {
+    Radio: import("react").ForwardRefExoticComponent<Omit<RadioProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+};
+export default RadioGroup;
+//# sourceMappingURL=RadioGroup.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroup.d.ts","sourceRoot":"","sources":["../../../src/components/radio-group/RadioGroup.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAoEzE,QAAA,MAAM,UAAU;;CAA2C,CAAC;AAE5D,eAAe,UAAU,CAAC"}

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

@@ -0,0 +1,69 @@
+import { RadioGroupContext, useRadioGroupContext } from "./RadioGroupContext.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useState } from "react";
+//#region src/components/radio-group/RadioGroup.tsx
+var Radio = forwardRef(function Radio({ children, className, disabled, value, ...inputProps }, ref) {
+	const group = useRadioGroupContext();
+	const isDisabled = group.disabled || disabled === true;
+	const inputClassName = ["chayns-radio__input", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsxs("label", {
+		className: "chayns-radio",
+		children: [
+			/* @__PURE__ */ jsx("input", {
+				...inputProps,
+				checked: group.value === value,
+				className: inputClassName,
+				disabled: isDisabled,
+				name: group.name,
+				onChange: () => group.selectValue(value),
+				ref,
+				type: "radio",
+				value
+			}),
+			/* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				className: "chayns-radio__control"
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "chayns-radio__label",
+				children
+			})
+		]
+	});
+});
+var RadioGroupRoot = forwardRef(function RadioGroupRoot({ children, className, defaultValue, disabled, label, name, onValueChange, value, ...fieldsetProps }, ref) {
+	const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+	const isControlled = value !== void 0;
+	const selectedValue = isControlled ? value : uncontrolledValue;
+	const resolvedClassName = ["chayns-radio-group", className].filter(Boolean).join(" ");
+	function selectValue(nextValue) {
+		if (!isControlled) setUncontrolledValue(nextValue);
+		onValueChange?.(nextValue);
+	}
+	return /* @__PURE__ */ jsx(RadioGroupContext.Provider, {
+		value: {
+			disabled: disabled === true,
+			name,
+			selectValue,
+			value: selectedValue
+		},
+		children: /* @__PURE__ */ jsxs("fieldset", {
+			...fieldsetProps,
+			className: resolvedClassName,
+			disabled,
+			ref,
+			children: [/* @__PURE__ */ jsx("legend", {
+				className: "chayns-radio-group__legend",
+				children: label
+			}), /* @__PURE__ */ jsx("div", {
+				className: "chayns-radio-group__options",
+				children
+			})]
+		})
+	});
+});
+var RadioGroup = Object.assign(RadioGroupRoot, { Radio });
+//#endregion
+export { RadioGroup as default };
+
+//# sourceMappingURL=RadioGroup.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroup.js","names":[],"sources":["../../../src/components/radio-group/RadioGroup.tsx"],"sourcesContent":["import { forwardRef, useState } from 'react';\n\nimport { RadioGroupContext, useRadioGroupContext } from './RadioGroupContext.js';\nimport type { RadioGroupProps, RadioProps } from './RadioGroup.types.js';\n\nconst Radio = forwardRef<HTMLInputElement, RadioProps>(function Radio(\n  { children, className, disabled, value, ...inputProps },\n  ref,\n) {\n  const group = useRadioGroupContext();\n  const isDisabled = group.disabled || disabled === true;\n  const inputClassName = ['chayns-radio__input', className].filter(Boolean).join(' ');\n\n  return (\n    <label className=\"chayns-radio\">\n      <input\n        {...inputProps}\n        checked={group.value === value}\n        className={inputClassName}\n        disabled={isDisabled}\n        name={group.name}\n        onChange={() => group.selectValue(value)}\n        ref={ref}\n        type=\"radio\"\n        value={value}\n      />\n      <span aria-hidden=\"true\" className=\"chayns-radio__control\" />\n      <span className=\"chayns-radio__label\">{children}</span>\n    </label>\n  );\n});\n\nconst RadioGroupRoot = forwardRef<HTMLFieldSetElement, RadioGroupProps>(function RadioGroupRoot(\n  {\n    children,\n    className,\n    defaultValue,\n    disabled,\n    label,\n    name,\n    onValueChange,\n    value,\n    ...fieldsetProps\n  },\n  ref,\n) {\n  const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);\n  const isControlled = value !== undefined;\n  const selectedValue = isControlled ? value : uncontrolledValue;\n  const resolvedClassName = ['chayns-radio-group', className].filter(Boolean).join(' ');\n\n  function selectValue(nextValue: string) {\n    if (!isControlled) {\n      setUncontrolledValue(nextValue);\n    }\n\n    onValueChange?.(nextValue);\n  }\n\n  return (\n    <RadioGroupContext.Provider\n      value={{ disabled: disabled === true, name, selectValue, value: selectedValue }}\n    >\n      <fieldset {...fieldsetProps} className={resolvedClassName} disabled={disabled} ref={ref}>\n        <legend className=\"chayns-radio-group__legend\">{label}</legend>\n        <div className=\"chayns-radio-group__options\">{children}</div>\n      </fieldset>\n    </RadioGroupContext.Provider>\n  );\n});\n\nconst RadioGroup = Object.assign(RadioGroupRoot, { Radio });\n\nexport default RadioGroup;\n"],"mappings":";;;;AAKA,IAAM,QAAQ,WAAyC,SAAS,MAC9D,EAAE,UAAU,WAAW,UAAU,OAAO,GAAG,cAC3C,KACA;CACA,MAAM,QAAQ,qBAAqB;CACnC,MAAM,aAAa,MAAM,YAAY,aAAa;CAClD,MAAM,iBAAiB,CAAC,uBAAuB,SAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;CAElF,OACE,qBAAC,SAAD;EAAO,WAAU;EAAjB,UAAA;GACE,oBAAC,SAAD;IACE,GAAI;IACJ,SAAS,MAAM,UAAU;IACzB,WAAW;IACX,UAAU;IACV,MAAM,MAAM;IACZ,gBAAgB,MAAM,YAAY,KAAK;IAClC;IACL,MAAK;IACE;GACR,CAAA;GACD,oBAAC,QAAD;IAAM,eAAY;IAAO,WAAU;GAAyB,CAAA;GAC5D,oBAAC,QAAD;IAAM,WAAU;IAAuB;GAAe,CAAA;EACjD;;AAEX,CAAC;AAED,IAAM,iBAAiB,WAAiD,SAAS,eAC/E,EACE,UACA,WACA,cACA,UACA,OACA,MACA,eACA,OACA,GAAG,iBAEL,KACA;CACA,MAAM,CAAC,mBAAmB,wBAAwB,SAAS,YAAY;CACvE,MAAM,eAAe,UAAU,KAAA;CAC/B,MAAM,gBAAgB,eAAe,QAAQ;CAC7C,MAAM,oBAAoB,CAAC,sBAAsB,SAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;CAEpF,SAAS,YAAY,WAAmB;EACtC,IAAI,CAAC,cACH,qBAAqB,SAAS;EAGhC,gBAAgB,SAAS;CAC3B;CAEA,OACE,oBAAC,kBAAkB,UAAnB;EACE,OAAO;GAAE,UAAU,aAAa;GAAM;GAAM;GAAa,OAAO;EAAc;EAE9E,UAAA,qBAAC,YAAD;GAAU,GAAI;GAAe,WAAW;GAA6B;GAAe;GAApF,UAAA,CACE,oBAAC,UAAD;IAAQ,WAAU;IAA8B,UAAA;GAAc,CAAA,GAC9D,oBAAC,OAAD;IAAK,WAAU;IAA+B;GAAc,CAAA,CACpD;;CACgB,CAAA;AAEhC,CAAC;AAED,IAAM,aAAa,OAAO,OAAO,gBAAgB,EAAE,MAAM,CAAC"}

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

@@ -0,0 +1,30 @@
+import type { ComponentPropsWithRef, ReactNode } from 'react';
+/** Props for a labelled native radio fieldset. */
+export interface RadioGroupProps extends Omit<ComponentPropsWithRef<'fieldset'>, 'children' | 'name'> {
+    /** Visible, localized group label rendered as its legend. */
+    label: Exclude<ReactNode, boolean | null | undefined>;
+    /** Shared native name forwarded to every Radio. */
+    name: string;
+    /** Controlled selected option value. */
+    value?: string;
+    /** Initial selected option value for uncontrolled use. */
+    defaultValue?: string;
+    /** Called after native radio selection changes. */
+    onValueChange?: (value: string) => void;
+    /** RadioGroup.Radio children. */
+    children: ReactNode;
+}
+/** Props for a visible-label radio option inside RadioGroup. */
+export interface RadioProps extends Omit<ComponentPropsWithRef<'input'>, 'children' | 'type' | 'name' | 'checked' | 'defaultChecked' | 'onChange'> {
+    /** Stable value that identifies this option in its group. */
+    value: string;
+    /** Visible, localized option label. */
+    children: Exclude<ReactNode, boolean | null | undefined>;
+    /** RadioGroup owns the input type and selection relationship. */
+    type?: never;
+    name?: never;
+    checked?: never;
+    defaultChecked?: never;
+    onChange?: never;
+}
+//# sourceMappingURL=RadioGroup.types.d.ts.map

package/dist/components/radio-group/RadioGroup.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroup.types.d.ts","sourceRoot":"","sources":["../../../src/components/radio-group/RadioGroup.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9D,kDAAkD;AAClD,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAC3C,qBAAqB,CAAC,UAAU,CAAC,EACjC,UAAU,GAAG,MAAM,CACpB;IACC,6DAA6D;IAC7D,KAAK,EAAE,OAAO,CAAC,SAAS,EAAE,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;IACtD,mDAAmD;IACnD,IAAI,EAAE,MAAM,CAAC;IACb,wCAAwC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0DAA0D;IAC1D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mDAAmD;IACnD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,iCAAiC;IACjC,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,gEAAgE;AAChE,MAAM,WAAW,UAAW,SAAQ,IAAI,CACtC,qBAAqB,CAAC,OAAO,CAAC,EAC9B,UAAU,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,gBAAgB,GAAG,UAAU,CACzE;IACC,6DAA6D;IAC7D,KAAK,EAAE,MAAM,CAAC;IACd,uCAAuC;IACvC,QAAQ,EAAE,OAAO,CAAC,SAAS,EAAE,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;IAEzD,iEAAiE;IACjE,IAAI,CAAC,EAAE,KAAK,CAAC;IACb,IAAI,CAAC,EAAE,KAAK,CAAC;IACb,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB,cAAc,CAAC,EAAE,KAAK,CAAC;IACvB,QAAQ,CAAC,EAAE,KAAK,CAAC;CAClB"}

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

@@ -0,0 +1,11 @@
+interface RadioGroupContextValue {
+    disabled: boolean;
+    name: string;
+    selectValue: (value: string) => void;
+    value: string | undefined;
+}
+declare const RadioGroupContext: import("react").Context<RadioGroupContextValue | null>;
+declare function useRadioGroupContext(): RadioGroupContextValue;
+export { RadioGroupContext, useRadioGroupContext };
+export type { RadioGroupContextValue };
+//# sourceMappingURL=RadioGroupContext.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroupContext.d.ts","sourceRoot":"","sources":["../../../src/components/radio-group/RadioGroupContext.ts"],"names":[],"mappings":"AAEA,UAAU,sBAAsB;IAC9B,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;CAC3B;AAED,QAAA,MAAM,iBAAiB,wDAAqD,CAAC;AAE7E,iBAAS,oBAAoB,2BAQ5B;AAED,OAAO,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,CAAC;AACnD,YAAY,EAAE,sBAAsB,EAAE,CAAC"}

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

@@ -0,0 +1,12 @@
+import { createContext, useContext } from "react";
+//#region src/components/radio-group/RadioGroupContext.ts
+var RadioGroupContext = createContext(null);
+function useRadioGroupContext() {
+	const context = useContext(RadioGroupContext);
+	if (context === null) throw new Error("RadioGroup.Radio must be rendered within RadioGroup.");
+	return context;
+}
+//#endregion
+export { RadioGroupContext, useRadioGroupContext };
+
+//# sourceMappingURL=RadioGroupContext.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroupContext.js","names":[],"sources":["../../../src/components/radio-group/RadioGroupContext.ts"],"sourcesContent":["import { createContext, useContext } from 'react';\n\ninterface RadioGroupContextValue {\n  disabled: boolean;\n  name: string;\n  selectValue: (value: string) => void;\n  value: string | undefined;\n}\n\nconst RadioGroupContext = createContext<RadioGroupContextValue | null>(null);\n\nfunction useRadioGroupContext() {\n  const context = useContext(RadioGroupContext);\n\n  if (context === null) {\n    throw new Error('RadioGroup.Radio must be rendered within RadioGroup.');\n  }\n\n  return context;\n}\n\nexport { RadioGroupContext, useRadioGroupContext };\nexport type { RadioGroupContextValue };\n"],"mappings":";;AASA,IAAM,oBAAoB,cAA6C,IAAI;AAE3E,SAAS,uBAAuB;CAC9B,MAAM,UAAU,WAAW,iBAAiB;CAE5C,IAAI,YAAY,MACd,MAAM,IAAI,MAAM,sDAAsD;CAGxE,OAAO;AACT"}

package/dist/components/segmented-control/SegmentedControl.d.ts

@@ -0,0 +1,16 @@
+import type { SegmentProps } from './SegmentedControl.types.js';
+declare const SegmentedControl: import("react").ForwardRefExoticComponent<(Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "children" | "role" | "aria-labelledby"> & import("./SegmentedControl.types.js").ControlledSelection & {
+    label: Exclude<import("react").ReactNode, boolean | null | undefined>;
+    children: import("react").ReactNode;
+    role?: never;
+    'aria-labelledby'?: never;
+}, "ref"> | Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "children" | "role" | "aria-labelledby"> & import("./SegmentedControl.types.js").UncontrolledSelection & {
+    label: Exclude<import("react").ReactNode, boolean | null | undefined>;
+    children: import("react").ReactNode;
+    role?: never;
+    'aria-labelledby'?: never;
+}, "ref">) & import("react").RefAttributes<HTMLDivElement>> & {
+    Segment: import("react").ForwardRefExoticComponent<Omit<SegmentProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+};
+export default SegmentedControl;
+//# sourceMappingURL=SegmentedControl.d.ts.map

package/dist/components/segmented-control/SegmentedControl.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedControl.d.ts","sourceRoot":"","sources":["../../../src/components/segmented-control/SegmentedControl.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAyB,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAqMvF,QAAA,MAAM,gBAAgB;;;;;;;;;;;;CAAmD,CAAC;AAE1E,eAAe,gBAAgB,CAAC"}