canny-ui-react 1.0.0 → 2.0.0

package/dist/components/Alert/Alert.types.d.ts

@@ -5,4 +5,12 @@ export interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'
     solid?: boolean;
     title?: ReactNode;
     children?: ReactNode;
+    /** Custom icon node. Pass `false` to hide the default icon. */
+    icon?: ReactNode | false;
+    /** Inline action slot — a button or link rendered on the right. */
+    action?: ReactNode;
+    /** When provided, renders a close button that invokes this callback. */
+    onDismiss?: () => void;
+    /** Accessible label for the dismiss button. */
+    dismissLabel?: string;
 }

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

@@ -0,0 +1,31 @@
+import type { CommandPaletteProps, CommandPaletteTriggerProps, UseCommandPaletteOptions, UseCommandPaletteReturn } from './CommandPalette.types';
+/**
+ * Hook that manages open state and binds the ⌘K / Ctrl+K hotkey.
+ * Pass `{ hotkey: false }` to opt out and wire your own toggle.
+ */
+export declare function useCommandPalette({ hotkey }?: UseCommandPaletteOptions): UseCommandPaletteReturn;
+/**
+ * Command palette — keyboard-driven search overlay built on cmdk + Radix Dialog.
+ * Render once near the root of your app; use `useCommandPalette()` (or your own
+ * state) to control `open`.
+ *
+ * @example
+ * const { open, setOpen } = useCommandPalette();
+ * <CommandPalette
+ *   open={open}
+ *   onOpenChange={setOpen}
+ *   sections={[
+ *     { title: 'Pages', items: [{ id: '/', label: 'Home', href: '/' }] },
+ *   ]}
+ *   onItemSelect={(item) => item.href && router.push(item.href)}
+ * />
+ */
+export declare function CommandPalette({ open, onOpenChange, sections, placeholder, title, description, emptyText, footer, onItemSelect, contentClassName, }: CommandPaletteProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Pill-shaped trigger button for the command palette. Use in a Navbar or
+ * anywhere you want a visible search affordance.
+ *
+ * @example
+ * <CommandPaletteTrigger onClick={() => setOpen(true)} />
+ */
+export declare function CommandPaletteTrigger({ onClick, label, shortcut, className, }: CommandPaletteTriggerProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,71 @@
+import type { ReactNode } from 'react';
+export interface CommandPaletteItem {
+    /** Stable identifier — used as React key. */
+    id: string;
+    /** Visible label. */
+    label: string;
+    /** When provided, selecting the item navigates to this href via `onItemSelect` (consumer wires the router). */
+    href?: string;
+    /** Custom select handler — overrides default href navigation. */
+    onSelect?: () => void;
+    /** Additional searchable terms beyond the label. */
+    keywords?: string[];
+    /** Right-aligned badge (e.g. "new"). */
+    badge?: ReactNode;
+    /** Leading icon. Defaults to a section-derived icon if not provided. */
+    icon?: ReactNode;
+    /** Right-aligned hint text (e.g. a path). */
+    hint?: ReactNode;
+    /** Disable selection. */
+    disabled?: boolean;
+}
+export interface CommandPaletteSection {
+    /** Group heading rendered above items. */
+    title: string;
+    /** Items in this group. */
+    items: CommandPaletteItem[];
+}
+export interface CommandPaletteProps {
+    /** Controlled open state. */
+    open: boolean;
+    /** Open-state setter. */
+    onOpenChange: (open: boolean) => void;
+    /** Grouped item sections. */
+    sections: CommandPaletteSection[];
+    /** Search input placeholder. */
+    placeholder?: string;
+    /** Title for assistive tech (visually hidden). */
+    title?: string;
+    /** Description for assistive tech (visually hidden). */
+    description?: string;
+    /** Empty-state content. */
+    emptyText?: ReactNode;
+    /** Footer content. Defaults to keyboard hints. Pass `false` to hide. */
+    footer?: ReactNode | false;
+    /**
+     * Fires when the user selects an item. Use this to navigate via your router.
+     * If the item has its own `onSelect`, that runs first.
+     */
+    onItemSelect?: (item: CommandPaletteItem) => void;
+    /** Extra className on the dialog content. */
+    contentClassName?: string;
+}
+export interface CommandPaletteTriggerProps {
+    /** Click handler — usually `() => setOpen(true)`. */
+    onClick: () => void;
+    /** Visible label. */
+    label?: string;
+    /** Keyboard shortcut hint. Defaults to "⌘K". */
+    shortcut?: string;
+    /** Extra className. */
+    className?: string;
+}
+export interface UseCommandPaletteOptions {
+    /** Bind the ⌘K / Ctrl+K hotkey. Default: true. */
+    hotkey?: boolean;
+}
+export interface UseCommandPaletteReturn {
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    toggle: () => void;
+}

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

@@ -0,0 +1,2 @@
+export { CommandPalette, CommandPaletteTrigger, useCommandPalette } from './CommandPalette';
+export type { CommandPaletteItem, CommandPaletteSection, CommandPaletteProps, CommandPaletteTriggerProps, UseCommandPaletteOptions, UseCommandPaletteReturn, } from './CommandPalette.types';

package/dist/components/DatePicker/DatePicker.d.ts

@@ -0,0 +1,2 @@
+import type { DatePickerProps } from './DatePicker.types';
+export declare const DatePicker: import("react").ForwardRefExoticComponent<DatePickerProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/DatePicker/DatePicker.types.d.ts

@@ -0,0 +1,83 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+import type { WeekDay } from './dateUtils';
+export type DatePickerSize = 'sm' | 'md' | 'lg';
+export type DatePickerColor = 'primary' | 'danger' | 'warning' | 'success';
+export type DatePickerMode = 'date' | 'month' | 'year' | 'time' | 'datetime';
+/**
+ * Declarative date-window constraint.
+ * - `'any'` (default): no restriction
+ * - `'future'`: today and later
+ * - `'past'`: today and earlier
+ * - `'current'`: today only
+ *
+ * Combines with explicit `min` / `max` — the stricter of the two always wins.
+ */
+export type DatePickerAllow = 'any' | 'future' | 'past' | 'current';
+export interface DatePickerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue' | 'children'> {
+    /** Which picker to show. */
+    mode?: DatePickerMode;
+    /** Controlled value. `null` means cleared. */
+    value?: Date | string | null;
+    /** Uncontrolled initial value. */
+    defaultValue?: Date | string;
+    /** Fires on selection and clear. */
+    onChange?: (date: Date | null) => void;
+    /** Earliest selectable date (inclusive). */
+    min?: Date | string;
+    /** Latest selectable date (inclusive). */
+    max?: Date | string;
+    /** Declarative date-window constraint. Combines with `min`/`max` (stricter wins). */
+    allow?: DatePickerAllow;
+    /** Predicate to disable arbitrary dates (ignored for time-only mode). */
+    disabledDate?: (date: Date) => boolean;
+    /** Predicate to disable specific times (hour/minute/second combos). */
+    disabledTime?: (date: Date) => boolean;
+    /** Text shown when empty. */
+    placeholder?: string;
+    /** Trigger size. */
+    size?: DatePickerSize;
+    /** Validation color on the trigger. Auto-flips to `'danger'` on validation errors. */
+    color?: DatePickerColor;
+    /** Disable the trigger. */
+    disabled?: boolean;
+    /** Show a clear button when a value is selected. */
+    clearable?: boolean;
+    /** BCP-47 locale tag. Defaults to the browser's. */
+    locale?: string;
+    /** 0 = Sunday, 1 = Monday, …, 6 = Saturday. Defaults to 0. */
+    weekStartsOn?: WeekDay;
+    /** Use 12-hour clock with AM/PM for time / datetime. Default: inferred from locale. */
+    hour12?: boolean;
+    /** Show a seconds column in time / datetime. */
+    showSeconds?: boolean;
+    /** Minute granularity (1–30). Default 1. */
+    minuteStep?: number;
+    /** Second granularity (1–30). Default 1. */
+    secondStep?: number;
+    /** Custom display formatter for the selected value. */
+    format?: (date: Date, mode: DatePickerMode) => string;
+    /** Replace the trigger icon. */
+    icon?: ReactNode;
+    /** Required — empty value is treated as invalid. */
+    required?: boolean;
+    /** Custom validator. Returns an error message or null/undefined if valid. */
+    validate?: (date: Date | null) => string | null | undefined;
+    /** Explicit error message. When set, forces danger state and renders below the trigger. */
+    error?: ReactNode;
+    /** Fires whenever the internal validation state changes. */
+    onValidate?: (error: string | null) => void;
+    /** id forwarded to the trigger (for Field integration). */
+    id?: string;
+    /** aria-invalid forwarded to the trigger. */
+    'aria-invalid'?: boolean;
+    /** aria-describedby forwarded to the trigger. */
+    'aria-describedby'?: string;
+    /** Accessible label for the dialog. */
+    dialogLabel?: string;
+    /** Name for form submission. */
+    name?: string;
+    /** Controlled open state. */
+    open?: boolean;
+    /** Called when open state changes. */
+    onOpenChange?: (open: boolean) => void;
+}

package/dist/components/DatePicker/dateUtils.d.ts

@@ -0,0 +1,28 @@
+export type WeekDay = 0 | 1 | 2 | 3 | 4 | 5 | 6;
+export declare function startOfDay(d: Date): Date;
+export declare function endOfDay(d: Date): Date;
+export declare function isSameDay(a: Date | null | undefined, b: Date | null | undefined): boolean;
+export declare function isSameMonth(a: Date, b: Date): boolean;
+export declare function isSameYear(a: Date, b: Date): boolean;
+export declare function startOfMonth(d: Date): Date;
+export declare function startOfYear(d: Date): Date;
+export declare function startOfDecade(d: Date): Date;
+export declare function addMonths(d: Date, n: number): Date;
+export declare function addDays(d: Date, n: number): Date;
+export declare function addYears(d: Date, n: number): Date;
+export declare function withTime(d: Date, h: number, m: number, s?: number): Date;
+export declare function clamp(d: Date, min?: Date | null, max?: Date | null): Date;
+/** 6×7 grid (42 cells) starting on `weekStartsOn`. */
+export declare function buildMonthGrid(viewDate: Date, weekStartsOn: WeekDay): Date[];
+export declare function weekdayLabels(locale: string, weekStartsOn: WeekDay): string[];
+export declare function monthLabels(locale: string, style?: 'short' | 'long'): string[];
+export declare function formatMonthYear(d: Date, locale: string): string;
+export declare function formatYearOnly(d: Date, locale: string): string;
+export declare function formatMonthOnly(d: Date, locale: string): string;
+export declare function formatMedium(d: Date, locale: string): string;
+export declare function formatTime(d: Date, locale: string, hour12: boolean, showSeconds: boolean): string;
+export declare function formatDateTime(d: Date, locale: string, hour12: boolean, showSeconds: boolean): string;
+export declare function parseDate(input: Date | string | null | undefined): Date | null;
+export declare function isBefore(a: Date, b: Date): boolean;
+export declare function isAfter(a: Date, b: Date): boolean;
+export declare function pad2(n: number): string;

package/dist/components/DatePicker/index.d.ts

@@ -0,0 +1,2 @@
+export { DatePicker } from './DatePicker';
+export type { DatePickerProps, DatePickerSize, DatePickerColor } from './DatePicker.types';

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

@@ -0,0 +1,15 @@
+import type { ToastApi, ToastProviderProps } from './Toast.types';
+/**
+ * Wrap your app to enable `useToast()`. Renders a portaled viewport at the
+ * chosen `position`. Multiple providers will simply create separate viewports.
+ */
+export declare function ToastProvider({ children, position, defaultDuration, maxToasts, offset, }: ToastProviderProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Imperative toast API. Must be called inside a `<ToastProvider>` tree.
+ *
+ * @example
+ *   const { toast } = useToast();
+ *   toast.success('Saved');
+ *   toast({ title: 'Custom', description: 'Anything.', action: <button>Undo</button> });
+ */
+export declare function useToast(): ToastApi;

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

@@ -0,0 +1,57 @@
+import type { ReactNode } from 'react';
+export type ToastVariant = 'default' | 'success' | 'info' | 'warning' | 'danger' | 'loading';
+export type ToastPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
+export interface ToastOptions {
+    /** Visible title. Required unless `description` is supplied. */
+    title?: ReactNode;
+    /** Optional secondary line under the title. */
+    description?: ReactNode;
+    /** Right-side action node — typically a Button. */
+    action?: ReactNode;
+    /** Override the default icon. Pass `false` to hide the icon. */
+    icon?: ReactNode | false;
+    /** Variant — drives color, icon, and ARIA role. */
+    variant?: ToastVariant;
+    /** ms before auto-dismiss. Pass `Infinity` (or a negative number) to keep open until dismissed. */
+    duration?: number;
+    /** Fires when the toast disappears (auto or manual). */
+    onDismiss?: () => void;
+    /** Stable identifier — supply when calling `update(id, …)`. */
+    id?: string;
+    /** Hide the close button. */
+    dismissible?: boolean;
+}
+export interface ToastInstance extends Required<Pick<ToastOptions, 'variant' | 'duration' | 'dismissible'>> {
+    id: string;
+    title?: ReactNode;
+    description?: ReactNode;
+    action?: ReactNode;
+    icon?: ReactNode | false;
+    onDismiss?: () => void;
+    /** Internal — flips to true when entering exit animation. */
+    exiting?: boolean;
+}
+export interface ToastFunction {
+    (opts: ToastOptions | string): string;
+    success: (title: ReactNode, opts?: Omit<ToastOptions, 'variant' | 'title'>) => string;
+    info: (title: ReactNode, opts?: Omit<ToastOptions, 'variant' | 'title'>) => string;
+    warning: (title: ReactNode, opts?: Omit<ToastOptions, 'variant' | 'title'>) => string;
+    error: (title: ReactNode, opts?: Omit<ToastOptions, 'variant' | 'title'>) => string;
+    loading: (title: ReactNode, opts?: Omit<ToastOptions, 'variant' | 'title'>) => string;
+}
+export interface ToastApi {
+    toast: ToastFunction;
+    dismiss: (id?: string) => void;
+    update: (id: string, opts: Partial<ToastOptions>) => void;
+}
+export interface ToastProviderProps {
+    children: ReactNode;
+    /** Where the toast viewport renders. Default `bottom-right`. */
+    position?: ToastPosition;
+    /** Default duration (ms) when individual toasts don't specify one. Default 5000. */
+    defaultDuration?: number;
+    /** Max number of toasts visible at once; older ones drop off. Default 5. */
+    maxToasts?: number;
+    /** Distance from the viewport edges. Default `1rem`. */
+    offset?: string;
+}

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

@@ -0,0 +1,2 @@
+export { ToastProvider, useToast } from './Toast';
+export type { ToastVariant, ToastPosition, ToastOptions, ToastInstance, ToastFunction, ToastApi, ToastProviderProps, } from './Toast.types';