@ambuj.bhaskar/react-component-library 0.8.4 → 0.9.1

package/dist/index.d.ts

@@ -153,18 +153,22 @@ declare type IconProps = SVGprops & {
 declare const IconRegistry: Record<string, any>;
 
 /**
- * Input component props.
+ * Input component.
  *
- * @prop {string} [className] - Additional class names for styling.
- * @prop {string | number} [value] - The value of the input.
- * @prop {"s" | "m" | "l"} [height] - The height of the input.
- * @prop {CSSstring} [width] - The width of the input.
- * @prop {"flex-start" | "center" | "flex-end"} [placement] - The placement of the content inside the input.
+ * @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 {"before" | "after"} [iconPosition] - The position of the icon relative to the input.
- * @prop {Color} [iconColor] - The color of the icon.
+ * @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 {(value: string) => void} [onChange] - The callback function when the input changes.
+ * @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>;
 
@@ -178,6 +182,9 @@ declare type InputProps = HTMLInputProps & {
     iconPosition?: "before" | "after";
     iconColor?: Color;
     disabled?: boolean;
+    backgroundColor?: Color;
+    textColor?: Color;
+    borderColor?: Color;
 };
 
 declare type JustifyContent = "center" | "start" | "end" | "flex-start" | "flex-end" | "left" | "right" | "baseline" | "first baseline" | "last baseline" | "space-between" | "space-around" | "space-evenly" | "stretch";
@@ -288,6 +295,38 @@ declare type SpinnerProps = {
 
 declare type SVGprops = React.ComponentProps<"svg">;
 
+/**
+ * A simple switch component.
+ *
+ * @remarks
+ * This component is a simple on/off switch.
+ *
+ * @param {SwitchProps} props - The props for the switch component.
+ * @param {boolean} [props.value=false] - Whether the switch is checked or not.
+ * @param {boolean} [props.disabled=false] - Whether the switch is disabled or not.
+ * @param {ReactNode} [props.checkedChildren] - The content of the switch when checked.
+ * @param {ReactNode} [props.unCheckedChildren] - The content of the switch when unchecked.
+ * @param {boolean} [props.loading] - Whether the switch is in loading state.
+ * @param {string} [props.uncheckedBackgroundColor] - Background color when unchecked.
+ * @param {string} [props.checkedBackgroundColor] - Background color when checked.
+ * @param {string} [props.disabledBackgroundColor] - Background color when disabled.
+ *
+ * @returns {React.ReactElement} - The switch component.
+ */
+export declare const Switch: React.FC<SwitchProps>;
+
+declare type SwitchProps = {
+    value?: boolean;
+    disabled?: boolean;
+    checkedChildren?: ReactNode;
+    unCheckedChildren?: ReactNode;
+    onChange?: (checked: boolean) => void;
+    loading?: boolean;
+    uncheckedBackgroundColor?: Color;
+    checkedBackgroundColor?: Color;
+    disabledBackgroundColor?: Color;
+};
+
 declare type TextSize = "xs" | "s" | "m" | "l" | "xl";
 
 declare type Theme = Partial<{