@anker-in/headless-ui 1.3.78 → 1.3.79

package/dist/esm/hooks/useCarouselPlayback.d.ts

@@ -0,0 +1,110 @@
+import { type MutableRefObject } from 'react';
+import type { Swiper as SwiperType } from 'swiper';
+/**
+ * 2-state carousel playback machine (final interaction matrix 2026-10-12):
+ *  - AUTOPLAYING: the hook's own countdown timer drives slideNext; progress fill runs
+ *  - STOPPED: manual pause via the ⏸/▶ button; resumed via ▶ — OR implicitly
+ *    reset to AUTOPLAYING by ANY manual navigation (arrow / swipe / replay)
+ * PC hover has NO effect on the carousel (removed in the interaction-matrix revision).
+ *
+ * 2026-10-10 beta-bugfix round: the countdown timer is SELF-OWNED
+ * (setTimeout + remaining-ms bookkeeping) instead of delegating to Swiper's
+ * Autoplay module, whose internal transitionend/touchEnd resume() resurrected
+ * stopped carousels (CODING #1452/#1460) and fell back to the module default
+ * delay on frames without data-swiper-autoplay (#1453). Keyboard focus within
+ * the carousel freezes the countdown until focus leaves (WCAG 2.2.2, #1461).
+ *
+ * 2026-10-12 final matrix: navigation no longer stops autoplay — the earlier
+ * swipe→STOPPED (D4) / arrow-keeps-STOPPED semantics were superseded by the
+ * product matrix (arrow/swipe/replay all reset to AUTOPLAYING + fresh budget).
+ */
+export type CarouselPlaybackState = 'AUTOPLAYING' | 'STOPPED';
+/**
+ * What caused a slide change. `initial` is reserved for the consumer's mount
+ * emission; the hook itself only produces autoplay / arrow / swipe.
+ */
+export type CarouselSlideTrigger = 'initial' | 'autoplay' | 'arrow' | 'swipe';
+export interface UseCarouselPlaybackOptions {
+    /** Total slide count */
+    frameCount: number;
+    /** Resolve the effective autoplay interval (seconds) for a frame; undefined = the frame holds */
+    resolveFrameIntervalSec: (index: number) => number | undefined;
+    /** Master gate: autoplay runs only when true (valid intervals AND frameCount > 1) */
+    isAutoplayEnabled: boolean;
+    /** Ref holding the live Swiper instance (populated via handleSwiperInit) */
+    swiperRef: MutableRefObject<SwiperType | null>;
+    /** Noun used in the aria-live announcement: `${slideStatusLabel} ${n} / ${total}` */
+    slideStatusLabel: string;
+    /**
+     * Optional media choreography on slide change (e.g. pause outgoing videos,
+     * play the incoming one). Image-only carousels omit this.
+     */
+    onSlideMediaSync?: (newIndex: number) => void;
+    /** Fired when the active slide changes, with the cause of the change */
+    onSlideChange?: (newIndex: number, trigger: CarouselSlideTrigger) => void;
+    /** Fired on arrow navigation, before Swiper confirms the transition */
+    onArrowNavigate?: (direction: 'prev' | 'next', fromIndex: number, toIndex: number) => void;
+    /** Fired when the pause/play button toggles playback (paused = entered STOPPED) */
+    onPauseToggle?: (paused: boolean, activeIndex: number) => void;
+    /**
+     * 1488: per-frame gate — video frames return true so the countdown RESTARTS
+     * with a fresh full budget when the frame's video actually starts playing
+     * (slow networks: the poster window no longer eats the frame's interval).
+     * If the video never plays, the activation-time budget still ticks away as
+     * the fallback deadline, so the frame can never stall forever.
+     */
+    delaysCountdownForVideo?: (index: number) => boolean;
+}
+export interface UseCarouselPlaybackResult {
+    /** Attach to the carousel root element (merge with any forwarded ref) */
+    rootRef: MutableRefObject<Element | null>;
+    activeIndex: number;
+    playbackState: CarouselPlaybackState;
+    /** Bump-key for the progress-fill CSS animation; changes restart the fill */
+    resetNonce: number;
+    /** aria-live announcement text for manual slide switches (D16) */
+    announcement: string;
+    /** Effective autoplay interval (seconds) of the active frame; undefined = hold */
+    activeFrameIntervalSec: number | undefined;
+    /**
+     * True while the frame countdown is actually ticking. Drives the progress
+     * fill's animationPlayState so the visual fill and the real timer can never
+     * desync (unlike the old Swiper-module design).
+     */
+    isTimerRunning: boolean;
+    /** Wire to Swiper's onSwiper — stores the instance and syncs slide a11y */
+    handleSwiperInit: (swiper: SwiperType) => void;
+    handleSlideChange: (swiper: SwiperType) => void;
+    /** Wire to Swiper's onSlideChangeTransitionEnd — re-syncs inert/aria-hidden after loopFix */
+    handleTransitionEnd: (swiper: SwiperType) => void;
+    handleSliderFirstMove: (swiper: SwiperType, event: TouchEvent) => void;
+    goToSlide: (direction: 'prev' | 'next') => void;
+    /** Jump to an arbitrary frame (progress-segment click). Same reset semantics as arrows. */
+    goToSlideIndex: (index: number) => void;
+    handlePausePlayClick: () => void;
+    /**
+     * Replay path (final matrix): reset to AUTOPLAYING and restart the current
+     * frame with a fresh full countdown (进度圆点从0重新填充).
+     */
+    resumeWithFreshCountdown: () => void;
+    /** 1488: 视频帧开始真实播放时调用——重启该帧倒计时（每次进场仅生效一次） */
+    notifyVideoPlaying: (index: number) => void;
+    /** Attach to the carousel root: keyboard focus freezes the countdown (#1461) */
+    handleFocus: () => void;
+    handleBlur: (e: React.FocusEvent<HTMLElement>) => void;
+}
+/**
+ * useCarouselPlayback — shared carousel interaction state machine + countdown.
+ *
+ * Owns: playback state machine, self-managed countdown timer (with true
+ * freeze/resume), pause/play toggle, IntersectionObserver viewport gating
+ * (D17), keyboard-focus gating (WCAG 2.2.2), touch-swipe detection (D4),
+ * aria-live announcements (D16), slide inert/aria-hidden sync (#1461) and the
+ * progress-fill restart nonce.
+ *
+ * Video-specific behavior (play-once on STOPPED, replay button, multi-theme)
+ * is intentionally NOT here — consumers wire it off the returned
+ * playbackState/activeIndex so image-only carousels get a clean subset.
+ */
+export declare const useCarouselPlayback: (options: UseCarouselPlaybackOptions) => UseCarouselPlaybackResult;
+export default useCarouselPlayback;

package/dist/esm/hooks/useCarouselPlayback.js

@@ -0,0 +1 @@
+"use client";import{useCallback as o,useEffect as u,useRef as t,useState as y}from"react";const ue=x=>{const{frameCount:R,resolveFrameIntervalSec:B,isAutoplayEnabled:S,swiperRef:s,slideStatusLabel:Y}=x,C=t(null),E=t(!1),T=t(!1),[c,L]=y(0),[$,g]=y(0),[H,k]=y(""),[w,p]=y(S?"AUTOPLAYING":"STOPPED"),[q,K]=y(!0),[z,D]=y(!1),O=t(w);u(()=>{O.current=w},[w]);const a=t(c);u(()=>{a.current=c},[c]);const h=t(R);u(()=>{h.current=R});const v=t(S);u(()=>{v.current=S});const I=t(Y);u(()=>{I.current=Y});const l=t(x);u(()=>{l.current=x});const d=B(c),N=S&&R>1&&w==="AUTOPLAYING"&&q&&!z&&d!==void 0,m=t(null),V=t(0),W=t(0),F=t(null),b=t({index:c,interval:d}),M=t(null),_=o(e=>{l.current.delaysCountdownForVideo?.(e)&&e===a.current&&M.current!==e&&(M.current=e,b.current={index:-1,interval:void 0},g(n=>n+1))},[]),A=o(()=>{m.current!=null&&(clearTimeout(m.current),m.current=null)},[]),U=o(()=>{if(m.current!=null){const e=Date.now()-V.current;F.current=Math.max(0,W.current-e),A()}},[A]),j=o(()=>{m.current=null;const e=s.current;!e||e.destroyed||e.slideNext()},[s]);u(()=>{const e=b.current.index===-1;if((b.current.index!==c||b.current.interval!==d)&&(b.current={index:c,interval:d},F.current=null,e||(M.current=null)),!N||d===void 0){U();return}const n=F.current??d*1e3;return W.current=n,V.current=Date.now(),m.current=setTimeout(j,n),U},[N,c,d,$,j,U]),u(()=>A,[A]),u(()=>{const e=C.current;if(!e||typeof IntersectionObserver>"u")return;const n=new IntersectionObserver(r=>{const i=r[0];i&&K(i.isIntersecting)},{threshold:.1});return n.observe(e),()=>n.disconnect()},[]);const f=o(()=>{const e=C.current;if(!e||typeof e.querySelectorAll!="function")return;const n=e.querySelectorAll(".swiper-slide");!n.length||!Array.from(n).some(i=>i.classList.contains("swiper-slide-active"))||n.forEach(i=>{const P=i.classList.contains("swiper-slide-active");i.toggleAttribute("inert",!P),P?i.removeAttribute("aria-hidden"):i.setAttribute("aria-hidden","true")})},[]),J=o(e=>{s.current=e,f()},[s,f]);u(()=>{f()},[f]);const Q=o(()=>{f()},[f]),X=o(e=>{const n=e.realIndex;l.current.onSlideMediaSync?.(n);let r=null;E.current?(E.current=!1,k(`${I.current} ${n+1} / ${h.current}`),v.current&&p("AUTOPLAYING"),r="swipe"):T.current?(T.current=!1,r="arrow"):O.current==="AUTOPLAYING"&&(r="autoplay"),L(n),r&&l.current.onSlideChange?.(n,r),f()},[f]),Z=o(e=>{const n=h.current;if(n<2)return;const r=a.current,i=e==="next"?(r+1)%n:(r-1+n)%n;k(`${I.current} ${i+1} / ${n}`),L(i),T.current=!0,e==="next"?s.current?.slideNext():s.current?.slidePrev(),v.current&&(p("AUTOPLAYING"),g(P=>P+1)),l.current.onArrowNavigate?.(e,r,i)},[s]),ee=o(e=>{const n=h.current;n<2||e===a.current||e<0||e>=n||(k(`${I.current} ${e+1} / ${n}`),L(e),T.current=!0,s.current?.slideToLoop(e),v.current&&(p("AUTOPLAYING"),g(r=>r+1)),l.current.onArrowNavigate?.(e>a.current?"next":"prev",a.current,e))},[s]),ne=o(()=>{v.current&&(b.current={index:-1,interval:void 0},p("AUTOPLAYING"),g(e=>e+1))},[]),re=o(()=>{v.current&&(O.current==="STOPPED"?(p("AUTOPLAYING"),l.current.onPauseToggle?.(!1,a.current)):(p("STOPPED"),l.current.onPauseToggle?.(!0,a.current)))},[]),te=o((e,n)=>{const r=n.pointerType;E.current=r!=="mouse"},[]),G=t(!1);u(()=>{const e=r=>{r.key==="Tab"&&(G.current=!0)},n=()=>{G.current=!1};return window.addEventListener("keydown",e),window.addEventListener("pointerdown",n),()=>{window.removeEventListener("keydown",e),window.removeEventListener("pointerdown",n)}},[]);const oe=o(()=>{G.current&&D(!0)},[]),ie=o(e=>{e.currentTarget.contains(e.relatedTarget)||D(!1)},[]);return{rootRef:C,activeIndex:c,playbackState:w,resetNonce:$,announcement:H,activeFrameIntervalSec:d,isTimerRunning:N,handleSwiperInit:J,handleSlideChange:X,handleTransitionEnd:Q,handleSliderFirstMove:te,goToSlide:Z,goToSlideIndex:ee,handlePausePlayClick:re,resumeWithFreshCountdown:ne,notifyVideoPlaying:_,handleFocus:oe,handleBlur:ie}};var ce=ue;export{ce as default,ue as useCarouselPlayback};

package/dist/esm/index.d.ts

@@ -10,6 +10,10 @@ export { useGridRowCount } from './hooks/useGridRowCount.js';
 export { useIntersectionObserverDelay } from './hooks/useIntersectionObserver.js';
 export { useRollout } from './hooks/useRollout.js';
 export { useViewItemList } from './hooks/useViewItemList.js';
+export { useCarouselPlayback } from './hooks/useCarouselPlayback.js';
+export type { CarouselPlaybackState, CarouselSlideTrigger, UseCarouselPlaybackOptions, UseCarouselPlaybackResult, } from './hooks/useCarouselPlayback.js';
 export { cn, getLocalizedPath, noop } from './helpers/index.js';
 export { formatPrice, languageTerritory, PRICE_SYMBOL } from './helpers/index.js';
 export { LocalizedLink, type LocalizedLinkProps } from './shared/LocalizedLink.js';
+export { CarouselArrows, CarouselProgressControls } from './shared/CarouselControls.js';
+export type { CarouselArrowsProps, CarouselProgressControlsProps } from './shared/CarouselControls.js';

package/dist/esm/index.js

@@ -1 +1 @@
-export*from"./components/index.js";import{gaTrack as t}from"./shared/track.js";import{trackUrlRef as s,buildTrackingRef as a}from"./shared/trackUrlRef.js";import{default as m}from"./hooks/useCountDown.js";import{useDraggableScroll as f}from"./hooks/useDraggableScroll.js";import{useExposure as u}from"./hooks/useExposure.js";import{useGridRowCount as c}from"./hooks/useGridRowCount.js";import{useIntersectionObserverDelay as g}from"./hooks/useIntersectionObserver.js";import{useRollout as C}from"./hooks/useRollout.js";import{useViewItemList as L}from"./hooks/useViewItemList.js";import{cn as R,getLocalizedPath as b,noop as T}from"./helpers/index.js";import{formatPrice as D,languageTerritory as E,PRICE_SYMBOL as I}from"./helpers/index.js";import{LocalizedLink as v}from"./shared/LocalizedLink.js";export{v as LocalizedLink,I as PRICE_SYMBOL,a as buildTrackingRef,R as cn,D as formatPrice,t as gaTrack,b as getLocalizedPath,E as languageTerritory,T as noop,s as trackUrlRef,m as useCountDown,f as useDraggableScroll,u as useExposure,c as useGridRowCount,g as useIntersectionObserverDelay,C as useRollout,L as useViewItemList};
+export*from"./components/index.js";import{gaTrack as s}from"./shared/track.js";import{trackUrlRef as t,buildTrackingRef as p}from"./shared/trackUrlRef.js";import{default as u}from"./hooks/useCountDown.js";import{useDraggableScroll as m}from"./hooks/useDraggableScroll.js";import{useExposure as f}from"./hooks/useExposure.js";import{useGridRowCount as C}from"./hooks/useGridRowCount.js";import{useIntersectionObserverDelay as P}from"./hooks/useIntersectionObserver.js";import{useRollout as d}from"./hooks/useRollout.js";import{useViewItemList as k}from"./hooks/useViewItemList.js";import{useCarouselPlayback as L}from"./hooks/useCarouselPlayback.js";import{cn as T,getLocalizedPath as h,noop as w}from"./helpers/index.js";import{formatPrice as j,languageTerritory as z,PRICE_SYMBOL as A}from"./helpers/index.js";import{LocalizedLink as E}from"./shared/LocalizedLink.js";import{CarouselArrows as O,CarouselProgressControls as v}from"./shared/CarouselControls.js";export{O as CarouselArrows,v as CarouselProgressControls,E as LocalizedLink,A as PRICE_SYMBOL,p as buildTrackingRef,T as cn,j as formatPrice,s as gaTrack,h as getLocalizedPath,z as languageTerritory,w as noop,t as trackUrlRef,L as useCarouselPlayback,u as useCountDown,m as useDraggableScroll,f as useExposure,C as useGridRowCount,P as useIntersectionObserverDelay,d as useRollout,k as useViewItemList};

package/dist/esm/shared/CarouselControls.d.ts

@@ -0,0 +1,75 @@
+export declare const CarouselChevronLeft: () => import("react/jsx-runtime").JSX.Element;
+export declare const CarouselChevronRight: () => import("react/jsx-runtime").JSX.Element;
+export declare const PauseIcon: () => import("react/jsx-runtime").JSX.Element;
+export declare const PlayIcon: () => import("react/jsx-runtime").JSX.Element;
+export interface CarouselArrowsProps {
+    onPrev: () => void;
+    onNext: () => void;
+    prevLabel: string;
+    nextLabel: string;
+}
+/**
+ * Prev/next arrow overlay. Visible ≥1025 only (D12): hidden below laptop,
+ * revealed on group hover / focus-within above it. Rendered at z-20, above
+ * any blockLink overlay (z-10).
+ */
+export declare const CarouselArrows: ({ onPrev, onNext, prevLabel, nextLabel }: CarouselArrowsProps) => import("react/jsx-runtime").JSX.Element;
+export interface CarouselCornerToggleProps {
+    isPaused: boolean;
+    onToggle: () => void;
+    /** aria-label while paused (shows ▶) */
+    pausedLabel: string;
+    /** aria-label while playing (shows ⏸) */
+    playingLabel: string;
+    /** Class prefix, e.g. 'hero-banner' / 'secondary-banner' */
+    classPrefix: string;
+    /** Same theme axis as the progress controls; defaults to 'light' */
+    theme?: 'light' | 'dark';
+}
+/**
+ * 合并后的暂停/播放按钮（交互收敛 2026-10）：轮播与视频共用一个右下角
+ * 圆钮——尺寸与样式与原 dots 区 ⏸ 完全一致（size-8 玻璃材质）。调用方按
+ * 当前帧语义决定 isPaused 的状态源（轮播状态机 或 视频真实状态）与点击
+ * 行为（同停同播 或 纯视频直控）。
+ */
+export declare const CarouselCornerToggle: ({ isPaused, onToggle, pausedLabel, playingLabel, classPrefix, theme, }: CarouselCornerToggleProps) => import("react/jsx-runtime").JSX.Element;
+export interface CarouselProgressControlsProps {
+    frameCount: number;
+    activeIndex: number;
+    /** Change restarts the active segment's fill animation */
+    resetNonce: number;
+    /** Active frame interval (seconds); undefined = static full segment */
+    activeFrameIntervalSec: number | undefined;
+    isAutoplayEnabled: boolean;
+    /** True while the countdown timer is actually ticking (drives fill playState) */
+    isTimerRunning: boolean;
+    /**
+     * Optional segment click-to-jump handler (1467): when provided, progress
+     * segments become focusable buttons that jump to the frame (SecondaryBanner
+     * legacy behavior). Omit to keep segments display-only (HeroBanner).
+     */
+    onSegmentClick?: (index: number) => void;
+    /** Accessible label per segment, e.g. (i) => `Go to slide ${i + 1}` */
+    segmentLabel?: (index: number) => string;
+    /** Class/keyframes prefix, e.g. 'hero-banner' / 'secondary-banner' */
+    classPrefix: string;
+    /**
+     * Frame theme (same axis as the banner content): 'light' = dark text over
+     * light media → dark-glass controls; 'dark' = white text over dark media
+     * → light-glass controls. Defaults to 'light'.
+     */
+    theme?: 'light' | 'dark';
+}
+/**
+ * Segmented progress capsule, centered at the bottom (Figma 6349:5115:
+ * capsule 144×32 with an inset 112×8 indicator row, 8px gap). Material
+ * follows the frame theme: black-20% mask + dark icon on light media,
+ * white-20% mask + white icon on dark media. The active segment is a
+ * stretched white bar whose fill is a CSS animation keyed by
+ * `${activeIndex}-${resetNonce}`; animationPlayState freezes it outside
+ * AUTOPLAYING so the fill and the Swiper timer stay in sync — resume paths
+ * never bump resetNonce, so progress is never lost.
+ * 暂停/播放按钮已迁移至右下角 CarouselCornerToggle（交互收敛 2026-10）。
+ */
+export declare const CarouselProgressControls: ({ frameCount, activeIndex, resetNonce, activeFrameIntervalSec, isAutoplayEnabled, isTimerRunning, onSegmentClick, segmentLabel, classPrefix, theme, }: CarouselProgressControlsProps) => import("react/jsx-runtime").JSX.Element;
+export default CarouselProgressControls;

package/dist/esm/shared/CarouselControls.js

@@ -0,0 +1 @@
+"use client";import{jsx as e,jsxs as c}from"react/jsx-runtime";import{cn as a}from"../helpers/index.js";const y=()=>c("svg",{className:"lg-desktop:size-14 size-10",viewBox:"0 0 40 40",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",children:[e("circle",{cx:"20",cy:"20",r:"20",fill:"black",fillOpacity:"0.5"}),e("path",{d:"M23 14L17 19.5L23 25",stroke:"white",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})]}),k=()=>c("svg",{className:"lg-desktop:size-14 size-10",viewBox:"0 0 40 40",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",children:[e("circle",{cx:"20",cy:"20",r:"20",fill:"black",fillOpacity:"0.5"}),e("path",{d:"M17 14L23 19.5L17 25",stroke:"white",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})]}),x=()=>c("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",children:[e("rect",{x:"4",y:"3",width:"2.6",height:"10",rx:"1",fill:"currentColor"}),e("rect",{x:"9.4",y:"3",width:"2.6",height:"10",rx:"1",fill:"currentColor"})]}),C=()=>e("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",children:e("path",{d:"M5 3.5v9c0 .8.9 1.3 1.6.9l7-4.5c.6-.4.6-1.4 0-1.8l-7-4.5c-.7-.4-1.6.1-1.6.9Z",fill:"currentColor"})}),z=({onPrev:i,onNext:r,prevLabel:n,nextLabel:l})=>c("div",{className:"lg-desktop:px-8 pointer-events-none absolute inset-0 z-20 flex items-center justify-between px-4",children:[e("button",{type:"button",className:"laptop:flex pointer-events-auto hidden scale-95 items-center justify-center opacity-0 transition-all duration-300 ease-out hover:scale-105 focus-visible:scale-105 focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/80 active:scale-95 group-focus-within:scale-100 group-focus-within:opacity-100 group-hover:scale-100 group-hover:opacity-100",onClick:i,"aria-label":n,children:e(y,{})}),e("button",{type:"button",className:"laptop:flex pointer-events-auto hidden scale-95 items-center justify-center opacity-0 transition-all duration-300 ease-out hover:scale-105 focus-visible:scale-105 focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/80 active:scale-95 group-focus-within:scale-100 group-focus-within:opacity-100 group-hover:scale-100 group-hover:opacity-100",onClick:r,"aria-label":l,children:e(k,{})})]}),P=({isPaused:i,onToggle:r,pausedLabel:n,playingLabel:l,classPrefix:u,theme:g="light"})=>{const o=g==="light";return e("button",{type:"button",className:a(`${u}-corner-toggle lg-desktop:bottom-6 lg-desktop:right-8 absolute bottom-4 right-4 z-20 flex size-8 items-center justify-center rounded-full transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/80`,o?"bg-black/20 text-black/60 hover:bg-black/30 active:bg-black/40":"bg-white/20 text-white hover:bg-white/30 active:bg-white/40"),"aria-label":i?n:l,onClick:r,children:i?e(C,{}):e(x,{})})},N=({frameCount:i,activeIndex:r,resetNonce:n,activeFrameIntervalSec:l,isAutoplayEnabled:u,isTimerRunning:g,onSegmentClick:o,segmentLabel:v,classPrefix:t,theme:m="light"})=>{const w=`@keyframes ${t}-progress-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}`,p=m==="light";return c("div",{className:a(`${t}-controls lg-desktop:bottom-6 absolute bottom-4 left-1/2 z-20 flex -translate-x-1/2 items-center gap-2`),children:[e("style",{children:w}),e("div",{className:a(`${t}-progress flex h-8 items-center gap-2 rounded-full px-4`,p?"bg-black/20":"bg-white/20"),"aria-hidden":o?void 0:"true",role:o?"group":void 0,"aria-label":o?"Slides":void 0,children:Array.from({length:i}).map((L,s)=>{const b=s===r,d=a(`${t}-progress-segment block size-2 rounded-full`,p?"bg-black/40":"bg-white/40"),f=a(`${t}-progress-segment block h-2 w-8 overflow-hidden rounded-full`,p?"bg-black/40":"bg-white/40"),h=u&&l!==void 0?e("span",{className:`${t}-progress-fill block size-full origin-left rounded-full bg-white`,style:{animation:`${t}-progress-fill ${l*1e3}ms linear forwards`,animationPlayState:g?"running":"paused"}},`${r}-${n}`):e("span",{className:`${t}-progress-fill block size-full rounded-full bg-white`});return o?e("button",{type:"button","aria-label":v?.(s)??`Go to slide ${s+1}`,"aria-current":b?"true":void 0,onClick:()=>o(s),className:"flex items-center justify-center focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/80",children:b?e("span",{className:f,children:h}):e("span",{className:d})},s):b?e("span",{className:f,children:h},s):e("span",{className:d},s)})})]})};var j=N;export{z as CarouselArrows,y as CarouselChevronLeft,k as CarouselChevronRight,P as CarouselCornerToggle,N as CarouselProgressControls,x as PauseIcon,C as PlayIcon,j as default};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@anker-in/headless-ui",
-  "version": "1.3.78",
+  "version": "1.3.79",
   "type": "commonjs",
   "main": "./dist/cjs/index.js",
   "types": "./dist/cjs/index.d.ts",

package/style.css

@@ -545,9 +545,6 @@ video {
 .\!bottom-0 {
   bottom: 0px !important;
 }
-.\!bottom-4 {
-  bottom: 1rem !important;
-}
 .\!bottom-\[70px\] {
   bottom: 70px !important;
 }
@@ -776,9 +773,6 @@ video {
 .z-\[200\] {
   z-index: 200;
 }
-.z-\[20\] {
-  z-index: 20;
-}
 .z-\[210\] {
   z-index: 210;
 }
@@ -1255,6 +1249,9 @@ video {
 .aspect-\[358\/480\] {
   aspect-ratio: 358/480;
 }
+.aspect-\[390\/1440\] {
+  aspect-ratio: 390/1440;
+}
 .aspect-\[390\/240\] {
   aspect-ratio: 390/240;
 }
@@ -5636,6 +5633,9 @@ video {
   .tablet\:aspect-\[704\/480\] {
     aspect-ratio: 704/480;
   }
+  .tablet\:aspect-\[768\/1320\] {
+    aspect-ratio: 768/1320;
+  }
   .tablet\:aspect-\[768\/240\] {
     aspect-ratio: 768/240;
   }
@@ -6195,6 +6195,9 @@ video {
   .laptop\:top-\[76px\] {
     top: 76px;
   }
+  .laptop\:top-\[min\(50\%\2c 50vh\)\] {
+    top: min(50%, 50vh);
+  }
   .laptop\:-order-1 {
     order: -1;
   }
@@ -6333,20 +6336,20 @@ video {
   .laptop\:aspect-\[1024\/384\] {
     aspect-ratio: 1024/384;
   }
+  .laptop\:aspect-\[1024\/400\] {
+    aspect-ratio: 1024/400;
+  }
+  .laptop\:aspect-\[1024\/432\] {
+    aspect-ratio: 1024/432;
+  }
   .laptop\:aspect-\[1024\/480\] {
     aspect-ratio: 1024/480;
   }
   .laptop\:aspect-\[1024\/520\] {
     aspect-ratio: 1024/520;
   }
-  .laptop\:aspect-\[1920\/480\] {
-    aspect-ratio: 1920/480;
-  }
-  .laptop\:aspect-\[1920\/720\] {
-    aspect-ratio: 1920/720;
-  }
-  .laptop\:aspect-\[1920\/930\] {
-    aspect-ratio: 1920/930;
+  .laptop\:aspect-\[1024\/864\] {
+    aspect-ratio: 1024/864;
   }
   .laptop\:aspect-\[2\/1\] {
     aspect-ratio: 2/1;
@@ -7545,12 +7548,24 @@ video {
   .desktop\:aspect-\[1312\/512\] {
     aspect-ratio: 1312/512;
   }
+  .desktop\:aspect-\[1440\/1152\] {
+    aspect-ratio: 1440/1152;
+  }
   .desktop\:aspect-\[1440\/384\] {
     aspect-ratio: 1440/384;
   }
+  .desktop\:aspect-\[1440\/480\] {
+    aspect-ratio: 1440/480;
+  }
   .desktop\:aspect-\[1440\/512\] {
     aspect-ratio: 1440/512;
   }
+  .desktop\:aspect-\[1440\/560\] {
+    aspect-ratio: 1440/560;
+  }
+  .desktop\:aspect-\[1440\/576\] {
+    aspect-ratio: 1440/576;
+  }
   .desktop\:aspect-\[1440\/640\] {
     aspect-ratio: 1440/640;
   }
@@ -7563,15 +7578,6 @@ video {
   .desktop\:aspect-\[19\/9\] {
     aspect-ratio: 19/9;
   }
-  .desktop\:aspect-\[1920\/480\] {
-    aspect-ratio: 1920/480;
-  }
-  .desktop\:aspect-\[1920\/720\] {
-    aspect-ratio: 1920/720;
-  }
-  .desktop\:aspect-\[1920\/930\] {
-    aspect-ratio: 1920/930;
-  }
   .desktop\:aspect-\[316\/384\] {
     aspect-ratio: 316/384;
   }
@@ -8281,6 +8287,9 @@ video {
   .lg-desktop\:aspect-\[1664\/640\] {
     aspect-ratio: 1664/640;
   }
+  .lg-desktop\:aspect-\[1920\/1440\] {
+    aspect-ratio: 1920/1440;
+  }
   .lg-desktop\:aspect-\[1920\/480\] {
     aspect-ratio: 1920/480;
   }