@caspeco/casper-ui-library 0.0.1

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

@@ -0,0 +1,123 @@
+import { modalAnatomy as d } from "../../../node_modules/@chakra-ui/anatomy/dist/chunk-7OOI6RFH.js";
+import { createMultiStyleConfigHelpers as n } from "@chakra-ui/react";
+import { ThemeColorToken as o, ThemeRadiusToken as a, ThemeFontToken as r, ThemeFontSizeToken as m } from "../theme-tokens.js";
+import { buttonConfig as t } from "./button-theme.js";
+const { definePartsStyle: e, defineMultiStyleConfig: l } = n(d.keys);
+var i;
+const x = e({
+  overlay: {
+    // Non white label-overridable color based on black, always
+    bg: "rgba(0, 0, 0, 0.32)"
+  },
+  header: {
+    bg: o.Surface,
+    position: "relative",
+    fontSize: m.XLarge,
+    fontFamily: r.SubHeader,
+    color: o.OnSurfaceHeader,
+    fontWeight: "medium",
+    borderTopRadius: a.Large,
+    minHeight: "72px",
+    px: 0,
+    py: 0
+  },
+  body: {
+    borderTopRadius: a.Large,
+    fontFamily: r.Body,
+    px: 0,
+    py: 0
+  },
+  dialog: {
+    maxW: "384px",
+    my: "48px",
+    borderRadius: a.Large,
+    bg: o.Surface,
+    color: o.OnSurface
+  },
+  dialogContainer: {
+    height: "100dvh"
+  },
+  footer: {
+    borderBottomRadius: a.Large,
+    bg: o.Surface,
+    px: 0,
+    py: 0
+  },
+  closeButton: {
+    width: "40px",
+    minW: "40px",
+    maxW: "40px",
+    height: "40px",
+    minH: "40px",
+    maxH: "40px",
+    position: "relative",
+    zIndex: "0",
+    right: "unset",
+    top: "unset",
+    alignSelf: "flex-start",
+    ...t.baseStyle,
+    ...(i = t.variants) == null ? void 0 : i.secondary
+  }
+}), s = {
+  sm: e({
+    dialog: {
+      maxW: "384px"
+    }
+  }),
+  md: e({
+    dialog: {
+      maxW: "560px",
+      mx: "48px"
+    }
+  }),
+  lg: e({
+    dialog: {
+      maxW: "960px",
+      mx: "80px"
+    }
+  }),
+  xl: e({
+    dialog: {
+      maxW: "100%",
+      mx: "80px"
+    }
+  }),
+  full: e({
+    dialog: {
+      borderRadius: 0
+    },
+    body: {
+      borderRadius: 0
+    },
+    header: {
+      borderRadius: 0
+    },
+    footer: {
+      borderRadius: 0
+    }
+  })
+}, g = {
+  /** Custom variant appearing as a mobile app "bottom sheet",
+   * filling 100% of view width and max 100% - 88px view height. */
+  bottomSheet: e({
+    dialog: {
+      maxW: "100vw",
+      maxHeight: "calc(100dvh - 88px)",
+      borderBottomRadius: 0,
+      margin: 0
+    },
+    footer: {
+      borderBottomRadius: 0
+    },
+    dialogContainer: {
+      alignItems: "flex-end"
+    }
+  })
+}, h = l({
+  baseStyle: x,
+  variants: g,
+  sizes: s
+});
+export {
+  h as modalConfig
+};

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

@@ -0,0 +1,30 @@
+import { ThemeColorVariable, ThemeFontSizeVariable, ThemeFontVariable, ThemeSpaceVariable } from '../../theme-types.js';
+export declare const paginatorConfig: {
+    baseStyle?: {
+        width: string;
+        fontFamily: ThemeFontVariable;
+        color: ThemeColorVariable;
+        display: string;
+        justifyContent: string;
+        alignItems: string;
+        padding: ThemeSpaceVariable;
+        gap: ThemeSpaceVariable;
+        div: {
+            button: {
+                fontSize: ThemeFontSizeVariable;
+            };
+        };
+    } | undefined;
+    sizes?: {
+        [key: string]: import('@chakra-ui/styled-system').SystemStyleInterpolation;
+    } | undefined;
+    variants?: {
+        [key: string]: import('@chakra-ui/styled-system').SystemStyleInterpolation;
+    } | undefined;
+    defaultProps?: {
+        size?: string | number | undefined;
+        variant?: string | number | undefined;
+        colorScheme?: string | undefined;
+    } | undefined;
+};
+//# sourceMappingURL=paginator-theme.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"paginator-theme.d.ts","sourceRoot":"","sources":["../../../../lib/theme/theme-config/components/paginator-theme.ts"],"names":[],"mappings":"AACA,OAAO,EACN,kBAAkB,EAClB,qBAAqB,EACrB,iBAAiB,EACjB,kBAAkB,EAClB,MAAM,mBAAmB,CAAC;AAE3B,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgB1B,CAAC"}

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

@@ -0,0 +1,22 @@
+import { defineStyleConfig as o } from "@chakra-ui/react";
+import { ThemeFontSizeVariable as a, ThemeSpaceVariable as e, ThemeColorVariable as i, ThemeFontVariable as t } from "../../theme-types.js";
+const r = o({
+  baseStyle: {
+    width: "100%",
+    fontFamily: t.Body,
+    color: i.OnBackground,
+    display: "flex",
+    justifyContent: "flex-end",
+    alignItems: "center",
+    padding: e.Small,
+    gap: e.Medium,
+    div: {
+      button: {
+        fontSize: a.Large
+      }
+    }
+  }
+});
+export {
+  r as paginatorConfig
+};

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"radio-theme.d.ts","sourceRoot":"","sources":["../../../../lib/theme/theme-config/components/radio-theme.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,yBAAyB,EAAiC,MAAM,kBAAkB,CAAC;AA6DjG,eAAO,MAAM,WAAW,EAAE,yBAExB,CAAC"}

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

@@ -0,0 +1,56 @@
+import { radioAnatomy as r } from "../../../node_modules/@chakra-ui/anatomy/dist/chunk-7OOI6RFH.js";
+import { createMultiStyleConfigHelpers as n } from "@chakra-ui/react";
+import { ThemeColorToken as o, ThemeBorderToken as t, ThemeFontSizeToken as c, ThemeFontToken as i } from "../theme-tokens.js";
+const { defineMultiStyleConfig: l } = n(r.keys), e = {
+  content: '""',
+  display: "inline-block",
+  pos: "relative",
+  w: "50%",
+  h: "50%",
+  borderRadius: "50%",
+  bg: o.OnAccent
+}, d = {
+  label: {
+    color: o.OnSurface,
+    fontFamily: i.Body,
+    fontSize: c.Medium,
+    _disabled: {
+      opacity: 1
+    }
+  },
+  control: {
+    border: t.Small,
+    borderColor: o.OnBackground,
+    color: o.OnAccent,
+    bg: "transparent",
+    width: "24px",
+    height: "24px",
+    minH: "24px",
+    minW: "24px",
+    _disabled: {
+      opacity: 0.48,
+      color: o.OnAccent,
+      borderColor: o.OnBackground,
+      bg: "transparent"
+    },
+    _checked: {
+      bg: o.Accent,
+      borderColor: o.Accent,
+      _before: {
+        ...e
+      },
+      _disabled: {
+        bg: o.Accent,
+        borderColor: o.Accent,
+        _before: {
+          ...e
+        }
+      }
+    }
+  }
+}, p = l({
+  baseStyle: d
+});
+export {
+  p as radioConfig
+};

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

@@ -0,0 +1,186 @@
+import { ThemeColorToken, ThemeFontSizeToken } from '../theme-tokens.js';
+export declare const selectConfig: {
+    baseStyle?: import('@chakra-ui/styled-system').PartsStyleInterpolation<{
+        keys: ("icon" | "field")[];
+    }> | undefined;
+    sizes?: {
+        [key: string]: import('@chakra-ui/styled-system').PartsStyleInterpolation<{
+            keys: ("icon" | "field")[];
+        }>;
+    } | undefined;
+    variants?: {
+        outline: {
+            field: {
+                "> option, > optgroup": {
+                    color: ThemeColorToken;
+                    background: ThemeColorToken;
+                };
+                fontFamily?: import('../theme-tokens.js').ThemeFontToken | undefined;
+                color?: ThemeColorToken | undefined;
+                border?: import('../theme-tokens.js').ThemeBorderToken | undefined;
+                borderColor?: ThemeColorToken | undefined;
+                background?: ThemeColorToken | undefined;
+                borderRadius?: import('../theme-tokens.js').ThemeRadiusToken | undefined;
+                width?: string | undefined;
+                _disabled?: {
+                    cursor: string;
+                    background: ThemeColorToken;
+                    color: ThemeColorToken;
+                    border: number;
+                    opacity: number;
+                } | undefined;
+                _readOnly?: {
+                    color: ThemeColorToken;
+                    background: ThemeColorToken;
+                    userSelect: string;
+                    opacity: number;
+                    border: number;
+                } | undefined;
+                _placeholder?: {
+                    color: ThemeColorToken;
+                    opacity: number;
+                } | undefined;
+                _invalid?: {
+                    borderColor: ThemeColorToken;
+                    boxShadow: string;
+                } | undefined;
+                _focus?: {
+                    borderColor: ThemeColorToken;
+                    boxShadow: string;
+                } | undefined;
+                _hover?: {
+                    borderColor: ThemeColorToken;
+                    _disabled: undefined;
+                    _readOnly: undefined;
+                } | undefined;
+            };
+            icon: {
+                fontSize: ThemeFontSizeToken;
+                color: ThemeColorToken;
+                _disabled: {
+                    opacity: number;
+                    color: ThemeColorToken;
+                };
+            };
+            addon?: {
+                color: ThemeColorToken;
+                background: ThemeColorToken;
+                borderColor: ThemeColorToken;
+                borderRadius: import('../theme-tokens.js').ThemeRadiusToken;
+                px: import('../theme-tokens.js').ThemeSpaceToken;
+                _disabled: {
+                    opacity: number;
+                    cursor: string;
+                    background: ThemeColorToken;
+                };
+                _readOnly: {
+                    opacity: number;
+                    background: ThemeColorToken;
+                };
+            } | undefined;
+            element?: {
+                color: ThemeColorToken;
+                _disabled: {
+                    opacity: number;
+                    color: ThemeColorToken;
+                };
+            } | undefined;
+        };
+        ghost: {
+            field: {
+                border: string;
+                "> option, > optgroup": {
+                    color: ThemeColorToken;
+                    background: ThemeColorToken;
+                };
+                background?: string | undefined;
+                color?: ThemeColorToken | undefined;
+                _focus?: {
+                    border: import('../theme-tokens.js').ThemeBorderToken;
+                    borderColor: ThemeColorToken;
+                    boxShadow: string;
+                    backgroundColor: ThemeColorToken;
+                } | undefined;
+                "@media(hover: hover)"?: {
+                    "&:hover": {
+                        borderColor: ThemeColorToken;
+                    };
+                    "&:hover:not(:focus)": {
+                        backgroundColor: ThemeColorToken;
+                        borderColor: ThemeColorToken;
+                    };
+                } | undefined;
+                _invalid?: {
+                    border: import('../theme-tokens.js').ThemeBorderToken;
+                    borderColor: ThemeColorToken;
+                    boxShadow: string;
+                } | undefined;
+                fontFamily?: import('../theme-tokens.js').ThemeFontToken | undefined;
+                borderColor?: ThemeColorToken | undefined;
+                borderRadius?: import('../theme-tokens.js').ThemeRadiusToken | undefined;
+                width?: string | undefined;
+                _disabled?: {
+                    cursor: string;
+                    background: ThemeColorToken;
+                    color: ThemeColorToken;
+                    border: number;
+                    opacity: number;
+                } | undefined;
+                _readOnly?: {
+                    color: ThemeColorToken;
+                    background: ThemeColorToken;
+                    userSelect: string;
+                    opacity: number;
+                    border: number;
+                } | undefined;
+                _placeholder?: {
+                    color: ThemeColorToken;
+                    opacity: number;
+                } | undefined;
+                _hover?: {
+                    borderColor: ThemeColorToken;
+                    _disabled: undefined;
+                    _readOnly: undefined;
+                } | undefined;
+            };
+            icon: {
+                fontSize: ThemeFontSizeToken;
+                color: ThemeColorToken;
+                _disabled: {
+                    opacity: number;
+                    color: ThemeColorToken;
+                };
+            };
+            addon?: {
+                color: ThemeColorToken;
+                background: ThemeColorToken;
+                borderColor: ThemeColorToken;
+                borderRadius: import('../theme-tokens.js').ThemeRadiusToken;
+                px: import('../theme-tokens.js').ThemeSpaceToken;
+                _disabled: {
+                    opacity: number;
+                    cursor: string;
+                    background: ThemeColorToken;
+                };
+                _readOnly: {
+                    opacity: number;
+                    background: ThemeColorToken;
+                };
+            } | undefined;
+            element?: {
+                color: ThemeColorToken;
+                _disabled: {
+                    opacity: number;
+                    color: ThemeColorToken;
+                };
+            } | undefined;
+        };
+    } | undefined;
+    defaultProps?: {
+        size?: string | number | undefined;
+        variant?: "outline" | "ghost" | undefined;
+        colorScheme?: string | undefined;
+    } | undefined;
+    parts: ("icon" | "field")[];
+};
+//# sourceMappingURL=select-theme.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"select-theme.d.ts","sourceRoot":"","sources":["../../../../lib/theme/theme-config/components/select-theme.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,eAAe,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AA+CtE,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAQvB,CAAC"}

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

@@ -0,0 +1,58 @@
+import { selectAnatomy as c } from "../../../node_modules/@chakra-ui/anatomy/dist/chunk-7OOI6RFH.js";
+import { createMultiStyleConfigHelpers as f } from "@chakra-ui/react";
+import { ThemeColorToken as o, ThemeFontSizeToken as s } from "../theme-tokens.js";
+import { inputConfig as e } from "./input-theme.js";
+const { defineMultiStyleConfig: u, definePartsStyle: a } = f(c.keys);
+var t, n;
+const l = a({
+  // Apply input theme, as Select and Input share most of their appearances
+  ...(t = e.variants) == null ? void 0 : t.outline,
+  field: {
+    // Apply input theme, as Select and Input share most of their appearances
+    ...(n = e.variants) == null ? void 0 : n.outline.field,
+    // Give nested option elements color styles to match the select element.
+    // Only applicable to Microsoft desktop browsers, will be ignored by browsers that use their own native styles.
+    "> option, > optgroup": {
+      color: o.OnSurface,
+      background: o.Surface
+    }
+  },
+  icon: {
+    fontSize: s.Small,
+    color: o.OnSurface,
+    _disabled: {
+      opacity: 1,
+      color: o.OnSurfaceSubdued
+    }
+  }
+});
+var i, r;
+const p = a({
+  // Apply input theme, as Select and Input share most of their appearances
+  ...(i = e.variants) == null ? void 0 : i.ghost,
+  field: {
+    // Apply input theme, as Select and Input share most of their appearances
+    ...(r = e.variants) == null ? void 0 : r.ghost.field,
+    border: "none",
+    // Give nested option elements color styles to match the select element.
+    // Only applicable to Microsoft desktop browsers, will be ignored by browsers that use their own native styles.
+    "> option, > optgroup": {
+      color: o.OnSurface,
+      background: o.Surface
+    }
+  },
+  icon: {
+    ...l.icon
+  }
+}), y = u({
+  defaultProps: {
+    variant: "outline"
+  },
+  variants: {
+    outline: l,
+    ghost: p
+  }
+});
+export {
+  y as selectConfig
+};

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"switch-theme.d.ts","sourceRoot":"","sources":["../../../../lib/theme/theme-config/components/switch-theme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,yBAAyB,EAA8C,MAAM,kBAAkB,CAAC;AA4E9G,eAAO,MAAM,YAAY,EAAE,yBAGzB,CAAC"}

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

@@ -0,0 +1,72 @@
+import { createMultiStyleConfigHelpers as r, defineStyle as o } from "@chakra-ui/react";
+import { switchAnatomy as c } from "../../../node_modules/@chakra-ui/anatomy/dist/chunk-7OOI6RFH.js";
+import { ThemeColorToken as e } from "../theme-tokens.js";
+const { definePartsStyle: t, defineMultiStyleConfig: i } = r(c.keys), h = o({
+  backgroundColor: e.Surface,
+  borderColor: e.OnSurfaceSubdued,
+  borderStyle: "solid",
+  borderWidth: "2px",
+  _checked: {
+    backgroundColor: e.Accent,
+    borderColor: e.Accent
+  },
+  _disabled: {
+    opacity: 0.48
+  }
+}), d = o({
+  backgroundColor: e.OnSurfaceSubdued,
+  _checked: {
+    backgroundColor: e.OnAccent
+  },
+  _disabled: {
+    opacity: 0.48
+  }
+}), n = {
+  sm: t({
+    thumb: {
+      width: "12px",
+      height: "12px",
+      _checked: {
+        transform: "translate(11px, -1px)",
+        width: "14px",
+        height: "14px"
+      }
+    },
+    track: {
+      width: "24px",
+      height: "12px"
+    },
+    container: {
+      width: "32px",
+      height: "20px"
+    }
+  }),
+  md: t({
+    thumb: {
+      width: "16px",
+      height: "16px",
+      _checked: {
+        transform: "translate(15px, -1px)",
+        width: "18px",
+        height: "18px"
+      }
+    },
+    track: {
+      width: "32px",
+      height: "16px"
+    },
+    container: {
+      width: "40px",
+      height: "24px"
+    }
+  })
+}, a = t({
+  track: h,
+  thumb: d
+}), x = i({
+  baseStyle: a,
+  sizes: n
+});
+export {
+  x as switchConfig
+};

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"table-theme.d.ts","sourceRoot":"","sources":["../../../../lib/theme/theme-config/components/table-theme.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,yBAAyB,EAA8C,MAAM,kBAAkB,CAAC;AAiF9G,eAAO,MAAM,WAAW,EAAE,yBAExB,CAAC"}

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

@@ -0,0 +1,72 @@
+import { tableAnatomy as n } from "../../../node_modules/@chakra-ui/anatomy/dist/chunk-7OOI6RFH.js";
+import { createMultiStyleConfigHelpers as a, defineStyle as e } from "@chakra-ui/react";
+import { ThemeColorVariable as o, ThemeSpaceVariable as r, ThemeFontVariable as l } from "../../theme-types.js";
+import { ThemeFontSizeToken as t } from "../theme-tokens.js";
+const { definePartsStyle: d, defineMultiStyleConfig: i } = a(n.keys), b = e({
+  position: "relative",
+  fontFamily: l.Body,
+  fontSize: t.Small,
+  th: {
+    padding: "0px",
+    position: "relative",
+    fontSize: t.Small,
+    height: "40px",
+    color: o.OnBackgroundSubdued,
+    fontWeight: 400,
+    textTransform: "none",
+    div: {
+      _hover: {
+        backgroundColor: o.BackgroundDisabled
+      }
+    }
+  },
+  td: {
+    color: o.OnBackground,
+    padding: `0px 0px 0px ${r.Small}`,
+    borderRight: `1px solid ${o.OnBackgroundBorder}`,
+    height: "40px",
+    gap: r.XSmall,
+    _last: {
+      borderRight: "none"
+    }
+  },
+  tr: {
+    borderColor: o.OnBackgroundBorder
+  }
+}), s = e({
+  cursor: "pointer",
+  backgroundColor: o.Surface,
+  div: {
+    span: {
+      color: o.OnBackgroundSubdued,
+      fontWeight: 400
+    }
+  }
+}), c = e({
+  color: o.OnBackground
+}), p = e({
+  borderTop: "1px solid",
+  _first: {
+    borderTop: "none"
+  },
+  _last: {
+    borderBottom: "1px solid",
+    borderColor: o.OnBackgroundBorder
+  }
+}), g = e({
+  tr: {
+    zIndex: 10,
+    backgroundColor: o.OnBackgroundSubdued
+  }
+}), u = d({
+  table: b,
+  tfoot: c,
+  th: s,
+  tr: p,
+  thead: g
+}), k = i({
+  baseStyle: u
+});
+export {
+  k as tableConfig
+};

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"tabs-theme.d.ts","sourceRoot":"","sources":["../../../../lib/theme/theme-config/components/tabs-theme.ts"],"names":[],"mappings":"AACA,OAAO,EACN,KAAK,yBAAyB,EAG9B,MAAM,kBAAkB,CAAC;AAwG1B,eAAO,MAAM,UAAU,EAAE,yBAIvB,CAAC"}