@usefragments/ui 1.0.0

package/dist/components/Tooltip/index.js

@@ -0,0 +1,116 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Tooltip as Tooltip$1 } from "@base-ui/react/tooltip";
+import styles from "./Tooltip.module.scss.js";
+const TooltipProviderContext = React.createContext(false);
+function TooltipRoot({
+  children,
+  content,
+  side = "top",
+  align = "center",
+  sideOffset = 6,
+  delay,
+  closeDelay,
+  disabled = false,
+  arrow = true,
+  open,
+  defaultOpen,
+  onOpenChange,
+  closeOnClick = false,
+  contentProps,
+  className,
+  style,
+  ...htmlProps
+}) {
+  const hasExternalProvider = React.useContext(TooltipProviderContext);
+  const renderTrigger = React.useCallback(
+    (triggerProps) => {
+      const childProps = children.props;
+      const mergedProps = { ...childProps, ...triggerProps };
+      for (const [key, triggerHandler] of Object.entries(triggerProps)) {
+        const childHandler = childProps[key];
+        if (key.startsWith("on") && typeof triggerHandler === "function" && typeof childHandler === "function") {
+          mergedProps[key] = (...args) => {
+            childHandler(...args);
+            triggerHandler(...args);
+          };
+        }
+      }
+      return React.cloneElement(children, mergedProps);
+    },
+    [children]
+  );
+  if (disabled || !children) {
+    return children ?? null;
+  }
+  const {
+    className: contentClassName,
+    style: contentStyle,
+    ...contentHtmlProps
+  } = contentProps ?? {};
+  const tooltipNode = /* @__PURE__ */ jsxs(
+    Tooltip$1.Root,
+    {
+      open,
+      defaultOpen,
+      onOpenChange,
+      children: [
+        /* @__PURE__ */ jsx(Tooltip$1.Trigger, { closeOnClick, render: renderTrigger }),
+        /* @__PURE__ */ jsx(Tooltip$1.Portal, { children: /* @__PURE__ */ jsx(
+          Tooltip$1.Positioner,
+          {
+            side,
+            align,
+            sideOffset,
+            className: styles.positioner,
+            children: /* @__PURE__ */ jsxs(
+              Tooltip$1.Popup,
+              {
+                ...htmlProps,
+                ...contentHtmlProps,
+                className: [styles.popup, className, contentClassName].filter(Boolean).join(" "),
+                style: { ...style ?? {}, ...contentStyle ?? {} },
+                children: [
+                  content,
+                  arrow && /* @__PURE__ */ jsx(Tooltip$1.Arrow, { className: styles.arrow })
+                ]
+              }
+            )
+          }
+        ) })
+      ]
+    }
+  );
+  if (!hasExternalProvider || delay !== void 0 || closeDelay !== void 0) {
+    return /* @__PURE__ */ jsx(Tooltip$1.Provider, { delay: delay ?? 400, closeDelay: closeDelay ?? 0, children: tooltipNode });
+  }
+  return tooltipNode;
+}
+function TooltipProvider({
+  children,
+  delay,
+  closeDelay = 0,
+  timeout,
+  delayDuration,
+  skipDelayDuration
+}) {
+  const resolvedDelay = delay ?? delayDuration ?? 400;
+  const resolvedTimeout = timeout ?? skipDelayDuration ?? 400;
+  return /* @__PURE__ */ jsx(TooltipProviderContext.Provider, { value: true, children: /* @__PURE__ */ jsx(
+    Tooltip$1.Provider,
+    {
+      delay: resolvedDelay,
+      closeDelay,
+      timeout: resolvedTimeout,
+      children
+    }
+  ) });
+}
+const Tooltip = Object.assign(TooltipRoot, {
+  Root: TooltipRoot,
+  Provider: TooltipProvider
+});
+export {
+  Tooltip,
+  TooltipProvider
+};

package/dist/components/VisuallyHidden/VisuallyHidden.module.scss.cjs

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const visuallyHidden = "_visuallyHidden_dwm1g_1";
+const styles = {
+  visuallyHidden
+};
+exports.default = styles;
+exports.visuallyHidden = visuallyHidden;

package/dist/components/VisuallyHidden/VisuallyHidden.module.scss.js

@@ -0,0 +1,8 @@
+const visuallyHidden = "_visuallyHidden_dwm1g_1";
+const styles = {
+  visuallyHidden
+};
+export {
+  styles as default,
+  visuallyHidden
+};

package/dist/components/VisuallyHidden/index.cjs

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const VisuallyHidden_module = require("./VisuallyHidden.module.scss.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const VisuallyHiddenRoot = React__namespace.forwardRef(
+  function VisuallyHidden2({ children, as: Component = "span", className, ...htmlProps }, ref) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Component,
+      {
+        ref,
+        ...htmlProps,
+        className: [VisuallyHidden_module.default.visuallyHidden, className].filter(Boolean).join(" "),
+        children
+      }
+    );
+  }
+);
+const VisuallyHidden = Object.assign(VisuallyHiddenRoot, {
+  Root: VisuallyHiddenRoot
+});
+exports.VisuallyHidden = VisuallyHidden;

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

@@ -0,0 +1,10 @@
+import * as React from 'react';
+export interface VisuallyHiddenProps extends React.HTMLAttributes<HTMLElement> {
+    children: React.ReactNode;
+    /** HTML element to render */
+    as?: 'span' | 'div';
+}
+export declare const VisuallyHidden: React.ForwardRefExoticComponent<VisuallyHiddenProps & React.RefAttributes<HTMLElement>> & {
+    Root: React.ForwardRefExoticComponent<VisuallyHiddenProps & React.RefAttributes<HTMLElement>>;
+};
+//# sourceMappingURL=index.d.ts.map

package/dist/components/VisuallyHidden/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/VisuallyHidden/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,WAAW,mBAAoB,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IAC5E,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,6BAA6B;IAC7B,EAAE,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;CACrB;AA2BD,eAAO,MAAM,cAAc;;CAEzB,CAAC"}

package/dist/components/VisuallyHidden/index.js

@@ -0,0 +1,22 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import styles from "./VisuallyHidden.module.scss.js";
+const VisuallyHiddenRoot = React.forwardRef(
+  function VisuallyHidden2({ children, as: Component = "span", className, ...htmlProps }, ref) {
+    return /* @__PURE__ */ jsx(
+      Component,
+      {
+        ref,
+        ...htmlProps,
+        className: [styles.visuallyHidden, className].filter(Boolean).join(" "),
+        children
+      }
+    );
+  }
+);
+const VisuallyHidden = Object.assign(VisuallyHiddenRoot, {
+  Root: VisuallyHiddenRoot
+});
+export {
+  VisuallyHidden
+};

package/dist/data-table.cjs

@@ -0,0 +1,310 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const DataTable_module = require("./components/DataTable/DataTable.module.scss.cjs");
+const index = require("./components/Checkbox/index.cjs");
+const DataTable_icons = require("./components/DataTable/DataTable.icons.cjs");
+const DataTable_support = require("./components/DataTable/DataTable.support.cjs");
+const reactTable = require("@tanstack/react-table");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+function getColumnSizeStyle(column) {
+  const { size, minSize, maxSize } = column.columnDef;
+  const hasExplicitSize = size !== void 0 || minSize !== void 0 || maxSize !== void 0;
+  if (!hasExplicitSize) {
+    return void 0;
+  }
+  const resolvedSize = column.getSize();
+  return {
+    width: resolvedSize,
+    minWidth: minSize ?? resolvedSize,
+    maxWidth: maxSize ?? resolvedSize
+  };
+}
+function isInteractiveTarget(target, currentTarget) {
+  if (!(target instanceof Element)) return false;
+  const interactiveElement = target.closest(
+    'button, a, input, select, textarea, [role="button"], [role="link"], [role="checkbox"], [role="switch"]'
+  );
+  return Boolean(interactiveElement && currentTarget.contains(interactiveElement));
+}
+function DataTableRoot({
+  columns: userColumns,
+  data,
+  getRowId,
+  sortable = false,
+  sorting: controlledSorting,
+  onSortingChange,
+  selectable = false,
+  showCheckbox = false,
+  rowSelection: controlledRowSelection,
+  onRowSelectionChange,
+  onRowClick,
+  getSubRows,
+  expanded: controlledExpanded,
+  onExpandedChange,
+  emptyMessage = "No data available",
+  emptyState,
+  loading = false,
+  skeletonRows = 6,
+  density,
+  hideHeader = false,
+  size = "md",
+  className,
+  caption,
+  captionHidden = false,
+  striped = false,
+  bordered = false,
+  wrapperClassName,
+  wrapperProps,
+  "aria-label": ariaLabel,
+  "aria-describedby": ariaDescribedBy,
+  ...htmlProps
+}) {
+  const tableRef = React__namespace.useRef(null);
+  DataTable_support.useArrowKeyRowNav(tableRef, !!onRowClick);
+  const [internalSorting, setInternalSorting] = React__namespace.useState([]);
+  const sorting = controlledSorting ?? internalSorting;
+  const handleSortingChange = onSortingChange ?? setInternalSorting;
+  const [internalRowSelection, setInternalRowSelection] = React__namespace.useState({});
+  const rowSelection = controlledRowSelection ?? internalRowSelection;
+  const handleRowSelectionChange = onRowSelectionChange ?? setInternalRowSelection;
+  const [internalExpanded, setInternalExpanded] = React__namespace.useState({});
+  const expanded = controlledExpanded ?? internalExpanded;
+  const handleExpandedChange = onExpandedChange ?? setInternalExpanded;
+  const columns = React__namespace.useMemo(() => {
+    if (!showCheckbox || !selectable) return userColumns;
+    const checkboxColumn = {
+      id: "__checkbox",
+      size: 40,
+      minSize: 40,
+      maxSize: 40,
+      enableSorting: false,
+      header: ({ table: table2 }) => /* @__PURE__ */ jsxRuntime.jsx(
+        index.Checkbox,
+        {
+          size: "sm",
+          checked: table2.getIsAllRowsSelected(),
+          indeterminate: table2.getIsSomeRowsSelected(),
+          onCheckedChange: () => table2.toggleAllRowsSelected(),
+          "aria-label": "Select all rows"
+        }
+      ),
+      cell: ({ row }) => /* @__PURE__ */ jsxRuntime.jsx(
+        index.Checkbox,
+        {
+          size: "sm",
+          checked: row.getIsSelected(),
+          disabled: !row.getCanSelect(),
+          onCheckedChange: () => row.toggleSelected(),
+          "aria-label": `Select row ${row.id}`
+        }
+      )
+    };
+    return [checkboxColumn, ...userColumns];
+  }, [userColumns, showCheckbox, selectable]);
+  const hasExplicitColumnSizing = React__namespace.useMemo(
+    () => columns.some(
+      (column) => column.size !== void 0 || column.minSize !== void 0 || column.maxSize !== void 0
+    ),
+    [columns]
+  );
+  const hasSubRows = !!getSubRows;
+  const table = reactTable.useReactTable({
+    data,
+    columns,
+    getRowId,
+    getSubRows,
+    getCoreRowModel: reactTable.getCoreRowModel(),
+    getSortedRowModel: sortable ? reactTable.getSortedRowModel() : void 0,
+    getExpandedRowModel: hasSubRows ? reactTable.getExpandedRowModel() : void 0,
+    state: {
+      sorting: sortable ? sorting : void 0,
+      rowSelection: selectable ? rowSelection : void 0,
+      expanded: hasSubRows ? expanded : void 0
+    },
+    onSortingChange: sortable ? handleSortingChange : void 0,
+    onRowSelectionChange: selectable ? handleRowSelectionChange : void 0,
+    onExpandedChange: hasSubRows ? handleExpandedChange : void 0,
+    enableRowSelection: selectable,
+    enableSorting: sortable,
+    enableExpanding: hasSubRows
+  });
+  const isEmpty = !loading && data.length === 0;
+  const densityClass = density === "condensed" ? DataTable_module.default.densityCondensed : density === "regular" ? DataTable_module.default.densityRegular : density === "relaxed" ? DataTable_module.default.densityRelaxed : void 0;
+  const rootClasses = [
+    DataTable_module.default.table,
+    hasExplicitColumnSizing && DataTable_module.default.fixedLayout,
+    DataTable_module.default[size],
+    densityClass,
+    striped && DataTable_module.default.striped,
+    className
+  ].filter(Boolean).join(" ");
+  const { className: wrapperPropsClassName, ...restWrapperProps } = wrapperProps ?? {};
+  const wrapperClasses = [
+    DataTable_module.default.wrapper,
+    bordered && DataTable_module.default.bordered,
+    wrapperClassName,
+    wrapperPropsClassName
+  ].filter(Boolean).join(" ");
+  if (isEmpty) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ...restWrapperProps, className: wrapperClasses, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      "table",
+      {
+        ...htmlProps,
+        className: rootClasses,
+        "aria-label": ariaLabel,
+        "aria-describedby": ariaDescribedBy,
+        children: [
+          caption && /* @__PURE__ */ jsxRuntime.jsx("caption", { className: captionHidden ? DataTable_module.default.captionHidden : DataTable_module.default.caption, children: caption }),
+          /* @__PURE__ */ jsxRuntime.jsx("tbody", { className: DataTable_module.default.tbody, children: /* @__PURE__ */ jsxRuntime.jsx("tr", { className: DataTable_module.default.row, children: /* @__PURE__ */ jsxRuntime.jsx("td", { className: DataTable_module.default.td, colSpan: Math.max(columns.length, 1), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: DataTable_module.default.emptyState, children: emptyState ?? /* @__PURE__ */ jsxRuntime.jsx("span", { className: DataTable_module.default.emptyMessage, children: emptyMessage }) }) }) }) })
+        ]
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ...restWrapperProps, className: wrapperClasses, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    "table",
+    {
+      ...htmlProps,
+      ref: tableRef,
+      className: rootClasses,
+      "aria-label": ariaLabel,
+      "aria-describedby": ariaDescribedBy,
+      "aria-busy": loading || void 0,
+      children: [
+        caption && /* @__PURE__ */ jsxRuntime.jsx("caption", { className: captionHidden ? DataTable_module.default.captionHidden : DataTable_module.default.caption, children: caption }),
+        !hideHeader && /* @__PURE__ */ jsxRuntime.jsx("thead", { className: DataTable_module.default.thead, children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsxRuntime.jsx("tr", { className: DataTable_module.default.headerRow, children: headerGroup.headers.map((header) => {
+          const canSort = sortable && header.column.getCanSort();
+          const sortDirection = header.column.getIsSorted();
+          const toggleSorting = canSort ? header.column.getToggleSortingHandler() : void 0;
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            "th",
+            {
+              className: [DataTable_module.default.th, canSort && DataTable_module.default.thSortable].filter(Boolean).join(" "),
+              style: getColumnSizeStyle(header.column),
+              scope: "col",
+              "data-align": header.column.columnDef.align,
+              "aria-sort": sortDirection ? sortDirection === "asc" ? "ascending" : "descending" : canSort ? "none" : void 0,
+              children: canSort ? /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", className: DataTable_module.default.sortButton, onClick: toggleSorting, children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: DataTable_module.default.headerContent, children: header.isPlaceholder ? null : reactTable.flexRender(header.column.columnDef.header, header.getContext()) }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: DataTable_module.default.sortIndicator, "aria-hidden": "true", children: sortDirection === "asc" ? /* @__PURE__ */ jsxRuntime.jsx(DataTable_icons.SortAscIcon, {}) : sortDirection === "desc" ? /* @__PURE__ */ jsxRuntime.jsx(DataTable_icons.SortDescIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(DataTable_icons.SortIcon, {}) })
+              ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: DataTable_module.default.headerContent, children: header.isPlaceholder ? null : reactTable.flexRender(header.column.columnDef.header, header.getContext()) })
+            },
+            header.id
+          );
+        }) }, headerGroup.id)) }),
+        /* @__PURE__ */ jsxRuntime.jsx("tbody", { className: DataTable_module.default.tbody, children: loading ? /* @__PURE__ */ jsxRuntime.jsx(
+          DataTable_support.DataTableSkeletonRows,
+          {
+            rowCount: skeletonRows,
+            columnCount: columns.length,
+            rowClassName: DataTable_module.default.row,
+            cellClassName: DataTable_module.default.td,
+            barClassName: DataTable_module.default.skeletonBar
+          }
+        ) : table.getRowModel().rows.map((row) => {
+          const isClickable = !!onRowClick;
+          const isSelected = selectable ? row.getIsSelected() : false;
+          const depth = row.depth ?? 0;
+          const canExpand = hasSubRows && row.getCanExpand();
+          const handleRowClick = (event) => {
+            if (!onRowClick) return;
+            if (isInteractiveTarget(event.target, event.currentTarget)) return;
+            onRowClick(row.original, event);
+          };
+          const handleRowKeyDown = (event) => {
+            if (!onRowClick) return;
+            if (isInteractiveTarget(event.target, event.currentTarget)) return;
+            if (event.key === "Enter" || event.key === " ") {
+              event.preventDefault();
+              onRowClick(row.original, event);
+            }
+          };
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            "tr",
+            {
+              className: [
+                DataTable_module.default.row,
+                isClickable && DataTable_module.default.clickable,
+                isSelected && DataTable_module.default.selected,
+                depth > 0 && DataTable_module.default.subRow
+              ].filter(Boolean).join(" "),
+              onClick: isClickable ? handleRowClick : void 0,
+              onKeyDown: isClickable ? handleRowKeyDown : void 0,
+              tabIndex: isClickable ? 0 : void 0,
+              "data-selected": isSelected || void 0,
+              "data-depth": depth > 0 ? depth : void 0,
+              children: row.getVisibleCells().map((cell, cellIndex) => {
+                const isFirstDataCell = hasSubRows && cellIndex === (showCheckbox && selectable ? 1 : 0);
+                const colDef = cell.column.columnDef;
+                const truncate = !!colDef.truncate;
+                const rawValue = truncate ? cell.getValue() : void 0;
+                return /* @__PURE__ */ jsxRuntime.jsx(
+                  "td",
+                  {
+                    className: [DataTable_module.default.td, truncate && DataTable_module.default.truncate].filter(Boolean).join(" "),
+                    "data-align": colDef.align,
+                    title: typeof rawValue === "string" ? rawValue : void 0,
+                    style: {
+                      ...getColumnSizeStyle(cell.column),
+                      ...isFirstDataCell && depth > 0 ? { paddingLeft: `${depth * 24 + 12}px` } : void 0
+                    },
+                    children: isFirstDataCell && canExpand ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: DataTable_module.default.expandCell, children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "button",
+                        {
+                          type: "button",
+                          className: DataTable_module.default.expandButton,
+                          onClick: row.getToggleExpandedHandler(),
+                          "aria-label": row.getIsExpanded() ? "Collapse row" : "Expand row",
+                          "aria-expanded": row.getIsExpanded(),
+                          children: /* @__PURE__ */ jsxRuntime.jsx(DataTable_icons.ExpandIcon, { expanded: row.getIsExpanded() })
+                        }
+                      ),
+                      reactTable.flexRender(cell.column.columnDef.cell, cell.getContext())
+                    ] }) : reactTable.flexRender(cell.column.columnDef.cell, cell.getContext())
+                  },
+                  cell.id
+                );
+              })
+            },
+            row.id
+          );
+        }) })
+      ]
+    }
+  ) });
+}
+function createColumns(columns) {
+  return columns.map((col) => ({
+    id: col.key,
+    accessorKey: col.key,
+    header: col.header,
+    size: col.width,
+    minSize: col.width,
+    maxSize: col.width,
+    cell: col.cell ? ({ row }) => col.cell(row.original) : ({ getValue }) => getValue() ?? "--"
+  }));
+}
+const DataTable = Object.assign(DataTableRoot, {
+  Root: DataTableRoot,
+  Columns: createColumns
+});
+exports.DataTable = DataTable;
+exports.createColumns = createColumns;