@endfield-ui/react 1.1.0 → 1.2.1

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,7 +66,7 @@ export function NavAction({
   children,
   ...props
 }: NavActionProps) {
-  const inherited = useContext(NavActionContext);
+  const inherited = useContext(getNavActionContext());
   const layout = layoutProp ?? inherited ?? "inline";
   const stacked = layout === "stacked";
 

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/otp-input/OtpInput.tsx

@@ -1,10 +1,10 @@
 import { OTPField as BaseOtpField } from "@base-ui/react/otp-field";
 import { Fragment, useId, type ComponentProps } from "react";
 import { cn } from "../../lib/cn";
-import { focusRing } from "../../lib/focus-ring";
 import { useFieldContext, useFieldControl } from "../field/Field";
 import {
-  readOnlyFrame,
+  controlBox,
+  controlElement,
   type ControlSize,
   type ControlVariant,
 } from "../input/control-box";
@@ -53,21 +53,17 @@ export type OtpInputProps = Omit<
   slotLabel?: (position: number, length: number) => string;
 };
 
-/* 格子见方；容器窄了宽度可以让，高度不变 */
+/* 格子见方；容器窄了宽度可以让，高度不变。字号在里面那个 <input> 上 */
 const slotSize: Record<ControlSize, string> = {
-  sm: "h-8 w-8 text-base",
-  md: "h-10 w-10 text-lg",
-  lg: "h-14 w-14 text-2xl",
+  sm: "h-8 w-8",
+  md: "h-10 w-10",
+  lg: "h-14 w-14",
 };
 
-const slotFrame: Record<ControlVariant, string> = {
-  sunken: "border-b-2",
-  outline: "border",
-};
-
-const slotFill: Record<ControlVariant, string> = {
-  sunken: "bg-surface-sunken",
-  outline: "bg-surface",
+const slotText: Record<ControlSize, string> = {
+  sm: "text-base",
+  md: "text-lg",
+  lg: "text-2xl",
 };
 
 const gapClass: Record<ControlSize, string> = {
@@ -132,27 +128,12 @@ export function OtpInput({
   const ownLabel = ariaLabelledBy ?? (ariaLabel ? labelId : undefined);
   const groupLabel = ownLabel ?? fieldContext?.labelId;
 
-  const slotClass = cn(
-    // 字色：空格是透明的，填上（基元给的 data-filled）才有颜色。下面那条颜色的过渡
-    // 本来是给边线的，字色跟着它走——所以填进去的那一位是淡入的。光标另有自己的颜色
-    "min-w-0 shrink text-center font-tech font-medium tabular-nums text-transparent caret-ink",
+  const inputClass = cn(
+    controlElement,
+    "h-full w-full text-center font-tech font-medium tabular-nums caret-ink text-transparent",
     "transition-colors duration-(--duration-fast) ease-standard",
     disabled ? "data-filled:text-ink-disabled" : "data-filled:text-ink",
-    focusRing,
-    slotSize[size],
-    slotFrame[variant],
-    readOnly
-      ? // 只读：没有边线、底变透明。边线留透明的，尺寸不跳
-        "border-transparent bg-transparent"
-      : slotFill[variant],
-    readOnly && !disabled && !invalid && readOnlyFrame,
-    disabled
-      ? "cursor-not-allowed border-line"
-      : invalid
-        ? "border-danger"
-        : !readOnly &&
-          // 悬停只在没聚焦时生效：聚焦中的格子不会因为鼠标经过而变浅
-          "border-line-strong hover:not-focus:border-ink-secondary focus:border-ink",
+    slotText[size],
   );
 
   const group = groupSize !== undefined && groupSize > 0 ? groupSize : 0;
@@ -203,16 +184,27 @@ export function OtpInput({
               className="h-0.5 w-2 shrink-0 bg-line-strong forced-colors:bg-[CanvasText]"
             />
           )}
-          <BaseOtpField.Input
-            // 第一格的名称是字段的标签（或者上面那段隐藏的文字），说明文字也挂在它上面
-            {...(index === 0
-              ? { "aria-labelledby": ownLabel, "aria-describedby": describedBy }
-              : { "aria-label": slotLabel(index + 1, length) })}
-            aria-invalid={invalid || undefined}
-            autoFocus={autoFocus && index === 0}
-            autoCapitalize={uppercase ? "characters" : "none"}
-            className={slotClass}
-          />
+          <span
+            className={cn(
+              controlBox({ variant, invalid, disabled, readOnly }),
+              "shrink items-center justify-center",
+              slotSize[size],
+            )}
+          >
+            <BaseOtpField.Input
+              // 第一格的名称是字段的标签（或者上面那段隐藏的文字），说明文字也挂在它上面
+              {...(index === 0
+                ? {
+                    "aria-labelledby": ownLabel,
+                    "aria-describedby": describedBy,
+                  }
+                : { "aria-label": slotLabel(index + 1, length) })}
+              aria-invalid={invalid || undefined}
+              autoFocus={autoFocus && index === 0}
+              autoCapitalize={uppercase ? "characters" : "none"}
+              className={inputClass}
+            />
+          </span>
         </Fragment>
       ))}
     </BaseOtpField.Root>

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,
@@ -13,10 +12,12 @@ import { mergeRefs } from "../../lib/merge-refs";
 import { indicator, indicatorBox } from "../../lib/motion";
 import { useFieldContext } from "../field/Field";
 import {
+  controlLine,
   controlSize,
   type ControlSize,
   type ControlVariant,
 } from "../input/control-box";
+import { createLazyContext } from "../../lib/create-lazy-context";
 
 export type SegmentedControlSize = ControlSize;
 export type SegmentedControlVariant = ControlVariant;
@@ -31,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">,
@@ -84,6 +86,7 @@ export function SegmentedControl({
   ref,
   ...props
 }: SegmentedControlProps) {
+  const SegmentedContext = getSegmentedContext();
   const field = useFieldContext();
   // 选中的那块底画在轨道上：换一段时是同一块滑过去
   const trackRef = useIndicator<HTMLDivElement>("[data-selected]");
@@ -115,7 +118,7 @@ export function SegmentedControl({
   );
 
   return (
-    <SegmentedContext value={context}>
+    <SegmentedContext.Provider value={context}>
       <div
         role="radiogroup"
         // 字段是 <fieldset> 时名称由 <legend> 给；否则指向字段的标签
@@ -140,16 +143,15 @@ export function SegmentedControl({
           "forced-colors:after:bg-[Highlight] forced-colors:has-[[data-selected][data-disabled]]:after:bg-[GrayText]",
           track[variant],
           controlSize[size],
-          // 和输入框一样靠边线说状态
           disabled
             ? "border-line"
             : invalid
               ? "border-danger"
-              : "border-line-strong focus-within:border-ink",
+              : ["border-line-strong", controlLine(variant)],
           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,
@@ -191,8 +193,6 @@ export function Select(props: SelectProps) {
         data-invalid={invalid ? "" : undefined}
         className={cn(
           controlBox({ variant, invalid, disabled, readOnly: false }),
-          // 面板开着的时候边线保持聚焦的墨色
-          !disabled && !invalid && "has-data-popup-open:border-ink",
           controlSize[size],
           className,
         )}
@@ -255,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
@@ -267,8 +267,8 @@ export function Select(props: SelectProps) {
                         {item.label}
                       </SelectItem>
                     ))}
-                </SelectMultipleContext>
-              </MenuVariantContext>
+                </SelectMultipleContext.Provider>
+              </MenuVariantContext.Provider>
             </BaseSelect.List>
           </BaseSelect.Popup>
         </BaseSelect.Positioner>
@@ -322,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)}>

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

@@ -2,7 +2,6 @@ import { Collapsible as BaseCollapsible } from "@base-ui/react/collapsible";
 import { Menu as BaseMenu } from "@base-ui/react/menu";
 import {
   Children,
-  createContext,
   isValidElement,
   useContext,
   useEffect,
@@ -25,10 +24,13 @@ import {
   menuPanel,
 } from "../dropdown-menu/menu-style";
 import { LinkElement, type LinkRender } from "../link-element/LinkElement";
-import { RailIcon, railItemClass, SideRailContext } from "./SideRail";
+import { RailIcon, railItemClass, getSideRailContext } from "./SideRail";
+import { createLazyContext } from "../../lib/create-lazy-context";
 
 /** 子项要知道自己是排在侧轨里，还是在收起时弹出的那块菜单里 */
-const SubContext = createContext<"list" | "menu">("list");
+const getSubContext = /* @__PURE__ */ createLazyContext<"list" | "menu">(
+  "list",
+);
 
 type SubOwnProps = {
   /** 图标。收起时只剩它 */
@@ -63,7 +65,8 @@ export function SideRailSub({
   children,
   ...props
 }: SideRailSubProps) {
-  const { collapsed } = useContext(SideRailContext);
+  const SubContext = getSubContext();
+  const { collapsed } = useContext(getSideRailContext());
   const { anchorRef, portalRef } = usePortalScope();
 
   // 当前项在不在里面：从子元素上读，所以 SideRailSubItem 要直接放在这里
@@ -121,7 +124,9 @@ export function SideRailSub({
                   <BaseMenu.GroupLabel className={menuGroupLabel}>
                     {label}
                   </BaseMenu.GroupLabel>
-                  <SubContext value="menu">{children}</SubContext>
+                  <SubContext.Provider value="menu">
+                    {children}
+                  </SubContext.Provider>
                 </BaseMenu.Group>
               </BaseMenu.Popup>
             </BaseMenu.Positioner>
@@ -167,7 +172,7 @@ export function SideRailSub({
             aria-label={label}
             className="relative before:absolute before:inset-y-0 before:left-8 before:w-px before:bg-line before:content-['']"
           >
-            <SubContext value="list">{children}</SubContext>
+            <SubContext.Provider value="list">{children}</SubContext.Provider>
           </ul>
         </BaseCollapsible.Panel>
       </BaseCollapsible.Root>
@@ -208,7 +213,7 @@ export function SideRailSubItem({
   children,
   ...props
 }: SideRailSubItemProps) {
-  const placement = useContext(SubContext);
+  const placement = useContext(getSubContext());
   const isLink = href !== undefined || render !== undefined;
 
   const content = (