@mshafiqyajid/react-modal 0.0.0

package/dist/styles.css

@@ -0,0 +1,247 @@
+/* ============================================================================
+ * react-modal — styled component
+ *
+ * Dark mode: [data-theme="dark"] on any ancestor — never prefers-color-scheme.
+ * ========================================================================== */
+
+.rmod-overlay {
+  --rmod-fg: #18181b;
+  --rmod-fg-muted: #71717a;
+  --rmod-bg: #ffffff;
+  --rmod-bg-header: #fafafa;
+  --rmod-bg-footer: #fafafa;
+  --rmod-border: #e4e4e7;
+  --rmod-overlay-bg: rgba(0, 0, 0, 0.45);
+  --rmod-shadow: 0 24px 64px rgba(0,0,0,0.14), 0 4px 16px rgba(0,0,0,0.08);
+  --rmod-radius: 14px;
+  --rmod-close-bg-hover: #f4f4f5;
+  --rmod-close-fg: #71717a;
+  --rmod-close-fg-hover: #18181b;
+  --rmod-duration: 220ms;
+  --rmod-ease: cubic-bezier(0.32, 0.72, 0, 1);
+  --rmod-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+
+  position: fixed;
+  inset: 0;
+  z-index: 9000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+  background: var(--rmod-overlay-bg);
+
+  /* Backdrop blur — default md */
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+
+  opacity: 0;
+  transition: opacity var(--rmod-duration) var(--rmod-ease),
+              backdrop-filter var(--rmod-duration) var(--rmod-ease);
+  pointer-events: none;
+}
+
+.rmod-overlay--visible {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+/* Blur variants */
+.rmod-overlay[data-blur="none"]  { backdrop-filter: none; -webkit-backdrop-filter: none; }
+.rmod-overlay[data-blur="sm"]    { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
+.rmod-overlay[data-blur="md"]    { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
+.rmod-overlay[data-blur="lg"]    { backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
+
+/* Drawer alignment */
+.rmod-overlay[data-variant="drawer-left"]   { justify-content: flex-start; padding: 0; }
+.rmod-overlay[data-variant="drawer-right"]  { justify-content: flex-end;   padding: 0; }
+.rmod-overlay[data-variant="drawer-bottom"] { align-items: flex-end;        padding: 0; }
+
+/* ============================================================================
+ * Panel — base (dialog only)
+ * ========================================================================== */
+.rmod-panel {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  background: var(--rmod-bg);
+  border-radius: var(--rmod-radius);
+  box-shadow: var(--rmod-shadow);
+  max-height: calc(100vh - 2rem);
+  width: 100%;
+  overflow: hidden;
+  outline: none;
+}
+
+/* Dialog enter/exit */
+.rmod-panel[data-variant="dialog"] {
+  opacity: 0;
+  transform: scale(0.94) translateY(8px);
+  transition:
+    opacity var(--rmod-duration) var(--rmod-ease),
+    transform var(--rmod-duration) var(--rmod-ease-spring);
+}
+.rmod-panel[data-variant="dialog"].rmod-panel--visible {
+  opacity: 1;
+  transform: scale(1) translateY(0);
+}
+
+/* Panel sizes */
+.rmod-panel[data-size="sm"][data-variant="dialog"] { max-width: 400px; }
+.rmod-panel[data-size="md"][data-variant="dialog"] { max-width: 560px; }
+.rmod-panel[data-size="lg"][data-variant="dialog"] { max-width: 800px; }
+.rmod-panel[data-size="full"][data-variant="dialog"] { max-width: calc(100vw - 2rem); max-height: calc(100vh - 2rem); }
+
+/* ============================================================================
+ * Drawer — left
+ * ========================================================================== */
+.rmod-panel[data-variant="drawer-left"] {
+  height: 100vh; max-height: 100vh;
+  border-radius: 0 var(--rmod-radius) var(--rmod-radius) 0;
+  opacity: 1;
+  transform: translateX(-100%);
+  transition: transform var(--rmod-duration) var(--rmod-ease);
+}
+.rmod-panel[data-variant="drawer-left"].rmod-panel--visible { transform: translateX(0); }
+.rmod-panel[data-size="sm"][data-variant="drawer-left"]   { max-width: 280px; }
+.rmod-panel[data-size="md"][data-variant="drawer-left"]   { max-width: 380px; }
+.rmod-panel[data-size="lg"][data-variant="drawer-left"]   { max-width: 520px; }
+.rmod-panel[data-size="full"][data-variant="drawer-left"] { max-width: 100vw; border-radius: 0; }
+
+/* ============================================================================
+ * Drawer — right
+ * ========================================================================== */
+.rmod-panel[data-variant="drawer-right"] {
+  height: 100vh; max-height: 100vh;
+  border-radius: var(--rmod-radius) 0 0 var(--rmod-radius);
+  opacity: 1;
+  transform: translateX(100%);
+  transition: transform var(--rmod-duration) var(--rmod-ease);
+}
+.rmod-panel[data-variant="drawer-right"].rmod-panel--visible { transform: translateX(0); }
+.rmod-panel[data-size="sm"][data-variant="drawer-right"]   { max-width: 280px; }
+.rmod-panel[data-size="md"][data-variant="drawer-right"]   { max-width: 380px; }
+.rmod-panel[data-size="lg"][data-variant="drawer-right"]   { max-width: 520px; }
+.rmod-panel[data-size="full"][data-variant="drawer-right"] { max-width: 100vw; border-radius: 0; }
+
+/* ============================================================================
+ * Drawer — bottom
+ * ========================================================================== */
+.rmod-panel[data-variant="drawer-bottom"] {
+  width: 100%; max-width: 100%; max-height: 80vh;
+  border-radius: var(--rmod-radius) var(--rmod-radius) 0 0;
+  opacity: 1;
+  transform: translateY(100%);
+  transition: transform var(--rmod-duration) var(--rmod-ease);
+}
+.rmod-panel[data-variant="drawer-bottom"].rmod-panel--visible { transform: translateY(0); }
+
+/* Drag handle for bottom drawer */
+.rmod-panel[data-variant="drawer-bottom"] .rmod-header::before {
+  content: "";
+  display: block;
+  width: 36px; height: 4px;
+  background: var(--rmod-border);
+  border-radius: 2px;
+  margin: 0 auto 0.75rem;
+  order: -1;
+  flex-basis: 100%;
+}
+.rmod-panel[data-variant="drawer-bottom"] .rmod-header {
+  flex-wrap: wrap;
+}
+
+/* ============================================================================
+ * Header
+ * ========================================================================== */
+.rmod-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  padding: 1rem 1.25rem;
+  background: var(--rmod-bg-header);
+  border-bottom: 1px solid var(--rmod-border);
+  flex-shrink: 0;
+}
+
+.rmod-title {
+  margin: 0;
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--rmod-fg);
+  line-height: 1.4;
+  flex: 1;
+}
+
+/* ============================================================================
+ * Close button
+ * ========================================================================== */
+.rmod-close {
+  display: flex; align-items: center; justify-content: center;
+  flex-shrink: 0;
+  width: 2rem; height: 2rem;
+  padding: 0; border: none; border-radius: 6px;
+  background: transparent;
+  color: var(--rmod-close-fg);
+  cursor: pointer;
+  transition: background-color 150ms ease, color 150ms ease;
+}
+.rmod-close:hover       { background: var(--rmod-close-bg-hover); color: var(--rmod-close-fg-hover); }
+.rmod-close:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; }
+
+/* ============================================================================
+ * Body
+ * ========================================================================== */
+.rmod-body {
+  flex: 1;
+  color: var(--rmod-fg);
+  font-size: 0.9375rem;
+  line-height: 1.6;
+}
+
+/* Padding variants */
+.rmod-panel[data-padding="none"] .rmod-body  { padding: 0; }
+.rmod-panel[data-padding="sm"]   .rmod-body  { padding: 0.75rem; }
+.rmod-panel[data-padding="md"]   .rmod-body  { padding: 1.25rem; }
+.rmod-panel[data-padding="lg"]   .rmod-body  { padding: 2rem; }
+
+/* Scrollable body */
+.rmod-panel[data-scrollable="true"] .rmod-body { overflow-y: auto; }
+
+/* ============================================================================
+ * Footer
+ * ========================================================================== */
+.rmod-footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 0.625rem;
+  padding: 0.875rem 1.25rem;
+  background: var(--rmod-bg-footer);
+  border-top: 1px solid var(--rmod-border);
+  flex-shrink: 0;
+}
+
+/* ============================================================================
+ * Dark mode
+ * ========================================================================== */
+[data-theme="dark"] .rmod-overlay {
+  --rmod-fg: #fafafa;
+  --rmod-fg-muted: #a1a1aa;
+  --rmod-bg: #18181b;
+  --rmod-bg-header: #1f1f22;
+  --rmod-bg-footer: #1f1f22;
+  --rmod-border: #3f3f46;
+  --rmod-overlay-bg: rgba(0, 0, 0, 0.65);
+  --rmod-shadow: 0 24px 64px rgba(0,0,0,0.5), 0 4px 16px rgba(0,0,0,0.3);
+  --rmod-close-bg-hover: #3f3f46;
+  --rmod-close-fg: #a1a1aa;
+  --rmod-close-fg-hover: #fafafa;
+}
+
+/* ============================================================================
+ * Reduced motion
+ * ========================================================================== */
+@media (prefers-reduced-motion: reduce) {
+  .rmod-overlay, .rmod-panel { transition-duration: 0ms !important; }
+}

package/package.json

@@ -0,0 +1,84 @@
+{
+  "name": "@mshafiqyajid/react-modal",
+  "version": "0.0.0",
+  "description": "Headless modal hook and styled component for React. Accessible, focus-trapped, scroll-locked, animated, SSR-safe, fully typed.",
+  "keywords": [
+    "react",
+    "modal",
+    "dialog",
+    "drawer",
+    "accessible",
+    "headless",
+    "hook",
+    "typescript"
+  ],
+  "license": "MIT",
+  "author": "Shafiq Yajid",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/mshafiqyajid/packages.git",
+    "directory": "packages/react-modal"
+  },
+  "bugs": {
+    "url": "https://github.com/mshafiqyajid/packages/issues"
+  },
+  "homepage": "https://docs.shafiqyajid.com/react/modal/",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./styled": {
+      "types": "./dist/styled.d.ts",
+      "import": "./dist/styled.js",
+      "require": "./dist/styled.cjs"
+    },
+    "./styles.css": "./dist/styles.css",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "typecheck": "tsc --noEmit",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "react": ">=17.0.0"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.4.0",
+    "@testing-library/react": "^16.0.0",
+    "@testing-library/user-event": "^14.5.0",
+    "@types/node": "^22.0.0",
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.0",
+    "jsdom": "^25.0.0",
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0",
+    "tsup": "^8.3.0",
+    "typescript": "^5.6.0",
+    "vitest": "^2.1.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "node": ">=18"
+  }
+}