@salt-ds/core 1.3.0 → 1.5.0

package/dist-es/packages/core/src/radio-button/RadioButton.css.js

@@ -0,0 +1,7 @@
+import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = "/* Styles applied to RadioButton container */\n.saltRadioButton {\n  display: flex;\n  gap: var(--salt-size-adornmentGap);\n  position: relative;\n  user-select: none;\n  cursor: pointer;\n}\n\n/* Styles applied when RadioButton is disabled */\n.saltRadioButton-disabled {\n  color: var(--salt-text-primary-foreground-disabled);\n  cursor: var(--salt-selectable-cursor-disabled);\n  pointer-events: visible;\n}\n\n/* Styles applied to input component */\n.saltRadioButton-input {\n  cursor: inherit;\n  position: absolute;\n  opacity: 0;\n  top: 0;\n  left: 0;\n  margin: 0;\n  padding: 0;\n  z-index: var(--salt-zIndex-default);\n}\n\n/* Styles applied to icon when :focus-visible */\n.saltRadioButton-input:focus-visible + .saltRadioButtonIcon {\n  outline: var(--salt-focused-outline);\n  outline-offset: var(--salt-focused-outlineOffset);\n}\n";
+styleInject(css_248z);
+
+export { css_248z as default };
+//# sourceMappingURL=RadioButton.css.js.map

package/dist-es/packages/core/src/radio-button/RadioButton.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioButton.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/dist-es/packages/core/src/radio-button/RadioButton.js

@@ -0,0 +1,82 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+import { makePrefixer } from '../utils/makePrefixer.js';
+import { useControlled } from '../utils/useControlled.js';
+import '../utils/useFloatingUI.js';
+import '../utils/useId.js';
+import '../salt-provider/SaltProvider.js';
+import '../viewport/ViewportProvider.js';
+import { useRadioGroup } from './internal/useRadioGroup.js';
+import { RadioButtonIcon } from './RadioButtonIcon.js';
+import './RadioButton.css.js';
+
+const withBaseName = makePrefixer("saltRadioButton");
+const RadioButton = forwardRef(
+  function RadioButton2(props, ref) {
+    const {
+      checked: checkedProp,
+      className,
+      disabled,
+      error,
+      inputProps,
+      label,
+      name: nameProp,
+      onFocus,
+      onBlur,
+      onChange,
+      value,
+      ...rest
+    } = props;
+    const radioGroup = useRadioGroup();
+    const radioGroupChecked = radioGroup.value != null && value != null ? radioGroup.value === value : checkedProp;
+    const name = nameProp != null ? nameProp : radioGroup.name;
+    const [checked, setCheckedState] = useControlled({
+      controlled: radioGroupChecked,
+      default: Boolean(checkedProp),
+      name: "RadioBase",
+      state: "checked"
+    });
+    const handleChange = (event) => {
+      var _a;
+      const newChecked = event.target.checked;
+      setCheckedState(newChecked);
+      onChange == null ? void 0 : onChange(event);
+      (_a = radioGroup.onChange) == null ? void 0 : _a.call(radioGroup, event);
+    };
+    return /* @__PURE__ */ jsxs("label", {
+      className: clsx(
+        withBaseName(),
+        {
+          [withBaseName("disabled")]: disabled
+        },
+        className
+      ),
+      ref,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx("input", {
+          className: withBaseName("input"),
+          ...inputProps,
+          checked,
+          disabled,
+          name,
+          value,
+          onBlur,
+          onChange: handleChange,
+          onFocus,
+          type: "radio"
+        }),
+        /* @__PURE__ */ jsx(RadioButtonIcon, {
+          checked,
+          error,
+          disabled
+        }),
+        label
+      ]
+    });
+  }
+);
+
+export { RadioButton };
+//# sourceMappingURL=RadioButton.js.map

package/dist-es/packages/core/src/radio-button/RadioButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioButton.js","sources":["../src/radio-button/RadioButton.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n  ChangeEventHandler,\n  FocusEventHandler,\n  forwardRef,\n  HTMLAttributes,\n  InputHTMLAttributes,\n  ReactNode,\n} from \"react\";\nimport { makePrefixer, useControlled } from \"../utils\";\nimport { useRadioGroup } from \"./internal/useRadioGroup\";\nimport { RadioButtonIcon } from \"./RadioButtonIcon\";\n\nimport \"./RadioButton.css\";\n\nconst withBaseName = makePrefixer(\"saltRadioButton\");\n\nexport interface RadioButtonProps\n  extends Omit<\n    HTMLAttributes<HTMLLabelElement>,\n    \"onChange\" | \"onBlur\" | \"onFocus\"\n  > {\n  /**\n   * Set the default selected radio button in the group\n   */\n  checked?: boolean;\n  /**\n   * Set the disabled state\n   */\n  disabled?: boolean;\n  /**\n   * Set the error state\n   */\n  error?: boolean;\n  /**\n   * Props to be passed to the radio input\n   */\n  inputProps?: Partial<InputHTMLAttributes<HTMLInputElement>>;\n  /**\n   * The label to be shown next to the radio icon\n   */\n  label?: ReactNode;\n  /**\n   * Name of the radio group\n   */\n  name?: string;\n  /**\n   * Callback for blur event\n   */\n  onBlur?: FocusEventHandler<HTMLInputElement>;\n  /**\n   * Callback for change event\n   */\n  onChange?: ChangeEventHandler<HTMLInputElement>;\n  /**\n   * Callback for focus event\n   */\n  onFocus?: FocusEventHandler<HTMLInputElement>;\n  /**\n   * Value of radio button\n   */\n  value?: string;\n}\n\nexport const RadioButton = forwardRef<HTMLLabelElement, RadioButtonProps>(\n  function RadioButton(props, ref) {\n    const {\n      checked: checkedProp,\n      className,\n      disabled,\n      error,\n      inputProps,\n      label,\n      name: nameProp,\n      onFocus,\n      onBlur,\n      onChange,\n      value,\n      ...rest\n    } = props;\n\n    const radioGroup = useRadioGroup();\n\n    const radioGroupChecked =\n      radioGroup.value != null && value != null\n        ? radioGroup.value === value\n        : checkedProp;\n    const name = nameProp ?? radioGroup.name;\n\n    const [checked, setCheckedState] = useControlled({\n      controlled: radioGroupChecked,\n      default: Boolean(checkedProp),\n      name: \"RadioBase\",\n      state: \"checked\",\n    });\n\n    const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n      const newChecked = event.target.checked;\n      setCheckedState(newChecked);\n\n      onChange?.(event);\n      radioGroup.onChange?.(event);\n    };\n\n    return (\n      <label\n        className={clsx(\n          withBaseName(),\n          {\n            [withBaseName(\"disabled\")]: disabled,\n          },\n          className\n        )}\n        ref={ref}\n        {...rest}\n      >\n        <input\n          className={withBaseName(\"input\")}\n          {...inputProps}\n          checked={checked}\n          disabled={disabled}\n          name={name}\n          value={value}\n          onBlur={onBlur}\n          onChange={handleChange}\n          onFocus={onFocus}\n          type=\"radio\"\n        />\n        <RadioButtonIcon checked={checked} error={error} disabled={disabled} />\n        {label}\n      </label>\n    );\n  }\n);\n"],"names":["RadioButton"],"mappings":";;;;;;;;;;;;;AAeA,MAAM,YAAA,GAAe,aAAa,iBAAiB,CAAA,CAAA;AAiD5C,MAAM,WAAc,GAAA,UAAA;AAAA,EACzB,SAASA,YAAY,CAAA,KAAA,EAAO,GAAK,EAAA;AAC/B,IAAM,MAAA;AAAA,MACJ,OAAS,EAAA,WAAA;AAAA,MACT,SAAA;AAAA,MACA,QAAA;AAAA,MACA,KAAA;AAAA,MACA,UAAA;AAAA,MACA,KAAA;AAAA,MACA,IAAM,EAAA,QAAA;AAAA,MACN,OAAA;AAAA,MACA,MAAA;AAAA,MACA,QAAA;AAAA,MACA,KAAA;AAAA,MACG,GAAA,IAAA;AAAA,KACD,GAAA,KAAA,CAAA;AAEJ,IAAA,MAAM,aAAa,aAAc,EAAA,CAAA;AAEjC,IAAM,MAAA,iBAAA,GACJ,WAAW,KAAS,IAAA,IAAA,IAAQ,SAAS,IACjC,GAAA,UAAA,CAAW,UAAU,KACrB,GAAA,WAAA,CAAA;AACN,IAAM,MAAA,IAAA,GAAO,8BAAY,UAAW,CAAA,IAAA,CAAA;AAEpC,IAAA,MAAM,CAAC,OAAA,EAAS,eAAe,CAAA,GAAI,aAAc,CAAA;AAAA,MAC/C,UAAY,EAAA,iBAAA;AAAA,MACZ,OAAA,EAAS,QAAQ,WAAW,CAAA;AAAA,MAC5B,IAAM,EAAA,WAAA;AAAA,MACN,KAAO,EAAA,SAAA;AAAA,KACR,CAAA,CAAA;AAED,IAAM,MAAA,YAAA,GAAqD,CAAC,KAAU,KAAA;AAhG1E,MAAA,IAAA,EAAA,CAAA;AAiGM,MAAM,MAAA,UAAA,GAAa,MAAM,MAAO,CAAA,OAAA,CAAA;AAChC,MAAA,eAAA,CAAgB,UAAU,CAAA,CAAA;AAE1B,MAAW,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAA,KAAA,CAAA,CAAA;AACX,MAAA,CAAA,EAAA,GAAA,UAAA,CAAW,aAAX,IAAsB,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,IAAA,CAAA,UAAA,EAAA,KAAA,CAAA,CAAA;AAAA,KACxB,CAAA;AAEA,IAAA,uBACG,IAAA,CAAA,OAAA,EAAA;AAAA,MACC,SAAW,EAAA,IAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb;AAAA,UACE,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,SAC9B;AAAA,QACA,SAAA;AAAA,OACF;AAAA,MACA,GAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAC,GAAA,CAAA,OAAA,EAAA;AAAA,UACC,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,UAC9B,GAAG,UAAA;AAAA,UACJ,OAAA;AAAA,UACA,QAAA;AAAA,UACA,IAAA;AAAA,UACA,KAAA;AAAA,UACA,MAAA;AAAA,UACA,QAAU,EAAA,YAAA;AAAA,UACV,OAAA;AAAA,UACA,IAAK,EAAA,OAAA;AAAA,SACP,CAAA;AAAA,wBACC,GAAA,CAAA,eAAA,EAAA;AAAA,UAAgB,OAAA;AAAA,UAAkB,KAAA;AAAA,UAAc,QAAA;AAAA,SAAoB,CAAA;AAAA,QACpE,KAAA;AAAA,OAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-es/packages/core/src/radio-button/RadioButtonGroup.css.js

@@ -0,0 +1,7 @@
+import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = "/* Styles applied to root element */\n.saltRadioButtonGroup {\n  border: none;\n  margin: 0;\n  padding: 0;\n}\n\n/* Styles applied when direction is vertical */\n.saltRadioButtonGroup-vertical {\n  display: flex;\n  gap: var(--salt-size-unit);\n  flex-direction: column;\n}\n\n/* Styles applied when direction is horizontal */\n.saltRadioButtonGroup-horizontal {\n  display: flex;\n  gap: var(--salt-size-unit);\n  flex-direction: row;\n  flex-wrap: wrap;\n}\n\n.saltRadioButtonGroup-noWrap {\n  flex-wrap: nowrap;\n}\n.saltRadioButtonGroup-noWrap .saltRadioButton {\n  white-space: break-spaces;\n}\n\n/* Styles applied to radio group's legend */\n.saltRadioButtonGroup-legend {\n  display: inline-block;\n  font-size: var(--formField-label-fontSize);\n  color: var(--salt-text-primary-foreground);\n  margin-bottom: calc(var(--salt-size-unit) * 2);\n}\n";
+styleInject(css_248z);
+
+export { css_248z as default };
+//# sourceMappingURL=RadioButtonGroup.css.js.map

package/dist-es/packages/core/src/radio-button/RadioButtonGroup.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioButtonGroup.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/dist-es/packages/core/src/radio-button/RadioButtonGroup.js

@@ -0,0 +1,57 @@
+import { jsx } from 'react/jsx-runtime';
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+import { makePrefixer } from '../utils/makePrefixer.js';
+import { useControlled } from '../utils/useControlled.js';
+import '../utils/useFloatingUI.js';
+import { useId } from '../utils/useId.js';
+import '../salt-provider/SaltProvider.js';
+import '../viewport/ViewportProvider.js';
+import { RadioGroupContext } from './internal/RadioGroupContext.js';
+import './RadioButtonGroup.css.js';
+
+const withBaseName = makePrefixer("saltRadioButtonGroup");
+const RadioButtonGroup = forwardRef(function RadioButtonGroup2(props, ref) {
+  const {
+    children,
+    className,
+    defaultValue,
+    direction = "vertical",
+    wrap = true,
+    name: nameProp,
+    onChange,
+    value: valueProp,
+    ...rest
+  } = props;
+  const [value, setStateValue] = useControlled({
+    controlled: valueProp,
+    default: defaultValue,
+    state: "value",
+    name: "RadioButtonGroup"
+  });
+  const handleChange = (event) => {
+    setStateValue(event.target.value);
+    onChange == null ? void 0 : onChange(event);
+  };
+  const name = useId(nameProp);
+  return /* @__PURE__ */ jsx("fieldset", {
+    className: clsx(
+      withBaseName(),
+      withBaseName(direction),
+      {
+        [withBaseName("noWrap")]: !wrap
+      },
+      className
+    ),
+    "data-testid": "radio-button-group",
+    ref,
+    ...rest,
+    children: /* @__PURE__ */ jsx(RadioGroupContext.Provider, {
+      value: { name, onChange: handleChange, value },
+      children
+    })
+  });
+});
+
+export { RadioButtonGroup };
+//# sourceMappingURL=RadioButtonGroup.js.map

package/dist-es/packages/core/src/radio-button/RadioButtonGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioButtonGroup.js","sources":["../src/radio-button/RadioButtonGroup.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n  ChangeEventHandler,\n  ComponentPropsWithoutRef,\n  forwardRef,\n} from \"react\";\nimport { makePrefixer, useControlled, useId } from \"../utils\";\nimport { RadioGroupContext } from \"./internal/RadioGroupContext\";\n\nimport \"./RadioButtonGroup.css\";\n\nconst withBaseName = makePrefixer(\"saltRadioButtonGroup\");\n\nexport interface RadioButtonGroupProps\n  extends Omit<ComponentPropsWithoutRef<\"fieldset\">, \"onChange\"> {\n  /**\n   * Set the selected value when initialized.\n   */\n  defaultValue?: string;\n  /**\n   * Set the group direction.\n   */\n  direction?: \"horizontal\" | \"vertical\";\n  /**\n   * Only for horizontal direction. When `true` the text in radio button label will wrap to fit within the container. Otherwise the radio buttons will wrap onto the next line.\n   */\n  wrap?: boolean;\n  /**\n   * The name to be set on each radio button within the group. If not set, then one will be generated for you.\n   */\n  name?: string;\n  /**\n   * Callback for change event.\n   */\n  onChange?: ChangeEventHandler<HTMLInputElement>;\n  /**\n   * The value of the radio group, required for a controlled component.\n   */\n  value?: string;\n}\n\nexport const RadioButtonGroup = forwardRef<\n  HTMLFieldSetElement,\n  RadioButtonGroupProps\n>(function RadioButtonGroup(props, ref) {\n  const {\n    children,\n    className,\n    defaultValue,\n    direction = \"vertical\",\n    wrap = true,\n    name: nameProp,\n    onChange,\n    value: valueProp,\n    ...rest\n  } = props;\n\n  const [value, setStateValue] = useControlled({\n    controlled: valueProp,\n    default: defaultValue,\n    state: \"value\",\n    name: \"RadioButtonGroup\",\n  });\n\n  const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n    setStateValue(event.target.value);\n    onChange?.(event);\n  };\n\n  const name = useId(nameProp);\n\n  return (\n    <fieldset\n      className={clsx(\n        withBaseName(),\n        withBaseName(direction),\n        {\n          [withBaseName(\"noWrap\")]: !wrap,\n        },\n        className\n      )}\n      data-testid=\"radio-button-group\"\n      ref={ref}\n      {...rest}\n    >\n      <RadioGroupContext.Provider\n        value={{ name, onChange: handleChange, value }}\n      >\n        {children}\n      </RadioGroupContext.Provider>\n    </fieldset>\n  );\n});\n"],"names":["RadioButtonGroup"],"mappings":";;;;;;;;;;;;AAWA,MAAM,YAAA,GAAe,aAAa,sBAAsB,CAAA,CAAA;AA8BjD,MAAM,gBAAmB,GAAA,UAAA,CAG9B,SAASA,iBAAAA,CAAiB,OAAO,GAAK,EAAA;AACtC,EAAM,MAAA;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,YAAA;AAAA,IACA,SAAY,GAAA,UAAA;AAAA,IACZ,IAAO,GAAA,IAAA;AAAA,IACP,IAAM,EAAA,QAAA;AAAA,IACN,QAAA;AAAA,IACA,KAAO,EAAA,SAAA;AAAA,IACJ,GAAA,IAAA;AAAA,GACD,GAAA,KAAA,CAAA;AAEJ,EAAA,MAAM,CAAC,KAAA,EAAO,aAAa,CAAA,GAAI,aAAc,CAAA;AAAA,IAC3C,UAAY,EAAA,SAAA;AAAA,IACZ,OAAS,EAAA,YAAA;AAAA,IACT,KAAO,EAAA,OAAA;AAAA,IACP,IAAM,EAAA,kBAAA;AAAA,GACP,CAAA,CAAA;AAED,EAAM,MAAA,YAAA,GAAqD,CAAC,KAAU,KAAA;AACpE,IAAc,aAAA,CAAA,KAAA,CAAM,OAAO,KAAK,CAAA,CAAA;AAChC,IAAW,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAA,KAAA,CAAA,CAAA;AAAA,GACb,CAAA;AAEA,EAAM,MAAA,IAAA,GAAO,MAAM,QAAQ,CAAA,CAAA;AAE3B,EAAA,uBACG,GAAA,CAAA,UAAA,EAAA;AAAA,IACC,SAAW,EAAA,IAAA;AAAA,MACT,YAAa,EAAA;AAAA,MACb,aAAa,SAAS,CAAA;AAAA,MACtB;AAAA,QACE,CAAC,YAAA,CAAa,QAAQ,CAAA,GAAI,CAAC,IAAA;AAAA,OAC7B;AAAA,MACA,SAAA;AAAA,KACF;AAAA,IACA,aAAY,EAAA,oBAAA;AAAA,IACZ,GAAA;AAAA,IACC,GAAG,IAAA;AAAA,IAEJ,QAAA,kBAAA,GAAA,CAAC,kBAAkB,QAAlB,EAAA;AAAA,MACC,KAAO,EAAA,EAAE,IAAM,EAAA,QAAA,EAAU,cAAc,KAAM,EAAA;AAAA,MAE5C,QAAA;AAAA,KACH,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-es/packages/core/src/radio-button/RadioButtonIcon.css.js

@@ -0,0 +1,7 @@
+import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = "/* Styles applied to radio button icon */\n.saltRadioButtonIcon {\n  width: var(--salt-size-selectable);\n  height: var(--salt-size-selectable);\n  border-radius: 50%;\n  flex: none;\n  margin-top: var(--salt-size-border);\n}\n\n/* Styles applied to radio button icon circle */\n.saltRadioButtonIcon-circle {\n  fill: var(--saltRadioButton-icon-fill, var(--salt-container-primary-background));\n  stroke: var(--saltRadioButton-icon-stroke, var(--salt-selectable-foreground));\n  stroke-width: var(--salt-size-border);\n}\n\n/* Styles applied to radio button icon on hover */\n.saltRadioButton:hover .saltRadioButtonIcon-circle {\n  fill: var(--saltRadioButton-icon-hover-fill, var(--salt-selectable-background-hover));\n  stroke: var(--saltRadioButton-icon-stroke-hover, var(--salt-selectable-foreground-hover));\n}\n\n/* Styles applied to radio button icon if checked */\n.saltRadioButtonIcon-checked .saltRadioButtonIcon-circle,\n.saltRadioButton:hover .saltRadioButtonIcon-checked .saltRadioButtonIcon-circle {\n  fill: var(--saltRadioButton-icon-checked-fill, var(--salt-selectable-foreground-selected));\n  stroke: var(--saltRadioButton-icon-checked-stroke, var(--salt-selectable-foreground-selected));\n}\n\n/* Styles applied to radio button icon if disabled */\n.saltRadioButtonIcon-disabled .saltRadioButtonIcon-circle,\n.saltRadioButton:hover .saltRadioButtonIcon-disabled .saltRadioButtonIcon-circle {\n  fill: var(--saltRadioButton-icon-disabled-fill, var(--salt-selectable-background));\n  stroke: var(--saltRadioButton-icon-disabled-stroke, var(--salt-selectable-foreground-disabled));\n}\n\n/* Styles applied to radio button icon if checked and disabled */\n.saltRadioButtonIcon-disabled.saltRadioButtonIcon-checked .saltRadioButtonIcon-circle,\n.saltRadioButton:hover .saltRadioButtonIcon-disabled.saltRadioButtonIcon-checked .saltRadioButtonIcon-circle {\n  fill: var(--saltRadioButton-icon-checked-disabled-fill, var(--salt-container-primary-background-disabled));\n  stroke: var(--saltRadioButton-icon-checked-disabled-stroke, var(--salt-selectable-foreground-selectedDisabled));\n  stroke-width: calc(var(--salt-size-border) * 6.5);\n}\n\n/* Styles applied to radio button icon with error */\n.saltRadioButtonIcon-error .saltRadioButtonIcon-circle,\n.saltRadioButton:hover .saltRadioButtonIcon-error .saltRadioButtonIcon-circle {\n  stroke: var(--saltRadioButton-icon-error-stroke, var(--salt-status-error-foreground));\n}\n\n.saltRadioButton:hover .saltRadioButtonIcon-error .saltRadioButtonIcon-circle {\n  fill: var(--saltRadioButton-icon-error-hover-fill, var(--salt-status-error-background-emphasize));\n}\n\n/* Styles applied to radio button icon with error and disabled */\n.saltRadioButtonIcon-error.saltRadioButtonIcon-disabled .saltRadioButtonIcon-circle,\n.saltRadioButton:hover .saltRadioButtonIcon-error.saltRadioButtonIcon-disabled .saltRadioButtonIcon-circle {\n  fill: var(--saltRadioButton-icon-error-disabled-fill, var(--salt-selectable-background));\n  stroke: var(--saltRadioButton-icon-error-disabled-stroke, var(--salt-status-error-foreground-disabled));\n}\n\n/* Styles applied to radio button icon when checked and with error */\n.saltRadioButtonIcon-checked.saltRadioButtonIcon-error .saltRadioButtonIcon-circle,\n.saltRadioButton:hover .saltRadioButtonIcon-checked.saltRadioButtonIcon-error .saltRadioButtonIcon-circle {\n  fill: var(--saltRadioButton-icon-error-fill, var(--salt-status-error-foreground));\n  stroke: var(--saltRadioButton-icon-error-stroke, var(--salt-status-error-foreground));\n}\n\n/* Styles applied to radio button icon when checked and with error and disabled */\n.saltRadioButtonIcon-disabled.saltRadioButtonIcon-checked.saltRadioButtonIcon-error .saltRadioButtonIcon-circle,\n.saltRadioButton:hover .saltRadioButtonIcon-disabled.saltRadioButtonIcon-checked.saltRadioButtonIcon-error .saltRadioButtonIcon-circle {\n  fill: var(--saltRadioButton-icon-error-disabled-fill, var(--salt-container-primary-background-disabled));\n  stroke: var(--saltRadioButton-icon-error-disabled-stroke, var(--salt-status-error-foreground-disabled));\n}\n\n/* Styles applied to checked inner circle */\n.saltRadioButtonIcon-checked-circle {\n  fill: var(--saltRadioButton-icon-inner-fill, var(--salt-container-primary-background));\n}\n\n/* Styles applied to checked inner circle when disabled */\n.saltRadioButtonIcon-disabled .saltRadioButtonIcon-checked-circle {\n  fill: var(--saltRadioButton-icon-inner-disabled-fill, var(--salt-container-primary-background-disabled));\n}\n";
+styleInject(css_248z);
+
+export { css_248z as default };
+//# sourceMappingURL=RadioButtonIcon.css.js.map

package/dist-es/packages/core/src/radio-button/RadioButtonIcon.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioButtonIcon.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/dist-es/packages/core/src/radio-button/RadioButtonIcon.js

@@ -0,0 +1,44 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import 'react';
+import { makePrefixer } from '../utils/makePrefixer.js';
+import '../utils/useFloatingUI.js';
+import '../utils/useId.js';
+import '../salt-provider/SaltProvider.js';
+import '../viewport/ViewportProvider.js';
+import { clsx } from 'clsx';
+import './RadioButtonIcon.css.js';
+
+const withBaseName = makePrefixer("saltRadioButtonIcon");
+const RadioButtonIcon = ({
+  checked,
+  error,
+  disabled
+}) => {
+  return /* @__PURE__ */ jsxs("svg", {
+    className: clsx(withBaseName(), {
+      [withBaseName("checked")]: checked,
+      [withBaseName("error")]: error,
+      [withBaseName("disabled")]: disabled
+    }),
+    height: "14",
+    viewBox: "0 0 14 14",
+    width: "14",
+    children: [
+      /* @__PURE__ */ jsx("circle", {
+        className: withBaseName("circle"),
+        cx: "7",
+        cy: "7",
+        r: "6.5"
+      }),
+      checked && /* @__PURE__ */ jsx("circle", {
+        className: withBaseName("checked-circle"),
+        cx: "7",
+        cy: "7",
+        r: "3.2"
+      })
+    ]
+  });
+};
+
+export { RadioButtonIcon };
+//# sourceMappingURL=RadioButtonIcon.js.map

package/dist-es/packages/core/src/radio-button/RadioButtonIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioButtonIcon.js","sources":["../src/radio-button/RadioButtonIcon.tsx"],"sourcesContent":["import { makePrefixer } from \"../utils\";\nimport { clsx } from \"clsx\";\nimport \"./RadioButtonIcon.css\";\n\nconst withBaseName = makePrefixer(\"saltRadioButtonIcon\");\n\nexport interface RadioButtonIconProps {\n  checked?: boolean;\n  error?: boolean;\n  disabled?: boolean;\n}\n\n/**\n * Default radio icon\n */\nexport const RadioButtonIcon = ({\n  checked,\n  error,\n  disabled,\n}: RadioButtonIconProps) => {\n  return (\n    <svg\n      className={clsx(withBaseName(), {\n        [withBaseName(\"checked\")]: checked,\n        [withBaseName(\"error\")]: error,\n        [withBaseName(\"disabled\")]: disabled,\n      })}\n      height=\"14\"\n      viewBox=\"0 0 14 14\"\n      width=\"14\"\n    >\n      <circle className={withBaseName(\"circle\")} cx=\"7\" cy=\"7\" r=\"6.5\" />\n      {checked && (\n        <circle\n          className={withBaseName(\"checked-circle\")}\n          cx=\"7\"\n          cy=\"7\"\n          r=\"3.2\"\n        />\n      )}\n    </svg>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;AAIA,MAAM,YAAA,GAAe,aAAa,qBAAqB,CAAA,CAAA;AAWhD,MAAM,kBAAkB,CAAC;AAAA,EAC9B,OAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AACF,CAA4B,KAAA;AAC1B,EAAA,uBACG,IAAA,CAAA,KAAA,EAAA;AAAA,IACC,SAAA,EAAW,IAAK,CAAA,YAAA,EAAgB,EAAA;AAAA,MAC9B,CAAC,YAAa,CAAA,SAAS,CAAI,GAAA,OAAA;AAAA,MAC3B,CAAC,YAAa,CAAA,OAAO,CAAI,GAAA,KAAA;AAAA,MACzB,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,KAC7B,CAAA;AAAA,IACD,MAAO,EAAA,IAAA;AAAA,IACP,OAAQ,EAAA,WAAA;AAAA,IACR,KAAM,EAAA,IAAA;AAAA,IAEN,QAAA,EAAA;AAAA,sBAAC,GAAA,CAAA,QAAA,EAAA;AAAA,QAAO,SAAA,EAAW,aAAa,QAAQ,CAAA;AAAA,QAAG,EAAG,EAAA,GAAA;AAAA,QAAI,EAAG,EAAA,GAAA;AAAA,QAAI,CAAE,EAAA,KAAA;AAAA,OAAM,CAAA;AAAA,MAChE,2BACE,GAAA,CAAA,QAAA,EAAA;AAAA,QACC,SAAA,EAAW,aAAa,gBAAgB,CAAA;AAAA,QACxC,EAAG,EAAA,GAAA;AAAA,QACH,EAAG,EAAA,GAAA;AAAA,QACH,CAAE,EAAA,KAAA;AAAA,OACJ,CAAA;AAAA,KAAA;AAAA,GAEJ,CAAA,CAAA;AAEJ;;;;"}

package/dist-es/packages/core/src/radio-button/internal/RadioGroupContext.js

@@ -0,0 +1,14 @@
+import { createContext } from '../../utils/createContext.js';
+import 'react';
+import '../../utils/useFloatingUI.js';
+import '../../utils/useId.js';
+import '../../salt-provider/SaltProvider.js';
+import '../../viewport/ViewportProvider.js';
+
+const RadioGroupContext = createContext(
+  "RadioGroupContext",
+  {}
+);
+
+export { RadioGroupContext };
+//# sourceMappingURL=RadioGroupContext.js.map

package/dist-es/packages/core/src/radio-button/internal/RadioGroupContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroupContext.js","sources":["../src/radio-button/internal/RadioGroupContext.tsx"],"sourcesContent":["import { ChangeEventHandler } from \"react\";\nimport { createContext } from \"../../utils\";\n\nexport interface RadioGroupContextValue {\n  name?: string;\n  value?: string;\n  onChange?: ChangeEventHandler<HTMLElement>;\n}\n\nexport const RadioGroupContext = createContext<RadioGroupContextValue>(\n  \"RadioGroupContext\",\n  {}\n);\n"],"names":[],"mappings":";;;;;;;AASO,MAAM,iBAAoB,GAAA,aAAA;AAAA,EAC/B,mBAAA;AAAA,EACA,EAAC;AACH;;;;"}

package/dist-es/packages/core/src/radio-button/internal/useRadioGroup.js

@@ -0,0 +1,9 @@
+import { useContext } from 'react';
+import { RadioGroupContext } from './RadioGroupContext.js';
+
+function useRadioGroup() {
+  return useContext(RadioGroupContext);
+}
+
+export { useRadioGroup };
+//# sourceMappingURL=useRadioGroup.js.map

package/dist-es/packages/core/src/radio-button/internal/useRadioGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRadioGroup.js","sources":["../src/radio-button/internal/useRadioGroup.ts"],"sourcesContent":["import { useContext } from \"react\";\nimport { RadioGroupContext } from \"./RadioGroupContext\";\n\nexport function useRadioGroup() {\n  return useContext(RadioGroupContext);\n}\n"],"names":[],"mappings":";;;AAGO,SAAS,aAAgB,GAAA;AAC9B,EAAA,OAAO,WAAW,iBAAiB,CAAA,CAAA;AACrC;;;;"}

package/dist-es/packages/core/src/spinner/Spinner.css.js

@@ -1,6 +1,6 @@
 import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
 
-var css_248z = "/* Styles applied to the root element */\n.saltSpinner {\n  position: relative;\n}\n\n/* Styles applied to the SVG stop elements */\n.saltSpinner-gradientStop {\n  stop-color: var(--saltSpinner-gradient-color, var(--salt-measured-fill));\n}\n\n/* Styles applied when `size=\"default\"` */\n.saltSpinner-default {\n  height: var(--salt-size-base);\n  width: var(--salt-size-base);\n}\n\n/* Styles applied when `size=\"large\"` */\n.saltSpinner-large {\n  height: calc(var(--salt-size-base) * 2);\n  width: calc(var(--salt-size-base) * 2);\n}\n\n/* Styles applied to the SVG */\n.saltSpinner-spinner {\n  animation: spinner 0.9s linear infinite;\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  left: 0;\n  top: 0;\n}\n\n@keyframes spinner {\n  0% {\n    transform: rotate(0);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n";
+var css_248z = "/* Styles applied to the root element */\n.saltSpinner {\n  position: relative;\n}\n\n/* Styles applied to the SVG stop elements */\n.saltSpinner-gradientStop {\n  stop-color: var(--saltSpinner-gradient-color, var(--salt-accent-background));\n}\n\n/* Styles applied when `size=\"default\"` */\n.saltSpinner-default {\n  height: var(--salt-size-base);\n  width: var(--salt-size-base);\n}\n\n/* Styles applied when `size=\"large\"` */\n.saltSpinner-large {\n  height: calc(var(--salt-size-base) * 2);\n  width: calc(var(--salt-size-base) * 2);\n}\n\n/* Styles applied to the SVG */\n.saltSpinner-spinner {\n  animation: spinner 0.9s linear infinite;\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  left: 0;\n  top: 0;\n}\n\n@keyframes spinner {\n  0% {\n    transform: rotate(0);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n";
 styleInject(css_248z);
 
 export { css_248z as default };

package/dist-es/packages/core/src/text/Text.css.js

@@ -1,6 +1,6 @@
 import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
 
-var css_248z = "/* Main css class. Style for body text */\n.saltText {\n  color: var(--saltText-color, var(--text-color));\n}\n\n.saltText::selection {\n  background: var(--saltText-highlight, var(--salt-text-background-selected));\n}\n\n/* Allows truncation */\n.saltText-lineClamp {\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: var(--text-max-rows, 0);\n  overflow: hidden;\n  word-break: break-word;\n}\n\n/* Primary variant */\n.saltText-primary {\n  --text-color: var(--salt-text-primary-foreground);\n}\n\n/* Disabled primary variant */\n.saltText-primary.saltText-disabled {\n  --text-color: var(--salt-text-primary-foreground-disabled);\n}\n\n/* Secondary variant */\n.saltText-secondary {\n  --text-color: var(--salt-text-secondary-foreground);\n}\n\n/* Disabled secondary variant */\n.saltText-secondary.saltText-disabled {\n  --text-color: var(--salt-text-secondary-foreground-disabled);\n}\n\n/* Body emphasis strong */\n.saltText strong {\n  font-weight: var(--salt-text-fontWeight-strong);\n}\n/* Body emphasis small */\n.saltText small {\n  font-size: inherit;\n  font-weight: var(--salt-text-fontWeight-small);\n}\n\n/* Display 1 */\n.saltText-display1.saltText {\n  font-size: var(--salt-text-display1-fontSize);\n  font-weight: var(--salt-text-display1-fontWeight);\n  line-height: var(--salt-text-display1-lineHeight);\n}\n\n/* Display 2 */\n.saltText-display2.saltText {\n  font-size: var(--salt-text-display2-fontSize);\n  font-weight: var(--salt-text-display2-fontWeight);\n  line-height: var(--salt-text-display2-lineHeight);\n}\n\n/* Display 3 */\n.saltText-display3.saltText {\n  font-size: var(--salt-text-display3-fontSize);\n  font-weight: var(--salt-text-display3-fontWeight);\n  line-height: var(--salt-text-display3-lineHeight);\n}\n\n/* Heading 1 */\nh1.saltText,\n.saltText-h1.saltText {\n  font-size: var(--salt-text-h1-fontSize);\n  font-weight: var(--salt-text-h1-fontWeight);\n  line-height: var(--salt-text-h1-lineHeight);\n}\n\n/* H1 emphasis strong */\nh1.saltText strong,\n.saltText-h1.saltText strong {\n  font-weight: var(--salt-text-h1-fontWeight-strong);\n}\n/* H1 emphasis small */\nh1.saltText small,\n.saltText-h1.saltText small {\n  font-size: inherit;\n  font-weight: var(--salt-text-h1-fontWeight-small);\n}\n\n/* Heading 2 */\nh2.saltText,\n.saltText-h2.saltText {\n  font-size: var(--salt-text-h2-fontSize);\n  font-weight: var(--salt-text-h2-fontWeight);\n  line-height: var(--salt-text-h2-lineHeight);\n}\n\n/* H2 emphasis strong */\nh2.saltText strong,\n.saltText-h2.saltText strong {\n  font-weight: var(--salt-text-h2-fontWeight-strong);\n}\n/* H2 emphasis small */\nh2.saltText small,\n.saltText-h2.saltText small {\n  font-size: inherit;\n  font-weight: var(--salt-text-h2-fontWeight-small);\n}\n\n/* Heading 3 */\nh3.saltText,\n.saltText-h3.saltText {\n  font-size: var(--salt-text-h3-fontSize);\n  font-weight: var(--salt-text-h3-fontWeight);\n  line-height: var(--salt-text-h3-lineHeight);\n}\n\n/* H3 emphasis strong */\nh3.saltText strong,\n.saltText-h3.saltText strong {\n  font-weight: var(--salt-text-h3-fontWeight-strong);\n}\n/* H3 emphasis small */\nh3.saltText small,\n.saltText-h3.saltText small {\n  font-size: inherit;\n  font-weight: var(--salt-text-h3-fontWeight-small);\n}\n\n/* Heading 4 */\nh4.saltText,\n.saltText-h4.saltText {\n  font-size: var(--salt-text-h4-fontSize);\n  font-weight: var(--salt-text-h4-fontWeight);\n  line-height: var(--salt-text-h4-lineHeight);\n}\n\n/* H4 emphasis strong */\nh4.saltText strong,\n.saltText-h4.saltText strong {\n  font-weight: var(--salt-text-h4-fontWeight-strong);\n}\n/* H4 emphasis small */\nh4.saltText small,\n.saltText-h4.saltText small {\n  font-size: inherit;\n  font-weight: var(--salt-text-h4-fontWeight-small);\n}\n\n/* Label */\nlabel.saltText,\n.saltText-label.saltText {\n  font-size: var(--salt-text-label-fontSize);\n  line-height: var(--salt-text-label-lineHeight);\n  font-weight: var(--salt-text-fontWeight);\n}\n\n/* Label emphasis strong */\nlabel.saltText strong,\n.saltText-label.saltText strong {\n  font-weight: var(--salt-text-fontWeight-strong);\n}\n/* Label emphasis small */\nlabel.saltText small,\n.saltText-label.saltText small {\n  font-size: inherit;\n  font-weight: var(--salt-text-fontWeight-small);\n}\n";
+var css_248z = "/* Main css class. Style for body text */\n.saltText {\n  color: var(--saltText-color, var(--text-color));\n  font-family: var(--saltText-fontFamily, var(--salt-text-fontFamily));\n}\n\n.saltText::selection {\n  background: var(--saltText-highlight, var(--salt-text-background-selected));\n}\n\n/* Allows truncation */\n.saltText-lineClamp {\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: var(--text-max-rows, 0);\n  overflow: hidden;\n  word-break: break-word;\n}\n\n/* Primary variant */\n.saltText-primary {\n  --text-color: var(--salt-text-primary-foreground);\n}\n\n/* Disabled primary variant */\n.saltText-primary.saltText-disabled {\n  --text-color: var(--salt-text-primary-foreground-disabled);\n}\n\n/* Secondary variant */\n.saltText-secondary {\n  --text-color: var(--salt-text-secondary-foreground);\n}\n\n/* Disabled secondary variant */\n.saltText-secondary.saltText-disabled {\n  --text-color: var(--salt-text-secondary-foreground-disabled);\n}\n\n/* Body emphasis strong */\n.saltText strong {\n  font-weight: var(--salt-text-fontWeight-strong);\n}\n/* Body emphasis small */\n.saltText small {\n  font-size: inherit;\n  font-weight: var(--salt-text-fontWeight-small);\n}\n\n/* Display 1 */\n.saltText-display1.saltText {\n  font-family: var(--salt-text-display1-fontFamily);\n  font-size: var(--salt-text-display1-fontSize);\n  font-weight: var(--salt-text-display1-fontWeight);\n  line-height: var(--salt-text-display1-lineHeight);\n}\n\n/* Display 2 */\n.saltText-display2.saltText {\n  font-family: var(--salt-text-display2-fontFamily);\n  font-size: var(--salt-text-display2-fontSize);\n  font-weight: var(--salt-text-display2-fontWeight);\n  line-height: var(--salt-text-display2-lineHeight);\n}\n\n/* Display 3 */\n.saltText-display3.saltText {\n  font-family: var(--salt-text-display3-fontFamily);\n  font-size: var(--salt-text-display3-fontSize);\n  font-weight: var(--salt-text-display3-fontWeight);\n  line-height: var(--salt-text-display3-lineHeight);\n}\n\n/* Heading 1 */\nh1.saltText,\n.saltText-h1.saltText {\n  font-family: var(--salt-text-h1-fontFamily);\n  font-size: var(--salt-text-h1-fontSize);\n  font-weight: var(--salt-text-h1-fontWeight);\n  line-height: var(--salt-text-h1-lineHeight);\n}\n\n/* H1 emphasis strong */\nh1.saltText strong,\n.saltText-h1.saltText strong {\n  font-weight: var(--salt-text-h1-fontWeight-strong);\n}\n/* H1 emphasis small */\nh1.saltText small,\n.saltText-h1.saltText small {\n  font-size: inherit;\n  font-weight: var(--salt-text-h1-fontWeight-small);\n}\n\n/* Heading 2 */\nh2.saltText,\n.saltText-h2.saltText {\n  font-family: var(--salt-text-h2-fontFamily);\n  font-size: var(--salt-text-h2-fontSize);\n  font-weight: var(--salt-text-h2-fontWeight);\n  line-height: var(--salt-text-h2-lineHeight);\n}\n\n/* H2 emphasis strong */\nh2.saltText strong,\n.saltText-h2.saltText strong {\n  font-weight: var(--salt-text-h2-fontWeight-strong);\n}\n/* H2 emphasis small */\nh2.saltText small,\n.saltText-h2.saltText small {\n  font-size: inherit;\n  font-weight: var(--salt-text-h2-fontWeight-small);\n}\n\n/* Heading 3 */\nh3.saltText,\n.saltText-h3.saltText {\n  font-family: var(--salt-text-h3-fontFamily);\n  font-size: var(--salt-text-h3-fontSize);\n  font-weight: var(--salt-text-h3-fontWeight);\n  line-height: var(--salt-text-h3-lineHeight);\n}\n\n/* H3 emphasis strong */\nh3.saltText strong,\n.saltText-h3.saltText strong {\n  font-weight: var(--salt-text-h3-fontWeight-strong);\n}\n/* H3 emphasis small */\nh3.saltText small,\n.saltText-h3.saltText small {\n  font-size: inherit;\n  font-weight: var(--salt-text-h3-fontWeight-small);\n}\n\n/* Heading 4 */\nh4.saltText,\n.saltText-h4.saltText {\n  font-family: var(--salt-text-h4-fontFamily);\n  font-size: var(--salt-text-h4-fontSize);\n  font-weight: var(--salt-text-h4-fontWeight);\n  line-height: var(--salt-text-h4-lineHeight);\n}\n\n/* H4 emphasis strong */\nh4.saltText strong,\n.saltText-h4.saltText strong {\n  font-weight: var(--salt-text-h4-fontWeight-strong);\n}\n/* H4 emphasis small */\nh4.saltText small,\n.saltText-h4.saltText small {\n  font-size: inherit;\n  font-weight: var(--salt-text-h4-fontWeight-small);\n}\n\n/* Label */\nlabel.saltText,\n.saltText-label.saltText {\n  font-family: var(--salt-text-label-fontFamily);\n  font-size: var(--salt-text-label-fontSize);\n  line-height: var(--salt-text-label-lineHeight);\n  font-weight: var(--salt-text-fontWeight);\n}\n\n/* Label emphasis strong */\nlabel.saltText strong,\n.saltText-label.saltText strong {\n  font-weight: var(--salt-text-fontWeight-strong);\n}\n/* Label emphasis small */\nlabel.saltText small,\n.saltText-label.saltText small {\n  font-size: inherit;\n  font-weight: var(--salt-text-fontWeight-small);\n}\n";
 styleInject(css_248z);
 
 export { css_248z as default };

package/dist-es/packages/core/src/tooltip/Tooltip.css.js

@@ -1,6 +1,6 @@
 import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
 
-var css_248z = "/* Styles applied to root component */\n.saltTooltip {\n  --tooltip-background: var(--saltTooltip-background, var(--salt-container-primary-background));\n  --tooltip-zIndex: var(--saltTooltip-zIndex, var(--salt-zIndex-flyover));\n}\n\n.saltTooltip {\n  background: var(--tooltip-background);\n  border-color: var(--saltTooltip-borderColor, var(--tooltip-status-borderColor));\n  border-width: var(--saltTooltip-borderWidth, var(--salt-size-border));\n  border-style: var(--saltTooltip-borderStyle, var(--salt-container-borderStyle));\n  box-shadow: var(--saltTooltip-shadow, var(--salt-overlayable-shadow-popout));\n  color: var(--saltTooltip-text-color, var(--salt-text-primary-foreground));\n  max-width: var(--saltTooltip-maxWidth, 230px);\n  padding: var(--saltTooltip-padding, var(--salt-size-unit));\n  position: relative;\n  text-align: var(--saltTooltip-textAlign, left);\n  z-index: var(--tooltip-zIndex);\n}\n\n/* Styles applied to container */\n.saltTooltip-container {\n  display: flex;\n  align-items: baseline;\n  position: relative;\n}\n\n/* Styles applied to content */\n.saltTooltip-content {\n  overflow: hidden;\n}\n\n/* Styles applied to status indicator */\n.saltTooltip-icon {\n  --saltIcon-margin: 0 var(--saltTooltip-icon-marginRight, 6px) 0 0;\n  vertical-align: top;\n  align-self: center;\n}\n\n/* Styles applied to arrow */\n.saltTooltip-arrow,\n.saltTooltip-arrow::after {\n  border: var(--salt-size-sharktooth-height) solid transparent;\n  position: absolute;\n}\n\n.saltTooltip-arrow::after {\n  content: \"\";\n}\n\n.saltTooltip[data-placement^=\"top\"] .saltTooltip-arrow {\n  border-top-color: var(--tooltip-status-borderColor);\n  bottom: -11px;\n}\n\n.saltTooltip[data-placement^=\"bottom\"] .saltTooltip-arrow {\n  border-bottom-color: var(--tooltip-status-borderColor);\n  top: -11px;\n}\n\n.saltTooltip[data-placement^=\"left\"] .saltTooltip-arrow {\n  border-left-color: var(--tooltip-status-borderColor);\n  right: -11px;\n}\n\n.saltTooltip[data-placement^=\"right\"] .saltTooltip-arrow {\n  border-right-color: var(--tooltip-status-borderColor);\n  left: -11px;\n}\n\n.saltTooltip[data-placement^=\"top\"] .saltTooltip-arrow::after {\n  border-top-color: var(--tooltip-background);\n  bottom: -4px;\n  left: calc(100% - var(--salt-size-sharktooth-height));\n}\n\n.saltTooltip[data-placement^=\"bottom\"] .saltTooltip-arrow::after {\n  border-bottom-color: var(--tooltip-background);\n  top: -4px;\n  left: calc(100% - var(--salt-size-sharktooth-height));\n}\n\n.saltTooltip[data-placement^=\"left\"] .saltTooltip-arrow::after {\n  border-left-color: var(--tooltip-background);\n  right: -4px;\n  top: calc(100% - var(--salt-size-sharktooth-height));\n}\n\n.saltTooltip[data-placement^=\"right\"] .saltTooltip-arrow::after {\n  border-right-color: var(--tooltip-background);\n  left: -4px;\n  top: calc(100% - var(--salt-size-sharktooth-height));\n}\n\n/* Styles applied when status = \"info\" */\n.saltTooltip-info {\n  --tooltip-status-borderColor: var(--salt-status-info-borderColor);\n}\n\n/* Styles applied when status = \"error\" */\n.saltTooltip-error {\n  --tooltip-status-borderColor: var(--salt-status-error-borderColor);\n}\n\n/* Styles applied when status = \"warning\" */\n.saltTooltip-warning {\n  --tooltip-status-borderColor: var(--salt-status-warning-borderColor);\n}\n\n/* Styles applied when status = \"success\" */\n.saltTooltip-success {\n  --tooltip-status-borderColor: var(--salt-status-success-borderColor);\n}\n";
+var css_248z = "/* Styles applied to root component */\n.saltTooltip {\n  --tooltip-background: var(--saltTooltip-background, var(--salt-container-primary-background));\n  --tooltip-zIndex: var(--saltTooltip-zIndex, var(--salt-zIndex-flyover));\n  /* apply icon margin based on the text line height so it's aligned on all densities */\n  --tooltip-icon-marginTop: calc((var(--salt-text-lineHeight) - 12px) / 2);\n}\n\n.saltTooltip {\n  background: var(--tooltip-background);\n  border-color: var(--saltTooltip-borderColor, var(--tooltip-status-borderColor));\n  border-width: var(--saltTooltip-borderWidth, var(--salt-size-border));\n  border-style: var(--saltTooltip-borderStyle, var(--salt-container-borderStyle));\n  box-shadow: var(--saltTooltip-shadow, var(--salt-overlayable-shadow-popout));\n  color: var(--saltTooltip-text-color, var(--salt-text-primary-foreground));\n  max-width: var(--saltTooltip-maxWidth, 230px);\n  padding: var(--saltTooltip-padding, var(--salt-size-unit));\n  position: relative;\n  text-align: var(--saltTooltip-textAlign, left);\n  z-index: var(--tooltip-zIndex);\n}\n\n/* Styles applied to container */\n.saltTooltip-container {\n  display: flex;\n  align-items: baseline;\n  position: relative;\n}\n\n/* Styles applied to content */\n.saltTooltip-content {\n  overflow: hidden;\n}\n\n/* Styles applied to status indicator */\n.saltTooltip-icon {\n  --saltIcon-margin: var(--tooltip-icon-marginTop) var(--saltTooltip-icon-marginRight, 6px) 0 0;\n  vertical-align: top;\n  align-self: flex-start;\n}\n\n/* Styles applied when status = \"info\" */\n.saltTooltip-info {\n  --tooltip-status-borderColor: var(--salt-status-info-borderColor);\n}\n\n/* Styles applied when status = \"error\" */\n.saltTooltip-error {\n  --tooltip-status-borderColor: var(--salt-status-error-borderColor);\n}\n\n/* Styles applied when status = \"warning\" */\n.saltTooltip-warning {\n  --tooltip-status-borderColor: var(--salt-status-warning-borderColor);\n}\n\n/* Styles applied when status = \"success\" */\n.saltTooltip-success {\n  --tooltip-status-borderColor: var(--salt-status-success-borderColor);\n}\n";
 styleInject(css_248z);
 
 export { css_248z as default };

package/dist-es/packages/core/src/tooltip/Tooltip.js

@@ -1,6 +1,7 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { clsx } from 'clsx';
 import { forwardRef, isValidElement, cloneElement } from 'react';
+import { FloatingArrow } from '@floating-ui/react';
 import { StatusIndicator } from '../status-indicator/StatusIndicator.js';
 import { makePrefixer } from '../utils/makePrefixer.js';
 import '../utils/useFloatingUI.js';
@@ -49,6 +50,10 @@ const Tooltip = forwardRef(
     );
     return /* @__PURE__ */ jsxs(Fragment, {
       children: [
+        isValidElement(children) && cloneElement(children, {
+          ...getTriggerProps(),
+          ref: triggerRef
+        }),
         open && !disabled && /* @__PURE__ */ jsxs("div", {
           className: clsx(withBaseName(), withBaseName(status), className),
           ref: floating,
@@ -68,15 +73,16 @@ const Tooltip = forwardRef(
                 })
               ]
             }),
-            !hideArrow && /* @__PURE__ */ jsx("div", {
+            !hideArrow && /* @__PURE__ */ jsx(FloatingArrow, {
+              ...arrowProps,
               className: withBaseName("arrow"),
-              ...arrowProps
+              strokeWidth: 1,
+              fill: "var(--salt-container-primary-background)",
+              stroke: "var(--tooltip-status-borderColor)",
+              height: 5,
+              width: 10
             })
           ]
-        }),
-        isValidElement(children) && cloneElement(children, {
-          ...getTriggerProps(),
-          ref: triggerRef
         })
       ]
     });

package/dist-es/packages/core/src/tooltip/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","sources":["../src/tooltip/Tooltip.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n  cloneElement,\n  forwardRef,\n  HTMLAttributes,\n  ReactNode,\n  isValidElement,\n} from \"react\";\nimport { StatusIndicator, ValidationStatus } from \"../status-indicator\";\nimport { UseFloatingUIProps, makePrefixer, useForkRef } from \"../utils\";\nimport { useTooltip, UseTooltipProps } from \"./useTooltip\";\nimport \"./Tooltip.css\";\n\nconst withBaseName = makePrefixer(\"saltTooltip\");\n\nexport interface TooltipProps\n  extends HTMLAttributes<HTMLDivElement>,\n    Pick<UseFloatingUIProps, \"open\" | \"onOpenChange\" | \"placement\"> {\n  /**\n   * The children will be the tooltip's trigger.\n   */\n  children: ReactNode;\n  /**\n   * Whether to hide the tooltip arrow. Defaults to `false`.\n   */\n  hideArrow?: boolean;\n  /**\n   * Whether to hide the state icon within the tooltip. Defaults to `false`.\n   */\n  hideIcon?: boolean;\n  /**\n   * Content displayed inside the tooltip. Can be a string or a React component.\n   */\n  content: ReactNode;\n  /**\n   * A string to determine the current status of the tooltip. Defaults to 'info'.\n   */\n  status?: ValidationStatus;\n  /**\n   * Delay in milliseconds before the tooltip is shown\n   */\n  enterDelay?: number;\n  /**\n   * Delay in milliseconds before the tooltip is hidden\n   */\n  leaveDelay?: number;\n  /**\n   * Option to not display the tooltip. Can be used in conditional situations like text truncation.\n   */\n  disabled?: boolean;\n  /**\n   * Option to remove the hover listener\n   */\n  disableHoverListener?: boolean;\n  /**\n   * Option to remove the focus listener\n   */\n  disableFocusListener?: boolean;\n}\n\nexport const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(\n  function Tooltip(props, ref) {\n    const {\n      children,\n      className,\n      disabled,\n      hideArrow = false,\n      hideIcon = false,\n      open: openProp,\n      content,\n      status = \"info\",\n      placement = \"right\",\n      enterDelay = 300,\n      leaveDelay = 0,\n      ...rest\n    } = props;\n\n    const hookProps: UseTooltipProps = {\n      open: openProp,\n      placement,\n      enterDelay,\n      leaveDelay,\n      ...rest,\n    };\n\n    const {\n      arrowProps,\n      open,\n      floating,\n      reference,\n      getTriggerProps,\n      getTooltipProps,\n    } = useTooltip(hookProps);\n\n    const triggerRef = useForkRef(\n      // @ts-ignore\n      isValidElement(children) ? children.ref : null,\n      reference\n    );\n\n    return (\n      <>\n        {open && !disabled && (\n          <div\n            className={clsx(withBaseName(), withBaseName(status), className)}\n            ref={floating}\n            {...getTooltipProps()}\n          >\n            <div className={withBaseName(\"container\")}>\n              {!hideIcon && (\n                <StatusIndicator\n                  status={status}\n                  size={1}\n                  className={withBaseName(\"icon\")}\n                />\n              )}\n              <span className={withBaseName(\"content\")}>{content}</span>\n            </div>\n            {!hideArrow && (\n              <div className={withBaseName(\"arrow\")} {...arrowProps} />\n            )}\n          </div>\n        )}\n\n        {isValidElement(children) &&\n          cloneElement(children, {\n            ...getTriggerProps(),\n            ref: triggerRef,\n          })}\n      </>\n    );\n  }\n);\n"],"names":["Tooltip"],"mappings":";;;;;;;;;;;;;AAaA,MAAM,YAAA,GAAe,aAAa,aAAa,CAAA,CAAA;AA+CxC,MAAM,OAAU,GAAA,UAAA;AAAA,EACrB,SAASA,QAAQ,CAAA,KAAA,EAAO,GAAK,EAAA;AAC3B,IAAM,MAAA;AAAA,MACJ,QAAA;AAAA,MACA,SAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAY,GAAA,KAAA;AAAA,MACZ,QAAW,GAAA,KAAA;AAAA,MACX,IAAM,EAAA,QAAA;AAAA,MACN,OAAA;AAAA,MACA,MAAS,GAAA,MAAA;AAAA,MACT,SAAY,GAAA,OAAA;AAAA,MACZ,UAAa,GAAA,GAAA;AAAA,MACb,UAAa,GAAA,CAAA;AAAA,MACV,GAAA,IAAA;AAAA,KACD,GAAA,KAAA,CAAA;AAEJ,IAAA,MAAM,SAA6B,GAAA;AAAA,MACjC,IAAM,EAAA,QAAA;AAAA,MACN,SAAA;AAAA,MACA,UAAA;AAAA,MACA,UAAA;AAAA,MACA,GAAG,IAAA;AAAA,KACL,CAAA;AAEA,IAAM,MAAA;AAAA,MACJ,UAAA;AAAA,MACA,IAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,eAAA;AAAA,MACA,eAAA;AAAA,KACF,GAAI,WAAW,SAAS,CAAA,CAAA;AAExB,IAAA,MAAM,UAAa,GAAA,UAAA;AAAA,MAEjB,cAAe,CAAA,QAAQ,CAAI,GAAA,QAAA,CAAS,GAAM,GAAA,IAAA;AAAA,MAC1C,SAAA;AAAA,KACF,CAAA;AAEA,IACE,uBAAA,IAAA,CAAA,QAAA,EAAA;AAAA,MACG,QAAA,EAAA;AAAA,QAAQ,IAAA,IAAA,CAAC,4BACP,IAAA,CAAA,KAAA,EAAA;AAAA,UACC,WAAW,IAAK,CAAA,YAAA,IAAgB,YAAa,CAAA,MAAM,GAAG,SAAS,CAAA;AAAA,UAC/D,GAAK,EAAA,QAAA;AAAA,UACJ,GAAG,eAAgB,EAAA;AAAA,UAEpB,QAAA,EAAA;AAAA,4BAAC,IAAA,CAAA,KAAA,EAAA;AAAA,cAAI,SAAA,EAAW,aAAa,WAAW,CAAA;AAAA,cACrC,QAAA,EAAA;AAAA,gBAAA,CAAC,4BACC,GAAA,CAAA,eAAA,EAAA;AAAA,kBACC,MAAA;AAAA,kBACA,IAAM,EAAA,CAAA;AAAA,kBACN,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,iBAChC,CAAA;AAAA,gCAED,GAAA,CAAA,MAAA,EAAA;AAAA,kBAAK,SAAA,EAAW,aAAa,SAAS,CAAA;AAAA,kBAAI,QAAA,EAAA,OAAA;AAAA,iBAAQ,CAAA;AAAA,eAAA;AAAA,aACrD,CAAA;AAAA,YACC,CAAC,6BACC,GAAA,CAAA,KAAA,EAAA;AAAA,cAAI,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,cAAI,GAAG,UAAA;AAAA,aAAY,CAAA;AAAA,WAAA;AAAA,SAE3D,CAAA;AAAA,QAGD,cAAe,CAAA,QAAQ,CACtB,IAAA,YAAA,CAAa,QAAU,EAAA;AAAA,UACrB,GAAG,eAAgB,EAAA;AAAA,UACnB,GAAK,EAAA,UAAA;AAAA,SACN,CAAA;AAAA,OAAA;AAAA,KACL,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
+{"version":3,"file":"Tooltip.js","sources":["../src/tooltip/Tooltip.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n  cloneElement,\n  forwardRef,\n  HTMLAttributes,\n  ReactNode,\n  isValidElement,\n} from \"react\";\nimport { FloatingArrow } from \"@floating-ui/react\";\nimport { StatusIndicator, ValidationStatus } from \"../status-indicator\";\nimport { UseFloatingUIProps, makePrefixer, useForkRef } from \"../utils\";\nimport { useTooltip, UseTooltipProps } from \"./useTooltip\";\nimport \"./Tooltip.css\";\n\nconst withBaseName = makePrefixer(\"saltTooltip\");\n\nexport interface TooltipProps\n  extends HTMLAttributes<HTMLDivElement>,\n    Pick<UseFloatingUIProps, \"open\" | \"onOpenChange\" | \"placement\"> {\n  /**\n   * The children will be the Tooltip's trigger.\n   */\n  children: ReactNode;\n  /**\n   * Whether to hide the Tooltip arrow. Defaults to `false`.\n   */\n  hideArrow?: boolean;\n  /**\n   * Whether to hide the status icon within the Tooltip. Defaults to `false`.\n   */\n  hideIcon?: boolean;\n  /**\n   * Content displayed inside the Tooltip. Can be a string or a React component.\n   */\n  content: ReactNode;\n  /**\n   * A string to determine the status of the Tooltip. Defaults to `info`.\n   */\n  status?: ValidationStatus;\n  /**\n   * Delay in milliseconds before the Tooltip is shown.\n   */\n  enterDelay?: number;\n  /**\n   * Delay in milliseconds before the Tooltip is hidden.\n   */\n  leaveDelay?: number;\n  /**\n   * Option to not display the Tooltip. Can be used in conditional situations like text truncation.\n   */\n  disabled?: boolean;\n  /**\n   * Option to remove the hover listener.\n   */\n  disableHoverListener?: boolean;\n  /**\n   * Option to remove the focus listener.\n   */\n  disableFocusListener?: boolean;\n}\n\nexport const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(\n  function Tooltip(props, ref) {\n    const {\n      children,\n      className,\n      disabled,\n      hideArrow = false,\n      hideIcon = false,\n      open: openProp,\n      content,\n      status = \"info\",\n      placement = \"right\",\n      enterDelay = 300,\n      leaveDelay = 0,\n      ...rest\n    } = props;\n\n    const hookProps: UseTooltipProps = {\n      open: openProp,\n      placement,\n      enterDelay,\n      leaveDelay,\n      ...rest,\n    };\n\n    const {\n      arrowProps,\n      open,\n      floating,\n      reference,\n      getTriggerProps,\n      getTooltipProps,\n    } = useTooltip(hookProps);\n\n    const triggerRef = useForkRef(\n      // @ts-ignore\n      isValidElement(children) ? children.ref : null,\n      reference\n    );\n\n    return (\n      <>\n        {isValidElement(children) &&\n          cloneElement(children, {\n            ...getTriggerProps(),\n            ref: triggerRef,\n          })}\n\n        {open && !disabled && (\n          <div\n            className={clsx(withBaseName(), withBaseName(status), className)}\n            ref={floating}\n            {...getTooltipProps()}\n          >\n            <div className={withBaseName(\"container\")}>\n              {!hideIcon && (\n                <StatusIndicator\n                  status={status}\n                  size={1}\n                  className={withBaseName(\"icon\")}\n                />\n              )}\n              <span className={withBaseName(\"content\")}>{content}</span>\n            </div>\n            {!hideArrow && (\n              <FloatingArrow\n                {...arrowProps}\n                className={withBaseName(\"arrow\")}\n                strokeWidth={1}\n                fill=\"var(--salt-container-primary-background)\"\n                stroke=\"var(--tooltip-status-borderColor)\"\n                height={5}\n                width={10}\n              />\n            )}\n          </div>\n        )}\n      </>\n    );\n  }\n);\n"],"names":["Tooltip"],"mappings":";;;;;;;;;;;;;;AAcA,MAAM,YAAA,GAAe,aAAa,aAAa,CAAA,CAAA;AA+CxC,MAAM,OAAU,GAAA,UAAA;AAAA,EACrB,SAASA,QAAQ,CAAA,KAAA,EAAO,GAAK,EAAA;AAC3B,IAAM,MAAA;AAAA,MACJ,QAAA;AAAA,MACA,SAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAY,GAAA,KAAA;AAAA,MACZ,QAAW,GAAA,KAAA;AAAA,MACX,IAAM,EAAA,QAAA;AAAA,MACN,OAAA;AAAA,MACA,MAAS,GAAA,MAAA;AAAA,MACT,SAAY,GAAA,OAAA;AAAA,MACZ,UAAa,GAAA,GAAA;AAAA,MACb,UAAa,GAAA,CAAA;AAAA,MACV,GAAA,IAAA;AAAA,KACD,GAAA,KAAA,CAAA;AAEJ,IAAA,MAAM,SAA6B,GAAA;AAAA,MACjC,IAAM,EAAA,QAAA;AAAA,MACN,SAAA;AAAA,MACA,UAAA;AAAA,MACA,UAAA;AAAA,MACA,GAAG,IAAA;AAAA,KACL,CAAA;AAEA,IAAM,MAAA;AAAA,MACJ,UAAA;AAAA,MACA,IAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,eAAA;AAAA,MACA,eAAA;AAAA,KACF,GAAI,WAAW,SAAS,CAAA,CAAA;AAExB,IAAA,MAAM,UAAa,GAAA,UAAA;AAAA,MAEjB,cAAe,CAAA,QAAQ,CAAI,GAAA,QAAA,CAAS,GAAM,GAAA,IAAA;AAAA,MAC1C,SAAA;AAAA,KACF,CAAA;AAEA,IACE,uBAAA,IAAA,CAAA,QAAA,EAAA;AAAA,MACG,QAAA,EAAA;AAAA,QAAe,cAAA,CAAA,QAAQ,CACtB,IAAA,YAAA,CAAa,QAAU,EAAA;AAAA,UACrB,GAAG,eAAgB,EAAA;AAAA,UACnB,GAAK,EAAA,UAAA;AAAA,SACN,CAAA;AAAA,QAEF,IAAA,IAAQ,CAAC,QAAA,oBACP,IAAA,CAAA,KAAA,EAAA;AAAA,UACC,WAAW,IAAK,CAAA,YAAA,IAAgB,YAAa,CAAA,MAAM,GAAG,SAAS,CAAA;AAAA,UAC/D,GAAK,EAAA,QAAA;AAAA,UACJ,GAAG,eAAgB,EAAA;AAAA,UAEpB,QAAA,EAAA;AAAA,4BAAC,IAAA,CAAA,KAAA,EAAA;AAAA,cAAI,SAAA,EAAW,aAAa,WAAW,CAAA;AAAA,cACrC,QAAA,EAAA;AAAA,gBAAA,CAAC,4BACC,GAAA,CAAA,eAAA,EAAA;AAAA,kBACC,MAAA;AAAA,kBACA,IAAM,EAAA,CAAA;AAAA,kBACN,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,iBAChC,CAAA;AAAA,gCAED,GAAA,CAAA,MAAA,EAAA;AAAA,kBAAK,SAAA,EAAW,aAAa,SAAS,CAAA;AAAA,kBAAI,QAAA,EAAA,OAAA;AAAA,iBAAQ,CAAA;AAAA,eAAA;AAAA,aACrD,CAAA;AAAA,YACC,CAAC,6BACC,GAAA,CAAA,aAAA,EAAA;AAAA,cACE,GAAG,UAAA;AAAA,cACJ,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,cAC/B,WAAa,EAAA,CAAA;AAAA,cACb,IAAK,EAAA,0CAAA;AAAA,cACL,MAAO,EAAA,mCAAA;AAAA,cACP,MAAQ,EAAA,CAAA;AAAA,cACR,KAAO,EAAA,EAAA;AAAA,aACT,CAAA;AAAA,WAAA;AAAA,SAEJ,CAAA;AAAA,OAAA;AAAA,KAEJ,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-es/packages/core/src/tooltip/useTooltip.js

@@ -69,6 +69,7 @@ function useTooltip(props) {
   ]);
   const arrowProps = {
     ref: arrowRef,
+    context,
     style: {
       left: arrowX ? `${arrowX}px` : "",
       top: arrowY ? `${arrowY}px` : ""

package/dist-es/packages/core/src/tooltip/useTooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTooltip.js","sources":["../src/tooltip/useTooltip.ts"],"sourcesContent":["import {\n  arrow,\n  flip,\n  offset,\n  safePolygon,\n  shift,\n  useDismiss,\n  useFocus,\n  useHover,\n  useInteractions,\n  useRole,\n  limitShift,\n} from \"@floating-ui/react\";\nimport { HTMLProps, useRef } from \"react\";\nimport { useControlled, UseFloatingUIProps, useFloatingUI } from \"../utils\";\nimport { useAriaAnnounce } from \"./useAriaAnnounce\";\n\nexport interface UseTooltipProps\n  extends Partial<\n    Pick<UseFloatingUIProps, \"onOpenChange\" | \"open\" | \"placement\">\n  > {\n  /**\n   * Do not respond to focus events.\n   */\n  disableFocusListener?: boolean;\n  /**\n   * Do not respond to hover events.\n   */\n  disableHoverListener?: boolean;\n  /**\n   * The number of milliseconds to wait before showing the tooltip.\n   * This prop won't impact the enter touch delay (`enterTouchDelay`).\n   */\n  enterDelay?: number;\n  /**\n   * The number of milliseconds to wait before hiding the tooltip.\n   * This prop won't impact the leave touch delay (`leaveTouchDelay`).\n   */\n  leaveDelay?: number;\n}\n\nexport function useTooltip(props?: UseTooltipProps) {\n  const {\n    enterDelay,\n    leaveDelay,\n    open: openProp,\n    onOpenChange,\n    placement: placementProp,\n    disableHoverListener,\n    disableFocusListener,\n  } = props || {};\n\n  const arrowRef = useRef<HTMLDivElement | null>(null);\n\n  const [open, setOpen] = useControlled({\n    controlled: openProp,\n    default: false,\n    name: \"Tooltip\",\n    state: \"open\",\n  });\n  const handleOpenChange = (open: boolean) => {\n    setOpen(open);\n    onOpenChange?.(open);\n  };\n\n  const {\n    floating,\n    reference,\n    x,\n    y,\n    strategy,\n    middlewareData: { arrow: { x: arrowX, y: arrowY } = {} },\n    placement,\n    context,\n  } = useFloatingUI({\n    open,\n    onOpenChange: handleOpenChange,\n    placement: placementProp,\n    middleware: [\n      offset(8),\n      flip(),\n      shift({ limiter: limitShift() }),\n      arrow({ element: arrowRef }),\n    ],\n  });\n\n  const { getReferenceProps, getFloatingProps } = useInteractions([\n    useHover(context, {\n      delay: {\n        open: enterDelay,\n        close: leaveDelay,\n      },\n      enabled: !disableHoverListener,\n      handleClose: safePolygon(),\n    }),\n    useFocus(context, { enabled: !disableFocusListener }),\n    useRole(context, { role: \"tooltip\" }),\n    useDismiss(context),\n    useAriaAnnounce(context, {\n      delay: {\n        open: enterDelay,\n        close: leaveDelay,\n      },\n    }),\n  ]);\n\n  const arrowProps = {\n    ref: arrowRef,\n    style: {\n      left: arrowX ? `${arrowX}px` : \"\",\n      top: arrowY ? `${arrowY}px` : \"\",\n    },\n  };\n\n  const getTooltipProps = (): HTMLProps<HTMLDivElement> => {\n    return getFloatingProps({\n      // @ts-ignore\n      \"data-placement\": placement,\n      ref: floating,\n      style: {\n        top: y ?? \"\",\n        left: x ?? \"\",\n        position: strategy,\n      },\n    });\n  };\n\n  const getTriggerProps = () =>\n    getReferenceProps({\n      ref: reference,\n    });\n\n  return {\n    arrowProps,\n    open,\n    floating,\n    reference,\n    getTooltipProps,\n    getTriggerProps,\n  };\n}\n"],"names":["open"],"mappings":";;;;;;;;;AAyCO,SAAS,WAAW,KAAyB,EAAA;AAClD,EAAM,MAAA;AAAA,IACJ,UAAA;AAAA,IACA,UAAA;AAAA,IACA,IAAM,EAAA,QAAA;AAAA,IACN,YAAA;AAAA,IACA,SAAW,EAAA,aAAA;AAAA,IACX,oBAAA;AAAA,IACA,oBAAA;AAAA,GACF,GAAI,SAAS,EAAC,CAAA;AAEd,EAAM,MAAA,QAAA,GAAW,OAA8B,IAAI,CAAA,CAAA;AAEnD,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAI,aAAc,CAAA;AAAA,IACpC,UAAY,EAAA,QAAA;AAAA,IACZ,OAAS,EAAA,KAAA;AAAA,IACT,IAAM,EAAA,SAAA;AAAA,IACN,KAAO,EAAA,MAAA;AAAA,GACR,CAAA,CAAA;AACD,EAAM,MAAA,gBAAA,GAAmB,CAACA,KAAkB,KAAA;AAC1C,IAAA,OAAA,CAAQA,KAAI,CAAA,CAAA;AACZ,IAAeA,YAAAA,IAAAA,IAAAA,GAAAA,KAAAA,CAAAA,GAAAA,YAAAA,CAAAA,KAAAA,CAAAA,CAAAA;AAAA,GACjB,CAAA;AAEA,EAAM,MAAA;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,CAAA;AAAA,IACA,CAAA;AAAA,IACA,QAAA;AAAA,IACA,cAAA,EAAgB,EAAE,KAAA,EAAO,EAAE,CAAA,EAAG,QAAQ,CAAG,EAAA,MAAA,EAAW,GAAA,EAAG,EAAA;AAAA,IACvD,SAAA;AAAA,IACA,OAAA;AAAA,MACE,aAAc,CAAA;AAAA,IAChB,IAAA;AAAA,IACA,YAAc,EAAA,gBAAA;AAAA,IACd,SAAW,EAAA,aAAA;AAAA,IACX,UAAY,EAAA;AAAA,MACV,OAAO,CAAC,CAAA;AAAA,MACR,IAAK,EAAA;AAAA,MACL,KAAM,CAAA,EAAE,OAAS,EAAA,UAAA,IAAc,CAAA;AAAA,MAC/B,KAAM,CAAA,EAAE,OAAS,EAAA,QAAA,EAAU,CAAA;AAAA,KAC7B;AAAA,GACD,CAAA,CAAA;AAED,EAAA,MAAM,EAAE,iBAAA,EAAmB,gBAAiB,EAAA,GAAI,eAAgB,CAAA;AAAA,IAC9D,SAAS,OAAS,EAAA;AAAA,MAChB,KAAO,EAAA;AAAA,QACL,IAAM,EAAA,UAAA;AAAA,QACN,KAAO,EAAA,UAAA;AAAA,OACT;AAAA,MACA,SAAS,CAAC,oBAAA;AAAA,MACV,aAAa,WAAY,EAAA;AAAA,KAC1B,CAAA;AAAA,IACD,SAAS,OAAS,EAAA,EAAE,OAAS,EAAA,CAAC,sBAAsB,CAAA;AAAA,IACpD,OAAQ,CAAA,OAAA,EAAS,EAAE,IAAA,EAAM,WAAW,CAAA;AAAA,IACpC,WAAW,OAAO,CAAA;AAAA,IAClB,gBAAgB,OAAS,EAAA;AAAA,MACvB,KAAO,EAAA;AAAA,QACL,IAAM,EAAA,UAAA;AAAA,QACN,KAAO,EAAA,UAAA;AAAA,OACT;AAAA,KACD,CAAA;AAAA,GACF,CAAA,CAAA;AAED,EAAA,MAAM,UAAa,GAAA;AAAA,IACjB,GAAK,EAAA,QAAA;AAAA,IACL,KAAO,EAAA;AAAA,MACL,IAAA,EAAM,MAAS,GAAA,CAAA,EAAG,MAAa,CAAA,EAAA,CAAA,GAAA,EAAA;AAAA,MAC/B,GAAA,EAAK,MAAS,GAAA,CAAA,EAAG,MAAa,CAAA,EAAA,CAAA,GAAA,EAAA;AAAA,KAChC;AAAA,GACF,CAAA;AAEA,EAAA,MAAM,kBAAkB,MAAiC;AACvD,IAAA,OAAO,gBAAiB,CAAA;AAAA,MAEtB,gBAAkB,EAAA,SAAA;AAAA,MAClB,GAAK,EAAA,QAAA;AAAA,MACL,KAAO,EAAA;AAAA,QACL,KAAK,CAAK,IAAA,IAAA,GAAA,CAAA,GAAA,EAAA;AAAA,QACV,MAAM,CAAK,IAAA,IAAA,GAAA,CAAA,GAAA,EAAA;AAAA,QACX,QAAU,EAAA,QAAA;AAAA,OACZ;AAAA,KACD,CAAA,CAAA;AAAA,GACH,CAAA;AAEA,EAAM,MAAA,eAAA,GAAkB,MACtB,iBAAkB,CAAA;AAAA,IAChB,GAAK,EAAA,SAAA;AAAA,GACN,CAAA,CAAA;AAEH,EAAO,OAAA;AAAA,IACL,UAAA;AAAA,IACA,IAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,eAAA;AAAA,IACA,eAAA;AAAA,GACF,CAAA;AACF;;;;"}
+{"version":3,"file":"useTooltip.js","sources":["../src/tooltip/useTooltip.ts"],"sourcesContent":["import {\n  arrow,\n  flip,\n  offset,\n  safePolygon,\n  shift,\n  useDismiss,\n  useFocus,\n  useHover,\n  useInteractions,\n  useRole,\n  limitShift,\n} from \"@floating-ui/react\";\nimport { HTMLProps, useRef } from \"react\";\nimport { useControlled, UseFloatingUIProps, useFloatingUI } from \"../utils\";\nimport { useAriaAnnounce } from \"./useAriaAnnounce\";\n\nexport interface UseTooltipProps\n  extends Partial<\n    Pick<UseFloatingUIProps, \"onOpenChange\" | \"open\" | \"placement\">\n  > {\n  /**\n   * Do not respond to focus events.\n   */\n  disableFocusListener?: boolean;\n  /**\n   * Do not respond to hover events.\n   */\n  disableHoverListener?: boolean;\n  /**\n   * The number of milliseconds to wait before showing the tooltip.\n   * This prop won't impact the enter touch delay (`enterTouchDelay`).\n   */\n  enterDelay?: number;\n  /**\n   * The number of milliseconds to wait before hiding the tooltip.\n   * This prop won't impact the leave touch delay (`leaveTouchDelay`).\n   */\n  leaveDelay?: number;\n}\n\nexport function useTooltip(props?: UseTooltipProps) {\n  const {\n    enterDelay,\n    leaveDelay,\n    open: openProp,\n    onOpenChange,\n    placement: placementProp,\n    disableHoverListener,\n    disableFocusListener,\n  } = props || {};\n\n  const arrowRef = useRef<SVGSVGElement | null>(null);\n\n  const [open, setOpen] = useControlled({\n    controlled: openProp,\n    default: false,\n    name: \"Tooltip\",\n    state: \"open\",\n  });\n  const handleOpenChange = (open: boolean) => {\n    setOpen(open);\n    onOpenChange?.(open);\n  };\n\n  const {\n    floating,\n    reference,\n    x,\n    y,\n    strategy,\n    middlewareData: { arrow: { x: arrowX, y: arrowY } = {} },\n    placement,\n    context,\n  } = useFloatingUI({\n    open,\n    onOpenChange: handleOpenChange,\n    placement: placementProp,\n    middleware: [\n      offset(8),\n      flip(),\n      shift({ limiter: limitShift() }),\n      arrow({ element: arrowRef }),\n    ],\n  });\n\n  const { getReferenceProps, getFloatingProps } = useInteractions([\n    useHover(context, {\n      delay: {\n        open: enterDelay,\n        close: leaveDelay,\n      },\n      enabled: !disableHoverListener,\n      handleClose: safePolygon(),\n    }),\n    useFocus(context, { enabled: !disableFocusListener }),\n    useRole(context, { role: \"tooltip\" }),\n    useDismiss(context),\n    useAriaAnnounce(context, {\n      delay: {\n        open: enterDelay,\n        close: leaveDelay,\n      },\n    }),\n  ]);\n\n  const arrowProps = {\n    ref: arrowRef,\n    context,\n    style: {\n      left: arrowX ? `${arrowX}px` : \"\",\n      top: arrowY ? `${arrowY}px` : \"\",\n    },\n  };\n\n  const getTooltipProps = (): HTMLProps<HTMLDivElement> => {\n    return getFloatingProps({\n      // @ts-ignore\n      \"data-placement\": placement,\n      ref: floating,\n      style: {\n        top: y ?? \"\",\n        left: x ?? \"\",\n        position: strategy,\n      },\n    });\n  };\n\n  const getTriggerProps = () =>\n    getReferenceProps({\n      ref: reference,\n    });\n\n  return {\n    arrowProps,\n    open,\n    floating,\n    reference,\n    getTooltipProps,\n    getTriggerProps,\n  };\n}\n"],"names":["open"],"mappings":"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"}

package/dist-es/packages/core/src/utils/capitalize.js

@@ -0,0 +1,6 @@
+function capitalize(value) {
+  return value.length > 0 ? value[0].toUpperCase() + value.slice(1) : value;
+}
+
+export { capitalize };
+//# sourceMappingURL=capitalize.js.map

package/dist-es/packages/core/src/utils/capitalize.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"capitalize.js","sources":["../src/utils/capitalize.ts"],"sourcesContent":["export function capitalize(value: string): string {\n  return value.length > 0 ? value[0].toUpperCase() + value.slice(1) : value;\n}\n"],"names":[],"mappings":"AAAO,SAAS,WAAW,KAAuB,EAAA;AAChD,EAAO,OAAA,KAAA,CAAM,MAAS,GAAA,CAAA,GAAI,KAAM,CAAA,CAAA,CAAA,CAAG,aAAgB,GAAA,KAAA,CAAM,KAAM,CAAA,CAAC,CAAI,GAAA,KAAA,CAAA;AACtE;;;;"}

package/dist-es/packages/core/src/utils/useFloatingUI.js.map

@@ -1 +1 @@
-{"version":3,"file":"useFloatingUI.js","sources":["../src/utils/useFloatingUI.tsx"],"sourcesContent":["import type { Middleware, Placement, Strategy } from \"@floating-ui/react\";\nimport {\n  autoUpdate,\n  flip,\n  limitShift,\n  shift,\n  useFloating,\n} from \"@floating-ui/react\";\n\nexport type UseFloatingUIProps = {\n  /**\n   * Set position relative to trigger\n   */\n  placement?: Placement;\n  strategy?: Strategy;\n  middleware?: Middleware[];\n  /**\n   * Set visible state. Defaults to false\n   */\n  open?: boolean;\n  /**\n   * Callback function triggered when open state changes\n   */\n  onOpenChange?: (open: boolean) => void;\n};\n\nexport const DEFAULT_FLOATING_UI_MIDDLEWARE = [\n  flip(),\n  shift({ limiter: limitShift() }),\n];\n\nexport function useFloatingUI(\n  props: UseFloatingUIProps\n): ReturnType<typeof useFloating> {\n  const {\n    placement,\n    strategy,\n    middleware = DEFAULT_FLOATING_UI_MIDDLEWARE,\n    open = false,\n    onOpenChange,\n  } = props;\n\n  const { reference, floating, refs, update, ...rest } = useFloating({\n    placement,\n    strategy,\n    middleware,\n    open,\n    onOpenChange,\n    whileElementsMounted: autoUpdate,\n  });\n\n  return {\n    reference,\n    floating,\n    refs,\n    update,\n    ...rest,\n  };\n}\n"],"names":[],"mappings":";;AA0BO,MAAM,8BAAiC,GAAA;AAAA,EAC5C,IAAK,EAAA;AAAA,EACL,KAAM,CAAA,EAAE,OAAS,EAAA,UAAA,IAAc,CAAA;AACjC,EAAA;AAEO,SAAS,cACd,KACgC,EAAA;AAChC,EAAM,MAAA;AAAA,IACJ,SAAA;AAAA,IACA,QAAA;AAAA,IACA,UAAa,GAAA,8BAAA;AAAA,IACb,IAAO,GAAA,KAAA;AAAA,IACP,YAAA;AAAA,GACE,GAAA,KAAA,CAAA;AAEJ,EAAA,MAAM,EAAE,SAAW,EAAA,QAAA,EAAU,MAAM,MAAW,EAAA,GAAA,IAAA,KAAS,WAAY,CAAA;AAAA,IACjE,SAAA;AAAA,IACA,QAAA;AAAA,IACA,UAAA;AAAA,IACA,IAAA;AAAA,IACA,YAAA;AAAA,IACA,oBAAsB,EAAA,UAAA;AAAA,GACvB,CAAA,CAAA;AAED,EAAO,OAAA;AAAA,IACL,SAAA;AAAA,IACA,QAAA;AAAA,IACA,IAAA;AAAA,IACA,MAAA;AAAA,IACA,GAAG,IAAA;AAAA,GACL,CAAA;AACF;;;;"}
+{"version":3,"file":"useFloatingUI.js","sources":["../src/utils/useFloatingUI.tsx"],"sourcesContent":["import type { Middleware, Placement, Strategy } from \"@floating-ui/react\";\nimport {\n  autoUpdate,\n  flip,\n  limitShift,\n  shift,\n  useFloating,\n} from \"@floating-ui/react\";\n\nexport type UseFloatingUIProps = {\n  /**\n   * Sets position relative to trigger.\n   */\n  placement?: Placement;\n  strategy?: Strategy;\n  middleware?: Middleware[];\n  /**\n   * Sets visible state.\n   */\n  open?: boolean;\n  /**\n   * Callback function triggered when open state changes.\n   */\n  onOpenChange?: (open: boolean) => void;\n};\n\nexport const DEFAULT_FLOATING_UI_MIDDLEWARE = [\n  flip(),\n  shift({ limiter: limitShift() }),\n];\n\nexport function useFloatingUI(\n  props: UseFloatingUIProps\n): ReturnType<typeof useFloating> {\n  const {\n    placement,\n    strategy,\n    middleware = DEFAULT_FLOATING_UI_MIDDLEWARE,\n    open = false,\n    onOpenChange,\n  } = props;\n\n  const { reference, floating, refs, update, ...rest } = useFloating({\n    placement,\n    strategy,\n    middleware,\n    open,\n    onOpenChange,\n    whileElementsMounted: autoUpdate,\n  });\n\n  return {\n    reference,\n    floating,\n    refs,\n    update,\n    ...rest,\n  };\n}\n"],"names":[],"mappings":";;AA0BO,MAAM,8BAAiC,GAAA;AAAA,EAC5C,IAAK,EAAA;AAAA,EACL,KAAM,CAAA,EAAE,OAAS,EAAA,UAAA,IAAc,CAAA;AACjC,EAAA;AAEO,SAAS,cACd,KACgC,EAAA;AAChC,EAAM,MAAA;AAAA,IACJ,SAAA;AAAA,IACA,QAAA;AAAA,IACA,UAAa,GAAA,8BAAA;AAAA,IACb,IAAO,GAAA,KAAA;AAAA,IACP,YAAA;AAAA,GACE,GAAA,KAAA,CAAA;AAEJ,EAAA,MAAM,EAAE,SAAW,EAAA,QAAA,EAAU,MAAM,MAAW,EAAA,GAAA,IAAA,KAAS,WAAY,CAAA;AAAA,IACjE,SAAA;AAAA,IACA,QAAA;AAAA,IACA,UAAA;AAAA,IACA,IAAA;AAAA,IACA,YAAA;AAAA,IACA,oBAAsB,EAAA,UAAA;AAAA,GACvB,CAAA,CAAA;AAED,EAAO,OAAA;AAAA,IACL,SAAA;AAAA,IACA,QAAA;AAAA,IACA,IAAA;AAAA,IACA,MAAA;AAAA,IACA,GAAG,IAAA;AAAA,GACL,CAAA;AACF;;;;"}

package/dist-types/avatar/index.d.ts

@@ -1 +1,2 @@
 export * from "./Avatar";
+export * from "./useAvatarImage";

package/dist-types/avatar/useAvatarImage.d.ts

@@ -0,0 +1,2 @@
+import { ImgHTMLAttributes } from "react";
+export declare function useAvatarImage({ src }: ImgHTMLAttributes<HTMLImageElement>): "loading" | "error" | "pending" | "loaded";

package/dist-types/card/Card.d.ts

@@ -2,17 +2,17 @@ import { ComponentPropsWithoutRef } from "react";
 import "./Card.css";
 export interface CardProps extends ComponentPropsWithoutRef<"div"> {
     /**
+     * **Deprecated:** Use the InteractableCard component instead
+     *
      * If `true`, the card will be disabled.
      */
     disabled?: boolean;
     /**
+     * **Deprecated:** Use the InteractableCard component instead
+     *
      * If `true`, interactive styles will be applied to `Card`. These styles give prominence to certain content
      * on the page.
      */
     interactable?: boolean;
 }
-/**
- * Card component is a sheet if material that serves as an entry point to more detailed information.
- * Cards display content composed of different elements whose size or supported actions vary.
- */
 export declare const Card: import("react").ForwardRefExoticComponent<CardProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/card/InteractableCard.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { CardProps } from "./Card";
+import "./InteractableCard.css";
+export interface InteractableCardProps extends Omit<CardProps, "disabled" | "interactable"> {
+    /**
+     * Accent border position: defaults to "bottom"
+     */
+    accentPlacement?: "bottom" | "top" | "left" | "right";
+    /**
+     * If `true`, the card will be disabled.
+     */
+    disabled?: boolean;
+}
+export declare const InteractableCard: import("react").ForwardRefExoticComponent<InteractableCardProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/card/index.d.ts

@@ -1 +1,2 @@
 export * from "./Card";
+export * from "./InteractableCard";

package/dist-types/card/useInteractableCard.d.ts

@@ -0,0 +1,21 @@
+import { FocusEvent, KeyboardEvent, MouseEvent } from "react";
+export interface CardHookProps<T extends Element> {
+    disabled?: boolean;
+    onKeyUp?: (event: KeyboardEvent<T>) => void;
+    onKeyDown?: (event: KeyboardEvent<T>) => void;
+    onClick?: (event: MouseEvent<T>) => void;
+    onBlur?: (event: FocusEvent<T>) => void;
+}
+export interface CardHookResult<T extends Element> {
+    active: boolean;
+    cardProps: {
+        "aria-disabled"?: boolean;
+        disabled?: boolean;
+        tabIndex: number;
+        onBlur: (event: FocusEvent<T>) => void;
+        onClick?: (event: MouseEvent<T>) => void;
+        onKeyDown: (event: KeyboardEvent<T>) => void;
+        onKeyUp: (event: KeyboardEvent<T>) => void;
+    };
+}
+export declare const useInteractableCard: <T extends Element>({ disabled, onKeyUp, onKeyDown, onClick, onBlur, }: CardHookProps<T>) => CardHookResult<T>;