@aic-kits/react 0.14.5 → 0.15.1

package/dist/components/Art/ImageArt.d.ts

@@ -13,4 +13,4 @@ import { ImageArtProps } from './types';
  * @param {string} [props.'data-testid'] - Test ID for the container Box.
  * @returns {React.ReactElement} The rendered ImageArt component.
  */
-export declare const ImageArt: ({ art, width, height, style, "data-testid": testId, alt, fallback, useSkeleton, ...boxProps }: ImageArtProps) => React.ReactElement;
+export declare const ImageArt: ({ art, width, height, style, "data-testid": testId, alt, fallback, useSkeleton, objectFit, objectPosition, aspectRatio, mixBlendMode, imageRendering, ...boxProps }: ImageArtProps) => React.ReactElement;

package/dist/components/Art/types.d.ts

@@ -91,6 +91,26 @@ export interface ImageArtProps extends BaseArtProps, WidthHeightProps {
      * Fallback text or React node
      */
     fallback?: string | React.ReactNode;
+    /**
+     * Fit the image to the container
+     */
+    objectFit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
+    /**
+     * The object position
+     */
+    objectPosition?: 'center' | 'top' | 'bottom' | 'left' | 'right';
+    /**
+     * The aspect ratio
+     */
+    aspectRatio?: number;
+    /**
+     * The mix blend mode
+     */
+    mixBlendMode?: 'normal' | 'multiply' | 'screen' | 'overlay' | 'darken' | 'lighten' | 'color-dodge' | 'color-burn' | 'hard-light' | 'soft-light' | 'difference' | 'exclusion' | 'hue' | 'saturation' | 'color' | 'luminosity';
+    /**
+     * The image rendering
+     */
+    imageRendering?: 'auto' | 'pixelated' | 'crisp-edges' | 'smooth';
 }
 export interface BrandArtProps extends BaseArtProps, WidthHeightProps {
     /**

package/dist/components/Box/StyledBox.d.ts

@@ -2,59 +2,11 @@ import { Theme } from '../../theme';
 import { ConfigType } from './config';
 import { CustomBoxProps, CSSStyleProps, StyleProps } from './types';
 export declare const getThemeValue: (theme: Theme, key: keyof StyleProps, props: StyleProps) => {
-    [x: string]: string;
+    [x: string]: import('../..').WithResponsiveValue<string>;
 } | {
-    [x: string]: number;
+    [x: string]: import('../..').WithResponsiveValue<number>;
 } | undefined;
 export declare const mapStylePropToThemeValue: (theme: Theme, props: StyleProps) => {};
 export declare const configKeys: Array<keyof ConfigType>;
-export declare const genBoxStyle: (theme: Theme, props: StyleProps & CSSStyleProps & CustomBoxProps) => {
-    opacity?: import("csstype").Property.Opacity | undefined;
-    width?: import("csstype").Property.Width<string | number> | undefined;
-    height?: import("csstype").Property.Height<string | number> | undefined;
-    minWidth?: import("csstype").Property.MinWidth<string | number> | undefined;
-    maxWidth?: import("csstype").Property.MaxWidth<string | number> | undefined;
-    minHeight?: import("csstype").Property.MinHeight<string | number> | undefined;
-    maxHeight?: import("csstype").Property.MaxHeight<string | number> | undefined;
-    display?: import("csstype").Property.Display | undefined;
-    alignItems?: import("csstype").Property.AlignItems | undefined;
-    alignContent?: import("csstype").Property.AlignContent | undefined;
-    justifyContent?: import("csstype").Property.JustifyContent | undefined;
-    flexWrap?: import("csstype").Property.FlexWrap | undefined;
-    flexDirection?: import("csstype").Property.FlexDirection | undefined;
-    flex?: import("csstype").Property.Flex<string | number> | undefined;
-    flexGrow?: import("csstype").Property.FlexGrow | undefined;
-    flexShrink?: import("csstype").Property.FlexShrink | undefined;
-    flexBasis?: import("csstype").Property.FlexBasis<string | number> | undefined;
-    alignSelf?: import("csstype").Property.AlignSelf | undefined;
-    position?: import("csstype").Property.Position | undefined;
-    top?: import("csstype").Property.Top<string | number> | undefined;
-    right?: import("csstype").Property.Right<string | number> | undefined;
-    bottom?: import("csstype").Property.Bottom<string | number> | undefined;
-    left?: import("csstype").Property.Left<string | number> | undefined;
-    overflow?: import("csstype").Property.Overflow | undefined;
-    cursor?: import("csstype").Property.Cursor | undefined;
-    transition?: import("csstype").Property.Transition<string & {}> | undefined;
-    transform?: import("csstype").Property.Transform | undefined;
-    animation?: import("csstype").Property.Animation<string & {}> | undefined;
-    willChange?: import("csstype").Property.WillChange | undefined;
-    pointerEvents?: import("csstype").Property.PointerEvents | undefined;
-    userSelect?: import("csstype").Property.UserSelect | undefined;
-    resize?: import("csstype").Property.Resize | undefined;
-    boxShadow?: import("csstype").Property.BoxShadow | undefined;
-    textShadow?: import("csstype").Property.TextShadow | undefined;
-    filter?: import("csstype").Property.Filter | undefined;
-    backdropFilter?: import("csstype").Property.BackdropFilter | undefined;
-    mixBlendMode?: import("csstype").Property.MixBlendMode | undefined;
-    isolation?: import("csstype").Property.Isolation | undefined;
-    zIndex?: import("csstype").Property.ZIndex | undefined;
-    marginInline?: import("csstype").Property.MarginInline<string | number> | undefined;
-    marginBlock?: import("csstype").Property.MarginBlock<string | number> | undefined;
-    paddingInline?: import("csstype").Property.PaddingInline<string | number> | undefined;
-    paddingBlock?: import("csstype").Property.PaddingBlock<string | number> | undefined;
-    whiteSpace?: import("csstype").Property.WhiteSpace | undefined;
-    textOverflow?: import("csstype").Property.TextOverflow | undefined;
-    overflowY?: import("csstype").Property.OverflowY | undefined;
-    overflowX?: import("csstype").Property.OverflowX | undefined;
-};
-export declare const StyledBox: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyleProps & CSSStyleProps & CustomBoxProps>> & string;
+export declare const genBoxStyle: (theme: Theme, props: StyleProps & CSSStyleProps & CustomBoxProps) => import('styled-components').RuleSet<object>;
+export declare const StyledBox: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyleProps & import('../..').WithResponsive<Pick<import('react').CSSProperties, "opacity" | "width" | "height" | "minWidth" | "maxWidth" | "minHeight" | "maxHeight" | "display" | "alignItems" | "alignContent" | "justifyContent" | "flexWrap" | "flexDirection" | "flex" | "flexGrow" | "flexShrink" | "flexBasis" | "alignSelf" | "position" | "top" | "right" | "bottom" | "left" | "overflow" | "cursor" | "transition" | "transform" | "animation" | "willChange" | "pointerEvents" | "userSelect" | "resize" | "boxShadow" | "textShadow" | "filter" | "backdropFilter" | "mixBlendMode" | "isolation" | "zIndex" | "marginInline" | "marginBlock" | "paddingInline" | "paddingBlock" | "whiteSpace" | "textOverflow" | "overflowY" | "overflowX">> & CustomBoxProps>> & string;

package/dist/components/Box/types.d.ts

@@ -1,5 +1,6 @@
 import { CSSProperties, HTMLAttributes } from 'react';
 import { BorderWidth, Color, Radius, Space } from '../../theme';
+import { WithResponsive, WithResponsiveValue } from '../../utils';
 import { ConfigType, CSSPropsKeyType } from './config';
 export interface ThemeScale {
     colors: Color;
@@ -9,10 +10,10 @@ export interface ThemeScale {
 }
 type ConfigKeyType = keyof ConfigType;
 export type StyleProps = {
-    [key in ConfigKeyType]?: ThemeScale[ConfigType[key]['scale']];
+    [key in ConfigKeyType]?: WithResponsiveValue<ThemeScale[ConfigType[key]['scale']]>;
 };
-export type CSSStyleProps = Pick<CSSProperties, CSSPropsKeyType>;
-export interface CustomBoxProps {
+export type CSSStyleProps = WithResponsive<Pick<CSSProperties, CSSPropsKeyType>>;
+export interface CustomBoxProps extends WithResponsive<{
     /**
      * If true, the box will take the full width and height of its parent.
      * It is equivalent to setting `position: 'absolute'`, `top: 0`, `bottom: 0`, `left: 0`, `right: 0`.
@@ -34,6 +35,7 @@ export interface CustomBoxProps {
      * If true, the box will take the full height of its parent.
      */
     fh?: boolean;
+}> {
 }
 export interface BoxHTMLProps extends HTMLAttributes<HTMLDivElement> {
     /**

package/dist/components/Button/StyledButton.d.ts

@@ -1,11 +1,10 @@
-import { BorderWidth, Color, FontSize, Space, Size, FontWeight } from '../../theme/common';
-import { ButtonSize } from '../../theme/components/button';
+import { BorderWidth, Color, FontSize, Space, Size, FontWeight, Radius, ButtonSize, ButtonVariant } from '../../theme';
 type ButtonContainerProps = {
     $backgroundColor: Color | 'disabled';
-    $borderRadius: string;
+    $borderRadius: Radius;
     $borderWidth: BorderWidth;
     $disabled?: boolean;
-    $variant: 'solid' | 'outlined' | 'text';
+    $variant: ButtonVariant;
     $color: Color;
     $paddingHorizontal: Space;
     $paddingVertical: Space;

package/dist/components/Button/types.d.ts

@@ -1,5 +1,5 @@
 import { Icon } from '@phosphor-icons/react';
-import { Color } from '../../theme';
+import { ButtonCorner, ButtonSize, ButtonVariant, Color } from '../../theme';
 export interface ButtonProps {
     /**
      * Disable state of button.
@@ -36,17 +36,17 @@ export interface ButtonProps {
     /**
      * Corner style of button.
      */
-    corner?: 'circle' | 'rounded' | 'square';
+    corner?: ButtonCorner;
     /**
      * Button style variant.
      * @default 'solid'
      */
-    variant?: 'solid' | 'outlined' | 'text';
+    variant?: ButtonVariant;
     /**
      * Button size.
      * @default 'md'
      */
-    size?: 'sm' | 'md' | 'lg';
+    size?: ButtonSize;
     /**
      * Additional style.
      */

package/dist/components/Pagination/Pagination.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+import { PaginationProps } from './types';
+export declare const Pagination: React.FC<PaginationProps>;

package/dist/components/Pagination/PaginationItem.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+import { PaginationItemProps } from './types';
+export declare const PaginationItem: React.FC<PaginationItemProps>;

package/dist/components/Pagination/hooks.d.ts

@@ -0,0 +1,19 @@
+import { PaginationItemType } from './types';
+interface UsePaginationParams {
+    count: number;
+    page: number;
+    boundaryCount?: number;
+    siblingCount?: number;
+    showFirstButton?: boolean;
+    showLastButton?: boolean;
+    showPrevNextButtons?: boolean;
+}
+export declare const usePagination: ({ count, page, boundaryCount, siblingCount, showFirstButton, showLastButton, showPrevNextButtons, }: UsePaginationParams) => {
+    items: {
+        type: PaginationItemType;
+        page: number | undefined;
+        selected: boolean;
+        disabled: boolean;
+    }[];
+};
+export {};

package/dist/components/Pagination/index.d.ts

@@ -0,0 +1,2 @@
+export * from './PaginationItem';
+export * from './Pagination';

package/dist/components/Pagination/types.d.ts

@@ -0,0 +1,113 @@
+import { Color } from '../../theme';
+export type PaginationItemType = 'page' | 'previous' | 'next' | 'first' | 'last' | 'start-ellipsis' | 'end-ellipsis';
+export interface PaginationItemProps {
+    /**
+     * The type of pagination item.
+     */
+    type?: PaginationItemType;
+    /**
+     * The page number.
+     */
+    page?: number;
+    /**
+     * The current page number.
+     */
+    currentPage: number;
+    /**
+     * If true, the item is selected.
+     * @default false
+     */
+    selected?: boolean;
+    /**
+     * If true, the item is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Callback fired when the item is clicked.
+     * Should handle its own disabled check if necessary for the clickable element.
+     */
+    onClick?: (page: number | null, event: React.MouseEvent<HTMLDivElement>) => void;
+    /**
+     * The shape of the pagination item.
+     * @default 'circular'
+     */
+    shape?: 'circular' | 'rounded';
+    /**
+     * The size of the pagination item.
+     * @default 'medium'
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * The color of the pagination item.
+     * @default 'primary'
+     */
+    color?: Color;
+    /**
+     * The total number of pages.
+     */
+    count: number;
+}
+export interface PaginationProps {
+    /**
+     * The total number of pages.
+     * @default 1
+     */
+    count?: number;
+    /**
+     * The current page number (1-indexed).
+     * @default 1
+     */
+    page?: number;
+    /**
+     * Callback fired when the page is changed.
+     * @param event The event source of the callback.
+     * @param page The page selected.
+     */
+    onChange?: (page: number, event: React.MouseEvent<HTMLDivElement>) => void;
+    /**
+     * Number of pages at the beginning and end of the page navigation.
+     * @default 1
+     */
+    boundaryCount?: number;
+    /**
+     * Number of pages to show on each side of the current page.
+     * @default 1
+     */
+    siblingCount?: number;
+    /**
+    * If `true`, show the first-page button.
+    * @default false
+    */
+    showFirstButton?: boolean;
+    /**
+     * If `true`, show the last-page button.
+     * @default false
+     */
+    showLastButton?: boolean;
+    /**
+     * If `true`, show the previous and next buttons.
+     * @default true
+     */
+    showPrevNextButtons?: boolean;
+    /**
+     * The shape of the pagination items.
+     * @default 'circular'
+     */
+    shape?: 'circular' | 'rounded';
+    /**
+     * The size of the pagination items.
+     * @default 'medium'
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * The color of the pagination items.
+     * @default 'primary'
+     */
+    color?: Color;
+    /**
+     * If `true`, the pagination items will be disabled.
+     * @default false
+     */
+    disabled?: boolean;
+}

package/dist/components/Progress/Progress.d.ts

@@ -0,0 +1,31 @@
+import { default as React } from 'react';
+import { Color } from '../../theme/common';
+import { ProgressSize as ThemeProgressSize, ProgressVariant as ThemeProgressVariant } from '../../theme/components/progress';
+import { BoxProps } from '../Box';
+export interface ProgressProps extends Omit<BoxProps, 'size'> {
+    /**
+     * The current value of the progress bar.
+     * If undefined, the progress bar will be in an indeterminate state.
+     * Value should be between 0 and 100.
+     */
+    value?: number;
+    /**
+     * The color of the progress indicator. Refers to a theme color key.
+     */
+    color?: Color;
+    /**
+     * The size (thickness) of the progress bar.
+     * @default 'md'
+     */
+    size?: ThemeProgressSize;
+    /**
+     * The visual variant of the progress bar.
+     * @default 'soft'
+     */
+    variant?: ThemeProgressVariant;
+    /**
+     * Test ID for automation.
+     */
+    testID?: string;
+}
+export declare const Progress: React.FC<ProgressProps>;

package/dist/components/Progress/StyledProgress.d.ts

@@ -0,0 +1,29 @@
+import { Color, Size, Radius, BorderWidth } from '../../theme/common';
+interface StyledProgressContainerProps {
+    $heightKey: Size;
+    $borderRadiusKey: Radius;
+    $backgroundColorKey: Color | string;
+    $borderColorKey?: Color | string;
+    $borderWidthKey?: BorderWidth;
+}
+interface StyledProgressIndicatorProps {
+    $progressColorKey: Color;
+    $progressValue?: number;
+    $borderRadiusKey: Radius;
+}
+export declare const StyledProgressContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('..').BoxProps & {
+    ref?: import('react').ForwardedRef<HTMLDivElement>;
+}, StyledProgressContainerProps>> & string & Omit<(props: import('..').BoxProps & {
+    ref?: import('react').ForwardedRef<HTMLDivElement>;
+}) => ReturnType<({ children, style, "data-testid": testId, ...otherProps }: import('..').BoxProps, ref: import('react').ForwardedRef<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element>, keyof import('react').Component<any, {}, any>>;
+export declare const StyledProgressBar: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('..').BoxProps & {
+    ref?: import('react').ForwardedRef<HTMLDivElement>;
+}, never>> & string & Omit<(props: import('..').BoxProps & {
+    ref?: import('react').ForwardedRef<HTMLDivElement>;
+}) => ReturnType<({ children, style, "data-testid": testId, ...otherProps }: import('..').BoxProps, ref: import('react').ForwardedRef<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element>, keyof import('react').Component<any, {}, any>>;
+export declare const StyledProgressIndicator: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('..').BoxProps & {
+    ref?: import('react').ForwardedRef<HTMLDivElement>;
+}, StyledProgressIndicatorProps>> & string & Omit<(props: import('..').BoxProps & {
+    ref?: import('react').ForwardedRef<HTMLDivElement>;
+}) => ReturnType<({ children, style, "data-testid": testId, ...otherProps }: import('..').BoxProps, ref: import('react').ForwardedRef<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element>, keyof import('react').Component<any, {}, any>>;
+export {};

package/dist/components/Progress/index.d.ts

@@ -0,0 +1 @@
+export * from './Progress';

package/dist/components/Text/StyledText.d.ts

@@ -1,12 +1,13 @@
 import { Color, FontSize, FontWeight, Typeface } from '../../theme';
+import { WithResponsiveValue } from '../../utils';
 interface StyledTextProps {
-    $themeFontSize: FontSize;
-    $themeFontWeight: FontWeight;
-    $themeColor: Color;
-    $themeTypeface: Typeface;
-    $textAlign?: 'left' | 'right' | 'center' | 'justify';
-    $textTransform?: 'none' | 'capitalize' | 'uppercase' | 'lowercase';
-    $textDecoration?: 'none' | 'underline' | 'line-through' | 'underline line-through';
+    $themeFontSize: WithResponsiveValue<FontSize>;
+    $themeFontWeight: WithResponsiveValue<FontWeight>;
+    $themeColor: WithResponsiveValue<Color>;
+    $themeTypeface: WithResponsiveValue<Typeface>;
+    $textAlign?: WithResponsiveValue<'left' | 'right' | 'center' | 'justify'>;
+    $textTransform?: WithResponsiveValue<'none' | 'capitalize' | 'uppercase' | 'lowercase'>;
+    $textDecoration?: WithResponsiveValue<'none' | 'underline' | 'line-through' | 'underline line-through'>;
 }
 declare const StyledText: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('styled-components/dist/types').Substitute<import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>>, {
     as?: "p" | "span";

package/dist/components/Text/types.d.ts

@@ -1,6 +1,7 @@
 import { HTMLAttributes, ReactNode } from 'react';
 import { Color, FontSize, FontWeight, Typeface } from '../../theme';
-export interface TextProps extends HTMLAttributes<HTMLParagraphElement> {
+import { WithResponsiveValue } from '../../utils';
+export interface TextProps extends Omit<HTMLAttributes<HTMLParagraphElement>, 'color'> {
     /**
      * Text content.
      */
@@ -8,27 +9,27 @@ export interface TextProps extends HTMLAttributes<HTMLParagraphElement> {
     /**
      * Size of the text.
      */
-    fontSize?: FontSize;
+    fontSize?: WithResponsiveValue<FontSize>;
     /**
      * Font weight of the text.
      */
-    fontWeight?: FontWeight;
+    fontWeight?: WithResponsiveValue<FontWeight>;
     /**
      * Visual color to apply to the text.
      */
-    color?: Color;
+    color?: WithResponsiveValue<Color>;
     /**
      * Specifies the alignment of the text.
      */
-    textAlign?: 'left' | 'right' | 'center' | 'justify';
+    textAlign?: WithResponsiveValue<'left' | 'right' | 'center' | 'justify'>;
     /**
      * Transform the text.
      */
-    textTransform?: 'none' | 'capitalize' | 'uppercase' | 'lowercase';
+    textTransform?: WithResponsiveValue<'none' | 'capitalize' | 'uppercase' | 'lowercase'>;
     /**
      * Specifies the decoration of the text.
      */
-    textDecoration?: 'none' | 'underline' | 'line-through' | 'underline line-through';
+    textDecoration?: WithResponsiveValue<'none' | 'underline' | 'line-through' | 'underline line-through'>;
     /**
      * Testing id of the component.
      */
@@ -37,7 +38,7 @@ export interface TextProps extends HTMLAttributes<HTMLParagraphElement> {
      * The typeface to render the text in:
      * - `neutral`: The default typeface for the platform.
      */
-    typeface?: Typeface;
+    typeface?: WithResponsiveValue<Typeface>;
     /**
      * Whether to render the text with rich text formatting.
      */

package/dist/components/index.d.ts

@@ -17,3 +17,5 @@ export * from './Tag';
 export * from './Checkbox';
 export * from './Select';
 export * from './Grid';
+export * from './Pagination';
+export * from './Progress';

package/dist/hooks/index.d.ts

@@ -1,2 +1,3 @@
 export * from './useMediaQuery';
 export * from './usePrevious';
+export * from './useResponsiveBreakpoint';

package/dist/hooks/useResponsiveBreakpoint.d.ts

@@ -0,0 +1,8 @@
+import { ResponsiveKey } from '../utils';
+/**
+ * Hook that returns the current responsive breakpoint key.
+ * It directly manages MediaQueryList objects for efficiency.
+ * Breakpoints are checked from largest (xl) to smallest (sm), defaulting to 'xs'.
+ * @returns The current ResponsiveKey ('xs', 'sm', 'md', 'lg', or 'xl').
+ */
+export declare const useResponsiveBreakpoint: (defaultBreakpoint?: ResponsiveKey) => ResponsiveKey;