@crisp-ui-kit/crisp 0.2.0 → 0.7.0

package/dist/cjs/components/datepicker/datepicker.js

@@ -0,0 +1,153 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.rangeDayCountAtMost = exports.rangeDayCountAtLeast = exports.maxSelectionCount = exports.isSameDate = exports.excludeDates = exports.dateOnOrBefore = exports.dateOnOrAfter = exports.dateKey = exports.compareDates = exports.ContinuousDatePicker = exports.WeekDatePicker = exports.TwoMonthDatePicker = exports.DatePicker = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const dom_utils_1 = require("@seed-design/dom-utils");
+const react_date_picker_1 = require("@seed-design/react-date-picker");
+const lucide_react_1 = require("lucide-react");
+const React = __importStar(require("react"));
+const wheelpicker_1 = require("../wheelpicker");
+const datepicker_recipe_1 = require("./datepicker.recipe");
+function WeekdayRow({ api, semantic = true, }) {
+    return ((0, jsx_runtime_1.jsx)("div", { role: semantic ? "row" : undefined, "aria-hidden": semantic ? undefined : true, className: "datepicker-weekday-row", children: api.weekdayLabels.map((weekday) => ((0, jsx_runtime_1.jsx)("div", { role: semantic ? "columnheader" : undefined, "aria-label": semantic ? weekday.long : undefined, className: "datepicker-weekday", children: (0, jsx_runtime_1.jsx)("span", { "aria-hidden": "true", children: weekday.short }) }, weekday.key))) }));
+}
+function DateCellView({ cell, renderDateCellContent, renderDateCellSupplement, }) {
+    // a leading/trailing blank in the grid: still a gridcell, so the row keeps
+    // seven columns for a screen reader, but nothing to press
+    if (cell === null)
+        return ((0, jsx_runtime_1.jsx)("div", { role: "gridcell", className: "datepicker-empty-cell" }));
+    const { cellProps, buttonProps, key: _key, ...renderProps } = cell;
+    return ((0, jsx_runtime_1.jsx)("div", { ...cellProps, className: "datepicker-cell", children: (0, jsx_runtime_1.jsx)("button", { ...buttonProps, type: "button", className: "datepicker-date", children: (0, jsx_runtime_1.jsx)("span", { className: "datepicker-date-content", children: renderDateCellContent ? (renderDateCellContent(renderProps)) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { "data-date-picker-day": "", children: cell.formattedDay }), renderDateCellSupplement?.(renderProps)] })) }) }) }));
+}
+function NavigationButton({ direction, className, ...props }) {
+    const Icon = direction === "left" ? lucide_react_1.ChevronLeft : lucide_react_1.ChevronRight;
+    return ((0, jsx_runtime_1.jsx)("button", { ...props, type: "button", className: className, children: (0, jsx_runtime_1.jsx)(Icon, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) }));
+}
+function Header({ api }) {
+    // in RTL the chevrons swap: "previous" is on the right
+    const previousDirection = api.isRtl ? "right" : "left";
+    const nextDirection = api.isRtl ? "left" : "right";
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "datepicker-header", children: [(0, jsx_runtime_1.jsxs)("button", { ...api.monthYearButtonProps, type: "button", id: `${api.rootProps.id}-header-label`, className: "datepicker-header-label", children: [(0, jsx_runtime_1.jsx)("span", { "data-date-picker-header-label": "", children: api.headerLabel }), (0, jsx_runtime_1.jsx)("span", { className: "datepicker-header-chevron", "data-open": api.isWheelOpen ? "" : undefined, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "datepicker-nav", children: [(0, jsx_runtime_1.jsx)(NavigationButton, { ...api.previousButtonProps, direction: previousDirection, className: "datepicker-nav-button" }), (0, jsx_runtime_1.jsx)(NavigationButton, { ...api.nextButtonProps, direction: nextDirection, className: "datepicker-nav-button" })] })] }));
+}
+function TwoMonthHeader({ api, label, labelId, position, }) {
+    const isFirst = position === "first";
+    const direction = api.isRtl
+        ? isFirst
+            ? "right"
+            : "left"
+        : isFirst
+            ? "left"
+            : "right";
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "datepicker-two-month-header", children: [(0, jsx_runtime_1.jsx)("div", { id: labelId, className: "datepicker-two-month-label", children: label }), (0, jsx_runtime_1.jsx)(NavigationButton, { ...(isFirst ? api.previousButtonProps : api.nextButtonProps), direction: direction, "data-placement": isFirst ? "start" : "end", className: "datepicker-nav-button" })] }));
+}
+function MonthView({ api, month, renderDateCellContent, renderDateCellSupplement, showWeekdays, showMonthLabel, renderHeader, monthRef, }) {
+    const labelId = `${api.rootProps.id}-${month.key}-label`;
+    const headerLabelId = `${api.rootProps.id}-header-label`;
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: monthRef, className: "datepicker-month", children: [renderHeader?.(labelId), showMonthLabel ? ((0, jsx_runtime_1.jsx)("div", { id: labelId, className: "datepicker-month-label", children: month.label })) : ((0, jsx_runtime_1.jsx)("span", { id: labelId, className: "datepicker-live-region", children: month.label })), (0, jsx_runtime_1.jsxs)("div", { ...api.gridProps, "aria-labelledby": showMonthLabel || renderHeader
+                    ? labelId
+                    : api.visibleRange === "month"
+                        ? headerLabelId
+                        : labelId, className: "datepicker-grid", children: [showWeekdays && (0, jsx_runtime_1.jsx)(WeekdayRow, { api: api }), month.weeks.map((week) => ((0, jsx_runtime_1.jsx)("div", { role: "row", className: "datepicker-week-row", children: week.cells.map((cell, index) => ((0, jsx_runtime_1.jsx)(DateCellView, { cell: cell, renderDateCellContent: renderDateCellContent, renderDateCellSupplement: renderDateCellSupplement }, cell?.key ?? `${week.key}-empty-${index}`))) }, week.key)))] })] }));
+}
+function WheelView({ api }) {
+    return ((0, jsx_runtime_1.jsx)("div", { className: "datepicker-wheel-container", children: (0, jsx_runtime_1.jsx)(wheelpicker_1.WheelPicker, { className: "datepicker-wheel", "aria-label": api.headerLabel, columns: [
+                {
+                    key: "year",
+                    label: api.ariaLabels.yearWheel,
+                    options: api.wheel.yearOptions,
+                },
+                {
+                    key: "month",
+                    label: api.ariaLabels.monthWheel,
+                    options: api.wheel.monthOptions,
+                },
+            ], value: { year: api.wheel.yearValue, month: api.wheel.monthValue }, onValueChange: (next) => {
+                if (next.year !== api.wheel.yearValue)
+                    api.wheel.onYearValueChange(next.year);
+                if (next.month !== api.wheel.monthValue)
+                    api.wheel.onMonthValueChange(next.month);
+            } }) }));
+}
+const styleOf = ({ height, minHeight, maxHeight }) => height === undefined && minHeight === undefined && maxHeight === undefined
+    ? undefined
+    : { height, minHeight, maxHeight };
+const DatePickerImplementation = React.forwardRef((props, forwardedRef) => {
+    // The engine defaults `locale` to "ko-KR" — it is a Korean design system.
+    // crisp's other components are English-default, so the default is overridden
+    // here rather than inherited; a consumer's own `locale` still wins.
+    const api = (0, react_date_picker_1.useDatePicker)({ locale: "en-US", ...props });
+    const { renderDateCellContent, renderDateCellSupplement, actionsRef, visibleRange: _visibleRange, selectionMode: _selectionMode, value: _value, defaultValue: _defaultValue, onValueChange: _onValueChange, viewDate: _viewDate, defaultViewDate: _defaultViewDate, onViewDateChange: _onViewDateChange, today: _today, locale: _locale, weekStartsOn: _weekStartsOn, yearRange: _yearRange, monthRange: _monthRange, constraints: _constraints, disabled: _disabled, readOnly: _readOnly, rangeStartReadOnly: _rangeStartReadOnly, ariaLabels: _ariaLabels, height, minHeight, maxHeight, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ...rootProps } = props;
+    React.useImperativeHandle(actionsRef, () => api.actions, [api.actions]);
+    // a labelledby wins over a label; otherwise fall back to the engine's name
+    const rootAriaLabel = ariaLabelledby
+        ? ariaLabel
+        : (ariaLabel ?? api.ariaLabels.root);
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: (el) => {
+            api.refs.root(el);
+            if (typeof forwardedRef === "function")
+                forwardedRef(el);
+            else if (forwardedRef)
+                forwardedRef.current = el;
+        }, ...(0, dom_utils_1.mergeProps)(api.rootProps, rootProps), "aria-label": rootAriaLabel, "aria-labelledby": ariaLabelledby, className: (0, datepicker_recipe_1.datepickerRecipe)({
+            visibleRange: api.visibleRange,
+            className,
+        }), style: styleOf({ height, minHeight, maxHeight }), children: [api.visibleRange === "continuous" ? ((0, jsx_runtime_1.jsxs)("div", { ref: api.refs.continuousScroll, ...api.continuousScrollProps, "data-date-picker-continuous-scroll": "", className: "datepicker-continuous-scroll", children: [(0, jsx_runtime_1.jsx)(WeekdayRow, { api: api, semantic: false }), (0, jsx_runtime_1.jsxs)("div", { className: "datepicker-continuous-content", children: [(0, jsx_runtime_1.jsx)("div", { "aria-hidden": "true", className: "datepicker-continuous-spacer", style: { height: api.virtual.topHeight } }), api.months.map((month) => ((0, jsx_runtime_1.jsx)(MonthView, { api: api, month: month, renderDateCellContent: renderDateCellContent, renderDateCellSupplement: renderDateCellSupplement, showWeekdays: false, showMonthLabel: true, monthRef: api.refs.continuousMonth(month.key) }, month.key))), (0, jsx_runtime_1.jsx)("div", { "aria-hidden": "true", className: "datepicker-continuous-spacer", style: { height: api.virtual.bottomHeight } })] })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [api.visibleRange !== "twoMonths" && (0, jsx_runtime_1.jsx)(Header, { api: api }), (0, jsx_runtime_1.jsx)("div", { "data-wheel-open": api.isWheelOpen && api.visibleRange !== "twoMonths"
+                            ? ""
+                            : undefined, "aria-hidden": api.isWheelOpen && api.visibleRange !== "twoMonths"
+                            ? true
+                            : undefined, className: "datepicker-months", children: api.months.map((month, index) => ((0, jsx_runtime_1.jsx)(MonthView, { api: api, month: month, renderDateCellContent: renderDateCellContent, renderDateCellSupplement: renderDateCellSupplement, showWeekdays: true, showMonthLabel: false, renderHeader: api.visibleRange === "twoMonths"
+                                ? (labelId) => ((0, jsx_runtime_1.jsx)(TwoMonthHeader, { api: api, label: month.label, labelId: labelId, position: index === 0 ? "first" : "last" }))
+                                : undefined }, month.key))) }), api.isWheelOpen && api.visibleRange !== "twoMonths" && ((0, jsx_runtime_1.jsx)(WheelView, { api: api }))] })), (0, jsx_runtime_1.jsx)("span", { ...api.liveRegionProps, className: "datepicker-live-region", children: api.headerLabel })] }));
+});
+DatePickerImplementation.displayName = "DatePickerImplementation";
+exports.DatePicker = React.forwardRef((props, ref) => ((0, jsx_runtime_1.jsx)(DatePickerImplementation, { ref: ref, ...props, visibleRange: "month" })));
+exports.DatePicker.displayName = "DatePicker";
+exports.TwoMonthDatePicker = React.forwardRef((props, ref) => ((0, jsx_runtime_1.jsx)(DatePickerImplementation, { ref: ref, ...props, visibleRange: "twoMonths" })));
+exports.TwoMonthDatePicker.displayName = "TwoMonthDatePicker";
+exports.WeekDatePicker = React.forwardRef((props, ref) => ((0, jsx_runtime_1.jsx)(DatePickerImplementation, { ref: ref, ...props, visibleRange: "week" })));
+exports.WeekDatePicker.displayName = "WeekDatePicker";
+exports.ContinuousDatePicker = React.forwardRef((props, ref) => ((0, jsx_runtime_1.jsx)(DatePickerImplementation, { ref: ref, ...props, visibleRange: "continuous" })));
+exports.ContinuousDatePicker.displayName = "ContinuousDatePicker";
+var react_date_picker_2 = require("@seed-design/react-date-picker");
+Object.defineProperty(exports, "compareDates", { enumerable: true, get: function () { return react_date_picker_2.compareDates; } });
+Object.defineProperty(exports, "dateKey", { enumerable: true, get: function () { return react_date_picker_2.dateKey; } });
+Object.defineProperty(exports, "dateOnOrAfter", { enumerable: true, get: function () { return react_date_picker_2.dateOnOrAfter; } });
+Object.defineProperty(exports, "dateOnOrBefore", { enumerable: true, get: function () { return react_date_picker_2.dateOnOrBefore; } });
+Object.defineProperty(exports, "excludeDates", { enumerable: true, get: function () { return react_date_picker_2.excludeDates; } });
+Object.defineProperty(exports, "isSameDate", { enumerable: true, get: function () { return react_date_picker_2.isSameDate; } });
+Object.defineProperty(exports, "maxSelectionCount", { enumerable: true, get: function () { return react_date_picker_2.maxSelectionCount; } });
+Object.defineProperty(exports, "rangeDayCountAtLeast", { enumerable: true, get: function () { return react_date_picker_2.rangeDayCountAtLeast; } });
+Object.defineProperty(exports, "rangeDayCountAtMost", { enumerable: true, get: function () { return react_date_picker_2.rangeDayCountAtMost; } });

package/dist/cjs/components/datepicker/datepicker.recipe.js

@@ -0,0 +1,180 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.datepickerRecipe = void 0;
+const core_1 = require("../../core");
+const tokens_1 = require("../../tokens");
+// seed-design's calendar, measured from @seed-design/css. The geometry is a
+// 48px rhythm: header, weekday row, month label and every date cell are all
+// x12 tall, and the 42px pill inside a cell is inset 3px from its top.
+//
+// The pill and the range bridge are ::before layers behind the numeral
+// (`isolation: isolate` on the cell keeps their z-index local), which is what
+// lets a range paint edge-to-edge between cells while each day keeps its own
+// round highlight.
+// The pill is centred in the cell, so its inset is the half-difference rather
+// than a fourth independent number: change the cell or the pill and the inset
+// follows. Every `top` in the calendar -- the day pill, its focus ring, the
+// range bridge and the content column's padding -- is this one value.
+const pillInset = `calc((${tokens_1.contract.size.calendarCell} - ${tokens_1.contract.size.calendarPill}) / 2)`;
+const config = (0, core_1.defineRecipe)({
+    name: "datepicker",
+    base: `
+    position: relative; box-sizing: border-box; width: 100%; min-width: 0;
+    font-family: ${tokens_1.contract.font.sans}; color: ${tokens_1.contract.fgNeutralMuted}; background: ${tokens_1.contract.bgSurface};
+
+    & .datepicker-header {
+      display: flex; align-items: center; justify-content: space-between;
+      height: ${tokens_1.contract.size.calendarCell};
+    }
+    & .datepicker-header-label {
+      display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["1"]};
+      height: 100%; min-width: 0; border: 0; padding: 0 ${tokens_1.contract.space["1"]};
+      border-radius: ${tokens_1.contract.radius.md}; background: transparent; cursor: pointer;
+      color: ${tokens_1.contract.fgPrimary}; font-family: inherit;
+      font-size: ${tokens_1.contract.text.xl}; line-height: 22px; font-weight: ${tokens_1.contract.weight.bold};
+      white-space: nowrap;
+      outline: 2px solid transparent; outline-offset: -2px;
+      transition: outline-color .2s ease;
+    }
+    & .datepicker-header-label:focus-visible { outline-color: ${tokens_1.contract.strokeFocusRing}; }
+    & .datepicker-header-chevron { display: inline-flex; transition: transform .2s ease; }
+    & .datepicker-header-chevron[data-open] { transform: rotate(180deg); }
+
+    & .datepicker-nav { display: flex; align-items: center; }
+    & .datepicker-nav-button {
+      display: inline-flex; align-items: center; justify-content: center;
+      width: ${tokens_1.contract.size.menuRow}; height: ${tokens_1.contract.size.menuRow}; padding: 0;
+      border: none; border-radius: ${tokens_1.contract.radius.md}; background: none;
+      color: ${tokens_1.contract.fgMuted}; font-family: inherit; cursor: pointer;
+      outline: 2px solid transparent; outline-offset: -2px;
+      transition: background-color .12s, outline-color .2s ease;
+    }
+    & .datepicker-nav-button:hover { background: ${tokens_1.contract.bgRaised}; }
+    & .datepicker-nav-button:focus-visible { outline-color: ${tokens_1.contract.strokeFocusRing}; }
+    & .datepicker-nav-button:disabled { opacity: .4; cursor: not-allowed; }
+
+    & .datepicker-weekday-row {
+      display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
+      position: relative; z-index: 2; background: ${tokens_1.contract.bgSurface};
+    }
+    & .datepicker-weekday {
+      display: flex; align-items: center; justify-content: center;
+      height: ${tokens_1.contract.size.calendarCell}; color: ${tokens_1.contract.fgNeutralSubtle};
+      font-size: ${tokens_1.contract.text.lg}; line-height: 19px; font-weight: ${tokens_1.contract.weight.medium};
+    }
+
+    & .datepicker-months { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; min-width: 0; }
+    & .datepicker-months[data-wheel-open] { visibility: hidden; }
+    & .datepicker-month { min-width: 0; }
+    & .datepicker-month-label {
+      display: flex; align-items: center; height: ${tokens_1.contract.size.calendarCell};
+      color: ${tokens_1.contract.fgPrimary}; font-size: ${tokens_1.contract.text.xl}; line-height: 22px;
+      font-weight: ${tokens_1.contract.weight.bold};
+    }
+
+    & .datepicker-grid { display: grid; min-width: 0; }
+    & .datepicker-week-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
+
+    & .datepicker-cell {
+      position: relative; min-width: 0; min-height: ${tokens_1.contract.size.calendarCell};
+      isolation: isolate;
+    }
+    & .datepicker-empty-cell { min-height: ${tokens_1.contract.size.calendarCell}; }
+
+    /* the bridge joining days inside a completed range */
+    & .datepicker-cell[data-range-complete][data-in-range]::before {
+      content: ""; position: absolute; z-index: -1; inset-inline: 0;
+      top: ${pillInset}; height: ${tokens_1.contract.size.calendarPill}; background: ${tokens_1.contract.bgNeutralWeak};
+    }
+    & .datepicker-cell[data-range-complete][data-range-start]:not([data-range-end])::before {
+      inset-inline-start: 50%;
+    }
+    & .datepicker-cell[data-range-complete][data-range-end]:not([data-range-start])::before {
+      inset-inline-end: 50%;
+    }
+
+    & .datepicker-date {
+      position: relative; display: flex; width: 100%; height: 100%;
+      min-height: ${tokens_1.contract.size.calendarCell}; min-width: 0;
+      align-items: flex-start; justify-content: center;
+      border: 0; padding: 0; background: transparent; cursor: pointer;
+      color: ${tokens_1.contract.fgNeutralMuted}; font: inherit; outline: none;
+      isolation: isolate;
+    }
+    /* the round day highlight, behind the numeral */
+    & .datepicker-date::before {
+      content: ""; position: absolute; z-index: -1; top: ${pillInset}; left: 50%;
+      width: ${tokens_1.contract.size.calendarPill}; height: ${tokens_1.contract.size.calendarPill};
+      border-radius: ${tokens_1.contract.radius.full};
+      background: transparent; transform: translateX(-50%);
+    }
+    & .datepicker-date[data-today]::before { background: ${tokens_1.contract.bgNeutralWeak}; }
+    & .datepicker-date[data-selected]::before { background: ${tokens_1.contract.bgNeutralInverted}; }
+    & .datepicker-date[data-selected] { color: ${tokens_1.contract.fgOnNeutralInverted}; }
+    & .datepicker-date[data-in-range] { color: ${tokens_1.contract.fgNeutralMuted}; }
+    & .datepicker-date[data-in-range]::before { background: transparent; }
+    & .datepicker-date[data-unavailable] { color: ${tokens_1.contract.fgDisabled}; }
+    & .datepicker-date:disabled { color: ${tokens_1.contract.fgDisabled}; cursor: not-allowed; }
+    & .datepicker-date:focus-visible::after {
+      content: ""; position: absolute; top: ${pillInset}; left: 50%;
+      width: ${tokens_1.contract.size.calendarPill}; height: ${tokens_1.contract.size.calendarPill};
+      transform: translateX(-50%); border-radius: ${tokens_1.contract.radius.full};
+      outline: 2px solid ${tokens_1.contract.strokeFocusRing}; outline-offset: -2px;
+    }
+
+    & .datepicker-date-content {
+      position: relative; z-index: 1; display: flex; width: 100%;
+      min-height: ${tokens_1.contract.size.calendarCell}; min-width: 0; box-sizing: border-box;
+      flex-direction: column; align-items: center; gap: 3px;
+      padding-top: ${pillInset}; color: inherit;
+      font-size: ${tokens_1.contract.text.xl}; line-height: 22px; font-weight: ${tokens_1.contract.weight.medium};
+      font-variant-numeric: tabular-nums;
+    }
+    /* The numeral is its own 42px flex box so it centres on the 42px pill.
+       Without this the content column top-aligns the glyph and the pill reads
+       as offset — the cell is 48px, the pill 42px inset 3px, and only a
+       42px-tall numeral box shares the pill's centre line. */
+    & .datepicker-date-content > [data-date-picker-day] {
+      display: flex; min-height: ${tokens_1.contract.size.calendarPill}; flex-shrink: 0;
+      align-items: center; justify-content: center;
+    }
+
+    /* the year/month wheel, laid over the grid it replaces */
+    & .datepicker-wheel-container {
+      position: absolute; z-index: 1; inset-inline: 0;
+      top: ${tokens_1.contract.size.calendarCell}; bottom: 0;
+      display: flex; align-items: center; overflow: hidden;
+      background: ${tokens_1.contract.bgSurface};
+    }
+    & .datepicker-wheel { width: 100%; }
+
+    & .datepicker-continuous-scroll {
+      height: 100%; min-height: 0; overflow-y: auto;
+      overscroll-behavior: contain; scrollbar-width: none;
+    }
+    & .datepicker-continuous-scroll::-webkit-scrollbar { display: none; }
+    & .datepicker-continuous-content { display: flex; flex-direction: column; }
+
+    /* announced, never drawn */
+    & .datepicker-live-region {
+      position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
+      overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
+    }
+  `,
+    variants: {
+        visibleRange: {
+            month: ``,
+            twoMonths: `& .datepicker-months { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: ${tokens_1.contract.space["6"]}; }
+        & .datepicker-two-month-header { display: flex; align-items: center; justify-content: space-between; height: ${tokens_1.contract.size.calendarCell}; }
+        & .datepicker-two-month-label { color: ${tokens_1.contract.fgPrimary}; font-size: ${tokens_1.contract.text.xl}; line-height: 22px; font-weight: ${tokens_1.contract.weight.bold}; }`,
+            week: ``,
+            continuous: `& .datepicker-weekday-row { position: sticky; top: 0; }`,
+        },
+    },
+    defaultVariants: { visibleRange: "month" },
+    compoundVariants: [],
+});
+exports.datepickerRecipe = Object.assign((0, core_1.resolveRecipe)(config), {
+    config,
+});
+exports.default = config;

package/dist/cjs/components/datepicker/index.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.datepickerRecipe = exports.WeekDatePicker = exports.TwoMonthDatePicker = exports.rangeDayCountAtMost = exports.rangeDayCountAtLeast = exports.maxSelectionCount = exports.isSameDate = exports.excludeDates = exports.dateOnOrBefore = exports.dateOnOrAfter = exports.dateKey = exports.DatePicker = exports.compareDates = exports.ContinuousDatePicker = void 0;
+var datepicker_1 = require("./datepicker");
+Object.defineProperty(exports, "ContinuousDatePicker", { enumerable: true, get: function () { return datepicker_1.ContinuousDatePicker; } });
+Object.defineProperty(exports, "compareDates", { enumerable: true, get: function () { return datepicker_1.compareDates; } });
+Object.defineProperty(exports, "DatePicker", { enumerable: true, get: function () { return datepicker_1.DatePicker; } });
+Object.defineProperty(exports, "dateKey", { enumerable: true, get: function () { return datepicker_1.dateKey; } });
+Object.defineProperty(exports, "dateOnOrAfter", { enumerable: true, get: function () { return datepicker_1.dateOnOrAfter; } });
+Object.defineProperty(exports, "dateOnOrBefore", { enumerable: true, get: function () { return datepicker_1.dateOnOrBefore; } });
+Object.defineProperty(exports, "excludeDates", { enumerable: true, get: function () { return datepicker_1.excludeDates; } });
+Object.defineProperty(exports, "isSameDate", { enumerable: true, get: function () { return datepicker_1.isSameDate; } });
+Object.defineProperty(exports, "maxSelectionCount", { enumerable: true, get: function () { return datepicker_1.maxSelectionCount; } });
+Object.defineProperty(exports, "rangeDayCountAtLeast", { enumerable: true, get: function () { return datepicker_1.rangeDayCountAtLeast; } });
+Object.defineProperty(exports, "rangeDayCountAtMost", { enumerable: true, get: function () { return datepicker_1.rangeDayCountAtMost; } });
+Object.defineProperty(exports, "TwoMonthDatePicker", { enumerable: true, get: function () { return datepicker_1.TwoMonthDatePicker; } });
+Object.defineProperty(exports, "WeekDatePicker", { enumerable: true, get: function () { return datepicker_1.WeekDatePicker; } });
+var datepicker_recipe_1 = require("./datepicker.recipe");
+Object.defineProperty(exports, "datepickerRecipe", { enumerable: true, get: function () { return datepicker_recipe_1.datepickerRecipe; } });

package/dist/cjs/components/datepickerfield/datepickerfield.js

@@ -0,0 +1,85 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DatePickerField = DatePickerField;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const lucide_react_1 = require("lucide-react");
+const React = __importStar(require("react"));
+const datepicker_1 = require("../datepicker");
+const popover_1 = require("../popover");
+const datepickerfield_recipe_1 = require("./datepickerfield.recipe");
+const defaultFormat = (d) => d.toLocaleDateString(undefined, {
+    month: "short",
+    day: "numeric",
+    year: "numeric",
+});
+// the calendar counts months from 1; a JS Date counts from 0
+const toDate = (d) => new Date(d.year, d.month - 1, d.day);
+const fromDate = (d) => ({
+    year: d.getFullYear(),
+    month: d.getMonth() + 1,
+    day: d.getDate(),
+});
+/**
+ * Attio's date field: a trigger showing the value, opening a calendar in a
+ * popover. This is what `DatePicker` used to be; `DatePicker` is now
+ * seed-design's bare calendar, and this composes it.
+ */
+function DatePickerField({ value, defaultValue, onChange, placeholder = "Set date…", variant = "default", format = defaultFormat, presets, calendarProps, "aria-label": ariaLabel, className, ...rest }) {
+    const [internal, setInternal] = React.useState(defaultValue ?? null);
+    const selected = value ?? internal;
+    const [open, setOpen] = React.useState(false);
+    const pick = (d) => {
+        if (value === undefined)
+            setInternal(d);
+        onChange?.(d);
+        setOpen(false);
+    };
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, datepickerfield_recipe_1.datepickerfieldRecipe)({ className }), ...rest, children: (0, jsx_runtime_1.jsx)(popover_1.Popover, { open: open, onOpenChange: setOpen, "aria-label": ariaLabel, trigger: (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "datepickerfield-trigger", "data-ghost": variant === "ghost" ? "" : undefined, "data-placeholder": selected ? undefined : "", "aria-label": ariaLabel, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.CalendarDays, { size: 15, strokeWidth: 1.75, "aria-hidden": "true" }), selected ? format(selected) : placeholder] }), children: (0, jsx_runtime_1.jsxs)("div", { className: "datepickerfield-panel", children: [(0, jsx_runtime_1.jsx)(datepicker_1.DatePicker
+                    // DatePickerProps is a union over selectionMode, and TypeScript
+                    // cannot narrow it through a spread: it tries every branch and
+                    // reports the range one as missing props. The field is always
+                    // single-select, so the shape is pinned here rather than inferred.
+                    , { ...{
+                            ...calendarProps,
+                            selectionMode: "single",
+                            value: selected ? fromDate(selected) : undefined,
+                            onValueChange: (next) => {
+                                if (next)
+                                    pick(toDate(next));
+                            },
+                        } }), presets && presets.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: "datepickerfield-presets", children: presets.map((p, i) => ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "datepickerfield-preset", onClick: () => pick(p.date()), children: p.label }, typeof p.label === "string" ? p.label : i))) }))] }) }) }));
+}
+DatePickerField.displayName = "DatePickerField";

package/dist/cjs/components/datepickerfield/datepickerfield.recipe.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.datepickerfieldRecipe = void 0;
+const core_1 = require("../../core");
+const tokens_1 = require("../../tokens");
+// The trigger crisp's DatePicker used to own, measured from Attio: a 32px
+// outlined chip showing the value, opening a calendar in a popover. Split out
+// when DatePicker became seed-design's bare calendar, so this Attio-measured
+// field survives unchanged for the consumers already using it.
+const config = (0, core_1.defineRecipe)({
+    name: "datepickerfield",
+    base: `
+    display: inline-flex; font-family: ${tokens_1.contract.font.sans};
+
+    & .datepickerfield-trigger {
+      display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["2"]};
+      box-sizing: border-box; height: 32px; padding: 0 ${tokens_1.contract.space["2.5"]}; margin: 0;
+      border: none; border-radius: ${tokens_1.contract.radius.md}; background: transparent;
+      box-shadow: inset 0 0 0 1px color-mix(in srgb, ${tokens_1.contract.fgPrimary} 7%, transparent);
+      color: ${tokens_1.contract.fgPrimary}; font-family: inherit; font-size: ${tokens_1.contract.text.lg};
+      white-space: nowrap; cursor: pointer;
+    }
+    & .datepickerfield-trigger[data-ghost] { background: transparent; box-shadow: none; }
+    & .datepickerfield-trigger[data-ghost]:hover { background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 4%, transparent); }
+    & .datepickerfield-trigger[data-placeholder] { color: ${tokens_1.contract.fgMuted}; }
+    & .datepickerfield-trigger svg { flex-shrink: 0; color: ${tokens_1.contract.fgMuted}; }
+
+    & .datepickerfield-panel { padding: ${tokens_1.contract.space["2"]}; width: 300px; }
+    & .datepickerfield-presets { display: flex; flex-wrap: wrap; gap: ${tokens_1.contract.space["1"]}; margin-top: ${tokens_1.contract.space["2"]}; }
+    & .datepickerfield-preset {
+      height: ${tokens_1.contract.size.chip}; padding: 0 ${tokens_1.contract.space["2"]}; border: none;
+      border-radius: ${tokens_1.contract.radius.chip}; background: ${tokens_1.contract.bgRaised}; color: ${tokens_1.contract.fgPrimary};
+      font-family: inherit; font-size: ${tokens_1.contract.text.sm}; cursor: pointer;
+    }
+    & .datepickerfield-preset:hover { background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 8%, transparent); }
+  `,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+exports.datepickerfieldRecipe = Object.assign((0, core_1.resolveRecipe)(config), {
+    config,
+});
+exports.default = config;

package/dist/cjs/components/datepickerfield/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.datepickerfieldRecipe = exports.DatePickerField = void 0;
+var datepickerfield_1 = require("./datepickerfield");
+Object.defineProperty(exports, "DatePickerField", { enumerable: true, get: function () { return datepickerfield_1.DatePickerField; } });
+var datepickerfield_recipe_1 = require("./datepickerfield.recipe");
+Object.defineProperty(exports, "datepickerfieldRecipe", { enumerable: true, get: function () { return datepickerfield_recipe_1.datepickerfieldRecipe; } });

package/dist/cjs/components/dialog/dialog.js

@@ -0,0 +1,86 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Dialog = Dialog;
+exports.DialogBody = DialogBody;
+exports.DialogFooter = DialogFooter;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const dialog = __importStar(require("@zag-js/dialog"));
+const react_1 = require("@zag-js/react");
+const lucide_react_1 = require("lucide-react");
+const React = __importStar(require("react"));
+const dialog_recipe_1 = require("./dialog.recipe");
+// A globally unique id per mounted instance (see command.tsx for the rationale —
+// the machine defers its dismissal listeners a frame, so tree-relative useId
+// values could let a stale registration resolve to a new instance's node).
+let instanceCounter = 0;
+function useDialogInstanceId() {
+    const idRef = React.useRef(null);
+    if (idRef.current == null) {
+        instanceCounter += 1;
+        idRef.current = `crisp-dialog-${instanceCounter}`;
+    }
+    return idRef.current;
+}
+/**
+ * A modal dialog — composes Zag's dialog machine (focus trap, scroll lock,
+ * Escape / outside-click dismissal) with the measured Attio modal surface.
+ * Compose the body with `DialogBody` and actions with `DialogFooter`.
+ */
+function Dialog({ open, onOpenChange, title, icon, width = 640, "aria-label": ariaLabel, closeLabel = "Close", children, }) {
+    const id = useDialogInstanceId();
+    const service = (0, react_1.useMachine)(dialog.machine, {
+        id,
+        open,
+        onOpenChange(details) {
+            onOpenChange(details.open);
+        },
+        // Focus the first form field on open (like the command palette focuses its
+        // search), rather than the close button; fall back to the machine default.
+        initialFocusEl: () => document.querySelector(`[data-crisp-dialog="${id}"] .dialog-body :where(input, textarea, select, [contenteditable]):not([disabled])`),
+        "aria-label": typeof title === "string" ? title : ariaLabel,
+    });
+    const api = dialog.connect(service, react_1.normalizeProps);
+    if (!api.open)
+        return null;
+    return ((0, jsx_runtime_1.jsx)(react_1.Portal, { children: (0, jsx_runtime_1.jsxs)("div", { className: (0, dialog_recipe_1.dialogRecipe)(), children: [(0, jsx_runtime_1.jsx)("div", { ...api.getBackdropProps(), className: "dialog-backdrop" }), (0, jsx_runtime_1.jsx)("div", { ...api.getPositionerProps(), className: "dialog-positioner", children: (0, jsx_runtime_1.jsx)("div", { ...api.getContentProps(), className: "dialog-content", "data-crisp-dialog": id, style: { maxWidth: `min(${width}px, 90vw)` }, children: (0, jsx_runtime_1.jsxs)("div", { className: "dialog-card", children: [title != null && ((0, jsx_runtime_1.jsxs)("div", { className: "dialog-header", children: [icon, (0, jsx_runtime_1.jsx)("span", { ...api.getTitleProps(), className: "dialog-title", children: title }), (0, jsx_runtime_1.jsx)("button", { type: "button", ...api.getCloseTriggerProps(), className: "dialog-close", "aria-label": closeLabel, children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 16, strokeWidth: 2, "aria-hidden": "true" }) })] })), children] }) }) })] }) }));
+}
+Dialog.displayName = "Dialog";
+function DialogBody({ children, className, }) {
+    return ((0, jsx_runtime_1.jsx)("div", { className: className ? `dialog-body ${className}` : "dialog-body", children: children }));
+}
+function DialogFooter({ children }) {
+    return (0, jsx_runtime_1.jsx)("div", { className: "dialog-footer", children: children });
+}

package/dist/cjs/components/dialog/dialog.recipe.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.dialogRecipe = void 0;
+const core_1 = require("../../core");
+const tokens_1 = require("../../tokens");
+// A modal dialog surface — measured from Attio's create-record modal: a radius-16
+// frosted-glass card (60% tinted background + 15px backdrop blur, both re-measured
+// per theme — light uses a blue-tinted 3-layer shadow, dark drops to a plain
+// 2-layer black shadow) with a bordered header (title + close), a scrollable
+// body, and a bordered footer for the primary action.
+const config = (0, core_1.defineRecipe)({
+    name: "dialog",
+    base: `display: contents; font-family: ${tokens_1.contract.font.sans};
+    & .dialog-backdrop { position: fixed; inset: 0; z-index: 60; background: transparent; }
+    & .dialog-positioner { position: fixed; inset: 0; z-index: 61; display: flex; align-items: flex-start; justify-content: center; padding: 15vh ${tokens_1.contract.space["4"]} ${tokens_1.contract.space["4"]}; }
+    & .dialog-content { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: relative; display: flex; flex-direction: column; box-sizing: border-box; width: 90vw; max-height: 74vh; padding: ${tokens_1.contract.space["1"]}; border-radius: ${tokens_1.contract.radius["2xl"]}; background: color-mix(in srgb, ${tokens_1.contract.bgOverlayFrost} 60%, transparent); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); box-shadow: ${tokens_1.elevation.modal}; opacity: 1; transform: scale(1); transition: opacity 0.2s ease, transform 0.2s ease; @starting-style { opacity: 0; transform: scale(0.97); } }
+    & .dialog-card { display: flex; flex-direction: column; flex: 1; min-height: 0; box-sizing: border-box; border-radius: ${tokens_1.contract.radius.xl}; background: ${tokens_1.contract.bgSurface}; box-shadow: 0 0 0 1px color-mix(in srgb, ${tokens_1.contract.fgPrimary} 8%, transparent); overflow: hidden; }
+    & .dialog-header { display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; flex-shrink: 0; height: 52px; padding: 0 ${tokens_1.contract.space["2"]} 0 ${tokens_1.contract.space["4"]}; border-bottom: 1px solid ${tokens_1.contract.borderSubtle}; }
+    & .dialog-header svg { flex-shrink: 0; color: ${tokens_1.contract.fgMuted}; }
+    & .dialog-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgPrimary}; }
+    & .dialog-close { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 28px; height: 28px; margin: 0; padding: 0; border: none; border-radius: ${tokens_1.contract.radius.md}; background: none; color: ${tokens_1.contract.fgMuted}; font-family: inherit; cursor: pointer; }
+    & .dialog-close:hover { background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 6%, transparent); color: ${tokens_1.contract.fgPrimary}; }
+    & .dialog-body { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: ${tokens_1.contract.space["4"]}; padding: ${tokens_1.contract.space["5"]} ${tokens_1.contract.space["4"]}; }
+    & .dialog-footer { display: flex; align-items: center; justify-content: flex-end; gap: ${tokens_1.contract.space["3"]}; flex-shrink: 0; min-height: 56px; padding: 0 ${tokens_1.contract.space["4"]}; border-top: 1px solid ${tokens_1.contract.borderSubtle}; }
+    & .dialog-field { display: flex; flex-direction: column; gap: ${tokens_1.contract.space["1.5"]}; }
+    & .dialog-field-label { font-size: ${tokens_1.contract.text.sm}; font-weight: ${tokens_1.contract.weight.medium}; color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 50%, transparent); }
+    & .dialog-more { display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; margin-inline-end: auto; border: none; background: none; padding: 0; font-family: inherit; font-size: ${tokens_1.contract.text.md}; color: ${tokens_1.contract.fgMuted}; cursor: pointer; }
+    & .dialog-submit { display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; height: 28px; padding: 0 ${tokens_1.contract.space["1"]} 0 ${tokens_1.contract.space["2.5"]}; border: none; border-radius: ${tokens_1.contract.radius.md}; background: ${tokens_1.contract.bgBrandSolid}; color: ${tokens_1.contract.fgOnBrand}; font-family: inherit; font-size: ${tokens_1.contract.text.md}; font-weight: ${tokens_1.contract.weight.medium}; cursor: pointer; }
+    & .dialog-submit-key { display: inline-flex; align-items: center; justify-content: center; height: 18px; padding: 0 ${tokens_1.contract.space["1"]}; border-radius: ${tokens_1.contract.radius.sm}; background: rgba(255,255,255,0.22); font-size: ${tokens_1.contract.text.xs}; }`,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+exports.dialogRecipe = (0, core_1.resolveRecipe)(config);
+exports.default = config;

package/dist/cjs/components/dialog/index.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.dialogRecipe = exports.DialogFooter = exports.DialogBody = exports.Dialog = void 0;
+var dialog_1 = require("./dialog");
+Object.defineProperty(exports, "Dialog", { enumerable: true, get: function () { return dialog_1.Dialog; } });
+Object.defineProperty(exports, "DialogBody", { enumerable: true, get: function () { return dialog_1.DialogBody; } });
+Object.defineProperty(exports, "DialogFooter", { enumerable: true, get: function () { return dialog_1.DialogFooter; } });
+var dialog_recipe_1 = require("./dialog.recipe");
+Object.defineProperty(exports, "dialogRecipe", { enumerable: true, get: function () { return dialog_recipe_1.dialogRecipe; } });