@mohasinac/appkit 2.7.22 → 2.7.24

package/dist/ui/components/FormGrid.style.css

@@ -1,32 +1,32 @@
-/* appkit/src/ui/components/FormGrid.style.css */
-
-.appkit-form-grid {
-  display: flex;
-  flex-wrap: wrap;
-  /* gap is driven by the inline style prop */
-}
-
-/* -- FormField --------------------------------------- */
-
-.appkit-form-field {
-  display: flex;
-  flex-direction: column;
-  gap: 0.375rem; /* ~6px (gap-1.5) */
-}
-
-/* fluid: grows to fill, wraps below min width */
-.appkit-form-field--auto {
-  flex: 1 1 var(--appkit-form-grid-min-field, 280px);
-  min-width: var(--appkit-form-grid-min-field, 280px);
-}
-
-/* always spans full container width */
-.appkit-form-field--full {
-  width: 100%;
-}
-
-/* fixed half width, still respects min-field constraint */
-.appkit-form-field--half {
-  width: 50%;
-  min-width: var(--appkit-form-grid-min-field, 280px);
-}
+/* appkit/src/ui/components/FormGrid.style.css */
+
+.appkit-form-grid {
+  display: flex;
+  flex-wrap: wrap;
+  /* gap is driven by the inline style prop */
+}
+
+/* -- FormField --------------------------------------- */
+
+.appkit-form-field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem; /* ~6px (gap-1.5) */
+}
+
+/* fluid: grows to fill, wraps below min width */
+.appkit-form-field--auto {
+  flex: 1 1 var(--appkit-form-grid-min-field, 280px);
+  min-width: var(--appkit-form-grid-min-field, 280px);
+}
+
+/* always spans full container width */
+.appkit-form-field--full {
+  width: 100%;
+}
+
+/* fixed half width, still respects min-field constraint */
+.appkit-form-field--half {
+  width: 50%;
+  min-width: var(--appkit-form-grid-min-field, 280px);
+}

package/dist/ui/components/ImageGallery.style.css

@@ -1,163 +1,163 @@
-/* ImageGallery — swipeable image viewer with thumbnails, captions, zoom */
-
-.appkit-image-gallery {
-  /* root container — no structural styles needed, className pass-through */
-}
-
-.appkit-image-gallery__viewport {
-  position: relative;
-  border-radius: 0.5rem;
-  overflow: hidden;
-  touch-action: pan-y;
-  user-select: none;
-}
-
-.appkit-image-gallery__image-frame {
-  position: relative;
-  aspect-ratio: 16 / 9;
-  overflow: hidden;
-}
-
-@media (min-width: 768px) {
-  .appkit-image-gallery__image-frame {
-    aspect-ratio: 16 / 10;
-  }
-}
-
-.appkit-image-gallery__image {
-  width: 100%;
-  height: 100%;
-  background-position: center;
-  background-size: contain;
-  background-repeat: no-repeat;
-  transition: transform 0.2s ease;
-}
-
-.appkit-image-gallery__nav-btn {
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  padding: 0.5rem;
-  border-radius: 9999px;
-  background-opacity: 0.8;
-  backdrop-filter: blur(4px);
-  transition: all 0.15s ease;
-  touch-action: manipulation;
-}
-
-.appkit-image-gallery__nav-btn:focus {
-  outline: none;
-  box-shadow: 0 0 0 2px var(--appkit-color-secondary);
-}
-
-.appkit-image-gallery__nav-btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.appkit-image-gallery__nav-btn--prev {
-  left: 0.5rem;
-}
-
-.appkit-image-gallery__nav-btn--next {
-  right: 0.5rem;
-}
-
-@media (min-width: 768px) {
-  .appkit-image-gallery__nav-btn {
-    padding: 0.75rem;
-  }
-  .appkit-image-gallery__nav-btn--prev {
-    left: 1rem;
-  }
-  .appkit-image-gallery__nav-btn--next {
-    right: 1rem;
-  }
-}
-
-.appkit-image-gallery__counter,
-.appkit-image-gallery__zoom-indicator {
-  position: absolute;
-  padding: 0.25rem 0.75rem;
-  border-radius: 9999px;
-  background-opacity: 0.8;
-  backdrop-filter: blur(4px);
-  font-size: 0.75rem;
-  font-weight: 500;
-}
-
-@media (min-width: 768px) {
-  .appkit-image-gallery__counter,
-  .appkit-image-gallery__zoom-indicator {
-    font-size: 0.875rem;
-  }
-}
-
-.appkit-image-gallery__counter {
-  bottom: 0.5rem;
-  right: 0.5rem;
-}
-
-@media (min-width: 768px) {
-  .appkit-image-gallery__counter {
-    bottom: 1rem;
-    right: 1rem;
-  }
-}
-
-.appkit-image-gallery__zoom-indicator {
-  top: 0.5rem;
-  right: 0.5rem;
-}
-
-@media (min-width: 768px) {
-  .appkit-image-gallery__zoom-indicator {
-    top: 1rem;
-    right: 1rem;
-  }
-}
-
-.appkit-image-gallery__caption {
-  padding: 1rem;
-  border-top: 1px solid;
-}
-
-.appkit-image-gallery__thumbnail {
-  flex-shrink: 0;
-  width: 4rem;
-  height: 4rem;
-  border-radius: 0.5rem;
-  overflow: hidden;
-  border-width: 2px;
-  transition: all 0.15s ease;
-  scroll-snap-align: center;
-  touch-action: manipulation;
-}
-
-@media (min-width: 768px) {
-  .appkit-image-gallery__thumbnail {
-    width: 5rem;
-    height: 5rem;
-  }
-}
-
-.appkit-image-gallery__thumbnail--active {
-  border-color: var(--appkit-color-secondary-600);
-  box-shadow: 0 0 0 2px var(--appkit-color-secondary-200);
-}
-
-:is(.dark) .appkit-image-gallery__thumbnail--active {
-  box-shadow: 0 0 0 2px var(--appkit-color-secondary-800);
-}
-
-.appkit-image-gallery__help {
-  margin-top: 0.5rem;
-  text-align: center;
-  font-size: 0.75rem;
-}
-
-@media (min-width: 768px) {
-  .appkit-image-gallery__help {
-    display: none;
-  }
-}
+/* ImageGallery — swipeable image viewer with thumbnails, captions, zoom */
+
+.appkit-image-gallery {
+  /* root container — no structural styles needed, className pass-through */
+}
+
+.appkit-image-gallery__viewport {
+  position: relative;
+  border-radius: 0.5rem;
+  overflow: hidden;
+  touch-action: pan-y;
+  user-select: none;
+}
+
+.appkit-image-gallery__image-frame {
+  position: relative;
+  aspect-ratio: 16 / 9;
+  overflow: hidden;
+}
+
+@media (min-width: 768px) {
+  .appkit-image-gallery__image-frame {
+    aspect-ratio: 16 / 10;
+  }
+}
+
+.appkit-image-gallery__image {
+  width: 100%;
+  height: 100%;
+  background-position: center;
+  background-size: contain;
+  background-repeat: no-repeat;
+  transition: transform 0.2s ease;
+}
+
+.appkit-image-gallery__nav-btn {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  padding: 0.5rem;
+  border-radius: 9999px;
+  background-opacity: 0.8;
+  backdrop-filter: blur(4px);
+  transition: all 0.15s ease;
+  touch-action: manipulation;
+}
+
+.appkit-image-gallery__nav-btn:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--appkit-color-secondary);
+}
+
+.appkit-image-gallery__nav-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.appkit-image-gallery__nav-btn--prev {
+  left: 0.5rem;
+}
+
+.appkit-image-gallery__nav-btn--next {
+  right: 0.5rem;
+}
+
+@media (min-width: 768px) {
+  .appkit-image-gallery__nav-btn {
+    padding: 0.75rem;
+  }
+  .appkit-image-gallery__nav-btn--prev {
+    left: 1rem;
+  }
+  .appkit-image-gallery__nav-btn--next {
+    right: 1rem;
+  }
+}
+
+.appkit-image-gallery__counter,
+.appkit-image-gallery__zoom-indicator {
+  position: absolute;
+  padding: 0.25rem 0.75rem;
+  border-radius: 9999px;
+  background-opacity: 0.8;
+  backdrop-filter: blur(4px);
+  font-size: 0.75rem;
+  font-weight: 500;
+}
+
+@media (min-width: 768px) {
+  .appkit-image-gallery__counter,
+  .appkit-image-gallery__zoom-indicator {
+    font-size: 0.875rem;
+  }
+}
+
+.appkit-image-gallery__counter {
+  bottom: 0.5rem;
+  right: 0.5rem;
+}
+
+@media (min-width: 768px) {
+  .appkit-image-gallery__counter {
+    bottom: 1rem;
+    right: 1rem;
+  }
+}
+
+.appkit-image-gallery__zoom-indicator {
+  top: 0.5rem;
+  right: 0.5rem;
+}
+
+@media (min-width: 768px) {
+  .appkit-image-gallery__zoom-indicator {
+    top: 1rem;
+    right: 1rem;
+  }
+}
+
+.appkit-image-gallery__caption {
+  padding: 1rem;
+  border-top: 1px solid;
+}
+
+.appkit-image-gallery__thumbnail {
+  flex-shrink: 0;
+  width: 4rem;
+  height: 4rem;
+  border-radius: 0.5rem;
+  overflow: hidden;
+  border-width: 2px;
+  transition: all 0.15s ease;
+  scroll-snap-align: center;
+  touch-action: manipulation;
+}
+
+@media (min-width: 768px) {
+  .appkit-image-gallery__thumbnail {
+    width: 5rem;
+    height: 5rem;
+  }
+}
+
+.appkit-image-gallery__thumbnail--active {
+  border-color: var(--appkit-color-secondary-600);
+  box-shadow: 0 0 0 2px var(--appkit-color-secondary-200);
+}
+
+:is(.dark) .appkit-image-gallery__thumbnail--active {
+  box-shadow: 0 0 0 2px var(--appkit-color-secondary-800);
+}
+
+.appkit-image-gallery__help {
+  margin-top: 0.5rem;
+  text-align: center;
+  font-size: 0.75rem;
+}
+
+@media (min-width: 768px) {
+  .appkit-image-gallery__help {
+    display: none;
+  }
+}

package/dist/ui/components/ImageLightbox.style.css

@@ -1,58 +1,58 @@
-/* appkit/src/ui/components/ImageLightbox.style.css */
-
-.appkit-lightbox {
-  position: fixed;
-  inset: 0;
-  z-index: 9999;
-  background: rgba(0, 0, 0, 0.95);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  outline: none;
-}
-
-/* -- Counter ----------------------------------------- */
-
-.appkit-lightbox__counter {
-  position: absolute;
-  top: 1rem;
-  left: 50%;
-  transform: translateX(-50%);
-  color: rgba(255, 255, 255, 0.7);
-  font-size: 0.875rem;
-  font-weight: 500;
-}
-
-/* -- Image area -------------------------------------- */
-
-.appkit-lightbox__image-wrap {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 4rem;
-  width: 100%;
-  height: 100%;
-  position: relative;
-}
-
-.appkit-lightbox__img {
-  max-height: 100%;
-  max-width: 100%;
-  object-fit: contain;
-  user-select: none;
-}
-
-/* -- Zoom hint --------------------------------------- */
-
-.appkit-lightbox__zoom-hint {
-  position: absolute;
-  bottom: 1rem;
-  right: 1rem;
-  color: rgba(255, 255, 255, 0.4);
-  display: flex;
-  align-items: center;
-  gap: 0.25rem;
-  font-size: 0.75rem;
-}
+/* appkit/src/ui/components/ImageLightbox.style.css */
+
+.appkit-lightbox {
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  background: rgba(0, 0, 0, 0.95);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  outline: none;
+}
+
+/* -- Counter ----------------------------------------- */
+
+.appkit-lightbox__counter {
+  position: absolute;
+  top: 1rem;
+  left: 50%;
+  transform: translateX(-50%);
+  color: rgba(255, 255, 255, 0.7);
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+/* -- Image area -------------------------------------- */
+
+.appkit-lightbox__image-wrap {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 4rem;
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+.appkit-lightbox__img {
+  max-height: 100%;
+  max-width: 100%;
+  object-fit: contain;
+  user-select: none;
+}
+
+/* -- Zoom hint --------------------------------------- */
+
+.appkit-lightbox__zoom-hint {
+  position: absolute;
+  bottom: 1rem;
+  right: 1rem;
+  color: rgba(255, 255, 255, 0.4);
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  font-size: 0.75rem;
+}

package/dist/ui/components/ItemRow.style.css

@@ -1,33 +1,33 @@
-.appkit-item-row {
-  display: flex;
-  align-items: flex-start;
-  gap: 1rem;
-}
-
-.appkit-item-row__thumbnail {
-  flex-shrink: 0;
-}
-
-.appkit-item-row__content {
-  min-width: 0;
-  flex: 1;
-}
-
-.appkit-item-row__title {
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
-
-.appkit-item-row__subtitle {
-  margin-top: 0.125rem;
-}
-
-.appkit-item-row__actions {
-  margin-top: 0.5rem;
-}
-
-.appkit-item-row__right {
-  flex-shrink: 0;
-}
+.appkit-item-row {
+  display: flex;
+  align-items: flex-start;
+  gap: 1rem;
+}
+
+.appkit-item-row__thumbnail {
+  flex-shrink: 0;
+}
+
+.appkit-item-row__content {
+  min-width: 0;
+  flex: 1;
+}
+
+.appkit-item-row__title {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.appkit-item-row__subtitle {
+  margin-top: 0.125rem;
+}
+
+.appkit-item-row__actions {
+  margin-top: 0.5rem;
+}
+
+.appkit-item-row__right {
+  flex-shrink: 0;
+}