@pitchfork-ui/react 0.7.0 → 0.8.0

package/dist/index.js

@@ -13,7 +13,9 @@ import { Icon, getAvailableIconNames, getCustomIconNames } from "./components/Ic
 import { Accordion } from "./components/Accordion/Accordion2.js";
 import { Alert } from "./components/Alert/Alert2.js";
 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 { BadgeGroup } from "./components/BadgeGroup/BadgeGroup2.js";
 import { ButtonGroup } from "./components/ButtonGroup/ButtonGroup2.js";
 import { Breadcrumbs } from "./components/Breadcrumbs/Breadcrumbs2.js";
@@ -26,12 +28,15 @@ 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 { Combobox } from "./components/Combobox/Combobox2.js";
 import { ContentDivider } from "./components/ContentDivider/ContentDivider2.js";
 import { DatePicker } from "./components/DatePicker/DatePicker2.js";
+import { DateRangePicker } from "./components/DateRangePicker/DateRangePicker2.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 { Kbd } from "./components/Kbd/Kbd2.js";
 import { GaugeChart } from "./components/GaugeChart/GaugeChart2.js";
 import { Heatmap } from "./components/Heatmap/Heatmap2.js";
 import { AreaChart, BarChart, LineChart } from "./components/LineBarCharts/LineBarChart2.js";
@@ -40,9 +45,11 @@ 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 { NumberInput } from "./components/NumberInput/NumberInput2.js";
 import { PageHeader, PageHeaderMeta } from "./components/PageHeader/PageHeader2.js";
 import { Pagination } from "./components/Pagination/Pagination2.js";
 import { PieChart } from "./components/PieChart/PieChart2.js";
+import { Popover } from "./components/Popover/Popover2.js";
 import { ProgressBar, ProgressCircle } from "./components/ProgressIndicators/ProgressIndicators2.js";
 import { ProgressSteps } from "./components/ProgressSteps/ProgressSteps2.js";
 import { RadarChart } from "./components/RadarChart/RadarChart2.js";
@@ -62,8 +69,9 @@ 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 { ToastProvider, toast, useToast } from "./components/Toast/Toast.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 };
+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 };

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

@@ -0,0 +1,14 @@
+import { AvatarProps, AvatarSize } from '../Avatar';
+export type AvatarGroupItem = Pick<AvatarProps, 'src' | 'alt' | 'name'>;
+export interface AvatarGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+    avatars: AvatarGroupItem[];
+    /** Max avatars to show before collapsing into a +N chip. Default 5. */
+    max?: number;
+    /** Size applied to every avatar in the group. Default `md`. */
+    size?: AvatarSize;
+    /** Explicit total to compute the overflow count (defaults to `avatars.length`). */
+    total?: number;
+    /** Accessible label for the group. */
+    label?: string;
+}
+export declare const AvatarGroup: import('react').ForwardRefExoticComponent<AvatarGroupProps & import('react').RefAttributes<HTMLDivElement>>;

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

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

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

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

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

@@ -0,0 +1,20 @@
+export interface ComboboxOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+export interface ComboboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'defaultValue' | 'onChange'> {
+    options: ComboboxOption[];
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    label?: string;
+    description?: string;
+    error?: string;
+    placeholder?: string;
+    /** Message shown when no options match the query. */
+    emptyMessage?: string;
+    name?: string;
+    required?: boolean;
+}
+export declare const Combobox: import('react').ForwardRefExoticComponent<ComboboxProps & import('react').RefAttributes<HTMLInputElement>>;

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

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

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

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

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

@@ -0,0 +1,18 @@
+export interface CommandItem {
+    id: string;
+    label: string;
+    description?: string;
+    icon?: React.ReactNode;
+    /** Grouping label — items with the same group name are visually grouped. */
+    group?: string;
+    disabled?: boolean;
+    onSelect: () => void;
+}
+export interface CommandPaletteProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    items: CommandItem[];
+    placeholder?: string;
+    emptyMessage?: string;
+}
+export declare function CommandPalette({ open, onOpenChange, items, placeholder, emptyMessage, }: CommandPaletteProps): import('react').ReactPortal | null;

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

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

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

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

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

@@ -0,0 +1,21 @@
+export interface DateRange {
+    start: Date | null;
+    end: Date | null;
+}
+export interface DateRangePickerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'defaultValue'> {
+    value?: DateRange;
+    defaultValue?: DateRange;
+    onValueChange?: (range: DateRange) => void;
+    label?: string;
+    description?: string;
+    error?: string;
+    startPlaceholder?: string;
+    endPlaceholder?: string;
+    required?: boolean;
+    disabled?: boolean;
+    disabledDates?: (date: Date) => boolean;
+    showOutsideDays?: boolean;
+    startYear?: number;
+    endYear?: number;
+}
+export declare const DateRangePicker: import('react').ForwardRefExoticComponent<DateRangePickerProps & import('react').RefAttributes<HTMLDivElement>>;

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

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

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

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

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

@@ -0,0 +1,9 @@
+export type KbdSize = 'sm' | 'md';
+export interface KbdProps extends React.HTMLAttributes<HTMLElement> {
+    /** Render a key combination joined into a single cap (e.g. `['⌘', 'K']`). */
+    keys?: string[];
+    size?: KbdSize;
+    /** Separator shown between keys in a combo. Default `+`. */
+    separator?: string;
+}
+export declare const Kbd: import('react').ForwardRefExoticComponent<KbdProps & import('react').RefAttributes<HTMLElement>>;

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

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

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

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

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

@@ -0,0 +1,19 @@
+export interface NumberInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'defaultValue' | 'onChange' | 'type' | 'min' | 'max' | 'step'> {
+    value?: number | null;
+    defaultValue?: number | null;
+    onValueChange?: (value: number | null) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    label?: string;
+    description?: string;
+    error?: string;
+    /** Intl.NumberFormat options applied to the value while the field is not focused. */
+    formatOptions?: Intl.NumberFormatOptions;
+    /** Locale(s) for formatting. Defaults to the runtime default. */
+    locale?: string | string[];
+    decrementLabel?: string;
+    incrementLabel?: string;
+    name?: string;
+}
+export declare const NumberInput: import('react').ForwardRefExoticComponent<NumberInputProps & import('react').RefAttributes<HTMLInputElement>>;

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

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

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

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

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

@@ -0,0 +1,21 @@
+import { ReactElement } from 'react';
+export interface PopoverProps {
+    /** The element the popover anchors to and toggles from (e.g. a Button). */
+    trigger: ReactElement;
+    children: React.ReactNode;
+    /** Controlled open state. */
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Horizontal alignment relative to the trigger. Default `start`. */
+    align?: 'start' | 'end';
+    /** Accessible label for the popover dialog. */
+    label?: string;
+    /** Close when clicking/tapping outside. Default true. */
+    closeOnOutsideClick?: boolean;
+    className?: string;
+}
+export declare function Popover({ trigger, children, open, defaultOpen, onOpenChange, align, label, closeOnOutsideClick, className, }: PopoverProps): import("react").JSX.Element;
+export declare namespace Popover {
+    var displayName: string;
+}

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

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

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

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

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

@@ -0,0 +1,35 @@
+import { NotificationPlacement, NotificationVariant } from '../Notification';
+export interface ToastOptions {
+    variant?: NotificationVariant;
+    heading?: React.ReactNode;
+    description?: React.ReactNode;
+    action?: React.ReactNode;
+    /** Auto-dismiss delay in ms. Pass `false` to keep until manually dismissed. Defaults to 4000. */
+    duration?: number | false;
+    /** Whether to show the X dismiss button. Defaults to true. */
+    dismissible?: boolean;
+}
+export interface ToastContextValue {
+    toast: (options: ToastOptions) => string;
+    dismiss: (id: string) => void;
+    dismissAll: () => void;
+}
+export interface ToastProviderProps {
+    children?: React.ReactNode;
+    placement?: NotificationPlacement;
+    /** Default auto-dismiss delay for all toasts. Defaults to 4000ms. */
+    defaultDuration?: number | false;
+}
+export declare function ToastProvider({ children, placement, defaultDuration, }: ToastProviderProps): import("react").JSX.Element;
+export declare function useToast(): ToastContextValue;
+/**
+ * Fire a toast imperatively from anywhere — no hook needed.
+ * Requires a `<ToastProvider>` to be mounted somewhere in the tree.
+ */
+export declare function toast(options: ToastOptions): string;
+export declare namespace toast {
+    var info: (opts: Omit<ToastOptions, "variant">) => string;
+    var success: (opts: Omit<ToastOptions, "variant">) => string;
+    var warning: (opts: Omit<ToastOptions, "variant">) => string;
+    var danger: (opts: Omit<ToastOptions, "variant">) => string;
+}

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

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

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

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

package/dist/src/index.d.ts

@@ -2,7 +2,9 @@ export * from './a11y';
 export * from './components/Accordion';
 export * from './components/Alert';
 export * from './components/Avatar';
+export * from './components/AvatarGroup';
 export * from './components/Button';
+export * from './components/CommandPalette';
 export * from './components/BadgeGroup';
 export * from './components/ButtonGroup';
 export * from './components/Breadcrumbs';
@@ -14,14 +16,17 @@ export * from './components/Checkbox';
 export * from './components/Calendar';
 export * from './components/Carousel';
 export * from './components/CodeSnippet';
+export * from './components/Combobox';
 export * from './components/ContentDivider';
 export * from './components/DatePicker';
+export * from './components/DateRangePicker';
 export * from './components/Dropdown';
 export * from './components/EmptyState';
 export * from './components/FileUploader';
 export * from './components/HeaderNavigation';
 export * from './components/Icon';
 export * from './components/InlineCTA';
+export * from './components/Kbd';
 export * from './components/GaugeChart';
 export * from './components/Heatmap';
 export * from './components/LineBarCharts';
@@ -30,9 +35,11 @@ export * from './components/Metrics';
 export * from './components/Modal';
 export * from './components/MultiSelect';
 export * from './components/Notification';
+export * from './components/NumberInput';
 export * from './components/PageHeader';
 export * from './components/Pagination';
 export * from './components/PieChart';
+export * from './components/Popover';
 export * from './components/ProgressIndicators';
 export * from './components/ProgressSteps';
 export * from './components/RadarChart';
@@ -52,6 +59,7 @@ export * from './components/Tag';
 export * from './components/Table';
 export * from './components/Tabs';
 export * from './components/Textarea';
+export * from './components/Toast';
 export * from './components/Tooltip';
 export * from './components/TreeView';
 export * from './components/UtilityButton';

package/dist/styles/theme.css

@@ -221,6 +221,39 @@
   --pf-select-option-active-bg: var(--color-semantic-action-primary);
   --pf-select-option-active-text: var(--color-semantic-action-primary-text);
 
+  /* Combobox aliases */
+  --pf-combobox-bg: var(--pf-input-bg);
+  --pf-combobox-border: var(--pf-input-border);
+  --pf-combobox-text: var(--pf-input-text);
+  --pf-combobox-placeholder: var(--pf-input-placeholder);
+  --pf-combobox-focus-border: var(--color-semantic-action-primary);
+  --pf-combobox-invalid-border: var(--color-semantic-status-danger-border);
+  --pf-combobox-menu-bg: var(--pf-surface-bg);
+  --pf-combobox-menu-border: var(--pf-surface-border-strong);
+  --pf-combobox-option-active-bg: var(--color-semantic-action-primary);
+  --pf-combobox-option-active-text: var(--color-semantic-action-primary-text);
+
+  /* Command palette aliases */
+  --pf-command-bg: var(--pf-surface-bg);
+  --pf-command-border: var(--pf-surface-border-strong);
+  --pf-command-text: var(--color-semantic-text-default);
+  --pf-command-text-muted: var(--color-semantic-text-muted);
+  --pf-command-shortcut-bg: var(--color-semantic-background-subtle);
+  --pf-command-item-active-bg: var(--color-semantic-action-primary);
+  --pf-command-item-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);
+  --pf-numberinput-text: var(--pf-input-text);
+  --pf-numberinput-placeholder: var(--pf-input-placeholder);
+  --pf-numberinput-focus-border: var(--color-semantic-action-primary);
+  --pf-numberinput-invalid-border: var(--color-semantic-status-danger-border);
+  --pf-numberinput-step-bg: var(--color-semantic-background-subtle);
+  --pf-numberinput-step-text: var(--color-semantic-text-default);
+  --pf-numberinput-step-hover-bg: var(--color-semantic-action-primary);
+  --pf-numberinput-step-hover-text: var(--color-semantic-action-primary-text);
+
   /* Overlay and elevation color aliases */
   --pf-overlay-backdrop: color-mix(in srgb, var(--color-gray-900) 48%, transparent);
   --pf-elevation-overlay-shadow: 0 24px 60px
@@ -372,6 +405,22 @@
   --pf-utility-btn-danger-text: var(--color-semantic-status-danger-foreground);
   --pf-utility-btn-danger-bg-hover: var(--color-danger-100);
 
+  /* Kbd aliases */
+  --pf-kbd-bg: var(--color-semantic-background-subtle);
+  --pf-kbd-border: var(--color-semantic-border-default);
+  --pf-kbd-text: var(--color-semantic-text-default);
+
+  /* Popover aliases */
+  --pf-popover-bg: var(--color-semantic-background-default);
+  --pf-popover-border: var(--color-semantic-border-default);
+  --pf-popover-text: var(--color-semantic-text-default);
+
+  /* AvatarGroup aliases */
+  --pf-avatar-group-ring: var(--color-semantic-background-default);
+  --pf-avatar-group-overflow-bg: var(--color-semantic-background-subtle);
+  /* default (not muted) text: muted on the subtle chip was only 4.34:1 in light */
+  --pf-avatar-group-overflow-text: var(--color-semantic-text-default);
+
   /* Accordion aliases */
   --pf-accordion-border: var(--color-semantic-border-default);
   --pf-accordion-trigger-text: var(--color-semantic-text-default);
@@ -484,6 +533,21 @@
   --pf-datepicker-focus-border: var(--color-semantic-action-primary);
   --pf-datepicker-invalid-border: var(--color-semantic-status-danger-border);
 
+  /* Date range picker aliases */
+  --pf-daterange-bg: var(--pf-datepicker-bg);
+  --pf-daterange-bg-subtle: var(--pf-datepicker-bg-subtle);
+  --pf-daterange-border: var(--pf-datepicker-border);
+  --pf-daterange-border-strong: var(--pf-datepicker-border-strong);
+  --pf-daterange-text: var(--pf-datepicker-text);
+  --pf-daterange-text-muted: var(--pf-datepicker-text-muted);
+  --pf-daterange-focus-ring: var(--pf-focus-ring);
+  --pf-daterange-invalid-border: var(--color-semantic-status-danger-border);
+  --pf-daterange-menu-bg: var(--pf-surface-bg);
+  --pf-daterange-menu-border: var(--pf-surface-border-strong);
+  /* brand-600 vs white popover = 6.25:1 non-text; white text on brand-600 = 6.25:1 text */
+  --pf-daterange-range-bg: var(--color-brand-600);
+  --pf-daterange-range-text: var(--color-base-white);
+
   /* BadgeGroup aliases */
   --pf-badgegroup-gray-100: var(--color-gray-100);
   --pf-badgegroup-gray-200: var(--color-gray-200);
@@ -760,6 +824,10 @@
   /* Calendar — same border-default contrast issue as TreeView */
   --pf-calendar-border: var(--color-semantic-border-strong);
 
+  /* Dark mode: brand-400 vs gray-800 = 4.08:1 non-text; gray-900 text on brand-400 = 5.58:1 text */
+  --pf-daterange-range-bg: var(--color-brand-400);
+  --pf-daterange-range-text: var(--color-gray-900);
+
   /* GaugeChart — track uses background-subtle (gray-700) which is 1.72:1 against gray-900 */
   --pf-gauge-track-color: var(--color-semantic-border-strong);