@arkyn/components 3.0.1-beta.99 → 3.0.2

package/dist/components/button/index.js

@@ -1,61 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Loader2 } from "lucide-react";
-import { IconRenderer } from "../../services/iconRenderer";
-import "./styles.css";
-/**
- * Button component - used for user interactions and form submissions
- *
- * @param props - Button component properties
- * @param props.isLoading - Controls loading state with spinner. Default: false
- * @param props.loadingText - Text to display during loading state
- * @param props.size - Button size. Default: "md"
- * @param props.variant - Visual variant of the button. Default: "solid"
- * @param props.scheme - Button color scheme. Default: "primary"
- * @param props.leftIcon - Optional icon to display on the left
- * @param props.rightIcon - Optional icon to display on the right
- *
- * **...Other valid HTML properties for button**
- *
- * @returns Button JSX element
- *
- * @example
- * ```tsx
- * // Basic button
- * <Button>Click me</Button>
- *
- * // Button with color scheme
- * <Button scheme="success">Save</Button>
- *
- * // Button with loading state
- * <Button isLoading loadingText="Saving...">
- *  Save
- * </Button>
- *
- * // Button with icons
- * <Button leftIcon={SaveIcon} scheme="success">
- *  Save
- * </Button>
- *
- * // Custom button
- * <Button
- *  size="lg"
- *  variant="outline"
- *  scheme="danger"
- *  rightIcon={TrashIcon}
- * >
- *  Delete
- * </Button>
- * ```
- */
-function Button(props) {
-    const { isLoading = false, scheme = "primary", variant = "solid", loadingText, size = "md", leftIcon, rightIcon, disabled, className: baseClassName = "", children, ...rest } = props;
-    const iconSizes = { xs: 12, sm: 16, md: 20, lg: 24 };
-    const iconSize = iconSizes[size];
-    const loadingClass = isLoading ? "loadingTrue" : "loadingFalse";
-    const loadingTextClass = !!loadingText
-        ? "loadingTextTrue"
-        : "loadingTextFalse";
-    const className = `arkynButton ${loadingClass} ${variant} ${scheme} ${size} ${loadingTextClass} ${baseClassName}`;
-    return (_jsxs("button", { className: className, disabled: disabled || isLoading, ...rest, children: [_jsxs("div", { className: "arkynButtonSpinner", children: [_jsx(Loader2, { size: iconSize, strokeWidth: 2.5 }), loadingText && loadingText] }), _jsxs("div", { className: "arkynButtonContent", children: [_jsx(IconRenderer, { iconSize: iconSize, icon: leftIcon }), children, _jsx(IconRenderer, { iconSize: iconSize, icon: rightIcon })] })] }));
-}
-export { Button };

package/dist/components/cardTab/cardTabButton/index.js

@@ -1,80 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useCardTab } from "../cardTabContext";
-import "./styles.css";
-/**
- * CardTabButton component - used as interactive buttons within a CardTabContainer for tab navigation
- *
- * @param props - CardTabButton component properties
- * @param props.children - Content to display inside the tab button (required)
- * @param props.value - Unique identifier for the tab button (required)
- * @param props.disabled - Whether the button is disabled. Can be overridden by CardTabContainer's disabled state
- *
- * **...Other valid HTML button properties except children, value, and type**
- *
- * @returns CardTabButton JSX element
- *
- * @example
- * ```tsx
- * // Basic tab buttons within CardTabContainer
- * <CardTabContainer>
- *   <CardTabButton value="home">Home</CardTabButton>
- *   <CardTabButton value="about">About</CardTabButton>
- *   <CardTabButton value="contact">Contact</CardTabButton>
- * </CardTabContainer>
- * ```
- *
- * @example
- * ```tsx
- * // Tab button with click handler
- * <CardTabContainer onChange={(value) => console.log('Tab changed:', value)}>
- *   <CardTabButton
- *     value="profile"
- *     onClick={() => console.log('Profile tab clicked')}
- *   >
- *     Profile
- *   </CardTabButton>
- *   <CardTabButton value="settings">Settings</CardTabButton>
- * </CardTabContainer>
- * ```
- *
- * @example
- * ```tsx
- * // Disabled tab button
- * <CardTabContainer>
- *   <CardTabButton value="available">Available</CardTabButton>
- *   <CardTabButton value="coming-soon" disabled>
- *     Coming Soon
- *   </CardTabButton>
- * </CardTabContainer>
- * ```
- *
- * @example
- * ```tsx
- * // Tab buttons with custom styling and default value
- * <CardTabContainer defaultValue="dashboard">
- *   <CardTabButton
- *     value="dashboard"
- *     className="custom-tab"
- *     aria-label="Dashboard tab"
- *   >
- *     Dashboard
- *   </CardTabButton>
- *   <CardTabButton value="analytics">Analytics</CardTabButton>
- *   <CardTabButton value="reports">Reports</CardTabButton>
- * </CardTabContainer>
- * ```
- */
-function CardTabButton(props) {
-    const { children, disabled: rawDisabled = false, className: baseClassName = "", onClick, value, ...rest } = props;
-    const { disabled, currentTab, changeCurrentTab } = useCardTab();
-    const isDisabled = disabled || rawDisabled;
-    const disabledClass = isDisabled ? "isDisabled" : "";
-    const activeClass = currentTab === value && value ? "isActive" : "";
-    const className = `arkynCardTabButton ${disabledClass} ${activeClass} ${baseClassName}`;
-    function handleClick(event) {
-        changeCurrentTab(value);
-        onClick && onClick(event);
-    }
-    return (_jsx("button", { onClick: handleClick, className: className.trim(), ...rest, disabled: isDisabled, type: "button", children: children }));
-}
-export { CardTabButton };

package/dist/components/cardTab/cardTabContainer/index.js

@@ -1,88 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useState } from "react";
-import { TabProvider } from "../cardTabContext";
-import "./styles.css";
-/**
- * CardTabContainer component - used as a wrapper for CardTabButton components to create tabbed navigation
- *
- * @param props - CardTabContainer component properties
- * @param props.children - CardTabButton components and other content (required)
- * @param props.disabled - Whether all tab buttons are disabled. Default: false
- * @param props.defaultValue - Initial tab value to be selected
- * @param props.onChange - Callback function called when tab changes, receives the tab value
- *
- * **...Other valid HTML nav properties except onClick, children, and ref**
- *
- * @returns CardTabContainer JSX element
- *
- * @example
- * ```tsx
- * // Basic tab container
- * <CardTabContainer>
- *   <CardTabButton value="home">Home</CardTabButton>
- *   <CardTabButton value="about">About</CardTabButton>
- *   <CardTabButton value="contact">Contact</CardTabButton>
- * </CardTabContainer>
- * ```
- *
- * @example
- * ```tsx
- * // Tab container with default value and change handler
- * <CardTabContainer
- *   defaultValue="dashboard"
- *   onChange={(value) => console.log('Active tab:', value)}
- * >
- *   <CardTabButton value="dashboard">Dashboard</CardTabButton>
- *   <CardTabButton value="analytics">Analytics</CardTabButton>
- *   <CardTabButton value="settings">Settings</CardTabButton>
- * </CardTabContainer>
- * ```
- *
- * @example
- * ```tsx
- * // Disabled all tabs
- * <CardTabContainer disabled>
- *   <CardTabButton value="tab1">Tab 1</CardTabButton>
- *   <CardTabButton value="tab2">Tab 2</CardTabButton>
- * </CardTabContainer>
- * ```
- *
- * @example
- * ```tsx
- * // Tab container with custom styling and state management
- * function MyTabs() {
- *   const [activeTab, setActiveTab] = useState('profile');
- *
- *   return (
- *     <div>
- *       <CardTabContainer
- *         defaultValue={activeTab}
- *         onChange={setActiveTab}
- *         className="custom-tabs"
- *         role="tablist"
- *       >
- *         <CardTabButton value="profile">Profile</CardTabButton>
- *         <CardTabButton value="account">Account</CardTabButton>
- *         <CardTabButton value="notifications">Notifications</CardTabButton>
- *       </CardTabContainer>
- *
- *       {activeTab === 'profile' && <ProfileContent />}
- *       {activeTab === 'account' && <AccountContent />}
- *       {activeTab === 'notifications' && <NotificationsContent />}
- *     </div>
- *   );
- * }
- * ```
- */
-function CardTabContainer(props) {
-    const { children, onChange, defaultValue, disabled = false, className: baseClassName, ...rest } = props;
-    const [currentTab, setCurrentTab] = useState(defaultValue || "");
-    const className = `arkynCardTabContainer ${baseClassName || ""}`;
-    function changeCurrentTab(value) {
-        setCurrentTab(value);
-        if (onChange)
-            onChange(value);
-    }
-    return (_jsx(TabProvider, { disabled: disabled, currentTab: currentTab, changeCurrentTab: changeCurrentTab, children: _jsx("nav", { className: className.trim(), ...rest, children: children }) }));
-}
-export { CardTabContainer };

package/dist/components/cardTab/cardTabContext.js

@@ -1,10 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useContext } from "react";
-const CardTabContext = createContext({});
-function useCardTab() {
-    return useContext(CardTabContext);
-}
-function TabProvider(props) {
-    return (_jsx(CardTabContext.Provider, { value: props, children: props.children }));
-}
-export { TabProvider, useCardTab };

package/dist/components/checkbox/index.js

@@ -1,87 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Check } from "lucide-react";
-import { useId, useRef, useState } from "react";
-import { useForm } from "../../hooks/useForm";
-import { FieldWrapper } from "../fieldWrapper";
-import { FieldError } from "../fieldError";
-import { FieldLabel } from "../fieldLabel";
-import "./styles.css";
-/**
- * Checkbox component - used for creating interactive checkbox inputs with customizable styling and validation
- *
- * @param props - Checkbox component properties
- * @param props.name - Required field name for form handling and hidden input identification
- * @param props.label - Optional label text to display next to the checkbox
- * @param props.errorMessage - Error state indicator to display validation errors
- * @param props.size - Size variant of the checkbox. Default: "md"
- * @param props.value - Optional value to be used when checkbox is checked. Default: "checked"
- * @param props.checked - Controlled checked state of the checkbox
- * @param props.defaultChecked - Default checked state for uncontrolled usage. Default: false
- * @param props.onCheck - Callback function called when checkbox state changes, receives the value or empty string
- * @param props.orientation - Orientation of the checkbox and label. Default: "horizontalReverse"
- *
- * **...Other valid HTML properties for button element (except type, name, defaultValue, value, onChange, onSelect, onClick)**
- *
- * @returns Checkbox JSX element wrapped in FieldWrapper with optional label and error
- *
- * @example
- * ```tsx
- * // Basic checkbox
- * <Checkbox name="terms" label="I agree to the terms and conditions" />
- *
- * // Checkbox with custom value and validation
- * <Checkbox
- *   name="newsletter"
- *   label="Subscribe to newsletter"
- *   value="subscribed"
- *   errorMessage={errors.newsletter}
- * />
- *
- * // Large checkbox with controlled state
- * <Checkbox
- *   name="premium"
- *   label="Enable premium features"
- *   size="lg"
- *   checked={isPremium}
- *   onCheck={(value) => setIsPremium(!!value)}
- * />
- *
- * // Small checkbox with default checked state
- * <Checkbox
- *   name="remember"
- *   label="Remember me"
- *   size="sm"
- *   defaultChecked={true}
- *   value="remember_user"
- * />
- *
- * // Checkbox with custom styling and callback
- * <Checkbox
- *   name="notifications"
- *   label="Enable notifications"
- *   className="custom-checkbox"
- *   onCheck={(value) => console.log('Notification setting:', value)}
- *   disabled={isLoading}
- * />
- * ```
- */
-function Checkbox(props) {
-    const { id, name, className: wrapperClassName = "", size = "md", errorMessage: baseErrorMessage, defaultChecked = false, label, checked: baseChecked = null, onCheck, orientation = "horizontalReverse", value, ...rest } = props;
-    const { fieldErrors } = useForm();
-    const checkboxRef = useRef(null);
-    const checkboxId = id || useId();
-    const errorMessage = baseErrorMessage || fieldErrors?.[name];
-    const isError = !!errorMessage;
-    const [isChecked, setIsChecked] = useState(defaultChecked || false);
-    const currentChecked = typeof baseChecked === "boolean" ? baseChecked : isChecked;
-    const errorClass = isError ? "errorTrue" : "errorFalse";
-    const currentCheckedClass = currentChecked ? "checkedTrue" : "checkedFalse";
-    const className = `arkynCheckbox ${size} ${errorClass} ${currentCheckedClass}`;
-    function handleCheck() {
-        const defaultChecked = isChecked;
-        setIsChecked(!defaultChecked);
-        onCheck && onCheck(!defaultChecked ? value || "checked" : "");
-    }
-    return (_jsxs(FieldWrapper, { orientation: orientation, className: wrapperClassName, children: [label && _jsx(FieldLabel, { htmlFor: checkboxId, children: label }), _jsxs("button", { id: checkboxId, type: "button", className: className, onClick: handleCheck, ...rest, children: [_jsx("input", { type: "hidden", name: name, ref: checkboxRef, value: currentChecked ? value || "checked" : "" }), _jsx(Check, {})] }), errorMessage && _jsx(FieldError, { children: errorMessage })] }));
-}
-export { Checkbox };

package/dist/components/clientOnly.js

@@ -1,86 +0,0 @@
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-import { useHydrated } from "../hooks/useHydrated";
-/**
- * ClientOnly component - renders children only after hydration on the client side
- *
- * This component prevents hydration mismatches by rendering different content during SSR
- * and after client-side hydration. It's useful for components that rely on browser APIs
- * or need to render differently on server and client.
- *
- * @param props - ClientOnly component properties
- * @param props.children - Function that returns React nodes to render after hydration
- * @param props.fallback - Optional React node to render during SSR or before hydration
- *
- * @returns React fragment containing either fallback content or children based on hydration state
- *
- * @example
- * ```tsx
- * // Basic usage with loading fallback
- * <ClientOnly fallback={<div>Loading...</div>}>
- *   {() => <InteractiveWidget />}
- * </ClientOnly>
- *
- * // Client-only component without fallback
- * <ClientOnly>
- *   {() => (
- *     <div>
- *       <p>This content only appears on the client</p>
- *       <p>Current time: {new Date().toLocaleString()}</p>
- *     </div>
- *   )}
- * </ClientOnly>
- *
- * // Using with browser APIs
- * <ClientOnly fallback={<div>Preparing location services...</div>}>
- *   {() => <GeolocationComponent />}
- * </ClientOnly>
- *
- * // Complex interactive component
- * <ClientOnly fallback={<StaticPlaceholder />}>
- *   {() => (
- *     <div>
- *       <Chart data={chartData} />
- *       <InteractiveControls />
- *       <RealtimeUpdates />
- *     </div>
- *   )}
- * </ClientOnly>
- *
- * // Conditional rendering based on client capabilities
- * <ClientOnly fallback={<BasicTable data={data} />}>
- *   {() => (
- *     <AdvancedDataGrid
- *       data={data}
- *       features={['sorting', 'filtering', 'virtualization']}
- *     />
- *   )}
- * </ClientOnly>
- *
- * // Using with dynamic imports
- * <ClientOnly fallback={<div>Loading editor...</div>}>
- *   {() => <LazyCodeEditor />}
- * </ClientOnly>
- *
- * // Preventing layout shift
- * <ClientOnly fallback={<div className="skeleton-loader" />}>
- *   {() => <UserDashboard />}
- * </ClientOnly>
- *
- * // Multiple client-only sections
- * <div>
- *   <Header />
- *   <ClientOnly fallback={<div>Loading navigation...</div>}>
- *     {() => <InteractiveNavigation />}
- *   </ClientOnly>
- *   <MainContent />
- *   <ClientOnly>
- *     {() => <ChatWidget />}
- *   </ClientOnly>
- * </div>
- * ```
- */
-function ClientOnly(props) {
-    const { children, fallback = null } = props;
-    return useHydrated() ? _jsx(_Fragment, { children: children() }) : _jsx(_Fragment, { children: fallback });
-}
-export { ClientOnly };

package/dist/components/currencyInput/index.js

@@ -1,141 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Loader2 } from "lucide-react";
-import { useEffect, useId, useRef, useState, } from "react";
-import { useForm } from "../../hooks/useForm";
-import { IconRenderer } from "../../services/iconRenderer";
-import { maskCurrencyValues, normalizeValue, } from "../../services/maskCurrencyValues";
-import { FieldError } from "../fieldError";
-import { FieldLabel } from "../fieldLabel";
-import { FieldWrapper } from "../fieldWrapper";
-import "./style.css";
-/**
- * CurrencyInput component - used for currency input fields with automatic formatting based on locale
- *
- * @param props - CurrencyInput component properties
- * @param props.name - Required field name for form handling
- * @param props.locale - Currency locale for formatting (e.g., "USD", "EUR", "BRL", etc.)
- * @param props.label - Optional label text to display above the input
- * @param props.errorMessage - Error message to display below the input
- * @param props.isLoading - Controls loading state with spinner. Default: false
- * @param props.size - Input size. Default: "md"
- * @param props.variant - Visual variant of the input. Default: "solid"
- * @param props.prefix - Text or icon to display at the beginning of the input
- * @param props.suffix - Text or icon to display at the end of the input
- * @param props.showAsterisk - Whether to show asterisk on label for required fields
- * @param props.leftIcon - Optional icon to display on the left side
- * @param props.rightIcon - Optional icon to display on the right side
- * @param props.max - Maximum allowed value for the currency input
- * @param props.value - Controlled value (number) for the input
- * @param props.defaultValue - Default value (number) for uncontrolled usage
- * @param props.onChange - Callback function called when value changes, receives event, original value and masked value
- *
- * **...Other valid HTML properties for input element (except type, max, defaultValue, value, onChange)**
- *
- * @returns CurrencyInput JSX element wrapped in FieldGroup with optional label and error
- *
- * @example
- * ```tsx
- * // Basic currency input
- * <CurrencyInput name="price" locale="USD" placeholder="Enter price" />
- *
- * // Currency input with label and validation
- * <CurrencyInput
- *   name="salary"
- *   locale="BRL"
- *   label="Monthly Salary"
- *   showAsterisk
- *   errorMessage="Please enter a valid amount"
- * />
- *
- * // Currency input with icons and loading state
- * <CurrencyInput
- *   name="budget"
- *   locale="EUR"
- *   label="Budget"
- *   leftIcon={DollarSignIcon}
- *   rightIcon={CalculatorIcon}
- *   isLoading
- * />
- *
- * // Currency input with max value and controlled state
- * <CurrencyInput
- *   name="limit"
- *   locale="USD"
- *   label="Credit Limit"
- *   max={10000}
- *   value={creditLimit}
- *   onChange={(e, original, masked) => setCreditLimit(Number(original))}
- *   variant="outline"
- * />
- *
- * // Large currency input with prefix/suffix
- * <CurrencyInput
- *   name="investment"
- *   locale="GBP"
- *   label="Investment Amount"
- *   size="lg"
- *   variant="underline"
- *   prefix="£"
- *   suffix="GBP"
- *   placeholder="Enter investment amount"
- * />
- * ```
- */
-function CurrencyInput(props) {
-    const { name, disabled, title, style, variant = "solid", label, className: wrapperClassName = "", value, defaultValue, max = 1000000000, locale, onChange, prefix, suffix, isLoading = false, leftIcon, readOnly, onFocus, onBlur, errorMessage: baseErrorMessage, showAsterisk, rightIcon, size = "md", id, ...rest } = props;
-    const { fieldErrors } = useForm();
-    const [isFocused, setIsFocused] = useState(false);
-    const [maskedValue, setMaskedValue] = useState("0");
-    const inputRef = useRef(null);
-    const inputId = id || useId();
-    const errorMessage = baseErrorMessage || fieldErrors?.[name];
-    const isError = !!errorMessage;
-    const isDisabled = disabled || isLoading;
-    const iconSizes = { md: 20, lg: 20 };
-    const iconSize = iconSizes[size];
-    const loadingPosition = rightIcon ? "right" : "left";
-    const showLeftSpinner = loadingPosition === "left" && isLoading;
-    const showRightSpinner = loadingPosition === "right" && isLoading;
-    function handleSectionClick() {
-        if (isDisabled || !inputRef?.current)
-            return;
-        setIsFocused(true);
-        inputRef.current.focus();
-    }
-    function handleFocus(e) {
-        setIsFocused(true);
-        if (onFocus)
-            onFocus(e);
-    }
-    function handleBlur(e) {
-        setIsFocused(false);
-        if (onBlur)
-            onBlur(e);
-    }
-    const updateValues = (originalValue) => {
-        const [calculatedValue, calculatedMaskedValue] = maskCurrencyValues(originalValue, locale);
-        if (!max || calculatedValue <= max) {
-            setMaskedValue(calculatedMaskedValue);
-            return [calculatedValue, calculatedMaskedValue];
-        }
-        return maskCurrencyValues(originalValue, locale);
-    };
-    const handleChange = (event) => {
-        event.preventDefault();
-        const [originalValue, maskedValue] = updateValues(event.target.value);
-        onChange && onChange(event, String(originalValue), String(maskedValue));
-    };
-    useEffect(() => {
-        const currentValue = value || +defaultValue || undefined;
-        const [, maskedValue] = maskCurrencyValues(currentValue, locale);
-        setMaskedValue(maskedValue);
-    }, [locale, defaultValue, value]);
-    const hasPrefix = !!prefix ? "hasPrefix" : "";
-    const hasSuffix = !!suffix ? "hasSuffix" : "";
-    const errored = isError ? "errored" : "";
-    const opacity = isDisabled || readOnly || isLoading ? "opacity" : "";
-    const focused = isFocused ? "focused" : "";
-    const className = `arkynCurrencyInput ${hasPrefix} ${hasSuffix} ${variant} ${size} ${opacity} ${errored} ${focused}`;
-    return (_jsxs(FieldWrapper, { className: wrapperClassName, children: [label && (_jsx(FieldLabel, { showAsterisk: showAsterisk, htmlFor: inputId, children: label })), _jsxs("section", { title: title, style: style, className: className, onClick: handleSectionClick, children: [_jsx(IconRenderer, { iconSize: iconSize, icon: prefix, className: "prefix" }), _jsx(IconRenderer, { show: showLeftSpinner, iconSize: iconSize, className: "spinner", icon: Loader2 }), _jsx(IconRenderer, { show: !isLoading, icon: leftIcon, iconSize: iconSize }), _jsx("input", { disabled: isDisabled, readOnly: readOnly, ref: inputRef, onFocus: handleFocus, onBlur: handleBlur, onChange: handleChange, id: inputId, placeholder: isDisabled ? maskedValue : undefined, value: isDisabled ? undefined : maskedValue, ...rest }), _jsx("input", { type: "hidden", name: name, value: normalizeValue(maskedValue), readOnly: true }), _jsx(IconRenderer, { show: !isLoading, icon: rightIcon, iconSize: iconSize }), _jsx(IconRenderer, { show: showRightSpinner, iconSize: iconSize, className: "spinner", icon: Loader2 }), _jsx(IconRenderer, { iconSize: iconSize, icon: suffix, className: "suffix" })] }), errorMessage && _jsx(FieldError, { children: errorMessage })] }));
-}
-export { CurrencyInput };

package/dist/components/divider/index.js

@@ -1,45 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import "./styles.css";
-/**
- * Divider component - used to visually separate content sections
- *
- * @param props - Divider component properties
- * @param props.orientation - Divider orientation. Default: "horizontal"
- *
- * **...Other valid HTML properties for div**
- *
- * @returns Divider JSX element
- *
- * @example
- * ```tsx
- * // Basic horizontal divider
- * <Divider />
- *
- * // Explicit horizontal divider
- * <Divider orientation="horizontal" />
- *
- * // Vertical divider
- * <Divider orientation="vertical" />
- *
- * // Custom styled divider
- * <Divider
- *   orientation="horizontal"
- *   className="my-custom-divider"
- * />
- *
- * // Usage in layout
- * <div>
- *   <h2>Section 1</h2>
- *   <p>Content for section 1</p>
- *   <Divider />
- *   <h2>Section 2</h2>
- *   <p>Content for section 2</p>
- * </div>
- * ```
- */
-function Divider(props) {
-    const { className: baseClassName, orientation = "horizontal", ...rest } = props;
-    const className = `arkynDivider ${orientation} ${baseClassName}`;
-    return _jsx("div", { className: className.trim(), ...rest });
-}
-export { Divider };

package/dist/components/drawer/drawerContainer/index.js

@@ -1,75 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { AnimatePresence, motion } from "framer-motion";
-import { useScrollLock } from "../../../hooks/useScrollLock";
-import { DrawerProvider } from "../drawerContext";
-import "./styles.css";
-/**O
- * DrawerContainer component - animated slide-out panel for navigation or content
- *
- * @param props - DrawerContainer component properties
- * @param props.isVisible - Controls drawer visibility state
- * @param props.makeInvisible - Callback function to hide the drawer
- * @param props.orientation - Side from which drawer slides (left, right). Default: "left"
- *
- * **...Other valid HTML properties for aside element**
- *
- * @returns DrawerContainer JSX element
- *
- * @example
- * ```tsx
- * // Basic drawer from left
- * const [isOpen, setIsOpen] = useState(false);
- * <DrawerContainer
- *   isVisible={isOpen}
- *   makeInvisible={setIsOpen}
- * >
- *   <p>Drawer content</p>
- * </DrawerContainer>
- *
- * // Right-side drawer
- * <DrawerContainer
- *   isVisible={isOpen}
- *   makeInvisible={setIsOpen}
- *   orientation="right"
- * >
- *   <nav>Navigation items</nav>
- * </DrawerContainer>
- *
- * // Complete drawer example
- * function DrawerExample() {
- *   const [isDrawerOpen, setIsDrawerOpen] = useState(false);
- *
- *   return (
- *     <>
- *       <button onClick={() => setIsDrawerOpen(true)}>
- *         Open Menu
- *       </button>
- *
- *       <DrawerContainer
- *         isVisible={isDrawerOpen}
- *         makeInvisible={setIsDrawerOpen}
- *         orientation="right"
- *       >
- *         <div className="drawer-content">
- *           <h2>Menu</h2>
- *           <ul>
- *             <li>Home</li>
- *             <li>About</li>
- *             <li>Contact</li>
- *           </ul>
- *         </div>
- *       </DrawerContainer>
- *     </>
- *   );
- * }
- * ```
- */
-function DrawerContainer(props) {
-    const { isVisible, makeInvisible, orientation = "left", children, className: baseClassName, ...rest } = props;
-    useScrollLock(isVisible);
-    const translateX = orientation === "left" ? "-100%" : "100%";
-    const visibleClass = isVisible ? "visibleTrue" : "visibleFalse";
-    const className = `arkynDrawerContainer ${orientation} ${visibleClass} ${baseClassName}`;
-    return (_jsx(DrawerProvider, { makeInvisible: makeInvisible, children: _jsx(AnimatePresence, { children: isVisible && (_jsxs("aside", { className: className.trim(), ...rest, children: [_jsx(motion.div, { className: "arkynDrawerContainerOverlay", transition: { duration: 0.15, ease: "easeOut" }, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, onClick: makeInvisible }), _jsx(motion.div, { className: "arkynDrawerContainerContent", transition: { ease: "easeOut", duration: 0.15 }, initial: { transform: `translateX(${translateX})` }, animate: { transform: "translateX(0px)" }, exit: { transform: `translateX(${translateX})` }, children: children })] })) }) }));
-}
-export { DrawerContainer };