@lism-css/ui 0.2.0 → 0.2.2

package/src/components/Callout/astro/index.ts

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

package/src/components/Callout/getProps.ts

@@ -0,0 +1,32 @@
+import PRESETS from './presets';
+
+export type CalloutProps = {
+	type?: string;
+	keycolor?: string;
+	icon?: string;
+	title?: string;
+	flow?: string;
+	[key: string]: unknown;
+};
+
+export default function getCalloutProps({ type = 'note', keycolor, icon, title, flow = 's', ...props }: CalloutProps) {
+	const presetData = type ? PRESETS[type] : null;
+	const _icon = icon || presetData?.icon || 'note';
+	const _keycolor = keycolor || presetData?.color || null;
+
+	return {
+		icon: _icon,
+		title,
+		flow,
+		lismClass: 'c--callout u-cbox',
+		keycolor: _keycolor,
+		p: '20',
+		g: '10',
+		bdc: 'keycolor',
+		'bd-x-s': true,
+		bdw: '4px',
+		bxsh: '10',
+		bdrs: '5',
+		...props,
+	};
+}

package/src/components/Callout/presets.ts

@@ -0,0 +1,33 @@
+type PresetData = {
+	icon: string;
+	color: string;
+};
+
+const PRESETS: Record<string, PresetData> = {
+	alert: {
+		icon: 'alert',
+		color: 'red',
+	},
+	point: {
+		icon: 'lightbulb',
+		color: 'orange',
+	},
+	warning: {
+		icon: 'warning',
+		color: 'yellow',
+	},
+	check: {
+		icon: 'check-circle',
+		color: 'green',
+	},
+	help: {
+		icon: 'question',
+		color: 'purple',
+	},
+	note: {
+		icon: 'note',
+		color: 'blue',
+	},
+};
+
+export default PRESETS;

package/src/components/Callout/react/Callout.tsx

@@ -0,0 +1,23 @@
+import type { ReactNode } from 'react';
+import { Flow, Flex, Stack, Icon, Center } from 'lism-css/react';
+import getCalloutProps, { type CalloutProps } from '../getProps';
+
+export default function Callout({ children, ...inputProps }: CalloutProps & { children?: ReactNode }) {
+	const { icon, title, flow, ...calloutProps } = getCalloutProps(inputProps);
+
+	return (
+		<Stack {...calloutProps}>
+			{title && (
+				<Flex className='c--callout_head' c='keycolor' fw='bold' ai='center' g='10'>
+					<Center className='c--callout_icon' fz='xl'>
+						<Icon icon={icon} />
+					</Center>
+					<span className='c--callout_title'>{title}</span>
+				</Flex>
+			)}
+			<Flow className='c--callout_body' flow={flow}>
+				{children}
+			</Flow>
+		</Stack>
+	);
+}

package/src/components/Callout/react/index.ts

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

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

@@ -1,6 +1,11 @@
 export { default as Accordion } from './Accordion/astro';
+export { default as Alert } from './Alert/astro';
 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';