@twilio-paste/breadcrumb/dist/index.js

A Breadcrumb is text that shows navigation hierarchy and lets users navigate a nested path of pages.

"use client";
"use strict";var __create=Object.create;var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __getProtoOf=Object.getPrototypeOf,__hasOwnProp=Object.prototype.hasOwnProperty;var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0})},__copyProps=(to,from,except,desc)=>{if(from&&typeof from=="object"||typeof from=="function")for(let key of __getOwnPropNames(from))!__hasOwnProp.call(to,key)&&key!==except&&__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable});return to};var __toESM=(mod,isNodeMode,target)=>(target=mod!=null?__create(__getProtoOf(mod)):{},__copyProps(isNodeMode||!mod||!mod.__esModule?__defProp(target,"default",{value:mod,enumerable:!0}):target,mod)),__toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var src_exports={};__export(src_exports,{Breadcrumb:()=>Breadcrumb,BreadcrumbItem:()=>BreadcrumbItem});module.exports=__toCommonJS(src_exports);var import_anchor=require("@twilio-paste/anchor"),import_box=require("@twilio-paste/box"),import_text=require("@twilio-paste/text"),import_uid_library=require("@twilio-paste/uid-library"),React=__toESM(require("react")),BreadcrumbSeparator=({element})=>React.createElement(import_text.Text,{as:"span",color:"colorTextWeak",fontSize:"fontSize20",lineHeight:"lineHeight20",paddingLeft:"space20",paddingRight:"space20",role:"presentation",element:`${element}_SEPARATOR`},"/");BreadcrumbSeparator.displayName="BreadcrumbSeparator";var DEFAULT_ELEMENT_NAME="BREADCRUMB",BreadcrumbItem=React.forwardRef(({children,element,parentElement,href,last,...props},ref)=>{let elementName=element||parentElement||DEFAULT_ELEMENT_NAME;return React.createElement(import_box.Box,{alignItems:"center",as:"li",display:"inline-flex",element:`${elementName}_ITEM`,fontSize:"fontSize20",lineHeight:"lineHeight20"},href?React.createElement(import_anchor.Anchor,{...props,element:`${elementName}_ANCHOR`,href,ref},children):React.createElement(import_text.Text,{...(0,import_text.safelySpreadTextProps)(props),"aria-current":"page",as:"span",color:"colorTextWeak",element:`${elementName}_TEXT`,fontSize:"fontSize20",lineHeight:"lineHeight20",ref},children),!last&&React.createElement(BreadcrumbSeparator,{element:elementName}))});BreadcrumbItem.displayName="BreadcrumbItem";var Breadcrumb=React.forwardRef(({children,element=DEFAULT_ELEMENT_NAME,...props},ref)=>{let[childrenCount,validChildren]=React.useMemo(()=>[React.Children.count(children),React.Children.toArray(children).filter(child=>React.isValidElement(child)||typeof child=="string")],[children]),keySeed=(0,import_uid_library.useUIDSeed)();return React.createElement(import_box.Box,{"aria-label":"breadcrumb",...(0,import_box.safelySpreadBoxProps)(props),as:"nav",element,ref},React.createElement(import_box.Box,{alignItems:"center",as:"ol",display:"inline-flex",listStyleType:"none",margin:"space0",padding:"space0"},validChildren.map((child,index)=>React.cloneElement(child,{last:childrenCount===index+1,key:keySeed(`breadcrumb-${index}`),parentElement:element}))))});Breadcrumb.displayName="Breadcrumb";