@caspeco/casper-ui-library 0.0.1

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

@@ -0,0 +1,123 @@
+import { accordionAnatomy as u } from "../../../node_modules/@chakra-ui/anatomy/dist/chunk-7OOI6RFH.js";
+import { createMultiStyleConfigHelpers as c, defineStyle as n } from "@chakra-ui/react";
+import { ThemeColorVariable as e, ThemeBorderVariable as a, ThemeSpaceVariable as r, ThemeRadiusVariable as o, ThemeFontSizeVariable as b } from "../../theme-types.js";
+const { definePartsStyle: t, defineMultiStyleConfig: s } = c(u.keys), d = n({
+  width: "100%"
+}), i = n({
+  display: "flex",
+  width: "100%",
+  fontSize: b.Large,
+  fontWeight: "500",
+  py: r.Small,
+  px: r.Medium,
+  "@media(hover: hover)": {
+    _hover: {
+      background: e.SurfaceDisabled
+    }
+  },
+  svg: {
+    pointerEvents: "none"
+  }
+}), l = n({
+  width: "100%",
+  padding: r.Medium,
+  color: e.OnSurface
+}), m = t({
+  button: {
+    color: e.OnSurface,
+    background: e.Surface,
+    borderRadius: o.Medium,
+    justifyContent: "space-between",
+    _expanded: {
+      borderBottom: a.XSmall,
+      borderColor: e.OnSurfaceBorder,
+      borderBottomRadius: o.None
+    },
+    ...i
+  },
+  container: {
+    border: "none"
+  },
+  root: {
+    background: e.Surface,
+    borderRadius: o.Medium,
+    border: a.XSmall,
+    borderColor: e.OnSurfaceBorder,
+    ...d
+  },
+  panel: {
+    ...l
+  }
+}), f = t({
+  button: {
+    ...i,
+    color: e.OnBackground,
+    flexDirection: "row-reverse",
+    justifyContent: "flex-end",
+    gap: r.XSmall,
+    "@media(hover: hover)": {
+      _hover: {
+        background: e.SurfaceDisabled,
+        borderRadius: o.Medium
+      }
+    },
+    _expanded: {
+      borderBottomRadius: o.None
+    }
+  },
+  container: {
+    border: "none"
+  },
+  root: {
+    background: "transparent",
+    // Root has no expanded state on its own, we identify the state via the button
+    ':has(button[aria-expanded="true"])': {
+      borderRadius: o.Medium,
+      border: a.XSmall,
+      borderColor: e.OnSurfaceBorder
+    },
+    ...d
+  },
+  panel: {
+    pt: 0,
+    px: r.Medium,
+    pb: r.Medium,
+    color: e.OnBackground,
+    width: "100%"
+  }
+}), S = t({
+  button: {
+    color: e.OnSurface,
+    background: "transparent",
+    justifyContent: "space-between",
+    ...i
+  },
+  container: {
+    borderTopWidth: 0,
+    borderBottom: a.XSmall,
+    borderBottomColor: e.OnSurfaceBorder,
+    "&:last-child": {
+      borderBottom: "none"
+    }
+  },
+  root: {
+    background: e.Surface,
+    border: "none",
+    ...d
+  },
+  panel: {
+    ...l
+  }
+}), B = s({
+  variants: {
+    border: m,
+    noBorder: f,
+    list: S
+  },
+  defaultProps: {
+    variant: "border"
+  }
+});
+export {
+  B as accordionConfig
+};

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

@@ -0,0 +1,22 @@
+import { SystemStyleInterpolation } from '@chakra-ui/react';
+import { ThemeFontSizeToken } from '../theme-tokens.js';
+export declare const badgeConfig: {
+    baseStyle?: import('@chakra-ui/styled-system').CSSWithMultiValues | undefined;
+    sizes?: {
+        md: {
+            fontSize: ThemeFontSizeToken;
+        };
+        sm: {
+            fontSize: ThemeFontSizeToken;
+        };
+    } | undefined;
+    variants?: {
+        [x: string]: SystemStyleInterpolation;
+    } | undefined;
+    defaultProps?: {
+        size?: "md" | "sm" | undefined;
+        variant?: string | number | undefined;
+        colorScheme?: string | undefined;
+    } | undefined;
+};
+//# sourceMappingURL=badge-theme.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"badge-theme.d.ts","sourceRoot":"","sources":["../../../../lib/theme/theme-config/components/badge-theme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,wBAAwB,EAA6C,MAAM,kBAAkB,CAAC;AAC5G,OAAO,EAEN,kBAAkB,EAIlB,MAAM,iBAAiB,CAAC;AAgDzB,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;CAkBtB,CAAC"}

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

@@ -0,0 +1,52 @@
+import { defineStyleConfig as c } from "@chakra-ui/react";
+import { ThemeFontSizeToken as s, ThemeFontToken as m, ThemeSpaceToken as d, ThemeRadiusToken as S, ThemeColorToken as t } from "../theme-tokens.js";
+const l = ["Primary", "Secondary", "Success", "Error", "Info", "Neutral", "Warning"], f = l.reduce(
+  (n, o) => {
+    const e = n, r = `${o.toLowerCase()}Solid`, a = o, i = `On${o}`;
+    return e[r] = {
+      backgroundColor: t[a],
+      textColor: t[i]
+    }, e;
+  },
+  {}
+), u = l.reduce(
+  (n, o) => {
+    const e = n, r = `${o.toLowerCase()}`, a = `${o}Container`, i = `On${o}Container`;
+    return e[r] = {
+      backgroundColor: t[a],
+      textColor: t[i]
+    }, e;
+  },
+  {}
+), C = {
+  borderRadius: S.Small,
+  display: "flex",
+  alignItems: "center",
+  px: d.XSmall,
+  height: "24px",
+  textTransform: "none",
+  width: "fit-content",
+  fontFamily: m.Body,
+  fontWeight: 500
+}, h = c({
+  baseStyle: C,
+  sizes: {
+    md: {
+      fontSize: s.Small
+    },
+    sm: {
+      fontSize: s.XSmall
+    }
+  },
+  defaultProps: {
+    size: "md",
+    variant: "neutral"
+  },
+  variants: {
+    ...f,
+    ...u
+  }
+});
+export {
+  h as badgeConfig
+};

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

@@ -0,0 +1,3 @@
+import { ComponentSingleStyleConfig } from '@chakra-ui/react';
+export declare const buttonConfig: ComponentSingleStyleConfig;
+//# sourceMappingURL=button-theme.d.ts.map

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

@@ -0,0 +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;AAwN9G,eAAO,MAAM,YAAY,EAAE,0BA+BzB,CAAC"}

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-theme.d.ts","sourceRoot":"","sources":["../../../../lib/theme/theme-config/components/checkbox-theme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiC,KAAK,yBAAyB,EAAe,MAAM,kBAAkB,CAAC;AAuN9G,eAAO,MAAM,cAAc,EAAE,yBAI3B,CAAC"}

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

@@ -0,0 +1,188 @@
+import { createMultiStyleConfigHelpers as l, defineStyle as r } from "@chakra-ui/react";
+import { checkboxAnatomy as i } from "../../../node_modules/@chakra-ui/anatomy/dist/chunk-7OOI6RFH.js";
+import { ThemeColorVariable as o } from "../../theme-types.js";
+import { ThemeColorToken as e, ThemeFontSizeToken as b, ThemeFontToken as A, ThemeBorderToken as v } from "../theme-tokens.js";
+const { definePartsStyle: c, defineMultiStyleConfig: s } = l(i.keys), h = r({
+  m: 0,
+  fontFamily: A.Body,
+  fontSize: b.Medium,
+  color: e.OnSurface,
+  width: "100%",
+  _disabled: {
+    opacity: 1
+  }
+}), d = "@media(hover: hover)", k = ".chakra-checkbox__control[data-disabled] + .chakra-checkbox__label:hover", t = ".chakra-checkbox__control:not([data-disabled])", n = ".chakra-checkbox__control:not([data-disabled])[data-checked]", a = ".chakra-checkbox__control:not([data-disabled])[data-indeterminate]", C = r({
+  [d]: {
+    [k]: {
+      cursor: "not-allowed"
+    },
+    _hover: {
+      [t]: {
+        borderColor: o.AccentHover,
+        color: o.AccentHover
+      },
+      [n]: {
+        bg: o.AccentHover,
+        color: o.OnAccent
+      },
+      [a]: {
+        borderColor: o.AccentHover,
+        bg: o.AccentHover,
+        color: o.OnAccent
+      }
+    }
+  },
+  _active: {
+    [t]: {
+      borderColor: o.AccentActive,
+      color: o.AccentActive
+    },
+    [n]: {
+      bg: o.AccentActive,
+      borderColor: o.AccentActive,
+      color: o.OnAccent
+    },
+    [a]: {
+      color: o.OnAccent,
+      bg: o.AccentActive,
+      borderColor: o.AccentActive
+    }
+  }
+}), S = "[data-checked]:not([data-disabled])&:hover", m = ":not([data-checked]):not([data-disabled]):not([data-invalid]):not([data-indeterminate])&:hover", g = "[data-indeterminate]:not([data-invalid]):not([data-disabled]):hover", _ = "[data-invalid]:not([data-checked]):hover", u = "[data-active]:not([data-disabled])", y = r({
+  fontWeight: 900,
+  color: e.OnBackground,
+  borderColor: e.OnBackground,
+  background: "transparent",
+  borderRadius: "4px",
+  border: v.Small,
+  _disabled: {
+    opacity: 0.48,
+    borderColor: e.OnBackground,
+    background: "transparent"
+  },
+  _checked: {
+    background: e.Accent,
+    borderColor: e.Accent,
+    _disabled: {
+      background: e.Accent,
+      borderColor: e.Accent,
+      color: e.OnAccent
+    }
+  },
+  _invalid: {
+    borderColor: e.Error,
+    boxShadow: `0 0 0 4px ${o.ErrorContainer}`
+  },
+  _indeterminate: {
+    background: e.Accent,
+    borderColor: e.Accent,
+    color: e.OnAccent,
+    _disabled: {
+      borderColor: e.Accent,
+      background: e.Accent
+    }
+  },
+  [d]: {
+    _hover: {
+      cursor: "pointer"
+    },
+    "[data-disabled]&:hover": {
+      cursor: "not-allowed"
+    },
+    [S]: {
+      bg: o.AccentHover,
+      borderColor: o.AccentHover,
+      color: o.OnAccent,
+      _active: {
+        bg: o.AccentActive,
+        borderColor: o.AccentActive,
+        color: o.OnAccent
+      }
+    },
+    [m]: {
+      borderColor: o.AccentHover,
+      color: o.AccentHover,
+      _active: {
+        borderColor: o.AccentActive,
+        color: o.AccentActive
+      }
+    },
+    [g]: {
+      bg: o.AccentHover,
+      borderColor: o.AccentHover,
+      color: o.OnAccent
+    },
+    [_]: {
+      color: o.ErrorHover,
+      borderColor: o.ErrorHover
+    }
+  },
+  [u]: {
+    borderColor: o.AccentActive,
+    color: o.AccentActive,
+    _checked: {
+      background: o.AccentActive,
+      borderColor: o.AccentActive,
+      color: o.OnAccent
+    },
+    _indeterminate: {
+      color: o.OnAccent,
+      bg: o.AccentActive
+    }
+  }
+}), p = c({
+  control: y,
+  label: h,
+  container: C
+}), H = {
+  sm: c({
+    control: {
+      width: "20px",
+      height: "20px"
+    }
+  }),
+  md: c({
+    control: {
+      width: "24px",
+      height: "24px"
+    }
+  }),
+  lg: c({
+    control: {
+      width: "40px",
+      height: "40px",
+      borderRadius: "full"
+    }
+  })
+}, O = c({
+  control: {
+    _invalid: {
+      color: e.Error
+    },
+    _checked: {
+      color: e.OnAccent,
+      borderColor: e.Accent,
+      background: e.Accent,
+      _invalid: {
+        color: e.OnAccent
+      }
+    }
+  }
+}), x = c({
+  control: {
+    _checked: {
+      bg: e.Accent,
+      color: e.OnAccent
+    }
+  }
+}), f = {
+  normal: x,
+  addon: O
+}, z = s({
+  baseStyle: p,
+  sizes: H,
+  variants: f
+});
+export {
+  z as checkboxConfig
+};

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

@@ -0,0 +1,59 @@
+import { ThemeColorVariable } from '../../theme-types.js';
+export declare const comboboxConfig: {
+    baseStyle?: (import('@chakra-ui/styled-system').CSSWithMultiValues & import('@chakra-ui/styled-system').RecursiveCSSSelector<import('@chakra-ui/styled-system').CSSWithMultiValues>) | undefined;
+    sizes?: {
+        xs: {
+            minHeight: string;
+        };
+        sm: {
+            minHeight: string;
+        };
+        md: {
+            minHeight: string;
+        };
+        lg: {
+            minHeight: string;
+        };
+        xl: {
+            minHeight: string;
+        };
+    } | undefined;
+    variants?: {
+        outline: {
+            background: ThemeColorVariable;
+            color: ThemeColorVariable;
+            borderColor: ThemeColorVariable;
+            "@media(hover: hover)": {
+                '&:hover:not(:focus-within):not([aria-disabled="true"]):not([aria-readonly="true"])': {
+                    borderColor: ThemeColorVariable;
+                };
+            };
+        };
+        ghost: {
+            background: string;
+            color: ThemeColorVariable;
+            '&:not([aria-disabled="true"]):not([aria-readonly="true"]) .combobox-dropdown-icon': {
+                opacity: number;
+            };
+            ":focus-within": {
+                ".combobox-dropdown-icon": {
+                    opacity: number;
+                };
+            };
+            "@media(hover: hover)": {
+                "&:hover:not(:focus-within)": {
+                    backgroundColor: ThemeColorVariable;
+                    ".combobox-dropdown-icon": {
+                        opacity: number;
+                    };
+                };
+            };
+        };
+    } | undefined;
+    defaultProps?: {
+        size?: "lg" | "md" | "sm" | "xl" | "xs" | undefined;
+        variant?: "outline" | "ghost" | undefined;
+        colorScheme?: string | undefined;
+    } | undefined;
+};
+//# sourceMappingURL=combobox-theme.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"combobox-theme.d.ts","sourceRoot":"","sources":["../../../../lib/theme/theme-config/components/combobox-theme.ts"],"names":[],"mappings":"AACA,OAAO,EAAuB,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAoE5E,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAIzB,CAAC"}