lism-css 0.0.1 → 0.0.3

package/README.md

@@ -0,0 +1,52 @@
+## Installation
+
+For details, see [Docs](https://lism-css.com/)
+
+### 1. Installation
+
+```bash
+npm i lism-css
+```
+
+or
+
+```bash
+pnpm add lism-css
+```
+
+### 2. Loading CSS
+
+Please import CSS as a global style.
+
+```js
+import 'lism-css/all.css';
+```
+
+(For example, if it is Next.js, load it with `_app.js` or `layout.js`.)
+
+For HTML sites, you can also load CSS via CDN.
+
+```html
+<link href="https://cdn.jsdelivr.net/npm/lism-css/dist/css/all.css" rel="stylesheet" />
+```
+
+### 3. Using Components
+
+```jsx
+import { Box, Text, ... } from 'lism-css/react';
+
+// ...
+<Box p='20' bgc="base-2">
+	<Text fz="l">Lorem ipsum text...</Text>
+</Box>
+// ...
+```
+
+---
+
+## include package
+
+© Phosphor Icons
+Website: https://phosphoricons.com/
+Source: https://github.com/phosphor-icons
+License: MIT License, https://opensource.org/licenses/MIT

package/dist/_virtual/jsx-runtime.js

@@ -0,0 +1,5 @@
+import { __require as r } from "../node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
+var i = r();
+export {
+  i as j
+};

package/dist/_virtual/jsx-runtime2.js

@@ -0,0 +1,4 @@
+var e = { exports: {} };
+export {
+  e as __module
+};

package/dist/_virtual/react-jsx-runtime.development.js

@@ -0,0 +1,4 @@
+var e = {};
+export {
+  e as __exports
+};

package/dist/_virtual/react-jsx-runtime.production.min.js

@@ -0,0 +1,4 @@
+var r = {};
+export {
+  r as __exports
+};

package/dist/components/Accordion/AccIcon.js

@@ -0,0 +1,10 @@
+import { j as o } from "../../_virtual/jsx-runtime.js";
+import { getAccIconProps as n } from "./getProps.js";
+import i from "../Lism/index.js";
+import s from "../Icon/index.js";
+function x({ icon: r = "caret-down", viewBox: t, children: c = null, ...m }) {
+  return /* @__PURE__ */ o.jsx(i, { ...n(m), children: c || /* @__PURE__ */ o.jsx(s, { viewBox: t, icon: r }) });
+}
+export {
+  x as default
+};

package/dist/components/Accordion/getProps.js

@@ -0,0 +1,29 @@
+import i from "../../lib/helper/atts.js";
+function c({ lismClass: a, ...o }) {
+  return o.lismClass = i(a, "d--accordion"), o;
+}
+function d({ isTrigger: a, ...o }) {
+  const n = {
+    lismClass: "d--accordion__icon",
+    tag: "span",
+    d: "inline-grid"
+  };
+  return a && (n.tag = "button", o["data-role"] = "trigger"), { ...n, ...o };
+}
+const r = {
+  header: { lismClass: "d--accordion__header", ai: "c" },
+  label: { lismClass: "d--accordion__label", tag: "span", fx: "1" },
+  body: {
+    lismClass: "d--accordion__body"
+    // trs: true,
+  },
+  inner: {
+    lismClass: "d--accordion__inner",
+    ov: "hidden"
+  }
+};
+export {
+  r as defaultProps,
+  d as getAccIconProps,
+  c as getAccProps
+};

package/dist/components/Accordion/index.js

@@ -0,0 +1,6 @@
+import { Body as o, Label as c, Header as r, Accordion as e } from "./index2.js";
+import t from "./AccIcon.js";
+const a = { Root: e, Header: r, Label: c, Icon: t, Body: o };
+export {
+  a as default
+};

package/dist/components/Accordion/index2.js

@@ -0,0 +1,32 @@
+import { j as e } from "../../_virtual/jsx-runtime.js";
+import m from "react";
+import f from "../../lib/getLismProps.js";
+import { defaultProps as n, getAccProps as u } from "./getProps.js";
+import { setEvent as c } from "./setAccordion.js";
+import p from "../Grid/index.js";
+import s from "../Lism/index.js";
+import a from "../Flex/index.js";
+function E({ children: r, ...t }) {
+  const o = m.useRef(null);
+  m.useEffect(() => {
+    if (o.current)
+      return c(o.current);
+  }, []);
+  const i = f(u(t));
+  return /* @__PURE__ */ e.jsx("details", { ref: o, ...i, children: r });
+}
+function L({ children: r, ...t }) {
+  return /* @__PURE__ */ e.jsx(a, { tag: "summary", ...n.header, ...t, children: r });
+}
+function R({ children: r, ...t }) {
+  return /* @__PURE__ */ e.jsx(s, { ...n.label, ...t, children: r });
+}
+function h({ children: r, isFlow: t, innerProps: o, ...i }) {
+  return /* @__PURE__ */ e.jsx(p, { ...n.body, ...i, children: /* @__PURE__ */ e.jsx(s, { isFlow: t, ...n.inner, ...o, children: r }) });
+}
+export {
+  E as Accordion,
+  h as Body,
+  L as Header,
+  R as Label
+};

package/dist/components/Accordion/setAccordion.js

@@ -0,0 +1,37 @@
+const r = (t) => Promise.all(t.getAnimations().map((e) => e.finished)), d = async (t, e = !1) => {
+  if (t.dataset.animating && !e) return;
+  t.dataset.animating = "1";
+  const n = t.querySelector(".d--accordion__body");
+  t.open ? t.open && (t.classList.remove("-opened"), await r(n), delete t.dataset.animating, t.open = !1) : (t.open = !0, setTimeout(async () => {
+    t.classList.add("-opened"), await r(n), delete t.dataset.animating;
+  }, 5));
+}, p = (t, e) => {
+  const n = e.open, o = e.classList.contains("-opened");
+  n && !o && e.classList.add("-opened"), !n && o && e.classList.remove("-opened");
+}, u = (t) => {
+  const e = t, n = e.querySelector('[data-role="trigger"]') || e.querySelector("summary");
+  if (!n) return;
+  let o = !1;
+  const s = e.parentNode;
+  s != null && (o = s.dataset.accordionMultiple !== "disallow");
+  const c = (a) => {
+    if (a.preventDefault(), !o && !e.open) {
+      const i = s.querySelector(".-opened");
+      i != null && d(i, !0);
+    }
+    d(e);
+  }, l = (a) => {
+    p(a, e);
+  };
+  return n.addEventListener("click", c), e.addEventListener("toggle", l), () => {
+    n.removeEventListener("click", c), e.removeEventListener("toggle", l);
+  };
+}, m = () => {
+  document.querySelectorAll(".d--accordion").forEach((e) => {
+    u(e);
+  });
+};
+export {
+  m as default,
+  u as setEvent
+};

package/dist/components/Accordion/style.css

@@ -0,0 +1 @@
+.d--accordion{--trsdu:var(--trsdu--acc)}.d--accordion.-opened{--_notOpened: }.d--accordion:not(.-opened){--_isOpened: }.d--accordion__header{gap:.5em;outline-offset:-1px}.d--accordion__header::-webkit-details-marker{display:none}.d--accordion__body{grid-template-rows:1fr;transition-duration:var(--trsdu);transition-property:margin-block,padding-block,opacity,grid-template-rows}:where(.d--accordion:not(.-opened))>.d--accordion__body{grid-template-rows:0fr;margin-block:0!important;padding-block:0!important}:where(.d--accordion__icon)>.l--icon{rotate:var(--_isOpened,-180deg);transition-duration:var(--trsdu)}

package/dist/components/Box/getProps.js

@@ -0,0 +1,7 @@
+import r from "../../lib/helper/atts.js";
+function a({ lismClass: o, ...t }) {
+  return t.lismClass = r(o, "l--box"), t;
+}
+export {
+  a as default
+};

package/dist/components/Box/index.js

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

package/dist/components/Center/index.js

@@ -0,0 +1,8 @@
+import { j as t } from "../../_virtual/jsx-runtime.js";
+import e from "../Grid/index.js";
+function n(r) {
+  return /* @__PURE__ */ t.jsx(e, { _grid: "center", ...r });
+}
+export {
+  n as default
+};

package/dist/components/Columns/getProps.js

@@ -0,0 +1,6 @@
+function a({ colSize: n, colAuto: t, style: f = {}, ...u }) {
+  return n && (f["--col-size"] = n), t && (f["--col-auto"] = t), u.style = f, u;
+}
+export {
+  a as default
+};

package/dist/components/Columns/index.js

@@ -0,0 +1,9 @@
+import { j as r } from "../../_virtual/jsx-runtime.js";
+import m from "./getProps.js";
+import t from "../Grid/index.js";
+function u(o) {
+  return /* @__PURE__ */ r.jsx(t, { _grid: "columns", ...m(o) });
+}
+export {
+  u as default
+};

package/dist/components/Container/index.js

@@ -0,0 +1,9 @@
+import { j as i } from "../../_virtual/jsx-runtime.js";
+import s from "../Lism/index.js";
+function m({ size: t = !0, layout: o, ...r }) {
+  const n = o || s;
+  return /* @__PURE__ */ i.jsx(n, { isContainer: t, ...r });
+}
+export {
+  m as default
+};

package/dist/components/Decorator/getProps.js

@@ -0,0 +1,15 @@
+import o from "../../lib/helper/atts.js";
+import s from "../getTransformProps.js";
+import i from "../getInsetProps.js";
+function u({ lismClass: e, size: r, ...t }) {
+  t = s(i(t)), r && (t.ar = "1/1", t.w = r);
+  const a = {
+    lismClass: o(e, "l--decorator"),
+    skipState: !0,
+    "aria-hidden": "true"
+  };
+  return Object.assign(a, t);
+}
+export {
+  u as default
+};

package/dist/components/Decorator/index.js

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

package/dist/components/Divider/getProps.js

@@ -0,0 +1,11 @@
+import e from "../../lib/helper/atts.js";
+function d({ lismClass: r, ...t }) {
+  return { ...{
+    lismClass: e(r, "l--divider"),
+    bd: "bs",
+    "aria-hidden": "true"
+  }, ...t };
+}
+export {
+  d as getDividerProps
+};

package/dist/components/Divider/index.js

@@ -0,0 +1,9 @@
+import { j as t } from "../../_virtual/jsx-runtime.js";
+import { getDividerProps as i } from "./getProps.js";
+import o from "../Lism/index.js";
+function p(r) {
+  return /* @__PURE__ */ t.jsx(o, { skipState: !0, ...i(r) });
+}
+export {
+  p as default
+};

package/dist/components/Dummy/getContent.js

@@ -0,0 +1,9 @@
+import s from "./texts.js";
+const o = (e) => e.split(/([,.、。])/).filter((i) => i !== "").reduce((i, r, n, l) => (n % 2 === 0 && i.push(r + (l[n + 1] || "")), i), []);
+function c({ tag: e = "p", pre: i = "", length: r = "m", lang: n = "en", offset: l = 0 }) {
+  let t = s[n][r] || "";
+  return e === "ul" || e === "ol" ? (t = o(t).map((u) => `<li>${u.trim()}</li>`).join(""), i && (t = `<li>${i}</li>` + t)) : (l && (t = o(t).slice(l).join("").trim(), t = t.charAt(0).toUpperCase() + t.slice(1)), i && (t = i + t)), t;
+}
+export {
+  c as default
+};

package/dist/components/Dummy/index.js

@@ -0,0 +1,17 @@
+import { j as i } from "../../_virtual/jsx-runtime.js";
+import p from "./getContent.js";
+import u from "../Lism/index.js";
+function c({
+  tag: t = "p",
+  pre: n = "",
+  length: o = "m",
+  lang: m = "en",
+  offset: r = 0,
+  ...e
+}) {
+  const s = p({ tag: t, pre: n, lang: m, length: o, offset: r });
+  return /* @__PURE__ */ i.jsx(u, { tag: t, ...e, dangerouslySetInnerHTML: { __html: s } });
+}
+export {
+  c as default
+};

package/dist/components/Dummy/texts.js

@@ -0,0 +1,24 @@
+const e = {
+  ja: {
+    xs: "ロレムイプサムの座り雨。",
+    s: "ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。",
+    m: "ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。ブラインド行うにはいくつかの重要な事柄が流れます。",
+    l: "ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。ブラインド行うにはいくつかの重要な事柄が流れます。長年にわたり、私は学区と長寿であれば、そのような Liberroy, Foo の取り組み、我らのうち、Mulla Sunt の利点を提案したのなら。",
+    xl: "ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。ブラインド行うにはいくつかの重要な事柄が流れます。長年にわたり、私は学区と長寿であれば、そのような Liberroy, Foo の取り組み、我らのうち、Mulla Sunt の利点を提案したのなら。つまり、彼らはあなたの悩みに一般的な魂を癒しています。困難な必要性に少ないもの、それがコンテンツの比較です。あなたが選択的な彼女の事実、無意味な含有、便利な阻止と甘さ、誰かがもっと腐敗した残り物。提供する時間の生活、それで発明者が賢明です。",
+    codes: "<b>ロレムイプサム</b>の座り雨、<a href='###'>トマ好き学習だったエリット</a>、しかし<i>時と活力</i>はそのような木々と楽しみ。長年にわたり、私は学区と長寿であれば、そのような<code>Liberroy</code>の取り組み。"
+  },
+  en: {
+    xs: "Lorem ipsum dolor sit amet.",
+    s: "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.",
+    m: "Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi.",
+    l: "Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi provident libero, eum nulla sunt, porro sed dicta. Impedit ullam eveniet obcaecati minima.",
+    xl: "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor. Amet ab commodi rerum voluptas iusto dolores numquam cum ratione, dignissimos quia recusandae assumenda magnam, molestiae necessitatibus quas minus, quod consectetur pariatur. Possimus eligendi ipsam rerum, nihil incidunt, commodi impedit eum blanditiis, quisquam maiores corrupti rem. Provident tempora vitae, quo at inventore est sapiente.",
+    codes: "<b>Lorem ipsum</b> dolor sit amet. <a href='###'>consectetur adipisicing</a> elit, <i>sed do eiusmod</i> tempor. Non facere <code>Laudantium</code> ex eos doloribus aut dolore nisi provident."
+  },
+  ar: {
+    s: "هذا نص وهمي أنا أكتب جمل ليس لها معنى معين.هذا نص وهمي أنا أكتب جمل ليس لها معنى معين.هذا نص وهمي أنا أكتب جمل ليس لها معنى معين."
+  }
+};
+export {
+  e as default
+};

package/dist/components/Flex/Cluster.js

@@ -0,0 +1,8 @@
+import { j as t } from "../../_virtual/jsx-runtime.js";
+import e from "./index.js";
+function u(r) {
+  return /* @__PURE__ */ t.jsx(e, { variant: "cluster", ...r });
+}
+export {
+  u as default
+};

package/dist/components/Flex/FlexItem.js

@@ -0,0 +1,9 @@
+import { j as s } from "../../_virtual/jsx-runtime.js";
+import e from "../Lism/index.js";
+function p({ children: t, layout: o, ...m }) {
+  const r = o || e;
+  return /* @__PURE__ */ s.jsx(r, { ...m, children: t });
+}
+export {
+  p as default
+};

package/dist/components/Flex/getProps.js

@@ -0,0 +1,13 @@
+import t from "../../lib/helper/atts.js";
+function x(f) {
+  return f.flex == null && (f.flex = {}), ["fxf", "fxd", "fxw"].forEach((l) => {
+    f[l] != null && (f.flex[l] = f[l], delete f[l]);
+  }), f;
+}
+function i({ _flex: f = "flex", lismClass: l, ...e }) {
+  return e.lismClass = t(l, `l--${f}`), x(e);
+}
+export {
+  i as getFlexProps,
+  x as mergeFlexContextProps
+};

package/dist/components/Flex/index.js

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

package/dist/components/Frame/getProps.js

@@ -0,0 +1,7 @@
+import a from "../../lib/helper/atts.js";
+function o({ lismClass: r, ...t }) {
+  return t.lismClass = a(r, "l--frame"), t;
+}
+export {
+  o as default
+};

package/dist/components/Frame/index.js

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

package/dist/components/Grid/GridItem.js

@@ -0,0 +1,10 @@
+import { j as i } from "../../_virtual/jsx-runtime.js";
+import { getGridItemProps as s } from "./getProps.js";
+import e from "../Lism/index.js";
+function u({ children: t, layout: o, ...r }) {
+  const m = o || e;
+  return /* @__PURE__ */ i.jsx(m, { ...s(r), children: t });
+}
+export {
+  u as default
+};

package/dist/components/Grid/getProps.js

@@ -0,0 +1,28 @@
+import e from "../../lib/helper/atts.js";
+function r(g) {
+  return g.grid == null && (g.grid = {}), ["gd", "gt", "gta", "gtc", "gtr", "gaf", "gar", "gac"].forEach((t) => {
+    g[t] != null && (g.grid[t] = g[t], delete g[t]);
+  }), g;
+}
+function d({ _grid: g = "grid", lismClass: t, ...i }) {
+  return i = r(i), i.lismClass = e(t, `l--${g}`), i;
+}
+function l(g) {
+  return g.gridItem == null && (g.gridItem = {}), [
+    "ga",
+    "gc",
+    "gr",
+    "gcs",
+    "gce",
+    "grs",
+    "gre"
+    //'aslf', 'jslf', 'pslf', 'ord'
+  ].forEach((t) => {
+    g[t] != null && (g.gridItem[t] = g[t], delete g[t]);
+  }), g;
+}
+export {
+  l as getGridItemProps,
+  d as getGridProps,
+  r as mergeGridContextProps
+};

package/dist/components/Grid/index.js

@@ -0,0 +1,9 @@
+import { j as t } from "../../_virtual/jsx-runtime.js";
+import { getGridProps as i } from "./getProps.js";
+import m from "../Lism/index.js";
+function s(r) {
+  return r = i(r), /* @__PURE__ */ t.jsx(m, { ...r });
+}
+export {
+  s as default
+};

package/dist/components/Icon/SVG.js

@@ -0,0 +1,29 @@
+import { j as s } from "../../_virtual/jsx-runtime.js";
+function x({
+  size: t = "1em",
+  fill: e = "currentColor",
+  viewBox: o = "0 0 24 24",
+  path: r,
+  children: n,
+  ...l
+}) {
+  return /* @__PURE__ */ s.jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: o,
+      width: t,
+      height: t,
+      fill: e,
+      focusable: "false",
+      ...l,
+      children: [
+        r && /* @__PURE__ */ s.jsx("path", { d: r }),
+        n
+      ]
+    }
+  );
+}
+export {
+  x as default
+};

package/dist/components/Icon/getProps.js

@@ -0,0 +1,34 @@
+import d from "./presets.js";
+import C from "../../lib/helper/atts.js";
+function b({
+  lismClass: o,
+  // variant,
+  as: a,
+  tag: u,
+  scale: n,
+  offset: m,
+  icon: t,
+  label: r,
+  style: f = {},
+  exProps: e = {},
+  ...i
+}) {
+  const g = ["l--icon"];
+  let s = u || "span";
+  if (i.viewBox)
+    s = "svg";
+  else if (t)
+    if (typeof t == "string") {
+      const l = d[t] || null;
+      l != null && (s = "_SVG_", e = { ...e, ...l });
+    } else if (typeof t == "object" && t.as) {
+      const { as: l, ..._ } = t;
+      s = l, e = { ...e, ..._ };
+    } else
+      s = t;
+  else a && (s = a);
+  return r ? (e["aria-label"] = r, e.role = "img") : e["aria-hidden"] = "true", n && (f["--scale"] = n), m && (f["--offset"] = m), i.lismClass = C(o, g), i.style = f, { Component: s, lismProps: i, exProps: e };
+}
+export {
+  b as default
+};

package/dist/components/Icon/index.js

@@ -0,0 +1,11 @@
+import { j as s } from "../../_virtual/jsx-runtime.js";
+import e from "../../lib/getLismProps.js";
+import i from "./getProps.js";
+import f from "./SVG.js";
+function a({ children: r, ...t }) {
+  let { Component: o, lismProps: m, exProps: p } = i(t);
+  return o === "_SVG_" && (o = f), /* @__PURE__ */ s.jsx(o, { ...e(m), ...p, children: r });
+}
+export {
+  a as default
+};