@pitchfork-ui/react 0.1.9 → 0.6.0

package/dist/index.js

@@ -1,63 +1,69 @@
-/* empty css       */
-import { Keys, composeDescribedBy, getFocusableElements, isActivationKey } from "./index3.js";
-import { Icon, getAvailableIconNames, getCustomIconNames } from "./index6.js";
-import { Alert } from "./index8.js";
-import { Avatar } from "./index10.js";
-import { Button } from "./index12.js";
-import { BadgeGroup } from "./index14.js";
-import { ButtonGroup } from "./index16.js";
-import { Breadcrumbs } from "./index18.js";
-import { Input } from "./index21.js";
-import { Badge } from "./index23.js";
-import { Card, CardContent, CardFooter, CardHeader } from "./index25.js";
-import { CreditCard } from "./index27.js";
-import { Checkbox } from "./index29.js";
-import { useAnchoredPosition } from "./index30.js";
-import { useComposedRefs } from "./index31.js";
-import { useControllableState } from "./index32.js";
-import { useDisclosure } from "./index33.js";
-import { useFocusTrap } from "./index34.js";
-import { useListNavigation } from "./index35.js";
-import { useOutsideInteraction } from "./index36.js";
-import { Dropdown } from "./index38.js";
-import { Calendar } from "./index40.js";
-import { Carousel } from "./index42.js";
-import { CodeSnippet } from "./index46.js";
-import { ContentDivider } from "./index48.js";
-import { DatePicker } from "./index50.js";
-import { EmptyState } from "./index52.js";
-import { FileUploader } from "./index54.js";
-import { HeaderNavigation } from "./index56.js";
-import { InlineCTA } from "./index58.js";
-import { BarChart, LineChart } from "./index60.js";
-import { LoadingDots, LoadingSkeleton, LoadingSpinner } from "./index62.js";
-import { MetricCard, MetricGrid } from "./index64.js";
-import { Modal, ModalBody, ModalFooter, ModalHeader } from "./index66.js";
-import { MultiSelect } from "./index68.js";
-import { Notification, NotificationStack } from "./index70.js";
-import { PageHeader, PageHeaderMeta } from "./index72.js";
-import { Pagination } from "./index74.js";
-import { PieChart } from "./index76.js";
-import { ProgressBar, ProgressCircle } from "./index78.js";
-import { ProgressSteps } from "./index80.js";
-import { RadarChart } from "./index82.js";
-import { RadioButton } from "./index84.js";
-import { RadioGroup } from "./index86.js";
-import { RatingBadge, RatingStars } from "./index88.js";
-import { RichTextEditor } from "./index90.js";
-import { SectionFooter } from "./index92.js";
-import { SectionHeader } from "./index94.js";
-import { SidebarNavigation } from "./index96.js";
-import { SlideoutMenu } from "./index98.js";
-import { Switch } from "./index100.js";
-import { Select } from "./index102.js";
-import { Slider } from "./index104.js";
-import { Tag } from "./index106.js";
-import { Table } from "./index108.js";
-import { Tabs } from "./index110.js";
-import { Textarea } from "./index112.js";
-import { Tooltip } from "./index114.js";
-import { TreeView } from "./index116.js";
-import { UtilityButton } from "./index118.js";
-import { VideoPlayer } from "./index120.js";
-export { Alert, Avatar, Badge, BadgeGroup, BarChart, Breadcrumbs, Button, ButtonGroup, Calendar, Card, CardContent, CardFooter, CardHeader, Carousel, Checkbox, CodeSnippet, ContentDivider, CreditCard, DatePicker, Dropdown, EmptyState, FileUploader, 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, Switch, Table, Tabs, Tag, Textarea, Tooltip, TreeView, UtilityButton, VideoPlayer, composeDescribedBy, getAvailableIconNames, getCustomIconNames, getFocusableElements, isActivationKey, useAnchoredPosition, useComposedRefs, useControllableState, useDisclosure, useFocusTrap, useListNavigation, useOutsideInteraction };
+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";
+import { BadgeGroup } from "./components/BadgeGroup/BadgeGroup2.js";
+import { ButtonGroup } from "./components/ButtonGroup/ButtonGroup2.js";
+import { Breadcrumbs } from "./components/Breadcrumbs/Breadcrumbs2.js";
+import { Input } from "./components/Input/Input2.js";
+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 { Dropdown } from "./components/Dropdown/Dropdown2.js";
+import { Calendar } from "./components/Calendar/Calendar2.js";
+import { Carousel } from "./components/Carousel/Carousel2.js";
+import { CodeSnippet } from "./components/CodeSnippet/CodeSnippet2.js";
+import { ContentDivider } from "./components/ContentDivider/ContentDivider2.js";
+import { DatePicker } from "./components/DatePicker/DatePicker2.js";
+import { EmptyState } from "./components/EmptyState/EmptyState2.js";
+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";
+import { Modal, ModalBody, ModalFooter, ModalHeader } from "./components/Modal/Modal2.js";
+import { MultiSelect } from "./components/MultiSelect/MultiSelect2.js";
+import { Notification, NotificationStack } from "./components/Notification/Notification2.js";
+import { PageHeader, PageHeaderMeta } from "./components/PageHeader/PageHeader2.js";
+import { Pagination } from "./components/Pagination/Pagination2.js";
+import { PieChart } from "./components/PieChart/PieChart2.js";
+import { ProgressBar, ProgressCircle } from "./components/ProgressIndicators/ProgressIndicators2.js";
+import { ProgressSteps } from "./components/ProgressSteps/ProgressSteps2.js";
+import { RadarChart } from "./components/RadarChart/RadarChart2.js";
+import { RadioButton } from "./components/RadioButton/RadioButton2.js";
+import { RadioGroup } from "./components/RadioGroup/RadioGroup2.js";
+import { RatingBadge, RatingStars } from "./components/Rating/Rating2.js";
+import { RichTextEditor } from "./components/RichTextEditor/RichTextEditor2.js";
+import { SectionFooter } from "./components/SectionFooter/SectionFooter2.js";
+import { SectionHeader } from "./components/SectionHeader/SectionHeader2.js";
+import { SidebarNavigation } from "./components/SidebarNavigation/SidebarNavigation2.js";
+import { Sparkline } from "./components/Sparkline/Sparkline2.js";
+import { SlideoutMenu } from "./components/SlideoutMenu/SlideoutMenu2.js";
+import { Switch } from "./components/Switch/Switch2.js";
+import { Select } from "./components/Select/Select2.js";
+import { Slider } from "./components/Slider/Slider2.js";
+import { Tag } from "./components/Tag/Tag2.js";
+import { Table } from "./components/Table/Table2.js";
+import { Tabs } from "./components/Tabs/Tabs2.js";
+import { Textarea } from "./components/Textarea/Textarea2.js";
+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 { 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/GaugeChart/GaugeChart.d.ts

@@ -0,0 +1,17 @@
+export interface GaugeChartProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Current value */
+    value: number;
+    /** Maximum value. Defaults to 100. */
+    max?: number;
+    /** Label rendered in the center of the gauge. Defaults to the percentage string. */
+    centerLabel?: React.ReactNode;
+    /** Secondary label rendered below the center label */
+    subLabel?: React.ReactNode;
+    /** Diameter in pixels */
+    size?: number;
+    /** Arc stroke thickness in pixels */
+    strokeWidth?: number;
+    /** Override the filled arc color. Defaults to `--pf-gauge-color`. */
+    color?: string;
+}
+export declare const GaugeChart: import('react').ForwardRefExoticComponent<GaugeChartProps & import('react').RefAttributes<HTMLDivElement>>;

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

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

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

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

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/LineBarCharts/LineBarChart.d.ts

@@ -18,6 +18,8 @@ export interface LineChartProps extends React.HTMLAttributes<HTMLDivElement> {
     valueFormatter?: (value: number) => string;
 }
 export declare const LineChart: import('react').ForwardRefExoticComponent<LineChartProps & import('react').RefAttributes<HTMLDivElement>>;
+export type AreaChartProps = Omit<LineChartProps, 'area'>;
+export declare const AreaChart: import('react').ForwardRefExoticComponent<AreaChartProps & import('react').RefAttributes<HTMLDivElement>>;
 export interface BarChartProps extends React.HTMLAttributes<HTMLDivElement> {
     data: ChartDataPoint[];
     series: ChartSeries[];

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

@@ -0,0 +1,17 @@
+export type SparklineVariant = 'line' | 'area';
+export type SparklineTrend = 'up' | 'down' | 'neutral';
+export interface SparklineProps extends React.HTMLAttributes<SVGSVGElement> {
+    data: number[];
+    width?: number;
+    height?: number;
+    variant?: SparklineVariant;
+    strokeWidth?: number;
+    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;
+}
+export declare const Sparkline: import('react').ForwardRefExoticComponent<SparklineProps & import('react').RefAttributes<SVGSVGElement>>;

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

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

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

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

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';
@@ -21,6 +22,8 @@ export * from './components/FileUploader';
 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';
@@ -40,6 +43,7 @@ export * from './components/RichTextEditor';
 export * from './components/SectionFooter';
 export * from './components/SectionHeader';
 export * from './components/SidebarNavigation';
+export * from './components/Sparkline';
 export * from './components/SlideoutMenu';
 export * from './components/Switch';
 export * from './components/Select';