@usefragments/ui 1.6.0 → 2.0.0

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

@@ -1,44 +1,46 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const group = "_group_8ifhr_1";
-const gapXs = "_gap-xs_8ifhr_7";
-const gapSm = "_gap-sm_8ifhr_11";
-const item = "_item_8ifhr_15";
-const selected = "_selected_8ifhr_47";
-const disabled = "_disabled_8ifhr_53";
-const sizeSm = "_size-sm_8ifhr_58";
-const sizeMd = "_size-md_8ifhr_97";
-const sizeLg = "_size-lg_8ifhr_136";
-const pills = "_pills_8ifhr_195";
-const outline = "_outline_8ifhr_208";
+const group = "_group_1mbp8_1";
+const gapXs = "_gap-xs_1mbp8_7";
+const gapSm = "_gap-sm_1mbp8_11";
+const item = "_item_1mbp8_15";
+const selected = "_selected_1mbp8_49";
+const disabled = "_disabled_1mbp8_55";
+const sizeSm = "_size-sm_1mbp8_60";
+const sizeMd = "_size-md_1mbp8_99";
+const sizeLg = "_size-lg_1mbp8_138";
+const soft = "_soft_1mbp8_177";
+const ghost = "_ghost_1mbp8_208";
+const outline = "_outline_1mbp8_222";
 const styles = {
   group,
-  "gap-xs": "_gap-xs_8ifhr_7",
+  "gap-xs": "_gap-xs_1mbp8_7",
   gapXs,
-  "gap-sm": "_gap-sm_8ifhr_11",
+  "gap-sm": "_gap-sm_1mbp8_11",
   gapSm,
   item,
   selected,
   disabled,
-  "size-sm": "_size-sm_8ifhr_58",
+  "size-sm": "_size-sm_1mbp8_60",
   sizeSm,
-  "size-md": "_size-md_8ifhr_97",
+  "size-md": "_size-md_1mbp8_99",
   sizeMd,
-  "size-lg": "_size-lg_8ifhr_136",
+  "size-lg": "_size-lg_1mbp8_138",
   sizeLg,
-  "default": "_default_8ifhr_175",
-  pills,
+  soft,
+  ghost,
   outline
 };
 exports.default = styles;
 exports.disabled = disabled;
 exports.gapSm = gapSm;
 exports.gapXs = gapXs;
+exports.ghost = ghost;
 exports.group = group;
 exports.item = item;
 exports.outline = outline;
-exports.pills = pills;
 exports.selected = selected;
 exports.sizeLg = sizeLg;
 exports.sizeMd = sizeMd;
 exports.sizeSm = sizeSm;
+exports.soft = soft;

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

@@ -1,31 +1,32 @@
-const group = "_group_8ifhr_1";
-const gapXs = "_gap-xs_8ifhr_7";
-const gapSm = "_gap-sm_8ifhr_11";
-const item = "_item_8ifhr_15";
-const selected = "_selected_8ifhr_47";
-const disabled = "_disabled_8ifhr_53";
-const sizeSm = "_size-sm_8ifhr_58";
-const sizeMd = "_size-md_8ifhr_97";
-const sizeLg = "_size-lg_8ifhr_136";
-const pills = "_pills_8ifhr_195";
-const outline = "_outline_8ifhr_208";
+const group = "_group_1mbp8_1";
+const gapXs = "_gap-xs_1mbp8_7";
+const gapSm = "_gap-sm_1mbp8_11";
+const item = "_item_1mbp8_15";
+const selected = "_selected_1mbp8_49";
+const disabled = "_disabled_1mbp8_55";
+const sizeSm = "_size-sm_1mbp8_60";
+const sizeMd = "_size-md_1mbp8_99";
+const sizeLg = "_size-lg_1mbp8_138";
+const soft = "_soft_1mbp8_177";
+const ghost = "_ghost_1mbp8_208";
+const outline = "_outline_1mbp8_222";
 const styles = {
   group,
-  "gap-xs": "_gap-xs_8ifhr_7",
+  "gap-xs": "_gap-xs_1mbp8_7",
   gapXs,
-  "gap-sm": "_gap-sm_8ifhr_11",
+  "gap-sm": "_gap-sm_1mbp8_11",
   gapSm,
   item,
   selected,
   disabled,
-  "size-sm": "_size-sm_8ifhr_58",
+  "size-sm": "_size-sm_1mbp8_60",
   sizeSm,
-  "size-md": "_size-md_8ifhr_97",
+  "size-md": "_size-md_1mbp8_99",
   sizeMd,
-  "size-lg": "_size-lg_8ifhr_136",
+  "size-lg": "_size-lg_1mbp8_138",
   sizeLg,
-  "default": "_default_8ifhr_175",
-  pills,
+  soft,
+  ghost,
   outline
 };
 export {
@@ -33,12 +34,13 @@ export {
   disabled,
   gapSm,
   gapXs,
+  ghost,
   group,
   item,
   outline,
-  pills,
   selected,
   sizeLg,
   sizeMd,
-  sizeSm
+  sizeSm,
+  soft
 };

package/dist/components/ToggleGroup/index.cjs

@@ -36,7 +36,7 @@ function ToggleGroupRoot({
   onChange,
   onValueChange,
   children,
-  variant = "default",
+  variant = "soft",
   size: sizeProp,
   gap,
   selectionMode = "single",
@@ -45,8 +45,7 @@ function ToggleGroupRoot({
 }) {
   var _a;
   const size = index.useResolvedControlSize(sizeProp);
-  const normalizedVariant = variant === "outlined" ? "outline" : variant;
-  const resolvedGap = normalizedVariant === "pills" ? gap ?? "xs" : "none";
+  const resolvedGap = variant === "ghost" ? gap ?? "xs" : "none";
   const [internalValue, setInternalValue] = React__namespace.useState(defaultValue ?? "");
   const isControlled = value !== void 0;
   const currentValue = isControlled ? value ?? "" : internalValue;
@@ -62,7 +61,7 @@ function ToggleGroupRoot({
   );
   const classes = [
     ToggleGroup_module.default.group,
-    ToggleGroup_module.default[normalizedVariant],
+    ToggleGroup_module.default[variant],
     ToggleGroup_module.default[`size-${size}`],
     resolvedGap !== "none" && ToggleGroup_module.default[`gap-${resolvedGap}`],
     className
@@ -77,7 +76,7 @@ function ToggleGroupRoot({
   const contextValue = {
     value: currentValue,
     onChange: emitChange,
-    variant: normalizedVariant,
+    variant,
     size,
     hasFocusableSelection,
     firstEnabledValue

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

@@ -14,15 +14,16 @@ export interface ToggleGroupProps extends Omit<React.HTMLAttributes<HTMLDivEleme
     onValueChange?: (value: string) => void;
     /** Toggle items */
     children: React.ReactNode;
-    /** Visual variant.
-     * @default "default"
+    /** Chrome. `soft` is the filled rail, `ghost` the open pill cluster,
+     * `outline` the connected bordered segments.
+     * @default "soft"
      * @see https://usefragments.com/components/togglegroup#variants */
-    variant?: "default" | "pills" | "outline" | "outlined";
+    variant?: "soft" | "ghost" | "outline";
     /** Size.
      * @default "md" */
     size?: "sm" | "md" | "lg";
-    /** Gap between items in the pills variant. Defaults to `xs` for pills and
-     * is intentionally removed from connected variants. */
+    /** Gap between items in the ghost variant. Defaults to `xs` for ghost and
+     * is intentionally removed from the connected variants. */
     gap?: "none" | "xs" | "sm";
     /** Selection mode for this control. Currently only single-select is supported.
      * @default "single" */
@@ -39,7 +40,7 @@ export interface ToggleGroupItemProps extends Omit<React.HTMLAttributes<HTMLButt
 interface ToggleGroupContextValue {
     value: string;
     onChange: (value: string) => void;
-    variant: "default" | "pills" | "outline";
+    variant: "soft" | "ghost" | "outline";
     size: "sm" | "md" | "lg";
     hasFocusableSelection: boolean;
     firstEnabledValue: string | null;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ToggleGroup/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B;;;GAGG;AACH,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IAC9F,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4CAA4C;IAC5C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,4CAA4C;IAC5C,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,mBAAmB;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;uEAEmE;IACnE,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,UAAU,CAAC;IACvD;uBACmB;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B;2DACuD;IACvD,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,CAAC;IAC3B;2BACuB;IACvB,aAAa,CAAC,EAAE,QAAQ,CAAC;CAC1B;AAED,MAAM,WAAW,oBAAqB,SAAQ,IAAI,CAChD,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC,EACvC,SAAS,CACV;IACC,0BAA0B;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,mBAAmB;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAMD,UAAU,uBAAuB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,OAAO,EAAE,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;IACzC,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACzB,qBAAqB,EAAE,OAAO,CAAC;IAC/B,iBAAiB,EAAE,MAAM,GAAG,IAAI,CAAC;CAClC;AAID,iBAAS,qBAAqB,4BAM7B;AAMD,iBAAS,eAAe,CAAC,EACvB,KAAK,EACL,YAAY,EACZ,QAAQ,EACR,aAAa,EACb,QAAQ,EACR,OAAmB,EACnB,IAAI,EAAE,QAAQ,EACd,GAAG,EACH,aAAwB,EACxB,SAAS,EACT,GAAG,SAAS,EACb,EAAE,gBAAgB,2CAuDlB;AAED,iBAAS,eAAe,CAAC,EACvB,KAAK,EACL,QAAQ,EACR,QAAgB,EAChB,SAAS,EACT,SAAS,EACT,GAAG,SAAS,EACb,EAAE,oBAAoB,2CAwFtB;AAMD,eAAO,MAAM,WAAW;;CAEtB,CAAC;AAEH,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,qBAAqB,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ToggleGroup/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B;;;GAGG;AACH,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IAC9F,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4CAA4C;IAC5C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,4CAA4C;IAC5C,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,mBAAmB;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;uEAGmE;IACnE,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC;IACvC;uBACmB;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B;+DAC2D;IAC3D,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,CAAC;IAC3B;2BACuB;IACvB,aAAa,CAAC,EAAE,QAAQ,CAAC;CAC1B;AAED,MAAM,WAAW,oBAAqB,SAAQ,IAAI,CAChD,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC,EACvC,SAAS,CACV;IACC,0BAA0B;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,mBAAmB;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAMD,UAAU,uBAAuB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,OAAO,EAAE,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC;IACtC,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACzB,qBAAqB,EAAE,OAAO,CAAC;IAC/B,iBAAiB,EAAE,MAAM,GAAG,IAAI,CAAC;CAClC;AAID,iBAAS,qBAAqB,4BAM7B;AAMD,iBAAS,eAAe,CAAC,EACvB,KAAK,EACL,YAAY,EACZ,QAAQ,EACR,aAAa,EACb,QAAQ,EACR,OAAgB,EAChB,IAAI,EAAE,QAAQ,EACd,GAAG,EACH,aAAwB,EACxB,SAAS,EACT,GAAG,SAAS,EACb,EAAE,gBAAgB,2CAsDlB;AAED,iBAAS,eAAe,CAAC,EACvB,KAAK,EACL,QAAQ,EACR,QAAgB,EAChB,SAAS,EACT,SAAS,EACT,GAAG,SAAS,EACb,EAAE,oBAAoB,2CAwFtB;AAMD,eAAO,MAAM,WAAW;;CAEtB,CAAC;AAEH,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,qBAAqB,EAAE,CAAC"}

package/dist/components/ToggleGroup/index.js

@@ -17,7 +17,7 @@ function ToggleGroupRoot({
   onChange,
   onValueChange,
   children,
-  variant = "default",
+  variant = "soft",
   size: sizeProp,
   gap,
   selectionMode = "single",
@@ -26,8 +26,7 @@ function ToggleGroupRoot({
 }) {
   var _a;
   const size = useResolvedControlSize(sizeProp);
-  const normalizedVariant = variant === "outlined" ? "outline" : variant;
-  const resolvedGap = normalizedVariant === "pills" ? gap ?? "xs" : "none";
+  const resolvedGap = variant === "ghost" ? gap ?? "xs" : "none";
   const [internalValue, setInternalValue] = React.useState(defaultValue ?? "");
   const isControlled = value !== void 0;
   const currentValue = isControlled ? value ?? "" : internalValue;
@@ -43,7 +42,7 @@ function ToggleGroupRoot({
   );
   const classes = [
     styles.group,
-    styles[normalizedVariant],
+    styles[variant],
     styles[`size-${size}`],
     resolvedGap !== "none" && styles[`gap-${resolvedGap}`],
     className
@@ -58,7 +57,7 @@ function ToggleGroupRoot({
   const contextValue = {
     value: currentValue,
     onChange: emitChange,
-    variant: normalizedVariant,
+    variant,
     size,
     hasFocusableSelection,
     firstEnabledValue

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_1g75f_1";
-const popup = "_popup_1g75f_6";
-const arrow = "_arrow_1g75f_38";
+const positioner = "_positioner_1gppb_1";
+const popup = "_popup_1gppb_6";
+const arrow = "_arrow_1gppb_38";
 const styles = {
   positioner,
   popup,

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

@@ -1,6 +1,6 @@
-const positioner = "_positioner_1g75f_1";
-const popup = "_popup_1g75f_6";
-const arrow = "_arrow_1g75f_38";
+const positioner = "_positioner_1gppb_1";
+const popup = "_popup_1gppb_6";
+const arrow = "_arrow_1gppb_38";
 const styles = {
   positioner,
   popup,

package/dist/components/Tooltip/index.cjs

@@ -68,39 +68,31 @@ function TooltipRoot({
     style: contentStyle,
     ...contentHtmlProps
   } = contentProps ?? {};
-  const tooltipNode = /* @__PURE__ */ jsxRuntime.jsxs(
-    tooltip.Tooltip.Root,
-    {
-      open,
-      defaultOpen,
-      onOpenChange,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(tooltip.Tooltip.Trigger, { closeOnClick, render: renderTrigger }),
-        /* @__PURE__ */ jsxRuntime.jsx(tooltip.Tooltip.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
-          tooltip.Tooltip.Positioner,
+  const tooltipNode = /* @__PURE__ */ jsxRuntime.jsxs(tooltip.Tooltip.Root, { open, defaultOpen, onOpenChange, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(tooltip.Tooltip.Trigger, { closeOnClick, render: renderTrigger }),
+    /* @__PURE__ */ jsxRuntime.jsx(tooltip.Tooltip.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+      tooltip.Tooltip.Positioner,
+      {
+        side,
+        align,
+        sideOffset,
+        className: Tooltip_module.default.positioner,
+        children: /* @__PURE__ */ jsxRuntime.jsxs(
+          tooltip.Tooltip.Popup,
           {
-            side,
-            align,
-            sideOffset,
-            className: Tooltip_module.default.positioner,
-            children: /* @__PURE__ */ jsxRuntime.jsxs(
-              tooltip.Tooltip.Popup,
-              {
-                ...htmlProps,
-                ...contentHtmlProps,
-                className: [Tooltip_module.default.popup, className, contentClassName].filter(Boolean).join(" "),
-                style: { ...style ?? {}, ...contentStyle ?? {} },
-                children: [
-                  content,
-                  arrow && /* @__PURE__ */ jsxRuntime.jsx(tooltip.Tooltip.Arrow, { className: Tooltip_module.default.arrow })
-                ]
-              }
-            )
+            ...htmlProps,
+            ...contentHtmlProps,
+            className: [Tooltip_module.default.popup, className, contentClassName].filter(Boolean).join(" "),
+            style: { ...style ?? {}, ...contentStyle ?? {} },
+            children: [
+              content,
+              arrow && /* @__PURE__ */ jsxRuntime.jsx(tooltip.Tooltip.Arrow, { className: Tooltip_module.default.arrow })
+            ]
           }
-        ) })
-      ]
-    }
-  );
+        )
+      }
+    ) })
+  ] });
   if (!hasExternalProvider || delay !== void 0 || closeDelay !== void 0) {
     return /* @__PURE__ */ jsxRuntime.jsx(tooltip.Tooltip.Provider, { delay: delay ?? 400, closeDelay: closeDelay ?? 0, children: tooltipNode });
   }
@@ -116,15 +108,7 @@ function TooltipProvider({
 }) {
   const resolvedDelay = delay ?? delayDuration ?? 400;
   const resolvedTimeout = timeout ?? skipDelayDuration ?? 400;
-  return /* @__PURE__ */ jsxRuntime.jsx(TooltipProviderContext.Provider, { value: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-    tooltip.Tooltip.Provider,
-    {
-      delay: resolvedDelay,
-      closeDelay,
-      timeout: resolvedTimeout,
-      children
-    }
-  ) });
+  return /* @__PURE__ */ jsxRuntime.jsx(TooltipProviderContext.Provider, { value: true, children: /* @__PURE__ */ jsxRuntime.jsx(tooltip.Tooltip.Provider, { delay: resolvedDelay, closeDelay, timeout: resolvedTimeout, children }) });
 }
 const Tooltip = Object.assign(TooltipRoot, {
   Root: TooltipRoot,

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

@@ -1,7 +1,7 @@
-import * as React from 'react';
-export type TooltipSide = 'top' | 'bottom' | 'left' | 'right';
-export type TooltipAlign = 'start' | 'center' | 'end';
-export interface TooltipProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'content' | 'defaultChecked'> {
+import * as React from "react";
+export type TooltipSide = "top" | "bottom" | "left" | "right";
+export type TooltipAlign = "start" | "center" | "end";
+export interface TooltipProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "content" | "defaultChecked"> {
     /** The element that triggers the tooltip */
     children: React.ReactElement;
     /** Content to display in the tooltip */

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,MAAM,MAAM,WAAW,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;AAC9D,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;AAEtD,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,SAAS,GAAG,gBAAgB,CAAC;IAC5G,4CAA4C;IAC5C,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC;IAC7B,wCAAwC;IACxC,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,qCAAqC;IACrC,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,mCAAmC;IACnC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gCAAgC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+BAA+B;IAC/B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qCAAqC;IACrC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,4BAA4B;IAC5B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,yBAAyB;IACzB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,uCAAuC;IACvC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC;wBACoB;IACpB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,yGAAyG;IACzG,YAAY,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;CACrD;AAED,MAAM,WAAW,oBAAoB;IACnC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,0CAA0C;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gDAAgD;IAChD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iEAAiE;IACjE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,2CAA2C;IAC3C,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,6CAA6C;IAC7C,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAQD;;;;;;;;;GASG;AACH,iBAAS,WAAW,CAAC,EACnB,QAAQ,EACR,OAAO,EACP,IAAY,EACZ,KAAgB,EAChB,UAAc,EACd,KAAK,EACL,UAAU,EACV,QAAgB,EAChB,KAAY,EACZ,IAAI,EACJ,WAAW,EACX,YAAY,EACZ,YAAoB,EACpB,YAAY,EACZ,SAAS,EACT,KAAK,EACL,GAAG,SAAS,EACb,EAAE,YAAY,2CA0Ed;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,KAAK,EACL,UAAc,EACd,OAAO,EACP,aAAa,EACb,iBAAiB,GAClB,EAAE,oBAAoB,2CAgBtB;AAED,eAAO,MAAM,OAAO;;;CAGlB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,MAAM,MAAM,WAAW,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;AAC9D,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;AAEtD,MAAM,WAAW,YAAa,SAAQ,IAAI,CACxC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EACpC,SAAS,GAAG,gBAAgB,CAC7B;IACC,4CAA4C;IAC5C,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC;IAC7B,wCAAwC;IACxC,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,qCAAqC;IACrC,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,mCAAmC;IACnC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gCAAgC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+BAA+B;IAC/B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qCAAqC;IACrC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,4BAA4B;IAC5B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,yBAAyB;IACzB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,uCAAuC;IACvC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC;wBACoB;IACpB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,yGAAyG;IACzG,YAAY,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;CACrD;AAED,MAAM,WAAW,oBAAoB;IACnC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,0CAA0C;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gDAAgD;IAChD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iEAAiE;IACjE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,2CAA2C;IAC3C,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,6CAA6C;IAC7C,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAQD;;;;;;;;;GASG;AACH,iBAAS,WAAW,CAAC,EACnB,QAAQ,EACR,OAAO,EACP,IAAY,EACZ,KAAgB,EAChB,UAAc,EACd,KAAK,EACL,UAAU,EACV,QAAgB,EAChB,KAAY,EACZ,IAAI,EACJ,WAAW,EACX,YAAY,EACZ,YAAoB,EACpB,YAAY,EACZ,SAAS,EACT,KAAK,EACL,GAAG,SAAS,EACb,EAAE,YAAY,2CAsEd;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,KAAK,EACL,UAAc,EACd,OAAO,EACP,aAAa,EACb,iBAAiB,GAClB,EAAE,oBAAoB,2CAYtB;AAED,eAAO,MAAM,OAAO;;;CAGlB,CAAC"}

package/dist/components/Tooltip/index.js

@@ -49,39 +49,31 @@ function TooltipRoot({
     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,
+  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,
           {
-            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 })
-                ]
-              }
-            )
+            ...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 });
   }
@@ -97,15 +89,7 @@ function TooltipProvider({
 }) {
   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
-    }
-  ) });
+  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,

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

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

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

@@ -1,4 +1,4 @@
-const visuallyHidden = "_visuallyHidden_nndym_1";
+const visuallyHidden = "_visuallyHidden_1jk5c_1";
 const styles = {
   visuallyHidden
 };

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

@@ -1,8 +1,8 @@
-import * as React from 'react';
+import * as React from "react";
 export interface VisuallyHiddenProps extends React.HTMLAttributes<HTMLElement> {
     children: React.ReactNode;
     /** HTML element to render */
-    as?: 'span' | 'div';
+    as?: "span" | "div";
 }
 export declare const VisuallyHidden: React.ForwardRefExoticComponent<VisuallyHiddenProps & React.RefAttributes<HTMLElement>> & {
     Root: React.ForwardRefExoticComponent<VisuallyHiddenProps & React.RefAttributes<HTMLElement>>;

package/dist/data-table-virtual.cjs

@@ -5,6 +5,7 @@ const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const reactVirtual = require("@tanstack/react-virtual");
 const table = require("./table.cjs");
+const DataTable_module = require("./components/DataTable/DataTable.module.scss.cjs");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e) {
@@ -37,9 +38,9 @@ function DataTableVirtualRoot({
     caption ? /* @__PURE__ */ jsxRuntime.jsx(table.Table.Caption, { visuallyHidden: captionHidden, children: caption }) : null,
     /* @__PURE__ */ jsxRuntime.jsx(table.Table.Head, { children: header }),
     /* @__PURE__ */ jsxRuntime.jsxs(table.Table.Body, { children: [
-      paddingTop > 0 ? /* @__PURE__ */ jsxRuntime.jsx("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan, style: { height: paddingTop, padding: 0 } }) }) : null,
+      paddingTop > 0 ? /* @__PURE__ */ jsxRuntime.jsx("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan, className: DataTable_module.default.virtualSpacer, style: { height: paddingTop } }) }) : null,
       virtualRows.map((row) => renderRow(row)),
-      paddingBottom > 0 ? /* @__PURE__ */ jsxRuntime.jsx("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan, style: { height: paddingBottom, padding: 0, border: 0 } }) }) : null
+      paddingBottom > 0 ? /* @__PURE__ */ jsxRuntime.jsx("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan, className: DataTable_module.default.virtualSpacer, style: { height: paddingBottom } }) }) : null
     ] })
   ] });
 }

package/dist/data-table-virtual.js

@@ -3,6 +3,7 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import { Table } from "./table.js";
+import styles from "./components/DataTable/DataTable.module.scss.js";
 function DataTableVirtualRoot({
   caption,
   captionHidden = false,
@@ -18,9 +19,9 @@ function DataTableVirtualRoot({
     caption ? /* @__PURE__ */ jsx(Table.Caption, { visuallyHidden: captionHidden, children: caption }) : null,
     /* @__PURE__ */ jsx(Table.Head, { children: header }),
     /* @__PURE__ */ jsxs(Table.Body, { children: [
-      paddingTop > 0 ? /* @__PURE__ */ jsx("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsx("td", { colSpan, style: { height: paddingTop, padding: 0 } }) }) : null,
+      paddingTop > 0 ? /* @__PURE__ */ jsx("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsx("td", { colSpan, className: styles.virtualSpacer, style: { height: paddingTop } }) }) : null,
       virtualRows.map((row) => renderRow(row)),
-      paddingBottom > 0 ? /* @__PURE__ */ jsx("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsx("td", { colSpan, style: { height: paddingBottom, padding: 0, border: 0 } }) }) : null
+      paddingBottom > 0 ? /* @__PURE__ */ jsx("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsx("td", { colSpan, className: styles.virtualSpacer, style: { height: paddingBottom } }) }) : null
     ] })
   ] });
 }

package/dist/data-table.cjs

@@ -30,6 +30,7 @@ const DataTable_module = require("./components/DataTable/DataTable.module.scss.c
 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 env = require("./utils/env.cjs");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e) {
@@ -57,7 +58,7 @@ function loadReactTable() {
         _reactTable = await import("@tanstack/react-table");
       } catch {
         _reactTableFailed = true;
-        if (process.env.NODE_ENV === "development") {
+        if (env.isDevelopmentBuild()) {
           console.warn(
             "[@usefragments/ui] DataTable: @tanstack/react-table is not installed. Rendering a static table without sorting, selection, or expansion. Install it with: npm install @tanstack/react-table"
           );
@@ -355,7 +356,7 @@ function DataTableLive({
                   title: typeof rawValue === "string" ? rawValue : void 0,
                   style: {
                     ...getColumnSizeStyle(cell.column),
-                    ...isFirstDataCell ? { "--_fui-table-tree-depth": depth } : void 0
+                    ...isFirstDataCell ? { "--fui-table-tree-depth": depth } : void 0
                   },
                   children: isFirstDataCell && canExpand ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: DataTable_module.default.expandCell, children: [
                     /* @__PURE__ */ jsxRuntime.jsx(

package/dist/data-table.js

@@ -7,6 +7,7 @@ import styles from "./components/DataTable/DataTable.module.scss.js";
 import { Checkbox } from "./components/Checkbox/index.js";
 import { SortAscIcon, SortDescIcon, SortIcon, ExpandIcon } from "./components/DataTable/DataTable.icons.js";
 import { DataTableSkeletonRows, useArrowKeyRowNav } from "./components/DataTable/DataTable.support.js";
+import { isDevelopmentBuild } from "./utils/env.js";
 let _reactTable = null;
 let _reactTableLoadPromise = null;
 let _reactTableFailed = false;
@@ -17,7 +18,7 @@ function loadReactTable() {
         _reactTable = await import("@tanstack/react-table");
       } catch {
         _reactTableFailed = true;
-        if (process.env.NODE_ENV === "development") {
+        if (isDevelopmentBuild()) {
           console.warn(
             "[@usefragments/ui] DataTable: @tanstack/react-table is not installed. Rendering a static table without sorting, selection, or expansion. Install it with: npm install @tanstack/react-table"
           );
@@ -315,7 +316,7 @@ function DataTableLive({
                   title: typeof rawValue === "string" ? rawValue : void 0,
                   style: {
                     ...getColumnSizeStyle(cell.column),
-                    ...isFirstDataCell ? { "--_fui-table-tree-depth": depth } : void 0
+                    ...isFirstDataCell ? { "--fui-table-tree-depth": depth } : void 0
                   },
                   children: isFirstDataCell && canExpand ? /* @__PURE__ */ jsxs("span", { className: styles.expandCell, children: [
                     /* @__PURE__ */ jsx(