@ambuj.bhaskar/react-component-library 0.10.8 → 0.11.1-alpha

package/dist/index.d.ts

@@ -20,66 +20,30 @@ declare type BlobType = {
     score?: number;
 };
 
-/**
- * The Button component.
- *
- * @param {ButtonProps} props - The props object.
- * @prop {string} [variant=primary] - The variant of the button. The default is "primary".
- * @prop {string} [background=rgb(255, 204, 0)] - The background color of the button.
- * @prop {string} [border] - The border color of the button. If not provided, the border color is the same as the background color.
- * @prop {string} [container=hugging] - The container type of the button. The default is "hugging".
- * @prop {string} [width=13.5rem] - The width of the button.
- * @prop {string} [size=m] - The size of the button. The default is "m".
- * @prop {string} [gap=0.25rem] - The gap between elements inside the button.
- * @prop {string} [placement=center] - The placement of the content inside the button. The default is "center".
- * @prop {boolean} [disabled=false] - If true, the button is disabled.
- * @prop {boolean} [loading=false] - If true, the button shows a loading state.
- * @prop {string} [text=null] - The text to display inside the button.
- * @prop {string} [textSize] - The size of the text inside the button.
- * @prop {string} [textColor] - The color of the text inside the button. If not provided, the color is the same as the variant.
- * @prop {object} [textColorStates=null] - Overrides the behaviour of color on default, hover, active states, which is intially set by the variant.
- * @prop {IconName} [icon=null] - The icon to display inside the button.
- * @prop {string} [iconSize] - The size of the icon inside the button.
- * @prop {string} [iconColor] - The color of the icon inside the button. If not provided, the color is the same as the variant.
- * @prop {string} [iconPosition=before] - The position of the icon relative to the text. The default is "before".
- * @prop {object} [iconColorStates=null] - Overrides the behaviour of color on default, hover, active states, which is intially set by the variant.
- * @prop {string} [className=null] - Additional class names for styling.
- */
 export declare const Button: React.FC<ButtonProps>;
 
 export declare type ButtonProps = HTMLButtonProps & {
     variant?: "primary" | "secondary" | "tertiary" | "nav";
-    background?: Color;
-    backgroundStates?: ColorStatesType;
-    border?: Color;
-    borderStates?: ColorStatesType;
-    container?: "fixed" | "hugging";
-    size?: Size;
+    backgroundColor?: Color;
+    borderColor?: Color;
+    textColor?: Color;
+    iconColor?: Color;
     width?: CSSstring;
+    size?: Size;
+    textSize?: TextSize;
+    iconSize?: IconProps["size"];
     gap?: CSSstring;
     placement?: JustifyContent;
-    loading?: boolean;
+    iconPosition?: IconPositionType;
     disabled?: boolean;
-    text?: string;
-    textSize?: TextSize;
-    textColor?: Color;
-    textColorStates?: ColorStatesType;
+    loading?: boolean;
+    content?: string;
     icon?: IconName;
-    iconSize?: IconProps["size"];
-    iconColor?: Color;
-    iconPosition?: IconPositionType;
-    iconColorStates?: ColorStatesType;
     className?: string;
 };
 
 declare type Color = string;
 
-declare type ColorStatesType = {
-    default: Color;
-    hover?: Color;
-    active?: Color;
-};
-
 export declare const CompactEventCard: React.FC<CompactEventCardPropsType>;
 
 export declare type CompactEventCardPropsType = {
@@ -150,7 +114,7 @@ export declare type DateRangePickerProps = {
 
 declare type DateTimeFormat = string;
 
-export declare const DEFAULT_PALETTE: Theme;
+export declare const DEFAULT_THEME: ThemeObject;
 
 export declare const DetectionCarousel: React.FC<DetectionCarouselProps>;
 
@@ -189,19 +153,6 @@ declare type HTMLButtonProps = ComponentProps<"button">;
 
 declare type HTMLInputProps = ComponentProps<"input">;
 
-/**
- * A component that renders an icon by its name.
- *
- * The icon must be registered in the {@link IconRegistry}.
- *
- * @prop {string} name - Name of the icon to use.
- * @prop {string} [className] - Additional class names for styling.
- * @prop {"xs" | "s" | "m" | "l" | "xl"} [size] - Size of the icon.
- * @prop {string} [background] - Background color of the icon.
- * @prop {string} [color] - Color of the icon.
- * @prop {React.MouseEventHandler<SVGSVGElement>} [onClick] - Callback when the icon is clicked.
- * @prop {React.SVGAttributes<SVGSVGElement>} ...svgProps - Additional props to pass to the SVG element.
- */
 export declare const Icon: React_2.FC<IconProps>;
 
 declare type IconName = keyof typeof IconRegistry;
@@ -219,24 +170,6 @@ export declare type IconProps = SVGprops & {
 
 declare const IconRegistry: Record<string, any>;
 
-/**
- * Input component.
- *
- * @prop {string} [className=""] - Additional class names for styling.
- * @prop {string | number | undefined} [value] - The current value of the input.
- * @prop {"s" | "m" | "l"} [height="m"] - Height of the input field.
- * @prop {CSSstring} [width="24rem"] - Width of the component.
- * @prop {JustifyContent} [placement="flex-start"] - Placement of the content inside the input.
- * @prop {IconName} [icon] - The icon to display inside the input.
- * @prop {string} [backgroundColor="#2929291a"] - Background color of the input.
- * @prop {string} [textColor="#292929"] - Color of the text inside the input.
- * @prop {string} [borderColor="#292929"] - Border color of the input.
- * @prop {"before" | "after"} [iconPosition="after"] - Position of the icon relative to the text.
- * @prop {string} [iconColor="#292929"] - Color of the icon inside the input.
- * @prop {boolean} [disabled=false] - If true, the input is disabled.
- * @prop {(val: string) => void} [onChange=() => {}] - Callback when the input value changes.
- * @prop {React.ComponentProps<HTMLInputElement>} ...props - Additional props to pass to the input element.
- */
 export declare const Input: React.FC<InputProps>;
 
 export declare type InputProps = HTMLInputProps & {
@@ -249,6 +182,7 @@ export declare type InputProps = HTMLInputProps & {
     iconPosition?: "before" | "after";
     iconColor?: Color;
     disabled?: boolean;
+    disabledColor?: Color;
     backgroundColor?: Color;
     textColor?: Color;
     borderColor?: Color;
@@ -266,20 +200,6 @@ export declare type ModalProps = {
     children: React.ReactNode;
 };
 
-/**
- * A multiselect component.
- *
- * @prop {Option[]} options - Options for the multiselect.
- * @prop {(value: string[]) => void} onChange - Callback function when the selection changes.
- * @prop {string} [placeholder] - Placeholder text for the input.
- * @prop {boolean} [searchable] - Whether the input is searchable.
- * @prop {string[]} [value] - The selected values.
- * @prop {string} [className] - The class name for the component.
- * @prop {boolean} [disabled] - Whether the component is disabled.
- * @prop {CSSstring} [width] - The width of the component.
- * @prop {string} [height] - The height of the component.
- * @prop {string} [id] - The id of the component.
- */
 export declare const Multiselect: default_2.FC<MultiselectProps>;
 
 export declare type MultiselectProps = {
@@ -308,20 +228,6 @@ declare type Option_2 = {
     value: string | number;
 };
 
-/**
- * A single select component.
- *
- * @prop {Option[]} options - Options for the select.
- * @prop {(value: string) => void} onChange - Callback function when the selection changes.
- * @prop {string} [placeholder] - Placeholder text for the input.
- * @prop {boolean} [searchable] - Whether the input is searchable.
- * @prop {string} [value] - The selected value.
- * @prop {string} [className] - The class name for the component.
- * @prop {boolean} [disabled] - Whether the component is disabled.
- * @prop {CSSstring} [width] - The width of the component.
- * @prop {string} [height] - The height of the component.
- * @prop {string} [id] - The id of the component.
- */
 export declare const Select: React.FC<SelectProps>;
 
 export declare type SelectProps = {
@@ -344,6 +250,53 @@ export declare type SelectProps = {
     suffixIcon?: ReactNode | boolean;
 };
 
+export declare const Sidebar: React.FC<SidebarProps>;
+
+export declare type SidebarConfig = {
+    header: {
+        logo: string;
+        logoCollapsed: string;
+        logoClickAction?: () => void;
+    };
+    body: {
+        static: {
+            title: string;
+            icon: string;
+            key: string;
+            action: () => void;
+            notification?: {
+                value: number;
+            };
+        }[];
+        dynamic: {
+            [section: string]: {
+                title: string;
+                icon: string;
+                key: string;
+                action: () => void;
+            }[];
+        };
+    };
+    footer: {
+        image: string;
+        title: string;
+        description: string;
+        action: () => void;
+        key: string;
+    };
+};
+
+export declare type SidebarProps = {
+    currentSection?: string;
+    currentSubSection?: string;
+    height?: CSSstring;
+    width?: CSSstring;
+    collapsedWidth?: CSSstring;
+    config: SidebarConfig;
+    isOpen?: boolean;
+    onToggle?: (isOpen: boolean) => void;
+};
+
 declare type Size = "s" | "m" | "l";
 
 /**
@@ -396,46 +349,17 @@ export declare type SwitchProps = {
 
 declare type TextSize = "xs" | "s" | "m" | "l" | "xl";
 
-export declare type Theme = Partial<{
-    common: {
-        primary?: string;
-        secondary?: string;
-        highlight?: string;
-        success?: string;
-        warning?: string;
-        error?: string;
-        info?: string;
-        disabled?: string;
-    };
-    text: {
-        primary?: string;
-        secondary?: string;
-        tertiary?: string;
-        disabled?: string;
-    };
-    background: {
-        primary?: string;
-    };
-    surface: {
-        fill: {
-            primary?: string;
-            secondary?: string;
-            tertiary?: string;
-        };
-        border: {
-            primary?: string;
-            secondary?: string;
-            tertiary?: string;
-        };
-    };
-}> & UnknownObject;
-
 export declare type ThemeObject = {
     name?: string;
-    palette: Theme;
+    palette?: ThemeSection;
+    sizes?: ThemeSection;
 };
 
-export declare const ThemeProvider: ({ theme, log, children }: ThemeProviderProps) => JSX_2.Element;
+export declare const ThemeProvider: ({ theme, log, children, }: {
+    theme?: ThemeObject;
+    log?: boolean;
+    children: ReactNode;
+}) => JSX_2.Element;
 
 export declare type ThemeProviderProps = {
     theme: ThemeObject;
@@ -443,8 +367,8 @@ export declare type ThemeProviderProps = {
     children: ReactNode;
 };
 
-declare type UnknownObject = {
-    [key: string]: unknown;
+export declare type ThemeSection = {
+    [key: string]: string | ThemeSection;
 };
 
 export declare const useTheme: () => Record<string, string>;