@engrate/components 0.0.5 → 0.1.0

package/dist/index.d.ts

@@ -11,6 +11,7 @@ import * as React_2 from 'react';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import * as SwitchPrimitive from '@radix-ui/react-switch';
 import * as ToastPrimitives from '@radix-ui/react-toast';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import { VariantProps } from 'class-variance-authority';
 
 export declare const ActionsMenuButton: React_2.ForwardRefExoticComponent<ActionsMenuButtonProps & React_2.RefAttributes<HTMLButtonElement>>;
@@ -93,6 +94,54 @@ export declare const badgeVariants: (props?: ({
     size?: "sm" | "lg" | "xs" | "md" | "xl" | null | undefined;
 } & ClassProp) | undefined) => string;
 
+/**
+ * Individual breadcrumb item. Use href for links or isCurrentPage for the current location.
+ */
+export declare const BreadcrumbItem: React_2.ForwardRefExoticComponent<BreadcrumbItemProps & React_2.RefAttributes<HTMLAnchorElement>>;
+
+export declare interface BreadcrumbItemProps extends React_2.AnchorHTMLAttributes<HTMLAnchorElement>, VariantProps<typeof breadcrumbItemVariants> {
+    /** Render as a child component (for use with Next.js Link, etc.) */
+    asChild?: boolean;
+    /** Indicates this is the current page (should not be a link) */
+    isCurrentPage?: boolean;
+}
+
+export declare const breadcrumbItemVariants: (props?: ({
+    isCurrentPage?: boolean | null | undefined;
+} & ClassProp) | undefined) => string;
+
+/**
+ * Breadcrumbs navigation component following Engrate brand guidelines.
+ * Provides a navigation trail showing the user's location within a hierarchy.
+ *
+ * @example
+ * ```tsx
+ * <Breadcrumbs>
+ *   <BreadcrumbItem href="/">Home</BreadcrumbItem>
+ *   <BreadcrumbItem href="/products">Products</BreadcrumbItem>
+ *   <BreadcrumbItem isCurrentPage>Current Product</BreadcrumbItem>
+ * </Breadcrumbs>
+ * ```
+ */
+export declare const Breadcrumbs: React_2.ForwardRefExoticComponent<BreadcrumbsProps & React_2.RefAttributes<HTMLElement>>;
+
+/**
+ * Separator between breadcrumb items. Defaults to a chevron icon.
+ */
+export declare const BreadcrumbSeparator: React_2.ForwardRefExoticComponent<BreadcrumbSeparatorProps & React_2.RefAttributes<HTMLSpanElement>>;
+
+export declare interface BreadcrumbSeparatorProps extends React_2.HTMLAttributes<HTMLSpanElement> {
+}
+
+export declare interface BreadcrumbsProps extends React_2.HTMLAttributes<HTMLElement>, VariantProps<typeof breadcrumbsVariants> {
+    /** Custom separator between breadcrumb items */
+    separator?: React_2.ReactNode;
+}
+
+export declare const breadcrumbsVariants: (props?: ({
+    size?: "sm" | "default" | "lg" | null | undefined;
+} & ClassProp) | undefined) => string;
+
 /**
  * Primary UI button component following Engrate brand guidelines.
  * Features pill-shaped design with Sunflower yellow as primary color.
@@ -116,6 +165,10 @@ export declare const buttonVariants: (props?: ({
     size?: "sm" | "default" | "lg" | "icon" | null | undefined;
 } & ClassProp) | undefined) => string;
 
+export declare const calendarDayVariants: (props?: ({
+    state?: "default" | "disabled" | "selected" | "today" | "outside" | null | undefined;
+} & ClassProp) | undefined) => string;
+
 /**
  * Card component for displaying content in a contained area.
  * Follows Engrate design system with support for variants, padding, and background colors.
@@ -232,6 +285,100 @@ export declare interface ContextMenuSubTriggerProps extends React_2.ComponentPro
 
 export declare const ContextMenuTrigger: React_2.ForwardRefExoticComponent<ContextMenuPrimitive.ContextMenuTriggerProps & React_2.RefAttributes<HTMLSpanElement>>;
 
+/**
+ * DatePicker component following Engrate brand guidelines.
+ * Features a calendar popup with month/year navigation and accessible keyboard controls.
+ *
+ * @example
+ * ```tsx
+ * const [date, setDate] = useState<Date | null>(null)
+ * <DatePicker value={date} onChange={setDate} placeholder="Select a date" />
+ * ```
+ */
+export declare const DatePicker: React_2.ForwardRefExoticComponent<DatePickerProps & React_2.RefAttributes<HTMLButtonElement>>;
+
+export declare interface DatePickerProps extends VariantProps<typeof datePickerTriggerVariants> {
+    /** The currently selected date */
+    value?: Date | null;
+    /** Callback when the date changes */
+    onChange?: (date: Date | null) => void;
+    /** Placeholder text when no date is selected */
+    placeholder?: string;
+    /** Date format string (supports MM, dd, yyyy) */
+    format?: string;
+    /** Minimum selectable date */
+    minDate?: Date;
+    /** Maximum selectable date */
+    maxDate?: Date;
+    /** Whether the date picker is disabled */
+    disabled?: boolean;
+    /** Additional class name for the trigger */
+    className?: string;
+    /** ID for the trigger element */
+    id?: string;
+    /** Name attribute for form integration */
+    name?: string;
+    /** aria-label for accessibility */
+    'aria-label'?: string;
+    /** aria-describedby for accessibility */
+    'aria-describedby'?: string;
+}
+
+export declare const datePickerTriggerVariants: (props?: ({
+    variant?: "default" | "error" | null | undefined;
+} & ClassProp) | undefined) => string;
+
+/**
+ * DateTimePicker component following Engrate brand guidelines.
+ * Features a calendar popup with time selection and accessible keyboard controls.
+ *
+ * @example
+ * ```tsx
+ * const [dateTime, setDateTime] = useState<Date | null>(null)
+ * <DateTimePicker value={dateTime} onChange={setDateTime} placeholder="Select date and time" />
+ * ```
+ */
+export declare const DateTimePicker: React_2.ForwardRefExoticComponent<DateTimePickerProps & React_2.RefAttributes<HTMLButtonElement>>;
+
+export declare const dateTimePickerCalendarDayVariants: (props?: ({
+    state?: "default" | "disabled" | "selected" | "today" | "outside" | null | undefined;
+} & ClassProp) | undefined) => string;
+
+export declare interface DateTimePickerProps extends VariantProps<typeof dateTimePickerTriggerVariants> {
+    /** The currently selected date and time */
+    value?: Date | null;
+    /** Callback when the date/time changes */
+    onChange?: (date: Date | null) => void;
+    /** Placeholder text when no date is selected */
+    placeholder?: string;
+    /** Date/time format string (supports MM, dd, yyyy, HH, hh, mm, a) */
+    format?: string;
+    /** Minimum selectable date */
+    minDate?: Date;
+    /** Maximum selectable date */
+    maxDate?: Date;
+    /** Whether the date time picker is disabled */
+    disabled?: boolean;
+    /** Additional class name for the trigger */
+    className?: string;
+    /** ID for the trigger element */
+    id?: string;
+    /** Name attribute for form integration */
+    name?: string;
+    /** Use 24-hour format for time (default: true) */
+    use24Hour?: boolean;
+    /** Step for minutes (default: 1) */
+    minuteStep?: number;
+    /** aria-label for accessibility */
+    'aria-label'?: string;
+    /** aria-describedby for accessibility */
+    'aria-describedby'?: string;
+}
+
+export declare const dateTimePickerTriggerVariants: (props?: ({
+    variant?: "default" | "error" | null | undefined;
+} & ClassProp) | undefined) => string;
+
 /**
  * Divider component for visually separating content.
  * Supports both horizontal and vertical orientations.
@@ -382,6 +529,57 @@ export declare interface FormMessageProps extends React_2.HTMLAttributes<HTMLPar
     variant?: 'default' | 'error';
 }
 
+/**
+ * Grid component for consistent layout structures.
+ * Provides a flexible grid system with configurable columns, gaps, and alignment.
+ *
+ * @example
+ * ```tsx
+ * <Grid cols={3} gap="lg">
+ *   <Card>Item 1</Card>
+ *   <Card>Item 2</Card>
+ *   <Card>Item 3</Card>
+ * </Grid>
+ * ```
+ */
+export declare const Grid: React_2.ForwardRefExoticComponent<GridProps & React_2.RefAttributes<HTMLDivElement>>;
+
+/**
+ * GridItem component for controlling individual item placement within a Grid.
+ *
+ * @example
+ * ```tsx
+ * <Grid cols={12}>
+ *   <GridItem colSpan={8}>Main content</GridItem>
+ *   <GridItem colSpan={4}>Sidebar</GridItem>
+ * </Grid>
+ * ```
+ */
+export declare const GridItem: React_2.ForwardRefExoticComponent<GridItemProps & React_2.RefAttributes<HTMLDivElement>>;
+
+export declare interface GridItemProps extends React_2.HTMLAttributes<HTMLDivElement>, VariantProps<typeof gridItemVariants> {
+    /** Render as a child component using Slot */
+    asChild?: boolean;
+}
+
+export declare const gridItemVariants: (props?: ({
+    colSpan?: 1 | 2 | 3 | 4 | 5 | 6 | 11 | 12 | 10 | "full" | 7 | 8 | 9 | null | undefined;
+    rowSpan?: 1 | 2 | 3 | 4 | 5 | 6 | "full" | null | undefined;
+    colStart?: 1 | "auto" | 2 | 3 | 4 | 5 | 6 | 11 | 12 | 10 | 7 | 8 | 9 | null | undefined;
+} & ClassProp) | undefined) => string;
+
+export declare interface GridProps extends React_2.HTMLAttributes<HTMLDivElement>, VariantProps<typeof gridVariants> {
+    /** Render as a child component using Slot */
+    asChild?: boolean;
+}
+
+export declare const gridVariants: (props?: ({
+    cols?: 1 | 2 | 3 | 4 | 5 | 6 | 12 | null | undefined;
+    gap?: "sm" | "lg" | "none" | "xs" | "md" | "xl" | "2xl" | null | undefined;
+    align?: "end" | "start" | "center" | "stretch" | "baseline" | null | undefined;
+    justify?: "end" | "start" | "center" | "stretch" | null | undefined;
+} & ClassProp) | undefined) => string;
+
 export declare const Heading: React_2.ForwardRefExoticComponent<HeadingProps & React_2.RefAttributes<HTMLHeadingElement>>;
 
 declare type HeadingElement = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
@@ -507,6 +705,39 @@ export declare interface ModalTitleProps extends React_2.ComponentPropsWithoutRe
 
 export declare const ModalTrigger: React_2.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React_2.RefAttributes<HTMLButtonElement>>;
 
+export declare const progressBarVariants: (props?: ({
+    variant?: "default" | "muted" | "success" | null | undefined;
+    animated?: boolean | null | undefined;
+} & ClassProp) | undefined) => string;
+
+/**
+ * Progress indicator component following Engrate brand guidelines.
+ * Uses Sunflower yellow as the default color for the progress bar.
+ *
+ * @example
+ * ```tsx
+ * <ProgressIndicator value={50} />
+ * <ProgressIndicator value={75} size="lg" variant="success" />
+ * <ProgressIndicator indeterminate label="Loading..." />
+ * ```
+ */
+export declare const ProgressIndicator: React_2.ForwardRefExoticComponent<ProgressIndicatorProps & React_2.RefAttributes<HTMLDivElement>>;
+
+export declare interface ProgressIndicatorProps extends React_2.HTMLAttributes<HTMLDivElement>, VariantProps<typeof progressIndicatorVariants>, VariantProps<typeof progressBarVariants> {
+    /** Current progress value (0-100) */
+    value?: number;
+    /** Maximum progress value */
+    max?: number;
+    /** Accessible label for screen readers */
+    label?: string;
+    /** Whether to show indeterminate loading state */
+    indeterminate?: boolean;
+}
+
+export declare const progressIndicatorVariants: (props?: ({
+    size?: "sm" | "default" | "lg" | "xl" | null | undefined;
+} & ClassProp) | undefined) => string;
+
 /**
  * Radio group container component.
  * Built on Radix UI RadioGroup for accessibility.
@@ -581,8 +812,90 @@ export declare interface SelectTriggerProps extends React_2.ComponentPropsWithou
 
 export declare const SelectValue: React_2.ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & React_2.RefAttributes<HTMLSpanElement>>;
 
+/**
+ * Skeleton component for indicating loading states.
+ * Displays a pulsing placeholder while content is loading.
+ *
+ * @example
+ * ```tsx
+ * <Skeleton width={200} height={20} />
+ * <Skeleton variant="circular" width={40} height={40} />
+ * <Skeleton variant="text" className="w-full h-4" />
+ * ```
+ */
+export declare const Skeleton: React_2.ForwardRefExoticComponent<SkeletonProps & React_2.RefAttributes<HTMLDivElement>>;
+
+export declare interface SkeletonProps extends React_2.HTMLAttributes<HTMLDivElement>, VariantProps<typeof skeletonVariants> {
+    /** Width of the skeleton (CSS value or Tailwind class) */
+    width?: string | number;
+    /** Height of the skeleton (CSS value or Tailwind class) */
+    height?: string | number;
+}
+
+export declare const skeletonVariants: (props?: ({
+    variant?: "text" | "default" | "circular" | null | undefined;
+} & ClassProp) | undefined) => string;
+
 export declare type SortDirection = 'asc' | 'desc' | null;
 
+/**
+ * Loading spinner component following Engrate brand guidelines.
+ * Uses Sunflower yellow as the default color.
+ *
+ * @example
+ * ```tsx
+ * <Spinner />
+ * <Spinner size="lg" variant="muted" />
+ * <Spinner label="Loading data..." />
+ * ```
+ */
+export declare const Spinner: React_2.ForwardRefExoticComponent<SpinnerProps & React_2.RefAttributes<HTMLSpanElement>>;
+
+export declare interface SpinnerProps extends React_2.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof spinnerVariants> {
+    /** Accessible label for screen readers */
+    label?: string;
+}
+
+export declare const spinnerVariants: (props?: ({
+    variant?: "default" | "muted" | "inverted" | null | undefined;
+    size?: "sm" | "default" | "lg" | "xl" | null | undefined;
+} & ClassProp) | undefined) => string;
+
+/**
+ * Stack component for arranging elements in a vertical or horizontal stack.
+ * Provides a flexible layout system with configurable direction, gaps, and alignment.
+ *
+ * @example
+ * ```tsx
+ * // Vertical stack (default)
+ * <Stack gap="lg">
+ *   <Card>Item 1</Card>
+ *   <Card>Item 2</Card>
+ *   <Card>Item 3</Card>
+ * </Stack>
+ *
+ * // Horizontal stack
+ * <Stack direction="horizontal" gap="md" align="center">
+ *   <Button>Action 1</Button>
+ *   <Button>Action 2</Button>
+ * </Stack>
+ * ```
+ */
+export declare const Stack: React_2.ForwardRefExoticComponent<StackProps & React_2.RefAttributes<HTMLDivElement>>;
+
+export declare interface StackProps extends React_2.HTMLAttributes<HTMLDivElement>, VariantProps<typeof stackVariants> {
+    /** Render as a child component using Slot */
+    asChild?: boolean;
+}
+
+export declare const stackVariants: (props?: ({
+    direction?: "horizontal" | "vertical" | null | undefined;
+    gap?: "sm" | "lg" | "none" | "xs" | "md" | "xl" | "2xl" | null | undefined;
+    align?: "end" | "start" | "center" | "stretch" | "baseline" | null | undefined;
+    justify?: "end" | "start" | "center" | "between" | "around" | "evenly" | null | undefined;
+    wrap?: "wrap" | "nowrap" | "wrap-reverse" | null | undefined;
+} & ClassProp) | undefined) => string;
+
 /**
  * Switch component following Engrate brand guidelines.
  * Built on Radix UI Switch for accessibility.
@@ -787,7 +1100,7 @@ export declare interface TextProps extends React_2.HTMLAttributes<HTMLElement>,
 
 export declare const textVariants: (props?: ({
     variant?: "lead" | "semi-lead" | "body-lg" | "body" | "descriptive" | "label" | "label-sm" | null | undefined;
-    weight?: "regular" | "medium" | null | undefined;
+    weight?: "medium" | "regular" | null | undefined;
 } & ClassProp) | undefined) => string;
 
 export declare const Toast: React_2.ForwardRefExoticComponent<ToastProps & React_2.RefAttributes<HTMLLIElement>>;
@@ -826,6 +1139,44 @@ export declare const ToastViewport: React_2.ForwardRefExoticComponent<ToastViewp
 export declare interface ToastViewportProps extends React_2.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport> {
 }
 
+export declare const Tooltip: React_2.FC<TooltipPrimitive.TooltipProps>;
+
+export declare const TooltipArrow: React_2.ForwardRefExoticComponent<TooltipArrowProps & React_2.RefAttributes<SVGSVGElement>>;
+
+export declare interface TooltipArrowProps extends React_2.ComponentPropsWithoutRef<typeof TooltipPrimitive.Arrow> {
+}
+
+/**
+ * Tooltip content component that displays contextual information.
+ * Follows Engrate brand guidelines with dark background by default.
+ *
+ * @example
+ * ```tsx
+ * <TooltipProvider>
+ *   <Tooltip>
+ *     <TooltipTrigger>Hover me</TooltipTrigger>
+ *     <TooltipContent>Helpful information</TooltipContent>
+ *   </Tooltip>
+ * </TooltipProvider>
+ * ```
+ */
+export declare const TooltipContent: React_2.ForwardRefExoticComponent<TooltipContentProps & React_2.RefAttributes<HTMLDivElement>>;
+
+export declare interface TooltipContentProps extends React_2.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>, VariantProps<typeof tooltipContentVariants> {
+    /** Whether to show an arrow pointing to the trigger */
+    showArrow?: boolean;
+}
+
+export declare const tooltipContentVariants: (props?: ({
+    variant?: "default" | "light" | null | undefined;
+} & ClassProp) | undefined) => string;
+
+export declare const TooltipPortal: React_2.FC<TooltipPrimitive.TooltipPortalProps>;
+
+export declare const TooltipProvider: React_2.FC<TooltipPrimitive.TooltipProviderProps>;
+
+export declare const TooltipTrigger: React_2.ForwardRefExoticComponent<TooltipPrimitive.TooltipTriggerProps & React_2.RefAttributes<HTMLButtonElement>>;
+
 export declare function useFilterableTable<T>({ data, filterKeys, }: UseFilterableTableOptions<T>): UseFilterableTableReturn<T>;
 
 declare interface UseFilterableTableOptions<T> {