@arkyn/components 3.0.1-beta.95 → 3.0.1-beta.99

package/dist/components/alert/alertTitle/index.d.ts

@@ -1,46 +1,48 @@
-import { HTMLAttributes } from "react";
+import { HTMLAttributes, JSX } from "react";
 import "./styles.css";
+/**
+ * Props for the AlertTitle component.
+ * Extends all standard HTML div element attributes.
+ *
+ * @typedef {Object} AlertTitleProps
+ * @property {string} [className] - Additional CSS class names to apply to the alert title
+ * @extends {HTMLAttributes<HTMLDivElement>}
+ */
 type AlertTitleProps = HTMLAttributes<HTMLDivElement>;
 /**
- * AlertTitle component - used to display the main title/heading of alerts
+ * AlertTitle component - Displays the title section of an alert message.
  *
- * @param props - AlertTitle component properties
+ * This component renders a styled title for alert components, providing semantic structure
+ * and consistent styling across the application.
  *
- * **...Other valid HTML properties for div**
+ * @component
+ * @memberof Alert
  *
- * @returns AlertTitle JSX element
+ * @param {AlertTitleProps} props - Component props extending HTML div attributes
  *
- * @description
- * This component affects the layout of the AlertContainer. When present, the container
- * content will be aligned differently compared to alerts without a title.
+ * @returns {JSX.Element} A div element with alert title styling
  *
- * @example
- * ```tsx
- * // Basic alert with title
- * <AlertContainer schema="info">
- *   <AlertTitle>Information</AlertTitle>
- *   <AlertDescription>This is important information.</AlertDescription>
- * </AlertContainer>
+ * @requires react
  *
- * // Success alert with title and icon
+ * @example
+ * // Basic usage
  * <AlertContainer schema="success">
- *   <AlertIcon />
  *   <AlertTitle>Success!</AlertTitle>
- *   <AlertDescription>Your operation was completed.</AlertDescription>
+ *   <AlertDescription>Your changes have been saved.</AlertDescription>
  * </AlertContainer>
  *
- * // Error alert with custom styling
- * <AlertContainer schema="danger">
- *   <AlertIcon />
- *   <AlertTitle className="custom-title">
- *     Critical Error
- *   </AlertTitle>
- *   <AlertDescription>
- *     Please contact support immediately.
- *   </AlertDescription>
+ * @example
+ * // Complete alert example
+ * <AlertContainer schema="success">
+ *  <AlertIcon />
+ *  <AlertContent>
+ *    <AlertTitle>Success!</AlertTitle>
+ *    <AlertDescription>
+ *      You are premium user now!
+ *    </AlertDescription>
+ *  </AlertContent>
  * </AlertContainer>
- * ```
  */
-declare function AlertTitle(props: AlertTitleProps): import("react/jsx-runtime").JSX.Element;
+declare function AlertTitle(props: AlertTitleProps): JSX.Element;
 export { AlertTitle };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/alert/alertTitle/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/alert/alertTitle/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,cAAc,CAAC;AAEtB,KAAK,eAAe,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAEtD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AAEH,iBAAS,UAAU,CAAC,KAAK,EAAE,eAAe,2CAKzC;AAED,OAAO,EAAE,UAAU,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/alert/alertTitle/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,cAAc,CAAC;AAEtB;;;;;;;GAOG;AACH,KAAK,eAAe,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAEtD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,iBAAS,UAAU,CAAC,KAAK,EAAE,eAAe,GAAG,GAAG,CAAC,OAAO,CAKvD;AAED,OAAO,EAAE,UAAU,EAAE,CAAC"}

package/dist/components/alert/alertTitle/index.js

@@ -1,44 +1,38 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import "./styles.css";
 /**
- * AlertTitle component - used to display the main title/heading of alerts
+ * AlertTitle component - Displays the title section of an alert message.
  *
- * @param props - AlertTitle component properties
+ * This component renders a styled title for alert components, providing semantic structure
+ * and consistent styling across the application.
  *
- * **...Other valid HTML properties for div**
+ * @component
+ * @memberof Alert
  *
- * @returns AlertTitle JSX element
+ * @param {AlertTitleProps} props - Component props extending HTML div attributes
  *
- * @description
- * This component affects the layout of the AlertContainer. When present, the container
- * content will be aligned differently compared to alerts without a title.
+ * @returns {JSX.Element} A div element with alert title styling
  *
- * @example
- * ```tsx
- * // Basic alert with title
- * <AlertContainer schema="info">
- *   <AlertTitle>Information</AlertTitle>
- *   <AlertDescription>This is important information.</AlertDescription>
- * </AlertContainer>
+ * @requires react
  *
- * // Success alert with title and icon
+ * @example
+ * // Basic usage
  * <AlertContainer schema="success">
- *   <AlertIcon />
  *   <AlertTitle>Success!</AlertTitle>
- *   <AlertDescription>Your operation was completed.</AlertDescription>
+ *   <AlertDescription>Your changes have been saved.</AlertDescription>
  * </AlertContainer>
  *
- * // Error alert with custom styling
- * <AlertContainer schema="danger">
- *   <AlertIcon />
- *   <AlertTitle className="custom-title">
- *     Critical Error
- *   </AlertTitle>
- *   <AlertDescription>
- *     Please contact support immediately.
- *   </AlertDescription>
+ * @example
+ * // Complete alert example
+ * <AlertContainer schema="success">
+ *  <AlertIcon />
+ *  <AlertContent>
+ *    <AlertTitle>Success!</AlertTitle>
+ *    <AlertDescription>
+ *      You are premium user now!
+ *    </AlertDescription>
+ *  </AlertContent>
  * </AlertContainer>
- * ```
  */
 function AlertTitle(props) {
     const { className: baseClassName, ...rest } = props;

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

@@ -1,11 +1,25 @@
-import { AudioHTMLAttributes } from "react";
+import { AudioHTMLAttributes, JSX } from "react";
 import "./styles.css";
+/**
+ * @typedef {Object} AudioInformationProps
+ * @property {number} currentTime - Current playback time in seconds
+ * @property {number} totalTime - Total duration of the audio in seconds
+ * @property {string} formattedCurrentTime - Formatted current time as MM:SS
+ * @property {string} formattedTotalTime - Formatted total time as MM:SS
+ */
 type AudioInformationProps = {
     currentTime: number;
     totalTime: number;
     formattedCurrentTime: string;
     formattedTotalTime: string;
 };
+/**
+ * @typedef {Object} AudioPlayerProps
+ * @property {string} src - Audio source URL (required)
+ * @property {boolean} [disabled] - Whether the audio player controls are disabled
+ * @property {function(AudioInformationProps): void} [onPlayAudio] - Callback fired when audio starts playing
+ * @property {function(AudioInformationProps): void} [onPauseAudio] - Callback fired when audio is paused
+ */
 type AudioPlayerProps = Omit<AudioHTMLAttributes<HTMLAudioElement>, "onEnded" | "src"> & {
     src: string;
     disabled?: boolean;
@@ -13,48 +27,33 @@ type AudioPlayerProps = Omit<AudioHTMLAttributes<HTMLAudioElement>, "onEnded" |
     onPauseAudio?: (props: AudioInformationProps) => void;
 };
 /**
- * AudioPlayer component - used to play audio files with playback controls
+ * AudioPlayer component
  *
- * @param props - AudioPlayer component properties
- * @param props.src - Audio source URL (required)
- * @param props.disabled - Whether the audio player is disabled. Default: false
- * @param props.onPlayAudio - Callback function called when audio starts playing
- * @param props.onPauseAudio - Callback function called when audio is paused
+ * A customizable audio player with play/pause controls, progress slider, and time display.
+ * Provides callbacks for play and pause events with detailed audio information.
  *
- * **...Other valid HTML audio properties**
+ * @component
  *
- * @returns AudioPlayer JSX element
+ * @param {AudioPlayerProps} props - The component props
  *
- * @example
- * ```tsx
- * // Basic audio player
- * <AudioPlayer src="/audio/sample.mp3" />
+ * @returns {JSX.Element} The rendered audio player component
  *
- * // Audio player with callbacks
- * <AudioPlayer
- *   src="/audio/sample.mp3"
- *   onPlayAudio={(info) => console.log('Playing:', info)}
- *   onPauseAudio={(info) => console.log('Paused:', info)}
- * />
+ * @requires lucide-react - For Play and Pause icons
+ * @requires useSlider - For slider state management
+ * @requires slider - For the progress slider component
  *
- * // Disabled audio player
- * <AudioPlayer
- *   src="/audio/sample.mp3"
- *   disabled
- * />
+ * @example
+ * // Basic usage
+ * <AudioPlayer src="https://example.com/audio.mp3" />
  *
- * // Audio player with additional HTML audio attributes
+ * @example
+ * // With callbacks
  * <AudioPlayer
- *   src="/audio/sample.mp3"
- *   loop
- *   preload="metadata"
- *   onPlayAudio={(info) => {
- *     console.log(`Current: ${info.formattedCurrentTime}`);
- *     console.log(`Total: ${info.formattedTotalTime}`);
- *   }}
+ *   src="https://example.com/audio.mp3"
+ *   onPlayAudio={(info) => console.log('Playing:', info.formattedCurrentTime)}
+ *   onPauseAudio={(info) => console.log('Paused at:', info.formattedCurrentTime)}
  * />
- * ```
  */
-declare function AudioPlayer(props: AudioPlayerProps): import("react/jsx-runtime").JSX.Element;
+declare function AudioPlayer(props: AudioPlayerProps): JSX.Element;
 export { AudioPlayer };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/audioPlayer/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/audioPlayer/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,mBAAmB,EAA+B,MAAM,OAAO,CAAC;AAIzE,OAAO,cAAc,CAAC;AAEtB,KAAK,qBAAqB,GAAG;IAC3B,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,oBAAoB,EAAE,MAAM,CAAC;IAC7B,kBAAkB,EAAE,MAAM,CAAC;CAC5B,CAAC;AAEF,KAAK,gBAAgB,GAAG,IAAI,CAC1B,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,SAAS,GAAG,KAAK,CAClB,GAAG;IACF,GAAG,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;IACrD,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;CACvD,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AAEH,iBAAS,WAAW,CAAC,KAAK,EAAE,gBAAgB,2CAoH3C;AAED,OAAO,EAAE,WAAW,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/audioPlayer/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,mBAAmB,EAAE,GAAG,EAA+B,MAAM,OAAO,CAAC;AAI9E,OAAO,cAAc,CAAC;AAEtB;;;;;;GAMG;AACH,KAAK,qBAAqB,GAAG;IAC3B,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,oBAAoB,EAAE,MAAM,CAAC;IAC7B,kBAAkB,EAAE,MAAM,CAAC;CAC5B,CAAC;AAEF;;;;;;GAMG;AACH,KAAK,gBAAgB,GAAG,IAAI,CAC1B,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,SAAS,GAAG,KAAK,CAClB,GAAG;IACF,GAAG,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;IACrD,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;CACvD,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,iBAAS,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,GAAG,CAAC,OAAO,CAoHzD;AAED,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/dist/components/audioPlayer/index.js

@@ -5,47 +5,32 @@ import { useSlider } from "../../hooks/useSlider";
 import { Slider } from "../slider";
 import "./styles.css";
 /**
- * AudioPlayer component - used to play audio files with playback controls
+ * AudioPlayer component
  *
- * @param props - AudioPlayer component properties
- * @param props.src - Audio source URL (required)
- * @param props.disabled - Whether the audio player is disabled. Default: false
- * @param props.onPlayAudio - Callback function called when audio starts playing
- * @param props.onPauseAudio - Callback function called when audio is paused
+ * A customizable audio player with play/pause controls, progress slider, and time display.
+ * Provides callbacks for play and pause events with detailed audio information.
  *
- * **...Other valid HTML audio properties**
+ * @component
  *
- * @returns AudioPlayer JSX element
+ * @param {AudioPlayerProps} props - The component props
  *
- * @example
- * ```tsx
- * // Basic audio player
- * <AudioPlayer src="/audio/sample.mp3" />
+ * @returns {JSX.Element} The rendered audio player component
  *
- * // Audio player with callbacks
- * <AudioPlayer
- *   src="/audio/sample.mp3"
- *   onPlayAudio={(info) => console.log('Playing:', info)}
- *   onPauseAudio={(info) => console.log('Paused:', info)}
- * />
+ * @requires lucide-react - For Play and Pause icons
+ * @requires useSlider - For slider state management
+ * @requires slider - For the progress slider component
  *
- * // Disabled audio player
- * <AudioPlayer
- *   src="/audio/sample.mp3"
- *   disabled
- * />
+ * @example
+ * // Basic usage
+ * <AudioPlayer src="https://example.com/audio.mp3" />
  *
- * // Audio player with additional HTML audio attributes
+ * @example
+ * // With callbacks
  * <AudioPlayer
- *   src="/audio/sample.mp3"
- *   loop
- *   preload="metadata"
- *   onPlayAudio={(info) => {
- *     console.log(`Current: ${info.formattedCurrentTime}`);
- *     console.log(`Total: ${info.formattedTotalTime}`);
- *   }}
+ *   src="https://example.com/audio.mp3"
+ *   onPlayAudio={(info) => console.log('Playing:', info.formattedCurrentTime)}
+ *   onPauseAudio={(info) => console.log('Paused at:', info.formattedCurrentTime)}
  * />
- * ```
  */
 function AudioPlayer(props) {
     const { onPlayAudio, onPauseAudio, disabled, ...rest } = props;

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

@@ -15,7 +15,7 @@ import "./styles.css";
  * @param props.enforceCharacterLimit - Whether to enforce the character limit strictly (default: false)
  * @param props.onChangeCharactersCount - Callback function triggered when character count changes
  * @param props.baseErrorMessage - Custom error message to display
- * @param props.maxLimit - Maximum number of characters allowed (default: 2000)
+ * @param props.maxLimit - Maximum number of characters allowed (default: 10000)
  * @param props.onChange - Callback function triggered when editor content changes
  * @param props.isError - Whether the component should display in error state
  * @param props.id - Custom ID for the editor element

package/dist/components/richText/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/richText/index.tsx"],"names":[],"mappings":"AA8BA,OAAO,EAEL,aAAa,EACd,MAAM,2BAA2B,CAAC;AAMnC,OAAO,cAAc,CAAC;AAEtB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4DG;AAEH,iBAAS,QAAQ,CAAC,KAAK,EAAE,aAAa,2CAkMrC;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/richText/index.tsx"],"names":[],"mappings":"AA8BA,OAAO,EAEL,aAAa,EACd,MAAM,2BAA2B,CAAC;AAMnC,OAAO,cAAc,CAAC;AAEtB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4DG;AAEH,iBAAS,QAAQ,CAAC,KAAK,EAAE,aAAa,2CA4LrC;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/dist/components/richText/index.js

@@ -34,7 +34,7 @@ import "./styles.css";
  * @param props.enforceCharacterLimit - Whether to enforce the character limit strictly (default: false)
  * @param props.onChangeCharactersCount - Callback function triggered when character count changes
  * @param props.baseErrorMessage - Custom error message to display
- * @param props.maxLimit - Maximum number of characters allowed (default: 2000)
+ * @param props.maxLimit - Maximum number of characters allowed (default: 10000)
  * @param props.onChange - Callback function triggered when editor content changes
  * @param props.isError - Whether the component should display in error state
  * @param props.id - Custom ID for the editor element
@@ -81,7 +81,7 @@ import "./styles.css";
  * converted to HTML using the provided utility functions.
  */
 function RichText(props) {
-    const { name, hiddenButtons, imageConfig, defaultValue = "[]", enforceCharacterLimit = false, onChangeCharactersCount, baseErrorMessage, maxLimit = 10, onChange, isError: baseIsError, label, showAsterisk, id, } = props;
+    const { name, hiddenButtons, imageConfig, defaultValue = "[]", enforceCharacterLimit = false, onChangeCharactersCount, baseErrorMessage, maxLimit = 10000, onChange, isError: baseIsError, label, showAsterisk, id, } = props;
     const editor = useMemo(() => withHistory(withReact(createEditor())), []);
     const { fieldErrors } = useForm();
     function getDefaultNodes() {
@@ -136,7 +136,7 @@ function RichText(props) {
     function buttonIsNotHidden(format) {
         return !hiddenButtons?.includes(format);
     }
-    return (_jsxs(FieldWrapper, { children: [label && (_jsx(FieldLabel, { showAsterisk: showAsterisk, children: label })), _jsxs(Slate, { editor: editor, initialValue: getDefaultNodes(), onChange: handleChange, onValueChange: handleChange, children: [_jsxs("div", { className: className, children: [_jsxs(Toolbar, { children: [buttonIsNotHidden("headingOne") && (_jsx(BlockButton, { format: "headingOne", icon: Heading1 })), buttonIsNotHidden("headingTwo") && (_jsx(BlockButton, { format: "headingTwo", icon: Heading2 })), buttonIsNotHidden("blockQuote") && (_jsx(BlockButton, { format: "blockQuote", icon: Quote })), buttonIsNotHidden("bold") && (_jsx(MarkButton, { format: "bold", icon: Bold })), buttonIsNotHidden("italic") && (_jsx(MarkButton, { format: "italic", icon: Italic })), buttonIsNotHidden("underline") && (_jsx(MarkButton, { format: "underline", icon: Underline })), buttonIsNotHidden("code") && (_jsx(MarkButton, { format: "code", icon: Code })), buttonIsNotHidden("left") && (_jsx(BlockButton, { format: "left", icon: AlignLeft })), buttonIsNotHidden("right") && (_jsx(BlockButton, { format: "right", icon: AlignRight })), buttonIsNotHidden("center") && (_jsx(BlockButton, { format: "center", icon: AlignCenter })), buttonIsNotHidden("justify") && (_jsx(BlockButton, { format: "justify", icon: AlignJustify })), imageConfig && buttonIsNotHidden("image") && (_jsx(InsertImage, { ...imageConfig }))] }), _jsx(Editable, { className: "editorContainer", renderElement: renderElement, renderLeaf: renderLeaf, spellCheck: true, ref: ref, id: inputId, onFocus: () => setOnFocus(true), onBlur: () => setOnFocus(false), onKeyDown: (event) => {
+    return (_jsxs(FieldWrapper, { children: [label && _jsx(FieldLabel, { showAsterisk: showAsterisk, children: label }), _jsxs(Slate, { editor: editor, initialValue: getDefaultNodes(), onChange: handleChange, onValueChange: handleChange, children: [_jsxs("div", { className: className, children: [_jsxs(Toolbar, { children: [buttonIsNotHidden("headingOne") && (_jsx(BlockButton, { format: "headingOne", icon: Heading1 })), buttonIsNotHidden("headingTwo") && (_jsx(BlockButton, { format: "headingTwo", icon: Heading2 })), buttonIsNotHidden("blockQuote") && (_jsx(BlockButton, { format: "blockQuote", icon: Quote })), buttonIsNotHidden("bold") && (_jsx(MarkButton, { format: "bold", icon: Bold })), buttonIsNotHidden("italic") && (_jsx(MarkButton, { format: "italic", icon: Italic })), buttonIsNotHidden("underline") && (_jsx(MarkButton, { format: "underline", icon: Underline })), buttonIsNotHidden("code") && (_jsx(MarkButton, { format: "code", icon: Code })), buttonIsNotHidden("left") && (_jsx(BlockButton, { format: "left", icon: AlignLeft })), buttonIsNotHidden("right") && (_jsx(BlockButton, { format: "right", icon: AlignRight })), buttonIsNotHidden("center") && (_jsx(BlockButton, { format: "center", icon: AlignCenter })), buttonIsNotHidden("justify") && (_jsx(BlockButton, { format: "justify", icon: AlignJustify })), imageConfig && buttonIsNotHidden("image") && (_jsx(InsertImage, { ...imageConfig }))] }), _jsx(Editable, { className: "editorContainer", renderElement: renderElement, renderLeaf: renderLeaf, spellCheck: true, ref: ref, id: inputId, onFocus: () => setOnFocus(true), onBlur: () => setOnFocus(false), onKeyDown: (event) => {
                                     for (const hotkey in hotKeys) {
                                         if (isHotkey(hotkey, event)) {
                                             event.preventDefault();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arkyn/components",
-  "version": "3.0.1-beta.95",
+  "version": "3.0.1-beta.99",
   "main": "./dist/bundle.js",
   "module": "./dist/bundle.js",
   "types": "./dist/index.d.ts",