Ati/cl 268 add date picker

app/pages/components/DatePicker.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+/* eslint-disable no-useless-escape */
+import { ref } from "vue"
+import { DatePicker } from "@/components/date-picker"
+import type { DateValue } from "@internationalized/date"
+import { CodeBlock, ComponentHeading } from "@app/components"
+
+const value = ref<DateValue>()
+
+const code = `<script setup lang="ts">
+import { ref } from 'vue'
+import { DatePicker } from '@codinglabsau/gooey'
+import type { DateValue } from '@internationalized/date'
+
+const value = ref<DateValue>()
+<\/script>
+
+<template>
+  <DatePicker v-model="value" />
+</template>`
+</script>
+
+<template>
+  <div>
+    <ComponentHeading>Basic Usage</ComponentHeading>
+
+    <p class="mt-2 text-sm text-muted-foreground">
+      DatePicker bundles a Popover, a Button trigger and a Calendar into a single component with a
+      <code>DateValue</code> v-model — handy for forms that expect a single component entry point.
+    </p>
+
+    <div class="mt-4 flex items-center gap-4">
+      <DatePicker v-model="value" data-cy="basic" />
+
+      <span v-if="value" class="text-sm text-muted-foreground" data-cy="selected-value">
+        Selected: {{ value }}
+      </span>
+    </div>
+
+    <CodeBlock class="mt-4" lang="vue" :code="code" />
+
+    <ComponentHeading class="mt-8">Disabled</ComponentHeading>
+
+    <div class="mt-4">
+      <DatePicker placeholder="Pick a date" disabled data-cy="disabled" />
+    </div>
+  </div>
+</template>

app/pages/index.ts

@@ -29,6 +29,7 @@ export { default as Combobox } from "./components/Combobox.vue"
 export { default as Command } from "./components/Command.vue"
 export { default as ConfirmDialog } from "./components/ConfirmDialog.vue"
 export { default as ContextMenu } from "./components/ContextMenu.vue"
+export { default as DatePicker } from "./components/DatePicker.vue"
 export { default as Dialog } from "./components/Dialog.vue"
 export { default as Drawer } from "./components/Drawer.vue"
 export { default as DropdownMenu } from "./components/DropdownMenu.vue"

app/router/index.ts

@@ -33,6 +33,7 @@ import {
   Command,
   ConfirmDialog,
   ContextMenu,
+  DatePicker,
   Dialog,
   Drawer,
   DropdownMenu,
@@ -317,6 +318,12 @@ const routes = [
         component: Checkbox,
         meta: { layout: ComponentLayout, shadcn: true, title: "Checkbox" },
       },
+      {
+        name: "Date Picker",
+        path: "/components/date-picker",
+        component: DatePicker,
+        meta: { layout: ComponentLayout, title: "Date Picker" },
+      },
       {
         name: "Field",
         path: "/components/field",

app/router/navigation.ts

@@ -65,6 +65,7 @@ export const navigation: NavigationGroup[] = [
     children: [
       { name: "Calendar", path: "/components/calendar" },
       { name: "Checkbox", path: "/components/checkbox" },
+      { name: "Date Picker", path: "/components/date-picker" },
       { name: "Field", path: "/components/field" },
       { name: "Form", path: "/components/form" },
       { name: "Input", path: "/components/input" },

dist/types/components/accordion/Accord.vue.d.ts

@@ -22,7 +22,7 @@ declare const __VLS_component: import('vue').DefineComponent<ExtendedAccordionRo
 }, string, import('vue').PublicProps, Readonly<ExtendedAccordionRootProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: string | string[] | undefined) => any) | undefined;
 }>, {
-    type: "single" | "multiple";
+    type: import('reka-ui').SingleOrMultipleType;
     collapsible: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;

dist/types/components/button-group/ButtonGroupSeparator.vue.d.ts

@@ -4,6 +4,6 @@ type __VLS_Props = SeparatorProps & {
     class?: HTMLAttributes["class"];
 };
 declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    orientation: "vertical" | "horizontal";
+    orientation: import('reka-ui').DataOrientation;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 export default _default;

dist/types/components/command/CommandItem.vue.d.ts

@@ -9,7 +9,7 @@ declare function __VLS_template(): {
         default?(_: {}): any;
     };
     refs: {
-        itemRef: import('vue').ShallowUnwrapRef<{}> | null;
+        itemRef: {} | null;
     };
     rootEl: any;
 };
@@ -19,7 +19,7 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}
 }, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
     onSelect?: ((event: import('reka-ui').ListboxItemSelectEvent<import('reka-ui').AcceptableValue>) => any) | undefined;
 }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
-    itemRef: import('vue').ShallowUnwrapRef<{}> | null;
+    itemRef: {} | null;
 }, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;

dist/types/components/date-picker/DatePicker.vue.d.ts

@@ -0,0 +1,20 @@
+import { HTMLAttributes } from 'vue';
+import { DateValue } from '@internationalized/date';
+type __VLS_Props = {
+    placeholder?: string;
+    disabled?: boolean;
+    locale?: string;
+    class?: HTMLAttributes["class"];
+};
+type __VLS_PublicProps = {
+    modelValue?: DateValue;
+} & __VLS_Props;
+declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: DateValue) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: DateValue) => any) | undefined;
+}>, {
+    placeholder: string;
+    locale: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;

dist/types/components/date-picker/index.d.ts

@@ -0,0 +1 @@
+export { default as DatePicker } from './DatePicker.vue';

dist/types/components/separator/Separator.vue.d.ts

@@ -4,7 +4,7 @@ type __VLS_Props = SeparatorProps & {
     class?: HTMLAttributes["class"];
 };
 declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    orientation: "vertical" | "horizontal";
+    orientation: import('reka-ui').DataOrientation;
     decorative: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 export default _default;

dist/types/components/tabs/Tabs.vue.d.ts

@@ -10,9 +10,9 @@ declare function __VLS_template(): {
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    "update:modelValue": (payload: string | number) => any;
+    "update:modelValue": (payload: import('reka-ui').StringOrNumber) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
-    "onUpdate:modelValue"?: ((payload: string | number) => any) | undefined;
+    "onUpdate:modelValue"?: ((payload: import('reka-ui').StringOrNumber) => any) | undefined;
 }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;

dist/types/index.d.ts

@@ -28,6 +28,7 @@ export * from './components/collapsible';
 export * from './components/combobox';
 export * from './components/command';
 export * from './components/context-menu';
+export * from './components/date-picker';
 export * from './components/dialog';
 export * from './components/drawer';
 export * from './components/dropdown-menu';