@orion-ds/react 4.2.1 → 4.2.4

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

@@ -0,0 +1,13 @@
+import { default as React } from 'react';
+import { CardProps, CardHeaderProps, CardBodyProps, CardFooterProps, ImageContentProps, ImageTitleProps, ImageDescriptionProps, ImageMetaProps } from './Card.types';
+
+export declare const Card: React.FC<CardProps> & {
+    Header: React.FC<CardHeaderProps>;
+    Body: React.FC<CardBodyProps>;
+    Footer: React.FC<CardFooterProps>;
+    ImageContent: React.FC<ImageContentProps>;
+    ImageTitle: React.FC<ImageTitleProps>;
+    ImageDescription: React.FC<ImageDescriptionProps>;
+    ImageMeta: React.FC<ImageMetaProps>;
+};
+//# sourceMappingURL=Card.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../src/components/Card/Card.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EACV,SAAS,EACT,eAAe,EACf,aAAa,EACb,eAAe,EAEf,iBAAiB,EACjB,eAAe,EACf,qBAAqB,EACrB,cAAc,EACf,MAAM,cAAc,CAAC;AActB,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAAC,GAAG;IACvC,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAAC,CAAC;IAClC,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC;IAC9B,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAAC,CAAC;IAClC,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAAC,CAAC;IAC1C,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAAC,CAAC;IACtC,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAAC,CAAC;IAClD,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAAC,CAAC;CAgDrC,CAAC"}

package/dist/components/Card/Card.module.css

@@ -0,0 +1 @@
+._card_iidct_8{display:flex;flex-direction:column;overflow:hidden;background:var(--surface-base);border-radius:var(--radius-container);transition:all var(--transition-fast)}._base_iidct_27{border:1px solid var(--border-subtle)}._glass_iidct_32{background:var(--surface-glass);-webkit-backdrop-filter:blur(var(--blur-md));backdrop-filter:blur(var(--blur-md));border:1px solid var(--border-subtle)}._elevated_iidct_39{box-shadow:var(--shadow-md)}._outlined_iidct_44{border:2px solid var(--border-strong)}._image_iidct_49{position:relative;background-size:cover;background-position:center;background-repeat:no-repeat;aspect-ratio:16 / 9}._imageOverlay_iidct_58{position:absolute;inset:0;display:flex;flex-direction:column;padding:var(--card-padding);border-radius:var(--radius-container)}._gradientBottom_iidct_68{background:linear-gradient(to top,var(--overlay-dark-heavy) 0%,var(--overlay-dark-light) 50%,transparent 100%);justify-content:flex-end}._gradientTop_iidct_78{background:linear-gradient(to bottom,var(--overlay-dark-heavy) 0%,var(--overlay-dark-light) 50%,transparent 100%);justify-content:flex-start}._gradientCenter_iidct_88{background:linear-gradient(to bottom,var(--overlay-dark-light) 0%,var(--overlay-dark) 50%,var(--overlay-dark-light) 100%);justify-content:center;align-items:center;text-align:center}._imageContent_iidct_101{display:flex;flex-direction:column;gap:var(--spacing-2);color:var(--color-neutral-0)}._imageTitle_iidct_108{font-size:var(--font-size-24);font-weight:var(--font-weight-semibold);color:var(--color-neutral-0);line-height:var(--line-height-tight);letter-spacing:-.02em;text-shadow:0 2px 4px var(--overlay-dark-heavy),0 4px 12px var(--overlay-dark)}._imageDescription_iidct_119{font-size:var(--font-size-14);font-weight:var(--font-weight-regular);color:var(--color-neutral-0);line-height:var(--line-height-relaxed);opacity:.9;text-shadow:0 1px 2px var(--overlay-dark-heavy),0 2px 8px var(--overlay-dark)}._imageMeta_iidct_130{font-size:var(--font-size-12);font-weight:var(--font-weight-medium);color:var(--color-neutral-0);opacity:.75;letter-spacing:.02em;text-transform:uppercase;text-shadow:0 1px 2px var(--overlay-dark-heavy)}._interactive_iidct_144{cursor:pointer}._interactive_iidct_144:hover{transform:translateY(-2px)}._interactive_iidct_144:active{transform:translateY(0)}._interactive_iidct_144._elevated_iidct_39:hover{box-shadow:var(--shadow-lg)}._interactive_iidct_144._image_iidct_49:hover{transform:scale(1.02)}._interactive_iidct_144._image_iidct_49:active{transform:scale(1)}._header_iidct_173{padding:var(--card-padding) var(--card-padding) 0;font-weight:var(--font-weight-medium);color:var(--text-primary)}._body_iidct_180{padding:var(--card-padding);flex:1;color:var(--text-primary)}._header_iidct_173+._body_iidct_180{padding-top:var(--card-padding-gap)}._footer_iidct_192{padding:0 var(--card-padding) var(--card-padding);color:var(--text-secondary);font-size:var(--font-size-14)}

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

@@ -0,0 +1,33 @@
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: import('react').FC<import('./Card.types').CardProps> & {
+        Header: React.FC<import('./Card.types').CardHeaderProps>;
+        Body: React.FC<import('./Card.types').CardBodyProps>;
+        Footer: React.FC<import('./Card.types').CardFooterProps>;
+        ImageContent: React.FC<import('./Card.types').ImageContentProps>;
+        ImageTitle: React.FC<import('./Card.types').ImageTitleProps>;
+        ImageDescription: React.FC<import('./Card.types').ImageDescriptionProps>;
+        ImageMeta: React.FC<import('./Card.types').ImageMetaProps>;
+    };
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithFooter: Story;
+export declare const Elevated: Story;
+export declare const Glass: Story;
+export declare const WithBadge: Story;
+export declare const ImageCard: Story;
+export declare const ImageCardTop: Story;
+export declare const ImageCardCenter: Story;
+export declare const ImageCardSquare: Story;
+export declare const ImageCardInteractive: Story;
+export declare const ImageCardGrid: Story;
+export declare const AllVariants: Story;
+//# sourceMappingURL=Card.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Card.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Card/Card.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAKvD,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;CAOmB,CAAC;AAE9B,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAWrB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAuBxB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAStB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAkBnB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KA8BvB,CAAC;AAGF,eAAO,MAAM,SAAS,EAAE,KAkBvB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAiB1B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAgB7B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAe7B,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAkBlC,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAgD3B,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAgDzB,CAAC"}

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.module.css

@@ -0,0 +1 @@
+._carousel_1ch8a_9{position:relative;overflow:hidden;width:100%}._track_1ch8a_19{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none}._track_1ch8a_19::-webkit-scrollbar{display:none}._trackEdge_1ch8a_33,._trackContainer_1ch8a_42{padding-left:var(--spacing-6);padding-right:var(--spacing-6)}._peek_1ch8a_48 ._trackEdge_1ch8a_33,._peek_1ch8a_48 ._trackContainer_1ch8a_42{padding-right:var(--spacing-16)}._gapSm_1ch8a_54 ._track_1ch8a_19{gap:var(--spacing-4)}._gapMd_1ch8a_58 ._track_1ch8a_19{gap:var(--spacing-6)}._gapLg_1ch8a_62 ._track_1ch8a_19{gap:var(--spacing-8)}._navigation_1ch8a_70{display:flex;gap:var(--spacing-2);justify-content:center;margin-top:var(--spacing-4)}._navButton_1ch8a_77{width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:var(--surface-subtle);border:1px solid var(--border-subtle);border-radius:50%;color:var(--text-primary);cursor:pointer;transition:background var(--transition-fast),border-color var(--transition-fast)}._navButton_1ch8a_77:hover:not(:disabled){background:var(--surface-layer);border-color:var(--border-default)}._navButton_1ch8a_77:disabled{opacity:.4;cursor:not-allowed}._card_1ch8a_107{flex-shrink:0;scroll-snap-align:start;position:relative;border-radius:var(--radius-container);overflow:hidden;width:calc(100% - var(--spacing-12));max-width:600px}._aspect-16-9_1ch8a_118{aspect-ratio:16/9}._aspect-4-3_1ch8a_122{aspect-ratio:4/3}._aspect-1-1_1ch8a_126{aspect-ratio:1/1}._aspect-3-4_1ch8a_130{aspect-ratio:3/4}._imageWrapper_1ch8a_138{position:absolute;inset:0}._imageWrapper_1ch8a_138 img{width:100%;height:100%;object-fit:cover}._overlay_1ch8a_153{position:absolute;inset:0;pointer-events:none}._overlay-gradient_1ch8a_159{background:linear-gradient(to top,var(--overlay-dark-heavy) 0%,var(--overlay-dark-light) 30%,transparent 60%)}._overlay-dark_1ch8a_168{background:var(--overlay-dark)}._content_1ch8a_176{position:absolute;bottom:0;left:0;right:0;padding:var(--spacing-6);display:flex;flex-direction:column;gap:var(--spacing-2)}._card_1ch8a_107 ._eyebrow_1ch8a_187{font-family:var(--font-secondary);font-size:var(--font-size-12);font-weight:var(--font-weight-semibold);text-transform:uppercase;letter-spacing:.05em;color:var(--text-on-dark-secondary)}._card_1ch8a_107 ._cardTitle_1ch8a_196{font-family:var(--font-secondary);font-size:var(--font-size-24);font-weight:var(--font-weight-bold);line-height:var(--line-height-tight);color:var(--text-on-dark);margin:0}._card_1ch8a_107 ._cardDescription_1ch8a_205{font-family:var(--font-secondary);font-size:var(--font-size-14);color:var(--text-on-dark-secondary);line-height:var(--line-height-relaxed);margin:0}._card_1ch8a_107 ._action_1ch8a_213{margin-top:var(--spacing-2)}._variant-editorial_1ch8a_221{max-width:700px}._variant-editorial_1ch8a_221 ._cardTitle_1ch8a_196{font-size:clamp(1.25rem,2.5vw,2rem)}._variant-product_1ch8a_233{max-width:320px;background:var(--surface-layer);display:flex;flex-direction:column;aspect-ratio:auto}._variant-product_1ch8a_233 ._imageWrapper_1ch8a_138{position:relative;flex-shrink:0;height:140px;display:flex;align-items:center;justify-content:center}._variant-product_1ch8a_233 ._content_1ch8a_176{position:relative;padding:var(--spacing-4);background:var(--surface-layer);flex:1;display:flex;flex-direction:column;gap:var(--spacing-2)}._variant-product_1ch8a_233 ._eyebrow_1ch8a_187{color:var(--text-tertiary)}._variant-product_1ch8a_233 ._cardTitle_1ch8a_196{color:var(--text-primary);font-size:var(--font-size-18);font-weight:var(--font-weight-semibold)}._variant-product_1ch8a_233 ._cardDescription_1ch8a_205{color:var(--text-secondary);font-size:var(--font-size-14);line-height:var(--line-height-relaxed)}._variant-gallery_1ch8a_280{max-width:500px}._variant-gallery_1ch8a_280 ._content_1ch8a_176{opacity:0;transition:opacity var(--transition-fast)}._variant-gallery_1ch8a_280:hover ._content_1ch8a_176{opacity:1}._pagination_1ch8a_297{display:flex;justify-content:center;gap:var(--spacing-2);margin-top:var(--spacing-4)}._dot_1ch8a_304{width:8px;height:8px;border-radius:50%;background:var(--border-subtle);border:none;cursor:pointer;padding:0;transition:background var(--transition-fast),transform var(--transition-fast)}._dot_1ch8a_304:hover{background:var(--border-default)}._dotActive_1ch8a_321{background:var(--interactive-primary);transform:scale(1.25)}._highlightActive_1ch8a_331 ._track_1ch8a_19{padding-block:var(--spacing-6)}._cardHighlighted_1ch8a_335{transform:scale(1.1);transform-origin:center center;z-index:var(--z-dropdown);transition:transform var(--transition-normal)}._highlightActive_1ch8a_331 ._card_1ch8a_107:not(._cardHighlighted_1ch8a_335){transform:scale(.95);opacity:.7;transition:transform var(--transition-normal),opacity var(--transition-normal)}@media(max-width:1024px){._card_1ch8a_107{width:calc(100% - var(--spacing-8));max-width:500px}._variant-editorial_1ch8a_221{max-width:500px}}@media(max-width:640px){._trackEdge_1ch8a_33,._trackContainer_1ch8a_42{padding-left:var(--spacing-4);padding-right:var(--spacing-4)}._peek_1ch8a_48 ._trackEdge_1ch8a_33,._peek_1ch8a_48 ._trackContainer_1ch8a_42{padding-right:var(--spacing-8)}._card_1ch8a_107{width:calc(100% - var(--spacing-4));max-width:none}._variant-editorial_1ch8a_221,._variant-product_1ch8a_233,._variant-gallery_1ch8a_280{max-width:none}._navButton_1ch8a_77{width:40px;height:40px}._content_1ch8a_176{padding:var(--spacing-4)}._card_1ch8a_107 ._cardTitle_1ch8a_196{font-size:var(--font-size-18)}}

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.module.css

@@ -0,0 +1 @@
+._container_faue8_8{width:100%;font-family:var(--font-secondary)}._tooltip_faue8_17{background:var(--surface-base);border:1px solid var(--border-subtle);border-radius:var(--radius-control);box-shadow:var(--shadow-lg);padding:var(--spacing-3) var(--spacing-4);font-family:var(--font-secondary);font-size:var(--font-size-13)}._tooltipLabel_faue8_27{font-weight:var(--font-weight-semibold);color:var(--text-primary);margin-bottom:var(--spacing-2);padding-bottom:var(--spacing-2);border-bottom:1px solid var(--border-subtle)}._tooltipItems_faue8_35{display:flex;flex-direction:column;gap:var(--spacing-1)}._tooltipItem_faue8_35{display:flex;align-items:center;gap:var(--spacing-2)}._tooltipDot_faue8_47{width:8px;height:8px;border-radius:var(--radius-full);flex-shrink:0}._tooltipLine_faue8_54{width:12px;height:2px;flex-shrink:0}._tooltipDashed_faue8_60{width:12px;height:2px;flex-shrink:0;border-top:2px dashed}._tooltipName_faue8_67{color:var(--text-secondary)}._tooltipValue_faue8_71{color:var(--text-primary);font-weight:var(--font-weight-medium);margin-left:auto;padding-left:var(--spacing-3)}._legend_faue8_82{display:flex;align-items:center;justify-content:center;gap:var(--spacing-4);padding-top:var(--spacing-3);font-family:var(--font-secondary);font-size:var(--font-size-13)}._legendItem_faue8_92{display:flex;align-items:center;gap:var(--spacing-2);color:var(--text-secondary)}._legendDot_faue8_99{width:8px;height:8px;border-radius:var(--radius-full);flex-shrink:0}

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"}