@starasia/admin 8.8.0 → 8.10.0

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

@@ -0,0 +1,63 @@
+import { default as React } from 'react';
+
+export interface SidePanelItemProps {
+    /**
+     * Highlight this row as the currently selected one — paints the accent
+     * bar (`--sa-border-focused`) + a subtle brand fill.
+     */
+    active?: boolean;
+    /**
+     * Which edge the active/focus accent bar sits on. Match it to the
+     * `SidePanel`'s `side` so the bar hugs the panel's outer edge.
+     * @default 'left'
+     */
+    accentSide?: "left" | "right";
+    /** Click handler for selecting the row. */
+    onClick?: () => void;
+    /**
+     * Top line — typically a document code / id (e.g. "SJ-BIB/03-2026/0004").
+     * Truncates with an ellipsis when it overflows.
+     */
+    title?: React.ReactNode;
+    /**
+     * Trailing element on the title row — usually a `<Badge />` (e.g. status).
+     * Pinned to the right, never shrinks.
+     */
+    badge?: React.ReactNode;
+    /** Main bold line — e.g. the entity / company name. */
+    heading?: React.ReactNode;
+    /** Subtle bottom line — e.g. "Created By: …". */
+    meta?: React.ReactNode;
+    /**
+     * Custom body — when provided, overrides the
+     * `title`/`badge`/`heading`/`meta` layout entirely.
+     */
+    children?: React.ReactNode;
+    /** Render the bottom divider between rows. @default true */
+    divider?: boolean;
+    disabled?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+    /** aria-label when the row content isn't plain readable text. */
+    "aria-label"?: string;
+}
+/**
+ * SidePanelItem — a selectable list-row card for use inside `SidePanel`'s
+ * `children`. Shows a document code (`title`) with an optional `badge`, a
+ * bold `heading`, and a subtle `meta` line. The `active` row gets an accent
+ * left border; every row has a hover and keyboard-focus state.
+ *
+ * @example
+ * {records.map((r) => (
+ *   <SidePanelItem
+ *     key={r.id}
+ *     active={r.id === activeId}
+ *     onClick={() => setActiveId(r.id)}
+ *     title={r.code}
+ *     badge={<Badge variant="warning" size="sm" text={r.status} />}
+ *     heading={r.company}
+ *     meta={`Created By: ${r.createdBy}`}
+ *   />
+ * ))}
+ */
+export declare const SidePanelItem: React.FC<SidePanelItemProps>;

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

@@ -0,0 +1,88 @@
+import { default as React } from 'react';
+import { BoxProps } from '@starasia/box';
+
+export { SidePanelItem } from './SidePanelItem';
+export type { SidePanelItemProps } from './SidePanelItem';
+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';