@arkyn/components 3.0.1-beta.7 → 3.0.1-beta.70

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

@@ -0,0 +1,105 @@
+import { TextareaHTMLAttributes } from "react";
+import "./styles.css";
+type TextareaProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "name" | "value" | "defaultValue"> & {
+    name: string;
+    label?: string;
+    showAsterisk?: boolean;
+    errorMessage?: string;
+    size?: "md" | "lg";
+    variant?: "solid" | "outline";
+    value?: string | null;
+    defaultValue?: string | null;
+};
+/**
+ * Textarea component - used for multi-line text input with customizable styling and validation
+ *
+ * @param props - Textarea component properties
+ * @param props.name - Required field name for form handling and textarea identification
+ * @param props.label - Optional label text to display above the textarea
+ * @param props.showAsterisk - Whether to show asterisk on label for required fields
+ * @param props.errorMessage - Error message to display below the textarea
+ * @param props.size - Size variant of the textarea. Default: "md"
+ * @param props.variant - Visual variant of the textarea. Default: "solid"
+ *
+ * **...Other valid HTML properties for textarea element (except name)**
+ *
+ * @returns Textarea JSX element wrapped in FieldWrapper with optional label and error message
+ *
+ * @example
+ * ```tsx
+ * // Basic textarea
+ * <Textarea name="description" placeholder="Enter description..." />
+ *
+ * // Textarea with label and validation
+ * <Textarea
+ *   name="bio"
+ *   label="Biography"
+ *   showAsterisk
+ *   placeholder="Tell us about yourself"
+ *   errorMessage="Biography is required"
+ * />
+ *
+ * // Large textarea with outline variant
+ * <Textarea
+ *   name="comments"
+ *   label="Comments"
+ *   size="lg"
+ *   variant="outline"
+ *   placeholder="Enter your comments here..."
+ *   rows={6}
+ * />
+ *
+ * // Textarea with character limit and custom styling
+ * <Textarea
+ *   name="feedback"
+ *   label="Feedback"
+ *   placeholder="Share your feedback (max 500 characters)"
+ *   maxLength={500}
+ *   rows={4}
+ *   className="feedback-textarea"
+ * />
+ *
+ * // Read-only textarea for display
+ * <Textarea
+ *   name="terms"
+ *   label="Terms and Conditions"
+ *   value={termsContent}
+ *   readOnly
+ *   rows={10}
+ *   variant="outline"
+ * />
+ *
+ * // Disabled textarea
+ * <Textarea
+ *   name="disabled_field"
+ *   label="Disabled Field"
+ *   value="This field is disabled"
+ *   disabled
+ *   placeholder="Cannot edit this field"
+ * />
+ *
+ * // Textarea with controlled value and change handler
+ * <Textarea
+ *   name="message"
+ *   label="Message"
+ *   value={message}
+ *   onChange={(e) => setMessage(e.target.value)}
+ *   placeholder="Type your message..."
+ *   rows={5}
+ *   showAsterisk
+ * />
+ *
+ * // Textarea with resize control
+ * <Textarea
+ *   name="notes"
+ *   label="Notes"
+ *   placeholder="Enter your notes..."
+ *   style={{ resize: 'vertical' }}
+ *   rows={3}
+ *   cols={50}
+ * />
+ * ```
+ */
+declare function Textarea(props: TextareaProps): import("react/jsx-runtime").JSX.Element;
+export { Textarea };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/textarea/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,sBAAsB,EAIvB,MAAM,OAAO,CAAC;AAOf,OAAO,cAAc,CAAC;AAEtB,KAAK,aAAa,GAAG,IAAI,CACvB,sBAAsB,CAAC,mBAAmB,CAAC,EAC3C,MAAM,GAAG,OAAO,GAAG,cAAc,CAClC,GAAG;IACF,IAAI,EAAE,MAAM,CAAC;IAEb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAE9B,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC9B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyFG;AAEH,iBAAS,QAAQ,CAAC,KAAK,EAAE,aAAa,2CAiFrC;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/dist/components/textarea/index.js

@@ -0,0 +1,128 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useRef, useState, } from "react";
+import { useForm } from "../../hooks/useForm";
+import { FieldLabel } from "../fieldLabel";
+import { FieldWrapper } from "../fieldWrapper";
+import { FieldError } from "../fieldError";
+import "./styles.css";
+/**
+ * Textarea component - used for multi-line text input with customizable styling and validation
+ *
+ * @param props - Textarea component properties
+ * @param props.name - Required field name for form handling and textarea identification
+ * @param props.label - Optional label text to display above the textarea
+ * @param props.showAsterisk - Whether to show asterisk on label for required fields
+ * @param props.errorMessage - Error message to display below the textarea
+ * @param props.size - Size variant of the textarea. Default: "md"
+ * @param props.variant - Visual variant of the textarea. Default: "solid"
+ *
+ * **...Other valid HTML properties for textarea element (except name)**
+ *
+ * @returns Textarea JSX element wrapped in FieldWrapper with optional label and error message
+ *
+ * @example
+ * ```tsx
+ * // Basic textarea
+ * <Textarea name="description" placeholder="Enter description..." />
+ *
+ * // Textarea with label and validation
+ * <Textarea
+ *   name="bio"
+ *   label="Biography"
+ *   showAsterisk
+ *   placeholder="Tell us about yourself"
+ *   errorMessage="Biography is required"
+ * />
+ *
+ * // Large textarea with outline variant
+ * <Textarea
+ *   name="comments"
+ *   label="Comments"
+ *   size="lg"
+ *   variant="outline"
+ *   placeholder="Enter your comments here..."
+ *   rows={6}
+ * />
+ *
+ * // Textarea with character limit and custom styling
+ * <Textarea
+ *   name="feedback"
+ *   label="Feedback"
+ *   placeholder="Share your feedback (max 500 characters)"
+ *   maxLength={500}
+ *   rows={4}
+ *   className="feedback-textarea"
+ * />
+ *
+ * // Read-only textarea for display
+ * <Textarea
+ *   name="terms"
+ *   label="Terms and Conditions"
+ *   value={termsContent}
+ *   readOnly
+ *   rows={10}
+ *   variant="outline"
+ * />
+ *
+ * // Disabled textarea
+ * <Textarea
+ *   name="disabled_field"
+ *   label="Disabled Field"
+ *   value="This field is disabled"
+ *   disabled
+ *   placeholder="Cannot edit this field"
+ * />
+ *
+ * // Textarea with controlled value and change handler
+ * <Textarea
+ *   name="message"
+ *   label="Message"
+ *   value={message}
+ *   onChange={(e) => setMessage(e.target.value)}
+ *   placeholder="Type your message..."
+ *   rows={5}
+ *   showAsterisk
+ * />
+ *
+ * // Textarea with resize control
+ * <Textarea
+ *   name="notes"
+ *   label="Notes"
+ *   placeholder="Enter your notes..."
+ *   style={{ resize: 'vertical' }}
+ *   rows={3}
+ *   cols={50}
+ * />
+ * ```
+ */
+function Textarea(props) {
+    const { variant = "solid", size = "md", className: baseClassName, errorMessage: baseErrorMessage, disabled = false, readOnly = false, label, showAsterisk, name, onFocus, onBlur, title, style, value, defaultValue, placeholder, id, ...rest } = props;
+    const { fieldErrors } = useForm();
+    const [isFocused, setIsFocused] = useState(false);
+    const textareaRef = useRef(null);
+    const textareaId = id || useId();
+    const errorMessage = baseErrorMessage || fieldErrors?.[name];
+    const isError = !!errorMessage;
+    const errorClass = isError ? "errorTrue" : "errorFalse";
+    const opacityClass = disabled || readOnly ? "opacityTrue" : "opacityFalse";
+    const focusedClass = isFocused ? "focusedTrue" : "focusedFalse";
+    const className = `arkynTextarea ${variant} ${size} ${opacityClass} ${errorClass} ${focusedClass} ${baseClassName}`;
+    function handleSectionClick() {
+        if (disabled || !textareaRef?.current)
+            return;
+        setIsFocused(true);
+        textareaRef.current.focus();
+    }
+    function handleFocus(e) {
+        setIsFocused(true);
+        if (onFocus)
+            onFocus(e);
+    }
+    function handleBlur(e) {
+        setIsFocused(false);
+        if (onBlur)
+            onBlur(e);
+    }
+    return (_jsxs(FieldWrapper, { children: [label && (_jsx(FieldLabel, { htmlFor: textareaId, showAsterisk: showAsterisk, children: label })), _jsx("section", { title: title, style: style, onClick: handleSectionClick, className: className, children: _jsx("textarea", { id: textareaId, disabled: disabled, readOnly: readOnly, ref: textareaRef, onFocus: handleFocus, onBlur: handleBlur, placeholder: disabled ? value || placeholder : placeholder, value: disabled ? undefined : value, ...rest }) }), errorMessage && _jsx(FieldError, { children: errorMessage })] }));
+}
+export { Textarea };

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

@@ -0,0 +1,80 @@
+import { HTMLAttributes, ReactNode } from "react";
+import "./styles.css";
+type TooltipProps = Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+    text: string;
+    children: ReactNode;
+    orientation?: "top" | "right" | "bottom" | "left";
+    size?: "md" | "lg";
+};
+/**
+ * Tooltip component - displays contextual information on hover with smart positioning
+ *
+ * @param props - Tooltip component properties
+ * @param props.text - Text content to display in the tooltip
+ * @param props.children - Element that triggers the tooltip on hover
+ * @param props.orientation - Preferred tooltip position relative to trigger element. Default: "top"
+ * @param props.size - Tooltip size variant. Default: "lg"
+ *
+ * **...Other valid HTML properties for div element**
+ *
+ * @returns Tooltip JSX element
+ *
+ * @example
+ * ```tsx
+ * // Basic tooltip
+ * <Tooltip text="This is a helpful tip">
+ *   <button>Hover me</button>
+ * </Tooltip>
+ *
+ * // Tooltip with different orientations
+ * <Tooltip text="Left tooltip" orientation="left">
+ *   <span>Hover for left tooltip</span>
+ * </Tooltip>
+ *
+ * <Tooltip text="Right tooltip" orientation="right">
+ *   <span>Hover for right tooltip</span>
+ * </Tooltip>
+ *
+ * // Different sizes
+ * <Tooltip text="Small tooltip" size="md">
+ *   <button>Small tooltip</button>
+ * </Tooltip>
+ *
+ * <Tooltip text="Large tooltip" size="lg">
+ *   <button>Large tooltip</button>
+ * </Tooltip>
+ *
+ * // Smart positioning - automatically adjusts if doesn't fit
+ * <Tooltip text="This tooltip will auto-adjust position" orientation="left">
+ *   <button className="near-edge">Smart positioning</button>
+ * </Tooltip>
+ *
+ * // Complete example with custom styling
+ * <Tooltip
+ *   text="Save your changes before proceeding"
+ *   orientation="bottom"
+ *   size="lg"
+ *   className="custom-tooltip"
+ * >
+ *   <IconButton icon={SaveIcon} />
+ * </Tooltip>
+ *
+ * // Multiple tooltips on same page
+ * <div className="toolbar">
+ *   <Tooltip text="Create new file" orientation="bottom">
+ *     <IconButton icon={PlusIcon} />
+ *   </Tooltip>
+ *
+ *   <Tooltip text="Open existing file" orientation="bottom">
+ *     <IconButton icon={FolderIcon} />
+ *   </Tooltip>
+ *
+ *   <Tooltip text="Delete selected file" orientation="bottom">
+ *     <IconButton icon={TrashIcon} />
+ *   </Tooltip>
+ * </div>
+ * ```
+ */
+declare function Tooltip(props: TooltipProps): import("react/jsx-runtime").JSX.Element;
+export { Tooltip };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/tooltip/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,cAAc,EACd,SAAS,EAKV,MAAM,OAAO,CAAC;AACf,OAAO,cAAc,CAAC;AAEtB,KAAK,YAAY,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,GAAG;IACrE,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,SAAS,CAAC;IACpB,WAAW,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAClD,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;CACpB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoEG;AAEH,iBAAS,OAAO,CAAC,KAAK,EAAE,YAAY,2CAqFnC;AAED,OAAO,EAAE,OAAO,EAAE,CAAC"}

package/dist/components/tooltip/index.js

@@ -0,0 +1,135 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef, useState, } from "react";
+import "./styles.css";
+/**
+ * Tooltip component - displays contextual information on hover with smart positioning
+ *
+ * @param props - Tooltip component properties
+ * @param props.text - Text content to display in the tooltip
+ * @param props.children - Element that triggers the tooltip on hover
+ * @param props.orientation - Preferred tooltip position relative to trigger element. Default: "top"
+ * @param props.size - Tooltip size variant. Default: "lg"
+ *
+ * **...Other valid HTML properties for div element**
+ *
+ * @returns Tooltip JSX element
+ *
+ * @example
+ * ```tsx
+ * // Basic tooltip
+ * <Tooltip text="This is a helpful tip">
+ *   <button>Hover me</button>
+ * </Tooltip>
+ *
+ * // Tooltip with different orientations
+ * <Tooltip text="Left tooltip" orientation="left">
+ *   <span>Hover for left tooltip</span>
+ * </Tooltip>
+ *
+ * <Tooltip text="Right tooltip" orientation="right">
+ *   <span>Hover for right tooltip</span>
+ * </Tooltip>
+ *
+ * // Different sizes
+ * <Tooltip text="Small tooltip" size="md">
+ *   <button>Small tooltip</button>
+ * </Tooltip>
+ *
+ * <Tooltip text="Large tooltip" size="lg">
+ *   <button>Large tooltip</button>
+ * </Tooltip>
+ *
+ * // Smart positioning - automatically adjusts if doesn't fit
+ * <Tooltip text="This tooltip will auto-adjust position" orientation="left">
+ *   <button className="near-edge">Smart positioning</button>
+ * </Tooltip>
+ *
+ * // Complete example with custom styling
+ * <Tooltip
+ *   text="Save your changes before proceeding"
+ *   orientation="bottom"
+ *   size="lg"
+ *   className="custom-tooltip"
+ * >
+ *   <IconButton icon={SaveIcon} />
+ * </Tooltip>
+ *
+ * // Multiple tooltips on same page
+ * <div className="toolbar">
+ *   <Tooltip text="Create new file" orientation="bottom">
+ *     <IconButton icon={PlusIcon} />
+ *   </Tooltip>
+ *
+ *   <Tooltip text="Open existing file" orientation="bottom">
+ *     <IconButton icon={FolderIcon} />
+ *   </Tooltip>
+ *
+ *   <Tooltip text="Delete selected file" orientation="bottom">
+ *     <IconButton icon={TrashIcon} />
+ *   </Tooltip>
+ * </div>
+ * ```
+ */
+function Tooltip(props) {
+    const { text, size = "lg", children, orientation = "top", className: baseClassName = "", ...rest } = props;
+    const tooltipId = useId();
+    const tooltipRef = useRef(null);
+    const [adjustedOrientation, setAdjustedOrientation] = useState(orientation);
+    useEffect(() => {
+        const checkTooltipPosition = () => {
+            if (!tooltipRef.current)
+                return;
+            const tooltipText = document.getElementById(tooltipId);
+            if (!tooltipText)
+                return;
+            setAdjustedOrientation(orientation);
+            requestAnimationFrame(() => {
+                const rect = tooltipText.getBoundingClientRect();
+                const viewportWidth = window.innerWidth;
+                const viewportHeight = window.innerHeight;
+                let newOrientation = orientation;
+                if (orientation === "left" && rect.left < 0) {
+                    newOrientation = "right";
+                }
+                else if (orientation === "right" && rect.right > viewportWidth) {
+                    newOrientation = "left";
+                }
+                else if (orientation === "top" && rect.top < 0) {
+                    newOrientation = "bottom";
+                }
+                else if (orientation === "bottom" && rect.bottom > viewportHeight) {
+                    newOrientation = "top";
+                }
+                if (newOrientation === "right" && rect.right > viewportWidth) {
+                    newOrientation = "left";
+                }
+                else if (newOrientation === "left" && rect.left < 0) {
+                    newOrientation = "right";
+                }
+                else if (newOrientation === "bottom" &&
+                    rect.bottom > viewportHeight) {
+                    newOrientation = "top";
+                }
+                else if (newOrientation === "top" && rect.top < 0) {
+                    newOrientation = "bottom";
+                }
+                setAdjustedOrientation(newOrientation);
+            });
+        };
+        const tooltip = tooltipRef.current;
+        if (!tooltip)
+            return;
+        const handleMouseEnter = () => {
+            setTimeout(checkTooltipPosition, 1);
+        };
+        tooltip.addEventListener("mouseenter", handleMouseEnter);
+        window.addEventListener("resize", checkTooltipPosition);
+        return () => {
+            tooltip.removeEventListener("mouseenter", handleMouseEnter);
+            window.removeEventListener("resize", checkTooltipPosition);
+        };
+    }, [orientation, tooltipId]);
+    const className = `arkynTooltip ${size} ${adjustedOrientation} ${baseClassName}`;
+    return (_jsxs("div", { className: className.trim(), ...rest, ref: tooltipRef, children: [children, _jsx("div", { className: "arkynTooltipText", id: tooltipId, dangerouslySetInnerHTML: { __html: text } })] }));
+}
+export { Tooltip };

package/dist/hooks/useDrawer.d.ts

@@ -1,5 +1,80 @@
-import { DrawerContextProps } from "@arkyn/types";
+import { DrawerContextProps } from "../providers/drawerProvider";
 type OpenDrawerProps<T = any> = (data?: T) => void;
+/**
+ * useDrawer hook - provides access to drawer context for managing drawer state and data
+ *
+ * @param key - Optional drawer identifier key. When provided, returns functions for a specific drawer
+ *
+ * @returns When called without key: Complete drawer context with all drawer management functions
+ * @returns When called with key: Object containing drawer-specific functions:
+ * - `drawerIsOpen`: Boolean indicating if the specific drawer is open
+ * - `drawerData`: Data associated with the specific drawer
+ * - `openDrawer`: Function to open the specific drawer with optional data
+ * - `closeDrawer`: Function to close the specific drawer
+ *
+ * @example
+ * ```tsx
+ * // Basic usage - access to full drawer context
+ * function DrawerManager() {
+ *   const drawerContext = useDrawer();
+ *
+ *   return (
+ *     <div>
+ *       <button onClick={() => drawerContext.openDrawer('navigation', { section: 'main' })}>
+ *         Open Navigation
+ *       </button>
+ *       <button onClick={() => drawerContext.openDrawer('filters', { category: 'electronics' })}>
+ *         Open Filters
+ *       </button>
+ *     </div>
+ *   );
+ * }
+ *
+ * // Usage with specific drawer key
+ * function NavigationDrawer() {
+ *   const { drawerIsOpen, drawerData, openDrawer, closeDrawer } = useDrawer('navigation');
+ *
+ *   return (
+ *     <Drawer isOpen={drawerIsOpen} onClose={closeDrawer} position="left">
+ *       <h2>Navigation</h2>
+ *       <p>Current section: {drawerData?.section}</p>
+ *       <button onClick={closeDrawer}>Close</button>
+ *     </Drawer>
+ *   );
+ * }
+ *
+ * // Usage with typed data
+ * interface FilterData {
+ *   category: string;
+ *   priceRange: [number, number];
+ *   brands: string[];
+ * }
+ *
+ * function FilterDrawer() {
+ *   const { drawerIsOpen, drawerData, closeDrawer } = useDrawer<FilterData>('filters');
+ *
+ *   return (
+ *     <Drawer isOpen={drawerIsOpen} onClose={closeDrawer} position="right">
+ *       <h2>Filters</h2>
+ *       <p>Category: {drawerData?.category}</p>
+ *       <p>Price: ${drawerData?.priceRange?.[0]} - ${drawerData?.priceRange?.[1]}</p>
+ *       <p>Brands: {drawerData?.brands?.join(', ')}</p>
+ *     </Drawer>
+ *   );
+ * }
+ *
+ * // Usage with DrawerProvider
+ * function App() {
+ *   return (
+ *     <DrawerProvider>
+ *       <NavigationDrawer />
+ *       <FilterDrawer />
+ *       <DrawerManager />
+ *     </DrawerProvider>
+ *   );
+ * }
+ * ```
+ */
 declare function useDrawer<T = any>(): DrawerContextProps<T>;
 declare function useDrawer<T = any>(key: string): {
     drawerIsOpen: boolean;

package/dist/hooks/useDrawer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useDrawer.d.ts","sourceRoot":"","sources":["../../src/hooks/useDrawer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAKlD,KAAK,eAAe,CAAC,CAAC,GAAG,GAAG,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,KAAK,IAAI,CAAC;AAEnD,iBAAS,SAAS,CAAC,CAAC,GAAG,GAAG,KAAK,kBAAkB,CAAC,CAAC,CAAC,CAAC;AACrD,iBAAS,SAAS,CAAC,CAAC,GAAG,GAAG,EACxB,GAAG,EAAE,MAAM,GACV;IACD,YAAY,EAAE,OAAO,CAAC;IACtB,UAAU,EAAE,CAAC,CAAC;IACd,UAAU,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC;IAC/B,WAAW,EAAE,MAAM,IAAI,CAAC;CACzB,CAAC;AA6BF,OAAO,EAAE,SAAS,EAAE,CAAC"}
+{"version":3,"file":"useDrawer.d.ts","sourceRoot":"","sources":["../../src/hooks/useDrawer.ts"],"names":[],"mappings":"AACA,OAAO,EAAiB,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAEhF,KAAK,eAAe,CAAC,CAAC,GAAG,GAAG,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,KAAK,IAAI,CAAC;AAEnD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0EG;AAEH,iBAAS,SAAS,CAAC,CAAC,GAAG,GAAG,KAAK,kBAAkB,CAAC,CAAC,CAAC,CAAC;AACrD,iBAAS,SAAS,CAAC,CAAC,GAAG,GAAG,EACxB,GAAG,EAAE,MAAM,GACV;IACD,YAAY,EAAE,OAAO,CAAC;IACtB,UAAU,EAAE,CAAC,CAAC;IACd,UAAU,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC;IAC/B,WAAW,EAAE,MAAM,IAAI,CAAC;CACzB,CAAC;AA6BF,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/dist/hooks/useDrawer.js

@@ -1,7 +1,7 @@
 import { useContext } from "react";
-import { DrawerContext } from "../context/DrawerContext";
+import { drawerContext } from "../providers/drawerProvider";
 function useDrawer(key) {
-    const contextData = useContext(DrawerContext);
+    const contextData = useContext(drawerContext);
     if (Object.entries(contextData).length === 0) {
         throw new Error("useDrawer must be used within a Provider");
     }

package/dist/hooks/useForm.d.ts

@@ -0,0 +1,52 @@
+/**
+ * useForm hook - provides access to form context data including field errors
+ *
+ * @returns Form context object containing:
+ * - `fieldErrors`: Object with field validation errors indexed by field name
+ *
+ * @example
+ * ```tsx
+ * // Basic usage in a component
+ * function MyComponent() {
+ *   const { fieldErrors } = useForm();
+ *
+ *   return (
+ *     <Input
+ *       name="email"
+ *       errorMessage={fieldErrors?.email}
+ *     />
+ *   );
+ * }
+ *
+ * // Usage with FormProvider
+ * function App() {
+ *   const errors = { email: "Invalid email format" };
+ *
+ *   return (
+ *     <FormProvider fieldErrors={errors}>
+ *       <MyForm />
+ *     </FormProvider>
+ *   );
+ * }
+ *
+ * // Checking for specific field errors
+ * function FormField() {
+ *   const { fieldErrors } = useForm();
+ *   const hasError = !!fieldErrors?.username;
+ *
+ *   return (
+ *     <div>
+ *       <Input name="username" />
+ *       {hasError && <span>Error: {fieldErrors.username}</span>}
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+declare function useForm(): {
+    fieldErrors: {
+        [x: string]: any;
+    };
+};
+export { useForm };
+//# sourceMappingURL=useForm.d.ts.map

package/dist/hooks/useForm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useForm.d.ts","sourceRoot":"","sources":["../../src/hooks/useForm.ts"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AAEH,iBAAS,OAAO;;;;EAGf;AAED,OAAO,EAAE,OAAO,EAAE,CAAC"}

package/dist/hooks/useForm.js

@@ -0,0 +1,52 @@
+import { useContext } from "react";
+import { formContext } from "../providers/formProvider";
+/**
+ * useForm hook - provides access to form context data including field errors
+ *
+ * @returns Form context object containing:
+ * - `fieldErrors`: Object with field validation errors indexed by field name
+ *
+ * @example
+ * ```tsx
+ * // Basic usage in a component
+ * function MyComponent() {
+ *   const { fieldErrors } = useForm();
+ *
+ *   return (
+ *     <Input
+ *       name="email"
+ *       errorMessage={fieldErrors?.email}
+ *     />
+ *   );
+ * }
+ *
+ * // Usage with FormProvider
+ * function App() {
+ *   const errors = { email: "Invalid email format" };
+ *
+ *   return (
+ *     <FormProvider fieldErrors={errors}>
+ *       <MyForm />
+ *     </FormProvider>
+ *   );
+ * }
+ *
+ * // Checking for specific field errors
+ * function FormField() {
+ *   const { fieldErrors } = useForm();
+ *   const hasError = !!fieldErrors?.username;
+ *
+ *   return (
+ *     <div>
+ *       <Input name="username" />
+ *       {hasError && <span>Error: {fieldErrors.username}</span>}
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+function useForm() {
+    const context = useContext(formContext);
+    return context;
+}
+export { useForm };