lism-css 0.10.1 → 0.10.2

package/README.ja.md

@@ -0,0 +1,260 @@
+# lism-css
+
+[English](./README.md) | [日本語](./README.ja.md)
+
+[![npm version](https://img.shields.io/npm/v/lism-css.svg)](https://www.npmjs.com/package/lism-css)
+[![License: MIT](https://img.shields.io/npm/l/lism-css.svg)](https://github.com/lism-css/lism-css/blob/main/LICENSE)
+
+## lism-css とは？
+
+Lism CSS は、WEBサイトのレイアウトを素早く、かつ美しく構築するための軽量な **CSS設計フレームワーク**です。
+
+[Every Layout](https://every-layout.dev/) のレイアウトプリミティブ、[Tailwind CSS](https://tailwindcss.com/) のユーティリティファーストアプローチ、[ITCSS](https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/) のレイヤリング等に着想を得て、それらを統合して設計されています。
+
+ビルドステップや設定は不要です。CDN 経由で CSS ファイルを読み込むか、npm からインポートするだけですぐに使い始められます。  
+React / Astro 向けのコンポーネントも提供しており、propsを通じてCSSクラスとカスタムプロパティに変換されるため、ランタイムでのスタイル生成なしにコンポーネントベースの開発が可能です。
+
+## 特徴
+
+- **軽量** - CSS バンドル全体で約 30 KB（gzip 圧縮時 約 8 KB）と、軽量です。
+- **ゼロビルドフレームワーク** — CSS ファイルを読み込むだけで、プレーン HTML でも動作します。ビルドツール、プリプロセッサ、設定は不要。CDN または npm で利用可能。
+- **レイアウト優先のモジュールアーキテクチャ** — レイアウトモジュール（`l--flex`、`l--stack`、`l--grid`、`l--columns`、`l--center`、`l--sideMain` など）で、カスタム CSS を書かずに一般的なレイアウトパターンを組み立てられます。
+- **CSS レイヤー構造** — `@layer`（lism-reset → lism.base → lism.modules → lism.utility）を使用した明確な詳細度管理。詳細度の衝突を最小限に抑えます。
+- **デザイントークン** — カラー、スペーシング、フォントサイズ、シャドウ、ボーダー半径を CSS カスタムプロパティで管理。変数を上書きするだけで簡単にカスタマイズできます。
+- **柔軟なプロップクラス** — `-{prop}:{value}` の命名規則（例: `-p:20`、`-bgc:base-2`、`-fz:l`）で CSS プロパティをユーティリティクラスにマッピングし、素早く読みやすいスタイリングを実現します。
+- **レスポンシブシステム** — ブレークポイント固有のクラスと CSS 変数（例: `-p_sm`、`-p_md`）にデフォルトでコンテナクエリを採用し、親要素ベースのレスポンシブデザインを実現。メディアクエリへの切り替えも可能。
+- **React & Astro コンポーネント** — React と Astro の両方に対応した専用コンポーネントが、props を Lism CSS のクラスと変数に自動変換します。`class="l--stack -g:20"` の代わりに `<Stack g="20">` と書けます。
+
+## インストール
+
+### CDN（ビルド不要）
+
+```html
+<link href="https://cdn.jsdelivr.net/npm/lism-css@0/dist/css/main.css" rel="stylesheet" />
+```
+
+### npm
+
+```bash
+npm i lism-css
+```
+
+または
+
+```bash
+pnpm add lism-css
+```
+
+## セットアップ
+
+グローバルスタイルとして CSS をインポートします:
+
+```js
+import 'lism-css/main.css';
+```
+
+**Next.js** の場合は、`layout.js`（App Router）または `_app.js`（Pages Router）で読み込みます。
+
+**Astro** の場合は、`node_modules` から `.astro` コンポーネントをインポートできるよう、`astro.config.js` に以下を追加します:
+
+```js
+export default defineConfig({
+  vite: {
+    ssr: {
+      noExternal: ['lism-css'],
+    },
+  },
+});
+```
+
+## 使い方
+
+### React
+
+```jsx
+import { Box, Flex, Stack, Grid, Text, Heading } from 'lism-css/react';
+
+<Stack g="20">
+  <Heading tag="h2" fz="xl">Welcome</Heading>
+  <Flex g="20" ai="center">
+    <Box p="20" bgc="base-2" bdrs="20">
+      <Text fz="l">Card A</Text>
+    </Box>
+    <Box p="20" bgc="base-2" bdrs="20">
+      <Text fz="l">Card B</Text>
+    </Box>
+  </Flex>
+</Stack>
+```
+
+### Astro
+
+```astro
+---
+import { Box, Flex, Stack, Text, Heading } from 'lism-css/astro';
+---
+
+<Stack g="20">
+  <Heading tag="h2" fz="xl">Welcome</Heading>
+  <Flex g="20" ai="center">
+    <Box p="20" bgc="base-2" bdrs="20">
+      <Text fz="l">Card A</Text>
+    </Box>
+    <Box p="20" bgc="base-2" bdrs="20">
+      <Text fz="l">Card B</Text>
+    </Box>
+  </Flex>
+</Stack>
+```
+
+### HTML（CSS のみ）
+
+```html
+<div class="l--stack -g:20">
+  <h2 class="-fz:xl">Welcome</h2>
+  <div class="l--flex -g:20 -ai:center">
+    <div class="-p:20 -bgc:base-2 -bdrs:20">
+      <p class="-fz:l">Card A</p>
+    </div>
+    <div class="-p:20 -bgc:base-2 -bdrs:20">
+      <p class="-fz:l">Card B</p>
+    </div>
+  </div>
+</div>
+```
+
+## コアコンポーネント
+
+Lism CSS は以下の React / Astro コンポーネントを提供します:
+
+**レイアウトコンポーネント:**
+Lism, Box, Flow, Flex, Cluster, Stack, Grid, FluidCols, SwitchCols, SideMain, Center, Columns, Frame
+
+**構造コンポーネント:**
+Container, Wrapper, Layer, LinkBox
+
+**コンテンツコンポーネント:**
+Text, Heading, Inline, Link, Group, List
+
+**アトミックコンポーネント:**
+Icon, Media, Decorator, Divider, Spacer
+
+すべてのコンポーネントは Lism props（例: `p`、`m`、`g`、`fz`、`bgc`、`bdrs`）を受け取り、CSS クラスと変数に自動的にマッピングされます。
+
+## CSS クラスシステム
+
+Lism CSS は構造化された命名規則を CSS クラスに使用しています:
+
+| タイプ | パターン | 例 |
+|--------|---------|-----|
+| レイアウトモジュール | `l--{name}` | `l--flex`, `l--grid`, `l--stack`, `l--center`, `l--columns`, `l--sideMain` |
+| ステートモジュール | `is--{name}` | `is--wrapper`, `is--container`, `is--layer` |
+| プロップクラス | `-{prop}:{value}` | `-p:20`, `-m:auto`, `-bgc:base-2`, `-fz:l`, `-ta:center` |
+| ブレークポイント | `-{prop}_{bp}` | `-p_sm`, `-g_md`, `-fz_lg` |
+| ユーティリティクラス | `u--{name}` | `u--cbox` |
+
+## レスポンシブシステム
+
+レスポンシブ値は、ブレークポイント固有のクラスと CSS 変数を使って設定します:
+
+**HTML:**
+
+```html
+<div class="-p:20 -p_sm -p_md" style="--p_sm:var(--s30);--p_md:var(--s40)">
+  <p>sm (480px) と md (800px) のブレークポイントでパディングが変化</p>
+</div>
+```
+
+**JSX (React / Astro):**
+
+```jsx
+<Lism p={['20', '30', '40']}>
+  <p>sm (480px) と md (800px) のブレークポイントでパディングが変化</p>
+</Lism>
+```
+
+デフォルトブレークポイント: `sm` = 480px、`md` = 800px、`lg` = 1120px（デフォルトでコンテナクエリを使用）。
+
+## デザイントークン
+
+Lism CSS は一貫したデザインのための CSS カスタムプロパティを提供します:
+
+- **カラー:** `--base`、`--base-2`、`--text`、`--text-2`、`--link`、`--divider`、`--brand`、`--accent`、パレットカラー（`--red`、`--blue`、`--green` など）
+- **スペーシング:** `--s10` 〜 `--s50`（rem 値にマッピング）
+- **フォントサイズ:** `--fz--xs` 〜 `--fz--2xl`
+- **ボーダー半径:** `--bdrs--5`（2px）〜 `--bdrs--99`（99rem）
+- **シャドウ:** `--shsz--5` 〜 `--shsz--50`（シャドウカラー設定可能）
+- **コンテナサイズ:** `--sz--xs`（32rem）〜 `--sz--xl`（1600px）
+
+## UI コンポーネント
+
+インタラクティブな UI コンポーネント（Accordion、Modal、Tabs、Alert、Avatar、Badge、Button など）については、別パッケージの [@lism-css/ui](https://www.npmjs.com/package/@lism-css/ui) を参照してください。
+
+```bash
+npm i @lism-css/ui
+```
+
+## AI ツール連携
+
+### llms.txt
+
+AI アシスタントや LLM ベースのツール向けに、機械可読なドキュメントインデックスを提供しています:
+
+```
+https://lism-css.com/llms.txt
+```
+
+### MCP サーバー
+
+AI コーディングツール向けの MCP（Model Context Protocol）サーバーが利用可能です:
+
+**Claude Code:**
+
+```bash
+claude mcp add lism-css -- npx -y @lism-css/mcp
+```
+
+**Cursor:**
+
+```json
+// .cursor/mcp.json
+{
+  "mcpServers": {
+    "lism-css": {
+      "command": "npx",
+      "args": ["-y", "@lism-css/mcp"]
+    }
+  }
+}
+```
+
+**VS Code (GitHub Copilot):**
+
+```json
+// .vscode/mcp.json
+{
+  "servers": {
+    "lism-css": {
+      "type": "stdio",
+      "command": "npx",
+      "args": ["-y", "@lism-css/mcp"]
+    }
+  }
+}
+```
+
+## ドキュメント
+
+詳細なドキュメントは [lism-css.com](https://lism-css.com) をご覧ください。
+
+## コミュニティ
+
+フィードバックや質問は、[Lism CSS Discord サーバー](https://discord.gg/6PMcFHvc4h)までお気軽にどうぞ。
+
+## クレジット
+
+- [Phosphor Icons](https://phosphoricons.com/) — MIT License ([source](https://github.com/phosphor-icons))
+
+## ライセンス
+
+MIT

package/README.md

@@ -1,12 +1,39 @@
 # lism-css
 
-A lightweight, layout-first CSS framework for websites.
-Provides CSS utilities, design tokens, and React / Astro layout components.
+[English](./README.md) | [日本語](./README.ja.md)
 
-For details, see [Documentation](https://lism-css.com/).
+[![npm version](https://img.shields.io/npm/v/lism-css.svg)](https://www.npmjs.com/package/lism-css)
+[![License: MIT](https://img.shields.io/npm/l/lism-css.svg)](https://github.com/lism-css/lism-css/blob/main/LICENSE)
+
+## What is lism-css?
+
+Lism CSS is a lightweight **CSS design framework** for quickly and beautifully building website layouts.
+
+Inspired by [Every Layout](https://every-layout.dev/)'s layout primitives, [Tailwind CSS](https://tailwindcss.com/)'s utility-first approach, and [ITCSS](https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/)'s layering concept, Lism CSS integrates these ideas into a cohesive architecture.
+
+No build step or configuration is required. Simply load the CSS file via CDN or import it from npm to get started. It also provides React and Astro components whose props are converted into CSS classes and custom properties, enabling component-based development without runtime style generation.
+
+## Features
+
+- **Lightweight** — The entire CSS bundle is approximately 30 KB (~8 KB gzipped).
+- **Zero-Build Framework** — Works with plain HTML by simply loading a CSS file. No build tool, preprocessor, or configuration needed. Available via CDN or npm.
+- **Layout-First Module Architecture** — Pre-built layout modules (`l--flex`, `l--stack`, `l--grid`, `l--columns`, `l--center`, `l--sideMain`, etc.) let you compose common layout patterns without writing custom CSS.
+- **CSS Layer Structure** — Uses `@layer` (lism-reset → lism.base → lism.modules → lism.utility) for clear specificity management. Minimizes specificity conflicts.
+- **Design Tokens** — Colors, spacing, font sizes, shadows, and border radii are managed as CSS custom properties. Easy to customize by overriding variables.
+- **Flexible Prop Classes** — A `-{prop}:{value}` naming convention (e.g., `-p:20`, `-bgc:base-2`, `-fz:l`) maps CSS properties to utility classes for quick, readable styling.
+- **Responsive System** — Breakpoint-specific classes and CSS variables (e.g., `-p_sm`, `-p_md`) use container queries by default for parent-based responsive design. Switchable to media queries.
+- **React & Astro Components** — Dedicated components for both React and Astro translate props into Lism CSS classes and variables automatically. Write `<Stack g="20">` instead of `class="l--stack -g:20"`.
 
 ## Installation
 
+### CDN (no build required)
+
+```html
+<link href="https://cdn.jsdelivr.net/npm/lism-css@0/dist/css/main.css" rel="stylesheet" />
+```
+
+### npm
+
 ```bash
 npm i lism-css
 ```
@@ -19,18 +46,24 @@ pnpm add lism-css
 
 ## Setup
 
-Import CSS as a global style.
+Import the CSS as a global style:
 
 ```js
 import 'lism-css/main.css';
 ```
 
-For Next.js, load it in `layout.js` (App Router) or `_app.js` (Pages Router).
+For **Next.js**, load it in `layout.js` (App Router) or `_app.js` (Pages Router).
 
-For HTML sites, you can load CSS via CDN:
+For **Astro**, add the following to `astro.config.js` to allow importing `.astro` components from `node_modules`:
 
-```html
-<link href="https://cdn.jsdelivr.net/npm/lism-css@0.9.4/dist/css/main.css" rel="stylesheet" />
+```js
+export default defineConfig({
+  vite: {
+    ssr: {
+      noExternal: ['lism-css'],
+    },
+  },
+});
 ```
 
 ## Usage
@@ -38,12 +71,18 @@ For HTML sites, you can load CSS via CDN:
 ### React
 
 ```jsx
-import { Box, Flex, Stack, Text } from 'lism-css/react';
+import { Box, Flex, Stack, Grid, Text, Heading } from 'lism-css/react';
 
 <Stack g="20">
-  <Box p="20" bgc="base-2">
-    <Text fz="l">Lorem ipsum text...</Text>
-  </Box>
+  <Heading tag="h2" fz="xl">Welcome</Heading>
+  <Flex g="20" ai="center">
+    <Box p="20" bgc="base-2" bdrs="20">
+      <Text fz="l">Card A</Text>
+    </Box>
+    <Box p="20" bgc="base-2" bdrs="20">
+      <Text fz="l">Card B</Text>
+    </Box>
+  </Flex>
 </Stack>
 ```
 
@@ -51,19 +90,165 @@ import { Box, Flex, Stack, Text } from 'lism-css/react';
 
 ```astro
 ---
-import { Box, Flex, Stack, Text } from 'lism-css/astro';
+import { Box, Flex, Stack, Text, Heading } from 'lism-css/astro';
 ---
 
 <Stack g="20">
-  <Box p="20" bgc="base-2">
-    <Text fz="l">Lorem ipsum text...</Text>
-  </Box>
+  <Heading tag="h2" fz="xl">Welcome</Heading>
+  <Flex g="20" ai="center">
+    <Box p="20" bgc="base-2" bdrs="20">
+      <Text fz="l">Card A</Text>
+    </Box>
+    <Box p="20" bgc="base-2" bdrs="20">
+      <Text fz="l">Card B</Text>
+    </Box>
+  </Flex>
 </Stack>
 ```
 
+### HTML (CSS-only)
+
+```html
+<div class="l--stack -g:20">
+  <h2 class="-fz:xl">Welcome</h2>
+  <div class="l--flex -g:20 -ai:center">
+    <div class="-p:20 -bgc:base-2 -bdrs:20">
+      <p class="-fz:l">Card A</p>
+    </div>
+    <div class="-p:20 -bgc:base-2 -bdrs:20">
+      <p class="-fz:l">Card B</p>
+    </div>
+  </div>
+</div>
+```
+
+## Core Components
+
+Lism CSS provides the following React and Astro components:
+
+**Layout Components:**
+Lism, Box, Flow, Flex, Cluster, Stack, Grid, FluidCols, SwitchCols, SideMain, Center, Columns, Frame
+
+**Structure Components:**
+Container, Wrapper, Layer, LinkBox
+
+**Content Components:**
+Text, Heading, Inline, Link, Group, List
+
+**Atomic Components:**
+Icon, Media, Decorator, Divider, Spacer
+
+All components accept Lism props (e.g., `p`, `m`, `g`, `fz`, `bgc`, `bdrs`) that automatically map to CSS classes and variables.
+
+## CSS Class System
+
+Lism CSS uses a structured naming convention for CSS classes:
+
+| Type | Pattern | Examples |
+|------|---------|----------|
+| Layout Module | `l--{name}` | `l--flex`, `l--grid`, `l--stack`, `l--center`, `l--columns`, `l--sideMain` |
+| State Module | `is--{name}` | `is--wrapper`, `is--container`, `is--layer` |
+| Prop Class | `-{prop}:{value}` | `-p:20`, `-m:auto`, `-bgc:base-2`, `-fz:l`, `-ta:center` |
+| Breakpoint | `-{prop}_{bp}` | `-p_sm`, `-g_md`, `-fz_lg` |
+| Utility Class | `u--{name}` | `u--cbox` |
+
+## Responsive System
+
+Responsive values are set using breakpoint-specific classes and CSS variables:
+
+**HTML:**
+
+```html
+<div class="-p:20 -p_sm -p_md" style="--p_sm:var(--s30);--p_md:var(--s40)">
+  <p>Padding changes at sm (480px) and md (800px) breakpoints</p>
+</div>
+```
+
+**JSX (React / Astro):**
+
+```jsx
+<Lism p={['20', '30', '40']}>
+  <p>Padding changes at sm (480px) and md (800px) breakpoints</p>
+</Lism>
+```
+
+Default breakpoints: `sm` = 480px, `md` = 800px, `lg` = 1120px (container queries by default).
+
+## Design Tokens
+
+Lism CSS provides CSS custom properties for consistent design:
+
+- **Colors:** `--base`, `--base-2`, `--text`, `--text-2`, `--link`, `--divider`, `--brand`, `--accent`, plus palette colors (`--red`, `--blue`, `--green`, etc.)
+- **Spacing:** `--s10` through `--s50` (mapped to rem values)
+- **Font Sizes:** `--fz--xs` through `--fz--2xl`
+- **Border Radius:** `--bdrs--5` (2px) through `--bdrs--99` (99rem)
+- **Shadows:** `--shsz--5` through `--shsz--50` with configurable shadow colors
+- **Container Sizes:** `--sz--xs` (32rem) through `--sz--xl` (1600px)
+
 ## UI Components
 
-For interactive UI components (Accordion, Modal, Tabs, etc.), see [@lism-css/ui](https://www.npmjs.com/package/@lism-css/ui).
+For interactive UI components (Accordion, Modal, Tabs, Alert, Avatar, Badge, Button, etc.), see the separate package [@lism-css/ui](https://www.npmjs.com/package/@lism-css/ui).
+
+```bash
+npm i @lism-css/ui
+```
+
+## AI Tool Integration
+
+### llms.txt
+
+For AI assistants and LLM-powered tools, a machine-readable documentation index is available:
+
+```
+https://lism-css.com/llms.txt
+```
+
+### MCP Server
+
+An MCP (Model Context Protocol) server is available for AI coding tools:
+
+**Claude Code:**
+
+```bash
+claude mcp add lism-css -- npx -y @lism-css/mcp
+```
+
+**Cursor:**
+
+```json
+// .cursor/mcp.json
+{
+  "mcpServers": {
+    "lism-css": {
+      "command": "npx",
+      "args": ["-y", "@lism-css/mcp"]
+    }
+  }
+}
+```
+
+**VS Code (GitHub Copilot):**
+
+```json
+// .vscode/mcp.json
+{
+  "servers": {
+    "lism-css": {
+      "type": "stdio",
+      "command": "npx",
+      "args": ["-y", "@lism-css/mcp"]
+    }
+  }
+}
+```
+
+## Documentation
+
+For full documentation, visit [lism-css.com](https://lism-css.com).
+
+## Community
+
+For feedback or questions, [join the Lism CSS Discord server](https://discord.gg/6PMcFHvc4h).
 
 ## Credits
 

package/dist/components/Group/Group.d.ts

@@ -1,3 +1,4 @@
 import { ElementType } from 'react';
 import { LismComponentProps } from '../Lism';
-export default function Group<T extends ElementType = 'div'>({ as, ...props }: LismComponentProps<T>): import("react").JSX.Element;
+import { GroupAllowedTag } from '../../lib/types/allowedTags';
+export default function Group<T extends GroupAllowedTag | Exclude<ElementType, string> = 'div'>({ as, ...props }: LismComponentProps<T>): import("react").JSX.Element;

package/dist/components/Group/Group.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { Group } from './index';
+declare const meta: Meta<typeof Group>;
+export default meta;
+type Story = StoryObj<typeof Group>;
+export declare const Default: Story;
+export declare const AsSection: Story;

package/dist/components/Heading/Heading.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { Heading } from './index';
+declare const meta: Meta<typeof Heading>;
+export default meta;
+type Story = StoryObj<typeof Heading>;
+export declare const Default: Story;
+export declare const AllLevels: Story;

package/dist/components/Inline/Inline.d.ts

@@ -1,3 +1,4 @@
 import { ElementType } from 'react';
 import { LismComponentProps } from '../Lism';
-export default function Inline<T extends ElementType = 'span'>({ as, ...props }: LismComponentProps<T>): import("react").JSX.Element;
+import { InlineAllowedTag } from '../../lib/types/allowedTags';
+export default function Inline<T extends InlineAllowedTag | Exclude<ElementType, string> = 'span'>({ as, ...props }: LismComponentProps<T>): import("react").JSX.Element;

package/dist/components/Inline/Inline.stories.d.ts

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { Inline } from './index';
+declare const meta: Meta<typeof Inline>;
+export default meta;
+type Story = StoryObj<typeof Inline>;
+export declare const Default: Story;
+export declare const AsEm: Story;
+export declare const AsCode: Story;
+export declare const AsTime: Story;

package/dist/components/List/List.d.ts

@@ -1,3 +1,4 @@
 import { ElementType } from 'react';
 import { LismComponentProps } from '../Lism';
-export default function List<T extends ElementType = 'ul'>({ as, ...props }: LismComponentProps<T>): import("react").JSX.Element;
+import { ListAllowedTag } from '../../lib/types/allowedTags';
+export default function List<T extends ListAllowedTag | Exclude<ElementType, string> = 'ul'>({ as, ...props }: LismComponentProps<T>): import("react").JSX.Element;

package/dist/components/List/List.stories.d.ts

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { List } from './index';
+declare const meta: Meta<typeof List>;
+export default meta;
+type Story = StoryObj<typeof List>;
+export declare const Default: Story;
+export declare const AsOl: Story;
+export declare const AsDl: Story;
+export declare const AsDlWithDiv: Story;

package/dist/components/List/ListItem.d.ts

@@ -1,3 +1,4 @@
 import { ElementType } from 'react';
 import { LismComponentProps } from '../Lism';
-export default function ListItem<T extends ElementType = 'li'>({ as, ...props }: LismComponentProps<T>): import("react").JSX.Element;
+import { ListItemAllowedTag } from '../../lib/types/allowedTags';
+export default function ListItem<T extends ListItemAllowedTag | Exclude<ElementType, string> = 'li'>({ as, ...props }: LismComponentProps<T>): import("react").JSX.Element;

package/dist/components/Text/Text.d.ts

@@ -1,3 +1,4 @@
 import { ElementType } from 'react';
 import { LismComponentProps } from '../Lism';
-export default function Text<T extends ElementType = 'p'>({ as, ...props }: LismComponentProps<T>): import("react").JSX.Element;
+import { TextAllowedTag } from '../../lib/types/allowedTags';
+export default function Text<T extends TextAllowedTag | Exclude<ElementType, string> = 'p'>({ as, ...props }: LismComponentProps<T>): import("react").JSX.Element;

package/dist/components/Text/Text.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { Text } from './index';
+declare const meta: Meta<typeof Text>;
+export default meta;
+type Story = StoryObj<typeof Text>;
+export declare const Default: Story;

package/dist/components/atomic/Media/Media.d.ts

@@ -1,3 +1,4 @@
 import { ElementType } from 'react';
 import { LismComponentProps } from '../../Lism';
-export default function Media<T extends ElementType = 'img'>(props: LismComponentProps<T>): import("react").JSX.Element;
+import { MediaAllowedTag } from '../../../lib/types/allowedTags';
+export default function Media<T extends MediaAllowedTag | Exclude<ElementType, string> = 'img'>({ as, ...props }: LismComponentProps<T>): import("react").JSX.Element;

package/dist/components/atomic/Media/Media.stories.d.ts

@@ -6,3 +6,6 @@ export declare const Default: Story;
 export declare const WithObjectFitCover: Story;
 export declare const WithObjectFitContain: Story;
 export declare const WithObjectPosition: Story;
+export declare const WithVideo: Story;
+export declare const WithIframe: Story;
+export declare const WithPicture: Story;

package/dist/components/atomic/Media/index.js

@@ -1,8 +1,8 @@
-import { jsx as i } from "react/jsx-runtime";
-import m from "../../Lism/index.js";
-function a(r) {
-  return /* @__PURE__ */ i(m, { as: "img", ...r });
+import { jsx as m } from "react/jsx-runtime";
+import o from "../../Lism/index.js";
+function e({ as: r, ...i }) {
+  return /* @__PURE__ */ m(o, { as: r ?? "img", ...i });
 }
 export {
-  a as default
+  e as default
 };

package/dist/css/base/set.css

@@ -1 +1 @@
-.set--cqUnit{--REM:var(--REM--cq);font-size:var(--REM--cq);--fz--base:var(--REM);--hl-unit:calc(var(--REM)*0.125);--hl--xs:var(--hl-unit);--hl--s:calc(var(--hl-unit)*2);--hl--base:calc(var(--hl-unit)*3);--hl--l:calc(var(--hl-unit)*4);--s-unit:calc(var(--REM)*0.5);--s5:calc(var(--s-unit)*0.5);--s10:var(--s-unit);--s15:calc(var(--s-unit)*1.5);--s20:calc(var(--s-unit)*2);--s30:calc(var(--s-unit)*3);--s40:calc(var(--s-unit)*5);--s50:calc(var(--s-unit)*8);--s60:calc(var(--s-unit)*13);--s70:calc(var(--s-unit)*21);--s80:calc(var(--s-unit)*34)}:root{--_is_sm:unset;--_is_md:unset}@container (min-width: 480px){.set--bp{--_is_sm: }}@container (min-width: 800px){.set--bp{--_is_md: }}@media (any-hover:hover){.set--hov:hover{--_notHov: }.set--hov:not(:is(:hover,:focus-within)){--_isHov: }}@media (any-hover:none){.set--hov{--_isHov: }}.set--hov:is(:focus-visible,:focus-within){--_notHov: }.set--transition{transition:var(--hov-duration,.25s) var(--hov-ease,linear) var(--hov-delay,0s);transition-property:var(--hov-prop,all)}.set--innerRs{--bdrs--inner:calc(var(--bdrs, 0px) - var(--p, 0px))}.set--plain{background:none;border:none;border-radius:0;color:inherit;font:inherit;height:auto;line-height:calc(1em + var(--hl)*2);margin:0;max-height:none;max-width:none;min-height:0;min-width:0;padding:0;text-decoration:none;width:auto}.set--gutter{padding-inline:var(--gutter-size)}
+.set--cqUnit{--REM:var(--REM--cq);font-size:var(--REM);--hl-unit:calc(var(--REM)*0.125);--hl--xs:var(--hl-unit);--hl--s:calc(var(--hl-unit)*2);--hl--base:calc(var(--hl-unit)*3);--hl--l:calc(var(--hl-unit)*4);--s-unit:calc(var(--REM)*0.5);--s5:calc(var(--s-unit)*0.5);--s10:var(--s-unit);--s15:calc(var(--s-unit)*1.5);--s20:calc(var(--s-unit)*2);--s30:calc(var(--s-unit)*3);--s40:calc(var(--s-unit)*5);--s50:calc(var(--s-unit)*8);--s60:calc(var(--s-unit)*13);--s70:calc(var(--s-unit)*21);--s80:calc(var(--s-unit)*34)}:root{--_is_sm:unset;--_is_md:unset}@container (min-width: 480px){.set--bp{--_is_sm: }}@container (min-width: 800px){.set--bp{--_is_md: }}@media (any-hover:hover){.set--hov:hover{--_notHov: }.set--hov:not(:is(:hover,:focus-within)){--_isHov: }}@media (any-hover:none){.set--hov{--_isHov: }}.set--hov:is(:focus-visible,:focus-within){--_notHov: }.set--transition{transition:var(--hov-duration,.25s) var(--hov-ease,linear) var(--hov-delay,0s);transition-property:var(--hov-prop,all)}.set--innerRs{--bdrs--inner:calc(var(--bdrs, 0px) - var(--p, 0px))}.set--plain{background:none;border:none;border-radius:0;color:inherit;font:inherit;height:auto;line-height:calc(1em + var(--hl)*2);margin:0;max-height:none;max-width:none;min-height:0;min-width:0;padding:0;text-decoration:none;width:auto}.set--gutter{padding-inline:var(--gutter-size)}