@aic-kits/react 0.4.4 → 0.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Box/StyledBox.d.ts +18 -3
- package/dist/components/Box/config.d.ts +3 -3
- package/dist/components/Box/types.d.ts +8 -3
- package/dist/components/Carousel/AutoScrollCarouselItem.d.ts +9 -0
- package/dist/components/Carousel/CarouselItem.d.ts +10 -0
- package/dist/components/Carousel/CarouselItems.d.ts +11 -0
- package/dist/components/Carousel/CarouselNavigation.d.ts +7 -0
- package/dist/components/Carousel/CarouselPagination.d.ts +7 -0
- package/dist/components/Carousel/index.d.ts +2 -0
- package/dist/components/Carousel/types.d.ts +62 -0
- package/dist/components/index.d.ts +1 -0
- package/dist/index.cjs +64 -56
- package/dist/index.js +3859 -3410
- package/dist/theme/components/carousel.d.ts +32 -0
- package/dist/theme/components/index.d.ts +3 -0
- package/dist/theme/styled.d.ts +3 -0
- package/package.json +3 -2
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { Theme } from '../../theme';
|
|
2
2
|
import { ConfigType } from './config';
|
|
3
|
-
import { CustomBoxProps,
|
|
3
|
+
import { CustomBoxProps, CSSStyleProps, StyleProps } from './types';
|
|
4
4
|
export declare const getThemeValue: (theme: Theme, key: keyof StyleProps, props: StyleProps) => {
|
|
5
5
|
[x: string]: string;
|
|
6
6
|
} | {
|
|
@@ -8,7 +8,7 @@ export declare const getThemeValue: (theme: Theme, key: keyof StyleProps, props:
|
|
|
8
8
|
} | undefined;
|
|
9
9
|
export declare const mapStylePropToThemeValue: (theme: Theme, props: StyleProps) => {};
|
|
10
10
|
export declare const configKeys: Array<keyof ConfigType>;
|
|
11
|
-
export declare const genBoxStyle: (theme: Theme, props: StyleProps &
|
|
11
|
+
export declare const genBoxStyle: (theme: Theme, props: StyleProps & CSSStyleProps & CustomBoxProps) => {
|
|
12
12
|
opacity?: import("csstype").Property.Opacity | undefined;
|
|
13
13
|
width?: import("csstype").Property.Width<string | number> | undefined;
|
|
14
14
|
height?: import("csstype").Property.Height<string | number> | undefined;
|
|
@@ -33,5 +33,20 @@ export declare const genBoxStyle: (theme: Theme, props: StyleProps & FlexStylePr
|
|
|
33
33
|
bottom?: import("csstype").Property.Bottom<string | number> | undefined;
|
|
34
34
|
left?: import("csstype").Property.Left<string | number> | undefined;
|
|
35
35
|
overflow?: import("csstype").Property.Overflow | undefined;
|
|
36
|
+
cursor?: import("csstype").Property.Cursor | undefined;
|
|
37
|
+
transition?: import("csstype").Property.Transition<string & {}> | undefined;
|
|
38
|
+
transform?: import("csstype").Property.Transform | undefined;
|
|
39
|
+
animation?: import("csstype").Property.Animation<string & {}> | undefined;
|
|
40
|
+
willChange?: import("csstype").Property.WillChange | undefined;
|
|
41
|
+
pointerEvents?: import("csstype").Property.PointerEvents | undefined;
|
|
42
|
+
userSelect?: import("csstype").Property.UserSelect | undefined;
|
|
43
|
+
resize?: import("csstype").Property.Resize | undefined;
|
|
44
|
+
boxShadow?: import("csstype").Property.BoxShadow | undefined;
|
|
45
|
+
textShadow?: import("csstype").Property.TextShadow | undefined;
|
|
46
|
+
filter?: import("csstype").Property.Filter | undefined;
|
|
47
|
+
backdropFilter?: import("csstype").Property.BackdropFilter | undefined;
|
|
48
|
+
mixBlendMode?: import("csstype").Property.MixBlendMode | undefined;
|
|
49
|
+
isolation?: import("csstype").Property.Isolation | undefined;
|
|
50
|
+
zIndex?: import("csstype").Property.ZIndex | undefined;
|
|
36
51
|
};
|
|
37
|
-
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 &
|
|
52
|
+
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;
|
|
@@ -465,14 +465,14 @@ declare const config: {
|
|
|
465
465
|
readonly scale: "colors";
|
|
466
466
|
};
|
|
467
467
|
};
|
|
468
|
-
export declare const
|
|
469
|
-
export declare const customBoxPropsKey: readonly ["fullWidth", "fullHeight", "fw", "fh"];
|
|
468
|
+
export declare const cssPropsKey: readonly ["alignContent", "alignItems", "alignSelf", "display", "flex", "flexBasis", "flexDirection", "flexGrow", "flexShrink", "flexWrap", "justifyContent", "position", "top", "right", "bottom", "left", "overflow", "width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight", "opacity", "cursor", "transition", "transform", "animation", "willChange", "pointerEvents", "userSelect", "resize", "boxShadow", "textShadow", "filter", "backdropFilter", "mixBlendMode", "isolation", "zIndex"];
|
|
469
|
+
export declare const customBoxPropsKey: readonly ["absoluteFill", "fullWidth", "fullHeight", "fw", "fh"];
|
|
470
470
|
export type ColorPropsKeyType = keyof typeof colors;
|
|
471
471
|
export type SpacePropsKeyType = keyof typeof spaces;
|
|
472
472
|
export type RadiiPropsKeyType = keyof typeof radii;
|
|
473
473
|
export type BorderWidthsPropsKeyType = keyof typeof borderWidths;
|
|
474
474
|
export type ConfigType = typeof config;
|
|
475
|
-
export type
|
|
475
|
+
export type CSSPropsKeyType = (typeof cssPropsKey)[number];
|
|
476
476
|
export type CustomBoxPropsKeyType = (typeof customBoxPropsKey)[number];
|
|
477
477
|
export declare const customBoxPropsConfig: Record<CustomBoxPropsKeyType, CSSProperties>;
|
|
478
478
|
export default config;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { CSSProperties, HTMLAttributes } from 'react';
|
|
2
2
|
import { BorderWidth, Color, Radius, Space } from '../../theme';
|
|
3
|
-
import { ConfigType,
|
|
3
|
+
import { ConfigType, CSSPropsKeyType } from './config';
|
|
4
4
|
export interface ThemeScale {
|
|
5
5
|
colors: Color;
|
|
6
6
|
spaces: Space;
|
|
@@ -11,8 +11,13 @@ type ConfigKeyType = keyof ConfigType;
|
|
|
11
11
|
export type StyleProps = {
|
|
12
12
|
[key in ConfigKeyType]?: ThemeScale[ConfigType[key]['scale']];
|
|
13
13
|
};
|
|
14
|
-
export type
|
|
14
|
+
export type CSSStyleProps = Pick<CSSProperties, CSSPropsKeyType>;
|
|
15
15
|
export interface CustomBoxProps {
|
|
16
|
+
/**
|
|
17
|
+
* If true, the box will take the full width and height of its parent.
|
|
18
|
+
* It is equivalent to setting `position: 'absolute'`, `top: 0`, `bottom: 0`, `left: 0`, `right: 0`.
|
|
19
|
+
*/
|
|
20
|
+
absoluteFill?: boolean;
|
|
16
21
|
/**
|
|
17
22
|
* If true, the box will take the full width of its parent.
|
|
18
23
|
*/
|
|
@@ -44,6 +49,6 @@ export interface BoxHTMLProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
44
49
|
*/
|
|
45
50
|
'data-testid'?: string;
|
|
46
51
|
}
|
|
47
|
-
export interface BoxProps extends StyleProps,
|
|
52
|
+
export interface BoxProps extends StyleProps, CSSStyleProps, CustomBoxProps, BoxHTMLProps {
|
|
48
53
|
}
|
|
49
54
|
export {};
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { CarouselRenderItemInfo } from './types';
|
|
3
|
+
interface AutoScrollCarouselItemProps<T> {
|
|
4
|
+
item: T;
|
|
5
|
+
index: number;
|
|
6
|
+
renderItem: (info: CarouselRenderItemInfo<T>) => React.ReactNode;
|
|
7
|
+
}
|
|
8
|
+
export declare function AutoScrollCarouselItem<T>({ item, index, renderItem, }: AutoScrollCarouselItemProps<T>): import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
export {};
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { CarouselRenderItemInfo } from './types';
|
|
3
|
+
interface CarouselItemProps<T> {
|
|
4
|
+
item: T;
|
|
5
|
+
index: number;
|
|
6
|
+
isFocused: boolean;
|
|
7
|
+
renderItem: (info: CarouselRenderItemInfo<T>) => React.ReactNode;
|
|
8
|
+
}
|
|
9
|
+
export declare function CarouselItem<T>({ item, index, isFocused, renderItem, }: CarouselItemProps<T>): import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
export {};
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { Space } from '../../theme';
|
|
2
|
+
import { CarouselProps } from './types';
|
|
3
|
+
export declare const scrollAnimation: import('styled-components/dist/models/Keyframes').default;
|
|
4
|
+
interface CarouselItemsProps<T> extends Pick<CarouselProps<T>, 'autoScroll' | 'itemSpacing' | 'items' | 'renderItem' | 'keyExtractor'> {
|
|
5
|
+
isScrolling: boolean;
|
|
6
|
+
itemSpacing: Space | undefined;
|
|
7
|
+
itemsWrapperRef: React.RefObject<HTMLDivElement | null>;
|
|
8
|
+
activeIndex: number;
|
|
9
|
+
}
|
|
10
|
+
export declare function CarouselItems<T>({ isScrolling, itemSpacing, itemsWrapperRef, items, renderItem, keyExtractor, autoScroll, activeIndex, }: CarouselItemsProps<T>): import("react/jsx-runtime").JSX.Element;
|
|
11
|
+
export {};
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
interface CarouselPaginationProps {
|
|
2
|
+
itemsCount: number;
|
|
3
|
+
activeIndex: number;
|
|
4
|
+
onDotClick: (index: number) => void;
|
|
5
|
+
}
|
|
6
|
+
export declare function CarouselPagination({ itemsCount, activeIndex, onDotClick, }: CarouselPaginationProps): import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
export {};
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import { CarouselProps } from './types';
|
|
2
|
+
export declare function Carousel<T>({ items, renderItem, showPagination, showNavigation, autoPlay, autoScroll, initialIndex, onIndexChange, keyExtractor, itemSpacing, ...rest }: CarouselProps<T>): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { Space } from '../../theme';
|
|
3
|
+
import { BoxProps } from '../Box';
|
|
4
|
+
export interface CarouselRenderItemInfo<T> {
|
|
5
|
+
item: T;
|
|
6
|
+
index: number;
|
|
7
|
+
isFocused: boolean;
|
|
8
|
+
}
|
|
9
|
+
export type CarouselRenderItem<T> = (info: CarouselRenderItemInfo<T>) => React.ReactNode;
|
|
10
|
+
export interface CarouselProps<T = any> extends BoxProps {
|
|
11
|
+
/**
|
|
12
|
+
* Array of data items for the carousel.
|
|
13
|
+
*/
|
|
14
|
+
items: T[];
|
|
15
|
+
/**
|
|
16
|
+
* Function to render each item. Receives item data, index, and focus state.
|
|
17
|
+
*/
|
|
18
|
+
renderItem: CarouselRenderItem<T>;
|
|
19
|
+
/**
|
|
20
|
+
* If true, displays pagination dots at the bottom.
|
|
21
|
+
* @default true
|
|
22
|
+
*/
|
|
23
|
+
showPagination?: boolean;
|
|
24
|
+
/**
|
|
25
|
+
* If true, displays previous/next navigation buttons.
|
|
26
|
+
* @default true
|
|
27
|
+
*/
|
|
28
|
+
showNavigation?: boolean;
|
|
29
|
+
/**
|
|
30
|
+
* Configures automatic advancement to the next item.
|
|
31
|
+
* Set to `true` for default delay or provide an object `{ delay: number }` for custom delay (in ms).
|
|
32
|
+
* @default false
|
|
33
|
+
*/
|
|
34
|
+
autoPlay?: boolean | {
|
|
35
|
+
delay: number;
|
|
36
|
+
};
|
|
37
|
+
/**
|
|
38
|
+
* If true, enables continuous horizontal scrolling (e.g., for logo strips).
|
|
39
|
+
* This overrides `autoPlay`, `showNavigation`, and `showPagination`.
|
|
40
|
+
* @default false
|
|
41
|
+
*/
|
|
42
|
+
autoScroll?: boolean | {
|
|
43
|
+
speed?: number;
|
|
44
|
+
};
|
|
45
|
+
/**
|
|
46
|
+
* Initial active index.
|
|
47
|
+
* @default 0
|
|
48
|
+
*/
|
|
49
|
+
initialIndex?: number;
|
|
50
|
+
/**
|
|
51
|
+
* Callback fired when the active index changes.
|
|
52
|
+
*/
|
|
53
|
+
onIndexChange?: (index: number) => void;
|
|
54
|
+
/**
|
|
55
|
+
* Optional key extractor function.
|
|
56
|
+
*/
|
|
57
|
+
keyExtractor?: (item: T, index: number) => string;
|
|
58
|
+
/**
|
|
59
|
+
* Optional item spacing.
|
|
60
|
+
*/
|
|
61
|
+
itemSpacing?: Space;
|
|
62
|
+
}
|