lism-css 0.9.3 → 0.10.0

package/packages/astro/LinkBox/LinkBox.astro

@@ -1,15 +1,16 @@
 ---
-import type { LismProps } from '../../types';
+import type { HTMLTag, Polymorphic } from 'astro/types';
+import type { AstroLismBaseProps } from '../types';
 import { Lism } from '../Lism';
-// import getProps from '../../../dist/components/LinkBox/getProps';
 
-interface Props extends LismProps {}
-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,14 +1,11 @@
 ---
-import type { LismProps } from '../../types';
-import getLismProps from '../../../dist/lib/getLismProps';
+import type { HTMLTag, Polymorphic } from 'astro/types';
+import type { AstroLismBaseProps } from '../types';
+import getLismProps from 'lism-css/lib/getLismProps';
 
-// Propsの定義
-interface Props extends LismProps {}
+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,16 +1,17 @@
 ---
-import getLismProps from '../../../dist/lib/getLismProps';
-import getMediaProps from '../../../dist/components/atomic/Media/getProps';
+import type { HTMLTag, Polymorphic } from 'astro/types';
+import type { AstroLismBaseProps } from '../types';
+import getLismProps from 'lism-css/lib/getLismProps';
 import { Image } from 'astro:assets';
 
-const { as, exProps, ...props } = Astro.props || {};
+type Props<Tag extends HTMLTag = 'img'> = Polymorphic<{ as: Tag }> & AstroLismBaseProps;
 
-let JSX = as || 'img';
+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,5 +1,12 @@
 ---
+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<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,11 +1,12 @@
 ---
-import type { LismProps } from '../../types';
+import type { HTMLTag, Polymorphic } from 'astro/types';
+import type { AstroLismBaseProps } from '../types';
 import { Lism } from '../Lism';
-import getProps from '../../../dist/components/atomic/Spacer/getProps';
+import getProps from 'lism-css/react/atomic/Spacer/getProps';
 
-// Propsの定義
-interface Props extends LismProps {}
-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,5 +1,11 @@
 ---
+import type { HTMLTag, Polymorphic } from 'astro/types';
+import type { AstroLismFixedLayoutProps } from '../types';
 import { Lism } from '../Lism';
+
+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,5 +1,12 @@
 ---
+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<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,7 +1,15 @@
 ---
+import type { HTMLTag, Polymorphic } from 'astro/types';
+import type { AstroLismBaseProps } from '../types';
+import type { LismProps } from 'lism-css/lib/getLismProps';
 import { Lism } from '../Lism';
 
-const { contentSize = true, ...props } = Astro.props || {};
+type Props<Tag extends HTMLTag = 'div'> = Polymorphic<{ as: Tag }> &
+  AstroLismBaseProps & {
+    contentSize?: LismProps['isWrapper'];
+  };
+
+const { contentSize = true, ...props } = Astro.props;
 ---
 
 <Lism isWrapper={contentSize} {...props}><slot /></Lism>

package/packages/astro/env.d.ts

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

package/packages/astro/{index.js → 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

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

package/packages/astro/types.ts

@@ -0,0 +1,19 @@
+/**
+ * Astro 用の Lism Props 型
+ *
+ * @see https://github.com/withastro/roadmap/discussions/601
+ * @see https://github.com/withastro/roadmap/discussions/398
+ */
+import type { LismProps } from 'lism-css/lib/getLismProps';
+import type { LayoutSpecificProps } from 'lism-css/lib/types/LayoutProps';
+
+/** Polymorphic 型と組み合わせて使う共通ベース型 */
+export type AstroLismBaseProps = LismProps &
+  LayoutSpecificProps & {
+    exProps?: Record<string, unknown>;
+  };
+
+/** layout が固定されたレイアウトコンポーネント向けベース型 */
+export type AstroLismFixedLayoutProps = Omit<LismProps, 'layout'> & {
+  exProps?: Record<string, unknown>;
+};

package/src/scss/__memo/_lh-auto-all.scss

@@ -4,15 +4,15 @@
  	→ 下限・上限を超える値がセットされている時、その値を継承できない。
  */
 :root {
-	--lh-min: 1.3em;
-	--lh-max: 1.9em;
+  --lh-min: 1.3em;
+  --lh-max: 1.9em;
 }
 // ---------------------------------------------------------------------
 
 // 全要素で --fz, --lh を受け取れるように
 :where(body *) {
-	font-size: var(--fz, inherit);
-	line-height: var(--lh, inherit);
+  font-size: var(--fz, inherit);
+  line-height: var(--lh, inherit);
 }
 
 // [style*="--fz:"]{
@@ -23,15 +23,15 @@
 *:not([style*="font-size"]),
 [style*="--fz:"], // --fzでフォントサイズ指定されているもの
 [class*="-fz\:"], {
-	--slope: 0.35; // 自動計算用の傾き
-	--base: calc(var(--lh, var(--root--lh)) * 1em); // 計算ように単位をつけておく
+  --slope: 0.35; // 自動計算用の傾き
+  --base: calc(var(--lh, var(--root--lh)) * 1em); // 計算ように単位をつけておく
 
-	// 上限値を var(--base) にすることで、フォントサイズが大きい場合にのみ計算を適用することも可能
-	line-height: clamp(
-		min(var(--lh-min), var(--base)),
-		calc((var(--slope) * 1em) + var(--base) - (var(--slope) * var(--fz, 1em))),
-		max(var(--lh-max), var(--base))
-	);
+  // 上限値を var(--base) にすることで、フォントサイズが大きい場合にのみ計算を適用することも可能
+  line-height: clamp(
+    min(var(--lh-min), var(--base)),
+    calc((var(--slope) * 1em) + var(--base) - (var(--slope) * var(--fz, 1em))),
+    max(var(--lh-max), var(--base))
+  );
 }
 
 // .-fz:などに対して--lh指定されてあった場合に上書きできる位置で

package/src/scss/__memo/_lh-auto-h.scss

@@ -2,20 +2,20 @@
  * タイポグラフィ
  */
 :root {
-	--lh-min: 1.3em;
-	--lh-max: 1.9em;
+  --lh-min: 1.3em;
+  --lh-max: 1.9em;
 }
 
 // ---------------------------------------------------------------------
 body {
-	--fz: 1em; // 計算用に --fz の単位をem化しておく
-	--lh: var(--root--lh); // 任意の値
+  --fz: 1em; // 計算用に --fz の単位をem化しておく
+  --lh: var(--root--lh); // 任意の値
 }
 
 // :where(body *),
 :where(:is(h1, h2, h3, h4, h5, h6, p)) {
-	font-size: var(--fz, inherit);
-	line-height: var(--lh, inherit);
+  font-size: var(--fz, inherit);
+  line-height: var(--lh, inherit);
 }
 
 // [style*="--fz:"]{
@@ -30,21 +30,21 @@ body {
 [style*="--fz:"], // --fzでフォントサイズ指定されているもの
 :where(:is(h1, h2, h3, h4, h5, h6, p)):not([style*="font-size"]),
 [class*="-fz\:"] {
-	--slope: 0.35; // 自動計算用の傾き
-	--base: calc(var(--lh) * 1em); // 計算ように単位をつけておく
-
-	// 上限値を var(--base) にすることで、フォントサイズが大きい場合にのみ計算を適用することも可能
-	line-height: clamp(
-		min(var(--lh-min), var(--base)),
-		calc((var(--slope) * 1em) + var(--base) - (var(--slope) * var(--fz))),
-		max(var(--lh-max), var(--base))
-	);
-	font-size: var(--fz);
+  --slope: 0.35; // 自動計算用の傾き
+  --base: calc(var(--lh) * 1em); // 計算ように単位をつけておく
+
+  // 上限値を var(--base) にすることで、フォントサイズが大きい場合にのみ計算を適用することも可能
+  line-height: clamp(
+    min(var(--lh-min), var(--base)),
+    calc((var(--slope) * 1em) + var(--base) - (var(--slope) * var(--fz))),
+    max(var(--lh-max), var(--base))
+  );
+  font-size: var(--fz);
 }
 
 // --lh指定されている要素自身はその値で上書き。→ .-lh: 使ってもらう?
 [style*='--lh:'] {
-	line-height: var(--lh);
+  line-height: var(--lh);
 }
 
 // ---------------------------------------------------------------------

package/src/scss/__memo/_lh-manual.scss

@@ -1,36 +1,36 @@
 :root {
-	// 各fzサイズ用のline-height
-	--ls--6L--lh: 1.2;
-	--ls--5L--lh: 1.4;
-	--ls--4L--lh: 1.4;
-	--ls--3L--lh: 1.5;
-	--ls--2L--lh: 1.6;
-	--ls--L--lh: 1.6;
+  // 各fzサイズ用のline-height
+  --ls--6L--lh: 1.2;
+  --ls--5L--lh: 1.4;
+  --ls--4L--lh: 1.4;
+  --ls--3L--lh: 1.5;
+  --ls--2L--lh: 1.6;
+  --ls--L--lh: 1.6;
 
-	// 1,
-	// 1.25, 5XL
-	// 1.4 4XL
-	// 1.5, 2XL, 3XL,
-	// 1.6, L XL
-	// 1.75 base
-	// 2,
-	// 2.5
+  // 1,
+  // 1.25, 5XL
+  // 1.4 4XL
+  // 1.5, 2XL, 3XL,
+  // 1.6, L XL
+  // 1.75 base
+  // 2,
+  // 2.5
 
-	// 1, xs    sm   md,  lg  xl
-	// 1, 1.25, 1.5. 1.75, 2,  2.5
+  // 1, xs    sm   md,  lg  xl
+  // 1, 1.25, 1.5. 1.75, 2,  2.5
 }
 
 h1 {
-	--lh: var(--ls--4L--lh);
+  --lh: var(--ls--4L--lh);
 }
 h2 {
-	--lh: var(--ls--3L--lh);
+  --lh: var(--ls--3L--lh);
 }
 h3 {
-	--lh: var(--ls--2L--lh);
+  --lh: var(--ls--2L--lh);
 }
 h4 {
-	--lh: var(--ls--L--lh);
+  --lh: var(--ls--L--lh);
 }
 // h5 {}
 // h6 {}
@@ -39,20 +39,20 @@ h4 {
 // .-fz\:s {}
 // .-fz\:m {}
 .-fz\:l {
-	--lh: var(--ls--L--lh);
+  --lh: var(--ls--L--lh);
 }
 .-fz\:xl {
-	--lh: var(--ls--2L--lh);
+  --lh: var(--ls--2L--lh);
 }
 .-fz\:2xl {
-	--lh: var(--ls--3L--lh);
+  --lh: var(--ls--3L--lh);
 }
 .-fz\:3xl {
-	--lh: var(--ls--4L--lh);
+  --lh: var(--ls--4L--lh);
 }
 .-fz\:4xl {
-	--lh: var(--ls--5L--lh);
+  --lh: var(--ls--5L--lh);
 }
 .-fz\:5xl {
-	--lh: var(--ls--6L--lh);
+  --lh: var(--ls--6L--lh);
 }