@dragunio/fe-libs 0.1.1 → 0.1.2

package/dist/index.js

@@ -23,8 +23,14 @@ __export(index_exports, {
   Button: () => Button,
   ChevronDownIcon: () => ChevronDownIcon,
   CloseIcon: () => CloseIcon,
+  CurrencyInput: () => CurrencyInput,
+  DateTimePicker: () => DateTimePicker,
+  Drawer: () => Drawer,
+  ExpandableSection: () => ExpandableSection,
+  NumberInput: () => NumberInput,
   PlusIcon: () => PlusIcon,
   SearchIcon: () => SearchIcon,
+  Selection: () => Selection,
   Table: () => Table,
   TableBody: () => TableBody,
   TableCaption: () => TableCaption,
@@ -32,6 +38,9 @@ __export(index_exports, {
   TableHead: () => TableHead,
   TableHeader: () => TableHeader,
   TableRow: () => TableRow,
+  Toggle: () => Toggle,
+  Tooltip: () => Tooltip,
+  formatNumber: () => formatNumber,
   getIconSize: () => getIconSize
 });
 module.exports = __toCommonJS(index_exports);
@@ -46,45 +55,60 @@ var hierarchyFromVariant = {
   danger: "primary"
 };
 var getIconSize = (size) => size === "24" ? 16 : 20;
-var Button = (0, import_react.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__ */ (0, import_jsx_runtime.jsx)("button", { ref, className: classes, type, disabled: isDisabled, "aria-busy": loading || void 0, ...props, children: iconOnly ? icon : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-    prefix && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "fe-button__icon", children: prefix }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "fe-button__label", children: label }),
-    suffix && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "fe-button__icon", children: suffix })
-  ] }) });
-});
+var Button = (0, import_react.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__ */ (0, import_jsx_runtime.jsx)(
+      "button",
+      {
+        ref,
+        className: classes,
+        type,
+        disabled: isDisabled,
+        "aria-busy": loading || void 0,
+        ...props,
+        children: resolvedIconOnly ? icon : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+          prefix && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "fe-button__icon", children: prefix }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "fe-button__label", children: label }),
+          suffix && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "fe-button__icon", children: suffix })
+        ] })
+      }
+    );
+  }
+);
 Button.displayName = "Button";
 
 // packages/icons/src/index.tsx
@@ -249,13 +273,382 @@ function TableHeader({ children, ...props }) {
 function TableCaption(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("caption", { ...props });
 }
+
+// packages/toggle/src/index.tsx
+var import_react3 = require("react");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var Toggle = (0, import_react3.forwardRef)(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__ */ (0, import_jsx_runtime4.jsxs)("label", { className: classes, style: toggleStyle, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("input", { ref, id, className: "fe-toggle__input", type: "checkbox", role: "switch", ...props }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "fe-toggle__control", "aria-hidden": "true" }),
+    label && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "fe-toggle__label", children: label })
+  ] });
+});
+Toggle.displayName = "Toggle";
+
+// packages/drawer/src/index.tsx
+var import_react4 = require("react");
+var import_react_dom = require("react-dom");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function Drawer({ open, onClose, title, footer, side = "right", width = 400, fullScreen = false, children, closeOnBackdropClick = true, className, style, ...props }) {
+  (0, import_react4.useEffect)(() => {
+    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 (0, import_react_dom.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "fe-drawer-backdrop", role: "presentation", onMouseDown: (event) => {
+    if (event.target === event.currentTarget && closeOnBackdropClick) onClose();
+  }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("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__ */ (0, import_jsx_runtime5.jsxs)("header", { className: "fe-drawer__header", children: [
+      title && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h2", { children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { type: "button", "aria-label": "Close drawer", onClick: onClose, children: "\xD7" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "fe-drawer__body", children }),
+    footer && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("footer", { className: "fe-drawer__footer", children: footer })
+  ] }) }), document.body);
+}
+
+// packages/form-controls/src/index.tsx
+var import_react5 = require("react");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var Selection = (0, import_react5.forwardRef)(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 = (0, import_react5.useId)();
+  const listboxId = id ?? generatedId;
+  const isControlled = value !== void 0;
+  const [internalValue, setInternalValue] = (0, import_react5.useState)(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] = (0, import_react5.useState)(false);
+  const [query, setQuery] = (0, import_react5.useState)("");
+  const [activeIndex, setActiveIndex] = (0, import_react5.useState)(0);
+  const rootRef = (0, import_react5.useRef)(null);
+  (0, import_react5.useEffect)(() => {
+    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__ */ (0, import_jsx_runtime6.jsxs)("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__ */ (0, import_jsx_runtime6.jsx)("span", { className: "fe-selection__label", children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { ref: rootRef, className: "fe-selection__control", children: [
+      name && selectedValues.map((item) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("input", { type: "hidden", name: multiple ? `${name}[]` : name, value: item }, String(item))),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("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__ */ (0, import_jsx_runtime6.jsx)("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__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "fe-selection__tag", children: [
+          option.label,
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { "aria-hidden": "true", children: "\xD7" })
+        ] }, String(option.value))) : displayLabel.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { children: [
+          item,
+          index < displayLabel.length - 1 ? ", " : ""
+        ] }, index)) : placeholder }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "fe-selection__actions", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "fe-selection__chevron", "aria-hidden": "true" }) })
+      ] }),
+      clearable && selectedOptions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", className: "fe-selection__clear", "aria-label": "Clear selection", onClick: clear }),
+      open && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { id: listboxId, className: "fe-selection__menu", role: "listbox", "aria-multiselectable": multiple || void 0, children: [
+        searchable && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "fe-selection__search", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { "aria-hidden": "true", children: "\u2315" }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("input", { autoFocus: true, value: query, onChange: (event) => {
+            setQuery(event.target.value);
+            setActiveIndex(0);
+          }, placeholder: "Search\u2026", "aria-label": "Search options" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "fe-selection__options", children: filteredOptions.length ? filteredOptions.map((option, index) => {
+          const isSelected = selectedValues.some((item) => String(item) === String(option.value));
+          return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("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__ */ (0, import_jsx_runtime6.jsx)("span", { children: option.label }),
+            isSelected && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "fe-selection__check", "aria-hidden": "true", children: "\u2713" })
+          ] }, String(option.value));
+        }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "fe-selection__empty", children: "No matching options" }) })
+      ] })
+    ] }),
+    helperText && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("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 = (0, import_react5.forwardRef)(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] = (0, import_react5.useState)(defaultValue);
+  const [focused, setFocused] = (0, import_react5.useState)(false);
+  const actualValue = isControlled ? value ?? null : internalValue;
+  const [text, setText] = (0, import_react5.useState)(actualValue === null ? "" : formatNumber(actualValue, decimals, thousandSeparator, decimalSeparator));
+  (0, import_react5.useEffect)(() => {
+    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__ */ (0, import_jsx_runtime6.jsxs)("label", { className: ["fe-number-input", error && "fe-number-input--error", className].filter(Boolean).join(" "), children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "fe-number-input__label", children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("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__ */ (0, import_jsx_runtime6.jsx)("span", { className: "fe-number-input__helper", children: helperText })
+  ] });
+});
+NumberInput.displayName = "NumberInput";
+function CurrencyInput({ suffix = "VND", currencies, currency, defaultCurrency, onCurrencyChange, className, ...props }) {
+  const [internalCurrency, setInternalCurrency] = (0, import_react5.useState)(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__ */ (0, import_jsx_runtime6.jsxs)("div", { className: ["fe-currency-input", className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(NumberInput, { ...props, className: "fe-currency-input__number" }),
+    currencies?.length ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("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__ */ (0, import_jsx_runtime6.jsx)("option", { value: item.code, children: item.label ?? item.code }, item.code)) }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("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] = (0, import_react5.useState)((!isRange ? props.defaultValue : null) ?? null);
+  const [rangeInternal, setRangeInternal] = (0, import_react5.useState)((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] = (0, import_react5.useState)(false);
+  const [month, setMonth] = (0, import_react5.useState)(() => new Date((isRange ? rangeValue[0] : singleValue) ?? /* @__PURE__ */ new Date()));
+  const [editingEnd, setEditingEnd] = (0, import_react5.useState)(false);
+  const rootRef = (0, import_react5.useRef)(null);
+  (0, import_react5.useEffect)(() => {
+    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__ */ (0, import_jsx_runtime6.jsxs)("div", { ref: rootRef, className: ["fe-datetime-picker", className].filter(Boolean).join(" "), children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "fe-datetime-picker__label", children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("button", { type: "button", className: "fe-datetime-picker__trigger", disabled, "aria-expanded": open, onClick: () => setOpen((current) => !current), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { "aria-hidden": "true", children: "\u25F7" }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: shownValue || placeholder || (isRange ? "Select date range" : "Select date and time") })
+    ] }),
+    open && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "fe-datetime-picker__popper", role: "dialog", "aria-label": "Date and time picker", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "fe-datetime-picker__month", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", "aria-label": "Previous month", onClick: () => setMonth((current) => new Date(current.getFullYear(), current.getMonth() - 1, 1)), children: "\u2039" }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("strong", { children: month.toLocaleDateString(locale, { month: "long", year: "numeric" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", "aria-label": "Next month", onClick: () => setMonth((current) => new Date(current.getFullYear(), current.getMonth() + 1, 1)), children: "\u203A" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "fe-datetime-picker__weekdays", children: ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"].map((day) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: day }, day)) }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("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__ */ (0, import_jsx_runtime6.jsx)("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__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "fe-datetime-picker__range-tabs", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", className: !editingEnd ? "is-active" : "", onClick: () => setEditingEnd(false), children: "Start" }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", className: editingEnd ? "is-active" : "", onClick: () => setEditingEnd(true), children: "End" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { className: "fe-datetime-picker__time", children: [
+        "Time",
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("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
+var import_react6 = require("react");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function Tooltip({ content, children, placement = "top", disabled, className, ...props }) {
+  const [visible, setVisible] = (0, import_react6.useState)(false);
+  const id = (0, import_react6.useId)();
+  const trigger = (0, import_react6.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__ */ (0, import_jsx_runtime7.jsxs)("span", { className: ["fe-tooltip", `fe-tooltip--${placement}`, className].filter(Boolean).join(" "), ...props, children: [
+    trigger,
+    visible && !disabled && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { id, role: "tooltip", className: "fe-tooltip__content", children: content })
+  ] });
+}
+
+// packages/expandable-section/src/index.tsx
+var import_react7 = require("react");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function ExpandableSection({ title, children, expanded, defaultExpanded = false, onExpandedChange, disabled, className, ...props }) {
+  const [internalExpanded, setInternalExpanded] = (0, import_react7.useState)(defaultExpanded);
+  const isExpanded = expanded ?? internalExpanded;
+  const id = (0, import_react7.useId)();
+  const toggle = () => {
+    if (disabled) return;
+    const next = !isExpanded;
+    if (expanded === void 0) setInternalExpanded(next);
+    onExpandedChange?.(next);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("section", { className: ["fe-expandable-section", isExpanded && "fe-expandable-section--expanded", disabled && "fe-expandable-section--disabled", className].filter(Boolean).join(" "), ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("button", { className: "fe-expandable-section__trigger", type: "button", "aria-expanded": isExpanded, "aria-controls": id, disabled, onClick: toggle, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "fe-expandable-section__chevron", "aria-hidden": "true" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { id, className: "fe-expandable-section__content", "aria-hidden": !isExpanded, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "fe-expandable-section__content-inner", children }) })
+  ] });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Button,
   ChevronDownIcon,
   CloseIcon,
+  CurrencyInput,
+  DateTimePicker,
+  Drawer,
+  ExpandableSection,
+  NumberInput,
   PlusIcon,
   SearchIcon,
+  Selection,
   Table,
   TableBody,
   TableCaption,
@@ -263,5 +656,8 @@ function TableCaption(props) {
   TableHead,
   TableHeader,
   TableRow,
+  Toggle,
+  Tooltip,
+  formatNumber,
   getIconSize
 });