@arkyn/components 3.0.1-beta.20 → 3.0.1-beta.201

package/dist/src/components/switch/index.js

@@ -1,99 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useId, useRef, useState } from "react";
-import "./styles.css";
-import { FieldWrapper } from "../fieldWrapper";
-import { FieldLabel } from "../fieldLabel";
-/**
- * Switch component - used for creating toggle switches with on/off states
- *
- * @param props - Switch component properties
- * @param props.name - Required field name for form handling and input identification
- * @param props.label - Optional label text to display next to the switch
- * @param props.size - Size variant of the switch. Default: "lg"
- * @param props.defaultChecked - Default checked state for uncontrolled usage. Default: false
- * @param props.checked - Controlled checked state of the switch
- * @param props.value - Value to be used when switch is checked. Default: "checked"
- * @param props.unCheckedValue - Value to be used when switch is unchecked. Default: ""
- * @param props.onCheck - Callback function called when switch state changes, receives the current value
- *
- * **...Other valid HTML properties for button element (except children, onChange, defaultValue, onCheck, value)**
- *
- * @returns Switch JSX element wrapped in FieldWrapper with optional label
- *
- * @example
- * ```tsx
- * // Basic switch
- * <Switch name="notifications" label="Enable notifications" />
- *
- * // Switch with custom values
- * <Switch
- *   name="theme"
- *   label="Dark mode"
- *   value="dark"
- *   unCheckedValue="light"
- *   onCheck={(value) => console.log('Theme:', value)}
- * />
- *
- * // Controlled switch with callback
- * <Switch
- *   name="autoSave"
- *   label="Auto-save documents"
- *   checked={isAutoSaveEnabled}
- *   onCheck={(value) => setIsAutoSaveEnabled(!!value)}
- *   size="md"
- * />
- *
- * // Small switch with default checked state
- * <Switch
- *   name="marketing"
- *   label="Marketing emails"
- *   size="sm"
- *   defaultChecked={true}
- *   value="subscribed"
- *   unCheckedValue="unsubscribed"
- * />
- *
- * // Switch with custom styling and disabled state
- * <Switch
- *   name="premium"
- *   label="Premium features"
- *   className="premium-switch"
- *   disabled={!isPremiumUser}
- *   onCheck={(value) => handlePremiumToggle(value)}
- * />
- *
- * // Large switch for accessibility
- * <Switch
- *   name="accessibility"
- *   label="High contrast mode"
- *   size="lg"
- *   checked={isHighContrast}
- *   onCheck={(value) => setIsHighContrast(!!value)}
- *   value="enabled"
- *   unCheckedValue="disabled"
- * />
- *
- * // Switch without label for inline usage
- * <Switch
- *   name="inline_toggle"
- *   value="on"
- *   unCheckedValue="off"
- *   onCheck={(value) => console.log('Toggle state:', value)}
- * />
- * ```
- */
-function Switch(props) {
-    const { label, size = "lg", defaultChecked = false, checked: baseChecked = null, value, unCheckedValue = "", name, className: baseClassName = "", onCheck, id, ...rest } = props;
-    const inputRef = useRef(null);
-    const inputId = id || useId();
-    const [isChecked, setIsChecked] = useState(defaultChecked);
-    const currentChecked = typeof baseChecked === "boolean" ? baseChecked : isChecked;
-    function handleCheck() {
-        setIsChecked(!isChecked);
-        onCheck && onCheck(!currentChecked ? value || "checked" : unCheckedValue);
-    }
-    const checkedClass = currentChecked ? "checkedTrue" : "checkedFalse";
-    const className = `arkynSwitch ${checkedClass} ${size} ${baseClassName}`;
-    return (_jsxs(FieldWrapper, { children: [label && _jsx(FieldLabel, { children: label }), _jsx("button", { type: "button", onClick: handleCheck, className: className, ...rest, children: _jsx("input", { id: inputId, type: "hidden", name: name, ref: inputRef, onClick: handleCheck, value: currentChecked ? value || "checked" : unCheckedValue }) })] }));
-}
-export { Switch };

package/dist/src/components/tab/tabButton/index.d.ts

@@ -1,72 +0,0 @@
-import { ButtonHTMLAttributes, ReactNode } from "react";
-import "./styles.css";
-type TabButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children" | "value" | "type"> & {
-    children: ReactNode;
-    value: string;
-};
-/**
- * TabButton component - used as interactive buttons within a TabContainer for tab navigation
- *
- * @param props - TabButton 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 TabContainer's disabled state
- *
- * **...Other valid HTML button properties except children, value, and type**
- *
- * @returns TabButton JSX element
- *
- * @example
- * ```tsx
- * // Basic tab buttons within TabContainer
- * <TabContainer>
- *   <TabButton value="home">Home</TabButton>
- *   <TabButton value="about">About</TabButton>
- *   <TabButton value="contact">Contact</TabButton>
- * </TabContainer>
- * ```
- *
- * @example
- * ```tsx
- * // Tab button with click handler
- * <TabContainer onChange={(value) => console.log('Tab changed:', value)}>
- *   <TabButton
- *     value="profile"
- *     onClick={() => console.log('Profile tab clicked')}
- *   >
- *     Profile
- *   </TabButton>
- *   <TabButton value="settings">Settings</TabButton>
- * </TabContainer>
- * ```
- *
- * @example
- * ```tsx
- * // Disabled tab button
- * <TabContainer>
- *   <TabButton value="available">Available</TabButton>
- *   <TabButton value="coming-soon" disabled>
- *     Coming Soon
- *   </TabButton>
- * </TabContainer>
- * ```
- *
- * @example
- * ```tsx
- * // Tab buttons with custom styling and default value
- * <TabContainer defaultValue="dashboard">
- *   <TabButton
- *     value="dashboard"
- *     className="custom-tab"
- *     aria-label="Dashboard tab"
- *   >
- *     Dashboard
- *   </TabButton>
- *   <TabButton value="analytics">Analytics</TabButton>
- *   <TabButton value="reports">Reports</TabButton>
- * </TabContainer>
- * ```
- */
-declare function TabButton(props: TabButtonProps): import("react/jsx-runtime").JSX.Element;
-export { TabButton };
-//# sourceMappingURL=index.d.ts.map

package/dist/src/components/tab/tabButton/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/tab/tabButton/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAc,SAAS,EAAE,MAAM,OAAO,CAAC;AAGpE,OAAO,cAAc,CAAC;AAEtB,KAAK,cAAc,GAAG,IAAI,CACxB,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,SAAS,CAAC,KAAK,EAAE,cAAc,2CAkCvC;AAED,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/dist/src/components/tab/tabButton/index.js

@@ -1,80 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useTab } from "../tabContext";
-import "./styles.css";
-/**
- * TabButton component - used as interactive buttons within a TabContainer for tab navigation
- *
- * @param props - TabButton 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 TabContainer's disabled state
- *
- * **...Other valid HTML button properties except children, value, and type**
- *
- * @returns TabButton JSX element
- *
- * @example
- * ```tsx
- * // Basic tab buttons within TabContainer
- * <TabContainer>
- *   <TabButton value="home">Home</TabButton>
- *   <TabButton value="about">About</TabButton>
- *   <TabButton value="contact">Contact</TabButton>
- * </TabContainer>
- * ```
- *
- * @example
- * ```tsx
- * // Tab button with click handler
- * <TabContainer onChange={(value) => console.log('Tab changed:', value)}>
- *   <TabButton
- *     value="profile"
- *     onClick={() => console.log('Profile tab clicked')}
- *   >
- *     Profile
- *   </TabButton>
- *   <TabButton value="settings">Settings</TabButton>
- * </TabContainer>
- * ```
- *
- * @example
- * ```tsx
- * // Disabled tab button
- * <TabContainer>
- *   <TabButton value="available">Available</TabButton>
- *   <TabButton value="coming-soon" disabled>
- *     Coming Soon
- *   </TabButton>
- * </TabContainer>
- * ```
- *
- * @example
- * ```tsx
- * // Tab buttons with custom styling and default value
- * <TabContainer defaultValue="dashboard">
- *   <TabButton
- *     value="dashboard"
- *     className="custom-tab"
- *     aria-label="Dashboard tab"
- *   >
- *     Dashboard
- *   </TabButton>
- *   <TabButton value="analytics">Analytics</TabButton>
- *   <TabButton value="reports">Reports</TabButton>
- * </TabContainer>
- * ```
- */
-function TabButton(props) {
-    const { children, disabled: rawDisabled = false, className: baseClassName = "", onClick, value, ...rest } = props;
-    const { disabled, currentTab, changeCurrentTab } = useTab();
-    const isDisabled = disabled || rawDisabled;
-    const disabledClass = isDisabled ? "isDisabled" : "";
-    const activeClass = currentTab === value && value ? "isActive" : "";
-    const className = `arkynTabButton ${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 { TabButton };

package/dist/src/components/tab/tabContainer/index.d.ts

@@ -1,83 +0,0 @@
-import { HTMLAttributes, ReactNode } from "react";
-import "./styles.css";
-type TabContainerProps = Omit<HTMLAttributes<HTMLElement>, "onClick" | "children" | "ref"> & {
-    children: ReactNode;
-    disabled?: boolean;
-    defaultValue?: string;
-    onChange?: (index: string) => void;
-};
-/**
- * TabContainer component - used as a wrapper for TabButton components to create tabbed navigation
- *
- * @param props - TabContainer component properties
- * @param props.children - TabButton 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 TabContainer JSX element
- *
- * @example
- * ```tsx
- * // Basic tab container
- * <TabContainer>
- *   <TabButton value="home">Home</TabButton>
- *   <TabButton value="about">About</TabButton>
- *   <TabButton value="contact">Contact</TabButton>
- * </TabContainer>
- * ```
- *
- * @example
- * ```tsx
- * // Tab container with default value and change handler
- * <TabContainer
- *   defaultValue="dashboard"
- *   onChange={(value) => console.log('Active tab:', value)}
- * >
- *   <TabButton value="dashboard">Dashboard</TabButton>
- *   <TabButton value="analytics">Analytics</TabButton>
- *   <TabButton value="settings">Settings</TabButton>
- * </TabContainer>
- * ```
- *
- * @example
- * ```tsx
- * // Disabled all tabs
- * <TabContainer disabled>
- *   <TabButton value="tab1">Tab 1</TabButton>
- *   <TabButton value="tab2">Tab 2</TabButton>
- * </TabContainer>
- * ```
- *
- * @example
- * ```tsx
- * // Tab container with custom styling and state management
- * function MyTabs() {
- *   const [activeTab, setActiveTab] = useState('profile');
- *
- *   return (
- *     <div>
- *       <TabContainer
- *         defaultValue={activeTab}
- *         onChange={setActiveTab}
- *         className="custom-tabs"
- *         role="tablist"
- *       >
- *         <TabButton value="profile">Profile</TabButton>
- *         <TabButton value="account">Account</TabButton>
- *         <TabButton value="notifications">Notifications</TabButton>
- *       </TabContainer>
- *
- *       {activeTab === 'profile' && <ProfileContent />}
- *       {activeTab === 'account' && <AccountContent />}
- *       {activeTab === 'notifications' && <NotificationsContent />}
- *     </div>
- *   );
- * }
- * ```
- */
-declare function TabContainer(props: TabContainerProps): import("react/jsx-runtime").JSX.Element;
-export { TabContainer };
-//# sourceMappingURL=index.d.ts.map

package/dist/src/components/tab/tabContainer/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/tab/tabContainer/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAY,MAAM,OAAO,CAAC;AAG5D,OAAO,cAAc,CAAC;AAEtB,KAAK,iBAAiB,GAAG,IAAI,CAC3B,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,YAAY,CAAC,KAAK,EAAE,iBAAiB,2CA8B7C;AAED,OAAO,EAAE,YAAY,EAAE,CAAC"}

package/dist/src/components/tab/tabContainer/index.js

@@ -1,88 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useState } from "react";
-import { TabProvider } from "../tabContext";
-import "./styles.css";
-/**
- * TabContainer component - used as a wrapper for TabButton components to create tabbed navigation
- *
- * @param props - TabContainer component properties
- * @param props.children - TabButton 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 TabContainer JSX element
- *
- * @example
- * ```tsx
- * // Basic tab container
- * <TabContainer>
- *   <TabButton value="home">Home</TabButton>
- *   <TabButton value="about">About</TabButton>
- *   <TabButton value="contact">Contact</TabButton>
- * </TabContainer>
- * ```
- *
- * @example
- * ```tsx
- * // Tab container with default value and change handler
- * <TabContainer
- *   defaultValue="dashboard"
- *   onChange={(value) => console.log('Active tab:', value)}
- * >
- *   <TabButton value="dashboard">Dashboard</TabButton>
- *   <TabButton value="analytics">Analytics</TabButton>
- *   <TabButton value="settings">Settings</TabButton>
- * </TabContainer>
- * ```
- *
- * @example
- * ```tsx
- * // Disabled all tabs
- * <TabContainer disabled>
- *   <TabButton value="tab1">Tab 1</TabButton>
- *   <TabButton value="tab2">Tab 2</TabButton>
- * </TabContainer>
- * ```
- *
- * @example
- * ```tsx
- * // Tab container with custom styling and state management
- * function MyTabs() {
- *   const [activeTab, setActiveTab] = useState('profile');
- *
- *   return (
- *     <div>
- *       <TabContainer
- *         defaultValue={activeTab}
- *         onChange={setActiveTab}
- *         className="custom-tabs"
- *         role="tablist"
- *       >
- *         <TabButton value="profile">Profile</TabButton>
- *         <TabButton value="account">Account</TabButton>
- *         <TabButton value="notifications">Notifications</TabButton>
- *       </TabContainer>
- *
- *       {activeTab === 'profile' && <ProfileContent />}
- *       {activeTab === 'account' && <AccountContent />}
- *       {activeTab === 'notifications' && <NotificationsContent />}
- *     </div>
- *   );
- * }
- * ```
- */
-function TabContainer(props) {
-    const { children, onChange, defaultValue, disabled = false, className: baseClassName, ...rest } = props;
-    const [currentTab, setCurrentTab] = useState(defaultValue || "");
-    const className = `arkynTabContainer ${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 { TabContainer };

package/dist/src/components/tab/tabContext.d.ts

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

package/dist/src/components/tab/tabContext.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"tabContext.d.ts","sourceRoot":"","sources":["../../../../src/components/tab/tabContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,SAAS,EAAc,MAAM,OAAO,CAAC;AAE7D,KAAK,eAAe,GAAG;IACrB,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,MAAM,oBAEd;AAED,iBAAS,WAAW,CAAC,KAAK,EAAE,gBAAgB,2CAI3C;AAED,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,CAAC"}

package/dist/src/components/tab/tabContext.js

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

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

@@ -1,103 +0,0 @@
-import { TextareaHTMLAttributes } from "react";
-import "./styles.css";
-type TextareaProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "name"> & {
-    name: string;
-    label?: string;
-    showAsterisk?: boolean;
-    errorMessage?: string;
-    size?: "md" | "lg";
-    variant?: "solid" | "outline";
-};
-/**
- * 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/src/components/textarea/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/textarea/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,sBAAsB,EAIvB,MAAM,OAAO,CAAC;AAMf,OAAO,cAAc,CAAC;AAEtB,KAAK,aAAa,GAAG,IAAI,CACvB,sBAAsB,CAAC,mBAAmB,CAAC,EAC3C,MAAM,CACP,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;CAC/B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyFG;AAEH,iBAAS,QAAQ,CAAC,KAAK,EAAE,aAAa,2CAuErC;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC"}