{"v":0,"components":{"components-buttons-button":{"id":"components-buttons-button","name":"Button","path":"./src/components/buttons/button/button.stories.tsx","stories":[{"id":"components-buttons-button--primary","name":"Primary","snippet":"const Primary = (props) => {\n return ;\n};"},{"id":"components-buttons-button--outlined","name":"Outlined","snippet":"const Outlined = (props) => {\n return ;\n};"},{"id":"components-buttons-button--skeleton","name":"Skeleton","snippet":"const Skeleton = (props) => {\n return ;\n};"},{"id":"components-buttons-button--gray","name":"Gray","snippet":"const Gray = (props) => {\n return ;\n};"},{"id":"components-buttons-button--outlined-gray","name":"Outlined Gray","snippet":"const OutlinedGray = (props) => {\n return ;\n};"},{"id":"components-buttons-button--full-width","name":"Full Width","snippet":"const FullWidth = (props) => {\n return ;\n};"},{"id":"components-buttons-button--large","name":"Large","snippet":"const Large = (props) => {\n return ;\n};"},{"id":"components-buttons-button--medium","name":"Medium","snippet":"const Medium = (props) => {\n return ;\n};"},{"id":"components-buttons-button--small","name":"Small","snippet":"const Small = (props) => {\n return ;\n};"},{"id":"components-buttons-button--disabled","name":"Disabled","snippet":"const Disabled = (props) => {\n return ;\n};"},{"id":"components-buttons-button--disabled-outlined","name":"Disabled Outlined","snippet":"const DisabledOutlined = (props) => {\n return ;\n};"},{"id":"components-buttons-button--start-icon","name":"Start Icon","snippet":"const StartIcon = (props) => {\n return ;\n};"},{"id":"components-buttons-button--end-icon","name":"End Icon","snippet":"const EndIcon = (props) => {\n return ;\n};"}],"import":"import { Button, CopyIcon } from \"@k8o/arte-odyssey\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"Button","definedInFile":"/home/runner/work/ArteOdyssey/ArteOdyssey/packages/arte-odyssey/src/components/buttons/button/button.tsx","actualName":"Button","exportName":"Button","props":{"type":{"required":false,"tsType":{"name":"union","raw":"'button' | 'submit'","elements":[{"name":"literal","value":"'button'"},{"name":"literal","value":"'submit'"}]},"description":"","defaultValue":{"value":"'button'","computed":false}},"size":{"required":false,"tsType":{"name":"union","raw":"'sm' | 'md' | 'lg'","elements":[{"name":"literal","value":"'sm'"},{"name":"literal","value":"'md'"},{"name":"literal","value":"'lg'"}]},"description":"","defaultValue":{"value":"'md'","computed":false}},"color":{"required":false,"tsType":{"name":"union","raw":"'primary' | 'gray'","elements":[{"name":"literal","value":"'primary'"},{"name":"literal","value":"'gray'"}]},"description":"","defaultValue":{"value":"'primary'","computed":false}},"variant":{"required":false,"tsType":{"name":"union","raw":"'contained' | 'outlined' | 'skeleton'","elements":[{"name":"literal","value":"'contained'"},{"name":"literal","value":"'outlined'"},{"name":"literal","value":"'skeleton'"}]},"description":"","defaultValue":{"value":"'contained'","computed":false}},"fullWidth":{"required":false,"tsType":{"name":"boolean"},"description":"","defaultValue":{"value":"false","computed":false}},"startIcon":{"required":false,"tsType":{"name":"ReactNode"},"description":""},"endIcon":{"required":false,"tsType":{"name":"ReactNode"},"description":""},"disabled":{"defaultValue":{"value":"false","computed":false},"required":false}}}},"components-buttons-icon-button":{"id":"components-buttons-icon-button","name":"IconButton","path":"./src/components/buttons/icon-button/icon-button.stories.tsx","stories":[{"id":"components-buttons-icon-button--large","name":"Large","snippet":"const Large = () => ;"},{"id":"components-buttons-icon-button--medium","name":"Medium","snippet":"const Medium = () => ;"},{"id":"components-buttons-icon-button--small","name":"Small","snippet":"const Small = () => ;"},{"id":"components-buttons-icon-button--disabled","name":"Disabled","snippet":"const Disabled = () => ;"},{"id":"components-buttons-icon-button--bg-base","name":"Bg Base","snippet":"const BgBase = () => ;"},{"id":"components-buttons-icon-button--bg-primary","name":"Bg Primary","snippet":"const BgPrimary = () => ;"}],"import":"import { CopyIcon, IconButton } from \"@k8o/arte-odyssey\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"IconButton","definedInFile":"/home/runner/work/ArteOdyssey/ArteOdyssey/packages/arte-odyssey/src/components/buttons/icon-button/icon-button.tsx","actualName":"IconButton","exportName":"IconButton","props":{"size":{"required":false,"tsType":{"name":"union","raw":"'sm' | 'md' | 'lg'","elements":[{"name":"literal","value":"'sm'"},{"name":"literal","value":"'md'"},{"name":"literal","value":"'lg'"}]},"description":"","defaultValue":{"value":"'md'","computed":false}},"bg":{"required":false,"tsType":{"name":"union","raw":"'transparent' | 'base' | 'primary'","elements":[{"name":"literal","value":"'transparent'"},{"name":"literal","value":"'base'"},{"name":"literal","value":"'primary'"}]},"description":"","defaultValue":{"value":"'transparent'","computed":false}},"label":{"required":true,"tsType":{"name":"string"},"description":""}}}},"components-buttons-icon-link":{"id":"components-buttons-icon-link","name":"IconLink","path":"./src/components/buttons/icon-link/icon-link.stories.tsx","stories":[{"id":"components-buttons-icon-link--large","name":"Large","snippet":"const Large = () => ;"},{"id":"components-buttons-icon-link--medium","name":"Medium","snippet":"const Medium = () => ;"},{"id":"components-buttons-icon-link--small","name":"Small","snippet":"const Small = () => ;"},{"id":"components-buttons-icon-link--bg-base","name":"Bg Base","snippet":"const BgBase = () => ;"},{"id":"components-buttons-icon-link--bg-primary","name":"Bg Primary","snippet":"const BgPrimary = () => ;"}],"import":"import { CopyIcon, IconLink } from \"@k8o/arte-odyssey\";","jsDocTags":{},"error":{"name":"No component definition found","message":"File: /home/runner/work/ArteOdyssey/ArteOdyssey/packages/arte-odyssey/src/components/buttons/icon-link/icon-link.tsx\nError:\nNo suitable component definition found.\nYou can debug your component file in this playground: https://react-docgen.dev/playground\nCode:\nimport type { PropsWithChildren, ReactNode } from 'react';\nimport { cn } from './../../../helpers/cn';\nimport { isInternalRoute } from './../../../helpers/is-internal-route';\n\nexport const IconLink = ({\n size = 'md',\n bg = 'transparent',\n label,\n href,\n children,\n openInNewTab = false,\n renderAnchor = ({ children, ...props }) => {children},\n}: PropsWithChildren<{\n size?: 'sm' | 'md' | 'lg';\n bg?: 'transparent' | 'base' | 'primary';\n label?: string;\n href: T;\n openInNewTab?: boolean;\n renderAnchor?: (props: {\n href: NoInfer;\n className: string;\n target?: string;\n rel?: string;\n children: ReactNode;\n }) => ReactNode;\n}>) => {\n const type = isInternalRoute(href) && !openInNewTab ? 'internal' : 'external';\n const props =\n type === 'internal'\n ? {}\n : {\n target: '_blank',\n rel: 'noopener noreferrer',\n };\n return renderAnchor({\n href,\n className: cn(\n 'inline-flex rounded-full transition-colors hover:bg-bg-subtle active:bg-bg-emphasize focus-visible:ring-2 focus-visible:ring-border-info',\n bg === 'base' && 'bg-bg-base',\n bg === 'transparent' && 'bg-transparent',\n bg === 'primary' && 'bg-primary-bg hover:bg-primary-bg/90 active:bg-primary-bg-emphasize',\n size === 'sm' && 'p-1',\n size === 'md' && 'p-2',\n size === 'lg' && 'p-3',\n ),\n ...props,\n children: (\n <>\n {label}\n {children}\n \n ),\n });\n};\n"}},"components-buttons-link-button":{"id":"components-buttons-link-button","name":"LinkButton","path":"./src/components/buttons/link-button/link-button.stories.tsx","stories":[{"id":"components-buttons-link-button--large","name":"Large","snippet":"const Large = () => ボタン;"},{"id":"components-buttons-link-button--medium","name":"Medium","snippet":"const Medium = () => ボタン;"},{"id":"components-buttons-link-button--small","name":"Small","snippet":"const Small = () => ボタン;"},{"id":"components-buttons-link-button--outlined","name":"Outlined","snippet":"const Outlined = () => ボタン;"},{"id":"components-buttons-link-button--skeleton","name":"Skeleton","snippet":"const Skeleton = () => ボタン;"},{"id":"components-buttons-link-button--gray","name":"Gray","snippet":"const Gray = () => ボタン;"},{"id":"components-buttons-link-button--gray-outlined","name":"Gray Outlined","snippet":"const GrayOutlined = () => ボタン;"},{"id":"components-buttons-link-button--start-icon","name":"Start Icon","snippet":"const StartIcon = () => }>ボタン;"},{"id":"components-buttons-link-button--end-icon","name":"End Icon","snippet":"const EndIcon = () => }>ボタン;"}],"import":"import { CopyIcon, LinkButton } from \"@k8o/arte-odyssey\";","jsDocTags":{},"error":{"name":"No component definition found","message":"File: /home/runner/work/ArteOdyssey/ArteOdyssey/packages/arte-odyssey/src/components/buttons/link-button/link-button.tsx\nError:\nNo suitable component definition found.\nYou can debug your component file in this playground: https://react-docgen.dev/playground\nCode:\nimport type { ReactNode } from 'react';\nimport { cn } from './../../../helpers/cn';\nimport { isInternalRoute } from './../../../helpers/is-internal-route';\n\nexport const LinkButton = ({\n children,\n size = 'md',\n color = 'primary',\n variant = 'contained',\n href,\n startIcon,\n endIcon,\n active = false,\n openInNewTab = false,\n renderAnchor = ({ children, ...props }) => {children},\n}: {\n variant?: 'contained' | 'outlined' | 'skeleton';\n size?: 'sm' | 'md' | 'lg';\n color?: 'primary' | 'gray';\n href: T;\n startIcon?: ReactNode;\n endIcon?: ReactNode;\n active?: boolean;\n openInNewTab?: boolean;\n children: string;\n renderAnchor?: (props: {\n 'aria-label'?: string;\n href: NoInfer;\n className: string;\n target?: string;\n rel?: string;\n children: ReactNode;\n }) => ReactNode;\n}) => {\n const type = isInternalRoute(href) && !openInNewTab ? 'internal' : 'external';\n const props = type === 'internal' ? {} : { target: '_blank', rel: 'noopener noreferrer' };\n const className = cn(\n 'rounded-full border-2 text-center font-bold transition-colors',\n {\n 'border-transparent bg-primary-bg text-fg hover:bg-primary-bg/90 active:bg-primary-bg/80':\n variant === 'contained' && color === 'primary',\n 'border-transparent bg-bg-subtle text-fg-base hover:bg-bg-mute active:bg-bg-emphasize':\n variant === 'contained' && color === 'gray',\n 'border-primary-border bg-bg-base text-primary-fg hover:bg-bg-subtle active:bg-bg-emphasize':\n variant === 'outlined' && color === 'primary',\n 'border-border-base bg-bg-base text-fg-base hover:bg-bg-subtle active:bg-bg-emphasize':\n variant === 'outlined' && color === 'gray',\n 'border-transparent bg-transparent text-fg-mute hover:text-fg-base active:text-fg-base':\n variant === 'skeleton',\n },\n 'focus-visible:border-transparent focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-border-info',\n size === 'sm' && 'px-3 py-1 text-sm',\n size === 'md' && 'px-4 py-2 text-md',\n size === 'lg' && 'px-6 py-3 text-lg',\n Boolean(startIcon ?? endIcon) && 'flex items-center gap-2',\n Boolean(endIcon) && 'justify-between',\n active && 'text-fg-info hover:text-fg-info active:text-fg-info',\n );\n return renderAnchor({\n href,\n className,\n 'aria-label': children,\n ...props,\n children: (\n <>\n {startIcon}\n {children}\n {endIcon}\n \n ),\n });\n};\n"}},"components-data-display-accordion":{"id":"components-data-display-accordion","name":"Accordion.Root","path":"./src/components/data-display/accordion/accordion.stories.tsx","stories":[{"id":"components-data-display-accordion--primary","name":"Primary","snippet":"const Primary = () => {\n return (\n \n \n

\n \n

雨ニモマケズ

\n \n

\n \n

雨ニモマケズ

\n

風ニモマケズ

\n

雪ニモ夏ノ暑サニモマケヌ

\n

丈夫ナカラダヲモチ

\n

慾ハナク

\n

決シテ瞋ラズ

\n

イツモシヅカニワラッテヰル

\n

一日ニ玄米四合ト

\n

味噌ト少シノ野菜ヲタベ

\n

アラユルコトヲ

\n

ジブンヲカンジョウニ入レズニ

\n

ヨクミキキシワカリ

\n

ソシテワスレズ

\n

野原ノ松ノ林ノ

\n

小サナ萓ブキノ小屋ニヰテ

\n

東ニ病気ノコドモアレバ

\n

行ッテ看病シテヤリ

\n

西ニツカレタ母アレバ

\n

行ッテソノ稲ノ朿ヲ［＃「朿ヲ」はママ］負ヒ

\n

南ニ死ニサウナ人アレバ

\n

行ッテコハガラナクテモイヽトイヒ

\n

北ニケンクヮヤソショウガアレバ

\n

ツマラナイカラヤメロトイヒ

\n

ヒドリノトキハナミダヲナガシ

\n

サムサノナツハオロオロアルキ

\n

ミンナニデクノボートヨバレ

\n

ホメラレモセズ

\n

クニモサレズ

\n

サウイフモノニ

\n

ワタシハナリタイ

\n \n \n \n

\n \n

あどけない話

\n \n

\n \n

智恵子は東京に空が無いといふ、

\n

ほんとの空が見たいといふ。

\n

私は驚いて空を見る。

\n

桜若葉の間に在るのは、

\n

切つても切れない

\n

むかしなじみのきれいな空だ。

\n

どんよりけむる地平のぼかしは

\n

うすもも色の朝のしめりだ。

\n

智恵子は遠くを見ながら言ふ。

\n

阿多多羅山あたたらやまの山の上に

\n

毎日出てゐる青い空が

\n

智恵子のほんとの空だといふ。

\n

あどけない空の話である。

\n \n \n \n

\n \n

かなしみ

\n \n

\n \n
\n
\n

あの青い空の波の音が聞えるあたりに

\n

何かとんでもないおとし物を

\n

僕はしてきてしまったらしい

\n
\n
\n

透明な過去の駅で

\n

遺失物係の前に立ったら

\n

僕は余計に悲しくなってしまった

\n
\n
\n \n \n \n );\n};"}],"import":"import { Accordion } from \"@k8o/arte-odyssey\";","jsDocTags":{},"error":{"name":"No component definition found","message":"File: /home/runner/work/ArteOdyssey/ArteOdyssey/packages/arte-odyssey/src/components/data-display/accordion/index.ts\nError:\nNo suitable component definition found.\nYou can debug your component file in this playground: https://react-docgen.dev/playground\nCode:\nimport { Accordion as Root } from './accordion';\nimport { AccordionButton } from './accordion-button';\nimport { AccordionItem } from './accordion-item';\nimport { AccordionPanel } from './accordion-panel';\n\nexport const Accordion = {\n Root,\n Button: AccordionButton,\n Item: AccordionItem,\n Panel: AccordionPanel,\n} as const;\n"}},"components-data-display-avatar":{"id":"components-data-display-avatar","name":"Avatar","path":"./src/components/data-display/avatar/avatar.stories.tsx","stories":[{"id":"components-data-display-avatar--default","name":"Default","snippet":"const Default = () => ;"},{"id":"components-data-display-avatar--with-image","name":"With Image","snippet":"const WithImage = () => ;"},{"id":"components-data-display-avatar--large","name":"Large","snippet":"const Large = () => ;"}],"import":"import { Avatar } from \"@k8o/arte-odyssey\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"Avatar","definedInFile":"/home/runner/work/ArteOdyssey/ArteOdyssey/packages/arte-odyssey/src/components/data-display/avatar/avatar.tsx","actualName":"Avatar","exportName":"Avatar","props":{"alt":{"required":false,"tsType":{"name":"string"},"description":""},"fallback":{"required":false,"tsType":{"name":"string"},"description":""},"name":{"required":false,"tsType":{"name":"string"},"description":""},"size":{"required":false,"tsType":{"name":"union","raw":"'sm' | 'md' | 'lg'","elements":[{"name":"literal","value":"'sm'"},{"name":"literal","value":"'md'"},{"name":"literal","value":"'lg'"}]},"description":"","defaultValue":{"value":"'md'","computed":false}},"src":{"required":false,"tsType":{"name":"string"},"description":""}}}},"components-data-display-badge":{"id":"components-data-display-badge","name":"Badge","path":"./src/components/data-display/badge/badge.stories.tsx","stories":[{"id":"components-data-display-badge--default","name":"Default","snippet":"const Default = () => ;"},{"id":"components-data-display-badge--tones","name":"Tones","snippet":"const Tones = () => (\n
\n \n \n \n \n \n
\n);"},{"id":"components-data-display-badge--outline","name":"Outline","snippet":"const Outline = () => ;"}],"import":"import { Badge } from \"@k8o/arte-odyssey\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"Badge","definedInFile":"/home/runner/work/ArteOdyssey/ArteOdyssey/packages/arte-odyssey/src/components/data-display/badge/badge.tsx","actualName":"Badge","exportName":"Badge","props":{"text":{"required":true,"tsType":{"name":"string"},"description":""},"size":{"required":false,"tsType":{"name":"union","raw":"'sm' | 'md'","elements":[{"name":"literal","value":"'sm'"},{"name":"literal","value":"'md'"}]},"description":"","defaultValue":{"value":"'md'","computed":false}},"interactive":{"required":false,"tsType":{"name":"boolean"},"description":"","defaultValue":{"value":"false","computed":false}},"tone":{"required":false,"tsType":{"name":"union","raw":"'neutral' | 'info' | 'success' | 'warning' | 'error'","elements":[{"name":"literal","value":"'neutral'"},{"name":"literal","value":"'info'"},{"name":"literal","value":"'success'"},{"name":"literal","value":"'warning'"},{"name":"literal","value":"'error'"}]},"description":"","defaultValue":{"value":"'neutral'","computed":false}},"variant":{"required":false,"tsType":{"name":"union","raw":"'solid' | 'outline'","elements":[{"name":"literal","value":"'solid'"},{"name":"literal","value":"'outline'"}]},"description":"","defaultValue":{"value":"'solid'","computed":false}}}}},"components-data-display-baseline-status":{"id":"components-data-display-baseline-status","name":"BaselineStatus","path":"./src/components/data-display/baseline-status/baseline-status.stories.tsx","stories":[{"id":"components-data-display-baseline-status--primary","name":"Primary","snippet":"const Primary = () => ;"}],"import":"import { BaselineStatus } from \"@k8o/arte-odyssey\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"BaselineStatus","definedInFile":"/home/runner/work/ArteOdyssey/ArteOdyssey/packages/arte-odyssey/src/components/data-display/baseline-status/baseline-status.tsx","actualName":"BaselineStatus","exportName":"BaselineStatus","props":{"featureId":{"required":true,"tsType":{"name":"string"},"description":""}}}},"components-data-display-card":{"id":"components-data-display-card","name":"Card","path":"./src/components/data-display/card/card.stories.tsx","stories":[{"id":"components-data-display-card--primary","name":"Primary","snippet":"const Primary = () => (\n \n
\n

記事タイトル

\n

\n これはカードコンポーネントの説明文です。コンテンツを囲んで視覚的にグループ化します。\n

\n
\n \n);"},{"id":"components-data-display-card--secondary","name":"Secondary","snippet":"const Secondary = () => (\n \n
\n

セカンダリバリエーションは背景色が少し暗くなります。

\n
\n \n);"},{"id":"components-data-display-card--interactive","name":"Interactive","snippet":"const Interactive = () => (\n
\n \n \n

カード全体がリンク

\n

カード全体をクリックして遷移します。

\n \n \n \n
\n

カード内にボタンとリンク

\n

カード内にインタラクティブ要素を配置できます。

\n \n
\n \n
\n);"},{"id":"components-data-display-card--bordered","name":"Bordered","snippet":"const Bordered = () => (\n \n
\n

ボーダースタイル

\n

シャドウの代わりにボーダーで区切るスタイルです。

\n
\n \n);"},{"id":"components-data-display-card--fit-width","name":"Fit Width","snippet":"const FitWidth = () => (\n \n
\n

幅がコンテンツに合わせて調整されます。

\n
\n \n);"}],"import":"import { Button, Card, InteractiveCard, LinkButton } from \"@k8o/arte-odyssey\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"Card","definedInFile":"/home/runner/work/ArteOdyssey/ArteOdyssey/packages/arte-odyssey/src/components/data-display/card/card.tsx","actualName":"Card","exportName":"Card","props":{"variant":{"defaultValue":{"value":"'primary'","computed":false},"required":false},"width":{"defaultValue":{"value":"'full'","computed":false},"required":false},"appearance":{"defaultValue":{"value":"'shadow'","computed":false},"required":false}}}},"components-data-display-code":{"id":"components-data-display-code","name":"Code","path":"./src/components/data-display/code/code.stories.tsx","stories":[{"id":"components-data-display-code--default","name":"Default","snippet":"const Default = () => const example = \"Hello World\";;"},{"id":"components-data-display-code--hsl-color","name":"HSL Color","snippet":"const HSLColor = () => hsl(280, 70%, 50%);"},{"id":"components-data-display-code--rgb-color","name":"RGB Color","snippet":"const RGBColor = () => rgb(255, 0, 128);"},{"id":"components-data-display-code--hex-color","name":"Hex Color","snippet":"const HexColor = () => #ff0080;"},{"id":"components-data-display-code--named-color","name":"Named Color","snippet":"const NamedColor = () => background-color: red;"},{"id":"components-data-display-code--complex-css","name":"Complex CSS","snippet":"const ComplexCSS = () => background-color: hsl(calc(sign(var(--x)) * 80 + 200), 70%, 50%);"},{"id":"components-data-display-code--multiple-colors","name":"Multiple Colors","snippet":"const MultipleColors = () => border: 1px solid #ff0080; background: hsl(280, 70%, 50%); color: rgb(255, 255, 255);;"},{"id":"components-data-display-code--gradient-with-multiple-colors","name":"Gradient With Multiple Colors","snippet":"const GradientWithMultipleColors = () => background: linear-gradient(45deg, #ff0080, hsl(280, 70%, 50%), rgba(255, 0, 128, 0.5));"}],"import":"import { Code } from \"@k8o/arte-odyssey\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"Code","definedInFile":"/home/runner/work/ArteOdyssey/ArteOdyssey/packages/arte-odyssey/src/components/data-display/code/code.tsx","actualName":"Code","exportName":"Code","props":{"children":{"required":true,"tsType":{"name":"string"},"description":""}}}},"components-data-display-heading":{"id":"components-data-display-heading","name":"Heading","path":"./src/components/data-display/heading/heading.stories.tsx","stories":[{"id":"components-data-display-heading--h-1","name":"H 1","snippet":"const H1 = () => k8o;"},{"id":"components-data-display-heading--h-2","name":"H 2","snippet":"const H2 = () => k8o;"},{"id":"components-data-display-heading--h-3","name":"H 3","snippet":"const H3 = () => k8o;"},{"id":"components-data-display-heading--h-4","name":"H 4","snippet":"const H4 = () => k8o;"},{"id":"components-data-display-heading--h-5","name":"H 5","snippet":"const H5 = () => k8o;"},{"id":"components-data-display-heading--h-6","name":"H 6","snippet":"const H6 = () => k8o;"}],"import":"import { Heading } from \"@k8o/arte-odyssey\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"Heading","definedInFile":"/home/runner/work/ArteOdyssey/ArteOdyssey/packages/arte-odyssey/src/components/data-display/heading/heading.tsx","actualName":"Heading","exportName":"Heading"}},"components-data-display-table":{"id":"components-data-display-table","name":"Table.Root","path":"./src/components/data-display/table/table.stories.tsx","stories":[{"id":"components-data-display-table--default","name":"Default","snippet":"const Default = () => {\n return (\n \n \n \n Feature\n Status\n Coverage\n \n \n \n \n Avatar\n \n \n \n 100%\n \n \n Badge\n \n \n \n 100%\n \n \n Table\n \n \n \n 0%\n \n \n \n );\n};"},{"id":"components-data-display-table--empty","name":"Empty","snippet":"const Empty = () => {\n return (\n \n \n \n Name\n Role\n Projects\n \n \n \n No records have been added yet.\n \n \n );\n};"},{"id":"components-data-display-table--with-caption","name":"With Caption","snippet":"const WithCaption = () => {\n return (\n \n Quarterly shipping overview\n \n \n Region\n Orders\n \n \n \n \n Japan\n 128\n \n \n North America\n 96\n \n \n \n );\n};"}],"import":"import { Badge, Table } from \"@k8o/arte-odyssey\";","jsDocTags":{},"error":{"name":"No component definition found","message":"File: /home/runner/work/ArteOdyssey/ArteOdyssey/packages/arte-odyssey/src/components/data-display/table/table.tsx\nError:\nNo suitable component definition found.\nYou can debug your component file in this playground: https://react-docgen.dev/playground\nCode:\nimport type { FC, PropsWithChildren, ReactNode } from 'react';\nimport { cn } from '../../../helpers/cn';\n\ntype RootProps = PropsWithChildren<{\n className?: string;\n containerClassName?: string;\n}>;\n\ntype RowProps = PropsWithChildren<{\n className?: string;\n interactive?: boolean;\n}>;\n\ntype CellAlign = 'left' | 'center' | 'right';\n\ntype HeaderCellProps = PropsWithChildren<{\n align?: CellAlign;\n className?: string;\n}>;\n\ntype CellProps = PropsWithChildren<{\n align?: CellAlign;\n className?: string;\n colSpan?: number;\n tone?: 'default' | 'muted';\n}>;\n\ntype SectionProps = PropsWithChildren<{\n className?: string;\n}>;\n\ntype CaptionProps = PropsWithChildren<{\n className?: string;\n}>;\n\ntype EmptyStateProps = {\n colSpan: number;\n children: ReactNode;\n};\n\nconst Root: FC = ({ children, className, containerClassName }) => {\n return (\n \n \n {children}\n
\n \n );\n};\n\nconst Head: FC = ({ children, className }) => {\n return {children};\n};\n\nconst Body: FC = ({ children, className }) => {\n return {children};\n};\n\nconst Row: FC = ({ children, className, interactive = false }) => {\n return (\n \n {children}\n \n );\n};\n\nconst HeaderCell: FC = ({ align = 'left', children, className }) => {\n return (\n \n {children}\n \n );\n};\n\nconst Cell: FC = ({\n align = 'left',\n children,\n className,\n colSpan,\n tone = 'default',\n}) => {\n return (\n \n {children}\n \n );\n};\n\nconst Caption: FC = ({ children, className }) => {\n return (\n \n {children}\n \n );\n};\n\nconst EmptyState: FC = ({ children, colSpan }) => {\n return (\n \n \n {children}\n \n \n );\n};\n\nexport const Table = {\n Root,\n Head,\n Body,\n Row,\n HeaderCell,\n Cell,\n Caption,\n EmptyState,\n} as const;\n"}},"components-feedback-alert":{"id":"components-feedback-alert","name":"Alert","path":"./src/components/feedback/alert/alert.stories.tsx","stories":[{"id":"components-feedback-alert--success","name":"Success","snippet":"const Success = () => ;"},{"id":"components-feedback-alert--info","name":"Info","snippet":"const Info = () => ;"},{"id":"components-feedback-alert--warning","name":"Warning","snippet":"const Warning = () => ;"},{"id":"components-feedback-alert--error","name":"Error","snippet":"const Error = () => ;"},{"id":"components-feedback-alert--array-message","name":"Array Message","snippet":"const ArrayMessage = () => ;"},{"id":"components-feedback-alert--single-array-message","name":"Single Array Message","snippet":"const SingleArrayMessage = () => ;"}],"import":"import { Alert } from \"@k8o/arte-odyssey\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"Alert","definedInFile":"/home/runner/work/ArteOdyssey/ArteOdyssey/packages/arte-odyssey/src/components/feedback/alert/alert.tsx","actualName":"Alert","exportName":"Alert","props":{"status":{"required":true,"tsType":{"name":"union","raw":"'success' | 'info' | 'warning' | 'error'","elements":[{"name":"literal","value":"'success'"},{"name":"literal","value":"'info'"},{"name":"literal","value":"'warning'"},{"name":"literal","value":"'error'"}]},"description":""},"message":{"required":true,"tsType":{"name":"union","raw":"string | string[]","elements":[{"name":"string"},{"name":"Array","elements":[{"name":"string"}],"raw":"string[]"}]},"description":""}}}},"components-feedback-progress":{"id":"components-feedback-progress","name":"Progress","path":"./src/components/feedback/progress/progress.stories.tsx","stories":[{"id":"components-feedback-progress--primary","name":"Primary","snippet":"const Primary = () => ;"}],"import":"import { Progress } from \"@k8o/arte-odyssey\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"Progress","definedInFile":"/home/runner/work/ArteOdyssey/ArteOdyssey/packages/arte-odyssey/src/components/feedback/progress/progress.tsx","actualName":"Progress","exportName":"Progress","props":{"progress":{"required":true,"tsType":{"name":"number"},"description":""},"maxProgress":{"required":true,"tsType":{"name":"number"},"description":""},"minProgress":{"required":false,"tsType":{"name":"number"},"description":"","defaultValue":{"value":"0","computed":false}},"label":{"required":false,"tsType":{"name":"string"},"description":""}}}},"components-feedback-skeleton":{"id":"components-feedback-skeleton","name":"Skeleton","path":"./src/components/feedback/skeleton/skeleton.stories.tsx","stories":[{"id":"components-feedback-skeleton--default","name":"Default","snippet":"const Default = () => ;"},{"id":"components-feedback-skeleton--circle","name":"Circle","snippet":"const Circle = () => ;"}],"import":"import { Skeleton } from \"@k8o/arte-odyssey\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"Skeleton","definedInFile":"/home/runner/work/ArteOdyssey/ArteOdyssey/packages/arte-odyssey/src/components/feedback/skeleton/skeleton.tsx","actualName":"Skeleton","exportName":"Skeleton","props":{"animate":{"required":false,"tsType":{"name":"boolean"},"description":"","defaultValue":{"value":"true","computed":false}},"shape":{"required":false,"tsType":{"name":"union","raw":"'rect' | 'circle'","elements":[{"name":"literal","value":"'rect'"},{"name":"literal","value":"'circle'"}]},"description":"","defaultValue":{"value":"'rect'","computed":false}},"size":{"required":false,"tsType":{"name":"union","raw":"'sm' | 'md' | 'lg'","elements":[{"name":"literal","value":"'sm'"},{"name":"literal","value":"'md'"},{"name":"literal","value":"'lg'"}]},"description":"","defaultValue":{"value":"'md'","computed":false}}}}},"components-feedback-spinner":{"id":"components-feedback-spinner","name":"Spinner","path":"./src/components/feedback/spinner/spinner.stories.tsx","stories":[{"id":"components-feedback-spinner--default","name":"Default","snippet":"const Default = () => ;"},{"id":"components-feedback-spinner--sizes","name":"Sizes","snippet":"const Sizes = () => (\n
\n \n \n \n
\n);"}],"import":"import { Spinner } from \"@k8o/arte-odyssey\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"Spinner","definedInFile":"/home/runner/work/ArteOdyssey/ArteOdyssey/packages/arte-odyssey/src/components/feedback/spinner/spinner.tsx","actualName":"Spinner","exportName":"Spinner","props":{"label":{"required":false,"tsType":{"name":"string"},"description":"","defaultValue":{"value":"'Loading'","computed":false}},"size":{"required":false,"tsType":{"name":"union","raw":"'sm' | 'md' | 'lg'","elements":[{"name":"literal","value":"'sm'"},{"name":"literal","value":"'md'"},{"name":"literal","value":"'lg'"}]},"description":"","defaultValue":{"value":"'md'","computed":false}}}}},"components-feedback-toast":{"id":"components-feedback-toast","name":"ToastProvider","path":"./src/components/feedback/toast/toast.stories.tsx","stories":[{"id":"components-feedback-toast--primary","name":"Primary","snippet":"const Primary = () => {\n const { onOpen } = useToast();\n return (\n {\n onOpen('success', 'トーストを呼びました');\n }}\n >\n トーストを呼ぶ\n \n );\n};"},{"id":"components-feedback-toast--toast-success","name":"Toast Success","snippet":"const ToastSuccess = () => ;"},{"id":"components-feedback-toast--toas-info","name":"Toas Info","snippet":"const ToasInfo = () => ;"},{"id":"components-feedback-toast--toast-error","name":"Toast Error","snippet":"const ToastError = () => ;"},{"id":"components-feedback-toast--toast-warning","name":"Toast Warning","snippet":"const ToastWarning = () => ;"}],"import":"import { Button, Toast, ToastProvider } from \"@k8o/arte-odyssey\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"ToastProvider","definedInFile":"/home/runner/work/ArteOdyssey/ArteOdyssey/packages/arte-odyssey/src/components/feedback/toast/provider.tsx","actualName":"ToastProvider","exportName":"ToastProvider","props":{"portalRef":{"required":false,"tsType":{"name":"RefObject","elements":[{"name":"union","raw":"HTMLElement | null","elements":[{"name":"HTMLElement"},{"name":"null"}]}],"raw":"RefObject"},"description":"","defaultValue":{"value":"null","computed":false}},"position":{"required":false,"tsType":{"name":"union","raw":"'fixed' | 'absolute'","elements":[{"name":"literal","value":"'fixed'"},{"name":"literal","value":"'absolute'"}]},"description":"","defaultValue":{"value":"'fixed'","computed":false}}}}},"components-form-autocomplete":{"id":"components-form-autocomplete","name":"Autocomplete","path":"./src/components/form/autocomplete/autocomplete.stories.tsx","stories":[{"id":"components-form-autocomplete--default","name":"Default","snippet":"const Default = ({ id, describedbyId, isInvalid, isDisabled, isRequired }) => {\n const options = [\n { value: '2', label: '2進数' },\n { value: '8', label: '8進数' },\n { value: '10', label: '10進数' },\n { value: '16', label: '16進数' },\n ];\n const [value, setValue] = useState([]);\n\n return (\n \n );\n};"},{"id":"components-form-autocomplete--invalid","name":"Invalid","snippet":"const Invalid = ({ id, describedbyId, isInvalid, isDisabled, isRequired }) => {\n const options = [\n { value: '2', label: '2進数' },\n { value: '8', label: '8進数' },\n { value: '10', label: '10進数' },\n { value: '16', label: '16進数' },\n ];\n const [value, setValue] = useState([]);\n\n return (\n \n );\n};"},{"id":"components-form-autocomplete--disabled","name":"Disabled","snippet":"const Disabled = ({ id, describedbyId, isInvalid, isDisabled, isRequired }) => {\n const options = [\n { value: '2', label: '2進数' },\n { value: '8', label: '8進数' },\n { value: '10', label: '10進数' },\n { value: '16', label: '16進数' },\n ];\n const [value, setValue] = useState([]);\n\n return (\n \n );\n};"}],"import":"import { Autocomplete } from \"@k8o/arte-odyssey\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"Autocomplete","definedInFile":"/home/runner/work/ArteOdyssey/ArteOdyssey/packages/arte-odyssey/src/components/form/autocomplete/autocomplete.tsx","actualName":"Autocomplete","exportName":"Autocomplete","props":{"id":{"required":true,"tsType":{"name":"string"},"description":""},"name":{"required":false,"tsType":{"name":"string"},"description":""},"describedbyId":{"required":true,"tsType":{"name":"union","raw":"string | undefined","elements":[{"name":"string"},{"name":"undefined"}]},"description":""},"isInvalid":{"required":true,"tsType":{"name":"boolean"},"description":""},"isDisabled":{"required":true,"tsType":{"name":"boolean"},"description":""},"isRequired":{"required":true,"tsType":{"name":"boolean"},"description":""},"options":{"required":true,"tsType":{"name":"unknown"},"description":""}}}},"components-form-checkbox-card":{"id":"components-form-checkbox-card","name":"CheckboxCard","path":"./src/components/form/checkbox-card/checkbox-card.stories.tsx","stories":[{"id":"components-form-checkbox-card--default","name":"Default","snippet":"const Default = (props) => {\n const [value, setValue] = useState(['comments']);\n\n return (\n
\n

\n Enable collaboration features\n

\n \n
\n );\n};"},{"id":"components-form-checkbox-card--default-value","name":"Default Value","snippet":"const DefaultValue = (props) => {\n return (\n
\n

\n Enable collaboration features\n

\n \n
\n );\n};"},{"id":"components-form-checkbox-card--disabled","name":"Disabled","error":{"name":"SyntaxError","message":"Expected render to be an arrow function or function expression\n 94 | defaultValue: ['comments'],\n 95 | },\n> 96 | render: DefaultValue.render,\n | ^^^^^^^^^^^^^^^^^^^\n 97 | };\n 98 |"}}],"import":"import { CheckboxCard } from \"@k8o/arte-odyssey\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"CheckboxCard","definedInFile":"/home/runner/work/ArteOdyssey/ArteOdyssey/packages/arte-odyssey/src/components/form/checkbox-card/checkbox-card.tsx","actualName":"CheckboxCard","exportName":"CheckboxCard","props":{"labelId":{"required":false,"tsType":{"name":"string"},"description":""},"name":{"required":false,"tsType":{"name":"string"},"description":""},"isDisabled":{"required":true,"tsType":{"name":"boolean"},"description":""},"isInvalid":{"required":false,"tsType":{"name":"boolean"},"description":"","defaultValue":{"value":"false","computed":false}},"options":{"required":true,"tsType":{"name":"unknown"},"description":""}}}},"components-form-checkbox-group":{"id":"components-form-checkbox-group","name":"CheckboxGroup","path":"./src/components/form/checkbox-group/checkbox-group.stories.tsx","stories":[{"id":"components-form-checkbox-group--default","name":"Default","snippet":"const Default = () => {\n const [value, setValue] = useState(['react']);\n\n return (\n \n \n \n \n \n );\n};"},{"id":"components-form-checkbox-group--disabled","name":"Disabled","snippet":"const Disabled = () => (\n \n \n \n \n \n);"}],"import":"import { Checkbox, CheckboxGroup } from \"@k8o/arte-odyssey\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"Root","definedInFile":"/home/runner/work/ArteOdyssey/ArteOdyssey/packages/arte-odyssey/src/components/form/checkbox-group/checkbox-group.tsx","actualName":"Root","props":{"isDisabled":{"defaultValue":{"value":"false","computed":false},"required":false},"isInvalid":{"defaultValue":{"value":"false","computed":false},"required":false},"isRequired":{"defaultValue":{"value":"false","computed":false},"required":false}}}},"components-form-checkbox":{"id":"components-form-checkbox","name":"Checkbox","path":"./src/components/form/checkbox/checkbox.stories.tsx","stories":[{"id":"components-form-checkbox--default","name":"Default","snippet":"const Default = (props) => {\n const [value, setValue] = useState(false);\n\n return (\n {\n setValue(e.target.checked);\n }}\n value={value}\n />\n );\n};"},{"id":"components-form-checkbox--disabled","name":"Disabled","snippet":"const Disabled = () => ;"}],"import":"import { Checkbox } from \"@k8o/arte-odyssey\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"Checkbox","definedInFile":"/home/runner/work/ArteOdyssey/ArteOdyssey/packages/arte-odyssey/src/components/form/checkbox/checkbox.tsx","actualName":"Checkbox","exportName":"Checkbox","props":{"name":{"required":false,"tsType":{"name":"string"},"description":""},"itemValue":{"required":false,"tsType":{"name":"string"},"description":""},"isDisabled":{"required":false,"tsType":{"name":"boolean"},"description":"","defaultValue":{"value":"false","computed":false}},"label":{"required":true,"tsType":{"name":"string"},"description":""}}}},"components-form-file-field":{"id":"components-form-file-field","name":"FileField.Root","path":"./src/components/form/file-field/file-field.stories.tsx","stories":[{"id":"components-form-file-field--default","name":"Default","snippet":"const Default = () => {\n return (\n \n (\n \n )} />\n \n \n );\n};"},{"id":"components-form-file-field--multiple","name":"Multiple","snippet":"const Multiple = () => {\n return (\n \n (\n \n )} />\n \n \n );\n};"},{"id":"components-form-file-field--max-files","name":"Max Files","snippet":"const MaxFiles = () => {\n return (\n \n (\n \n )} />\n \n \n );\n};"},{"id":"components-form-file-field--image-only","name":"Image Only","snippet":"const ImageOnly = () => {\n return (\n \n (\n \n )} />\n \n \n );\n};"},{"id":"components-form-file-field--webkit-directory","name":"Webkit Directory","snippet":"const WebkitDirectory = () => {\n return (\n \n (\n \n )} />\n \n \n );\n};"},{"id":"components-form-file-field--has-clear-button","name":"Has Clear Button","snippet":"const HasClearButton = () => {\n return (\n \n (\n \n )} />\n \n \n );\n};"},{"id":"components-form-file-field--show-webkit-relative-path","name":"Show Webkit Relative Path","snippet":"const ShowWebkitRelativePath = () => {\n return (\n \n (\n \n )} />\n \n \n );\n};"},{"id":"components-form-file-field--only-trigger","name":"Only Trigger","snippet":"const OnlyTrigger = () => {\n return (\n \n (\n \n )} />\n \n );\n};"}],"import":"import { Button, FileField } from \"@k8o/arte-odyssey\";","jsDocTags":{},"error":{"name":"No component definition found","message":"File: /home/runner/work/ArteOdyssey/ArteOdyssey/packages/arte-odyssey/src/components/form/file-field/file-field.tsx\nError:\nNo suitable component definition found.\nYou can debug your component file in this playground: https://react-docgen.dev/playground\nCode:\n'use client';\n\nimport type { ChangeEvent, ChangeEventHandler, FC, PropsWithChildren, ReactElement } from 'react';\nimport { createContext, use, useCallback, useId, useMemo, useRef, useState } from 'react';\nimport { uuidV4 } from '../../../helpers/uuid-v4';\nimport { IconButton } from '../../buttons/icon-button';\nimport { CloseIcon } from '../../icons';\n\ntype AcceptedFile = {\n file: File;\n id: string;\n};\n\ntype FileFieldContext = {\n isDisabled: boolean;\n isInvalid: boolean;\n acceptedFiles: AcceptedFile[];\n onFileDelete: (id: string) => void;\n openFilePicker: () => void;\n};\n\nconst FileFieldContext = createContext(null);\n\nconst FileFieldProvider = FileFieldContext;\n\nconst useFileFieldContext = (): FileFieldContext => {\n const fileField = use(FileFieldContext);\n if (!fileField) {\n throw new Error('useFileFieldContext must be used within a FileField.Root');\n }\n\n return fileField;\n};\n\nconst Root = ({\n children,\n id,\n name,\n describedbyId,\n isDisabled = false,\n isInvalid = false,\n isRequired = false,\n accept,\n multiple = false,\n maxFiles,\n onChange,\n webkitDirectory = false,\n}: PropsWithChildren<{\n id?: string;\n name?: string;\n describedbyId?: string | undefined;\n isDisabled?: boolean;\n isInvalid?: boolean;\n isRequired?: boolean;\n accept?: string;\n multiple?: boolean;\n maxFiles?: number;\n defaultValue?: File[];\n onChange?: ChangeEventHandler;\n webkitDirectory?: boolean;\n}>) => {\n const generatedId = useId();\n const inputRef = useRef(null);\n\n const [acceptedFiles, setAcceptedFiles] = useState([]);\n\n const onFilesChange = useCallback(\n (event: ChangeEvent) => {\n onChange?.(event);\n\n const files = Array.from(event.target.files ?? []);\n const newFiles = files.map((file) => ({ file, id: uuidV4() }));\n const updatedFiles =\n multiple || webkitDirectory\n ? [...acceptedFiles, ...newFiles].slice(0, maxFiles ?? Number.POSITIVE_INFINITY)\n : newFiles.slice(0, 1);\n\n setAcceptedFiles(updatedFiles);\n },\n [acceptedFiles, multiple, maxFiles, onChange, webkitDirectory],\n );\n\n const onFileDelete = useCallback(\n (fileId: string) => {\n const updatedFiles = acceptedFiles.filter((f) => f.id !== fileId);\n setAcceptedFiles(updatedFiles);\n\n if (inputRef.current && onChange) {\n const dataTransfer = new DataTransfer();\n for (const { file } of updatedFiles) {\n dataTransfer.items.add(file);\n }\n inputRef.current.files = dataTransfer.files;\n\n const event = new Event('change', { bubbles: true });\n Object.defineProperty(event, 'target', {\n writable: false,\n value: inputRef.current,\n });\n onChange(event as unknown as ChangeEvent);\n }\n },\n [acceptedFiles, onChange],\n );\n\n const openFilePicker = useCallback(() => {\n inputRef.current?.click();\n }, []);\n\n const contextValue = useMemo(\n () => ({\n isDisabled,\n isInvalid,\n acceptedFiles,\n onFileDelete,\n openFilePicker,\n }),\n [isDisabled, isInvalid, acceptedFiles, onFileDelete, openFilePicker],\n );\n\n return (\n \n
\n \n {children}\n
\n \n );\n};\n\nconst Trigger: FC<{\n renderItem: (props: { onClick: () => void; disabled: boolean; invalid: boolean }) => ReactElement;\n}> = ({ renderItem }) => {\n const context = useFileFieldContext();\n return renderItem({\n onClick: context.openFilePicker,\n disabled: context.isDisabled,\n invalid: context.isInvalid,\n });\n};\n\nconst ItemList: FC<{\n showWebkitRelativePath?: boolean;\n clearable?: boolean;\n}> = ({ showWebkitRelativePath, clearable }) => {\n const { acceptedFiles, onFileDelete } = useFileFieldContext();\n\n if (acceptedFiles.length === 0) {\n return null;\n }\n\n return (\n
    \n {acceptedFiles.map((acceptedFile) => {\n const { file, id } = acceptedFile;\n const onDelete = () => onFileDelete(id);\n\n const sizeInKB = (file.size / 1024).toFixed(2);\n\n return (\n \n
    \n \n {showWebkitRelativePath ? file.webkitRelativePath : file.name}\n \n {sizeInKB} KB\n
    \n {clearable && (\n \n \n \n )}\n \n );\n })}\n
\n );\n};\n\nexport const FileField = {\n Root,\n Trigger,\n ItemList,\n} as const;\n"}},"components-form-form-control":{"id":"components-form-form-control","name":"FormControl","path":"./src/components/form/form-control/form-control.stories.tsx","stories":[{"id":"components-form-form-control--default","name":"Default","snippet":"const Default = () => {\n const [state, setState] = useState('');\n return (\n {\n setState(e.target.value);\n }}\n value={state}\n />\n );\n }}\n label=\"メールアドレス\" />;"},{"id":"components-form-form-control--help-text","name":"Help Text","snippet":"const HelpText = () => {\n const [state, setState] = useState('');\n return (\n {\n setState(e.target.value);\n }}\n value={state}\n />\n );\n }}\n label=\"メールアドレス\"\n helpText=\"RFCに準拠したメールアドレスを入力してください。\" />;"},{"id":"components-form-form-control--required","name":"Required","snippet":"const Required = () => {\n const [state, setState] = useState('');\n return (\n {\n setState(e.target.value);\n }}\n value={state}\n />\n );\n }}\n label=\"メールアドレス\"\n helpText=\"RFCに準拠したメールアドレスを入力してください。\"\n isRequired />;"},{"id":"components-form-form-control--error","name":"Error","snippet":"const Error = () => {\n const [state, setState] = useState('');\n return (\n {\n setState(e.target.value);\n }}\n value={state}\n />\n );\n }}\n label=\"メールアドレス\"\n helpText=\"RFCに準拠したメールアドレスを入力してください。\"\n isInvalid\n errorText=\"メールアドレスが正しくありません。\"\n isRequired />;"},{"id":"components-form-form-control--error-without-text","name":"Error Without Text","snippet":"const ErrorWithoutText = () => {\n const [state, setState] = useState('');\n return (\n {\n setState(e.target.value);\n }}\n value={state}\n />\n );\n }}\n label=\"メールアドレス\"\n helpText=\"RFCに準拠したメールアドレスを入力してください。\"\n isInvalid\n isRequired />;"},{"id":"components-form-form-control--disabled","name":"Disabled","snippet":"const Disabled = () => {\n const [state, setState] = useState('');\n return (\n {\n setState(e.target.value);\n }}\n value={state}\n />\n );\n }}\n label=\"メールアドレス\"\n helpText=\"RFCに準拠したメールアドレスを入力してください。\"\n isDisabled />;"},{"id":"components-form-form-control--legend","name":"Legend","snippet":"const Legend = () => {\n const [state, setState] = useState('');\n return (\n {\n setState(e.target.value);\n }}\n value={state}\n />\n );\n }}\n label=\"メールアドレス\"\n helpText=\"RFCに準拠したメールアドレスを入力してください。\"\n labelAs=\"legend\" />;"}],"import":"import { FormControl, TextField } from \"@k8o/arte-odyssey\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"FormControl","definedInFile":"/home/runner/work/ArteOdyssey/ArteOdyssey/packages/arte-odyssey/src/components/form/form-control/form-control.tsx","actualName":"FormControl","exportName":"FormControl","props":{"isDisabled":{"required":false,"tsType":{"name":"boolean"},"description":"","defaultValue":{"value":"false","computed":false}},"isInvalid":{"required":false,"tsType":{"name":"boolean"},"description":"","defaultValue":{"value":"false","computed":false}},"isRequired":{"required":false,"tsType":{"name":"boolean"},"description":"","defaultValue":{"value":"false","computed":false}},"label":{"required":true,"tsType":{"name":"string"},"description":""},"labelAs":{"required":false,"tsType":{"name":"union","raw":"'label' | 'legend'","elements":[{"name":"literal","value":"'label'"},{"name":"literal","value":"'legend'"}]},"description":"","defaultValue":{"value":"'label'","computed":false}},"helpText":{"required":false,"tsType":{"name":"string"},"description":""},"errorText":{"required":false,"tsType":{"name":"union","raw":"string | undefined","elements":[{"name":"string"},{"name":"undefined"}]},"description":""},"renderInput":{"required":true,"tsType":{"name":"signature","type":"function","raw":"(props: {\n id: string;\n describedbyId: string | undefined;\n labelId: string;\n isDisabled: boolean;\n isInvalid: boolean;\n isRequired: boolean;\n}) => ReactElement","signature":{"arguments":[{"type":{"name":"signature","type":"object","raw":"{\n id: string;\n describedbyId: string | undefined;\n labelId: string;\n isDisabled: boolean;\n isInvalid: boolean;\n isRequired: boolean;\n}","signature":{"properties":[{"key":"id","value":{"name":"string","required":true}},{"key":"describedbyId","value":{"name":"union","raw":"string | undefined","elements":[{"name":"string"},{"name":"undefined"}],"required":true}},{"key":"labelId","value":{"name":"string","required":true}},{"key":"isDisabled","value":{"name":"boolean","required":true}},{"key":"isInvalid","value":{"name":"boolean","required":true}},{"key":"isRequired","value":{"name":"boolean","required":true}}]}},"name":"props"}],"return":{"name":"ReactElement"}}},"description":""}}}},"components-form-number-field":{"id":"components-form-number-field","name":"NumberField","path":"./src/components/form/number-field/number-field.stories.tsx","stories":[{"id":"components-form-number-field--default","name":"Default","snippet":"const Default = () => ;"},{"id":"components-form-number-field--min-0-max-100","name":"Min 0 Max 100","snippet":"const Min0Max100 = () => ;"},{"id":"components-form-number-field--precision","name":"Precision","snippet":"const Precision = () => ;"},{"id":"components-form-number-field--placeholder","name":"Placeholder","snippet":"const Placeholder = () => ;"},{"id":"components-form-number-field--invalid","name":"Invalid","snippet":"const Invalid = () => ;"},{"id":"components-form-number-field--disabled","name":"Disabled","snippet":"const Disabled = () => ;"}],"import":"import { NumberField } from \"@k8o/arte-odyssey\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"NumberField","definedInFile":"/home/runner/work/ArteOdyssey/ArteOdyssey/packages/arte-odyssey/src/components/form/number-field/number-field.tsx","actualName":"NumberField","exportName":"NumberField","props":{"id":{"required":false,"tsType":{"name":"string"},"description":""},"name":{"required":false,"tsType":{"name":"string"},"description":""},"describedbyId":{"required":false,"tsType":{"name":"union","raw":"string | undefined","elements":[{"name":"string"},{"name":"undefined"}]},"description":""},"isInvalid":{"required":true,"tsType":{"name":"boolean"},"description":""},"isDisabled":{"required":true,"tsType":{"name":"boolean"},"description":""},"isRequired":{"required":true,"tsType":{"name":"boolean"},"description":""},"step":{"required":false,"tsType":{"name":"number"},"description":"","defaultValue":{"value":"1","computed":false}},"precision":{"required":false,"tsType":{"name":"number"},"description":"","defaultValue":{"value":"0","computed":false}},"max":{"required":false,"tsType":{"name":"number"},"description":"","defaultValue":{"value":"9007199254740991","computed":false}},"min":{"required":false,"tsType":{"name":"number"},"description":"","defaultValue":{"value":"-9007199254740991","computed":false}},"placeholder":{"required":false,"tsType":{"name":"string"},"description":""}}}},"components-form-password-input":{"id":"components-form-password-input","name":"PasswordInput","path":"./src/components/form/password-input/password-input.stories.tsx","stories":[{"id":"components-form-password-input--default","name":"Default","snippet":"const Default = () => ;"},{"id":"components-form-password-input--empty","name":"Empty","snippet":"const Empty = () => ;"},{"id":"components-form-password-input--invalid","name":"Invalid","snippet":"const Invalid = () => ;"},{"id":"components-form-password-input--disabled","name":"Disabled","snippet":"const Disabled = () => ;"}],"import":"import { PasswordInput } from \"@k8o/arte-odyssey\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"PasswordInput","definedInFile":"/home/runner/work/ArteOdyssey/ArteOdyssey/packages/arte-odyssey/src/components/form/password-input/password-input.tsx","actualName":"PasswordInput","exportName":"PasswordInput","props":{"id":{"required":false,"tsType":{"name":"string"},"description":""},"name":{"required":false,"tsType":{"name":"string"},"description":""},"describedbyId":{"required":false,"tsType":{"name":"union","raw":"string | undefined","elements":[{"name":"string"},{"name":"undefined"}]},"description":""},"isInvalid":{"required":true,"tsType":{"name":"boolean"},"description":""},"isDisabled":{"required":true,"tsType":{"name":"boolean"},"description":""},"isRequired":{"required":true,"tsType":{"name":"boolean"},"description":""},"placeholder":{"required":false,"tsType":{"name":"string"},"description":""},"autoComplete":{"required":false,"tsType":{"name":"string"},"description":"","defaultValue":{"value":"'current-password'","computed":false}},"showLabel":{"required":false,"tsType":{"name":"string"},"description":"","defaultValue":{"value":"'Show password'","computed":false}},"hideLabel":{"required":false,"tsType":{"name":"string"},"description":"","defaultValue":{"value":"'Hide password'","computed":false}}}}},"components-form-radio-card":{"id":"components-form-radio-card","name":"RadioCard","path":"./src/components/form/radio-card/radio-card.stories.tsx","stories":[{"id":"components-form-radio-card--default","name":"Default","snippet":"const Default = (props) => {\n const [value, setValue] = useState('pro');\n\n return (\n
\n

\n Choose a plan\n

\n {\n setValue(event.target.value);\n }}\n options={props.options}\n value={value}\n />\n
\n );\n};"},{"id":"components-form-radio-card--default-value","name":"Default Value","snippet":"const DefaultValue = (props) => {\n return (\n
\n

\n Choose a plan\n

\n \n
\n );\n};"},{"id":"components-form-radio-card--disabled","name":"Disabled","error":{"name":"SyntaxError","message":"Expected render to be an arrow function or function expression\n 96 | defaultValue: 'team',\n 97 | },\n> 98 | render: DefaultValue.render,\n | ^^^^^^^^^^^^^^^^^^^\n 99 | };\n 100 |"}}],"import":"import { RadioCard } from \"@k8o/arte-odyssey\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"RadioCard","definedInFile":"/home/runner/work/ArteOdyssey/ArteOdyssey/packages/arte-odyssey/src/components/form/radio-card/radio-card.tsx","actualName":"RadioCard","exportName":"RadioCard","props":{"labelId":{"required":true,"tsType":{"name":"string"},"description":""},"name":{"required":false,"tsType":{"name":"string"},"description":""},"isDisabled":{"required":true,"tsType":{"name":"boolean"},"description":""},"isInvalid":{"required":false,"tsType":{"name":"boolean"},"description":"","defaultValue":{"value":"false","computed":false}},"options":{"required":true,"tsType":{"name":"unknown"},"description":""}}}},"components-form-radio":{"id":"components-form-radio","name":"Radio","path":"./src/components/form/radio/radio.stories.tsx","stories":[{"id":"components-form-radio--default","name":"Default","snippet":"const Default = (props) => {\n const [value, setValue] = useState('react');\n const { defaultValue: _defaultValue, ...radioProps } = props;\n\n return (\n
\n

\n Framework\n

\n {\n setValue(event.target.value);\n }}\n value={value}\n />\n
\n );\n};"},{"id":"components-form-radio--disabled","name":"Disabled","snippet":"const Disabled = () => ;"}],"import":"import { Radio } from \"@k8o/arte-odyssey\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"Radio","definedInFile":"/home/runner/work/ArteOdyssey/ArteOdyssey/packages/arte-odyssey/src/components/form/radio/radio.tsx","actualName":"Radio","exportName":"Radio","props":{"labelId":{"required":true,"tsType":{"name":"string"},"description":""},"name":{"required":false,"tsType":{"name":"string"},"description":""},"isDisabled":{"required":true,"tsType":{"name":"boolean"},"description":""},"options":{"required":true,"tsType":{"name":"unknown"},"description":""}}}},"components-form-select":{"id":"components-form-select","name":"Select","path":"./src/components/form/select/select.stories.tsx","stories":[{"id":"components-form-select--default","name":"Default","snippet":"const Default = () => ;"},{"id":"components-form-select--invalid","name":"Invalid","snippet":"const Invalid = () => ;"},{"id":"components-form-select--disabled","name":"Disabled","snippet":"const Disabled = () => ;"}],"import":"import { Select } from \"@k8o/arte-odyssey\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"Select","definedInFile":"/home/runner/work/ArteOdyssey/ArteOdyssey/packages/arte-odyssey/src/components/form/select/select.tsx","actualName":"Select","exportName":"Select","props":{"id":{"required":true,"tsType":{"name":"string"},"description":""},"name":{"required":false,"tsType":{"name":"string"},"description":""},"describedbyId":{"required":true,"tsType":{"name":"union","raw":"string | undefined","elements":[{"name":"string"},{"name":"undefined"}]},"description":""},"isInvalid":{"required":true,"tsType":{"name":"boolean"},"description":""},"isDisabled":{"required":true,"tsType":{"name":"boolean"},"description":""},"isRequired":{"required":true,"tsType":{"name":"boolean"},"description":""},"options":{"required":true,"tsType":{"name":"unknown"},"description":""}}}},"components-form-slider":{"id":"components-form-slider","name":"Slider","path":"./src/components/form/slider/slider.stories.tsx","stories":[{"id":"components-form-slider--default","name":"Default","snippet":"const Default = () => ;"},{"id":"components-form-slider--disabled","name":"Disabled","snippet":"const Disabled = () => ;"},{"id":"components-form-slider--invalid","name":"Invalid","snippet":"const Invalid = () => ;"}],"import":"import { Slider } from \"@k8o/arte-odyssey\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"Slider","definedInFile":"/home/runner/work/ArteOdyssey/ArteOdyssey/packages/arte-odyssey/src/components/form/slider/slider.tsx","actualName":"Slider","exportName":"Slider","props":{"id":{"required":false,"tsType":{"name":"string"},"description":""},"name":{"required":false,"tsType":{"name":"string"},"description":""},"describedbyId":{"required":false,"tsType":{"name":"union","raw":"string | undefined","elements":[{"name":"string"},{"name":"undefined"}]},"description":""},"isInvalid":{"required":true,"tsType":{"name":"boolean"},"description":""},"isDisabled":{"required":true,"tsType":{"name":"boolean"},"description":""},"isRequired":{"required":true,"tsType":{"name":"boolean"},"description":""},"step":{"required":false,"tsType":{"name":"number"},"description":"","defaultValue":{"value":"1","computed":false}},"max":{"required":false,"tsType":{"name":"number"},"description":"","defaultValue":{"value":"100","computed":false}},"min":{"required":false,"tsType":{"name":"number"},"description":"","defaultValue":{"value":"0","computed":false}}}}},"components-form-switch":{"id":"components-form-switch","name":"Switch","path":"./src/components/form/switch/switch.stories.tsx","stories":[{"id":"components-form-switch--default","name":"Default","snippet":"const Default = (props) => {\n const [value, setValue] = useState(false);\n\n return (\n {\n setValue(event.target.checked);\n }}\n value={value}\n />\n );\n};"},{"id":"components-form-switch--default-checked","name":"Default Checked","snippet":"const DefaultChecked = () => ;"},{"id":"components-form-switch--disabled","name":"Disabled","snippet":"const Disabled = () => ;"}],"import":"import { Switch } from \"@k8o/arte-odyssey\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"Switch","definedInFile":"/home/runner/work/ArteOdyssey/ArteOdyssey/packages/arte-odyssey/src/components/form/switch/switch.tsx","actualName":"Switch","exportName":"Switch","props":{"id":{"required":false,"tsType":{"name":"string"},"description":""},"name":{"required":false,"tsType":{"name":"string"},"description":""},"describedbyId":{"required":false,"tsType":{"name":"union","raw":"string | undefined","elements":[{"name":"string"},{"name":"undefined"}]},"description":""},"isDisabled":{"required":true,"tsType":{"name":"boolean"},"description":""},"isInvalid":{"required":true,"tsType":{"name":"boolean"},"description":""},"isRequired":{"required":true,"tsType":{"name":"boolean"},"description":""},"label":{"required":true,"tsType":{"name":"string"},"description":""}}}},"components-form-text-field":{"id":"components-form-text-field","name":"TextField","path":"./src/components/form/text-field/text-field.stories.tsx","stories":[{"id":"components-form-text-field--default","name":"Default","snippet":"const Default = () => ;"},{"id":"components-form-text-field--placeholder","name":"Placeholder","snippet":"const Placeholder = () => ;"},{"id":"components-form-text-field--invalid","name":"Invalid","snippet":"const Invalid = () => ;"},{"id":"components-form-text-field--disabled","name":"Disabled","snippet":"const Disabled = () => ;"}],"import":"import { TextField } from \"@k8o/arte-odyssey\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"TextField","definedInFile":"/home/runner/work/ArteOdyssey/ArteOdyssey/packages/arte-odyssey/src/components/form/text-field/text-field.tsx","actualName":"TextField","exportName":"TextField","props":{"id":{"required":false,"tsType":{"name":"string"},"description":""},"name":{"required":false,"tsType":{"name":"string"},"description":""},"describedbyId":{"required":false,"tsType":{"name":"union","raw":"string | undefined","elements":[{"name":"string"},{"name":"undefined"}]},"description":""},"isInvalid":{"required":true,"tsType":{"name":"boolean"},"description":""},"isDisabled":{"required":true,"tsType":{"name":"boolean"},"description":""},"isRequired":{"required":true,"tsType":{"name":"boolean"},"description":""},"placeholder":{"required":false,"tsType":{"name":"string"},"description":""}}}},"components-form-textarea":{"id":"components-form-textarea","name":"Textarea","path":"./src/components/form/textarea/textarea.stories.tsx","stories":[{"id":"components-form-textarea--default","name":"Default","snippet":"const Default = () => ;"},{"id":"components-form-textarea--full-height","name":"Full Height","snippet":"const FullHeight = () => ;"},{"id":"components-form-textarea--auto-resize","name":"Auto Resize","snippet":"const AutoResize = () => ;"},{"id":"components-form-textarea--rows","name":"Rows","snippet":"const Rows = () => ;"},{"id":"components-form-textarea--placeholder","name":"Placeholder","snippet":"const Placeholder = () => ;"},{"id":"components-form-textarea--invalid","name":"Invalid","snippet":"const Invalid = () => ;"},{"id":"components-form-textarea--disabled","name":"Disabled","snippet":"const Disabled = () => ;"}],"import":"import { Textarea } from \"@k8o/arte-odyssey\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"Textarea","definedInFile":"/home/runner/work/ArteOdyssey/ArteOdyssey/packages/arte-odyssey/src/components/form/textarea/textarea.tsx","actualName":"Textarea","exportName":"Textarea","props":{"id":{"required":true,"tsType":{"name":"string"},"description":""},"name":{"required":false,"tsType":{"name":"string"},"description":""},"describedbyId":{"required":true,"tsType":{"name":"union","raw":"string | undefined","elements":[{"name":"string"},{"name":"undefined"}]},"description":""},"isInvalid":{"required":true,"tsType":{"name":"boolean"},"description":""},"isDisabled":{"required":true,"tsType":{"name":"boolean"},"description":""},"isRequired":{"required":true,"tsType":{"name":"boolean"},"description":""},"placeholder":{"required":false,"tsType":{"name":"string"},"description":""},"rows":{"required":false,"tsType":{"name":"number"},"description":""},"fullHeight":{"required":false,"tsType":{"name":"boolean"},"description":"","defaultValue":{"value":"false","computed":false}},"autoResize":{"required":false,"tsType":{"name":"boolean"},"description":"","defaultValue":{"value":"false","computed":false}}}}},"components-icons":{"id":"components-icons","name":"icons","path":"./src/components/icons/icons.stories.tsx","stories":[{"id":"components-icons--sizes","name":"Sizes","snippet":"const Sizes = () => {\n return (\n
\n {sizes.map((size) => (\n
\n \n

{size}

\n
\n ))}\n
\n );\n};"},{"id":"components-icons--primary","name":"Primary","snippet":"const Primary = () => {\n return (\n
\n
\n \n

Logo

\n
\n
\n \n

Close

\n
\n
\n \n

Chevron Left

\n
\n
\n \n

Chevron Up

\n
\n
\n \n

Chevron Right

\n
\n
\n \n

Chevron Down

\n
\n
\n \n

Check

\n
\n
\n \n

Info

\n
\n
\n \n

Success

\n
\n
\n \n

Warning

\n
\n
\n \n

Error

\n
\n
\n \n

Link

\n
\n
\n \n

External Link

\n
\n
\n \n

Blog

\n
\n
\n \n

Slide

\n
\n
\n \n

Tag

\n
\n
\n \n

Location

\n
\n
\n \n

Form

\n
\n
\n \n

Table

\n
\n
\n \n

List

\n
\n
\n \n

Navigation Menu

\n
\n
\n \n

Copy

\n
\n
\n \n

公開日時

\n
\n
\n \n

更新日時

\n
\n
\n \n

送信

\n
\n
\n \n

履歴

\n
\n
\n \n

メール

\n
\n
\n \n

プラス

\n
\n
\n \n

マイナス

\n
\n
\n \n

良い

\n
\n
\n \n

悪い

\n
\n
\n \n

有益

\n
\n
\n \n

浅い

\n
\n
\n \n

面白い

\n
\n
\n \n

退屈

\n
\n
\n \n

簡単

\n
\n
\n \n

難解

\n
\n
\n \n

ライトモード

\n
\n
\n \n

ダークモード

\n
\n
\n \n

閲覧数

\n
\n
\n \n

お知らせ

\n
\n
\n \n

メールの購読

\n
\n
\n \n

色についての情報

\n
\n
\n \n

コントラスト

\n
\n
\n \n

混ざり合った色

\n
\n
\n \n

準備中

\n
\n
\n \n

AI

\n
\n
\n \n

RSS

\n
\n
\n \n

GitHub

\n
\n
\n \n

Twitter

\n
\n
\n \n

Qiita

\n
\n
\n \n

Arte Odyssey

\n
\n
\n );\n};"}],"import":"import {\n AIIcon,\n AlertIcon,\n ArteOdyssey,\n BadIcon,\n BlogIcon,\n BoringIcon,\n CheckIcon,\n ChevronIcon,\n CloseIcon,\n ColorContrastIcon,\n ColorInfoIcon,\n CopyIcon,\n DarkModeIcon,\n DifficultIcon,\n EasyIcon,\n ExternalLinkIcon,\n FormIcon,\n GitHubIcon,\n GoodIcon,\n HistoryIcon,\n InformativeIcon,\n InterestingIcon,\n LightModeIcon,\n LinkIcon,\n ListIcon,\n LocationIcon,\n LogoIcon,\n MailIcon,\n MinusIcon,\n MixedColorIcon,\n NavigationMenuIcon,\n NewsIcon,\n PlusIcon,\n PrepareIcon,\n PublishDateIcon,\n QiitaIcon,\n RSSIcon,\n SendIcon,\n ShallowIcon,\n SlideIcon,\n SubscribeIcon,\n TableIcon,\n TagIcon,\n TwitterIcon,\n UpdateDateIcon,\n ViewIcon,\n} from \"@k8o/arte-odyssey\";","jsDocTags":{},"error":{"name":"No component found","message":"We could not detect the component from your story file. Specify meta.component.\n 50 | import { TwitterIcon } from './twitter';\n 51 |\n> 52 | const meta: Meta = {\n | ^\n 53 | title: 'components/icons',\n 54 | };\n 55 |\n\n./src/components/icons/icons.stories.tsx:\nimport type { Meta, StoryObj } from '@storybook/react-vite';\nimport type { FC } from 'react';\nimport { ArteOdyssey } from './arte-odyssey';\nimport { GitHubIcon } from './github-mark';\nimport { LogoIcon } from './logo';\nimport {\n AIIcon,\n AlertIcon,\n BadIcon,\n BlogIcon,\n BoringIcon,\n CheckIcon,\n ChevronIcon,\n CloseIcon,\n ColorContrastIcon,\n ColorInfoIcon,\n CopyIcon,\n DarkModeIcon,\n DifficultIcon,\n EasyIcon,\n ExternalLinkIcon,\n FormIcon,\n GoodIcon,\n HistoryIcon,\n InformativeIcon,\n InterestingIcon,\n LightModeIcon,\n LinkIcon,\n ListIcon,\n LocationIcon,\n MailIcon,\n MinusIcon,\n MixedColorIcon,\n NavigationMenuIcon,\n NewsIcon,\n PlusIcon,\n PrepareIcon,\n PublishDateIcon,\n RSSIcon,\n SendIcon,\n ShallowIcon,\n SlideIcon,\n SubscribeIcon,\n TableIcon,\n TagIcon,\n UpdateDateIcon,\n ViewIcon,\n} from './lucide';\nimport { QiitaIcon } from './qiita';\nimport { TwitterIcon } from './twitter';\n\nconst meta: Meta = {\n title: 'components/icons',\n};\n\nexport default meta;\ntype Story = StoryObj;\n\nconst sizes = ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl'] as const;\n\nexport const Sizes: Story = {\n render: () => {\n return (\n
\n {sizes.map((size) => (\n
\n \n

{size}

\n
\n ))}\n
\n );\n },\n};\n\nexport const Primary: Story = {\n render: () => {\n return (\n
\n
\n \n

Logo

\n
\n
\n \n

Close

\n
\n
\n \n

Chevron Left

\n
\n
\n \n

Chevron Up

\n
\n
\n \n

Chevron Right

\n
\n
\n \n

Chevron Down

\n
\n
\n \n

Check

\n
\n
\n \n

Info

\n
\n
\n \n

Success

\n
\n
\n \n

Warning

\n
\n
\n \n

Error

\n
\n
\n \n

Link

\n
\n
\n \n

External Link

\n
\n
\n \n

Blog

\n
\n
\n \n

Slide

\n
\n
\n \n

Tag

\n
\n
\n \n

Location

\n
\n
\n \n

Form

\n
\n
\n \n

Table

\n
\n
\n \n

List

\n
\n
\n \n

Navigation Menu

\n
\n
\n \n

Copy

\n
\n
\n \n

公開日時

\n
\n
\n \n

更新日時

\n
\n
\n \n

送信

\n
\n
\n \n

履歴

\n
\n
\n \n

メール

\n
\n
\n \n

プラス

\n
\n
\n \n

マイナス

\n
\n
\n \n

良い

\n
\n
\n \n

悪い

\n
\n
\n \n

有益

\n
\n
\n \n

浅い

\n
\n
\n \n

面白い

\n
\n
\n \n

退屈

\n
\n
\n \n

簡単

\n
\n
\n \n

難解

\n
\n
\n \n

ライトモード

\n
\n
\n \n

ダークモード

\n
\n
\n \n

閲覧数

\n
\n
\n \n

お知らせ

\n
\n
\n \n

メールの購読

\n
\n
\n \n

色についての情報

\n
\n
\n \n

コントラスト

\n
\n
\n \n

混ざり合った色

\n
\n
\n \n

準備中

\n
\n
\n \n

AI

\n
\n
\n \n

RSS

\n
\n
\n \n

GitHub

\n
\n
\n \n

Twitter

\n
\n
\n \n

Qiita

\n
\n
\n \n

Arte Odyssey

\n
\n
\n );\n },\n};\n"}},"components-layout-scroll-linked":{"id":"components-layout-scroll-linked","name":"ScrollLinked","path":"./src/components/layout/scroll-linked/scroll-linked.stories.tsx","stories":[{"id":"components-layout-scroll-linked--no-scroll","name":"No Scroll","snippet":"const NoScroll = () => ;"},{"id":"components-layout-scroll-linked--scroll","name":"Scroll","snippet":"const Scroll = () => ;"},{"id":"components-layout-scroll-linked--with-container","name":"With Container","snippet":"const WithContainer = () => ;"}],"import":"import { ScrollLinked } from \"@k8o/arte-odyssey\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"ScrollLinked","definedInFile":"/home/runner/work/ArteOdyssey/ArteOdyssey/packages/arte-odyssey/src/components/layout/scroll-linked/scroll-linked.tsx","actualName":"ScrollLinked","exportName":"ScrollLinked","props":{"container":{"required":false,"tsType":{"name":"RefObject","elements":[{"name":"union","raw":"HTMLElement | null","elements":[{"name":"HTMLElement"},{"name":"null"}]}],"raw":"RefObject"},"description":""}}}},"components-layout-separator":{"id":"components-layout-separator","name":"Separator","path":"./src/components/layout/separator/separator.stories.tsx","stories":[{"id":"components-layout-separator--horizontal","name":"Horizontal","snippet":"const Horizontal = () => ;"},{"id":"components-layout-separator--vertical","name":"Vertical","snippet":"const Vertical = () => ;"},{"id":"components-layout-separator--color-mute","name":"Color Mute","snippet":"const ColorMute = () => ;"},{"id":"components-layout-separator--color-subtle","name":"Color Subtle","snippet":"const ColorSubtle = () => ;"}],"import":"import { Separator } from \"@k8o/arte-odyssey\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"Separator","definedInFile":"/home/runner/work/ArteOdyssey/ArteOdyssey/packages/arte-odyssey/src/components/layout/separator/separator.tsx","actualName":"Separator","exportName":"Separator","props":{"orientation":{"required":false,"tsType":{"name":"union","raw":"'horizontal' | 'vertical'","elements":[{"name":"literal","value":"'horizontal'"},{"name":"literal","value":"'vertical'"}]},"description":"","defaultValue":{"value":"'horizontal'","computed":false}},"color":{"required":false,"tsType":{"name":"union","raw":"'base' | 'mute' | 'subtle'","elements":[{"name":"literal","value":"'base'"},{"name":"literal","value":"'mute'"},{"name":"literal","value":"'subtle'"}]},"description":"","defaultValue":{"value":"'base'","computed":false}}}}},"components-navigation-anchor":{"id":"components-navigation-anchor","name":"Anchor","path":"./src/components/navigation/anchor/anchor.stories.tsx","stories":[{"id":"components-navigation-anchor--external","name":"External","snippet":"const External = () => external link;"},{"id":"components-navigation-anchor--internal","name":"Internal","snippet":"const Internal = () => internal link;"}],"import":"import { Anchor } from \"@k8o/arte-odyssey\";","jsDocTags":{},"error":{"name":"No component definition found","message":"File: /home/runner/work/ArteOdyssey/ArteOdyssey/packages/arte-odyssey/src/components/navigation/anchor/anchor.tsx\nError:\nNo suitable component definition found.\nYou can debug your component file in this playground: https://react-docgen.dev/playground\nCode:\nimport type { ReactNode } from 'react';\nimport { isInternalRoute } from './../../../helpers/is-internal-route';\nimport { ExternalLinkIcon } from '../../icons';\n\nexport const Anchor = ({\n href,\n children,\n openInNewTab = false,\n renderAnchor = ({ children, ...props }) => {children},\n}: {\n href: T;\n children: ReactNode;\n openInNewTab?: boolean;\n renderAnchor?: (props: {\n type: 'internal' | 'external';\n href: NoInfer;\n className: string;\n target?: string;\n rel?: string;\n children: ReactNode;\n }) => ReactNode;\n}) => {\n const type = isInternalRoute(href) && !openInNewTab ? 'internal' : 'external';\n const baseClassName =\n 'text-fg-info underline transition-colors hover:text-fg-info/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-info focus-visible:rounded-sm';\n const props =\n type === 'internal'\n ? {\n className: baseClassName,\n children,\n }\n : {\n className: `${baseClassName} inline-flex items-center gap-0.5`,\n target: '_blank',\n rel: 'noopener noreferrer',\n children: (\n <>\n {children}\n \n \n ),\n };\n return renderAnchor({\n type,\n href,\n ...props,\n });\n};\n"}},"components-navigation-breadcrumb":{"id":"components-navigation-breadcrumb","name":"Breadcrumb.List","path":"./src/components/navigation/breadcrumb/breadcrumb.stories.tsx","stories":[{"id":"components-navigation-breadcrumb--medium","name":"Medium","snippet":"const Medium = () => (\n \n \n Home\n \n \n \n Quizzes\n \n \n \n \n うおへんクイズ\n \n \n \n);"},{"id":"components-navigation-breadcrumb--large","name":"Large","snippet":"const Large = () => (\n \n \n Home\n \n \n \n Quizzes\n \n \n \n \n うおへんクイズ\n \n \n \n);"},{"id":"components-navigation-breadcrumb--small","name":"Small","snippet":"const Small = () => (\n \n \n Home\n \n \n \n Quizzes\n \n \n \n \n うおへんクイズ\n \n \n \n);"}],"import":"import { Breadcrumb } from \"@k8o/arte-odyssey\";","jsDocTags":{},"error":{"name":"No component definition found","message":"File: /home/runner/work/ArteOdyssey/ArteOdyssey/packages/arte-odyssey/src/components/navigation/breadcrumb/breadcrumb.tsx\nError:\nNo suitable component definition found.\nYou can debug your component file in this playground: https://react-docgen.dev/playground\nCode:\nimport type { FC, PropsWithChildren } from 'react';\nimport { cn } from './../../../helpers/cn';\nimport { ChevronIcon } from '../../icons';\n\nconst List: FC<\n PropsWithChildren<{\n size?: 'sm' | 'md' | 'lg';\n }>\n> = ({ children, size = 'md' }) => {\n return (\n \n );\n};\n\nconst Item: FC = ({ children }) => {\n return
  • {children}
    • ;\n};\n\nconst Separator: FC = () => {\n return (\n
  • \n \n
    • \n );\n};\n\nconst _Link = ({\n href,\n current = false,\n children,\n component,\n}: PropsWithChildren<{\n href: T;\n current?: boolean;\n component?: FC<{ href: T; className: string }>;\n}>) => {\n const Link = component ?? 'a';\n return current ? (\n {children}\n ) : (\n \n {children}\n \n );\n};\n\nexport const Breadcrumb = {\n List,\n Item,\n Separator,\n Link: _Link,\n} as const;\n"}},"components-navigation-tabs":{"id":"components-navigation-tabs","name":"Tabs.Root","path":"./src/components/navigation/tabs/tabs.stories.tsx","stories":[{"id":"components-navigation-tabs--primary","name":"Primary","snippet":"const Primary = () => (\n \n \n 概要\n 設定\n 履歴\n \n \n

    ここに概要が表示されます。

    \n     \n \n

    ここに設定項目が表示されます。

    \n     \n \n

    ここに履歴が表示されます。

    \n     \n     \n);"},{"id":"components-navigation-tabs--default-selected","name":"Default Selected","snippet":"const DefaultSelected = () => (\n \n \n 概要\n 設定\n 履歴\n \n \n

    ここに概要が表示されます。

    \n     \n \n

    ここに設定項目が表示されます。

    \n     \n \n

    ここに履歴が表示されます。

    \n     \n     \n);"}],"import":"import { Tabs } from \"@k8o/arte-odyssey\";","jsDocTags":{},"error":{"name":"No component definition found","message":"File: /home/runner/work/ArteOdyssey/ArteOdyssey/packages/arte-odyssey/src/components/navigation/tabs/tabs.tsx\nError:\nNo suitable component definition found.\nYou can debug your component file in this playground: https://react-docgen.dev/playground\nCode:\n'use client';\n\nimport * as motion from 'motion/react-client';\nimport {\n createContext,\n type FC,\n type KeyboardEvent,\n type PropsWithChildren,\n type RefObject,\n use,\n useEffect,\n useId,\n useRef,\n useState,\n} from 'react';\nimport { cn } from './../../../helpers/cn';\n\ntype TabsContext = {\n rootId: string;\n ids: [string, ...string[]];\n selectedId: string;\n setSelectedId: (id: string) => void;\n};\n\nconst TabsProvider = createContext(undefined);\n\nconst useTabsState = (): TabsContext => {\n const context = use(TabsProvider);\n if (!context) {\n throw new Error('useTabsState must be used within a TabsProvider');\n }\n return context;\n};\n\nconst Root: FC<\n PropsWithChildren<{\n defaultSelectedId?: string | null;\n ids: [string, ...string[]];\n }>\n> = ({ defaultSelectedId = null, ids, children }) => {\n const defaultIndex = defaultSelectedId ? ids.indexOf(defaultSelectedId) : 0;\n const [selectedId, setSelectedId] = useState(\n defaultSelectedId ?? ids[defaultIndex] ?? ids[0],\n );\n const rootId = useId();\n\n return (\n \n {/* TODO: スクロール以外の見せ方を考えても良さそう */}\n
    {children}
    \n \n );\n};\n\nconst TabsListProvider = createContext<\n | {\n setFocusRef: RefObject;\n }\n | undefined\n>(undefined);\n\nconst useTabsListState = (): {\n setFocusRef: RefObject;\n} => {\n const context = use(TabsListProvider);\n if (!context) {\n throw new Error('useTabListState must be used within a TabListProvider');\n }\n return context;\n};\n\nconst List: FC<\n PropsWithChildren<{\n label: string;\n }>\n> = ({ label, children }) => {\n const { rootId } = useTabsState();\n const setFocusRef = useRef(false);\n return (\n \n {children}\n \n );\n};\n\nconst Tab: FC> = ({ id, children }) => {\n const { rootId, ids, selectedId, setSelectedId } = useTabsState();\n const { setFocusRef } = useTabsListState();\n const ref = useRef(null);\n const activeIndex = ids.indexOf(selectedId);\n const index = ids.indexOf(id);\n\n useEffect(() => {\n if (activeIndex === index && setFocusRef.current) {\n ref.current?.focus();\n setFocusRef.current = false;\n }\n }, [activeIndex, index, setFocusRef]);\n\n return (\n {\n setSelectedId(id);\n }}\n onKeyDown={(e: KeyboardEvent) => {\n if (e.key === 'ArrowLeft') {\n const nextActiveIndex = index === 0 ? ids.length - 1 : index - 1;\n setSelectedId(ids[nextActiveIndex] ?? ids[0]);\n setFocusRef.current = true;\n return;\n }\n if (e.key === 'ArrowRight') {\n const nextActiveIndex = index === ids.length - 1 ? 0 : index + 1;\n setSelectedId(ids[nextActiveIndex] ?? ids[0]);\n setFocusRef.current = true;\n return;\n }\n }}\n ref={ref}\n role=\"tab\"\n tabIndex={activeIndex === index ? 0 : -1}\n >\n {selectedId === id && (\n \n )}\n {children}\n \n );\n};\n\nconst Panel: FC> = ({ id, children }) => {\n const { rootId, selectedId } = useTabsState();\n\n if (selectedId !== id) {\n return null;\n }\n\n return (\n \n {children}\n \n );\n};\n\nexport const Tabs = {\n Root,\n List,\n Tab,\n Panel,\n} as const;\n"}},"components-overlays-dialog":{"id":"components-overlays-dialog","name":"Dialog.Root","path":"./src/components/overlays/dialog/dialog.stories.tsx","stories":[{"id":"components-overlays-dialog--default","name":"Default","snippet":"const Default = () => (\n \n \n こんにちは\n \n);"},{"id":"components-overlays-dialog--popover-dialog","name":"Popover Dialog","snippet":"const PopoverDialog = () => (\n \n (\n \n )}\n />\n } />\n \n);"},{"id":"components-overlays-dialog--modal-dialog","name":"Modal Dialog","snippet":"const ModalDialog = () => {\n const [open, setOpen] = useState(false);\n return (\n <>\n {\n setOpen(true);\n }}\n size=\"md\"\n type=\"button\"\n >\n モーダル\n \n {\n setOpen(false);\n }}\n type=\"center\"\n >\n \n \n こんにちは\n \n \n \n );\n};"}],"import":"import { Button, Dialog, Modal, Popover } from \"@k8o/arte-odyssey\";","jsDocTags":{},"error":{"name":"No component definition found","message":"File: /home/runner/work/ArteOdyssey/ArteOdyssey/packages/arte-odyssey/src/components/overlays/dialog/dialog.tsx\nError:\nNo suitable component definition found.\nYou can debug your component file in this playground: https://react-docgen.dev/playground\nCode:\n'use client';\n\nimport { createContext, type FC, type PropsWithChildren, type Ref, use, useId } from 'react';\nimport { Heading } from '../../data-display/heading';\nimport { IconButton } from '../../buttons/icon-button';\nimport { CloseIcon } from '../../icons';\n\nconst DialogContext = createContext<{\n rootId: string;\n} | null>(null);\n\nconst useDialogContext = () => {\n const context = use(DialogContext);\n if (context === null) {\n throw new Error('useDialogContext must be used within a DialogProvider');\n }\n return context;\n};\n\nconst Root: FC<\n PropsWithChildren<{\n ref?: Ref | undefined;\n id?: string | undefined;\n tabIndex?: number | undefined;\n role?: string | undefined;\n }>\n> = ({ ref, id, children, tabIndex, role = 'dialog' }) => {\n const fallbackId = useId();\n const rootId = id ?? fallbackId;\n\n return (\n \n {children}\n \n );\n};\n\nconst Header: FC<{\n title: string;\n onClose: () => void;\n}> = ({ title, onClose }) => {\n const { rootId } = useDialogContext();\n return (\n
    \n {title}\n
    \n {\n e.stopPropagation();\n onClose();\n }}\n >\n \n \n
    \n
    \n );\n};\n\nconst Content: FC = ({ children }) => {\n const { rootId } = useDialogContext();\n return (\n {\n e.stopPropagation();\n }}\n >\n {children}\n \n );\n};\n\nexport const Dialog = {\n Root,\n Header,\n Content,\n} as const;\n"}},"components-overlays-drawer":{"id":"components-overlays-drawer","name":"Drawer","path":"./src/components/overlays/drawer/drawer.stories.tsx","stories":[{"id":"components-overlays-drawer--default","name":"Default","snippet":"const Default = () => ();"}],"import":"import { Drawer } from \"@k8o/arte-odyssey\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"Drawer","definedInFile":"/home/runner/work/ArteOdyssey/ArteOdyssey/packages/arte-odyssey/src/components/overlays/drawer/drawer.tsx","actualName":"Drawer","exportName":"Drawer","props":{"title":{"required":true,"tsType":{"name":"ReactNode"},"description":""},"isOpen":{"required":true,"tsType":{"name":"boolean"},"description":""},"onClose":{"required":true,"tsType":{"name":"signature","type":"function","raw":"() => void","signature":{"arguments":[],"return":{"name":"void"}}},"description":""},"side":{"required":false,"tsType":{"name":"union","raw":"'left' | 'right'","elements":[{"name":"literal","value":"'left'"},{"name":"literal","value":"'right'"}]},"description":"","defaultValue":{"value":"'right'","computed":false}}}}},"components-overlays-dropdown-menu":{"id":"components-overlays-dropdown-menu","name":"DropdownMenu.Root","path":"./src/components/overlays/dropdown-menu/dropdown-menu.stories.tsx","stories":[{"id":"components-overlays-dropdown-menu--default","name":"Default","snippet":"const Default = () => (\n \n \n \n {\n console.log('編集');\n }}\n />\n {\n console.log('複製');\n }}\n />\n {\n console.log('削除');\n }}\n />\n \n \n);"},{"id":"components-overlays-dropdown-menu--trigger-by-icon","name":"Trigger By Icon","snippet":"const TriggerByIcon = () => (\n \n } label=\"テーマ切替\" />\n \n {\n console.log('ライト');\n }}\n />\n {\n console.log('ダーク');\n }}\n />\n {\n console.log('システム');\n }}\n />\n \n \n);"}],"import":"import { DarkModeIcon, DropdownMenu } from \"@k8o/arte-odyssey\";","jsDocTags":{},"error":{"name":"No component definition found","message":"File: /home/runner/work/ArteOdyssey/ArteOdyssey/packages/arte-odyssey/src/components/overlays/dropdown-menu/dropdown-menu.tsx\nError:\nNo suitable component definition found.\nYou can debug your component file in this playground: https://react-docgen.dev/playground\nCode:\n'use client';\n\nimport {\n FloatingList,\n type Placement,\n useInteractions,\n useListNavigation,\n} from '@floating-ui/react';\nimport {\n type ComponentProps,\n type FC,\n type MouseEventHandler,\n type PropsWithChildren,\n type ReactNode,\n useRef,\n useState,\n} from 'react';\nimport { cn } from './../../../helpers/cn';\nimport { Button } from '../../buttons/button';\nimport { IconButton } from '../../buttons/icon-button';\nimport { ChevronIcon } from '../../icons';\nimport { Popover } from '../popover';\nimport { useFloatingUIContext } from '../popover/hooks';\nimport { MenuContextProvider, useMenuContent, useMenuItem, useMenuTrigger } from './hooks';\n\nconst Root: FC> = ({\n children,\n placement = 'bottom-start',\n}) => {\n return (\n \n {children}\n \n );\n};\n\nconst MenuProvider: FC = ({ children }) => {\n const [activeIndex, setActiveIndex] = useState(null);\n const itemElementsRef = useRef<(HTMLElement | null)[]>([]);\n\n const context = useFloatingUIContext();\n\n const listNavigation = useListNavigation(context, {\n listRef: itemElementsRef,\n activeIndex,\n onNavigate: setActiveIndex,\n loop: true,\n });\n const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([listNavigation]);\n\n return (\n \n {children}\n \n );\n};\n\nconst Content: FC = ({ children }) => {\n const { contentProps, itemElementsRef } = useMenuContent();\n\n return (\n \n (\n \n {children}\n \n )}\n />\n \n );\n};\n\nconst Item: FC<{ onClick: MouseEventHandler; label: string }> = ({ label, onClick }) => {\n const props = useMenuItem({ onClick });\n\n return (\n \n {label}\n \n );\n};\n\nconst Trigger: FC<{\n text: string;\n size?: ComponentProps['size'];\n variant?: ComponentProps['variant'];\n}> = ({ text, size = 'md', variant = 'contained' }) => {\n const getTriggerProps = useMenuTrigger();\n\n return (\n (\n }\n size={size}\n type=\"button\"\n variant={variant}\n {...getTriggerProps(props)}\n >\n {text}\n \n )}\n />\n );\n};\n\nconst IconTrigger: FC<{\n icon: ReactNode;\n label: string;\n}> = ({ icon, label }) => {\n const getTriggerProps = useMenuTrigger();\n\n return (\n (\n \n {icon}\n \n )}\n />\n );\n};\n\nexport const DropdownMenu = {\n Root,\n Content,\n Item,\n Trigger,\n IconTrigger,\n} as const;\n"}},"components-overlays-list-box":{"id":"components-overlays-list-box","name":"ListBox.Root","path":"./src/components/overlays/list-box/list-box.stories.tsx","stories":[{"id":"components-overlays-list-box--default","name":"Default","snippet":"const Default = () => {\n const [selected, setSelected] = useState();\n return (\n
    \n {\n setSelected(key);\n }}\n options={OPTIONS}\n value={selected}\n >\n \n \n \n
    \n );\n};"}],"import":"import { ListBox } from \"@k8o/arte-odyssey\";","jsDocTags":{},"error":{"name":"No component definition found","message":"File: /home/runner/work/ArteOdyssey/ArteOdyssey/packages/arte-odyssey/src/components/overlays/list-box/list-box.tsx\nError:\nNo suitable component definition found.\nYou can debug your component file in this playground: https://react-docgen.dev/playground\nCode:\n'use client';\n\nimport {\n FloatingList,\n type Placement,\n useInteractions,\n useListNavigation,\n} from '@floating-ui/react';\nimport {\n type ComponentProps,\n type FC,\n type PropsWithChildren,\n type ReactElement,\n useRef,\n useState,\n} from 'react';\nimport { cn } from './../../../helpers/cn';\nimport { Button } from '../../buttons/button';\nimport { IconButton } from '../../buttons/icon-button';\nimport { CheckIcon, ChevronIcon } from '../../icons';\nimport { Popover } from '../popover';\nimport { useFloatingUIContext } from '../popover/hooks';\nimport {\n MenuContextProvider,\n type Option,\n useMenuContent,\n useMenuItem,\n useMenuTrigger,\n} from './hooks';\n\nconst Root: FC<\n PropsWithChildren<{\n placement?: Placement;\n options: Option[];\n value: Option['key'] | undefined;\n onSelect: (key: Option['key']) => void;\n }>\n> = ({ children, placement = 'bottom', options, value, onSelect }) => {\n return (\n \n \n {children}\n \n \n );\n};\n\nconst MenuProvider: FC<\n PropsWithChildren<{\n options: Option[];\n value: Option['key'] | undefined;\n onSelect: (key: Option['key']) => void;\n }>\n> = ({ children, options, onSelect, value }) => {\n const selectedIndex = options.findIndex((option) => option.key === value);\n const [activeIndex, setActiveIndex] = useState(null);\n const itemElementsRef = useRef<(HTMLElement | null)[]>([]);\n\n const context = useFloatingUIContext();\n\n const listNavigation = useListNavigation(context, {\n listRef: itemElementsRef,\n activeIndex,\n selectedIndex,\n onNavigate: setActiveIndex,\n loop: true,\n });\n const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([listNavigation]);\n\n const handleSelect = (index: number) => {\n const key = options[index]?.key;\n if (key) {\n onSelect(key);\n }\n return;\n };\n\n return (\n \n {children}\n \n );\n};\n\nconst Content: FC<{\n helpContent?: ReactElement;\n}> = ({ helpContent }) => {\n const { options, contentProps, itemElementsRef } = useMenuContent();\n\n return (\n \n (\n \n {helpContent}\n {options.map(({ key, label }, idx) => (\n \n ))}\n \n )}\n />\n \n );\n};\n\nconst Item: FC<{\n label: Option['label'];\n index: number;\n}> = ({ label, index }) => {\n const { props, selected } = useMenuItem(index);\n\n return (\n \n {label}\n {selected && (\n \n \n \n )}\n \n );\n};\n\nconst Trigger: FC<{\n size?: ComponentProps['size'];\n}> = ({ size = 'md' }) => {\n const { label, getTriggerProps } = useMenuTrigger();\n\n return (\n (\n }\n fullWidth\n size={size}\n type=\"button\"\n variant=\"contained\"\n {...getTriggerProps(props)}\n >\n {label}\n \n )}\n />\n );\n};\n\nconst TriggerIcon: FC<{\n size?: ComponentProps['size'];\n icon: ReactElement;\n}> = ({ size = 'md', icon }) => {\n const { label, getTriggerProps } = useMenuTrigger();\n\n return (\n (\n \n {icon}\n \n )}\n />\n );\n};\n\nexport const ListBox = {\n Root,\n Content,\n Trigger,\n TriggerIcon,\n} as const;\n"}},"components-overlays-modal":{"id":"components-overlays-modal","name":"Modal","path":"./src/components/overlays/modal/modal.stories.tsx","stories":[{"id":"components-overlays-modal--default","name":"Default","snippet":"const Default = () => (\n \n \n

    この操作を実行してもよろしいですか？

    \n     \n     )    ;"}],"import":"import { Dialog, Modal } from \"@k8o/arte-odyssey\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"Modal","definedInFile":"/home/runner/work/ArteOdyssey/ArteOdyssey/packages/arte-odyssey/src/components/overlays/modal/modal.tsx","actualName":"Modal","exportName":"Modal","props":{"ref":{"required":false,"tsType":{"name":"RefObject","elements":[{"name":"union","raw":"HTMLDialogElement | null","elements":[{"name":"HTMLDialogElement"},{"name":"null"}]}],"raw":"RefObject"},"description":""},"type":{"required":false,"tsType":{"name":"union","raw":"'center' | 'bottom' | 'right' | 'left'","elements":[{"name":"literal","value":"'center'"},{"name":"literal","value":"'bottom'"},{"name":"literal","value":"'right'"},{"name":"literal","value":"'left'"}]},"description":"","defaultValue":{"value":"'center'","computed":false}},"defaultOpen":{"required":false,"tsType":{"name":"boolean"},"description":""},"isOpen":{"required":false,"tsType":{"name":"boolean"},"description":""},"onClose":{"required":false,"tsType":{"name":"signature","type":"function","raw":"() => void","signature":{"arguments":[],"return":{"name":"void"}}},"description":""}}}},"components-overlays-popover":{"id":"components-overlays-popover","name":"Popover.Root","path":"./src/components/overlays/popover/popover.stories.tsx","stories":[{"id":"components-overlays-popover--default","name":"Default","snippet":"const Default = () => (\n \n (\n \n )}\n />\n (\n
    \n
    ポップオーバーのコンテンツ
    \n
    \n )}\n />\n     \n);"}],"import":"import { Button, Popover } from \"@k8o/arte-odyssey\";","jsDocTags":{},"error":{"name":"No component definition found","message":"File: /home/runner/work/ArteOdyssey/ArteOdyssey/packages/arte-odyssey/src/components/overlays/popover/popover.tsx\nError:\nNo suitable component definition found.\nYou can debug your component file in this playground: https://react-docgen.dev/playground\nCode:\n'use client';\n\nimport {\n autoUpdate,\n FloatingFocusManager,\n FloatingPortal,\n flip,\n offset,\n type Placement,\n useFloating,\n} from '@floating-ui/react';\nimport { AnimatePresence, type Variants } from 'motion/react';\nimport * as motion from 'motion/react-client';\nimport {\n type FC,\n type HTMLProps,\n type PropsWithChildren,\n type ReactElement,\n useEffect,\n useId,\n} from 'react';\nimport { useDisclosure } from '../../../hooks/disclosure';\nimport { usePortalRoot } from '../../providers';\nimport { PopoverProvider, usePopoverContent, usePopoverTrigger } from './hooks';\n\nexport { useOpenContext } from './hooks';\n\nconst Root: FC<\n PropsWithChildren<{\n placement?: Placement;\n type?: 'dialog' | 'menu' | 'tooltip' | 'listbox';\n flipDisabled?: boolean;\n }>\n> = ({ children, type = 'menu', placement = 'bottom-start', flipDisabled = false }) => {\n const id = useId();\n const { isOpen, open, close, toggle } = useDisclosure();\n\n const {\n refs,\n floatingStyles,\n context,\n placement: computedPlacement,\n } = useFloating({\n strategy: 'fixed',\n placement,\n open: isOpen,\n whileElementsMounted: autoUpdate,\n // 要素と8pxだけ離す\n middleware: [\n offset(8),\n !flipDisabled &&\n flip({\n fallbackAxisSideDirection: 'end',\n padding: 8,\n }),\n ],\n transform: false,\n });\n\n useEffect(() => {\n const handleKeyDown = (e: KeyboardEvent) => {\n if (e.key === 'Escape') {\n close();\n }\n };\n\n window.addEventListener('keydown', handleKeyDown);\n\n return () => {\n window.removeEventListener('keydown', handleKeyDown);\n };\n }, [close]);\n\n return (\n \n {children}\n \n );\n};\n\nconst contentMotionVariants = {\n closed: {\n scale: 0,\n transition: {\n delay: 0.1,\n },\n },\n open: {\n scale: 1,\n transition: {\n type: 'spring',\n duration: 0.2,\n },\n },\n} satisfies Variants;\n\nconst Content: FC<{\n renderItem: (props: Record) => ReactElement;\n motionVariants?: Variants;\n}> = ({ renderItem, motionVariants = contentMotionVariants }) => {\n const { isOpen, isHover, context, setContentRef, contentStyles, itemProps } = usePopoverContent();\n\n const root = usePortalRoot();\n const protalProps = root ? { root } : {};\n\n return (\n \n {isOpen && (\n \n \n
    \n \n {renderItem(itemProps)}\n \n
    \n     \n     \n )}\n     \n );\n};\n\nconst Trigger: FC<{\n renderItem: (\n props: Omit, 'selected' | 'active' | 'color'>,\n ) => ReactElement;\n}> = ({ renderItem }) => {\n const props = usePopoverTrigger();\n\n return renderItem(props);\n};\n\nexport const Popover = {\n Root,\n Content,\n Trigger,\n} as const;\n\n\nFile: /home/runner/work/ArteOdyssey/ArteOdyssey/packages/arte-odyssey/src/components/overlays/popover/hooks.ts\nError:\nNo suitable component definition found.\nYou can debug your component file in this playground: https://react-docgen.dev/playground\nCode:\n'use client';\n\nimport type { FloatingContext, Placement, ReferenceType } from '@floating-ui/react';\nimport {\n type CSSProperties,\n createContext,\n type HTMLProps,\n type KeyboardEvent,\n type RefObject,\n use,\n useMemo,\n useRef,\n} from 'react';\nimport { useClickAway } from './../../../hooks/click-away';\n\ntype PopoverContext = {\n rootId: string;\n type: 'dialog' | 'menu' | 'tooltip' | 'listbox';\n isOpen: boolean;\n toggleOpen: () => void;\n onOpen: () => void;\n onClose: () => void;\n\n context: FloatingContext;\n placement: Placement;\n triggerRef: RefObject;\n setTriggerRef: (node: ReferenceType | null) => void;\n setContentRef: (node: HTMLElement | null) => void;\n contentStyles: CSSProperties;\n};\n\nconst PopoverContext = createContext(null);\n\nexport const PopoverProvider = PopoverContext;\n\nconst usePopoverContext = (): PopoverContext => {\n const popover = use(PopoverContext);\n if (!popover) {\n throw new Error('usePopoverContext must be used within a Popover.Root');\n }\n\n return popover;\n};\n\nexport const useFloatingUIContext = () => {\n const popover = usePopoverContext();\n return useMemo(() => popover.context, [popover]);\n};\n\nexport const usePlacement = (): Placement => {\n const popover = usePopoverContext();\n return popover.placement;\n};\n\nexport const useOpenContext = () => {\n const popover = usePopoverContext();\n return useMemo(\n () => ({\n isOpen: popover.isOpen,\n onOpen: popover.onOpen,\n onClose: popover.onClose,\n toggleOpen: popover.toggleOpen,\n }),\n [popover.isOpen, popover.onClose, popover.onOpen, popover.toggleOpen],\n );\n};\n\nexport const usePopoverContent = () => {\n const popover = usePopoverContext();\n const isHover = popover.type === 'tooltip';\n const ref = useRef(null);\n useClickAway(\n ref,\n (event) => {\n if (!popover.isOpen) {\n return;\n }\n if (popover.triggerRef.current?.contains(event.target as HTMLElement)) {\n return;\n }\n popover.onClose();\n },\n !isHover,\n );\n\n const itemProps = useMemo(() => {\n switch (popover.type) {\n case 'dialog':\n return {\n id: `${popover.rootId}_list`,\n ref,\n role: 'dialog',\n };\n case 'menu':\n return {\n id: `${popover.rootId}_list`,\n ref,\n role: 'menu',\n 'aria-orientation': 'vertical',\n };\n case 'tooltip':\n return {\n id: `${popover.rootId}_list`,\n ref,\n role: 'tooltip',\n onMouseEnter: popover.onOpen,\n onMouseLeave: popover.onClose,\n onFocus: popover.onOpen,\n onBlur: popover.onClose,\n };\n case 'listbox':\n return {\n id: `${popover.rootId}_list`,\n ref,\n role: 'listbox',\n };\n }\n }, [popover.rootId, popover.type, ref, popover.onClose, popover.onOpen]);\n\n return useMemo(\n () => ({\n id: `${popover.rootId}_list`,\n ref,\n isOpen: popover.isOpen,\n isHover,\n context: popover.context,\n setContentRef: popover.setContentRef,\n contentStyles: popover.contentStyles,\n itemProps,\n }),\n [\n popover.rootId,\n popover.isOpen,\n popover.context,\n popover.setContentRef,\n popover.contentStyles,\n ref,\n isHover,\n itemProps,\n ],\n );\n};\n\nexport const usePopoverTrigger = (): Omit, 'selected' | 'active'> => {\n const popover = usePopoverContext();\n return useMemo(() => {\n switch (popover.type) {\n case 'dialog':\n return {\n onClick: popover.toggleOpen,\n onKeyDown: (e: KeyboardEvent) => {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n popover.toggleOpen();\n }\n },\n 'aria-haspopup': 'dialog',\n 'aria-expanded': popover.isOpen,\n 'aria-controls': popover.isOpen ? `${popover.rootId}_list` : undefined,\n ref: popover.setTriggerRef,\n };\n case 'tooltip':\n return {\n onMouseEnter: popover.onOpen,\n onMouseLeave: popover.onClose,\n onFocus: popover.onOpen,\n onBlur: popover.onClose,\n 'aria-describedby': `${popover.rootId}_content`,\n ref: popover.setTriggerRef,\n };\n case 'menu':\n return {\n onClick: popover.toggleOpen,\n onKeyDown: (e: KeyboardEvent) => {\n if (e.key === 'Enter') {\n e.preventDefault();\n popover.toggleOpen();\n }\n if (e.key === 'ArrowUp') {\n e.preventDefault();\n popover.onOpen();\n }\n if (e.key === 'ArrowDown') {\n e.preventDefault();\n popover.onOpen();\n }\n },\n 'aria-haspopup': 'menu',\n 'aria-expanded': popover.isOpen,\n 'aria-controls': popover.isOpen ? `${popover.rootId}_list` : undefined,\n ref: popover.setTriggerRef,\n };\n case 'listbox':\n return {\n onClick: popover.toggleOpen,\n onKeyDown: (e: KeyboardEvent) => {\n if (e.key === 'Enter') {\n e.preventDefault();\n popover.toggleOpen();\n }\n if (e.key === 'ArrowUp') {\n e.preventDefault();\n popover.onOpen();\n }\n if (e.key === 'ArrowDown') {\n e.preventDefault();\n popover.onOpen();\n }\n },\n role: 'combobox',\n 'aria-haspopup': 'listbox',\n 'aria-expanded': popover.isOpen,\n 'aria-controls': popover.isOpen ? `${popover.rootId}_list` : undefined,\n ref: popover.setTriggerRef,\n };\n }\n }, [popover]);\n};\n"}},"components-overlays-tooltip":{"id":"components-overlays-tooltip","name":"Tooltip.Root","path":"./src/components/overlays/tooltip/tooltip.stories.tsx","stories":[{"id":"components-overlays-tooltip--default","name":"Default","snippet":"const Default = () => (\n \n (\n \n )}\n />\n \n

    ここに補足情報が表示されます

    \n     \n     \n);"}],"import":"import { Button, Tooltip } from \"@k8o/arte-odyssey\";","jsDocTags":{},"error":{"name":"No component definition found","message":"File: /home/runner/work/ArteOdyssey/ArteOdyssey/packages/arte-odyssey/src/components/overlays/tooltip/tooltip.tsx\nError:\nNo suitable component definition found.\nYou can debug your component file in this playground: https://react-docgen.dev/playground\nCode:\n'use client';\n\nimport type { Placement } from '@floating-ui/react';\nimport type { FC, PropsWithChildren, ReactElement } from 'react';\nimport { Popover } from '../popover';\nimport { usePlacement } from '../popover/hooks';\n\nconst Root: FC> = ({\n children,\n placement = 'bottom-start',\n}) => {\n return (\n \n {children}\n \n );\n};\n\nconst Trigger: FC<{\n renderItem: (props: Record) => ReactElement;\n}> = ({ renderItem }) => {\n return renderItem({ ...props })} />;\n};\n\nconst Content: FC = ({ children }) => {\n const placement = usePlacement();\n const translate = {\n top: { translateY: 5 },\n bottom: { translateY: -5 },\n left: { translateX: 5 },\n right: { translateX: -5 },\n }[placement.includes('-') ? (placement.split('-')[0] ?? 'bottom') : placement];\n\n return (\n (\n \n {children}\n \n )}\n />\n );\n};\n\nexport const Tooltip = {\n Root,\n Trigger,\n Content,\n} as const;\n"}}},"meta":{"docgen":"react-docgen","durationMs":1334}}