@arkyn/components 3.0.1-beta.4 → 3.0.1-beta.41

package/dist/components/cardTab/cardTabButton/index.d.ts

@@ -0,0 +1,72 @@
+import { ButtonHTMLAttributes, ReactNode } from "react";
+import "./styles.css";
+type CardTabButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children" | "value" | "type"> & {
+    children: ReactNode;
+    value: string;
+};
+/**
+ * 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>
+ * ```
+ */
+declare function CardTabButton(props: CardTabButtonProps): import("react/jsx-runtime").JSX.Element;
+export { CardTabButton };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/cardTab/cardTabButton/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/cardTab/cardTabButton/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAc,SAAS,EAAE,MAAM,OAAO,CAAC;AAGpE,OAAO,cAAc,CAAC;AAEtB,KAAK,kBAAkB,GAAG,IAAI,CAC5B,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,UAAU,GAAG,OAAO,GAAG,MAAM,CAC9B,GAAG;IACF,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8DG;AAEH,iBAAS,aAAa,CAAC,KAAK,EAAE,kBAAkB,2CAkC/C;AAED,OAAO,EAAE,aAAa,EAAE,CAAC"}

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

@@ -0,0 +1,80 @@
+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.d.ts

@@ -0,0 +1,83 @@
+import { HTMLAttributes, ReactNode } from "react";
+import "./styles.css";
+type CardTabContainerProps = Omit<HTMLAttributes<HTMLElement>, "onClick" | "children" | "ref"> & {
+    children: ReactNode;
+    disabled?: boolean;
+    defaultValue?: string;
+    onChange?: (index: string) => void;
+};
+/**
+ * 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>
+ *   );
+ * }
+ * ```
+ */
+declare function CardTabContainer(props: CardTabContainerProps): import("react/jsx-runtime").JSX.Element;
+export { CardTabContainer };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/cardTab/cardTabContainer/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/cardTab/cardTabContainer/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAY,MAAM,OAAO,CAAC;AAG5D,OAAO,cAAc,CAAC;AAEtB,KAAK,qBAAqB,GAAG,IAAI,CAC/B,cAAc,CAAC,WAAW,CAAC,EAC3B,SAAS,GAAG,UAAU,GAAG,KAAK,CAC/B,GAAG;IACF,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuEG;AAEH,iBAAS,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,2CA8BrD;AAED,OAAO,EAAE,gBAAgB,EAAE,CAAC"}

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

@@ -0,0 +1,88 @@
+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.d.ts

@@ -0,0 +1,16 @@
+import { ReactNode } from "react";
+type CardTabContextProps = {
+    disabled: boolean;
+    currentTab: string;
+    changeCurrentTab: (tab: string) => void;
+};
+type TabProviderProps = {
+    children: ReactNode;
+    disabled: boolean;
+    currentTab: string;
+    changeCurrentTab: (tab: string) => void;
+};
+declare function useCardTab(): CardTabContextProps;
+declare function TabProvider(props: TabProviderProps): import("react/jsx-runtime").JSX.Element;
+export { TabProvider, useCardTab };
+//# sourceMappingURL=cardTabContext.d.ts.map

package/dist/components/cardTab/cardTabContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cardTabContext.d.ts","sourceRoot":"","sources":["../../../src/components/cardTab/cardTabContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,SAAS,EAAc,MAAM,OAAO,CAAC;AAE7D,KAAK,mBAAmB,GAAG;IACzB,QAAQ,EAAE,OAAO,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,gBAAgB,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC,CAAC;AAEF,KAAK,gBAAgB,GAAG;IACtB,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,EAAE,OAAO,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,gBAAgB,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC,CAAC;AAIF,iBAAS,UAAU,wBAElB;AAED,iBAAS,WAAW,CAAC,KAAK,EAAE,gBAAgB,2CAM3C;AAED,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,CAAC"}

package/dist/components/cardTab/cardTabContext.js

@@ -0,0 +1,10 @@
+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.d.ts

@@ -0,0 +1,73 @@
+import { ButtonHTMLAttributes } from "react";
+import "./styles.css";
+type CheckboxProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "size" | "prefix" | "type" | "name" | "defaultValue" | "value" | "onChange" | "onSelect" | "onClick"> & {
+    label?: string;
+    errorMessage?: string;
+    size?: "md" | "lg" | "sm";
+    name: string;
+    value?: string;
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onCheck?: (value: string) => void;
+};
+/**
+ * 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
+ *
+ * **...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}
+ * />
+ * ```
+ */
+declare function Checkbox(props: CheckboxProps): import("react/jsx-runtime").JSX.Element;
+export { Checkbox };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAA2B,MAAM,OAAO,CAAC;AAOtE,OAAO,cAAc,CAAC;AAEtB,KAAK,aAAa,GAAG,IAAI,CACvB,oBAAoB,CAAC,iBAAiB,CAAC,EACrC,MAAM,GACN,QAAQ,GACR,MAAM,GACN,MAAM,GACN,cAAc,GACd,OAAO,GACP,UAAU,GACV,UAAU,GACV,SAAS,CACZ,GAAG;IACF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAE1B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyDG;AAEH,iBAAS,QAAQ,CAAC,KAAK,EAAE,aAAa,2CA6DrC;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/dist/components/checkbox/index.js

@@ -0,0 +1,86 @@
+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
+ *
+ * **...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: baseClassName = "", size = "md", errorMessage: baseErrorMessage, defaultChecked = false, label, checked: baseChecked = null, onCheck, 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} ${baseClassName}`;
+    function handleCheck() {
+        const defaultChecked = isChecked;
+        setIsChecked(!defaultChecked);
+        onCheck && onCheck(!defaultChecked ? value || "checked" : "");
+    }
+    return (_jsxs(FieldWrapper, { children: [label && _jsx(FieldLabel, { 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.d.ts

@@ -0,0 +1,86 @@
+type ClientOnlyProps = {
+    children(): React.ReactNode;
+    fallback?: React.ReactNode;
+};
+/**
+ * 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>
+ * ```
+ */
+declare function ClientOnly(props: ClientOnlyProps): import("react/jsx-runtime").JSX.Element;
+export { ClientOnly };
+//# sourceMappingURL=clientOnly.d.ts.map

package/dist/components/clientOnly.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"clientOnly.d.ts","sourceRoot":"","sources":["../../src/components/clientOnly.tsx"],"names":[],"mappings":"AAEA,KAAK,eAAe,GAAG;IACrB,QAAQ,IAAI,KAAK,CAAC,SAAS,CAAC;IAC5B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8EG;AAEH,iBAAS,UAAU,CAAC,KAAK,EAAE,eAAe,2CAGzC;AAED,OAAO,EAAE,UAAU,EAAE,CAAC"}