@mellow.io/ds 0.1.0 → 0.2.0

package/README.md

@@ -0,0 +1,230 @@
+# @mellow.io/ds
+
+Mellow Design System — a library of 32 UI components built with [Lit 3](https://lit.dev/) Web Components. Works with any framework or no framework at all.
+
+## Installation
+
+```bash
+npm install @mellow.io/ds
+```
+
+## Quick Start
+
+### HTML / Vanilla JS
+
+Import the components you need. Each import auto-registers the custom element.
+
+```html
+<script type="module">
+  import '@mellow.io/ds/button'
+  import '@mellow.io/ds/input'
+</script>
+
+<mellow-button variant="primary" size="md">Save</mellow-button>
+<mellow-input label="Email" placeholder="you@example.com"></mellow-input>
+```
+
+### React
+
+React wrappers handle property binding and event mapping via `@lit/react`.
+
+```tsx
+import { MellowButtonReact, MellowInputReact } from '@mellow.io/ds/react'
+
+function App() {
+  return (
+    <>
+      <MellowButtonReact variant="primary" size="md">
+        Save
+      </MellowButtonReact>
+      <MellowInputReact
+        label="Email"
+        placeholder="you@example.com"
+        onMellowChange={(e) => console.log(e.detail.value)}
+      />
+    </>
+  )
+}
+```
+
+### Import Strategies
+
+```ts
+// Full bundle — registers all 32 components at once
+import '@mellow.io/ds'
+
+// Per-component (tree-shakeable, recommended)
+import '@mellow.io/ds/button'
+import '@mellow.io/ds/tabs'
+
+// React wrappers
+import { MellowButtonReact } from '@mellow.io/ds/react'
+
+// TypeScript types only
+import type { ButtonVariant, ButtonSize } from '@mellow.io/ds/button'
+
+// Design tokens as CSS
+import '@mellow.io/ds/tokens'
+```
+
+## Components
+
+### Forms
+
+| Component | Tag | Description |
+|---|---|---|
+| [Button](docs/components.md#button) | `<mellow-button>` | Primary, secondary, brand, link variants with loading state |
+| [Input](docs/components.md#input) | `<mellow-input>` | Text input with label, error, helper, clearable, icon slots |
+| [Textarea](docs/components.md#textarea) | `<mellow-textarea>` | Multi-line input with character count |
+| [Checkbox](docs/components.md#checkbox) | `<mellow-checkbox>` | Checkbox with indeterminate state |
+| [Radio](docs/components.md#radio) | `<mellow-radio>` | Radio button (use inside `<mellow-radio-group>`) |
+| [Switch](docs/components.md#switch) | `<mellow-switch>` | Toggle switch |
+| [Select](docs/components.md#select) | `<mellow-select>` | Dropdown select with searchable option |
+| [Form Field](docs/components.md#form-field) | `<mellow-form-field>` | Wrapper providing label, error, hint for any input |
+| [Datepicker](docs/components.md#datepicker) | `<mellow-datepicker>` | Calendar with single/range selection, presets, min/max |
+
+### Primitives
+
+| Component | Tag | Description |
+|---|---|---|
+| [Badge](docs/components.md#badge) | `<mellow-badge>` | Status badge with 7 semantic variants |
+| [Tag](docs/components.md#tag) | `<mellow-tag>` | Selectable/removable chip |
+| [Icon](docs/components.md#icon) | `<mellow-icon>` | SVG icon with registry system |
+| [Divider](docs/components.md#divider) | `<mellow-divider>` | Horizontal/vertical separator |
+
+### Layout
+
+| Component | Tag | Description |
+|---|---|---|
+| [Card](docs/components.md#card) | `<mellow-card>` | Content container with header, icon, actions |
+| [Stack](docs/components.md#stack) | `<mellow-stack>` | Flex layout (row/column) |
+| [Grid](docs/components.md#grid) | `<mellow-grid>` | CSS grid layout |
+
+### Feedback
+
+| Component | Tag | Description |
+|---|---|---|
+| [Alert](docs/components.md#alert) | `<mellow-alert>` | Inline notification with 5 variants |
+| [Toast](docs/components.md#toast) | `<mellow-toast>` | Floating notification with auto-dismiss |
+| [Spinner](docs/components.md#spinner) | `<mellow-spinner>` | Loading spinner |
+| [Skeleton](docs/components.md#skeleton) | `<mellow-skeleton>` | Content placeholder |
+| [Progress](docs/components.md#progress) | `<mellow-progress>` | Progress bar |
+| [Stepper](docs/components.md#stepper) | `<mellow-stepper>` | Segmented step indicator |
+
+### Overlay
+
+| Component | Tag | Description |
+|---|---|---|
+| [Dialog](docs/components.md#dialog) | `<mellow-dialog>` | Modal dialog |
+| [Tooltip](docs/components.md#tooltip) | `<mellow-tooltip>` | Hover/focus tooltip with subtitle |
+| [Popover](docs/components.md#popover) | `<mellow-popover>` | Click/hover popover |
+| [Dropdown](docs/components.md#dropdown) | `<mellow-dropdown>` | Dropdown menu with search |
+
+### Navigation
+
+| Component | Tag | Description |
+|---|---|---|
+| [Tabs](docs/components.md#tabs) | `<mellow-tabs>` | Segmented tab navigation |
+| [Breadcrumb](docs/components.md#breadcrumb) | `<mellow-breadcrumb>` | Breadcrumb trail |
+| [Pagination](docs/components.md#pagination) | `<mellow-pagination>` | Page navigation |
+| [Link](docs/components.md#link) | `<mellow-link>` | Styled anchor |
+
+### Data
+
+| Component | Tag | Description |
+|---|---|---|
+| [Table](docs/components.md#table) | `<mellow-table>` | Data table with sorting, pagination, selection |
+| [Avatar](docs/components.md#avatar) | `<mellow-avatar>` | User avatar (image, initials, fallback) |
+| [Accordion](docs/components.md#accordion) | `<mellow-accordion>` | Collapsible sections |
+
+## Theming
+
+All visual values are exposed as CSS custom properties with sensible defaults. Override them at any scope.
+
+```css
+/* Global theme override */
+:root {
+  --mellow-colors-primary-mellow-orange: #ff6f23;
+  --mellow-text-primary: #232222;
+  --mellow-text-secondary: #8a8686;
+  --mellow-typography-font-family-body: 'Suisse Int\'l', system-ui, sans-serif;
+  --mellow-space-5: 20px;
+  --mellow-radius-2: 8px;
+}
+
+/* Per-component override */
+mellow-button {
+  --mellow-button-primary-default: #1a1a2e;
+  --mellow-button-primary-hovered: #16213e;
+}
+```
+
+### Token Categories
+
+| Prefix | Purpose | Examples |
+|---|---|---|
+| `--mellow-colors-*` | Color palette | `--mellow-colors-primary-mellow-orange` |
+| `--mellow-text-*` | Text colors | `--mellow-text-primary`, `--mellow-text-brand` |
+| `--mellow-bg-*` | Background colors | `--mellow-bg-surface-primary` |
+| `--mellow-button-*` | Button-specific colors | `--mellow-button-primary-default` |
+| `--mellow-space-*` | Spacing scale | `--mellow-space-1` (4px) through `--mellow-space-6` (24px) |
+| `--mellow-radius-*` | Border radius | `--mellow-radius-1` (4px) through `--mellow-radius-full` (9999px) |
+| `--mellow-font-size-*` | Font sizes | `--mellow-font-size-12` through `--mellow-font-size-18` |
+| `--mellow-line-height-*` | Line heights | `--mellow-line-height-14` through `--mellow-line-height-24` |
+| `--mellow-font-weight-*` | Font weights | `--mellow-font-weight-regular` (400), `--mellow-font-weight-medium` (500) |
+| `--mellow-typography-font-family-*` | Font families | `--mellow-typography-font-family-body` |
+
+## Events
+
+All custom events use the `mellow-` prefix, bubble, and are composed (cross shadow DOM boundaries).
+
+```ts
+// Vanilla JS
+document.querySelector('mellow-input')
+  .addEventListener('mellow-change', (e) => {
+    console.log(e.detail.value)
+  })
+
+// React (via wrappers)
+<MellowInputReact onMellowChange={(e) => console.log(e.detail.value)} />
+```
+
+| Event | Components | Detail |
+|---|---|---|
+| `mellow-change` | input, textarea, checkbox, radio-group, select, switch, datepicker | `{ value }` or `{ checked }` |
+| `mellow-input` | input, textarea | `{ value }` |
+| `mellow-select` | dropdown, tag, datepicker | `{ value }` or `{ selected }` |
+| `mellow-dismiss` | alert, toast | — |
+| `mellow-close` | dialog | — |
+| `mellow-toggle` | accordion-item, popover | `{ open }` |
+| `mellow-sort` | table | `{ column, direction }` |
+| `mellow-page-change` | pagination, table | `{ page }` |
+| `mellow-tab-change` | tabs | `{ index }` |
+| `mellow-remove` | tag | — |
+| `mellow-search` | dropdown | `{ query }` |
+| `mellow-page-size-change` | table | `{ pageSize }` |
+
+## Browser Support
+
+Works in all browsers that support Web Components (Custom Elements v1 + Shadow DOM):
+- Chrome / Edge 67+
+- Firefox 63+
+- Safari 13.1+
+
+## API Reference
+
+See [docs/components.md](docs/components.md) for the full API of every component — properties, slots, events, and types.
+
+## Development
+
+```bash
+npm install           # Install dependencies
+npm run dev           # Start Storybook on :6006
+npm test              # Run 497 tests
+npm run build         # Vite build + type declarations
+npm run typecheck     # TypeScript check
+```
+
+## License
+
+UNLICENSED

package/dist/components/datepicker/datepicker-utils.d.ts

@@ -0,0 +1,37 @@
+export interface CalendarDay {
+    date: Date;
+    day: number;
+    currentMonth: boolean;
+    today: boolean;
+    disabled: boolean;
+}
+export interface DatepickerPreset {
+    label: string;
+    getValue: () => {
+        start: string;
+        end: string;
+    };
+}
+export declare function parseISO(value: string): Date | null;
+export declare function formatISO(date: Date): string;
+export declare function isSameDay(a: Date, b: Date): boolean;
+export declare function isBefore(a: Date, b: Date): boolean;
+export declare function isAfter(a: Date, b: Date): boolean;
+export declare function isBetween(date: Date, start: Date, end: Date): boolean;
+export declare function stripTime(date: Date): Date;
+export declare function addMonths(date: Date, months: number): Date;
+export declare function addYears(date: Date, years: number): Date;
+export declare function startOfMonth(date: Date): Date;
+export declare function endOfMonth(date: Date): Date;
+export declare function getCalendarGrid(viewDate: Date, weekStart: 0 | 1, minDate: Date | null, maxDate: Date | null): CalendarDay[];
+export declare function getWeekdayNames(locale: string, weekStart: 0 | 1): string[];
+export declare function getMonthNames(locale: string): string[];
+export declare function getMonthName(locale: string, month: number): string;
+export declare function getYearsGrid(centerYear: number): number[];
+export declare function getDefaultPresets(locale: string): DatepickerPreset[];
+export declare function parseRangeValue(value: string): {
+    start: Date | null;
+    end: Date | null;
+};
+export declare function orderDates(a: Date, b: Date): [Date, Date];
+//# sourceMappingURL=datepicker-utils.d.ts.map

package/dist/components/datepicker/datepicker-utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"datepicker-utils.d.ts","sourceRoot":"","sources":["../../../src/components/datepicker/datepicker-utils.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,IAAI,CAAA;IACV,GAAG,EAAE,MAAM,CAAA;IACX,YAAY,EAAE,OAAO,CAAA;IACrB,KAAK,EAAE,OAAO,CAAA;IACd,QAAQ,EAAE,OAAO,CAAA;CAClB;AAED,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,MAAM;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,CAAA;CAC/C;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,CAQnD;AAED,wBAAgB,SAAS,CAAC,IAAI,EAAE,IAAI,GAAG,MAAM,CAK5C;AAED,wBAAgB,SAAS,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,GAAG,OAAO,CAMnD;AAED,wBAAgB,QAAQ,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,GAAG,OAAO,CAElD;AAED,wBAAgB,OAAO,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,GAAG,OAAO,CAEjD;AAED,wBAAgB,SAAS,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,GAAG,OAAO,CAOrE;AAED,wBAAgB,SAAS,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,CAE1C;AAED,wBAAgB,SAAS,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,GAAG,IAAI,CAG1D;AAED,wBAAgB,QAAQ,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI,CAExD;AAED,wBAAgB,YAAY,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,CAE7C;AAED,wBAAgB,UAAU,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,CAE3C;AAED,wBAAgB,eAAe,CAC7B,QAAQ,EAAE,IAAI,EACd,SAAS,EAAE,CAAC,GAAG,CAAC,EAChB,OAAO,EAAE,IAAI,GAAG,IAAI,EACpB,OAAO,EAAE,IAAI,GAAG,IAAI,GACnB,WAAW,EAAE,CA6Bf;AAED,wBAAgB,eAAe,CAAC,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC,GAAG,CAAC,GAAG,MAAM,EAAE,CAQ1E;AAED,wBAAgB,aAAa,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,EAAE,CAMtD;AAED,wBAAgB,YAAY,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAElE;AAED,wBAAgB,YAAY,CAAC,UAAU,EAAE,MAAM,GAAG,MAAM,EAAE,CAOzD;AAED,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,MAAM,GAAG,gBAAgB,EAAE,CAmEpE;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,MAAM,GAAG;IAAE,KAAK,EAAE,IAAI,GAAG,IAAI,CAAC;IAAC,GAAG,EAAE,IAAI,GAAG,IAAI,CAAA;CAAE,CAMvF;AAED,wBAAgB,UAAU,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,GAAG,CAAC,IAAI,EAAE,IAAI,CAAC,CAEzD"}

package/dist/components/datepicker/datepicker-utils.js

@@ -0,0 +1,157 @@
+function h(t) {
+  if (!t) return null;
+  const n = t.match(/^(\d{4})-(\d{2})-(\d{2})$/);
+  if (!n) return null;
+  const [, a, o, l] = n, e = new Date(Number(a), Number(o) - 1, Number(l));
+  return isNaN(e.getTime()) ? null : e;
+}
+function u(t) {
+  const n = t.getFullYear(), a = String(t.getMonth() + 1).padStart(2, "0"), o = String(t.getDate()).padStart(2, "0");
+  return `${n}-${a}-${o}`;
+}
+function S(t, n) {
+  return t.getFullYear() === n.getFullYear() && t.getMonth() === n.getMonth() && t.getDate() === n.getDate();
+}
+function Y(t, n) {
+  return s(t).getTime() < s(n).getTime();
+}
+function T(t, n) {
+  return s(t).getTime() > s(n).getTime();
+}
+function b(t, n, a) {
+  const o = s(t).getTime(), l = s(n).getTime(), e = s(a).getTime(), r = Math.min(l, e), c = Math.max(l, e);
+  return o >= r && o <= c;
+}
+function s(t) {
+  return new Date(t.getFullYear(), t.getMonth(), t.getDate());
+}
+function M(t, n) {
+  return new Date(t.getFullYear(), t.getMonth() + n, 1);
+}
+function N(t, n) {
+  return new Date(t.getFullYear() + n, t.getMonth(), 1);
+}
+function m(t) {
+  return new Date(t.getFullYear(), t.getMonth(), 1);
+}
+function w(t) {
+  return new Date(t.getFullYear(), t.getMonth() + 1, 0);
+}
+function V(t, n, a, o) {
+  const l = s(/* @__PURE__ */ new Date()), e = t.getFullYear(), r = t.getMonth();
+  let i = new Date(e, r, 1).getDay() - n;
+  i < 0 && (i += 7);
+  const D = new Date(e, r, 1 - i), f = [];
+  for (let d = 0; d < 42; d++) {
+    const g = new Date(D.getFullYear(), D.getMonth(), D.getDate() + d), F = g.getMonth() === r, p = a !== null && Y(g, a) || o !== null && T(g, o);
+    f.push({
+      date: g,
+      day: g.getDate(),
+      currentMonth: F,
+      today: S(g, l),
+      disabled: p
+    });
+  }
+  return f;
+}
+function L(t, n) {
+  const a = new Date(2024, 0, n === 0 ? 7 : 1), o = [];
+  for (let l = 0; l < 7; l++) {
+    const e = new Date(a.getFullYear(), a.getMonth(), a.getDate() + l);
+    o.push(e.toLocaleDateString(t, { weekday: "short" }).slice(0, 2));
+  }
+  return o;
+}
+function y(t, n) {
+  return new Date(2024, n, 1).toLocaleDateString(t, { month: "long" });
+}
+function O(t) {
+  const n = t - 7, a = [];
+  for (let o = 0; o < 15; o++)
+    a.push(n + o);
+  return a;
+}
+function $(t) {
+  const n = s(/* @__PURE__ */ new Date()), a = y(t, n.getMonth()), o = M(n, -1), l = y(t, o.getMonth());
+  return [
+    {
+      label: "Today",
+      getValue: () => {
+        const e = s(/* @__PURE__ */ new Date()), r = u(e);
+        return { start: r, end: r };
+      }
+    },
+    {
+      label: "Last 7 days",
+      getValue: () => {
+        const e = s(/* @__PURE__ */ new Date()), r = new Date(e.getFullYear(), e.getMonth(), e.getDate() - 6);
+        return { start: u(r), end: u(e) };
+      }
+    },
+    {
+      label: "Last 30 days",
+      getValue: () => {
+        const e = s(/* @__PURE__ */ new Date()), r = new Date(e.getFullYear(), e.getMonth(), e.getDate() - 29);
+        return { start: u(r), end: u(e) };
+      }
+    },
+    {
+      label: "Last 60 days",
+      getValue: () => {
+        const e = s(/* @__PURE__ */ new Date()), r = new Date(e.getFullYear(), e.getMonth(), e.getDate() - 59);
+        return { start: u(r), end: u(e) };
+      }
+    },
+    {
+      label: "Last 90 days",
+      getValue: () => {
+        const e = s(/* @__PURE__ */ new Date()), r = new Date(e.getFullYear(), e.getMonth(), e.getDate() - 89);
+        return { start: u(r), end: u(e) };
+      }
+    },
+    {
+      label: a,
+      getValue: () => {
+        const e = s(/* @__PURE__ */ new Date()), r = m(e), c = w(e);
+        return { start: u(r), end: u(c) };
+      }
+    },
+    {
+      label: l,
+      getValue: () => {
+        const e = s(/* @__PURE__ */ new Date()), r = M(e, -1), c = m(r), i = w(r);
+        return { start: u(c), end: u(i) };
+      }
+    }
+  ];
+}
+function k(t) {
+  if (!t.includes("/"))
+    return { start: h(t), end: null };
+  const [n, a] = t.split("/");
+  return { start: h(n), end: h(a) };
+}
+function x(t, n) {
+  return Y(t, n) ? [t, n] : [n, t];
+}
+export {
+  M as addMonths,
+  N as addYears,
+  w as endOfMonth,
+  u as formatISO,
+  V as getCalendarGrid,
+  $ as getDefaultPresets,
+  y as getMonthName,
+  L as getWeekdayNames,
+  O as getYearsGrid,
+  T as isAfter,
+  Y as isBefore,
+  b as isBetween,
+  S as isSameDay,
+  x as orderDates,
+  h as parseISO,
+  k as parseRangeValue,
+  m as startOfMonth,
+  s as stripTime
+};
+//# sourceMappingURL=datepicker-utils.js.map

package/dist/components/datepicker/datepicker-utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"datepicker-utils.js","sources":["../../../src/components/datepicker/datepicker-utils.ts"],"sourcesContent":["export interface CalendarDay {\n  date: Date\n  day: number\n  currentMonth: boolean\n  today: boolean\n  disabled: boolean\n}\n\nexport interface DatepickerPreset {\n  label: string\n  getValue: () => { start: string; end: string }\n}\n\nexport function parseISO(value: string): Date | null {\n  if (!value) return null\n  const match = value.match(/^(\\d{4})-(\\d{2})-(\\d{2})$/)\n  if (!match) return null\n  const [, y, m, d] = match\n  const date = new Date(Number(y), Number(m) - 1, Number(d))\n  if (isNaN(date.getTime())) return null\n  return date\n}\n\nexport function formatISO(date: Date): string {\n  const y = date.getFullYear()\n  const m = String(date.getMonth() + 1).padStart(2, '0')\n  const d = String(date.getDate()).padStart(2, '0')\n  return `${y}-${m}-${d}`\n}\n\nexport function isSameDay(a: Date, b: Date): boolean {\n  return (\n    a.getFullYear() === b.getFullYear() &&\n    a.getMonth() === b.getMonth() &&\n    a.getDate() === b.getDate()\n  )\n}\n\nexport function isBefore(a: Date, b: Date): boolean {\n  return stripTime(a).getTime() < stripTime(b).getTime()\n}\n\nexport function isAfter(a: Date, b: Date): boolean {\n  return stripTime(a).getTime() > stripTime(b).getTime()\n}\n\nexport function isBetween(date: Date, start: Date, end: Date): boolean {\n  const t = stripTime(date).getTime()\n  const s = stripTime(start).getTime()\n  const e = stripTime(end).getTime()\n  const min = Math.min(s, e)\n  const max = Math.max(s, e)\n  return t >= min && t <= max\n}\n\nexport function stripTime(date: Date): Date {\n  return new Date(date.getFullYear(), date.getMonth(), date.getDate())\n}\n\nexport function addMonths(date: Date, months: number): Date {\n  const result = new Date(date.getFullYear(), date.getMonth() + months, 1)\n  return result\n}\n\nexport function addYears(date: Date, years: number): Date {\n  return new Date(date.getFullYear() + years, date.getMonth(), 1)\n}\n\nexport function startOfMonth(date: Date): Date {\n  return new Date(date.getFullYear(), date.getMonth(), 1)\n}\n\nexport function endOfMonth(date: Date): Date {\n  return new Date(date.getFullYear(), date.getMonth() + 1, 0)\n}\n\nexport function getCalendarGrid(\n  viewDate: Date,\n  weekStart: 0 | 1,\n  minDate: Date | null,\n  maxDate: Date | null,\n): CalendarDay[] {\n  const today = stripTime(new Date())\n  const year = viewDate.getFullYear()\n  const month = viewDate.getMonth()\n\n  const firstDay = new Date(year, month, 1)\n  let dayOfWeek = firstDay.getDay() - weekStart\n  if (dayOfWeek < 0) dayOfWeek += 7\n\n  const gridStart = new Date(year, month, 1 - dayOfWeek)\n  const days: CalendarDay[] = []\n\n  for (let i = 0; i < 42; i++) {\n    const date = new Date(gridStart.getFullYear(), gridStart.getMonth(), gridStart.getDate() + i)\n    const isCurrentMonth = date.getMonth() === month\n    const isDisabled =\n      (minDate !== null && isBefore(date, minDate)) ||\n      (maxDate !== null && isAfter(date, maxDate))\n\n    days.push({\n      date,\n      day: date.getDate(),\n      currentMonth: isCurrentMonth,\n      today: isSameDay(date, today),\n      disabled: isDisabled,\n    })\n  }\n\n  return days\n}\n\nexport function getWeekdayNames(locale: string, weekStart: 0 | 1): string[] {\n  const base = new Date(2024, 0, weekStart === 0 ? 7 : 1) // Sun Jan 7 or Mon Jan 1\n  const names: string[] = []\n  for (let i = 0; i < 7; i++) {\n    const d = new Date(base.getFullYear(), base.getMonth(), base.getDate() + i)\n    names.push(d.toLocaleDateString(locale, { weekday: 'short' }).slice(0, 2))\n  }\n  return names\n}\n\nexport function getMonthNames(locale: string): string[] {\n  const names: string[] = []\n  for (let i = 0; i < 12; i++) {\n    names.push(new Date(2024, i, 1).toLocaleDateString(locale, { month: 'long' }))\n  }\n  return names\n}\n\nexport function getMonthName(locale: string, month: number): string {\n  return new Date(2024, month, 1).toLocaleDateString(locale, { month: 'long' })\n}\n\nexport function getYearsGrid(centerYear: number): number[] {\n  const start = centerYear - 7\n  const years: number[] = []\n  for (let i = 0; i < 15; i++) {\n    years.push(start + i)\n  }\n  return years\n}\n\nexport function getDefaultPresets(locale: string): DatepickerPreset[] {\n  const today = stripTime(new Date())\n  const currentMonthName = getMonthName(locale, today.getMonth())\n  const prevMonthDate = addMonths(today, -1)\n  const prevMonthName = getMonthName(locale, prevMonthDate.getMonth())\n\n  return [\n    {\n      label: 'Today',\n      getValue: () => {\n        const t = stripTime(new Date())\n        const iso = formatISO(t)\n        return { start: iso, end: iso }\n      },\n    },\n    {\n      label: 'Last 7 days',\n      getValue: () => {\n        const t = stripTime(new Date())\n        const start = new Date(t.getFullYear(), t.getMonth(), t.getDate() - 6)\n        return { start: formatISO(start), end: formatISO(t) }\n      },\n    },\n    {\n      label: 'Last 30 days',\n      getValue: () => {\n        const t = stripTime(new Date())\n        const start = new Date(t.getFullYear(), t.getMonth(), t.getDate() - 29)\n        return { start: formatISO(start), end: formatISO(t) }\n      },\n    },\n    {\n      label: 'Last 60 days',\n      getValue: () => {\n        const t = stripTime(new Date())\n        const start = new Date(t.getFullYear(), t.getMonth(), t.getDate() - 59)\n        return { start: formatISO(start), end: formatISO(t) }\n      },\n    },\n    {\n      label: 'Last 90 days',\n      getValue: () => {\n        const t = stripTime(new Date())\n        const start = new Date(t.getFullYear(), t.getMonth(), t.getDate() - 89)\n        return { start: formatISO(start), end: formatISO(t) }\n      },\n    },\n    {\n      label: currentMonthName,\n      getValue: () => {\n        const t = stripTime(new Date())\n        const s = startOfMonth(t)\n        const e = endOfMonth(t)\n        return { start: formatISO(s), end: formatISO(e) }\n      },\n    },\n    {\n      label: prevMonthName,\n      getValue: () => {\n        const t = stripTime(new Date())\n        const pm = addMonths(t, -1)\n        const s = startOfMonth(pm)\n        const e = endOfMonth(pm)\n        return { start: formatISO(s), end: formatISO(e) }\n      },\n    },\n  ]\n}\n\nexport function parseRangeValue(value: string): { start: Date | null; end: Date | null } {\n  if (!value.includes('/')) {\n    return { start: parseISO(value), end: null }\n  }\n  const [startStr, endStr] = value.split('/')\n  return { start: parseISO(startStr), end: parseISO(endStr) }\n}\n\nexport function orderDates(a: Date, b: Date): [Date, Date] {\n  return isBefore(a, b) ? [a, b] : [b, a]\n}\n"],"names":["parseISO","value","match","y","m","d","date","formatISO","isSameDay","a","b","isBefore","stripTime","isAfter","isBetween","start","end","t","s","min","max","addMonths","months","addYears","years","startOfMonth","endOfMonth","getCalendarGrid","viewDate","weekStart","minDate","maxDate","today","year","month","dayOfWeek","gridStart","days","i","isCurrentMonth","isDisabled","getWeekdayNames","locale","base","names","getMonthName","getYearsGrid","centerYear","getDefaultPresets","currentMonthName","prevMonthDate","prevMonthName","iso","e","pm","parseRangeValue","startStr","endStr","orderDates"],"mappings":"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"}

package/dist/components/datepicker/datepicker.d.ts

@@ -0,0 +1,62 @@
+import { LitElement } from 'lit';
+import { type DatepickerPreset } from './datepicker-utils.js';
+export type DatepickerMode = 'single' | 'range';
+export declare class MellowDatepicker extends LitElement {
+    static styles: import("lit").CSSResult[];
+    mode: DatepickerMode;
+    value: string;
+    minDate: string;
+    maxDate: string;
+    presets: boolean;
+    presetItems: DatepickerPreset[];
+    weekStart: 0 | 1;
+    disabled: boolean;
+    locale: string;
+    private _view;
+    private _viewDate;
+    private _hoveredDate;
+    private _rangeStart;
+    private _pendingValue;
+    connectedCallback(): void;
+    willUpdate(changed: Map<string, unknown>): void;
+    private _syncFromValue;
+    private get _minDateParsed();
+    private get _maxDateParsed();
+    private get _effectivePresets();
+    private _prevMonth;
+    private _nextMonth;
+    private _prevYear;
+    private _nextYear;
+    private _prevYearRange;
+    private _nextYearRange;
+    private _showMonths;
+    private _showYears;
+    private _selectDay;
+    private _selectMonth;
+    private _selectYear;
+    private _handleDayHover;
+    private _handleDayMouseLeave;
+    private _goToToday;
+    private _selectPreset;
+    private _save;
+    private _fireSelect;
+    private _isDaySelected;
+    private _isDayInRange;
+    private _isRangeStart;
+    private _isRangeEnd;
+    private _isPresetActive;
+    private _handleKeydown;
+    render(): import("lit-html").TemplateResult<1>;
+    private _renderPresets;
+    private _renderHeader;
+    private _renderDays;
+    private _renderMonths;
+    private _renderYears;
+    private _renderFooter;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mellow-datepicker': MellowDatepicker;
+    }
+}
+//# sourceMappingURL=datepicker.d.ts.map

package/dist/components/datepicker/datepicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"datepicker.d.ts","sourceRoot":"","sources":["../../../src/components/datepicker/datepicker.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAiB,MAAM,KAAK,CAAA;AAI/C,OAAO,EAEL,KAAK,gBAAgB,EAetB,MAAM,uBAAuB,CAAA;AAE9B,MAAM,MAAM,cAAc,GAAG,QAAQ,GAAG,OAAO,CAAA;AAM/C,qBACa,gBAAiB,SAAQ,UAAU;IAC9C,OAAgB,MAAM,4BAAqB;IAG3C,IAAI,EAAE,cAAc,CAAW;IAG/B,KAAK,SAAK;IAGV,OAAO,SAAK;IAGZ,OAAO,SAAK;IAGZ,OAAO,UAAQ;IAGf,WAAW,EAAE,gBAAgB,EAAE,CAAK;IAGpC,SAAS,EAAE,CAAC,GAAG,CAAC,CAAI;IAGpB,QAAQ,UAAQ;IAGhB,MAAM,SAAU;IAEP,OAAO,CAAC,KAAK,CAAmB;IAChC,OAAO,CAAC,SAAS,CAAa;IAC9B,OAAO,CAAC,YAAY,CAAoB;IACxC,OAAO,CAAC,WAAW,CAAoB;IACvC,OAAO,CAAC,aAAa,CAAK;IAE1B,iBAAiB,IAAI,IAAI;IAKzB,UAAU,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAMxD,OAAO,CAAC,cAAc;IAetB,OAAO,KAAK,cAAc,GAEzB;IAED,OAAO,KAAK,cAAc,GAEzB;IAED,OAAO,KAAK,iBAAiB,GAG5B;IAID,OAAO,CAAC,UAAU;IAIlB,OAAO,CAAC,UAAU;IAIlB,OAAO,CAAC,SAAS;IAIjB,OAAO,CAAC,SAAS;IAIjB,OAAO,CAAC,cAAc;IAItB,OAAO,CAAC,cAAc;IAItB,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,UAAU;IAMlB,OAAO,CAAC,UAAU;IAqBlB,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,WAAW;IAKnB,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,oBAAoB;IAI5B,OAAO,CAAC,UAAU;IAWlB,OAAO,CAAC,aAAa;IAgBrB,OAAO,CAAC,KAAK;IAUb,OAAO,CAAC,WAAW;IAUnB,OAAO,CAAC,cAAc;IAYtB,OAAO,CAAC,aAAa;IAiBrB,OAAO,CAAC,aAAa;IAarB,OAAO,CAAC,WAAW;IAanB,OAAO,CAAC,eAAe;IAUvB,OAAO,CAAC,cAAc,CAsCrB;IAIQ,MAAM;IAoBf,OAAO,CAAC,cAAc;IAetB,OAAO,CAAC,aAAa;IA4CrB,OAAO,CAAC,WAAW;IA+CnB,OAAO,CAAC,aAAa;IA8BrB,OAAO,CAAC,YAAY;IAsBpB,OAAO,CAAC,aAAa;CAStB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,gBAAgB,CAAA;KACtC;CACF"}