@spothero/ui 25.1.5 → 25.2.0-beta.0

package/dist/components/Accordion/styles/index.d.ts

@@ -0,0 +1,93 @@
+export declare const accordionTheme: {
+    baseStyle?: {
+        icon: {
+            color: string;
+        };
+        button: {
+            display: string;
+            gridGap: number;
+            alignItems: string;
+            fontSize: string;
+            fontWeight: string;
+            _hover: {
+                backgroundColor: string;
+            };
+        };
+        container: {
+            borderColor: string;
+        };
+    } | undefined;
+    sizes?: {
+        [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
+            keys: ("container" | "button" | "root" | "panel" | "icon")[];
+        }>;
+    } | undefined;
+    variants?: {
+        lined: {
+            button: {
+                px: number;
+                py: number;
+            };
+            container: {
+                borderTopWidth: number;
+                _last: {
+                    borderBottomWidth: number;
+                };
+            };
+            panel: {
+                px: number;
+                py: number;
+            };
+        };
+        contained: {
+            button: {
+                px: number;
+                py: number;
+            };
+            container: {
+                borderLeftWidth: number;
+                borderRightWidth: number;
+                _first: {
+                    borderTopLeftRadius: number;
+                    borderTopRightRadius: number;
+                };
+                _last: {
+                    borderBottomLeftRadius: number;
+                    borderBottomRightRadius: number;
+                };
+            };
+            panel: {
+                p: number;
+                borderColor: string;
+                borderTopWidth: number;
+            };
+        };
+        unstyled: {
+            icon: {
+                color: string;
+            };
+            button: {
+                display: string;
+                alignItems: string;
+                fontSize: string;
+                fontWeight: string;
+                _hover: {
+                    backgroundColor: string;
+                };
+                paddingTop: string;
+                paddingBottom: string;
+            };
+            container: {
+                borderColor: string;
+            };
+        };
+    } | undefined;
+    defaultProps?: {
+        size?: string | number | undefined;
+        variant?: "lined" | "contained" | "unstyled" | undefined;
+        colorScheme?: string | undefined;
+    } | undefined;
+    parts: ("container" | "button" | "root" | "panel" | "icon")[];
+};
+export declare const theme: Record<string, any>;
+export default theme;

package/dist/components/RefreshedInput/Select/styles/index.d.ts

@@ -0,0 +1,73 @@
+export declare const selectTheme: {
+    baseStyle?: import("@chakra-ui/react").PartsStyleInterpolation<{
+        keys: ("icon" | "field")[];
+    }> | undefined;
+    sizes?: {
+        [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
+            keys: ("icon" | "field")[];
+        }>;
+    } | undefined;
+    variants?: {
+        refreshed: {
+            field: {
+                height: string;
+                paddingTop: number;
+                paddingBottom: number;
+                border: string;
+                borderColor: string;
+                bg: string;
+                _hover: {
+                    borderColor: string;
+                };
+                _readOnly: {
+                    boxShadow: string;
+                    userSelect: string;
+                };
+                _disabled: {
+                    opacity: number;
+                    cursor: string;
+                };
+                _invalid: {
+                    borderColor: string;
+                    boxShadow: (t: any) => string;
+                };
+                _focus: {
+                    borderColor: string;
+                    boxShadow: (t: any) => string;
+                };
+            };
+            icon: {
+                border: string;
+                borderColor: string;
+                bg: string;
+                _hover: {
+                    borderColor: string;
+                };
+                _readOnly: {
+                    boxShadow: string;
+                    userSelect: string;
+                };
+                _disabled: {
+                    opacity: number;
+                    cursor: string;
+                };
+                _invalid: {
+                    borderColor: string;
+                    boxShadow: (t: any) => string;
+                };
+                _focus: {
+                    borderColor: string;
+                    boxShadow: (t: any) => string;
+                };
+            };
+        };
+    } | undefined;
+    defaultProps?: {
+        size?: string | number | undefined;
+        variant?: "refreshed" | undefined;
+        colorScheme?: string | undefined;
+    } | undefined;
+    parts: ("icon" | "field")[];
+};
+export declare const theme: Record<string, any>;
+export default theme;

package/dist/components/Select/styles/index.d.ts

@@ -76,7 +76,7 @@ declare const _default: {
         };
     } | undefined;
     variants?: {
-        outline: (props: import(".pnpm/@chakra-ui+styled-system@2.9.2/node_modules/@chakra-ui/styled-system").StyleFunctionProps) => {
+        outline: (props: import("@chakra-ui/react").StyleFunctionProps) => {
             field: {
                 border: string;
                 borderColor: string;
@@ -104,7 +104,7 @@ declare const _default: {
                 bg: string;
             };
         };
-        filled: (props: import(".pnpm/@chakra-ui+styled-system@2.9.2/node_modules/@chakra-ui/styled-system").StyleFunctionProps) => {
+        filled: (props: import("@chakra-ui/react").StyleFunctionProps) => {
             field: {
                 border: string;
                 borderColor: string;
@@ -130,7 +130,7 @@ declare const _default: {
                 bg: string;
             };
         };
-        flushed: (props: import(".pnpm/@chakra-ui+styled-system@2.9.2/node_modules/@chakra-ui/styled-system").StyleFunctionProps) => {
+        flushed: (props: import("@chakra-ui/react").StyleFunctionProps) => {
             field: {
                 borderBottom: string;
                 borderColor: string;
@@ -172,8 +172,8 @@ declare const _default: {
         };
     } | undefined;
     defaultProps?: {
-        size?: "sm" | "xs" | "md" | "lg" | undefined;
-        variant?: "outline" | "unstyled" | "filled" | "flushed" | undefined;
+        size?: "md" | "xs" | "sm" | "lg" | undefined;
+        variant?: "outline" | "filled" | "unstyled" | "flushed" | undefined;
         colorScheme?: string | undefined;
     } | undefined;
     parts: ("icon" | "field")[];

package/dist/index.cjs.js

@@ -776,6 +776,19 @@ var base = /*#__PURE__*/Object.freeze({
   zIndices: indices
 });
 
+const heightProps = function () {
+  let height = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'md';
+  const heights = {
+    md: {},
+    lg: {
+      height: 12,
+      lineHeight: sizes$6['6']
+    }
+  };
+  return heights[height] || {
+    height // when a custom height is provided, pass it as is
+  };
+};
 const baseStyle$f = {
   px: 8,
   py: 3,
@@ -785,7 +798,7 @@ const baseStyle$f = {
   fontWeight: 'semibold',
   borderWidth: '1px',
   borderStyle: 'solid',
-  borderRadius: '1.25rem',
+  borderRadius: 'md',
   textTransform: 'capitalize',
   transition: 'all normal ease',
   _disabled: {
@@ -816,25 +829,78 @@ const destructiveButtonStyles = {
     color: 'red.800'
   }, disabledButtonHoverStyle)
 };
+
+/**
+ * ## OKLCH Color Adjustments Reference
+ *  | State | OKLCH Calculation | Visual Effect |
+ *  |-------|-------------------|---------------|
+ *  | Default | `primary.default` | Base color |
+ *  | Hover (light bg) | `calc(l - 0.1)` | 10% darker (lightness) |
+ *  | Active/Pressed | `calc(l - 0.15)` | 15% darker (lightness) |
+ *  | Hover (secondary) | `calc(l - 0.3)` | 3% darker (lightness) |
+ *  | Active/Pressed (secondary) | `calc(l - 0.6)` | 6% darker (lightness) |
+ *  | Hover (dark bg) | `calc(l + 0.1)` | 10% lighter (lightness) |
+ *  | Disabled | `opacity: 0.4` | 60% transparent |
+*/
+
+//Helper function to make oklch color strings
+const generateOklchColor = (colorVar, adjustment) => {
+  return "oklch(from var(--chakra-colors-".concat(colorVar, ") calc(l ").concat(adjustment, ") c h)");
+};
+
+// 10% darker (lightness)
+const hoverPrimaryColor = generateOklchColor('primary-default', '- 0.1');
+// 15% darker (lightness)
+const activePrimaryColor = generateOklchColor('primary-default', '- 0.15');
+// 3% darker (lightness)
+const hoverSecondaryColor = generateOklchColor('white', '- 0.03');
+// 6% darker (lightness)
+const activeSecondaryColor = generateOklchColor('white', '- 0.06');
+// 10% lighter (lightness)
+const hoverDarkColor = generateOklchColor('yellow-default', '+ 0.1');
+
+/**
+ * Button Variants - Simplified Color System Using OKLCH
+ *
+ * This implementation uses OKLCH relative color syntax for perceptually uniform color adjustments.
+ * Benefits:
+ * - White-label theming: Only need ONE brand color (primary.default)
+ * - No package dependencies (native CSS)
+ * - Text color NOT affected (unlike CSS filters)
+ * - Perceptually uniform adjustments (10% lighter looks consistent across all hues)
+ * - Can adjust lightness, chroma, or hue independently
+ * - Future-proof modern CSS standard
+ *
+ * OKLCH Syntax: oklch(from <color> <lightness> <chroma> <hue>)
+ * - Lightness adjustments: calc(l - 0.1) = 10% darker, calc(l + 0.1) = 10% lighter
+ * - Works with any color format (hex, rgb, etc.) - CSS converts automatically
+ *
+ * Browser Support: Chrome 111+, Safari 16.4+, Firefox 113+ (Mar-May 2023)
+ * Fallback: Older browsers use base color without hover effect degradation
+ *
+ * Note: Destructive variants still use semantic red for safety/UX consistency
+ */
 const variants$d = {
   primary: {
     bg: 'primary.default',
     borderColor: 'primary.default',
     color: 'white',
     _hover: _objectSpread2({
-      bg: 'primary.600',
-      borderColor: 'primary.600',
-      color: 'white'
-    }, disabledButtonHoverStyle)
+      bg: hoverPrimaryColor,
+      borderColor: hoverPrimaryColor
+    }, disabledButtonHoverStyle),
+    _active: {
+      bg: activePrimaryColor,
+      borderColor: activePrimaryColor
+    }
   },
   primaryOnDark: {
     bg: 'yellow.default',
     borderColor: 'yellow.default',
     color: 'black',
     _hover: _objectSpread2({
-      bg: 'yellow.500',
-      borderColor: 'yellow.500',
-      color: 'black'
+      bg: hoverDarkColor,
+      borderColor: hoverDarkColor
     }, disabledButtonHoverStyle),
     _focus: {
       boxShadow: '0 0 0 3px rgba(255, 255, 255, 0.7)'
@@ -845,18 +911,18 @@ const variants$d = {
     borderColor: 'gray.medium',
     color: 'primary.default',
     _hover: _objectSpread2({
-      borderColor: 'primary.600',
-      color: 'primary.600'
-    }, disabledButtonHoverStyle)
+      bg: hoverSecondaryColor
+    }, disabledButtonHoverStyle),
+    _active: {
+      bg: activeSecondaryColor
+    }
   },
   secondaryOnDark: {
     bg: 'none',
     borderColor: 'white',
     color: 'white',
     _hover: _objectSpread2({
-      bg: 'white',
-      borderColor: 'white',
-      color: 'black'
+      bg: 'white'
     }, disabledButtonHoverStyle),
     _focus: {
       boxShadow: '0 0 0 3px rgba(255, 255, 255, 0.7)'
@@ -877,13 +943,11 @@ const variants$d = {
       color: 'gray.dark'
     },
     _hover: {
-      color: 'primary.600',
       _disabled: {
         color: 'gray.dark'
       }
     },
     _active: {
-      color: 'primary.600',
       _disabled: {
         color: 'gray.dark'
       }
@@ -901,13 +965,13 @@ const variants$d = {
     _disabled: {
       bg: 'none',
       color: 'white',
-      opacity: '.7'
+      opacity: 0.4
     },
     _hover: {
       color: 'white',
-      opacity: '.8',
+      opacity: 0.8,
       _disabled: {
-        opacity: '.7'
+        opacity: 0.4
       }
     }
   },
@@ -992,20 +1056,6 @@ const anchorProps = function () {
     rel: 'noopener noreferrer'
   });
 };
-const heightProps = function () {
-  let height = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'md';
-  const heights = {
-    md: {},
-    lg: {
-      height: 12,
-      borderRadius: sizes$6['6'],
-      lineHeight: sizes$6['6']
-    }
-  };
-  return heights[height] || {
-    height // when a custom height is provided, pass it as is
-  };
-};
 const Button$1 = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
       asAnchor,
@@ -3597,7 +3647,7 @@ const controlStyles = {
           color: 'gray.600'
         },
         '& + label': {
-          color: 'error'
+          color: 'text.secondary.light'
         },
         '& + label .chakra-form__required-indicator': {
           //Styling for asterisk always to be red if invalid
@@ -4198,7 +4248,7 @@ RadioGroup.propTypes = {
   direction: PropTypes__default.default.oneOf(['row', 'column'])
 };
 
-const _excluded$5 = ["isChecked", "isDisabled", "value", "helperText", "expandableChildren", "defaultChecked", "isRadio", "label", "isExpandable", "size", "expandableChildrenStyles", "topChild"];
+const _excluded$5 = ["isChecked", "isDisabled", "value", "helperText", "expandableChildren", "defaultChecked", "isRadio", "label", "isExpandable", "size", "expandableChildrenStyles", "topChild", "expandableContentKey"];
 const SelectionCard = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
       isChecked,
@@ -4212,15 +4262,23 @@ const SelectionCard = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       isExpandable,
       size = 'md',
       expandableChildrenStyles = {},
-      topChild
+      topChild,
+      expandableContentKey = 'selection-card-content'
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded$5);
   const Component = isRadio ? Radio : Checkbox;
   const expandableTextSize = size === 'sm' || size === 'md' ? 'xs' : 'sm';
   const hasExpandableContent = isExpandable && isChecked && expandableChildren;
   const prefersReducedMotion = react.usePrefersReducedMotion();
+
+  // Create a unique key based on the content to force re-animation
+  const contentKey = React__namespace.default.useMemo(() => {
+    if (typeof expandableChildren === 'string') {
+      return expandableChildren;
+    }
+    return expandableContentKey || JSON.stringify(expandableChildren === null || expandableChildren === void 0 ? void 0 : expandableChildren.props) || Math.random();
+  }, [expandableChildren, expandableContentKey]);
   return /*#__PURE__*/React__namespace.default.createElement(react.Box, {
-    paddingBottom: hasExpandableContent ? 3 : 0,
     borderRadius: "lg",
     borderColor: isChecked ? 'primary.default' : 'gray.medium',
     borderWidth: "1px",
@@ -4243,21 +4301,34 @@ const SelectionCard = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     width: "100%",
     paddingX: 4,
     paddingY: 3
-  }, props), label)), /*#__PURE__*/React__namespace.default.createElement(react.Box, {
-    overflow: "hidden",
-    display: "grid"
-    // Using this as a pseudo height transition to get around no height auto transition
-    ,
-    gridTemplateRows: hasExpandableContent ? '1fr' : '0fr',
-    opacity: hasExpandableContent ? '100%' : '0%',
-    transition: prefersReducedMotion ? '' : 'all 150ms ease-out'
-  }, /*#__PURE__*/React__namespace.default.createElement(react.Box, {
+  }, props), label)), /*#__PURE__*/React__namespace.default.createElement(framerMotion.AnimatePresence, {
+    mode: "wait"
+  }, hasExpandableContent && /*#__PURE__*/React__namespace.default.createElement(react.Box, {
+    as: framerMotion.motion.div,
+    key: contentKey,
+    initial: {
+      height: 0,
+      opacity: 0
+    },
+    animate: {
+      height: 'auto',
+      opacity: 1
+    },
+    exit: {
+      height: 0,
+      opacity: 0
+    },
+    transition: {
+      duration: prefersReducedMotion ? 0 : 0.15,
+      ease: 'easeOut'
+    },
     overflow: "hidden"
-  }, hasExpandableContent && /*#__PURE__*/React__namespace.default.createElement(react.Box, _extends$6({
+  }, /*#__PURE__*/React__namespace.default.createElement(react.Box, _extends$6({
     color: "gray.600",
     fontSize: expandableTextSize,
     paddingTop: 3,
-    paddingX: 4
+    paddingX: 4,
+    paddingBottom: 3
   }, expandableChildrenStyles), expandableChildren))));
 });
 SelectionCard.propTypes = {
@@ -4272,7 +4343,8 @@ SelectionCard.propTypes = {
   isExpandable: PropTypes__default.default.bool,
   expandableChildrenStyles: PropTypes__default.default.object,
   size: PropTypes__default.default.oneOf(['sm', 'md', 'lg']),
-  topChild: PropTypes__default.default.element
+  topChild: PropTypes__default.default.element,
+  expandableContentKey: PropTypes__default.default.string
 };
 
 const _excluded$4 = ["variant", "colorScheme"];
@@ -5136,6 +5208,10 @@ Object.defineProperty(exports, "createIcon", {
   enumerable: true,
   get: function () { return react.createIcon; }
 });
+Object.defineProperty(exports, "extendTheme", {
+  enumerable: true,
+  get: function () { return react.extendTheme; }
+});
 Object.defineProperty(exports, "keyframes", {
   enumerable: true,
   get: function () { return react.keyframes; }