@exxatdesignux/ui 0.2.18 → 0.3.0

package/consumer-extras/handbook/voice-and-tone.md

@@ -0,0 +1,262 @@
+# Exxat DS — Voice and tone
+
+> The single biggest driver of "this feels like one product" — or "this feels random" — is **copy**. Empty states, errors, buttons, banners, validation, labels. This doc is the binding reference for all of it.
+>
+> **Audience:** designers writing copy, engineers shipping strings, AI agents drafting UI text. Reviewed in PR alongside `.cursor/rules/exxat-accessibility.mdc`.
+
+---
+
+## 1. Voice (the constant)
+
+Exxat copy is **clear, direct, and respectful**. We talk to grown professionals (faculty, admins) and to students. We never:
+
+- talk down (no "Oops!" / "Whoops" / "Uh-oh"),
+- over-celebrate ("Awesome!" / "Great job!" / 🎉),
+- guilt-trip ("You haven't… yet" / "Don't forget!"),
+- hide the cause behind metaphor ("Something went wrong" with no detail),
+- shout (sentence case everywhere; ALL CAPS only for system status acronyms).
+
+We **always**:
+
+- name the **thing**: the entity (placement, site, student), the action (Save, Invite, Export), the outcome (saved, sent, downloaded),
+- say what **changed** or what **the user can do next**,
+- use **present tense** (`Saving` / `Saved` / `Try again`), not past-aspirational (`We've saved your changes!`),
+- use **active voice** (`Exxat couldn't save the placement.` not `The placement could not be saved.`).
+
+---
+
+## 2. Tone (the variable)
+
+Tone shifts by surface. Same voice, different temperature.
+
+| Surface | Tone | Example |
+|---|---|---|
+| Primary action label | Imperative, 1–3 words | "Save", "Invite people", "Export" |
+| Empty state (filtered) | Helpful, names the filter | "No placements match the current filters. Clear them to see all 247." |
+| Empty state (no data ever) | Welcoming, names the next step | "No placements yet. Add your first one to get started." |
+| Inline validation | Neutral, says the rule | "Use the format MM/DD/YYYY." |
+| Banner (informational) | Calm, explains why | "Read-only — this term has ended." |
+| Banner (warning) | Direct, says the consequence | "Saving will overwrite 3 students' assignments." |
+| Banner (error) | Honest, names the failure + next step | "Exxat couldn't reach the placement service. Try again, or check your network." |
+| Dialog (destructive confirm) | Specific, names the object | "Delete placement P-2026-014? This cannot be undone." |
+| Microcopy (helper, hints) | Brief, format-only | "Out of 4.0", "MM/DD/YYYY" |
+
+---
+
+## 3. Buttons
+
+| Pattern | Use | Example |
+|---|---|---|
+| **Sentence case** | Always | `Save`, `Invite people`, `Export selection` |
+| **Title case** | Never | ~~`Save Changes`~~ → `Save changes` |
+| **Verb-first imperative** | Primary actions | `Save`, `Send invite`, `Create placement`, `Download CSV` |
+| **No "Please"** | The button is the request | ~~`Please save`~~ → `Save` |
+| **Don't repeat the field name** | Inline context is enough | ~~`Save changes to placement`~~ → `Save` |
+| **"Cancel" not "Discard"** | Cancel returns to a safe state; Discard is only for destructive draft loss | dialog primary = `Save changes`; cancel = `Cancel` |
+| **Loading verb** | When in-flight, swap to `…` form, preserve width | `Save` → `Saving…` |
+| **Disabled tooltip** | Always say why | "Add at least one collaborator first." |
+
+### Don't
+
+| ❌ Don't | ✅ Do |
+|---|---|
+| `Click here` | `Open placement` |
+| `OK` | `Save`, `Got it`, `Continue` (the actual outcome) |
+| `Submit` | `Send invite`, `Save changes`, `Create placement` |
+| `Yes` / `No` in destructive dialogs | `Delete placement`, `Cancel` |
+| `Loading…` for >2 s with no detail | `Loading placements…` (name the thing) |
+
+---
+
+## 4. Empty states
+
+There are **three** kinds. The copy is different for each.
+
+### 4a. Filter-empty ("zero matches")
+
+The dataset has rows; the active filters hide all of them. Tell the user the filters are responsible and offer to clear them.
+
+```
+No placements match the current filters.
+[Clear filters]
+```
+
+Rules:
+
+- Name the entity ("placements", not "items").
+- Mention "the current filters" — not just "no results".
+- Surface a **Clear filters** action if the toolbar has any filters applied.
+- If the search box is the only filter, the message becomes `No placements match "<query>".` (quote the query exactly).
+
+### 4b. True-empty ("no data ever")
+
+The dataset is empty for this user / scope. Tell them what to do next.
+
+```
+No placements yet.
+Add your first one to start tracking student rotations.
+[New placement]
+```
+
+Rules:
+
+- One-line headline + one-line context.
+- The CTA is the same imperative used elsewhere in the app — don't invent "Start now" for an empty state.
+- If creation requires a precursor ("Add at least one site first"), say so and link to the precursor.
+
+### 4c. Permission-empty ("not allowed to see")
+
+The user can't see anything because of access. Don't show counts; don't suggest creating.
+
+```
+You don't have access to this hub.
+Ask a coordinator to invite you with Viewer or higher access.
+```
+
+Rules:
+
+- Name the access level required.
+- Don't show row counts the user can't see.
+- Don't expose the existence of restricted records by mentioning "0 of N hidden".
+
+---
+
+## 5. Errors
+
+Errors must answer three questions: **What happened? Why? What can the user do?**
+
+| Element | Required? | Example |
+|---|---|---|
+| Subject | required | `Exxat couldn't save the placement.` |
+| Cause | when knowable | `The site was deleted while you were editing.` |
+| Next step | required | `Choose another site or refresh.` |
+
+### Don't
+
+- `Something went wrong.` — every word is empty. Replace with the subject + cause.
+- `Error 500: Internal Server Error.` — leak the trace ID to logs, not the user. User-facing: "Exxat had a problem. Try again in a moment."
+- Toasts for errors. Use `SystemBanner` (route-level) or inline `FormMessage` (field-level). See [`exxat-no-toast.mdc`](../../../.cursor/rules/exxat-no-toast.mdc).
+
+### Field-level (`FormMessage`)
+
+Match the rule, not the field name. Keep under 60 chars.
+
+| Rule | Message |
+|---|---|
+| Required | `This is required.` |
+| Format (date) | `Use MM/DD/YYYY.` |
+| Format (phone) | `Use +1 (555) 555-0100.` |
+| Range (number) | `Enter a number between 0 and 4.0.` |
+| Unique | `That ID is already in use.` |
+| Server | `Exxat couldn't save this field. Try again.` |
+
+---
+
+## 6. Banners
+
+We use **persistent banners** (not toasts) for all product feedback. See [`exxat-no-toast.mdc`](../../../.cursor/rules/exxat-no-toast.mdc) and `LocalBanner` / `SystemBanner` in `packages/ui`.
+
+| Variant | Use | Lead with |
+|---|---|---|
+| `info` | Read-only / scope notice / "you're viewing X" | The fact: "Read-only — this term has ended." |
+| `success` | Confirmed state change (long-lived; toasts forbidden) | The outcome: "Invite sent to 3 collaborators." |
+| `warning` | Action will cause consequence | The consequence: "Saving will overwrite 3 students' assignments." |
+| `error` | Recoverable failure | The subject + next step: "Exxat couldn't reach the placement service. Try again." |
+| `destructive` | Pending destructive change | The object + reversibility: "This term will be archived in 7 days. Restore now to keep it." |
+
+Rules:
+
+- One banner per region. If two compete, the higher-severity wins.
+- Pair a banner with an **action** when there's something the user can do (`[Restore]`, `[Try again]`, `[Open log]`).
+- No exclamation marks. The variant color carries the tone.
+
+---
+
+## 7. Status badges
+
+Status labels live in [`lib/list-status-badges.ts`](https://github.com/ExxatDesign/Exxat-DS-Workspace/blob/main/apps/web/lib/list-status-badges.ts) and are shared across every surface (table, board card, list row). Don't fork labels per page.
+
+| Type | Conventions | Example |
+|---|---|---|
+| Lifecycle | Title case, single word where possible | `Active`, `Draft`, `Archived`, `Pending` |
+| Outcome | Past-tense verb when an action completed | `Approved`, `Rejected`, `Sent`, `Skipped` |
+| Risk | Plain language, no jargon | `On track`, `At risk`, `Blocked` |
+| Mandatory pairing | Color **AND** icon (WCAG 1.4.1 — never color alone) | green check, amber triangle, red circle-x |
+
+Never: `OK`, `N/A`, `?` as a status label. Show the actual lifecycle state or `Unknown` with a tooltip describing how to resolve it.
+
+---
+
+## 8. KPI copy (the highest-stakes copy in the product)
+
+KPIs read top-down: **label → value → trend chip → description**. The reader is scanning, not reading. Each line earns its place.
+
+| Field | Rule | Example |
+|---|---|---|
+| `label` | Sentence case noun phrase. ≤ 24 chars. No "Total" prefix (the value is total by default). | `Active placements`, `New invites`, `Compliance issues` |
+| `value` | The number. Use `tabular-nums`. Round to a sensible precision. Suffix unit (`%`, `hrs`) without space when natural. | `247`, `12 %`, `38 hrs` |
+| `delta` | The **count** of change. Empty (`""` or `0`) hides the chip entirely. Never prose. | `+12`, `-3`, `+8 %` |
+| `description` | The caption beneath the value row. Prose explaining what the number is or how it splits. Never the delta. | `vs last week`, `across 4 sites`, `left + right` |
+
+See [`exxat-kpi-trends.mdc`](../../../.cursor/rules/exxat-kpi-trends.mdc) for the trend-polarity rules (when up means bad, set `trendPolarity: "lower_is_better"`).
+
+### Don't
+
+- `Total: 247` — drop "Total".
+- `247 placements` in `value` — put `247` in `value`, `placements` is in `label`.
+- `+5 (up 12 % from last week)` in `delta` — `delta = "+5"`, `description = "vs last week"`.
+
+---
+
+## 9. Form labels and helper text
+
+| Element | Rule | Example |
+|---|---|---|
+| Label | Sentence case, no colon, no "*" — pair `*` decoration with `aria-required` only. | `Date of birth` |
+| Required marker | Visible `*` (`aria-hidden`), programmatic `aria-required="true"`. | `Date of birth *` |
+| Helper text | Persistent, format-first. Use `FormDescription`. Never placeholder-only. | `MM/DD/YYYY` |
+| Placeholder | May mirror the format. Never the sole carrier. | `MM/DD/YYYY` |
+| Inline error | Replaces helper while active. Match the rule, not the field name. | `Use MM/DD/YYYY.` |
+| Unit in label vs description | Units go in description when context-dependent (`Out of 4.0` under "GPA"), in label when fixed (`Hours per week`). | — |
+
+See [`exxat-accessibility.mdc`](../../../.cursor/rules/exxat-accessibility.mdc) §"Form fields — format hints MUST be persistent".
+
+---
+
+## 10. Dates, times, numbers
+
+| Type | Format | Example |
+|---|---|---|
+| Date (UI) | Locale-aware, defaults to `MM/DD/YYYY` for en-US | `12/14/2025` |
+| Date range | Same format, en-dash with hair-thin spaces (or hyphen-minus in mono) | `12/14/2025 – 12/20/2025` |
+| Time | 12-hour with am/pm in lowercase | `2:30 pm` |
+| Relative time | Use sparingly; pair with absolute on hover/tooltip | `Updated 3 hours ago` (tip: `12/15/2025, 11:14 am`) |
+| Numbers | `tabular-nums`. Use thousands separator (`12,547`) for ≥ 4 digits | `12,547` |
+| Currency | Symbol-first, no space (`$1,200.00`) | `$1,200.00` |
+| Percent | No space (`12 %` is wrong, use `12%`) | `12%` |
+| Duration | Short form (`38 hrs`, `2 wks`) | `38 hrs` |
+
+---
+
+## 11. Reviewer checklist (paste into PRs that touch copy)
+
+- [ ] Sentence case (not title case) everywhere.
+- [ ] No `Click here`, `Submit`, `OK`, `Loading…` without a noun.
+- [ ] No toasts; banners or inline status instead.
+- [ ] Empty state names the entity and surfaces a next action or "Clear filters".
+- [ ] Errors answer: what / why / what now.
+- [ ] Status labels come from `lib/list-status-badges.ts`, not new strings.
+- [ ] KPI `delta` is a count; KPI `description` is prose. Polarity matches the metric.
+- [ ] Form helper text is `FormDescription`, not placeholder-only.
+- [ ] No exclamation marks outside `success` banners (and even those rarely).
+- [ ] No emoji unless explicitly approved for that surface.
+
+---
+
+## See also
+
+- [`HANDBOOK.md`](./HANDBOOK.md) — where this fits in the docs map
+- [`glossary.md`](./glossary.md) — vocabulary
+- [`.cursor/rules/exxat-no-toast.mdc`](../../../.cursor/rules/exxat-no-toast.mdc) — why banners, not toasts
+- [`.cursor/rules/exxat-kpi-trends.mdc`](../../../.cursor/rules/exxat-kpi-trends.mdc) — KPI delta vs description
+- [`.cursor/rules/exxat-accessibility.mdc`](../../../.cursor/rules/exxat-accessibility.mdc) — format-hint persistence rule

package/consumer-extras/patterns/command-menu-pattern.md

@@ -42,4 +42,4 @@ The command menu is the app’s **global search and AI entry**—one place to ju
 
 ---
 
-Keep this document aligned with **`exxat-ds/AGENTS.md` §7.1** when behavior or copy changes.
+Keep this document aligned with **`apps/web/AGENTS.md` §7.1** when behavior or copy changes.

package/consumer-extras/patterns/data-views-pattern.md

@@ -10,17 +10,17 @@ This document describes how list pages combine **views**, **toolbar** behavior,
 
 | Need | Reuse | Where Placements uses it |
 | --- | --- | --- |
-| **View tabs** (table / list / board, lifecycle filters) | `ListPageTemplate` (`ViewTab`, `renderContent`, optional metrics + export) | `components/data-list-client.tsx` + `components/templates/list-page.tsx` |
-| **Table shell** (search, filter bar, sort, grouping, columns, pagination) | `DataTable`, `DataTableToolbar`, `useTableState` | `components/data-table/`, `components/data-list-table.tsx` |
-| **Properties drawer** (display, columns, filters, sort, view type tiles) | `TablePropertiesDrawer` from `@/components/table-properties` | `DrawerToolbar` / list–board shells in `data-list-table.tsx` |
-| **Board / list** | `PlacementsBoardView`, `PlacementsListView` + same `useTableState` | `DataListTable` |
+| **View tabs** (table / list / board, lifecycle filters) | `ListPageTemplate` (`ViewTab`, `renderContent`, optional metrics + export) | `components/placements-client.tsx` + `components/templates/list-page.tsx` |
+| **Table shell** (search, filter bar, sort, grouping, columns, pagination) | `DataTable`, `DataTableToolbar`, `useTableState` | `components/data-table/`, `components/placements-table.tsx` |
+| **Properties drawer** (display, columns, filters, sort, view type tiles) | `TablePropertiesDrawer` from `@/components/table-properties` | `DrawerToolbar` / list–board shells in `placements-table.tsx` |
+| **Board / list** | `PlacementsBoardView`, `PlacementListRowContent` (wrapped by `HubTable.renderListRow` → `DataRowList`) + same `useTableState` | `PlacementsTable` |
 | **Page header** (primary CTA + More ⋯ + export) | `PlacementsPageHeader` or `TeamPageHeader` | `components/placements-page-header.tsx`, `components/team-page-header.tsx` |
-| **Team page (primary template)** | `TeamClient` = `ListPageTemplate` + `KeyMetrics` + `TeamPageHeader` + `TeamTable` (same composition as `DataListClient`) | `components/team-client.tsx`, `lib/mock/team-kpi.ts` |
+| **Team page (primary template)** | `TeamClient` = `ListPageTemplate` + `KeyMetrics` + `TeamPageHeader` + `TeamTable` (same composition as `PlacementsClient`) | `components/team-client.tsx`, `lib/mock/team-kpi.ts` |
 | **Team roster** | `TeamTable` — `DataTable` + `useTableState` + `TablePropertiesDrawer`; list/board/dashboard read **`tableState.rows`** | `components/team-table.tsx` |
 | **Dashboard view (list tab)** | **`KeyMetrics`** (`variant="flat"` or `"card"`) — same KPI system as the template metrics strip; **do not** add ad-hoc `Card` grids for entity summaries | `TeamTable` dashboard branch, `lib/mock/team-kpi.ts` |
 | **List hub metrics strip** | **`KeyMetrics variant="flat"`** — transparent cells, OKLCH brand glow only, border hairlines (**no** grey panel) | **`docs/kpi-flat-band-pattern.md`**, Placements / Team / Question bank clients |
 | **Secondary panel chrome** | **`--secondary-panel-bg`** on **`NestedSecondaryPanelShell`** (lighter than sidebar, follows active product) | **`docs/shell-surface-elevation-pattern.md`**, Question bank |
-| **Export** | `ExportDrawer` | `ListPageTemplate` export props; `DataListClient` |
+| **Export** | `ExportDrawer` | `ListPageTemplate` export props; `PlacementsClient` |
 | **View body layout** (gutter + centered max-width for folder / icon / panel-style content) | **`ListPageViewFrame`** (`components/data-views/list-page-view-frame.tsx`, re-exported from `components/data-views`) | **`FolderGridView`** (uses the frame); **`QuestionBankOsFolderView`** — see **`AGENTS.md` §4.5** |
 
 **Rules:** (1) Import and compose these components; pass **props** and **column defs** for your entity. (2) If something is missing, **extend the shared component** under `components/` (e.g. a new optional slot on `DataTableToolbar`) rather than copying markup into a single page. (3) Card-only or lightweight pages may use a smaller **Properties** sheet only when there is **no** table—otherwise use `TablePropertiesDrawer` with `DataTable` (see Team).
@@ -29,7 +29,7 @@ This document describes how list pages combine **views**, **toolbar** behavior,
 
 If the page uses a **`DataTable`** (or equivalent data grid) as the main surface, it **must** sit under **`ListPageTemplate`** so users get the **views toolbar** (tabs, add view, per-tab settings). The default `ViewTab` entries should include at least one tab whose `viewType` is **`table`** when the primary experience is tabular data. **Do not** render a `DataTable` alone under only `PageHeader` + body.
 
-- **Reference:** `DataListClient` (Placements) and `TeamClient` (Team).
+- **Reference:** `PlacementsClient` (Placements) and `TeamClient` (Team).
 - **Rationale:** Consistent navigation, saved views, per-tab view type (table / list / board), and export at the template level.
 
 ## View layout frame (centered, reusable)
@@ -41,7 +41,7 @@ Non-table view branches (e.g. **folder** icon grid, **panel** finder, OS-style f
 ## Architecture
 
 - **Page shell** — `ListPageTemplate` owns the views toolbar (tabs), optional metrics, and export drawer. Content for the active tab is rendered via `renderContent`.
-- **Per–lifecycle (or category) data** — `DataListTable` swaps **columns** and **row sets** based on `lifecycleTabId` (e.g. All / Upcoming / Ongoing / Completed). Each lifecycle tab gets its **own** `DataListTable` instance (`key={tab.filterId}`) so `useTableState` resets correctly when columns change.
+- **Per–lifecycle (or category) data** — `PlacementsTable` swaps **columns** and **row sets** based on `lifecycleTabId` (e.g. All / Upcoming / Ongoing / Completed). Each lifecycle tab gets its **own** `PlacementsTable` instance (`key={tab.filterId}`) so `useTableState` resets correctly when columns change.
 - **Shared table state** — `useTableState` holds sort, search, filters, grouping, column order/visibility/pins/widths, row height, gridlines, and pagination flags. **Table**, **list**, **board**, and **dashboard** all read the same state so switching view type keeps behavior aligned.
 
 ## Mock data and connected views
@@ -59,10 +59,10 @@ Non-table view branches (e.g. **folder** icon grid, **panel** finder, OS-style f
 
 | Concern | Table | List | Board | Dashboard (view tab) |
 | --- | --- | --- | --- | --- |
-| Primary surface | `DataTable` | `PlacementsListView` / entity list | `PlacementsBoardView` / entity board | **`KeyMetrics`** (+ optional charts via shared dashboard components) |
+| Primary surface | `DataTable` | `DataRowList` + entity row body (e.g. `PlacementListRowContent`) wired via `HubTable.renderListRow` | `PlacementsBoardView` / entity board | **`KeyMetrics`** (+ optional charts via shared dashboard components) |
 | Data source | `useTableState` | **`tableState.rows`** | **`tableState.rows`** | **`tableState.rows`** via KPI helpers |
 | Column headers / labels | `showColumnLabels` | Same source columns, list layout | Phase columns + optional board column menu | N/A (metrics from same columns/filters) |
-| Row click / navigation | From `DataListTable` | From list shell | Card `onOpen` | N/A |
+| Row click / navigation | From `PlacementsTable` | From list shell | Card `onOpen` | N/A |
 | Pagination | Optional `PaginationBar` + `CountSyncer` | Same pattern | N/A (board uses phase columns) | N/A |
 
 ## Toolbar and properties
@@ -99,10 +99,10 @@ Non-table view branches (e.g. **folder** icon grid, **panel** finder, OS-style f
 
 ## Persistence
 
-- **Page-level** (`lib/data-list-persistence.ts`, key `exxat-ds:data-list:page:v1`): `displayOptions`, `showMetrics`, `tabs`, `activeTabId`. Loaded in `DataListClient` with `useLayoutEffect`, saved debounced on change. `ListPageTemplate` runs in **controlled** mode when `tabs` / `onTabsChange` / `activeTabId` / `onActiveTabChange` are passed.
-- **Per–lifecycle tab** (key `exxat-ds:data-list:lifecycle:v1:<filterId>`): sort, search, filters, group by, column order/hidden/widths/pins/wrap, column menu search map, row height, gridlines, filter bar visibility, search popover, conditional rules, pagination toggle and page/size. Hydrated in `DataListTable` with `useLayoutEffect`; saved debounced when those fields change.
+- **Page-level** (`lib/data-list-persistence.ts`, key `exxat-ds:data-list:page:v1`): `displayOptions`, `showMetrics`, `tabs`, `activeTabId`. Loaded in `PlacementsClient` with `useLayoutEffect`, saved debounced on change. `ListPageTemplate` runs in **controlled** mode when `tabs` / `onTabsChange` / `activeTabId` / `onActiveTabChange` are passed.
+- **Per–lifecycle tab** (key `exxat-ds:data-list:lifecycle:v1:<filterId>`): sort, search, filters, group by, column order/hidden/widths/pins/wrap, column menu search map, row height, gridlines, filter bar visibility, search popover, conditional rules, pagination toggle and page/size. Hydrated in `PlacementsTable` with `useLayoutEffect`; saved debounced when those fields change.
 
-To add a new page: copy the `DataListClient` pattern (controlled `ListPageTemplate` + storage key namespace) or call `schedulePageSave` / `scheduleLifecycleSave` with your own keys.
+To add a new page: copy the `PlacementsClient` pattern (controlled `ListPageTemplate` + storage key namespace) or call `schedulePageSave` / `scheduleLifecycleSave` with your own keys.
 
 ## Rules of thumb
 
@@ -158,7 +158,7 @@ Canonical rules: **`AGENTS.md` §6.4**, root **`.cursor/rules/exxat-page-vs-draw
 
 When a route is a **primary** destination in nav (main hub for an entity) **and** the dataset is **large** or **highly interactive**:
 
-- Use the **primary page template**: `ListPageTemplate` (tabs, metrics strip, export drawer at template level) + data client pattern as in **`DataListClient`** / **`DataListTable`** — not a minimal `PageHeader`-only layout.
+- Use the **primary page template**: `ListPageTemplate` (tabs, metrics strip, export drawer at template level) + data client pattern as in **`PlacementsClient`** / **`PlacementsTable`** — not a minimal `PageHeader`-only layout.
 - Smaller satellite pages may use **`PageHeader` + section content**; once the dataset grows past the dense-list threshold, add the toolbar rules above and consider promoting to the full template if the page becomes a main hub.
 
 ---

package/dist/components/data-table/filter-date-calendar.d.ts

@@ -0,0 +1,10 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+/** Single-date calendar for table filters (YYYY-MM-DD). */
+declare function FilterDateCalendar({ valueYmd, onChangeYmd, label, }: {
+    valueYmd: string | undefined;
+    onChangeYmd: (ymd: string | undefined) => void;
+    label: string;
+}): react_jsx_runtime.JSX.Element;
+
+export { FilterDateCalendar };

package/dist/components/data-table/filter-date-calendar.js

@@ -0,0 +1,280 @@
+"use client";
+import * as React2 from 'react';
+import { ChevronLeftIcon, ChevronRightIcon, ChevronDownIcon } from 'lucide-react';
+import { getDefaultClassNames, DayPicker } from 'react-day-picker';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { cva } from 'class-variance-authority';
+import { Slot } from 'radix-ui';
+import { jsx } from 'react/jsx-runtime';
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var buttonVariants = cva(
+  "group/button inline-flex shrink-0 cursor-pointer items-center justify-center rounded-md border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/80",
+        outline: "border-input bg-background hover:bg-interactive-hover hover:text-interactive-hover-foreground aria-expanded:bg-interactive-hover aria-expanded:text-interactive-hover-foreground dark:bg-input/15 dark:hover:bg-input/25",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+        ghost: "hover:bg-interactive-hover hover:text-interactive-hover-foreground aria-expanded:bg-interactive-hover aria-expanded:text-interactive-hover-foreground dark:hover:bg-interactive-hover-subtle",
+        destructive: "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-9 gap-1.5 px-3 has-data-[icon=inline-end]:pe-2.5 has-data-[icon=inline-start]:ps-2.5",
+        xs: "h-6 gap-1 px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-8 gap-1 px-3 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pe-2 has-data-[icon=inline-start]:ps-2 [&_svg:not([class*='size-'])]:size-3.5",
+        lg: "h-10 gap-1.5 px-4 has-data-[icon=inline-end]:pe-3.5 has-data-[icon=inline-start]:ps-3.5",
+        icon: "size-9",
+        "icon-xs": "size-6 in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm": "size-8 in-data-[slot=button-group]:rounded-lg",
+        "icon-lg": "size-10"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+var Button = React2.forwardRef(({ className, variant = "default", size = "default", asChild = false, ...props }, ref) => {
+  const Comp = asChild ? Slot.Root : "button";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      ref,
+      "data-slot": "button",
+      "data-variant": variant,
+      "data-size": size,
+      className: cn(buttonVariants({ variant, size }), className),
+      ...props
+    }
+  );
+});
+Button.displayName = "Button";
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  captionLayout = "label",
+  buttonVariant = "ghost",
+  formatters,
+  components,
+  ...props
+}) {
+  const defaultClassNames = getDefaultClassNames();
+  return /* @__PURE__ */ jsx(
+    DayPicker,
+    {
+      showOutsideDays,
+      className: cn(
+        "group/calendar bg-background p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
+        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
+        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
+        className
+      ),
+      captionLayout,
+      formatters: {
+        formatMonthDropdown: (date) => date.toLocaleString("default", { month: "short" }),
+        ...formatters
+      },
+      classNames: {
+        root: cn("w-fit", defaultClassNames.root),
+        months: cn(
+          "relative flex flex-col gap-4 md:flex-row",
+          defaultClassNames.months
+        ),
+        month: cn("flex w-full flex-col gap-4", defaultClassNames.month),
+        nav: cn(
+          "absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1",
+          defaultClassNames.nav
+        ),
+        button_previous: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "size-(--cell-size) p-0 select-none aria-disabled:opacity-50",
+          defaultClassNames.button_previous
+        ),
+        button_next: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "size-(--cell-size) p-0 select-none aria-disabled:opacity-50",
+          defaultClassNames.button_next
+        ),
+        month_caption: cn(
+          "flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)",
+          defaultClassNames.month_caption
+        ),
+        dropdowns: cn(
+          "flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium",
+          defaultClassNames.dropdowns
+        ),
+        dropdown_root: cn(
+          "relative rounded-md border border-input shadow-xs has-focus:border-ring has-focus:ring-[3px] has-focus:ring-ring/50",
+          defaultClassNames.dropdown_root
+        ),
+        dropdown: cn(
+          "absolute inset-0 bg-popover opacity-0",
+          defaultClassNames.dropdown
+        ),
+        caption_label: cn(
+          "font-medium select-none",
+          captionLayout === "label" ? "text-sm" : "flex h-8 items-center gap-1 rounded-md pe-1 ps-2 text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground",
+          defaultClassNames.caption_label
+        ),
+        table: "w-full border-collapse",
+        weekdays: cn("flex", defaultClassNames.weekdays),
+        weekday: cn(
+          "flex-1 rounded-md text-[0.8rem] font-normal text-muted-foreground select-none",
+          defaultClassNames.weekday
+        ),
+        week: cn("mt-2 flex w-full", defaultClassNames.week),
+        week_number_header: cn(
+          "w-(--cell-size) select-none",
+          defaultClassNames.week_number_header
+        ),
+        week_number: cn(
+          "text-[0.8rem] text-muted-foreground select-none",
+          defaultClassNames.week_number
+        ),
+        day: cn(
+          "group/day relative aspect-square h-full w-full p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-r-md",
+          props.showWeekNumber ? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-md" : "[&:first-child[data-selected=true]_button]:rounded-l-md",
+          defaultClassNames.day
+        ),
+        range_start: cn(
+          "rounded-l-md bg-accent",
+          defaultClassNames.range_start
+        ),
+        range_middle: cn("rounded-none", defaultClassNames.range_middle),
+        range_end: cn("rounded-r-md bg-accent", defaultClassNames.range_end),
+        today: cn(
+          "rounded-md bg-accent text-accent-foreground data-[selected=true]:rounded-none",
+          defaultClassNames.today
+        ),
+        outside: cn(
+          "text-muted-foreground aria-selected:text-muted-foreground",
+          defaultClassNames.outside
+        ),
+        disabled: cn(
+          "text-muted-foreground opacity-50",
+          defaultClassNames.disabled
+        ),
+        hidden: cn("invisible", defaultClassNames.hidden),
+        ...classNames
+      },
+      components: {
+        Root: ({ className: className2, rootRef, ...props2 }) => {
+          return /* @__PURE__ */ jsx(
+            "div",
+            {
+              "data-slot": "calendar",
+              ref: rootRef,
+              className: cn(className2),
+              ...props2
+            }
+          );
+        },
+        Chevron: ({ className: className2, orientation, ...props2 }) => {
+          if (orientation === "left") {
+            return /* @__PURE__ */ jsx(ChevronLeftIcon, { className: cn("size-4", className2), ...props2 });
+          }
+          if (orientation === "right") {
+            return /* @__PURE__ */ jsx(
+              ChevronRightIcon,
+              {
+                className: cn("size-4", className2),
+                ...props2
+              }
+            );
+          }
+          return /* @__PURE__ */ jsx(ChevronDownIcon, { className: cn("size-4", className2), ...props2 });
+        },
+        DayButton: CalendarDayButton,
+        WeekNumber: ({ children, ...props2 }) => {
+          return /* @__PURE__ */ jsx("td", { ...props2, children: /* @__PURE__ */ jsx("div", { className: "flex size-(--cell-size) items-center justify-center text-center", children }) });
+        },
+        ...components
+      },
+      ...props
+    }
+  );
+}
+function CalendarDayButton({
+  className,
+  day,
+  modifiers,
+  ...props
+}) {
+  const defaultClassNames = getDefaultClassNames();
+  const ref = React2.useRef(null);
+  React2.useEffect(() => {
+    if (modifiers.focused) ref.current?.focus();
+  }, [modifiers.focused]);
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      ref,
+      variant: "ghost",
+      size: "icon",
+      "data-day": day.date.toLocaleDateString(),
+      "data-selected-single": modifiers.selected && !modifiers.range_start && !modifiers.range_end && !modifiers.range_middle,
+      "data-range-start": modifiers.range_start,
+      "data-range-end": modifiers.range_end,
+      "data-range-middle": modifiers.range_middle,
+      className: cn(
+        "flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-accent-foreground [&>span]:text-xs [&>span]:opacity-70",
+        defaultClassNames.day,
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/lib/date-filter.ts
+function ymdToLocalDate(ymd) {
+  if (!ymd || !/^\d{4}-\d{2}-\d{2}$/.test(ymd)) return void 0;
+  const [y, m, d] = ymd.split("-").map(Number);
+  return new Date(y, m - 1, d, 12, 0, 0, 0);
+}
+function localDateToYmd(d) {
+  const y = d.getFullYear();
+  const m = String(d.getMonth() + 1).padStart(2, "0");
+  const day = String(d.getDate()).padStart(2, "0");
+  return `${y}-${m}-${day}`;
+}
+function FilterDateCalendar({
+  valueYmd,
+  onChangeYmd,
+  label
+}) {
+  const [timeZone, setTimeZone] = React2.useState();
+  React2.useEffect(() => {
+    setTimeZone(Intl.DateTimeFormat().resolvedOptions().timeZone);
+  }, []);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "rounded-lg border border-border overflow-hidden",
+      role: "group",
+      "aria-label": label,
+      children: /* @__PURE__ */ jsx(
+        Calendar,
+        {
+          mode: "single",
+          selected: ymdToLocalDate(valueYmd),
+          onSelect: (d) => onChangeYmd(d ? localDateToYmd(d) : void 0),
+          captionLayout: "dropdown",
+          timeZone,
+          className: "rounded-lg border-0"
+        }
+      )
+    }
+  );
+}
+
+export { FilterDateCalendar };
+//# sourceMappingURL=filter-date-calendar.js.map
+//# sourceMappingURL=filter-date-calendar.js.map