@orangesk/orange-design-system 2.0.0-alpha.1 → 2.0.0-alpha.3

package/build/components/types/mdx-components.d.ts

@@ -0,0 +1,2 @@
+import type { MDXComponents } from "mdx/types";
+export declare function useMDXComponents(components: MDXComponents): MDXComponents;

package/build/components/types/next.config.d.ts

@@ -0,0 +1,3 @@
+import type { NextConfig } from "next";
+declare const _default: NextConfig;
+export default _default;

package/build/components/types/src/app/ODSLib.d.ts

@@ -0,0 +1 @@
+export default function ODSLib(): null;

package/build/components/types/src/app/components/accordion/AccordionClientWrapper.d.ts

@@ -0,0 +1 @@
+export declare const AccordionClientWrapper: () => import("react").JSX.Element;

package/build/components/types/src/app/components/alert/AlertClientWrapper.d.ts

@@ -0,0 +1 @@
+export declare function AlertClientWrapper(): import("react").JSX.Element;

package/build/components/types/src/app/components/anchor-navigation/AnchorNavigationClientWrapper.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const AnchorNavigationClientWrapper: React.FC;

package/build/components/types/src/app/components/body-banner/BodyBannerClientWrapper.d.ts

@@ -0,0 +1 @@
+export declare const BodyBannerClientWrapper: React.FC;

package/build/components/types/src/app/components/code/CodeClientWrapper.d.ts

@@ -0,0 +1 @@
+export declare const CodeClientWrapper: React.FC;

package/build/components/types/src/app/components/cover/CoverClientWrapper.d.ts

@@ -0,0 +1 @@
+export declare const CoverClientWrapper: React.FC;

package/build/components/types/src/app/components/expander/ExpanderClientWrapper.d.ts

@@ -0,0 +1 @@
+export default function ExpanderClientWrapper(): import("react").JSX.Element;

package/build/components/types/src/app/components/feature-accordion/FeatureAccordionClientWrapper.d.ts

@@ -0,0 +1 @@
+export declare const FeatureAccordionClientWrapper: React.FC;

package/build/components/types/src/app/components/forms/autocomplete/AutocompleteClientWrapper.d.ts

@@ -0,0 +1 @@
+export declare const AutocompleteClientWrapper: ({ ...other }: any) => import("react").JSX.Element;

package/build/components/types/src/app/components/forms/datepicker/DatePickerClientWrapper.d.ts

@@ -0,0 +1 @@
+export declare const DatePickerClientWrapper: () => import("react").JSX.Element;

package/build/components/types/src/app/components/forms/radio/RadioClientWrapper.d.ts

@@ -0,0 +1 @@
+export declare const RadioClientWrapper: () => import("react").JSX.Element;

package/build/components/types/src/app/components/gauge/GaugeClientWrapper.d.ts

@@ -0,0 +1 @@
+export declare const GaugeClientWrapper: () => import("react").JSX.Element;

package/build/components/types/src/app/components/hero/HeroClientWrapper.d.ts

@@ -0,0 +1 @@
+export declare const HeroClientWrapper: React.FC;

package/build/components/types/src/app/components/icon-list/IconListClientWrapper.d.ts

@@ -0,0 +1 @@
+export declare const IconListClientWrapper: React.FC;

package/build/components/types/src/app/components/list/ListClientWrapper.d.ts

@@ -0,0 +1 @@
+export declare const ListClientWrapper: React.FC;

package/build/components/types/src/app/components/pagination/PaginationClientWrapper.d.ts

@@ -0,0 +1 @@
+export default function PaginationClientWrapper(): import("react").JSX.Element;

package/build/components/types/src/app/components/progress/ProgressClientWrapper.d.ts

@@ -0,0 +1 @@
+export declare const ProgressClientWrapper: React.FC;

package/build/components/types/src/app/components/promo-banner/PromoBannerClientWrapper.d.ts

@@ -0,0 +1 @@
+export declare const PromoBannerClientWrapper: React.FC;

package/build/components/types/src/app/components/promotion-card/PromotionCardWrapper.d.ts

@@ -0,0 +1 @@
+export declare const PromotionCardWrapper: React.FC;

package/build/components/types/src/app/components/sticker/StickerClientWrapper.d.ts

@@ -0,0 +1 @@
+export declare const StickerClientWrapper: React.FC;

package/build/components/types/src/app/components/tag/TagClientWrapper.d.ts

@@ -0,0 +1 @@
+export declare const TagClientWrapper: ({ isInverse, isDisabled }: any) => import("react").JSX.Element;

package/build/components/types/src/app/components/testimonial/TestimonialClientWrapper.d.ts

@@ -0,0 +1 @@
+export declare const TestimonialClientWrapper: React.FC;

package/build/components/types/src/app/layout.d.ts

@@ -0,0 +1,4 @@
+import "@/lib/style.scss";
+export default function RootLayout({ children, }: Readonly<{
+    children: React.ReactNode;
+}>): import("react").JSX.Element;

package/build/components/types/src/app/menuItems.d.ts

@@ -0,0 +1,24 @@
+declare const MenuItems: {
+    label: string;
+    items: ({
+        label: string;
+        href: string;
+        items?: undefined;
+    } | {
+        label: string;
+        items: ({
+            label: string;
+            href: string;
+            items?: undefined;
+        } | {
+            label: string;
+            items: {
+                label: string;
+                href: string;
+            }[];
+            href?: undefined;
+        })[];
+        href?: undefined;
+    })[];
+}[];
+export { MenuItems };

package/build/components/types/src/components/Accordion/Accordion.d.ts

@@ -0,0 +1,17 @@
+import React, { ReactNode } from "react";
+interface AccordionProps {
+    /** Heading level from 1 to 6 */
+    headingLevel?: number;
+    /** Accordion is enclosed in another component */
+    isEnclosed?: boolean;
+    /** Adjustable spacing */
+    size?: "large";
+    /** Additional CSS classes */
+    className?: string;
+    /** Accordion content */
+    children: ReactNode;
+    /** Additional HTML attributes */
+    [key: string]: any;
+}
+declare const Accordion: React.FC<AccordionProps>;
+export { Accordion };

package/build/components/types/src/components/Accordion/Accordion.static.d.ts

@@ -0,0 +1,17 @@
+interface AccordionConfig {
+    buttonSelector: string;
+}
+export default class Accordion {
+    private element;
+    private config;
+    private rovingTabindex;
+    private buttons;
+    constructor(element: HTMLElement, config?: Partial<AccordionConfig>);
+    private onFocus;
+    private init;
+    private onClick;
+    destroy(): void;
+    update(): void;
+    static getInstance(el: HTMLElement): Accordion | null;
+}
+export {};

package/build/components/types/src/components/Accordion/AccordionHeader.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+interface AccordionHeaderProps {
+    /** Header id */
+    id: string;
+    /** Active state */
+    isActive?: boolean;
+    /** Header title */
+    title: string;
+    /** Additional CSS classes */
+    className?: string;
+    /** Additional HTML attributes */
+    [key: string]: any;
+}
+declare const AccordionHeader: React.FC<AccordionHeaderProps>;
+export default AccordionHeader;

package/build/components/types/src/components/Accordion/AccordionItem.d.ts

@@ -0,0 +1,19 @@
+import React, { ReactNode } from "react";
+export interface AccordionItemProps {
+    /** Accordion item id (automatically generated by default)  */
+    id?: string;
+    /** Open state indication */
+    isActive?: boolean;
+    /** Custom header renderer. Receives title, id and isActive props as function parameters. */
+    renderHeader?: (title: string, id: string, isActive: boolean) => ReactNode;
+    /** Title of accordion item */
+    title: string;
+    /** Additional CSS classes */
+    className?: string;
+    /** Accordion item content */
+    children: ReactNode;
+    /** Additional HTML attributes */
+    [key: string]: any;
+}
+declare const AccordionItem: React.FC<AccordionItemProps>;
+export { AccordionItem };

package/build/components/types/src/components/Accordion/HeadingContext.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("react").Context<number | null>;
+export default _default;

package/build/components/types/src/components/Accordion/index.d.ts

@@ -0,0 +1,3 @@
+import "./styles/style.scss";
+export { Accordion } from "./Accordion";
+export { AccordionItem } from "./AccordionItem";

package/build/components/types/src/components/Accordion/tests/data.d.ts

@@ -0,0 +1,5 @@
+declare const data: {
+    title: string;
+    children: string;
+}[];
+export default data;

package/build/components/types/{components → src/components}/Alert/Alert.d.ts

@@ -9,8 +9,6 @@ interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
     headingLevel?: number;
     /** Sets Alert to full width */
     isFullWidth?: boolean;
-    /** Sets Alert to use inverse color scheme */
-    isInverse?: boolean;
     /** Callback function when close button is clicked */
     onClose?: () => void;
     /** Custom title renderer. Passes props as function parameter. */
@@ -20,6 +18,8 @@ interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
     /** Type of alert, sets icon and color */
     type?: AlertType;
     className?: string;
+    /** Sets Alert to use specific color scheme */
+    colorScheme?: "dark" | "light";
 }
 declare const Alert: React.FC<AlertProps>;
 export { Alert };

package/build/components/types/src/components/AnchorNavigation/AnchorNavigation.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+interface AnchorNavigationItem {
+    label: string;
+    href: string;
+    isActive?: boolean;
+}
+interface AnchorNavigationProps {
+    items: AnchorNavigationItem[];
+    className?: string;
+    colorScheme?: "light" | "dark";
+    children?: React.ReactNode;
+}
+declare const AnchorNavigation: {
+    ({ items, className, colorScheme, children, }: AnchorNavigationProps): React.JSX.Element;
+    displayName: string;
+};
+export { AnchorNavigation };

package/build/components/types/src/components/AnchorNavigation/AnchorNavigation.static.d.ts

@@ -0,0 +1,24 @@
+interface AnchorNavigationConfig {
+    itemSelector: string;
+}
+export declare const defaultConfig: AnchorNavigationConfig;
+export declare const configDocs: {
+    itemSelector: string;
+};
+export default class AnchorNavigation {
+    private element;
+    private config;
+    private items;
+    private activeItemIndex;
+    constructor(element: HTMLElement, config?: Partial<AnchorNavigationConfig>);
+    static getInstance(el: HTMLElement): AnchorNavigation | null;
+    private init;
+    destroy(): void;
+    update(): void;
+    private isActive;
+    private handleClick;
+    private toggleItem;
+    activateNthItem(index: number): void;
+    getActiveItemIndex(): number | null;
+}
+export {};

package/build/components/types/src/components/AnchorNavigation/index.d.ts

@@ -0,0 +1,2 @@
+import "./styles/style.scss";
+export { AnchorNavigation } from "./AnchorNavigation";

package/build/components/types/src/components/Bar/Bar.d.ts

@@ -0,0 +1,22 @@
+import React from "react";
+type BarAlign = "start" | "end" | "center";
+type BarSpace = "small" | "large";
+interface BarProps extends React.HTMLAttributes<HTMLElement> {
+    /** Flex vertical alignment */
+    align?: BarAlign;
+    /** Allow horizontally stacked items to wrap into new lines */
+    canWrap?: boolean;
+    /** Stack BarItems vertically */
+    isVertical?: boolean;
+    /** Item spacing */
+    space?: BarSpace;
+    /** Html tag to render */
+    tag?: React.ElementType;
+    /** Additional class names */
+    className?: string;
+    /** Child content */
+    children?: React.ReactNode;
+}
+export declare const CLASS_ROOT = "bar";
+declare const Bar: React.ForwardRefExoticComponent<BarProps & React.RefAttributes<HTMLElement>>;
+export { Bar };

package/build/components/types/src/components/Bar/BarBreak.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+interface BarBreakProps extends React.HTMLAttributes<HTMLElement> {
+    /** HTML tag to render the compontent with */
+    tag?: React.ElementType;
+    /** Additional class names */
+    className?: string;
+    /** Child content */
+    children?: React.ReactNode;
+}
+export declare const CLASS_ROOT = "bar__break";
+declare const BarBreak: React.ForwardRefExoticComponent<BarBreakProps & React.RefAttributes<HTMLElement>>;
+export { BarBreak };

package/build/components/types/src/components/Bar/BarItem.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+interface CommonProps {
+    /** Bar item could shrink and wrap content if there is not enough empty space */
+    canShrink?: boolean;
+    /** Bar item should fill empty space */
+    isFilling?: boolean;
+    /** Tag of the item */
+    tag?: React.ElementType;
+    /** Additional class name */
+    className?: string;
+    /** Child content */
+    children?: React.ReactNode;
+}
+export declare const CLASS_ROOT = "bar__item";
+declare const BarItem: React.ForwardRefExoticComponent<CommonProps & React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>>;
+export { BarItem };

package/build/components/types/src/components/Bar/index.d.ts

@@ -0,0 +1,4 @@
+import "./styles/style.scss";
+export { Bar } from "./Bar";
+export { BarItem } from "./BarItem";
+export { BarBreak } from "./BarBreak";

package/build/components/types/src/components/BlockAction/BlockAction.d.ts

@@ -0,0 +1,9 @@
+import React, { ReactElement } from "react";
+export interface BlockActionProps {
+    /** 1 and only one single element */
+    children: ReactElement;
+    className?: string;
+    [key: string]: any;
+}
+declare const BlockAction: React.FC<BlockActionProps>;
+export { BlockAction };

package/build/components/types/src/components/BlockAction/BlockAction.static.d.ts

@@ -0,0 +1,19 @@
+export interface BlockActionConfig {
+    controlSelector: string;
+    indicatorSelector: string;
+    activeClass: string;
+}
+export declare const defaultConfig: BlockActionConfig;
+export default class BlockAction {
+    private element;
+    private config;
+    private controlElement;
+    private indicatorElements;
+    constructor(element: HTMLElement, config?: Partial<BlockActionConfig>);
+    private init;
+    private highlightIndicators;
+    private unhighlightIndicators;
+    destroy(): void;
+    update(): void;
+    static getInstance(el: HTMLElement): BlockAction | null;
+}

package/build/components/types/src/components/BlockAction/BlockActionControl.d.ts

@@ -0,0 +1,9 @@
+import React, { ReactElement } from "react";
+export interface BlockActionControlProps {
+    /** 1 and only one single element */
+    children: ReactElement;
+    className?: string;
+    [key: string]: any;
+}
+declare const BlockActionControl: React.FC<BlockActionControlProps>;
+export { BlockActionControl };

package/build/components/types/src/components/BlockAction/BlockActionIndicator.d.ts

@@ -0,0 +1,9 @@
+import React, { ReactElement } from "react";
+export interface BlockActionIndicatorProps {
+    /** 1 and only one single element */
+    children: ReactElement;
+    className?: string;
+    [key: string]: any;
+}
+declare const BlockActionIndicator: React.FC<BlockActionIndicatorProps>;
+export { BlockActionIndicator };

package/build/components/types/src/components/BlockAction/CloneElementWithClassName.d.ts

@@ -0,0 +1,8 @@
+import React, { ReactElement } from "react";
+interface CloneElementWithClassNameProps {
+    className?: string;
+    children: ReactElement<any>;
+    [key: string]: any;
+}
+declare const CloneElementWithClassName: React.FC<CloneElementWithClassNameProps>;
+export { CloneElementWithClassName };

package/build/components/types/src/components/BlockAction/Context.d.ts

@@ -0,0 +1,13 @@
+import React, { ReactNode, Dispatch, SetStateAction } from "react";
+interface ContextType {
+    isIndicating: boolean;
+    isActive: boolean;
+    setIsActive: Dispatch<SetStateAction<boolean>>;
+    setIsIndicating: Dispatch<SetStateAction<boolean>>;
+}
+export declare const Context: React.Context<ContextType>;
+interface ProviderProps {
+    children: ReactNode;
+}
+export declare const Provider: React.FC<ProviderProps>;
+export {};

package/build/components/types/src/components/BlockAction/index.d.ts

@@ -0,0 +1,16 @@
+import React, { ReactElement } from "react";
+import { BlockAction } from "./BlockAction";
+import { BlockActionControl } from "./BlockActionControl";
+import { BlockActionIndicator } from "./BlockActionIndicator";
+import "./styles/style.scss";
+export interface BlockActionOverrideProps {
+    /** 1 and only one single element */
+    children: ReactElement;
+    className?: string;
+    [key: string]: any;
+}
+export { BlockAction };
+export { BlockActionControl };
+declare const BlockActionOverride: React.FC<BlockActionOverrideProps>;
+export { BlockActionOverride };
+export { BlockActionIndicator };

package/build/components/types/src/components/BodyBanner/BodyBanner.d.ts

@@ -0,0 +1,20 @@
+import React from "react";
+interface BodyBannerProps {
+    size: "small" | "large";
+    /** Color scheme for whole BodyBanner */
+    colorScheme: "light" | "dark";
+    /** Color scheme for whole BodyBanner */
+    color?: "gray" | "orange";
+    /** Additional CSS classes */
+    className?: string;
+    /** Image URL */
+    imageUrl?: string;
+    /** Title */
+    title?: string;
+    /** Subtitle */
+    description?: string;
+    /** Button text */
+    buttonText?: string;
+}
+export declare const BodyBanner: (props: BodyBannerProps) => React.JSX.Element;
+export {};

package/build/components/types/src/components/BodyBanner/index.d.ts

@@ -0,0 +1,2 @@
+import "./styles/style.scss";
+export { BodyBanner } from "./BodyBanner";

package/build/components/types/src/components/Breadcrumbs/BreadcrumbItem.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+interface BreadcrumbItemProps {
+    /** Additional CSS classes */
+    className?: string;
+    /** Current page item */
+    isCurrent?: boolean;
+    /** Item text */
+    text: string;
+    /** Item URL. Omit the URL for current item. */
+    url?: string;
+    /** Additional props */
+    [key: string]: any;
+}
+declare const BreadcrumbItem: React.FC<BreadcrumbItemProps>;
+export { BreadcrumbItem };

package/build/components/types/src/components/Breadcrumbs/Breadcrumbs.d.ts

@@ -0,0 +1,20 @@
+interface BreadcrumbItemData {
+    /** Item text */
+    text: string;
+    /** Item URL. Omit the URL for current item. */
+    url?: string;
+}
+interface BreadcrumbsProps {
+    /** Additional CSS classes */
+    className?: string;
+    /** Use white breadcrumbs on dark background */
+    colorScheme?: "dark" | "light";
+    /** Breadcrumb items */
+    items: BreadcrumbItemData[];
+    /** Navigation label */
+    label?: string;
+    /** Additional props */
+    [key: string]: any;
+}
+declare const Breadcrumbs: React.FC<BreadcrumbsProps>;
+export { Breadcrumbs };

package/build/components/types/src/components/Breadcrumbs/index.d.ts

@@ -0,0 +1,2 @@
+import "./styles/style.scss";
+export { Breadcrumbs } from "./Breadcrumbs";

package/build/components/types/{components → src/components}/Button/Button.d.ts

@@ -7,7 +7,7 @@ interface CommonProps {
     isActive?: boolean;
     isDefault?: boolean;
     isDisabled?: boolean;
-    isInverse?: boolean;
+    colorScheme?: "dark" | "light";
     isSquare?: boolean;
     size?: ButtonSize;
     type?: ButtonType;

package/build/components/types/src/components/Card/Card.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+export declare const cardColors: readonly ["white", "black", "orange"];
+export type CardColor = (typeof cardColors)[number];
+export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Custom background color */
+    color?: CardColor;
+    /** Add border */
+    hasBorder?: boolean;
+    hasShadow?: boolean;
+}
+export declare const CLASS_ROOT = "card";
+declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;
+export { Card };

package/build/components/types/src/components/Card/CardProductHeader.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+interface CardProductHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+    image?: React.ReactNode;
+    /** Use small spacing */
+    space?: "small";
+}
+export declare const CLASS_ROOT = "card__product";
+declare const CardProductHeader: React.ForwardRefExoticComponent<CardProductHeaderProps & React.RefAttributes<HTMLDivElement>>;
+export { CardProductHeader };

package/build/components/types/src/components/Card/CardSection.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+export declare const cardSectionColors: readonly ["orange", "gray", "blue", "green", "pink", "yellow", "violet"];
+export type CardSectionColor = (typeof cardSectionColors)[number];
+interface CardSectionProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Custom background color */
+    color?: CardSectionColor;
+    /** Fill available space using flexbox */
+    isFilling?: boolean;
+    /** Use small spacing */
+    space?: "small";
+}
+export declare const CLASS_ROOT = "card__section";
+declare const CardSection: React.ForwardRefExoticComponent<CardSectionProps & React.RefAttributes<HTMLDivElement>>;
+export { CardSection };

package/build/components/types/src/components/Card/index.d.ts

@@ -0,0 +1,4 @@
+import "./styles/style.scss";
+export { Card } from "./Card";
+export { CardSection } from "./CardSection";
+export { CardProductHeader } from "./CardProductHeader";

package/build/components/types/src/components/Card/tests/data.d.ts

@@ -0,0 +1,5 @@
+declare const data: {
+    fill: boolean;
+    content: string;
+}[][];
+export default data;

package/build/components/types/src/components/Carousel/Carousel.d.ts

@@ -0,0 +1,12 @@
+import React, { ReactNode, HTMLAttributes } from "react";
+interface CarouselProps extends HTMLAttributes<HTMLDivElement> {
+    /** Swiper.js (https://swiperjs.com/) options object */
+    swiperOptions?: Record<string, any>;
+    /** Inverse colors */
+    colorScheme?: "light" | "dark";
+    /** Carousel items */
+    items: ReactNode[];
+    className?: string;
+}
+declare const Carousel: React.FC<CarouselProps>;
+export { Carousel };

package/build/components/types/src/components/Carousel/Carousel.static.d.ts

@@ -0,0 +1,33 @@
+import { Swiper } from "swiper";
+import type { SwiperOptions } from "swiper/types";
+export declare const defaultConfig: SwiperOptions;
+export default class Carousel {
+    element: HTMLElement;
+    config: SwiperOptions;
+    viewport: HTMLElement;
+    track: HTMLElement;
+    instance: Swiper;
+    constructor(element: HTMLElement, config?: Partial<SwiperOptions>);
+    init(): void;
+    getElements(): void;
+    getCustomOptions(): void;
+    /**
+     * Handles the slide change event on the carousel.
+     * Updates the tooltip position for the active slide and hides tooltips for non-active slides.
+     * Also updates accessibility attributes for pagination buttons.
+     */
+    handleSlideChange(): void;
+    /**
+     * Updates the position of tooltips for the given element.
+     * @param {HTMLElement} element - The element containing tooltip triggers.
+     */
+    updateTooltipPosition(element: HTMLElement): void;
+    /**
+     * Hides all tooltips for the given elements.
+     * @param {NodeListOf<HTMLElement>} elements - The elements containing tooltip triggers.
+     */
+    hideAllTooltips(elements: NodeListOf<Element>): void;
+    destroy(): void;
+    update(): void;
+    static getInstance(el: HTMLElement): Carousel | null;
+}

package/build/components/types/src/components/Carousel/CarouselItem.d.ts

@@ -0,0 +1,7 @@
+import React, { ReactNode, HTMLAttributes } from "react";
+interface CarouselItemProps extends HTMLAttributes<HTMLDivElement> {
+    className?: string;
+    children?: ReactNode;
+}
+declare const CarouselItem: React.FC<CarouselItemProps>;
+export { CarouselItem };