@willphan1712000/frontend 1.9.1 → 1.9.2

package/dist/index.d.mts

@@ -1,6 +1,13 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React$1, { ReactNode } from 'react';
 
+/**
+ * Represents the structure of options available in the dropdown selection.
+ *
+ * Each item in the array contains:
+ * @property {string} label - The user-friendly text displayed in the dropdown list.
+ * @property {string} value - The actual value associated with the option.
+ */
 type Options$2 = {
     label: string;
     value: string;
@@ -12,10 +19,11 @@ interface Props$d {
 }
 /**
  * Dropdown Select component, allowing users to select options from dropdown menu
- * @param options - list of options, which is an array of object [{ label: string, value: string }]
- * @param value - a chosen value
- * @param onChange - a function to set a value
- * @returns
+ *
+ * @param options - List of select options of type {@link Options}
+ * @param value - The currently selected value
+ * @param onChange - Callback function triggered when a new value is selected
+ * @returns React Element rendering the dropdown select input
  */
 declare const DropdownSelect: ({ options, value, onChange }: Props$d) => react_jsx_runtime.JSX.Element;
 
@@ -46,7 +54,6 @@ type Options$1 = {
 interface Props$b {
     value: string;
     onChange: (value: string) => void;
-    width?: string;
     options: Options$1;
     color?: string;
 }
@@ -54,10 +61,9 @@ interface Props$b {
  * Option Slider component, allowing users to select a value they want with the help of element representaion. Label is a React Node jsx that represents the option. For example, if a value was a font, the label would be a React Node jsx that represents a character using the font
  * @param value - a chosen value
  * @param onChange - to set a value
- * @options - list of options, format [{ label: React Node Syntax, value: string }]
- * @returns
+ * @options - list of options, format Options {@link Options}
  */
-declare const OptionSlider: ({ value, onChange, width, options, color, }: Props$b) => react_jsx_runtime.JSX.Element;
+declare const OptionSlider: ({ value, onChange, options, color, }: Props$b) => react_jsx_runtime.JSX.Element;
 
 interface Props$a {
     value: string;
@@ -81,17 +87,14 @@ interface Props$9 {
     options: Options;
     value: string[];
     onChange: React.Dispatch<React.SetStateAction<string[]>>;
-    width?: string;
 }
 /**
  * MultiSelect component, allowing users to select multiple options from dropdown menu with search
- * @param options - list of options, which is an array of object [{ label: string, value: string }]
+ * @param options - list of options, which is an array of object Options {@link Options}
  * @param value - an array of chosen values
  * @param onChange - a function to set an array of values
- * @param width - specify the width of the component
- * @returns
  */
-declare const MultiSelect: ({ options, value, onChange, width }: Props$9) => react_jsx_runtime.JSX.Element;
+declare const MultiSelect: ({ options, value, onChange }: Props$9) => react_jsx_runtime.JSX.Element;
 
 interface Props$8 {
     buttonType?: 'gradient' | 'solid' | 'normal';
@@ -189,14 +192,24 @@ interface Props$5 {
  * @param value value of input
  * @param setValue set value function
  * @param label set label
- * @param options options object containing focusColor property -> color when input is focused
+ * @param options options object containing styling properties (focusColor, backgroundColor, textColor, borderColor)
  *
  * @example
  * ... component declaration
  * const [value, setValue] = useState<string|undefined>('')
  *
  * return (
- *      <InputGoogle value={value} setValue={setValue} label="Input Google Component Label" options={{ focusColor: "yellow" }}/>
+ *      <InputGoogle
+ *          value={value}
+ *          setValue={setValue}
+ *          label="Input Google Component Label"
+ *          options={{
+ *              focusColor: "yellow",
+ *              backgroundColor: "white",
+ *              textColor: "black",
+ *              borderColor: "gray"
+ *          }}
+ *      />
  * )
  */
 declare const InputGoogle: ({ value, setValue, label, options, ...props }: Props$5 & React.ComponentProps<"input">) => react_jsx_runtime.JSX.Element;
@@ -218,14 +231,24 @@ interface Props$4 {
  * @param value value of input
  * @param setValue set value function
  * @param label set label
- * @param options options object containing focusColor property -> color when input is focused
+ * @param options options object containing styling properties (focusColor, backgroundColor, textColor, borderColor)
  *
  * @example
  * ... component declaration
  * const [value, setValue] = useState<string|undefined>('')
  *
  * return (
- *      <TextArea value={value} setValue={setValue} label="Text Component Label" options={{ focusColor: "yellow" }}/>
+ *      <TextArea
+ *          value={value}
+ *          setValue={setValue}
+ *          label="Text Component Label"
+ *          options={{
+ *              focusColor: "yellow",
+ *              backgroundColor: "white",
+ *              textColor: "black",
+ *              borderColor: "gray"
+ *          }}
+ *      />
  * )
  */
 declare const TextArea: ({ value, setValue, label, options, ...props }: Props$4 & React.ComponentProps<"textarea">) => react_jsx_runtime.JSX.Element;
@@ -800,4 +823,4 @@ interface UseThemeState {
  */
 declare function useThemeState(): UseThemeState;
 
-export { type AuthInterface, Avatar, Button, Canvas, ColorPickerSlider, DropdownSelect, Image$1 as Image, ImageEditor, Image as ImageUtilities, InputFile, InputGoogle, LinearAlgebra, Modern as ModernButton, MultiSelect, OptionSlider, type Options$2 as Options, RangeSlider, SessionProvider, type SessionType, type Options$1 as SliderOptions, type StorageInterface, TextArea, Transform, UploadImage, tools, useAuthClient, useSession, useThemeState };
+export { type AuthInterface, Avatar, Button, Canvas, ColorPickerSlider, DropdownSelect, Image$1 as Image, ImageEditor, Image as ImageUtilities, InputFile, InputGoogle, LinearAlgebra, Modern as ModernButton, MultiSelect, OptionSlider, RangeSlider, SessionProvider, type SessionType, type StorageInterface, TextArea, Transform, UploadImage, tools, useAuthClient, useSession, useThemeState };

package/dist/index.d.ts

@@ -1,6 +1,13 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React$1, { ReactNode } from 'react';
 
+/**
+ * Represents the structure of options available in the dropdown selection.
+ *
+ * Each item in the array contains:
+ * @property {string} label - The user-friendly text displayed in the dropdown list.
+ * @property {string} value - The actual value associated with the option.
+ */
 type Options$2 = {
     label: string;
     value: string;
@@ -12,10 +19,11 @@ interface Props$d {
 }
 /**
  * Dropdown Select component, allowing users to select options from dropdown menu
- * @param options - list of options, which is an array of object [{ label: string, value: string }]
- * @param value - a chosen value
- * @param onChange - a function to set a value
- * @returns
+ *
+ * @param options - List of select options of type {@link Options}
+ * @param value - The currently selected value
+ * @param onChange - Callback function triggered when a new value is selected
+ * @returns React Element rendering the dropdown select input
  */
 declare const DropdownSelect: ({ options, value, onChange }: Props$d) => react_jsx_runtime.JSX.Element;
 
@@ -46,7 +54,6 @@ type Options$1 = {
 interface Props$b {
     value: string;
     onChange: (value: string) => void;
-    width?: string;
     options: Options$1;
     color?: string;
 }
@@ -54,10 +61,9 @@ interface Props$b {
  * Option Slider component, allowing users to select a value they want with the help of element representaion. Label is a React Node jsx that represents the option. For example, if a value was a font, the label would be a React Node jsx that represents a character using the font
  * @param value - a chosen value
  * @param onChange - to set a value
- * @options - list of options, format [{ label: React Node Syntax, value: string }]
- * @returns
+ * @options - list of options, format Options {@link Options}
  */
-declare const OptionSlider: ({ value, onChange, width, options, color, }: Props$b) => react_jsx_runtime.JSX.Element;
+declare const OptionSlider: ({ value, onChange, options, color, }: Props$b) => react_jsx_runtime.JSX.Element;
 
 interface Props$a {
     value: string;
@@ -81,17 +87,14 @@ interface Props$9 {
     options: Options;
     value: string[];
     onChange: React.Dispatch<React.SetStateAction<string[]>>;
-    width?: string;
 }
 /**
  * MultiSelect component, allowing users to select multiple options from dropdown menu with search
- * @param options - list of options, which is an array of object [{ label: string, value: string }]
+ * @param options - list of options, which is an array of object Options {@link Options}
  * @param value - an array of chosen values
  * @param onChange - a function to set an array of values
- * @param width - specify the width of the component
- * @returns
  */
-declare const MultiSelect: ({ options, value, onChange, width }: Props$9) => react_jsx_runtime.JSX.Element;
+declare const MultiSelect: ({ options, value, onChange }: Props$9) => react_jsx_runtime.JSX.Element;
 
 interface Props$8 {
     buttonType?: 'gradient' | 'solid' | 'normal';
@@ -189,14 +192,24 @@ interface Props$5 {
  * @param value value of input
  * @param setValue set value function
  * @param label set label
- * @param options options object containing focusColor property -> color when input is focused
+ * @param options options object containing styling properties (focusColor, backgroundColor, textColor, borderColor)
  *
  * @example
  * ... component declaration
  * const [value, setValue] = useState<string|undefined>('')
  *
  * return (
- *      <InputGoogle value={value} setValue={setValue} label="Input Google Component Label" options={{ focusColor: "yellow" }}/>
+ *      <InputGoogle
+ *          value={value}
+ *          setValue={setValue}
+ *          label="Input Google Component Label"
+ *          options={{
+ *              focusColor: "yellow",
+ *              backgroundColor: "white",
+ *              textColor: "black",
+ *              borderColor: "gray"
+ *          }}
+ *      />
  * )
  */
 declare const InputGoogle: ({ value, setValue, label, options, ...props }: Props$5 & React.ComponentProps<"input">) => react_jsx_runtime.JSX.Element;
@@ -218,14 +231,24 @@ interface Props$4 {
  * @param value value of input
  * @param setValue set value function
  * @param label set label
- * @param options options object containing focusColor property -> color when input is focused
+ * @param options options object containing styling properties (focusColor, backgroundColor, textColor, borderColor)
  *
  * @example
  * ... component declaration
  * const [value, setValue] = useState<string|undefined>('')
  *
  * return (
- *      <TextArea value={value} setValue={setValue} label="Text Component Label" options={{ focusColor: "yellow" }}/>
+ *      <TextArea
+ *          value={value}
+ *          setValue={setValue}
+ *          label="Text Component Label"
+ *          options={{
+ *              focusColor: "yellow",
+ *              backgroundColor: "white",
+ *              textColor: "black",
+ *              borderColor: "gray"
+ *          }}
+ *      />
  * )
  */
 declare const TextArea: ({ value, setValue, label, options, ...props }: Props$4 & React.ComponentProps<"textarea">) => react_jsx_runtime.JSX.Element;
@@ -800,4 +823,4 @@ interface UseThemeState {
  */
 declare function useThemeState(): UseThemeState;
 
-export { type AuthInterface, Avatar, Button, Canvas, ColorPickerSlider, DropdownSelect, Image$1 as Image, ImageEditor, Image as ImageUtilities, InputFile, InputGoogle, LinearAlgebra, Modern as ModernButton, MultiSelect, OptionSlider, type Options$2 as Options, RangeSlider, SessionProvider, type SessionType, type Options$1 as SliderOptions, type StorageInterface, TextArea, Transform, UploadImage, tools, useAuthClient, useSession, useThemeState };
+export { type AuthInterface, Avatar, Button, Canvas, ColorPickerSlider, DropdownSelect, Image$1 as Image, ImageEditor, Image as ImageUtilities, InputFile, InputGoogle, LinearAlgebra, Modern as ModernButton, MultiSelect, OptionSlider, RangeSlider, SessionProvider, type SessionType, type StorageInterface, TextArea, Transform, UploadImage, tools, useAuthClient, useSession, useThemeState };