@skalar-saas/design-system 0.1.67

package/dist/layout/Container/Container.d.ts

@@ -0,0 +1,62 @@
+import React from "react";
+import type { ContainerSize } from "../constants";
+/**
+ * Valid HTML elements that Container can render as.
+ */
+export type ContainerElement = "div" | "main" | "section" | "article" | "aside" | "header" | "footer";
+/**
+ * Container padding variants for different use cases.
+ */
+export type ContainerPadding = "none" | "responsive" | "fixed";
+/**
+ * Props for the Container component.
+ */
+export interface ContainerProps extends React.HTMLAttributes<HTMLElement> {
+    /**
+     * Maximum width variant of the container.
+     * @default "default"
+     */
+    size?: ContainerSize;
+    /**
+     * Whether to center the container horizontally.
+     * @default true
+     */
+    centered?: boolean;
+    /**
+     * Horizontal padding behavior.
+     * @default "responsive"
+     */
+    padding?: ContainerPadding;
+    /**
+     * The HTML element to render.
+     * @default "div"
+     */
+    as?: ContainerElement;
+    /**
+     * Content to render inside the container.
+     */
+    children: React.ReactNode;
+}
+/**
+ * A responsive container component for constraining content width.
+ */
+declare const ContainerBase: React.ForwardRefExoticComponent<ContainerProps & React.RefAttributes<HTMLElement>>;
+export interface ContainerHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+}
+declare const ContainerHeader: React.ForwardRefExoticComponent<ContainerHeaderProps & React.RefAttributes<HTMLDivElement>>;
+export interface ContainerContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+}
+declare const ContainerContent: React.ForwardRefExoticComponent<ContainerContentProps & React.RefAttributes<HTMLDivElement>>;
+export interface ContainerFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+}
+declare const ContainerFooter: React.ForwardRefExoticComponent<ContainerFooterProps & React.RefAttributes<HTMLDivElement>>;
+type ContainerComponent = typeof ContainerBase & {
+    Header: typeof ContainerHeader;
+    Content: typeof ContainerContent;
+    Footer: typeof ContainerFooter;
+};
+declare const ContainerWithCompounds: ContainerComponent;
+export { ContainerWithCompounds as Container };

package/dist/layout/Container/index.d.ts

@@ -0,0 +1,2 @@
+export { Container } from "./Container";
+export type { ContainerProps, ContainerElement, ContainerPadding, ContainerHeaderProps, ContainerContentProps, ContainerFooterProps, } from "./Container";

package/dist/layout/PanelLayout/Panel.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import type { PanelProps } from './PanelLayout.types';
+/**
+ * Panel - Individual panel component with optional resize handle
+ *
+ * Panels can be positioned on the left or right side of the layout.
+ * Multiple panels on the same side will stack horizontally.
+ *
+ * @example
+ * ```tsx
+ * <Panel id="sidebar" side="left">
+ *   <SidebarContent />
+ * </Panel>
+ *
+ * <Panel id="chat" side="right" resizable={false}>
+ *   <ChatPanel />
+ * </Panel>
+ * ```
+ */
+export declare const Panel: React.NamedExoticComponent<PanelProps>;

package/dist/layout/PanelLayout/PanelContext.d.ts

@@ -0,0 +1,10 @@
+import type { PanelContextValue } from './PanelLayout.types';
+/**
+ * Context for sharing panel state and callbacks between PanelLayout and Panel components
+ */
+export declare const PanelContext: import("react").Context<PanelContextValue | null>;
+/**
+ * Hook to access the panel context
+ * @throws Error if used outside of PanelLayout
+ */
+export declare function usePanelContext(): PanelContextValue;

package/dist/layout/PanelLayout/PanelLayout.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import type { PanelLayoutProps } from './PanelLayout.types';
+/**
+ * PanelLayout - Container for a flexible panel-based layout
+ *
+ * Organizes Panel and PanelMain children into a responsive layout where:
+ * - Left panels stack on the left side
+ * - Right panels stack on the right side
+ * - PanelMain fills the remaining central space
+ *
+ * @example
+ * ```tsx
+ * <PanelLayout panels={panelsState} onPanelResize={handleResize}>
+ *   <Panel id="sidebar" side="left">
+ *     <Sidebar />
+ *   </Panel>
+ *
+ *   <PanelMain>
+ *     <MainContent />
+ *   </PanelMain>
+ *
+ *   <Panel id="chat" side="right">
+ *     <ChatPanel />
+ *   </Panel>
+ * </PanelLayout>
+ * ```
+ */
+export declare const PanelLayout: React.NamedExoticComponent<PanelLayoutProps>;

package/dist/layout/PanelLayout/PanelLayout.types.d.ts

@@ -0,0 +1,146 @@
+import type { ReactNode } from 'react';
+/**
+ * Side where a panel is positioned
+ */
+export type PanelSide = 'left' | 'right';
+/**
+ * State of an individual panel
+ */
+export interface PanelState {
+    /** Unique identifier for the panel */
+    id: string;
+    /** Whether the panel is currently open */
+    open: boolean;
+    /** Current width as percentage of viewport */
+    width: number;
+    /** Whether the panel is currently being resized */
+    isResizing?: boolean;
+    /** Whether the panel is in the close zone during drag (10-15%) */
+    inCloseZone?: boolean;
+    /** Whether the panel is in the process of closing (exit animation) */
+    exiting?: boolean;
+}
+/**
+ * Configuration for a panel (used in usePanelState)
+ */
+export interface PanelConfig {
+    /** Unique identifier for the panel */
+    id: string;
+    /** Side where the panel is positioned */
+    side: PanelSide;
+    /** Default width in pixels */
+    defaultWidth: number;
+    /** Minimum width in pixels (default: 200) */
+    minWidth?: number;
+    /** Maximum width in pixels (default: 50% of viewport) */
+    maxWidth?: number;
+}
+/**
+ * Complete state for all panels
+ */
+export interface PanelsState {
+    left: PanelState[];
+    right: PanelState[];
+}
+/**
+ * Props for the PanelLayout component
+ */
+export interface PanelLayoutProps {
+    /** Panel and PanelMain components */
+    children: ReactNode;
+    /** Current state of all panels */
+    panels: PanelsState;
+    /** Callback when a panel is resized */
+    onPanelResize: (id: string, width: number) => void;
+    /** Callback when a panel enters/exits the close zone during drag */
+    onCloseZoneChange?: (id: string, inCloseZone: boolean) => void;
+    /** Callback when a panel should be closed (released in close zone) */
+    onPanelClose?: (id: string) => void;
+    /** Minimum width for central content in pixels (default: 150) */
+    minCentralWidth?: number;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * Props for the Panel component
+ */
+export interface PanelProps {
+    /** Unique identifier matching PanelState.id */
+    id: string;
+    /** Side where the panel is positioned */
+    side: PanelSide;
+    /** Panel content (including header if needed) */
+    children: ReactNode;
+    /** Whether the panel can be resized (default: true) */
+    resizable?: boolean;
+    /**
+     * Background color for panel and handle
+     * Use CSS variable like 'var(--surface-1)' or 'var(--surface-2)'
+     * @default 'var(--surface-1)'
+     */
+    panelBg?: string;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * Props for the PanelMain component
+ */
+export interface PanelMainProps {
+    /** Main content */
+    children: ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * Options for the usePanelState hook
+ */
+export interface UsePanelStateOptions {
+    /** Configuration for each panel */
+    config: PanelConfig[];
+    /** Whether to persist state to localStorage (default: false) */
+    persist?: boolean;
+    /** Key for localStorage (default: 'panel-state') */
+    persistKey?: string;
+}
+/**
+ * Return type for the usePanelState hook
+ */
+export interface UsePanelStateReturn {
+    /** Current state of all panels */
+    panels: PanelsState;
+    /** Toggle a panel open/closed */
+    togglePanel: (id: string) => void;
+    /** Resize a panel to a specific width */
+    resizePanel: (id: string, width: number) => void;
+    /** Open a specific panel */
+    openPanel: (id: string) => void;
+    /** Close a specific panel (with animation) */
+    closePanel: (id: string) => void;
+    /** Reset all panels to default state */
+    resetPanels: () => void;
+    /** Handle close zone change (called by PanelLayout) */
+    handleCloseZoneChange: (id: string, inCloseZone: boolean) => void;
+    /** Handle panel close request (called by PanelLayout when released in close zone) */
+    handlePanelClose: (id: string) => void;
+}
+/**
+ * Internal context value for PanelLayout
+ */
+export interface PanelContextValue {
+    /** Current state of all panels */
+    panels: PanelsState;
+    /** Callback when resize starts */
+    onResizeStart: (id: string) => void;
+    /** Callback during resize */
+    onResize: (id: string, width: number) => void;
+    /** Callback when resize ends */
+    onResizeEnd: (id: string, shouldClose: boolean) => void;
+    /** Callback when panel enters/exits close zone */
+    onCloseZoneChange: (id: string, inCloseZone: boolean) => void;
+    /** Get panel state by id */
+    getPanelState: (id: string) => PanelState | undefined;
+    /** Minimum width for central content */
+    minCentralWidth: number;
+    /** Ref to the container element for calculating relative positions */
+    containerRef: React.RefObject<HTMLDivElement | null>;
+}

package/dist/layout/PanelLayout/PanelMain.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import type { PanelMainProps } from './PanelLayout.types';
+/**
+ * PanelMain - Central content area that fills the remaining space
+ *
+ * This component should be used inside PanelLayout to define the main content area.
+ * It automatically fills the space not occupied by Panel components.
+ *
+ * @example
+ * ```tsx
+ * <PanelLayout panels={state} onPanelResize={handleResize}>
+ *   <Panel id="sidebar" side="left">...</Panel>
+ *   <PanelMain>
+ *     <YourMainContent />
+ *   </PanelMain>
+ * </PanelLayout>
+ * ```
+ */
+export declare const PanelMain: React.NamedExoticComponent<PanelMainProps>;

package/dist/layout/PanelLayout/index.d.ts

@@ -0,0 +1,6 @@
+export { PanelLayout } from './PanelLayout';
+export { Panel } from './Panel';
+export { PanelMain } from './PanelMain';
+export { usePanelState } from './usePanelState';
+export { calculatePanelPercentage, calculateDraggedPanelPercentage, getTotalSideWidth, getTotalPanelsWidth, findPanelById, getCentralWidth, initializePanelsState, isInCloseZone, getSnappedWidth, PANEL_DEFAULTS, } from './panelUtils';
+export type { PanelSide, PanelState, PanelConfig, PanelsState, PanelLayoutProps, PanelProps, PanelMainProps, UsePanelStateOptions, UsePanelStateReturn, PanelContextValue, } from './PanelLayout.types';

package/dist/layout/PanelLayout/panelUtils.d.ts

@@ -0,0 +1,74 @@
+import type { PanelSide, PanelsState, PanelState, PanelConfig } from './PanelLayout.types';
+/**
+ * Default values for panel calculations
+ */
+export declare const PANEL_DEFAULTS: {
+    readonly minWidth: 200;
+    readonly maxWidthPercent: 50;
+    readonly minCentralWidth: 150;
+    /** Minimum percentage for central content (used for space calculations) */
+    readonly minCentralPercent: 10;
+    /** Minimum percentage for close zone (panel will show close indicator) */
+    readonly closeZoneMin: 10;
+    /** Maximum percentage for close zone */
+    readonly closeZoneMax: 15;
+    /** Minimum width to snap to if released outside close zone but below this */
+    readonly snapMinWidth: 15;
+    /** Animation duration for panel exit in ms */
+    readonly exitAnimationDuration: 100;
+};
+/**
+ * Check if a width percentage is in the close zone
+ */
+export declare function isInCloseZone(widthPercent: number): boolean;
+/**
+ * Get the snapped width (minimum width if below threshold, otherwise original)
+ */
+export declare function getSnappedWidth(widthPercent: number): number;
+/**
+ * Calculates the percentage width for a panel based on its desired pixel width
+ * and the current viewport width.
+ *
+ * @param desiredWidthPx - The desired width of the panel in pixels
+ * @param viewportWidth - The current viewport width in pixels
+ * @param otherPanelsWidthPx - Total width of other panels on the same side in pixels
+ * @param minCentralWidthPx - Minimum width the central content must maintain
+ * @returns The calculated percentage width for the panel
+ */
+export declare function calculatePanelPercentage(desiredWidthPx: number, viewportWidth: number, otherPanelsWidthPx?: number, minCentralWidthPx?: number): number;
+/**
+ * Calculates the panel width during a drag/resize operation.
+ *
+ * @param side - Which panel is being resized ('left' or 'right')
+ * @param mouseX - Current mouse X position relative to container
+ * @param containerWidth - Current container width
+ * @param oppositeSideWidthPercent - Total width percentage of panels on opposite side
+ * @param minCentralWidthPx - Minimum width the central content must maintain (in px, for backwards compat)
+ * @param externalPanelsWidthPercent - Width percentage of panels "more external" on same side
+ * @param internalPanelsWidthPercent - Width percentage of panels "more internal" on same side (not used for max calc, resizePanel handles redistribution)
+ * @returns The calculated percentage width based on mouse position
+ */
+export declare function calculateDraggedPanelPercentage(side: PanelSide, mouseX: number, containerWidth: number, oppositeSideWidthPercent?: number, minCentralWidthPx?: number, externalPanelsWidthPercent?: number, _internalPanelsWidthPercent?: number): number;
+/**
+ * Get total width of panels on a specific side
+ */
+export declare function getTotalSideWidth(panels: PanelState[]): number;
+/**
+ * Get total width of all open panels
+ */
+export declare function getTotalPanelsWidth(state: PanelsState): number;
+/**
+ * Find a panel by id in the panels state
+ */
+export declare function findPanelById(state: PanelsState, id: string): {
+    panel: PanelState;
+    side: PanelSide;
+} | undefined;
+/**
+ * Calculate the width of the central content area
+ */
+export declare function getCentralWidth(state: PanelsState): number;
+/**
+ * Initialize panels state from config
+ */
+export declare function initializePanelsState(config: PanelConfig[], viewportWidth?: number): PanelsState;

package/dist/layout/PanelLayout/usePanelState.d.ts

@@ -0,0 +1,25 @@
+import type { UsePanelStateOptions, UsePanelStateReturn } from './PanelLayout.types';
+/**
+ * Hook for managing panel state
+ *
+ * Provides a convenient way to manage panel open/close state and widths.
+ * Can optionally persist state to localStorage.
+ *
+ * @example
+ * ```tsx
+ * const { panels, togglePanel, resizePanel } = usePanelState({
+ *   config: [
+ *     { id: 'sidebar', side: 'left', defaultWidth: 275 },
+ *     { id: 'chat', side: 'right', defaultWidth: 375 },
+ *   ],
+ *   persist: true,
+ * });
+ *
+ * return (
+ *   <PanelLayout panels={panels} onPanelResize={resizePanel}>
+ *     ...
+ *   </PanelLayout>
+ * );
+ * ```
+ */
+export declare function usePanelState(options: UsePanelStateOptions): UsePanelStateReturn;

package/dist/layout/Section/Section.d.ts

@@ -0,0 +1,20 @@
+import React from "react";
+import type { LayoutSpacingKey } from "../constants";
+export type SectionElement = "div" | "section" | "article" | "aside";
+export type SectionBackground = "transparent" | "surface-bg" | "surface-1" | "surface-2" | "white";
+export interface SectionProps extends React.HTMLAttributes<HTMLElement> {
+    spacing?: LayoutSpacingKey;
+    background?: SectionBackground;
+    bordered?: boolean;
+    as?: SectionElement;
+    children: React.ReactNode;
+}
+export declare const Section: React.ForwardRefExoticComponent<SectionProps & React.RefAttributes<HTMLDivElement>>;
+export interface SectionHeroProps extends Omit<SectionProps, "spacing" | "background"> {
+    spacing?: LayoutSpacingKey;
+}
+export declare const SectionHero: React.ForwardRefExoticComponent<SectionHeroProps & React.RefAttributes<HTMLDivElement>>;
+export interface SectionFeaturesProps extends Omit<SectionProps, "background"> {
+    background?: SectionBackground;
+}
+export declare const SectionFeatures: React.ForwardRefExoticComponent<SectionFeaturesProps & React.RefAttributes<HTMLDivElement>>;

package/dist/layout/Section/index.d.ts

@@ -0,0 +1,2 @@
+export { Section, SectionHero, SectionFeatures } from "./Section";
+export type { SectionProps, SectionElement, SectionBackground, SectionHeroProps, SectionFeaturesProps, } from "./Section";

package/dist/layout/SplitPanelLayout/SplitPanelLayout.d.ts

@@ -0,0 +1,57 @@
+import React from 'react';
+/**
+ * Position where the side panel appears
+ */
+export type SplitPanelPosition = 'left' | 'right';
+/**
+ * Props for the SplitPanelLayout component
+ */
+export interface SplitPanelLayoutProps {
+    /**
+     * Main content that shrinks when panel opens
+     */
+    mainContent: React.ReactNode;
+    /**
+     * Content to display in the sliding side panel
+     */
+    sidePanel: React.ReactNode;
+    /**
+     * Whether the side panel is currently open
+     */
+    isPanelOpen: boolean;
+    /**
+     * Callback when panel should exit (for parent to update state after animation)
+     * This is called after the exit animation completes
+     */
+    onPanelExited?: () => void;
+    /**
+     * Width of the side panel in pixels
+     * @default 400
+     */
+    panelWidth?: number;
+    /**
+     * Position of the side panel
+     * @default 'right'
+     */
+    panelPosition?: SplitPanelPosition;
+    /**
+     * Animation duration in milliseconds
+     * @default 75
+     */
+    animationDuration?: number;
+    /**
+     * Additional CSS classes for the container
+     */
+    className?: string;
+    /**
+     * Background color for the main content area
+     * @default 'bg-white'
+     */
+    mainContentBg?: string;
+    /**
+     * Background color for the side panel
+     * Does not apply background by default - control via sidePanel content
+     */
+    sidePanelBg?: string;
+}
+export declare const SplitPanelLayout: React.NamedExoticComponent<SplitPanelLayoutProps>;

package/dist/layout/SplitPanelLayout/index.d.ts

@@ -0,0 +1,2 @@
+export { SplitPanelLayout } from './SplitPanelLayout';
+export type { SplitPanelLayoutProps, SplitPanelPosition } from './SplitPanelLayout';