baseline-kit 3.0.2 → 5.1.0

package/dist/index.d.ts

@@ -1,32 +1,206 @@
+import * as React from 'react';
+
 /**
- * Baseline Kit
- * Lightweight development tool for visualizing and debugging grid systems and spacing in React
- * applications. It provides configurable overlays for both column-based and baseline grids, flexible spacing components,
- * and theme-aware configuration—all optimized for performance and built with TypeScript.
- *
- * Export Strategy:
- * - Only components and types required by consumers are exported
- * - Components are directly imported from their respective directories rather than through the components/index.ts barrel
- * - SSR utilities (isSSR, safeClientValue) are exported for advanced consumer use cases
- * - Internal utilities, helper functions, and implementation details are kept private
- *
- * @module baseline-kit
+ * @baseline-kit/core - Pure type definitions
+ * Framework-agnostic types for the baseline-kit system
  */
-export { Config } from './components/Config';
-export { Baseline } from './components/Baseline';
-export { Guide } from './components/Guide';
-export { Box } from './components/Box';
-export { Stack } from './components/Stack';
-export { Layout } from './components/Layout';
-export { Spacer } from './components/Spacer';
-export { Padder } from './components/Padder';
-export type { DebuggingMode, ConfigSchema } from './components/Config/Config';
-export type { GuideVariant, Spacing, SpacingProps } from './components/types';
-export type { BaselineProps } from './components/Baseline';
-export type { BoxProps } from './components/Box';
-export type { GuideProps } from './components/Guide';
-export type { LayoutProps } from './components/Layout';
-export type { StackProps } from './components/Stack';
-export type { IndicatorNode, SpacerProps } from './components/Spacer';
-export type { PadderProps } from './components/Padder';
-export { isSSR, safeClientValue } from './utils/ssr';
+type Spacing = number | [number, number] | {
+    start?: number;
+    end?: number;
+};
+type PaddingValue = number | [number, number] | [number, number, number] | [number, number, number, number] | {
+    top?: number;
+    bottom?: number;
+    left?: number;
+    right?: number;
+};
+type SpacingProps = {
+    padding?: PaddingValue;
+    block?: Spacing;
+    inline?: Spacing;
+};
+type GuideVariant = 'line' | 'pattern' | 'fixed' | 'auto';
+type GuideColumnValue = string | number | undefined | 'auto';
+type GuideColumnsPattern = readonly GuideColumnValue[];
+type Variant = 'line' | 'flat' | 'pattern';
+type BaselineVariant = Exclude<Variant, 'pattern'>;
+type SnappingMode = 'none' | 'height' | 'clamp';
+type DebuggingMode = 'none' | 'hidden' | 'visible';
+type BaseGuideConfig = {
+    gap?: number | string;
+    base?: number;
+};
+type PatternConfig = BaseGuideConfig & {
+    variant: 'pattern';
+    columns: GuideColumnsPattern;
+    columnWidth?: never;
+};
+type FixedConfig = BaseGuideConfig & {
+    variant: 'fixed';
+    columns: number;
+    columnWidth?: number | string;
+};
+type AutoConfig = BaseGuideConfig & {
+    variant: 'auto';
+    columnWidth: number | string;
+    columns?: never;
+};
+type LineConfig = BaseGuideConfig & {
+    variant?: 'line';
+    columns?: never;
+    columnWidth?: never;
+};
+type GuideConfig = PatternConfig | AutoConfig | FixedConfig | LineConfig;
+
+type DebugColors = {
+    line: string;
+    flat: string;
+    text: string;
+};
+type ConfigSchema = {
+    base: number;
+    baseline: {
+        variant: BaselineVariant;
+        debugging: DebuggingMode;
+        colors: Record<BaselineVariant, string>;
+    };
+    guide: {
+        variant: GuideVariant;
+        debugging: DebuggingMode;
+        colors: Record<GuideVariant, string>;
+    };
+    spacer: {
+        variant: Variant;
+        debugging: DebuggingMode;
+        colors: DebugColors;
+    };
+    box: {
+        debugging: DebuggingMode;
+        colors: DebugColors;
+    };
+    padder: {
+        debugging: DebuggingMode;
+        color: string;
+    };
+};
+
+type PartialColors<T> = T extends {
+    colors: infer Colors;
+} ? Omit<Partial<T>, 'colors'> & {
+    colors?: Partial<Colors>;
+} : Partial<T>;
+type ConfigOverrides = {
+    base?: number;
+    baseline?: PartialColors<ConfigSchema['baseline']>;
+    guide?: PartialColors<ConfigSchema['guide']>;
+    spacer?: PartialColors<ConfigSchema['spacer']>;
+    box?: PartialColors<ConfigSchema['box']>;
+    padder?: Partial<ConfigSchema['padder']>;
+};
+
+type ConfigProps = ConfigOverrides & {
+    children: React.ReactNode;
+};
+/**
+ * Configuration provider for baseline-kit components.
+ */
+declare function Config({ children, base, baseline, guide, spacer, box, padder, }: ConfigProps): React.JSX.Element;
+
+/**
+ * Common props shared across library components.
+ */
+type ComponentsProps = {
+    debugging?: DebuggingMode;
+    className?: string;
+    style?: React.CSSProperties;
+    height?: React.CSSProperties['height'];
+    width?: React.CSSProperties['width'];
+} & SpacingProps;
+
+type BaselineProps = {
+    variant?: BaselineVariant;
+    width?: number | string;
+    height?: number | string;
+    base?: number;
+    color?: string;
+    ssrMode?: boolean;
+} & ComponentsProps;
+declare const Baseline: React.MemoExoticComponent<({ className, debugging, style, variant: variantProp, height: heightProp, width: widthProp, base: baseProp, color: colorProp, ssrMode, ...spacingProps }: BaselineProps) => React.JSX.Element>;
+
+type GuideProps = {
+    align?: React.CSSProperties['justifyContent'];
+    variant?: GuideVariant;
+    columns?: number | readonly (string | number | undefined | 'auto')[];
+    columnWidth?: React.CSSProperties['width'];
+    maxWidth?: React.CSSProperties['maxWidth'];
+    color?: React.CSSProperties['color'];
+    children?: React.ReactNode;
+    gap?: number;
+    ssrMode?: boolean;
+} & ComponentsProps & Omit<GuideConfig, 'columns' | 'columnWidth' | 'gap'>;
+declare const Guide: React.MemoExoticComponent<({ className, debugging, style, variant: variantProp, align, gap: gapProp, height, width, columns, columnWidth, maxWidth, color, children, ssrMode, ...props }: GuideProps) => React.JSX.Element>;
+
+type BoxProps = {
+    colSpan?: number;
+    rowSpan?: number;
+    span?: number;
+    snapping?: SnappingMode;
+    ssrMode?: boolean;
+    children?: React.ReactNode;
+} & ComponentsProps;
+declare const Box: React.NamedExoticComponent<{
+    colSpan?: number;
+    rowSpan?: number;
+    span?: number;
+    snapping?: SnappingMode;
+    ssrMode?: boolean;
+    children?: React.ReactNode;
+} & {
+    debugging?: DebuggingMode;
+    className?: string;
+    style?: React.CSSProperties;
+    height?: React.CSSProperties["height"];
+    width?: React.CSSProperties["width"];
+} & SpacingProps & React.RefAttributes<HTMLDivElement>>;
+
+type IndicatorNode = (value: number, type: 'width' | 'height') => React.ReactNode;
+type SpacerProps = {
+    width?: React.CSSProperties['width'];
+    height?: React.CSSProperties['height'];
+    variant?: Variant;
+    color?: string;
+    base?: number;
+    children?: React.ReactNode;
+    indicatorNode?: IndicatorNode;
+    ssrMode?: boolean;
+} & ComponentsProps;
+declare const Spacer: React.MemoExoticComponent<({ height: heightProp, width: widthProp, indicatorNode, debugging: debuggingProp, variant: variantProp, base: baseProp, color: colorProp, className, style, children, ssrMode, ...props }: SpacerProps) => React.JSX.Element>;
+
+type PadderProps = {
+    indicatorNode?: IndicatorNode;
+    ssrMode?: boolean;
+    children?: React.ReactNode;
+} & ComponentsProps;
+declare const Padder: React.NamedExoticComponent<{
+    indicatorNode?: IndicatorNode;
+    ssrMode?: boolean;
+    children?: React.ReactNode;
+} & {
+    debugging?: DebuggingMode;
+    className?: string;
+    style?: React.CSSProperties;
+    height?: React.CSSProperties["height"];
+    width?: React.CSSProperties["width"];
+} & SpacingProps & React.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Detects if code is running in a server-side environment
+ */
+declare const isSSR: boolean;
+/**
+ * Safe window-using function that works in both server and client
+ */
+declare function safeClientValue<T>(clientFn: () => T, fallback: T): T;
+
+export { Baseline, Box, Config, Guide, Padder, Spacer, isSSR, safeClientValue };
+export type { BaselineProps, BaselineVariant, BoxProps, ConfigSchema, DebuggingMode, GuideProps, GuideVariant, IndicatorNode, PadderProps, PaddingValue, SnappingMode, SpacerProps, Spacing, SpacingProps, Variant };