@engrate/components 0.1.0 → 0.1.1

package/README.md

@@ -84,12 +84,12 @@ npm install
 
 | Command                   | Description                              |
 | ------------------------- | ---------------------------------------- |
-| `npm run dev`             | Start Vite dev server                    |
+| `npm run dev`             | Start Storybook at http://localhost:6006 |
 | `npm run build`           | Build library to `dist/`                 |
 | `npm run storybook`       | Start Storybook at http://localhost:6006 |
 | `npm run build-storybook` | Build static Storybook                   |
-| `npm run test`            | Run tests in watch mode                  |
-| `npm run test:run`        | Single test run                          |
+| `npm run test`            | Single test run                          |
+| `npm run test:watch`      | Run tests in watch mode                  |
 | `npm run test:coverage`   | Run tests with coverage                  |
 | `npm run lint`            | Check for linting errors                 |
 | `npm run lint:fix`        | Fix linting errors                       |
@@ -122,7 +122,7 @@ src/
    - `ComponentName.stories.tsx` - Storybook stories
    - `index.ts` - Barrel export
 3. Export from `src/components/ui/index.ts`
-4. Run tests and Storybook to verify
+4. Run `npm run verify` and Storybook to verify
 
 ### Testing
 
@@ -143,17 +143,9 @@ describe('Button', () => {
 })
 ```
 
-## Brand Guidelines
+## Publishing
 
-This library follows Engrate's brand guidelines:
-
-- **10/90 Rule**: 10% color, 90% grayscale
-- **Never pure white**: Use `bg-main` (#FAFAFA) or warmer alternatives
-- **Pill-shaped buttons**: Full border-radius (`rounded-pill`)
-- **No bold fonts**: Use Regular weight only (Medium for emphasis)
-- **Left-aligned text**: Default alignment
-
-## Publishing to NPM
+To publish to [NPM](https://www.npmjs.com/package/@engrate/components) and [Github Pages](https://engrate.github.io/eg-components)
 
 1. Make sure you have access to the NPM `@engrate` org
 2. Update version in `package.json`

package/dist/components/index.d.ts

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

package/dist/components/ui/AlertDialog/AlertDialog.d.ts

@@ -0,0 +1,36 @@
+import { VariantProps } from 'class-variance-authority';
+import { buttonVariants } from '../Button';
+import * as React from 'react';
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
+declare const AlertDialog: React.FC<AlertDialogPrimitive.AlertDialogProps>;
+declare const AlertDialogTrigger: React.ForwardRefExoticComponent<AlertDialogPrimitive.AlertDialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const AlertDialogPortal: React.FC<AlertDialogPrimitive.AlertDialogPortalProps>;
+interface AlertDialogOverlayProps extends React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay> {
+}
+declare const AlertDialogOverlay: React.ForwardRefExoticComponent<AlertDialogOverlayProps & React.RefAttributes<HTMLDivElement>>;
+declare const alertDialogContentVariants: (props?: ({
+    size?: "sm" | "default" | "lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+interface AlertDialogContentProps extends React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>, VariantProps<typeof alertDialogContentVariants> {
+}
+declare const AlertDialogContent: React.ForwardRefExoticComponent<AlertDialogContentProps & React.RefAttributes<HTMLDivElement>>;
+interface AlertDialogHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+declare const AlertDialogHeader: React.ForwardRefExoticComponent<AlertDialogHeaderProps & React.RefAttributes<HTMLDivElement>>;
+interface AlertDialogFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+declare const AlertDialogFooter: React.ForwardRefExoticComponent<AlertDialogFooterProps & React.RefAttributes<HTMLDivElement>>;
+interface AlertDialogTitleProps extends React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title> {
+}
+declare const AlertDialogTitle: React.ForwardRefExoticComponent<AlertDialogTitleProps & React.RefAttributes<HTMLHeadingElement>>;
+interface AlertDialogDescriptionProps extends React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description> {
+}
+declare const AlertDialogDescription: React.ForwardRefExoticComponent<AlertDialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
+interface AlertDialogActionProps extends React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>, VariantProps<typeof buttonVariants> {
+}
+declare const AlertDialogAction: React.ForwardRefExoticComponent<AlertDialogActionProps & React.RefAttributes<HTMLButtonElement>>;
+interface AlertDialogCancelProps extends React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>, VariantProps<typeof buttonVariants> {
+}
+declare const AlertDialogCancel: React.ForwardRefExoticComponent<AlertDialogCancelProps & React.RefAttributes<HTMLButtonElement>>;
+export { AlertDialog, AlertDialogTrigger, AlertDialogPortal, AlertDialogOverlay, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel, alertDialogContentVariants, };
+export type { AlertDialogOverlayProps, AlertDialogContentProps, AlertDialogHeaderProps, AlertDialogFooterProps, AlertDialogTitleProps, AlertDialogDescriptionProps, AlertDialogActionProps, AlertDialogCancelProps, };

package/dist/components/ui/AlertDialog/index.d.ts

@@ -0,0 +1,2 @@
+export { AlertDialog, AlertDialogTrigger, AlertDialogPortal, AlertDialogOverlay, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel, alertDialogContentVariants, } from './AlertDialog';
+export type { AlertDialogOverlayProps, AlertDialogContentProps, AlertDialogHeaderProps, AlertDialogFooterProps, AlertDialogTitleProps, AlertDialogDescriptionProps, AlertDialogActionProps, AlertDialogCancelProps, } from './AlertDialog';

package/dist/components/ui/Badge/Badge.d.ts

@@ -0,0 +1,24 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+declare const badgeVariants: (props?: ({
+    variant?: "secondary" | "sunflower" | "lemon-meringue" | "vanilla" | "eggshell" | "warm-purple" | "cool-purple" | "electric-blue" | "deep-blue" | "error" | null | undefined;
+    size?: "sm" | "lg" | "md" | "xl" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+interface BadgeProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'color'>, VariantProps<typeof badgeVariants> {
+    /** Render as a child component (for use with links, etc.) */
+    asChild?: boolean;
+}
+/**
+ * Badge component for displaying status, labels, or counts.
+ * Features pill-shaped design with various Engrate brand colors.
+ *
+ * @example
+ * ```tsx
+ * <Badge variant="sunflower">New</Badge>
+ * <Badge variant="error" size="sm">Alert</Badge>
+ * <Badge variant="deep-blue" size="lg">Premium</Badge>
+ * ```
+ */
+declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLSpanElement>>;
+export { Badge, badgeVariants };
+export type { BadgeProps };

package/dist/components/ui/Badge/index.d.ts

@@ -0,0 +1,2 @@
+export { Badge, badgeVariants } from './Badge';
+export type { BadgeProps } from './Badge';

package/dist/components/ui/Breadcrumbs/Breadcrumbs.d.ts

@@ -0,0 +1,44 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+declare const breadcrumbsVariants: (props?: ({
+    size?: "sm" | "default" | "lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+declare const breadcrumbItemVariants: (props?: ({
+    isCurrentPage?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+interface BreadcrumbsProps extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof breadcrumbsVariants> {
+    /** Custom separator between breadcrumb items */
+    separator?: React.ReactNode;
+}
+/**
+ * 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>
+ * ```
+ */
+declare const Breadcrumbs: React.ForwardRefExoticComponent<BreadcrumbsProps & React.RefAttributes<HTMLElement>>;
+interface BreadcrumbItemProps extends React.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;
+}
+/**
+ * Individual breadcrumb item. Use href for links or isCurrentPage for the current location.
+ */
+declare const BreadcrumbItem: React.ForwardRefExoticComponent<BreadcrumbItemProps & React.RefAttributes<HTMLAnchorElement>>;
+interface BreadcrumbSeparatorProps extends React.HTMLAttributes<HTMLSpanElement> {
+}
+/**
+ * Separator between breadcrumb items. Defaults to a chevron icon.
+ */
+declare const BreadcrumbSeparator: React.ForwardRefExoticComponent<BreadcrumbSeparatorProps & React.RefAttributes<HTMLSpanElement>>;
+export { Breadcrumbs, BreadcrumbItem, BreadcrumbSeparator, breadcrumbsVariants, breadcrumbItemVariants, };
+export type { BreadcrumbsProps, BreadcrumbItemProps, BreadcrumbSeparatorProps };

package/dist/components/ui/Breadcrumbs/index.d.ts

@@ -0,0 +1,2 @@
+export { Breadcrumbs, BreadcrumbItem, BreadcrumbSeparator, breadcrumbsVariants, breadcrumbItemVariants, } from './Breadcrumbs';
+export type { BreadcrumbsProps, BreadcrumbItemProps, BreadcrumbSeparatorProps, } from './Breadcrumbs';

package/dist/components/ui/Button/Button.d.ts

@@ -0,0 +1,24 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+declare const buttonVariants: (props?: ({
+    variant?: "primary" | "secondary" | "ghost" | null | undefined;
+    size?: "sm" | "default" | "lg" | "icon" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+    /** Render as a child component (for use with Next.js Link, etc.) */
+    asChild?: boolean;
+}
+/**
+ * Primary UI button component following Engrate brand guidelines.
+ * Features pill-shaped design with Sunflower yellow as primary color.
+ *
+ * @example
+ * ```tsx
+ * <Button variant="primary">Click me</Button>
+ * <Button variant="secondary" size="sm">Secondary</Button>
+ * <Button asChild><a href="/link">Link Button</a></Button>
+ * ```
+ */
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export { Button, buttonVariants };
+export type { ButtonProps };

package/dist/components/ui/Button/index.d.ts

@@ -0,0 +1,2 @@
+export { Button, buttonVariants } from './Button';
+export type { ButtonProps } from './Button';

package/dist/components/ui/Card/Card.d.ts

@@ -0,0 +1,29 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+declare const cardVariants: (props?: ({
+    variant?: "ghost" | "default" | "elevated" | null | undefined;
+    padding?: "sm" | "default" | "lg" | "none" | null | undefined;
+    bg?: "contrast" | "main" | "sunflower" | "lemon-meringue" | "vanilla" | "eggshell" | "warm-purple" | "cool-purple" | "electric-blue" | "deep-blue" | "error" | "white" | "card" | "alt" | "transparent" | "sunflower-hover" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+interface CardProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof cardVariants> {
+    /** Render as a child component */
+    asChild?: boolean;
+    /** Background color from Engrate design tokens */
+    bg?: VariantProps<typeof cardVariants>['bg'];
+}
+/**
+ * Card component for displaying content in a contained area.
+ * Follows Engrate design system with support for variants, padding, and background colors.
+ *
+ * @example
+ * ```tsx
+ * <Card>
+ *   <Heading>Title</Heading>
+ *   <Text>Content goes here</Text>
+ * </Card>
+ * <Card variant="elevated" padding="lg">Elevated card</Card>
+ * <Card bg="sunflower">Highlighted card</Card>
+ * ```
+ */
+declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;
+export { Card, cardVariants, type CardProps };

package/dist/components/ui/Card/index.d.ts

@@ -0,0 +1 @@
+export { Card, cardVariants, type CardProps } from './Card';

package/dist/components/ui/Checkbox/Checkbox.d.ts

@@ -0,0 +1,18 @@
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import * as React from 'react';
+interface CheckboxProps extends React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> {
+}
+/**
+ * Checkbox component following Engrate brand guidelines.
+ * Built on Radix UI Checkbox for accessibility.
+ * Features sunflower accent when checked.
+ *
+ * @example
+ * ```tsx
+ * <Checkbox id="terms" />
+ * <Checkbox checked disabled />
+ * ```
+ */
+declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLButtonElement>>;
+export { Checkbox };
+export type { CheckboxProps };

package/dist/components/ui/Checkbox/index.d.ts

@@ -0,0 +1,2 @@
+export { Checkbox } from './Checkbox';
+export type { CheckboxProps } from './Checkbox';

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

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import * as ContextMenuPrimitive from '@radix-ui/react-context-menu';
+declare const ContextMenu: React.FC<ContextMenuPrimitive.ContextMenuProps>;
+declare const ContextMenuTrigger: React.ForwardRefExoticComponent<ContextMenuPrimitive.ContextMenuTriggerProps & React.RefAttributes<HTMLSpanElement>>;
+declare const ContextMenuGroup: React.ForwardRefExoticComponent<ContextMenuPrimitive.ContextMenuGroupProps & React.RefAttributes<HTMLDivElement>>;
+declare const ContextMenuPortal: React.FC<ContextMenuPrimitive.ContextMenuPortalProps>;
+declare const ContextMenuSub: React.FC<ContextMenuPrimitive.ContextMenuSubProps>;
+declare const ContextMenuRadioGroup: React.ForwardRefExoticComponent<ContextMenuPrimitive.ContextMenuRadioGroupProps & React.RefAttributes<HTMLDivElement>>;
+interface ContextMenuSubTriggerProps extends React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> {
+    inset?: boolean;
+}
+declare const ContextMenuSubTrigger: React.ForwardRefExoticComponent<ContextMenuSubTriggerProps & React.RefAttributes<HTMLDivElement>>;
+interface ContextMenuSubContentProps extends React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent> {
+}
+declare const ContextMenuSubContent: React.ForwardRefExoticComponent<ContextMenuSubContentProps & React.RefAttributes<HTMLDivElement>>;
+interface ContextMenuContentProps extends React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content> {
+}
+declare const ContextMenuContent: React.ForwardRefExoticComponent<ContextMenuContentProps & React.RefAttributes<HTMLDivElement>>;
+interface ContextMenuItemProps extends React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> {
+    inset?: boolean;
+}
+declare const ContextMenuItem: React.ForwardRefExoticComponent<ContextMenuItemProps & React.RefAttributes<HTMLDivElement>>;
+interface ContextMenuCheckboxItemProps extends React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem> {
+}
+declare const ContextMenuCheckboxItem: React.ForwardRefExoticComponent<ContextMenuCheckboxItemProps & React.RefAttributes<HTMLDivElement>>;
+interface ContextMenuRadioItemProps extends React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem> {
+}
+declare const ContextMenuRadioItem: React.ForwardRefExoticComponent<ContextMenuRadioItemProps & React.RefAttributes<HTMLDivElement>>;
+interface ContextMenuLabelProps extends React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> {
+    inset?: boolean;
+}
+declare const ContextMenuLabel: React.ForwardRefExoticComponent<ContextMenuLabelProps & React.RefAttributes<HTMLDivElement>>;
+interface ContextMenuSeparatorProps extends React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator> {
+}
+declare const ContextMenuSeparator: React.ForwardRefExoticComponent<ContextMenuSeparatorProps & React.RefAttributes<HTMLDivElement>>;
+interface ContextMenuShortcutProps extends React.HTMLAttributes<HTMLSpanElement> {
+}
+declare const ContextMenuShortcut: React.ForwardRefExoticComponent<ContextMenuShortcutProps & React.RefAttributes<HTMLSpanElement>>;
+export { ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem, ContextMenuCheckboxItem, ContextMenuRadioItem, ContextMenuLabel, ContextMenuSeparator, ContextMenuShortcut, ContextMenuGroup, ContextMenuPortal, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuRadioGroup, };
+export type { ContextMenuContentProps, ContextMenuItemProps, ContextMenuCheckboxItemProps, ContextMenuRadioItemProps, ContextMenuLabelProps, ContextMenuSeparatorProps, ContextMenuShortcutProps, ContextMenuSubTriggerProps, ContextMenuSubContentProps, };

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

@@ -0,0 +1,2 @@
+export { ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem, ContextMenuCheckboxItem, ContextMenuRadioItem, ContextMenuLabel, ContextMenuSeparator, ContextMenuShortcut, ContextMenuGroup, ContextMenuPortal, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuRadioGroup, } from './ContextMenu';
+export type { ContextMenuContentProps, ContextMenuItemProps, ContextMenuCheckboxItemProps, ContextMenuRadioItemProps, ContextMenuLabelProps, ContextMenuSeparatorProps, ContextMenuShortcutProps, ContextMenuSubTriggerProps, ContextMenuSubContentProps, } from './ContextMenu';

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

@@ -0,0 +1,47 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+declare const datePickerTriggerVariants: (props?: ({
+    variant?: "default" | "error" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+declare const calendarDayVariants: (props?: ({
+    state?: "default" | "disabled" | "selected" | "today" | "outside" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+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;
+}
+/**
+ * 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" />
+ * ```
+ */
+declare const DatePicker: React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<HTMLButtonElement>>;
+export { DatePicker, datePickerTriggerVariants, calendarDayVariants };
+export type { DatePickerProps };

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

@@ -0,0 +1,2 @@
+export { DatePicker, datePickerTriggerVariants, calendarDayVariants, } from './DatePicker';
+export type { DatePickerProps } from './DatePicker';

package/dist/components/ui/DateTimePicker/DateTimePicker.d.ts

@@ -0,0 +1,51 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+declare const dateTimePickerTriggerVariants: (props?: ({
+    variant?: "default" | "error" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+declare const calendarDayVariants: (props?: ({
+    state?: "default" | "disabled" | "selected" | "today" | "outside" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+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;
+}
+/**
+ * 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" />
+ * ```
+ */
+declare const DateTimePicker: React.ForwardRefExoticComponent<DateTimePickerProps & React.RefAttributes<HTMLButtonElement>>;
+export { DateTimePicker, dateTimePickerTriggerVariants, calendarDayVariants as dateTimePickerCalendarDayVariants, };
+export type { DateTimePickerProps };

package/dist/components/ui/DateTimePicker/index.d.ts

@@ -0,0 +1,2 @@
+export { DateTimePicker, dateTimePickerTriggerVariants, dateTimePickerCalendarDayVariants, } from './DateTimePicker';
+export type { DateTimePickerProps } from './DateTimePicker';

package/dist/components/ui/Divider/Divider.d.ts

@@ -0,0 +1,32 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+declare const dividerVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+interface DividerProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof dividerVariants> {
+    /**
+     * Whether the divider is decorative only.
+     * When true, the divider will be hidden from screen readers.
+     * @default true
+     */
+    decorative?: boolean;
+}
+/**
+ * Divider component for visually separating content.
+ * Supports both horizontal and vertical orientations.
+ *
+ * @example
+ * ```tsx
+ * // Horizontal divider (default)
+ * <Divider />
+ *
+ * // Vertical divider
+ * <Divider orientation="vertical" />
+ *
+ * // With custom styling
+ * <Divider className="my-4" />
+ * ```
+ */
+declare const Divider: React.ForwardRefExoticComponent<DividerProps & React.RefAttributes<HTMLDivElement>>;
+export { Divider, dividerVariants };
+export type { DividerProps };

package/dist/components/ui/Divider/index.d.ts

@@ -0,0 +1,2 @@
+export { Divider, dividerVariants } from './Divider';
+export type { DividerProps } from './Divider';

package/dist/components/ui/DropdownMenu/DropdownMenu.d.ts

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+declare const DropdownMenu: React.FC<DropdownMenuPrimitive.DropdownMenuProps>;
+declare const DropdownMenuTrigger: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const DropdownMenuGroup: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuGroupProps & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuPortal: React.FC<DropdownMenuPrimitive.DropdownMenuPortalProps>;
+declare const DropdownMenuSub: React.FC<DropdownMenuPrimitive.DropdownMenuSubProps>;
+declare const DropdownMenuRadioGroup: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuRadioGroupProps & React.RefAttributes<HTMLDivElement>>;
+interface DropdownMenuSubTriggerProps extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> {
+    inset?: boolean;
+}
+declare const DropdownMenuSubTrigger: React.ForwardRefExoticComponent<DropdownMenuSubTriggerProps & React.RefAttributes<HTMLDivElement>>;
+interface DropdownMenuSubContentProps extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent> {
+}
+declare const DropdownMenuSubContent: React.ForwardRefExoticComponent<DropdownMenuSubContentProps & React.RefAttributes<HTMLDivElement>>;
+interface DropdownMenuContentProps extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content> {
+}
+declare const DropdownMenuContent: React.ForwardRefExoticComponent<DropdownMenuContentProps & React.RefAttributes<HTMLDivElement>>;
+interface DropdownMenuItemProps extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> {
+    inset?: boolean;
+}
+declare const DropdownMenuItem: React.ForwardRefExoticComponent<DropdownMenuItemProps & React.RefAttributes<HTMLDivElement>>;
+interface DropdownMenuCheckboxItemProps extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem> {
+}
+declare const DropdownMenuCheckboxItem: React.ForwardRefExoticComponent<DropdownMenuCheckboxItemProps & React.RefAttributes<HTMLDivElement>>;
+interface DropdownMenuRadioItemProps extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem> {
+}
+declare const DropdownMenuRadioItem: React.ForwardRefExoticComponent<DropdownMenuRadioItemProps & React.RefAttributes<HTMLDivElement>>;
+interface DropdownMenuLabelProps extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> {
+    inset?: boolean;
+}
+declare const DropdownMenuLabel: React.ForwardRefExoticComponent<DropdownMenuLabelProps & React.RefAttributes<HTMLDivElement>>;
+interface DropdownMenuSeparatorProps extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator> {
+}
+declare const DropdownMenuSeparator: React.ForwardRefExoticComponent<DropdownMenuSeparatorProps & React.RefAttributes<HTMLDivElement>>;
+interface DropdownMenuShortcutProps extends React.HTMLAttributes<HTMLSpanElement> {
+}
+declare const DropdownMenuShortcut: React.ForwardRefExoticComponent<DropdownMenuShortcutProps & React.RefAttributes<HTMLSpanElement>>;
+interface ActionsMenuButtonProps extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Trigger> {
+    /** Size of the ellipsis icon */
+    iconSize?: 'sm' | 'default' | 'lg';
+}
+declare const ActionsMenuButton: React.ForwardRefExoticComponent<ActionsMenuButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuGroup, DropdownMenuPortal, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuRadioGroup, ActionsMenuButton, };
+export type { DropdownMenuContentProps, DropdownMenuItemProps, DropdownMenuCheckboxItemProps, DropdownMenuRadioItemProps, DropdownMenuLabelProps, DropdownMenuSeparatorProps, DropdownMenuShortcutProps, DropdownMenuSubTriggerProps, DropdownMenuSubContentProps, ActionsMenuButtonProps, };

package/dist/components/ui/DropdownMenu/index.d.ts

@@ -0,0 +1,2 @@
+export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuGroup, DropdownMenuPortal, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuRadioGroup, ActionsMenuButton, } from './DropdownMenu';
+export type { DropdownMenuContentProps, DropdownMenuItemProps, DropdownMenuCheckboxItemProps, DropdownMenuRadioItemProps, DropdownMenuLabelProps, DropdownMenuSeparatorProps, DropdownMenuShortcutProps, DropdownMenuSubTriggerProps, DropdownMenuSubContentProps, ActionsMenuButtonProps, } from './DropdownMenu';

package/dist/components/ui/Eyebrow/Eyebrow.d.ts

@@ -0,0 +1,11 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+declare const eyebrowVariants: (props?: ({
+    variant?: "primary" | "secondary" | "default" | null | undefined;
+    size?: "sm" | "default" | "lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface EyebrowProps extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof eyebrowVariants> {
+    asChild?: boolean;
+}
+declare const Eyebrow: React.ForwardRefExoticComponent<EyebrowProps & React.RefAttributes<HTMLSpanElement>>;
+export { Eyebrow, eyebrowVariants };

package/dist/components/ui/Eyebrow/index.d.ts

@@ -0,0 +1,2 @@
+export { Eyebrow, eyebrowVariants } from './Eyebrow';
+export type { EyebrowProps } from './Eyebrow';

package/dist/components/ui/FormField/FormField.d.ts

@@ -0,0 +1,32 @@
+import * as React from 'react';
+interface FormFieldProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** The label for the field */
+    label?: string;
+    /** The size of the label */
+    labelSize?: 'default' | 'sm';
+    /** An optional hint message */
+    hint?: string;
+    /** An optional error message */
+    error?: string;
+    /** The id for the form control (used for htmlFor on label) */
+    htmlFor?: string;
+}
+/**
+ * Form field wrapper component for consistent form layouts.
+ * Composes Label, children (form control), and FormMessage.
+ * Simple presentational wrapper following Engrate brand guidelines.
+ *
+ * @example
+ * ```tsx
+ * <FormField label="Email" htmlFor="email" hint="We'll never share your email.">
+ *   <Input id="email" placeholder="you@example.com" />
+ * </FormField>
+ *
+ * <FormField label="Password" htmlFor="password" error="Password is required">
+ *   <Input id="password" type="password" variant="error" />
+ * </FormField>
+ * ```
+ */
+declare const FormField: React.ForwardRefExoticComponent<FormFieldProps & React.RefAttributes<HTMLDivElement>>;
+export { FormField };
+export type { FormFieldProps };

package/dist/components/ui/FormField/index.d.ts

@@ -0,0 +1,2 @@
+export { FormField } from './FormField';
+export type { FormFieldProps } from './FormField';

package/dist/components/ui/FormMessage/FormMessage.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+interface FormMessageProps extends React.HTMLAttributes<HTMLParagraphElement> {
+    /** The type of message to display */
+    variant?: 'default' | 'error';
+}
+/**
+ * Form message component for displaying hints or error messages.
+ * Following Engrate brand guidelines.
+ *
+ * @example
+ * ```tsx
+ * <FormMessage>This is a hint message</FormMessage>
+ * <FormMessage variant="error">This field is required</FormMessage>
+ * ```
+ */
+declare const FormMessage: React.ForwardRefExoticComponent<FormMessageProps & React.RefAttributes<HTMLParagraphElement>>;
+export { FormMessage };
+export type { FormMessageProps };

package/dist/components/ui/FormMessage/index.d.ts

@@ -0,0 +1,2 @@
+export { FormMessage } from './FormMessage';
+export type { FormMessageProps } from './FormMessage';