@spothero/ui 25.1.5 → 25.2.0-beta.0

package/dist/index.esm.js

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import { Modal as Modal$1, ModalOverlay, ModalContent, Box, ModalCloseButton, keyframes, theme as theme$2, Button as Button$2, Drawer as Drawer$1, DrawerOverlay, DrawerContent, DrawerHeader, DrawerCloseButton, Alert as Alert$1, Icon, VStack, AlertTitle, AlertDescription, Flex, forwardRef as forwardRef$1, Tabs as Tabs$1, FormControl as FormControl$2, FormLabel, Text as Text$1, FormHelperText, FormErrorMessage, Select as Select$2, Switch as Switch$1, Grid as Grid$1, GridItem as GridItem$1, List as List$1, Spinner as Spinner$1, Heading as Heading$1, Container as Container$1, createMultiStyleConfigHelpers, extendTheme, ChakraProvider, Img, Image as Image$1, CircularProgress, Progress as Progress$1, Checkbox as Checkbox$1, Input as Input$2, InputGroup, InputLeftElement, InputRightElement, useTheme, Radio as Radio$1, RadioGroup as RadioGroup$1, Stack, usePrefersReducedMotion, Divider as Divider$1, Textarea as Textarea$1, Popover as Popover$1, PopoverArrow as PopoverArrow$1, PopoverCloseButton as PopoverCloseButton$1, PopoverContent as PopoverContent$1, PopoverHeader, PopoverBody, ButtonGroup, Menu as Menu$1 } from '@chakra-ui/react';
-export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AspectRatio, Badge, Input as BasicInput, Textarea as BasicTextarea, Box, Breadcrumb, BreadcrumbItem, BreadcrumbLink, ButtonGroup, Center, CheckboxGroup, Circle, Code, Collapse, DrawerBody, DrawerCloseButton, Drawer as DrawerContainer, DrawerContent, DrawerFooter, DrawerHeader, DrawerOverlay, Fade, Flex, HStack, Icon, InputGroup, InputLeftAddon, InputLeftElement, InputRightAddon, InputRightElement, Kbd, Link, LinkBox, LinkOverlay, ListItem, MenuButton, MenuDivider, MenuGroup, MenuItem, MenuItemOption, MenuList, MenuOptionGroup, ModalBody, ModalFooter, ModalHeader, PopoverAnchor, PopoverTrigger, Portal, ScaleFade, SimpleGrid, Skeleton, SkeletonCircle, SkeletonText, Slide, SlideFade, Square, Tab, TabList, TabPanel, TabPanels, Table, TableCaption, TableContainer, Tbody, Td, Tfoot, Th, Thead, Tooltip, Tr, VStack, createIcon, keyframes, useBreakpointValue, useClipboard, useControllableProp, useControllableState, useDisclosure, useMediaQuery, usePopper, usePrefersReducedMotion, useStyleConfig, useTheme, useToast, useToken } from '@chakra-ui/react';
+export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AspectRatio, Badge, Input as BasicInput, Textarea as BasicTextarea, Box, Breadcrumb, BreadcrumbItem, BreadcrumbLink, ButtonGroup, Center, CheckboxGroup, Circle, Code, Collapse, DrawerBody, DrawerCloseButton, Drawer as DrawerContainer, DrawerContent, DrawerFooter, DrawerHeader, DrawerOverlay, Fade, Flex, HStack, Icon, InputGroup, InputLeftAddon, InputLeftElement, InputRightAddon, InputRightElement, Kbd, Link, LinkBox, LinkOverlay, ListItem, MenuButton, MenuDivider, MenuGroup, MenuItem, MenuItemOption, MenuList, MenuOptionGroup, ModalBody, ModalFooter, ModalHeader, PopoverAnchor, PopoverTrigger, Portal, ScaleFade, SimpleGrid, Skeleton, SkeletonCircle, SkeletonText, Slide, SlideFade, Square, Tab, TabList, TabPanel, TabPanels, Table, TableCaption, TableContainer, Tbody, Td, Tfoot, Th, Thead, Tooltip, Tr, VStack, createIcon, extendTheme, keyframes, useBreakpointValue, useClipboard, useControllableProp, useControllableState, useDisclosure, useMediaQuery, usePopper, usePrefersReducedMotion, useStyleConfig, useTheme, useToast, useToken } from '@chakra-ui/react';
 import * as React from 'react';
 import React__default, { forwardRef, useState, useEffect, Children, cloneElement } from 'react';
 import merge from 'lodash/merge';
@@ -9,7 +9,7 @@ import { accordionAnatomy, selectAnatomy } from '@chakra-ui/anatomy';
 import template from 'lodash/template';
 import cn from 'classnames';
 import AsyncSelect from 'react-select/async';
-import { motion } from 'framer-motion';
+import { motion, AnimatePresence } from 'framer-motion';
 import Creatable from 'react-select/creatable';
 import { components as components$1 } from 'react-select';
 
@@ -748,6 +748,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,
@@ -757,7 +770,7 @@ const baseStyle$f = {
   fontWeight: 'semibold',
   borderWidth: '1px',
   borderStyle: 'solid',
-  borderRadius: '1.25rem',
+  borderRadius: 'md',
   textTransform: 'capitalize',
   transition: 'all normal ease',
   _disabled: {
@@ -788,25 +801,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)'
@@ -817,18 +883,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)'
@@ -849,13 +915,11 @@ const variants$d = {
       color: 'gray.dark'
     },
     _hover: {
-      color: 'primary.600',
       _disabled: {
         color: 'gray.dark'
       }
     },
     _active: {
-      color: 'primary.600',
       _disabled: {
         color: 'gray.dark'
       }
@@ -873,13 +937,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
       }
     }
   },
@@ -964,20 +1028,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__*/forwardRef((_ref, ref) => {
   let {
       asAnchor,
@@ -3569,7 +3619,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
@@ -4170,7 +4220,7 @@ RadioGroup.propTypes = {
   direction: PropTypes.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__*/forwardRef((_ref, ref) => {
   let {
       isChecked,
@@ -4184,15 +4234,23 @@ const SelectionCard = /*#__PURE__*/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 = usePrefersReducedMotion();
+
+  // Create a unique key based on the content to force re-animation
+  const contentKey = React__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__default.createElement(Box, {
-    paddingBottom: hasExpandableContent ? 3 : 0,
     borderRadius: "lg",
     borderColor: isChecked ? 'primary.default' : 'gray.medium',
     borderWidth: "1px",
@@ -4215,21 +4273,34 @@ const SelectionCard = /*#__PURE__*/forwardRef((_ref, ref) => {
     width: "100%",
     paddingX: 4,
     paddingY: 3
-  }, props), label)), /*#__PURE__*/React__default.createElement(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__default.createElement(Box, {
+  }, props), label)), /*#__PURE__*/React__default.createElement(AnimatePresence, {
+    mode: "wait"
+  }, hasExpandableContent && /*#__PURE__*/React__default.createElement(Box, {
+    as: 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__default.createElement(Box, _extends$6({
+  }, /*#__PURE__*/React__default.createElement(Box, _extends$6({
     color: "gray.600",
     fontSize: expandableTextSize,
     paddingTop: 3,
-    paddingX: 4
+    paddingX: 4,
+    paddingBottom: 3
   }, expandableChildrenStyles), expandableChildren))));
 });
 SelectionCard.propTypes = {
@@ -4244,7 +4315,8 @@ SelectionCard.propTypes = {
   isExpandable: PropTypes.bool,
   expandableChildrenStyles: PropTypes.object,
   size: PropTypes.oneOf(['sm', 'md', 'lg']),
-  topChild: PropTypes.element
+  topChild: PropTypes.element,
+  expandableContentKey: PropTypes.string
 };
 
 const _excluded$4 = ["variant", "colorScheme"];