@voltstack/bravais 1.0.0 → 1.0.1

package/README.md

@@ -1,47 +1,3 @@
 # bravais
 
-The VOLT design-system primitives — the shared React visual language used across VoltLabs surfaces (VOLT, Console, Registry).
-
-## Install
-
-```bash
-npm i bravais
-```
-
-Peer dependencies (provided by the consuming app): `react`, `react-dom`, `react-router-dom`, `@floating-ui/react`, `lucide-react`, `recharts`, `framer-motion`.
-
-## Usage
-
-```tsx
-import { Stack, Row, Text, Heading, Button, TextInput, Card } from 'bravais';
-// Once, at your app root:
-import 'bravais/styles.css';      // design tokens + utility classes (REQUIRED)
-import 'bravais/components.css';   // per-component styles (REQUIRED)
-
-export const Example = () => (
-    <Card>
-        <Stack gap='1'>
-            <Heading level={2}>Title</Heading>
-            <Row gap='05'>
-                <TextInput placeholder='Name' aria-label='Name' />
-                <Button intent='brand'>Save</Button>
-            </Row>
-        </Stack>
-    </Card>
-);
-```
-
-Layout/typography primitives (`Box`/`Row`/`Stack`/`Grid`/`Text`/`Heading`) map style props to the utility classes shipped in `styles.css`, so that stylesheet is required.
-
-## Build
-
-```bash
-npm run build   # tsup -> dist/ (ESM + d.ts + CSS)
-```
-
-## Status & follow-ups (0.1.0)
-
-- **Self-contained:** the primitives, their internal helpers (cn, compose-refs, hooks, FloatingRootContext, types) and the token/utility stylesheets live under `src/`; the build has no dependency on VOLT's source.
-- VOLT still ships its own copy of these primitives under `client/src`. **Next step:** point VOLT (and Console/Registry) at this package and delete the in-app copy, so there's a single source of truth.
-- App-level wrappers (`AsyncMenuItemWrapper`, `ContextMenuPopover`) are intentionally **not exported** — they depend on the host app's error/toast system. Compose `Popover` + `PopoverMenu` with your own async/error handling.
-- Some primitives (`Card`, `Toast`, `Meter`, `ProgressBar`, `Menu`, `Checkbox`, `Radio`) are not yet exercised by VOLT itself; treat as provisional until adopted/visually verified.
+The VOLT design-system primitives.

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import react__default, { ElementType, HTMLAttributes, ReactNode, Ref, ReactElement, ButtonHTMLAttributes, MouseEventHandler, CSSProperties, InputHTMLAttributes, TextareaHTMLAttributes, ChangeEventHandler } from 'react';
+import react__default, { ElementType, HTMLAttributes, ReactNode, Ref, ReactElement, ButtonHTMLAttributes, MouseEventHandler, CSSProperties, InputHTMLAttributes, TextareaHTMLAttributes, ChangeEventHandler, RefObject } from 'react';
 import { Placement } from '@floating-ui/react';
 
 /**
@@ -1315,4 +1315,44 @@ interface VisuallyHiddenProps extends HTMLAttributes<HTMLElement> {
  */
 declare const VisuallyHidden: react.ForwardRefExoticComponent<VisuallyHiddenProps & react.RefAttributes<HTMLElement>>;
 
-export { type AlignItems, AsyncBoundary, type AsyncBoundaryProps, type AsyncBoundaryState, Avatar, AvatarStack, type AvatarUser, BOX_STYLE_KEYS, type BorderToken, Box, type BoxProps, type BoxStyleProps, type BreadcrumbItem, Breadcrumbs, type BreadcrumbsVariant, Button, type ButtonProps, Callout, type CalloutTone, CardWithSlots as Card, CardBody, type CardBodyProps, CardFooter, CardHeader, type CardPadding, type CardProps, type CardSlotProps, type CardVariant, Checkbox, type CheckboxProps, type CheckboxSize, CloseButton, _default as CollapsibleSection, type Column, type ControlSize, CursorTooltip, DashedActionBox, type DashedActionBoxProps, type DashedActionSize, type DashedActionTone, type Display, Divider, type DividerProps, EmptyState, type FlexDirection, type FlexToken, FloatingToolbar, type FloatingToolbarAlign, type FloatingToolbarPlacement, type FloatingToolbarProps, FormField, type FormFieldLayout, type FormFieldProps, type GapToken, Grid, type GridProps, Heading, type HeadingLevel, type HeadingProps, type HeightToken, IconButton, IconFrame, type IconFrameProps, type IconFrameShape, type IconFrameSize, type IconFrameTone, InlineStatus, type InlineStatusProps, type InlineStatusTone, type JustifyContent, KeyValueList, type KeyValueListProps, KeyValueRow, type KeyValueRowProps, LiquidToggle, ListRow, type ListRowProps, Loader, type MarginBottomToken, type MarginTopToken, type MarginXToken, Menu, type MenuItem, type MenuProps, type MenuTriggerRenderProp, Meter, type MeterProps, Modal, NumberInput, type NumberInputProps, type OverflowToken, type PaddingToken, type PaddingXToken, Popover, PopoverMenu, PopoverMenuItem, type PositionToken, ProgressBar, type ProgressBarProps, type ProgressBarSize, Radio, type RadioProps, type RadioSize, type RadiusToken, Row, type RowProps, STATUS_TONE_VARS, type SaveStatus, SaveStatusIndicator, type SaveStatusIndicatorProps, SearchInput, SectionLabel, type SectionLabelProps, type SegmentedTabOption, SegmentedTabs, Select, type SelectOption, type SelectProps, SelectableCard, type SelectableCardProps, type Shape, Skeleton, type SkeletonAnimation, type SkeletonProps, type SkeletonVariant, _default$1 as Slider, type SliderProps, Sparkline, type SparklineProps, Stack, type StackProps, StatCard, type StatCardProps, type StatCardState, type StatCardTone, StatusBadge, type StatusBadgeProps, StatusDot, type StatusDotTone, type StatusTone, type Step, type StepIndicator, type StepTitles, Stepper, Surface, type SurfaceProps, type SurfaceVariant, Tab, type TabProps, Table, TableSortDirection, Tabs, TabsList, type TabsListProps, TabsPanel, type TabsPanelProps, type TabsProps, type TabsSize, Tag, type TagProps, type TagShape, type TagSize, type TagTone, type TagVariant, Text, type TextAlign, TextInput, type TextInputProps, type TextProps, type TextSize, type TextTone, type TextWeight, Textarea, type TextareaProps, ThinkingDots, type ThinkingDotsProps, Timeline, TimelineItem, type TimelineItemProps, type TimelineProps, type TimelineTone, Toast, type ToastProps, type ToastTone, Tooltip, type TooltipPlacement, type TransitionToken, VisuallyHidden, type VisuallyHiddenProps, type WidthToken, buildBoxClasses, buildTypographyClasses, closeModal, openModal, resetModal, splitBoxProps };
+/** Subscribes to a CSS media query and returns whether it currently matches. */
+declare const useMedia: (query: string) => boolean;
+
+declare const usePrefersReducedMotion: () => boolean;
+
+interface UseStepperOptions<K extends string> {
+    steps: K[];
+}
+declare const useStepper: <K extends string>(initialStep: K, options?: UseStepperOptions<K>) => {
+    step: K;
+    goTo: (next: K) => void;
+    reset: () => void;
+    next: () => void;
+    prev: () => void;
+    currentIndex: number;
+    isFirst: boolean;
+    isLast: boolean;
+};
+
+interface UseInfiniteScrollOptions {
+    rootRef?: RefObject<HTMLElement | null> | null;
+    hasMore: boolean;
+    isFetchingMore: boolean;
+    onLoadMore?: () => void;
+}
+declare const useInfiniteScroll: ({ rootRef, hasMore, isFetchingMore, onLoadMore }: UseInfiniteScrollOptions) => {
+    sentinelRef: RefObject<HTMLDivElement | null>;
+};
+
+interface ShortcutOptions {
+    ctrl?: boolean;
+    meta?: boolean;
+    shift?: boolean;
+    alt?: boolean;
+    preventDefault?: boolean;
+    enabled?: boolean;
+    enableOnFormTags?: boolean;
+}
+declare const useKeyboardShortcut: (key: string, callback: () => void, options?: ShortcutOptions) => void;
+
+export { type AlignItems, AsyncBoundary, type AsyncBoundaryProps, type AsyncBoundaryState, Avatar, AvatarStack, type AvatarUser, BOX_STYLE_KEYS, type BorderToken, Box, type BoxProps, type BoxStyleProps, type BreadcrumbItem, Breadcrumbs, type BreadcrumbsVariant, Button, type ButtonProps, Callout, type CalloutTone, CardWithSlots as Card, CardBody, type CardBodyProps, CardFooter, CardHeader, type CardPadding, type CardProps, type CardSlotProps, type CardVariant, Checkbox, type CheckboxProps, type CheckboxSize, CloseButton, _default as CollapsibleSection, type Column, type ControlSize, CursorTooltip, DashedActionBox, type DashedActionBoxProps, type DashedActionSize, type DashedActionTone, type Display, Divider, type DividerProps, EmptyState, type FlexDirection, type FlexToken, FloatingToolbar, type FloatingToolbarAlign, type FloatingToolbarPlacement, type FloatingToolbarProps, FormField, type FormFieldLayout, type FormFieldProps, type GapToken, Grid, type GridProps, Heading, type HeadingLevel, type HeadingProps, type HeightToken, IconButton, IconFrame, type IconFrameProps, type IconFrameShape, type IconFrameSize, type IconFrameTone, InlineStatus, type InlineStatusProps, type InlineStatusTone, type JustifyContent, KeyValueList, type KeyValueListProps, KeyValueRow, type KeyValueRowProps, LiquidToggle, ListRow, type ListRowProps, Loader, type MarginBottomToken, type MarginTopToken, type MarginXToken, Menu, type MenuItem, type MenuProps, type MenuTriggerRenderProp, Meter, type MeterProps, Modal, NumberInput, type NumberInputProps, type OverflowToken, type PaddingToken, type PaddingXToken, Popover, PopoverMenu, PopoverMenuItem, type PositionToken, ProgressBar, type ProgressBarProps, type ProgressBarSize, Radio, type RadioProps, type RadioSize, type RadiusToken, Row, type RowProps, STATUS_TONE_VARS, type SaveStatus, SaveStatusIndicator, type SaveStatusIndicatorProps, SearchInput, SectionLabel, type SectionLabelProps, type SegmentedTabOption, SegmentedTabs, Select, type SelectOption, type SelectProps, SelectableCard, type SelectableCardProps, type Shape, Skeleton, type SkeletonAnimation, type SkeletonProps, type SkeletonVariant, _default$1 as Slider, type SliderProps, Sparkline, type SparklineProps, Stack, type StackProps, StatCard, type StatCardProps, type StatCardState, type StatCardTone, StatusBadge, type StatusBadgeProps, StatusDot, type StatusDotTone, type StatusTone, type Step, type StepIndicator, type StepTitles, Stepper, Surface, type SurfaceProps, type SurfaceVariant, Tab, type TabProps, Table, TableSortDirection, Tabs, TabsList, type TabsListProps, TabsPanel, type TabsPanelProps, type TabsProps, type TabsSize, Tag, type TagProps, type TagShape, type TagSize, type TagTone, type TagVariant, Text, type TextAlign, TextInput, type TextInputProps, type TextProps, type TextSize, type TextTone, type TextWeight, Textarea, type TextareaProps, ThinkingDots, type ThinkingDotsProps, Timeline, TimelineItem, type TimelineItemProps, type TimelineProps, type TimelineTone, Toast, type ToastProps, type ToastTone, Tooltip, type TooltipPlacement, type TransitionToken, VisuallyHidden, type VisuallyHiddenProps, type WidthToken, buildBoxClasses, buildTypographyClasses, closeModal, openModal, resetModal, splitBoxProps, useInfiniteScroll, useKeyboardShortcut, useMedia, usePrefersReducedMotion, useStepper };

package/dist/index.js

@@ -5,6 +5,7 @@ import { X, Search, Minus, Check, ChevronDown, AlertCircle, Plus, Copy, ChevronU
 import { useFloating, autoUpdate, offset, flip, shift, useClick, useDismiss, useRole, useListNavigation, useTypeahead, useInteractions, FloatingPortal, FloatingFocusManager, size, useHover, useFocus } from '@floating-ui/react';
 import { motion, AnimatePresence } from 'framer-motion';
 import { ResponsiveContainer, AreaChart, YAxis, Area } from 'recharts';
+import { useHotkeys } from 'react-hotkeys-hook';
 
 // src/shared/presentation/primitives/types.ts
 var STATUS_TONE_VARS = {
@@ -4711,7 +4712,92 @@ var VisuallyHidden = forwardRef(({
 });
 VisuallyHidden.displayName = "VisuallyHidden";
 var VisuallyHidden_default = VisuallyHidden;
+var useStepper = (initialStep, options) => {
+  const [step, setStep] = useState(initialStep);
+  const steps = options?.steps;
+  const goTo = useCallback((next2) => setStep(next2), []);
+  const reset = useCallback(() => setStep(initialStep), [initialStep]);
+  const currentIndex = useMemo(() => {
+    if (!steps) return -1;
+    return steps.indexOf(step);
+  }, [steps, step]);
+  const next = useCallback(() => {
+    if (!steps || currentIndex === -1 || currentIndex >= steps.length - 1) return;
+    setStep(steps[currentIndex + 1]);
+  }, [steps, currentIndex]);
+  const prev = useCallback(() => {
+    if (!steps || currentIndex <= 0) return;
+    setStep(steps[currentIndex - 1]);
+  }, [steps, currentIndex]);
+  const isFirst = currentIndex === 0;
+  const isLast = steps ? currentIndex === steps.length - 1 : false;
+  return { step, goTo, reset, next, prev, currentIndex, isFirst, isLast };
+};
+var use_stepper_default = useStepper;
+var useInfiniteScroll = ({ rootRef, hasMore, isFetchingMore, onLoadMore }) => {
+  const sentinelRef = useRef(null);
+  const hasMountedRef = useRef(false);
+  const onLoadMoreRef = useRef(onLoadMore);
+  useEffect(() => {
+    onLoadMoreRef.current = onLoadMore;
+  });
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      hasMountedRef.current = true;
+    }, 100);
+    return () => clearTimeout(timer);
+  }, []);
+  useEffect(() => {
+    const sentinel = sentinelRef.current;
+    if (!sentinel) return;
+    const root = rootRef ? rootRef.current : null;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        const entry = entries[0];
+        if (entry?.isIntersecting && hasMore && !isFetchingMore && hasMountedRef.current) {
+          onLoadMoreRef.current?.();
+        }
+      },
+      { root, rootMargin: "0px 0px 200px 0px", threshold: 0 }
+    );
+    observer.observe(sentinel);
+    return () => observer.disconnect();
+  }, [rootRef, hasMore, isFetchingMore]);
+  return { sentinelRef };
+};
+var use_infinite_scroll_default = useInfiniteScroll;
+var useKeyboardShortcut = (key, callback, options = {}) => {
+  const {
+    ctrl = false,
+    meta = false,
+    shift: shift5 = false,
+    alt = false,
+    preventDefault = true,
+    enabled = true,
+    enableOnFormTags = false
+  } = options;
+  const hotkey = useMemo(() => {
+    const parts = [];
+    if (ctrl) parts.push("ctrl");
+    if (meta) parts.push("meta");
+    if (shift5) parts.push("shift");
+    if (alt) parts.push("alt");
+    parts.push(key.toLowerCase());
+    return parts.join("+");
+  }, [alt, ctrl, key, meta, shift5]);
+  useHotkeys(
+    hotkey,
+    () => callback(),
+    {
+      enabled,
+      enableOnFormTags: enableOnFormTags ? ["INPUT", "TEXTAREA", "SELECT"] : false,
+      preventDefault
+    },
+    [callback]
+  );
+};
+var use_keyboard_shortcut_default = useKeyboardShortcut;
 
-export { AsyncBoundary_default as AsyncBoundary, Avatar_default as Avatar, AvatarStack_default as AvatarStack, BOX_STYLE_KEYS, Box_default as Box, Breadcrumbs_default as Breadcrumbs, Button_default as Button, Callout_default as Callout, Card_default as Card, CardBody, CardFooter, CardHeader, Checkbox_default as Checkbox, CloseButton_default as CloseButton, CollapsibleSection_default as CollapsibleSection, CursorTooltip_default as CursorTooltip, DashedActionBox_default as DashedActionBox, Divider_default as Divider, EmptyState_default as EmptyState, FloatingToolbar_default as FloatingToolbar, FormField_default as FormField, Grid_default as Grid, Heading_default as Heading, IconButton_default as IconButton, IconFrame_default as IconFrame, InlineStatus_default as InlineStatus, KeyValueList_default as KeyValueList, KeyValueRow, LiquidToggle_default as LiquidToggle, ListRow_default as ListRow, Loader_default as Loader, Menu_default as Menu, Meter_default as Meter, Modal_default as Modal, NumberInput_default as NumberInput, Popover_default as Popover, PopoverMenu_default as PopoverMenu, PopoverMenuItem_default as PopoverMenuItem, ProgressBar_default as ProgressBar, Radio_default as Radio, Row_default as Row, STATUS_TONE_VARS, SaveStatusIndicator_default as SaveStatusIndicator, SearchInput_default as SearchInput, SectionLabel_default as SectionLabel, SegmentedTabs_default as SegmentedTabs, Select_default as Select, SelectableCard_default as SelectableCard, Skeleton_default as Skeleton, Slider_default as Slider, Sparkline_default as Sparkline, Stack_default as Stack, StatCard_default as StatCard, StatusBadge_default as StatusBadge, StatusDot_default as StatusDot, Stepper_default as Stepper, Surface_default as Surface, Tab, Table_default as Table, TableSortDirection, Tabs_default as Tabs, TabsList, TabsPanel, Tag_default as Tag, Text_default as Text, TextInput_default as TextInput, Textarea_default as Textarea, ThinkingDots_default as ThinkingDots, Timeline_default as Timeline, TimelineItem, Toast_default as Toast, Tooltip_default as Tooltip, VisuallyHidden_default as VisuallyHidden, buildBoxClasses, buildTypographyClasses, closeModal, openModal, resetModal, splitBoxProps };
+export { AsyncBoundary_default as AsyncBoundary, Avatar_default as Avatar, AvatarStack_default as AvatarStack, BOX_STYLE_KEYS, Box_default as Box, Breadcrumbs_default as Breadcrumbs, Button_default as Button, Callout_default as Callout, Card_default as Card, CardBody, CardFooter, CardHeader, Checkbox_default as Checkbox, CloseButton_default as CloseButton, CollapsibleSection_default as CollapsibleSection, CursorTooltip_default as CursorTooltip, DashedActionBox_default as DashedActionBox, Divider_default as Divider, EmptyState_default as EmptyState, FloatingToolbar_default as FloatingToolbar, FormField_default as FormField, Grid_default as Grid, Heading_default as Heading, IconButton_default as IconButton, IconFrame_default as IconFrame, InlineStatus_default as InlineStatus, KeyValueList_default as KeyValueList, KeyValueRow, LiquidToggle_default as LiquidToggle, ListRow_default as ListRow, Loader_default as Loader, Menu_default as Menu, Meter_default as Meter, Modal_default as Modal, NumberInput_default as NumberInput, Popover_default as Popover, PopoverMenu_default as PopoverMenu, PopoverMenuItem_default as PopoverMenuItem, ProgressBar_default as ProgressBar, Radio_default as Radio, Row_default as Row, STATUS_TONE_VARS, SaveStatusIndicator_default as SaveStatusIndicator, SearchInput_default as SearchInput, SectionLabel_default as SectionLabel, SegmentedTabs_default as SegmentedTabs, Select_default as Select, SelectableCard_default as SelectableCard, Skeleton_default as Skeleton, Slider_default as Slider, Sparkline_default as Sparkline, Stack_default as Stack, StatCard_default as StatCard, StatusBadge_default as StatusBadge, StatusDot_default as StatusDot, Stepper_default as Stepper, Surface_default as Surface, Tab, Table_default as Table, TableSortDirection, Tabs_default as Tabs, TabsList, TabsPanel, Tag_default as Tag, Text_default as Text, TextInput_default as TextInput, Textarea_default as Textarea, ThinkingDots_default as ThinkingDots, Timeline_default as Timeline, TimelineItem, Toast_default as Toast, Tooltip_default as Tooltip, VisuallyHidden_default as VisuallyHidden, buildBoxClasses, buildTypographyClasses, closeModal, openModal, resetModal, splitBoxProps, use_infinite_scroll_default as useInfiniteScroll, use_keyboard_shortcut_default as useKeyboardShortcut, use_media_default as useMedia, usePrefersReducedMotion, use_stepper_default as useStepper };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map