@revikornmann/muka-ui 0.7.0 → 0.8.0

package/dist/esm/components/Thumbnail/Thumbnail.css

@@ -0,0 +1,171 @@
+/* Thumbnail Component Styles - Using Muka Design Tokens */
+
+.muka-thumbnail {
+  position: relative;
+  flex-shrink: 0;
+}
+
+/* The frame carries the border, background and shape clip. Keeping it separate
+   from the root lets the remove (×) button sit outside the clip (needed for the
+   circular/ellipse shape, whose corners would otherwise clip the button). */
+.muka-thumbnail__frame {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  border: var(--border-width-regular, 1px) solid var(--color-black-alpha-3);
+  border-radius: var(--border-radius-lg);
+  background-color: var(--color-surface-level1);
+}
+
+/* ─── Shapes ──────────────────────────────────────────── */
+.muka-thumbnail--4-3 {
+  width: 160px;
+  height: 120px;
+}
+
+.muka-thumbnail--1-1 {
+  width: 120px;
+  height: 120px;
+}
+
+.muka-thumbnail--ellipse {
+  width: 120px;
+  height: 120px;
+}
+
+.muka-thumbnail--ellipse .muka-thumbnail__frame {
+  border-radius: var(--border-radius-full);
+}
+
+/* Image fills the frame, cropped to cover. Sits at scale(1) by default so the
+   interactive hover zoom has a clean origin. */
+.muka-thumbnail__image {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+  transform-origin: center;
+  /* Micro-interaction: hover zoom eases out over the "micro" duration. */
+  transition: transform var(--motion-duration-micro) var(--motion-easing-enter);
+}
+
+/* ─── Interactive (click-to-enlarge) ──────────────────── */
+.muka-thumbnail__trigger {
+  position: absolute;
+  inset: 0;
+  padding: 0;
+  border: 0;
+  background: none;
+  cursor: pointer;
+  overflow: hidden;
+}
+
+.muka-thumbnail__trigger:focus-visible {
+  outline: 2px solid var(--color-border-focus);
+  outline-offset: -2px;
+}
+
+/* On hover the image scales up ~8px (160px → 168px) with an ease-out feel. */
+.muka-thumbnail--interactive:hover .muka-thumbnail__image {
+  transform: scale(1.05);
+}
+
+/* ─── Loading overlay + progress donut ────────────────── */
+.muka-thumbnail__overlay {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--dialog-color-backdrop);
+}
+
+.muka-thumbnail__progress {
+  width: 40px;
+  height: 40px;
+}
+
+/* ─── Error / corrupt state ───────────────────────────── */
+.muka-thumbnail--error .muka-thumbnail__frame {
+  background-color: var(--alias-color-state-error-muted);
+  border-color: var(--alias-color-state-error-default);
+}
+
+.muka-thumbnail__error {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-2);
+  padding: var(--spacing-3);
+  text-align: center;
+}
+
+.muka-thumbnail__error-icon {
+  color: var(--alert-color-error-accent);
+}
+
+.muka-thumbnail__caption {
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--alert-color-error-accent);
+  font-family: var(--text-body-sm-regular-fontFamily);
+  font-size: var(--text-body-sm-regular-fontSize);
+  font-weight: var(--text-body-sm-regular-fontWeight);
+  line-height: var(--text-body-sm-regular-lineHeight);
+}
+
+/* ─── Remove (×) button ───────────────────────────────── */
+.muka-thumbnail__remove {
+  position: absolute;
+  top: var(--spacing-2);
+  right: var(--spacing-2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--size-2xl);
+  height: var(--size-2xl);
+  padding: 0;
+  color: var(--button-color-tertiary-foreground-default);
+  background-color: var(--button-color-tertiary-background-default);
+  border: var(--border-width-regular, 1px) solid var(--button-color-tertiary-border-default);
+  border-radius: var(--border-radius-lg);
+  cursor: pointer;
+  transition: background-color var(--motion-duration-micro) var(--motion-easing-enter),
+    border-color var(--motion-duration-micro) var(--motion-easing-enter);
+}
+
+.muka-thumbnail__remove:hover {
+  color: var(--button-color-tertiary-foreground-hover);
+  background-color: var(--button-color-tertiary-background-hover);
+  border-color: var(--button-color-tertiary-border-hover);
+}
+
+.muka-thumbnail__remove:active {
+  color: var(--button-color-tertiary-foreground-pressed);
+  background-color: var(--button-color-tertiary-background-pressed);
+  border-color: var(--button-color-tertiary-border-pressed);
+}
+
+.muka-thumbnail__remove:focus-visible {
+  outline: 2px solid var(--color-border-focus);
+  outline-offset: 2px;
+}
+
+/* ─── Reduced motion ──────────────────────────────────── */
+@media (prefers-reduced-motion: reduce) {
+  .muka-thumbnail__image,
+  .muka-thumbnail__remove {
+    transition: none;
+  }
+
+  .muka-thumbnail--interactive:hover .muka-thumbnail__image {
+    transform: none;
+  }
+}

package/dist/esm/components/Thumbnail/Thumbnail.js

@@ -0,0 +1,52 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { DataPieChart } from '../DataPieChart';
+import { Icon } from '../Icon';
+import './Thumbnail.css';
+/**
+ * Thumbnail Component
+ *
+ * A single uploaded-photo tile used by `PhotoUploader`. Shows an image cropped
+ * to fill a fixed frame, with several behaviours driven by props:
+ *
+ * - **processing** — a dark overlay with an indeterminate (spinning) donut for
+ *   pre-upload work (e.g. HEIC conversion / compression).
+ * - **loading** — a dark overlay with a `DataPieChart` progress donut; swaps
+ *   seamlessly from `processing` (same ring).
+ * - **error** — a red tile with an error icon + caption (filename); the × stays.
+ * - **loaded, interactive** — hovering scales the image up ~8px (motion tokens)
+ *   and clicking activates `onClick` (e.g. to enlarge in a dialog).
+ * - **removable** — a tertiary × button in the top-right corner calls
+ *   `onRemove` to delete the photo.
+ *
+ * Tokens used: border-radius-lg, color-black-alpha-3, dialog-color-backdrop,
+ * button-color-tertiary-*, alias-color-state-error-*, alert-color-error-accent,
+ * motion-duration-micro, motion-easing-enter.
+ */
+export const Thumbnail = forwardRef(({ src, alt = '', shape = '4:3', loading = false, progress = 0, processing = false, error = false, caption, errorReason, onRemove, onClick, removeLabel = 'Remove photo', viewLabel = 'View photo', className = '', ...props }, ref) => {
+    const isBusy = loading || processing;
+    const isInteractive = !isBusy && !error && Boolean(onClick);
+    const showRemove = !isBusy && Boolean(onRemove);
+    const classes = [
+        'muka-thumbnail',
+        // '4:3' → '--4-3', '1:1' → '--1-1', 'ellipse' → '--ellipse'
+        `muka-thumbnail--${shape.replace(':', '-')}`,
+        loading && 'muka-thumbnail--loading',
+        processing && 'muka-thumbnail--processing',
+        error && 'muka-thumbnail--error',
+        isInteractive && 'muka-thumbnail--interactive',
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    const image = _jsx("img", { className: "muka-thumbnail__image", src: src, alt: alt });
+    const removeButton = showRemove ? (_jsx("button", { type: "button", className: "muka-thumbnail__remove", onClick: onRemove, "aria-label": removeLabel, children: _jsx(Icon, { name: "close", variant: "line", size: "xs" }) })) : null;
+    // The frame owns the shape's clip (border-radius + overflow), so the remove
+    // button — a sibling of the frame — is never clipped, even for the circle.
+    const frameContent = error ? (_jsxs("div", { className: "muka-thumbnail__error", children: [_jsx(Icon, { className: "muka-thumbnail__error-icon", name: "error-warning", variant: "fill", size: "lg", label: errorReason ?? 'Upload failed' }), caption && _jsx("span", { className: "muka-thumbnail__caption", children: caption })] })) : (_jsxs(_Fragment, { children: [isInteractive ? (_jsx("button", { type: "button", className: "muka-thumbnail__trigger", onClick: onClick, "aria-label": viewLabel, children: image })) : (image), isBusy && (_jsx("div", { className: "muka-thumbnail__overlay", children: _jsx(DataPieChart, { className: "muka-thumbnail__progress", value: progress, indeterminate: processing, size: 40, variant: "donut", "aria-label": processing ? 'Processing' : `Uploading, ${Math.round(progress)}%` }) }))] }));
+    return (_jsxs("div", { ref: ref, className: classes, title: error ? errorReason : undefined, ...props, children: [_jsx("div", { className: "muka-thumbnail__frame", children: frameContent }), removeButton] }));
+});
+Thumbnail.displayName = 'Thumbnail';
+export default Thumbnail;
+//# sourceMappingURL=Thumbnail.js.map

package/dist/esm/components/Thumbnail/Thumbnail.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Thumbnail.js","sourceRoot":"","sources":["../../../../components/Thumbnail/Thumbnail.tsx"],"names":[],"mappings":"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"}

package/dist/esm/components/Thumbnail/index.js

@@ -0,0 +1,2 @@
+export { Thumbnail } from './Thumbnail';
+//# sourceMappingURL=index.js.map

package/dist/esm/components/Thumbnail/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../components/Thumbnail/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAuB,MAAM,aAAa,CAAC"}

package/dist/esm/components/index.js

@@ -71,4 +71,6 @@ export { Combobox, } from './Combobox';
 export { SwipeActions, } from './SwipeActions';
 export { PullToRefresh } from './PullToRefresh';
 export { LicensePlateInput, } from './LicensePlateInput';
+export { Thumbnail } from './Thumbnail';
+export { PhotoUploader, } from './PhotoUploader';
 //# sourceMappingURL=index.js.map

package/dist/esm/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../components/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../components/index.ts"],"names":[],"mappings":"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"}

package/dist/styles/components/Alert.css

@@ -109,6 +109,13 @@
   height: 100%;
 }
 
+/* The leading icon and the dismiss (×) icon inherit the variant accent set on
+   their container, overriding the Icon component's default color. */
+.muka-alert__icon .muka-icon,
+.muka-alert__dismiss .muka-icon {
+  color: inherit;
+}
+
 /* Content */
 .muka-alert__content {
   flex: 1;

package/dist/styles/components/DataPieChart.css

@@ -27,6 +27,35 @@
   transition: stroke-dasharray 0.3s ease;
 }
 
+/* ─── Indeterminate (spinner) ─────────────────────────── */
+/* A masked ring filled with an angular (conic) gradient that rotates. The mask
+   band matches the donut geometry (r=40, strokeWidth=16 → 64%–96% of radius) so
+   it swaps seamlessly with the value-based progress donut. */
+.muka-data-pie-chart__spinner-track,
+.muka-data-pie-chart__spinner {
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  -webkit-mask: radial-gradient(farthest-side, transparent 63%, #000 65%, #000 95%, transparent 97%);
+  mask: radial-gradient(farthest-side, transparent 63%, #000 65%, #000 95%, transparent 97%);
+}
+
+.muka-data-pie-chart__spinner {
+  animation: muka-data-pie-chart-spin 0.9s linear infinite;
+}
+
+@keyframes muka-data-pie-chart-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .muka-data-pie-chart__spinner {
+    animation-duration: 2.5s;
+  }
+}
+
 .muka-data-pie-chart__value {
   position: absolute;
   inset: 0;

package/dist/styles/components/PhotoUploader.css

@@ -0,0 +1,125 @@
+/* PhotoUploader Component Styles - Using Muka Design Tokens */
+
+.muka-photo-uploader {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--spacing-4);
+  width: 100%;
+}
+
+/* Visually-hidden native file input */
+.muka-photo-uploader__input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* ─── Error feedback alert ────────────────────────────── */
+.muka-photo-uploader__alert {
+  width: 100%;
+}
+
+/* ─── Thumbnail grid ──────────────────────────────────── */
+.muka-photo-uploader__grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-3);
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.muka-photo-uploader__grid-item {
+  margin: 0;
+  padding: 0;
+}
+
+/* ─── Drop zone card ──────────────────────────────────── */
+.muka-photo-uploader__dropzone {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-4);
+  width: 100%;
+  padding: var(--card-padding-lg);
+  background-color: var(--card-color-default-background);
+  border: var(--border-width-regular, 1px) solid var(--card-color-default-border);
+  border-radius: var(--border-radius-lg);
+  cursor: pointer;
+  text-align: center;
+  transition: background-color var(--motion-duration-micro) var(--motion-easing-enter),
+    border-color var(--motion-duration-micro) var(--motion-easing-enter);
+}
+
+.muka-photo-uploader__dropzone:hover,
+.muka-photo-uploader__dropzone--active {
+  border-color: var(--color-border-focus);
+  background-color: var(--color-surface-level1);
+}
+
+.muka-photo-uploader__dropzone:focus-visible {
+  outline: 2px solid var(--color-border-focus);
+  outline-offset: 2px;
+}
+
+.muka-photo-uploader__dropzone-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-icon-subtle-default);
+}
+
+.muka-photo-uploader__dropzone-text {
+  font-family: var(--text-body-md-regular-fontFamily);
+  font-size: var(--text-body-md-regular-fontSize);
+  font-weight: var(--text-body-md-regular-fontWeight);
+  line-height: var(--text-body-md-regular-lineHeight);
+  color: var(--color-text-subtle-default);
+}
+
+/* ─── Disabled ────────────────────────────────────────── */
+.muka-photo-uploader--disabled .muka-photo-uploader__dropzone {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.muka-photo-uploader--disabled .muka-photo-uploader__dropzone:hover {
+  border-color: var(--card-color-default-border);
+  background-color: var(--card-color-default-background);
+}
+
+/* ─── Enlarged photo dialog ───────────────────────────── */
+.muka-photo-uploader__preview {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
+
+/* Fits the dialog while preserving the photo's original aspect ratio. */
+.muka-photo-uploader__preview-image {
+  display: block;
+  max-width: 100%;
+  max-height: 100%;
+  width: auto;
+  height: auto;
+  object-fit: contain;
+  border-radius: var(--border-radius-lg);
+}
+
+/* ─── Reduced motion ──────────────────────────────────── */
+@media (prefers-reduced-motion: reduce) {
+  .muka-photo-uploader__dropzone {
+    transition: none;
+  }
+}

package/dist/styles/components/ProgressAccordeon.css

@@ -22,11 +22,13 @@
   gap: var(--spacing-8);
 }
 
-/* Past-expanded groups header + slot with a tighter internal gap */
+/* Past steps group header + slot. The header↔content gap lives inside the
+   collapsing slot (as padding-top) so it collapses with the content, so the
+   body gap itself is 0. */
 .muka-progress-accordeon__body {
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-4);
+  gap: 0;
   width: 100%;
 }
 
@@ -159,6 +161,34 @@
   width: 100%;
 }
 
+/* ─── Collapse/expand animation (past steps) ─────────────────
+   The grid-template-rows 1fr → 0fr technique animates the content to/from its
+   intrinsic (auto) height with no magic max-height. Under prefers-reduced-motion
+   --motion-duration-view resolves to 0ms, so the toggle stays instant. */
+.muka-progress-accordeon__slot-wrapper {
+  display: grid;
+  grid-template-rows: 1fr;
+  transition: grid-template-rows var(--motion-duration-view) var(--motion-easing-enter);
+}
+
+.muka-progress-accordeon__slot-wrapper--collapsed {
+  grid-template-rows: 0fr;
+}
+
+/* The direct grid child clips and must have NO padding/border of its own —
+   min-height:0 lets it shrink, and with no padding the 0fr track reaches a true
+   0 height (padding on the item would leave a residual gap when collapsed). */
+.muka-progress-accordeon__slot-clip {
+  overflow: hidden;
+  min-height: 0;
+}
+
+/* The header↔content spacing lives on the inner slot (inside the clip region)
+   so it collapses together with the content. */
+.muka-progress-accordeon__slot-wrapper .muka-progress-accordeon__slot {
+  padding-top: var(--spacing-4);
+}
+
 /* ─── Action buttons (current state) ─────────────────────── */
 .muka-progress-accordeon__actions {
   display: flex;

package/dist/styles/components/Thumbnail.css

@@ -0,0 +1,171 @@
+/* Thumbnail Component Styles - Using Muka Design Tokens */
+
+.muka-thumbnail {
+  position: relative;
+  flex-shrink: 0;
+}
+
+/* The frame carries the border, background and shape clip. Keeping it separate
+   from the root lets the remove (×) button sit outside the clip (needed for the
+   circular/ellipse shape, whose corners would otherwise clip the button). */
+.muka-thumbnail__frame {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  border: var(--border-width-regular, 1px) solid var(--color-black-alpha-3);
+  border-radius: var(--border-radius-lg);
+  background-color: var(--color-surface-level1);
+}
+
+/* ─── Shapes ──────────────────────────────────────────── */
+.muka-thumbnail--4-3 {
+  width: 160px;
+  height: 120px;
+}
+
+.muka-thumbnail--1-1 {
+  width: 120px;
+  height: 120px;
+}
+
+.muka-thumbnail--ellipse {
+  width: 120px;
+  height: 120px;
+}
+
+.muka-thumbnail--ellipse .muka-thumbnail__frame {
+  border-radius: var(--border-radius-full);
+}
+
+/* Image fills the frame, cropped to cover. Sits at scale(1) by default so the
+   interactive hover zoom has a clean origin. */
+.muka-thumbnail__image {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+  transform-origin: center;
+  /* Micro-interaction: hover zoom eases out over the "micro" duration. */
+  transition: transform var(--motion-duration-micro) var(--motion-easing-enter);
+}
+
+/* ─── Interactive (click-to-enlarge) ──────────────────── */
+.muka-thumbnail__trigger {
+  position: absolute;
+  inset: 0;
+  padding: 0;
+  border: 0;
+  background: none;
+  cursor: pointer;
+  overflow: hidden;
+}
+
+.muka-thumbnail__trigger:focus-visible {
+  outline: 2px solid var(--color-border-focus);
+  outline-offset: -2px;
+}
+
+/* On hover the image scales up ~8px (160px → 168px) with an ease-out feel. */
+.muka-thumbnail--interactive:hover .muka-thumbnail__image {
+  transform: scale(1.05);
+}
+
+/* ─── Loading overlay + progress donut ────────────────── */
+.muka-thumbnail__overlay {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--dialog-color-backdrop);
+}
+
+.muka-thumbnail__progress {
+  width: 40px;
+  height: 40px;
+}
+
+/* ─── Error / corrupt state ───────────────────────────── */
+.muka-thumbnail--error .muka-thumbnail__frame {
+  background-color: var(--alias-color-state-error-muted);
+  border-color: var(--alias-color-state-error-default);
+}
+
+.muka-thumbnail__error {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-2);
+  padding: var(--spacing-3);
+  text-align: center;
+}
+
+.muka-thumbnail__error-icon {
+  color: var(--alert-color-error-accent);
+}
+
+.muka-thumbnail__caption {
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--alert-color-error-accent);
+  font-family: var(--text-body-sm-regular-fontFamily);
+  font-size: var(--text-body-sm-regular-fontSize);
+  font-weight: var(--text-body-sm-regular-fontWeight);
+  line-height: var(--text-body-sm-regular-lineHeight);
+}
+
+/* ─── Remove (×) button ───────────────────────────────── */
+.muka-thumbnail__remove {
+  position: absolute;
+  top: var(--spacing-2);
+  right: var(--spacing-2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--size-2xl);
+  height: var(--size-2xl);
+  padding: 0;
+  color: var(--button-color-tertiary-foreground-default);
+  background-color: var(--button-color-tertiary-background-default);
+  border: var(--border-width-regular, 1px) solid var(--button-color-tertiary-border-default);
+  border-radius: var(--border-radius-lg);
+  cursor: pointer;
+  transition: background-color var(--motion-duration-micro) var(--motion-easing-enter),
+    border-color var(--motion-duration-micro) var(--motion-easing-enter);
+}
+
+.muka-thumbnail__remove:hover {
+  color: var(--button-color-tertiary-foreground-hover);
+  background-color: var(--button-color-tertiary-background-hover);
+  border-color: var(--button-color-tertiary-border-hover);
+}
+
+.muka-thumbnail__remove:active {
+  color: var(--button-color-tertiary-foreground-pressed);
+  background-color: var(--button-color-tertiary-background-pressed);
+  border-color: var(--button-color-tertiary-border-pressed);
+}
+
+.muka-thumbnail__remove:focus-visible {
+  outline: 2px solid var(--color-border-focus);
+  outline-offset: 2px;
+}
+
+/* ─── Reduced motion ──────────────────────────────────── */
+@media (prefers-reduced-motion: reduce) {
+  .muka-thumbnail__image,
+  .muka-thumbnail__remove {
+    transition: none;
+  }
+
+  .muka-thumbnail--interactive:hover .muka-thumbnail__image {
+    transform: none;
+  }
+}