lism-css 0.3.5 → 0.5.1

package/dist/lib/isTokenValue.js

@@ -1,8 +1,9 @@
-import t from "../config/tokens.js";
-function i(n, r) {
-  if (typeof n != "string") return !1;
-  const e = t[n];
-  return Array.isArray(e) ? typeof r == "number" ? e.includes(`${r}`) : e.includes(r) : !1;
+import { TOKENS as s } from "../config/index.js";
+function i(t, e) {
+  if (typeof t != "string") return !1;
+  typeof e == "number" && (e = `${e}`);
+  const r = s[t];
+  return r instanceof Set ? r.has(e) : Array.isArray(r) ? r.includes(e) : typeof r == "object" ? (r.values || /* @__PURE__ */ new Set()).has(e) : !1;
 }
 export {
   i as default

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "lism-css",
-	"version": "0.3.5",
+	"version": "0.5.1",
 	"description": "A layout-first CSS framework for websites.",
 	"author": {
 		"name": "ddryo",
@@ -16,13 +16,20 @@
 		"dev": "vite",
 		"build": "vite build && pnpm build:css",
 		"build:vite": "vite build",
-		"build:css": "node scss-builder.cjs",
+		"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",
+		"config",
+		"config.js",
+		"vite-plugin.js",
+		"bin",
 		"packages",
 		"src/scss"
 	],
@@ -31,7 +38,12 @@
 	"types": "./packages/types/index.d.ts",
 	"exports": {
 		".": "./dist/index.js",
-		"./*": "./dist/*",
+		"./config.js": "./config.js",
+		"./config": "./config/index.js",
+		"./default-config": "./config/default-config.js",
+		"./vite-plugin": "./vite-plugin.mjs",
+		"./lib/*": "./dist/lib/*",
+		"./components/*": "./dist/components/*",
 		"./react": {
 			"import": "./dist/index.js",
 			"types": "./packages/types/index.d.ts"
@@ -43,6 +55,7 @@
 			"types": "./packages/types/index.d.ts"
 		},
 		"./astro/*": "./packages/astro/*",
+		"./types": "./packages/types/index.d.ts",
 		"./scss/*": "./src/scss/*",
 		"./*.css": "./dist/css/*.css"
 	},

package/packages/astro/Accordion/AccBody.astro

@@ -1,15 +1,14 @@
 ---
-import type { LismProps } from '../types';
+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 || {};
+const { flow, innerProps, ...props } = Astro.props || {};
 ---
 
-<Grid {...defaultProps.body} {...props}>
-	<Lism isFlow={isFlow} {...defaultProps.inner} {...innerProps}>
+<Lism {...defaultProps.body} {...props}>
+	<Lism layout='flow' flow={flow} {...defaultProps.inner} {...innerProps}>
 		<slot />
 	</Lism>
-</Grid>
+</Lism>

package/packages/astro/Accordion/AccHeader.astro

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

package/packages/astro/Accordion/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/packages/astro/Accordion/AccIcon.astro

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

package/packages/astro/Accordion/AccLabel.astro

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

package/packages/astro/Accordion/Accordion.astro

@@ -1,5 +1,5 @@
 ---
-import type { LismProps } from '../types';
+import type { LismProps } from '../../types';
 import getLismProps from '../../../dist/lib/getLismProps';
 import { getAccProps } from '../../../dist/components/Accordion/getProps';
 

package/packages/astro/Accordion/index.js

@@ -3,5 +3,6 @@ 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, Body, Icon, Label };
+export default { Root, Header, HeaderLabel, Body, Icon, Label };

package/packages/astro/Box/Box.astro

@@ -1,11 +1,10 @@
 ---
-import type { LismProps } from '../types';
+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>
+<Lism layout='box' {...props}><slot /></Lism>

package/packages/astro/Center/Center.astro

@@ -1,11 +1,5 @@
 ---
-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 || {};
+import { Lism } from '../Lism';
 ---
 
-<Grid _grid='center' {...props}><slot /></Grid>
+<Lism layout='center' {...Astro.props}><slot /></Lism>

package/packages/astro/Cluster/Cluster.astro

@@ -0,0 +1,5 @@
+---
+import { Lism } from '../Lism';
+---
+
+<Lism layout='cluster' {...Astro.props}><slot /></Lism>

package/packages/astro/Cluster/index.js

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

package/packages/astro/Columns/Columns.astro

@@ -1,11 +1,5 @@
 ---
-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 || {};
+import { Lism } from '../Lism';
 ---
 
-<Grid _grid='columns' {...getProps(props)}><slot /></Grid>
+<Lism layout='columns' {...Astro.props}><slot /></Lism>

package/packages/astro/Container/Container.astro

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

package/packages/astro/Decorator/Decorator.astro

@@ -1,7 +1,7 @@
 ---
-import type { LismProps } from '../types';
+import type { LismProps } from '../../types';
 import { Lism } from '../Lism';
-import getProps from '../../../dist/components/Decorator/getProps';
+import getProps from '../../../dist/components/atomic/Decorator/getProps';
 
 // Propsの定義
 interface Props extends LismProps {}

package/packages/astro/Divider/Divider.astro

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

package/packages/astro/Dummy/Dummy.astro

@@ -1,5 +1,5 @@
 ---
-import type { LismProps } from '../types';
+import type { LismProps } from '../../types';
 import { Lism } from '../Lism';
 import getContent from '../../../dist/components/Dummy/getContent';
 
@@ -9,4 +9,5 @@ const { tag = 'p', pre = '', length = 'm', lang = 'en', offset = 0, ...props } =
 const content = getContent({ tag, pre, lang, length, offset });
 ---
 
-<Lism tag={tag} {...props} set:html={content} />
+{tag === 'img' && <Lism tag='img' src='https://cdn.lism-css.com/dummy-image.jpg' width='600' height='400' alt='' {...props} />}
+{tag !== 'img' && <Lism tag={tag} {...props} set:html={content} />}

package/packages/astro/Flex/Flex.astro

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

package/packages/astro/Flex/index.js

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

package/packages/astro/Flow/Flow.astro

@@ -0,0 +1,5 @@
+---
+import { Lism } from '../Lism';
+---
+
+<Lism layout='flow' {...Astro.props}><slot /></Lism>

package/packages/astro/Flow/index.js

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

package/packages/astro/Frame/Frame.astro

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

package/packages/astro/Grid/Grid.astro

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

package/packages/astro/Grid/index.js

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

package/packages/astro/HTML/a.astro

@@ -0,0 +1,5 @@
+---
+import Lism from '../Lism/Lism.astro';
+---
+
+<Lism tag='a' {...Astro.props}><slot /></Lism>

package/packages/astro/HTML/button.astro

@@ -0,0 +1,5 @@
+---
+import Lism from '../Lism/Lism.astro';
+---
+
+<Lism tag='button' {...Astro.props}><slot /></Lism>

package/packages/astro/HTML/div.astro

@@ -0,0 +1,5 @@
+---
+import Lism from '../Lism/Lism.astro';
+---
+
+<Lism tag='div' {...Astro.props}><slot /></Lism>

package/packages/astro/HTML/h.astro

@@ -0,0 +1,6 @@
+---
+import Lism from '../Lism/Lism.astro';
+const { lv = '1', ...props } = Astro.props;
+---
+
+<Lism tag={`h${lv}`} {...props}><slot /></Lism>

package/packages/astro/HTML/img.astro

@@ -0,0 +1,5 @@
+---
+import Lism from '../Lism/Lism.astro';
+---
+
+<Lism tag='img' {...Astro.props}><slot /></Lism>

package/packages/astro/HTML/index.js

@@ -0,0 +1,12 @@
+import div from './div.astro';
+import p from './p.astro';
+import h from './h.astro';
+import span from './span.astro';
+import a from './a.astro';
+import button from './button.astro';
+import img from './img.astro';
+import ul from './ul.astro';
+import ol from './ol.astro';
+import li from './li.astro';
+
+export default { div, p, h, span, img, a, button, ul, ol, li };

package/packages/astro/HTML/li.astro

@@ -0,0 +1,5 @@
+---
+import Lism from '../Lism/Lism.astro';
+---
+
+<Lism tag='li' {...Astro.props}><slot /></Lism>

package/packages/astro/HTML/ol.astro

@@ -0,0 +1,5 @@
+---
+import Lism from '../Lism/Lism.astro';
+---
+
+<Lism tag='ol' {...Astro.props}><slot /></Lism>

package/packages/astro/HTML/p.astro

@@ -0,0 +1,5 @@
+---
+import Lism from '../Lism/Lism.astro';
+---
+
+<Lism tag='p' {...Astro.props}><slot /></Lism>

package/packages/astro/HTML/span.astro

@@ -0,0 +1,5 @@
+---
+import Lism from '../Lism/Lism.astro';
+---
+
+<Lism tag='span' {...Astro.props}><slot /></Lism>

package/packages/astro/HTML/ul.astro

@@ -0,0 +1,5 @@
+---
+import Lism from '../Lism/Lism.astro';
+---
+
+<Lism tag='ul' {...Astro.props}><slot /></Lism>

package/packages/astro/Icon/Icon.astro

@@ -1,7 +1,7 @@
 ---
-import type { LismProps } from '../types';
+import type { LismProps } from '../../types';
 import getLismProps from '../../../dist/lib/getLismProps';
-import getProps from '../../../dist/components/Icon/getProps';
+import getProps from '../../../dist/components/atomic/Icon/getProps';
 import SVG from './SVG.astro';
 
 // Propsの定義
@@ -28,6 +28,4 @@ if (Component === '_SVG_') {
 }
 ---
 
-<Component {...getLismProps(lismProps)} {...exProps}>
-	<slot />
-</Component>
+<Component {...getLismProps(lismProps)} {...exProps}><slot /></Component>

package/packages/astro/Layer/Layer.astro

@@ -1,15 +1,8 @@
 ---
-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;
+import getFilterProps from '../../../dist/components/getFilterProps';
 ---
 
-<Layout isLayer {...getLayerProps(props)}>
+<Lism isLayer {...getFilterProps(Astro.props, 'backdropFilter')}>
 	<slot />
-</Layout>
+</Lism>

package/packages/astro/LinkBox/LinkBox.astro

@@ -1,16 +1,15 @@
 ---
-import type { LismProps } from '../types';
+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 props = Astro.props || {};
 
 const hasHref = !!props.href;
 const tag = hasHref ? 'a' : 'div';
-const LismComponent = layout || Lism;
 ---
 
-<LismComponent isLinkBox hov='op' tag={tag} {...props}>
+<Lism isLinkBox tag={tag} {...props}>
 	<slot />
-</LismComponent>
+</Lism>

package/packages/astro/Lism/Link.astro

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

package/packages/astro/Lism/Lism.astro

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

package/packages/astro/Lism/Text.astro

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

package/packages/astro/Lism/index.js

@@ -1,4 +1,3 @@
 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/{Lism → Media}/Media.astro

@@ -1,16 +1,8 @@
 ---
-import type { LismProps } from '../types';
 import getLismProps from '../../../dist/lib/getLismProps';
-import getMediaProps from '../../../dist/components/getMediaProps';
+import getMediaProps from '../../../dist/components/atomic/Media/getProps';
 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';

package/packages/astro/Media/index.js

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

package/packages/astro/Modal/Body.astro

@@ -1,14 +1,13 @@
 ---
-import type { LismProps } from '../types';
+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;
+const props = Astro.props || {};
 ---
 
-<Layout {...defaultProps.body} {...props}>
+<Lism {...defaultProps.body} {...props}>
 	<slot />
-</Layout>
+</Lism>

package/packages/astro/Modal/CloseBtn.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 btnProps = { ...defaultProps.closeBtn, ...props };
+---
+
+{
+	Astro.slots.has('default') ? (
+		<Lism data-modal-close={modalId} {...btnProps}>
+			<slot />
+		</Lism>
+	) : (
+		<Lism data-modal-close={modalId} {...btnProps}>
+			<Icon icon={icon || 'x'} />
+			<span class='u-hidden'>{srText || 'Close'}</span>
+		</Lism>
+	)
+}

package/packages/astro/Modal/Inner.astro

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