@scbt-ecom/ui 0.64.1 → 0.66.0

package/dist/shared/types/dicriminatedUnion.d.ts

@@ -0,0 +1,7 @@
+export type DiscriminatedUnion<Discriminator extends keyof Union, Union extends {
+    [Key in Discriminator]: unknown;
+}> = Union extends {
+    [Key in Discriminator]: infer Value;
+} ? Value extends Union[Discriminator] ? Extract<Union, {
+    [Key in Discriminator]: Value;
+}> : never : never;

package/dist/shared/types/index.d.ts

@@ -1 +1,3 @@
 export type * from './deepPartial';
+export type * from './keysOf';
+export type * from './dicriminatedUnion';

package/dist/shared/types/keysOf.d.ts

@@ -0,0 +1,5 @@
+type Primitive = string | number | boolean | null | undefined;
+export type KeysOf<T> = T extends Primitive ? never : T extends any[] ? KeysOf<T[number]> : T extends object ? {
+    [K in keyof T]: K | KeysOf<T[K]>;
+}[keyof T] : never;
+export {};

package/dist/shared/ui/button/index.d.ts

@@ -1 +1,2 @@
 export { Button, type ButtonProps } from './Button';
+export { buttonPrimitiveIntent, buttonPrimitiveTextFormat, buttonPrimitiveSize } from './model/helpers';

package/dist/shared/ui/button/model/helpers.d.ts

@@ -1,8 +1,25 @@
 import { ButtonConfig } from '../Button';
 export declare const setButtonLoaderIntent: (intent: ButtonConfig["intent"]) => "primary" | "secondary" | null | undefined;
+export declare const buttonPrimitiveSize: {
+    readonly sm: "h-10";
+    readonly md: "h-12";
+    readonly lg: "h-14";
+};
+export declare const buttonPrimitiveTextFormat: {
+    readonly capitalize: "capitalize";
+    readonly uppercase: "uppercase";
+    readonly lowercase: "lowercase";
+    readonly initial: "initial";
+};
+export declare const buttonPrimitiveIntent: {
+    readonly primary: "bg-color-primary-default text-color-white outline-offset-[3px] hover:bg-color-primary-hover  active:bg-color-primary-hover  focus:bg-color-primary-default focus:outline-primary-focus  disabled:bg-color-primary-disabled";
+    readonly secondary: "bg-transparent text-color-primary-default border border-solid border-primary-default hover:bg-color-primary-tr-hover active:bg-color-primary-tr-pressed active:border-primary-hover  focus:outline-primary-focus  focus:bg-color-primary-tr-focus disabled:bg-color-blue-grey-200 disabled:text-color-primary-disabled disabled:border-transparent";
+    readonly ghost: "bg-transparent text-color-primary-default hover:bg-color-primary-tr-hover hover:text-color-primary-hover focus:bg-color-primary-tr-focus focus:outline-primary-focus active:bg-color-primary-tr-pressed active:text-color-primary-hover disabled:text-color-primary-disabled disabled:bg-transparent";
+    readonly negative: "bg-color-secondary-default text-color-white outline-offset-[3px] hover:bg-color-secondary-hover disabled:bg-color-secondary-disabled active:bg-color-secondary-hover focus:bg-color-secondary-default focus:outline-primary-focus";
+};
 export declare const buttonConfig: (props?: ({
     intent?: "primary" | "secondary" | "ghost" | "negative" | null | undefined;
-    size?: "sm" | "md" | "lg" | null | undefined;
+    size?: "md" | "sm" | "lg" | null | undefined;
     textFormat?: "capitalize" | "uppercase" | "lowercase" | "initial" | null | undefined;
     isFull?: boolean | null | undefined;
     isLoading?: boolean | null | undefined;

package/dist/shared/ui/buttonIcon/ButtonIcon.d.ts

@@ -6,7 +6,7 @@ type ButtonClasses = {
 };
 declare const buttonConfig: (props?: ({
     intent?: "primary" | "secondary" | "ghost" | null | undefined;
-    size?: "sm" | "md" | "lg" | null | undefined;
+    size?: "md" | "sm" | "lg" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 type ButtonProps = VariantProps<typeof buttonConfig>;
 export interface IButtonIconProps extends Omit<ComponentProps<'button'>, 'className'>, ButtonProps {

package/dist/shared/ui/carousel/CarouselBase.d.ts

@@ -0,0 +1,29 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { EmblaOptionsType } from 'embla-carousel';
+import { AutoplayOptionsType } from 'embla-carousel-autoplay';
+import { DotsOptions, NavArrowOptions } from './model';
+import { ArrowNavigationButtonClasses, CarouselContentClasses } from './ui';
+import { ContainerWithNavigationClasses } from './ui/ContainerWithNavigation';
+type CarouselClasses = {
+    root?: string;
+    header?: string;
+    heading?: string;
+    arrowsNavWrapper?: string;
+    arrowLeftClasses?: ArrowNavigationButtonClasses;
+    arrowRightClasses?: ArrowNavigationButtonClasses;
+    containerWithNavClasses?: ContainerWithNavigationClasses;
+    carouselContentClasses?: CarouselContentClasses;
+};
+export interface CarouselBaseProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    heading?: string;
+    carouselOptions?: EmblaOptionsType;
+    dotsOptions?: DotsOptions;
+    navArrowOptions?: NavArrowOptions;
+    autoPlayOptions?: AutoplayOptionsType;
+    setVisibleIndex: (index: number) => void;
+    visibleIndex: number;
+    classes?: CarouselClasses;
+}
+export declare const CarouselBase: ({ dotsOptions, navArrowOptions, carouselOptions, heading, autoPlayOptions, setVisibleIndex, visibleIndex, children, classes, ...props }: CarouselBaseProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/shared/ui/carousel/index.d.ts

@@ -0,0 +1,3 @@
+export * from './CarouselBase';
+export type * from './model/types';
+export type * from './ui';

package/dist/shared/ui/carousel/model/helpers.d.ts

@@ -0,0 +1,9 @@
+import { EmblaOptionsType } from 'embla-carousel';
+import { AutoplayOptionsType } from 'embla-carousel-autoplay';
+import { CarouselSlideVariant, DotsOptions, NavArrowOptions } from './types';
+import { DiscriminatedUnion } from '../../../types';
+export declare const defaultCarouselOptions: EmblaOptionsType;
+export declare const defaultDotsOptions: DotsOptions;
+export declare const defaultNavArrowOptions: NavArrowOptions;
+export declare const defaultAutoPlayOptions: AutoplayOptionsType;
+export declare const renderSlideVariant: (props: DiscriminatedUnion<"variant", CarouselSlideVariant>) => import("react/jsx-runtime").JSX.Element;

package/dist/shared/ui/carousel/model/hooks/index.d.ts

@@ -0,0 +1,3 @@
+export * from './useArrowNavigation';
+export * from './useDotsNavigation';
+export * from './useCarousel';

package/dist/shared/ui/carousel/model/hooks/useArrowNavigation.d.ts

@@ -0,0 +1,12 @@
+import { EmblaCarouselType } from 'embla-carousel';
+import { NavigationMode } from '../types';
+type UseArrowNavigationProps = {
+    emblaApi: EmblaCarouselType | undefined;
+    navigationHandler?: (emblaApi: EmblaCarouselType) => void;
+};
+export declare const useArrowNavigation: ({ emblaApi, navigationHandler }: UseArrowNavigationProps) => {
+    prevBtnDisabled: boolean;
+    nextBtnDisabled: boolean;
+    onClickNavigationButton: (mode: NavigationMode) => void;
+};
+export {};

package/dist/shared/ui/carousel/model/hooks/useCarousel.d.ts

@@ -0,0 +1,12 @@
+import { EmblaCarouselType, EmblaOptionsType } from 'embla-carousel';
+import { AutoplayOptionsType } from 'embla-carousel-autoplay';
+type UseCarouselProps = {
+    carouselOptions: EmblaOptionsType;
+    autoPlayOptions?: AutoplayOptionsType;
+};
+export declare const useCarousel: ({ carouselOptions, autoPlayOptions }: UseCarouselProps) => {
+    emblaRef: import('embla-carousel-react').EmblaViewportRefType;
+    emblaApi: EmblaCarouselType | undefined;
+    navigationHandler: (emblaApi: EmblaCarouselType) => void;
+};
+export {};

package/dist/shared/ui/carousel/model/hooks/useDotsNavigation.d.ts

@@ -0,0 +1,15 @@
+import { EmblaCarouselType } from 'embla-carousel';
+type UseDotsNavigationProps = {
+    emblaApi: EmblaCarouselType | undefined;
+    navigationHandler: (emblaApi: EmblaCarouselType) => void;
+    setVisibleIndex: (index: number) => void;
+};
+export type UseDotsNavigationReturn = {
+    scrollSnaps: number[];
+    onClickDot: (index: number) => void;
+};
+export declare const useDotsNavigation: ({ emblaApi, navigationHandler, setVisibleIndex }: UseDotsNavigationProps) => {
+    scrollSnaps: number[];
+    onClickDot: (index: number) => void;
+};
+export {};

package/dist/shared/ui/carousel/model/index.d.ts

@@ -0,0 +1,3 @@
+export type * from './types';
+export * from './hooks';
+export * from './helpers';

package/dist/shared/ui/carousel/model/types.d.ts

@@ -0,0 +1,27 @@
+import { CarouselSlideProps, SlideFullScreenProps, SlideOnlyImageProps, SlideProductCardProps } from '../ui';
+export type DotsOptions = {
+    position?: 'bot-left' | 'center' | 'bot-right';
+    deskVisible?: boolean;
+    mobVisible?: boolean;
+};
+export type NavArrowOptions = {
+    position?: 'center' | 'top-right';
+    deskVisible?: boolean;
+    mobVisible?: boolean;
+};
+export type NavigationMode = 'next' | 'prev';
+export type ImageProps = {
+    src: string;
+    alt: string;
+};
+interface SlideFullScreen extends SlideFullScreenProps, CarouselSlideProps {
+    variant: 'fullScreen';
+}
+interface SlideOnlyImage extends SlideOnlyImageProps, CarouselSlideProps {
+    variant: 'onlyImage';
+}
+interface SlideProductCard extends SlideProductCardProps, CarouselSlideProps {
+    variant: 'productCard';
+}
+export type CarouselSlideVariant = SlideFullScreen | SlideOnlyImage | SlideProductCard;
+export {};

package/dist/shared/ui/carousel/ui/ArrowNavigationButton.d.ts

@@ -0,0 +1,13 @@
+import { ComponentPropsWithRef } from 'react';
+import { NavigationMode } from '../model';
+export type ArrowNavigationButtonClasses = {
+    button?: string;
+    icon?: string;
+};
+interface ArrowNavigationButtonProps extends Omit<ComponentPropsWithRef<'button'>, 'onClick'> {
+    mode: NavigationMode;
+    onClick: (mode: NavigationMode) => void;
+    classes?: ArrowNavigationButtonClasses;
+}
+export declare const ArrowNavigationButton: ({ mode, onClick, children, classes, ...props }: ArrowNavigationButtonProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/shared/ui/carousel/ui/CarouselContent.d.ts

@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+import { DotsOptions, UseDotsNavigationReturn } from '../model';
+import { DotsNavigationsClasses } from './DotsNavigations';
+export type CarouselContentClasses = {
+    dotsClasses?: DotsNavigationsClasses;
+    slidesOverlay?: string;
+    slidesWrapper?: string;
+};
+export interface CarouselContentProps {
+    classes?: CarouselContentClasses;
+    children: ReactNode;
+    dotsProps: UseDotsNavigationReturn;
+    dotsOptions: DotsOptions;
+    visibleIndex: number;
+}
+export declare const CarouselContent: import('react').ForwardRefExoticComponent<CarouselContentProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/shared/ui/carousel/ui/CarouselSlide.d.ts

@@ -0,0 +1,10 @@
+import { CarouselSlideVariant } from '../model';
+import { DiscriminatedUnion } from '../../../types';
+export type CarouselSlideClasses = {
+    root?: string;
+    slide?: string;
+};
+export type CarouselSlideProps = {
+    classes?: CarouselSlideClasses;
+};
+export declare const CarouselSlide: ({ classes, ...props }: DiscriminatedUnion<"variant", CarouselSlideVariant>) => import("react/jsx-runtime").JSX.Element;

package/dist/shared/ui/carousel/ui/ContainerWithNavigation.d.ts

@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+import { NavigationMode } from '../model';
+import { ArrowNavigationButtonClasses } from './ArrowNavigationButton';
+export type ContainerWithNavigationClasses = {
+    wrapper?: string;
+    arrowLeftClasses?: ArrowNavigationButtonClasses;
+    arrowRightClasses?: ArrowNavigationButtonClasses;
+};
+export interface ContainerWithNavigationProps {
+    children: ReactNode;
+    prevBtnDisabled: boolean;
+    nextBtnDisabled: boolean;
+    onClickNavigationButton: (mode: NavigationMode) => void;
+    classes?: ContainerWithNavigationClasses;
+}
+export declare const ContainerWithNavigation: ({ children, prevBtnDisabled, nextBtnDisabled, onClickNavigationButton, classes }: ContainerWithNavigationProps) => import("react/jsx-runtime").JSX.Element;

package/dist/shared/ui/carousel/ui/DotsNavigations.d.ts

@@ -0,0 +1,13 @@
+import { DotsOptions } from '../model';
+export type DotsNavigationsClasses = {
+    dotsWrapper?: string;
+    dot?: string;
+};
+interface DotsNavigationsProps extends Pick<DotsOptions, 'position'> {
+    scrollSnaps: number[];
+    onClickDot: (index: number) => void;
+    visibleIndex: number;
+    classes?: DotsNavigationsClasses;
+}
+export declare const DotsNavigations: ({ scrollSnaps, visibleIndex, onClickDot, position, classes, ...props }: DotsNavigationsProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/shared/ui/carousel/ui/index.d.ts

@@ -0,0 +1,5 @@
+export * from './ArrowNavigationButton';
+export * from './CarouselSlide';
+export * from './DotsNavigations';
+export * from './slideVariants';
+export * from './CarouselContent';

package/dist/shared/ui/carousel/ui/slideVariants/SlideFullScreen.d.ts

@@ -0,0 +1,19 @@
+import { ImageProps } from '../../model';
+type SlideFullScreenClasses = {
+    root?: string;
+    wrapper?: string;
+    numeric?: string;
+    textWrapper?: string;
+    title?: string;
+    description?: string;
+    image?: string;
+};
+export interface SlideFullScreenProps {
+    slideIndex: number;
+    title?: string;
+    description?: string;
+    imgProps?: ImageProps;
+    slideClasses?: SlideFullScreenClasses;
+}
+export declare const SlideFullScreen: ({ slideIndex, title, imgProps, description, slideClasses }: SlideFullScreenProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/shared/ui/carousel/ui/slideVariants/SlideOnlyImage.d.ts

@@ -0,0 +1,11 @@
+import { ImageProps } from '../../model';
+type SlideOnlyImageClasses = {
+    root?: string;
+    image?: string;
+};
+export interface SlideOnlyImageProps {
+    imgProps?: ImageProps;
+    slideClasses?: SlideOnlyImageClasses;
+}
+export declare const SlideOnlyImage: ({ imgProps, slideClasses }: SlideOnlyImageProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/shared/ui/carousel/ui/slideVariants/SlideProductCard.d.ts

@@ -0,0 +1,20 @@
+import { ButtonProps } from '../../../button';
+import { ImageProps } from '../../model';
+type SlideProductCardClasses = {
+    root?: string;
+    wrapper?: string;
+    textWrapper?: string;
+    title?: string;
+    description?: string;
+    image?: string;
+    button?: string;
+};
+export interface SlideProductCardProps {
+    title?: string;
+    description?: string;
+    imgProps?: ImageProps;
+    buttonProps?: ButtonProps;
+    slideClasses?: SlideProductCardClasses;
+}
+export declare const SlideProductCard: ({ title, imgProps, description, buttonProps, slideClasses }: SlideProductCardProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/shared/ui/carousel/ui/slideVariants/index.d.ts

@@ -0,0 +1,3 @@
+export * from './SlideProductCard';
+export * from './SlideOnlyImage';
+export * from './SlideFullScreen';

package/dist/shared/ui/customLink/model/helpers.d.ts

@@ -2,7 +2,7 @@ export declare const customLinkConfig: (props?: ({
     intent?: "blue" | "white" | "dark" | null | undefined;
     withUnderline?: boolean | null | undefined;
     disabled?: boolean | null | undefined;
-    size?: "sm" | "md" | null | undefined;
+    size?: "md" | "sm" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export declare const linkArrowConfig: (props?: ({
     intent?: "blue" | "white" | "dark" | null | undefined;

package/dist/shared/ui/index.d.ts

@@ -16,6 +16,7 @@ export * from './modal';
 export * from './notification';
 export * from './table';
 export * from './pagination';
+export * from './carousel';
 export * from './providers';
 export * from './heading';
 export * from './icon';

package/dist/shared/ui/loader/model/helpers.d.ts

@@ -3,5 +3,5 @@ export declare const wrapperConfig: (props?: ({
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export declare const loaderConfig: (props?: ({
     intent?: "primary" | "secondary" | null | undefined;
-    size?: "sm" | "md" | "lg" | null | undefined;
+    size?: "md" | "sm" | "lg" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;