@lism-css/ui 0.9.2 → 0.9.3

package/dist/components/NavMenu/getProps.js

@@ -0,0 +1,40 @@
+import o from "../../lism-css/dist/lib/getMaybeCssVar.js";
+function a({ hovC: s, hovBgc: n, itemP: t, style: i = {}, ...r }) {
+  const e = { ...i };
+  return n && (e["--hov-bgc"] = o(n, "color")), s && (e["--hov-c"] = o(s, "color")), t && (e["--_item-p"] = o(t, "space")), {
+    lismClass: "c--navMenu",
+    as: "ul",
+    style: e,
+    ...r
+  };
+}
+function c(s) {
+  return {
+    lismClass: "c--navMenu_nest",
+    as: "ul",
+    "px-s": "20",
+    ...s
+  };
+}
+function u(s) {
+  return {
+    lismClass: "c--navMenu_item",
+    as: "li",
+    ...s
+  };
+}
+function p({ href: s, as: n = "span", ...t }) {
+  return {
+    lismClass: "c--navMenu_link",
+    as: s ? "a" : n,
+    href: s,
+    c: "inherit",
+    ...t
+  };
+}
+export {
+  u as getItemProps,
+  p as getLinkProps,
+  c as getNestProps,
+  a as getRootProps
+};

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

@@ -0,0 +1,24 @@
+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";
+/* empty css            */
+function I({ children: t, ...o }) {
+  return /* @__PURE__ */ r(m, { ...u(o), children: t });
+}
+function L({ children: t, ...o }) {
+  return /* @__PURE__ */ r(m, { ...i(o), children: t });
+}
+function N({ children: t, ...o }) {
+  return /* @__PURE__ */ r(e, { ...p(o), children: t });
+}
+function R({ children: t, ...o }) {
+  return /* @__PURE__ */ r(n, { ...f(o), children: t });
+}
+export {
+  N as Item,
+  R as Link,
+  L as Nest,
+  I as Root
+};

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

@@ -0,0 +1,5 @@
+import { Nest as t, Link as o, Item as e, Root as i } from "./NavMenu.js";
+const n = { Root: i, Item: e, Link: o, Nest: t };
+export {
+  n as default
+};

package/dist/components/ShapeDivider/getProps.js

@@ -0,0 +1,22 @@
+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 = {
+    lismClass: "c--shapeDivider",
+    "max-sz": "full",
+    "aria-hidden": "true"
+  };
+  return l && (e["data-flip"] = l), r && (e["data-has-animation"] = "true"), {
+    ...e,
+    style: t,
+    // SVG用のprops
+    viewBox: a,
+    isEmpty: s,
+    // その他のprops
+    ...f
+  };
+}
+export {
+  d as default
+};

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

@@ -0,0 +1,26 @@
+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 }) {
+  const r = p(o);
+  if (!r) return null;
+  const { viewBox: s, isAnimation: m, isEmpty: t, ...n } = r;
+  return /* @__PURE__ */ e(l, { ...n, children: t ? null : /* @__PURE__ */ e("div", { className: "c--shapeDivider_inner", children: /* @__PURE__ */ e(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      className: "c--shapeDivider_svg",
+      viewBox: s,
+      width: "100%",
+      height: "100%",
+      fill: "currentColor",
+      focusable: "false",
+      preserveAspectRatio: "none",
+      children: i
+    }
+  ) }) });
+}
+export {
+  v as default
+};

package/dist/components/Tabs/getProps.js

@@ -0,0 +1,10 @@
+import r from "../../lism-css/dist/lib/helper/atts.js";
+function o({ lismClass: s, ...t }) {
+  return {
+    lismClass: r(s, "c--tabs"),
+    ...t
+  };
+}
+export {
+  o as default
+};

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

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

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

@@ -0,0 +1,7 @@
+import { jsx as e } from "react/jsx-runtime";
+function i({ isTabItem: r = !0, children: t }) {
+  return /* @__PURE__ */ e("div", { children: t });
+}
+export {
+  i as default
+};

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

@@ -0,0 +1,8 @@
+import { jsx as s } from "react/jsx-runtime";
+import r from "../../../lism-css/dist/components/Lism/index.js";
+function a(t) {
+  return /* @__PURE__ */ s(r, { lismClass: "c--tabs_list", role: "tablist", ...t });
+}
+export {
+  a as default
+};

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

@@ -0,0 +1,9 @@
+import { jsx as o } from "react/jsx-runtime";
+import n from "../../../lism-css/dist/components/Lism/index.js";
+function i({ tabId: a = "tab", isActive: t = !1, index: e = 0, ...r }) {
+  const l = `${a}-${e}`;
+  return /* @__PURE__ */ o(n, { id: l, role: "tabpanel", "aria-hidden": t ? "false" : "true", lismClass: "c--tabs_panel", ...r });
+}
+export {
+  i as default
+};

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

@@ -1,8 +1,7 @@
-import { default as React } from 'react';
 export default function Tabs({ tabId, defaultIndex, listProps, children, ...props }: {
     [x: string]: any;
     tabId?: string | undefined;
     defaultIndex?: number | undefined;
     listProps?: {} | undefined;
     children: any;
-}): React.JSX.Element;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,50 @@
+"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 l from "./Tab.js";
+import A from "./TabItem.js";
+import j from "./TabList.js";
+import x from "./TabPanel.js";
+import F 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 })
+          );
+        }
+      }
+    });
+  }), /* @__PURE__ */ m(k, { ...F(d), children: r.length === 0 ? (
+    // TabItemを使わず直接TabListなどを子要素に配置する場合
+    p
+  ) : /* @__PURE__ */ v(E, { children: [
+    /* @__PURE__ */ m(j, { ...T, children: r }),
+    a
+  ] }) });
+}
+export {
+  H as default
+};

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

@@ -0,0 +1,9 @@
+import o from "./Tabs.js";
+import t from "./TabItem.js";
+import m from "./TabList.js";
+import r from "./TabPanel.js";
+import a from "./Tab.js";
+const s = { Root: o, List: m, Panel: r, Item: t, Tab: a };
+export {
+  s as default
+};

package/dist/components/Tabs/setTabs.js

@@ -1,29 +1,28 @@
-function b(t) {
+function u(t) {
   t.preventDefault();
   const r = t.currentTarget;
-  c(r);
+  i(r);
 }
-const c = (t) => {
+const i = (t) => {
   if (t.getAttribute("aria-selected") === "true") return;
   const e = t.getAttribute("aria-controls"), n = document.getElementById(e);
   if (n === null) return;
   const s = t.parentNode.parentNode.querySelector('[aria-selected="true"]'), o = s.getAttribute("aria-controls"), a = document.getElementById(o);
   t.setAttribute("aria-selected", "true"), s.setAttribute("aria-selected", "false"), a.setAttribute("aria-hidden", "true"), n.setAttribute("aria-hidden", "false");
 };
-function f(t) {
-  var i;
-  t.querySelectorAll('button[role="tab"]').forEach((d) => {
-    d.addEventListener("click", function(u) {
-      b(u);
+function b(t) {
+  t.querySelectorAll('button[role="tab"]').forEach((l) => {
+    l.addEventListener("click", function(d) {
+      u(d);
     });
   });
-  const e = (i = window == null ? void 0 : window.location) == null ? void 0 : i.href;
+  const e = window?.location?.href;
   if (!e || !(e.indexOf("?lism-tab=") !== -1)) return;
   const o = new URL(e).searchParams.get("lism-tab"), a = t.querySelector(`[aria-controls="${o}"]`);
-  a && (t.dataset.hasTabLink = "1", c(a), setTimeout(() => {
+  a && (t.dataset.hasTabLink = "1", i(a), setTimeout(() => {
     delete t.dataset.hasTabLink;
   }, 10));
 }
 export {
-  f as default
+  b as default
 };

package/dist/components/react.js

@@ -0,0 +1,26 @@
+import { default as e } from "./Accordion/react/index.js";
+import { default as r } from "./Details/react/index.js";
+import { default as l } from "./Modal/react/index.js";
+import { default as u } from "./NavMenu/react/index.js";
+import { default as p } from "./Tabs/react/index.js";
+import { default as x } from "./Alert/react/Alert.js";
+import { default as n } from "./Avatar/react/Avatar.js";
+import { default as A } from "./Badge/react/Badge.js";
+import { default as h } from "./Button/react/Button.js";
+import { default as C } from "./Callout/react/Callout.js";
+import { default as M } from "./Chat/react/Chat.js";
+import { default as g } from "./ShapeDivider/react/ShapeDivider.js";
+export {
+  e as Accordion,
+  x as Alert,
+  n as Avatar,
+  A as Badge,
+  h as Button,
+  C as Callout,
+  M as Chat,
+  r as Details,
+  l as Modal,
+  u as NavMenu,
+  g as ShapeDivider,
+  p as Tabs
+};

package/dist/lism-css/dist/components/Center/index.js

@@ -0,0 +1,8 @@
+import { jsx as t } from "react/jsx-runtime";
+import o from "../Lism/index.js";
+function n(r) {
+  return /* @__PURE__ */ t(o, { layout: "center", ...r });
+}
+export {
+  n as default
+};

package/dist/lism-css/dist/components/Flex/index.js

@@ -0,0 +1,8 @@
+import { jsx as r } from "react/jsx-runtime";
+import t from "../Lism/index.js";
+function e(o) {
+  return /* @__PURE__ */ r(t, { layout: "flex", ...o });
+}
+export {
+  e as default
+};

package/dist/lism-css/dist/components/Flow/index.js

@@ -0,0 +1,8 @@
+import { jsx as r } from "react/jsx-runtime";
+import t from "../Lism/index.js";
+function m(o) {
+  return /* @__PURE__ */ r(t, { layout: "flow", ...o });
+}
+export {
+  m as default
+};

package/dist/lism-css/dist/components/Frame/index.js

@@ -0,0 +1,8 @@
+import { jsx as o } from "react/jsx-runtime";
+import t from "../Lism/index.js";
+function m(r) {
+  return /* @__PURE__ */ o(t, { layout: "frame", ...r });
+}
+export {
+  m as default
+};

package/dist/lism-css/dist/components/Grid/index.js

@@ -0,0 +1,8 @@
+import { jsx as o } from "react/jsx-runtime";
+import t from "../Lism/index.js";
+function m(r) {
+  return /* @__PURE__ */ o(t, { layout: "grid", ...r });
+}
+export {
+  m as default
+};

package/dist/lism-css/dist/components/Lism/index.js

@@ -0,0 +1,8 @@
+import { jsx as t } from "react/jsx-runtime";
+import f from "../../lib/getLismProps.js";
+function m({ children: r, as: o, exProps: e, ...i }) {
+  return /* @__PURE__ */ t(o || "div", { ...f(i), ...e, children: r });
+}
+export {
+  m as default
+};

package/dist/lism-css/dist/components/Stack/index.js

@@ -0,0 +1,8 @@
+import { jsx as o } from "react/jsx-runtime";
+import r from "../Lism/index.js";
+function m(t) {
+  return /* @__PURE__ */ o(r, { layout: "stack", ...t });
+}
+export {
+  m as default
+};

package/dist/lism-css/dist/components/atomic/Decorator/getProps.js

@@ -0,0 +1,15 @@
+import m from "../../../lib/helper/atts.js";
+import c from "../../getFilterProps.js";
+import p from "../../setMaybeTransformStyles.js";
+function b({ lismClass: a, size: r, clipPath: o, boxSizing: s, style: l, ...e }) {
+  const i = l ?? {}, t = c(p(e));
+  o && (i.clipPath = o), s && (i.boxSizing = s), r && (t.ar = "1/1", t.w = r), t.style = i;
+  const n = {
+    lismClass: m(a, "a--decorator"),
+    "aria-hidden": "true"
+  };
+  return Object.assign(n, t);
+}
+export {
+  b as default
+};

package/dist/lism-css/dist/components/atomic/Decorator/index.js

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

package/dist/lism-css/dist/components/atomic/Icon/SVG.js

@@ -0,0 +1,22 @@
+import { jsx as o, jsxs as w } from "react/jsx-runtime";
+function f({ size: e = "1em", fill: l = "currentColor", viewBox: t = "0 0 24 24", path: i, children: r, __html: s, ...h }) {
+  return s ? /* @__PURE__ */ o(
+    "svg",
+    {
+      dangerouslySetInnerHTML: { __html: s },
+      ...h,
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: t,
+      width: e,
+      height: e,
+      fill: l,
+      focusable: "false"
+    }
+  ) : /* @__PURE__ */ w("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: t, width: e, height: e, fill: l, focusable: "false", ...h, children: [
+    i && /* @__PURE__ */ o("path", { d: i }),
+    r
+  ] });
+}
+export {
+  f as default
+};

package/dist/lism-css/dist/components/atomic/Icon/getProps.js

@@ -0,0 +1,55 @@
+import d from "./presets.js";
+import h from "../../../lib/helper/atts.js";
+import x from "../../setMaybeTransformStyles.js";
+function P(p) {
+  const a = {}, s = p.match(/<svg([^>]*?)>([\s\S]*?)<\/svg>/i);
+  if (s) {
+    const [, c, e] = s, g = /([\w-]+)=["']([^"']*)["']/g;
+    let o;
+    for (; (o = g.exec(c)) !== null; ) {
+      const [, i, f] = o;
+      if (i === "style") {
+        const m = {};
+        f.split(";").forEach((t) => {
+          const [n, r] = t.split(":").map((l) => l.trim());
+          n && r && (m[n] = r);
+        }), a[i] = m;
+      } else
+        a[i] = f;
+    }
+    return { svgProps: a, svgContent: e };
+  }
+  return {};
+}
+function S({ lismClass: p, as: a, icon: s, label: c, exProps: e = {}, ...g }) {
+  let o = a || "span", i = "";
+  const {
+    style: f = {},
+    className: m = "",
+    ...t
+  } = x(g);
+  let n = f, r = m;
+  if (t.viewBox)
+    o = "svg", t.width || (e.width = "1em"), t.height || (e.height = "1em");
+  else if (t.src)
+    o = "img";
+  else if (s)
+    if (typeof s == "string")
+      if (s.startsWith("<svg")) {
+        o = "_SVG_";
+        const { svgProps: l = {}, svgContent: u = "" } = P(s), { class: v, style: y, ...C } = l;
+        r = h(r, v), n = { ...n, ...y }, e = { ...e, ...C, fill: "currentColor" }, i = u;
+      } else {
+        const l = d[s] || null;
+        l != null && (o = "_SVG_", e = { ...e, ...l });
+      }
+    else if (typeof s == "object" && s.as) {
+      const { as: l, ...u } = s;
+      o = l, e = { ...e, ...u };
+    } else
+      o = s;
+  return c ? (e["aria-label"] = c, e.role = "img") : e["aria-hidden"] = "true", t.lismClass = h(p, "a--icon", r), t.style = { ...n }, { Component: o, lismProps: t, exProps: e, content: i };
+}
+export {
+  S as default
+};

package/dist/lism-css/dist/components/atomic/Icon/index.js

@@ -0,0 +1,12 @@
+import { jsx as i } from "react/jsx-runtime";
+import f from "../../../lib/getLismProps.js";
+import l from "./getProps.js";
+import s from "./SVG.js";
+function d({ children: e, ...n }) {
+  const { Component: r, lismProps: p, exProps: t = {}, content: m } = l(n);
+  let o;
+  return r === "_SVG_" ? (o = s, m && (t.__html = m)) : o = r, /* @__PURE__ */ i(o, { ...f(p), ...t, children: e });
+}
+export {
+  d as default
+};