Add DatePicker component to @geajs/ui

.changeset/add-date-picker.md

@@ -0,0 +1,7 @@
+---
+"@geajs/ui": minor
+---
+
+### @geajs/ui (minor)
+
+- **DatePicker**: Add new Date Picker component powered by @zag-js/date-picker with day, month, and year views, keyboard navigation, and full accessibility support

docs/gea-ui/interactive-components.md

@@ -641,6 +641,58 @@ ToastStore.loading({ title: 'Loading...', description: 'Please wait.' })
 | `type` | `'success' \| 'error' \| 'info' \| 'loading'` | Toast variant (set automatically by convenience methods) |
 | `duration` | `number` | Auto-dismiss delay in milliseconds (default: 5000) |
 
+## Date Picker
+
+Calendar date selection with day, month, and year views, keyboard navigation, and full accessibility support. Powered by `@zag-js/date-picker`.
+
+```tsx
+import { DatePicker } from '@geajs/ui'
+
+<DatePicker
+  label="Date of Birth"
+  onValueChange={(details) => console.log(details.valueAsString)}
+/>
+```
+
+### Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `label` | `string` | — | Label text above the input |
+| `value` | `DateValue[]` | — | Controlled selected date(s) |
+| `defaultValue` | `DateValue[]` | — | Initial selected date(s) |
+| `focusedValue` | `DateValue` | — | Controlled focused date |
+| `defaultFocusedValue` | `DateValue` | — | Initial focused date |
+| `open` | `boolean` | — | Controlled open state |
+| `defaultOpen` | `boolean` | — | Initial open state |
+| `disabled` | `boolean` | — | Disable the date picker |
+| `readOnly` | `boolean` | — | Make the date picker read-only |
+| `required` | `boolean` | — | Mark as required for form validation |
+| `invalid` | `boolean` | — | Mark the input as invalid |
+| `min` | `DateValue` | — | Minimum selectable date |
+| `max` | `DateValue` | — | Maximum selectable date |
+| `locale` | `string` | `'en-US'` | Locale for formatting |
+| `timeZone` | `string` | `'UTC'` | IANA time zone |
+| `selectionMode` | `'single' \| 'multiple' \| 'range'` | `'single'` | How dates are selected |
+| `closeOnSelect` | `boolean` | `true` | Close the popover after selecting a date |
+| `name` | `string` | — | Name attribute for form submission |
+| `placeholder` | `string` | — | Placeholder text for the input |
+| `inline` | `boolean` | — | Render the calendar inline (no popover) |
+| `startOfWeek` | `number` | — | First day of the week (0 = Sunday) |
+| `fixedWeeks` | `boolean` | — | Always show 6 weeks in the day view |
+| `view` | `'day' \| 'month' \| 'year'` | — | Controlled calendar view |
+| `defaultView` | `'day' \| 'month' \| 'year'` | `'day'` | Initial calendar view |
+| `isDateUnavailable` | `(date: DateValue) => boolean` | — | Mark specific dates as unavailable |
+| `positioning` | `PositioningOptions` | — | Popover positioning options |
+| `format` | `(date: DateValue) => string` | — | Custom date formatting function |
+| `parse` | `(value: string) => DateValue[]` | — | Custom date parsing function |
+| `onValueChange` | `(details: { value: DateValue[], valueAsString: string[] }) => void` | — | Called when the selected date changes |
+| `onOpenChange` | `(details: { open: boolean }) => void` | — | Called when the popover opens or closes |
+| `onViewChange` | `(details: { view: string }) => void` | — | Called when the calendar view changes |
+| `onFocusChange` | `(details: { focusedValue: DateValue, view: string }) => void` | — | Called when the focused date changes |
+
+**Note:** `DateValue` types come from `@internationalized/date`, a peer dependency of `@zag-js/date-picker`.
+
 ## Tree View
 
 A hierarchical tree for displaying nested data. Accepts a Zag tree `collection` for full control over the data structure.

docs/gea-ui/overview.md

@@ -66,6 +66,7 @@ Backed by Zag.js state machines — full keyboard navigation, ARIA attributes, a
 | [Menu](interactive-components.md#menu) | Dropdown menu with typeahead |
 | [Select](interactive-components.md#select) | Dropdown select with keyboard navigation |
 | [Combobox](interactive-components.md#combobox) | Searchable dropdown |
+| [Date Picker](interactive-components.md#date-picker) | Calendar date selection with day, month, and year views |
 | [Switch](interactive-components.md#switch) | Toggle switch |
 | [Checkbox](interactive-components.md#checkbox) | Checkbox with indeterminate support |
 | [Radio Group](interactive-components.md#radio-group) | Radio button group |

examples/showcase/app.tsx

@@ -9,6 +9,7 @@ import Checkbox from '@geajs/ui/checkbox'
 import Clipboard from '@geajs/ui/clipboard'
 import Collapsible from '@geajs/ui/collapsible'
 import Combobox from '@geajs/ui/combobox'
+import DatePicker from '@geajs/ui/date-picker'
 import Dialog from '@geajs/ui/dialog'
 import FileUpload from '@geajs/ui/file-upload'
 import HoverCard from '@geajs/ui/hover-card'
@@ -279,6 +280,16 @@ export default class App extends Component {
               </div>
             </div>
 
+            <div class="component-card">
+              <div class="component-card-header">
+                <h3>Date Picker</h3>
+                <p>Calendar date selection with day, month, and year views.</p>
+              </div>
+              <div class="component-card-body">
+                <DatePicker label="Date of Birth" />
+              </div>
+            </div>
+
             <div class="component-card">
               <div class="component-card-header">
                 <h3>Switch</h3>
@@ -591,7 +602,7 @@ export default class App extends Component {
 
         <Separator class="my-6" />
 
-        <p class="footer-note">gea-ui — {35} components. Built with Gea, Zag.js, and Tailwind CSS.</p>
+        <p class="footer-note">gea-ui — {39} components. Built with Gea, Zag.js, and Tailwind CSS.</p>
 
         <Toaster />
       </div>

packages/gea-ui/README.md

@@ -406,6 +406,17 @@ import { Combobox } from '@geajs/ui'
 />
 ```
 
+#### Date Picker
+
+```tsx
+import { DatePicker } from '@geajs/ui'
+
+<DatePicker
+  label="Date of Birth"
+  onValueChange={(details) => console.log(details.valueAsString)}
+/>
+```
+
 #### Collapsible
 
 ```tsx

packages/gea-ui/package.json

@@ -60,6 +60,7 @@
     "@zag-js/clipboard": "^1.37.0",
     "@zag-js/collapsible": "^1.37.0",
     "@zag-js/combobox": "^1.37.0",
+    "@zag-js/date-picker": "^1.37.0",
     "@zag-js/dialog": "^1.37.0",
     "@zag-js/file-upload": "^1.37.0",
     "@zag-js/hover-card": "^1.37.0",