@lism-css/ui 0.11.0 → 0.12.0

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

@@ -1,5 +1,5 @@
+import { ElementType } from 'react';
+import { LismComponentProps } from 'lism-css/react';
+import { ModalRootProps } from '../getProps';
+declare const Modal: <T extends ElementType = "dialog">({ children, ...props }: ModalRootProps & LismComponentProps<T>) => import("react").JSX.Element;
 export default Modal;
-declare function Modal({ children, ...props }: {
-    [x: string]: any;
-    children: any;
-}): import("react").JSX.Element;

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

@@ -1,17 +1,19 @@
 "use client";
-import { jsx as o } from "react/jsx-runtime";
-import { useRef as f, useEffect as m } from "react";
-import n from "../../../lism-css/dist/components/Lism/index.js";
+import { jsx as m } from "react/jsx-runtime";
+import { useRef as s, useEffect as n } from "react";
+import p from "../../../lism-css/dist/components/Lism/index.js";
 import { setEvent as u } from "../setModal.js";
-import { getProps as p } from "../getProps.js";
+import { getProps as a } from "../getProps.js";
 /* empty css            */
-const x = ({ children: t, ...e }) => {
-  const r = f(null);
-  return m(() => {
+const P = ({ children: o, ...t }) => {
+  const r = s(null);
+  n(() => {
     if (r?.current)
       return u(r?.current);
-  }, [r]), /* @__PURE__ */ o(n, { forwardedRef: r, ...p(e), children: t });
+  }, [r]);
+  const { as: e, ...f } = a(t);
+  return /* @__PURE__ */ m(p, { as: e, forwardedRef: r, ...f, children: o });
 };
 export {
-  x as default
+  P as default
 };

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

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

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

@@ -1,9 +1,9 @@
 import { jsx as n } from "react/jsx-runtime";
 import p from "../../../lism-css/dist/components/Lism/index.js";
-import { defaultProps as e } from "../getProps.js";
-function d({ children: o, modalId: t = "", ...r }) {
-  return /* @__PURE__ */ n(p, { "data-modal-open": t, ...e.openBtn, ...r, children: o });
+import { getOpenBtnProps as e } from "../getProps.js";
+function i({ children: o, modalId: t = "", ...r }) {
+  return /* @__PURE__ */ n(p, { "data-modal-open": t, ...e(r), children: o });
 }
 export {
-  d as default
+  i as default
 };

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

@@ -1,13 +1,12 @@
-import { default as Root } from './Modal';
 import { default as Inner } from './Inner';
 import { default as Body } from './Body';
 import { default as CloseBtn } from './CloseBtn';
 import { default as OpenBtn } from './OpenBtn';
-declare namespace _default {
-    export { Root };
-    export { Inner };
-    export { Body };
-    export { CloseBtn };
-    export { OpenBtn };
-}
+declare const _default: {
+    Root: <T extends import('react').ElementType = "dialog">({ children, ...props }: import('../getProps').ModalRootProps & import('lism-css/react').LismComponentProps<T>) => import("react").JSX.Element;
+    Inner: typeof Inner;
+    Body: typeof Body;
+    CloseBtn: typeof CloseBtn;
+    OpenBtn: typeof OpenBtn;
+};
 export default _default;

package/dist/components/NavMenu/NavMenu.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 WithNest: Story;
+export declare const WithHoverColor: Story;

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

@@ -1,32 +1,34 @@
-/**
- * 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;
-}): {
+export type NavMenuRootProps = {
+    hovC?: string;
+    hovBgc?: string;
+    itemP?: string;
+    style?: Record<string, string>;
+    [key: string]: unknown;
+};
+export type NavMenuLinkProps = {
+    href?: string;
+    as?: string;
+    [key: string]: unknown;
+};
+export declare function getRootProps({ hovC, hovBgc, itemP, style, ...props }: NavMenuRootProps): {
+    lismClass: string;
+    as: string;
+    style: {
+        [x: string]: string;
+    };
+};
+export declare function getNestProps(props: Record<string, unknown>): {
+    lismClass: string;
+    as: string;
+    'px-s': string;
+};
+export declare function getItemProps(props: Record<string, unknown>): {
+    lismClass: string;
+    as: string;
+};
+export declare function getLinkProps({ href, as, ...props }: NavMenuLinkProps): {
     lismClass: string;
     as: string;
-    style: {};
+    href: string | undefined;
+    c: string;
 };
-/**
- * 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.as='span'] - HTML タグ
- */
-export function getLinkProps({ href, as, ...props }?: string): any;

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

@@ -1,16 +1,6 @@
-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;
+import { LismComponentProps } from 'lism-css/react';
+import { NavMenuRootProps, NavMenuLinkProps } from '../getProps';
+export declare function Root({ children, ...props }: NavMenuRootProps & LismComponentProps): import("react").JSX.Element;
+export declare function Nest({ children, ...props }: LismComponentProps): import("react").JSX.Element;
+export declare function Item({ children, ...props }: LismComponentProps): import("react").JSX.Element;
+export declare function Link({ children, ...props }: NavMenuLinkProps & LismComponentProps): import("react").JSX.Element;

package/dist/components/NavMenu/react/NavMenu.js

@@ -1,24 +1,28 @@
-import { jsx as r } from "react/jsx-runtime";
-import n from "../../../lism-css/dist/components/Flex/index.js";
-import e from "../../../lism-css/dist/components/Lism/index.js";
-import m from "../../../lism-css/dist/components/Stack/index.js";
-import { getNestProps as i, getLinkProps as f, getItemProps as p, getRootProps as u } from "../getProps.js";
+import { jsx as n } from "react/jsx-runtime";
+import i from "../../../lism-css/dist/components/layout/Flex/index.js";
+import m from "../../../lism-css/dist/components/Lism/index.js";
+import e from "../../../lism-css/dist/components/layout/Stack/index.js";
+import { getNestProps as p, getLinkProps as f, getItemProps as a, getRootProps as c } from "../getProps.js";
 /* empty css            */
-function I({ children: t, ...o }) {
-  return /* @__PURE__ */ r(m, { ...u(o), children: t });
+function x({ children: o, ...t }) {
+  const { as: r, ...s } = c(t);
+  return /* @__PURE__ */ n(e, { as: r, ...s, children: o });
 }
-function L({ children: t, ...o }) {
-  return /* @__PURE__ */ r(m, { ...i(o), children: t });
+function I({ children: o, ...t }) {
+  const { as: r, ...s } = p(t);
+  return /* @__PURE__ */ n(e, { as: r, ...s, children: o });
 }
-function N({ children: t, ...o }) {
-  return /* @__PURE__ */ r(e, { ...p(o), children: t });
+function L({ children: o, ...t }) {
+  const { as: r, ...s } = a(t);
+  return /* @__PURE__ */ n(m, { as: r, ...s, children: o });
 }
-function R({ children: t, ...o }) {
-  return /* @__PURE__ */ r(n, { ...f(o), children: t });
+function N({ children: o, ...t }) {
+  const { as: r, ...s } = f(t);
+  return /* @__PURE__ */ n(i, { as: r, ...s, children: o });
 }
 export {
-  N as Item,
-  R as Link,
-  L as Nest,
-  I as Root
+  L as Item,
+  N as Link,
+  I as Nest,
+  x as Root
 };

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

@@ -1,8 +1,8 @@
 import { Root, Item, Link, Nest } from './NavMenu';
-declare namespace _default {
-    export { Root };
-    export { Item };
-    export { Link };
-    export { Nest };
-}
+declare const _default: {
+    Root: typeof Root;
+    Item: typeof Item;
+    Link: typeof Link;
+    Nest: typeof Nest;
+};
 export default _default;

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

@@ -0,0 +1,10 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { default as ShapeDivider } from './react/ShapeDivider';
+declare const meta: Meta<typeof ShapeDivider>;
+export default meta;
+type Story = StoryObj<typeof ShapeDivider>;
+export declare const Default: Story;
+export declare const FlipX: Story;
+export declare const FlipY: Story;
+export declare const HighLevel: Story;
+export declare const Animation: Story;

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

@@ -1,11 +1,16 @@
-/**
- * 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;
+export type ShapeDividerProps = {
+    viewBox?: string;
+    isAnimation?: boolean;
+    isEmpty?: boolean;
+    level?: number;
+    stretch?: string;
+    offset?: string;
+    flip?: string;
+    style?: Record<string, string>;
+    [key: string]: unknown;
+};
+export default function getProps({ viewBox, isAnimation, isEmpty, level, stretch, offset, flip, style, ...restProps }: ShapeDividerProps): {
+    style: Record<string, string | undefined>;
+    viewBox: string | undefined;
+    isEmpty: boolean | undefined;
+} | null;

package/dist/components/ShapeDivider/getProps.js

@@ -1,22 +1,20 @@
-function d({ viewBox: a, isAnimation: r, isEmpty: s, level: n = 5, stretch: i, offset: u, flip: l, style: o = {}, ...f }) {
-  if (n === 0) return null;
-  const t = { ...o };
-  t["--level"] = n || null, t["--_inner-offset"] = u || null, t["--_inner-stretch"] = i || null;
-  const e = {
+function f({ viewBox: r, isAnimation: a, isEmpty: s, level: i = 5, stretch: o, offset: d, flip: e, style: u = {}, ...l }) {
+  if (i === 0) return null;
+  const t = { ...u };
+  t["--level"] = i != null ? String(i) : void 0, t["--_inner-offset"] = d ?? void 0, t["--_inner-stretch"] = o ?? void 0;
+  const n = {
     lismClass: "c--shapeDivider",
     "max-sz": "full",
     "aria-hidden": "true"
   };
-  return l && (e["data-flip"] = l), r && (e["data-has-animation"] = "true"), {
-    ...e,
+  return e && (n["data-flip"] = e), a && (n["data-has-animation"] = "true"), {
+    ...n,
     style: t,
-    // SVG用のprops
-    viewBox: a,
+    viewBox: r,
     isEmpty: s,
-    // その他のprops
-    ...f
+    ...l
   };
 }
 export {
-  d as default
+  f as default
 };

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

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

package/dist/components/ShapeDivider/react/ShapeDivider.js

@@ -2,10 +2,10 @@ import { jsx as e } from "react/jsx-runtime";
 import l from "../../../lism-css/dist/components/Lism/index.js";
 import p from "../getProps.js";
 /* empty css            */
-function v({ children: i, ...o }) {
+function h({ children: i, ...o }) {
   const r = p(o);
   if (!r) return null;
-  const { viewBox: s, isAnimation: m, isEmpty: t, ...n } = r;
+  const { viewBox: s, isEmpty: t, ...n } = r;
   return /* @__PURE__ */ e(l, { ...n, children: t ? null : /* @__PURE__ */ e("div", { className: "c--shapeDivider_inner", children: /* @__PURE__ */ e(
     "svg",
     {
@@ -22,5 +22,5 @@ function v({ children: i, ...o }) {
   ) }) });
 }
 export {
-  v as default
+  h as default
 };

package/dist/components/Tabs/Tabs.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 DefaultIndex2: Story;

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

@@ -1,6 +1,13 @@
-export default function getTabsProps({ lismClass, ...props }: {
-    [x: string]: any;
-    lismClass: any;
-}): {
+type TabsProps = {
+    lismClass?: string;
+    [key: string]: unknown;
+};
+export default function getTabsProps({ lismClass, ...props }: TabsProps): {
+    lismClass: string;
+};
+export declare function getTabProps({ set, unset, ...props }: Record<string, unknown>): {
+    as: string;
     lismClass: string;
+    set: string[];
 };
+export {};

package/dist/components/Tabs/getProps.js

@@ -1,10 +1,20 @@
 import r from "../../lism-css/dist/lib/helper/atts.js";
-function o({ lismClass: s, ...t }) {
+import o from "../../lism-css/dist/lib/helper/mergeSet.js";
+function i({ lismClass: t, ...s }) {
   return {
-    lismClass: r(s, "c--tabs"),
-    ...t
+    lismClass: r(t, "c--tabs"),
+    ...s
+  };
+}
+function l({ set: t, unset: s, ...a }) {
+  return {
+    as: "button",
+    lismClass: "c--tabs_tab",
+    set: o("plain", t, s),
+    ...a
   };
 }
 export {
-  o as default
+  i as default,
+  l as getTabProps
 };

package/dist/components/Tabs/react/Tab.d.ts

@@ -1,6 +1,8 @@
-export default function Tab({ tabId, index, isActive, ...props }: {
-    [x: string]: any;
-    tabId?: string | undefined;
-    index?: number | undefined;
-    isActive?: boolean | undefined;
-}): import("react").JSX.Element;
+import { LismComponentProps } from 'lism-css/react';
+type TabProps = LismComponentProps & {
+    tabId?: string;
+    index?: number;
+    isActive?: boolean;
+};
+export default function Tab({ tabId, index, isActive, ...props }: TabProps): import("react").JSX.Element;
+export {};

package/dist/components/Tabs/react/Tab.js

@@ -1,9 +1,18 @@
-import { jsx as e } from "react/jsx-runtime";
-import l from "../../../lism-css/dist/components/Lism/index.js";
-function i({ tabId: t = "tab", index: a = 0, isActive: r = !1, ...o }) {
-  const s = `${t}-${a}`;
-  return /* @__PURE__ */ e(l, { as: "button", lismClass: "c--tabs_tab", setPlain: !0, role: "tab", "aria-controls": s, "aria-selected": r ? "true" : "false", ...o });
+import { jsx as f } from "react/jsx-runtime";
+import s from "../../../lism-css/dist/components/Lism/index.js";
+import { getTabProps as l } from "../getProps.js";
+function c({ tabId: r = "tab", index: o = 0, isActive: t = !1, ...a }) {
+  const e = `${r}-${o}`;
+  return /* @__PURE__ */ f(
+    s,
+    {
+      ...l(a),
+      role: "tab",
+      "aria-controls": e,
+      "aria-selected": t ? "true" : "false"
+    }
+  );
 }
 export {
-  i as default
+  c as default
 };

package/dist/components/Tabs/react/TabItem.d.ts

@@ -1,4 +1,7 @@
-export default function TabItem({ isTabItem, children }: {
-    isTabItem?: boolean | undefined;
-    children: any;
-}): import("react").JSX.Element;
+import { ReactNode } from 'react';
+type TabItemProps = {
+    isTabItem?: boolean;
+    children?: ReactNode;
+};
+export default function TabItem({ isTabItem, children }: TabItemProps): import("react").JSX.Element;
+export {};

package/dist/components/Tabs/react/TabList.d.ts

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

package/dist/components/Tabs/react/TabPanel.d.ts

@@ -1,6 +1,8 @@
-export default function TabPanel({ tabId, isActive, index, ...props }: {
-    [x: string]: any;
-    tabId?: string | undefined;
-    isActive?: boolean | undefined;
-    index?: number | undefined;
-}): import("react").JSX.Element;
+import { LismComponentProps } from 'lism-css/react';
+type TabPanelProps = LismComponentProps & {
+    tabId?: string;
+    isActive?: boolean;
+    index?: number;
+};
+export default function TabPanel({ tabId, isActive, index, ...props }: TabPanelProps): import("react").JSX.Element;
+export {};

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

@@ -1,7 +1,9 @@
-export default function Tabs({ tabId, defaultIndex, listProps, children, ...props }: {
-    [x: string]: any;
-    tabId?: string | undefined;
-    defaultIndex?: number | undefined;
-    listProps?: {} | undefined;
-    children: any;
-}): import("react").JSX.Element;
+import { ElementType } from 'react';
+import { LismComponentProps } from 'lism-css/react';
+type TabsProps<T extends ElementType = 'div'> = LismComponentProps<T> & {
+    tabId?: string;
+    defaultIndex?: number;
+    listProps?: LismComponentProps;
+};
+export default function Tabs<T extends ElementType = 'div'>({ tabId, defaultIndex, listProps, children, ...props }: TabsProps<T>): import("react").JSX.Element;
+export {};

package/dist/components/Tabs/react/Tabs.js

@@ -1,48 +1,62 @@
 "use client";
 import { jsx as m, jsxs as v, Fragment as E } from "react/jsx-runtime";
-import { useState as P, useId as g, Children as c, isValidElement as f, createElement as b } from "react";
-import k from "../../../lism-css/dist/components/Lism/index.js";
+import { useState as k, useId as A, Children as c, isValidElement as f, createElement as b } from "react";
+import j from "../../../lism-css/dist/components/Lism/index.js";
 import l from "./Tab.js";
-import A from "./TabItem.js";
-import j from "./TabList.js";
-import x from "./TabPanel.js";
-import F from "../getProps.js";
+import F from "./TabItem.js";
+import L from "./TabList.js";
+import I from "./TabPanel.js";
+import S from "../getProps.js";
 /* empty css            */
-function H({ tabId: I = "", defaultIndex: u = 1, listProps: T = {}, children: p, ...d }) {
-  const [i, y] = P(u), n = I || g(), r = [], a = [];
-  return c.forEach(p, (e, h) => {
-    const t = h + 1;
-    f(e) && e.type === A && c.forEach(e.props.children, (o) => {
-      if (f(o)) {
-        if (o.type === l) {
-          const s = o.props;
-          r.push(
-            /* @__PURE__ */ b(
-              l,
-              {
-                ...s,
-                tabId: n,
-                index: t,
-                key: t,
-                isActive: t === i,
-                onClick: () => y(t)
-              }
-            )
-          );
-        } else if (o.type === x) {
-          const s = o.props;
-          a.push(/* @__PURE__ */ b(x, { ...s, tabId: n, index: t, key: t, isActive: t === i }));
+function K({ tabId: d = "", defaultIndex: x = 1, listProps: u = {}, children: n, ...T }) {
+  const [p, h] = k(x), y = A(), i = d || y, e = [], a = [];
+  return c.forEach(n, (r, P) => {
+    const t = P + 1;
+    if (f(r) && r.type === F) {
+      const g = r.props;
+      c.forEach(g.children, (o) => {
+        if (f(o)) {
+          if (o.type === l) {
+            const s = o.props;
+            e.push(
+              /* @__PURE__ */ b(
+                l,
+                {
+                  ...s,
+                  tabId: i,
+                  index: t,
+                  key: t,
+                  isActive: t === p,
+                  onClick: () => h(t)
+                }
+              )
+            );
+          } else if (o.type === I) {
+            const s = o.props;
+            a.push(
+              /* @__PURE__ */ b(
+                I,
+                {
+                  ...s,
+                  tabId: i,
+                  index: t,
+                  key: t,
+                  isActive: t === p
+                }
+              )
+            );
+          }
         }
-      }
-    });
-  }), /* @__PURE__ */ m(k, { ...F(d), children: r.length === 0 ? (
+      });
+    }
+  }), /* @__PURE__ */ m(j, { ...S(T), children: e.length === 0 ? (
     // TabItemを使わず直接TabListなどを子要素に配置する場合
-    p
+    n
   ) : /* @__PURE__ */ v(E, { children: [
-    /* @__PURE__ */ m(j, { ...T, children: r }),
+    /* @__PURE__ */ m(L, { ...u, children: e }),
     a
   ] }) });
 }
 export {
-  H as default
+  K as default
 };

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

@@ -1,13 +1,13 @@
 import { default as Root } from './Tabs';
+import { default as Item } from './TabItem';
 import { default as List } from './TabList';
 import { default as Panel } from './TabPanel';
-import { default as Item } from './TabItem';
 import { default as Tab } from './Tab';
-declare namespace _default {
-    export { Root };
-    export { List };
-    export { Panel };
-    export { Item };
-    export { Tab };
-}
+declare const _default: {
+    Root: typeof Root;
+    List: typeof List;
+    Panel: typeof Panel;
+    Item: typeof Item;
+    Tab: typeof Tab;
+};
 export default _default;

package/dist/components/Tabs/setTabs.d.ts

@@ -1,2 +1,2 @@
+declare function setTabs(tabs: HTMLElement): void;
 export default setTabs;
-declare function setTabs(tabs: any): void;