@prismiq/react 0.1.0

package/dist/accessibility-2yy5yqRR.d.cts

@@ -0,0 +1,145 @@
+import { RefObject } from 'react';
+
+/**
+ * Accessibility utilities for keyboard navigation and screen readers.
+ */
+
+interface FocusTrapOptions {
+    /** Whether the focus trap is active. */
+    active?: boolean;
+    /** Whether to focus the first focusable element when activated. */
+    autoFocus?: boolean;
+    /** Whether to restore focus when deactivated. */
+    restoreFocus?: boolean;
+    /** Called when Escape is pressed. */
+    onEscape?: () => void;
+}
+interface ArrowNavigationOptions {
+    /** Whether navigation wraps around at edges. */
+    wrap?: boolean;
+    /** Orientation for arrow key mapping. */
+    orientation?: 'horizontal' | 'vertical' | 'both';
+    /** Callback when active item changes. */
+    onActiveChange?: (index: number) => void;
+}
+interface UseFocusTrapResult {
+    /** Ref to attach to the container element. */
+    containerRef: RefObject<HTMLElement>;
+    /** Activate the focus trap. */
+    activate: () => void;
+    /** Deactivate the focus trap. */
+    deactivate: () => void;
+    /** Whether the trap is active. */
+    isActive: boolean;
+}
+interface UseArrowNavigationResult {
+    /** Current active index. */
+    activeIndex: number;
+    /** Set active index. */
+    setActiveIndex: (index: number) => void;
+    /** Key down handler to attach to container. */
+    onKeyDown: (event: React.KeyboardEvent) => void;
+    /** Get props for an item. */
+    getItemProps: (index: number) => {
+        tabIndex: number;
+        'aria-selected': boolean;
+        onFocus: () => void;
+    };
+}
+/**
+ * Hook to trap focus within a container.
+ *
+ * @param options - Focus trap options
+ * @returns Focus trap controls
+ *
+ * @example
+ * ```tsx
+ * function Modal({ isOpen, onClose }) {
+ *   const { containerRef, activate, deactivate } = useFocusTrap({
+ *     active: isOpen,
+ *     onEscape: onClose,
+ *   });
+ *
+ *   return (
+ *     <div ref={containerRef} role="dialog" aria-modal="true">
+ *       <button onClick={onClose}>Close</button>
+ *       <input type="text" />
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+declare function useFocusTrap(options?: FocusTrapOptions): UseFocusTrapResult;
+/**
+ * Hook for arrow key navigation through a list of items.
+ *
+ * @param itemCount - Number of items in the list
+ * @param options - Navigation options
+ * @returns Navigation state and handlers
+ *
+ * @example
+ * ```tsx
+ * function Menu({ items }) {
+ *   const { activeIndex, onKeyDown, getItemProps } = useArrowNavigation(items.length);
+ *
+ *   return (
+ *     <ul role="menu" onKeyDown={onKeyDown}>
+ *       {items.map((item, index) => (
+ *         <li key={index} role="menuitem" {...getItemProps(index)}>
+ *           {item}
+ *         </li>
+ *       ))}
+ *     </ul>
+ *   );
+ * }
+ * ```
+ */
+declare function useArrowNavigation(itemCount: number, options?: ArrowNavigationOptions): UseArrowNavigationResult;
+/**
+ * Announce a message to screen readers.
+ *
+ * @param message - The message to announce
+ * @param priority - Announcement priority ('polite' or 'assertive')
+ *
+ * @example
+ * ```tsx
+ * // Announce a status update
+ * announceToScreenReader('Results loaded: 42 items');
+ *
+ * // Urgent announcement
+ * announceToScreenReader('Error: Connection lost', 'assertive');
+ * ```
+ */
+declare function announceToScreenReader(message: string, priority?: 'polite' | 'assertive'): void;
+/**
+ * CSS for focus-visible styling.
+ * Add this to your global styles or use the useFocusVisible hook.
+ */
+declare const focusVisibleStyles = "\n  /* Hide focus outline for mouse users */\n  :focus:not(:focus-visible) {\n    outline: none;\n  }\n\n  /* Show focus outline for keyboard users */\n  :focus-visible {\n    outline: 2px solid var(--prismiq-color-primary);\n    outline-offset: 2px;\n  }\n\n  /* Prismiq focus ring class */\n  .prismiq-focus-ring:focus-visible {\n    outline: 2px solid var(--prismiq-color-primary);\n    outline-offset: 2px;\n    box-shadow: 0 0 0 4px rgba(var(--prismiq-color-primary-rgb), 0.2);\n  }\n";
+/**
+ * Hook to detect if focus is visible (keyboard navigation).
+ */
+declare function useFocusVisible(): boolean;
+/**
+ * Props for the skip link component.
+ */
+interface SkipLinkProps {
+    /** Target element ID to skip to. */
+    targetId: string;
+    /** Link text. */
+    children?: React.ReactNode;
+}
+/**
+ * Styles for skip link (visually hidden until focused).
+ */
+declare const skipLinkStyles: React.CSSProperties;
+declare const skipLinkFocusStyles: React.CSSProperties;
+/**
+ * Hook for implementing roving tabindex pattern.
+ *
+ * @param itemRefs - Refs to the focusable items
+ * @param options - Navigation options
+ */
+declare function useRovingTabIndex<T extends HTMLElement>(itemRefs: RefObject<T>[], options?: ArrowNavigationOptions): UseArrowNavigationResult;
+
+export { type ArrowNavigationOptions as A, type FocusTrapOptions as F, type SkipLinkProps as S, type UseFocusTrapResult as U, useArrowNavigation as a, useRovingTabIndex as b, useFocusVisible as c, announceToScreenReader as d, skipLinkFocusStyles as e, focusVisibleStyles as f, type UseArrowNavigationResult as g, skipLinkStyles as s, useFocusTrap as u };

package/dist/accessibility-2yy5yqRR.d.ts

@@ -0,0 +1,145 @@
+import { RefObject } from 'react';
+
+/**
+ * Accessibility utilities for keyboard navigation and screen readers.
+ */
+
+interface FocusTrapOptions {
+    /** Whether the focus trap is active. */
+    active?: boolean;
+    /** Whether to focus the first focusable element when activated. */
+    autoFocus?: boolean;
+    /** Whether to restore focus when deactivated. */
+    restoreFocus?: boolean;
+    /** Called when Escape is pressed. */
+    onEscape?: () => void;
+}
+interface ArrowNavigationOptions {
+    /** Whether navigation wraps around at edges. */
+    wrap?: boolean;
+    /** Orientation for arrow key mapping. */
+    orientation?: 'horizontal' | 'vertical' | 'both';
+    /** Callback when active item changes. */
+    onActiveChange?: (index: number) => void;
+}
+interface UseFocusTrapResult {
+    /** Ref to attach to the container element. */
+    containerRef: RefObject<HTMLElement>;
+    /** Activate the focus trap. */
+    activate: () => void;
+    /** Deactivate the focus trap. */
+    deactivate: () => void;
+    /** Whether the trap is active. */
+    isActive: boolean;
+}
+interface UseArrowNavigationResult {
+    /** Current active index. */
+    activeIndex: number;
+    /** Set active index. */
+    setActiveIndex: (index: number) => void;
+    /** Key down handler to attach to container. */
+    onKeyDown: (event: React.KeyboardEvent) => void;
+    /** Get props for an item. */
+    getItemProps: (index: number) => {
+        tabIndex: number;
+        'aria-selected': boolean;
+        onFocus: () => void;
+    };
+}
+/**
+ * Hook to trap focus within a container.
+ *
+ * @param options - Focus trap options
+ * @returns Focus trap controls
+ *
+ * @example
+ * ```tsx
+ * function Modal({ isOpen, onClose }) {
+ *   const { containerRef, activate, deactivate } = useFocusTrap({
+ *     active: isOpen,
+ *     onEscape: onClose,
+ *   });
+ *
+ *   return (
+ *     <div ref={containerRef} role="dialog" aria-modal="true">
+ *       <button onClick={onClose}>Close</button>
+ *       <input type="text" />
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+declare function useFocusTrap(options?: FocusTrapOptions): UseFocusTrapResult;
+/**
+ * Hook for arrow key navigation through a list of items.
+ *
+ * @param itemCount - Number of items in the list
+ * @param options - Navigation options
+ * @returns Navigation state and handlers
+ *
+ * @example
+ * ```tsx
+ * function Menu({ items }) {
+ *   const { activeIndex, onKeyDown, getItemProps } = useArrowNavigation(items.length);
+ *
+ *   return (
+ *     <ul role="menu" onKeyDown={onKeyDown}>
+ *       {items.map((item, index) => (
+ *         <li key={index} role="menuitem" {...getItemProps(index)}>
+ *           {item}
+ *         </li>
+ *       ))}
+ *     </ul>
+ *   );
+ * }
+ * ```
+ */
+declare function useArrowNavigation(itemCount: number, options?: ArrowNavigationOptions): UseArrowNavigationResult;
+/**
+ * Announce a message to screen readers.
+ *
+ * @param message - The message to announce
+ * @param priority - Announcement priority ('polite' or 'assertive')
+ *
+ * @example
+ * ```tsx
+ * // Announce a status update
+ * announceToScreenReader('Results loaded: 42 items');
+ *
+ * // Urgent announcement
+ * announceToScreenReader('Error: Connection lost', 'assertive');
+ * ```
+ */
+declare function announceToScreenReader(message: string, priority?: 'polite' | 'assertive'): void;
+/**
+ * CSS for focus-visible styling.
+ * Add this to your global styles or use the useFocusVisible hook.
+ */
+declare const focusVisibleStyles = "\n  /* Hide focus outline for mouse users */\n  :focus:not(:focus-visible) {\n    outline: none;\n  }\n\n  /* Show focus outline for keyboard users */\n  :focus-visible {\n    outline: 2px solid var(--prismiq-color-primary);\n    outline-offset: 2px;\n  }\n\n  /* Prismiq focus ring class */\n  .prismiq-focus-ring:focus-visible {\n    outline: 2px solid var(--prismiq-color-primary);\n    outline-offset: 2px;\n    box-shadow: 0 0 0 4px rgba(var(--prismiq-color-primary-rgb), 0.2);\n  }\n";
+/**
+ * Hook to detect if focus is visible (keyboard navigation).
+ */
+declare function useFocusVisible(): boolean;
+/**
+ * Props for the skip link component.
+ */
+interface SkipLinkProps {
+    /** Target element ID to skip to. */
+    targetId: string;
+    /** Link text. */
+    children?: React.ReactNode;
+}
+/**
+ * Styles for skip link (visually hidden until focused).
+ */
+declare const skipLinkStyles: React.CSSProperties;
+declare const skipLinkFocusStyles: React.CSSProperties;
+/**
+ * Hook for implementing roving tabindex pattern.
+ *
+ * @param itemRefs - Refs to the focusable items
+ * @param options - Navigation options
+ */
+declare function useRovingTabIndex<T extends HTMLElement>(itemRefs: RefObject<T>[], options?: ArrowNavigationOptions): UseArrowNavigationResult;
+
+export { type ArrowNavigationOptions as A, type FocusTrapOptions as F, type SkipLinkProps as S, type UseFocusTrapResult as U, useArrowNavigation as a, useRovingTabIndex as b, useFocusVisible as c, announceToScreenReader as d, skipLinkFocusStyles as e, focusVisibleStyles as f, type UseArrowNavigationResult as g, skipLinkStyles as s, useFocusTrap as u };

package/dist/charts/index.cjs

@@ -0,0 +1,110 @@
+'use strict';
+
+var chunkNK7HKX2J_cjs = require('../chunk-NK7HKX2J.cjs');
+require('../chunk-LMTG3LRC.cjs');
+require('../chunk-4AVL6GQK.cjs');
+
+
+
+Object.defineProperty(exports, "AreaChart", {
+  enumerable: true,
+  get: function () { return chunkNK7HKX2J_cjs.AreaChart; }
+});
+Object.defineProperty(exports, "BarChart", {
+  enumerable: true,
+  get: function () { return chunkNK7HKX2J_cjs.BarChart; }
+});
+Object.defineProperty(exports, "EChartWrapper", {
+  enumerable: true,
+  get: function () { return chunkNK7HKX2J_cjs.EChartWrapper; }
+});
+Object.defineProperty(exports, "LineChart", {
+  enumerable: true,
+  get: function () { return chunkNK7HKX2J_cjs.LineChart; }
+});
+Object.defineProperty(exports, "MetricCard", {
+  enumerable: true,
+  get: function () { return chunkNK7HKX2J_cjs.MetricCard; }
+});
+Object.defineProperty(exports, "PieChart", {
+  enumerable: true,
+  get: function () { return chunkNK7HKX2J_cjs.PieChart; }
+});
+Object.defineProperty(exports, "ScatterChart", {
+  enumerable: true,
+  get: function () { return chunkNK7HKX2J_cjs.ScatterChart; }
+});
+Object.defineProperty(exports, "Sparkline", {
+  enumerable: true,
+  get: function () { return chunkNK7HKX2J_cjs.Sparkline; }
+});
+Object.defineProperty(exports, "TrendIndicator", {
+  enumerable: true,
+  get: function () { return chunkNK7HKX2J_cjs.TrendIndicator; }
+});
+Object.defineProperty(exports, "adjustColorOpacity", {
+  enumerable: true,
+  get: function () { return chunkNK7HKX2J_cjs.adjustColorOpacity; }
+});
+Object.defineProperty(exports, "applyThemeToOption", {
+  enumerable: true,
+  get: function () { return chunkNK7HKX2J_cjs.applyThemeToOption; }
+});
+Object.defineProperty(exports, "createChartTheme", {
+  enumerable: true,
+  get: function () { return chunkNK7HKX2J_cjs.createChartTheme; }
+});
+Object.defineProperty(exports, "createEmptyStateGraphic", {
+  enumerable: true,
+  get: function () { return chunkNK7HKX2J_cjs.createEmptyStateGraphic; }
+});
+Object.defineProperty(exports, "createGradientColor", {
+  enumerable: true,
+  get: function () { return chunkNK7HKX2J_cjs.createGradientColor; }
+});
+Object.defineProperty(exports, "createMarkLines", {
+  enumerable: true,
+  get: function () { return chunkNK7HKX2J_cjs.createMarkLines; }
+});
+Object.defineProperty(exports, "dataPointsToChartData", {
+  enumerable: true,
+  get: function () { return chunkNK7HKX2J_cjs.dataPointsToChartData; }
+});
+Object.defineProperty(exports, "formatAxisLabel", {
+  enumerable: true,
+  get: function () { return chunkNK7HKX2J_cjs.formatAxisLabel; }
+});
+Object.defineProperty(exports, "formatCompact", {
+  enumerable: true,
+  get: function () { return chunkNK7HKX2J_cjs.formatCompact; }
+});
+Object.defineProperty(exports, "formatMetricValue", {
+  enumerable: true,
+  get: function () { return chunkNK7HKX2J_cjs.formatMetricValue; }
+});
+Object.defineProperty(exports, "getChartColors", {
+  enumerable: true,
+  get: function () { return chunkNK7HKX2J_cjs.getChartColors; }
+});
+Object.defineProperty(exports, "isChartDataEmpty", {
+  enumerable: true,
+  get: function () { return chunkNK7HKX2J_cjs.isChartDataEmpty; }
+});
+Object.defineProperty(exports, "isQueryResult", {
+  enumerable: true,
+  get: function () { return chunkNK7HKX2J_cjs.isQueryResult; }
+});
+Object.defineProperty(exports, "queryResultToChartData", {
+  enumerable: true,
+  get: function () { return chunkNK7HKX2J_cjs.queryResultToChartData; }
+});
+Object.defineProperty(exports, "suggestChartType", {
+  enumerable: true,
+  get: function () { return chunkNK7HKX2J_cjs.suggestChartType; }
+});
+Object.defineProperty(exports, "toChartData", {
+  enumerable: true,
+  get: function () { return chunkNK7HKX2J_cjs.toChartData; }
+});
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/charts/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.cjs"}

package/dist/charts/index.d.cts

@@ -0,0 +1,2 @@
+export { A as AreaChart, F as AreaChartProps, v as AxisFormat, B as BarChart, y as BarChartProps, r as BaseChartProps, u as ChartClickParams, C as ChartDataOptions, o as ChartDataPoint, b as ChartDataResult, p as ChartSeries, Q as ChartSuggestion, O as ChartType, E as EChartWrapper, x as EChartWrapperProps, w as LegendPosition, L as LineChart, z as LineChartProps, M as MetricCard, J as MetricCardProps, d as PieChart, G as PieChartProps, R as ReferenceLineConfig, e as ScatterChart, H as ScatterChartProps, S as Sparkline, N as SparklineProps, I as TrendConfig, c as TrendIndicator, K as TrendIndicatorProps, V as adjustColorOpacity, h as applyThemeToOption, g as createChartTheme, X as createEmptyStateGraphic, m as createGradientColor, W as createMarkLines, f as dataPointsToChartData, i as formatAxisLabel, j as formatCompact, k as formatMetricValue, l as getChartColors, n as isChartDataEmpty, U as isQueryResult, q as queryResultToChartData, s as suggestChartType, t as toChartData } from '../index-C-Qcuu4Y.cjs';
+import '../types-WrCbOeAV.cjs';

package/dist/charts/index.d.ts

@@ -0,0 +1,2 @@
+export { A as AreaChart, F as AreaChartProps, v as AxisFormat, B as BarChart, y as BarChartProps, r as BaseChartProps, u as ChartClickParams, C as ChartDataOptions, o as ChartDataPoint, b as ChartDataResult, p as ChartSeries, Q as ChartSuggestion, O as ChartType, E as EChartWrapper, x as EChartWrapperProps, w as LegendPosition, L as LineChart, z as LineChartProps, M as MetricCard, J as MetricCardProps, d as PieChart, G as PieChartProps, R as ReferenceLineConfig, e as ScatterChart, H as ScatterChartProps, S as Sparkline, N as SparklineProps, I as TrendConfig, c as TrendIndicator, K as TrendIndicatorProps, V as adjustColorOpacity, h as applyThemeToOption, g as createChartTheme, X as createEmptyStateGraphic, m as createGradientColor, W as createMarkLines, f as dataPointsToChartData, i as formatAxisLabel, j as formatCompact, k as formatMetricValue, l as getChartColors, n as isChartDataEmpty, U as isQueryResult, q as queryResultToChartData, s as suggestChartType, t as toChartData } from '../index-rPc7ijt8.js';
+import '../types-WrCbOeAV.js';

package/dist/charts/index.js

@@ -0,0 +1,5 @@
+export { AreaChart, BarChart, EChartWrapper, LineChart, MetricCard, PieChart, ScatterChart, Sparkline, TrendIndicator, adjustColorOpacity, applyThemeToOption, createChartTheme, createEmptyStateGraphic, createGradientColor, createMarkLines, dataPointsToChartData, formatAxisLabel, formatCompact, formatMetricValue, getChartColors, isChartDataEmpty, isQueryResult, queryResultToChartData, suggestChartType, toChartData } from '../chunk-2H5WTH4K.js';
+import '../chunk-T6STUE7E.js';
+import '../chunk-EX74SI67.js';
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/charts/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}