@pitchfork-ui/react 0.9.0 → 0.10.0

package/dist/index.js

@@ -17,6 +17,7 @@ import { Avatar } from "./components/Avatar/Avatar2.js";
 import { AvatarGroup } from "./components/AvatarGroup/AvatarGroup2.js";
 import { Button } from "./components/Button/Button2.js";
 import { CommandPalette } from "./components/CommandPalette/CommandPalette2.js";
+import { ContextMenu } from "./components/ContextMenu/ContextMenu2.js";
 import { BadgeGroup } from "./components/BadgeGroup/BadgeGroup2.js";
 import { ButtonGroup } from "./components/ButtonGroup/ButtonGroup2.js";
 import { Breadcrumbs } from "./components/Breadcrumbs/Breadcrumbs2.js";
@@ -29,6 +30,7 @@ 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 { Collapsible } from "./components/Collapsible/Collapsible2.js";
 import { Combobox } from "./components/Combobox/Combobox2.js";
 import { ContentDivider } from "./components/ContentDivider/ContentDivider2.js";
 import { DatePicker } from "./components/DatePicker/DatePicker2.js";
@@ -57,7 +59,9 @@ 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 { Resizable } from "./components/Resizable/Resizable2.js";
 import { RichTextEditor } from "./components/RichTextEditor/RichTextEditor2.js";
+import { ScrollArea } from "./components/ScrollArea/ScrollArea2.js";
 import { SectionFooter } from "./components/SectionFooter/SectionFooter2.js";
 import { SectionHeader } from "./components/SectionHeader/SectionHeader2.js";
 import { SidebarNavigation } from "./components/SidebarNavigation/SidebarNavigation2.js";
@@ -67,12 +71,17 @@ 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 { TagInput } from "./components/TagInput/TagInput2.js";
 import { Table } from "./components/Table/Table2.js";
 import { Tabs } from "./components/Tabs/Tabs2.js";
 import { Textarea } from "./components/Textarea/Textarea2.js";
+import { Timeline } from "./components/Timeline/Timeline2.js";
+import { TimePicker } from "./components/TimePicker/TimePicker2.js";
 import { ToastProvider, toast, useToast } from "./components/Toast/Toast.js";
+import { Toolbar, ToolbarSeparator } from "./components/Toolbar/Toolbar2.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, AvatarGroup, Badge, BadgeGroup, BarChart, Breadcrumbs, Button, ButtonGroup, Calendar, Card, CardContent, CardFooter, CardHeader, Carousel, Checkbox, CodeSnippet, Combobox, CommandPalette, ContentDivider, CreditCard, DatePicker, DateRangePicker, Dropdown, EmptyState, FileUploader, GaugeChart, HeaderNavigation, Heatmap, Icon, InlineCTA, Input, Kbd, Keys, LineChart, LoadingDots, LoadingSkeleton, LoadingSpinner, MetricCard, MetricGrid, Modal, ModalBody, ModalFooter, ModalHeader, MultiSelect, Notification, NotificationStack, NumberInput, PageHeader, PageHeaderMeta, Pagination, PieChart, Popover, ProgressBar, ProgressCircle, ProgressSteps, RadarChart, RadioButton, RadioGroup, RatingBadge, RatingStars, RichTextEditor, SectionFooter, SectionHeader, Select, SidebarNavigation, SlideoutMenu, Slider, Sparkline, Switch, Table, Tabs, Tag, Textarea, ToastProvider, Tooltip, TreeView, UtilityButton, VideoPlayer, composeDescribedBy, getAvailableIconNames, getCustomIconNames, getFocusableElements, isActivationKey, toast, useAnchoredPosition, useComposedRefs, useControllableState, useDisclosure, useExitAnimation, useFocusTrap, useListNavigation, useOutsideInteraction, usePresence, useToast };
+import { VisuallyHidden } from "./components/VisuallyHidden/VisuallyHidden2.js";
+export { Accordion, Alert, AreaChart, Avatar, AvatarGroup, Badge, BadgeGroup, BarChart, Breadcrumbs, Button, ButtonGroup, Calendar, Card, CardContent, CardFooter, CardHeader, Carousel, Checkbox, CodeSnippet, Collapsible, Combobox, CommandPalette, ContentDivider, ContextMenu, CreditCard, DatePicker, DateRangePicker, Dropdown, EmptyState, FileUploader, GaugeChart, HeaderNavigation, Heatmap, Icon, InlineCTA, Input, Kbd, Keys, LineChart, LoadingDots, LoadingSkeleton, LoadingSpinner, MetricCard, MetricGrid, Modal, ModalBody, ModalFooter, ModalHeader, MultiSelect, Notification, NotificationStack, NumberInput, PageHeader, PageHeaderMeta, Pagination, PieChart, Popover, ProgressBar, ProgressCircle, ProgressSteps, RadarChart, RadioButton, RadioGroup, RatingBadge, RatingStars, Resizable, RichTextEditor, ScrollArea, SectionFooter, SectionHeader, Select, SidebarNavigation, SlideoutMenu, Slider, Sparkline, Switch, Table, Tabs, Tag, TagInput, Textarea, TimePicker, Timeline, ToastProvider, Toolbar, ToolbarSeparator, Tooltip, TreeView, UtilityButton, VideoPlayer, VisuallyHidden, composeDescribedBy, getAvailableIconNames, getCustomIconNames, getFocusableElements, isActivationKey, toast, useAnchoredPosition, useComposedRefs, useControllableState, useDisclosure, useExitAnimation, useFocusTrap, useListNavigation, useOutsideInteraction, usePresence, useToast };

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

@@ -0,0 +1,11 @@
+export interface CollapsibleProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onToggle'> {
+    /** The clickable header content (text or rich nodes). */
+    trigger: React.ReactNode;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    disabled?: boolean;
+    /** Show the rotating chevron on the trigger. Defaults to true. */
+    showChevron?: boolean;
+}
+export declare const Collapsible: import('react').ForwardRefExoticComponent<CollapsibleProps & import('react').RefAttributes<HTMLDivElement>>;

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

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

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

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

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

@@ -0,0 +1,20 @@
+export interface ContextMenuItem {
+    id?: string;
+    label: string;
+    onSelect?: () => void;
+    icon?: React.ReactNode;
+    shortcut?: string;
+    disabled?: boolean;
+    destructive?: boolean;
+}
+export interface ContextMenuSeparator {
+    separator: true;
+}
+export type ContextMenuEntry = ContextMenuItem | ContextMenuSeparator;
+export interface ContextMenuProps extends React.HTMLAttributes<HTMLDivElement> {
+    items: ContextMenuEntry[];
+    /** Disable the menu entirely (right-click falls back to the native menu). */
+    disabled?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}
+export declare const ContextMenu: import('react').ForwardRefExoticComponent<ContextMenuProps & import('react').RefAttributes<HTMLDivElement>>;

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

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

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

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

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

@@ -0,0 +1,19 @@
+export type ResizableOrientation = 'horizontal' | 'vertical';
+export interface ResizableProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    /** `horizontal` = side-by-side panels (drag left/right). `vertical` = stacked (drag up/down). */
+    orientation?: ResizableOrientation;
+    /** Size of the first panel as a percentage (0–100). */
+    size?: number;
+    defaultSize?: number;
+    onSizeChange?: (size: number) => void;
+    /** Min/max size of the first panel, in percent. */
+    min?: number;
+    max?: number;
+    /** Keyboard resize increment, in percent. Defaults to 2. */
+    step?: number;
+    /** Accessible name for the resize handle. */
+    handleLabel?: string;
+    /** Exactly two children: the first and second panels. */
+    children: React.ReactNode;
+}
+export declare const Resizable: import('react').ForwardRefExoticComponent<ResizableProps & import('react').RefAttributes<HTMLDivElement>>;

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

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

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

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

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

@@ -0,0 +1,12 @@
+export type ScrollAreaOrientation = 'vertical' | 'horizontal' | 'both';
+export interface ScrollAreaProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Which axis scrolls. Defaults to `'vertical'`. */
+    orientation?: ScrollAreaOrientation;
+    /**
+     * Make the region keyboard-focusable so users can scroll it with the arrow
+     * keys (WCAG 2.1.1). Defaults to true. Set false if a focusable child already
+     * provides keyboard access.
+     */
+    focusable?: boolean;
+}
+export declare const ScrollArea: import('react').ForwardRefExoticComponent<ScrollAreaProps & import('react').RefAttributes<HTMLDivElement>>;

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

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

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

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

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

@@ -0,0 +1,23 @@
+import { TagVariant } from '../Tag';
+export interface TagInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'defaultValue' | 'onChange'> {
+    value?: string[];
+    defaultValue?: string[];
+    onValueChange?: (tags: string[]) => void;
+    label?: string;
+    description?: string;
+    error?: string;
+    placeholder?: string;
+    /** Maximum number of tags. Adding is blocked once reached. */
+    max?: number;
+    /** Allow the same tag more than once. Defaults to false (deduped, case-insensitive). */
+    allowDuplicates?: boolean;
+    /** Keys that commit the current draft as a tag. Defaults to Enter and comma. */
+    delimiters?: string[];
+    /** Reject a candidate tag (return false to block). Trimmed value is passed. */
+    validate?: (tag: string) => boolean;
+    /** Visual variant for the rendered tags. */
+    tagVariant?: TagVariant;
+    name?: string;
+    required?: boolean;
+}
+export declare const TagInput: import('react').ForwardRefExoticComponent<TagInputProps & import('react').RefAttributes<HTMLInputElement>>;

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

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

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

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

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

@@ -0,0 +1,18 @@
+export type HourCycle = 12 | 24;
+export interface TimePickerProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'value' | 'defaultValue' | 'onChange'> {
+    /** Canonical 24-hour value `"HH:mm"` (e.g. `"14:30"`), or `""` when unset. */
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    /** 12- or 24-hour display. Defaults to 24. The value is always canonical 24h. */
+    hourCycle?: HourCycle;
+    /** Granularity of the minutes column. Defaults to 1. */
+    minuteStep?: number;
+    label?: string;
+    description?: string;
+    error?: string;
+    placeholder?: string;
+    required?: boolean;
+    name?: string;
+}
+export declare const TimePicker: import('react').ForwardRefExoticComponent<TimePickerProps & import('react').RefAttributes<HTMLButtonElement>>;

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

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

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

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

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

@@ -0,0 +1,16 @@
+export type TimelineTone = 'default' | 'success' | 'warning' | 'danger';
+export interface TimelineItem {
+    id?: string;
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    /** Short timestamp / meta text shown alongside the title. */
+    timestamp?: React.ReactNode;
+    /** Optional icon rendered inside the marker (replaces the default dot). */
+    icon?: React.ReactNode;
+    /** Marker colour. Defaults to `'default'` (brand). */
+    tone?: TimelineTone;
+}
+export interface TimelineProps extends React.HTMLAttributes<HTMLOListElement> {
+    items: TimelineItem[];
+}
+export declare const Timeline: import('react').ForwardRefExoticComponent<TimelineProps & import('react').RefAttributes<HTMLOListElement>>;

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

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

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

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

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

@@ -0,0 +1,8 @@
+export type ToolbarOrientation = 'horizontal' | 'vertical';
+export interface ToolbarProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Layout + arrow-key axis. Defaults to `'horizontal'`. */
+    orientation?: ToolbarOrientation;
+}
+export declare const Toolbar: import('react').ForwardRefExoticComponent<ToolbarProps & import('react').RefAttributes<HTMLDivElement>>;
+export type ToolbarSeparatorProps = React.HTMLAttributes<HTMLSpanElement>;
+export declare const ToolbarSeparator: import('react').ForwardRefExoticComponent<ToolbarSeparatorProps & import('react').RefAttributes<HTMLSpanElement>>;

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

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

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

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

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

@@ -0,0 +1,15 @@
+export interface VisuallyHiddenProps extends React.HTMLAttributes<HTMLElement> {
+    /** Element to render. Defaults to `span`. */
+    as?: 'span' | 'div' | 'p' | 'label' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    /**
+     * Reveal the content when it (or a descendant) receives keyboard focus —
+     * the classic "skip link" pattern. Defaults to false.
+     */
+    focusable?: boolean;
+}
+/**
+ * Hides content visually while keeping it available to screen readers and other
+ * assistive technology. Use for labels, instructions, and status text that are
+ * implied visually but need to be announced.
+ */
+export declare const VisuallyHidden: import('react').ForwardRefExoticComponent<VisuallyHiddenProps & import('react').RefAttributes<HTMLElement>>;

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

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

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

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

package/dist/src/index.d.ts

@@ -5,6 +5,7 @@ export * from './components/Avatar';
 export * from './components/AvatarGroup';
 export * from './components/Button';
 export * from './components/CommandPalette';
+export * from './components/ContextMenu';
 export * from './components/BadgeGroup';
 export * from './components/ButtonGroup';
 export * from './components/Breadcrumbs';
@@ -16,6 +17,7 @@ export * from './components/Checkbox';
 export * from './components/Calendar';
 export * from './components/Carousel';
 export * from './components/CodeSnippet';
+export * from './components/Collapsible';
 export * from './components/Combobox';
 export * from './components/ContentDivider';
 export * from './components/DatePicker';
@@ -46,7 +48,9 @@ export * from './components/RadarChart';
 export * from './components/RadioButton';
 export * from './components/RadioGroup';
 export * from './components/Rating';
+export * from './components/Resizable';
 export * from './components/RichTextEditor';
+export * from './components/ScrollArea';
 export * from './components/SectionFooter';
 export * from './components/SectionHeader';
 export * from './components/SidebarNavigation';
@@ -56,12 +60,17 @@ export * from './components/Switch';
 export * from './components/Select';
 export * from './components/Slider';
 export * from './components/Tag';
+export * from './components/TagInput';
 export * from './components/Table';
 export * from './components/Tabs';
 export * from './components/Textarea';
+export * from './components/Timeline';
+export * from './components/TimePicker';
 export * from './components/Toast';
+export * from './components/Toolbar';
 export * from './components/Tooltip';
 export * from './components/TreeView';
 export * from './components/UtilityButton';
 export * from './components/VideoPlayer';
+export * from './components/VisuallyHidden';
 export * from './hooks';

package/dist/styles/theme.css

@@ -242,6 +242,46 @@
   --pf-command-item-active-bg: var(--color-semantic-action-primary);
   --pf-command-item-active-text: var(--color-semantic-action-primary-text);
 
+  /* Timeline aliases */
+  --pf-timeline-connector: var(--color-semantic-border-default);
+  --pf-timeline-title: var(--color-semantic-text-default);
+  --pf-timeline-timestamp: var(--color-semantic-text-muted);
+  --pf-timeline-description: var(--color-semantic-text-muted);
+  --pf-timeline-default-bg: var(--color-brand-100);
+  --pf-timeline-default-border: var(--color-semantic-action-primary);
+  --pf-timeline-default-icon: var(--color-semantic-action-primary);
+  --pf-timeline-success-bg: var(--color-semantic-status-success-background);
+  --pf-timeline-success-border: var(--color-semantic-status-success-foreground);
+  --pf-timeline-success-icon: var(--color-semantic-status-success-foreground);
+  --pf-timeline-warning-bg: var(--color-semantic-status-warning-background);
+  --pf-timeline-warning-border: var(--color-semantic-status-warning-foreground);
+  --pf-timeline-warning-icon: var(--color-semantic-status-warning-foreground);
+  --pf-timeline-danger-bg: var(--color-semantic-status-danger-background);
+  --pf-timeline-danger-border: var(--color-semantic-status-danger-foreground);
+  --pf-timeline-danger-icon: var(--color-semantic-status-danger-foreground);
+
+  /* Tag input aliases */
+  --pf-taginput-bg: var(--pf-input-bg);
+  --pf-taginput-border: var(--pf-input-border);
+  --pf-taginput-text: var(--pf-input-text);
+  --pf-taginput-placeholder: var(--pf-input-placeholder);
+  --pf-taginput-focus-border: var(--color-semantic-action-primary);
+  --pf-taginput-invalid-border: var(--color-semantic-status-danger-border);
+
+  /* Time picker aliases */
+  --pf-timepicker-bg: var(--pf-input-bg);
+  --pf-timepicker-border: var(--pf-input-border);
+  --pf-timepicker-text: var(--pf-input-text);
+  --pf-timepicker-text-muted: var(--pf-input-placeholder);
+  --pf-timepicker-placeholder: var(--pf-input-placeholder);
+  --pf-timepicker-focus-border: var(--color-semantic-action-primary);
+  --pf-timepicker-invalid-border: var(--color-semantic-status-danger-border);
+  --pf-timepicker-menu-bg: var(--pf-surface-bg);
+  --pf-timepicker-menu-border: var(--pf-surface-border-strong);
+  --pf-timepicker-option-hover-bg: var(--color-semantic-background-subtle);
+  --pf-timepicker-option-active-bg: var(--color-semantic-action-primary);
+  --pf-timepicker-option-active-text: var(--color-semantic-action-primary-text);
+
   /* Number input aliases */
   --pf-numberinput-bg: var(--pf-input-bg);
   --pf-numberinput-border: var(--pf-input-border);
@@ -428,6 +468,40 @@
   --pf-accordion-icon: var(--color-semantic-text-muted);
   --pf-accordion-content-text: var(--color-semantic-text-muted);
 
+  /* Context menu aliases */
+  --pf-contextmenu-bg: var(--pf-surface-bg);
+  --pf-contextmenu-border: var(--pf-surface-border-strong);
+  --pf-contextmenu-text: var(--color-semantic-text-default);
+  --pf-contextmenu-text-muted: var(--color-semantic-text-muted);
+  --pf-contextmenu-text-danger: var(--color-semantic-status-danger-foreground);
+  --pf-contextmenu-separator: var(--color-semantic-border-default);
+  --pf-contextmenu-item-active-bg: var(--color-semantic-action-primary);
+  --pf-contextmenu-item-active-text: var(--color-semantic-action-primary-text);
+  /* Solid red works on both themes; white text = 4.83:1 */
+  --pf-contextmenu-danger-active-bg: var(--color-danger-600);
+  --pf-contextmenu-danger-active-text: var(--color-base-white);
+
+  /* Resizable aliases */
+  --pf-resizable-handle-bg: var(--color-semantic-border-default);
+  --pf-resizable-handle-active-bg: var(--color-semantic-action-primary);
+  --pf-resizable-grip: var(--color-semantic-text-muted);
+
+  /* Toolbar aliases */
+  --pf-toolbar-bg: var(--color-semantic-background-default);
+  --pf-toolbar-border: var(--color-semantic-border-default);
+  --pf-toolbar-separator: var(--color-semantic-border-default);
+
+  /* Scroll area aliases */
+  --pf-scrollarea-thumb: var(--color-semantic-border-strong);
+  --pf-scrollarea-thumb-hover: var(--color-semantic-text-muted);
+
+  /* Collapsible aliases */
+  --pf-collapsible-border: var(--color-semantic-border-default);
+  --pf-collapsible-trigger-text: var(--color-semantic-text-default);
+  --pf-collapsible-trigger-hover-bg: var(--color-semantic-background-subtle);
+  --pf-collapsible-icon: var(--color-semantic-text-muted);
+  --pf-collapsible-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);
@@ -809,6 +883,9 @@
   --pf-badge-brand-background: var(--color-brand-900);
   --pf-badge-brand-foreground: var(--color-brand-300);
 
+  /* Timeline — brand-100 default marker fill is near-white; darken for dark mode */
+  --pf-timeline-default-bg: var(--color-brand-900);
+
   --pf-badgegroup-brand-100: var(--color-brand-900);
   --pf-badgegroup-brand-300: var(--color-brand-700);
   --pf-badgegroup-brand-700: var(--color-brand-300);