@charcoal-ui/react 6.0.0-rc.7 → 6.0.0-rc.9

package/dist/components/Carousel/useCarouselScroller.cjs

@@ -0,0 +1,149 @@
+"use client";
+const require_runtime = require('../../_virtual/_rolldown/runtime.cjs');
+const require_useIsomorphicLayoutEffect = require('../../_lib/useIsomorphicLayoutEffect.cjs');
+let react = require("react");
+
+//#region src/components/Carousel/useCarouselScroller.ts
+const INTERACTION_EVENTS = [
+	"pointerdown",
+	"wheel",
+	"touchstart"
+];
+function useCarouselScroller(scrollerRef, store, itemCount, options) {
+	const { align, offset, scrollStep, onScroll, onResize, onScrollStateChange } = options;
+	const initialScrollActive = (0, react.useRef)(true);
+	const callbacksRef = (0, react.useRef)({
+		onScroll,
+		onResize,
+		onScrollStateChange
+	});
+	(0, react.useEffect)(() => {
+		callbacksRef.current = {
+			onScroll,
+			onResize,
+			onScrollStateChange
+		};
+	});
+	const prevCanScroll = (0, react.useRef)(null);
+	const updateScrollState = (0, react.useCallback)(() => {
+		const el = scrollerRef.current;
+		if (!el) return;
+		const { scrollLeft, scrollWidth, clientWidth } = el;
+		const canPrev = scrollLeft > 1;
+		const canNext = scrollLeft < scrollWidth - clientWidth - 1;
+		store.dispatch({
+			type: "setScrollState",
+			canPrev,
+			canNext
+		});
+		const canScroll = canPrev || canNext;
+		if (prevCanScroll.current !== canScroll) {
+			prevCanScroll.current = canScroll;
+			callbacksRef.current.onScrollStateChange?.(canScroll);
+		}
+	}, [scrollerRef, store]);
+	const applyInitialScroll = (0, react.useCallback)(() => {
+		const el = scrollerRef.current;
+		if (!el || !initialScrollActive.current) return;
+		const maxScroll = el.scrollWidth - el.clientWidth;
+		let left = offset;
+		switch (align) {
+			case "center":
+				left = maxScroll / 2 + offset;
+				break;
+			case "right":
+				left = maxScroll + offset;
+				break;
+		}
+		el.scrollTo({
+			left: Math.max(0, Math.min(left, maxScroll)),
+			behavior: "instant"
+		});
+	}, [
+		scrollerRef,
+		align,
+		offset
+	]);
+	require_useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
+		const el = scrollerRef.current;
+		if (!el) return;
+		updateScrollState();
+		const handleScroll = () => {
+			updateScrollState();
+			callbacksRef.current.onScroll?.(el.scrollLeft);
+		};
+		el.addEventListener("scroll", handleScroll, { passive: true });
+		return () => el.removeEventListener("scroll", handleScroll);
+	}, [
+		scrollerRef,
+		updateScrollState,
+		itemCount
+	]);
+	require_useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
+		const el = scrollerRef.current;
+		if (!el || typeof ResizeObserver === "undefined") return;
+		const ro = new ResizeObserver(() => {
+			applyInitialScroll();
+			updateScrollState();
+			callbacksRef.current.onResize?.(el.clientWidth);
+		});
+		ro.observe(el);
+		return () => ro.disconnect();
+	}, [
+		scrollerRef,
+		applyInitialScroll,
+		updateScrollState
+	]);
+	require_useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
+		initialScrollActive.current = true;
+		applyInitialScroll();
+		updateScrollState();
+		const el = scrollerRef.current;
+		if (!el) return;
+		const stop = () => {
+			initialScrollActive.current = false;
+		};
+		for (const type of INTERACTION_EVENTS) el.addEventListener(type, stop, true);
+		return () => {
+			for (const type of INTERACTION_EVENTS) el.removeEventListener(type, stop, true);
+		};
+	}, [
+		scrollerRef,
+		applyInitialScroll,
+		updateScrollState,
+		itemCount
+	]);
+	const onItemResize = (0, react.useCallback)(() => {
+		applyInitialScroll();
+		updateScrollState();
+	}, [applyInitialScroll, updateScrollState]);
+	const resetScroll = (0, react.useCallback)(() => {
+		initialScrollActive.current = true;
+		applyInitialScroll();
+		updateScrollState();
+	}, [applyInitialScroll, updateScrollState]);
+	return {
+		scrollByStep: (0, react.useCallback)((direction) => {
+			const el = scrollerRef.current;
+			if (!el) return;
+			initialScrollActive.current = false;
+			const { clientWidth, scrollWidth, scrollLeft } = el;
+			const delta = typeof scrollStep === "function" ? scrollStep({
+				clientWidth,
+				scrollWidth,
+				scrollLeft,
+				direction
+			}) : clientWidth * scrollStep;
+			el.scrollBy({
+				left: direction === "next" ? delta : -delta,
+				behavior: "smooth"
+			});
+		}, [scrollerRef, scrollStep]),
+		onItemResize,
+		resetScroll
+	};
+}
+
+//#endregion
+exports.useCarouselScroller = useCarouselScroller;
+//# sourceMappingURL=useCarouselScroller.cjs.map

package/dist/components/Carousel/useCarouselScroller.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCarouselScroller.cjs","names":["useCallback","useEffect","useRef","RefObject","useIsomorphicLayoutEffect","CarouselStore","ScrollAlign","ScrollStep","INTERACTION_EVENTS","const","CarouselScrollerOptions","Readonly","align","offset","scrollStep","onScroll","left","onResize","width","onScrollStateChange","canScroll","CarouselScrollerResult","scrollByStep","direction","onItemResize","resetScroll","useCarouselScroller","scrollerRef","HTMLElement","store","itemCount","options","initialScrollActive","callbacksRef","current","prevCanScroll","updateScrollState","el","scrollLeft","scrollWidth","clientWidth","canPrev","canNext","dispatch","type","applyInitialScroll","maxScroll","scrollTo","Math","max","min","behavior","handleScroll","addEventListener","passive","removeEventListener","ResizeObserver","ro","observe","disconnect","stop","delta","scrollBy"],"sources":["../../../src/components/Carousel/useCarouselScroller.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, type RefObject } from 'react'\nimport { useIsomorphicLayoutEffect } from '../../_lib/useIsomorphicLayoutEffect'\nimport type { CarouselStore } from './carouselStore'\nimport type { ScrollAlign, ScrollStep } from './index'\n\nconst INTERACTION_EVENTS = ['pointerdown', 'wheel', 'touchstart'] as const\n\nexport type CarouselScrollerOptions = Readonly<{\n  align: ScrollAlign\n  offset: number\n  scrollStep: ScrollStep\n  onScroll?: (left: number) => void\n  onResize?: (width: number) => void\n  onScrollStateChange?: (canScroll: boolean) => void\n}>\n\nexport type CarouselScrollerResult = Readonly<{\n  scrollByStep: (direction: 'prev' | 'next') => void\n  onItemResize: () => void\n  resetScroll: () => void\n}>\n\nexport function useCarouselScroller(\n  scrollerRef: RefObject<HTMLElement | null>,\n  store: CarouselStore,\n  itemCount: number,\n  options: CarouselScrollerOptions,\n): CarouselScrollerResult {\n  const { align, offset, scrollStep, onScroll, onResize, onScrollStateChange } =\n    options\n  const initialScrollActive = useRef(true)\n\n  // コールバックは最新参照を ref に保持し、リスナーの貼り直しを避ける。\n  const callbacksRef = useRef({ onScroll, onResize, onScrollStateChange })\n  useEffect(() => {\n    callbacksRef.current = { onScroll, onResize, onScrollStateChange }\n  })\n\n  // onScrollStateChange は canScroll(=canPrev||canNext) が変化した時だけ発火する。\n  const prevCanScroll = useRef<boolean | null>(null)\n\n  const updateScrollState = useCallback(() => {\n    const el = scrollerRef.current\n    if (!el) return\n    const { scrollLeft, scrollWidth, clientWidth } = el\n    const canPrev = scrollLeft > 1\n    const canNext = scrollLeft < scrollWidth - clientWidth - 1\n    store.dispatch({ type: 'setScrollState', canPrev, canNext })\n    const canScroll = canPrev || canNext\n    if (prevCanScroll.current !== canScroll) {\n      prevCanScroll.current = canScroll\n      callbacksRef.current.onScrollStateChange?.(canScroll)\n    }\n  }, [scrollerRef, store])\n\n  const applyInitialScroll = useCallback(() => {\n    const el = scrollerRef.current\n    if (!el || !initialScrollActive.current) return\n    const maxScroll = el.scrollWidth - el.clientWidth\n    let left = offset\n    switch (align) {\n      case 'center':\n        left = maxScroll / 2 + offset\n        break\n      case 'right':\n        left = maxScroll + offset\n        break\n    }\n    // scrollLeft 代入は CSS の scroll-behavior: smooth の対象になり\n    // 初期位置決めがアニメーションしてしまうため、instant で確定させる。\n    el.scrollTo({\n      left: Math.max(0, Math.min(left, maxScroll)),\n      behavior: 'instant',\n    })\n  }, [scrollerRef, align, offset])\n\n  // canPrev/canNext: scroll で更新。onScroll もここから発火。itemCount 変化で貼り直し。\n  useIsomorphicLayoutEffect(() => {\n    const el = scrollerRef.current\n    if (!el) return\n    updateScrollState()\n    const handleScroll = () => {\n      updateScrollState()\n      callbacksRef.current.onScroll?.(el.scrollLeft)\n    }\n    el.addEventListener('scroll', handleScroll, { passive: true })\n    return () => el.removeEventListener('scroll', handleScroll)\n  }, [scrollerRef, updateScrollState, itemCount])\n\n  // scroller 幅の変化で onResize(clientWidth) を通知し、状態と初期位置を再計算する。\n  useIsomorphicLayoutEffect(() => {\n    const el = scrollerRef.current\n    if (!el || typeof ResizeObserver === 'undefined') return\n    const ro = new ResizeObserver(() => {\n      applyInitialScroll()\n      updateScrollState()\n      callbacksRef.current.onResize?.(el.clientWidth)\n    })\n    ro.observe(el)\n    return () => ro.disconnect()\n  }, [scrollerRef, applyInitialScroll, updateScrollState])\n\n  // 初期スクロール適用 + ユーザー操作で打ち切り。\n  useIsomorphicLayoutEffect(() => {\n    initialScrollActive.current = true\n    applyInitialScroll()\n    // 初期位置適用後の scrollLeft で canPrev/canNext を確定させる\n    // （center/right 初期化で scroll イベント待ちにならないように）。\n    updateScrollState()\n    const el = scrollerRef.current\n    if (!el) return\n    const stop = () => {\n      initialScrollActive.current = false\n    }\n    for (const type of INTERACTION_EVENTS) el.addEventListener(type, stop, true)\n    return () => {\n      for (const type of INTERACTION_EVENTS)\n        el.removeEventListener(type, stop, true)\n    }\n  }, [scrollerRef, applyInitialScroll, updateScrollState, itemCount])\n\n  const onItemResize = useCallback(() => {\n    applyInitialScroll()\n    updateScrollState()\n  }, [applyInitialScroll, updateScrollState])\n\n  // defaultScroll の初期位置へ戻す（命令的 API: CarouselHandlerRef.resetScroll）。\n  const resetScroll = useCallback(() => {\n    initialScrollActive.current = true\n    applyInitialScroll()\n    updateScrollState()\n  }, [applyInitialScroll, updateScrollState])\n\n  const scrollByStep = useCallback(\n    (direction: 'prev' | 'next') => {\n      const el = scrollerRef.current\n      if (!el) return\n      initialScrollActive.current = false\n      const { clientWidth, scrollWidth, scrollLeft } = el\n      // 進む量(px)の絶対値。符号は direction で付ける。\n      const delta =\n        typeof scrollStep === 'function'\n          ? scrollStep({ clientWidth, scrollWidth, scrollLeft, direction })\n          : clientWidth * scrollStep\n      el.scrollBy({\n        left: direction === 'next' ? delta : -delta,\n        behavior: 'smooth',\n      })\n    },\n    [scrollerRef, scrollStep],\n  )\n\n  return { scrollByStep, onItemResize, resetScroll }\n}\n"],"mappings":"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"}

package/dist/components/Carousel/useCarouselScroller.js

@@ -0,0 +1,148 @@
+"use client";
+import { useIsomorphicLayoutEffect } from "../../_lib/useIsomorphicLayoutEffect.js";
+import { useCallback, useEffect, useRef } from "react";
+
+//#region src/components/Carousel/useCarouselScroller.ts
+const INTERACTION_EVENTS = [
+	"pointerdown",
+	"wheel",
+	"touchstart"
+];
+function useCarouselScroller(scrollerRef, store, itemCount, options) {
+	const { align, offset, scrollStep, onScroll, onResize, onScrollStateChange } = options;
+	const initialScrollActive = useRef(true);
+	const callbacksRef = useRef({
+		onScroll,
+		onResize,
+		onScrollStateChange
+	});
+	useEffect(() => {
+		callbacksRef.current = {
+			onScroll,
+			onResize,
+			onScrollStateChange
+		};
+	});
+	const prevCanScroll = useRef(null);
+	const updateScrollState = useCallback(() => {
+		const el = scrollerRef.current;
+		if (!el) return;
+		const { scrollLeft, scrollWidth, clientWidth } = el;
+		const canPrev = scrollLeft > 1;
+		const canNext = scrollLeft < scrollWidth - clientWidth - 1;
+		store.dispatch({
+			type: "setScrollState",
+			canPrev,
+			canNext
+		});
+		const canScroll = canPrev || canNext;
+		if (prevCanScroll.current !== canScroll) {
+			prevCanScroll.current = canScroll;
+			callbacksRef.current.onScrollStateChange?.(canScroll);
+		}
+	}, [scrollerRef, store]);
+	const applyInitialScroll = useCallback(() => {
+		const el = scrollerRef.current;
+		if (!el || !initialScrollActive.current) return;
+		const maxScroll = el.scrollWidth - el.clientWidth;
+		let left = offset;
+		switch (align) {
+			case "center":
+				left = maxScroll / 2 + offset;
+				break;
+			case "right":
+				left = maxScroll + offset;
+				break;
+		}
+		el.scrollTo({
+			left: Math.max(0, Math.min(left, maxScroll)),
+			behavior: "instant"
+		});
+	}, [
+		scrollerRef,
+		align,
+		offset
+	]);
+	useIsomorphicLayoutEffect(() => {
+		const el = scrollerRef.current;
+		if (!el) return;
+		updateScrollState();
+		const handleScroll = () => {
+			updateScrollState();
+			callbacksRef.current.onScroll?.(el.scrollLeft);
+		};
+		el.addEventListener("scroll", handleScroll, { passive: true });
+		return () => el.removeEventListener("scroll", handleScroll);
+	}, [
+		scrollerRef,
+		updateScrollState,
+		itemCount
+	]);
+	useIsomorphicLayoutEffect(() => {
+		const el = scrollerRef.current;
+		if (!el || typeof ResizeObserver === "undefined") return;
+		const ro = new ResizeObserver(() => {
+			applyInitialScroll();
+			updateScrollState();
+			callbacksRef.current.onResize?.(el.clientWidth);
+		});
+		ro.observe(el);
+		return () => ro.disconnect();
+	}, [
+		scrollerRef,
+		applyInitialScroll,
+		updateScrollState
+	]);
+	useIsomorphicLayoutEffect(() => {
+		initialScrollActive.current = true;
+		applyInitialScroll();
+		updateScrollState();
+		const el = scrollerRef.current;
+		if (!el) return;
+		const stop = () => {
+			initialScrollActive.current = false;
+		};
+		for (const type of INTERACTION_EVENTS) el.addEventListener(type, stop, true);
+		return () => {
+			for (const type of INTERACTION_EVENTS) el.removeEventListener(type, stop, true);
+		};
+	}, [
+		scrollerRef,
+		applyInitialScroll,
+		updateScrollState,
+		itemCount
+	]);
+	const onItemResize = useCallback(() => {
+		applyInitialScroll();
+		updateScrollState();
+	}, [applyInitialScroll, updateScrollState]);
+	const resetScroll = useCallback(() => {
+		initialScrollActive.current = true;
+		applyInitialScroll();
+		updateScrollState();
+	}, [applyInitialScroll, updateScrollState]);
+	return {
+		scrollByStep: useCallback((direction) => {
+			const el = scrollerRef.current;
+			if (!el) return;
+			initialScrollActive.current = false;
+			const { clientWidth, scrollWidth, scrollLeft } = el;
+			const delta = typeof scrollStep === "function" ? scrollStep({
+				clientWidth,
+				scrollWidth,
+				scrollLeft,
+				direction
+			}) : clientWidth * scrollStep;
+			el.scrollBy({
+				left: direction === "next" ? delta : -delta,
+				behavior: "smooth"
+			});
+		}, [scrollerRef, scrollStep]),
+		onItemResize,
+		resetScroll
+	};
+}
+
+//#endregion
+export { useCarouselScroller };
+//# sourceMappingURL=useCarouselScroller.js.map

package/dist/components/Carousel/useCarouselScroller.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCarouselScroller.js","names":["useCallback","useEffect","useRef","RefObject","useIsomorphicLayoutEffect","CarouselStore","ScrollAlign","ScrollStep","INTERACTION_EVENTS","const","CarouselScrollerOptions","Readonly","align","offset","scrollStep","onScroll","left","onResize","width","onScrollStateChange","canScroll","CarouselScrollerResult","scrollByStep","direction","onItemResize","resetScroll","useCarouselScroller","scrollerRef","HTMLElement","store","itemCount","options","initialScrollActive","callbacksRef","current","prevCanScroll","updateScrollState","el","scrollLeft","scrollWidth","clientWidth","canPrev","canNext","dispatch","type","applyInitialScroll","maxScroll","scrollTo","Math","max","min","behavior","handleScroll","addEventListener","passive","removeEventListener","ResizeObserver","ro","observe","disconnect","stop","delta","scrollBy"],"sources":["../../../src/components/Carousel/useCarouselScroller.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, type RefObject } from 'react'\nimport { useIsomorphicLayoutEffect } from '../../_lib/useIsomorphicLayoutEffect'\nimport type { CarouselStore } from './carouselStore'\nimport type { ScrollAlign, ScrollStep } from './index'\n\nconst INTERACTION_EVENTS = ['pointerdown', 'wheel', 'touchstart'] as const\n\nexport type CarouselScrollerOptions = Readonly<{\n  align: ScrollAlign\n  offset: number\n  scrollStep: ScrollStep\n  onScroll?: (left: number) => void\n  onResize?: (width: number) => void\n  onScrollStateChange?: (canScroll: boolean) => void\n}>\n\nexport type CarouselScrollerResult = Readonly<{\n  scrollByStep: (direction: 'prev' | 'next') => void\n  onItemResize: () => void\n  resetScroll: () => void\n}>\n\nexport function useCarouselScroller(\n  scrollerRef: RefObject<HTMLElement | null>,\n  store: CarouselStore,\n  itemCount: number,\n  options: CarouselScrollerOptions,\n): CarouselScrollerResult {\n  const { align, offset, scrollStep, onScroll, onResize, onScrollStateChange } =\n    options\n  const initialScrollActive = useRef(true)\n\n  // コールバックは最新参照を ref に保持し、リスナーの貼り直しを避ける。\n  const callbacksRef = useRef({ onScroll, onResize, onScrollStateChange })\n  useEffect(() => {\n    callbacksRef.current = { onScroll, onResize, onScrollStateChange }\n  })\n\n  // onScrollStateChange は canScroll(=canPrev||canNext) が変化した時だけ発火する。\n  const prevCanScroll = useRef<boolean | null>(null)\n\n  const updateScrollState = useCallback(() => {\n    const el = scrollerRef.current\n    if (!el) return\n    const { scrollLeft, scrollWidth, clientWidth } = el\n    const canPrev = scrollLeft > 1\n    const canNext = scrollLeft < scrollWidth - clientWidth - 1\n    store.dispatch({ type: 'setScrollState', canPrev, canNext })\n    const canScroll = canPrev || canNext\n    if (prevCanScroll.current !== canScroll) {\n      prevCanScroll.current = canScroll\n      callbacksRef.current.onScrollStateChange?.(canScroll)\n    }\n  }, [scrollerRef, store])\n\n  const applyInitialScroll = useCallback(() => {\n    const el = scrollerRef.current\n    if (!el || !initialScrollActive.current) return\n    const maxScroll = el.scrollWidth - el.clientWidth\n    let left = offset\n    switch (align) {\n      case 'center':\n        left = maxScroll / 2 + offset\n        break\n      case 'right':\n        left = maxScroll + offset\n        break\n    }\n    // scrollLeft 代入は CSS の scroll-behavior: smooth の対象になり\n    // 初期位置決めがアニメーションしてしまうため、instant で確定させる。\n    el.scrollTo({\n      left: Math.max(0, Math.min(left, maxScroll)),\n      behavior: 'instant',\n    })\n  }, [scrollerRef, align, offset])\n\n  // canPrev/canNext: scroll で更新。onScroll もここから発火。itemCount 変化で貼り直し。\n  useIsomorphicLayoutEffect(() => {\n    const el = scrollerRef.current\n    if (!el) return\n    updateScrollState()\n    const handleScroll = () => {\n      updateScrollState()\n      callbacksRef.current.onScroll?.(el.scrollLeft)\n    }\n    el.addEventListener('scroll', handleScroll, { passive: true })\n    return () => el.removeEventListener('scroll', handleScroll)\n  }, [scrollerRef, updateScrollState, itemCount])\n\n  // scroller 幅の変化で onResize(clientWidth) を通知し、状態と初期位置を再計算する。\n  useIsomorphicLayoutEffect(() => {\n    const el = scrollerRef.current\n    if (!el || typeof ResizeObserver === 'undefined') return\n    const ro = new ResizeObserver(() => {\n      applyInitialScroll()\n      updateScrollState()\n      callbacksRef.current.onResize?.(el.clientWidth)\n    })\n    ro.observe(el)\n    return () => ro.disconnect()\n  }, [scrollerRef, applyInitialScroll, updateScrollState])\n\n  // 初期スクロール適用 + ユーザー操作で打ち切り。\n  useIsomorphicLayoutEffect(() => {\n    initialScrollActive.current = true\n    applyInitialScroll()\n    // 初期位置適用後の scrollLeft で canPrev/canNext を確定させる\n    // （center/right 初期化で scroll イベント待ちにならないように）。\n    updateScrollState()\n    const el = scrollerRef.current\n    if (!el) return\n    const stop = () => {\n      initialScrollActive.current = false\n    }\n    for (const type of INTERACTION_EVENTS) el.addEventListener(type, stop, true)\n    return () => {\n      for (const type of INTERACTION_EVENTS)\n        el.removeEventListener(type, stop, true)\n    }\n  }, [scrollerRef, applyInitialScroll, updateScrollState, itemCount])\n\n  const onItemResize = useCallback(() => {\n    applyInitialScroll()\n    updateScrollState()\n  }, [applyInitialScroll, updateScrollState])\n\n  // defaultScroll の初期位置へ戻す（命令的 API: CarouselHandlerRef.resetScroll）。\n  const resetScroll = useCallback(() => {\n    initialScrollActive.current = true\n    applyInitialScroll()\n    updateScrollState()\n  }, [applyInitialScroll, updateScrollState])\n\n  const scrollByStep = useCallback(\n    (direction: 'prev' | 'next') => {\n      const el = scrollerRef.current\n      if (!el) return\n      initialScrollActive.current = false\n      const { clientWidth, scrollWidth, scrollLeft } = el\n      // 進む量(px)の絶対値。符号は direction で付ける。\n      const delta =\n        typeof scrollStep === 'function'\n          ? scrollStep({ clientWidth, scrollWidth, scrollLeft, direction })\n          : clientWidth * scrollStep\n      el.scrollBy({\n        left: direction === 'next' ? delta : -delta,\n        behavior: 'smooth',\n      })\n    },\n    [scrollerRef, scrollStep],\n  )\n\n  return { scrollByStep, onItemResize, resetScroll }\n}\n"],"mappings":"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"}

package/dist/components/Checkbox/CheckboxInput/index2.cjs

@@ -0,0 +1,29 @@
+"use client";
+const require_runtime = require('../../../_virtual/_rolldown/runtime.cjs');
+const require_useClassNames = require('../../../_lib/useClassNames.cjs');
+require('./index.cjs');
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/components/Checkbox/CheckboxInput/index.tsx
+const CheckboxInput = (0, react.forwardRef)(function CheckboxInput({ onChange, checked, invalid, className, rounded, ...props }, ref) {
+	const handleChange = (0, react.useCallback)((e) => {
+		const el = e.currentTarget;
+		onChange?.(el.checked);
+	}, [onChange]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+		className: require_useClassNames.useClassNames("charcoal-checkbox-input", className),
+		ref,
+		type: "checkbox",
+		onChange: handleChange,
+		"aria-invalid": invalid,
+		checked,
+		"data-rounded": rounded,
+		...props
+	});
+});
+var CheckboxInput_default = (0, react.memo)(CheckboxInput);
+
+//#endregion
+exports.default = CheckboxInput_default;
+//# sourceMappingURL=index2.cjs.map

package/dist/components/Checkbox/CheckboxInput/index2.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index2.cjs","names":["forwardRef","memo","useCallback","useClassNames","CharcoalCheckboxInputProps","invalid","onChange","checked","rounded","InputProps","React","HTMLProps","HTMLInputElement","CheckboxInputProps","Omit","CheckboxInput","className","props","ref","handleChange","e","ChangeEvent","el","currentTarget","classNames"],"sources":["../../../../src/components/Checkbox/CheckboxInput/index.tsx"],"sourcesContent":["import './index.css'\n\nimport { forwardRef, memo, useCallback } from 'react'\nimport { useClassNames } from '../../../_lib/useClassNames'\n\ntype CharcoalCheckboxInputProps = {\n  invalid?: boolean\n  onChange?: (checked: boolean) => void\n  rounded?: boolean\n}\n\ntype InputProps = React.HTMLProps<HTMLInputElement>\n\nexport type CheckboxInputProps = CharcoalCheckboxInputProps &\n  Omit<InputProps, keyof CharcoalCheckboxInputProps | 'ref'>\n\nconst CheckboxInput = forwardRef<HTMLInputElement, CheckboxInputProps>(\n  function CheckboxInput(\n    { onChange, checked, invalid, className, rounded, ...props },\n    ref,\n  ) {\n    const handleChange = useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        const el = e.currentTarget\n        onChange?.(el.checked)\n      },\n      [onChange],\n    )\n\n    const classNames = useClassNames('charcoal-checkbox-input', className)\n\n    return (\n      <input\n        className={classNames}\n        ref={ref}\n        type=\"checkbox\"\n        onChange={handleChange}\n        aria-invalid={invalid}\n        checked={checked}\n        data-rounded={rounded}\n        {...props}\n      />\n    )\n  },\n)\n\nexport default memo(CheckboxInput)\n"],"mappings":";;;;;;;;AAgBA,MAAMe,sCACJ,SAASA,cACP,EAAET,UAAUC,SAASF,SAASW,WAAWR,SAAS,GAAGS,SACrDC,KACA;CACA,MAAMC,uCACHC,MAA2C;EAC1C,MAAME,KAAKF,EAAEG;EACbjB,WAAWgB,GAAGf,QAAQ;IAExB,CAACD,SACH,CAAC;CAID,OACE,2CAAC,SAAD;EACE,WAJeH,oCAAc,2BAA2Ba,UAInC;EAChBE;EACL,MAAK;EACL,UAAUC;EACV,gBAAcd;EACLE;EACT,gBAAcC;EACd,GAAIS;EACJ;EAGP;AAED,4CAAoBF,cAAc"}

package/dist/components/Checkbox/CheckboxInput/index2.js

@@ -0,0 +1,28 @@
+"use client";
+import { useClassNames } from "../../../_lib/useClassNames.js";
+/* empty css      */
+import { forwardRef, memo, useCallback } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/Checkbox/CheckboxInput/index.tsx
+const CheckboxInput = forwardRef(function CheckboxInput({ onChange, checked, invalid, className, rounded, ...props }, ref) {
+	const handleChange = useCallback((e) => {
+		const el = e.currentTarget;
+		onChange?.(el.checked);
+	}, [onChange]);
+	return /* @__PURE__ */ jsx("input", {
+		className: useClassNames("charcoal-checkbox-input", className),
+		ref,
+		type: "checkbox",
+		onChange: handleChange,
+		"aria-invalid": invalid,
+		checked,
+		"data-rounded": rounded,
+		...props
+	});
+});
+var CheckboxInput_default = memo(CheckboxInput);
+
+//#endregion
+export { CheckboxInput_default as default };
+//# sourceMappingURL=index2.js.map

package/dist/components/Checkbox/CheckboxInput/index2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index2.js","names":["forwardRef","memo","useCallback","useClassNames","CharcoalCheckboxInputProps","invalid","onChange","checked","rounded","InputProps","React","HTMLProps","HTMLInputElement","CheckboxInputProps","Omit","CheckboxInput","className","props","ref","handleChange","e","ChangeEvent","el","currentTarget","classNames"],"sources":["../../../../src/components/Checkbox/CheckboxInput/index.tsx"],"sourcesContent":["import './index.css'\n\nimport { forwardRef, memo, useCallback } from 'react'\nimport { useClassNames } from '../../../_lib/useClassNames'\n\ntype CharcoalCheckboxInputProps = {\n  invalid?: boolean\n  onChange?: (checked: boolean) => void\n  rounded?: boolean\n}\n\ntype InputProps = React.HTMLProps<HTMLInputElement>\n\nexport type CheckboxInputProps = CharcoalCheckboxInputProps &\n  Omit<InputProps, keyof CharcoalCheckboxInputProps | 'ref'>\n\nconst CheckboxInput = forwardRef<HTMLInputElement, CheckboxInputProps>(\n  function CheckboxInput(\n    { onChange, checked, invalid, className, rounded, ...props },\n    ref,\n  ) {\n    const handleChange = useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        const el = e.currentTarget\n        onChange?.(el.checked)\n      },\n      [onChange],\n    )\n\n    const classNames = useClassNames('charcoal-checkbox-input', className)\n\n    return (\n      <input\n        className={classNames}\n        ref={ref}\n        type=\"checkbox\"\n        onChange={handleChange}\n        aria-invalid={invalid}\n        checked={checked}\n        data-rounded={rounded}\n        {...props}\n      />\n    )\n  },\n)\n\nexport default memo(CheckboxInput)\n"],"mappings":";;;;;;;AAgBA,MAAMe,gBAAgBf,WACpB,SAASe,cACP,EAAET,UAAUC,SAASF,SAASW,WAAWR,SAAS,GAAGS,SACrDC,KACA;CACA,MAAMC,eAAejB,aAClBkB,MAA2C;EAC1C,MAAME,KAAKF,EAAEG;EACbjB,WAAWgB,GAAGf,QAAQ;IAExB,CAACD,SACH,CAAC;CAID,OACE,oBAAC,SAAD;EACE,WAJeH,cAAc,2BAA2Ba,UAInC;EAChBE;EACL,MAAK;EACL,UAAUC;EACV,gBAAcd;EACLE;EACT,gBAAcC;EACd,GAAIS;EACJ;EAGP;AAED,4BAAehB,KAAKc,cAAc"}

package/dist/components/Checkbox/CheckboxWithLabel.cjs

@@ -0,0 +1,23 @@
+"use client";
+const require_runtime = require('../../_virtual/_rolldown/runtime.cjs');
+const require_useClassNames = require('../../_lib/useClassNames.cjs');
+let react = require("react");
+react = require_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/components/Checkbox/CheckboxWithLabel.tsx
+const CheckboxWithLabel = react.default.memo(function CheckboxWithLabel({ className, children, input, id, disabled }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+		htmlFor: id,
+		"aria-disabled": disabled,
+		className: require_useClassNames.useClassNames("charcoal-checkbox__label", className),
+		children: [input, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "charcoal-checkbox__label_div",
+			children
+		})]
+	});
+});
+
+//#endregion
+exports.CheckboxWithLabel = CheckboxWithLabel;
+//# sourceMappingURL=CheckboxWithLabel.cjs.map

package/dist/components/Checkbox/CheckboxWithLabel.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxWithLabel.cjs","names":["React","useClassNames","CheckboxWithLabel","memo","className","children","input","id","disabled","ReactNode","classNames"],"sources":["../../../src/components/Checkbox/CheckboxWithLabel.tsx"],"sourcesContent":["import React from 'react'\nimport { useClassNames } from '../../_lib/useClassNames'\n\nexport const CheckboxWithLabel = React.memo(function CheckboxWithLabel({\n  className,\n  children,\n  input,\n  id,\n  disabled,\n}: {\n  children: React.ReactNode\n  input: React.ReactNode\n  disabled?: boolean\n  className?: string\n  id?: string\n}) {\n  const classNames = useClassNames('charcoal-checkbox__label', className)\n  return (\n    <label htmlFor={id} aria-disabled={disabled} className={classNames}>\n      {input}\n      <div className=\"charcoal-checkbox__label_div\">{children}</div>\n    </label>\n  )\n})\n"],"mappings":";;;;;;;;AAGA,MAAaE,oBAAoBF,cAAMG,KAAK,SAASD,kBAAkB,EACrEE,WACAC,UACAC,OACAC,IACAC,YAOC;CAED,OACE,4CAAC,SAAD;EAAO,SAASD;EAAI,iBAAeC;EAAU,WAF5BP,oCAAc,4BAA4BG,UAEO;YAAlE,CACGE,OACD,2CAAC,OAAD;GAAK,WAAU;GAAgCD;GAAc,EACvD;;EAEV"}

package/dist/components/Checkbox/CheckboxWithLabel.js

@@ -0,0 +1,21 @@
+"use client";
+import { useClassNames } from "../../_lib/useClassNames.js";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/Checkbox/CheckboxWithLabel.tsx
+const CheckboxWithLabel = React.memo(function CheckboxWithLabel({ className, children, input, id, disabled }) {
+	return /* @__PURE__ */ jsxs("label", {
+		htmlFor: id,
+		"aria-disabled": disabled,
+		className: useClassNames("charcoal-checkbox__label", className),
+		children: [input, /* @__PURE__ */ jsx("div", {
+			className: "charcoal-checkbox__label_div",
+			children
+		})]
+	});
+});
+
+//#endregion
+export { CheckboxWithLabel };
+//# sourceMappingURL=CheckboxWithLabel.js.map

package/dist/components/Checkbox/CheckboxWithLabel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxWithLabel.js","names":["React","useClassNames","CheckboxWithLabel","memo","className","children","input","id","disabled","ReactNode","classNames"],"sources":["../../../src/components/Checkbox/CheckboxWithLabel.tsx"],"sourcesContent":["import React from 'react'\nimport { useClassNames } from '../../_lib/useClassNames'\n\nexport const CheckboxWithLabel = React.memo(function CheckboxWithLabel({\n  className,\n  children,\n  input,\n  id,\n  disabled,\n}: {\n  children: React.ReactNode\n  input: React.ReactNode\n  disabled?: boolean\n  className?: string\n  id?: string\n}) {\n  const classNames = useClassNames('charcoal-checkbox__label', className)\n  return (\n    <label htmlFor={id} aria-disabled={disabled} className={classNames}>\n      {input}\n      <div className=\"charcoal-checkbox__label_div\">{children}</div>\n    </label>\n  )\n})\n"],"mappings":";;;;;;AAGA,MAAaE,oBAAoBF,MAAMG,KAAK,SAASD,kBAAkB,EACrEE,WACAC,UACAC,OACAC,IACAC,YAOC;CAED,OACE,qBAAC,SAAD;EAAO,SAASD;EAAI,iBAAeC;EAAU,WAF5BP,cAAc,4BAA4BG,UAEO;YAAlE,CACGE,OACD,oBAAC,OAAD;GAAK,WAAU;GAAgCD;GAAc,EACvD;;EAEV"}

package/dist/components/Checkbox/index2.cjs

@@ -0,0 +1,34 @@
+"use client";
+const require_runtime = require('../../_virtual/_rolldown/runtime.cjs');
+require('./index.cjs');
+const require_index$1 = require('./CheckboxInput/index2.cjs');
+const require_CheckboxWithLabel = require('./CheckboxWithLabel.cjs');
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let react_aria_useId = require("react-aria/useId");
+
+//#region src/components/Checkbox/index.tsx
+const Checkbox = (0, react.forwardRef)(function Checkbox({ disabled, className, id, children, ...props }, ref) {
+	const htmlId = (0, react_aria_useId.useId)(id);
+	const noChildren = children === void 0;
+	const input = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$1.default, {
+		...props,
+		className: noChildren ? className : void 0,
+		disabled,
+		id: htmlId,
+		ref
+	});
+	if (noChildren) return input;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_CheckboxWithLabel.CheckboxWithLabel, {
+		className,
+		disabled,
+		id: htmlId,
+		input,
+		children
+	});
+});
+var Checkbox_default = (0, react.memo)(Checkbox);
+
+//#endregion
+exports.default = Checkbox_default;
+//# sourceMappingURL=index2.cjs.map

package/dist/components/Checkbox/index2.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index2.cjs","names":["forwardRef","memo","CheckboxInput","CheckboxInputProps","CheckboxWithLabel","useId","CheckboxProps","Checkbox","HTMLInputElement","disabled","className","id","children","props","ref","htmlId","noChildren","undefined","input"],"sources":["../../../src/components/Checkbox/index.tsx"],"sourcesContent":["import './index.css'\n\nimport { forwardRef, memo } from 'react'\nimport CheckboxInput, { CheckboxInputProps } from './CheckboxInput'\nimport { CheckboxWithLabel } from './CheckboxWithLabel'\nimport { useId } from 'react-aria/useId'\n\nexport type CheckboxProps = CheckboxInputProps\n\nconst Checkbox = forwardRef<HTMLInputElement, CheckboxInputProps>(\n  function Checkbox({ disabled, className, id, children, ...props }, ref) {\n    const htmlId = useId(id)\n    const noChildren = children === undefined\n    const input = (\n      <CheckboxInput\n        {...props}\n        className={noChildren ? className : undefined}\n        disabled={disabled}\n        id={htmlId}\n        ref={ref}\n      />\n    )\n    if (noChildren) {\n      return input\n    }\n    return (\n      <CheckboxWithLabel\n        className={className}\n        disabled={disabled}\n        id={htmlId}\n        input={input}\n      >\n        {children}\n      </CheckboxWithLabel>\n    )\n  },\n)\n\nexport default memo(Checkbox)\n"],"mappings":";;;;;;;;;;AASA,MAAMO,iCACJ,SAASA,SAAS,EAAEE,UAAUC,WAAWC,IAAIC,UAAU,GAAGC,SAASC,KAAK;CACtE,MAAMC,qCAAeJ,GAAG;CACxB,MAAMK,aAAaJ,aAAaK;CAChC,MAAMC,QACJ,2CAAC,yBAAD;EACE,GAAIL;EACJ,WAAWG,aAAaN,YAAYO;EAC1BR;EACV,IAAIM;EACCD;EAER;CACD,IAAIE,YACF,OAAOE;CAET,OACE,2CAAC,6CAAD;EACaR;EACDD;EACV,IAAIM;EACGG;EAENN;EACiB;EAGzB;AAED,uCAAoBL,SAAS"}

package/dist/components/Checkbox/index2.js

@@ -0,0 +1,33 @@
+"use client";
+/* empty css      */
+import CheckboxInput_default from "./CheckboxInput/index2.js";
+import { CheckboxWithLabel } from "./CheckboxWithLabel.js";
+import { forwardRef, memo } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useId } from "react-aria/useId";
+
+//#region src/components/Checkbox/index.tsx
+const Checkbox = forwardRef(function Checkbox({ disabled, className, id, children, ...props }, ref) {
+	const htmlId = useId(id);
+	const noChildren = children === void 0;
+	const input = /* @__PURE__ */ jsx(CheckboxInput_default, {
+		...props,
+		className: noChildren ? className : void 0,
+		disabled,
+		id: htmlId,
+		ref
+	});
+	if (noChildren) return input;
+	return /* @__PURE__ */ jsx(CheckboxWithLabel, {
+		className,
+		disabled,
+		id: htmlId,
+		input,
+		children
+	});
+});
+var Checkbox_default = memo(Checkbox);
+
+//#endregion
+export { Checkbox_default as default };
+//# sourceMappingURL=index2.js.map

package/dist/components/Checkbox/index2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index2.js","names":["forwardRef","memo","CheckboxInput","CheckboxInputProps","CheckboxWithLabel","useId","CheckboxProps","Checkbox","HTMLInputElement","disabled","className","id","children","props","ref","htmlId","noChildren","undefined","input"],"sources":["../../../src/components/Checkbox/index.tsx"],"sourcesContent":["import './index.css'\n\nimport { forwardRef, memo } from 'react'\nimport CheckboxInput, { CheckboxInputProps } from './CheckboxInput'\nimport { CheckboxWithLabel } from './CheckboxWithLabel'\nimport { useId } from 'react-aria/useId'\n\nexport type CheckboxProps = CheckboxInputProps\n\nconst Checkbox = forwardRef<HTMLInputElement, CheckboxInputProps>(\n  function Checkbox({ disabled, className, id, children, ...props }, ref) {\n    const htmlId = useId(id)\n    const noChildren = children === undefined\n    const input = (\n      <CheckboxInput\n        {...props}\n        className={noChildren ? className : undefined}\n        disabled={disabled}\n        id={htmlId}\n        ref={ref}\n      />\n    )\n    if (noChildren) {\n      return input\n    }\n    return (\n      <CheckboxWithLabel\n        className={className}\n        disabled={disabled}\n        id={htmlId}\n        input={input}\n      >\n        {children}\n      </CheckboxWithLabel>\n    )\n  },\n)\n\nexport default memo(Checkbox)\n"],"mappings":";;;;;;;;;AASA,MAAMO,WAAWP,WACf,SAASO,SAAS,EAAEE,UAAUC,WAAWC,IAAIC,UAAU,GAAGC,SAASC,KAAK;CACtE,MAAMC,SAASV,MAAMM,GAAG;CACxB,MAAMK,aAAaJ,aAAaK;CAChC,MAAMC,QACJ,oBAAC,uBAAD;EACE,GAAIL;EACJ,WAAWG,aAAaN,YAAYO;EAC1BR;EACV,IAAIM;EACCD;EAER;CACD,IAAIE,YACF,OAAOE;CAET,OACE,oBAAC,mBAAD;EACaR;EACDD;EACV,IAAIM;EACGG;EAENN;EACiB;EAGzB;AAED,uBAAeX,KAAKM,SAAS"}

package/dist/components/Clickable/index2.cjs

@@ -0,0 +1,21 @@
+"use client";
+const require_runtime = require('../../_virtual/_rolldown/runtime.cjs');
+const require_useClassNames = require('../../_lib/useClassNames.cjs');
+require('./index.cjs');
+let react = require("react");
+react = require_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/components/Clickable/index.tsx
+const Clickable = (0, react.forwardRef)(function Clickable({ component, ...props }, ref) {
+	const className = require_useClassNames.useClassNames("charcoal-clickable", props.className);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)((0, react.useMemo)(() => component ?? "button", [component]), {
+		...props,
+		ref,
+		className
+	});
+});
+
+//#endregion
+exports.default = Clickable;
+//# sourceMappingURL=index2.cjs.map

package/dist/components/Clickable/index2.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index2.cjs","names":["React","useMemo","forwardRef","ReactNode","JSX","useClassNames","ClickableProps","ElementType","children","component","T","Omit","ComponentPropsWithRef","Clickable","props","ref","ForwardedRef","HTMLButtonElement","className","Component","p","Element","ClickableElement","HTMLAnchorElement"],"sources":["../../../src/components/Clickable/index.tsx"],"sourcesContent":["import React, { useMemo, forwardRef, ReactNode, type JSX } from 'react'\nimport { useClassNames } from '../../_lib/useClassNames'\nimport './index.css'\n\nexport type ClickableProps<T extends React.ElementType = 'button'> = {\n  children?: ReactNode\n  /**\n   * The component used for root element.\n   * @type T extends React.ElementType = 'button'\n   */\n  component?: T\n} & Omit<React.ComponentPropsWithRef<T>, 'children'>\n\nconst Clickable = forwardRef(function Clickable<T extends React.ElementType>(\n  { component, ...props }: ClickableProps<T>,\n  ref: React.ForwardedRef<HTMLButtonElement>,\n) {\n  const className = useClassNames('charcoal-clickable', props.className)\n\n  const Component = useMemo(() => component ?? 'button', [component])\n\n  return <Component {...props} ref={ref} className={className} />\n}) as <T extends React.ElementType = 'button'>(\n  p: ClickableProps<T>,\n) => JSX.Element\nexport default Clickable\n\n/**\n * @deprecated\n * remained for v3 compatibility and will be removed in the future\n */\nexport type ClickableElement = HTMLButtonElement & HTMLAnchorElement\n"],"mappings":";;;;;;;;;AAaA,MAAMa,kCAAuB,SAASA,UACpC,EAAEJ,WAAW,GAAGK,SAChBC,KACA;CACA,MAAMG,YAAYb,oCAAc,sBAAsBS,MAAMI,UAAU;CAItE,OAAO,oEAFyBT,aAAa,UAAU,CAACA,UAAU,CAEjD,EAAV;EAAW,GAAIK;EAAYC;EAAgBG;EAAa;EAC/D"}

package/dist/components/Clickable/index2.js

@@ -0,0 +1,19 @@
+"use client";
+import { useClassNames } from "../../_lib/useClassNames.js";
+/* empty css      */
+import React, { forwardRef, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/Clickable/index.tsx
+const Clickable = forwardRef(function Clickable({ component, ...props }, ref) {
+	const className = useClassNames("charcoal-clickable", props.className);
+	return /* @__PURE__ */ jsx(useMemo(() => component ?? "button", [component]), {
+		...props,
+		ref,
+		className
+	});
+});
+
+//#endregion
+export { Clickable as default };
+//# sourceMappingURL=index2.js.map

package/dist/components/Clickable/index2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index2.js","names":["React","useMemo","forwardRef","ReactNode","JSX","useClassNames","ClickableProps","ElementType","children","component","T","Omit","ComponentPropsWithRef","Clickable","props","ref","ForwardedRef","HTMLButtonElement","className","Component","p","Element","ClickableElement","HTMLAnchorElement"],"sources":["../../../src/components/Clickable/index.tsx"],"sourcesContent":["import React, { useMemo, forwardRef, ReactNode, type JSX } from 'react'\nimport { useClassNames } from '../../_lib/useClassNames'\nimport './index.css'\n\nexport type ClickableProps<T extends React.ElementType = 'button'> = {\n  children?: ReactNode\n  /**\n   * The component used for root element.\n   * @type T extends React.ElementType = 'button'\n   */\n  component?: T\n} & Omit<React.ComponentPropsWithRef<T>, 'children'>\n\nconst Clickable = forwardRef(function Clickable<T extends React.ElementType>(\n  { component, ...props }: ClickableProps<T>,\n  ref: React.ForwardedRef<HTMLButtonElement>,\n) {\n  const className = useClassNames('charcoal-clickable', props.className)\n\n  const Component = useMemo(() => component ?? 'button', [component])\n\n  return <Component {...props} ref={ref} className={className} />\n}) as <T extends React.ElementType = 'button'>(\n  p: ClickableProps<T>,\n) => JSX.Element\nexport default Clickable\n\n/**\n * @deprecated\n * remained for v3 compatibility and will be removed in the future\n */\nexport type ClickableElement = HTMLButtonElement & HTMLAnchorElement\n"],"mappings":";;;;;;;AAaA,MAAMa,YAAYX,WAAW,SAASW,UACpC,EAAEJ,WAAW,GAAGK,SAChBC,KACA;CACA,MAAMG,YAAYb,cAAc,sBAAsBS,MAAMI,UAAU;CAItE,OAAO,oBAFWjB,cAAcQ,aAAa,UAAU,CAACA,UAAU,CAEjD,EAAV;EAAW,GAAIK;EAAYC;EAAgBG;EAAa;EAC/D"}