lism-css 0.0.2 → 0.0.4

package/README.md

@@ -1,6 +1,6 @@
 ## Installation
 
-For details, see [Docs](https://lism-ui.com/)
+For details, see [Docs](https://lism-css.com/)
 
 ### 1. Installation
 
@@ -36,7 +36,7 @@ For HTML sites, you can also load CSS via CDN.
 import { Box, Text, ... } from 'lism-css/react';
 
 // ...
-<Box p={20} bgc="base-2">
+<Box p='20' bgc="base-2">
 	<Text fz="l">Lorem ipsum text...</Text>
 </Box>
 // ...

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "lism-css",
-	"version": "0.0.2",
+	"version": "0.0.4",
 	"description": "",
 	"author": {
 		"name": "ddryo",
@@ -22,8 +22,7 @@
 	},
 	"files": [
 		"dist",
-		"nexe-js",
-		"astro",
+		"packages",
 		"src/scss"
 	],
 	"type": "module",
@@ -43,8 +42,7 @@
 	"homepage": "https://www.lism.style",
 	"repository": {
 		"type": "git",
-		"url": "https://github.com/lism-ui/lism-css.git",
-		"directory": "packages/lism-css"
+		"url": "https://github.com/lism-ui/lism-css/tree/main/packages/lism-css"
 	},
 	"bugs": {
 		"url": "https://github.com/lism-ui/lism-css/issues"
@@ -61,7 +59,8 @@
 		"vite": "^6.3.5"
 	},
 	"peerDependencies": {
-		"react": ">=18.0.0"
+		"react": "^18 || ^19",
+		"react-dom": "^18 || ^19"
 	},
 	"sideEffects": false
 }

package/packages/astro/Accordion/AccBody.astro

@@ -0,0 +1,15 @@
+---
+import type { LismProps } from '../types';
+import { Lism } from '../Lism';
+import { Grid } from '../Grid';
+import { defaultProps } from '../../../dist/components/Accordion/getProps';
+
+interface Props extends LismProps {}
+const { isFlow, innerProps, ...props } = Astro.props || {};
+---
+
+<Grid {...defaultProps.body} {...props}>
+	<Lism isFlow={isFlow} {...defaultProps.inner} {...innerProps}>
+		<slot />
+	</Lism>
+</Grid>

package/packages/astro/Accordion/AccHeader.astro

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

package/packages/astro/Accordion/AccIcon.astro

@@ -0,0 +1,19 @@
+---
+import type { LismProps } from '../types';
+import { Lism } from '../Lism';
+import { Icon } from '../Icon';
+import { getAccIconProps } from '../../../dist/components/Accordion/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/packages/astro/Accordion/AccLabel.astro

@@ -0,0 +1,12 @@
+---
+import type { LismProps } from '../types';
+import { Lism } from '../Lism';
+import { defaultProps } from '../../../dist/components/Accordion/getProps';
+
+interface Props extends LismProps {}
+const props = Astro.props || {};
+---
+
+<Lism {...defaultProps.label} {...props}>
+	<slot />
+</Lism>

package/packages/astro/Accordion/Accordion.astro

@@ -0,0 +1,21 @@
+---
+import type { LismProps } from '../types';
+import getLismProps from '../../../dist/lib/getLismProps';
+import { getAccProps } from '../../../dist/components/Accordion/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 '../../../dist/components/Accordion/setAccordion';
+	setAccordion();
+</script>

package/packages/astro/Accordion/__setEvent.js

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

package/packages/astro/Accordion/index.js

@@ -0,0 +1,7 @@
+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';
+
+export default { Root, Header, Body, Icon, Label };

package/packages/astro/Box/Box.astro

@@ -0,0 +1,11 @@
+---
+import type { LismProps } from '../types';
+import { Lism } from '../Lism';
+import getProps from '../../../dist/components/Box/getProps';
+
+// Propsの定義
+interface Props extends LismProps {}
+const props = Astro.props || {};
+---
+
+<Lism {...getProps(props)}><slot /></Lism>

package/packages/astro/Box/index.js

@@ -0,0 +1 @@
+export { default as Box } from './Box.astro';

package/packages/astro/Center/Center.astro

@@ -0,0 +1,11 @@
+---
+import type { LismProps } from '../types';
+import { Grid } from '../Grid';
+// import getProps from '../../../dist/components/Center/getProps';
+
+// Propsの定義
+interface Props extends LismProps {}
+const props = Astro.props || {};
+---
+
+<Grid _grid='center' {...props}><slot /></Grid>

package/packages/astro/Center/index.js

@@ -0,0 +1 @@
+export { default as Center } from './Center.astro';

package/packages/astro/Columns/Columns.astro

@@ -0,0 +1,11 @@
+---
+import type { LismProps } from '../types';
+import { Grid } from '../Grid';
+import getProps from '../../../dist/components/Columns/getProps';
+
+// Propsの定義
+interface Props extends LismProps {}
+const props = Astro.props || {};
+---
+
+<Grid _grid='columns' {...getProps(props)}><slot /></Grid>

package/packages/astro/Columns/index.js

@@ -0,0 +1 @@
+export { default as Columns } from './Columns.astro';

package/packages/astro/Container/Container.astro

@@ -0,0 +1,11 @@
+---
+import type { LismProps } from '../types';
+import { Lism } from '../Lism';
+
+interface Props extends LismProps {}
+
+const { layout, size = true, ...props } = Astro.props || {};
+const Layout = layout || Lism;
+---
+
+<Layout isContainer={size} {...props}><slot /></Layout>

package/packages/astro/Container/index.js

@@ -0,0 +1 @@
+export { default as Container } from './Container.astro';

package/packages/astro/Decorator/Decorator.astro

@@ -0,0 +1,13 @@
+---
+import type { LismProps } from '../types';
+import { Lism } from '../Lism';
+import getProps from '../../../dist/components/Decorator/getProps';
+
+// Propsの定義
+interface Props extends LismProps {}
+const props = Astro.props || {};
+---
+
+<Lism {...getProps(props)}>
+	<slot />
+</Lism>

package/packages/astro/Decorator/index.js

@@ -0,0 +1 @@
+export { default as Decorator } from './Decorator.astro';

package/packages/astro/Divider/Divider.astro

@@ -0,0 +1,12 @@
+---
+import type { LismProps } from '../types';
+import { Lism } from '../Lism';
+import { getDividerProps } from '../../../dist/components/Divider/getProps';
+
+// Propsの定義
+interface Props extends LismProps {}
+
+const props = Astro.props || {};
+---
+
+<Lism skipState {...getDividerProps(props)} />

package/packages/astro/Divider/index.js

@@ -0,0 +1 @@
+export { default as Divider } from './Divider.astro';

package/packages/astro/Dummy/Dummy.astro

@@ -0,0 +1,12 @@
+---
+import type { LismProps } from '../types';
+import { Lism } from '../Lism';
+import getContent from '../../../dist/components/Dummy/getContent';
+
+// Propsの定義
+interface Props extends LismProps {}
+const { tag = 'p', pre = '', length = 'm', lang = 'en', offset = 0, ...props } = Astro.props || {};
+const content = getContent({ tag, pre, lang, length, offset });
+---
+
+<Lism tag={tag} {...props} set:html={content} />

package/packages/astro/Dummy/index.js

@@ -0,0 +1 @@
+export { default as Dummy } from './Dummy.astro';

package/packages/astro/Flex/Cluster.astro

@@ -0,0 +1,11 @@
+---
+import type { LismProps } from '../types';
+import Flex from './Flex.astro';
+
+interface Props extends LismProps {}
+const props = Astro.props || {};
+---
+
+<Flex variant='cluster' {...props}>
+	<slot />
+</Flex>

package/packages/astro/Flex/Flex.astro

@@ -0,0 +1,14 @@
+---
+import type { LismProps } from '../types';
+import { Lism } from '../Lism';
+import { getFlexProps } from '../../../dist/components/Flex/getProps';
+
+// Propsの定義
+interface Props extends LismProps {}
+
+let props = Astro.props || {};
+---
+
+<Lism {...getFlexProps(props)}>
+	<slot />
+</Lism>

package/packages/astro/Flex/index.js

@@ -0,0 +1,2 @@
+export { default as Flex } from './Flex.astro';
+export { default as Cluster } from './Cluster.astro';

package/packages/astro/Frame/Frame.astro

@@ -0,0 +1,12 @@
+---
+import type { LismProps } from '../types';
+import { Lism } from '../Lism';
+import getProps from '../../../dist/components/Frame/getProps';
+
+// Propsの定義
+interface Props extends LismProps {}
+
+const props = Astro.props || {};
+---
+
+<Lism {...getProps(props)}><slot /></Lism>

package/packages/astro/Frame/index.js

@@ -0,0 +1 @@
+export { default as Frame } from './Frame.astro';

package/packages/astro/Grid/Grid.astro

@@ -0,0 +1,13 @@
+---
+import type { LismProps } from '../types';
+import { Lism } from '../Lism';
+import { getGridProps } from '../../../dist/components/Grid/getProps';
+
+// Propsの定義
+interface Props extends LismProps {}
+let props = Astro.props;
+---
+
+<Lism {...getGridProps(props)}>
+	<slot />
+</Lism>

package/packages/astro/Grid/GridItem.astro

@@ -0,0 +1,15 @@
+---
+import type { LismProps } from '../types';
+import { Lism } from '../Lism';
+import { getGridItemProps } from '../../../dist/components/Grid/getProps';
+
+// Propsの定義
+interface Props extends LismProps {}
+
+let { layout, ...props } = Astro.props;
+const LismComponent = layout || Lism;
+---
+
+<LismComponent {...getGridItemProps(props)}>
+	<slot />
+</LismComponent>

package/packages/astro/Grid/index.js

@@ -0,0 +1,2 @@
+export { default as Grid } from './Grid.astro';
+export { default as GridItem } from './GridItem.astro';

package/packages/astro/Icon/Icon.astro

@@ -0,0 +1,25 @@
+---
+import type { LismProps } from '../types';
+import getLismProps from '../../../dist/lib/getLismProps';
+import getProps from '../../../dist/components/Icon/getProps';
+import SVG from './SVG.astro';
+
+// Propsの定義
+interface Props extends LismProps {}
+
+const props = Astro.props || {};
+
+// const hasChildren = Astro.slots.has('default');
+// let { IconTag, iconProps, otherProps } = getProps(props, hasChildren);
+// if (IconTag === '_SVG_') IconTag = SVG;
+
+let { Component, lismProps, exProps } = getProps(props);
+
+if (Component === '_SVG_') {
+	Component = SVG;
+}
+---
+
+<Component {...getLismProps(lismProps)} {...exProps}>
+	<slot />
+</Component>

package/packages/astro/Icon/SVG.astro

@@ -0,0 +1,30 @@
+---
+// Propsの定義
+interface Props {
+	size?: string | number;
+	fill?: string;
+	viewBox?: string;
+	path?: string;
+	[key: string]: any;
+}
+let {
+	size = '1em',
+	fill = 'currentColor',
+	viewBox = '0 0 24 24',
+	path,
+	...props
+} = Astro.props || {};
+---
+
+<svg
+	xmlns='http://www.w3.org/2000/svg'
+	viewBox={viewBox}
+	width={size}
+	height={size}
+	fill={fill}
+	focusable='false'
+	{...props}
+>
+	{path && <path d={path} />}
+	<slot />
+</svg>

package/packages/astro/Icon/index.js

@@ -0,0 +1,2 @@
+export { default as Icon } from './Icon.astro';
+// export { default as SVG } from './SVG.astro';

package/packages/astro/Layer/Layer.astro

@@ -0,0 +1,15 @@
+---
+import type { LismProps } from '../types';
+import { Lism } from '../Lism';
+import { getLayerProps } from '../../../dist/components/Layer/getProps';
+
+// Propsの定義
+interface Props extends LismProps {}
+
+let { layout, ...props } = Astro.props || {};
+const Layout = layout || Lism;
+---
+
+<Layout isLayer {...getLayerProps(props)}>
+	<slot />
+</Layout>

package/packages/astro/Layer/index.js

@@ -0,0 +1 @@
+export { default as Layer } from './Layer.astro';

package/packages/astro/LinkBox/LinkBox.astro

@@ -0,0 +1,16 @@
+---
+import type { LismProps } from '../types';
+import { Lism } from '../Lism';
+// import getProps from '../../../dist/components/LinkBox/getProps';
+
+interface Props extends LismProps {}
+const { layout, ...props } = Astro.props || {};
+
+const hasHref = !!props.href;
+const tag = hasHref ? 'a' : 'div';
+const LismComponent = layout || Lism;
+---
+
+<LismComponent isLinkBox hov='fade' tag={tag} {...props}>
+	<slot />
+</LismComponent>

package/packages/astro/LinkBox/index.js

@@ -0,0 +1 @@
+export { default as LinkBox } from './LinkBox.astro';

package/packages/astro/Lism/Link.astro

@@ -0,0 +1,10 @@
+---
+import type { LismProps } from '../types';
+import Lism from './Lism.astro';
+
+interface Props extends LismProps {}
+---
+
+<Lism skipState tag='a' {...Astro.props || {}}>
+	<slot />
+</Lism>

package/packages/astro/Lism/Lism.astro

@@ -0,0 +1,14 @@
+---
+import type { LismProps } from '../types';
+import getLismProps from '../../../dist/lib/getLismProps';
+
+// Propsの定義
+interface Props extends LismProps {}
+
+const { as, exProps, tag, ...props } = Astro.props || {};
+const JSX = as || tag || 'div';
+---
+
+<JSX {...getLismProps(props)} {...exProps}>
+	<slot />
+</JSX>

package/packages/astro/Lism/Media.astro

@@ -0,0 +1,24 @@
+---
+import type { LismProps } from '../types';
+import getLismProps from '../../../dist/lib/getLismProps';
+import getMediaProps from '../../../dist/components/getMediaProps';
+import { Image } from 'astro:assets';
+
+// Propsの定義
+interface Props extends LismProps {
+	// src?: string;
+	// alt?: string;
+	// width?: string | number;
+	// height?: string | number;
+}
+const { as, exProps, tag, ...props } = Astro.props || {};
+
+let JSX = as || tag || 'img';
+if (JSX === 'AstroImage') {
+	JSX = Image;
+}
+---
+
+<JSX {...getLismProps(getMediaProps(props))} {...exProps}>
+	<slot />
+</JSX>

package/packages/astro/Lism/Text.astro

@@ -0,0 +1,10 @@
+---
+import type { LismProps } from '../types';
+import Lism from './Lism.astro';
+
+interface Props extends LismProps {}
+---
+
+<Lism skipState tag='p' {...Astro.props || {}}>
+	<slot />
+</Lism>

package/packages/astro/Lism/index.js

@@ -0,0 +1,4 @@
+export { default as Lism } from './Lism.astro';
+export { default as Text } from './Text.astro';
+export { default as Media } from './Media.astro';
+export { default as Link } from './Link.astro';

package/packages/astro/Modal/Body.astro

@@ -0,0 +1,14 @@
+---
+import type { LismProps } from '../types';
+import { defaultProps } from '../../../dist/components/Modal/getProps';
+import { Lism } from '../Lism';
+
+// Propsの定義
+interface Props extends LismProps {}
+const { layout, ...props } = Astro.props || {};
+const Layout = layout || Lism;
+---
+
+<Layout {...defaultProps.body} {...props}>
+	<slot />
+</Layout>

package/packages/astro/Modal/CloseIconBtn.astro

@@ -0,0 +1,24 @@
+---
+import type { LismProps } from '../types';
+import { defaultProps } from '../../../dist/components/Modal/getProps';
+import { Lism } from '../Lism';
+import { Icon } from '../Icon';
+
+// Propsの定義
+interface Props extends LismProps {}
+const { modalId = '', icon, srText = 'Close', ...props } = Astro.props || {};
+const hasSlot = Astro.slots.has('default');
+---
+
+<Lism data-modal-close={modalId} {...defaultProps.closeBtn} {...props}>
+	{
+		hasSlot ? (
+			<slot />
+		) : (
+			<>
+				<Icon icon={icon || 'x'} />
+				<span class='u--hidden'>{srText || 'Close'}</span>
+			</>
+		)
+	}
+</Lism>

package/packages/astro/Modal/Footer.astro

@@ -0,0 +1,14 @@
+---
+import type { LismProps } from '../types';
+import { defaultProps } from '../../../dist/components/Modal/getProps';
+import { Lism } from '../Lism';
+
+// Propsの定義
+interface Props extends LismProps {}
+const { layout, ...props } = Astro.props || {};
+const Layout = layout || Lism;
+---
+
+<Layout {...defaultProps.footer} {...props}>
+	<slot />
+</Layout>

package/packages/astro/Modal/Header.astro

@@ -0,0 +1,14 @@
+---
+import type { LismProps } from '../types';
+import { defaultProps } from '../../../dist/components/Modal/getProps';
+import { Lism } from '../Lism';
+
+// Propsの定義
+interface Props extends LismProps {}
+const { layout, ...props } = Astro.props || {};
+const Layout = layout || Lism;
+---
+
+<Layout {...defaultProps.header} {...props}>
+	<slot />
+</Layout>

package/packages/astro/Modal/Inner.astro

@@ -0,0 +1,13 @@
+---
+import type { LismProps } from '../types';
+import { defaultProps } from '../../../dist/components/Modal/getProps';
+import { Stack } from '../Stack';
+
+// Propsの定義
+interface Props extends LismProps {}
+const props = Astro.props || {};
+---
+
+<Stack {...defaultProps.inner} {...props}>
+	<slot />
+</Stack>

package/packages/astro/Modal/Modal.astro

@@ -0,0 +1,20 @@
+---
+import type { LismProps } from '../types';
+import { getProps } from '../../../dist/components/Modal/getProps';
+import { Lism } from '../Lism';
+
+// Propsの定義
+interface Props extends LismProps {}
+const { layout, ...props } = Astro.props || {};
+const Layout = layout || Lism;
+---
+
+<Layout tag='dialog' {...getProps(props)}>
+	<slot />
+</Layout>
+
+<script>
+	import setModal from '../../../dist/components/Modal/setModal';
+	console.log('modal.astro');
+	setModal();
+</script>

package/packages/astro/Modal/index.js

@@ -0,0 +1,8 @@
+import Root from './Modal.astro';
+import Inner from './Inner.astro';
+import Body from './Body.astro';
+import CloseIconBtn from './CloseIconBtn.astro';
+import Header from './Header.astro';
+import Footer from './Footer.astro';
+
+export default { Root, Inner, Body, CloseIconBtn, Header, Footer };

package/packages/astro/OverlayLink/OverlayLink.astro

@@ -0,0 +1,10 @@
+---
+import type { LismProps } from '../types';
+import { Lism } from '../Lism';
+import getOverlayLinkProps from '../../../dist/components/OverlayLink/getProps';
+
+interface Props extends LismProps {}
+const props = Astro.props || {};
+---
+
+<Lism {...getOverlayLinkProps(props)}><slot /></Lism>

package/packages/astro/OverlayLink/index.js

@@ -0,0 +1 @@
+export { default as OverlayLink } from './OverlayLink.astro';

package/packages/astro/Spacer/Spacer.astro

@@ -0,0 +1,11 @@
+---
+import type { LismProps } from '../types';
+import { Lism } from '../Lism';
+import getProps from '../../../dist/components/Spacer/getProps';
+
+// Propsの定義
+interface Props extends LismProps {}
+const props = Astro.props || {};
+---
+
+<Lism skipState {...getProps(props)} />

package/packages/astro/Spacer/index.js

@@ -0,0 +1 @@
+export { default as Spacer } from './Spacer.astro';

package/packages/astro/Stack/Stack.astro

@@ -0,0 +1,7 @@
+---
+import Flex from '../Flex/Flex.astro';
+---
+
+<Flex _flex='stack' {...Astro.props}>
+	<slot />
+</Flex>

package/packages/astro/Stack/index.js

@@ -0,0 +1 @@
+export { default as Stack } from './Stack.astro';

package/packages/astro/Tabs/Tab.astro

@@ -0,0 +1,26 @@
+---
+import type { LismProps } from '../types';
+import { Lism } from '../Lism';
+
+export interface Props extends LismProps {
+	// controlId: string;
+	isActive?: boolean;
+	tabId?: string | number;
+	index?: number;
+}
+const { tabId = 'tab', index = 0, isActive, ...props } = Astro.props;
+const controlId = `${tabId}-${index}`;
+---
+
+<Lism
+	tag='button'
+	lismClass='d--tabs__tab'
+	className='re--style'
+	role='tab'
+	aria-controls={controlId}
+	aria-selected={isActive ? 'true' : 'false'}
+	skipState
+	{...props}
+>
+	<slot />
+</Lism>

package/packages/astro/Tabs/TabItem.astro

@@ -0,0 +1,8 @@
+---
+// memo: タブボタンが <button ~ button> で取得できることを前提にして<slot />だけにしている。
+// <slot name='tab' />,<slot name='panel' />に分け、それぞれをカスタムDOMで囲んだ方が確実にそれぞれの内容は取れるが、わざわざslot指定が必要になってしまう。
+---
+
+<lism-placeholder-tabitem>
+	<slot />
+</lism-placeholder-tabitem>

package/packages/astro/Tabs/TabList.astro

@@ -0,0 +1,8 @@
+---
+// import type { LismProps } from '../types';
+import { Flex } from '../Flex';
+---
+
+<Flex lismClass='d--tabs__list' role='tablist' {...Astro.props}>
+	<slot />
+</Flex>

package/packages/astro/Tabs/TabPanel.astro

@@ -0,0 +1,22 @@
+---
+import type { LismProps } from '../types';
+import { GridItem } from '../Grid';
+
+export interface Props extends LismProps {
+	isActive?: boolean;
+	tabId?: string | number;
+	index?: number;
+}
+const { tabId = 'tab', index = 0, isActive = false, ...props } = Astro.props;
+const controlId = `${tabId}-${index}`;
+---
+
+<GridItem
+	id={controlId}
+	role='tabpanel'
+	aria-hidden={isActive ? 'false' : 'true'}
+	lismClass='d--tabs__panel'
+	{...props}
+>
+	<slot />
+</GridItem>

package/packages/astro/Tabs/Tabs.astro

@@ -0,0 +1,60 @@
+---
+import type { LismProps } from '../types';
+import { Grid } from '../Grid';
+// import Tab from './Tab.astro';
+// import TabPanel from './TabPanel.astro';
+import TabList from './TabList.astro';
+import { uuidv4 } from '../helper/index.js';
+import transformTabitems from './transformTabitems.js';
+import getTabsProps from '../../../dist/components/Tabs/getProps';
+
+// import TheTab from './TheTab.astro';}
+// slotsについて: https://docs.astro.build/ja/reference/api-reference/#astroslots
+
+// Propsの定義
+interface Props extends LismProps {
+	uid?: string | number;
+	defaultIndex?: string | number;
+}
+// propsの取得
+const { defaultIndex = 1, tabId = '', listProps = {}, ...props } = Astro.props || {};
+
+// tabID生成
+const theTabID = tabId ? tabId : uuidv4();
+
+// 子要素の方から順番に処理されていくので、文字列処理でデータを抽出
+const { btns, panels } = transformTabitems(
+	await Astro.slots.render('default'),
+	theTabID,
+	defaultIndex
+);
+
+const hasItems = btns.length > 0;
+---
+
+<Grid {...getTabsProps(props)}>
+	{
+		btns && (
+			<TabList {...listProps}>
+				{btns.map((btn, index) => {
+					return <Fragment key={index} set:html={btn} />;
+				})}
+			</TabList>
+		)
+	}
+	{
+		panels.map((panel, index) => {
+			return <Fragment key={index} set:html={panel} />;
+		})
+	}
+	{!hasItems && <slot />}
+</Grid>
+
+<script>
+	// import setEvent from './setEvent';
+	import setEvent from '../../../dist/components/Tabs/setEvent';
+	const tabsAll = document.querySelectorAll('.d--tabs');
+	tabsAll.forEach((tabs) => {
+		setEvent(tabs);
+	});
+</script>

package/packages/astro/Tabs/index.js

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

package/packages/astro/Tabs/transformTabitems.js

@@ -0,0 +1,40 @@
+// <lism-placeholder-tabitem> → div.tabitem へ 変換
+export default function transformHTML(htmlString, tabID, defaultIndex) {
+	let index = 1; // 1スタート
+	let btns = [];
+	let panels = [];
+
+	// <lism-placeholder-tabitem>でコンテンツを囲んでいるので中身を解析する。
+	const regex = /<lism-placeholder-tabitem(.*?)>(.*?)<\/lism-placeholder-tabitem>/gs;
+	const matches = [...htmlString.matchAll(regex)];
+
+	// console.log(matches);
+	matches.forEach((match) => {
+		// const tabItemAttrs = match[1]; // 使わないがdata-astro-source-file属性が自動でついてきたりするので、属性値があっても問題ないようにしている。
+		const tabItemContent = match[2];
+
+		const controlId = `${tabID}-${index}`;
+		const isActive = index === defaultIndex;
+		index++;
+
+		// <lism-placeholder-tabtbn>からタブボタンを生成
+		const btnMatch = tabItemContent.match(/<button(.*?)>(.*?)<\/button>(.*)/s);
+		if (!btnMatch) return;
+		let btnAtts = btnMatch[1];
+		let btnContent = btnMatch[2];
+		let panel = btnMatch[3];
+
+		// btnContent = btnContent.replace(` slot="tab"`, '');
+		btnAtts = btnAtts.replace(`aria-controls="tab-0"`, `aria-controls="${controlId}"`);
+		panel = panel.replace(`id="tab-0"`, `id="${controlId}"`);
+		if (isActive) {
+			btnAtts = btnAtts.replace(/aria-selected="false"/, 'aria-selected="true"');
+			panel = panel.replace(/aria-hidden="true"/, 'aria-hidden="false"');
+		}
+
+		btns.push(`<button${btnAtts}>${btnContent}</button>`);
+		panels.push(panel);
+	});
+
+	return { btns, panels };
+}

package/packages/astro/Test/Test.astro

@@ -0,0 +1,14 @@
+---
+import type { LismProps } from '../types';
+import { Lism } from '../Lism';
+
+// Propsの定義
+interface Props extends LismProps {
+	duration?: string | number;
+}
+const props = Astro.props || {};
+---
+
+<Lism data-lism='test' bd p='20' {...props}>
+	<slot />
+</Lism>

package/packages/astro/Test/TestItem.astro

@@ -0,0 +1,14 @@
+---
+import type { LismProps } from '../types';
+import { Lism } from '../Lism';
+
+// Propsの定義
+interface Props extends LismProps {
+	duration?: string | number;
+}
+const props = Astro.props || {};
+---
+
+<Lism data-lism='test-item' bd bds='dashed' {...props}>
+	<slot />
+</Lism>

package/packages/astro/Test/index.js

@@ -0,0 +1,4 @@
+import { default as Root } from './Test.astro';
+import { default as Item } from './TestItem.astro';
+
+export default { Root, Item };

package/packages/astro/WithSide/WithSide.astro

@@ -0,0 +1,12 @@
+---
+import type { LismProps } from '../types';
+import { Lism } from '../Lism';
+import { getWithSideProps } from '../../../dist/components/WithSide/getProps';
+
+// Propsの定義
+interface Props extends LismProps {}
+
+const props = Astro.props || {};
+---
+
+<Lism {...getWithSideProps(props)}><slot /></Lism>

package/packages/astro/WithSide/index.js

@@ -0,0 +1 @@
+export { default as WithSide } from './WithSide.astro';

package/packages/astro/helper/index.js

@@ -0,0 +1,6 @@
+// https://stackoverflow.com/questions/105034/how-do-i-create-a-guid-uuid
+export function uuidv4() {
+	return '10000000-1000-4000-8000-100000000000'.replace(/[018]/g, (c) =>
+		(c ^ (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))).toString(16)
+	);
+}

package/packages/astro/index.js

@@ -0,0 +1,29 @@
+/**
+ * .astro でLismコンポーネントを配布
+ */
+
+// export { default as Lism } from './Lism/Lism.astro';
+// export { Lism, Text, Media, Link } from './Lism';
+export * from './Lism';
+export * from './Dummy';
+export * from './Box';
+export * from './Flex';
+export * from './Stack';
+export * from './Grid';
+export * from './Columns';
+export * from './Center';
+export * from './WithSide';
+export * from './Frame';
+
+export * from './Container';
+export * from './Layer';
+export * from './LinkBox';
+
+export * from './Spacer';
+export * from './Decorator';
+export * from './Divider';
+export * from './Icon';
+
+export { default as Accordion } from './Accordion';
+export { default as Modal } from './Modal';
+export { default as Tabs } from './Tabs';

package/packages/astro/types.ts

@@ -0,0 +1,28 @@
+// export interface LismClass {
+// 	b?: string;
+// 	c?: string;
+// 	l?: string;
+// 	e?: string;
+// }
+export interface LismStyle {
+	[key: string]: number | string; // 任意のプロパティを受け取る
+}
+
+export interface exProps {
+	[key: string]: any;
+}
+
+export interface LismProps {
+	lismClass?: string;
+	_lismClass?: string[];
+	lismStyle?: LismStyle;
+	lismState?: string[];
+	skipState?: boolean;
+	as?: any;
+	tag?: string;
+	variant?: string;
+	// lismState?: ;
+	// style
+	exProps?: exProps;
+	[key: string]: any;
+}

package/packages/next-js/Accordion/Accordion.jsx

@@ -0,0 +1,19 @@
+'use client';
+import Accordion from '../../../dist/components/Accordion';
+// import 'style';
+
+export function Root(props) {
+	return <Accordion.Root {...props} />;
+}
+export function Header(props) {
+	return <Accordion.Header {...props} />;
+}
+export function Label(props) {
+	return <Accordion.Label {...props} />;
+}
+export function Body(props) {
+	return <Accordion.Body {...props} />;
+}
+export function Icon(props) {
+	return <Accordion.Icon {...props} />;
+}

package/packages/next-js/Accordion/index.js

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