@arkyn/components 3.0.1-beta.1 → 3.0.1-beta.100

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

@@ -0,0 +1,64 @@
+import { HTMLAttributes, JSX } from "react";
+import "./styles.css";
+/**
+ * @typedef {Object} AlertContainerProps
+ * @property {"success" | "danger" | "warning" | "info"} schema - The visual style schema for the alert (success: green, danger: red, warning: yellow, info: blue)
+ * @property {ReactNode} children - The content to be displayed inside the alert container
+ * @property {string} [className] - Optional additional CSS classes to apply to the container
+ * @extends {HTMLAttributes<HTMLDivElement>}
+ */
+type AlertContainerProps = {
+    schema: "success" | "danger" | "warning" | "info";
+} & HTMLAttributes<HTMLDivElement>;
+/**
+ * Custom hook to access the AlertContainer context
+ *
+ * @returns {AlertContainerProps} The current alert container properties including schema and HTML attributes
+ *
+ * @example
+ * function CustomAlertContent() {
+ *   const { schema } = useAlertContainer();
+ *   return <div>Current schema: {schema}</div>;
+ * }
+ */
+declare function useAlertContainer(): AlertContainerProps;
+/**
+ * AlertContainer - A flexible alert component that displays messages with different visual styles
+ *
+ * This component automatically adjusts its layout based on whether an AlertTitle component
+ * is present among its children. When AlertTitle is detected, the content is left-aligned;
+ * otherwise, it's centered.
+ *
+ * @component
+ * @memberof Alert
+ *
+ * @param {AlertContainerProps} props - Component properties
+ * @param {"success" | "danger" | "warning" | "info"} props.schema - Determines the visual styling and semantic meaning of the alert
+ * @param {ReactNode} props.children - Content to be rendered inside the alert, can include AlertTitle and other components
+ * @param {string} [props.className] - Additional CSS classes to customize the alert appearance
+ *
+ * @returns {JSX.Element} A styled alert container with context provider for child components
+ *
+ * @requires react - For createContext, useContext, ReactNode
+ *
+ * @example
+ * // Basic usage
+ * <AlertContainer schema="success">
+ *  {children}
+ * </AlertContainer>
+ *
+ * @example
+ * // Complete alert example
+ * <AlertContainer schema="success">
+ *  <AlertIcon />
+ *  <AlertContent>
+ *    <AlertTitle>Success!</AlertTitle>
+ *    <AlertDescription>
+ *      You are premium user now!
+ *    </AlertDescription>
+ *  </AlertContent>
+ * </AlertContainer>
+ */
+declare function AlertContainer(props: AlertContainerProps): JSX.Element;
+export { AlertContainer, useAlertContainer };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/alert/alertContainer/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,cAAc,EACd,GAAG,EAGJ,MAAM,OAAO,CAAC;AAEf,OAAO,cAAc,CAAC;AAEtB;;;;;;GAMG;AACH,KAAK,mBAAmB,GAAG;IACzB,MAAM,EAAE,SAAS,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,CAAC;CACnD,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAQnC;;;;;;;;;;GAUG;AACH,iBAAS,iBAAiB,IAAI,mBAAmB,CAEhD;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AAEH,iBAAS,cAAc,CAAC,KAAK,EAAE,mBAAmB,GAAG,GAAG,CAAC,OAAO,CAuC/D;AAED,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAE,CAAC"}

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

@@ -0,0 +1,91 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, } from "react";
+import { AlertTitle } from "../alertTitle";
+import "./styles.css";
+/**
+ * Context for sharing alert container properties with child components
+ * @internal
+ */
+const AlertContainerContext = createContext({});
+/**
+ * Custom hook to access the AlertContainer context
+ *
+ * @returns {AlertContainerProps} The current alert container properties including schema and HTML attributes
+ *
+ * @example
+ * function CustomAlertContent() {
+ *   const { schema } = useAlertContainer();
+ *   return <div>Current schema: {schema}</div>;
+ * }
+ */
+function useAlertContainer() {
+    return useContext(AlertContainerContext);
+}
+/**
+ * AlertContainer - A flexible alert component that displays messages with different visual styles
+ *
+ * This component automatically adjusts its layout based on whether an AlertTitle component
+ * is present among its children. When AlertTitle is detected, the content is left-aligned;
+ * otherwise, it's centered.
+ *
+ * @component
+ * @memberof Alert
+ *
+ * @param {AlertContainerProps} props - Component properties
+ * @param {"success" | "danger" | "warning" | "info"} props.schema - Determines the visual styling and semantic meaning of the alert
+ * @param {ReactNode} props.children - Content to be rendered inside the alert, can include AlertTitle and other components
+ * @param {string} [props.className] - Additional CSS classes to customize the alert appearance
+ *
+ * @returns {JSX.Element} A styled alert container with context provider for child components
+ *
+ * @requires react - For createContext, useContext, ReactNode
+ *
+ * @example
+ * // Basic usage
+ * <AlertContainer schema="success">
+ *  {children}
+ * </AlertContainer>
+ *
+ * @example
+ * // Complete alert example
+ * <AlertContainer schema="success">
+ *  <AlertIcon />
+ *  <AlertContent>
+ *    <AlertTitle>Success!</AlertTitle>
+ *    <AlertDescription>
+ *      You are premium user now!
+ *    </AlertDescription>
+ *  </AlertContent>
+ * </AlertContainer>
+ */
+function AlertContainer(props) {
+    const { schema, children, className: baseClassName, ...rest } = props;
+    const hasAlertTitle = (children) => {
+        let found = false;
+        const searchForAlertTitle = (nodes) => {
+            if (Array.isArray(nodes)) {
+                nodes.forEach(searchForAlertTitle);
+            }
+            else if (nodes && typeof nodes === "object" && "type" in nodes) {
+                if (nodes.type === AlertTitle) {
+                    found = true;
+                }
+                else if (nodes.props &&
+                    typeof nodes.props === "object" &&
+                    nodes.props !== null &&
+                    "children" in nodes.props) {
+                    searchForAlertTitle(nodes.props.children);
+                }
+            }
+        };
+        searchForAlertTitle(children);
+        return found;
+    };
+    const shouldAlignCenter = !hasAlertTitle(children);
+    const finalClassName = shouldAlignCenter
+        ? "nonExistsAlertTitle"
+        : "existsAlertTitle";
+    const className = `arkynAlertContainer ${schema} ${finalClassName} ${baseClassName}`;
+    return (_jsx(AlertContainerContext.Provider, { value: props, children: _jsx("div", { className: className.trim(), ...rest, children: children }) }));
+}
+export { AlertContainer, useAlertContainer };

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

@@ -0,0 +1,49 @@
+import { HTMLAttributes, JSX } from "react";
+import "./styles.css";
+/**
+ * @typedef {Object} AlertContentProps
+ * @extends {HTMLAttributes<HTMLDivElement>}
+ * @description Props for the AlertContent component, extending standard HTML div attributes.
+ */
+type AlertContentProps = HTMLAttributes<HTMLDivElement>;
+/**
+ * AlertContent component that renders the main content area of an alert.
+ *
+ * @component
+ * @memberof Alert
+ *
+ * @description
+ * This component serves as a container for the main content within an Alert component.
+ * Supports all standard HTML div attributes for maximum flexibility.
+ *
+ * @param {AlertContentProps} props - Component props extending HTMLDivElement attributes
+ * @param {string} [props.className] - Additional CSS classes to apply to the content container
+ * @param {React.ReactNode} [props.children] - Content to be displayed inside the alert
+ *
+ * @returns {JSX.Element} A div element with the alert content styling
+ *
+ * @requires react
+ *
+ * @example
+ * // Basic usage
+ * <AlertContainer schema="success">
+ *  <AlertContent>
+ *   {children}
+ *  </AlertContent>
+ * </AlertContainer>
+ *
+ * @example
+ * // Complete alert example
+ * <AlertContainer schema="success">
+ *  <AlertIcon />
+ *  <AlertContent>
+ *    <AlertTitle>Success!</AlertTitle>
+ *    <AlertDescription>
+ *      You are premium user now!
+ *    </AlertDescription>
+ *  </AlertContent>
+ * </AlertContainer>
+ */
+declare function AlertContent(props: AlertContentProps): JSX.Element;
+export { AlertContent };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/alert/alertContent/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,cAAc,CAAC;AAEtB;;;;GAIG;AACH,KAAK,iBAAiB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAExD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AAEH,iBAAS,YAAY,CAAC,KAAK,EAAE,iBAAiB,GAAG,GAAG,CAAC,OAAO,CAK3D;AAED,OAAO,EAAE,YAAY,EAAE,CAAC"}

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

@@ -0,0 +1,46 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "./styles.css";
+/**
+ * AlertContent component that renders the main content area of an alert.
+ *
+ * @component
+ * @memberof Alert
+ *
+ * @description
+ * This component serves as a container for the main content within an Alert component.
+ * Supports all standard HTML div attributes for maximum flexibility.
+ *
+ * @param {AlertContentProps} props - Component props extending HTMLDivElement attributes
+ * @param {string} [props.className] - Additional CSS classes to apply to the content container
+ * @param {React.ReactNode} [props.children] - Content to be displayed inside the alert
+ *
+ * @returns {JSX.Element} A div element with the alert content styling
+ *
+ * @requires react
+ *
+ * @example
+ * // Basic usage
+ * <AlertContainer schema="success">
+ *  <AlertContent>
+ *   {children}
+ *  </AlertContent>
+ * </AlertContainer>
+ *
+ * @example
+ * // Complete alert example
+ * <AlertContainer schema="success">
+ *  <AlertIcon />
+ *  <AlertContent>
+ *    <AlertTitle>Success!</AlertTitle>
+ *    <AlertDescription>
+ *      You are premium user now!
+ *    </AlertDescription>
+ *  </AlertContent>
+ * </AlertContainer>
+ */
+function AlertContent(props) {
+    const { className: baseClassName, ...rest } = props;
+    const className = `arkynAlertContent ${baseClassName}`;
+    return _jsx("div", { className: className.trim(), ...rest });
+}
+export { AlertContent };

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

@@ -0,0 +1,51 @@
+import { HTMLAttributes, JSX } from "react";
+import "./styles.css";
+/**
+ * Props for the AlertDescription component.
+ * @typedef {Object} AlertDescriptionProps
+ * @extends {HTMLAttributes<HTMLDivElement>}
+ */
+type AlertDescriptionProps = HTMLAttributes<HTMLDivElement>;
+/**
+ * AlertDescription component displays descriptive text content within an Alert component.
+ *
+ * This component provides a semantic wrapper for alert descriptions with appropriate styling
+ * through the `arkynAlertDescription` CSS class. It extends all standard HTML div attributes,
+ * making it flexible for various content and accessibility requirements.
+ *
+ * @component
+ * @memberof Alert
+ *
+ * @param {AlertDescriptionProps} props - Component props extending HTML div attributes
+ * @param {string} [props.className] - Additional CSS classes to apply to the description
+ * @param {React.ReactNode} [props.children] - The description content to display
+ *
+ * @returns {JSX.Element} A div element with alert description styling
+ *
+ * @requires react
+ *
+ * @example
+ * // Basic usage
+ * <AlertContainer schema="success">
+ *  <AlertContent>
+ *    <AlertDescription>
+ *      Your are premium user now!
+ *    </AlertDescription>
+ *  </AlertContent>
+ * </AlertContainer>
+ *
+ * @example
+ * // Complete alert example
+ * <AlertContainer schema="success">
+ *  <AlertIcon />
+ *  <AlertContent>
+ *    <AlertTitle>Success!</AlertTitle>
+ *    <AlertDescription>
+ *      You are premium user now!
+ *    </AlertDescription>
+ *  </AlertContent>
+ * </AlertContainer>
+ */
+declare function AlertDescription(props: AlertDescriptionProps): JSX.Element;
+export { AlertDescription };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/alert/alertDescription/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,cAAc,CAAC;AAEtB;;;;GAIG;AACH,KAAK,qBAAqB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAE5D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AAEH,iBAAS,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,GAAG,GAAG,CAAC,OAAO,CAKnE;AAED,OAAO,EAAE,gBAAgB,EAAE,CAAC"}

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

@@ -0,0 +1,48 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "./styles.css";
+/**
+ * AlertDescription component displays descriptive text content within an Alert component.
+ *
+ * This component provides a semantic wrapper for alert descriptions with appropriate styling
+ * through the `arkynAlertDescription` CSS class. It extends all standard HTML div attributes,
+ * making it flexible for various content and accessibility requirements.
+ *
+ * @component
+ * @memberof Alert
+ *
+ * @param {AlertDescriptionProps} props - Component props extending HTML div attributes
+ * @param {string} [props.className] - Additional CSS classes to apply to the description
+ * @param {React.ReactNode} [props.children] - The description content to display
+ *
+ * @returns {JSX.Element} A div element with alert description styling
+ *
+ * @requires react
+ *
+ * @example
+ * // Basic usage
+ * <AlertContainer schema="success">
+ *  <AlertContent>
+ *    <AlertDescription>
+ *      Your are premium user now!
+ *    </AlertDescription>
+ *  </AlertContent>
+ * </AlertContainer>
+ *
+ * @example
+ * // Complete alert example
+ * <AlertContainer schema="success">
+ *  <AlertIcon />
+ *  <AlertContent>
+ *    <AlertTitle>Success!</AlertTitle>
+ *    <AlertDescription>
+ *      You are premium user now!
+ *    </AlertDescription>
+ *  </AlertContent>
+ * </AlertContainer>
+ */
+function AlertDescription(props) {
+    const { className: baseClassName, ...rest } = props;
+    const className = `arkynAlertDescription ${baseClassName}`;
+    return _jsx("div", { className: className.trim(), ...rest });
+}
+export { AlertDescription };

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

@@ -0,0 +1,54 @@
+import { LucideProps } from "lucide-react";
+import { JSX } from "react";
+import "./styles.css";
+/**
+ * Props for the AlertIcon component.
+ * Extends all props from Lucide's icon components.
+ *
+ * @typedef {LucideProps} AlertIconProps
+ */
+type AlertIconProps = LucideProps;
+/**
+ * AlertIcon component that renders different icons based on the alert schema.
+ *
+ * @component
+ * @memberof Alert
+ *
+ * @description
+ * This component automatically selects and renders the appropriate icon based on the
+ * alert schema from the AlertContainer context. It supports four schemas:
+ * - success: Renders a CheckCircle2 icon
+ * - danger: Renders an XCircle icon
+ * - warning: Renders an AlertTriangle icon
+ * - info: Renders an Info icon
+ *
+ * @param {AlertIconProps} props - Component props extending LucideProps
+ * @param {string} [props.className] - Additional CSS class names to apply to the icon
+ *
+ * @returns {JSX.Element} The rendered icon component based on the alert schema
+ *
+ * @requires lucide-react - For icon components (CheckCircle2, XCircle, AlertTriangle, Info)
+ * @requires useAlertContainer - Hook to access the alert schema from context
+ *
+ * @example
+ * // This component is used internally within an Alert component
+ * // and should not be used standalone as it depends on AlertContainer context
+ * <AlertContainer schema="success">
+ *   <AlertIcon />
+ * </AlertContainer>
+ *
+ * @example
+ * // Complete alert example
+ * <AlertContainer schema="success">
+ *  <AlertIcon />
+ *  <AlertContent>
+ *    <AlertTitle>Success!</AlertTitle>
+ *    <AlertDescription>
+ *      You are premium user now!
+ *    </AlertDescription>
+ *  </AlertContent>
+ * </AlertContainer>
+ */
+declare function AlertIcon(props: AlertIconProps): JSX.Element;
+export { AlertIcon };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/alert/alertIcon/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,WAAW,EAEZ,MAAM,cAAc,CAAC;AAEtB,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,cAAc,CAAC;AAEtB;;;;;GAKG;AACH,KAAK,cAAc,GAAG,WAAW,CAAC;AAElC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,iBAAS,SAAS,CAAC,KAAK,EAAE,cAAc,GAAG,GAAG,CAAC,OAAO,CAgBrD;AAED,OAAO,EAAE,SAAS,EAAE,CAAC"}

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

@@ -0,0 +1,61 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { AlertTriangle, CheckCircle2, Info, XCircle, } from "lucide-react";
+import { useAlertContainer } from "../alertContainer";
+import "./styles.css";
+/**
+ * AlertIcon component that renders different icons based on the alert schema.
+ *
+ * @component
+ * @memberof Alert
+ *
+ * @description
+ * This component automatically selects and renders the appropriate icon based on the
+ * alert schema from the AlertContainer context. It supports four schemas:
+ * - success: Renders a CheckCircle2 icon
+ * - danger: Renders an XCircle icon
+ * - warning: Renders an AlertTriangle icon
+ * - info: Renders an Info icon
+ *
+ * @param {AlertIconProps} props - Component props extending LucideProps
+ * @param {string} [props.className] - Additional CSS class names to apply to the icon
+ *
+ * @returns {JSX.Element} The rendered icon component based on the alert schema
+ *
+ * @requires lucide-react - For icon components (CheckCircle2, XCircle, AlertTriangle, Info)
+ * @requires useAlertContainer - Hook to access the alert schema from context
+ *
+ * @example
+ * // This component is used internally within an Alert component
+ * // and should not be used standalone as it depends on AlertContainer context
+ * <AlertContainer schema="success">
+ *   <AlertIcon />
+ * </AlertContainer>
+ *
+ * @example
+ * // Complete alert example
+ * <AlertContainer schema="success">
+ *  <AlertIcon />
+ *  <AlertContent>
+ *    <AlertTitle>Success!</AlertTitle>
+ *    <AlertDescription>
+ *      You are premium user now!
+ *    </AlertDescription>
+ *  </AlertContent>
+ * </AlertContainer>
+ */
+function AlertIcon(props) {
+    const { className: baseClassName, ...rest } = props;
+    const { schema } = useAlertContainer();
+    const className = `arkynAlertIcon ${schema} ${baseClassName}`;
+    switch (schema) {
+        case "success":
+            return _jsx(CheckCircle2, { className: className, ...rest });
+        case "danger":
+            return _jsx(XCircle, { className: className, ...rest });
+        case "warning":
+            return _jsx(AlertTriangle, { className: className, ...rest });
+        case "info":
+            return _jsx(Info, { className: className, ...rest });
+    }
+}
+export { AlertIcon };

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

@@ -0,0 +1,48 @@
+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 - Displays the title section of an alert message.
+ *
+ * This component renders a styled title for alert components, providing semantic structure
+ * and consistent styling across the application.
+ *
+ * @component
+ * @memberof Alert
+ *
+ * @param {AlertTitleProps} props - Component props extending HTML div attributes
+ *
+ * @returns {JSX.Element} A div element with alert title styling
+ *
+ * @requires react
+ *
+ * @example
+ * // Basic usage
+ * <AlertContainer schema="success">
+ *   <AlertTitle>Success!</AlertTitle>
+ *   <AlertDescription>Your changes have been saved.</AlertDescription>
+ * </AlertContainer>
+ *
+ * @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): JSX.Element;
+export { AlertTitle };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,42 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "./styles.css";
+/**
+ * AlertTitle component - Displays the title section of an alert message.
+ *
+ * This component renders a styled title for alert components, providing semantic structure
+ * and consistent styling across the application.
+ *
+ * @component
+ * @memberof Alert
+ *
+ * @param {AlertTitleProps} props - Component props extending HTML div attributes
+ *
+ * @returns {JSX.Element} A div element with alert title styling
+ *
+ * @requires react
+ *
+ * @example
+ * // Basic usage
+ * <AlertContainer schema="success">
+ *   <AlertTitle>Success!</AlertTitle>
+ *   <AlertDescription>Your changes have been saved.</AlertDescription>
+ * </AlertContainer>
+ *
+ * @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;
+    const className = `arkynAlertTitle ${baseClassName}`;
+    return _jsx("div", { className: className.trim(), ...rest });
+}
+export { AlertTitle };

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

@@ -0,0 +1,59 @@
+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;
+    onPlayAudio?: (props: AudioInformationProps) => void;
+    onPauseAudio?: (props: AudioInformationProps) => void;
+};
+/**
+ * AudioPlayer component
+ *
+ * A customizable audio player with play/pause controls, progress slider, and time display.
+ * Provides callbacks for play and pause events with detailed audio information.
+ *
+ * @component
+ *
+ * @param {AudioPlayerProps} props - The component props
+ *
+ * @returns {JSX.Element} The rendered audio player component
+ *
+ * @requires lucide-react - For Play and Pause icons
+ * @requires useSlider - For slider state management
+ * @requires slider - For the progress slider component
+ *
+ * @example
+ * // Basic usage
+ * <AudioPlayer src="https://example.com/audio.mp3" />
+ *
+ * @example
+ * // With callbacks
+ * <AudioPlayer
+ *   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): JSX.Element;
+export { AudioPlayer };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"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"}