@caspeco/casper-ui-library 7.6.0 → 7.7.0

package/README.md

@@ -61,6 +61,7 @@ export default defineConfig({
    git checkout -b UTF-837-add-checkbox-component
    ```
 3. Make your changes.
-4. Bump the `version` field in `package.json` (following [Semantic versioning](https://semver.org/)) and run `npm install`.
+4. Bump the `version` field in `package.json` (following [Semantic versioning](https://semver.org/)) and run `npm install`. The version reflects API changes only (e.g. removing a prop → MAJOR, adding a prop → MINOR, no public API changes → PATCH). UI changes are **NOT** API changes.
 5. Open a [pull request](https://github.com/Caspeco/casper-ui-library/pulls) using the template and assign a reviewer.
-6. When you have gotten your PR approved, merge the PR. If you have a new version in package.json it will automatically publish your changes to npm. A new version of the documentation website will always be built.
+6. If the PR makes significant changes to the UI (e.g. changes the sizes for all buttons), clearly announce this in the [Mattermost channel](https://snack.azure.caspeco.com/default/channels/casper-ui-20---devs).
+7. After approval, merge the PR. If you have a new version in package.json it will automatically publish your changes to npm. The documentation website is always rebuilt.

package/dist/components/button/helper.d.ts

@@ -1,9 +1,12 @@
+import { ButtonSize } from './types.js';
 import { ThemeIconSizeVariable } from '../../theme/index.js';
 import { ResponsiveValue } from '@chakra-ui/react';
 export declare const iconSizeMap: {
+    xl: ThemeIconSizeVariable;
     lg: ThemeIconSizeVariable;
     md: ThemeIconSizeVariable;
     sm: ThemeIconSizeVariable;
+    xs: ThemeIconSizeVariable;
 };
 /**
  * Maps a ResponsiveValue of button sizes to corresponding icon sizes.
@@ -11,5 +14,5 @@ export declare const iconSizeMap: {
  * @param size - The ResponsiveValue of the button size.
  * @returns A ResponsiveValue of icon sizes.
  */
-export declare function getIconSizeFromButtonSize(size: ResponsiveValue<"lg" | "sm" | "md">): ThemeIconSizeVariable | (ThemeIconSizeVariable | null)[] | Record<string, ThemeIconSizeVariable | undefined> | undefined;
+export declare function getIconSizeFromButtonSize(size: ResponsiveValue<ButtonSize>): ThemeIconSizeVariable | (ThemeIconSizeVariable | null)[] | Record<string, ThemeIconSizeVariable | undefined> | undefined;
 //# sourceMappingURL=helper.d.ts.map

package/dist/components/button/helper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"helper.d.ts","sourceRoot":"","sources":["../../../lib/components/button/helper.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAChD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAExD,eAAO,MAAM,WAAW;;;;CAIvB,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,yBAAyB,CAAC,IAAI,EAAE,eAAe,CAAC,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC,4HA2BlF"}
+{"version":3,"file":"helper.d.ts","sourceRoot":"","sources":["../../../lib/components/button/helper.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAC5D,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAChD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAExD,eAAO,MAAM,WAAW;;;;;;CAMvB,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,yBAAyB,CAAC,IAAI,EAAE,eAAe,CAAC,UAAU,CAAC,4HA2B1E"}

package/dist/components/button/helper.js

@@ -1,23 +1,25 @@
-import { ThemeIconSizeVariable as e } from "../../theme/theme-types.js";
+import { ThemeIconSizeVariable as t } from "../../theme/theme-types.js";
 const o = {
-  lg: e.Medium,
-  md: e.Medium,
-  sm: e.Small
+  xl: t.Medium,
+  lg: t.Medium,
+  md: t.Medium,
+  sm: t.Small,
+  xs: t.Small
 };
-function a(r) {
-  if (typeof r == "string")
-    return o[r];
-  if (Array.isArray(r))
-    return r.map((t) => t && o[t]);
-  if (typeof r == "object") {
-    const t = {};
-    return Object.keys(r).forEach((n) => {
-      const i = r[n];
-      i && (t[n] = o[i]);
-    }), t;
+function c(e) {
+  if (typeof e == "string")
+    return o[e];
+  if (Array.isArray(e))
+    return e.map((r) => r && o[r]);
+  if (typeof e == "object") {
+    const r = {};
+    return Object.keys(e).forEach((n) => {
+      const i = e[n];
+      i && (r[n] = o[i]);
+    }), r;
   }
 }
 export {
-  a as getIconSizeFromButtonSize,
+  c as getIconSizeFromButtonSize,
   o as iconSizeMap
 };

package/dist/components/button/types.d.ts

@@ -1,6 +1,7 @@
 import { Icons } from '../icon/index.js';
 import { CustomChakraBoxProps, LayoutProps, MarginProps, PaddingProps } from '../../theme/index.js';
 import { ButtonProps as ChakraButtonProps, LinkProps as ChakraLinkProps, ResponsiveValue } from '@chakra-ui/react';
+export type ButtonSize = "xs" | "sm" | "md" | "lg" | "xl";
 export type ButtonProps = CustomChakraBoxProps & LayoutProps & MarginProps & PaddingProps & Pick<ChakraLinkProps, "href" | "target" | "rel"> & Pick<ChakraButtonProps, "children" | "isDisabled" | "onClick" | "type" | "isLoading" | "loadingText"> & {
     /**
      * Appearance variant for Button.
@@ -8,8 +9,10 @@ export type ButtonProps = CustomChakraBoxProps & LayoutProps & MarginProps & Pad
      * @note The 'card' variant is deprecated, use the component ToggleButton instead.
      */
     variant?: ResponsiveValue<"primary" | "secondary" | "link" | "ghost" | "tertiary" | "segmentedControl" | "card" | "alert"> | undefined;
-    /** The size of the button, default: md */
-    size?: ResponsiveValue<"lg" | "sm" | "md"> | undefined;
+    /**
+     * The size of the button, default: md
+     */
+    size?: ResponsiveValue<ButtonSize> | undefined;
     /**
      * When set to true or false, will indicate to screen readers that this is a toggle button, with a selected state that can be true or false.
      * Only compatible with the "card"-variant. Defaults to undefined (not a toggle button).

package/dist/components/button/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../lib/components/button/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1C,OAAO,KAAK,EAAE,oBAAoB,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAC5F,OAAO,EACN,KAAK,WAAW,IAAI,iBAAiB,EACrC,KAAK,SAAS,IAAI,eAAe,EACjC,KAAK,eAAe,EACpB,MAAM,kBAAkB,CAAC;AAE1B,MAAM,MAAM,WAAW,GAAG,oBAAoB,GAC7C,WAAW,GACX,WAAW,GACX,YAAY,GACZ,IAAI,CAAC,eAAe,EAAE,MAAM,GAAG,QAAQ,GAAG,KAAK,CAAC,GAChD,IAAI,CAAC,iBAAiB,EAAE,UAAU,GAAG,YAAY,GAAG,SAAS,GAAG,MAAM,GAAG,WAAW,GAAG,aAAa,CAAC,GAAG;IACvG;;;;OAIG;IACH,OAAO,CAAC,EACL,eAAe,CACf,SAAS,GAAG,WAAW,GAAG,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,kBAAkB,GAAG,MAAM,GAAG,OAAO,CAC9F,GACD,SAAS,CAAC;IAEb,0CAA0C;IAC1C,IAAI,CAAC,EAAE,eAAe,CAAC,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC,GAAG,SAAS,CAAC;IAEvD;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAEjC,iDAAiD;IACjD,QAAQ,CAAC,EAAE,KAAK,CAAC;IAEjB,8CAA8C;IAC9C,SAAS,CAAC,EAAE,KAAK,CAAC;CAClB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../lib/components/button/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1C,OAAO,KAAK,EAAE,oBAAoB,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAC5F,OAAO,EACN,KAAK,WAAW,IAAI,iBAAiB,EACrC,KAAK,SAAS,IAAI,eAAe,EACjC,KAAK,eAAe,EACpB,MAAM,kBAAkB,CAAC;AAE1B,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE1D,MAAM,MAAM,WAAW,GAAG,oBAAoB,GAC7C,WAAW,GACX,WAAW,GACX,YAAY,GACZ,IAAI,CAAC,eAAe,EAAE,MAAM,GAAG,QAAQ,GAAG,KAAK,CAAC,GAChD,IAAI,CAAC,iBAAiB,EAAE,UAAU,GAAG,YAAY,GAAG,SAAS,GAAG,MAAM,GAAG,WAAW,GAAG,aAAa,CAAC,GAAG;IACvG;;;;OAIG;IACH,OAAO,CAAC,EACL,eAAe,CACf,SAAS,GAAG,WAAW,GAAG,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,kBAAkB,GAAG,MAAM,GAAG,OAAO,CAC9F,GACD,SAAS,CAAC;IAEb;;OAEG;IACH,IAAI,CAAC,EAAE,eAAe,CAAC,UAAU,CAAC,GAAG,SAAS,CAAC;IAE/C;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAEjC,iDAAiD;IACjD,QAAQ,CAAC,EAAE,KAAK,CAAC;IAEjB,8CAA8C;IAC9C,SAAS,CAAC,EAAE,KAAK,CAAC;CAClB,CAAC"}

package/dist/components/icon-button/helper.d.ts

@@ -1,9 +1,12 @@
+import { ButtonSize } from '../button/types.js';
 import { ThemeIconSizeVariable } from '../../theme/index.js';
 import { ResponsiveValue } from '@chakra-ui/react';
 export declare const iconSizeMap: {
+    xl: ThemeIconSizeVariable;
     lg: ThemeIconSizeVariable;
     md: ThemeIconSizeVariable;
     sm: ThemeIconSizeVariable;
+    xs: ThemeIconSizeVariable;
 };
 /**
  * Maps a ResponsiveValue of button sizes to corresponding icon sizes.
@@ -11,5 +14,5 @@ export declare const iconSizeMap: {
  * @param size - The ResponsiveValue of the button size.
  * @returns A ResponsiveValue of icon sizes.
  */
-export declare function getIconSizeFromButtonSize(size: ResponsiveValue<"lg" | "sm" | "md">): ThemeIconSizeVariable | (ThemeIconSizeVariable | null)[] | Record<string, ThemeIconSizeVariable | undefined> | undefined;
+export declare function getIconSizeFromButtonSize(size: ResponsiveValue<ButtonSize>): ThemeIconSizeVariable | (ThemeIconSizeVariable | null)[] | Record<string, ThemeIconSizeVariable | undefined> | undefined;
 //# sourceMappingURL=helper.d.ts.map

package/dist/components/icon-button/helper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"helper.d.ts","sourceRoot":"","sources":["../../../lib/components/icon-button/helper.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAChD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAExD,eAAO,MAAM,WAAW;;;;CAIvB,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,yBAAyB,CAAC,IAAI,EAAE,eAAe,CAAC,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC,4HA2BlF"}
+{"version":3,"file":"helper.d.ts","sourceRoot":"","sources":["../../../lib/components/icon-button/helper.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAC5D,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAChD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAExD,eAAO,MAAM,WAAW;;;;;;CAMvB,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,yBAAyB,CAAC,IAAI,EAAE,eAAe,CAAC,UAAU,CAAC,4HA2B1E"}

package/dist/components/icon-button/helper.js

@@ -1,23 +1,25 @@
-import { ThemeIconSizeVariable as e } from "../../theme/theme-types.js";
+import { ThemeIconSizeVariable as t } from "../../theme/theme-types.js";
 const o = {
-  lg: e.Medium,
-  md: e.Medium,
-  sm: e.Small
+  xl: t.Large,
+  lg: t.Medium,
+  md: t.Medium,
+  sm: t.Small,
+  xs: t.Small
 };
-function a(r) {
+function c(r) {
   if (typeof r == "string")
     return o[r];
   if (Array.isArray(r))
-    return r.map((t) => t && o[t]);
+    return r.map((e) => e && o[e]);
   if (typeof r == "object") {
-    const t = {};
+    const e = {};
     return Object.keys(r).forEach((n) => {
-      const i = r[n];
-      i && (t[n] = o[i]);
-    }), t;
+      const a = r[n];
+      a && (e[n] = o[a]);
+    }), e;
   }
 }
 export {
-  a as getIconSizeFromButtonSize,
+  c as getIconSizeFromButtonSize,
   o as iconSizeMap
 };

package/dist/components/icon-button/icon-button.d.ts

@@ -8,7 +8,7 @@
 export declare const IconButton: import('react').ForwardRefExoticComponent<{
     icon: import('../icon/index.js').Icons;
     variant?: Exclude<import('../button/index.js').ButtonProps["variant"], "link" | "segmentedControl" | import('@chakra-ui/styled-system').ResponsiveArray<unknown> | Partial<Record<string, unknown>>>;
-    size?: import('@chakra-ui/styled-system').ResponsiveValue<"lg" | "sm" | "md">;
+    size?: import('@chakra-ui/styled-system').ResponsiveValue<import('../button/types.js').ButtonSize>;
 } & {
     "aria-label": string;
     onKeyDown?: import('react').KeyboardEventHandler<HTMLButtonElement> | undefined;

package/dist/components/icon-button/types.d.ts

@@ -1,3 +1,4 @@
+import { ButtonSize } from '../button/types.js';
 import { Icons } from '../icon/index.js';
 import { CustomChakraBoxProps, MarginProps, PaddingProps } from '../../theme/index.js';
 import { IconButtonProps as ChakraIconButtonProps, ResponsiveArray, ResponsiveValue } from '@chakra-ui/react';
@@ -15,7 +16,7 @@ type CustomProperties = {
     /**
      * The size of the button, defaults to md
      */
-    size?: ResponsiveValue<"lg" | "sm" | "md">;
+    size?: ResponsiveValue<ButtonSize>;
 };
 type ChakraIconButtonProperties = Pick<ChakraIconButtonProps, "aria-label" | "isDisabled" | "onClick" | "type" | "isLoading" | "onKeyDown">;
 export type IconButtonProps = CustomProperties & ChakraIconButtonProperties & CustomStyleProps;

package/dist/components/icon-button/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../lib/components/icon-button/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1C,OAAO,KAAK,EAAE,oBAAoB,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAC/E,OAAO,KAAK,EACX,eAAe,IAAI,qBAAqB,EACxC,eAAe,EACf,eAAe,EACf,MAAM,kBAAkB,CAAC;AAC1B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAE7C,KAAK,gBAAgB,GAAG,oBAAoB,GAAG,WAAW,GAAG,YAAY,CAAC;AAE1E,KAAK,gBAAgB,GAAG;IACvB;;OAEG;IACH,IAAI,EAAE,KAAK,CAAC;IACZ;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAChB,WAAW,CAAC,SAAS,CAAC,EACtB,MAAM,GAAG,kBAAkB,GAAG,eAAe,CAAC,OAAO,CAAC,GAAG,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CACzF,CAAC;IACF;;OAEG;IACH,IAAI,CAAC,EAAE,eAAe,CAAC,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC,CAAC;CAC3C,CAAC;AAEF,KAAK,0BAA0B,GAAG,IAAI,CACrC,qBAAqB,EACrB,YAAY,GAAG,YAAY,GAAG,SAAS,GAAG,MAAM,GAAG,WAAW,GAAG,WAAW,CAC5E,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,gBAAgB,GAAG,0BAA0B,GAAG,gBAAgB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../lib/components/icon-button/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAC5D,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1C,OAAO,KAAK,EAAE,oBAAoB,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAC/E,OAAO,KAAK,EACX,eAAe,IAAI,qBAAqB,EACxC,eAAe,EACf,eAAe,EACf,MAAM,kBAAkB,CAAC;AAC1B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAE7C,KAAK,gBAAgB,GAAG,oBAAoB,GAAG,WAAW,GAAG,YAAY,CAAC;AAE1E,KAAK,gBAAgB,GAAG;IACvB;;OAEG;IACH,IAAI,EAAE,KAAK,CAAC;IACZ;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAChB,WAAW,CAAC,SAAS,CAAC,EACtB,MAAM,GAAG,kBAAkB,GAAG,eAAe,CAAC,OAAO,CAAC,GAAG,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CACzF,CAAC;IACF;;OAEG;IACH,IAAI,CAAC,EAAE,eAAe,CAAC,UAAU,CAAC,CAAC;CACnC,CAAC;AAEF,KAAK,0BAA0B,GAAG,IAAI,CACrC,qBAAqB,EACrB,YAAY,GAAG,YAAY,GAAG,SAAS,GAAG,MAAM,GAAG,WAAW,GAAG,WAAW,CAC5E,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,gBAAgB,GAAG,0BAA0B,GAAG,gBAAgB,CAAC"}

package/dist/components/toggle-button/types.d.ts

@@ -1,3 +1,4 @@
+import { ButtonSize } from '../button/types.js';
 import { CustomChakraBoxProps, LayoutProps, MarginProps, PaddingProps } from '../../theme/index.js';
 import { ButtonProps as ChakraButtonProps, ResponsiveValue } from '@chakra-ui/react';
 type CustomStyleProps = CustomChakraBoxProps & LayoutProps & MarginProps & PaddingProps;
@@ -5,7 +6,7 @@ type ToggleButtonPropsBase = {
     /** Indicate whether button is pressed or not. Defaults to false. */
     isPressed?: boolean;
     /** The size of the button, default: md */
-    size?: ResponsiveValue<"lg" | "sm" | "md"> | undefined;
+    size?: ResponsiveValue<ButtonSize> | undefined;
 } & Pick<ChakraButtonProps, "children" | "isDisabled" | "onClick" | "type"> & CustomStyleProps;
 type ToggleButtonPropsWithSubText = ToggleButtonPropsBase & {
     /**

package/dist/components/toggle-button/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../lib/components/toggle-button/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAC5F,OAAO,KAAK,EAAE,WAAW,IAAI,iBAAiB,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAE1F,KAAK,gBAAgB,GAAG,oBAAoB,GAAG,WAAW,GAAG,WAAW,GAAG,YAAY,CAAC;AAExF,KAAK,qBAAqB,GAAG;IAC5B,oEAAoE;IACpE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,0CAA0C;IAC1C,IAAI,CAAC,EAAE,eAAe,CAAC,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC,GAAG,SAAS,CAAC;CACvD,GAAG,IAAI,CAAC,iBAAiB,EAAE,UAAU,GAAG,YAAY,GAAG,SAAS,GAAG,MAAM,CAAC,GAC1E,gBAAgB,CAAC;AAElB,KAAK,4BAA4B,GAAG,qBAAqB,GAAG;IAC3D;;;;;OAKG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,YAAY,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,KAAK,+BAA+B,GAAG,qBAAqB,GAAG;IAC9D,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB,YAAY,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAIF,MAAM,MAAM,iBAAiB,GAAG,4BAA4B,GAAG,+BAA+B,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../lib/components/toggle-button/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAC5D,OAAO,KAAK,EAAE,oBAAoB,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAC5F,OAAO,KAAK,EAAE,WAAW,IAAI,iBAAiB,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAE1F,KAAK,gBAAgB,GAAG,oBAAoB,GAAG,WAAW,GAAG,WAAW,GAAG,YAAY,CAAC;AAExF,KAAK,qBAAqB,GAAG;IAC5B,oEAAoE;IACpE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,0CAA0C;IAC1C,IAAI,CAAC,EAAE,eAAe,CAAC,UAAU,CAAC,GAAG,SAAS,CAAC;CAC/C,GAAG,IAAI,CAAC,iBAAiB,EAAE,UAAU,GAAG,YAAY,GAAG,SAAS,GAAG,MAAM,CAAC,GAC1E,gBAAgB,CAAC;AAElB,KAAK,4BAA4B,GAAG,qBAAqB,GAAG;IAC3D;;;;;OAKG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,YAAY,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,KAAK,+BAA+B,GAAG,qBAAqB,GAAG;IAC9D,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB,YAAY,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAIF,MAAM,MAAM,iBAAiB,GAAG,4BAA4B,GAAG,+BAA+B,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"button-theme.d.ts","sourceRoot":"","sources":["../../../../lib/theme/theme-config/components/button-theme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,0BAA0B,EAA6C,MAAM,kBAAkB,CAAC;AAuO9G,eAAO,MAAM,YAAY,EAAE,0BAgCzB,CAAC"}
+{"version":3,"file":"button-theme.d.ts","sourceRoot":"","sources":["../../../../lib/theme/theme-config/components/button-theme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,0BAA0B,EAA6C,MAAM,kBAAkB,CAAC;AAyO9G,eAAO,MAAM,YAAY,EAAE,0BA4CzB,CAAC"}

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

@@ -1,7 +1,7 @@
 import { defineStyleConfig as i } from "@chakra-ui/react";
-import { isTouchScreenDevice as r } from "../../theme-helper.js";
-import { ThemeColorToken as o, ThemeBorderToken as a, ThemeRadiusToken as d, ThemeFontToken as t, ThemeFontSizeToken as c } from "../theme-tokens.js";
-const l = {
+import { isTouchScreenDevice as e } from "../../theme-helper.js";
+import { ThemeColorToken as o, ThemeSpaceToken as l, ThemeBorderToken as a, ThemeRadiusToken as d, ThemeFontToken as t, ThemeFontSizeToken as r } from "../theme-tokens.js";
+const g = {
   fontFamily: t.SubHeader,
   borderRadius: d.XLarge,
   border: a.XSmall,
@@ -21,7 +21,7 @@ const l = {
   background: o.Accent,
   color: o.OnAccent,
   _hover: {
-    background: r() ? o.Accent : o.AccentHover,
+    background: e() ? o.Accent : o.AccentHover,
     _disabled: {
       background: o.Accent,
       color: o.OnAccent
@@ -35,8 +35,8 @@ const l = {
   background: o.AccentContainer,
   color: o.OnAccentContainer,
   _hover: {
-    background: r() ? o.AccentContainer : o.AccentHover,
-    color: r() ? o.OnAccentContainer : o.OnAccent,
+    background: e() ? o.AccentContainer : o.AccentHover,
+    color: e() ? o.OnAccentContainer : o.OnAccent,
     _disabled: {
       background: o.AccentContainer,
       color: o.OnAccentContainer
@@ -46,12 +46,12 @@ const l = {
     background: o.AccentActive,
     color: o.OnAccent
   }
-}, g = {
+}, s = {
   color: o.OnBackground,
   fontWeight: "medium",
   _hover: {
     color: o.OnBackground,
-    bg: r() ? "none" : o.AccentHoverAlpha,
+    bg: e() ? "none" : o.AccentHoverAlpha,
     textDecoration: "none"
   },
   _active: {
@@ -62,7 +62,7 @@ const l = {
   background: o.Error,
   color: o.OnAccent,
   _hover: {
-    background: r() ? o.Error : o.ErrorHover,
+    background: e() ? o.Error : o.ErrorHover,
     _disabled: {
       background: o.Error,
       color: o.OnAccent
@@ -72,7 +72,7 @@ const l = {
     background: o.ErrorActive,
     color: o.OnAccent
   }
-}, s = {
+}, h = {
   color: o.OnBackground,
   fontFamily: t.Body,
   borderRadius: 0,
@@ -83,7 +83,7 @@ const l = {
   width: "fit-content",
   border: 0,
   _hover: {
-    color: r() ? o.OnBackground : o.AccentHover
+    color: e() ? o.OnBackground : o.AccentHover
   },
   _active: {
     color: o.AccentActive,
@@ -148,24 +148,25 @@ const l = {
       }
     }
   }
-}, e = '&[aria-pressed="true"]', n = '&[aria-pressed="false"]', h = {
+}, n = '&[aria-pressed="true"]', c = '&[aria-pressed="false"]', p = {
   // Base style
   borderRadius: d.Small,
   borderWidth: a.XSmall,
   borderColor: o.OnSurfaceBorder,
+  paddingX: l.Small,
   // Pressed state
-  [`${e}`]: {
+  [`${n}`]: {
     background: o.Accent,
     color: o.OnAccent
   },
   // Not pressed state
-  [`${n}`]: {
+  [`${c}`]: {
     background: o.Surface,
     color: o.OnSurface
   },
   // Hover styles
   "@media(hover: hover)": {
-    [`${e}&:hover`]: {
+    [`${n}&:hover`]: {
       background: o.AccentHover,
       borderColor: o.AccentHover,
       _disabled: {
@@ -173,7 +174,7 @@ const l = {
         borderColor: o.Accent
       }
     },
-    [`${n}&:hover`]: {
+    [`${c}&:hover`]: {
       background: o.AccentHoverAlpha,
       color: o.OnSurface,
       _disabled: {
@@ -183,57 +184,69 @@ const l = {
     }
   },
   // Active styles
-  [`${e}:active`]: {
+  [`${n}:active`]: {
     color: o.OnAccent,
     background: o.AccentActive
   },
-  [`${n}:active`]: {
+  [`${c}:active`]: {
     color: o.OnSurface,
     background: o.AccentActiveAlpha
   },
   // Define general disabled styles last to ensure they are not overridden
-  [`${e}:disabled`]: {
+  [`${n}:disabled`]: {
     color: o.OnAccent,
     background: o.Accent,
     borderColor: o.Accent
   },
-  [`${n}:disabled`]: {
+  [`${c}:disabled`]: {
     color: o.OnSurface,
     background: o.Surface
   }
-}, f = i({
-  baseStyle: l,
+}, S = i({
+  baseStyle: g,
   sizes: {
-    lg: {
-      px: "24px",
+    xl: {
+      paddingX: "24px",
       height: "56px",
       minWidth: "56px",
-      fontSize: c.Large
+      fontSize: r.Large
+    },
+    lg: {
+      paddingX: "16px",
+      height: "48px",
+      minWidth: "48px",
+      fontSize: r.Medium
     },
     md: {
-      px: "16px",
+      paddingX: "16px",
       height: "40px",
       minWidth: "40px",
-      fontSize: c.Medium
+      fontSize: r.Medium
     },
     sm: {
-      px: "8px",
+      paddingX: "8px",
+      height: "32px",
+      minWidth: "32px",
+      fontSize: r.Small
+    },
+    xs: {
+      paddingX: "8px",
       height: "24px",
       minWidth: "24px",
-      fontSize: c.Small
+      fontSize: r.Small
     }
   },
   variants: {
     primary: u,
     secondary: b,
-    ghost: g,
-    link: s,
+    ghost: s,
+    link: h,
     segmentedControl: v,
     tertiary: k,
-    toggle: h,
+    toggle: p,
     alert: A
   }
 });
 export {
-  f as buttonConfig
+  S as buttonConfig
 };

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

@@ -51,7 +51,7 @@ export declare const comboboxConfig: {
         };
     } | undefined;
     defaultProps?: {
-        size?: "md" | "sm" | "lg" | "xs" | "xl" | undefined;
+        size?: "md" | "sm" | "xl" | "lg" | "xs" | undefined;
         variant?: "outline" | "ghost" | undefined;
         colorScheme?: string | undefined;
     } | undefined;

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

@@ -39,7 +39,7 @@ export declare const drawerConfig: {
         }>;
     } | undefined;
     defaultProps?: {
-        size?: "md" | "sm" | "lg" | "xs" | "xl" | undefined;
+        size?: "md" | "sm" | "xl" | "lg" | "xs" | undefined;
         variant?: string | number | undefined;
         colorScheme?: string | undefined;
     } | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@caspeco/casper-ui-library",
-	"version": "7.6.0",
+	"version": "7.7.0",
 	"prettier": "@caspeco/prettier-config",
 	"type": "module",
 	"sideEffects": false,
@@ -35,22 +35,22 @@
 		"@testing-library/react": "^16.3.0",
 		"@testing-library/user-event": "^14.6.1",
 		"@types/jest": "^30.0.0",
-		"@types/node": "^24.10.0",
+		"@types/node": "^24.10.1",
 		"@types/react": "^18.3.12",
 		"@types/react-dom": "^18.3.1",
-		"@vitejs/plugin-react-swc": "^4.2.1",
+		"@vitejs/plugin-react-swc": "^4.2.2",
 		"eslint": "^9.39.1",
 		"eslint-plugin-react-hooks": "^7.0.1",
 		"eslint-plugin-react-refresh": "^0.4.24",
 		"globals": "^16.5.0",
-		"jsdom": "^27.1.0",
+		"jsdom": "^27.2.0",
 		"tsc-alias": "^1.8.16",
 		"typescript": "~5.9.3",
-		"typescript-eslint": "^8.46.3",
+		"typescript-eslint": "^8.46.4",
 		"vite": "^7.2.2",
 		"vite-plugin-dts": "^4.5.4",
 		"vite-tsconfig-paths": "^5.1.4",
-		"vitest": "^4.0.8"
+		"vitest": "^4.0.9"
 	},
 	"peerDependencies": {
 		"@chakra-ui/react": "^2.8.2",
@@ -62,7 +62,7 @@
 		"@chakra-ui/anatomy": "^2.3.4",
 		"@floating-ui/dom": "^1.7.4",
 		"@tanstack/react-table": "^8.21.3",
-		"csstype": "^3.1.3",
+		"csstype": "^3.2.2",
 		"date-fns": "^4.1.0"
 	}
 }