@edifice.io/react 2.6.9-develop-enabling.20261013152718 → 2.6.9-develop-integration.20261014191834

package/dist/components/Skeleton/ButtonSkeleton.d.ts

@@ -4,15 +4,6 @@ export interface ButtonSkeletonProps {
     color?: ButtonColors;
     size?: ButtonSizes;
 }
-/**
- * @deprecated This component is deprecated and will be removed in future
- * versions. Please use the Skeleton primitive instead:
- * `<Skeleton variant="pill" width={…} height={…} />`.
- *
- * It renders a disabled Button so that a decorative placeholder ends up in the
- * focus and accessibility tree, and its grey comes from the legacy `gray-400`
- * scale rather than the `grey-300` design token.
- */
 declare const ButtonSkeleton: {
     ({ className, color, size, }: ButtonSkeletonProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;

package/dist/components/Skeleton/ButtonSkeleton.js

@@ -1 +1,16 @@
-import Button from"../Button/Button.js";import clsx$1 from"clsx";import{jsx}from"react/jsx-runtime";var ButtonSkeleton=({className,color=`tertiary`,size=`md`})=>jsx(Button,{className:clsx$1(`placeholder`,className,{"bg-gray-400":color===`tertiary`}),color,variant:`filled`,size,disabled:!0});export{ButtonSkeleton as default};
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import Button from "../Button/Button.js";
+const ButtonSkeleton = ({
+  className,
+  color = "tertiary",
+  size = "md"
+}) => {
+  const classN = clsx("placeholder", className, {
+    "bg-gray-400": color === "tertiary"
+  });
+  return /* @__PURE__ */ jsx(Button, { className: classN, color, variant: "filled", size, disabled: !0 });
+};
+export {
+  ButtonSkeleton as default
+};

package/dist/components/Skeleton/TextSkeleton.d.ts

@@ -3,14 +3,6 @@ export interface TextSkeletonProps {
     className?: string;
     size?: TextSkeletonSizes;
 }
-/**
- * @deprecated This component is deprecated and will be removed in future
- * versions. Please use the Skeleton primitive instead:
- * `<Skeleton variant="text" width={…} height={…} />`.
- *
- * It relies on the Bootstrap `.placeholder` class, whose animation cannot be
- * turned off and which ignores `prefers-reduced-motion`.
- */
 declare const TextSkeleton: {
     ({ className, size }: TextSkeletonProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;

package/dist/components/Skeleton/TextSkeleton.js

@@ -1 +1,16 @@
-import clsx$1 from"clsx";import{jsx}from"react/jsx-runtime";var TextSkeleton=({className,size=`md`})=>jsx(`span`,{className:clsx$1(`placeholder`,className,{"placeholder-xs":size===`xs`,"placeholder-sm":size===`sm`,"placeholder-lg":size===`lg`})});export{TextSkeleton as default};
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+const TextSkeleton = ({
+  className,
+  size = "md"
+}) => {
+  const classN = clsx("placeholder", className, {
+    "placeholder-xs": size === "xs",
+    "placeholder-sm": size === "sm",
+    "placeholder-lg": size === "lg"
+  });
+  return /* @__PURE__ */ jsx("span", { className: classN });
+};
+export {
+  TextSkeleton as default
+};

package/dist/components/Skeleton/index.d.ts

@@ -1,6 +1,4 @@
 export { default as ButtonSkeleton } from './ButtonSkeleton';
-export { default as Skeleton } from './Skeleton';
 export { default as TextSkeleton } from './TextSkeleton';
 export * from './ButtonSkeleton';
-export * from './Skeleton';
 export * from './TextSkeleton';

package/dist/components/SmartEllipsis/SmartEllipsis.js

@@ -1 +1,21 @@
-import{useEffect,useRef,useState}from"react";import{jsx}from"react/jsx-runtime";function SmartEllipsis({text}){let ref=useRef(null),[displayText,setDisplayText]=useState(text),updateText=()=>{let el=ref.current;if(el)if(el.textContent=text,el.scrollWidth>el.clientWidth){let startText=text.slice(0,Math.ceil(text.length/2)),endText=text.slice(Math.ceil(text.length/2));for(;startText.length>1&&endText.length>1&&el.scrollWidth>el.clientWidth;)startText=startText.slice(0,-1),endText=endText.slice(1),el.textContent=`${startText}…${endText}`;setDisplayText(el.textContent)}else setDisplayText(text)};return useEffect(()=>(updateText(),window.addEventListener(`resize`,updateText),()=>window.removeEventListener(`resize`,updateText)),[text]),jsx(`span`,{ref,className:`smart-ellipsis`,children:displayText})}export{SmartEllipsis as default};
+import { jsx } from "react/jsx-runtime";
+import { useRef, useState, useEffect } from "react";
+function SmartEllipsis({
+  text
+}) {
+  const ref = useRef(null), [displayText, setDisplayText] = useState(text), updateText = () => {
+    const el = ref.current;
+    if (el)
+      if (el.textContent = text, el.scrollWidth > el.clientWidth) {
+        let startText = text.slice(0, Math.ceil(text.length / 2)), endText = text.slice(Math.ceil(text.length / 2));
+        for (; startText.length > 1 && endText.length > 1 && el.scrollWidth > el.clientWidth; )
+          startText = startText.slice(0, -1), endText = endText.slice(1), el.textContent = `${startText}…${endText}`;
+        setDisplayText(el.textContent);
+      } else
+        setDisplayText(text);
+  };
+  return useEffect(() => (updateText(), window.addEventListener("resize", updateText), () => window.removeEventListener("resize", updateText)), [text]), /* @__PURE__ */ jsx("span", { ref, className: "smart-ellipsis", children: displayText });
+}
+export {
+  SmartEllipsis as default
+};

package/dist/components/StackedGroup/StackedGroup.js

@@ -1 +1,23 @@
-import clsx$1 from"clsx";import{forwardRef}from"react";import{jsx}from"react/jsx-runtime";var StackedGroup=forwardRef(({children,overlap=20,className,stackingOrder=`leftFirst`,wrap=!1},ref)=>jsx(`div`,{ref,className:clsx$1(`stacked-group d-flex align-items-center`,className,{"flex-wrap":wrap}),style:wrap?{paddingLeft:`${overlap}px`}:void 0,children:children.map((child,index)=>jsx(`div`,{style:{marginLeft:index===0&&!wrap?0:`-${overlap}px`,zIndex:stackingOrder===`rightFirst`?children.length-index:index+1},children:child},index))}));export{StackedGroup as default};
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import { forwardRef } from "react";
+const StackedGroup = /* @__PURE__ */ forwardRef(({
+  children,
+  overlap = 20,
+  className,
+  stackingOrder = "leftFirst",
+  wrap = !1
+}, ref) => {
+  const classes = clsx("stacked-group d-flex align-items-center", className, {
+    "flex-wrap": wrap
+  });
+  return /* @__PURE__ */ jsx("div", { ref, className: classes, style: wrap ? {
+    paddingLeft: `${overlap}px`
+  } : void 0, children: children.map((child, index) => /* @__PURE__ */ jsx("div", { style: {
+    marginLeft: index === 0 && !wrap ? 0 : `-${overlap}px`,
+    zIndex: stackingOrder === "rightFirst" ? children.length - index : index + 1
+  }, children: child }, index)) });
+});
+export {
+  StackedGroup as default
+};

package/dist/components/Stepper/Stepper.js

@@ -1 +1,15 @@
-import Flex from"../Flex/Flex.js";import{forwardRef}from"react";import{jsx}from"react/jsx-runtime";var Stepper=forwardRef(({currentStep,nbSteps,gap=`8`,color=`secondary`,...props},ref)=>jsx(Flex,{gap,ref,...props,children:Array.from({length:nbSteps}).map((_,index)=>jsx(`div`,{className:`rounded step ${index===currentStep?`bg-${color} step-active`:`bg-${color}-300`}`},`step-${index}`))}));export{Stepper as default};
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import Flex from "../Flex/Flex.js";
+const Stepper = /* @__PURE__ */ forwardRef(({
+  currentStep,
+  nbSteps,
+  gap = "8",
+  color = "secondary",
+  ...props
+}, ref) => /* @__PURE__ */ jsx(Flex, { gap, ref, ...props, children: Array.from({
+  length: nbSteps
+}).map((_, index) => /* @__PURE__ */ jsx("div", { className: `rounded step ${index === currentStep ? `bg-${color} step-active` : `bg-${color}-300`}` }, `step-${index}`)) }));
+export {
+  Stepper as default
+};

package/dist/components/Switch/Switch.js

@@ -1 +1,27 @@
-import clsx$1 from"clsx";import{forwardRef}from"react";import{jsx,jsxs}from"react/jsx-runtime";var Switch=forwardRef(({className,label,value,disabled,size=`md`,variant=`default`,labelClassName,...restProps},ref)=>{let switchClass=clsx$1(`switch`,{[`switch-${size}`]:size,[`switch-${variant}`]:variant,"switch-disabled":disabled},className),labelClass=clsx$1(`switch-label`,labelClassName);return jsxs(`label`,{className:switchClass,children:[jsx(`input`,{type:`checkbox`,ref,value,disabled,...restProps}),jsx(`span`,{className:`slider`}),label&&jsx(`span`,{className:labelClass,children:label})]})});export{Switch as default};
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import clsx from "clsx";
+const Switch = /* @__PURE__ */ forwardRef(({
+  className,
+  label,
+  value,
+  disabled,
+  size = "md",
+  variant = "default",
+  labelClassName,
+  ...restProps
+}, ref) => {
+  const switchClass = clsx("switch", {
+    [`switch-${size}`]: size,
+    [`switch-${variant}`]: variant,
+    "switch-disabled": disabled
+  }, className), labelClass = clsx("switch-label", labelClassName);
+  return /* @__PURE__ */ jsxs("label", { className: switchClass, children: [
+    /* @__PURE__ */ jsx("input", { type: "checkbox", ref, value, disabled, ...restProps }),
+    /* @__PURE__ */ jsx("span", { className: "slider" }),
+    label && /* @__PURE__ */ jsx("span", { className: labelClass, children: label })
+  ] });
+});
+export {
+  Switch as default
+};

package/dist/components/Table/components/Table.d.ts

@@ -1,40 +1,13 @@
-import { Key, ReactElement, ReactNode, Ref } from 'react';
+import { ReactNode } from 'react';
 export type TableRef = HTMLTableElement;
-export interface TableProps<T = unknown> {
-    /**
-     * Compound children (`Table.Thead`, `Table.Tbody`…). Used when no `items`
-     * are provided (legacy / small lists).
-     */
-    children?: ReactNode;
-    /** Caps the height of the scrollable container, in any CSS unit. */
+export interface TableProps {
+    children?: Array<React.ReactElement<HTMLTableSectionElement>> | any;
     maxHeight?: string;
-    /**
-     * Data array, one row per item. When provided, rows are rendered from this
-     * array via `renderRow` instead of `children`. Above `virtualizeThreshold`
-     * (and with `maxHeight` set), rows are virtualized automatically.
-     */
-    items?: T[];
-    /** Render-prop returning the cells (`Table.Td`) of a row. */
-    renderRow?: (item: T, index: number) => ReactNode;
-    /** Header rendered above the body (typically a `Table.Thead`). */
-    header?: ReactNode;
-    /** Estimated row height in px, used before dynamic measurement. */
-    estimateRowHeight?: number;
-    /** Number of rows rendered outside the visible window. */
-    overscan?: number;
-    /**
-     * Row count above which virtualization kicks in (requires `maxHeight`).
-     * Defaults to 100.
-     */
-    virtualizeThreshold?: number;
-    /** Extra attributes (onClick, className, aria-selected…) for a row. */
-    rowProps?: (item: T, index: number) => React.HTMLAttributes<HTMLTableRowElement>;
-    /** Stable key for a row. Defaults to the row index. */
-    getRowKey?: (item: T, index: number) => Key;
 }
-declare const Table: (<T>(props: TableProps<T> & {
-    ref?: Ref<TableRef>;
-}) => ReactElement) & {
+declare const Table: import('react').ForwardRefExoticComponent<{
+    children: ReactNode;
+    maxHeight?: string;
+} & import('react').RefAttributes<HTMLTableElement>> & {
     Thead: {
         (props: React.HTMLAttributes<HTMLTableSectionElement>): import("react/jsx-runtime").JSX.Element;
         displayName: string;

package/dist/components/Table/components/Table.js

@@ -1 +1,25 @@
-import{TableTbody}from"./TableTbody.js";import{TableTd}from"./TableTd.js";import{TableTh}from"./TableTh.js";import{TableThead}from"./TableThead.js";import{TableTr}from"./TableTr.js";import{TableVirtualizedBody}from"./TableVirtualizedBody.js";import{forwardRef,useState}from"react";import{Fragment as Fragment$1,jsx,jsxs}from"react/jsx-runtime";function TableRoot({children,maxHeight,items,renderRow,header,estimateRowHeight,overscan,virtualizeThreshold=100,rowProps,getRowKey},ref){let[scrollElement,setScrollElement]=useState(null),style={maxHeight,overflowY:`auto`},isDataDriven=!!items&&!!renderRow,isVirtualized=isDataDriven&&!!maxHeight&&items.length>virtualizeThreshold;return jsx(`div`,{ref:setScrollElement,className:`table-responsive`,style:maxHeight?style:{},children:jsx(`table`,{ref,className:`table align-middle mb-0${isVirtualized?` table--virtualized`:``}`,style:{overflow:maxHeight?`visible`:`hidden`},children:isVirtualized?jsxs(Fragment$1,{children:[header,jsx(TableVirtualizedBody,{scrollElement,items,renderRow,estimateRowHeight,overscan,rowProps,getRowKey})]}):isDataDriven?jsxs(Fragment$1,{children:[header,jsx(TableTbody,{children:items.map((item,index)=>jsx(TableTr,{...rowProps?.(item,index),children:renderRow(item,index)},getRowKey?getRowKey(item,index):index))})]}):children})})}var Root=forwardRef(TableRoot),Table=Object.assign(Root,{Thead:TableThead,Th:TableTh,Tbody:TableTbody,Tr:TableTr,Td:TableTd});export{Table as default};
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { TableTbody } from "./TableTbody.js";
+import { TableTd } from "./TableTd.js";
+import { TableTh } from "./TableTh.js";
+import { TableThead } from "./TableThead.js";
+import { TableTr } from "./TableTr.js";
+const Root = /* @__PURE__ */ forwardRef(({
+  children,
+  maxHeight
+}, ref) => /* @__PURE__ */ jsx("div", { className: "table-responsive", style: maxHeight ? {
+  maxHeight,
+  overflowY: "auto"
+} : {}, children: /* @__PURE__ */ jsx("table", { ref, className: "table align-middle mb-0", style: {
+  overflow: maxHeight ? "visible" : "hidden"
+}, children }) })), Table = Object.assign(Root, {
+  Thead: TableThead,
+  Th: TableTh,
+  Tbody: TableTbody,
+  Tr: TableTr,
+  Td: TableTd
+});
+export {
+  Table as default
+};

package/dist/components/Table/components/TableTbody.js

@@ -1 +1,11 @@
-import{jsx}from"react/jsx-runtime";var TableTbody=props=>{let{children,...restProps}=props;return jsx(`tbody`,{...restProps,children})};export{TableTbody};
+import { jsx } from "react/jsx-runtime";
+const TableTbody = (props) => {
+  const {
+    children,
+    ...restProps
+  } = props;
+  return /* @__PURE__ */ jsx("tbody", { ...restProps, children });
+};
+export {
+  TableTbody
+};

package/dist/components/Table/components/TableTd.js

@@ -1 +1,11 @@
-import{jsx}from"react/jsx-runtime";var TableTd=props=>{let{children,...restProps}=props;return jsx(`td`,{...restProps,children})};export{TableTd};
+import { jsx } from "react/jsx-runtime";
+const TableTd = (props) => {
+  const {
+    children,
+    ...restProps
+  } = props;
+  return /* @__PURE__ */ jsx("td", { ...restProps, children });
+};
+export {
+  TableTd
+};

package/dist/components/Table/components/TableTh.js

@@ -1 +1,11 @@
-import{jsx}from"react/jsx-runtime";var TableTh=props=>{let{children,...restProps}=props;return jsx(`th`,{...restProps,children})};export{TableTh};
+import { jsx } from "react/jsx-runtime";
+const TableTh = (props) => {
+  const {
+    children,
+    ...restProps
+  } = props;
+  return /* @__PURE__ */ jsx("th", { ...restProps, children });
+};
+export {
+  TableTh
+};

package/dist/components/Table/components/TableThead.js

@@ -1 +1,11 @@
-import{jsx}from"react/jsx-runtime";var TableThead=props=>{let{children,...restProps}=props;return jsx(`thead`,{...restProps,children})};export{TableThead};
+import { jsx } from "react/jsx-runtime";
+const TableThead = (props) => {
+  const {
+    children,
+    ...restProps
+  } = props;
+  return /* @__PURE__ */ jsx("thead", { ...restProps, children });
+};
+export {
+  TableThead
+};

package/dist/components/Table/components/TableTr.js

@@ -1 +1,11 @@
-import{jsx}from"react/jsx-runtime";var TableTr=props=>{let{children,...restProps}=props;return jsx(`tr`,{...restProps,children})};export{TableTr};
+import { jsx } from "react/jsx-runtime";
+const TableTr = (props) => {
+  const {
+    children,
+    ...restProps
+  } = props;
+  return /* @__PURE__ */ jsx("tr", { ...restProps, children });
+};
+export {
+  TableTr
+};

package/dist/components/Tabs/components/Tabs.js

@@ -1 +1,51 @@
-import{TabsContext}from"../context/TabsContext.js";import{useTabs}from"../hooks/useTabs.js";import TabsItem from"./TabsItem.js";import TabsList from"./TabsList.js";import TabsPanel from"./TabsPanel.js";import{useMemo}from"react";import{Fragment as Fragment$1,jsx,jsxs}from"react/jsx-runtime";var Tabs=({defaultId,items,fullWidth=!1,fullHeight=!1,onChange,children,isSticky=!1,stickyTop=0,headerClassName,contentClassName})=>{let{activeTab,setSelectedTab,tabsRef,tabUnderlineLeft,tabUnderlineWidth,onKeyDown}=useTabs({defaultId,items,onChange}),value=useMemo(()=>({activeTab,items,setSelectedTab,tabsRef,tabUnderlineLeft,tabUnderlineWidth,onKeyDown}),[activeTab,items,onKeyDown,setSelectedTab,tabUnderlineLeft,tabUnderlineWidth,tabsRef]),currentItem=items.find(item=>item.id===activeTab);return jsx(TabsContext.Provider,{value,children:typeof children==`function`?children(currentItem):jsxs(Fragment$1,{children:[jsx(Tabs.List,{fullWidth,isSticky,stickyTop,className:headerClassName}),jsx(Tabs.Panel,{currentItem,fullHeight,className:contentClassName,children:currentItem?.content})]})})};Tabs.Item=TabsItem,Tabs.Panel=TabsPanel,Tabs.List=TabsList;export{Tabs as default};
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { TabsContext } from "../context/TabsContext.js";
+import { useTabs } from "../hooks/useTabs.js";
+import TabsItem from "./TabsItem.js";
+import TabsList from "./TabsList.js";
+import TabsPanel from "./TabsPanel.js";
+const Tabs = ({
+  defaultId,
+  items,
+  fullWidth = !1,
+  fullHeight = !1,
+  onChange,
+  children,
+  isSticky = !1,
+  stickyTop = 0,
+  headerClassName,
+  contentClassName
+}) => {
+  const {
+    activeTab,
+    setSelectedTab,
+    tabsRef,
+    tabUnderlineLeft,
+    tabUnderlineWidth,
+    onKeyDown
+  } = useTabs({
+    defaultId,
+    items,
+    onChange
+  }), value = useMemo(() => ({
+    activeTab,
+    items,
+    setSelectedTab,
+    tabsRef,
+    tabUnderlineLeft,
+    tabUnderlineWidth,
+    onKeyDown
+  }), [activeTab, items, onKeyDown, setSelectedTab, tabUnderlineLeft, tabUnderlineWidth, tabsRef]), currentItem = items.find((item) => item.id === activeTab);
+  return /* @__PURE__ */ jsx(TabsContext.Provider, { value, children: typeof children == "function" ? children(currentItem) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Tabs.List, { fullWidth, isSticky, stickyTop, className: headerClassName }),
+    /* @__PURE__ */ jsx(Tabs.Panel, { currentItem, fullHeight, className: contentClassName, children: currentItem == null ? void 0 : currentItem.content })
+  ] }) });
+};
+Tabs.Item = TabsItem;
+Tabs.Panel = TabsPanel;
+Tabs.List = TabsList;
+export {
+  Tabs,
+  Tabs as default
+};

package/dist/components/Tabs/components/TabsItem.js

@@ -1 +1,31 @@
-import{useTabsContext}from"../context/TabsContext.js";import clsx$1 from"clsx";import{jsx,jsxs}from"react/jsx-runtime";import{useTranslation}from"react-i18next";var TabsItem=({icon,badge,label,id,order})=>{let{activeTab,setSelectedTab,onKeyDown,tabsRef}=useTabsContext(),{t}=useTranslation(),classes=clsx$1(`nav-link d-inline-flex gap-8 border-0`,activeTab===id?`selected`:``);return jsx(`li`,{className:`nav-item flex-shrink-0`,role:`presentation`,children:jsxs(`button`,{ref:el=>tabsRef.current[order]=el,type:`button`,id:`tab-${id}`,className:classes,onClick:()=>setSelectedTab(id),onKeyDown:event=>onKeyDown(event),role:`tab`,"aria-controls":`tabpanel-${id}`,"aria-selected":activeTab===id,tabIndex:activeTab===id?0:-1,children:[icon,jsxs(`small`,{children:[t(label),` `,badge]})]})})};export{TabsItem as default};
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { useTranslation } from "react-i18next";
+import { useTabsContext } from "../context/TabsContext.js";
+const TabsItem = ({
+  icon,
+  badge,
+  label,
+  id,
+  order
+}) => {
+  const {
+    activeTab,
+    setSelectedTab,
+    onKeyDown,
+    tabsRef
+  } = useTabsContext(), {
+    t
+  } = useTranslation(), classes = clsx("nav-link d-inline-flex gap-8 border-0", activeTab === id ? "selected" : "");
+  return /* @__PURE__ */ jsx("li", { className: "nav-item flex-shrink-0", role: "presentation", children: /* @__PURE__ */ jsxs("button", { ref: (el) => tabsRef.current[order] = el, type: "button", id: `tab-${id}`, className: classes, onClick: () => setSelectedTab(id), onKeyDown: (event) => onKeyDown(event), role: "tab", "aria-controls": `tabpanel-${id}`, "aria-selected": activeTab === id, tabIndex: activeTab === id ? 0 : -1, children: [
+    icon,
+    /* @__PURE__ */ jsxs("small", { children: [
+      t(label),
+      " ",
+      badge
+    ] })
+  ] }) });
+};
+export {
+  TabsItem as default
+};

package/dist/components/Tabs/components/TabsList.js

@@ -1 +1,34 @@
-import{useTabsContext}from"../context/TabsContext.js";import Tabs from"./Tabs.js";import clsx$1 from"clsx";import{jsx,jsxs}from"react/jsx-runtime";var TabsList=props=>{let{items,tabUnderlineLeft,tabUnderlineWidth}=useTabsContext(),{className,fullWidth,isSticky,stickyTop,...restProps}=props,ulClasses=clsx$1(`nav nav-tabs flex-nowrap`,{"w-100":fullWidth});return jsx(`div`,{className:clsx$1(` flex-shrink-0 overflow-x-auto`,{"position-sticky z-1":isSticky,"position-relative":!isSticky},className),...restProps,style:isSticky?{top:stickyTop}:void 0,children:jsxs(`ul`,{className:ulClasses,role:`tablist`,children:[items.map((item,order)=>jsx(Tabs.Item,{order,...item},item.id)),jsx(`span`,{className:`nav-slide`,style:{left:tabUnderlineLeft,width:tabUnderlineWidth}})]})})};export{TabsList as default};
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { useTabsContext } from "../context/TabsContext.js";
+import { Tabs } from "./Tabs.js";
+const TabsList = (props) => {
+  const {
+    items,
+    tabUnderlineLeft,
+    tabUnderlineWidth
+  } = useTabsContext(), {
+    className,
+    fullWidth,
+    isSticky,
+    stickyTop,
+    ...restProps
+  } = props, ulClasses = clsx("nav nav-tabs flex-nowrap", {
+    "w-100": fullWidth
+  }), tabslist = clsx(" flex-shrink-0 overflow-x-auto", {
+    "position-sticky z-1": isSticky,
+    "position-relative": !isSticky
+  }, className);
+  return /* @__PURE__ */ jsx("div", { className: tabslist, ...restProps, style: isSticky ? {
+    top: stickyTop
+  } : void 0, children: /* @__PURE__ */ jsxs("ul", { className: ulClasses, role: "tablist", children: [
+    items.map((item, order) => /* @__PURE__ */ jsx(Tabs.Item, { order, ...item }, item.id)),
+    /* @__PURE__ */ jsx("span", { className: "nav-slide", style: {
+      left: tabUnderlineLeft,
+      width: tabUnderlineWidth
+    } })
+  ] }) });
+};
+export {
+  TabsList as default
+};

package/dist/components/Tabs/components/TabsPanel.js

@@ -1 +1,19 @@
-import{useTabsContext}from"../context/TabsContext.js";import clsx$1 from"clsx";import{jsx}from"react/jsx-runtime";var TabsPanel=({children,currentItem,fullHeight,className})=>{let{activeTab}=useTabsContext();return jsx(`div`,{className:clsx$1(`tab-content d-flex flex-fill w-100`,{"position-relative h-100":fullHeight},className),children:jsx(`div`,{className:`tab-pane flex-fill w-100 fade ${activeTab===currentItem?.id?`show active`:``}`,id:`tabpanel-${currentItem?.id}`,role:`tabpanel`,"aria-labelledby":`tab-${currentItem?.id}`,tabIndex:0,children})})};export{TabsPanel as default};
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import { useTabsContext } from "../context/TabsContext.js";
+const TabsPanel = ({
+  children,
+  currentItem,
+  fullHeight,
+  className
+}) => {
+  const {
+    activeTab
+  } = useTabsContext(), contentClasses = clsx("tab-content d-flex flex-fill w-100", {
+    "position-relative h-100": fullHeight
+  }, className);
+  return /* @__PURE__ */ jsx("div", { className: contentClasses, children: /* @__PURE__ */ jsx("div", { className: `tab-pane flex-fill w-100 fade ${activeTab === (currentItem == null ? void 0 : currentItem.id) ? "show active" : ""}`, id: `tabpanel-${currentItem == null ? void 0 : currentItem.id}`, role: "tabpanel", "aria-labelledby": `tab-${currentItem == null ? void 0 : currentItem.id}`, tabIndex: 0, children }) });
+};
+export {
+  TabsPanel as default
+};

package/dist/components/Tabs/context/TabsContext.js

@@ -1 +1,12 @@
-import{createContext,useContext}from"react";var TabsContext=createContext(null);function useTabsContext(){let context=useContext(TabsContext);if(!context)throw Error(`Tabs compound components cannot be rendered outside the Tabs component`);return context}export{TabsContext,useTabsContext};
+import { createContext, useContext } from "react";
+const TabsContext = /* @__PURE__ */ createContext(null);
+function useTabsContext() {
+  const context = useContext(TabsContext);
+  if (!context)
+    throw new Error("Tabs compound components cannot be rendered outside the Tabs component");
+  return context;
+}
+export {
+  TabsContext,
+  useTabsContext
+};

package/dist/components/Tabs/hooks/useTabs.js

@@ -1 +1,61 @@
-import{useCallback,useEffect,useRef,useState}from"react";var useTabs=({defaultId,items,onChange})=>{let[activeTab,setActiveTab]=useState(defaultId||``),[tabUnderlineWidth,setTabUnderlineWidth]=useState(0),[tabUnderlineLeft,setTabUnderlineLeft]=useState(0),tabsRef=useRef([]),setSelectedTab=useCallback(id=>{setActiveTab(id)},[]);useEffect(()=>{let currentItem=items.find(item=>item.id===activeTab);currentItem&&onChange?.(currentItem)},[activeTab]),useEffect(()=>{function setTabPosition(){let activeElement=document.activeElement;if(!(activeElement?.tagName===`INPUT`||activeElement?.tagName===`TEXTAREA`||activeElement?.isContentEditable)){let currentTabIndex=items.findIndex(item=>item.id===activeTab);currentTabIndex===-1&&defaultId&&setActiveTab(defaultId);let currentTabRef=tabsRef.current[currentTabIndex];currentTabRef&&(currentTabRef.focus(),setTabUnderlineLeft(currentTabRef?.offsetLeft??0),setTabUnderlineWidth(currentTabRef?.clientWidth??0))}}return setTabPosition(),window.addEventListener(`resize`,setTabPosition),()=>window.removeEventListener(`resize`,setTabPosition)},[activeTab,items,defaultId]);let moveFocusToPreviousTab=useCallback(activeTab=>{let index=items.findIndex(item=>item.id===activeTab);activeTab===items[0]?.id?setActiveTab(items[items.length-1]?.id):setActiveTab(items[index-1]?.id)},[items]),moveFocusToNextTab=useCallback(activeTab=>{let index=items.findIndex(item=>item.id===activeTab);activeTab===items[items.length-1]?.id?setActiveTab(items[0]?.id):setActiveTab(items[index+1]?.id)},[items]);return{activeTab,setSelectedTab,tabsRef,tabUnderlineLeft,tabUnderlineWidth,onKeyDown:useCallback(event=>{switch(event.code){case`ArrowLeft`:moveFocusToPreviousTab(activeTab);break;case`ArrowRight`:moveFocusToNextTab(activeTab);break;case`Home`:setActiveTab(items[0]?.id);break;case`End`:setActiveTab(items[items.length-1]?.id);break;default:break}},[activeTab,items,moveFocusToNextTab,moveFocusToPreviousTab])}};export{useTabs};
+import { useState, useRef, useCallback, useEffect } from "react";
+const useTabs = ({
+  defaultId,
+  items,
+  onChange
+}) => {
+  const [activeTab, setActiveTab] = useState(defaultId || ""), [tabUnderlineWidth, setTabUnderlineWidth] = useState(0), [tabUnderlineLeft, setTabUnderlineLeft] = useState(0), tabsRef = useRef([]), setSelectedTab = useCallback((id) => {
+    setActiveTab(id);
+  }, []);
+  useEffect(() => {
+    const currentItem = items.find((item) => item.id === activeTab);
+    currentItem && (onChange == null || onChange(currentItem));
+  }, [activeTab]), useEffect(() => {
+    function setTabPosition() {
+      const activeElement = document.activeElement;
+      if (!((activeElement == null ? void 0 : activeElement.tagName) === "INPUT" || (activeElement == null ? void 0 : activeElement.tagName) === "TEXTAREA" || (activeElement == null ? void 0 : activeElement.isContentEditable))) {
+        const currentTabIndex = items.findIndex((item) => item.id === activeTab);
+        currentTabIndex === -1 && defaultId && setActiveTab(defaultId);
+        const currentTabRef = tabsRef.current[currentTabIndex];
+        currentTabRef && (currentTabRef.focus(), setTabUnderlineLeft((currentTabRef == null ? void 0 : currentTabRef.offsetLeft) ?? 0), setTabUnderlineWidth((currentTabRef == null ? void 0 : currentTabRef.clientWidth) ?? 0));
+      }
+    }
+    return setTabPosition(), window.addEventListener("resize", setTabPosition), () => window.removeEventListener("resize", setTabPosition);
+  }, [activeTab, items, defaultId]);
+  const moveFocusToPreviousTab = useCallback((activeTab2) => {
+    var _a, _b, _c;
+    const index = items.findIndex((item) => item.id === activeTab2);
+    activeTab2 === ((_a = items[0]) == null ? void 0 : _a.id) ? setActiveTab((_b = items[items.length - 1]) == null ? void 0 : _b.id) : setActiveTab((_c = items[index - 1]) == null ? void 0 : _c.id);
+  }, [items]), moveFocusToNextTab = useCallback((activeTab2) => {
+    var _a, _b, _c;
+    const index = items.findIndex((item) => item.id === activeTab2);
+    activeTab2 === ((_a = items[items.length - 1]) == null ? void 0 : _a.id) ? setActiveTab((_b = items[0]) == null ? void 0 : _b.id) : setActiveTab((_c = items[index + 1]) == null ? void 0 : _c.id);
+  }, [items]), onKeyDown = useCallback((event) => {
+    var _a, _b;
+    switch (event.code) {
+      case "ArrowLeft":
+        moveFocusToPreviousTab(activeTab);
+        break;
+      case "ArrowRight":
+        moveFocusToNextTab(activeTab);
+        break;
+      case "Home":
+        setActiveTab((_a = items[0]) == null ? void 0 : _a.id);
+        break;
+      case "End":
+        setActiveTab((_b = items[items.length - 1]) == null ? void 0 : _b.id);
+        break;
+    }
+  }, [activeTab, items, moveFocusToNextTab, moveFocusToPreviousTab]);
+  return {
+    activeTab,
+    setSelectedTab,
+    tabsRef,
+    tabUnderlineLeft,
+    tabUnderlineWidth,
+    onKeyDown
+  };
+};
+export {
+  useTabs
+};

package/dist/components/TextArea/TextArea.js

@@ -1 +1,43 @@
-import{useFormControl}from"../Form/FormContext.js";import Textcounter from"../TextCounter/TextCounter.js";import clsx$1 from"clsx";import{forwardRef,useState}from"react";import{Fragment as Fragment$1,jsx,jsxs}from"react/jsx-runtime";var TextArea=forwardRef(({noValidationIcon,placeholder,size=`md`,height=`md`,className,showCounter=!1,...restProps},ref)=>{let{id,isRequired,isReadOnly,status}=useFormControl(),[currentLength,setCurrentLength]=useState(restProps.defaultValue?.toString().length||0),classes=clsx$1({"form-control":!isReadOnly,"form-control-lg":size===`lg`,"form-control-sm":size===`sm`,"textarea-height-lg":height===`lg`,"textarea-height-md":height===`md`,"textarea-height-sm":height===`sm`,"is-invalid":status===`invalid`,"is-valid":status===`valid`,"form-control-plaintext":isReadOnly,"no-validation-icon":noValidationIcon},className),handleChange=e=>{setCurrentLength(e.target.value.length),restProps.onChange?.(e)};return jsxs(Fragment$1,{children:[jsx(`textarea`,{ref,id,className:classes,placeholder,required:isRequired,readOnly:isReadOnly,...restProps,onChange:handleChange}),showCounter&&!status&&jsx(Textcounter,{currentLength,maxLength:restProps.maxLength??0})]})});export{TextArea as default};
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { forwardRef, useState } from "react";
+import clsx from "clsx";
+import { useFormControl } from "../Form/FormContext.js";
+import Textcounter from "../TextCounter/TextCounter.js";
+const TextArea = /* @__PURE__ */ forwardRef(({
+  noValidationIcon,
+  placeholder,
+  size = "md",
+  height = "md",
+  className,
+  showCounter = !1,
+  ...restProps
+}, ref) => {
+  var _a;
+  const {
+    id,
+    isRequired,
+    isReadOnly,
+    status
+  } = useFormControl(), [currentLength, setCurrentLength] = useState(((_a = restProps.defaultValue) == null ? void 0 : _a.toString().length) || 0), classes = clsx({
+    "form-control": !isReadOnly,
+    "form-control-lg": size === "lg",
+    "form-control-sm": size === "sm",
+    "textarea-height-lg": height === "lg",
+    "textarea-height-md": height === "md",
+    "textarea-height-sm": height === "sm",
+    "is-invalid": status === "invalid",
+    "is-valid": status === "valid",
+    "form-control-plaintext": isReadOnly,
+    "no-validation-icon": noValidationIcon
+  }, className);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("textarea", { ref, id, className: classes, placeholder, required: isRequired, readOnly: isReadOnly, ...restProps, onChange: (e) => {
+      var _a2;
+      setCurrentLength(e.target.value.length), (_a2 = restProps.onChange) == null || _a2.call(restProps, e);
+    } }),
+    showCounter && !status && /* @__PURE__ */ jsx(Textcounter, { currentLength, maxLength: restProps.maxLength ?? 0 })
+  ] });
+});
+export {
+  TextArea as default
+};

package/dist/components/TextCounter/TextCounter.js

@@ -1 +1,16 @@
-import clsx$1 from"clsx";import{jsxs}from"react/jsx-runtime";var Textcounter=({currentLength,maxLength})=>jsxs(`span`,{className:clsx$1(`caption text-end float-end mt-n32 py-2 px-12 `,{"text-danger":currentLength===maxLength,"text-gray-700":currentLength!==maxLength}),children:[currentLength,` / `,maxLength]});export{Textcounter as default};
+import { jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+const Textcounter = ({
+  currentLength,
+  maxLength
+}) => /* @__PURE__ */ jsxs("span", { className: clsx("caption text-end float-end mt-n32 py-2 px-12 ", {
+  "text-danger": currentLength === maxLength,
+  "text-gray-700": currentLength !== maxLength
+}), children: [
+  currentLength,
+  " / ",
+  maxLength
+] });
+export {
+  Textcounter as default
+};