@asante-org/leybold-design-system 1.2.0

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

@@ -0,0 +1,64 @@
+/**
+ * Location item for the language selector
+ */
+export interface Location {
+    /** Display name of the location */
+    name: string;
+    /** URL to navigate to when selected */
+    href: string;
+    /** Whether this location is currently selected */
+    isSelected?: boolean;
+}
+/**
+ * Language item for the language selector
+ */
+export interface Language {
+    /** Display name of the language */
+    name: string;
+    /** Optional language/region code (e.g., 'ES', 'MX', 'FR') */
+    code?: string;
+    /** URL to navigate to when selected */
+    href: string;
+    /** Whether this language is currently selected */
+    isSelected?: boolean;
+}
+/**
+ * Props for the LocationDropdown sub-component (mobile)
+ */
+export interface LocationDropdownProps {
+    /** Array of available locations */
+    locations: Location[];
+    /** Currently selected location name */
+    selectedLocation?: string;
+    /** Whether the dropdown is open */
+    isOpen: boolean;
+    /** Toggle dropdown open/closed */
+    onToggle: () => void;
+    /** Handler when a location is selected */
+    onSelect: (location: Location) => void;
+    /** Additional CSS class */
+    className?: string;
+}
+/**
+ * Props for the main LanguageSelector component
+ */
+export interface LanguageSelectorProps {
+    /** Array of available locations */
+    locations: Location[];
+    /** Array of available languages */
+    languages: Language[];
+    /** Heading text for the location section */
+    locationHeading?: string;
+    /** Heading text for the language section (desktop) */
+    languageHeadingDesktop?: string;
+    /** Heading text for the language section (mobile) */
+    languageHeadingMobile?: string;
+    /** Handler when a location is selected */
+    onLocationSelect?: (location: Location) => void;
+    /** Handler when a language is selected */
+    onLanguageSelect?: (language: Language) => void;
+    /** Handler when close button is clicked */
+    onClose?: () => void;
+    /** Additional CSS class */
+    className?: string;
+}

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

@@ -0,0 +1,20 @@
+import React from 'react';
+export interface LanguageSelectorLinkProps {
+    /** Display label for the link */
+    label: string;
+    /** Optional secondary label (e.g., language code) */
+    secondaryLabel?: string;
+    /** URL to navigate to */
+    href: string;
+    /** Whether the link is currently selected */
+    isSelected?: boolean;
+    /** Click handler */
+    onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void;
+    /** Additional CSS class */
+    className?: string;
+}
+/**
+ * Language selector link component
+ * Selected state: Red background with white text and white checkmark
+ */
+export declare const LanguageSelectorLink: React.FC<LanguageSelectorLinkProps>;

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import { LocationDropdownProps } from './LanguageSelector.types';
+/**
+ * Dropdown component for selecting locations (mobile view)
+ */
+export declare const LocationDropdown: React.FC<LocationDropdownProps>;

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

@@ -0,0 +1,20 @@
+import React from 'react';
+export interface LocationSelectorLinkProps {
+    /** Display label for the link */
+    label: string;
+    /** URL to navigate to */
+    href: string;
+    /** Whether the link is currently selected */
+    isSelected?: boolean;
+    /** Click handler */
+    onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void;
+    /** Keyboard handler */
+    onKeyDown?: (event: React.KeyboardEvent<HTMLAnchorElement>) => void;
+    /** Additional CSS class */
+    className?: string;
+}
+/**
+ * Location selector link component
+ * Selected state: Black bold text with red checkmark (no background)
+ */
+export declare const LocationSelectorLink: React.FC<LocationSelectorLinkProps>;

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

@@ -0,0 +1,7 @@
+export { LanguageSelector } from './LanguageSelector';
+export { LocationSelectorLink } from './LocationSelectorLink';
+export type { LocationSelectorLinkProps } from './LocationSelectorLink';
+export { LanguageSelectorLink } from './LanguageSelectorLink';
+export type { LanguageSelectorLinkProps } from './LanguageSelectorLink';
+export { LocationDropdown } from './LocationDropdown';
+export type { Location, Language, LanguageSelectorProps, LocationDropdownProps, } from './LanguageSelector.types';

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

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

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

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Pagination } from "./Pagination";
+declare const meta: Meta<typeof Pagination>;
+export default meta;
+type Story = StoryObj<typeof Pagination>;
+export declare const Default: Story;
+export declare const FewPages: Story;
+export declare const ManyPages: Story;
+export declare const MiddlePage: Story;
+export declare const LastPage: Story;
+export declare const WithEllipsis: Story;
+export declare const WithoutPreviousNext: Story;
+export declare const CustomLabels: Story;
+export declare const CustomMaxVisible: Story;
+export declare const SinglePage: Story;
+export declare const Playground: Story;

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

@@ -0,0 +1,98 @@
+export interface PaginationProps {
+    /**
+     * Current active page number (1-based)
+     */
+    currentPage: number;
+    /**
+     * Total number of pages
+     */
+    totalPages: number;
+    /**
+     * Callback when page changes
+     */
+    onPageChange: (page: number) => void;
+    /**
+     * Number of page buttons to show (excluding ellipsis)
+     * @default 10
+     */
+    maxVisiblePages?: number;
+    /**
+     * Show previous button
+     * @default true
+     */
+    showPrevious?: boolean;
+    /**
+     * Show next button
+     * @default true
+     */
+    showNext?: boolean;
+    /**
+     * Label for previous button
+     * @default "Previous"
+     */
+    previousLabel?: string;
+    /**
+     * Label for next button
+     * @default "Next"
+     */
+    nextLabel?: string;
+    /**
+     * Additional CSS class
+     */
+    className?: string;
+    /**
+     * Accessible label for the pagination navigation
+     * @default "Pagination"
+     */
+    ariaLabel?: string;
+}
+export interface PaginationItemProps {
+    /**
+     * Page number to display
+     */
+    page: number;
+    /**
+     * Whether this page is currently active
+     */
+    isActive: boolean;
+    /**
+     * Click handler
+     */
+    onClick: (page: number) => void;
+    /**
+     * Additional CSS class
+     */
+    className?: string;
+}
+export interface PaginationButtonProps {
+    /**
+     * Button label
+     */
+    label: string;
+    /**
+     * Whether button is disabled
+     */
+    disabled: boolean;
+    /**
+     * Click handler
+     */
+    onClick: () => void;
+    /**
+     * Direction of navigation
+     */
+    direction: "previous" | "next";
+    /**
+     * Additional CSS class
+     */
+    className?: string;
+    /**
+     * Accessible label
+     */
+    ariaLabel?: string;
+}
+export interface PaginationEllipsisProps {
+    /**
+     * Additional CSS class
+     */
+    className?: string;
+}

package/dist/src/components/Pagination/PaginationButton.d.ts

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

package/dist/src/components/Pagination/PaginationEllipsis.d.ts

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

package/dist/src/components/Pagination/PaginationItem.d.ts

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

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

@@ -0,0 +1,5 @@
+export { Pagination } from "./Pagination";
+export { PaginationItem } from "./PaginationItem";
+export { PaginationButton } from "./PaginationButton";
+export { PaginationEllipsis } from "./PaginationEllipsis";
+export type { PaginationProps, PaginationItemProps, PaginationButtonProps, PaginationEllipsisProps, } from "./Pagination.types";

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

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

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

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { ProductCardDetails } from "./ProductCardDetails";
+declare const meta: Meta<typeof ProductCardDetails>;
+export default meta;
+type Story = StoryObj<typeof ProductCardDetails>;
+export declare const Default: Story;
+export declare const WithSpares: Story;
+export declare const WithoutSpares: Story;
+export declare const MinimalFacets: Story;
+export declare const NoImage: Story;

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

@@ -0,0 +1,2 @@
+export { ProductCardDetails } from "./ProductCardDetails";
+export type { ProductCardDetailsProps } from "../../types/cards";

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

@@ -0,0 +1,4 @@
+import React from "react";
+import { ProductCardHorizontalProps } from "../../types/cards";
+export declare const ProductCardHorizontal: React.FC<ProductCardHorizontalProps>;
+export declare const ProductCardHorizontalParts: React.FC<ProductCardHorizontalProps>;

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

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { ProductCardHorizontal, ProductCardHorizontalParts } from "./ProductCardHorizontal";
+declare const meta: Meta<typeof ProductCardHorizontal>;
+export default meta;
+type Story = StoryObj<typeof ProductCardHorizontal>;
+export declare const Default: Story;
+export declare const WithoutImage: Story;
+export declare const WithoutPrice: Story;
+export declare const LongTitle: Story;
+export declare const ProductCardHorizontalPartsDefault: StoryObj<typeof ProductCardHorizontalParts>;
+export declare const ProductCardHorizontalPartsWithoutImage: StoryObj<typeof ProductCardHorizontalParts>;

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

@@ -0,0 +1,2 @@
+export { ProductCardHorizontal, ProductCardHorizontalParts } from './ProductCardHorizontal';
+export type { ProductCardHorizontalProps } from '../../types/cards';

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

@@ -0,0 +1,22 @@
+import React from 'react';
+import { ProductCardVerticalProps } from './ProductCardVertical.types';
+/**
+ * ProductCardVertical - Vertical product card for grid layouts
+ *
+ * Used in full results view with 4-column grid (desktop) or 2-column grid (mobile).
+ * Figma spec: Default (no shadow) → Hover (shadow + grey button) → Focus (border + shadow)
+ *
+ * @example
+ * ```tsx
+ * <ProductCardVertical
+ *   title="TURBOVAC i - High vacuum turbopump"
+ *   url="/products/turbovac-i"
+ *   imageUrl="/assets/search-product.png"
+ *   productId="21312VISH"
+ *   description="Premium high-performance turbomolecular pump"
+ *   buttonLabel="BUY ONLINE"
+ * />
+ * ```
+ */
+export declare const ProductCardVertical: React.FC<ProductCardVerticalProps>;
+export default ProductCardVertical;

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

@@ -0,0 +1,50 @@
+/**
+ * Props for ProductCardVertical component
+ */
+export interface ProductCardVerticalProps {
+    /**
+     * Unique product identifier
+     */
+    id?: string;
+    /**
+     * Product title/name
+     */
+    title: string;
+    /**
+     * Product page URL
+     */
+    url: string;
+    /**
+     * Product image URL
+     */
+    imageUrl?: string;
+    /**
+     * Product SKU/ID code
+     */
+    productId?: string;
+    /**
+     * Product description
+     */
+    description?: string;
+    /**
+     * CTA button label
+     */
+    buttonLabel?: string;
+    /**
+     * Button click handler
+     */
+    onButtonClick?: () => void;
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+    /**
+     * Layout variant - desktop (224.5px) or mobile (140px width)
+     */
+    variant?: 'desktop' | 'mobile';
+    /**
+     * Force a specific state for Storybook showcase
+     * @internal
+     */
+    'data-force-state'?: 'hover' | 'focus';
+}

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

@@ -0,0 +1,2 @@
+export { ProductCardVertical } from './ProductCardVertical';
+export type { ProductCardVerticalProps } from './ProductCardVertical.types';

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

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

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

@@ -0,0 +1,2 @@
+export { ResultsColumn } from './ResultsColumn';
+export type { ResultsColumnProps } from '../../types/search';

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

@@ -0,0 +1,7 @@
+import React from 'react';
+export interface ResultsCountProps {
+    count: number;
+    type: 'products' | 'content' | 'results';
+    className?: string;
+}
+export declare const ResultsCount: React.FC<ResultsCountProps>;

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

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

package/dist/src/components/ResultsView/FederatedResultsView.d.ts

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

package/dist/src/components/ResultsView/FederatedResultsView.stories.d.ts

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { FederatedResultsView } from './FederatedResultsView';
+declare const meta: Meta<typeof FederatedResultsView>;
+export default meta;
+type Story = StoryObj<typeof FederatedResultsView>;
+export declare const AllResults: Story;
+export declare const ProductsTab: Story;
+export declare const ContentTab: Story;
+export declare const Loading: Story;
+export declare const NoResults: Story;
+export declare const WithError: Story;

package/dist/src/components/ResultsView/ResultsList.d.ts

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

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

@@ -0,0 +1,3 @@
+export { FederatedResultsView } from './FederatedResultsView';
+export { ResultsList } from './ResultsList';
+export type { FederatedResultsViewProps, ResultsListProps, } from '../../types/search';

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

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

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

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { SearchBar } from './SearchBar';
+declare const meta: Meta<typeof SearchBar>;
+export default meta;
+type Story = StoryObj<typeof SearchBar>;
+export declare const Default: Story;
+export declare const WithValue: Story;
+export declare const CustomPlaceholder: Story;
+export declare const AutoFocus: Story;

package/dist/src/components/SearchBar/SearchIcon.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export interface SearchIconProps {
+    className?: string;
+}
+export declare const SearchIcon: React.FC<SearchIconProps>;

package/dist/src/components/SearchBar/SearchInput.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export interface SearchInputProps {
+    value: string;
+    onChange(value: string): void;
+    onKeyDown?(event: React.KeyboardEvent<HTMLInputElement>): void;
+    placeholder?: string;
+    autoFocus?: boolean;
+    className?: string;
+}
+export declare const SearchInput: React.FC<SearchInputProps>;

package/dist/src/components/SearchBar/SearchSubmitButton.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export interface SearchSubmitButtonProps {
+    onClick(): void;
+    disabled?: boolean;
+    ariaLabel?: string;
+    label?: string;
+    variant?: 'instant' | 'results';
+    className?: string;
+}
+export declare const SearchSubmitButton: React.FC<SearchSubmitButtonProps>;

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

@@ -0,0 +1,8 @@
+export { SearchBar } from './SearchBar';
+export { SearchIcon } from './SearchIcon';
+export { SearchInput } from './SearchInput';
+export { SearchSubmitButton } from './SearchSubmitButton';
+export type { SearchBarProps } from '../../types/search';
+export type { SearchIconProps } from './SearchIcon';
+export type { SearchInputProps } from './SearchInput';
+export type { SearchSubmitButtonProps } from './SearchSubmitButton';

package/dist/src/components/SearchModal/ModalCloseButton.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export interface ModalCloseButtonProps {
+    onClick(): void;
+    ariaLabel?: string;
+    className?: string;
+}
+export declare const ModalCloseButton: React.FC<ModalCloseButtonProps>;

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

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

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

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { SearchModal } from './SearchModal';
+declare const meta: Meta<typeof SearchModal>;
+export default meta;
+type Story = StoryObj<typeof SearchModal>;
+export declare const Default: Story;
+export declare const CustomTitle: Story;
+export declare const WithLongContent: Story;

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

@@ -0,0 +1,4 @@
+export { SearchModal } from './SearchModal';
+export { ModalCloseButton } from './ModalCloseButton';
+export type { SearchModalProps } from '../../types/search';
+export type { ModalCloseButtonProps } from './ModalCloseButton';

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

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

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

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { SearchTriggerButton } from './SearchTriggerButton';
+declare const meta: Meta<typeof SearchTriggerButton>;
+export default meta;
+type Story = StoryObj<typeof SearchTriggerButton>;
+export declare const IconOnly: Story;
+export declare const WithLabel: Story;
+export declare const CustomLabel: Story;

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

@@ -0,0 +1,2 @@
+export { SearchTriggerButton } from './SearchTriggerButton';
+export type { SearchTriggerButtonProps } from '../../types/search';

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

@@ -0,0 +1,7 @@
+import React from 'react';
+export interface SeeAllLinkButtonProps {
+    onClick(): void;
+    label?: string;
+    className?: string;
+}
+export declare const SeeAllLinkButton: React.FC<SeeAllLinkButtonProps>;

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

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

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

@@ -0,0 +1,36 @@
+import React from 'react';
+export interface CarouselCardData {
+    /** Card image URL */
+    imageUrl: string;
+    /** Card image alt text */
+    imageAlt: string;
+    /** Card title */
+    title: string;
+    /** Card link text (e.g., "LEARN MORE") */
+    linkText: string;
+    /** Card link URL */
+    linkUrl: string;
+}
+export interface CarouselProps {
+    /** Section title (displayed in italic bold) */
+    title: string;
+    /** Section subtitle/description */
+    subtitle?: string;
+    /** CTA button text */
+    buttonText?: string;
+    /** CTA button URL */
+    buttonUrl?: string;
+    /** Array of carousel cards */
+    cards: CarouselCardData[];
+    /** Show pagination dots (desktop only) */
+    showDots?: boolean;
+    /** Show navigation arrows */
+    showArrows?: boolean;
+    /** Additional CSS class */
+    className?: string;
+}
+/**
+ * Carousel component for displaying multiple content cards in a sliding format.
+ * Supports responsive layouts with 3 cards on desktop and 1 card on mobile.
+ */
+export declare const Carousel: React.FC<CarouselProps>;

package/dist/src/experience/Carousel/Carousel.stories.d.ts

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

package/dist/src/experience/Carousel/index.d.ts

@@ -0,0 +1,2 @@
+export { Carousel } from './Carousel';
+export type { CarouselProps, CarouselCardData } from './Carousel';