@arkyn/components 3.0.1-beta.95 → 3.0.2

package/dist/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/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/components/table/tableBody/index.js

@@ -1,69 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Children } from "react";
-import "./styles.css";
-/**
- * TableBody component - used to render the main content section of a table with empty state handling
- *
- * @param props - TableBody component properties
- * @param props.emptyMessage - Message to display when no children are provided. Default: "Nenhum dado adicionado."
- *
- * **...All valid HTML properties for tbody element**
- *
- * @returns TableBody JSX element
- *
- * @example
- * ```tsx
- * // Basic table body with data
- * <TableBody>
- *   <tr>
- *     <td>John Doe</td>
- *     <td>john@example.com</td>
- *   </tr>
- *   <tr>
- *     <td>Jane Smith</td>
- *     <td>jane@example.com</td>
- *   </tr>
- * </TableBody>
- *
- * // Empty table body with custom message
- * <TableBody emptyMessage="No users found. Please add some users to get started." />
- *
- * // Table body with dynamic content and custom styling
- * <TableBody className="striped-rows" emptyMessage="No products available">
- *   {products.map(product => (
- *     <tr key={product.id}>
- *       <td>{product.name}</td>
- *       <td>{product.price}</td>
- *       <td>{product.stock}</td>
- *     </tr>
- *   ))}
- * </TableBody>
- *
- * // Complete table usage
- * <TableContainer>
- *   <TableHeader>
- *     <th>Name</th>
- *     <th>Status</th>
- *     <th>Actions</th>
- *   </TableHeader>
- *   <TableBody emptyMessage="No data to display">
- *     {data.map(item => (
- *       <tr key={item.id}>
- *         <td>{item.name}</td>
- *         <td>{item.status}</td>
- *         <td>
- *           <Button>Edit</Button>
- *         </td>
- *       </tr>
- *     ))}
- *   </TableBody>
- * </TableContainer>
- * ```
- */
-function TableBody(props) {
-    const { emptyMessage = "Nenhum dado adicionado.", className: baseClassName, children, ...rest } = props;
-    const className = `arkynTableBody ${baseClassName}`;
-    const isEmpty = Children.count(children) === 0;
-    return (_jsx("tbody", { className: className.trim(), ...rest, children: isEmpty ? (_jsx("tr", { className: "arkynTableBodyEmptyLine", children: _jsx("td", { colSpan: 100, children: _jsx("div", { children: emptyMessage }) }) })) : (children) }));
-}
-export { TableBody };

package/dist/components/table/tableCaption/index.js

@@ -1,64 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import "./styles.css";
-/**
- * TableCaption component - used to provide a title or description for a table with proper styling
- *
- * @param props - TableCaption component properties
- *
- * **...All valid HTML properties for caption element**
- *
- * @returns TableCaption JSX element
- *
- * @example
- * ```tsx
- * // Basic table caption
- * <TableContainer>
- *   <TableCaption>
- *     User Management
- *   </TableCaption>
- *   <TableHeader>
- *     <th>Name</th>
- *     <th>Email</th>
- *   </TableHeader>
- *   <TableBody>
- *     // table rows...
- *   </TableBody>
- * </TableContainer>
- *
- * // Table caption with custom styling
- * <TableContainer>
- *   <TableCaption className="highlighted-caption">
- *     Sales Report - Q4 2024
- *   </TableCaption>
- *   <TableHeader>
- *     <th>Product</th>
- *     <th>Revenue</th>
- *   </TableHeader>
- *   <TableBody>
- *     // table rows...
- *   </TableBody>
- * </TableContainer>
- *
- * // Caption with rich content
- * <TableContainer>
- *   <TableCaption>
- *     <h3>Employee Directory</h3>
- *     <p>Updated: {new Date().toLocaleDateString()}</p>
- *   </TableCaption>
- *   <TableHeader>
- *     <th>Employee ID</th>
- *     <th>Name</th>
- *     <th>Department</th>
- *   </TableHeader>
- *   <TableBody>
- *     // table rows...
- *   </TableBody>
- * </TableContainer>
- * ```
- */
-function TableCaption(props) {
-    const { className: baseClassName, children, ...rest } = props;
-    const className = `arkynTableCaption ${baseClassName}`;
-    return (_jsx("caption", { className: className.trim(), ...rest, children: _jsx("div", { className: "arkynTableCaptionContent", children: children }) }));
-}
-export { TableCaption };

package/dist/components/table/tableContainer/index.js

@@ -1,66 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import "./styles.css";
-/**
- * TableContainer component - wraps table content in a styled container with responsive behavior
- *
- * @param props - TableContainer component properties
- *
- * **...All valid HTML properties for table element**
- *
- * @returns TableContainer JSX element
- *
- * @example
- * ```tsx
- * // Basic table container
- * <TableContainer>
- *   <TableHeader>
- *     <th>Name</th>
- *     <th>Email</th>
- *   </TableHeader>
- *   <TableBody>
- *     <tr>
- *       <td>John Doe</td>
- *       <td>john@example.com</td>
- *     </tr>
- *   </TableBody>
- * </TableContainer>
- *
- * // Table container with custom styling
- * <TableContainer className="custom-table">
- *   <TableCaption>
- *     User Management Table
- *   </TableCaption>
- *   <TableHeader>
- *     <th>ID</th>
- *     <th>User</th>
- *     <th>Status</th>
- *   </TableHeader>
- *   <TableBody emptyMessage="No users found">
- *     // table rows...
- *   </TableBody>
- *   <TableFooter>
- *     <Pagination />
- *   </TableFooter>
- * </TableContainer>
- *
- * // Responsive table with overflow handling
- * <TableContainer style={{ maxWidth: '100%', overflowX: 'auto' }}>
- *   <TableHeader>
- *     <th>Product</th>
- *     <th>Description</th>
- *     <th>Price</th>
- *     <th>Stock</th>
- *     <th>Actions</th>
- *   </TableHeader>
- *   <TableBody>
- *     // table rows...
- *   </TableBody>
- * </TableContainer>
- * ```
- */
-function TableContainer(props) {
-    const { children, className: baseClassName, ...rest } = props;
-    const className = `arkynTableContainer ${baseClassName}`;
-    return (_jsx("div", { className: className.trim(), ...rest, children: _jsx("table", { children: children }) }));
-}
-export { TableContainer };

package/dist/components/table/tableFooter/index.js

@@ -1,47 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import "./styles.css";
-/**
- * TableFooter component - used to render the footer section of a table with content container
- *
- * @param props - TableFooter component properties
- *
- * **...All valid HTML properties for tfoot element**
- *
- * @returns TableFooter JSX element
- *
- * @example
- * ```tsx
- * // Basic table footer with pagination
- * <TableFooter>
- *   <div>Showing 1-10 of 100 results</div>
- *   <Pagination />
- * </TableFooter>
- *
- * // Table footer with custom styling
- * <TableFooter className="custom-footer">
- *   <Button>Load More</Button>
- * </TableFooter>
- *
- * // Complete table usage
- * <TableContainer>
- *   <TableHeader>
- *     <th>Name</th>
- *     <th>Email</th>
- *   </TableHeader>
- *   <TableBody>
- *     // table rows...
- *   </TableBody>
- *   <TableFooter>
- *     <div className="pagination-info">
- *       Total: 250 items
- *     </div>
- *   </TableFooter>
- * </TableContainer>
- * ```
- */
-function TableFooter(props) {
-    const { className: baseClassName, children, ...rest } = props;
-    const className = `arkynTableFooter ${baseClassName}`;
-    return (_jsxs("tfoot", { className: className.trim(), ...rest, children: [_jsx("tr", { className: "spacingRow" }), _jsx("tr", { children: _jsx("th", { colSpan: 100, children: _jsx("div", { className: "arkynTableFooterContent", children: children }) }) })] }));
-}
-export { TableFooter };

package/dist/components/table/tableHeader/index.js

@@ -1,46 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import "./styles.css";
-/**
- * TableHeader component - used to render the header section of a table with automatic spacing
- *
- * @param props - TableHeader component properties
- *
- * **...All valid HTML properties for thead element**
- *
- * @returns TableHeader JSX element
- *
- * @example
- * ```tsx
- * // Basic table header
- * <TableHeader>
- *   <th>Name</th>
- *   <th>Email</th>
- *   <th>Actions</th>
- * </TableHeader>
- *
- * // Table header with custom styling
- * <TableHeader className="custom-header">
- *   <th>Product</th>
- *   <th>Price</th>
- *   <th>Stock</th>
- * </TableHeader>
- *
- * // Complete table usage
- * <TableContainer>
- *   <TableHeader>
- *     <th>ID</th>
- *     <th>User</th>
- *     <th>Status</th>
- *   </TableHeader>
- *   <TableBody>
- *     // table rows...
- *   </TableBody>
- * </TableContainer>
- * ```
- */
-function TableHeader(props) {
-    const { className: baseClassName, children, ...rest } = props;
-    const className = `arkynTableHeader ${baseClassName}`;
-    return (_jsxs("thead", { className: className.trim(), ...rest, children: [_jsx("tr", { children: children }), _jsx("tr", { className: "spacingRow" })] }));
-}
-export { TableHeader };

package/dist/components/textarea/index.js

@@ -1,128 +0,0 @@
-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: wrapperClassName, 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}`;
-    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, { className: wrapperClassName, 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, name: name, onFocus: handleFocus, onBlur: handleBlur, defaultValue: defaultValue || "", placeholder: disabled ? value || placeholder : placeholder, value: disabled ? undefined : value, ...rest }) }), errorMessage && _jsx(FieldError, { children: errorMessage })] }));
-}
-export { Textarea };

package/dist/components/tooltip/index.js

@@ -1,135 +0,0 @@
-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 };