@orion-ds/react 4.2.1 → 4.2.3

package/dist/components/Card/Card.types.d.ts

@@ -0,0 +1,104 @@
+import { HTMLAttributes, ReactNode } from 'react';
+
+/**
+ * Card visual variants
+ */
+export type CardVariant = "base" | "glass" | "elevated" | "outlined" | "image";
+/**
+ * Image card content position
+ */
+export type ImageCardPosition = "top" | "center" | "bottom";
+/**
+ * Card component props
+ *
+ * @example
+ * ```tsx
+ * <Card variant="base">
+ *   <Card.Header>Title</Card.Header>
+ *   <Card.Body>Content</Card.Body>
+ *   <Card.Footer>Footer</Card.Footer>
+ * </Card>
+ * ```
+ */
+export interface CardProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Visual variant
+     * @default 'base'
+     */
+    variant?: CardVariant;
+    /**
+     * Interactive card (adds hover effect)
+     * @default false
+     */
+    interactive?: boolean;
+    /**
+     * Background image URL (only for 'image' variant)
+     */
+    imageUrl?: string;
+    /**
+     * Content position for image variant
+     * @default 'bottom'
+     */
+    imagePosition?: ImageCardPosition;
+    /**
+     * Aspect ratio for image card (e.g., '16/9', '4/3', '1/1')
+     * @default '16/9'
+     */
+    aspectRatio?: string;
+    /**
+     * Card content
+     */
+    children?: ReactNode;
+}
+/**
+ * Card Header props
+ */
+export interface CardHeaderProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Header content
+     */
+    children?: ReactNode;
+}
+/**
+ * Card Body props
+ */
+export interface CardBodyProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Body content
+     */
+    children?: ReactNode;
+}
+/**
+ * Card Footer props
+ */
+export interface CardFooterProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Footer content
+     */
+    children?: ReactNode;
+}
+/**
+ * Image Card Content wrapper props
+ */
+export interface ImageContentProps extends HTMLAttributes<HTMLDivElement> {
+    children?: ReactNode;
+}
+/**
+ * Image Card Title props
+ */
+export interface ImageTitleProps extends HTMLAttributes<HTMLHeadingElement> {
+    children?: ReactNode;
+}
+/**
+ * Image Card Description props
+ */
+export interface ImageDescriptionProps extends HTMLAttributes<HTMLParagraphElement> {
+    children?: ReactNode;
+}
+/**
+ * Image Card Meta props
+ */
+export interface ImageMetaProps extends HTMLAttributes<HTMLSpanElement> {
+    children?: ReactNode;
+}
+//# sourceMappingURL=Card.types.d.ts.map

package/dist/components/Card/Card.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.types.d.ts","sourceRoot":"","sources":["../../../src/components/Card/Card.types.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,UAAU,GAAG,OAAO,CAAC;AAE/E;;GAEG;AACH,MAAM,MAAM,iBAAiB,GAAG,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAE5D;;;;;;;;;;;GAWG;AACH,MAAM,WAAW,SAAU,SAAQ,cAAc,CAAC,cAAc,CAAC;IAC/D;;;OAGG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;OAGG;IACH,aAAa,CAAC,EAAE,iBAAiB,CAAC;IAElC;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;GAEG;AACH,MAAM,WAAW,eAAgB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACrE;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;GAEG;AACH,MAAM,WAAW,aAAc,SAAQ,cAAc,CAAC,cAAc,CAAC;IACnE;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;GAEG;AACH,MAAM,WAAW,eAAgB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACrE;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;GAEG;AACH,MAAM,WAAW,iBAAkB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACvE,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;GAEG;AACH,MAAM,WAAW,eAAgB,SAAQ,cAAc,CAAC,kBAAkB,CAAC;IACzE,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;GAEG;AACH,MAAM,WAAW,qBAAsB,SAAQ,cAAc,CAAC,oBAAoB,CAAC;IACjF,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;GAEG;AACH,MAAM,WAAW,cAAe,SAAQ,cAAc,CAAC,eAAe,CAAC;IACrE,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB"}

package/dist/components/Card/index.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Card Component - Container for grouping related content.
+ *
+ * @example
+ * ```tsx
+ * import { Card, Button } from '@orion-ds/react';
+ *
+ * <Card variant="elevated">
+ *   <Card.Header>Card Title</Card.Header>
+ *   <Card.Body>Card content goes here.</Card.Body>
+ *   <Card.Footer>
+ *     <Button>Action</Button>
+ *   </Card.Footer>
+ * </Card>
+ * ```
+ */
+export { Card } from './Card';
+export type { CardProps, CardHeaderProps, CardBodyProps, CardFooterProps, CardVariant, } from './Card.types';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Card/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Card/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AACH,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,YAAY,EACV,SAAS,EACT,eAAe,EACf,aAAa,EACb,eAAe,EACf,WAAW,GACZ,MAAM,cAAc,CAAC"}

package/dist/components/Carousel/Carousel.d.ts

@@ -0,0 +1,4 @@
+import { CarouselProps } from './Carousel.types';
+
+export declare const Carousel: import('react').ForwardRefExoticComponent<CarouselProps & import('react').RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=Carousel.d.ts.map

package/dist/components/Carousel/Carousel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Carousel.d.ts","sourceRoot":"","sources":["../../../src/components/Carousel/Carousel.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AAGH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAYtD,eAAO,MAAM,QAAQ,0GAqRpB,CAAC"}

package/dist/components/Carousel/Carousel.stories.d.ts

@@ -0,0 +1,92 @@
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<import('./Carousel.types').CarouselProps & import('react').RefAttributes<HTMLDivElement>>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    argTypes: {
+        variant: {
+            control: "select";
+            options: string[];
+        };
+        aspectRatio: {
+            control: "select";
+            options: string[];
+        };
+        gap: {
+            control: "select";
+            options: string[];
+        };
+        align: {
+            control: "select";
+            options: string[];
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+/**
+ * Basic atomic Carousel component without any section wrapper.
+ * Use this inside Cards, Modals, or custom layouts.
+ */
+export declare const Default: Story;
+/**
+ * Carousel with cards aligned to container edge.
+ * Useful when you want cards to align with surrounding content.
+ */
+export declare const AlignedToContainer: Story;
+/**
+ * Carousel with cards starting from the edge (Apple style).
+ * Creates a more dramatic, edge-to-edge visual effect.
+ */
+export declare const AlignedToEdge: Story;
+/**
+ * Carousel inside a Card component.
+ * Demonstrates atomic composition for embedded carousels.
+ */
+export declare const InsideCard: Story;
+/**
+ * Product showcase variant with square cards.
+ */
+export declare const ProductVariant: Story;
+/**
+ * Gallery variant with hover-reveal captions.
+ */
+export declare const GalleryVariant: Story;
+/**
+ * Carousel with pagination dots instead of navigation arrows.
+ */
+export declare const WithPagination: Story;
+/**
+ * Carousel with both navigation and pagination.
+ */
+export declare const NavigationAndPagination: Story;
+/**
+ * Auto-scrolling carousel.
+ */
+export declare const AutoScroll: Story;
+/**
+ * Small gap between cards.
+ */
+export declare const SmallGap: Story;
+/**
+ * Large gap between cards.
+ */
+export declare const LargeGap: Story;
+/**
+ * Without peek effect - cards don't extend past container edge.
+ */
+export declare const NoPeek: Story;
+/**
+ * Square aspect ratio cards.
+ */
+export declare const SquareAspectRatio: Story;
+/**
+ * Portrait aspect ratio (3:4) cards.
+ */
+export declare const PortraitAspectRatio: Story;
+export declare const AllVariants: Story;
+//# sourceMappingURL=Carousel.stories.d.ts.map

package/dist/components/Carousel/Carousel.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Carousel.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Carousel/Carousel.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAIvD,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;CAyBuB,CAAC;AAElC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAyCnC;;;GAGG;AACH,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,kBAAkB,EAAE,KAKhC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,aAAa,EAAE,KAK3B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,UAAU,EAAE,KAwBxB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc,EAAE,KAU5B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc,EAAE,KAS5B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc,EAAE,KAM5B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,uBAAuB,EAAE,KAMrC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,UAAU,EAAE,KAMxB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,MAAM,EAAE,KAKpB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,iBAAiB,EAAE,KAK/B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,mBAAmB,EAAE,KAKjC,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAgCzB,CAAC"}

package/dist/components/Carousel/Carousel.types.d.ts

@@ -0,0 +1,184 @@
+import { HTMLAttributes, ReactNode } from 'react';
+
+/**
+ * Carousel visual variant
+ */
+export type CarouselVariant = "editorial" | "product" | "gallery";
+/**
+ * Carousel aspect ratio
+ */
+export type CarouselAspectRatio = "16/9" | "4/3" | "1/1" | "3/4";
+/**
+ * Carousel gap size
+ */
+export type CarouselGap = "sm" | "md" | "lg";
+/**
+ * Overlay style for carousel cards
+ */
+export type CarouselOverlay = "none" | "gradient" | "dark";
+/**
+ * Track alignment relative to container
+ */
+export type CarouselAlign = "container" | "edge";
+/**
+ * Navigation render props
+ */
+export interface CarouselNavigationProps {
+    canScrollLeft: boolean;
+    canScrollRight: boolean;
+    scrollLeft: () => void;
+    scrollRight: () => void;
+    activeIndex: number;
+    totalItems: number;
+}
+/**
+ * Carousel item data structure
+ */
+export interface CarouselItem {
+    /**
+     * Background image element (typically an img)
+     */
+    image: ReactNode;
+    /**
+     * Small category/tag text above title
+     */
+    eyebrow?: string;
+    /**
+     * Main headline for the card
+     */
+    title: string;
+    /**
+     * Short description/subtitle
+     */
+    description?: string;
+    /**
+     * Optional action element (link or button)
+     */
+    action?: ReactNode;
+    /**
+     * Overlay style for text legibility
+     * @default 'gradient'
+     */
+    overlay?: CarouselOverlay;
+}
+/**
+ * Carousel card props (internal component)
+ */
+export interface CarouselCardProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Carousel item data
+     */
+    item: CarouselItem;
+    /**
+     * Aspect ratio of the card
+     * @default '16/9'
+     */
+    aspectRatio?: CarouselAspectRatio;
+    /**
+     * Visual variant
+     * @default 'editorial'
+     */
+    variant?: CarouselVariant;
+}
+/**
+ * Atomic Carousel component props
+ *
+ * This is the low-level carousel component. For page sections, use CarouselSection.
+ *
+ * @example
+ * ```tsx
+ * // Inside a Card or Modal
+ * <Carousel
+ *   items={[
+ *     { image: <img src="/1.jpg" />, title: "Slide 1" },
+ *     { image: <img src="/2.jpg" />, title: "Slide 2" },
+ *   ]}
+ *   variant="gallery"
+ *   aspectRatio="16/9"
+ * />
+ * ```
+ */
+export interface CarouselProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Array of carousel items
+     */
+    items: CarouselItem[];
+    /**
+     * Visual variant
+     * - editorial: Magazine-style with large images and text overlays
+     * - product: Product showcase cards
+     * - gallery: Simple image gallery
+     * @default 'editorial'
+     */
+    variant?: CarouselVariant;
+    /**
+     * Aspect ratio for cards
+     * @default '16/9'
+     */
+    aspectRatio?: CarouselAspectRatio;
+    /**
+     * Show cards cut at edge (Apple style peek effect)
+     * @default true
+     */
+    peek?: boolean;
+    /**
+     * Enable auto-scroll
+     * @default false
+     */
+    autoScroll?: boolean;
+    /**
+     * Auto-scroll interval in milliseconds
+     * @default 5000
+     */
+    autoScrollInterval?: number;
+    /**
+     * Gap between cards
+     * @default 'md'
+     */
+    gap?: CarouselGap;
+    /**
+     * Track alignment
+     * - 'container': First card aligns with Container (matches section title)
+     * - 'edge': Cards start from screen edge (Apple style)
+     * @default 'edge'
+     */
+    align?: CarouselAlign;
+    /**
+     * Show navigation arrows
+     * @default true
+     */
+    showNavigation?: boolean;
+    /**
+     * Show pagination dots
+     * @default false
+     */
+    showPagination?: boolean;
+    /**
+     * Callback when active slide changes
+     */
+    onSlideChange?: (index: number) => void;
+    /**
+     * Custom navigation renderer
+     */
+    renderNavigation?: (props: CarouselNavigationProps) => ReactNode;
+    /**
+     * Pixel offset for container alignment.
+     * Used by CarouselSection to align first card snap point with title.
+     * When set, scroll-padding-inline-start aligns snap points to this offset.
+     * @internal
+     */
+    alignOffset?: number;
+    /**
+     * Make the active (focused) card 10% larger than the rest.
+     * Creates a "spotlight" effect that follows the scroll position.
+     * @default false
+     */
+    highlightActive?: boolean;
+    /**
+     * Enable infinite loop scrolling.
+     * When reaching the end, navigation continues from the beginning.
+     * @default false
+     */
+    loop?: boolean;
+}
+//# sourceMappingURL=Carousel.types.d.ts.map

package/dist/components/Carousel/Carousel.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Carousel.types.d.ts","sourceRoot":"","sources":["../../../src/components/Carousel/Carousel.types.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG,WAAW,GAAG,SAAS,GAAG,SAAS,CAAC;AAElE;;GAEG;AACH,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;AAEjE;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE7C;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,UAAU,GAAG,MAAM,CAAC;AAE3D;;GAEG;AACH,MAAM,MAAM,aAAa,GAAG,WAAW,GAAG,MAAM,CAAC;AAEjD;;GAEG;AACH,MAAM,WAAW,uBAAuB;IACtC,aAAa,EAAE,OAAO,CAAC;IACvB,cAAc,EAAE,OAAO,CAAC;IACxB,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC;IAEjB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;;OAGG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC;CAC3B;AAED;;GAEG;AACH,MAAM,WAAW,iBAAkB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACvE;;OAEG;IACH,IAAI,EAAE,YAAY,CAAC;IAEnB;;;OAGG;IACH,WAAW,CAAC,EAAE,mBAAmB,CAAC;IAElC;;;OAGG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC;CAC3B;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,WAAW,aAAc,SAAQ,cAAc,CAAC,cAAc,CAAC;IACnE;;OAEG;IACH,KAAK,EAAE,YAAY,EAAE,CAAC;IAEtB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC;IAE1B;;;OAGG;IACH,WAAW,CAAC,EAAE,mBAAmB,CAAC;IAElC;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAE5B;;;OAGG;IACH,GAAG,CAAC,EAAE,WAAW,CAAC;IAElB;;;;;OAKG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC;IAEtB;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAExC;;OAEG;IACH,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,uBAAuB,KAAK,SAAS,CAAC;IAEjE;;;;;OAKG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB"}

package/dist/components/Carousel/CarouselCard.d.ts

@@ -0,0 +1,7 @@
+import { CarouselCardProps } from './Carousel.types';
+
+export declare const CarouselCard: {
+    ({ item, aspectRatio, variant, className, style, ...rest }: CarouselCardProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+//# sourceMappingURL=CarouselCard.d.ts.map

package/dist/components/Carousel/CarouselCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CarouselCard.d.ts","sourceRoot":"","sources":["../../../src/components/Carousel/CarouselCard.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAG1D,eAAO,MAAM,YAAY;gEAOtB,iBAAiB;;CAsCnB,CAAC"}

package/dist/components/Carousel/index.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Carousel Component - Image/content slider.
+ *
+ * Atomic carousel component for use within cards, modals, or custom layouts.
+ * For full-page carousel sections, use CarouselSection from sections.
+ *
+ * @example
+ * ```tsx
+ * import { Carousel } from '@orion-ds/react';
+ *
+ * <Carousel
+ *   items={[
+ *     { id: '1', image: '/slide1.jpg', title: 'Slide 1' },
+ *     { id: '2', image: '/slide2.jpg', title: 'Slide 2' },
+ *     { id: '3', image: '/slide3.jpg', title: 'Slide 3' },
+ *   ]}
+ *   autoPlay
+ *   showNavigation
+ * />
+ * ```
+ */
+export { Carousel } from './Carousel';
+export { CarouselCard } from './CarouselCard';
+export type { CarouselProps, CarouselItem, CarouselCardProps, CarouselVariant, CarouselAspectRatio, CarouselGap, CarouselOverlay, CarouselAlign, CarouselNavigationProps, } from './Carousel.types';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Carousel/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Carousel/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,YAAY,EACV,aAAa,EACb,YAAY,EACZ,iBAAiB,EACjB,eAAe,EACf,mBAAmB,EACnB,WAAW,EACX,eAAe,EACf,aAAa,EACb,uBAAuB,GACxB,MAAM,kBAAkB,CAAC"}

package/dist/components/Chart/Chart.d.ts

@@ -0,0 +1,35 @@
+import { default as React } from 'react';
+import { Tooltip, Legend } from 'recharts';
+import { ChartContainerProps, ChartTooltipContentProps, ChartLegendContentProps, ChartGradientProps } from './Chart.types';
+
+/**
+ * ChartContainer — wraps Recharts with CSS variable injection from config
+ */
+export declare const ChartContainer: React.FC<ChartContainerProps>;
+/**
+ * ChartTooltipContent — Orion-styled tooltip for Recharts
+ */
+export declare const ChartTooltipContent: React.FC<ChartTooltipContentProps>;
+/**
+ * ChartLegendContent — Orion-styled legend for Recharts
+ */
+export declare const ChartLegendContent: React.FC<ChartLegendContentProps>;
+/**
+ * ChartGradient — SVG linearGradient helper for elegant area chart fills.
+ *
+ * Place inside `<defs>` within a Recharts chart, then reference via `fill="url(#id)"`.
+ *
+ * @example
+ * ```tsx
+ * <AreaChart data={data}>
+ *   <defs>
+ *     <ChartGradient id="fillRevenue" color="var(--chart-1)" />
+ *   </defs>
+ *   <Area dataKey="revenue" fill="url(#fillRevenue)" fillOpacity={1} />
+ * </AreaChart>
+ * ```
+ */
+export declare const ChartGradient: React.FC<ChartGradientProps>;
+export declare const ChartTooltip: typeof Tooltip;
+export declare const ChartLegend: typeof Legend;
+//# sourceMappingURL=Chart.d.ts.map

package/dist/components/Chart/Chart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chart.d.ts","sourceRoot":"","sources":["../../../src/components/Chart/Chart.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAEH,OAAO,KAAoC,MAAM,OAAO,CAAC;AACzD,OAAO,EAAuB,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAChE,OAAO,KAAK,EAEV,mBAAmB,EACnB,wBAAwB,EACxB,uBAAuB,EACvB,kBAAkB,EACnB,MAAM,eAAe,CAAC;AAOvB;;GAEG;AACH,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA4BxD,CAAC;AAIF;;GAEG;AACH,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CAwDlE,CAAC;AAIF;;GAEG;AACH,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CA8BhE,CAAC;AAIF;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAUtD,CAAC;AAKF,eAAO,MAAM,YAAY,gBAAU,CAAC;AACpC,eAAO,MAAM,WAAW,eAAS,CAAC"}

package/dist/components/Chart/Chart.stories.d.ts

@@ -0,0 +1,36 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { ChartContainer } from './Chart';
+
+declare const meta: Meta<typeof ChartContainer>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+/**
+ * Bar chart with brand-aware `--chart-1`/`--chart-2` tokens,
+ * rounded top corners, horizontal-only grid, and clean axis styling.
+ */
+export declare const BarChartExample: Story;
+/**
+ * Line chart with smooth monotone curves, no dots by default,
+ * and active dot ring on hover.
+ */
+export declare const LineChartExample: Story;
+/**
+ * Stacked area chart matching shadcn/ui "Area Chart - Interactive" style.
+ * Dense data, natural curves, SVG gradient fills via `ChartGradient`,
+ * clear stroke lines on top, horizontal-only grid.
+ */
+export declare const AreaChartGradient: Story;
+/**
+ * Donut pie chart with `--chart-1..3` palette and a central summary label.
+ */
+export declare const PieChartExample: Story;
+/**
+ * Single-series area chart with gradient fill — minimal and elegant.
+ * Line + gradient style matching shadcn aesthetics.
+ */
+export declare const AreaGradientSingle: Story;
+/**
+ * Custom value and label formatter demonstration with `--chart-*` palette.
+ */
+export declare const CustomTooltipFormatter: Story;
+//# sourceMappingURL=Chart.stories.d.ts.map

package/dist/components/Chart/Chart.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chart.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Chart/Chart.stories.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAgBvD,OAAO,EACL,cAAc,EAMf,MAAM,SAAS,CAAC;AAGjB,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,cAAc,CAOrC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AA4EnC;;;GAGG;AACH,eAAO,MAAM,eAAe,EAAE,KA6B7B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,gBAAgB,EAAE,KAmC9B,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,EAAE,KA2D/B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,eAAe,EAAE,KAuE7B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,kBAAkB,EAAE,KA2ChC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,sBAAsB,EAAE,KAoCpC,CAAC"}

package/dist/components/Chart/Chart.types.d.ts

@@ -0,0 +1,135 @@
+import { HTMLAttributes, ReactNode } from 'react';
+
+/**
+ * Configuration for a single data series in a chart
+ */
+export interface ChartConfigItem {
+    /**
+     * Display label for the series
+     */
+    label: string;
+    /**
+     * CSS color value or token variable (e.g., 'var(--color-brand-500)')
+     */
+    color: string;
+    /**
+     * Optional icon for the legend
+     */
+    icon?: ReactNode;
+}
+/**
+ * Chart configuration object — maps data keys to display settings
+ *
+ * @example
+ * ```ts
+ * const config: ChartConfig = {
+ *   revenue: { label: 'Revenue', color: 'var(--color-brand-500)' },
+ *   expenses: { label: 'Expenses', color: 'var(--status-error)' },
+ * };
+ * ```
+ */
+export type ChartConfig = Record<string, ChartConfigItem>;
+/**
+ * ChartContainer props — wraps Recharts with CSS variable injection
+ */
+export interface ChartContainerProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Chart configuration mapping data keys to colors/labels
+     */
+    config: ChartConfig;
+    /**
+     * The Recharts chart element
+     */
+    children: ReactNode;
+    /**
+     * Additional class name
+     */
+    className?: string;
+}
+/**
+ * ChartTooltipContent props
+ */
+export interface ChartTooltipContentProps {
+    /**
+     * Whether to show the color indicator dot
+     * @default true
+     */
+    indicator?: "dot" | "line" | "dashed";
+    /**
+     * Hide the label text
+     * @default false
+     */
+    hideLabel?: boolean;
+    /**
+     * Hide the indicator
+     * @default false
+     */
+    hideIndicator?: boolean;
+    /**
+     * Custom label formatter
+     */
+    labelFormatter?: (label: string) => string;
+    /**
+     * Custom value formatter
+     */
+    formatter?: (value: number, name: string) => string;
+    /**
+     * Additional class name
+     */
+    className?: string;
+    /**
+     * Recharts injected props (passed automatically)
+     */
+    active?: boolean;
+    payload?: Array<{
+        name: string;
+        value: number;
+        dataKey: string;
+        color: string;
+        payload: Record<string, unknown>;
+    }>;
+    label?: string;
+}
+/**
+ * ChartGradient props — SVG linearGradient helper for area charts
+ */
+export interface ChartGradientProps {
+    /**
+     * Unique ID for the gradient (referenced via `fill="url(#id)"`)
+     */
+    id: string;
+    /**
+     * CSS color value or token variable
+     */
+    color: string;
+    /**
+     * Opacity at the top of the gradient
+     * @default 0.4
+     */
+    startOpacity?: number;
+    /**
+     * Opacity at the bottom of the gradient
+     * @default 0.05
+     */
+    endOpacity?: number;
+}
+/**
+ * ChartLegendContent props
+ */
+export interface ChartLegendContentProps {
+    /**
+     * Additional class name
+     */
+    className?: string;
+    /**
+     * Recharts injected props (passed automatically)
+     */
+    payload?: Array<{
+        value: string;
+        type: string;
+        id: string;
+        color: string;
+        dataKey: string;
+    }>;
+}
+//# sourceMappingURL=Chart.types.d.ts.map