smarthr-ui 99.8.0 → 100.0.0

package/lib/_virtual/index3.cjs

@@ -1,10 +1,6 @@
 'use strict';
 
-var _commonjsHelpers = require('./_commonjsHelpers.cjs');
-var index = require('./../vendor/.pnpm/react-innertext@1.1.5_@types_react@18.3.31_react@19.3.0/vendor/react-innertext/index.cjs');
+var lodash_merge = {exports: {}};
 
-var reactInnertextExports = index.__require();
-var innerText = /*@__PURE__*/_commonjsHelpers.getDefaultExportFromCjs(reactInnertextExports);
-
-module.exports = innerText;
+exports.__module = lodash_merge;
 //# sourceMappingURL=index3.cjs.map

package/lib/_virtual/index3.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index3.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}
+{"version":3,"file":"index3.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/lib/_virtual/index3.js

@@ -1,8 +1,4 @@
-import { getDefaultExportFromCjs } from './_commonjsHelpers.js';
-import { __require as requireReactInnertext } from './../vendor/.pnpm/react-innertext@1.1.5_@types_react@18.3.31_react@19.3.0/vendor/react-innertext/index.js';
+var lodash_merge = {exports: {}};
 
-var reactInnertextExports = requireReactInnertext();
-var innerText = /*@__PURE__*/getDefaultExportFromCjs(reactInnertextExports);
-
-export { innerText as default };
+export { lodash_merge as __module };
 //# sourceMappingURL=index3.js.map

package/lib/_virtual/index3.js.map

@@ -1 +1 @@
-{"version":3,"file":"index3.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
+{"version":3,"file":"index3.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/lib/_virtual/index4.cjs

@@ -1,6 +1,10 @@
 'use strict';
 
-var lodash_merge = {exports: {}};
+var _commonjsHelpers = require('./_commonjsHelpers.cjs');
+var index = require('./../vendor/.pnpm/prop-types@15.8.1/vendor/prop-types/index.cjs');
 
-exports.__module = lodash_merge;
+var propTypesExports = /*@__PURE__*/ index.__require();
+var PropTypes2 = /*@__PURE__*/_commonjsHelpers.getDefaultExportFromCjs(propTypesExports);
+
+module.exports = PropTypes2;
 //# sourceMappingURL=index4.cjs.map

package/lib/_virtual/index4.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index4.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
+{"version":3,"file":"index4.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/lib/_virtual/index4.js

@@ -1,4 +1,8 @@
-var lodash_merge = {exports: {}};
+import { getDefaultExportFromCjs } from './_commonjsHelpers.js';
+import { __require as requirePropTypes } from './../vendor/.pnpm/prop-types@15.8.1/vendor/prop-types/index.js';
 
-export { lodash_merge as __module };
+var propTypesExports = /*@__PURE__*/ requirePropTypes();
+var PropTypes2 = /*@__PURE__*/getDefaultExportFromCjs(propTypesExports);
+
+export { PropTypes2 as default };
 //# sourceMappingURL=index4.js.map

package/lib/_virtual/index4.js.map

@@ -1 +1 @@
-{"version":3,"file":"index4.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}
+{"version":3,"file":"index4.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/lib/_virtual/index5.cjs

@@ -1,10 +1,6 @@
 'use strict';
 
-var _commonjsHelpers = require('./_commonjsHelpers.cjs');
-var index = require('./../vendor/.pnpm/prop-types@15.8.1/vendor/prop-types/index.cjs');
+var propTypes = {exports: {}};
 
-var propTypesExports = /*@__PURE__*/ index.__require();
-var PropTypes2 = /*@__PURE__*/_commonjsHelpers.getDefaultExportFromCjs(propTypesExports);
-
-module.exports = PropTypes2;
+exports.__module = propTypes;
 //# sourceMappingURL=index5.cjs.map

package/lib/_virtual/index5.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index5.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}
+{"version":3,"file":"index5.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/lib/_virtual/index5.js

@@ -1,8 +1,4 @@
-import { getDefaultExportFromCjs } from './_commonjsHelpers.js';
-import { __require as requirePropTypes } from './../vendor/.pnpm/prop-types@15.8.1/vendor/prop-types/index.js';
+var propTypes = {exports: {}};
 
-var propTypesExports = /*@__PURE__*/ requirePropTypes();
-var PropTypes2 = /*@__PURE__*/getDefaultExportFromCjs(propTypesExports);
-
-export { PropTypes2 as default };
+export { propTypes as __module };
 //# sourceMappingURL=index5.js.map

package/lib/_virtual/index5.js.map

@@ -1 +1 @@
-{"version":3,"file":"index5.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
+{"version":3,"file":"index5.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/lib/components/AccordionPanel/client/AccordionPanel.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionPanel.cjs","sources":["../../../../src/components/AccordionPanel/client/AccordionPanel.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentProps,\n  type FC,\n  type KeyboardEventHandler,\n  type MouseEvent,\n  type PropsWithChildren,\n  createContext,\n  useMemo,\n  useState,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useLatest } from '../../../hooks/useLatest'\nimport { flatArrayToMap, mapToKeyArray } from '../../../libs/map'\n\ntype BaseProps = PropsWithChildren<{\n  /** アイコンの左右位置 */\n  iconPosition?: 'left' | 'right'\n  /** 複数のパネルを同時に開くことを許容するかどうか */\n  expandableMultiply?: boolean\n  /** デフォルトで開いた状態にするアイテムの `name` の配列 */\n  defaultExpanded?: string[]\n  /** トリガのクリックイベントを処理するハンドラ */\n  onClick?: (expandedItems: string[]) => void\n  /** 角丸を適用する範囲 */\n  rounded?: boolean | 'all' | 'top' | 'right' | 'bottom' | 'left'\n}>\ntype Props = BaseProps & Omit<ComponentProps<'div'>, keyof BaseProps>\n\nconst DEFAULT_EXPANDED_ARRAY: string[] = []\nconst DEFAULT_EXPANDED_MAP = flatArrayToMap(DEFAULT_EXPANDED_ARRAY)\n\nexport const AccordionPanelContext = createContext<{\n  iconPosition: 'left' | 'right'\n  expandedItems: Map<string, string>\n  handleClickTrigger: (e: MouseEvent<HTMLButtonElement>) => void\n  handleKeyDown: KeyboardEventHandler<HTMLButtonElement>\n}>({\n  iconPosition: 'left',\n  expandedItems: DEFAULT_EXPANDED_MAP,\n  handleClickTrigger: () => {},\n  handleKeyDown: () => {},\n})\n\nconst ROUNDED = {\n  t_l: '[&>.smarthr-ui-AccordionPanel-item:first-child_.smarthr-ui-AccordionPanel-trigger]:shr-rounded-tl-l',\n  t_r: '[&>.smarthr-ui-AccordionPanel-item:first-child_.smarthr-ui-AccordionPanel-trigger]:shr-rounded-tr-l',\n  b_l: '[&>.smarthr-ui-AccordionPanel-item:last-child_.smarthr-ui-AccordionPanel-trigger:not([aria-expanded=\"true\"])]:shr-rounded-bl-l',\n  b_r: '[&>.smarthr-ui-AccordionPanel-item:last-child_.smarthr-ui-AccordionPanel-trigger:not([aria-expanded=\"true\"])]:shr-rounded-br-l',\n}\n\nconst ROUNDED_ALL = [ROUNDED.t_l, ROUNDED.t_r, ROUNDED.b_l, ROUNDED.b_r]\n\nconst classNameGenerator = tv({\n  base: 'smarthr-ui-AccordionPanel',\n  variants: {\n    rounded: {\n      true: ROUNDED_ALL,\n      false: '',\n      all: ROUNDED_ALL,\n      top: [ROUNDED.t_l, ROUNDED.t_r],\n      right: [ROUNDED.t_r, ROUNDED.b_r],\n      bottom: [ROUNDED.b_l, ROUNDED.b_r],\n      left: [ROUNDED.t_l, ROUNDED.b_l],\n    } satisfies Record<\n      Exclude<NonNullable<BaseProps['rounded']>, boolean> | 'true' | 'false',\n      string | string[]\n    >,\n  },\n  defaultVariants: {\n    rounded: false,\n  },\n})\n\nexport const AccordionPanel: FC<Props> = ({\n  iconPosition = 'left',\n  expandableMultiply = true,\n  defaultExpanded = DEFAULT_EXPANDED_ARRAY,\n  className,\n  onClick,\n  rounded,\n  children,\n  ...rest\n}) => {\n  const [expandedItems, setExpanded] = useState(() => flatArrayToMap(defaultExpanded))\n  const actualClassName = useMemo(\n    () => classNameGenerator({ className, rounded }),\n    [rounded, className],\n  )\n\n  const latest = useLatest({ onClick, expandableMultiply })\n\n  const functions = useMemo(() => {\n    let wrapper: HTMLElement | null = null\n\n    return {\n      callbackRef: (node: HTMLElement | null) => {\n        wrapper = node\n      },\n      handleClickTrigger: (e: MouseEvent<HTMLButtonElement>) => {\n        const { currentTarget } = e\n\n        setExpanded((prevExpandedItems) => {\n          let newExpandedItems: Map<string, string>\n          const itemName = currentTarget.value\n          const isExpanded = currentTarget.getAttribute('aria-expanded') !== 'true'\n\n          if (latest.expandableMultiply) {\n            newExpandedItems = new Map(prevExpandedItems)\n\n            if (isExpanded) {\n              newExpandedItems.set(itemName, itemName)\n            } else {\n              newExpandedItems.delete(itemName)\n            }\n          } else {\n            newExpandedItems = isExpanded ? new Map([[itemName, itemName]]) : new Map()\n          }\n\n          latest.onClick?.(mapToKeyArray(newExpandedItems))\n\n          return newExpandedItems\n        })\n      },\n      handleKeyDown: (e: Parameters<KeyboardEventHandler<HTMLButtonElement>>[0]): void => {\n        if (!wrapper) {\n          return\n        }\n\n        const item = e.target as HTMLElement\n\n        switch (e.key) {\n          case 'Home': {\n            e.preventDefault()\n            focusSibling({\n              mode: 'first',\n              wrapper,\n            })\n            break\n          }\n          case 'End': {\n            e.preventDefault()\n            focusSibling({\n              mode: 'last',\n              wrapper,\n            })\n            break\n          }\n          case 'ArrowLeft':\n          case 'ArrowUp': {\n            e.preventDefault()\n            focusSibling({\n              mode: 'prev',\n              wrapper,\n              current: item,\n            })\n            break\n          }\n          case 'ArrowRight':\n          case 'ArrowDown': {\n            e.preventDefault()\n            focusSibling({\n              mode: 'next',\n              wrapper,\n              current: item,\n            })\n            break\n          }\n        }\n      },\n    }\n  }, [latest])\n\n  return (\n    <AccordionPanelContext.Provider\n      value={{\n        handleClickTrigger: functions.handleClickTrigger,\n        handleKeyDown: functions.handleKeyDown,\n        expandedItems,\n        iconPosition,\n      }}\n    >\n      <div {...rest} ref={functions.callbackRef} role=\"presentation\" className={actualClassName}>\n        {children}\n      </div>\n    </AccordionPanelContext.Provider>\n  )\n}\n\nconst focusSibling = (\n  props:\n    | {\n        mode: 'first' | 'last'\n        wrapper: HTMLElement\n        current?: undefined\n      }\n    | {\n        mode: 'next' | 'prev'\n        wrapper: HTMLElement\n        current: HTMLElement\n      },\n) => {\n  const siblings = props.wrapper.querySelectorAll<HTMLElement>(\n    '[data-component=\"AccordionHeaderButton\"]',\n  )\n  let target: HTMLElement | undefined = undefined\n\n  switch (props.mode) {\n    case 'first':\n      target = siblings[0]\n      break\n    case 'last':\n      target = siblings[siblings.length - 1]\n      break\n    case 'next': {\n      const index = Array.prototype.indexOf.call(siblings, props.current)\n\n      if (index === siblings.length - 1) {\n        target = siblings[0]\n      } else if (index !== -1) {\n        target = siblings[index + 1]\n      }\n\n      break\n    }\n    case 'prev': {\n      const index = Array.prototype.indexOf.call(siblings, props.current)\n\n      if (index === 0) {\n        target = siblings[siblings.length - 1]\n      } else if (index !== -1) {\n        target = siblings[index - 1]\n      }\n\n      break\n    }\n  }\n\n  target?.focus()\n}\n"],"names":[],"mappings":";;;;;;;;;AA+BA;AACA;AAEO;AAML;AACA;AACA;AACA;AACD;AAED;AACE;AACA;AACA;AACA;;AAGF;AAEA;AACE;AACA;AACE;AACE;AACA;AACA;;;;;AAQD;AACF;AACD;AACE;AACD;AACF;AAEM;AAUL;;;AAQA;;;AAII;;;AAGA;AACE;AAEA;AACE;AACA;;AAGA;AACE;;AAGE;;;AAEA;;;;;;;AAQJ;AACF;;AAEF;;;;AAKE;AAEA;;;AAGI;AACE;;AAED;;;;;AAKD;AACE;;AAED;;;AAGH;;;AAGE;AACE;;AAEA;AACD;;;AAGH;;;AAGE;AACE;;AAEA;AACD;;;;;;AAMX;AAEA;;;;;;AAcF;AAEA;;;AAkBE;AACE;AACE;;AAEF;;;;AAIE;;AAGE;;AACK;AACL;;;;;AAMF;AAEA;;;AAEO;AACL;;;;;;AAQR;;;"}
+{"version":3,"file":"AccordionPanel.cjs","sources":["../../../../src/components/AccordionPanel/client/AccordionPanel.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type FC,\n  type KeyboardEventHandler,\n  type MouseEvent,\n  createContext,\n  useMemo,\n  useState,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useLatest } from '../../../hooks/useLatest'\nimport { flatArrayToMap, mapToKeyArray } from '../../../libs/map'\n\nimport type { SHRComponentPropsWithoutRef } from '../../../types'\n\ntype Props = SHRComponentPropsWithoutRef<\n  'div',\n  {\n    /** アイコンの左右位置 */\n    iconPosition?: 'left' | 'right'\n    /** 複数のパネルを同時に開くことを許容するかどうか */\n    expandableMultiply?: boolean\n    /** デフォルトで開いた状態にするアイテムの `name` の配列 */\n    defaultExpanded?: string[]\n    /** トリガのクリックイベントを処理するハンドラ */\n    onClick?: (expandedItems: string[]) => void\n    /** 角丸を適用する範囲 */\n    rounded?: boolean | 'all' | 'top' | 'right' | 'bottom' | 'left'\n  },\n  { omit: 'role' }\n>\n\nconst DEFAULT_EXPANDED_ARRAY: string[] = []\nconst DEFAULT_EXPANDED_MAP = flatArrayToMap(DEFAULT_EXPANDED_ARRAY)\n\nexport const AccordionPanelContext = createContext<{\n  iconPosition: 'left' | 'right'\n  expandedItems: Map<string, string>\n  handleClickTrigger: (e: MouseEvent<HTMLButtonElement>) => void\n  handleKeyDown: KeyboardEventHandler<HTMLButtonElement>\n}>({\n  iconPosition: 'left',\n  expandedItems: DEFAULT_EXPANDED_MAP,\n  handleClickTrigger: () => {},\n  handleKeyDown: () => {},\n})\n\nconst ROUNDED = {\n  t_l: '[&>.smarthr-ui-AccordionPanel-item:first-child_.smarthr-ui-AccordionPanel-trigger]:shr-rounded-tl-l',\n  t_r: '[&>.smarthr-ui-AccordionPanel-item:first-child_.smarthr-ui-AccordionPanel-trigger]:shr-rounded-tr-l',\n  b_l: '[&>.smarthr-ui-AccordionPanel-item:last-child_.smarthr-ui-AccordionPanel-trigger:not([aria-expanded=\"true\"])]:shr-rounded-bl-l',\n  b_r: '[&>.smarthr-ui-AccordionPanel-item:last-child_.smarthr-ui-AccordionPanel-trigger:not([aria-expanded=\"true\"])]:shr-rounded-br-l',\n}\n\nconst ROUNDED_ALL = [ROUNDED.t_l, ROUNDED.t_r, ROUNDED.b_l, ROUNDED.b_r]\n\nconst classNameGenerator = tv({\n  base: 'smarthr-ui-AccordionPanel',\n  variants: {\n    rounded: {\n      true: ROUNDED_ALL,\n      false: '',\n      all: ROUNDED_ALL,\n      top: [ROUNDED.t_l, ROUNDED.t_r],\n      right: [ROUNDED.t_r, ROUNDED.b_r],\n      bottom: [ROUNDED.b_l, ROUNDED.b_r],\n      left: [ROUNDED.t_l, ROUNDED.b_l],\n    } satisfies Record<\n      Exclude<NonNullable<Props['rounded']>, boolean> | 'true' | 'false',\n      string | string[]\n    >,\n  },\n  defaultVariants: {\n    rounded: false,\n  },\n})\n\nexport const AccordionPanel: FC<Props> = ({\n  iconPosition = 'left',\n  expandableMultiply = true,\n  defaultExpanded = DEFAULT_EXPANDED_ARRAY,\n  className,\n  onClick,\n  rounded,\n  children,\n  ...rest\n}) => {\n  const [expandedItems, setExpanded] = useState(() => flatArrayToMap(defaultExpanded))\n  const actualClassName = useMemo(\n    () => classNameGenerator({ className, rounded }),\n    [rounded, className],\n  )\n\n  const latest = useLatest({ onClick, expandableMultiply })\n\n  const functions = useMemo(() => {\n    let wrapper: HTMLElement | null = null\n\n    return {\n      callbackRef: (node: HTMLElement | null) => {\n        wrapper = node\n      },\n      handleClickTrigger: (e: MouseEvent<HTMLButtonElement>) => {\n        const { currentTarget } = e\n\n        setExpanded((prevExpandedItems) => {\n          let newExpandedItems: Map<string, string>\n          const itemName = currentTarget.value\n          const isExpanded = currentTarget.getAttribute('aria-expanded') !== 'true'\n\n          if (latest.expandableMultiply) {\n            newExpandedItems = new Map(prevExpandedItems)\n\n            if (isExpanded) {\n              newExpandedItems.set(itemName, itemName)\n            } else {\n              newExpandedItems.delete(itemName)\n            }\n          } else {\n            newExpandedItems = isExpanded ? new Map([[itemName, itemName]]) : new Map()\n          }\n\n          latest.onClick?.(mapToKeyArray(newExpandedItems))\n\n          return newExpandedItems\n        })\n      },\n      handleKeyDown: (e: Parameters<KeyboardEventHandler<HTMLButtonElement>>[0]): void => {\n        if (!wrapper) {\n          return\n        }\n\n        const item = e.target as HTMLElement\n\n        switch (e.key) {\n          case 'Home': {\n            e.preventDefault()\n            focusSibling({\n              mode: 'first',\n              wrapper,\n            })\n            break\n          }\n          case 'End': {\n            e.preventDefault()\n            focusSibling({\n              mode: 'last',\n              wrapper,\n            })\n            break\n          }\n          case 'ArrowLeft':\n          case 'ArrowUp': {\n            e.preventDefault()\n            focusSibling({\n              mode: 'prev',\n              wrapper,\n              current: item,\n            })\n            break\n          }\n          case 'ArrowRight':\n          case 'ArrowDown': {\n            e.preventDefault()\n            focusSibling({\n              mode: 'next',\n              wrapper,\n              current: item,\n            })\n            break\n          }\n        }\n      },\n    }\n  }, [latest])\n\n  return (\n    <AccordionPanelContext.Provider\n      value={{\n        handleClickTrigger: functions.handleClickTrigger,\n        handleKeyDown: functions.handleKeyDown,\n        expandedItems,\n        iconPosition,\n      }}\n    >\n      <div {...rest} ref={functions.callbackRef} role=\"presentation\" className={actualClassName}>\n        {children}\n      </div>\n    </AccordionPanelContext.Provider>\n  )\n}\n\nconst focusSibling = (\n  props:\n    | {\n        mode: 'first' | 'last'\n        wrapper: HTMLElement\n        current?: undefined\n      }\n    | {\n        mode: 'next' | 'prev'\n        wrapper: HTMLElement\n        current: HTMLElement\n      },\n) => {\n  const siblings = props.wrapper.querySelectorAll<HTMLElement>(\n    '[data-component=\"AccordionHeaderButton\"]',\n  )\n  let target: HTMLElement | undefined = undefined\n\n  switch (props.mode) {\n    case 'first':\n      target = siblings[0]\n      break\n    case 'last':\n      target = siblings[siblings.length - 1]\n      break\n    case 'next': {\n      const index = Array.prototype.indexOf.call(siblings, props.current)\n\n      if (index === siblings.length - 1) {\n        target = siblings[0]\n      } else if (index !== -1) {\n        target = siblings[index + 1]\n      }\n\n      break\n    }\n    case 'prev': {\n      const index = Array.prototype.indexOf.call(siblings, props.current)\n\n      if (index === 0) {\n        target = siblings[siblings.length - 1]\n      } else if (index !== -1) {\n        target = siblings[index - 1]\n      }\n\n      break\n    }\n  }\n\n  target?.focus()\n}\n"],"names":[],"mappings":";;;;;;;;;AAkCA;AACA;AAEO;AAML;AACA;AACA;AACA;AACD;AAED;AACE;AACA;AACA;AACA;;AAGF;AAEA;AACE;AACA;AACE;AACE;AACA;AACA;;;;;AAQD;AACF;AACD;AACE;AACD;AACF;AAEM;AAUL;;;AAQA;;;AAII;;;AAGA;AACE;AAEA;AACE;AACA;;AAGA;AACE;;AAGE;;;AAEA;;;;;;;AAQJ;AACF;;AAEF;;;;AAKE;AAEA;;;AAGI;AACE;;AAED;;;;;AAKD;AACE;;AAED;;;AAGH;;;AAGE;AACE;;AAEA;AACD;;;AAGH;;;AAGE;AACE;;AAEA;AACD;;;;;;AAMX;AAEA;;;;;;AAcF;AAEA;;;AAkBE;AACE;AACE;;AAEF;;;;AAIE;;AAGE;;AACK;AACL;;;;;AAMF;AAEA;;;AAEO;AACL;;;;;;AAQR;;;"}

package/lib/components/AccordionPanel/client/AccordionPanel.d.ts

@@ -1,5 +1,6 @@
-import { type ComponentProps, type FC, type KeyboardEventHandler, type MouseEvent, type PropsWithChildren } from 'react';
-type BaseProps = PropsWithChildren<{
+import { type FC, type KeyboardEventHandler, type MouseEvent } from 'react';
+import type { SHRComponentPropsWithoutRef } from '../../../types';
+type Props = SHRComponentPropsWithoutRef<'div', {
     /** アイコンの左右位置 */
     iconPosition?: 'left' | 'right';
     /** 複数のパネルを同時に開くことを許容するかどうか */
@@ -10,8 +11,9 @@ type BaseProps = PropsWithChildren<{
     onClick?: (expandedItems: string[]) => void;
     /** 角丸を適用する範囲 */
     rounded?: boolean | 'all' | 'top' | 'right' | 'bottom' | 'left';
+}, {
+    omit: 'role';
 }>;
-type Props = BaseProps & Omit<ComponentProps<'div'>, keyof BaseProps>;
 export declare const AccordionPanelContext: import("react").Context<{
     iconPosition: "left" | "right";
     expandedItems: Map<string, string>;

package/lib/components/AccordionPanel/client/AccordionPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionPanel.js","sources":["../../../../src/components/AccordionPanel/client/AccordionPanel.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentProps,\n  type FC,\n  type KeyboardEventHandler,\n  type MouseEvent,\n  type PropsWithChildren,\n  createContext,\n  useMemo,\n  useState,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useLatest } from '../../../hooks/useLatest'\nimport { flatArrayToMap, mapToKeyArray } from '../../../libs/map'\n\ntype BaseProps = PropsWithChildren<{\n  /** アイコンの左右位置 */\n  iconPosition?: 'left' | 'right'\n  /** 複数のパネルを同時に開くことを許容するかどうか */\n  expandableMultiply?: boolean\n  /** デフォルトで開いた状態にするアイテムの `name` の配列 */\n  defaultExpanded?: string[]\n  /** トリガのクリックイベントを処理するハンドラ */\n  onClick?: (expandedItems: string[]) => void\n  /** 角丸を適用する範囲 */\n  rounded?: boolean | 'all' | 'top' | 'right' | 'bottom' | 'left'\n}>\ntype Props = BaseProps & Omit<ComponentProps<'div'>, keyof BaseProps>\n\nconst DEFAULT_EXPANDED_ARRAY: string[] = []\nconst DEFAULT_EXPANDED_MAP = flatArrayToMap(DEFAULT_EXPANDED_ARRAY)\n\nexport const AccordionPanelContext = createContext<{\n  iconPosition: 'left' | 'right'\n  expandedItems: Map<string, string>\n  handleClickTrigger: (e: MouseEvent<HTMLButtonElement>) => void\n  handleKeyDown: KeyboardEventHandler<HTMLButtonElement>\n}>({\n  iconPosition: 'left',\n  expandedItems: DEFAULT_EXPANDED_MAP,\n  handleClickTrigger: () => {},\n  handleKeyDown: () => {},\n})\n\nconst ROUNDED = {\n  t_l: '[&>.smarthr-ui-AccordionPanel-item:first-child_.smarthr-ui-AccordionPanel-trigger]:shr-rounded-tl-l',\n  t_r: '[&>.smarthr-ui-AccordionPanel-item:first-child_.smarthr-ui-AccordionPanel-trigger]:shr-rounded-tr-l',\n  b_l: '[&>.smarthr-ui-AccordionPanel-item:last-child_.smarthr-ui-AccordionPanel-trigger:not([aria-expanded=\"true\"])]:shr-rounded-bl-l',\n  b_r: '[&>.smarthr-ui-AccordionPanel-item:last-child_.smarthr-ui-AccordionPanel-trigger:not([aria-expanded=\"true\"])]:shr-rounded-br-l',\n}\n\nconst ROUNDED_ALL = [ROUNDED.t_l, ROUNDED.t_r, ROUNDED.b_l, ROUNDED.b_r]\n\nconst classNameGenerator = tv({\n  base: 'smarthr-ui-AccordionPanel',\n  variants: {\n    rounded: {\n      true: ROUNDED_ALL,\n      false: '',\n      all: ROUNDED_ALL,\n      top: [ROUNDED.t_l, ROUNDED.t_r],\n      right: [ROUNDED.t_r, ROUNDED.b_r],\n      bottom: [ROUNDED.b_l, ROUNDED.b_r],\n      left: [ROUNDED.t_l, ROUNDED.b_l],\n    } satisfies Record<\n      Exclude<NonNullable<BaseProps['rounded']>, boolean> | 'true' | 'false',\n      string | string[]\n    >,\n  },\n  defaultVariants: {\n    rounded: false,\n  },\n})\n\nexport const AccordionPanel: FC<Props> = ({\n  iconPosition = 'left',\n  expandableMultiply = true,\n  defaultExpanded = DEFAULT_EXPANDED_ARRAY,\n  className,\n  onClick,\n  rounded,\n  children,\n  ...rest\n}) => {\n  const [expandedItems, setExpanded] = useState(() => flatArrayToMap(defaultExpanded))\n  const actualClassName = useMemo(\n    () => classNameGenerator({ className, rounded }),\n    [rounded, className],\n  )\n\n  const latest = useLatest({ onClick, expandableMultiply })\n\n  const functions = useMemo(() => {\n    let wrapper: HTMLElement | null = null\n\n    return {\n      callbackRef: (node: HTMLElement | null) => {\n        wrapper = node\n      },\n      handleClickTrigger: (e: MouseEvent<HTMLButtonElement>) => {\n        const { currentTarget } = e\n\n        setExpanded((prevExpandedItems) => {\n          let newExpandedItems: Map<string, string>\n          const itemName = currentTarget.value\n          const isExpanded = currentTarget.getAttribute('aria-expanded') !== 'true'\n\n          if (latest.expandableMultiply) {\n            newExpandedItems = new Map(prevExpandedItems)\n\n            if (isExpanded) {\n              newExpandedItems.set(itemName, itemName)\n            } else {\n              newExpandedItems.delete(itemName)\n            }\n          } else {\n            newExpandedItems = isExpanded ? new Map([[itemName, itemName]]) : new Map()\n          }\n\n          latest.onClick?.(mapToKeyArray(newExpandedItems))\n\n          return newExpandedItems\n        })\n      },\n      handleKeyDown: (e: Parameters<KeyboardEventHandler<HTMLButtonElement>>[0]): void => {\n        if (!wrapper) {\n          return\n        }\n\n        const item = e.target as HTMLElement\n\n        switch (e.key) {\n          case 'Home': {\n            e.preventDefault()\n            focusSibling({\n              mode: 'first',\n              wrapper,\n            })\n            break\n          }\n          case 'End': {\n            e.preventDefault()\n            focusSibling({\n              mode: 'last',\n              wrapper,\n            })\n            break\n          }\n          case 'ArrowLeft':\n          case 'ArrowUp': {\n            e.preventDefault()\n            focusSibling({\n              mode: 'prev',\n              wrapper,\n              current: item,\n            })\n            break\n          }\n          case 'ArrowRight':\n          case 'ArrowDown': {\n            e.preventDefault()\n            focusSibling({\n              mode: 'next',\n              wrapper,\n              current: item,\n            })\n            break\n          }\n        }\n      },\n    }\n  }, [latest])\n\n  return (\n    <AccordionPanelContext.Provider\n      value={{\n        handleClickTrigger: functions.handleClickTrigger,\n        handleKeyDown: functions.handleKeyDown,\n        expandedItems,\n        iconPosition,\n      }}\n    >\n      <div {...rest} ref={functions.callbackRef} role=\"presentation\" className={actualClassName}>\n        {children}\n      </div>\n    </AccordionPanelContext.Provider>\n  )\n}\n\nconst focusSibling = (\n  props:\n    | {\n        mode: 'first' | 'last'\n        wrapper: HTMLElement\n        current?: undefined\n      }\n    | {\n        mode: 'next' | 'prev'\n        wrapper: HTMLElement\n        current: HTMLElement\n      },\n) => {\n  const siblings = props.wrapper.querySelectorAll<HTMLElement>(\n    '[data-component=\"AccordionHeaderButton\"]',\n  )\n  let target: HTMLElement | undefined = undefined\n\n  switch (props.mode) {\n    case 'first':\n      target = siblings[0]\n      break\n    case 'last':\n      target = siblings[siblings.length - 1]\n      break\n    case 'next': {\n      const index = Array.prototype.indexOf.call(siblings, props.current)\n\n      if (index === siblings.length - 1) {\n        target = siblings[0]\n      } else if (index !== -1) {\n        target = siblings[index + 1]\n      }\n\n      break\n    }\n    case 'prev': {\n      const index = Array.prototype.indexOf.call(siblings, props.current)\n\n      if (index === 0) {\n        target = siblings[siblings.length - 1]\n      } else if (index !== -1) {\n        target = siblings[index - 1]\n      }\n\n      break\n    }\n  }\n\n  target?.focus()\n}\n"],"names":[],"mappings":";;;;;;;AA+BA;AACA;AAEO;AAML;AACA;AACA;AACA;AACD;AAED;AACE;AACA;AACA;AACA;;AAGF;AAEA;AACE;AACA;AACE;AACE;AACA;AACA;;;;;AAQD;AACF;AACD;AACE;AACD;AACF;AAEM;AAUL;;;AAQA;;;AAII;;;AAGA;AACE;AAEA;AACE;AACA;;AAGA;AACE;;AAGE;;;AAEA;;;;;;;AAQJ;AACF;;AAEF;;;;AAKE;AAEA;;;AAGI;AACE;;AAED;;;;;AAKD;AACE;;AAED;;;AAGH;;;AAGE;AACE;;AAEA;AACD;;;AAGH;;;AAGE;AACE;;AAEA;AACD;;;;;;AAMX;AAEA;;;;;;AAcF;AAEA;;;AAkBE;AACE;AACE;;AAEF;;;;AAIE;;AAGE;;AACK;AACL;;;;;AAMF;AAEA;;;AAEO;AACL;;;;;;AAQR;;"}
+{"version":3,"file":"AccordionPanel.js","sources":["../../../../src/components/AccordionPanel/client/AccordionPanel.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type FC,\n  type KeyboardEventHandler,\n  type MouseEvent,\n  createContext,\n  useMemo,\n  useState,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useLatest } from '../../../hooks/useLatest'\nimport { flatArrayToMap, mapToKeyArray } from '../../../libs/map'\n\nimport type { SHRComponentPropsWithoutRef } from '../../../types'\n\ntype Props = SHRComponentPropsWithoutRef<\n  'div',\n  {\n    /** アイコンの左右位置 */\n    iconPosition?: 'left' | 'right'\n    /** 複数のパネルを同時に開くことを許容するかどうか */\n    expandableMultiply?: boolean\n    /** デフォルトで開いた状態にするアイテムの `name` の配列 */\n    defaultExpanded?: string[]\n    /** トリガのクリックイベントを処理するハンドラ */\n    onClick?: (expandedItems: string[]) => void\n    /** 角丸を適用する範囲 */\n    rounded?: boolean | 'all' | 'top' | 'right' | 'bottom' | 'left'\n  },\n  { omit: 'role' }\n>\n\nconst DEFAULT_EXPANDED_ARRAY: string[] = []\nconst DEFAULT_EXPANDED_MAP = flatArrayToMap(DEFAULT_EXPANDED_ARRAY)\n\nexport const AccordionPanelContext = createContext<{\n  iconPosition: 'left' | 'right'\n  expandedItems: Map<string, string>\n  handleClickTrigger: (e: MouseEvent<HTMLButtonElement>) => void\n  handleKeyDown: KeyboardEventHandler<HTMLButtonElement>\n}>({\n  iconPosition: 'left',\n  expandedItems: DEFAULT_EXPANDED_MAP,\n  handleClickTrigger: () => {},\n  handleKeyDown: () => {},\n})\n\nconst ROUNDED = {\n  t_l: '[&>.smarthr-ui-AccordionPanel-item:first-child_.smarthr-ui-AccordionPanel-trigger]:shr-rounded-tl-l',\n  t_r: '[&>.smarthr-ui-AccordionPanel-item:first-child_.smarthr-ui-AccordionPanel-trigger]:shr-rounded-tr-l',\n  b_l: '[&>.smarthr-ui-AccordionPanel-item:last-child_.smarthr-ui-AccordionPanel-trigger:not([aria-expanded=\"true\"])]:shr-rounded-bl-l',\n  b_r: '[&>.smarthr-ui-AccordionPanel-item:last-child_.smarthr-ui-AccordionPanel-trigger:not([aria-expanded=\"true\"])]:shr-rounded-br-l',\n}\n\nconst ROUNDED_ALL = [ROUNDED.t_l, ROUNDED.t_r, ROUNDED.b_l, ROUNDED.b_r]\n\nconst classNameGenerator = tv({\n  base: 'smarthr-ui-AccordionPanel',\n  variants: {\n    rounded: {\n      true: ROUNDED_ALL,\n      false: '',\n      all: ROUNDED_ALL,\n      top: [ROUNDED.t_l, ROUNDED.t_r],\n      right: [ROUNDED.t_r, ROUNDED.b_r],\n      bottom: [ROUNDED.b_l, ROUNDED.b_r],\n      left: [ROUNDED.t_l, ROUNDED.b_l],\n    } satisfies Record<\n      Exclude<NonNullable<Props['rounded']>, boolean> | 'true' | 'false',\n      string | string[]\n    >,\n  },\n  defaultVariants: {\n    rounded: false,\n  },\n})\n\nexport const AccordionPanel: FC<Props> = ({\n  iconPosition = 'left',\n  expandableMultiply = true,\n  defaultExpanded = DEFAULT_EXPANDED_ARRAY,\n  className,\n  onClick,\n  rounded,\n  children,\n  ...rest\n}) => {\n  const [expandedItems, setExpanded] = useState(() => flatArrayToMap(defaultExpanded))\n  const actualClassName = useMemo(\n    () => classNameGenerator({ className, rounded }),\n    [rounded, className],\n  )\n\n  const latest = useLatest({ onClick, expandableMultiply })\n\n  const functions = useMemo(() => {\n    let wrapper: HTMLElement | null = null\n\n    return {\n      callbackRef: (node: HTMLElement | null) => {\n        wrapper = node\n      },\n      handleClickTrigger: (e: MouseEvent<HTMLButtonElement>) => {\n        const { currentTarget } = e\n\n        setExpanded((prevExpandedItems) => {\n          let newExpandedItems: Map<string, string>\n          const itemName = currentTarget.value\n          const isExpanded = currentTarget.getAttribute('aria-expanded') !== 'true'\n\n          if (latest.expandableMultiply) {\n            newExpandedItems = new Map(prevExpandedItems)\n\n            if (isExpanded) {\n              newExpandedItems.set(itemName, itemName)\n            } else {\n              newExpandedItems.delete(itemName)\n            }\n          } else {\n            newExpandedItems = isExpanded ? new Map([[itemName, itemName]]) : new Map()\n          }\n\n          latest.onClick?.(mapToKeyArray(newExpandedItems))\n\n          return newExpandedItems\n        })\n      },\n      handleKeyDown: (e: Parameters<KeyboardEventHandler<HTMLButtonElement>>[0]): void => {\n        if (!wrapper) {\n          return\n        }\n\n        const item = e.target as HTMLElement\n\n        switch (e.key) {\n          case 'Home': {\n            e.preventDefault()\n            focusSibling({\n              mode: 'first',\n              wrapper,\n            })\n            break\n          }\n          case 'End': {\n            e.preventDefault()\n            focusSibling({\n              mode: 'last',\n              wrapper,\n            })\n            break\n          }\n          case 'ArrowLeft':\n          case 'ArrowUp': {\n            e.preventDefault()\n            focusSibling({\n              mode: 'prev',\n              wrapper,\n              current: item,\n            })\n            break\n          }\n          case 'ArrowRight':\n          case 'ArrowDown': {\n            e.preventDefault()\n            focusSibling({\n              mode: 'next',\n              wrapper,\n              current: item,\n            })\n            break\n          }\n        }\n      },\n    }\n  }, [latest])\n\n  return (\n    <AccordionPanelContext.Provider\n      value={{\n        handleClickTrigger: functions.handleClickTrigger,\n        handleKeyDown: functions.handleKeyDown,\n        expandedItems,\n        iconPosition,\n      }}\n    >\n      <div {...rest} ref={functions.callbackRef} role=\"presentation\" className={actualClassName}>\n        {children}\n      </div>\n    </AccordionPanelContext.Provider>\n  )\n}\n\nconst focusSibling = (\n  props:\n    | {\n        mode: 'first' | 'last'\n        wrapper: HTMLElement\n        current?: undefined\n      }\n    | {\n        mode: 'next' | 'prev'\n        wrapper: HTMLElement\n        current: HTMLElement\n      },\n) => {\n  const siblings = props.wrapper.querySelectorAll<HTMLElement>(\n    '[data-component=\"AccordionHeaderButton\"]',\n  )\n  let target: HTMLElement | undefined = undefined\n\n  switch (props.mode) {\n    case 'first':\n      target = siblings[0]\n      break\n    case 'last':\n      target = siblings[siblings.length - 1]\n      break\n    case 'next': {\n      const index = Array.prototype.indexOf.call(siblings, props.current)\n\n      if (index === siblings.length - 1) {\n        target = siblings[0]\n      } else if (index !== -1) {\n        target = siblings[index + 1]\n      }\n\n      break\n    }\n    case 'prev': {\n      const index = Array.prototype.indexOf.call(siblings, props.current)\n\n      if (index === 0) {\n        target = siblings[siblings.length - 1]\n      } else if (index !== -1) {\n        target = siblings[index - 1]\n      }\n\n      break\n    }\n  }\n\n  target?.focus()\n}\n"],"names":[],"mappings":";;;;;;;AAkCA;AACA;AAEO;AAML;AACA;AACA;AACA;AACD;AAED;AACE;AACA;AACA;AACA;;AAGF;AAEA;AACE;AACA;AACE;AACE;AACA;AACA;;;;;AAQD;AACF;AACD;AACE;AACD;AACF;AAEM;AAUL;;;AAQA;;;AAII;;;AAGA;AACE;AAEA;AACE;AACA;;AAGA;AACE;;AAGE;;;AAEA;;;;;;;AAQJ;AACF;;AAEF;;;;AAKE;AAEA;;;AAGI;AACE;;AAED;;;;;AAKD;AACE;;AAED;;;AAGH;;;AAGE;AACE;;AAEA;AACD;;;AAGH;;;AAGE;AACE;;AAEA;AACD;;;;;;AAMX;AAEA;;;;;;AAcF;AAEA;;;AAkBE;AACE;AACE;;AAEF;;;;AAIE;;AAGE;;AACK;AACL;;;;;AAMF;AAEA;;;AAEO;AACL;;;;;;AAQR;;"}

package/lib/components/AccordionPanel/client/AccordionPanelContent.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionPanelContent.cjs","sources":["../../../../src/components/AccordionPanel/client/AccordionPanelContent.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentPropsWithoutRef,\n  type FC,\n  type PropsWithChildren,\n  useContext,\n  useMemo,\n  useRef,\n} from 'react'\nimport { Transition } from 'react-transition-group'\nimport { tv } from 'tailwind-variants'\n\nimport { getIsInclude } from '../../../libs/map'\n\nimport { AccordionPanelContext } from './AccordionPanel'\nimport { AccordionPanelItemContext } from './AccordionPanelItem'\n\ntype BaseProps = PropsWithChildren\ntype Props = BaseProps & Omit<ComponentPropsWithoutRef<'div'>, keyof BaseProps>\n\nconst classNameGenerator = tv({\n  base: [\n    'smarthr-ui-AccordionPanel-content',\n    'shr-invisible shr-max-h-0 shr-opacity-0 shr-transition-[max-height,_visible,_opacity] shr-duration-150 shr-ease-in-out',\n    '[&.entered]:shr-visible [&.entered]:shr-max-h-[revert] [&.entered]:shr-opacity-100',\n    // HINT: flexなどで囲まれると、非表示だが内容分高さが出てしまい、スクロール領域が不自然に伸びてしまう現象が起きる場合がある\n    // 非表示の場合、visually hiddenを適用することで、内容としては残しつつ、高さを0にすることで回避する\n    'aria-[hidden]:shr-absolute aria-[hidden]:shr-h-px aria-[hidden]:shr-overflow-hidden',\n  ],\n})\n\nexport const AccordionPanelContent: FC<Props> = ({ className, children, ...rest }) => {\n  const { name, contentId, triggerId } = useContext(AccordionPanelItemContext)\n  const { expandedItems } = useContext(AccordionPanelContext)\n  const visible = useMemo(() => getIsInclude(expandedItems, name), [expandedItems, name])\n  const wrapperRef = useRef<HTMLDivElement>(null)\n  const actualClassName = useMemo(() => classNameGenerator({ className }), [className])\n\n  return (\n    <Transition nodeRef={wrapperRef} in={visible} timeout={150}>\n      {(status) => (\n        <div\n          {...rest}\n          ref={wrapperRef}\n          id={contentId}\n          className={`${actualClassName} ${status}`}\n          aria-labelledby={triggerId}\n          aria-hidden={visible ? undefined : true}\n        >\n          {children}\n        </div>\n      )}\n    </Transition>\n  )\n}\n"],"names":[],"mappings":";;;;;;;;;;;AAqBA;AACE;;;;;;;AAOC;AACF;AAEM;AACL;;;AAGA;AACA;;AAkBF;;"}
+{"version":3,"file":"AccordionPanelContent.cjs","sources":["../../../../src/components/AccordionPanel/client/AccordionPanelContent.tsx"],"sourcesContent":["'use client'\n\nimport { type ComponentPropsWithoutRef, type FC, useContext, useMemo, useRef } from 'react'\nimport { Transition } from 'react-transition-group'\nimport { tv } from 'tailwind-variants'\n\nimport { getIsInclude } from '../../../libs/map'\n\nimport { AccordionPanelContext } from './AccordionPanel'\nimport { AccordionPanelItemContext } from './AccordionPanelItem'\n\ntype Props = Omit<ComponentPropsWithoutRef<'div'>, 'id' | 'aria-labelledby' | 'aria-hidden'>\n\nconst classNameGenerator = tv({\n  base: [\n    'smarthr-ui-AccordionPanel-content',\n    'shr-invisible shr-max-h-0 shr-opacity-0 shr-transition-[max-height,_visible,_opacity] shr-duration-150 shr-ease-in-out',\n    '[&.entered]:shr-visible [&.entered]:shr-max-h-[revert] [&.entered]:shr-opacity-100',\n    // HINT: flexなどで囲まれると、非表示だが内容分高さが出てしまい、スクロール領域が不自然に伸びてしまう現象が起きる場合がある\n    // 非表示の場合、visually hiddenを適用することで、内容としては残しつつ、高さを0にすることで回避する\n    'aria-[hidden]:shr-absolute aria-[hidden]:shr-h-px aria-[hidden]:shr-overflow-hidden',\n  ],\n})\n\nexport const AccordionPanelContent: FC<Props> = ({ className, children, ...rest }) => {\n  const { name, contentId, triggerId } = useContext(AccordionPanelItemContext)\n  const { expandedItems } = useContext(AccordionPanelContext)\n  const visible = useMemo(() => getIsInclude(expandedItems, name), [expandedItems, name])\n  const wrapperRef = useRef<HTMLDivElement>(null)\n  const actualClassName = useMemo(() => classNameGenerator({ className }), [className])\n\n  return (\n    <Transition nodeRef={wrapperRef} in={visible} timeout={150}>\n      {(status) => (\n        <div\n          {...rest}\n          ref={wrapperRef}\n          id={contentId}\n          className={`${actualClassName} ${status}`}\n          aria-labelledby={triggerId}\n          aria-hidden={visible ? undefined : true}\n        >\n          {children}\n        </div>\n      )}\n    </Transition>\n  )\n}\n"],"names":[],"mappings":";;;;;;;;;;;AAaA;AACE;;;;;;;AAOC;AACF;AAEM;AACL;;;AAGA;AACA;;AAkBF;;"}

package/lib/components/AccordionPanel/client/AccordionPanelContent.d.ts

@@ -1,5 +1,4 @@
-import { type ComponentPropsWithoutRef, type FC, type PropsWithChildren } from 'react';
-type BaseProps = PropsWithChildren;
-type Props = BaseProps & Omit<ComponentPropsWithoutRef<'div'>, keyof BaseProps>;
+import { type ComponentPropsWithoutRef, type FC } from 'react';
+type Props = Omit<ComponentPropsWithoutRef<'div'>, 'id' | 'aria-labelledby' | 'aria-hidden'>;
 export declare const AccordionPanelContent: FC<Props>;
 export {};

package/lib/components/AccordionPanel/client/AccordionPanelContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionPanelContent.js","sources":["../../../../src/components/AccordionPanel/client/AccordionPanelContent.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentPropsWithoutRef,\n  type FC,\n  type PropsWithChildren,\n  useContext,\n  useMemo,\n  useRef,\n} from 'react'\nimport { Transition } from 'react-transition-group'\nimport { tv } from 'tailwind-variants'\n\nimport { getIsInclude } from '../../../libs/map'\n\nimport { AccordionPanelContext } from './AccordionPanel'\nimport { AccordionPanelItemContext } from './AccordionPanelItem'\n\ntype BaseProps = PropsWithChildren\ntype Props = BaseProps & Omit<ComponentPropsWithoutRef<'div'>, keyof BaseProps>\n\nconst classNameGenerator = tv({\n  base: [\n    'smarthr-ui-AccordionPanel-content',\n    'shr-invisible shr-max-h-0 shr-opacity-0 shr-transition-[max-height,_visible,_opacity] shr-duration-150 shr-ease-in-out',\n    '[&.entered]:shr-visible [&.entered]:shr-max-h-[revert] [&.entered]:shr-opacity-100',\n    // HINT: flexなどで囲まれると、非表示だが内容分高さが出てしまい、スクロール領域が不自然に伸びてしまう現象が起きる場合がある\n    // 非表示の場合、visually hiddenを適用することで、内容としては残しつつ、高さを0にすることで回避する\n    'aria-[hidden]:shr-absolute aria-[hidden]:shr-h-px aria-[hidden]:shr-overflow-hidden',\n  ],\n})\n\nexport const AccordionPanelContent: FC<Props> = ({ className, children, ...rest }) => {\n  const { name, contentId, triggerId } = useContext(AccordionPanelItemContext)\n  const { expandedItems } = useContext(AccordionPanelContext)\n  const visible = useMemo(() => getIsInclude(expandedItems, name), [expandedItems, name])\n  const wrapperRef = useRef<HTMLDivElement>(null)\n  const actualClassName = useMemo(() => classNameGenerator({ className }), [className])\n\n  return (\n    <Transition nodeRef={wrapperRef} in={visible} timeout={150}>\n      {(status) => (\n        <div\n          {...rest}\n          ref={wrapperRef}\n          id={contentId}\n          className={`${actualClassName} ${status}`}\n          aria-labelledby={triggerId}\n          aria-hidden={visible ? undefined : true}\n        >\n          {children}\n        </div>\n      )}\n    </Transition>\n  )\n}\n"],"names":[],"mappings":";;;;;;;;;AAqBA;AACE;;;;;;;AAOC;AACF;AAEM;AACL;;;AAGA;AACA;;AAkBF;;"}
+{"version":3,"file":"AccordionPanelContent.js","sources":["../../../../src/components/AccordionPanel/client/AccordionPanelContent.tsx"],"sourcesContent":["'use client'\n\nimport { type ComponentPropsWithoutRef, type FC, useContext, useMemo, useRef } from 'react'\nimport { Transition } from 'react-transition-group'\nimport { tv } from 'tailwind-variants'\n\nimport { getIsInclude } from '../../../libs/map'\n\nimport { AccordionPanelContext } from './AccordionPanel'\nimport { AccordionPanelItemContext } from './AccordionPanelItem'\n\ntype Props = Omit<ComponentPropsWithoutRef<'div'>, 'id' | 'aria-labelledby' | 'aria-hidden'>\n\nconst classNameGenerator = tv({\n  base: [\n    'smarthr-ui-AccordionPanel-content',\n    'shr-invisible shr-max-h-0 shr-opacity-0 shr-transition-[max-height,_visible,_opacity] shr-duration-150 shr-ease-in-out',\n    '[&.entered]:shr-visible [&.entered]:shr-max-h-[revert] [&.entered]:shr-opacity-100',\n    // HINT: flexなどで囲まれると、非表示だが内容分高さが出てしまい、スクロール領域が不自然に伸びてしまう現象が起きる場合がある\n    // 非表示の場合、visually hiddenを適用することで、内容としては残しつつ、高さを0にすることで回避する\n    'aria-[hidden]:shr-absolute aria-[hidden]:shr-h-px aria-[hidden]:shr-overflow-hidden',\n  ],\n})\n\nexport const AccordionPanelContent: FC<Props> = ({ className, children, ...rest }) => {\n  const { name, contentId, triggerId } = useContext(AccordionPanelItemContext)\n  const { expandedItems } = useContext(AccordionPanelContext)\n  const visible = useMemo(() => getIsInclude(expandedItems, name), [expandedItems, name])\n  const wrapperRef = useRef<HTMLDivElement>(null)\n  const actualClassName = useMemo(() => classNameGenerator({ className }), [className])\n\n  return (\n    <Transition nodeRef={wrapperRef} in={visible} timeout={150}>\n      {(status) => (\n        <div\n          {...rest}\n          ref={wrapperRef}\n          id={contentId}\n          className={`${actualClassName} ${status}`}\n          aria-labelledby={triggerId}\n          aria-hidden={visible ? undefined : true}\n        >\n          {children}\n        </div>\n      )}\n    </Transition>\n  )\n}\n"],"names":[],"mappings":";;;;;;;;;AAaA;AACE;;;;;;;AAOC;AACF;AAEM;AACL;;;AAGA;AACA;;AAkBF;;"}

package/lib/components/AccordionPanel/client/AccordionPanelItem.cjs

@@ -5,7 +5,7 @@ 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.16.2_@swc_helpers_eb41b3e12c2b05515b240ca2bf300a3e/vendor/tailwind-variants/dist/index.cjs');
 var components_SectioningContent_SectioningContent = require('../../SectioningContent/SectioningContent.cjs');
-require('../../SectioningContent/client/components/LevelContext.cjs');
+require('../../SectioningContent/client/LevelContext.cjs');
 
 const AccordionPanelItemContext = React.createContext({
     name: '',

package/lib/components/AccordionPanel/client/AccordionPanelItem.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionPanelItem.cjs","sources":["../../../../src/components/AccordionPanel/client/AccordionPanelItem.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentPropsWithoutRef,\n  type FC,\n  type PropsWithChildren,\n  createContext,\n  useMemo,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { Section } from '../../SectioningContent'\n\ntype BaseProps = PropsWithChildren<{\n  /** アイテムを識別するための名前 */\n  name: string\n}>\ntype Props = BaseProps & Omit<ComponentPropsWithoutRef<'section'>, keyof BaseProps>\n\nexport const AccordionPanelItemContext = createContext<{\n  name: string\n  triggerId: string\n  contentId: string\n}>({\n  name: '',\n  triggerId: '',\n  contentId: '',\n})\n\nconst classNameGenerator = tv({\n  base: ['smarthr-ui-AccordionPanel-item', '[&_+_&]:shr-border-t-shorthand'],\n})\n\nexport const AccordionPanelItem: FC<Props> = ({ name, className, children, ...rest }) => {\n  const actualClassName = useMemo(() => classNameGenerator({ className }), [className])\n\n  return (\n    <AccordionPanelItemContext.Provider\n      value={{\n        name,\n        triggerId: `${name}-trigger`,\n        contentId: `${name}-content`,\n      }}\n    >\n      {/* eslint-disable-next-line smarthr/a11y-heading-in-sectioning-content -- 組み合わせて利用するAccordionPanelTriggerが内部でHeadingを持つ */}\n      <Section {...rest} className={actualClassName}>\n        {children}\n      </Section>\n    </AccordionPanelItemContext.Provider>\n  )\n}\n"],"names":[],"mappings":";;;;;;;;;AAmBO;AAKL;AACA;AACA;AACD;AAED;AACE;AACD;AAEM;AACL;AAEA;;;;AAMK;AAQP;;;"}
+{"version":3,"file":"AccordionPanelItem.cjs","sources":["../../../../src/components/AccordionPanel/client/AccordionPanelItem.tsx"],"sourcesContent":["'use client'\n\nimport { type FC, createContext, useMemo } from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { Section } from '../../SectioningContent'\n\nimport type { SHRComponentPropsWithoutRef } from '../../../types'\n\ntype Props = SHRComponentPropsWithoutRef<\n  'section',\n  {\n    /** アイテムを識別するための名前 */\n    name: string\n  }\n>\n\nexport const AccordionPanelItemContext = createContext<{\n  name: string\n  triggerId: string\n  contentId: string\n}>({\n  name: '',\n  triggerId: '',\n  contentId: '',\n})\n\nconst classNameGenerator = tv({\n  base: ['smarthr-ui-AccordionPanel-item', '[&_+_&]:shr-border-t-shorthand'],\n})\n\nexport const AccordionPanelItem: FC<Props> = ({ name, className, children, ...rest }) => {\n  const actualClassName = useMemo(() => classNameGenerator({ className }), [className])\n\n  return (\n    <AccordionPanelItemContext.Provider\n      value={{\n        name,\n        triggerId: `${name}-trigger`,\n        contentId: `${name}-content`,\n      }}\n    >\n      {/* eslint-disable-next-line smarthr/a11y-heading-in-sectioning-content -- 組み合わせて利用するAccordionPanelTriggerが内部でHeadingを持つ */}\n      <Section {...rest} className={actualClassName}>\n        {children}\n      </Section>\n    </AccordionPanelItemContext.Provider>\n  )\n}\n"],"names":[],"mappings":";;;;;;;;;AAiBO;AAKL;AACA;AACA;AACD;AAED;AACE;AACD;AAEM;AACL;AAEA;;;;AAMK;AAQP;;;"}

package/lib/components/AccordionPanel/client/AccordionPanelItem.d.ts

@@ -1,9 +1,9 @@
-import { type ComponentPropsWithoutRef, type FC, type PropsWithChildren } from 'react';
-type BaseProps = PropsWithChildren<{
+import { type FC } from 'react';
+import type { SHRComponentPropsWithoutRef } from '../../../types';
+type Props = SHRComponentPropsWithoutRef<'section', {
     /** アイテムを識別するための名前 */
     name: string;
 }>;
-type Props = BaseProps & Omit<ComponentPropsWithoutRef<'section'>, keyof BaseProps>;
 export declare const AccordionPanelItemContext: import("react").Context<{
     name: string;
     triggerId: string;

package/lib/components/AccordionPanel/client/AccordionPanelItem.js

@@ -3,7 +3,7 @@ import { jsx } from 'react/jsx-runtime';
 import { createContext, useMemo } 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.16.2_@swc_helpers_eb41b3e12c2b05515b240ca2bf300a3e/vendor/tailwind-variants/dist/index.js';
 import { Section } from '../../SectioningContent/SectioningContent.js';
-import '../../SectioningContent/client/components/LevelContext.js';
+import '../../SectioningContent/client/LevelContext.js';
 
 const AccordionPanelItemContext = createContext({
     name: '',

package/lib/components/AccordionPanel/client/AccordionPanelItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionPanelItem.js","sources":["../../../../src/components/AccordionPanel/client/AccordionPanelItem.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentPropsWithoutRef,\n  type FC,\n  type PropsWithChildren,\n  createContext,\n  useMemo,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { Section } from '../../SectioningContent'\n\ntype BaseProps = PropsWithChildren<{\n  /** アイテムを識別するための名前 */\n  name: string\n}>\ntype Props = BaseProps & Omit<ComponentPropsWithoutRef<'section'>, keyof BaseProps>\n\nexport const AccordionPanelItemContext = createContext<{\n  name: string\n  triggerId: string\n  contentId: string\n}>({\n  name: '',\n  triggerId: '',\n  contentId: '',\n})\n\nconst classNameGenerator = tv({\n  base: ['smarthr-ui-AccordionPanel-item', '[&_+_&]:shr-border-t-shorthand'],\n})\n\nexport const AccordionPanelItem: FC<Props> = ({ name, className, children, ...rest }) => {\n  const actualClassName = useMemo(() => classNameGenerator({ className }), [className])\n\n  return (\n    <AccordionPanelItemContext.Provider\n      value={{\n        name,\n        triggerId: `${name}-trigger`,\n        contentId: `${name}-content`,\n      }}\n    >\n      {/* eslint-disable-next-line smarthr/a11y-heading-in-sectioning-content -- 組み合わせて利用するAccordionPanelTriggerが内部でHeadingを持つ */}\n      <Section {...rest} className={actualClassName}>\n        {children}\n      </Section>\n    </AccordionPanelItemContext.Provider>\n  )\n}\n"],"names":[],"mappings":";;;;;;;AAmBO;AAKL;AACA;AACA;AACD;AAED;AACE;AACD;AAEM;AACL;AAEA;;;;AAMK;AAQP;;"}
+{"version":3,"file":"AccordionPanelItem.js","sources":["../../../../src/components/AccordionPanel/client/AccordionPanelItem.tsx"],"sourcesContent":["'use client'\n\nimport { type FC, createContext, useMemo } from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { Section } from '../../SectioningContent'\n\nimport type { SHRComponentPropsWithoutRef } from '../../../types'\n\ntype Props = SHRComponentPropsWithoutRef<\n  'section',\n  {\n    /** アイテムを識別するための名前 */\n    name: string\n  }\n>\n\nexport const AccordionPanelItemContext = createContext<{\n  name: string\n  triggerId: string\n  contentId: string\n}>({\n  name: '',\n  triggerId: '',\n  contentId: '',\n})\n\nconst classNameGenerator = tv({\n  base: ['smarthr-ui-AccordionPanel-item', '[&_+_&]:shr-border-t-shorthand'],\n})\n\nexport const AccordionPanelItem: FC<Props> = ({ name, className, children, ...rest }) => {\n  const actualClassName = useMemo(() => classNameGenerator({ className }), [className])\n\n  return (\n    <AccordionPanelItemContext.Provider\n      value={{\n        name,\n        triggerId: `${name}-trigger`,\n        contentId: `${name}-content`,\n      }}\n    >\n      {/* eslint-disable-next-line smarthr/a11y-heading-in-sectioning-content -- 組み合わせて利用するAccordionPanelTriggerが内部でHeadingを持つ */}\n      <Section {...rest} className={actualClassName}>\n        {children}\n      </Section>\n    </AccordionPanelItemContext.Provider>\n  )\n}\n"],"names":[],"mappings":";;;;;;;AAiBO;AAKL;AACA;AACA;AACD;AAED;AACE;AACD;AAEM;AACL;AAEA;;;;AAMK;AAQP;;"}

package/lib/components/AccordionPanel/client/AccordionPanelTrigger.cjs

@@ -16,7 +16,7 @@ var components_Layout_Cluster_Cluster = require('../../Layout/Cluster/Cluster.cj
 require('../../Layout/Reel/Reel.cjs');
 require('../../Layout/Sidebar/Sidebar.cjs');
 require('../../Layout/Center/Center.cjs');
-require('../../Layout/Container/Container.cjs');
+require('../../Layout/client/Container/Container.cjs');
 var components_AccordionPanel_client_AccordionPanel = require('./AccordionPanel.cjs');
 var components_AccordionPanel_client_AccordionPanelItem = require('./AccordionPanelItem.cjs');
 

package/lib/components/AccordionPanel/client/AccordionPanelTrigger.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionPanelTrigger.cjs","sources":["../../../../src/components/AccordionPanel/client/AccordionPanelTrigger.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentPropsWithoutRef,\n  type FC,\n  type KeyboardEventHandler,\n  type MouseEvent,\n  type PropsWithChildren,\n  memo,\n  useContext,\n  useMemo,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { getIsInclude } from '../../../libs/map'\nimport { Heading, type HeadingTagTypes } from '../../Heading'\nimport { FaCaretDownIcon, FaCaretRightIcon } from '../../Icon'\nimport { Cluster } from '../../Layout'\n\nimport { AccordionPanelContext } from './AccordionPanel'\nimport { AccordionPanelItemContext } from './AccordionPanelItem'\n\nimport type { TextProps } from '../../Text'\n\ntype BaseProps = PropsWithChildren<{\n  /** ヘッダ部分のテキストのスタイル */\n  headingType?: Exclude<TextProps['styleType'], 'screenTitle'>\n  /**\n   * 可能な限り利用せず、SectioningContent(Article, Aside, Nav, Section)を使ってHeadingと関連する範囲を明確に指定する方法を検討してください\n   */\n  unrecommendedHeadingTag?: HeadingTagTypes\n}>\ntype Props = BaseProps & Omit<ComponentPropsWithoutRef<'button'>, keyof BaseProps>\n\nconst classNameGenerator = tv({\n  slots: {\n    title: 'shr-grow shr-leading-tight',\n    titleWrapper: 'shr-flex-nowrap',\n    button: [\n      'smarthr-ui-AccordionPanel-trigger',\n      'shr-group shr-w-full shr-cursor-pointer shr-appearance-none shr-border-none shr-bg-transparent shr-px-1 shr-py-0.75 shr-text-left shr-text-inherit shr-text-color-inherit',\n      'disabled:shr-cursor-not-allowed disabled:shr-bg-white-darken disabled:shr-text-disabled',\n      'hover:shr-bg-white-darken',\n      'focus-visible:shr-focus-indicator',\n      // Panel 直下に AccordionPanel がある場合、背景が付き抜けないように角丸を指定（Panel に overflow: hidden を与えるとフォーカスリングが表示されなくなる）\n      '[.smarthr-ui-Panel_>_.smarthr-ui-AccordionPanel_.smarthr-ui-AccordionPanel-item:first-child_&]:shr-rounded-t-l [.smarthr-ui-Panel_>_.smarthr-ui-AccordionPanel_.smarthr-ui-AccordionPanel-item:last-child_&]:shr-rounded-b-l',\n    ],\n    leftIcon: 'shr-transition-transform shr-duration-100 group-aria-expanded:shr-rotate-90',\n    rightIcon: 'group-aria-expanded:-shr-rotate-180',\n  },\n  compoundSlots: [\n    {\n      slots: ['leftIcon', 'rightIcon'],\n      className: 'shr-shrink-0',\n    },\n  ],\n})\n\nexport const AccordionPanelTrigger: FC<Props> = ({\n  children,\n  className,\n  headingType = 'blockTitle',\n  unrecommendedHeadingTag,\n  ...rest\n}) => {\n  const classNames = useMemo(() => {\n    const { title, titleWrapper, button, leftIcon, rightIcon } = classNameGenerator()\n\n    return {\n      title: title(),\n      titleWrapper: titleWrapper(),\n      button: button({ className }),\n      leftIcon: leftIcon(),\n      rightIcon: rightIcon(),\n    }\n  }, [className])\n\n  const { name, contentId, triggerId } = useContext(AccordionPanelItemContext)\n  const { iconPosition, expandedItems, handleClickTrigger, handleKeyDown } =\n    useContext(AccordionPanelContext)\n\n  const isExpanded = useMemo(() => getIsInclude(expandedItems, name), [expandedItems, name])\n\n  return (\n    <MemoizedHeadingButton\n      {...rest}\n      triggerId={triggerId}\n      contentId={contentId}\n      name={name}\n      isExpanded={isExpanded}\n      iconPosition={iconPosition}\n      headingType={headingType}\n      unrecommendedHeadingTag={unrecommendedHeadingTag}\n      classNames={classNames}\n      handleClickTrigger={handleClickTrigger}\n      handleKeyDown={handleKeyDown}\n    >\n      {children}\n    </MemoizedHeadingButton>\n  )\n}\n\nconst MemoizedHeadingButton = memo<\n  PropsWithChildren<\n    Omit<ComponentPropsWithoutRef<'button'>, 'onClick' | 'onKeyDown'> & {\n      name: string\n      triggerId: string\n      isExpanded: boolean\n      contentId: string\n      handleClickTrigger: (e: MouseEvent<HTMLButtonElement>) => void\n      handleKeyDown: KeyboardEventHandler<HTMLButtonElement>\n      classNames: {\n        button: string\n        titleWrapper: string\n        leftIcon: string\n        rightIcon: string\n        title: string\n      }\n      iconPosition: 'left' | 'right'\n      headingType: Exclude<TextProps['styleType'], 'screenTitle'>\n      unrecommendedHeadingTag?: HeadingTagTypes\n    }\n  >\n>(\n  ({\n    children,\n    name,\n    triggerId,\n    isExpanded,\n    contentId,\n    handleClickTrigger,\n    handleKeyDown,\n    classNames,\n    iconPosition,\n    headingType,\n    unrecommendedHeadingTag,\n    ...rest\n  }) => (\n    // eslint-disable-next-line smarthr/a11y-heading-in-sectioning-content\n    <Heading type={headingType} unrecommendedTag={unrecommendedHeadingTag}>\n      <button\n        {...rest}\n        type=\"button\"\n        id={triggerId}\n        value={name}\n        className={classNames.button}\n        aria-expanded={isExpanded}\n        aria-controls={contentId}\n        data-component=\"AccordionHeaderButton\"\n        onClick={handleClickTrigger}\n        onKeyDown={handleKeyDown}\n      >\n        {/* eslint-disable-next-line smarthr/best-practice-for-layouts */}\n        <Cluster as=\"span\" align=\"center\" className={classNames.titleWrapper}>\n          {iconPosition === 'left' && <FaCaretRightIcon className={classNames.leftIcon} />}\n          <span className={classNames.title}>{children}</span>\n          {iconPosition === 'right' && <FaCaretDownIcon className={classNames.rightIcon} />}\n        </Cluster>\n      </button>\n    </Heading>\n  ),\n)\n"],"names":["_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAkCA;AACE;AACE;AACA;AACA;;;;;;;;AAQC;AACD;AACA;AACD;AACD;AACE;AACE;AACA;AACD;AACF;AACF;;AASC;AACE;;;;AAKE;;;;AAIJ;AAEA;AACA;;;AAsBF;AAEA;AAoCI;AACAA;;"}
+{"version":3,"file":"AccordionPanelTrigger.cjs","sources":["../../../../src/components/AccordionPanel/client/AccordionPanelTrigger.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentPropsWithoutRef,\n  type FC,\n  type KeyboardEventHandler,\n  type MouseEvent,\n  memo,\n  useContext,\n  useMemo,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { getIsInclude } from '../../../libs/map'\nimport { Heading } from '../../Heading'\nimport { FaCaretDownIcon, FaCaretRightIcon } from '../../Icon'\nimport { Cluster } from '../../Layout'\n\nimport { AccordionPanelContext } from './AccordionPanel'\nimport { AccordionPanelItemContext } from './AccordionPanelItem'\n\nimport type { SHRComponentPropsWithoutRef } from '../../../types'\nimport type { Text } from '../../Text'\n\ntype TextProps = ComponentPropsWithoutRef<typeof Text>\ntype HeadingProps = ComponentPropsWithoutRef<typeof Heading>\n\ntype Props = SHRComponentPropsWithoutRef<\n  'button',\n  {\n    /** ヘッダ部分のテキストのスタイル */\n    headingType?: Exclude<TextProps['styleType'], 'screenTitle'>\n    /**\n     * 可能な限り利用せず、SectioningContent(Article, Aside, Nav, Section)を使ってHeadingと関連する範囲を明確に指定する方法を検討してください\n     */\n    unrecommendedHeadingTag?: HeadingProps['unrecommendedTag']\n  },\n  {\n    omit: 'type' | 'id' | 'value' | 'aria-expanded' | 'aria-controls' | 'onClick' | 'onKeyDown'\n  }\n>\n\nconst classNameGenerator = tv({\n  slots: {\n    title: 'shr-grow shr-leading-tight',\n    titleWrapper: 'shr-flex-nowrap',\n    button: [\n      'smarthr-ui-AccordionPanel-trigger',\n      'shr-group shr-w-full shr-cursor-pointer shr-appearance-none shr-border-none shr-bg-transparent shr-px-1 shr-py-0.75 shr-text-left shr-text-inherit shr-text-color-inherit',\n      'disabled:shr-cursor-not-allowed disabled:shr-bg-white-darken disabled:shr-text-disabled',\n      'hover:shr-bg-white-darken',\n      'focus-visible:shr-focus-indicator',\n      // Panel 直下に AccordionPanel がある場合、背景が付き抜けないように角丸を指定（Panel に overflow: hidden を与えるとフォーカスリングが表示されなくなる）\n      '[.smarthr-ui-Panel_>_.smarthr-ui-AccordionPanel_.smarthr-ui-AccordionPanel-item:first-child_&]:shr-rounded-t-l [.smarthr-ui-Panel_>_.smarthr-ui-AccordionPanel_.smarthr-ui-AccordionPanel-item:last-child_&]:shr-rounded-b-l',\n    ],\n    leftIcon: 'shr-transition-transform shr-duration-100 group-aria-expanded:shr-rotate-90',\n    rightIcon: 'group-aria-expanded:-shr-rotate-180',\n  },\n  compoundSlots: [\n    {\n      slots: ['leftIcon', 'rightIcon'],\n      className: 'shr-shrink-0',\n    },\n  ],\n})\n\nexport const AccordionPanelTrigger: FC<Props> = ({\n  children,\n  className,\n  headingType = 'blockTitle',\n  unrecommendedHeadingTag,\n  ...rest\n}) => {\n  const classNames = useMemo(() => {\n    const { title, titleWrapper, button, leftIcon, rightIcon } = classNameGenerator()\n\n    return {\n      title: title(),\n      titleWrapper: titleWrapper(),\n      button: button({ className }),\n      leftIcon: leftIcon(),\n      rightIcon: rightIcon(),\n    }\n  }, [className])\n\n  const { name, contentId, triggerId } = useContext(AccordionPanelItemContext)\n  const { iconPosition, expandedItems, handleClickTrigger, handleKeyDown } =\n    useContext(AccordionPanelContext)\n\n  const isExpanded = useMemo(() => getIsInclude(expandedItems, name), [expandedItems, name])\n\n  return (\n    <MemoizedHeadingButton\n      {...rest}\n      triggerId={triggerId}\n      contentId={contentId}\n      name={name}\n      isExpanded={isExpanded}\n      iconPosition={iconPosition}\n      headingType={headingType}\n      unrecommendedHeadingTag={unrecommendedHeadingTag}\n      classNames={classNames}\n      handleClickTrigger={handleClickTrigger}\n      handleKeyDown={handleKeyDown}\n    >\n      {children}\n    </MemoizedHeadingButton>\n  )\n}\n\nconst MemoizedHeadingButton = memo<\n  Omit<ComponentPropsWithoutRef<'button'>, 'onClick' | 'onKeyDown'> & {\n    name: string\n    triggerId: string\n    isExpanded: boolean\n    contentId: string\n    handleClickTrigger: (e: MouseEvent<HTMLButtonElement>) => void\n    handleKeyDown: KeyboardEventHandler<HTMLButtonElement>\n    classNames: {\n      button: string\n      titleWrapper: string\n      leftIcon: string\n      rightIcon: string\n      title: string\n    }\n    iconPosition: 'left' | 'right'\n    headingType: Exclude<TextProps['styleType'], 'screenTitle'>\n    unrecommendedHeadingTag?: HeadingProps['unrecommendedTag']\n  }\n>(\n  ({\n    children,\n    name,\n    triggerId,\n    isExpanded,\n    contentId,\n    handleClickTrigger,\n    handleKeyDown,\n    classNames,\n    iconPosition,\n    headingType,\n    unrecommendedHeadingTag,\n    ...rest\n  }) => (\n    // eslint-disable-next-line smarthr/a11y-heading-in-sectioning-content\n    <Heading type={headingType} unrecommendedTag={unrecommendedHeadingTag}>\n      <button\n        {...rest}\n        type=\"button\"\n        id={triggerId}\n        value={name}\n        className={classNames.button}\n        aria-expanded={isExpanded}\n        aria-controls={contentId}\n        data-component=\"AccordionHeaderButton\"\n        onClick={handleClickTrigger}\n        onKeyDown={handleKeyDown}\n      >\n        {/* eslint-disable-next-line smarthr/best-practice-for-layouts */}\n        <Cluster as=\"span\" align=\"center\" className={classNames.titleWrapper}>\n          {iconPosition === 'left' && <FaCaretRightIcon className={classNames.leftIcon} />}\n          <span className={classNames.title}>{children}</span>\n          {iconPosition === 'right' && <FaCaretDownIcon className={classNames.rightIcon} />}\n        </Cluster>\n      </button>\n    </Heading>\n  ),\n)\n"],"names":["_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AA0CA;AACE;AACE;AACA;AACA;;;;;;;;AAQC;AACD;AACA;AACD;AACD;AACE;AACE;AACA;AACD;AACF;AACF;;AASC;AACE;;;;AAKE;;;;AAIJ;AAEA;AACA;;;AAsBF;AAEA;AAkCI;AACAA;;"}

package/lib/components/AccordionPanel/client/AccordionPanelTrigger.d.ts

@@ -1,14 +1,18 @@
-import { type ComponentPropsWithoutRef, type FC, type PropsWithChildren } from 'react';
-import { type HeadingTagTypes } from '../../Heading';
-import type { TextProps } from '../../Text';
-type BaseProps = PropsWithChildren<{
+import { type ComponentPropsWithoutRef, type FC } from 'react';
+import { Heading } from '../../Heading';
+import type { SHRComponentPropsWithoutRef } from '../../../types';
+import type { Text } from '../../Text';
+type TextProps = ComponentPropsWithoutRef<typeof Text>;
+type HeadingProps = ComponentPropsWithoutRef<typeof Heading>;
+type Props = SHRComponentPropsWithoutRef<'button', {
     /** ヘッダ部分のテキストのスタイル */
     headingType?: Exclude<TextProps['styleType'], 'screenTitle'>;
     /**
      * 可能な限り利用せず、SectioningContent(Article, Aside, Nav, Section)を使ってHeadingと関連する範囲を明確に指定する方法を検討してください
      */
-    unrecommendedHeadingTag?: HeadingTagTypes;
+    unrecommendedHeadingTag?: HeadingProps['unrecommendedTag'];
+}, {
+    omit: 'type' | 'id' | 'value' | 'aria-expanded' | 'aria-controls' | 'onClick' | 'onKeyDown';
 }>;
-type Props = BaseProps & Omit<ComponentPropsWithoutRef<'button'>, keyof BaseProps>;
 export declare const AccordionPanelTrigger: FC<Props>;
 export {};

package/lib/components/AccordionPanel/client/AccordionPanelTrigger.js

@@ -14,7 +14,7 @@ import { Cluster } from '../../Layout/Cluster/Cluster.js';
 import '../../Layout/Reel/Reel.js';
 import '../../Layout/Sidebar/Sidebar.js';
 import '../../Layout/Center/Center.js';
-import '../../Layout/Container/Container.js';
+import '../../Layout/client/Container/Container.js';
 import { AccordionPanelContext } from './AccordionPanel.js';
 import { AccordionPanelItemContext } from './AccordionPanelItem.js';
 

package/lib/components/AccordionPanel/client/AccordionPanelTrigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionPanelTrigger.js","sources":["../../../../src/components/AccordionPanel/client/AccordionPanelTrigger.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentPropsWithoutRef,\n  type FC,\n  type KeyboardEventHandler,\n  type MouseEvent,\n  type PropsWithChildren,\n  memo,\n  useContext,\n  useMemo,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { getIsInclude } from '../../../libs/map'\nimport { Heading, type HeadingTagTypes } from '../../Heading'\nimport { FaCaretDownIcon, FaCaretRightIcon } from '../../Icon'\nimport { Cluster } from '../../Layout'\n\nimport { AccordionPanelContext } from './AccordionPanel'\nimport { AccordionPanelItemContext } from './AccordionPanelItem'\n\nimport type { TextProps } from '../../Text'\n\ntype BaseProps = PropsWithChildren<{\n  /** ヘッダ部分のテキストのスタイル */\n  headingType?: Exclude<TextProps['styleType'], 'screenTitle'>\n  /**\n   * 可能な限り利用せず、SectioningContent(Article, Aside, Nav, Section)を使ってHeadingと関連する範囲を明確に指定する方法を検討してください\n   */\n  unrecommendedHeadingTag?: HeadingTagTypes\n}>\ntype Props = BaseProps & Omit<ComponentPropsWithoutRef<'button'>, keyof BaseProps>\n\nconst classNameGenerator = tv({\n  slots: {\n    title: 'shr-grow shr-leading-tight',\n    titleWrapper: 'shr-flex-nowrap',\n    button: [\n      'smarthr-ui-AccordionPanel-trigger',\n      'shr-group shr-w-full shr-cursor-pointer shr-appearance-none shr-border-none shr-bg-transparent shr-px-1 shr-py-0.75 shr-text-left shr-text-inherit shr-text-color-inherit',\n      'disabled:shr-cursor-not-allowed disabled:shr-bg-white-darken disabled:shr-text-disabled',\n      'hover:shr-bg-white-darken',\n      'focus-visible:shr-focus-indicator',\n      // Panel 直下に AccordionPanel がある場合、背景が付き抜けないように角丸を指定（Panel に overflow: hidden を与えるとフォーカスリングが表示されなくなる）\n      '[.smarthr-ui-Panel_>_.smarthr-ui-AccordionPanel_.smarthr-ui-AccordionPanel-item:first-child_&]:shr-rounded-t-l [.smarthr-ui-Panel_>_.smarthr-ui-AccordionPanel_.smarthr-ui-AccordionPanel-item:last-child_&]:shr-rounded-b-l',\n    ],\n    leftIcon: 'shr-transition-transform shr-duration-100 group-aria-expanded:shr-rotate-90',\n    rightIcon: 'group-aria-expanded:-shr-rotate-180',\n  },\n  compoundSlots: [\n    {\n      slots: ['leftIcon', 'rightIcon'],\n      className: 'shr-shrink-0',\n    },\n  ],\n})\n\nexport const AccordionPanelTrigger: FC<Props> = ({\n  children,\n  className,\n  headingType = 'blockTitle',\n  unrecommendedHeadingTag,\n  ...rest\n}) => {\n  const classNames = useMemo(() => {\n    const { title, titleWrapper, button, leftIcon, rightIcon } = classNameGenerator()\n\n    return {\n      title: title(),\n      titleWrapper: titleWrapper(),\n      button: button({ className }),\n      leftIcon: leftIcon(),\n      rightIcon: rightIcon(),\n    }\n  }, [className])\n\n  const { name, contentId, triggerId } = useContext(AccordionPanelItemContext)\n  const { iconPosition, expandedItems, handleClickTrigger, handleKeyDown } =\n    useContext(AccordionPanelContext)\n\n  const isExpanded = useMemo(() => getIsInclude(expandedItems, name), [expandedItems, name])\n\n  return (\n    <MemoizedHeadingButton\n      {...rest}\n      triggerId={triggerId}\n      contentId={contentId}\n      name={name}\n      isExpanded={isExpanded}\n      iconPosition={iconPosition}\n      headingType={headingType}\n      unrecommendedHeadingTag={unrecommendedHeadingTag}\n      classNames={classNames}\n      handleClickTrigger={handleClickTrigger}\n      handleKeyDown={handleKeyDown}\n    >\n      {children}\n    </MemoizedHeadingButton>\n  )\n}\n\nconst MemoizedHeadingButton = memo<\n  PropsWithChildren<\n    Omit<ComponentPropsWithoutRef<'button'>, 'onClick' | 'onKeyDown'> & {\n      name: string\n      triggerId: string\n      isExpanded: boolean\n      contentId: string\n      handleClickTrigger: (e: MouseEvent<HTMLButtonElement>) => void\n      handleKeyDown: KeyboardEventHandler<HTMLButtonElement>\n      classNames: {\n        button: string\n        titleWrapper: string\n        leftIcon: string\n        rightIcon: string\n        title: string\n      }\n      iconPosition: 'left' | 'right'\n      headingType: Exclude<TextProps['styleType'], 'screenTitle'>\n      unrecommendedHeadingTag?: HeadingTagTypes\n    }\n  >\n>(\n  ({\n    children,\n    name,\n    triggerId,\n    isExpanded,\n    contentId,\n    handleClickTrigger,\n    handleKeyDown,\n    classNames,\n    iconPosition,\n    headingType,\n    unrecommendedHeadingTag,\n    ...rest\n  }) => (\n    // eslint-disable-next-line smarthr/a11y-heading-in-sectioning-content\n    <Heading type={headingType} unrecommendedTag={unrecommendedHeadingTag}>\n      <button\n        {...rest}\n        type=\"button\"\n        id={triggerId}\n        value={name}\n        className={classNames.button}\n        aria-expanded={isExpanded}\n        aria-controls={contentId}\n        data-component=\"AccordionHeaderButton\"\n        onClick={handleClickTrigger}\n        onKeyDown={handleKeyDown}\n      >\n        {/* eslint-disable-next-line smarthr/best-practice-for-layouts */}\n        <Cluster as=\"span\" align=\"center\" className={classNames.titleWrapper}>\n          {iconPosition === 'left' && <FaCaretRightIcon className={classNames.leftIcon} />}\n          <span className={classNames.title}>{children}</span>\n          {iconPosition === 'right' && <FaCaretDownIcon className={classNames.rightIcon} />}\n        </Cluster>\n      </button>\n    </Heading>\n  ),\n)\n"],"names":["_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;AAkCA;AACE;AACE;AACA;AACA;;;;;;;;AAQC;AACD;AACA;AACD;AACD;AACE;AACE;AACA;AACD;AACF;AACF;;AASC;AACE;;;;AAKE;;;;AAIJ;AAEA;AACA;;;AAsBF;AAEA;AAoCI;AACAA;;"}
+{"version":3,"file":"AccordionPanelTrigger.js","sources":["../../../../src/components/AccordionPanel/client/AccordionPanelTrigger.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentPropsWithoutRef,\n  type FC,\n  type KeyboardEventHandler,\n  type MouseEvent,\n  memo,\n  useContext,\n  useMemo,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { getIsInclude } from '../../../libs/map'\nimport { Heading } from '../../Heading'\nimport { FaCaretDownIcon, FaCaretRightIcon } from '../../Icon'\nimport { Cluster } from '../../Layout'\n\nimport { AccordionPanelContext } from './AccordionPanel'\nimport { AccordionPanelItemContext } from './AccordionPanelItem'\n\nimport type { SHRComponentPropsWithoutRef } from '../../../types'\nimport type { Text } from '../../Text'\n\ntype TextProps = ComponentPropsWithoutRef<typeof Text>\ntype HeadingProps = ComponentPropsWithoutRef<typeof Heading>\n\ntype Props = SHRComponentPropsWithoutRef<\n  'button',\n  {\n    /** ヘッダ部分のテキストのスタイル */\n    headingType?: Exclude<TextProps['styleType'], 'screenTitle'>\n    /**\n     * 可能な限り利用せず、SectioningContent(Article, Aside, Nav, Section)を使ってHeadingと関連する範囲を明確に指定する方法を検討してください\n     */\n    unrecommendedHeadingTag?: HeadingProps['unrecommendedTag']\n  },\n  {\n    omit: 'type' | 'id' | 'value' | 'aria-expanded' | 'aria-controls' | 'onClick' | 'onKeyDown'\n  }\n>\n\nconst classNameGenerator = tv({\n  slots: {\n    title: 'shr-grow shr-leading-tight',\n    titleWrapper: 'shr-flex-nowrap',\n    button: [\n      'smarthr-ui-AccordionPanel-trigger',\n      'shr-group shr-w-full shr-cursor-pointer shr-appearance-none shr-border-none shr-bg-transparent shr-px-1 shr-py-0.75 shr-text-left shr-text-inherit shr-text-color-inherit',\n      'disabled:shr-cursor-not-allowed disabled:shr-bg-white-darken disabled:shr-text-disabled',\n      'hover:shr-bg-white-darken',\n      'focus-visible:shr-focus-indicator',\n      // Panel 直下に AccordionPanel がある場合、背景が付き抜けないように角丸を指定（Panel に overflow: hidden を与えるとフォーカスリングが表示されなくなる）\n      '[.smarthr-ui-Panel_>_.smarthr-ui-AccordionPanel_.smarthr-ui-AccordionPanel-item:first-child_&]:shr-rounded-t-l [.smarthr-ui-Panel_>_.smarthr-ui-AccordionPanel_.smarthr-ui-AccordionPanel-item:last-child_&]:shr-rounded-b-l',\n    ],\n    leftIcon: 'shr-transition-transform shr-duration-100 group-aria-expanded:shr-rotate-90',\n    rightIcon: 'group-aria-expanded:-shr-rotate-180',\n  },\n  compoundSlots: [\n    {\n      slots: ['leftIcon', 'rightIcon'],\n      className: 'shr-shrink-0',\n    },\n  ],\n})\n\nexport const AccordionPanelTrigger: FC<Props> = ({\n  children,\n  className,\n  headingType = 'blockTitle',\n  unrecommendedHeadingTag,\n  ...rest\n}) => {\n  const classNames = useMemo(() => {\n    const { title, titleWrapper, button, leftIcon, rightIcon } = classNameGenerator()\n\n    return {\n      title: title(),\n      titleWrapper: titleWrapper(),\n      button: button({ className }),\n      leftIcon: leftIcon(),\n      rightIcon: rightIcon(),\n    }\n  }, [className])\n\n  const { name, contentId, triggerId } = useContext(AccordionPanelItemContext)\n  const { iconPosition, expandedItems, handleClickTrigger, handleKeyDown } =\n    useContext(AccordionPanelContext)\n\n  const isExpanded = useMemo(() => getIsInclude(expandedItems, name), [expandedItems, name])\n\n  return (\n    <MemoizedHeadingButton\n      {...rest}\n      triggerId={triggerId}\n      contentId={contentId}\n      name={name}\n      isExpanded={isExpanded}\n      iconPosition={iconPosition}\n      headingType={headingType}\n      unrecommendedHeadingTag={unrecommendedHeadingTag}\n      classNames={classNames}\n      handleClickTrigger={handleClickTrigger}\n      handleKeyDown={handleKeyDown}\n    >\n      {children}\n    </MemoizedHeadingButton>\n  )\n}\n\nconst MemoizedHeadingButton = memo<\n  Omit<ComponentPropsWithoutRef<'button'>, 'onClick' | 'onKeyDown'> & {\n    name: string\n    triggerId: string\n    isExpanded: boolean\n    contentId: string\n    handleClickTrigger: (e: MouseEvent<HTMLButtonElement>) => void\n    handleKeyDown: KeyboardEventHandler<HTMLButtonElement>\n    classNames: {\n      button: string\n      titleWrapper: string\n      leftIcon: string\n      rightIcon: string\n      title: string\n    }\n    iconPosition: 'left' | 'right'\n    headingType: Exclude<TextProps['styleType'], 'screenTitle'>\n    unrecommendedHeadingTag?: HeadingProps['unrecommendedTag']\n  }\n>(\n  ({\n    children,\n    name,\n    triggerId,\n    isExpanded,\n    contentId,\n    handleClickTrigger,\n    handleKeyDown,\n    classNames,\n    iconPosition,\n    headingType,\n    unrecommendedHeadingTag,\n    ...rest\n  }) => (\n    // eslint-disable-next-line smarthr/a11y-heading-in-sectioning-content\n    <Heading type={headingType} unrecommendedTag={unrecommendedHeadingTag}>\n      <button\n        {...rest}\n        type=\"button\"\n        id={triggerId}\n        value={name}\n        className={classNames.button}\n        aria-expanded={isExpanded}\n        aria-controls={contentId}\n        data-component=\"AccordionHeaderButton\"\n        onClick={handleClickTrigger}\n        onKeyDown={handleKeyDown}\n      >\n        {/* eslint-disable-next-line smarthr/best-practice-for-layouts */}\n        <Cluster as=\"span\" align=\"center\" className={classNames.titleWrapper}>\n          {iconPosition === 'left' && <FaCaretRightIcon className={classNames.leftIcon} />}\n          <span className={classNames.title}>{children}</span>\n          {iconPosition === 'right' && <FaCaretDownIcon className={classNames.rightIcon} />}\n        </Cluster>\n      </button>\n    </Heading>\n  ),\n)\n"],"names":["_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;AA0CA;AACE;AACE;AACA;AACA;;;;;;;;AAQC;AACD;AACA;AACD;AACD;AACE;AACE;AACA;AACD;AACF;AACF;;AASC;AACE;;;;AAKE;;;;AAIJ;AAEA;AACA;;;AAsBF;AAEA;AAkCI;AACAA;;"}

package/lib/components/AppHeader/components/common/AppLauncherFeatures.cjs

@@ -20,8 +20,7 @@ require('../../../Layout/Cluster/Cluster.cjs');
 require('../../../Layout/Reel/Reel.cjs');
 require('../../../Layout/Sidebar/Sidebar.cjs');
 var components_Layout_Center_Center = require('../../../Layout/Center/Center.cjs');
-require('../../../Layout/Container/Container.cjs');
-var components_LineClamp_LineClamp = require('../../../LineClamp/LineClamp.cjs');
+require('../../../Layout/client/Container/Container.cjs');
 var components_Loader_Loader = require('../../../Loader/Loader.cjs');
 var components_Text_Text = require('../../../Text/Text.cjs');
 var components_AppHeader_hooks_useMediaQuery = require('../../hooks/useMediaQuery.cjs');
@@ -70,7 +69,7 @@ const FeatureList = ({ features, page }) => {
 const FeatureListItem = React.memo(({ href, children, isFavorite, className }) => (jsxRuntime.jsx("li", { children: jsxRuntime.jsx(components_Button_AnchorButton.AnchorButton, { href: href, target: "_blank", variant: "text", wide: true, className: className, "data-favorite": isFavorite, prefix: isFavorite && jsxRuntime.jsx(components_Icon_FaIcon.FaStarIcon, {}), suffix: jsxRuntime.jsx(components_Icon_FaIcon.FaArrowRightIcon, {}), children: jsxRuntime.jsx(FeatureName, { children: children }) }) })));
 const FeatureName = ({ children }) => {
     const isDesktop = components_AppHeader_hooks_useMediaQuery.useMediaQuery(components_AppHeader_hooks_useMediaQuery.mediaQuery.desktop);
-    return isDesktop ? jsxRuntime.jsx(components_LineClamp_LineClamp.LineClamp, { maxLines: 2, children: children }) : children;
+    return isDesktop ? (jsxRuntime.jsx(components_Text_Text.Text, { as: "span", maxLines: { max: 2, tooltip: true }, children: children })) : (children);
 };
 
 exports.AppLauncherFeatures = AppLauncherFeatures;

package/lib/components/AppHeader/components/common/AppLauncherFeatures.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"AppLauncherFeatures.cjs","sources":["../../../../../src/components/AppHeader/components/common/AppLauncherFeatures.tsx"],"sourcesContent":["import { type FC, type PropsWithChildren, memo } from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { Localizer } from '../../../../intl'\nimport { AnchorButton } from '../../../Button'\nimport { FaArrowRightIcon, FaStarIcon } from '../../../Icon'\nimport { Center } from '../../../Layout'\nimport { LineClamp } from '../../../LineClamp'\nimport { Loader } from '../../../Loader'\nimport { Text } from '../../../Text'\nimport { mediaQuery, useMediaQuery } from '../../hooks/useMediaQuery'\n\nimport { Translate } from './Translate'\n\nimport type { Launcher } from '../../types'\n\nconst classNameGenerator = tv({\n  slots: {\n    empty: ['shr-p-1 shr-text-center'],\n    loadError: ['shr-whitespace-pre-wrap shr-p-1 shr-text-center'],\n    loading: ['shr-py-3'],\n    list: ['shr-list-none', '[&>li]:shr-px-0.5 [&>li]:shr-py-0.25'],\n    listItem: [\n      'smarthr-ui-AppLauncher-listItem',\n      'shr-grid shr-min-h-[2.5rem] shr-grid-cols-[1rem_1fr_1rem] shr-gap-0.75 shr-whitespace-normal shr-px-1 shr-py-0 shr-text-left shr-leading-tight',\n      'data-[favorite=\"false\"]:shr-grid-cols-[1fr_1rem]',\n    ],\n  },\n})\n\nconst CLASS_NAMES = (() => {\n  const { empty, loadError, loading, list, listItem } = classNameGenerator()\n\n  return {\n    empty: empty(),\n    loadError: loadError(),\n    loading: loading(),\n    list: list(),\n    listItem: listItem(),\n  }\n})()\n\ntype Props = {\n  features: Array<Launcher['feature']>\n  page: Launcher['page']\n  loading?: boolean\n  error?: boolean\n}\n\nexport const AppLauncherFeatures: FC<Props> = ({ features, page, loading, error }) => {\n  if (loading) {\n    return <LoadingList />\n  }\n\n  if (error) {\n    return <LoadErrorText />\n  }\n\n  return features.length === 0 ? <EmptyList /> : <FeatureList features={features} page={page} />\n}\n\nconst LoadingList = memo(() => (\n  <Center className={CLASS_NAMES.loading}>\n    <Loader />\n  </Center>\n))\n\nconst LoadErrorText = memo(() => (\n  <div className={CLASS_NAMES.loadError}>\n    <Text size=\"S\">\n      <Localizer\n        id=\"smarthr-ui/AppHeader/Launcher/loadError\"\n        defaultText={`アプリ一覧の読み込みに失敗しました。\n時間をおいて、やり直してください。`}\n      />\n    </Text>\n  </div>\n))\n\nconst EmptyList = memo(() => (\n  <div className={CLASS_NAMES.empty}>\n    <Text size=\"S\">\n      <Translate>\n        <Localizer\n          id=\"smarthr-ui/AppHeader/Launcher/emptyText\"\n          defaultText=\"該当するアプリが見つかりませんでした。\"\n        />\n      </Translate>\n    </Text>\n  </div>\n))\n\nconst FeatureList: FC<Props> = ({ features, page }) => {\n  const isFavorite = page === 'favorite'\n\n  return (\n    <ul className={CLASS_NAMES.list}>\n      {features.map((feature) => (\n        <FeatureListItem\n          key={feature.id}\n          href={feature.url}\n          isFavorite={isFavorite}\n          className={CLASS_NAMES.listItem}\n        >\n          {feature.name}\n        </FeatureListItem>\n      ))}\n    </ul>\n  )\n}\n\nconst FeatureListItem = memo<{\n  href: Props['features'][number]['url']\n  children: Props['features'][number]['name']\n  className: string\n  isFavorite: boolean\n}>(({ href, children, isFavorite, className }) => (\n  <li>\n    <AnchorButton\n      href={href}\n      target=\"_blank\"\n      variant=\"text\"\n      wide\n      className={className}\n      data-favorite={isFavorite}\n      prefix={isFavorite && <FaStarIcon />}\n      suffix={<FaArrowRightIcon />}\n    >\n      <FeatureName>{children}</FeatureName>\n    </AnchorButton>\n  </li>\n))\n\nconst FeatureName: FC<PropsWithChildren> = ({ children }) => {\n  const isDesktop = useMediaQuery(mediaQuery.desktop)\n\n  return isDesktop ? <LineClamp maxLines={2}>{children}</LineClamp> : children\n}\n"],"names":["tv","_jsx","memo","Center","Loader","Text","Localizer","Translate","AnchorButton","FaStarIcon","FaArrowRightIcon","useMediaQuery","mediaQuery","LineClamp"],"mappings":"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"}
+{"version":3,"file":"AppLauncherFeatures.cjs","sources":["../../../../../src/components/AppHeader/components/common/AppLauncherFeatures.tsx"],"sourcesContent":["import { type FC, type PropsWithChildren, memo } from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { Localizer } from '../../../../intl'\nimport { AnchorButton } from '../../../Button'\nimport { FaArrowRightIcon, FaStarIcon } from '../../../Icon'\nimport { Center } from '../../../Layout'\nimport { Loader } from '../../../Loader'\nimport { Text } from '../../../Text'\nimport { mediaQuery, useMediaQuery } from '../../hooks/useMediaQuery'\n\nimport { Translate } from './Translate'\n\nimport type { Launcher } from '../../types'\n\nconst classNameGenerator = tv({\n  slots: {\n    empty: ['shr-p-1 shr-text-center'],\n    loadError: ['shr-whitespace-pre-wrap shr-p-1 shr-text-center'],\n    loading: ['shr-py-3'],\n    list: ['shr-list-none', '[&>li]:shr-px-0.5 [&>li]:shr-py-0.25'],\n    listItem: [\n      'smarthr-ui-AppLauncher-listItem',\n      'shr-grid shr-min-h-[2.5rem] shr-grid-cols-[1rem_1fr_1rem] shr-gap-0.75 shr-whitespace-normal shr-px-1 shr-py-0 shr-text-left shr-leading-tight',\n      'data-[favorite=\"false\"]:shr-grid-cols-[1fr_1rem]',\n    ],\n  },\n})\n\nconst CLASS_NAMES = (() => {\n  const { empty, loadError, loading, list, listItem } = classNameGenerator()\n\n  return {\n    empty: empty(),\n    loadError: loadError(),\n    loading: loading(),\n    list: list(),\n    listItem: listItem(),\n  }\n})()\n\ntype Props = {\n  features: Array<Launcher['feature']>\n  page: Launcher['page']\n  loading?: boolean\n  error?: boolean\n}\n\nexport const AppLauncherFeatures: FC<Props> = ({ features, page, loading, error }) => {\n  if (loading) {\n    return <LoadingList />\n  }\n\n  if (error) {\n    return <LoadErrorText />\n  }\n\n  return features.length === 0 ? <EmptyList /> : <FeatureList features={features} page={page} />\n}\n\nconst LoadingList = memo(() => (\n  <Center className={CLASS_NAMES.loading}>\n    <Loader />\n  </Center>\n))\n\nconst LoadErrorText = memo(() => (\n  <div className={CLASS_NAMES.loadError}>\n    <Text size=\"S\">\n      <Localizer\n        id=\"smarthr-ui/AppHeader/Launcher/loadError\"\n        defaultText={`アプリ一覧の読み込みに失敗しました。\n時間をおいて、やり直してください。`}\n      />\n    </Text>\n  </div>\n))\n\nconst EmptyList = memo(() => (\n  <div className={CLASS_NAMES.empty}>\n    <Text size=\"S\">\n      <Translate>\n        <Localizer\n          id=\"smarthr-ui/AppHeader/Launcher/emptyText\"\n          defaultText=\"該当するアプリが見つかりませんでした。\"\n        />\n      </Translate>\n    </Text>\n  </div>\n))\n\nconst FeatureList: FC<Props> = ({ features, page }) => {\n  const isFavorite = page === 'favorite'\n\n  return (\n    <ul className={CLASS_NAMES.list}>\n      {features.map((feature) => (\n        <FeatureListItem\n          key={feature.id}\n          href={feature.url}\n          isFavorite={isFavorite}\n          className={CLASS_NAMES.listItem}\n        >\n          {feature.name}\n        </FeatureListItem>\n      ))}\n    </ul>\n  )\n}\n\nconst FeatureListItem = memo<{\n  href: Props['features'][number]['url']\n  children: Props['features'][number]['name']\n  className: string\n  isFavorite: boolean\n}>(({ href, children, isFavorite, className }) => (\n  <li>\n    <AnchorButton\n      href={href}\n      target=\"_blank\"\n      variant=\"text\"\n      wide\n      className={className}\n      data-favorite={isFavorite}\n      prefix={isFavorite && <FaStarIcon />}\n      suffix={<FaArrowRightIcon />}\n    >\n      <FeatureName>{children}</FeatureName>\n    </AnchorButton>\n  </li>\n))\n\nconst FeatureName: FC<PropsWithChildren> = ({ children }) => {\n  const isDesktop = useMediaQuery(mediaQuery.desktop)\n\n  return isDesktop ? (\n    <Text as=\"span\" maxLines={{ max: 2, tooltip: true }}>\n      {children}\n    </Text>\n  ) : (\n    children\n  )\n}\n"],"names":["tv","_jsx","memo","Center","Loader","Text","Localizer","Translate","AnchorButton","FaStarIcon","FaArrowRightIcon","useMediaQuery","mediaQuery"],"mappings":"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"}

package/lib/components/AppHeader/components/common/AppLauncherFeatures.js

@@ -7,7 +7,7 @@ import { Localizer } from '../../../../intl/Localizer.js';
 import '../../../../_virtual/dayjs.min.js';
 import '../../../../intl/TimeFormatter.js';
 import '../../../Button/Button.js';
-import { AnchorButton as ForwardedAnchorButton } from '../../../Button/AnchorButton.js';
+import { AnchorButton } from '../../../Button/AnchorButton.js';
 import '../../../Button/UnstyledButton.js';
 import { FaArrowRightIcon, FaStarIcon } from '../../../Icon/FaIcon.js';
 import '../../../Icon/generateIcon.js';
@@ -18,8 +18,7 @@ import '../../../Layout/Cluster/Cluster.js';
 import '../../../Layout/Reel/Reel.js';
 import '../../../Layout/Sidebar/Sidebar.js';
 import { Center } from '../../../Layout/Center/Center.js';
-import '../../../Layout/Container/Container.js';
-import { LineClamp } from '../../../LineClamp/LineClamp.js';
+import '../../../Layout/client/Container/Container.js';
 import { Loader } from '../../../Loader/Loader.js';
 import { Text } from '../../../Text/Text.js';
 import { useMediaQuery, mediaQuery } from '../../hooks/useMediaQuery.js';
@@ -65,10 +64,10 @@ const FeatureList = ({ features, page }) => {
     const isFavorite = page === 'favorite';
     return (jsx("ul", { className: CLASS_NAMES.list, children: features.map((feature) => (jsx(FeatureListItem, { href: feature.url, isFavorite: isFavorite, className: CLASS_NAMES.listItem, children: feature.name }, feature.id))) }));
 };
-const FeatureListItem = memo(({ href, children, isFavorite, className }) => (jsx("li", { children: jsx(ForwardedAnchorButton, { href: href, target: "_blank", variant: "text", wide: true, className: className, "data-favorite": isFavorite, prefix: isFavorite && jsx(FaStarIcon, {}), suffix: jsx(FaArrowRightIcon, {}), children: jsx(FeatureName, { children: children }) }) })));
+const FeatureListItem = memo(({ href, children, isFavorite, className }) => (jsx("li", { children: jsx(AnchorButton, { href: href, target: "_blank", variant: "text", wide: true, className: className, "data-favorite": isFavorite, prefix: isFavorite && jsx(FaStarIcon, {}), suffix: jsx(FaArrowRightIcon, {}), children: jsx(FeatureName, { children: children }) }) })));
 const FeatureName = ({ children }) => {
     const isDesktop = useMediaQuery(mediaQuery.desktop);
-    return isDesktop ? jsx(LineClamp, { maxLines: 2, children: children }) : children;
+    return isDesktop ? (jsx(Text, { as: "span", maxLines: { max: 2, tooltip: true }, children: children })) : (children);
 };
 
 export { AppLauncherFeatures };

package/lib/components/AppHeader/components/common/AppLauncherFeatures.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppLauncherFeatures.js","sources":["../../../../../src/components/AppHeader/components/common/AppLauncherFeatures.tsx"],"sourcesContent":["import { type FC, type PropsWithChildren, memo } from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { Localizer } from '../../../../intl'\nimport { AnchorButton } from '../../../Button'\nimport { FaArrowRightIcon, FaStarIcon } from '../../../Icon'\nimport { Center } from '../../../Layout'\nimport { LineClamp } from '../../../LineClamp'\nimport { Loader } from '../../../Loader'\nimport { Text } from '../../../Text'\nimport { mediaQuery, useMediaQuery } from '../../hooks/useMediaQuery'\n\nimport { Translate } from './Translate'\n\nimport type { Launcher } from '../../types'\n\nconst classNameGenerator = tv({\n  slots: {\n    empty: ['shr-p-1 shr-text-center'],\n    loadError: ['shr-whitespace-pre-wrap shr-p-1 shr-text-center'],\n    loading: ['shr-py-3'],\n    list: ['shr-list-none', '[&>li]:shr-px-0.5 [&>li]:shr-py-0.25'],\n    listItem: [\n      'smarthr-ui-AppLauncher-listItem',\n      'shr-grid shr-min-h-[2.5rem] shr-grid-cols-[1rem_1fr_1rem] shr-gap-0.75 shr-whitespace-normal shr-px-1 shr-py-0 shr-text-left shr-leading-tight',\n      'data-[favorite=\"false\"]:shr-grid-cols-[1fr_1rem]',\n    ],\n  },\n})\n\nconst CLASS_NAMES = (() => {\n  const { empty, loadError, loading, list, listItem } = classNameGenerator()\n\n  return {\n    empty: empty(),\n    loadError: loadError(),\n    loading: loading(),\n    list: list(),\n    listItem: listItem(),\n  }\n})()\n\ntype Props = {\n  features: Array<Launcher['feature']>\n  page: Launcher['page']\n  loading?: boolean\n  error?: boolean\n}\n\nexport const AppLauncherFeatures: FC<Props> = ({ features, page, loading, error }) => {\n  if (loading) {\n    return <LoadingList />\n  }\n\n  if (error) {\n    return <LoadErrorText />\n  }\n\n  return features.length === 0 ? <EmptyList /> : <FeatureList features={features} page={page} />\n}\n\nconst LoadingList = memo(() => (\n  <Center className={CLASS_NAMES.loading}>\n    <Loader />\n  </Center>\n))\n\nconst LoadErrorText = memo(() => (\n  <div className={CLASS_NAMES.loadError}>\n    <Text size=\"S\">\n      <Localizer\n        id=\"smarthr-ui/AppHeader/Launcher/loadError\"\n        defaultText={`アプリ一覧の読み込みに失敗しました。\n時間をおいて、やり直してください。`}\n      />\n    </Text>\n  </div>\n))\n\nconst EmptyList = memo(() => (\n  <div className={CLASS_NAMES.empty}>\n    <Text size=\"S\">\n      <Translate>\n        <Localizer\n          id=\"smarthr-ui/AppHeader/Launcher/emptyText\"\n          defaultText=\"該当するアプリが見つかりませんでした。\"\n        />\n      </Translate>\n    </Text>\n  </div>\n))\n\nconst FeatureList: FC<Props> = ({ features, page }) => {\n  const isFavorite = page === 'favorite'\n\n  return (\n    <ul className={CLASS_NAMES.list}>\n      {features.map((feature) => (\n        <FeatureListItem\n          key={feature.id}\n          href={feature.url}\n          isFavorite={isFavorite}\n          className={CLASS_NAMES.listItem}\n        >\n          {feature.name}\n        </FeatureListItem>\n      ))}\n    </ul>\n  )\n}\n\nconst FeatureListItem = memo<{\n  href: Props['features'][number]['url']\n  children: Props['features'][number]['name']\n  className: string\n  isFavorite: boolean\n}>(({ href, children, isFavorite, className }) => (\n  <li>\n    <AnchorButton\n      href={href}\n      target=\"_blank\"\n      variant=\"text\"\n      wide\n      className={className}\n      data-favorite={isFavorite}\n      prefix={isFavorite && <FaStarIcon />}\n      suffix={<FaArrowRightIcon />}\n    >\n      <FeatureName>{children}</FeatureName>\n    </AnchorButton>\n  </li>\n))\n\nconst FeatureName: FC<PropsWithChildren> = ({ children }) => {\n  const isDesktop = useMediaQuery(mediaQuery.desktop)\n\n  return isDesktop ? <LineClamp maxLines={2}>{children}</LineClamp> : children\n}\n"],"names":["tv","_jsx","AnchorButton"],"mappings":"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"}
+{"version":3,"file":"AppLauncherFeatures.js","sources":["../../../../../src/components/AppHeader/components/common/AppLauncherFeatures.tsx"],"sourcesContent":["import { type FC, type PropsWithChildren, memo } from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { Localizer } from '../../../../intl'\nimport { AnchorButton } from '../../../Button'\nimport { FaArrowRightIcon, FaStarIcon } from '../../../Icon'\nimport { Center } from '../../../Layout'\nimport { Loader } from '../../../Loader'\nimport { Text } from '../../../Text'\nimport { mediaQuery, useMediaQuery } from '../../hooks/useMediaQuery'\n\nimport { Translate } from './Translate'\n\nimport type { Launcher } from '../../types'\n\nconst classNameGenerator = tv({\n  slots: {\n    empty: ['shr-p-1 shr-text-center'],\n    loadError: ['shr-whitespace-pre-wrap shr-p-1 shr-text-center'],\n    loading: ['shr-py-3'],\n    list: ['shr-list-none', '[&>li]:shr-px-0.5 [&>li]:shr-py-0.25'],\n    listItem: [\n      'smarthr-ui-AppLauncher-listItem',\n      'shr-grid shr-min-h-[2.5rem] shr-grid-cols-[1rem_1fr_1rem] shr-gap-0.75 shr-whitespace-normal shr-px-1 shr-py-0 shr-text-left shr-leading-tight',\n      'data-[favorite=\"false\"]:shr-grid-cols-[1fr_1rem]',\n    ],\n  },\n})\n\nconst CLASS_NAMES = (() => {\n  const { empty, loadError, loading, list, listItem } = classNameGenerator()\n\n  return {\n    empty: empty(),\n    loadError: loadError(),\n    loading: loading(),\n    list: list(),\n    listItem: listItem(),\n  }\n})()\n\ntype Props = {\n  features: Array<Launcher['feature']>\n  page: Launcher['page']\n  loading?: boolean\n  error?: boolean\n}\n\nexport const AppLauncherFeatures: FC<Props> = ({ features, page, loading, error }) => {\n  if (loading) {\n    return <LoadingList />\n  }\n\n  if (error) {\n    return <LoadErrorText />\n  }\n\n  return features.length === 0 ? <EmptyList /> : <FeatureList features={features} page={page} />\n}\n\nconst LoadingList = memo(() => (\n  <Center className={CLASS_NAMES.loading}>\n    <Loader />\n  </Center>\n))\n\nconst LoadErrorText = memo(() => (\n  <div className={CLASS_NAMES.loadError}>\n    <Text size=\"S\">\n      <Localizer\n        id=\"smarthr-ui/AppHeader/Launcher/loadError\"\n        defaultText={`アプリ一覧の読み込みに失敗しました。\n時間をおいて、やり直してください。`}\n      />\n    </Text>\n  </div>\n))\n\nconst EmptyList = memo(() => (\n  <div className={CLASS_NAMES.empty}>\n    <Text size=\"S\">\n      <Translate>\n        <Localizer\n          id=\"smarthr-ui/AppHeader/Launcher/emptyText\"\n          defaultText=\"該当するアプリが見つかりませんでした。\"\n        />\n      </Translate>\n    </Text>\n  </div>\n))\n\nconst FeatureList: FC<Props> = ({ features, page }) => {\n  const isFavorite = page === 'favorite'\n\n  return (\n    <ul className={CLASS_NAMES.list}>\n      {features.map((feature) => (\n        <FeatureListItem\n          key={feature.id}\n          href={feature.url}\n          isFavorite={isFavorite}\n          className={CLASS_NAMES.listItem}\n        >\n          {feature.name}\n        </FeatureListItem>\n      ))}\n    </ul>\n  )\n}\n\nconst FeatureListItem = memo<{\n  href: Props['features'][number]['url']\n  children: Props['features'][number]['name']\n  className: string\n  isFavorite: boolean\n}>(({ href, children, isFavorite, className }) => (\n  <li>\n    <AnchorButton\n      href={href}\n      target=\"_blank\"\n      variant=\"text\"\n      wide\n      className={className}\n      data-favorite={isFavorite}\n      prefix={isFavorite && <FaStarIcon />}\n      suffix={<FaArrowRightIcon />}\n    >\n      <FeatureName>{children}</FeatureName>\n    </AnchorButton>\n  </li>\n))\n\nconst FeatureName: FC<PropsWithChildren> = ({ children }) => {\n  const isDesktop = useMediaQuery(mediaQuery.desktop)\n\n  return isDesktop ? (\n    <Text as=\"span\" maxLines={{ max: 2, tooltip: true }}>\n      {children}\n    </Text>\n  ) : (\n    children\n  )\n}\n"],"names":["tv","_jsx"],"mappings":"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"}