@lism-css/ui 0.0.0-dev.2 → 0.0.0-dev.4

package/dist/components/Accordion/astro/__setEvent.d.ts

@@ -0,0 +1 @@
+export default setEvent;

package/dist/components/Accordion/astro/index.d.ts

@@ -0,0 +1,9 @@
+declare namespace _default {
+    export { Root };
+    export { Header };
+    export { HeaderLabel };
+    export { Body };
+    export { Icon };
+    export { Label };
+}
+export default _default;

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

@@ -0,0 +1,31 @@
+export function getAccProps({ lismClass, ...props }: {
+    [x: string]: any;
+    lismClass: any;
+}): {
+    [x: string]: any;
+};
+export function getAccIconProps({ isTrigger, ...props }: {
+    [x: string]: any;
+    isTrigger: any;
+}): {
+    lismClass: string;
+    tag: string;
+};
+export namespace defaultProps {
+    namespace header {
+        let lismClass: string;
+    }
+    namespace label {
+        let lismClass_1: string;
+        export { lismClass_1 as lismClass };
+        export let tag: string;
+    }
+    namespace body {
+        let lismClass_2: string;
+        export { lismClass_2 as lismClass };
+    }
+    namespace inner {
+        let lismClass_3: string;
+        export { lismClass_3 as lismClass };
+    }
+}

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

@@ -0,0 +1,6 @@
+export default function AccIcon({ icon, viewBox, children, ...props }: {
+    [x: string]: any;
+    icon?: string | undefined;
+    viewBox: any;
+    children?: null | undefined;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,23 @@
+import { default as React } from 'react';
+export function Accordion({ children, ...props }: {
+    [x: string]: any;
+    children: any;
+}): React.JSX.Element;
+export function Header({ children, ...props }: {
+    [x: string]: any;
+    children: any;
+}): React.JSX.Element;
+export function Label({ children, ...props }: {
+    [x: string]: any;
+    children: any;
+}): React.JSX.Element;
+export function Body({ children, flow, innerProps, ...props }: {
+    [x: string]: any;
+    children: any;
+    flow: any;
+    innerProps: any;
+}): React.JSX.Element;
+export function HeaderLabel({ children, ...props }: {
+    [x: string]: any;
+    children: any;
+}): React.JSX.Element;

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

@@ -0,0 +1,11 @@
+import { Accordion as Root, Header, Label, Body, HeaderLabel } from './Accordion';
+import { default as Icon } from './AccIcon';
+declare namespace _default {
+    export { Root };
+    export { Header };
+    export { Label };
+    export { Icon };
+    export { Body };
+    export { HeaderLabel };
+}
+export default _default;

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,3 @@
+export function setEvent(currentRef: any): (() => void) | undefined;
+export default setAccordion;
+declare function setAccordion(): void;

package/dist/components/Accordion/setAccordion.js

@@ -0,0 +1,37 @@
+const s = (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.removeAttribute("data-opened"), await s(n), delete t.dataset.animating, t.open = !1) : (t.open = !0, setTimeout(async () => {
+    t.setAttribute("data-opened", ""), await s(n), delete t.dataset.animating;
+  }, 5));
+}, u = (t, e) => {
+  const n = e.open, o = e.hasAttribute("data-opened");
+  n && !o && e.setAttribute("data-opened", ""), !n && o && e.removeAttribute("data-opened");
+}, p = (t) => {
+  const e = t, n = e.querySelector('[data-role="trigger"]') || e.querySelector("summary");
+  if (!n) return;
+  let o = !1;
+  const r = e.parentNode;
+  r != null && (o = r.dataset.accordionMultiple !== "disallow");
+  const c = (a) => {
+    if (a.preventDefault(), !o && !e.open) {
+      const l = r.querySelector("[data-opened]");
+      l != null && d(l, !0);
+    }
+    d(e);
+  }, i = (a) => {
+    u(a, e);
+  };
+  return n.addEventListener("click", c), e.addEventListener("toggle", i), () => {
+    n.removeEventListener("click", c), e.removeEventListener("toggle", i);
+  };
+}, m = () => {
+  document.querySelectorAll(".d--accordion").forEach((e) => {
+    p(e);
+  });
+};
+export {
+  m as default,
+  p as setEvent
+};

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

@@ -0,0 +1,8 @@
+declare namespace _default {
+    export { Root };
+    export { Inner };
+    export { Body };
+    export { CloseBtn };
+    export { OpenBtn };
+}
+export default _default;

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

@@ -0,0 +1,41 @@
+export function getProps({ lismClass, duration, style, ...props }: {
+    [x: string]: any;
+    lismClass?: string | undefined;
+    duration: any;
+    style?: {} | undefined;
+}): {
+    style: {};
+    lismClass: any;
+    setPlain: boolean;
+    tag: string;
+};
+export function getInnerProps({ lismClass, offset, style, ...props }: {
+    [x: string]: any;
+    lismClass?: string | undefined;
+    offset: any;
+    style?: {} | undefined;
+}): {
+    lismClass: any;
+    style: {};
+};
+export namespace defaultProps {
+    namespace body {
+        let lismClass: string;
+    }
+    namespace closeBtn {
+        let tag: string;
+        let setPlain: boolean;
+        let hov: string;
+        let d: string;
+    }
+    namespace openBtn {
+        let tag_1: string;
+        export { tag_1 as tag };
+        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/react/Body.d.ts

@@ -0,0 +1,4 @@
+export default function ModalBody({ children, ...props }: {
+    [x: string]: any;
+    children: any;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,7 @@
+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;

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

@@ -0,0 +1,4 @@
+export default function ModalInner({ children, ...props }: {
+    [x: string]: any;
+    children: any;
+}): import("react").JSX.Element;

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

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

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

@@ -0,0 +1,5 @@
+export default function OpenBtn({ children, modalId, ...props }: {
+    [x: string]: any;
+    children: any;
+    modalId?: string | undefined;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,13 @@
+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 };
+}
+export default _default;

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,3 @@
+export declare function setEvent(modal: HTMLDialogElement): void;
+declare const setModal: () => void;
+export default setModal;

package/dist/components/Modal/setModal.js

@@ -0,0 +1,42 @@
+let s = null;
+const o = async (e) => {
+  const n = e.getAnimations();
+  n.length > 0 && await Promise.allSettled(n.map((c) => c.finished));
+};
+async function d(e) {
+  e.open && e.dataset.isOpen || (e.showModal(), requestAnimationFrame(() => {
+    e.dataset.isOpen = "1";
+  }));
+}
+async function a(e) {
+  e.dataset.isOpen !== void 0 && (delete e.dataset.isOpen, await o(e), e.close());
+}
+function l(e) {
+  if (!e || !e.id) return;
+  const n = document.querySelectorAll(`[data-modal-open="${e.id}"]`), c = e.querySelectorAll(`[data-modal-close="${e.id}"]`);
+  e.addEventListener("click", (t) => {
+    t.target === e && a(e);
+  }), e.addEventListener("close", (t) => {
+    s && (delete s.dataset.targetOpened, s = null), a(e);
+  }), n.forEach((t) => {
+    t == null || t.addEventListener("click", (i) => {
+      t.dataset.targetOpened = "1", s = t, d(e);
+    });
+  }), c.forEach((t) => {
+    t == null || t.addEventListener("click", (i) => {
+      a(e);
+    });
+  }), e.addEventListener("cancel", (t) => {
+    t.preventDefault(), a(e);
+  });
+}
+const u = () => {
+  const e = document.querySelectorAll(".d--modal");
+  e == null || e.forEach((n) => {
+    l(n);
+  });
+};
+export {
+  u as default,
+  l as setEvent
+};

package/dist/components/Tabs/astro/helper.d.ts

@@ -0,0 +1 @@
+export function uuidv4(): string;

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

@@ -0,0 +1,8 @@
+declare namespace _default {
+    export { Root };
+    export { List };
+    export { Panel };
+    export { Item };
+    export { Tab };
+}
+export default _default;

package/dist/components/Tabs/astro/transformTabitems.d.ts

@@ -0,0 +1,4 @@
+export default function transformHTML(htmlString: any, tabID: any, defaultIndex: any): {
+    btns: any[];
+    panels: any[];
+};

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

@@ -0,0 +1,6 @@
+export default function getTabsProps({ lismClass, ...props }: {
+    [x: string]: any;
+    lismClass: any;
+}): {
+    lismClass: any;
+};

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

@@ -0,0 +1,6 @@
+export default function Tab({ tabId, index, isActive, ...props }: {
+    [x: string]: any;
+    tabId?: string | undefined;
+    index?: number | undefined;
+    isActive?: boolean | undefined;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,4 @@
+export default function TabItem({ isTabItem, children }: {
+    isTabItem?: boolean | undefined;
+    children: any;
+}): import("react").JSX.Element;

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

@@ -0,0 +1 @@
+export default function TabList(props: any): import("react").JSX.Element;

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

@@ -0,0 +1,6 @@
+export default function TabPanel({ tabId, isActive, index, ...props }: {
+    [x: string]: any;
+    tabId?: string | undefined;
+    isActive?: boolean | undefined;
+    index?: number | undefined;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,8 @@
+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;

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

@@ -0,0 +1,13 @@
+import { default as Root } from './Tabs';
+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 };
+}
+export default _default;

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

@@ -0,0 +1 @@
+export {};

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

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

package/dist/components/Tabs/setTabs.js

@@ -0,0 +1,29 @@
+function b(t) {
+  t.preventDefault();
+  const r = t.currentTarget;
+  c(r);
+}
+const c = (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);
+    });
+  });
+  const e = (i = window == null ? void 0 : window.location) == null ? void 0 : i.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(() => {
+    delete t.dataset.hasTabLink;
+  }, 10));
+}
+export {
+  f as default
+};

package/dist/components/__contexts.d.ts

@@ -0,0 +1,2 @@
+import { default as React } from 'react';
+export const LayoutContext: React.Context<null>;

package/dist/components/astro.d.ts

@@ -0,0 +1,3 @@
+export { default as Accordion } from './Accordion/astro';
+export { default as Modal } from './Modal/astro';
+export { default as Tabs } from './Tabs/astro';

package/dist/components/react.d.ts

@@ -0,0 +1,3 @@
+export { default as Accordion } from './Accordion/react';
+export { default as Modal } from './Modal/react';
+export { default as Tabs } from './Tabs/react';

package/dist/scripts/accordion.js

@@ -0,0 +1,4 @@
+import n from "../components/Accordion/setAccordion.js";
+document.addEventListener("DOMContentLoaded", function() {
+  n();
+});

package/dist/scripts/modal.js

@@ -0,0 +1,4 @@
+import t from "../components/Modal/setModal.js";
+document.addEventListener("DOMContentLoaded", function() {
+  t();
+});

package/dist/scripts/tabs.js

@@ -0,0 +1,6 @@
+import e from "../components/Tabs/setTabs.js";
+document.addEventListener("DOMContentLoaded", function() {
+  document.querySelectorAll(".d--tabs").forEach((t) => {
+    e(t);
+  });
+});

package/dist/style.css

@@ -0,0 +1 @@
+@layer lism.modules{.d--accordion{--duration:var(--acc-duration,0.4s)}.d--accordion[data-opened]{--_notOpen: }.d--accordion:not([data-opened]){--_isOpen: }.d--accordion_header{align-items:center;display:grid;gap:.5em;grid:auto/1fr auto;outline-offset:-1px;&::-webkit-details-marker{display:none}}.d--accordion_body{display:grid;grid:1fr/auto;transition-duration:var(--duration);transition-property:margin-block,padding-block,opacity,grid-template}.d--accordion_inner{overflow:hidden}.d--accordion:not([data-opened])>.d--accordion_body{grid:0fr/auto;margin-block:0!important;padding-block:0!important}.d--accordion_icon{display:grid}.d--accordion_icon .a--icon{rotate:var(--_isOpen,-180deg);transition-duration:var(--duration)}}

package/package.json

@@ -1,75 +1,69 @@
 {
-  "name": "@lism-css/ui",
-  "version": "0.0.0-dev.2",
-  "description": "A layout-first CSS framework for websites.",
-  "author": {
-    "name": "ddryo",
-    "url": "https://github.com/ddryo"
-  },
-  "license": "MIT",
-  "keywords": [
-    "css-framework",
-    "astro-component",
-    "react-component"
-  ],
-  "bin": {
-    "lism-css": "./bin/cli.mjs"
-  },
-  "files": [
-    "dist",
-    "src"
-  ],
-  "type": "module",
-  "main": "./dist/index.js",
-  "exports": {
-    "./react": {
-      "import": "./src/components/react.js",
-      "types": "./dist/components/index.d.ts"
-    },
-    "./astro": {
-      "import": "./src/components/astro.js",
-      "types": "./dist/components/index.d.ts"
-    },
-    "./*.css": "./dist/css/*.css"
-  },
-  "homepage": "https://www.lism.style",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/lism-css/lism-css/tree/main/packages/lism-css"
-  },
-  "bugs": {
-    "url": "https://github.com/lism-css/lism-css/issues"
-  },
-  "dependencies": {
-    "lism-css": "0.8.0-rc.2"
-  },
-  "devDependencies": {
-    "@babel/cli": "^7.27.2",
-    "@babel/core": "^7.27.3",
-    "@babel/preset-env": "^7.27.2",
-    "@babel/preset-react": "^7.27.1",
-    "@rollup/plugin-babel": "^6.0.4",
-    "@vitejs/plugin-react-swc": "^3.10.0",
-    "glob": "^11.0.2",
-    "rollup": "^4.41.1",
-    "typescript": "~5.8.3",
-    "unplugin-dts": "1.0.0-beta.6",
-    "vite": "^6.3.5"
-  },
-  "peerDependencies": {
-    "@types/react": "*",
-    "@types/react-dom": "*",
-    "react": "^18 || ^19",
-    "react-dom": "^18 || ^19"
-  },
-  "sideEffects": false,
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build && pnpm build:css",
-    "build:vite": "vite build",
-    "build:css": "node bin/script-build-css.js",
-    "lint": "pnpm lint:style",
-    "lint:style": "stylelint '**/*.{css,scss}'",
-    "preview": "vite preview"
-  }
-}
+	"name": "@lism-css/ui",
+	"version": "0.0.0-dev.4",
+	"description": "UI components by lism-css.",
+	"author": {
+		"name": "ddryo",
+		"url": "https://github.com/ddryo"
+	},
+	"license": "MIT",
+	"keywords": [
+		"css-framework",
+		"astro-component",
+		"react-component"
+	],
+	"scripts": {
+		"dev": "vite",
+		"build": "vite build && pnpm build:css",
+		"build:css": "node build-css.js"
+	},
+	"files": [
+		"dist",
+		"src"
+	],
+	"type": "module",
+	"main": "./dist/index.js",
+	"exports": {
+		"./react": {
+			"import": "./src/components/react.js",
+			"types": "./dist/components/index.d.ts"
+		},
+		"./astro": {
+			"import": "./src/components/astro.js",
+			"types": "./dist/components/index.d.ts"
+		},
+		"./scripts/*": "./dist/scripts/*.js",
+		"./style.css": "./dist/style.css"
+	},
+	"homepage": "https://www.lism.style",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/lism-css/lism-css/tree/main/packages/lism-css"
+	},
+	"bugs": {
+		"url": "https://github.com/lism-css/lism-css/issues"
+	},
+	"dependencies": {
+		"lism-css": "workspace:*"
+	},
+	"devDependencies": {
+		"@babel/cli": "^7.27.2",
+		"@babel/core": "^7.27.3",
+		"@babel/preset-env": "^7.27.2",
+		"@babel/preset-react": "^7.27.1",
+		"@rollup/plugin-babel": "^6.0.4",
+		"@vitejs/plugin-react-swc": "^3.10.0",
+		"glob": "^11.0.2",
+		"rollup": "^4.41.1",
+		"typescript": "~5.8.3",
+		"unplugin-dts": "1.0.0-beta.6",
+		"vite": "^6.3.5"
+	},
+	"peerDependencies": {
+		"@types/react": "*",
+		"@types/react-dom": "*",
+		"react": "^18 || ^19",
+		"react-dom": "^18 || ^19"
+	},
+	"sideEffects": false
+}

package/src/components/Accordion/_style.css

@@ -0,0 +1,54 @@
+@layer lism.modules {
+	.d--accordion {
+		--duration: var(--acc-duration, 0.4s);
+	}
+	.d--accordion[data-opened] {
+		--_notOpen: ;
+	}
+	.d--accordion:not([data-opened]) {
+		--_isOpen: ;
+	}
+
+	.d--accordion_header {
+		display: grid;
+		grid: auto / 1fr auto;
+		gap: 0.5em;
+		align-items: center;
+		outline-offset: -1px; /* overflow:clip|hidden; で見えなくなってしまうのを防ぐ */
+
+		/* Safariで表示されるデフォルトの三角形アイコンを消す */
+		&::-webkit-details-marker {
+			display: none;
+		}
+	}
+
+	.d--accordion_body {
+		display: grid;
+		grid: 1fr / auto;
+		transition-property: margin-block, padding-block, opacity, grid-template;
+		transition-duration: var(--duration);
+	}
+
+	/* ※ 正常な animation には必須 */
+	.d--accordion_inner {
+		overflow: hidden;
+	}
+
+	/* 閉じている時 */
+	.d--accordion:not([data-opened]) > .d--accordion_body {
+		grid: 0fr / auto;
+		padding-block: 0 !important;
+		margin-block: 0 !important;
+	}
+
+	/* アコーディオンブロックのネスト時、別のアイコンタイプにすると表示が崩れるがそこまでは考慮しない。 */
+	.d--accordion_icon {
+		display: grid;
+	}
+
+	/* .d--accordion_icon 自体にborderつけたりすると回転が見えてしまうので、中にある .a--icon を回転させる。 */
+	.d--accordion_icon .a--icon {
+		transition-duration: var(--duration);
+		rotate: var(--_isOpen, -180deg);
+	}
+}