@trail-ui/react
Version:
1,358 lines (1,327 loc) • 151 kB
JavaScript
"use strict";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/editable-table/index.ts
var editable_table_exports = {};
__export(editable_table_exports, {
CellCheckbox: () => checkbox_default,
CellTypes: () => CellTypes,
GroupedEditableTable: () => GroupedEditableTableNative,
SortOrder: () => SortOrder,
TanstackEditableTable: () => TanstackEditableTable
});
module.exports = __toCommonJS(editable_table_exports);
// src/editable-table/editable-table.tsx
var import_react26 = require("react");
var import_react_table6 = require("@tanstack/react-table");
// src/editable-table/helpers.tsx
function multiSelectFilter(row, columnId, filterValue) {
if (!Array.isArray(filterValue)) {
return true;
}
const rowValue = row.getValue(columnId);
return filterValue.includes(rowValue);
}
function dateSortingFn(rowA, rowB, columnId) {
const dateStringA = rowA.getValue(columnId);
const dateStringB = rowB.getValue(columnId);
const parseCustomDate = (dateStr) => {
if (!dateStr) {
return new Date(Number.NaN);
}
const parts = dateStr.trim().split(" ");
if (parts.length !== 3) {
return new Date(Number.NaN);
}
const [day, month, year] = parts;
const months = {
Jan: "01",
Feb: "02",
Mar: "03",
Apr: "04",
May: "05",
Jun: "06",
Jul: "07",
Aug: "08",
Sep: "09",
Oct: "10",
Nov: "11",
Dec: "12"
};
const monthNum = months[month];
if (!monthNum) {
return new Date(Number.NaN);
}
const isoDate = `${year}-${monthNum}-${day.padStart(2, "0")}`;
return new Date(isoDate);
};
const dateA = parseCustomDate(dateStringA);
const dateB = parseCustomDate(dateStringB);
if (Number.isNaN(dateA.getTime()) && Number.isNaN(dateB.getTime())) {
return 0;
}
if (Number.isNaN(dateA.getTime())) {
return 1;
}
if (Number.isNaN(dateB.getTime())) {
return -1;
}
return dateA.getTime() - dateB.getTime();
}
function areArraysSame(a, b) {
if (a.length !== b.length)
return false;
const countMap = /* @__PURE__ */ new Map();
for (const value of a) {
countMap.set(value, (countMap.get(value) || 0) + 1);
}
for (const value of b) {
if (!countMap.has(value))
return false;
countMap.set(value, countMap.get(value) - 1);
if (countMap.get(value) < 0)
return false;
}
return true;
}
// src/editable-table/constants.tsx
var SortOrder = /* @__PURE__ */ ((SortOrder2) => {
SortOrder2["DEFAULT"] = "default";
SortOrder2["ASC"] = "asc";
SortOrder2["DESC"] = "desc";
return SortOrder2;
})(SortOrder || {});
var CellTypes = /* @__PURE__ */ ((CellTypes2) => {
CellTypes2["none"] = "none";
CellTypes2["headerCell"] = "headerCell";
CellTypes2["groupHeaderCell"] = "groupHeaderCell";
CellTypes2["dataCell"] = "dataCell";
CellTypes2["footerCell"] = "footerCell";
return CellTypes2;
})(CellTypes || {});
// src/editable-table/editable-table-header.tsx
var import_react_table = require("@tanstack/react-table");
var import_icons = require("@trail-ui/icons");
// src/editable-table/focus-handler/focus-handler-provider.tsx
var import_react2 = require("react");
// src/editable-table/table-context/table-context-provider.tsx
var import_react = require("react");
var import_jsx_runtime = require("react/jsx-runtime");
var EditableTableContext = (0, import_react.createContext)({
handleSaveData: () => {
},
idSelector: () => {
},
table: {},
tableName: "",
groupData: [],
allowBulkGroupSelection: false,
doesRowHeaderExist: false
});
function TableContextProvider({
children,
...props
}) {
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(EditableTableContext.Provider, { value: props, children });
}
function useTableContext(cell) {
const { handleSaveData, ...rest } = (0, import_react.useContext)(EditableTableContext);
function updateData(value) {
var _a, _b;
if (cell) {
const accessorKey = cell.column.columnDef.accessorKey;
const groupId = (_a = cell.row.original) == null ? void 0 : _a.editableTableGroupId;
handleSaveData({
accessorKey,
columnId: cell.column.id,
rowId: rest.idSelector(cell.row.original),
value,
...groupId ? { groupId } : {}
});
(_b = rest.table.options.meta) == null ? void 0 : _b.updateData(cell.row.id, accessorKey, value);
}
}
return {
...cell ? { updateData } : {},
...rest
};
}
// src/editable-table/focus-handler/focus-handler-provider.tsx
var import_jsx_runtime2 = require("react/jsx-runtime");
var FocusDataContext = (0, import_react2.createContext)({
columnIndex: 0,
rowId: null,
cellType: "headerCell" /* headerCell */,
groupId: null,
rowIndex: 0
});
var FocusDispatchContext = (0, import_react2.createContext)(() => {
});
function FocusHandlerContextProvider(props) {
const [focusedCell, setFocusedCell] = (0, import_react2.useState)({
columnIndex: 0,
rowId: null,
cellType: "headerCell" /* headerCell */,
groupId: null,
rowIndex: 0
});
const { tableRef, allowBulkGroupSelection, hasFooter } = useTableContext();
function updateData(data) {
setFocusedCell(data);
}
(0, import_react2.useEffect)(() => {
const handleKeyDown = (e) => {
var _a, _b, _c, _d, _e, _f;
if (!tableRef.current || !tableRef.current.contains(e.target)) {
return;
}
const activeElement = document.activeElement;
const isInsideCustomSelect = (el) => {
return el && (el.closest('[role="listbox"]') || el.closest('[role="combobox"]'));
};
if ((activeElement == null ? void 0 : activeElement.tagName) === "SELECT" || (activeElement == null ? void 0 : activeElement.tagName) === "INPUT" || isInsideCustomSelect(activeElement)) {
return;
}
const { rowId, columnIndex, cellType, groupId, rowIndex } = focusedCell;
const rows = props.table.getRowModel().rows;
const tableHeaders = ((_a = props.table.getHeaderGroups()[0]) == null ? void 0 : _a.headers) || [];
if (["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(e.key)) {
e.preventDefault();
let newrowId = rowId;
let newColumnIndex = columnIndex;
let newCellType = cellType;
let newGroupId = groupId;
let newRowIndex = rowIndex;
const isGroupView = props.groupData.length > 0;
switch (e.key) {
case "ArrowUp":
if (cellType === "headerCell" /* headerCell */) {
return;
}
if (hasFooter && cellType === "footerCell" /* footerCell */) {
newCellType = "dataCell" /* dataCell */;
newGroupId = null;
newRowIndex = rows.length - 1;
newrowId = rows[rows.length - 1].id;
} else if (cellType === "groupHeaderCell" /* groupHeaderCell */) {
const index = rows.findIndex(
({ original }) => original.editableTableGroupId === groupId
);
if (index === 0) {
newCellType = "headerCell" /* headerCell */;
newrowId = null;
newGroupId = null;
newRowIndex = -1;
} else {
newCellType = "dataCell" /* dataCell */;
newrowId = rows[index - 1].id;
newGroupId = null;
newRowIndex = index - 1;
}
} else if (cellType === "dataCell" /* dataCell */) {
const index = rows.findIndex((row) => row.id === rowId);
if (isGroupView) {
if (index === 0 || rows[index].original.editableTableGroupId !== ((_c = (_b = rows[index - 1]) == null ? void 0 : _b.original) == null ? void 0 : _c.editableTableGroupId)) {
newGroupId = rows[index].original.editableTableGroupId;
newrowId = null;
newCellType = "groupHeaderCell" /* groupHeaderCell */;
newRowIndex = -1;
} else {
newrowId = rows[Math.min(rows.length - 1, index - 1)].id;
newRowIndex = Math.min(rows.length - 1, index - 1);
}
} else {
if (index === 0) {
newCellType = "headerCell" /* headerCell */;
newGroupId = null;
newrowId = null;
newRowIndex = -1;
} else {
newCellType = "dataCell" /* dataCell */;
newGroupId = null;
newrowId = rows[Math.max(0, index - 1)].id;
newRowIndex = index - 1;
}
}
}
break;
case "ArrowDown":
if (cellType === "headerCell" /* headerCell */) {
if (isGroupView) {
newCellType = "groupHeaderCell" /* groupHeaderCell */;
newGroupId = rows[0].original.editableTableGroupId;
newrowId = null;
newRowIndex = -1;
} else {
newGroupId = null;
newCellType = "dataCell" /* dataCell */;
newrowId = rows[Math.min(rows.length - 1, 0)].id;
newRowIndex = Math.min(rows.length - 1, 0);
}
} else if (cellType === "groupHeaderCell" /* groupHeaderCell */) {
newCellType = "dataCell" /* dataCell */;
const index = rows.findIndex(
({ original }) => original.editableTableGroupId === groupId
);
newrowId = rows[index].id;
newGroupId = null;
newRowIndex = index;
} else if (cellType === "dataCell" /* dataCell */) {
const index = rows.findIndex((row) => row.id === rowId);
if (hasFooter && index + 1 > rows.length - 1) {
newCellType = "footerCell" /* footerCell */;
newRowIndex = -1;
newGroupId = null;
newrowId = null;
break;
}
if (isGroupView && rows[index].original.editableTableGroupId !== ((_e = (_d = rows[index + 1]) == null ? void 0 : _d.original) == null ? void 0 : _e.editableTableGroupId)) {
newGroupId = rows[index + 1].original.editableTableGroupId;
newrowId = null;
newCellType = "groupHeaderCell" /* groupHeaderCell */;
newRowIndex = -1;
} else {
newrowId = rows[Math.min(rows.length - 1, index + 1)].id;
newRowIndex = Math.min(rows.length - 1, index + 1);
}
} else if (hasFooter && cellType === "footerCell" /* footerCell */) {
return;
}
break;
case "ArrowLeft": {
if (cellType === "groupHeaderCell" /* groupHeaderCell */) {
if (allowBulkGroupSelection && columnIndex > 0) {
newColumnIndex = 0;
}
} else {
newColumnIndex = Math.max(0, newColumnIndex - 1);
}
break;
}
case "ArrowRight": {
if (cellType === "groupHeaderCell" /* groupHeaderCell */) {
if (allowBulkGroupSelection && columnIndex === 0) {
newColumnIndex = 1;
}
} else {
newColumnIndex = Math.min(tableHeaders.length - 1, newColumnIndex + 1);
}
break;
}
}
setFocusedCell({
rowId: newrowId,
columnIndex: newColumnIndex,
cellType: newCellType,
groupId: newGroupId,
rowIndex: newRowIndex
});
}
if (e.key === "Enter" && cellType === "headerCell" /* headerCell */) {
const header = (_f = tableHeaders[columnIndex]) == null ? void 0 : _f.column;
if (header == null ? void 0 : header.getCanSort()) {
header.toggleSorting();
}
}
};
const table = tableRef.current;
table == null ? void 0 : table.addEventListener("keydown", handleKeyDown);
return () => table == null ? void 0 : table.removeEventListener("keydown", handleKeyDown);
}, [focusedCell, props.table]);
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(FocusDispatchContext.Provider, { value: updateData, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(FocusDataContext.Provider, { value: focusedCell, children: props.children }) });
}
function useFocusHandler({
cellType,
columnIndex,
groupId,
rowId,
rowIndex
}) {
var _a;
const focusedCell = (0, import_react2.useContext)(FocusDataContext);
const setFocusedCell = (0, import_react2.useContext)(FocusDispatchContext);
const { allowBulkGroupSelection, tableRef, table, serverPagination } = useTableContext();
const filteredRows = (_a = table == null ? void 0 : table.getRowModel().rows) != null ? _a : [];
const localRowIndex = filteredRows.findIndex((row) => row.id === rowId);
const isCurrentCellFocused = (0, import_react2.useMemo)(() => {
var _a2;
const isFocused = ((_a2 = tableRef.current) == null ? void 0 : _a2.contains(document.activeElement)) && focusedCell.cellType === cellType;
switch (cellType) {
case "headerCell" /* headerCell */:
case "footerCell" /* footerCell */:
return isFocused && focusedCell.columnIndex === columnIndex;
case "groupHeaderCell" /* groupHeaderCell */: {
let isGroup = focusedCell.groupId === groupId;
if (allowBulkGroupSelection) {
isGroup && (isGroup = columnIndex === 0 ? focusedCell.columnIndex === 0 : focusedCell.columnIndex > 0);
}
return isFocused && isGroup;
}
case "dataCell" /* dataCell */:
return isFocused && focusedCell.rowIndex === localRowIndex && focusedCell.columnIndex === columnIndex;
default:
return false;
}
}, [focusedCell, columnIndex, cellType, groupId, localRowIndex, allowBulkGroupSelection]);
const focusCurrentCell = (0, import_react2.useCallback)(() => {
setFocusedCell == null ? void 0 : setFocusedCell({ columnIndex, rowId, cellType, groupId, rowIndex });
}, [columnIndex, rowId, cellType, groupId, rowIndex]);
const resetFocus = (0, import_react2.useCallback)(() => {
setFocusedCell == null ? void 0 : setFocusedCell({
cellType: "headerCell" /* headerCell */,
rowId: null,
groupId: null,
rowIndex: -1,
columnIndex: 0
});
}, []);
return {
isCurrentCellFocused,
focusCurrentCell,
resetFocus
};
}
// src/editable-table/editable-table-header.tsx
var import_react4 = require("react");
// src/_utils/utils.tsx
var import_utils = require("@react-aria/utils");
var import_react3 = __toESM(require("react"));
var import_react_aria = require("react-aria");
var import_react_dom = __toESM(require("react-dom"));
var import_jsx_runtime3 = require("react/jsx-runtime");
if (typeof HTMLTemplateElement !== "undefined") {
const getFirstChild = Object.getOwnPropertyDescriptor(Node.prototype, "firstChild").get;
Object.defineProperty(HTMLTemplateElement.prototype, "firstChild", {
configurable: true,
enumerable: true,
get: function() {
if (this.dataset.reactAriaHidden) {
return this.content.firstChild;
} else {
return getFirstChild.call(this);
}
}
});
}
var HiddenContext = (0, import_react3.createContext)(false);
var hiddenFragment = typeof DocumentFragment !== "undefined" ? new DocumentFragment() : null;
function useDOMRef(ref) {
const domRef = (0, import_react3.useRef)(null);
(0, import_react3.useImperativeHandle)(ref, () => domRef.current);
return domRef;
}
function replaceSpacesWithHyphens(str) {
return str.toLowerCase().trim().replace(/\s+/g, "-");
}
// src/editable-table/editable-table-header.tsx
var import_jsx_runtime4 = require("react/jsx-runtime");
function EditableTableHeader({
table,
selectAllCheckBoxName,
tableName
}) {
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("thead", { className: "sticky top-0 z-10 after:absolute after:bottom-0 after:w-full after:border-t after:border-t-neutral-200", children: table.getHeaderGroups().map((group) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("tr", { children: group.headers.map((header) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
HeaderCell,
{
header,
tableName,
selectAllCheckBoxName
},
header.id
)) }, group.id)) });
}
function HeaderCell({
header,
selectAllCheckBoxName,
tableName
}) {
var _a, _b;
const cellRef = (0, import_react4.useRef)(null);
const { table, tableRef } = useTableContext();
const { isCurrentCellFocused, focusCurrentCell } = useFocusHandler({
cellType: "headerCell" /* headerCell */,
columnIndex: header.column.getIndex(),
groupId: null,
rowId: null,
rowIndex: -1
});
const canSort = header.column.getCanSort();
const isCheckbox = ((_a = header.column.columnDef.meta) == null ? void 0 : _a.type) === "checkbox";
const tabIndex = ((_b = tableRef.current) == null ? void 0 : _b.contains(document.activeElement)) ? isCurrentCellFocused ? 0 : -1 : 0 === header.column.getIndex() ? 0 : -1;
const classes = "border-b border-r bg-neutral-100 p-2 text-sm font-normal last:border-r-0";
function onFocusChange() {
if (!isCurrentCellFocused && 0 === header.column.getIndex()) {
focusCurrentCell();
}
}
const renderSortIcon = (sorted) => {
switch (sorted) {
case "asc":
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_icons.ArrowUpIcon, { className: "h-4 w-4 text-purple-600" });
case "desc":
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_icons.ArrowDownIcon, { className: "h-4 w-4 text-purple-600" });
default:
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_icons.CaretUpDownIcon, { className: "h-4 w-4 text-neutral-600" });
}
};
const toggleCheckbox = (elem) => {
const checkbox = elem.querySelector('input[type="checkbox"]');
checkbox == null ? void 0 : checkbox.click();
};
(0, import_react4.useEffect)(() => {
var _a2;
if (isCurrentCellFocused) {
(_a2 = cellRef.current) == null ? void 0 : _a2.focus();
}
}, [isCurrentCellFocused]);
if (isCheckbox) {
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
"td",
{
id: header.column.id,
style: {
minWidth: header.column.columnDef.size === 100 ? "auto" : header.column.columnDef.size,
maxWidth: header.column.columnDef.size === 100 ? "auto" : header.column.columnDef.size,
width: header.column.columnDef.size === 100 ? "auto" : header.column.columnDef.size
},
className: `${classes} text-center`,
children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
"div",
{
id: `${replaceSpacesWithHyphens(tableName)}-${header.column.getIndex()}`,
ref: cellRef,
role: "checkbox",
"aria-label": selectAllCheckBoxName != null ? selectAllCheckBoxName : `Select all ${tableName}`,
"aria-checked": table.getIsAllRowsSelected() ? "true" : table.getIsSomeRowsSelected() ? "mixed" : "false",
className: "th-content flex h-6 w-6 cursor-pointer items-center justify-center outline-purple-600",
onClick: (e) => toggleCheckbox(e.currentTarget),
onKeyDown: (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
toggleCheckbox(e.currentTarget);
}
},
tabIndex,
onFocus: onFocusChange,
children: (0, import_react_table.flexRender)(header.column.columnDef.header, header.getContext())
}
)
},
header.id
);
}
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
"th",
{
id: header.column.id,
scope: "col",
className: `${classes} text-left`,
style: {
minWidth: header.column.columnDef.size === 100 ? "auto" : header.column.columnDef.size,
width: header.column.columnDef.size === 100 ? "auto" : header.column.columnDef.size
},
...canSort && {
"aria-sort": header.column.getIsSorted() === "asc" ? "ascending" : header.column.getIsSorted() === "desc" ? "descending" : "none"
},
children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
"div",
{
ref: cellRef,
className: `th-content flex items-center justify-between rounded px-2 text-sm font-semibold outline-purple-600 focus:outline focus:outline-2 ${canSort ? "cursor-pointer select-none" : ""}`,
onClick: () => {
if (canSort) {
header.column.toggleSorting();
}
focusCurrentCell();
},
onKeyDown: (e) => {
if (e.key === " " && canSort) {
e.preventDefault();
header.column.toggleSorting();
}
},
tabIndex,
onFocus: onFocusChange,
children: [
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { id: `${replaceSpacesWithHyphens(tableName)}-${header.column.getIndex()}`, children: (0, import_react_table.flexRender)(header.column.columnDef.header, header.getContext()) }),
canSort && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "sr-only", children: "Sortable" }),
renderSortIcon(header.column.getIsSorted())
] })
]
}
)
},
header.id
);
}
// src/spinner/spinner.tsx
var import_theme = require("@trail-ui/theme");
var import_react5 = require("react");
// src/spinner/spinners/bars.tsx
var import_jsx_runtime5 = require("react/jsx-runtime");
var Bars = (props) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("svg", { viewBox: "0 0 135 140", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", ...props, children: [
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("rect", { y: "10", width: "15", height: "120", rx: "6", children: [
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
"animate",
{
attributeName: "height",
begin: "0.5s",
dur: "1s",
values: "120;110;100;90;80;70;60;50;40;140;120",
calcMode: "linear",
repeatCount: "indefinite"
}
),
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
"animate",
{
attributeName: "y",
begin: "0.5s",
dur: "1s",
values: "10;15;20;25;30;35;40;45;50;0;10",
calcMode: "linear",
repeatCount: "indefinite"
}
)
] }),
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("rect", { x: "30", y: "10", width: "15", height: "120", rx: "6", children: [
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
"animate",
{
attributeName: "height",
begin: "0.25s",
dur: "1s",
values: "120;110;100;90;80;70;60;50;40;140;120",
calcMode: "linear",
repeatCount: "indefinite"
}
),
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
"animate",
{
attributeName: "y",
begin: "0.25s",
dur: "1s",
values: "10;15;20;25;30;35;40;45;50;0;10",
calcMode: "linear",
repeatCount: "indefinite"
}
)
] }),
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("rect", { x: "60", width: "15", height: "140", rx: "6", children: [
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
"animate",
{
attributeName: "height",
begin: "0s",
dur: "1s",
values: "120;110;100;90;80;70;60;50;40;140;120",
calcMode: "linear",
repeatCount: "indefinite"
}
),
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
"animate",
{
attributeName: "y",
begin: "0s",
dur: "1s",
values: "10;15;20;25;30;35;40;45;50;0;10",
calcMode: "linear",
repeatCount: "indefinite"
}
)
] }),
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("rect", { x: "90", y: "10", width: "15", height: "120", rx: "6", children: [
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
"animate",
{
attributeName: "height",
begin: "0.25s",
dur: "1s",
values: "120;110;100;90;80;70;60;50;40;140;120",
calcMode: "linear",
repeatCount: "indefinite"
}
),
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
"animate",
{
attributeName: "y",
begin: "0.25s",
dur: "1s",
values: "10;15;20;25;30;35;40;45;50;0;10",
calcMode: "linear",
repeatCount: "indefinite"
}
)
] }),
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("rect", { x: "120", y: "10", width: "15", height: "120", rx: "6", children: [
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
"animate",
{
attributeName: "height",
begin: "0.5s",
dur: "1s",
values: "120;110;100;90;80;70;60;50;40;140;120",
calcMode: "linear",
repeatCount: "indefinite"
}
),
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
"animate",
{
attributeName: "y",
begin: "0.5s",
dur: "1s",
values: "10;15;20;25;30;35;40;45;50;0;10",
calcMode: "linear",
repeatCount: "indefinite"
}
)
] })
] });
// src/spinner/spinners/dots.tsx
var import_jsx_runtime6 = require("react/jsx-runtime");
var Dots = (props) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("svg", { viewBox: "0 0 120 30", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", ...props, children: [
/* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("circle", { cx: "15", cy: "15", r: "15", children: [
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
"animate",
{
attributeName: "r",
from: "15",
to: "15",
begin: "0s",
dur: "0.8s",
values: "15;9;15",
calcMode: "linear",
repeatCount: "indefinite"
}
),
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
"animate",
{
attributeName: "fill-opacity",
from: "1",
to: "1",
begin: "0s",
dur: "0.8s",
values: "1;.5;1",
calcMode: "linear",
repeatCount: "indefinite"
}
)
] }),
/* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("circle", { cx: "60", cy: "15", r: "9", fillOpacity: "0.3", children: [
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
"animate",
{
attributeName: "r",
from: "9",
to: "9",
begin: "0s",
dur: "0.8s",
values: "9;15;9",
calcMode: "linear",
repeatCount: "indefinite"
}
),
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
"animate",
{
attributeName: "fill-opacity",
from: "0.5",
to: "0.5",
begin: "0s",
dur: "0.8s",
values: ".5;1;.5",
calcMode: "linear",
repeatCount: "indefinite"
}
)
] }),
/* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("circle", { cx: "105", cy: "15", r: "15", children: [
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
"animate",
{
attributeName: "r",
from: "15",
to: "15",
begin: "0s",
dur: "0.8s",
values: "15;9;15",
calcMode: "linear",
repeatCount: "indefinite"
}
),
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
"animate",
{
attributeName: "fill-opacity",
from: "1",
to: "1",
begin: "0s",
dur: "0.8s",
values: "1;.5;1",
calcMode: "linear",
repeatCount: "indefinite"
}
)
] })
] });
// src/spinner/spinners/ring.tsx
var import_jsx_runtime7 = require("react/jsx-runtime");
var Ring = (props) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
"svg",
{
fill: "none",
stroke: "currentColor",
viewBox: "0 0 38 38",
xmlns: "http://www.w3.org/2000/svg",
...props,
children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("g", { fill: "none", fillRule: "evenodd", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("g", { transform: "translate(2.5 2.5)", strokeWidth: "5", children: [
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("circle", { strokeOpacity: ".5", cx: "16", cy: "16", r: "16" }),
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M32 16c0-9.94-8.06-16-16-16", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
"animateTransform",
{
attributeName: "transform",
type: "rotate",
from: "0 16 16",
to: "360 16 16",
dur: "1s",
repeatCount: "indefinite"
}
) })
] }) })
}
);
// src/spinner/spinners/spin.tsx
var import_jsx_runtime8 = require("react/jsx-runtime");
var Spin = (props) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("svg", { stroke: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("g", { children: [
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("circle", { cx: "12", cy: "12", r: "9.5", fill: "none", strokeWidth: "3", strokeLinecap: "round", children: [
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
"animate",
{
attributeName: "stroke-dasharray",
dur: "1.5s",
calcMode: "spline",
values: "0 150;42 150;42 150;42 150",
keyTimes: "0;0.475;0.95;1",
keySplines: "0.42,0,0.58,1;0.42,0,0.58,1;0.42,0,0.58,1",
repeatCount: "indefinite"
}
),
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
"animate",
{
attributeName: "stroke-dashoffset",
dur: "1.5s",
calcMode: "spline",
values: "0;-16;-59;-59",
keyTimes: "0;0.475;0.95;1",
keySplines: "0.42,0,0.58,1;0.42,0,0.58,1;0.42,0,0.58,1",
repeatCount: "indefinite"
}
)
] }),
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
"animateTransform",
{
attributeName: "transform",
type: "rotate",
dur: "2s",
values: "0 12 12;360 12 12",
repeatCount: "indefinite"
}
)
] }) });
// src/spinner/spinner.tsx
var import_jsx_runtime9 = require("react/jsx-runtime");
var SPINNERS = {
bars: Bars,
dots: Dots,
ring: Ring,
spin: Spin
};
var DEFAULT_SPINNER = "spin";
function Spinner(props, ref) {
const { className, variant = DEFAULT_SPINNER, color, size, ...spinnerProps } = props;
const defaultSpinner = variant in SPINNERS ? variant : DEFAULT_SPINNER;
const SpinnerComponent = SPINNERS[defaultSpinner];
const styles = (0, import_react5.useMemo)(
() => (0, import_theme.spinner)({
color,
size,
className
}),
[className, color, size]
);
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SpinnerComponent, { "aria-hidden": true, className: styles, ref, ...spinnerProps });
}
var _Spinner = (0, import_react5.forwardRef)(Spinner);
// src/editable-table/editable-table-cell.tsx
var import_react23 = require("react");
var import_icons6 = require("@trail-ui/icons");
var import_react_table4 = require("@tanstack/react-table");
// src/editable-table/editable-components/select.tsx
var import_react14 = require("react");
// src/toast/index.ts
var toast_exports = {};
__export(toast_exports, {
customToast: () => customToast
});
// src/flag/flag.tsx
var import_react8 = require("react");
var import_theme4 = require("@trail-ui/theme");
var import_icons2 = require("@trail-ui/icons");
// src/button/button.tsx
var import_react6 = require("react");
var import_react_aria_components = require("react-aria-components");
var import_theme2 = require("@trail-ui/theme");
var import_jsx_runtime10 = require("react/jsx-runtime");
function Button(props, ref) {
const {
appearance,
// size = 'md',
spacing = "default",
fullWidth,
isLoading,
spinner: spinner2 = /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(_Spinner, { color: "current", size: "sm", ...props.spinnerProps }),
spinnerPlacement = "start",
startContent: startContentProp,
endContent: endContentProp,
disableAnimation,
className,
children,
...otherProps
} = props;
const styles = (0, import_react6.useMemo)(
() => (0, import_theme2.button)({
// size,
isLoading,
spinnerPlacement,
startContentProp: !!startContentProp,
endContentProp: !!endContentProp,
appearance,
spacing,
fullWidth,
disableAnimation,
className
}),
[
isLoading,
spinnerPlacement,
startContentProp,
endContentProp,
appearance,
spacing,
fullWidth,
disableAnimation,
className
]
);
const getIconClone = (icon) => (0, import_react6.isValidElement)(icon) ? (0, import_react6.cloneElement)(icon, {
"aria-hidden": true,
focusable: false,
tabIndex: -1
}) : null;
const startContent = getIconClone(startContentProp);
const endContent = getIconClone(endContentProp);
return (
// @ts-ignore
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_aria_components.Button, { ref, className: styles, ...otherProps, children: () => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
!isLoading && startContent,
isLoading && spinnerPlacement === "start" && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "shrink-0", children: [
spinner2,
/* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { "aria-atomic": "true", "aria-live": "polite", className: "sr-only", children: [
"Loading",
" "
] })
] }),
children,
isLoading && spinnerPlacement === "end" && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "shrink-0", children: [
/* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { "aria-atomic": "true", "aria-live": "polite", className: "sr-only", children: [
"Loading",
" "
] }),
spinner2
] }),
!isLoading && endContent
] }) })
);
}
var _Button = (0, import_react6.forwardRef)(Button);
// src/button/icon-button.tsx
var import_theme3 = require("@trail-ui/theme");
var import_react7 = require("react");
var import_react_aria_components2 = require("react-aria-components");
var import_jsx_runtime11 = require("react/jsx-runtime");
function IconButton(props, ref) {
const { appearance, spacing, disableAnimation, className, children, ...otherProps } = props;
const styles = (0, import_react7.useMemo)(
() => (0, import_theme3.button)({
isIconOnly: true,
appearance,
spacing,
disableAnimation,
className
}),
[className, disableAnimation, appearance, spacing]
);
const element = children;
const _children = (0, import_react7.isValidElement)(element) ? (0, import_react7.cloneElement)(element, {
"aria-hidden": true,
focusable: false
}) : null;
return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_aria_components2.Button, { ref, className: styles, ...otherProps, children: _children });
}
var _IconButton = (0, import_react7.forwardRef)(IconButton);
// src/flag/flag.tsx
var import_jsx_runtime12 = require("react/jsx-runtime");
function Flag(props) {
let flagIcon;
const { title, desc, variant, hasActionBtn, actionBtnText, isClosable, onActionClick, onClose } = props;
const variantProps = (0, import_theme4.filterVariantProps)(props, import_theme4.flag.variantKeys);
const styles = (0, import_react8.useMemo)(
() => (0, import_theme4.flag)({
...variantProps,
variant
}),
[variantProps, variant]
);
switch (variant) {
case "default":
flagIcon = /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_icons2.SettingsIcon, { height: 24, width: 24 });
break;
case "success":
flagIcon = /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_icons2.CheckCircleIcon, { height: 24, width: 24 });
break;
case "error":
flagIcon = /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_icons2.ErrorIcon, { height: 24, width: 24 });
break;
case "warning":
flagIcon = /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_icons2.WarningIcon, { height: 24, width: 24 });
break;
case "info":
flagIcon = /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_icons2.InfoIcon, { height: 24, width: 24 });
break;
default:
break;
}
return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "shadow-medium flex w-full gap-1.5 rounded text-base", children: [
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: `${styles} flex w-12 min-w-12 items-center justify-center rounded-l`, children: flagIcon }),
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex w-full items-center p-2", children: [
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex w-full flex-col", children: [
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "font-semibold text-neutral-900", children: title }),
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "text-sm font-normal text-neutral-700", children: desc })
] }),
hasActionBtn && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(_Button, { appearance: "link", onPress: onActionClick, children: actionBtnText || "Action" }),
isClosable && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
_IconButton,
{
spacing: "compact",
appearance: "transparent",
onPress: onClose,
"aria-label": "Close",
className: "ml-auto h-auto p-2.5",
children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_icons2.CloseIcon, { height: 24, width: 24, className: "text-neutral-600" })
}
)
] })
] }) });
}
// src/toast/toast.tsx
var import_react_toastify = require("react-toastify");
var import_jsx_runtime13 = require("react/jsx-runtime");
function capitalizeText(text) {
return (text == null ? void 0 : text.split(" ").map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join(" ")) || "";
}
function customToast(message, type, title, options = {}) {
(0, import_react_toastify.toast)(
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "w-full overflow-hidden rounded", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Flag, { variant: type, title: title != null ? title : capitalizeText(type), desc: message }) }),
{
delay: 1e3,
...options
}
);
}
// src/toast/index.ts
__reExport(toast_exports, require("react-toastify"));
// src/select/customSelect.tsx
var import_theme5 = require("@trail-ui/theme");
var import_react13 = __toESM(require("react"));
var import_icons3 = require("@trail-ui/icons");
// src/overlay/overlay.tsx
var import_react9 = __toESM(require("react"));
var import_react10 = require("react");
var import_jsx_runtime14 = require("react/jsx-runtime");
var Positions = {
top: "top",
topLeft: "topLeft",
topRight: "topRight",
bottom: "bottom",
bottomLeft: "bottomLeft",
bottomRight: "bottomRight",
left: "left",
leftTop: "leftTop",
leftBottom: "leftBottom",
right: "right",
rightTop: "rightTop",
rightBottom: "rightBottom"
};
function Overlay(props) {
var _a, _b, _c;
const [style, setStyle] = (0, import_react10.useState)({
top: 0,
left: 0,
transform: "",
position: "fixed"
});
const elementRef = (0, import_react10.useRef)(null);
const getContainingBlockOffset = () => {
const probe = document.createElement("div");
probe.style.cssText = "position:fixed;top:0;left:0;width:1px;height:1px;pointer-events:none;visibility:hidden;";
document.body.appendChild(probe);
const rect = probe.getBoundingClientRect();
document.body.removeChild(probe);
return { top: rect.top, left: rect.left };
};
const getMaxHeight = () => {
var _a2, _b2, _c2;
const refEl = props.referenceElement.current;
if (!refEl) {
return;
}
const refRect = refEl.getBoundingClientRect();
let maxAvailableHeight = 0;
const windowHeight = window.innerHeight;
const offsetY = ((_a2 = props.offset) == null ? void 0 : _a2.y) || 0;
switch (props.position) {
case Positions.bottom:
case Positions.bottomLeft:
case Positions.bottomRight:
maxAvailableHeight = windowHeight - refRect.bottom - offsetY * 2;
break;
case Positions.top:
case Positions.topLeft:
case Positions.topRight:
maxAvailableHeight = refRect.top - offsetY * 2;
break;
default:
maxAvailableHeight = Math.min(
windowHeight - offsetY * 2,
((_b2 = props.style) == null ? void 0 : _b2.maxHeight) || Number.POSITIVE_INFINITY
);
}
if ((_c2 = props.style) == null ? void 0 : _c2.maxHeight) {
maxAvailableHeight = Math.min(maxAvailableHeight, props.style.maxHeight);
}
return maxAvailableHeight;
};
const getMaxWidth = () => {
var _a2, _b2, _c2;
const refEl = props.referenceElement.current;
if (!refEl) {
return;
}
const refRect = refEl.getBoundingClientRect();
let maxAvailableWidth = 0;
const windowWidth = window.innerWidth;
const offsetX = ((_a2 = props.offset) == null ? void 0 : _a2.x) || 0;
switch (props.position) {
case Positions.right:
case Positions.rightBottom:
case Positions.rightTop:
maxAvailableWidth = windowWidth - refRect.right - offsetX * 2;
break;
case Positions.left:
case Positions.leftBottom:
case Positions.leftTop:
maxAvailableWidth = refRect.left - offsetX * 2;
break;
default:
maxAvailableWidth = Math.min(
windowWidth - offsetX * 2,
((_b2 = props.style) == null ? void 0 : _b2.maxWidth) || Number.POSITIVE_INFINITY
);
}
if ((_c2 = props.style) == null ? void 0 : _c2.maxWidth) {
maxAvailableWidth = Math.min(maxAvailableWidth, props.style.maxWidth);
}
return maxAvailableWidth;
};
const getUpdatedPositions = () => {
var _a2, _b2, _c2, _d, _e, _f, _g, _h, _i, _j, _k, _l;
const refEl = props.referenceElement.current;
if (!refEl) {
return;
}
const refRect = refEl.getBoundingClientRect();
const cbOffset = getContainingBlockOffset();
let top = 0;
let left = 0;
let transform = "";
switch (props.position) {
case Positions.top:
top = refRect.top - (((_a2 = props.offset) == null ? void 0 : _a2.y) || 0) - cbOffset.top;
left = refRect.left + refRect.width / 2 - cbOffset.left;
transform = "translate(-50%, -100%)";
break;
case Positions.topLeft:
top = refRect.top - (((_b2 = props.offset) == null ? void 0 : _b2.y) || 0) - cbOffset.top;
left = refRect.left - cbOffset.left;
transform = "translateY(-100%)";
break;
case Positions.topRight:
top = refRect.top - (((_c2 = props.offset) == null ? void 0 : _c2.y) || 0) - cbOffset.top;
left = refRect.right - cbOffset.left;
transform = "translate(-100%, -100%)";
break;
case Positions.bottom:
top = refRect.bottom + (((_d = props.offset) == null ? void 0 : _d.y) || 0) - cbOffset.top;
left = refRect.left + refRect.width / 2 - cbOffset.left;
transform = "translateX(-50%)";
break;
case Positions.bottomLeft:
top = refRect.bottom + (((_e = props.offset) == null ? void 0 : _e.y) || 0) - cbOffset.top;
left = refRect.left - cbOffset.left;
break;
case Positions.bottomRight:
top = refRect.bottom + (((_f = props.offset) == null ? void 0 : _f.y) || 0) - cbOffset.top;
left = refRect.right - cbOffset.left;
transform = "translateX(-100%)";
break;
case Positions.left:
top = refRect.top + refRect.height / 2 - cbOffset.top;
left = refRect.left - (((_g = props.offset) == null ? void 0 : _g.x) || 0) - cbOffset.left;
transform = "translate(-100%, -50%)";
break;
case Positions.leftTop:
top = refRect.top - cbOffset.top;
left = refRect.left - (((_h = props.offset) == null ? void 0 : _h.x) || 0) - cbOffset.left;
transform = "translateX(-100%)";
break;
case Positions.leftBottom:
top = refRect.bottom - cbOffset.top;
left = refRect.left - (((_i = props.offset) == null ? void 0 : _i.x) || 0) - cbOffset.left;
transform = "translate(-100%, -100%)";
break;
case Positions.right:
top = refRect.top + refRect.height / 2 - cbOffset.top;
left = refRect.right + (((_j = props.offset) == null ? void 0 : _j.x) || 0) - cbOffset.left;
transform = "translateY(-50%)";
break;
case Positions.rightTop:
top = refRect.top - cbOffset.top;
left = refRect.right + (((_k = props.offset) == null ? void 0 : _k.x) || 0) - cbOffset.left;
break;
case Positions.rightBottom:
top = refRect.bottom - cbOffset.top;
left = refRect.right + (((_l = props.offset) == null ? void 0 : _l.x) || 0) - cbOffset.left;
transform = "translateY(-100%)";
break;
}
const maxHeight = getMaxHeight();
const maxWidth = getMaxWidth();
setStyle((prevState) => ({
...prevState,
top,
left,
transform,
...maxHeight && { maxHeight },
...maxWidth && { maxWidth }
}));
};
(0, import_react10.useLayoutEffect)(() => {
if (!props.referenceElement.current) {
return;
}
getUpdatedPositions();
const updatePositions = () => getUpdatedPositions();
window.addEventListener("resize", updatePositions);
window.addEventListener("scroll", updatePositions, true);
return () => {
window.removeEventListener("resize", updatePositions);
window.removeEventListener("scroll", updatePositions, true);
};
}, [props.referenceElement, props.isOpen]);
if ((0, import_react10.isValidElement)(props.children)) {
return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
props.onOverlayClick && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
"div",
{
role: "button",
className: "z-2 fixed left-[0] top-[0] h-[100vh] w-[100vw]",
onClick: props.onOverlayClick,
onKeyDown: props.onOverlayClick,
"aria-label": "Close dropdown",
tabIndex: -1
}
),
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
"div",
{
style: {
...style,
overflow: "auto",
width: ((_a = props.style) == null ? void 0 : _a.width) || ((_b = props.referenceElement.current) == null ? void 0 : _b.getBoundingClientRect().width),
height: ((_c = props.style) == null ? void 0 : _c.height) || "fit-content",
zIndex: 30
},
children: import_react9.default.cloneElement(props.children, { ref: elementRef })
}
)
] });
}
return props.children;
}
// src/multiselect/tw-field.tsx
var import_react12 = __toESM(require("react"));
var import_react_aria_components3 = require("react-aria-components");
var import_tailwind_merge2 = require("tailwind-merge");
// src/multiselect/tw-text.tsx
var import_tailwind_merge = require("tailwind-merge");
var import_react11 = __toESM(require("react"));
var import_jsx_runtime15 = require("react/jsx-runtime");
function Text({ className, elementType, children, ...props }) {
return import_react11.default.createElement(
elementType != null ? elementType : "p",
{
...props,
className: (0, import_tailwind_merge.twMerge)("flex gap-1 pt-1.5 text-xs text-neutral-700", className)
},
children
);
}
// src/multiselect/tw-field.tsx
var import_jsx_runtime16 = require("react/jsx-runtime");
var LabeledGroup = import_react12.default.forwardRef(function(props, ref) {
const labelId = import_react12.default.useId();
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)