@caspeco/casper-ui-library 5.1.0 → 5.1.1

package/dist/components/combobox/combobox-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"combobox-button.d.ts","sourceRoot":"","sources":["../../../lib/components/combobox/combobox-button.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAsBlD,wBAAgB,cAAc,CAAC,EAC9B,EAAE,EACF,WAAW,EACX,UAAU,EACV,aAAa,EACb,YAAY,EACZ,UAAU,EACV,cAAc,EACd,SAAS,EACT,aAAa,EACb,IAAI,EACJ,OAAO,EACP,KAAK,EACL,eAAe,EACf,UAAU,EACV,UAAU,EACV,SAAS,EACT,SAAS,EACT,gBAAgB,EAChB,mBAAmB,EACnB,aAAa,EACb,QAAQ,EACR,cAAc,GACd,EAAE,kBAAkB,2CAwKpB"}
+{"version":3,"file":"combobox-button.d.ts","sourceRoot":"","sources":["../../../lib/components/combobox/combobox-button.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAsBlD,wBAAgB,cAAc,CAAC,EAC9B,EAAE,EACF,WAAW,EACX,UAAU,EACV,aAAa,EACb,YAAY,EACZ,UAAU,EACV,cAAc,EACd,SAAS,EACT,aAAa,EACb,IAAI,EACJ,OAAO,EACP,KAAK,EACL,eAAe,EACf,UAAU,EACV,UAAU,EACV,SAAS,EACT,SAAS,EACT,gBAAgB,EAChB,mBAAmB,EACnB,aAAa,EACb,QAAQ,EACR,cAAc,GACd,EAAE,kBAAkB,2CAiLpB"}

package/dist/components/combobox/combobox-button.js

@@ -1,16 +1,16 @@
 import { jsxs as p, jsx as i } from "react/jsx-runtime";
-import { useStyleConfig as E, Flex as u, Box as d, Input as F } from "@chakra-ui/react";
-import { Fragment as L } from "react";
-import { ComboboxItem as O } from "./combobox-item.js";
-import { Tag as N } from "../tag/tag.js";
-import { Icon as X } from "../icon/icon.js";
-import { Icons as K } from "../icon/types.js";
-import { ThemeColorVariable as n, ThemeSpaceVariable as c, ThemeRadiusVariable as T, ThemeIconSizeVariable as U } from "../../theme/theme-types.js";
-function y() {
+import { useStyleConfig as F, Flex as u, Box as d, Input as L } from "@chakra-ui/react";
+import { Fragment as N } from "react";
+import { ComboboxItem as y } from "./combobox-item.js";
+import { Tag as X } from "../tag/tag.js";
+import { Icon as $ } from "../icon/icon.js";
+import { Icons as v } from "../icon/types.js";
+import { ThemeColorVariable as r, ThemeSpaceVariable as c, ThemeRadiusVariable as K, ThemeIconSizeVariable as T } from "../../theme/theme-types.js";
+function s() {
   return /* @__PURE__ */ i(
     d,
     {
-      backgroundColor: n.NeutralContainer,
+      backgroundColor: r.NeutralContainer,
       width: "8px",
       borderRadius: "4px",
       marginRight: "-8px",
@@ -21,45 +21,45 @@ function y() {
         height: "100%",
         width: "8px",
         display: "block",
-        backgroundColor: n.Surface
+        backgroundColor: r.Surface
       }
     }
   );
 }
 function H({
-  id: s,
+  id: _,
   asPlainText: l,
   inputValue: b,
-  selectedItems: r,
-  displayItems: _,
-  toggleItem: x,
-  highlightState: f,
+  selectedItems: n,
+  displayItems: E,
+  toggleItem: C,
+  highlightState: e,
   openState: a,
   parentStrings: j,
   size: B,
   variant: R,
-  label: C,
+  label: S,
   placeHolderText: V,
   isDisabled: h,
   isReadOnly: m,
-  isInvalid: W,
-  collapsed: S,
-  hasPendingDelete: w,
-  setHasPendingDelete: g,
-  setInputValue: k,
-  onSearch: t,
-  isSingleSelect: v
+  isInvalid: w,
+  collapsed: k,
+  hasPendingDelete: g,
+  setHasPendingDelete: x,
+  setInputValue: t,
+  onSearch: O,
+  isSingleSelect: W
 }) {
-  const z = E("Combobox", { size: B, variant: R }), A = (o) => {
-    if (o.key === "Enter" && (o.preventDefault(), o.stopPropagation(), a.isOpen ? x(_[f.index]) : a.open()), o.key === "Escape") {
+  const z = F("Combobox", { size: B, variant: R }), A = (o) => {
+    if (o.key === "Enter" && (o.preventDefault(), o.stopPropagation(), a.isOpen ? C(E[e.index]) : a.open()), o.key === "Escape") {
       if (!a.isOpen) return;
-      o.preventDefault(), o.stopPropagation(), a.close(), l || (k(""), t?.(""));
+      o.preventDefault(), o.stopPropagation(), a.close(), l || (t(""), O?.(""));
     }
-    o.key === "Backspace" ? b.length === 0 && r.length > 0 && !l && (w ? (x(r[r.length - 1]), g(!1)) : g(!0)) : g(!1), o.key === "ArrowDown" && (a.isOpen ? f.next() : a.open()), o.key === "ArrowUp" && (a.isOpen ? f.previous() : a.open());
+    o.key === "Backspace" ? b.length === 0 && n.length > 0 && !l && (g ? (C(n[n.length - 1]), x(!1)) : x(!0)) : x(!1), o.key === "ArrowDown" && (a.isOpen ? e.next() : a.open()), o.key === "ArrowUp" && (a.isOpen ? e.previous() : a.open());
   }, D = (o) => {
     o.preventDefault(), o.stopPropagation();
-    const e = o.target.value;
-    k(e), t?.(e), f.set(0), a.open();
+    const f = o.target.value;
+    t(f), O?.(f), e.set(0), a.open();
   };
   return /* @__PURE__ */ p(
     u,
@@ -67,27 +67,32 @@ function H({
       __css: z,
       "aria-disabled": h,
       "aria-readonly": m,
-      borderRadius: T.Small,
+      "aria-invalid": w,
+      borderRadius: K.Small,
       padding: c.Small,
-      _focusWithin: {
-        borderColor: n.Info,
-        boxShadow: `0 0 0 4px ${n.InfoContainer}`,
-        backgroundColor: n.Surface
+      _focusWithin: w ? {
+        borderColor: r.Error,
+        boxShadow: `0 0 0 4px ${r.ErrorContainer}`,
+        backgroundColor: r.Surface
+      } : {
+        borderColor: r.Info,
+        boxShadow: `0 0 0 4px ${r.InfoContainer}`,
+        backgroundColor: r.Surface
       },
       _disabled: {
         borderColor: "transparent",
-        backgroundColor: n.SurfaceDisabled
+        backgroundColor: r.SurfaceDisabled
       },
       children: [
         /* @__PURE__ */ p(
           u,
           {
-            flexWrap: S || v ? "nowrap" : "wrap",
+            flexWrap: k || W ? "nowrap" : "wrap",
             gap: c.Small,
             overflow: "hidden",
             children: [
-              C && /* @__PURE__ */ i(d, { whiteSpace: "nowrap", children: C }),
-              !l && (S ? r.length > 0 && /* @__PURE__ */ p(
+              S && /* @__PURE__ */ i(d, { whiteSpace: "nowrap", children: S }),
+              !l && (k ? n.length > 0 && /* @__PURE__ */ p(
                 u,
                 {
                   gap: c.XSmall,
@@ -96,48 +101,48 @@ function H({
                   whiteSpace: "nowrap",
                   textOverflow: "ellipsis",
                   children: [
-                    r.length > 3 && /* @__PURE__ */ i(y, {}),
-                    r.length > 2 && /* @__PURE__ */ i(y, {}),
-                    r.length > 1 && /* @__PURE__ */ i(N, { children: r.length - 1 }),
+                    n.length > 3 && /* @__PURE__ */ i(s, {}),
+                    n.length > 2 && /* @__PURE__ */ i(s, {}),
+                    n.length > 1 && /* @__PURE__ */ i(X, { children: n.length - 1 }),
                     /* @__PURE__ */ i(
-                      O,
+                      y,
                       {
-                        isDeleting: w,
-                        item: r[r.length - 1],
+                        isDeleting: g,
+                        item: n[n.length - 1],
                         asPlainText: l
                       }
                     )
                   ]
                 }
-              ) : r.map((o, e) => /* @__PURE__ */ i(
-                O,
+              ) : n.map((o, f) => /* @__PURE__ */ i(
+                y,
                 {
                   item: o,
                   asPlainText: l,
-                  isDeleting: e === r.length - 1 && w
+                  isDeleting: f === n.length - 1 && g
                 },
                 o.id
               ))),
-              l && r.length > 0 && b === r[0].label && j[r[0].id]?.map((o) => /* @__PURE__ */ p(L, { children: [
+              l && n.length > 0 && b === n[0].label && j[n[0].id]?.map((o) => /* @__PURE__ */ p(N, { children: [
                 /* @__PURE__ */ i(
                   d,
                   {
-                    color: n.OnSurfaceSubdued,
+                    color: r.OnSurfaceSubdued,
                     textOverflow: "ellipsis",
                     overflow: "hidden",
                     whiteSpace: "nowrap",
                     children: o
                   }
                 ),
-                /* @__PURE__ */ i(d, { color: n.OnSurfaceSubdued, children: "/" })
+                /* @__PURE__ */ i(d, { color: r.OnSurfaceSubdued, children: "/" })
               ] }, o)),
               /* @__PURE__ */ i(
-                F,
+                L,
                 {
-                  id: s,
+                  id: _,
                   isDisabled: h,
                   isReadOnly: m,
-                  isInvalid: W,
+                  isInvalid: w,
                   onKeyDown: A,
                   variant: "unstyled",
                   value: b,
@@ -147,14 +152,14 @@ function H({
                   placeholder: V,
                   border: "none",
                   flex: 1,
-                  color: n.OnSurface,
+                  color: r.OnSurface,
                   outline: "none",
                   _placeholder: {
-                    color: n.OnSurfaceSubdued
+                    color: r.OnSurfaceSubdued
                   },
                   _disabled: {
                     cursor: "not-allowed",
-                    color: n.OnSurfaceSubdued
+                    color: r.OnSurfaceSubdued
                   }
                 }
               )
@@ -162,11 +167,11 @@ function H({
           }
         ),
         /* @__PURE__ */ i(u, { className: "combobox-dropdown-icon", justifyContent: "center", alignItems: "center", children: /* @__PURE__ */ i(
-          X,
+          $,
           {
-            icon: K.TreeViewCollapse,
-            size: U.Small,
-            color: h || m ? n.OnSurfaceSubdued : n.OnSurface
+            icon: v.TreeViewCollapse,
+            size: T.Small,
+            color: h || m ? r.OnSurfaceSubdued : r.OnSurface
           }
         ) })
       ]

package/dist/theme/theme-config/components/combobox-theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"combobox-theme.d.ts","sourceRoot":"","sources":["../../../../lib/theme/theme-config/components/combobox-theme.ts"],"names":[],"mappings":"AACA,OAAO,EAAuB,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAoE5E,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAIzB,CAAC"}
+{"version":3,"file":"combobox-theme.d.ts","sourceRoot":"","sources":["../../../../lib/theme/theme-config/components/combobox-theme.ts"],"names":[],"mappings":"AACA,OAAO,EAAuB,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAgF5E,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAIzB,CAAC"}

package/dist/theme/theme-config/components/combobox-theme.js

@@ -12,6 +12,18 @@ const a = {
   '&[aria-readonly="true"]': {
     borderColor: "transparent",
     backgroundColor: o.SurfaceDisabled
+  },
+  '&[aria-invalid="true"]': {
+    borderColor: o.Error,
+    _focusWithin: {
+      borderColor: o.Error,
+      boxShadow: `0 0 0 4px ${o.ErrorContainer}`
+    },
+    "@media(hover: hover)": {
+      "&:hover:not(:focus-within)": {
+        borderColor: o.ErrorHover
+      }
+    }
   }
 }, n = {
   outline: {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@caspeco/casper-ui-library",
-	"version": "5.1.0",
+	"version": "5.1.1",
 	"prettier": "@caspeco/prettier-config",
 	"type": "module",
 	"sideEffects": false,