@aic-kits/react 0.0.21 → 0.1.2

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

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+import { BrandArtProps } from './types';
+export declare const BrandArt: ({ art, width, height, style, "data-testid": testId, ...rest }: BrandArtProps) => React.ReactElement;

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

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+import { EmojiArtProps } from './types';
+export declare const EmojiArt: ({ art, width, height, style, "data-testid": testId, ...rest }: EmojiArtProps) => React.ReactElement;

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

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+import { IconArtProps } from './types';
+export declare const IconArt: ({ art, width, height, color, style, "data-testid": testId, ...rest }: IconArtProps) => React.ReactElement;

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

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+import { ImageArtProps } from './types';
+export declare const ImageArt: ({ art, width, height, style, "data-testid": testId, ...rest }: ImageArtProps) => React.ReactElement;

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

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+import { SvgArtProps } from './types';
+export declare const SvgArt: ({ art, width, height, style, "data-testid": testId, ...rest }: SvgArtProps) => React.ReactElement;

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

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+import { BrandArt as Brand } from './BrandArt';
+import { EmojiArt as Emoji } from './EmojiArt';
+import { IconArt as Icon } from './IconArt';
+import { ImageArt as Image } from './ImageArt';
+import { SvgArt as Svg } from './SvgArt';
+import { ArtProps } from './types';
+export declare const Art: (props: ArtProps) => React.ReactElement;
+export * from './types';
+export * from './utils';
+export { Image, Svg, Emoji, Icon, Brand };

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

@@ -0,0 +1,75 @@
+import { default as React } from 'react';
+import { BoxProps } from '../Box';
+export interface BaseArtProps extends BoxProps {
+    /**
+     * Width of the art
+     */
+    width?: string | number;
+    /**
+     * Height of the art
+     */
+    height?: string | number;
+    /**
+     * Testing id of the component
+     */
+    'data-testid'?: string;
+    /**
+     * Additional styles
+     */
+    style?: React.CSSProperties;
+}
+export interface IconArtProps extends BaseArtProps {
+    /**
+     * Type of the art
+     */
+    type?: 'icon';
+    /**
+     * Icon name
+     */
+    art: string;
+    /**
+     * Color of the icon
+     */
+    color?: string;
+}
+export interface EmojiArtProps extends BaseArtProps {
+    /**
+     * Type of the art
+     */
+    type?: 'emoji';
+    /**
+     * Emoji character
+     */
+    art: string;
+}
+export interface SvgArtProps extends BaseArtProps {
+    /**
+     * Type of the art
+     */
+    type?: 'svg';
+    /**
+     * SVG content
+     */
+    art: string;
+}
+export interface ImageArtProps extends BaseArtProps {
+    /**
+     * Type of the art
+     */
+    type?: 'image';
+    /**
+     * Image URL
+     */
+    art: string;
+}
+export interface BrandArtProps extends BaseArtProps {
+    /**
+     * Type of the art
+     */
+    type: 'brand';
+    /**
+     * Brand name
+     */
+    art: string;
+}
+export type ArtProps = IconArtProps | EmojiArtProps | SvgArtProps | ImageArtProps | BrandArtProps;

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

@@ -0,0 +1,16 @@
+/**
+ * Check if an art is an emoji
+ */
+export declare const isEmoji: (art: string) => boolean;
+/**
+ * Check if an art is an icon
+ */
+export declare const isIcon: (art: string) => boolean;
+/**
+ * Check if an art is an image
+ */
+export declare const isImage: (art: string) => boolean;
+/**
+ * Check if an art is an SVG
+ */
+export declare const isSvg: (art: string) => boolean;

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

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { BaseProps } from './types';
+export declare const Base: React.FC<BaseProps>;
+export * from './types';

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

@@ -0,0 +1,15 @@
+import { Color } from '../../theme';
+import { BoxProps } from '../Box';
+import { HeaderProps } from '../Header/types';
+export interface BaseProps extends BoxProps {
+    /**
+     * The background color of the Base component
+     */
+    backgroundColor?: Color;
+    /**
+     * The params for the header
+     * Can be set to false to hide the header
+     * Can provide a HeaderProps object to customize the header
+     */
+    header?: HeaderProps | false;
+}

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

@@ -0,0 +1,30 @@
+import { Color } from '../../theme/common';
+type ButtonContainerProps = {
+    backgroundColor: Color | 'disabled';
+    borderRadius: string;
+    disabled?: boolean;
+};
+declare const StyledButtonContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('..').BoxProps & {
+    ref?: import('react').ForwardedRef<HTMLDivElement>;
+}, ButtonContainerProps>> & 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>>;
+type ButtonTextProps = {
+    themeColor: Color | 'disabled';
+    themeTextColor?: Color;
+    disabled?: boolean;
+};
+declare const StyledButtonText: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('..').TextProps & {
+    useRichText?: boolean;
+}, ButtonTextProps>> & string & Omit<(props: import('..').TextProps & {
+    useRichText?: boolean;
+}) => import("react/jsx-runtime").JSX.Element, keyof import('react').Component<any, {}, any>>;
+type ButtonIconWrapperProps = {
+    themePosition: 'left' | 'right';
+};
+declare const StyledButtonIconWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('..').BoxProps & {
+    ref?: import('react').ForwardedRef<HTMLDivElement>;
+}, ButtonIconWrapperProps>> & 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 { StyledButtonContainer, StyledButtonText, StyledButtonIconWrapper, };

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

@@ -0,0 +1,54 @@
+import { default as React } from 'react';
+import { Color } from '../../theme/common';
+export interface ButtonProps {
+    /**
+     * Disable state of button.
+     */
+    disabled?: boolean;
+    /**
+     * Places an icon within the button, before the button's text
+     */
+    icon?: React.ReactNode;
+    /**
+     * Visual color to apply to button.
+     */
+    color?: Color;
+    /**
+     * Visual color to apply to button's text.
+     */
+    textColor?: Color;
+    /**
+     * Loading state of button.
+     */
+    loading?: boolean;
+    /**
+     * Set the handler to handle click event.
+     */
+    onClick?: React.MouseEventHandler<HTMLDivElement>;
+    /**
+     * Places an icon within the button, after the button's text
+     */
+    rightIcon?: React.ReactNode;
+    /**
+     * Corner style of button.
+     */
+    corner?: 'circle' | 'rounded' | 'square';
+    /**
+     * Additional style.
+     */
+    style?: React.CSSProperties;
+    /**
+     * Testing id of the component.
+     */
+    'data-testid'?: string;
+    /**
+     * Button text.
+     */
+    text: React.ReactNode;
+    /**
+     * For flex layout
+     */
+    flex?: number | string;
+}
+export declare const Button: ({ disabled, icon, color, textColor, loading, onClick, rightIcon, corner, style, "data-testid": testId, text, ...rest }: ButtonProps) => React.ReactElement;
+export * from './utils';

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

@@ -0,0 +1,3 @@
+import { Theme } from '../../theme';
+import { Color } from '../../theme/common';
+export declare const getTextColor: (theme: Theme, backgroundColor: Color | "disabled", textColor?: Color) => string;

package/dist/components/Divider/StyledDivider.d.ts

@@ -0,0 +1,12 @@
+import { Color } from '../../theme/common';
+interface StyledDividerProps {
+    $orientation: 'horizontal' | 'vertical';
+    $color: Color;
+    $thickness: number;
+}
+export declare const StyledDivider: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('..').BoxProps & {
+    ref?: import('react').ForwardedRef<HTMLDivElement>;
+}, StyledDividerProps>> & 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/Divider/index.d.ts

@@ -0,0 +1,21 @@
+import { default as React } from 'react';
+import { Color } from '../../theme/common';
+import { BoxProps } from '../Box';
+export interface DividerProps extends BoxProps {
+    /**
+     * The orientation of the divider.
+     * @default 'horizontal'
+     */
+    orientation?: 'horizontal' | 'vertical';
+    /**
+     * The color of the divider.
+     * @default 'grey300'
+     */
+    color?: Color;
+    /**
+     * The thickness of the divider in pixels.
+     * @default 1
+     */
+    thickness?: number;
+}
+export declare const Divider: React.FC<DividerProps>;

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

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { HeaderProps } from './types';
+export declare const Header: React.FC<HeaderProps>;
+export * from './types';

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

@@ -0,0 +1,57 @@
+import { Color } from '../../theme';
+import { BoxProps } from '../Box';
+export interface NavItem {
+    /**
+     * Label for the navigation item
+     */
+    label: string;
+    /**
+     * URL or path for the navigation item
+     */
+    path: string;
+    /**
+     * Whether this navigation item is currently active
+     */
+    isActive?: boolean;
+}
+export interface HeaderProps extends BoxProps {
+    /**
+     * Background color of the header
+     */
+    backgroundColor?: Color;
+    /**
+     * Navigation items to display in the center of the header
+     */
+    navItems?: NavItem[];
+    /**
+     * Whether to show the user is signed in
+     */
+    isSignedIn?: boolean;
+    /**
+     * User profile information, shown when signed in
+     */
+    userProfile?: {
+        name?: string;
+        avatar?: string;
+    };
+    /**
+     * Called when the logo is clicked
+     */
+    onLogoClick?: () => void;
+    /**
+     * Called when a navigation item is clicked
+     */
+    onNavItemClick?: (item: NavItem) => void;
+    /**
+     * Called when the sign in button is clicked
+     */
+    onSignInClick?: () => void;
+    /**
+     * Called when the register button is clicked
+     */
+    onRegisterClick?: () => void;
+    /**
+     * Called when the profile button is clicked
+     */
+    onProfileClick?: () => void;
+}

package/dist/components/Input/StyledInput.d.ts

@@ -0,0 +1,11 @@
+import { Color } from '../../theme/common';
+interface StyledInputContainerProps {
+    $isFocused: boolean;
+    $isDisabled: boolean;
+    $error: boolean;
+    $borderColor?: Color;
+    $bgColor?: Color;
+}
+export declare const StyledInputContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledInputContainerProps>> & string;
+export declare const StyledInput: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>> & string;
+export {};

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

@@ -0,0 +1,54 @@
+import { default as React } from 'react';
+import { Color } from '../../theme/common';
+export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
+    /**
+     * The value of the input field
+     */
+    value?: string;
+    /**
+     * Callback when the input value changes
+     */
+    onChange?: (text: string) => void;
+    /**
+     * The placeholder text
+     */
+    placeholder?: string;
+    /**
+     * Whether the input is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Error message to display
+     */
+    error?: string;
+    /**
+     * Label text to display above the input
+     */
+    label?: string;
+    /**
+     * Helper text to display below the input
+     */
+    helperText?: string;
+    /**
+     * Icon to display on the left side of the input
+     */
+    leftIcon?: React.ReactNode;
+    /**
+     * Icon to display on the right side of the input
+     */
+    rightIcon?: React.ReactNode;
+    /**
+     * Border color when focused
+     */
+    borderColor?: Color;
+    /**
+     * Background color
+     */
+    bgColor?: Color;
+}
+export interface InputRef {
+    focus: () => void;
+    blur: () => void;
+    value: string;
+}
+export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<InputRef>>;

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

@@ -0,0 +1,46 @@
+import { default as React } from 'react';
+import { Space } from '../../theme/common';
+import { BoxProps } from '../Box';
+export interface ListProps<T = any> extends BoxProps {
+    /**
+     * The data array to be rendered
+     */
+    data?: T[];
+    /**
+     * Function to render an item from the data array
+     */
+    renderItem?: (item: T, index: number) => React.ReactNode;
+    /**
+     * Optional key extractor function
+     */
+    keyExtractor?: (item: T, index: number) => string;
+    /**
+     * Component to render when the list is empty
+     */
+    ListEmptyComponent?: React.ReactNode;
+    /**
+     * Component to render at the top of the list
+     */
+    ListHeaderComponent?: React.ReactNode;
+    /**
+     * Component to render at the bottom of the list
+     */
+    ListFooterComponent?: React.ReactNode;
+    /**
+     * Component to render between each item
+     */
+    ItemSeparatorComponent?: React.ReactNode;
+    /**
+     * Gap between items (overrides the theme gap)
+     */
+    itemGap?: Space;
+    /**
+     * Additional props
+     */
+    [key: string]: any;
+}
+declare function InternalList<T>({ data, renderItem, keyExtractor, ListEmptyComponent, ListHeaderComponent, ListFooterComponent, ItemSeparatorComponent, itemGap, ...rest }: ListProps<T>, ref: React.Ref<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+export declare const List: <T>(props: ListProps<T> & {
+    ref?: React.Ref<HTMLDivElement>;
+}) => ReturnType<typeof InternalList>;
+export {};

package/dist/components/Loading/StyledLoading.d.ts

@@ -0,0 +1,10 @@
+export declare const StyledLoadingContainer: 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 StyledSpinner: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    size: string;
+    color: string;
+    strokeWidth: string;
+}>> & string;

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

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { LoadingProps } from './types';
+export declare const Loading: React.FC<LoadingProps>;
+export * from './types';

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

@@ -0,0 +1,28 @@
+import { default as React } from 'react';
+import { Color } from '../../theme';
+import { LoadingSize } from '../../theme/components/loading';
+import { BoxProps } from '../Box';
+export interface LoadingProps extends BoxProps {
+    /**
+     * Size of the loading indicator
+     */
+    size: LoadingSize | string;
+    /**
+     * Loading state of the loading indicator
+     * @default true
+     */
+    loading?: boolean;
+    /**
+     * Color of the loading indicator
+     * @default 'primary'
+     */
+    color?: Color;
+    /**
+     * Children of the loading indicator (will be shown when loading is false)
+     */
+    children?: React.ReactNode;
+    /**
+     * Test ID for testing
+     */
+    'data-testid'?: string;
+}

package/dist/components/Skeleton/SkeletonBackground.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+interface SkeletonBackgroundProps {
+    $variant: 'circle' | 'rectangle' | 'rounded';
+    $duration: number;
+}
+export declare const SkeletonBackgroundContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, SkeletonBackgroundProps>> & string;
+export declare const SkeletonBackground: React.FC<{
+    variant: 'circle' | 'rectangle' | 'rounded';
+    duration?: number;
+}>;
+export {};

package/dist/components/Skeleton/SkeletonWrapper.d.ts

@@ -0,0 +1,37 @@
+import { default as React } from 'react';
+interface SkeletonWrapperProps {
+    /**
+     * Whether the skeleton is visible
+     */
+    visible: boolean;
+    /**
+     * Style of the skeleton
+     */
+    variant: 'circle' | 'rectangle' | 'rounded';
+    /**
+     * Duration of the animation in ms
+     */
+    animationDuration?: number;
+    /**
+     * Children to render when not in skeleton state
+     */
+    children?: React.ReactNode;
+    /**
+     * Style of the wrapper
+     */
+    style?: React.CSSProperties;
+    /**
+     * Class name for the wrapper
+     */
+    className?: string;
+    /**
+     * Width of the skeleton
+     */
+    width?: string | number;
+    /**
+     * Height of the skeleton
+     */
+    height?: string | number;
+}
+export declare const SkeletonWrapper: React.FC<SkeletonWrapperProps>;
+export {};

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

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { SkeletonProps } from './types';
+export declare const Skeleton: React.FC<SkeletonProps>;
+export * from './types';

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

@@ -0,0 +1,19 @@
+import { BoxProps } from '../Box';
+export interface SkeletonProps extends BoxProps {
+    /**
+     * Whether the skeleton is visible
+     */
+    visible?: boolean;
+    /**
+     * Style of the skeleton
+     */
+    variant?: 'circle' | 'rectangle' | 'rounded';
+    /**
+     * Children to render when not in skeleton state
+     */
+    children?: React.ReactNode;
+    /**
+     * Duration of the animation in ms
+     */
+    animationDuration?: number;
+}

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

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { TouchableProps } from './types';
+export declare const Touchable: React.FC<TouchableProps>;
+export * from './types';

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

@@ -0,0 +1,21 @@
+import { default as React } from 'react';
+import { TouchableHapticFeedbackType } from '../../theme';
+import { BoxProps } from '../Box';
+export interface TouchableProps extends React.HTMLAttributes<HTMLDivElement>, BoxProps {
+    /**
+     * Haptic feedback type (not used in web, but kept for API compatibility)
+     */
+    hapticFeedback?: TouchableHapticFeedbackType;
+    /**
+     * Touchable's content.
+     */
+    children?: React.ReactNode;
+    /**
+     * Additional styles.
+     */
+    style?: React.CSSProperties;
+    /**
+     * Testing id of the component.
+     */
+    'data-testid'?: string;
+}

package/dist/components/Vimeo/Player.d.ts

@@ -0,0 +1,26 @@
+import { default as React } from 'react';
+import { VimeoCallbacks, VimeoConfig } from './types';
+interface PlayerProps {
+    /**
+     * The ID of the Vimeo video to play
+     */
+    videoId: string;
+    /**
+     * Width of the player
+     */
+    width?: string | number;
+    /**
+     * Height of the player
+     */
+    height?: string | number;
+    /**
+     * Configuration options for the Vimeo player
+     */
+    config?: VimeoConfig;
+    /**
+     * Callbacks for Vimeo player events
+     */
+    callbacks?: VimeoCallbacks;
+}
+export declare const Player: React.FC<PlayerProps>;
+export {};

package/dist/components/Vimeo/constants.d.ts

@@ -0,0 +1,17 @@
+export declare const DEFAULT_VIMEO_CONFIG: {
+    color: string;
+    autoplay: boolean;
+    muted: boolean;
+    loop: boolean;
+    title: boolean;
+    byline: boolean;
+    portrait: boolean;
+    dnt: boolean;
+    playsinline: boolean;
+    background: boolean;
+    controls: boolean;
+    pip: boolean;
+    responsive: boolean;
+    width: string;
+};
+export declare const VIMEO_HOST = "https://player.vimeo.com";

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

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+import { VimeoProps } from './types';
+export declare const Vimeo: React.FC<VimeoProps>;
+export * from './types';
+export * from './constants';