@crisp-ui-kit/crisp 0.54.0 → 0.54.2

package/dist/native/tokens.js

@@ -12,6 +12,7 @@ export const tokens = {
       "bgRaised": "#f4f4f5",
       "borderDefault": "#e4e4e7",
       "borderSubtle": "#eeeff1",
+      "borderDropzone": "#e6e7ea",
       "ringNeutral": "transparent",
       "ringField": "rgba(0,0,0,0.06)",
       "ringSwitch": "#d9dade",
@@ -30,6 +31,7 @@ export const tokens = {
       "fgMuted": "#71717a",
       "bgDanger": "#e5484d",
       "bgDangerSolid": "#ba2525",
+      "fgDanger": "#eb3b3b",
       "strokeFieldFocus": "#1a1c20",
       "fgDisabled": "#d1d3d8",
       "bgNeutralWeak": "#f3f4f5",
@@ -49,7 +51,10 @@ export const tokens = {
       "fgSuccessSoft": "#186b3d",
       "fgWarningSoft": "#80520d",
       "fgDangerSoft": "#a33539",
-      "fgNeutralSoft": "#686870"
+      "fgNeutralSoft": "#686870",
+      "bgPurpleSoft": "#f5f0ff",
+      "fgPurpleSoft": "#6238b5",
+      "ringPurpleSoft": "#e8ddfe"
     },
     "dark": {
       "bgBrandSolid": "#266df0",
@@ -60,6 +65,7 @@ export const tokens = {
       "bgRaised": "#101112",
       "borderDefault": "#212224",
       "borderSubtle": "#1c1d1f",
+      "borderDropzone": "#212224",
       "ringNeutral": "#212224",
       "ringField": "#212224",
       "ringSwitch": "#212224",
@@ -78,6 +84,7 @@ export const tokens = {
       "fgMuted": "#9a9aa2",
       "bgDanger": "#ff5a5f",
       "bgDangerSolid": "#ba2525",
+      "fgDanger": "#ff5a5f",
       "strokeFieldFocus": "#f3f4f5",
       "fgDisabled": "#5b606a",
       "bgNeutralWeak": "#1d2025",
@@ -97,7 +104,10 @@ export const tokens = {
       "fgSuccessSoft": "#2ea968",
       "fgWarningSoft": "#e0982a",
       "fgDangerSoft": "#ff5a5f",
-      "fgNeutralSoft": "#9a9aa2"
+      "fgNeutralSoft": "#9a9aa2",
+      "bgPurpleSoft": "#2f1e5a",
+      "fgPurpleSoft": "#d8c4ff",
+      "ringPurpleSoft": "#45297d"
     }
   },
   "palette": {
@@ -109,6 +119,7 @@ export const tokens = {
       "gray900": "#101112",
       "line200": "#e4e4e7",
       "line100": "#eeeff1",
+      "line150": "#e6e7ea",
       "ringNeutral": "transparent",
       "ringField": "rgba(0,0,0,0.06)",
       "ringSwitch": "#d9dade",
@@ -128,6 +139,7 @@ export const tokens = {
       "brand700": "#1f5fd6",
       "red600": "#e5484d",
       "red700": "#ba2525",
+      "red500": "#eb3b3b",
       "fieldFocus": "#1a1c20",
       "disabledFg": "#d1d3d8",
       "neutralWeak": "#f3f4f5",
@@ -146,7 +158,10 @@ export const tokens = {
       "softSuccessText": "#186b3d",
       "softWarningText": "#80520d",
       "softDangerText": "#a33539",
-      "softNeutralText": "#686870"
+      "softNeutralText": "#686870",
+      "purpleTint": "#f5f0ff",
+      "softPurpleText": "#6238b5",
+      "purpleRing": "#e8ddfe"
     },
     "dark": {
       "gray00": "#0a0a0a",
@@ -156,6 +171,7 @@ export const tokens = {
       "gray900": "#f5f5f5",
       "line200": "#212224",
       "line100": "#1c1d1f",
+      "line150": "#212224",
       "ringNeutral": "#212224",
       "ringField": "#212224",
       "ringSwitch": "#212224",
@@ -175,6 +191,7 @@ export const tokens = {
       "brand700": "#1f5fd6",
       "red600": "#ff5a5f",
       "red700": "#ba2525",
+      "red500": "#ff5a5f",
       "fieldFocus": "#f3f4f5",
       "disabledFg": "#5b606a",
       "neutralWeak": "#1d2025",
@@ -193,7 +210,10 @@ export const tokens = {
       "softSuccessText": "#2ea968",
       "softWarningText": "#e0982a",
       "softDangerText": "#ff5a5f",
-      "softNeutralText": "#9a9aa2"
+      "softNeutralText": "#9a9aa2",
+      "purpleTint": "#2f1e5a",
+      "softPurpleText": "#d8c4ff",
+      "purpleRing": "#45297d"
     }
   },
   "space": {

package/dist/savedviews.css

@@ -0,0 +1,78 @@
+
+    /* pointer-events: auto (#375) — see Menu/MultiSelect's matching comment:
+       a modal Dialog sets pointer-events: none on document.body, and a
+       portaled layer outside Zag's knowledge inherits that lock. */
+    .crisp-savedviews-panel {
+      font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+      position: fixed; z-index: 70; pointer-events: auto; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--crisp-space-px);
+      min-width: 200px; max-height: 360px; overflow-y: auto; padding: var(--crisp-space-1);
+      border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-popover);
+      box-shadow: inset 0 0 0 1px var(--crisp-ring-popover), 0 0 0 1px var(--crisp-shadow-popover1), 0 4px 8px -4px var(--crisp-shadow-popover2), 0 4px 12px -2px var(--crisp-shadow-popover3);
+      transform-origin: top left; opacity: 1; transform: none; transition: opacity .08s ease, transform .08s ease;
+    }
+    .crisp-savedviews-panel[data-up] { transform-origin: bottom left; }
+    .crisp-savedviews-panel { @starting-style { opacity: 0; transform: scale(0.97) translateY(-1px); } }
+
+    .crisp-savedviews-row {
+      box-sizing: border-box; position: relative; display: flex; align-items: center; gap: var(--crisp-space-1-5);
+      height: var(--crisp-size-menuRow); flex-shrink: 0; padding: var(--crisp-space-1-5) var(--crisp-space-2);
+      border-radius: var(--crisp-radius-md); cursor: pointer; -webkit-user-select: none; user-select: none;
+    }
+    .crisp-savedviews-row:hover, .crisp-savedviews-row[data-highlighted] { background: var(--crisp-bg-raised); }
+    .crisp-savedviews-row-icon { flex-shrink: 0; display: inline-flex; width: var(--crisp-size-icon); height: var(--crisp-size-icon); color: var(--crisp-fg-muted); }
+    .crisp-savedviews-row-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary); }
+    .crisp-savedviews-row[aria-selected="true"] .crisp-savedviews-row-label { font-weight: var(--crisp-weight-semibold); }
+    .crisp-savedviews-row-shared { flex-shrink: 0; display: inline-flex; color: var(--crisp-fg-muted); }
+
+    /* The kebab's own <Menu> is wrapped in a slot div (savedviews.tsx) that
+       stops a click from bubbling — through the REACT tree, which a portal
+       does not leave, even though the Menu's content is a DOM sibling under
+       document.body — into the row's own onClick. The slot, not the kebab
+       button itself, is what the row's flex layout pushes to the trailing
+       edge. */
+    .crisp-savedviews-kebab-slot { flex-shrink: 0; margin-inline-start: auto; }
+    /* 20px / 4px padding is a component-intrinsic size (AUTHORING.md §4b —
+       "a badge's 20px" is the named example), used once here: raw, not a
+       scale step. */
+    .crisp-savedviews-kebab {
+      box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
+      width: 20px; height: 20px; padding: var(--crisp-space-1); margin: 0;
+      border: none; border-radius: var(--crisp-radius-sm); background: none; color: var(--crisp-fg-muted); cursor: pointer;
+      opacity: 0; transition: opacity .1s ease, background-color .12s ease, color .12s ease;
+    }
+    .crisp-savedviews-row:hover .crisp-savedviews-kebab,
+    .crisp-savedviews-row:focus-within .crisp-savedviews-kebab,
+    .crisp-savedviews-kebab[data-open] { opacity: 1; }
+    .crisp-savedviews-kebab:hover, .crisp-savedviews-kebab[data-open] { background: var(--crisp-bg-surface); color: var(--crisp-fg-primary); }
+  
+.crisp-savedviews {
+  position: relative; display: inline-flex; font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Trigger fill measured rgb(246,247,247); bgRaised's light value is
+       #f4f4f5 (244,244,245) — a 2-unit-per-channel difference, inside
+       screenshot/anti-aliasing noise, not a second real colour. Reusing the
+       token (Lesson 3 — tokens, not raw px/hex) gets a correct,
+       already-established dark-mode fill for free instead of a light-only
+       literal; AUTHORING.md Lesson 29 is the case where that shortcut went
+       wrong (a flat colour that stayed visible where the reference had
+       none) — this is the opposite risk (a token that already flips per
+       theme, applied to the closest measured match). */
+    & .crisp-savedviews-trigger {
+      box-sizing: border-box; display: inline-flex; align-items: center; gap: var(--crisp-space-1-5);
+      height: var(--crisp-size-row); margin: 0; padding: var(--crisp-space-1) var(--crisp-space-1-5);
+      border: none; border-radius: var(--crisp-radius-md); background: var(--crisp-bg-raised);
+      font-family: inherit; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary);
+      cursor: pointer; white-space: nowrap; transition: background-color .12s ease;
+    }
+    & .crisp-savedviews-trigger:hover,
+    & .crisp-savedviews-trigger[data-open] { background: color-mix(in srgb, var(--crisp-fg-primary) 4%, var(--crisp-bg-raised)); }
+    & .crisp-savedviews-trigger-icon { flex-shrink: 0; display: inline-flex; width: var(--crisp-size-icon); height: var(--crisp-size-icon); }
+    & .crisp-savedviews-trigger-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+    & .crisp-savedviews-trigger-chevron { flex-shrink: 0; color: var(--crisp-fg-muted); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crisp-savedviews, .crisp-savedviews * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}

package/dist/savedviews.d.ts

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

package/dist/savedviews.layered.css

@@ -0,0 +1,80 @@
+@layer crisp-components {
+
+    /* pointer-events: auto (#375) — see Menu/MultiSelect's matching comment:
+       a modal Dialog sets pointer-events: none on document.body, and a
+       portaled layer outside Zag's knowledge inherits that lock. */
+    .crisp-savedviews-panel {
+      font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+      position: fixed; z-index: 70; pointer-events: auto; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--crisp-space-px);
+      min-width: 200px; max-height: 360px; overflow-y: auto; padding: var(--crisp-space-1);
+      border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-popover);
+      box-shadow: inset 0 0 0 1px var(--crisp-ring-popover), 0 0 0 1px var(--crisp-shadow-popover1), 0 4px 8px -4px var(--crisp-shadow-popover2), 0 4px 12px -2px var(--crisp-shadow-popover3);
+      transform-origin: top left; opacity: 1; transform: none; transition: opacity .08s ease, transform .08s ease;
+    }
+    .crisp-savedviews-panel[data-up] { transform-origin: bottom left; }
+    .crisp-savedviews-panel { @starting-style { opacity: 0; transform: scale(0.97) translateY(-1px); } }
+
+    .crisp-savedviews-row {
+      box-sizing: border-box; position: relative; display: flex; align-items: center; gap: var(--crisp-space-1-5);
+      height: var(--crisp-size-menuRow); flex-shrink: 0; padding: var(--crisp-space-1-5) var(--crisp-space-2);
+      border-radius: var(--crisp-radius-md); cursor: pointer; -webkit-user-select: none; user-select: none;
+    }
+    .crisp-savedviews-row:hover, .crisp-savedviews-row[data-highlighted] { background: var(--crisp-bg-raised); }
+    .crisp-savedviews-row-icon { flex-shrink: 0; display: inline-flex; width: var(--crisp-size-icon); height: var(--crisp-size-icon); color: var(--crisp-fg-muted); }
+    .crisp-savedviews-row-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary); }
+    .crisp-savedviews-row[aria-selected="true"] .crisp-savedviews-row-label { font-weight: var(--crisp-weight-semibold); }
+    .crisp-savedviews-row-shared { flex-shrink: 0; display: inline-flex; color: var(--crisp-fg-muted); }
+
+    /* The kebab's own <Menu> is wrapped in a slot div (savedviews.tsx) that
+       stops a click from bubbling — through the REACT tree, which a portal
+       does not leave, even though the Menu's content is a DOM sibling under
+       document.body — into the row's own onClick. The slot, not the kebab
+       button itself, is what the row's flex layout pushes to the trailing
+       edge. */
+    .crisp-savedviews-kebab-slot { flex-shrink: 0; margin-inline-start: auto; }
+    /* 20px / 4px padding is a component-intrinsic size (AUTHORING.md §4b —
+       "a badge's 20px" is the named example), used once here: raw, not a
+       scale step. */
+    .crisp-savedviews-kebab {
+      box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
+      width: 20px; height: 20px; padding: var(--crisp-space-1); margin: 0;
+      border: none; border-radius: var(--crisp-radius-sm); background: none; color: var(--crisp-fg-muted); cursor: pointer;
+      opacity: 0; transition: opacity .1s ease, background-color .12s ease, color .12s ease;
+    }
+    .crisp-savedviews-row:hover .crisp-savedviews-kebab,
+    .crisp-savedviews-row:focus-within .crisp-savedviews-kebab,
+    .crisp-savedviews-kebab[data-open] { opacity: 1; }
+    .crisp-savedviews-kebab:hover, .crisp-savedviews-kebab[data-open] { background: var(--crisp-bg-surface); color: var(--crisp-fg-primary); }
+  
+.crisp-savedviews {
+  position: relative; display: inline-flex; font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Trigger fill measured rgb(246,247,247); bgRaised's light value is
+       #f4f4f5 (244,244,245) — a 2-unit-per-channel difference, inside
+       screenshot/anti-aliasing noise, not a second real colour. Reusing the
+       token (Lesson 3 — tokens, not raw px/hex) gets a correct,
+       already-established dark-mode fill for free instead of a light-only
+       literal; AUTHORING.md Lesson 29 is the case where that shortcut went
+       wrong (a flat colour that stayed visible where the reference had
+       none) — this is the opposite risk (a token that already flips per
+       theme, applied to the closest measured match). */
+    & .crisp-savedviews-trigger {
+      box-sizing: border-box; display: inline-flex; align-items: center; gap: var(--crisp-space-1-5);
+      height: var(--crisp-size-row); margin: 0; padding: var(--crisp-space-1) var(--crisp-space-1-5);
+      border: none; border-radius: var(--crisp-radius-md); background: var(--crisp-bg-raised);
+      font-family: inherit; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary);
+      cursor: pointer; white-space: nowrap; transition: background-color .12s ease;
+    }
+    & .crisp-savedviews-trigger:hover,
+    & .crisp-savedviews-trigger[data-open] { background: color-mix(in srgb, var(--crisp-fg-primary) 4%, var(--crisp-bg-raised)); }
+    & .crisp-savedviews-trigger-icon { flex-shrink: 0; display: inline-flex; width: var(--crisp-size-icon); height: var(--crisp-size-icon); }
+    & .crisp-savedviews-trigger-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+    & .crisp-savedviews-trigger-chevron { flex-shrink: 0; color: var(--crisp-fg-muted); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crisp-savedviews, .crisp-savedviews * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+}