@salt-ds/core 1.67.1 → 1.69.0

package/dist-es/avatar/Avatar.css.js

@@ -1,4 +1,4 @@
-var css_248z = "/* Default variables applied to the root element */\n.saltAvatar {\n  --avatar-size-multiplier: var(--saltAvatar-size-multiplier, 1);\n  --avatar-base-size: var(--salt-size-base);\n  --avatar-base-fontSize: var(--saltAvatar-fontSize, var(--salt-text-notation-fontSize));\n  --avatar-container-size: calc(var(--avatar-base-size) * var(--avatar-size-multiplier));\n  --avatar-fontSize: calc(var(--avatar-base-fontSize) * var(--avatar-size-multiplier));\n  /* Icon styling */\n  --saltIcon-size: calc(var(--avatar-container-size) / 2);\n}\n\n/* Style applied to the root element */\n.saltAvatar {\n  color: var(--saltAvatar-foreground, var(--salt-content-bold-foreground));\n  background: var(--saltAvatar-background, var(--avatar-background));\n  font-size: var(--avatar-fontSize);\n  line-height: var(--saltAvatar-lineHeight, var(--salt-text-notation-lineHeight));\n  font-family: var(--salt-text-notation-fontFamily);\n  font-weight: var(--salt-text-notation-fontWeight);\n  width: var(--avatar-container-size);\n  min-width: var(--avatar-container-size);\n  height: var(--avatar-container-size);\n  min-height: var(--avatar-container-size);\n  border-radius: var(--saltAvatar-borderRadius, var(--salt-palette-corner-strongest, 50%));\n  border: none;\n  padding: 0;\n  appearance: none;\n  -webkit-appearance: none;\n  text-decoration: none;\n  position: relative;\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  overflow: hidden;\n  user-select: none;\n}\n\n.saltAvatar-accent {\n  --avatar-background: var(--salt-sentiment-accent-background);\n}\n\n.saltAvatar-category-1 {\n  --avatar-background: var(--salt-category-1-bold-background);\n}\n.saltAvatar-category-2 {\n  --avatar-background: var(--salt-category-2-bold-background);\n}\n\n.saltAvatar-category-3 {\n  --avatar-background: var(--salt-category-3-bold-background);\n}\n\n.saltAvatar-category-4 {\n  --avatar-background: var(--salt-category-4-bold-background);\n}\n\n.saltAvatar-category-5 {\n  --avatar-background: var(--salt-category-5-bold-background);\n}\n\n.saltAvatar-category-6 {\n  --avatar-background: var(--salt-category-6-bold-background);\n}\n\n.saltAvatar-category-7 {\n  --avatar-background: var(--salt-category-7-bold-background);\n}\n\n.saltAvatar-category-8 {\n  --avatar-background: var(--salt-category-8-bold-background);\n}\n\n.saltAvatar-category-9 {\n  --avatar-background: var(--salt-category-9-bold-background);\n}\n\n.saltAvatar-category-10 {\n  --avatar-background: var(--salt-category-10-bold-background);\n}\n.saltAvatar-category-11 {\n  --avatar-background: var(--salt-category-11-bold-background);\n}\n.saltAvatar-category-12 {\n  --avatar-background: var(--salt-category-12-bold-background);\n}\n.saltAvatar-category-13 {\n  --avatar-background: var(--salt-category-13-bold-background);\n}\n.saltAvatar-category-14 {\n  --avatar-background: var(--salt-category-14-bold-background);\n}\n.saltAvatar-category-15 {\n  --avatar-background: var(--salt-category-15-bold-background);\n}\n.saltAvatar-category-16 {\n  --avatar-background: var(--salt-category-16-bold-background);\n}\n.saltAvatar-category-17 {\n  --avatar-background: var(--salt-category-17-bold-background);\n}\n.saltAvatar-category-18 {\n  --avatar-background: var(--salt-category-18-bold-background);\n}\n.saltAvatar-category-19 {\n  --avatar-background: var(--salt-category-19-bold-background);\n}\n.saltAvatar-category-20 {\n  --avatar-background: var(--salt-category-20-bold-background);\n}\n\n.saltAvatar:has(img),\n.saltAvatar-withImage {\n  --avatar-background: none;\n}\n\n/* Style applied to the image/svg element. We specifically allow SVGs as the Avatar image to enable SVGs such as Flags to take up the full Avatar space */\n.saltAvatar > img,\n.saltAvatar > svg:not(.saltIcon) {\n  width: 100%;\n  height: 100%;\n}\n\n.saltAvatar:focus-visible {\n  outline-offset: var(--salt-spacing-fixed-100);\n}\n\nbutton.saltAvatar,\na.saltAvatar {\n  cursor: var(--salt-cursor-hover);\n}\n\nbutton.saltAvatar:disabled {\n  cursor: var(--salt-cursor-disabled);\n}\n\nbutton.saltAvatar::after,\na.saltAvatar::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  pointer-events: none;\n  background: transparent;\n}\n\n.saltAvatar[aria-expanded=\"true\"][aria-haspopup=\"menu\"]::after,\n.saltAvatar[aria-expanded=\"true\"][aria-haspopup=\"dialog\"]::after {\n  background: var(--salt-overlayable-background-hover);\n}\n\n@media (hover: hover) {\n  button.saltAvatar:hover::after,\n  a.saltAvatar:hover::after {\n    background: var(--salt-overlayable-background-hover);\n  }\n\n  button.saltAvatar:disabled:hover::after {\n    background: transparent;\n  }\n}\n";
+var css_248z = "/* Default variables applied to the root element */\n.saltAvatar {\n  --avatar-size-multiplier: var(--saltAvatar-size-multiplier, 1);\n  --avatar-base-size: var(--salt-size-base);\n  --avatar-base-fontSize: var(--saltAvatar-fontSize, var(--salt-text-notation-fontSize));\n  --avatar-container-size: calc(var(--avatar-base-size) * var(--avatar-size-multiplier));\n  --avatar-fontSize: calc(var(--avatar-base-fontSize) * var(--avatar-size-multiplier));\n  /* Icon styling */\n  --saltIcon-size: calc(var(--avatar-container-size) / 2);\n}\n\n/* Style applied to the root element */\n.saltAvatar {\n  color: var(--saltAvatar-foreground, var(--salt-content-bold-foreground));\n  background: var(--saltAvatar-background, var(--avatar-background));\n  font-size: var(--avatar-fontSize);\n  line-height: var(--saltAvatar-lineHeight, var(--salt-text-notation-lineHeight));\n  font-family: var(--salt-text-notation-fontFamily);\n  font-weight: var(--salt-text-notation-fontWeight);\n  width: var(--avatar-container-size);\n  min-width: var(--avatar-container-size);\n  height: var(--avatar-container-size);\n  min-height: var(--avatar-container-size);\n  border-radius: var(--saltAvatar-borderRadius, var(--salt-palette-corner-strongest, 50%));\n  border: none;\n  padding: 0;\n  appearance: none;\n  -webkit-appearance: none;\n  text-decoration: none;\n  position: relative;\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  overflow: hidden;\n  user-select: none;\n}\n\n.saltAvatar-entity {\n  border-radius: var(--salt-palette-corner-weak, 0);\n}\n\n.saltAvatar-accent {\n  --avatar-background: var(--salt-sentiment-accent-background);\n}\n\n.saltAvatar-category-1 {\n  --avatar-background: var(--salt-category-1-bold-background);\n}\n.saltAvatar-category-2 {\n  --avatar-background: var(--salt-category-2-bold-background);\n}\n\n.saltAvatar-category-3 {\n  --avatar-background: var(--salt-category-3-bold-background);\n}\n\n.saltAvatar-category-4 {\n  --avatar-background: var(--salt-category-4-bold-background);\n}\n\n.saltAvatar-category-5 {\n  --avatar-background: var(--salt-category-5-bold-background);\n}\n\n.saltAvatar-category-6 {\n  --avatar-background: var(--salt-category-6-bold-background);\n}\n\n.saltAvatar-category-7 {\n  --avatar-background: var(--salt-category-7-bold-background);\n}\n\n.saltAvatar-category-8 {\n  --avatar-background: var(--salt-category-8-bold-background);\n}\n\n.saltAvatar-category-9 {\n  --avatar-background: var(--salt-category-9-bold-background);\n}\n\n.saltAvatar-category-10 {\n  --avatar-background: var(--salt-category-10-bold-background);\n}\n.saltAvatar-category-11 {\n  --avatar-background: var(--salt-category-11-bold-background);\n}\n.saltAvatar-category-12 {\n  --avatar-background: var(--salt-category-12-bold-background);\n}\n.saltAvatar-category-13 {\n  --avatar-background: var(--salt-category-13-bold-background);\n}\n.saltAvatar-category-14 {\n  --avatar-background: var(--salt-category-14-bold-background);\n}\n.saltAvatar-category-15 {\n  --avatar-background: var(--salt-category-15-bold-background);\n}\n.saltAvatar-category-16 {\n  --avatar-background: var(--salt-category-16-bold-background);\n}\n.saltAvatar-category-17 {\n  --avatar-background: var(--salt-category-17-bold-background);\n}\n.saltAvatar-category-18 {\n  --avatar-background: var(--salt-category-18-bold-background);\n}\n.saltAvatar-category-19 {\n  --avatar-background: var(--salt-category-19-bold-background);\n}\n.saltAvatar-category-20 {\n  --avatar-background: var(--salt-category-20-bold-background);\n}\n\n.saltAvatar:has(img),\n.saltAvatar-withImage {\n  --avatar-background: none;\n}\n\n/* Style applied to the image/svg element. We specifically allow SVGs as the Avatar image to enable SVGs such as Flags to take up the full Avatar space */\n.saltAvatar > img,\n.saltAvatar > svg:not(.saltIcon) {\n  width: 100%;\n  height: 100%;\n}\n\n.saltAvatar:focus-visible {\n  outline-offset: var(--salt-spacing-fixed-100);\n}\n\nbutton.saltAvatar,\na.saltAvatar {\n  cursor: var(--salt-cursor-hover);\n}\n\nbutton.saltAvatar:disabled {\n  cursor: var(--salt-cursor-disabled);\n}\n\nbutton.saltAvatar::after,\na.saltAvatar::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  pointer-events: none;\n  background: transparent;\n}\n\n.saltAvatar[aria-expanded=\"true\"][aria-haspopup=\"menu\"]::after,\n.saltAvatar[aria-expanded=\"true\"][aria-haspopup=\"dialog\"]::after {\n  background: var(--salt-overlayable-background-hover);\n}\n\n@media (hover: hover) {\n  button.saltAvatar:hover::after,\n  a.saltAvatar:hover::after {\n    background: var(--salt-overlayable-background-hover);\n  }\n\n  button.saltAvatar:disabled:hover::after {\n    background: transparent;\n  }\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=Avatar.css.js.map

package/dist-es/avatar/Avatar.js

@@ -27,6 +27,7 @@ const Avatar = forwardRef(function Avatar2({
   color = "accent",
   name,
   nameToInitials = defaultNameToInitials,
+  kind = "person",
   src,
   size = DEFAULT_AVATAR_SIZE,
   style: styleProp,
@@ -35,8 +36,9 @@ const Avatar = forwardRef(function Avatar2({
   ...rest
 }, ref) {
   const targetWindow = useWindow();
-  const { UserIcon } = useIcon();
-  const fallbackIcon = fallbackIconProp === void 0 ? /* @__PURE__ */ jsx(UserIcon, { "aria-hidden": true }) : fallbackIconProp;
+  const { UserIcon, EntityIcon } = useIcon();
+  const DefaultFallbackIcon = kind === "entity" ? EntityIcon : UserIcon;
+  const fallbackIcon = fallbackIconProp === void 0 ? /* @__PURE__ */ jsx(DefaultFallbackIcon, { "aria-hidden": true }) : fallbackIconProp;
   useComponentCssInjection({
     testId: "salt-avatar",
     css: css_248z,
@@ -70,6 +72,7 @@ const Avatar = forwardRef(function Avatar2({
       className: clsx(
         withBaseName(),
         withBaseName(color),
+        withBaseName(kind),
         {
           [withBaseName("withImage")]: hasImgNotFailing
         },

package/dist-es/avatar/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","sources":["../src/avatar/Avatar.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 HTMLAttributes,\n  type ReactNode,\n} from \"react\";\nimport { useIcon } from \"../semantic-icon-provider\";\nimport { makePrefixer, type RenderPropsType, renderProps } from \"../utils\";\nimport avatarCss from \"./Avatar.css\";\nimport { useAvatarImage } from \"./useAvatarImage\";\n\nexport type NameToInitials = (name?: string) => string;\n\nexport interface AvatarProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * The name that Avatar represents.\n   */\n  name?: string;\n  /**\n   * Defines the function that gets initials. Default is capital first letter of each separate word in name.\n   * If a function is not passed or returns undefined, Avatar will default to Icon.\n   */\n  nameToInitials?: NameToInitials;\n  /**\n   * Image src of Avatar.\n   */\n  src?: string;\n  /**\n   * Multiplier for the base avatar.\n   */\n  size?: number;\n  /**\n   * Icon to be used as a default item. Defaults to `UserIcon`.\n   */\n  fallbackIcon?: ReactNode;\n  /**\n   * Changes Avatar's color.\n   */\n  color?:\n    | \"accent\"\n    | \"category-1\"\n    | \"category-2\"\n    | \"category-3\"\n    | \"category-4\"\n    | \"category-5\"\n    | \"category-6\"\n    | \"category-7\"\n    | \"category-8\"\n    | \"category-9\"\n    | \"category-10\"\n    | \"category-11\"\n    | \"category-12\"\n    | \"category-13\"\n    | \"category-14\"\n    | \"category-15\"\n    | \"category-16\"\n    | \"category-17\"\n    | \"category-18\"\n    | \"category-19\"\n    | \"category-20\";\n  /**\n   * Render prop to enable customization of the avatar root element.\n   */\n  render?: RenderPropsType[\"render\"];\n}\n\nconst withBaseName = makePrefixer(\"saltAvatar\");\nconst DEFAULT_AVATAR_SIZE = 2; // medium\n\ninterface AvatarActionProps extends ComponentPropsWithoutRef<\"div\"> {\n  render?: RenderPropsType[\"render\"];\n}\n\nconst AvatarAction = forwardRef<HTMLDivElement, AvatarActionProps>(\n  function AvatarAction(props, ref) {\n    return renderProps(\"div\", { ...props, ref });\n  },\n);\n\nconst defaultNameToInitials = (name?: string) =>\n  name\n    ?.split(\" \")\n    .slice(0, 2)\n    .map((n) => n[0])\n    .join(\"\")\n    .toUpperCase();\n\nexport const Avatar = forwardRef<HTMLDivElement, AvatarProps>(function Avatar(\n  {\n    className,\n    children: childrenProp,\n    color = \"accent\",\n    name,\n    nameToInitials = defaultNameToInitials,\n    src,\n    size = DEFAULT_AVATAR_SIZE,\n    style: styleProp,\n    fallbackIcon: fallbackIconProp,\n    render,\n    ...rest\n  },\n  ref,\n) {\n  const targetWindow = useWindow();\n  const { UserIcon } = useIcon();\n\n  const fallbackIcon =\n    fallbackIconProp === undefined ? (\n      <UserIcon aria-hidden />\n    ) : (\n      fallbackIconProp\n    );\n\n  useComponentCssInjection({\n    testId: \"salt-avatar\",\n    css: avatarCss,\n    window: targetWindow,\n  });\n\n  let children: ReactNode;\n\n  const style = {\n    ...styleProp,\n    \"--saltAvatar-size-multiplier\": `${size}`,\n  };\n\n  const status = useAvatarImage({ src });\n  const hasImgNotFailing = status === \"loaded\";\n  if (hasImgNotFailing) {\n    children = <img alt=\"\" src={src} />;\n  } else if (childrenProp != null) {\n    children = childrenProp;\n  }\n\n  const avatarInitials = nameToInitials(name);\n\n  const ariaProps = name\n    ? render\n      ? {\n          \"aria-label\": name,\n        }\n      : {\n          role: \"img\",\n          \"aria-label\": name,\n        }\n    : {};\n\n  return (\n    <AvatarAction\n      ref={ref}\n      render={render}\n      style={style}\n      className={clsx(\n        withBaseName(),\n        withBaseName(color),\n        {\n          [withBaseName(\"withImage\")]: hasImgNotFailing,\n        },\n        className,\n      )}\n      {...ariaProps}\n      {...rest}\n    >\n      {children || avatarInitials || fallbackIcon}\n    </AvatarAction>\n  );\n});\n"],"names":["AvatarAction","Avatar","avatarCss"],"mappings":";;;;;;;;;;;;;;;AAqEA,MAAM,YAAA,GAAe,aAAa,YAAY,CAAA;AAC9C,MAAM,mBAAA,GAAsB,CAAA;AAM5B,MAAM,YAAA,GAAe,UAAA;AAAA,EACnB,SAASA,aAAAA,CAAa,KAAA,EAAO,GAAA,EAAK;AAChC,IAAA,OAAO,YAAY,KAAA,EAAO,EAAE,GAAG,KAAA,EAAO,KAAK,CAAA;AAAA,EAC7C;AACF,CAAA;AAEA,MAAM,wBAAwB,CAAC,IAAA,KAC7B,IAAA,IAAA,IAAA,GAAA,MAAA,GAAA,IAAA,CACI,KAAA,CAAM,KACP,KAAA,CAAM,CAAA,EAAG,CAAA,CAAA,CACT,GAAA,CAAI,CAAC,CAAA,KAAM,CAAA,CAAE,CAAC,CAAA,CAAA,CACd,KAAK,EAAA,CAAA,CACL,WAAA,EAAA;AAEE,MAAM,MAAA,GAAS,UAAA,CAAwC,SAASC,OAAAA,CACrE;AAAA,EACE,SAAA;AAAA,EACA,QAAA,EAAU,YAAA;AAAA,EACV,KAAA,GAAQ,QAAA;AAAA,EACR,IAAA;AAAA,EACA,cAAA,GAAiB,qBAAA;AAAA,EACjB,GAAA;AAAA,EACA,IAAA,GAAO,mBAAA;AAAA,EACP,KAAA,EAAO,SAAA;AAAA,EACP,YAAA,EAAc,gBAAA;AAAA,EACd,MAAA;AAAA,EACA,GAAG;AACL,CAAA,EACA,GAAA,EACA;AACA,EAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,EAAA,MAAM,EAAE,QAAA,EAAS,GAAI,OAAA,EAAQ;AAE7B,EAAA,MAAM,eACJ,gBAAA,KAAqB,MAAA,uBAClB,QAAA,EAAA,EAAS,aAAA,EAAW,MAAC,CAAA,GAEtB,gBAAA;AAGJ,EAAA,wBAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,aAAA;AAAA,IACR,GAAA,EAAKC,QAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,IAAI,QAAA;AAEJ,EAAA,MAAM,KAAA,GAAQ;AAAA,IACZ,GAAG,SAAA;AAAA,IACH,8BAAA,EAAgC,GAAG,IAAI,CAAA;AAAA,GACzC;AAEA,EAAA,MAAM,MAAA,GAAS,cAAA,CAAe,EAAE,GAAA,EAAK,CAAA;AACrC,EAAA,MAAM,mBAAmB,MAAA,KAAW,QAAA;AACpC,EAAA,IAAI,gBAAA,EAAkB;AACpB,IAAA,QAAA,mBAAW,GAAA,CAAC,KAAA,EAAA,EAAI,GAAA,EAAI,EAAA,EAAG,GAAA,EAAU,CAAA;AAAA,EACnC,CAAA,MAAA,IAAW,gBAAgB,IAAA,EAAM;AAC/B,IAAA,QAAA,GAAW,YAAA;AAAA,EACb;AAEA,EAAA,MAAM,cAAA,GAAiB,eAAe,IAAI,CAAA;AAE1C,EAAA,MAAM,SAAA,GAAY,OACd,MAAA,GACE;AAAA,IACE,YAAA,EAAc;AAAA,GAChB,GACA;AAAA,IACE,IAAA,EAAM,KAAA;AAAA,IACN,YAAA,EAAc;AAAA,MAElB,EAAC;AAEL,EAAA,uBACE,GAAA;AAAA,IAAC,YAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,MAAA;AAAA,MACA,KAAA;AAAA,MACA,SAAA,EAAW,IAAA;AAAA,QACT,YAAA,EAAa;AAAA,QACb,aAAa,KAAK,CAAA;AAAA,QAClB;AAAA,UACE,CAAC,YAAA,CAAa,WAAW,CAAC,GAAG;AAAA,SAC/B;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG,SAAA;AAAA,MACH,GAAG,IAAA;AAAA,MAEH,sBAAY,cAAA,IAAkB;AAAA;AAAA,GACjC;AAEJ,CAAC;;;;"}
+{"version":3,"file":"Avatar.js","sources":["../src/avatar/Avatar.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 HTMLAttributes,\n  type ReactNode,\n} from \"react\";\nimport { useIcon } from \"../semantic-icon-provider\";\nimport { makePrefixer, type RenderPropsType, renderProps } from \"../utils\";\nimport avatarCss from \"./Avatar.css\";\nimport { useAvatarImage } from \"./useAvatarImage\";\n\nexport type NameToInitials = (name?: string) => string;\n\nexport interface AvatarProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * The name that Avatar represents.\n   */\n  name?: string;\n  /**\n   * Defines the function that gets initials. Default is capital first letter of each separate word in name.\n   * If a function is not passed or returns undefined, Avatar will default to Icon.\n   */\n  nameToInitials?: NameToInitials;\n  /**\n   * Image src of Avatar.\n   */\n  src?: string;\n  /**\n   * Multiplier for the base avatar.\n   */\n  size?: number;\n  /**\n   * Icon to be used as a default item. Defaults to the semantic `UserIcon` when\n   * `kind` is `\"person\"`, and the semantic `EntityIcon` when `kind`\n   * is `\"entity\"`.\n   */\n  fallbackIcon?: ReactNode;\n  /**\n   * What the Avatar depicts, which determines its default shape and fallback icon:\n   * - `\"person\"` renders a circular Avatar (default).\n   * - `\"entity\"` renders a square Avatar.\n   *\n   * @default \"person\"\n   */\n  kind?: \"person\" | \"entity\";\n  /**\n   * Changes Avatar's color.\n   */\n  color?:\n    | \"accent\"\n    | \"category-1\"\n    | \"category-2\"\n    | \"category-3\"\n    | \"category-4\"\n    | \"category-5\"\n    | \"category-6\"\n    | \"category-7\"\n    | \"category-8\"\n    | \"category-9\"\n    | \"category-10\"\n    | \"category-11\"\n    | \"category-12\"\n    | \"category-13\"\n    | \"category-14\"\n    | \"category-15\"\n    | \"category-16\"\n    | \"category-17\"\n    | \"category-18\"\n    | \"category-19\"\n    | \"category-20\";\n  /**\n   * Render prop to enable customization of the avatar root element.\n   */\n  render?: RenderPropsType[\"render\"];\n}\n\nconst withBaseName = makePrefixer(\"saltAvatar\");\nconst DEFAULT_AVATAR_SIZE = 2; // medium\n\ninterface AvatarActionProps extends ComponentPropsWithoutRef<\"div\"> {\n  render?: RenderPropsType[\"render\"];\n}\n\nconst AvatarAction = forwardRef<HTMLDivElement, AvatarActionProps>(\n  function AvatarAction(props, ref) {\n    return renderProps(\"div\", { ...props, ref });\n  },\n);\n\nconst defaultNameToInitials = (name?: string) =>\n  name\n    ?.split(\" \")\n    .slice(0, 2)\n    .map((n) => n[0])\n    .join(\"\")\n    .toUpperCase();\n\nexport const Avatar = forwardRef<HTMLDivElement, AvatarProps>(function Avatar(\n  {\n    className,\n    children: childrenProp,\n    color = \"accent\",\n    name,\n    nameToInitials = defaultNameToInitials,\n    kind = \"person\",\n    src,\n    size = DEFAULT_AVATAR_SIZE,\n    style: styleProp,\n    fallbackIcon: fallbackIconProp,\n    render,\n    ...rest\n  },\n  ref,\n) {\n  const targetWindow = useWindow();\n  const { UserIcon, EntityIcon } = useIcon();\n\n  const DefaultFallbackIcon = kind === \"entity\" ? EntityIcon : UserIcon;\n  const fallbackIcon =\n    fallbackIconProp === undefined ? (\n      <DefaultFallbackIcon aria-hidden />\n    ) : (\n      fallbackIconProp\n    );\n\n  useComponentCssInjection({\n    testId: \"salt-avatar\",\n    css: avatarCss,\n    window: targetWindow,\n  });\n\n  let children: ReactNode;\n\n  const style = {\n    ...styleProp,\n    \"--saltAvatar-size-multiplier\": `${size}`,\n  };\n\n  const status = useAvatarImage({ src });\n  const hasImgNotFailing = status === \"loaded\";\n  if (hasImgNotFailing) {\n    children = <img alt=\"\" src={src} />;\n  } else if (childrenProp != null) {\n    children = childrenProp;\n  }\n\n  const avatarInitials = nameToInitials(name);\n\n  const ariaProps = name\n    ? render\n      ? {\n          \"aria-label\": name,\n        }\n      : {\n          role: \"img\",\n          \"aria-label\": name,\n        }\n    : {};\n\n  return (\n    <AvatarAction\n      ref={ref}\n      render={render}\n      style={style}\n      className={clsx(\n        withBaseName(),\n        withBaseName(color),\n        withBaseName(kind),\n        {\n          [withBaseName(\"withImage\")]: hasImgNotFailing,\n        },\n        className,\n      )}\n      {...ariaProps}\n      {...rest}\n    >\n      {children || avatarInitials || fallbackIcon}\n    </AvatarAction>\n  );\n});\n"],"names":["AvatarAction","Avatar","avatarCss"],"mappings":"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"}

package/dist-es/breadcrumbs/Breadcrumb.css.js

@@ -0,0 +1,4 @@
+var css_248z = ".saltBreadcrumb {\n  align-items: center;\n  display: inline-flex;\n  flex: 0 1 auto;\n  gap: var(--salt-spacing-100);\n  list-style: none;\n  min-width: 0;\n}\n\n.saltBreadcrumb-current,\n.saltBreadcrumb-label,\n.saltBreadcrumb-link,\n.saltBreadcrumb-trigger {\n  min-width: 0;\n}\n\n.saltBreadcrumb-trigger {\n  align-items: center;\n  color: var(--salt-content-primary-foreground);\n  display: inline-flex;\n  font-family: var(--salt-text-label-fontFamily);\n  font-size: var(--salt-text-label-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  gap: var(--salt-spacing-50);\n  letter-spacing: var(--salt-text-letterSpacing);\n  line-height: var(--salt-text-label-lineHeight);\n  max-width: 100%;\n  text-decoration: var(--salt-typography-textDecoration-none);\n}\n\n.saltBreadcrumb-link:not(.saltBreadcrumb-current) {\n  text-decoration: var(--salt-typography-textDecoration-underline);\n}\n\n.saltBreadcrumb-link:not(.saltBreadcrumb-current):hover {\n  text-decoration: var(--salt-typography-textDecoration-none);\n}\n\n.saltBreadcrumb-link:not(.saltBreadcrumb-current):active {\n  text-decoration: var(--salt-typography-textDecoration-underline);\n}\n\n.saltBreadcrumb-trigger:focus {\n  outline: var(--salt-focused-outline);\n  text-decoration: var(--salt-typography-textDecoration-none);\n}\n\n.saltBreadcrumb-current {\n  cursor: var(--salt-cursor-text);\n}\n\n.saltBreadcrumb-separator {\n  --saltIcon-color: var(--salt-content-secondary-foreground);\n  --saltIcon-size: var(--salt-size-icon);\n\n  flex: 0 0 auto;\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=Breadcrumb.css.js.map

package/dist-es/breadcrumbs/Breadcrumb.css.js.map

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

package/dist-es/breadcrumbs/Breadcrumb.js

@@ -0,0 +1,102 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { clsx } from 'clsx';
+import { forwardRef, Children } 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 './Breadcrumb.css.js';
+import { BreadcrumbLabel } from './BreadcrumbLabel.js';
+import { BreadcrumbTrigger } from './BreadcrumbTrigger.js';
+import { useBreadcrumbContext, BreadcrumbContext } from './internal/BreadcrumbContext.js';
+
+const withBaseName = makePrefixer("saltBreadcrumb");
+const withBreadcrumbsBaseName = makePrefixer("saltBreadcrumbs");
+function isPrimitiveBreadcrumbLabel(children) {
+  return typeof children === "string" && children.trim() !== "" || typeof children === "number";
+}
+function isMissingBreadcrumbContent(children) {
+  const childArray = Children.toArray(children);
+  return childArray.length === 0 || childArray.every(
+    (child) => typeof child === "string" && child.trim() === ""
+  );
+}
+let missingBreadcrumbContentWarningShown = false;
+function warnIfMissingBreadcrumbContent() {
+  if (process.env.NODE_ENV === "production" || missingBreadcrumbContentWarningShown) {
+    return;
+  }
+  missingBreadcrumbContentWarningShown = true;
+  console.warn(
+    "Breadcrumb requires children to render a named breadcrumb item. Use text children for simple items or BreadcrumbTrigger with BreadcrumbLabel for composed items."
+  );
+}
+const Breadcrumb = forwardRef(
+  function Breadcrumb2(props, ref) {
+    const {
+      children,
+      className,
+      current: currentProp,
+      href,
+      render,
+      ...rest
+    } = props;
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "salt-breadcrumb",
+      css: css_248z,
+      window: targetWindow
+    });
+    const parentContext = useBreadcrumbContext();
+    const current = (parentContext == null ? void 0 : parentContext.current) ?? Boolean(currentProp);
+    const onNavigate = parentContext == null ? void 0 : parentContext.onNavigate;
+    const placement = (parentContext == null ? void 0 : parentContext.placement) ?? "trail";
+    const showSeparator = (parentContext == null ? void 0 : parentContext.showSeparator) ?? false;
+    const triggerRef = parentContext == null ? void 0 : parentContext.triggerRef;
+    const resolvedRender = render ?? (parentContext == null ? void 0 : parentContext.render);
+    const { LevelSeparatorIcon } = useIcon();
+    const missingContent = isMissingBreadcrumbContent(children);
+    if (missingContent) {
+      warnIfMissingBreadcrumbContent();
+    }
+    const primitiveChildren = isPrimitiveBreadcrumbLabel(children) ? children : void 0;
+    const content = missingContent ? null : primitiveChildren !== void 0 ? /* @__PURE__ */ jsx(BreadcrumbTrigger, { children: /* @__PURE__ */ jsx(BreadcrumbLabel, { children: primitiveChildren }) }) : children;
+    const context = {
+      current,
+      href,
+      onNavigate,
+      placement,
+      render: resolvedRender,
+      showSeparator,
+      triggerRef
+    };
+    return /* @__PURE__ */ jsx(
+      "li",
+      {
+        ref,
+        className: clsx(
+          placement === "disclosure" ? withBreadcrumbsBaseName("disclosureListItem") : withBaseName(),
+          className
+        ),
+        ...rest,
+        children: /* @__PURE__ */ jsxs(BreadcrumbContext.Provider, { value: context, children: [
+          content,
+          placement === "trail" && showSeparator ? /* @__PURE__ */ jsx(
+            LevelSeparatorIcon,
+            {
+              "aria-hidden": true,
+              className: withBaseName("separator")
+            }
+          ) : null
+        ] })
+      }
+    );
+  }
+);
+
+export { Breadcrumb };
+//# sourceMappingURL=Breadcrumb.js.map

package/dist-es/breadcrumbs/Breadcrumb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumb.js","sources":["../src/breadcrumbs/Breadcrumb.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  Children,\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type ReactNode,\n} from \"react\";\nimport { useIcon } from \"../semantic-icon-provider\";\nimport { makePrefixer, type RenderPropsType } from \"../utils\";\nimport breadcrumbCss from \"./Breadcrumb.css\";\nimport { BreadcrumbLabel } from \"./BreadcrumbLabel\";\nimport { BreadcrumbTrigger } from \"./BreadcrumbTrigger\";\nimport {\n  BreadcrumbContext,\n  useBreadcrumbContext,\n} from \"./internal/BreadcrumbContext\";\n\nconst withBaseName = makePrefixer(\"saltBreadcrumb\");\nconst withBreadcrumbsBaseName = makePrefixer(\"saltBreadcrumbs\");\n\nfunction isPrimitiveBreadcrumbLabel(children: ReactNode) {\n  return (\n    (typeof children === \"string\" && children.trim() !== \"\") ||\n    typeof children === \"number\"\n  );\n}\n\nfunction isMissingBreadcrumbContent(children: ReactNode) {\n  const childArray = Children.toArray(children);\n\n  return (\n    childArray.length === 0 ||\n    childArray.every(\n      (child) => typeof child === \"string\" && child.trim() === \"\",\n    )\n  );\n}\n\nlet missingBreadcrumbContentWarningShown = false;\n\nfunction warnIfMissingBreadcrumbContent() {\n  if (\n    process.env.NODE_ENV === \"production\" ||\n    missingBreadcrumbContentWarningShown\n  ) {\n    return;\n  }\n\n  missingBreadcrumbContentWarningShown = true;\n  console.warn(\n    \"Breadcrumb requires children to render a named breadcrumb item. Use text children for simple items or BreadcrumbTrigger with BreadcrumbLabel for composed items.\",\n  );\n}\n\nexport interface BreadcrumbProps\n  extends Omit<ComponentPropsWithoutRef<\"li\">, \"children\"> {\n  /**\n   * Custom breadcrumb content. Use this for advanced composition with\n   * `BreadcrumbTrigger` and `BreadcrumbLabel`.\n   */\n  children?: ReactNode;\n  /**\n   * If `true`, the breadcrumb represents the current page.\n   */\n  current?: boolean;\n  /**\n   * The URL for the breadcrumb. Provide this for the current breadcrumb so it\n   * renders as a focusable link with `aria-current=\"page\"`.\n   */\n  href?: string;\n  /**\n   * Render prop to enable customization of the underlying link element.\n   */\n  render?: RenderPropsType[\"render\"];\n}\n\nexport const Breadcrumb = forwardRef<HTMLLIElement, BreadcrumbProps>(\n  function Breadcrumb(props, ref) {\n    const {\n      children,\n      className,\n      current: currentProp,\n      href,\n      render,\n      ...rest\n    } = props;\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-breadcrumb\",\n      css: breadcrumbCss,\n      window: targetWindow,\n    });\n\n    const parentContext = useBreadcrumbContext();\n    const current = parentContext?.current ?? Boolean(currentProp);\n    const onNavigate = parentContext?.onNavigate;\n    const placement = parentContext?.placement ?? \"trail\";\n    const showSeparator = parentContext?.showSeparator ?? false;\n    const triggerRef = parentContext?.triggerRef;\n    const resolvedRender = render ?? parentContext?.render;\n    const { LevelSeparatorIcon } = useIcon();\n    const missingContent = isMissingBreadcrumbContent(children);\n\n    if (missingContent) {\n      warnIfMissingBreadcrumbContent();\n    }\n\n    const primitiveChildren = isPrimitiveBreadcrumbLabel(children)\n      ? children\n      : undefined;\n    const content = missingContent ? null : primitiveChildren !== undefined ? (\n      <BreadcrumbTrigger>\n        <BreadcrumbLabel>{primitiveChildren}</BreadcrumbLabel>\n      </BreadcrumbTrigger>\n    ) : (\n      children\n    );\n    const context = {\n      current,\n      href,\n      onNavigate,\n      placement,\n      render: resolvedRender,\n      showSeparator,\n      triggerRef,\n    };\n\n    return (\n      <li\n        ref={ref}\n        className={clsx(\n          placement === \"disclosure\"\n            ? withBreadcrumbsBaseName(\"disclosureListItem\")\n            : withBaseName(),\n          className,\n        )}\n        {...rest}\n      >\n        <BreadcrumbContext.Provider value={context}>\n          {content}\n          {placement === \"trail\" && showSeparator ? (\n            <LevelSeparatorIcon\n              aria-hidden\n              className={withBaseName(\"separator\")}\n            />\n          ) : null}\n        </BreadcrumbContext.Provider>\n      </li>\n    );\n  },\n);\n"],"names":["Breadcrumb","breadcrumbCss"],"mappings":"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"}

package/dist-es/breadcrumbs/BreadcrumbLabel.js

@@ -0,0 +1,23 @@
+import { jsx } from 'react/jsx-runtime';
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+import { makePrefixer } from '../utils/makePrefixer.js';
+import '../utils/useFloatingUI/useFloatingUI.js';
+import '../utils/useId.js';
+import '../salt-provider/SaltProvider.js';
+import '../viewport/ViewportProvider.js';
+
+const withBaseName = makePrefixer("saltBreadcrumb");
+const BreadcrumbLabel = forwardRef(function BreadcrumbLabel2({ className, ...rest }, ref) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ref,
+      className: clsx(withBaseName("label"), className),
+      ...rest
+    }
+  );
+});
+
+export { BreadcrumbLabel };
+//# sourceMappingURL=BreadcrumbLabel.js.map

package/dist-es/breadcrumbs/BreadcrumbLabel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BreadcrumbLabel.js","sources":["../src/breadcrumbs/BreadcrumbLabel.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { type ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport { makePrefixer } from \"../utils\";\n\nconst withBaseName = makePrefixer(\"saltBreadcrumb\");\n\nexport interface BreadcrumbLabelProps\n  extends ComponentPropsWithoutRef<\"span\"> {}\n\nexport const BreadcrumbLabel = forwardRef<\n  HTMLSpanElement,\n  BreadcrumbLabelProps\n>(function BreadcrumbLabel({ className, ...rest }, ref) {\n  return (\n    <span\n      ref={ref}\n      className={clsx(withBaseName(\"label\"), className)}\n      {...rest}\n    />\n  );\n});\n"],"names":["BreadcrumbLabel"],"mappings":";;;;;;;;;AAIA,MAAM,YAAA,GAAe,aAAa,gBAAgB,CAAA;AAK3C,MAAM,eAAA,GAAkB,WAG7B,SAASA,gBAAAA,CAAgB,EAAE,SAAA,EAAW,GAAG,IAAA,EAAK,EAAG,GAAA,EAAK;AACtD,EAAA,uBACE,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAA,EAAW,IAAA,CAAK,YAAA,CAAa,OAAO,GAAG,SAAS,CAAA;AAAA,MAC/C,GAAG;AAAA;AAAA,GACN;AAEJ,CAAC;;;;"}

package/dist-es/breadcrumbs/BreadcrumbTrigger.js

@@ -0,0 +1,50 @@
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+import { makePrefixer } from '../utils/makePrefixer.js';
+import { renderProps } from '../utils/renderProps.js';
+import '../utils/useFloatingUI/useFloatingUI.js';
+import { useForkRef } from '../utils/useForkRef.js';
+import '../utils/useId.js';
+import '../salt-provider/SaltProvider.js';
+import '../viewport/ViewportProvider.js';
+import { useBreadcrumbContext } from './internal/BreadcrumbContext.js';
+
+const withBaseName = makePrefixer("saltBreadcrumb");
+const withBreadcrumbsBaseName = makePrefixer("saltBreadcrumbs");
+const BreadcrumbTrigger = forwardRef(function BreadcrumbTrigger2(props, ref) {
+  const { children, className, onClick, ...rest } = props;
+  const context = useBreadcrumbContext();
+  if (!context) {
+    throw new Error("BreadcrumbTrigger must be rendered inside Breadcrumb");
+  }
+  const { current, href, onNavigate, placement, render, triggerRef } = context;
+  const handleRef = useForkRef(ref, triggerRef);
+  const isDisclosure = placement === "disclosure";
+  const triggerClassName = clsx(
+    isDisclosure ? withBreadcrumbsBaseName("disclosureItem") : withBaseName("trigger"),
+    className
+  );
+  const isNavigable = href !== void 0;
+  const handleClick = (event) => {
+    onClick == null ? void 0 : onClick(event);
+    if (isDisclosure || !event.defaultPrevented) {
+      onNavigate == null ? void 0 : onNavigate();
+    }
+  };
+  return renderProps("a", {
+    "aria-current": current ? "page" : void 0,
+    children,
+    className: clsx(triggerClassName, {
+      [withBaseName("link")]: !isDisclosure && isNavigable,
+      [withBaseName("current")]: current
+    }),
+    href,
+    onClick: isNavigable ? handleClick : onClick,
+    ref: handleRef,
+    render: isNavigable ? render : void 0,
+    ...rest
+  });
+});
+
+export { BreadcrumbTrigger };
+//# sourceMappingURL=BreadcrumbTrigger.js.map

package/dist-es/breadcrumbs/BreadcrumbTrigger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BreadcrumbTrigger.js","sources":["../src/breadcrumbs/BreadcrumbTrigger.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type MouseEventHandler,\n  type ReactNode,\n} from \"react\";\nimport { makePrefixer, renderProps, useForkRef } from \"../utils\";\nimport { useBreadcrumbContext } from \"./internal/BreadcrumbContext\";\n\nconst withBaseName = makePrefixer(\"saltBreadcrumb\");\nconst withBreadcrumbsBaseName = makePrefixer(\"saltBreadcrumbs\");\n\nexport interface BreadcrumbTriggerProps\n  extends Omit<ComponentPropsWithoutRef<\"a\">, \"children\" | \"color\" | \"href\"> {\n  /**\n   * Breadcrumb trigger content.\n   */\n  children?: ReactNode;\n}\n\nexport const BreadcrumbTrigger = forwardRef<\n  HTMLAnchorElement,\n  BreadcrumbTriggerProps\n>(function BreadcrumbTrigger(props, ref) {\n  const { children, className, onClick, ...rest } = props;\n  const context = useBreadcrumbContext();\n\n  if (!context) {\n    throw new Error(\"BreadcrumbTrigger must be rendered inside Breadcrumb\");\n  }\n\n  const { current, href, onNavigate, placement, render, triggerRef } = context;\n  const handleRef = useForkRef(ref, triggerRef);\n  const isDisclosure = placement === \"disclosure\";\n  const triggerClassName = clsx(\n    isDisclosure\n      ? withBreadcrumbsBaseName(\"disclosureItem\")\n      : withBaseName(\"trigger\"),\n    className,\n  );\n  const isNavigable = href !== undefined;\n  const handleClick: MouseEventHandler<HTMLAnchorElement> = (event) => {\n    onClick?.(event);\n\n    if (isDisclosure || !event.defaultPrevented) {\n      onNavigate?.();\n    }\n  };\n\n  return renderProps(\"a\", {\n    \"aria-current\": current ? \"page\" : undefined,\n    children,\n    className: clsx(triggerClassName, {\n      [withBaseName(\"link\")]: !isDisclosure && isNavigable,\n      [withBaseName(\"current\")]: current,\n    }),\n    href,\n    onClick: isNavigable ? handleClick : onClick,\n    ref: handleRef,\n    render: isNavigable ? render : undefined,\n    ...rest,\n  });\n});\n"],"names":["BreadcrumbTrigger"],"mappings":";;;;;;;;;;;AAUA,MAAM,YAAA,GAAe,aAAa,gBAAgB,CAAA;AAClD,MAAM,uBAAA,GAA0B,aAAa,iBAAiB,CAAA;AAUvD,MAAM,iBAAA,GAAoB,UAAA,CAG/B,SAASA,kBAAAA,CAAkB,OAAO,GAAA,EAAK;AACvC,EAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,OAAA,EAAS,GAAG,MAAK,GAAI,KAAA;AAClD,EAAA,MAAM,UAAU,oBAAA,EAAqB;AAErC,EAAA,IAAI,CAAC,OAAA,EAAS;AACZ,IAAA,MAAM,IAAI,MAAM,sDAAsD,CAAA;AAAA,EACxE;AAEA,EAAA,MAAM,EAAE,OAAA,EAAS,IAAA,EAAM,YAAY,SAAA,EAAW,MAAA,EAAQ,YAAW,GAAI,OAAA;AACrE,EAAA,MAAM,SAAA,GAAY,UAAA,CAAW,GAAA,EAAK,UAAU,CAAA;AAC5C,EAAA,MAAM,eAAe,SAAA,KAAc,YAAA;AACnC,EAAA,MAAM,gBAAA,GAAmB,IAAA;AAAA,IACvB,YAAA,GACI,uBAAA,CAAwB,gBAAgB,CAAA,GACxC,aAAa,SAAS,CAAA;AAAA,IAC1B;AAAA,GACF;AACA,EAAA,MAAM,cAAc,IAAA,KAAS,MAAA;AAC7B,EAAA,MAAM,WAAA,GAAoD,CAAC,KAAA,KAAU;AACnE,IAAA,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,CAAU,KAAA,CAAA;AAEV,IAAA,IAAI,YAAA,IAAgB,CAAC,KAAA,CAAM,gBAAA,EAAkB;AAC3C,MAAA,UAAA,IAAA,IAAA,GAAA,MAAA,GAAA,UAAA,EAAA;AAAA,IACF;AAAA,EACF,CAAA;AAEA,EAAA,OAAO,YAAY,GAAA,EAAK;AAAA,IACtB,cAAA,EAAgB,UAAU,MAAA,GAAS,MAAA;AAAA,IACnC,QAAA;AAAA,IACA,SAAA,EAAW,KAAK,gBAAA,EAAkB;AAAA,MAChC,CAAC,YAAA,CAAa,MAAM,CAAC,GAAG,CAAC,YAAA,IAAgB,WAAA;AAAA,MACzC,CAAC,YAAA,CAAa,SAAS,CAAC,GAAG;AAAA,KAC5B,CAAA;AAAA,IACD,IAAA;AAAA,IACA,OAAA,EAAS,cAAc,WAAA,GAAc,OAAA;AAAA,IACrC,GAAA,EAAK,SAAA;AAAA,IACL,MAAA,EAAQ,cAAc,MAAA,GAAS,MAAA;AAAA,IAC/B,GAAG;AAAA,GACJ,CAAA;AACH,CAAC;;;;"}

package/dist-es/breadcrumbs/Breadcrumbs.css.js

@@ -0,0 +1,4 @@
+var css_248z = ".saltBreadcrumbs {\n  display: block;\n  margin-block: var(--salt-spacing-25);\n}\n\n.saltBreadcrumbs-ol {\n  display: flex;\n  align-items: center;\n  flex-wrap: nowrap;\n  gap: var(--salt-spacing-100);\n  justify-content: flex-start;\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n\n.saltBreadcrumbs-ol-wrap {\n  flex-wrap: wrap;\n}\n\n.saltBreadcrumbs-collapseItem {\n  align-items: center;\n  display: inline-flex;\n  flex: 0 1 auto;\n  gap: var(--salt-spacing-100);\n  list-style: none;\n  min-width: 0;\n}\n\n.saltBreadcrumbs-collapseButton[aria-expanded=\"true\"] {\n  --saltButton-background: var(--salt-actionable-subtle-background-active);\n  --saltButton-background-hover: var(--salt-actionable-subtle-background-active);\n  --saltButton-text-color: var(--salt-actionable-subtle-foreground-active);\n  --saltButton-text-color-hover: var(--salt-actionable-subtle-foreground-active);\n  --saltButton-borderColor: var(--salt-actionable-subtle-borderColor-active);\n  --saltButton-borderColor-hover: var(--salt-actionable-subtle-borderColor-active);\n  cursor: var(--salt-cursor-active);\n}\n\n.saltBreadcrumbs-disclosure {\n  background: var(--salt-container-primary-background);\n  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor-selected);\n  overflow: hidden;\n  overflow-y: auto;\n  min-width: 10em;\n  position: relative;\n  z-index: var(--salt-zIndex-flyover);\n  box-shadow: var(--salt-overlayable-shadow-popout);\n  box-sizing: border-box;\n  border-radius: var(--salt-palette-corner, 0);\n}\n\n.saltBreadcrumbs-disclosureList {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n\n.saltBreadcrumbs-disclosureListItem {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n\n.saltBreadcrumbs-disclosureItem {\n  color: var(--salt-content-primary-foreground);\n  background: var(--salt-selectable-background);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  font-family: var(--salt-text-fontFamily);\n  line-height: var(--salt-text-lineHeight);\n  letter-spacing: var(--salt-text-letterSpacing);\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n  padding: calc(var(--salt-spacing-100) + var(--salt-spacing-25)) var(--salt-spacing-100);\n  display: flex;\n  gap: var(--salt-spacing-100);\n  position: relative;\n  cursor: var(--salt-cursor-hover);\n  box-sizing: border-box;\n  flex-shrink: 0;\n  text-decoration: none;\n  width: 100%;\n}\n\n.saltBreadcrumbs-disclosureItem:focus-visible {\n  outline: var(--salt-focused-outline);\n  outline-offset: calc(var(--salt-size-fixed-100) * -2);\n}\n\n.saltBreadcrumbs-disclosureItem:hover {\n  outline: none;\n}\n\n.saltBreadcrumbs-disclosureItem:hover,\n.saltBreadcrumbs-disclosureItem:focus-visible {\n  background: var(--salt-selectable-background-hover);\n}\n\n.saltBreadcrumbs-disclosureItem:active {\n  background: var(--salt-selectable-background-selected);\n  box-shadow:\n    0 calc(var(--salt-size-fixed-100) * -1) 0 0 var(--salt-selectable-borderColor-selected),\n    0 var(--salt-size-fixed-100) 0 0 var(--salt-selectable-borderColor-selected);\n}\n\n.saltBreadcrumbs-disclosureItem[aria-disabled=\"true\"],\n.saltBreadcrumbs-disclosureItem[aria-disabled=\"true\"]:active {\n  background: var(--salt-selectable-background-disabled);\n  color: var(--salt-content-primary-foreground-disabled);\n  cursor: var(--salt-cursor-disabled);\n  box-shadow: none;\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=Breadcrumbs.css.js.map

package/dist-es/breadcrumbs/Breadcrumbs.css.js.map

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

package/dist-es/breadcrumbs/Breadcrumbs.js

@@ -0,0 +1,149 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { clsx } from 'clsx';
+import { forwardRef, isValidElement } 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 { Breadcrumb } from './Breadcrumb.js';
+import css_248z from './Breadcrumbs.css.js';
+import { BreadcrumbContext } from './internal/BreadcrumbContext.js';
+import { BreadcrumbOverflowDisclosure } from './internal/BreadcrumbOverflowDisclosure.js';
+import { flattenBreadcrumbItems } from './internal/breadcrumbItems.js';
+
+const withBaseName = makePrefixer("saltBreadcrumbs");
+const withItemBaseName = makePrefixer("saltBreadcrumb");
+function isBreadcrumbElement(child) {
+  return isValidElement(child) && child.type === Breadcrumb;
+}
+function getCurrentIndex(items) {
+  const explicitCurrentIndex = items.findIndex(({ props }) => props.current);
+  return explicitCurrentIndex === -1 ? Math.max(items.length - 1, 0) : explicitCurrentIndex;
+}
+function getCollapseRange({
+  currentIndex,
+  items,
+  itemsAfterCollapse,
+  itemsBeforeCollapse
+}) {
+  const itemCount = items.length;
+  const effectiveItemsAfterCollapse = Math.max(
+    itemsAfterCollapse,
+    itemCount - currentIndex
+  );
+  if (itemsBeforeCollapse + effectiveItemsAfterCollapse >= itemCount) {
+    return void 0;
+  }
+  const hiddenStart = itemsBeforeCollapse;
+  const hiddenEnd = itemCount - effectiveItemsAfterCollapse;
+  const hiddenItems = items.slice(hiddenStart, hiddenEnd);
+  return {
+    hiddenItems,
+    visibleAfter: items.slice(hiddenEnd),
+    visibleBefore: items.slice(0, hiddenStart)
+  };
+}
+function renderSeparator(SeparatorIcon) {
+  return /* @__PURE__ */ jsx(SeparatorIcon, { "aria-hidden": true, className: withItemBaseName("separator") });
+}
+const Breadcrumbs = forwardRef(
+  function Breadcrumbs2(props, ref) {
+    const {
+      children,
+      className,
+      itemsAfterCollapse = 1,
+      itemsBeforeCollapse = 1,
+      maxItems,
+      render,
+      wrap = false,
+      ...rest
+    } = props;
+    const targetWindow = useWindow();
+    const { LevelSeparatorIcon } = useIcon();
+    useComponentCssInjection({
+      testId: "salt-breadcrumbs",
+      css: css_248z,
+      window: targetWindow
+    });
+    const items = flattenBreadcrumbItems(children).filter(isBreadcrumbElement).map((element, index) => ({
+      element,
+      index,
+      key: element.key ?? index,
+      props: element.props
+    }));
+    const currentIndex = getCurrentIndex(items);
+    const shouldCollapse = !wrap && maxItems !== void 0 && items.length > maxItems;
+    const collapseRange = shouldCollapse ? getCollapseRange({
+      currentIndex,
+      items,
+      itemsAfterCollapse,
+      itemsBeforeCollapse
+    }) : void 0;
+    const renderParts = collapseRange ? [
+      ...collapseRange.visibleBefore.map(
+        (item) => ({ item, type: "breadcrumb" })
+      ),
+      {
+        hiddenItems: collapseRange.hiddenItems,
+        type: "collapse"
+      },
+      ...collapseRange.visibleAfter.map(
+        (item) => ({ item, type: "breadcrumb" })
+      )
+    ] : items.map((item) => ({ item, type: "breadcrumb" }));
+    return /* @__PURE__ */ jsx("nav", { ref, className: clsx(withBaseName(), className), ...rest, children: /* @__PURE__ */ jsx(
+      "ol",
+      {
+        className: clsx(withBaseName("ol"), {
+          [withBaseName("ol-wrap")]: wrap
+        }),
+        children: renderParts.map((part, index) => {
+          const showSeparator = index < renderParts.length - 1;
+          if (part.type === "collapse") {
+            return /* @__PURE__ */ jsxs(
+              "li",
+              {
+                className: clsx(
+                  withItemBaseName(),
+                  withBaseName("collapseItem")
+                ),
+                children: [
+                  /* @__PURE__ */ jsx(
+                    BreadcrumbOverflowDisclosure,
+                    {
+                      currentIndex,
+                      items: part.hiddenItems,
+                      render
+                    }
+                  ),
+                  showSeparator ? renderSeparator(LevelSeparatorIcon) : null
+                ]
+              },
+              "breadcrumbs-collapse"
+            );
+          }
+          return /* @__PURE__ */ jsx(
+            BreadcrumbContext.Provider,
+            {
+              value: {
+                current: part.item.index === currentIndex,
+                placement: "trail",
+                render,
+                showSeparator
+              },
+              children: part.item.element
+            },
+            part.item.key
+          );
+        })
+      }
+    ) });
+  }
+);
+
+export { Breadcrumbs };
+//# sourceMappingURL=Breadcrumbs.js.map

package/dist-es/breadcrumbs/Breadcrumbs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumbs.js","sources":["../src/breadcrumbs/Breadcrumbs.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type ElementType,\n  forwardRef,\n  isValidElement,\n  type ReactElement,\n  type ReactNode,\n} from \"react\";\nimport { useIcon } from \"../semantic-icon-provider\";\nimport { makePrefixer, type RenderPropsType } from \"../utils\";\nimport { Breadcrumb, type BreadcrumbProps } from \"./Breadcrumb\";\nimport breadcrumbsCss from \"./Breadcrumbs.css\";\nimport { BreadcrumbContext } from \"./internal/BreadcrumbContext\";\nimport { BreadcrumbOverflowDisclosure } from \"./internal/BreadcrumbOverflowDisclosure\";\nimport {\n  flattenBreadcrumbItems,\n  type NormalizedBreadcrumb,\n} from \"./internal/breadcrumbItems\";\n\nconst withBaseName = makePrefixer(\"saltBreadcrumbs\");\nconst withItemBaseName = makePrefixer(\"saltBreadcrumb\");\n\ninterface CollapseRange {\n  hiddenItems: NormalizedBreadcrumb[];\n  visibleAfter: NormalizedBreadcrumb[];\n  visibleBefore: NormalizedBreadcrumb[];\n}\n\ntype RenderPart =\n  | {\n      item: NormalizedBreadcrumb;\n      type: \"breadcrumb\";\n    }\n  | {\n      hiddenItems: NormalizedBreadcrumb[];\n      type: \"collapse\";\n    };\n\nexport interface BreadcrumbsProps\n  extends Omit<ComponentPropsWithoutRef<\"nav\">, \"children\"> {\n  /**\n   * Breadcrumb items.\n   */\n  children?: ReactNode;\n  /**\n   * The number of items to keep after the collapse point.\n   * Defaults to 1.\n   */\n  itemsAfterCollapse?: number;\n  /**\n   * The number of items to keep before the collapse point.\n   * Defaults to 1.\n   */\n  itemsBeforeCollapse?: number;\n  /**\n   * The maximum number of breadcrumbs to render before collapsing.\n   */\n  maxItems?: number;\n  /**\n   * Render prop to enable customization of the underlying link elements.\n   */\n  render?: RenderPropsType[\"render\"];\n  /**\n   * If `true`, breadcrumbs can wrap onto multiple lines.\n   * Defaults to `false`.\n   */\n  wrap?: boolean;\n}\n\nfunction isBreadcrumbElement(\n  child: ReactNode,\n): child is ReactElement<BreadcrumbProps> {\n  return isValidElement<BreadcrumbProps>(child) && child.type === Breadcrumb;\n}\n\nfunction getCurrentIndex(items: NormalizedBreadcrumb[]) {\n  const explicitCurrentIndex = items.findIndex(({ props }) => props.current);\n\n  return explicitCurrentIndex === -1\n    ? Math.max(items.length - 1, 0)\n    : explicitCurrentIndex;\n}\n\nfunction getCollapseRange({\n  currentIndex,\n  items,\n  itemsAfterCollapse,\n  itemsBeforeCollapse,\n}: {\n  currentIndex: number;\n  items: NormalizedBreadcrumb[];\n  itemsAfterCollapse: number;\n  itemsBeforeCollapse: number;\n}): CollapseRange | undefined {\n  const itemCount = items.length;\n  const effectiveItemsAfterCollapse = Math.max(\n    itemsAfterCollapse,\n    itemCount - currentIndex,\n  );\n\n  if (itemsBeforeCollapse + effectiveItemsAfterCollapse >= itemCount) {\n    return undefined;\n  }\n\n  const hiddenStart = itemsBeforeCollapse;\n  const hiddenEnd = itemCount - effectiveItemsAfterCollapse;\n  const hiddenItems = items.slice(hiddenStart, hiddenEnd);\n\n  return {\n    hiddenItems,\n    visibleAfter: items.slice(hiddenEnd),\n    visibleBefore: items.slice(0, hiddenStart),\n  };\n}\n\nfunction renderSeparator(SeparatorIcon: ElementType) {\n  return (\n    <SeparatorIcon aria-hidden className={withItemBaseName(\"separator\")} />\n  );\n}\n\nexport const Breadcrumbs = forwardRef<HTMLElement, BreadcrumbsProps>(\n  function Breadcrumbs(props, ref) {\n    const {\n      children,\n      className,\n      itemsAfterCollapse = 1,\n      itemsBeforeCollapse = 1,\n      maxItems,\n      render,\n      wrap = false,\n      ...rest\n    } = props;\n    const targetWindow = useWindow();\n    const { LevelSeparatorIcon } = useIcon();\n\n    useComponentCssInjection({\n      testId: \"salt-breadcrumbs\",\n      css: breadcrumbsCss,\n      window: targetWindow,\n    });\n\n    const items = flattenBreadcrumbItems(children)\n      .filter(isBreadcrumbElement)\n      .map((element, index) => ({\n        element,\n        index,\n        key: element.key ?? index,\n        props: element.props,\n      }));\n\n    const currentIndex = getCurrentIndex(items);\n    const shouldCollapse =\n      !wrap && maxItems !== undefined && items.length > maxItems;\n\n    const collapseRange = shouldCollapse\n      ? getCollapseRange({\n          currentIndex,\n          items,\n          itemsAfterCollapse,\n          itemsBeforeCollapse,\n        })\n      : undefined;\n\n    const renderParts: RenderPart[] = collapseRange\n      ? [\n          ...collapseRange.visibleBefore.map(\n            (item): RenderPart => ({ item, type: \"breadcrumb\" }),\n          ),\n          {\n            hiddenItems: collapseRange.hiddenItems,\n            type: \"collapse\",\n          },\n          ...collapseRange.visibleAfter.map(\n            (item): RenderPart => ({ item, type: \"breadcrumb\" }),\n          ),\n        ]\n      : items.map((item): RenderPart => ({ item, type: \"breadcrumb\" }));\n\n    return (\n      <nav ref={ref} className={clsx(withBaseName(), className)} {...rest}>\n        <ol\n          className={clsx(withBaseName(\"ol\"), {\n            [withBaseName(\"ol-wrap\")]: wrap,\n          })}\n        >\n          {renderParts.map((part, index) => {\n            const showSeparator = index < renderParts.length - 1;\n\n            if (part.type === \"collapse\") {\n              return (\n                <li\n                  className={clsx(\n                    withItemBaseName(),\n                    withBaseName(\"collapseItem\"),\n                  )}\n                  key=\"breadcrumbs-collapse\"\n                >\n                  <BreadcrumbOverflowDisclosure\n                    currentIndex={currentIndex}\n                    items={part.hiddenItems}\n                    render={render}\n                  />\n                  {showSeparator ? renderSeparator(LevelSeparatorIcon) : null}\n                </li>\n              );\n            }\n\n            return (\n              <BreadcrumbContext.Provider\n                key={part.item.key}\n                value={{\n                  current: part.item.index === currentIndex,\n                  placement: \"trail\",\n                  render,\n                  showSeparator,\n                }}\n              >\n                {part.item.element}\n              </BreadcrumbContext.Provider>\n            );\n          })}\n        </ol>\n      </nav>\n    );\n  },\n);\n"],"names":["Breadcrumbs","breadcrumbsCss"],"mappings":"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"}

package/dist-es/breadcrumbs/internal/BreadcrumbContext.js

@@ -0,0 +1,9 @@
+import { createContext, useContext } from 'react';
+
+const BreadcrumbContext = createContext(void 0);
+function useBreadcrumbContext() {
+  return useContext(BreadcrumbContext);
+}
+
+export { BreadcrumbContext, useBreadcrumbContext };
+//# sourceMappingURL=BreadcrumbContext.js.map

package/dist-es/breadcrumbs/internal/BreadcrumbContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BreadcrumbContext.js","sources":["../src/breadcrumbs/internal/BreadcrumbContext.ts"],"sourcesContent":["import { createContext, type Ref, useContext } from \"react\";\nimport type { RenderPropsType } from \"../../utils\";\n\nexport type BreadcrumbPlacement = \"disclosure\" | \"trail\";\n\nexport interface BreadcrumbContextValue {\n  current: boolean;\n  href?: string;\n  onNavigate?: () => void;\n  placement: BreadcrumbPlacement;\n  render?: RenderPropsType[\"render\"];\n  showSeparator: boolean;\n  triggerRef?: Ref<HTMLAnchorElement>;\n}\n\nexport const BreadcrumbContext = createContext<\n  BreadcrumbContextValue | undefined\n>(undefined);\n\nexport function useBreadcrumbContext() {\n  return useContext(BreadcrumbContext);\n}\n"],"names":[],"mappings":";;AAeO,MAAM,iBAAA,GAAoB,cAE/B,MAAS;AAEJ,SAAS,oBAAA,GAAuB;AACrC,EAAA,OAAO,WAAW,iBAAiB,CAAA;AACrC;;;;"}