@sonic-equipment/ui 0.0.19 → 0.0.20

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

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

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

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

package/dist/algolia/algolia-multi-select.d.ts

@@ -0,0 +1,5 @@
+interface AlgoliaMultiSelectProps {
+    attribute: string;
+}
+export declare function AlgoliaMultiSelect({ attribute }: AlgoliaMultiSelectProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

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

package/dist/algolia/algolia-product-list.d.ts

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

package/dist/algolia/algolia-results-count.d.ts

@@ -0,0 +1 @@
+export declare function AlgoliaResultsCount(): string | null;

package/dist/algolia/algolia-searchclient-mock.d.ts

@@ -0,0 +1,4 @@
+import { SearchClient } from 'algoliasearch/lite';
+export declare const searchClient: ({ online }: {
+    online: boolean;
+}) => SearchClient;

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

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

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

@@ -0,0 +1,17 @@
+import { StoryObj } from '@storybook/react';
+interface Props {
+    online: boolean;
+}
+declare const meta: {
+    argTypes: {
+        online: {
+            control: "boolean";
+        };
+    };
+    args: {
+        online: false;
+    };
+    title: string;
+};
+export default meta;
+export declare const Default: StoryObj<Props>;

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

@@ -1,16 +1,17 @@
-/// <reference types="react" />
+import { ReactNode } from 'react';
 export interface ButtonProps {
     _pseudo?: 'none' | 'focus' | 'hover' | 'active';
-    children?: string;
+    children?: ReactNode | string;
     className?: string;
     color?: 'primary' | 'secondary';
     condensed?: boolean;
     icon?: React.ReactNode;
+    iconPosition?: 'left' | 'right';
     isDisabled?: boolean;
     onPress?: VoidFunction;
-    size?: 'md' | 'lg';
+    size?: 'sm' | 'md' | 'lg';
     type?: 'button' | 'submit' | 'reset';
     variant?: 'solid' | 'outline' | 'ghost';
     withArrow?: boolean;
 }
-export declare function Button({ _pseudo, children, className, color, condensed, icon, isDisabled, onPress, size, type, variant, withArrow, }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function Button({ _pseudo, children, className, color, condensed, icon, iconPosition, isDisabled, onPress, size, type, variant, withArrow, }: ButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/buttons/button/button.stories.d.ts

@@ -24,3 +24,4 @@ export declare const SecondaryActive: Story;
 export declare const Ghost: Story;
 export declare const SizeMD: Story;
 export declare const SizeMDCondensed: Story;
+export declare const SizeSM: Story;

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

@@ -0,0 +1,10 @@
+import type { HTMLAttributeAnchorTarget } from 'react';
+export interface LinkButtonProps {
+    children?: React.ReactNode | string;
+    className?: string;
+    href?: string;
+    isDisabled?: boolean;
+    onPress?: VoidFunction;
+    target?: HTMLAttributeAnchorTarget;
+}
+export declare function LinkButton({ children, className, href, isDisabled, onPress, target, }: LinkButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/buttons/link-button/link-button.stories.d.ts

@@ -0,0 +1,19 @@
+import type { StoryObj } from '@storybook/react';
+import { LinkButton } from './link-button';
+declare const meta: {
+    args: {
+        onPress: import("@vitest/spy").Mock<[], void>;
+    };
+    component: typeof LinkButton;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    title: string;
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithIcon: Story;
+export declare const AsButton: Story;
+export declare const Disabled: Story;

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

@@ -13,5 +13,4 @@ type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
 export declare const Disabled: Story;
 export declare const Focus: Story;
-export declare const Active: Story;
 export declare const Large: Story;

package/dist/collapsables/show-all/show-all.d.ts

@@ -0,0 +1,9 @@
+import { type ReactElement } from 'react';
+export interface ShowAllProps {
+    children?: ReactElement | ReactElement[];
+    hasTransparency?: boolean;
+    initialHeight?: number;
+    isOpen?: boolean;
+    onToggle: (isOpen: boolean) => void;
+}
+export declare const ShowAll: ({ children, hasTransparency, initialHeight, isOpen, onToggle, }: ShowAllProps) => import("react/jsx-runtime").JSX.Element;

package/dist/collapsables/show-all/show-all.stories.d.ts

@@ -0,0 +1,17 @@
+import { StoryObj } from '@storybook/react';
+import { ShowAllProps } from './show-all';
+declare const meta: {
+    args: {
+        onToggle: import("@vitest/spy").Mock<[isOpen: boolean], void>;
+    };
+    component: ({ children, hasTransparency, initialHeight, isOpen, onToggle, }: ShowAllProps) => import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    title: string;
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Text: Story;
+export declare const Checkboxes: Story;

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

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

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

@@ -0,0 +1,15 @@
+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>;
+    };
+    component: ({ onClearAllFilters, onClearFilter, selectedFilters, }: import("./active-filters").ActiveFiltersProps) => import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        layout: string;
+    };
+    title: string;
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/dist/filters/multi-select/multi-select.d.ts

@@ -0,0 +1,19 @@
+import { ReactNode } from 'react';
+export interface FilterOption {
+    amount: number;
+    isSelected: boolean;
+    label: string;
+    value: string;
+}
+export interface MultiSelectProps<T extends FilterOption> {
+    amountShown?: number;
+    isOpen: boolean;
+    onChange: (value: T) => void;
+    onToggleOpen: (isOpen: boolean) => void;
+    options: T[];
+    render: ({ onChange, option, }: {
+        onChange: (key: string) => void;
+        option: T;
+    }) => ReactNode;
+}
+export declare function MultiSelect<T extends FilterOption>({ amountShown, isOpen, onChange, onToggleOpen, options, render, }: MultiSelectProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/filters/multi-select/multi-select.stories.d.ts

@@ -0,0 +1,20 @@
+import type { StoryObj } from '@storybook/react';
+import { FilterOption, MultiSelect, MultiSelectProps } from './multi-select';
+type ColorFilterOption = FilterOption & {
+    color: string;
+};
+declare const meta: {
+    args: {
+        onChange: import("@vitest/spy").Mock<[value: FilterOption], void>;
+        onToggleOpen: import("@vitest/spy").Mock<[isOpen: boolean], void>;
+    };
+    component: typeof MultiSelect;
+    parameters: {
+        layout: string;
+    };
+    title: string;
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const WithCheckboxes: Story;
+export declare const WithColorCheckboxes: StoryObj<MultiSelectProps<ColorFilterOption>>;

package/dist/forms/color-checkbox/color-checkbox.stories.d.ts

@@ -16,3 +16,4 @@ type Story = StoryObj<typeof ColorCheckbox>;
 export declare const Checked: Story;
 export declare const Unchecked: Story;
 export declare const CheckedFocus: Story;
+export declare const CheckedDisabled: Story;

package/dist/forms/select/select.d.ts

@@ -1,9 +1,9 @@
-export interface SelectProps {
+export interface SelectProps<T> {
     disabled?: boolean;
     label: string;
-    onChange: (value: string) => void;
-    options: Record<string, string>;
-    selectedOption?: string;
+    onChange: (value: keyof T) => void;
+    options: T;
+    selectedOption?: keyof T;
     showLabel?: boolean;
 }
-export declare const Select: ({ disabled, label, onChange, options, selectedOption, showLabel, }: SelectProps) => import("react/jsx-runtime").JSX.Element;
+export declare function Select<T extends object>({ disabled, label, onChange, options, selectedOption, showLabel, }: SelectProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/forms/select/select.stories.d.ts

@@ -1,10 +1,17 @@
 import type { StoryObj } from '@storybook/react';
 import { Select } from './select';
+declare const options: {
+    readonly new: "New";
+    readonly popular: "Popular";
+    readonly price_asc: "Price: Low - High";
+    readonly price_desc: "Price: High - Low";
+    readonly recommended: "Recommended";
+};
 declare const meta: {
     args: {
-        onChange: import("@vitest/spy").Mock<[value: string], void>;
+        onChange: import("@vitest/spy").Mock<[value: never], void>;
     };
-    component: ({ disabled, label, onChange, options, selectedOption, showLabel, }: import("./select").SelectProps) => import("react/jsx-runtime").JSX.Element;
+    component: typeof Select;
     parameters: {
         layout: string;
     };
@@ -15,5 +22,5 @@ export default meta;
 type Story = StoryObj<typeof Select>;
 export declare const WithLabel: Story;
 export declare const WithoutLabel: Story;
-export declare const DefaultSelected: Story;
+export declare const DefaultSelected: StoryObj<typeof Select<typeof options>>;
 export declare const Disabled: Story;

package/dist/icons/close/close-filled-icon.d.ts

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

package/dist/icons/filter/filter-outlined-icon.d.ts

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

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ReactElement, ReactNode, FormEventHandler, KeyboardEvent, ComponentType } from 'react';
+import { ReactNode, HTMLAttributeAnchorTarget, ReactElement, FormEventHandler, KeyboardEvent, ComponentType } from 'react';
 
 type AddToCartState = 'initial' | 'spinner' | 'manual-input';
 interface AddToCartButtonProps {
@@ -12,19 +12,20 @@ declare function AddToCartButton({ initialState, onChange, quantity, }: AddToCar
 
 interface ButtonProps {
     _pseudo?: 'none' | 'focus' | 'hover' | 'active';
-    children?: string;
+    children?: ReactNode | string;
     className?: string;
     color?: 'primary' | 'secondary';
     condensed?: boolean;
     icon?: React.ReactNode;
+    iconPosition?: 'left' | 'right';
     isDisabled?: boolean;
     onPress?: VoidFunction;
-    size?: 'md' | 'lg';
+    size?: 'sm' | 'md' | 'lg';
     type?: 'button' | 'submit' | 'reset';
     variant?: 'solid' | 'outline' | 'ghost';
     withArrow?: boolean;
 }
-declare function Button({ _pseudo, children, className, color, condensed, icon, isDisabled, onPress, size, type, variant, withArrow, }: ButtonProps): react_jsx_runtime.JSX.Element;
+declare function Button({ _pseudo, children, className, color, condensed, icon, iconPosition, isDisabled, onPress, size, type, variant, withArrow, }: ButtonProps): react_jsx_runtime.JSX.Element;
 
 interface FavoriteButtonProps {
     isFavorite: boolean;
@@ -41,6 +42,16 @@ interface IconButtonProps {
 }
 declare function IconButton({ children, className, color, onPress, size, }: IconButtonProps): react_jsx_runtime.JSX.Element;
 
+interface LinkButtonProps {
+    children?: React.ReactNode | string;
+    className?: string;
+    href?: string;
+    isDisabled?: boolean;
+    onPress?: VoidFunction;
+    target?: HTMLAttributeAnchorTarget;
+}
+declare function LinkButton({ children, className, href, isDisabled, onPress, target, }: LinkButtonProps): react_jsx_runtime.JSX.Element;
+
 interface Source$1 {
   url: string
   width: number
@@ -100,6 +111,15 @@ interface AccordionProps {
 }
 declare function Accordion({ children, color, hasLineSeparator, size, }: AccordionProps): react_jsx_runtime.JSX.Element;
 
+interface ShowAllProps {
+    children?: ReactElement | ReactElement[];
+    hasTransparency?: boolean;
+    initialHeight?: number;
+    isOpen?: boolean;
+    onToggle: (isOpen: boolean) => void;
+}
+declare const ShowAll: ({ children, hasTransparency, initialHeight, isOpen, onToggle, }: ShowAllProps) => react_jsx_runtime.JSX.Element;
+
 interface ProductPriceProps {
     className?: string;
     current: number;
@@ -113,6 +133,25 @@ interface ProductSkuProps {
 }
 declare function ProductSku({ sku }: ProductSkuProps): react_jsx_runtime.JSX.Element;
 
+interface FilterOption {
+    amount: number;
+    isSelected: boolean;
+    label: string;
+    value: string;
+}
+interface MultiSelectProps<T extends FilterOption> {
+    amountShown?: number;
+    isOpen: boolean;
+    onChange: (value: T) => void;
+    onToggleOpen: (isOpen: boolean) => void;
+    options: T[];
+    render: ({ onChange, option, }: {
+        onChange: (key: string) => void;
+        option: T;
+    }) => ReactNode;
+}
+declare function MultiSelect<T extends FilterOption>({ amountShown, isOpen, onChange, onToggleOpen, options, render, }: MultiSelectProps<T>): react_jsx_runtime.JSX.Element;
+
 interface CheckboxProps$1 {
     _pseudo?: 'none' | 'focus' | 'hover' | 'active';
     children: ReactNode;
@@ -169,15 +208,15 @@ interface NumberFieldProps {
  */
 declare function NumberField({ autoFocus, autoGrow, defaultValue, formatOptions, isDisabled, isInvalid, isReadOnly, isRequired, label, maxLength, maxValue, minValue, name, onChange, onInput, onKeyUp, placeholder, showLabel, size, value, withButtons, }: NumberFieldProps): react_jsx_runtime.JSX.Element;
 
-interface SelectProps {
+interface SelectProps<T> {
     disabled?: boolean;
     label: string;
-    onChange: (value: string) => void;
-    options: Record<string, string>;
-    selectedOption?: string;
+    onChange: (value: keyof T) => void;
+    options: T;
+    selectedOption?: keyof T;
     showLabel?: boolean;
 }
-declare const Select: ({ disabled, label, onChange, options, selectedOption, showLabel, }: SelectProps) => react_jsx_runtime.JSX.Element;
+declare function Select<T extends object>({ disabled, label, onChange, options, selectedOption, showLabel, }: SelectProps<T>): react_jsx_runtime.JSX.Element;
 
 interface TextFieldProps {
     autoFocus?: boolean;
@@ -220,11 +259,7 @@ declare function FavoriteOutlinedIcon(props: React.SVGProps<SVGSVGElement>): rea
 
 declare function HashedOutlinedIcon(props: React.SVGProps<SVGSVGElement>): react_jsx_runtime.JSX.Element;
 
-interface Translations {
-    'Excl. VAT': string;
-    'Incl. VAT': string;
-}
-type TranslationId = keyof Translations;
+type TranslationId = 'Chosen filters' | 'Clear filters' | 'Excl. VAT' | 'Incl. VAT' | 'Show all' | 'Show filters' | 'Show less' | 'Sort' | 'articles' | 'article';
 
 interface FormattedMessageProps {
     id: TranslationId;
@@ -278,28 +313,29 @@ 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 Sort = {
-    by: string;
-    direction: string;
-};
 type ProductListingProps = {
     activeFilters: ActiveFilters;
     filters: Filters;
     isLoading?: boolean;
     onFilterChange: (filters: ActiveFilters) => void;
-    onSortChange: (sort: Sort) => void;
-    productCard: ComponentType<any>;
+    onSortChange: (sort: SortKey) => void;
+    productCard: ComponentType;
     products: {
         id: string;
         title: string;
     }[];
-    sort: {
-        by: string;
-        direction: string;
-    };
+    sort: SortKey;
     total: number;
 };
 declare function ProductListing({ activeFilters, filters, isLoading, onFilterChange, onSortChange, productCard: ProductCard, products, }: ProductListingProps): react_jsx_runtime.JSX.Element;
@@ -323,4 +359,9 @@ declare function parseProductListingSearchParams(params: URLSearchParams): {
     };
 };
 
-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 Filters, FormattedMessage, type FormattedMessageFunction, type FormattedMessageProps, HashedOutlinedIcon, IconButton, type IconButtonProps, Image, type ImageProps, IntlProvider, NumberField, type NumberFieldSize, ProductCard, type ProductCardProps, ProductListing, type ProductListingProps, ProductOverviewGrid, type ProductOverviewGridProps, ProductPrice, type ProductPriceProps, ProductSku, type ProductSkuProps, RightArrowFilledIcon, Select, type SelectProps, type Sort, TextField, createProductListingSearchParams, parseProductListingSearchParams, useFormattedMessage };
+interface SidebarProps {
+    children: React.ReactNode;
+}
+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 };