@crisp-ui-kit/crisp 0.5.0 → 0.7.1

package/dist/cjs/tokens/scale.js

@@ -0,0 +1,70 @@
+"use strict";
+// Dimensional scale — the single source of raw px for spacing, radius, and
+// component sizing. Theme-invariant (identical in light/dark), so it is emitted
+// once into :root, unlike the color tokens which flip per theme.
+//
+// Derived by measuring the live Attio app (not taste): its spacing is a
+// 2px-granular / 4px-base scale — the values 1,2,4,6,8,10,12,16 account for
+// nearly every gap/pad/margin in the sidebar. Radii cluster at 6/8/9 + a pill.
+// Recipes MUST reference these through the contract (`c.space[...]`), never a
+// literal px — this file is the only exception.
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.weight = exports.text = exports.font = exports.size = exports.radius = exports.space = void 0;
+// Spacing: gaps, padding, margins. Keys follow the Tailwind step convention
+// (0.5 = half a 4px step = 2px) so the numbers stay legible to consumers.
+exports.space = {
+    px: "1px", // hairline — the 1px gap between rows in a dense nav list
+    "0.5": "2px",
+    "1": "4px",
+    "1.5": "6px",
+    "2": "8px",
+    "2.5": "10px",
+    "3": "12px",
+    "4": "16px",
+    "5": "20px",
+    "6": "24px",
+    "8": "32px", // overlay / empty-state padding
+};
+// Corner radius. sm/md/lg are the three Attio uses on stacked surfaces
+// (inputs, rows, tiles); full is the pill.
+exports.radius = {
+    chip: "7px", // tag / chip corner — the single most used radius in Attio
+    sm: "6px", // chips, badges
+    md: "8px", // inputs, search box
+    lg: "9px", // rows, tiles, list items
+    xl: "12px", // overlay items (command rows)
+    "2xl": "16px", // overlay panels (command surface)
+    full: "999px", // pills
+};
+// Component sizing — recurring measured dimensions that are neither spacing nor
+// radius (row height, header height, the nav icon box).
+exports.size = {
+    icon: "16px", // nav / control glyph box
+    chip: "22px", // tag / chip height — Attio's most repeated small control
+    row: "28px", // nav item · search · control height
+    menuRow: "32px", // overlay row: menu item, select option, bulk-bar button
+    tableRow: "36px", // data-grid row height
+    tableHeader: "40px", // data-grid header row height
+    header: "48px", // workspace-switcher header height
+    calendarCell: "48px", // calendar day cell / header rhythm (seed x12)
+    calendarPill: "42px", // round day highlight inside a calendar cell
+};
+// Typography — Attio's UI runs entirely on Inter. Sizes measured in the sidebar
+// collapse onto 11/12/13/14/16 (lg = 14px is the default body/label size);
+// weights are 400/500/600 with 500 the UI default.
+exports.font = {
+    sans: '"Inter", system-ui, -apple-system, "Segoe UI", sans-serif',
+};
+exports.text = {
+    xs: "11px",
+    sm: "12px",
+    md: "13px",
+    lg: "14px", // default body / nav-label size
+    xl: "16px",
+};
+exports.weight = {
+    regular: "400",
+    medium: "500", // default UI weight
+    semibold: "600",
+    bold: "700", // seed-design's font-weight-bold, for the seed-styled calendar
+};

package/dist/cjs/tokens/semantic.js

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.semantic = void 0;
+exports.semantic = {
+    bgBrandSolid: "brand600",
+    bgBrandSolidPressed: "brand700",
+    fgOnBrand: "white",
+    // text on a solid success/warning/danger fill. Those tone tokens BRIGHTEN in
+    // dark (they are tuned for tinted backgrounds and coloured text), so white on
+    // them drops to 2.42:1 -- dark ink clears AA on every tone in both themes.
+    fgOnTone: "ink",
+    bgSurface: "gray00",
+    bgRaised: "gray50",
+    borderDefault: "line200",
+    borderSubtle: "line100",
+    ringNeutral: "ringNeutral",
+    bgTileActive: "tileActive",
+    shadowTileActive: "tileActiveShadow",
+    bgOverlayFrost: "overlayFrost",
+    shadowOverlay1: "shadowOverlay1",
+    shadowOverlay2: "shadowOverlay2",
+    shadowOverlay3: "shadowOverlay3",
+    bgPopover: "popoverBg",
+    ringPopover: "ringPopover",
+    shadowPopover1: "shadowPopover1",
+    shadowPopover2: "shadowPopover2",
+    shadowPopover3: "shadowPopover3",
+    fgPrimary: "gray900",
+    fgMuted: "gray400",
+    bgDanger: "red600",
+    /** Fill for a SOLID destructive control that carries white text. */
+    bgDangerSolid: "red700",
+    /** The 2px ring a text field shows while focused. */
+    strokeFieldFocus: "fieldFocus",
+    /** Unavailable/disabled content: unselected wheel rows, unpickable dates. */
+    fgDisabled: "disabledFg",
+    /** Weak neutral fill: the wheel's band, the calendar's today pill and range bridge. */
+    bgNeutralWeak: "neutralWeak",
+    /** The selected calendar day's fill, and the text on it. */
+    bgNeutralInverted: "neutralInverted",
+    fgOnNeutralInverted: "onNeutralInverted",
+    /** Weekday header row. */
+    fgNeutralSubtle: "neutralSubtle",
+    /** Date numerals. */
+    fgNeutralMuted: "neutralMuted",
+    /** Keyboard focus ring, for controls that show one inside themselves. */
+    strokeFocusRing: "focusRing",
+    bgSuccess: "green600",
+    bgWarning: "amber600",
+    bgOrange: "orange600",
+    bgCyan: "cyan600",
+    bgPurple: "purple600",
+    bgSidebar: "graySidebar",
+    // #fbfbfb — Attio's subtle raised fill; the active tab pill uses the same
+    // value as the sidebar, so it shares the palette entry under a neutral name.
+    bgSubtle: "graySidebar",
+};

package/dist/columncalc.css

@@ -0,0 +1,26 @@
+.columncalc {
+  display: flex; align-items: stretch; width: 100%; height: 100%; font-family: var(--font-sans);
+/* Menu wraps its trigger in a flex div that sizes to content, which would
+       shrink the button back to its text. Make the wrapper fill too, so the
+       whole cell stays clickable. */
+    & .menu { width: 100%; height: 100%; }
+        /* Attio's hit target is the WHOLE summary cell -- measured 246x37 with
+       padding 0 12px, not a content-sized chip. Clicking anywhere in the cell
+       opens the aggregation menu. */
+    & .columncalc-trigger { display: flex; align-items: center; gap: var(--space-1); width: 100%; height: 100%; min-height: var(--size-tableRow); margin: 0; padding: 0 var(--space-3); border: none; border-radius: var(--radius-md); background: transparent; color: var(--fg-muted); font-family: inherit; font-size: var(--text-md); font-weight: var(--weight-medium); white-space: nowrap; cursor: pointer; transition: background-color .12s, color .12s; }
+    & .columncalc-trigger:hover { background: color-mix(in srgb, var(--fg-primary) 4%, transparent); color: var(--fg-primary); }
+    & .columncalc-trigger svg { flex-shrink: 0; opacity: 0.7; }
+    & .columncalc-trigger[data-align="right"] { justify-content: flex-end; }
+    & .columncalc-placeholder { overflow: hidden; text-overflow: ellipsis; }
+    & .columncalc-value { color: var(--fg-primary); font-variant-numeric: tabular-nums; }
+    & .columncalc-op { color: var(--fg-muted); }
+    & .columncalc-section { padding: var(--space-1-5) var(--space-2) var(--space-1); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--fg-muted); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .columncalc, .columncalc * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}

package/dist/columncalc.d.ts

@@ -0,0 +1,7 @@
+import type { RecipeFn } from "../core/types";
+
+export interface ColumncalcVariants {
+
+}
+
+export declare const columncalcRecipe: RecipeFn<{  }>;

package/dist/command.css

@@ -1,3 +1,36 @@
 .command {
-  display: contents; font-family: var(--font-sans); & .command-content, & .command-card { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } & .command-backdrop { position: fixed; inset: 0; z-index: 50; background: transparent; } & .command-positioner { position: fixed; inset: 0; z-index: 51; display: flex; align-items: flex-start; justify-content: center; padding: 15vh var(--space-4) var(--space-4); } & .command-content { position: relative; display: flex; flex-direction: column; box-sizing: border-box; width: 90vw; max-width: 748px; max-height: 70vh; padding: var(--space-1); border-radius: var(--radius-2xl); background: color-mix(in srgb, var(--bg-overlay-frost) 60%, transparent); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); box-shadow: 0 8px 28px -6px var(--shadow-overlay1), 0 18px 88px -4px var(--shadow-overlay2), 0 0 1px var(--shadow-overlay3); opacity: 1; transform: scale(1); transition: opacity 0.2s ease, transform 0.2s ease; @starting-style { opacity: 0; transform: scale(0.97); } } & .command-card { display: flex; flex-direction: column; flex: 1; min-height: 0; box-sizing: border-box; border-radius: var(--radius-xl); background: var(--bg-surface); box-shadow: 0 0 0 1px color-mix(in srgb, var(--fg-primary) 8%, transparent); overflow: hidden; } & .command-control { display: flex; align-items: center; gap: var(--space-2-5); height: 52px; flex-shrink: 0; padding: 0 var(--space-4); border-bottom: 1px solid var(--border-subtle); color: var(--fg-muted); } & .command-control svg { flex-shrink: 0; } & .command-input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-family: var(--font-sans); font-size: var(--text-xl); color: var(--fg-primary); } & .command-input::placeholder { color: var(--fg-muted); } & .command-list { flex: 1; min-height: 0; overflow-y: auto; padding: var(--space-1) var(--space-2-5); display: flex; flex-direction: column; gap: var(--space-px); } & .command-empty { padding: var(--space-8) var(--space-3); text-align: center; font-size: var(--text-md); color: var(--fg-muted); } & .command-item { box-sizing: border-box; display: flex; align-items: center; gap: var(--space-2); height: 36px; padding-inline: var(--space-2-5); border-radius: var(--radius-xl); font-size: var(--text-lg); color: var(--fg-primary); cursor: pointer; } & .command-item svg { flex-shrink: 0; color: var(--fg-muted); } & .command-item[data-highlighted] { background: color-mix(in srgb, var(--fg-primary) 4%, transparent); } & .command-item-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } & .command-item-shortcut { margin-left: auto; flex-shrink: 0; display: flex; align-items: center; gap: var(--space-0-5); } & .command-group-label { padding: var(--space-2) var(--space-2-5) var(--space-1); font-size: var(--text-sm); font-weight: var(--weight-medium); color: color-mix(in srgb, var(--fg-primary) 63%, transparent); } & .command-list > .command-group-label:first-child { padding-top: var(--space-1); } & .command-footer { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; height: 44px; padding: 0 var(--space-2-5); border-top: 1px solid var(--border-subtle); } & .command-footer-nav { display: flex; align-items: center; gap: var(--space-1-5); font-size: var(--text-sm); color: var(--fg-muted); } & .command-footer-action { display: flex; align-items: center; gap: var(--space-2); height: 28px; max-width: 60%; padding: 0 var(--space-1) 0 var(--space-2-5); border: none; border-radius: var(--radius-md); background: var(--bg-brand-solid); color: var(--fg-on-brand); font-family: inherit; font-size: var(--text-md); font-weight: var(--weight-medium); cursor: pointer; } & .command-footer-action:disabled { opacity: 0.5; cursor: default; } & .command-footer-action-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } & .command-footer-key { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 var(--space-1); border-radius: var(--radius-sm); background: rgba(255,255,255,0.22); font-size: var(--text-xs); }
+  display: contents; font-family: var(--font-sans)
+  ; & .command-content, & .command-card { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
+  & .command-backdrop { position: fixed; inset: 0; z-index: 50; background: transparent; }
+  & .command-positioner { position: fixed; inset: 0; z-index: 51; display: flex; align-items: flex-start; justify-content: center; padding: 15vh var(--space-4) var(--space-4); }
+  & .command-content { position: relative; display: flex; flex-direction: column; box-sizing: border-box; width: 90vw; max-width: 748px; max-height: 70vh; padding: var(--space-1); border-radius: var(--radius-2xl); background: color-mix(in srgb, var(--bg-overlay-frost) 60%, transparent); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); box-shadow: 0 8px 28px -6px var(--shadow-overlay1), 0 18px 88px -4px var(--shadow-overlay2), 0 0 1px var(--shadow-overlay3); opacity: 1; transform: scale(1); transition: opacity 0.2s ease, transform 0.2s ease; @starting-style { opacity: 0; transform: scale(0.97); } }
+  & .command-card { display: flex; flex-direction: column; flex: 1; min-height: 0; box-sizing: border-box; border-radius: var(--radius-xl); background: var(--bg-surface); box-shadow: 0 0 0 1px color-mix(in srgb, var(--fg-primary) 8%, transparent); overflow: hidden; }
+  & .command-control { display: flex; align-items: center; gap: var(--space-2-5); height: 52px; flex-shrink: 0; padding: 0 var(--space-4); border-bottom: 1px solid var(--border-subtle); color: var(--fg-muted); }
+  & .command-control svg { flex-shrink: 0; }
+  & .command-input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-family: var(--font-sans); font-size: var(--text-xl); color: var(--fg-primary); }
+  & .command-input::placeholder { color: var(--fg-muted); }
+  & .command-list { flex: 1; min-height: 0; overflow-y: auto; padding: var(--space-1) var(--space-2-5); display: flex; flex-direction: column; gap: var(--space-px); }
+  & .command-empty { padding: var(--space-8) var(--space-3); text-align: center; font-size: var(--text-md); color: var(--fg-muted); }
+  & .command-item { box-sizing: border-box; display: flex; align-items: center; gap: var(--space-2); height: 36px; padding-inline: var(--space-2-5); border-radius: var(--radius-xl); font-size: var(--text-lg); color: var(--fg-primary); cursor: pointer; }
+  & .command-item svg { flex-shrink: 0; color: var(--fg-muted); }
+  & .command-item[data-highlighted] { background: color-mix(in srgb, var(--fg-primary) 4%, transparent); }
+  & .command-item-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  & .command-item-shortcut { margin-inline-start: auto; flex-shrink: 0; display: flex; align-items: center; gap: var(--space-0-5); }
+  & .command-group-label { padding: var(--space-2) var(--space-2-5) var(--space-1); font-size: var(--text-sm); font-weight: var(--weight-medium); color: color-mix(in srgb, var(--fg-primary) 63%, transparent); }
+  & .command-list > .command-group-label:first-child { padding-top: var(--space-1); }
+  & .command-footer { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; height: 44px; padding: 0 var(--space-2-5); border-top: 1px solid var(--border-subtle); }
+  & .command-footer-nav { display: flex; align-items: center; gap: var(--space-1-5); font-size: var(--text-sm); color: var(--fg-muted); }
+  & .command-footer-action { display: flex; align-items: center; gap: var(--space-2); height: 28px; max-width: 60%; padding: 0 var(--space-1) 0 var(--space-2-5); border: none; border-radius: var(--radius-md); background: var(--bg-brand-solid); color: var(--fg-on-brand); font-family: inherit; font-size: var(--text-md); font-weight: var(--weight-medium); cursor: pointer; }
+  & .command-footer-action:disabled { opacity: 0.5; cursor: default; }
+  & .command-footer-action-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  & .command-footer-key { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 var(--space-1); border-radius: var(--radius-sm); background: rgba(255,255,255,0.22); font-size: var(--text-xs); }
+  
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .command, .command * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
 }

package/dist/contextmenu.css

@@ -1,12 +1,20 @@
 .contextmenu {
   display: contents; font-family: var(--font-sans);
     & .contextmenu-content { position: fixed; z-index: 60; min-width: 200px; box-sizing: border-box; padding: var(--space-1); border-radius: var(--radius-xl); background: var(--bg-popover); box-shadow: inset 0 0 0 1px var(--ring-popover), 0 0 0 1px var(--shadow-popover1), 0 4px 8px -4px var(--shadow-popover2), 0 4px 12px -2px var(--shadow-popover3); opacity: 1; transform: none; transition: opacity .08s ease, transform .08s ease; transform-origin: top left; @starting-style { opacity: 0; transform: scale(0.97) translateY(-1px); } }
-    & .contextmenu-item { display: flex; align-items: center; gap: var(--space-2); width: 100%; height: 32px; box-sizing: border-box; padding: 0 var(--space-2); margin: 0; border: none; border-radius: var(--radius-md); background: none; color: var(--fg-primary); font-family: inherit; font-size: var(--text-lg); text-align: left; white-space: nowrap; cursor: pointer; }
+    & .contextmenu-item { display: flex; align-items: center; gap: var(--space-2); width: 100%; height: var(--size-menuRow); box-sizing: border-box; padding: 0 var(--space-2); margin: 0; border: none; border-radius: var(--radius-md); background: none; color: var(--fg-primary); font-family: inherit; font-size: var(--text-lg); text-align: start; white-space: nowrap; cursor: pointer; }
     & .contextmenu-item svg { flex-shrink: 0; color: var(--fg-muted); }
     & .contextmenu-item:hover { background: color-mix(in srgb, var(--fg-primary) 6%, transparent); }
     & .contextmenu-item--danger { color: var(--bg-danger); }
     & .contextmenu-item--danger svg { color: var(--bg-danger); }
     & .contextmenu-item--danger:hover { background: color-mix(in srgb, var(--bg-danger) 10%, transparent); }
-    & .contextmenu-shortcut { margin-left: auto; padding-left: var(--space-3); color: var(--fg-muted); font-size: var(--text-sm); }
+    & .contextmenu-shortcut { margin-inline-start: auto; padding-inline-start: var(--space-3); color: var(--fg-muted); font-size: var(--text-sm); }
     & .contextmenu-sep { height: 1px; margin: var(--space-1) 0; border: none; background: var(--border-subtle); }
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .contextmenu, .contextmenu * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}

package/dist/datatable.css

@@ -2,26 +2,51 @@
   display: flex; flex-direction: column; gap: var(--space-2-5); font-family: var(--font-sans);
     & .datatable-toolbar { display: flex; align-items: center; gap: var(--space-2); }
     & .datatable-search { position: relative; flex: 1; max-width: 280px; display: inline-flex; align-items: center; }
-    & .datatable-search svg { position: absolute; left: var(--space-2); color: var(--fg-muted); pointer-events: none; }
-    & .datatable-search input { width: 100%; height: 32px; padding: 0 var(--space-2) 0 var(--space-6); border: none; border-radius: var(--radius-md); background: var(--bg-surface); box-shadow: 0 0 2px rgba(28,40,64,0.18), 0 1px 3px rgba(0,0,0,0.04); font-family: inherit; font-size: var(--text-lg); color: var(--fg-primary); outline: none; transition: box-shadow .15s; }
+    & .datatable-search svg { position: absolute; inset-inline-start: var(--space-2); color: var(--fg-muted); pointer-events: none; }
+    & .datatable-search input { width: 100%; height: 32px; padding: 0 var(--space-2) 0 var(--space-6); border: none; border-radius: var(--radius-md); background: var(--bg-surface); box-shadow: inset 0 0 0 1px var(--ring-neutral), 0 0 2px rgba(28,40,64,0.18), 0 1px 3px rgba(0,0,0,0.04); font-family: inherit; font-size: var(--text-lg); color: var(--fg-primary); outline: none; transition: box-shadow .15s; }
     & .datatable-search input::placeholder { color: var(--fg-muted); }
     & .datatable-search input:focus { box-shadow: inset 0 0 0 1px var(--bg-brand-solid); }
-    & .datatable-count { margin-left: auto; font-size: var(--text-md); color: var(--fg-muted); }
-    & .datatable-th-inner { display: inline-flex; align-items: center; gap: var(--space-1-5); width: 100%; height: 100%; }
+    & .datatable-count { margin-inline-start: auto; font-size: var(--text-md); color: var(--fg-muted); }
+/* Attio's header cell has no padding of its own -- the button owns the
+       full cell so the whole header is clickable (its own inset is 12px).
+       Mirrors the summary-row fix. */
+    & th { padding: 0; }
+/* Same wrapper trap as AUTHORING.md Lesson 40 (ColumnCalc's summary trigger):
+       Menu wraps its trigger in a flex div that sizes to its content, so a
+       long header grew past the column instead of filling it -- with nothing
+       left to squeeze, the label's own ellipsis CSS (below) had no properly
+       -sized box to truncate against, and the th's own overflow hard-clipped
+       it with no "...". Fill the wrapper, scoped to th so Menu's default
+       (correct everywhere else) is untouched. */
+    & th .menu { width: 100%; height: 100%; }
+    & .datatable-th-inner { display: inline-flex; align-items: center; gap: var(--space-1-5); width: 100%; min-width: 0; height: 100%; }
     & .datatable-th-inner > svg { flex-shrink: 0; color: var(--fg-muted); }
-    & .datatable-th-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-    & .datatable-sort { display: inline-flex; align-items: center; gap: var(--space-1-5); width: 100%; height: 100%; margin: 0; padding: 0; border: none; background: none; font: inherit; letter-spacing: inherit; color: inherit; text-align: left; cursor: pointer; }
+/* Attio's summary cell has NO padding of its own -- the calculation trigger
+       owns the whole 246x37 area so a click anywhere in the cell opens the
+       menu. Zero the cell's inset and let ColumnCalc supply the 12px. */
+    & tfoot td { padding: 0; }
+/* Group heading row -- Attio groups a view under a subtle label with the
+       bucket's count beside it. */
+& .datatable-viewsettings { display: inline-flex; align-items: center; gap: var(--space-1-5); height: var(--size-row); margin: 0; padding: 0 var(--space-2); border: none; border-radius: var(--radius-md); background: transparent; color: var(--fg-muted); font-family: inherit; font-size: var(--text-md); font-weight: var(--weight-medium); white-space: nowrap; cursor: pointer; transition: background-color .12s, color .12s; }
+    & .datatable-viewsettings:hover { background: color-mix(in srgb, var(--fg-primary) 4%, transparent); color: var(--fg-primary); }
+    & .datatable-group-label { padding: var(--space-1-5) var(--space-2) var(--space-1); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--fg-muted); }
+        & .datatable-group { height: var(--size-menuRow); padding: 0 var(--space-3); background: var(--bg-subtle); border-bottom: 1px solid var(--border-subtle); font-size: var(--text-md); font-weight: var(--weight-medium); color: color-mix(in srgb, var(--fg-primary) 63%, transparent); }
+    & .datatable-group-count { margin-inline-start: var(--space-1-5); color: var(--fg-muted); font-variant-numeric: tabular-nums; }
+    & .datatable-th-rename { width: 100%; min-width: 0; height: var(--size-row); margin: 0; padding: 0 var(--space-1); border: none; border-radius: var(--radius-md); background: var(--bg-surface); box-shadow: inset 0 0 0 1px var(--bg-brand-solid); font-family: inherit; font-size: var(--text-lg); font-weight: var(--weight-medium); color: var(--fg-primary); outline: none; }
+    & .datatable-th-rename:focus { box-shadow: inset 0 0 0 1px var(--bg-brand-solid); }
+    & .datatable-th-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
+    & .datatable-sort { display: flex; align-items: center; gap: var(--space-1-5); width: 100%; min-width: 0; height: 100%; margin: 0; padding: 0 var(--space-2); border: none; background: none; font: inherit; letter-spacing: inherit; color: inherit; text-align: start; cursor: pointer; }
     & th[data-align="right"] .datatable-sort { justify-content: flex-end; }
-    & .datatable-chevron { margin-left: auto; flex-shrink: 0; color: var(--fg-muted); opacity: 0; transition: opacity .12s; }
-    & th[data-align="right"] .datatable-chevron { margin-left: 0; }
+    & .datatable-chevron { margin-inline-start: auto; flex-shrink: 0; color: var(--fg-muted); opacity: 0; transition: opacity .12s; }
+    & th[data-align="right"] .datatable-chevron { margin-inline-start: 0; }
     & .datatable-sort:hover .datatable-chevron { opacity: 0.6; }
     & .datatable-sort[data-sorted] .datatable-chevron { opacity: 1; color: var(--fg-primary); }
     /* sticky first column(s) + horizontal scroll shadow — RecordsTable's feel */
     & th[data-sticky], & td[data-sticky] { position: sticky; z-index: 1; background: var(--bg-surface); }
     & th[data-sticky] { z-index: 3; }
-    & tbody tr[data-selected] td[data-sticky] { background: color-mix(in srgb, var(--bg-brand-solid) 6%, var(--bg-surface)); }
-    & tbody tr:hover td[data-sticky] { background: color-mix(in srgb, var(--fg-primary) 3%, var(--bg-surface)); }
-    & .table-scroll[data-scrolled-x] [data-sticky-edge] { clip-path: inset(0 -14px 0 0); box-shadow: 8px 0 12px -8px rgba(28,40,64,0.22); }
+    & tbody tr[data-selected] td[data-sticky] { background: color-mix(in srgb, var(--bg-brand-solid) 10%, var(--bg-surface)); }
+    & tbody tr:hover td[data-sticky] { background: color-mix(in srgb, var(--fg-primary) 4%, var(--bg-surface)); }
+    & .table-scroll[data-scrolled-x] [data-sticky-edge] { clip-path: inset(0 -38px 0 0); box-shadow: 6px 0 16px 4px rgba(0,0,0,0.12); }
     /* add-row + summary footer */
     & .datatable-addcell { padding: 0; border-top: none; }
     & .datatable-addrow { display: flex; align-items: center; gap: var(--space-2); width: 100%; height: var(--size-tableRow); padding: 0 var(--space-2); border: none; border-top: 1px solid var(--border-subtle); background: var(--bg-surface); color: var(--fg-muted); font-family: inherit; font-size: var(--text-lg); cursor: pointer; transition: background-color .12s; }
@@ -29,10 +54,11 @@
     & .datatable-addrow svg { flex-shrink: 0; }
     & .datatable-check { display: flex; align-items: center; justify-content: center; }
     & .datatable-col-check { width: 40px; padding: 0; text-align: center; }
-    & tbody tr[data-selected] td { background: color-mix(in srgb, var(--bg-brand-solid) 6%, var(--bg-surface)); }
-    & tbody tr[data-selected]:hover td { background: color-mix(in srgb, var(--bg-brand-solid) 10%, var(--bg-surface)); }
+    & tbody tr[data-selected] td { background: color-mix(in srgb, var(--bg-brand-solid) 10%, var(--bg-surface)); }
+    & tbody tr[data-selected]:hover td { background: color-mix(in srgb, var(--fg-primary) 4%, color-mix(in srgb, var(--bg-brand-solid) 10%, var(--bg-surface))); }
     & .datatable-editable:hover { background: color-mix(in srgb, var(--fg-primary) 4%, var(--bg-surface)); cursor: text; }
     & .datatable-edit { width: 100%; height: 28px; margin: 0; padding: 0 var(--space-1-5); border: none; border-radius: var(--radius-sm); background: var(--bg-surface); box-shadow: inset 0 0 0 1px var(--bg-brand-solid); font-family: inherit; font-size: var(--text-lg); color: var(--fg-primary); outline: none; vertical-align: middle; }
+    & .datatable-edit:focus { box-shadow: inset 0 0 0 1px var(--bg-brand-solid); }
     & .datatable-empty { padding: var(--space-8) var(--space-3); text-align: center; color: var(--fg-muted); font-size: var(--text-lg); }
     /* fixed layout so column widths (and resize) are exact — like RecordsTable */
     & table { table-layout: fixed; }
@@ -47,7 +73,7 @@
     & .datatable-avatar[data-tone="success"] { background: var(--bg-success); } & .datatable-avatar[data-tone="warning"] { background: var(--bg-warning); } & .datatable-avatar[data-tone="danger"] { background: var(--bg-danger); } & .datatable-avatar[data-tone="purple"] { background: var(--bg-purple); } & .datatable-avatar[data-tone="cyan"] { background: var(--bg-cyan); } & .datatable-avatar[data-tone="orange"] { background: var(--bg-orange); }
     & .datatable-avatar img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
     & .datatable-tags { display: flex; align-items: center; gap: var(--space-1); overflow: hidden; }
-    & .datatable-tag { display: inline-flex; align-items: center; height: 22px; padding: 0 var(--space-1); border-radius: 7px; font-size: var(--text-lg); line-height: 20px; font-weight: var(--weight-medium); white-space: nowrap; background: color-mix(in srgb, var(--fg-primary) 6%, transparent); color: color-mix(in srgb, var(--fg-primary) 82%, transparent); }
+    & .datatable-tag { display: inline-flex; align-items: center; height: var(--size-chip); padding: 0 var(--space-1); border-radius: var(--radius-chip); font-size: var(--text-lg); line-height: 20px; font-weight: var(--weight-medium); white-space: nowrap; background: color-mix(in srgb, var(--fg-primary) 6%, transparent); color: color-mix(in srgb, var(--fg-primary) 82%, transparent); }
     & .datatable-tag[data-tone="brand"] { background: color-mix(in srgb, var(--bg-brand-solid) 14%, transparent); color: color-mix(in srgb, var(--bg-brand-solid) 82%, var(--fg-primary)); }
     & .datatable-tag[data-tone="success"] { background: color-mix(in srgb, var(--bg-success) 16%, transparent); color: color-mix(in srgb, var(--bg-success) 78%, var(--fg-primary)); }
     & .datatable-tag[data-tone="warning"] { background: color-mix(in srgb, var(--bg-warning) 18%, transparent); color: color-mix(in srgb, var(--bg-warning) 82%, var(--fg-primary)); }
@@ -57,4 +83,24 @@
     & .datatable-tag[data-tone="orange"] { background: color-mix(in srgb, var(--bg-orange) 16%, transparent); color: color-mix(in srgb, var(--bg-orange) 82%, var(--fg-primary)); }
     & .datatable-num { font-variant-numeric: tabular-nums; }
     & .datatable-muted { color: var(--fg-muted); }
+    /* row drag-to-reorder -- Attio's Settings > Objects > Attributes measures
+       a leading 20px grip column, a 16px grip icon, and the row's own
+       hairline doubling as the drop indicator (it tints toward the brand
+       colour as the active drop target). The affordance + geometry are
+       measured; the drag MECHANISM is crisp's existing house idiom -- HTML5
+       draggable + dataTransfer, the same one column reorder already uses
+       (RecordsTable's reorderColumn) -- not Attio's own proprietary
+       pointer-events implementation. */
+    & .datatable-col-grip { width: 20px; padding: 0; text-align: center; }
+    & .datatable-grip { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 100%; margin: 0; border: none; border-radius: 0; background: none; font-family: inherit; color: var(--fg-muted); cursor: grab; }
+    & .datatable-grip:active { cursor: grabbing; }
+    & tbody tr[data-drop-target] td, & tbody tr[data-drop-target] th { box-shadow: inset 0 2px 0 0 var(--bg-brand-solid); transition: box-shadow .12s; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .datatable, .datatable * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
 }

package/dist/datepicker.css

@@ -1,21 +1,177 @@
 .datepicker {
-  display: contents; font-family: var(--font-sans);
-    & .datepicker-trigger { display: inline-flex; align-items: center; gap: var(--space-2); box-sizing: border-box; height: 32px; padding: 0 var(--space-2-5); margin: 0; border: none; border-radius: var(--radius-md); background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg-primary) 7%, transparent); color: var(--fg-primary); font-family: inherit; font-size: var(--text-lg); white-space: nowrap; cursor: pointer; }
-    & .datepicker-trigger[data-ghost] { background: transparent; box-shadow: none; }
-    & .datepicker-trigger[data-ghost]:hover { background: color-mix(in srgb, var(--fg-primary) 4%, transparent); }
-    & .datepicker-trigger[data-placeholder] { color: var(--fg-muted); }
-    & .datepicker-trigger svg { flex-shrink: 0; color: var(--fg-muted); }
-    & .datepicker-cal { width: 244px; }
-    & .datepicker-head { display: flex; align-items: center; justify-content: space-between; height: 30px; padding: 0 var(--space-1); }
-    & .datepicker-title { font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--fg-primary); }
-    & .datepicker-nav { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin: 0; padding: 0; border: none; border-radius: var(--radius-md); background: none; color: var(--fg-muted); cursor: pointer; }
-    & .datepicker-nav:hover { background: color-mix(in srgb, var(--fg-primary) 6%, transparent); color: var(--fg-primary); }
-    & .datepicker-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-top: var(--space-1); }
-    & .datepicker-dow { display: flex; align-items: center; justify-content: center; height: 24px; font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--fg-muted); }
-    & .datepicker-day { display: flex; align-items: center; justify-content: center; height: 30px; margin: 0; padding: 0; border: none; border-radius: var(--radius-md); background: none; color: var(--fg-primary); font-family: inherit; font-size: var(--text-md); cursor: pointer; }
-    & .datepicker-day:hover { background: color-mix(in srgb, var(--fg-primary) 6%, transparent); }
-    & .datepicker-day[data-outside] { color: var(--fg-muted); opacity: 0.5; }
-    & .datepicker-day[data-today] { box-shadow: inset 0 0 0 1px var(--border-default); }
-    & .datepicker-day[data-selected] { background: var(--bg-brand-solid); color: var(--fg-on-brand); }
-    & .datepicker-day[data-selected]:hover { background: var(--bg-brand-solid-pressed); }
+  
+    position: relative; box-sizing: border-box; width: 100%; min-width: 0;
+    font-family: var(--font-sans); color: var(--fg-neutral-muted); background: var(--bg-surface);
+
+    & .datepicker-header {
+      display: flex; align-items: center; justify-content: space-between;
+      height: var(--size-calendarCell);
+    }
+    & .datepicker-header-label {
+      display: inline-flex; align-items: center; gap: var(--space-1);
+      height: 100%; min-width: 0; border: 0; padding: 0 var(--space-1);
+      border-radius: var(--radius-md); background: transparent; cursor: pointer;
+      color: var(--fg-primary); font-family: inherit;
+      font-size: var(--text-xl); line-height: 22px; font-weight: var(--weight-bold);
+      white-space: nowrap;
+      outline: 2px solid transparent; outline-offset: -2px;
+      transition: outline-color .2s ease;
+    }
+    & .datepicker-header-label:focus-visible { outline-color: var(--stroke-focus-ring); }
+    & .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: var(--size-menuRow); height: var(--size-menuRow); padding: 0;
+      border: none; border-radius: var(--radius-md); background: none;
+      color: var(--fg-muted); 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: var(--bg-raised); }
+    & .datepicker-nav-button:focus-visible { outline-color: var(--stroke-focus-ring); }
+    & .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: var(--bg-surface);
+    }
+    & .datepicker-weekday {
+      display: flex; align-items: center; justify-content: center;
+      height: var(--size-calendarCell); color: var(--fg-neutral-subtle);
+      font-size: var(--text-lg); line-height: 19px; font-weight: var(--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: var(--size-calendarCell);
+      color: var(--fg-primary); font-size: var(--text-xl); line-height: 22px;
+      font-weight: var(--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: var(--size-calendarCell);
+      isolation: isolate;
+    }
+    & .datepicker-empty-cell { min-height: var(--size-calendarCell); }
+
+    /* The bridge joining days inside a completed range.
+       The endpoints do NOT carry data-in-range -- only the interior days do --
+       so these are three independent rules, not a base plus two modifiers. A
+       modifier that sets only inset-inline-start never generates a pseudo
+       element on an endpoint, which leaves a half-cell of white between the
+       endpoint's pill and the run of grey beside it. Each rule declares its
+       own content. */
+    & .datepicker-cell[data-range-complete][data-in-range]::before {
+      content: ""; position: absolute; z-index: -1; inset-inline: 0;
+      top: calc((var(--size-calendarCell) - var(--size-calendarPill)) / 2); height: var(--size-calendarPill); background: var(--bg-neutral-weak);
+    }
+    & .datepicker-cell[data-range-complete][data-range-start]:not([data-range-end])::before {
+      content: ""; position: absolute; z-index: -1;
+      inset-inline-start: 50%; inset-inline-end: 0;
+      top: calc((var(--size-calendarCell) - var(--size-calendarPill)) / 2); height: var(--size-calendarPill); background: var(--bg-neutral-weak);
+    }
+    & .datepicker-cell[data-range-complete][data-range-end]:not([data-range-start])::before {
+      content: ""; position: absolute; z-index: -1;
+      inset-inline-start: 0; inset-inline-end: 50%;
+      top: calc((var(--size-calendarCell) - var(--size-calendarPill)) / 2); height: var(--size-calendarPill); background: var(--bg-neutral-weak);
+    }
+
+    & .datepicker-date {
+      position: relative; display: flex; width: 100%; height: 100%;
+      min-height: var(--size-calendarCell); min-width: 0;
+      align-items: flex-start; justify-content: center;
+      border: 0; padding: 0; background: transparent; cursor: pointer;
+      color: var(--fg-neutral-muted); font: inherit; outline: none;
+      isolation: isolate;
+    }
+    /* the round day highlight, behind the numeral */
+    & .datepicker-date::before {
+      content: ""; position: absolute; z-index: -1; top: calc((var(--size-calendarCell) - var(--size-calendarPill)) / 2); left: 50%;
+      width: var(--size-calendarPill); height: var(--size-calendarPill);
+      border-radius: var(--radius-full);
+      background: transparent; transform: translateX(-50%);
+    }
+    & .datepicker-date[data-today]::before { background: var(--bg-neutral-weak); }
+    & .datepicker-date[data-selected]::before { background: var(--bg-neutral-inverted); }
+    & .datepicker-date[data-selected] { color: var(--fg-on-neutral-inverted); }
+    & .datepicker-date[data-in-range] { color: var(--fg-neutral-muted); }
+    & .datepicker-date[data-in-range]::before { background: transparent; }
+    & .datepicker-date[data-unavailable] { color: var(--fg-disabled); }
+    & .datepicker-date:disabled { color: var(--fg-disabled); cursor: not-allowed; }
+    & .datepicker-date:focus-visible::after {
+      content: ""; position: absolute; top: calc((var(--size-calendarCell) - var(--size-calendarPill)) / 2); left: 50%;
+      width: var(--size-calendarPill); height: var(--size-calendarPill);
+      transform: translateX(-50%); border-radius: var(--radius-full);
+      outline: 2px solid var(--stroke-focus-ring); outline-offset: -2px;
+    }
+
+    & .datepicker-date-content {
+      position: relative; z-index: 1; display: flex; width: 100%;
+      min-height: var(--size-calendarCell); min-width: 0; box-sizing: border-box;
+      flex-direction: column; align-items: center; gap: 3px;
+      padding-top: calc((var(--size-calendarCell) - var(--size-calendarPill)) / 2); color: inherit;
+      font-size: var(--text-xl); line-height: 22px; font-weight: var(--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: var(--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: var(--size-calendarCell); bottom: 0;
+      display: flex; align-items: center; overflow: hidden;
+      background: var(--bg-surface);
+    }
+    & .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;
+    }
+  
+}
+.datepicker--visibleRange_month {
+  
+}
+.datepicker--visibleRange_twoMonths {
+  & .datepicker-months { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-6); }
+        & .datepicker-two-month-header { display: flex; align-items: center; justify-content: space-between; height: var(--size-calendarCell); }
+        & .datepicker-two-month-label { color: var(--fg-primary); font-size: var(--text-xl); line-height: 22px; font-weight: var(--weight-bold); }
+}
+.datepicker--visibleRange_week {
+  
+}
+.datepicker--visibleRange_continuous {
+  & .datepicker-weekday-row { position: sticky; top: 0; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .datepicker, .datepicker * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
 }

package/dist/datepicker.d.ts

@@ -1,7 +1,7 @@
 import type { RecipeFn } from "../core/types";
 
 export interface DatepickerVariants {
-
+  visibleRange?: "month" | "twoMonths" | "week" | "continuous";
 }
 
-export declare const datepickerRecipe: RecipeFn<{  }>;
+export declare const datepickerRecipe: RecipeFn<{ visibleRange: { month: string; twoMonths: string; week: string; continuous: string } }>;

package/dist/datepickerfield.css

@@ -0,0 +1,27 @@
+.datepickerfield {
+  
+    display: inline-flex; font-family: var(--font-sans);
+
+    & .datepickerfield-trigger {
+      display: inline-flex; align-items: center; gap: var(--space-2);
+      box-sizing: border-box; height: 32px; padding: 0 var(--space-2-5); margin: 0;
+      border: none; border-radius: var(--radius-md); background: transparent;
+      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg-primary) 7%, transparent);
+      color: var(--fg-primary); font-family: inherit; font-size: var(--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, var(--fg-primary) 4%, transparent); }
+    & .datepickerfield-trigger[data-placeholder] { color: var(--fg-muted); }
+    & .datepickerfield-trigger svg { flex-shrink: 0; color: var(--fg-muted); }
+
+    & .datepickerfield-panel { padding: var(--space-2); width: 300px; }
+    & .datepickerfield-presets { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: var(--space-2); }
+    & .datepickerfield-preset {
+      height: var(--size-chip); padding: 0 var(--space-2); border: none;
+      border-radius: var(--radius-chip); background: var(--bg-raised); color: var(--fg-primary);
+      font-family: inherit; font-size: var(--text-sm); cursor: pointer;
+    }
+    & .datepickerfield-preset:hover { background: color-mix(in srgb, var(--fg-primary) 8%, transparent); }
+  
+}

package/dist/datepickerfield.d.ts

@@ -0,0 +1,7 @@
+import type { RecipeFn } from "../core/types";
+
+export interface DatepickerfieldVariants {
+
+}
+
+export declare const datepickerfieldRecipe: RecipeFn<{  }>;