eidotter 0.6.0 → 0.10.0

package/dist/components/Button/components/Button.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import '../../../styles/keyframes.css';
 import './Button.css';
 export interface ButtonProps {
     /**

package/dist/components/Checkbox/components/Checkbox.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import '../../../styles/keyframes.css';
 import './Checkbox.css';
 export interface CheckboxProps {
     /**

package/dist/components/InlineExpand/components/InlineExpand.d.ts

@@ -0,0 +1,58 @@
+import React from 'react';
+import './InlineExpand.css';
+export interface InlineExpandSource {
+    /** Link text displayed as accessible label */
+    title: string;
+    /** URL — must be a valid absolute URL (http, https, or mailto) */
+    url: string;
+    /** Optional favicon URL; falls back to generic link icon */
+    favicon?: string;
+}
+export interface InlineExpandProps {
+    /**
+     * Trigger text or element displayed inline — the clickable toggle
+     */
+    children: React.ReactNode;
+    /**
+     * Content revealed when expanded — accepts ReactNode for composability
+     */
+    content: React.ReactNode;
+    /**
+     * Whether the content is expanded on first render (uncontrolled mode)
+     */
+    defaultExpanded?: boolean;
+    /**
+     * Controlled expanded state — overrides internal state when provided
+     */
+    expanded?: boolean;
+    /**
+     * Called when the expand/collapse state changes
+     */
+    onToggle?: (isExpanded: boolean) => void;
+    /**
+     * Optional citation sources rendered after expanded content
+     */
+    sources?: InlineExpandSource[];
+    /**
+     * Additional CSS class names
+     */
+    className?: string;
+}
+/**
+ * Inline disclosure widget that reveals content when trigger text is clicked.
+ *
+ * Unlike Section/Accordion (block-level, bordered sections), InlineExpand is
+ * designed for inline use within paragraphs and prose content.
+ *
+ * Features:
+ * - Controlled and uncontrolled modes
+ * - Native <button> trigger for full keyboard/screen reader support
+ * - Optional citation sources with favicons
+ * - DOS-authentic styling with phosphor glow and CGA tokens
+ * - WCAG 2.1 AA compliant
+ *
+ * Content stays in the DOM when collapsed (with visibility: hidden) to enable
+ * smooth CSS transition exit animations. This differs from Section which
+ * unmounts content on collapse via conditional rendering.
+ */
+export declare const InlineExpand: React.FC<InlineExpandProps>;

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

@@ -0,0 +1,2 @@
+export { InlineExpand } from './InlineExpand';
+export type { InlineExpandProps, InlineExpandSource } from './InlineExpand';

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

@@ -0,0 +1,2 @@
+export { InlineExpand } from './components';
+export type { InlineExpandProps, InlineExpandSource } from './components';

package/dist/components/Stat/components/Stat.d.ts

@@ -21,6 +21,10 @@ export interface StatProps {
      * Size variant
      */
     size?: 'small' | 'medium' | 'large';
+    /**
+     * Whether to animate value changes with a text scramble effect
+     */
+    scramble?: boolean;
     /**
      * Optional CSS class name
      */

package/dist/components/Tag/components/Tag.d.ts

@@ -0,0 +1,41 @@
+import React from 'react';
+import './Tag.css';
+export interface TagProps {
+    /** Tag display text */
+    children: React.ReactNode;
+    /** Visual variant */
+    variant?: 'default' | 'outlined' | 'filled';
+    /** The size of the tag */
+    size?: 'small' | 'medium';
+    /** CGA color token for border and text (e.g. '--color-cga-bright-cyan') */
+    color?: string;
+    /** Whether the tag appears in selected/active state */
+    selected?: boolean;
+    /** Whether to show a close button */
+    closeable?: boolean;
+    /** Whether the tag is disabled */
+    disabled?: boolean;
+    /** Click handler for the tag body */
+    onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+    /** Close handler, called after dismiss animation completes */
+    onClose?: () => void;
+    /** Additional CSS class name */
+    className?: string;
+    /** Accessible label for the tag */
+    'aria-label'?: string;
+}
+/**
+ * DOS-styled Tag component for interactive labels
+ *
+ * Extends Badge's display-only approach with click, close, and selection
+ * behaviors. Use for content labels, category indicators, and filter chips.
+ *
+ * Features:
+ * - Three visual variants (default, outlined, filled)
+ * - Optional close button with DOS-authentic [x]
+ * - Toggle-able selected state
+ * - Custom CGA color support via CSS custom property
+ * - Keyboard accessible (Enter/Space to click, Delete/Backspace to close)
+ * - WCAG 2.1 AA compliant
+ */
+export declare const Tag: React.FC<TagProps>;

package/dist/components/Tag/components/TagGroup.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+export interface TagGroupProps {
+    /** Tag elements to render */
+    children: React.ReactNode;
+    /** Spacing between tags */
+    gap?: 'tight' | 'normal' | 'loose';
+    /** Wrap tags to multiple lines (default true) */
+    wrap?: boolean;
+    /** Additional CSS class name */
+    className?: string;
+    /** Accessible label for the tag group */
+    'aria-label'?: string;
+}
+/**
+ * Wrapper for rendering multiple Tag components with consistent spacing
+ *
+ * Provides flex layout with configurable gap and optional wrapping.
+ */
+export declare const TagGroup: React.FC<TagGroupProps>;

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

@@ -0,0 +1,4 @@
+export { Tag } from './Tag';
+export type { TagProps } from './Tag';
+export { TagGroup } from './TagGroup';
+export type { TagGroupProps } from './TagGroup';

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

@@ -0,0 +1,2 @@
+export { Tag, TagGroup } from './components';
+export type { TagProps, TagGroupProps } from './components';

package/dist/components/TextScramble/components/TextScramble.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import './TextScramble.css';
+export interface TextScrambleProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'children'> {
+    /** The text to display with scramble effect */
+    children: string;
+    /** Milliseconds per character position (default: 40) */
+    speed?: number;
+    /** Character set to use for scramble effect */
+    characters?: string;
+    /** Milliseconds before scramble starts (default: 0) */
+    delay?: number;
+}
+export declare const TextScramble: React.FC<TextScrambleProps>;

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

@@ -0,0 +1,2 @@
+export { TextScramble } from './TextScramble';
+export type { TextScrambleProps } from './TextScramble';

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

@@ -0,0 +1 @@
+export * from './components';

package/dist/components/TimelineContainer/components/TimelineAxis.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import './TimelineAxis.css';
+export interface TimelineAxisProps {
+    children: React.ReactNode;
+}
+/**
+ * Vertical spine connecting timeline nodes.
+ * Wraps content with a continuous vertical line on the left side.
+ */
+export declare const TimelineAxis: React.FC<TimelineAxisProps>;

package/dist/components/TimelineContainer/components/TimelineContainer.d.ts

@@ -0,0 +1,57 @@
+import React from 'react';
+import type { TimelineEntry, ZoomLevel } from './types';
+import './TimelineContainer.css';
+import './views/views.css';
+export interface TimelineContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Timeline entries to display */
+    entries: TimelineEntry[];
+    /**
+     * Controlled zoom level — overrides internal state when provided.
+     * Use with `onZoomChange` for full control.
+     */
+    zoomLevel?: ZoomLevel;
+    /**
+     * Initial zoom level for uncontrolled mode
+     * @default 'month'
+     */
+    defaultZoomLevel?: ZoomLevel;
+    /** Callback fired when the zoom level changes */
+    onZoomChange?: (level: ZoomLevel) => void;
+    /**
+     * Controlled selection — overrides internal state when provided.
+     * `null` means nothing selected, `undefined` means uncontrolled.
+     */
+    selectedEntryId?: string | null;
+    /**
+     * Initial selected entry for uncontrolled mode
+     * @default null
+     */
+    defaultSelectedEntryId?: string | null;
+    /** Callback fired when entry selection changes */
+    onSelectEntry?: (entryId: string | null) => void;
+    /**
+     * Sort order for entries within buckets
+     * @default 'desc'
+     */
+    sortOrder?: 'asc' | 'desc';
+    /**
+     * Enable Ctrl/Cmd + scroll wheel to zoom
+     * @default true
+     */
+    scrollToZoom?: boolean;
+    /**
+     * Enable keyboard shortcuts (Ctrl+=/-/0, Escape)
+     * @default true
+     */
+    keyboardShortcuts?: boolean;
+}
+/**
+ * TimelineContainer - Interactive multi-level zoom timeline
+ *
+ * A composite timeline component with 4 zoom levels (year, month, day, hour),
+ * entry selection, keyboard shortcuts, and scroll-to-zoom. Uses DOS/CGA
+ * aesthetic with eidotter primitives (TimelineNode, Card, Badge, Tag).
+ *
+ * Supports both controlled and uncontrolled patterns for zoom and selection.
+ */
+export declare const TimelineContainer: React.FC<TimelineContainerProps>;

package/dist/components/TimelineContainer/components/TimelineContent.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { ZoomLevel, DateBucket } from './types';
+export interface TimelineContentProps {
+    zoomLevel: ZoomLevel;
+    buckets: readonly DateBucket[];
+    selectedEntryId: string | null;
+    onEntrySelect?: (entryId: string) => void;
+    onBucketClick?: (bucket: DateBucket) => void;
+}
+/**
+ * View switcher that renders the appropriate zoom level view.
+ */
+export declare const TimelineContent: React.FC<TimelineContentProps>;

package/dist/components/TimelineContainer/components/TimelineEntryCard.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import type { TimelineEntry } from './types';
+export interface TimelineEntryCardProps {
+    entry: TimelineEntry;
+    isSelected: boolean;
+    onSelect?: (id: string) => void;
+    footer?: React.ReactNode;
+    children: React.ReactNode;
+}
+/**
+ * Memoized entry card wrapper. On selection change, only 2 cards re-render
+ * (previously selected + newly selected) instead of all N.
+ */
+export declare const TimelineEntryCard: React.NamedExoticComponent<TimelineEntryCardProps>;

package/dist/components/TimelineContainer/components/ZoomControls.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { ZoomLevel } from './types';
+import './ZoomControls.css';
+export interface ZoomControlsProps {
+    zoomLevel: ZoomLevel;
+    canZoomIn: boolean;
+    canZoomOut: boolean;
+    onZoomIn: () => void;
+    onZoomOut: () => void;
+    onReset: () => void;
+}
+export declare const ZoomControls: React.FC<ZoomControlsProps>;

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

@@ -0,0 +1,4 @@
+export { TimelineContainer } from './TimelineContainer';
+export type { TimelineContainerProps } from './TimelineContainer';
+export { ZOOM_LEVELS } from './types';
+export type { TimelineEntry, DateBucket, ZoomLevel } from './types';

package/dist/components/TimelineContainer/components/timelineUtils.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Timeline utility functions for grouping entries and formatting dates.
+ * Pure functions with zero external dependencies — uses only native Date/Intl.
+ */
+import type { TimelineEntry, DateBucket, ZoomLevel } from './types';
+/** Format a full timestamp: "Mar 15, 2024 at 2:30pm" */
+export declare function formatTimestamp(iso: string): string;
+/**
+ * Group timeline entries into DateBuckets based on the current zoom level.
+ */
+export declare function groupEntriesByZoom(entries: TimelineEntry[], zoomLevel: ZoomLevel, sortOrder?: 'asc' | 'desc'): DateBucket[];

package/dist/components/TimelineContainer/components/timelineUtils.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/TimelineContainer/components/types.d.ts

@@ -0,0 +1,42 @@
+/**
+ * Shared type definitions for TimelineContainer.
+ * Extracted to a separate file to avoid circular imports between
+ * the component, hooks, and view sub-components.
+ */
+/** Ordered zoom levels from least to most detail */
+export declare const ZOOM_LEVELS: readonly ["year", "month", "day", "hour"];
+/** Timeline zoom level */
+export type ZoomLevel = (typeof ZOOM_LEVELS)[number];
+export interface TimelineEntry {
+    /** Unique identifier for this entry */
+    id: string;
+    /** Entry category — not rendered by default; available for consumer-side filtering/styling. Consider discriminated union if type-specific fields are added. */
+    type: 'event' | 'project' | 'milestone';
+    /** ISO 8601 date string */
+    date: string;
+    /** Display title */
+    title: string;
+    /** Entry body content */
+    content: string;
+    /** Categorization tags */
+    tags: string[];
+}
+export interface DateBucket {
+    /** Human-readable label, e.g. "2024", "March 2024", "Mar 15" */
+    label: string;
+    /** ISO 8601 period start for sorting */
+    periodStart: string;
+    /** Entries grouped into this time bucket */
+    entries: readonly TimelineEntry[];
+}
+/** Shared props interface for zoom-level view components */
+export interface TimelineViewProps {
+    /** Grouped entry buckets to display */
+    buckets: readonly DateBucket[];
+    /** Callback when an entry is selected */
+    onEntrySelect?: (id: string) => void;
+    /** Currently selected entry ID */
+    selectedEntryId?: string | null;
+    /** Callback when a bucket header is clicked (for drill-down) */
+    onBucketClick?: (bucket: DateBucket) => void;
+}

package/dist/components/TimelineContainer/components/useSelection.d.ts

@@ -0,0 +1,15 @@
+export interface UseSelectionOptions {
+    selectedEntryId?: string | null;
+    defaultSelectedEntryId?: string | null;
+    onSelectEntry?: (entryId: string | null) => void;
+}
+export interface UseSelectionReturn {
+    selectedEntryId: string | null;
+    select: (entryId: string) => void;
+    deselect: () => void;
+    toggle: (entryId: string) => void;
+}
+/**
+ * Manages entry selection with controlled/uncontrolled pattern.
+ */
+export declare function useSelection({ selectedEntryId: controlledId, defaultSelectedEntryId, onSelectEntry, }?: UseSelectionOptions): UseSelectionReturn;

package/dist/components/TimelineContainer/components/useSelection.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/TimelineContainer/components/useZoom.d.ts

@@ -0,0 +1,19 @@
+import type { ZoomLevel } from './types';
+export interface UseZoomOptions {
+    zoomLevel?: ZoomLevel;
+    defaultZoomLevel?: ZoomLevel;
+    onZoomChange?: (level: ZoomLevel) => void;
+}
+export interface UseZoomReturn {
+    zoomLevel: ZoomLevel;
+    zoomIn: () => void;
+    zoomOut: () => void;
+    reset: () => void;
+    canZoomIn: boolean;
+    canZoomOut: boolean;
+}
+/**
+ * Manages zoom level with controlled/uncontrolled pattern.
+ * Zoom "in" means more detail (year -> month -> day -> hour).
+ */
+export declare function useZoom({ zoomLevel: controlledLevel, defaultZoomLevel, onZoomChange, }?: UseZoomOptions): UseZoomReturn;

package/dist/components/TimelineContainer/components/useZoom.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/TimelineContainer/components/views/DayView.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { TimelineViewProps } from '../types';
+/**
+ * Day-level zoom view: shows day labels with entry cards and content preview.
+ */
+export declare const DayView: React.NamedExoticComponent<TimelineViewProps>;

package/dist/components/TimelineContainer/components/views/HourView.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { TimelineViewProps } from '../types';
+/**
+ * Hour-level zoom view: full detail with timestamps and complete content.
+ */
+export declare const HourView: React.NamedExoticComponent<TimelineViewProps>;

package/dist/components/TimelineContainer/components/views/MonthView.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { TimelineViewProps } from '../types';
+/**
+ * Month-level zoom view: shows month labels with entry title lists.
+ */
+export declare const MonthView: React.NamedExoticComponent<TimelineViewProps>;

package/dist/components/TimelineContainer/components/views/YearView.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { TimelineViewProps } from '../types';
+/**
+ * Year-level zoom view: shows year labels with entry counts per year.
+ */
+export declare const YearView: React.NamedExoticComponent<TimelineViewProps>;

package/dist/components/TimelineContainer/components/views/index.d.ts

@@ -0,0 +1,4 @@
+export { YearView } from './YearView';
+export { MonthView } from './MonthView';
+export { DayView } from './DayView';
+export { HourView } from './HourView';

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

@@ -0,0 +1,3 @@
+export { TimelineContainer } from './components';
+export type { TimelineContainerProps, TimelineEntry, DateBucket, ZoomLevel } from './components';
+export { ZOOM_LEVELS } from './components';