@lism-css/ui 0.11.0 → 0.13.0

package/README.md

@@ -113,7 +113,7 @@ import { Stack, Text } from 'lism-css/astro';
 
 Lism CSS is organized into two packages:
 
-- **[lism-css](https://www.npmjs.com/package/lism-css)** — Core CSS framework providing layout components (Box, Flex, Stack, Grid, etc.), design tokens, prop classes, and the responsive system.
+- **[lism-css](https://www.npmjs.com/package/lism-css)** — Core CSS framework providing layout components (Box, Flex, Stack, Grid, etc.), design tokens, property classes, and the responsive system.
 - **@lism-css/ui** (this package) — Interactive UI components (Accordion, Modal, Tabs, etc.) that extend the core layout system with ready-to-use interface patterns.
 
 You need `lism-css` installed to use `@lism-css/ui`.

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

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;
+export declare const Multiple: Story;
+export declare const AllowMultiple: Story;

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

@@ -1,52 +1,65 @@
-export function getRootProps({ lismClass, allowMultiple, ...props }: {
-    [x: string]: any;
-    lismClass: any;
-    allowMultiple: any;
-}): {
-    [x: string]: any;
-};
-export function getItemProps({ lismClass, ...props }: {
-    [x: string]: any;
-    lismClass: any;
-}): {
-    [x: string]: any;
-};
-export function getHeadingProps(props: any): any;
-export function getPanelProps({ lismClass, _contextID, accID, isOpen, ...props }: {
-    [x: string]: any;
-    lismClass: any;
-    _contextID: any;
-    accID?: string | undefined;
-    isOpen?: boolean | undefined;
-}): {
+export type AccordionRootProps = {
+    lismClass?: string;
+    allowMultiple?: boolean;
+    [key: string]: unknown;
+};
+export type AccordionItemProps = {
+    lismClass?: string;
+    [key: string]: unknown;
+};
+export type AccordionHeadingProps = {
+    as?: string;
+    role?: string;
+    lismClass?: string;
+    [key: string]: unknown;
+};
+export type AccordionPanelProps = {
+    lismClass?: string;
+    _contextID?: string;
+    accID?: string;
+    isOpen?: boolean;
+    [key: string]: unknown;
+};
+export declare function getRootProps({ lismClass, allowMultiple, ...props }: AccordionRootProps): {
+    [key: string]: unknown;
+};
+export declare function getItemProps({ lismClass, ...props }: AccordionItemProps): {
+    [key: string]: unknown;
+};
+export declare function getHeadingProps({ as, role, lismClass, set, ...props }: AccordionHeadingProps): {
+    lismClass: string;
+    as: string;
+    set: string[];
+};
+export declare function getButtonProps({ set, ...props }: Record<string, unknown>): {
+    lismClass: string;
+    as: string;
+    layout: string;
+    set: string[];
+    g: string;
+    w: string;
+    ai: string;
+    jc: string;
+};
+export declare function getPanelProps({ lismClass, _contextID, accID, isOpen, ...props }: AccordionPanelProps): {
     panelProps: {
         lismClass: string;
-        id: any;
-        hidden: string | undefined;
+        id: string;
+        hidden: boolean | undefined;
         pos: string;
         ov: string;
     };
     contentProps: {
         lismClass: string;
-        layout: string;
+        layout: "flow";
     };
 };
-export namespace defaultProps {
-    namespace button {
-        let lismClass: string;
-        let as: string;
-        let layout: string;
-        let setPlain: number;
-        let g: string;
-        let w: string;
-        let ai: string;
-        let jc: string;
-    }
-    let icon: {
-        lismClass: string;
-        as: string;
-        pi: string;
-        fxsh: string;
-        'aria-hidden': string;
+export declare const defaultProps: {
+    readonly icon: {
+        readonly lismClass: "c--accordion_icon a--icon";
+        readonly as: "span";
+        readonly pi: "center";
+        readonly fxsh: "0";
+        readonly 'aria-hidden': "true";
     };
-}
+};

package/dist/components/Accordion/getProps.js

@@ -1,44 +1,47 @@
 import e from "../../lism-css/dist/lib/helper/atts.js";
-function r({ lismClass: o, allowMultiple: t, ...n }) {
-  return n.lismClass = e(o, "c--accordion"), t && (n["data-allow-multiple"] = ""), n;
+import c from "../../lism-css/dist/lib/helper/mergeSet.js";
+function u({ lismClass: o, allowMultiple: n, ...t }) {
+  return t.lismClass = e(o, "c--accordion"), n && (t["data-allow-multiple"] = ""), t;
 }
-function d({ lismClass: o, ...t }) {
-  return t.lismClass = e(o, "c--accordion_item"), t;
+function f({ lismClass: o, ...n }) {
+  return n.lismClass = e(o, "c--accordion_item"), n;
 }
-function u(o) {
-  const n = { ...{
-    lismClass: "c--accordion_heading",
-    as: "div",
-    setPlain: 1
-  }, ...o };
-  return n.as === "div" && (n.role = "heading"), n;
+function m({ as: o = "div", role: n, lismClass: t, set: s, ...a }) {
+  const i = {
+    lismClass: e(t, "c--accordion_heading"),
+    as: o,
+    set: c("plain", s),
+    ...a
+  };
+  return i.as === "div" && (i.role = n ?? "heading"), i;
 }
-function f({ lismClass: o, _contextID: t, accID: n = "__LISM_ACC_ID__", isOpen: i = !1, ...s }) {
-  const a = {
-    lismClass: e(o, "c--accordion_panel"),
-    id: t || n,
-    hidden: i ? void 0 : "until-found",
-    pos: "relative",
-    ov: "hidden"
-  }, c = { lismClass: "c--accordion_content", layout: "flow", ...s };
-  return { panelProps: a, contentProps: c };
-}
-const P = {
-  // header: { lismClass: 'c--accordion_header' },
-  button: {
+function p({ set: o, ...n }) {
+  return {
     lismClass: "c--accordion_button",
     as: "button",
     layout: "flex",
-    setPlain: 1,
+    set: c("plain", o),
     g: "10",
     w: "100%",
     ai: "center",
-    jc: "between"
-  },
+    jc: "between",
+    ...n
+  };
+}
+function _({ lismClass: o, _contextID: n, accID: t = "__LISM_ACC_ID__", isOpen: s = !1, ...a }) {
+  const i = {
+    lismClass: e(o, "c--accordion_panel"),
+    id: n || t,
+    hidden: s ? void 0 : "until-found",
+    pos: "relative",
+    ov: "hidden"
+  }, r = { lismClass: "c--accordion_content", layout: "flow", ...a };
+  return { panelProps: i, contentProps: r };
+}
+const P = {
   icon: {
     lismClass: "c--accordion_icon a--icon",
     as: "span",
-    // d: 'grid',
     pi: "center",
     fxsh: "0",
     "aria-hidden": "true"
@@ -46,8 +49,9 @@ const P = {
 };
 export {
   P as defaultProps,
-  u as getHeadingProps,
-  d as getItemProps,
-  f as getPanelProps,
-  r as getRootProps
+  p as getButtonProps,
+  m as getHeadingProps,
+  f as getItemProps,
+  _ as getPanelProps,
+  u as getRootProps
 };

package/dist/components/Accordion/react/AccIcon.d.ts

@@ -1 +1,2 @@
-export default function AccIcon(props: any): import("react").JSX.Element;
+import { LismComponentProps } from 'lism-css/react';
+export default function AccIcon(props: LismComponentProps): import("react").JSX.Element;

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

@@ -1,38 +1,29 @@
+import { ElementType } from 'react';
+import { LismComponentProps } from 'lism-css/react';
+import { AccordionRootProps, AccordionItemProps, AccordionHeadingProps, AccordionPanelProps } from '../getProps';
 /**
  * 複数の AccordionItem をラップするルート要素
  */
-export function AccordionRoot({ children, ...props }: {
-    [x: string]: any;
-    children: any;
-}): import("react").JSX.Element;
+export declare function AccordionRoot({ children, ...props }: AccordionRootProps & LismComponentProps): import("react").JSX.Element;
 /**
  * 個別のアコーディオンアイテム（<div> ベース、setEvent で開閉イベントを登録）
  */
-export function AccordionItem({ children, ...props }: {
-    [x: string]: any;
-    children: any;
-}): import("react").JSX.Element;
+export declare function AccordionItem({ children, ...props }: AccordionItemProps & LismComponentProps): import("react").JSX.Element;
 /**
  * 見出しエリアのラッパー（デフォルトは <div role="heading">）
  * as に h2〜h6 を指定すると role は付与されない
  */
-export function Heading({ children, ...props }: {
-    [x: string]: any;
-    children: any;
-}): import("react").JSX.Element;
+export declare function Heading({ children, ...props }: AccordionHeadingProps & LismComponentProps): import("react").JSX.Element;
+type ButtonProps<T extends ElementType = 'button'> = LismComponentProps<T> & {
+    accID?: string;
+};
 /**
  * 開閉トリガーボタン
  * accID: Context から取得できればそれを優先、なければ props / プレースホルダー
  */
-export function Button({ children, accID: _accID, ...props }: {
-    [x: string]: any;
-    children: any;
-    accID?: string | undefined;
-}): import("react").JSX.Element;
+export declare function Button<T extends ElementType = 'button'>({ children, accID: _accID, ...props }: ButtonProps<T>): import("react").JSX.Element;
 /**
  * パネル
  */
-export function Panel({ children, ...props }: {
-    [x: string]: any;
-    children: any;
-}): import("react").JSX.Element;
+export declare function Panel({ children, ...props }: AccordionPanelProps & LismComponentProps): import("react").JSX.Element;
+export {};

package/dist/components/Accordion/react/Accordion.js

@@ -1,45 +1,46 @@
 "use client";
-import { jsxs as f, jsx as n } from "react/jsx-runtime";
-import { useContext as u, useRef as p, useId as m, useEffect as a, createContext as l } from "react";
-import d from "../../../lism-css/dist/lib/getLismProps.js";
+import { jsxs as a, jsx as n } from "react/jsx-runtime";
+import { useContext as u, useRef as p, useId as f, useEffect as m, createContext as d } from "react";
+import l from "../../../lism-css/dist/lib/getLismProps.js";
 import s from "../../../lism-css/dist/components/Lism/index.js";
-import I from "../../../lism-css/dist/components/Stack/index.js";
-import { defaultProps as P, getPanelProps as x, getHeadingProps as D, getItemProps as _, getRootProps as g } from "../getProps.js";
+import P from "../../../lism-css/dist/components/layout/Stack/index.js";
+import { getButtonProps as I, getPanelProps as x, getHeadingProps as g, getItemProps as D, getRootProps as _ } from "../getProps.js";
 import { setEvent as A } from "../setAccordion.js";
-import C from "./AccIcon.js";
+import h from "./AccIcon.js";
 /* empty css            */
-const i = l(null);
-function L({ children: t, ...o }) {
-  const r = g(o);
-  return /* @__PURE__ */ n(I, { ...r, children: t });
+const i = d(null);
+function S({ children: t, ...r }) {
+  const o = _(r);
+  return /* @__PURE__ */ n(P, { ...o, children: t });
 }
-function M({ children: t, ...o }) {
-  const r = p(null), e = m();
-  a(() => {
-    if (r.current)
-      return A(r.current);
+function X({ children: t, ...r }) {
+  const o = p(null), e = f();
+  m(() => {
+    if (o.current)
+      return A(o.current);
   }, []);
-  const c = d(_(o));
-  return /* @__PURE__ */ n(i.Provider, { value: { accID: e }, children: /* @__PURE__ */ n("div", { ref: r, ...c, children: t }) });
+  const c = l(D(r));
+  return /* @__PURE__ */ n(i.Provider, { value: { accID: e }, children: /* @__PURE__ */ n("div", { ref: o, ...c, children: t }) });
 }
-function S({ children: t, ...o }) {
-  return /* @__PURE__ */ n(s, { ...D(o), children: t });
+function $({ children: t, ...r }) {
+  const { as: o, ...e } = g(r);
+  return /* @__PURE__ */ n(s, { as: o, ...e, children: t });
 }
-function $({ children: t, accID: o = "__LISM_ACC_ID__", ...r }) {
-  const c = u(i)?.accID || o;
-  return /* @__PURE__ */ f(s, { ...P.button, ...r, "aria-controls": c, "aria-expanded": "false", children: [
+function b({ children: t, accID: r = "__LISM_ACC_ID__", ...o }) {
+  const c = u(i)?.accID || r;
+  return /* @__PURE__ */ a(s, { ...I(o), "aria-controls": c, "aria-expanded": "false", children: [
     t,
-    /* @__PURE__ */ n(C, {})
+    /* @__PURE__ */ n(h, {})
   ] });
 }
-function k({ children: t, ...o }) {
-  const r = u(i), { panelProps: e, contentProps: c } = x({ _contextID: r?.accID, ...o });
+function k({ children: t, ...r }) {
+  const o = u(i), { panelProps: e, contentProps: c } = x({ _contextID: o?.accID, ...r });
   return /* @__PURE__ */ n(s, { ...e, children: /* @__PURE__ */ n(s, { ...c, children: t }) });
 }
 export {
-  M as AccordionItem,
-  L as AccordionRoot,
-  $ as Button,
-  S as Heading,
+  X as AccordionItem,
+  S as AccordionRoot,
+  b as Button,
+  $ as Heading,
   k as Panel
 };

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

@@ -1,13 +1,12 @@
-import { AccordionRoot as Root, AccordionItem as Item, Heading, Panel, Button } from './Accordion';
+import { AccordionRoot as Root, AccordionItem as Item, Heading, Button, Panel } from './Accordion';
 import { default as Icon } from './AccIcon';
-declare namespace _default {
-    export { Root };
-    export { Item };
-    export { Header };
-    export { Heading };
-    export { Panel };
-    export { Icon };
-    export { Button };
-}
+declare const _default: {
+    Root: typeof Root;
+    Item: typeof Item;
+    Header: typeof Heading;
+    Heading: typeof Heading;
+    Panel: typeof Panel;
+    Icon: typeof Icon;
+    Button: typeof Button;
+};
 export default _default;
-declare const Header: typeof Heading;

package/dist/components/Accordion/setAccordion.d.ts

@@ -1,6 +1,9 @@
-export function setEvent(accordionItem: any): () => void;
-export default setAccordion;
+/**
+ * 個別のアコーディオンにイベントをセット（React用にクリーンアップ関数を返す）
+ */
+export declare const setEvent: (accordionItem: HTMLElement) => (() => void);
 /**
  * ページ内の全アコーディオンにイベントをセット（Astro用）
  */
-declare function setAccordion(): void;
+declare const setAccordion: () => void;
+export default setAccordion;

package/dist/components/Accordion/setAccordion.js

@@ -10,11 +10,13 @@ const i = (e) => {
   };
 }, f = (e) => {
   const t = e.parentNode;
-  t && (t.hasAttribute("data-allow-multiple") || t.querySelectorAll(":scope > [data-opened]").forEach((n) => p(n)));
+  t && (t.hasAttribute("data-allow-multiple") || t.querySelectorAll(":scope > [data-opened]").forEach((n) => {
+    p(n);
+  }));
 };
 async function A(e) {
-  const { panel: t, content: n, button: a } = i(e);
-  l(t), t.removeAttribute("hidden"), await s(), e.style.setProperty("--_panel-h", `${n.offsetHeight}px`), await s(), e.setAttribute("data-opened", ""), a.setAttribute("aria-expanded", "true"), await u(t) !== "canceled" && e.style.removeProperty("--_panel-h");
+  const { panel: t, content: n, button: o } = i(e);
+  l(t), t.removeAttribute("hidden"), await s(), e.style.setProperty("--_panel-h", `${n.offsetHeight}px`), await s(), e.setAttribute("data-opened", ""), o.setAttribute("aria-expanded", "true"), await u(t) !== "canceled" && e.style.removeProperty("--_panel-h");
 }
 async function p(e) {
   const { panel: t, button: n } = i(e);
@@ -25,21 +27,21 @@ function c(e) {
 }
 const b = (e) => {
   const { button: t, panel: n } = i(e);
-  n.hasAttribute("hidden") && (d = n.getAttribute("hidden"));
-  const a = (r) => {
+  n.hasAttribute("hidden") && (d = n.getAttribute("hidden") ?? "until-found");
+  const o = (r) => {
     r.preventDefault(), c(e);
-  }, o = (r) => {
+  }, a = (r) => {
     r.preventDefault(), c(e);
   };
-  return t.addEventListener("click", a), n.addEventListener("beforematch", o), () => {
-    t.removeEventListener("click", a), n.removeEventListener("beforematch", o);
+  return t.addEventListener("click", o), n.addEventListener("beforematch", a), () => {
+    t.removeEventListener("click", o), n.removeEventListener("beforematch", a);
   };
-}, y = () => {
+}, v = () => {
   document.querySelectorAll(".c--accordion_item").forEach((t) => {
     b(t);
   });
 };
 export {
-  y as default,
+  v as default,
   b as setEvent
 };

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

@@ -0,0 +1,13 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { default as Alert } from './react/Alert';
+declare const meta: Meta<typeof Alert>;
+export default meta;
+type Story = StoryObj<typeof Alert>;
+export declare const Default: Story;
+export declare const Point: Story;
+export declare const Warning: Story;
+export declare const Check: Story;
+export declare const Help: Story;
+export declare const Info: Story;
+export declare const SideMain: Story;
+export declare const CustomIcon: Story;

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

@@ -1,14 +1,16 @@
+import { LayoutType } from 'lism-css/lib/getLismProps';
+import { IconProps } from 'lism-css/react';
 export type AlertProps = {
     type?: string;
     keycolor?: string;
-    layout?: string;
-    icon?: string;
+    layout?: LayoutType;
+    icon?: IconProps['icon'];
     flow?: string;
     [key: string]: unknown;
 };
 export default function getAlertProps({ type, keycolor, layout, icon, flow, ...props }: AlertProps): {
-    icon: string;
-    layout: string;
+    icon: (import('react').ElementType | "alert" | "note" | "x" | "dot" | "lightbulb" | "warning" | "check" | "check-circle" | "question" | "info" | "logo-facebook" | "logo-instagram" | "logo-line" | "logo-pinterest" | "logo-tiktok" | "logo-x" | "logo-youtube" | "logo-codepen" | "logo-github" | "logo-tumblr" | "logo-amazon" | "folder" | "tag" | "calendar" | "clock" | "clockwise" | "ban" | "good" | "bad" | "bookmark" | "bookmark-fill" | "heart" | "heart-fill" | "star" | "star-fill" | "star-half" | "book" | "chat" | "cart" | "gear" | "home" | "sign-in" | "sign-out" | "user" | "lock" | "lock-open" | "dots" | "caret-down" | "caret-right" | "caret-down-fill" | "caret-right-fill" | "arrow-down" | "arrow-right" | import('lism-css/react').IconObject) | undefined;
+    layout: "center" | "flex" | "grid" | "flow" | "frame" | "box" | "cluster" | "columns" | "fluidCols" | "stack" | "sideMain" | "switchCols" | "tileGrid";
     flow: string;
     lismClass: string;
     keycolor: string;

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

@@ -1,5 +1,4 @@
-import { ReactNode } from 'react';
+import { ElementType } from 'react';
+import { LismComponentProps } from 'lism-css/react';
 import { AlertProps } from '../getProps';
-export default function Alert({ children, ...inputProps }: AlertProps & {
-    children?: ReactNode;
-}): import("react").JSX.Element;
+export default function Alert<T extends ElementType = 'div'>({ children, ...inputProps }: AlertProps & LismComponentProps<T>): import("react").JSX.Element;

package/dist/components/Alert/react/Alert.js

@@ -1,6 +1,6 @@
 import { jsxs as l, jsx as r } from "react/jsx-runtime";
-import s from "../../../lism-css/dist/components/Center/index.js";
-import n from "../../../lism-css/dist/components/Flow/index.js";
+import s from "../../../lism-css/dist/components/layout/Center/index.js";
+import n from "../../../lism-css/dist/components/layout/Flow/index.js";
 import p from "../../../lism-css/dist/components/atomic/Icon/index.js";
 import c from "../../../lism-css/dist/components/Lism/index.js";
 import x from "../getProps.js";

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

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

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

@@ -1,6 +1,10 @@
-export default function Avatar({ size, src, alt, ...props }: {
-    [x: string]: any;
-    size?: string | undefined;
-    src?: string | undefined;
-    alt?: string | undefined;
-}): import("react").JSX.Element;
+import { ElementType } from 'react';
+import { LayoutComponentProps } from 'lism-css/react';
+import { FrameProps } from 'lism-css/lib/types/LayoutProps';
+type AvatarProps<T extends ElementType = 'div'> = LayoutComponentProps<T, FrameProps> & {
+    size?: string;
+    src?: string;
+    alt?: string;
+};
+export default function Avatar<T extends ElementType = 'div'>({ size, src, alt, ...props }: AvatarProps<T>): import("react").JSX.Element;
+export {};

package/dist/components/Avatar/react/Avatar.js

@@ -1,5 +1,5 @@
 import { jsx as r } from "react/jsx-runtime";
-import m from "../../../lism-css/dist/components/Frame/index.js";
+import m from "../../../lism-css/dist/components/layout/Frame/index.js";
 function d({ size: a = "1.5em", src: t = "", alt: i = "", ...e }) {
   return /* @__PURE__ */ r(m, { lismClass: "c--avatar", ar: "1/1", w: a, bdrs: "99", ...e, children: /* @__PURE__ */ r("img", { src: t, alt: i, width: "100%", height: "100%", decoding: "async" }) });
 }

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

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

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

@@ -1 +1,3 @@
-export default function Badge(props: any): import("react").JSX.Element;
+import { ElementType } from 'react';
+import { LismComponentProps } from 'lism-css/react';
+export default function Badge<T extends ElementType = 'span'>(props: LismComponentProps<T>): import("react").JSX.Element;

package/dist/components/Badge/react/Badge.js

@@ -1,12 +1,9 @@
-import { jsx as s } from "react/jsx-runtime";
-import o from "../../../lism-css/dist/components/Lism/index.js";
+import { jsx as r } from "react/jsx-runtime";
+import a from "../../../lism-css/dist/components/Lism/index.js";
 /* empty css            */
-function n(r) {
-  return /* @__PURE__ */ s(o, { lismClass: "c--badge", as: "span", d: "inline-flex", fz: "xs", lh: "xs", py: "5", px: "10", bdrs: "10", _propConfig: {
-    c: { isVar: 1 },
-    bgc: { isVar: 1 }
-  }, ...r });
+function o(s) {
+  return /* @__PURE__ */ r(a, { lismClass: "c--badge", as: "span", d: "inline-flex", fz: "xs", lh: "xs", py: "5", px: "10", bdrs: "10", ...s });
 }
 export {
-  n as default
+  o as default
 };

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

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

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

@@ -1 +1,3 @@
-export default function Button(props: any): import("react").JSX.Element;
+import { ElementType } from 'react';
+import { LismComponentProps } from 'lism-css/react';
+export default function Button<T extends ElementType = 'a'>(props: LismComponentProps<T>): import("react").JSX.Element;

package/dist/components/Button/react/Button.js

@@ -1,11 +1,8 @@
-import { jsx as r } from "react/jsx-runtime";
-import t from "../../../lism-css/dist/components/Flex/index.js";
+import { jsx as t } from "react/jsx-runtime";
+import r from "../../../lism-css/dist/components/layout/Flex/index.js";
 /* empty css            */
 function a(o) {
-  return /* @__PURE__ */ r(t, { lismClass: "c--button", as: "a", lh: "s", py: "10", px: "20", hov: "o", _propConfig: {
-    c: { isVar: 1 },
-    bgc: { isVar: 1 }
-  }, ...o });
+  return /* @__PURE__ */ t(r, { lismClass: "c--button", as: "a", lh: "s", py: "10", px: "20", hov: "o", ...o });
 }
 export {
   a as default

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

@@ -0,0 +1,12 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { default as Callout } from './react/Callout';
+declare const meta: Meta<typeof Callout>;
+export default meta;
+type Story = StoryObj<typeof Callout>;
+export declare const Default: Story;
+export declare const WithTitle: Story;
+export declare const Alert: Story;
+export declare const Point: Story;
+export declare const Warning: Story;
+export declare const Check: Story;
+export declare const Help: Story;

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

@@ -1,13 +1,14 @@
+import { IconProps } from 'lism-css/react';
 export type CalloutProps = {
     type?: string;
     keycolor?: string;
-    icon?: string;
+    icon?: IconProps['icon'];
     title?: string;
     flow?: string;
     [key: string]: unknown;
 };
 export default function getCalloutProps({ type, keycolor, icon, title, flow, ...props }: CalloutProps): {
-    icon: string;
+    icon: (import('react').ElementType | "alert" | "note" | "x" | "dot" | "lightbulb" | "warning" | "check" | "check-circle" | "question" | "info" | "logo-facebook" | "logo-instagram" | "logo-line" | "logo-pinterest" | "logo-tiktok" | "logo-x" | "logo-youtube" | "logo-codepen" | "logo-github" | "logo-tumblr" | "logo-amazon" | "folder" | "tag" | "calendar" | "clock" | "clockwise" | "ban" | "good" | "bad" | "bookmark" | "bookmark-fill" | "heart" | "heart-fill" | "star" | "star-fill" | "star-half" | "book" | "chat" | "cart" | "gear" | "home" | "sign-in" | "sign-out" | "user" | "lock" | "lock-open" | "dots" | "caret-down" | "caret-right" | "caret-down-fill" | "caret-right-fill" | "arrow-down" | "arrow-right" | import('lism-css/react').IconObject) | undefined;
     title: string | undefined;
     flow: string;
     lismClass: string;