@lism-css/ui 0.9.2 → 0.10.0

package/src/components/Alert/react/Alert.tsx

@@ -3,14 +3,14 @@ import { Flow, Lism, Center, Icon } from 'lism-css/react';
 import getAlertProps, { type AlertProps } from '../getProps';
 
 export default function Alert({ children, ...inputProps }: AlertProps & { children?: ReactNode }) {
-	const { icon, layout, flow, ...alertProps } = getAlertProps(inputProps);
+  const { icon, layout, flow, ...alertProps } = getAlertProps(inputProps);
 
-	return (
-		<Lism layout={layout} {...alertProps}>
-			<Center isSide={layout === 'sideMain'} c='keycolor' fz='xl' fxsh='0'>
-				<Icon icon={icon} />
-			</Center>
-			<Flow flow={flow}>{children}</Flow>
-		</Lism>
-	);
+  return (
+    <Lism layout={layout} {...alertProps}>
+      <Center isSide={layout === 'sideMain'} c="keycolor" fz="xl" fxsh="0">
+        <Icon icon={icon} />
+      </Center>
+      <Flow flow={flow}>{children}</Flow>
+    </Lism>
+  );
 }

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

@@ -4,6 +4,6 @@ import { Frame } from 'lism-css/astro';
 const { size = '1.5em', src = '', alt = '', ...props } = Astro.props;
 ---
 
-<Frame lismClass='c--avatar' ar='1/1' w={size} bdrs='99' {...props}>
-	<img src={src} alt={alt} width='100%' height='100%' decoding='async' />
+<Frame lismClass="c--avatar" ar="1/1" w={size} bdrs="99" {...props}>
+  <img src={src} alt={alt} width="100%" height="100%" decoding="async" />
 </Frame>

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

@@ -1,9 +1,9 @@
 import { Frame } from 'lism-css/react';
 
 export default function Avatar({ size = '1.5em', src = '', alt = '', ...props }) {
-	return (
-		<Frame lismClass='c--avatar' ar='1/1' w={size} bdrs='99' {...props}>
-			<img src={src} alt={alt} width='100%' height='100%' decoding='async' />
-		</Frame>
-	);
+  return (
+    <Frame lismClass="c--avatar" ar="1/1" w={size} bdrs="99" {...props}>
+      <img src={src} alt={alt} width="100%" height="100%" decoding="async" />
+    </Frame>
+  );
 }

package/src/components/Badge/_style.css

@@ -1,15 +1,15 @@
-@layer lism.modules {
-	.c--badge {
-		--c: var(--base);
-		--bgc: var(--text);
-		--bdc: transparent;
-		color: var(--c);
-		background-color: var(--bgc);
-		border: solid 1px var(--bdc); /* 異なる variant を並べてもサイズに差が出ないようにborderを常に指定 */
-	}
-	.c--badge--outline {
-		--c: var(--text);
-		--bgc: transparent;
-		--bdc: currentColor;
-	}
+@layer lism-modules {
+  .c--badge {
+    --c: var(--base);
+    --bgc: var(--text);
+    --bdc: transparent;
+    color: var(--c);
+    background-color: var(--bgc);
+    border: solid 1px var(--bdc); /* 異なる variant を並べてもサイズに差が出ないようにborderを常に指定 */
+  }
+  .c--badge--outline {
+    --c: var(--text);
+    --bgc: transparent;
+    --bdc: currentColor;
+  }
 }

package/src/components/Badge/astro/Badge.astro

@@ -6,11 +6,11 @@ const props = Astro.props;
 
 // c--badge では c, bgc は 変数で受け取る
 const _propConfig = {
-	c: { isVar: 1 },
-	bgc: { isVar: 1 },
+  c: { isVar: 1 },
+  bgc: { isVar: 1 },
 };
 ---
 
-<Lism lismClass='c--badge' as='span' d='inline-flex' fz='xs' lh='xs' py='5' px='10' bdrs='10' _propConfig={_propConfig} {...props}>
-	<slot />
+<Lism lismClass="c--badge" as="span" d="inline-flex" fz="xs" lh="xs" py="5" px="10" bdrs="10" _propConfig={_propConfig} {...props}>
+  <slot />
 </Lism>

package/src/components/Badge/react/Badge.jsx

@@ -2,11 +2,11 @@ import { Lism } from 'lism-css/react';
 import '../_style.css';
 
 export default function Badge(props) {
-	// c--badge では c, bgc は 変数で受け取る
-	const _propConfig = {
-		c: { isVar: 1 },
-		bgc: { isVar: 1 },
-	};
+  // c--badge では c, bgc は 変数で受け取る
+  const _propConfig = {
+    c: { isVar: 1 },
+    bgc: { isVar: 1 },
+  };
 
-	return <Lism lismClass='c--badge' as='span' d='inline-flex' fz='xs' lh='xs' py='5' px='10' bdrs='10' _propConfig={_propConfig} {...props} />;
+  return <Lism lismClass="c--badge" as="span" d="inline-flex" fz="xs" lh="xs" py="5" px="10" bdrs="10" _propConfig={_propConfig} {...props} />;
 }

package/src/components/Button/_style.css

@@ -1,34 +1,34 @@
-@layer lism.modules {
-	.c--button {
-		--c: var(--base);
-		--bgc: var(--text);
-		--bdc: var(--bgc);
+@layer lism-modules {
+  .c--button {
+    --c: var(--base);
+    --bgc: var(--text);
+    --bdc: var(--bgc);
 
-		color: var(--c);
-		background-color: var(--bgc);
-		border: solid 1px var(--bdc); /* 異なる variant を並べてもサイズに差が出ないようにborderを常に指定 */
+    color: var(--c);
+    background-color: var(--bgc);
+    border: solid 1px var(--bdc); /* 異なる variant を並べてもサイズに差が出ないようにborderを常に指定 */
 
-		gap: var(--s10);
-		text-decoration: none;
-		place-content: center;
-		place-items: center;
-	}
-	.c--button--outline {
-		--c: var(--text);
-		--bgc: transparent;
-		--bdc: var(--c);
-	}
+    gap: var(--s10);
+    text-decoration: none;
+    place-content: center;
+    place-items: center;
+  }
+  .c--button--outline {
+    --c: var(--text);
+    --bgc: transparent;
+    --bdc: var(--c);
+  }
 
-	:where(.c--button) > .a--icon {
-		scale: 1.05;
-	}
+  :where(.c--button) > .a--icon {
+    scale: 1.05;
+  }
 
-	/* l--gridを使用する場合の追加スタイル */
-	.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;
-	}
+  /* l--gridを使用する場合の追加スタイル */
+  .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;
+  }
 }

package/src/components/Button/astro/Button.astro

@@ -6,11 +6,11 @@ const props = Astro.props;
 
 // c--button では c, bgc は 変数で受け取る
 const _propConfig = {
-	c: { isVar: 1 },
-	bgc: { isVar: 1 },
+  c: { isVar: 1 },
+  bgc: { isVar: 1 },
 };
 ---
 
-<Flex lismClass='c--button' as='a' lh='s' py='10' px='20' hov='o' _propConfig={_propConfig} {...props}>
-	<slot />
+<Flex lismClass="c--button" as="a" lh="s" py="10" px="20" hov="o" _propConfig={_propConfig} {...props}>
+  <slot />
 </Flex>

package/src/components/Button/react/Button.jsx

@@ -2,11 +2,11 @@ import { Flex } from 'lism-css/react';
 import '../_style.css';
 
 export default function Button(props) {
-	// c--button では c, bgc は 変数で受け取る
-	const _propConfig = {
-		c: { isVar: 1 },
-		bgc: { isVar: 1 },
-	};
+  // c--button では c, bgc は 変数で受け取る
+  const _propConfig = {
+    c: { isVar: 1 },
+    bgc: { isVar: 1 },
+  };
 
-	return <Flex lismClass='c--button' as='a' lh='s' py='10' px='20' hov='o' _propConfig={_propConfig} {...props} />;
+  return <Flex lismClass="c--button" as="a" lh="s" py="10" px="20" hov="o" _propConfig={_propConfig} {...props} />;
 }

package/src/components/Callout/astro/Callout.astro

@@ -8,17 +8,17 @@ const { icon, title, flow, ...calloutProps } = getCalloutProps(Astro.props);
 ---
 
 <Stack {...calloutProps}>
-	{
-		title && (
-			<Flex class='c--callout_head' c='keycolor' fw='bold' ai='center' g='10'>
-				<Center class='c--callout_icon' fz='xl'>
-					<Icon icon={icon} />
-				</Center>
-				<span class='c--callout_title'>{title}</span>
-			</Flex>
-		)
-	}
-	<Flow class='c--callout_body' flow={flow}>
-		<slot />
-	</Flow>
+  {
+    title && (
+      <Flex class="c--callout_head" c="keycolor" fw="bold" ai="center" g="10">
+        <Center class="c--callout_icon" fz="xl">
+          <Icon icon={icon} />
+        </Center>
+        <span class="c--callout_title">{title}</span>
+      </Flex>
+    )
+  }
+  <Flow class="c--callout_body" flow={flow}>
+    <slot />
+  </Flow>
 </Stack>

package/src/components/Callout/getProps.ts

@@ -1,32 +1,32 @@
 import PRESETS from './presets';
 
 export type CalloutProps = {
-	type?: string;
-	keycolor?: string;
-	icon?: string;
-	title?: string;
-	flow?: string;
-	[key: string]: unknown;
+  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;
+  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': '-',
-		bdw: '4px',
-		bxsh: '10',
-		bdrs: '5',
-		...props,
-	};
+  return {
+    icon: _icon,
+    title,
+    flow,
+    lismClass: 'c--callout u--cbox',
+    keycolor: _keycolor,
+    p: '20',
+    g: '10',
+    bdc: 'keycolor',
+    'bd-x-s': '-',
+    bdw: '4px',
+    bxsh: '10',
+    bdrs: '5',
+    ...props,
+  };
 }

package/src/components/Callout/presets.ts

@@ -1,33 +1,33 @@
 type PresetData = {
-	icon: string;
-	color: string;
+  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',
-	},
+  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

@@ -3,21 +3,21 @@ 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);
+  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>
-	);
+  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/Chat/_style.css

@@ -1,64 +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;
+@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);
-	}
+    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_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>');
-	}
+  .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;
-	}
+  [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;
+  border-start-start-radius: 0;
 }
 
 /* speak バリアントの角丸調整: 右側 */
 .c--chat--speak[data-chat-dir='end'] > div > .c--chat_content {
-	border-start-end-radius: 0;
+  border-start-end-radius: 0;
 }

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

@@ -4,19 +4,19 @@ 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;
+  /** 吹き出しスタイル */
+  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;
@@ -24,18 +24,18 @@ 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>
+  {
+    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>