@arctura/atomics 0.0.1

package/dist/src/card/Footer.d.ts

@@ -0,0 +1,67 @@
+import type { FC, HTMLAttributes, Ref } from 'react';
+import type { ButtonAdornment, ButtonVariant } from '@/src/buttons';
+/**
+ * Describes an action button for the Card Footer.
+ *
+ * @property {Adornment} [endAdornment] - Element to display at the end of the button (e.g., icon).
+ * @property {string} [href] - URL to link to when the button is clicked.
+ * @property {string} label - Button label text.
+ * @property {() => void} [onClick] - Click handler for the button.
+ * @property {Adornment} [startAdornment] - Element to display at the start of the button (e.g., icon).
+ * @property {string} [target] - Target attribute for the link (e.g., '_blank').
+ * @property {ButtonVariant} [variant] - Visual style variant for the button.
+ */
+interface FooterAction {
+    endAdornment?: ButtonAdornment;
+    href?: string;
+    label: string;
+    onClick?: () => void;
+    startAdornment?: ButtonAdornment;
+    target?: string;
+    variant?: ButtonVariant;
+}
+/**
+ * Props for the Card Footer component.
+ *
+ * @property {FooterAction[]} [actions] - Array of action button definitions to display in the footer.
+ * @property {string} [description] - Optional description text to display below the title/subtitle.
+ * @property {Ref<HTMLDivElement>} [ref] - Ref for the footer container div.
+ * @property {string} [subtitle] - Optional subtitle text to display below the title.
+ * @property {string} [title] - Title text to display in the footer.
+ */
+interface FooterProps extends HTMLAttributes<HTMLDivElement> {
+    actions?: FooterAction[];
+    description?: string;
+    ref?: Ref<HTMLDivElement>;
+    subtitle?: string;
+    title?: string;
+}
+/**
+ * Card Footer component for displaying a title, subtitle, description, and action buttons.
+ *
+ * Renders a styled footer section with optional title, subtitle, description, and a row of action buttons. Each action is rendered as a Button with optional adornments and link support.
+ *
+ * @param {FooterProps} props - Props for configuring the footer content and actions.
+ * @returns {JSX.Element} The rendered footer component.
+ *
+ * @example
+ * ```tsx
+ * import { Footer } from '@/src';
+ *
+ * const MyCardFooter = () => (
+ *  <Footer
+ *    title="Footer Title"
+ *    subtitle="Footer Subtitle"
+ *    description="This is a description for the card footer."
+ *    actions={[
+ *      { label: 'Action 1', onClick: () => console.log('Action 1 clicked') },
+ *      { label: 'Action 2', href: 'https://example.com', target: '_blank' },
+ *    ]}
+ *  />
+ * );
+ * ```
+ */
+declare const Footer: FC<FooterProps>;
+export { Footer };
+export type { FooterAction };
+//# sourceMappingURL=Footer.d.ts.map

package/dist/src/card/Footer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Footer.d.ts","sourceRoot":"","sources":["../../../src/card/Footer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,cAAc,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAErD,OAAO,KAAK,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAGpE;;;;;;;;;;GAUG;AACH,UAAU,YAAY;IACpB,YAAY,CAAC,EAAE,eAAe,CAAC;IAC/B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,cAAc,CAAC,EAAE,eAAe,CAAC;IACjC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,aAAa,CAAC;CACzB;AAED;;;;;;;;GAQG;AACH,UAAU,WAAY,SAAQ,cAAc,CAAC,cAAc,CAAC;IAC1D,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,QAAA,MAAM,MAAM,EAAE,EAAE,CAAC,WAAW,CAqD3B,CAAC;AAIF,OAAO,EAAE,MAAM,EAAE,CAAC;AAClB,YAAY,EAAE,YAAY,EAAE,CAAC"}

package/dist/src/card/Header.d.ts

@@ -0,0 +1,56 @@
+import type { ComponentProps, FC, HTMLAttributes, ReactElement, ReactNode, Ref } from 'react';
+import type { IconDefinition } from '@fortawesome/free-solid-svg-icons';
+import { Badge } from '@/src/badge';
+/**
+ * An adornment that may appear in the card header.
+ *
+ * This can be either:
+ * - an `IconDefinition` (a FontAwesome icon) which will be rendered
+ *   with `FontAwesomeIcon`, or
+ * - an object with a `src` string and optional `alt` text which will be
+ *   rendered using a native image element.
+ */
+type HeaderAdornment = IconDefinition | {
+    src: string;
+    alt?: string;
+};
+/**
+ * Props for the Card Header component.
+ *
+ * @property {HeaderAdornment} [adornment] - Optional adornment which can be an icon definition or an image source with alt text.
+ * @property {ReactElement<ComponentProps<typeof Badge>>} [badge] - Optional badge element to display.
+ * @property {Ref<HTMLDivElement>} [ref] - Ref for the header div.
+ * @property {ReactNode} [subtitle] - Optional subtitle content.
+ * @property {string} title - Main title text (required).
+ */
+interface HeaderProps extends HTMLAttributes<HTMLDivElement> {
+    adornment?: HeaderAdornment;
+    badge?: ReactElement<ComponentProps<typeof Badge>>;
+    ref?: Ref<HTMLDivElement>;
+    subtitle?: ReactNode;
+    title: string;
+}
+/**
+ * Card Header component for displaying a title, optional icon, badge, and subtitle.
+ *
+ * @param {HeaderProps} props - Props for configuring the header content and appearance.
+ * @returns {JSX.Element} The rendered card header.
+ *
+ * @example
+ * ```tsx
+ * import { Badge, Header } from '@/src';
+ * import { faStar } from '@fortawesome/free-solid-svg-icons';
+ *
+ * const MyCardHeader = () => (
+ *  <Header
+ *    title="Card Title"
+ *    subtitle="This is a subtitle for the card header."
+ *    adornment={faStar}
+ *    badge={<Badge>New</Badge>}
+ *  />
+ * );
+ * ```
+ */
+declare const Header: FC<HeaderProps>;
+export { Header };
+//# sourceMappingURL=Header.d.ts.map

package/dist/src/card/Header.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../src/card/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,EAAE,EAAE,cAAc,EAAE,YAAY,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAG9F,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AACxE,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAGpC;;;;;;;;GAQG;AACH,KAAK,eAAe,GAAG,cAAc,GAAG;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,GAAG,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAEtE;;;;;;;;GAQG;AACH,UAAU,WAAY,SAAQ,cAAc,CAAC,cAAc,CAAC;IAC1D,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,KAAK,CAAC,EAAE,YAAY,CAAC,cAAc,CAAC,OAAO,KAAK,CAAC,CAAC,CAAC;IACnD,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;CACf;AA8CD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,QAAA,MAAM,MAAM,EAAE,EAAE,CAAC,WAAW,CA0B3B,CAAC;AAIF,OAAO,EAAE,MAAM,EAAE,CAAC"}

package/dist/src/card/Media.d.ts

@@ -0,0 +1,65 @@
+import type { FC, HTMLAttributes, Ref } from 'react';
+/**
+ * Supported aspect ratios for the Media component.
+ *
+ * - '1:1': Square
+ * - '16:9': Widescreen
+ * - '4:3': Standard
+ * - '3:2': Classic photo
+ * - '21:9': Ultra-wide
+ */
+type AspectRatio = '1:1' | '16:9' | '4:3' | '3:2' | '21:9';
+/**
+ * Image loading priority for the Media component.
+ *
+ * - 'eager': Loads image immediately (high priority)
+ * - 'lazy': Defers loading until needed (default)
+ */
+type MediaPriority = 'eager' | 'lazy';
+/**
+ * Props for the Card Media component.
+ *
+ * @property {string} [alt] - Alternative text for the image.
+ * @property {AspectRatio} [aspectRatio] - Aspect ratio for the media container.
+ * @property {boolean} [footerless] - If true, applies rounded corners to the bottom of the media.
+ * @property {boolean} [headerless] - If true, applies rounded corners to the top of the media.
+ * @property {MediaPriority} [priority] - Image loading priority ('eager' or 'lazy').
+ * @property {Ref<HTMLDivElement>} [ref] - Ref for the media container div.
+ * @property {string} [sizes] - Responsive image sizes attribute.
+ * @property {string} [src] - Image source URL.
+ */
+interface MediaProps extends HTMLAttributes<HTMLDivElement> {
+    alt?: string;
+    aspectRatio?: AspectRatio;
+    footerless?: boolean;
+    headerless?: boolean;
+    priority?: MediaPriority;
+    ref?: Ref<HTMLDivElement>;
+    sizes?: string;
+    src?: string;
+}
+/**
+ * Card Media component for displaying an image with configurable aspect ratio and rounded corners.
+ * Renders a responsive image with support for custom aspect ratios, header/footer corner rounding, and loading priority.
+ *
+ * @param {MediaProps} props - Props for configuring the media content and appearance.
+ * @returns {JSX.Element} The rendered media component.
+ *
+ * @example
+ * ```tsx
+ * import { Media } from '@/src';
+ *
+ * const MyCardMedia = () => (
+ *  <Media
+ *    src="/path/to/image.jpg"
+ *    alt="Description of the image"
+ *    aspectRatio="16:9"
+ *    priority="eager"
+ *  />
+ * );
+ * ```
+ */
+declare const Media: FC<MediaProps>;
+export { Media };
+export type { MediaProps };
+//# sourceMappingURL=Media.d.ts.map

package/dist/src/card/Media.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Media.d.ts","sourceRoot":"","sources":["../../../src/card/Media.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,cAAc,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAGrD;;;;;;;;GAQG;AACH,KAAK,WAAW,GAAG,KAAK,GAAG,MAAM,GAAG,KAAK,GAAG,KAAK,GAAG,MAAM,CAAC;AAE3D;;;;;GAKG;AACH,KAAK,aAAa,GAAG,OAAO,GAAG,MAAM,CAAC;AAEtC;;;;;;;;;;;GAWG;AACH,UAAU,UAAW,SAAQ,cAAc,CAAC,cAAc,CAAC;IACzD,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAoBD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,QAAA,MAAM,KAAK,EAAE,EAAE,CAAC,UAAU,CA+BzB,CAAC;AAIF,OAAO,EAAE,KAAK,EAAE,CAAC;AACjB,YAAY,EAAE,UAAU,EAAE,CAAC"}

package/dist/src/card/index.d.ts

@@ -0,0 +1,11 @@
+import { Header } from './Header';
+import { Card } from './Card';
+import { Footer } from './Footer';
+import { Media } from './Media';
+import type { FooterAction } from './Footer';
+export { Header };
+export { Card };
+export { Footer };
+export { Media };
+export type { FooterAction };
+//# sourceMappingURL=index.d.ts.map

package/dist/src/card/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/card/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAE7C,OAAO,EAAE,MAAM,EAAE,CAAC;AAClB,OAAO,EAAE,IAAI,EAAE,CAAC;AAChB,OAAO,EAAE,MAAM,EAAE,CAAC;AAClB,OAAO,EAAE,KAAK,EAAE,CAAC;AACjB,YAAY,EAAE,YAAY,EAAE,CAAC"}

package/dist/src/carousel/Carousel.d.ts

@@ -0,0 +1,124 @@
+import type { FC, HTMLAttributes, ReactNode, Ref } from 'react';
+import type { IconButtonVariant } from '@/src/buttons';
+/**
+ * Optional class overrides for the carousel layout regions.
+ */
+interface CarouselClasses {
+    /** Class applied to the outer carousel container. */
+    container?: string;
+    /** Class applied to the carousel controls. */
+    controls?: string;
+    /** Class applied to the controls wrapper. */
+    controlsContainer?: string;
+    /** Class applied to each pagination dot. */
+    dot?: string;
+    /** Class applied to the pagination dots container. */
+    dotsContainer?: string;
+    /** Class applied to the root carousel wrapper. */
+    root?: string;
+    /** Class applied to each carousel slide. */
+    slide?: string;
+    /** Class applied to the slides container. */
+    slidesContainer?: string;
+    /** Class applied to the inner slide content wrapper. */
+    slideInner?: string;
+}
+/**
+ * Gap size (in px) between carousel slides.
+ * @type {8|16|24|32|40|48}
+ */
+type CarouselGap = 8 | 16 | 24 | 32 | 40 | 48;
+/**
+ * ARIA role for the carousel container for accessibility.
+ * @type {'region'|'listbox'|'group'}
+ */
+type CarouselRole = 'region' | 'listbox' | 'group';
+/**
+ * Number of slides visible at once in the carousel.
+ * @type {1|2|3|4|5}
+ */
+type CarouselSlidesPerView = 1 | 2 | 3 | 4 | 5;
+/**
+ * Number of slides to scroll per navigation action.
+ * @type {1|2|3|4|5}
+ */
+type CarouselSlidesPerGroup = 1 | 2 | 3 | 4 | 5;
+/**
+ * Type of transition animation between slides.
+ * @type {'fade'|'slide'}
+ */
+type CarouselTransition = 'fade' | 'slide';
+/**
+ * Props for the Carousel component.
+ */
+interface CarouselProps extends Omit<HTMLAttributes<HTMLDivElement>, 'className'> {
+    /** ARIA label for the carousel region. */
+    'aria-label'?: string;
+    /** Automatically advances slides on an interval. */
+    autoPlay?: boolean;
+    /** Slide content rendered inside the carousel. */
+    children?: ReactNode;
+    /** Optional class overrides for carousel layout regions. */
+    classes?: CarouselClasses;
+    /** Visual variant for the previous and next controls. */
+    controlsVariant?: IconButtonVariant;
+    /** Initial slide index to show on mount. */
+    defaultIndex?: number;
+    /** Enables swipe and drag gestures. */
+    enableSwipe?: boolean;
+    /** Horizontal gap between slides, in pixels. */
+    gap?: CarouselGap;
+    /** Autoplay interval, in milliseconds. */
+    interval?: number;
+    /** Number of slides visible in the viewport. */
+    slidesPerView?: CarouselSlidesPerView;
+    /** Number of slides advanced per navigation action. */
+    slidesPerGroup?: CarouselSlidesPerGroup;
+    /** Enables looping when the carousel reaches either end. */
+    loop?: boolean;
+    /** Pauses autoplay while the pointer is over the carousel. */
+    pauseOnHover?: boolean;
+    /** ARIA role for the carousel wrapper. */
+    role?: CarouselRole;
+    /** Ref forwarded to the outer carousel wrapper. */
+    ref?: Ref<HTMLDivElement>;
+    /** Shows the previous and next navigation buttons. */
+    showControls?: boolean;
+    /** Shows pagination dots below the carousel. */
+    showDots?: boolean;
+    /** Transition style between slides. */
+    transition?: CarouselTransition;
+    /** Transition duration used by Embla, in milliseconds. */
+    transitionDuration?: number;
+}
+/**
+ * Carousel component for displaying a set of slides with optional autoplay, navigation controls, dots, and swipe support.
+ *
+ * @param {CarouselProps} props - Props for configuring the carousel behavior and appearance.
+ * @returns {JSX.Element} The rendered carousel component.
+ *
+ * @example
+ * ```tsx
+ * import { Carousel } from '@/src';
+ *
+ * const MyCarousel = () => (
+ *  <Carousel
+ *     aria-label="Example Carousel"
+ *     autoPlay
+ *     interval={5000}
+ *     slidesPerView={1}
+ *     showControls
+ *     showDots
+ *     transition="fade"
+ *     transitionDuration={50}
+ * >
+ *    <div>Slide 1</div>
+ *    <div>Slide 2</div>
+ *    <div>Slide 3</div>
+ * </Carousel>
+ * );
+ * ```
+ */
+declare const Carousel: FC<CarouselProps>;
+export { Carousel };
+//# sourceMappingURL=Carousel.d.ts.map

package/dist/src/carousel/Carousel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Carousel.d.ts","sourceRoot":"","sources":["../../../src/carousel/Carousel.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAE,cAAc,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAQhE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAEvD;;GAEG;AACH,UAAU,eAAe;IACvB,qDAAqD;IACrD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,6CAA6C;IAC7C,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,4CAA4C;IAC5C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,sDAAsD;IACtD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,kDAAkD;IAClD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,4CAA4C;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6CAA6C;IAC7C,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,wDAAwD;IACxD,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED;;;GAGG;AACH,KAAK,WAAW,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAE9C;;;GAGG;AACH,KAAK,YAAY,GAAG,QAAQ,GAAG,SAAS,GAAG,OAAO,CAAC;AAEnD;;;GAGG;AACH,KAAK,qBAAqB,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AAE/C;;;GAGG;AACH,KAAK,sBAAsB,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AAEhD;;;GAGG;AACH,KAAK,kBAAkB,GAAG,MAAM,GAAG,OAAO,CAAC;AAwB3C;;GAEG;AACH,UAAU,aAAc,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,WAAW,CAAC;IAC/E,0CAA0C;IAC1C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oDAAoD;IACpD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kDAAkD;IAClD,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,4DAA4D;IAC5D,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,yDAAyD;IACzD,eAAe,CAAC,EAAE,iBAAiB,CAAC;IACpC,4CAA4C;IAC5C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,uCAAuC;IACvC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gDAAgD;IAChD,GAAG,CAAC,EAAE,WAAW,CAAC;IAClB,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,gDAAgD;IAChD,aAAa,CAAC,EAAE,qBAAqB,CAAC;IACtC,uDAAuD;IACvD,cAAc,CAAC,EAAE,sBAAsB,CAAC;IACxC,4DAA4D;IAC5D,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,8DAA8D;IAC9D,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,0CAA0C;IAC1C,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,mDAAmD;IACnD,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,sDAAsD;IACtD,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,gDAAgD;IAChD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uCAAuC;IACvC,UAAU,CAAC,EAAE,kBAAkB,CAAC;IAChC,0DAA0D;IAC1D,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,QAAA,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,CA8O/B,CAAC;AAIF,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/dist/src/carousel/Hero.d.ts

@@ -0,0 +1,156 @@
+import type { FC, HTMLAttributes, ReactNode } from 'react';
+import type { HeadingVariant } from '@/src/typography';
+/**
+ * Optional class overrides for the hero layout regions.
+ */
+interface HeaderClasses {
+    /** Class applied to the header action row. */
+    action?: string;
+    /** Class applied to the overlay controls wrapper. */
+    controls?: string;
+    /** Class applied to each pagination dot. */
+    dot?: string;
+    /** Class applied to the pagination dots container. */
+    dotsContainer?: string;
+    /** Class applied to the root hero container. */
+    root?: string;
+    /** Class applied to each hero slide. */
+    slide?: string;
+    /** Class applied to the slide viewport wrapper. */
+    viewport?: string;
+    /** Classes applied to header overlay regions. */
+    header?: {
+        /** Class applied to the main header overlay container. */
+        root?: string;
+        /** Class applied to the header title. */
+        title?: string;
+    };
+}
+/**
+ * Represents a link/button in the Hero section.
+ */
+interface HeroLink {
+    /** Destination URL for the hero action. */
+    href: string;
+    /** Visible label for the action. */
+    label: string;
+    /** Optional visual style for the action button. */
+    variant?: 'primary' | 'secondary' | 'text' | 'outline';
+}
+/**
+ * Header content for the Hero section, including title, description, and links.
+ */
+interface HeroHeader {
+    /** Optional description text rendered below the title. */
+    description?: ReactNode;
+    /** Optional array of action links or buttons shown in the header. */
+    links?: HeroLink[];
+    /** Optional title content, either plain text or JSX. */
+    title?: string;
+    /** Typography variant used for the title. */
+    variant?: HeadingVariant;
+}
+/**
+ * Represents an image displayed in the Hero carousel.
+ */
+interface HeroImage {
+    /** Source path or URL for the hero image. */
+    src: string;
+    /** Alternative text describing the hero image. */
+    alt: string;
+}
+/**
+ * Allowed height options for the Hero component.
+ * @type {'sm'|'md'|'lg'|'xl'|'full'}
+ */
+type HeroHeight = 'sm' | 'md' | 'lg' | 'xl' | 'full';
+/**
+ * Allowed aspect ratio options for the Hero component.
+ * @type {'16:9'|'4:3'|'1:1'}
+ */
+type HeroAspectRatio = '16:9' | '4:3' | '1:1';
+/**
+ * Props for the Hero component, configuring layout, images, header, and carousel behavior.
+ */
+interface HeroProps extends Omit<HTMLAttributes<HTMLDivElement>, 'className'> {
+    /** Aspect ratio used when the hero is rendered as an image container. */
+    aspectRatio?: HeroAspectRatio;
+    /** Automatically advances between images on a timer. */
+    autoPlay?: boolean;
+    /** Optional class overrides for hero layout regions. */
+    classes?: HeaderClasses;
+    /** Enables swipe and drag gestures for the hero carousel. */
+    enableSwipe?: boolean;
+    /** Header content rendered over the hero images. */
+    header?: HeroHeader;
+    /** Fixed hero height preset used when `aspectRatio` is not provided. */
+    height?: HeroHeight;
+    /** Images displayed inside the hero carousel. */
+    images?: HeroImage[];
+    /** Autoplay interval in milliseconds. */
+    interval?: number;
+    /** Uses lazy loading for hero images instead of eager loading. */
+    lazyLoad?: boolean;
+    /** Enables looping when the carousel reaches either end. */
+    loop?: boolean;
+    /** CSS object-fit value used for the hero images. */
+    objectFit?: 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';
+    /** Shows the previous and next navigation controls. */
+    showControls?: boolean;
+    /** Pauses autoplay while the pointer is over the hero. */
+    pauseOnHover?: boolean;
+    /** Enables the mobile-first responsive layout. */
+    responsive?: boolean;
+    /** Shows pagination dots below the hero. */
+    showDots?: boolean;
+    /** Transition style used between hero images. */
+    transition?: 'fade' | 'slide';
+    /** Transition duration in milliseconds. */
+    transitionDuration?: number;
+}
+/**
+ * Hero component for displaying a prominent section with images, header, and carousel features.
+ *
+ * @param {HeroProps} props - Props for configuring the hero section's layout, images, and behavior.
+ * @returns {JSX.Element} The rendered hero section.
+ *
+ * @example
+ * ```tsx
+ * import { Hero } from '@/src';
+ *
+ * const MyHero = () => (
+ *  <Hero
+ *     aspectRatio="16:9"
+ *     autoPlay
+ *     header={{
+ *      title: 'Welcome to Our Site',
+ *      description: 'Discover our amazing products and services.',
+ *      links: [
+ *        { href: '/products', label: 'Shop Now', variant: 'primary' },
+ *        { href: '/about', label: 'Learn More', variant: 'secondary' },
+ *      ],
+ *    }}
+ *    height="lg"
+ *    images={[
+ *      { src: '/images/hero1.jpg', alt: 'Hero Image 1' },
+ *      { src: '/images/hero2.jpg', alt: 'Hero Image 2' },
+ *    ]}
+ *    interval={5000}
+ *    lazyLoad
+ *    loop
+ *    objectFit="cover"
+ *    showControls
+ *    pauseOnHover
+ *    responsive
+ *    showDots
+ *    transition="fade"
+ *    transitionDuration={700}
+ *  >
+ *    {Hero content goes here}
+ *  </Hero>
+ * );
+ * ```
+ */
+declare const Hero: FC<HeroProps>;
+export { Hero };
+//# sourceMappingURL=Hero.d.ts.map

package/dist/src/carousel/Hero.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Hero.d.ts","sourceRoot":"","sources":["../../../src/carousel/Hero.tsx"],"names":[],"mappings":"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"}

package/dist/src/carousel/index.d.ts

@@ -0,0 +1,4 @@
+import { Hero } from './Hero';
+import { Carousel } from './Carousel';
+export { Hero, Carousel };
+//# sourceMappingURL=index.d.ts.map

package/dist/src/carousel/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/carousel/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC"}

package/dist/src/drawer/Drawer.d.ts

@@ -0,0 +1,40 @@
+import type { FC, HTMLAttributes, KeyboardEvent, MouseEvent, ReactNode, Ref } from 'react';
+interface DrawerClasses {
+    body?: string;
+    backdrop?: string;
+    header?: {
+        center?: string;
+        left?: string;
+        right?: string;
+        root?: string;
+    };
+    overlay?: string;
+    root?: string;
+}
+interface DrawerHeader {
+    title?: string;
+    leftSlot?: ReactNode;
+    rightSlot?: ReactNode;
+}
+interface DrawerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'className'> {
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    anchor?: 'left' | 'right' | 'top' | 'bottom';
+    classes?: DrawerClasses;
+    closeOnEscape?: boolean;
+    children?: ReactNode;
+    backdropProps?: HTMLAttributes<HTMLDivElement>;
+    backdropRef?: Ref<HTMLDivElement>;
+    header?: DrawerHeader;
+    id?: string;
+    onBackdropClick?: (event: MouseEvent<HTMLDivElement>) => void;
+    onClose: () => void;
+    onKeyDown?: (event: KeyboardEvent<HTMLDivElement>) => void;
+    open: boolean;
+    ref?: Ref<HTMLDivElement>;
+    showBackdrop?: boolean;
+}
+declare const Drawer: FC<DrawerProps>;
+export { Drawer };
+export type { DrawerClasses };
+//# sourceMappingURL=Drawer.d.ts.map

package/dist/src/drawer/Drawer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../src/drawer/Drawer.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAE,cAAc,EAAE,aAAa,EAAE,UAAU,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAQ3F,UAAU,aAAa;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE;QACP,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,IAAI,CAAC,EAAE,MAAM,CAAC;KACf,CAAC;IACF,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,UAAU,YAAY;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB;AAED,UAAU,WAAY,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,WAAW,CAAC;IAC7E,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,MAAM,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAC;IAC7C,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,aAAa,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;IAC/C,WAAW,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAClC,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IAC9D,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IAC3D,IAAI,EAAE,OAAO,CAAC;IACd,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,QAAA,MAAM,MAAM,EAAE,EAAE,CAAC,WAAW,CAqH3B,CAAC;AAIF,OAAO,EAAE,MAAM,EAAE,CAAC;AAClB,YAAY,EAAE,aAAa,EAAE,CAAC"}

package/dist/src/drawer/index.d.ts

@@ -0,0 +1,5 @@
+import { Drawer } from './Drawer';
+import type { DrawerClasses } from './Drawer';
+export { Drawer };
+export type { DrawerClasses };
+//# sourceMappingURL=index.d.ts.map

package/dist/src/drawer/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/drawer/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAE9C,OAAO,EAAE,MAAM,EAAE,CAAC;AAClB,YAAY,EAAE,aAAa,EAAE,CAAC"}