@pitchfork-ui/react 0.2.0 → 0.7.0

package/dist/index.js

@@ -1,6 +1,16 @@
 import './styles/theme.css';/* empty css             */
 import { Keys, composeDescribedBy, getFocusableElements, isActivationKey } from "./a11y/index.js";
+import { useAnchoredPosition } from "./hooks/useAnchoredPosition.js";
+import { useComposedRefs } from "./hooks/useComposedRefs.js";
+import { useControllableState } from "./hooks/useControllableState.js";
+import { useDisclosure } from "./hooks/useDisclosure.js";
+import { useExitAnimation } from "./hooks/useExitAnimation.js";
+import { useFocusTrap } from "./hooks/useFocusTrap.js";
+import { useListNavigation } from "./hooks/useListNavigation.js";
+import { useOutsideInteraction } from "./hooks/useOutsideInteraction.js";
+import { usePresence } from "./hooks/usePresence.js";
 import { Icon, getAvailableIconNames, getCustomIconNames } from "./components/Icon/Icon2.js";
+import { Accordion } from "./components/Accordion/Accordion2.js";
 import { Alert } from "./components/Alert/Alert2.js";
 import { Avatar } from "./components/Avatar/Avatar2.js";
 import { Button } from "./components/Button/Button2.js";
@@ -12,13 +22,6 @@ import { Badge } from "./components/Badge/Badge2.js";
 import { Card, CardContent, CardFooter, CardHeader } from "./components/Card/Card2.js";
 import { CreditCard } from "./components/CreditCard/CreditCard2.js";
 import { Checkbox } from "./components/Checkbox/Checkbox2.js";
-import { useAnchoredPosition } from "./hooks/useAnchoredPosition.js";
-import { useComposedRefs } from "./hooks/useComposedRefs.js";
-import { useControllableState } from "./hooks/useControllableState.js";
-import { useDisclosure } from "./hooks/useDisclosure.js";
-import { useFocusTrap } from "./hooks/useFocusTrap.js";
-import { useListNavigation } from "./hooks/useListNavigation.js";
-import { useOutsideInteraction } from "./hooks/useOutsideInteraction.js";
 import { Dropdown } from "./components/Dropdown/Dropdown2.js";
 import { Calendar } from "./components/Calendar/Calendar2.js";
 import { Carousel } from "./components/Carousel/Carousel2.js";
@@ -30,6 +33,7 @@ import { FileUploader } from "./components/FileUploader/FileUploader2.js";
 import { HeaderNavigation } from "./components/HeaderNavigation/HeaderNavigation2.js";
 import { InlineCTA } from "./components/InlineCTA/InlineCTA2.js";
 import { GaugeChart } from "./components/GaugeChart/GaugeChart2.js";
+import { Heatmap } from "./components/Heatmap/Heatmap2.js";
 import { AreaChart, BarChart, LineChart } from "./components/LineBarCharts/LineBarChart2.js";
 import { LoadingDots, LoadingSkeleton, LoadingSpinner } from "./components/LoadingIndicators/LoadingIndicators2.js";
 import { MetricCard, MetricGrid } from "./components/Metrics/Metrics2.js";
@@ -62,4 +66,4 @@ import { Tooltip } from "./components/Tooltip/Tooltip2.js";
 import { TreeView } from "./components/TreeView/TreeView2.js";
 import { UtilityButton } from "./components/UtilityButton/UtilityButton2.js";
 import { VideoPlayer } from "./components/VideoPlayer/VideoPlayer2.js";
-export { Alert, AreaChart, Avatar, Badge, BadgeGroup, BarChart, Breadcrumbs, Button, ButtonGroup, Calendar, Card, CardContent, CardFooter, CardHeader, Carousel, Checkbox, CodeSnippet, ContentDivider, CreditCard, DatePicker, Dropdown, EmptyState, FileUploader, GaugeChart, HeaderNavigation, Icon, InlineCTA, Input, Keys, LineChart, LoadingDots, LoadingSkeleton, LoadingSpinner, MetricCard, MetricGrid, Modal, ModalBody, ModalFooter, ModalHeader, MultiSelect, Notification, NotificationStack, PageHeader, PageHeaderMeta, Pagination, PieChart, ProgressBar, ProgressCircle, ProgressSteps, RadarChart, RadioButton, RadioGroup, RatingBadge, RatingStars, RichTextEditor, SectionFooter, SectionHeader, Select, SidebarNavigation, SlideoutMenu, Slider, Sparkline, Switch, Table, Tabs, Tag, Textarea, Tooltip, TreeView, UtilityButton, VideoPlayer, composeDescribedBy, getAvailableIconNames, getCustomIconNames, getFocusableElements, isActivationKey, useAnchoredPosition, useComposedRefs, useControllableState, useDisclosure, useFocusTrap, useListNavigation, useOutsideInteraction };
+export { Accordion, Alert, AreaChart, Avatar, Badge, BadgeGroup, BarChart, Breadcrumbs, Button, ButtonGroup, Calendar, Card, CardContent, CardFooter, CardHeader, Carousel, Checkbox, CodeSnippet, ContentDivider, CreditCard, DatePicker, Dropdown, EmptyState, FileUploader, GaugeChart, HeaderNavigation, Heatmap, Icon, InlineCTA, Input, Keys, LineChart, LoadingDots, LoadingSkeleton, LoadingSpinner, MetricCard, MetricGrid, Modal, ModalBody, ModalFooter, ModalHeader, MultiSelect, Notification, NotificationStack, PageHeader, PageHeaderMeta, Pagination, PieChart, ProgressBar, ProgressCircle, ProgressSteps, RadarChart, RadioButton, RadioGroup, RatingBadge, RatingStars, RichTextEditor, SectionFooter, SectionHeader, Select, SidebarNavigation, SlideoutMenu, Slider, Sparkline, Switch, Table, Tabs, Tag, Textarea, Tooltip, TreeView, UtilityButton, VideoPlayer, composeDescribedBy, getAvailableIconNames, getCustomIconNames, getFocusableElements, isActivationKey, useAnchoredPosition, useComposedRefs, useControllableState, useDisclosure, useExitAnimation, useFocusTrap, useListNavigation, useOutsideInteraction, usePresence };

package/dist/src/components/Accordion/Accordion.d.ts

@@ -0,0 +1,20 @@
+export type AccordionType = 'single' | 'multiple';
+export interface AccordionItemData {
+    value: string;
+    title: React.ReactNode;
+    content: React.ReactNode;
+    disabled?: boolean;
+}
+export interface AccordionProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> {
+    items: AccordionItemData[];
+    /** `single` collapses other panels when one opens; `multiple` allows many. Default `single`. */
+    type?: AccordionType;
+    /** Controlled list of expanded item values. */
+    value?: string[];
+    /** Initial expanded item values (uncontrolled). */
+    defaultValue?: string[];
+    onValueChange?: (value: string[]) => void;
+    /** Heading level for each item's header. Default 3. */
+    headingLevel?: 2 | 3 | 4 | 5 | 6;
+}
+export declare const Accordion: import('react').ForwardRefExoticComponent<AccordionProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/src/components/Accordion/Accordion.test.d.ts

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

package/dist/src/components/Accordion/index.d.ts

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

package/dist/src/components/Heatmap/Heatmap.d.ts

@@ -0,0 +1,28 @@
+export interface HeatmapDatum {
+    /** ISO date string, `YYYY-MM-DD` */
+    date: string;
+    value: number;
+}
+export interface HeatmapProps extends React.HTMLAttributes<HTMLDivElement> {
+    data: HeatmapDatum[];
+    /** First day to render (ISO). Defaults to the earliest date in `data`. */
+    startDate?: string;
+    /** Last day to render (ISO). Defaults to the latest date in `data`. */
+    endDate?: string;
+    /** Number of color buckets including the empty level. Defaults to 5. */
+    levels?: number;
+    /** 0 = Sunday, 1 = Monday. Defaults to 0. */
+    weekStartsOn?: 0 | 1;
+    /** Cell edge length in pixels. Defaults to 12. */
+    cellSize?: number;
+    /** Gap between cells in pixels. Defaults to 3. */
+    cellGap?: number;
+    showWeekdayLabels?: boolean;
+    showMonthLabels?: boolean;
+    /** Formats the native tooltip on each cell. */
+    valueFormatter?: (value: number, date: string) => string;
+    /** Accessible summary. Defaults to a generated description. */
+    label?: string;
+    emptyLabel?: React.ReactNode;
+}
+export declare const Heatmap: import('react').ForwardRefExoticComponent<HeatmapProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/src/components/Heatmap/Heatmap.test.d.ts

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

package/dist/src/components/Heatmap/index.d.ts

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

package/dist/src/components/InlineCTA/InlineCTA.d.ts

@@ -7,5 +7,7 @@ export interface InlineCTAProps extends React.HTMLAttributes<HTMLDivElement> {
     icon?: React.ReactNode;
     iconName?: IconName;
     tone?: InlineCTATone;
+    dismissible?: boolean;
+    onDismiss?: () => void;
 }
 export declare const InlineCTA: import('react').ForwardRefExoticComponent<InlineCTAProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/src/components/Sparkline/Sparkline.d.ts

@@ -9,6 +9,8 @@ export interface SparklineProps extends React.HTMLAttributes<SVGSVGElement> {
     color?: string;
     /** Show a dot at the last data point */
     endDot?: boolean;
+    /** Animate the line drawing in (and area fading in) on mount. Off by default. */
+    animate?: boolean;
     /** Accessible label for screen readers */
     label?: string;
 }

package/dist/src/hooks/index.d.ts

@@ -2,6 +2,8 @@ export * from './useAnchoredPosition';
 export * from './useComposedRefs';
 export * from './useControllableState';
 export * from './useDisclosure';
+export * from './useExitAnimation';
 export * from './useFocusTrap';
 export * from './useListNavigation';
 export * from './useOutsideInteraction';
+export * from './usePresence';

package/dist/src/hooks/useExitAnimation.d.ts

@@ -0,0 +1,18 @@
+export interface UseExitAnimationOptions {
+    /** Called once the exit animation has finished (or immediately if reduced motion). */
+    onExited?: () => void;
+    /** Exit animation duration in ms. Should match the CSS animation duration. Defaults to 220. */
+    duration?: number;
+}
+export interface UseExitAnimation {
+    /** True while the exit animation is playing — apply your `--exiting` class. */
+    isExiting: boolean;
+    /** Trigger the exit: plays the animation, then calls `onExited`. */
+    startExit: () => void;
+}
+/**
+ * Plays an exit animation before signalling removal. Apply `isExiting` to a CSS
+ * class that runs the exit keyframes; `onExited` fires after `duration`. When the
+ * user prefers reduced motion, `onExited` fires immediately with no animation.
+ */
+export declare function useExitAnimation({ onExited, duration, }?: UseExitAnimationOptions): UseExitAnimation;

package/dist/src/hooks/usePresence.d.ts

@@ -0,0 +1,13 @@
+export interface UsePresence {
+    /** Whether the element should be rendered (true while open and while exiting). */
+    isMounted: boolean;
+    /** True while the exit animation is playing — apply your `--exiting` class. */
+    isExiting: boolean;
+}
+/**
+ * Keeps a conditionally-rendered element mounted long enough to play an exit
+ * animation. Drive it with the `present` prop (e.g. a Modal's `open`): when it
+ * flips to false, the element stays mounted with `isExiting` true for `duration`
+ * ms, then unmounts. Reduced motion unmounts immediately.
+ */
+export declare function usePresence(present: boolean, duration?: number): UsePresence;

package/dist/src/index.d.ts

@@ -1,4 +1,5 @@
 export * from './a11y';
+export * from './components/Accordion';
 export * from './components/Alert';
 export * from './components/Avatar';
 export * from './components/Button';
@@ -22,6 +23,7 @@ export * from './components/HeaderNavigation';
 export * from './components/Icon';
 export * from './components/InlineCTA';
 export * from './components/GaugeChart';
+export * from './components/Heatmap';
 export * from './components/LineBarCharts';
 export * from './components/LoadingIndicators';
 export * from './components/Metrics';

package/dist/styles/theme.css

@@ -15,16 +15,16 @@
   --color-gray-700: #334155;
   --color-gray-800: #1e293b;
   --color-gray-900: #0f172a;
-  --color-brand-50: #eff6ff;
-  --color-brand-100: #dbeafe;
-  --color-brand-200: #bfdbfe;
-  --color-brand-300: #93c5fd;
-  --color-brand-400: #60a5fa;
-  --color-brand-500: #3b82f6;
-  --color-brand-600: #2563eb;
-  --color-brand-700: #1d4ed8;
-  --color-brand-800: #1e40af;
-  --color-brand-900: #1e3a8a;
+  --color-brand-50: #eef2ff;
+  --color-brand-100: #e0e7ff;
+  --color-brand-200: #c7d2fe;
+  --color-brand-300: #a5b4fc;
+  --color-brand-400: #818cf8;
+  --color-brand-500: #6366f1;
+  --color-brand-600: #4f46e5;
+  --color-brand-700: #4338ca;
+  --color-brand-800: #3730a3;
+  --color-brand-900: #312e81;
   --color-success-50: #ecfdf3;
   --color-success-100: #d1fadf;
   --color-success-200: #a6f4c5;
@@ -55,6 +55,12 @@
   --color-danger-700: #b42318;
   --color-danger-800: #912018;
   --color-danger-900: #7a271a;
+  --duration-fast: 120ms;
+  --duration-moderate: 180ms;
+  --duration-slow: 280ms;
+  --easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
+  --easing-decelerate: cubic-bezier(0, 0, 0.2, 1);
+  --easing-accelerate: cubic-bezier(0.4, 0, 1, 1);
   --shadow-sm: 0 1px 2px rgb(15 23 42 / 0.08);
   --shadow-md: 0 8px 24px rgb(15 23 42 / 0.12);
   --shadow-lg: 0 18px 48px rgb(15 23 42 / 0.16);
@@ -85,7 +91,7 @@
   --size-icon-sm: 1rem;
   --size-icon-md: 1.25rem;
   --size-icon-lg: 1.5rem;
-  --font-family-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  --font-family-sans: Geist, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
   --font-size-2xs: 0.6875rem;
   --font-size-xs: 0.75rem;
   --font-size-sm: 0.875rem;
@@ -148,8 +154,13 @@
   --pf-focus-ring: 0 0 0 var(--pf-focus-ring-width)
     color-mix(in srgb, var(--pf-focus-ring-color) 35%, transparent);
   --pf-focus-outline: var(--pf-focus-ring-width) solid var(--pf-focus-ring-color);
-  --pf-transition-fast: 120ms ease;
-  --pf-transition-medium: 180ms ease;
+  /* Motion — durations and easings come from Style Dictionary (--duration-*, --easing-*) */
+  --pf-transition-fast: var(--duration-fast) var(--easing-standard);
+  --pf-transition-medium: var(--duration-moderate) var(--easing-standard);
+  --pf-transition-slow: var(--duration-slow) var(--easing-standard);
+  /* Directional easings for enter/exit animations */
+  --pf-transition-enter: var(--duration-moderate) var(--easing-decelerate);
+  --pf-transition-exit: var(--duration-fast) var(--easing-accelerate);
 
   /* Control aliases */
   --pf-control-height-sm: var(--size-control-sm, 36px);
@@ -361,6 +372,19 @@
   --pf-utility-btn-danger-text: var(--color-semantic-status-danger-foreground);
   --pf-utility-btn-danger-bg-hover: var(--color-danger-100);
 
+  /* Accordion aliases */
+  --pf-accordion-border: var(--color-semantic-border-default);
+  --pf-accordion-trigger-text: var(--color-semantic-text-default);
+  --pf-accordion-trigger-bg-hover: var(--color-semantic-background-subtle);
+  --pf-accordion-icon: var(--color-semantic-text-muted);
+  --pf-accordion-content-text: var(--color-semantic-text-muted);
+
+  /* Heatmap aliases */
+  --pf-heatmap-color: var(--color-semantic-action-primary);
+  --pf-heatmap-empty: var(--color-semantic-background-subtle);
+  --pf-heatmap-label-color: var(--color-semantic-text-muted);
+  --pf-heatmap-cell-radius: var(--radius-sm);
+
   /* GaugeChart aliases */
   --pf-gauge-color: var(--color-semantic-action-primary);
   --pf-gauge-track-color: var(--color-semantic-background-subtle);
@@ -400,6 +424,9 @@
   --pf-notification-text: var(--color-semantic-text-default);
   --pf-notification-text-muted: var(--color-semantic-text-muted);
   --pf-notification-bg-subtle: var(--color-semantic-background-subtle);
+  /* Surface the variant tints blend toward; white in light, a dark raised
+     surface in dark so cards stay dark and text keeps contrast. */
+  --pf-notification-mix-base: var(--color-base-white);
   --pf-notification-info-bg: var(--color-brand-50);
   --pf-notification-info-border: var(--color-brand-300);
   --pf-notification-info-icon: var(--color-brand-700);
@@ -697,6 +724,7 @@
   --color-semantic-status-danger-bright: var(--color-danger-400);
 
   /* Info state overrides — light brand colors (brand-50/100/300) are invisible on dark surfaces */
+  --pf-notification-mix-base: var(--color-semantic-background-raised);
   --pf-notification-info-bg: var(--color-brand-900);
   --pf-notification-info-border: var(--color-brand-700);
   --pf-notification-info-icon: var(--color-brand-300);
@@ -735,6 +763,12 @@
   /* GaugeChart — track uses background-subtle (gray-700) which is 1.72:1 against gray-900 */
   --pf-gauge-track-color: var(--color-semantic-border-strong);
 
+  /* ProgressSteps — semantic success bg shades flip in dark mode, so the marker
+     numbers need opposite text colors to keep ≥4.5:1.
+     complete: white on success-700 = 5.4:1; current: success-900 on success-300 = 6.4:1 */
+  --pf-progress-steps-complete-text: var(--color-base-white);
+  --pf-progress-steps-current-text: var(--color-success-900);
+
   /* TreeView — border-default (gray-700) is 1.73:1 against gray-900, fails WCAG non-text contrast.
      border-strong (gray-500) gives 3.75:1. */
   --pf-treeview-border: var(--color-semantic-border-strong);