@knkcs/anker 2.2.1 → 2.3.0

package/CLAUDE-ANKER.md

@@ -78,6 +78,7 @@ Available templates:
 | Template | Use for |
 |---|---|
 | `<AppShell>` | Authenticated chrome (sidebar · main · rail). Provides `usePageActions(node)`, `usePageHeader(node)`, and `usePageRail(node)` hooks. Page templates register their `<PageHeader>` via `usePageHeader`, which renders it as a band spanning main + rail. |
+| `<ContextRail>` | Right-rail container with sticky positioning, collapse toggle on the leading edge, and five mode-aware atom subcomponents for compact rendering at 44px: `IconButton`, `ValueTile`, `StatusIcon`, `Avatar`, `Divider`. Sections (`<ContextRail.Section>`) keep their expanded-mode chrome; in collapsed mode, only atom-tagged children render. See `docs/page-patterns.md` §ContextRail patterns. |
 | `<PageHeader>` | Three-row page header band (breadcrumb · detail · tabs). Props: `breadcrumbs`, `title`, `subtitle`, `eyebrow`, `actions`, `avatar`, `badges`, `meta`, `tabs`. Each row is independently optional except title. See `docs/page-patterns.md` §Page header anatomy. |
 | `<IndexPageTemplate>` | List pages — header + optional tabs + toolbar + DataTable |
 | `<DetailPageTemplate>` | Single-entity pages — registers a three-row header band via `usePageHeader`. New props: `avatar`, `badges`, `meta`, `tabs`. `subheader` and `bodyTabs` were removed in v2.2.0 — migrate to the slot props on PageHeader. |

package/dist/components/index.d.ts

@@ -146,6 +146,52 @@ interface ChipPickerProps<T> {
 }
 declare const ChipPicker: <T>(props: ChipPickerProps<T>) => React$1.ReactElement;
 
+type IconButtonTone = "default" | "primary" | "outline-red" | "outline-primary" | "ghost";
+interface ContextRailIconButtonProps {
+    label: string;
+    icon: React__default.ReactNode;
+    onClick?: () => void;
+    tone?: IconButtonTone;
+}
+declare function ContextRailIconButton({ label, icon, onClick, tone, }: ContextRailIconButtonProps): react_jsx_runtime.JSX.Element;
+declare namespace ContextRailIconButton {
+    var displayName: string;
+}
+interface ContextRailValueTileProps {
+    value: number | string;
+    label: string;
+    muted?: boolean;
+    keepWhenEmpty?: boolean;
+}
+declare function ContextRailValueTile({ value, label, muted, keepWhenEmpty, }: ContextRailValueTileProps): react_jsx_runtime.JSX.Element | null;
+declare namespace ContextRailValueTile {
+    var displayName: string;
+}
+type StatusTone = "green" | "amber" | "red" | "gray";
+interface ContextRailStatusIconProps {
+    icon: React__default.ReactNode;
+    label: string;
+    tone: StatusTone;
+}
+declare function ContextRailStatusIcon({ icon, label, tone, }: ContextRailStatusIconProps): react_jsx_runtime.JSX.Element;
+declare namespace ContextRailStatusIcon {
+    var displayName: string;
+}
+interface ContextRailAvatarProps {
+    initials: string;
+    label: string;
+    src?: string;
+    onClick?: () => void;
+}
+declare function ContextRailAvatar({ initials, label, src, onClick, }: ContextRailAvatarProps): react_jsx_runtime.JSX.Element;
+declare namespace ContextRailAvatar {
+    var displayName: string;
+}
+declare function ContextRailDivider(): react_jsx_runtime.JSX.Element;
+declare namespace ContextRailDivider {
+    var displayName: string;
+}
+
 interface ContextRailProps {
     storageKey?: string;
     children: React__default.ReactNode;
@@ -167,11 +213,11 @@ declare const ContextRail: {
     displayName: string;
 } & {
     Header: {
-        ({ eyebrow, title }: ContextRailHeaderProps): react_jsx_runtime.JSX.Element;
+        ({ eyebrow, title }: ContextRailHeaderProps): react_jsx_runtime.JSX.Element | null;
         displayName: string;
     };
     Section: {
-        ({ id, icon, label, defaultOpen, action, children, }: ContextRailSectionProps): react_jsx_runtime.JSX.Element;
+        ({ id, icon, label, defaultOpen, action, children, }: ContextRailSectionProps): react_jsx_runtime.JSX.Element | null;
         displayName: string;
     };
     Footer: {
@@ -180,6 +226,11 @@ declare const ContextRail: {
         }): react_jsx_runtime.JSX.Element;
         displayName: string;
     };
+    Avatar: typeof ContextRailAvatar;
+    Divider: typeof ContextRailDivider;
+    IconButton: typeof ContextRailIconButton;
+    StatusIcon: typeof ContextRailStatusIcon;
+    ValueTile: typeof ContextRailValueTile;
 };
 
 interface ActionCellAction {

package/dist/components/index.js

@@ -1,16 +1,16 @@
 import { Collapsible, Skeleton, Separator, Checkbox as Checkbox$1 } from '../chunk-TXGJ7BNX.js';
 import { formatRelativeDateTime, StatusBadge } from '../chunk-ETY43HAI.js';
-import { MenuItem, MenuRoot, MenuTrigger, MenuContent, Tooltip, Badge, Avatar, Table } from '../chunk-2ZWZ2WAS.js';
+import { Tooltip, MenuItem, MenuRoot, MenuTrigger, MenuContent, Badge, Avatar, Table } from '../chunk-2ZWZ2WAS.js';
 import { Popover, PopoverTrigger, PopoverContent, PopoverBody, Switch } from '../chunk-WQIEF5N3.js';
 import { text_input_default } from '../chunk-OU6H3KU4.js';
 import { Button, IconButton } from '../chunk-JS7ZEZV3.js';
 export { AuthCard, PageHeader } from '../chunk-L7SKAZX3.js';
-import { Box, Flex, Heading, Text, HStack, Grid, GridItem, Code, VStack, Link, Spacer, Stack } from '../chunk-G4QMIXLC.js';
+import { Box, Flex, Text, Heading, HStack, Grid, GridItem, Code, VStack, Link, Spacer, Stack } from '../chunk-G4QMIXLC.js';
 import { PanelRightOpen, PanelRightClose, ChevronRight, PanelLeftOpen, PanelLeftClose, Search, X, Ellipsis, Plus, ChevronLeft, ArrowUp, ArrowDown, ArrowUpDown, ChevronDown, Check, Upload } from 'lucide-react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { createContext as createContext$1, Timeline, TreeView, chakra, Card as Card$1, Menu, Portal, Checkbox, Drawer, ButtonGroup, Dialog, useSlotRecipe } from '@chakra-ui/react';
 export { createTreeCollection } from '@chakra-ui/react';
-import React3, { createContext, useState, useEffect, useCallback, useMemo, useContext, useRef, Children } from 'react';
+import React5, { createContext, useState, useEffect, useCallback, useMemo, useContext, useRef, Children } from 'react';
 import dayjs from 'dayjs';
 import { Link as Link$1 } from 'react-router-dom';
 import { useReactTable, getSortedRowModel, getCoreRowModel, flexRender } from '@tanstack/react-table';
@@ -135,7 +135,7 @@ var CardList = ({
   emptyState
 }) => {
   const colSpan = Math.floor(columnCount / headers.length);
-  const isEmpty = Children.count(children) === 0;
+  const isEmpty2 = Children.count(children) === 0;
   return /* @__PURE__ */ jsxs(Box, { role: "grid", "aria-colcount": headers.length, children: [
     /* @__PURE__ */ jsxs(Flex, { pb: 2, px: hasComponentLeft ? 0 : 6, children: [
       hasComponentLeft && /* @__PURE__ */ jsx(Box, { minWidth: 75, px: 6 }),
@@ -153,7 +153,7 @@ var CardList = ({
       ),
       hasMenu && /* @__PURE__ */ jsx(Box, { minWidth: "80px", px: 6 })
     ] }),
-    /* @__PURE__ */ jsx(Flex, { direction: "column", gap: "3", children: isEmpty && emptyState ? emptyState : children })
+    /* @__PURE__ */ jsx(Flex, { direction: "column", gap: "3", children: isEmpty2 && emptyState ? emptyState : children })
   ] });
 };
 CardList.displayName = "CardList";
@@ -390,6 +390,236 @@ function ChipPickerInner(props) {
 }
 var ChipPicker = ChipPickerInner;
 ChipPicker.displayName = "ChipPicker";
+var RailModeContext = createContext({
+  collapsed: false
+});
+function useContextRailMode() {
+  return useContext(RailModeContext);
+}
+var RAIL_ATOM = /* @__PURE__ */ Symbol.for("anker.contextRail.atom");
+function isRailAtom(child) {
+  if (!React5.isValidElement(child)) return false;
+  const type = child.type;
+  if (typeof type !== "function") return false;
+  return type.railAtom === RAIL_ATOM;
+}
+function buttonVariantFromTone(tone) {
+  switch (tone) {
+    case "primary":
+      return { variant: "solid", colorPalette: "primary" };
+    case "outline-red":
+      return { variant: "outline", colorPalette: "red" };
+    case "outline-primary":
+      return { variant: "outline", colorPalette: "primary" };
+    case "ghost":
+      return { variant: "ghost" };
+    default:
+      return { variant: "outline" };
+  }
+}
+function ContextRailIconButton({
+  label,
+  icon,
+  onClick,
+  tone = "default"
+}) {
+  const { collapsed } = useContextRailMode();
+  const { variant, colorPalette } = buttonVariantFromTone(tone);
+  if (collapsed) {
+    return /* @__PURE__ */ jsx(Tooltip, { content: label, positioning: { placement: "left" }, children: /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        variant,
+        colorPalette,
+        size: "sm",
+        "aria-label": label,
+        onClick,
+        children: icon
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsxs(
+    Button,
+    {
+      variant,
+      colorPalette,
+      size: "sm",
+      w: "full",
+      onClick,
+      children: [
+        icon,
+        label
+      ]
+    }
+  );
+}
+ContextRailIconButton.displayName = "ContextRail.IconButton";
+ContextRailIconButton.railAtom = RAIL_ATOM;
+function isEmpty(value) {
+  if (value === 0) return true;
+  if (value === "0" || value === "") return true;
+  return false;
+}
+function ContextRailValueTile({
+  value,
+  label,
+  muted,
+  keepWhenEmpty
+}) {
+  const { collapsed } = useContextRailMode();
+  const hideWhenEmpty = collapsed && isEmpty(value) && !keepWhenEmpty;
+  if (hideWhenEmpty) return null;
+  if (collapsed) {
+    return /* @__PURE__ */ jsx(Tooltip, { content: label, positioning: { placement: "left" }, children: /* @__PURE__ */ jsx(
+      Box,
+      {
+        w: "8",
+        h: "8",
+        borderRadius: "md",
+        bg: "bg-subtle",
+        borderWidth: "1px",
+        borderColor: "border",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        fontSize: "xs",
+        fontWeight: "bold",
+        color: muted ? "muted" : "default",
+        "aria-label": `${label}: ${value}`,
+        children: value
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsxs(Box, { bg: "bg-subtle", borderRadius: "md", p: "2", minW: "0", flex: "1", children: [
+    /* @__PURE__ */ jsx(Text, { fontSize: "xs", color: "muted", mb: "1", children: label }),
+    /* @__PURE__ */ jsx(
+      Text,
+      {
+        fontSize: "lg",
+        fontWeight: "semibold",
+        color: muted ? "muted" : "default",
+        children: value
+      }
+    )
+  ] });
+}
+ContextRailValueTile.displayName = "ContextRail.ValueTile";
+ContextRailValueTile.railAtom = RAIL_ATOM;
+var STATUS_TINTS = {
+  green: { bg: "green.50", color: "green.700" },
+  amber: { bg: "yellow.50", color: "yellow.700" },
+  red: { bg: "red.50", color: "red.700" },
+  gray: { bg: "gray.100", color: "gray.700" }
+};
+function ContextRailStatusIcon({
+  icon,
+  label,
+  tone
+}) {
+  const { collapsed } = useContextRailMode();
+  const tint = STATUS_TINTS[tone];
+  if (collapsed) {
+    return /* @__PURE__ */ jsx(Tooltip, { content: label, positioning: { placement: "left" }, children: /* @__PURE__ */ jsx(
+      Flex,
+      {
+        w: "8",
+        h: "8",
+        borderRadius: "full",
+        bg: tint.bg,
+        color: tint.color,
+        align: "center",
+        justify: "center",
+        "aria-label": label,
+        children: icon
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "2", py: "1", children: [
+    /* @__PURE__ */ jsx(
+      Flex,
+      {
+        w: "6",
+        h: "6",
+        borderRadius: "full",
+        bg: tint.bg,
+        color: tint.color,
+        align: "center",
+        justify: "center",
+        flexShrink: 0,
+        children: icon
+      }
+    ),
+    /* @__PURE__ */ jsx(Text, { fontSize: "xs", color: "muted", children: label })
+  ] });
+}
+ContextRailStatusIcon.displayName = "ContextRail.StatusIcon";
+ContextRailStatusIcon.railAtom = RAIL_ATOM;
+function ContextRailAvatar({
+  initials,
+  label,
+  src,
+  onClick
+}) {
+  const { collapsed } = useContextRailMode();
+  const avatarBox = /* @__PURE__ */ jsx(
+    Flex,
+    {
+      w: collapsed ? "8" : "10",
+      h: collapsed ? "8" : "10",
+      borderRadius: "full",
+      bg: "bg-emphasis",
+      color: "white",
+      align: "center",
+      justify: "center",
+      fontWeight: "bold",
+      fontSize: collapsed ? "xs" : "sm",
+      flexShrink: 0,
+      cursor: onClick ? "pointer" : "default",
+      onClick,
+      backgroundImage: src ? `url(${src})` : void 0,
+      backgroundSize: "cover",
+      backgroundPosition: "center",
+      "aria-label": label,
+      children: !src && initials
+    }
+  );
+  if (collapsed) {
+    return /* @__PURE__ */ jsx(Tooltip, { content: label, positioning: { placement: "left" }, children: avatarBox });
+  }
+  return /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "3", py: "1", children: [
+    avatarBox,
+    /* @__PURE__ */ jsx(Text, { fontSize: "xs", color: "muted", truncate: true, children: label })
+  ] });
+}
+ContextRailAvatar.displayName = "ContextRail.Avatar";
+ContextRailAvatar.railAtom = RAIL_ATOM;
+function ContextRailDivider() {
+  const { collapsed } = useContextRailMode();
+  if (collapsed) {
+    return /* @__PURE__ */ jsx(
+      Box,
+      {
+        "data-testid": "context-rail-divider",
+        w: "5",
+        h: "1px",
+        bg: "border",
+        my: "1"
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      "data-testid": "context-rail-divider",
+      w: "full",
+      h: "1px",
+      bg: "border",
+      my: "3"
+    }
+  );
+}
+ContextRailDivider.displayName = "ContextRail.Divider";
+ContextRailDivider.railAtom = RAIL_ATOM;
 var COLLAPSED_WIDTH = "44px";
 var EXPANDED_WIDTH = "360px";
 var COLLAPSE_BREAKPOINT = 1440;
@@ -428,7 +658,7 @@ var ContextRailRoot = ({ storageKey, children }) => {
       window.localStorage.setItem(storageKey, String(collapsed));
     }
   }, [collapsed, storageKey]);
-  return /* @__PURE__ */ jsx(RailRootContext.Provider, { value: true, children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(RailRootContext.Provider, { value: true, children: /* @__PURE__ */ jsx(RailModeContext.Provider, { value: { collapsed }, children: /* @__PURE__ */ jsxs(
     Box,
     {
       "data-testid": "context-rail",
@@ -461,14 +691,29 @@ var ContextRailRoot = ({ storageKey, children }) => {
             children: collapsed ? /* @__PURE__ */ jsx(PanelRightOpen, { size: 14 }) : /* @__PURE__ */ jsx(PanelRightClose, { size: 14 })
           }
         ),
-        collapsed ? null : /* @__PURE__ */ jsx(Box, { h: "full", overflowY: "auto", px: "4", pt: "4", pb: "4", children })
+        collapsed ? /* @__PURE__ */ jsx(
+          Flex,
+          {
+            "data-testid": "context-rail-collapsed-body",
+            direction: "column",
+            align: "center",
+            gap: "2",
+            pt: "14",
+            pb: "3",
+            h: "full",
+            overflowY: "auto",
+            children
+          }
+        ) : /* @__PURE__ */ jsx(Box, { h: "full", overflowY: "auto", px: "4", pt: "4", pb: "4", children })
       ]
     }
-  ) });
+  ) }) });
 };
 ContextRailRoot.displayName = "ContextRail";
 var ContextRailHeader = ({ eyebrow, title }) => {
   useWarnIfOutsideRailRoot("ContextRail.Header");
+  const { collapsed } = useContextRailMode();
+  if (collapsed) return null;
   return /* @__PURE__ */ jsxs(Box, { mb: "4", pb: "3", borderBottomWidth: "1px", borderBottomColor: "border", children: [
     eyebrow && /* @__PURE__ */ jsx(
       Text,
@@ -505,7 +750,13 @@ var ContextRailSection = ({
   children
 }) => {
   useWarnIfOutsideRailRoot("ContextRail.Section");
+  const { collapsed } = useContextRailMode();
   const [open, setOpen] = useState(defaultOpen);
+  if (collapsed) {
+    const atomChildren = React5.Children.toArray(children).filter(isRailAtom);
+    if (atomChildren.length === 0) return null;
+    return /* @__PURE__ */ jsx(Fragment, { children: atomChildren });
+  }
   return /* @__PURE__ */ jsxs(
     Box,
     {
@@ -568,12 +819,30 @@ var ContextRailSection = ({
   );
 };
 ContextRailSection.displayName = "ContextRail.Section";
-var ContextRailFooter = ({ children }) => /* @__PURE__ */ jsx(Box, { mt: "4", pt: "4", borderTopWidth: "1px", borderTopColor: "border-muted", children });
+var ContextRailFooter = ({ children }) => {
+  const { collapsed } = useContextRailMode();
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      mt: collapsed ? "auto" : "4",
+      pt: collapsed ? "3" : "4",
+      borderTopWidth: "1px",
+      borderTopColor: "border-muted",
+      w: "full",
+      children
+    }
+  );
+};
 ContextRailFooter.displayName = "ContextRail.Footer";
 var ContextRail = Object.assign(ContextRailRoot, {
   Header: ContextRailHeader,
   Section: ContextRailSection,
-  Footer: ContextRailFooter
+  Footer: ContextRailFooter,
+  Avatar: ContextRailAvatar,
+  Divider: ContextRailDivider,
+  IconButton: ContextRailIconButton,
+  StatusIcon: ContextRailStatusIcon,
+  ValueTile: ContextRailValueTile
 });
 var ActionCell = ({ actions }) => {
   return /* @__PURE__ */ jsx(HStack, { gap: 1, children: actions.map((action) => /* @__PURE__ */ jsx(Tooltip, { content: action.label, children: action.href ? /* @__PURE__ */ jsx(
@@ -1086,7 +1355,7 @@ function DataTableInner(props) {
     ...getRowId !== void 0 ? { getRowId } : {}
   });
   const hasPagination = total !== void 0 && page !== void 0 && pageSize !== void 0 && onPageChange !== void 0;
-  const isEmpty = !loading && data.length === 0;
+  const isEmpty2 = !loading && data.length === 0;
   return /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 4, children: [
     /* @__PURE__ */ jsx(Box, { overflowX: "auto", children: /* @__PURE__ */ jsxs(Table.Root, { variant, children: [
       /* @__PURE__ */ jsx(Table.Header, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(Table.Row, { children: headerGroup.headers.map((header) => {
@@ -1152,7 +1421,7 @@ function DataTableInner(props) {
           },
           row.id
         )),
-        isEmpty && /* @__PURE__ */ jsx(Table.Row, { children: /* @__PURE__ */ jsx(
+        isEmpty2 && /* @__PURE__ */ jsx(Table.Row, { children: /* @__PURE__ */ jsx(
           Table.Cell,
           {
             colSpan: allColumns.length,
@@ -1314,7 +1583,7 @@ var FactBox = (props) => {
     expandLabel = "Expand",
     ...rest
   } = props;
-  const [show, setShow] = React3.useState(true);
+  const [show, setShow] = React5.useState(true);
   const handleToggle = () => {
     setShow(!show);
   };
@@ -1780,9 +2049,9 @@ SelectableCard.Footer = SelectableCardFooter;
 var COLLAPSED_WIDTH2 = "64px";
 var EXPANDED_WIDTH2 = "240px";
 var COLLAPSE_BREAKPOINT2 = 1440;
-var SidebarContext = React3.createContext(null);
+var SidebarContext = React5.createContext(null);
 function useSidebarContext() {
-  const ctx = React3.useContext(SidebarContext);
+  const ctx = React5.useContext(SidebarContext);
   if (!ctx) {
     throw new Error("useSidebarContext must be used inside <Sidebar>");
   }
@@ -1960,8 +2229,8 @@ var SidebarItem = ({
   const tooltipLabel = label || (typeof children === "string" ? children : "");
   const wrapTooltip = (node) => collapsed && tooltipLabel ? /* @__PURE__ */ jsx(Tooltip, { content: tooltipLabel, positioning: { placement: "right" }, children: node }) : node;
   if (asChild) {
-    const child = React3.Children.only(children);
-    const cloned = React3.cloneElement(
+    const child = React5.Children.only(children);
+    const cloned = React5.cloneElement(
       child,
       {
         "data-active": active ? "true" : "false",
@@ -2049,8 +2318,8 @@ var SidebarUserMenuItem = ({
   children
 }) => {
   if (asChild) {
-    const child = React3.Children.only(children);
-    return /* @__PURE__ */ jsx(MenuItem, { value: "link", onClick, children: React3.cloneElement(child, {}) });
+    const child = React5.Children.only(children);
+    return /* @__PURE__ */ jsx(MenuItem, { value: "link", onClick, children: React5.cloneElement(child, {}) });
   }
   return /* @__PURE__ */ jsx(
     MenuItem,
@@ -2100,7 +2369,7 @@ var SidebarSection2 = ({
   } else {
     content = children;
   }
-  const isEmpty = content === null || content === void 0 || content === "" || content === false;
+  const isEmpty2 = content === null || content === void 0 || content === "" || content === false;
   return /* @__PURE__ */ jsxs(Box, { py: 3, children: [
     /* @__PURE__ */ jsxs(Flex, { justify: "space-between", align: "center", children: [
       /* @__PURE__ */ jsx(
@@ -2125,7 +2394,7 @@ var SidebarSection2 = ({
         }
       )
     ] }),
-    /* @__PURE__ */ jsx(Box, { py: 2, children: isEmpty && emptyText ? /* @__PURE__ */ jsx(Text, { fontSize: "sm", color: "fg.subtle", children: emptyText }) : content })
+    /* @__PURE__ */ jsx(Box, { py: 2, children: isEmpty2 && emptyText ? /* @__PURE__ */ jsx(Text, { fontSize: "sm", color: "fg.subtle", children: emptyText }) : content })
   ] });
 };
 SidebarSection2.displayName = "SidebarSection";
@@ -2135,16 +2404,16 @@ var [StepperProvider, useStepperContext] = createContext$1({
 });
 function useStepper(props) {
   const { step, onChange } = props;
-  const [activeIndex, setIndex] = React3.useState(-1);
-  const stepsRef = React3.useRef([]);
-  const registerStep = React3.useCallback((name) => {
+  const [activeIndex, setIndex] = React5.useState(-1);
+  const stepsRef = React5.useRef([]);
+  const registerStep = React5.useCallback((name) => {
     const newSteps = [...stepsRef.current];
     if (newSteps.indexOf(name) === -1) {
       newSteps.push(name);
     }
     stepsRef.current = newSteps;
   }, []);
-  const unregisterStep = React3.useCallback((name) => {
+  const unregisterStep = React5.useCallback((name) => {
     stepsRef.current = stepsRef.current.filter((step2) => step2 !== name);
   }, []);
   const setStep = useCallback((name) => {
@@ -2159,7 +2428,7 @@ function useStepper(props) {
   const prevStep = () => {
     setIndex(activeIndex - 1);
   };
-  React3.useEffect(() => {
+  React5.useEffect(() => {
     if (typeof step === "string") {
       setStep(step);
     } else if (typeof step === "number") {
@@ -2168,7 +2437,7 @@ function useStepper(props) {
       setIndex(0);
     }
   }, [step, activeIndex, setStep]);
-  React3.useEffect(() => {
+  React5.useEffect(() => {
     onChange?.(activeIndex);
   }, [activeIndex, onChange]);
   const context = {
@@ -2190,7 +2459,7 @@ function useStepper(props) {
 function useStep(props) {
   const { name, isActive, isCompleted } = props;
   const { registerStep, unregisterStep, activeStep } = useStepperContext();
-  React3.useEffect(() => {
+  React5.useEffect(() => {
     if (!name) {
       return;
     }
@@ -2224,12 +2493,12 @@ function useStepperNextButton({
   };
 }
 function getChildOfType(children, type) {
-  return React3.Children.toArray(children).find(
+  return React5.Children.toArray(children).find(
     (item) => item.type === type
   );
 }
 function getChildrenOfType(children, type) {
-  return React3.Children.toArray(children).filter(
+  return React5.Children.toArray(children).filter(
     (item) => Array.isArray(type) ? type.some((component) => component === item.type) : item.type === type
   );
 }