@knkcs/anker 1.9.2 → 1.9.4

package/dist/components/index.d.ts

@@ -153,7 +153,6 @@ interface ContextRailProps {
 interface ContextRailHeaderProps {
     eyebrow?: React__default.ReactNode;
     title: React__default.ReactNode;
-    onClose?: () => void;
 }
 interface ContextRailSectionProps {
     id: string;
@@ -168,7 +167,7 @@ declare const ContextRail: {
     displayName: string;
 } & {
     Header: {
-        ({ eyebrow, title, onClose: _onClose, }: ContextRailHeaderProps): react_jsx_runtime.JSX.Element;
+        ({ eyebrow, title }: ContextRailHeaderProps): react_jsx_runtime.JSX.Element;
         displayName: string;
     };
     Section: {

package/dist/components/index.js

@@ -5,12 +5,12 @@ import { Popover, PopoverTrigger, PopoverContent, PopoverBody, Switch } from '..
 import { text_input_default } from '../chunk-OU6H3KU4.js';
 import { Button, IconButton } from '../chunk-JS7ZEZV3.js';
 export { AuthCard, PageHeader } from '../chunk-D5ICTOCW.js';
-import { Box, Flex, Text, Heading, HStack, Grid, GridItem, Code, Link, VStack, Spacer, Stack } from '../chunk-G4QMIXLC.js';
+import { Box, Flex, Heading, Text, HStack, Grid, GridItem, Code, Link, VStack, Spacer, Stack } from '../chunk-G4QMIXLC.js';
 import { PanelRightOpen, PanelRightClose, ChevronRight, Search, PanelLeftOpen, PanelLeftClose, X, Ellipsis, Plus, ChevronLeft, ArrowUp, ArrowDown, ArrowUpDown, ChevronDown, Check, Upload } from 'lucide-react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { createContext, Timeline, TreeView, Card as Card$1, Menu, Portal, Checkbox, Drawer, ButtonGroup, Dialog, useSlotRecipe, chakra } from '@chakra-ui/react';
+import { createContext as createContext$1, Timeline, TreeView, Card as Card$1, Menu, Portal, Checkbox, Drawer, ButtonGroup, Dialog, useSlotRecipe, chakra } from '@chakra-ui/react';
 export { createTreeCollection } from '@chakra-ui/react';
-import React3, { createContext as createContext$1, useState, useEffect, useMemo, Children, useRef, useCallback, useContext } from 'react';
+import React3, { createContext, useState, useEffect, useMemo, useContext, useRef, Children, useCallback } from 'react';
 import dayjs from 'dayjs';
 import { Link as Link$1 } from 'react-router-dom';
 import { useReactTable, getSortedRowModel, getCoreRowModel, flexRender } from '@tanstack/react-table';
@@ -393,6 +393,23 @@ ChipPicker.displayName = "ChipPicker";
 var COLLAPSED_WIDTH = "44px";
 var EXPANDED_WIDTH = "360px";
 var COLLAPSE_BREAKPOINT = 1440;
+var RailRootContext = createContext(false);
+function isDevMode() {
+  const proc = globalThis.process;
+  return proc?.env?.NODE_ENV !== "production";
+}
+function useWarnIfOutsideRailRoot(componentName) {
+  const insideRoot = useContext(RailRootContext);
+  const warnedRef = useRef(false);
+  useEffect(() => {
+    if (!insideRoot && !warnedRef.current && isDevMode()) {
+      warnedRef.current = true;
+      console.warn(
+        `${componentName} was rendered outside <ContextRail>. Wrap rail content in <ContextRail> to get column width, collapse toggle, inner padding, and persistence. See docs/page-patterns.md.`
+      );
+    }
+  }, [insideRoot, componentName]);
+}
 function getInitialCollapsed(storageKey) {
   if (typeof window === "undefined") return false;
   if (storageKey) {
@@ -411,16 +428,13 @@ var ContextRailRoot = ({ storageKey, children }) => {
       window.localStorage.setItem(storageKey, String(collapsed));
     }
   }, [collapsed, storageKey]);
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(RailRootContext.Provider, { value: true, children: /* @__PURE__ */ jsx(
     Box,
     {
       "data-testid": "context-rail",
       "data-collapsed": collapsed ? "true" : "false",
       w: collapsed ? COLLAPSED_WIDTH : EXPANDED_WIDTH,
       minH: "100vh",
-      bg: "bg-surface",
-      borderLeftWidth: "1px",
-      borderLeftColor: "border",
       transition: "width 250ms ease-out",
       overflow: "hidden",
       position: "relative",
@@ -449,38 +463,37 @@ var ContextRailRoot = ({ storageKey, children }) => {
         /* @__PURE__ */ jsx(Box, { flex: "1", overflowY: "auto", px: "4", pb: "4", children })
       ] })
     }
-  );
+  ) });
 };
 ContextRailRoot.displayName = "ContextRail";
-var ContextRailHeader = ({
-  eyebrow,
-  title,
-  onClose: _onClose
-}) => /* @__PURE__ */ jsxs(Box, { mb: "4", pb: "3", borderBottomWidth: "1px", borderBottomColor: "border", children: [
-  eyebrow && /* @__PURE__ */ jsx(
-    Text,
-    {
-      fontSize: "2xs",
-      fontWeight: "semibold",
-      letterSpacing: "wider",
-      textTransform: "uppercase",
-      color: "muted",
-      mb: "1",
-      children: eyebrow
-    }
-  ),
-  /* @__PURE__ */ jsx(
-    Heading,
-    {
-      as: "h2",
-      fontSize: "lg",
-      fontWeight: "semibold",
-      color: "default",
-      letterSpacing: "-0.01em",
-      children: title
-    }
-  )
-] });
+var ContextRailHeader = ({ eyebrow, title }) => {
+  useWarnIfOutsideRailRoot("ContextRail.Header");
+  return /* @__PURE__ */ jsxs(Box, { mb: "4", pb: "3", borderBottomWidth: "1px", borderBottomColor: "border", children: [
+    eyebrow && /* @__PURE__ */ jsx(
+      Text,
+      {
+        fontSize: "2xs",
+        fontWeight: "semibold",
+        letterSpacing: "wider",
+        textTransform: "uppercase",
+        color: "muted",
+        mb: "1",
+        children: eyebrow
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Heading,
+      {
+        as: "h2",
+        fontSize: "lg",
+        fontWeight: "semibold",
+        color: "default",
+        letterSpacing: "-0.01em",
+        children: title
+      }
+    )
+  ] });
+};
 ContextRailHeader.displayName = "ContextRail.Header";
 var ContextRailSection = ({
   id,
@@ -490,6 +503,7 @@ var ContextRailSection = ({
   action,
   children
 }) => {
+  useWarnIfOutsideRailRoot("ContextRail.Section");
   const [open, setOpen] = useState(defaultOpen);
   return /* @__PURE__ */ jsxs(
     Box,
@@ -1968,7 +1982,7 @@ var SidebarSection2 = ({
   ] });
 };
 SidebarSection2.displayName = "SidebarSection";
-var [StepperProvider, useStepperContext] = createContext({
+var [StepperProvider, useStepperContext] = createContext$1({
   name: "StepperContext",
   errorMessage: "useStepperContext: `context` is undefined. Seems you forgot to wrap stepper components in `<Stepper />`"
 });
@@ -2074,7 +2088,7 @@ function getChildrenOfType(children, type) {
 }
 var dataAttr = (condition) => condition ? "" : void 0;
 var cx = (...classes) => classes.filter(Boolean).join(" ");
-var StylesContext = createContext$1({});
+var StylesContext = createContext({});
 var useStyles = () => useContext(StylesContext);
 var Stepper = ({
   ref,