@orangesk/orange-design-system 2.0.0-beta.11 → 2.0.0-beta.12

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

@@ -1201,7 +1201,7 @@ declare const InputStepper: React$1.FC<InputStepperProps>;
 
 declare const Skeleton: React$1.FC<React$1.HTMLAttributes<HTMLSpanElement>>;
 
-declare const pillColors: readonly ["white", "gray", "transparent", "orange"];
+declare const pillColors: readonly ["surface-primary", "surface-secondary", "surface-tertiary", "surface-subtle", "surface-moderate", "surface-accent", "transparent"];
 type PillColor = (typeof pillColors)[number];
 interface PillProps extends HTMLAttributes<HTMLSpanElement> {
     className?: string;
@@ -1320,6 +1320,8 @@ interface TableProps extends React$1.TableHTMLAttributes<HTMLTableElement> {
     headers: TableHeader[];
     /** Compact table only takes spaced needed to display its content */
     isCompact?: boolean;
+    /** Enable responsive card layout below md breakpoint for better accessibility */
+    isResponsive?: boolean;
     /** If table has horizontal scrollbar */
     isScrollable?: boolean;
     /** Different colors for even and odd rows. */
@@ -1411,11 +1413,11 @@ interface CoverProps {
         xxxl?: string;
     };
     /** Set vertical position of image */
-    bgPosition?: 'top' | 'center' | 'bottom';
+    bgPosition?: "top" | "center" | "bottom";
     /** Applies custom classNames to overlay content */
     contentClass?: string;
     /** Cover size */
-    size?: 'small' | 'medium' | 'large';
+    size?: "small" | "medium" | "large" | "xlarge";
     /** Additional className for the cover container */
     className?: string;
     /** Children content */

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

@@ -7,6 +7,7 @@ export default class Carousel {
     viewport: HTMLElement;
     track: HTMLElement;
     instance: Swiper;
+    carouselId?: string;
     constructor(element: HTMLElement, config?: Partial<SwiperOptions>);
     init(): void;
     getElements(): void;
@@ -15,7 +16,7 @@ export default class Carousel {
     /**
      * 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.
+     * Also updates accessibility attributes for pagination buttons and external controls state.
      */
     handleSlideChange(): void;
     /**
@@ -28,7 +29,39 @@ export default class Carousel {
      * @param {NodeListOf<HTMLElement>} elements - The elements containing tooltip triggers.
      */
     hideAllTooltips(elements: NodeListOf<Element>): void;
+    /**
+     * Initialize external controls that reference this carousel
+     */
+    initExternalControls(): void;
+    /**
+     * Update the disabled state of external controls based on current slide position
+     */
+    updateExternalControlsState(): void;
+    /**
+     * Go to the next slide
+     */
+    slideNext(): void;
+    /**
+     * Go to the previous slide
+     */
+    slidePrev(): void;
+    /**
+     * Get the current active slide index
+     * @returns {number} The current slide index
+     */
+    getActiveIndex(): number;
+    /**
+     * Add event listener for slide changes
+     * @param {Function} callback - Callback function to execute on slide change
+     */
+    onSlideChange(callback: (activeIndex: number) => void): void;
     destroy(): void;
     update(): void;
     static getInstance(el: HTMLElement): Carousel | null;
+    /**
+     * Find carousel instance by ID or data attribute
+     * @param {string} carouselId - The ID or data attribute value of the carousel
+     * @returns {Carousel | null} The carousel instance or null
+     */
+    static getInstanceById(carouselId: string): Carousel | null;
 }

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React from "react";
 interface CoverProps {
     /** Background image source. URL string or an object of breakpoint: url pairs
      *
@@ -26,11 +26,11 @@ interface CoverProps {
         xxxl?: string;
     };
     /** Set vertical position of image */
-    bgPosition?: 'top' | 'center' | 'bottom';
+    bgPosition?: "top" | "center" | "bottom";
     /** Applies custom classNames to overlay content */
     contentClass?: string;
     /** Cover size */
-    size?: 'small' | 'medium' | 'large';
+    size?: "small" | "medium" | "large" | "xlarge";
     /** Additional className for the cover container */
     className?: string;
     /** Children content */

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

@@ -1,5 +1,5 @@
 import React, { ReactNode, HTMLAttributes } from "react";
-export declare const pillColors: readonly ["white", "gray", "transparent", "orange"];
+export declare const pillColors: readonly ["surface-primary", "surface-secondary", "surface-tertiary", "surface-subtle", "surface-moderate", "surface-accent", "transparent"];
 export type PillColor = (typeof pillColors)[number];
 interface PillProps extends HTMLAttributes<HTMLSpanElement> {
     className?: string;

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

@@ -10,6 +10,8 @@ interface TableProps extends React.TableHTMLAttributes<HTMLTableElement> {
     headers: TableHeader[];
     /** Compact table only takes spaced needed to display its content */
     isCompact?: boolean;
+    /** Enable responsive card layout below md breakpoint for better accessibility */
+    isResponsive?: boolean;
     /** If table has horizontal scrollbar */
     isScrollable?: boolean;
     /** Different colors for even and odd rows. */

package/build/components/types/src/components/Table/docsData.d.ts

@@ -36,4 +36,6 @@ export declare const shrinkHeaders: TableHeader[];
 export declare const shrinkRows: TableRow[];
 export declare const fillHeaders: TableHeader[];
 export declare const fillRows: TableRow[];
+export declare const responsiveHeaders: TableHeader[];
+export declare const responsiveRows: TableRow[];
 export {};

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

@@ -31,4 +31,5 @@ export interface TableContextType {
     rows: TableRow[];
     footers?: TableRow[];
     expandableRows?: ExpandableRows;
+    isResponsive?: boolean;
 }