@aic-kits/react 0.8.0 → 0.10.0

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

@@ -1,6 +1,8 @@
 import { Color } from '../../theme';
 import { BoxProps } from '../Box';
 import { HeaderProps } from '../Header/types';
+/** Defines the layout mode for the content area on desktop screens. */
+export type ContentLayoutMode = 'maxWidth' | 'padded';
 export interface BaseProps extends BoxProps {
     /**
      * The background color of the Base component
@@ -12,4 +14,12 @@ export interface BaseProps extends BoxProps {
      * Can provide a HeaderProps object to customize the header
      */
     header?: HeaderProps | false;
+    /**
+     * Defines how the main content area is laid out on desktop screens.
+     * - `'maxWidth'`: Content is centered with a maximum width defined in the theme.
+     * - `'padded'`: Content uses horizontal padding defined in the theme.
+     * On mobile screens, content always uses mobile padding defined in the theme.
+     * @default 'maxWidth' (behavior might depend on theme defaults)
+     */
+    contentLayoutMode?: ContentLayoutMode;
 }

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

@@ -0,0 +1,5 @@
+import { BaseThemeConfig } from '../../theme';
+import { BoxProps } from '../Box';
+import { ContentLayoutMode } from './types';
+export declare const getInnerBoxStyleProps: (isDesktop: boolean, contentLayoutMode: ContentLayoutMode, baseThemeConfig: BaseThemeConfig) => Pick<BoxProps, "px" | "maxWidth">;
+export declare const getInnerBoxInlineStyle: (isDesktop: boolean, contentLayoutMode: ContentLayoutMode) => import('react').CSSProperties;

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

@@ -1,4 +1,5 @@
-import { BorderWidth, Color, Space } from '../../theme/common';
+import { BorderWidth, Color, FontSize, Space, Size, FontWeight } from '../../theme/common';
+import { ButtonSize } from '../../theme/components/button';
 type ButtonContainerProps = {
     $backgroundColor: Color | 'disabled';
     $borderRadius: string;
@@ -6,8 +7,9 @@ type ButtonContainerProps = {
     $disabled?: boolean;
     $variant: 'solid' | 'outlined' | 'text';
     $color: Color;
-    $paddingHorizontal?: Space;
-    $paddingVertical?: Space;
+    $paddingHorizontal: Space;
+    $paddingVertical: Space;
+    $size: ButtonSize;
 };
 declare const StyledButtonContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('..').BoxProps & {
     ref?: import('react').ForwardedRef<HTMLDivElement>;
@@ -19,6 +21,8 @@ type ButtonTextProps = {
     $themeTextColor?: Color;
     $disabled?: boolean;
     $variant: 'solid' | 'outlined' | 'text';
+    $themeFontSize: FontSize;
+    $themeFontWeight: FontWeight;
 };
 declare const StyledButtonText: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('..').TextProps & {
     useRichText?: boolean;
@@ -27,6 +31,7 @@ declare const StyledButtonText: import('styled-components/dist/types').IStyledCo
 }) => import("react/jsx-runtime").JSX.Element, keyof import('react').Component<any, {}, any>>;
 type ButtonIconWrapperProps = {
     $themePosition: 'left' | 'right';
+    $iconSpacing: Space;
 };
 declare const StyledButtonIconWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('..').BoxProps & {
     ref?: import('react').ForwardedRef<HTMLDivElement>;
@@ -36,6 +41,9 @@ declare const StyledButtonIconWrapper: import('styled-components/dist/types').IS
 type ButtonIconProps = {
     $themeColor: Color;
     $themeTextColor?: Color;
+    $disabled?: boolean;
+    $variant: 'solid' | 'outlined' | 'text';
+    $iconSize: Size;
 };
 declare const StyledButtonIcon: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('..').IconArtProps | import('..').EmojiArtProps | import('..').SvgArtProps | import('..').ImageArtProps | import('..').BrandArtProps, ButtonIconProps>> & string & Omit<(props: import('..').ArtProps) => React.ReactElement, keyof import('react').Component<any, {}, any>>;
 export { StyledButtonContainer, StyledButtonText, StyledButtonIconWrapper, StyledButtonIcon, };

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

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

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

@@ -42,6 +42,11 @@ export interface ButtonProps {
      * @default 'solid'
      */
     variant?: 'solid' | 'outlined' | 'text';
+    /**
+     * Button size.
+     * @default 'md'
+     */
+    size?: 'sm' | 'md' | 'lg';
     /**
      * Additional style.
      */

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

@@ -3,9 +3,10 @@ import { HeaderProps } from './types';
 interface HeaderAuthProps {
     isSignedIn?: boolean;
     userProfile?: HeaderProps['userProfile'];
+    dropdownItems?: HeaderProps['profileDropdownItems'];
+    onProfileClick?: () => void;
     onSignInClick?: () => void;
     onRegisterClick?: () => void;
-    onProfileClick?: () => void;
 }
 export declare const HeaderAuth: React.FC<HeaderAuthProps>;
 export {};

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

@@ -1,3 +1,4 @@
-import { default as React } from 'react';
 import { NavItemProps } from './types';
-export declare const NavItem: React.FC<NavItemProps>;
+export declare const NavItem: ({ label, isActive, onClick, size, }: NavItemProps & {
+    size?: "large" | "medium";
+}) => import("react/jsx-runtime").JSX.Element;

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

@@ -33,6 +33,7 @@ export interface HeaderProps extends BoxProps {
     userProfile?: {
         name?: string;
         avatar?: string;
+        email?: string;
     };
     /**
      * Called when the logo is clicked
@@ -54,4 +55,8 @@ export interface HeaderProps extends BoxProps {
      * Called when the profile button is clicked
      */
     onProfileClick?: () => void;
+    /**
+     * Profile dropdown items
+     */
+    profileDropdownItems?: NavItemProps[];
 }

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

@@ -8,5 +8,7 @@ interface StyledTextProps {
     $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;
+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";
+}>, StyledTextProps>> & string;
 export { StyledText };

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

@@ -42,6 +42,10 @@ export interface TextProps extends HTMLAttributes<HTMLParagraphElement> {
      * Whether to render the text with rich text formatting.
      */
     useRichText?: boolean;
+    /**
+     * The tag to render the text in.
+     */
+    as?: 'p' | 'span';
 }
 export interface TagStyle {
     pattern: RegExp;

package/dist/hooks/index.d.ts

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

package/dist/hooks/useMediaQuery.d.ts

@@ -0,0 +1,7 @@
+/**
+ * React hook that tracks state of a CSS media query.
+ *
+ * @param query - The media query string to watch (e.g., '(min-width: 768px)').
+ * @returns `true` if the media query matches, `false` otherwise.
+ */
+export declare function useMediaQuery(query: string): boolean;