@caspeco/casper-ui-library 7.9.3 → 7.10.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,2CAsMpB"}
+{"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,2CAgMpB"}

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

@@ -1,12 +1,12 @@
 import { jsxs as f, jsx as i } from "react/jsx-runtime";
-import { useStyleConfig as N, Flex as c, Box as d, Input as X } from "@chakra-ui/react";
-import { Fragment as $ } from "react";
+import { useStyleConfig as X, Flex as c, Box as d, Input as $ } from "@chakra-ui/react";
+import { Fragment as D } from "react";
 import { ComboboxItem as E } from "./combobox-item.js";
 import { Tag as K } from "../tag/tag.js";
 import { Icon as U } from "../icon/icon.js";
 import { Icons as q } from "../icon/types.js";
 import { ThemeColorVariable as r, ThemeSpaceVariable as u, ThemeRadiusVariable as G, ThemeIconSizeVariable as J } from "../../theme/theme-types.js";
-function j() {
+function R() {
   return /* @__PURE__ */ i(
     d,
     {
@@ -27,50 +27,50 @@ function j() {
   );
 }
 function oo({
-  id: B,
+  id: j,
   asPlainText: e,
   inputValue: h,
   selectedItems: n,
-  displayItems: R,
-  toggleItem: C,
+  displayItems: B,
+  toggleItem: x,
   highlightState: l,
   openState: a,
   parentStrings: V,
   size: W,
   variant: v,
   label: S,
-  placeHolderText: s,
+  placeHolderText: C,
   isDisabled: b,
-  isReadOnly: m,
-  isInvalid: w,
+  isReadOnly: s,
+  isInvalid: m,
   collapsed: k,
-  hasPendingDelete: t,
-  setHasPendingDelete: g,
+  hasPendingDelete: w,
+  setHasPendingDelete: t,
   setInputValue: O,
   onSearch: y,
   isSingleSelect: z
 }) {
-  const A = N("Combobox", { size: W, variant: v }), D = (o) => {
-    if (o.key === "Enter" && (o.preventDefault(), o.stopPropagation(), a.isOpen ? C(R[l.index]) : a.open()), o.key === "Escape") {
+  const A = X("Combobox", { size: W, variant: v }), F = (o) => {
+    if (o.key === "Enter" && (o.preventDefault(), o.stopPropagation(), a.isOpen ? x(B[l.index]) : a.open()), o.key === "Escape") {
       if (!a.isOpen) return;
       o.preventDefault(), o.stopPropagation(), a.close(), e || (O(""), y?.(""));
     }
-    o.key === "Backspace" ? h.length === 0 && n.length > 0 && !e && (t ? (C(n[n.length - 1]), g(!1)) : g(!0)) : g(!1), o.key === "ArrowDown" && (a.isOpen ? l.next() : a.open()), o.key === "ArrowUp" && (a.isOpen ? l.previous() : a.open());
-  }, F = (o) => {
+    o.key === "Backspace" ? h.length === 0 && n.length > 0 && !e && (w ? (x(n[n.length - 1]), t(!1)) : t(!0)) : t(!1), o.key === "ArrowDown" && (a.isOpen ? l.next() : a.open()), o.key === "ArrowUp" && (a.isOpen ? l.previous() : a.open());
+  }, L = (o) => {
     o.preventDefault(), o.stopPropagation();
     const p = o.target.value;
     O(p), y?.(p), l.set(0), a.open();
-  }, x = n[0], _ = n[n.length - 1], L = a.isOpen || e || s;
+  }, g = n[0], _ = n[n.length - 1], N = a.isOpen || e || C;
   return /* @__PURE__ */ f(
     c,
     {
       __css: A,
       "aria-disabled": b,
-      "aria-readonly": m,
-      "aria-invalid": w,
+      "aria-readonly": s,
+      "aria-invalid": m,
       borderRadius: G.Small,
       padding: u.Small,
-      _focusWithin: w ? {
+      _focusWithin: m ? {
         borderColor: r.Error,
         boxShadow: `0 0 0 4px ${r.ErrorContainer}`,
         backgroundColor: r.Surface
@@ -79,10 +79,6 @@ function oo({
         boxShadow: `0 0 0 4px ${r.InfoContainer}`,
         backgroundColor: r.Surface
       },
-      _disabled: {
-        borderColor: "transparent",
-        backgroundColor: r.SurfaceDisabled
-      },
       children: [
         /* @__PURE__ */ f(
           c,
@@ -101,13 +97,13 @@ function oo({
                   whiteSpace: "nowrap",
                   textOverflow: "ellipsis",
                   children: [
-                    n.length > 3 && /* @__PURE__ */ i(j, {}),
-                    n.length > 2 && /* @__PURE__ */ i(j, {}),
+                    n.length > 3 && /* @__PURE__ */ i(R, {}),
+                    n.length > 2 && /* @__PURE__ */ i(R, {}),
                     n.length > 1 && /* @__PURE__ */ i(K, { children: n.length - 1 }),
                     /* @__PURE__ */ i(
                       E,
                       {
-                        isDeleting: t,
+                        isDeleting: w,
                         item: _,
                         asPlainText: e
                       }
@@ -119,11 +115,11 @@ function oo({
                 {
                   item: o,
                   asPlainText: e,
-                  isDeleting: p === n.length - 1 && t
+                  isDeleting: p === n.length - 1 && w
                 },
                 o.id
               ))),
-              e && n.length > 0 && x && h === x.label && V[x.id]?.map((o) => /* @__PURE__ */ f($, { children: [
+              e && n.length > 0 && g && h === g.label && V[g.id]?.map((o) => /* @__PURE__ */ f(D, { children: [
                 /* @__PURE__ */ i(
                   d,
                   {
@@ -137,19 +133,19 @@ function oo({
                 /* @__PURE__ */ i(d, { color: r.OnSurfaceSubdued, children: "/" })
               ] }, o)),
               /* @__PURE__ */ i(
-                X,
+                $,
                 {
-                  id: B,
+                  id: j,
                   isDisabled: b,
-                  isReadOnly: m,
-                  isInvalid: w,
-                  onKeyDown: D,
+                  isReadOnly: s,
+                  isInvalid: m,
+                  onKeyDown: F,
                   variant: "unstyled",
                   value: h,
                   autoComplete: "off",
                   minWidth: u.XLarge,
-                  onChange: F,
-                  placeholder: s,
+                  onChange: L,
+                  placeholder: C,
                   border: "none",
                   flex: 1,
                   color: r.OnSurface,
@@ -161,7 +157,7 @@ function oo({
                     cursor: "not-allowed",
                     color: r.OnSurfaceSubdued
                   },
-                  sx: L ? {} : {
+                  sx: N ? {} : {
                     position: "absolute",
                     width: "1px",
                     height: "1px",
@@ -182,7 +178,7 @@ function oo({
           {
             icon: q.TreeViewCollapse,
             size: J.Small,
-            color: b || m ? r.OnSurfaceSubdued : r.OnSurface
+            color: b ? r.OnSurfaceSubdued : r.OnSurface
           }
         ) })
       ]

package/dist/components/table/table-toolbar.d.ts

@@ -10,6 +10,10 @@ export type TableToolbarProps = {
      * Use this to filter your data. Optional.
      */
     onSearch?: (e: ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * DefaultValue for the search input, e.g. if you have a persisted filter state you want to hydrate after refresh or routing.
+     */
+    defaultValue?: string;
     /**
      * Use this to add a new item. Optional.
      */
@@ -19,7 +23,7 @@ export type TableToolbarProps = {
      */
     actionMenu?: React.ReactElement<ComponentProps<typeof MenuList>, typeof MenuList>;
 };
-declare const TableToolbarInner: ({ tableName, onSearch, onAddNewItem, actionMenu, ...props }: TableToolbarProps & ThemeStyleProps) => import("react/jsx-runtime").JSX.Element;
+declare const TableToolbarInner: ({ tableName, onSearch, defaultValue, onAddNewItem, actionMenu, ...props }: TableToolbarProps & ThemeStyleProps) => import("react/jsx-runtime").JSX.Element;
 export declare const TableToolbar: typeof TableToolbarInner;
 export {};
 //# sourceMappingURL=table-toolbar.d.ts.map

package/dist/components/table/table-toolbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table-toolbar.d.ts","sourceRoot":"","sources":["../../../lib/components/table/table-toolbar.tsx"],"names":[],"mappings":"AAIA,OAAO,EAA2D,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAGtG,OAAO,EAMN,KAAK,eAAe,EACpB,MAAM,SAAS,CAAC;AAEjB,OAAO,EAA8B,KAAK,WAAW,EAAE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAI1F,MAAM,MAAM,iBAAiB,GAAG;IAC/B;;OAEG;IACH,SAAS,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACtD;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B;;OAEG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,EAAE,OAAO,QAAQ,CAAC,CAAC;CAClF,CAAC;AAEF,QAAA,MAAM,iBAAiB,GAAI,6DAMxB,iBAAiB,GAAG,eAAe,4CA4KrC,CAAC;AAEF,eAAO,MAAM,YAAY,EAA8B,OAAO,iBAAiB,CAAC"}
+{"version":3,"file":"table-toolbar.d.ts","sourceRoot":"","sources":["../../../lib/components/table/table-toolbar.tsx"],"names":[],"mappings":"AAIA,OAAO,EAA2D,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAGtG,OAAO,EAMN,KAAK,eAAe,EACpB,MAAM,SAAS,CAAC;AAEjB,OAAO,EAA8B,KAAK,WAAW,EAAE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAI1F,MAAM,MAAM,iBAAiB,GAAG;IAC/B;;OAEG;IACH,SAAS,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACtD;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B;;OAEG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,EAAE,OAAO,QAAQ,CAAC,CAAC;CAClF,CAAC;AAEF,QAAA,MAAM,iBAAiB,GAAI,2EAOxB,iBAAiB,GAAG,eAAe,4CA6KrC,CAAC;AAEF,eAAO,MAAM,YAAY,EAA8B,OAAO,iBAAiB,CAAC"}

package/dist/components/table/table-toolbar.js

@@ -1,83 +1,85 @@
-import { jsx as e, jsxs as o, Fragment as v } from "react/jsx-runtime";
-import { useMediaQuery as A, Flex as a, Portal as H, Box as M } from "@chakra-ui/react";
-import { memo as O, useCallback as l, useMemo as x } from "react";
-import { useTableContext as D } from "./table-context.js";
-import { translations as G } from "./translations.js";
-import { Input as E } from "../input/input.js";
-import { Icon as y } from "../icon/icon.js";
+import { jsx as e, jsxs as o, Fragment as A } from "react/jsx-runtime";
+import { useMediaQuery as H, Flex as a, Portal as O, Box as x } from "@chakra-ui/react";
+import { memo as D, useCallback as l, useMemo as y } from "react";
+import { useTableContext as G } from "./table-context.js";
+import { translations as E } from "./translations.js";
+import { Input as P } from "../input/input.js";
+import { Icon as I } from "../icon/icon.js";
 import { Icons as c } from "../icon/types.js";
-import { Menu as I } from "../menu/menu.js";
-import { MenuButton as P } from "../menu/menu-button.js";
-import { MenuList as Q } from "../menu/menu-list.js";
-import { Text as w } from "../text/text.js";
-import { MenuItem as B } from "../menu/menu-item.js";
-import { Checkbox as W } from "../checkbox/checkbox.js";
-import { MenuDivider as X } from "../menu/menu-divider.js";
-import { Switch as Y } from "../switch/switch.js";
-import { IconButton as q } from "../icon-button/icon-button.js";
-import { MenuIconButton as J } from "../menu/menu-icon-button.js";
-import { ThemeIconSizeVariable as K, ThemeSpaceVariable as i, ThemeColorVariable as F, ThemeFontVariable as R, ThemeFontSizeVariable as U } from "../../theme/theme-types.js";
-const Z = ({
+import { Menu as w } from "../menu/menu.js";
+import { MenuButton as Q } from "../menu/menu-button.js";
+import { MenuList as W } from "../menu/menu-list.js";
+import { Text as B } from "../text/text.js";
+import { MenuItem as F } from "../menu/menu-item.js";
+import { Checkbox as X } from "../checkbox/checkbox.js";
+import { MenuDivider as Y } from "../menu/menu-divider.js";
+import { Switch as q } from "../switch/switch.js";
+import { IconButton as J } from "../icon-button/icon-button.js";
+import { MenuIconButton as K } from "../menu/menu-icon-button.js";
+import { ThemeIconSizeVariable as R, ThemeSpaceVariable as i, ThemeColorVariable as L, ThemeFontVariable as U, ThemeFontSizeVariable as Z } from "../../theme/theme-types.js";
+const _ = ({
   tableName: g,
   onSearch: f,
-  onAddNewItem: C,
+  defaultValue: C,
+  onAddNewItem: k,
   actionMenu: p,
-  ...L
+  ...j
 }) => {
-  const t = D(), [V] = A("(min-width: 48em)"), r = G[t.localeString], k = l(() => t.table.getAllColumns().length === Object.keys(t.breakingContentState).length && !Object.values(t.breakingContentState).includes(!1), [t.breakingContentState, t.table]), S = l(
+  const t = G(), [z] = H("(min-width: 48em)"), r = E[t.localeString], S = l(() => t.table.getAllColumns().length === Object.keys(t.breakingContentState).length && !Object.values(t.breakingContentState).includes(!1), [t.breakingContentState, t.table]), T = l(
     (n) => {
       const b = {};
-      t.table.getAllColumns().forEach((T) => {
-        b[T.id] = n.target.checked;
+      t.table.getAllColumns().forEach((M) => {
+        b[M.id] = n.target.checked;
       }), t.setBreakingContentState(b), t.onBreakingContentChange?.(b);
     },
     [t]
   ), s = l(
     () => /* @__PURE__ */ e(
-      E,
+      P,
       {
-        leftElement: /* @__PURE__ */ e(y, { icon: c.Search }),
+        leftElement: /* @__PURE__ */ e(I, { icon: c.Search }),
         onChange: (n) => f?.(n),
+        defaultValue: C,
         size: "md",
         type: "search",
         w: { base: "100%", md: "170px" },
         "data-testid": "filterInput"
       }
     ),
-    [f]
+    [f, C]
   ), m = l(
-    () => /* @__PURE__ */ e(a, { children: /* @__PURE__ */ o(I, { closeOnSelect: !1, isLazy: !0, children: [
-      /* @__PURE__ */ e(P, { "aria-label": r.presets, variant: "ghost", p: "unset", w: "40px", h: "40px", children: /* @__PURE__ */ e(y, { icon: c.Sliders, size: K.Medium }) }),
-      /* @__PURE__ */ e(H, { children: /* @__PURE__ */ o(Q, { children: [
+    () => /* @__PURE__ */ e(a, { children: /* @__PURE__ */ o(w, { closeOnSelect: !1, isLazy: !0, children: [
+      /* @__PURE__ */ e(Q, { "aria-label": r.presets, variant: "ghost", p: "unset", w: "40px", h: "40px", children: /* @__PURE__ */ e(I, { icon: c.Sliders, size: R.Medium }) }),
+      /* @__PURE__ */ e(O, { children: /* @__PURE__ */ o(W, { children: [
         /* @__PURE__ */ e(
-          w,
+          B,
           {
-            color: F.OnSurfaceSubdued,
+            color: L.OnSurfaceSubdued,
             py: i.Small,
             px: i.Medium,
             children: r.showColumns
           }
         ),
-        /* @__PURE__ */ e(M, { maxHeight: "320px", overflowY: "auto", children: t.table.getAllLeafColumns().filter((n) => n.getCanHide()).map((n) => /* @__PURE__ */ o(B, { itemType: "checkbox", leftIcon: c.GripMore, children: [
-          /* @__PURE__ */ e(v, { children: n.columnDef.header }),
+        /* @__PURE__ */ e(x, { maxHeight: "320px", overflowY: "auto", children: t.table.getAllLeafColumns().filter((n) => n.getCanHide()).map((n) => /* @__PURE__ */ o(F, { itemType: "checkbox", leftIcon: c.GripMore, children: [
+          /* @__PURE__ */ e(A, { children: n.columnDef.header }),
           /* @__PURE__ */ e(
-            W,
+            X,
             {
               isChecked: n.getIsVisible(),
               onChange: n.getToggleVisibilityHandler()
             }
           )
         ] }, n.id)) }),
-        /* @__PURE__ */ e(X, {}),
-        /* @__PURE__ */ o(B, { itemType: "switch", children: [
+        /* @__PURE__ */ e(Y, {}),
+        /* @__PURE__ */ o(F, { itemType: "switch", children: [
           r.breakingContent,
-          /* @__PURE__ */ e(Y, { onChange: S, isChecked: k() })
+          /* @__PURE__ */ e(q, { onChange: T, isChecked: S() })
         ] })
       ] }) })
     ] }) }),
     [
-      k,
       S,
+      T,
       t.table,
       r.breakingContent,
       r.presets,
@@ -85,18 +87,18 @@ const Z = ({
     ]
   ), d = l(
     () => /* @__PURE__ */ e(
-      q,
+      J,
       {
         "aria-label": r.new,
         icon: c.Increase,
-        onClick: C,
+        onClick: k,
         variant: "secondary"
       }
     ),
-    [C, r.new]
-  ), u = l(() => p ? /* @__PURE__ */ o(I, { children: [
+    [k, r.new]
+  ), h = l(() => p ? /* @__PURE__ */ o(w, { children: [
     /* @__PURE__ */ e(
-      J,
+      K,
       {
         icon: c.MoreVertical,
         variant: "ghost",
@@ -105,45 +107,45 @@ const Z = ({
       }
     ),
     p
-  ] }) : null, [p, r.toolbarActions]), h = l(
+  ] }) : null, [p, r.toolbarActions]), u = l(
     () => /* @__PURE__ */ e(
-      w,
+      B,
       {
-        fontSize: U.X2Large,
-        color: F.OnBackgroundHeader,
+        fontSize: Z.X2Large,
+        color: L.OnBackgroundHeader,
         fontWeight: "bold",
-        fontFamily: R.Header,
+        fontFamily: U.Header,
         children: g
       }
     ),
     [g]
-  ), j = x(
+  ), V = y(
     () => /* @__PURE__ */ e(a, { direction: "column", gap: i.Medium, mb: i.Medium, children: /* @__PURE__ */ o(a, { justifyContent: "space-between", alignItems: "center", children: [
-      h(),
+      u(),
       /* @__PURE__ */ o(a, { gap: i.Medium, children: [
         s(),
         m(),
-        u(),
+        h(),
         d()
       ] })
     ] }) }),
-    [d, s, m, h, u]
-  ), z = x(
+    [d, s, m, u, h]
+  ), v = y(
     () => /* @__PURE__ */ o(a, { direction: "column", gap: i.Medium, mb: i.Medium, children: [
       /* @__PURE__ */ o(a, { justifyContent: "space-between", children: [
-        h(),
+        u(),
         d()
       ] }),
       /* @__PURE__ */ o(a, { justifyContent: "space-between", gap: i.Medium, children: [
         s(),
-        u(),
+        h(),
         m()
       ] })
     ] }),
-    [d, s, m, h, u]
+    [d, s, m, u, h]
   );
-  return /* @__PURE__ */ e(M, { id: "tableToolbar", ...L, children: V ? j : z });
-}, ge = O(Z);
+  return /* @__PURE__ */ e(x, { id: "tableToolbar", ...j, children: z ? V : v });
+}, fe = D(_);
 export {
-  ge as TableToolbar
+  fe as TableToolbar
 };

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

@@ -23,6 +23,14 @@ export declare const comboboxConfig: {
             background: ThemeColorVariable;
             color: ThemeColorVariable;
             borderColor: ThemeColorVariable;
+            '&[aria-disabled="true"]': {
+                backgroundColor: ThemeColorVariable;
+                color: ThemeColorVariable;
+            };
+            '&[aria-readonly="true"]': {
+                backgroundColor: ThemeColorVariable;
+                color: ThemeColorVariable;
+            };
             "@media(hover: hover)": {
                 '&:hover:not(:focus-within):not([aria-disabled="true"]):not([aria-readonly="true"])': {
                     borderColor: ThemeColorVariable;
@@ -32,6 +40,17 @@ export declare const comboboxConfig: {
         ghost: {
             background: string;
             color: ThemeColorVariable;
+            '&[aria-disabled="true"]': {
+                backgroundColor: string;
+                color: ThemeColorVariable;
+            };
+            '&[aria-readonly="true"]': {
+                backgroundColor: string;
+                color: ThemeColorVariable;
+                ".combobox-dropdown-icon": {
+                    opacity: number;
+                };
+            };
             '&:not([aria-disabled="true"]):not([aria-readonly="true"]) .combobox-dropdown-icon': {
                 opacity: number;
             };
@@ -41,7 +60,7 @@ export declare const comboboxConfig: {
                 };
             };
             "@media(hover: hover)": {
-                "&:hover:not(:focus-within)": {
+                '&:hover:not(:focus-within):not([aria-disabled="true"])': {
                     backgroundColor: ThemeColorVariable;
                     ".combobox-dropdown-icon": {
                         opacity: number;

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;AAgF5E,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;AAiG5E,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAIzB,CAAC"}

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

@@ -6,12 +6,10 @@ const a = {
   border: `${e.XSmall} transparent`,
   '&[aria-disabled="true"]': {
     borderColor: "transparent",
-    backgroundColor: o.SurfaceDisabled,
     cursor: "not-allowed"
   },
   '&[aria-readonly="true"]': {
-    borderColor: "transparent",
-    backgroundColor: o.SurfaceDisabled
+    borderColor: "transparent"
   },
   '&[aria-invalid="true"]': {
     borderColor: o.Error,
@@ -30,6 +28,14 @@ const a = {
     background: o.Surface,
     color: o.OnSurface,
     borderColor: o.OnSurfaceBorder,
+    '&[aria-disabled="true"]': {
+      backgroundColor: o.SurfaceDisabled,
+      color: o.OnSurfaceSubdued
+    },
+    '&[aria-readonly="true"]': {
+      backgroundColor: o.SurfaceDisabled,
+      color: o.OnSurface
+    },
     "@media(hover: hover)": {
       '&:hover:not(:focus-within):not([aria-disabled="true"]):not([aria-readonly="true"])': {
         borderColor: o.OnSurface
@@ -39,6 +45,17 @@ const a = {
   ghost: {
     background: "none",
     color: o.OnSurface,
+    '&[aria-disabled="true"]': {
+      backgroundColor: "transparent",
+      color: o.OnSurfaceSubdued
+    },
+    '&[aria-readonly="true"]': {
+      backgroundColor: "transparent",
+      color: o.OnSurface,
+      ".combobox-dropdown-icon": {
+        opacity: 1
+      }
+    },
     '&:not([aria-disabled="true"]):not([aria-readonly="true"]) .combobox-dropdown-icon': {
       opacity: 0
     },
@@ -48,7 +65,7 @@ const a = {
       }
     },
     "@media(hover: hover)": {
-      "&:hover:not(:focus-within)": {
+      '&:hover:not(:focus-within):not([aria-disabled="true"])': {
         backgroundColor: o.SurfaceDisabled,
         ".combobox-dropdown-icon": {
           opacity: 1

package/dist/theme/theme-config/components/input-theme.d.ts

@@ -121,6 +121,21 @@ export declare const inputConfig: {
                 borderColor: string;
                 background: string;
                 color: ThemeColorToken;
+                _hover: undefined;
+                _disabled: {
+                    cursor: string;
+                    background: string;
+                    color: ThemeColorToken;
+                    borderColor: string;
+                    opacity: number;
+                };
+                _readOnly: {
+                    color: ThemeColorToken;
+                    background: string;
+                    userSelect: string;
+                    opacity: number;
+                    borderColor: string;
+                };
                 _focus: {
                     border: ThemeBorderToken;
                     borderColor: ThemeColorToken;
@@ -128,10 +143,7 @@ export declare const inputConfig: {
                     backgroundColor: ThemeColorToken;
                 };
                 "@media(hover: hover)": {
-                    "&:hover": {
-                        borderColor: ThemeColorToken;
-                    };
-                    "&:hover:not(:focus)": {
+                    "&:hover:not(:focus):not(:disabled)": {
                         backgroundColor: ThemeColorToken;
                         borderColor: string;
                     };
@@ -146,29 +158,10 @@ export declare const inputConfig: {
                 paddingInlineStart: ThemeSpaceToken;
                 paddingInlineEnd: ThemeSpaceToken;
                 width: string;
-                _disabled: {
-                    cursor: string;
-                    background: ThemeColorToken;
-                    color: ThemeColorToken;
-                    border: number;
-                    opacity: number;
-                };
-                _readOnly: {
-                    color: ThemeColorToken;
-                    background: ThemeColorToken;
-                    userSelect: string;
-                    opacity: number;
-                    border: number;
-                };
                 _placeholder: {
                     color: ThemeColorToken;
                     opacity: number;
                 };
-                _hover: {
-                    borderColor: ThemeColorToken;
-                    _disabled: undefined;
-                    _readOnly: undefined;
-                };
             };
             addon: {
                 color: ThemeColorToken;

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

@@ -1 +1 @@
-{"version":3,"file":"input-theme.d.ts","sourceRoot":"","sources":["../../../../lib/theme/theme-config/components/input-theme.ts"],"names":[],"mappings":"AAIA,OAAO,EACN,gBAAgB,EAChB,eAAe,EACf,kBAAkB,EAClB,cAAc,EACd,gBAAgB,EAChB,eAAe,EACf,MAAM,iBAAiB,CAAC;AAkJzB,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAMtB,CAAC"}
+{"version":3,"file":"input-theme.d.ts","sourceRoot":"","sources":["../../../../lib/theme/theme-config/components/input-theme.ts"],"names":[],"mappings":"AAIA,OAAO,EACN,gBAAgB,EAChB,eAAe,EACf,kBAAkB,EAClB,cAAc,EACd,gBAAgB,EAChB,eAAe,EACf,MAAM,iBAAiB,CAAC;AA8JzB,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAMtB,CAAC"}

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

@@ -1,12 +1,12 @@
-import { createMultiStyleConfigHelpers as f, defineStyle as l } from "@chakra-ui/react";
-import { isTouchScreenDevice as m } from "../../theme-helper.js";
+import { createMultiStyleConfigHelpers as s, defineStyle as l } from "@chakra-ui/react";
+import { isTouchScreenDevice as b } from "../../theme-helper.js";
 import { ThemeColorVariable as n } from "../../theme-types.js";
-import { ThemeColorToken as o, ThemeSpaceToken as r, ThemeRadiusToken as t, ThemeBorderToken as d, ThemeFontToken as s, ThemeFontSizeToken as i } from "../theme-tokens.js";
-import { inputAnatomy as b } from "../../../packages/casper-ui-library/node_modules/@chakra-ui/anatomy/dist/esm/components.js";
-const { definePartsStyle: a, defineMultiStyleConfig: p } = f(b.keys), c = {
-  fontFamily: s.Body,
+import { ThemeColorToken as o, ThemeSpaceToken as r, ThemeRadiusToken as t, ThemeBorderToken as a, ThemeFontToken as f, ThemeFontSizeToken as i } from "../theme-tokens.js";
+import { inputAnatomy as m } from "../../../packages/casper-ui-library/node_modules/@chakra-ui/anatomy/dist/esm/components.js";
+const { definePartsStyle: d, defineMultiStyleConfig: p } = s(m.keys), c = {
+  fontFamily: f.Body,
   color: o.OnSurface,
-  border: d.XSmall,
+  border: a.XSmall,
   borderColor: o.OnSurfaceBorder,
   background: o.Surface,
   borderRadius: t.Small,
@@ -40,7 +40,7 @@ const { definePartsStyle: a, defineMultiStyleConfig: p } = f(b.keys), c = {
     boxShadow: `0 0 0 4px ${n.InfoContainer}`
   },
   _hover: {
-    borderColor: m() ? o.OnSurfaceBorder : o.OnSurface,
+    borderColor: b() ? o.OnSurfaceBorder : o.OnSurface,
     _disabled: void 0,
     _readOnly: void 0
   }
@@ -79,65 +79,77 @@ const { definePartsStyle: a, defineMultiStyleConfig: p } = f(b.keys), c = {
     px: r.Small
   })
 }, g = {
-  lg: a({
+  lg: d({
     field: e.lg,
     addon: e.lg,
     element: e.lg
   }),
-  md: a({
+  md: d({
     field: e.md,
     addon: e.md,
     element: e.md
   }),
-  sm: a({
+  sm: d({
     field: e.sm,
     addon: e.sm,
     element: e.sm
   })
-}, h = a({
+}, C = d({
   field: {
     ...c,
-    border: d.XSmall,
+    border: a.XSmall,
     borderColor: "transparent",
     background: "none",
     color: o.OnSurface,
+    _hover: void 0,
+    _disabled: {
+      cursor: "not-allowed",
+      background: "none",
+      color: o.OnSurfaceSubdued,
+      borderColor: "transparent",
+      opacity: 1
+    },
+    _readOnly: {
+      color: o.OnSurface,
+      background: "none",
+      userSelect: "text",
+      opacity: 1,
+      borderColor: "transparent"
+    },
     _focus: {
-      border: d.XSmall,
+      border: a.XSmall,
       borderColor: o.Info,
       boxShadow: `0 0 0 4px ${n.InfoContainer}`,
       backgroundColor: o.Surface
     },
     "@media(hover: hover)": {
-      "&:hover": {
-        borderColor: o.Info
-      },
-      "&:hover:not(:focus)": {
+      "&:hover:not(:focus):not(:disabled)": {
         backgroundColor: o.SurfaceDisabled,
         borderColor: "transparent"
       }
     },
     _invalid: {
-      border: d.XSmall,
+      border: a.XSmall,
       borderColor: o.Error,
       boxShadow: `0 0 0 4px ${n.ErrorContainer}`
     }
   },
   addon: u,
   element: S
-}), C = {
+}), h = {
   outline: {
     field: c,
     addon: u,
     element: S
   },
-  ghost: h
-}, _ = p({
+  ghost: C
+}, T = p({
   sizes: g,
-  variants: C,
+  variants: h,
   defaultProps: {
     variant: "outline"
   }
 });
 export {
-  _ as inputConfig
+  T as inputConfig
 };

package/dist/theme/theme-config/components/select-theme.d.ts

@@ -98,6 +98,21 @@ export declare const selectConfig: {
                 borderColor?: string | undefined;
                 background?: string | undefined;
                 color?: ThemeColorToken | undefined;
+                _hover?: undefined;
+                _disabled?: {
+                    cursor: string;
+                    background: string;
+                    color: ThemeColorToken;
+                    borderColor: string;
+                    opacity: number;
+                } | undefined;
+                _readOnly?: {
+                    color: ThemeColorToken;
+                    background: string;
+                    userSelect: string;
+                    opacity: number;
+                    borderColor: string;
+                } | undefined;
                 _focus?: {
                     border: import('../theme-tokens.js').ThemeBorderToken;
                     borderColor: ThemeColorToken;
@@ -105,10 +120,7 @@ export declare const selectConfig: {
                     backgroundColor: ThemeColorToken;
                 } | undefined;
                 "@media(hover: hover)"?: {
-                    "&:hover": {
-                        borderColor: ThemeColorToken;
-                    };
-                    "&:hover:not(:focus)": {
+                    "&:hover:not(:focus):not(:disabled)": {
                         backgroundColor: ThemeColorToken;
                         borderColor: string;
                     };
@@ -123,29 +135,10 @@ export declare const selectConfig: {
                 paddingInlineStart?: import('../theme-tokens.js').ThemeSpaceToken | undefined;
                 paddingInlineEnd?: import('../theme-tokens.js').ThemeSpaceToken | undefined;
                 width?: string | undefined;
-                _disabled?: {
-                    cursor: string;
-                    background: ThemeColorToken;
-                    color: ThemeColorToken;
-                    border: number;
-                    opacity: number;
-                } | undefined;
-                _readOnly?: {
-                    color: ThemeColorToken;
-                    background: ThemeColorToken;
-                    userSelect: string;
-                    opacity: number;
-                    border: number;
-                } | undefined;
                 _placeholder?: {
                     color: ThemeColorToken;
                     opacity: number;
                 } | undefined;
-                _hover?: {
-                    borderColor: ThemeColorToken;
-                    _disabled: undefined;
-                    _readOnly: undefined;
-                } | undefined;
             };
             icon: {
                 fontSize: ThemeFontSizeToken;

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

@@ -1 +1 @@
-{"version":3,"file":"select-theme.d.ts","sourceRoot":"","sources":["../../../../lib/theme/theme-config/components/select-theme.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,eAAe,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AA8CtE,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAQvB,CAAC"}
+{"version":3,"file":"select-theme.d.ts","sourceRoot":"","sources":["../../../../lib/theme/theme-config/components/select-theme.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,eAAe,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AA8CtE,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAQvB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"textarea-theme.d.ts","sourceRoot":"","sources":["../../../../lib/theme/theme-config/components/textarea-theme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,0BAA0B,EAAqB,MAAM,kBAAkB,CAAC;AA8EtF,eAAO,MAAM,cAAc,EAAE,0BAQ3B,CAAC"}
+{"version":3,"file":"textarea-theme.d.ts","sourceRoot":"","sources":["../../../../lib/theme/theme-config/components/textarea-theme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,0BAA0B,EAAqB,MAAM,kBAAkB,CAAC;AA2FtF,eAAO,MAAM,cAAc,EAAE,0BAQ3B,CAAC"}

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

@@ -1,14 +1,14 @@
 import { defineStyleConfig as d } from "@chakra-ui/react";
 import { isTouchScreenDevice as n } from "../../theme-helper.js";
-import { ThemeColorVariable as r } from "../../theme-types.js";
-import { ThemeColorToken as o, ThemeBorderToken as e, ThemeSpaceToken as l, ThemeRadiusToken as i, ThemeFontToken as c } from "../theme-tokens.js";
+import { ThemeColorVariable as e } from "../../theme-types.js";
+import { ThemeColorToken as o, ThemeBorderToken as r, ThemeSpaceToken as l, ThemeRadiusToken as t, ThemeFontToken as c } from "../theme-tokens.js";
 const a = {
   fontFamily: c.Body,
   color: o.OnSurface,
-  border: e.XSmall,
+  border: r.XSmall,
   borderColor: o.OnSurfaceBorder,
   background: o.Surface,
-  borderRadius: i.Small,
+  borderRadius: t.Small,
   paddingX: l.Medium,
   paddingY: "12px",
   width: "100%",
@@ -32,7 +32,7 @@ const a = {
   },
   _invalid: {
     borderColor: o.Error,
-    boxShadow: `0 0 0 4px ${r.ErrorContainer}`
+    boxShadow: `0 0 0 4px ${e.ErrorContainer}`
   },
   _hover: {
     borderColor: n() ? o.OnSurfaceBorder : o.OnSurface,
@@ -41,39 +41,52 @@ const a = {
   },
   _focus: {
     borderColor: o.Info,
-    boxShadow: `0 0 0 4px ${r.InfoContainer}`
+    boxShadow: `0 0 0 4px ${e.InfoContainer}`
   }
-}, t = {
+}, i = {
   ...a,
-  border: "none",
+  border: r.XSmall,
+  borderColor: "transparent",
+  _hover: void 0,
+  _disabled: {
+    cursor: "not-allowed",
+    background: "none",
+    color: o.OnSurfaceSubdued,
+    borderColor: "transparent",
+    opacity: 1
+  },
+  _readOnly: {
+    color: o.OnSurface,
+    background: "none",
+    userSelect: "text",
+    opacity: 1,
+    borderColor: "transparent"
+  },
   _focus: {
-    border: e.XSmall,
+    border: r.XSmall,
     borderColor: o.Info,
-    boxShadow: `0 0 0 4px ${r.InfoContainer}`
+    boxShadow: `0 0 0 4px ${e.InfoContainer}`
   },
   "@media(hover: hover)": {
-    "&:hover": {
-      borderColor: o.Info
-    },
-    "&:hover:not(:focus)": {
+    "&:hover:not(:focus):not(:disabled)": {
       backgroundColor: o.SurfaceDisabled,
-      borderColor: o.OnSurfaceBorder
+      borderColor: "transparent"
     }
   },
   _invalid: {
-    border: e.XSmall,
+    border: r.XSmall,
     borderColor: o.Error,
-    boxShadow: `0 0 0 4px ${r.ErrorContainer}`
+    boxShadow: `0 0 0 4px ${e.ErrorContainer}`
   }
-}, s = d({
+}, f = d({
   variants: {
     unstyled: a,
-    ghost: t
+    ghost: i
   },
   defaultProps: {
     variant: "unstyled"
   }
 });
 export {
-  s as textareaConfig
+  f as textareaConfig
 };

package/package.json

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