@lism-css/ui 0.0.0-dev.1

package/package.json

@@ -0,0 +1,75 @@
+{
+	"name": "@lism-css/ui",
+	"version": "0.0.0-dev.1",
+	"description": "A layout-first CSS framework for websites.",
+	"author": {
+		"name": "ddryo",
+		"url": "https://github.com/ddryo"
+	},
+	"license": "MIT",
+	"keywords": [
+		"css-framework",
+		"astro-component",
+		"react-component"
+	],
+	"scripts": {
+		"dev": "vite",
+		"build": "vite build && pnpm build:css",
+		"build:vite": "vite build",
+		"build:css": "node bin/script-build-css.js",
+		"lint": "pnpm lint:style",
+		"lint:style": "stylelint '**/*.{css,scss}'",
+		"preview": "vite preview"
+	},
+	"bin": {
+		"lism-css": "./bin/cli.mjs"
+	},
+	"files": [
+		"dist",
+		"src"
+	],
+	"type": "module",
+	"main": "./dist/index.js",
+	"exports": {
+		"./react": {
+			"import": "./src/components/react.js",
+			"types": "./dist/components/index.d.ts"
+		},
+		"./astro": {
+			"import": "./src/components/astro.js",
+			"types": "./dist/components/index.d.ts"
+		},
+		"./*.css": "./dist/css/*.css"
+	},
+	"homepage": "https://www.lism.style",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/lism-css/lism-css/tree/main/packages/lism-css"
+	},
+	"bugs": {
+		"url": "https://github.com/lism-css/lism-css/issues"
+	},
+	"dependencies": {
+		"lism-css": "workspace:*"
+	},
+	"devDependencies": {
+		"@babel/cli": "^7.27.2",
+		"@babel/core": "^7.27.3",
+		"@babel/preset-env": "^7.27.2",
+		"@babel/preset-react": "^7.27.1",
+		"@rollup/plugin-babel": "^6.0.4",
+		"@vitejs/plugin-react-swc": "^3.10.0",
+		"glob": "^11.0.2",
+		"rollup": "^4.41.1",
+		"typescript": "~5.8.3",
+		"unplugin-dts": "1.0.0-beta.6",
+		"vite": "^6.3.5"
+	},
+	"peerDependencies": {
+		"@types/react": "*",
+		"@types/react-dom": "*",
+		"react": "^18 || ^19",
+		"react-dom": "^18 || ^19"
+	},
+	"sideEffects": false
+}

package/src/components/Accordion/AccIcon.jsx

@@ -0,0 +1,6 @@
+import { Lism, Icon } from 'lism-css/react';
+import { getAccIconProps } from './getProps';
+
+export default function AccIcon({ icon = 'caret-down', viewBox, children = null, ...props }) {
+	return <Lism {...getAccIconProps(props)}>{children || <Icon viewBox={viewBox} icon={icon} />}</Lism>;
+}

package/src/components/Accordion/Accordion.jsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import getLismProps from 'lism-css/lib/getLismProps';
+import { Lism } from 'lism-css/react';
+import { getAccProps, defaultProps } from './getProps';
+import { setEvent } from './setAccordion';
+import AccIcon from './AccIcon';
+
+// import { AccContext } from './context';
+
+// duration: [s]
+export function Accordion({ children, ...props }) {
+	const ref = React.useRef(null);
+
+	React.useEffect(() => {
+		if (!ref.current) return;
+		return setEvent(ref.current);
+	}, []);
+
+	const lismProps = getLismProps(getAccProps(props));
+
+	return (
+		<details ref={ref} {...lismProps}>
+			{/* <AccContext.Provider value={deliverState}>{children}</AccContext.Provider> */}
+			{children}
+		</details>
+	);
+}
+
+export function Header({ children, ...props }) {
+	return (
+		<Lism tag='summary' {...defaultProps.header} {...props}>
+			{children}
+		</Lism>
+	);
+}
+export function Label({ children, ...props }) {
+	return (
+		<Lism {...defaultProps.label} {...props}>
+			{children}
+		</Lism>
+	);
+}
+
+export function Body({ children, flow, innerProps, ...props }) {
+	return (
+		<Lism {...defaultProps.body} {...props}>
+			<Lism layout='flow' flow={flow} {...defaultProps.inner} {...innerProps}>
+				{children}
+			</Lism>
+		</Lism>
+	);
+}
+export function HeaderLabel({ children, ...props }) {
+	return (
+		<Header {...props}>
+			<Label>{children}</Label>
+			<AccIcon />
+		</Header>
+	);
+}

package/src/components/Accordion/_style.scss

@@ -0,0 +1,54 @@
+.d--accordion {
+	--duration: var(--acc-duration, 0.4s);
+	&[data-opened] {
+		--_notOpen: ;
+	}
+	&:not([data-opened]) {
+		--_isOpen: ;
+	}
+}
+
+.d--accordion_header {
+	display: grid;
+	grid: auto / 1fr auto;
+	gap: 0.5em;
+	align-items: center;
+	outline-offset: -1px; // overflow:clip|hidden; で見えなくなってしまうのを防ぐ
+
+	/* Safariで表示されるデフォルトの三角形アイコンを消す */
+	&::-webkit-details-marker {
+		display: none;
+	}
+}
+
+.d--accordion_body {
+	display: grid;
+	grid: 1fr / auto;
+	transition-property: margin-block, padding-block, opacity, grid-template;
+	transition-duration: var(--duration);
+}
+
+// ※ 正常な animation には必須
+.d--accordion_inner {
+	overflow: hidden;
+}
+
+// 閉じている時
+.d--accordion:not([data-opened]) {
+	> .d--accordion_body {
+		grid: 0fr / auto;
+		padding-block: 0 !important;
+		margin-block: 0 !important;
+	}
+}
+
+// アコーディオンブロックのネスト時、別のアイコンタイプにすると表示が崩れるがそこまでは考慮しない。
+.d--accordion_icon {
+	display: grid;
+
+	// __icon 自体にborderつけたりすると回転が見えてしまうので、 icon自体を回転させる。
+	> .a--icon {
+		transition-duration: var(--duration);
+		rotate: var(--_isOpen, -180deg);
+	}
+}

package/src/components/Accordion/astro/AccBody.astro

@@ -0,0 +1,13 @@
+---
+// import type { LismProps } from 'lism-css/types';
+import { Lism } from 'lism-css/react';
+import { defaultProps } from '../getProps';
+
+const { flow, innerProps, ...props } = Astro.props || {};
+---
+
+<Lism {...defaultProps.body} {...props}>
+	<Lism layout='flow' flow={flow} {...defaultProps.inner} {...innerProps}>
+		<slot />
+	</Lism>
+</Lism>

package/src/components/Accordion/astro/AccHeader.astro

@@ -0,0 +1,13 @@
+---
+// import type { LismProps } from 'lism-css/types';
+import { Lism } from 'lism-css/react';
+import { defaultProps } from '../getProps';
+
+// interface Props extends LismProps {}
+
+const props = Astro.props || {};
+---
+
+<Lism tag='summary' {...defaultProps.header} {...props}>
+	<slot />
+</Lism>

package/src/components/Accordion/astro/AccHeaderLabel.astro

@@ -0,0 +1,12 @@
+---
+import AccHeader from './AccHeader.astro';
+import AccLabel from './AccLabel.astro';
+import AccIcon from './AccIcon.astro';
+---
+
+<AccHeader {...Astro.props || {}}>
+	<AccLabel>
+		<slot />
+	</AccLabel>
+	<AccIcon />
+</AccHeader>

package/src/components/Accordion/astro/AccIcon.astro

@@ -0,0 +1,18 @@
+---
+import { Lism } from 'lism-css/react';
+import { Icon } from 'lism-css/react';
+import { getAccIconProps } from '../getProps';
+
+// Propsの定義
+// interface Props extends LismProps {
+// 	icon?: string;
+// 	size?: string;
+// 	iconProps?: Object;
+// }
+
+const { viewBox, icon = 'caret-down', ...props } = Astro.props || {};
+---
+
+<Lism {...getAccIconProps(props)}>
+	{Astro.slots.has('default') ? <slot /> : <Icon viewBox={viewBox} icon={icon} />}
+</Lism>

package/src/components/Accordion/astro/AccLabel.astro

@@ -0,0 +1,11 @@
+---
+// import type { LismProps } from 'lism-css/types';
+import { Lism } from 'lism-css/react';
+import { defaultProps } from '../getProps';
+
+const props = Astro.props || {};
+---
+
+<Lism {...defaultProps.label} {...props}>
+	<slot />
+</Lism>

package/src/components/Accordion/astro/Accordion.astro

@@ -0,0 +1,21 @@
+---
+// import type { LismProps } from 'lism-css/types';
+import getLismProps from 'lism-css/lib/getLismProps';
+import { getAccProps } from '../getProps';
+
+// Propsの定義
+// interface Props extends LismProps {
+// 	duration?: string | number;
+// }
+const props = Astro.props || {};
+---
+
+<details {...getLismProps(getAccProps(props))}>
+	<slot />
+</details>
+
+<script>
+	// import setEvent from './setEvent';
+	import setAccordion from '../setAccordion';
+	setAccordion();
+</script>

package/src/components/Accordion/astro/__setEvent.js

@@ -0,0 +1,2 @@
+import setEvent from '@lism-ui/core/components/Accordion/setEvent';
+export default setEvent;

package/src/components/Accordion/astro/index.js

@@ -0,0 +1,8 @@
+import Root from './Accordion.astro';
+import Header from './AccHeader.astro';
+import Label from './AccLabel.astro';
+import Icon from './AccIcon.astro';
+import Body from './AccBody.astro';
+import HeaderLabel from './AccHeaderLabel.astro';
+
+export default { Root, Header, HeaderLabel, Body, Icon, Label };

package/src/components/Accordion/getProps.js

@@ -0,0 +1,32 @@
+import atts from 'lism-css/lib/helper/atts';
+
+// duration: [s]
+export function getAccProps({ lismClass, ...props }) {
+	props.lismClass = atts(lismClass, 'd--accordion');
+	return props;
+}
+
+export function getAccIconProps({ isTrigger, ...props }) {
+	const defaultProps = {
+		lismClass: 'd--accordion_icon',
+		tag: 'span',
+	};
+	// isTrigger なら、buttun にする
+	if (isTrigger) {
+		defaultProps.tag = 'button';
+		props['data-role'] = 'trigger';
+	}
+
+	return { ...defaultProps, ...props };
+}
+
+export const defaultProps = {
+	header: { lismClass: 'd--accordion_header' },
+	label: { lismClass: 'd--accordion_label', tag: 'span' },
+	body: {
+		lismClass: 'd--accordion_body',
+	},
+	inner: {
+		lismClass: 'd--accordion_inner',
+	},
+};

package/src/components/Accordion/index.js

@@ -0,0 +1,4 @@
+import { Accordion as Root, Header, Label, Body, HeaderLabel } from './Accordion';
+import { default as Icon } from './AccIcon';
+
+export default { Root, Header, Label, Icon, Body, HeaderLabel };

package/src/components/Accordion/script.js

@@ -0,0 +1,5 @@
+import setAccordion from './setAccordion.js';
+
+document.addEventListener('DOMContentLoaded', function () {
+	setAccordion();
+});

package/src/components/Accordion/setAccordion.js

@@ -0,0 +1,107 @@
+// open 属性付与からクラスの付与まで、ほんの少しだけ遅らせた方が動作が安定する
+const DELAY = 5;
+
+// モーダルのアニメーションが完了するのを待つ.
+const waitAnimation = (element) => {
+	return Promise.all(element.getAnimations().map((a) => a.finished));
+};
+
+// animationTime: [ms]
+const clickedEvent = async (details, force = false) => {
+	// アニメーション中かどうか
+	if (details.dataset.animating && !force) return;
+	details.dataset.animating = '1';
+
+	const body = details.querySelector('.d--accordion_body');
+
+	// オープン / クローズ 処理
+	if (!details.open) {
+		details.open = true;
+		// 少しだけ遅らせた方が動作が安定する
+		setTimeout(async () => {
+			details.setAttribute('data-opened', ''); // クラスの追加
+
+			// アニメーション完了後に dataset を除去。
+			await waitAnimation(body);
+			delete details.dataset.animating;
+		}, DELAY);
+	} else if (details.open) {
+		details.removeAttribute('data-opened'); // クラスを削除
+
+		// アニメーション完了後に open属性 を除去。
+		await waitAnimation(body);
+
+		delete details.dataset.animating;
+		details.open = false;
+	}
+};
+
+const toggleEvent = (e, details) => {
+	// e.preventDefault();
+	// console.log('toggleEvent', e.target, e.currentTarget);
+
+	const hasOpen = details.open;
+	const hasOpenedClass = details.hasAttribute('data-opened');
+
+	// open はセットされたのに data-opened がついてない時
+	if (hasOpen && !hasOpenedClass) {
+		details.setAttribute('data-opened', '');
+	}
+	// open は削除されたのに data-opened がまだついている時
+	if (!hasOpen && hasOpenedClass) {
+		details.removeAttribute('data-opened');
+	}
+};
+
+export const setEvent = (currentRef) => {
+	const details = currentRef;
+	// トリガーが明示的に指定されていない場合は、<summary> 要素をトリガーとする
+	const clickBtn = details.querySelector(`[data-role="trigger"]`) || details.querySelector('summary');
+
+	if (!clickBtn) return;
+
+	// 複数展開を許可するかどうかを、親要素の [data-accordion-multiple] でチェック.
+	let allowMultiple = false;
+	const parent = details.parentNode;
+	if (null != parent) {
+		const dataMultiple = parent.dataset.accordionMultiple;
+		allowMultiple = 'disallow' !== dataMultiple;
+	}
+
+	const _clickedEvent = (e) => {
+		// すぐに open 属性が切り替わらないようにする
+		e.preventDefault();
+
+		// 複数展開が禁止されている場合、（開く処理の直前で）他の開いているアイテムがあれば閉じる
+		if (!allowMultiple && !details.open) {
+			const openedItem = parent.querySelector(`[data-opened]`);
+			if (null != openedItem) clickedEvent(openedItem, true);
+		}
+
+		// 自身のクリック処理
+		clickedEvent(details);
+	};
+	const _toggleEvent = (e) => {
+		toggleEvent(e, details);
+	};
+
+	// <summary> 'click' イベント
+	clickBtn.addEventListener('click', _clickedEvent);
+
+	// <details> の'toggle' イベントで、ページ内検索時にも開閉されるようにする
+	details.addEventListener('toggle', _toggleEvent);
+
+	// useEffectでアンマウントされた時にremoveEventListenerしないと2重でイベントが登録してしまう。
+	return () => {
+		clickBtn.removeEventListener('click', _clickedEvent);
+		details.removeEventListener('toggle', _toggleEvent);
+	};
+};
+
+const setAccordion = () => {
+	const detailsAll = document.querySelectorAll('.d--accordion');
+	detailsAll.forEach((details) => {
+		setEvent(details);
+	});
+};
+export default setAccordion;

package/src/components/Modal/Body.jsx

@@ -0,0 +1,10 @@
+import { Lism } from '../Lism';
+import { defaultProps } from './getProps';
+
+export default function ModalBody({ children, ...props }) {
+	return (
+		<Lism {...defaultProps.body} {...props}>
+			{children}
+		</Lism>
+	);
+}

package/src/components/Modal/CloseBtn.jsx

@@ -0,0 +1,20 @@
+import { Lism } from '../Lism';
+import { Icon } from '../atomic/Icon';
+import { defaultProps } from './getProps';
+// duration: [s]
+export default function CloseBtn({ children, modalId = '', icon, srText = 'Close', ...props }) {
+	// const lismProps = getLismProps(getAccProps(props));
+
+	return (
+		<Lism data-modal-close={modalId} {...defaultProps.closeBtn} {...props}>
+			{children ? (
+				children
+			) : (
+				<>
+					<Icon icon={icon || 'x'} />
+					<span className='u-hidden'>{srText || 'Close'}</span>
+				</>
+			)}
+		</Lism>
+	);
+}

package/src/components/Modal/Inner.jsx

@@ -0,0 +1,6 @@
+import { Lism } from '../Lism';
+import { getInnerProps } from './getProps';
+
+export default function ModalInner({ children, ...props }) {
+	return <Lism {...getInnerProps(props)}>{children}</Lism>;
+}

package/src/components/Modal/Modal.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Lism } from '../Lism';
+import { setEvent } from './setModal';
+import { getProps } from './getProps';
+
+// duration: [s]
+const Modal = ({ children, ...props }) => {
+	const ref = React.useRef(null);
+	React.useEffect(() => {
+		if (!ref?.current) return;
+		return setEvent(ref?.current);
+	}, [ref]);
+
+	return (
+		<Lism forwardedRef={ref} {...getProps(props)}>
+			{children}
+		</Lism>
+	);
+};
+export default Modal;

package/src/components/Modal/OpenBtn.jsx

@@ -0,0 +1,10 @@
+import { Lism } from '../Lism';
+import { defaultProps } from './getProps';
+// duration: [s]
+export default function OpenBtn({ children, modalId = '', ...props }) {
+	return (
+		<Lism data-modal-open={modalId} {...defaultProps.openBtn} {...props}>
+			{children}
+		</Lism>
+	);
+}

package/src/components/Modal/getProps.js

@@ -0,0 +1,30 @@
+import atts from '../../lib/helper/atts';
+
+export function getProps({ lismClass = '', duration, style = {}, ...props }) {
+	const theProps = {
+		lismClass: atts(lismClass, 'd--modal'),
+		setPlain: true,
+	};
+	if (duration) {
+		style['--duration'] = duration;
+	}
+
+	return { tag: 'dialog', ...theProps, style, ...props };
+}
+
+export function getInnerProps({ lismClass = '', offset, style = {}, ...props }) {
+	if (offset) {
+		style['--offset'] = offset;
+	}
+	return {
+		lismClass: atts(lismClass, 'd--modal_inner'),
+		style,
+		...props,
+	};
+}
+
+export const defaultProps = {
+	body: { lismClass: 'd--modal_body' },
+	closeBtn: { tag: 'button', setPlain: true, hov: 'o', d: 'in-flex' },
+	openBtn: { tag: 'button', setPlain: true, hov: 'o', d: 'in-flex' },
+};

package/src/components/Modal/index.js

@@ -0,0 +1,7 @@
+import Root from './Modal';
+import Inner from './Inner';
+import Body from './Body';
+import CloseBtn from './CloseBtn';
+import OpenBtn from './OpenBtn';
+
+export default { Root, Inner, Body, CloseBtn, OpenBtn };

package/src/components/Modal/script.js

@@ -0,0 +1,5 @@
+import setModal from './setModal.ts';
+
+document.addEventListener('DOMContentLoaded', function () {
+	setModal();
+});

package/src/components/Modal/setModal.ts

@@ -0,0 +1,107 @@
+// オープンした時のトリガー要素を記憶する（focusを戻す）
+let THE_TRIGGER: HTMLElement | null = null;
+
+// モーダルのアニメーションが完了するのを待つ.
+const waitAnimation = async (element: HTMLElement): Promise<void> => {
+	// （子要素も取得する場合は { subtree: true } を指定）
+	const animations = element.getAnimations();
+
+	if (animations.length > 0) {
+		// allSettled を使うことで、キャンセルされた場合もrejectせずに完了扱いになる
+		await Promise.allSettled(animations.map((a) => a.finished));
+	}
+};
+
+async function modalOpen(modal: HTMLDialogElement): Promise<void> {
+	// すでに open & data-is-open が付いていれば何もしない（連打防止）
+	if (modal.open && modal.dataset.isOpen) return;
+
+	// showModal() でモーダルを開く（ open 属性の付与）
+	modal.showModal();
+
+	// 次フレームで data-is-open を付与（CSS側でフェードインアニメーション開始）
+	requestAnimationFrame(() => {
+		modal.dataset.isOpen = '1';
+	});
+}
+async function modalClose(modal: HTMLDialogElement): Promise<void> {
+	// すでに閉じている場合は何もしない
+	if (undefined === modal.dataset.isOpen) {
+		return;
+	}
+
+	// data-open 属性を削除（CSS側でフェードアウトアニメーション開始）
+	delete modal.dataset.isOpen;
+
+	// アニメーション完了を待機
+	await waitAnimation(modal);
+
+	// アニメーション終了後、dialog を閉じる（open属性の削除）
+	modal.close();
+}
+
+export function setEvent(modal: HTMLDialogElement): void {
+	// modalがない、またはidがない場合は処理を終了
+	if (!modal || !modal.id) return;
+
+	// モーダルを開くトリガーと閉じるトリガーを取得
+	const openTriggers: NodeListOf<HTMLElement> = document.querySelectorAll(`[data-modal-open="${modal.id}"]`);
+	const closeTriggers: NodeListOf<HTMLElement> = modal.querySelectorAll(`[data-modal-close="${modal.id}"]`);
+
+	// 自身にクローズイベントを追加(余白部分をクリックしても閉じるように)
+	modal.addEventListener('click', (e) => {
+		if (e.target === modal) {
+			modalClose(modal);
+		}
+	});
+
+	// closeボタンにイベント登録
+	modal.addEventListener('close', (e) => {
+		if (THE_TRIGGER) {
+			// THE_TRIGGER.focus(); // showModal()ではフォーカス戻す必要なし
+
+			// オープンボタンのdata属性削除
+			delete THE_TRIGGER.dataset.targetOpened;
+			THE_TRIGGER = null;
+		}
+
+		// モーダルを閉じる
+		modalClose(modal);
+	});
+
+	// openボタンにイベント登録追加
+	openTriggers.forEach((trigger) => {
+		trigger?.addEventListener('click', (e) => {
+			// button側にもdata属性付与
+			trigger.dataset.targetOpened = '1';
+			THE_TRIGGER = trigger; // close() 時にdata属性削除するために記憶
+
+			// モーダルを開く
+			modalOpen(modal);
+		});
+	});
+
+	// 閉じるトリガーにイベントリスナーを追加
+	closeTriggers.forEach((trigger) => {
+		trigger?.addEventListener('click', (e) => {
+			modalClose(modal);
+		});
+	});
+
+	/**
+	 * ESCキーで閉じた時もアニメーションを実行する処理
+	 */
+	modal.addEventListener('cancel', (e) => {
+		e.preventDefault(); // デフォルトの即時 close() を防ぐ
+		modalClose(modal); // 自分で用意したクローズ処理
+	});
+}
+
+const setModal = () => {
+	const modals = document.querySelectorAll('.d--modal');
+
+	modals?.forEach((target) => {
+		setEvent(target as HTMLDialogElement);
+	});
+};
+export default setModal;

package/src/components/Tabs/Tab.jsx

@@ -0,0 +1,18 @@
+// import React from 'react';
+import { Lism } from '../Lism';
+
+export default function Tab({ tabId = 'tab', index = 0, isActive = false, ...props }) {
+	const controlId = `${tabId}-${index}`;
+
+	return (
+		<Lism
+			tag='button'
+			lismClass='d--tabs_tab'
+			setPlain
+			role='tab'
+			aria-controls={controlId}
+			aria-selected={isActive ? 'true' : 'false'}
+			{...props}
+		/>
+	);
+}

package/src/components/Tabs/TabItem.jsx

@@ -0,0 +1,5 @@
+// Note: <Tabs>側でループして色々処理される。
+// 引数でちゃんと処理したいpropを書いておかないとだめ。
+export default function TabItem({ isTabItem = true, children }) {
+	return <div>{children}</div>;
+}

package/src/components/Tabs/TabList.jsx

@@ -0,0 +1,6 @@
+import { Lism } from '../Lism';
+
+export default function TabList(props) {
+	// jc: 's',
+	return <Lism lismClass='d--tabs_list' role='tablist' {...props} />;
+}

package/src/components/Tabs/TabPanel.jsx

@@ -0,0 +1,8 @@
+// import React from 'react';
+import { Lism } from '../Lism';
+
+export default function TabPanel({ tabId = 'tab', isActive = false, index = 0, ...props }) {
+	const controlId = `${tabId}-${index}`;
+
+	return <Lism id={controlId} role='tabpanel' aria-hidden={isActive ? 'false' : 'true'} lismClass='d--tabs_panel' {...props} />;
+}

package/src/components/Tabs/Tabs.jsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { Lism } from '../Lism';
+import Tab from './Tab';
+import TabItem from './TabItem';
+import TabList from './TabList';
+import TabPanel from './TabPanel';
+import getTabsProps from './getProps';
+// import { TabContext } from './context';
+
+export default function Tabs({ tabId = '', defaultIndex = 1, listProps = {}, children, ...props }) {
+	const [activeIndex, setActiveIndex] = React.useState(defaultIndex);
+	const theTabId = tabId || React.useId();
+	const btns = [];
+	const panels = [];
+
+	// Tabs.Item の処理
+	React.Children.forEach(children, (child, index) => {
+		const tabIndex = index + 1; // 1 はじまり
+		// console.log('child.type', React.isValidElement(child), child.type);
+
+		if (React.isValidElement(child) && child.type === TabItem) {
+			React.Children.forEach(child.props.children, (nestedChild) => {
+				if (React.isValidElement(nestedChild)) {
+					if (nestedChild.type === Tab) {
+						const tabProps = nestedChild.props;
+						btns.push(
+							<Tab
+								{...tabProps}
+								tabId={theTabId}
+								index={tabIndex}
+								key={tabIndex}
+								isActive={tabIndex === activeIndex}
+								onClick={() => setActiveIndex(tabIndex)}
+							/>
+						);
+					} else if (nestedChild.type === TabPanel) {
+						const panelProps = nestedChild.props;
+						panels.push(
+							<TabPanel {...panelProps} tabId={theTabId} index={tabIndex} key={tabIndex} isActive={tabIndex === activeIndex} />
+						);
+					}
+				}
+			});
+		}
+	});
+
+	return (
+		<Lism {...getTabsProps(props)}>
+			{btns.length === 0 ? (
+				// TabItemを使わず直接TabListなどを子要素に配置する場合
+				children
+			) : (
+				<>
+					<TabList {...listProps}>{btns}</TabList>
+					{panels}
+				</>
+			)}
+		</Lism>
+	);
+}

package/src/components/Tabs/getProps.js

@@ -0,0 +1,8 @@
+import atts from '../../lib/helper/atts';
+
+export default function getTabsProps({ lismClass, ...props }) {
+	return {
+		lismClass: atts(lismClass, 'd--tabs'),
+		...props,
+	};
+}

package/src/components/Tabs/index.js

@@ -0,0 +1,7 @@
+import { default as Root } from './Tabs';
+import { default as Item } from './TabItem';
+import { default as List } from './TabList';
+import { default as Panel } from './TabPanel';
+import { default as Tab } from './Tab';
+
+export default { Root, List, Panel, Item, Tab };

package/src/components/Tabs/script.js

@@ -0,0 +1,8 @@
+import setEvent from './setEvent.js';
+
+document.addEventListener('DOMContentLoaded', function () {
+	const tabsAll = document.querySelectorAll('.d--tabs');
+	tabsAll.forEach((tabs) => {
+		setEvent(tabs);
+	});
+});

package/src/components/Tabs/setEvent.js

@@ -0,0 +1,87 @@
+/**
+ * タブ
+ */
+function tabControl(e) {
+	e.preventDefault();
+
+	// クリックされたボタン要素
+	const clickedButton = e.currentTarget;
+
+	// クリックイベントがキー（Enter / space）によって呼び出されたかどうか
+	// const iskeyClick = 0 === e.clientX;
+
+	// マウスクリック時はフォーカスを外す
+	// if (!iskeyClick) {
+	// 	clickedButton.blur();
+	// }
+
+	// 属性の切り替え
+	toggleAriaData(clickedButton);
+}
+
+const toggleAriaData = (clickedButton) => {
+	// すでにオープンされているタブの場合はなにもしない
+	const isOpend = 'true' === clickedButton.getAttribute('aria-selected');
+	if (isOpend) return;
+
+	// 新しく表示するBodyを取得
+	const targetID = clickedButton.getAttribute('aria-controls');
+	const targetBody = document.getElementById(targetID);
+	if (null === targetBody) return;
+
+	// 親のタブリスト(ul)を取得
+	const parentTabList = clickedButton.parentNode.parentNode;
+
+	// 現在選択中のタブボタンを取得
+	const selectedButton = parentTabList.querySelector('[aria-selected="true"]');
+
+	// 展開中のBodyを取得
+	const displayedID = selectedButton.getAttribute('aria-controls');
+	const displayedBody = document.getElementById(displayedID);
+
+	// ariaの処理
+	clickedButton.setAttribute('aria-selected', 'true');
+	selectedButton.setAttribute('aria-selected', 'false');
+	displayedBody.setAttribute('aria-hidden', 'true');
+	targetBody.setAttribute('aria-hidden', 'false');
+};
+
+function setEvent(tabs) {
+	const tabBtns = tabs.querySelectorAll('button[role="tab"]');
+	tabBtns.forEach((tabBtn) => {
+		tabBtn.addEventListener('click', function (e) {
+			tabControl(e);
+		});
+	});
+
+	// タブへのリンクがあるかどうか
+	const nowUrl = window?.location?.href;
+	if (!nowUrl) return;
+
+	const hasTabLink = -1 !== nowUrl.indexOf('?lism-tab=');
+	if (!hasTabLink) return;
+
+	// URLでタブを切り替える機能がONかどうか
+
+	// URLSearchParamsオブジェクトを取得
+	const url = new URL(nowUrl);
+	const params = url.searchParams;
+
+	// getメソッド
+	const targetTabId = params.get('lism-tab');
+	const target = tabs.querySelector(`[aria-controls="${targetTabId}"]`);
+	if (target) {
+		// transitionをオフにするための属性
+		tabs.dataset.hasTabLink = '1';
+
+		// タブ切り替え
+		toggleAriaData(target);
+
+		// 少し後で属性削除
+		setTimeout(() => {
+			delete tabs.dataset.hasTabLink;
+		}, 10);
+	}
+}
+
+export default setEvent;

package/src/components/__contexts.js

@@ -0,0 +1,4 @@
+import React from 'react';
+export const LayoutContext = React.createContext(null);
+
+// import {createContext} from "react"; で 使うと、関係ないコンポーネントも use client が必要になってしまう。

package/src/components/astro.ts

@@ -0,0 +1,3 @@
+export { default as Accordion } from './Accordion/astro';
+// export { default as Tabs } from './Tabs';
+// export { default as Modal } from './Modal';

package/src/components/react.ts

@@ -0,0 +1,3 @@
+export { default as Accordion } from './Accordion';
+// export { default as Tabs } from './Tabs';
+// export { default as Modal } from './Modal';