@rbxts/uiblox 0.2.0-alpha.2 → 0.2.0-alpha.20

package/out/ui/packages/appBar/components/AppBar.styles.d.ts

@@ -1,6 +1,8 @@
 export type AppBarElevation = "flat" | "raised";
+export type AppBarColor = "default" | "primary";
 declare const useAppBarStyles: (props: {
     elevation?: AppBarElevation;
+    color?: AppBarColor;
     hasActions?: boolean;
 }) => import("../../../../theme/index").ClassNameMap<string>;
 export default useAppBarStyles;

package/out/ui/packages/appBar/components/AppBar.styles.luau

@@ -8,6 +8,10 @@ local useAppBarStyles = componentStyles("AppBar", function(theme, _param)
 	if elevation == nil then
 		elevation = "raised"
 	end
+	local color = _param.color
+	if color == nil then
+		color = "default"
+	end
 	local hasActions = _param.hasActions
 	if hasActions == nil then
 		hasActions = false
@@ -15,7 +19,7 @@ local useAppBarStyles = componentStyles("AppBar", function(theme, _param)
 	local _object = {
 		root = {
 			Size = UDim2.new(1, 0, 0, theme.spacing.calc(7)),
-			BackgroundColor3 = if elevation == "raised" then theme.palette.surface.elevated else theme.palette.surface.paper,
+			BackgroundColor3 = if color == "primary" then theme.palette.primary.main elseif elevation == "raised" then theme.palette.surface.elevated else theme.palette.surface.paper,
 			BorderSizePixel = 0,
 			ZIndex = 11000,
 		},
@@ -37,7 +41,7 @@ local useAppBarStyles = componentStyles("AppBar", function(theme, _param)
 		_condition = theme.typography.fontSizes.body
 	end
 	_object_1[_left_1] = _condition
-	_object_1.TextColor3 = theme.palette.text.primary
+	_object_1.TextColor3 = if color == "primary" then theme.palette.primary.on else theme.palette.text.primary
 	_object_1.TextXAlignment = Enum.TextXAlignment.Left
 	_object_1.TextYAlignment = Enum.TextYAlignment.Center
 	_object_1.TextTruncate = Enum.TextTruncate.AtEnd

package/out/ui/packages/autocomplete/components/Autocomplete.luau

@@ -13,6 +13,10 @@ local function Autocomplete(props)
 	local loading = _binding.loading
 	local placeholder = _binding.placeholder
 	local searchable = _binding.searchable
+	local defaultOpen = _binding.defaultOpen
+	local defaultQuery = _binding.defaultQuery
+	local emptyText = _binding.emptyText
+	local empty = _binding.empty
 	local reducedMotion = _binding.reducedMotion
 	local size = _binding.size
 	local className = _binding.className
@@ -28,6 +32,10 @@ local function Autocomplete(props)
 		loading = loading,
 		placeholder = placeholder,
 		searchable = autocompleteSearchable(searchable),
+		defaultOpen = defaultOpen,
+		defaultQuery = defaultQuery,
+		emptyText = emptyText,
+		empty = empty,
 		reducedMotion = reducedMotion,
 		size = size,
 		className = className,

package/out/ui/packages/avatar/components/Avatar.d.ts

@@ -1,8 +1,10 @@
 import { CustomizedProps } from "../../../../theme/index";
+import { AvatarVariant } from "./Avatar.styles";
 export interface AvatarProps {
     name?: string;
     image?: string;
     size?: number;
+    variant?: AvatarVariant;
 }
 declare function Avatar(props: CustomizedProps<Frame, AvatarProps>): JSX.Element;
 export default Avatar;

package/out/ui/packages/avatar/components/Avatar.luau

@@ -11,12 +11,17 @@ local function Avatar(props)
 	end
 	local image = _binding.image
 	local size = _binding.size
+	local variant = _binding.variant
+	if variant == nil then
+		variant = "circular"
+	end
 	local className = _binding.className
 	local sx = _binding.sx
 	local id = _binding.id
 	local ref = _binding.ref
 	local styles = useAvatarStyles({
 		size = size,
+		variant = variant,
 	})
 	local _attributes = {}
 	local _condition = id
@@ -38,30 +43,33 @@ local function Avatar(props)
 			_attributes[_k] = _v
 		end
 	end
-	local _attributes_1 = table.clone(styles.corner)
-	setmetatable(_attributes_1, nil)
-	local _exp = React.createElement("uicorner", _attributes_1)
+	local _condition_1 = variant ~= "square"
+	if _condition_1 then
+		local _attributes_1 = table.clone(styles.corner)
+		setmetatable(_attributes_1, nil)
+		_condition_1 = React.createElement("uicorner", _attributes_1)
+	end
 	local _result
 	if image ~= nil then
-		local _attributes_2 = {
+		local _attributes_1 = {
 			key = "Image",
 		}
 		for _k, _v in styles.image do
-			_attributes_2[_k] = _v
+			_attributes_1[_k] = _v
 		end
-		_attributes_2.Image = image
-		_result = (React.createElement("imagelabel", _attributes_2))
+		_attributes_1.Image = image
+		_result = (React.createElement("imagelabel", _attributes_1))
 	else
-		local _attributes_2 = {
+		local _attributes_1 = {
 			key = "Initials",
 		}
 		for _k, _v in styles.text do
-			_attributes_2[_k] = _v
+			_attributes_1[_k] = _v
 		end
-		_attributes_2.Text = avatarInitials(name)
-		_result = (React.createElement("textlabel", _attributes_2))
+		_attributes_1.Text = avatarInitials(name)
+		_result = (React.createElement("textlabel", _attributes_1))
 	end
-	return React.createElement("frame", _attributes, _exp, _result)
+	return React.createElement("frame", _attributes, _condition_1, _result)
 end
 local default = Avatar
 return {

package/out/ui/packages/avatar/components/Avatar.styles.d.ts

@@ -1,4 +1,6 @@
+export type AvatarVariant = "circular" | "rounded" | "square";
 declare const useAvatarStyles: (props: {
     size?: number;
+    variant?: AvatarVariant;
 }) => import("../../../../theme/index").ClassNameMap<string>;
 export default useAvatarStyles;

package/out/ui/packages/avatar/components/Avatar.styles.luau

@@ -8,6 +8,10 @@ local useAvatarStyles = componentStyles("Avatar", function(theme, _param)
 	if size == nil then
 		size = 40
 	end
+	local variant = _param.variant
+	if variant == nil then
+		variant = "circular"
+	end
 	return createStyles({
 		root = {
 			Size = UDim2.fromOffset(size, size),
@@ -29,7 +33,7 @@ local useAvatarStyles = componentStyles("Avatar", function(theme, _param)
 			TextColor3 = theme.palette.primary.on,
 		},
 		corner = {
-			CornerRadius = UDim.new(1, 0),
+			CornerRadius = if variant == "rounded" then UDim.new(0, theme.shape.borderRadius) else UDim.new(1, 0),
 		},
 	})
 end)

package/out/ui/packages/backdrop/components/Backdrop.d.ts

@@ -0,0 +1,10 @@
+import React from "@rbxts/react";
+import { CustomizedProps } from "../../../../theme/index";
+export interface BackdropProps {
+    open?: boolean;
+    invisible?: boolean;
+    onClick?: () => void;
+    children?: React.ReactNode;
+}
+declare function Backdrop(props: CustomizedProps<TextButton, BackdropProps>): JSX.Element | undefined;
+export default Backdrop;

package/out/ui/packages/backdrop/components/Backdrop.luau

@@ -0,0 +1,58 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local useBackdropStyles = TS.import(script, script.Parent, "Backdrop.styles").default
+local function Backdrop(props)
+	local _binding = props
+	local open = _binding.open
+	if open == nil then
+		open = true
+	end
+	local invisible = _binding.invisible
+	local onClick = _binding.onClick
+	local children = _binding.children
+	local className = _binding.className
+	local sx = _binding.sx
+	local id = _binding.id
+	local ref = _binding.ref
+	local styles = useBackdropStyles({
+		invisible = invisible,
+	})
+	if open ~= true then
+		return nil
+	end
+	local _attributes = {}
+	local _condition = id
+	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
+		_condition = "Backdrop"
+	end
+	_attributes.key = _condition
+	_attributes.ref = ref
+	for _k, _v in styles.root do
+		_attributes[_k] = _v
+	end
+	if className then
+		for _k, _v in className do
+			_attributes[_k] = _v
+		end
+	end
+	if sx then
+		for _k, _v in sx do
+			_attributes[_k] = _v
+		end
+	end
+	_attributes.Event = {
+		Activated = function()
+			local _result = onClick
+			if _result ~= nil then
+				_result = _result()
+			end
+			return _result
+		end,
+	}
+	return React.createElement("textbutton", _attributes, children)
+end
+local default = Backdrop
+return {
+	default = default,
+}

package/out/ui/packages/backdrop/components/Backdrop.styles.d.ts

@@ -0,0 +1,4 @@
+declare const useBackdropStyles: (props: {
+    invisible?: boolean;
+}) => import("../../../../theme/index").ClassNameMap<string>;
+export default useBackdropStyles;

package/out/ui/packages/backdrop/components/Backdrop.styles.luau

@@ -0,0 +1,24 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local _theme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme")
+local componentStyles = _theme.componentStyles
+local createStyles = _theme.createStyles
+local useBackdropStyles = componentStyles("Backdrop", function(theme, _param)
+	local invisible = _param.invisible
+	return createStyles({
+		root = {
+			Size = UDim2.fromScale(1, 1),
+			BackgroundColor3 = theme.palette.backdrop,
+			BackgroundTransparency = if invisible == true then 1 else 0.45,
+			BorderSizePixel = 0,
+			Text = "",
+			AutoButtonColor = false,
+			Selectable = false,
+			ZIndex = 30000,
+		},
+	})
+end)
+local default = useBackdropStyles
+return {
+	default = default,
+}

package/out/ui/packages/backdrop/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Backdrop } from "./components/Backdrop";
+export { BackdropProps } from "./components/Backdrop";

package/out/ui/packages/backdrop/init.luau

@@ -0,0 +1,5 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local exports = {}
+exports.Backdrop = TS.import(script, script, "components", "Backdrop").default
+return exports

package/out/ui/packages/badge/components/Badge.d.ts

@@ -1,9 +1,12 @@
 import React from "@rbxts/react";
 import { CustomizedProps } from "../../../../theme/index";
+import { BadgeColor } from "./Badge.styles";
 export interface BadgeProps {
     count?: number;
     max?: number;
     invisible?: boolean;
+    variant?: "standard" | "dot";
+    color?: BadgeColor;
     children?: React.ReactNode;
 }
 declare function Badge(props: CustomizedProps<Frame, BadgeProps>): JSX.Element;

package/out/ui/packages/badge/components/Badge.luau

@@ -17,13 +17,25 @@ local function Badge(props)
 	if invisible == nil then
 		invisible = false
 	end
+	local variant = _binding.variant
+	if variant == nil then
+		variant = "standard"
+	end
+	local color = _binding.color
+	if color == nil then
+		color = "error"
+	end
 	local children = _binding.children
 	local className = _binding.className
 	local sx = _binding.sx
 	local id = _binding.id
 	local ref = _binding.ref
-	local styles = useBadgeStyles()
-	local shown = not invisible and count > 0
+	local styles = useBadgeStyles({
+		variant = variant,
+		color = color,
+	})
+	local isDot = variant == "dot"
+	local shown = not invisible and (isDot or count > 0)
 	local _attributes = {}
 	local _condition = id
 	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
@@ -53,13 +65,16 @@ local function Badge(props)
 		for _k, _v in styles.badge do
 			_attributes_1[_k] = _v
 		end
-		_attributes_1.Text = badgeText(count, max)
-		local _attributes_2 = table.clone(styles.padding)
+		_attributes_1.Text = if isDot then "" else badgeText(count, max)
+		local _condition_2 = isDot ~= true
+		if _condition_2 then
+			local _attributes_2 = table.clone(styles.padding)
+			setmetatable(_attributes_2, nil)
+			_condition_2 = React.createElement("uipadding", _attributes_2)
+		end
+		local _attributes_2 = table.clone(styles.corner)
 		setmetatable(_attributes_2, nil)
-		local _exp_1 = React.createElement("uipadding", _attributes_2)
-		local _attributes_3 = table.clone(styles.corner)
-		setmetatable(_attributes_3, nil)
-		_condition_1 = (React.createElement("textlabel", _attributes_1, _exp_1, React.createElement("uicorner", _attributes_3)))
+		_condition_1 = (React.createElement("textlabel", _attributes_1, _condition_2, React.createElement("uicorner", _attributes_2)))
 	end
 	return React.createElement("frame", _attributes, _exp, _condition_1)
 end

package/out/ui/packages/badge/components/Badge.styles.d.ts

@@ -1,2 +1,6 @@
-declare const useBadgeStyles: () => import("../../../../theme/index").ClassNameMap<string>;
+export type BadgeColor = "error" | "primary" | "success";
+declare const useBadgeStyles: (props: {
+    variant?: "standard" | "dot";
+    color?: BadgeColor;
+}) => import("../../../../theme/index").ClassNameMap<string>;
 export default useBadgeStyles;

package/out/ui/packages/badge/components/Badge.styles.luau

@@ -3,7 +3,17 @@ local TS = _G[script]
 local _theme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme")
 local componentStyles = _theme.componentStyles
 local createStyles = _theme.createStyles
-local useBadgeStyles = componentStyles("Badge", function(theme)
+local useBadgeStyles = componentStyles("Badge", function(theme, _param)
+	local variant = _param.variant
+	if variant == nil then
+		variant = "standard"
+	end
+	local color = _param.color
+	if color == nil then
+		color = "error"
+	end
+	local diameter = if variant == "dot" then theme.spacing.calc(1) else theme.spacing.calc(2) + theme.padding.calc(1)
+	local tone = if color == "primary" then theme.palette.primary elseif color == "success" then theme.palette.status.success else theme.palette.status.error
 	return createStyles({
 		root = {
 			AutomaticSize = Enum.AutomaticSize.XY,
@@ -14,21 +24,23 @@ local useBadgeStyles = componentStyles("Badge", function(theme)
 		badge = {
 			AnchorPoint = Vector2.new(0.5, 0.5),
 			Position = UDim2.fromScale(1, 0),
-			AutomaticSize = Enum.AutomaticSize.XY,
-			Size = UDim2.fromOffset(theme.padding.calc(2), theme.padding.calc(2)),
-			BackgroundColor3 = theme.palette.status.error.main,
+			AutomaticSize = if variant == "dot" then Enum.AutomaticSize.None else Enum.AutomaticSize.X,
+			Size = UDim2.fromOffset(diameter, diameter),
+			BackgroundColor3 = tone.main,
 			BorderSizePixel = 0,
 			Font = theme.typography.fontFamilies.default,
 			TextSize = theme.typography.fontSizes.caption,
-			TextColor3 = theme.palette.text.inverse,
+			TextColor3 = if color == "error" then theme.palette.text.inverse else tone.on,
+			TextXAlignment = Enum.TextXAlignment.Center,
+			TextYAlignment = Enum.TextYAlignment.Center,
 			ZIndex = 2,
 		},
 		padding = {
-			PaddingLeft = UDim.new(0, theme.padding.calc(0.5)),
-			PaddingRight = UDim.new(0, theme.padding.calc(0.5)),
+			PaddingLeft = UDim.new(0, if variant == "dot" then 0 else theme.padding.calc(0.5)),
+			PaddingRight = UDim.new(0, if variant == "dot" then 0 else theme.padding.calc(0.5)),
 		},
 		corner = {
-			CornerRadius = UDim.new(1, 0),
+			CornerRadius = UDim.new(0.5, 0),
 		},
 	})
 end)

package/out/ui/packages/bottomNavigation/components/BottomNavigation.d.ts

@@ -5,6 +5,7 @@ export interface BottomNavigationProps<T> {
     options: ChoiceOption<T>[];
     onChange: (value: T) => void;
     disabled?: boolean;
+    showLabels?: boolean;
 }
 declare function BottomNavigation<T>(props: CustomizedProps<Frame, BottomNavigationProps<T>>): JSX.Element;
 export default BottomNavigation;

package/out/ui/packages/bottomNavigation/components/BottomNavigation.luau

@@ -10,11 +10,17 @@ local function BottomNavigation(props)
 	local options = _binding.options
 	local onChange = _binding.onChange
 	local disabled = _binding.disabled
+	local showLabels = _binding.showLabels
+	if showLabels == nil then
+		showLabels = true
+	end
 	local className = _binding.className
 	local sx = _binding.sx
 	local id = _binding.id
 	local ref = _binding.ref
-	local styles = useBottomNavigationStyles()
+	local styles = useBottomNavigationStyles({
+		showLabels = showLabels,
+	})
 	local count = math.max(#options, 1)
 	local _attributes = {}
 	local _condition = id
@@ -51,7 +57,7 @@ local function BottomNavigation(props)
 			_attributes_2[_k] = _v
 		end
 		_attributes_2.Size = UDim2.new(1 / count, 0, 1, 0)
-		_attributes_2.Text = choice.label
+		_attributes_2.Text = if showLabels == false then "" else choice.label
 		_attributes_2.LayoutOrder = index
 		_attributes_2.Active = active
 		_attributes_2.Selectable = active

package/out/ui/packages/bottomNavigation/components/BottomNavigation.styles.d.ts

@@ -1,2 +1,4 @@
-declare const useBottomNavigationStyles: () => import("../../../../theme/index").ClassNameMap<string>;
+declare const useBottomNavigationStyles: (props: {
+    showLabels?: boolean;
+}) => import("../../../../theme/index").ClassNameMap<string>;
 export default useBottomNavigationStyles;

package/out/ui/packages/bottomNavigation/components/BottomNavigation.styles.luau

@@ -3,10 +3,14 @@ local TS = _G[script]
 local _theme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme")
 local componentStyles = _theme.componentStyles
 local createStyles = _theme.createStyles
-local useBottomNavigationStyles = componentStyles("BottomNavigation", function(theme)
+local useBottomNavigationStyles = componentStyles("BottomNavigation", function(theme, _param)
+	local showLabels = _param.showLabels
+	if showLabels == nil then
+		showLabels = true
+	end
 	local _object = {
 		root = {
-			Size = UDim2.new(1, 0, 0, theme.spacing.calc(7)),
+			Size = UDim2.new(1, 0, 0, theme.spacing.calc(if showLabels == false then 5 else 7)),
 			BackgroundColor3 = theme.palette.surface.elevated,
 			BorderSizePixel = 0,
 			ZIndex = 11000,

package/out/ui/packages/breadcrumbs/components/Breadcrumbs.d.ts

@@ -6,6 +6,7 @@ export interface BreadcrumbItem {
 export interface BreadcrumbsProps {
     items: BreadcrumbItem[];
     separator?: string;
+    maxItems?: number;
 }
 declare function Breadcrumbs(props: CustomizedProps<Frame, BreadcrumbsProps>): JSX.Element;
 export default Breadcrumbs;

package/out/ui/packages/breadcrumbs/components/Breadcrumbs.luau

@@ -2,7 +2,9 @@
 local TS = _G[script]
 local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
 local cx = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme").cx
-local breadcrumbCurrent = TS.import(script, script.Parent, "breadcrumbItems").breadcrumbCurrent
+local _breadcrumbItems = TS.import(script, script.Parent, "breadcrumbItems")
+local breadcrumbCurrent = _breadcrumbItems.breadcrumbCurrent
+local breadcrumbVisible = _breadcrumbItems.breadcrumbVisible
 local useBreadcrumbStyles = TS.import(script, script.Parent, "Breadcrumbs.styles").default
 local function Breadcrumbs(props)
 	local _binding = props
@@ -11,11 +13,13 @@ local function Breadcrumbs(props)
 	if separator == nil then
 		separator = "/"
 	end
+	local maxItems = _binding.maxItems
 	local className = _binding.className
 	local sx = _binding.sx
 	local id = _binding.id
 	local ref = _binding.ref
 	local styles = useBreadcrumbStyles()
+	local visible = breadcrumbVisible(items, maxItems)
 	local _attributes = {}
 	local _condition = id
 	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
@@ -40,38 +44,68 @@ local function Breadcrumbs(props)
 	setmetatable(_attributes_1, nil)
 	local _exp = React.createElement("uilistlayout", _attributes_1)
 	-- ▼ ReadonlyArray.map ▼
-	local _newValue = table.create(#items)
-	local _callback = function(item, index)
-		local current = breadcrumbCurrent(index, #items)
-		local _condition_1 = index > 0
+	local _newValue = table.create(#visible)
+	local _callback = function(entry, order)
+		local current = not entry.ellipsis and breadcrumbCurrent(entry.index, #items)
+		local item = if entry.ellipsis then nil else items[entry.index + 1]
+		local _condition_1 = order > 0
 		if _condition_1 then
 			local _attributes_2 = table.clone(styles.separator)
 			setmetatable(_attributes_2, nil)
 			_attributes_2.Text = separator
-			_attributes_2.LayoutOrder = index * 2
+			_attributes_2.LayoutOrder = order * 2
 			_condition_1 = React.createElement("textlabel", _attributes_2)
 		end
-		local _attributes_2 = table.clone(cx(styles.item, current and styles.current))
-		setmetatable(_attributes_2, nil)
-		_attributes_2.Text = item.label
-		_attributes_2.LayoutOrder = index * 2 + 1
-		_attributes_2.Active = not current and item.onActivated ~= nil
-		_attributes_2.Selectable = not current and item.onActivated ~= nil
-		_attributes_2.Event = {
-			Activated = function()
-				local _result = item.onActivated
-				if _result ~= nil then
-					_result = _result()
+		local _result
+		if entry.ellipsis then
+			local _attributes_2 = table.clone(styles.separator)
+			setmetatable(_attributes_2, nil)
+			_attributes_2.Text = "…"
+			_attributes_2.LayoutOrder = order * 2 + 1
+			_result = (React.createElement("textlabel", _attributes_2))
+		else
+			local _attributes_2 = table.clone(cx(styles.item, current and styles.current))
+			setmetatable(_attributes_2, nil)
+			_attributes_2.Text = entry.label
+			_attributes_2.LayoutOrder = order * 2 + 1
+			local _condition_2 = not current
+			if _condition_2 then
+				local _result_1 = item
+				if _result_1 ~= nil then
+					_result_1 = _result_1.onActivated
 				end
-				return _result
-			end,
-		}
+				_condition_2 = _result_1 ~= nil
+			end
+			_attributes_2.Active = _condition_2
+			local _condition_3 = not current
+			if _condition_3 then
+				local _result_1 = item
+				if _result_1 ~= nil then
+					_result_1 = _result_1.onActivated
+				end
+				_condition_3 = _result_1 ~= nil
+			end
+			_attributes_2.Selectable = _condition_3
+			_attributes_2.Event = {
+				Activated = function()
+					local _result_1 = item
+					if _result_1 ~= nil then
+						_result_1 = _result_1.onActivated
+						if _result_1 ~= nil then
+							_result_1 = _result_1()
+						end
+					end
+					return _result_1
+				end,
+			}
+			_result = (React.createElement("textbutton", _attributes_2))
+		end
 		return React.createElement(React.Fragment, {
-			key = `{item.label}-{index}`,
-		}, _condition_1, React.createElement("textbutton", _attributes_2))
+			key = `{entry.label}-{order}`,
+		}, _condition_1, _result)
 	end
-	for _k, _v in items do
-		_newValue[_k] = _callback(_v, _k - 1, items)
+	for _k, _v in visible do
+		_newValue[_k] = _callback(_v, _k - 1, visible)
 	end
 	-- ▲ ReadonlyArray.map ▲
 	return React.createElement("frame", _attributes, _exp, _newValue)

package/out/ui/packages/breadcrumbs/components/breadcrumbItems.d.ts

@@ -1 +1,10 @@
 export declare function breadcrumbCurrent(index: number, count: number): boolean;
+export interface BreadcrumbSlice {
+    label: string;
+    index: number;
+    ellipsis?: boolean;
+}
+/** Collapse middle items when over maxItems (keep ends). */
+export declare function breadcrumbVisible<T extends {
+    label: string;
+}>(items: T[], maxItems?: number): BreadcrumbSlice[];