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

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

@@ -1 +1 @@
-{"version":3,"file":"store.cjs","names":["Store","Readonly","dispatch","action","Action","subscribe","listener","getSnapshot","State","createStore","reducer","state","initialState","listeners","Set","add","delete"],"sources":["../../../src/components/Carousel/store.ts"],"sourcesContent":["export type Store<State, Action> = Readonly<{\n  dispatch: (action: Action) => void\n  subscribe: (listener: () => void) => () => void\n  getSnapshot: () => State\n}>\n\nexport function createStore<State, Action>(\n  reducer: (state: State, action: Action) => State,\n  initialState: State,\n): Store<State, Action> {\n  let state = initialState\n  const listeners = new Set<() => void>()\n\n  return {\n    dispatch(action) {\n      state = reducer(state, action)\n      for (const listener of listeners) listener()\n    },\n    subscribe(listener) {\n      listeners.add(listener)\n      return () => {\n        listeners.delete(listener)\n      }\n    },\n    getSnapshot: () => state,\n  }\n}\n"],"mappings":";;;AAMA,SAAgBS,YACdC,SACAE,cACsB;CACtB,IAAID,QAAQC;CACZ,MAAMC,4BAAY,IAAIC,KAAiB;CAEvC,OAAO;EACLZ,SAASC,QAAQ;GACfQ,QAAQD,QAAQC,OAAOR,OAAO;GAC9B,KAAK,MAAMG,YAAYO,WAAWP,UAAU;;EAE9CD,UAAUC,UAAU;GAClBO,UAAUE,IAAIT,SAAS;GACvB,aAAa;IACXO,UAAUG,OAAOV,SAAS;;;EAG9BC,mBAAmBI;EACpB"}
+{"version":3,"file":"store.cjs","names":[],"sources":["../../../src/components/Carousel/store.ts"],"sourcesContent":["export type Store<State, Action> = Readonly<{\n  dispatch: (action: Action) => void\n  subscribe: (listener: () => void) => () => void\n  getSnapshot: () => State\n}>\n\nexport function createStore<State, Action>(\n  reducer: (state: State, action: Action) => State,\n  initialState: State,\n): Store<State, Action> {\n  let state = initialState\n  const listeners = new Set<() => void>()\n\n  return {\n    dispatch(action) {\n      state = reducer(state, action)\n      for (const listener of listeners) listener()\n    },\n    subscribe(listener) {\n      listeners.add(listener)\n      return () => {\n        listeners.delete(listener)\n      }\n    },\n    getSnapshot: () => state,\n  }\n}\n"],"mappings":";;;AAMA,SAAgB,YACd,SACA,cACsB;CACtB,IAAI,QAAQ;CACZ,MAAM,4BAAY,IAAI,IAAgB;CAEtC,OAAO;EACL,SAAS,QAAQ;GACf,QAAQ,QAAQ,OAAO,MAAM;GAC7B,KAAK,MAAM,YAAY,WAAW,SAAS;EAC7C;EACA,UAAU,UAAU;GAClB,UAAU,IAAI,QAAQ;GACtB,aAAa;IACX,UAAU,OAAO,QAAQ;GAC3B;EACF;EACA,mBAAmB;CACrB;AACF"}

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

@@ -1 +1 @@
-{"version":3,"file":"store.js","names":["Store","Readonly","dispatch","action","Action","subscribe","listener","getSnapshot","State","createStore","reducer","state","initialState","listeners","Set","add","delete"],"sources":["../../../src/components/Carousel/store.ts"],"sourcesContent":["export type Store<State, Action> = Readonly<{\n  dispatch: (action: Action) => void\n  subscribe: (listener: () => void) => () => void\n  getSnapshot: () => State\n}>\n\nexport function createStore<State, Action>(\n  reducer: (state: State, action: Action) => State,\n  initialState: State,\n): Store<State, Action> {\n  let state = initialState\n  const listeners = new Set<() => void>()\n\n  return {\n    dispatch(action) {\n      state = reducer(state, action)\n      for (const listener of listeners) listener()\n    },\n    subscribe(listener) {\n      listeners.add(listener)\n      return () => {\n        listeners.delete(listener)\n      }\n    },\n    getSnapshot: () => state,\n  }\n}\n"],"mappings":";;AAMA,SAAgBS,YACdC,SACAE,cACsB;CACtB,IAAID,QAAQC;CACZ,MAAMC,4BAAY,IAAIC,KAAiB;CAEvC,OAAO;EACLZ,SAASC,QAAQ;GACfQ,QAAQD,QAAQC,OAAOR,OAAO;GAC9B,KAAK,MAAMG,YAAYO,WAAWP,UAAU;;EAE9CD,UAAUC,UAAU;GAClBO,UAAUE,IAAIT,SAAS;GACvB,aAAa;IACXO,UAAUG,OAAOV,SAAS;;;EAG9BC,mBAAmBI;EACpB"}
+{"version":3,"file":"store.js","names":[],"sources":["../../../src/components/Carousel/store.ts"],"sourcesContent":["export type Store<State, Action> = Readonly<{\n  dispatch: (action: Action) => void\n  subscribe: (listener: () => void) => () => void\n  getSnapshot: () => State\n}>\n\nexport function createStore<State, Action>(\n  reducer: (state: State, action: Action) => State,\n  initialState: State,\n): Store<State, Action> {\n  let state = initialState\n  const listeners = new Set<() => void>()\n\n  return {\n    dispatch(action) {\n      state = reducer(state, action)\n      for (const listener of listeners) listener()\n    },\n    subscribe(listener) {\n      listeners.add(listener)\n      return () => {\n        listeners.delete(listener)\n      }\n    },\n    getSnapshot: () => state,\n  }\n}\n"],"mappings":";;AAMA,SAAgB,YACd,SACA,cACsB;CACtB,IAAI,QAAQ;CACZ,MAAM,4BAAY,IAAI,IAAgB;CAEtC,OAAO;EACL,SAAS,QAAQ;GACf,QAAQ,QAAQ,OAAO,MAAM;GAC7B,KAAK,MAAM,YAAY,WAAW,SAAS;EAC7C;EACA,UAAU,UAAU;GAClB,UAAU,IAAI,QAAQ;GACtB,aAAa;IACX,UAAU,OAAO,QAAQ;GAC3B;EACF;EACA,mBAAmB;CACrB;AACF"}

package/dist/components/Carousel/useCarouselScroller.cjs

@@ -1,5 +1,4 @@
 "use client";
-const require_runtime = require('../../_virtual/_rolldown/runtime.cjs');
 const require_useIsomorphicLayoutEffect = require('../../_lib/useIsomorphicLayoutEffect.cjs');
 let react = require("react");
 

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

@@ -1 +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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"}
+{"version":3,"file":"useCarouselScroller.cjs","names":[],"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.map

@@ -1 +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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"}
+{"version":3,"file":"useCarouselScroller.js","names":[],"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":";;;;;AAKA,MAAM,qBAAqB;CAAC;CAAe;CAAS;AAAY;AAiBhE,SAAgB,oBACd,aACA,OACA,WACA,SACwB;CACxB,MAAM,EAAE,OAAO,QAAQ,YAAY,UAAU,UAAU,wBACrD;CACF,MAAM,sBAAsB,OAAO,IAAI;CAGvC,MAAM,eAAe,OAAO;EAAE;EAAU;EAAU;CAAoB,CAAC;CACvE,gBAAgB;EACd,aAAa,UAAU;GAAE;GAAU;GAAU;EAAoB;CACnE,CAAC;CAGD,MAAM,gBAAgB,OAAuB,IAAI;CAEjD,MAAM,oBAAoB,kBAAkB;EAC1C,MAAM,KAAK,YAAY;EACvB,IAAI,CAAC,IAAI;EACT,MAAM,EAAE,YAAY,aAAa,gBAAgB;EACjD,MAAM,UAAU,aAAa;EAC7B,MAAM,UAAU,aAAa,cAAc,cAAc;EACzD,MAAM,SAAS;GAAE,MAAM;GAAkB;GAAS;EAAQ,CAAC;EAC3D,MAAM,YAAY,WAAW;EAC7B,IAAI,cAAc,YAAY,WAAW;GACvC,cAAc,UAAU;GACxB,aAAa,QAAQ,sBAAsB,SAAS;EACtD;CACF,GAAG,CAAC,aAAa,KAAK,CAAC;CAEvB,MAAM,qBAAqB,kBAAkB;EAC3C,MAAM,KAAK,YAAY;EACvB,IAAI,CAAC,MAAM,CAAC,oBAAoB,SAAS;EACzC,MAAM,YAAY,GAAG,cAAc,GAAG;EACtC,IAAI,OAAO;EACX,QAAQ,OAAR;GACE,KAAK;IACH,OAAO,YAAY,IAAI;IACvB;GACF,KAAK;IACH,OAAO,YAAY;IACnB;EACJ;EAGA,GAAG,SAAS;GACV,MAAM,KAAK,IAAI,GAAG,KAAK,IAAI,MAAM,SAAS,CAAC;GAC3C,UAAU;EACZ,CAAC;CACH,GAAG;EAAC;EAAa;EAAO;CAAM,CAAC;CAG/B,gCAAgC;EAC9B,MAAM,KAAK,YAAY;EACvB,IAAI,CAAC,IAAI;EACT,kBAAkB;EAClB,MAAM,qBAAqB;GACzB,kBAAkB;GAClB,aAAa,QAAQ,WAAW,GAAG,UAAU;EAC/C;EACA,GAAG,iBAAiB,UAAU,cAAc,EAAE,SAAS,KAAK,CAAC;EAC7D,aAAa,GAAG,oBAAoB,UAAU,YAAY;CAC5D,GAAG;EAAC;EAAa;EAAmB;CAAS,CAAC;CAG9C,gCAAgC;EAC9B,MAAM,KAAK,YAAY;EACvB,IAAI,CAAC,MAAM,OAAO,mBAAmB,aAAa;EAClD,MAAM,KAAK,IAAI,qBAAqB;GAClC,mBAAmB;GACnB,kBAAkB;GAClB,aAAa,QAAQ,WAAW,GAAG,WAAW;EAChD,CAAC;EACD,GAAG,QAAQ,EAAE;EACb,aAAa,GAAG,WAAW;CAC7B,GAAG;EAAC;EAAa;EAAoB;CAAiB,CAAC;CAGvD,gCAAgC;EAC9B,oBAAoB,UAAU;EAC9B,mBAAmB;EAGnB,kBAAkB;EAClB,MAAM,KAAK,YAAY;EACvB,IAAI,CAAC,IAAI;EACT,MAAM,aAAa;GACjB,oBAAoB,UAAU;EAChC;EACA,KAAK,MAAM,QAAQ,oBAAoB,GAAG,iBAAiB,MAAM,MAAM,IAAI;EAC3E,aAAa;GACX,KAAK,MAAM,QAAQ,oBACjB,GAAG,oBAAoB,MAAM,MAAM,IAAI;EAC3C;CACF,GAAG;EAAC;EAAa;EAAoB;EAAmB;CAAS,CAAC;CAElE,MAAM,eAAe,kBAAkB;EACrC,mBAAmB;EACnB,kBAAkB;CACpB,GAAG,CAAC,oBAAoB,iBAAiB,CAAC;CAG1C,MAAM,cAAc,kBAAkB;EACpC,oBAAoB,UAAU;EAC9B,mBAAmB;EACnB,kBAAkB;CACpB,GAAG,CAAC,oBAAoB,iBAAiB,CAAC;CAqB1C,OAAO;EAAE,cAnBY,aAClB,cAA+B;GAC9B,MAAM,KAAK,YAAY;GACvB,IAAI,CAAC,IAAI;GACT,oBAAoB,UAAU;GAC9B,MAAM,EAAE,aAAa,aAAa,eAAe;GAEjD,MAAM,QACJ,OAAO,eAAe,aAClB,WAAW;IAAE;IAAa;IAAa;IAAY;GAAU,CAAC,IAC9D,cAAc;GACpB,GAAG,SAAS;IACV,MAAM,cAAc,SAAS,QAAQ,CAAC;IACtC,UAAU;GACZ,CAAC;EACH,GACA,CAAC,aAAa,UAAU,CAGjB;EAAc;EAAc;CAAY;AACnD"}

package/dist/components/Checkbox/CheckboxInput/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Checkbox/CheckboxInput/index.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAKpB,KAAK,0BAA0B,GAAG;IAChC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,CAAA;AAED,KAAK,UAAU,GAAG,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAA;AAEnD,MAAM,MAAM,kBAAkB,GAAG,0BAA0B,GACzD,IAAI,CAAC,UAAU,EAAE,MAAM,0BAA0B,GAAG,KAAK,CAAC,CAAA;;AAgC5D,wBAAkC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Checkbox/CheckboxInput/index.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAKpB,KAAK,0BAA0B,GAAG;IAChC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,CAAA;AAED,KAAK,UAAU,GAAG,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAA;AAEnD,MAAM,MAAM,kBAAkB,GAAG,0BAA0B,GACzD,IAAI,CAAC,UAAU,EAAE,MAAM,0BAA0B,GAAG,KAAK,CAAC,CAAA"}

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

@@ -1,5 +1,4 @@
 "use client";
-const require_runtime = require('../../../_virtual/_rolldown/runtime.cjs');
 const require_useClassNames = require('../../../_lib/useClassNames.cjs');
 require('./index.cjs');
 let react = require("react");

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

@@ -1 +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"}
+{"version":3,"file":"index2.cjs","names":[],"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,MAAM,sCACJ,SAAS,cACP,EAAE,UAAU,SAAS,SAAS,WAAW,SAAS,GAAG,SACrD,KACA;CACA,MAAM,uCACH,MAA2C;EAC1C,MAAM,KAAK,EAAE;EACb,WAAW,GAAG,OAAO;CACvB,GACA,CAAC,QAAQ,CACX;CAIA,OACE,2CAAC,SAAD;EACE,WAJe,oCAAc,2BAA2B,SAI7C;EACN;EACL,MAAK;EACL,UAAU;EACV,gBAAc;EACL;EACT,gBAAc;EACd,GAAI;CAAM;AAGhB,CACF;AAEA,4CAAoB,aAAa"}

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

@@ -1 +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"}
+{"version":3,"file":"index2.js","names":[],"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,MAAM,gBAAgB,WACpB,SAAS,cACP,EAAE,UAAU,SAAS,SAAS,WAAW,SAAS,GAAG,SACrD,KACA;CACA,MAAM,eAAe,aAClB,MAA2C;EAC1C,MAAM,KAAK,EAAE;EACb,WAAW,GAAG,OAAO;CACvB,GACA,CAAC,QAAQ,CACX;CAIA,OACE,oBAAC,SAAD;EACE,WAJe,cAAc,2BAA2B,SAI7C;EACN;EACL,MAAK;EACL,UAAU;EACV,gBAAc;EACL;EACT,gBAAc;EACd,GAAI;CAAM;AAGhB,CACF;AAEA,4BAAe,KAAK,aAAa"}

package/dist/components/Checkbox/CheckboxWithLabel.cjs

@@ -2,7 +2,7 @@
 const require_runtime = require('../../_virtual/_rolldown/runtime.cjs');
 const require_useClassNames = require('../../_lib/useClassNames.cjs');
 let react = require("react");
-react = require_runtime.__toESM(react);
+react = require_runtime.__toESM(react, 1);
 let react_jsx_runtime = require("react/jsx-runtime");
 
 //#region src/components/Checkbox/CheckboxWithLabel.tsx

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

@@ -1 +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"}
+{"version":3,"file":"CheckboxWithLabel.cjs","names":[],"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,MAAa,oBAAoB,cAAM,KAAK,SAAS,kBAAkB,EACrE,WACA,UACA,OACA,IACA,YAOC;CAED,OACE,4CAAC,SAAD;EAAO,SAAS;EAAI,iBAAe;EAAU,WAF5B,oCAAc,4BAA4B,SAEH;YAAxD,CACG,OACD,2CAAC,OAAD;GAAK,WAAU;GAAgC;EAAc,EACxD;;AAEX,CAAC"}

package/dist/components/Checkbox/CheckboxWithLabel.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
-export declare const CheckboxWithLabel: React.NamedExoticComponent<{
+export declare const CheckboxWithLabel: React.MemoExoticComponent<({ className, children, input, id, disabled, }: {
     children: React.ReactNode;
     input: React.ReactNode;
     disabled?: boolean;
     className?: string;
     id?: string;
-}>;
+}) => import("react/jsx-runtime").JSX.Element>;
 //# sourceMappingURL=CheckboxWithLabel.d.ts.map

package/dist/components/Checkbox/CheckboxWithLabel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxWithLabel.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/CheckboxWithLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,eAAO,MAAM,iBAAiB;cAOlB,KAAK,CAAC,SAAS;WAClB,KAAK,CAAC,SAAS;eACX,OAAO;gBACN,MAAM;SACb,MAAM;EASX,CAAA"}
+{"version":3,"file":"CheckboxWithLabel.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/CheckboxWithLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,eAAO,MAAM,iBAAiB,4EAM3B;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,EAAE,CAAC,EAAE,MAAM,CAAA;CACZ,6CAQC,CAAA"}

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

@@ -1 +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"}
+{"version":3,"file":"CheckboxWithLabel.js","names":[],"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,MAAa,oBAAoB,MAAM,KAAK,SAAS,kBAAkB,EACrE,WACA,UACA,OACA,IACA,YAOC;CAED,OACE,qBAAC,SAAD;EAAO,SAAS;EAAI,iBAAe;EAAU,WAF5B,cAAc,4BAA4B,SAEH;YAAxD,CACG,OACD,oBAAC,OAAD;GAAK,WAAU;GAAgC;EAAc,EACxD;;AAEX,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/index.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAGpB,OAAsB,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAA;AAInE,MAAM,MAAM,aAAa,GAAG,kBAAkB,CAAA;;;;;;;;;;AA+B9C,wBAA6B"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/index.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAGpB,OAAsB,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAA;AAInE,MAAM,MAAM,aAAa,GAAG,kBAAkB,CAAA"}

package/dist/components/Checkbox/index2.cjs

@@ -1,5 +1,4 @@
 "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');

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

@@ -1 +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"}
+{"version":3,"file":"index2.cjs","names":[],"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,MAAM,iCACJ,SAAS,SAAS,EAAE,UAAU,WAAW,IAAI,UAAU,GAAG,SAAS,KAAK;CACtE,MAAM,qCAAe,EAAE;CACvB,MAAM,aAAa,aAAa;CAChC,MAAM,QACJ,2CAAC,yBAAD;EACE,GAAI;EACJ,WAAW,aAAa,YAAY;EAC1B;EACV,IAAI;EACC;CAAI;CAGb,IAAI,YACF,OAAO;CAET,OACE,2CAAC,6CAAD;EACa;EACD;EACV,IAAI;EACG;EAEN;CACgB;AAEvB,CACF;AAEA,uCAAoB,QAAQ"}

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

@@ -1 +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"}
+{"version":3,"file":"index2.js","names":[],"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,MAAM,WAAW,WACf,SAAS,SAAS,EAAE,UAAU,WAAW,IAAI,UAAU,GAAG,SAAS,KAAK;CACtE,MAAM,SAAS,MAAM,EAAE;CACvB,MAAM,aAAa,aAAa;CAChC,MAAM,QACJ,oBAAC,uBAAD;EACE,GAAI;EACJ,WAAW,aAAa,YAAY;EAC1B;EACV,IAAI;EACC;CAAI;CAGb,IAAI,YACF,OAAO;CAET,OACE,oBAAC,mBAAD;EACa;EACD;EACV,IAAI;EACG;EAEN;CACgB;AAEvB,CACF;AAEA,uBAAe,KAAK,QAAQ"}

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

@@ -8,7 +8,7 @@ export type ClickableProps<T extends React.ElementType = 'button'> = {
      */
     component?: T;
 } & Omit<React.ComponentPropsWithRef<T>, 'children'>;
-declare const Clickable: <T extends React.ElementType = "button">(p: ClickableProps<T>) => JSX.Element;
+declare const Clickable: <T extends React.ElementType = 'button'>(p: ClickableProps<T>) => JSX.Element;
 export default Clickable;
 /**
  * @deprecated

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Clickable/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAuB,SAAS,EAAE,KAAK,GAAG,EAAE,MAAM,OAAO,CAAA;AAEvE,OAAO,aAAa,CAAA;AAEpB,MAAM,MAAM,cAAc,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ,IAAI;IACnE,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB;;;OAGG;IACH,SAAS,CAAC,EAAE,CAAC,CAAA;CACd,GAAG,IAAI,CAAC,KAAK,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC,CAAA;AAEpD,QAAA,MAAM,SAAS,EAST,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ,EAC3C,CAAC,EAAE,cAAc,CAAC,CAAC,CAAC,KACjB,GAAG,CAAC,OAAO,CAAA;AAChB,eAAe,SAAS,CAAA;AAExB;;;GAGG;AACH,MAAM,MAAM,gBAAgB,GAAG,iBAAiB,GAAG,iBAAiB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Clickable/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAuB,SAAS,EAAE,KAAK,GAAG,EAAE,MAAM,OAAO,CAAA;AAEvE,OAAO,aAAa,CAAA;AAEpB,MAAM,MAAM,cAAc,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ,IAAI;IACnE,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB;;;OAGG;IACH,SAAS,CAAC,EAAE,CAAC,CAAA;CACd,GAAG,IAAI,CAAC,KAAK,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC,CAAA;AAEpD,QAAA,MAAM,SAAS,EAST,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ,EAC3C,CAAC,EAAE,cAAc,CAAC,CAAC,CAAC,KACjB,GAAG,CAAC,OAAO,CAAA;eACD,SAAS;AAExB;;;GAGG;AACH,MAAM,MAAM,gBAAgB,GAAG,iBAAiB,GAAG,iBAAiB,CAAA"}

package/dist/components/Clickable/index2.cjs

@@ -3,7 +3,7 @@ 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);
+react = require_runtime.__toESM(react, 1);
 let react_jsx_runtime = require("react/jsx-runtime");
 
 //#region src/components/Clickable/index.tsx

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

@@ -1 +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"}
+{"version":3,"file":"index2.cjs","names":[],"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,MAAM,kCAAuB,SAAS,UACpC,EAAE,WAAW,GAAG,SAChB,KACA;CACA,MAAM,YAAY,oCAAc,sBAAsB,MAAM,SAAS;CAIrE,OAAO,oEAFyB,aAAa,UAAU,CAAC,SAAS,CAEzD,GAAD;EAAW,GAAI;EAAY;EAAgB;CAAU;AAC9D,CAAC"}

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

@@ -1 +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"}
+{"version":3,"file":"index2.js","names":[],"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,MAAM,YAAY,WAAW,SAAS,UACpC,EAAE,WAAW,GAAG,SAChB,KACA;CACA,MAAM,YAAY,cAAc,sBAAsB,MAAM,SAAS;CAIrE,OAAO,oBAFW,cAAc,aAAa,UAAU,CAAC,SAAS,CAEzD,GAAD;EAAW,GAAI;EAAY;EAAgB;CAAU;AAC9D,CAAC"}

package/dist/components/DropdownSelector/DropdownMenuItem/index2.cjs

@@ -1,5 +1,4 @@
 "use client";
-const require_runtime = require('../../../_virtual/_rolldown/runtime.cjs');
 const require_index = require('../../Icon/index.cjs');
 const require_MenuListContext = require('../MenuList/MenuListContext.cjs');
 const require_index$1 = require('../MenuItem/index.cjs');

package/dist/components/DropdownSelector/DropdownMenuItem/index2.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index2.cjs","names":["MenuItem","MenuItemProps","MenuListContext","ReactNode","useContext","Icon","DropdownMenuItemProps","Omit","secondary","contentFullWidth","DropdownMenuItem","props","value","ctxValue","isSelected","children","rest","fullWidthClassName"],"sources":["../../../../src/components/DropdownSelector/DropdownMenuItem/index.tsx"],"sourcesContent":["import './index.css'\n\nimport MenuItem, { MenuItemProps } from '../MenuItem'\nimport { MenuListContext } from '../MenuList/MenuListContext'\nimport { ReactNode, useContext } from 'react'\nimport Icon from '../../Icon'\n\nexport type DropdownMenuItemProps = Omit<MenuItemProps, 'as'> & {\n  secondary?: ReactNode\n  contentFullWidth?: boolean\n}\n\n/**\n * DropdownSelectorの選択肢として使うMenuItem\n */\nexport default function DropdownMenuItem(props: DropdownMenuItemProps) {\n  const { value: ctxValue } = useContext(MenuListContext)\n  const isSelected = props.value === ctxValue\n  const { children, secondary, ...rest } = props\n\n  const fullWidthClassName = props.contentFullWidth\n    ? 'charcoal-dropdown-selector-menu-fullwidth'\n    : ''\n\n  return (\n    <MenuItem {...rest} aria-selected={isSelected}>\n      <div className={fullWidthClassName}>\n        <div\n          className={`charcoal-dropdown-selector-menu-item-container ${\n            fullWidthClassName\n          }`}\n        >\n          {isSelected && (\n            <Icon\n              className=\"charcoal-dropdown-selector-menu-item-icon\"\n              name=\"16/Check\"\n            />\n          )}\n          <span\n            className={`charcoal-dropdown-selector-menu-item ${fullWidthClassName}`}\n            data-selected={isSelected}\n          >\n            {children}\n          </span>\n        </div>\n        {secondary && (\n          <span className=\"charcoal-dropdown-selector-menu-secondary\">\n            {secondary}\n          </span>\n        )}\n      </div>\n    </MenuItem>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;AAeA,SAAwBU,iBAAiBC,OAA8B;CACrE,MAAM,EAAEC,OAAOC,mCAAwBX,wCAAgB;CACvD,MAAMY,aAAaH,MAAMC,UAAUC;CACnC,MAAM,EAAEE,UAAUP,WAAW,GAAGQ,SAASL;CAEzC,MAAMM,qBAAqBN,MAAMF,mBAC7B,8CACA;CAEJ,OACE,2CAAC,yBAAD;EAAU,GAAIO;EAAM,iBAAeF;YACjC,4CAAC,OAAD;GAAK,WAAWG;aAAhB,CACE,4CAAC,OAAD;IACE,WAAW,kDACTA;cAFJ,CAKGH,cACC,2CAAC,uBAAD;KACE,WAAU;KACV,MAAK;KAER,GACD,2CAAC,QAAD;KACE,WAAW,wCAAwCG;KACnD,iBAAeH;KAEdC;KACG,EACH;OACJP,aACC,2CAAC,QAAD;IAAM,WAAU;cACbA;IAEJ,EACE;;EACI"}
+{"version":3,"file":"index2.cjs","names":[],"sources":["../../../../src/components/DropdownSelector/DropdownMenuItem/index.tsx"],"sourcesContent":["import './index.css'\n\nimport MenuItem, { MenuItemProps } from '../MenuItem'\nimport { MenuListContext } from '../MenuList/MenuListContext'\nimport { ReactNode, useContext } from 'react'\nimport Icon from '../../Icon'\n\nexport type DropdownMenuItemProps = Omit<MenuItemProps, 'as'> & {\n  secondary?: ReactNode\n  contentFullWidth?: boolean\n}\n\n/**\n * DropdownSelectorの選択肢として使うMenuItem\n */\nexport default function DropdownMenuItem(props: DropdownMenuItemProps) {\n  const { value: ctxValue } = useContext(MenuListContext)\n  const isSelected = props.value === ctxValue\n  const { children, secondary, ...rest } = props\n\n  const fullWidthClassName = props.contentFullWidth\n    ? 'charcoal-dropdown-selector-menu-fullwidth'\n    : ''\n\n  return (\n    <MenuItem {...rest} aria-selected={isSelected}>\n      <div className={fullWidthClassName}>\n        <div\n          className={`charcoal-dropdown-selector-menu-item-container ${\n            fullWidthClassName\n          }`}\n        >\n          {isSelected && (\n            <Icon\n              className=\"charcoal-dropdown-selector-menu-item-icon\"\n              name=\"16/Check\"\n            />\n          )}\n          <span\n            className={`charcoal-dropdown-selector-menu-item ${fullWidthClassName}`}\n            data-selected={isSelected}\n          >\n            {children}\n          </span>\n        </div>\n        {secondary && (\n          <span className=\"charcoal-dropdown-selector-menu-secondary\">\n            {secondary}\n          </span>\n        )}\n      </div>\n    </MenuItem>\n  )\n}\n"],"mappings":";;;;;;;;;;;;AAeA,SAAwB,iBAAiB,OAA8B;CACrE,MAAM,EAAE,OAAO,mCAAwB,uCAAe;CACtD,MAAM,aAAa,MAAM,UAAU;CACnC,MAAM,EAAE,UAAU,WAAW,GAAG,SAAS;CAEzC,MAAM,qBAAqB,MAAM,mBAC7B,8CACA;CAEJ,OACE,2CAAC,yBAAD;EAAU,GAAI;EAAM,iBAAe;YACjC,4CAAC,OAAD;GAAK,WAAW;aAAhB,CACE,4CAAC,OAAD;IACE,WAAW,kDACT;cAFJ,CAKG,cACC,2CAAC,uBAAD;KACE,WAAU;KACV,MAAK;IAAU,IAGnB,2CAAC,QAAD;KACE,WAAW,wCAAwC;KACnD,iBAAe;KAEd;IACG,EACH;OACJ,aACC,2CAAC,QAAD;IAAM,WAAU;cACb;GACG,EAEL;;CACG;AAEd"}

package/dist/components/DropdownSelector/DropdownMenuItem/index2.js.map

@@ -1 +1 @@
-{"version":3,"file":"index2.js","names":["MenuItem","MenuItemProps","MenuListContext","ReactNode","useContext","Icon","DropdownMenuItemProps","Omit","secondary","contentFullWidth","DropdownMenuItem","props","value","ctxValue","isSelected","children","rest","fullWidthClassName"],"sources":["../../../../src/components/DropdownSelector/DropdownMenuItem/index.tsx"],"sourcesContent":["import './index.css'\n\nimport MenuItem, { MenuItemProps } from '../MenuItem'\nimport { MenuListContext } from '../MenuList/MenuListContext'\nimport { ReactNode, useContext } from 'react'\nimport Icon from '../../Icon'\n\nexport type DropdownMenuItemProps = Omit<MenuItemProps, 'as'> & {\n  secondary?: ReactNode\n  contentFullWidth?: boolean\n}\n\n/**\n * DropdownSelectorの選択肢として使うMenuItem\n */\nexport default function DropdownMenuItem(props: DropdownMenuItemProps) {\n  const { value: ctxValue } = useContext(MenuListContext)\n  const isSelected = props.value === ctxValue\n  const { children, secondary, ...rest } = props\n\n  const fullWidthClassName = props.contentFullWidth\n    ? 'charcoal-dropdown-selector-menu-fullwidth'\n    : ''\n\n  return (\n    <MenuItem {...rest} aria-selected={isSelected}>\n      <div className={fullWidthClassName}>\n        <div\n          className={`charcoal-dropdown-selector-menu-item-container ${\n            fullWidthClassName\n          }`}\n        >\n          {isSelected && (\n            <Icon\n              className=\"charcoal-dropdown-selector-menu-item-icon\"\n              name=\"16/Check\"\n            />\n          )}\n          <span\n            className={`charcoal-dropdown-selector-menu-item ${fullWidthClassName}`}\n            data-selected={isSelected}\n          >\n            {children}\n          </span>\n        </div>\n        {secondary && (\n          <span className=\"charcoal-dropdown-selector-menu-secondary\">\n            {secondary}\n          </span>\n        )}\n      </div>\n    </MenuItem>\n  )\n}\n"],"mappings":";;;;;;;;;;;;AAeA,SAAwBU,iBAAiBC,OAA8B;CACrE,MAAM,EAAEC,OAAOC,aAAaT,WAAWF,gBAAgB;CACvD,MAAMY,aAAaH,MAAMC,UAAUC;CACnC,MAAM,EAAEE,UAAUP,WAAW,GAAGQ,SAASL;CAEzC,MAAMM,qBAAqBN,MAAMF,mBAC7B,8CACA;CAEJ,OACE,oBAAC,UAAD;EAAU,GAAIO;EAAM,iBAAeF;YACjC,qBAAC,OAAD;GAAK,WAAWG;aAAhB,CACE,qBAAC,OAAD;IACE,WAAW,kDACTA;cAFJ,CAKGH,cACC,oBAAC,MAAD;KACE,WAAU;KACV,MAAK;KAER,GACD,oBAAC,QAAD;KACE,WAAW,wCAAwCG;KACnD,iBAAeH;KAEdC;KACG,EACH;OACJP,aACC,oBAAC,QAAD;IAAM,WAAU;cACbA;IAEJ,EACE;;EACI"}
+{"version":3,"file":"index2.js","names":[],"sources":["../../../../src/components/DropdownSelector/DropdownMenuItem/index.tsx"],"sourcesContent":["import './index.css'\n\nimport MenuItem, { MenuItemProps } from '../MenuItem'\nimport { MenuListContext } from '../MenuList/MenuListContext'\nimport { ReactNode, useContext } from 'react'\nimport Icon from '../../Icon'\n\nexport type DropdownMenuItemProps = Omit<MenuItemProps, 'as'> & {\n  secondary?: ReactNode\n  contentFullWidth?: boolean\n}\n\n/**\n * DropdownSelectorの選択肢として使うMenuItem\n */\nexport default function DropdownMenuItem(props: DropdownMenuItemProps) {\n  const { value: ctxValue } = useContext(MenuListContext)\n  const isSelected = props.value === ctxValue\n  const { children, secondary, ...rest } = props\n\n  const fullWidthClassName = props.contentFullWidth\n    ? 'charcoal-dropdown-selector-menu-fullwidth'\n    : ''\n\n  return (\n    <MenuItem {...rest} aria-selected={isSelected}>\n      <div className={fullWidthClassName}>\n        <div\n          className={`charcoal-dropdown-selector-menu-item-container ${\n            fullWidthClassName\n          }`}\n        >\n          {isSelected && (\n            <Icon\n              className=\"charcoal-dropdown-selector-menu-item-icon\"\n              name=\"16/Check\"\n            />\n          )}\n          <span\n            className={`charcoal-dropdown-selector-menu-item ${fullWidthClassName}`}\n            data-selected={isSelected}\n          >\n            {children}\n          </span>\n        </div>\n        {secondary && (\n          <span className=\"charcoal-dropdown-selector-menu-secondary\">\n            {secondary}\n          </span>\n        )}\n      </div>\n    </MenuItem>\n  )\n}\n"],"mappings":";;;;;;;;;;;;AAeA,SAAwB,iBAAiB,OAA8B;CACrE,MAAM,EAAE,OAAO,aAAa,WAAW,eAAe;CACtD,MAAM,aAAa,MAAM,UAAU;CACnC,MAAM,EAAE,UAAU,WAAW,GAAG,SAAS;CAEzC,MAAM,qBAAqB,MAAM,mBAC7B,8CACA;CAEJ,OACE,oBAAC,UAAD;EAAU,GAAI;EAAM,iBAAe;YACjC,qBAAC,OAAD;GAAK,WAAW;aAAhB,CACE,qBAAC,OAAD;IACE,WAAW,kDACT;cAFJ,CAKG,cACC,oBAAC,MAAD;KACE,WAAU;KACV,MAAK;IAAU,IAGnB,oBAAC,QAAD;KACE,WAAW,wCAAwC;KACnD,iBAAe;KAEd;IACG,EACH;OACJ,aACC,oBAAC,QAAD;IAAM,WAAU;cACb;GACG,EAEL;;CACG;AAEd"}

package/dist/components/DropdownSelector/DropdownPopover.cjs

@@ -1,5 +1,4 @@
 "use client";
-const require_runtime = require('../../_virtual/_rolldown/runtime.cjs');
 const require_index = require('./Popover/index2.cjs');
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");

package/dist/components/DropdownSelector/DropdownPopover.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownPopover.cjs","names":["Key","useEffect","useRef","Popover","PopoverProps","DropdownPopoverProps","value","DropdownPopover","children","props","ref","HTMLDivElement","isOpen","current","triggerRef","style","width","clientWidth","undefined","windowScrollY","window","scrollY","windowScrollX","scrollX","selectedElement","document","querySelector","toString","HTMLElement","focus","scrollTo","el","onClose","inertWorkaround"],"sources":["../../../src/components/DropdownSelector/DropdownPopover.tsx"],"sourcesContent":["import { Key, useEffect, useRef } from 'react'\nimport Popover, { PopoverProps } from './Popover'\n\ntype DropdownPopoverProps = PopoverProps & {\n  value?: Key\n}\n\n/**\n * DropdownSelectorの選択肢をを表示するためのPopover\n * triggerRefの要素と同じ幅になる\n * 表示の際にvalueが等しいDropdownMenuItemを中央に表示する\n */\nexport function DropdownPopover({ children, ...props }: DropdownPopoverProps) {\n  const ref = useRef<HTMLDivElement>(null)\n  useEffect(() => {\n    if (props.isOpen && ref.current && props.triggerRef.current) {\n      ref.current.style.width = `${props.triggerRef.current.clientWidth}px`\n    }\n  }, [props.triggerRef, props.isOpen])\n\n  useEffect(() => {\n    if (props.isOpen) {\n      if (props.value !== undefined && props.value !== '') {\n        // windowのスクロールを維持したまま選択肢をPopoverの中心に表示する\n        const windowScrollY = window.scrollY\n        const windowScrollX = window.scrollX\n        const selectedElement = document.querySelector(\n          `[data-key=\"${props.value.toString()}\"]`,\n        ) as HTMLElement | undefined\n        selectedElement?.focus()\n        window.scrollTo(windowScrollX, windowScrollY)\n      } else {\n        const el = ref.current?.querySelector(\"[role='option']\")\n        if (el instanceof HTMLElement) {\n          el.focus()\n        }\n      }\n    }\n  }, [props.value, props.isOpen])\n\n  return (\n    <Popover\n      isOpen={props.isOpen}\n      onClose={props.onClose}\n      popoverRef={ref}\n      triggerRef={props.triggerRef}\n      inertWorkaround={props.inertWorkaround}\n    >\n      {children}\n    </Popover>\n  )\n}\n"],"mappings":";;;;;;;;;;;;AAYA,SAAgBO,gBAAgB,EAAEC,UAAU,GAAGC,SAA+B;CAC5E,MAAMC,wBAA6B,KAAK;CACxCT,2BAAgB;EACd,IAAIQ,MAAMG,UAAUF,IAAIG,WAAWJ,MAAMK,WAAWD,SAClDH,IAAIG,QAAQE,MAAMC,QAAQ,GAAGP,MAAMK,WAAWD,QAAQI,YAAW;IAElE,CAACR,MAAMK,YAAYL,MAAMG,OAAO,CAAC;CAEpCX,2BAAgB;EACd,IAAIQ,MAAMG,QACR,IAAIH,MAAMH,UAAUY,UAAaT,MAAMH,UAAU,IAAI;GAEnD,MAAMa,gBAAgBC,OAAOC;GAC7B,MAAMC,gBAAgBF,OAAOG;GAI7BC,AAHwBC,SAASC,cAC/B,cAAcjB,MAAMH,MAAMqB,UAAU,CAAA,IAEvB,EAAEE,OAAO;GACxBT,OAAOU,SAASR,eAAeH,cAAc;SACxC;GACL,MAAMY,KAAKrB,IAAIG,SAASa,cAAc,kBAAkB;GACxD,IAAIK,cAAcH,aAChBG,GAAGF,OAAO;;IAIf,CAACpB,MAAMH,OAAOG,MAAMG,OAAO,CAAC;CAE/B,OACE,2CAAC,uBAAD;EACE,QAAQH,MAAMG;EACd,SAASH,MAAMuB;EACf,YAAYtB;EACZ,YAAYD,MAAMK;EAClB,iBAAiBL,MAAMwB;EAEtBzB;EACO"}
+{"version":3,"file":"DropdownPopover.cjs","names":[],"sources":["../../../src/components/DropdownSelector/DropdownPopover.tsx"],"sourcesContent":["import { Key, useEffect, useRef } from 'react'\nimport Popover, { PopoverProps } from './Popover'\n\ntype DropdownPopoverProps = PopoverProps & {\n  value?: Key\n}\n\n/**\n * DropdownSelectorの選択肢をを表示するためのPopover\n * triggerRefの要素と同じ幅になる\n * 表示の際にvalueが等しいDropdownMenuItemを中央に表示する\n */\nexport function DropdownPopover({ children, ...props }: DropdownPopoverProps) {\n  const ref = useRef<HTMLDivElement>(null)\n  useEffect(() => {\n    if (props.isOpen && ref.current && props.triggerRef.current) {\n      ref.current.style.width = `${props.triggerRef.current.clientWidth}px`\n    }\n  }, [props.triggerRef, props.isOpen])\n\n  useEffect(() => {\n    if (props.isOpen) {\n      if (props.value !== undefined && props.value !== '') {\n        // windowのスクロールを維持したまま選択肢をPopoverの中心に表示する\n        const windowScrollY = window.scrollY\n        const windowScrollX = window.scrollX\n        const selectedElement = document.querySelector(\n          `[data-key=\"${props.value.toString()}\"]`,\n        ) as HTMLElement | undefined\n        selectedElement?.focus()\n        window.scrollTo(windowScrollX, windowScrollY)\n      } else {\n        const el = ref.current?.querySelector(\"[role='option']\")\n        if (el instanceof HTMLElement) {\n          el.focus()\n        }\n      }\n    }\n  }, [props.value, props.isOpen])\n\n  return (\n    <Popover\n      isOpen={props.isOpen}\n      onClose={props.onClose}\n      popoverRef={ref}\n      triggerRef={props.triggerRef}\n      inertWorkaround={props.inertWorkaround}\n    >\n      {children}\n    </Popover>\n  )\n}\n"],"mappings":";;;;;;;;;;;AAYA,SAAgB,gBAAgB,EAAE,UAAU,GAAG,SAA+B;CAC5E,MAAM,wBAA6B,IAAI;CACvC,2BAAgB;EACd,IAAI,MAAM,UAAU,IAAI,WAAW,MAAM,WAAW,SAClD,IAAI,QAAQ,MAAM,QAAQ,GAAG,MAAM,WAAW,QAAQ,YAAW;CAErE,GAAG,CAAC,MAAM,YAAY,MAAM,MAAM,CAAC;CAEnC,2BAAgB;EACd,IAAI,MAAM,QACR,IAAI,MAAM,UAAU,UAAa,MAAM,UAAU,IAAI;GAEnD,MAAM,gBAAgB,OAAO;GAC7B,MAAM,gBAAgB,OAAO;GAI7B,AAHwB,SAAS,cAC/B,cAAc,MAAM,MAAM,SAAS,EAAC,GAEtC,CAAe,EAAE,MAAM;GACvB,OAAO,SAAS,eAAe,aAAa;EAC9C,OAAO;GACL,MAAM,KAAK,IAAI,SAAS,cAAc,iBAAiB;GACvD,IAAI,cAAc,aAChB,GAAG,MAAM;EAEb;CAEJ,GAAG,CAAC,MAAM,OAAO,MAAM,MAAM,CAAC;CAE9B,OACE,2CAAC,uBAAD;EACE,QAAQ,MAAM;EACd,SAAS,MAAM;EACf,YAAY;EACZ,YAAY,MAAM;EAClB,iBAAiB,MAAM;EAEtB;CACM;AAEb"}

package/dist/components/DropdownSelector/DropdownPopover.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownPopover.js","names":["Key","useEffect","useRef","Popover","PopoverProps","DropdownPopoverProps","value","DropdownPopover","children","props","ref","HTMLDivElement","isOpen","current","triggerRef","style","width","clientWidth","undefined","windowScrollY","window","scrollY","windowScrollX","scrollX","selectedElement","document","querySelector","toString","HTMLElement","focus","scrollTo","el","onClose","inertWorkaround"],"sources":["../../../src/components/DropdownSelector/DropdownPopover.tsx"],"sourcesContent":["import { Key, useEffect, useRef } from 'react'\nimport Popover, { PopoverProps } from './Popover'\n\ntype DropdownPopoverProps = PopoverProps & {\n  value?: Key\n}\n\n/**\n * DropdownSelectorの選択肢をを表示するためのPopover\n * triggerRefの要素と同じ幅になる\n * 表示の際にvalueが等しいDropdownMenuItemを中央に表示する\n */\nexport function DropdownPopover({ children, ...props }: DropdownPopoverProps) {\n  const ref = useRef<HTMLDivElement>(null)\n  useEffect(() => {\n    if (props.isOpen && ref.current && props.triggerRef.current) {\n      ref.current.style.width = `${props.triggerRef.current.clientWidth}px`\n    }\n  }, [props.triggerRef, props.isOpen])\n\n  useEffect(() => {\n    if (props.isOpen) {\n      if (props.value !== undefined && props.value !== '') {\n        // windowのスクロールを維持したまま選択肢をPopoverの中心に表示する\n        const windowScrollY = window.scrollY\n        const windowScrollX = window.scrollX\n        const selectedElement = document.querySelector(\n          `[data-key=\"${props.value.toString()}\"]`,\n        ) as HTMLElement | undefined\n        selectedElement?.focus()\n        window.scrollTo(windowScrollX, windowScrollY)\n      } else {\n        const el = ref.current?.querySelector(\"[role='option']\")\n        if (el instanceof HTMLElement) {\n          el.focus()\n        }\n      }\n    }\n  }, [props.value, props.isOpen])\n\n  return (\n    <Popover\n      isOpen={props.isOpen}\n      onClose={props.onClose}\n      popoverRef={ref}\n      triggerRef={props.triggerRef}\n      inertWorkaround={props.inertWorkaround}\n    >\n      {children}\n    </Popover>\n  )\n}\n"],"mappings":";;;;;;;;;;;AAYA,SAAgBO,gBAAgB,EAAEC,UAAU,GAAGC,SAA+B;CAC5E,MAAMC,MAAMR,OAAuB,KAAK;CACxCD,gBAAgB;EACd,IAAIQ,MAAMG,UAAUF,IAAIG,WAAWJ,MAAMK,WAAWD,SAClDH,IAAIG,QAAQE,MAAMC,QAAQ,GAAGP,MAAMK,WAAWD,QAAQI,YAAW;IAElE,CAACR,MAAMK,YAAYL,MAAMG,OAAO,CAAC;CAEpCX,gBAAgB;EACd,IAAIQ,MAAMG,QACR,IAAIH,MAAMH,UAAUY,UAAaT,MAAMH,UAAU,IAAI;GAEnD,MAAMa,gBAAgBC,OAAOC;GAC7B,MAAMC,gBAAgBF,OAAOG;GAI7BC,AAHwBC,SAASC,cAC/B,cAAcjB,MAAMH,MAAMqB,UAAU,CAAA,IAEvB,EAAEE,OAAO;GACxBT,OAAOU,SAASR,eAAeH,cAAc;SACxC;GACL,MAAMY,KAAKrB,IAAIG,SAASa,cAAc,kBAAkB;GACxD,IAAIK,cAAcH,aAChBG,GAAGF,OAAO;;IAIf,CAACpB,MAAMH,OAAOG,MAAMG,OAAO,CAAC;CAE/B,OACE,oBAAC,SAAD;EACE,QAAQH,MAAMG;EACd,SAASH,MAAMuB;EACf,YAAYtB;EACZ,YAAYD,MAAMK;EAClB,iBAAiBL,MAAMwB;EAEtBzB;EACO"}
+{"version":3,"file":"DropdownPopover.js","names":[],"sources":["../../../src/components/DropdownSelector/DropdownPopover.tsx"],"sourcesContent":["import { Key, useEffect, useRef } from 'react'\nimport Popover, { PopoverProps } from './Popover'\n\ntype DropdownPopoverProps = PopoverProps & {\n  value?: Key\n}\n\n/**\n * DropdownSelectorの選択肢をを表示するためのPopover\n * triggerRefの要素と同じ幅になる\n * 表示の際にvalueが等しいDropdownMenuItemを中央に表示する\n */\nexport function DropdownPopover({ children, ...props }: DropdownPopoverProps) {\n  const ref = useRef<HTMLDivElement>(null)\n  useEffect(() => {\n    if (props.isOpen && ref.current && props.triggerRef.current) {\n      ref.current.style.width = `${props.triggerRef.current.clientWidth}px`\n    }\n  }, [props.triggerRef, props.isOpen])\n\n  useEffect(() => {\n    if (props.isOpen) {\n      if (props.value !== undefined && props.value !== '') {\n        // windowのスクロールを維持したまま選択肢をPopoverの中心に表示する\n        const windowScrollY = window.scrollY\n        const windowScrollX = window.scrollX\n        const selectedElement = document.querySelector(\n          `[data-key=\"${props.value.toString()}\"]`,\n        ) as HTMLElement | undefined\n        selectedElement?.focus()\n        window.scrollTo(windowScrollX, windowScrollY)\n      } else {\n        const el = ref.current?.querySelector(\"[role='option']\")\n        if (el instanceof HTMLElement) {\n          el.focus()\n        }\n      }\n    }\n  }, [props.value, props.isOpen])\n\n  return (\n    <Popover\n      isOpen={props.isOpen}\n      onClose={props.onClose}\n      popoverRef={ref}\n      triggerRef={props.triggerRef}\n      inertWorkaround={props.inertWorkaround}\n    >\n      {children}\n    </Popover>\n  )\n}\n"],"mappings":";;;;;;;;;;;AAYA,SAAgB,gBAAgB,EAAE,UAAU,GAAG,SAA+B;CAC5E,MAAM,MAAM,OAAuB,IAAI;CACvC,gBAAgB;EACd,IAAI,MAAM,UAAU,IAAI,WAAW,MAAM,WAAW,SAClD,IAAI,QAAQ,MAAM,QAAQ,GAAG,MAAM,WAAW,QAAQ,YAAW;CAErE,GAAG,CAAC,MAAM,YAAY,MAAM,MAAM,CAAC;CAEnC,gBAAgB;EACd,IAAI,MAAM,QACR,IAAI,MAAM,UAAU,UAAa,MAAM,UAAU,IAAI;GAEnD,MAAM,gBAAgB,OAAO;GAC7B,MAAM,gBAAgB,OAAO;GAI7B,AAHwB,SAAS,cAC/B,cAAc,MAAM,MAAM,SAAS,EAAC,GAEtC,CAAe,EAAE,MAAM;GACvB,OAAO,SAAS,eAAe,aAAa;EAC9C,OAAO;GACL,MAAM,KAAK,IAAI,SAAS,cAAc,iBAAiB;GACvD,IAAI,cAAc,aAChB,GAAG,MAAM;EAEb;CAEJ,GAAG,CAAC,MAAM,OAAO,MAAM,MAAM,CAAC;CAE9B,OACE,oBAAC,SAAD;EACE,QAAQ,MAAM;EACd,SAAS,MAAM;EACf,YAAY;EACZ,YAAY,MAAM;EAClB,iBAAiB,MAAM;EAEtB;CACM;AAEb"}

package/dist/components/DropdownSelector/ListItem/index.d.ts

@@ -5,6 +5,6 @@ export type ListItemProps<T extends React.ElementType = 'li'> = {
     children?: ReactNode;
     as?: T;
 } & Omit<React.ComponentPropsWithRef<T>, 'children' | 'as'>;
-declare const ListItem: <T extends React.ElementType = "li">(p: ListItemProps<T>) => JSX.Element;
+declare const ListItem: <T extends React.ElementType = 'li'>(p: ListItemProps<T>) => JSX.Element;
 export default ListItem;
 //# sourceMappingURL=index.d.ts.map

package/dist/components/DropdownSelector/ListItem/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/DropdownSelector/ListItem/index.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAEpB,OAAO,EAA4B,SAAS,EAAW,KAAK,GAAG,EAAE,MAAM,OAAO,CAAA;AAG9E,MAAM,MAAM,gBAAgB,GACxB,MAAM,GAAG,CAAC,iBAAiB,GAE3B,KAAK,CAAC,qBAAqB,CAAC,GAAG,CAAC,CAAA;AAEpC,MAAM,MAAM,aAAa,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,IAAI,IAAI;IAC9D,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,EAAE,CAAC,EAAE,CAAC,CAAA;CACP,GAAG,IAAI,CAAC,KAAK,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAAE,UAAU,GAAG,IAAI,CAAC,CAAA;AAE3D,QAAA,MAAM,QAAQ,EAOR,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,IAAI,EAAE,CAAC,EAAE,aAAa,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,OAAO,CAAA;AAE9E,eAAe,QAAQ,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/DropdownSelector/ListItem/index.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAEpB,OAAO,EAA4B,SAAS,EAAW,KAAK,GAAG,EAAE,MAAM,OAAO,CAAA;AAG9E,MAAM,MAAM,gBAAgB,GACxB,MAAM,GAAG,CAAC,iBAAiB,GAE3B,KAAK,CAAC,qBAAqB,CAAC,GAAG,CAAC,CAAA;AAEpC,MAAM,MAAM,aAAa,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,IAAI,IAAI;IAC9D,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,EAAE,CAAC,EAAE,CAAC,CAAA;CACP,GAAG,IAAI,CAAC,KAAK,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAAE,UAAU,GAAG,IAAI,CAAC,CAAA;AAE3D,QAAA,MAAM,QAAQ,EAOR,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,IAAI,EAAE,CAAC,EAAE,aAAa,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,OAAO,CAAA;eAE/D,QAAQ"}

package/dist/components/DropdownSelector/ListItem/index2.cjs

@@ -1,5 +1,4 @@
 "use client";
-const require_runtime = require('../../../_virtual/_rolldown/runtime.cjs');
 const require_useClassNames = require('../../../_lib/useClassNames.cjs');
 require('./index.cjs');
 let react = require("react");

package/dist/components/DropdownSelector/ListItem/index2.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index2.cjs","names":["ForwardedRef","forwardRef","ReactNode","useMemo","JSX","useClassNames","CustomJSXElement","IntrinsicElements","React","JSXElementConstructor","ListItemProps","ElementType","children","as","T","Omit","ComponentPropsWithRef","ListItem","className","props","ref","HTMLLIElement","Component","classNames","p","Element"],"sources":["../../../../src/components/DropdownSelector/ListItem/index.tsx"],"sourcesContent":["import './index.css'\n\nimport { ForwardedRef, forwardRef, ReactNode, useMemo, type JSX } from 'react'\nimport { useClassNames } from '../../../_lib/useClassNames'\n\nexport type CustomJSXElement =\n  | keyof JSX.IntrinsicElements\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  | React.JSXElementConstructor<any>\n\nexport type ListItemProps<T extends React.ElementType = 'li'> = {\n  children?: ReactNode\n  as?: T\n} & Omit<React.ComponentPropsWithRef<T>, 'children' | 'as'>\n\nconst ListItem = forwardRef(function ListItem<T extends React.ElementType>(\n  { as, className, ...props }: ListItemProps<T>,\n  ref: ForwardedRef<HTMLLIElement>,\n) {\n  const Component = useMemo(() => as ?? 'li', [as])\n  const classNames = useClassNames('charcoal-list-item', className)\n  return <Component className={classNames} ref={ref} {...props} />\n}) as <T extends React.ElementType = 'li'>(p: ListItemProps<T>) => JSX.Element\n\nexport default ListItem\n"],"mappings":";;;;;;;;AAeA,MAAMiB,iCAAsB,SAASA,SACnC,EAAEJ,IAAIK,WAAW,GAAGC,SACpBC,KACA;CAGA,OAAO,oEAFyBP,MAAM,MAAM,CAACA,GAAG,CAE/B,EAAV;EAAW,WADCR,oCAAc,sBAAsBa,UAChB;EAAOE;EAAK,GAAID;EAAS;EAChE"}
+{"version":3,"file":"index2.cjs","names":[],"sources":["../../../../src/components/DropdownSelector/ListItem/index.tsx"],"sourcesContent":["import './index.css'\n\nimport { ForwardedRef, forwardRef, ReactNode, useMemo, type JSX } from 'react'\nimport { useClassNames } from '../../../_lib/useClassNames'\n\nexport type CustomJSXElement =\n  | keyof JSX.IntrinsicElements\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  | React.JSXElementConstructor<any>\n\nexport type ListItemProps<T extends React.ElementType = 'li'> = {\n  children?: ReactNode\n  as?: T\n} & Omit<React.ComponentPropsWithRef<T>, 'children' | 'as'>\n\nconst ListItem = forwardRef(function ListItem<T extends React.ElementType>(\n  { as, className, ...props }: ListItemProps<T>,\n  ref: ForwardedRef<HTMLLIElement>,\n) {\n  const Component = useMemo(() => as ?? 'li', [as])\n  const classNames = useClassNames('charcoal-list-item', className)\n  return <Component className={classNames} ref={ref} {...props} />\n}) as <T extends React.ElementType = 'li'>(p: ListItemProps<T>) => JSX.Element\n\nexport default ListItem\n"],"mappings":";;;;;;;AAeA,MAAM,iCAAsB,SAAS,SACnC,EAAE,IAAI,WAAW,GAAG,SACpB,KACA;CAGA,OAAO,oEAFyB,MAAM,MAAM,CAAC,EAAE,CAEvC,GAAD;EAAW,WADC,oCAAc,sBAAsB,SAC1B;EAAiB;EAAK,GAAI;CAAM;AAC/D,CAAC"}

package/dist/components/DropdownSelector/ListItem/index2.js.map

@@ -1 +1 @@
-{"version":3,"file":"index2.js","names":["ForwardedRef","forwardRef","ReactNode","useMemo","JSX","useClassNames","CustomJSXElement","IntrinsicElements","React","JSXElementConstructor","ListItemProps","ElementType","children","as","T","Omit","ComponentPropsWithRef","ListItem","className","props","ref","HTMLLIElement","Component","classNames","p","Element"],"sources":["../../../../src/components/DropdownSelector/ListItem/index.tsx"],"sourcesContent":["import './index.css'\n\nimport { ForwardedRef, forwardRef, ReactNode, useMemo, type JSX } from 'react'\nimport { useClassNames } from '../../../_lib/useClassNames'\n\nexport type CustomJSXElement =\n  | keyof JSX.IntrinsicElements\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  | React.JSXElementConstructor<any>\n\nexport type ListItemProps<T extends React.ElementType = 'li'> = {\n  children?: ReactNode\n  as?: T\n} & Omit<React.ComponentPropsWithRef<T>, 'children' | 'as'>\n\nconst ListItem = forwardRef(function ListItem<T extends React.ElementType>(\n  { as, className, ...props }: ListItemProps<T>,\n  ref: ForwardedRef<HTMLLIElement>,\n) {\n  const Component = useMemo(() => as ?? 'li', [as])\n  const classNames = useClassNames('charcoal-list-item', className)\n  return <Component className={classNames} ref={ref} {...props} />\n}) as <T extends React.ElementType = 'li'>(p: ListItemProps<T>) => JSX.Element\n\nexport default ListItem\n"],"mappings":";;;;;;;AAeA,MAAMiB,WAAWhB,WAAW,SAASgB,SACnC,EAAEJ,IAAIK,WAAW,GAAGC,SACpBC,KACA;CAGA,OAAO,oBAFWjB,cAAcU,MAAM,MAAM,CAACA,GAAG,CAE/B,EAAV;EAAW,WADCR,cAAc,sBAAsBa,UAChB;EAAOE;EAAK,GAAID;EAAS;EAChE"}
+{"version":3,"file":"index2.js","names":[],"sources":["../../../../src/components/DropdownSelector/ListItem/index.tsx"],"sourcesContent":["import './index.css'\n\nimport { ForwardedRef, forwardRef, ReactNode, useMemo, type JSX } from 'react'\nimport { useClassNames } from '../../../_lib/useClassNames'\n\nexport type CustomJSXElement =\n  | keyof JSX.IntrinsicElements\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  | React.JSXElementConstructor<any>\n\nexport type ListItemProps<T extends React.ElementType = 'li'> = {\n  children?: ReactNode\n  as?: T\n} & Omit<React.ComponentPropsWithRef<T>, 'children' | 'as'>\n\nconst ListItem = forwardRef(function ListItem<T extends React.ElementType>(\n  { as, className, ...props }: ListItemProps<T>,\n  ref: ForwardedRef<HTMLLIElement>,\n) {\n  const Component = useMemo(() => as ?? 'li', [as])\n  const classNames = useClassNames('charcoal-list-item', className)\n  return <Component className={classNames} ref={ref} {...props} />\n}) as <T extends React.ElementType = 'li'>(p: ListItemProps<T>) => JSX.Element\n\nexport default ListItem\n"],"mappings":";;;;;;;AAeA,MAAM,WAAW,WAAW,SAAS,SACnC,EAAE,IAAI,WAAW,GAAG,SACpB,KACA;CAGA,OAAO,oBAFW,cAAc,MAAM,MAAM,CAAC,EAAE,CAEvC,GAAD;EAAW,WADC,cAAc,sBAAsB,SAC1B;EAAiB;EAAK,GAAI;CAAM;AAC/D,CAAC"}

package/dist/components/DropdownSelector/MenuItem/index.cjs

@@ -1,5 +1,4 @@
 "use client";
-const require_runtime = require('../../../_virtual/_rolldown/runtime.cjs');
 const require_index = require('../ListItem/index2.cjs');
 const require_useMenuItemHandleKeyDown = require('./internals/useMenuItemHandleKeyDown.cjs');
 let react = require("react");
@@ -12,12 +11,40 @@ let react_jsx_runtime = require("react/jsx-runtime");
 */
 const MenuItem = (0, react.forwardRef)(function MenuItem({ className: _, value, disabled, ...props }, ref) {
 	const [handleKeyDown, setContextValue] = require_useMenuItemHandleKeyDown.useMenuItemHandleKeyDown(value);
+	const penHandledRef = (0, react.useRef)(false);
+	const pointerStartRef = (0, react.useRef)(null);
+	const handlePointerDown = (0, react.useCallback)((e) => {
+		if (e.pointerType === "pen") pointerStartRef.current = {
+			x: e.clientX,
+			y: e.clientY
+		};
+	}, []);
+	const handlePointerUp = (0, react.useCallback)((e) => {
+		if (e.pointerType !== "pen" || disabled === true) return;
+		const start = pointerStartRef.current;
+		if (!start) return;
+		const dx = Math.abs(e.clientX - start.x);
+		const dy = Math.abs(e.clientY - start.y);
+		if (dx > 8 || dy > 8) return;
+		penHandledRef.current = true;
+		setContextValue();
+	}, [disabled, setContextValue]);
+	const handleClick = (0, react.useCallback)(() => {
+		if (penHandledRef.current) {
+			penHandledRef.current = false;
+			return;
+		}
+		if (disabled === true) return;
+		setContextValue();
+	}, [disabled, setContextValue]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.default, {
 		...props,
 		ref,
 		"data-key": value,
 		onKeyDown: handleKeyDown,
-		onClick: disabled === true ? void 0 : setContextValue,
+		onPointerDown: handlePointerDown,
+		onPointerUp: handlePointerUp,
+		onClick: handleClick,
 		tabIndex: -1,
 		"aria-disabled": disabled,
 		role: "option",

package/dist/components/DropdownSelector/MenuItem/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["ForwardedRef","forwardRef","ListItem","ListItemProps","useMenuItemHandleKeyDown","MenuItemProps","React","ElementType","value","disabled","T","MenuItem","className","_","props","ref","HTMLLIElement","handleKeyDown","setContextValue","undefined","children"],"sources":["../../../../src/components/DropdownSelector/MenuItem/index.tsx"],"sourcesContent":["import { ForwardedRef, forwardRef } from 'react'\nimport ListItem, { ListItemProps } from '../ListItem'\nimport { useMenuItemHandleKeyDown } from './internals/useMenuItemHandleKeyDown'\n\nexport type MenuItemProps<T extends React.ElementType = 'li'> = {\n  value?: string\n  disabled?: boolean\n} & ListItemProps<T>\n\n/**\n * 上下キーでフォーカス移動でき、エンターキーで選択できるリストの項目\n * 基本的に`<MenuList>`, `<MenuGroup>`と合わせて使用する\n */\nconst MenuItem = forwardRef(function MenuItem<\n  T extends React.ElementType = 'li',\n>(\n  { className: _, value, disabled, ...props }: MenuItemProps<T>,\n  ref: ForwardedRef<HTMLLIElement>,\n) {\n  const [handleKeyDown, setContextValue] = useMenuItemHandleKeyDown(value)\n  return (\n    // @ts-expect-error TODO: fix mismatch between MenuItemProps and ListItemProps\n    <ListItem\n      {...props}\n      ref={ref}\n      data-key={value}\n      onKeyDown={handleKeyDown}\n      onClick={disabled === true ? undefined : setContextValue}\n      tabIndex={-1}\n      aria-disabled={disabled}\n      role=\"option\"\n    >\n      {props.children}\n    </ListItem>\n  )\n})\nexport default MenuItem\n"],"mappings":";;;;;;;;;;;;AAaA,MAAMW,iCAAsB,SAASA,SAGnC,EAAEC,WAAWC,GAAGL,OAAOC,UAAU,GAAGK,SACpCC,KACA;CACA,MAAM,CAACE,eAAeC,mBAAmBd,0DAAyBI,MAAM;CACxE,OAEE,2CAAC,uBAAD;EACE,GAAIM;EACCC;EACL,YAAUP;EACV,WAAWS;EACX,SAASR,aAAa,OAAOU,SAAYD;EACzC,UAAU;EACV,iBAAeT;EACf,MAAK;YAEJK,MAAMM;EACC;EAEZ"}
+{"version":3,"file":"index.cjs","names":[],"sources":["../../../../src/components/DropdownSelector/MenuItem/index.tsx"],"sourcesContent":["import { ForwardedRef, forwardRef, useCallback, useRef } from 'react'\nimport ListItem, { ListItemProps } from '../ListItem'\nimport { useMenuItemHandleKeyDown } from './internals/useMenuItemHandleKeyDown'\n\nexport type MenuItemProps<T extends React.ElementType = 'li'> = {\n  value?: string\n  disabled?: boolean\n} & ListItemProps<T>\n\n/**\n * 上下キーでフォーカス移動でき、エンターキーで選択できるリストの項目\n * 基本的に`<MenuList>`, `<MenuGroup>`と合わせて使用する\n */\nconst MenuItem = forwardRef(function MenuItem<\n  T extends React.ElementType = 'li',\n>(\n  { className: _, value, disabled, ...props }: MenuItemProps<T>,\n  ref: ForwardedRef<HTMLLIElement>,\n) {\n  const [handleKeyDown, setContextValue] = useMenuItemHandleKeyDown(value)\n  const penHandledRef = useRef(false)\n  const pointerStartRef = useRef<{ x: number; y: number } | null>(null)\n\n  const handlePointerDown = useCallback(\n    (e: React.PointerEvent<HTMLLIElement>) => {\n      if (e.pointerType === 'pen') {\n        pointerStartRef.current = { x: e.clientX, y: e.clientY }\n      }\n    },\n    [],\n  )\n\n  const handlePointerUp = useCallback(\n    (e: React.PointerEvent<HTMLLIElement>) => {\n      if (e.pointerType !== 'pen' || disabled === true) return\n      const start = pointerStartRef.current\n      if (!start) return\n      const dx = Math.abs(e.clientX - start.x)\n      const dy = Math.abs(e.clientY - start.y)\n      // タップとドラッグを区別するための許容量\n      if (dx > 8 || dy > 8) return\n      penHandledRef.current = true\n      setContextValue()\n    },\n    [disabled, setContextValue],\n  )\n\n  const handleClick = useCallback(() => {\n    if (penHandledRef.current) {\n      penHandledRef.current = false\n      return\n    }\n    if (disabled === true) return\n    setContextValue()\n  }, [disabled, setContextValue])\n\n  return (\n    // @ts-expect-error TODO: fix mismatch between MenuItemProps and ListItemProps\n    <ListItem\n      {...props}\n      ref={ref}\n      data-key={value}\n      onKeyDown={handleKeyDown}\n      onPointerDown={handlePointerDown}\n      onPointerUp={handlePointerUp}\n      onClick={handleClick}\n      tabIndex={-1}\n      aria-disabled={disabled}\n      role=\"option\"\n    >\n      {props.children}\n    </ListItem>\n  )\n})\nexport default MenuItem\n"],"mappings":";;;;;;;;;;;AAaA,MAAM,iCAAsB,SAAS,SAGnC,EAAE,WAAW,GAAG,OAAO,UAAU,GAAG,SACpC,KACA;CACA,MAAM,CAAC,eAAe,mBAAmB,0DAAyB,KAAK;CACvE,MAAM,kCAAuB,KAAK;CAClC,MAAM,oCAA0D,IAAI;CAEpE,MAAM,4CACH,MAAyC;EACxC,IAAI,EAAE,gBAAgB,OACpB,gBAAgB,UAAU;GAAE,GAAG,EAAE;GAAS,GAAG,EAAE;EAAQ;CAE3D,GACA,CAAA,CACF;CAEA,MAAM,0CACH,MAAyC;EACxC,IAAI,EAAE,gBAAgB,SAAS,aAAa,MAAM;EAClD,MAAM,QAAQ,gBAAgB;EAC9B,IAAI,CAAC,OAAO;EACZ,MAAM,KAAK,KAAK,IAAI,EAAE,UAAU,MAAM,CAAC;EACvC,MAAM,KAAK,KAAK,IAAI,EAAE,UAAU,MAAM,CAAC;EAEvC,IAAI,KAAK,KAAK,KAAK,GAAG;EACtB,cAAc,UAAU;EACxB,gBAAgB;CAClB,GACA,CAAC,UAAU,eAAe,CAC5B;CAEA,MAAM,2CAAgC;EACpC,IAAI,cAAc,SAAS;GACzB,cAAc,UAAU;GACxB;EACF;EACA,IAAI,aAAa,MAAM;EACvB,gBAAgB;CAClB,GAAG,CAAC,UAAU,eAAe,CAAC;CAE9B,OAEE,2CAAC,uBAAD;EACE,GAAI;EACC;EACL,YAAU;EACV,WAAW;EACX,eAAe;EACf,aAAa;EACb,SAAS;EACT,UAAU;EACV,iBAAe;EACf,MAAK;YAEJ,MAAM;CACC;AAEd,CAAC"}

package/dist/components/DropdownSelector/MenuItem/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/DropdownSelector/MenuItem/index.tsx"],"names":[],"mappings":"AACA,OAAiB,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;AAGrD,MAAM,MAAM,aAAa,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,IAAI,IAAI;IAC9D,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,GAAG,aAAa,CAAC,CAAC,CAAC,CAAA;AAEpB;;;GAGG;AACH,QAAA,MAAM,QAAQ,qMAsBZ,CAAA;AACF,eAAe,QAAQ,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/DropdownSelector/MenuItem/index.tsx"],"names":[],"mappings":"AACA,OAAiB,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;AAGrD,MAAM,MAAM,aAAa,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,IAAI,IAAI;IAC9D,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,GAAG,aAAa,CAAC,CAAC,CAAC,CAAA;AAEpB;;;GAGG;AACH,QAAA,MAAM,QAAQ,qMA4DZ,CAAA;eACa,QAAQ"}