@dragunio/fe-libs 0.1.0 → 0.1.2

package/dist/index.mjs

@@ -8,45 +8,60 @@ var hierarchyFromVariant = {
   danger: "primary"
 };
 var getIconSize = (size) => size === "24" ? 16 : 20;
-var Button = forwardRef(function Button2({
-  hierarchy,
-  variant,
-  size = "32",
-  color = "normal",
-  destructive,
-  iconOnly = false,
-  icon,
-  prefix,
-  suffix,
-  content,
-  loading = false,
-  alignCenter = false,
-  children,
-  className,
-  disabled,
-  type = "button",
-  ...props
-}, ref) {
-  const resolvedHierarchy = hierarchy ?? hierarchyFromVariant[variant ?? "primary"];
-  const resolvedDestructive = destructive || variant === "danger";
-  const isDisabled = disabled || loading;
-  const label = loading ? "Loading\u2026" : children ?? content;
-  const classes = [
-    "fe-button",
-    `fe-button--${resolvedHierarchy}`,
-    `fe-button--${size}`,
-    `fe-button--${color}`,
-    iconOnly && "fe-button--icon-only",
-    resolvedDestructive && "fe-button--destructive",
-    alignCenter && "fe-button--align-center",
-    className
-  ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsx("button", { ref, className: classes, type, disabled: isDisabled, "aria-busy": loading || void 0, ...props, children: iconOnly ? icon : /* @__PURE__ */ jsxs(Fragment, { children: [
-    prefix && /* @__PURE__ */ jsx("span", { className: "fe-button__icon", children: prefix }),
-    /* @__PURE__ */ jsx("span", { className: "fe-button__label", children: label }),
-    suffix && /* @__PURE__ */ jsx("span", { className: "fe-button__icon", children: suffix })
-  ] }) });
-});
+var Button = forwardRef(
+  function Button2({
+    hierarchy,
+    variant,
+    size = "32",
+    color = "normal",
+    destructive,
+    iconOnly = false,
+    icon,
+    prefix,
+    suffix,
+    content,
+    loading = false,
+    alignCenter = false,
+    children,
+    className,
+    disabled,
+    type = "button",
+    ...props
+  }, ref) {
+    const resolvedHierarchy = hierarchy ?? hierarchyFromVariant[variant ?? "primary"];
+    const resolvedDestructive = destructive || variant === "danger";
+    const isDisabled = disabled || loading;
+    const label = loading ? "Loading\u2026" : children ?? content;
+    const hasLabel = label !== null && label !== void 0 && label !== false && label !== "";
+    const resolvedIconOnly = iconOnly || icon !== null && icon !== void 0 && !hasLabel;
+    const classes = [
+      "fe-button",
+      `fe-button--${resolvedHierarchy}`,
+      `fe-button--${size}`,
+      `fe-button--${color}`,
+      resolvedIconOnly && "fe-button--icon-only",
+      resolvedDestructive && "fe-button--destructive",
+      alignCenter && "fe-button--align-center",
+      className
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref,
+        className: classes,
+        type,
+        disabled: isDisabled,
+        "aria-busy": loading || void 0,
+        ...props,
+        children: resolvedIconOnly ? icon : /* @__PURE__ */ jsxs(Fragment, { children: [
+          prefix && /* @__PURE__ */ jsx("span", { className: "fe-button__icon", children: prefix }),
+          /* @__PURE__ */ jsx("span", { className: "fe-button__label", children: label }),
+          suffix && /* @__PURE__ */ jsx("span", { className: "fe-button__icon", children: suffix })
+        ] })
+      }
+    );
+  }
+);
 Button.displayName = "Button";
 
 // packages/icons/src/index.tsx
@@ -76,11 +91,130 @@ function SearchIcon(props) {
 }
 
 // packages/table/src/index.tsx
-import { createContext, useContext } from "react";
-import { jsx as jsx3 } from "react/jsx-runtime";
+import {
+  createContext,
+  isValidElement,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 var TableContext = createContext({ striped: false });
-function Table({ striped = false, children, ...props }) {
-  return /* @__PURE__ */ jsx3(TableContext.Provider, { value: { striped }, children: /* @__PURE__ */ jsx3("table", { ...props, children }) });
+var MIN_COLUMN_WIDTH = 96;
+var MAX_COLUMN_WIDTH = 1200;
+function getColumnCount(headers, data) {
+  return Math.max(headers.length, ...data.map((row) => row.length), 0);
+}
+function getText(value) {
+  if (typeof value === "string" || typeof value === "number") return String(value);
+  if (Array.isArray(value)) return value.map(getText).join("");
+  if (isValidElement(value)) return getText(value.props.children);
+  return "";
+}
+function autoColumnSize(columnIndex, headers, data) {
+  const values = [headers[columnIndex], ...data.map((row) => row[columnIndex])];
+  const longestText = values.reduce((longest, value) => Math.max(longest, getText(value).length), 0);
+  return Math.min(MAX_COLUMN_WIDTH, Math.max(MIN_COLUMN_WIDTH, longestText * 8 + 40));
+}
+function getInitialColumnSizes(headers, data, sizes, minColumnWidth = MIN_COLUMN_WIDTH) {
+  return Array.from({ length: getColumnCount(headers, data) }, (_, columnIndex) => {
+    const suppliedSize = sizes?.[columnIndex];
+    return typeof suppliedSize === "number" && Number.isFinite(suppliedSize) ? Math.min(MAX_COLUMN_WIDTH, Math.max(minColumnWidth, suppliedSize)) : autoColumnSize(columnIndex, headers, data);
+  });
+}
+function sameSizes(left, right) {
+  return left.length === right.length && left.every((size, index) => size === right[index]);
+}
+function DataTable({
+  headers,
+  data,
+  striped = true,
+  defaultColumnSizes,
+  columnSizes,
+  onColumnResize,
+  minColumnWidth = MIN_COLUMN_WIDTH,
+  className,
+  ...props
+}) {
+  const columnCount = getColumnCount(headers, data);
+  const safeMinWidth = Math.max(1, minColumnWidth);
+  const generatedSizes = useMemo(
+    () => getInitialColumnSizes(headers, data, defaultColumnSizes, safeMinWidth),
+    [headers, data, defaultColumnSizes, safeMinWidth]
+  );
+  const [uncontrolledSizes, setUncontrolledSizes] = useState(generatedSizes);
+  const resizeState = useRef();
+  const [isResizing, setIsResizing] = useState(false);
+  const sizes = columnSizes ? getInitialColumnSizes(headers, data, columnSizes, safeMinWidth).map((size) => Math.max(safeMinWidth, size)) : uncontrolledSizes.map((size) => Math.max(safeMinWidth, size));
+  useEffect(() => {
+    if (columnSizes) return;
+    setUncontrolledSizes((currentSizes) => {
+      const nextSizes = generatedSizes.map((generatedSize, index) => currentSizes[index] ?? generatedSize);
+      return sameSizes(currentSizes, nextSizes) ? currentSizes : nextSizes;
+    });
+  }, [columnSizes, generatedSizes]);
+  const updateColumnSize = useCallback((columnIndex, nextSize) => {
+    const clampedSize = Math.min(MAX_COLUMN_WIDTH, Math.max(safeMinWidth, Math.round(nextSize)));
+    const nextSizes = sizes.map((size, index) => index === columnIndex ? clampedSize : size);
+    if (!columnSizes) setUncontrolledSizes(nextSizes);
+    onColumnResize?.(nextSizes, columnIndex);
+  }, [columnSizes, onColumnResize, safeMinWidth, sizes]);
+  useEffect(() => {
+    const onPointerMove = (event) => {
+      const activeResize = resizeState.current;
+      if (!activeResize) return;
+      updateColumnSize(activeResize.columnIndex, activeResize.startWidth + event.clientX - activeResize.startX);
+    };
+    const stopResizing = () => {
+      resizeState.current = void 0;
+      setIsResizing(false);
+    };
+    window.addEventListener("pointermove", onPointerMove);
+    window.addEventListener("pointerup", stopResizing);
+    window.addEventListener("pointercancel", stopResizing);
+    return () => {
+      window.removeEventListener("pointermove", onPointerMove);
+      window.removeEventListener("pointerup", stopResizing);
+      window.removeEventListener("pointercancel", stopResizing);
+    };
+  }, [updateColumnSize]);
+  return /* @__PURE__ */ jsx3("div", { className: "fe-table", "data-resizing": isResizing || void 0, children: /* @__PURE__ */ jsxs3("table", { className: ["fe-table__table", className].filter(Boolean).join(" "), "data-fe-table": true, "data-striped": striped || void 0, ...props, children: [
+    /* @__PURE__ */ jsx3("colgroup", { children: sizes.map((size, index) => /* @__PURE__ */ jsx3("col", { style: { width: `${size}px` } }, index)) }),
+    /* @__PURE__ */ jsx3("thead", { children: /* @__PURE__ */ jsx3("tr", { children: Array.from({ length: columnCount }, (_, columnIndex) => /* @__PURE__ */ jsxs3("th", { scope: "col", children: [
+      /* @__PURE__ */ jsx3("span", { className: "fe-table__header-content", children: headers[columnIndex] ?? `Column ${columnIndex + 1}` }),
+      /* @__PURE__ */ jsx3(
+        "span",
+        {
+          className: "fe-table__resize-handle",
+          role: "separator",
+          "aria-label": `Resize ${getText(headers[columnIndex]) || `column ${columnIndex + 1}`}`,
+          "aria-orientation": "vertical",
+          "aria-valuemin": safeMinWidth,
+          "aria-valuemax": MAX_COLUMN_WIDTH,
+          "aria-valuenow": sizes[columnIndex] ?? safeMinWidth,
+          tabIndex: 0,
+          onPointerDown: (event) => {
+            event.preventDefault();
+            resizeState.current = { columnIndex, startX: event.clientX, startWidth: sizes[columnIndex] ?? safeMinWidth };
+            setIsResizing(true);
+            event.currentTarget.setPointerCapture(event.pointerId);
+          },
+          onKeyDown: (event) => {
+            if (event.key === "ArrowLeft") updateColumnSize(columnIndex, (sizes[columnIndex] ?? safeMinWidth) - 16);
+            if (event.key === "ArrowRight") updateColumnSize(columnIndex, (sizes[columnIndex] ?? safeMinWidth) + 16);
+          }
+        }
+      )
+    ] }, columnIndex)) }) }),
+    /* @__PURE__ */ jsx3("tbody", { children: data.map((row, rowIndex) => /* @__PURE__ */ jsx3("tr", { children: Array.from({ length: columnCount }, (_, columnIndex) => /* @__PURE__ */ jsx3("td", { children: row[columnIndex] }, columnIndex)) }, rowIndex)) })
+  ] }) });
+}
+function Table({ headers, data, striped, children, ...props }) {
+  if (headers || data) return /* @__PURE__ */ jsx3(DataTable, { headers: headers ?? [], data: data ?? [], striped: striped ?? true, ...props });
+  return /* @__PURE__ */ jsx3(TableContext.Provider, { value: { striped: striped ?? false }, children: /* @__PURE__ */ jsx3("table", { "data-fe-table": true, "data-striped": striped || void 0, ...props, children }) });
 }
 function TableHead(props) {
   return /* @__PURE__ */ jsx3("thead", { ...props });
@@ -101,12 +235,387 @@ function TableHeader({ children, ...props }) {
 function TableCaption(props) {
   return /* @__PURE__ */ jsx3("caption", { ...props });
 }
+
+// packages/toggle/src/index.tsx
+import { forwardRef as forwardRef2 } from "react";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var Toggle = forwardRef2(function Toggle2({ color = "#16a34a", label, className, style, id, ...props }, ref) {
+  const classes = ["fe-toggle", className].filter(Boolean).join(" ");
+  const toggleStyle = {
+    "--fe-toggle-color": color,
+    ...style
+  };
+  return /* @__PURE__ */ jsxs4("label", { className: classes, style: toggleStyle, children: [
+    /* @__PURE__ */ jsx4("input", { ref, id, className: "fe-toggle__input", type: "checkbox", role: "switch", ...props }),
+    /* @__PURE__ */ jsx4("span", { className: "fe-toggle__control", "aria-hidden": "true" }),
+    label && /* @__PURE__ */ jsx4("span", { className: "fe-toggle__label", children: label })
+  ] });
+});
+Toggle.displayName = "Toggle";
+
+// packages/drawer/src/index.tsx
+import { useEffect as useEffect2 } from "react";
+import { createPortal } from "react-dom";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+function Drawer({ open, onClose, title, footer, side = "right", width = 400, fullScreen = false, children, closeOnBackdropClick = true, className, style, ...props }) {
+  useEffect2(() => {
+    if (!open) return;
+    const onKeyDown = (event) => {
+      if (event.key === "Escape") onClose();
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [onClose, open]);
+  if (!open || typeof document === "undefined") return null;
+  const panelStyle = !fullScreen && (side === "left" || side === "right") ? { ...style, width: typeof width === "number" ? `${width}px` : width } : style;
+  return createPortal(/* @__PURE__ */ jsx5("div", { className: "fe-drawer-backdrop", role: "presentation", onMouseDown: (event) => {
+    if (event.target === event.currentTarget && closeOnBackdropClick) onClose();
+  }, children: /* @__PURE__ */ jsxs5("aside", { className: ["fe-drawer", `fe-drawer--${side}`, fullScreen && "fe-drawer--full-screen", className].filter(Boolean).join(" "), style: panelStyle, role: "dialog", "aria-modal": "true", "aria-label": typeof title === "string" ? title : "Drawer", ...props, children: [
+    /* @__PURE__ */ jsxs5("header", { className: "fe-drawer__header", children: [
+      title && /* @__PURE__ */ jsx5("h2", { children: title }),
+      /* @__PURE__ */ jsx5("button", { type: "button", "aria-label": "Close drawer", onClick: onClose, children: "\xD7" })
+    ] }),
+    /* @__PURE__ */ jsx5("div", { className: "fe-drawer__body", children }),
+    footer && /* @__PURE__ */ jsx5("footer", { className: "fe-drawer__footer", children: footer })
+  ] }) }), document.body);
+}
+
+// packages/form-controls/src/index.tsx
+import {
+  forwardRef as forwardRef3,
+  useEffect as useEffect3,
+  useId,
+  useRef as useRef2,
+  useState as useState2
+} from "react";
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+var Selection = forwardRef3(function Selection2({ className, label, helperText, error, options, placeholder = "Select an option", size = "medium", id, value, defaultValue, onChange, multiple = false, searchable = false, tag = false, clearable = false, disabled = false, name, onKeyDown, ...props }, ref) {
+  const generatedId = useId();
+  const listboxId = id ?? generatedId;
+  const isControlled = value !== void 0;
+  const [internalValue, setInternalValue] = useState2(defaultValue ?? (multiple ? [] : ""));
+  const selectedValue = isControlled ? value : internalValue;
+  const selectedValues = Array.isArray(selectedValue) ? selectedValue : selectedValue === "" || selectedValue === null || selectedValue === void 0 ? [] : [selectedValue];
+  const selectedOptions = options.filter((option) => selectedValues.some((item) => String(item) === String(option.value)));
+  const [open, setOpen] = useState2(false);
+  const [query, setQuery] = useState2("");
+  const [activeIndex, setActiveIndex] = useState2(0);
+  const rootRef = useRef2(null);
+  useEffect3(() => {
+    const close = (event) => {
+      if (!rootRef.current?.contains(event.target)) setOpen(false);
+    };
+    document.addEventListener("mousedown", close);
+    return () => document.removeEventListener("mousedown", close);
+  }, []);
+  const filteredOptions = options.filter((option) => !query || (option.searchText ?? (typeof option.label === "string" ? option.label : String(option.value))).toLowerCase().includes(query.toLowerCase()));
+  const commit = (next) => {
+    if (!isControlled) setInternalValue(next);
+    const selected = options.filter((option) => (Array.isArray(next) ? next : [next]).some((item) => String(item) === String(option.value)));
+    onChange?.(next, multiple ? selected : selected[0]);
+  };
+  const choose = (option) => {
+    if (option.disabled) return;
+    const isSelected = selectedValues.some((item) => String(item) === String(option.value));
+    if (multiple) commit(isSelected ? selectedValues.filter((item) => String(item) !== String(option.value)) : [...selectedValues, option.value]);
+    else {
+      commit(option.value);
+      setOpen(false);
+      setQuery("");
+    }
+  };
+  const clear = () => {
+    commit(multiple ? [] : "");
+    setQuery("");
+  };
+  const displayLabel = selectedOptions.length ? selectedOptions.map((option) => option.label) : null;
+  const onTriggerKeyDown = (event) => {
+    onKeyDown?.(event);
+    if (disabled) return;
+    if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+      event.preventDefault();
+      setOpen(true);
+      setActiveIndex((current) => Math.max(0, Math.min(filteredOptions.length - 1, current + (event.key === "ArrowDown" ? 1 : -1))));
+    }
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      if (!open) setOpen(true);
+      else if (filteredOptions[activeIndex]) choose(filteredOptions[activeIndex]);
+    }
+    if (event.key === "Escape") setOpen(false);
+  };
+  return /* @__PURE__ */ jsxs6("div", { ref, className: ["fe-selection", `fe-selection--${size}`, open && "fe-selection--open", clearable && selectedOptions.length > 0 && "fe-selection--clearable", error && "fe-selection--error", disabled && "fe-selection--disabled", className].filter(Boolean).join(" "), ...props, children: [
+    label && /* @__PURE__ */ jsx6("span", { className: "fe-selection__label", children: label }),
+    /* @__PURE__ */ jsxs6("div", { ref: rootRef, className: "fe-selection__control", children: [
+      name && selectedValues.map((item) => /* @__PURE__ */ jsx6("input", { type: "hidden", name: multiple ? `${name}[]` : name, value: item }, String(item))),
+      /* @__PURE__ */ jsxs6("button", { type: "button", className: "fe-selection__trigger", disabled, "aria-invalid": error || void 0, "aria-haspopup": "listbox", "aria-expanded": open, "aria-controls": listboxId, onClick: () => setOpen((current) => !current), onKeyDown: onTriggerKeyDown, children: [
+        /* @__PURE__ */ jsx6("span", { className: ["fe-selection__value", !selectedOptions.length && "is-placeholder", tag && selectedOptions.length > 1 && "is-tags"].filter(Boolean).join(" "), children: displayLabel ? tag && multiple ? selectedOptions.map((option) => /* @__PURE__ */ jsxs6("span", { className: "fe-selection__tag", children: [
+          option.label,
+          /* @__PURE__ */ jsx6("span", { "aria-hidden": "true", children: "\xD7" })
+        ] }, String(option.value))) : displayLabel.map((item, index) => /* @__PURE__ */ jsxs6("span", { children: [
+          item,
+          index < displayLabel.length - 1 ? ", " : ""
+        ] }, index)) : placeholder }),
+        /* @__PURE__ */ jsx6("span", { className: "fe-selection__actions", children: /* @__PURE__ */ jsx6("span", { className: "fe-selection__chevron", "aria-hidden": "true" }) })
+      ] }),
+      clearable && selectedOptions.length > 0 && /* @__PURE__ */ jsx6("button", { type: "button", className: "fe-selection__clear", "aria-label": "Clear selection", onClick: clear }),
+      open && /* @__PURE__ */ jsxs6("div", { id: listboxId, className: "fe-selection__menu", role: "listbox", "aria-multiselectable": multiple || void 0, children: [
+        searchable && /* @__PURE__ */ jsxs6("div", { className: "fe-selection__search", children: [
+          /* @__PURE__ */ jsx6("span", { "aria-hidden": "true", children: "\u2315" }),
+          /* @__PURE__ */ jsx6("input", { autoFocus: true, value: query, onChange: (event) => {
+            setQuery(event.target.value);
+            setActiveIndex(0);
+          }, placeholder: "Search\u2026", "aria-label": "Search options" })
+        ] }),
+        /* @__PURE__ */ jsx6("div", { className: "fe-selection__options", children: filteredOptions.length ? filteredOptions.map((option, index) => {
+          const isSelected = selectedValues.some((item) => String(item) === String(option.value));
+          return /* @__PURE__ */ jsxs6("button", { type: "button", className: [isSelected && "is-selected", index === activeIndex && "is-active"].filter(Boolean).join(" "), role: "option", "aria-selected": isSelected, disabled: option.disabled, onMouseMove: () => setActiveIndex(index), onClick: () => choose(option), children: [
+            /* @__PURE__ */ jsx6("span", { children: option.label }),
+            isSelected && /* @__PURE__ */ jsx6("span", { className: "fe-selection__check", "aria-hidden": "true", children: "\u2713" })
+          ] }, String(option.value));
+        }) : /* @__PURE__ */ jsx6("p", { className: "fe-selection__empty", children: "No matching options" }) })
+      ] })
+    ] }),
+    helperText && /* @__PURE__ */ jsx6("span", { className: "fe-selection__helper", children: helperText })
+  ] });
+});
+Selection.displayName = "Selection";
+function formatNumber(value, decimals = 2, thousandSeparator = ",", decimalSeparator = ".") {
+  return new Intl.NumberFormat("en-US", {
+    minimumFractionDigits: 0,
+    maximumFractionDigits: decimals,
+    useGrouping: true
+  }).format(value).replace(/,/g, thousandSeparator).replace(/\./g, decimalSeparator);
+}
+function escapeRegExp(value) {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+function groupInteger(value, separator) {
+  return value.replace(/\B(?=(\d{3})+(?!\d))/g, separator);
+}
+function normalizeNumberInput(raw, options) {
+  const { allowDecimal, decimalSeparator, thousandSeparator, min, max } = options;
+  const decimals = Math.max(0, options.decimals);
+  const negative = raw.trimStart().startsWith("-") && (min === void 0 || min < 0);
+  const decimalExpression = new RegExp(`[^0-9${allowDecimal ? escapeRegExp(decimalSeparator) : ""}]`, "g");
+  const cleaned = raw.replace(decimalExpression, "");
+  const decimalIndex = allowDecimal ? cleaned.indexOf(decimalSeparator) : -1;
+  const hasDecimal = decimalIndex >= 0;
+  const rawInteger = hasDecimal ? cleaned.slice(0, decimalIndex) : cleaned;
+  const rawFraction = hasDecimal ? cleaned.slice(decimalIndex + decimalSeparator.length).replace(new RegExp(escapeRegExp(decimalSeparator), "g"), "") : "";
+  const integer = rawInteger.replace(/^0+(?=\d)/, "") || (rawInteger ? "0" : "");
+  const fraction = rawFraction.slice(0, decimals);
+  if (!integer && !fraction) return { display: negative ? "-" : "", value: null };
+  const numericValue = Number(`${negative ? "-" : ""}${integer || "0"}${hasDecimal ? `.${fraction || "0"}` : ""}`);
+  if (!Number.isFinite(numericValue)) return { display: "", value: null };
+  const lowerBound = min === void 0 ? numericValue : Math.max(numericValue, min);
+  const value = max === void 0 ? lowerBound : Math.min(lowerBound, max);
+  if (value !== numericValue) return { display: formatNumber(value, decimals, thousandSeparator, decimalSeparator), value };
+  return { display: `${negative ? "-" : ""}${groupInteger(integer || "0", thousandSeparator)}${hasDecimal ? `${decimalSeparator}${fraction}` : ""}`, value };
+}
+var NumberInput = forwardRef3(function NumberInput2({ value, defaultValue = null, onValueChange, allowDecimal = true, decimals = 2, min, max, decimalSeparator = ".", thousandSeparator = ",", label, helperText, error, className, onBlur, onFocus, ...props }, ref) {
+  const isControlled = value !== void 0;
+  const [internalValue, setInternalValue] = useState2(defaultValue);
+  const [focused, setFocused] = useState2(false);
+  const actualValue = isControlled ? value ?? null : internalValue;
+  const [text, setText] = useState2(actualValue === null ? "" : formatNumber(actualValue, decimals, thousandSeparator, decimalSeparator));
+  useEffect3(() => {
+    if (!focused) setText(actualValue === null ? "" : formatNumber(actualValue, decimals, thousandSeparator, decimalSeparator));
+  }, [actualValue, decimalSeparator, decimals, focused, thousandSeparator]);
+  const updateValue = (nextText) => {
+    const next = normalizeNumberInput(nextText, { allowDecimal, decimals, decimalSeparator, thousandSeparator, min, max });
+    setText(next.display);
+    const nextValue = next.value;
+    if (!isControlled) setInternalValue(nextValue);
+    onValueChange?.(nextValue);
+  };
+  return /* @__PURE__ */ jsxs6("label", { className: ["fe-number-input", error && "fe-number-input--error", className].filter(Boolean).join(" "), children: [
+    label && /* @__PURE__ */ jsx6("span", { className: "fe-number-input__label", children: label }),
+    /* @__PURE__ */ jsx6("input", { ref, inputMode: allowDecimal ? "decimal" : "numeric", value: text, "aria-invalid": error || void 0, onFocus: (event) => {
+      setFocused(true);
+      onFocus?.(event);
+    }, onChange: (event) => updateValue(event.target.value), onBlur: (event) => {
+      setFocused(false);
+      onBlur?.(event);
+    }, ...props }),
+    helperText && /* @__PURE__ */ jsx6("span", { className: "fe-number-input__helper", children: helperText })
+  ] });
+});
+NumberInput.displayName = "NumberInput";
+function CurrencyInput({ suffix = "VND", currencies, currency, defaultCurrency, onCurrencyChange, className, ...props }) {
+  const [internalCurrency, setInternalCurrency] = useState2(defaultCurrency ?? currencies?.[0]?.code ?? "");
+  const selectedCurrency = currency ?? internalCurrency;
+  const current = currencies?.find((item) => item.code === selectedCurrency);
+  const currencySuffix = current?.suffix ?? current?.code ?? suffix;
+  return /* @__PURE__ */ jsxs6("div", { className: ["fe-currency-input", className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ jsx6(NumberInput, { ...props, className: "fe-currency-input__number" }),
+    currencies?.length ? /* @__PURE__ */ jsx6("select", { className: "fe-currency-input__currency", "aria-label": "Currency", value: selectedCurrency, onChange: (event) => {
+      const next = currencies.find((item) => item.code === event.target.value);
+      if (!next) return;
+      if (currency === void 0) setInternalCurrency(next.code);
+      onCurrencyChange?.(next);
+    }, children: currencies.map((item) => /* @__PURE__ */ jsx6("option", { value: item.code, children: item.label ?? item.code }, item.code)) }) : /* @__PURE__ */ jsx6("span", { className: "fe-currency-input__suffix", children: currencySuffix })
+  ] });
+}
+var pad = (value) => String(value).padStart(2, "0");
+function formatDate(date, format) {
+  return format.replace(/yyyy/g, String(date.getFullYear())).replace(/MM/g, pad(date.getMonth() + 1)).replace(/dd/g, pad(date.getDate())).replace(/HH/g, pad(date.getHours())).replace(/mm/g, pad(date.getMinutes()));
+}
+function startOfDay(date) {
+  return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+}
+function sameDay(first, second) {
+  return !!first && !!second && startOfDay(first).getTime() === startOfDay(second).getTime();
+}
+function mergeDateTime(day, time) {
+  const [hours, minutes] = time.split(":").map(Number);
+  const next = new Date(day);
+  next.setHours(hours || 0, minutes || 0, 0, 0);
+  return next;
+}
+function DateTimePicker(props) {
+  const { label, format = "dd/MM/yyyy HH:mm", disabled, placeholder, locale = "en-US", className, mode = "single" } = props;
+  const isRange = mode === "range";
+  const controlled = props.value !== void 0;
+  const [singleInternal, setSingleInternal] = useState2((!isRange ? props.defaultValue : null) ?? null);
+  const [rangeInternal, setRangeInternal] = useState2((isRange ? props.defaultValue : void 0) ?? [null, null]);
+  const singleValue = !isRange ? props.value ?? singleInternal : null;
+  const rangeValue = isRange ? props.value ?? rangeInternal : [null, null];
+  const [open, setOpen] = useState2(false);
+  const [month, setMonth] = useState2(() => new Date((isRange ? rangeValue[0] : singleValue) ?? /* @__PURE__ */ new Date()));
+  const [editingEnd, setEditingEnd] = useState2(false);
+  const rootRef = useRef2(null);
+  useEffect3(() => {
+    const onPointerDown = (event) => {
+      if (!rootRef.current?.contains(event.target)) setOpen(false);
+    };
+    document.addEventListener("mousedown", onPointerDown);
+    return () => document.removeEventListener("mousedown", onPointerDown);
+  }, []);
+  const setSingle = (next) => {
+    if (!controlled) setSingleInternal(next);
+    props.onChange?.(next);
+  };
+  const setRange = (next) => {
+    if (!controlled) setRangeInternal(next);
+    props.onChange?.(next);
+  };
+  const selectDay = (day) => {
+    if (!isRange) {
+      setSingle(mergeDateTime(day, singleValue ? `${pad(singleValue.getHours())}:${pad(singleValue.getMinutes())}` : "00:00"));
+      setOpen(false);
+      return;
+    }
+    const [start, end] = rangeValue;
+    if (!start || end || editingEnd) {
+      setRange([mergeDateTime(day, start ? `${pad(start.getHours())}:${pad(start.getMinutes())}` : "00:00"), null]);
+      setEditingEnd(false);
+      return;
+    }
+    const nextEnd = mergeDateTime(day, "00:00");
+    setRange(nextEnd < start ? [nextEnd, start] : [start, nextEnd]);
+    setEditingEnd(false);
+  };
+  const shownValue = isRange ? [rangeValue[0] && formatDate(rangeValue[0], format), rangeValue[1] && formatDate(rangeValue[1], format)].filter(Boolean).join(" \u2014 ") : singleValue && formatDate(singleValue, format);
+  const firstDay = new Date(month.getFullYear(), month.getMonth(), 1);
+  const offset = (firstDay.getDay() + 6) % 7;
+  const days = Array.from({ length: 42 }, (_, index) => new Date(month.getFullYear(), month.getMonth(), index - offset + 1));
+  const selectedForTime = isRange ? editingEnd ? rangeValue[1] : rangeValue[0] : singleValue;
+  const setTime = (time) => {
+    if (!selectedForTime) return;
+    const next = mergeDateTime(selectedForTime, time);
+    if (isRange) setRange(editingEnd ? [rangeValue[0], next] : [next, rangeValue[1]]);
+    else setSingle(next);
+  };
+  return /* @__PURE__ */ jsxs6("div", { ref: rootRef, className: ["fe-datetime-picker", className].filter(Boolean).join(" "), children: [
+    label && /* @__PURE__ */ jsx6("span", { className: "fe-datetime-picker__label", children: label }),
+    /* @__PURE__ */ jsxs6("button", { type: "button", className: "fe-datetime-picker__trigger", disabled, "aria-expanded": open, onClick: () => setOpen((current) => !current), children: [
+      /* @__PURE__ */ jsx6("span", { "aria-hidden": "true", children: "\u25F7" }),
+      /* @__PURE__ */ jsx6("span", { children: shownValue || placeholder || (isRange ? "Select date range" : "Select date and time") })
+    ] }),
+    open && /* @__PURE__ */ jsxs6("div", { className: "fe-datetime-picker__popper", role: "dialog", "aria-label": "Date and time picker", children: [
+      /* @__PURE__ */ jsxs6("div", { className: "fe-datetime-picker__month", children: [
+        /* @__PURE__ */ jsx6("button", { type: "button", "aria-label": "Previous month", onClick: () => setMonth((current) => new Date(current.getFullYear(), current.getMonth() - 1, 1)), children: "\u2039" }),
+        /* @__PURE__ */ jsx6("strong", { children: month.toLocaleDateString(locale, { month: "long", year: "numeric" }) }),
+        /* @__PURE__ */ jsx6("button", { type: "button", "aria-label": "Next month", onClick: () => setMonth((current) => new Date(current.getFullYear(), current.getMonth() + 1, 1)), children: "\u203A" })
+      ] }),
+      /* @__PURE__ */ jsx6("div", { className: "fe-datetime-picker__weekdays", children: ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"].map((day) => /* @__PURE__ */ jsx6("span", { children: day }, day)) }),
+      /* @__PURE__ */ jsx6("div", { className: "fe-datetime-picker__days", children: days.map((day) => {
+        const inMonth = day.getMonth() === month.getMonth();
+        const selected = isRange ? sameDay(day, rangeValue[0]) || sameDay(day, rangeValue[1]) : sameDay(day, singleValue);
+        const inRange = isRange && rangeValue[0] && rangeValue[1] && day > startOfDay(rangeValue[0]) && day < startOfDay(rangeValue[1]);
+        return /* @__PURE__ */ jsx6("button", { type: "button", className: [!inMonth && "is-other-month", selected && "is-selected", inRange && "is-in-range"].filter(Boolean).join(" "), onClick: () => selectDay(day), children: day.getDate() }, day.toISOString());
+      }) }),
+      isRange && /* @__PURE__ */ jsxs6("div", { className: "fe-datetime-picker__range-tabs", children: [
+        /* @__PURE__ */ jsx6("button", { type: "button", className: !editingEnd ? "is-active" : "", onClick: () => setEditingEnd(false), children: "Start" }),
+        /* @__PURE__ */ jsx6("button", { type: "button", className: editingEnd ? "is-active" : "", onClick: () => setEditingEnd(true), children: "End" })
+      ] }),
+      /* @__PURE__ */ jsxs6("label", { className: "fe-datetime-picker__time", children: [
+        "Time",
+        /* @__PURE__ */ jsx6("input", { type: "time", value: selectedForTime ? `${pad(selectedForTime.getHours())}:${pad(selectedForTime.getMinutes())}` : "00:00", onChange: (event) => setTime(event.target.value), disabled: !selectedForTime })
+      ] })
+    ] })
+  ] });
+}
+
+// packages/tooltip/src/index.tsx
+import { cloneElement, useId as useId2, useState as useState3 } from "react";
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+function Tooltip({ content, children, placement = "top", disabled, className, ...props }) {
+  const [visible, setVisible] = useState3(false);
+  const id = useId2();
+  const trigger = cloneElement(children, { "aria-describedby": visible ? id : void 0, onMouseEnter: (event) => {
+    children.props.onMouseEnter?.(event);
+    setVisible(true);
+  }, onMouseLeave: (event) => {
+    children.props.onMouseLeave?.(event);
+    setVisible(false);
+  }, onFocus: (event) => {
+    children.props.onFocus?.(event);
+    setVisible(true);
+  }, onBlur: (event) => {
+    children.props.onBlur?.(event);
+    setVisible(false);
+  } });
+  return /* @__PURE__ */ jsxs7("span", { className: ["fe-tooltip", `fe-tooltip--${placement}`, className].filter(Boolean).join(" "), ...props, children: [
+    trigger,
+    visible && !disabled && /* @__PURE__ */ jsx7("span", { id, role: "tooltip", className: "fe-tooltip__content", children: content })
+  ] });
+}
+
+// packages/expandable-section/src/index.tsx
+import { useId as useId3, useState as useState4 } from "react";
+import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
+function ExpandableSection({ title, children, expanded, defaultExpanded = false, onExpandedChange, disabled, className, ...props }) {
+  const [internalExpanded, setInternalExpanded] = useState4(defaultExpanded);
+  const isExpanded = expanded ?? internalExpanded;
+  const id = useId3();
+  const toggle = () => {
+    if (disabled) return;
+    const next = !isExpanded;
+    if (expanded === void 0) setInternalExpanded(next);
+    onExpandedChange?.(next);
+  };
+  return /* @__PURE__ */ jsxs8("section", { className: ["fe-expandable-section", isExpanded && "fe-expandable-section--expanded", disabled && "fe-expandable-section--disabled", className].filter(Boolean).join(" "), ...props, children: [
+    /* @__PURE__ */ jsxs8("button", { className: "fe-expandable-section__trigger", type: "button", "aria-expanded": isExpanded, "aria-controls": id, disabled, onClick: toggle, children: [
+      /* @__PURE__ */ jsx8("span", { children: title }),
+      /* @__PURE__ */ jsx8("span", { className: "fe-expandable-section__chevron", "aria-hidden": "true" })
+    ] }),
+    /* @__PURE__ */ jsx8("div", { id, className: "fe-expandable-section__content", "aria-hidden": !isExpanded, children: /* @__PURE__ */ jsx8("div", { className: "fe-expandable-section__content-inner", children }) })
+  ] });
+}
 export {
   Button,
   ChevronDownIcon,
   CloseIcon,
+  CurrencyInput,
+  DateTimePicker,
+  Drawer,
+  ExpandableSection,
+  NumberInput,
   PlusIcon,
   SearchIcon,
+  Selection,
   Table,
   TableBody,
   TableCaption,
@@ -114,5 +623,8 @@ export {
   TableHead,
   TableHeader,
   TableRow,
+  Toggle,
+  Tooltip,
+  formatNumber,
   getIconSize
 };