@crisp-ui-kit/crisp 0.31.5 → 0.32.0

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

@@ -10,13 +10,13 @@ const tokens_1 = require("../../tokens");
 const config = (0, core_1.defineRecipe)({
     name: "datatable",
     base: `display: flex; flex-direction: column; gap: ${tokens_1.contract.space["2.5"]}; font-family: ${tokens_1.contract.font.sans};
-    & .datatable-toolbar { display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; }
-    & .datatable-search { position: relative; flex: 1; max-width: 280px; display: inline-flex; align-items: center; }
-    & .datatable-search svg { position: absolute; inset-inline-start: ${tokens_1.contract.space["2"]}; color: ${tokens_1.contract.fgMuted}; pointer-events: none; }
-    & .datatable-search input { width: 100%; height: 32px; padding: 0 ${tokens_1.contract.space["2"]} 0 ${tokens_1.contract.space["6"]}; border: none; border-radius: ${tokens_1.contract.radius.md}; background: ${tokens_1.contract.bgSurface}; box-shadow: ${tokens_1.elevation.field}; font-family: inherit; font-size: ${tokens_1.contract.text.lg}; color: ${tokens_1.contract.fgPrimary}; outline: none; transition: box-shadow .15s; }
-    & .datatable-search input::placeholder { color: ${tokens_1.contract.fgMuted}; }
-    & .datatable-search input:focus { box-shadow: inset 0 0 0 1px ${tokens_1.contract.bgBrandSolid}; }
-    & .datatable-count { margin-inline-start: auto; font-size: ${tokens_1.contract.text.md}; color: ${tokens_1.contract.fgMuted}; }
+    & .crisp-datatable-toolbar { display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; }
+    & .crisp-datatable-search { position: relative; flex: 1; max-width: 280px; display: inline-flex; align-items: center; }
+    & .crisp-datatable-search svg { position: absolute; inset-inline-start: ${tokens_1.contract.space["2"]}; color: ${tokens_1.contract.fgMuted}; pointer-events: none; }
+    & .crisp-datatable-search input { width: 100%; height: 32px; padding: 0 ${tokens_1.contract.space["2"]} 0 ${tokens_1.contract.space["6"]}; border: none; border-radius: ${tokens_1.contract.radius.md}; background: ${tokens_1.contract.bgSurface}; box-shadow: ${tokens_1.elevation.field}; font-family: inherit; font-size: ${tokens_1.contract.text.lg}; color: ${tokens_1.contract.fgPrimary}; outline: none; transition: box-shadow .15s; }
+    & .crisp-datatable-search input::placeholder { color: ${tokens_1.contract.fgMuted}; }
+    & .crisp-datatable-search input:focus { box-shadow: inset 0 0 0 1px ${tokens_1.contract.bgBrandSolid}; }
+    & .crisp-datatable-count { margin-inline-start: auto; font-size: ${tokens_1.contract.text.md}; color: ${tokens_1.contract.fgMuted}; }
 /* The 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. */
@@ -28,71 +28,71 @@ const config = (0, core_1.defineRecipe)({
        -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: ${tokens_1.contract.space["1.5"]}; width: 100%; min-width: 0; height: 100%; }
-    & .datatable-th-inner > svg { flex-shrink: 0; color: ${tokens_1.contract.fgMuted}; }
+    & th .crisp-menu { width: 100%; height: 100%; }
+    & .crisp-datatable-th-inner { display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; width: 100%; min-width: 0; height: 100%; }
+    & .crisp-datatable-th-inner > svg { flex-shrink: 0; color: ${tokens_1.contract.fgMuted}; }
 /* The 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 -- a view is grouped under a subtle label with the
        bucket's count beside it. */
-& .datatable-viewsettings { display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; height: ${tokens_1.contract.size.row}; margin: 0; padding: 0 ${tokens_1.contract.space["2"]}; border: none; border-radius: ${tokens_1.contract.radius.md}; background: transparent; color: ${tokens_1.contract.fgMuted}; font-family: inherit; font-size: ${tokens_1.contract.text.md}; font-weight: ${tokens_1.contract.weight.medium}; white-space: nowrap; cursor: pointer; transition: background-color .12s, color .12s; }
-    & .datatable-viewsettings:hover { background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 4%, transparent); color: ${tokens_1.contract.fgPrimary}; }
-    & .datatable-group-label { padding: ${tokens_1.contract.space["1.5"]} ${tokens_1.contract.space["2"]} ${tokens_1.contract.space["1"]}; font-size: ${tokens_1.contract.text.sm}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgMuted}; }
-        & .datatable-group { height: ${tokens_1.contract.size.menuRow}; padding: 0 ${tokens_1.contract.space["3"]}; background: ${tokens_1.contract.bgSubtle}; border-bottom: 1px solid ${tokens_1.contract.borderSubtle}; font-size: ${tokens_1.contract.text.md}; font-weight: ${tokens_1.contract.weight.medium}; color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 63%, transparent); }
-    & .datatable-group-count { margin-inline-start: ${tokens_1.contract.space["1.5"]}; color: ${tokens_1.contract.fgMuted}; font-variant-numeric: tabular-nums; }
-    & .datatable-th-rename { width: 100%; min-width: 0; height: ${tokens_1.contract.size.row}; margin: 0; padding: 0 ${tokens_1.contract.space["1"]}; border: none; border-radius: ${tokens_1.contract.radius.md}; background: ${tokens_1.contract.bgSurface}; box-shadow: inset 0 0 0 1px ${tokens_1.contract.bgBrandSolid}; font-family: inherit; font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgPrimary}; outline: none; }
-    & .datatable-th-rename:focus { box-shadow: inset 0 0 0 1px ${tokens_1.contract.bgBrandSolid}; }
-    & .datatable-th-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
-    & .datatable-sort { display: flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; width: 100%; min-width: 0; height: 100%; margin: 0; padding: 0 ${tokens_1.contract.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-inline-start: auto; flex-shrink: 0; color: ${tokens_1.contract.fgMuted}; 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: ${tokens_1.contract.fgPrimary}; }
+& .crisp-datatable-viewsettings { display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; height: ${tokens_1.contract.size.row}; margin: 0; padding: 0 ${tokens_1.contract.space["2"]}; border: none; border-radius: ${tokens_1.contract.radius.md}; background: transparent; color: ${tokens_1.contract.fgMuted}; font-family: inherit; font-size: ${tokens_1.contract.text.md}; font-weight: ${tokens_1.contract.weight.medium}; white-space: nowrap; cursor: pointer; transition: background-color .12s, color .12s; }
+    & .crisp-datatable-viewsettings:hover { background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 4%, transparent); color: ${tokens_1.contract.fgPrimary}; }
+    & .crisp-datatable-group-label { padding: ${tokens_1.contract.space["1.5"]} ${tokens_1.contract.space["2"]} ${tokens_1.contract.space["1"]}; font-size: ${tokens_1.contract.text.sm}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgMuted}; }
+        & .crisp-datatable-group { height: ${tokens_1.contract.size.menuRow}; padding: 0 ${tokens_1.contract.space["3"]}; background: ${tokens_1.contract.bgSubtle}; border-bottom: 1px solid ${tokens_1.contract.borderSubtle}; font-size: ${tokens_1.contract.text.md}; font-weight: ${tokens_1.contract.weight.medium}; color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 63%, transparent); }
+    & .crisp-datatable-group-count { margin-inline-start: ${tokens_1.contract.space["1.5"]}; color: ${tokens_1.contract.fgMuted}; font-variant-numeric: tabular-nums; }
+    & .crisp-datatable-th-rename { width: 100%; min-width: 0; height: ${tokens_1.contract.size.row}; margin: 0; padding: 0 ${tokens_1.contract.space["1"]}; border: none; border-radius: ${tokens_1.contract.radius.md}; background: ${tokens_1.contract.bgSurface}; box-shadow: inset 0 0 0 1px ${tokens_1.contract.bgBrandSolid}; font-family: inherit; font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgPrimary}; outline: none; }
+    & .crisp-datatable-th-rename:focus { box-shadow: inset 0 0 0 1px ${tokens_1.contract.bgBrandSolid}; }
+    & .crisp-datatable-th-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
+    & .crisp-datatable-sort { display: flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; width: 100%; min-width: 0; height: 100%; margin: 0; padding: 0 ${tokens_1.contract.space["2"]}; border: none; background: none; font: inherit; letter-spacing: inherit; color: inherit; text-align: start; cursor: pointer; }
+    & th[data-align="right"] .crisp-datatable-sort { justify-content: flex-end; }
+    & .crisp-datatable-chevron { margin-inline-start: auto; flex-shrink: 0; color: ${tokens_1.contract.fgMuted}; opacity: 0; transition: opacity .12s; }
+    & th[data-align="right"] .crisp-datatable-chevron { margin-inline-start: 0; }
+    & .crisp-datatable-sort:hover .crisp-datatable-chevron { opacity: 0.6; }
+    & .crisp-datatable-sort[data-sorted] .crisp-datatable-chevron { opacity: 1; color: ${tokens_1.contract.fgPrimary}; }
     /* sticky first column(s) + horizontal scroll shadow — RecordsTable's feel */
     & th[data-sticky], & td[data-sticky] { position: sticky; z-index: 1; background: ${tokens_1.contract.bgSurface}; }
     & th[data-sticky] { z-index: 3; }
     & tbody tr[data-selected] td[data-sticky] { background: color-mix(in srgb, ${tokens_1.contract.bgBrandSolid} 10%, ${tokens_1.contract.bgSurface}); }
     & tbody tr:hover td[data-sticky] { background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 4%, ${tokens_1.contract.bgSurface}); }
-    & .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); }
+    & .crisp-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: ${tokens_1.contract.space["2"]}; width: 100%; height: ${tokens_1.contract.size.tableRow}; padding: 0 ${tokens_1.contract.space["2"]}; border: none; border-top: 1px solid ${tokens_1.contract.borderSubtle}; background: ${tokens_1.contract.bgSurface}; color: ${tokens_1.contract.fgMuted}; font-family: inherit; font-size: ${tokens_1.contract.text.lg}; cursor: pointer; transition: background-color .12s; }
-    & .datatable-addrow:hover { background: ${tokens_1.contract.bgRaised}; color: ${tokens_1.contract.fgPrimary}; }
-    & .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; }
+    & .crisp-datatable-addcell { padding: 0; border-top: none; }
+    & .crisp-datatable-addrow { display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; width: 100%; height: ${tokens_1.contract.size.tableRow}; padding: 0 ${tokens_1.contract.space["2"]}; border: none; border-top: 1px solid ${tokens_1.contract.borderSubtle}; background: ${tokens_1.contract.bgSurface}; color: ${tokens_1.contract.fgMuted}; font-family: inherit; font-size: ${tokens_1.contract.text.lg}; cursor: pointer; transition: background-color .12s; }
+    & .crisp-datatable-addrow:hover { background: ${tokens_1.contract.bgRaised}; color: ${tokens_1.contract.fgPrimary}; }
+    & .crisp-datatable-addrow svg { flex-shrink: 0; }
+    & .crisp-datatable-check { display: flex; align-items: center; justify-content: center; }
+    & .crisp-datatable-col-check { width: 40px; padding: 0; text-align: center; }
     & tbody tr[data-selected] td { background: color-mix(in srgb, ${tokens_1.contract.bgBrandSolid} 10%, ${tokens_1.contract.bgSurface}); }
     & tbody tr[data-selected]:hover td { background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 4%, color-mix(in srgb, ${tokens_1.contract.bgBrandSolid} 10%, ${tokens_1.contract.bgSurface})); }
-    & .datatable-editable:hover { background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 4%, ${tokens_1.contract.bgSurface}); cursor: text; }
-    & .datatable-edit { width: 100%; height: 28px; margin: 0; padding: 0 ${tokens_1.contract.space["1.5"]}; border: none; border-radius: ${tokens_1.contract.radius.sm}; background: ${tokens_1.contract.bgSurface}; box-shadow: inset 0 0 0 1px ${tokens_1.contract.bgBrandSolid}; font-family: inherit; font-size: ${tokens_1.contract.text.lg}; color: ${tokens_1.contract.fgPrimary}; outline: none; vertical-align: middle; }
-    & .datatable-edit:focus { box-shadow: inset 0 0 0 1px ${tokens_1.contract.bgBrandSolid}; }
-    & .datatable-empty { padding: ${tokens_1.contract.space["8"]} ${tokens_1.contract.space["3"]}; text-align: center; color: ${tokens_1.contract.fgMuted}; font-size: ${tokens_1.contract.text.lg}; }
+    & .crisp-datatable-editable:hover { background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 4%, ${tokens_1.contract.bgSurface}); cursor: text; }
+    & .crisp-datatable-edit { width: 100%; height: 28px; margin: 0; padding: 0 ${tokens_1.contract.space["1.5"]}; border: none; border-radius: ${tokens_1.contract.radius.sm}; background: ${tokens_1.contract.bgSurface}; box-shadow: inset 0 0 0 1px ${tokens_1.contract.bgBrandSolid}; font-family: inherit; font-size: ${tokens_1.contract.text.lg}; color: ${tokens_1.contract.fgPrimary}; outline: none; vertical-align: middle; }
+    & .crisp-datatable-edit:focus { box-shadow: inset 0 0 0 1px ${tokens_1.contract.bgBrandSolid}; }
+    & .crisp-datatable-empty { padding: ${tokens_1.contract.space["8"]} ${tokens_1.contract.space["3"]}; text-align: center; color: ${tokens_1.contract.fgMuted}; font-size: ${tokens_1.contract.text.lg}; }
     /* fixed layout so column widths (and resize) are exact — like RecordsTable */
     & table { table-layout: fixed; }
     /* column resize grip */
-    & .datatable-resize { position: absolute; top: 0; inset-inline-end: -3px; width: 9px; height: 100%; cursor: col-resize; z-index: 6; touch-action: none; }
-    & .datatable-resize::after { content: ""; position: absolute; top: 0; inset-inline-start: 3px; width: 2px; height: 100%; background: ${tokens_1.contract.bgBrandSolid}; opacity: 0; transition: opacity .12s; }
-    & .datatable-resize:hover::after, & .datatable-resize[data-resizing]::after { opacity: 1; }
+    & .crisp-datatable-resize { position: absolute; top: 0; inset-inline-end: -3px; width: 9px; height: 100%; cursor: col-resize; z-index: 6; touch-action: none; }
+    & .crisp-datatable-resize::after { content: ""; position: absolute; top: 0; inset-inline-start: 3px; width: 2px; height: 100%; background: ${tokens_1.contract.bgBrandSolid}; opacity: 0; transition: opacity .12s; }
+    & .crisp-datatable-resize:hover::after, & .crisp-datatable-resize[data-resizing]::after { opacity: 1; }
     /* typed cells — entity (avatar + name), colour-coded tags, numbers, dates */
-    & .datatable-entity { display: flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; min-width: 0; color: ${tokens_1.contract.fgPrimary}; font-weight: ${tokens_1.contract.weight.medium}; }
-    & .datatable-entity-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-    & .datatable-avatar { width: ${tokens_1.contract.size.icon}; height: ${tokens_1.contract.size.icon}; border-radius: ${tokens_1.contract.radius.sm}; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; line-height: 1; font-weight: ${tokens_1.contract.weight.semibold}; text-transform: uppercase; color: ${tokens_1.contract.fgOnBrand}; background: ${tokens_1.contract.bgBrandSolid}; }
-    & .datatable-avatar[data-tone="success"] { background: ${tokens_1.contract.bgSuccess}; } & .datatable-avatar[data-tone="warning"] { background: ${tokens_1.contract.bgWarning}; } & .datatable-avatar[data-tone="danger"] { background: ${tokens_1.contract.bgDanger}; } & .datatable-avatar[data-tone="purple"] { background: ${tokens_1.contract.bgPurple}; } & .datatable-avatar[data-tone="cyan"] { background: ${tokens_1.contract.bgCyan}; } & .datatable-avatar[data-tone="orange"] { background: ${tokens_1.contract.bgOrange}; }
-    & .datatable-avatar img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
-    & .datatable-tags { display: flex; align-items: center; gap: ${tokens_1.contract.space["1"]}; overflow: hidden; }
-    & .datatable-tag { display: inline-flex; align-items: center; height: ${tokens_1.contract.size.chip}; padding: 0 ${tokens_1.contract.space["1"]}; border-radius: ${tokens_1.contract.radius.chip}; font-size: ${tokens_1.contract.text.lg}; line-height: 20px; font-weight: ${tokens_1.contract.weight.medium}; white-space: nowrap; background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 6%, transparent); color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 82%, transparent); }
-    & .datatable-tag[data-tone="brand"] { background: color-mix(in srgb, ${tokens_1.contract.bgBrandSolid} 14%, transparent); color: color-mix(in srgb, ${tokens_1.contract.bgBrandSolid} 82%, ${tokens_1.contract.fgPrimary}); }
-    & .datatable-tag[data-tone="success"] { background: color-mix(in srgb, ${tokens_1.contract.bgSuccess} 16%, transparent); color: color-mix(in srgb, ${tokens_1.contract.bgSuccess} 78%, ${tokens_1.contract.fgPrimary}); }
-    & .datatable-tag[data-tone="warning"] { background: color-mix(in srgb, ${tokens_1.contract.bgWarning} 18%, transparent); color: color-mix(in srgb, ${tokens_1.contract.bgWarning} 82%, ${tokens_1.contract.fgPrimary}); }
-    & .datatable-tag[data-tone="danger"] { background: color-mix(in srgb, ${tokens_1.contract.bgDanger} 15%, transparent); color: color-mix(in srgb, ${tokens_1.contract.bgDanger} 80%, ${tokens_1.contract.fgPrimary}); }
-    & .datatable-tag[data-tone="purple"] { background: color-mix(in srgb, ${tokens_1.contract.bgPurple} 16%, transparent); color: color-mix(in srgb, ${tokens_1.contract.bgPurple} 80%, ${tokens_1.contract.fgPrimary}); }
-    & .datatable-tag[data-tone="cyan"] { background: color-mix(in srgb, ${tokens_1.contract.bgCyan} 18%, transparent); color: color-mix(in srgb, ${tokens_1.contract.bgCyan} 82%, ${tokens_1.contract.fgPrimary}); }
-    & .datatable-tag[data-tone="orange"] { background: color-mix(in srgb, ${tokens_1.contract.bgOrange} 16%, transparent); color: color-mix(in srgb, ${tokens_1.contract.bgOrange} 82%, ${tokens_1.contract.fgPrimary}); }
-    & .datatable-num { font-variant-numeric: tabular-nums; }
-    & .datatable-muted { color: ${tokens_1.contract.fgMuted}; }
+    & .crisp-datatable-entity { display: flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; min-width: 0; color: ${tokens_1.contract.fgPrimary}; font-weight: ${tokens_1.contract.weight.medium}; }
+    & .crisp-datatable-entity-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    & .crisp-datatable-avatar { width: ${tokens_1.contract.size.icon}; height: ${tokens_1.contract.size.icon}; border-radius: ${tokens_1.contract.radius.sm}; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; line-height: 1; font-weight: ${tokens_1.contract.weight.semibold}; text-transform: uppercase; color: ${tokens_1.contract.fgOnBrand}; background: ${tokens_1.contract.bgBrandSolid}; }
+    & .crisp-datatable-avatar[data-tone="success"] { background: ${tokens_1.contract.bgSuccess}; } & .crisp-datatable-avatar[data-tone="warning"] { background: ${tokens_1.contract.bgWarning}; } & .crisp-datatable-avatar[data-tone="danger"] { background: ${tokens_1.contract.bgDanger}; } & .crisp-datatable-avatar[data-tone="purple"] { background: ${tokens_1.contract.bgPurple}; } & .crisp-datatable-avatar[data-tone="cyan"] { background: ${tokens_1.contract.bgCyan}; } & .crisp-datatable-avatar[data-tone="orange"] { background: ${tokens_1.contract.bgOrange}; }
+    & .crisp-datatable-avatar img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
+    & .crisp-datatable-tags { display: flex; align-items: center; gap: ${tokens_1.contract.space["1"]}; overflow: hidden; }
+    & .crisp-datatable-tag { display: inline-flex; align-items: center; height: ${tokens_1.contract.size.chip}; padding: 0 ${tokens_1.contract.space["1"]}; border-radius: ${tokens_1.contract.radius.chip}; font-size: ${tokens_1.contract.text.lg}; line-height: 20px; font-weight: ${tokens_1.contract.weight.medium}; white-space: nowrap; background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 6%, transparent); color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 82%, transparent); }
+    & .crisp-datatable-tag[data-tone="brand"] { background: color-mix(in srgb, ${tokens_1.contract.bgBrandSolid} 14%, transparent); color: color-mix(in srgb, ${tokens_1.contract.bgBrandSolid} 82%, ${tokens_1.contract.fgPrimary}); }
+    & .crisp-datatable-tag[data-tone="success"] { background: color-mix(in srgb, ${tokens_1.contract.bgSuccess} 16%, transparent); color: color-mix(in srgb, ${tokens_1.contract.bgSuccess} 78%, ${tokens_1.contract.fgPrimary}); }
+    & .crisp-datatable-tag[data-tone="warning"] { background: color-mix(in srgb, ${tokens_1.contract.bgWarning} 18%, transparent); color: color-mix(in srgb, ${tokens_1.contract.bgWarning} 82%, ${tokens_1.contract.fgPrimary}); }
+    & .crisp-datatable-tag[data-tone="danger"] { background: color-mix(in srgb, ${tokens_1.contract.bgDanger} 15%, transparent); color: color-mix(in srgb, ${tokens_1.contract.bgDanger} 80%, ${tokens_1.contract.fgPrimary}); }
+    & .crisp-datatable-tag[data-tone="purple"] { background: color-mix(in srgb, ${tokens_1.contract.bgPurple} 16%, transparent); color: color-mix(in srgb, ${tokens_1.contract.bgPurple} 80%, ${tokens_1.contract.fgPrimary}); }
+    & .crisp-datatable-tag[data-tone="cyan"] { background: color-mix(in srgb, ${tokens_1.contract.bgCyan} 18%, transparent); color: color-mix(in srgb, ${tokens_1.contract.bgCyan} 82%, ${tokens_1.contract.fgPrimary}); }
+    & .crisp-datatable-tag[data-tone="orange"] { background: color-mix(in srgb, ${tokens_1.contract.bgOrange} 16%, transparent); color: color-mix(in srgb, ${tokens_1.contract.bgOrange} 82%, ${tokens_1.contract.fgPrimary}); }
+    & .crisp-datatable-num { font-variant-numeric: tabular-nums; }
+    & .crisp-datatable-muted { color: ${tokens_1.contract.fgMuted}; }
     /* row drag-to-reorder -- a Settings > Objects > Attributes screen 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
@@ -101,9 +101,9 @@ const config = (0, core_1.defineRecipe)({
        draggable + dataTransfer, the same one column reorder already uses
        (RecordsTable's reorderColumn) -- not a 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: ${tokens_1.contract.fgMuted}; cursor: grab; }
-    & .datatable-grip:active { cursor: grabbing; }
+    & .crisp-datatable-col-grip { width: 20px; padding: 0; text-align: center; }
+    & .crisp-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: ${tokens_1.contract.fgMuted}; cursor: grab; }
+    & .crisp-datatable-grip:active { cursor: grabbing; }
     & tbody tr[data-drop-target] td, & tbody tr[data-drop-target] th { box-shadow: inset 0 2px 0 0 ${tokens_1.contract.bgBrandSolid}; transition: box-shadow .12s; }`,
     variants: {},
     defaultVariants: {},

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

@@ -42,15 +42,15 @@ 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))) }));
+    return ((0, jsx_runtime_1.jsx)("div", { role: semantic ? "row" : undefined, "aria-hidden": semantic ? undefined : true, className: "crisp-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: "crisp-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" }));
+        return ((0, jsx_runtime_1.jsx)("div", { role: "gridcell", className: "crisp-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)] })) }) }) }));
+    return ((0, jsx_runtime_1.jsx)("div", { ...cellProps, className: "crisp-datepicker-cell", children: (0, jsx_runtime_1.jsx)("button", { ...buttonProps, type: "button", className: "crisp-datepicker-date", children: (0, jsx_runtime_1.jsx)("span", { className: "crisp-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;
@@ -60,9 +60,9 @@ 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, "aria-controls": api.isWheelOpen
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-datepicker-header", children: [(0, jsx_runtime_1.jsxs)("button", { ...api.monthYearButtonProps, "aria-controls": api.isWheelOpen
                     ? api.monthYearButtonProps["aria-controls"]
-                    : undefined, 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" })] })] }));
+                    : undefined, type: "button", id: `${api.rootProps.id}-header-label`, className: "crisp-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: "crisp-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: "crisp-datepicker-nav", children: [(0, jsx_runtime_1.jsx)(NavigationButton, { ...api.previousButtonProps, direction: previousDirection, className: "crisp-datepicker-nav-button" }), (0, jsx_runtime_1.jsx)(NavigationButton, { ...api.nextButtonProps, direction: nextDirection, className: "crisp-datepicker-nav-button" })] })] }));
 }
 function TwoMonthHeader({ api, label, labelId, position, }) {
     const isFirst = position === "first";
@@ -73,19 +73,19 @@ function TwoMonthHeader({ api, label, labelId, position, }) {
         : 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" })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-datepicker-two-month-header", children: [(0, jsx_runtime_1.jsx)("div", { id: labelId, className: "crisp-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: "crisp-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
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: monthRef, className: "crisp-datepicker-month", children: [renderHeader?.(labelId), showMonthLabel ? ((0, jsx_runtime_1.jsx)("div", { id: labelId, className: "crisp-datepicker-month-label", children: month.label })) : ((0, jsx_runtime_1.jsx)("span", { id: labelId, className: "crisp-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)))] })] }));
+                        : labelId, className: "crisp-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: "crisp-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", { ...api.wheelProps, className: "datepicker-wheel-container", children: (0, jsx_runtime_1.jsx)(wheelpicker_1.WheelPicker, { className: "datepicker-wheel", "aria-label": api.headerLabel, columns: [
+    return ((0, jsx_runtime_1.jsx)("div", { ...api.wheelProps, className: "crisp-datepicker-wheel-container", children: (0, jsx_runtime_1.jsx)(wheelpicker_1.WheelPicker, { className: "crisp-datepicker-wheel", "aria-label": api.headerLabel, columns: [
                 {
                     key: "year",
                     label: api.ariaLabels.yearWheel,
@@ -126,13 +126,13 @@ const DatePickerImplementation = React.forwardRef((props, forwardedRef) => {
         }, ...(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"
+        }), 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: "crisp-datepicker-continuous-scroll", children: [(0, jsx_runtime_1.jsx)(WeekdayRow, { api: api, semantic: false }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-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"
+                            : undefined, className: "crisp-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 })] }));
+                                : 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: "crisp-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" })));

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

@@ -24,11 +24,11 @@ const config = (0, core_1.defineRecipe)({
     position: relative; box-sizing: border-box; width: 100%; min-width: 0;
     font-family: ${tokens_1.contract.font.sans}; color: ${tokens_1.contract.fgPrimary}; background: ${tokens_1.contract.bgSurface};
 
-    & .datepicker-header {
+    & .crisp-datepicker-header {
       display: flex; align-items: center; justify-content: space-between;
       height: ${tokens_1.contract.size.menuRow};
     }
-    & .datepicker-header-label {
+    & .crisp-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;
@@ -38,12 +38,12 @@ const config = (0, core_1.defineRecipe)({
       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); }
+    & .crisp-datepicker-header-label:focus-visible { outline-color: ${tokens_1.contract.strokeFocusRing}; }
+    & .crisp-datepicker-header-chevron { display: inline-flex; transition: transform .2s ease; }
+    & .crisp-datepicker-header-chevron[data-open] { transform: rotate(180deg); }
 
-    & .datepicker-nav { display: flex; align-items: center; }
-    & .datepicker-nav-button {
+    & .crisp-datepicker-nav { display: flex; align-items: center; }
+    & .crisp-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;
@@ -51,37 +51,37 @@ const config = (0, core_1.defineRecipe)({
       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; }
+    & .crisp-datepicker-nav-button:hover { background: ${tokens_1.contract.bgRaised}; }
+    & .crisp-datepicker-nav-button:focus-visible { outline-color: ${tokens_1.contract.strokeFocusRing}; }
+    & .crisp-datepicker-nav-button:disabled { opacity: .4; cursor: not-allowed; }
 
-    & .datepicker-weekday-row {
+    & .crisp-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 {
+    & .crisp-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.sm}; line-height: 16px; 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 {
+    & .crisp-datepicker-months { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; min-width: 0; }
+    & .crisp-datepicker-months[data-wheel-open] { visibility: hidden; }
+    & .crisp-datepicker-month { min-width: 0; }
+    & .crisp-datepicker-month-label {
       display: flex; align-items: center; height: 24px;
       color: ${tokens_1.contract.fgPrimary}; font-size: ${tokens_1.contract.text.lg}; line-height: 20px;
       font-weight: ${tokens_1.contract.weight.medium};
     }
 
-    & .datepicker-grid { display: grid; min-width: 0; }
-    & .datepicker-week-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
+    & .crisp-datepicker-grid { display: grid; min-width: 0; }
+    & .crisp-datepicker-week-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
 
-    & .datepicker-cell {
+    & .crisp-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}; }
+    & .crisp-datepicker-empty-cell { min-height: ${tokens_1.contract.size.calendarCell}; }
 
     /* The bridge joining days inside a completed range.
        The endpoints do NOT carry data-in-range -- only the interior days do --
@@ -90,22 +90,22 @@ const config = (0, core_1.defineRecipe)({
        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 {
+    & .crisp-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 {
+    & .crisp-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: ${pillInset}; height: ${tokens_1.contract.size.calendarPill}; background: ${tokens_1.contract.bgNeutralWeak};
     }
-    & .datepicker-cell[data-range-complete][data-range-end]:not([data-range-start])::before {
+    & .crisp-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: ${pillInset}; height: ${tokens_1.contract.size.calendarPill}; background: ${tokens_1.contract.bgNeutralWeak};
     }
 
-    & .datepicker-date {
+    & .crisp-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;
@@ -114,27 +114,27 @@ const config = (0, core_1.defineRecipe)({
       isolation: isolate;
     }
     /* the round day highlight, behind the numeral */
-    & .datepicker-date::before {
+    & .crisp-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.md};
       background: transparent; transform: translateX(-50%);
     }
-    & .datepicker-date[data-today]::before { background: ${tokens_1.contract.bgNeutralWeak}; }
-    & .datepicker-date[data-selected]::before { background: ${tokens_1.contract.bgBrandSolid}; }
-    & .datepicker-date[data-selected] { color: ${tokens_1.contract.fgOnBrand}; }
-    & .datepicker-date[data-in-range] { color: ${tokens_1.contract.fgPrimary}; }
-    & .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 {
+    & .crisp-datepicker-date[data-today]::before { background: ${tokens_1.contract.bgNeutralWeak}; }
+    & .crisp-datepicker-date[data-selected]::before { background: ${tokens_1.contract.bgBrandSolid}; }
+    & .crisp-datepicker-date[data-selected] { color: ${tokens_1.contract.fgOnBrand}; }
+    & .crisp-datepicker-date[data-in-range] { color: ${tokens_1.contract.fgPrimary}; }
+    & .crisp-datepicker-date[data-in-range]::before { background: transparent; }
+    & .crisp-datepicker-date[data-unavailable] { color: ${tokens_1.contract.fgDisabled}; }
+    & .crisp-datepicker-date:disabled { color: ${tokens_1.contract.fgDisabled}; cursor: not-allowed; }
+    & .crisp-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.md};
       outline: 2px solid ${tokens_1.contract.strokeFocusRing}; outline-offset: -2px;
     }
 
-    & .datepicker-date-content {
+    & .crisp-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;
@@ -146,29 +146,29 @@ const config = (0, core_1.defineRecipe)({
        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] {
+    & .crisp-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 {
+    & .crisp-datepicker-wheel-container {
       position: absolute; z-index: 1; inset-inline: 0;
       top: ${tokens_1.contract.size.menuRow}; bottom: 0;
       display: flex; align-items: center; overflow: hidden;
       background: ${tokens_1.contract.bgSurface};
     }
-    & .datepicker-wheel { width: 100%; }
+    & .crisp-datepicker-wheel { width: 100%; }
 
-    & .datepicker-continuous-scroll {
+    & .crisp-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; }
+    & .crisp-datepicker-continuous-scroll::-webkit-scrollbar { display: none; }
+    & .crisp-datepicker-continuous-content { display: flex; flex-direction: column; }
 
     /* announced, never drawn */
-    & .datepicker-live-region {
+    & .crisp-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;
     }
@@ -176,11 +176,11 @@ const config = (0, core_1.defineRecipe)({
     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.menuRow}; }
-        & .datepicker-two-month-label { color: ${tokens_1.contract.fgPrimary}; font-size: ${tokens_1.contract.text.lg}; line-height: 20px; font-weight: ${tokens_1.contract.weight.medium}; }`,
+            twoMonths: `& .crisp-datepicker-months { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: ${tokens_1.contract.space["6"]}; }
+        & .crisp-datepicker-two-month-header { display: flex; align-items: center; justify-content: space-between; height: ${tokens_1.contract.size.menuRow}; }
+        & .crisp-datepicker-two-month-label { color: ${tokens_1.contract.fgPrimary}; font-size: ${tokens_1.contract.text.lg}; line-height: 20px; font-weight: ${tokens_1.contract.weight.medium}; }`,
             week: ``,
-            continuous: `& .datepicker-weekday-row { position: sticky; top: 0; }`,
+            continuous: `& .crisp-datepicker-weekday-row { position: sticky; top: 0; }`,
         },
     },
     defaultVariants: { visibleRange: "month" },

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

@@ -69,7 +69,7 @@ function DatePickerField({ value, defaultValue, onValueChange, onChange, placeho
         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
+    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: "crisp-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: "crisp-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
@@ -82,6 +82,6 @@ function DatePickerField({ value, defaultValue, onValueChange, onChange, placeho
                                 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))) }))] }) }) }));
+                        } }), presets && presets.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: "crisp-datepickerfield-presets", children: presets.map((p, i) => ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-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

@@ -12,7 +12,7 @@ const config = (0, core_1.defineRecipe)({
     base: `
     display: inline-flex; font-family: ${tokens_1.contract.font.sans};
 
-    & .datepickerfield-trigger {
+    & .crisp-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;
@@ -20,19 +20,19 @@ const config = (0, core_1.defineRecipe)({
       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}; }
+    & .crisp-datepickerfield-trigger[data-ghost] { background: transparent; box-shadow: none; }
+    & .crisp-datepickerfield-trigger[data-ghost]:hover { background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 4%, transparent); }
+    & .crisp-datepickerfield-trigger[data-placeholder] { color: ${tokens_1.contract.fgMuted}; }
+    & .crisp-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 {
+    & .crisp-datepickerfield-panel { padding: ${tokens_1.contract.space["2"]}; width: 300px; }
+    & .crisp-datepickerfield-presets { display: flex; flex-wrap: wrap; gap: ${tokens_1.contract.space["1"]}; margin-top: ${tokens_1.contract.space["2"]}; }
+    & .crisp-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); }
+    & .crisp-datepickerfield-preset:hover { background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 8%, transparent); }
   `,
     variants: {},
     defaultVariants: {},

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

@@ -70,21 +70,21 @@ function Dialog({ open, onOpenChange, title, icon, width = 640, "aria-label": ar
         },
         // 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])`),
+        initialFocusEl: () => document.querySelector(`[data-crisp-dialog="${id}"] .crisp-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", { ...rest, ...(0, core_1.withDescribedBy)(api.getContentProps(), describedBy), className: (0, core_1.cx)("dialog-content", className), "data-crisp-dialog": id, 
+    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: "crisp-dialog-backdrop" }), (0, jsx_runtime_1.jsx)("div", { ...api.getPositionerProps(), className: "crisp-dialog-positioner", children: (0, jsx_runtime_1.jsx)("div", { ...rest, ...(0, core_1.withDescribedBy)(api.getContentProps(), describedBy), className: (0, core_1.cx)("crisp-dialog-content", className), "data-crisp-dialog": id, 
                         // `width` is the component's own knob, so it wins over a passed
                         // maxWidth; everything else a consumer sets survives
-                        style: { ...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] }) }) })] }) }));
+                        style: { ...style, maxWidth: `min(${width}px, 90vw)` }, children: (0, jsx_runtime_1.jsxs)("div", { className: "crisp-dialog-card", children: [title != null && ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-dialog-header", children: [icon, (0, jsx_runtime_1.jsx)("span", { ...api.getTitleProps(), className: "crisp-dialog-title", children: title }), (0, jsx_runtime_1.jsx)("button", { type: "button", ...api.getCloseTriggerProps(), className: "crisp-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 }));
+    return ((0, jsx_runtime_1.jsx)("div", { className: className ? `crisp-dialog-body ${className}` : "crisp-dialog-body", children: children }));
 }
 function DialogFooter({ children }) {
-    return (0, jsx_runtime_1.jsx)("div", { className: "dialog-footer", children: children });
+    return (0, jsx_runtime_1.jsx)("div", { className: "crisp-dialog-footer", children: children });
 }