@resira/ui 0.3.2 → 0.4.0

package/dist/styles.css

@@ -961,6 +961,238 @@
   opacity: 0.7;
 }
 
+/* ─────────────────────────────────────────────────────────────── */
+/* Category tiles                                                   */
+/* ─────────────────────────────────────────────────────────────── */
+
+.resira-category-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 12px;
+}
+
+.resira-category-tile {
+  position: relative;
+  border: none;
+  background: none;
+  padding: 0;
+  border-radius: var(--resira-radius, 12px);
+  overflow: hidden;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  transition: transform 0.18s ease, box-shadow 0.18s ease;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
+}
+
+.resira-category-tile:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 20px rgba(0,0,0,0.12);
+}
+
+.resira-category-tile-image {
+  position: relative;
+  width: 100%;
+  aspect-ratio: 4 / 3;
+  overflow: hidden;
+}
+
+.resira-category-tile-image img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.resira-category-tile-overlay {
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.05) 60%);
+  pointer-events: none;
+}
+
+.resira-category-tile-content {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 14px;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  z-index: 1;
+}
+
+.resira-category-tile-name {
+  font-size: 15px;
+  font-weight: 700;
+  color: #fff;
+  line-height: 1.2;
+  margin: 0;
+}
+
+.resira-category-tile-count {
+  font-size: 12px;
+  color: rgba(255,255,255,0.8);
+  font-weight: 500;
+}
+
+/* ── Category back button ────────────────────────────────────── */
+
+.resira-category-back {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  background: none;
+  border: none;
+  padding: 4px 0;
+  margin-bottom: 10px;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--resira-primary);
+  cursor: pointer;
+  transition: opacity 0.15s ease;
+}
+
+.resira-category-back:hover { opacity: 0.75; }
+
+/* ─────────────────────────────────────────────────────────────── */
+/* Service overlay cards (image background + text overlay)          */
+/* ─────────────────────────────────────────────────────────────── */
+
+.resira-service-overlay-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.resira-service-overlay-list .resira-service-card-btn {
+  display: block;
+}
+
+.resira-service-overlay-card {
+  position: relative;
+  border-radius: var(--resira-radius, 12px);
+  overflow: hidden;
+  min-height: 170px;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  cursor: pointer;
+  transition: transform 0.18s ease, box-shadow 0.18s ease;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
+}
+
+.resira-service-overlay-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 20px rgba(0,0,0,0.12);
+}
+
+.resira-service-overlay-card--selected {
+  outline: 2.5px solid var(--resira-primary);
+  outline-offset: -2.5px;
+}
+
+.resira-service-overlay-card-bg {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+}
+
+.resira-service-overlay-card-bg img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.resira-service-overlay-card-gradient {
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(to top, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.15) 55%, rgba(0,0,0,0.05) 100%);
+  z-index: 1;
+  pointer-events: none;
+}
+
+.resira-service-overlay-card-content {
+  position: relative;
+  z-index: 2;
+  padding: 14px 16px;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  gap: 6px;
+  min-height: 170px;
+}
+
+.resira-service-overlay-card-top {
+  margin-top: auto;
+}
+
+.resira-service-overlay-card-name {
+  font-size: 16px;
+  font-weight: 700;
+  color: #fff;
+  line-height: 1.25;
+  margin: 0;
+}
+
+.resira-service-overlay-card-desc {
+  font-size: 12px;
+  color: rgba(255,255,255,0.8);
+  line-height: 1.4;
+  margin: 3px 0 0;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.resira-service-overlay-card-bottom {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.resira-service-overlay-card-price {
+  font-size: 16px;
+  font-weight: 700;
+  color: #fff;
+}
+
+.resira-service-overlay-card-price-unit {
+  font-size: 11px;
+  font-weight: 500;
+  color: rgba(255,255,255,0.7);
+}
+
+.resira-service-overlay-card-pills {
+  display: flex;
+  gap: 6px;
+}
+
+.resira-service-overlay-card-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  font-size: 11px;
+  font-weight: 600;
+  color: #fff;
+  background: rgba(255,255,255,0.18);
+  padding: 2px 7px;
+  border-radius: 4px;
+  white-space: nowrap;
+}
+
+/* Mobile: single column for category grid */
+@media (max-width: 400px) {
+  .resira-category-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
 /* ─────────────────────────────────────────────────────────────── */
 /* Guest form (v2 — compact, 2-col)                                */
 /* ─────────────────────────────────────────────────────────────── */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@resira/ui",
-  "version": "0.3.2",
+  "version": "0.4.0",
   "description": "React UI components for the Resira booking platform",
   "license": "MIT",
   "type": "module",
@@ -35,7 +35,7 @@
     "react-dom": ">=18.0.0"
   },
   "dependencies": {
-    "@resira/sdk": "^0.3.1"
+    "@resira/sdk": "^0.4.0"
   },
   "devDependencies": {
     "@types/react": "^19.0.0",