@geomak/ui 6.4.0 → 6.5.0

package/dist/index.d.cts

@@ -974,6 +974,48 @@ interface BreadcrumbsProps {
  */
 declare function Breadcrumbs({ items, separator, maxItems, 'aria-label': ariaLabel, className, style, }: BreadcrumbsProps): react_jsx_runtime.JSX.Element;
 
+type BadgeTone = 'neutral' | 'accent' | 'success' | 'warning' | 'error' | 'info';
+type BadgeVariant = 'solid' | 'soft' | 'outline';
+type BadgeSize = 'sm' | 'md';
+interface BadgeProps {
+    /** Pill label (label mode) when no `count` / `dot` is given. */
+    children?: React__default.ReactNode;
+    /** Semantic colour. Default `'neutral'`. */
+    tone?: BadgeTone;
+    /** Fill style. Default `'soft'`. */
+    variant?: BadgeVariant;
+    /** Size preset. Default `'md'`. */
+    size?: BadgeSize;
+    /** Optional leading icon (label mode). */
+    icon?: React__default.ReactNode;
+    /**
+     * Indicator mode — a numeric counter. With `children` it overlays the
+     * top-right corner of the wrapped element; without, it renders inline.
+     */
+    count?: number;
+    /** Cap the displayed count (e.g. `99+`). Default `99`. */
+    max?: number;
+    /** Render a bare dot indicator (no number). Overrides `count` display. */
+    dot?: boolean;
+    /** Show the indicator even when `count` is 0. Default `false`. */
+    showZero?: boolean;
+    className?: string;
+    style?: React__default.CSSProperties;
+}
+/**
+ * A small status / count indicator. Three uses:
+ *
+ * 1. **Label pill** — `<Badge tone="success">Active</Badge>`.
+ * 2. **Inline count** — `<Badge count={5} tone="error" />`.
+ * 3. **Overlay** — wrap an element to anchor a count/dot to its top-right:
+ *    `<Badge count={3} tone="error"><IconButton … /></Badge>`.
+ *
+ * @example
+ * <Badge tone="accent" variant="soft">Beta</Badge>
+ * <Badge dot tone="success"><Avatar … /></Badge>
+ */
+declare function Badge({ children, tone, variant, size, icon, count, max, dot, showZero, className, style, }: BadgeProps): react_jsx_runtime.JSX.Element;
+
 /** ─────────────────── types ─────────────────── */
 type NotificationType = 'info' | 'success' | 'warning' | 'danger';
 type NotificationPosition = 'top-right' | 'top-left' | 'top-center' | 'bottom-right' | 'bottom-left' | 'bottom-center';
@@ -4042,4 +4084,4 @@ declare function expiryError(value: string, now?: Date): string | undefined;
 /** Validate the CVV against the detected brand's expected length. */
 declare function cvvError(value: string, cardNumber: string): string | undefined;
 
-export { Accordion, type AccordionItemProps, type AccordionProps, AppShell, type AppShellProps, AutoComplete, type AutoCompleteProps, Avatar, type AvatarProps, type AvatarShape, type AvatarSize, type AvatarStatus, Box, type BoxBackground, type BoxBorder, type BoxProps, type BoxRadius, type BoxShadow, type BreadcrumbItem, Breadcrumbs, type BreadcrumbsProps, Button, type ButtonProps, CARD_BRANDS, type CardBrand, Catalog, CatalogCarousel, type CatalogCarouselProps, CatalogGrid, type CatalogGridProps, type CatalogProps, Checkbox, type CheckboxProps, ColorPicker, type ColorPickerProps, ContextMenu, type ContextMenuActionItem, type ContextMenuPosition, type ContextMenuProps, CreditCardForm, type CreditCardFormProps, type CreditCardValue, type DatePickerProps, type DateRange, DateRangePicker, type DateRangePickerProps, type DateRangePreset, Drawer, type DrawerProps, Dropdown, type DropdownItem, type DropdownProps, type ErrorMap, type ExpandRowOptions, FadingBase, type FadingBaseProps, Field, type FieldArrayItem, type FieldBindings, FieldHelpIcon, type FieldKind, FieldLabel, type FieldLabelProps, type FieldProps, type FieldRule, type FieldRules, type FieldShellOptions, type FieldSize, type FieldSnapshot, FileInput, type FileInputProps, Flex, type FlexAlign, type FlexDirection, type FlexJustify, type FlexProps, type FlexWrap, Form, FormContext, FormField, type FormFieldProps, type FormProps, FormStore, type FormStoreOptions, type FormValues, Grid, GridCard, type GridCardItem, type GridCardProps, type GridProps, Icon, IconButton, type IconButtonProps, List, type ListItem, type ListProps, LoadingSpinner, type LoadingSpinnerProps, MegaMenu, type MegaMenuFeaturedProps, type MegaMenuItemProps, type MegaMenuLinkProps, type MegaMenuPanelProps, type MegaMenuProps, type MegaMenuSectionProps, Modal, type ModalProps, type NotificationPayload, NotificationProvider, NumberInput, type NumberInputProps, OpaqueGridCard, type OpaqueGridCardProps, OtpInput, type OtpInputProps, type PaginationOptions, Password, type PasswordProps, Portal, type PortalProps, RadioGroup, type RadioGroupProps, type RadioOption, Rating, type RatingProps, type RulesMap, ScalableContainer, type ScalableContainerProps, SearchInput, type SearchInputProps, SegmentedControl, type SegmentedControlProps, type SegmentedOption, Sidebar, type SidebarItem, type SidebarProps, type SidebarSection, SkeletonBox, type SkeletonBoxProps, SkeletonCard, type SkeletonCardProps, SkeletonCircle, type SkeletonCircleProps, SkeletonText, type SkeletonTextProps, Slider, type SliderMark, type SliderProps, type SliderValue, type Spacing, Switch, type SwitchInputProps, Table, type TableColumn, type TableProps, Tabs, type TabsAddProps, type TabsListProps, type TabsOrientation, type TabsPanelProps, type TabsProps, type TabsSize, type TabsTriggerProps, type TabsVariant, TagsInput, type TagsInputProps, DatePicker as Temporal, type TemporalPickerProps, TextArea, type TextAreaProps, TextInput, type TextInputProps, type ThemeColors, type ThemeConfig, type ThemeDensity, type ThemeMotion, ThemeProvider, type ThemeProviderProps, type ThemeRadius, type ThemeShadows, ThemeSwitch, type ThemeSwitchProps, type ThemeTypography, TimePicker, type TimePickerProps, Tooltip, type TooltipProps, TooltipProvider, TopBar, type TopBarProps, Tree, type TreeItemClickPayload, type TreeNode, type TreeProps, TreeSelect, type TreeSelectProps, Typography, type TypographyAlign, type TypographyColor, type TypographyProps, type TypographyVariant, type TypographyWeight, type UseFieldArrayReturn, type UseFormFieldOptions, type UseFormReturn, type ValidateTrigger, Wizard, type WizardProps, type WizardStep, cardNumberError, cvvError, detectBrand, expiryError, fieldShell, formatCardNumber, formatExpiry, isRequired, luhnValid, onlyDigits, patterns, runFieldRules, useFieldArray, useForm, useFormField, useFormStore, useNotification };
+export { Accordion, type AccordionItemProps, type AccordionProps, AppShell, type AppShellProps, AutoComplete, type AutoCompleteProps, Avatar, type AvatarProps, type AvatarShape, type AvatarSize, type AvatarStatus, Badge, type BadgeProps, type BadgeSize, type BadgeTone, type BadgeVariant, Box, type BoxBackground, type BoxBorder, type BoxProps, type BoxRadius, type BoxShadow, type BreadcrumbItem, Breadcrumbs, type BreadcrumbsProps, Button, type ButtonProps, CARD_BRANDS, type CardBrand, Catalog, CatalogCarousel, type CatalogCarouselProps, CatalogGrid, type CatalogGridProps, type CatalogProps, Checkbox, type CheckboxProps, ColorPicker, type ColorPickerProps, ContextMenu, type ContextMenuActionItem, type ContextMenuPosition, type ContextMenuProps, CreditCardForm, type CreditCardFormProps, type CreditCardValue, type DatePickerProps, type DateRange, DateRangePicker, type DateRangePickerProps, type DateRangePreset, Drawer, type DrawerProps, Dropdown, type DropdownItem, type DropdownProps, type ErrorMap, type ExpandRowOptions, FadingBase, type FadingBaseProps, Field, type FieldArrayItem, type FieldBindings, FieldHelpIcon, type FieldKind, FieldLabel, type FieldLabelProps, type FieldProps, type FieldRule, type FieldRules, type FieldShellOptions, type FieldSize, type FieldSnapshot, FileInput, type FileInputProps, Flex, type FlexAlign, type FlexDirection, type FlexJustify, type FlexProps, type FlexWrap, Form, FormContext, FormField, type FormFieldProps, type FormProps, FormStore, type FormStoreOptions, type FormValues, Grid, GridCard, type GridCardItem, type GridCardProps, type GridProps, Icon, IconButton, type IconButtonProps, List, type ListItem, type ListProps, LoadingSpinner, type LoadingSpinnerProps, MegaMenu, type MegaMenuFeaturedProps, type MegaMenuItemProps, type MegaMenuLinkProps, type MegaMenuPanelProps, type MegaMenuProps, type MegaMenuSectionProps, Modal, type ModalProps, type NotificationPayload, NotificationProvider, NumberInput, type NumberInputProps, OpaqueGridCard, type OpaqueGridCardProps, OtpInput, type OtpInputProps, type PaginationOptions, Password, type PasswordProps, Portal, type PortalProps, RadioGroup, type RadioGroupProps, type RadioOption, Rating, type RatingProps, type RulesMap, ScalableContainer, type ScalableContainerProps, SearchInput, type SearchInputProps, SegmentedControl, type SegmentedControlProps, type SegmentedOption, Sidebar, type SidebarItem, type SidebarProps, type SidebarSection, SkeletonBox, type SkeletonBoxProps, SkeletonCard, type SkeletonCardProps, SkeletonCircle, type SkeletonCircleProps, SkeletonText, type SkeletonTextProps, Slider, type SliderMark, type SliderProps, type SliderValue, type Spacing, Switch, type SwitchInputProps, Table, type TableColumn, type TableProps, Tabs, type TabsAddProps, type TabsListProps, type TabsOrientation, type TabsPanelProps, type TabsProps, type TabsSize, type TabsTriggerProps, type TabsVariant, TagsInput, type TagsInputProps, DatePicker as Temporal, type TemporalPickerProps, TextArea, type TextAreaProps, TextInput, type TextInputProps, type ThemeColors, type ThemeConfig, type ThemeDensity, type ThemeMotion, ThemeProvider, type ThemeProviderProps, type ThemeRadius, type ThemeShadows, ThemeSwitch, type ThemeSwitchProps, type ThemeTypography, TimePicker, type TimePickerProps, Tooltip, type TooltipProps, TooltipProvider, TopBar, type TopBarProps, Tree, type TreeItemClickPayload, type TreeNode, type TreeProps, TreeSelect, type TreeSelectProps, Typography, type TypographyAlign, type TypographyColor, type TypographyProps, type TypographyVariant, type TypographyWeight, type UseFieldArrayReturn, type UseFormFieldOptions, type UseFormReturn, type ValidateTrigger, Wizard, type WizardProps, type WizardStep, cardNumberError, cvvError, detectBrand, expiryError, fieldShell, formatCardNumber, formatExpiry, isRequired, luhnValid, onlyDigits, patterns, runFieldRules, useFieldArray, useForm, useFormField, useFormStore, useNotification };

package/dist/index.d.ts

@@ -974,6 +974,48 @@ interface BreadcrumbsProps {
  */
 declare function Breadcrumbs({ items, separator, maxItems, 'aria-label': ariaLabel, className, style, }: BreadcrumbsProps): react_jsx_runtime.JSX.Element;
 
+type BadgeTone = 'neutral' | 'accent' | 'success' | 'warning' | 'error' | 'info';
+type BadgeVariant = 'solid' | 'soft' | 'outline';
+type BadgeSize = 'sm' | 'md';
+interface BadgeProps {
+    /** Pill label (label mode) when no `count` / `dot` is given. */
+    children?: React__default.ReactNode;
+    /** Semantic colour. Default `'neutral'`. */
+    tone?: BadgeTone;
+    /** Fill style. Default `'soft'`. */
+    variant?: BadgeVariant;
+    /** Size preset. Default `'md'`. */
+    size?: BadgeSize;
+    /** Optional leading icon (label mode). */
+    icon?: React__default.ReactNode;
+    /**
+     * Indicator mode — a numeric counter. With `children` it overlays the
+     * top-right corner of the wrapped element; without, it renders inline.
+     */
+    count?: number;
+    /** Cap the displayed count (e.g. `99+`). Default `99`. */
+    max?: number;
+    /** Render a bare dot indicator (no number). Overrides `count` display. */
+    dot?: boolean;
+    /** Show the indicator even when `count` is 0. Default `false`. */
+    showZero?: boolean;
+    className?: string;
+    style?: React__default.CSSProperties;
+}
+/**
+ * A small status / count indicator. Three uses:
+ *
+ * 1. **Label pill** — `<Badge tone="success">Active</Badge>`.
+ * 2. **Inline count** — `<Badge count={5} tone="error" />`.
+ * 3. **Overlay** — wrap an element to anchor a count/dot to its top-right:
+ *    `<Badge count={3} tone="error"><IconButton … /></Badge>`.
+ *
+ * @example
+ * <Badge tone="accent" variant="soft">Beta</Badge>
+ * <Badge dot tone="success"><Avatar … /></Badge>
+ */
+declare function Badge({ children, tone, variant, size, icon, count, max, dot, showZero, className, style, }: BadgeProps): react_jsx_runtime.JSX.Element;
+
 /** ─────────────────── types ─────────────────── */
 type NotificationType = 'info' | 'success' | 'warning' | 'danger';
 type NotificationPosition = 'top-right' | 'top-left' | 'top-center' | 'bottom-right' | 'bottom-left' | 'bottom-center';
@@ -4042,4 +4084,4 @@ declare function expiryError(value: string, now?: Date): string | undefined;
 /** Validate the CVV against the detected brand's expected length. */
 declare function cvvError(value: string, cardNumber: string): string | undefined;
 
-export { Accordion, type AccordionItemProps, type AccordionProps, AppShell, type AppShellProps, AutoComplete, type AutoCompleteProps, Avatar, type AvatarProps, type AvatarShape, type AvatarSize, type AvatarStatus, Box, type BoxBackground, type BoxBorder, type BoxProps, type BoxRadius, type BoxShadow, type BreadcrumbItem, Breadcrumbs, type BreadcrumbsProps, Button, type ButtonProps, CARD_BRANDS, type CardBrand, Catalog, CatalogCarousel, type CatalogCarouselProps, CatalogGrid, type CatalogGridProps, type CatalogProps, Checkbox, type CheckboxProps, ColorPicker, type ColorPickerProps, ContextMenu, type ContextMenuActionItem, type ContextMenuPosition, type ContextMenuProps, CreditCardForm, type CreditCardFormProps, type CreditCardValue, type DatePickerProps, type DateRange, DateRangePicker, type DateRangePickerProps, type DateRangePreset, Drawer, type DrawerProps, Dropdown, type DropdownItem, type DropdownProps, type ErrorMap, type ExpandRowOptions, FadingBase, type FadingBaseProps, Field, type FieldArrayItem, type FieldBindings, FieldHelpIcon, type FieldKind, FieldLabel, type FieldLabelProps, type FieldProps, type FieldRule, type FieldRules, type FieldShellOptions, type FieldSize, type FieldSnapshot, FileInput, type FileInputProps, Flex, type FlexAlign, type FlexDirection, type FlexJustify, type FlexProps, type FlexWrap, Form, FormContext, FormField, type FormFieldProps, type FormProps, FormStore, type FormStoreOptions, type FormValues, Grid, GridCard, type GridCardItem, type GridCardProps, type GridProps, Icon, IconButton, type IconButtonProps, List, type ListItem, type ListProps, LoadingSpinner, type LoadingSpinnerProps, MegaMenu, type MegaMenuFeaturedProps, type MegaMenuItemProps, type MegaMenuLinkProps, type MegaMenuPanelProps, type MegaMenuProps, type MegaMenuSectionProps, Modal, type ModalProps, type NotificationPayload, NotificationProvider, NumberInput, type NumberInputProps, OpaqueGridCard, type OpaqueGridCardProps, OtpInput, type OtpInputProps, type PaginationOptions, Password, type PasswordProps, Portal, type PortalProps, RadioGroup, type RadioGroupProps, type RadioOption, Rating, type RatingProps, type RulesMap, ScalableContainer, type ScalableContainerProps, SearchInput, type SearchInputProps, SegmentedControl, type SegmentedControlProps, type SegmentedOption, Sidebar, type SidebarItem, type SidebarProps, type SidebarSection, SkeletonBox, type SkeletonBoxProps, SkeletonCard, type SkeletonCardProps, SkeletonCircle, type SkeletonCircleProps, SkeletonText, type SkeletonTextProps, Slider, type SliderMark, type SliderProps, type SliderValue, type Spacing, Switch, type SwitchInputProps, Table, type TableColumn, type TableProps, Tabs, type TabsAddProps, type TabsListProps, type TabsOrientation, type TabsPanelProps, type TabsProps, type TabsSize, type TabsTriggerProps, type TabsVariant, TagsInput, type TagsInputProps, DatePicker as Temporal, type TemporalPickerProps, TextArea, type TextAreaProps, TextInput, type TextInputProps, type ThemeColors, type ThemeConfig, type ThemeDensity, type ThemeMotion, ThemeProvider, type ThemeProviderProps, type ThemeRadius, type ThemeShadows, ThemeSwitch, type ThemeSwitchProps, type ThemeTypography, TimePicker, type TimePickerProps, Tooltip, type TooltipProps, TooltipProvider, TopBar, type TopBarProps, Tree, type TreeItemClickPayload, type TreeNode, type TreeProps, TreeSelect, type TreeSelectProps, Typography, type TypographyAlign, type TypographyColor, type TypographyProps, type TypographyVariant, type TypographyWeight, type UseFieldArrayReturn, type UseFormFieldOptions, type UseFormReturn, type ValidateTrigger, Wizard, type WizardProps, type WizardStep, cardNumberError, cvvError, detectBrand, expiryError, fieldShell, formatCardNumber, formatExpiry, isRequired, luhnValid, onlyDigits, patterns, runFieldRules, useFieldArray, useForm, useFormField, useFormStore, useNotification };
+export { Accordion, type AccordionItemProps, type AccordionProps, AppShell, type AppShellProps, AutoComplete, type AutoCompleteProps, Avatar, type AvatarProps, type AvatarShape, type AvatarSize, type AvatarStatus, Badge, type BadgeProps, type BadgeSize, type BadgeTone, type BadgeVariant, Box, type BoxBackground, type BoxBorder, type BoxProps, type BoxRadius, type BoxShadow, type BreadcrumbItem, Breadcrumbs, type BreadcrumbsProps, Button, type ButtonProps, CARD_BRANDS, type CardBrand, Catalog, CatalogCarousel, type CatalogCarouselProps, CatalogGrid, type CatalogGridProps, type CatalogProps, Checkbox, type CheckboxProps, ColorPicker, type ColorPickerProps, ContextMenu, type ContextMenuActionItem, type ContextMenuPosition, type ContextMenuProps, CreditCardForm, type CreditCardFormProps, type CreditCardValue, type DatePickerProps, type DateRange, DateRangePicker, type DateRangePickerProps, type DateRangePreset, Drawer, type DrawerProps, Dropdown, type DropdownItem, type DropdownProps, type ErrorMap, type ExpandRowOptions, FadingBase, type FadingBaseProps, Field, type FieldArrayItem, type FieldBindings, FieldHelpIcon, type FieldKind, FieldLabel, type FieldLabelProps, type FieldProps, type FieldRule, type FieldRules, type FieldShellOptions, type FieldSize, type FieldSnapshot, FileInput, type FileInputProps, Flex, type FlexAlign, type FlexDirection, type FlexJustify, type FlexProps, type FlexWrap, Form, FormContext, FormField, type FormFieldProps, type FormProps, FormStore, type FormStoreOptions, type FormValues, Grid, GridCard, type GridCardItem, type GridCardProps, type GridProps, Icon, IconButton, type IconButtonProps, List, type ListItem, type ListProps, LoadingSpinner, type LoadingSpinnerProps, MegaMenu, type MegaMenuFeaturedProps, type MegaMenuItemProps, type MegaMenuLinkProps, type MegaMenuPanelProps, type MegaMenuProps, type MegaMenuSectionProps, Modal, type ModalProps, type NotificationPayload, NotificationProvider, NumberInput, type NumberInputProps, OpaqueGridCard, type OpaqueGridCardProps, OtpInput, type OtpInputProps, type PaginationOptions, Password, type PasswordProps, Portal, type PortalProps, RadioGroup, type RadioGroupProps, type RadioOption, Rating, type RatingProps, type RulesMap, ScalableContainer, type ScalableContainerProps, SearchInput, type SearchInputProps, SegmentedControl, type SegmentedControlProps, type SegmentedOption, Sidebar, type SidebarItem, type SidebarProps, type SidebarSection, SkeletonBox, type SkeletonBoxProps, SkeletonCard, type SkeletonCardProps, SkeletonCircle, type SkeletonCircleProps, SkeletonText, type SkeletonTextProps, Slider, type SliderMark, type SliderProps, type SliderValue, type Spacing, Switch, type SwitchInputProps, Table, type TableColumn, type TableProps, Tabs, type TabsAddProps, type TabsListProps, type TabsOrientation, type TabsPanelProps, type TabsProps, type TabsSize, type TabsTriggerProps, type TabsVariant, TagsInput, type TagsInputProps, DatePicker as Temporal, type TemporalPickerProps, TextArea, type TextAreaProps, TextInput, type TextInputProps, type ThemeColors, type ThemeConfig, type ThemeDensity, type ThemeMotion, ThemeProvider, type ThemeProviderProps, type ThemeRadius, type ThemeShadows, ThemeSwitch, type ThemeSwitchProps, type ThemeTypography, TimePicker, type TimePickerProps, Tooltip, type TooltipProps, TooltipProvider, TopBar, type TopBarProps, Tree, type TreeItemClickPayload, type TreeNode, type TreeProps, TreeSelect, type TreeSelectProps, Typography, type TypographyAlign, type TypographyColor, type TypographyProps, type TypographyVariant, type TypographyWeight, type UseFieldArrayReturn, type UseFormFieldOptions, type UseFormReturn, type ValidateTrigger, Wizard, type WizardProps, type WizardStep, cardNumberError, cvvError, detectBrand, expiryError, fieldShell, formatCardNumber, formatExpiry, isRequired, luhnValid, onlyDigits, patterns, runFieldRules, useFieldArray, useForm, useFormField, useFormStore, useNotification };

package/dist/index.js

@@ -1514,6 +1514,108 @@ function Breadcrumbs({
     ] }, entry === "ellipsis" ? "ellipsis" : entry.index);
   }) }) });
 }
+var TONE = {
+  neutral: {
+    solid: "bg-foreground-secondary text-background",
+    soft: "bg-surface-raised text-foreground-secondary",
+    outline: "border border-border text-foreground-secondary",
+    dot: "bg-foreground-secondary"
+  },
+  accent: {
+    solid: "bg-accent text-accent-fg",
+    soft: "bg-accent/10 text-accent",
+    outline: "border border-accent text-accent",
+    dot: "bg-accent"
+  },
+  success: {
+    solid: "bg-status-success text-white",
+    soft: "bg-status-success/12 text-status-success",
+    outline: "border border-status-success text-status-success",
+    dot: "bg-status-success"
+  },
+  warning: {
+    solid: "bg-status-warning text-white",
+    soft: "bg-status-warning/15 text-status-warning",
+    outline: "border border-status-warning text-status-warning",
+    dot: "bg-status-warning"
+  },
+  error: {
+    solid: "bg-status-error text-white",
+    soft: "bg-status-error/12 text-status-error",
+    outline: "border border-status-error text-status-error",
+    dot: "bg-status-error"
+  },
+  info: {
+    solid: "bg-status-info text-white",
+    soft: "bg-status-info/12 text-status-info",
+    outline: "border border-status-info text-status-info",
+    dot: "bg-status-info"
+  }
+};
+var SIZE2 = {
+  sm: "h-[18px] px-1.5 text-[11px] gap-1 rounded-full",
+  md: "h-5 px-2 text-xs gap-1 rounded-full"
+};
+function Badge({
+  children,
+  tone = "neutral",
+  variant = "soft",
+  size = "md",
+  icon,
+  count,
+  max = 99,
+  dot = false,
+  showZero = false,
+  className = "",
+  style
+}) {
+  const isIndicator = dot || count != null;
+  const hidden = !dot && count != null && count === 0 && !showZero;
+  const display2 = count != null && count > max ? `${max}+` : count;
+  if (!isIndicator) {
+    return /* @__PURE__ */ jsxs(
+      "span",
+      {
+        className: [
+          "inline-flex items-center font-medium select-none whitespace-nowrap leading-none",
+          SIZE2[size],
+          TONE[tone][variant],
+          className
+        ].filter(Boolean).join(" "),
+        style,
+        children: [
+          icon && /* @__PURE__ */ jsx("span", { className: "flex h-3.5 w-3.5 items-center justify-center", children: icon }),
+          children
+        ]
+      }
+    );
+  }
+  const indicator = dot ? /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: ["inline-block rounded-full", size === "sm" ? "h-2 w-2" : "h-2.5 w-2.5", TONE[tone].dot, className].filter(Boolean).join(" "),
+      style: children ? void 0 : style,
+      "aria-hidden": children ? true : void 0
+    }
+  ) : /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: [
+        "inline-flex items-center justify-center rounded-full font-semibold leading-none tabular-nums",
+        size === "sm" ? "h-4 min-w-4 px-1 text-[10px]" : "h-[18px] min-w-[18px] px-1.5 text-[11px]",
+        TONE[tone].solid,
+        className
+      ].filter(Boolean).join(" "),
+      style: children ? void 0 : style,
+      children: display2
+    }
+  );
+  if (!children) return hidden ? null : indicator;
+  return /* @__PURE__ */ jsxs("span", { className: "relative inline-flex", style, children: [
+    children,
+    !hidden && /* @__PURE__ */ jsx("span", { className: "absolute -top-1 -right-1 flex", children: indicator })
+  ] });
+}
 var NotificationContext = createContext({
   open: () => void 0,
   close: () => void 0
@@ -5590,7 +5692,7 @@ function TextArea({
     }
   );
 }
-var SIZE2 = {
+var SIZE3 = {
   sm: { h: "h-control-sm", text: "text-xs", pad: "px-2.5" },
   md: { h: "h-control-md", text: "text-sm", pad: "px-3.5" },
   lg: { h: "h-control-lg", text: "text-sm", pad: "px-4" }
@@ -5612,7 +5714,7 @@ function SegmentedControl({
   errorMessage,
   "aria-label": ariaLabel
 }) {
-  const sz = SIZE2[size];
+  const sz = SIZE3[size];
   const groupId = useId();
   const errorId = useId();
   const hasError = errorMessage != null;
@@ -7213,6 +7315,6 @@ function CreditCardForm({
   );
 }
 
-export { Accordion_default as Accordion, AppShell, AutoComplete, Avatar, Box, Breadcrumbs, Button, CARD_BRANDS, Catalog, CatalogCarousel, CatalogGrid, Checkbox, ColorPicker, ContextMenu, CreditCardForm, DateRangePicker, Drawer, Dropdown, FadingBase, Field, FieldHelpIcon, FieldLabel, FileInput, Flex, Form, FormContext, FormField, FormStore, Grid2 as Grid, GridCard, icons_default as Icon, IconButton, List2 as List, LoadingSpinner, MegaMenu_default as MegaMenu, Modal, NotificationProvider, NumberInput, OpaqueGridCard, OtpInput, Password, Portal, RadioGroup, Rating, ScalableContainer, SearchInput_default as SearchInput, SegmentedControl, Sidebar, SkeletonBox, SkeletonCard, SkeletonCircle, SkeletonText, Slider, Switch, Table, Tabs_default as Tabs, TagsInput, DatePicker as Temporal, TextArea, TextInput, ThemeProvider, ThemeSwitch, TimePicker, Tooltip, TooltipProvider, TopBar, Tree, TreeSelect, Typography, Wizard, cardNumberError, cvvError, detectBrand, expiryError, fieldShell, formatCardNumber, formatExpiry, isRequired, luhnValid, onlyDigits, patterns, runFieldRules, useFieldArray, useForm, useFormField, useFormStore, useNotification };
+export { Accordion_default as Accordion, AppShell, AutoComplete, Avatar, Badge, Box, Breadcrumbs, Button, CARD_BRANDS, Catalog, CatalogCarousel, CatalogGrid, Checkbox, ColorPicker, ContextMenu, CreditCardForm, DateRangePicker, Drawer, Dropdown, FadingBase, Field, FieldHelpIcon, FieldLabel, FileInput, Flex, Form, FormContext, FormField, FormStore, Grid2 as Grid, GridCard, icons_default as Icon, IconButton, List2 as List, LoadingSpinner, MegaMenu_default as MegaMenu, Modal, NotificationProvider, NumberInput, OpaqueGridCard, OtpInput, Password, Portal, RadioGroup, Rating, ScalableContainer, SearchInput_default as SearchInput, SegmentedControl, Sidebar, SkeletonBox, SkeletonCard, SkeletonCircle, SkeletonText, Slider, Switch, Table, Tabs_default as Tabs, TagsInput, DatePicker as Temporal, TextArea, TextInput, ThemeProvider, ThemeSwitch, TimePicker, Tooltip, TooltipProvider, TopBar, Tree, TreeSelect, Typography, Wizard, cardNumberError, cvvError, detectBrand, expiryError, fieldShell, formatCardNumber, formatExpiry, isRequired, luhnValid, onlyDigits, patterns, runFieldRules, useFieldArray, useForm, useFormField, useFormStore, useNotification };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map