@spark-ui/components 11.1.0 → 11.1.2

package/dist/card/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/card/index.ts","../../src/card/Backdrop.tsx","../../src/slot/Slot.tsx","../../src/card/Card.styles.tsx","../../src/card/context.tsx","../../src/card/utils.ts","../../src/card/Card.tsx","../../src/card/Content.styles.tsx","../../src/card/Content.tsx"],"sourcesContent":["import { Backdrop } from './Backdrop'\nimport { Card as Root } from './Card'\nimport { Content } from './Content'\n\nexport const Card: typeof Root & {\n  Content: typeof Content\n  Backdrop: typeof Backdrop\n} = Object.assign(Root, {\n  Content,\n  Backdrop,\n})\n\nCard.displayName = 'Card'\nContent.displayName = 'Card.Content'\nBackdrop.displayName = 'Card.Backdrop'\n\nexport { type CardProps } from './Card'\n","import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const backdropStyles = cva(\n  [\n    'default:bg-surface default:bg-gradient-to-r absolute inset-x-0 top-0',\n    'h-sz-16',\n    'default:rounded-t-lg',\n    'bg-[length:200%_100%] bg-position-[0%_0%]',\n  ],\n  {\n    variants: {\n      animation: {\n        none: '',\n        pulse: 'animate-standalone-backdrop-pulse',\n      },\n      intent: makeVariants<\n        'intent',\n        [\n          'main',\n          'support',\n          'accent',\n          'basic',\n          'success',\n          'alert',\n          'danger',\n          'info',\n          'neutral',\n          'surface',\n          'surfaceInverse',\n        ]\n      >({\n        main: ['default:from-main/dim-4 default:via-main/dim-2 default:to-main/dim-4'],\n        support: ['default:from-support/dim-4 default:via-support/dim-2 default:to-support/dim-4'],\n        accent: ['default:from-accent/dim-4 default:via-accent/dim-2 default:to-accent/dim-4'],\n        basic: ['default:from-basic/dim-4 default:via-basic/dim-2 default:to-basic/dim-4'],\n        success: ['default:from-success/dim-4 default:via-success/dim-2 default:to-success/dim-4'],\n        alert: ['default:from-alert/dim-4 default:via-alert/dim-2 default:to-alert/dim-4'],\n        danger: ['default:from-error/dim-4 default:via-error/dim-2 default:to-error/dim-4'],\n        info: ['default:from-info/dim-4 default:via-info/dim-2 default:to-info/dim-4'],\n        neutral: ['default:from-neutral/dim-4 default:via-neutral/dim-2 default:to-neutral/dim-4'],\n        surface: ['default:from-outline/dim-4 default:via-outline/dim-2 default:to-outline/dim-4'],\n        surfaceInverse: [\n          'default:from-surface/dim-4 default:via-surface/dim-2 default:to-surface/dim-4',\n        ],\n      }),\n    },\n    defaultVariants: {\n      intent: 'main',\n      animation: 'none',\n    },\n  }\n)\n\nexport type BackdropStylesProps = VariantProps<typeof backdropStyles>\n\ninterface BackdropProps extends BackdropStylesProps {\n  className?: string\n}\n\nexport const Backdrop = ({ intent = 'main', animation = 'none', ...props }: BackdropProps) => {\n  return <div className={backdropStyles({ intent, animation })} {...props} />\n}\n\nBackdrop.displayName = 'Card.Backdrop'\n","import { Slot as RadixSlot } from 'radix-ui'\nimport {\n  cloneElement,\n  HTMLAttributes,\n  isValidElement,\n  PropsWithChildren,\n  ReactNode,\n  Ref,\n} from 'react'\n\nexport const Slottable: typeof RadixSlot.Slottable = RadixSlot.Slottable\n\nexport type SlotProps = PropsWithChildren<HTMLAttributes<HTMLElement>> & {\n  ref?: Ref<HTMLElement>\n}\n\nexport const Slot = ({ ref, ...props }: SlotProps) => {\n  return <RadixSlot.Root ref={ref} {...props} />\n}\n\n/**\n * When using Radix `Slot` component, it will consider its first child to merge its props with.\n * In some cases, you might need to wrap the top child with additional markup without breaking this behaviour.\n */\nexport const wrapPolymorphicSlot = (\n  asChild: boolean | undefined,\n  children: ReactNode,\n  callback: (children: ReactNode) => ReactNode\n) => {\n  if (!asChild) return callback(children) // If polymorphic behaviour is not used, we keep the original children\n\n  return isValidElement(children)\n    ? cloneElement(\n        children,\n        undefined,\n        callback((children.props as { children: ReactNode }).children)\n      )\n    : null\n}\n","import { makeVariants, tw } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const cardStyles = cva(\n  [\n    'group relative bg-clip-padding default:rounded-lg focus-visible:u-outline',\n    'disabled:opacity-dim-3 disabled:cursor-not-allowed',\n  ],\n  {\n    variants: {\n      design: {\n        filled: [],\n        outlined: ['border-sm'],\n        tinted: [],\n      },\n      hasBackdrop: {\n        true: ['pt-md'],\n      },\n      /**\n       * Color scheme of the button.\n       */\n      intent: makeVariants<\n        'intent',\n        [\n          'main',\n          'support',\n          'accent',\n          'basic',\n          'success',\n          'alert',\n          'danger',\n          'info',\n          'neutral',\n          'surface',\n          'surfaceInverse',\n        ]\n      >({\n        main: [],\n        support: [],\n        accent: [],\n        basic: [],\n        success: [],\n        alert: [],\n        danger: [],\n        info: [],\n        neutral: [],\n        surface: [],\n        surfaceInverse: [],\n      }),\n    },\n    compoundVariants: [\n      // OUTLINED\n      { intent: 'main', design: 'outlined', class: tw(['border-main']) },\n      { intent: 'support', design: 'outlined', class: tw(['border-support']) },\n      { intent: 'accent', design: 'outlined', class: tw(['border-accent']) },\n      { intent: 'basic', design: 'outlined', class: tw(['border-basic']) },\n      { intent: 'success', design: 'outlined', class: tw(['border-success']) },\n      { intent: 'alert', design: 'outlined', class: tw(['border-alert']) },\n      { intent: 'danger', design: 'outlined', class: tw(['border-error']) },\n      { intent: 'info', design: 'outlined', class: tw(['border-info']) },\n      { intent: 'neutral', design: 'outlined', class: tw(['border-neutral']) },\n      { intent: 'surface', design: 'outlined', class: tw(['border-outline']) },\n    ],\n    defaultVariants: {\n      design: 'filled',\n      intent: 'surface',\n    },\n  }\n)\n\nexport type CardStylesProps = VariantProps<typeof cardStyles>\n","import { createContext, useContext } from 'react'\n\nimport type { CardStylesProps } from './Card.styles'\n\nexport interface CardContextValue {\n  design: CardStylesProps['design']\n  intent: CardStylesProps['intent']\n  hasBackdrop: boolean\n  inset: boolean\n  isInteractive: boolean\n}\n\nconst CardContext = createContext<CardContextValue | undefined>(undefined)\n\nexport const useCardContext = () => {\n  const context = useContext(CardContext)\n  if (!context) {\n    throw new Error('useCardContext must be used within a Card component')\n  }\n\n  return context\n}\n\nexport { CardContext }\n","import { Children, isValidElement, ReactNode } from 'react'\n\nconst MOUSE_EVENTS = [\n  'onClick',\n  'onMouseDown',\n  'onMouseUp',\n  'onMouseEnter',\n  'onMouseLeave',\n  'onMouseMove',\n  'onMouseOver',\n  'onMouseOut',\n  'onDoubleClick',\n  'onContextMenu',\n] as const\n\nexport const hasBackdrop = (children: ReactNode): boolean => {\n  let backdropFound = false\n\n  const searchForBackdrop = (node: ReactNode): void => {\n    if (backdropFound) return\n\n    Children.forEach(node, child => {\n      if (backdropFound) return\n\n      if (isValidElement(child)) {\n        const isBackdropComponent =\n          typeof child.type === 'function' &&\n          (child.type as { displayName?: string }).displayName === 'Card.Backdrop'\n\n        if (isBackdropComponent) {\n          backdropFound = true\n\n          return\n        }\n\n        const hasChildren =\n          child.props && typeof child.props === 'object' && 'children' in child.props\n\n        if (hasChildren) {\n          const childChildren = (child.props as { children: ReactNode }).children\n          if (childChildren !== undefined && childChildren !== null) {\n            searchForBackdrop(childChildren)\n          }\n        }\n      }\n    })\n  }\n\n  searchForBackdrop(children)\n\n  return backdropFound\n}\n\nexport const isInteractive = (\n  children: ReactNode,\n  asChild: boolean | undefined,\n  props: Record<string, any>\n): boolean => {\n  const hasMouseEventHandlers = MOUSE_EVENTS.some(event => event in props)\n\n  if (hasMouseEventHandlers) {\n    return true\n  }\n\n  if (!asChild) {\n    return false\n  }\n\n  const child = Children.only(children)\n\n  if (!isValidElement(child)) {\n    return false\n  }\n\n  const interactiveElements = ['a', 'button']\n  const isInteractiveElement =\n    typeof child.type === 'string' && interactiveElements.includes(child.type)\n\n  if (isInteractiveElement) {\n    return true\n  }\n\n  const childProps = child.props as Record<string, any>\n  const hasChildEventHandlers = MOUSE_EVENTS.some(event => event in childProps)\n\n  return hasChildEventHandlers\n}\n","import { ComponentProps } from 'react'\n\nimport { Slot } from '../slot'\nimport { cardStyles, type CardStylesProps } from './Card.styles'\nimport { CardContext } from './context'\nimport { hasBackdrop, isInteractive } from './utils'\n\nexport interface CardProps extends ComponentProps<'div'>, CardStylesProps {\n  /**\n   * Change the component to the HTML tag or custom component of the only child.\n   */\n  asChild?: boolean\n  /**\n   * Whether the card should have an inset padding.\n   */\n  inset?: boolean\n}\n\nexport const Card = ({\n  children,\n  design = 'filled',\n  intent = 'surface',\n  inset = false,\n  asChild,\n  className,\n  ref,\n  ...props\n}: CardProps) => {\n  const Component = asChild ? Slot : 'div'\n  const backdropDetected = hasBackdrop(children)\n  const interactiveDetected = isInteractive(children, asChild, props)\n\n  return (\n    <CardContext.Provider\n      value={{\n        design,\n        intent,\n        hasBackdrop: backdropDetected,\n        inset,\n        isInteractive: interactiveDetected,\n      }}\n    >\n      <Component\n        data-spark-component=\"card\"\n        data-interactive={interactiveDetected}\n        ref={ref}\n        className={cardStyles({\n          className,\n          design,\n          intent,\n          hasBackdrop: backdropDetected,\n        })}\n        {...props}\n      >\n        {children}\n      </Component>\n    </CardContext.Provider>\n  )\n}\n\nCard.displayName = 'Card'\n","import { makeVariants, tw } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const contentStyles = cva(\n  [\n    'relative h-full default:rounded-lg w-full focus-visible:u-outline',\n    'default:transition-colors default:duration-200 ease-linear',\n  ],\n  {\n    variants: {\n      inset: {\n        false: ['default:p-lg'],\n      },\n      design: {\n        filled: [],\n        outlined: [\n          'default:bg-surface group-focus:bg-surface-hovered group-not-disabled:group-data-[interactive=true]:group-hover:bg-surface-hovered',\n        ],\n        tinted: [],\n      },\n      hasBackdrop: {\n        true: ['rounded-t-[16px_8px] '],\n      },\n      intent: makeVariants<\n        'intent',\n        [\n          'main',\n          'support',\n          'accent',\n          'basic',\n          'success',\n          'alert',\n          'danger',\n          'info',\n          'neutral',\n          'surface',\n          'surfaceInverse',\n        ]\n      >({\n        main: [],\n        support: [],\n        accent: [],\n        basic: [],\n        success: [],\n        alert: [],\n        danger: [],\n        info: [],\n        neutral: [],\n        surface: [],\n        surfaceInverse: [],\n      }),\n    },\n    compoundVariants: [\n      // FILLED\n      {\n        intent: 'main',\n        design: 'filled',\n        class: tw([\n          'bg-main text-on-main group-focus:bg-main-hovered',\n          'group-not-disabled:group-data-[interactive=true]:group-hover:bg-main-hovered',\n        ]),\n      },\n      {\n        intent: 'support',\n        design: 'filled',\n        class: tw([\n          'bg-support text-on-support group-focus:bg-support-hovered',\n          'group-not-disabled:group-data-[interactive=true]:group-hover:bg-support-hovered',\n        ]),\n      },\n      {\n        intent: 'accent',\n        design: 'filled',\n        class: tw([\n          'bg-accent text-on-accent group-focus:bg-accent-hovered',\n          'group-not-disabled:group-data-[interactive=true]:group-hover:bg-accent-hovered',\n        ]),\n      },\n      {\n        intent: 'basic',\n        design: 'filled',\n        class: tw([\n          'bg-basic text-on-basic group-focus:bg-basic-hovered',\n          'group-not-disabled:group-data-[interactive=true]:group-hover:bg-basic-hovered',\n        ]),\n      },\n      {\n        intent: 'success',\n        design: 'filled',\n        class: tw([\n          'bg-success text-on-success group-focus:bg-success-hovered',\n          'group-not-disabled:group-data-[interactive=true]:group-hover:bg-success-hovered',\n        ]),\n      },\n      {\n        intent: 'alert',\n        design: 'filled',\n        class: tw([\n          'bg-alert text-on-alert group-focus:bg-alert-hovered',\n          'group-not-disabled:group-data-[interactive=true]:group-hover:bg-alert-hovered',\n        ]),\n      },\n      {\n        intent: 'danger',\n        design: 'filled',\n        class: tw([\n          'text-on-error bg-error group-focus:bg-error-hovered',\n          'group-not-disabled:group-data-[interactive=true]:group-hover:bg-error-hovered',\n        ]),\n      },\n      {\n        intent: 'info',\n        design: 'filled',\n        class: tw([\n          'text-on-error bg-info group-focus:bg-info-hovered',\n          'group-not-disabled:group-data-[interactive=true]:group-hover:bg-info-hovered',\n        ]),\n      },\n      {\n        intent: 'neutral',\n        design: 'filled',\n        class: tw([\n          'bg-neutral text-on-neutral group-focus:bg-neutral-hovered',\n          'group-not-disabled:group-data-[interactive=true]:group-hover:bg-neutral-hovered',\n        ]),\n      },\n      {\n        intent: 'surface',\n        design: 'filled',\n        class: tw([\n          'bg-surface text-on-surface group-focus:bg-surface-hovered',\n          'group-not-disabled:group-data-[interactive=true]:group-hover:bg-surface-hovered',\n        ]),\n      },\n      // OUTLINED\n      /**\n       * Outlined styles are handled by the Card component (parent)\n       */\n      // TINTED\n      {\n        intent: 'main',\n        design: 'tinted',\n        class: tw([\n          'bg-main-container text-on-main-container group-focus:bg-main-container-hovered',\n          'group-not-disabled:group-data-[interactive=true]:group-hover:bg-main-container-hovered',\n        ]),\n      },\n      {\n        intent: 'support',\n        design: 'tinted',\n        class: tw([\n          'bg-support-container text-on-support-container group-focus:bg-support-container-hovered',\n          'group-not-disabled:group-data-[interactive=true]:group-hover:bg-support-container-hovered',\n        ]),\n      },\n      {\n        intent: 'accent',\n        design: 'tinted',\n        class: tw([\n          'bg-accent-container text-on-accent-container group-focus:bg-accent-container-hovered',\n          'group-not-disabled:group-data-[interactive=true]:group-hover:bg-accent-container-hovered',\n        ]),\n      },\n      {\n        intent: 'basic',\n        design: 'tinted',\n        class: tw([\n          'bg-basic-container text-on-basic-container group-focus:bg-basic-container-hovered',\n        ]),\n      },\n      {\n        intent: 'success',\n        design: 'tinted',\n        class: tw([\n          'bg-success-container text-on-success-container group-focus:bg-success-container-hovered',\n          'group-not-disabled:group-data-[interactive=true]:group-hover:bg-success-container-hovered',\n        ]),\n      },\n      {\n        intent: 'alert',\n        design: 'tinted',\n        class: tw([\n          'bg-alert-container text-on-alert-container group-focus:bg-alert-container-hovered',\n          'group-not-disabled:group-data-[interactive=true]:group-hover:bg-alert-container-hovered',\n        ]),\n      },\n      {\n        intent: 'danger',\n        design: 'tinted',\n        class: tw([\n          'bg-error-container text-on-error-container group-focus:bg-error-container-hovered',\n          'group-not-disabled:group-data-[interactive=true]:group-hover:bg-error-container-hovered',\n        ]),\n      },\n      {\n        intent: 'info',\n        design: 'tinted',\n        class: tw([\n          'bg-info-container text-on-info-container group-focus:bg-info-container-hovered',\n          'group-not-disabled:group-data-[interactive=true]:group-hover:bg-info-container-hovered',\n        ]),\n      },\n      {\n        intent: 'neutral',\n        design: 'tinted',\n        class: tw([\n          'bg-neutral-container text-on-neutral-container group-focus:bg-neutral-container-hovered',\n          'group-not-disabled:group-data-[interactive=true]:group-hover:bg-neutral-container-hovered',\n        ]),\n      },\n      {\n        intent: 'surface',\n        design: 'tinted',\n        class: tw([\n          'bg-surface text-on-surface group-focus:bg-surface-hovered',\n          'group-not-disabled:group-data-[interactive=true]:group-hover:bg-surface-hovered',\n        ]),\n      },\n    ],\n    defaultVariants: {\n      design: 'filled',\n      intent: 'surface',\n      inset: false,\n      hasBackdrop: true,\n    },\n  }\n)\n\nexport type ContentStylesProps = VariantProps<typeof contentStyles>\n","import { ComponentProps } from 'react'\n\nimport { Slot } from '../slot'\nimport { contentStyles } from './Content.styles'\nimport { useCardContext } from './context'\n\nexport interface ContentProps extends ComponentProps<'div'> {\n  /**\n   * Change the component to the HTML tag or custom component of the only child.\n   */\n  asChild?: boolean\n  /**\n   * Whether the card should have an inset padding.\n   */\n  inset?: boolean\n}\n\nexport const Content = ({ children, inset, asChild, className, ref, ...props }: ContentProps) => {\n  const Component = asChild ? Slot : 'div'\n  const { design, intent, hasBackdrop } = useCardContext()\n\n  return (\n    <Component\n      data-spark-component=\"card-content\"\n      ref={ref}\n      className={contentStyles({\n        className,\n        design,\n        intent,\n        inset,\n        hasBackdrop,\n      })}\n      {...props}\n    >\n      {children}\n    </Component>\n  )\n}\n\nContent.displayName = 'Content'\n"],"mappings":"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","names":["Card","import_jsx_runtime","RadixSlot","import_internal_utils","import_class_variance_authority","import_react","import_react","import_jsx_runtime","import_internal_utils","import_class_variance_authority","import_jsx_runtime","hasBackdrop","Card"]}

package/dist/carousel/index.d.ts

@@ -0,0 +1,261 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { CSSProperties, Ref, KeyboardEvent, RefObject, ComponentProps, ReactNode, HTMLAttributes } from 'react';
+import { IconButtonProps } from '../icon-button/index.js';
+import '../button/index.js';
+import 'class-variance-authority/types';
+import 'class-variance-authority';
+
+declare const DATA_SCOPE: "carousel";
+declare const DIRECTION: "ltr";
+interface UseCarouselProps {
+    /**
+     * Opens the carousel on a predefined page index.
+     */
+    defaultPage?: number;
+    /**
+     * Active page of the carousel.
+     * Use it to control the carousel with your own state.
+     */
+    page?: number;
+    /**
+     * Space (in pixels) between slides.
+     */
+    gap?: number;
+    /**
+     * CSS scroll snap behavior.
+     * - `mandatory` to force snapping on each "page".
+     * - `proximity` to force snapping only when scroll position is near the edge of a "page". Behavior can change depending on each browser.
+     */
+    snapType?: 'proximity' | 'mandatory';
+    /**
+     * Defines whether or not the scroll container is allowed to "pass over" possible snap positions.
+     */
+    snapStop?: 'always' | 'normal';
+    /**
+     * Offset (in pixels) of the left of the optimal viewing region of the list.
+     */
+    scrollPadding?: number;
+    /**
+     * Number of slides to display in the carousel viewport.
+     */
+    slidesPerPage?: number;
+    /**
+     * By default, the carousel scroll N slides per move, N being the number of slides in the carousel viewport.
+     * Use this prop if you prefer to scroll by a smaller amount of slides each time.
+     */
+    slidesPerMove?: number | 'auto';
+    /**
+     * When `true`, allow previous and next buttons to be used when reaching the edges of the carousel.
+     */
+    loop?: boolean;
+    scrollBehavior?: 'instant' | 'smooth';
+    onPageChange?: (pageIndex: number) => void;
+    pagePickerInset?: boolean;
+    /**
+     * Maximum number of dots to display in the page picker.
+     */
+    maxDots?: number;
+}
+interface ComputedRootProps {
+    id: string;
+    role: 'region';
+    'aria-roledescription': 'carousel';
+    'data-scope': typeof DATA_SCOPE;
+    'data-part': 'root';
+    'data-orientation': 'horizontal';
+    dir: typeof DIRECTION;
+    style: CSSProperties & {
+        '--slides-per-page': number;
+        '--slide-spacing': string;
+        '--slide-item-size': string;
+    };
+}
+interface ComputedControlProps {
+    'data-scope': typeof DATA_SCOPE;
+    'data-part': 'control';
+    'data-orientation': 'horizontal';
+}
+interface ComputedTriggerProps<T extends 'prev-trigger' | 'next-trigger'> {
+    id: string;
+    'aria-controls': string;
+    'data-scope': typeof DATA_SCOPE;
+    'data-part': T;
+    'data-orientation': 'horizontal';
+    type: 'button';
+    dir: typeof DIRECTION;
+    disabled: boolean;
+    onClick: () => void;
+}
+interface ComputedSlideGroupProps {
+    id: string;
+    'aria-live': 'polite' | 'off';
+    'data-scope': typeof DATA_SCOPE;
+    'data-part': 'item-group';
+    'data-orientation': 'horizontal';
+    dir: typeof DIRECTION;
+    tabIndex: 0;
+    style: CSSProperties;
+    ref: Ref<HTMLDivElement | null>;
+}
+interface ComputedSlideProps {
+    id: string;
+    role: 'group';
+    'aria-roledescription': 'slide';
+    'data-scope': typeof DATA_SCOPE;
+    'data-part': 'item';
+    'data-index': number;
+    'data-orientation': 'horizontal';
+    dir: typeof DIRECTION;
+    style: CSSProperties;
+}
+interface ComputedIndicatorGroupProps {
+    role: 'radiogroup';
+    id: string;
+    'data-scope': typeof DATA_SCOPE;
+    'data-part': 'indicator-group';
+    'data-orientation': 'horizontal';
+    dir: typeof DIRECTION;
+}
+interface ComputedIndicatorProps {
+    role: 'radio';
+    id: string;
+    'aria-checked': boolean;
+    'data-scope': typeof DATA_SCOPE;
+    'data-part': 'indicator';
+    'data-orientation': 'horizontal';
+    'data-index': number;
+    'data-state': 'active' | 'edge' | 'hidden' | 'idle';
+    tabIndex: 0 | -1;
+    onClick: () => void;
+    onKeyDown: (event: KeyboardEvent) => void;
+}
+interface AnatomyPropsSetters {
+    getRootProps: () => ComputedRootProps;
+    getControlProps: () => ComputedControlProps;
+    getPrevTriggerProps: () => ComputedTriggerProps<'prev-trigger'>;
+    getNextTriggerProps: () => ComputedTriggerProps<'next-trigger'>;
+    getSlidesContainerProps: () => ComputedSlideGroupProps;
+    getSlideProps: (props: {
+        index: number;
+        totalSlides: number;
+    }) => ComputedSlideProps;
+    getIndicatorGroupProps: () => ComputedIndicatorGroupProps;
+    getIndicatorProps: (props: {
+        index: number;
+    }) => ComputedIndicatorProps;
+}
+interface CarouselAPI extends AnatomyPropsSetters {
+    ref: RefObject<HTMLElement | null>;
+    pageIndicatorsRefs: RefObject<(HTMLElement | null)[] | null>;
+    gap: number;
+    page: number;
+    pageSnapPoints: number[];
+    pagePickerInset: boolean;
+    canScrollNext: boolean;
+    canScrollPrev: boolean;
+    scrollTo: (pageIndex: number, behavior: 'instant' | 'smooth') => void;
+    scrollPrev: () => void;
+    scrollNext: () => void;
+    loop: boolean;
+    scrollPadding: number;
+    slidesPerPage: number;
+    slidesPerMove: number | 'auto';
+    snapType: UseCarouselProps['snapType'];
+    snapStop: UseCarouselProps['snapStop'];
+    scrollBehavior: UseCarouselProps['scrollBehavior'];
+    maxDots: number;
+}
+
+interface Props$4 extends UseCarouselProps, ComponentProps<'div'> {
+    children?: ReactNode;
+    className?: string;
+}
+declare const Carousel$1: {
+    ({ className, snapType, snapStop, scrollBehavior, slidesPerMove, pagePickerInset, slidesPerPage, loop, children, gap, defaultPage, page, onPageChange, maxDots, ...props }: Props$4): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+interface ControlsProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+}
+declare const CarouselControls: {
+    ({ children, className, ...props }: ControlsProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+declare const CarouselNextButton: {
+    ({ "aria-label": ariaLabel, ...buttonProps }: IconButtonProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+interface Props$3 {
+    children?: ReactNode;
+    'aria-label': string;
+    index: number;
+    className?: string;
+    unstyled?: boolean;
+    intent?: 'basic' | 'surface';
+}
+declare const CarouselPageIndicator: {
+    ({ children, unstyled, index, "aria-label": ariaLabel, className, intent, }: Props$3): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+interface RenderProps extends CarouselAPI {
+    pages: number[];
+}
+interface Props$2 {
+    children: (renderProps: RenderProps) => ReactNode;
+    className?: string;
+}
+declare const CarouselPagePicker: {
+    ({ children, className }: Props$2): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+declare const CarouselPrevButton: {
+    ({ "aria-label": ariaLabel, ...buttonProps }: IconButtonProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+interface CarouselSlideProps extends ComponentProps<'div'> {
+    isSnapPoint?: boolean;
+    children?: ReactNode;
+    index?: number;
+    totalSlides?: number;
+    className?: string;
+}
+declare const CarouselSlide: {
+    ({ children, index, totalSlides, className, ...props }: CarouselSlideProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+interface Props$1 extends ComponentProps<'div'> {
+    children?: ReactNode;
+    className?: string;
+}
+declare const CarouselSlides: {
+    ({ children, className }: Props$1): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+interface Props {
+    children: ReactNode;
+}
+declare const CarouselViewport: {
+    ({ children }: Props): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+declare const Carousel: typeof Carousel$1 & {
+    Controls: typeof CarouselControls;
+    NextButton: typeof CarouselNextButton;
+    PrevButton: typeof CarouselPrevButton;
+    Slide: typeof CarouselSlide;
+    Slides: typeof CarouselSlides;
+    Viewport: typeof CarouselViewport;
+    PagePicker: typeof CarouselPagePicker;
+    PageIndicator: typeof CarouselPageIndicator;
+};
+
+export { Carousel };