@aic-kits/react 0.14.4 → 0.15.0

package/dist/theme/components/button.d.ts

@@ -1,7 +1,9 @@
 import { IconWeight } from '@phosphor-icons/react';
 import { Theme } from '../';
-import { BorderWidth, Color, FontSize, FontWeight, Size, Space } from '../common';
+import { BorderWidth, Color, FontSize, FontWeight, Radius, Size, Space } from '../common';
 export type ButtonSize = 'sm' | 'md' | 'lg';
+export type ButtonVariant = 'solid' | 'outlined' | 'text';
+export type ButtonCorner = 'circle' | 'rounded' | 'square';
 export interface ButtonSizeConfig {
     paddingHorizontal: Space;
     paddingVertical: Space;
@@ -13,18 +15,16 @@ export interface ButtonSizeConfig {
 }
 export interface ButtonThemeConfig {
     squircleBorderRadii: {
-        circle: string;
-        rounded: string;
-        square: string;
+        [key in ButtonCorner]: Radius;
     };
     loadingConfig: {
-        size: string;
+        size: Size;
     };
     defaultColor: Color;
     defaultTextColor: Color;
     iconSpacing?: Space;
     sizes: Record<ButtonSize, ButtonSizeConfig>;
-    variants?: Record<string, {
+    variants?: Record<ButtonVariant, {
         bgColor?: Color;
         textColor?: Color;
         borderColor?: Color;

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

@@ -10,6 +10,8 @@ import { HeaderThemeConfig } from './header';
 import { InputThemeConfig } from './input';
 import { ListThemeConfig } from './list';
 import { LoadingThemeConfig } from './loading';
+import { PaginationTheme } from './pagination';
+import { ProgressThemeConfig, ProgressSize, ProgressVariant } from './progress';
 import { SelectThemeConfig, SelectSize, SelectVariant } from './select';
 import { SkeletonThemeConfig } from './skeleton';
 import { TagThemeConfig } from './tag';
@@ -24,6 +26,7 @@ export interface ComponentsTheme {
     input: InputThemeConfig;
     list: ListThemeConfig;
     loading: LoadingThemeConfig;
+    pagination: PaginationTheme;
     skeleton: SkeletonThemeConfig;
     touchable: TouchableThemeConfig;
     vimeo: VimeoThemeConfig;
@@ -32,6 +35,7 @@ export interface ComponentsTheme {
     tag: TagThemeConfig;
     checkbox: CheckboxThemeConfig;
     select: SelectThemeConfig;
+    progress: ProgressThemeConfig;
 }
 export declare const getComponentsTheme: (theme: Theme) => ComponentsTheme;
 export * from './art';
@@ -42,6 +46,7 @@ export * from './header';
 export * from './input';
 export * from './list';
 export * from './loading';
+export * from './pagination';
 export * from './skeleton';
 export * from './touchable';
 export * from './vimeo';
@@ -50,4 +55,5 @@ export * from './accordion';
 export * from './tag';
 export * from './checkbox';
 export * from './select';
-export type { SelectSize, SelectVariant };
+export * from './progress';
+export type { SelectSize, SelectVariant, ProgressSize, ProgressVariant };

package/dist/theme/components/pagination.d.ts

@@ -0,0 +1,48 @@
+import { IconWeight } from '@phosphor-icons/react';
+import { Color, FontSize, Radius, Size, Space } from '../common';
+import { ButtonSize } from '../components';
+import { Theme } from '../getTheme';
+export type PaginationSize = 'small' | 'medium' | 'large';
+export type PaginationShape = 'circular' | 'rounded';
+export interface PaginationContainerSizeTheme {
+    gap: Space;
+}
+export interface PaginationItemShapeTheme {
+    container: {
+        borderRadius: Radius;
+    };
+}
+export interface PaginationItemSizeTheme {
+    container: {
+        size: Size;
+    };
+    text: {
+        fontSize: FontSize;
+    };
+    icon: {
+        size: Size;
+        weight: IconWeight;
+    };
+    buttonSize: ButtonSize;
+}
+export interface PaginationTheme {
+    container: {
+        sizes: {
+            [key in PaginationSize]: PaginationContainerSizeTheme;
+        };
+    };
+    item: {
+        defaultColor: Color;
+        text: {
+            color: Color;
+            disabledColor: Color;
+        };
+        shapes: {
+            [key in PaginationShape]: PaginationItemShapeTheme;
+        };
+        sizes: {
+            [key in PaginationSize]: PaginationItemSizeTheme;
+        };
+    };
+}
+export declare const getPaginationTheme: (_theme: Theme) => PaginationTheme;

package/dist/theme/components/progress.d.ts

@@ -0,0 +1,21 @@
+import { Theme } from '../';
+import { Color, BorderWidth, Radius, Size } from '../common';
+export type ProgressVariant = 'soft' | 'outlined' | 'plain';
+export type ProgressSize = 'sm' | 'md' | 'lg';
+export interface ProgressSizeConfig {
+    height: Size;
+    borderRadius: Radius;
+}
+export interface ProgressVariantConfig {
+    containerBackgroundColor: Color | string;
+    containerBorderColor?: Color | string;
+    containerBorderWidth?: BorderWidth;
+    defaultProgressColor: Color;
+}
+export interface ProgressThemeConfig {
+    defaultVariant: ProgressVariant;
+    defaultSize: ProgressSize;
+    sizes: Record<ProgressSize, ProgressSizeConfig>;
+    variants: Record<ProgressVariant, ProgressVariantConfig>;
+}
+export declare const progressTheme: (_theme: Theme) => ProgressThemeConfig;

package/dist/utils/index.d.ts

@@ -1 +1,2 @@
 export * from './ssr';
+export * from './responsiveness';

package/dist/utils/responsiveness.d.ts

@@ -0,0 +1,79 @@
+/**
+ * The breakpoints used in the responsive system.
+ * @public
+ */
+export type ResponsiveKey = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+/**
+ * The breakpoints used in the responsive system.
+ * @public
+ */
+export declare const RESPONSIVE_BREAKPOINTS: Record<ResponsiveKey, number>;
+/**
+ * The breakpoints used in the responsive system.
+ * @public
+ */
+export declare const RESPONSIVE_BREAKPOINT_KEYS: ResponsiveKey[];
+/**
+ * A responsive prop is a value that can be a single value or a partial record of values for each breakpoint.
+ * @public
+ */
+export type ResponsiveValue<T> = Omit<Partial<Record<ResponsiveKey, T>>, 'xs'> & {
+    xs: T;
+} | Omit<Partial<Record<ResponsiveKey, T>>, 'sm'> & {
+    sm: T;
+} | Omit<Partial<Record<ResponsiveKey, T>>, 'md'> & {
+    md: T;
+} | Omit<Partial<Record<ResponsiveKey, T>>, 'lg'> & {
+    lg: T;
+} | Omit<Partial<Record<ResponsiveKey, T>>, 'xl'> & {
+    xl: T;
+};
+/**
+ * A value that can be a single value or a partial record of values for each breakpoint.
+ * @public
+ */
+export type WithResponsiveValue<T> = T | ResponsiveValue<T>;
+/**
+ * A higher-order type that converts a record of values to a record of responsive values.
+ * @public
+ */
+export type WithResponsive<T extends object> = {
+    [K in keyof T]: WithResponsiveValue<T[K]>;
+};
+/**
+ * Checks if a value is a responsive prop.
+ * @public
+ * @param value - The value to check.
+ * @returns True if the value is a responsive prop, false otherwise.
+ */
+export declare const isResponsiveValue: <T>(value: WithResponsiveValue<T>) => value is ResponsiveValue<T>;
+/**
+ * Transforms a responsive value.
+ * @public
+ * @param value - The value to transform.
+ * @param transform - The transform function.
+ * @returns The transformed value.
+ */
+export declare const transformResponsiveValue: <SourceType, TargetType>(value: WithResponsiveValue<SourceType>, transform: (value: SourceType) => TargetType) => WithResponsiveValue<TargetType>;
+/**
+ * Gets the responsive value for a given breakpoint.
+ * @public
+ * @param value - The value to get the responsive value for.
+ * @param breakpoint - The breakpoint to get the responsive value for.
+ * @returns The responsive value for the given breakpoint.
+ */
+export declare const getResponsiveValue: <T>(value: WithResponsiveValue<T>, breakpoint: ResponsiveKey) => T;
+/**
+ * Populates a responsive value with all breakpoints.
+ * @public
+ * @param responsiveValue - The responsive value to populate.
+ * @returns The populated responsive value.
+ */
+export declare const populateResponsiveValue: <T extends object>(responsiveValue: WithResponsiveValue<T>) => Record<ResponsiveKey, T>;
+/**
+ * Generates responsive styles for a given object.
+ * @public
+ * @param styles - The styles to generate responsive styles for.
+ * @returns The generated responsive styles.
+ */
+export declare const generateResponsiveStyles: <T extends object>(styles: WithResponsive<T>) => import('styled-components').RuleSet<object>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aic-kits/react",
-  "version": "0.14.4",
+  "version": "0.15.0",
   "type": "module",
   "license": "MIT",
   "publishConfig": {
@@ -46,5 +46,5 @@
     "vite-plugin-dts": "^4.3.0",
     "vitest": "^2.1.8"
   },
-  "gitHead": "6ad1c750aa410f95ee70cac6f37807e10651310c"
+  "gitHead": "115df4862e02fda15d29b9904378d60bfd690752"
 }