fictoan-react 1.9.3 → 1.10.0

package/dist/components/Accordion/Accordion.js

@@ -3,6 +3,7 @@
 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,6 +3,7 @@
 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

@@ -0,0 +1,76 @@
+"use client";
+"use client;";
+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(
+      Element,
+      {
+        as: "li",
+        "data-breadcrumb-item": true,
+        ref,
+        ...props,
+        "aria-current": current ? "page" : void 0,
+        className: current ? "current" : void 0,
+        role: "listitem"
+      },
+      /* @__PURE__ */ React.createElement("span", { className: "breadcrumb-content" }, children)
+    );
+  }
+);
+const Separator = ({ separator }) => /* @__PURE__ */ React.createElement(
+  Text,
+  {
+    className: "breadcrumb-separator",
+    "aria-hidden": "true",
+    role: "presentation",
+    margin: "none"
+  },
+  separator
+);
+const Breadcrumbs = React.forwardRef(
+  ({ children, separator = "/", spacing, ...props }, ref) => {
+    let classNames = [];
+    if (spacing) {
+      classNames.push(`spacing-${spacing}`);
+    }
+    const childrenArray = React.Children.toArray(children).filter(Boolean);
+    const processedChildren = childrenArray.reduce((acc, child, index) => {
+      if (!React.isValidElement(child)) return acc;
+      const isLast = index === childrenArray.length - 1;
+      let breadcrumbItem;
+      if (child.type === BreadcrumbItem) {
+        breadcrumbItem = React.cloneElement(child, {
+          ...child.props,
+          current: isLast
+        });
+      } else {
+        breadcrumbItem = /* @__PURE__ */ React.createElement(BreadcrumbItem, { key: `item-${index}`, current: isLast }, child);
+      }
+      acc.push(breadcrumbItem);
+      if (!isLast) {
+        acc.push(
+          /* @__PURE__ */ React.createElement(Separator, { key: `sep-${index}`, separator })
+        );
+      }
+      return acc;
+    }, []);
+    return /* @__PURE__ */ React.createElement("nav", { "aria-label": "Breadcrumb", ref, ...props }, /* @__PURE__ */ React.createElement(
+      Element,
+      {
+        as: "ul",
+        "data-breadcrumbs-wrapper": true,
+        role: "list",
+        classNames
+      },
+      processedChildren
+    ));
+  }
+);
+export {
+  Breadcrumbs
+};

package/dist/components/Breadcrumbs/index.js

@@ -1,8 +1,6 @@
 "use client";
 "use client;";
-import { Breadcrumbs } from "./Breadcrumbs/Breadcrumbs.js";
-import { BreadcrumbItem } from "./BreadcrumbItem/BreadcrumbItem.js";
+import { Breadcrumbs } from "./Breadcrumbs.js";
 export {
-  BreadcrumbItem,
   Breadcrumbs
 };

package/dist/components/Button/Button.js

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

package/dist/components/Element/Element.js

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

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

@@ -14,6 +14,7 @@ const BaseInputComponent = React.forwardRef(
     errorText,
     validateThis,
     classNames,
+    children,
     ...inputProps
   }, ref) => /* @__PURE__ */ React.createElement(
     FormItem,
@@ -21,7 +22,8 @@ const BaseInputComponent = React.forwardRef(
       "data-form-item": true,
       required: inputProps.required
     },
-    /* @__PURE__ */ React.createElement(
+    label && /* @__PURE__ */ React.createElement(InputLabel, { label, htmlFor: inputProps.id }),
+    /* @__PURE__ */ React.createElement(Div, { "data-input-wrapper": true }, /* @__PURE__ */ React.createElement(
       Element,
       {
         as: Component,
@@ -32,9 +34,8 @@ const BaseInputComponent = React.forwardRef(
         ].concat(classNames || []),
         ...inputProps
       }
-    ),
-    label && /* @__PURE__ */ React.createElement(InputLabel, { label, htmlFor: inputProps.id }),
-    (helpText || errorText) && /* @__PURE__ */ React.createElement(Div, { className: "info-section vertically-center-items", marginTop: "nano" }, helpText && /* @__PURE__ */ React.createElement(Element, { as: "span", className: "help-text" }, helpText), errorText && /* @__PURE__ */ React.createElement(Element, { as: "span", className: "error-text" }, errorText))
+    ), children),
+    (helpText || errorText) && /* @__PURE__ */ React.createElement(Div, { className: "info-section vertically-center-items" }, helpText && /* @__PURE__ */ React.createElement(Element, { as: "span", className: "help-text" }, helpText), errorText && /* @__PURE__ */ React.createElement(Element, { as: "span", className: "error-text" }, errorText))
   )
 );
 export {

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

@@ -3,6 +3,7 @@
 import React 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 }));
 });

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

@@ -3,6 +3,7 @@
 import React 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 }));

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

@@ -4,6 +4,7 @@ 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,6 +2,7 @@
 "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,6 +2,7 @@
 "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

@@ -2,25 +2,71 @@
 "use client;";
 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,
     "aria-invalid": ariaInvalid,
+    iconLeft,
+    iconRight,
+    stringLeft,
+    stringRight,
     ...props
   }, ref) => {
-    return /* @__PURE__ */ React.createElement(
+    const renderSideElement = (content, position) => {
+      if (!content) return null;
+      const isText = typeof content === "string";
+      const elementRef = React.useRef(null);
+      React.useEffect(() => {
+        if (isText && elementRef.current) {
+          const width = elementRef.current.getBoundingClientRect().width;
+          const propertyName = `--side-element-${position}-width`;
+          elementRef.current.closest("[data-form-item]").style.setProperty(
+            propertyName,
+            `${width}px`
+          );
+        }
+      }, [content, isText, position]);
+      return /* @__PURE__ */ React.createElement(
+        Div,
+        {
+          ref: elementRef,
+          "data-input-side-element": true,
+          className: `${position} ${isText ? "is-text" : "is-icon"}`,
+          "aria-hidden": "true"
+        },
+        content
+      );
+    };
+    const hasLeftElement = Boolean(iconLeft || stringLeft);
+    const hasRightElement = Boolean(iconRight || stringRight);
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
       BaseInputComponent,
       {
         as: "input",
         "data-input-field": true,
         ref,
+        className: [
+          hasLeftElement ? "with-left-element" : "",
+          hasRightElement ? "with-right-element" : ""
+        ].filter(Boolean).join(" "),
         "aria-label": ariaLabel || props.label,
         "aria-invalid": ariaInvalid || props.invalid || void 0,
         "aria-required": props.required,
         placeholder: " ",
         ...props
-      }
-    );
+      },
+      /* @__PURE__ */ React.createElement(
+        Div,
+        {
+          "data-input-helper": true,
+          "aria-hidden": "true"
+        },
+        renderSideElement(iconLeft || stringLeft, "left"),
+        renderSideElement(iconRight || stringRight, "right")
+      )
+    ));
   }
 );
 export {

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

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

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

@@ -3,6 +3,7 @@
 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

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

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

@@ -3,6 +3,7 @@
 import React 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",

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

@@ -6,6 +6,7 @@ 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

@@ -4,6 +4,7 @@ import React 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));

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

@@ -2,6 +2,7 @@
 "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,6 +3,7 @@
 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,6 +3,7 @@
 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,6 +3,7 @@
 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,6 +2,7 @@
 "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

@@ -3,6 +3,7 @@
 import React, { createContext, useState, useCallback, useContext } from "react";
 import { Element } from "../Element/Element.js";
 import { Card } from "../Card/Card.js";
+/* empty css                */
 const OptionCardsContext = createContext({
   isSelected: () => false,
   toggleSelection: () => {

package/dist/components/Pagination/Pagination.js

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

package/dist/components/Skeleton/Skeleton.js

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

package/dist/components/Tooltip/Tooltip.js

@@ -2,6 +2,7 @@
 "use client;";
 import React, { useState, useRef, useEffect } from "react";
 import { Element } from "../Element/Element.js";
+/* empty css            */
 const TOOLTIP_OFFSET = 8;
 const SCREEN_PADDING = 16;
 const calculatePosition = (tooltipElement, targetElement, position) => {

package/dist/components/index.js

@@ -4,8 +4,7 @@ import { Accordion } from "./Accordion/Accordion.js";
 import { Badge } from "./Badge/Badge.js";
 import { Drawer } from "./Drawer/Drawer.js";
 import { Button } from "./Button/Button.js";
-import { Breadcrumbs } from "./Breadcrumbs/Breadcrumbs/Breadcrumbs.js";
-import { BreadcrumbItem } from "./Breadcrumbs/BreadcrumbItem/BreadcrumbItem.js";
+import { Breadcrumbs } from "./Breadcrumbs/Breadcrumbs.js";
 import { Callout } from "./Callout/Callout.js";
 import { Card } from "./Card/Card.js";
 import { CodeBlock } from "./CodeBlock/CodeBlock.js";
@@ -58,7 +57,6 @@ export {
   Aside,
   Badge,
   Body,
-  BreadcrumbItem,
   Breadcrumbs,
   Button,
   Callout,

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

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