@sonic-equipment/ui 0.0.20 → 0.0.22

package/dist/algolia/algolia-active-filters.d.ts

@@ -1 +1,7 @@
+import { SelectedFilter } from 'filters/active-filters/active-filters';
+import type { CurrentRefinementsConnectorParamsRefinement } from 'instantsearch.js/es/connectors/current-refinements/connectCurrentRefinements';
+export interface AlgoliaSelectedFilterCategory {
+    filters: (SelectedFilter & CurrentRefinementsConnectorParamsRefinement)[];
+    label: string;
+}
 export declare function AlgoliaActiveFilters(): import("react/jsx-runtime").JSX.Element;

package/dist/algolia/algolia-categories.d.ts

@@ -0,0 +1 @@
+export declare function AlgoliaCategories(): import("react/jsx-runtime").JSX.Element;

package/dist/algolia/algolia-filter-panel.d.ts

@@ -1 +1,4 @@
-export declare function AlgoliaFilterPanel(): import("react/jsx-runtime").JSX.Element;
+export interface AlgoliaFilterPanelProps {
+    onShowProducts: VoidFunction;
+}
+export declare function AlgoliaFilterPanel({ onShowProducts, }: AlgoliaFilterPanelProps): import("react/jsx-runtime").JSX.Element;

package/dist/algolia/algolia-provider.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+interface AlgoliaContextType {
+    online: boolean;
+    setOnline: (online: boolean) => void;
+    toggleOnline: VoidFunction;
+}
+interface AlgoliaProviderProps {
+    children: React.ReactNode;
+    online?: boolean;
+}
+export declare function AlgoliaProvider({ children, online: _online, }: AlgoliaProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function useAlgolia(): AlgoliaContextType;
+export {};

package/dist/algolia/algolia-sort-by.d.ts

@@ -1 +1 @@
-export declare function AlgoliaSortBy(): import("react/jsx-runtime").JSX.Element;
+export declare function AlgoliaSortBy(): import("react/jsx-runtime").JSX.Element | null;

package/dist/algolia/algolia.stories.d.ts

@@ -1,5 +1,5 @@
 import { StoryObj } from '@storybook/react';
-interface Props {
+interface StoryProps {
     online: boolean;
 }
 declare const meta: {
@@ -14,4 +14,4 @@ declare const meta: {
     title: string;
 };
 export default meta;
-export declare const Default: StoryObj<Props>;
+export declare const Default: StoryObj<StoryProps>;

package/dist/buttons/add-to-cart-button/add-to-cart-button.stories.d.ts

@@ -15,3 +15,4 @@ export declare const InitialState: Story;
 export declare const SpinnerState: Story;
 export declare const ManualInputState: Story;
 export declare const RightAligned: Story;
+export declare const Connected: Story;

package/dist/buttons/add-to-cart-button/connected-add-to-cart-button.d.ts

@@ -0,0 +1,5 @@
+interface Props {
+    productId: string;
+}
+export declare const ConnectedAddToCartButton: ({ productId }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/buttons/icon-button/icon-button.d.ts

@@ -3,7 +3,8 @@ export interface IconButtonProps {
     children: React.ReactNode;
     className?: string;
     color?: 'primary' | 'secondary';
+    isDisabled?: boolean;
     onPress?: VoidFunction;
     size?: 'md' | 'lg';
 }
-export declare function IconButton({ children, className, color, onPress, size, }: IconButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function IconButton({ children, className, color, isDisabled, onPress, size, }: IconButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/cards/product-card/connected-product-cart.d.ts

@@ -0,0 +1,6 @@
+import { ProductCardProps } from './product-card';
+interface ConnectedProductCartProps extends Omit<ProductCardProps, 'addToCartButton'> {
+    productId: string;
+}
+export declare function ConnectedProductCart({ productId, ...props }: ConnectedProductCartProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cards/product-card/product-card.stories.d.ts

@@ -37,3 +37,4 @@ export declare const Small: Story;
 export declare const LargeLongText: Story;
 export declare const MediumLongText: Story;
 export declare const SmallLongText: Story;
+export declare const Connected: Story;

package/dist/collapsables/accordion/accordion-item.d.ts

@@ -2,10 +2,11 @@ import { ReactNode } from 'react';
 export interface AccordionItemProps {
     _pseudo?: 'none' | 'focus' | 'hover' | 'active';
     children: ReactNode;
+    className?: string;
     id: string;
     isDisabled?: boolean;
     isOpen?: boolean;
     size?: 'md' | 'lg';
     title: string;
 }
-export declare function AccordionItem({ _pseudo, children, id, isDisabled, isOpen: isOpenProp, size, title, }: AccordionItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function AccordionItem({ _pseudo, children, className, id, isDisabled, isOpen: isOpenProp, size, title, }: AccordionItemProps): import("react/jsx-runtime").JSX.Element;

package/dist/collapsables/accordion/accordion.d.ts

@@ -4,7 +4,8 @@ interface AccordionProps {
     children?: ReactElement<AccordionItemProps> | ReactElement<AccordionItemProps>[];
     color?: 'white' | 'black';
     hasLineSeparator?: boolean;
+    indented?: boolean;
     size?: 'md' | 'lg';
 }
-export declare function Accordion({ children, color, hasLineSeparator, size, }: AccordionProps): import("react/jsx-runtime").JSX.Element;
+export declare function Accordion({ children, color, hasLineSeparator, indented, size, }: AccordionProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/collapsables/accordion/accordion.stories.d.ts

@@ -11,6 +11,7 @@ declare const meta: {
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
+export declare const Indented: Story;
 export declare const Disabled: Story;
 export declare const Focus: Story;
 export declare const Large: Story;

package/dist/filters/active-filters/active-filters.d.ts

@@ -1,13 +1,14 @@
+export interface SelectedFilter {
+    label: string;
+    value: string | number;
+}
 export interface SelectedFilterCategory {
-    filters: {
-        label: string;
-        value: string;
-    }[];
-    name: string;
+    filters: SelectedFilter[];
+    label: string;
 }
 export interface ActiveFiltersProps {
     onClearAllFilters: () => void;
-    onClearFilter: (category: string, filter: string) => void;
-    selectedFilters: SelectedFilterCategory[];
+    onClearFilter: (categoryLabel: string, filter: SelectedFilter) => void;
+    selectedFilterCategories: SelectedFilterCategory[];
 }
-export declare const ActiveFilters: ({ onClearAllFilters, onClearFilter, selectedFilters, }: ActiveFiltersProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ActiveFilters: ({ onClearAllFilters, onClearFilter, selectedFilterCategories, }: ActiveFiltersProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/filters/active-filters/active-filters.stories.d.ts

@@ -2,9 +2,9 @@ import type { StoryObj } from '@storybook/react';
 declare const meta: {
     args: {
         onClearAllFilters: import("@vitest/spy").Mock<[], void>;
-        onClearFilter: import("@vitest/spy").Mock<[category: string, filter: string], void>;
+        onClearFilter: import("@vitest/spy").Mock<[categoryLabel: string, filter: import("./active-filters").SelectedFilter], void>;
     };
-    component: ({ onClearAllFilters, onClearFilter, selectedFilters, }: import("./active-filters").ActiveFiltersProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ onClearAllFilters, onClearFilter, selectedFilterCategories, }: import("./active-filters").ActiveFiltersProps) => import("react/jsx-runtime").JSX.Element | null;
     parameters: {
         layout: string;
     };

package/dist/filters/pagination/pagination.d.ts

@@ -0,0 +1,6 @@
+export interface Props {
+    currentPage: number;
+    onChange: (pageNumber: number) => void;
+    totalPages: number;
+}
+export declare function Pagination({ currentPage, onChange, totalPages }: Props): import("react/jsx-runtime").JSX.Element;

package/dist/filters/pagination/pagination.stories.d.ts

@@ -0,0 +1,18 @@
+import type { StoryObj } from '@storybook/react';
+import { Pagination } from './pagination';
+declare const meta: {
+    args: {
+        currentPage: number;
+        onChange: import("@vitest/spy").Mock<[pageNumber: number], void>;
+        totalPages: number;
+    };
+    component: typeof Pagination;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    title: string;
+};
+export default meta;
+type Story = StoryObj<typeof Pagination>;
+export declare const Default: Story;

package/dist/icons/arrows/right-arrow-filled-icon.d.ts

@@ -1,3 +1,2 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare function RightArrowFilledIcon(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;

package/dist/icons/chevrons/chevron-left-filled-icon.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function ChevronLeftFilledIcon(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;

package/dist/icons/chevrons/chevron-right-filled-icon.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function ChevronRightFilledIcon(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;

package/dist/index.d.ts

@@ -1,14 +1,136 @@
 /// <reference types="react" />
+import { ReactElement, MutableRefObject, ReactNode, HTMLAttributeAnchorTarget, FormEventHandler, KeyboardEvent, ComponentType } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ReactNode, HTMLAttributeAnchorTarget, ReactElement, FormEventHandler, KeyboardEvent, ComponentType } from 'react';
 
-type AddToCartState = 'initial' | 'spinner' | 'manual-input';
-interface AddToCartButtonProps {
-    initialState?: AddToCartState;
-    onChange?: (quantity: number) => void;
-    quantity: number;
+declare const useBreakpoint: () => {
+    isDesktop: boolean;
+    isMobile: boolean;
+    isTablet: boolean;
+};
+
+declare function useDebouncedCallback<T extends (...args: any[]) => any>(func: T, delay: number): (...args: Parameters<T>) => void;
+
+interface UseDisclosureReturnType {
+    close: () => void;
+    isClosed: boolean;
+    isOpen: boolean;
+    open: () => void;
+    toggle: () => void;
+}
+declare const useDisclosure: () => UseDisclosureReturnType;
+
+declare const useScrollLock: (lock: boolean) => void;
+
+interface CartLine$1 {
+  id: string
+  productId: string | null
+  qtyOrdered: number | null
+}
+
+interface Cart$1<T extends CartLine$1 = CartLine$1> {
+  cartLines?: T[] | null
+}
+
+interface Props$1<TCartLine extends CartLine$1 = CartLine$1, TCart extends Cart$1<TCartLine> = Cart$1<TCartLine>> {
+    addToCart: (args: {
+        productId: string;
+        quantity: number;
+    }) => void;
+    currentCart: Readonly<TCart> | undefined;
+    isLoaded: boolean;
+    isLoading: boolean;
+    loadCurrentCart: VoidFunction;
+    removeCartLine: (args: {
+        cartLineId: string;
+    }) => void;
+    updateCartLine: (cartLine: TCartLine) => void;
+}
+declare function CartProvider<TCartLine extends CartLine$1 = CartLine$1, TCart extends Cart$1<TCartLine> = Cart$1<TCartLine>>(props: Props$1<TCartLine, TCart>): null;
+declare function useCart(): Props$1<CartLine$1, Cart$1<CartLine$1>>;
+declare function useProductCartLine(productId: string): {
+    addToCart: (args: {
+        productId: string;
+        quantity: number;
+    }) => void;
+    cartLine: CartLine$1 | undefined;
+    currentCart: Readonly<Cart$1<CartLine$1>> | undefined;
+    isLoaded: boolean;
+    isLoading: boolean;
+    loadCurrentCart: VoidFunction;
+    removeCartLine: (args: {
+        cartLineId: string;
+    }) => void;
+    updateCartLine: (cartLine: CartLine$1) => void;
+};
+
+type EventCallback<T> = (data: T) => void
+
+declare class EventEmitter<T> {
+  private listeners: Map<string, EventCallback<T>[]>
+
+  constructor() {
+    this.listeners = new Map()
+  }
+
+  addEventListener(event: string, listener: EventCallback<T>): void {
+    if (!this.listeners.has(event)) {
+      this.listeners.set(event, [])
+    }
+    this.listeners.get(event)!.push(listener)
+  }
+
+  removeEventListener(event: string, listener: EventCallback<T>): void {
+    const listeners = this.listeners.get(event)
+    if (!listeners) return
+
+    const index = listeners.indexOf(listener)
+    if (index !== -1) {
+      listeners.splice(index, 1)
+    }
+  }
+
+  trigger(event: string, data: T): void {
+    const listeners = this.listeners.get(event)
+    if (!listeners) return
+
+    listeners.forEach(listener => listener(data))
+  }
+}
+
+declare class State<T> extends EventEmitter<T | undefined> {
+    private _state;
+    constructor(state?: T);
+    get value(): T | undefined;
+    set value(newState: T | undefined);
+}
+declare class GlobalState {
+    private states;
+    constructor(states: MutableRefObject<Record<string | symbol, State<any>>>);
+    get<T>(key: string | symbol): State<T>;
+    get<T>(key: string | symbol, initialState: T | undefined): State<T>;
+    set<T>(key: string | symbol, state: State<T>): void;
+}
+declare const GlobalStateProviderContext: React.Context<GlobalState>;
+interface GlobalStateProviderProps {
+    children: ReactNode;
+}
+declare function GlobalStateProvider({ children, }: GlobalStateProviderProps): ReactElement | null;
+declare function useGlobalState<T>(key: string | symbol): [T | undefined, (value: T) => void];
+declare function useGlobalState<T>(key: string | symbol, initialState: T): [T, (value: T) => void];
+
+interface CartLine {
+    id: string;
+    productId: string | null;
+    qtyOrdered: number | null;
+}
+interface Cart<T extends CartLine = CartLine> {
+    cartLines?: T[] | null;
+}
+
+interface Product {
+    id: string;
+    title: string;
 }
-declare function AddToCartButton({ initialState, onChange, quantity, }: AddToCartButtonProps): react_jsx_runtime.JSX.Element;
 
 interface ButtonProps {
     _pseudo?: 'none' | 'focus' | 'hover' | 'active';
@@ -37,10 +159,11 @@ interface IconButtonProps {
     children: React.ReactNode;
     className?: string;
     color?: 'primary' | 'secondary';
+    isDisabled?: boolean;
     onPress?: VoidFunction;
     size?: 'md' | 'lg';
 }
-declare function IconButton({ children, className, color, onPress, size, }: IconButtonProps): react_jsx_runtime.JSX.Element;
+declare function IconButton({ children, className, color, isDisabled, onPress, size, }: IconButtonProps): react_jsx_runtime.JSX.Element;
 
 interface LinkButtonProps {
     children?: React.ReactNode | string;
@@ -52,6 +175,19 @@ interface LinkButtonProps {
 }
 declare function LinkButton({ children, className, href, isDisabled, onPress, target, }: LinkButtonProps): react_jsx_runtime.JSX.Element;
 
+type AddToCartState = 'initial' | 'spinner' | 'manual-input';
+interface AddToCartButtonProps {
+    initialState?: AddToCartState;
+    onChange?: (quantity: number) => void;
+    quantity: number;
+}
+declare function AddToCartButton({ initialState, onChange, quantity, }: AddToCartButtonProps): react_jsx_runtime.JSX.Element;
+
+interface Props {
+    productId: string;
+}
+declare const ConnectedAddToCartButton: ({ productId }: Props) => react_jsx_runtime.JSX.Element;
+
 interface Source$1 {
   url: string
   width: number
@@ -96,6 +232,7 @@ declare function ProductCard({ addToCartButton: AddToCartButton, favoriteButton:
 interface AccordionItemProps {
     _pseudo?: 'none' | 'focus' | 'hover' | 'active';
     children: ReactNode;
+    className?: string;
     id: string;
     isDisabled?: boolean;
     isOpen?: boolean;
@@ -107,9 +244,10 @@ interface AccordionProps {
     children?: ReactElement<AccordionItemProps> | ReactElement<AccordionItemProps>[];
     color?: 'white' | 'black';
     hasLineSeparator?: boolean;
+    indented?: boolean;
     size?: 'md' | 'lg';
 }
-declare function Accordion({ children, color, hasLineSeparator, size, }: AccordionProps): react_jsx_runtime.JSX.Element;
+declare function Accordion({ children, color, hasLineSeparator, indented, size, }: AccordionProps): react_jsx_runtime.JSX.Element;
 
 interface ShowAllProps {
     children?: ReactElement | ReactElement[];
@@ -259,7 +397,7 @@ declare function FavoriteOutlinedIcon(props: React.SVGProps<SVGSVGElement>): rea
 
 declare function HashedOutlinedIcon(props: React.SVGProps<SVGSVGElement>): react_jsx_runtime.JSX.Element;
 
-type TranslationId = 'Chosen filters' | 'Clear filters' | 'Excl. VAT' | 'Incl. VAT' | 'Show all' | 'Show filters' | 'Show less' | 'Sort' | 'articles' | 'article';
+type TranslationId = 'Chosen filters' | 'Clear filters' | 'Excl. VAT' | 'Incl. VAT' | 'Show' | 'Show all' | 'Show filters' | 'Show less' | 'Sort' | 'articles' | 'article' | 'of';
 
 interface FormattedMessageProps {
     id: TranslationId;
@@ -313,32 +451,10 @@ interface Filters {
         }[];
     };
 }
-declare const sortOptions: {
-    readonly new: "New";
-    readonly popular: "Popular";
-    readonly price_asc: "Price: Low - High";
-    readonly price_desc: "Price: High - Low";
-    readonly recommended: "Recommended";
-};
-type SortKey = keyof typeof sortOptions;
-type ActiveFilters = {
-    colors: string[];
-};
 type ProductListingProps = {
-    activeFilters: ActiveFilters;
-    filters: Filters;
     isLoading?: boolean;
-    onFilterChange: (filters: ActiveFilters) => void;
-    onSortChange: (sort: SortKey) => void;
-    productCard: ComponentType;
-    products: {
-        id: string;
-        title: string;
-    }[];
-    sort: SortKey;
-    total: number;
 };
-declare function ProductListing({ activeFilters, filters, isLoading, onFilterChange, onSortChange, productCard: ProductCard, products, }: ProductListingProps): react_jsx_runtime.JSX.Element;
+declare function ProductListing({ isLoading }: ProductListingProps): react_jsx_runtime.JSX.Element;
 
 declare function createProductListingSearchParams(state: {
     filters: {
@@ -364,4 +480,36 @@ interface SidebarProps {
 }
 declare function Sidebar({ children }: SidebarProps): react_jsx_runtime.JSX.Element;
 
-export { Accordion, type ActiveFilters, AddToCartButton, Button, type ButtonProps, CartFilledIcon, CartOutlinedIcon, Checkbox, type CheckboxProps$1 as CheckboxProps, ColorCheckbox, type ColorCheckboxProps, DehashedOutlinedIcon, FavoriteButton, type FavoriteButtonProps, FavoriteFilledIcon, FavoriteOutlinedIcon, type FilterOption, type Filters, FormattedMessage, type FormattedMessageFunction, type FormattedMessageProps, HashedOutlinedIcon, IconButton, type IconButtonProps, Image, type ImageProps, IntlProvider, LinkButton, type LinkButtonProps, MultiSelect, type MultiSelectProps, NumberField, type NumberFieldSize, ProductCard, type ProductCardProps, ProductListing, type ProductListingProps, ProductOverviewGrid, type ProductOverviewGridProps, ProductPrice, type ProductPriceProps, ProductSku, type ProductSkuProps, RightArrowFilledIcon, Select, type SelectProps, ShowAll, type ShowAllProps, Sidebar, type SidebarProps, TextField, createProductListingSearchParams, parseProductListingSearchParams, useFormattedMessage };
+declare function AlgoliaCategories(): react_jsx_runtime.JSX.Element;
+
+interface AlgoliaFilterPanelProps {
+    onShowProducts: VoidFunction;
+}
+declare function AlgoliaFilterPanel({ onShowProducts, }: AlgoliaFilterPanelProps): react_jsx_runtime.JSX.Element;
+
+interface AlgoliaMultiSelectProps {
+    attribute: string;
+}
+declare function AlgoliaMultiSelect({ attribute }: AlgoliaMultiSelectProps): react_jsx_runtime.JSX.Element;
+
+declare function AlgoliaPagination(): react_jsx_runtime.JSX.Element;
+
+declare function AlgoliaProductList(): react_jsx_runtime.JSX.Element;
+
+interface AlgoliaContextType {
+    online: boolean;
+    setOnline: (online: boolean) => void;
+    toggleOnline: VoidFunction;
+}
+interface AlgoliaProviderProps {
+    children: React.ReactNode;
+    online?: boolean;
+}
+declare function AlgoliaProvider({ children, online: _online, }: AlgoliaProviderProps): react_jsx_runtime.JSX.Element;
+declare function useAlgolia(): AlgoliaContextType;
+
+declare function AlgoliaResultsCount(): string | null;
+
+declare function AlgoliaSortBy(): react_jsx_runtime.JSX.Element | null;
+
+export { Accordion, AddToCartButton, AlgoliaCategories, AlgoliaFilterPanel, type AlgoliaFilterPanelProps, AlgoliaMultiSelect, AlgoliaPagination, AlgoliaProductList, AlgoliaProvider, AlgoliaResultsCount, AlgoliaSortBy, Button, type ButtonProps, type Cart, CartFilledIcon, type CartLine, CartOutlinedIcon, CartProvider, Checkbox, type CheckboxProps$1 as CheckboxProps, ColorCheckbox, type ColorCheckboxProps, ConnectedAddToCartButton, DehashedOutlinedIcon, FavoriteButton, type FavoriteButtonProps, FavoriteFilledIcon, FavoriteOutlinedIcon, type FilterOption, type Filters, FormattedMessage, type FormattedMessageFunction, type FormattedMessageProps, GlobalStateProvider, GlobalStateProviderContext, HashedOutlinedIcon, IconButton, type IconButtonProps, Image, type ImageProps, IntlProvider, LinkButton, type LinkButtonProps, MultiSelect, type MultiSelectProps, NumberField, type NumberFieldSize, type Product, ProductCard, type ProductCardProps, ProductListing, type ProductListingProps, ProductOverviewGrid, type ProductOverviewGridProps, ProductPrice, type ProductPriceProps, ProductSku, type ProductSkuProps, RightArrowFilledIcon, Select, type SelectProps, ShowAll, type ShowAllProps, Sidebar, type SidebarProps, TextField, createProductListingSearchParams, parseProductListingSearchParams, useAlgolia, useBreakpoint, useCart, useDebouncedCallback, useDisclosure, useFormattedMessage, useGlobalState, useProductCartLine, useScrollLock };