smarthr-ui 99.1.0 → 99.2.0

package/lib/components/Calendar/Calendar.cjs

@@ -5,6 +5,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var dayjs_min = require('../../_virtual/dayjs.min.cjs');
 var React = require('react');
 var index = require('./../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss@3.4.19_ts-node@10.9.2_@swc_core@1.15.46_@types_node@20.19.43_typescript@5.9.3__/vendor/tailwind-variants/dist/index.cjs');
+var hooks_useLatest = require('../../hooks/useLatest.cjs');
 require('../../intl/IntlProvider.cjs');
 require('react-intl');
 var intl_useDateFormat = require('../../intl/useDateFormat.cjs');
@@ -121,9 +122,12 @@ const Calendar = React.forwardRef(({ from = components_Calendar_calendarHelper.m
 const YearMonthRender = React.memo(({ children, className }) => jsxRuntime.jsx("div", { className: className, children: children }));
 const YearSelectButton = React.memo(({ handleClick, ...rest }) => (jsxRuntime.jsx(components_Button_Button.Button, { ...rest, onClick: handleClick, size: "S", children: jsxRuntime.jsx(components_Icon_FaIcon.FaCaretDownIcon, { alt: jsxRuntime.jsx(intl_Localizer.Localizer, { id: "smarthr-ui/Calendar/selectYear", defaultText: "\u5E74\u3092\u9078\u629E\u3059\u308B" }) }) })));
 const MonthDirectionCluster = React.memo(({ isSelectingYear, directionMonth: { prev, next }, from, to, setCurrentMonth, className }) => {
-    const onClickMonthPrev = React.useCallback(() => setCurrentMonth(prev), [prev, setCurrentMonth]);
-    const onClickMonthNext = React.useCallback(() => setCurrentMonth(next), [next, setCurrentMonth]);
-    return (jsxRuntime.jsxs(components_Layout_Cluster_Cluster.Cluster, { gap: 0.5, className: className, children: [jsxRuntime.jsx(components_Button_Button.Button, { disabled: isSelectingYear || prev.isBefore(from, 'month'), onClick: onClickMonthPrev, size: "S", className: "smarthr-ui-Calendar-monthButtonPrev", children: jsxRuntime.jsx(components_Icon_FaIcon.FaChevronLeftIcon, { alt: jsxRuntime.jsx(intl_Localizer.Localizer, { id: "smarthr-ui/Calendar/previousMonth", defaultText: "\u524D\u306E\u6708\u3078" }) }) }), jsxRuntime.jsx(components_Button_Button.Button, { disabled: isSelectingYear || next.isAfter(to, 'month'), onClick: onClickMonthNext, size: "S", className: "smarthr-ui-Calendar-monthButtonNext", children: jsxRuntime.jsx(components_Icon_FaIcon.FaChevronRightIcon, { alt: jsxRuntime.jsx(intl_Localizer.Localizer, { id: "smarthr-ui/Calendar/nextMonth", defaultText: "\u6B21\u306E\u6708\u3078" }) }) })] }));
+    const latest = hooks_useLatest.useLatest({ prev, next, setCurrentMonth });
+    const functions = React.useMemo(() => ({
+        handleClickMonthPrev: () => latest.setCurrentMonth(latest.prev),
+        handleClickMonthNext: () => latest.setCurrentMonth(latest.next),
+    }), [latest]);
+    return (jsxRuntime.jsxs(components_Layout_Cluster_Cluster.Cluster, { gap: 0.5, className: className, children: [jsxRuntime.jsx(components_Button_Button.Button, { disabled: isSelectingYear || prev.isBefore(from, 'month'), onClick: functions.handleClickMonthPrev, size: "S", className: "smarthr-ui-Calendar-monthButtonPrev", children: jsxRuntime.jsx(components_Icon_FaIcon.FaChevronLeftIcon, { alt: jsxRuntime.jsx(intl_Localizer.Localizer, { id: "smarthr-ui/Calendar/previousMonth", defaultText: "\u524D\u306E\u6708\u3078" }) }) }), jsxRuntime.jsx(components_Button_Button.Button, { disabled: isSelectingYear || next.isAfter(to, 'month'), onClick: functions.handleClickMonthNext, size: "S", className: "smarthr-ui-Calendar-monthButtonNext", children: jsxRuntime.jsx(components_Icon_FaIcon.FaChevronRightIcon, { alt: jsxRuntime.jsx(intl_Localizer.Localizer, { id: "smarthr-ui/Calendar/nextMonth", defaultText: "\u6B21\u306E\u6708\u3078" }) }) })] }));
 });
 
 exports.Calendar = Calendar;

package/lib/components/Calendar/Calendar.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Calendar.cjs","sources":["../../../src/components/Calendar/Calendar.tsx"],"sourcesContent":["'use client'\n\nimport dayjs from 'dayjs'\nimport {\n  type ComponentProps,\n  type MouseEvent,\n  type PropsWithChildren,\n  forwardRef,\n  memo,\n  useCallback,\n  useEffect,\n  useId,\n  useMemo,\n  useState,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { Localizer, useDateFormat } from '../../intl'\nimport { Button } from '../Button'\nimport { FaCaretDownIcon, FaChevronLeftIcon, FaChevronRightIcon } from '../Icon'\nimport { Cluster } from '../Layout'\n\nimport { CalendarTable } from './CalendarTable'\nimport { YearPicker } from './YearPicker'\nimport { getFromDate, getMonthArray, getToDate, isBetween, minDate } from './calendarHelper'\n\ntype BaseProps = {\n  /** 選択可能な開始日 */\n  from?: Date\n  /** 選択可能な終了日 */\n  to?: Date\n  /** トリガのセレクトイベントを処理するハンドラ */\n  onSelectDate: (e: MouseEvent, date: Date) => void\n  /** 選択された日付 */\n  value?: Date\n}\ntype Props = BaseProps & Omit<ComponentProps<'div'>, keyof BaseProps>\n\ntype DayJsType = ReturnType<typeof dayjs>\n\nconst classNameGenerator = tv({\n  slots: {\n    container:\n      'smarthr-ui-Calendar shr-inline-block shr-overflow-hidden shr-rounded-m shr-bg-white shr-text-black shr-shadow-layer-3 forced-colors:shr-border-shorthand forced-colors:shr-shadow-none',\n    header: 'smarthr-ui-Calendar-header shr-border-b-shorthand shr-flex shr-items-center shr-p-1',\n    yearMonth: 'smarthr-ui-Calendar-yearMonth shr-me-0.5 shr-text-base shr-font-bold',\n    monthButtons: 'smarthr-ui-Calendar-monthButtons shr-ms-auto shr-flex',\n    tableLayout: 'shr-relative',\n    yearSelectButton:\n      'smarthr-ui-Calendar-selectingYear [&[aria-expanded=\"true\"]_.smarthr-ui-Icon]:shr-rotate-180',\n  },\n})\n\nexport const Calendar = forwardRef<HTMLDivElement, Props>(\n  ({ from = minDate, to, onSelectDate, value, className, ...rest }, ref) => {\n    const { formatDate, getWeekStartDay } = useDateFormat()\n\n    const classNames = useMemo(() => {\n      const { container, yearMonth, header, monthButtons, tableLayout, yearSelectButton } =\n        classNameGenerator()\n\n      return {\n        container: container({ className }),\n        header: header(),\n        yearMonth: yearMonth(),\n        monthButtons: monthButtons(),\n        tableLayout: tableLayout(),\n        yearSelectButton: yearSelectButton(),\n      }\n    }, [className])\n\n    const formattedFrom = useMemo(() => {\n      const date = getFromDate(from)\n      const day = dayjs(date)\n\n      return {\n        day,\n        date,\n        year: day.year(),\n      }\n    }, [from])\n    const formattedTo = useMemo(() => {\n      const date = getToDate(to)\n      const day = dayjs(date)\n\n      return {\n        day,\n        date,\n        year: day.year(),\n      }\n    }, [to])\n\n    const isValidValue = useMemo(\n      () => value && isBetween(value, formattedFrom.date, formattedTo.date),\n      [value, formattedFrom.date, formattedTo.date],\n    )\n\n    const [currentMonth, setCurrentMonth] = useState(() => {\n      if (isValidValue) {\n        return dayjs(value)\n      }\n\n      const today = dayjs()\n\n      return formattedTo.day.isBefore(today)\n        ? formattedTo.day\n        : formattedFrom.day.isAfter(today)\n          ? formattedFrom.day\n          : today\n    })\n    const [isSelectingYear, setIsSelectingYear] = useState(false)\n\n    const yearPickerId = useId()\n\n    useEffect(() => {\n      if (isValidValue) {\n        setCurrentMonth(dayjs(value))\n      }\n    }, [value, isValidValue])\n\n    const calculatedCurrentMonth = useMemo(() => {\n      const d = currentMonth.toDate()\n\n      return {\n        prev: currentMonth.subtract(1, 'month'),\n        next: currentMonth.add(1, 'month'),\n        day: currentMonth,\n        months: getMonthArray(d, getWeekStartDay()),\n        yearMonthText: formatDate({\n          date: d,\n          parts: ['year', 'month'],\n          options: {\n            disableSlashInJa: true,\n            capitalizeFirstLetter: true,\n          },\n        }),\n        selectedText: currentMonth.toString(),\n      }\n    }, [currentMonth, formatDate, getWeekStartDay])\n\n    const functions = useMemo(\n      () => ({\n        handleSelectYear: (e: MouseEvent<HTMLButtonElement>) => {\n          e.stopPropagation()\n\n          const year = parseInt(e.currentTarget.value, 10)\n\n          setCurrentMonth((prev) => prev.year(year))\n          setIsSelectingYear(false)\n        },\n        handleClickSelectYear: (e: MouseEvent<HTMLButtonElement>) => {\n          e.stopPropagation()\n          setIsSelectingYear((current) => !current)\n        },\n      }),\n      [],\n    )\n\n    return (\n      <div {...rest} ref={ref} className={classNames.container}>\n        <header className={classNames.header}>\n          <YearMonthRender className={classNames.yearMonth}>\n            {calculatedCurrentMonth.yearMonthText}\n          </YearMonthRender>\n          <YearSelectButton\n            aria-expanded={isSelectingYear}\n            aria-controls={yearPickerId}\n            handleClick={functions.handleClickSelectYear}\n            className={classNames.yearSelectButton}\n          />\n          <MonthDirectionCluster\n            isSelectingYear={isSelectingYear}\n            directionMonth={calculatedCurrentMonth}\n            from={formattedFrom.day}\n            to={formattedTo.day}\n            setCurrentMonth={setCurrentMonth}\n            className={classNames.monthButtons}\n          />\n        </header>\n        <div className={classNames.tableLayout}>\n          <YearPicker\n            fromYear={formattedFrom.year}\n            toYear={formattedTo.year}\n            selectedYear={value?.getFullYear()}\n            handleSelectYear={functions.handleSelectYear}\n            isDisplayed={isSelectingYear}\n            id={yearPickerId}\n          />\n          <CalendarTable\n            current={calculatedCurrentMonth}\n            from={formattedFrom.date}\n            to={formattedTo.date}\n            onSelectDate={onSelectDate}\n            selectedDayText={isValidValue ? calculatedCurrentMonth.selectedText : ''}\n          />\n        </div>\n      </div>\n    )\n  },\n)\n\nconst YearMonthRender = memo<PropsWithChildren<{ className: string }>>(\n  ({ children, className }) => <div className={className}>{children}</div>,\n)\n\nconst YearSelectButton = memo<{\n  'aria-expanded': boolean\n  'aria-controls': string\n  handleClick: (e: MouseEvent<HTMLButtonElement>) => void\n  className: string\n}>(({ handleClick, ...rest }) => (\n  <Button {...rest} onClick={handleClick} size=\"S\">\n    <FaCaretDownIcon\n      alt={<Localizer id=\"smarthr-ui/Calendar/selectYear\" defaultText=\"年を選択する\" />}\n    />\n  </Button>\n))\n\nconst MonthDirectionCluster = memo<{\n  isSelectingYear: boolean\n  directionMonth: {\n    prev: DayJsType\n    next: DayJsType\n  }\n  from: DayJsType\n  to: DayJsType\n  setCurrentMonth: (day: DayJsType) => void\n  className: string\n}>(({ isSelectingYear, directionMonth: { prev, next }, from, to, setCurrentMonth, className }) => {\n  const onClickMonthPrev = useCallback(() => setCurrentMonth(prev), [prev, setCurrentMonth])\n  const onClickMonthNext = useCallback(() => setCurrentMonth(next), [next, setCurrentMonth])\n\n  return (\n    <Cluster gap={0.5} className={className}>\n      <Button\n        disabled={isSelectingYear || prev.isBefore(from, 'month')}\n        onClick={onClickMonthPrev}\n        size=\"S\"\n        className=\"smarthr-ui-Calendar-monthButtonPrev\"\n      >\n        <FaChevronLeftIcon\n          alt={<Localizer id=\"smarthr-ui/Calendar/previousMonth\" defaultText=\"前の月へ\" />}\n        />\n      </Button>\n      <Button\n        disabled={isSelectingYear || next.isAfter(to, 'month')}\n        onClick={onClickMonthNext}\n        size=\"S\"\n        className=\"smarthr-ui-Calendar-monthButtonNext\"\n      >\n        <FaChevronRightIcon\n          alt={<Localizer id=\"smarthr-ui/Calendar/nextMonth\" defaultText=\"次の月へ\" />}\n        />\n      </Button>\n    </Cluster>\n  )\n})\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCA;AACE;AACE;AAEA;AACA;AACA;AACA;AACA;AAED;AACF;AAEM;;AAIH;AACE;;AAIE;;;;;;;AAOJ;AAEA;AACE;AACA;;;;AAKE;;AAEJ;AACA;AACE;AACA;;;;AAKE;;AAEJ;AAEA;;;AAOI;;AAGF;AAEA;;;;;AAKF;;AAGA;;;AAII;;AAEJ;AAEA;AACE;;;;AAKE;AACA;;AAEE;AACA;AACA;AACE;AACA;AACD;;AAEH;;;AAIJ;AAEI;;AAGE;AAEA;;;AAGF;;;;;AAQJ;AAwCF;AAGF;AAIA;AAaA;AAWE;AACA;;AA0BF;;"}
+{"version":3,"file":"Calendar.cjs","sources":["../../../src/components/Calendar/Calendar.tsx"],"sourcesContent":["'use client'\n\nimport dayjs from 'dayjs'\nimport {\n  type ComponentProps,\n  type MouseEvent,\n  type PropsWithChildren,\n  forwardRef,\n  memo,\n  useEffect,\n  useId,\n  useMemo,\n  useState,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useLatest } from '../../hooks/useLatest'\nimport { Localizer, useDateFormat } from '../../intl'\nimport { Button } from '../Button'\nimport { FaCaretDownIcon, FaChevronLeftIcon, FaChevronRightIcon } from '../Icon'\nimport { Cluster } from '../Layout'\n\nimport { CalendarTable } from './CalendarTable'\nimport { YearPicker } from './YearPicker'\nimport { getFromDate, getMonthArray, getToDate, isBetween, minDate } from './calendarHelper'\n\ntype BaseProps = {\n  /** 選択可能な開始日 */\n  from?: Date\n  /** 選択可能な終了日 */\n  to?: Date\n  /** トリガのセレクトイベントを処理するハンドラ */\n  onSelectDate: (e: MouseEvent, date: Date) => void\n  /** 選択された日付 */\n  value?: Date\n}\ntype Props = BaseProps & Omit<ComponentProps<'div'>, keyof BaseProps>\n\ntype DayJsType = ReturnType<typeof dayjs>\n\nconst classNameGenerator = tv({\n  slots: {\n    container:\n      'smarthr-ui-Calendar shr-inline-block shr-overflow-hidden shr-rounded-m shr-bg-white shr-text-black shr-shadow-layer-3 forced-colors:shr-border-shorthand forced-colors:shr-shadow-none',\n    header: 'smarthr-ui-Calendar-header shr-border-b-shorthand shr-flex shr-items-center shr-p-1',\n    yearMonth: 'smarthr-ui-Calendar-yearMonth shr-me-0.5 shr-text-base shr-font-bold',\n    monthButtons: 'smarthr-ui-Calendar-monthButtons shr-ms-auto shr-flex',\n    tableLayout: 'shr-relative',\n    yearSelectButton:\n      'smarthr-ui-Calendar-selectingYear [&[aria-expanded=\"true\"]_.smarthr-ui-Icon]:shr-rotate-180',\n  },\n})\n\nexport const Calendar = forwardRef<HTMLDivElement, Props>(\n  ({ from = minDate, to, onSelectDate, value, className, ...rest }, ref) => {\n    const { formatDate, getWeekStartDay } = useDateFormat()\n\n    const classNames = useMemo(() => {\n      const { container, yearMonth, header, monthButtons, tableLayout, yearSelectButton } =\n        classNameGenerator()\n\n      return {\n        container: container({ className }),\n        header: header(),\n        yearMonth: yearMonth(),\n        monthButtons: monthButtons(),\n        tableLayout: tableLayout(),\n        yearSelectButton: yearSelectButton(),\n      }\n    }, [className])\n\n    const formattedFrom = useMemo(() => {\n      const date = getFromDate(from)\n      const day = dayjs(date)\n\n      return {\n        day,\n        date,\n        year: day.year(),\n      }\n    }, [from])\n    const formattedTo = useMemo(() => {\n      const date = getToDate(to)\n      const day = dayjs(date)\n\n      return {\n        day,\n        date,\n        year: day.year(),\n      }\n    }, [to])\n\n    const isValidValue = useMemo(\n      () => value && isBetween(value, formattedFrom.date, formattedTo.date),\n      [value, formattedFrom.date, formattedTo.date],\n    )\n\n    const [currentMonth, setCurrentMonth] = useState(() => {\n      if (isValidValue) {\n        return dayjs(value)\n      }\n\n      const today = dayjs()\n\n      return formattedTo.day.isBefore(today)\n        ? formattedTo.day\n        : formattedFrom.day.isAfter(today)\n          ? formattedFrom.day\n          : today\n    })\n    const [isSelectingYear, setIsSelectingYear] = useState(false)\n\n    const yearPickerId = useId()\n\n    useEffect(() => {\n      if (isValidValue) {\n        setCurrentMonth(dayjs(value))\n      }\n    }, [value, isValidValue])\n\n    const calculatedCurrentMonth = useMemo(() => {\n      const d = currentMonth.toDate()\n\n      return {\n        prev: currentMonth.subtract(1, 'month'),\n        next: currentMonth.add(1, 'month'),\n        day: currentMonth,\n        months: getMonthArray(d, getWeekStartDay()),\n        yearMonthText: formatDate({\n          date: d,\n          parts: ['year', 'month'],\n          options: {\n            disableSlashInJa: true,\n            capitalizeFirstLetter: true,\n          },\n        }),\n        selectedText: currentMonth.toString(),\n      }\n    }, [currentMonth, formatDate, getWeekStartDay])\n\n    const functions = useMemo(\n      () => ({\n        handleSelectYear: (e: MouseEvent<HTMLButtonElement>) => {\n          e.stopPropagation()\n\n          const year = parseInt(e.currentTarget.value, 10)\n\n          setCurrentMonth((prev) => prev.year(year))\n          setIsSelectingYear(false)\n        },\n        handleClickSelectYear: (e: MouseEvent<HTMLButtonElement>) => {\n          e.stopPropagation()\n          setIsSelectingYear((current) => !current)\n        },\n      }),\n      [],\n    )\n\n    return (\n      <div {...rest} ref={ref} className={classNames.container}>\n        <header className={classNames.header}>\n          <YearMonthRender className={classNames.yearMonth}>\n            {calculatedCurrentMonth.yearMonthText}\n          </YearMonthRender>\n          <YearSelectButton\n            aria-expanded={isSelectingYear}\n            aria-controls={yearPickerId}\n            handleClick={functions.handleClickSelectYear}\n            className={classNames.yearSelectButton}\n          />\n          <MonthDirectionCluster\n            isSelectingYear={isSelectingYear}\n            directionMonth={calculatedCurrentMonth}\n            from={formattedFrom.day}\n            to={formattedTo.day}\n            setCurrentMonth={setCurrentMonth}\n            className={classNames.monthButtons}\n          />\n        </header>\n        <div className={classNames.tableLayout}>\n          <YearPicker\n            fromYear={formattedFrom.year}\n            toYear={formattedTo.year}\n            selectedYear={value?.getFullYear()}\n            handleSelectYear={functions.handleSelectYear}\n            isDisplayed={isSelectingYear}\n            id={yearPickerId}\n          />\n          <CalendarTable\n            current={calculatedCurrentMonth}\n            from={formattedFrom.date}\n            to={formattedTo.date}\n            onSelectDate={onSelectDate}\n            selectedDayText={isValidValue ? calculatedCurrentMonth.selectedText : ''}\n          />\n        </div>\n      </div>\n    )\n  },\n)\n\nconst YearMonthRender = memo<PropsWithChildren<{ className: string }>>(\n  ({ children, className }) => <div className={className}>{children}</div>,\n)\n\nconst YearSelectButton = memo<{\n  'aria-expanded': boolean\n  'aria-controls': string\n  handleClick: (e: MouseEvent<HTMLButtonElement>) => void\n  className: string\n}>(({ handleClick, ...rest }) => (\n  <Button {...rest} onClick={handleClick} size=\"S\">\n    <FaCaretDownIcon\n      alt={<Localizer id=\"smarthr-ui/Calendar/selectYear\" defaultText=\"年を選択する\" />}\n    />\n  </Button>\n))\n\nconst MonthDirectionCluster = memo<{\n  isSelectingYear: boolean\n  directionMonth: {\n    prev: DayJsType\n    next: DayJsType\n  }\n  from: DayJsType\n  to: DayJsType\n  setCurrentMonth: (day: DayJsType) => void\n  className: string\n}>(({ isSelectingYear, directionMonth: { prev, next }, from, to, setCurrentMonth, className }) => {\n  const latest = useLatest({ prev, next, setCurrentMonth })\n\n  const functions = useMemo(\n    () => ({\n      handleClickMonthPrev: () => latest.setCurrentMonth(latest.prev),\n      handleClickMonthNext: () => latest.setCurrentMonth(latest.next),\n    }),\n    [latest],\n  )\n\n  return (\n    <Cluster gap={0.5} className={className}>\n      <Button\n        disabled={isSelectingYear || prev.isBefore(from, 'month')}\n        onClick={functions.handleClickMonthPrev}\n        size=\"S\"\n        className=\"smarthr-ui-Calendar-monthButtonPrev\"\n      >\n        <FaChevronLeftIcon\n          alt={<Localizer id=\"smarthr-ui/Calendar/previousMonth\" defaultText=\"前の月へ\" />}\n        />\n      </Button>\n      <Button\n        disabled={isSelectingYear || next.isAfter(to, 'month')}\n        onClick={functions.handleClickMonthNext}\n        size=\"S\"\n        className=\"smarthr-ui-Calendar-monthButtonNext\"\n      >\n        <FaChevronRightIcon\n          alt={<Localizer id=\"smarthr-ui/Calendar/nextMonth\" defaultText=\"次の月へ\" />}\n        />\n      </Button>\n    </Cluster>\n  )\n})\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCA;AACE;AACE;AAEA;AACA;AACA;AACA;AACA;AAED;AACF;AAEM;;AAIH;AACE;;AAIE;;;;;;;AAOJ;AAEA;AACE;AACA;;;;AAKE;;AAEJ;AACA;AACE;AACA;;;;AAKE;;AAEJ;AAEA;;;AAOI;;AAGF;AAEA;;;;;AAKF;;AAGA;;;AAII;;AAEJ;AAEA;AACE;;;;AAKE;AACA;;AAEE;AACA;AACA;AACE;AACA;AACD;;AAEH;;;AAIJ;AAEI;;AAGE;AAEA;;;AAGF;;;;;AAQJ;AAwCF;AAGF;AAIA;AAaA;AAWE;AAEA;;;AAIG;;AA4BL;;"}

package/lib/components/Calendar/Calendar.js

@@ -1,8 +1,9 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import dayjs from '../../_virtual/dayjs.min.js';
-import { forwardRef, useMemo, useState, useId, useEffect, memo, useCallback } from 'react';
+import { forwardRef, useMemo, useState, useId, useEffect, memo } from 'react';
 import { tv as ce } from './../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss@3.4.19_ts-node@10.9.2_@swc_core@1.15.46_@types_node@20.19.43_typescript@5.9.3__/vendor/tailwind-variants/dist/index.js';
+import { useLatest } from '../../hooks/useLatest.js';
 import '../../intl/IntlProvider.js';
 import 'react-intl';
 import { useDateFormat } from '../../intl/useDateFormat.js';
@@ -119,9 +120,12 @@ const Calendar = forwardRef(({ from = minDate, to, onSelectDate, value, classNam
 const YearMonthRender = memo(({ children, className }) => jsx("div", { className: className, children: children }));
 const YearSelectButton = memo(({ handleClick, ...rest }) => (jsx(Button, { ...rest, onClick: handleClick, size: "S", children: jsx(FaCaretDownIcon, { alt: jsx(Localizer, { id: "smarthr-ui/Calendar/selectYear", defaultText: "\u5E74\u3092\u9078\u629E\u3059\u308B" }) }) })));
 const MonthDirectionCluster = memo(({ isSelectingYear, directionMonth: { prev, next }, from, to, setCurrentMonth, className }) => {
-    const onClickMonthPrev = useCallback(() => setCurrentMonth(prev), [prev, setCurrentMonth]);
-    const onClickMonthNext = useCallback(() => setCurrentMonth(next), [next, setCurrentMonth]);
-    return (jsxs(Cluster, { gap: 0.5, className: className, children: [jsx(Button, { disabled: isSelectingYear || prev.isBefore(from, 'month'), onClick: onClickMonthPrev, size: "S", className: "smarthr-ui-Calendar-monthButtonPrev", children: jsx(FaChevronLeftIcon, { alt: jsx(Localizer, { id: "smarthr-ui/Calendar/previousMonth", defaultText: "\u524D\u306E\u6708\u3078" }) }) }), jsx(Button, { disabled: isSelectingYear || next.isAfter(to, 'month'), onClick: onClickMonthNext, size: "S", className: "smarthr-ui-Calendar-monthButtonNext", children: jsx(FaChevronRightIcon, { alt: jsx(Localizer, { id: "smarthr-ui/Calendar/nextMonth", defaultText: "\u6B21\u306E\u6708\u3078" }) }) })] }));
+    const latest = useLatest({ prev, next, setCurrentMonth });
+    const functions = useMemo(() => ({
+        handleClickMonthPrev: () => latest.setCurrentMonth(latest.prev),
+        handleClickMonthNext: () => latest.setCurrentMonth(latest.next),
+    }), [latest]);
+    return (jsxs(Cluster, { gap: 0.5, className: className, children: [jsx(Button, { disabled: isSelectingYear || prev.isBefore(from, 'month'), onClick: functions.handleClickMonthPrev, size: "S", className: "smarthr-ui-Calendar-monthButtonPrev", children: jsx(FaChevronLeftIcon, { alt: jsx(Localizer, { id: "smarthr-ui/Calendar/previousMonth", defaultText: "\u524D\u306E\u6708\u3078" }) }) }), jsx(Button, { disabled: isSelectingYear || next.isAfter(to, 'month'), onClick: functions.handleClickMonthNext, size: "S", className: "smarthr-ui-Calendar-monthButtonNext", children: jsx(FaChevronRightIcon, { alt: jsx(Localizer, { id: "smarthr-ui/Calendar/nextMonth", defaultText: "\u6B21\u306E\u6708\u3078" }) }) })] }));
 });
 
 export { Calendar };

package/lib/components/Calendar/Calendar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Calendar.js","sources":["../../../src/components/Calendar/Calendar.tsx"],"sourcesContent":["'use client'\n\nimport dayjs from 'dayjs'\nimport {\n  type ComponentProps,\n  type MouseEvent,\n  type PropsWithChildren,\n  forwardRef,\n  memo,\n  useCallback,\n  useEffect,\n  useId,\n  useMemo,\n  useState,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { Localizer, useDateFormat } from '../../intl'\nimport { Button } from '../Button'\nimport { FaCaretDownIcon, FaChevronLeftIcon, FaChevronRightIcon } from '../Icon'\nimport { Cluster } from '../Layout'\n\nimport { CalendarTable } from './CalendarTable'\nimport { YearPicker } from './YearPicker'\nimport { getFromDate, getMonthArray, getToDate, isBetween, minDate } from './calendarHelper'\n\ntype BaseProps = {\n  /** 選択可能な開始日 */\n  from?: Date\n  /** 選択可能な終了日 */\n  to?: Date\n  /** トリガのセレクトイベントを処理するハンドラ */\n  onSelectDate: (e: MouseEvent, date: Date) => void\n  /** 選択された日付 */\n  value?: Date\n}\ntype Props = BaseProps & Omit<ComponentProps<'div'>, keyof BaseProps>\n\ntype DayJsType = ReturnType<typeof dayjs>\n\nconst classNameGenerator = tv({\n  slots: {\n    container:\n      'smarthr-ui-Calendar shr-inline-block shr-overflow-hidden shr-rounded-m shr-bg-white shr-text-black shr-shadow-layer-3 forced-colors:shr-border-shorthand forced-colors:shr-shadow-none',\n    header: 'smarthr-ui-Calendar-header shr-border-b-shorthand shr-flex shr-items-center shr-p-1',\n    yearMonth: 'smarthr-ui-Calendar-yearMonth shr-me-0.5 shr-text-base shr-font-bold',\n    monthButtons: 'smarthr-ui-Calendar-monthButtons shr-ms-auto shr-flex',\n    tableLayout: 'shr-relative',\n    yearSelectButton:\n      'smarthr-ui-Calendar-selectingYear [&[aria-expanded=\"true\"]_.smarthr-ui-Icon]:shr-rotate-180',\n  },\n})\n\nexport const Calendar = forwardRef<HTMLDivElement, Props>(\n  ({ from = minDate, to, onSelectDate, value, className, ...rest }, ref) => {\n    const { formatDate, getWeekStartDay } = useDateFormat()\n\n    const classNames = useMemo(() => {\n      const { container, yearMonth, header, monthButtons, tableLayout, yearSelectButton } =\n        classNameGenerator()\n\n      return {\n        container: container({ className }),\n        header: header(),\n        yearMonth: yearMonth(),\n        monthButtons: monthButtons(),\n        tableLayout: tableLayout(),\n        yearSelectButton: yearSelectButton(),\n      }\n    }, [className])\n\n    const formattedFrom = useMemo(() => {\n      const date = getFromDate(from)\n      const day = dayjs(date)\n\n      return {\n        day,\n        date,\n        year: day.year(),\n      }\n    }, [from])\n    const formattedTo = useMemo(() => {\n      const date = getToDate(to)\n      const day = dayjs(date)\n\n      return {\n        day,\n        date,\n        year: day.year(),\n      }\n    }, [to])\n\n    const isValidValue = useMemo(\n      () => value && isBetween(value, formattedFrom.date, formattedTo.date),\n      [value, formattedFrom.date, formattedTo.date],\n    )\n\n    const [currentMonth, setCurrentMonth] = useState(() => {\n      if (isValidValue) {\n        return dayjs(value)\n      }\n\n      const today = dayjs()\n\n      return formattedTo.day.isBefore(today)\n        ? formattedTo.day\n        : formattedFrom.day.isAfter(today)\n          ? formattedFrom.day\n          : today\n    })\n    const [isSelectingYear, setIsSelectingYear] = useState(false)\n\n    const yearPickerId = useId()\n\n    useEffect(() => {\n      if (isValidValue) {\n        setCurrentMonth(dayjs(value))\n      }\n    }, [value, isValidValue])\n\n    const calculatedCurrentMonth = useMemo(() => {\n      const d = currentMonth.toDate()\n\n      return {\n        prev: currentMonth.subtract(1, 'month'),\n        next: currentMonth.add(1, 'month'),\n        day: currentMonth,\n        months: getMonthArray(d, getWeekStartDay()),\n        yearMonthText: formatDate({\n          date: d,\n          parts: ['year', 'month'],\n          options: {\n            disableSlashInJa: true,\n            capitalizeFirstLetter: true,\n          },\n        }),\n        selectedText: currentMonth.toString(),\n      }\n    }, [currentMonth, formatDate, getWeekStartDay])\n\n    const functions = useMemo(\n      () => ({\n        handleSelectYear: (e: MouseEvent<HTMLButtonElement>) => {\n          e.stopPropagation()\n\n          const year = parseInt(e.currentTarget.value, 10)\n\n          setCurrentMonth((prev) => prev.year(year))\n          setIsSelectingYear(false)\n        },\n        handleClickSelectYear: (e: MouseEvent<HTMLButtonElement>) => {\n          e.stopPropagation()\n          setIsSelectingYear((current) => !current)\n        },\n      }),\n      [],\n    )\n\n    return (\n      <div {...rest} ref={ref} className={classNames.container}>\n        <header className={classNames.header}>\n          <YearMonthRender className={classNames.yearMonth}>\n            {calculatedCurrentMonth.yearMonthText}\n          </YearMonthRender>\n          <YearSelectButton\n            aria-expanded={isSelectingYear}\n            aria-controls={yearPickerId}\n            handleClick={functions.handleClickSelectYear}\n            className={classNames.yearSelectButton}\n          />\n          <MonthDirectionCluster\n            isSelectingYear={isSelectingYear}\n            directionMonth={calculatedCurrentMonth}\n            from={formattedFrom.day}\n            to={formattedTo.day}\n            setCurrentMonth={setCurrentMonth}\n            className={classNames.monthButtons}\n          />\n        </header>\n        <div className={classNames.tableLayout}>\n          <YearPicker\n            fromYear={formattedFrom.year}\n            toYear={formattedTo.year}\n            selectedYear={value?.getFullYear()}\n            handleSelectYear={functions.handleSelectYear}\n            isDisplayed={isSelectingYear}\n            id={yearPickerId}\n          />\n          <CalendarTable\n            current={calculatedCurrentMonth}\n            from={formattedFrom.date}\n            to={formattedTo.date}\n            onSelectDate={onSelectDate}\n            selectedDayText={isValidValue ? calculatedCurrentMonth.selectedText : ''}\n          />\n        </div>\n      </div>\n    )\n  },\n)\n\nconst YearMonthRender = memo<PropsWithChildren<{ className: string }>>(\n  ({ children, className }) => <div className={className}>{children}</div>,\n)\n\nconst YearSelectButton = memo<{\n  'aria-expanded': boolean\n  'aria-controls': string\n  handleClick: (e: MouseEvent<HTMLButtonElement>) => void\n  className: string\n}>(({ handleClick, ...rest }) => (\n  <Button {...rest} onClick={handleClick} size=\"S\">\n    <FaCaretDownIcon\n      alt={<Localizer id=\"smarthr-ui/Calendar/selectYear\" defaultText=\"年を選択する\" />}\n    />\n  </Button>\n))\n\nconst MonthDirectionCluster = memo<{\n  isSelectingYear: boolean\n  directionMonth: {\n    prev: DayJsType\n    next: DayJsType\n  }\n  from: DayJsType\n  to: DayJsType\n  setCurrentMonth: (day: DayJsType) => void\n  className: string\n}>(({ isSelectingYear, directionMonth: { prev, next }, from, to, setCurrentMonth, className }) => {\n  const onClickMonthPrev = useCallback(() => setCurrentMonth(prev), [prev, setCurrentMonth])\n  const onClickMonthNext = useCallback(() => setCurrentMonth(next), [next, setCurrentMonth])\n\n  return (\n    <Cluster gap={0.5} className={className}>\n      <Button\n        disabled={isSelectingYear || prev.isBefore(from, 'month')}\n        onClick={onClickMonthPrev}\n        size=\"S\"\n        className=\"smarthr-ui-Calendar-monthButtonPrev\"\n      >\n        <FaChevronLeftIcon\n          alt={<Localizer id=\"smarthr-ui/Calendar/previousMonth\" defaultText=\"前の月へ\" />}\n        />\n      </Button>\n      <Button\n        disabled={isSelectingYear || next.isAfter(to, 'month')}\n        onClick={onClickMonthNext}\n        size=\"S\"\n        className=\"smarthr-ui-Calendar-monthButtonNext\"\n      >\n        <FaChevronRightIcon\n          alt={<Localizer id=\"smarthr-ui/Calendar/nextMonth\" defaultText=\"次の月へ\" />}\n        />\n      </Button>\n    </Cluster>\n  )\n})\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAwCA;AACE;AACE;AAEA;AACA;AACA;AACA;AACA;AAED;AACF;AAEM;;AAIH;AACE;;AAIE;;;;;;;AAOJ;AAEA;AACE;AACA;;;;AAKE;;AAEJ;AACA;AACE;AACA;;;;AAKE;;AAEJ;AAEA;;;AAOI;;AAGF;AAEA;;;;;AAKF;;AAGA;;;AAII;;AAEJ;AAEA;AACE;;;;AAKE;AACA;;AAEE;AACA;AACA;AACE;AACA;AACD;;AAEH;;;AAIJ;AAEI;;AAGE;AAEA;;;AAGF;;;;;AAQJ;AAwCF;AAGF;AAIA;AAaA;AAWE;AACA;;AA0BF;;"}
+{"version":3,"file":"Calendar.js","sources":["../../../src/components/Calendar/Calendar.tsx"],"sourcesContent":["'use client'\n\nimport dayjs from 'dayjs'\nimport {\n  type ComponentProps,\n  type MouseEvent,\n  type PropsWithChildren,\n  forwardRef,\n  memo,\n  useEffect,\n  useId,\n  useMemo,\n  useState,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useLatest } from '../../hooks/useLatest'\nimport { Localizer, useDateFormat } from '../../intl'\nimport { Button } from '../Button'\nimport { FaCaretDownIcon, FaChevronLeftIcon, FaChevronRightIcon } from '../Icon'\nimport { Cluster } from '../Layout'\n\nimport { CalendarTable } from './CalendarTable'\nimport { YearPicker } from './YearPicker'\nimport { getFromDate, getMonthArray, getToDate, isBetween, minDate } from './calendarHelper'\n\ntype BaseProps = {\n  /** 選択可能な開始日 */\n  from?: Date\n  /** 選択可能な終了日 */\n  to?: Date\n  /** トリガのセレクトイベントを処理するハンドラ */\n  onSelectDate: (e: MouseEvent, date: Date) => void\n  /** 選択された日付 */\n  value?: Date\n}\ntype Props = BaseProps & Omit<ComponentProps<'div'>, keyof BaseProps>\n\ntype DayJsType = ReturnType<typeof dayjs>\n\nconst classNameGenerator = tv({\n  slots: {\n    container:\n      'smarthr-ui-Calendar shr-inline-block shr-overflow-hidden shr-rounded-m shr-bg-white shr-text-black shr-shadow-layer-3 forced-colors:shr-border-shorthand forced-colors:shr-shadow-none',\n    header: 'smarthr-ui-Calendar-header shr-border-b-shorthand shr-flex shr-items-center shr-p-1',\n    yearMonth: 'smarthr-ui-Calendar-yearMonth shr-me-0.5 shr-text-base shr-font-bold',\n    monthButtons: 'smarthr-ui-Calendar-monthButtons shr-ms-auto shr-flex',\n    tableLayout: 'shr-relative',\n    yearSelectButton:\n      'smarthr-ui-Calendar-selectingYear [&[aria-expanded=\"true\"]_.smarthr-ui-Icon]:shr-rotate-180',\n  },\n})\n\nexport const Calendar = forwardRef<HTMLDivElement, Props>(\n  ({ from = minDate, to, onSelectDate, value, className, ...rest }, ref) => {\n    const { formatDate, getWeekStartDay } = useDateFormat()\n\n    const classNames = useMemo(() => {\n      const { container, yearMonth, header, monthButtons, tableLayout, yearSelectButton } =\n        classNameGenerator()\n\n      return {\n        container: container({ className }),\n        header: header(),\n        yearMonth: yearMonth(),\n        monthButtons: monthButtons(),\n        tableLayout: tableLayout(),\n        yearSelectButton: yearSelectButton(),\n      }\n    }, [className])\n\n    const formattedFrom = useMemo(() => {\n      const date = getFromDate(from)\n      const day = dayjs(date)\n\n      return {\n        day,\n        date,\n        year: day.year(),\n      }\n    }, [from])\n    const formattedTo = useMemo(() => {\n      const date = getToDate(to)\n      const day = dayjs(date)\n\n      return {\n        day,\n        date,\n        year: day.year(),\n      }\n    }, [to])\n\n    const isValidValue = useMemo(\n      () => value && isBetween(value, formattedFrom.date, formattedTo.date),\n      [value, formattedFrom.date, formattedTo.date],\n    )\n\n    const [currentMonth, setCurrentMonth] = useState(() => {\n      if (isValidValue) {\n        return dayjs(value)\n      }\n\n      const today = dayjs()\n\n      return formattedTo.day.isBefore(today)\n        ? formattedTo.day\n        : formattedFrom.day.isAfter(today)\n          ? formattedFrom.day\n          : today\n    })\n    const [isSelectingYear, setIsSelectingYear] = useState(false)\n\n    const yearPickerId = useId()\n\n    useEffect(() => {\n      if (isValidValue) {\n        setCurrentMonth(dayjs(value))\n      }\n    }, [value, isValidValue])\n\n    const calculatedCurrentMonth = useMemo(() => {\n      const d = currentMonth.toDate()\n\n      return {\n        prev: currentMonth.subtract(1, 'month'),\n        next: currentMonth.add(1, 'month'),\n        day: currentMonth,\n        months: getMonthArray(d, getWeekStartDay()),\n        yearMonthText: formatDate({\n          date: d,\n          parts: ['year', 'month'],\n          options: {\n            disableSlashInJa: true,\n            capitalizeFirstLetter: true,\n          },\n        }),\n        selectedText: currentMonth.toString(),\n      }\n    }, [currentMonth, formatDate, getWeekStartDay])\n\n    const functions = useMemo(\n      () => ({\n        handleSelectYear: (e: MouseEvent<HTMLButtonElement>) => {\n          e.stopPropagation()\n\n          const year = parseInt(e.currentTarget.value, 10)\n\n          setCurrentMonth((prev) => prev.year(year))\n          setIsSelectingYear(false)\n        },\n        handleClickSelectYear: (e: MouseEvent<HTMLButtonElement>) => {\n          e.stopPropagation()\n          setIsSelectingYear((current) => !current)\n        },\n      }),\n      [],\n    )\n\n    return (\n      <div {...rest} ref={ref} className={classNames.container}>\n        <header className={classNames.header}>\n          <YearMonthRender className={classNames.yearMonth}>\n            {calculatedCurrentMonth.yearMonthText}\n          </YearMonthRender>\n          <YearSelectButton\n            aria-expanded={isSelectingYear}\n            aria-controls={yearPickerId}\n            handleClick={functions.handleClickSelectYear}\n            className={classNames.yearSelectButton}\n          />\n          <MonthDirectionCluster\n            isSelectingYear={isSelectingYear}\n            directionMonth={calculatedCurrentMonth}\n            from={formattedFrom.day}\n            to={formattedTo.day}\n            setCurrentMonth={setCurrentMonth}\n            className={classNames.monthButtons}\n          />\n        </header>\n        <div className={classNames.tableLayout}>\n          <YearPicker\n            fromYear={formattedFrom.year}\n            toYear={formattedTo.year}\n            selectedYear={value?.getFullYear()}\n            handleSelectYear={functions.handleSelectYear}\n            isDisplayed={isSelectingYear}\n            id={yearPickerId}\n          />\n          <CalendarTable\n            current={calculatedCurrentMonth}\n            from={formattedFrom.date}\n            to={formattedTo.date}\n            onSelectDate={onSelectDate}\n            selectedDayText={isValidValue ? calculatedCurrentMonth.selectedText : ''}\n          />\n        </div>\n      </div>\n    )\n  },\n)\n\nconst YearMonthRender = memo<PropsWithChildren<{ className: string }>>(\n  ({ children, className }) => <div className={className}>{children}</div>,\n)\n\nconst YearSelectButton = memo<{\n  'aria-expanded': boolean\n  'aria-controls': string\n  handleClick: (e: MouseEvent<HTMLButtonElement>) => void\n  className: string\n}>(({ handleClick, ...rest }) => (\n  <Button {...rest} onClick={handleClick} size=\"S\">\n    <FaCaretDownIcon\n      alt={<Localizer id=\"smarthr-ui/Calendar/selectYear\" defaultText=\"年を選択する\" />}\n    />\n  </Button>\n))\n\nconst MonthDirectionCluster = memo<{\n  isSelectingYear: boolean\n  directionMonth: {\n    prev: DayJsType\n    next: DayJsType\n  }\n  from: DayJsType\n  to: DayJsType\n  setCurrentMonth: (day: DayJsType) => void\n  className: string\n}>(({ isSelectingYear, directionMonth: { prev, next }, from, to, setCurrentMonth, className }) => {\n  const latest = useLatest({ prev, next, setCurrentMonth })\n\n  const functions = useMemo(\n    () => ({\n      handleClickMonthPrev: () => latest.setCurrentMonth(latest.prev),\n      handleClickMonthNext: () => latest.setCurrentMonth(latest.next),\n    }),\n    [latest],\n  )\n\n  return (\n    <Cluster gap={0.5} className={className}>\n      <Button\n        disabled={isSelectingYear || prev.isBefore(from, 'month')}\n        onClick={functions.handleClickMonthPrev}\n        size=\"S\"\n        className=\"smarthr-ui-Calendar-monthButtonPrev\"\n      >\n        <FaChevronLeftIcon\n          alt={<Localizer id=\"smarthr-ui/Calendar/previousMonth\" defaultText=\"前の月へ\" />}\n        />\n      </Button>\n      <Button\n        disabled={isSelectingYear || next.isAfter(to, 'month')}\n        onClick={functions.handleClickMonthNext}\n        size=\"S\"\n        className=\"smarthr-ui-Calendar-monthButtonNext\"\n      >\n        <FaChevronRightIcon\n          alt={<Localizer id=\"smarthr-ui/Calendar/nextMonth\" defaultText=\"次の月へ\" />}\n        />\n      </Button>\n    </Cluster>\n  )\n})\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCA;AACE;AACE;AAEA;AACA;AACA;AACA;AACA;AAED;AACF;AAEM;;AAIH;AACE;;AAIE;;;;;;;AAOJ;AAEA;AACE;AACA;;;;AAKE;;AAEJ;AACA;AACE;AACA;;;;AAKE;;AAEJ;AAEA;;;AAOI;;AAGF;AAEA;;;;;AAKF;;AAGA;;;AAII;;AAEJ;AAEA;AACE;;;;AAKE;AACA;;AAEE;AACA;AACA;AACE;AACA;AACD;;AAEH;;;AAIJ;AAEI;;AAGE;AAEA;;;AAGF;;;;;AAQJ;AAwCF;AAGF;AAIA;AAaA;AAWE;AAEA;;;AAIG;;AA4BL;;"}

package/lib/components/Checkbox/Checkbox.cjs

@@ -59,19 +59,21 @@ const Checkbox = React.forwardRef(({ checked, mixed, error, className, children,
         };
     }, [className]);
     const inputRef = React.useRef(null);
+    const defaultId = React.useId();
+    const checkBoxId = id || defaultId;
     React.useImperativeHandle(ref, () => inputRef.current);
     React.useEffect(() => {
         if (inputRef.current) {
             inputRef.current.indeterminate = !!(checked && mixed);
         }
     }, [checked, mixed]);
-    const defaultId = React.useId();
-    const checkBoxId = id || defaultId;
-    return (jsxRuntime.jsxs("span", { "data-disabled": disabled, className: classNames.wrapper, children: [jsxRuntime.jsxs("span", { className: classNames.innerWrapper, children: [jsxRuntime.jsx("input", { ...rest, ref: inputRef, type: "checkbox", id: checkBoxId, checked: checked, disabled: disabled, "aria-invalid": error || undefined, className: classNames.input, "data-smarthr-ui-input": "true" }), jsxRuntime.jsx(AriaHiddenBox, { className: classNames.box }), jsxRuntime.jsx(CheckIconArea, { mixed: mixed, className: classNames.iconWrap, iconClassName: classNames.icon })] }), jsxRuntime.jsx(LabeledChildren, { htmlFor: checkBoxId, className: classNames.label, children: children })] }));
+    return (jsxRuntime.jsxs("span", { "data-disabled": disabled, className: classNames.wrapper, children: [jsxRuntime.jsxs("span", { className: classNames.innerWrapper, children: [jsxRuntime.jsx("input", { ...rest, ref: inputRef, type: "checkbox", id: checkBoxId, checked: checked, disabled: disabled, "aria-invalid": error || undefined, className: classNames.input, "data-smarthr-ui-input": "true" }), jsxRuntime.jsx(AriaHiddenBox, { className: classNames.box }), jsxRuntime.jsx(CheckIconArea, { mixed: mixed, classNames: classNames })] }), children && (jsxRuntime.jsx("label", { htmlFor: checkBoxId, className: classNames.label, children: children }))] }));
 });
 const AriaHiddenBox = React.memo(({ className }) => (jsxRuntime.jsx("span", { className: className, "aria-hidden": "true" })));
-const CheckIconArea = React.memo(({ mixed, className, iconClassName }) => (jsxRuntime.jsx("span", { className: className, children: mixed ? (jsxRuntime.jsx(components_Icon_FaIcon.FaMinusIcon, { className: iconClassName })) : (jsxRuntime.jsx(components_Icon_FaIcon.FaCheckIcon, { className: iconClassName })) })));
-const LabeledChildren = React.memo(({ children, htmlFor, className }) => children && (jsxRuntime.jsx("label", { htmlFor: htmlFor, className: className, children: children })));
+const CheckIconArea = React.memo(({ mixed, classNames }) => {
+    const Icon = mixed ? components_Icon_FaIcon.FaMinusIcon : components_Icon_FaIcon.FaCheckIcon;
+    return (jsxRuntime.jsx("span", { className: classNames.iconWrap, children: jsxRuntime.jsx(Icon, { className: classNames.icon }) }));
+});
 
 exports.Checkbox = Checkbox;
 //# sourceMappingURL=Checkbox.cjs.map

package/lib/components/Checkbox/Checkbox.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.cjs","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentPropsWithRef,\n  type PropsWithChildren,\n  forwardRef,\n  memo,\n  useEffect,\n  useId,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { FaCheckIcon, FaMinusIcon } from '../Icon'\n\nexport type Props = PropsWithChildren<\n  ComponentPropsWithRef<'input'> & {\n    /** `true` のとき、チェック状態を `mixed` にする */\n    mixed?: boolean\n    /** チェックボックスにエラーがあるかどうか */\n    error?: boolean\n  }\n>\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper: 'smarthr-ui-Checkbox shr-inline-flex shr-items-baseline',\n    box: [\n      'shr-border-shorthand shr-pointer-events-none shr-absolute shr-box-border shr-h-full shr-w-full shr-rounded-s shr-bg-white',\n      'contrast-more:shr-border-high-contrast',\n      /* 強制カラーモードのときは、ブラウザ標準のUIを表示する */\n      'forced-colors:shr-hidden',\n      'peer-checked:shr-border-main peer-checked:shr-bg-main contrast-more:peer-checked:shr-border-high-contrast',\n      'peer-indeterminate:shr-border-main peer-indeterminate:shr-bg-main contrast-more:peer-indeterminate:shr-border-high-contrast',\n      'peer-disabled:shr-border-disabled peer-disabled:shr-bg-white-darken',\n      'peer-disabled:peer-checked:shr-border-default peer-disabled:peer-checked:shr-bg-border',\n      'peer-disabled:peer-indeterminate:shr-border-default peer-disabled:peer-indeterminate:shr-bg-border',\n      'peer-focus-visible:shr-focus-indicator--outer',\n      'peer-hover:shr-shadow-input-hover',\n      'shr-border-default',\n      'peer-[[aria-invalid]]:shr-border-danger',\n    ],\n    input: [\n      'smarthr-ui-Checkbox-checkbox shr-peer shr-absolute shr-left-0 shr-top-0 shr-m-0 shr-h-full shr-w-full shr-cursor-pointer shr-opacity-0 disabled:shr-pointer-events-none',\n      /* 強制カラーモードのときは、ブラウザ標準のUIを表示する */\n      'forced-colors:shr-static forced-colors:shr-opacity-100',\n    ],\n    icon: 'shr-fill-current',\n    iconWrap: [\n      'shr-pointer-events-none shr-absolute shr-left-1/2 shr-top-1/2 shr-inline-block shr-h-[theme(fontSize.2xs)] shr-w-[theme(fontSize.2xs)] -shr-translate-x-1/2 -shr-translate-y-1/2 shr-text-2xs',\n      'shr-text-transparent peer-checked:shr-text-white peer-indeterminate:shr-text-white',\n      'peer-disabled:peer-checked:shr-text-white-darken peer-disabled:peer-indeterminate:shr-text-white-darken',\n      'forced-colors:shr-hidden',\n    ],\n    innerWrapper:\n      'shr-relative shr-box-border shr-inline-block shr-h-[theme(fontSize.base)] shr-w-[theme(fontSize.base)] shr-shrink-0 shr-translate-y-[0.125em] shr-leading-none',\n    label: [\n      'smarthr-ui-Checkbox-label shr-ms-0.5 shr-cursor-pointer shr-text-base shr-leading-tight',\n      '[[data-disabled=true]>&]:shr-pointer-events-none [[data-disabled=true]>&]:shr-cursor-not-allowed [[data-disabled=true]>&]:shr-text-disabled',\n    ],\n  },\n})\n\nexport const Checkbox = forwardRef<HTMLInputElement, Props>(\n  ({ checked, mixed, error, className, children, disabled, id, ...rest }, ref) => {\n    const classNames = useMemo(() => {\n      const { wrapper, innerWrapper, box, input, iconWrap, icon, label } = classNameGenerator()\n\n      return {\n        wrapper: wrapper({ className }),\n        innerWrapper: innerWrapper(),\n        box: box(),\n        input: input(),\n        iconWrap: iconWrap(),\n        icon: icon(),\n        label: label(),\n      }\n    }, [className])\n\n    const inputRef = useRef<HTMLInputElement>(null)\n\n    useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(\n      ref,\n      () => inputRef.current,\n    )\n\n    useEffect(() => {\n      if (inputRef.current) {\n        inputRef.current.indeterminate = !!(checked && mixed)\n      }\n    }, [checked, mixed])\n\n    const defaultId = useId()\n    const checkBoxId = id || defaultId\n\n    return (\n      <span data-disabled={disabled} className={classNames.wrapper}>\n        <span className={classNames.innerWrapper}>\n          <input\n            {...rest}\n            ref={inputRef}\n            type=\"checkbox\"\n            id={checkBoxId}\n            checked={checked}\n            disabled={disabled}\n            aria-invalid={error || undefined}\n            className={classNames.input}\n            data-smarthr-ui-input=\"true\"\n          />\n          <AriaHiddenBox className={classNames.box} />\n          <CheckIconArea\n            mixed={mixed}\n            className={classNames.iconWrap}\n            iconClassName={classNames.icon}\n          />\n        </span>\n\n        <LabeledChildren htmlFor={checkBoxId} className={classNames.label}>\n          {children}\n        </LabeledChildren>\n      </span>\n    )\n  },\n)\n\nconst AriaHiddenBox = memo<{ className: string }>(({ className }) => (\n  <span className={className} aria-hidden=\"true\" />\n))\n\nconst CheckIconArea = memo<Pick<Props, 'mixed'> & { className: string; iconClassName: string }>(\n  ({ mixed, className, iconClassName }) => (\n    <span className={className}>\n      {mixed ? (\n        <FaMinusIcon className={iconClassName} />\n      ) : (\n        <FaCheckIcon className={iconClassName} />\n      )}\n    </span>\n  ),\n)\n\nconst LabeledChildren = memo<PropsWithChildren<{ className: string; htmlFor: string }>>(\n  ({ children, htmlFor, className }) =>\n    children && (\n      <label htmlFor={htmlFor} className={className}>\n        {children}\n      </label>\n    ),\n)\n"],"names":[],"mappings":";;;;;;;;;;AA0BA;AACE;AACE;AACA;;;;;;;;;;;;;;AAcC;AACD;;;;AAIC;AACD;AACA;;;;;AAKC;AACD;AAEA;;;AAGC;AACF;AACF;AAEM;AAEH;AACE;;AAGE;;;;;;;;AAQJ;AAEA;;;AAQE;AACE;;AAEJ;AAEA;AACA;;AA6BF;AAGF;AAIA;AAYA;;"}
+{"version":3,"file":"Checkbox.cjs","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentPropsWithRef,\n  type PropsWithChildren,\n  forwardRef,\n  memo,\n  useEffect,\n  useId,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { FaCheckIcon, FaMinusIcon } from '../Icon'\n\nexport type Props = PropsWithChildren<\n  ComponentPropsWithRef<'input'> & {\n    /** `true` のとき、チェック状態を `mixed` にする */\n    mixed?: boolean\n    /** チェックボックスにエラーがあるかどうか */\n    error?: boolean\n  }\n>\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper: 'smarthr-ui-Checkbox shr-inline-flex shr-items-baseline',\n    box: [\n      'shr-border-shorthand shr-pointer-events-none shr-absolute shr-box-border shr-h-full shr-w-full shr-rounded-s shr-bg-white',\n      'contrast-more:shr-border-high-contrast',\n      /* 強制カラーモードのときは、ブラウザ標準のUIを表示する */\n      'forced-colors:shr-hidden',\n      'peer-checked:shr-border-main peer-checked:shr-bg-main contrast-more:peer-checked:shr-border-high-contrast',\n      'peer-indeterminate:shr-border-main peer-indeterminate:shr-bg-main contrast-more:peer-indeterminate:shr-border-high-contrast',\n      'peer-disabled:shr-border-disabled peer-disabled:shr-bg-white-darken',\n      'peer-disabled:peer-checked:shr-border-default peer-disabled:peer-checked:shr-bg-border',\n      'peer-disabled:peer-indeterminate:shr-border-default peer-disabled:peer-indeterminate:shr-bg-border',\n      'peer-focus-visible:shr-focus-indicator--outer',\n      'peer-hover:shr-shadow-input-hover',\n      'shr-border-default',\n      'peer-[[aria-invalid]]:shr-border-danger',\n    ],\n    input: [\n      'smarthr-ui-Checkbox-checkbox shr-peer shr-absolute shr-left-0 shr-top-0 shr-m-0 shr-h-full shr-w-full shr-cursor-pointer shr-opacity-0 disabled:shr-pointer-events-none',\n      /* 強制カラーモードのときは、ブラウザ標準のUIを表示する */\n      'forced-colors:shr-static forced-colors:shr-opacity-100',\n    ],\n    icon: 'shr-fill-current',\n    iconWrap: [\n      'shr-pointer-events-none shr-absolute shr-left-1/2 shr-top-1/2 shr-inline-block shr-h-[theme(fontSize.2xs)] shr-w-[theme(fontSize.2xs)] -shr-translate-x-1/2 -shr-translate-y-1/2 shr-text-2xs',\n      'shr-text-transparent peer-checked:shr-text-white peer-indeterminate:shr-text-white',\n      'peer-disabled:peer-checked:shr-text-white-darken peer-disabled:peer-indeterminate:shr-text-white-darken',\n      'forced-colors:shr-hidden',\n    ],\n    innerWrapper:\n      'shr-relative shr-box-border shr-inline-block shr-h-[theme(fontSize.base)] shr-w-[theme(fontSize.base)] shr-shrink-0 shr-translate-y-[0.125em] shr-leading-none',\n    label: [\n      'smarthr-ui-Checkbox-label shr-ms-0.5 shr-cursor-pointer shr-text-base shr-leading-tight',\n      '[[data-disabled=true]>&]:shr-pointer-events-none [[data-disabled=true]>&]:shr-cursor-not-allowed [[data-disabled=true]>&]:shr-text-disabled',\n    ],\n  },\n})\n\nexport const Checkbox = forwardRef<HTMLInputElement, Props>(\n  ({ checked, mixed, error, className, children, disabled, id, ...rest }, ref) => {\n    const classNames = useMemo(() => {\n      const { wrapper, innerWrapper, box, input, iconWrap, icon, label } = classNameGenerator()\n\n      return {\n        wrapper: wrapper({ className }),\n        innerWrapper: innerWrapper(),\n        box: box(),\n        input: input(),\n        iconWrap: iconWrap(),\n        icon: icon(),\n        label: label(),\n      }\n    }, [className])\n\n    const inputRef = useRef<HTMLInputElement>(null)\n\n    const defaultId = useId()\n    const checkBoxId = id || defaultId\n\n    useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(\n      ref,\n      () => inputRef.current,\n    )\n\n    useEffect(() => {\n      if (inputRef.current) {\n        inputRef.current.indeterminate = !!(checked && mixed)\n      }\n    }, [checked, mixed])\n\n    return (\n      <span data-disabled={disabled} className={classNames.wrapper}>\n        <span className={classNames.innerWrapper}>\n          <input\n            {...rest}\n            ref={inputRef}\n            type=\"checkbox\"\n            id={checkBoxId}\n            checked={checked}\n            disabled={disabled}\n            aria-invalid={error || undefined}\n            className={classNames.input}\n            data-smarthr-ui-input=\"true\"\n          />\n          <AriaHiddenBox className={classNames.box} />\n          <CheckIconArea mixed={mixed} classNames={classNames} />\n        </span>\n\n        {children && (\n          <label htmlFor={checkBoxId} className={classNames.label}>\n            {children}\n          </label>\n        )}\n      </span>\n    )\n  },\n)\n\nconst AriaHiddenBox = memo<{ className: string }>(({ className }) => (\n  <span className={className} aria-hidden=\"true\" />\n))\n\nconst CheckIconArea = memo<\n  Pick<Props, 'mixed'> & { classNames: { iconWrap: string; icon: string } }\n>(({ mixed, classNames }) => {\n  const Icon = mixed ? FaMinusIcon : FaCheckIcon\n\n  return (\n    <span className={classNames.iconWrap}>\n      <Icon className={classNames.icon} />\n    </span>\n  )\n})\n"],"names":[],"mappings":";;;;;;;;;;AA0BA;AACE;AACE;AACA;;;;;;;;;;;;;;AAcC;AACD;;;;AAIC;AACD;AACA;;;;;AAKC;AACD;AAEA;;;AAGC;AACF;AACF;AAEM;AAEH;AACE;;AAGE;;;;;;;;AAQJ;AAEA;AAEA;AACA;;;AAQE;AACE;;AAEJ;;AA2BF;AAGF;AAIA;;AAKE;AAKF;;"}

package/lib/components/Checkbox/Checkbox.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef, useMemo, useRef, useImperativeHandle, useEffect, useId, memo } from 'react';
+import { forwardRef, useMemo, useRef, useId, useImperativeHandle, useEffect, memo } from 'react';
 import { tv as ce } from './../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss@3.4.19_ts-node@10.9.2_@swc_core@1.15.46_@types_node@20.19.43_typescript@5.9.3__/vendor/tailwind-variants/dist/index.js';
 import { FaMinusIcon, FaCheckIcon } from '../Icon/FaIcon.js';
 import '../Icon/generateIcon.js';
@@ -57,19 +57,21 @@ const Checkbox = forwardRef(({ checked, mixed, error, className, children, disab
         };
     }, [className]);
     const inputRef = useRef(null);
+    const defaultId = useId();
+    const checkBoxId = id || defaultId;
     useImperativeHandle(ref, () => inputRef.current);
     useEffect(() => {
         if (inputRef.current) {
             inputRef.current.indeterminate = !!(checked && mixed);
         }
     }, [checked, mixed]);
-    const defaultId = useId();
-    const checkBoxId = id || defaultId;
-    return (jsxs("span", { "data-disabled": disabled, className: classNames.wrapper, children: [jsxs("span", { className: classNames.innerWrapper, children: [jsx("input", { ...rest, ref: inputRef, type: "checkbox", id: checkBoxId, checked: checked, disabled: disabled, "aria-invalid": error || undefined, className: classNames.input, "data-smarthr-ui-input": "true" }), jsx(AriaHiddenBox, { className: classNames.box }), jsx(CheckIconArea, { mixed: mixed, className: classNames.iconWrap, iconClassName: classNames.icon })] }), jsx(LabeledChildren, { htmlFor: checkBoxId, className: classNames.label, children: children })] }));
+    return (jsxs("span", { "data-disabled": disabled, className: classNames.wrapper, children: [jsxs("span", { className: classNames.innerWrapper, children: [jsx("input", { ...rest, ref: inputRef, type: "checkbox", id: checkBoxId, checked: checked, disabled: disabled, "aria-invalid": error || undefined, className: classNames.input, "data-smarthr-ui-input": "true" }), jsx(AriaHiddenBox, { className: classNames.box }), jsx(CheckIconArea, { mixed: mixed, classNames: classNames })] }), children && (jsx("label", { htmlFor: checkBoxId, className: classNames.label, children: children }))] }));
 });
 const AriaHiddenBox = memo(({ className }) => (jsx("span", { className: className, "aria-hidden": "true" })));
-const CheckIconArea = memo(({ mixed, className, iconClassName }) => (jsx("span", { className: className, children: mixed ? (jsx(FaMinusIcon, { className: iconClassName })) : (jsx(FaCheckIcon, { className: iconClassName })) })));
-const LabeledChildren = memo(({ children, htmlFor, className }) => children && (jsx("label", { htmlFor: htmlFor, className: className, children: children })));
+const CheckIconArea = memo(({ mixed, classNames }) => {
+    const Icon = mixed ? FaMinusIcon : FaCheckIcon;
+    return (jsx("span", { className: classNames.iconWrap, children: jsx(Icon, { className: classNames.icon }) }));
+});
 
 export { Checkbox };
 //# sourceMappingURL=Checkbox.js.map

package/lib/components/Checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentPropsWithRef,\n  type PropsWithChildren,\n  forwardRef,\n  memo,\n  useEffect,\n  useId,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { FaCheckIcon, FaMinusIcon } from '../Icon'\n\nexport type Props = PropsWithChildren<\n  ComponentPropsWithRef<'input'> & {\n    /** `true` のとき、チェック状態を `mixed` にする */\n    mixed?: boolean\n    /** チェックボックスにエラーがあるかどうか */\n    error?: boolean\n  }\n>\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper: 'smarthr-ui-Checkbox shr-inline-flex shr-items-baseline',\n    box: [\n      'shr-border-shorthand shr-pointer-events-none shr-absolute shr-box-border shr-h-full shr-w-full shr-rounded-s shr-bg-white',\n      'contrast-more:shr-border-high-contrast',\n      /* 強制カラーモードのときは、ブラウザ標準のUIを表示する */\n      'forced-colors:shr-hidden',\n      'peer-checked:shr-border-main peer-checked:shr-bg-main contrast-more:peer-checked:shr-border-high-contrast',\n      'peer-indeterminate:shr-border-main peer-indeterminate:shr-bg-main contrast-more:peer-indeterminate:shr-border-high-contrast',\n      'peer-disabled:shr-border-disabled peer-disabled:shr-bg-white-darken',\n      'peer-disabled:peer-checked:shr-border-default peer-disabled:peer-checked:shr-bg-border',\n      'peer-disabled:peer-indeterminate:shr-border-default peer-disabled:peer-indeterminate:shr-bg-border',\n      'peer-focus-visible:shr-focus-indicator--outer',\n      'peer-hover:shr-shadow-input-hover',\n      'shr-border-default',\n      'peer-[[aria-invalid]]:shr-border-danger',\n    ],\n    input: [\n      'smarthr-ui-Checkbox-checkbox shr-peer shr-absolute shr-left-0 shr-top-0 shr-m-0 shr-h-full shr-w-full shr-cursor-pointer shr-opacity-0 disabled:shr-pointer-events-none',\n      /* 強制カラーモードのときは、ブラウザ標準のUIを表示する */\n      'forced-colors:shr-static forced-colors:shr-opacity-100',\n    ],\n    icon: 'shr-fill-current',\n    iconWrap: [\n      'shr-pointer-events-none shr-absolute shr-left-1/2 shr-top-1/2 shr-inline-block shr-h-[theme(fontSize.2xs)] shr-w-[theme(fontSize.2xs)] -shr-translate-x-1/2 -shr-translate-y-1/2 shr-text-2xs',\n      'shr-text-transparent peer-checked:shr-text-white peer-indeterminate:shr-text-white',\n      'peer-disabled:peer-checked:shr-text-white-darken peer-disabled:peer-indeterminate:shr-text-white-darken',\n      'forced-colors:shr-hidden',\n    ],\n    innerWrapper:\n      'shr-relative shr-box-border shr-inline-block shr-h-[theme(fontSize.base)] shr-w-[theme(fontSize.base)] shr-shrink-0 shr-translate-y-[0.125em] shr-leading-none',\n    label: [\n      'smarthr-ui-Checkbox-label shr-ms-0.5 shr-cursor-pointer shr-text-base shr-leading-tight',\n      '[[data-disabled=true]>&]:shr-pointer-events-none [[data-disabled=true]>&]:shr-cursor-not-allowed [[data-disabled=true]>&]:shr-text-disabled',\n    ],\n  },\n})\n\nexport const Checkbox = forwardRef<HTMLInputElement, Props>(\n  ({ checked, mixed, error, className, children, disabled, id, ...rest }, ref) => {\n    const classNames = useMemo(() => {\n      const { wrapper, innerWrapper, box, input, iconWrap, icon, label } = classNameGenerator()\n\n      return {\n        wrapper: wrapper({ className }),\n        innerWrapper: innerWrapper(),\n        box: box(),\n        input: input(),\n        iconWrap: iconWrap(),\n        icon: icon(),\n        label: label(),\n      }\n    }, [className])\n\n    const inputRef = useRef<HTMLInputElement>(null)\n\n    useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(\n      ref,\n      () => inputRef.current,\n    )\n\n    useEffect(() => {\n      if (inputRef.current) {\n        inputRef.current.indeterminate = !!(checked && mixed)\n      }\n    }, [checked, mixed])\n\n    const defaultId = useId()\n    const checkBoxId = id || defaultId\n\n    return (\n      <span data-disabled={disabled} className={classNames.wrapper}>\n        <span className={classNames.innerWrapper}>\n          <input\n            {...rest}\n            ref={inputRef}\n            type=\"checkbox\"\n            id={checkBoxId}\n            checked={checked}\n            disabled={disabled}\n            aria-invalid={error || undefined}\n            className={classNames.input}\n            data-smarthr-ui-input=\"true\"\n          />\n          <AriaHiddenBox className={classNames.box} />\n          <CheckIconArea\n            mixed={mixed}\n            className={classNames.iconWrap}\n            iconClassName={classNames.icon}\n          />\n        </span>\n\n        <LabeledChildren htmlFor={checkBoxId} className={classNames.label}>\n          {children}\n        </LabeledChildren>\n      </span>\n    )\n  },\n)\n\nconst AriaHiddenBox = memo<{ className: string }>(({ className }) => (\n  <span className={className} aria-hidden=\"true\" />\n))\n\nconst CheckIconArea = memo<Pick<Props, 'mixed'> & { className: string; iconClassName: string }>(\n  ({ mixed, className, iconClassName }) => (\n    <span className={className}>\n      {mixed ? (\n        <FaMinusIcon className={iconClassName} />\n      ) : (\n        <FaCheckIcon className={iconClassName} />\n      )}\n    </span>\n  ),\n)\n\nconst LabeledChildren = memo<PropsWithChildren<{ className: string; htmlFor: string }>>(\n  ({ children, htmlFor, className }) =>\n    children && (\n      <label htmlFor={htmlFor} className={className}>\n        {children}\n      </label>\n    ),\n)\n"],"names":[],"mappings":";;;;;;;;AA0BA;AACE;AACE;AACA;;;;;;;;;;;;;;AAcC;AACD;;;;AAIC;AACD;AACA;;;;;AAKC;AACD;AAEA;;;AAGC;AACF;AACF;AAEM;AAEH;AACE;;AAGE;;;;;;;;AAQJ;AAEA;;;AAQE;AACE;;AAEJ;AAEA;AACA;;AA6BF;AAGF;AAIA;AAYA;;"}
+{"version":3,"file":"Checkbox.js","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentPropsWithRef,\n  type PropsWithChildren,\n  forwardRef,\n  memo,\n  useEffect,\n  useId,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { FaCheckIcon, FaMinusIcon } from '../Icon'\n\nexport type Props = PropsWithChildren<\n  ComponentPropsWithRef<'input'> & {\n    /** `true` のとき、チェック状態を `mixed` にする */\n    mixed?: boolean\n    /** チェックボックスにエラーがあるかどうか */\n    error?: boolean\n  }\n>\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper: 'smarthr-ui-Checkbox shr-inline-flex shr-items-baseline',\n    box: [\n      'shr-border-shorthand shr-pointer-events-none shr-absolute shr-box-border shr-h-full shr-w-full shr-rounded-s shr-bg-white',\n      'contrast-more:shr-border-high-contrast',\n      /* 強制カラーモードのときは、ブラウザ標準のUIを表示する */\n      'forced-colors:shr-hidden',\n      'peer-checked:shr-border-main peer-checked:shr-bg-main contrast-more:peer-checked:shr-border-high-contrast',\n      'peer-indeterminate:shr-border-main peer-indeterminate:shr-bg-main contrast-more:peer-indeterminate:shr-border-high-contrast',\n      'peer-disabled:shr-border-disabled peer-disabled:shr-bg-white-darken',\n      'peer-disabled:peer-checked:shr-border-default peer-disabled:peer-checked:shr-bg-border',\n      'peer-disabled:peer-indeterminate:shr-border-default peer-disabled:peer-indeterminate:shr-bg-border',\n      'peer-focus-visible:shr-focus-indicator--outer',\n      'peer-hover:shr-shadow-input-hover',\n      'shr-border-default',\n      'peer-[[aria-invalid]]:shr-border-danger',\n    ],\n    input: [\n      'smarthr-ui-Checkbox-checkbox shr-peer shr-absolute shr-left-0 shr-top-0 shr-m-0 shr-h-full shr-w-full shr-cursor-pointer shr-opacity-0 disabled:shr-pointer-events-none',\n      /* 強制カラーモードのときは、ブラウザ標準のUIを表示する */\n      'forced-colors:shr-static forced-colors:shr-opacity-100',\n    ],\n    icon: 'shr-fill-current',\n    iconWrap: [\n      'shr-pointer-events-none shr-absolute shr-left-1/2 shr-top-1/2 shr-inline-block shr-h-[theme(fontSize.2xs)] shr-w-[theme(fontSize.2xs)] -shr-translate-x-1/2 -shr-translate-y-1/2 shr-text-2xs',\n      'shr-text-transparent peer-checked:shr-text-white peer-indeterminate:shr-text-white',\n      'peer-disabled:peer-checked:shr-text-white-darken peer-disabled:peer-indeterminate:shr-text-white-darken',\n      'forced-colors:shr-hidden',\n    ],\n    innerWrapper:\n      'shr-relative shr-box-border shr-inline-block shr-h-[theme(fontSize.base)] shr-w-[theme(fontSize.base)] shr-shrink-0 shr-translate-y-[0.125em] shr-leading-none',\n    label: [\n      'smarthr-ui-Checkbox-label shr-ms-0.5 shr-cursor-pointer shr-text-base shr-leading-tight',\n      '[[data-disabled=true]>&]:shr-pointer-events-none [[data-disabled=true]>&]:shr-cursor-not-allowed [[data-disabled=true]>&]:shr-text-disabled',\n    ],\n  },\n})\n\nexport const Checkbox = forwardRef<HTMLInputElement, Props>(\n  ({ checked, mixed, error, className, children, disabled, id, ...rest }, ref) => {\n    const classNames = useMemo(() => {\n      const { wrapper, innerWrapper, box, input, iconWrap, icon, label } = classNameGenerator()\n\n      return {\n        wrapper: wrapper({ className }),\n        innerWrapper: innerWrapper(),\n        box: box(),\n        input: input(),\n        iconWrap: iconWrap(),\n        icon: icon(),\n        label: label(),\n      }\n    }, [className])\n\n    const inputRef = useRef<HTMLInputElement>(null)\n\n    const defaultId = useId()\n    const checkBoxId = id || defaultId\n\n    useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(\n      ref,\n      () => inputRef.current,\n    )\n\n    useEffect(() => {\n      if (inputRef.current) {\n        inputRef.current.indeterminate = !!(checked && mixed)\n      }\n    }, [checked, mixed])\n\n    return (\n      <span data-disabled={disabled} className={classNames.wrapper}>\n        <span className={classNames.innerWrapper}>\n          <input\n            {...rest}\n            ref={inputRef}\n            type=\"checkbox\"\n            id={checkBoxId}\n            checked={checked}\n            disabled={disabled}\n            aria-invalid={error || undefined}\n            className={classNames.input}\n            data-smarthr-ui-input=\"true\"\n          />\n          <AriaHiddenBox className={classNames.box} />\n          <CheckIconArea mixed={mixed} classNames={classNames} />\n        </span>\n\n        {children && (\n          <label htmlFor={checkBoxId} className={classNames.label}>\n            {children}\n          </label>\n        )}\n      </span>\n    )\n  },\n)\n\nconst AriaHiddenBox = memo<{ className: string }>(({ className }) => (\n  <span className={className} aria-hidden=\"true\" />\n))\n\nconst CheckIconArea = memo<\n  Pick<Props, 'mixed'> & { classNames: { iconWrap: string; icon: string } }\n>(({ mixed, classNames }) => {\n  const Icon = mixed ? FaMinusIcon : FaCheckIcon\n\n  return (\n    <span className={classNames.iconWrap}>\n      <Icon className={classNames.icon} />\n    </span>\n  )\n})\n"],"names":[],"mappings":";;;;;;;;AA0BA;AACE;AACE;AACA;;;;;;;;;;;;;;AAcC;AACD;;;;AAIC;AACD;AACA;;;;;AAKC;AACD;AAEA;;;AAGC;AACF;AACF;AAEM;AAEH;AACE;;AAGE;;;;;;;;AAQJ;AAEA;AAEA;AACA;;;AAQE;AACE;;AAEJ;;AA2BF;AAGF;AAIA;;AAKE;AAKF;;"}

package/lib/components/Chip/Chip.cjs

@@ -9,6 +9,7 @@ const classNameGenerator = index.tv({
         'smarthr-ui-Chip',
         'shr-border-shorthand shr-rounded-full shr-bg-white shr-leading-none shr-text-black',
         'contrast-more:shr-border-high-contrast',
+        'data-[disabled]:shr-bg-white/50 data-[disabled]:shr-text-disabled',
     ],
     variants: {
         color: {
@@ -21,18 +22,11 @@ const classNameGenerator = index.tv({
         size: {
             S: 'shr-px-0.5 shr-py-0.25 shr-text-sm',
         },
-        disabled: {
-            true: 'shr-bg-white/50 shr-text-disabled',
-        },
-    },
-    defaultVariants: {
-        size: 'S',
-        color: 'grey',
     },
 });
 const Chip = ({ size, color, disabled, className, ...rest }) => {
-    const actualClassName = React.useMemo(() => classNameGenerator({ size, color, disabled, className }), [size, color, disabled, className]);
-    return jsxRuntime.jsx("span", { ...rest, className: actualClassName });
+    const actualClassName = React.useMemo(() => classNameGenerator({ size: size || 'S', color: color || 'grey', className }), [size, color, className]);
+    return jsxRuntime.jsx("span", { ...rest, "data-disabled": disabled || undefined, className: actualClassName });
 };
 
 exports.Chip = Chip;

package/lib/components/Chip/Chip.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Chip.cjs","sources":["../../../src/components/Chip/Chip.tsx"],"sourcesContent":["import { type ComponentPropsWithoutRef, type FC, type PropsWithChildren, useMemo } from 'react'\nimport { type VariantProps, tv } from 'tailwind-variants'\n\ntype Props = PropsWithChildren<\n  VariantProps<typeof classNameGenerator> & ComponentPropsWithoutRef<'span'>\n>\n\nconst classNameGenerator = tv({\n  base: [\n    'smarthr-ui-Chip',\n    'shr-border-shorthand shr-rounded-full shr-bg-white shr-leading-none shr-text-black',\n    'contrast-more:shr-border-high-contrast',\n  ],\n  variants: {\n    color: {\n      grey: 'shr-border-grey-20',\n      blue: 'shr-border-main',\n      green: 'shr-border-green',\n      orange: 'shr-border-orange',\n      red: 'shr-border-danger',\n    },\n    size: {\n      S: 'shr-px-0.5 shr-py-0.25 shr-text-sm',\n    },\n    disabled: {\n      true: 'shr-bg-white/50 shr-text-disabled',\n    },\n  },\n  defaultVariants: {\n    size: 'S',\n    color: 'grey',\n  },\n})\n\nexport const Chip: FC<Props> = ({ size, color, disabled, className, ...rest }) => {\n  const actualClassName = useMemo(\n    () => classNameGenerator({ size, color, disabled, className }),\n    [size, color, disabled, className],\n  )\n  return <span {...rest} className={actualClassName} />\n}\n"],"names":["tv","useMemo","_jsx"],"mappings":";;;;;;AAOA,MAAM,kBAAkB,GAAGA,QAAE,CAAC;AAC5B,IAAA,IAAI,EAAE;QACJ,iBAAiB;QACjB,oFAAoF;QACpF,wCAAwC;AACzC,KAAA;AACD,IAAA,QAAQ,EAAE;AACR,QAAA,KAAK,EAAE;AACL,YAAA,IAAI,EAAE,oBAAoB;AAC1B,YAAA,IAAI,EAAE,iBAAiB;AACvB,YAAA,KAAK,EAAE,kBAAkB;AACzB,YAAA,MAAM,EAAE,mBAAmB;AAC3B,YAAA,GAAG,EAAE,mBAAmB;AACzB,SAAA;AACD,QAAA,IAAI,EAAE;AACJ,YAAA,CAAC,EAAE,oCAAoC;AACxC,SAAA;AACD,QAAA,QAAQ,EAAE;AACR,YAAA,IAAI,EAAE,mCAAmC;AAC1C,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,IAAI,EAAE,GAAG;AACT,QAAA,KAAK,EAAE,MAAM;AACd,KAAA;AACF,CAAA,CAAC;AAEK,MAAM,IAAI,GAAc,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,KAAI;AAC/E,IAAA,MAAM,eAAe,GAAGC,aAAO,CAC7B,MAAM,kBAAkB,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC,EAC9D,CAAC,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,CAAC,CACnC;AACD,IAAA,OAAOC,4BAAU,IAAI,EAAE,SAAS,EAAE,eAAe,GAAI;AACvD;;;;"}
+{"version":3,"file":"Chip.cjs","sources":["../../../src/components/Chip/Chip.tsx"],"sourcesContent":["import { type ComponentPropsWithoutRef, type FC, type PropsWithChildren, useMemo } from 'react'\nimport { type VariantProps, tv } from 'tailwind-variants'\n\ntype Props = PropsWithChildren<\n  VariantProps<typeof classNameGenerator> &\n    ComponentPropsWithoutRef<'span'> & { disabled?: boolean }\n>\n\nconst classNameGenerator = tv({\n  base: [\n    'smarthr-ui-Chip',\n    'shr-border-shorthand shr-rounded-full shr-bg-white shr-leading-none shr-text-black',\n    'contrast-more:shr-border-high-contrast',\n    'data-[disabled]:shr-bg-white/50 data-[disabled]:shr-text-disabled',\n  ],\n  variants: {\n    color: {\n      grey: 'shr-border-grey-20',\n      blue: 'shr-border-main',\n      green: 'shr-border-green',\n      orange: 'shr-border-orange',\n      red: 'shr-border-danger',\n    },\n    size: {\n      S: 'shr-px-0.5 shr-py-0.25 shr-text-sm',\n    },\n  },\n})\n\nexport const Chip: FC<Props> = ({ size, color, disabled, className, ...rest }) => {\n  const actualClassName = useMemo(\n    () => classNameGenerator({ size: size || 'S', color: color || 'grey', className }),\n    [size, color, className],\n  )\n\n  return <span {...rest} data-disabled={disabled || undefined} className={actualClassName} />\n}\n"],"names":["tv","useMemo","_jsx"],"mappings":";;;;;;AAQA,MAAM,kBAAkB,GAAGA,QAAE,CAAC;AAC5B,IAAA,IAAI,EAAE;QACJ,iBAAiB;QACjB,oFAAoF;QACpF,wCAAwC;QACxC,mEAAmE;AACpE,KAAA;AACD,IAAA,QAAQ,EAAE;AACR,QAAA,KAAK,EAAE;AACL,YAAA,IAAI,EAAE,oBAAoB;AAC1B,YAAA,IAAI,EAAE,iBAAiB;AACvB,YAAA,KAAK,EAAE,kBAAkB;AACzB,YAAA,MAAM,EAAE,mBAAmB;AAC3B,YAAA,GAAG,EAAE,mBAAmB;AACzB,SAAA;AACD,QAAA,IAAI,EAAE;AACJ,YAAA,CAAC,EAAE,oCAAoC;AACxC,SAAA;AACF,KAAA;AACF,CAAA,CAAC;AAEK,MAAM,IAAI,GAAc,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,KAAI;AAC/E,IAAA,MAAM,eAAe,GAAGC,aAAO,CAC7B,MAAM,kBAAkB,CAAC,EAAE,IAAI,EAAE,IAAI,IAAI,GAAG,EAAE,KAAK,EAAE,KAAK,IAAI,MAAM,EAAE,SAAS,EAAE,CAAC,EAClF,CAAC,IAAI,EAAE,KAAK,EAAE,SAAS,CAAC,CACzB;IAED,OAAOC,cAAA,CAAA,MAAA,EAAA,EAAA,GAAU,IAAI,EAAA,eAAA,EAAiB,QAAQ,IAAI,SAAS,EAAE,SAAS,EAAE,eAAe,EAAA,CAAI;AAC7F;;;;"}

package/lib/components/Chip/Chip.d.ts

@@ -1,6 +1,8 @@
 import { type ComponentPropsWithoutRef, type FC, type PropsWithChildren } from 'react';
 import { type VariantProps } from 'tailwind-variants';
-type Props = PropsWithChildren<VariantProps<typeof classNameGenerator> & ComponentPropsWithoutRef<'span'>>;
+type Props = PropsWithChildren<VariantProps<typeof classNameGenerator> & ComponentPropsWithoutRef<'span'> & {
+    disabled?: boolean;
+}>;
 declare const classNameGenerator: import("tailwind-variants").TVReturnType<{
     color: {
         grey: string;
@@ -12,9 +14,6 @@ declare const classNameGenerator: import("tailwind-variants").TVReturnType<{
     size: {
         S: string;
     };
-    disabled: {
-        true: string;
-    };
 }, undefined, string[], import("tailwind-variants/dist/config").TVConfig<{
     color: {
         grey: string;
@@ -26,9 +25,6 @@ declare const classNameGenerator: import("tailwind-variants").TVReturnType<{
     size: {
         S: string;
     };
-    disabled: {
-        true: string;
-    };
 }, {
     color: {
         grey: string;
@@ -40,9 +36,6 @@ declare const classNameGenerator: import("tailwind-variants").TVReturnType<{
     size: {
         S: string;
     };
-    disabled: {
-        true: string;
-    };
 }>, {
     color: {
         grey: string;
@@ -54,9 +47,6 @@ declare const classNameGenerator: import("tailwind-variants").TVReturnType<{
     size: {
         S: string;
     };
-    disabled: {
-        true: string;
-    };
 }, undefined, import("tailwind-variants").TVReturnType<{
     color: {
         grey: string;
@@ -68,9 +58,6 @@ declare const classNameGenerator: import("tailwind-variants").TVReturnType<{
     size: {
         S: string;
     };
-    disabled: {
-        true: string;
-    };
 }, undefined, string[], import("tailwind-variants/dist/config").TVConfig<{
     color: {
         grey: string;
@@ -82,9 +69,6 @@ declare const classNameGenerator: import("tailwind-variants").TVReturnType<{
     size: {
         S: string;
     };
-    disabled: {
-        true: string;
-    };
 }, {
     color: {
         grey: string;
@@ -96,9 +80,6 @@ declare const classNameGenerator: import("tailwind-variants").TVReturnType<{
     size: {
         S: string;
     };
-    disabled: {
-        true: string;
-    };
 }>, unknown, unknown, undefined>>;
 export declare const Chip: FC<Props>;
 export {};

package/lib/components/Chip/Chip.js

@@ -7,6 +7,7 @@ const classNameGenerator = ce({
         'smarthr-ui-Chip',
         'shr-border-shorthand shr-rounded-full shr-bg-white shr-leading-none shr-text-black',
         'contrast-more:shr-border-high-contrast',
+        'data-[disabled]:shr-bg-white/50 data-[disabled]:shr-text-disabled',
     ],
     variants: {
         color: {
@@ -19,18 +20,11 @@ const classNameGenerator = ce({
         size: {
             S: 'shr-px-0.5 shr-py-0.25 shr-text-sm',
         },
-        disabled: {
-            true: 'shr-bg-white/50 shr-text-disabled',
-        },
-    },
-    defaultVariants: {
-        size: 'S',
-        color: 'grey',
     },
 });
 const Chip = ({ size, color, disabled, className, ...rest }) => {
-    const actualClassName = useMemo(() => classNameGenerator({ size, color, disabled, className }), [size, color, disabled, className]);
-    return jsx("span", { ...rest, className: actualClassName });
+    const actualClassName = useMemo(() => classNameGenerator({ size: size || 'S', color: color || 'grey', className }), [size, color, className]);
+    return jsx("span", { ...rest, "data-disabled": disabled || undefined, className: actualClassName });
 };
 
 export { Chip };

package/lib/components/Chip/Chip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Chip.js","sources":["../../../src/components/Chip/Chip.tsx"],"sourcesContent":["import { type ComponentPropsWithoutRef, type FC, type PropsWithChildren, useMemo } from 'react'\nimport { type VariantProps, tv } from 'tailwind-variants'\n\ntype Props = PropsWithChildren<\n  VariantProps<typeof classNameGenerator> & ComponentPropsWithoutRef<'span'>\n>\n\nconst classNameGenerator = tv({\n  base: [\n    'smarthr-ui-Chip',\n    'shr-border-shorthand shr-rounded-full shr-bg-white shr-leading-none shr-text-black',\n    'contrast-more:shr-border-high-contrast',\n  ],\n  variants: {\n    color: {\n      grey: 'shr-border-grey-20',\n      blue: 'shr-border-main',\n      green: 'shr-border-green',\n      orange: 'shr-border-orange',\n      red: 'shr-border-danger',\n    },\n    size: {\n      S: 'shr-px-0.5 shr-py-0.25 shr-text-sm',\n    },\n    disabled: {\n      true: 'shr-bg-white/50 shr-text-disabled',\n    },\n  },\n  defaultVariants: {\n    size: 'S',\n    color: 'grey',\n  },\n})\n\nexport const Chip: FC<Props> = ({ size, color, disabled, className, ...rest }) => {\n  const actualClassName = useMemo(\n    () => classNameGenerator({ size, color, disabled, className }),\n    [size, color, disabled, className],\n  )\n  return <span {...rest} className={actualClassName} />\n}\n"],"names":["tv","_jsx"],"mappings":";;;;AAOA,MAAM,kBAAkB,GAAGA,EAAE,CAAC;AAC5B,IAAA,IAAI,EAAE;QACJ,iBAAiB;QACjB,oFAAoF;QACpF,wCAAwC;AACzC,KAAA;AACD,IAAA,QAAQ,EAAE;AACR,QAAA,KAAK,EAAE;AACL,YAAA,IAAI,EAAE,oBAAoB;AAC1B,YAAA,IAAI,EAAE,iBAAiB;AACvB,YAAA,KAAK,EAAE,kBAAkB;AACzB,YAAA,MAAM,EAAE,mBAAmB;AAC3B,YAAA,GAAG,EAAE,mBAAmB;AACzB,SAAA;AACD,QAAA,IAAI,EAAE;AACJ,YAAA,CAAC,EAAE,oCAAoC;AACxC,SAAA;AACD,QAAA,QAAQ,EAAE;AACR,YAAA,IAAI,EAAE,mCAAmC;AAC1C,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,IAAI,EAAE,GAAG;AACT,QAAA,KAAK,EAAE,MAAM;AACd,KAAA;AACF,CAAA,CAAC;AAEK,MAAM,IAAI,GAAc,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,KAAI;AAC/E,IAAA,MAAM,eAAe,GAAG,OAAO,CAC7B,MAAM,kBAAkB,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC,EAC9D,CAAC,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,CAAC,CACnC;AACD,IAAA,OAAOC,iBAAU,IAAI,EAAE,SAAS,EAAE,eAAe,GAAI;AACvD;;;;"}
+{"version":3,"file":"Chip.js","sources":["../../../src/components/Chip/Chip.tsx"],"sourcesContent":["import { type ComponentPropsWithoutRef, type FC, type PropsWithChildren, useMemo } from 'react'\nimport { type VariantProps, tv } from 'tailwind-variants'\n\ntype Props = PropsWithChildren<\n  VariantProps<typeof classNameGenerator> &\n    ComponentPropsWithoutRef<'span'> & { disabled?: boolean }\n>\n\nconst classNameGenerator = tv({\n  base: [\n    'smarthr-ui-Chip',\n    'shr-border-shorthand shr-rounded-full shr-bg-white shr-leading-none shr-text-black',\n    'contrast-more:shr-border-high-contrast',\n    'data-[disabled]:shr-bg-white/50 data-[disabled]:shr-text-disabled',\n  ],\n  variants: {\n    color: {\n      grey: 'shr-border-grey-20',\n      blue: 'shr-border-main',\n      green: 'shr-border-green',\n      orange: 'shr-border-orange',\n      red: 'shr-border-danger',\n    },\n    size: {\n      S: 'shr-px-0.5 shr-py-0.25 shr-text-sm',\n    },\n  },\n})\n\nexport const Chip: FC<Props> = ({ size, color, disabled, className, ...rest }) => {\n  const actualClassName = useMemo(\n    () => classNameGenerator({ size: size || 'S', color: color || 'grey', className }),\n    [size, color, className],\n  )\n\n  return <span {...rest} data-disabled={disabled || undefined} className={actualClassName} />\n}\n"],"names":["tv","_jsx"],"mappings":";;;;AAQA,MAAM,kBAAkB,GAAGA,EAAE,CAAC;AAC5B,IAAA,IAAI,EAAE;QACJ,iBAAiB;QACjB,oFAAoF;QACpF,wCAAwC;QACxC,mEAAmE;AACpE,KAAA;AACD,IAAA,QAAQ,EAAE;AACR,QAAA,KAAK,EAAE;AACL,YAAA,IAAI,EAAE,oBAAoB;AAC1B,YAAA,IAAI,EAAE,iBAAiB;AACvB,YAAA,KAAK,EAAE,kBAAkB;AACzB,YAAA,MAAM,EAAE,mBAAmB;AAC3B,YAAA,GAAG,EAAE,mBAAmB;AACzB,SAAA;AACD,QAAA,IAAI,EAAE;AACJ,YAAA,CAAC,EAAE,oCAAoC;AACxC,SAAA;AACF,KAAA;AACF,CAAA,CAAC;AAEK,MAAM,IAAI,GAAc,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,KAAI;AAC/E,IAAA,MAAM,eAAe,GAAG,OAAO,CAC7B,MAAM,kBAAkB,CAAC,EAAE,IAAI,EAAE,IAAI,IAAI,GAAG,EAAE,KAAK,EAAE,KAAK,IAAI,MAAM,EAAE,SAAS,EAAE,CAAC,EAClF,CAAC,IAAI,EAAE,KAAK,EAAE,SAAS,CAAC,CACzB;IAED,OAAOC,GAAA,CAAA,MAAA,EAAA,EAAA,GAAU,IAAI,EAAA,eAAA,EAAiB,QAAQ,IAAI,SAAS,EAAE,SAAS,EAAE,eAAe,EAAA,CAAI;AAC7F;;;;"}

package/lib/components/Combobox/ItemButton.cjs

@@ -3,7 +3,6 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var index = require('./../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss@3.4.19_ts-node@10.9.2_@swc_core@1.15.46_@types_node@20.19.43_typescript@5.9.3__/vendor/tailwind-variants/dist/index.cjs');
-var hooks_useLatest = require('../../hooks/useLatest.cjs');
 require('../../intl/IntlProvider.cjs');
 require('react-intl');
 var intl_Localizer = require('../../intl/Localizer.cjs');
@@ -29,44 +28,11 @@ const classNameGenerator = index.tv({
         },
     },
 });
-const ItemButton = ({ option, onAdd, onSelect, onMouseOver, activeRef }) => {
-    const latest = hooks_useLatest.useLatest({ onAdd, onSelect, onMouseOver, option });
-    const handleMouseOver = React.useCallback(() => {
-        latest.onMouseOver(latest.option);
-    }, [latest]);
-    const handleAddClick = React.useCallback(() => {
-        latest.onAdd?.(latest.option);
-    }, [latest]);
-    const handleSelectClick = React.useCallback(() => {
-        latest.onSelect(latest.option);
-    }, [latest]);
-    const commonAttrs = {
-        id: option.id,
-        label: option.item.label,
-        activeRef,
-        onMouseOver: handleMouseOver,
-    };
-    return option.isNew ? (jsxRuntime.jsx(AddButton, { ...commonAttrs, onClick: handleAddClick })) : (jsxRuntime.jsx(SelectButton, { ...commonAttrs, disabled: option.item.disabled, selected: option.selected, onClick: handleSelectClick }));
+const CLASS_NAMES = {
+    new: classNameGenerator({ new: true }),
+    select: classNameGenerator({ new: false }),
 };
-const typedMemo = React.memo;
-const Memoized = typedMemo(ItemButton);
-const AddButton = React.memo(({ id, label, activeRef, onClick, onMouseOver }) => {
-    const className = classNameGenerator({
-        new: true,
-    });
-    return (jsxRuntime.jsx("button", { ref: activeRef, type: "button", role: "option", "aria-selected": false, id: id, "data-active": !!activeRef, onClick: onClick, 
-        // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
-        onMouseOver: onMouseOver, className: className, children: jsxRuntime.jsx(MemoizedNewIconWithText, { label: label }) }));
-});
-const MemoizedNewIconWithText = React.memo(({ label }) => (jsxRuntime.jsx(components_Text_Text.Text, { color: "TEXT_LINK", icon: jsxRuntime.jsx(components_Icon_FaIcon.FaCirclePlusIcon, { color: "TEXT_LINK" }), children: jsxRuntime.jsx(intl_Localizer.Localizer, { id: "smarthr-ui/Combobox/addItemButtonLabel", defaultText: "\u300C{name}\u300D\u3092\u8FFD\u52A0", values: { name: label } }) })));
-const SelectButton = React.memo(({ id, label, disabled, selected, activeRef, onClick, onMouseOver }) => {
-    const className = classNameGenerator({
-        new: false,
-    });
-    return (jsxRuntime.jsx("button", { ref: activeRef, type: "button", role: "option", id: id, disabled: disabled, "aria-selected": selected, "data-active": !!activeRef, onClick: onClick, 
-        // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
-        onMouseOver: onMouseOver, className: className, children: label }));
-});
+const ItemButton = React.memo(({ id, label, disabled, selected, isNew, activeRef }) => (jsxRuntime.jsx("button", { ref: activeRef, type: "button", role: "option", id: id, "data-active": !!activeRef, "aria-selected": isNew ? false : selected, disabled: isNew ? undefined : disabled, className: isNew ? CLASS_NAMES.new : CLASS_NAMES.select, children: isNew ? (jsxRuntime.jsx(components_Text_Text.Text, { color: "TEXT_LINK", icon: jsxRuntime.jsx(components_Icon_FaIcon.FaCirclePlusIcon, { color: "TEXT_LINK" }), children: jsxRuntime.jsx(intl_Localizer.Localizer, { id: "smarthr-ui/Combobox/addItemButtonLabel", defaultText: "\u300C{name}\u300D\u3092\u8FFD\u52A0", values: { name: label } }) })) : (label) })));
 
-exports.ItemButton = Memoized;
+exports.ItemButton = ItemButton;
 //# sourceMappingURL=ItemButton.cjs.map

package/lib/components/Combobox/ItemButton.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ItemButton.cjs","sources":["../../../src/components/Combobox/ItemButton.tsx"],"sourcesContent":["import { type ReactNode, type RefObject, memo, useCallback } from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useLatest } from '../../hooks/useLatest'\nimport { Localizer } from '../../intl'\nimport { FaCirclePlusIcon } from '../Icon'\nimport { Text } from '../Text'\n\nimport type { ComboboxOption } from './types'\n\ntype Props<T> = {\n  option: ComboboxOption<T>\n  onAdd?: (option: ComboboxOption<T>) => void\n  onSelect: (option: ComboboxOption<T>) => void\n  onMouseOver: (option: ComboboxOption<T>) => void\n  activeRef: RefObject<HTMLButtonElement> | undefined\n}\n\nconst classNameGenerator = tv({\n  base: [\n    'shr-block shr-min-w-full shr-cursor-pointer shr-border-none shr-px-1 shr-py-0.5 shr-text-left shr-text-base shr-leading-tight',\n    'aria-selected:shr-text-white',\n    'disabled:shr-cursor-not-allowed disabled:shr-text-disabled',\n    'data-[active=true]:shr-bg-white-darken data-[active=true]:aria-selected:shr-bg-main-darken',\n    'data-[active=false]:shr-bg-white data-[active=false]:aria-selected:shr-bg-main',\n  ],\n  variants: {\n    new: {\n      true: 'smarthr-ui-Combobox-addButton shr-flex shr-items-center',\n      false: 'smarthr-ui-Combobox-selectButton',\n    },\n  },\n})\n\nconst ItemButton = <T,>({ option, onAdd, onSelect, onMouseOver, activeRef }: Props<T>) => {\n  const latest = useLatest({ onAdd, onSelect, onMouseOver, option })\n\n  const handleMouseOver = useCallback(() => {\n    latest.onMouseOver(latest.option)\n  }, [latest])\n\n  const handleAddClick = useCallback(() => {\n    latest.onAdd?.(latest.option)\n  }, [latest])\n\n  const handleSelectClick = useCallback(() => {\n    latest.onSelect(latest.option)\n  }, [latest])\n\n  const commonAttrs = {\n    id: option.id,\n    label: option.item.label,\n    activeRef,\n    onMouseOver: handleMouseOver,\n  }\n\n  return option.isNew ? (\n    <AddButton {...commonAttrs} onClick={handleAddClick} />\n  ) : (\n    <SelectButton\n      {...commonAttrs}\n      disabled={option.item.disabled}\n      selected={option.selected}\n      onClick={handleSelectClick}\n    />\n  )\n}\nconst typedMemo: <T>(c: T) => T = memo\nconst Memoized = typedMemo(ItemButton)\nexport { Memoized as ItemButton }\n\nconst AddButton = memo<{\n  id: string\n  label: ReactNode\n  activeRef: RefObject<HTMLButtonElement> | undefined\n  onClick?: () => void\n  onMouseOver: () => void\n}>(({ id, label, activeRef, onClick, onMouseOver }) => {\n  const className = classNameGenerator({\n    new: true,\n  })\n\n  return (\n    <button\n      ref={activeRef}\n      type=\"button\"\n      role=\"option\"\n      aria-selected={false}\n      id={id}\n      data-active={!!activeRef}\n      onClick={onClick}\n      // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events\n      onMouseOver={onMouseOver}\n      className={className}\n    >\n      <MemoizedNewIconWithText label={label} />\n    </button>\n  )\n})\n\nconst MemoizedNewIconWithText = memo<{ label: ReactNode }>(({ label }) => (\n  <Text color=\"TEXT_LINK\" icon={<FaCirclePlusIcon color=\"TEXT_LINK\" />}>\n    <Localizer\n      id=\"smarthr-ui/Combobox/addItemButtonLabel\"\n      defaultText=\"「{name}」を追加\"\n      values={{ name: label }}\n    />\n  </Text>\n))\n\nconst SelectButton = memo<{\n  id: string\n  label: ReactNode\n  disabled?: boolean\n  selected: boolean\n  activeRef: RefObject<HTMLButtonElement> | undefined\n  onClick: () => void\n  onMouseOver: () => void\n}>(({ id, label, disabled, selected, activeRef, onClick, onMouseOver }) => {\n  const className = classNameGenerator({\n    new: false,\n  })\n\n  return (\n    <button\n      ref={activeRef}\n      type=\"button\"\n      role=\"option\"\n      id={id}\n      disabled={disabled}\n      aria-selected={selected}\n      data-active={!!activeRef}\n      onClick={onClick}\n      // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events\n      onMouseOver={onMouseOver}\n      className={className}\n    >\n      {label}\n    </button>\n  )\n})\n"],"names":["tv","useLatest","useCallback","_jsx","memo","Text","FaCirclePlusIcon","Localizer"],"mappings":";;;;;;;;;;;;;;;;AAkBA,MAAM,kBAAkB,GAAGA,QAAE,CAAC;AAC5B,IAAA,IAAI,EAAE;QACJ,+HAA+H;QAC/H,8BAA8B;QAC9B,4DAA4D;QAC5D,4FAA4F;QAC5F,gFAAgF;AACjF,KAAA;AACD,IAAA,QAAQ,EAAE;AACR,QAAA,GAAG,EAAE;AACH,YAAA,IAAI,EAAE,yDAAyD;AAC/D,YAAA,KAAK,EAAE,kCAAkC;AAC1C,SAAA;AACF,KAAA;AACF,CAAA,CAAC;AAEF,MAAM,UAAU,GAAG,CAAK,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,WAAW,EAAE,SAAS,EAAY,KAAI;AACvF,IAAA,MAAM,MAAM,GAAGC,yBAAS,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,EAAE,CAAC;AAElE,IAAA,MAAM,eAAe,GAAGC,iBAAW,CAAC,MAAK;AACvC,QAAA,MAAM,CAAC,WAAW,CAAC,MAAM,CAAC,MAAM,CAAC;AACnC,IAAA,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC;AAEZ,IAAA,MAAM,cAAc,GAAGA,iBAAW,CAAC,MAAK;QACtC,MAAM,CAAC,KAAK,GAAG,MAAM,CAAC,MAAM,CAAC;AAC/B,IAAA,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC;AAEZ,IAAA,MAAM,iBAAiB,GAAGA,iBAAW,CAAC,MAAK;AACzC,QAAA,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC,MAAM,CAAC;AAChC,IAAA,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC;AAEZ,IAAA,MAAM,WAAW,GAAG;QAClB,EAAE,EAAE,MAAM,CAAC,EAAE;AACb,QAAA,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC,KAAK;QACxB,SAAS;AACT,QAAA,WAAW,EAAE,eAAe;KAC7B;IAED,OAAO,MAAM,CAAC,KAAK,IACjBC,eAAC,SAAS,EAAA,EAAA,GAAK,WAAW,EAAE,OAAO,EAAE,cAAc,EAAA,CAAI,KAEvDA,cAAA,CAAC,YAAY,EAAA,EAAA,GACP,WAAW,EACf,QAAQ,EAAE,MAAM,CAAC,IAAI,CAAC,QAAQ,EAC9B,QAAQ,EAAE,MAAM,CAAC,QAAQ,EACzB,OAAO,EAAE,iBAAiB,EAAA,CAC1B,CACH;AACH,CAAC;AACD,MAAM,SAAS,GAAmBC,UAAI;AACtC,MAAM,QAAQ,GAAG,SAAS,CAAC,UAAU;AAGrC,MAAM,SAAS,GAAGA,UAAI,CAMnB,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,WAAW,EAAE,KAAI;IACpD,MAAM,SAAS,GAAG,kBAAkB,CAAC;AACnC,QAAA,GAAG,EAAE,IAAI;AACV,KAAA,CAAC;IAEF,QACED,cAAA,CAAA,QAAA,EAAA,EACE,GAAG,EAAE,SAAS,EACd,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,QAAQ,mBACE,KAAK,EACpB,EAAE,EAAE,EAAE,EAAA,aAAA,EACO,CAAC,CAAC,SAAS,EACxB,OAAO,EAAE,OAAO;;AAEhB,QAAA,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,SAAS,EAAA,QAAA,EAEpBA,cAAA,CAAC,uBAAuB,EAAA,EAAC,KAAK,EAAE,KAAK,EAAA,CAAI,EAAA,CAClC;AAEb,CAAC,CAAC;AAEF,MAAM,uBAAuB,GAAGC,UAAI,CAAuB,CAAC,EAAE,KAAK,EAAE,MACnED,cAAA,CAACE,yBAAI,EAAA,EAAC,KAAK,EAAC,WAAW,EAAC,IAAI,EAAEF,cAAA,CAACG,uCAAgB,EAAA,EAAC,KAAK,EAAC,WAAW,EAAA,CAAG,EAAA,QAAA,EAClEH,cAAA,CAACI,wBAAS,EAAA,EACR,EAAE,EAAC,wCAAwC,EAC3C,WAAW,EAAC,sCAAa,EACzB,MAAM,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,EAAA,CACvB,EAAA,CACG,CACR,CAAC;AAEF,MAAM,YAAY,GAAGH,UAAI,CAQtB,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,OAAO,EAAE,WAAW,EAAE,KAAI;IACxE,MAAM,SAAS,GAAG,kBAAkB,CAAC;AACnC,QAAA,GAAG,EAAE,KAAK;AACX,KAAA,CAAC;AAEF,IAAA,QACED,cAAA,CAAA,QAAA,EAAA,EACE,GAAG,EAAE,SAAS,EACd,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,QAAQ,EACb,EAAE,EAAE,EAAE,EACN,QAAQ,EAAE,QAAQ,EAAA,eAAA,EACH,QAAQ,EAAA,aAAA,EACV,CAAC,CAAC,SAAS,EACxB,OAAO,EAAE,OAAO;;QAEhB,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,SAAS,EAAA,QAAA,EAEnB,KAAK,EAAA,CACC;AAEb,CAAC,CAAC;;;;"}
+{"version":3,"file":"ItemButton.cjs","sources":["../../../src/components/Combobox/ItemButton.tsx"],"sourcesContent":["import { type RefObject, memo } from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { Localizer } from '../../intl'\nimport { FaCirclePlusIcon } from '../Icon'\nimport { Text } from '../Text'\n\nimport type { ComboboxOption } from './types'\n\ntype Props = Omit<ComboboxOption<unknown>, 'item'> &\n  Omit<ComboboxOption<unknown>['item'], 'data' | 'value'> & {\n    activeRef: RefObject<HTMLButtonElement> | undefined\n  }\n\nconst classNameGenerator = tv({\n  base: [\n    'shr-block shr-min-w-full shr-cursor-pointer shr-border-none shr-px-1 shr-py-0.5 shr-text-left shr-text-base shr-leading-tight',\n    'aria-selected:shr-text-white',\n    'disabled:shr-cursor-not-allowed disabled:shr-text-disabled',\n    'data-[active=true]:shr-bg-white-darken data-[active=true]:aria-selected:shr-bg-main-darken',\n    'data-[active=false]:shr-bg-white data-[active=false]:aria-selected:shr-bg-main',\n  ],\n  variants: {\n    new: {\n      true: 'smarthr-ui-Combobox-addButton shr-flex shr-items-center',\n      false: 'smarthr-ui-Combobox-selectButton',\n    },\n  },\n})\n\nconst CLASS_NAMES = {\n  new: classNameGenerator({ new: true }),\n  select: classNameGenerator({ new: false }),\n}\n\nexport const ItemButton = memo<Props>(({ id, label, disabled, selected, isNew, activeRef }) => (\n  <button\n    ref={activeRef}\n    type=\"button\"\n    role=\"option\"\n    id={id}\n    data-active={!!activeRef}\n    aria-selected={isNew ? false : selected}\n    disabled={isNew ? undefined : disabled}\n    className={isNew ? CLASS_NAMES.new : CLASS_NAMES.select}\n  >\n    {isNew ? (\n      <Text color=\"TEXT_LINK\" icon={<FaCirclePlusIcon color=\"TEXT_LINK\" />}>\n        <Localizer\n          id=\"smarthr-ui/Combobox/addItemButtonLabel\"\n          defaultText=\"「{name}」を追加\"\n          values={{ name: label }}\n        />\n      </Text>\n    ) : (\n      label\n    )}\n  </button>\n))\n"],"names":["tv","memo","_jsx","Text","FaCirclePlusIcon","Localizer"],"mappings":";;;;;;;;;;;;;;;AAcA,MAAM,kBAAkB,GAAGA,QAAE,CAAC;AAC5B,IAAA,IAAI,EAAE;QACJ,+HAA+H;QAC/H,8BAA8B;QAC9B,4DAA4D;QAC5D,4FAA4F;QAC5F,gFAAgF;AACjF,KAAA;AACD,IAAA,QAAQ,EAAE;AACR,QAAA,GAAG,EAAE;AACH,YAAA,IAAI,EAAE,yDAAyD;AAC/D,YAAA,KAAK,EAAE,kCAAkC;AAC1C,SAAA;AACF,KAAA;AACF,CAAA,CAAC;AAEF,MAAM,WAAW,GAAG;IAClB,GAAG,EAAE,kBAAkB,CAAC,EAAE,GAAG,EAAE,IAAI,EAAE,CAAC;IACtC,MAAM,EAAE,kBAAkB,CAAC,EAAE,GAAG,EAAE,KAAK,EAAE,CAAC;CAC3C;AAEM,MAAM,UAAU,GAAGC,UAAI,CAAQ,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAE,MACxFC,cAAA,CAAA,QAAA,EAAA,EACE,GAAG,EAAE,SAAS,EACd,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,QAAQ,EACb,EAAE,EAAE,EAAE,EAAA,aAAA,EACO,CAAC,CAAC,SAAS,EAAA,eAAA,EACT,KAAK,GAAG,KAAK,GAAG,QAAQ,EACvC,QAAQ,EAAE,KAAK,GAAG,SAAS,GAAG,QAAQ,EACtC,SAAS,EAAE,KAAK,GAAG,WAAW,CAAC,GAAG,GAAG,WAAW,CAAC,MAAM,EAAA,QAAA,EAEtD,KAAK,IACJA,cAAA,CAACC,yBAAI,IAAC,KAAK,EAAC,WAAW,EAAC,IAAI,EAAED,cAAA,CAACE,uCAAgB,IAAC,KAAK,EAAC,WAAW,EAAA,CAAG,EAAA,QAAA,EAClEF,cAAA,CAACG,wBAAS,EAAA,EACR,EAAE,EAAC,wCAAwC,EAC3C,WAAW,EAAC,sCAAa,EACzB,MAAM,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,EAAA,CACvB,EAAA,CACG,KAEP,KAAK,CACN,EAAA,CACM,CACV;;;;"}

package/lib/components/Combobox/ItemButton.d.ts

@@ -1,11 +1,7 @@
 import { type RefObject } from 'react';
 import type { ComboboxOption } from './types';
-type Props<T> = {
-    option: ComboboxOption<T>;
-    onAdd?: (option: ComboboxOption<T>) => void;
-    onSelect: (option: ComboboxOption<T>) => void;
-    onMouseOver: (option: ComboboxOption<T>) => void;
+type Props = Omit<ComboboxOption<unknown>, 'item'> & Omit<ComboboxOption<unknown>['item'], 'data' | 'value'> & {
     activeRef: RefObject<HTMLButtonElement> | undefined;
 };
-declare const Memoized: <T>({ option, onAdd, onSelect, onMouseOver, activeRef }: Props<T>) => import("react").JSX.Element;
-export { Memoized as ItemButton };
+export declare const ItemButton: import("react").NamedExoticComponent<Props>;
+export {};