@gryt/ui 0.16.0 → 0.17.1

package/dist/index.js

@@ -1,7 +1,7 @@
 import { jsx as o, jsxs as d } from "react/jsx-runtime";
 import { Tooltip as I } from "@base-ui/react/tooltip";
 import { createGrytTheme as bt } from "@gryt/theme";
-import { GRYT_HUE_KEYS as ca, GRYT_NEUTRAL_KEYS as la, GRYT_RADIUS_KEYS as da, GRYT_THEME_NAME_MAX as ga, alphaScale as ua, cloneGrytTheme as ya, contrast as pa, createGrytTheme as ma, decodeGrytTheme as ba, encodeGrytTheme as fa, grytAlphaScales as xa, grytAlphaScalesLight as ha, grytLightTokens as wa, grytPresets as va, grytPresetsById as Na, grytScales as Pa, grytScalesLight as Ta, grytTheme as ka, grytThemeHues as Ca, grytThemeToOptions as Sa, grytTokens as $a, hexToOklch as Ra, hexToRgb as Ia, hueScale as Aa, hueScaleLight as Da, isHexColor as Ma, neutralScale as Ga, neutralScaleLight as La, normalizeHexColor as ja, normalizeThemeName as Ba, oklchToHex as za, rgbToHex as Fa } from "@gryt/theme";
+import { GRYT_HUE_KEYS as ca, GRYT_NEUTRAL_KEYS as la, GRYT_RADIUS_KEYS as da, GRYT_THEME_NAME_MAX as ga, alphaScale as ua, cloneGrytTheme as ya, contrast as ma, createGrytTheme as pa, decodeGrytTheme as ba, encodeGrytTheme as fa, grytAlphaScales as xa, grytAlphaScalesLight as ha, grytLightTokens as wa, grytPresets as va, grytPresetsById as Na, grytScales as Pa, grytScalesLight as Ta, grytTheme as ka, grytThemeHues as Ca, grytThemeToOptions as Sa, grytTokens as $a, hexToOklch as Ra, hexToRgb as Ia, hueScale as Aa, hueScaleLight as Da, isHexColor as Ma, neutralScale as Ga, neutralScaleLight as La, normalizeHexColor as ja, normalizeThemeName as Ba, oklchToHex as za, rgbToHex as Fa } from "@gryt/theme";
 import { Button as nt } from "@base-ui/react/button";
 import { forwardRef as s, useRef as it, useCallback as U, useLayoutEffect as ft, useState as xt, useEffect as ht, useSyncExternalStore as wt, useContext as K, createContext as vt } from "react";
 import { clsx as Nt } from "clsx";
@@ -30,7 +30,7 @@ import { Toggle as Dt } from "@base-ui/react/toggle";
 import { ToggleGroup as Mt } from "@base-ui/react/toggle-group";
 import { Meter as z } from "@base-ui/react/meter";
 import { AlertDialog as S } from "@base-ui/react/alert-dialog";
-import { Autocomplete as m } from "@base-ui/react/autocomplete";
+import { Autocomplete as p } from "@base-ui/react/autocomplete";
 import { Combobox as g } from "@base-ui/react/combobox";
 import { CheckboxGroup as Gt } from "@base-ui/react/checkbox-group";
 import { Collapsible as W } from "@base-ui/react/collapsible";
@@ -58,10 +58,10 @@ function n(...a) {
   return Pt(Nt(a));
 }
 const zt = {
-  primary: "bg-gryt-accent text-gryt-on-accent hover:not-data-disabled:bg-gryt-accent-light",
-  secondary: "bg-gryt-secondary text-gryt-on-secondary hover:not-data-disabled:bg-gryt-secondary-light",
-  neutral: "bg-gryt-surface-raised text-gryt-text hover:not-data-disabled:bg-gryt-surface-hover",
-  danger: "bg-gryt-danger text-gryt-on-danger hover:not-data-disabled:bg-gryt-danger-light",
+  primary: "bg-gryt-accent text-gryt-on-accent hover:not-data-disabled:bg-gryt-accent-light data-disabled:bg-gryt-surface-raised data-disabled:text-gryt-muted",
+  secondary: "bg-gryt-secondary text-gryt-on-secondary hover:not-data-disabled:bg-gryt-secondary-light data-disabled:bg-gryt-surface-raised data-disabled:text-gryt-muted",
+  neutral: "bg-gryt-surface-raised text-gryt-text hover:not-data-disabled:bg-gryt-surface-hover data-disabled:text-gryt-muted",
+  danger: "bg-gryt-danger text-gryt-on-danger hover:not-data-disabled:bg-gryt-danger-light data-disabled:bg-gryt-surface-raised data-disabled:text-gryt-muted",
   ghost: "bg-transparent text-gryt-muted hover:not-data-disabled:bg-white/8 hover:not-data-disabled:text-gryt-text"
 }, Ft = {
   xsmall: "min-h-8 px-3 text-xs",
@@ -76,7 +76,7 @@ const zt = {
     size: i = "medium",
     startIcon: c,
     tone: l = "primary",
-    ...p
+    ...m
   }, u) {
     return /* @__PURE__ */ d(
       nt,
@@ -102,12 +102,17 @@ const zt = {
           "motion-safe:not-[[aria-haspopup]]:hover:not-data-disabled:scale-[1.03]",
           "motion-safe:not-[[aria-haspopup]]:active:not-data-disabled:scale-[0.96]",
           "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gryt-accent-light",
-          "data-disabled:cursor-not-allowed data-disabled:opacity-50",
+          // Lighter than it was, because the fill swap above is doing the work
+          // now. It is kept because `startIcon` and `endIcon` are the caller's
+          // elements with the caller's colours — nothing here can mute those,
+          // and an icon at full strength on a dead button is the same lie in
+          // miniature.
+          "data-disabled:cursor-not-allowed data-disabled:opacity-60",
           Ft[i],
           zt[l],
           e
         ),
-        ...p,
+        ...m,
         children: [
           c,
           t,
@@ -242,7 +247,7 @@ const zt = {
     helperText: i,
     label: c,
     minRows: l = 3,
-    multiline: p = !1,
+    multiline: m = !1,
     size: u = "medium",
     ...w
   }, y) {
@@ -250,11 +255,11 @@ const zt = {
       V.Control,
       {
         ref: y,
-        render: p ? /* @__PURE__ */ o("textarea", { rows: l }) : void 0,
+        render: m ? /* @__PURE__ */ o("textarea", { rows: l }) : void 0,
         className: n(
           "gryt-text-field-control",
           dt,
-          p && "resize-y leading-6",
+          m && "resize-y leading-6",
           e ? "border-gryt-danger" : "border-gryt-border",
           gt[u],
           t
@@ -286,7 +291,7 @@ const zt = {
       }
     );
   }
-), po = s(
+), mo = s(
   function({
     className: t,
     disabled: e = !1,
@@ -294,7 +299,7 @@ const zt = {
     minRows: i = 1,
     onSubmit: c,
     placeholder: l = "Message Gryt",
-    submitLabel: p = "Send",
+    submitLabel: m = "Send",
     ...u
   }, w) {
     const y = it(null), N = U(() => {
@@ -337,7 +342,7 @@ const zt = {
           disabled: e,
           size: "small",
           endIcon: /* @__PURE__ */ o(Tt, { size: 14, weight: "fill" }),
-          children: p
+          children: m
         }
       )
     ] });
@@ -346,7 +351,7 @@ const zt = {
   small: "h-8 w-8 text-xs",
   medium: "h-10 w-10 text-sm",
   large: "h-12 w-12 text-base"
-}, Kt = s(function({ alt: t, children: e, className: r, fallback: i, size: c = "medium", src: l, ...p }, u) {
+}, Kt = s(function({ alt: t, children: e, className: r, fallback: i, size: c = "medium", src: l, ...m }, u) {
   return /* @__PURE__ */ d(
     H.Root,
     {
@@ -357,7 +362,7 @@ const zt = {
         Ut[c],
         r
       ),
-      ...p,
+      ...m,
       children: [
         l ? /* @__PURE__ */ o(
           H.Image,
@@ -371,11 +376,11 @@ const zt = {
       ]
     }
   );
-}), mo = s(function({ active: t = !1, avatar: e, className: r, subtitle: i, title: c, ...l }, p) {
+}), po = s(function({ active: t = !1, avatar: e, className: r, subtitle: i, title: c, ...l }, m) {
   return /* @__PURE__ */ d(
     "button",
     {
-      ref: p,
+      ref: m,
       type: "button",
       className: n(
         "gryt-conversation-item enabled:cursor-pointer disabled:cursor-not-allowed disabled:opacity-50",
@@ -410,12 +415,12 @@ const zt = {
       ]
     }
   );
-}), bo = s(function({ badgeContent: t, children: e, className: r, max: i = 99, showZero: c = !1, ...l }, p) {
+}), bo = s(function({ badgeContent: t, children: e, className: r, max: i = 99, showZero: c = !1, ...l }, m) {
   const u = typeof t == "number" ? t : null, w = u !== null && u === 0 && !c, y = u !== null && u > i ? `${i}+` : t;
   return /* @__PURE__ */ d(
     "span",
     {
-      ref: p,
+      ref: m,
       className: n("gryt-badge relative inline-flex", r),
       ...l,
       children: [
@@ -442,7 +447,7 @@ const zt = {
   success: "border-gryt-success-6 bg-gryt-success-3 text-gryt-success-11",
   warning: "border-gryt-warning-6 bg-gryt-warning-3 text-gryt-warning-11",
   danger: "border-gryt-danger-6 bg-gryt-danger-3 text-gryt-danger-11"
-}, fo = s(function({ children: t, className: e, icon: r, label: i, onDelete: c, tone: l = "neutral", ...p }, u) {
+}, fo = s(function({ children: t, className: e, icon: r, label: i, onDelete: c, tone: l = "neutral", ...m }, u) {
   return /* @__PURE__ */ d(
     "span",
     {
@@ -452,7 +457,7 @@ const zt = {
         Wt[l],
         e
       ),
-      ...p,
+      ...m,
       children: [
         r,
         i ?? t,
@@ -613,7 +618,7 @@ function No({
       window.removeEventListener("pointerup", y), window.removeEventListener("pointercancel", y);
     };
   }, [i]);
-  function p(y) {
+  function m(y) {
     l.current = { x: y.clientX, y: y.clientY };
   }
   function u(y) {
@@ -627,7 +632,7 @@ function No({
     B.Control,
     {
       className: "flex w-full cursor-pointer touch-none items-center py-2 select-none",
-      onPointerDown: p,
+      onPointerDown: m,
       onPointerMove: u,
       children: /* @__PURE__ */ d(B.Track, { className: "h-1.5 w-full rounded-(--gryt-radius-full) bg-gryt-surface-raised select-none", children: [
         /* @__PURE__ */ o(
@@ -1168,7 +1173,7 @@ const ge = s(
     }
   );
 });
-function pe({ className: a }) {
+function me({ className: a }) {
   const t = K(_);
   return t !== "bottom" && t !== "top" ? null : /* @__PURE__ */ o(
     "div",
@@ -1190,11 +1195,11 @@ const jo = {
   Viewport: ge,
   Popup: ue,
   Content: v.Content,
-  Grabber: pe,
+  Grabber: me,
   Close: v.Close,
   Title: v.Title,
   Description: v.Description
-}, me = s(
+}, pe = s(
   function({ className: t, sideOffset: e = 8, ...r }, i) {
     return /* @__PURE__ */ o(
       A.Positioner,
@@ -1250,7 +1255,7 @@ const jo = {
   Root: A.Root,
   Trigger: A.Trigger,
   Portal: A.Portal,
-  Positioner: me,
+  Positioner: pe,
   Popup: be,
   Item: fe,
   Separator: xe
@@ -1852,7 +1857,7 @@ const Xe = s(
   Title: Ke,
   Description: We,
   Close: S.Close
-}, pt = [
+}, mt = [
   "flex cursor-default items-center gap-2 rounded-(--gryt-radius-md)",
   "px-3 py-2 text-sm text-gryt-text outline-none select-none",
   // Base UI drives keyboard and pointer highlight through one attribute, so
@@ -1860,7 +1865,7 @@ const Xe = s(
   "data-highlighted:bg-gryt-surface-raised",
   "data-selected:text-gryt-accent-11",
   "data-disabled:cursor-not-allowed data-disabled:opacity-50"
-].join(" "), mt = [
+].join(" "), pt = [
   dt,
   gt.medium,
   "border-gryt-border",
@@ -1870,7 +1875,7 @@ const Xe = s(
     g.Input,
     {
       ref: r,
-      className: n("gryt-combobox-input", mt, t),
+      className: n("gryt-combobox-input", pt, t),
       ...e
     }
   );
@@ -1905,7 +1910,7 @@ const Xe = s(
     g.Item,
     {
       ref: r,
-      className: n("gryt-combobox-item", pt, t),
+      className: n("gryt-combobox-item", mt, t),
       ...e
     }
   );
@@ -1944,16 +1949,16 @@ const Xe = s(
   Separator: g.Separator
 }, er = s(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
-    m.Input,
+    p.Input,
     {
       ref: r,
-      className: n("gryt-autocomplete-input", mt, t),
+      className: n("gryt-autocomplete-input", pt, t),
       ...e
     }
   );
 }), rr = s(function({ className: t, sideOffset: e = 6, ...r }, i) {
   return /* @__PURE__ */ o(
-    m.Positioner,
+    p.Positioner,
     {
       ref: i,
       sideOffset: e,
@@ -1963,7 +1968,7 @@ const Xe = s(
   );
 }), or = s(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
-    m.Popup,
+    p.Popup,
     {
       ref: r,
       className: n(
@@ -1977,16 +1982,16 @@ const Xe = s(
   );
 }), ar = s(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
-    m.Item,
+    p.Item,
     {
       ref: r,
-      className: n("gryt-autocomplete-item", pt, t),
+      className: n("gryt-autocomplete-item", mt, t),
       ...e
     }
   );
 }), nr = s(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
-    m.Empty,
+    p.Empty,
     {
       ref: r,
       className: n(
@@ -1997,22 +2002,22 @@ const Xe = s(
     }
   );
 }), Wo = {
-  Root: m.Root,
+  Root: p.Root,
   Input: er,
-  InputGroup: m.InputGroup,
-  Trigger: m.Trigger,
-  Icon: m.Icon,
-  Clear: m.Clear,
-  Value: m.Value,
-  Portal: m.Portal,
+  InputGroup: p.InputGroup,
+  Trigger: p.Trigger,
+  Icon: p.Icon,
+  Clear: p.Clear,
+  Value: p.Value,
+  Portal: p.Portal,
   Positioner: rr,
   Popup: or,
-  List: m.List,
+  List: p.List,
   Item: ar,
-  Group: m.Group,
-  GroupLabel: m.GroupLabel,
+  Group: p.Group,
+  GroupLabel: p.GroupLabel,
   Empty: nr,
-  Separator: m.Separator
+  Separator: p.Separator
 }, Qo = s(
   function({ className: t, ...e }, r) {
     return /* @__PURE__ */ o(
@@ -2166,7 +2171,7 @@ const Xe = s(
       ...e
     }
   );
-}), pr = s(function({ className: t, ...e }, r) {
+}), mr = s(function({ className: t, ...e }, r) {
   return /* @__PURE__ */ o(
     h.Link,
     {
@@ -2191,7 +2196,7 @@ const Xe = s(
   Positioner: ur,
   Viewport: yr,
   Popup: gr,
-  Link: pr,
+  Link: mr,
   Icon: h.Icon,
   Arrow: h.Arrow
 }, at = "flex h-9 w-9 shrink-0 items-center justify-center border-0 bg-transparent text-gryt-muted transition-colors hover:not-data-disabled:bg-white/8 hover:not-data-disabled:text-gryt-text motion-reduce:transition-none disabled:cursor-not-allowed disabled:opacity-50", ra = s(
@@ -2276,7 +2281,7 @@ const Xe = s(
       }
     );
   }
-), mr = s(
+), pr = s(
   function({ className: t, sideOffset: e = 8, ...r }, i) {
     return /* @__PURE__ */ o(
       M.Positioner,
@@ -2308,7 +2313,7 @@ const Xe = s(
   Root: M.Root,
   Trigger: M.Trigger,
   Portal: M.Portal,
-  Positioner: mr,
+  Positioner: pr,
   Popup: br,
   Arrow: M.Arrow
 }, fr = s(function({ className: t, ...e }, r) {
@@ -2358,9 +2363,9 @@ export {
   fo as Chip,
   Jo as Collapsible,
   Ko as Combobox,
-  po as Composer,
+  mo as Composer,
   Fo as ContextMenu,
-  mo as ConversationItem,
+  po as ConversationItem,
   Lo as Dialog,
   Co as Divider,
   jo as Drawer,
@@ -2403,8 +2408,8 @@ export {
   ua as alphaScale,
   ya as cloneGrytTheme,
   n as cn,
-  pa as contrast,
-  ma as createGrytTheme,
+  ma as contrast,
+  pa as createGrytTheme,
   ba as decodeGrytTheme,
   fa as encodeGrytTheme,
   xa as grytAlphaScales,