sherick-ui 2.7.0 → 2.8.0

package/dist/styles.css

@@ -6,6 +6,7 @@
   --sui-canvas: 0.970 0.003 290;
   --sui-surface: 0.998 0.001 290;
   --sui-surface-high: 0.934 0.006 290;
+  --sui-tray-deep: 0.900 0.008 290;
   --sui-surface-float: 0.999 0.001 290;
   --sui-puck: 1 0 0;
   --sui-media: 0.200 0.008 285;
@@ -75,6 +76,7 @@
   --sui-canvas: 0.160 0.006 285;
   --sui-surface: 0.200 0.008 285;
   --sui-surface-high: 0.252 0.010 285;
+  --sui-tray-deep: 0.290 0.011 285;
   --sui-surface-float: 0.226 0.009 285;
   --sui-puck: 0.315 0.012 285;
   --sui-media: 0.160 0.006 285;
@@ -145,6 +147,7 @@
   --sui-canvas: 0.160 0.006 285;
   --sui-surface: 0.200 0.008 285;
   --sui-surface-high: 0.252 0.010 285;
+  --sui-tray-deep: 0.290 0.011 285;
   --sui-surface-float: 0.226 0.009 285;
   --sui-puck: 0.315 0.012 285;
   --sui-media: 0.160 0.006 285;
@@ -1117,18 +1120,6 @@
 :where(.sui-scope).border-transparent {
     border-color: transparent
 }
-:where(.sui-scope).border-b-sherick-danger {
-    --tw-border-opacity: 1;
-    border-bottom-color: oklch(var(--sui-danger) / var(--tw-border-opacity, 1))
-}
-:where(.sui-scope).border-b-sherick-ink-muted {
-    --tw-border-opacity: 1;
-    border-bottom-color: oklch(var(--sui-ink-muted) / var(--tw-border-opacity, 1))
-}
-:where(.sui-scope).border-b-sherick-rim {
-    --tw-border-opacity: 1;
-    border-bottom-color: oklch(var(--sui-rim) / var(--tw-border-opacity, 1))
-}
 :where(.sui-scope).border-e-transparent {
     border-inline-end-color: transparent
 }
@@ -1157,9 +1148,6 @@
     --tw-bg-opacity: 1;
     background-color: oklch(var(--sui-danger-soft) / var(--tw-bg-opacity, 1))
 }
-:where(.sui-scope).bg-sherick-danger-soft\/\[0\.55\] {
-    background-color: oklch(var(--sui-danger-soft) / 0.55)
-}
 :where(.sui-scope).bg-sherick-detail {
     --tw-bg-opacity: 1;
     background-color: oklch(var(--sui-detail) / var(--tw-bg-opacity, 1))
@@ -1219,9 +1207,6 @@
 :where(.sui-scope).bg-sherick-surface-high\/\[0\.56\] {
     background-color: oklch(var(--sui-surface-high) / 0.56)
 }
-:where(.sui-scope).bg-sherick-surface-high\/\[0\.6\] {
-    background-color: oklch(var(--sui-surface-high) / 0.6)
-}
 :where(.sui-scope).bg-sherick-surface-high\/\[0\.72\] {
     background-color: oklch(var(--sui-surface-high) / 0.72)
 }
@@ -1237,6 +1222,10 @@
 :where(.sui-scope).bg-sherick-surface\/\[0\.78\] {
     background-color: oklch(var(--sui-surface) / 0.78)
 }
+:where(.sui-scope).bg-sherick-tray-deep {
+    --tw-bg-opacity: 1;
+    background-color: oklch(var(--sui-tray-deep) / var(--tw-bg-opacity, 1))
+}
 :where(.sui-scope).bg-sherick-warning {
     --tw-bg-opacity: 1;
     background-color: oklch(var(--sui-warning) / var(--tw-bg-opacity, 1))
@@ -2017,6 +2006,10 @@
     --tw-border-opacity: 1;
     border-color: oklch(var(--sui-rim) / var(--tw-border-opacity, 1))
 }
+:where(.sui-scope).after\:border-transparent::after {
+    content: var(--tw-content);
+    border-color: transparent
+}
 :where(.sui-scope).after\:bg-sherick-rim::after {
     content: var(--tw-content);
     --tw-bg-opacity: 1;
@@ -2064,18 +2057,16 @@
 :where(.sui-scope).last\:border-b-0:last-child {
     border-bottom-width: 0px
 }
-:where(.sui-scope).hover\:border-b-sherick-ink-muted:hover {
-    --tw-border-opacity: 1;
-    border-bottom-color: oklch(var(--sui-ink-muted) / var(--tw-border-opacity, 1))
-}
-:where(.sui-scope).hover\:bg-sherick-danger-soft\/\[0\.55\]:hover {
-    background-color: oklch(var(--sui-danger-soft) / 0.55)
+:where(.sui-scope).hover\:bg-sherick-danger-soft:hover {
+    --tw-bg-opacity: 1;
+    background-color: oklch(var(--sui-danger-soft) / var(--tw-bg-opacity, 1))
 }
 :where(.sui-scope).hover\:bg-sherick-ink\/\[0\.05\]:hover {
     background-color: oklch(var(--sui-ink) / 0.05)
 }
-:where(.sui-scope).hover\:bg-sherick-surface-high\/\[0\.82\]:hover {
-    background-color: oklch(var(--sui-surface-high) / 0.82)
+:where(.sui-scope).hover\:bg-sherick-tray-deep:hover {
+    --tw-bg-opacity: 1;
+    background-color: oklch(var(--sui-tray-deep) / var(--tw-bg-opacity, 1))
 }
 :where(.sui-scope).hover\:text-sherick-ink:hover {
     --tw-text-opacity: 1;
@@ -2089,16 +2080,13 @@
     --tw-bg-opacity: 1;
     background-color: oklch(var(--sui-ink-muted) / var(--tw-bg-opacity, 1))
 }
-:where(.sui-scope).focus\:border-b-sherick-ink-muted:focus {
-    --tw-border-opacity: 1;
-    border-bottom-color: oklch(var(--sui-ink-muted) / var(--tw-border-opacity, 1))
-}
-:where(.sui-scope).focus\:bg-sherick-danger-soft\/\[0\.55\]:focus {
-    background-color: oklch(var(--sui-danger-soft) / 0.55)
+:where(.sui-scope).focus\:bg-sherick-danger-soft:focus {
+    --tw-bg-opacity: 1;
+    background-color: oklch(var(--sui-danger-soft) / var(--tw-bg-opacity, 1))
 }
-:where(.sui-scope).focus\:bg-sherick-surface-high:focus {
+:where(.sui-scope).focus\:bg-sherick-tray-deep:focus {
     --tw-bg-opacity: 1;
-    background-color: oklch(var(--sui-surface-high) / var(--tw-bg-opacity, 1))
+    background-color: oklch(var(--sui-tray-deep) / var(--tw-bg-opacity, 1))
 }
 :where(.sui-scope).focus\:outline-none:focus {
     outline: 2px solid transparent;
@@ -2267,6 +2255,11 @@
 :where(.sui-scope).has-\[\:focus-visible\]\:outline-sherick-focus:has(:focus-visible) {
     outline-color: oklch(var(--sui-focus) / 1)
 }
+:where(.sui-scope).has-\[\[data-checked\]\]\:after\:border-sherick-primary:has([data-checked])::after {
+    content: var(--tw-content);
+    --tw-border-opacity: 1;
+    border-color: oklch(var(--sui-primary) / var(--tw-border-opacity, 1))
+}
 :where(.sui-scope).group:has([data-checked]) :where(.sui-scope).group-has-\[\[data-checked\]\]\:text-sherick-ink {
     --tw-text-opacity: 1;
     color: oklch(var(--sui-ink) / var(--tw-text-opacity, 1))
@@ -2304,16 +2297,13 @@
 :where(.sui-scope).data-\[orientation\=vertical\]\:items-stretch[data-orientation="vertical"] {
     align-items: stretch
 }
-:where(.sui-scope).data-\[invalid\]\:border-b-sherick-danger[data-invalid] {
-    --tw-border-opacity: 1;
-    border-bottom-color: oklch(var(--sui-danger) / var(--tw-border-opacity, 1))
-}
 :where(.sui-scope).data-\[dragging\]\:bg-sherick-primary-strong[data-dragging] {
     --tw-bg-opacity: 1;
     background-color: oklch(var(--sui-primary-strong) / var(--tw-bg-opacity, 1))
 }
-:where(.sui-scope).data-\[invalid\]\:bg-sherick-danger-soft\/\[0\.55\][data-invalid] {
-    background-color: oklch(var(--sui-danger-soft) / 0.55)
+:where(.sui-scope).data-\[invalid\]\:bg-sherick-danger-soft[data-invalid] {
+    --tw-bg-opacity: 1;
+    background-color: oklch(var(--sui-danger-soft) / var(--tw-bg-opacity, 1))
 }
 :where(.sui-scope).data-\[dragging\]\:text-sherick-on-primary[data-dragging] {
     --tw-text-opacity: 1;
@@ -2456,12 +2446,9 @@
     --tw-bg-opacity: 1;
     background-color: oklch(var(--sui-primary) / var(--tw-bg-opacity, 1))
 }
-:where(.sui-scope).data-\[invalid\]\:hover\:border-b-sherick-danger:hover[data-invalid] {
-    --tw-border-opacity: 1;
-    border-bottom-color: oklch(var(--sui-danger) / var(--tw-border-opacity, 1))
-}
-:where(.sui-scope).data-\[invalid\]\:hover\:bg-sherick-danger-soft\/\[0\.55\]:hover[data-invalid] {
-    background-color: oklch(var(--sui-danger-soft) / 0.55)
+:where(.sui-scope).data-\[invalid\]\:hover\:bg-sherick-danger-soft:hover[data-invalid] {
+    --tw-bg-opacity: 1;
+    background-color: oklch(var(--sui-danger-soft) / var(--tw-bg-opacity, 1))
 }
 :where(.sui-scope).group[data-checked] :where(.sui-scope).group-data-\[checked\]\:h-6 {
     height: 1.5rem
@@ -2668,20 +2655,13 @@
         outline-style: none
     }
 }
-:where(.sui-scope).\[\&\&\]\:focus-within\:border-b-sherick-ink-muted:focus-within.\[\&\&\]\:focus-within\:border-b-sherick-ink-muted:focus-within {
-    --tw-border-opacity: 1;
-    border-bottom-color: oklch(var(--sui-ink-muted) / var(--tw-border-opacity, 1))
-}
-:where(.sui-scope).\[\&\&\]\:focus-within\:bg-sherick-surface-high:focus-within.\[\&\&\]\:focus-within\:bg-sherick-surface-high:focus-within {
+:where(.sui-scope).\[\&\&\]\:focus-within\:bg-sherick-tray-deep:focus-within.\[\&\&\]\:focus-within\:bg-sherick-tray-deep:focus-within {
     --tw-bg-opacity: 1;
-    background-color: oklch(var(--sui-surface-high) / var(--tw-bg-opacity, 1))
-}
-:where(.sui-scope).\[\&\&\]\:data-\[invalid\]\:focus-within\:border-b-sherick-danger:focus-within[data-invalid].\[\&\&\]\:data-\[invalid\]\:focus-within\:border-b-sherick-danger:focus-within[data-invalid] {
-    --tw-border-opacity: 1;
-    border-bottom-color: oklch(var(--sui-danger) / var(--tw-border-opacity, 1))
+    background-color: oklch(var(--sui-tray-deep) / var(--tw-bg-opacity, 1))
 }
-:where(.sui-scope).\[\&\&\]\:data-\[invalid\]\:focus-within\:bg-sherick-danger-soft\/\[0\.55\]:focus-within[data-invalid].\[\&\&\]\:data-\[invalid\]\:focus-within\:bg-sherick-danger-soft\/\[0\.55\]:focus-within[data-invalid] {
-    background-color: oklch(var(--sui-danger-soft) / 0.55)
+:where(.sui-scope).\[\&\&\]\:data-\[invalid\]\:focus-within\:bg-sherick-danger-soft:focus-within[data-invalid].\[\&\&\]\:data-\[invalid\]\:focus-within\:bg-sherick-danger-soft:focus-within[data-invalid] {
+    --tw-bg-opacity: 1;
+    background-color: oklch(var(--sui-danger-soft) / var(--tw-bg-opacity, 1))
 }
 :where(.sui-scope).\[\&\:has\(\+div\:not\(\[data-open\]\)\:hover\)\]\:opacity-0:has(+div:not([data-open]):hover) {
     opacity: 0

package/dist/theme.css

@@ -6,6 +6,7 @@
   --sui-canvas: 0.970 0.003 290;
   --sui-surface: 0.998 0.001 290;
   --sui-surface-high: 0.934 0.006 290;
+  --sui-tray-deep: 0.900 0.008 290;
   --sui-surface-float: 0.999 0.001 290;
   --sui-puck: 1 0 0;
   --sui-media: 0.200 0.008 285;
@@ -75,6 +76,7 @@
   --sui-canvas: 0.160 0.006 285;
   --sui-surface: 0.200 0.008 285;
   --sui-surface-high: 0.252 0.010 285;
+  --sui-tray-deep: 0.290 0.011 285;
   --sui-surface-float: 0.226 0.009 285;
   --sui-puck: 0.315 0.012 285;
   --sui-media: 0.160 0.006 285;
@@ -145,6 +147,7 @@
   --sui-canvas: 0.160 0.006 285;
   --sui-surface: 0.200 0.008 285;
   --sui-surface-high: 0.252 0.010 285;
+  --sui-tray-deep: 0.290 0.011 285;
   --sui-surface-float: 0.226 0.009 285;
   --sui-puck: 0.315 0.012 285;
   --sui-media: 0.160 0.006 285;

package/dist/types/dev.d.cts

@@ -33,8 +33,7 @@ declare const edgeTone: {
     readonly rule: "border-sherick-edge/[0.075]";
 };
 declare const rim: {
-    readonly field: "border-[1.5px] border-transparent border-b-sherick-rim";
-    readonly fieldError: "border-[1.5px] border-transparent border-b-sherick-danger";
+    readonly field: "border-[1.5px] border-transparent";
     readonly dashed: string;
     readonly dashedHover: "hover:after:bg-sherick-ink-muted";
     readonly dashedDragging: "data-[dragging]:after:bg-sherick-primary";
@@ -56,17 +55,17 @@ declare const state: {
     readonly text: "cursor-text";
     readonly rowHover: "hover:bg-sherick-ink/[0.05]";
     readonly field: {
-        readonly hover: "hover:bg-sherick-surface-high/[0.82] hover:border-b-sherick-ink-muted";
-        readonly focus: "focus:bg-sherick-surface-high focus:border-b-sherick-ink-muted";
-        readonly focusWithin: "[&&]:focus-within:bg-sherick-surface-high [&&]:focus-within:border-b-sherick-ink-muted";
-        readonly engaged: "bg-sherick-surface-high border-b-sherick-ink-muted";
-        readonly errorHover: "hover:bg-sherick-danger-soft/[0.55]";
-        readonly errorFocus: "focus:bg-sherick-danger-soft/[0.55]";
-        readonly errorEngaged: "bg-sherick-danger-soft/[0.55]";
-        readonly invalid: "data-[invalid]:bg-sherick-danger-soft/[0.55] data-[invalid]:border-b-sherick-danger";
-        readonly invalidHover: "data-[invalid]:hover:bg-sherick-danger-soft/[0.55] data-[invalid]:hover:border-b-sherick-danger";
-        readonly invalidEngaged: "data-[invalid]:bg-sherick-danger-soft/[0.55] data-[invalid]:border-b-sherick-danger";
-        readonly invalidFocusWithin: "[&&]:data-[invalid]:focus-within:bg-sherick-danger-soft/[0.55] [&&]:data-[invalid]:focus-within:border-b-sherick-danger";
+        readonly hover: "hover:bg-sherick-tray-deep";
+        readonly focus: "focus:bg-sherick-tray-deep";
+        readonly focusWithin: "[&&]:focus-within:bg-sherick-tray-deep";
+        readonly engaged: "bg-sherick-tray-deep";
+        readonly errorHover: "hover:bg-sherick-danger-soft";
+        readonly errorFocus: "focus:bg-sherick-danger-soft";
+        readonly errorEngaged: "bg-sherick-danger-soft";
+        readonly invalid: "data-[invalid]:bg-sherick-danger-soft";
+        readonly invalidHover: "data-[invalid]:hover:bg-sherick-danger-soft";
+        readonly invalidEngaged: "data-[invalid]:bg-sherick-danger-soft";
+        readonly invalidFocusWithin: "[&&]:data-[invalid]:focus-within:bg-sherick-danger-soft";
     };
 };
 declare const stateLayerQuietComposite: string;
@@ -86,8 +85,8 @@ declare const material: {
     readonly matteQuiet: "bg-sherick-surface/[0.42] text-sherick-ink";
     readonly matte: "bg-sherick-surface/[0.78] text-sherick-ink";
     readonly matteHigh: "bg-sherick-surface-high/[0.72] text-sherick-ink";
-    readonly control: "bg-sherick-surface-high/[0.6] text-sherick-ink placeholder:text-sherick-ink-muted";
-    readonly controlError: "bg-sherick-danger-soft/[0.55] text-sherick-ink placeholder:text-sherick-danger";
+    readonly control: "bg-sherick-surface-high text-sherick-ink placeholder:text-sherick-ink-muted";
+    readonly controlError: "bg-sherick-danger-soft text-sherick-ink placeholder:text-sherick-danger";
     readonly handle: "bg-sherick-ink-muted text-sherick-canvas";
     readonly acrylic: "bg-sherick-surface-float/[var(--sui-glass-fill)] bg-[image:var(--sui-glass-gradient)] text-sherick-ink backdrop-blur-[var(--sui-glass-blur)] backdrop-saturate-[var(--sui-glass-saturation)] backdrop-brightness-[var(--sui-glass-brightness)]";
     readonly acrylicDense: "bg-sherick-surface-float/[var(--sui-glass-dense-fill)] bg-[image:var(--sui-glass-gradient-dense)] text-sherick-ink backdrop-blur-[var(--sui-glass-dense-blur)] backdrop-saturate-[var(--sui-glass-dense-saturation)] backdrop-brightness-[var(--sui-glass-dense-brightness)]";
@@ -199,7 +198,7 @@ declare const tone: {
 };
 declare const currentDestination = "bg-sherick-primary-soft text-sherick-ink font-medium";
 declare const puck = "bg-sherick-puck";
-declare const selectableRowSurface = "has-[[data-checked]]:bg-sherick-primary-soft has-[[data-checked]]:text-sherick-ink";
+declare const selectableRowSurface: string;
 declare const selectableRowSupporting = "group-has-[[data-checked]]:text-sherick-ink";
 declare const selectable: {
     readonly surface: string;

package/dist/types/dev.d.ts

@@ -33,8 +33,7 @@ declare const edgeTone: {
     readonly rule: "border-sherick-edge/[0.075]";
 };
 declare const rim: {
-    readonly field: "border-[1.5px] border-transparent border-b-sherick-rim";
-    readonly fieldError: "border-[1.5px] border-transparent border-b-sherick-danger";
+    readonly field: "border-[1.5px] border-transparent";
     readonly dashed: string;
     readonly dashedHover: "hover:after:bg-sherick-ink-muted";
     readonly dashedDragging: "data-[dragging]:after:bg-sherick-primary";
@@ -56,17 +55,17 @@ declare const state: {
     readonly text: "cursor-text";
     readonly rowHover: "hover:bg-sherick-ink/[0.05]";
     readonly field: {
-        readonly hover: "hover:bg-sherick-surface-high/[0.82] hover:border-b-sherick-ink-muted";
-        readonly focus: "focus:bg-sherick-surface-high focus:border-b-sherick-ink-muted";
-        readonly focusWithin: "[&&]:focus-within:bg-sherick-surface-high [&&]:focus-within:border-b-sherick-ink-muted";
-        readonly engaged: "bg-sherick-surface-high border-b-sherick-ink-muted";
-        readonly errorHover: "hover:bg-sherick-danger-soft/[0.55]";
-        readonly errorFocus: "focus:bg-sherick-danger-soft/[0.55]";
-        readonly errorEngaged: "bg-sherick-danger-soft/[0.55]";
-        readonly invalid: "data-[invalid]:bg-sherick-danger-soft/[0.55] data-[invalid]:border-b-sherick-danger";
-        readonly invalidHover: "data-[invalid]:hover:bg-sherick-danger-soft/[0.55] data-[invalid]:hover:border-b-sherick-danger";
-        readonly invalidEngaged: "data-[invalid]:bg-sherick-danger-soft/[0.55] data-[invalid]:border-b-sherick-danger";
-        readonly invalidFocusWithin: "[&&]:data-[invalid]:focus-within:bg-sherick-danger-soft/[0.55] [&&]:data-[invalid]:focus-within:border-b-sherick-danger";
+        readonly hover: "hover:bg-sherick-tray-deep";
+        readonly focus: "focus:bg-sherick-tray-deep";
+        readonly focusWithin: "[&&]:focus-within:bg-sherick-tray-deep";
+        readonly engaged: "bg-sherick-tray-deep";
+        readonly errorHover: "hover:bg-sherick-danger-soft";
+        readonly errorFocus: "focus:bg-sherick-danger-soft";
+        readonly errorEngaged: "bg-sherick-danger-soft";
+        readonly invalid: "data-[invalid]:bg-sherick-danger-soft";
+        readonly invalidHover: "data-[invalid]:hover:bg-sherick-danger-soft";
+        readonly invalidEngaged: "data-[invalid]:bg-sherick-danger-soft";
+        readonly invalidFocusWithin: "[&&]:data-[invalid]:focus-within:bg-sherick-danger-soft";
     };
 };
 declare const stateLayerQuietComposite: string;
@@ -86,8 +85,8 @@ declare const material: {
     readonly matteQuiet: "bg-sherick-surface/[0.42] text-sherick-ink";
     readonly matte: "bg-sherick-surface/[0.78] text-sherick-ink";
     readonly matteHigh: "bg-sherick-surface-high/[0.72] text-sherick-ink";
-    readonly control: "bg-sherick-surface-high/[0.6] text-sherick-ink placeholder:text-sherick-ink-muted";
-    readonly controlError: "bg-sherick-danger-soft/[0.55] text-sherick-ink placeholder:text-sherick-danger";
+    readonly control: "bg-sherick-surface-high text-sherick-ink placeholder:text-sherick-ink-muted";
+    readonly controlError: "bg-sherick-danger-soft text-sherick-ink placeholder:text-sherick-danger";
     readonly handle: "bg-sherick-ink-muted text-sherick-canvas";
     readonly acrylic: "bg-sherick-surface-float/[var(--sui-glass-fill)] bg-[image:var(--sui-glass-gradient)] text-sherick-ink backdrop-blur-[var(--sui-glass-blur)] backdrop-saturate-[var(--sui-glass-saturation)] backdrop-brightness-[var(--sui-glass-brightness)]";
     readonly acrylicDense: "bg-sherick-surface-float/[var(--sui-glass-dense-fill)] bg-[image:var(--sui-glass-gradient-dense)] text-sherick-ink backdrop-blur-[var(--sui-glass-dense-blur)] backdrop-saturate-[var(--sui-glass-dense-saturation)] backdrop-brightness-[var(--sui-glass-dense-brightness)]";
@@ -199,7 +198,7 @@ declare const tone: {
 };
 declare const currentDestination = "bg-sherick-primary-soft text-sherick-ink font-medium";
 declare const puck = "bg-sherick-puck";
-declare const selectableRowSurface = "has-[[data-checked]]:bg-sherick-primary-soft has-[[data-checked]]:text-sherick-ink";
+declare const selectableRowSurface: string;
 declare const selectableRowSupporting = "group-has-[[data-checked]]:text-sherick-ink";
 declare const selectable: {
     readonly surface: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sherick-ui",
-  "version": "2.7.0",
+  "version": "2.8.0",
   "description": "A React component library in graphite and iris, with light and dark themes.",
   "repository": {
     "type": "git",
@@ -85,10 +85,11 @@
   },
   "dependencies": {
     "@base-ui/react": "1.8.0",
+    "@hugeicons/core-free-icons": "^4.3.5",
+    "@hugeicons/react": "^1.1.10",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "katex": "^0.16.47",
-    "lucide-react": "^1.46.0",
     "prism-react-renderer": "^2.4.1",
     "prismjs": "^1.30.0",
     "react-markdown": "^10.1.0",