@skdx/react 0.26.0

package/dist/card/CardHeader.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import type { CardHeaderProps } from './types.js';
+/**
+ * Container for a {@link Card}'s title and description. Renders a plain
+ * `<div>`, typically placed as the first child of `Card`.
+ *
+ * @example
+ * ```tsx
+ * <Card>
+ *   <CardHeader>
+ *     <CardTitle>Project Alpha</CardTitle>
+ *     <CardDescription>Last updated 2 days ago</CardDescription>
+ *   </CardHeader>
+ * </Card>
+ * ```
+ */
+export declare const CardHeader: React.ForwardRefExoticComponent<Omit<CardHeaderProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/card/CardTitle.d.cts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import type { CardTitleProps } from './types.cjs';
+/**
+ * A {@link Card}'s heading. Renders an `<h3>`, typically inside `CardHeader`.
+ *
+ * @example
+ * ```tsx
+ * <CardHeader>
+ *   <CardTitle>Project Alpha</CardTitle>
+ * </CardHeader>
+ * ```
+ */
+export declare const CardTitle: React.ForwardRefExoticComponent<Omit<CardTitleProps, "ref"> & React.RefAttributes<HTMLHeadingElement>>;

package/dist/card/CardTitle.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import type { CardTitleProps } from './types.js';
+/**
+ * A {@link Card}'s heading. Renders an `<h3>`, typically inside `CardHeader`.
+ *
+ * @example
+ * ```tsx
+ * <CardHeader>
+ *   <CardTitle>Project Alpha</CardTitle>
+ * </CardHeader>
+ * ```
+ */
+export declare const CardTitle: React.ForwardRefExoticComponent<Omit<CardTitleProps, "ref"> & React.RefAttributes<HTMLHeadingElement>>;

package/dist/card/index.d.cts

@@ -0,0 +1,7 @@
+export * from './Card.cjs';
+export { CardHeader } from './CardHeader.cjs';
+export { CardTitle } from './CardTitle.cjs';
+export { CardDescription } from './CardDescription.cjs';
+export { CardContent } from './CardContent.cjs';
+export { CardFooter } from './CardFooter.cjs';
+export type { CardProps, CardHeaderProps, CardTitleProps, CardDescriptionProps, CardContentProps, CardFooterProps, } from './types.cjs';

package/dist/card/index.d.ts

@@ -0,0 +1,7 @@
+export * from './Card.js';
+export { CardHeader } from './CardHeader.js';
+export { CardTitle } from './CardTitle.js';
+export { CardDescription } from './CardDescription.js';
+export { CardContent } from './CardContent.js';
+export { CardFooter } from './CardFooter.js';
+export type { CardProps, CardHeaderProps, CardTitleProps, CardDescriptionProps, CardContentProps, CardFooterProps, } from './types.js';

package/dist/card/types.d.cts

@@ -0,0 +1,19 @@
+import type { PrimitivePropsWithRef } from '../utils/primitive.cjs';
+/** Props for the {@link Card} root. */
+export interface CardProps extends PrimitivePropsWithRef<'div'> {
+}
+/** Props for {@link CardHeader}, a container for `CardTitle`/`CardDescription`. */
+export interface CardHeaderProps extends PrimitivePropsWithRef<'div'> {
+}
+/** Props for {@link CardTitle}, the card's heading. */
+export interface CardTitleProps extends PrimitivePropsWithRef<'h3'> {
+}
+/** Props for {@link CardDescription}, supporting text below the title. */
+export interface CardDescriptionProps extends PrimitivePropsWithRef<'p'> {
+}
+/** Props for {@link CardContent}, the card's main body. */
+export interface CardContentProps extends PrimitivePropsWithRef<'div'> {
+}
+/** Props for {@link CardFooter}, a container for actions at the bottom of the card. */
+export interface CardFooterProps extends PrimitivePropsWithRef<'div'> {
+}

package/dist/card/types.d.ts

@@ -0,0 +1,19 @@
+import type { PrimitivePropsWithRef } from '../utils/primitive.js';
+/** Props for the {@link Card} root. */
+export interface CardProps extends PrimitivePropsWithRef<'div'> {
+}
+/** Props for {@link CardHeader}, a container for `CardTitle`/`CardDescription`. */
+export interface CardHeaderProps extends PrimitivePropsWithRef<'div'> {
+}
+/** Props for {@link CardTitle}, the card's heading. */
+export interface CardTitleProps extends PrimitivePropsWithRef<'h3'> {
+}
+/** Props for {@link CardDescription}, supporting text below the title. */
+export interface CardDescriptionProps extends PrimitivePropsWithRef<'p'> {
+}
+/** Props for {@link CardContent}, the card's main body. */
+export interface CardContentProps extends PrimitivePropsWithRef<'div'> {
+}
+/** Props for {@link CardFooter}, a container for actions at the bottom of the card. */
+export interface CardFooterProps extends PrimitivePropsWithRef<'div'> {
+}

package/dist/carousel/Carousel.cjs

@@ -0,0 +1 @@
+"use strict";var Ne=Object.create;var b=Object.defineProperty;var Me=Object.getOwnPropertyDescriptor;var He=Object.getOwnPropertyNames;var De=Object.getPrototypeOf,Le=Object.prototype.hasOwnProperty;var Te=(t,o)=>{for(var e in o)b(t,e,{get:o[e],enumerable:!0})},q=(t,o,e,n)=>{if(o&&typeof o=="object"||typeof o=="function")for(let s of He(o))!Le.call(t,s)&&s!==e&&b(t,s,{get:()=>o[s],enumerable:!(n=Me(o,s))||n.enumerable});return t};var C=(t,o,e)=>(e=t!=null?Ne(De(t)):{},q(o||!t||!t.__esModule?b(e,"default",{value:t,enumerable:!0}):e,t)),Se=t=>q(b({},"__esModule",{value:!0}),t);var Ve={};Te(Ve,{Carousel:()=>ee,CarouselContent:()=>D,CarouselItem:()=>L,CarouselNext:()=>S,CarouselPlayPause:()=>K,CarouselPrevious:()=>T,CarouselProvider:()=>j,useCarouselContext:()=>i});module.exports=Se(Ve);var a=C(require("react"),1),J=require("../utils/clamp.cjs"),W=require("../utils/createContext.cjs"),h=require("../utils/direction.cjs"),X=require("../utils/part.cjs"),d=require("../utils/primitive.cjs"),Z=require("../utils/useControllableState.cjs"),H=require("react/jsx-runtime"),Ke="(prefers-reduced-motion: reduce)";function G(){return typeof window>"u"||typeof window.matchMedia!="function"?!1:window.matchMedia(Ke).matches}var[j,i]=(0,W.createSafeContext)("Carousel"),ee=a.forwardRef(({value:t,defaultValue:o=0,onValueChange:e,orientation:n="horizontal",loop:s=!1,slidesPerPage:l=1,slidesPerMove:xe=1,spacing:w,autoplay:N=!1,autoplayInterval:V=5e3,style:B,...f},ye)=>{let[x=0,u]=(0,Z.useControllableState)({prop:t,defaultProp:o,onChange:e}),[A,z]=a.useState([]),ve=(0,h.useDirection)(),v=Math.max(1,Math.floor(l)),y=Math.max(1,Math.floor(xe)),c=A.length,m=Math.max(0,c-v),ge=a.useCallback(r=>{z(p=>p.includes(r)?p:[...p,r])},[]),Re=a.useCallback(r=>{z(p=>p.filter(M=>M!==r))},[]),be=a.useCallback(r=>{u((0,J.clamp)(r,0,m))},[u,m]),g=a.useCallback(()=>{if(c===0)return;let r=x+y;r<=m?u(r):u(s?0:m)},[c,x,y,m,s,u]),F=a.useCallback(()=>{if(c===0)return;let r=x-y;r>=0?u(r):u(s?m:0)},[c,x,y,m,s,u]),[R,O]=a.useState(()=>N&&!G()),[he,U]=a.useState(!1),[Ie,_]=a.useState(!1),[Ee,ke]=a.useState(!1),Q=he||Ie||Ee;a.useEffect(()=>{O(N&&!G())},[N]),a.useEffect(()=>{if(typeof document>"u")return;let r=()=>ke(document.visibilityState==="hidden");return r(),document.addEventListener("visibilitychange",r),()=>document.removeEventListener("visibilitychange",r)},[]),a.useEffect(()=>{if(!R||Q||c<=v)return;let r=setInterval(g,V);return()=>clearInterval(r)},[R,Q,c,v,g,V]);let we=r=>{if(c===0)return;let p=n==="horizontal"?"ArrowRight":"ArrowDown",M=n==="horizontal"?"ArrowLeft":"ArrowUp",$=(0,h.directionalKey)(r.key,r.currentTarget,ve);$===p?(r.preventDefault(),g()):$===M&&(r.preventDefault(),F())},Y=typeof w=="number"?`${w}px`:w;return(0,H.jsx)(j,{value:x,setValue:u,orientation:n,loop:s,itemIds:A,registerItem:ge,unregisterItem:Re,slidesPerPage:v,slidesPerMove:y,maxIndex:m,scrollToIndex:be,next:g,previous:F,playing:R,setPlaying:O,children:(0,H.jsx)(d.Primitive.div,{role:"region","aria-roledescription":"carousel","data-orientation":n,"data-state":R?"playing":"paused",style:Y===void 0?B:{...B,"--skdx-carousel-spacing":Y},...f,...(0,X.skdxPart)("carousel","root",f.className),ref:ye,onKeyDown:(0,d.composeEventHandlers)(f.onKeyDown,we),onPointerEnter:(0,d.composeEventHandlers)(f.onPointerEnter,()=>U(!0)),onPointerLeave:(0,d.composeEventHandlers)(f.onPointerLeave,()=>U(!1)),onFocus:(0,d.composeEventHandlers)(f.onFocus,()=>_(!0)),onBlur:(0,d.composeEventHandlers)(f.onBlur,()=>_(!1))})})});ee.displayName="Carousel";var te=C(require("react"),1),oe=require("../utils/part.cjs"),re=require("../utils/primitive.cjs");var se=require("react/jsx-runtime"),D=te.forwardRef((t,o)=>{let e=i("CarouselContent");return(0,se.jsx)(re.Primitive.div,{"data-orientation":e.orientation,...t,...(0,oe.skdxPart)("carousel","content",t.className),ref:o})});D.displayName="CarouselContent";var P=C(require("react"),1),ae=require("../utils/part.cjs"),ne=require("../utils/primitive.cjs");var ie=require("react/jsx-runtime"),L=P.forwardRef((t,o)=>{let e=i("CarouselItem"),n=P.useId(),s=e.itemIds.indexOf(n),l=s>=e.value&&s<e.value+e.slidesPerPage;return P.useEffect(()=>(e.registerItem(n),()=>e.unregisterItem(n)),[n]),(0,ie.jsx)(ne.Primitive.div,{role:"group","aria-roledescription":"slide","data-state":l?"active":"inactive","data-orientation":e.orientation,hidden:!l,...t,...(0,ae.skdxPart)("carousel","item",t.className),ref:o})});L.displayName="CarouselItem";var le=C(require("react"),1),ue=require("../utils/part.cjs"),I=require("../utils/primitive.cjs");var ce=require("react/jsx-runtime"),T=le.forwardRef((t,o)=>{let e=i("CarouselPrevious"),n=e.itemIds.length,s=e.value<=0,l=n===0||s&&!e.loop;return(0,ce.jsx)(I.Primitive.button,{type:"button",disabled:l,"data-disabled":l?"":void 0,...t,...(0,ue.skdxPart)("carousel","previous",t.className),ref:o,onClick:(0,I.composeEventHandlers)(t.onClick,e.previous)})});T.displayName="CarouselPrevious";var me=C(require("react"),1),de=require("../utils/part.cjs"),E=require("../utils/primitive.cjs");var fe=require("react/jsx-runtime"),S=me.forwardRef((t,o)=>{let e=i("CarouselNext"),n=e.itemIds.length,s=e.value>=e.maxIndex,l=n===0||s&&!e.loop;return(0,fe.jsx)(E.Primitive.button,{type:"button",disabled:l,"data-disabled":l?"":void 0,...t,...(0,de.skdxPart)("carousel","next",t.className),ref:o,onClick:(0,E.composeEventHandlers)(t.onClick,e.next)})});S.displayName="CarouselNext";var pe=C(require("react"),1),Ce=require("../utils/part.cjs"),k=require("../utils/primitive.cjs");var Pe=require("react/jsx-runtime"),K=pe.forwardRef((t,o)=>{let e=i("CarouselPlayPause");return(0,Pe.jsx)(k.Primitive.button,{type:"button","data-state":e.playing?"playing":"paused",...t,...(0,Ce.skdxPart)("carousel","play-pause",t.className),ref:o,onClick:(0,k.composeEventHandlers)(t.onClick,()=>e.setPlaying(!e.playing))})});K.displayName="CarouselPlayPause";0&&(module.exports={Carousel,CarouselContent,CarouselItem,CarouselNext,CarouselPlayPause,CarouselPrevious,CarouselProvider,useCarouselContext});

package/dist/carousel/Carousel.d.cts

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import type { CarouselContextValue, CarouselProps } from './types.cjs';
+/**
+ * Reads the slide state a {@link Carousel} publishes to everything inside it:
+ * the active index and `setValue`, `slidesPerPage`/`slidesPerMove` and the
+ * derived `maxIndex`, the autoplay setting, and the movement methods
+ * `scrollToIndex`, `next` and `previous`.
+ *
+ * Public on purpose — this is how a component of your own rendered inside the
+ * carousel (a thumbnail strip, a slide counter) drives it, and it is React's
+ * half of the cross-framework contract that also exposes `scrollToIndex` as an
+ * element method on `<skdx-carousel>`.
+ *
+ * Pass the calling component's own name. It is what the thrown error names when
+ * the hook runs outside a `Carousel` — it throws there rather than handing back
+ * `undefined` for a field access to fail on later.
+ */
+export declare const CarouselProvider: {
+    (props: CarouselContextValue & {
+        children: React.ReactNode;
+    }): React.JSX.Element;
+    displayName: string;
+}, useCarouselContext: (consumerName: string) => CarouselContextValue;
+/**
+ * Root of a carousel: `role="region"` with `aria-roledescription="carousel"`
+ * and `data-orientation`. Owns the index of the first visible slide and hands
+ * it down to `CarouselContent` / `CarouselItem` / `CarouselPrevious` /
+ * `CarouselNext` / `CarouselPlayPause` via context.
+ *
+ * Slide order comes from the mount order of `CarouselItem` children, not an
+ * explicit index prop on each — the `slidesPerPage` slides starting at `value`
+ * render, the rest are `hidden`, and there's no track/transform-based sliding.
+ * Supports Arrow Left/Right (or Up/Down when `orientation="vertical"`) when the
+ * root is focused, in addition to `CarouselPrevious`/`CarouselNext`; each step
+ * moves `slidesPerMove` slides. Works controlled (`value` + `onValueChange`) or
+ * uncontrolled (`defaultValue`).
+ *
+ * `autoplay` is off by default and, when on, pauses on hover, on focus, and
+ * while the page is hidden, and never runs under `prefers-reduced-motion`
+ * (WCAG 2.2.2) — pair it with a `CarouselPlayPause` control.
+ *
+ * @example
+ * ```tsx
+ * <Carousel loop slidesPerPage={2} spacing={16}>
+ *   <CarouselContent>
+ *     <CarouselItem>Slide 1</CarouselItem>
+ *     <CarouselItem>Slide 2</CarouselItem>
+ *     <CarouselItem>Slide 3</CarouselItem>
+ *   </CarouselContent>
+ *   <CarouselPrevious>Prev</CarouselPrevious>
+ *   <CarouselNext>Next</CarouselNext>
+ * </Carousel>
+ * ```
+ */
+export declare const Carousel: React.ForwardRefExoticComponent<Omit<CarouselProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/carousel/Carousel.d.ts

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import type { CarouselContextValue, CarouselProps } from './types.js';
+/**
+ * Reads the slide state a {@link Carousel} publishes to everything inside it:
+ * the active index and `setValue`, `slidesPerPage`/`slidesPerMove` and the
+ * derived `maxIndex`, the autoplay setting, and the movement methods
+ * `scrollToIndex`, `next` and `previous`.
+ *
+ * Public on purpose — this is how a component of your own rendered inside the
+ * carousel (a thumbnail strip, a slide counter) drives it, and it is React's
+ * half of the cross-framework contract that also exposes `scrollToIndex` as an
+ * element method on `<skdx-carousel>`.
+ *
+ * Pass the calling component's own name. It is what the thrown error names when
+ * the hook runs outside a `Carousel` — it throws there rather than handing back
+ * `undefined` for a field access to fail on later.
+ */
+export declare const CarouselProvider: {
+    (props: CarouselContextValue & {
+        children: React.ReactNode;
+    }): React.JSX.Element;
+    displayName: string;
+}, useCarouselContext: (consumerName: string) => CarouselContextValue;
+/**
+ * Root of a carousel: `role="region"` with `aria-roledescription="carousel"`
+ * and `data-orientation`. Owns the index of the first visible slide and hands
+ * it down to `CarouselContent` / `CarouselItem` / `CarouselPrevious` /
+ * `CarouselNext` / `CarouselPlayPause` via context.
+ *
+ * Slide order comes from the mount order of `CarouselItem` children, not an
+ * explicit index prop on each — the `slidesPerPage` slides starting at `value`
+ * render, the rest are `hidden`, and there's no track/transform-based sliding.
+ * Supports Arrow Left/Right (or Up/Down when `orientation="vertical"`) when the
+ * root is focused, in addition to `CarouselPrevious`/`CarouselNext`; each step
+ * moves `slidesPerMove` slides. Works controlled (`value` + `onValueChange`) or
+ * uncontrolled (`defaultValue`).
+ *
+ * `autoplay` is off by default and, when on, pauses on hover, on focus, and
+ * while the page is hidden, and never runs under `prefers-reduced-motion`
+ * (WCAG 2.2.2) — pair it with a `CarouselPlayPause` control.
+ *
+ * @example
+ * ```tsx
+ * <Carousel loop slidesPerPage={2} spacing={16}>
+ *   <CarouselContent>
+ *     <CarouselItem>Slide 1</CarouselItem>
+ *     <CarouselItem>Slide 2</CarouselItem>
+ *     <CarouselItem>Slide 3</CarouselItem>
+ *   </CarouselContent>
+ *   <CarouselPrevious>Prev</CarouselPrevious>
+ *   <CarouselNext>Next</CarouselNext>
+ * </Carousel>
+ * ```
+ */
+export declare const Carousel: React.ForwardRefExoticComponent<Omit<CarouselProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/carousel/Carousel.js

@@ -0,0 +1 @@
+import*as r from"react";import{clamp as re}from"../utils/clamp.js";import{createSafeContext as se}from"../utils/createContext.js";import{directionalKey as ae,useDirection as ne}from"../utils/direction.js";import{skdxPart as ie}from"../utils/part.js";import{composeEventHandlers as x,Primitive as le}from"../utils/primitive.js";import{useControllableState as ue}from"../utils/useControllableState.js";import{jsx as V}from"react/jsx-runtime";var ce="(prefers-reduced-motion: reduce)";function K(){return typeof window>"u"||typeof window.matchMedia!="function"?!1:window.matchMedia(ce).matches}var[me,l]=se("Carousel"),de=r.forwardRef(({value:o,defaultValue:n=0,onValueChange:e,orientation:s="horizontal",loop:a=!1,slidesPerPage:i=1,slidesPerMove:$=1,spacing:R,autoplay:b=!1,autoplayInterval:I=5e3,style:E,...d},q)=>{let[C=0,u]=ue({prop:o,defaultProp:n,onChange:e}),[k,w]=r.useState([]),G=ne(),y=Math.max(1,Math.floor(i)),P=Math.max(1,Math.floor($)),c=k.length,m=Math.max(0,c-y),J=r.useCallback(t=>{w(f=>f.includes(t)?f:[...f,t])},[]),W=r.useCallback(t=>{w(f=>f.filter(h=>h!==t))},[]),X=r.useCallback(t=>{u(re(t,0,m))},[u,m]),v=r.useCallback(()=>{if(c===0)return;let t=C+P;t<=m?u(t):u(a?0:m)},[c,C,P,m,a,u]),N=r.useCallback(()=>{if(c===0)return;let t=C-P;t>=0?u(t):u(a?m:0)},[c,C,P,m,a,u]),[g,M]=r.useState(()=>b&&!K()),[Z,H]=r.useState(!1),[j,D]=r.useState(!1),[ee,te]=r.useState(!1),L=Z||j||ee;r.useEffect(()=>{M(b&&!K())},[b]),r.useEffect(()=>{if(typeof document>"u")return;let t=()=>te(document.visibilityState==="hidden");return t(),document.addEventListener("visibilitychange",t),()=>document.removeEventListener("visibilitychange",t)},[]),r.useEffect(()=>{if(!g||L||c<=y)return;let t=setInterval(v,I);return()=>clearInterval(t)},[g,L,c,y,v,I]);let oe=t=>{if(c===0)return;let f=s==="horizontal"?"ArrowRight":"ArrowDown",h=s==="horizontal"?"ArrowLeft":"ArrowUp",S=ae(t.key,t.currentTarget,G);S===f?(t.preventDefault(),v()):S===h&&(t.preventDefault(),N())},T=typeof R=="number"?`${R}px`:R;return V(me,{value:C,setValue:u,orientation:s,loop:a,itemIds:k,registerItem:J,unregisterItem:W,slidesPerPage:y,slidesPerMove:P,maxIndex:m,scrollToIndex:X,next:v,previous:N,playing:g,setPlaying:M,children:V(le.div,{role:"region","aria-roledescription":"carousel","data-orientation":s,"data-state":g?"playing":"paused",style:T===void 0?E:{...E,"--skdx-carousel-spacing":T},...d,...ie("carousel","root",d.className),ref:q,onKeyDown:x(d.onKeyDown,oe),onPointerEnter:x(d.onPointerEnter,()=>H(!0)),onPointerLeave:x(d.onPointerLeave,()=>H(!1)),onFocus:x(d.onFocus,()=>D(!0)),onBlur:x(d.onBlur,()=>D(!1))})})});de.displayName="Carousel";import*as B from"react";import{skdxPart as fe}from"../utils/part.js";import{Primitive as pe}from"../utils/primitive.js";import{jsx as Ce}from"react/jsx-runtime";var A=B.forwardRef((o,n)=>{let e=l("CarouselContent");return Ce(pe.div,{"data-orientation":e.orientation,...o,...fe("carousel","content",o.className),ref:n})});A.displayName="CarouselContent";import*as p from"react";import{skdxPart as Pe}from"../utils/part.js";import{Primitive as xe}from"../utils/primitive.js";import{jsx as ye}from"react/jsx-runtime";var z=p.forwardRef((o,n)=>{let e=l("CarouselItem"),s=p.useId(),a=e.itemIds.indexOf(s),i=a>=e.value&&a<e.value+e.slidesPerPage;return p.useEffect(()=>(e.registerItem(s),()=>e.unregisterItem(s)),[s]),ye(xe.div,{role:"group","aria-roledescription":"slide","data-state":i?"active":"inactive","data-orientation":e.orientation,hidden:!i,...o,...Pe("carousel","item",o.className),ref:n})});z.displayName="CarouselItem";import*as F from"react";import{skdxPart as ve}from"../utils/part.js";import{composeEventHandlers as ge,Primitive as Re}from"../utils/primitive.js";import{jsx as be}from"react/jsx-runtime";var O=F.forwardRef((o,n)=>{let e=l("CarouselPrevious"),s=e.itemIds.length,a=e.value<=0,i=s===0||a&&!e.loop;return be(Re.button,{type:"button",disabled:i,"data-disabled":i?"":void 0,...o,...ve("carousel","previous",o.className),ref:n,onClick:ge(o.onClick,e.previous)})});O.displayName="CarouselPrevious";import*as U from"react";import{skdxPart as he}from"../utils/part.js";import{composeEventHandlers as Ie,Primitive as Ee}from"../utils/primitive.js";import{jsx as ke}from"react/jsx-runtime";var _=U.forwardRef((o,n)=>{let e=l("CarouselNext"),s=e.itemIds.length,a=e.value>=e.maxIndex,i=s===0||a&&!e.loop;return ke(Ee.button,{type:"button",disabled:i,"data-disabled":i?"":void 0,...o,...he("carousel","next",o.className),ref:n,onClick:Ie(o.onClick,e.next)})});_.displayName="CarouselNext";import*as Q from"react";import{skdxPart as we}from"../utils/part.js";import{composeEventHandlers as Ne,Primitive as Me}from"../utils/primitive.js";import{jsx as He}from"react/jsx-runtime";var Y=Q.forwardRef((o,n)=>{let e=l("CarouselPlayPause");return He(Me.button,{type:"button","data-state":e.playing?"playing":"paused",...o,...we("carousel","play-pause",o.className),ref:n,onClick:Ne(o.onClick,()=>e.setPlaying(!e.playing))})});Y.displayName="CarouselPlayPause";export{de as Carousel,A as CarouselContent,z as CarouselItem,_ as CarouselNext,Y as CarouselPlayPause,O as CarouselPrevious,me as CarouselProvider,l as useCarouselContext};

package/dist/carousel/CarouselContent.d.cts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import type { CarouselContentProps } from './types.cjs';
+/**
+ * Wrapper around the slide `CarouselItem`s: renders a plain `<div>` with
+ * `data-orientation` reflecting the carousel's axis. Layout (e.g. hiding
+ * overflow) is entirely up to your CSS.
+ *
+ * @example
+ * ```tsx
+ * <CarouselContent>
+ *   <CarouselItem>Slide 1</CarouselItem>
+ *   <CarouselItem>Slide 2</CarouselItem>
+ * </CarouselContent>
+ * ```
+ */
+export declare const CarouselContent: React.ForwardRefExoticComponent<Omit<CarouselContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/carousel/CarouselContent.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import type { CarouselContentProps } from './types.js';
+/**
+ * Wrapper around the slide `CarouselItem`s: renders a plain `<div>` with
+ * `data-orientation` reflecting the carousel's axis. Layout (e.g. hiding
+ * overflow) is entirely up to your CSS.
+ *
+ * @example
+ * ```tsx
+ * <CarouselContent>
+ *   <CarouselItem>Slide 1</CarouselItem>
+ *   <CarouselItem>Slide 2</CarouselItem>
+ * </CarouselContent>
+ * ```
+ */
+export declare const CarouselContent: React.ForwardRefExoticComponent<Omit<CarouselContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/carousel/CarouselItem.d.cts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import type { CarouselItemProps } from './types.cjs';
+/**
+ * A single slide: `role="group"` with `aria-roledescription="slide"`,
+ * `data-state` (`active`/`inactive`), and `data-orientation`. Registers
+ * itself with the parent `Carousel` on mount to establish slide order.
+ * Only the slides in the active window (`slidesPerPage` of them, starting at
+ * the carousel's `value`) render content — the rest are present in the DOM but
+ * `hidden`.
+ *
+ * @example
+ * ```tsx
+ * <CarouselContent>
+ *   <CarouselItem>Slide 1</CarouselItem>
+ *   <CarouselItem>Slide 2</CarouselItem>
+ * </CarouselContent>
+ * ```
+ */
+export declare const CarouselItem: React.ForwardRefExoticComponent<Omit<CarouselItemProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/carousel/CarouselItem.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import type { CarouselItemProps } from './types.js';
+/**
+ * A single slide: `role="group"` with `aria-roledescription="slide"`,
+ * `data-state` (`active`/`inactive`), and `data-orientation`. Registers
+ * itself with the parent `Carousel` on mount to establish slide order.
+ * Only the slides in the active window (`slidesPerPage` of them, starting at
+ * the carousel's `value`) render content — the rest are present in the DOM but
+ * `hidden`.
+ *
+ * @example
+ * ```tsx
+ * <CarouselContent>
+ *   <CarouselItem>Slide 1</CarouselItem>
+ *   <CarouselItem>Slide 2</CarouselItem>
+ * </CarouselContent>
+ * ```
+ */
+export declare const CarouselItem: React.ForwardRefExoticComponent<Omit<CarouselItemProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/carousel/CarouselNext.d.cts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import type { CarouselNextProps } from './types.cjs';
+/**
+ * Button that steps forward by the carousel's `slidesPerMove` when clicked,
+ * wrapping to the first slide when `loop` is enabled. Disabled (native
+ * `disabled` plus `data-disabled`) once the last page is showing and `loop` is
+ * `false`, or when there are no slides.
+ *
+ * @example
+ * ```tsx
+ * <CarouselNext aria-label="Next slide">→</CarouselNext>
+ * ```
+ */
+export declare const CarouselNext: React.ForwardRefExoticComponent<Omit<CarouselNextProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/carousel/CarouselNext.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import type { CarouselNextProps } from './types.js';
+/**
+ * Button that steps forward by the carousel's `slidesPerMove` when clicked,
+ * wrapping to the first slide when `loop` is enabled. Disabled (native
+ * `disabled` plus `data-disabled`) once the last page is showing and `loop` is
+ * `false`, or when there are no slides.
+ *
+ * @example
+ * ```tsx
+ * <CarouselNext aria-label="Next slide">→</CarouselNext>
+ * ```
+ */
+export declare const CarouselNext: React.ForwardRefExoticComponent<Omit<CarouselNextProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/carousel/CarouselPlayPause.d.cts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import type { CarouselPlayPauseProps } from './types.cjs';
+/**
+ * The autoplay pause/resume control WCAG 2.2.2 requires next to any carousel
+ * that moves on its own: a `<button>` carrying `data-state` of
+ * `"playing"`/`"paused"`, which toggles the carousel's timer on click.
+ *
+ * It stays functional when `autoplay` is `false` — pressing it starts playback
+ * — so the same control serves as a play button. Give it an accessible name
+ * that reflects the *action*, swapping it with `data-state`.
+ *
+ * @example
+ * ```tsx
+ * <CarouselPlayPause aria-label={playing ? 'Pause slideshow' : 'Play slideshow'} />
+ * ```
+ */
+export declare const CarouselPlayPause: React.ForwardRefExoticComponent<Omit<CarouselPlayPauseProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/carousel/CarouselPlayPause.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import type { CarouselPlayPauseProps } from './types.js';
+/**
+ * The autoplay pause/resume control WCAG 2.2.2 requires next to any carousel
+ * that moves on its own: a `<button>` carrying `data-state` of
+ * `"playing"`/`"paused"`, which toggles the carousel's timer on click.
+ *
+ * It stays functional when `autoplay` is `false` — pressing it starts playback
+ * — so the same control serves as a play button. Give it an accessible name
+ * that reflects the *action*, swapping it with `data-state`.
+ *
+ * @example
+ * ```tsx
+ * <CarouselPlayPause aria-label={playing ? 'Pause slideshow' : 'Play slideshow'} />
+ * ```
+ */
+export declare const CarouselPlayPause: React.ForwardRefExoticComponent<Omit<CarouselPlayPauseProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/carousel/CarouselPrevious.d.cts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import type { CarouselPreviousProps } from './types.cjs';
+/**
+ * Button that steps back by the carousel's `slidesPerMove` when clicked,
+ * wrapping to the last page when `loop` is enabled. Disabled (native
+ * `disabled` plus `data-disabled`) at the first slide when `loop` is
+ * `false`, or when there are no slides.
+ *
+ * @example
+ * ```tsx
+ * <CarouselPrevious aria-label="Previous slide">←</CarouselPrevious>
+ * ```
+ */
+export declare const CarouselPrevious: React.ForwardRefExoticComponent<Omit<CarouselPreviousProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/carousel/CarouselPrevious.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import type { CarouselPreviousProps } from './types.js';
+/**
+ * Button that steps back by the carousel's `slidesPerMove` when clicked,
+ * wrapping to the last page when `loop` is enabled. Disabled (native
+ * `disabled` plus `data-disabled`) at the first slide when `loop` is
+ * `false`, or when there are no slides.
+ *
+ * @example
+ * ```tsx
+ * <CarouselPrevious aria-label="Previous slide">←</CarouselPrevious>
+ * ```
+ */
+export declare const CarouselPrevious: React.ForwardRefExoticComponent<Omit<CarouselPreviousProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/carousel/index.d.cts

@@ -0,0 +1,7 @@
+export * from './Carousel.cjs';
+export { CarouselContent } from './CarouselContent.cjs';
+export { CarouselItem } from './CarouselItem.cjs';
+export { CarouselPrevious } from './CarouselPrevious.cjs';
+export { CarouselNext } from './CarouselNext.cjs';
+export { CarouselPlayPause } from './CarouselPlayPause.cjs';
+export type { CarouselProps, CarouselContentProps, CarouselItemProps, CarouselPreviousProps, CarouselNextProps, CarouselPlayPauseProps, } from './types.cjs';

package/dist/carousel/index.d.ts

@@ -0,0 +1,7 @@
+export * from './Carousel.js';
+export { CarouselContent } from './CarouselContent.js';
+export { CarouselItem } from './CarouselItem.js';
+export { CarouselPrevious } from './CarouselPrevious.js';
+export { CarouselNext } from './CarouselNext.js';
+export { CarouselPlayPause } from './CarouselPlayPause.js';
+export type { CarouselProps, CarouselContentProps, CarouselItemProps, CarouselPreviousProps, CarouselNextProps, CarouselPlayPauseProps, } from './types.js';

package/dist/carousel/types.d.cts

@@ -0,0 +1,110 @@
+import type { PrimitivePropsWithRef } from '../utils/primitive.cjs';
+/** Shape returned by the exported `useCarouselContext` hook; distributed from {@link Carousel} to its parts via context. */
+export interface CarouselContextValue {
+    value: number;
+    setValue: (index: number) => void;
+    orientation: 'horizontal' | 'vertical';
+    loop: boolean;
+    itemIds: string[];
+    registerItem: (id: string) => void;
+    unregisterItem: (id: string) => void;
+    /** How many slides are visible at once. */
+    slidesPerPage: number;
+    /** How many slides one Previous/Next step (or Arrow keypress) moves. */
+    slidesPerMove: number;
+    /** Highest index the carousel can rest at — `max(0, count - slidesPerPage)`, so the last page stays full. */
+    maxIndex: number;
+    /** Moves to `index`, clamped into `[0, maxIndex]`. Ignores out-of-range values rather than throwing. */
+    scrollToIndex: (index: number) => void;
+    /** Steps forward by `slidesPerMove`, wrapping to the start when `loop` is set. The one stepping rule Next and the arrow keys share. */
+    next: () => void;
+    /** Steps back by `slidesPerMove`, wrapping to the last page when `loop` is set. */
+    previous: () => void;
+    /**
+     * Whether autoplay is switched on. This is the user's setting, not the live
+     * timer state — hover/focus/page-hidden suspend the timer without flipping it.
+     */
+    playing: boolean;
+    /** Starts or stops autoplay — what `CarouselPlayPause` calls. */
+    setPlaying: (playing: boolean) => void;
+}
+/** Props for the {@link Carousel} root. */
+export interface CarouselProps extends PrimitivePropsWithRef<'div'> {
+    /**
+     * Index of the active slide, for controlled usage. Pair with `onValueChange`.
+     * @default undefined — uncontrolled, tracks its own active slide internally.
+     */
+    value?: number;
+    /**
+     * Initial active slide index, for uncontrolled usage.
+     * @default 0
+     */
+    defaultValue?: number;
+    /**
+     * Fires with the new active index whenever the slide changes, controlled or not.
+     * @default undefined — no-op if omitted.
+     */
+    onValueChange?: (index: number) => void;
+    /**
+     * Layout axis, exposed as `data-orientation` and used to pick Arrow
+     * Left/Right vs Arrow Up/Down for keyboard navigation.
+     * @default 'horizontal'
+     */
+    orientation?: 'horizontal' | 'vertical';
+    /**
+     * Whether stepping past the last slide (via keyboard or `CarouselNext`)
+     * wraps to the first, and vice versa for `CarouselPrevious`. When `false`,
+     * `CarouselPrevious`/`CarouselNext` disable themselves at the ends.
+     * @default false
+     */
+    loop?: boolean;
+    /**
+     * How many slides are visible at once. Slides from `value` up to
+     * `value + slidesPerPage - 1` are active; the rest stay `hidden`. Values
+     * below 1 are treated as 1.
+     * @default 1
+     */
+    slidesPerPage?: number;
+    /**
+     * How many slides one Previous/Next step (or Arrow keypress) advances by.
+     * Set it equal to `slidesPerPage` for page-at-a-time paging.
+     * @default 1
+     */
+    slidesPerMove?: number;
+    /**
+     * Gap between slides, published as the `--skdx-carousel-spacing` custom
+     * property on the root so your CSS can consume it (`gap: var(--skdx-carousel-spacing)`).
+     * A number is treated as pixels; a string is used verbatim.
+     * @default undefined — the property is not set, and your CSS decides.
+     */
+    spacing?: number | string;
+    /**
+     * Advances the carousel on a timer. Off by default, per WCAG 2.2.2: moving
+     * content that starts automatically needs a way to pause it, which
+     * `CarouselPlayPause` provides. Autoplay never starts under
+     * `prefers-reduced-motion: reduce`, and pauses while the pointer is over the
+     * root, while focus is inside it, and while the page is hidden.
+     * @default false
+     */
+    autoplay?: boolean;
+    /**
+     * Milliseconds to wait between automatic slide advances.
+     * @default 5000
+     */
+    autoplayInterval?: number;
+}
+/** Props for {@link CarouselContent}, the wrapper around the slide `CarouselItem`s. */
+export interface CarouselContentProps extends PrimitivePropsWithRef<'div'> {
+}
+/** Props for a single {@link CarouselItem} slide. */
+export interface CarouselItemProps extends PrimitivePropsWithRef<'div'> {
+}
+/** Props for {@link CarouselPrevious}, the button that steps to the previous slide. */
+export interface CarouselPreviousProps extends PrimitivePropsWithRef<'button'> {
+}
+/** Props for {@link CarouselNext}, the button that steps to the next slide. */
+export interface CarouselNextProps extends PrimitivePropsWithRef<'button'> {
+}
+/** Props for {@link CarouselPlayPause}, the autoplay pause/resume control. */
+export interface CarouselPlayPauseProps extends PrimitivePropsWithRef<'button'> {
+}