@usefragments/ui 1.0.2 → 1.2.0

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

@@ -1,18 +1,18 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const thinkingIndicator = "_thinkingIndicator_1fx6u_1";
-const main = "_main_1fx6u_8";
-const label = "_label_1fx6u_14";
-const elapsed = "_elapsed_1fx6u_25";
-const steps = "_steps_1fx6u_34";
-const step = "_step_1fx6u_34";
-const stepIndicator = "_stepIndicator_1fx6u_51";
-const stepDot = "_stepDot_1fx6u_60";
-const stepLabel = "_stepLabel_1fx6u_68";
-const stepPending = "_stepPending_1fx6u_72";
-const stepActive = "_stepActive_1fx6u_76";
-const stepComplete = "_stepComplete_1fx6u_83";
-const stepError = "_stepError_1fx6u_90";
+const thinkingIndicator = "_thinkingIndicator_1ikr9_1";
+const main = "_main_1ikr9_8";
+const label = "_label_1ikr9_14";
+const elapsed = "_elapsed_1ikr9_25";
+const steps = "_steps_1ikr9_34";
+const step = "_step_1ikr9_34";
+const stepIndicator = "_stepIndicator_1ikr9_51";
+const stepDot = "_stepDot_1ikr9_60";
+const stepLabel = "_stepLabel_1ikr9_68";
+const stepPending = "_stepPending_1ikr9_72";
+const stepActive = "_stepActive_1ikr9_76";
+const stepComplete = "_stepComplete_1ikr9_83";
+const stepError = "_stepError_1ikr9_90";
 const styles = {
   thinkingIndicator,
   main,

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

@@ -1,16 +1,16 @@
-const thinkingIndicator = "_thinkingIndicator_1fx6u_1";
-const main = "_main_1fx6u_8";
-const label = "_label_1fx6u_14";
-const elapsed = "_elapsed_1fx6u_25";
-const steps = "_steps_1fx6u_34";
-const step = "_step_1fx6u_34";
-const stepIndicator = "_stepIndicator_1fx6u_51";
-const stepDot = "_stepDot_1fx6u_60";
-const stepLabel = "_stepLabel_1fx6u_68";
-const stepPending = "_stepPending_1fx6u_72";
-const stepActive = "_stepActive_1fx6u_76";
-const stepComplete = "_stepComplete_1fx6u_83";
-const stepError = "_stepError_1fx6u_90";
+const thinkingIndicator = "_thinkingIndicator_1ikr9_1";
+const main = "_main_1ikr9_8";
+const label = "_label_1ikr9_14";
+const elapsed = "_elapsed_1ikr9_25";
+const steps = "_steps_1ikr9_34";
+const step = "_step_1ikr9_34";
+const stepIndicator = "_stepIndicator_1ikr9_51";
+const stepDot = "_stepDot_1ikr9_60";
+const stepLabel = "_stepLabel_1ikr9_68";
+const stepPending = "_stepPending_1ikr9_72";
+const stepActive = "_stepActive_1ikr9_76";
+const stepComplete = "_stepComplete_1ikr9_83";
+const stepError = "_stepError_1ikr9_90";
 const styles = {
   thinkingIndicator,
   main,

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

@@ -1,24 +1,24 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const container = "_container_py8qa_1";
-const topleft = "_topleft_py8qa_15";
-const topcenter = "_topcenter_py8qa_20";
-const topright = "_topright_py8qa_26";
-const bottomleft = "_bottomleft_py8qa_31";
-const bottomcenter = "_bottomcenter_py8qa_37";
-const bottomright = "_bottomright_py8qa_44";
-const toast = "_toast_py8qa_50";
-const toastEnter = "_toastEnter_py8qa_1";
-const icon = "_icon_py8qa_73";
-const success = "_success_py8qa_77";
-const title = "_title_py8qa_81";
-const description = "_description_py8qa_84";
-const error = "_error_py8qa_92";
-const warning = "_warning_py8qa_107";
-const info = "_info_py8qa_122";
-const content = "_content_py8qa_148";
-const action = "_action_py8qa_167";
-const close = "_close_py8qa_192";
+const container = "_container_5fwfk_1";
+const topleft = "_topleft_5fwfk_15";
+const topcenter = "_topcenter_5fwfk_20";
+const topright = "_topright_5fwfk_26";
+const bottomleft = "_bottomleft_5fwfk_31";
+const bottomcenter = "_bottomcenter_5fwfk_37";
+const bottomright = "_bottomright_5fwfk_44";
+const toast = "_toast_5fwfk_50";
+const toastEnter = "_toastEnter_5fwfk_1";
+const description = "_description_5fwfk_63";
+const icon = "_icon_5fwfk_77";
+const success = "_success_5fwfk_81";
+const title = "_title_5fwfk_85";
+const error = "_error_5fwfk_96";
+const warning = "_warning_5fwfk_111";
+const info = "_info_5fwfk_126";
+const content = "_content_5fwfk_155";
+const action = "_action_5fwfk_174";
+const close = "_close_5fwfk_199";
 const styles = {
   container,
   topleft,
@@ -29,11 +29,11 @@ const styles = {
   bottomright,
   toast,
   toastEnter,
-  "default": "_default_py8qa_73",
+  description,
+  "default": "_default_5fwfk_77",
   icon,
   success,
   title,
-  description,
   error,
   warning,
   info,

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

@@ -1,22 +1,22 @@
-const container = "_container_py8qa_1";
-const topleft = "_topleft_py8qa_15";
-const topcenter = "_topcenter_py8qa_20";
-const topright = "_topright_py8qa_26";
-const bottomleft = "_bottomleft_py8qa_31";
-const bottomcenter = "_bottomcenter_py8qa_37";
-const bottomright = "_bottomright_py8qa_44";
-const toast = "_toast_py8qa_50";
-const toastEnter = "_toastEnter_py8qa_1";
-const icon = "_icon_py8qa_73";
-const success = "_success_py8qa_77";
-const title = "_title_py8qa_81";
-const description = "_description_py8qa_84";
-const error = "_error_py8qa_92";
-const warning = "_warning_py8qa_107";
-const info = "_info_py8qa_122";
-const content = "_content_py8qa_148";
-const action = "_action_py8qa_167";
-const close = "_close_py8qa_192";
+const container = "_container_5fwfk_1";
+const topleft = "_topleft_5fwfk_15";
+const topcenter = "_topcenter_5fwfk_20";
+const topright = "_topright_5fwfk_26";
+const bottomleft = "_bottomleft_5fwfk_31";
+const bottomcenter = "_bottomcenter_5fwfk_37";
+const bottomright = "_bottomright_5fwfk_44";
+const toast = "_toast_5fwfk_50";
+const toastEnter = "_toastEnter_5fwfk_1";
+const description = "_description_5fwfk_63";
+const icon = "_icon_5fwfk_77";
+const success = "_success_5fwfk_81";
+const title = "_title_5fwfk_85";
+const error = "_error_5fwfk_96";
+const warning = "_warning_5fwfk_111";
+const info = "_info_5fwfk_126";
+const content = "_content_5fwfk_155";
+const action = "_action_5fwfk_174";
+const close = "_close_5fwfk_199";
 const styles = {
   container,
   topleft,
@@ -27,11 +27,11 @@ const styles = {
   bottomright,
   toast,
   toastEnter,
-  "default": "_default_py8qa_73",
+  description,
+  "default": "_default_5fwfk_77",
   icon,
   success,
   title,
-  description,
   error,
   warning,
   info,

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

@@ -1,18 +1,18 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const root = "_root_1sncr_1";
-const rootWithHelper = "_rootWithHelper_1sncr_48";
-const track = "_track_1sncr_51";
-const trackSm = "_trackSm_1sncr_86";
-const trackLg = "_trackLg_1sncr_96";
-const trackMd = "_trackMd_1sncr_106";
-const thumb = "_thumb_1sncr_116";
-const content = "_content_1sncr_139";
-const label = "_label_1sncr_143";
-const labelSm = "_labelSm_1sncr_151";
-const labelLg = "_labelLg_1sncr_155";
-const helper = "_helper_1sncr_159";
-const helperSm = "_helperSm_1sncr_167";
+const root = "_root_1uoy9_1";
+const rootWithHelper = "_rootWithHelper_1uoy9_48";
+const track = "_track_1uoy9_51";
+const trackSm = "_trackSm_1uoy9_86";
+const trackLg = "_trackLg_1uoy9_96";
+const trackMd = "_trackMd_1uoy9_106";
+const thumb = "_thumb_1uoy9_116";
+const content = "_content_1uoy9_139";
+const label = "_label_1uoy9_143";
+const labelSm = "_labelSm_1uoy9_151";
+const labelLg = "_labelLg_1uoy9_155";
+const helper = "_helper_1uoy9_159";
+const helperSm = "_helperSm_1uoy9_167";
 const styles = {
   root,
   rootWithHelper,

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

@@ -1,16 +1,16 @@
-const root = "_root_1sncr_1";
-const rootWithHelper = "_rootWithHelper_1sncr_48";
-const track = "_track_1sncr_51";
-const trackSm = "_trackSm_1sncr_86";
-const trackLg = "_trackLg_1sncr_96";
-const trackMd = "_trackMd_1sncr_106";
-const thumb = "_thumb_1sncr_116";
-const content = "_content_1sncr_139";
-const label = "_label_1sncr_143";
-const labelSm = "_labelSm_1sncr_151";
-const labelLg = "_labelLg_1sncr_155";
-const helper = "_helper_1sncr_159";
-const helperSm = "_helperSm_1sncr_167";
+const root = "_root_1uoy9_1";
+const rootWithHelper = "_rootWithHelper_1uoy9_48";
+const track = "_track_1uoy9_51";
+const trackSm = "_trackSm_1uoy9_86";
+const trackLg = "_trackLg_1uoy9_96";
+const trackMd = "_trackMd_1uoy9_106";
+const thumb = "_thumb_1uoy9_116";
+const content = "_content_1uoy9_139";
+const label = "_label_1uoy9_143";
+const labelSm = "_labelSm_1uoy9_151";
+const labelLg = "_labelLg_1uoy9_155";
+const helper = "_helper_1uoy9_159";
+const helperSm = "_helperSm_1uoy9_167";
 const styles = {
   root,
   rootWithHelper,

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

@@ -1,33 +1,33 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const group = "_group_jam3u_1";
-const gapXs = "_gap-xs_jam3u_8";
-const gapSm = "_gap-sm_jam3u_12";
-const item = "_item_jam3u_25";
-const selected = "_selected_jam3u_30";
-const pills = "_pills_jam3u_36";
-const outline = "_outline_jam3u_51";
-const disabled = "_disabled_jam3u_104";
-const sizeSm = "_size-sm_jam3u_109";
-const sizeMd = "_size-md_jam3u_118";
-const sizeLg = "_size-lg_jam3u_127";
+const group = "_group_1nacr_1";
+const gapXs = "_gap-xs_1nacr_8";
+const gapSm = "_gap-sm_1nacr_12";
+const item = "_item_1nacr_25";
+const selected = "_selected_1nacr_30";
+const pills = "_pills_1nacr_36";
+const outline = "_outline_1nacr_51";
+const disabled = "_disabled_1nacr_104";
+const sizeSm = "_size-sm_1nacr_109";
+const sizeMd = "_size-md_1nacr_118";
+const sizeLg = "_size-lg_1nacr_127";
 const styles = {
   group,
-  "gap-xs": "_gap-xs_jam3u_8",
+  "gap-xs": "_gap-xs_1nacr_8",
   gapXs,
-  "gap-sm": "_gap-sm_jam3u_12",
+  "gap-sm": "_gap-sm_1nacr_12",
   gapSm,
-  "default": "_default_jam3u_16",
+  "default": "_default_1nacr_16",
   item,
   selected,
   pills,
   outline,
   disabled,
-  "size-sm": "_size-sm_jam3u_109",
+  "size-sm": "_size-sm_1nacr_109",
   sizeSm,
-  "size-md": "_size-md_jam3u_118",
+  "size-md": "_size-md_1nacr_118",
   sizeMd,
-  "size-lg": "_size-lg_jam3u_127",
+  "size-lg": "_size-lg_1nacr_127",
   sizeLg
 };
 exports.default = styles;

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

@@ -1,31 +1,31 @@
-const group = "_group_jam3u_1";
-const gapXs = "_gap-xs_jam3u_8";
-const gapSm = "_gap-sm_jam3u_12";
-const item = "_item_jam3u_25";
-const selected = "_selected_jam3u_30";
-const pills = "_pills_jam3u_36";
-const outline = "_outline_jam3u_51";
-const disabled = "_disabled_jam3u_104";
-const sizeSm = "_size-sm_jam3u_109";
-const sizeMd = "_size-md_jam3u_118";
-const sizeLg = "_size-lg_jam3u_127";
+const group = "_group_1nacr_1";
+const gapXs = "_gap-xs_1nacr_8";
+const gapSm = "_gap-sm_1nacr_12";
+const item = "_item_1nacr_25";
+const selected = "_selected_1nacr_30";
+const pills = "_pills_1nacr_36";
+const outline = "_outline_1nacr_51";
+const disabled = "_disabled_1nacr_104";
+const sizeSm = "_size-sm_1nacr_109";
+const sizeMd = "_size-md_1nacr_118";
+const sizeLg = "_size-lg_1nacr_127";
 const styles = {
   group,
-  "gap-xs": "_gap-xs_jam3u_8",
+  "gap-xs": "_gap-xs_1nacr_8",
   gapXs,
-  "gap-sm": "_gap-sm_jam3u_12",
+  "gap-sm": "_gap-sm_1nacr_12",
   gapSm,
-  "default": "_default_jam3u_16",
+  "default": "_default_1nacr_16",
   item,
   selected,
   pills,
   outline,
   disabled,
-  "size-sm": "_size-sm_jam3u_109",
+  "size-sm": "_size-sm_1nacr_109",
   sizeSm,
-  "size-md": "_size-md_jam3u_118",
+  "size-md": "_size-md_1nacr_118",
   sizeMd,
-  "size-lg": "_size-lg_jam3u_127",
+  "size-lg": "_size-lg_1nacr_127",
   sizeLg
 };
 export {

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

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const positioner = "_positioner_1kgyg_1";
-const popup = "_popup_1kgyg_6";
-const arrow = "_arrow_1kgyg_43";
+const positioner = "_positioner_whfgf_1";
+const popup = "_popup_whfgf_6";
+const arrow = "_arrow_whfgf_43";
 const styles = {
   positioner,
   popup,

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

@@ -1,6 +1,6 @@
-const positioner = "_positioner_1kgyg_1";
-const popup = "_popup_1kgyg_6";
-const arrow = "_arrow_1kgyg_43";
+const positioner = "_positioner_whfgf_1";
+const popup = "_popup_whfgf_6";
+const arrow = "_arrow_whfgf_43";
 const styles = {
   positioner,
   popup,

package/dist/data-table.cjs

@@ -42,7 +42,9 @@ function isInteractiveTarget(target, currentTarget) {
   const interactiveElement = target.closest(
     'button, a, input, select, textarea, [role="button"], [role="link"], [role="checkbox"], [role="switch"]'
   );
-  return Boolean(interactiveElement && currentTarget.contains(interactiveElement));
+  return Boolean(
+    interactiveElement && interactiveElement !== currentTarget && currentTarget.contains(interactiveElement)
+  );
 }
 function DataTableRoot({
   columns: userColumns,
@@ -56,6 +58,7 @@ function DataTableRoot({
   rowSelection: controlledRowSelection,
   onRowSelectionChange,
   onRowClick,
+  getRowProps,
   getSubRows,
   expanded: controlledExpanded,
   onExpandedChange,
@@ -223,12 +226,24 @@ function DataTableRoot({
           const isSelected = selectable ? row.getIsSelected() : false;
           const depth = row.depth ?? 0;
           const canExpand = hasSubRows && row.getCanExpand();
+          const resolvedRowProps = (getRowProps == null ? void 0 : getRowProps(row.original)) ?? {};
+          const {
+            className: rowClassName,
+            onClick: rowOnClick,
+            onKeyDown: rowOnKeyDown,
+            tabIndex: rowTabIndex,
+            ...rowHtmlProps
+          } = resolvedRowProps;
           const handleRowClick = (event) => {
+            rowOnClick == null ? void 0 : rowOnClick(event);
+            if (event.defaultPrevented) return;
             if (!onRowClick) return;
             if (isInteractiveTarget(event.target, event.currentTarget)) return;
             onRowClick(row.original, event);
           };
           const handleRowKeyDown = (event) => {
+            rowOnKeyDown == null ? void 0 : rowOnKeyDown(event);
+            if (event.defaultPrevented) return;
             if (!onRowClick) return;
             if (isInteractiveTarget(event.target, event.currentTarget)) return;
             if (event.key === "Enter" || event.key === " ") {
@@ -236,55 +251,57 @@ function DataTableRoot({
               onRowClick(row.original, event);
             }
           };
-          return /* @__PURE__ */ jsxRuntime.jsx(
+          return /* @__PURE__ */ React.createElement(
             "tr",
             {
+              ...rowHtmlProps,
+              key: row.id,
               className: [
                 DataTable_module.default.row,
                 isClickable && DataTable_module.default.clickable,
                 isSelected && DataTable_module.default.selected,
-                depth > 0 && DataTable_module.default.subRow
+                depth > 0 && DataTable_module.default.subRow,
+                rowClassName
               ].filter(Boolean).join(" "),
-              onClick: isClickable ? handleRowClick : void 0,
-              onKeyDown: isClickable ? handleRowKeyDown : void 0,
-              tabIndex: isClickable ? 0 : void 0,
+              onClick: isClickable || rowOnClick ? handleRowClick : void 0,
+              onKeyDown: isClickable || rowOnKeyDown ? handleRowKeyDown : void 0,
+              tabIndex: rowTabIndex ?? (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
-                );
-              })
+              "data-depth": depth > 0 ? depth : void 0
             },
-            row.id
+            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
+              );
+            })
           );
         }) })
       ]