@zenkigen-inc/component-ui 1.19.0 → 1.19.1

package/dist/index.d.mts

@@ -641,20 +641,34 @@ type Props$b = {
 declare function SelectItem({ option }: Props$b): react.JSX.Element;
 
 type Props$a = {
+    /** コンポーネントのサイズ */
     size?: 'x-small' | 'small' | 'medium' | 'large';
+    /** 表示スタイルのバリエーション */
     variant?: 'outline' | 'text';
+    /** コンポーネントの幅 */
     width?: CSSProperties['width'];
+    /** コンポーネントの最大幅 */
     maxWidth?: CSSProperties['maxWidth'];
+    /** 未選択時に表示されるテキスト */
     placeholder?: string;
+    /** プレースホルダー表示時のアイコン */
     placeholderIcon?: IconName;
+    /** 現在選択されているオプション */
     selectedOption?: SelectOption | null;
+    /** オプションリストの最大高さ */
     optionListMaxHeight?: CSSProperties['height'];
+    /** 無効状態の制御 */
     isDisabled?: boolean;
+    /** エラー状態の制御 */
     isError?: boolean;
+    /** 選択状態の見た目を適用するかどうか */
     isOptionSelected?: boolean;
+    /** 選択変更時のコールバック関数 */
     onChange?: (option: SelectOption | null) => void;
+    /** ドロップダウンリストの幅をトリガーボタンの幅に合わせる */
+    matchListToTrigger?: boolean;
 };
-declare function Select({ children, size, variant, width, maxWidth, placeholder, placeholderIcon, selectedOption, isDisabled, isError, isOptionSelected, onChange, optionListMaxHeight, }: PropsWithChildren<Props$a>): react.JSX.Element;
+declare function Select({ children, size, variant, width, maxWidth, placeholder, placeholderIcon, selectedOption, isDisabled, isError, isOptionSelected, onChange, optionListMaxHeight, matchListToTrigger, }: PropsWithChildren<Props$a>): react.JSX.Element;
 declare namespace Select {
     var Option: typeof SelectItem;
 }

package/dist/index.d.ts

@@ -641,20 +641,34 @@ type Props$b = {
 declare function SelectItem({ option }: Props$b): react.JSX.Element;
 
 type Props$a = {
+    /** コンポーネントのサイズ */
     size?: 'x-small' | 'small' | 'medium' | 'large';
+    /** 表示スタイルのバリエーション */
     variant?: 'outline' | 'text';
+    /** コンポーネントの幅 */
     width?: CSSProperties['width'];
+    /** コンポーネントの最大幅 */
     maxWidth?: CSSProperties['maxWidth'];
+    /** 未選択時に表示されるテキスト */
     placeholder?: string;
+    /** プレースホルダー表示時のアイコン */
     placeholderIcon?: IconName;
+    /** 現在選択されているオプション */
     selectedOption?: SelectOption | null;
+    /** オプションリストの最大高さ */
     optionListMaxHeight?: CSSProperties['height'];
+    /** 無効状態の制御 */
     isDisabled?: boolean;
+    /** エラー状態の制御 */
     isError?: boolean;
+    /** 選択状態の見た目を適用するかどうか */
     isOptionSelected?: boolean;
+    /** 選択変更時のコールバック関数 */
     onChange?: (option: SelectOption | null) => void;
+    /** ドロップダウンリストの幅をトリガーボタンの幅に合わせる */
+    matchListToTrigger?: boolean;
 };
-declare function Select({ children, size, variant, width, maxWidth, placeholder, placeholderIcon, selectedOption, isDisabled, isError, isOptionSelected, onChange, optionListMaxHeight, }: PropsWithChildren<Props$a>): react.JSX.Element;
+declare function Select({ children, size, variant, width, maxWidth, placeholder, placeholderIcon, selectedOption, isDisabled, isError, isOptionSelected, onChange, optionListMaxHeight, matchListToTrigger, }: PropsWithChildren<Props$a>): react.JSX.Element;
 declare namespace Select {
     var Option: typeof SelectItem;
 }

package/dist/index.js

@@ -604,18 +604,18 @@ var import_react_day_picker2 = require("react-day-picker");
 var import_clsx6 = require("clsx");
 var import_react_day_picker = require("react-day-picker");
 var defaultDayPickerClassNames = (0, import_react_day_picker.getDefaultClassNames)();
+var DAY_PICKER_FONT_SIZE = "12px";
 var dayPickerStyle = {
-  "--rdp-font-family": "Arial, 'Noto Sans JP', sans-serif",
   "--rdp-nav-height": "30px",
-  "--rdp-day-font": "700 12px/1 'Arial', 'Noto Sans JP', sans-serif",
-  "--rdp-selected-font": "700 12px/1 'Arial', 'Noto Sans JP', sans-serif",
-  "--rdp-weekday-font": "700 12px/1 'Arial', 'Noto Sans JP', sans-serif",
   "--rdp-day-width": "30px",
   "--rdp-day-height": "30px",
   "--rdp-day_button-width": "28px",
   "--rdp-day_button-height": "28px",
   "--rdp-day_button-border": "1px solid transparent",
-  "--rdp-weekday-padding": "0px"
+  "--rdp-weekday-padding": "0px",
+  fontFamily: "Arial, 'Noto Sans JP', sans-serif",
+  fontSize: DAY_PICKER_FONT_SIZE,
+  fontWeight: 700
 };
 var dayPickerClassNames = {
   month: (0, import_clsx6.clsx)(defaultDayPickerClassNames.month, "flex flex-col px-[7px] py-2")
@@ -624,7 +624,7 @@ var dayButtonBaseClass = "relative grid size-full place-items-center rounded-ful
 
 // src/date-picker/date-picker-day-button.tsx
 var import_jsx_runtime12 = require("react/jsx-runtime");
-var CustomDayButton = ({ day, modifiers, className, ...buttonProps }) => {
+var CustomDayButton = ({ day, modifiers, className, style, ...buttonProps }) => {
   const isSelected = Boolean(modifiers.selected);
   const isOutside = Boolean(modifiers.outside);
   const isMinMaxDisabled = Boolean(modifiers.minMaxDisabled);
@@ -637,6 +637,7 @@ var CustomDayButton = ({ day, modifiers, className, ...buttonProps }) => {
       ...buttonProps,
       day,
       modifiers,
+      style: { ...style, fontSize: DAY_PICKER_FONT_SIZE },
       className: (0, import_clsx7.clsx)(
         className,
         dayButtonBaseClass,
@@ -744,46 +745,55 @@ var formatMonthLabel = (date) => {
 
 // src/date-picker/date-picker-month-caption.tsx
 var import_jsx_runtime14 = require("react/jsx-runtime");
-var CustomMonthCaption = ({ calendarMonth, className, displayIndex, ...props }) => {
+var CustomMonthCaption = ({ calendarMonth, className, displayIndex, style, ...props }) => {
   void displayIndex;
   const { goToMonth, nextMonth, previousMonth } = (0, import_react_day_picker3.useDayPicker)();
   const captionMonth = calendarMonth.date;
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: (0, import_clsx9.clsx)("flex items-center justify-between px-1 pb-0.5", className), ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-      IconButton,
-      {
-        icon: "angle-left",
-        size: "small",
-        variant: "text",
-        isDisabled: !previousMonth,
-        "aria-label": "\u524D\u306E\u6708",
-        onClick: () => previousMonth && goToMonth(previousMonth)
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "typography-label12bold text-text02", children: formatMonthLabel(captionMonth) }),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-      IconButton,
-      {
-        icon: "angle-right",
-        size: "small",
-        variant: "text",
-        isDisabled: !nextMonth,
-        "aria-label": "\u6B21\u306E\u6708",
-        onClick: () => nextMonth && goToMonth(nextMonth)
-      }
-    )
-  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+    "div",
+    {
+      className: (0, import_clsx9.clsx)("flex items-center justify-between px-1 pb-0.5", className),
+      style: { ...style, fontSize: "inherit", fontWeight: "inherit" },
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          IconButton,
+          {
+            icon: "angle-left",
+            size: "small",
+            variant: "text",
+            isDisabled: !previousMonth,
+            "aria-label": "\u524D\u306E\u6708",
+            onClick: () => previousMonth && goToMonth(previousMonth)
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "typography-label12bold text-text02", children: formatMonthLabel(captionMonth) }),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          IconButton,
+          {
+            icon: "angle-right",
+            size: "small",
+            variant: "text",
+            isDisabled: !nextMonth,
+            "aria-label": "\u6B21\u306E\u6708",
+            onClick: () => nextMonth && goToMonth(nextMonth)
+          }
+        )
+      ]
+    }
+  );
 };
 
 // src/date-picker/date-picker-weekday.tsx
 var import_clsx10 = require("clsx");
 var import_jsx_runtime15 = require("react/jsx-runtime");
-var CustomWeekday = ({ className, children, ...props }) => {
+var CustomWeekday = ({ className, children, style, ...props }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
     "th",
     {
       ...props,
-      className: (0, import_clsx10.clsx)(className, "m-0 flex size-7 items-center justify-center p-0 text-center text-text02"),
+      className: (0, import_clsx10.clsx)(className, "m-0 size-7 p-0 text-center align-middle text-text02"),
+      style: { ...style, fontSize: "inherit", fontWeight: "bold" },
       children
     }
   );
@@ -2057,7 +2067,8 @@ function Select({
   isError = false,
   isOptionSelected = false,
   onChange,
-  optionListMaxHeight
+  optionListMaxHeight,
+  matchListToTrigger = false
 }) {
   const [isOptionListOpen, setIsOptionListOpen] = (0, import_react29.useState)(false);
   const targetRef = (0, import_react29.useRef)(null);
@@ -2071,8 +2082,12 @@ function Select({
       (0, import_react28.size)({
         apply({ availableWidth, elements, rects }) {
           const referenceWidth = rects.reference.width;
-          elements.floating.style.minWidth = `${referenceWidth}px`;
-          elements.floating.style.maxWidth = `${availableWidth}px`;
+          if (matchListToTrigger) {
+            elements.floating.style.width = `${referenceWidth}px`;
+          } else {
+            elements.floating.style.minWidth = `${referenceWidth}px`;
+            elements.floating.style.maxWidth = `${availableWidth}px`;
+          }
         }
       })
     ],

package/dist/index.mjs

@@ -537,18 +537,18 @@ import { DayButton } from "react-day-picker";
 import { clsx as clsx6 } from "clsx";
 import { getDefaultClassNames } from "react-day-picker";
 var defaultDayPickerClassNames = getDefaultClassNames();
+var DAY_PICKER_FONT_SIZE = "12px";
 var dayPickerStyle = {
-  "--rdp-font-family": "Arial, 'Noto Sans JP', sans-serif",
   "--rdp-nav-height": "30px",
-  "--rdp-day-font": "700 12px/1 'Arial', 'Noto Sans JP', sans-serif",
-  "--rdp-selected-font": "700 12px/1 'Arial', 'Noto Sans JP', sans-serif",
-  "--rdp-weekday-font": "700 12px/1 'Arial', 'Noto Sans JP', sans-serif",
   "--rdp-day-width": "30px",
   "--rdp-day-height": "30px",
   "--rdp-day_button-width": "28px",
   "--rdp-day_button-height": "28px",
   "--rdp-day_button-border": "1px solid transparent",
-  "--rdp-weekday-padding": "0px"
+  "--rdp-weekday-padding": "0px",
+  fontFamily: "Arial, 'Noto Sans JP', sans-serif",
+  fontSize: DAY_PICKER_FONT_SIZE,
+  fontWeight: 700
 };
 var dayPickerClassNames = {
   month: clsx6(defaultDayPickerClassNames.month, "flex flex-col px-[7px] py-2")
@@ -557,7 +557,7 @@ var dayButtonBaseClass = "relative grid size-full place-items-center rounded-ful
 
 // src/date-picker/date-picker-day-button.tsx
 import { jsx as jsx11 } from "react/jsx-runtime";
-var CustomDayButton = ({ day, modifiers, className, ...buttonProps }) => {
+var CustomDayButton = ({ day, modifiers, className, style, ...buttonProps }) => {
   const isSelected = Boolean(modifiers.selected);
   const isOutside = Boolean(modifiers.outside);
   const isMinMaxDisabled = Boolean(modifiers.minMaxDisabled);
@@ -570,6 +570,7 @@ var CustomDayButton = ({ day, modifiers, className, ...buttonProps }) => {
       ...buttonProps,
       day,
       modifiers,
+      style: { ...style, fontSize: DAY_PICKER_FONT_SIZE },
       className: clsx7(
         className,
         dayButtonBaseClass,
@@ -677,46 +678,55 @@ var formatMonthLabel = (date) => {
 
 // src/date-picker/date-picker-month-caption.tsx
 import { jsx as jsx13, jsxs as jsxs3 } from "react/jsx-runtime";
-var CustomMonthCaption = ({ calendarMonth, className, displayIndex, ...props }) => {
+var CustomMonthCaption = ({ calendarMonth, className, displayIndex, style, ...props }) => {
   void displayIndex;
   const { goToMonth, nextMonth, previousMonth } = useDayPicker();
   const captionMonth = calendarMonth.date;
-  return /* @__PURE__ */ jsxs3("div", { className: clsx9("flex items-center justify-between px-1 pb-0.5", className), ...props, children: [
-    /* @__PURE__ */ jsx13(
-      IconButton,
-      {
-        icon: "angle-left",
-        size: "small",
-        variant: "text",
-        isDisabled: !previousMonth,
-        "aria-label": "\u524D\u306E\u6708",
-        onClick: () => previousMonth && goToMonth(previousMonth)
-      }
-    ),
-    /* @__PURE__ */ jsx13("span", { className: "typography-label12bold text-text02", children: formatMonthLabel(captionMonth) }),
-    /* @__PURE__ */ jsx13(
-      IconButton,
-      {
-        icon: "angle-right",
-        size: "small",
-        variant: "text",
-        isDisabled: !nextMonth,
-        "aria-label": "\u6B21\u306E\u6708",
-        onClick: () => nextMonth && goToMonth(nextMonth)
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      className: clsx9("flex items-center justify-between px-1 pb-0.5", className),
+      style: { ...style, fontSize: "inherit", fontWeight: "inherit" },
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx13(
+          IconButton,
+          {
+            icon: "angle-left",
+            size: "small",
+            variant: "text",
+            isDisabled: !previousMonth,
+            "aria-label": "\u524D\u306E\u6708",
+            onClick: () => previousMonth && goToMonth(previousMonth)
+          }
+        ),
+        /* @__PURE__ */ jsx13("span", { className: "typography-label12bold text-text02", children: formatMonthLabel(captionMonth) }),
+        /* @__PURE__ */ jsx13(
+          IconButton,
+          {
+            icon: "angle-right",
+            size: "small",
+            variant: "text",
+            isDisabled: !nextMonth,
+            "aria-label": "\u6B21\u306E\u6708",
+            onClick: () => nextMonth && goToMonth(nextMonth)
+          }
+        )
+      ]
+    }
+  );
 };
 
 // src/date-picker/date-picker-weekday.tsx
 import { clsx as clsx10 } from "clsx";
 import { jsx as jsx14 } from "react/jsx-runtime";
-var CustomWeekday = ({ className, children, ...props }) => {
+var CustomWeekday = ({ className, children, style, ...props }) => {
   return /* @__PURE__ */ jsx14(
     "th",
     {
       ...props,
-      className: clsx10(className, "m-0 flex size-7 items-center justify-center p-0 text-center text-text02"),
+      className: clsx10(className, "m-0 size-7 p-0 text-center align-middle text-text02"),
+      style: { ...style, fontSize: "inherit", fontWeight: "bold" },
       children
     }
   );
@@ -1990,7 +2000,8 @@ function Select({
   isError = false,
   isOptionSelected = false,
   onChange,
-  optionListMaxHeight
+  optionListMaxHeight,
+  matchListToTrigger = false
 }) {
   const [isOptionListOpen, setIsOptionListOpen] = useState8(false);
   const targetRef = useRef6(null);
@@ -2004,8 +2015,12 @@ function Select({
       sizeMiddleware({
         apply({ availableWidth, elements, rects }) {
           const referenceWidth = rects.reference.width;
-          elements.floating.style.minWidth = `${referenceWidth}px`;
-          elements.floating.style.maxWidth = `${availableWidth}px`;
+          if (matchListToTrigger) {
+            elements.floating.style.width = `${referenceWidth}px`;
+          } else {
+            elements.floating.style.minWidth = `${referenceWidth}px`;
+            elements.floating.style.maxWidth = `${availableWidth}px`;
+          }
         }
       })
     ],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zenkigen-inc/component-ui",
-  "version": "1.19.0",
+  "version": "1.19.1",
   "repository": "https://github.com/zenkigen/zenkigen-component",
   "license": "MIT",
   "publishConfig": {
@@ -38,10 +38,10 @@
   },
   "dependencies": {
     "@floating-ui/react": "0.27.16",
-    "@zenkigen-inc/component-config": "1.19.0",
-    "@zenkigen-inc/component-icons": "1.19.0",
-    "@zenkigen-inc/component-theme": "1.19.0",
+    "@zenkigen-inc/component-config": "1.19.1",
+    "@zenkigen-inc/component-icons": "1.19.1",
+    "@zenkigen-inc/component-theme": "1.19.1",
     "clsx": "2.1.1",
-    "react-day-picker": "9.0.0"
+    "react-day-picker": "9.13.0"
   }
 }