@aic-kits/react 0.2.0 → 0.3.1

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

@@ -1,3 +1,8 @@
+import { Size, Theme } from '../../theme';
+/**
+ * Helper function to get the actual size value from theme or direct input.
+ */
+export declare const getSizeValue: (theme: Theme, size: Size | string | number | undefined) => string;
 /**
  * Check if an art is an emoji
  */

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

@@ -32,119 +32,119 @@ declare const colors: {
 declare const spaces: {
     readonly m: {
         readonly property: "margin";
-        readonly scale: "space";
+        readonly scale: "spaces";
     };
     readonly mt: {
         readonly property: "marginTop";
-        readonly scale: "space";
+        readonly scale: "spaces";
     };
     readonly mb: {
         readonly property: "marginBottom";
-        readonly scale: "space";
+        readonly scale: "spaces";
     };
     readonly ml: {
         readonly property: "marginLeft";
-        readonly scale: "space";
+        readonly scale: "spaces";
     };
     readonly mr: {
         readonly property: "marginRight";
-        readonly scale: "space";
+        readonly scale: "spaces";
     };
     readonly mx: {
         readonly property: "marginInline";
-        readonly scale: "space";
+        readonly scale: "spaces";
     };
     readonly my: {
         readonly property: "marginBlock";
-        readonly scale: "space";
+        readonly scale: "spaces";
     };
     readonly p: {
         readonly property: "padding";
-        readonly scale: "space";
+        readonly scale: "spaces";
     };
     readonly pt: {
         readonly property: "paddingTop";
-        readonly scale: "space";
+        readonly scale: "spaces";
     };
     readonly pb: {
         readonly property: "paddingBottom";
-        readonly scale: "space";
+        readonly scale: "spaces";
     };
     readonly pl: {
         readonly property: "paddingLeft";
-        readonly scale: "space";
+        readonly scale: "spaces";
     };
     readonly pr: {
         readonly property: "paddingRight";
-        readonly scale: "space";
+        readonly scale: "spaces";
     };
     readonly px: {
         readonly property: "paddingInline";
-        readonly scale: "space";
+        readonly scale: "spaces";
     };
     readonly py: {
         readonly property: "paddingBlock";
-        readonly scale: "space";
+        readonly scale: "spaces";
     };
     readonly margin: {
         readonly property: "margin";
-        readonly scale: "space";
+        readonly scale: "spaces";
     };
     readonly marginBottom: {
         readonly property: "marginBottom";
-        readonly scale: "space";
+        readonly scale: "spaces";
     };
     readonly marginLeft: {
         readonly property: "marginLeft";
-        readonly scale: "space";
+        readonly scale: "spaces";
     };
     readonly marginRight: {
         readonly property: "marginRight";
-        readonly scale: "space";
+        readonly scale: "spaces";
     };
     readonly marginTop: {
         readonly property: "marginTop";
-        readonly scale: "space";
+        readonly scale: "spaces";
     };
     readonly marginX: {
         readonly property: "marginInline";
-        readonly scale: "space";
+        readonly scale: "spaces";
     };
     readonly marginY: {
         readonly property: "marginBlock";
-        readonly scale: "space";
+        readonly scale: "spaces";
     };
     readonly padding: {
         readonly property: "padding";
-        readonly scale: "space";
+        readonly scale: "spaces";
     };
     readonly paddingBottom: {
         readonly property: "paddingBottom";
-        readonly scale: "space";
+        readonly scale: "spaces";
     };
     readonly paddingLeft: {
         readonly property: "paddingLeft";
-        readonly scale: "space";
+        readonly scale: "spaces";
     };
     readonly paddingRight: {
         readonly property: "paddingRight";
-        readonly scale: "space";
+        readonly scale: "spaces";
     };
     readonly paddingTop: {
         readonly property: "paddingTop";
-        readonly scale: "space";
+        readonly scale: "spaces";
     };
     readonly paddingX: {
         readonly property: "paddingInline";
-        readonly scale: "space";
+        readonly scale: "spaces";
     };
     readonly paddingY: {
         readonly property: "paddingBlock";
-        readonly scale: "space";
+        readonly scale: "spaces";
     };
     readonly gap: {
         readonly property: "gap";
-        readonly scale: "space";
+        readonly scale: "spaces";
     };
 };
 declare const radii: {
@@ -322,119 +322,119 @@ declare const config: {
     };
     readonly m: {
         readonly property: "margin";
-        readonly scale: "space";
+        readonly scale: "spaces";
     };
     readonly mt: {
         readonly property: "marginTop";
-        readonly scale: "space";
+        readonly scale: "spaces";
     };
     readonly mb: {
         readonly property: "marginBottom";
-        readonly scale: "space";
+        readonly scale: "spaces";
     };
     readonly ml: {
         readonly property: "marginLeft";
-        readonly scale: "space";
+        readonly scale: "spaces";
     };
     readonly mr: {
         readonly property: "marginRight";
-        readonly scale: "space";
+        readonly scale: "spaces";
     };
     readonly mx: {
         readonly property: "marginInline";
-        readonly scale: "space";
+        readonly scale: "spaces";
     };
     readonly my: {
         readonly property: "marginBlock";
-        readonly scale: "space";
+        readonly scale: "spaces";
     };
     readonly p: {
         readonly property: "padding";
-        readonly scale: "space";
+        readonly scale: "spaces";
     };
     readonly pt: {
         readonly property: "paddingTop";
-        readonly scale: "space";
+        readonly scale: "spaces";
     };
     readonly pb: {
         readonly property: "paddingBottom";
-        readonly scale: "space";
+        readonly scale: "spaces";
     };
     readonly pl: {
         readonly property: "paddingLeft";
-        readonly scale: "space";
+        readonly scale: "spaces";
     };
     readonly pr: {
         readonly property: "paddingRight";
-        readonly scale: "space";
+        readonly scale: "spaces";
     };
     readonly px: {
         readonly property: "paddingInline";
-        readonly scale: "space";
+        readonly scale: "spaces";
     };
     readonly py: {
         readonly property: "paddingBlock";
-        readonly scale: "space";
+        readonly scale: "spaces";
     };
     readonly margin: {
         readonly property: "margin";
-        readonly scale: "space";
+        readonly scale: "spaces";
     };
     readonly marginBottom: {
         readonly property: "marginBottom";
-        readonly scale: "space";
+        readonly scale: "spaces";
     };
     readonly marginLeft: {
         readonly property: "marginLeft";
-        readonly scale: "space";
+        readonly scale: "spaces";
     };
     readonly marginRight: {
         readonly property: "marginRight";
-        readonly scale: "space";
+        readonly scale: "spaces";
     };
     readonly marginTop: {
         readonly property: "marginTop";
-        readonly scale: "space";
+        readonly scale: "spaces";
     };
     readonly marginX: {
         readonly property: "marginInline";
-        readonly scale: "space";
+        readonly scale: "spaces";
     };
     readonly marginY: {
         readonly property: "marginBlock";
-        readonly scale: "space";
+        readonly scale: "spaces";
     };
     readonly padding: {
         readonly property: "padding";
-        readonly scale: "space";
+        readonly scale: "spaces";
     };
     readonly paddingBottom: {
         readonly property: "paddingBottom";
-        readonly scale: "space";
+        readonly scale: "spaces";
     };
     readonly paddingLeft: {
         readonly property: "paddingLeft";
-        readonly scale: "space";
+        readonly scale: "spaces";
     };
     readonly paddingRight: {
         readonly property: "paddingRight";
-        readonly scale: "space";
+        readonly scale: "spaces";
     };
     readonly paddingTop: {
         readonly property: "paddingTop";
-        readonly scale: "space";
+        readonly scale: "spaces";
     };
     readonly paddingX: {
         readonly property: "paddingInline";
-        readonly scale: "space";
+        readonly scale: "spaces";
     };
     readonly paddingY: {
         readonly property: "paddingBlock";
-        readonly scale: "space";
+        readonly scale: "spaces";
     };
     readonly gap: {
         readonly property: "gap";
-        readonly scale: "space";
+        readonly scale: "spaces";
     };
     readonly bgColor: {
         readonly property: "backgroundColor";

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

@@ -3,7 +3,7 @@ import { BorderWidth, Color, Radius, Space } from '../../theme';
 import { ConfigType, FlexPropsKeyType } from './config';
 export interface ThemeScale {
     colors: Color;
-    space: Space;
+    spaces: Space;
     radii: Radius;
     borderWidths: BorderWidth;
 }

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

@@ -1,8 +1,13 @@
-import { Color } from '../../theme/common';
+import { BorderWidth, Color, Space } from '../../theme/common';
 type ButtonContainerProps = {
-    backgroundColor: Color | 'disabled';
-    borderRadius: string;
-    disabled?: boolean;
+    $backgroundColor: Color | 'disabled';
+    $borderRadius: string;
+    $borderWidth: BorderWidth;
+    $disabled?: boolean;
+    $variant: 'solid' | 'outlined' | 'text';
+    $color: Color;
+    $paddingHorizontal?: Space;
+    $paddingVertical?: Space;
 };
 declare const StyledButtonContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('..').BoxProps & {
     ref?: import('react').ForwardedRef<HTMLDivElement>;
@@ -10,9 +15,10 @@ declare const StyledButtonContainer: import('styled-components/dist/types').ISty
     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;
+    $themeColor: Color;
+    $themeTextColor?: Color;
+    $disabled?: boolean;
+    $variant: 'solid' | 'outlined' | 'text';
 };
 declare const StyledButtonText: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('..').TextProps & {
     useRichText?: boolean;
@@ -20,7 +26,7 @@ declare const StyledButtonText: import('styled-components/dist/types').IStyledCo
     useRichText?: boolean;
 }) => import("react/jsx-runtime").JSX.Element, keyof import('react').Component<any, {}, any>>;
 type ButtonIconWrapperProps = {
-    themePosition: 'left' | 'right';
+    $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>;

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

@@ -1,54 +1,4 @@
 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;
+import { ButtonProps } from './types';
+export declare const Button: ({ disabled, icon, color, textColor, loading, onClick, rightIcon, corner, variant, style, "data-testid": testId, text, ...rest }: ButtonProps) => React.ReactElement;
 export * from './utils';

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

@@ -0,0 +1,60 @@
+import { Color } from '../../theme';
+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.
+     * For 'solid' variant, sets background color.
+     * For 'outlined' variant, sets border and text color.
+     * For 'text' variant, sets text color.
+     */
+    color?: Color;
+    /**
+     * Visual color to apply to button's text.
+     * Overrides the default text color derived from the variant and color prop.
+     */
+    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';
+    /**
+     * Button style variant.
+     * @default 'solid'
+     */
+    variant?: 'solid' | 'outlined' | 'text';
+    /**
+     * Additional style.
+     */
+    style?: React.CSSProperties;
+    /**
+     * Testing id of the component.
+     */
+    'data-testid'?: string;
+    /**
+     * Button text.
+     */
+    text: React.ReactNode;
+    /**
+     * For flex layout
+     */
+    flex?: number | string;
+}

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

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

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

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+import { HeaderProps } from './types';
+interface HeaderAuthProps {
+    isSignedIn?: boolean;
+    userProfile?: HeaderProps['userProfile'];
+    onSignInClick?: () => void;
+    onRegisterClick?: () => void;
+    onProfileClick?: () => void;
+}
+export declare const HeaderAuth: React.FC<HeaderAuthProps>;
+export {};

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

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+interface HeaderLogoProps {
+    onLogoClick?: () => void;
+}
+export declare const HeaderLogo: React.FC<HeaderLogoProps>;
+export {};

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

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+import { NavItem } from './types';
+interface HeaderNavProps {
+    navItems?: NavItem[];
+    onNavItemClick?: (item: NavItem) => void;
+}
+export declare const HeaderNav: React.FC<HeaderNavProps>;
+export {};

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

@@ -2,3 +2,6 @@ import { default as React } from 'react';
 import { HeaderProps } from './types';
 export declare const Header: React.FC<HeaderProps>;
 export * from './types';
+export * from './HeaderLogo';
+export * from './HeaderNav';
+export * from './HeaderAuth';

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

@@ -1,12 +1,12 @@
 import { Color, FontSize, FontWeight, Typeface } from '../../theme';
 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: 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';
 }
 declare const StyledText: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, StyledTextProps>> & string;
 export { StyledText };

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

@@ -1,11 +1,6 @@
 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.
      */