lism-css 0.3.5 → 0.5.1

package/packages/astro/Modal/Modal.astro

@@ -1,17 +1,16 @@
 ---
-import type { LismProps } from '../types';
+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;
+const props = Astro.props || {};
 ---
 
-<Layout tag='dialog' {...getProps(props)}>
+<Lism {...getProps(props)}>
 	<slot />
-</Layout>
+</Lism>
 
 <script>
 	import setModal from '../../../dist/components/Modal/setModal';

package/packages/astro/Modal/OpenBtn.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 { modalId = '', ...props } = Astro.props || {};
+const btnProps = { ...defaultProps.openBtn, ...props };
+---
+
+<Lism data-modal-open={modalId} {...btnProps}>
+	<slot />
+</Lism>

package/packages/astro/Modal/index.js

@@ -1,8 +1,7 @@
 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';
+import CloseBtn from './CloseBtn.astro';
+import OpenBtn from './OpenBtn.astro';
 
-export default { Root, Inner, Body, CloseIconBtn, Header, Footer };
+export default { Root, Inner, Body, CloseBtn, OpenBtn };

package/packages/astro/OverlayLink/OverlayLink.astro

@@ -1,5 +1,5 @@
 ---
-import type { LismProps } from '../types';
+import type { LismProps } from '../../types';
 import { Lism } from '../Lism';
 import getOverlayLinkProps from '../../../dist/components/OverlayLink/getProps';
 

package/packages/astro/Spacer/Spacer.astro

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

package/packages/astro/Stack/Stack.astro

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

package/packages/astro/Tabs/Tab.astro

@@ -1,5 +1,5 @@
 ---
-import type { LismProps } from '../types';
+import type { LismProps } from '../../types';
 import { Lism } from '../Lism';
 
 export interface Props extends LismProps {
@@ -12,15 +12,6 @@ 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}
->
+<Lism tag='button' lismClass='d--tabs_tab' setPlain role='tab' aria-controls={controlId} aria-selected={isActive ? 'true' : 'false'} {...props}>
 	<slot />
 </Lism>

package/packages/astro/Tabs/TabList.astro

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

package/packages/astro/Tabs/TabPanel.astro

@@ -1,5 +1,5 @@
 ---
-import type { LismProps } from '../types';
+import type { LismProps } from '../../types';
 import { Lism } from '../Lism';
 
 export interface Props extends LismProps {

package/packages/astro/Tabs/Tabs.astro

@@ -1,10 +1,10 @@
 ---
-import type { LismProps } from '../types';
-import { Grid } from '../Grid';
+import type { LismProps } from '../../types';
+import { Lism } from '../Lism';
 // import Tab from './Tab.astro';
 // import TabPanel from './TabPanel.astro';
 import TabList from './TabList.astro';
-import { uuidv4 } from '../helper/index.js';
+import { uuidv4 } from '../helper.js';
 import transformTabitems from './transformTabitems.js';
 import getTabsProps from '../../../dist/components/Tabs/getProps';
 
@@ -23,16 +23,12 @@ const { defaultIndex = 1, tabId = '', listProps = {}, ...props } = Astro.props |
 const theTabID = tabId ? tabId : uuidv4();
 
 // 子要素の方から順番に処理されていくので、文字列処理でデータを抽出
-const { btns, panels } = transformTabitems(
-	await Astro.slots.render('default'),
-	theTabID,
-	defaultIndex
-);
+const { btns, panels } = transformTabitems(await Astro.slots.render('default'), theTabID, defaultIndex);
 
 const hasItems = btns.length > 0;
 ---
 
-<Grid {...getTabsProps(props)}>
+<Lism {...getTabsProps(props)}>
 	{
 		btns && (
 			<TabList {...listProps}>
@@ -48,7 +44,7 @@ const hasItems = btns.length > 0;
 		})
 	}
 	{!hasItems && <slot />}
-</Grid>
+</Lism>
 
 <script>
 	// import setEvent from './setEvent';

package/packages/astro/Test/Test.astro

@@ -1,5 +1,5 @@
 ---
-import type { LismProps } from '../types';
+import type { LismProps } from '../../types';
 import { Lism } from '../Lism';
 
 // Propsの定義

package/packages/astro/Test/TestItem.astro

@@ -1,5 +1,5 @@
 ---
-import type { LismProps } from '../types';
+import type { LismProps } from '../../types';
 import { Lism } from '../Lism';
 
 // Propsの定義

package/packages/astro/WithSide/WithSide.astro

@@ -1,12 +1,5 @@
 ---
-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>
+<Lism layout='withSide' {...Astro.props}><slot /></Lism>

package/packages/astro/index.js

@@ -3,11 +3,14 @@
  */
 
 // export { default as Lism } from './Lism/Lism.astro';
-// export { Lism, Text, Media, Link } from './Lism';
+// export { Lism, HTML, Media, Link } from './Lism';
 export * from './Lism';
+export { default as HTML } from './HTML';
 export * from './Dummy';
 export * from './Box';
+export * from './Flow';
 export * from './Flex';
+export * from './Cluster';
 export * from './Stack';
 export * from './Grid';
 export * from './Columns';
@@ -19,10 +22,11 @@ export * from './Container';
 export * from './Layer';
 export * from './LinkBox';
 
-export * from './Spacer';
 export * from './Decorator';
 export * from './Divider';
 export * from './Icon';
+export * from './Media';
+export * from './Spacer';
 
 export { default as Accordion } from './Accordion';
 export { default as Modal } from './Modal';

package/packages/types/index.d.ts

@@ -21,10 +21,10 @@ export interface LismBaseProps {
 	pr?: ResponsiveValue<string | number>;
 	pt?: ResponsiveValue<string | number>;
 	pb?: ResponsiveValue<string | number>;
-	pis?: ResponsiveValue<string | number>;
-	pie?: ResponsiveValue<string | number>;
-	pbs?: ResponsiveValue<string | number>;
-	pbe?: ResponsiveValue<string | number>;
+	'px-s'?: ResponsiveValue<string | number>;
+	'px-e'?: ResponsiveValue<string | number>;
+	'py-s'?: ResponsiveValue<string | number>;
+	'py-e'?: ResponsiveValue<string | number>;
 
 	m?: ResponsiveValue<string | number>;
 	mx?: ResponsiveValue<string | number>;
@@ -33,18 +33,18 @@ export interface LismBaseProps {
 	mr?: ResponsiveValue<string | number>;
 	mt?: ResponsiveValue<string | number>;
 	mb?: ResponsiveValue<string | number>;
-	mis?: ResponsiveValue<string | number>;
-	mie?: ResponsiveValue<string | number>;
-	mbs?: ResponsiveValue<string | number>;
-	mbe?: ResponsiveValue<string | number>;
+	'mx-s'?: ResponsiveValue<string | number>;
+	'mx-e'?: ResponsiveValue<string | number>;
+	'my-s'?: ResponsiveValue<string | number>;
+	'my-e'?: ResponsiveValue<string | number>;
 
 	// Sizing
 	w?: ResponsiveValue<string | number>;
 	h?: ResponsiveValue<string | number>;
-	minW?: ResponsiveValue<string | number>;
-	minH?: ResponsiveValue<string | number>;
-	maxW?: ResponsiveValue<string | number>;
-	maxH?: ResponsiveValue<string | number>;
+	'min-w'?: ResponsiveValue<string | number>;
+	'min-h'?: ResponsiveValue<string | number>;
+	'max-w'?: ResponsiveValue<string | number>;
+	'max-h'?: ResponsiveValue<string | number>;
 
 	// Display
 	d?: ResponsiveValue<string>;
@@ -59,8 +59,8 @@ export interface LismBaseProps {
 	// Flexbox & Grid
 	gap?: ResponsiveValue<string | number>;
 	g?: ResponsiveValue<string | number>;
-	gx?: ResponsiveValue<string | number>;
-	gy?: ResponsiveValue<string | number>;
+	'g-x'?: ResponsiveValue<string | number>;
+	'g-y'?: ResponsiveValue<string | number>;
 	ai?: ResponsiveValue<string>;
 	jc?: ResponsiveValue<string>;
 	ac?: ResponsiveValue<string>;
@@ -140,19 +140,15 @@ export interface LismBaseProps {
 
 	// Context props
 	css?: Record<string, any>;
-	passVars?: string | string[];
+	// passVars?: string | string[];
 
 	// Utility classes
 	_?: string | string[];
 
 	// State classes
-	skipState?: boolean;
-	isFlow?: boolean | string;
+	flow?: boolean | string;
 	hasGutter?: boolean | string;
 	isContainer?: boolean | string;
-	isOverwide?: boolean;
-	isFullwide?: boolean;
-	isWide?: boolean;
 	isLayer?: boolean;
 	isLinkBox?: boolean;
 
@@ -172,7 +168,6 @@ export interface LismProps extends LismBaseProps {
 	children?: React.ReactNode;
 	variant?: string;
 	lismClass?: string;
-	lismState?: string[];
 	forwardedRef?: React.Ref<any>;
 }
 
@@ -184,9 +179,7 @@ export interface FlexProps extends LismProps {
 	fxd?: ResponsiveValue<string>;
 	fxf?: ResponsiveValue<string>;
 }
-export interface FlexItemProps extends LismProps {
-	layout?: React.ElementType;
-}
+
 export interface StackProps extends LismProps {}
 export interface GridProps extends LismProps {
 	_grid?: string;
@@ -276,7 +269,7 @@ export interface AccordionProps extends LismProps {
 export interface AccordionHeaderProps extends FlexProps {}
 export interface AccordionLabelProps extends LismProps {}
 export interface AccordionBodyProps extends LismProps {
-	isFlow?: boolean | string;
+	flow?: boolean | string;
 	innerProps?: LismProps;
 }
 
@@ -300,7 +293,9 @@ export interface ModalProps extends LismProps {
 
 // Export components
 export const Lism: React.FC<LismProps>;
-export const Box: React.FC<BoxProps>;
+export const HTML: React.FC<LismProps>;
+export const Box: React.FC<LismProps>;
+export const Flow: React.FC<LismProps>;
 export const Flex: React.FC<FlexProps>;
 export const FlexItem: React.FC<FlexItemProps>;
 export const Cluster: React.FC<FlexProps>;
@@ -337,6 +332,7 @@ export const Modal: React.FC<ModalProps>;
 // Re-export all as default
 export default {
 	Lism,
+	HTML,
 	Box,
 	Flex,
 	FlexItem,