@caspeco/casper-ui-library 0.0.1

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

@@ -0,0 +1,70 @@
+import { defineStyleConfig as r } from "@chakra-ui/react";
+import { ThemeColorVariable as o, ThemeBorderVariable as e } from "../../theme-types.js";
+const a = {
+  display: "flex",
+  justifyContent: "space-between",
+  border: `${e.XSmall} transparent`,
+  '&[aria-disabled="true"]': {
+    borderColor: "transparent",
+    backgroundColor: o.SurfaceDisabled,
+    cursor: "not-allowed"
+  },
+  '&[aria-readonly="true"]': {
+    borderColor: "transparent",
+    backgroundColor: o.SurfaceDisabled
+  }
+}, n = {
+  outline: {
+    background: o.Surface,
+    color: o.OnSurface,
+    borderColor: o.OnSurfaceBorder,
+    "@media(hover: hover)": {
+      '&:hover:not(:focus-within):not([aria-disabled="true"]):not([aria-readonly="true"])': {
+        borderColor: o.OnSurface
+      }
+    }
+  },
+  ghost: {
+    background: "none",
+    color: o.OnSurface,
+    '&:not([aria-disabled="true"]):not([aria-readonly="true"]) .combobox-dropdown-icon': {
+      opacity: 0
+    },
+    ":focus-within": {
+      ".combobox-dropdown-icon": {
+        opacity: 1
+      }
+    },
+    "@media(hover: hover)": {
+      "&:hover:not(:focus-within)": {
+        backgroundColor: o.SurfaceDisabled,
+        ".combobox-dropdown-icon": {
+          opacity: 1
+        }
+      }
+    }
+  }
+}, i = {
+  xs: {
+    minHeight: "24px"
+  },
+  sm: {
+    minHeight: "32px"
+  },
+  md: {
+    minHeight: "40px"
+  },
+  lg: {
+    minHeight: "48px"
+  },
+  xl: {
+    minHeight: "56px"
+  }
+}, c = r({
+  baseStyle: a,
+  sizes: i,
+  variants: n
+});
+export {
+  c as comboboxConfig
+};

package/dist/theme/theme-config/components/date-cell-theme.d.ts

@@ -0,0 +1,175 @@
+import { ThemeColorToken, ThemeFontSizeToken, ThemeFontToken, ThemeRadiusToken, ThemeSpaceToken } from '../theme-tokens.js';
+export declare const dateCellConfig: {
+    baseStyle?: {
+        display: string;
+        justifyContent: string;
+        alignItems: string;
+        flexDirection: string;
+        padding: string;
+        borderRadius: ThemeRadiusToken;
+        fontSize: ThemeFontSizeToken;
+        fontFamily: ThemeFontToken;
+        color: ThemeColorToken;
+        position: string;
+        border: string;
+        zIndex: number;
+        marginLeft: number;
+        marginRight: number;
+        span: {
+            position: string;
+            display: string;
+            alignItems: string;
+            justifyContent: string;
+            top: string;
+            left: string;
+            width: string;
+            height: string;
+            transform: string;
+            background: ThemeColorToken;
+        };
+        _hover: {
+            background: ThemeColorToken;
+        };
+        _active: {
+            background: ThemeColorToken;
+        };
+        _focus: {
+            background: ThemeColorToken;
+            border: string;
+            borderColor: ThemeColorToken;
+            outlineColor: ThemeColorToken;
+        };
+        _disabled: {
+            cursor: string;
+            opacity: number;
+        };
+    } | undefined;
+    sizes?: {
+        [key: string]: import('@chakra-ui/styled-system').SystemStyleInterpolation;
+    } | undefined;
+    variants?: {
+        normal: {
+            _disabled: {
+                _hover: {
+                    background: string;
+                };
+            };
+        };
+        outSideMonth: {
+            color: ThemeColorToken;
+            _disabled: {
+                background: string;
+            };
+        };
+        isSelectedRangeDay: {
+            background: ThemeColorToken;
+            color: ThemeColorToken;
+            marginRight: ThemeSpaceToken;
+            marginLeft: ThemeSpaceToken;
+            borderRadius: string;
+            _disabled: {
+                background: ThemeColorToken;
+                color: ThemeColorToken;
+            };
+            _hover: {
+                border: string;
+                background: ThemeColorToken;
+                color: ThemeColorToken;
+            };
+        };
+        currentDay: {
+            color: ThemeColorToken;
+            _disabled: {
+                color: ThemeColorToken;
+                _active: {
+                    border: string;
+                };
+            };
+            span: {
+                background: ThemeColorToken;
+            };
+            _hover: {
+                color: ThemeColorToken;
+                _disabled: {
+                    background: string;
+                };
+            };
+            _active: {
+                color: ThemeColorToken;
+                borderColor: ThemeColorToken;
+            };
+        };
+        selectedDay: {
+            background: ThemeColorToken;
+            color: ThemeColorToken;
+            span: {
+                background: ThemeColorToken;
+            };
+            _hover: {
+                background: ThemeColorToken;
+                _disabled: {
+                    background: ThemeColorToken;
+                };
+            };
+            _active: {
+                background: ThemeColorToken;
+            };
+            _focus: {
+                background: ThemeColorToken;
+                borderColor: ThemeColorToken;
+            };
+        };
+        startDateRange: {
+            background: ThemeColorToken;
+            color: ThemeColorToken;
+            borderTopRightRadius: ThemeRadiusToken;
+            borderBottomRightRadius: ThemeRadiusToken;
+            marginRight: ThemeSpaceToken;
+            span: {
+                background: ThemeColorToken;
+            };
+            ":hover": {
+                background: ThemeColorToken;
+                _disabled: {
+                    background: ThemeColorToken;
+                };
+            };
+            _active: {
+                background: ThemeColorToken;
+            };
+            _focus: {
+                background: ThemeColorToken;
+                borderColor: ThemeColorToken;
+            };
+        };
+        endDateRange: {
+            background: ThemeColorToken;
+            color: ThemeColorToken;
+            borderTopLeftRadius: ThemeRadiusToken;
+            borderBottomLeftRadius: ThemeRadiusToken;
+            marginLeft: ThemeSpaceToken;
+            span: {
+                background: ThemeColorToken;
+            };
+            ":hover": {
+                background: ThemeColorToken;
+                _disabled: {
+                    background: ThemeColorToken;
+                };
+            };
+            _active: {
+                background: ThemeColorToken;
+            };
+            _focus: {
+                background: ThemeColorToken;
+                borderColor: ThemeColorToken;
+            };
+        };
+    } | undefined;
+    defaultProps?: {
+        size?: string | number | undefined;
+        variant?: "normal" | "outSideMonth" | "isSelectedRangeDay" | "currentDay" | "selectedDay" | "startDateRange" | "endDateRange" | undefined;
+        colorScheme?: string | undefined;
+    } | undefined;
+};
+//# sourceMappingURL=date-cell-theme.d.ts.map

package/dist/theme/theme-config/components/date-cell-theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-cell-theme.d.ts","sourceRoot":"","sources":["../../../../lib/theme/theme-config/components/date-cell-theme.ts"],"names":[],"mappings":"AACA,OAAO,EACN,eAAe,EACf,kBAAkB,EAClB,cAAc,EACd,gBAAgB,EAChB,eAAe,EACf,MAAM,iBAAiB,CAAC;AAEzB,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+KzB,CAAC"}

package/dist/theme/theme-config/components/date-cell-theme.js

@@ -0,0 +1,170 @@
+import { defineStyleConfig as c } from "@chakra-ui/react";
+import { ThemeColorToken as e, ThemeSpaceToken as n, ThemeRadiusToken as o, ThemeFontToken as r, ThemeFontSizeToken as t } from "../theme-tokens.js";
+const i = c({
+  baseStyle: {
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    flexDirection: "row",
+    padding: "12px 8px",
+    borderRadius: o.Small,
+    fontSize: t.Medium,
+    fontFamily: r.Body,
+    color: e.OnSurface,
+    position: "relative",
+    border: "2px solid transparent",
+    zIndex: 1,
+    marginLeft: 1,
+    marginRight: 1,
+    span: {
+      position: "absolute",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      top: "50%",
+      left: "50%",
+      width: "24px",
+      height: "1px",
+      transform: "translate(-50%,-50%)rotate(-45deg)",
+      background: e.OnSurface
+    },
+    _hover: {
+      background: e.AccentHoverAlpha
+    },
+    _active: {
+      background: e.AccentActiveAlpha
+    },
+    _focus: {
+      background: e.AccentContainer,
+      border: "2px solid",
+      borderColor: e.Info,
+      outlineColor: e.Info
+    },
+    _disabled: {
+      cursor: "not-allowed",
+      opacity: 0.48
+    }
+  },
+  variants: {
+    normal: {
+      _disabled: {
+        _hover: {
+          background: "none"
+        }
+      }
+    },
+    outSideMonth: {
+      color: e.OnBackgroundSubdued,
+      _disabled: {
+        background: "none"
+      }
+    },
+    isSelectedRangeDay: {
+      background: e.AccentContainer,
+      color: e.OnSurface,
+      marginRight: n.None,
+      marginLeft: n.None,
+      borderRadius: "none",
+      _disabled: {
+        background: e.AccentContainer,
+        color: e.OnSurface
+      },
+      _hover: {
+        border: `solid 1px ${e.Accent}`,
+        background: e.AccentHover,
+        color: e.OnAccent
+      }
+    },
+    currentDay: {
+      color: e.Accent,
+      _disabled: {
+        color: e.Accent,
+        _active: {
+          border: "none"
+        }
+      },
+      span: {
+        background: e.Accent
+      },
+      _hover: {
+        color: e.AccentHover,
+        _disabled: {
+          background: "none"
+        }
+      },
+      _active: {
+        color: e.AccentActive,
+        borderColor: e.AccentActive
+      }
+    },
+    selectedDay: {
+      background: e.Accent,
+      color: e.OnAccent,
+      span: {
+        background: e.OnAccent
+      },
+      _hover: {
+        background: e.AccentHover,
+        _disabled: {
+          background: e.Accent
+        }
+      },
+      _active: {
+        background: e.AccentActive
+      },
+      _focus: {
+        background: e.Accent,
+        borderColor: e.Info
+      }
+    },
+    startDateRange: {
+      background: e.Accent,
+      color: e.OnAccent,
+      borderTopRightRadius: o.None,
+      borderBottomRightRadius: o.None,
+      marginRight: n.None,
+      span: {
+        background: e.OnAccent
+      },
+      ":hover": {
+        background: e.AccentHover,
+        _disabled: {
+          background: e.Accent
+        }
+      },
+      _active: {
+        background: e.AccentActive
+      },
+      _focus: {
+        background: e.Accent,
+        borderColor: e.Info
+      }
+    },
+    endDateRange: {
+      background: e.Accent,
+      color: e.OnAccent,
+      borderTopLeftRadius: o.None,
+      borderBottomLeftRadius: o.None,
+      marginLeft: n.None,
+      span: {
+        background: e.OnAccent
+      },
+      ":hover": {
+        background: e.AccentHover,
+        _disabled: {
+          background: e.Accent
+        }
+      },
+      _active: {
+        background: e.AccentActive
+      },
+      _focus: {
+        background: e.Accent,
+        borderColor: e.Info
+      }
+    }
+  }
+});
+export {
+  i as dateCellConfig
+};

package/dist/theme/theme-config/components/datepicker-week-theme.d.ts

@@ -0,0 +1,91 @@
+import { ThemeColorToken, ThemeFontSizeToken, ThemeFontToken, ThemeRadiusToken } from '../theme-tokens.js';
+export declare const dateCellWeekConfig: {
+    baseStyle?: {
+        display: string;
+        justifyContent: string;
+        alignItems: string;
+        flexDirection: string;
+        padding: string;
+        fontSize: ThemeFontSizeToken;
+        fontFamily: ThemeFontToken;
+        color: ThemeColorToken;
+        position: string;
+        border: string;
+        span: {
+            position: string;
+            display: string;
+            alignItems: string;
+            justifyContent: string;
+            top: string;
+            left: string;
+            width: string;
+            height: string;
+            transform: string;
+            background: ThemeColorToken;
+            opacity: string;
+        };
+        _hover: {
+            background: ThemeColorToken;
+            borderRadius: ThemeRadiusToken;
+        };
+        _active: {
+            background: ThemeColorToken;
+        };
+        _disabled: {
+            cursor: string;
+            borderRadius: string;
+            color: ThemeColorToken;
+            opacity: number;
+        };
+    } | undefined;
+    sizes?: {
+        [key: string]: import('@chakra-ui/styled-system').SystemStyleInterpolation;
+    } | undefined;
+    variants?: {
+        normal: {
+            _disabled: {
+                _hover: {
+                    background: string;
+                };
+            };
+        };
+        outSideMonth: {
+            color: ThemeColorToken;
+            _disabled: {
+                background: string;
+            };
+        };
+        currentDay: {
+            color: ThemeColorToken;
+            background: ThemeColorToken;
+            span: {
+                background: ThemeColorToken;
+            };
+            _hover: {
+                color: ThemeColorToken;
+                _disabled: {
+                    borderColor: ThemeColorToken;
+                    background: string;
+                };
+            };
+        };
+        selectedDay: {
+            background: ThemeColorToken;
+            color: ThemeColorToken;
+            _disabled: {
+                background: ThemeColorToken;
+                color: ThemeColorToken;
+            };
+            _hover: {
+                background: ThemeColorToken;
+                color: ThemeColorToken;
+            };
+        };
+    } | undefined;
+    defaultProps?: {
+        size?: string | number | undefined;
+        variant?: "normal" | "outSideMonth" | "currentDay" | "selectedDay" | undefined;
+        colorScheme?: string | undefined;
+    } | undefined;
+};
+//# sourceMappingURL=datepicker-week-theme.d.ts.map

package/dist/theme/theme-config/components/datepicker-week-theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"datepicker-week-theme.d.ts","sourceRoot":"","sources":["../../../../lib/theme/theme-config/components/datepicker-week-theme.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,kBAAkB,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAExG,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuF7B,CAAC"}

package/dist/theme/theme-config/components/datepicker-week-theme.js

@@ -0,0 +1,86 @@
+import { defineStyleConfig as o } from "@chakra-ui/react";
+import { ThemeColorToken as e, ThemeRadiusToken as n, ThemeFontToken as r, ThemeFontSizeToken as t } from "../theme-tokens.js";
+const d = o({
+  baseStyle: {
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    flexDirection: "row",
+    padding: "12px 8px",
+    fontSize: t.Medium,
+    fontFamily: r.Body,
+    color: e.OnSurface,
+    position: "relative",
+    border: "2px solid transparent",
+    span: {
+      position: "absolute",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      top: "50%",
+      left: "50%",
+      width: "24px",
+      height: "2px",
+      transform: "translate(-50%,-50%)rotate(-45deg)",
+      background: e.OnSurface,
+      opacity: "0.48"
+    },
+    _hover: {
+      background: e.AccentHoverAlpha,
+      borderRadius: n.Medium
+    },
+    _active: {
+      background: e.AccentActiveAlpha
+    },
+    _disabled: {
+      cursor: "not-allowed",
+      borderRadius: "none",
+      color: e.OnSurfaceSubdued,
+      opacity: 0.48
+    }
+  },
+  variants: {
+    normal: {
+      _disabled: {
+        _hover: {
+          background: "none"
+        }
+      }
+    },
+    outSideMonth: {
+      color: e.OnBackgroundSubdued,
+      _disabled: {
+        background: "none"
+      }
+    },
+    currentDay: {
+      color: e.Accent,
+      background: e.Background,
+      span: {
+        background: e.Accent
+      },
+      _hover: {
+        color: e.AccentHover,
+        _disabled: {
+          borderColor: e.Accent,
+          background: "none"
+        }
+      }
+    },
+    selectedDay: {
+      background: e.AccentContainer,
+      color: e.OnSurface,
+      _disabled: {
+        background: e.AccentContainer,
+        color: e.OnSurface
+      },
+      _hover: {
+        background: e.AccentHover,
+        color: e.OnAccent
+      }
+    }
+  }
+});
+export {
+  d as dateCellWeekConfig
+};

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"divider-theme.d.ts","sourceRoot":"","sources":["../../../../lib/theme/theme-config/components/divider-theme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,0BAA0B,EAAqB,MAAM,kBAAkB,CAAC;AAStF,eAAO,MAAM,aAAa,EAAE,0BAE1B,CAAC"}

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

@@ -0,0 +1,12 @@
+import { defineStyleConfig as o } from "@chakra-ui/react";
+import { ThemeColorToken as r } from "../theme-tokens.js";
+const e = {
+  borderColor: r.OnBackgroundBorder,
+  m: 0,
+  opacity: 1
+}, t = o({
+  baseStyle: e
+});
+export {
+  t as dividerConfig
+};

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

@@ -0,0 +1,48 @@
+import { ThemeColorToken } from '../theme-tokens.js';
+export declare const drawerConfig: {
+    baseStyle?: {
+        dialog: {
+            bg: ThemeColorToken;
+            color: ThemeColorToken;
+        };
+    } | undefined;
+    sizes?: {
+        xs: {
+            dialog: {
+                maxWidth: string;
+            };
+        };
+        sm: {
+            dialog: {
+                maxWidth: string;
+            };
+        };
+        md: {
+            dialog: {
+                maxWidth: string;
+            };
+        };
+        lg: {
+            dialog: {
+                maxWidth: string;
+            };
+        };
+        xl: {
+            dialog: {
+                maxWidth: string;
+            };
+        };
+    } | undefined;
+    variants?: {
+        [key: string]: import('@chakra-ui/styled-system').PartsStyleInterpolation<{
+            keys: ("body" | "dialog" | "footer" | "header" | "overlay" | "dialogContainer" | "closeButton")[];
+        }>;
+    } | undefined;
+    defaultProps?: {
+        size?: "lg" | "md" | "sm" | "xl" | "xs" | undefined;
+        variant?: string | number | undefined;
+        colorScheme?: string | undefined;
+    } | undefined;
+    parts: ("body" | "dialog" | "footer" | "header" | "overlay" | "dialogContainer" | "closeButton")[];
+};
+//# sourceMappingURL=drawer-theme.d.ts.map

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

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

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

@@ -0,0 +1,26 @@
+import { drawerAnatomy as i } from "../../../node_modules/@chakra-ui/anatomy/dist/chunk-7OOI6RFH.js";
+import { createMultiStyleConfigHelpers as t } from "@chakra-ui/react";
+import { ThemeColorToken as e } from "../theme-tokens.js";
+const { definePartsStyle: o, defineMultiStyleConfig: a } = t(i.keys), r = {
+  xs: o({ dialog: { maxWidth: "320px" } }),
+  // Chakra default
+  sm: o({ dialog: { maxWidth: "448px" } }),
+  // Chakra default
+  md: o({ dialog: { maxWidth: "560px" } }),
+  // Custom
+  lg: o({ dialog: { maxWidth: "672px" } }),
+  // Chakra default
+  xl: o({ dialog: { maxWidth: "896px" } })
+  // Chakra default
+}, l = o({
+  dialog: {
+    bg: e.Surface,
+    color: e.OnSurface
+  }
+}), n = a({
+  baseStyle: l,
+  sizes: r
+});
+export {
+  n as drawerConfig
+};