@aic-kits/react 0.1.0 → 0.1.2

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

@@ -1,44 +1,15 @@
-import { default as React } from 'react';
 import { Color } from '../../theme';
 import { BoxProps } from '../Box';
-export type BaseButtonParams = {
-    /**
-     * The title of the button
-     */
-    title: string;
-    /**
-     * The onPress event handler
-     */
-    onClick?: React.MouseEventHandler<HTMLButtonElement>;
-    /**
-     * The loading state of the button
-     *
-     * @default false
-     */
-    loading?: boolean;
-};
-export interface BaseFooterProps {
-    /**
-     * The params for the primary button
-     */
-    primaryButton?: BaseButtonParams;
-    /**
-     * The params for the secondary button
-     */
-    secondaryButton?: BaseButtonParams;
-}
-export interface BaseProps extends BoxProps, BaseFooterProps {
+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?: {
-        title?: string;
-        showBackButton?: boolean;
-        onBackButtonClick?: React.MouseEventHandler<HTMLButtonElement>;
-        backgroundColor?: Color;
-    } | false;
+    header?: HeaderProps | false;
 }

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

@@ -2,8 +2,13 @@ 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('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, ButtonContainerProps>> & string;
+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;

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

@@ -24,7 +24,7 @@ export interface ButtonProps {
     /**
      * Set the handler to handle click event.
      */
-    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+    onClick?: React.MouseEventHandler<HTMLDivElement>;
     /**
      * Places an icon within the button, after the button's text
      */

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/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/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';

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

@@ -0,0 +1,115 @@
+import { BoxProps } from '../Box';
+export interface VimeoConfig {
+    /**
+     * Whether to autoplay the video once loaded
+     */
+    autoplay?: boolean;
+    /**
+     * Whether the video should start in a muted state
+     */
+    muted?: boolean;
+    /**
+     * Whether the video should loop
+     */
+    loop?: boolean;
+    /**
+     * Whether to show the video title
+     */
+    title?: boolean;
+    /**
+     * Whether to show the author's byline
+     */
+    byline?: boolean;
+    /**
+     * Whether to show the author's portrait
+     */
+    portrait?: boolean;
+    /**
+     * Whether to disable tracking by Vimeo
+     */
+    dnt?: boolean;
+    /**
+     * Accent color for the player controls (hex code)
+     */
+    color?: string;
+    /**
+     * Whether to play the video inline on mobile devices
+     */
+    playsinline?: boolean;
+    /**
+     * Whether to play the video in the background (removes UI)
+     */
+    background?: boolean;
+    /**
+     * Whether to show player controls
+     */
+    controls?: boolean;
+    /**
+     * Whether to enable picture-in-picture mode
+     */
+    pip?: boolean;
+    /**
+     * Whether the player should be responsive
+     */
+    responsive?: boolean;
+}
+export interface VimeoCallbacks {
+    /**
+     * Callback when the video is ready to play
+     */
+    onReady?: () => void;
+    /**
+     * Callback when the video starts playing
+     */
+    onPlay?: () => void;
+    /**
+     * Callback when the video is paused
+     */
+    onPlayerPause?: () => void;
+    /**
+     * Callback when the video ends
+     */
+    onEnd?: () => void;
+    /**
+     * Callback when the video is seeking
+     */
+    onSeeking?: () => void;
+    /**
+     * Callback when the video has seeked
+     */
+    onSeeked?: () => void;
+    /**
+     * Callback when an error occurs
+     */
+    onPlayerError?: (error: any) => void;
+    /**
+     * Callback for time update
+     */
+    onTimeUpdate?: (time: number) => void;
+    /**
+     * Callback for progress update
+     */
+    onProgress?: (progress: number) => void;
+}
+export interface VimeoProps extends BoxProps {
+    /**
+     * The ID of the Vimeo video to play
+     */
+    videoId: string;
+    /**
+     * Specific width for the player
+     */
+    playerWidth?: string | number;
+    /**
+     * Specific height for the player
+     */
+    playerHeight?: string | number;
+    /**
+     * Vimeo player configuration
+     */
+    config?: VimeoConfig;
+    /**
+     * Vimeo player event callbacks
+     */
+    callbacks?: VimeoCallbacks;
+}

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

@@ -0,0 +1,17 @@
+import { VimeoConfig } from './types';
+/**
+ * Builds the Vimeo embed URL with all necessary parameters
+ *
+ * @param videoId - The Vimeo video ID
+ * @param config - Configuration for the Vimeo player
+ * @returns A string containing the complete Vimeo embed URL
+ */
+export declare function buildVimeoEmbedUrl(videoId: string, config?: VimeoConfig): string;
+/**
+ * Creates an event handler for Vimeo player iframe messages
+ *
+ * @param iframe - The iframe element
+ * @param onMessageCallback - Callback function for handling Vimeo player messages
+ * @returns A function to remove the event listener
+ */
+export declare function createVimeoMessageHandler(iframe: HTMLIFrameElement | null, onMessageCallback: (event: MessageEvent) => void): () => void;

package/dist/components/index.d.ts

@@ -1,7 +1,13 @@
 export * from './Art';
 export * from './Base';
+export * from './Box';
 export * from './Button';
+export * from './Divider';
+export * from './Header';
+export * from './Input';
+export * from './List';
 export * from './Loading';
-export * from './Touchable';
-export * from './Box';
+export * from './Skeleton';
 export * from './Text';
+export * from './Touchable';
+export * from './Vimeo';