@caspeco/casper-ui-library 0.0.1

package/dist/components/paginator/translations.d.ts

@@ -0,0 +1,34 @@
+export type Locales = "en-US" | "nb-NO" | "da-DK" | "sv-SE" | "en-GB";
+export declare const translations: {
+    "sv-SE": {
+        pageSize: string;
+        currentPage: (pageIndex: number, pageCount: number) => string;
+        previousPage: string;
+        nextPage: string;
+    };
+    "en-US": {
+        pageSize: string;
+        currentPage: (pageIndex: number, pageCount: number) => string;
+        previousPage: string;
+        nextPage: string;
+    };
+    "en-GB": {
+        pageSize: string;
+        currentPage: (pageIndex: number, pageCount: number) => string;
+        previousPage: string;
+        nextPage: string;
+    };
+    "nb-NO": {
+        pageSize: string;
+        currentPage: (pageIndex: number, pageCount: number) => string;
+        previousPage: string;
+        nextPage: string;
+    };
+    "da-DK": {
+        pageSize: string;
+        currentPage: (pageIndex: number, pageCount: number) => string;
+        previousPage: string;
+        nextPage: string;
+    };
+};
+//# sourceMappingURL=translations.d.ts.map

package/dist/components/paginator/translations.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"translations.d.ts","sourceRoot":"","sources":["../../../lib/components/paginator/translations.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,CAAC;AAStE,eAAO,MAAM,YAAY;;;iCAGE,MAAM,aAAa,MAAM;;;;;;iCAR1B,MAAM,aAAa,MAAM;;;;;;iCAAzB,MAAM,aAAa,MAAM;;;;;;iCAgBxB,MAAM,aAAa,MAAM;;;;;;iCAMzB,MAAM,aAAa,MAAM;;;;CAInD,CAAC"}

package/dist/components/paginator/translations.js

@@ -0,0 +1,30 @@
+const i = {
+  pageSize: "Rows per page",
+  currentPage: (e, a) => `Page ${e + 1} of ${a}`,
+  previousPage: "Previous page",
+  nextPage: "Next page"
+}, g = {
+  "sv-SE": {
+    pageSize: "Antal per sida",
+    currentPage: (e, a) => `Sida ${e + 1} av ${a}`,
+    previousPage: "Föregående sida",
+    nextPage: "Nästa sida"
+  },
+  "en-US": i,
+  "en-GB": i,
+  "nb-NO": {
+    pageSize: "Antall per side",
+    currentPage: (e, a) => `Side ${e + 1} av ${a}`,
+    previousPage: "Forrige side",
+    nextPage: "Neste side"
+  },
+  "da-DK": {
+    pageSize: "Antal per side",
+    currentPage: (e, a) => `Side ${e + 1} af ${a}`,
+    previousPage: "Forrige side",
+    nextPage: "Næste side"
+  }
+};
+export {
+  g as translations
+};

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

@@ -0,0 +1,3 @@
+export { QuantityButton } from './quantity-button.js';
+export type { QuantityButtonProps } from './types.js';
+//# sourceMappingURL=index.d.ts.map

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

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

package/dist/components/quantity-button/minus-button.d.ts

@@ -0,0 +1,9 @@
+type MinusButtonProps = {
+    ariaLabel: string;
+    buttonSize: "lg" | "sm" | "md";
+    onClick: () => void;
+    isDisabled: boolean;
+};
+export declare function MinusButton({ buttonSize, ariaLabel, onClick, isDisabled }: MinusButtonProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=minus-button.d.ts.map

package/dist/components/quantity-button/minus-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"minus-button.d.ts","sourceRoot":"","sources":["../../../lib/components/quantity-button/minus-button.tsx"],"names":[],"mappings":"AAGA,KAAK,gBAAgB,GAAG;IACvB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC/B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,UAAU,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,wBAAgB,WAAW,CAAC,EAAE,UAAU,EAAE,SAAS,EAAE,OAAO,EAAE,UAAU,EAAE,EAAE,gBAAgB,2CAW3F"}

package/dist/components/quantity-button/minus-button.js

@@ -0,0 +1,19 @@
+import { jsx as i } from "react/jsx-runtime";
+import { IconButton as e } from "../icon-button/icon-button.js";
+import { Icons as a } from "../icon/types.js";
+function u({ buttonSize: o, ariaLabel: r, onClick: t, isDisabled: n }) {
+  return /* @__PURE__ */ i(
+    e,
+    {
+      variant: "ghost",
+      icon: a.Decrease,
+      "aria-label": r,
+      size: o,
+      onClick: t,
+      isDisabled: n
+    }
+  );
+}
+export {
+  u as MinusButton
+};

package/dist/components/quantity-button/plus-button.d.ts

@@ -0,0 +1,9 @@
+type PlusButtonProps = {
+    isDisabled: boolean;
+    ariaLabel: string;
+    buttonSize: "lg" | "sm" | "md";
+    onClick: () => void;
+};
+export declare function PlusButton({ ariaLabel, buttonSize, onClick, isDisabled }: PlusButtonProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=plus-button.d.ts.map

package/dist/components/quantity-button/plus-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"plus-button.d.ts","sourceRoot":"","sources":["../../../lib/components/quantity-button/plus-button.tsx"],"names":[],"mappings":"AAGA,KAAK,eAAe,GAAG;IACtB,UAAU,EAAE,OAAO,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC/B,OAAO,EAAE,MAAM,IAAI,CAAC;CACpB,CAAC;AAEF,wBAAgB,UAAU,CAAC,EAAE,SAAS,EAAE,UAAU,EAAE,OAAO,EAAE,UAAU,EAAE,EAAE,eAAe,2CAWzF"}

package/dist/components/quantity-button/plus-button.js

@@ -0,0 +1,19 @@
+import { jsx as i } from "react/jsx-runtime";
+import { IconButton as a } from "../icon-button/icon-button.js";
+import { Icons as e } from "../icon/types.js";
+function u({ ariaLabel: o, buttonSize: r, onClick: t, isDisabled: n }) {
+  return /* @__PURE__ */ i(
+    a,
+    {
+      variant: "ghost",
+      icon: e.Increase,
+      "aria-label": o,
+      size: r,
+      onClick: t,
+      isDisabled: n
+    }
+  );
+}
+export {
+  u as PlusButton
+};

package/dist/components/quantity-button/quantity-button.composition.d.ts

@@ -0,0 +1,4 @@
+export declare const SmallSize: () => import("react/jsx-runtime").JSX.Element;
+export declare const LargeSize: () => import("react/jsx-runtime").JSX.Element;
+export declare const UseCaseExample: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=quantity-button.composition.d.ts.map

package/dist/components/quantity-button/quantity-button.composition.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"quantity-button.composition.d.ts","sourceRoot":"","sources":["../../../lib/components/quantity-button/quantity-button.composition.tsx"],"names":[],"mappings":"AAWA,eAAO,MAAM,SAAS,+CAiBrB,CAAC;AAEF,eAAO,MAAM,SAAS,+CAiBrB,CAAC;AAEF,eAAO,MAAM,cAAc,+CA8C1B,CAAC"}

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

@@ -0,0 +1,3 @@
+import { QuantityButtonProps } from './types.js';
+export declare function QuantityButton({ size, quantity, onClickPlus, onClickMinus, minusButtonAriaLabel, plusButtonAriaLabel, min, max, disabled, ...props }: QuantityButtonProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=quantity-button.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"quantity-button.d.ts","sourceRoot":"","sources":["../../../lib/components/quantity-button/quantity-button.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAInD,wBAAgB,cAAc,CAAC,EAC9B,IAAW,EACX,QAAY,EACZ,WAAW,EACX,YAAY,EACZ,oBAAiC,EACjC,mBAAgC,EAChC,GAAO,EACP,GAAQ,EACR,QAAgB,EAChB,GAAG,KAAK,EACR,EAAE,mBAAmB,2CAyDrB"}

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

@@ -0,0 +1,77 @@
+import { jsx as e, jsxs as x } from "react/jsx-runtime";
+import { Flex as i, Box as S, Text as B } from "@chakra-ui/react";
+import { MinusButton as z } from "./minus-button.js";
+import { PlusButton as L } from "./plus-button.js";
+import { ThemeFontSizeVariable as s, ThemeColorVariable as t, ThemeRadiusVariable as T, ThemeBorderVariable as C, ThemeFontVariable as V } from "../../theme/theme-types.js";
+function X({
+  size: c = "sm",
+  quantity: r = 0,
+  onClickPlus: m,
+  onClickMinus: d,
+  minusButtonAriaLabel: u = "decrease",
+  plusButtonAriaLabel: b = "increase",
+  min: f = 0,
+  max: h = 99,
+  disabled: a = !1,
+  ...p
+}) {
+  const o = c === "lg", n = o ? "160px" : "120px", l = o ? "lg" : "md", g = o ? s.XLarge : s.Large;
+  return /* @__PURE__ */ e(i, { w: n, ...p, children: /* @__PURE__ */ e(
+    S,
+    {
+      border: C.XSmall,
+      borderColor: t.OnBackgroundBorder,
+      borderRadius: T.XLarge,
+      backgroundColor: t.Surface,
+      opacity: 0.88,
+      children: /* @__PURE__ */ x(i, { justify: "space-between", position: "relative", zIndex: 1, w: n, children: [
+        /* @__PURE__ */ e(
+          z,
+          {
+            onClick: d,
+            ariaLabel: u,
+            buttonSize: l,
+            isDisabled: r <= f || a
+          }
+        ),
+        /* @__PURE__ */ e(
+          i,
+          {
+            justify: "center",
+            align: "center",
+            userSelect: "none",
+            zIndex: -1,
+            left: "0",
+            right: "0",
+            ml: "auto",
+            mr: "auto",
+            position: "absolute",
+            h: "100%",
+            children: /* @__PURE__ */ e(
+              B,
+              {
+                fontFamily: V.SubHeader,
+                fontWeight: "normal",
+                fontSize: g,
+                color: t.OnSurface,
+                children: r
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ e(
+          L,
+          {
+            isDisabled: r >= h || a,
+            onClick: m,
+            ariaLabel: b,
+            buttonSize: l
+          }
+        )
+      ] })
+    }
+  ) });
+}
+export {
+  X as QuantityButton
+};

package/dist/components/quantity-button/quantity-button.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=quantity-button.spec.d.ts.map

package/dist/components/quantity-button/quantity-button.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"quantity-button.spec.d.ts","sourceRoot":"","sources":["../../../lib/components/quantity-button/quantity-button.spec.tsx"],"names":[],"mappings":""}

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

@@ -0,0 +1,28 @@
+import { ResponsiveValue } from '@chakra-ui/react';
+import { PaddingProps, LayoutProps, CustomChakraBoxProps, MarginProps, ShadowProps } from '../../theme/index.js';
+type CustomThemeProps = PaddingProps & MarginProps & LayoutProps & ShadowProps & CustomChakraBoxProps;
+type CustomThemePropsWithExclusions = Omit<CustomThemeProps, "justify" | "justifyContent" | "zIndex">;
+export type QuantityButtonProps = {
+    /** Function to be called when plus button is clicked. */
+    onClickPlus: () => void;
+    /** Function to be called when minus button is clicked. */
+    onClickMinus: () => void;
+    /** Quantity to display. 0 is not shown . */
+    quantity?: number;
+    /** Min number for quantity. Defaults to 0.
+     * When quantity equals min, the minus button will be disabled. */
+    min?: number;
+    /** Max number for quantity. Defaults to 99.
+     * When quantity equals max, the plus button will be disabled. */
+    max?: number;
+    /** The size of the component, default is small ('sm') */
+    size?: ResponsiveValue<"lg" | "sm"> | undefined;
+    /** Aria label for icon with plus icon. Defaults to "increase" */
+    plusButtonAriaLabel?: string;
+    /** Aria label for icon with minus icon. Defaults to "decrease" */
+    minusButtonAriaLabel?: string;
+    /** Disables plus and minus button */
+    disabled?: boolean;
+} & CustomThemePropsWithExclusions;
+export {};
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../lib/components/quantity-button/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACxD,OAAO,KAAK,EAAE,YAAY,EAAE,WAAW,EAAE,oBAAoB,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAEzG,KAAK,gBAAgB,GAAG,YAAY,GAAG,WAAW,GAAG,WAAW,GAAG,WAAW,GAAG,oBAAoB,CAAC;AAEtG,KAAK,8BAA8B,GAAG,IAAI,CACzC,gBAAgB,EAEhB,SAAS,GAAG,gBAAgB,GAAG,QAAQ,CACvC,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IACjC,yDAAyD;IACzD,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,0DAA0D;IAC1D,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;sEACkE;IAClE,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;qEACiE;IACjE,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,yDAAyD;IACzD,IAAI,CAAC,EAAE,eAAe,CAAC,IAAI,GAAG,IAAI,CAAC,GAAG,SAAS,CAAC;IAChD,iEAAiE;IACjE,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,kEAAkE;IAClE,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB,GAAG,8BAA8B,CAAC"}

package/dist/components/radio/check-icon.d.ts

@@ -0,0 +1,3 @@
+import { ComponentWithAs, IconProps } from '@chakra-ui/react';
+export declare const CheckIcon: ComponentWithAs<"svg", IconProps>;
+//# sourceMappingURL=check-icon.d.ts.map

package/dist/components/radio/check-icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"check-icon.d.ts","sourceRoot":"","sources":["../../../lib/components/radio/check-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,eAAe,EAAc,KAAK,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAEpF,eAAO,MAAM,SAAS,EAAE,eAAe,CAAC,KAAK,EAAE,SAAS,CAItD,CAAC"}

package/dist/components/radio/check-icon.js

@@ -0,0 +1,9 @@
+import { createIcon as o } from "@chakra-ui/react";
+const e = o({
+  displayName: "RadioCheckIcon",
+  viewBox: "0 0 24 24",
+  d: "M20.4375 6.52344C20.8281 6.91406 20.8281 7.5 20.4375 7.85156L10.125 18.1641C9.77344 18.5547 9.1875 18.5547 8.83594 18.1641L3.52344 12.8516C3.13281 12.5 3.13281 11.9141 3.52344 11.5234C3.875 11.1719 4.46094 11.1719 4.8125 11.5234L9.5 16.2109L19.1484 6.52344C19.5 6.17188 20.0859 6.17188 20.4375 6.52344Z"
+});
+export {
+  e as CheckIcon
+};

package/dist/components/radio/hover-styles.d.ts

@@ -0,0 +1,10 @@
+import { SystemStyleObject } from '@chakra-ui/react';
+/**
+ * Custom Style Object only for Radio hover styles.
+ *
+ * Applied here rather than in theme (radio-theme.ts) to enable a set of more advanced hover styles,
+ * covering the many different states of the radio-component.
+ */
+export declare const hoverStyles: SystemStyleObject;
+export declare const hoverStylesCard: SystemStyleObject;
+//# sourceMappingURL=hover-styles.d.ts.map

package/dist/components/radio/hover-styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hover-styles.d.ts","sourceRoot":"","sources":["../../../lib/components/radio/hover-styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAS1D;;;;;GAKG;AACH,eAAO,MAAM,WAAW,EAAE,iBAgCzB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,iBA+B7B,CAAC"}

package/dist/components/radio/hover-styles.js

@@ -0,0 +1,69 @@
+import "@chakra-ui/react";
+import { ThemeColorVariable as o } from "../../theme/theme-types.js";
+const r = "label[data-checked]:not(:active):not([data-disabled]):hover", e = "label:not([data-checked]):not(:active):not([data-disabled]):not([data-invalid]):hover", a = "label[data-invalid]:not([data-checked]):hover", l = {
+  // Target only device that supports hover (excludes thouch screen devices):
+  "@media(hover: hover)": {
+    // General cursor styles
+    "label:not([data-disabled]):hover": {
+      cursor: "pointer"
+    },
+    "label[data-disabled]:hover": {
+      cursor: "not-allowed"
+    },
+    // Specifc state hover styles
+    [r]: {
+      ".chakra-radio__control": {
+        bg: o.AccentHover,
+        borderColor: o.AccentHover,
+        color: o.OnAccent
+      }
+    },
+    [e]: {
+      ".chakra-radio__control": {
+        borderColor: o.AccentHover,
+        color: o.OnSurface
+      }
+    },
+    [a]: {
+      ".chakra-radio__control": {
+        color: o.ErrorHover,
+        borderColor: o.ErrorHover
+      }
+    }
+  }
+}, d = {
+  // Target only device that supports hover (excludes thouch screen devices):
+  "@media(hover: hover)": {
+    // General cursor styles
+    "label:not([data-disabled]):hover": {
+      cursor: "pointer"
+    },
+    "label[data-disabled]:hover": {
+      cursor: "not-allowed"
+    },
+    // Specifc state hover styles
+    [r]: {
+      ".chakra-radio__control": {
+        bg: o.AccentHover,
+        borderColor: o.AccentHover,
+        color: o.OnAccent
+      }
+    },
+    [e]: {
+      ".chakra-radio__control": {
+        color: o.OnSurface,
+        background: o.AccentHoverAlpha
+      }
+    },
+    [a]: {
+      ".chakra-radio__control": {
+        color: o.ErrorHover,
+        borderColor: o.ErrorHover
+      }
+    }
+  }
+};
+export {
+  l as hoverStyles,
+  d as hoverStylesCard
+};

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

@@ -0,0 +1,7 @@
+export { Radio } from './radio.js';
+export { RadioCard } from './radio-card.js';
+export { RadioAddon } from './radio-addon.js';
+export type { RadioAddonProps } from './radio-addon.js';
+export type { RadioCardProps } from './radio-card.js';
+export type { RadioProps } from './radio.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/components/radio/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C,YAAY,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AACrD,YAAY,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AACnD,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC"}

package/dist/components/radio/radio-addon.d.ts

@@ -0,0 +1,15 @@
+import { ThemeStyleProps } from '../../theme/index.js';
+import { BoxProps, UseRadioProps } from '@chakra-ui/react';
+import { default as React } from 'react';
+type CustomProperties = Pick<BoxProps, "children">;
+export type RadioAddonProps = CustomProperties & UseRadioProps & ThemeStyleProps;
+/**
+ * Custom Radio input that appears with a checkmark-icon when in "isChecked"-state.
+ * Internally uses Chakras useRadio-hook to provide the elements within with the
+ * props required for it to work as a real radio, compatible with FormControl etc.
+ *
+ * @see Docs https://bit.cloud/caspeco/casper-ui-library/components/radio
+ */
+export declare const RadioAddon: React.ForwardRefExoticComponent<CustomProperties & UseRadioProps & ThemeStyleProps & React.RefAttributes<HTMLInputElement>>;
+export {};
+//# sourceMappingURL=radio-addon.d.ts.map

package/dist/components/radio/radio-addon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-addon.d.ts","sourceRoot":"","sources":["../../../lib/components/radio/radio-addon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAON,KAAK,eAAe,EACpB,MAAM,SAAS,CAAC;AACjB,OAAO,EAAO,KAAK,QAAQ,EAAkB,KAAK,aAAa,EAAU,MAAM,kBAAkB,CAAC;AAClG,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,KAAK,gBAAgB,GAAG,IAAI,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC;AAEnD,MAAM,MAAM,eAAe,GAAG,gBAAgB,GAAG,aAAa,GAAG,eAAe,CAAC;AAEjF;;;;;;GAMG;AACH,eAAO,MAAM,UAAU,6HAwHtB,CAAC"}

package/dist/components/radio/radio-addon.js

@@ -0,0 +1,125 @@
+import { jsx as o, jsxs as y } from "react/jsx-runtime";
+import { useRadio as I, Box as c, chakra as j, Icon as z } from "@chakra-ui/react";
+import E from "react";
+import { CheckIcon as F } from "./check-icon.js";
+import { hoverStyles as L } from "./hover-styles.js";
+import { ThemeFontSizeVariable as H, ThemeFontVariable as M, ThemeColorVariable as r, ThemeSpaceVariable as N, ThemeBorderVariable as n, ThemeRadiusVariable as W } from "../../theme/theme-types.js";
+const Q = E.forwardRef(
+  ({
+    id: t,
+    name: l,
+    value: d,
+    isChecked: e,
+    isFocusable: i,
+    isReadOnly: s,
+    isDisabled: b,
+    isInvalid: p,
+    isRequired: m,
+    onChange: h,
+    defaultChecked: u,
+    children: x,
+    justifyContent: f = "flex-start",
+    alignItems: _ = "center",
+    gap: g = N.Small,
+    color: A = r.OnSurface,
+    fontSize: C = H.Medium,
+    fontFamily: k = M.Body,
+    cursor: S = "pointer",
+    display: w = "flex",
+    ...a
+  }, P) => {
+    const { getInputProps: R, getRadioProps: B, htmlProps: O, getLabelProps: T } = I({
+      id: t,
+      name: l,
+      value: d,
+      isChecked: e,
+      defaultChecked: u,
+      isDisabled: b,
+      isFocusable: i,
+      isReadOnly: s,
+      isInvalid: p,
+      isRequired: m,
+      onChange: h,
+      ...a
+    }), V = T(), $ = R(), v = B();
+    return /* @__PURE__ */ o(c, { as: "span", __css: L, children: /* @__PURE__ */ y(
+      j.label,
+      {
+        ...V,
+        ...O,
+        ...a,
+        justifyContent: f,
+        alignItems: _,
+        gap: g,
+        color: A,
+        cursor: S,
+        display: w,
+        fontFamily: k,
+        fontSize: C,
+        _disabled: {
+          cursor: "not-allowed"
+        },
+        children: [
+          /* @__PURE__ */ o("input", { ...$, ref: P }),
+          /* @__PURE__ */ o(
+            c,
+            {
+              cursor: "pointer",
+              border: n.Small,
+              borderRadius: W.XLarge,
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center",
+              "flex-wrap": "wrap",
+              width: "40px",
+              height: "40px",
+              minW: "40px",
+              minH: "40px",
+              borderColor: r.OnBackground,
+              className: "chakra-radio__control",
+              _disabled: {
+                color: r.OnAccent,
+                borderColor: r.OnBackground,
+                cursor: "not-allowed",
+                bg: "transparent",
+                opacity: 0.48
+              },
+              _checked: {
+                bg: r.Accent,
+                borderColor: r.Accent,
+                _disabled: {
+                  bg: r.Accent,
+                  borderColor: r.Accent
+                }
+              },
+              _invalid: {
+                border: n.Small,
+                borderColor: r.Error,
+                boxShadow: `0 0 0 4px ${r.ErrorContainer}`
+              },
+              _active: {
+                borderColor: `${r.AccentActive}`,
+                _checked: {
+                  background: `${r.AccentActive}`
+                },
+                _disabled: {
+                  borderColor: `${r.OnBackground}`,
+                  _checked: {
+                    background: `${r.Accent}`,
+                    borderColor: `${r.Accent}`
+                  }
+                }
+              },
+              ...v,
+              children: e ? /* @__PURE__ */ o(z, { as: F, color: r.OnAccent, boxSize: "24px" }) : null
+            }
+          ),
+          x
+        ]
+      }
+    ) });
+  }
+);
+export {
+  Q as RadioAddon
+};

package/dist/components/radio/radio-card.d.ts

@@ -0,0 +1,15 @@
+import { CustomChakraBoxProps, PaddingProps, MarginProps, LayoutProps } from '../../theme/index.js';
+import { BoxProps, UseRadioProps } from '@chakra-ui/react';
+import { default as React } from 'react';
+type CustomProperties = Pick<BoxProps, "children">;
+export type RadioCardProps = CustomProperties & UseRadioProps & CustomChakraBoxProps & LayoutProps & MarginProps & PaddingProps;
+/**
+ * Custom Radio input that appears as a colored button when in "isChecked"-state.
+ * Internally uses Chakras useRadio-hook to provide the elements within with the
+ * props required for it to work as a real radio, compatible with FormControl etc.
+ *
+ * @see Docs https://bit.cloud/caspeco/casper-ui-library/components/radio
+ */
+export declare const RadioCard: React.ForwardRefExoticComponent<CustomProperties & UseRadioProps & CustomChakraBoxProps & LayoutProps & MarginProps & PaddingProps & React.RefAttributes<HTMLInputElement>>;
+export {};
+//# sourceMappingURL=radio-card.d.ts.map

package/dist/components/radio/radio-card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-card.d.ts","sourceRoot":"","sources":["../../../lib/components/radio/radio-card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAON,KAAK,oBAAoB,EACzB,KAAK,YAAY,EACjB,KAAK,WAAW,EAChB,KAAK,WAAW,EAChB,MAAM,SAAS,CAAC;AACjB,OAAO,EAAO,KAAK,QAAQ,EAAoB,KAAK,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAC5F,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,KAAK,gBAAgB,GAAG,IAAI,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC;AAEnD,MAAM,MAAM,cAAc,GAAG,gBAAgB,GAC5C,aAAa,GACb,oBAAoB,GACpB,WAAW,GACX,WAAW,GACX,YAAY,CAAC;AAEd;;;;;;GAMG;AACH,eAAO,MAAM,SAAS,6KA+FrB,CAAC"}