@caspeco/casper-ui-library 7.5.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/toggle-button.d.ts

@@ -5,5 +5,5 @@ import { ToggleButtonProps } from './types.js';
  * @see Toggle button role on MDN: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/button_role#toggle_buttons
  * @see Docs https://caspeco.github.io/casper-ui-library/components/toggle-button
  */
-export declare function ToggleButton({ isPressed, children, ...props }: ToggleButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function ToggleButton(props: ToggleButtonProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=toggle-button.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"toggle-button.d.ts","sourceRoot":"","sources":["../../../lib/components/toggle-button/toggle-button.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAEjD;;;;;GAKG;AACH,wBAAgB,YAAY,CAAC,EAAE,SAAiB,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,2CAMxF"}
+{"version":3,"file":"toggle-button.d.ts","sourceRoot":"","sources":["../../../lib/components/toggle-button/toggle-button.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAGjD;;;;;GAKG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,2CAUpD"}

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

@@ -1,8 +1,10 @@
-import { jsx as e } from "react/jsx-runtime";
-import { Button as n } from "@chakra-ui/react";
-function p({ isPressed: t = !1, children: o, ...r }) {
-  return /* @__PURE__ */ e(n, { "aria-pressed": t, type: "button", variant: "toggle", ...r, children: o });
+import { jsx as n } from "react/jsx-runtime";
+import { Button as s } from "@chakra-ui/react";
+import { useButtonChildren as i } from "./use-button-children.js";
+function c(t) {
+  const { isPressed: r = !1, subText: u, children: l, ...e } = t, o = i(t);
+  return /* @__PURE__ */ n(s, { "aria-pressed": r, type: "button", variant: "toggle", ...e, children: o });
 }
 export {
-  p as ToggleButton
+  c as ToggleButton
 };

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

@@ -1,13 +1,31 @@
+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;
-type CustomProperties = {
-    /** Indicate wether button is pressed or not. Defaults to false. */
+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 & {
+    /**
+     * Adds a subtext below the button text.
+     * Does not work for sm size.
+     * When subText is provided, aria-label is required for accessibility
+     * since the button content will be hidden from screen readers.
+     */
+    subText: string;
+    /**
+     * Accessible label for the button. Required when using subText
+     * since the button content will be aria-hidden.
+     */
+    "aria-label": string;
 };
-type ChakraButtonProperties = Pick<ChakraButtonProps, "children" | "isDisabled" | "onClick" | "type">;
-export type ToggleButtonProps = CustomProperties & ChakraButtonProperties & CustomStyleProps;
+type ToggleButtonPropsWithoutSubText = ToggleButtonPropsBase & {
+    subText?: never;
+    "aria-label"?: string;
+};
+export type ToggleButtonProps = ToggleButtonPropsWithSubText | ToggleButtonPropsWithoutSubText;
 export {};
 //# sourceMappingURL=types.d.ts.map

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,gBAAgB,GAAG;IACvB,mEAAmE;IACnE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,0CAA0C;IAC1C,IAAI,CAAC,EAAE,eAAe,CAAC,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC,GAAG,SAAS,CAAC;CACvD,CAAC;AAEF,KAAK,sBAAsB,GAAG,IAAI,CAAC,iBAAiB,EAAE,UAAU,GAAG,YAAY,GAAG,SAAS,GAAG,MAAM,CAAC,CAAC;AAEtG,MAAM,MAAM,iBAAiB,GAAG,gBAAgB,GAAG,sBAAsB,GAAG,gBAAgB,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/components/toggle-button/use-button-children.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+import { ToggleButtonProps } from './types.js';
+/**
+ * Custom hook that returns the children elements for the button, including subText if applicable.
+ * For responsive size values, dynamically shows/hides subText based on the current breakpoint.
+ * @returns If subText is provided and the current size is allowed, returns a container with the main text and subText. Otherwise it returns just the children.
+ */
+export declare function useButtonChildren(props: ToggleButtonProps): ReactNode;
+//# sourceMappingURL=use-button-children.d.ts.map

package/dist/components/toggle-button/use-button-children.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-button-children.d.ts","sourceRoot":"","sources":["../../../lib/components/toggle-button/use-button-children.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAKjD;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,iBAAiB,GAAG,SAAS,CAoCrE"}

package/dist/components/toggle-button/use-button-children.js

@@ -0,0 +1,27 @@
+import { jsxs as a, jsx as o } from "react/jsx-runtime";
+import { useBreakpointValue as u, Flex as d, Text as r } from "@chakra-ui/react";
+import { ThemeFontSizeVariable as f } from "../../theme/theme-types.js";
+const m = ["md", "lg"];
+function T(s) {
+  const { size: l, children: t, subText: n } = s, e = l ?? "md", i = u(
+    typeof e == "string" || e === void 0 ? { base: e } : e,
+    { ssr: !1 }
+  ), c = i && m.includes(i);
+  return n && c ? /* @__PURE__ */ a(d, { "aria-hidden": "true", flexDirection: "column", alignItems: "center", overflow: "hidden", children: [
+    /* @__PURE__ */ o(r, { children: t }),
+    /* @__PURE__ */ o(
+      r,
+      {
+        fontSize: f.XSmall,
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap",
+        overflow: "hidden",
+        width: "100%",
+        children: n
+      }
+    )
+  ] }) : t;
+}
+export {
+  T as useButtonChildren
+};

package/dist/node_modules/@tanstack/react-table/build/lib/index.js

@@ -1,16 +1,6 @@
 import * as o from "react";
 import { createTable as u } from "../../../table-core/build/lib/index.js";
 import { ColumnFaceting as C, ColumnFiltering as S, ColumnGrouping as w, ColumnOrdering as b, ColumnPinning as y, ColumnSizing as F, ColumnVisibility as x, GlobalFaceting as h, GlobalFiltering as O, Headers as E, RowExpanding as M, RowPagination as v, RowPinning as G, RowSelection as P, RowSorting as $, _getVisibleLeafColumns as A, aggregationFns as H, buildHeaderGroups as V, createCell as j, createColumn as k, createColumnHelper as z, createRow as N, defaultColumnSizing as T, expandRows as U, filterFns as _, flattenBy as B, functionalUpdate as L, getCoreRowModel as q, getExpandedRowModel as D, getFilteredRowModel as I, getMemoOptions as J, getSortedRowModel as K, isFunction as Q, isNumberArray as W, isRowSelected as X, isSubRowSelected as Y, makeStateUpdater as Z, memo as ee, orderColumns as te, passiveEventSupported as ne, reSplitAlphaNumeric as oe, selectRowsFn as re, shouldAutoRemoveFilter as ae, sortingFns as ie } from "../../../table-core/build/lib/index.js";
-/**
-   * react-table
-   *
-   * Copyright (c) TanStack
-   *
-   * This source code is licensed under the MIT license found in the
-   * LICENSE.md file in the root directory of this source tree.
-   *
-   * @license MIT
-   */
 function f(e, t) {
   return e ? s(e) ? /* @__PURE__ */ o.createElement(e, t) : e : null;
 }

package/dist/node_modules/@tanstack/table-core/build/lib/index.js

@@ -1,13 +1,3 @@
-/**
-   * table-core
-   *
-   * Copyright (c) TanStack
-   *
-   * This source code is licensed under the MIT license found in the
-   * LICENSE.md file in the root directory of this source tree.
-   *
-   * @license MIT
-   */
 function ot() {
   return {
     accessor: (e, o) => typeof e == "function" ? {

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.5.0",
+	"version": "7.7.0",
 	"prettier": "@caspeco/prettier-config",
 	"type": "module",
 	"sideEffects": false,
@@ -28,29 +28,29 @@
 	},
 	"devDependencies": {
 		"@arethetypeswrong/cli": "^0.18.2",
-		"@caspeco/eslint-config": "^4.1.1",
+		"@caspeco/eslint-config-react": "^5.0.0",
 		"@caspeco/prettier-config": "^1.0.7",
-		"@eslint/js": "^9.39.0",
+		"@eslint/js": "^9.39.1",
 		"@testing-library/jest-dom": "^6.9.1",
 		"@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.0",
-		"eslint": "^9.39.0",
+		"@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.2",
-		"vite": "^7.1.12",
+		"typescript-eslint": "^8.46.4",
+		"vite": "^7.2.2",
 		"vite-plugin-dts": "^4.5.4",
 		"vite-tsconfig-paths": "^5.1.4",
-		"vitest": "^4.0.6"
+		"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"
 	}
 }