@surstromming/date-picker 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Evgeniy Mnatsakanov
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,87 @@
+# @surstromming/date-picker
+
+A field-shaped trigger that opens a [`Calendar`](../calendar) in a
+[`Popover`](../popover). Pure composition — it owns the open state, the label,
+and nothing else.
+
+## Dependency graph
+
+```mermaid
+graph LR
+  date_picker["@surstromming/date-picker"]
+  button["@surstromming/button"]
+  calendar["@surstromming/calendar"]
+  design["@surstromming/design"]
+  icon["@surstromming/icon"]
+  popover["@surstromming/popover"]
+  scroll_area["@surstromming/scroll-area"]
+  util["@surstromming/util"]
+  date_picker --> button
+  button --> design
+  date_picker --> calendar
+  calendar --> button
+  calendar --> design
+  calendar --> icon
+  date_picker --> design
+  date_picker --> icon
+  date_picker --> popover
+  popover --> design
+  popover --> scroll_area
+  scroll_area --> design
+  scroll_area --> util
+```
+
+## Usage
+
+```vue
+<template>
+  <Label id="due-label">Due date</Label>
+  <DatePicker v-model="due" :min="today" aria-labelledby="due-label" />
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { DatePicker } from '@surstromming/date-picker'
+
+const due = ref<Date | null>(null)
+const today = new Date()
+</script>
+```
+
+## Props
+
+| Prop            | Type                       | Default        | Notes                                        |
+| --------------- | -------------------------- | -------------- | -------------------------------------------- |
+| `v-model`       | `Date \| null`             | `null`         | The selected day                             |
+| `v-model:open`  | `boolean`                  | `false`        | Bindable if the app has to drive it          |
+| `placeholder`   | `string`                   | `'Pick a date'`| Shown while nothing is selected              |
+| `format`        | `(date: Date) => string`   | —              | Overrides the default `Intl` medium date     |
+| `min` / `max`   | `Date`                     | —              | Forwarded to the calendar                    |
+| `isDisabled`    | `(date: Date) => boolean`  | —              | Forwarded to the calendar                    |
+| `weekStartsOn`  | `sunday \| monday`         | `monday`       | Forwarded to the calendar                    |
+| `locale`        | `string`                   | —              | Label and calendar; omitted means the browser's |
+| `disabled`      | `boolean`                  | `false`        |                                              |
+
+### Fallthrough
+
+`inheritAttrs: false` — `id`, `aria-*` and listeners land on the **trigger
+button**, so a `Label`'s `for` reaches the focusable control.
+
+## Anatomy
+
+```
+Popover
+├── trigger  Button outline, full width, left-aligned — a field, not a button
+│            📅  "22 Jul 2026"   (placeholder in muted-foreground)
+└── Calendar picking a day closes the popover
+```
+
+There's no typed text entry. A date you can type is a different control — an
+`Input` with parsing and its own error state — and folding it in here would make
+one component own two input models.
+
+## Accessibility
+
+The trigger is a real button carrying `aria-haspopup="dialog"` and
+`aria-expanded`; the popover closes on Escape and outside click. Everything
+inside is the calendar's.

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@surstromming/date-picker",
+  "version": "0.1.0",
+  "description": "A field that opens a calendar to pick a date.",
+  "license": "MIT",
+  "author": "Evgeniy Mnatsakanov <evgeniy.mnatsakanov@gmail.com>",
+  "homepage": "https://github.com/hackteck/surstromming/tree/main/packages/date-picker#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/hackteck/surstromming.git",
+    "directory": "packages/date-picker"
+  },
+  "bugs": "https://github.com/hackteck/surstromming/issues",
+  "keywords": [
+    "vue",
+    "vue3",
+    "component-library",
+    "design-system",
+    "ui",
+    "scss",
+    "css-modules",
+    "shadcn",
+    "date-picker"
+  ],
+  "type": "module",
+  "sideEffects": [
+    "**/*.scss",
+    "**/*.css"
+  ],
+  "files": [
+    "src"
+  ],
+  "main": "./src/index.ts",
+  "module": "./src/index.ts",
+  "types": "./src/index.ts",
+  "exports": {
+    ".": "./src/index.ts"
+  },
+  "dependencies": {
+    "@surstromming/button": "^0.1.0",
+    "@surstromming/calendar": "^0.1.0",
+    "@surstromming/design": "^0.1.0",
+    "@surstromming/icon": "^0.1.0",
+    "@surstromming/popover": "^0.1.0"
+  },
+  "peerDependencies": {
+    "vue": "^3.4.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/DatePicker.vue

@@ -0,0 +1,98 @@
+<template>
+  <Popover v-model:open="open">
+    <template #trigger>
+      <Button
+        :class="triggerClasses"
+        variant="outline"
+        :disabled="disabled"
+        aria-haspopup="dialog"
+        :aria-expanded="open"
+        v-bind="$attrs"
+        @click="toggle"
+      >
+        <Icon :icon="CalendarDays" :size="16" />
+        <span :class="$style.label">{{ label }}</span>
+      </Button>
+    </template>
+
+    <Calendar
+      v-model="model"
+      :min="min"
+      :max="max"
+      :is-disabled="isDisabled"
+      :week-starts-on="weekStartsOn"
+      :locale="locale"
+      @update:model-value="open = false"
+    />
+  </Popover>
+</template>
+
+<script setup lang="ts">
+import { computed, useCssModule } from 'vue'
+import { Button } from '@surstromming/button'
+import { Calendar, type WeekStart } from '@surstromming/calendar'
+import { Icon } from '@surstromming/icon'
+import { Popover } from '@surstromming/popover'
+import { CalendarDays } from 'lucide'
+
+// The trigger is the focusable control — id/aria belong on it, not the wrapper.
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(
+  defineProps<{
+    placeholder?: string
+    /** How the chosen date is written on the trigger. */
+    format?: (date: Date) => string
+    min?: Date
+    max?: Date
+    isDisabled?: (date: Date) => boolean
+    weekStartsOn?: WeekStart
+    /** BCP 47 tag for the label and the calendar; omitted means the browser's. */
+    locale?: string
+    disabled?: boolean
+  }>(),
+  { placeholder: 'Pick a date', weekStartsOn: 'monday' },
+)
+
+const model = defineModel<Date | null>({ default: null })
+
+const open = defineModel<boolean>('open', { default: false })
+
+const toggle = () => {
+  open.value = !open.value
+}
+
+const label = computed(() => {
+  const date = model.value
+  if (!date) return props.placeholder
+  if (props.format) return props.format(date)
+  return new Intl.DateTimeFormat(props.locale, { dateStyle: 'medium' }).format(date)
+})
+
+const $style = useCssModule()
+const triggerClasses = computed(() => [
+  $style.trigger,
+  { [$style.isPlaceholder]: model.value === null },
+])
+</script>
+
+<style module lang="scss">
+@use '@surstromming/design' as design;
+
+// Left-aligned and full-width: it reads as a field, not as a button.
+.trigger {
+  justify-content: flex-start;
+  width: 100%;
+  font-weight: 400;
+}
+
+.isPlaceholder {
+  color: design.color(muted-foreground);
+}
+
+.label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+</style>

package/src/index.ts

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