@arkyn/components 3.0.1-beta.12 → 3.0.1-beta.13

package/dist/documentation/src/components/examples.switch.d.ts

@@ -0,0 +1,3 @@
+declare function SwitchExamples(): import("react/jsx-runtime").JSX.Element;
+export { SwitchExamples };
+//# sourceMappingURL=examples.switch.d.ts.map

package/dist/documentation/src/components/examples.switch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"examples.switch.d.ts","sourceRoot":"","sources":["../../../../documentation/src/components/examples.switch.tsx"],"names":[],"mappings":"AAMA,iBAAS,cAAc,4CA2KtB;AAED,OAAO,EAAE,cAAc,EAAE,CAAC"}

package/dist/documentation/src/components/examples.switch.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Switch } from "@components";
+import { useState } from "react";
+import { Box } from "../ui/box";
+import { Row } from "../ui/row";
+function SwitchExamples() {
+    const [isNotificationsEnabled, setIsNotificationsEnabled] = useState(false);
+    const [isDarkMode, setIsDarkMode] = useState(true);
+    const [isAutoSave, setIsAutoSave] = useState(false);
+    const [isPremiumEnabled, setIsPremiumEnabled] = useState(true);
+    return (_jsxs(Box, { title: "Switch", children: [_jsxs(Row, { children: [_jsx(Switch, { name: "basic1", label: "Enable notifications" }), _jsx(Switch, { name: "basic2", label: "Marketing emails", defaultChecked: true }), _jsx(Switch, { name: "basic3", label: "Auto-save documents" }), _jsx(Switch, { name: "basic4", label: "Disabled switch", disabled: true })] }), _jsxs(Row, { children: [_jsx(Switch, { name: "size1", label: "Small (sm)", size: "sm" }), _jsx(Switch, { name: "size2", label: "Medium (md)", size: "md" }), _jsx(Switch, { name: "size3", label: "Large (lg) - default", size: "lg" })] }), _jsxs(Row, { children: [_jsx(Switch, { name: "controlled1", label: "Controlled notifications", checked: isNotificationsEnabled, onCheck: (value) => setIsNotificationsEnabled(!!value) }), _jsx(Switch, { name: "controlled2", label: "Dark mode", checked: isDarkMode, value: "dark", unCheckedValue: "light", onCheck: (value) => setIsDarkMode(value === "dark"), size: "md" })] }), _jsxs(Row, { children: [_jsx(Switch, { name: "theme", label: "Theme preference", value: "dark_theme", unCheckedValue: "light_theme", onCheck: (value) => console.log("Theme:", value) }), _jsx(Switch, { name: "subscription", label: "Newsletter subscription", value: "subscribed", unCheckedValue: "unsubscribed", defaultChecked: true, size: "sm" })] }), _jsxs(Row, { children: [_jsx(Switch, { name: "autoSave", label: "Auto-save every 5 minutes", checked: isAutoSave, onCheck: (value) => {
+                            setIsAutoSave(!!value);
+                            console.log("Auto-save:", value ? "enabled" : "disabled");
+                        }, value: "enabled", unCheckedValue: "disabled" }), _jsx(Switch, { name: "premium", label: "Premium features", checked: isPremiumEnabled, onCheck: (value) => setIsPremiumEnabled(!!value), className: "premium-switch", size: "lg" })] }), _jsxs(Row, { children: [_jsx(Switch, { name: "highContrast", label: "High contrast mode", size: "lg", value: "high_contrast", unCheckedValue: "normal", onCheck: (value) => console.log("Accessibility:", value) }), _jsx(Switch, { name: "maintenance", label: "Maintenance mode", value: "maintenance_on", unCheckedValue: "maintenance_off", disabled: !isPremiumEnabled, onCheck: (value) => console.log("Maintenance:", value) })] }), _jsxs(Row, { children: [_jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [_jsx("span", { children: "Sound effects:" }), _jsx(Switch, { name: "soundEffects", value: "on", unCheckedValue: "off", size: "sm", onCheck: (value) => console.log("Sound:", value) })] }), _jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [_jsx("span", { children: "Background music:" }), _jsx(Switch, { name: "backgroundMusic", value: "enabled", unCheckedValue: "disabled", defaultChecked: true, size: "md", onCheck: (value) => console.log("Music:", value) })] })] }), _jsx(Row, { children: _jsxs("div", { style: {
+                        padding: "16px",
+                        border: "1px solid #e2e8f0",
+                        borderRadius: "8px",
+                    }, children: [_jsx("h4", { style: { margin: "0 0 12px 0" }, children: "Settings Panel" }), _jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "12px" }, children: [_jsx(Switch, { name: "privacy1", label: "Public profile", size: "sm", value: "public", unCheckedValue: "private", onCheck: (value) => console.log("Profile visibility:", value) }), _jsx(Switch, { name: "privacy2", label: "Show online status", size: "sm", defaultChecked: true, onCheck: (value) => console.log("Online status:", value) }), _jsx(Switch, { name: "privacy3", label: "Allow direct messages", size: "sm", value: "allowed", unCheckedValue: "blocked", onCheck: (value) => console.log("Direct messages:", value) })] })] }) })] }));
+}
+export { SwitchExamples };

package/dist/documentation/src/components/examples.tab.d.ts

@@ -0,0 +1,3 @@
+declare function TabExamples(): import("react/jsx-runtime").JSX.Element;
+export { TabExamples };
+//# sourceMappingURL=examples.tab.d.ts.map

package/dist/documentation/src/components/examples.tab.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"examples.tab.d.ts","sourceRoot":"","sources":["../../../../documentation/src/components/examples.tab.tsx"],"names":[],"mappings":"AAGA,iBAAS,WAAW,4CA8BnB;AAED,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/dist/documentation/src/components/examples.tab.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TabButton, TabContainer } from "@components";
+import { Box } from "../ui/box";
+function TabExamples() {
+    return (_jsxs(Box, { title: "Tab", children: [_jsxs(TabContainer, { children: [_jsx(TabButton, { value: "item-1", children: "Item 1" }), _jsx(TabButton, { value: "item-2", children: "Item 2" }), _jsx(TabButton, { value: "item-3", children: "Item 3" })] }), _jsxs(TabContainer, { defaultValue: "item-3", children: [_jsx(TabButton, { value: "item-1", children: "Item 1" }), _jsx(TabButton, { value: "item-2", children: "Item 2" }), _jsx(TabButton, { value: "item-3", children: "Item 3" })] }), _jsxs(TabContainer, { disabled: true, children: [_jsx(TabButton, { value: "item-1", children: "Item 1" }), _jsx(TabButton, { value: "item-2", children: "Item 2" }), _jsx(TabButton, { value: "item-3", children: "Item 3" })] }), _jsxs(TabContainer, { children: [_jsx(TabButton, { value: "item-1", children: "Item 1" }), _jsx(TabButton, { value: "item-2", children: "Item 2" }), _jsx(TabButton, { value: "item-3", disabled: true, children: "Item 3" })] })] }));
+}
+export { TabExamples };

package/dist/documentation/src/components/examples.texarea.d.ts

@@ -0,0 +1,3 @@
+declare function TextareaExamples(): import("react/jsx-runtime").JSX.Element;
+export { TextareaExamples };
+//# sourceMappingURL=examples.texarea.d.ts.map

package/dist/documentation/src/components/examples.texarea.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"examples.texarea.d.ts","sourceRoot":"","sources":["../../../../documentation/src/components/examples.texarea.tsx"],"names":[],"mappings":"AAKA,iBAAS,gBAAgB,4CAoLxB;AAED,OAAO,EAAE,gBAAgB,EAAE,CAAC"}

package/dist/documentation/src/components/examples.texarea.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Textarea } from "@components";
+import { useState } from "react";
+import { Box } from "../ui/box";
+function TextareaExamples() {
+    const [message, setMessage] = useState("");
+    const [bio, setBio] = useState("");
+    const [feedback, setFeedback] = useState("");
+    const [notes, setNotes] = useState("Some initial notes...");
+    const termsContent = `Terms and Conditions
+
+1. Acceptance of Terms
+By accessing and using this service, you accept and agree to be bound by the terms and provision of this agreement.
+
+2. Use License
+Permission is granted to temporarily download one copy of the materials for personal, non-commercial transitory viewing only.
+
+3. Disclaimer
+The materials on this website are provided on an 'as is' basis. We make no warranties, expressed or implied.`;
+    return (_jsxs(Box, { title: "Textarea", children: [_jsx(Textarea, { name: "basic1", placeholder: "Enter your description...", rows: 3 }), _jsx(Textarea, { name: "basic2", label: "Comments", placeholder: "Share your thoughts...", rows: 3 }), _jsx(Textarea, { name: "size_md", label: "Medium Size (default)", size: "md", variant: "solid", placeholder: "Medium textarea with solid variant", rows: 3 }), _jsx(Textarea, { name: "size_lg", label: "Large Size", size: "lg", variant: "outline", placeholder: "Large textarea with outline variant", rows: 3 }), _jsx(Textarea, { name: "bio_required", label: "Biography", showAsterisk: true, placeholder: "Tell us about yourself (required)", rows: 4 }), _jsx(Textarea, { name: "feedback_error", label: "Feedback", errorMessage: "Please provide your feedback", placeholder: "Your feedback is important to us", rows: 4 }), _jsx(Textarea, { name: "controlled_message", label: "Message", value: message, onChange: (e) => setMessage(e.target.value), placeholder: "Type your message here...", rows: 4, showAsterisk: true }), _jsx(Textarea, { name: "controlled_bio", label: "Professional Bio", value: bio, onChange: (e) => setBio(e.target.value), placeholder: "Describe your professional background...", maxLength: 500, rows: 4 }), _jsx(Textarea, { name: "limited_feedback", label: "Product Review", value: feedback, onChange: (e) => setFeedback(e.target.value), placeholder: "Share your experience (max 300 characters)", maxLength: 300, rows: 5, className: "review-textarea" }), _jsxs("div", { style: { position: "relative" }, children: [_jsx(Textarea, { name: "notes_with_counter", label: "Notes", value: notes, onChange: (e) => setNotes(e.target.value), placeholder: "Enter your notes...", rows: 5, style: { resize: "vertical" } }), _jsxs("div", { style: {
+                            position: "absolute",
+                            bottom: "8px",
+                            right: "12px",
+                            fontSize: "12px",
+                            color: "#666",
+                            background: "white",
+                            padding: "2px 4px",
+                        }, children: [notes.length, " characters"] })] }), _jsx(Textarea, { name: "terms_readonly", label: "Terms and Conditions", value: termsContent, readOnly: true, rows: 8, variant: "outline", style: { fontSize: "14px" } }), _jsx(Textarea, { name: "disabled_field", label: "Disabled Field", value: "This field cannot be edited", disabled: true, placeholder: "This field is disabled", rows: 3 }), _jsx(Textarea, { name: "code_snippet", label: "Code Snippet", placeholder: "Paste your code here...", rows: 6, style: {
+                    fontFamily: "monospace",
+                    fontSize: "14px",
+                    resize: "both",
+                }, variant: "outline" }), _jsx(Textarea, { name: "essay", label: "Essay Response", placeholder: "Write your essay response here...", rows: 6, showAsterisk: true, onChange: (e) => console.log("Essay length:", e.target.value.length) }), _jsx(Textarea, { name: "article_content", label: "Article Content", placeholder: "Write your article content here...", rows: 8, cols: 60, style: { width: "100%", resize: "vertical" }, onChange: (e) => console.log("Article updated:", e.target.value.split("\n").length, "lines") })] }));
+}
+export { TextareaExamples };

package/dist/documentation/src/components/examples.tooltip.d.ts

@@ -0,0 +1,3 @@
+declare function TooltipExamples(): import("react/jsx-runtime").JSX.Element;
+export { TooltipExamples };
+//# sourceMappingURL=examples.tooltip.d.ts.map

package/dist/documentation/src/components/examples.tooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"examples.tooltip.d.ts","sourceRoot":"","sources":["../../../../documentation/src/components/examples.tooltip.tsx"],"names":[],"mappings":"AAIA,iBAAS,eAAe,4CAsCvB;AAED,OAAO,EAAE,eAAe,EAAE,CAAC"}

package/dist/documentation/src/components/examples.tooltip.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Badge, Tooltip } from "@components";
+import { Box } from "../ui/box";
+import { Row } from "../ui/row";
+function TooltipExamples() {
+    return (_jsxs(Box, { title: "Tooltip", children: [_jsxs(Row, { children: [_jsx(Tooltip, { text: "Tooltip on top", orientation: "top", children: _jsx(Badge, { children: "top" }) }), _jsx(Tooltip, { text: "Tooltip on right", orientation: "right", children: _jsx(Badge, { children: "right" }) }), _jsx(Tooltip, { text: "Tooltip on bottom", orientation: "bottom", children: _jsx(Badge, { children: "bottom" }) }), _jsx(Tooltip, { text: "Tooltip on left", orientation: "left", children: _jsx(Badge, { children: "left" }) })] }), _jsx(Row, { children: _jsx(Tooltip, { text: "Tooltip on left", orientation: "left", children: _jsx(Badge, { children: "oh no... the tooltip does not fit on the left" }) }) }), _jsxs(Row, { children: [_jsx(Tooltip, { text: "md tooltip", orientation: "top", size: "md", children: _jsx(Badge, { children: "size - md " }) }), _jsx(Tooltip, { text: "lg tooltip", orientation: "top", children: _jsx(Badge, { children: "size - lg (default)" }) })] })] }));
+}
+export { TooltipExamples };

package/dist/documentation/src/main.d.ts

@@ -0,0 +1,3 @@
+import "../css/reset.css";
+import "../css/variables.css";
+//# sourceMappingURL=main.d.ts.map

package/dist/documentation/src/main.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"main.d.ts","sourceRoot":"","sources":["../../../documentation/src/main.tsx"],"names":[],"mappings":"AAIA,OAAO,kBAAkB,CAAC;AAC1B,OAAO,sBAAsB,CAAC"}

package/dist/documentation/src/main.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { App } from "./app";
+import "../css/reset.css";
+import "../css/variables.css";
+createRoot(document.getElementById("root")).render(_jsx(StrictMode, { children: _jsx(App, {}) }));

package/dist/documentation/src/ui/box.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from "react";
+type BoxProps = {
+    title: string;
+    children: ReactNode;
+};
+declare function Box(props: BoxProps): import("react/jsx-runtime").JSX.Element;
+export { Box };
+//# sourceMappingURL=box.d.ts.map

package/dist/documentation/src/ui/box.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"box.d.ts","sourceRoot":"","sources":["../../../../documentation/src/ui/box.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,KAAK,QAAQ,GAAG;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,iBAAS,GAAG,CAAC,KAAK,EAAE,QAAQ,2CAO3B;AAED,OAAO,EAAE,GAAG,EAAE,CAAC"}

package/dist/documentation/src/ui/box.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function Box(props) {
+    return (_jsxs("div", { className: "box", children: [_jsx("strong", { children: props.title }), props.children] }));
+}
+export { Box };

package/dist/documentation/src/ui/row.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from "react";
+type RowProps = {
+    children: ReactNode;
+};
+declare function Row(props: RowProps): import("react/jsx-runtime").JSX.Element;
+export { Row };
+//# sourceMappingURL=row.d.ts.map

package/dist/documentation/src/ui/row.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"row.d.ts","sourceRoot":"","sources":["../../../../documentation/src/ui/row.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,KAAK,QAAQ,GAAG;IACd,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,iBAAS,GAAG,CAAC,KAAK,EAAE,QAAQ,2CAE3B;AAED,OAAO,EAAE,GAAG,EAAE,CAAC"}

package/dist/documentation/src/ui/row.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+function Row(props) {
+    return _jsx("div", { className: "row", children: props.children });
+}
+export { Row };

package/dist/documentation/vite.config.d.ts

@@ -0,0 +1,3 @@
+declare const _default: import("vite").UserConfig;
+export default _default;
+//# sourceMappingURL=vite.config.d.ts.map

package/dist/documentation/vite.config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"vite.config.d.ts","sourceRoot":"","sources":["../../documentation/vite.config.ts"],"names":[],"mappings":";AAIA,wBAQG"}

package/dist/documentation/vite.config.js

@@ -0,0 +1,12 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import { resolve } from "path";
+export default defineConfig({
+    root: __dirname,
+    plugins: [react()],
+    resolve: {
+        alias: {
+            "@components": resolve(__dirname, "../src"),
+        },
+    },
+});

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

@@ -0,0 +1,44 @@
+import { HTMLAttributes } from "react";
+import "./styles.css";
+type AlertContainerProps = {
+    schema: "success" | "danger" | "warning" | "info";
+} & HTMLAttributes<HTMLDivElement>;
+declare function useAlertContainer(): AlertContainerProps;
+/**
+ * AlertContainer component - used to display alert messages with different schemas
+ *
+ * @param props - AlertContainer component properties
+ * @param props.schema - Alert color scheme and semantic meaning: "success" | "danger" | "warning" | "info"
+ *
+ * **...Other valid HTML properties for div**
+ *
+ * @returns AlertContainer JSX element with context provider
+ *
+ * @example
+ * ```tsx
+ * // Basic alert
+ * <AlertContainer schema="info">
+ *   Alert message content
+ * </AlertContainer>
+ *
+ * // Success alert
+ * <AlertContainer schema="success">
+ *   Operation completed successfully!
+ * </AlertContainer>
+ *
+ * // Alert with title
+ * <AlertContainer schema="warning">
+ *   <AlertTitle>Warning</AlertTitle>
+ *   Please check your input data.
+ * </AlertContainer>
+ *
+ * // Danger alert
+ * <AlertContainer schema="danger">
+ *   <AlertTitle>Error</AlertTitle>
+ *   Something went wrong. Please try again.
+ * </AlertContainer>
+ * ```
+ */
+declare function AlertContainer(props: AlertContainerProps): import("react/jsx-runtime").JSX.Element;
+export { AlertContainer, useAlertContainer };
+//# sourceMappingURL=index.d.ts.map

package/dist/src/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,EAAiB,cAAc,EAAyB,MAAM,OAAO,CAAC;AAE7E,OAAO,cAAc,CAAC;AAEtB,KAAK,mBAAmB,GAAG;IACzB,MAAM,EAAE,SAAS,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,CAAC;CACnD,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAInC,iBAAS,iBAAiB,wBAEzB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AAEH,iBAAS,cAAc,CAAC,KAAK,EAAE,mBAAmB,2CAkCjD;AAED,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAE,CAAC"}

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

@@ -0,0 +1,71 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+import { AlertTitle } from "../alertTitle";
+import "./styles.css";
+const AlertContainerContext = createContext({});
+function useAlertContainer() {
+    return useContext(AlertContainerContext);
+}
+/**
+ * AlertContainer component - used to display alert messages with different schemas
+ *
+ * @param props - AlertContainer component properties
+ * @param props.schema - Alert color scheme and semantic meaning: "success" | "danger" | "warning" | "info"
+ *
+ * **...Other valid HTML properties for div**
+ *
+ * @returns AlertContainer JSX element with context provider
+ *
+ * @example
+ * ```tsx
+ * // Basic alert
+ * <AlertContainer schema="info">
+ *   Alert message content
+ * </AlertContainer>
+ *
+ * // Success alert
+ * <AlertContainer schema="success">
+ *   Operation completed successfully!
+ * </AlertContainer>
+ *
+ * // Alert with title
+ * <AlertContainer schema="warning">
+ *   <AlertTitle>Warning</AlertTitle>
+ *   Please check your input data.
+ * </AlertContainer>
+ *
+ * // Danger alert
+ * <AlertContainer schema="danger">
+ *   <AlertTitle>Error</AlertTitle>
+ *   Something went wrong. Please try again.
+ * </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 && nodes.props.children) {
+                    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/src/components/alert/alertContent/index.d.ts

@@ -0,0 +1,45 @@
+import { HTMLAttributes } from "react";
+import "./styles.css";
+type AlertContentProps = HTMLAttributes<HTMLDivElement>;
+/**
+ * AlertContent component - used to wrap and style the main content area of alerts
+ *
+ * @param props - AlertContent component properties
+ *
+ * **...Other valid HTML properties for div**
+ *
+ * @returns AlertContent JSX element
+ *
+ * @example
+ * ```tsx
+ * // Basic alert content
+ * <AlertContainer schema="info">
+ *   <AlertContent>
+ *     This is the main alert message content.
+ *   </AlertContent>
+ * </AlertContainer>
+ *
+ * // Alert with title and content
+ * <AlertContainer schema="success">
+ *   <AlertContent>
+ *     <AlertTitle>Success</AlertTitle>
+ *     Your operation has been completed successfully.
+ *   </AlertContent>
+ * </AlertContainer>
+ *
+ * // Multiple content sections
+ * <AlertContainer schema="warning">
+ *   <AlertContent>
+ *     <AlertTitle>Warning</AlertTitle>
+ *     <p>Please review the following items:</p>
+ *     <ul>
+ *       <li>Check your input data</li>
+ *       <li>Verify permissions</li>
+ *     </ul>
+ *   </AlertContent>
+ * </AlertContainer>
+ * ```
+ */
+declare function AlertContent(props: AlertContentProps): import("react/jsx-runtime").JSX.Element;
+export { AlertContent };
+//# sourceMappingURL=index.d.ts.map

package/dist/src/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,MAAM,OAAO,CAAC;AACvC,OAAO,cAAc,CAAC;AAEtB,KAAK,iBAAiB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAExD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AAEH,iBAAS,YAAY,CAAC,KAAK,EAAE,iBAAiB,2CAK7C;AAED,OAAO,EAAE,YAAY,EAAE,CAAC"}

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

@@ -0,0 +1,47 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "./styles.css";
+/**
+ * AlertContent component - used to wrap and style the main content area of alerts
+ *
+ * @param props - AlertContent component properties
+ *
+ * **...Other valid HTML properties for div**
+ *
+ * @returns AlertContent JSX element
+ *
+ * @example
+ * ```tsx
+ * // Basic alert content
+ * <AlertContainer schema="info">
+ *   <AlertContent>
+ *     This is the main alert message content.
+ *   </AlertContent>
+ * </AlertContainer>
+ *
+ * // Alert with title and content
+ * <AlertContainer schema="success">
+ *   <AlertContent>
+ *     <AlertTitle>Success</AlertTitle>
+ *     Your operation has been completed successfully.
+ *   </AlertContent>
+ * </AlertContainer>
+ *
+ * // Multiple content sections
+ * <AlertContainer schema="warning">
+ *   <AlertContent>
+ *     <AlertTitle>Warning</AlertTitle>
+ *     <p>Please review the following items:</p>
+ *     <ul>
+ *       <li>Check your input data</li>
+ *       <li>Verify permissions</li>
+ *     </ul>
+ *   </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/src/components/alert/alertDescription/index.d.ts

@@ -0,0 +1,49 @@
+import { HTMLAttributes } from "react";
+import "./styles.css";
+type AlertDescriptionProps = HTMLAttributes<HTMLDivElement>;
+/**
+ * AlertDescription component - used to display additional descriptive text in alerts
+ *
+ * @param props - AlertDescription component properties
+ *
+ * **...Other valid HTML properties for div**
+ *
+ * @returns AlertDescription JSX element
+ *
+ * @example
+ * ```tsx
+ * // Basic alert with description
+ * <AlertContainer schema="info">
+ *   <AlertContent>
+ *     <AlertTitle>Information</AlertTitle>
+ *     <AlertDescription>
+ *       This is additional information to help you understand the context.
+ *     </AlertDescription>
+ *   </AlertContent>
+ * </AlertContainer>
+ *
+ * // Success alert with description
+ * <AlertContainer schema="success">
+ *   <AlertContent>
+ *     <AlertTitle>Upload Complete</AlertTitle>
+ *     <AlertDescription>
+ *       Your file has been successfully uploaded and processed.
+ *     </AlertDescription>
+ *   </AlertContent>
+ * </AlertContainer>
+ *
+ * // Warning with detailed description
+ * <AlertContainer schema="warning">
+ *   <AlertContent>
+ *     <AlertTitle>Storage Limit</AlertTitle>
+ *     <AlertDescription>
+ *       You have used 90% of your storage quota. Consider upgrading your plan
+ *       or removing unused files.
+ *     </AlertDescription>
+ *   </AlertContent>
+ * </AlertContainer>
+ * ```
+ */
+declare function AlertDescription(props: AlertDescriptionProps): import("react/jsx-runtime").JSX.Element;
+export { AlertDescription };
+//# sourceMappingURL=index.d.ts.map

package/dist/src/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,MAAM,OAAO,CAAC;AACvC,OAAO,cAAc,CAAC;AAEtB,KAAK,qBAAqB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAE5D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AAEH,iBAAS,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,2CAKrD;AAED,OAAO,EAAE,gBAAgB,EAAE,CAAC"}

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

@@ -0,0 +1,51 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "./styles.css";
+/**
+ * AlertDescription component - used to display additional descriptive text in alerts
+ *
+ * @param props - AlertDescription component properties
+ *
+ * **...Other valid HTML properties for div**
+ *
+ * @returns AlertDescription JSX element
+ *
+ * @example
+ * ```tsx
+ * // Basic alert with description
+ * <AlertContainer schema="info">
+ *   <AlertContent>
+ *     <AlertTitle>Information</AlertTitle>
+ *     <AlertDescription>
+ *       This is additional information to help you understand the context.
+ *     </AlertDescription>
+ *   </AlertContent>
+ * </AlertContainer>
+ *
+ * // Success alert with description
+ * <AlertContainer schema="success">
+ *   <AlertContent>
+ *     <AlertTitle>Upload Complete</AlertTitle>
+ *     <AlertDescription>
+ *       Your file has been successfully uploaded and processed.
+ *     </AlertDescription>
+ *   </AlertContent>
+ * </AlertContainer>
+ *
+ * // Warning with detailed description
+ * <AlertContainer schema="warning">
+ *   <AlertContent>
+ *     <AlertTitle>Storage Limit</AlertTitle>
+ *     <AlertDescription>
+ *       You have used 90% of your storage quota. Consider upgrading your plan
+ *       or removing unused files.
+ *     </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/src/components/alert/alertIcon/index.d.ts

@@ -0,0 +1,52 @@
+import { LucideProps } from "lucide-react";
+import "./styles.css";
+type AlertIconProps = LucideProps;
+/**
+ * AlertIcon component - automatically displays the appropriate icon based on the alert schema
+ *
+ * @param props - AlertIcon component properties
+ *
+ * **...Other valid Lucide icon properties**
+ *
+ * @returns AlertIcon JSX element with schema-specific icon
+ *
+ * @description
+ * This component automatically selects and renders the appropriate icon based on the
+ * AlertContainer's schema context:
+ * - success: CheckCircle2 icon
+ * - danger: XCircle icon
+ * - warning: AlertTriangle icon
+ * - info: Info icon
+ *
+ * @example
+ * ```tsx
+ * // Basic usage - icon automatically matches container schema
+ * <AlertContainer schema="success">
+ *   <AlertIcon />
+ *   <AlertContent>
+ *     <AlertTitle>Success</AlertTitle>
+ *     <AlertDescription>Operation completed successfully.</AlertDescription>
+ *   </AlertContent>
+ * </AlertContainer>
+ *
+ * // Warning alert with icon
+ * <AlertContainer schema="warning">
+ *   <AlertIcon />
+ *   <AlertContent>
+ *     Please review your input before proceeding.
+ *   </AlertContent>
+ * </AlertContainer>
+ *
+ * // Custom icon size
+ * <AlertContainer schema="danger">
+ *   <AlertIcon size={24} />
+ *   <AlertContent>
+ *     <AlertTitle>Error</AlertTitle>
+ *     <AlertDescription>Something went wrong.</AlertDescription>
+ *   </AlertContent>
+ * </AlertContainer>
+ * ```
+ */
+declare function AlertIcon(props: AlertIconProps): import("react/jsx-runtime").JSX.Element;
+export { AlertIcon };
+//# sourceMappingURL=index.d.ts.map

package/dist/src/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;AAGtB,OAAO,cAAc,CAAC;AAEtB,KAAK,cAAc,GAAG,WAAW,CAAC;AAElC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AAEH,iBAAS,SAAS,CAAC,KAAK,EAAE,cAAc,2CAgBvC;AAED,OAAO,EAAE,SAAS,EAAE,CAAC"}