fictoan-react 1.10.1 → 1.10.4

package/dist/{hooks/UseClickOutside.js → UseClickOutside-CJ5IQE6n.js}

@@ -19,5 +19,5 @@ const useClickOutside = (ref, handler) => {
   }, [ref, memoizedHandler]);
 };
 export {
-  useClickOutside
+  useClickOutside as u
 };

package/dist/components/Accordion/Accordion.js

@@ -3,7 +3,6 @@
 import React from "react";
 import { Element } from "../Element/Element.js";
 import { Text } from "../Typography/Text.js";
-/* empty css              */
 const Accordion = React.forwardRef(
   ({ summary, children, open = false, ...props }, ref) => {
     return /* @__PURE__ */ React.createElement(

package/dist/components/Badge/Badge.js

@@ -3,7 +3,6 @@
 import React from "react";
 import { Element } from "../Element/Element.js";
 import { Text } from "../Typography/Text.js";
-/* empty css          */
 const Badge = React.forwardRef(
   ({
     children,

package/dist/components/Breadcrumbs/Breadcrumbs.js

@@ -4,7 +4,6 @@ import React from "react";
 import { Element } from "../Element/Element.js";
 import "../Element/Tags.js";
 import { Text } from "../Typography/Text.js";
-/* empty css                */
 const BreadcrumbItem = React.forwardRef(
   ({ children, current, ...props }, ref) => {
     return /* @__PURE__ */ React.createElement(

package/dist/components/Button/Button.js

@@ -2,7 +2,6 @@
 "use client;";
 import React from "react";
 import { Element } from "../Element/Element.js";
-/* empty css           */
 const Button = React.forwardRef(
   ({ size = "medium", shape, kind, isLoading, hasDelete, label, ...props }, ref) => {
     let classNames = [];

package/dist/components/Callout/Callout.js

@@ -3,7 +3,6 @@
 import React from "react";
 import { Element } from "../Element/Element.js";
 import "../Element/Tags.js";
-/* empty css            */
 const Callout = React.forwardRef(
   ({ kind, children, title, ...props }, ref) => {
     const roleMap = {

package/dist/components/Card/Card.js

@@ -2,7 +2,6 @@
 "use client;";
 import React from "react";
 import { Element } from "../Element/Element.js";
-/* empty css         */
 const Card = React.forwardRef(({ shape, heading, children, ...props }, ref) => {
   let classNames = [];
   if (shape) {

package/dist/components/CodeBlock/CodeBlock.js

@@ -4,7 +4,6 @@ import React, { useState, useRef, useEffect, useCallback } from "react";
 import { Element } from "../Element/Element.js";
 import { Button } from "../Button/Button.js";
 import { Badge } from "../Badge/Badge.js";
-/* empty css              */
 const CodeBlock = React.forwardRef(({
   children,
   source,

package/dist/components/Divider/Divider.js

@@ -2,7 +2,6 @@
 "use client;";
 import React from "react";
 import { Element } from "../Element/Element.js";
-/* empty css            */
 const Divider = React.forwardRef(
   ({ kind, height, label, ...props }, ref) => {
     let classNames = [];

package/dist/components/Drawer/Drawer.js

@@ -3,8 +3,7 @@
 import React, { useState, useRef, useEffect } from "react";
 import { Element } from "../Element/Element.js";
 import { Div } from "../Element/Tags.js";
-/* empty css           */
-import { useClickOutside } from "../../hooks/UseClickOutside.js";
+import { u as useClickOutside } from "../../UseClickOutside-CJ5IQE6n.js";
 const Drawer = React.forwardRef(
   ({
     children,

package/dist/components/Element/Element.js

@@ -1,7 +1,9 @@
 "use client";
 "use client;";
 import React from "react";
-import { createClassName } from "../../utils/classNames.js";
+const createClassName = (classNames) => {
+  return classNames.filter((item) => !!item).join(" ");
+};
 const Element = React.forwardRef(
   ({
     as: Component = "div",

package/dist/components/Form/Checkbox/Checkbox.js

@@ -1,12 +1,25 @@
 "use client";
 "use client;";
-import React from "react";
+import React, { useMemo } from "react";
 import { Element } from "../../Element/Element.js";
 import { BaseInputComponent } from "../BaseInputComponent/BaseInputComponent.js";
-/* empty css             */
-const Checkbox = React.forwardRef(({ ...props }, ref) => {
-  return /* @__PURE__ */ React.createElement(Element, { as: "div", "data-checkbox": true, ref }, /* @__PURE__ */ React.createElement(BaseInputComponent, { as: "input", type: "checkbox", ...props }));
-});
+const Checkbox = React.forwardRef(
+  ({ id, name, value, ...props }, ref) => {
+    const derivedName = useMemo(() => name || id, [name, id]);
+    const derivedValue = useMemo(() => value || id, [value, id]);
+    return /* @__PURE__ */ React.createElement(Element, { as: "div", "data-checkbox": true, ref }, /* @__PURE__ */ React.createElement(
+      BaseInputComponent,
+      {
+        as: "input",
+        type: "checkbox",
+        id,
+        name: derivedName,
+        value: derivedValue,
+        ...props
+      }
+    ));
+  }
+);
 export {
   Checkbox
 };

package/dist/components/Form/Checkbox/Switch.js

@@ -1,12 +1,23 @@
 "use client";
 "use client;";
-import React from "react";
+import React, { useMemo } from "react";
 import { Element } from "../../Element/Element.js";
 import { BaseInputComponent } from "../BaseInputComponent/BaseInputComponent.js";
-/* empty css           */
 const Switch = React.forwardRef(
-  ({ size = "medium", ...props }, ref) => {
-    return /* @__PURE__ */ React.createElement(Element, { as: "div", "data-switch": true, ref, className: `size-${size}` }, /* @__PURE__ */ React.createElement(BaseInputComponent, { as: "input", type: "checkbox", ...props }));
+  ({ id, name, value, size = "medium", ...props }, ref) => {
+    const derivedName = useMemo(() => name || id, [name, id]);
+    const derivedValue = useMemo(() => value || id, [value, id]);
+    return /* @__PURE__ */ React.createElement(Element, { as: "div", "data-switch": true, ref, className: `size-${size}` }, /* @__PURE__ */ React.createElement(
+      BaseInputComponent,
+      {
+        as: "input",
+        type: "checkbox",
+        id,
+        name: derivedName,
+        value: derivedValue,
+        ...props
+      }
+    ));
   }
 );
 export {

package/dist/components/Form/Form/Form.js

@@ -4,7 +4,6 @@ import React from "react";
 import { Element } from "../../Element/Element.js";
 import { Callout } from "../../Callout/Callout.js";
 import { generateFormThroughConfig } from "./FormGenerator.js";
-/* empty css         */
 const Form = React.forwardRef(
   ({ spacing = "small", fields, onFieldsChange, children, errorText, ...props }, ref) => {
     let classNames = [];

package/dist/components/Form/FormItem/FormItem.js

@@ -2,7 +2,6 @@
 "use client;";
 import React from "react";
 import { Element } from "../../Element/Element.js";
-/* empty css              */
 const FormItem = React.forwardRef(({ ...props }, ref) => {
   return /* @__PURE__ */ React.createElement(
     Element,

package/dist/components/Form/FormItemGroup/FormItemGroup.js

@@ -2,7 +2,6 @@
 "use client;";
 import React from "react";
 import { Element } from "../../Element/Element.js";
-/* empty css                    */
 const FormItemGroup = React.forwardRef(
   ({
     isJoint,

package/dist/components/Form/InputField/InputField.js

@@ -3,7 +3,6 @@
 import React from "react";
 import { BaseInputComponent } from "../BaseInputComponent/BaseInputComponent.js";
 import { Div } from "../../Element/Tags.js";
-/* empty css                */
 const InputField = React.forwardRef(
   ({
     "aria-label": ariaLabel,

package/dist/components/Form/ListBox/ListBox.js

@@ -6,8 +6,7 @@ import { InputField } from "../InputField/InputField.js";
 import { Badge } from "../../Badge/Badge.js";
 import { Text } from "../../Typography/Text.js";
 import { BaseInputComponent } from "../BaseInputComponent/BaseInputComponent.js";
-/* empty css             */
-import { useClickOutside } from "../../../hooks/UseClickOutside.js";
+import { u as useClickOutside } from "../../../UseClickOutside-CJ5IQE6n.js";
 import { searchOptions } from "./listBoxUtils.js";
 const ListBox = React.forwardRef(
   ({

package/dist/components/Form/PinInputField/PinInputField.js

@@ -3,7 +3,6 @@
 import React, { useRef, useState, useCallback, useEffect, createRef, useImperativeHandle } from "react";
 import { InputField } from "../InputField/InputField.js";
 import { Div } from "../../Element/Tags.js";
-/* empty css                  */
 function validate(value, type) {
   const NUMERIC_REGEX = /^[0-9]+$/;
   const ALPHA_NUMERIC_REGEX = /^[a-zA-Z0-9]+$/i;

package/dist/components/Form/RadioButton/RadioButton.js

@@ -1,14 +1,18 @@
 "use client";
 "use client;";
-import React from "react";
+import React, { useMemo } from "react";
 import { Element } from "../../Element/Element.js";
 import { BaseInputComponent } from "../BaseInputComponent/BaseInputComponent.js";
-/* empty css                 */
 const RadioButton = React.forwardRef(
   ({
+    id,
+    name,
+    value,
     onClick,
     ...props
   }, ref) => {
+    const derivedValue = useMemo(() => value || id, [value, id]);
+    const derivedName = useMemo(() => name || id, [name, id]);
     return /* @__PURE__ */ React.createElement(
       Element,
       {
@@ -25,6 +29,9 @@ const RadioButton = React.forwardRef(
         {
           as: "input",
           type: "radio",
+          id,
+          name: derivedName,
+          value: derivedValue,
           ...props
         }
       )

package/dist/components/Form/RadioButton/RadioGroup.js

@@ -1,12 +1,24 @@
 "use client";
 "use client;";
-import React from "react";
+import React, { useMemo } from "react";
 import { RadioButton } from "./RadioButton.js";
 import { Element } from "../../Element/Element.js";
 import { BaseInputComponent } from "../BaseInputComponent/BaseInputComponent.js";
-const RadioGroupOptions = ({ options, defaultValue, required, ...props }) => {
+const RadioGroupOptions = ({ id, name, options, defaultValue, required, ...props }) => {
+  const derivedName = useMemo(() => name || id, [name, id]);
   return /* @__PURE__ */ React.createElement(Element, { as: "div", required }, options.map((option, index) => {
-    return /* @__PURE__ */ React.createElement(RadioButton, { key: index, ...props, ...option });
+    const { id: optionId, ...optionProps } = option;
+    const finalId = optionId || `${id}-option-${index}`;
+    return /* @__PURE__ */ React.createElement(
+      RadioButton,
+      {
+        key: finalId,
+        ...props,
+        ...optionProps,
+        id: finalId,
+        name: derivedName
+      }
+    );
   }));
 };
 const RadioGroup = React.forwardRef((props, ref) => {

package/dist/components/Form/RadioButton/RadioTabGroup.js

@@ -1,19 +1,25 @@
 "use client";
 "use client;";
-import React from "react";
+import React, { useMemo } from "react";
 import { Div } from "../../Element/Tags.js";
 import { BaseInputComponent } from "../BaseInputComponent/BaseInputComponent.js";
-/* empty css                    */
-const RadioTabGroupOptions = ({ options, defaultValue, value, required, ...props }) => {
-  return /* @__PURE__ */ React.createElement(Div, { "data-radio-tab-group": true, name: props.name, required }, options.map((option) => /* @__PURE__ */ React.createElement(React.Fragment, { key: option.id }, /* @__PURE__ */ React.createElement(
-    "input",
-    {
-      type: "radio",
-      ...props,
-      ...option,
-      checked: value === option.value
-    }
-  ), /* @__PURE__ */ React.createElement("label", { htmlFor: option.id }, option.label))));
+const RadioTabGroupOptions = ({ id, name, options, defaultValue, value, required, ...props }) => {
+  const derivedName = useMemo(() => name || id, [name, id]);
+  return /* @__PURE__ */ React.createElement(Div, { "data-radio-tab-group": true, name: derivedName, required }, options.map((option, index) => {
+    const { id: optionId, ...optionProps } = option;
+    const finalId = optionId || `${id}-option-${index}`;
+    return /* @__PURE__ */ React.createElement(React.Fragment, { key: finalId }, /* @__PURE__ */ React.createElement(
+      "input",
+      {
+        type: "radio",
+        ...props,
+        ...optionProps,
+        id: finalId,
+        name: derivedName,
+        checked: value === option.value
+      }
+    ), /* @__PURE__ */ React.createElement("label", { htmlFor: finalId }, option.label));
+  }));
 };
 const RadioTabGroup = React.forwardRef(
   ({ size = "medium", ...props }, ref) => {

package/dist/components/Form/Range/Range.js

@@ -6,7 +6,6 @@ import { Div } from "../../Element/Tags.js";
 import { BaseInputComponent } from "../BaseInputComponent/BaseInputComponent.js";
 import { InputLabel } from "../InputLabel/InputLabel.js";
 import { Text } from "../../Typography/Text.js";
-/* empty css          */
 const Range = React.forwardRef(({ label, value, suffix, ...props }, ref) => {
   return /* @__PURE__ */ React.createElement(Element, { "data-range": true, ref }, label && /* @__PURE__ */ React.createElement(Div, { "data-range-meta": true }, /* @__PURE__ */ React.createElement(InputLabel, { className: "range-label", label, htmlFor: props.id }), /* @__PURE__ */ React.createElement(Text, { className: "range-value" }, value, suffix && suffix)), /* @__PURE__ */ React.createElement(
     BaseInputComponent,

package/dist/components/Form/Select/Select.js

@@ -1,22 +1,55 @@
 "use client";
 "use client;";
-import React from "react";
+import React, { useMemo } from "react";
 import { Element } from "../../Element/Element.js";
-import { BaseInputComponent } from "../BaseInputComponent/BaseInputComponent.js";
 import { Div } from "../../Element/Tags.js";
-/* empty css           */
-const SelectWithOptions = ({ options, className, ...props }) => {
-  const renderOption = (option) => /* @__PURE__ */ React.createElement(Element, { as: "option", key: option.value, value: option.value, disabled: option.disabled }, option.label);
-  const renderOptGroup = (group) => /* @__PURE__ */ React.createElement(Element, { as: "optgroup", key: group.label, label: group.label }, group.options.map(renderOption));
-  return /* @__PURE__ */ React.createElement(Div, { "data-select": true, className, disabled: props.disabled }, /* @__PURE__ */ React.createElement(Element, { as: "select", ...props }, options.map(
-    (option) => (
-      // @ts-ignore
-      "options" in option ? renderOptGroup(option) : renderOption(option)
+import { BaseInputComponent } from "../BaseInputComponent/BaseInputComponent.js";
+const SelectWithOptions = ({ id, name, options, className, ...props }) => {
+  const derivedName = useMemo(() => name || id, [name, id]);
+  const renderOption = (option) => /* @__PURE__ */ React.createElement(
+    Element,
+    {
+      as: "option",
+      key: option.value,
+      value: option.value,
+      disabled: option.disabled
+    },
+    option.label
+  );
+  const renderOptGroup = (group) => /* @__PURE__ */ React.createElement(
+    Element,
+    {
+      as: "optgroup",
+      key: group.label,
+      label: group.label
+    },
+    group.options.map(renderOption)
+  );
+  return /* @__PURE__ */ React.createElement(Div, { "data-select": true, className, disabled: props.disabled }, /* @__PURE__ */ React.createElement(
+    Element,
+    {
+      as: "select",
+      id,
+      name: derivedName,
+      ...props
+    },
+    options.map(
+      (option) => (
+        // @ts-ignore
+        "options" in option ? renderOptGroup(option) : renderOption(option)
+      )
     )
-  )));
+  ));
 };
 const Select = React.forwardRef((props, ref) => {
-  return /* @__PURE__ */ React.createElement(BaseInputComponent, { as: SelectWithOptions, ref, ...props });
+  return /* @__PURE__ */ React.createElement(
+    BaseInputComponent,
+    {
+      as: SelectWithOptions,
+      ref,
+      ...props
+    }
+  );
 });
 export {
   Select

package/dist/components/Form/TextArea/TextArea.js

@@ -2,7 +2,6 @@
 "use client;";
 import React from "react";
 import { BaseInputComponent } from "../BaseInputComponent/BaseInputComponent.js";
-/* empty css             */
 const TextArea = React.forwardRef((props, ref) => {
   return /* @__PURE__ */ React.createElement(BaseInputComponent, { as: "textarea", "data-textarea": true, ref, placeholder: " ", ...props });
 });

package/dist/components/Meter/Meter.js

@@ -3,7 +3,6 @@
 import React from "react";
 import { Element } from "../Element/Element.js";
 import { Text } from "../Typography/Text.js";
-/* empty css          */
 const Meter = React.forwardRef(
   ({
     label,

package/dist/components/Modal/Modal.js

@@ -3,7 +3,6 @@
 import React, { useEffect } from "react";
 import { Element } from "../Element/Element.js";
 import { Text } from "../Typography/Text.js";
-/* empty css          */
 const Modal = React.forwardRef(
   ({
     id,

package/dist/components/Notification/NotificationItem/NotificationItem.js

@@ -3,7 +3,6 @@
 import React, { useState, useEffect } from "react";
 import { Div } from "../../Element/Tags.js";
 import { Element } from "../../Element/Element.js";
-/* empty css                      */
 const NotificationItem = React.forwardRef(
   ({
     showWhen,

package/dist/components/Notification/NotificationsWrapper/NotificationsWrapper.js

@@ -2,7 +2,6 @@
 "use client;";
 import React from "react";
 import { Element } from "../../Element/Element.js";
-/* empty css                          */
 const NotificationsWrapper = React.forwardRef(
   ({
     position = "right",

package/dist/components/OptionCard/OptionCard.js

@@ -2,8 +2,8 @@
 "use client;";
 import React, { createContext, useState, useCallback, useContext } from "react";
 import { Element } from "../Element/Element.js";
+import { Div } from "../Element/Tags.js";
 import { Card } from "../Card/Card.js";
-/* empty css                */
 const OptionCardsContext = createContext({
   isSelected: () => false,
   toggleSelection: () => {
@@ -44,7 +44,7 @@ const OptionCardsGroup = ({
   const isSelected = useCallback((id) => {
     return selectedIds.has(id);
   }, [selectedIds]);
-  return /* @__PURE__ */ React.createElement(OptionCardsContext.Provider, { value: { isSelected, toggleSelection, showTickIcon, tickPosition } }, /* @__PURE__ */ React.createElement("div", { "data-option-cards-group": true, className: `tick-${tickPosition}` }, children));
+  return /* @__PURE__ */ React.createElement(OptionCardsContext.Provider, { value: { isSelected, toggleSelection, showTickIcon, tickPosition } }, /* @__PURE__ */ React.createElement(Div, { "data-option-cards-group": true, className: `tick-${tickPosition}` }, children));
 };
 const useOptionCard = (id) => {
   const context = useContext(OptionCardsContext);

package/dist/components/Pagination/Pagination.js

@@ -7,7 +7,6 @@ import { Text } from "../Typography/Text.js";
 import { Spinner } from "../Spinner/Spinner.js";
 import { Button } from "../Button/Button.js";
 import { usePagination } from "./usePagination.js";
-/* empty css               */
 const defaultRenderItem = ({
   type,
   page,

package/dist/components/Portion/Portion.js

@@ -2,7 +2,6 @@
 "use client;";
 import React from "react";
 import { Element } from "../Element/Element.js";
-/* empty css            */
 const Portion = React.forwardRef(
   ({
     desktopSpan,

package/dist/components/ProgressBar/ProgressBar.js

@@ -3,7 +3,6 @@
 import React from "react";
 import { Element } from "../Element/Element.js";
 import { Text } from "../Typography/Text.js";
-/* empty css                 */
 const ProgressBar = React.forwardRef(
   ({
     label,

package/dist/components/Row/Row.js

@@ -2,7 +2,6 @@
 "use client;";
 import React from "react";
 import { Element } from "../Element/Element.js";
-/* empty css        */
 const Row = React.forwardRef(
   ({
     layout = "grid",

package/dist/components/Sidebar/ContentWrapper/ContentWrapper.js

@@ -2,7 +2,6 @@
 "use client;";
 import React from "react";
 import { Element } from "../../Element/Element.js";
-/* empty css                    */
 const ContentWrapper = React.forwardRef(
   ({ label, ...props }, ref) => {
     return /* @__PURE__ */ React.createElement(

package/dist/components/Sidebar/SidebarFooter/SidebarFooter.js

@@ -2,7 +2,6 @@
 "use client;";
 import React from "react";
 import { Element } from "../../Element/Element.js";
-/* empty css                   */
 const SidebarFooter = React.forwardRef(
   ({ isSticky, ...props }, ref) => {
     let classNames = [];

package/dist/components/Sidebar/SidebarHeader/SidebarHeader.js

@@ -2,7 +2,6 @@
 "use client;";
 import React from "react";
 import { Element } from "../../Element/Element.js";
-/* empty css                   */
 const SidebarHeader = React.forwardRef(
   ({ isSticky, ...props }, ref) => {
     let classNames = [];

package/dist/components/Sidebar/SidebarItem/SidebarItem.js

@@ -3,7 +3,6 @@
 import React from "react";
 import { Element } from "../../Element/Element.js";
 import { Div } from "../../Element/Tags.js";
-/* empty css                 */
 const SidebarItem = React.forwardRef(
   ({ hasAlert, hasEmptyIcon, hasNoIcon, children, ...props }, ref) => {
     let classNames = [];

package/dist/components/Sidebar/SidebarWrapper/SidebarWrapper.js

@@ -2,8 +2,7 @@
 "use client;";
 import React, { useRef, useImperativeHandle } from "react";
 import { Element } from "../../Element/Element.js";
-/* empty css                    */
-import { useClickOutside } from "../../../hooks/UseClickOutside.js";
+import { u as useClickOutside } from "../../../UseClickOutside-CJ5IQE6n.js";
 const SidebarWrapper = React.forwardRef(
   ({
     collapsed,

package/dist/components/Skeleton/Skeleton.js

@@ -2,7 +2,6 @@
 "use client;";
 import React, { createContext, useContext } from "react";
 import { Element } from "../Element/Element.js";
-/* empty css             */
 const SkeletonContext = createContext({
   effect: "wave",
   animate: true

package/dist/components/Spinner/Spinner.js

@@ -2,7 +2,6 @@
 "use client;";
 import React from "react";
 import { Element } from "../Element/Element.js";
-/* empty css            */
 const Spinner = React.forwardRef(
   ({
     size = "medium",

package/dist/components/Table/Table.js

@@ -3,7 +3,6 @@
 import React from "react";
 import { Element } from "../Element/Element.js";
 import "../Element/Tags.js";
-/* empty css          */
 const Table = React.forwardRef(
   ({
     bordersFor,

package/dist/components/Tabs/Tabs.js

@@ -5,7 +5,6 @@ import { Element } from "../Element/Element.js";
 import { Div } from "../Element/Tags.js";
 import { Divider } from "../Divider/Divider.js";
 import { Text } from "../Typography/Text.js";
-/* empty css         */
 const Tabs = React.forwardRef(
   ({ tabs, additionalNavContentWrapper, defaultActiveTab, align = "left", ...props }, ref) => {
     const index = tabs.findIndex((tab) => tab.key === defaultActiveTab);

package/dist/components/Toast/ToastItem/ToastItem.js

@@ -2,7 +2,6 @@
 "use client;";
 import React, { useState, useEffect } from "react";
 import { Element } from "../../Element/Element.js";
-/* empty css               */
 const ToastItem = React.forwardRef(
   ({ showWhen, children, secondsToShowFor, closeWhen, ...props }, ref) => {
     let classNames = [];

package/dist/components/Toast/ToastsWrapper/ToastsWrapper.js

@@ -2,7 +2,6 @@
 "use client;";
 import React from "react";
 import { Element } from "../../Element/Element.js";
-/* empty css                   */
 const ToastsWrapper = React.forwardRef(
   ({ position, ...props }, ref) => {
     let classNames = [];