lism-css 0.9.4 → 0.10.1

package/packages/astro/Group/Group.astro

@@ -0,0 +1,11 @@
+---
+import type { HTMLTag, Polymorphic } from 'astro/types';
+import type { AstroLismBaseProps } from '../types';
+import Lism from '../Lism/Lism.astro';
+
+type Props<Tag extends HTMLTag = 'div'> = Polymorphic<{ as: Tag }> & AstroLismBaseProps;
+
+const { as: Tag = 'div', ...props } = Astro.props;
+---
+
+<Lism as={Tag} {...props}><slot /></Lism>

package/packages/astro/Group/index.ts

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

package/packages/astro/HTML/_index_memo.js

@@ -5,16 +5,16 @@ import Lism from '../Lism/Lism.astro';
 
 // <Lism as="*"> の薄いラッパーを動的に生成するユーティリティ
 const createHTMLComponent = (tag, baseProps = {}) =>
-	createComponent((result, props = {}, slots = {}) => {
-		return renderComponent(result, 'Lism', Lism, { as: tag, ...baseProps, ...props }, slots);
-	});
+  createComponent((result, props = {}, slots = {}) => {
+    return renderComponent(result, 'Lism', Lism, { as: tag, ...baseProps, ...props }, slots);
+  });
 
 // 見出しだけ lv でタグ名を変える
 const createHeadingComponent = () =>
-	createComponent((result, props = {}, slots = {}) => {
-		const { lv = '1', ...rest } = props;
-		return renderComponent(result, 'Lism', Lism, { as: `h${lv}`, ...rest }, slots);
-	});
+  createComponent((result, props = {}, slots = {}) => {
+    const { lv = '1', ...rest } = props;
+    return renderComponent(result, 'Lism', Lism, { as: `h${lv}`, ...rest }, slots);
+  });
 
 // よく使うタグをまとめてラップ
 const tags = ['div', 'p', 'span', 'a', 'img', 'ul', 'ol', 'li'];

package/packages/astro/HTML/a.astro

@@ -1,9 +1,10 @@
 ---
-import type { AstroLismProps } from '../types';
+import type { AstroLismBaseProps } from '../types';
 import Lism from '../Lism/Lism.astro';
 
-type Props = AstroLismProps;
-const props = Astro.props || {};
+type Props = AstroLismBaseProps & Omit<astroHTML.JSX.AnchorHTMLAttributes, keyof AstroLismBaseProps>;
+
+const props = Astro.props;
 ---
 
-<Lism as='a' {...props}><slot /></Lism>
+<Lism as="a" {...props}><slot /></Lism>

package/packages/astro/HTML/button.astro

@@ -1,9 +1,10 @@
 ---
-import type { AstroLismProps } from '../types';
+import type { AstroLismBaseProps } from '../types';
 import Lism from '../Lism/Lism.astro';
 
-type Props = AstroLismProps;
-const props = Astro.props || {};
+type Props = AstroLismBaseProps & Omit<astroHTML.JSX.ButtonHTMLAttributes, keyof AstroLismBaseProps>;
+
+const props = Astro.props;
 ---
 
-<Lism as='button' {...props}><slot /></Lism>
+<Lism as="button" {...props}><slot /></Lism>

package/packages/astro/HTML/div.astro

@@ -1,9 +1,10 @@
 ---
-import type { AstroLismProps } from '../types';
+import type { AstroLismBaseProps } from '../types';
 import Lism from '../Lism/Lism.astro';
 
-type Props = AstroLismProps;
-const props = Astro.props || {};
+type Props = AstroLismBaseProps & Omit<astroHTML.JSX.HTMLAttributes, keyof AstroLismBaseProps>;
+
+const props = Astro.props;
 ---
 
-<Lism as='div' {...props}><slot /></Lism>
+<Lism as="div" {...props}><slot /></Lism>

package/packages/astro/HTML/h.astro

@@ -1,10 +1,11 @@
 ---
-import type { AstroLismProps } from '../types';
+import type { AstroLismBaseProps } from '../types';
 import Lism from '../Lism/Lism.astro';
 
-type Props = AstroLismProps & {
-	lv?: '1' | '2' | '3' | '4' | '5' | '6';
-};
+type Props = AstroLismBaseProps &
+  Omit<astroHTML.JSX.HTMLAttributes, keyof AstroLismBaseProps> & {
+    lv?: '1' | '2' | '3' | '4' | '5' | '6';
+  };
 
 const { lv = '1', ...props } = Astro.props;
 ---

package/packages/astro/HTML/img.astro

@@ -1,9 +1,10 @@
 ---
-import type { AstroLismProps } from '../types';
+import type { AstroLismBaseProps } from '../types';
 import Lism from '../Lism/Lism.astro';
 
-type Props = AstroLismProps;
-const props = Astro.props || {};
+type Props = AstroLismBaseProps & Omit<astroHTML.JSX.ImgHTMLAttributes, keyof AstroLismBaseProps>;
+
+const props = Astro.props;
 ---
 
-<Lism as='img' {...props}><slot /></Lism>
+<Lism as="img" {...props}><slot /></Lism>

package/packages/astro/HTML/li.astro

@@ -1,9 +1,10 @@
 ---
-import type { AstroLismProps } from '../types';
+import type { AstroLismBaseProps } from '../types';
 import Lism from '../Lism/Lism.astro';
 
-type Props = AstroLismProps;
-const props = Astro.props || {};
+type Props = AstroLismBaseProps & Omit<astroHTML.JSX.LiHTMLAttributes, keyof AstroLismBaseProps>;
+
+const props = Astro.props;
 ---
 
-<Lism as='li' {...props}><slot /></Lism>
+<Lism as="li" {...props}><slot /></Lism>

package/packages/astro/HTML/ol.astro

@@ -1,9 +1,10 @@
 ---
-import type { AstroLismProps } from '../types';
+import type { AstroLismBaseProps } from '../types';
 import Lism from '../Lism/Lism.astro';
 
-type Props = AstroLismProps;
-const props = Astro.props || {};
+type Props = AstroLismBaseProps & Omit<astroHTML.JSX.OlHTMLAttributes, keyof AstroLismBaseProps>;
+
+const props = Astro.props;
 ---
 
-<Lism as='ol' {...props}><slot /></Lism>
+<Lism as="ol" {...props}><slot /></Lism>

package/packages/astro/HTML/p.astro

@@ -1,9 +1,10 @@
 ---
-import type { AstroLismProps } from '../types';
+import type { AstroLismBaseProps } from '../types';
 import Lism from '../Lism/Lism.astro';
 
-type Props = AstroLismProps;
-const props = Astro.props || {};
+type Props = AstroLismBaseProps & Omit<astroHTML.JSX.HTMLAttributes, keyof AstroLismBaseProps>;
+
+const props = Astro.props;
 ---
 
-<Lism as='p' {...props}><slot /></Lism>
+<Lism as="p" {...props}><slot /></Lism>

package/packages/astro/HTML/span.astro

@@ -1,9 +1,10 @@
 ---
-import type { AstroLismProps } from '../types';
+import type { AstroLismBaseProps } from '../types';
 import Lism from '../Lism/Lism.astro';
 
-type Props = AstroLismProps;
-const props = Astro.props || {};
+type Props = AstroLismBaseProps & Omit<astroHTML.JSX.HTMLAttributes, keyof AstroLismBaseProps>;
+
+const props = Astro.props;
 ---
 
-<Lism as='span' {...props}><slot /></Lism>
+<Lism as="span" {...props}><slot /></Lism>

package/packages/astro/HTML/ul.astro

@@ -1,9 +1,10 @@
 ---
-import type { AstroLismProps } from '../types';
+import type { AstroLismBaseProps } from '../types';
 import Lism from '../Lism/Lism.astro';
 
-type Props = AstroLismProps;
-const props = Astro.props || {};
+type Props = AstroLismBaseProps & Omit<astroHTML.JSX.HTMLAttributes, keyof AstroLismBaseProps>;
+
+const props = Astro.props;
 ---
 
-<Lism as='ul' {...props}><slot /></Lism>
+<Lism as="ul" {...props}><slot /></Lism>

package/packages/astro/Heading/Heading.astro

@@ -0,0 +1,13 @@
+---
+import type { AstroLismBaseProps } from '../types';
+import Lism from '../Lism/Lism.astro';
+
+type Props = AstroLismBaseProps &
+  Omit<astroHTML.JSX.HTMLAttributes, keyof AstroLismBaseProps> & {
+    level?: '1' | '2' | '3' | '4' | '5' | '6';
+  };
+
+const { level = '2', ...props } = Astro.props;
+---
+
+<Lism as={`h${level}`} {...props}><slot /></Lism>

package/packages/astro/Heading/index.ts

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

package/packages/astro/Icon/Icon.astro

@@ -1,25 +1,28 @@
 ---
-import type { IconProps } from 'lism-css/react/atomic/Icon/getProps';
-import type { AstroLismProps } from '../types';
+import type { HTMLTag, Polymorphic } from 'astro/types';
+import type { ElementType } from 'react';
+import type { IconProps, IconOwnProps } from 'lism-css/react/atomic/Icon/getProps';
+import type { AstroLismBaseProps } from '../types';
 import getLismProps from 'lism-css/lib/getLismProps';
 import getProps from 'lism-css/react/atomic/Icon/getProps';
 import SVG from './SVG.astro';
 
-type AstroIconElementProps = astroHTML.JSX.SVGAttributes & astroHTML.JSX.ImgHTMLAttributes;
-
-type Props = Omit<AstroLismProps, 'as'> & IconProps & AstroIconElementProps;
+type Props<Tag extends HTMLTag = 'svg'> = Omit<Polymorphic<{ as: Tag }>, 'as'> & {
+  as?: Tag | ElementType;
+} & AstroLismBaseProps &
+  Omit<IconOwnProps, 'as' | keyof AstroLismBaseProps>;
 
 // const hasChildren = Astro.slots.has('default');
 // let { IconTag, iconProps, otherProps } = getProps(props, hasChildren);
 // if (IconTag === '_SVG_') IconTag = SVG;
 
-let { Component, lismProps, exProps = {}, content } = getProps(Astro.props);
+let { Component, lismProps, exProps = {}, content } = getProps(Astro.props as unknown as IconProps);
 
 if (Component === '_SVG_') {
-	Component = SVG;
-	if (content) {
-		exProps.__html = content;
-	}
+  Component = SVG;
+  if (content) {
+    exProps.__html = content;
+  }
 }
 ---
 

package/packages/astro/Icon/SVG.astro

@@ -1,25 +1,25 @@
 ---
 // Propsの定義
 interface Props {
-	size?: string | number;
-	fill?: string;
-	viewBox?: string;
-	path?: string;
-	__html?: string;
-	[key: string]: any;
+  size?: string | number;
+  fill?: string;
+  viewBox?: string;
+  path?: string;
+  __html?: string;
+  [key: string]: any;
 }
 let { size = '1em', fill = 'currentColor', viewBox = '0 0 24 24', path, __html, ...props } = Astro.props || {};
 ---
 
 {
-	__html ? (
-		<svg xmlns='http://www.w3.org/2000/svg' viewBox={viewBox} width={size} height={size} fill={fill} focusable='false' {...props}>
-			<Fragment set:html={__html} />
-		</svg>
-	) : (
-		<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>
-	)
+  __html ? (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox={viewBox} width={size} height={size} fill={fill} focusable="false" {...props}>
+      <Fragment set:html={__html} />
+    </svg>
+  ) : (
+    <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/Inline/Inline.astro

@@ -0,0 +1,11 @@
+---
+import type { HTMLTag, Polymorphic } from 'astro/types';
+import type { AstroLismBaseProps } from '../types';
+import Lism from '../Lism/Lism.astro';
+
+type Props<Tag extends HTMLTag = 'span'> = Polymorphic<{ as: Tag }> & AstroLismBaseProps;
+
+const { as: Tag = 'span', ...props } = Astro.props;
+---
+
+<Lism as={Tag} {...props}><slot /></Lism>

package/packages/astro/Inline/index.ts

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

package/packages/astro/Layer/Layer.astro

@@ -1,11 +1,11 @@
 ---
-import type { AstroLismProps } from '../types';
+import type { HTMLTag, Polymorphic } from 'astro/types';
+import type { AstroLismBaseProps } from '../types';
 import { Lism } from '../Lism';
-import getFilterProps, { type FilterProps } from 'lism-css/react/getFilterProps';
 
-type Props = AstroLismProps & FilterProps;
+type Props<Tag extends HTMLTag = 'div'> = Polymorphic<{ as: Tag }> & AstroLismBaseProps;
+
+const { as: Tag = 'div', exProps, ...props } = Astro.props;
 ---
 
-<Lism isLayer {...getFilterProps(Astro.props, 'backdropFilter')}>
-	<slot />
-</Lism>
+<Lism isLayer as={Tag} {...props} {...exProps}><slot /></Lism>

package/packages/astro/Link/Link.astro

@@ -0,0 +1,10 @@
+---
+import type { AstroLismBaseProps } from '../types';
+import Lism from '../Lism/Lism.astro';
+
+type Props = AstroLismBaseProps & Omit<astroHTML.JSX.AnchorHTMLAttributes, keyof AstroLismBaseProps>;
+
+const props = Astro.props;
+---
+
+<Lism as="a" {...props}><slot /></Lism>

package/packages/astro/Link/index.ts

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

package/packages/astro/LinkBox/LinkBox.astro

@@ -1,16 +1,16 @@
 ---
-import type { AstroLismProps } from '../types';
+import type { HTMLTag, Polymorphic } from 'astro/types';
+import type { AstroLismBaseProps } from '../types';
 import { Lism } from '../Lism';
 
-type Props = AstroLismProps & {
-	href?: string;
-};
-const props = Astro.props || {};
+type Props<Tag extends HTMLTag = 'a'> = Polymorphic<{ as: Tag }> & AstroLismBaseProps;
+
+const { as, exProps, ...props } = Astro.props;
 
 const hasHref = !!props.href;
-const tag = hasHref ? 'a' : 'div';
+// LinkBoxは基本的にリンク要素（aタグ）として機能するため、
+// hrefがないかつ、aタグとしてレンダリングする場合はdivタグに置き換える
+const tag: HTMLTag = !hasHref && (as ?? 'a') === 'a' ? 'div' : (as ?? 'a');
 ---
 
-<Lism isLinkBox as={tag} {...props}>
-	<slot />
-</Lism>
+<Lism isLinkBox as={tag} {...props} {...exProps}><slot /></Lism>

package/packages/astro/Lism/Lism.astro

@@ -1,13 +1,11 @@
 ---
-import type { AstroLismProps } from '../types';
+import type { HTMLTag, Polymorphic } from 'astro/types';
+import type { AstroLismBaseProps } from '../types';
 import getLismProps from 'lism-css/lib/getLismProps';
 
-interface Props extends AstroLismProps {}
+type Props<Tag extends HTMLTag = 'div'> = Polymorphic<{ as: Tag }> & AstroLismBaseProps;
 
-const { as, exProps, ...props } = Astro.props;
-const JSX = as || 'div';
+const { as: Tag = 'div', exProps, ...props } = Astro.props;
 ---
 
-<JSX {...getLismProps(props)} {...exProps}>
-	<slot />
-</JSX>
+<Tag {...getLismProps(props)} {...exProps}><slot /></Tag>

package/packages/astro/List/List.astro

@@ -0,0 +1,11 @@
+---
+import type { HTMLTag, Polymorphic } from 'astro/types';
+import type { AstroLismBaseProps } from '../types';
+import Lism from '../Lism/Lism.astro';
+
+type Props<Tag extends HTMLTag = 'ul'> = Polymorphic<{ as: Tag }> & AstroLismBaseProps;
+
+const { as: Tag = 'ul', ...props } = Astro.props;
+---
+
+<Lism as={Tag} {...props}><slot /></Lism>

package/packages/astro/List/ListItem.astro

@@ -0,0 +1,11 @@
+---
+import type { HTMLTag, Polymorphic } from 'astro/types';
+import type { AstroLismBaseProps } from '../types';
+import Lism from '../Lism/Lism.astro';
+
+type Props<Tag extends HTMLTag = 'li'> = Polymorphic<{ as: Tag }> & AstroLismBaseProps;
+
+const { as: Tag = 'li', ...props } = Astro.props;
+---
+
+<Lism as={Tag} {...props}><slot /></Lism>

package/packages/astro/List/index.ts

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

package/packages/astro/Media/Media.astro

@@ -1,20 +1,17 @@
 ---
-import type { AstroLismProps } from '../types';
-import type { MediaProps } from 'lism-css/react/atomic/Media/getProps';
+import type { HTMLTag, Polymorphic } from 'astro/types';
+import type { AstroLismBaseProps } from '../types';
 import getLismProps from 'lism-css/lib/getLismProps';
-import getMediaProps from 'lism-css/react/atomic/Media/getProps';
 import { Image } from 'astro:assets';
 
-interface Props extends AstroLismProps, MediaProps {}
+type Props<Tag extends HTMLTag = 'img'> = Polymorphic<{ as: Tag }> & AstroLismBaseProps;
 
-const { as, exProps, ...props } = Astro.props || {};
+const { as, exProps, ...props } = Astro.props;
 
 let JSX: any = as || 'img';
 if (JSX === 'AstroImage') {
-	JSX = Image;
+  JSX = Image;
 }
 ---
 
-<JSX {...getLismProps(getMediaProps(props))} {...exProps}>
-	<slot />
-</JSX>
+<JSX {...getLismProps(props)} {...exProps}><slot /></JSX>

package/packages/astro/SideMain/SideMain.astro

@@ -1,8 +1,12 @@
 ---
-import type { AstroLismProps } from '../types';
+import type { HTMLTag, Polymorphic } from 'astro/types';
+import type { AstroLismFixedLayoutProps } from '../types';
+import type { SideMainProps } from 'lism-css/lib/types/LayoutProps';
 import { Lism } from '../Lism';
 
-type Props = AstroLismProps;
+type Props<Tag extends HTMLTag = 'div'> = Polymorphic<{ as: Tag }> & AstroLismFixedLayoutProps & Omit<SideMainProps, 'layout'>;
+
+const props = Astro.props;
 ---
 
-<Lism layout='sideMain' {...Astro.props}><slot /></Lism>
+<Lism layout="sideMain" {...props}><slot /></Lism>

package/packages/astro/Spacer/Spacer.astro

@@ -1,10 +1,12 @@
 ---
-import type { AstroLismProps } from '../types';
+import type { HTMLTag, Polymorphic } from 'astro/types';
+import type { AstroLismBaseProps } from '../types';
 import { Lism } from '../Lism';
 import getProps from 'lism-css/react/atomic/Spacer/getProps';
 
-type Props = AstroLismProps;
-const props = Astro.props || {};
+type Props<Tag extends HTMLTag = 'div'> = Polymorphic<{ as: Tag }> & AstroLismBaseProps;
+
+const { as: Tag = 'div', exProps, ...props } = Astro.props;
 ---
 
-<Lism {...getProps(props)} />
+<Lism as={Tag} {...getProps(props)} {...exProps} />

package/packages/astro/Stack/Stack.astro

@@ -1,8 +1,11 @@
 ---
-import type { AstroLismProps } from '../types';
+import type { HTMLTag, Polymorphic } from 'astro/types';
+import type { AstroLismFixedLayoutProps } from '../types';
 import { Lism } from '../Lism';
 
-type Props = AstroLismProps;
+type Props<Tag extends HTMLTag = 'div'> = Polymorphic<{ as: Tag }> & AstroLismFixedLayoutProps;
+
+const props = Astro.props;
 ---
 
-<Lism layout='stack' {...Astro.props}><slot /></Lism>
+<Lism layout="stack" {...props}><slot /></Lism>

package/packages/astro/SwitchCols/SwitchCols.astro

@@ -1,8 +1,12 @@
 ---
-import type { AstroLismProps } from '../types';
+import type { HTMLTag, Polymorphic } from 'astro/types';
+import type { AstroLismFixedLayoutProps } from '../types';
+import type { SwitchColsProps } from 'lism-css/lib/types/LayoutProps';
 import { Lism } from '../Lism';
 
-type Props = AstroLismProps;
+type Props<Tag extends HTMLTag = 'div'> = Polymorphic<{ as: Tag }> & AstroLismFixedLayoutProps & Omit<SwitchColsProps, 'layout'>;
+
+const props = Astro.props;
 ---
 
-<Lism layout='switchCols' {...Astro.props}><slot /></Lism>
+<Lism layout="switchCols" {...props}><slot /></Lism>

package/packages/astro/Text/Text.astro

@@ -0,0 +1,11 @@
+---
+import type { HTMLTag, Polymorphic } from 'astro/types';
+import type { AstroLismBaseProps } from '../types';
+import Lism from '../Lism/Lism.astro';
+
+type Props<Tag extends HTMLTag = 'p'> = Polymorphic<{ as: Tag }> & AstroLismBaseProps;
+
+const { as: Tag = 'p', ...props } = Astro.props;
+---
+
+<Lism as={Tag} {...props}><slot /></Lism>

package/packages/astro/Text/index.ts

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

package/packages/astro/Wrapper/Wrapper.astro

@@ -1,12 +1,15 @@
 ---
-import type { AstroLismProps } from '../types';
+import type { HTMLTag, Polymorphic } from 'astro/types';
+import type { AstroLismBaseProps } from '../types';
+import type { LismProps } from 'lism-css/lib/getLismProps';
 import { Lism } from '../Lism';
 
-type Props = AstroLismProps & {
-	contentSize?: AstroLismProps['isWrapper'];
-};
+type Props<Tag extends HTMLTag = 'div'> = Polymorphic<{ as: Tag }> &
+  AstroLismBaseProps & {
+    contentSize?: LismProps['isWrapper'];
+  };
 
-const { contentSize = true, ...props } = Astro.props || {};
+const { contentSize = true, ...props } = Astro.props;
 ---
 
 <Lism isWrapper={contentSize} {...props}><slot /></Lism>

package/packages/astro/env.d.ts

@@ -1,10 +1,10 @@
 /// <reference types="astro/client" />
 
 declare module '*.astro' {
-	const component: (props: Record<string, unknown>) => unknown;
-	export default component;
+  const component: (props: Record<string, unknown>) => unknown;
+  export default component;
 }
 
 declare module 'astro:assets' {
-	export const Image: typeof import('astro/components/Image.astro').default;
+  export const Image: typeof import('astro/components/Image.astro').default;
 }

package/packages/astro/index.ts

@@ -4,7 +4,16 @@
 
 export * from './Lism';
 export { default as HTML } from './HTML';
+/** @deprecated DummyText / DummyImage (@lism-css/ui) を使用してください */
 export * from './Dummy';
+
+// semantic wrappers
+export * from './Text';
+export * from './Inline';
+export * from './Group';
+export * from './Heading';
+export * from './Link';
+export * from './List';
 export * from './Box';
 export * from './Flow';
 export * from './Flex';

package/packages/astro/tsconfig.json

@@ -1,12 +1,12 @@
 {
-	"extends": "astro/tsconfigs/strict",
-	"compilerOptions": {
-		"allowJs": true,
-		"checkJs": false,
-		"moduleResolution": "bundler",
-		"esModuleInterop": true,
-		"resolveJsonModule": true,
-		"skipLibCheck": true
-	},
-	"include": ["./**/*.astro", "./**/*.ts"]
+  "extends": "astro/tsconfigs/strict",
+  "compilerOptions": {
+    "allowJs": true,
+    "checkJs": false,
+    "moduleResolution": "bundler",
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true
+  },
+  "include": ["./**/*.astro", "./**/*.ts"]
 }