@starasia/admin 8.9.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

@@ -1,6 +1,8 @@
 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;