@endfield-ui/react 1.2.0 → 1.3.0

package/src/components/field/Field.tsx

@@ -1,5 +1,4 @@
 import {
-  createContext,
   useContext,
   useId,
   useMemo,
@@ -11,6 +10,7 @@ import { usePresence } from "../../hooks/usePresence";
 import { StatusDanger } from "../../icons/StatusDanger";
 import { cn } from "../../lib/cn";
 import { collapse, collapseEnter, collapseInner } from "../../lib/motion";
+import { createLazyContext } from "../../lib/create-lazy-context";
 
 type FieldContextValue = {
   /** 单个控件的 id；`group` 字段里有多个控件，不提供 */
@@ -23,11 +23,12 @@ type FieldContextValue = {
   group: boolean;
 };
 
-const FieldContext = createContext<FieldContextValue | null>(null);
+const getFieldContext =
+  /* @__PURE__ */ createLazyContext<FieldContextValue | null>(null);
 
 /** 给成组的控件（单选组）读取所在字段的状态。不在 `Field` 里时返回 `null`。 */
 export function useFieldContext(): FieldContextValue | null {
-  return useContext(FieldContext);
+  return useContext(getFieldContext());
 }
 
 type ControlProps = {
@@ -50,7 +51,7 @@ export function useFieldControl({
   invalid,
   "aria-describedby": describedBy,
 }: ControlProps) {
-  const field = useContext(FieldContext);
+  const field = useContext(getFieldContext());
   const mergedDescribedBy =
     [describedBy, field?.describedBy].filter(Boolean).join(" ") || undefined;
 
@@ -97,6 +98,7 @@ export function Field({
   children,
   ...props
 }: FieldProps) {
+  const FieldContext = getFieldContext();
   const baseId = useId();
   const id = controlId ?? `${baseId}-control`;
   const labelId = `${baseId}-label`;
@@ -212,7 +214,9 @@ export function Field({
         </legend>
         {/* 组里的控件默认竖排；要横排就自己包一层，作为这里唯一的子元素 */}
         <div className="flex flex-col items-start">
-          <FieldContext value={context}>{children}</FieldContext>
+          <FieldContext.Provider value={context}>
+            {children}
+          </FieldContext.Provider>
         </div>
         {messages}
       </fieldset>
@@ -228,7 +232,7 @@ export function Field({
       <label id={labelId} htmlFor={id} className={cn(labelClass, "mb-1.5")}>
         {labelContent}
       </label>
-      <FieldContext value={context}>{children}</FieldContext>
+      <FieldContext.Provider value={context}>{children}</FieldContext.Provider>
       {messages}
     </div>
   );

package/src/components/flyout-bar/FlyoutBar.tsx

@@ -101,7 +101,7 @@ type ItemOwnProps = {
 export type FlyoutBarItemProps = ItemOwnProps &
   Omit<ComponentProps<"div">, keyof ItemOwnProps | "id" | "style">;
 
-const itemClass = cn(
+const itemClass = /* @__PURE__ */ cn(
   "flex min-w-10 cursor-default items-center justify-center gap-2 px-2.5 text-sm select-none",
   "transition-colors duration-(--duration-fast) ease-standard",
   "data-disabled:text-ink-disabled data-highlighted:text-ink",

package/src/components/icon-button/IconButton.tsx

@@ -35,7 +35,7 @@ const enabledClass: Record<IconButtonVariant, string> = {
   plain: restClass,
   // 有意不随主题翻转：它要压在图像和深色版块上
   floating:
-    "rounded-full bg-neutral-50 text-neutral-900 shadow-sm hover:bg-neutral-200 active:bg-neutral-300",
+    "bg-neutral-50 text-neutral-900 shadow-sm hover:bg-neutral-200 active:bg-neutral-300",
   accent:
     "bg-surface-sunken text-ink-secondary hover:bg-action hover:text-on-action active:bg-action-pressed",
   inverse:
@@ -45,8 +45,7 @@ const enabledClass: Record<IconButtonVariant, string> = {
 
 const pressedClass: Record<IconButtonVariant, string> = {
   plain: "bg-surface-muted text-ink active:bg-line",
-  floating:
-    "rounded-full bg-neutral-200 text-neutral-900 shadow-sm active:bg-neutral-300",
+  floating: "bg-neutral-200 text-neutral-900 shadow-sm active:bg-neutral-300",
   accent: "bg-action text-on-action active:bg-action-pressed",
   inverse: "bg-surface-inverse text-accent-ink-inverse",
 };
@@ -64,8 +63,7 @@ const disabledForced = "forced-colors:border-[GrayText]";
 
 const disabledClass: Record<IconButtonVariant, string> = {
   plain: "cursor-not-allowed bg-surface-sunken text-ink-disabled",
-  floating:
-    "cursor-not-allowed rounded-full bg-neutral-50 text-neutral-400 shadow-sm",
+  floating: "cursor-not-allowed bg-neutral-50 text-neutral-400 shadow-sm",
   accent: "cursor-not-allowed bg-surface-sunken text-ink-disabled",
   inverse: "cursor-not-allowed bg-surface-sunken text-ink-disabled",
 };
@@ -90,6 +88,8 @@ export function IconButton({
       data-size={size}
       className={cn(
         "relative inline-flex shrink-0 items-center justify-center",
+        // 方形的三种和按钮一样是 4px 微圆角；浮动的那种是圆
+        variant === "floating" ? "rounded-full" : "rounded-sm",
         "transition-colors duration-(--duration-fast) ease-standard",
         focusRing,
         sizeClass[size],

package/src/components/image-viewer/ImageViewer.tsx

@@ -1,7 +1,6 @@
 import { Dialog as BaseDialog } from "@base-ui/react/dialog";
 import {
   Children,
-  createContext,
   isValidElement,
   useContext,
   useRef,
@@ -22,6 +21,7 @@ import { useSnapTrack } from "../carousel/snap-track";
 import { overlayClose, overlayHeader } from "../dialog/overlay-style";
 import { IconButton } from "../icon-button/IconButton";
 import { Viewfinder } from "../viewfinder/Viewfinder";
+import { createLazyContext } from "../../lib/create-lazy-context";
 
 export type ImageViewerRatio = "16/9" | "4/3" | "1/1" | "3/4";
 
@@ -38,7 +38,7 @@ type ItemLike = {
   children?: ReactNode;
 };
 
-const ItemContext = createContext<{
+const getItemContext = /* @__PURE__ */ createLazyContext<{
   position: number;
   count: number;
   ratio: ImageViewerRatio;
@@ -93,6 +93,7 @@ export function ImageViewer({
   children,
   ...props
 }: ImageViewerProps) {
+  const ItemContext = getItemContext();
   // 标题、说明和大图都从子元素上读，所以子元素必须直接是 ImageViewerItem
   const items = Children.toArray(children).filter((child) =>
     isValidElement<ItemLike>(child),
@@ -133,7 +134,7 @@ export function ImageViewer({
         )}
       >
         {items.map((item, position) => (
-          <ItemContext
+          <ItemContext.Provider
             key={position}
             value={{
               position,
@@ -145,7 +146,7 @@ export function ImageViewer({
             }}
           >
             {item}
-          </ItemContext>
+          </ItemContext.Provider>
         ))}
       </ul>
       <BaseDialog.Root open={open} onOpenChange={(next) => setOpen(next)}>
@@ -427,7 +428,7 @@ export function ImageViewerItem({
   children,
   ...props
 }: ImageViewerItemProps) {
-  const item = useContext(ItemContext);
+  const item = useContext(getItemContext());
   if (!item) {
     throw new Error("ImageViewerItem 要直接放在 ImageViewer 里面");
   }

package/src/components/list/List.tsx

@@ -1,5 +1,4 @@
 import {
-  createContext,
   useContext,
   type ComponentProps,
   type MouseEvent,
@@ -10,6 +9,7 @@ import { focusRingInset } from "../../lib/focus-ring";
 import { GhostText } from "../ghost-text/GhostText";
 import { LinkElement, type LinkRender } from "../link-element/LinkElement";
 import { bandCanvas, bandGap, bandRow } from "./band-style";
+import { createLazyContext } from "../../lib/create-lazy-context";
 
 export type ListVariant = "plain" | "band";
 
@@ -21,12 +21,14 @@ export type ListProps = ComponentProps<"ul"> & {
   variant?: ListVariant;
 };
 
-const ListVariantContext = createContext<ListVariant>("plain");
+const getListVariantContext =
+  /* @__PURE__ */ createLazyContext<ListVariant>("plain");
 
 /** 列表行的容器，外圈不描边。里面只放 `ListRow`。 */
 export function List({ variant = "plain", className, ...props }: ListProps) {
+  const ListVariantContext = getListVariantContext();
   return (
-    <ListVariantContext value={variant}>
+    <ListVariantContext.Provider value={variant}>
       <ul
         {...props}
         data-variant={variant}
@@ -38,7 +40,7 @@ export function List({ variant = "plain", className, ...props }: ListProps) {
           className,
         )}
       />
-    </ListVariantContext>
+    </ListVariantContext.Provider>
   );
 }
 
@@ -103,7 +105,7 @@ export function ListRow({
   children,
   ...props
 }: ListRowProps) {
-  const band = useContext(ListVariantContext) === "band";
+  const band = useContext(getListVariantContext()) === "band";
   const isLink = href !== undefined || render !== undefined;
   const isButton = !isLink && onClick !== undefined;
   const interactive = (isLink || isButton) && !disabled;

package/src/components/nav-action/NavAction.tsx

@@ -1,5 +1,4 @@
 import {
-  createContext,
   useContext,
   type ComponentProps,
   type MouseEvent,
@@ -9,11 +8,13 @@ import { TriangleRight } from "../../icons/TriangleRight";
 import { cn } from "../../lib/cn";
 import { focusRing } from "../../lib/focus-ring";
 import { LinkElement, type LinkRender } from "../link-element/LinkElement";
+import { createLazyContext } from "../../lib/create-lazy-context";
 
 export type NavActionLayout = "inline" | "block" | "stacked";
 
 /** 侧轨和全屏菜单用它告诉里面的主行动块该怎么摆。不对外导出 */
-export const NavActionContext = createContext<NavActionLayout | null>(null);
+export const getNavActionContext =
+  /* @__PURE__ */ createLazyContext<NavActionLayout | null>(null);
 
 type OwnProps = {
   /** 换掉默认的实心三角 */
@@ -65,12 +66,13 @@ export function NavAction({
   children,
   ...props
 }: NavActionProps) {
-  const inherited = useContext(NavActionContext);
+  const inherited = useContext(getNavActionContext());
   const layout = layoutProp ?? inherited ?? "inline";
   const stacked = layout === "stacked";
 
   const classes = cn(
-    "shrink-0 font-medium whitespace-nowrap select-none",
+    // 4px 微圆角：官网"前往游戏"块就是这样，也和按钮一致
+    "shrink-0 rounded-sm font-medium whitespace-nowrap select-none",
     "transition-colors duration-(--duration-fast) ease-standard",
     focusRing,
     layoutClass[layout],

package/src/components/nav-menu/NavMenu.tsx

@@ -1,6 +1,5 @@
 import { Dialog as BaseDialog } from "@base-ui/react/dialog";
 import {
-  createContext,
   useContext,
   useRef,
   type ComponentProps,
@@ -18,10 +17,13 @@ import { firstFocusableIn } from "../dialog/initial-focus";
 import { GhostText } from "../ghost-text/GhostText";
 import { IconButton } from "../icon-button/IconButton";
 import { LinkElement, type LinkRender } from "../link-element/LinkElement";
-import { NavActionContext } from "../nav-action/NavAction";
+import { getNavActionContext } from "../nav-action/NavAction";
+import { createLazyContext } from "../../lib/create-lazy-context";
 
 /** 导航项点了之后要把菜单关上 */
-const NavMenuContext = createContext<() => void>(() => {});
+const getNavMenuContext = /* @__PURE__ */ createLazyContext<() => void>(
+  () => {},
+);
 
 export type NavMenuProps = {
   /** 菜单钮，通常是顶栏最右边的 `<IconButton>`。不传就用 `open` / `onOpenChange` 自己控制 */
@@ -68,6 +70,8 @@ export function NavMenu({
   className,
   children,
 }: NavMenuProps) {
+  const NavMenuContext = getNavMenuContext();
+  const NavActionContext = getNavActionContext();
   const [isOpen, setOpen] = useControllableState({
     value: open,
     defaultValue: defaultOpen,
@@ -114,11 +118,11 @@ export function NavMenu({
             ref={bodyRef}
             className="flex min-h-0 flex-1 flex-col overflow-y-auto overscroll-contain"
           >
-            <NavMenuContext value={() => setOpen(false)}>
+            <NavMenuContext.Provider value={() => setOpen(false)}>
               <nav aria-label={navLabel}>
                 <ul className="flex flex-col gap-1 p-4">{children}</ul>
               </nav>
-            </NavMenuContext>
+            </NavMenuContext.Provider>
 
             {tools && (
               <div className="mx-4 flex flex-wrap gap-1 bg-surface-muted p-1">
@@ -146,7 +150,9 @@ export function NavMenu({
 
             {footer && (
               <div className="flex shrink-0 flex-col gap-2 p-4">
-                <NavActionContext value="block">{footer}</NavActionContext>
+                <NavActionContext.Provider value="block">
+                  {footer}
+                </NavActionContext.Provider>
               </div>
             )}
           </div>
@@ -204,7 +210,7 @@ export function NavMenuItem({
   children,
   ...props
 }: NavMenuItemProps) {
-  const close = useContext(NavMenuContext);
+  const close = useContext(getNavMenuContext());
   const isLink = href !== undefined || render !== undefined;
 
   const handleClick = (event: MouseEvent<HTMLElement>) => {

package/src/components/page-header/PageHeader.tsx

@@ -171,7 +171,7 @@ export function PageHeaderBack({
   ...props
 }: PageHeaderBackProps) {
   const classes = cn(
-    "relative inline-flex size-10 shrink-0 items-center justify-center",
+    "relative inline-flex size-10 shrink-0 items-center justify-center rounded-sm",
     "transition-colors duration-(--duration-fast) ease-standard",
     focusRing,
     disabled

package/src/components/play-button/PlayButton.tsx

@@ -79,7 +79,7 @@ export function PlayButton({
         className,
       )}
     >
-      {/* 悬停：记号让一步，和按钮的竖条变箭头是同一种做法 */}
+      {/* 悬停：记号让一步，和 text 按钮的斜箭头悬停时挪一下是同一种做法 */}
       <TriangleRight
         className={cn(
           "transition-[translate] duration-(--duration-base) ease-standard",

package/src/components/radio/Radio.tsx

@@ -1,5 +1,4 @@
 import {
-  createContext,
   useContext,
   useId,
   useMemo,
@@ -18,6 +17,7 @@ import {
   choiceMark,
 } from "../checkbox/choice-style";
 import { useFieldContext } from "../field/Field";
+import { createLazyContext } from "../../lib/create-lazy-context";
 
 type RadioGroupContextValue = {
   name: string;
@@ -28,7 +28,8 @@ type RadioGroupContextValue = {
   invalid: boolean;
 };
 
-const RadioGroupContext = createContext<RadioGroupContextValue | null>(null);
+const getRadioGroupContext =
+  /* @__PURE__ */ createLazyContext<RadioGroupContextValue | null>(null);
 
 export type RadioGroupOrientation = "vertical" | "horizontal";
 
@@ -64,6 +65,7 @@ export function RadioGroup({
   className,
   ...props
 }: RadioGroupProps) {
+  const RadioGroupContext = getRadioGroupContext();
   const field = useFieldContext();
   const autoName = useId();
   const [current, setCurrent] = useControllableState<string | undefined>({
@@ -92,7 +94,7 @@ export function RadioGroup({
   );
 
   return (
-    <RadioGroupContext value={context}>
+    <RadioGroupContext.Provider value={context}>
       <div
         role="radiogroup"
         // 字段是 <fieldset> 时名称由 <legend> 给；否则指向字段的标签
@@ -109,7 +111,7 @@ export function RadioGroup({
           className,
         )}
       />
-    </RadioGroupContext>
+    </RadioGroupContext.Provider>
   );
 }
 
@@ -134,7 +136,7 @@ export function Radio({
   children,
   ...props
 }: RadioProps) {
-  const group = useContext(RadioGroupContext);
+  const group = useContext(getRadioGroupContext());
 
   const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
     onChange?.(event);

package/src/components/schedule/Schedule.tsx

@@ -1,5 +1,4 @@
 import {
-  createContext,
   useContext,
   useMemo,
   type ComponentProps,
@@ -14,6 +13,7 @@ import { decor } from "../../lib/decor";
 import { focusRingInset } from "../../lib/focus-ring";
 import { LinkElement, type LinkRender } from "../link-element/LinkElement";
 import { Tag } from "../tag/Tag";
+import { createLazyContext } from "../../lib/create-lazy-context";
 
 type ScheduleContextValue = {
   start: string;
@@ -23,10 +23,11 @@ type ScheduleContextValue = {
   describe: (start: string, end: string) => string;
 };
 
-const ScheduleContext = createContext<ScheduleContextValue | null>(null);
+const getScheduleContext =
+  /* @__PURE__ */ createLazyContext<ScheduleContextValue | null>(null);
 
 function useSchedule(part: string) {
-  const context = useContext(ScheduleContext);
+  const context = useContext(getScheduleContext());
   if (!context) throw new Error(`${part} 要放在 Schedule 里面`);
   return context;
 }
@@ -86,6 +87,7 @@ export function Schedule({
   children,
   ...props
 }: ScheduleProps) {
+  const ScheduleContext = getScheduleContext();
   const [scrollerRef, overflowing] = useOverflowing();
   const dates = useMemo(() => eachDay(start, end), [start, end]);
   const days = dates.length;
@@ -125,7 +127,7 @@ export function Schedule({
       : null;
 
   return (
-    <ScheduleContext value={context}>
+    <ScheduleContext.Provider value={context}>
       <div
         ref={scrollerRef}
         {...props}
@@ -257,7 +259,7 @@ export function Schedule({
           )}
         </div>
       </div>
-    </ScheduleContext>
+    </ScheduleContext.Provider>
   );
 }
 

package/src/components/segmented-control/SegmentedControl.tsx

@@ -1,5 +1,4 @@
 import {
-  createContext,
   useContext,
   useId,
   useMemo,
@@ -18,6 +17,7 @@ import {
   type ControlSize,
   type ControlVariant,
 } from "../input/control-box";
+import { createLazyContext } from "../../lib/create-lazy-context";
 
 export type SegmentedControlSize = ControlSize;
 export type SegmentedControlVariant = ControlVariant;
@@ -32,7 +32,8 @@ type SegmentedContextValue = {
   invalid: boolean;
 };
 
-const SegmentedContext = createContext<SegmentedContextValue | null>(null);
+const getSegmentedContext =
+  /* @__PURE__ */ createLazyContext<SegmentedContextValue | null>(null);
 
 export type SegmentedControlProps = Omit<
   ComponentProps<"div">,
@@ -85,6 +86,7 @@ export function SegmentedControl({
   ref,
   ...props
 }: SegmentedControlProps) {
+  const SegmentedContext = getSegmentedContext();
   const field = useFieldContext();
   // 选中的那块底画在轨道上：换一段时是同一块滑过去
   const trackRef = useIndicator<HTMLDivElement>("[data-selected]");
@@ -116,7 +118,7 @@ export function SegmentedControl({
   );
 
   return (
-    <SegmentedContext value={context}>
+    <SegmentedContext.Provider value={context}>
       <div
         role="radiogroup"
         // 字段是 <fieldset> 时名称由 <legend> 给；否则指向字段的标签
@@ -149,7 +151,7 @@ export function SegmentedControl({
           className,
         )}
       />
-    </SegmentedContext>
+    </SegmentedContext.Provider>
   );
 }
 
@@ -182,7 +184,7 @@ export function Segment({
   children,
   ...props
 }: SegmentProps) {
-  const context = useContext(SegmentedContext);
+  const context = useContext(getSegmentedContext());
   if (!context) {
     throw new Error("<Segment> 必须放在 <SegmentedControl> 里");
   }

package/src/components/select/Select.tsx

@@ -1,6 +1,5 @@
 import { Select as BaseSelect } from "@base-ui/react/select";
 import {
-  createContext,
   Fragment,
   useContext,
   useRef,
@@ -13,7 +12,7 @@ import { StatusDanger } from "../../icons/StatusDanger";
 import { TriangleRight } from "../../icons/TriangleRight";
 import { cn } from "../../lib/cn";
 import {
-  MenuVariantContext,
+  getMenuVariantContext,
   menuGroupLabel,
   menuItem,
   menuItemCurrent,
@@ -31,6 +30,7 @@ import {
   type ControlSize,
   type ControlVariant,
 } from "../input/control-box";
+import { createLazyContext } from "../../lib/create-lazy-context";
 
 export type SelectSize = ControlSize;
 export type SelectVariant = ControlVariant;
@@ -107,7 +107,7 @@ export type SelectMultipleProps = SelectCommonProps & {
 export type SelectProps = SelectSingleProps | SelectMultipleProps;
 
 /** 面板里的选项要知道自己在不在多选的下拉里 */
-const SelectMultipleContext = createContext(false);
+const getSelectMultipleContext = /* @__PURE__ */ createLazyContext(false);
 
 function joinedLabels(selected: SelectOption[]) {
   return (
@@ -137,6 +137,8 @@ function joinedLabels(selected: SelectOption[]) {
  * 选项只有两三个、又都该一眼看到时，用单选或页签，不用它。
  */
 export function Select(props: SelectProps) {
+  const MenuVariantContext = getMenuVariantContext();
+  const SelectMultipleContext = getSelectMultipleContext();
   const {
     items,
     placeholder,
@@ -253,8 +255,8 @@ export function Select(props: SelectProps) {
             className={cn(menuPanel, "min-w-(--anchor-width)")}
           >
             <BaseSelect.List className="max-h-[min(var(--available-height),20rem)] overflow-y-auto overscroll-contain">
-              <MenuVariantContext value={panelVariant}>
-                <SelectMultipleContext value={multiple}>
+              <MenuVariantContext.Provider value={panelVariant}>
+                <SelectMultipleContext.Provider value={multiple}>
                   {children ??
                     items.map((item) => (
                       <SelectItem
@@ -265,8 +267,8 @@ export function Select(props: SelectProps) {
                         {item.label}
                       </SelectItem>
                     ))}
-                </SelectMultipleContext>
-              </MenuVariantContext>
+                </SelectMultipleContext.Provider>
+              </MenuVariantContext.Provider>
             </BaseSelect.List>
           </BaseSelect.Popup>
         </BaseSelect.Positioner>
@@ -320,8 +322,8 @@ export function SelectItem({
   children,
   ...props
 }: SelectItemProps) {
-  const variant = useContext(MenuVariantContext);
-  const multiple = useContext(SelectMultipleContext);
+  const variant = useContext(getMenuVariantContext());
+  const multiple = useContext(getSelectMultipleContext());
 
   return (
     <BaseSelect.Item

package/src/components/side-rail/SideRail.tsx

@@ -1,6 +1,5 @@
 import { Tooltip as BaseTooltip } from "@base-ui/react/tooltip";
 import {
-  createContext,
   useContext,
   useMemo,
   type ComponentProps,
@@ -11,9 +10,14 @@ import { usePortalScope } from "../../hooks/usePortalScope";
 import { cn } from "../../lib/cn";
 import { focusRingInset } from "../../lib/focus-ring";
 import { LinkElement, type LinkRender } from "../link-element/LinkElement";
-import { NavActionContext } from "../nav-action/NavAction";
+import { getNavActionContext } from "../nav-action/NavAction";
+import { createLazyContext } from "../../lib/create-lazy-context";
 
-export const SideRailContext = createContext({ collapsed: false });
+export const getSideRailContext = /* @__PURE__ */ createLazyContext<{
+  collapsed: boolean;
+}>({
+  collapsed: false,
+});
 
 /**
  * 一行栏目的样子：普通栏目和二级的父项共用。
@@ -92,10 +96,12 @@ export function SideRail({
   children,
   ...props
 }: SideRailProps) {
+  const SideRailContext = getSideRailContext();
+  const NavActionContext = getNavActionContext();
   const context = useMemo(() => ({ collapsed }), [collapsed]);
 
   return (
-    <SideRailContext value={context}>
+    <SideRailContext.Provider value={context}>
       <nav
         {...props}
         data-collapsed={collapsed ? "" : undefined}
@@ -137,9 +143,9 @@ export function SideRail({
           <div
             className={cn("flex shrink-0 p-3", collapsed && "justify-center")}
           >
-            <NavActionContext value={collapsed ? "stacked" : "block"}>
+            <NavActionContext.Provider value={collapsed ? "stacked" : "block"}>
               {action}
-            </NavActionContext>
+            </NavActionContext.Provider>
           </div>
         )}
 
@@ -154,7 +160,7 @@ export function SideRail({
           </div>
         )}
       </nav>
-    </SideRailContext>
+    </SideRailContext.Provider>
   );
 }
 
@@ -195,7 +201,7 @@ export function SideRailItem({
   children,
   ...props
 }: SideRailItemProps) {
-  const { collapsed } = useContext(SideRailContext);
+  const { collapsed } = useContext(getSideRailContext());
   const { anchorRef, portalRef } = usePortalScope();
   const isLink = href !== undefined || render !== undefined;
 
@@ -294,7 +300,7 @@ export function SideRailGroup({
   children,
   ...props
 }: SideRailGroupProps) {
-  const { collapsed } = useContext(SideRailContext);
+  const { collapsed } = useContext(getSideRailContext());
 
   return (
     <li {...props} className={cn("not-first:mt-2", className)}>