@umamichi-ui/common-components 0.1.0

package/package.json

@@ -0,0 +1,81 @@
+{
+  "name": "@umamichi-ui/common-components",
+  "version": "0.1.0",
+  "description": "Reusable React UI components for Umamichi sites (overlay stack, dialogs, menus)",
+  "type": "module",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/umamichi-ui/common-components.git"
+  },
+  "homepage": "https://github.com/umamichi-ui/common-components#readme",
+  "bugs": {
+    "url": "https://github.com/umamichi-ui/common-components/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "react",
+    "ui",
+    "overlay",
+    "modal",
+    "dialog",
+    "umamichi"
+  ],
+  "files": [
+    "dist",
+    "src/styles"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./presence": {
+      "types": "./dist/presence/index.d.ts",
+      "import": "./dist/presence/index.js"
+    },
+    "./overlay": {
+      "types": "./dist/overlay/index.d.ts",
+      "import": "./dist/overlay/index.js"
+    },
+    "./icons": {
+      "types": "./dist/icons/index.d.ts",
+      "import": "./dist/icons/index.js"
+    },
+    "./menu": {
+      "types": "./dist/menu/index.d.ts",
+      "import": "./dist/menu/index.js"
+    },
+    "./dialog": {
+      "types": "./dist/dialog/index.d.ts",
+      "import": "./dist/dialog/index.js"
+    },
+    "./styles.css": "./src/styles/index.css"
+  },
+  "scripts": {
+    "build": "vite build && tsc -p tsconfig.build.json",
+    "dev": "vite build --watch",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "@umamichi-ui/common-css": ">=0.8.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.2",
+    "@umamichi-ui/common-css": "^0.8.0",
+    "@vitejs/plugin-react": "^5.1.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "typescript": "^5.9.3",
+    "vite": "^7.1.12",
+    "vite-plugin-dts": "^4.5.4"
+  }
+}

package/src/styles/about-dialog.css

@@ -0,0 +1,117 @@
+.about-dialog {
+  width: min(calc(100vw - 48px), 36rem);
+  max-width: min(calc(100vw - 48px), 36rem);
+}
+
+.about-dialog-body {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+
+.about-dialog-product {
+  text-align: center;
+}
+
+.about-dialog-app-name {
+  margin: 0 0 6px;
+  font-size: 1.05rem;
+  font-weight: 600;
+  line-height: 1.35;
+}
+
+.about-dialog-version {
+  margin: 0 0 10px;
+  color: var(--site-muted-fg);
+  font-size: 0.92rem;
+  line-height: 1.4;
+}
+
+.about-dialog-channel {
+  color: var(--site-subtle-fg);
+}
+
+.about-dialog-tagline {
+  margin: 0;
+  color: var(--site-content-fg);
+  font-size: 0.9rem;
+  line-height: 1.55;
+}
+
+.about-dialog-copyright {
+  margin: 14px 0 0;
+  text-align: center;
+  color: var(--site-muted-fg);
+  font-size: 0.86rem;
+}
+
+.about-dialog-divider {
+  margin: 16px 0;
+  border: 0;
+  border-top: 1px solid var(--site-border);
+}
+
+.about-dialog-section + .about-dialog-section {
+  margin-top: 14px;
+}
+
+.about-dialog-section-title {
+  margin: 0 0 6px;
+  font-size: 0.82rem;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  color: var(--site-subtle-fg);
+  text-transform: uppercase;
+}
+
+.about-dialog-section-text {
+  margin: 0;
+  font-size: 0.9rem;
+  line-height: 1.55;
+  color: var(--site-content-fg);
+}
+
+.about-dialog-meta {
+  margin: 14px 0 0;
+}
+
+.about-dialog-meta-row {
+  display: grid;
+  grid-template-columns: 5.5rem minmax(0, 1fr);
+  gap: 8px 12px;
+  align-items: baseline;
+  font-size: 0.88rem;
+  line-height: 1.45;
+}
+
+.about-dialog-meta-row + .about-dialog-meta-row {
+  margin-top: 8px;
+}
+
+.about-dialog-meta dt {
+  margin: 0;
+  color: var(--site-muted-fg);
+}
+
+.about-dialog-meta dd {
+  margin: 0;
+  overflow-wrap: anywhere;
+}
+
+.about-dialog-meta-row:first-child dd a {
+  white-space: nowrap;
+}
+
+@media (max-width: 560px) {
+  .about-dialog-meta-row:first-child dd a {
+    white-space: normal;
+  }
+}
+
+.about-dialog-actions {
+  justify-content: center;
+}
+
+.about-dialog-actions .primary-button {
+  min-width: 6.5rem;
+}

package/src/styles/index.css

@@ -0,0 +1,3 @@
+@import './overlay.css';
+@import './mobile-action-sheet.css';
+@import './about-dialog.css';

package/src/styles/mobile-action-sheet.css

@@ -0,0 +1,166 @@
+.mobile-action-sheet {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-height: min(85dvh, 100%);
+  box-sizing: border-box;
+  border-top: 1px solid var(--site-border);
+  background: var(--site-surface);
+  color: var(--site-fg);
+  opacity: 0;
+  transform: translateY(100%);
+  transition:
+    transform var(--transition-overlay, 0.22s ease),
+    opacity var(--transition-overlay, 0.22s ease);
+  padding-bottom: max(1rem, calc(env(safe-area-inset-bottom, 0px) + 2.5rem));
+}
+
+.mobile-action-sheet-panels {
+  display: flex;
+  width: 100%;
+  min-width: 0;
+  overflow: hidden;
+  transition: transform var(--transition-overlay, 0.22s ease);
+}
+
+.mobile-action-sheet-panels--slide {
+  width: 200%;
+}
+
+.mobile-action-sheet-panels--slide > .mobile-action-sheet-panel {
+  flex: 0 0 50%;
+  width: 50%;
+}
+
+.mobile-action-sheet-panel {
+  flex: 0 0 100%;
+  width: 100%;
+  min-width: 0;
+  overflow: auto;
+  box-sizing: border-box;
+}
+
+.mobile-action-sheet-subheader {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 12px 10px 8px;
+  border-bottom: 1px solid var(--site-border);
+}
+
+.mobile-action-sheet-back {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  padding: 0;
+  border: none;
+  border-radius: 0;
+  background: transparent;
+  color: inherit;
+  line-height: 0;
+  cursor: pointer;
+}
+
+.mobile-action-sheet-back-chevron {
+  display: block;
+  flex-shrink: 0;
+}
+
+.mobile-action-sheet-back:hover {
+  background: var(--site-hover-bg);
+}
+
+.mobile-action-sheet-subheader-title {
+  font-size: 1rem;
+  font-weight: 600;
+  line-height: 1.35;
+}
+
+.mobile-action-sheet-list {
+  margin: 0;
+  padding: 8px 0 0;
+  list-style: none;
+}
+
+.mobile-action-sheet-list-item {
+  margin: 0;
+}
+
+.mobile-action-sheet-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  width: 100%;
+  min-height: 52px;
+  padding: 14px 20px;
+  border: none;
+  border-radius: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  font-size: 1rem;
+  line-height: 1.35;
+  text-align: left;
+  cursor: pointer;
+}
+
+.mobile-action-sheet-item:hover {
+  background: var(--site-hover-bg);
+}
+
+.mobile-action-sheet-item:active {
+  background: var(--site-active-bg);
+}
+
+.mobile-action-sheet-item:disabled {
+  opacity: 0.38;
+  cursor: not-allowed;
+}
+
+.mobile-action-sheet-item:disabled:hover,
+.mobile-action-sheet-item:disabled:active {
+  background: transparent;
+}
+
+.mobile-action-sheet-item-icon {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  color: var(--site-header-fg, var(--site-fg));
+}
+
+.mobile-action-sheet-item-icon svg {
+  display: block;
+}
+
+.mobile-action-sheet-item-label {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.mobile-action-sheet-item-chevron {
+  display: block;
+  flex-shrink: 0;
+  color: var(--site-subtle-fg);
+}
+
+.mobile-action-sheet-separator {
+  height: 0;
+  margin: 0 20px;
+  border: none;
+  border-top: 1px solid var(--site-border);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .mobile-action-sheet,
+  .mobile-action-sheet-panels {
+    transition: none;
+  }
+}

package/src/styles/overlay.css

@@ -0,0 +1,61 @@
+/* Full-viewport overlays（统一毛玻璃 backdrop，z-index 由 OverlayStack 内联设置） */
+.site-overlay-backdrop {
+  position: fixed;
+  inset: 0;
+  width: 100%;
+  min-width: 100vw;
+  min-height: 100vh;
+  min-height: 100dvh;
+  margin: 0;
+}
+
+.site-overlay-backdrop-inactive {
+  pointer-events: none;
+}
+
+.site-overlay-backdrop--centered {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+  box-sizing: border-box;
+}
+
+.site-overlay-backdrop--top {
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding: 20px;
+  box-sizing: border-box;
+}
+
+.site-overlay-backdrop--bottom {
+  display: flex;
+  align-items: flex-end;
+  justify-content: stretch;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+.site-overlay-backdrop--centered.is-open > .confirm-dialog,
+.site-overlay-backdrop--centered.is-open > .modal-card,
+.site-overlay-backdrop--centered.is-open > .example-modal,
+.site-overlay-backdrop--top.is-open > .site-overlay-panel,
+.site-overlay-backdrop--bottom.is-open > .mobile-action-sheet {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+  .site-overlay-backdrop {
+    background: var(--site-backdrop);
+  }
+}
+
+@media (prefers-reduced-transparency: reduce) {
+  .site-overlay-backdrop {
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+    background: var(--site-backdrop);
+  }
+}