@lism-css/ui 0.2.1 → 0.2.2

package/dist/components/Accordion/astro/index.d.ts

@@ -1,3 +1,9 @@
+import { default as Root } from './Accordion.astro';
+import { default as Header } from './AccHeader.astro';
+import { default as HeaderLabel } from './AccHeaderLabel.astro';
+import { default as Body } from './AccBody.astro';
+import { default as Icon } from './AccIcon.astro';
+import { default as Label } from './AccLabel.astro';
 declare namespace _default {
     export { Root };
     export { Header };

package/dist/components/Avatar/astro/index.d.ts

@@ -1 +1 @@
-export {};
+export { default } from './Avatar.astro';

package/dist/components/Badge/astro/index.d.ts

@@ -1 +1 @@
-export {};
+export { default } from './Badge.astro';

package/dist/components/Button/astro/index.d.ts

@@ -1 +1 @@
-export {};
+export { default } from './Button.astro';

package/dist/components/Callout/getProps.d.ts

@@ -7,7 +7,7 @@ export type CalloutProps = {
     [key: string]: unknown;
 };
 export default function getCalloutProps({ type, keycolor, icon, title, flow, ...props }: CalloutProps): {
-    icon: string | null;
+    icon: string;
     title: string | undefined;
     flow: string;
     lismClass: string;

package/dist/components/Chat/astro/index.d.ts

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

package/dist/components/Chat/getProps.d.ts

@@ -0,0 +1,53 @@
+/**
+ * Chat コンポーネントのルートプロパティを生成
+ */
+export default function getChatProps({ variant, direction, keycolor, ...props }: {
+    [x: string]: any;
+    variant?: string | undefined;
+    direction?: string | undefined;
+    keycolor?: string | undefined;
+}): {
+    lismClass: string;
+    variant: string;
+    keycolor: string;
+    'data-chat-dir': string;
+    ji: string;
+};
+export namespace defaultProps {
+    let avatar: {
+        lismClass: string;
+        bgc: string;
+        ar: string;
+        bdrs: string;
+        'aria-hidden': string;
+    };
+    namespace name {
+        let lismClass: string;
+        let c: string;
+        let fs: string;
+        let fz: string;
+        let lh: string;
+        let py: string;
+        let px: string;
+        let aslf: string;
+    }
+    namespace body {
+        let lismClass_1: string;
+        export { lismClass_1 as lismClass };
+        export let pos: string;
+    }
+    namespace deco {
+        let lismClass_2: string;
+        export { lismClass_2 as lismClass };
+        let pos_1: string;
+        export { pos_1 as pos };
+    }
+    namespace content {
+        let lismClass_3: string;
+        export { lismClass_3 as lismClass };
+        export let bdrs: string;
+        export let p: string;
+        let lh_1: string;
+        export { lh_1 as lh };
+    }
+}

package/dist/components/Chat/react/Chat.d.ts

@@ -0,0 +1,7 @@
+export default function Chat({ name, avatar, flow, children, ...props }: {
+    [x: string]: any;
+    name: any;
+    avatar: any;
+    flow?: string | undefined;
+    children: any;
+}): import("react").JSX.Element;

package/dist/components/Chat/react/index.d.ts

@@ -0,0 +1 @@
+export { default } from './Chat';

package/dist/components/Modal/astro/index.d.ts

@@ -1,3 +1,8 @@
+import { default as Root } from './Modal.astro';
+import { default as Inner } from './Inner.astro';
+import { default as Body } from './Body.astro';
+import { default as CloseBtn } from './CloseBtn.astro';
+import { default as OpenBtn } from './OpenBtn.astro';
 declare namespace _default {
     export { Root };
     export { Inner };

package/dist/components/NavMenu/astro/index.d.ts

@@ -0,0 +1,11 @@
+import { default as Root } from './Root.astro';
+import { default as Nest } from './Nest.astro';
+import { default as Item } from './Item.astro';
+import { default as Link } from './Link.astro';
+declare namespace _default {
+    export { Root };
+    export { Nest };
+    export { Item };
+    export { Link };
+}
+export default _default;

package/dist/components/NavMenu/getProps.d.ts

@@ -0,0 +1,32 @@
+/**
+ * NavMenu.Root のプロパティを処理
+ * @param {object} props - コンポーネントのプロパティ
+ * @param {string} [props.hovC] - ホバー時のテキストカラー（--hov-c として出力）
+ * @param {string} [props.hovBgc] - ホバー時の背景カラー（--hov-bgc として出力）
+ * @param {string} [props.itemP] - 各アイテムのパディング（--_item-p として出力）
+ * @param {object} [props.style] - スタイルオブジェクト
+ */
+export function getRootProps({ hovC, hovBgc, itemP, style, ...props }: {
+    hovC?: string | undefined;
+    hovBgc?: string | undefined;
+    itemP?: string | undefined;
+    style?: object | undefined;
+}): {
+    lismClass: string;
+    tag: string;
+    style: {};
+};
+/**
+ * NavMenu.Nest のプロパティを処理
+ */
+export function getNestProps(props: any): any;
+/**
+ * NavMenu.Item のプロパティを処理
+ */
+export function getItemProps(props: any): any;
+/**
+ * NavMenu.Link のプロパティを処理
+ * @param {string} [props.href] - リンク先URL。指定時は a タグになる
+ * @param {string} [props.tag='span'] - HTML タグ
+ */
+export function getLinkProps({ href, tag, ...props }?: string): any;

package/dist/components/NavMenu/react/NavMenu.d.ts

@@ -0,0 +1,16 @@
+export function Root({ children, ...props }: {
+    [x: string]: any;
+    children: any;
+}): import("react").JSX.Element;
+export function Nest({ children, ...props }: {
+    [x: string]: any;
+    children: any;
+}): import("react").JSX.Element;
+export function Item({ children, ...props }: {
+    [x: string]: any;
+    children: any;
+}): import("react").JSX.Element;
+export function Link({ children, ...props }: {
+    [x: string]: any;
+    children: any;
+}): import("react").JSX.Element;

package/dist/components/NavMenu/react/index.d.ts

@@ -0,0 +1,8 @@
+import { Root, Item, Link, Nest } from './NavMenu';
+declare namespace _default {
+    export { Root };
+    export { Item };
+    export { Link };
+    export { Nest };
+}
+export default _default;

package/dist/components/ShapeDivider/astro/index.d.ts

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

package/dist/components/ShapeDivider/getProps.d.ts

@@ -0,0 +1,11 @@
+/**
+ * ShapeDivider コンポーネントの共通プロパティ処理
+ * @param {string} [props.viewBox] - SVG の viewBox
+ * @param {boolean} [props.isAnimation] - アニメーションを有効にするか
+ * @param {boolean} [props.isEmpty] - シェイプを非表示にしてスペーサーとして使用
+ * @param {number} [props.level=5] - シェイプの高さレベル
+ * @param {string} [props.stretch] - 水平方向の引き伸ばし量
+ * @param {string} [props.offset] - 水平方向のオフセット
+ * @param {string} [props.flip] - X/Y/XY で反転方向を指定
+ */
+export default function getProps({ viewBox, isAnimation, isEmpty, level, stretch, offset, flip, style, ...restProps }?: string): any;

package/dist/components/ShapeDivider/react/ShapeDivider.d.ts

@@ -0,0 +1,4 @@
+export default function ShapeDivider({ children, ...props }: {
+    [x: string]: any;
+    children: any;
+}): import("react").JSX.Element | null;

package/dist/components/ShapeDivider/react/index.d.ts

@@ -0,0 +1 @@
+export { default } from './ShapeDivider';

package/dist/components/Tabs/astro/index.d.ts

@@ -1,3 +1,8 @@
+import { default as Root } from './Tabs.astro';
+import { default as List } from './TabList.astro';
+import { default as Panel } from './TabPanel.astro';
+import { default as Item } from './TabItem.astro';
+import { default as Tab } from './Tab.astro';
 declare namespace _default {
     export { Root };
     export { List };

package/dist/components/astro.d.ts

@@ -4,5 +4,8 @@ export { default as Avatar } from './Avatar/astro';
 export { default as Badge } from './Badge/astro';
 export { default as Button } from './Button/astro';
 export { default as Callout } from './Callout/astro';
+export { default as Chat } from './Chat/astro';
 export { default as Modal } from './Modal/astro';
+export { default as NavMenu } from './NavMenu/astro';
+export { default as ShapeDivider } from './ShapeDivider/astro';
 export { default as Tabs } from './Tabs/astro';

package/dist/components/react.d.ts

@@ -4,5 +4,8 @@ export { default as Avatar } from './Avatar/react';
 export { default as Badge } from './Badge/react';
 export { default as Button } from './Button/react';
 export { default as Callout } from './Callout/react';
+export { default as Chat } from './Chat/react';
 export { default as Modal } from './Modal/react';
+export { default as NavMenu } from './NavMenu/react';
+export { default as ShapeDivider } from './ShapeDivider/react';
 export { default as Tabs } from './Tabs/react';

package/dist/style.css

@@ -1 +1 @@
-@layer lism.modules{.d--accordion{--duration:var(--acc-duration,0.25s)}.d--accordion[data-opened]{--_notOpen: }.d--accordion:not([data-opened]){--_isOpen: }.d--accordion_header{align-items:center;display:grid;gap:.5em;grid:auto/1fr auto;--focus-offset:-1px;&::-webkit-details-marker{display:none}}.d--accordion_body{display:grid;grid:1fr/auto;transition-duration:var(--duration);transition-property:margin-block,padding-block,opacity,grid-template}.d--accordion_inner{overflow:hidden}.d--accordion:not([data-opened])>.d--accordion_body{grid:0fr/auto;margin-block:0!important;padding-block:0!important}.d--accordion_icon{display:grid}.d--accordion_icon>.a--icon{transform:var(--_isOpen,scaleY(-1));transition:transform var(--duration)}.c--badge{--c:var(--base);--bgc:var(--text);--bdc:transparent;background-color:var(--bgc);border:1px solid var(--bdc);color:var(--c)}.c--badge--outline{--c:var(--text);--bgc:transparent;--bdc:currentColor}.c--button{--c:var(--base);--bgc:var(--text);--bdc:var(--bgc);background-color:var(--bgc);border:1px solid var(--bdc);color:var(--c);gap:var(--s10);place-content:center;place-items:center;text-decoration:none}.c--button--outline{--c:var(--text);--bgc:transparent;--bdc:var(--c)}}@layer lism.modules{}@layer lism.modules{:where(.c--button)>.a--icon{scale:1.05}.c--button:where(.l--grid){grid-template-columns:minmax(1em,auto) 1fr minmax(1em,auto);justify-items:center}.c--button:where(.l--grid)>:not(.a--icon){grid-column:2}}
+@layer lism.modules{.d--accordion{--duration:var(--acc-duration,0.25s)}.d--accordion[data-opened]{--_notOpen: }.d--accordion:not([data-opened]){--_isOpen: }.d--accordion_header{align-items:center;display:grid;gap:.5em;grid:auto/1fr auto;--focus-offset:-1px;&::-webkit-details-marker{display:none}}.d--accordion_body{display:grid;grid:1fr/auto;transition-duration:var(--duration);transition-property:margin-block,padding-block,opacity,grid-template}.d--accordion_inner{overflow:hidden}.d--accordion:not([data-opened])>.d--accordion_body{grid:0fr/auto;margin-block:0!important;padding-block:0!important}.d--accordion_icon{display:grid}.d--accordion_icon>.a--icon{transform:var(--_isOpen,scaleY(-1));transition:transform var(--duration)}.c--badge{--c:var(--base);--bgc:var(--text);--bdc:transparent;background-color:var(--bgc);border:1px solid var(--bdc);color:var(--c)}.c--badge--outline{--c:var(--text);--bgc:transparent;--bdc:currentColor}.c--button{--c:var(--base);--bgc:var(--text);--bdc:var(--bgc);background-color:var(--bgc);border:1px solid var(--bdc);color:var(--c);gap:var(--s10);place-content:center;place-items:center;text-decoration:none}.c--button--outline{--c:var(--text);--bgc:transparent;--bdc:var(--c)}}@layer lism.modules{}@layer lism.modules{:where(.c--button)>.a--icon{scale:1.05}.c--button:where(.l--grid){grid-template-columns:minmax(1em,auto) 1fr minmax(1em,auto);justify-items:center}.c--button:where(.l--grid)>:not(.a--icon){grid-column:2}}@layer lism.modules{.c--chat{--cbox-bgPct:8%;--gta:"avatar name" "avatar body";--gtc:auto 1fr;--gtr:minmax(1.5rem,auto) auto;--_avator-size:clamp(48px,32px + 5cqw,64px);--_deco-size:calc(min(var(--_avator-size), 80px)/4 + 0.25rem);--_deco-mask:none;--_deco-t:0;--_deco-scale:1;--_deco-inset-x:0;gap:0 calc(var(--_deco-size) + 1px)}.c--chat_avatar{grid-area:avatar;width:var(--_avator-size)}.c--chat_name{grid-area:name}.c--chat_body{grid-area:body}.c--chat_content{max-width:var(--sz--s)}.c--chat_deco{height:var(--_deco-size);top:var(--_deco-t);inset-inline:var(--_deco-inset-x);-webkit-mask:var(--_deco-mask) center/contain no-repeat;mask:var(--_deco-mask) center/contain no-repeat;scale:var(--_deco-scale);width:var(--_deco-size)}.c--chat--speak{--_deco-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8"><path d="M8,8L8,8C7.4,4.8,5.4,2,2.6,0.4L2,0h6V8z"/></svg>')}[data-chat-dir=start]{--_deco-inset-x:auto calc(100% - 1px)}[data-chat-dir=end]{--_deco-scale:-1 1;--_deco-inset-x:calc(100% - 1px) auto;--gta:"name avatar" "body avatar";--gtc:1fr auto}}.c--chat--speak[data-chat-dir=start]>div>.c--chat_content{border-start-start-radius:0}.c--chat--speak[data-chat-dir=end]>div>.c--chat_content{border-start-end-radius:0}@layer lism.modules{.c--navMenu{--link-td:none;--hl:var(--hl--s);--_item-p:var(--s20);--focus-offset:-1px}.c--navMenu_nest{--_item-p:inherit}.c--navMenu_link{padding:var(--_item-p)}.c--navMenu_item,.c--navMenu_nest{--bdc:inherit}.c--shapeDivider{--level:0;--_inner-offset:0px;--_inner-stretch:1;--_flipX:1;--_flipY:1;height:clamp(5px * var(--level),1cqw * var(--level),12px * var(--level));overflow:visible}}@layer lism.modules{.c--shapeDivider:where([data-flip^=X]){--_flipX:-1}.c--shapeDivider:where([data-flip$=Y]){--_flipY:-1}.c--shapeDivider_inner{--offsetY:0.5px;--offsetX:-0.5px;height:100%;scale:calc(var(--_flipX)*var(--_inner-stretch)) var(--_flipY);translate:calc(var(--offsetX) + var(--_inner-offset)) calc(var(--offsetY)*var(--_flipY));width:calc(100% + 1px)}.c--shapeDivider_svg{display:block}:where([data-has-animation=true]) .c--shapeDivider_svg{animation:lism--slideShape 12s linear infinite alternate;transform-origin:100% 0}}@keyframes lism--slideShape{0%{transform:scaleX(4)}to{transform:scaleX(4) translateX(75%)}}

package/package.json

@@ -1,69 +1,69 @@
 {
-  "name": "@lism-css/ui",
-  "version": "0.2.1",
-  "description": "UI components by lism-css.",
-  "author": {
-    "name": "ddryo",
-    "url": "https://github.com/ddryo"
-  },
-  "license": "MIT",
-  "keywords": [
-    "css-framework",
-    "astro-component",
-    "react-component"
-  ],
-  "files": [
-    "dist",
-    "src"
-  ],
-  "type": "module",
-  "main": "./dist/index.js",
-  "exports": {
-    "./react": {
-      "import": "./src/components/react.js",
-      "types": "./dist/components/index.d.ts"
-    },
-    "./astro": {
-      "import": "./src/components/astro.js",
-      "types": "./dist/components/index.d.ts"
-    },
-    "./scripts/*": "./dist/scripts/*.js",
-    "./style.css": "./dist/style.css"
-  },
-  "homepage": "https://www.lism.style",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/lism-css/lism-css/tree/main/packages/lism-css"
-  },
-  "bugs": {
-    "url": "https://github.com/lism-css/lism-css/issues"
-  },
-  "dependencies": {
-    "lism-css": "0.8.3"
-  },
-  "devDependencies": {
-    "@babel/cli": "^7.27.2",
-    "@babel/core": "^7.27.3",
-    "@babel/preset-env": "^7.27.2",
-    "@babel/preset-react": "^7.27.1",
-    "@rollup/plugin-babel": "^6.0.4",
-    "@vitejs/plugin-react-swc": "^3.10.0",
-    "glob": "^11.0.2",
-    "rollup": "^4.41.1",
-    "typescript": "~5.8.3",
-    "unplugin-dts": "1.0.0-beta.6",
-    "vite": "^6.3.5"
-  },
-  "peerDependencies": {
-    "@types/react": "*",
-    "@types/react-dom": "*",
-    "react": "^18 || ^19",
-    "react-dom": "^18 || ^19"
-  },
-  "sideEffects": false,
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build && pnpm build:css",
-    "build:css": "node build-css.js"
-  }
-}
+	"name": "@lism-css/ui",
+	"version": "0.2.2",
+	"description": "UI components by lism-css.",
+	"author": {
+		"name": "ddryo",
+		"url": "https://github.com/ddryo"
+	},
+	"license": "MIT",
+	"keywords": [
+		"css-framework",
+		"astro-component",
+		"react-component"
+	],
+	"scripts": {
+		"dev": "vite",
+		"build": "vite build && pnpm build:css",
+		"build:css": "node build-css.js"
+	},
+	"files": [
+		"dist",
+		"src"
+	],
+	"type": "module",
+	"main": "./dist/index.js",
+	"exports": {
+		"./react": {
+			"import": "./src/components/react.js",
+			"types": "./dist/components/index.d.ts"
+		},
+		"./astro": {
+			"import": "./src/components/astro.js",
+			"types": "./dist/components/index.d.ts"
+		},
+		"./scripts/*": "./dist/scripts/*.js",
+		"./style.css": "./dist/style.css"
+	},
+	"homepage": "https://www.lism.style",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/lism-css/lism-css/tree/main/packages/lism-css"
+	},
+	"bugs": {
+		"url": "https://github.com/lism-css/lism-css/issues"
+	},
+	"dependencies": {
+		"lism-css": "workspace:*"
+	},
+	"devDependencies": {
+		"@babel/cli": "^7.27.2",
+		"@babel/core": "^7.27.3",
+		"@babel/preset-env": "^7.27.2",
+		"@babel/preset-react": "^7.27.1",
+		"@rollup/plugin-babel": "^6.0.4",
+		"@vitejs/plugin-react-swc": "^3.10.0",
+		"glob": "^11.0.2",
+		"rollup": "^4.41.1",
+		"typescript": "~5.8.3",
+		"unplugin-dts": "1.0.0-beta.6",
+		"vite": "^6.3.5"
+	},
+	"peerDependencies": {
+		"@types/react": "*",
+		"@types/react-dom": "*",
+		"react": "^18 || ^19",
+		"react-dom": "^18 || ^19"
+	},
+	"sideEffects": false
+}

package/src/components/Avatar/astro/Avatar.astro

@@ -1,6 +1,5 @@
 ---
 import { Frame } from 'lism-css/astro';
-// import '../_style.css';
 
 const { size = '1.5em', src = '', alt = '', ...props } = Astro.props;
 ---

package/src/components/Avatar/react/Avatar.jsx

@@ -1,5 +1,4 @@
 import { Frame } from 'lism-css/react';
-// import '../_style.css';
 
 export default function Avatar({ size = '1.5em', src = '', alt = '', ...props }) {
 	return (

package/src/components/Callout/getProps.ts

@@ -11,7 +11,7 @@ export type CalloutProps = {
 
 export default function getCalloutProps({ type = 'note', keycolor, icon, title, flow = 's', ...props }: CalloutProps) {
 	const presetData = type ? PRESETS[type] : null;
-	const _icon = icon || presetData?.icon || null;
+	const _icon = icon || presetData?.icon || 'note';
 	const _keycolor = keycolor || presetData?.color || null;
 
 	return {

package/src/components/Chat/_style.css

@@ -0,0 +1,64 @@
+@layer lism.modules {
+	.c--chat {
+		--cbox-bgPct: 8%;
+		--gta: 'avatar name' 'avatar body';
+		--gtc: auto 1fr;
+		--gtr: minmax(1.5rem, auto) auto;
+		--_avator-size: clamp(48px, 32px + 5cqw, 64px); /* @320px:40px ~ @640:64px */
+		--_deco-size: calc(min(var(--_avator-size), 80px) / 4 + 0.25rem);
+		--_deco-mask: none;
+		--_deco-t: 0;
+		--_deco-scale: 1;
+		--_deco-inset-x: 0;
+
+		gap: 0 calc(var(--_deco-size) + 1px);
+	}
+
+	.c--chat_avatar {
+		grid-area: avatar;
+		width: var(--_avator-size);
+	}
+	.c--chat_name {
+		grid-area: name;
+	}
+	.c--chat_body {
+		grid-area: body;
+	}
+	.c--chat_content {
+		max-width: var(--sz--s);
+	}
+
+	.c--chat_deco {
+		top: var(--_deco-t);
+		inset-inline: var(--_deco-inset-x);
+		width: var(--_deco-size);
+		height: var(--_deco-size);
+		scale: var(--_deco-scale);
+		mask: var(--_deco-mask) center / contain no-repeat;
+	}
+	.c--chat--speak {
+		--_deco-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8"><path d="M8,8L8,8C7.4,4.8,5.4,2,2.6,0.4L2,0h6V8z"/></svg>');
+	}
+
+	[data-chat-dir='start'] {
+		--_deco-inset-x: auto calc(100% - 1px);
+	}
+	[data-chat-dir='end'] {
+		--_deco-scale: -1 1;
+		--_deco-inset-x: calc(100% - 1px) auto;
+		--gta: 'name avatar' 'body avatar';
+		--gtc: 1fr auto;
+	}
+}
+
+/* NOTE: 以下は @layer 外に配置（セレクタの詳細度を確保するため） */
+
+/* speak バリアントの角丸調整: 左側 */
+.c--chat--speak[data-chat-dir='start'] > div > .c--chat_content {
+	border-start-start-radius: 0;
+}
+
+/* speak バリアントの角丸調整: 右側 */
+.c--chat--speak[data-chat-dir='end'] > div > .c--chat_content {
+	border-start-end-radius: 0;
+}

package/src/components/Chat/astro/Chat.astro

@@ -0,0 +1,41 @@
+---
+import { Lism, Flow, Grid, Frame, Decorator } from 'lism-css/astro';
+import getChatProps, { defaultProps } from '../getProps';
+import '../_style.css';
+
+interface Props {
+	/** 吹き出しスタイル */
+	variant?: 'speak' | 'think';
+	/** 吹き出しの方向 */
+	direction?: 'start' | 'end';
+	/** 発言者名 */
+	name?: string;
+	/** アバター画像URL */
+	avatar?: string;
+	/** キーカラー */
+	keycolor?: string;
+	/** コンテンツのフロー間隔 */
+	flow?: string;
+	[key: string]: unknown;
+}
+
+const { name, avatar, flow = 's', ...inputProps } = Astro.props;
+const { 'data-chat-dir': direction, ...chatProps } = getChatProps(inputProps);
+---
+
+<Grid data-chat-dir={direction} {...chatProps}>
+	{
+		avatar && (
+			<Frame {...defaultProps.avatar} src={avatar} alt=''>
+				<img src={avatar} alt='' width='60' height='60' decoding='async' />
+			</Frame>
+		)
+	}
+	{name && <Lism {...defaultProps.name}>{name}</Lism>}
+	<Lism {...defaultProps.body}>
+		<Decorator {...defaultProps.deco} class='u-cbox is--skipFlow' />
+		<Flow {...defaultProps.content} class='u-cbox' flow={flow} jslf={direction}>
+			<slot />
+		</Flow>
+	</Lism>
+</Grid>

package/src/components/Chat/astro/index.js

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

package/src/components/Chat/getProps.js

@@ -0,0 +1,57 @@
+/**
+ * Chat コンポーネントの共通プロパティ処理
+ */
+
+// 各サブ要素のデフォルトプロパティ
+export const defaultProps = {
+	avatar: {
+		lismClass: 'c--chat_avatar',
+		bgc: 'base',
+		ar: '1/1',
+		bdrs: '99',
+		'aria-hidden': 'true',
+	},
+	name: {
+		lismClass: 'c--chat_name',
+		c: 'text-2',
+		fs: 'italic',
+		fz: '2xs',
+		lh: '1',
+		py: '5',
+		px: '10',
+		aslf: 'end',
+	},
+	body: {
+		lismClass: 'c--chat_body',
+		pos: 'rel',
+	},
+	deco: {
+		lismClass: 'c--chat_deco',
+		pos: 'abs',
+	},
+	content: {
+		lismClass: 'c--chat_content',
+		bdrs: '30',
+		p: '20',
+		lh: 's',
+	},
+};
+
+/**
+ * Chat コンポーネントのルートプロパティを生成
+ */
+export default function getChatProps({
+	variant = 'speak',
+	direction = 'start',
+	keycolor = 'gray',
+	...props
+}) {
+	return {
+		lismClass: 'c--chat',
+		variant,
+		keycolor,
+		'data-chat-dir': direction,
+		ji: direction,
+		...props,
+	};
+}

package/src/components/Chat/react/Chat.jsx

@@ -0,0 +1,24 @@
+import { Lism, Flow, Grid, Frame, Decorator } from 'lism-css/react';
+import getChatProps, { defaultProps } from '../getProps';
+import '../_style.css';
+
+export default function Chat({ name, avatar, flow = 's', children, ...props }) {
+	const { 'data-chat-dir': direction, ...chatProps } = getChatProps(props);
+
+	return (
+		<Grid data-chat-dir={direction} {...chatProps}>
+			{avatar && (
+				<Frame {...defaultProps.avatar} src={avatar} alt=''>
+					<img src={avatar} alt='' width='60' height='60' decoding='async' />
+				</Frame>
+			)}
+			{name && <Lism {...defaultProps.name}>{name}</Lism>}
+			<Lism {...defaultProps.body}>
+				<Decorator {...defaultProps.deco} className='u-cbox is--skipFlow' />
+				<Flow {...defaultProps.content} className='u-cbox' flow={flow} jslf={direction}>
+					{children}
+				</Flow>
+			</Lism>
+		</Grid>
+	);
+}

package/src/components/Chat/react/index.js

@@ -0,0 +1 @@
+export { default } from './Chat';

package/src/components/Modal/react/Body.jsx

@@ -1,4 +1,4 @@
-import { Lism } from '../../Lism';
+import { Lism } from 'lism-css/react';
 import { defaultProps } from '../getProps';
 
 export default function ModalBody({ children, ...props }) {

package/src/components/Modal/react/CloseBtn.jsx

@@ -1,5 +1,4 @@
-import { Lism } from '../../Lism';
-import { Icon } from '../../atomic/Icon';
+import { Lism, Icon } from 'lism-css/react';
 import { defaultProps } from '../getProps';
 
 // duration: [s]

package/src/components/Modal/react/Inner.jsx

@@ -1,4 +1,4 @@
-import { Lism } from '../../Lism';
+import { Lism } from 'lism-css/react';
 import { getInnerProps } from '../getProps';
 
 export default function ModalInner({ children, ...props }) {

package/src/components/Modal/react/Modal.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Lism } from '../../Lism';
+import { Lism } from 'lism-css/react';
 import { setEvent } from '../setModal';
 import { getProps } from '../getProps';
 

package/src/components/Modal/react/OpenBtn.jsx

@@ -1,4 +1,4 @@
-import { Lism } from '../../Lism';
+import { Lism } from 'lism-css/react';
 import { defaultProps } from '../getProps';
 
 // duration: [s]

package/src/components/NavMenu/_style.css

@@ -0,0 +1,21 @@
+@layer lism.modules {
+	.c--navMenu {
+		--link-td: none;
+		--hl: var(--hl--s);
+		--_item-p: var(--s20);
+		--focus-offset: -1px; /* アコーディオン化した時にoutlineが一部見えなくなるのを防ぐ */
+	}
+
+	.c--navMenu_nest {
+		--_item-p: inherit;
+	}
+
+	.c--navMenu_link {
+		padding: var(--_item-p);
+	}
+
+	.c--navMenu_nest,
+	.c--navMenu_item {
+		--bdc: inherit;
+	}
+}

package/src/components/NavMenu/astro/Item.astro

@@ -0,0 +1,8 @@
+---
+import { Lism } from 'lism-css/astro';
+import { getItemProps } from '../getProps';
+---
+
+<Lism {...getItemProps(Astro.props)}>
+	<slot />
+</Lism>

package/src/components/NavMenu/astro/Link.astro

@@ -0,0 +1,8 @@
+---
+import { Flex } from 'lism-css/astro';
+import { getLinkProps } from '../getProps';
+---
+
+<Flex {...getLinkProps(Astro.props)}>
+	<slot />
+</Flex>

package/src/components/NavMenu/astro/Nest.astro

@@ -0,0 +1,8 @@
+---
+import { Stack } from 'lism-css/astro';
+import { getNestProps } from '../getProps';
+---
+
+<Stack {...getNestProps(Astro.props)}>
+	<slot />
+</Stack>

package/src/components/NavMenu/astro/Root.astro

@@ -0,0 +1,9 @@
+---
+import { Stack } from 'lism-css/astro';
+import { getRootProps } from '../getProps';
+import '../_style.css';
+---
+
+<Stack {...getRootProps(Astro.props)}>
+	<slot />
+</Stack>

package/src/components/NavMenu/astro/index.js

@@ -0,0 +1,6 @@
+import Root from './Root.astro';
+import Nest from './Nest.astro';
+import Item from './Item.astro';
+import Link from './Link.astro';
+
+export default { Root, Nest, Item, Link };

package/src/components/NavMenu/getProps.js

@@ -0,0 +1,65 @@
+/**
+ * NavMenu コンポーネントの共通プロパティ処理
+ */
+import getMaybeCssVar from 'lism-css/lib/getMaybeCssVar';
+
+/**
+ * NavMenu.Root のプロパティを処理
+ * @param {object} props - コンポーネントのプロパティ
+ * @param {string} [props.hovC] - ホバー時のテキストカラー（--hov-c として出力）
+ * @param {string} [props.hovBgc] - ホバー時の背景カラー（--hov-bgc として出力）
+ * @param {string} [props.itemP] - 各アイテムのパディング（--_item-p として出力）
+ * @param {object} [props.style] - スタイルオブジェクト
+ */
+export function getRootProps({ hovC, hovBgc, itemP, style = {}, ...props }) {
+	const computedStyle = { ...style };
+
+	if (hovBgc) computedStyle['--hov-bgc'] = getMaybeCssVar(hovBgc, 'color');
+	if (hovC) computedStyle['--hov-c'] = getMaybeCssVar(hovC, 'color');
+	if (itemP) computedStyle['--_item-p'] = getMaybeCssVar(itemP, 'space');
+
+	return {
+		lismClass: 'c--navMenu',
+		tag: 'ul',
+		style: computedStyle,
+		...props,
+	};
+}
+
+/**
+ * NavMenu.Nest のプロパティを処理
+ */
+export function getNestProps(props) {
+	return {
+		lismClass: 'c--navMenu_nest',
+		tag: 'ul',
+		'px-s': '20',
+		...props,
+	};
+}
+
+/**
+ * NavMenu.Item のプロパティを処理
+ */
+export function getItemProps(props) {
+	return {
+		lismClass: 'c--navMenu_item',
+		tag: 'li',
+		...props,
+	};
+}
+
+/**
+ * NavMenu.Link のプロパティを処理
+ * @param {string} [props.href] - リンク先URL。指定時は a タグになる
+ * @param {string} [props.tag='span'] - HTML タグ
+ */
+export function getLinkProps({ href, tag = 'span', ...props }) {
+	return {
+		lismClass: 'c--navMenu_link',
+		tag: href ? 'a' : tag,
+		href,
+		c: 'inherit',
+		...props,
+	};
+}

package/src/components/NavMenu/react/NavMenu.jsx

@@ -0,0 +1,19 @@
+import { Lism, Stack, Flex } from 'lism-css/react';
+import { getRootProps, getNestProps, getItemProps, getLinkProps } from '../getProps';
+import '../_style.css';
+
+export function Root({ children, ...props }) {
+	return <Stack {...getRootProps(props)}>{children}</Stack>;
+}
+
+export function Nest({ children, ...props }) {
+	return <Stack {...getNestProps(props)}>{children}</Stack>;
+}
+
+export function Item({ children, ...props }) {
+	return <Lism {...getItemProps(props)}>{children}</Lism>;
+}
+
+export function Link({ children, ...props }) {
+	return <Flex {...getLinkProps(props)}>{children}</Flex>;
+}

package/src/components/NavMenu/react/index.js

@@ -0,0 +1,3 @@
+import { Root, Item, Link, Nest } from './NavMenu';
+
+export default { Root, Item, Link, Nest };

package/src/components/ShapeDivider/_style.css

@@ -0,0 +1,56 @@
+/* Note: scale 反転は、__inner に対して行う。shapeDivider自身を反転させると、X方向に隙間ができてしまう。 */
+@layer lism.modules {
+	.c--shapeDivider {
+		--level: 0;
+
+		/* svg配置調整用 */
+		--_inner-offset: 0px;
+		--_inner-stretch: 1;
+
+		/* flip がオンなら -1 にセット */
+		--_flipX: 1;
+		--_flipY: 1;
+
+		/* 500px時点を最小値, 1200px時点を最大値にして、clampで高さを変動させる */
+		height: clamp(calc(5px * var(--level)), calc(1cqw * var(--level)), calc(12px * var(--level)));
+		overflow: visible;
+	}
+
+	.c--shapeDivider:where([data-flip^='X']) {
+		--_flipX: -1;
+	}
+
+	.c--shapeDivider:where([data-flip$='Y']) {
+		--_flipY: -1;
+	}
+	.c--shapeDivider_inner {
+		/* 隙間ができるのを防ぐ */
+		--offsetY: 0.5px;
+		--offsetX: -0.5px;
+		height: 100%;
+		width: calc(100% + 1px);
+		scale: calc(var(--_flipX) * var(--_inner-stretch)) var(--_flipY);
+		translate: calc(var(--offsetX) + var(--_inner-offset)) calc(var(--offsetY) * var(--_flipY));
+	}
+
+	.c--shapeDivider_svg {
+		/* 位置ずれ防止 */
+		display: block;
+	}
+
+	/* 左右にスライドするアニメーション */
+	:where([data-has-animation='true']) .c--shapeDivider_svg {
+		/* ↓ X 100% にしてるのは translateXのcalc計算で * -1 をしなくていいように。*/
+		transform-origin: 100% 0;
+		animation: lism--slideShape 12s infinite alternate linear;
+	}
+}
+
+@keyframes lism--slideShape {
+	0% {
+		transform: scaleX(4);
+	}
+	100% {
+		transform: scaleX(4) translateX(calc(100% - 25%));
+	}
+}

package/src/components/ShapeDivider/astro/ShapeDivider.astro

@@ -0,0 +1,31 @@
+---
+import { Lism } from 'lism-css/astro';
+import getProps from '../getProps';
+import '../_style.css';
+
+const componentProps = getProps(Astro.props);
+const { viewBox, isAnimation, isEmpty, ...lismProps } = componentProps || {};
+---
+
+{
+	componentProps && (
+		<Lism {...lismProps}>
+			{isEmpty ? null : (
+				<div class='c--shapeDivider_inner'>
+					<svg
+						xmlns='http://www.w3.org/2000/svg'
+						class='c--shapeDivider_svg'
+						viewBox={viewBox}
+						width='100%'
+						height='100%'
+						fill='currentColor'
+						focusable='false'
+						preserveAspectRatio='none'
+					>
+						<slot />
+					</svg>
+				</div>
+			)}
+		</Lism>
+	)
+}

package/src/components/ShapeDivider/astro/index.js

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

package/src/components/ShapeDivider/getProps.js

@@ -0,0 +1,40 @@
+/**
+ * ShapeDivider コンポーネントの共通プロパティ処理
+ * @param {string} [props.viewBox] - SVG の viewBox
+ * @param {boolean} [props.isAnimation] - アニメーションを有効にするか
+ * @param {boolean} [props.isEmpty] - シェイプを非表示にしてスペーサーとして使用
+ * @param {number} [props.level=5] - シェイプの高さレベル
+ * @param {string} [props.stretch] - 水平方向の引き伸ばし量
+ * @param {string} [props.offset] - 水平方向のオフセット
+ * @param {string} [props.flip] - X/Y/XY で反転方向を指定
+ */
+export default function getProps({ viewBox, isAnimation, isEmpty, level = 5, stretch, offset, flip, style = {}, ...restProps }) {
+	// level が 0 の場合は非表示
+	if (level === 0) return null;
+
+	// CSS変数をセット
+	const computedStyle = { ...style };
+	computedStyle['--level'] = level || null;
+	computedStyle['--_inner-offset'] = offset || null;
+	computedStyle['--_inner-stretch'] = stretch || null;
+
+	const _props = {
+		lismClass: 'c--shapeDivider',
+		'max-sz': 'full',
+		'aria-hidden': 'true',
+	};
+	if (flip) _props['data-flip'] = flip;
+	if (isAnimation) _props['data-has-animation'] = 'true';
+
+	return {
+		..._props,
+		style: computedStyle,
+
+		// SVG用のprops
+		viewBox,
+		isEmpty,
+
+		// その他のprops
+		...restProps,
+	};
+}

package/src/components/ShapeDivider/react/ShapeDivider.jsx

@@ -0,0 +1,33 @@
+import { Lism } from 'lism-css/react';
+import getProps from '../getProps';
+import '../_style.css';
+
+export default function ShapeDivider({ children, ...props }) {
+	const componentProps = getProps(props);
+
+	// level が 0 の場合は非表示
+	if (!componentProps) return null;
+
+	const { viewBox, isAnimation, isEmpty, ...lismProps } = componentProps;
+
+	return (
+		<Lism {...lismProps}>
+			{isEmpty ? null : (
+				<div className='c--shapeDivider_inner'>
+					<svg
+						xmlns='http://www.w3.org/2000/svg'
+						className='c--shapeDivider_svg'
+						viewBox={viewBox}
+						width='100%'
+						height='100%'
+						fill='currentColor'
+						focusable='false'
+						preserveAspectRatio='none'
+					>
+						{children}
+					</svg>
+				</div>
+			)}
+		</Lism>
+	);
+}

package/src/components/ShapeDivider/react/index.js

@@ -0,0 +1 @@
+export { default } from './ShapeDivider';

package/src/components/astro.ts

@@ -4,5 +4,8 @@ export { default as Avatar } from './Avatar/astro';
 export { default as Badge } from './Badge/astro';
 export { default as Button } from './Button/astro';
 export { default as Callout } from './Callout/astro';
+export { default as Chat } from './Chat/astro';
 export { default as Modal } from './Modal/astro';
+export { default as NavMenu } from './NavMenu/astro';
+export { default as ShapeDivider } from './ShapeDivider/astro';
 export { default as Tabs } from './Tabs/astro';

package/src/components/react.ts

@@ -4,5 +4,8 @@ export { default as Avatar } from './Avatar/react';
 export { default as Badge } from './Badge/react';
 export { default as Button } from './Button/react';
 export { default as Callout } from './Callout/react';
+export { default as Chat } from './Chat/react';
 export { default as Modal } from './Modal/react';
+export { default as NavMenu } from './NavMenu/react';
+export { default as ShapeDivider } from './ShapeDivider/react';
 export { default as Tabs } from './Tabs/react';

package/src/style.scss

@@ -2,3 +2,6 @@
 @use './components/Avatar/_style.css' as avatar;
 @use './components/Badge/_style.css' as badge;
 @use './components/Button/_style.css' as button;
+@use './components/Chat/_style.css' as chat;
+@use './components/NavMenu/_style.css' as navmenu;
+@use './components/ShapeDivider/_style.css' as shapedivider;

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) Loos, Inc.
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.