@asante-org/leybold-design-system 1.2.0

package/dist/src/app/layout.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import './globals.css';
+export declare const metadata: {
+    title: string;
+    description: string;
+};
+export default function RootLayout({ children, }: {
+    children: React.ReactNode;
+}): JSX.Element;

package/dist/src/app/page.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export default function Home(): JSX.Element;

package/dist/src/components/AIBanner/AIBanner.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+export interface AIBannerProps {
+    /**
+     * Banner message text
+     */
+    text?: string;
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+}
+/**
+ * AI translation notification banner
+ */
+export declare const AIBanner: React.FC<AIBannerProps>;

package/dist/src/components/AIBanner/AIBanner.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { AIBanner } from './AIBanner';
+declare const meta: Meta<typeof AIBanner>;
+export default meta;
+type Story = StoryObj<typeof AIBanner>;
+export declare const Desktop: Story;
+export declare const Mobile: Story;

package/dist/src/components/AIBanner/index.d.ts

@@ -0,0 +1,2 @@
+export { AIBanner } from './AIBanner';
+export type { AIBannerProps } from './AIBanner';

package/dist/src/components/Button/Button.d.ts

@@ -0,0 +1,80 @@
+import React from "react";
+/**
+ * Button variant types
+ */
+export type ButtonVariant = "primary" | "secondary" | "solid-grey" | "solid-black" | "solid-white" | "outlined-grey" | "outlined-black" | "outlined-white" | "text" | "link-text" | "link-text-alt" | "external-link" | "carousel-arrow-left" | "carousel-arrow-right";
+/**
+ * Icon types for button
+ */
+export type ButtonIcon = "arrow-right" | "external" | "chevron-left" | "chevron-right" | "none";
+/**
+ * Icon position
+ */
+export type IconPosition = "left" | "right";
+export interface ButtonProps {
+    /**
+     * Button content (text label)
+     */
+    children?: React.ReactNode;
+    /**
+     * Button variant - determines visual style
+     */
+    variant?: ButtonVariant;
+    /**
+     * Button size
+     */
+    size?: "extra-small" | "small" | "medium" | "large";
+    /**
+     * Is button disabled?
+     */
+    disabled?: boolean;
+    /**
+     * Optional click handler
+     */
+    onClick?: (e?: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Button type attribute
+     */
+    type?: "button" | "submit" | "reset";
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+    /**
+     * Icon to display
+     */
+    icon?: ButtonIcon;
+    /**
+     * Icon position (left or right of text)
+     */
+    iconPosition?: IconPosition;
+    /**
+     * Accessible label for icon-only buttons
+     */
+    ariaLabel?: string;
+    /**
+     * Opens link in new tab (for external links)
+     */
+    opensInNewTab?: boolean;
+    /**
+     * Inline styles
+     */
+    style?: React.CSSProperties;
+    /**
+     * Force a specific state for documentation purposes
+     * @internal
+     */
+    'data-force-state'?: 'hover' | 'focus';
+    /**
+     * Data attribute for page target
+     */
+    'data-page_target'?: string | number;
+    /**
+     * Tab index for focus order
+     */
+    tabIndex?: number;
+}
+/**
+ * Primary UI component for user interaction
+ */
+export declare const Button: React.FC<ButtonProps>;

package/dist/src/components/Button/Button.stories.d.ts

@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Button } from "./Button";
+declare const meta: Meta<typeof Button>;
+export default meta;
+type Story = StoryObj<typeof Button>;
+export declare const Primary: Story;
+export declare const SecondaryDesign: Story;
+export declare const SolidWhite: Story;
+export declare const SolidGrey: Story;
+export declare const SolidBlack: Story;
+export declare const OutlinedBlack: Story;
+export declare const OutlinedGrey: Story;
+export declare const OutlinedWhite: Story;
+export declare const LinkText: Story;
+export declare const LinkTextAlt: Story;
+export declare const CarouselArrows: Story;
+export declare const ExternalLink: Story;
+export declare const Text: Story;
+export declare const ExtraSmall: Story;
+export declare const Small: Story;
+export declare const Medium: Story;
+export declare const Large: Story;
+export declare const AllSizes: Story;
+export declare const AllVariants: Story;
+export declare const Disabled: Story;

package/dist/src/components/Button/index.d.ts

@@ -0,0 +1,2 @@
+export { Button } from './Button';
+export type { ButtonProps } from './Button';

package/dist/src/components/ContentCardHorizontal/ContentCardHorizontal.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { ContentCardHorizontalProps } from "../../types/cards";
+export declare const ContentCardHorizontal: React.FC<ContentCardHorizontalProps>;

package/dist/src/components/ContentCardHorizontal/ContentCardHorizontal.stories.d.ts

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { ContentCardHorizontal } from "./ContentCardHorizontal";
+declare const meta: Meta<typeof ContentCardHorizontal>;
+export default meta;
+type Story = StoryObj<typeof ContentCardHorizontal>;
+export declare const Default: Story;
+export declare const BlogPost: Story;
+export declare const WithoutExcerpt: Story;
+export declare const WithoutCategory: Story;
+export declare const LongTitle: Story;

package/dist/src/components/ContentCardHorizontal/index.d.ts

@@ -0,0 +1,2 @@
+export { ContentCardHorizontal } from './ContentCardHorizontal';
+export type { ContentCardHorizontalProps } from '../../types/cards';

package/dist/src/components/Filters/AppliedFilterTag.d.ts

@@ -0,0 +1,27 @@
+import React from "react";
+export interface AppliedFilterTagProps {
+    /**
+     * Facet attribute (e.g., "category")
+     */
+    attribute: string;
+    /**
+     * Facet value (e.g., "Kits")
+     */
+    value: string;
+    /**
+     * Display label (optional, defaults to value)
+     */
+    label?: string;
+    /**
+     * Callback when tag is removed
+     */
+    onRemove: (attribute: string, value: string) => void;
+    /**
+     * Additional CSS class
+     */
+    className?: string;
+}
+/**
+ * AppliedFilterTag - Individual removable filter tag/chip
+ */
+export declare const AppliedFilterTag: React.FC<AppliedFilterTagProps>;

package/dist/src/components/Filters/AppliedFilters.d.ts

@@ -0,0 +1,24 @@
+import React from "react";
+import { Facet } from "./Filter.types";
+export interface AppliedFiltersProps {
+    /**
+     * List of facets with selected values
+     */
+    facets: Facet[];
+    /**
+     * Callback when a filter is removed
+     */
+    onRemove: (attribute: string, value: string) => void;
+    /**
+     * Callback when all filters are cleared
+     */
+    onClearAll?: () => void;
+    /**
+     * Additional CSS class
+     */
+    className?: string;
+}
+/**
+ * AppliedFilters - Shows all active filters as removable tags
+ */
+export declare const AppliedFilters: React.FC<AppliedFiltersProps>;

package/dist/src/components/Filters/Filter.types.d.ts

@@ -0,0 +1,204 @@
+/**
+ * Represents a single facet value with its count
+ */
+export interface FacetValue {
+    /**
+     * The value/label of the facet
+     */
+    value: string;
+    /**
+     * Number of results with this facet value
+     */
+    count: number;
+    /**
+     * Whether this facet is currently selected/refined
+     */
+    isRefined: boolean;
+}
+/**
+ * Represents a facet category (e.g., "Category", "Brand")
+ */
+export interface Facet {
+    /**
+     * Unique identifier for the facet
+     */
+    id: string;
+    /**
+     * Display label for the facet category
+     */
+    label: string;
+    /**
+     * Algolia attribute name
+     */
+    attribute: string;
+    /**
+     * List of facet values
+     */
+    values: FacetValue[];
+    /**
+     * Whether to show search input for this facet
+     */
+    searchable?: boolean;
+    /**
+     * Whether this facet is expanded by default
+     */
+    defaultExpanded?: boolean;
+}
+/**
+ * Filter display variant - desktop or mobile
+ */
+export type FilterVariant = 'desktop' | 'mobile';
+/**
+ * Props for FilterItem component
+ */
+export interface FilterItemProps {
+    /**
+     * The facet value data
+     */
+    value: FacetValue;
+    /**
+     * Callback when item is toggled
+     */
+    onToggle: (value: string) => void;
+    /**
+     * Additional CSS class
+     */
+    className?: string;
+    /**
+     * Display variant - controls mobile vs desktop rendering
+     */
+    variant?: FilterVariant;
+    /**
+     * Whether to show checkbox (Products tab) or plain button (Content tab)
+     */
+    showCheckbox?: boolean;
+}
+/**
+ * Props for FilterSearch component
+ */
+export interface FilterSearchProps {
+    /**
+     * Current search value
+     */
+    value: string;
+    /**
+     * Callback when search value changes
+     */
+    onChange: (value: string) => void;
+    /**
+     * Placeholder text
+     */
+    placeholder?: string;
+    /**
+     * Additional CSS class
+     */
+    className?: string;
+}
+/**
+ * Props for FilterAccordion component
+ */
+export interface FilterAccordionProps {
+    /**
+     * The facet data
+     */
+    facet: Facet;
+    /**
+     * Whether accordion is expanded
+     */
+    isExpanded: boolean;
+    /**
+     * Callback when accordion is toggled
+     */
+    onToggle: () => void;
+    /**
+     * Callback when facet value is selected
+     */
+    onValueToggle: (attribute: string, value: string) => void;
+    /**
+     * Additional CSS class
+     */
+    className?: string;
+    /**
+     * Display variant - controls mobile vs desktop rendering
+     */
+    variant?: FilterVariant;
+    /**
+     * Whether to show checkbox (Products tab) or plain button (Content tab)
+     */
+    showCheckbox?: boolean;
+}
+/**
+ * Props for FiltersPanel component
+ */
+export interface FiltersPanelProps {
+    /**
+     * List of facets to display
+     */
+    facets: Facet[];
+    /**
+     * Callback when a facet value is toggled
+     */
+    onFacetToggle: (attribute: string, value: string) => void;
+    /**
+     * Loading state
+     */
+    isLoading?: boolean;
+    /**
+     * Additional CSS class
+     */
+    className?: string;
+    /**
+     * Display variant - controls mobile vs desktop rendering
+     */
+    variant?: FilterVariant;
+    /**
+     * Whether to show checkbox (Products tab) or plain button (Content tab)
+     */
+    showCheckbox?: boolean;
+}
+/**
+ * Props for AppliedFilters component
+ */
+export interface AppliedFiltersProps {
+    /**
+     * List of facets with selected values
+     */
+    facets: Facet[];
+    /**
+     * Callback when a filter is removed
+     */
+    onRemove: (attribute: string, value: string) => void;
+    /**
+     * Callback when all filters are cleared
+     */
+    onClearAll?: () => void;
+    /**
+     * Additional CSS class
+     */
+    className?: string;
+}
+/**
+ * Props for AppliedFilterTag component
+ */
+export interface AppliedFilterTagProps {
+    /**
+     * Facet attribute
+     */
+    attribute: string;
+    /**
+     * Facet value
+     */
+    value: string;
+    /**
+     * Display label
+     */
+    label?: string;
+    /**
+     * Callback when tag is removed
+     */
+    onRemove: (attribute: string, value: string) => void;
+    /**
+     * Additional CSS class
+     */
+    className?: string;
+}

package/dist/src/components/Filters/FilterAccordion.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import { FilterAccordionProps } from "./Filter.types";
+/**
+ * FilterAccordion - Collapsible facet section with optional search
+ */
+export declare const FilterAccordion: React.FC<FilterAccordionProps>;

package/dist/src/components/Filters/FilterItem.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import { FilterItemProps } from "./Filter.types";
+/**
+ * FilterItem - Individual facet item with checkbox and count
+ */
+export declare const FilterItem: React.FC<FilterItemProps>;

package/dist/src/components/Filters/FilterSearch.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import { FilterSearchProps } from "./Filter.types";
+/**
+ * FilterSearch - Search input for filtering facet values
+ */
+export declare const FilterSearch: React.FC<FilterSearchProps>;

package/dist/src/components/Filters/Filters.stories.d.ts

@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { FiltersPanel } from "./FiltersPanel";
+import { FilterAccordion } from "./FilterAccordion";
+import { FilterItem } from "./FilterItem";
+import { FilterSearch } from "./FilterSearch";
+import { AppliedFilters } from "./AppliedFilters";
+import { AppliedFilterTag } from "./AppliedFilterTag";
+declare const meta: Meta<typeof FiltersPanel>;
+export default meta;
+type Story = StoryObj<typeof FiltersPanel>;
+export declare const Default: Story;
+export declare const Loading: Story;
+export declare const SingleFacet: Story;
+export declare const NoFacets: Story;
+export declare const AccordionDefault: StoryObj<typeof FilterAccordion>;
+export declare const AccordionCollapsed: StoryObj<typeof FilterAccordion>;
+export declare const ItemDefault: StoryObj<typeof FilterItem>;
+export declare const ItemSelected: StoryObj<typeof FilterItem>;
+export declare const SearchDefault: StoryObj<typeof FilterSearch>;
+export declare const SearchWithValue: StoryObj<typeof FilterSearch>;
+export declare const AppliedFiltersDefault: StoryObj<typeof AppliedFilters>;
+export declare const AppliedFiltersEmpty: StoryObj<typeof AppliedFilters>;
+export declare const AppliedTagDefault: StoryObj<typeof AppliedFilterTag>;
+export declare const AppliedTagWithLabel: StoryObj<typeof AppliedFilterTag>;

package/dist/src/components/Filters/FiltersPanel.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import { FiltersPanelProps } from "./Filter.types";
+/**
+ * FiltersPanel - Main container for all filters
+ *
+ * Fully controlled component - renders based on facets prop.
+ * When facets change (e.g., after API refetch), component re-renders with new data.
+ * Accordion expansion state persists across refetches, with new facets respecting defaultExpanded.
+ */
+export declare const FiltersPanel: React.FC<FiltersPanelProps>;

package/dist/src/components/Filters/index.d.ts

@@ -0,0 +1,7 @@
+export { FiltersPanel } from "./FiltersPanel";
+export { FilterAccordion } from "./FilterAccordion";
+export { FilterItem } from "./FilterItem";
+export { FilterSearch } from "./FilterSearch";
+export { AppliedFilters } from "./AppliedFilters";
+export { AppliedFilterTag } from "./AppliedFilterTag";
+export type { FiltersPanelProps, FilterAccordionProps, FilterItemProps, FilterSearchProps, AppliedFiltersProps, AppliedFilterTagProps, Facet, FacetValue, } from "./Filter.types";

package/dist/src/components/Image/Image.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { ImageProps } from "./Image.types";
+export declare const Image: React.FC<ImageProps>;
+export default Image;

package/dist/src/components/Image/Image.stories.d.ts

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Image } from "./Image";
+declare const meta: Meta<typeof Image>;
+export default meta;
+type Story = StoryObj<typeof Image>;
+export declare const Default: Story;
+export declare const WithAspectRatio: Story;
+export declare const SquareImage: Story;
+export declare const ObjectFitContain: Story;
+export declare const ObjectFitCover: Story;
+export declare const DecorativeImage: Story;
+export declare const WithFallback: Story;
+export declare const BrokenImage: Story;
+export declare const LazyLoading: Story;
+export declare const ResponsiveImage: Story;
+export declare const ProductThumbnail: Story;

package/dist/src/components/Image/Image.types.d.ts

@@ -0,0 +1,34 @@
+export interface ImageProps {
+    /** Image source URL */
+    src: string;
+    /** Alt text for accessibility - required for non-decorative images */
+    alt: string;
+    /** Optional width */
+    width?: number | string;
+    /** Optional height */
+    height?: number | string;
+    /** Loading strategy */
+    loading?: "lazy" | "eager";
+    /** Decoding hint */
+    decoding?: "async" | "sync" | "auto";
+    /** Object fit behavior */
+    objectFit?: "contain" | "cover" | "fill" | "none" | "scale-down";
+    /** Object position */
+    objectPosition?: string;
+    /** Aspect ratio (e.g., "16/9", "4/3", "1/1") */
+    aspectRatio?: string;
+    /** Whether this is a decorative image (sets alt="" and aria-hidden) */
+    isDecorative?: boolean;
+    /** Fallback image URL if src fails to load */
+    fallbackSrc?: string;
+    /** Callback when image loads successfully */
+    onLoad?: () => void;
+    /** Callback when image fails to load */
+    onError?: () => void;
+    /** Additional CSS class */
+    className?: string;
+    /** Responsive image srcset */
+    srcSet?: string;
+    /** Responsive image sizes */
+    sizes?: string;
+}

package/dist/src/components/Image/index.d.ts

@@ -0,0 +1,2 @@
+export { Image } from "./Image";
+export type { ImageProps } from "./Image.types";

package/dist/src/components/InstantResults/FederatedInstantResultsLayout.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { FederatedInstantResultsLayoutProps } from "../../types/search";
+export declare const FederatedInstantResultsLayout: React.FC<FederatedInstantResultsLayoutProps>;

package/dist/src/components/InstantResults/FederatedInstantResultsLayout.stories.d.ts

@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { FederatedInstantResultsLayout } from './FederatedInstantResultsLayout';
+declare const meta: Meta<typeof FederatedInstantResultsLayout>;
+export default meta;
+type Story = StoryObj<typeof FederatedInstantResultsLayout>;
+export declare const WithResults: Story;
+export declare const Loading: Story;
+export declare const ProductsOnly: Story;
+export declare const ContentOnly: Story;
+export declare const NoResults: Story;
+export declare const ProductsError: Story;
+export declare const ContentsError: Story;
+export declare const BothErrors: Story;

package/dist/src/components/InstantResults/index.d.ts

@@ -0,0 +1,9 @@
+export { FederatedInstantResultsLayout } from "./FederatedInstantResultsLayout";
+export { ResultsColumn } from "../ResultsColumn";
+export { ResultsCount } from "../ResultsCount";
+export { SeeAllLinkButton } from "../SeeAllLinkButton";
+export { ProductCardHorizontal } from "../ProductCardHorizontal";
+export { ContentCardHorizontal } from "../ContentCardHorizontal";
+export type { FederatedInstantResultsLayoutProps, ResultsColumnProps, ProductCardHorizontalProps, ContentCardHorizontalProps, } from "../../types/search";
+export type { ResultsCountProps } from "../ResultsCount";
+export type { SeeAllLinkButtonProps } from "../SeeAllLinkButton";

package/dist/src/components/LanguageSelector/LanguageSelector.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { LanguageSelectorProps } from './LanguageSelector.types';
+/**
+ * Language Selector component
+ * Responsive layout: Desktop shows two-column grid, Mobile shows dropdown + links
+ */
+export declare const LanguageSelector: React.FC<LanguageSelectorProps>;

package/dist/src/components/LanguageSelector/LanguageSelector.stories.d.ts

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { LanguageSelector } from './LanguageSelector';
+declare const meta: Meta<typeof LanguageSelector>;
+export default meta;
+type Story = StoryObj<typeof LanguageSelector>;
+/**
+ * Desktop layout with two-column location grid and "Go to the international sites" heading.
+ * Shown overlaid on the Leybold website hero for realistic context.
+ * Features proper single-selection behaviour for locations and languages.
+ */
+export declare const Desktop: Story;
+/**
+ * Mobile layout with location dropdown and "Language" heading.
+ * Best viewed in mobile viewport (<992px).
+ * Features proper single-selection behaviour for locations and languages.
+ */
+export declare const Mobile: Story;
+/**
+ * Location dropdown component showing closed and open states.
+ * Used on mobile view for location selection.
+ */
+export declare const LocationDropdownStory: Story;
+/**
+ * Location selector link showing all four states:
+ * Default, Hover, Focus, and Selected (black bold text with red checkmark).
+ */
+export declare const LocationSelectorLinkStory: Story;
+/**
+ * Language selector link showing all four states:
+ * Default, Hover, Focus, and Selected (red background with white text and checkmark).
+ */
+export declare const LanguageSelectorLinkStory: Story;