@slithy/modal-parts 0.1.2

package/dist/index.d.ts

@@ -0,0 +1,36 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+type CloseButtonProps = {
+    className?: string;
+    disabled?: boolean;
+    handleClose: () => void;
+    icon?: ReactNode;
+    title?: string;
+};
+declare const CloseButton: ({ className, disabled, handleClose, icon, title, }: CloseButtonProps) => react_jsx_runtime.JSX.Element;
+
+type FooterProps = {
+    children?: React.ReactNode;
+    className?: string;
+} & React.HTMLAttributes<HTMLDivElement>;
+declare const Footer: ({ children, className, ...htmlProps }: FooterProps) => react_jsx_runtime.JSX.Element;
+
+type HeaderProps = {
+    children?: React.ReactNode;
+    className?: string;
+} & React.HTMLAttributes<HTMLDivElement>;
+declare const Header: ({ children, className, ...htmlProps }: HeaderProps) => react_jsx_runtime.JSX.Element;
+
+type MainProps = {
+    children?: React.ReactNode;
+    className?: string;
+    /**
+     * Blocks all mouse, keyboard, and touch interactions. WARNING: Consider accessibility impact.
+     */
+    inert?: boolean;
+};
+declare const Main: react.ForwardRefExoticComponent<MainProps & react.RefAttributes<HTMLDivElement>>;
+
+export { CloseButton, Footer, Header, Main };

package/dist/index.js

@@ -0,0 +1,130 @@
+// src/CloseButton.tsx
+import { usePointerClick } from "@slithy/utils";
+
+// #style-inject:#style-inject
+function styleInject(css, { insertAt } = {}) {
+  if (!css || typeof document === "undefined") return;
+  const head = document.head || document.getElementsByTagName("head")[0];
+  const style = document.createElement("style");
+  style.type = "text/css";
+  if (insertAt === "top") {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+// src/CloseButton.css
+styleInject("[data-slithy=modal-close-button] {\n  align-items: center;\n  background: transparent;\n  border: none;\n  color: inherit;\n  cursor: pointer;\n  display: flex;\n  font-family: inherit;\n  font-size: inherit;\n  height: 44px;\n  justify-content: center;\n  left: auto;\n  margin: 0;\n  padding: 0;\n  position: absolute;\n  right: 0;\n  top: 0;\n  opacity: 1;\n  user-select: none;\n  -webkit-user-select: none;\n  width: 44px;\n  z-index: 1;\n}\n[data-slithy=modal-close-button]:disabled {\n  cursor: default;\n  opacity: 0.5;\n}\n[data-slithy=modal-close-button]:focus-visible {\n  border-radius: 4px;\n  box-shadow: 0 0 0 2px currentColor;\n  outline: none;\n}\n@media (min-width: 768px) {\n  [data-slithy=modal-close-button] {\n    height: 24px;\n    width: 24px;\n  }\n}\n");
+
+// src/CloseButton.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var CloseButton = ({
+  className,
+  disabled,
+  handleClose,
+  icon,
+  title
+}) => {
+  const pointerClick = usePointerClick(handleClose);
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ...pointerClick,
+      "aria-label": "Close",
+      className,
+      "data-slithy": "modal-close-button",
+      disabled,
+      title,
+      type: "button",
+      children: icon ?? /* @__PURE__ */ jsxs(
+        "svg",
+        {
+          xmlns: "http://www.w3.org/2000/svg",
+          width: "24",
+          height: "24",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          "aria-hidden": "true",
+          children: [
+            /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+            /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+          ]
+        }
+      )
+    }
+  );
+};
+
+// src/Footer.css
+styleInject("[data-slithy=modal-footer] {\n  border-top: 1px solid rgba(0, 0, 0, 0.25);\n  box-sizing: content-box;\n  position: relative;\n}\n[data-slithy=modal-footer]:empty {\n  display: none;\n}\n");
+
+// src/Footer.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var Footer = ({ children, className, ...htmlProps }) => /* @__PURE__ */ jsx2(
+  "div",
+  {
+    ...htmlProps,
+    className,
+    "data-slithy": "modal-footer",
+    "data-testid": "modal-footer",
+    children
+  }
+);
+
+// src/Header.css
+styleInject("[data-slithy=modal-header] {\n  border-bottom: 1px solid rgba(0, 0, 0, 0.25);\n  box-sizing: content-box;\n  position: relative;\n}\n");
+
+// src/Header.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var Header = ({ children, className, ...htmlProps }) => /* @__PURE__ */ jsx3(
+  "div",
+  {
+    ...htmlProps,
+    className,
+    "data-slithy": "modal-header",
+    "data-testid": "modal-header",
+    children
+  }
+);
+
+// src/Main.tsx
+import { forwardRef } from "react";
+
+// src/Main.css
+styleInject("[data-slithy=modal-main] {\n  flex-grow: 1;\n  min-height: 0;\n  overflow-y: auto;\n  overscroll-behavior-y: contain;\n  touch-action: pan-y;\n  user-select: text;\n  -webkit-user-select: none;\n}\n");
+
+// src/Main.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+var Main = forwardRef(
+  ({ children, className, inert }, ref) => /* @__PURE__ */ jsx4(
+    "div",
+    {
+      ref,
+      className,
+      "data-slithy": "modal-main",
+      "data-testid": "modal-main",
+      inert: inert || void 0,
+      children
+    }
+  )
+);
+export {
+  CloseButton,
+  Footer,
+  Header,
+  Main
+};

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@slithy/modal-parts",
+  "version": "0.1.2",
+  "description": "Layout primitives for @slithy/modal-kit modals.",
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "*.css"
+  ],
+  "dependencies": {
+    "@slithy/utils": "0.3.0",
+    "@slithy/modal-kit": "0.1.2"
+  },
+  "peerDependencies": {
+    "react": "^17 || ^18 || ^19"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6",
+    "@testing-library/react": "^16",
+    "@types/react": "^19",
+    "@vitejs/plugin-react": "^6",
+    "@vitest/coverage-v8": "^4.1.2",
+    "jsdom": "^29.0.1",
+    "react": "^19",
+    "react-dom": "^19",
+    "tsup": "^8",
+    "typescript": "^5",
+    "vitest": "^4.1.2",
+    "@slithy/eslint-config": "0.0.0",
+    "@slithy/tsconfig": "0.0.0"
+  },
+  "author": "mjcampagna",
+  "license": "ISC",
+  "scripts": {
+    "clean": "rm -rf dist",
+    "build": "rm -rf dist && tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint .",
+    "test": "vitest run --passWithNoTests",
+    "test:watch": "vitest"
+  }
+}