@lism-css/ui 0.9.2 → 0.9.3

package/dist/components/Accordion/getProps.js

@@ -0,0 +1,53 @@
+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;
+}
+function d({ lismClass: o, ...t }) {
+  return t.lismClass = e(o, "c--accordion_item"), t;
+}
+function u(o) {
+  const n = { ...{
+    lismClass: "c--accordion_heading",
+    as: "div",
+    setPlain: 1
+  }, ...o };
+  return n.as === "div" && (n.role = "heading"), n;
+}
+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: {
+    lismClass: "c--accordion_button",
+    as: "button",
+    layout: "flex",
+    setPlain: 1,
+    g: "10",
+    w: "100%",
+    ai: "center",
+    jc: "between"
+  },
+  icon: {
+    lismClass: "c--accordion_icon a--icon",
+    as: "span",
+    // d: 'grid',
+    pi: "center",
+    fxsh: "0",
+    "aria-hidden": "true"
+  }
+};
+export {
+  P as defaultProps,
+  u as getHeadingProps,
+  d as getItemProps,
+  f as getPanelProps,
+  r as getRootProps
+};

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

@@ -0,0 +1,9 @@
+import { jsx as r } from "react/jsx-runtime";
+import t from "../../../lism-css/dist/components/Lism/index.js";
+import { defaultProps as f } from "../getProps.js";
+function n(o) {
+  return /* @__PURE__ */ r(t, { ...f.icon, ...o });
+}
+export {
+  n as default
+};

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

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

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

@@ -0,0 +1,45 @@
+"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 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 { setEvent as A } from "../setAccordion.js";
+import C 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 });
+}
+function M({ children: t, ...o }) {
+  const r = p(null), e = m();
+  a(() => {
+    if (r.current)
+      return A(r.current);
+  }, []);
+  const c = d(_(o));
+  return /* @__PURE__ */ n(i.Provider, { value: { accID: e }, children: /* @__PURE__ */ n("div", { ref: r, ...c, children: t }) });
+}
+function S({ children: t, ...o }) {
+  return /* @__PURE__ */ n(s, { ...D(o), 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: [
+    t,
+    /* @__PURE__ */ n(C, {})
+  ] });
+}
+function k({ children: t, ...o }) {
+  const r = u(i), { panelProps: e, contentProps: c } = x({ _contextID: r?.accID, ...o });
+  return /* @__PURE__ */ n(s, { ...e, children: /* @__PURE__ */ n(s, { ...c, children: t }) });
+}
+export {
+  M as AccordionItem,
+  L as AccordionRoot,
+  $ as Button,
+  S as Heading,
+  k as Panel
+};

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

@@ -0,0 +1,6 @@
+import { Button as t, Panel as c, Heading as o, AccordionItem as n, AccordionRoot as e } from "./Accordion.js";
+import r from "./AccIcon.js";
+const d = o, a = { Root: e, Item: n, Header: d, Heading: o, Panel: c, Icon: r, Button: t };
+export {
+  a as default
+};

package/dist/components/Alert/getProps.js

@@ -0,0 +1,20 @@
+import i from "./presets.js";
+function f({ type: o = "alert", keycolor: t, layout: c = "flex", icon: e, flow: l = "s", ...n }) {
+  const r = o ? i[o] : null, s = e || r?.icon || "info", a = t || r?.color || "currentColor";
+  return {
+    icon: s,
+    layout: c,
+    flow: l,
+    lismClass: "c--alert u--cbox",
+    keycolor: a,
+    ai: "center",
+    p: "15",
+    g: "15",
+    bd: !0,
+    bdrs: "10",
+    ...n
+  };
+}
+export {
+  f as default
+};

package/dist/components/Alert/presets.js

@@ -0,0 +1,29 @@
+const o = {
+  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 {
+  o as default
+};

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

@@ -0,0 +1,16 @@
+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 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";
+function A({ children: t, ...i }) {
+  const { icon: e, layout: o, flow: f, ...m } = x(i);
+  return /* @__PURE__ */ l(c, { layout: o, ...m, children: [
+    /* @__PURE__ */ r(s, { isSide: o === "sideMain", c: "keycolor", fz: "xl", fxsh: "0", children: /* @__PURE__ */ r(p, { icon: e }) }),
+    /* @__PURE__ */ r(n, { flow: f, children: t })
+  ] });
+}
+export {
+  A as default
+};

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

@@ -0,0 +1,8 @@
+import { jsx as r } from "react/jsx-runtime";
+import m from "../../../lism-css/dist/components/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" }) });
+}
+export {
+  d as default
+};

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

@@ -0,0 +1,12 @@
+import { jsx as s } from "react/jsx-runtime";
+import o 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 });
+}
+export {
+  n as default
+};

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

@@ -0,0 +1,12 @@
+import { jsx as r } from "react/jsx-runtime";
+import t from "../../../lism-css/dist/components/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 });
+}
+export {
+  a as default
+};

package/dist/components/Callout/getProps.js

@@ -0,0 +1,22 @@
+import a from "./presets.js";
+function i({ type: o = "note", keycolor: l, icon: t, title: n, flow: s = "s", ...r }) {
+  const c = o ? a[o] : null, e = t || c?.icon || "note", u = l || c?.color || null;
+  return {
+    icon: e,
+    title: n,
+    flow: s,
+    lismClass: "c--callout u--cbox",
+    keycolor: u,
+    p: "20",
+    g: "10",
+    bdc: "keycolor",
+    "bd-x-s": "-",
+    bdw: "4px",
+    bxsh: "10",
+    bdrs: "5",
+    ...r
+  };
+}
+export {
+  i as default
+};

package/dist/components/Callout/presets.js

@@ -0,0 +1,29 @@
+const o = {
+  alert: {
+    icon: "alert",
+    color: "red"
+  },
+  point: {
+    icon: "lightbulb",
+    color: "orange"
+  },
+  warning: {
+    icon: "warning",
+    color: "yellow"
+  },
+  check: {
+    icon: "check-circle",
+    color: "green"
+  },
+  help: {
+    icon: "question",
+    color: "purple"
+  },
+  note: {
+    icon: "note",
+    color: "blue"
+  }
+};
+export {
+  o as default
+};

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

@@ -0,0 +1,20 @@
+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 n from "../../../lism-css/dist/components/atomic/Icon/index.js";
+import p from "../../../lism-css/dist/components/Stack/index.js";
+import u from "../getProps.js";
+function j({ children: t, ...c }) {
+  const { icon: a, title: l, flow: m, ...e } = u(c);
+  return /* @__PURE__ */ r(p, { ...e, children: [
+    l && /* @__PURE__ */ r(s, { className: "c--callout_head", c: "keycolor", fw: "bold", ai: "center", g: "10", children: [
+      /* @__PURE__ */ o(i, { className: "c--callout_icon", fz: "xl", children: /* @__PURE__ */ o(n, { icon: a }) }),
+      /* @__PURE__ */ o("span", { className: "c--callout_title", children: l })
+    ] }),
+    /* @__PURE__ */ o(f, { className: "c--callout_body", flow: m, children: t })
+  ] });
+}
+export {
+  j as default
+};

package/dist/components/Chat/getProps.js

@@ -0,0 +1,52 @@
+const l = {
+  avatar: {
+    lismClass: "c--chat_avatar",
+    bgc: "base",
+    ar: "1/1",
+    bdrs: "99",
+    "aria-hidden": "true"
+  },
+  name: {
+    lismClass: "c--chat_name",
+    c: "text-2",
+    fs: "italic",
+    fz: "2xs",
+    lh: "1",
+    py: "5",
+    px: "10",
+    aslf: "end"
+  },
+  body: {
+    lismClass: "c--chat_body",
+    pos: "rel"
+  },
+  deco: {
+    lismClass: "c--chat_deco",
+    pos: "abs"
+  },
+  content: {
+    lismClass: "c--chat_content",
+    bdrs: "30",
+    p: "20",
+    lh: "s"
+  }
+};
+function e({
+  variant: s = "speak",
+  direction: a = "start",
+  keycolor: t = "gray",
+  ...c
+}) {
+  return {
+    lismClass: "c--chat",
+    variant: s,
+    keycolor: t,
+    "data-chat-dir": a,
+    ji: a,
+    ...c
+  };
+}
+export {
+  e as default,
+  l as defaultProps
+};

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

@@ -0,0 +1,22 @@
+import { jsxs as s, 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 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 }) {
+  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: [
+      /* @__PURE__ */ o(f, { ...r.deco, className: "u--cbox is--skipFlow" }),
+      /* @__PURE__ */ o(n, { ...r.content, className: "u--cbox", flow: e, jslf: c, children: a })
+    ] })
+  ] });
+}
+export {
+  N as default
+};

package/dist/components/Details/getProps.js

@@ -0,0 +1,15 @@
+import a from "../../lism-css/dist/lib/helper/atts.js";
+function i({ lismClass: l, ...s }) {
+  return s.lismClass = a(l, "c--details"), s;
+}
+const e = {
+  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
+};

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

@@ -0,0 +1,28 @@
+import { jsx as o } from "react/jsx-runtime";
+import m 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";
+/* empty css            */
+function l({ children: t, ...r }) {
+  const e = m(u(r));
+  return /* @__PURE__ */ o("details", { ...e, children: t });
+}
+function d({ 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 P({ children: t, ...r }) {
+  return /* @__PURE__ */ o(n, { ...i.icon, ...r, children: t });
+}
+function x({ 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
+};

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

@@ -0,0 +1,5 @@
+import { Content as t, Icon as o, Title as e, Summary as n, Details as a } from "./Details.js";
+const m = { Root: a, Summary: n, Title: e, Icon: o, Content: t };
+export {
+  m as default
+};

package/dist/components/Modal/getProps.js

@@ -0,0 +1,25 @@
+import e from "../../lism-css/dist/lib/helper/atts.js";
+function i({ lismClass: t = "", duration: o, style: n = {}, ...s }) {
+  const l = {
+    lismClass: e(t, "c--modal"),
+    setPlain: !0
+  };
+  return o && (n["--duration"] = o), { as: "dialog", ...l, style: n, ...s };
+}
+function a({ lismClass: t = "", offset: o, style: n = {}, ...s }) {
+  return o && (n["--offset"] = o), {
+    lismClass: e(t, "c--modal_inner"),
+    style: n,
+    ...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" }
+};
+export {
+  u as defaultProps,
+  a as getInnerProps,
+  i as getProps
+};

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

@@ -0,0 +1,9 @@
+import { jsx as t } from "react/jsx-runtime";
+import f from "../../../lism-css/dist/components/Lism/index.js";
+import { defaultProps as m } from "../getProps.js";
+function e({ children: o, ...r }) {
+  return /* @__PURE__ */ t(f, { ...m.body, ...r, children: o });
+}
+export {
+  e as default
+};

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

@@ -0,0 +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: [
+    /* @__PURE__ */ o(a, { icon: e || "x" }),
+    /* @__PURE__ */ o("span", { className: "u--srOnly", children: t || "Close" })
+  ] }) });
+}
+export {
+  x as default
+};

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

@@ -0,0 +1,9 @@
+import { jsx as t } from "react/jsx-runtime";
+import n from "../../../lism-css/dist/components/Lism/index.js";
+import { getInnerProps as e } from "../getProps.js";
+function i({ children: r, ...o }) {
+  return /* @__PURE__ */ t(n, { ...e(o), children: r });
+}
+export {
+  i as default
+};

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

@@ -1,6 +1,5 @@
-import { default as React } from 'react';
 export default Modal;
 declare function Modal({ children, ...props }: {
     [x: string]: any;
     children: any;
-}): React.JSX.Element;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,17 @@
+"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 { setEvent as u } from "../setModal.js";
+import { getProps as p } from "../getProps.js";
+/* empty css            */
+const x = ({ children: t, ...e }) => {
+  const r = f(null);
+  return m(() => {
+    if (r?.current)
+      return u(r?.current);
+  }, [r]), /* @__PURE__ */ o(n, { forwardedRef: r, ...p(e), children: t });
+};
+export {
+  x as default
+};

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

@@ -0,0 +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 });
+}
+export {
+  d as default
+};

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

@@ -0,0 +1,9 @@
+import o from "./Modal.js";
+import r from "./Inner.js";
+import t from "./Body.js";
+import m from "./CloseBtn.js";
+import n from "./OpenBtn.js";
+const a = { Root: o, Inner: r, Body: t, CloseBtn: m, OpenBtn: n };
+export {
+  a as default
+};

package/dist/components/Modal/setModal.js

@@ -1,37 +1,36 @@
 import { waitAnimation as o } from "../../helper/animation.js";
-function r(e) {
+function c(e) {
   if (!e || !e.id) return;
   let n = null;
-  const a = document.querySelectorAll(`[data-modal-open="${e.id}"]`), c = e.querySelectorAll(`[data-modal-close="${e.id}"]`), i = () => {
+  const r = document.querySelectorAll(`[data-modal-open="${e.id}"]`), s = e.querySelectorAll(`[data-modal-close="${e.id}"]`), a = () => {
     e.open && e.hasAttribute("data-is-open") || (e.showModal(), requestAnimationFrame(() => {
       e.dataset.isOpen = "1";
     }));
-  }, s = async () => {
+  }, i = async () => {
     e.hasAttribute("data-is-open") && (e.removeAttribute("data-is-open"), await o(e), e.close());
   };
-  a.forEach((t) => {
-    t == null || t.addEventListener("click", () => {
-      t.dataset.targetOpened = "1", n = t, i();
+  r.forEach((t) => {
+    t?.addEventListener("click", () => {
+      t.dataset.targetOpened = "1", n = t, a();
     });
-  }), c.forEach((t) => {
-    t == null || t.addEventListener("click", () => {
-      s();
+  }), s.forEach((t) => {
+    t?.addEventListener("click", () => {
+      i();
     });
   }), e.addEventListener("click", (t) => {
-    t.target === e && s();
+    t.target === e && i();
   }), e.addEventListener("close", () => {
     n && (n.removeAttribute("data-target-opened"), n = null);
   }), e.addEventListener("cancel", (t) => {
-    t.preventDefault(), s();
+    t.preventDefault(), i();
   });
 }
-const d = () => {
-  const e = document.querySelectorAll(".c--modal");
-  e == null || e.forEach((n) => {
-    r(n);
+const l = () => {
+  document.querySelectorAll(".c--modal")?.forEach((n) => {
+    c(n);
   });
 };
 export {
-  d as default,
-  r as setEvent
+  l as default,
+  c as setEvent
 };