@stackone/malachite 0.58.1 → 0.59.0

package/dist/index.d.ts

@@ -13,6 +13,13 @@ export declare const Accordion: default_2.FC<AccordionProps>;
 declare interface AccordionBaseProps {
     className?: string;
     children?: default_2.ReactNode;
+    /**
+     * Visual style. `default` is the flat list row (arrow leading, row dividers,
+     * hover background). `sunken` draws the section as a sunken card (dimmed
+     * rounded container, arrow pinned right, no dividers/hover) — used for stacked
+     * detail sections in side panels and detail pages (see `CollapsibleSection`).
+     */
+    variant?: 'default' | 'sunken';
     /**
      * Content pinned to the right of the header, OUTSIDE the toggle button — so it may
      * be interactive (e.g. a Checkbox) without nesting a button inside a button.
@@ -270,6 +277,21 @@ export declare interface CheckboxProps {
     id?: string;
 }
 
+/**
+ * Text clamped to `lines`, revealing the full text on hover / keyboard focus when
+ * `expandOnHover`. Pure CSS; `line-height` is fixed at 1.5 so the collapsed max-height
+ * matches `lines` exactly for the animation. The expanded state caps at 1000px, so this
+ * is for short blurbs — longer content clips rather than a scrollable component.
+ */
+export declare const ClampText: default_2.FC<ClampTextProps>;
+
+export declare interface ClampTextProps {
+    children: default_2.ReactNode;
+    lines?: number;
+    expandOnHover?: boolean;
+    className?: string;
+}
+
 export declare const CodeBlock: default_2.FC<CodeBlockProps>;
 
 declare interface CodeBlockProps {
@@ -287,6 +309,13 @@ declare interface CodeBlockProps {
     height?: string | number;
     /** Enable copy functionality */
     enableCopy?: boolean;
+    /** Wrap long lines instead of scrolling horizontally */
+    wrapLines?: boolean;
+    /**
+     * Highlight the code with this language's grammar. Deliberately yaml-only for now;
+     * widen the union as grammars are registered in CodeBlockHighlighter.
+     */
+    language?: 'yaml';
 }
 
 declare interface CodeTextProps {
@@ -300,6 +329,18 @@ declare interface CodeTextProps {
     style?: default_2.CSSProperties;
 }
 
+export declare const CollapsibleSection: default_2.FC<CollapsibleSectionProps>;
+
+export declare interface CollapsibleSectionProps {
+    title: string;
+    subtitle?: string;
+    defaultExpanded?: boolean;
+    isExpanded?: boolean;
+    onToggle?: (expanded: boolean) => void;
+    className?: string;
+    children: default_2.ReactNode;
+}
+
 export declare const Confetti: default_2.FC<ConfettiProps>;
 
 export declare interface ConfettiProps {
@@ -658,6 +699,21 @@ declare type InputType = 'text' | 'password' | 'number' | 'email' | 'tel' | 'url
 
 declare type InputVariant = 'default' | 'ghost';
 
+export declare const KeyValueList: default_2.FC<KeyValueListProps> & {
+    Row: typeof Row;
+};
+
+export declare interface KeyValueListProps {
+    className?: string;
+    children: default_2.ReactNode;
+}
+
+export declare interface KeyValueListRowProps {
+    label: default_2.ReactNode;
+    className?: string;
+    children: default_2.ReactNode;
+}
+
 export declare const Link: default_2.FC<LinkProps>;
 
 export declare interface LinkProps {
@@ -749,6 +805,10 @@ export declare interface MalachiteTheme {
             /** @deprecated No longer read by any component — glass surfaces derive from `sunkenBackground` (see `glassSurface.ts`). */
             footerGlassBackground: string;
         };
+        overlay: {
+            /** Dimming layer drawn behind modal overlays (e.g. SidePanel). */
+            scrim: string;
+        };
         alert: {
             info: {
                 background: string;
@@ -1121,6 +1181,7 @@ export declare interface PartialMalachiteTheme {
         shadowColor?: string;
         shadowOpacity?: number;
         card?: Partial<MalachiteTheme['colors']['card']>;
+        overlay?: Partial<MalachiteTheme['colors']['overlay']>;
         alert?: Partial<MalachiteTheme['colors']['alert']>;
         tooltip?: Partial<MalachiteTheme['colors']['tooltip']>;
         primary?: Partial<MalachiteTheme['colors']['primary']>;
@@ -1218,6 +1279,8 @@ export declare interface RadioProps {
  */
 export declare function resetTheme(): void;
 
+declare const Row: default_2.FC<KeyValueListRowProps>;
+
 export declare type RowVariant = 'success' | 'warning' | 'error' | 'info';
 
 export declare const Search: default_2.FC<SearchProps>;
@@ -1266,6 +1329,57 @@ declare interface ShadowEscapeProps {
     className?: string;
 }
 
+/**
+ * A right-hand slide-in overlay panel (drawer) for inspecting or editing an entity
+ * without leaving the page. Portals to `document.body`, locks background scroll and
+ * traps keyboard focus while open (restoring both on close), dismisses on ESC
+ * (topmost open overlay only), overlay click or the close button, and exposes header
+ * (back/icon/title/subtitle/extra), scrollable body and optional footer slots.
+ */
+export declare const SidePanel: default_2.FC<SidePanelProps>;
+
+export declare const SidePanelNavFooter: default_2.FC<SidePanelNavFooterProps>;
+
+export declare interface SidePanelNavFooterProps {
+    onNavigateUp?: () => void;
+    onNavigateDown?: () => void;
+    canNavigateUp?: boolean;
+    canNavigateDown?: boolean;
+    actions?: default_2.ReactNode;
+    className?: string;
+}
+
+export declare interface SidePanelProps {
+    open: boolean;
+    /** Dismiss handler — close button, ESC, or overlay click. */
+    onClose: () => void;
+    title: default_2.ReactNode;
+    /** Secondary text, inline after the title. */
+    subtitle?: default_2.ReactNode;
+    /** Content at the end of the title row, after the subtitle (e.g. a status tag). */
+    titleExtra?: default_2.ReactNode;
+    /** Block paragraph below the title row, spanning the header width. */
+    description?: default_2.ReactNode;
+    /** Divider under the header. Default: false. */
+    headerDivider?: boolean;
+    /** Leading header slot, typically a logo or icon. */
+    icon?: default_2.ReactNode;
+    /** Content pinned right in the header, before the close button. */
+    headerExtra?: default_2.ReactNode;
+    footer?: default_2.ReactNode;
+    /** Renders a back button before the header icon. */
+    onBack?: () => void;
+    /** Maximum panel width. Default: 1080. */
+    maxWidth?: number | string;
+    /** Accessible dialog name; required when `title` isn't a plain string. */
+    'aria-label'?: string;
+    /** ID of a visible element naming the dialog (alternative to `aria-label`). */
+    'aria-labelledby'?: string;
+    /** Whether the body gets default padding. Default: true. */
+    bodyPadding?: boolean;
+    children: default_2.ReactNode;
+}
+
 export declare const Skeleton: {
     Button: default_2.FC<SkeletonButtonProps>;
     Input: default_2.FC<SkeletonInputProps>;