@fragments-sdk/ui 0.13.0 → 0.14.0

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_1ea4w_1";
-const gapXs = "_gap-xs_1ea4w_6";
-const gapSm = "_gap-sm_1ea4w_10";
-const item = "_item_1ea4w_20";
-const selected = "_selected_1ea4w_25";
-const pills = "_pills_1ea4w_30";
-const outline = "_outline_1ea4w_43";
-const disabled = "_disabled_1ea4w_101";
-const sizeSm = "_size-sm_1ea4w_106";
-const sizeMd = "_size-md_1ea4w_112";
-const sizeLg = "_size-lg_1ea4w_118";
+const group = "_group_lpcmd_1";
+const gapXs = "_gap-xs_lpcmd_6";
+const gapSm = "_gap-sm_lpcmd_10";
+const item = "_item_lpcmd_20";
+const selected = "_selected_lpcmd_25";
+const pills = "_pills_lpcmd_30";
+const outline = "_outline_lpcmd_43";
+const disabled = "_disabled_lpcmd_101";
+const sizeSm = "_size-sm_lpcmd_106";
+const sizeMd = "_size-md_lpcmd_112";
+const sizeLg = "_size-lg_lpcmd_118";
 const styles = {
   group,
-  "gap-xs": "_gap-xs_1ea4w_6",
+  "gap-xs": "_gap-xs_lpcmd_6",
   gapXs,
-  "gap-sm": "_gap-sm_1ea4w_10",
+  "gap-sm": "_gap-sm_lpcmd_10",
   gapSm,
-  "default": "_default_1ea4w_14",
+  "default": "_default_lpcmd_14",
   item,
   selected,
   pills,
   outline,
   disabled,
-  "size-sm": "_size-sm_1ea4w_106",
+  "size-sm": "_size-sm_lpcmd_106",
   sizeSm,
-  "size-md": "_size-md_1ea4w_112",
+  "size-md": "_size-md_lpcmd_112",
   sizeMd,
-  "size-lg": "_size-lg_1ea4w_118",
+  "size-lg": "_size-lg_lpcmd_118",
   sizeLg
 };
 exports.default = styles;

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

@@ -1,31 +1,31 @@
-const group = "_group_1ea4w_1";
-const gapXs = "_gap-xs_1ea4w_6";
-const gapSm = "_gap-sm_1ea4w_10";
-const item = "_item_1ea4w_20";
-const selected = "_selected_1ea4w_25";
-const pills = "_pills_1ea4w_30";
-const outline = "_outline_1ea4w_43";
-const disabled = "_disabled_1ea4w_101";
-const sizeSm = "_size-sm_1ea4w_106";
-const sizeMd = "_size-md_1ea4w_112";
-const sizeLg = "_size-lg_1ea4w_118";
+const group = "_group_lpcmd_1";
+const gapXs = "_gap-xs_lpcmd_6";
+const gapSm = "_gap-sm_lpcmd_10";
+const item = "_item_lpcmd_20";
+const selected = "_selected_lpcmd_25";
+const pills = "_pills_lpcmd_30";
+const outline = "_outline_lpcmd_43";
+const disabled = "_disabled_lpcmd_101";
+const sizeSm = "_size-sm_lpcmd_106";
+const sizeMd = "_size-md_lpcmd_112";
+const sizeLg = "_size-lg_lpcmd_118";
 const styles = {
   group,
-  "gap-xs": "_gap-xs_1ea4w_6",
+  "gap-xs": "_gap-xs_lpcmd_6",
   gapXs,
-  "gap-sm": "_gap-sm_1ea4w_10",
+  "gap-sm": "_gap-sm_lpcmd_10",
   gapSm,
-  "default": "_default_1ea4w_14",
+  "default": "_default_lpcmd_14",
   item,
   selected,
   pills,
   outline,
   disabled,
-  "size-sm": "_size-sm_1ea4w_106",
+  "size-sm": "_size-sm_lpcmd_106",
   sizeSm,
-  "size-md": "_size-md_1ea4w_112",
+  "size-md": "_size-md_lpcmd_112",
   sizeMd,
-  "size-lg": "_size-lg_1ea4w_118",
+  "size-lg": "_size-lg_lpcmd_118",
   sizeLg
 };
 export {

package/dist/components/ToggleGroup/index.cjs

@@ -32,21 +32,32 @@ function useToggleGroupContext() {
 }
 function ToggleGroupRoot({
   value,
+  defaultValue,
   onChange,
   onValueChange,
   children,
   variant = "default",
   size = "md",
   gap = "xs",
+  selectionMode = "single",
   className,
   ...htmlProps
 }) {
   var _a;
-  const resolvedOnChange = onChange ?? onValueChange ?? (() => {
-  });
+  const normalizedVariant = variant === "outlined" ? "outline" : variant;
+  const [internalValue, setInternalValue] = React__namespace.useState(defaultValue ?? "");
+  const isControlled = value !== void 0;
+  const currentValue = isControlled ? value ?? "" : internalValue;
+  const emitChange = React__namespace.useCallback((nextValue) => {
+    var _a2;
+    if (!isControlled) {
+      setInternalValue(nextValue);
+    }
+    (_a2 = onChange ?? onValueChange) == null ? void 0 : _a2(nextValue);
+  }, [isControlled, onChange, onValueChange]);
   const classes = [
     ToggleGroup_module.default.group,
-    ToggleGroup_module.default[variant],
+    ToggleGroup_module.default[normalizedVariant],
     ToggleGroup_module.default[`size-${size}`],
     gap !== "none" && ToggleGroup_module.default[`gap-${gap}`],
     className
@@ -56,17 +67,25 @@ function ToggleGroupRoot({
   );
   const firstEnabledValue = ((_a = childItems.find((item) => !item.props.disabled)) == null ? void 0 : _a.props.value) ?? null;
   const hasFocusableSelection = childItems.some(
-    (item) => !item.props.disabled && item.props.value === value
+    (item) => !item.props.disabled && item.props.value === currentValue
   );
   const contextValue = {
-    value,
-    onChange: resolvedOnChange,
-    variant,
+    value: currentValue,
+    onChange: emitChange,
+    variant: normalizedVariant,
     size,
     hasFocusableSelection,
     firstEnabledValue
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(ToggleGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx("div", { ...htmlProps, role: "radiogroup", className: classes, children }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(ToggleGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ...htmlProps,
+      role: selectionMode === "single" ? "radiogroup" : "radiogroup",
+      className: classes,
+      children
+    }
+  ) });
 }
 function ToggleGroupItem({
   value,

package/dist/components/ToggleGroup/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../src/components/ToggleGroup/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport styles from './ToggleGroup.module.scss';\n\n// ============================================\n// Types\n// ============================================\n\n/**\n * A group of toggle buttons where only one can be selected at a time.\n * @see https://usefragments.com/components/togglegroup\n */\nexport interface ToggleGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {\n  /** Current selected value */\n  value: string;\n  /** Callback when selection changes */\n  onChange?: (value: string) => void;\n  /** Alias for onChange (Radix convention) */\n  onValueChange?: (value: string) => void;\n  /** Toggle items */\n  children: React.ReactNode;\n  /** Visual variant.\n   * @default \"default\"\n   * @see https://usefragments.com/components/togglegroup#variants */\n  variant?: 'default' | 'pills' | 'outline';\n  /** Size.\n   * @default \"md\" */\n  size?: 'sm' | 'md' | 'lg';\n  /** Gap between items (for pills/outline variants) */\n  gap?: 'none' | 'xs' | 'sm';\n}\n\nexport interface ToggleGroupItemProps extends Omit<React.HTMLAttributes<HTMLButtonElement>, 'onClick'> {\n  /** Value for this item */\n  value: string;\n  /** Item content */\n  children: React.ReactNode;\n  /** Disabled state */\n  disabled?: boolean;\n}\n\n// ============================================\n// Context\n// ============================================\n\ninterface ToggleGroupContextValue {\n  value: string;\n  onChange: (value: string) => void;\n  variant: 'default' | 'pills' | 'outline';\n  size: 'sm' | 'md' | 'lg';\n  hasFocusableSelection: boolean;\n  firstEnabledValue: string | null;\n}\n\nconst ToggleGroupContext = React.createContext<ToggleGroupContextValue | null>(\n  null\n);\n\nfunction useToggleGroupContext() {\n  const context = React.useContext(ToggleGroupContext);\n  if (!context) {\n    throw new Error('ToggleGroup.Item must be used within a ToggleGroup');\n  }\n  return context;\n}\n\n// ============================================\n// Components\n// ============================================\n\nfunction ToggleGroupRoot({\n  value,\n  onChange,\n  onValueChange,\n  children,\n  variant = 'default',\n  size = 'md',\n  gap = 'xs',\n  className,\n  ...htmlProps\n}: ToggleGroupProps) {\n  const resolvedOnChange = onChange ?? onValueChange ?? (() => {});\n  const classes = [\n    styles.group,\n    styles[variant],\n    styles[`size-${size}`],\n    gap !== 'none' && styles[`gap-${gap}`],\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const childItems = React.Children.toArray(children).filter(\n    (child): child is React.ReactElement<ToggleGroupItemProps> =>\n      React.isValidElement<ToggleGroupItemProps>(child)\n  );\n  const firstEnabledValue = childItems.find((item) => !item.props.disabled)?.props.value ?? null;\n  const hasFocusableSelection = childItems.some(\n    (item) => !item.props.disabled && item.props.value === value\n  );\n\n  const contextValue: ToggleGroupContextValue = {\n    value,\n    onChange: resolvedOnChange,\n    variant,\n    size,\n    hasFocusableSelection,\n    firstEnabledValue,\n  };\n\n  return (\n    <ToggleGroupContext.Provider value={contextValue}>\n      <div {...htmlProps} role=\"radiogroup\" className={classes}>\n        {children}\n      </div>\n    </ToggleGroupContext.Provider>\n  );\n}\n\nfunction ToggleGroupItem({\n  value,\n  children,\n  disabled = false,\n  className,\n  onKeyDown,\n  ...htmlProps\n}: ToggleGroupItemProps) {\n  const context = useToggleGroupContext();\n  const isSelected = context.value === value;\n  const isTabbableSelected = isSelected && !disabled;\n  const isFirstFallback = !context.hasFocusableSelection && !disabled && context.firstEnabledValue === value;\n\n  const classes = [\n    styles.item,\n    isSelected && styles.selected,\n    disabled && styles.disabled,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const handleClick = () => {\n    if (!disabled) {\n      context.onChange(value);\n    }\n  };\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {\n    onKeyDown?.(event);\n    if (event.defaultPrevented) return;\n\n    if (disabled) return;\n\n    const key = event.key;\n    const supportsRoving =\n      key === 'ArrowRight' ||\n      key === 'ArrowDown' ||\n      key === 'ArrowLeft' ||\n      key === 'ArrowUp' ||\n      key === 'Home' ||\n      key === 'End';\n\n    if (!supportsRoving) return;\n\n    event.preventDefault();\n\n    const group = event.currentTarget.closest('[role=\"radiogroup\"]');\n    if (!group) return;\n\n    const radios = Array.from(\n      group.querySelectorAll<HTMLButtonElement>('[role=\"radio\"]:not(:disabled)')\n    );\n\n    if (radios.length === 0) return;\n\n    const currentIndex = radios.indexOf(event.currentTarget);\n    const fallbackIndex = currentIndex >= 0 ? currentIndex : 0;\n    let nextIndex = fallbackIndex;\n\n    if (key === 'ArrowRight' || key === 'ArrowDown') {\n      nextIndex = (fallbackIndex + 1) % radios.length;\n    } else if (key === 'ArrowLeft' || key === 'ArrowUp') {\n      nextIndex = (fallbackIndex - 1 + radios.length) % radios.length;\n    } else if (key === 'Home') {\n      nextIndex = 0;\n    } else if (key === 'End') {\n      nextIndex = radios.length - 1;\n    }\n\n    const target = radios[nextIndex];\n    const nextValue = target.dataset.value;\n    if (nextValue != null) {\n      context.onChange(nextValue);\n    }\n    target.focus();\n  };\n\n  return (\n    <button\n      {...htmlProps}\n      type=\"button\"\n      data-value={value}\n      role=\"radio\"\n      aria-checked={isSelected}\n      tabIndex={isTabbableSelected || isFirstFallback ? 0 : -1}\n      disabled={disabled}\n      onClick={handleClick}\n      onKeyDown={handleKeyDown}\n      className={classes}\n    >\n      {children}\n    </button>\n  );\n}\n\n// ============================================\n// Export compound component\n// ============================================\n\nexport const ToggleGroup = Object.assign(ToggleGroupRoot, {\n  Item: ToggleGroupItem,\n});\n\nexport { ToggleGroupRoot, ToggleGroupItem, useToggleGroupContext };\n"],"names":["React","styles","jsx"],"mappings":"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"}
+{"version":3,"file":"index.cjs","sources":["../../../src/components/ToggleGroup/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport styles from './ToggleGroup.module.scss';\n\n// ============================================\n// Types\n// ============================================\n\n/**\n * A group of toggle buttons where only one can be selected at a time.\n * @see https://usefragments.com/components/togglegroup\n */\nexport interface ToggleGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {\n  /** Current selected value */\n  value?: string;\n  /** Default selected value (uncontrolled) */\n  defaultValue?: string;\n  /** Callback when selection changes */\n  onChange?: (value: string) => void;\n  /** Alias for onChange (Radix convention) */\n  onValueChange?: (value: string) => void;\n  /** Toggle items */\n  children: React.ReactNode;\n  /** Visual variant.\n   * @default \"default\"\n   * @see https://usefragments.com/components/togglegroup#variants */\n  variant?: 'default' | 'pills' | 'outline' | 'outlined';\n  /** Size.\n   * @default \"md\" */\n  size?: 'sm' | 'md' | 'lg';\n  /** Gap between items (for pills/outline variants) */\n  gap?: 'none' | 'xs' | 'sm';\n  /** Selection mode for this control. Currently only single-select is supported.\n   * @default \"single\" */\n  selectionMode?: 'single';\n}\n\nexport interface ToggleGroupItemProps extends Omit<React.HTMLAttributes<HTMLButtonElement>, 'onClick'> {\n  /** Value for this item */\n  value: string;\n  /** Item content */\n  children: React.ReactNode;\n  /** Disabled state */\n  disabled?: boolean;\n}\n\n// ============================================\n// Context\n// ============================================\n\ninterface ToggleGroupContextValue {\n  value: string;\n  onChange: (value: string) => void;\n  variant: 'default' | 'pills' | 'outline';\n  size: 'sm' | 'md' | 'lg';\n  hasFocusableSelection: boolean;\n  firstEnabledValue: string | null;\n}\n\nconst ToggleGroupContext = React.createContext<ToggleGroupContextValue | null>(\n  null\n);\n\nfunction useToggleGroupContext() {\n  const context = React.useContext(ToggleGroupContext);\n  if (!context) {\n    throw new Error('ToggleGroup.Item must be used within a ToggleGroup');\n  }\n  return context;\n}\n\n// ============================================\n// Components\n// ============================================\n\nfunction ToggleGroupRoot({\n  value,\n  defaultValue,\n  onChange,\n  onValueChange,\n  children,\n  variant = 'default',\n  size = 'md',\n  gap = 'xs',\n  selectionMode = 'single',\n  className,\n  ...htmlProps\n}: ToggleGroupProps) {\n  const normalizedVariant = variant === 'outlined' ? 'outline' : variant;\n  const [internalValue, setInternalValue] = React.useState(defaultValue ?? '');\n  const isControlled = value !== undefined;\n  const currentValue = isControlled ? value ?? '' : internalValue;\n  const emitChange = React.useCallback((nextValue: string) => {\n    if (!isControlled) {\n      setInternalValue(nextValue);\n    }\n    (onChange ?? onValueChange)?.(nextValue);\n  }, [isControlled, onChange, onValueChange]);\n  const classes = [\n    styles.group,\n    styles[normalizedVariant],\n    styles[`size-${size}`],\n    gap !== 'none' && styles[`gap-${gap}`],\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const childItems = React.Children.toArray(children).filter(\n    (child): child is React.ReactElement<ToggleGroupItemProps> =>\n      React.isValidElement<ToggleGroupItemProps>(child)\n  );\n  const firstEnabledValue = childItems.find((item) => !item.props.disabled)?.props.value ?? null;\n  const hasFocusableSelection = childItems.some(\n    (item) => !item.props.disabled && item.props.value === currentValue\n  );\n\n  const contextValue: ToggleGroupContextValue = {\n    value: currentValue,\n    onChange: emitChange,\n    variant: normalizedVariant,\n    size,\n    hasFocusableSelection,\n    firstEnabledValue,\n  };\n\n  return (\n    <ToggleGroupContext.Provider value={contextValue}>\n      <div\n        {...htmlProps}\n        role={selectionMode === 'single' ? 'radiogroup' : 'radiogroup'}\n        className={classes}\n      >\n        {children}\n      </div>\n    </ToggleGroupContext.Provider>\n  );\n}\n\nfunction ToggleGroupItem({\n  value,\n  children,\n  disabled = false,\n  className,\n  onKeyDown,\n  ...htmlProps\n}: ToggleGroupItemProps) {\n  const context = useToggleGroupContext();\n  const isSelected = context.value === value;\n  const isTabbableSelected = isSelected && !disabled;\n  const isFirstFallback = !context.hasFocusableSelection && !disabled && context.firstEnabledValue === value;\n\n  const classes = [\n    styles.item,\n    isSelected && styles.selected,\n    disabled && styles.disabled,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const handleClick = () => {\n    if (!disabled) {\n      context.onChange(value);\n    }\n  };\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {\n    onKeyDown?.(event);\n    if (event.defaultPrevented) return;\n\n    if (disabled) return;\n\n    const key = event.key;\n    const supportsRoving =\n      key === 'ArrowRight' ||\n      key === 'ArrowDown' ||\n      key === 'ArrowLeft' ||\n      key === 'ArrowUp' ||\n      key === 'Home' ||\n      key === 'End';\n\n    if (!supportsRoving) return;\n\n    event.preventDefault();\n\n    const group = event.currentTarget.closest('[role=\"radiogroup\"]');\n    if (!group) return;\n\n    const radios = Array.from(\n      group.querySelectorAll<HTMLButtonElement>('[role=\"radio\"]:not(:disabled)')\n    );\n\n    if (radios.length === 0) return;\n\n    const currentIndex = radios.indexOf(event.currentTarget);\n    const fallbackIndex = currentIndex >= 0 ? currentIndex : 0;\n    let nextIndex = fallbackIndex;\n\n    if (key === 'ArrowRight' || key === 'ArrowDown') {\n      nextIndex = (fallbackIndex + 1) % radios.length;\n    } else if (key === 'ArrowLeft' || key === 'ArrowUp') {\n      nextIndex = (fallbackIndex - 1 + radios.length) % radios.length;\n    } else if (key === 'Home') {\n      nextIndex = 0;\n    } else if (key === 'End') {\n      nextIndex = radios.length - 1;\n    }\n\n    const target = radios[nextIndex];\n    const nextValue = target.dataset.value;\n    if (nextValue != null) {\n      context.onChange(nextValue);\n    }\n    target.focus();\n  };\n\n  return (\n    <button\n      {...htmlProps}\n      type=\"button\"\n      data-value={value}\n      role=\"radio\"\n      aria-checked={isSelected}\n      tabIndex={isTabbableSelected || isFirstFallback ? 0 : -1}\n      disabled={disabled}\n      onClick={handleClick}\n      onKeyDown={handleKeyDown}\n      className={classes}\n    >\n      {children}\n    </button>\n  );\n}\n\n// ============================================\n// Export compound component\n// ============================================\n\nexport const ToggleGroup = Object.assign(ToggleGroupRoot, {\n  Item: ToggleGroupItem,\n});\n\nexport { ToggleGroupRoot, ToggleGroupItem, useToggleGroupContext };\n"],"names":["React","_a","styles","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AA4DA,MAAM,qBAAqBA,iBAAM;AAAA,EAC/B;AACF;AAEA,SAAS,wBAAwB;AAC/B,QAAM,UAAUA,iBAAM,WAAW,kBAAkB;AACnD,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,oDAAoD;AAAA,EACtE;AACA,SAAO;AACT;AAMA,SAAS,gBAAgB;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,OAAO;AAAA,EACP,MAAM;AAAA,EACN,gBAAgB;AAAA,EAChB;AAAA,EACA,GAAG;AACL,GAAqB;;AACnB,QAAM,oBAAoB,YAAY,aAAa,YAAY;AAC/D,QAAM,CAAC,eAAe,gBAAgB,IAAIA,iBAAM,SAAS,gBAAgB,EAAE;AAC3E,QAAM,eAAe,UAAU;AAC/B,QAAM,eAAe,eAAe,SAAS,KAAK;AAClD,QAAM,aAAaA,iBAAM,YAAY,CAAC,cAAsB;;AAC1D,QAAI,CAAC,cAAc;AACjB,uBAAiB,SAAS;AAAA,IAC5B;AACA,KAACC,MAAA,YAAY,kBAAZ,gBAAAA,IAA6B;AAAA,EAChC,GAAG,CAAC,cAAc,UAAU,aAAa,CAAC;AAC1C,QAAM,UAAU;AAAA,IACdC,mBAAAA,QAAO;AAAA,IACPA,mBAAAA,QAAO,iBAAiB;AAAA,IACxBA,mBAAAA,QAAO,QAAQ,IAAI,EAAE;AAAA,IACrB,QAAQ,UAAUA,mBAAAA,QAAO,OAAO,GAAG,EAAE;AAAA,IACrC;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,QAAM,aAAaF,iBAAM,SAAS,QAAQ,QAAQ,EAAE;AAAA,IAClD,CAAC,UACCA,iBAAM,eAAqC,KAAK;AAAA,EAAA;AAEpD,QAAM,sBAAoB,gBAAW,KAAK,CAAC,SAAS,CAAC,KAAK,MAAM,QAAQ,MAA9C,mBAAiD,MAAM,UAAS;AAC1F,QAAM,wBAAwB,WAAW;AAAA,IACvC,CAAC,SAAS,CAAC,KAAK,MAAM,YAAY,KAAK,MAAM,UAAU;AAAA,EAAA;AAGzD,QAAM,eAAwC;AAAA,IAC5C,OAAO;AAAA,IACP,UAAU;AAAA,IACV,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAGF,SACEG,2BAAAA,IAAC,mBAAmB,UAAnB,EAA4B,OAAO,cAClC,UAAAA,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAG;AAAA,MACJ,MAAM,kBAAkB,WAAW,eAAe;AAAA,MAClD,WAAW;AAAA,MAEV;AAAA,IAAA;AAAA,EAAA,GAEL;AAEJ;AAEA,SAAS,gBAAgB;AAAA,EACvB;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAyB;AACvB,QAAM,UAAU,sBAAA;AAChB,QAAM,aAAa,QAAQ,UAAU;AACrC,QAAM,qBAAqB,cAAc,CAAC;AAC1C,QAAM,kBAAkB,CAAC,QAAQ,yBAAyB,CAAC,YAAY,QAAQ,sBAAsB;AAErG,QAAM,UAAU;AAAA,IACdD,mBAAAA,QAAO;AAAA,IACP,cAAcA,mBAAAA,QAAO;AAAA,IACrB,YAAYA,mBAAAA,QAAO;AAAA,IACnB;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,QAAM,cAAc,MAAM;AACxB,QAAI,CAAC,UAAU;AACb,cAAQ,SAAS,KAAK;AAAA,IACxB;AAAA,EACF;AAEA,QAAM,gBAAgB,CAAC,UAAkD;AACvE,2CAAY;AACZ,QAAI,MAAM,iBAAkB;AAE5B,QAAI,SAAU;AAEd,UAAM,MAAM,MAAM;AAClB,UAAM,iBACJ,QAAQ,gBACR,QAAQ,eACR,QAAQ,eACR,QAAQ,aACR,QAAQ,UACR,QAAQ;AAEV,QAAI,CAAC,eAAgB;AAErB,UAAM,eAAA;AAEN,UAAM,QAAQ,MAAM,cAAc,QAAQ,qBAAqB;AAC/D,QAAI,CAAC,MAAO;AAEZ,UAAM,SAAS,MAAM;AAAA,MACnB,MAAM,iBAAoC,+BAA+B;AAAA,IAAA;AAG3E,QAAI,OAAO,WAAW,EAAG;AAEzB,UAAM,eAAe,OAAO,QAAQ,MAAM,aAAa;AACvD,UAAM,gBAAgB,gBAAgB,IAAI,eAAe;AACzD,QAAI,YAAY;AAEhB,QAAI,QAAQ,gBAAgB,QAAQ,aAAa;AAC/C,mBAAa,gBAAgB,KAAK,OAAO;AAAA,IAC3C,WAAW,QAAQ,eAAe,QAAQ,WAAW;AACnD,mBAAa,gBAAgB,IAAI,OAAO,UAAU,OAAO;AAAA,IAC3D,WAAW,QAAQ,QAAQ;AACzB,kBAAY;AAAA,IACd,WAAW,QAAQ,OAAO;AACxB,kBAAY,OAAO,SAAS;AAAA,IAC9B;AAEA,UAAM,SAAS,OAAO,SAAS;AAC/B,UAAM,YAAY,OAAO,QAAQ;AACjC,QAAI,aAAa,MAAM;AACrB,cAAQ,SAAS,SAAS;AAAA,IAC5B;AACA,WAAO,MAAA;AAAA,EACT;AAEA,SACEC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAG;AAAA,MACJ,MAAK;AAAA,MACL,cAAY;AAAA,MACZ,MAAK;AAAA,MACL,gBAAc;AAAA,MACd,UAAU,sBAAsB,kBAAkB,IAAI;AAAA,MACtD;AAAA,MACA,SAAS;AAAA,MACT,WAAW;AAAA,MACX,WAAW;AAAA,MAEV;AAAA,IAAA;AAAA,EAAA;AAGP;AAMO,MAAM,cAAc,OAAO,OAAO,iBAAiB;AAAA,EACxD,MAAM;AACR,CAAC;;;;;"}

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

@@ -5,7 +5,9 @@ import * as React from 'react';
  */
 export interface ToggleGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
     /** Current selected value */
-    value: string;
+    value?: string;
+    /** Default selected value (uncontrolled) */
+    defaultValue?: string;
     /** Callback when selection changes */
     onChange?: (value: string) => void;
     /** Alias for onChange (Radix convention) */
@@ -15,12 +17,15 @@ export interface ToggleGroupProps extends Omit<React.HTMLAttributes<HTMLDivEleme
     /** Visual variant.
      * @default "default"
      * @see https://usefragments.com/components/togglegroup#variants */
-    variant?: 'default' | 'pills' | 'outline';
+    variant?: 'default' | 'pills' | 'outline' | 'outlined';
     /** Size.
      * @default "md" */
     size?: 'sm' | 'md' | 'lg';
     /** Gap between items (for pills/outline variants) */
     gap?: 'none' | 'xs' | 'sm';
+    /** Selection mode for this control. Currently only single-select is supported.
+     * @default "single" */
+    selectionMode?: 'single';
 }
 export interface ToggleGroupItemProps extends Omit<React.HTMLAttributes<HTMLButtonElement>, 'onClick'> {
     /** Value for this item */
@@ -39,7 +44,7 @@ interface ToggleGroupContextValue {
     firstEnabledValue: string | null;
 }
 declare function useToggleGroupContext(): ToggleGroupContextValue;
-declare function ToggleGroupRoot({ value, onChange, onValueChange, children, variant, size, gap, className, ...htmlProps }: ToggleGroupProps): import("react/jsx-runtime").JSX.Element;
+declare function ToggleGroupRoot({ value, defaultValue, onChange, onValueChange, children, variant, size, gap, selectionMode, className, ...htmlProps }: ToggleGroupProps): import("react/jsx-runtime").JSX.Element;
 declare function ToggleGroupItem({ value, children, disabled, className, onKeyDown, ...htmlProps }: ToggleGroupItemProps): import("react/jsx-runtime").JSX.Element;
 export declare const ToggleGroup: typeof ToggleGroupRoot & {
     Item: typeof ToggleGroupItem;

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;AAO/B;;;GAGG;AACH,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IAC9F,6BAA6B;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,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,CAAC;IAC1C;uBACmB;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,qDAAqD;IACrD,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,CAAC;CAC5B;AAED,MAAM,WAAW,oBAAqB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC,EAAE,SAAS,CAAC;IACpG,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;AAMD,iBAAS,qBAAqB,4BAM7B;AAMD,iBAAS,eAAe,CAAC,EACvB,KAAK,EACL,QAAQ,EACR,aAAa,EACb,QAAQ,EACR,OAAmB,EACnB,IAAW,EACX,GAAU,EACV,SAAS,EACT,GAAG,SAAS,EACb,EAAE,gBAAgB,2CAqClB;AAED,iBAAS,eAAe,CAAC,EACvB,KAAK,EACL,QAAQ,EACR,QAAgB,EAChB,SAAS,EACT,SAAS,EACT,GAAG,SAAS,EACb,EAAE,oBAAoB,2CAuFtB;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;AAO/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,qDAAqD;IACrD,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,CAAC;IAC3B;2BACuB;IACvB,aAAa,CAAC,EAAE,QAAQ,CAAC;CAC1B;AAED,MAAM,WAAW,oBAAqB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC,EAAE,SAAS,CAAC;IACpG,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;AAMD,iBAAS,qBAAqB,4BAM7B;AAMD,iBAAS,eAAe,CAAC,EACvB,KAAK,EACL,YAAY,EACZ,QAAQ,EACR,aAAa,EACb,QAAQ,EACR,OAAmB,EACnB,IAAW,EACX,GAAU,EACV,aAAwB,EACxB,SAAS,EACT,GAAG,SAAS,EACb,EAAE,gBAAgB,2CAkDlB;AAED,iBAAS,eAAe,CAAC,EACvB,KAAK,EACL,QAAQ,EACR,QAAgB,EAChB,SAAS,EACT,SAAS,EACT,GAAG,SAAS,EACb,EAAE,oBAAoB,2CAuFtB;AAMD,eAAO,MAAM,WAAW;;CAEtB,CAAC;AAEH,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,qBAAqB,EAAE,CAAC"}

package/dist/components/ToggleGroup/index.js

@@ -13,21 +13,32 @@ function useToggleGroupContext() {
 }
 function ToggleGroupRoot({
   value,
+  defaultValue,
   onChange,
   onValueChange,
   children,
   variant = "default",
   size = "md",
   gap = "xs",
+  selectionMode = "single",
   className,
   ...htmlProps
 }) {
   var _a;
-  const resolvedOnChange = onChange ?? onValueChange ?? (() => {
-  });
+  const normalizedVariant = variant === "outlined" ? "outline" : variant;
+  const [internalValue, setInternalValue] = React.useState(defaultValue ?? "");
+  const isControlled = value !== void 0;
+  const currentValue = isControlled ? value ?? "" : internalValue;
+  const emitChange = React.useCallback((nextValue) => {
+    var _a2;
+    if (!isControlled) {
+      setInternalValue(nextValue);
+    }
+    (_a2 = onChange ?? onValueChange) == null ? void 0 : _a2(nextValue);
+  }, [isControlled, onChange, onValueChange]);
   const classes = [
     styles.group,
-    styles[variant],
+    styles[normalizedVariant],
     styles[`size-${size}`],
     gap !== "none" && styles[`gap-${gap}`],
     className
@@ -37,17 +48,25 @@ function ToggleGroupRoot({
   );
   const firstEnabledValue = ((_a = childItems.find((item) => !item.props.disabled)) == null ? void 0 : _a.props.value) ?? null;
   const hasFocusableSelection = childItems.some(
-    (item) => !item.props.disabled && item.props.value === value
+    (item) => !item.props.disabled && item.props.value === currentValue
   );
   const contextValue = {
-    value,
-    onChange: resolvedOnChange,
-    variant,
+    value: currentValue,
+    onChange: emitChange,
+    variant: normalizedVariant,
     size,
     hasFocusableSelection,
     firstEnabledValue
   };
-  return /* @__PURE__ */ jsx(ToggleGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("div", { ...htmlProps, role: "radiogroup", className: classes, children }) });
+  return /* @__PURE__ */ jsx(ToggleGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...htmlProps,
+      role: selectionMode === "single" ? "radiogroup" : "radiogroup",
+      className: classes,
+      children
+    }
+  ) });
 }
 function ToggleGroupItem({
   value,

package/dist/components/ToggleGroup/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/ToggleGroup/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport styles from './ToggleGroup.module.scss';\n\n// ============================================\n// Types\n// ============================================\n\n/**\n * A group of toggle buttons where only one can be selected at a time.\n * @see https://usefragments.com/components/togglegroup\n */\nexport interface ToggleGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {\n  /** Current selected value */\n  value: string;\n  /** Callback when selection changes */\n  onChange?: (value: string) => void;\n  /** Alias for onChange (Radix convention) */\n  onValueChange?: (value: string) => void;\n  /** Toggle items */\n  children: React.ReactNode;\n  /** Visual variant.\n   * @default \"default\"\n   * @see https://usefragments.com/components/togglegroup#variants */\n  variant?: 'default' | 'pills' | 'outline';\n  /** Size.\n   * @default \"md\" */\n  size?: 'sm' | 'md' | 'lg';\n  /** Gap between items (for pills/outline variants) */\n  gap?: 'none' | 'xs' | 'sm';\n}\n\nexport interface ToggleGroupItemProps extends Omit<React.HTMLAttributes<HTMLButtonElement>, 'onClick'> {\n  /** Value for this item */\n  value: string;\n  /** Item content */\n  children: React.ReactNode;\n  /** Disabled state */\n  disabled?: boolean;\n}\n\n// ============================================\n// Context\n// ============================================\n\ninterface ToggleGroupContextValue {\n  value: string;\n  onChange: (value: string) => void;\n  variant: 'default' | 'pills' | 'outline';\n  size: 'sm' | 'md' | 'lg';\n  hasFocusableSelection: boolean;\n  firstEnabledValue: string | null;\n}\n\nconst ToggleGroupContext = React.createContext<ToggleGroupContextValue | null>(\n  null\n);\n\nfunction useToggleGroupContext() {\n  const context = React.useContext(ToggleGroupContext);\n  if (!context) {\n    throw new Error('ToggleGroup.Item must be used within a ToggleGroup');\n  }\n  return context;\n}\n\n// ============================================\n// Components\n// ============================================\n\nfunction ToggleGroupRoot({\n  value,\n  onChange,\n  onValueChange,\n  children,\n  variant = 'default',\n  size = 'md',\n  gap = 'xs',\n  className,\n  ...htmlProps\n}: ToggleGroupProps) {\n  const resolvedOnChange = onChange ?? onValueChange ?? (() => {});\n  const classes = [\n    styles.group,\n    styles[variant],\n    styles[`size-${size}`],\n    gap !== 'none' && styles[`gap-${gap}`],\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const childItems = React.Children.toArray(children).filter(\n    (child): child is React.ReactElement<ToggleGroupItemProps> =>\n      React.isValidElement<ToggleGroupItemProps>(child)\n  );\n  const firstEnabledValue = childItems.find((item) => !item.props.disabled)?.props.value ?? null;\n  const hasFocusableSelection = childItems.some(\n    (item) => !item.props.disabled && item.props.value === value\n  );\n\n  const contextValue: ToggleGroupContextValue = {\n    value,\n    onChange: resolvedOnChange,\n    variant,\n    size,\n    hasFocusableSelection,\n    firstEnabledValue,\n  };\n\n  return (\n    <ToggleGroupContext.Provider value={contextValue}>\n      <div {...htmlProps} role=\"radiogroup\" className={classes}>\n        {children}\n      </div>\n    </ToggleGroupContext.Provider>\n  );\n}\n\nfunction ToggleGroupItem({\n  value,\n  children,\n  disabled = false,\n  className,\n  onKeyDown,\n  ...htmlProps\n}: ToggleGroupItemProps) {\n  const context = useToggleGroupContext();\n  const isSelected = context.value === value;\n  const isTabbableSelected = isSelected && !disabled;\n  const isFirstFallback = !context.hasFocusableSelection && !disabled && context.firstEnabledValue === value;\n\n  const classes = [\n    styles.item,\n    isSelected && styles.selected,\n    disabled && styles.disabled,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const handleClick = () => {\n    if (!disabled) {\n      context.onChange(value);\n    }\n  };\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {\n    onKeyDown?.(event);\n    if (event.defaultPrevented) return;\n\n    if (disabled) return;\n\n    const key = event.key;\n    const supportsRoving =\n      key === 'ArrowRight' ||\n      key === 'ArrowDown' ||\n      key === 'ArrowLeft' ||\n      key === 'ArrowUp' ||\n      key === 'Home' ||\n      key === 'End';\n\n    if (!supportsRoving) return;\n\n    event.preventDefault();\n\n    const group = event.currentTarget.closest('[role=\"radiogroup\"]');\n    if (!group) return;\n\n    const radios = Array.from(\n      group.querySelectorAll<HTMLButtonElement>('[role=\"radio\"]:not(:disabled)')\n    );\n\n    if (radios.length === 0) return;\n\n    const currentIndex = radios.indexOf(event.currentTarget);\n    const fallbackIndex = currentIndex >= 0 ? currentIndex : 0;\n    let nextIndex = fallbackIndex;\n\n    if (key === 'ArrowRight' || key === 'ArrowDown') {\n      nextIndex = (fallbackIndex + 1) % radios.length;\n    } else if (key === 'ArrowLeft' || key === 'ArrowUp') {\n      nextIndex = (fallbackIndex - 1 + radios.length) % radios.length;\n    } else if (key === 'Home') {\n      nextIndex = 0;\n    } else if (key === 'End') {\n      nextIndex = radios.length - 1;\n    }\n\n    const target = radios[nextIndex];\n    const nextValue = target.dataset.value;\n    if (nextValue != null) {\n      context.onChange(nextValue);\n    }\n    target.focus();\n  };\n\n  return (\n    <button\n      {...htmlProps}\n      type=\"button\"\n      data-value={value}\n      role=\"radio\"\n      aria-checked={isSelected}\n      tabIndex={isTabbableSelected || isFirstFallback ? 0 : -1}\n      disabled={disabled}\n      onClick={handleClick}\n      onKeyDown={handleKeyDown}\n      className={classes}\n    >\n      {children}\n    </button>\n  );\n}\n\n// ============================================\n// Export compound component\n// ============================================\n\nexport const ToggleGroup = Object.assign(ToggleGroupRoot, {\n  Item: ToggleGroupItem,\n});\n\nexport { ToggleGroupRoot, ToggleGroupItem, useToggleGroupContext };\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/ToggleGroup/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport styles from './ToggleGroup.module.scss';\n\n// ============================================\n// Types\n// ============================================\n\n/**\n * A group of toggle buttons where only one can be selected at a time.\n * @see https://usefragments.com/components/togglegroup\n */\nexport interface ToggleGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {\n  /** Current selected value */\n  value?: string;\n  /** Default selected value (uncontrolled) */\n  defaultValue?: string;\n  /** Callback when selection changes */\n  onChange?: (value: string) => void;\n  /** Alias for onChange (Radix convention) */\n  onValueChange?: (value: string) => void;\n  /** Toggle items */\n  children: React.ReactNode;\n  /** Visual variant.\n   * @default \"default\"\n   * @see https://usefragments.com/components/togglegroup#variants */\n  variant?: 'default' | 'pills' | 'outline' | 'outlined';\n  /** Size.\n   * @default \"md\" */\n  size?: 'sm' | 'md' | 'lg';\n  /** Gap between items (for pills/outline variants) */\n  gap?: 'none' | 'xs' | 'sm';\n  /** Selection mode for this control. Currently only single-select is supported.\n   * @default \"single\" */\n  selectionMode?: 'single';\n}\n\nexport interface ToggleGroupItemProps extends Omit<React.HTMLAttributes<HTMLButtonElement>, 'onClick'> {\n  /** Value for this item */\n  value: string;\n  /** Item content */\n  children: React.ReactNode;\n  /** Disabled state */\n  disabled?: boolean;\n}\n\n// ============================================\n// Context\n// ============================================\n\ninterface ToggleGroupContextValue {\n  value: string;\n  onChange: (value: string) => void;\n  variant: 'default' | 'pills' | 'outline';\n  size: 'sm' | 'md' | 'lg';\n  hasFocusableSelection: boolean;\n  firstEnabledValue: string | null;\n}\n\nconst ToggleGroupContext = React.createContext<ToggleGroupContextValue | null>(\n  null\n);\n\nfunction useToggleGroupContext() {\n  const context = React.useContext(ToggleGroupContext);\n  if (!context) {\n    throw new Error('ToggleGroup.Item must be used within a ToggleGroup');\n  }\n  return context;\n}\n\n// ============================================\n// Components\n// ============================================\n\nfunction ToggleGroupRoot({\n  value,\n  defaultValue,\n  onChange,\n  onValueChange,\n  children,\n  variant = 'default',\n  size = 'md',\n  gap = 'xs',\n  selectionMode = 'single',\n  className,\n  ...htmlProps\n}: ToggleGroupProps) {\n  const normalizedVariant = variant === 'outlined' ? 'outline' : variant;\n  const [internalValue, setInternalValue] = React.useState(defaultValue ?? '');\n  const isControlled = value !== undefined;\n  const currentValue = isControlled ? value ?? '' : internalValue;\n  const emitChange = React.useCallback((nextValue: string) => {\n    if (!isControlled) {\n      setInternalValue(nextValue);\n    }\n    (onChange ?? onValueChange)?.(nextValue);\n  }, [isControlled, onChange, onValueChange]);\n  const classes = [\n    styles.group,\n    styles[normalizedVariant],\n    styles[`size-${size}`],\n    gap !== 'none' && styles[`gap-${gap}`],\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const childItems = React.Children.toArray(children).filter(\n    (child): child is React.ReactElement<ToggleGroupItemProps> =>\n      React.isValidElement<ToggleGroupItemProps>(child)\n  );\n  const firstEnabledValue = childItems.find((item) => !item.props.disabled)?.props.value ?? null;\n  const hasFocusableSelection = childItems.some(\n    (item) => !item.props.disabled && item.props.value === currentValue\n  );\n\n  const contextValue: ToggleGroupContextValue = {\n    value: currentValue,\n    onChange: emitChange,\n    variant: normalizedVariant,\n    size,\n    hasFocusableSelection,\n    firstEnabledValue,\n  };\n\n  return (\n    <ToggleGroupContext.Provider value={contextValue}>\n      <div\n        {...htmlProps}\n        role={selectionMode === 'single' ? 'radiogroup' : 'radiogroup'}\n        className={classes}\n      >\n        {children}\n      </div>\n    </ToggleGroupContext.Provider>\n  );\n}\n\nfunction ToggleGroupItem({\n  value,\n  children,\n  disabled = false,\n  className,\n  onKeyDown,\n  ...htmlProps\n}: ToggleGroupItemProps) {\n  const context = useToggleGroupContext();\n  const isSelected = context.value === value;\n  const isTabbableSelected = isSelected && !disabled;\n  const isFirstFallback = !context.hasFocusableSelection && !disabled && context.firstEnabledValue === value;\n\n  const classes = [\n    styles.item,\n    isSelected && styles.selected,\n    disabled && styles.disabled,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const handleClick = () => {\n    if (!disabled) {\n      context.onChange(value);\n    }\n  };\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {\n    onKeyDown?.(event);\n    if (event.defaultPrevented) return;\n\n    if (disabled) return;\n\n    const key = event.key;\n    const supportsRoving =\n      key === 'ArrowRight' ||\n      key === 'ArrowDown' ||\n      key === 'ArrowLeft' ||\n      key === 'ArrowUp' ||\n      key === 'Home' ||\n      key === 'End';\n\n    if (!supportsRoving) return;\n\n    event.preventDefault();\n\n    const group = event.currentTarget.closest('[role=\"radiogroup\"]');\n    if (!group) return;\n\n    const radios = Array.from(\n      group.querySelectorAll<HTMLButtonElement>('[role=\"radio\"]:not(:disabled)')\n    );\n\n    if (radios.length === 0) return;\n\n    const currentIndex = radios.indexOf(event.currentTarget);\n    const fallbackIndex = currentIndex >= 0 ? currentIndex : 0;\n    let nextIndex = fallbackIndex;\n\n    if (key === 'ArrowRight' || key === 'ArrowDown') {\n      nextIndex = (fallbackIndex + 1) % radios.length;\n    } else if (key === 'ArrowLeft' || key === 'ArrowUp') {\n      nextIndex = (fallbackIndex - 1 + radios.length) % radios.length;\n    } else if (key === 'Home') {\n      nextIndex = 0;\n    } else if (key === 'End') {\n      nextIndex = radios.length - 1;\n    }\n\n    const target = radios[nextIndex];\n    const nextValue = target.dataset.value;\n    if (nextValue != null) {\n      context.onChange(nextValue);\n    }\n    target.focus();\n  };\n\n  return (\n    <button\n      {...htmlProps}\n      type=\"button\"\n      data-value={value}\n      role=\"radio\"\n      aria-checked={isSelected}\n      tabIndex={isTabbableSelected || isFirstFallback ? 0 : -1}\n      disabled={disabled}\n      onClick={handleClick}\n      onKeyDown={handleKeyDown}\n      className={classes}\n    >\n      {children}\n    </button>\n  );\n}\n\n// ============================================\n// Export compound component\n// ============================================\n\nexport const ToggleGroup = Object.assign(ToggleGroupRoot, {\n  Item: ToggleGroupItem,\n});\n\nexport { ToggleGroupRoot, ToggleGroupItem, useToggleGroupContext };\n"],"names":["_a"],"mappings":"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"}

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_1513t_1";
-const popup = "_popup_1513t_6";
-const arrow = "_arrow_1513t_43";
+const positioner = "_positioner_6b9nf_1";
+const popup = "_popup_6b9nf_6";
+const arrow = "_arrow_6b9nf_43";
 const styles = {
   positioner,
   popup,

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

@@ -1,6 +1,6 @@
-const positioner = "_positioner_1513t_1";
-const popup = "_popup_1513t_6";
-const arrow = "_arrow_1513t_43";
+const positioner = "_positioner_6b9nf_1";
+const popup = "_popup_6b9nf_6";
+const arrow = "_arrow_6b9nf_43";
 const styles = {
   positioner,
   popup,

package/dist/components/Tooltip/index.cjs

@@ -35,7 +35,9 @@ function TooltipRoot({
   open,
   defaultOpen,
   onOpenChange,
+  contentProps,
   className,
+  style,
   ...htmlProps
 }) {
   const hasExternalProvider = React__namespace.useContext(TooltipProviderContext);
@@ -59,6 +61,11 @@ function TooltipRoot({
   if (disabled) {
     return children;
   }
+  const {
+    className: contentClassName,
+    style: contentStyle,
+    ...contentHtmlProps
+  } = contentProps ?? {};
   const tooltipNode = /* @__PURE__ */ jsxRuntime.jsxs(
     tooltip.Tooltip.Root,
     {
@@ -74,10 +81,19 @@ function TooltipRoot({
             align,
             sideOffset,
             className: Tooltip_module.default.positioner,
-            children: /* @__PURE__ */ jsxRuntime.jsxs(tooltip.Tooltip.Popup, { ...htmlProps, className: [Tooltip_module.default.popup, className].filter(Boolean).join(" "), children: [
-              content,
-              arrow && /* @__PURE__ */ jsxRuntime.jsx(tooltip.Tooltip.Arrow, { className: Tooltip_module.default.arrow })
-            ] })
+            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 })
+                ]
+              }
+            )
           }
         ) })
       ]

package/dist/components/Tooltip/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../src/components/Tooltip/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Tooltip as BaseTooltip } from '@base-ui/react/tooltip';\nimport styles from './Tooltip.module.scss';\n\n// ============================================\n// Types\n// ============================================\n\nexport type TooltipSide = 'top' | 'bottom' | 'left' | 'right';\nexport type TooltipAlign = 'start' | 'center' | 'end';\n\nexport interface TooltipProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'content' | 'defaultChecked'> {\n  /** The element that triggers the tooltip */\n  children: React.ReactElement;\n  /** Content to display in the tooltip */\n  content: React.ReactNode;\n  /** Which side to show the tooltip */\n  side?: TooltipSide;\n  /** Alignment along the side */\n  align?: TooltipAlign;\n  /** Offset from the trigger (px) */\n  sideOffset?: number;\n  /** Delay before showing (ms) */\n  delay?: number;\n  /** Delay before hiding (ms) */\n  closeDelay?: number;\n  /** Whether the tooltip is disabled */\n  disabled?: boolean;\n  /** Show arrow pointing to trigger */\n  arrow?: boolean;\n  /** Controlled open state */\n  open?: boolean;\n  /** Default open state */\n  defaultOpen?: boolean;\n  /** Callback when open state changes */\n  onOpenChange?: (open: boolean) => void;\n}\n\nexport interface TooltipProviderProps {\n  children: React.ReactNode;\n  /** Default delay for all tooltips (ms) */\n  delay?: number;\n  /** Default close delay for all tooltips (ms) */\n  closeDelay?: number;\n  /** Timeout for instant open when moving between tooltips (ms) */\n  timeout?: number;\n  /** Alias for `delay` (Radix convention) */\n  delayDuration?: number;\n  /** Alias for `timeout` (Radix convention) */\n  skipDelayDuration?: number;\n}\n\n// ============================================\n// Components\n// ============================================\n\nconst TooltipProviderContext = React.createContext(false);\n\n/**\n * Tooltip - Shows contextual information on hover/focus\n *\n * @example\n * ```tsx\n * <Tooltip content=\"Save your changes\">\n *   <Button>Save</Button>\n * </Tooltip>\n * ```\n */\nfunction TooltipRoot({\n  children,\n  content,\n  side = 'top',\n  align = 'center',\n  sideOffset = 6,\n  delay,\n  closeDelay,\n  disabled = false,\n  arrow = true,\n  open,\n  defaultOpen,\n  onOpenChange,\n  className,\n  ...htmlProps\n}: TooltipProps) {\n  const hasExternalProvider = React.useContext(TooltipProviderContext);\n  const renderTrigger = React.useCallback(\n    (triggerProps: React.HTMLAttributes<HTMLElement> & { ref?: React.Ref<HTMLElement> }) => {\n      const childProps = children.props as Record<string, unknown>;\n      const mergedProps: Record<string, unknown> = { ...childProps, ...triggerProps };\n\n      for (const [key, triggerHandler] of Object.entries(triggerProps)) {\n        const childHandler = childProps[key];\n        if (\n          key.startsWith('on') &&\n          typeof triggerHandler === 'function' &&\n          typeof childHandler === 'function'\n        ) {\n          mergedProps[key] = (...args: unknown[]) => {\n            (childHandler as (...event: unknown[]) => void)(...args);\n            (triggerHandler as (...event: unknown[]) => void)(...args);\n          };\n        }\n      }\n\n      return React.cloneElement(children, mergedProps);\n    },\n    [children],\n  );\n\n  if (disabled) {\n    return children;\n  }\n\n  const tooltipNode = (\n    <BaseTooltip.Root\n      open={open}\n      defaultOpen={defaultOpen}\n      onOpenChange={onOpenChange}\n    >\n      <BaseTooltip.Trigger render={renderTrigger} />\n      <BaseTooltip.Portal>\n        <BaseTooltip.Positioner\n          side={side}\n          align={align}\n          sideOffset={sideOffset}\n          className={styles.positioner}\n        >\n          <BaseTooltip.Popup {...htmlProps} className={[styles.popup, className].filter(Boolean).join(' ')}>\n            {content}\n            {arrow && <BaseTooltip.Arrow className={styles.arrow} />}\n          </BaseTooltip.Popup>\n        </BaseTooltip.Positioner>\n      </BaseTooltip.Portal>\n    </BaseTooltip.Root>\n  );\n\n  // Only create a local provider when no shared provider exists, or when a local delay override is requested.\n  if (!hasExternalProvider || delay !== undefined || closeDelay !== undefined) {\n    return (\n      <BaseTooltip.Provider delay={delay ?? 400} closeDelay={closeDelay ?? 0}>\n        {tooltipNode}\n      </BaseTooltip.Provider>\n    );\n  }\n\n  return tooltipNode;\n}\n\n/**\n * TooltipProvider - Manages shared delay behavior for multiple tooltips\n *\n * @example\n * ```tsx\n * <TooltipProvider delay={200}>\n *   <Tooltip content=\"First\">...</Tooltip>\n *   <Tooltip content=\"Second\">...</Tooltip>\n * </TooltipProvider>\n * ```\n */\nexport function TooltipProvider({\n  children,\n  delay,\n  closeDelay = 0,\n  timeout,\n  delayDuration,\n  skipDelayDuration,\n}: TooltipProviderProps) {\n  // Resolve Radix-compatible aliases\n  const resolvedDelay = delay ?? delayDuration ?? 400;\n  const resolvedTimeout = timeout ?? skipDelayDuration ?? 400;\n\n  return (\n    <TooltipProviderContext.Provider value={true}>\n      <BaseTooltip.Provider\n        delay={resolvedDelay}\n        closeDelay={closeDelay}\n        timeout={resolvedTimeout}\n      >\n        {children}\n      </BaseTooltip.Provider>\n    </TooltipProviderContext.Provider>\n  );\n}\n\nexport const Tooltip = Object.assign(TooltipRoot, {\n  Root: TooltipRoot,\n  Provider: TooltipProvider,\n});\n"],"names":["React","jsxs","BaseTooltip","jsx","styles"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AA0DA,MAAM,yBAAyBA,iBAAM,cAAc,KAAK;AAYxD,SAAS,YAAY;AAAA,EACnB;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAiB;AACf,QAAM,sBAAsBA,iBAAM,WAAW,sBAAsB;AACnE,QAAM,gBAAgBA,iBAAM;AAAA,IAC1B,CAAC,iBAAuF;AACtF,YAAM,aAAa,SAAS;AAC5B,YAAM,cAAuC,EAAE,GAAG,YAAY,GAAG,aAAA;AAEjE,iBAAW,CAAC,KAAK,cAAc,KAAK,OAAO,QAAQ,YAAY,GAAG;AAChE,cAAM,eAAe,WAAW,GAAG;AACnC,YACE,IAAI,WAAW,IAAI,KACnB,OAAO,mBAAmB,cAC1B,OAAO,iBAAiB,YACxB;AACA,sBAAY,GAAG,IAAI,IAAI,SAAoB;AACxC,yBAA+C,GAAG,IAAI;AACtD,2BAAiD,GAAG,IAAI;AAAA,UAC3D;AAAA,QACF;AAAA,MACF;AAEA,aAAOA,iBAAM,aAAa,UAAU,WAAW;AAAA,IACjD;AAAA,IACA,CAAC,QAAQ;AAAA,EAAA;AAGX,MAAI,UAAU;AACZ,WAAO;AAAA,EACT;AAEA,QAAM,cACJC,2BAAAA;AAAAA,IAACC,QAAAA,QAAY;AAAA,IAAZ;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MAEA,UAAA;AAAA,QAAAC,2BAAAA,IAACD,QAAAA,QAAY,SAAZ,EAAoB,QAAQ,cAAA,CAAe;AAAA,QAC5CC,2BAAAA,IAACD,QAAAA,QAAY,QAAZ,EACC,UAAAC,2BAAAA;AAAAA,UAACD,QAAAA,QAAY;AAAA,UAAZ;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA,WAAWE,eAAAA,QAAO;AAAA,YAElB,0CAACF,gBAAY,OAAZ,EAAmB,GAAG,WAAW,WAAW,CAACE,eAAAA,QAAO,OAAO,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAC5F,UAAA;AAAA,cAAA;AAAA,cACA,SAASD,2BAAAA,IAACD,gBAAY,OAAZ,EAAkB,WAAWE,eAAAA,QAAO,MAAA,CAAO;AAAA,YAAA,EAAA,CACxD;AAAA,UAAA;AAAA,QAAA,EACF,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAKJ,MAAI,CAAC,uBAAuB,UAAU,UAAa,eAAe,QAAW;AAC3E,WACED,2BAAAA,IAACD,QAAAA,QAAY,UAAZ,EAAqB,OAAO,SAAS,KAAK,YAAY,cAAc,GAClE,UAAA,YAAA,CACH;AAAA,EAEJ;AAEA,SAAO;AACT;AAaO,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA;AACF,GAAyB;AAEvB,QAAM,gBAAgB,SAAS,iBAAiB;AAChD,QAAM,kBAAkB,WAAW,qBAAqB;AAExD,SACEC,2BAAAA,IAAC,uBAAuB,UAAvB,EAAgC,OAAO,MACtC,UAAAA,2BAAAA;AAAAA,IAACD,QAAAA,QAAY;AAAA,IAAZ;AAAA,MACC,OAAO;AAAA,MACP;AAAA,MACA,SAAS;AAAA,MAER;AAAA,IAAA;AAAA,EAAA,GAEL;AAEJ;AAEO,MAAM,UAAU,OAAO,OAAO,aAAa;AAAA,EAChD,MAAM;AAAA,EACN,UAAU;AACZ,CAAC;;;"}
+{"version":3,"file":"index.cjs","sources":["../../../src/components/Tooltip/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Tooltip as BaseTooltip } from '@base-ui/react/tooltip';\nimport styles from './Tooltip.module.scss';\n\n// ============================================\n// Types\n// ============================================\n\nexport type TooltipSide = 'top' | 'bottom' | 'left' | 'right';\nexport type TooltipAlign = 'start' | 'center' | 'end';\n\nexport interface TooltipProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'content' | 'defaultChecked'> {\n  /** The element that triggers the tooltip */\n  children: React.ReactElement;\n  /** Content to display in the tooltip */\n  content: React.ReactNode;\n  /** Which side to show the tooltip */\n  side?: TooltipSide;\n  /** Alignment along the side */\n  align?: TooltipAlign;\n  /** Offset from the trigger (px) */\n  sideOffset?: number;\n  /** Delay before showing (ms) */\n  delay?: number;\n  /** Delay before hiding (ms) */\n  closeDelay?: number;\n  /** Whether the tooltip is disabled */\n  disabled?: boolean;\n  /** Show arrow pointing to trigger */\n  arrow?: boolean;\n  /** Controlled open state */\n  open?: boolean;\n  /** Default open state */\n  defaultOpen?: boolean;\n  /** Callback when open state changes */\n  onOpenChange?: (open: boolean) => void;\n  /** Explicit props for the tooltip popup element (preferred over top-level HTMLAttributes for clarity) */\n  contentProps?: React.HTMLAttributes<HTMLDivElement>;\n}\n\nexport interface TooltipProviderProps {\n  children: React.ReactNode;\n  /** Default delay for all tooltips (ms) */\n  delay?: number;\n  /** Default close delay for all tooltips (ms) */\n  closeDelay?: number;\n  /** Timeout for instant open when moving between tooltips (ms) */\n  timeout?: number;\n  /** Alias for `delay` (Radix convention) */\n  delayDuration?: number;\n  /** Alias for `timeout` (Radix convention) */\n  skipDelayDuration?: number;\n}\n\n// ============================================\n// Components\n// ============================================\n\nconst TooltipProviderContext = React.createContext(false);\n\n/**\n * Tooltip - Shows contextual information on hover/focus\n *\n * @example\n * ```tsx\n * <Tooltip content=\"Save your changes\">\n *   <Button>Save</Button>\n * </Tooltip>\n * ```\n */\nfunction TooltipRoot({\n  children,\n  content,\n  side = 'top',\n  align = 'center',\n  sideOffset = 6,\n  delay,\n  closeDelay,\n  disabled = false,\n  arrow = true,\n  open,\n  defaultOpen,\n  onOpenChange,\n  contentProps,\n  className,\n  style,\n  ...htmlProps\n}: TooltipProps) {\n  const hasExternalProvider = React.useContext(TooltipProviderContext);\n  const renderTrigger = React.useCallback(\n    (triggerProps: React.HTMLAttributes<HTMLElement> & { ref?: React.Ref<HTMLElement> }) => {\n      const childProps = children.props as Record<string, unknown>;\n      const mergedProps: Record<string, unknown> = { ...childProps, ...triggerProps };\n\n      for (const [key, triggerHandler] of Object.entries(triggerProps)) {\n        const childHandler = childProps[key];\n        if (\n          key.startsWith('on') &&\n          typeof triggerHandler === 'function' &&\n          typeof childHandler === 'function'\n        ) {\n          mergedProps[key] = (...args: unknown[]) => {\n            (childHandler as (...event: unknown[]) => void)(...args);\n            (triggerHandler as (...event: unknown[]) => void)(...args);\n          };\n        }\n      }\n\n      return React.cloneElement(children, mergedProps);\n    },\n    [children],\n  );\n\n  if (disabled) {\n    return children;\n  }\n\n  const {\n    className: contentClassName,\n    style: contentStyle,\n    ...contentHtmlProps\n  } = contentProps ?? {};\n\n  const tooltipNode = (\n    <BaseTooltip.Root\n      open={open}\n      defaultOpen={defaultOpen}\n      onOpenChange={onOpenChange}\n    >\n      <BaseTooltip.Trigger render={renderTrigger} />\n      <BaseTooltip.Portal>\n        <BaseTooltip.Positioner\n          side={side}\n          align={align}\n          sideOffset={sideOffset}\n          className={styles.positioner}\n        >\n          <BaseTooltip.Popup\n            {...htmlProps}\n            {...contentHtmlProps}\n            className={[styles.popup, className, contentClassName].filter(Boolean).join(' ')}\n            style={{ ...(style ?? {}), ...(contentStyle ?? {}) }}\n          >\n            {content}\n            {arrow && <BaseTooltip.Arrow className={styles.arrow} />}\n          </BaseTooltip.Popup>\n        </BaseTooltip.Positioner>\n      </BaseTooltip.Portal>\n    </BaseTooltip.Root>\n  );\n\n  // Only create a local provider when no shared provider exists, or when a local delay override is requested.\n  if (!hasExternalProvider || delay !== undefined || closeDelay !== undefined) {\n    return (\n      <BaseTooltip.Provider delay={delay ?? 400} closeDelay={closeDelay ?? 0}>\n        {tooltipNode}\n      </BaseTooltip.Provider>\n    );\n  }\n\n  return tooltipNode;\n}\n\n/**\n * TooltipProvider - Manages shared delay behavior for multiple tooltips\n *\n * @example\n * ```tsx\n * <TooltipProvider delay={200}>\n *   <Tooltip content=\"First\">...</Tooltip>\n *   <Tooltip content=\"Second\">...</Tooltip>\n * </TooltipProvider>\n * ```\n */\nexport function TooltipProvider({\n  children,\n  delay,\n  closeDelay = 0,\n  timeout,\n  delayDuration,\n  skipDelayDuration,\n}: TooltipProviderProps) {\n  // Resolve Radix-compatible aliases\n  const resolvedDelay = delay ?? delayDuration ?? 400;\n  const resolvedTimeout = timeout ?? skipDelayDuration ?? 400;\n\n  return (\n    <TooltipProviderContext.Provider value={true}>\n      <BaseTooltip.Provider\n        delay={resolvedDelay}\n        closeDelay={closeDelay}\n        timeout={resolvedTimeout}\n      >\n        {children}\n      </BaseTooltip.Provider>\n    </TooltipProviderContext.Provider>\n  );\n}\n\nexport const Tooltip = Object.assign(TooltipRoot, {\n  Root: TooltipRoot,\n  Provider: TooltipProvider,\n});\n"],"names":["React","jsxs","BaseTooltip","jsx","styles"],"mappings":"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"}

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

@@ -26,6 +26,8 @@ export interface TooltipProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
     defaultOpen?: boolean;
     /** Callback when open state changes */
     onOpenChange?: (open: boolean) => void;
+    /** Explicit props for the tooltip popup element (preferred over top-level HTMLAttributes for clarity) */
+    contentProps?: React.HTMLAttributes<HTMLDivElement>;
 }
 export interface TooltipProviderProps {
     children: React.ReactNode;
@@ -50,7 +52,7 @@ export interface TooltipProviderProps {
  * </Tooltip>
  * ```
  */
-declare function TooltipRoot({ children, content, side, align, sideOffset, delay, closeDelay, disabled, arrow, open, defaultOpen, onOpenChange, className, ...htmlProps }: TooltipProps): import("react/jsx-runtime").JSX.Element;
+declare function TooltipRoot({ children, content, side, align, sideOffset, delay, closeDelay, disabled, arrow, open, defaultOpen, onOpenChange, contentProps, className, style, ...htmlProps }: TooltipProps): import("react/jsx-runtime").JSX.Element;
 /**
  * TooltipProvider - Manages shared delay behavior for multiple tooltips
  *

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;CACxC;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,SAAS,EACT,GAAG,SAAS,EACb,EAAE,YAAY,2CA+Dd;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,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,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,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"}

package/dist/components/Tooltip/index.js

@@ -16,7 +16,9 @@ function TooltipRoot({
   open,
   defaultOpen,
   onOpenChange,
+  contentProps,
   className,
+  style,
   ...htmlProps
 }) {
   const hasExternalProvider = React.useContext(TooltipProviderContext);
@@ -40,6 +42,11 @@ function TooltipRoot({
   if (disabled) {
     return children;
   }
+  const {
+    className: contentClassName,
+    style: contentStyle,
+    ...contentHtmlProps
+  } = contentProps ?? {};
   const tooltipNode = /* @__PURE__ */ jsxs(
     Tooltip$1.Root,
     {
@@ -55,10 +62,19 @@ function TooltipRoot({
             align,
             sideOffset,
             className: styles.positioner,
-            children: /* @__PURE__ */ jsxs(Tooltip$1.Popup, { ...htmlProps, className: [styles.popup, className].filter(Boolean).join(" "), children: [
-              content,
-              arrow && /* @__PURE__ */ jsx(Tooltip$1.Arrow, { className: styles.arrow })
-            ] })
+            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 })
+                ]
+              }
+            )
           }
         ) })
       ]

package/dist/components/Tooltip/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Tooltip/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Tooltip as BaseTooltip } from '@base-ui/react/tooltip';\nimport styles from './Tooltip.module.scss';\n\n// ============================================\n// Types\n// ============================================\n\nexport type TooltipSide = 'top' | 'bottom' | 'left' | 'right';\nexport type TooltipAlign = 'start' | 'center' | 'end';\n\nexport interface TooltipProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'content' | 'defaultChecked'> {\n  /** The element that triggers the tooltip */\n  children: React.ReactElement;\n  /** Content to display in the tooltip */\n  content: React.ReactNode;\n  /** Which side to show the tooltip */\n  side?: TooltipSide;\n  /** Alignment along the side */\n  align?: TooltipAlign;\n  /** Offset from the trigger (px) */\n  sideOffset?: number;\n  /** Delay before showing (ms) */\n  delay?: number;\n  /** Delay before hiding (ms) */\n  closeDelay?: number;\n  /** Whether the tooltip is disabled */\n  disabled?: boolean;\n  /** Show arrow pointing to trigger */\n  arrow?: boolean;\n  /** Controlled open state */\n  open?: boolean;\n  /** Default open state */\n  defaultOpen?: boolean;\n  /** Callback when open state changes */\n  onOpenChange?: (open: boolean) => void;\n}\n\nexport interface TooltipProviderProps {\n  children: React.ReactNode;\n  /** Default delay for all tooltips (ms) */\n  delay?: number;\n  /** Default close delay for all tooltips (ms) */\n  closeDelay?: number;\n  /** Timeout for instant open when moving between tooltips (ms) */\n  timeout?: number;\n  /** Alias for `delay` (Radix convention) */\n  delayDuration?: number;\n  /** Alias for `timeout` (Radix convention) */\n  skipDelayDuration?: number;\n}\n\n// ============================================\n// Components\n// ============================================\n\nconst TooltipProviderContext = React.createContext(false);\n\n/**\n * Tooltip - Shows contextual information on hover/focus\n *\n * @example\n * ```tsx\n * <Tooltip content=\"Save your changes\">\n *   <Button>Save</Button>\n * </Tooltip>\n * ```\n */\nfunction TooltipRoot({\n  children,\n  content,\n  side = 'top',\n  align = 'center',\n  sideOffset = 6,\n  delay,\n  closeDelay,\n  disabled = false,\n  arrow = true,\n  open,\n  defaultOpen,\n  onOpenChange,\n  className,\n  ...htmlProps\n}: TooltipProps) {\n  const hasExternalProvider = React.useContext(TooltipProviderContext);\n  const renderTrigger = React.useCallback(\n    (triggerProps: React.HTMLAttributes<HTMLElement> & { ref?: React.Ref<HTMLElement> }) => {\n      const childProps = children.props as Record<string, unknown>;\n      const mergedProps: Record<string, unknown> = { ...childProps, ...triggerProps };\n\n      for (const [key, triggerHandler] of Object.entries(triggerProps)) {\n        const childHandler = childProps[key];\n        if (\n          key.startsWith('on') &&\n          typeof triggerHandler === 'function' &&\n          typeof childHandler === 'function'\n        ) {\n          mergedProps[key] = (...args: unknown[]) => {\n            (childHandler as (...event: unknown[]) => void)(...args);\n            (triggerHandler as (...event: unknown[]) => void)(...args);\n          };\n        }\n      }\n\n      return React.cloneElement(children, mergedProps);\n    },\n    [children],\n  );\n\n  if (disabled) {\n    return children;\n  }\n\n  const tooltipNode = (\n    <BaseTooltip.Root\n      open={open}\n      defaultOpen={defaultOpen}\n      onOpenChange={onOpenChange}\n    >\n      <BaseTooltip.Trigger render={renderTrigger} />\n      <BaseTooltip.Portal>\n        <BaseTooltip.Positioner\n          side={side}\n          align={align}\n          sideOffset={sideOffset}\n          className={styles.positioner}\n        >\n          <BaseTooltip.Popup {...htmlProps} className={[styles.popup, className].filter(Boolean).join(' ')}>\n            {content}\n            {arrow && <BaseTooltip.Arrow className={styles.arrow} />}\n          </BaseTooltip.Popup>\n        </BaseTooltip.Positioner>\n      </BaseTooltip.Portal>\n    </BaseTooltip.Root>\n  );\n\n  // Only create a local provider when no shared provider exists, or when a local delay override is requested.\n  if (!hasExternalProvider || delay !== undefined || closeDelay !== undefined) {\n    return (\n      <BaseTooltip.Provider delay={delay ?? 400} closeDelay={closeDelay ?? 0}>\n        {tooltipNode}\n      </BaseTooltip.Provider>\n    );\n  }\n\n  return tooltipNode;\n}\n\n/**\n * TooltipProvider - Manages shared delay behavior for multiple tooltips\n *\n * @example\n * ```tsx\n * <TooltipProvider delay={200}>\n *   <Tooltip content=\"First\">...</Tooltip>\n *   <Tooltip content=\"Second\">...</Tooltip>\n * </TooltipProvider>\n * ```\n */\nexport function TooltipProvider({\n  children,\n  delay,\n  closeDelay = 0,\n  timeout,\n  delayDuration,\n  skipDelayDuration,\n}: TooltipProviderProps) {\n  // Resolve Radix-compatible aliases\n  const resolvedDelay = delay ?? delayDuration ?? 400;\n  const resolvedTimeout = timeout ?? skipDelayDuration ?? 400;\n\n  return (\n    <TooltipProviderContext.Provider value={true}>\n      <BaseTooltip.Provider\n        delay={resolvedDelay}\n        closeDelay={closeDelay}\n        timeout={resolvedTimeout}\n      >\n        {children}\n      </BaseTooltip.Provider>\n    </TooltipProviderContext.Provider>\n  );\n}\n\nexport const Tooltip = Object.assign(TooltipRoot, {\n  Root: TooltipRoot,\n  Provider: TooltipProvider,\n});\n"],"names":["BaseTooltip"],"mappings":";;;;AA0DA,MAAM,yBAAyB,MAAM,cAAc,KAAK;AAYxD,SAAS,YAAY;AAAA,EACnB;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAiB;AACf,QAAM,sBAAsB,MAAM,WAAW,sBAAsB;AACnE,QAAM,gBAAgB,MAAM;AAAA,IAC1B,CAAC,iBAAuF;AACtF,YAAM,aAAa,SAAS;AAC5B,YAAM,cAAuC,EAAE,GAAG,YAAY,GAAG,aAAA;AAEjE,iBAAW,CAAC,KAAK,cAAc,KAAK,OAAO,QAAQ,YAAY,GAAG;AAChE,cAAM,eAAe,WAAW,GAAG;AACnC,YACE,IAAI,WAAW,IAAI,KACnB,OAAO,mBAAmB,cAC1B,OAAO,iBAAiB,YACxB;AACA,sBAAY,GAAG,IAAI,IAAI,SAAoB;AACxC,yBAA+C,GAAG,IAAI;AACtD,2BAAiD,GAAG,IAAI;AAAA,UAC3D;AAAA,QACF;AAAA,MACF;AAEA,aAAO,MAAM,aAAa,UAAU,WAAW;AAAA,IACjD;AAAA,IACA,CAAC,QAAQ;AAAA,EAAA;AAGX,MAAI,UAAU;AACZ,WAAO;AAAA,EACT;AAEA,QAAM,cACJ;AAAA,IAACA,UAAY;AAAA,IAAZ;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MAEA,UAAA;AAAA,QAAA,oBAACA,UAAY,SAAZ,EAAoB,QAAQ,cAAA,CAAe;AAAA,QAC5C,oBAACA,UAAY,QAAZ,EACC,UAAA;AAAA,UAACA,UAAY;AAAA,UAAZ;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA,WAAW,OAAO;AAAA,YAElB,+BAACA,UAAY,OAAZ,EAAmB,GAAG,WAAW,WAAW,CAAC,OAAO,OAAO,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAC5F,UAAA;AAAA,cAAA;AAAA,cACA,SAAS,oBAACA,UAAY,OAAZ,EAAkB,WAAW,OAAO,MAAA,CAAO;AAAA,YAAA,EAAA,CACxD;AAAA,UAAA;AAAA,QAAA,EACF,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAKJ,MAAI,CAAC,uBAAuB,UAAU,UAAa,eAAe,QAAW;AAC3E,WACE,oBAACA,UAAY,UAAZ,EAAqB,OAAO,SAAS,KAAK,YAAY,cAAc,GAClE,UAAA,YAAA,CACH;AAAA,EAEJ;AAEA,SAAO;AACT;AAaO,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA;AACF,GAAyB;AAEvB,QAAM,gBAAgB,SAAS,iBAAiB;AAChD,QAAM,kBAAkB,WAAW,qBAAqB;AAExD,SACE,oBAAC,uBAAuB,UAAvB,EAAgC,OAAO,MACtC,UAAA;AAAA,IAACA,UAAY;AAAA,IAAZ;AAAA,MACC,OAAO;AAAA,MACP;AAAA,MACA,SAAS;AAAA,MAER;AAAA,IAAA;AAAA,EAAA,GAEL;AAEJ;AAEO,MAAM,UAAU,OAAO,OAAO,aAAa;AAAA,EAChD,MAAM;AAAA,EACN,UAAU;AACZ,CAAC;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Tooltip/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Tooltip as BaseTooltip } from '@base-ui/react/tooltip';\nimport styles from './Tooltip.module.scss';\n\n// ============================================\n// Types\n// ============================================\n\nexport type TooltipSide = 'top' | 'bottom' | 'left' | 'right';\nexport type TooltipAlign = 'start' | 'center' | 'end';\n\nexport interface TooltipProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'content' | 'defaultChecked'> {\n  /** The element that triggers the tooltip */\n  children: React.ReactElement;\n  /** Content to display in the tooltip */\n  content: React.ReactNode;\n  /** Which side to show the tooltip */\n  side?: TooltipSide;\n  /** Alignment along the side */\n  align?: TooltipAlign;\n  /** Offset from the trigger (px) */\n  sideOffset?: number;\n  /** Delay before showing (ms) */\n  delay?: number;\n  /** Delay before hiding (ms) */\n  closeDelay?: number;\n  /** Whether the tooltip is disabled */\n  disabled?: boolean;\n  /** Show arrow pointing to trigger */\n  arrow?: boolean;\n  /** Controlled open state */\n  open?: boolean;\n  /** Default open state */\n  defaultOpen?: boolean;\n  /** Callback when open state changes */\n  onOpenChange?: (open: boolean) => void;\n  /** Explicit props for the tooltip popup element (preferred over top-level HTMLAttributes for clarity) */\n  contentProps?: React.HTMLAttributes<HTMLDivElement>;\n}\n\nexport interface TooltipProviderProps {\n  children: React.ReactNode;\n  /** Default delay for all tooltips (ms) */\n  delay?: number;\n  /** Default close delay for all tooltips (ms) */\n  closeDelay?: number;\n  /** Timeout for instant open when moving between tooltips (ms) */\n  timeout?: number;\n  /** Alias for `delay` (Radix convention) */\n  delayDuration?: number;\n  /** Alias for `timeout` (Radix convention) */\n  skipDelayDuration?: number;\n}\n\n// ============================================\n// Components\n// ============================================\n\nconst TooltipProviderContext = React.createContext(false);\n\n/**\n * Tooltip - Shows contextual information on hover/focus\n *\n * @example\n * ```tsx\n * <Tooltip content=\"Save your changes\">\n *   <Button>Save</Button>\n * </Tooltip>\n * ```\n */\nfunction TooltipRoot({\n  children,\n  content,\n  side = 'top',\n  align = 'center',\n  sideOffset = 6,\n  delay,\n  closeDelay,\n  disabled = false,\n  arrow = true,\n  open,\n  defaultOpen,\n  onOpenChange,\n  contentProps,\n  className,\n  style,\n  ...htmlProps\n}: TooltipProps) {\n  const hasExternalProvider = React.useContext(TooltipProviderContext);\n  const renderTrigger = React.useCallback(\n    (triggerProps: React.HTMLAttributes<HTMLElement> & { ref?: React.Ref<HTMLElement> }) => {\n      const childProps = children.props as Record<string, unknown>;\n      const mergedProps: Record<string, unknown> = { ...childProps, ...triggerProps };\n\n      for (const [key, triggerHandler] of Object.entries(triggerProps)) {\n        const childHandler = childProps[key];\n        if (\n          key.startsWith('on') &&\n          typeof triggerHandler === 'function' &&\n          typeof childHandler === 'function'\n        ) {\n          mergedProps[key] = (...args: unknown[]) => {\n            (childHandler as (...event: unknown[]) => void)(...args);\n            (triggerHandler as (...event: unknown[]) => void)(...args);\n          };\n        }\n      }\n\n      return React.cloneElement(children, mergedProps);\n    },\n    [children],\n  );\n\n  if (disabled) {\n    return children;\n  }\n\n  const {\n    className: contentClassName,\n    style: contentStyle,\n    ...contentHtmlProps\n  } = contentProps ?? {};\n\n  const tooltipNode = (\n    <BaseTooltip.Root\n      open={open}\n      defaultOpen={defaultOpen}\n      onOpenChange={onOpenChange}\n    >\n      <BaseTooltip.Trigger render={renderTrigger} />\n      <BaseTooltip.Portal>\n        <BaseTooltip.Positioner\n          side={side}\n          align={align}\n          sideOffset={sideOffset}\n          className={styles.positioner}\n        >\n          <BaseTooltip.Popup\n            {...htmlProps}\n            {...contentHtmlProps}\n            className={[styles.popup, className, contentClassName].filter(Boolean).join(' ')}\n            style={{ ...(style ?? {}), ...(contentStyle ?? {}) }}\n          >\n            {content}\n            {arrow && <BaseTooltip.Arrow className={styles.arrow} />}\n          </BaseTooltip.Popup>\n        </BaseTooltip.Positioner>\n      </BaseTooltip.Portal>\n    </BaseTooltip.Root>\n  );\n\n  // Only create a local provider when no shared provider exists, or when a local delay override is requested.\n  if (!hasExternalProvider || delay !== undefined || closeDelay !== undefined) {\n    return (\n      <BaseTooltip.Provider delay={delay ?? 400} closeDelay={closeDelay ?? 0}>\n        {tooltipNode}\n      </BaseTooltip.Provider>\n    );\n  }\n\n  return tooltipNode;\n}\n\n/**\n * TooltipProvider - Manages shared delay behavior for multiple tooltips\n *\n * @example\n * ```tsx\n * <TooltipProvider delay={200}>\n *   <Tooltip content=\"First\">...</Tooltip>\n *   <Tooltip content=\"Second\">...</Tooltip>\n * </TooltipProvider>\n * ```\n */\nexport function TooltipProvider({\n  children,\n  delay,\n  closeDelay = 0,\n  timeout,\n  delayDuration,\n  skipDelayDuration,\n}: TooltipProviderProps) {\n  // Resolve Radix-compatible aliases\n  const resolvedDelay = delay ?? delayDuration ?? 400;\n  const resolvedTimeout = timeout ?? skipDelayDuration ?? 400;\n\n  return (\n    <TooltipProviderContext.Provider value={true}>\n      <BaseTooltip.Provider\n        delay={resolvedDelay}\n        closeDelay={closeDelay}\n        timeout={resolvedTimeout}\n      >\n        {children}\n      </BaseTooltip.Provider>\n    </TooltipProviderContext.Provider>\n  );\n}\n\nexport const Tooltip = Object.assign(TooltipRoot, {\n  Root: TooltipRoot,\n  Provider: TooltipProvider,\n});\n"],"names":["BaseTooltip"],"mappings":"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"}