@lism-css/ui 0.2.0 → 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/Alert/astro/index.d.ts

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

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

@@ -0,0 +1,20 @@
+export type AlertProps = {
+    type?: string;
+    keycolor?: string;
+    layout?: string;
+    icon?: string;
+    flow?: string;
+    [key: string]: unknown;
+};
+export default function getAlertProps({ type, keycolor, layout, icon, flow, ...props }: AlertProps): {
+    icon: string;
+    layout: string;
+    flow: string;
+    lismClass: string;
+    keycolor: string;
+    ai: string;
+    p: string;
+    g: string;
+    bd: boolean;
+    bdrs: string;
+};

package/dist/components/Alert/presets.d.ts

@@ -0,0 +1,6 @@
+type PresetData = {
+    icon: string;
+    color: string;
+};
+declare const PRESETS: Record<string, PresetData>;
+export default PRESETS;

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

@@ -0,0 +1,5 @@
+import { ReactNode } from 'react';
+import { AlertProps } from '../getProps';
+export default function Alert({ children, ...inputProps }: AlertProps & {
+    children?: ReactNode;
+}): import("react").JSX.Element;

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

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

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/astro/index.d.ts

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

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

@@ -0,0 +1,22 @@
+export type CalloutProps = {
+    type?: string;
+    keycolor?: string;
+    icon?: string;
+    title?: string;
+    flow?: string;
+    [key: string]: unknown;
+};
+export default function getCalloutProps({ type, keycolor, icon, title, flow, ...props }: CalloutProps): {
+    icon: string;
+    title: string | undefined;
+    flow: string;
+    lismClass: string;
+    keycolor: string | null;
+    p: string;
+    g: string;
+    bdc: string;
+    'bd-x-s': boolean;
+    bdw: string;
+    bxsh: string;
+    bdrs: string;
+};

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

@@ -0,0 +1,6 @@
+type PresetData = {
+    icon: string;
+    color: string;
+};
+declare const PRESETS: Record<string, PresetData>;
+export default PRESETS;

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

@@ -0,0 +1,5 @@
+import { ReactNode } from 'react';
+import { CalloutProps } from '../getProps';
+export default function Callout({ children, ...inputProps }: CalloutProps & {
+    children?: ReactNode;
+}): import("react").JSX.Element;

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

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

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

@@ -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';

package/dist/components/react.d.ts

@@ -1,6 +1,11 @@
 export { default as Accordion } from './Accordion/react';
+export { default as Alert } from './Alert/react';
 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}}.-hov\:reverse{--hov-c:var(--bgc);--hov-bgc:var(--c)}.-hov\:reverse:where(.c--button--fill){--hov-bgc:transparent}.-hov\:reverse:where(.c--button--outline){--hov-c:var(--base)}@media (any-hover:hover){.-hov\:reverse:hover{background-color:var(--hov-bgc)!important;color:var(--hov-c)!important}}
+@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.0",
-  "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/Alert/_style.css

@@ -0,0 +1 @@
+/* Alert component styles */

package/src/components/Alert/astro/Alert.astro

@@ -0,0 +1,17 @@
+---
+import { Flow, Lism, Center, Icon } from 'lism-css/astro';
+import getAlertProps, { type AlertProps } from '../getProps';
+
+type Props = AlertProps;
+
+const { icon, layout, flow, ...alertProps } = getAlertProps(Astro.props);
+---
+
+<Lism layout={layout} {...alertProps}>
+	<Center isSide={layout === 'sideMain'} c='keycolor' fz='xl' fxsh='0'>
+		<Icon icon={icon} />
+	</Center>
+	<Flow flow={flow}>
+		<slot />
+	</Flow>
+</Lism>

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

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

package/src/components/Alert/getProps.ts

@@ -0,0 +1,37 @@
+import PRESETS from './presets';
+
+export type AlertProps = {
+	type?: string;
+	keycolor?: string;
+	layout?: string;
+	icon?: string;
+	flow?: string;
+	[key: string]: unknown;
+};
+
+export default function getAlertProps({
+	type = 'alert',
+	keycolor,
+	layout = 'flex',
+	icon,
+	flow = 's',
+	...props
+}: AlertProps) {
+	const presetData = type ? PRESETS[type] : null;
+	const _icon = icon || presetData?.icon || 'info';
+	const _color = keycolor || presetData?.color || 'currentColor';
+
+	return {
+		icon: _icon,
+		layout,
+		flow,
+		lismClass: 'c--alert u-cbox',
+		keycolor: _color,
+		ai: 'center',
+		p: '15',
+		g: '15',
+		bd: true,
+		bdrs: '10',
+		...props,
+	};
+}

package/src/components/Alert/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',
+	},
+	info: {
+		icon: 'info',
+		color: 'blue',
+	},
+};
+
+export default PRESETS;

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

@@ -0,0 +1,16 @@
+import type { ReactNode } from 'react';
+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);
+
+	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/Alert/react/index.ts

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

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/_style.css

@@ -0,0 +1 @@
+/* Callout component styles */

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

@@ -0,0 +1,24 @@
+---
+import { Flow, Flex, Stack, Icon, Center } from 'lism-css/astro';
+import getCalloutProps, { type CalloutProps } from '../getProps';
+
+type Props = CalloutProps;
+
+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>
+</Stack>