feat: DateTimeField beta (#1275)

* chore: renames DateTimePicker to BookingDateTime

* wip: draft DateTimeInput

* wip: DateTimeInput interaction and styling

* refactor: more consistent text default handling, type export

* wip: handle default unselected date

* wip: DateTimeInput

* fix: Calendar fluid layout

* feat: adjust date formatting display

* wip: DateTimeInput

* wip: DateTimeInput

* wip: useDateTimeInput hook

* wip: DateTimeInput ref forwarding

* wip: adds disabled, invalid and loading states to DateTimeInput

* chore: disabling lint-staged for now

* test: DateTimeInput spec and play function

* chore: agent file

* refactor: breaking down the DateTimeInput composite into modules

* refactor: DateTimeInput into DateSelector child component

* feat: allow PopoverTrigger to accept external ref

* chore: rename sub-components, tidy up dateFormat

* feat: improver interactions in the DateField

* feat: extract useCalendarPopover hook for reuse

* wip: documenting

* fix: DateField states

* fix: TimeField value handling, DateTimeInput spec

* test: DateTimeInput stories

* refactor: DatePicker uses shared hook

* chore: renames to DateTimeField

* Update lib/components/DateTimeField/DateTimeField.tsx

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* Update AGENTS.md

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* Update AGENTS.md

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* refactor: minor DatePicker clean up

* chore: removed the unused BookingDateTime beta component use Calendar and OptionGrid directly instead

* fix: consistent mock date for Calendar visual regression

---------

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Author: skinread

.changeset/bitter-suits-jog.md

@@ -0,0 +1,6 @@
+---
+'@autoguru/overdrive': minor
+---
+
+**DateTimeField** beta: New component available for vertically stacked date and
+time selection.

.changeset/ten-mice-dream.md

@@ -0,0 +1,6 @@
+---
+'@autoguru/overdrive': patch
+---
+
+**Removed**: BookingDateTime beta component as it is unused. Preferred to
+combine Calendar with OptionGrid directly.

.husky/pre-commit

@@ -1,2 +1,2 @@
 yarn run format
-yarn dlx lint-staged
+# yarn dlx lint-staged

AGENTS.md

@@ -0,0 +1,110 @@
+# Overdrive Design System Rules
+
+Rules for building accessible, reusable React components in AutoGuru's design
+system. Use MUST/SHOULD/NEVER to guide decisions.
+
+## Architecture
+
+- MUST: Compose from primitives (useBox, Text, FlexStack) rather than creating
+  new base elements **or** an equivalent styling helper functions listed below
+- NEVER: Add new dependencies without approval - use existing dependencies only
+- SHOULD: Use React Aria for new components to ensure accessibility
+- SHOULD: Extend `TestId` interface for all components to receive `testId` prop
+- SHOULD: Set `displayName` on all components for debugging
+- SHOULD: Set `odComponent` prop to component name on Box for composite
+  components
+
+## Styling
+
+- MUST: Use Vanilla Extract CSS-in-TypeScript for all styling
+- MUST: Use design tokens from `/lib/themes/theme.css.ts` - no hardcoded values
+- MUST: Prefer style functions (`elementStyles`/`sprinkles`/`textStyles`) over
+  `<Box>` component
+- NEVER: Use inline styles or magic numbers
+- SHOULD: Use `dataAttrs` helper for state-based styling via data attributes
+- SHOULD: Use `sprinkles` function for responsive and utility styles
+- SHOULD: Wrap all component styles in `cssLayerComponent` CSS layer
+
+## Development Commands
+
+```bash
+yarn test run ComponentName # Run specific component tests
+yarn format                   # Format the project consistently
+yarn lint                     # Run ESLint and TypeScript checks
+yarn plop component           # Generate new component scaffold
+```
+
+### Directory Structure
+
+```
+lib/
+├── components/         # All UI components
+├── hooks/              # Reusable React hooks
+├── styles/             # Vanilla Extract styling system
+├── themes/             # Design tokens and themes
+├── utils/              # Utility functions
+└── types/              # TypeScript type definitions
+```
+
+## Component Structure
+
+```
+lib/components/ComponentName/
+├── ComponentName.tsx         # Component logic
+├── ComponentName.css.ts      # Vanilla Extract styles
+├── ComponentName.stories.tsx # Storybook stories
+├── ComponentName.spec.tsx    # Unit tests
+└── index.ts                  # Exports
+```
+
+## Props & TypeScript
+
+- MUST: Define comprehensive TypeScript props with JSDoc comments and export
+  them
+- MUST: Prefer extending exisiting interfaces/types, keep names consistent
+- MUST: Use kebab-case for prop values that mirror CSS (e.g., `flex-end`)
+- NEVER: Use `any` types - use `unknown` or proper types
+
+## Sprinkles Usage
+
+- MUST: Use responsive patterns: arrays `['block', 'flex']` or objects
+  `{mobile: 'block', tablet: 'flex'}`
+- MUST: Use design system breakpoints:
+  `mobile | tablet | desktop | largeDesktop`
+- SHOULD: Use `color` (American) for new design system tokens
+- SHOULD: Use `colour` (British) for legacy palette when needed
+- SHOULD: Use space tokens (`'1'` to `'9'`) for dimensions and spacing
+
+## Testing & Storybook
+
+- MUST: Create Storybook stories for all components (primary testing method)
+- MUST: Use existing top-level categories
+- MUST: Use `getAllByRole` and take first item instead of `getByRole` in
+  Storybook play functions
+- MUST: Test 1 story per component: Interaction Test
+- MUST: Use semantic queries in tests instead of test IDs
+- SHOULD: Create unit tests only for primitives with complex internal logic
+- SHOULD: Organise story play functions into smaller tests with `step` funtions
+
+## Quality Standards
+
+- MUST: Use semantic HTML and proper ARIA attributes
+- MUST: Fix all ESLint and TypeScript errors before committing
+- MUST: Run `yarn lint` and `yarn test:ci` to verify code quality
+- NEVER: Leave unused imports, console statements, or missing displayNames
+
+## Accessibility
+
+- MUST: Full keyboard support per
+  [WAI-ARIA APG](https://www.w3.org/WAI/ARIA/apg/patterns/)
+- MUST: Visible focus rings and proper focus management
+- MUST: Ensure visible focus indicators with `:focus-visible`
+- MUST: Support screen readers with proper ARIA attributes
+- MUST: Provide accessible names and hide decorative elements with `aria-hidden`
+
+## Performance
+
+- MUST: Minimise re-renders
+- SHOULD: Rely on React 19's automatic compiler optimizations where possible
+- SHOULD: Manual optimization only for heavy computations, complex
+  transformations, and expensive renders

CLAUDE.md

@@ -12,20 +12,17 @@ UI components.
 
 ## Common Development Commands
 
-### Development and Testing
-
-- `yarn start` or `yarn storybook` - Start Storybook dev server on port 6006
-- `yarn test` - Run unit tests with Vitest
-- `yarn test:ci` - Run tests with coverage for CI
-- `yarn test:a11y` - Run accessibility tests via Storybook
-
 ### Building and Quality Checks
 
 - `yarn build` - Build the library for distribution
-- `yarn lint` - Run ESLint and TypeScript checks
-- `yarn lint:eslint` - Run ESLint only
-- `yarn lint:tsc` - Run TypeScript type checking only
 - `yarn format` - Format code with Prettier
+- `yarn lint` - Run ESLint and TypeScript checks
+
+### Key Testing Commands
+
+- `yarn test run ComponentName` - Run specific component tests
+- `yarn test run ComponentName -u` - Update snapshots if needed
+- `yarn test:a11y` - Run accessibility tests via Storybook
 
 ### Storybook
 
@@ -41,160 +38,17 @@ Note: The Vitest configuration uses the modern `test.projects` field in
 `vite.config.ts` for workspace configuration, replacing the deprecated
 `vitest.workspace.ts` file.
 
-## Architecture and Code Structure
-
-### Directory Structure
-
-```
-lib/
-├── components/         # All UI components
-├── hooks/              # Reusable React hooks
-├── styles/             # Vanilla Extract styling system
-├── themes/             # Design tokens and themes
-├── utils/              # Utility functions
-└── types/              # TypeScript type definitions
-```
-
-### Component Architecture
-
-Components follow a consistent structure:
-
-```
-lib/components/ComponentName/
-├── ComponentName.tsx         # Component logic
-├── ComponentName.css.ts      # Vanilla Extract styles
-├── ComponentName.stories.tsx # Storybook stories
-├── ComponentName.spec.tsx    # Unit tests (for internals only)
-└── index.ts                  # Exports
-```
+## Architecture, Design System Rules, Testing Strategy and Code Quality Standards
 
-### Styling System
+Key requirements:
 
-- **Vanilla Extract** for all styling via CSS-in-TypeScript
-- **Sprinkles** utility system for consistent spacing, colors, and responsive
-  design
-- **Design tokens** from `/lib/themes/theme.css.ts` must be used for all values
-- State-based styling uses data attributes with the `dataAttrs` helper utility
-
-### Component Composition Patterns
-
-- Build from primitives: Box, Text, Icon, Stack, etc.
-- All components extend `TestId` to receive `testId` prop
-- Composite components set `odComponent` prop to component name on Box
-- Use React Aria for interactive components to ensure accessibility
-- Components must have `displayName` set
-- **Component styles**: `style` function properties should always be wrapped in
-  the `cssLayerComponent` css layer
-
-## Critical Development Rules
-
-1. **NO new dependencies** - use existing dependencies only
-2. **Always use design tokens** from themes - no hardcoded values
-3. **Compose from primitives** rather than creating new base elements
-4. **Style functions preferred** such as `elementStyles`/`sprinkles` or the
-   `useBox` hook or in the className, rather than using the <Box> component
-5. **Fix all linting/TypeScript errors** in modified files before committing
-6. **Set displayName** on all components
-7. **Use React Aria** for interactive elements to ensure accessibility
-8. **State affects UI via data attributes** managed by `dataAttrs` helper
-9. **Storybook play functions** for interaction testings are always organised
-   using `step` annotations
-
-## Performance Considerations
-
-React 19's compiler handles most memoization automatically. Manual optimization
-still needed for:
-
-- Heavy computational functions inside components
-- Complex object/array transformations
-- Event handlers passed to many children
-- Expensive child component renders with stable props
-
-## Testing Strategy
-
-### When to Create Tests
-
-- **Unit tests (.spec.tsx)**: Only for primitives with complex internal logic,
-  significant state management, or critical accessibility features
-- **Storybook stories (.stories.tsx)**: Primary testing method - required for
-  all components
-
-### Testing Commands
-
-- `yarn test ComponentName` - Run specific component tests
-- `yarn test ComponentName -u` - Update snapshots if needed
-- `yarn test:a11y` - Run accessibility tests via Storybook
+- Fix all ESLint and TypeScript errors before committing
+- Use JSDoc comments on props and consistent naming conventions
+- No hardcoded values - use design tokens only
 
-### Storybook Stories Requirements
-
-- Focus on user-facing behavior over implementation details
-- Aim for ~5 stories per component: Standard, Variants, Interactive States, Edge
-  Cases, Accessibility
-- Use story categories: `Primitives/`, `Layout/`, `Forms/`, `Navigation/`,
-  `Feedback/`, `Overlays/`, `Data Display/`
-- Include play functions for interactive components, and always query with
-  `getAllbyRole` and take first item in array instead of `getByRole` or any
-  other variety of get
-- Use `composeStories` in spec files instead of testing components directly
-- Use `sprinkles` function for styling in stories, never `style` prop
-- Use `valueArrays` to populate argTypes, don't add custom `control` or
-  `description`
-
-### Story Enhancement Patterns
-
-```typescript
-// Stories with play functions
-import { expect, userEvent, within } from 'storybook/test';
-
-export const Interactive: Story = {
-  args: {
-    /* story args */
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const user = userEvent.setup();
-
-    // Test interaction
-    await user.click(canvas.getByRole('button'));
-
-    // Verify result
-    expect(canvas.getByRole('button')).toHaveAttribute('aria-pressed', 'true');
-  },
-};
-```
-
-### Accessibility Testing Requirements
-
-- Keyboard navigation (Tab, Enter, Space, Escape, Arrow keys)
-- Screen reader compatibility (proper ARIA attributes)
-- Focus management and visual focus indicators
-- Color contrast requirements
-- Test using semantic queries (`getAllByRole`, `getAllByLabelText`) over test
-  IDs
-
-### Testing Patterns
-
-- Use `@testing-library/user-event` for interactions
-- Prefer decorators over custom render functions in stories
-- Test stories first via `composeStories`, then component-specific logic
-- Mock external dependencies appropriately
-- Use snapshot testing sparingly
-
-## Code Quality Standards
-
-All modified files must be free of:
-
-- ESLint errors
-- TypeScript errors
-- Unused imports
-- Console statements
-- Missing displayName on components
-- Inline styles (use Vanilla Extract)
-- Magic numbers (use design tokens)
-- `any` types (use `unknown` or proper types)
-
-Components require JSDoc comments on props and consistent naming conventions
-following the existing codebase patterns.
+**For complete design system rules, patterns, and best practices, testing
+guidelines, accessibility requirements, and Storybook patterns see
+[AGENTS.md](./AGENTS.md)**
 
 ## Vanilla Extract Sprinkles Reference
 

lib/components/Calendar/Calendar.css.ts

@@ -29,10 +29,11 @@ export const calendarStyle = style([
 export const cellStyle = style([
 	sprinkles({
 		alignItems: 'center',
+		borderRadius: 'md',
 		display: 'flex',
+		mx: 'auto',
 		justifyContent: 'center',
 		size: '7',
-		borderRadius: 'md',
 	}),
 	{
 		'@layer': {
@@ -113,7 +114,6 @@ export const thStyle = style({
 
 export const tdStyle = sprinkles({
 	padding: '1',
-	textAlign: 'center',
 });
 
 // === Heading styles