@caspeco/casper-ui-library 8.4.0 → 9.0.0-alpha.0

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

@@ -0,0 +1,274 @@
+import { isTouchScreenDevice as n } from "../../theme/theme-helper.js";
+import { ThemeSpaceToken as o, ThemeFontSizeToken as r, ThemeColorToken as e, ThemeRadiusToken as i, ThemeFontToken as a, ThemeBorderToken as d } from "../../theme/theme-tokens.js";
+import { defineRecipe as l } from "@chakra-ui/react";
+const g = {
+  fontFamily: a.SubHeader,
+  borderRadius: i.XLarge,
+  border: d.XSmall + " transparent",
+  fontWeight: "medium",
+  cursor: "pointer",
+  WebkitTapHighlightColor: "transparent",
+  _disabled: {
+    cursor: "not-allowed",
+    opacity: 0.48
+  },
+  // _open styling is applied when the button is used as a menu trigger and the menu is open.
+  _open: {
+    color: e.OnAccent,
+    background: e.AccentActive
+  }
+}, u = {
+  background: e.Accent,
+  color: e.OnAccent,
+  _hover: {
+    "&:not(:active, [data-state=open])": {
+      background: n() ? e.Accent : e.AccentHover
+    }
+  },
+  _active: {
+    background: e.AccentActive,
+    color: e.OnAccent
+  },
+  _open: {
+    background: e.AccentActive,
+    color: e.OnAccent
+  }
+}, A = {
+  background: e.AccentContainer,
+  color: e.OnAccentContainer,
+  _hover: {
+    "&:not(:active, [data-state=open])": {
+      background: n() ? e.AccentContainer : e.AccentHover,
+      color: n() ? e.OnAccentContainer : e.OnAccent
+    }
+  },
+  _active: {
+    background: e.AccentActive,
+    color: e.OnAccent
+  },
+  _open: {
+    background: e.AccentActive,
+    color: e.OnAccent
+  }
+}, p = {
+  color: e.OnBackground,
+  fontWeight: "medium",
+  _hover: {
+    "&:not(:active, [data-state=open])": {
+      color: e.OnBackground,
+      bg: n() ? "none" : e.AccentHoverAlpha,
+      textDecoration: "none"
+    }
+  },
+  _active: {
+    bg: e.AccentActiveAlpha,
+    color: e.OnBackground
+  },
+  _open: {
+    bg: e.AccentActiveAlpha,
+    color: e.OnBackground
+  }
+}, b = {
+  background: e.Error,
+  color: e.OnAccent,
+  _hover: {
+    "&:not(:active, [data-state=open])": {
+      background: n() ? e.Error : e.ErrorHover
+    }
+  },
+  _active: {
+    background: e.ErrorActive,
+    color: e.OnAccent
+  },
+  _open: {
+    background: e.ErrorActive,
+    color: e.OnAccent
+  }
+}, v = {
+  color: e.OnBackground,
+  fontFamily: a.Body,
+  borderRadius: 0,
+  fontWeight: "normal",
+  background: "transparent",
+  textDecorationLine: "underline",
+  lineHeight: "normal",
+  textUnderlineOffset: "3px",
+  width: "fit-content",
+  height: "auto",
+  px: 0,
+  border: 0,
+  _hover: {
+    "&:not(:active, [data-state=open])": {
+      color: n() ? e.OnBackground : e.AccentHover
+    }
+  },
+  _active: {
+    color: e.AccentActive,
+    background: "transparent"
+  },
+  _disabled: {
+    textDecoration: "none"
+  }
+}, s = {
+  flex: "1",
+  fontWeight: "normal",
+  font: a.Body,
+  bg: e.AccentContainer,
+  color: e.OnAccentContainer,
+  borderRadius: "2px",
+  _hover: {
+    textDecoration: "underline"
+  },
+  // [data-active] is the controlled 'isActive'-state of SegmentedControl
+  "&[data-active]": {
+    bg: e.Surface,
+    color: e.OnSurface,
+    fontWeight: "medium"
+  },
+  // Native :active selctor, seen when button is in pressed state
+  "&:active": {
+    bg: e.AccentHoverAlpha,
+    color: e.OnAccentContainer,
+    _disabled: {
+      bg: e.AccentContainer,
+      color: e.OnAccentContainer
+    },
+    "&[data-active]": {
+      bg: e.Surface,
+      color: e.OnSurface,
+      fontWeight: "medium",
+      _disabled: {
+        bg: e.Surface,
+        color: e.OnSurface
+      }
+    }
+  }
+}, h = {
+  background: "transparent",
+  color: e.OnBackground,
+  borderColor: e.OnBackgroundBorder,
+  _hover: {
+    "&:not(:active, [data-state=open])": {
+      borderColor: "transparent",
+      color: e.OnBackground,
+      background: e.AccentHoverAlpha
+    }
+  },
+  _active: {
+    borderColor: "transparent",
+    background: e.AccentActiveAlpha,
+    color: e.OnBackground
+  },
+  _open: {
+    borderColor: "transparent",
+    background: e.AccentActiveAlpha,
+    color: e.OnBackground
+  }
+}, c = '&[aria-pressed="true"]', t = '&[aria-pressed="false"]', k = {
+  // Base style
+  borderRadius: i.Small,
+  borderColor: e.OnSurfaceBorder,
+  paddingX: o.Small,
+  // Pressed state
+  [`${c}`]: {
+    background: e.Accent,
+    color: e.OnAccent
+  },
+  // Not pressed state
+  [`${t}`]: {
+    background: e.Surface,
+    color: e.OnSurface
+  },
+  // Hover styles
+  "@media(hover: hover)": {
+    [`${c}&:hover`]: {
+      background: e.AccentHover,
+      borderColor: e.AccentHover,
+      _disabled: {
+        background: e.Accent,
+        borderColor: e.Accent
+      }
+    },
+    [`${t}&:hover`]: {
+      background: e.AccentHoverAlpha,
+      color: e.OnSurface,
+      _disabled: {
+        background: e.Surface,
+        color: e.OnSurface
+      }
+    }
+  },
+  // Active styles
+  [`${c}:active`]: {
+    color: e.OnAccent,
+    background: e.AccentActive
+  },
+  [`${t}:active`]: {
+    color: e.OnSurface,
+    background: e.AccentActiveAlpha
+  },
+  // Define general disabled styles last to ensure they are not overridden
+  [`${c}:disabled`]: {
+    color: e.OnAccent,
+    background: e.Accent,
+    borderColor: e.Accent
+  },
+  [`${t}:disabled`]: {
+    color: e.OnSurface,
+    background: e.Surface
+  }
+}, f = l({
+  base: g,
+  variants: {
+    variant: {
+      primary: u,
+      secondary: A,
+      ghost: p,
+      link: v,
+      segmentedControl: s,
+      tertiary: h,
+      toggle: k,
+      alert: b
+    },
+    size: {
+      xl: {
+        paddingX: "24px",
+        height: "56px",
+        minWidth: "56px",
+        fontSize: r.Large,
+        gap: o.Small
+      },
+      lg: {
+        paddingX: "16px",
+        height: "48px",
+        minWidth: "48px",
+        fontSize: r.Medium,
+        gap: o.Small
+      },
+      md: {
+        paddingX: "16px",
+        height: "40px",
+        minWidth: "40px",
+        fontSize: r.Medium,
+        gap: o.Small
+      },
+      sm: {
+        paddingX: "8px",
+        height: "32px",
+        minWidth: "32px",
+        fontSize: r.Small,
+        gap: o.Small
+      },
+      xs: {
+        paddingX: "8px",
+        height: "24px",
+        minWidth: "24px",
+        fontSize: r.Small,
+        gap: o.Small
+      }
+    }
+  }
+});
+export {
+  f as buttonRecipe
+};

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

@@ -1,5 +1,5 @@
-import { ComponentWithAs } from '@chakra-ui/react';
-import { ButtonProps } from './types.js';
+import { ConditionalValue } from '@chakra-ui/react';
+import { ButtonSize } from './types.js';
 /**
  * Button component is used to trigger an action or event,
  * such as submitting a form, opening a Dialog, canceling an action, or performing a delete operation.
@@ -7,5 +7,12 @@ import { ButtonProps } from './types.js';
  * @see Docs https://caspeco.github.io/casper-ui-library/components/button
  * @see WAI-ARIA https://www.w3.org/WAI/ARIA/apg/patterns/button
  */
-export declare const Button: ComponentWithAs<"button", ButtonProps>;
+export declare const Button: import('react').ForwardRefExoticComponent<import('../../theme/index.js').CustomChakraBoxProps & import('../../theme/index.js').LayoutProps & import('../../theme/index.js').MarginProps & import('../../theme/index.js').PaddingProps & Pick<import('@chakra-ui/react').LinkProps, "rel" | "target" | "href"> & Pick<import('@chakra-ui/react').ButtonProps, "children" | "onClick" | "type" | "loadingText"> & {
+    variant?: "primary" | "secondary" | "link" | "ghost" | "tertiary" | "segmentedControl" | "alert";
+    size?: ConditionalValue<ButtonSize>;
+    leftIcon?: import('../icon/index.js').CasperIconComponent;
+    rightIcon?: import('../icon/index.js').CasperIconComponent;
+    isDisabled?: boolean;
+    isLoading?: boolean;
+} & import('react').RefAttributes<HTMLButtonElement>>;
 //# sourceMappingURL=button.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../lib/components/button/button.tsx"],"names":[],"mappings":"AACA,OAAO,EAAsC,KAAK,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAG5F,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C;;;;;;GAMG;AAGH,eAAO,MAAM,MAAM,EAqCb,eAAe,CAAC,QAAQ,EAAE,WAAW,CAAC,CAAC"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../lib/components/button/button.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,gBAAgB,EAA0B,MAAM,kBAAkB,CAAC;AAEjF,OAAO,KAAK,EAAe,UAAU,EAAE,MAAM,SAAS,CAAC;AAwBvD;;;;;;GAMG;AACH,eAAO,MAAM,MAAM;;;;;;;qDAiCjB,CAAC"}

package/dist/components/button/button.js

@@ -1,38 +1,47 @@
-import { jsx as o } from "react/jsx-runtime";
-import { forwardRef as I, Button as z } from "@chakra-ui/react";
-import { useMemo as u } from "react";
-import { getIconSizeFromButtonSize as h } from "./helper.js";
-import { Icon as n } from "../icon/icon.js";
-const S = I((c, s) => {
-  const { children: m, variant: a = "secondary", size: i = "md", href: d, isSelected: f, leftIcon: t, rightIcon: e } = c, r = u(() => h(i), [i]);
-  return d ? /* @__PURE__ */ o(
-    z,
-    {
-      as: "a",
-      href: d,
-      size: i,
-      variant: a,
-      ...c,
-      ref: s,
-      "aria-pressed": f,
-      leftIcon: t ? /* @__PURE__ */ o(n, { size: r, icon: t }) : void 0,
-      rightIcon: e ? /* @__PURE__ */ o(n, { size: r, icon: e }) : void 0,
-      children: m
-    }
-  ) : /* @__PURE__ */ o(
-    z,
+import { jsxs as I, jsx as s } from "react/jsx-runtime";
+import { Button as S } from "@chakra-ui/react";
+import { forwardRef as g, useMemo as j } from "react";
+import { ThemeIconSizeVariable as n } from "../../theme/theme-types.js";
+const d = {
+  xl: n.Medium,
+  lg: n.Medium,
+  md: n.Medium,
+  sm: n.Small,
+  xs: n.Small
+};
+function f(o) {
+  return Array.isArray(o) ? o.map((t) => t && d[t]) : o !== null && typeof o == "object" ? Object.fromEntries(Object.entries(o).map(([t, e]) => [t, f(e)])) : d[o];
+}
+const v = g((o, t) => {
+  const {
+    children: e,
+    variant: l = "secondary",
+    size: r = "md",
+    href: i,
+    isLoading: u,
+    isDisabled: p,
+    leftIcon: b,
+    rightIcon: h
+  } = o, m = j(() => f(r), [r]), a = b, c = h;
+  return /* @__PURE__ */ I(
+    S,
     {
-      size: i,
-      variant: a,
-      ref: s,
-      ...c,
-      "aria-pressed": f,
-      leftIcon: t ? /* @__PURE__ */ o(n, { size: r, icon: t }) : void 0,
-      rightIcon: e ? /* @__PURE__ */ o(n, { size: r, icon: e }) : void 0,
-      children: m
+      as: i ? "a" : void 0,
+      href: i || void 0,
+      size: r,
+      variant: l,
+      ref: t,
+      disabled: p,
+      loading: u,
+      ...o,
+      children: [
+        a && /* @__PURE__ */ s(a, { size: m }),
+        e,
+        c && /* @__PURE__ */ s(c, { size: m })
+      ]
     }
   );
 });
 export {
-  S as Button
+  v as Button
 };

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

@@ -1,3 +1,3 @@
 export { Button } from './button.js';
-export type { ButtonProps } from './types.js';
+export type { ButtonProps, ButtonSize } from './types.js';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/components/button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/components/button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC"}

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

@@ -1,26 +1,22 @@
-import { Icons } from '../icon/index.js';
+import { CasperIconComponent } 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';
+import { ButtonProps as ChakraButtonProps, LinkProps as ChakraLinkProps, ConditionalValue } 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"> & {
+export type ButtonProps = CustomChakraBoxProps & LayoutProps & MarginProps & PaddingProps & Pick<ChakraLinkProps, "href" | "target" | "rel"> & Pick<ChakraButtonProps, "children" | "onClick" | "type" | "loadingText"> & {
     /**
      * Appearance variant for Button.
      * @note The 'segmentedControl' variant is only used by the SegmentedControl component.
-     * @note The 'card' variant is deprecated, use the component ToggleButton instead.
      */
-    variant?: ResponsiveValue<"primary" | "secondary" | "link" | "ghost" | "tertiary" | "segmentedControl" | "card" | "alert"> | undefined;
+    variant?: "primary" | "secondary" | "link" | "ghost" | "tertiary" | "segmentedControl" | "alert";
     /**
      * 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).
-     */
-    isSelected?: boolean | undefined;
+    size?: ConditionalValue<ButtonSize>;
     /** Adds a icon to the left of the button text */
-    leftIcon?: Icons;
+    leftIcon?: CasperIconComponent;
     /** Adds a icon to right of the button text */
-    rightIcon?: Icons;
+    rightIcon?: CasperIconComponent;
+    isDisabled?: boolean;
+    isLoading?: boolean;
 };
 //# sourceMappingURL=types.d.ts.map

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,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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../lib/components/button/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAC7D,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,gBAAgB,EACrB,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,SAAS,GAAG,MAAM,GAAG,aAAa,CAAC,GAAG;IAC1E;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,kBAAkB,GAAG,OAAO,CAAC;IAEjG;;OAEG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IAEpC,iDAAiD;IACjD,QAAQ,CAAC,EAAE,mBAAmB,CAAC;IAE/B,8CAA8C;IAC9C,SAAS,CAAC,EAAE,mBAAmB,CAAC;IAGhC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC"}

package/dist/components/checkbox/checkbox-icon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox-icon.d.ts","sourceRoot":"","sources":["../../../lib/components/checkbox/checkbox-icon.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAyB7D,UAAU,iBAAiB;IAC1B,OAAO,EAAE,eAAe,CAAC;IACzB,IAAI,EAAE,YAAY,CAAC;IACnB,SAAS,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/B,eAAe,EAAE,OAAO,GAAG,SAAS,CAAC;CACrC;AAED,wBAAgB,YAAY,CAAC,EAC5B,OAAO,EACP,IAAI,EACJ,SAAS,EACT,eAAe,GACf,EAAE,iBAAiB,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CAqBxC"}
+{"version":3,"file":"checkbox-icon.d.ts","sourceRoot":"","sources":["../../../lib/components/checkbox/checkbox-icon.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAyB7D,UAAU,iBAAiB;IAC1B,OAAO,EAAE,eAAe,CAAC;IACzB,IAAI,EAAE,YAAY,CAAC;IACnB,SAAS,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/B,eAAe,EAAE,OAAO,GAAG,SAAS,CAAC;CACrC;AAED,wBAAgB,YAAY,CAAC,EAC5B,OAAO,EACP,IAAI,EACJ,SAAS,EACT,eAAe,GACf,EAAE,iBAAiB,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CAuBxC"}

package/dist/components/checkbox/checkbox-icon.js

@@ -23,7 +23,8 @@ function w({
   isChecked: r,
   isIndeterminate: e
 }) {
-  if (!r && o === "normal" && !e) return null;
+  if (!r && o === "normal" && !e)
+    return null;
   let t;
   const u = p(c, e, r);
   switch (!0) {

package/dist/components/checkbox/checkbox-recipe.d.ts

@@ -0,0 +1,3 @@
+import { SlotRecipeDefinition } from '@chakra-ui/react';
+export declare const checkboxRecipe: SlotRecipeDefinition;
+//# sourceMappingURL=checkbox-recipe.d.ts.map

package/dist/components/checkbox/checkbox-recipe.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-recipe.d.ts","sourceRoot":"","sources":["../../../lib/components/checkbox/checkbox-recipe.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,oBAAoB,EAA4C,MAAM,kBAAkB,CAAC;AA8JvG,eAAO,MAAM,cAAc,EAAE,oBAiE3B,CAAC"}

package/dist/components/checkbox/checkbox-recipe.js

@@ -0,0 +1,205 @@
+import { ThemeFontSizeToken as e, ThemeColorToken as o, ThemeFontToken as n } from "../../theme/theme-tokens.js";
+import { defineSlotRecipe as l } from "@chakra-ui/react";
+import { checkboxAnatomy as a } from "../../node_modules/@ark-ui/react/dist/components/checkbox/checkbox.anatomy.js";
+const d = {
+  m: 0,
+  fontFamily: n.Body,
+  fontSize: e.Medium,
+  color: o.OnSurface,
+  fontWeight: "normal",
+  width: "100%",
+  _disabled: {
+    opacity: 1
+  }
+}, i = "@media(hover: hover)", b = "& .checkbox__control[data-disabled] + .checkbox__label:hover", c = "& .checkbox__control:not([data-disabled])", t = '& .checkbox__control:not([data-disabled])[data-state="checked"]', r = '& .checkbox__control:not([data-disabled])[data-state="indeterminate"]', A = {
+  cursor: "pointer",
+  [b]: {
+    cursor: "not-allowed"
+  },
+  _hover: {
+    "&:not(:active)": {
+      [c]: {
+        borderColor: o.AccentHover,
+        color: o.AccentHover
+      },
+      [t]: {
+        bg: o.AccentHover,
+        color: o.OnAccent
+      },
+      [r]: {
+        borderColor: o.AccentHover,
+        bg: o.AccentHover,
+        color: o.OnAccent
+      }
+    }
+  },
+  _active: {
+    [c]: {
+      borderColor: o.AccentActive,
+      color: o.AccentActive
+    },
+    [t]: {
+      bg: o.AccentActive,
+      borderColor: o.AccentActive,
+      color: o.OnAccent
+    },
+    [r]: {
+      color: o.OnAccent,
+      bg: o.AccentActive,
+      borderColor: o.AccentActive
+    }
+  }
+}, v = '&[data-state="checked"]:not([data-disabled]):hover', s = '&:not([data-state="checked"]):not([data-disabled]):not([data-invalid]):not([data-state="indeterminate"]):hover', h = '&[data-state="indeterminate"]:not([data-invalid]):not([data-disabled]):hover', k = '&[data-invalid]:not([data-state="checked"]):hover', S = "&[data-active]:not([data-disabled])", C = {
+  fontWeight: 900,
+  color: o.OnBackground,
+  borderColor: o.OnBackground,
+  background: "transparent",
+  borderRadius: "4px",
+  borderWidth: "2px",
+  _focusVisible: {
+    outlineColor: o.OnBackground
+  },
+  _disabled: {
+    opacity: 0.48,
+    borderColor: o.OnBackground,
+    background: "transparent"
+  },
+  _checked: {
+    background: o.Accent,
+    borderColor: o.Accent,
+    _disabled: {
+      background: o.Accent,
+      borderColor: o.Accent,
+      color: o.OnAccent
+    }
+  },
+  _invalid: {
+    borderColor: o.Error,
+    boxShadow: `0 0 0 4px ${o.ErrorContainer}`
+  },
+  _indeterminate: {
+    background: o.Accent,
+    borderColor: o.Accent,
+    color: o.OnAccent,
+    _disabled: {
+      borderColor: o.Accent,
+      background: o.Accent
+    }
+  },
+  [i]: {
+    _hover: {
+      cursor: "pointer"
+    },
+    "&[data-disabled]:hover": {
+      cursor: "not-allowed"
+    },
+    [v]: {
+      bg: o.AccentHover,
+      borderColor: o.AccentHover,
+      color: o.OnAccent,
+      _active: {
+        bg: o.AccentActive,
+        borderColor: o.AccentActive,
+        color: o.OnAccent
+      }
+    },
+    [s]: {
+      borderColor: o.AccentHover,
+      color: o.AccentHover,
+      _active: {
+        borderColor: o.AccentActive,
+        color: o.AccentActive
+      }
+    },
+    [h]: {
+      bg: o.AccentHover,
+      borderColor: o.AccentHover,
+      color: o.OnAccent
+    },
+    [k]: {
+      color: o.ErrorHover,
+      borderColor: o.ErrorHover
+    }
+  },
+  [S]: {
+    borderColor: o.AccentActive,
+    color: o.AccentActive,
+    _checked: {
+      background: o.AccentActive,
+      borderColor: o.AccentActive,
+      color: o.OnAccent
+    },
+    _indeterminate: {
+      color: o.OnAccent,
+      bg: o.AccentActive
+    }
+  }
+}, u = l({
+  className: "checkbox",
+  slots: a.keys(),
+  base: {
+    control: C,
+    label: d,
+    root: A
+  },
+  variants: {
+    variant: {
+      normal: {
+        control: {
+          _checked: {
+            bg: o.Accent,
+            color: o.OnAccent
+          }
+        }
+      },
+      addon: {
+        control: {
+          _invalid: {
+            color: o.Error
+          },
+          _checked: {
+            color: o.OnAccent,
+            borderColor: o.Accent,
+            background: o.Accent,
+            _invalid: {
+              color: o.OnAccent
+            }
+          }
+        }
+      }
+    },
+    size: {
+      sm: {
+        control: {
+          width: "20px",
+          height: "20px"
+        },
+        label: {
+          fontSize: e.Small
+        }
+      },
+      md: {
+        control: {
+          width: "24px",
+          height: "24px"
+        },
+        label: {
+          fontSize: e.Medium
+        }
+      },
+      lg: {
+        control: {
+          width: "40px",
+          height: "40px",
+          borderRadius: "full"
+        },
+        label: {
+          fontSize: e.Large
+        }
+      }
+    }
+  }
+});
+export {
+  u as checkboxRecipe
+};

package/dist/components/checkbox/checkbox.d.ts

@@ -1,4 +1,3 @@
-import { default as React } from 'react';
 import { CheckboxProps } from './types.js';
 /**
  * Used in forms when a user needs to select multiple values from several options.
@@ -6,5 +5,5 @@ import { CheckboxProps } from './types.js';
  * @see Docs https://caspeco.github.io/casper-ui-library/components/checkbox
  * @see WAI-ARIA https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/
  */
-export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
+export declare const Checkbox: import('react').ForwardRefExoticComponent<CheckboxProps & import('react').RefAttributes<HTMLInputElement>>;
 //# sourceMappingURL=checkbox.d.ts.map

package/dist/components/checkbox/checkbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../lib/components/checkbox/checkbox.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAE7C;;;;;GAKG;AACH,eAAO,MAAM,QAAQ,wFA2CpB,CAAC"}
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../lib/components/checkbox/checkbox.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAE7C;;;;;GAKG;AACH,eAAO,MAAM,QAAQ,4GAmDnB,CAAC"}