@starasia/admin 8.8.0 → 8.9.0

package/dist/components/SidePanel/index.d.ts

@@ -0,0 +1,86 @@
+import { default as React } from 'react';
+import { BoxProps } from '@starasia/box';
+
+export interface SidePanelToggleLabel {
+    /** aria-label when the panel is currently open (clicking will collapse it). */
+    collapse: string;
+    /** aria-label when the panel is currently collapsed (clicking will expand it). */
+    expand: string;
+}
+export interface SidePanelProps {
+    /** Scrollable body content of the panel. */
+    children?: React.ReactNode;
+    /**
+     * Fixed (non-scrolling) content pinned to the top of the panel —
+     * e.g. a search box + filter button. Stays put while `children` scroll.
+     */
+    header?: React.ReactNode;
+    /** Controlled collapsed state. Omit to run uncontrolled (see `defaultCollapsed`). */
+    collapsed?: boolean;
+    /** Initial collapsed state when uncontrolled. @default false */
+    defaultCollapsed?: boolean;
+    /** Called on toggle with the next collapsed state. */
+    onToggle?: (collapsed: boolean) => void;
+    /** Expanded panel width in px. @default 337 */
+    width?: number;
+    /** Which edge the panel hugs (and where the toggle "ear" sits). @default 'left' */
+    side?: "left" | "right";
+    /** Distance from the top of the viewport for sticky positioning. @default '4rem' */
+    offsetTop?: number | string;
+    /** Panel height. @default 'calc(100vh - {offsetTop})' */
+    height?: number | string;
+    /** Show the toggle "ear" button on the outer edge. @default true */
+    showToggle?: boolean;
+    /** Where the toggle "ear" sits vertically along the panel edge. @default 'top' */
+    togglePosition?: "top" | "center" | "bottom";
+    /**
+     * Distance in px from the anchored edge for `togglePosition` 'top' / 'bottom'.
+     * Ignored when `togglePosition` is 'center'. @default 40
+     */
+    toggleOffset?: number;
+    /** Accessible labels for the toggle button. */
+    toggleLabel?: SidePanelToggleLabel;
+    /** Extra style for the outer sticky wrapper. */
+    style?: React.CSSProperties;
+    /** Extra style for the scrollable body container. */
+    bodyStyle?: React.CSSProperties;
+    className?: string;
+    /**
+     * Main content region for the master-detail layout. When provided, SidePanel
+     * renders the two-column shell itself: this panel on the anchored `side` (its
+     * `header` = search/filter, `children` = list body) and `pageLayout` in an
+     * independently-scrolling content column. On mobile (< md) the panel becomes
+     * a fixed overlay/drawer with a scrim so it doesn't steal width.
+     *
+     * Omit for standalone use (just the panel) to compose the layout by hand.
+     */
+    pageLayout?: React.ReactNode;
+    /**
+     * Whether the panel floats over the content as a drawer (with a scrim) instead
+     * of taking a column. Only applies in integrated mode (`pageLayout` set).
+     * - `'mobile'` (default): overlay only below the `md` breakpoint.
+     * - `true`: always overlay.
+     * - `false`: never overlay (always a side column).
+     * @default 'mobile'
+     */
+    overlay?: boolean | "mobile";
+    /** Override the outer flex-row region (integrated mode only). */
+    wrapperProps?: BoxProps;
+    /** Override the right-hand scrolling content column (integrated mode only). */
+    contentProps?: BoxProps;
+}
+/**
+ * SidePanel — a sticky side panel that smoothly collapses to zero width
+ * and back. Provide fixed top content via `header` and scrolling content as
+ * `children`. A toggle "ear" hangs off the outer edge. Works controlled
+ * (`collapsed` + `onToggle`) or uncontrolled (`defaultCollapsed`).
+ *
+ * @example
+ * <SidePanel
+ *   header={<SearchAndFilter />}
+ *   defaultCollapsed={false}
+ * >
+ *   {records.map((r) => <ListRow key={r.id} {...r} />)}
+ * </SidePanel>
+ */
+export declare const SidePanel: React.FC<SidePanelProps>;

package/dist/components/index.d.ts

@@ -21,6 +21,7 @@ export * from './InputFile';
 export * from './Typography';
 export * from './ScrollToTopButton';
 export * from './InputImage';
+export * from './SidePanel';
 export * from './AsideBar';
 export * from './FloatingFooter';
 export * from './VerticalField';