@ship-it-ui/ui 0.0.12 → 0.0.14

package/dist/index.d.cts

@@ -5,7 +5,6 @@ import { useEffect, KeyboardEvent, RefObject, ButtonHTMLAttributes, ReactNode, H
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantProps } from 'class-variance-authority';
 import * as RadixCheckbox from '@radix-ui/react-checkbox';
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as RadixRadio from '@radix-ui/react-radio-group';
 import * as RadixSelect from '@radix-ui/react-select';
 import * as RadixSlider from '@radix-ui/react-slider';
@@ -291,7 +290,7 @@ interface FieldProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
  *     {(p) => <Input type="email" placeholder="me@org.com" {...p} />}
  *   </Field>
  */
-declare function Field({ label, hint, error, required, className, children, ...props }: FieldProps): react_jsx_runtime.JSX.Element;
+declare function Field({ label, hint, error, required, className, children, ...props }: FieldProps): react.JSX.Element;
 
 /**
  * Display-to-input rename primitive. Renders `value` as a static element until
@@ -504,7 +503,7 @@ interface SelectProps extends Omit<RadixSelect.SelectProps, 'children'> {
  * One-line Select. For composition (groups, separators), use the lower-level
  * `SelectRoot/Trigger/Content/Item` exports directly.
  */
-declare function Select({ options, placeholder, size, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, ...rootProps }: SelectProps): react_jsx_runtime.JSX.Element;
+declare function Select({ options, placeholder, size, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, ...rootProps }: SelectProps): react.JSX.Element;
 
 interface SliderProps extends Omit<RadixSlider.SliderProps, 'asChild' | 'value' | 'defaultValue' | 'onValueChange'> {
     /** Show the numeric value to the right of the track. */
@@ -944,7 +943,7 @@ interface DialogProps extends RadixDialog.DialogProps {
     /** When set, content is wrapped in a content frame; omit for full custom layout. */
     children?: ReactNode;
 }
-declare function Dialog({ title, description, footer, width, children, ...rootProps }: DialogProps): react_jsx_runtime.JSX.Element;
+declare function Dialog({ title, description, footer, width, children, ...rootProps }: DialogProps): react.JSX.Element;
 
 type DrawerSide = 'left' | 'right' | 'bottom';
 interface DrawerProps extends RadixDialog.DialogProps {
@@ -1042,7 +1041,7 @@ interface HoverCardProps extends RadixHoverCard.HoverCardProps {
     content: ReactNode;
 }
 /** Convenience wrapper — pass `trigger` and `content` as props. */
-declare function HoverCard({ trigger, content, ...rootProps }: HoverCardProps): react_jsx_runtime.JSX.Element;
+declare function HoverCard({ trigger, content, ...rootProps }: HoverCardProps): react.JSX.Element;
 
 declare const PopoverRoot: react.FC<RadixPopover.PopoverProps>;
 declare const PopoverTrigger: react.ForwardRefExoticComponent<RadixPopover.PopoverTriggerProps & react.RefAttributes<HTMLButtonElement>>;
@@ -1086,7 +1085,7 @@ interface ToastContextValue {
  */
 declare function ToastProvider({ children }: {
     children: ReactNode;
-}): react_jsx_runtime.JSX.Element;
+}): react.JSX.Element;
 declare function useToast(): ToastContextValue;
 interface ToastCardProps {
     toast: ToastEntry;
@@ -1132,7 +1131,7 @@ interface SimpleTooltipProps {
  * (multiple triggers in a list, shared delay config), use the lower-level
  * `Tooltip` + `TooltipTrigger` + `TooltipContent` primitives.
  */
-declare function SimpleTooltip({ content, children, side, delayDuration, }: SimpleTooltipProps): react_jsx_runtime.JSX.Element;
+declare function SimpleTooltip({ content, children, side, delayDuration, }: SimpleTooltipProps): react.JSX.Element;
 
 /**
  * Alert — inline messaging block. Four tones (accent / ok / warn / err) with a
@@ -1423,7 +1422,7 @@ interface DataTableProps<T> {
 }
 declare function DataTable<T>(props: DataTableProps<T> & {
     ref?: Ref<HTMLTableElement>;
-}): react_jsx_runtime.JSX.Element;
+}): react.JSX.Element;
 
 /** A `{from, to}` date range used by `Calendar` and `DateRangePicker`. */
 interface DateRange {
@@ -1590,9 +1589,10 @@ interface ListingCardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'childre
     /**
      * Wrap the photo carousel past the boundaries (next from the last
      * photo goes to the first). Default `true` — marketplace photo
-     * browsing expects looping. Pass `false` to restore stop-at-end.
+     * browsing expects looping. Pass `false` to restore stop-at-end, or
+     * `'circular'` / `'sweep'` to pick the loop variant explicitly.
      */
-    loop?: boolean;
+    loop?: boolean | 'circular' | 'sweep';
     /** Listing title — e.g. "Sun-soaked cabin in Marin". */
     title: ReactNode;
     /** Optional eyebrow text above the title (location, listing type). */
@@ -1751,9 +1751,11 @@ interface ListingDetailProps {
      * Wrap the gallery carousel and the fullscreen lightbox past the
      * boundaries (next from the last photo goes to the first). Default
      * `true` — marketplace photo browsing expects looping. One prop
-     * drives both surfaces.
+     * drives both surfaces. Pass `'circular'` or `'sweep'` to pick the
+     * gallery's loop variant explicitly; both forward as truthy to the
+     * lightbox.
      */
-    loop?: boolean;
+    loop?: boolean | 'circular' | 'sweep';
     /** Listing title — e.g. "Sun-soaked cabin in Marin". */
     title: ReactNode;
     /** Optional eyebrow above the title — listing type, location. */

package/dist/index.d.ts

@@ -5,7 +5,6 @@ import { useEffect, KeyboardEvent, RefObject, ButtonHTMLAttributes, ReactNode, H
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantProps } from 'class-variance-authority';
 import * as RadixCheckbox from '@radix-ui/react-checkbox';
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as RadixRadio from '@radix-ui/react-radio-group';
 import * as RadixSelect from '@radix-ui/react-select';
 import * as RadixSlider from '@radix-ui/react-slider';
@@ -291,7 +290,7 @@ interface FieldProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
  *     {(p) => <Input type="email" placeholder="me@org.com" {...p} />}
  *   </Field>
  */
-declare function Field({ label, hint, error, required, className, children, ...props }: FieldProps): react_jsx_runtime.JSX.Element;
+declare function Field({ label, hint, error, required, className, children, ...props }: FieldProps): react.JSX.Element;
 
 /**
  * Display-to-input rename primitive. Renders `value` as a static element until
@@ -504,7 +503,7 @@ interface SelectProps extends Omit<RadixSelect.SelectProps, 'children'> {
  * One-line Select. For composition (groups, separators), use the lower-level
  * `SelectRoot/Trigger/Content/Item` exports directly.
  */
-declare function Select({ options, placeholder, size, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, ...rootProps }: SelectProps): react_jsx_runtime.JSX.Element;
+declare function Select({ options, placeholder, size, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, ...rootProps }: SelectProps): react.JSX.Element;
 
 interface SliderProps extends Omit<RadixSlider.SliderProps, 'asChild' | 'value' | 'defaultValue' | 'onValueChange'> {
     /** Show the numeric value to the right of the track. */
@@ -944,7 +943,7 @@ interface DialogProps extends RadixDialog.DialogProps {
     /** When set, content is wrapped in a content frame; omit for full custom layout. */
     children?: ReactNode;
 }
-declare function Dialog({ title, description, footer, width, children, ...rootProps }: DialogProps): react_jsx_runtime.JSX.Element;
+declare function Dialog({ title, description, footer, width, children, ...rootProps }: DialogProps): react.JSX.Element;
 
 type DrawerSide = 'left' | 'right' | 'bottom';
 interface DrawerProps extends RadixDialog.DialogProps {
@@ -1042,7 +1041,7 @@ interface HoverCardProps extends RadixHoverCard.HoverCardProps {
     content: ReactNode;
 }
 /** Convenience wrapper — pass `trigger` and `content` as props. */
-declare function HoverCard({ trigger, content, ...rootProps }: HoverCardProps): react_jsx_runtime.JSX.Element;
+declare function HoverCard({ trigger, content, ...rootProps }: HoverCardProps): react.JSX.Element;
 
 declare const PopoverRoot: react.FC<RadixPopover.PopoverProps>;
 declare const PopoverTrigger: react.ForwardRefExoticComponent<RadixPopover.PopoverTriggerProps & react.RefAttributes<HTMLButtonElement>>;
@@ -1086,7 +1085,7 @@ interface ToastContextValue {
  */
 declare function ToastProvider({ children }: {
     children: ReactNode;
-}): react_jsx_runtime.JSX.Element;
+}): react.JSX.Element;
 declare function useToast(): ToastContextValue;
 interface ToastCardProps {
     toast: ToastEntry;
@@ -1132,7 +1131,7 @@ interface SimpleTooltipProps {
  * (multiple triggers in a list, shared delay config), use the lower-level
  * `Tooltip` + `TooltipTrigger` + `TooltipContent` primitives.
  */
-declare function SimpleTooltip({ content, children, side, delayDuration, }: SimpleTooltipProps): react_jsx_runtime.JSX.Element;
+declare function SimpleTooltip({ content, children, side, delayDuration, }: SimpleTooltipProps): react.JSX.Element;
 
 /**
  * Alert — inline messaging block. Four tones (accent / ok / warn / err) with a
@@ -1423,7 +1422,7 @@ interface DataTableProps<T> {
 }
 declare function DataTable<T>(props: DataTableProps<T> & {
     ref?: Ref<HTMLTableElement>;
-}): react_jsx_runtime.JSX.Element;
+}): react.JSX.Element;
 
 /** A `{from, to}` date range used by `Calendar` and `DateRangePicker`. */
 interface DateRange {
@@ -1590,9 +1589,10 @@ interface ListingCardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'childre
     /**
      * Wrap the photo carousel past the boundaries (next from the last
      * photo goes to the first). Default `true` — marketplace photo
-     * browsing expects looping. Pass `false` to restore stop-at-end.
+     * browsing expects looping. Pass `false` to restore stop-at-end, or
+     * `'circular'` / `'sweep'` to pick the loop variant explicitly.
      */
-    loop?: boolean;
+    loop?: boolean | 'circular' | 'sweep';
     /** Listing title — e.g. "Sun-soaked cabin in Marin". */
     title: ReactNode;
     /** Optional eyebrow text above the title (location, listing type). */
@@ -1751,9 +1751,11 @@ interface ListingDetailProps {
      * Wrap the gallery carousel and the fullscreen lightbox past the
      * boundaries (next from the last photo goes to the first). Default
      * `true` — marketplace photo browsing expects looping. One prop
-     * drives both surfaces.
+     * drives both surfaces. Pass `'circular'` or `'sweep'` to pick the
+     * gallery's loop variant explicitly; both forward as truthy to the
+     * lightbox.
      */
-    loop?: boolean;
+    loop?: boolean | 'circular' | 'sweep';
     /** Listing title — e.g. "Sun-soaked cabin in Marin". */
     title: ReactNode;
     /** Optional eyebrow above the title — listing type, location. */

package/dist/index.js

@@ -3109,7 +3109,9 @@ var Carousel = forwardRef44(function Carousel2({
   });
   const viewportRef = useRef8(null);
   const internalScrollRef = useRef8(false);
-  const wrapInProgressRef = useRef8(false);
+  const goToInProgressRef = useRef8(false);
+  const wrapInFlightRef = useRef8(null);
+  const rebaseConsumeRef = useRef8(null);
   const activeIdx = active ?? 0;
   const domIndexFor = useCallback9((real) => isLooping ? real + 1 : real, [isLooping]);
   const goTo = useCallback9(
@@ -3118,13 +3120,32 @@ var Carousel = forwardRef44(function Carousel2({
       setActive(next);
       const node = viewportRef.current;
       if (node) {
+        const width = node.clientWidth;
+        if (isLooping && wrapInFlightRef.current !== null && width > 0) {
+          const rebaseTarget = wrapInFlightRef.current === N + 1 ? 0 : wrapInFlightRef.current === 0 ? N + 1 : null;
+          if (rebaseTarget !== null) {
+            const rebaseSlide = node.children[rebaseTarget];
+            if (rebaseSlide) {
+              internalScrollRef.current = true;
+              rebaseConsumeRef.current = rebaseTarget;
+              rebaseSlide.scrollIntoView({
+                behavior: "instant",
+                block: "nearest",
+                inline: "start"
+              });
+            }
+          }
+          wrapInFlightRef.current = null;
+        }
         const isNextWrap = loopMode === "circular" && activeIdx === N - 1 && i === activeIdx + 1;
         const isPrevWrap = loopMode === "circular" && activeIdx === 0 && i === activeIdx - 1;
         const targetDom = isNextWrap ? N + 1 : isPrevWrap ? 0 : domIndexFor(next);
         const slide = node.children[targetDom];
         if (slide) {
           internalScrollRef.current = true;
-          if (isNextWrap || isPrevWrap) wrapInProgressRef.current = true;
+          goToInProgressRef.current = true;
+          if (isNextWrap) wrapInFlightRef.current = N + 1;
+          else if (isPrevWrap) wrapInFlightRef.current = 0;
           slide.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "start" });
         }
       }
@@ -3139,37 +3160,59 @@ var Carousel = forwardRef44(function Carousel2({
       if (width === 0) return;
       const domIdx = Math.round(node.scrollLeft / width);
       if (!isLooping) {
+        if (goToInProgressRef.current) {
+          if (domIdx === activeIdx) goToInProgressRef.current = false;
+          return;
+        }
         if (domIdx !== activeIdx) setActive(domIdx);
         return;
       }
+      if (rebaseConsumeRef.current !== null) {
+        if (domIdx === rebaseConsumeRef.current) return;
+        rebaseConsumeRef.current = null;
+      }
       if (domIdx === 0) {
-        if (wrapInProgressRef.current && node.scrollLeft > 1) return;
+        if (goToInProgressRef.current && node.scrollLeft > 1) return;
         const realTwin = node.children[N];
         if (realTwin) {
           internalScrollRef.current = true;
           realTwin.scrollIntoView({ behavior: "instant", block: "nearest", inline: "start" });
         }
         if (activeIdx !== N - 1) setActive(N - 1);
-        wrapInProgressRef.current = false;
+        goToInProgressRef.current = false;
+        wrapInFlightRef.current = null;
         return;
       }
       if (domIdx === N + 1) {
-        if (wrapInProgressRef.current && node.scrollLeft < (N + 1) * width - 1) return;
+        if (goToInProgressRef.current && node.scrollLeft < (N + 1) * width - 1) return;
         const realTwin = node.children[1];
         if (realTwin) {
           internalScrollRef.current = true;
           realTwin.scrollIntoView({ behavior: "instant", block: "nearest", inline: "start" });
         }
         if (activeIdx !== 0) setActive(0);
-        wrapInProgressRef.current = false;
+        goToInProgressRef.current = false;
+        wrapInFlightRef.current = null;
         return;
       }
-      if (wrapInProgressRef.current) return;
       const realIdx = domIdx - 1;
+      if (goToInProgressRef.current) {
+        if (realIdx === activeIdx) goToInProgressRef.current = false;
+        return;
+      }
       if (realIdx !== activeIdx) setActive(realIdx);
     };
+    const onPointerDown = () => {
+      goToInProgressRef.current = false;
+      wrapInFlightRef.current = null;
+      rebaseConsumeRef.current = null;
+    };
     node.addEventListener("scroll", onScroll, { passive: true });
-    return () => node.removeEventListener("scroll", onScroll);
+    node.addEventListener("pointerdown", onPointerDown, { passive: true });
+    return () => {
+      node.removeEventListener("scroll", onScroll);
+      node.removeEventListener("pointerdown", onPointerDown);
+    };
   }, [activeIdx, isLooping, N, setActive]);
   useEffect8(() => {
     if (internalScrollRef.current) {
@@ -3305,19 +3348,32 @@ var Carousel = forwardRef44(function Carousel2({
             }
           )
         ] }),
-        renderThumbnail && /* @__PURE__ */ jsx45("div", { className: "mt-2 flex gap-2 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", children: items.map((item, i) => /* @__PURE__ */ jsx45(
-          "button",
-          {
-            type: "button",
-            "aria-label": `Show slide ${i + 1}`,
-            onClick: () => goTo(i),
-            className: cn(
-              "shrink-0 cursor-pointer overflow-hidden rounded transition-opacity",
-              i === activeIdx ? "ring-accent opacity-100 ring-2" : "opacity-60 hover:opacity-100"
-            ),
-            children: renderThumbnail(item, i)
-          },
-          i
+        renderThumbnail && /* @__PURE__ */ jsx45("div", { className: "-mx-0.5 mt-1.5 flex gap-2 overflow-x-auto p-0.5 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", children: items.map((item, i) => (
+          // The active ring is applied to the rendered thumbnail (the
+          // button's first child) rather than the button itself, so it
+          // traces whatever border-radius the consumer's thumbnail
+          // already has. Picking a fixed radius here would always be
+          // wrong for one consumer or another — `rounded-lg` thumbs got
+          // a 4px-radius ring; future thumbs could be circular or
+          // square. `box-shadow` (what `ring-2` compiles to) follows
+          // the child's `border-radius` automatically, so this is
+          // self-adjusting.
+          /* @__PURE__ */ jsx45(
+            "button",
+            {
+              type: "button",
+              "aria-label": `Show slide ${i + 1}`,
+              onClick: () => goTo(i),
+              "data-active": i === activeIdx ? "true" : void 0,
+              className: cn(
+                "shrink-0 cursor-pointer transition-opacity",
+                "[&[data-active]>*]:ring-accent [&[data-active]>*]:ring-2",
+                i === activeIdx ? "opacity-100" : "opacity-60 hover:opacity-100"
+              ),
+              children: renderThumbnail(item, i)
+            },
+            i
+          )
         )) })
       ]
     }
@@ -5076,7 +5132,7 @@ var ListingDetail = forwardRef52(function ListingDetail2({
         items: photos,
         index: galleryIndex,
         onIndexChange: setGalleryIndex,
-        loop,
+        loop: Boolean(loop),
         title: lightboxTitle,
         renderItem: (src, i) => renderPhoto ? renderPhoto(src, i, "lightbox") : /* @__PURE__ */ jsx54("img", { src, alt: "", className: "max-h-[88vh] max-w-[92vw] object-contain" })
       }