@lism-css/ui 0.11.0 → 0.13.0

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

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

package/dist/components/Callout/react/Callout.js

@@ -1,9 +1,9 @@
 import { jsxs as r, jsx as o } from "react/jsx-runtime";
-import i from "../../../lism-css/dist/components/Center/index.js";
-import s from "../../../lism-css/dist/components/Flex/index.js";
-import f from "../../../lism-css/dist/components/Flow/index.js";
+import i from "../../../lism-css/dist/components/layout/Center/index.js";
+import s from "../../../lism-css/dist/components/layout/Flex/index.js";
+import f from "../../../lism-css/dist/components/layout/Flow/index.js";
 import n from "../../../lism-css/dist/components/atomic/Icon/index.js";
-import p from "../../../lism-css/dist/components/Stack/index.js";
+import p from "../../../lism-css/dist/components/layout/Stack/index.js";
 import u from "../getProps.js";
 function j({ children: t, ...c }) {
   const { icon: a, title: l, flow: m, ...e } = u(c);

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

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { default as Chat } from './react/Chat';
+declare const meta: Meta<typeof Chat>;
+export default meta;
+type Story = StoryObj<typeof Chat>;
+export declare const Default: Story;
+export declare const End: Story;
+export declare const NoAvatar: Story;
+export declare const Think: Story;

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

@@ -1,53 +1,52 @@
+/**
+ * Chat コンポーネントの共通プロパティ処理
+ */
+export declare const defaultProps: {
+    readonly avatar: {
+        readonly lismClass: "c--chat_avatar";
+        readonly bgc: "base";
+        readonly ar: "1/1";
+        readonly bdrs: "99";
+        readonly 'aria-hidden': "true";
+    };
+    readonly name: {
+        readonly lismClass: "c--chat_name";
+        readonly c: "text-2";
+        readonly fs: "italic";
+        readonly fz: "2xs";
+        readonly lh: "1";
+        readonly py: "5";
+        readonly px: "10";
+        readonly aslf: "end";
+    };
+    readonly body: {
+        readonly lismClass: "c--chat_body";
+        readonly pos: "relative";
+    };
+    readonly deco: {
+        readonly lismClass: "c--chat_deco";
+        readonly pos: "absolute";
+    };
+    readonly content: {
+        readonly lismClass: "c--chat_content";
+        readonly bdrs: "30";
+        readonly p: "20";
+        readonly lh: "s";
+    };
+};
+export type ChatProps = {
+    variant?: string;
+    direction?: string;
+    keycolor?: string;
+    [key: string]: unknown;
+};
 /**
  * Chat コンポーネントのルートプロパティを生成
  */
-export default function getChatProps({ variant, direction, keycolor, ...props }: {
-    [x: string]: any;
-    variant?: string | undefined;
-    direction?: string | undefined;
-    keycolor?: string | undefined;
-}): {
+export default function getChatProps({ variant, direction, keycolor, ...props }: ChatProps): {
     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/getProps.js

@@ -18,11 +18,11 @@ const l = {
   },
   body: {
     lismClass: "c--chat_body",
-    pos: "rel"
+    pos: "relative"
   },
   deco: {
     lismClass: "c--chat_deco",
-    pos: "abs"
+    pos: "absolute"
   },
   content: {
     lismClass: "c--chat_content",

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

@@ -1,7 +1,11 @@
-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;
+import { ElementType } from 'react';
+import { LayoutComponentProps } from 'lism-css/react';
+import { GridLayoutProps } from 'lism-css/lib/types/LayoutProps';
+import { ChatProps } from '../getProps';
+type Props<T extends ElementType = 'div'> = ChatProps & LayoutComponentProps<T, GridLayoutProps> & {
+    name?: string;
+    avatar?: string;
+    flow?: string;
+};
+export default function Chat<T extends ElementType = 'div'>({ name, avatar, flow, children, ...props }: Props<T>): import("react").JSX.Element;
+export {};

package/dist/components/Chat/react/Chat.js

@@ -1,19 +1,19 @@
-import { jsxs as s, jsx as o } from "react/jsx-runtime";
+import { jsxs as a, jsx as o } from "react/jsx-runtime";
 import f from "../../../lism-css/dist/components/atomic/Decorator/index.js";
-import n from "../../../lism-css/dist/components/Flow/index.js";
-import h from "../../../lism-css/dist/components/Frame/index.js";
-import l from "../../../lism-css/dist/components/Grid/index.js";
+import n from "../../../lism-css/dist/components/layout/Flow/index.js";
+import h from "../../../lism-css/dist/components/layout/Frame/index.js";
+import l from "../../../lism-css/dist/components/layout/Grid/index.js";
 import m from "../../../lism-css/dist/components/Lism/index.js";
 import u, { defaultProps as r } from "../getProps.js";
 /* empty css            */
-function N({ name: i, avatar: t, flow: e = "s", children: a, ...d }) {
+function N({ name: t, avatar: i, flow: s = "s", children: e, ...d }) {
   const { "data-chat-dir": c, ...p } = u(d);
-  return /* @__PURE__ */ s(l, { "data-chat-dir": c, ...p, children: [
-    t && /* @__PURE__ */ o(h, { ...r.avatar, src: t, alt: "", children: /* @__PURE__ */ o("img", { src: t, alt: "", width: "60", height: "60", decoding: "async" }) }),
-    i && /* @__PURE__ */ o(m, { ...r.name, children: i }),
-    /* @__PURE__ */ s(m, { ...r.body, children: [
+  return /* @__PURE__ */ a(l, { "data-chat-dir": c, ...p, children: [
+    i && /* @__PURE__ */ o(h, { ...r.avatar, children: /* @__PURE__ */ o("img", { src: i, alt: "", width: "60", height: "60", decoding: "async" }) }),
+    t && /* @__PURE__ */ o(m, { ...r.name, children: t }),
+    /* @__PURE__ */ a(m, { ...r.body, children: [
       /* @__PURE__ */ o(f, { ...r.deco, className: "u--cbox is--skipFlow" }),
-      /* @__PURE__ */ o(n, { ...r.content, className: "u--cbox", flow: e, jslf: c, children: a })
+      /* @__PURE__ */ o(n, { ...r.content, className: "u--cbox", flow: s, jslf: c, children: e })
     ] })
   ] });
 }

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

@@ -0,0 +1,6 @@
+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 OpenByDefault: Story;

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

@@ -1,40 +1,39 @@
+import { LismProps } from 'lism-css/lib/getLismProps';
+export type DetailsProps = {
+    lismClass?: string;
+    [key: string]: unknown;
+};
 /**
  * Detailsコンポーネントのルート要素用プロパティを生成
- * @param {Object} props - コンポーネントのプロパティ
- * @param {string} props.lismClass - 追加のLismクラス
- * @returns {Object} 処理済みプロパティ
  */
-export function getDetailsProps({ lismClass, ...props }: {
+export declare function getDetailsProps({ lismClass, ...props }: DetailsProps): LismProps;
+export declare function getTitleProps({ set, ...props }: Record<string, unknown>): {
     lismClass: string;
-}): Object;
-export namespace defaultProps {
-    namespace summary {
-        let lismClass: string;
-        let layout: string;
-        let g: string;
-        let ai: string;
-    }
-    namespace title {
-        let lismClass_1: string;
-        export { lismClass_1 as lismClass };
-        export let as: string;
-        export let fx: string;
-        export let setPlain: number;
-    }
-    let icon: {
-        lismClass: string;
-        as: string;
-        'aria-hidden': string;
+    as: string;
+    fx: string;
+    set: string[];
+};
+/**
+ * 各サブコンポーネント用のデフォルトプロパティ
+ */
+export declare const defaultProps: {
+    readonly summary: {
+        readonly lismClass: "c--details_summary";
+        readonly layout: "flex";
+        readonly g: "10";
+        readonly ai: "center";
+    };
+    readonly icon: {
+        readonly lismClass: "c--details_icon a--icon";
+        readonly as: "span";
+        readonly 'aria-hidden': "true";
+    };
+    readonly body: {
+        readonly lismClass: "c--details_body";
+    };
+    readonly content: {
+        readonly lismClass: "c--details_content";
+        readonly layout: "flow";
+        readonly flow: "s";
     };
-    namespace body {
-        let lismClass_2: string;
-        export { lismClass_2 as lismClass };
-    }
-    namespace content {
-        let lismClass_3: string;
-        export { lismClass_3 as lismClass };
-        let layout_1: string;
-        export { layout_1 as layout };
-        export let flow: string;
-    }
-}
+};

package/dist/components/Details/getProps.js

@@ -1,15 +1,25 @@
-import a from "../../lism-css/dist/lib/helper/atts.js";
-function i({ lismClass: l, ...s }) {
-  return s.lismClass = a(l, "c--details"), s;
+import l from "../../lism-css/dist/lib/helper/atts.js";
+import a from "../../lism-css/dist/lib/helper/mergeSet.js";
+function o({ lismClass: t, ...s }) {
+  return s.lismClass = l(t, "c--details"), s;
 }
-const e = {
+function n({ set: t, ...s }) {
+  return {
+    lismClass: "c--details_title",
+    as: "span",
+    fx: "1",
+    set: a("plain", t),
+    ...s
+  };
+}
+const r = {
   summary: { lismClass: "c--details_summary", layout: "flex", g: "10", ai: "center" },
-  title: { lismClass: "c--details_title", as: "span", fx: "1", setPlain: 1 },
   icon: { lismClass: "c--details_icon a--icon", as: "span", "aria-hidden": "true" },
   body: { lismClass: "c--details_body" },
   content: { lismClass: "c--details_content", layout: "flow", flow: "s" }
 };
 export {
-  e as defaultProps,
-  i as getDetailsProps
+  r as defaultProps,
+  o as getDetailsProps,
+  n as getTitleProps
 };

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

@@ -1,37 +1,28 @@
+import { ElementType } from 'react';
+import { LismComponentProps } from 'lism-css/react';
+type DetailsRootProps = LismComponentProps<'details'> & {
+    open?: boolean;
+};
 /**
  * Details - ルートコンポーネント
  * details要素をレンダリング
  */
-export function Details({ children, ...props }: {
-    [x: string]: any;
-    children: any;
-}): import("react").JSX.Element;
+export declare function Details({ children, open, ...props }: DetailsRootProps): import("react").JSX.Element;
 /**
  * Summary - サマリーコンポーネント
  * details要素のsummary部分
  */
-export function Summary({ children, ...props }: {
-    [x: string]: any;
-    children: any;
-}): import("react").JSX.Element;
+export declare function Summary<T extends ElementType = 'summary'>({ children, ...props }: LismComponentProps<T>): import("react").JSX.Element;
 /**
  * Title - タイトルコンポーネント
  */
-export function Title({ children, ...props }: {
-    [x: string]: any;
-    children: any;
-}): import("react").JSX.Element;
+export declare function Title<T extends ElementType = 'span'>({ children, ...props }: LismComponentProps<T>): import("react").JSX.Element;
 /**
  * Icon - アイコンコンポーネント
  */
-export function Icon({ children, ...props }: {
-    [x: string]: any;
-    children: any;
-}): import("react").JSX.Element;
+export declare function Icon<T extends ElementType = 'span'>({ children, ...props }: LismComponentProps<T>): import("react").JSX.Element;
 /**
  * Content - コンテンツコンポーネント
  */
-export function Content({ children, ...props }: {
-    [x: string]: any;
-    children: any;
-}): import("react").JSX.Element;
+export declare function Content<T extends ElementType = 'div'>({ children, ...props }: LismComponentProps<T>): import("react").JSX.Element;
+export {};

package/dist/components/Details/react/Details.js

@@ -1,28 +1,28 @@
 import { jsx as o } from "react/jsx-runtime";
-import m from "../../../lism-css/dist/lib/getLismProps.js";
+import u from "../../../lism-css/dist/lib/getLismProps.js";
 import n from "../../../lism-css/dist/components/Lism/index.js";
-import { defaultProps as i, getDetailsProps as u } from "../getProps.js";
+import { defaultProps as i, getTitleProps as s, getDetailsProps as f } from "../getProps.js";
 /* empty css            */
-function l({ children: t, ...r }) {
-  const e = m(u(r));
-  return /* @__PURE__ */ o("details", { ...e, children: t });
+function y({ children: t, open: r, ...e }) {
+  const m = u(f(e));
+  return /* @__PURE__ */ o("details", { open: r, ...m, children: t });
 }
-function d({ children: t, ...r }) {
+function P({ children: t, ...r }) {
   return /* @__PURE__ */ o(n, { as: "summary", ...i.summary, ...r, children: t });
 }
-function y({ children: t, ...r }) {
-  return /* @__PURE__ */ o(n, { ...i.title, ...r, children: t });
+function g({ children: t, ...r }) {
+  return /* @__PURE__ */ o(n, { ...s(r), children: t });
 }
-function P({ children: t, ...r }) {
+function x({ children: t, ...r }) {
   return /* @__PURE__ */ o(n, { ...i.icon, ...r, children: t });
 }
-function x({ children: t, ...r }) {
+function D({ children: t, ...r }) {
   return /* @__PURE__ */ o(n, { ...i.body, children: /* @__PURE__ */ o(n, { ...i.content, ...r, children: t }) });
 }
 export {
-  x as Content,
-  l as Details,
-  P as Icon,
-  d as Summary,
-  y as Title
+  D as Content,
+  y as Details,
+  x as Icon,
+  P as Summary,
+  g as Title
 };

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

@@ -1,9 +1,9 @@
 import { Details as Root, Summary, Title, Icon, Content } from './Details';
-declare namespace _default {
-    export { Root };
-    export { Summary };
-    export { Title };
-    export { Icon };
-    export { Content };
-}
+declare const _default: {
+    Root: typeof Root;
+    Summary: typeof Summary;
+    Title: typeof Title;
+    Icon: typeof Icon;
+    Content: typeof Content;
+};
 export default _default;

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

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

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

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { default as DummyText } from './react/DummyText';
+declare const meta: Meta<typeof DummyText>;
+export default meta;
+type Story = StoryObj<typeof DummyText>;
+export declare const Default: Story;
+export declare const Japanese: Story;
+export declare const Short: Story;
+export declare const Long: Story;

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

@@ -0,0 +1,6 @@
+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 WithTitle: Story;

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

@@ -1,41 +1,40 @@
-export function getProps({ lismClass, duration, style, ...props }: {
-    [x: string]: any;
-    lismClass?: string | undefined;
-    duration: any;
-    style?: {} | undefined;
-}): {
-    style: {};
+export type ModalRootProps = {
+    lismClass?: string;
+    set?: string;
+    duration?: string;
+    style?: Record<string, string>;
+    [key: string]: unknown;
+};
+export type ModalInnerProps = {
+    lismClass?: string;
+    offset?: string;
+    style?: Record<string, string>;
+    [key: string]: unknown;
+};
+export declare function getProps({ lismClass, set, duration, style, ...props }: ModalRootProps): {
+    style: Record<string, string>;
     lismClass: string;
-    setPlain: boolean;
+    set: string[];
     as: string;
 };
-export function getInnerProps({ lismClass, offset, style, ...props }: {
-    [x: string]: any;
-    lismClass?: string | undefined;
-    offset: any;
-    style?: {} | undefined;
-}): {
+export declare function getInnerProps({ lismClass, offset, style, ...props }: ModalInnerProps): {
     lismClass: string;
-    style: {};
+    style: Record<string, string>;
+};
+export declare function getOpenBtnProps({ set, ...props }: Record<string, unknown>): {
+    as: string;
+    set: string[];
+    hov: string;
+    d: string;
+};
+export declare function getCloseBtnProps({ set, ...props }: Record<string, unknown>): {
+    as: string;
+    set: string[];
+    hov: string;
+    d: string;
+};
+export declare const defaultProps: {
+    body: {
+        lismClass: string;
+    };
 };
-export namespace defaultProps {
-    namespace body {
-        let lismClass: string;
-    }
-    namespace closeBtn {
-        let as: string;
-        let setPlain: boolean;
-        let hov: string;
-        let d: string;
-    }
-    namespace openBtn {
-        let as_1: string;
-        export { as_1 as as };
-        let setPlain_1: boolean;
-        export { setPlain_1 as setPlain };
-        let hov_1: string;
-        export { hov_1 as hov };
-        let d_1: string;
-        export { d_1 as d };
-    }
-}

package/dist/components/Modal/getProps.js

@@ -1,25 +1,44 @@
 import e from "../../lism-css/dist/lib/helper/atts.js";
-function i({ lismClass: t = "", duration: o, style: n = {}, ...s }) {
+import r from "../../lism-css/dist/lib/helper/mergeSet.js";
+function f({ lismClass: n = "", set: o, duration: t, style: s = {}, ...i }) {
   const l = {
-    lismClass: e(t, "c--modal"),
-    setPlain: !0
+    lismClass: e(n, "c--modal"),
+    set: r("plain", o)
   };
-  return o && (n["--duration"] = o), { as: "dialog", ...l, style: n, ...s };
+  return t && (s["--duration"] = t), { as: "dialog", ...l, style: s, ...i };
 }
-function a({ lismClass: t = "", offset: o, style: n = {}, ...s }) {
-  return o && (n["--offset"] = o), {
-    lismClass: e(t, "c--modal_inner"),
-    style: n,
+function u({ lismClass: n = "", offset: o, style: t = {}, ...s }) {
+  return o && (t["--offset"] = o), {
+    lismClass: e(n, "c--modal_inner"),
+    style: t,
     ...s
   };
 }
-const u = {
-  body: { lismClass: "c--modal_body" },
-  closeBtn: { as: "button", setPlain: !0, hov: "o", d: "in-flex" },
-  openBtn: { as: "button", setPlain: !0, hov: "o", d: "in-flex" }
+function m({ set: n, ...o }) {
+  return {
+    as: "button",
+    set: r("plain", n),
+    hov: "o",
+    d: "inline-flex",
+    ...o
+  };
+}
+function c({ set: n, ...o }) {
+  return {
+    as: "button",
+    set: r("plain", n),
+    hov: "o",
+    d: "inline-flex",
+    ...o
+  };
+}
+const d = {
+  body: { lismClass: "c--modal_body" }
 };
 export {
-  u as defaultProps,
-  a as getInnerProps,
-  i as getProps
+  d as defaultProps,
+  c as getCloseBtnProps,
+  u as getInnerProps,
+  m as getOpenBtnProps,
+  f as getProps
 };

package/dist/components/Modal/react/Body.d.ts

@@ -1,4 +1,2 @@
-export default function ModalBody({ children, ...props }: {
-    [x: string]: any;
-    children: any;
-}): import("react").JSX.Element;
+import { LismComponentProps } from 'lism-css/react';
+export default function ModalBody({ children, ...props }: LismComponentProps): import("react").JSX.Element;

package/dist/components/Modal/react/CloseBtn.d.ts

@@ -1,7 +1,9 @@
-export default function CloseBtn({ children, modalId, icon, srText, ...props }: {
-    [x: string]: any;
-    children: any;
-    modalId?: string | undefined;
-    icon: any;
-    srText?: string | undefined;
-}): import("react").JSX.Element;
+import { ElementType } from 'react';
+import { LismComponentProps, IconProps } from 'lism-css/react';
+type CloseBtnProps<T extends ElementType = 'button'> = LismComponentProps<T> & {
+    modalId?: string;
+    icon?: IconProps['icon'];
+    srText?: string;
+};
+export default function CloseBtn<T extends ElementType = 'button'>({ children, modalId, icon, srText, ...props }: CloseBtnProps<T>): import("react").JSX.Element;
+export {};

package/dist/components/Modal/react/CloseBtn.js

@@ -1,13 +1,13 @@
 import { jsx as o, jsxs as m, Fragment as n } from "react/jsx-runtime";
 import a from "../../../lism-css/dist/components/atomic/Icon/index.js";
-import f from "../../../lism-css/dist/components/Lism/index.js";
-import { defaultProps as i } from "../getProps.js";
-function x({ children: r, modalId: s = "", icon: e, srText: t = "Close", ...l }) {
-  return /* @__PURE__ */ o(f, { "data-modal-close": s, ...i.closeBtn, ...l, children: r || /* @__PURE__ */ m(n, { children: [
+import i from "../../../lism-css/dist/components/Lism/index.js";
+import { getCloseBtnProps as f } from "../getProps.js";
+function u({ children: r, modalId: s = "", icon: e, srText: t = "Close", ...l }) {
+  return /* @__PURE__ */ o(i, { "data-modal-close": s, ...f(l), children: r || /* @__PURE__ */ m(n, { children: [
     /* @__PURE__ */ o(a, { icon: e || "x" }),
     /* @__PURE__ */ o("span", { className: "u--srOnly", children: t || "Close" })
   ] }) });
 }
 export {
-  x as default
+  u as default
 };

package/dist/components/Modal/react/Inner.d.ts

@@ -1,4 +1,3 @@
-export default function ModalInner({ children, ...props }: {
-    [x: string]: any;
-    children: any;
-}): import("react").JSX.Element;
+import { LismComponentProps } from 'lism-css/react';
+import { ModalInnerProps } from '../getProps';
+export default function ModalInner({ children, ...props }: ModalInnerProps & LismComponentProps): import("react").JSX.Element;