@salt-ds/core 1.60.0 → 1.61.0

package/dist-es/navigation-item/NavigationItem.js

@@ -28,6 +28,7 @@ const NavigationItem = forwardRef(
       level = 0,
       onExpand,
       style: styleProp,
+      "aria-controls": ariaControls,
       ...rest
     } = props;
     const targetWindow = useWindow();
@@ -65,6 +66,7 @@ const NavigationItem = forwardRef(
             ),
             render: render ?? (isLink ? void 0 : /* @__PURE__ */ jsx("button", { type: "button" })),
             "aria-expanded": isLink ? void 0 : expanded,
+            "aria-controls": ariaControls,
             onClick: handleClick,
             "aria-current": isLink && active ? "page" : void 0,
             href,

package/dist-es/navigation-item/NavigationItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationItem.js","sources":["../src/navigation-item/NavigationItem.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type MouseEvent,\n  type MouseEventHandler,\n} from \"react\";\nimport type { RenderPropsType } from \"../utils\";\nimport { makePrefixer } from \"../utils\";\nimport { ExpansionIcon } from \"./ExpansionIcon\";\nimport navigationItemCss from \"./NavigationItem.css\";\nimport { NavigationItemAction } from \"./NavigationItemAction\";\n\nexport interface NavigationItemProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * Whether the navigation item is active.\n   */\n  active?: boolean;\n  /**\n   * Whether the nested group is collapsed and there is an active nested item within it.\n   */\n  blurActive?: boolean;\n  /**\n   * Whether the navigation item is expanded.\n   */\n  expanded?: boolean;\n  /**\n   * Level of nesting.\n   */\n  level?: number;\n  /**\n   * The orientation of the navigation item.\n   */\n  orientation?: \"horizontal\" | \"vertical\";\n  /**\n   * Whether the navigation item is a parent with nested items.\n   */\n  parent?: boolean;\n  /**\n   * Render prop to enable customisation of navigation item element.\n   */\n  render?: RenderPropsType[\"render\"];\n  /**\n   * Action to be triggered when the navigation item is expanded.\n   */\n  onExpand?: MouseEventHandler<HTMLButtonElement>;\n  /**\n   * Href to be passed to the Link element.\n   */\n  href?: string;\n}\n\nconst withBaseName = makePrefixer(\"saltNavigationItem\");\n\nexport const NavigationItem = forwardRef<HTMLDivElement, NavigationItemProps>(\n  function NavigationItem(props, ref) {\n    const {\n      active,\n      blurActive,\n      render,\n      children,\n      className,\n      expanded = false,\n      href,\n      orientation = \"horizontal\",\n      parent,\n      level = 0,\n      onExpand,\n      style: styleProp,\n      ...rest\n    } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-navigation-item\",\n      css: navigationItemCss,\n      window: targetWindow,\n    });\n\n    const style = {\n      ...styleProp,\n      \"--saltNavigationItem-level\": `${level}`,\n    };\n\n    const isLink = href !== undefined;\n\n    const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n      onExpand?.(event);\n    };\n\n    return (\n      <div\n        ref={ref}\n        className={clsx(withBaseName(), className)}\n        style={style}\n        {...rest}\n      >\n        <NavigationItemAction\n          className={clsx(\n            withBaseName(\"wrapper\"),\n            {\n              [withBaseName(\"active\")]: active || blurActive,\n              [withBaseName(\"blurActive\")]: blurActive,\n              [withBaseName(\"rootItem\")]: level === 0,\n            },\n            withBaseName(orientation),\n          )}\n          render={render ?? (isLink ? undefined : <button type=\"button\" />)}\n          aria-expanded={isLink ? undefined : expanded}\n          onClick={handleClick}\n          aria-current={isLink && active ? \"page\" : undefined}\n          href={href}\n        >\n          <span className={withBaseName(\"label\")}>{children}</span>\n          {parent ? (\n            <ExpansionIcon expanded={expanded} orientation={orientation} />\n          ) : null}\n        </NavigationItemAction>\n      </div>\n    );\n  },\n);\n"],"names":["NavigationItem","navigationItemCss"],"mappings":";;;;;;;;;;;;;;AAsDA,MAAM,YAAA,GAAe,aAAa,oBAAoB,CAAA;AAE/C,MAAM,cAAA,GAAiB,UAAA;AAAA,EAC5B,SAASA,eAAAA,CAAe,KAAA,EAAO,GAAA,EAAK;AAClC,IAAA,MAAM;AAAA,MACJ,MAAA;AAAA,MACA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,QAAA,GAAW,KAAA;AAAA,MACX,IAAA;AAAA,MACA,WAAA,GAAc,YAAA;AAAA,MACd,MAAA;AAAA,MACA,KAAA,GAAQ,CAAA;AAAA,MACR,QAAA;AAAA,MACA,KAAA,EAAO,SAAA;AAAA,MACP,GAAG;AAAA,KACL,GAAI,KAAA;AAEJ,IAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,IAAA,wBAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,sBAAA;AAAA,MACR,GAAA,EAAKC,QAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,MAAM,KAAA,GAAQ;AAAA,MACZ,GAAG,SAAA;AAAA,MACH,4BAAA,EAA8B,GAAG,KAAK,CAAA;AAAA,KACxC;AAEA,IAAA,MAAM,SAAS,IAAA,KAAS,MAAA;AAExB,IAAA,MAAM,WAAA,GAAc,CAAC,KAAA,KAAyC;AAC5D,MAAA,QAAA,IAAA,IAAA,GAAA,MAAA,GAAA,QAAA,CAAW,KAAA,CAAA;AAAA,IACb,CAAA;AAEA,IAAA,uBACE,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAA,EAAW,IAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA;AAAA,QACzC,KAAA;AAAA,QACC,GAAG,IAAA;AAAA,QAEJ,QAAA,kBAAA,IAAA;AAAA,UAAC,oBAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,IAAA;AAAA,cACT,aAAa,SAAS,CAAA;AAAA,cACtB;AAAA,gBACE,CAAC,YAAA,CAAa,QAAQ,CAAC,GAAG,MAAA,IAAU,UAAA;AAAA,gBACpC,CAAC,YAAA,CAAa,YAAY,CAAC,GAAG,UAAA;AAAA,gBAC9B,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,KAAA,KAAU;AAAA,eACxC;AAAA,cACA,aAAa,WAAW;AAAA,aAC1B;AAAA,YACA,QAAQ,MAAA,KAAW,MAAA,GAAS,yBAAY,GAAA,CAAC,QAAA,EAAA,EAAO,MAAK,QAAA,EAAS,CAAA,CAAA;AAAA,YAC9D,eAAA,EAAe,SAAS,MAAA,GAAY,QAAA;AAAA,YACpC,OAAA,EAAS,WAAA;AAAA,YACT,cAAA,EAAc,MAAA,IAAU,MAAA,GAAS,MAAA,GAAS,MAAA;AAAA,YAC1C,IAAA;AAAA,YAEA,QAAA,EAAA;AAAA,8BAAA,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAW,YAAA,CAAa,OAAO,GAAI,QAAA,EAAS,CAAA;AAAA,cACjD,MAAA,mBACC,GAAA,CAAC,aAAA,EAAA,EAAc,QAAA,EAAoB,aAA0B,CAAA,GAC3D;AAAA;AAAA;AAAA;AACN;AAAA,KACF;AAAA,EAEJ;AACF;;;;"}
+{"version":3,"file":"NavigationItem.js","sources":["../src/navigation-item/NavigationItem.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type MouseEvent,\n  type MouseEventHandler,\n} from \"react\";\nimport type { RenderPropsType } from \"../utils\";\nimport { makePrefixer } from \"../utils\";\nimport { ExpansionIcon } from \"./ExpansionIcon\";\nimport navigationItemCss from \"./NavigationItem.css\";\nimport { NavigationItemAction } from \"./NavigationItemAction\";\n\nexport interface NavigationItemProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * Whether the navigation item is active.\n   */\n  active?: boolean;\n  /**\n   * Whether the nested group is collapsed and there is an active nested item within it.\n   */\n  blurActive?: boolean;\n  /**\n   * Whether the navigation item is expanded.\n   */\n  expanded?: boolean;\n  /**\n   * Level of nesting.\n   */\n  level?: number;\n  /**\n   * The orientation of the navigation item.\n   */\n  orientation?: \"horizontal\" | \"vertical\";\n  /**\n   * Whether the navigation item is a parent with nested items.\n   */\n  parent?: boolean;\n  /**\n   * Render prop to enable customisation of navigation item element.\n   */\n  render?: RenderPropsType[\"render\"];\n  /**\n   * Action to be triggered when the navigation item is expanded.\n   */\n  onExpand?: MouseEventHandler<HTMLButtonElement>;\n  /**\n   * Href to be passed to the Link element.\n   */\n  href?: string;\n}\n\nconst withBaseName = makePrefixer(\"saltNavigationItem\");\n\nexport const NavigationItem = forwardRef<HTMLDivElement, NavigationItemProps>(\n  function NavigationItem(props, ref) {\n    const {\n      active,\n      blurActive,\n      render,\n      children,\n      className,\n      expanded = false,\n      href,\n      orientation = \"horizontal\",\n      parent,\n      level = 0,\n      onExpand,\n      style: styleProp,\n      \"aria-controls\": ariaControls,\n      ...rest\n    } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-navigation-item\",\n      css: navigationItemCss,\n      window: targetWindow,\n    });\n\n    const style = {\n      ...styleProp,\n      \"--saltNavigationItem-level\": `${level}`,\n    };\n\n    const isLink = href !== undefined;\n\n    const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n      onExpand?.(event);\n    };\n\n    return (\n      <div\n        ref={ref}\n        className={clsx(withBaseName(), className)}\n        style={style}\n        {...rest}\n      >\n        <NavigationItemAction\n          className={clsx(\n            withBaseName(\"wrapper\"),\n            {\n              [withBaseName(\"active\")]: active || blurActive,\n              [withBaseName(\"blurActive\")]: blurActive,\n              [withBaseName(\"rootItem\")]: level === 0,\n            },\n            withBaseName(orientation),\n          )}\n          render={render ?? (isLink ? undefined : <button type=\"button\" />)}\n          aria-expanded={isLink ? undefined : expanded}\n          aria-controls={ariaControls}\n          onClick={handleClick}\n          aria-current={isLink && active ? \"page\" : undefined}\n          href={href}\n        >\n          <span className={withBaseName(\"label\")}>{children}</span>\n          {parent ? (\n            <ExpansionIcon expanded={expanded} orientation={orientation} />\n          ) : null}\n        </NavigationItemAction>\n      </div>\n    );\n  },\n);\n"],"names":["NavigationItem","navigationItemCss"],"mappings":";;;;;;;;;;;;;;AAsDA,MAAM,YAAA,GAAe,aAAa,oBAAoB,CAAA;AAE/C,MAAM,cAAA,GAAiB,UAAA;AAAA,EAC5B,SAASA,eAAAA,CAAe,KAAA,EAAO,GAAA,EAAK;AAClC,IAAA,MAAM;AAAA,MACJ,MAAA;AAAA,MACA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,QAAA,GAAW,KAAA;AAAA,MACX,IAAA;AAAA,MACA,WAAA,GAAc,YAAA;AAAA,MACd,MAAA;AAAA,MACA,KAAA,GAAQ,CAAA;AAAA,MACR,QAAA;AAAA,MACA,KAAA,EAAO,SAAA;AAAA,MACP,eAAA,EAAiB,YAAA;AAAA,MACjB,GAAG;AAAA,KACL,GAAI,KAAA;AAEJ,IAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,IAAA,wBAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,sBAAA;AAAA,MACR,GAAA,EAAKC,QAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,MAAM,KAAA,GAAQ;AAAA,MACZ,GAAG,SAAA;AAAA,MACH,4BAAA,EAA8B,GAAG,KAAK,CAAA;AAAA,KACxC;AAEA,IAAA,MAAM,SAAS,IAAA,KAAS,MAAA;AAExB,IAAA,MAAM,WAAA,GAAc,CAAC,KAAA,KAAyC;AAC5D,MAAA,QAAA,IAAA,IAAA,GAAA,MAAA,GAAA,QAAA,CAAW,KAAA,CAAA;AAAA,IACb,CAAA;AAEA,IAAA,uBACE,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAA,EAAW,IAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA;AAAA,QACzC,KAAA;AAAA,QACC,GAAG,IAAA;AAAA,QAEJ,QAAA,kBAAA,IAAA;AAAA,UAAC,oBAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,IAAA;AAAA,cACT,aAAa,SAAS,CAAA;AAAA,cACtB;AAAA,gBACE,CAAC,YAAA,CAAa,QAAQ,CAAC,GAAG,MAAA,IAAU,UAAA;AAAA,gBACpC,CAAC,YAAA,CAAa,YAAY,CAAC,GAAG,UAAA;AAAA,gBAC9B,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,KAAA,KAAU;AAAA,eACxC;AAAA,cACA,aAAa,WAAW;AAAA,aAC1B;AAAA,YACA,QAAQ,MAAA,KAAW,MAAA,GAAS,yBAAY,GAAA,CAAC,QAAA,EAAA,EAAO,MAAK,QAAA,EAAS,CAAA,CAAA;AAAA,YAC9D,eAAA,EAAe,SAAS,MAAA,GAAY,QAAA;AAAA,YACpC,eAAA,EAAe,YAAA;AAAA,YACf,OAAA,EAAS,WAAA;AAAA,YACT,cAAA,EAAc,MAAA,IAAU,MAAA,GAAS,MAAA,GAAS,MAAA;AAAA,YAC1C,IAAA;AAAA,YAEA,QAAA,EAAA;AAAA,8BAAA,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAW,YAAA,CAAa,OAAO,GAAI,QAAA,EAAS,CAAA;AAAA,cACjD,MAAA,mBACC,GAAA,CAAC,aAAA,EAAA,EAAc,QAAA,EAAoB,aAA0B,CAAA,GAC3D;AAAA;AAAA;AAAA;AACN;AAAA,KACF;AAAA,EAEJ;AACF;;;;"}

package/dist-es/rating/Rating.css.js

@@ -0,0 +1,4 @@
+var css_248z = ".saltRating {\n  display: inline-flex;\n  box-sizing: border-box;\n}\n\n.saltFormField .saltRating-container {\n  height: var(--salt-size-base);\n  padding-top: calc(var(--salt-spacing-100) + var(--salt-spacing-fixed-100));\n}\n\n.saltFormField .saltRating-label {\n  min-height: var(--salt-size-base);\n  padding-top: var(--salt-spacing-100);\n}\n\n.saltRating-labelBottom {\n  flex-direction: column;\n  align-items: flex-start;\n  gap: var(--salt-spacing-75);\n}\n\n.saltRating-labelRight {\n  flex-direction: row;\n  gap: var(--salt-spacing-150);\n}\n\n.saltRating-container {\n  display: flex;\n  flex-direction: row;\n  gap: var(--salt-spacing-150);\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  padding-top: var(--salt-spacing-fixed-100);\n  padding-bottom: var(--salt-spacing-fixed-100);\n  box-sizing: border-box;\n}\n\n.saltRating-label {\n  color: var(--salt-content-primary-foreground);\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  line-height: var(--salt-text-lineHeight);\n  box-sizing: border-box;\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=Rating.css.js.map

package/dist-es/rating/Rating.css.js.map

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

package/dist-es/rating/Rating.js

@@ -0,0 +1,138 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { clsx } from 'clsx';
+import { forwardRef, useState } from 'react';
+import '../form-field-context/FormFieldContext.js';
+import { useFormFieldProps } from '../form-field-context/useFormFieldProps.js';
+import { capitalize } from '../utils/capitalize.js';
+import { makePrefixer } from '../utils/makePrefixer.js';
+import { useControlled } from '../utils/useControlled.js';
+import '../utils/useFloatingUI/useFloatingUI.js';
+import { useId } from '../utils/useId.js';
+import '../salt-provider/SaltProvider.js';
+import '../viewport/ViewportProvider.js';
+import css_248z from './Rating.css.js';
+import { RatingItem } from './RatingItem.js';
+
+const withBaseName = makePrefixer("saltRating");
+const defaultGetLabel = (value) => `${value} Star${value > 1 ? "s" : ""}`;
+const Rating = forwardRef(function Rating2({
+  value: valueProp,
+  defaultValue = 0,
+  name: nameProp,
+  onChange,
+  className,
+  readOnly: readOnlyProp,
+  disabled: disabledProp,
+  max = 5,
+  getLabel = defaultGetLabel,
+  getVisibleLabel,
+  labelPlacement = "right",
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedBy,
+  ...restProps
+}, ref) {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "salt-rating",
+    css: css_248z,
+    window: targetWindow
+  });
+  const {
+    disabled: formFieldDisabled,
+    readOnly: formFieldReadOnly,
+    a11yProps: {
+      "aria-describedby": formFieldDescribedBy,
+      "aria-labelledby": formFieldLabelledBy
+    } = {}
+  } = useFormFieldProps();
+  const disabled = formFieldDisabled || disabledProp;
+  const readOnly = formFieldReadOnly || readOnlyProp;
+  const [hoveredValue, setHoveredValue] = useState(0);
+  const [selected, setSelected] = useControlled({
+    controlled: valueProp,
+    default: defaultValue,
+    name: "Rating",
+    state: "value"
+  });
+  const name = useId(nameProp);
+  const handleMouseEnter = (event) => {
+    if (readOnly || disabled) return;
+    const itemValue = Number.parseInt(event.currentTarget.value, 10);
+    setHoveredValue(itemValue);
+  };
+  const handleChange = (event) => {
+    if (readOnly) {
+      event.preventDefault();
+      return;
+    }
+    const itemValue = Number.parseInt(event.currentTarget.value, 10);
+    setSelected(itemValue);
+    onChange == null ? void 0 : onChange(event, itemValue);
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: clsx(
+        withBaseName(),
+        withBaseName(`label${capitalize(labelPlacement)}`),
+        className
+      ),
+      ...restProps,
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            role: "radiogroup",
+            className: withBaseName("container"),
+            "aria-readonly": readOnly || void 0,
+            "aria-label": ariaLabel,
+            "aria-labelledby": clsx(formFieldLabelledBy, ariaLabelledBy) || void 0,
+            "aria-describedby": clsx(formFieldDescribedBy, ariaDescribedBy) || void 0,
+            onMouseLeave: () => setHoveredValue(0),
+            children: Array.from({ length: max }, (_, index) => {
+              const itemValue = index + 1;
+              const isHovered = hoveredValue > 0 && itemValue <= hoveredValue;
+              const isSelected = hoveredValue === 0 && itemValue <= selected;
+              const isUnselecting = hoveredValue > 0 && itemValue > hoveredValue && itemValue <= selected;
+              return /* @__PURE__ */ jsx(
+                RatingItem,
+                {
+                  currentRating: selected,
+                  isHovered,
+                  isSelected,
+                  isUnselecting,
+                  onMouseEnter: handleMouseEnter,
+                  onChange: handleChange,
+                  value: itemValue,
+                  readOnly,
+                  disabled,
+                  name,
+                  "aria-label": getLabel == null ? void 0 : getLabel(itemValue)
+                },
+                itemValue
+              );
+            })
+          }
+        ),
+        getVisibleLabel && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: clsx(
+              withBaseName("label"),
+              withBaseName(`label-${labelPlacement}`)
+            ),
+            "aria-hidden": true,
+            children: getVisibleLabel(hoveredValue || selected, max)
+          }
+        )
+      ]
+    }
+  );
+});
+
+export { Rating };
+//# sourceMappingURL=Rating.js.map

package/dist-es/rating/Rating.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Rating.js","sources":["../src/rating/Rating.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ChangeEvent,\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type MouseEvent,\n  useState,\n} from \"react\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { capitalize, makePrefixer, useControlled, useId } from \"../utils\";\nimport ratingCss from \"./Rating.css\";\nimport { RatingItem } from \"./RatingItem\";\n\nconst withBaseName = makePrefixer(\"saltRating\");\n\nexport interface RatingProps\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\"> {\n  /**\n   * When provided, the component is controlled.\n   */\n  value?: number;\n  /**\n   * Default rating value for uncontrolled mode.\n   * @default 0\n   */\n  defaultValue?: number;\n  /**\n   * Callback function for rating change.\n   * The first parameter is the event, and the second is the selected rating value.\n   */\n  onChange?: (event: ChangeEvent<HTMLInputElement>, value: number) => void;\n  /**\n   * If true, the rating component will be in a read-only state.\n   */\n  readOnly?: boolean;\n  /**\n   * If true, the rating component will be in a disabled state.\n   */\n  disabled?: boolean;\n  /**\n   * Total number of icons displayed.\n   * @default 5\n   */\n  max?: number;\n  /**\n   * Function used to provide a user-friendly name for the current value of the rating. Primarily used by screen readers.\n   */\n  getLabel?: (value: number) => string;\n  /**\n   * Function used to provide a visible label for the rating.\n   */\n  getVisibleLabel?: (value: number, max: number) => string;\n  /**\n   * Position of the label relative to the rating component.\n   * @default \"right\"\n   */\n  labelPlacement?: \"right\" | \"bottom\";\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\nconst defaultGetLabel = (value: number) =>\n  `${value} Star${value > 1 ? \"s\" : \"\"}`;\n\nexport const Rating = forwardRef<HTMLDivElement, RatingProps>(function Rating(\n  {\n    value: valueProp,\n    defaultValue = 0,\n    name: nameProp,\n    onChange,\n    className,\n    readOnly: readOnlyProp,\n    disabled: disabledProp,\n    max = 5,\n    getLabel = defaultGetLabel,\n    getVisibleLabel,\n    labelPlacement = \"right\",\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    ...restProps\n  },\n  ref,\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-rating\",\n    css: ratingCss,\n    window: targetWindow,\n  });\n  const {\n    disabled: formFieldDisabled,\n    readOnly: formFieldReadOnly,\n    a11yProps: {\n      \"aria-describedby\": formFieldDescribedBy,\n      \"aria-labelledby\": formFieldLabelledBy,\n    } = {},\n  } = useFormFieldProps();\n\n  const disabled = formFieldDisabled || disabledProp;\n  const readOnly = formFieldReadOnly || readOnlyProp;\n\n  const [hoveredValue, setHoveredValue] = useState(0);\n  const [selected, setSelected] = useControlled({\n    controlled: valueProp,\n    default: defaultValue,\n    name: \"Rating\",\n    state: \"value\",\n  });\n  const name = useId(nameProp);\n\n  const handleMouseEnter = (event: MouseEvent<HTMLInputElement>) => {\n    if (readOnly || disabled) return;\n    const itemValue = Number.parseInt(event.currentTarget.value, 10);\n    setHoveredValue(itemValue);\n  };\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    if (readOnly) {\n      event.preventDefault();\n      return;\n    }\n\n    const itemValue = Number.parseInt(event.currentTarget.value, 10);\n    setSelected(itemValue);\n    onChange?.(event, itemValue);\n  };\n\n  return (\n    <div\n      ref={ref}\n      className={clsx(\n        withBaseName(),\n        withBaseName(`label${capitalize(labelPlacement)}`),\n        className,\n      )}\n      {...restProps}\n    >\n      <div\n        role=\"radiogroup\"\n        className={withBaseName(\"container\")}\n        aria-readonly={readOnly || undefined}\n        aria-label={ariaLabel}\n        aria-labelledby={clsx(formFieldLabelledBy, ariaLabelledBy) || undefined}\n        aria-describedby={\n          clsx(formFieldDescribedBy, ariaDescribedBy) || undefined\n        }\n        onMouseLeave={() => setHoveredValue(0)}\n      >\n        {Array.from({ length: max }, (_, index) => {\n          const itemValue = index + 1;\n          const isHovered = hoveredValue > 0 && itemValue <= hoveredValue;\n          const isSelected = hoveredValue === 0 && itemValue <= selected;\n          const isUnselecting =\n            hoveredValue > 0 &&\n            itemValue > hoveredValue &&\n            itemValue <= selected;\n          return (\n            <RatingItem\n              key={itemValue}\n              currentRating={selected}\n              isHovered={isHovered}\n              isSelected={isSelected}\n              isUnselecting={isUnselecting}\n              onMouseEnter={handleMouseEnter}\n              onChange={handleChange}\n              value={itemValue}\n              readOnly={readOnly}\n              disabled={disabled}\n              name={name}\n              aria-label={getLabel?.(itemValue)}\n            />\n          );\n        })}\n      </div>\n      {getVisibleLabel && (\n        <div\n          className={clsx(\n            withBaseName(\"label\"),\n            withBaseName(`label-${labelPlacement}`),\n          )}\n          aria-hidden\n        >\n          {getVisibleLabel(hoveredValue || selected, max)}\n        </div>\n      )}\n    </div>\n  );\n});\n"],"names":["Rating","ratingCss"],"mappings":"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"}

package/dist-es/rating/RatingItem.css.js

@@ -0,0 +1,4 @@
+var css_248z = ".saltRatingItem {\n  height: var(--salt-size-icon);\n  width: var(--salt-size-icon);\n  display: flex;\n  position: relative;\n  align-items: center;\n  justify-content: center;\n  cursor: var(--salt-cursor-hover);\n}\n\n.saltRatingItem-disabled,\n.saltRatingItem-readOnly {\n  cursor: default;\n}\n\n.saltRatingItem-input {\n  position: absolute;\n  opacity: 0;\n  width: 100%;\n  height: 100%;\n  margin: 0;\n  cursor: inherit;\n  z-index: 1;\n}\n\n.saltRatingItem-input::before {\n  content: \"\";\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  padding: var(--salt-spacing-fixed-600);\n  transform: translate(-50%, -50%);\n  top: 50%;\n  left: 50%;\n  box-sizing: content-box;\n}\n\n.saltRatingItem-icon {\n  pointer-events: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--salt-sentiment-neutral-dataviz);\n}\n\n.saltRatingItem-icon .saltIcon {\n  --saltIcon-size: var(--salt-size-icon);\n}\n\n.saltRatingItem-input:focus-visible ~ .saltRatingItem-icon::after {\n  content: \"\";\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  padding: var(--salt-spacing-fixed-600);\n  transform: translate(-50%, -50%);\n  top: 50%;\n  left: 50%;\n  box-sizing: content-box;\n\n  border-radius: var(--salt-palette-corner-strongest);\n  outline: var(--salt-focused-outline);\n  outline-offset: calc(-1 * var(--salt-spacing-fixed-200));\n}\n\n.saltRatingItem-disabled {\n  cursor: var(--salt-cursor-disabled);\n  opacity: 0.4;\n}\n\n.saltRatingItem-disabled .saltRatingItem-input {\n  cursor: var(--salt-cursor-disabled);\n}\n\n.saltRatingItem-selected .saltRatingItem-icon,\n.saltRatingItem-hovered .saltRatingItem-icon,\n.saltRatingItem-unselecting .saltRatingItem-icon {\n  color: var(--salt-sentiment-accent-dataviz);\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=RatingItem.css.js.map

package/dist-es/rating/RatingItem.css.js.map

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

package/dist-es/rating/RatingItem.js

@@ -0,0 +1,73 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+import { useIcon } from '../semantic-icon-provider/SemanticIconProvider.js';
+import { makePrefixer } from '../utils/makePrefixer.js';
+import '../utils/useFloatingUI/useFloatingUI.js';
+import '../utils/useId.js';
+import '../salt-provider/SaltProvider.js';
+import '../viewport/ViewportProvider.js';
+import css_248z from './RatingItem.css.js';
+
+const withBaseName = makePrefixer("saltRatingItem");
+const RatingItem = forwardRef(
+  function RatingItem2(props, ref) {
+    const {
+      "aria-label": ariaLabel,
+      value,
+      currentRating,
+      isHovered,
+      isSelected,
+      isUnselecting,
+      onMouseEnter,
+      onChange,
+      readOnly = false,
+      disabled = false,
+      name
+    } = props;
+    const { RatingIcon, RatingSelectedIcon, RatingUnselectingIcon } = useIcon();
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "salt-rating-item",
+      css: css_248z,
+      window: targetWindow
+    });
+    const icon = isHovered || isSelected ? /* @__PURE__ */ jsx(RatingSelectedIcon, { "aria-hidden": true }) : isUnselecting ? /* @__PURE__ */ jsx(RatingUnselectingIcon, { "aria-hidden": true }) : /* @__PURE__ */ jsx(RatingIcon, { "aria-hidden": true });
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: clsx(withBaseName(), {
+          [withBaseName("hovered")]: isHovered,
+          [withBaseName("selected")]: isSelected,
+          [withBaseName("unselecting")]: isUnselecting,
+          [withBaseName("disabled")]: disabled,
+          [withBaseName("readOnly")]: readOnly
+        }),
+        children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref,
+              type: "radio",
+              name,
+              value,
+              checked: currentRating === value,
+              onChange,
+              onMouseEnter,
+              disabled,
+              readOnly,
+              className: withBaseName("input"),
+              "aria-label": ariaLabel
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: withBaseName("icon"), "aria-hidden": true, children: icon })
+        ]
+      }
+    );
+  }
+);
+
+export { RatingItem };
+//# sourceMappingURL=RatingItem.js.map

package/dist-es/rating/RatingItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RatingItem.js","sources":["../src/rating/RatingItem.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ChangeEvent,\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type MouseEvent,\n} from \"react\";\nimport { useIcon } from \"../semantic-icon-provider\";\nimport { makePrefixer } from \"../utils\";\nimport ratingItemCss from \"./RatingItem.css\";\n\nconst withBaseName = makePrefixer(\"saltRatingItem\");\n\nexport interface RatingItemProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * specifies the value of the feedback item.\n   */\n  value: number;\n  /**\n   * To define if the current star is being hovered.\n   */\n  isHovered?: boolean;\n  /**\n   * To specify if the item is selected.\n   */\n  isSelected?: boolean;\n  /**\n   * defines the current selected rating.\n   */\n  currentRating?: number;\n  /**\n   *  callback function when feedback item is hovered.\n   */\n  onMouseEnter: (event: MouseEvent<HTMLInputElement>) => void;\n  /**\n   *  callback function when feedback item is clicked.\n   */\n  onChange: (event: ChangeEvent<HTMLInputElement>) => void;\n  /**\n   * If true, the rating item will be in a read-only state.\n   */\n  readOnly?: boolean;\n  /**\n   * If true, the rating item will be in a disabled state.\n   */\n  disabled?: boolean;\n  /**\n   * Indicates whether the current rating item is in an active state.\n   * An active state typically means that the item is visually highlighted\n   * or styled differently to indicate that it is part of the current selection\n   * or interaction (e.g., hover or focus).\n   */\n  isUnselecting?: boolean;\n  /**\n   * Name of the radio group\n   */\n  name?: string;\n}\n\nexport const RatingItem = forwardRef<HTMLInputElement, RatingItemProps>(\n  function RatingItem(props, ref) {\n    const {\n      \"aria-label\": ariaLabel,\n      value,\n      currentRating,\n      isHovered,\n      isSelected,\n      isUnselecting,\n      onMouseEnter,\n      onChange,\n      readOnly = false,\n      disabled = false,\n      name,\n    } = props;\n\n    const { RatingIcon, RatingSelectedIcon, RatingUnselectingIcon } = useIcon();\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-rating-item\",\n      css: ratingItemCss,\n      window: targetWindow,\n    });\n\n    const icon =\n      isHovered || isSelected ? (\n        <RatingSelectedIcon aria-hidden />\n      ) : isUnselecting ? (\n        <RatingUnselectingIcon aria-hidden />\n      ) : (\n        <RatingIcon aria-hidden />\n      );\n\n    return (\n      <div\n        className={clsx(withBaseName(), {\n          [withBaseName(\"hovered\")]: isHovered,\n          [withBaseName(\"selected\")]: isSelected,\n          [withBaseName(\"unselecting\")]: isUnselecting,\n          [withBaseName(\"disabled\")]: disabled,\n          [withBaseName(\"readOnly\")]: readOnly,\n        })}\n      >\n        <input\n          ref={ref}\n          type=\"radio\"\n          name={name}\n          value={value}\n          checked={currentRating === value}\n          onChange={onChange}\n          onMouseEnter={onMouseEnter}\n          disabled={disabled}\n          readOnly={readOnly}\n          className={withBaseName(\"input\")}\n          aria-label={ariaLabel}\n        />\n        <span className={withBaseName(\"icon\")} aria-hidden>\n          {icon}\n        </span>\n      </div>\n    );\n  },\n);\n"],"names":["RatingItem","ratingItemCss"],"mappings":";;;;;;;;;;;;;AAaA,MAAM,YAAA,GAAe,aAAa,gBAAgB,CAAA;AAgD3C,MAAM,UAAA,GAAa,UAAA;AAAA,EACxB,SAASA,WAAAA,CAAW,KAAA,EAAO,GAAA,EAAK;AAC9B,IAAA,MAAM;AAAA,MACJ,YAAA,EAAc,SAAA;AAAA,MACd,KAAA;AAAA,MACA,aAAA;AAAA,MACA,SAAA;AAAA,MACA,UAAA;AAAA,MACA,aAAA;AAAA,MACA,YAAA;AAAA,MACA,QAAA;AAAA,MACA,QAAA,GAAW,KAAA;AAAA,MACX,QAAA,GAAW,KAAA;AAAA,MACX;AAAA,KACF,GAAI,KAAA;AAEJ,IAAA,MAAM,EAAE,UAAA,EAAY,kBAAA,EAAoB,qBAAA,KAA0B,OAAA,EAAQ;AAE1E,IAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,IAAA,wBAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,kBAAA;AAAA,MACR,GAAA,EAAKC,QAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,MAAM,OACJ,SAAA,IAAa,UAAA,mBACX,GAAA,CAAC,kBAAA,EAAA,EAAmB,eAAW,IAAA,EAAC,CAAA,GAC9B,aAAA,mBACF,GAAA,CAAC,yBAAsB,aAAA,EAAW,IAAA,EAAC,oBAEnC,GAAA,CAAC,UAAA,EAAA,EAAW,eAAW,IAAA,EAAC,CAAA;AAG5B,IAAA,uBACE,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,IAAA,CAAK,YAAA,EAAa,EAAG;AAAA,UAC9B,CAAC,YAAA,CAAa,SAAS,CAAC,GAAG,SAAA;AAAA,UAC3B,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,UAAA;AAAA,UAC5B,CAAC,YAAA,CAAa,aAAa,CAAC,GAAG,aAAA;AAAA,UAC/B,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,QAAA;AAAA,UAC5B,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG;AAAA,SAC7B,CAAA;AAAA,QAED,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,OAAA;AAAA,YAAA;AAAA,cACC,GAAA;AAAA,cACA,IAAA,EAAK,OAAA;AAAA,cACL,IAAA;AAAA,cACA,KAAA;AAAA,cACA,SAAS,aAAA,KAAkB,KAAA;AAAA,cAC3B,QAAA;AAAA,cACA,YAAA;AAAA,cACA,QAAA;AAAA,cACA,QAAA;AAAA,cACA,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,cAC/B,YAAA,EAAY;AAAA;AAAA,WACd;AAAA,0BACA,GAAA,CAAC,UAAK,SAAA,EAAW,YAAA,CAAa,MAAM,CAAA,EAAG,aAAA,EAAW,MAC/C,QAAA,EAAA,IAAA,EACH;AAAA;AAAA;AAAA,KACF;AAAA,EAEJ;AACF;;;;"}

package/dist-es/semantic-icon-provider/SemanticIconProvider.js

@@ -1,40 +1,42 @@
 import { jsx } from 'react/jsx-runtime';
-import { FavoriteStrongIcon, FavoriteSolidIcon, FavoriteIcon, ProgressInprogressIcon, LockedIcon, SuccessCircleSolidIcon, StepActiveIcon, StepDefaultIcon, TearOutIcon, CloseIcon, CalendarIcon, UserSolidIcon, OverflowMenuIcon, WarningSolidIcon, InfoSolidIcon, ErrorSolidIcon, UploadIcon, TriangleDownIcon, TriangleUpIcon, ChevronLeftIcon, ChevronRightIcon, ChevronDownIcon, ChevronUpIcon } from '@salt-ds/icons';
+import { WarningSolidIcon, UserSolidIcon, UploadIcon, SuccessCircleSolidIcon, FavoriteStrongIcon, FavoriteSolidIcon, FavoriteIcon, ChevronLeftIcon, StepDefaultIcon, OverflowMenuIcon, ChevronRightIcon, LockedIcon, ProgressInprogressIcon, InfoSolidIcon, TriangleUpIcon, TearOutIcon, ChevronDownIcon, ErrorSolidIcon, TriangleDownIcon, DoubleChevronRightIcon, DoubleChevronLeftIcon, ChevronUpIcon, CloseIcon, CalendarIcon, StepActiveIcon } from '@salt-ds/icons';
 import { createContext, useContext } from 'react';
 import { ErrorAdornmentIcon } from '../status-adornment/ErrorAdornment.js';
 import { SuccessAdornmentIcon } from '../status-adornment/SuccessAdornment.js';
 import { WarningAdornmentIcon } from '../status-adornment/WarningAdornment.js';
 
 const defaultIconMap = {
-  ExpandIcon: ChevronDownIcon,
-  CollapseIcon: ChevronUpIcon,
-  ExpandGroupIcon: ChevronRightIcon,
+  ActiveIcon: StepActiveIcon,
+  CalendarIcon,
+  CloseIcon,
   CollapseGroupIcon: ChevronDownIcon,
-  NextIcon: ChevronRightIcon,
-  PreviousIcon: ChevronLeftIcon,
-  IncreaseIcon: TriangleUpIcon,
+  CollapseIcon: ChevronUpIcon,
+  CollapseLeftIcon: DoubleChevronLeftIcon,
+  CollapseRightIcon: DoubleChevronRightIcon,
+  CompletedIcon: SuccessCircleSolidIcon,
   DecreaseIcon: TriangleDownIcon,
-  UploadIcon,
   ErrorIcon: ErrorSolidIcon,
-  SuccessIcon: SuccessCircleSolidIcon,
+  ErrorStatusAdornment: ErrorAdornmentIcon,
+  ExpandGroupIcon: ChevronRightIcon,
+  ExpandIcon: ChevronDownIcon,
+  ExternalIcon: TearOutIcon,
+  IncreaseIcon: TriangleUpIcon,
   InfoIcon: InfoSolidIcon,
-  WarningIcon: WarningSolidIcon,
+  InProgressIcon: ProgressInprogressIcon,
+  LockedIcon,
+  NextIcon: ChevronRightIcon,
   OverflowIcon: OverflowMenuIcon,
-  UserIcon: UserSolidIcon,
-  CalendarIcon,
-  CloseIcon,
-  ExternalIcon: TearOutIcon,
   PendingIcon: StepDefaultIcon,
-  ActiveIcon: StepActiveIcon,
-  CompletedIcon: SuccessCircleSolidIcon,
-  LockedIcon,
-  InProgressIcon: ProgressInprogressIcon,
+  PreviousIcon: ChevronLeftIcon,
   RatingIcon: FavoriteIcon,
   RatingSelectedIcon: FavoriteSolidIcon,
   RatingUnselectingIcon: FavoriteStrongIcon,
-  ErrorStatusAdornment: ErrorAdornmentIcon,
-  WarningStatusAdornment: WarningAdornmentIcon,
-  SuccessStatusAdornment: SuccessAdornmentIcon
+  SuccessIcon: SuccessCircleSolidIcon,
+  SuccessStatusAdornment: SuccessAdornmentIcon,
+  UploadIcon,
+  UserIcon: UserSolidIcon,
+  WarningIcon: WarningSolidIcon,
+  WarningStatusAdornment: WarningAdornmentIcon
 };
 const SemanticIconContext = createContext(defaultIconMap);
 const SemanticIconProvider = ({

package/dist-es/semantic-icon-provider/SemanticIconProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"SemanticIconProvider.js","sources":["../src/semantic-icon-provider/SemanticIconProvider.tsx"],"sourcesContent":["import {\n  CalendarIcon,\n  ChevronDownIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n  ChevronUpIcon,\n  CloseIcon,\n  ErrorSolidIcon,\n  FavoriteIcon,\n  FavoriteSolidIcon,\n  FavoriteStrongIcon,\n  InfoSolidIcon,\n  LockedIcon,\n  OverflowMenuIcon,\n  ProgressInprogressIcon,\n  StepActiveIcon,\n  StepDefaultIcon,\n  SuccessCircleSolidIcon,\n  TearOutIcon,\n  TriangleDownIcon,\n  TriangleUpIcon,\n  UploadIcon,\n  UserSolidIcon,\n  WarningSolidIcon,\n} from \"@salt-ds/icons\";\nimport {\n  createContext,\n  type ElementType,\n  type ReactNode,\n  useContext,\n} from \"react\";\nimport { ErrorAdornmentIcon } from \"../status-adornment/ErrorAdornment\";\nimport { SuccessAdornmentIcon } from \"../status-adornment/SuccessAdornment\";\nimport { WarningAdornmentIcon } from \"../status-adornment/WarningAdornment\";\n\nexport interface SemanticIconMap {\n  ExpandIcon: ElementType;\n  CollapseIcon: ElementType;\n  ExpandGroupIcon: ElementType;\n  CollapseGroupIcon: ElementType;\n  NextIcon: ElementType;\n  PreviousIcon: ElementType;\n  IncreaseIcon: ElementType;\n  DecreaseIcon: ElementType;\n  UploadIcon: ElementType;\n  ErrorIcon: ElementType;\n  SuccessIcon: ElementType;\n  InfoIcon: ElementType;\n  WarningIcon: ElementType;\n  OverflowIcon: ElementType;\n  UserIcon: ElementType;\n  CalendarIcon: ElementType;\n  CloseIcon: ElementType;\n  ExternalIcon: ElementType;\n  PendingIcon: ElementType;\n  ActiveIcon: ElementType;\n  CompletedIcon: ElementType;\n  LockedIcon: ElementType;\n  InProgressIcon: ElementType;\n  RatingIcon: ElementType;\n  RatingSelectedIcon: ElementType;\n  RatingUnselectingIcon: ElementType;\n  ErrorStatusAdornment: ElementType;\n  WarningStatusAdornment: ElementType;\n  SuccessStatusAdornment: ElementType;\n}\n\nexport interface SemanticIconProviderProps {\n  /**\n   * Custom mapping of icon names to components. Overrides default icons if provided.\n   */\n  iconMap?: Partial<SemanticIconMap>;\n\n  /**\n   * Child elements that will use the provided icons.\n   */\n  children: ReactNode;\n}\n\nconst defaultIconMap: SemanticIconMap = {\n  ExpandIcon: ChevronDownIcon,\n  CollapseIcon: ChevronUpIcon,\n  ExpandGroupIcon: ChevronRightIcon,\n  CollapseGroupIcon: ChevronDownIcon,\n  NextIcon: ChevronRightIcon,\n  PreviousIcon: ChevronLeftIcon,\n  IncreaseIcon: TriangleUpIcon,\n  DecreaseIcon: TriangleDownIcon,\n  UploadIcon,\n  ErrorIcon: ErrorSolidIcon,\n  SuccessIcon: SuccessCircleSolidIcon,\n  InfoIcon: InfoSolidIcon,\n  WarningIcon: WarningSolidIcon,\n  OverflowIcon: OverflowMenuIcon,\n  UserIcon: UserSolidIcon,\n  CalendarIcon: CalendarIcon,\n  CloseIcon: CloseIcon,\n  ExternalIcon: TearOutIcon,\n  PendingIcon: StepDefaultIcon,\n  ActiveIcon: StepActiveIcon,\n  CompletedIcon: SuccessCircleSolidIcon,\n  LockedIcon: LockedIcon,\n  InProgressIcon: ProgressInprogressIcon,\n  RatingIcon: FavoriteIcon,\n  RatingSelectedIcon: FavoriteSolidIcon,\n  RatingUnselectingIcon: FavoriteStrongIcon,\n  ErrorStatusAdornment: ErrorAdornmentIcon,\n  WarningStatusAdornment: WarningAdornmentIcon,\n  SuccessStatusAdornment: SuccessAdornmentIcon,\n};\n\nconst SemanticIconContext = createContext<SemanticIconMap>(defaultIconMap);\n\nexport const SemanticIconProvider = ({\n  iconMap = {},\n  children,\n}: SemanticIconProviderProps) => (\n  <SemanticIconContext.Provider value={{ ...defaultIconMap, ...iconMap }}>\n    {children}\n  </SemanticIconContext.Provider>\n);\n\nexport const useIcon = () => {\n  const context = useContext(SemanticIconContext);\n  return context || defaultIconMap;\n};\n"],"names":[],"mappings":";;;;;;;AA+EA,MAAM,cAAA,GAAkC;AAAA,EACtC,UAAA,EAAY,eAAA;AAAA,EACZ,YAAA,EAAc,aAAA;AAAA,EACd,eAAA,EAAiB,gBAAA;AAAA,EACjB,iBAAA,EAAmB,eAAA;AAAA,EACnB,QAAA,EAAU,gBAAA;AAAA,EACV,YAAA,EAAc,eAAA;AAAA,EACd,YAAA,EAAc,cAAA;AAAA,EACd,YAAA,EAAc,gBAAA;AAAA,EACd,UAAA;AAAA,EACA,SAAA,EAAW,cAAA;AAAA,EACX,WAAA,EAAa,sBAAA;AAAA,EACb,QAAA,EAAU,aAAA;AAAA,EACV,WAAA,EAAa,gBAAA;AAAA,EACb,YAAA,EAAc,gBAAA;AAAA,EACd,QAAA,EAAU,aAAA;AAAA,EACV,YAAA;AAAA,EACA,SAAA;AAAA,EACA,YAAA,EAAc,WAAA;AAAA,EACd,WAAA,EAAa,eAAA;AAAA,EACb,UAAA,EAAY,cAAA;AAAA,EACZ,aAAA,EAAe,sBAAA;AAAA,EACf,UAAA;AAAA,EACA,cAAA,EAAgB,sBAAA;AAAA,EAChB,UAAA,EAAY,YAAA;AAAA,EACZ,kBAAA,EAAoB,iBAAA;AAAA,EACpB,qBAAA,EAAuB,kBAAA;AAAA,EACvB,oBAAA,EAAsB,kBAAA;AAAA,EACtB,sBAAA,EAAwB,oBAAA;AAAA,EACxB,sBAAA,EAAwB;AAC1B,CAAA;AAEA,MAAM,mBAAA,GAAsB,cAA+B,cAAc,CAAA;AAElE,MAAM,uBAAuB,CAAC;AAAA,EACnC,UAAU,EAAC;AAAA,EACX;AACF,CAAA,qBACE,GAAA,CAAC,mBAAA,CAAoB,QAAA,EAApB,EAA6B,KAAA,EAAO,EAAE,GAAG,cAAA,EAAgB,GAAG,OAAA,EAAQ,EAClE,QAAA,EACH;AAGK,MAAM,UAAU,MAAM;AAC3B,EAAA,MAAM,OAAA,GAAU,WAAW,mBAAmB,CAAA;AAC9C,EAAA,OAAO,OAAA,IAAW,cAAA;AACpB;;;;"}
+{"version":3,"file":"SemanticIconProvider.js","sources":["../src/semantic-icon-provider/SemanticIconProvider.tsx"],"sourcesContent":["import {\n  CalendarIcon,\n  ChevronDownIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n  ChevronUpIcon,\n  CloseIcon,\n  DoubleChevronLeftIcon,\n  DoubleChevronRightIcon,\n  ErrorSolidIcon,\n  FavoriteIcon,\n  FavoriteSolidIcon,\n  FavoriteStrongIcon,\n  InfoSolidIcon,\n  LockedIcon,\n  OverflowMenuIcon,\n  ProgressInprogressIcon,\n  StepActiveIcon,\n  StepDefaultIcon,\n  SuccessCircleSolidIcon,\n  TearOutIcon,\n  TriangleDownIcon,\n  TriangleUpIcon,\n  UploadIcon,\n  UserSolidIcon,\n  WarningSolidIcon,\n} from \"@salt-ds/icons\";\nimport {\n  createContext,\n  type ElementType,\n  type ReactNode,\n  useContext,\n} from \"react\";\nimport { ErrorAdornmentIcon } from \"../status-adornment/ErrorAdornment\";\nimport { SuccessAdornmentIcon } from \"../status-adornment/SuccessAdornment\";\nimport { WarningAdornmentIcon } from \"../status-adornment/WarningAdornment\";\n\nexport interface SemanticIconMap {\n  ActiveIcon: ElementType;\n  CalendarIcon: ElementType;\n  CloseIcon: ElementType;\n  CollapseGroupIcon: ElementType;\n  CollapseIcon: ElementType;\n  CollapseLeftIcon: ElementType;\n  CollapseRightIcon: ElementType;\n  CompletedIcon: ElementType;\n  DecreaseIcon: ElementType;\n  ErrorIcon: ElementType;\n  ErrorStatusAdornment: ElementType;\n  ExpandGroupIcon: ElementType;\n  ExpandIcon: ElementType;\n  ExternalIcon: ElementType;\n  IncreaseIcon: ElementType;\n  InfoIcon: ElementType;\n  InProgressIcon: ElementType;\n  LockedIcon: ElementType;\n  NextIcon: ElementType;\n  OverflowIcon: ElementType;\n  PendingIcon: ElementType;\n  PreviousIcon: ElementType;\n  RatingIcon: ElementType;\n  RatingSelectedIcon: ElementType;\n  RatingUnselectingIcon: ElementType;\n  SuccessIcon: ElementType;\n  SuccessStatusAdornment: ElementType;\n  UploadIcon: ElementType;\n  UserIcon: ElementType;\n  WarningIcon: ElementType;\n  WarningStatusAdornment: ElementType;\n}\n\nexport interface SemanticIconProviderProps {\n  /**\n   * Custom mapping of icon names to components. Overrides default icons if provided.\n   */\n  iconMap?: Partial<SemanticIconMap>;\n\n  /**\n   * Child elements that will use the provided icons.\n   */\n  children: ReactNode;\n}\n\nconst defaultIconMap: SemanticIconMap = {\n  ActiveIcon: StepActiveIcon,\n  CalendarIcon: CalendarIcon,\n  CloseIcon: CloseIcon,\n  CollapseGroupIcon: ChevronDownIcon,\n  CollapseIcon: ChevronUpIcon,\n  CollapseLeftIcon: DoubleChevronLeftIcon,\n  CollapseRightIcon: DoubleChevronRightIcon,\n  CompletedIcon: SuccessCircleSolidIcon,\n  DecreaseIcon: TriangleDownIcon,\n  ErrorIcon: ErrorSolidIcon,\n  ErrorStatusAdornment: ErrorAdornmentIcon,\n  ExpandGroupIcon: ChevronRightIcon,\n  ExpandIcon: ChevronDownIcon,\n  ExternalIcon: TearOutIcon,\n  IncreaseIcon: TriangleUpIcon,\n  InfoIcon: InfoSolidIcon,\n  InProgressIcon: ProgressInprogressIcon,\n  LockedIcon: LockedIcon,\n  NextIcon: ChevronRightIcon,\n  OverflowIcon: OverflowMenuIcon,\n  PendingIcon: StepDefaultIcon,\n  PreviousIcon: ChevronLeftIcon,\n  RatingIcon: FavoriteIcon,\n  RatingSelectedIcon: FavoriteSolidIcon,\n  RatingUnselectingIcon: FavoriteStrongIcon,\n  SuccessIcon: SuccessCircleSolidIcon,\n  SuccessStatusAdornment: SuccessAdornmentIcon,\n  UploadIcon,\n  UserIcon: UserSolidIcon,\n  WarningIcon: WarningSolidIcon,\n  WarningStatusAdornment: WarningAdornmentIcon,\n};\n\nconst SemanticIconContext = createContext<SemanticIconMap>(defaultIconMap);\n\nexport const SemanticIconProvider = ({\n  iconMap = {},\n  children,\n}: SemanticIconProviderProps) => (\n  <SemanticIconContext.Provider value={{ ...defaultIconMap, ...iconMap }}>\n    {children}\n  </SemanticIconContext.Provider>\n);\n\nexport const useIcon = () => {\n  const context = useContext(SemanticIconContext);\n  return context || defaultIconMap;\n};\n"],"names":[],"mappings":";;;;;;;AAmFA,MAAM,cAAA,GAAkC;AAAA,EACtC,UAAA,EAAY,cAAA;AAAA,EACZ,YAAA;AAAA,EACA,SAAA;AAAA,EACA,iBAAA,EAAmB,eAAA;AAAA,EACnB,YAAA,EAAc,aAAA;AAAA,EACd,gBAAA,EAAkB,qBAAA;AAAA,EAClB,iBAAA,EAAmB,sBAAA;AAAA,EACnB,aAAA,EAAe,sBAAA;AAAA,EACf,YAAA,EAAc,gBAAA;AAAA,EACd,SAAA,EAAW,cAAA;AAAA,EACX,oBAAA,EAAsB,kBAAA;AAAA,EACtB,eAAA,EAAiB,gBAAA;AAAA,EACjB,UAAA,EAAY,eAAA;AAAA,EACZ,YAAA,EAAc,WAAA;AAAA,EACd,YAAA,EAAc,cAAA;AAAA,EACd,QAAA,EAAU,aAAA;AAAA,EACV,cAAA,EAAgB,sBAAA;AAAA,EAChB,UAAA;AAAA,EACA,QAAA,EAAU,gBAAA;AAAA,EACV,YAAA,EAAc,gBAAA;AAAA,EACd,WAAA,EAAa,eAAA;AAAA,EACb,YAAA,EAAc,eAAA;AAAA,EACd,UAAA,EAAY,YAAA;AAAA,EACZ,kBAAA,EAAoB,iBAAA;AAAA,EACpB,qBAAA,EAAuB,kBAAA;AAAA,EACvB,WAAA,EAAa,sBAAA;AAAA,EACb,sBAAA,EAAwB,oBAAA;AAAA,EACxB,UAAA;AAAA,EACA,QAAA,EAAU,aAAA;AAAA,EACV,WAAA,EAAa,gBAAA;AAAA,EACb,sBAAA,EAAwB;AAC1B,CAAA;AAEA,MAAM,mBAAA,GAAsB,cAA+B,cAAc,CAAA;AAElE,MAAM,uBAAuB,CAAC;AAAA,EACnC,UAAU,EAAC;AAAA,EACX;AACF,CAAA,qBACE,GAAA,CAAC,mBAAA,CAAoB,QAAA,EAApB,EAA6B,KAAA,EAAO,EAAE,GAAG,cAAA,EAAgB,GAAG,OAAA,EAAQ,EAClE,QAAA,EACH;AAGK,MAAM,UAAU,MAAM;AAC3B,EAAA,MAAM,OAAA,GAAU,WAAW,mBAAmB,CAAA;AAC9C,EAAA,OAAO,OAAA,IAAW,cAAA;AACpB;;;;"}

package/dist-es/tabs/Tab.css.js

@@ -0,0 +1,4 @@
+var css_248z = "/* Class applied to root Tab element */\n.saltTab {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  appearance: none;\n  -webkit-appearance: none;\n  gap: var(--salt-spacing-100);\n  border: none;\n  border-left: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) transparent;\n  border-right: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) transparent;\n  white-space: pre;\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n  min-width: 4em;\n  padding: var(--salt-spacing-50) var(--salt-spacing-100);\n  position: relative;\n  flex-shrink: 0;\n  box-sizing: border-box;\n  overflow: hidden;\n\n  cursor: var(--salt-cursor-hover);\n  color: var(--salt-content-primary-foreground);\n  font-weight: var(--salt-text-fontWeight);\n  font-family: var(--salt-text-fontFamily);\n  text-align: var(--salt-text-textAlign);\n  letter-spacing: var(--salt-text-letterSpacing);\n  line-height: var(--salt-text-lineHeight);\n  font-size: var(--salt-text-fontSize);\n  max-width: 100%;\n}\n\n@supports selector(:has(*)) {\n  .saltTabList:has([data-overflowbutton]) .saltTab {\n    /* 100% of the tab list but reserving space for the overflow button */\n    max-width: calc(100% - var(--salt-spacing-100) - var(--salt-size-base));\n  }\n}\n\n.saltTab::after {\n  content: \"\";\n  position: absolute;\n  left: calc(var(--salt-size-fixed-100) * -1);\n  right: calc(var(--salt-size-fixed-100) * -1);\n  height: var(--salt-size-indicator);\n}\n\n.saltTabList-bordered .saltTab::after {\n  top: 0;\n}\n\n.saltTabList-transparent .saltTab::after {\n  bottom: 0;\n}\n\n.saltTab:hover::after,\n.saltTab-focusVisible::after {\n  background: var(--salt-navigable-indicator-hover);\n}\n\n.saltTab-disabled:hover::after,\n.saltTab-disabled.saltTab-focusVisible::after {\n  background: none;\n}\n\n.saltTab-focusVisible {\n  outline: var(--salt-focused-outline);\n}\n\n.saltTabList-bordered .saltTab.saltTab-selected {\n  background: var(--saltTabList-activeColor);\n  border-left: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-separable-secondary-borderColor);\n  border-right: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-separable-secondary-borderColor);\n}\n\n.saltTab.saltTab-selected::after {\n  background: var(--salt-navigable-accent-indicator-active);\n}\n\n.saltTab.saltTab-disabled {\n  cursor: var(--salt-cursor-disabled);\n  color: var(--salt-content-primary-foreground-disabled);\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=Tab.css.js.map

package/dist-es/tabs/Tab.css.js.map

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

package/dist-es/tabs/Tab.js

@@ -0,0 +1,209 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { clsx } from 'clsx';
+import { forwardRef, useRef, useState, useCallback, useMemo } from 'react';
+import { createPortal } from 'react-dom';
+import { makePrefixer } from '../utils/makePrefixer.js';
+import { useIsomorphicLayoutEffect } from '../utils/useIsomorphicLayoutEffect.js';
+import '../utils/useFloatingUI/useFloatingUI.js';
+import { useForkRef } from '../utils/useForkRef.js';
+import { useId } from '../utils/useId.js';
+import '../salt-provider/SaltProvider.js';
+import '../viewport/ViewportProvider.js';
+import { TabContext } from './internal/contexts/TabContext.js';
+import { useTabs } from './internal/contexts/TabsContext.js';
+import { useRenderedTabWidth } from './internal/overflow/useRenderedTabWidth.js';
+import { getIntrinsicMeasuredWidth } from './internal/overflow/widthMeasurement.js';
+import css_248z from './Tab.css.js';
+
+const withBaseName = makePrefixer("saltTab");
+const Tab = forwardRef(
+  function Tab2(props, ref) {
+    const {
+      children,
+      className,
+      disabled: disabledProp,
+      onBlur,
+      onMouseDown,
+      onFocus,
+      onFocusCapture,
+      value,
+      id: idProp,
+      ...rest
+    } = props;
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "salt-tab",
+      css: css_248z,
+      window: targetWindow
+    });
+    const {
+      selected,
+      activeTab,
+      renderMode,
+      registerBootstrapTab,
+      setBootstrapTabReady,
+      registerRenderedTab,
+      updateRenderedTab
+    } = useTabs();
+    const disabled = !!disabledProp;
+    const id = useId(idProp);
+    const wasMouseDown = useRef(false);
+    const [focusVisible, setFocusVisible] = useState(false);
+    const [focused, setFocused] = useState(false);
+    const [hostElement, setHostElement] = useState(null);
+    const markerRef = useRef(null);
+    const tabRootRef = useRef(null);
+    const handleFocusCapture = (event) => {
+      onFocusCapture == null ? void 0 : onFocusCapture(event);
+      if (id) {
+        activeTab.current = { value, id };
+      }
+    };
+    const handleFocus = (event) => {
+      onFocus == null ? void 0 : onFocus(event);
+      setFocused(true);
+      if (!wasMouseDown.current && event.target.getAttribute("role") === "tab") {
+        setFocusVisible(true);
+      }
+      wasMouseDown.current = false;
+    };
+    const handleBlur = (event) => {
+      onBlur == null ? void 0 : onBlur(event);
+      setFocused(false);
+      setFocusVisible(false);
+    };
+    const handleMouseDown = (event) => {
+      onMouseDown == null ? void 0 : onMouseDown(event);
+      if (id) {
+        activeTab.current = { value, id };
+      }
+      wasMouseDown.current = true;
+    };
+    const [actionIds, setActionIds] = useState(() => /* @__PURE__ */ new Set());
+    const registerAction = useCallback((id2) => {
+      setActionIds((old) => {
+        if (old.has(id2)) {
+          return old;
+        }
+        const next = new Set(old);
+        next.add(id2);
+        return next;
+      });
+      return () => {
+        setActionIds((old) => {
+          if (!old.has(id2)) {
+            return old;
+          }
+          const next = new Set(old);
+          next.delete(id2);
+          return next;
+        });
+      };
+    }, []);
+    const actions = useMemo(() => Array.from(actionIds), [actionIds]);
+    const context = useMemo(
+      () => ({
+        tabId: id,
+        selected: selected === value,
+        focused,
+        value,
+        disabled,
+        actions,
+        registerAction
+      }),
+      [id, selected, value, focused, disabled, actions, registerAction]
+    );
+    useIsomorphicLayoutEffect(() => {
+      const doc = targetWindow == null ? void 0 : targetWindow.document;
+      if (!doc) {
+        return;
+      }
+      const host = doc.createElement("div");
+      host.dataset.tabHost = value;
+      host.role = "presentation";
+      host.style.display = "contents";
+      setHostElement(host);
+      return () => {
+        host.remove();
+      };
+    }, [targetWindow, value]);
+    useIsomorphicLayoutEffect(() => {
+      if (renderMode !== "inline") {
+        return;
+      }
+      return registerBootstrapTab(value);
+    }, [registerBootstrapTab, renderMode, value]);
+    useIsomorphicLayoutEffect(() => {
+      setBootstrapTabReady(value, hostElement != null);
+      return () => {
+        setBootstrapTabReady(value, false);
+      };
+    }, [hostElement, setBootstrapTabReady, value]);
+    useIsomorphicLayoutEffect(() => {
+      if (!hostElement || !id) {
+        return;
+      }
+      return registerRenderedTab({
+        host: hostElement,
+        id,
+        marker: markerRef.current,
+        root: tabRootRef.current,
+        trigger: null,
+        value,
+        width: getIntrinsicMeasuredWidth(tabRootRef.current)
+      });
+    }, [hostElement, id, registerRenderedTab, value]);
+    useIsomorphicLayoutEffect(() => {
+      const updates = {
+        marker: markerRef.current,
+        root: tabRootRef.current
+      };
+      if (renderMode === "inline") {
+        updates.width = getIntrinsicMeasuredWidth(tabRootRef.current);
+      }
+      updateRenderedTab(value, updates);
+    }, [renderMode, updateRenderedTab, value]);
+    useRenderedTabWidth({
+      hostElement,
+      renderMode,
+      tabRootRef,
+      targetWindow,
+      updateRenderedTab,
+      value
+    });
+    const handleTabRootRef = useForkRef(tabRootRef, ref);
+    const tabMarkup = /* @__PURE__ */ jsx(TabContext.Provider, { value: context, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: clsx(
+          withBaseName(),
+          {
+            [withBaseName("selected")]: selected === value,
+            [withBaseName("disabled")]: disabled,
+            [withBaseName("focusVisible")]: focusVisible
+          },
+          className
+        ),
+        "data-overflowitem": "true",
+        "data-value": value,
+        ref: handleTabRootRef,
+        onMouseDown: handleMouseDown,
+        onFocusCapture: handleFocusCapture,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        role: "presentation",
+        ...rest,
+        children
+      }
+    ) });
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("span", { role: "presentation", "data-tab-marker": "", hidden: true, ref: markerRef }),
+      renderMode === "inline" ? tabMarkup : hostElement ? createPortal(tabMarkup, hostElement) : null
+    ] });
+  }
+);
+
+export { Tab };
+//# sourceMappingURL=Tab.js.map