@caratlogic/design-system 0.1.9 → 0.1.11

package/dist/index.esm.js

@@ -5742,21 +5742,33 @@ const TextHyperlink = ({ to, href, children, showIcon = true, className, 'aria-l
     return (jsx("a", { href: href, target: "_blank", rel: "noopener noreferrer", "aria-label": ariaLabel, className: cn(LINK_CLASS, className), children: content }));
 };
 
+/**
+ * Track, thumb and travel, sized so the thumb keeps an even 2px inset on all
+ * four sides. Travel is stated in px rather than `calc(100% - Npx)`: that form
+ * resolves against the thumb's own width, so the gap silently changed whenever a
+ * thumb size did — `md` ended up with a 0.2px vertical inset and no gap at
+ * either end, which read as a thumb bulging out of its track.
+ *
+ *   inner = track - 2px border | thumb = innerHeight - 4 | on = innerWidth - thumb - 2
+ */
 const switchSizes = {
+    // track 28x16 → inner 26x14, thumb 10, on 14
     sm: {
         switch: 'h-4 w-7',
-        thumb: 'size-3',
-        translate: 'data-[state=checked]:translate-x-[calc(100%-1px)]',
+        thumb: 'size-2.5',
+        translate: 'data-[state=unchecked]:translate-x-[2px] data-[state=checked]:translate-x-[14px]',
     },
+    // track 32x20 → inner 30x18, thumb 14, on 14
     md: {
-        switch: 'h-[1.15rem] w-8',
-        thumb: 'size-4',
-        translate: 'data-[state=checked]:translate-x-[calc(100%-2px)]',
+        switch: 'h-5 w-8',
+        thumb: 'size-3.5',
+        translate: 'data-[state=unchecked]:translate-x-[2px] data-[state=checked]:translate-x-[14px]',
     },
+    // track 44x24 → inner 42x22, thumb 18, on 22
     lg: {
         switch: 'h-6 w-11',
-        thumb: 'size-5',
-        translate: 'data-[state=checked]:translate-x-[calc(100%-3px)]',
+        thumb: 'size-[1.125rem]',
+        translate: 'data-[state=unchecked]:translate-x-[2px] data-[state=checked]:translate-x-[22px]',
     },
 };
 
@@ -5767,7 +5779,7 @@ function ToggleSwitch({ checked = false, onCheckedChange, disabled = false, id,
         }
     };
     const currentSize = switchSizes[size];
-    const switchButton = (jsx("button", { type: "button", role: "switch", "aria-checked": checked, "data-state": checked ? 'checked' : 'unchecked', value: checked ? 'on' : 'off', "data-slot": "switch", disabled: disabled, onClick: handleClick, id: id, name: name, className: cn('peer inline-flex shrink-0 cursor-pointer items-center rounded-full border border-transparent transition-all outline-none', 'focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:ring-[3px]', 'disabled:cursor-not-allowed disabled:opacity-50', 'data-[state=unchecked]:bg-muted', 'data-[state=checked]:bg-primary', currentSize.switch, className), ...props, children: jsx("span", { "data-state": checked ? 'checked' : 'unchecked', "data-slot": "switch-thumb", className: cn('pointer-events-none block rounded-full ring-0 transition-transform', 'bg-card data-[state=checked]:bg-primary-foreground', 'data-[state=unchecked]:translate-x-0', currentSize.thumb, currentSize.translate) }) }));
+    const switchButton = (jsx("button", { type: "button", role: "switch", "aria-checked": checked, "data-state": checked ? 'checked' : 'unchecked', value: checked ? 'on' : 'off', "data-slot": "switch", disabled: disabled, onClick: handleClick, id: id, name: name, className: cn('peer inline-flex shrink-0 cursor-pointer items-center rounded-full border border-transparent transition-all outline-none', 'focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:ring-[3px]', 'disabled:cursor-not-allowed disabled:opacity-50', 'data-[state=unchecked]:bg-muted', 'data-[state=checked]:bg-primary', currentSize.switch, className), ...props, children: jsx("span", { "data-state": checked ? 'checked' : 'unchecked', "data-slot": "switch-thumb", className: cn('pointer-events-none block rounded-full ring-0 transition-transform', 'bg-card data-[state=checked]:bg-primary-foreground', currentSize.thumb, currentSize.translate) }) }));
     if (!label) {
         return switchButton;
     }
@@ -58436,33 +58448,39 @@ function ZoomSplitViewer({ src, alt = 'Preview', zoom = 2, lensSize = 160, paneO
                 }) })), isTouchDevice && (jsx("p", { className: `text-xs text-muted-foreground text-center mt-2 ${isMobile ? 'text-2xs' : ''}`, children: isMobile ? 'Touch & hold to zoom' : 'Touch and hold to zoom' }))] }));
 }
 
-const SIZE_MAP = {
-    sm: {
-        track: { width: 28, height: 16 },
-        thumb: 12,
-        on: 14,
-        off: 2,
-    },
-    md: {
-        track: { width: 44, height: 24 },
-        thumb: 20,
-        on: 22,
-        off: 2,
-    },
-    lg: {
-        track: { width: 52, height: 28 },
-        thumb: 24,
-        on: 26,
-        off: 2,
-    },
+/** 1px border on the track, and the gap between thumb and track. */
+const TRACK_BORDER = 1;
+const THUMB_INSET = 2;
+const TRACK_SIZE = {
+    sm: { width: 28, height: 16 },
+    md: { width: 44, height: 24 },
+    lg: { width: 52, height: 28 },
 };
+/**
+ * Thumb size and travel are derived from the track rather than listed per size:
+ * hardcoding them left the thumb 1px from the top and bottom but flush against
+ * the inner right edge when on, so it bulged past the track's rounded end.
+ * Deriving keeps the inset equal on all four sides at every size.
+ */
+function switchGeometry(size) {
+    const track = TRACK_SIZE[size];
+    const innerWidth = track.width - TRACK_BORDER * 2;
+    const innerHeight = track.height - TRACK_BORDER * 2;
+    const thumb = innerHeight - THUMB_INSET * 2;
+    return {
+        track,
+        thumb,
+        off: THUMB_INSET,
+        on: innerWidth - thumb - THUMB_INSET,
+    };
+}
 const Switch = React.forwardRef(({ checked = false, onCheckedChange, disabled = false, id, name, className, size = 'md', 'aria-label': ariaLabel, }, ref) => {
     const handleClick = () => {
         if (!disabled && onCheckedChange) {
             onCheckedChange(!checked);
         }
     };
-    const dims = SIZE_MAP[size];
+    const dims = switchGeometry(size);
     return (jsx("button", { type: "button", role: "switch", "aria-checked": checked, "aria-label": ariaLabel, "data-state": checked ? 'checked' : 'unchecked', disabled: disabled, onClick: handleClick, ref: ref, id: id, name: name, style: {
             width: dims.track.width,
             height: dims.track.height,
@@ -64623,6 +64641,8 @@ const FILE_TYPE_PATTERNS = {
     DOCUMENT: /\.(doc|docx|xls|xlsx|ppt|pptx)($|\?)/i,
     VIDEO: /\.(mp4|m4v|avi|mov|wmv|flv|webm|mkv|ogv|mpe?g|3gp)($|\?)/i,
     AUDIO: /\.(mp3|wav|flac|aac|ogg)($|\?)/i,
+    /** Interactive viewer pages (supplier 360° spinners), not media files. */
+    EMBED: /\.html?($|\?|#)/i,
 };
 const isFileType = {
     pdf: (url) => FILE_TYPE_PATTERNS.PDF.test(url),
@@ -64630,6 +64650,7 @@ const isFileType = {
     document: (url) => FILE_TYPE_PATTERNS.DOCUMENT.test(url),
     video: (url) => FILE_TYPE_PATTERNS.VIDEO.test(url),
     audio: (url) => FILE_TYPE_PATTERNS.AUDIO.test(url),
+    embed: (url) => FILE_TYPE_PATTERNS.EMBED.test(url),
 };
 
 /** Seek to ~1st frame for static video thumbnails (HTML5 media fragment). */
@@ -64645,6 +64666,12 @@ const createVideoMediaItem = (src, index, idPrefix = 'vid') => ({
     src,
     thumbSrc: videoThumbnailSrc(src),
 });
+/**
+ * True when a "video" is really an interactive viewer page. Supplier 360°
+ * spinners (Vision360, Varni) serve `text/html`, so `<video>` renders nothing
+ * and there is no frame to seek for a thumbnail — they need an iframe.
+ */
+const isEmbedMediaItem = (item) => item.kind === 'video' && isFileType.embed(item.src);
 const isPdfMediaItem = (item) => item.isPdf === true ||
     isFileType.pdf(item.src) ||
     (item.kind === 'certificate' && !isFileType.image(item.src));
@@ -65752,9 +65779,22 @@ const PdfPreview = ({ item }) => {
     const docsViewer = `https://docs.google.com/gview?embedded=1&url=${encodeURIComponent(item.src)}`;
     return (jsx("object", { data: item.src, type: "application/pdf", className: "h-full w-full bg-card", "aria-label": item.name ?? 'Certificate PDF', children: jsx("iframe", { title: item.name ?? 'Certificate PDF', className: "h-full w-full border-0 bg-card", src: docsViewer }) }));
 };
+/**
+ * Videos arrive as either a real file or a supplier's 360° viewer page. The URL
+ * settles most cases, but not every viewer ends in `.html` (v360, loupe360),
+ * so a `<video>` that fails to load falls back to the iframe as well. Remounted
+ * per selection via `key`, which resets that fallback.
+ */
+const VideoOrEmbed = ({ item }) => {
+    const [useEmbed, setUseEmbed] = useState(() => isEmbedMediaItem(item));
+    if (useEmbed) {
+        return (jsx("iframe", { src: item.src, title: item.name ?? '360\u00B0 viewer', className: "h-full w-full border-0 bg-card", allowFullScreen: true }));
+    }
+    return (jsx("video", { src: item.src, controls: true, onError: () => setUseEmbed(true), className: "h-full w-full object-cover", "aria-label": item.name ?? 'Video' }));
+};
 const MainMedia = ({ item }) => {
     if (item.kind === 'video') {
-        return (jsx("video", { src: item.src, controls: true, className: "h-full w-full object-cover", "aria-label": item.name ?? 'Video' }));
+        return jsx(VideoOrEmbed, { item: item });
     }
     if (isPdfMediaItem(item)) {
         return jsx(PdfPreview, { item: item });
@@ -65764,7 +65804,7 @@ const MainMedia = ({ item }) => {
 const Thumbnail = ({ item, isActive, onSelect }) => {
     const Icon = KIND_ICON[item.kind];
     const isPdf = isPdfMediaItem(item);
-    const isVideoWithoutThumb = item.kind === 'video' && !item.thumbSrc;
+    const isVideoWithoutThumb = item.kind === 'video' && (!item.thumbSrc || isEmbedMediaItem(item));
     return (jsxs("button", { type: "button", onClick: onSelect, "aria-label": `Select ${item.name ?? item.kind}`, "aria-pressed": isActive, className: cn('group relative flex aspect-square w-full cursor-pointer overflow-hidden rounded-lg border transition-colors', isActive
             ? 'border-primary ring-2 ring-primary/30'
             : 'border-border hover:border-primary/40'), children: [isPdf ? (jsxs("span", { className: "flex h-full w-full flex-col items-center justify-center gap-1 bg-muted p-2 text-muted-foreground", children: [jsx(Icon, { size: 20 }), jsx("span", { className: "text-[10px] font-medium uppercase", children: "PDF" })] })) : isVideoWithoutThumb ? (jsx("div", { className: "h-full w-full flex items-center justify-center bg-muted", children: jsx(Icon, { size: 24, className: "text-muted-foreground" }) })) : item.kind === 'video' ? (jsx("video", { src: item.thumbSrc ?? item.src, muted: true, playsInline: true, preload: "metadata", className: "h-full w-full object-cover", "aria-hidden": "true" })) : (jsx("img", { src: item.thumbSrc ?? item.src, alt: "", className: "h-full w-full object-cover" })), !isPdf && item.kind !== 'image' && !isVideoWithoutThumb && (jsx("span", { className: "pointer-events-none absolute inset-0 flex items-center justify-center bg-black/30 text-white", children: jsx(Icon, { size: 20 }) })), isVideoWithoutThumb && (jsx("span", { className: "pointer-events-none absolute inset-0 flex items-center justify-center bg-black/30" }))] }));
@@ -65785,7 +65825,7 @@ const MediaGallery = ({ items, thumbsVisible = 4, hideTabs = false, mainAspectCl
                 (kinds.length > 0 ? (jsx(Tabs, { value: activeKind ?? undefined, onValueChange: (v) => setActiveKind(v), tabStyle: "boxed", size: "sm", children: jsx(TabsList, { children: kinds.map((kind) => {
                             const Icon = KIND_ICON[kind];
                             return (jsx(TabsTrigger, { value: kind, icon: jsx(Icon, { size: 14 }), children: MEDIA_KIND_LABEL[kind] }, kind));
-                        }) }) })) : (jsx("div", { className: "h-9", "aria-hidden": "true" }))), selected && isZoomableImage ? (jsxs("div", { className: "relative", children: [jsx(ZoomSplitViewer, { src: selected.src, alt: selected.name ?? 'Media' }), !hideDownload && (jsx("div", { className: "absolute right-3 top-3 z-20", children: jsx("button", { type: "button", onClick: handleDownload, "aria-label": "Download media", className: "inline-flex h-9 w-9 cursor-pointer items-center justify-center rounded-md border border-border bg-card text-foreground transition-all hover:border-primary hover:shadow-[0_0_0_4px_rgba(49,122,81,0.10)] focus-visible:border-primary focus-visible:shadow-[0_0_0_4px_rgba(49,122,81,0.10)] focus-visible:outline-none", children: jsx(Download, { className: "h-4 w-4" }) }) }))] })) : selected ? (jsxs("div", { className: cn('relative overflow-hidden rounded-xl border border-border bg-muted', mainAspectClassName), children: [jsx(MainMedia, { item: selected }), !hideDownload && (jsx("div", { className: "absolute right-3 top-3", children: jsx("button", { type: "button", onClick: handleDownload, "aria-label": "Download media", className: "inline-flex h-9 w-9 cursor-pointer items-center justify-center rounded-md border border-border bg-card text-foreground transition-all hover:border-primary hover:shadow-[0_0_0_4px_rgba(49,122,81,0.10)] focus-visible:border-primary focus-visible:shadow-[0_0_0_4px_rgba(49,122,81,0.10)] focus-visible:outline-none", children: jsx(Download, { className: "h-4 w-4" }) }) }))] })) : (jsx("div", { className: cn('flex items-center justify-center rounded-xl border border-dashed border-border bg-muted/40 text-sm text-muted-foreground', mainAspectClassName), children: emptyText })), visibleItems.length > 1 && (jsx("div", { className: "grid gap-3", style: {
+                        }) }) })) : (jsx("div", { className: "h-9", "aria-hidden": "true" }))), selected && isZoomableImage ? (jsxs("div", { className: "relative", children: [jsx(ZoomSplitViewer, { src: selected.src, alt: selected.name ?? 'Media' }), !hideDownload && (jsx("div", { className: "absolute right-3 top-3 z-20", children: jsx("button", { type: "button", onClick: handleDownload, "aria-label": "Download media", className: "inline-flex h-9 w-9 cursor-pointer items-center justify-center rounded-md border border-border bg-card text-foreground transition-all hover:border-primary hover:shadow-[0_0_0_4px_rgba(49,122,81,0.10)] focus-visible:border-primary focus-visible:shadow-[0_0_0_4px_rgba(49,122,81,0.10)] focus-visible:outline-none", children: jsx(Download, { className: "h-4 w-4" }) }) }))] })) : selected ? (jsxs("div", { className: cn('relative overflow-hidden rounded-xl border border-border bg-muted', mainAspectClassName), children: [jsx(MainMedia, { item: selected }, selected.id), !hideDownload && !isEmbedMediaItem(selected) && (jsx("div", { className: "absolute right-3 top-3", children: jsx("button", { type: "button", onClick: handleDownload, "aria-label": "Download media", className: "inline-flex h-9 w-9 cursor-pointer items-center justify-center rounded-md border border-border bg-card text-foreground transition-all hover:border-primary hover:shadow-[0_0_0_4px_rgba(49,122,81,0.10)] focus-visible:border-primary focus-visible:shadow-[0_0_0_4px_rgba(49,122,81,0.10)] focus-visible:outline-none", children: jsx(Download, { className: "h-4 w-4" }) }) }))] })) : (jsx("div", { className: cn('flex items-center justify-center rounded-xl border border-dashed border-border bg-muted/40 text-sm text-muted-foreground', mainAspectClassName), children: emptyText })), visibleItems.length > 1 && (jsx("div", { className: "grid gap-3", style: {
                     gridTemplateColumns: `repeat(${Math.min(visibleItems.length, thumbsVisible)}, minmax(0, 1fr))`,
                 }, children: visibleItems.slice(0, thumbsVisible).map((item) => (jsx(Thumbnail, { item: item, isActive: selected?.id === item.id, onSelect: () => setSelected(item) }, item.id))) }))] }));
 };
@@ -66086,7 +66126,13 @@ function CreateFormPageHeader({ title, onBack, backLabel = 'Go back', }) {
 function CreateFormPageShell({ title, onBack, children, backLabel, scrollable = false, containerClassName, }) {
     const content = (jsxs("div", { className: cn('mx-auto w-full max-w-4xl px-4 py-4', containerClassName), children: [jsx(CreateFormPageHeader, { title: title, onBack: onBack, backLabel: backLabel }), children] }));
     if (scrollable) {
-        return (jsx("div", { className: "h-full min-h-0 overflow-y-auto bg-card", children: content }));
+        // `shrink-0` is the load-bearing part. As a flex item in the shell's
+        // `flex-col overflow-y-auto` parent this div was shrunk to the parent's
+        // height while its content overflowed, so the background stopped one
+        // screenful down and taller forms showed the page background below it.
+        // `min-h-full` alone cannot fix that — it resolves to the same shrunken
+        // height. The parent already scrolls, so no inner scroller is needed.
+        return (jsx("div", { className: "min-h-full shrink-0 bg-card", children: content }));
     }
     return content;
 }