@economic/taco 1.0.0-alpha.0 → 1.0.1

package/dist/taco.cjs.development.js

@@ -3148,7 +3148,7 @@ var Icon = /*#__PURE__*/React__default.forwardRef(function Icon(props, ref) {
   var Component = icons[name];
   /* 24x24 _at the base body font_ - must be em so that they scale with font size - tailwind spacing uses rem */
 
-  var className = cn('inline-flex h-[1.715em] w-[1.715em]', props.className, {
+  var className = cn('inline-flex h-[1.715em] w-[1.715em] flex-shrink-0', props.className, {
     'p-[3px]': (_props$className = props.className) === null || _props$className === void 0 ? void 0 : _props$className.includes('rounded-full')
   });
   return Component ? React__default.createElement(Component, Object.assign({}, otherProps, {
@@ -3311,7 +3311,7 @@ var Badge = /*#__PURE__*/React.forwardRef(function Badge(props, ref) {
       state = props.state,
       otherProps = _objectWithoutPropertiesLoose(props, _excluded$2);
 
-  var className = cn('rounded-full border font-bold text-xs uppercase overflow-hidden whitespace-nowrap inline-flex items-center justify-center h-5', (_cn = {}, _cn[getOutlineClasses(state)] = outline, _cn["border-transparent " + getStateClasses(state)] = !outline, _cn['h-2 w-2 min-w-0'] = compact, _cn['h-5 py-0 px-[0.354rem]'] = !compact, _cn), props.className);
+  var className = cn('rounded-full border font-bold text-xs uppercase overflow-hidden whitespace-nowrap inline-flex items-center justify-center h-5', (_cn = {}, _cn[getOutlineClasses(state)] = outline, _cn["border-transparent " + getStateClasses(state)] = !outline, _cn['h-2 w-2 min-w-0'] = compact, _cn['h-5 py-0 px-1.5'] = !compact, _cn), props.className);
   return React.createElement("span", Object.assign({}, otherProps, {
     "aria-atomic": "true",
     "aria-live": "polite",
@@ -3328,25 +3328,25 @@ var getBannerIcon = function getBannerIcon(type) {
     case 'success':
       return React__default.createElement(Icon, {
         name: "tick",
-        className: "rounded-full yt-green-solid mr-4"
+        className: "yt-green-solid mt-1 self-start rounded-full"
       });
 
     case 'error':
       return React__default.createElement(Icon, {
         name: "warning",
-        className: "rounded-full yt-red-solid mr-4"
+        className: "yt-red-solid mt-1 self-start rounded-full"
       });
 
     case 'warning':
       return React__default.createElement(Icon, {
         name: "warning",
-        className: "rounded-full yt-yellow-solid mr-4"
+        className: "yt-yellow-solid mt-1 self-start rounded-full"
       });
 
     case 'information':
       return React__default.createElement(Icon, {
         name: "info",
-        className: "rounded-full yt-blue-solid mr-4"
+        className: "yt-blue-solid mt-1 self-start rounded-full"
       });
 
     default:
@@ -3391,7 +3391,7 @@ var Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(props, ref) {
     side: placement,
     sideOffset: 3
   }), React.createElement("div", {
-    className: "wcag-purple animate-[fade-in_150ms] rounded-sm px-2 py-1 text-xs font-bold",
+    className: "wcag-purple max-w-[theme(spacing.56)] animate-[fade-in_150ms] rounded-sm px-2 py-1 text-xs font-bold opacity-90",
     "data-taco": "tooltip",
     style: {
       transformOrigin: 'var(--radix-tooltip-content-transform-origin)'
@@ -3403,7 +3403,7 @@ var Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(props, ref) {
 
 var _excluded$5 = ["dialog", "hanger", "menu", "popover", "tooltip"];
 var getButtonClasses = function getButtonClasses() {
-  return 'min-h-[theme(spacing.8)] min-w-[theme(spacing.8)] gap-1 h-max inline-flex items-center justify-center border';
+  return 'min-h-[theme(spacing.8)] min-w-[theme(spacing.8)] gap-1 h-max leading-5 inline-flex items-center justify-center border';
 };
 var getAppearanceClasses = function getAppearanceClasses(value, icon) {
   if (icon === void 0) {
@@ -3412,18 +3412,18 @@ var getAppearanceClasses = function getAppearanceClasses(value, icon) {
 
   switch (value) {
     case 'primary':
-      return "yt-blue-solid border-blue focus:bg-blue focus:text-white focus:yt-focus active:bg-blue-dark active:text-white  hover:bg-blue-light hover:border-blue-light hover:text-white hover:focus:bg-blue-light hover:focus:border-blue-light hover:focus:text-white disabled:hover:yt-blue-solid";
+      return "yt-blue-solid border-blue focus:bg-blue focus:text-white focus:yt-focus active:bg-blue-dark active:text-white hover:bg-blue-light hover:border-blue-light hover:text-white hover:focus:bg-blue-light hover:focus:border-blue-light hover:focus:text-white disabled:hover:yt-blue-solid disabled:hover:hover:border-blue";
 
     case 'danger':
-      return "yt-red-solid border-red focus:bg-red focus:text-white focus:yt-focus-red active:bg-red-dark active:text-white  hover:bg-red-light hover:text-white hover:focus:bg-red-light hover:focus:text-white disabled:hover:yt-red-solid";
+      return "yt-red-solid border-red focus:bg-red focus:text-white focus:yt-focus-red active:bg-red-dark active:text-white hover:bg-red-light hover:text-white hover:focus:bg-red-light hover:focus:text-white disabled:hover:yt-red-solid";
 
     case 'ghost':
-      return "yt-blue-inverted focus:bg-transparent focus:text-blue focus:yt-focus active:bg-blue-lightest active:border-blue active:text-blue-dark  hover:bg-blue-lightest hover:border-blue-light hover:text-blue-light hover:focus:bg-blue-lightest hover:focus:border-blue-light hover:focus:text-blue-light disabled:hover:yt-blue-inverted";
+      return "yt-blue-inverted focus:bg-transparent focus:text-blue focus:yt-focus active:bg-blue-lightest active:border-blue active:text-blue-dark hover:bg-blue-lightest hover:border-blue-light hover:text-blue-light hover:focus:bg-blue-lightest hover:focus:border-blue-light hover:focus:text-blue-light disabled:hover:yt-blue-inverted";
 
     case 'discrete':
       {
         if (icon) {
-          return "bg-transparent text-black border-transparent focus:text-black focus:yt-focus active:text-black hover:text-grey-darkest hover:focus:text-grey-darkest disabled:hover:yt-transparent";
+          return "bg-transparent text-black border-transparent focus:text-black focus:yt-focus active:text-black hover:text-grey-darkest hover:focus:text-grey-darkest disabled:hover:text-black ";
         }
 
         return "yt-transparent border-transparent focus:text-blue focus:yt-focus active:text-blue-dark hover:text-blue-light hover:focus:text-blue-light disabled:hover:yt-transparent";
@@ -3507,13 +3507,13 @@ var Banner = /*#__PURE__*/React.forwardRef(function Banner(props, ref) {
   var children = props.children,
       state = props.state,
       onClose = props.onClose;
-  var className = cn('bg-white relative flex items-center px-4 h-12 shadow-lg z-10', props.className);
+  var className = cn('bg-white relative flex items-center gap-2 py-2 px-4 leading-6 shadow-md z-10', props.className);
   return React.createElement("div", {
     className: className,
     "data-taco": "banner",
     ref: ref
   }, getBannerIcon(state), children, onClose ? React.createElement(IconButton, {
-    className: "ml-auto -mr-2",
+    className: "ml-auto -mr-2 self-start",
     icon: "close",
     appearance: "discrete",
     onClick: onClose
@@ -4202,12 +4202,12 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(props, ref) {
       onChange = props.onChange,
       otherProps = _objectWithoutPropertiesLoose(props, _excluded$c);
 
-  var className = cn('bg-white h-5 w-5 border rounded text-sm flex-shrink-0 self-start mt-[0.1rem]', props.className, {
-    'mr-2': !!label,
-    'border-grey-dark text-blue focus:border-blue focus:yt-focus': !props.disabled && !invalid,
+  var className = cn('bg-white h-5 w-5 border rounded text-sm flex-shrink-0 self-start mt-[0.1rem] focus:yt-focus', //hover:shadow-[0_0_0_1px_rgba(235,235,235,1)]
+  props.className, {
+    'border-grey-dark text-blue hover:text-blue-light focus:border-blue focus:hover:border-blue-light': !props.disabled && !invalid,
     'border-grey text-blue-light cursor-not-allowed': props.disabled,
     'bg-[rgba(255,255,0,0.2)] disabled:bg-[rgba(255,255,0,0.075)]': highlighted,
-    'border-red text-red focus:border-red focus:yt-focus-red': invalid && !props.disabled
+    'border-red text-red hover:text-red-light hover:border-red-light focus:border-red focus:hover:border-red-light': invalid && !props.disabled
   });
   var handleChange;
 
@@ -4231,7 +4231,7 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(props, ref) {
   })));
 
   if (label) {
-    var labelClassName = cn('flex items-center cursor-pointer', {
+    var labelClassName = cn('flex items-center cursor-pointer gap-2', {
       'cursor-not-allowed text-grey-dark': props.disabled
     }, props.className);
     return React.createElement("label", {
@@ -4319,9 +4319,9 @@ var Input = /*#__PURE__*/React.forwardRef(function Input(props, ref) {
     var extra;
 
     if (button) {
-      var _button$props$disable, _cn;
+      var _cn;
 
-      var disabled = (_button$props$disable = button.props.disabled) !== null && _button$props$disable !== void 0 ? _button$props$disable : otherProps.disabled;
+      var disabled = button.props.disabled || otherProps.disabled;
       var buttonClassName = cn('items-center flex justify-center border absolute rounded-l-none rounded-r right-0 h-full focus:rounded focus:outline-none', (_cn = {}, _cn[getButtonStateClasses(invalid)] = !props.disabled, _cn), button.props.className);
       extra = React.cloneElement(button, {
         className: buttonClassName,
@@ -5573,8 +5573,6 @@ Popover.Close = Close$1;
 
 var _excluded$l = ["className", "onReset", "style", "shortcuts", "shortcutsText"];
 var Datepicker = /*#__PURE__*/React.forwardRef(function Datepicker(props, ref) {
-  var _input$disabled;
-
   var externalClassName = props.className,
       handleReset = props.onReset,
       style = props.style,
@@ -5597,12 +5595,12 @@ var Datepicker = /*#__PURE__*/React.forwardRef(function Datepicker(props, ref) {
   }, React.createElement(Input, Object.assign({}, input, {
     button: React.createElement(Popover, null, React.createElement(Popover.Trigger, null, React.createElement(IconButton, {
       "aria-label": texts.datepicker.expand,
-      disabled: (_input$disabled = input.disabled) !== null && _input$disabled !== void 0 ? _input$disabled : input.readOnly,
+      disabled: input.disabled || input.readOnly,
       icon: "calendar"
     })), React.createElement(Popover.Content, null, function (_ref) {
       var close = _ref.close;
       return React.createElement("div", {
-        className: "flex -m-3"
+        className: "-m-3 flex"
       }, React.createElement(Calendar$1, Object.assign({}, calendar, {
         onChange: function onChange(date, event) {
           calendar.onChange(date, event);
@@ -5610,14 +5608,14 @@ var Datepicker = /*#__PURE__*/React.forwardRef(function Datepicker(props, ref) {
         },
         tabIndex: -1
       })), shortcuts && React.createElement("div", {
-        className: "border-l border-grey-dark flex flex-col"
+        className: "border-grey-dark flex flex-col border-l"
       }, React.createElement("span", {
-        className: "font-semibold text-xs m-4 flex items-center h-8 w-32 mb-3"
+        className: "m-4 mb-3 flex h-8 w-32 items-center text-xs font-semibold"
       }, shortcutsText !== null && shortcutsText !== void 0 ? shortcutsText : texts.datepicker.shortcuts), React.createElement("ul", null, shortcuts.map(function (shortcut, i) {
         return React.createElement("li", {
           key: i
         }, React.createElement("button", {
-          className: "w-full px-4 py-1 flex items-start hover:bg-grey-light text-xs",
+          className: "hover:bg-grey-light flex w-full items-start px-4 py-1 text-xs",
           onClick: function onClick(event) {
             event.persist();
             shortcut.onClick(event);
@@ -5625,7 +5623,7 @@ var Datepicker = /*#__PURE__*/React.forwardRef(function Datepicker(props, ref) {
           }
         }, shortcut.text));
       })), handleReset && React.createElement("button", {
-        className: "text-blue hover:text-blue-light inline-flex border-none bg-transparent text-xs cursor-pointer mt-auto my-4 mx-auto",
+        className: "text-blue hover:text-blue-light my-4 mx-auto mt-auto inline-flex cursor-pointer border-none bg-transparent text-xs",
         onClick: function onClick(event) {
           event.persist();
           handleReset(event);
@@ -6047,13 +6045,20 @@ var Anchor = /*#__PURE__*/React.forwardRef(function HangerAnchor(props, ref) {
     asChild: true
   }));
 });
+var Title$1 = /*#__PURE__*/React.forwardRef(function DialogTitle(props, ref) {
+  var className = cn('mb-1 text-base font-bold flex w-full', props.className);
+  return React.createElement("span", Object.assign({}, props, {
+    className: className,
+    ref: ref
+  }));
+});
 var Content$3 = /*#__PURE__*/React.forwardRef(function HangerContent(props, ref) {
   var context = React.useContext(HangerContext);
 
   var _useLocalization = useLocalization(),
       texts = _useLocalization.texts;
 
-  var className = cn('wcag-blue border border-transparent rounded p-3 pr-12 yt-shadow z-[996] focus:border-transparent', props.className);
+  var className = cn('wcag-blue border border-transparent rounded p-3 pr-12 yt-shadow z-[996] focus:border-transparent max-w-sm', props.className);
 
   var handleInteractOutside = function handleInteractOutside(event) {
     event.preventDefault();
@@ -6109,6 +6114,7 @@ var Hanger = /*#__PURE__*/React.forwardRef(function Hanger(props, ref) {
 });
 Hanger.Anchor = Anchor;
 Hanger.Content = Content$3;
+Hanger.Title = Title$1;
 
 var _excluded$r = ["onSearch"];
 var SearchInput = /*#__PURE__*/React.forwardRef(function SearchInput(_ref, ref) {
@@ -6853,20 +6859,20 @@ var RadioGroupItem = /*#__PURE__*/React.forwardRef(function RadioGroupItem(props
       value = props.value,
       otherProps = _objectWithoutPropertiesLoose(props, _excluded$z);
 
-  var disabled = context.disabled || props.disabled;
-  var className = cn('flex flex-shrink-0 self-start items-center justify-center h-4 w-4 mr-2 mt-[0.2rem] rounded-full bg-white border-2 ', {
-    'border-grey-dark focus:border-blue focus:yt-focus aria-checked:bg-blue aria-checked:border-blue': !disabled && !context.invalid,
-    'border-grey cursor-not-allowed aria-checked:bg-grey-dark aria-checked:border-grey-dark': disabled,
-    'border-red text-red focus:border-red focus:yt-focus-red aria-checked:bg-red aria-checked:border-red': context.invalid && !disabled
+  var isDisabled = context.disabled || props.disabled;
+  var className = cn('flex flex-shrink-0 self-start items-center justify-center h-4 w-4 mt-[0.2rem] rounded-full bg-white border-2 hover:border-4', {
+    'border-grey-dark focus:yt-focus aria-checked:bg-blue aria-checked:border-blue hover:aria-checked:border-blue-light': !isDisabled && !context.invalid,
+    'border-grey cursor-not-allowed aria-checked:bg-blue-light aria-checked:border-blue-light ': isDisabled,
+    'border-red text-red focus:border-red focus:yt-focus-red aria-checked:bg-red aria-checked:border-red': context.invalid && !isDisabled
   });
-  var labelClassName = cn('flex items-center cursor-pointer', {
-    'cursor-not-allowed text-grey-dark': disabled
+  var labelClassName = cn('flex items-center cursor-pointer gap-2', {
+    'cursor-not-allowed text-grey-dark': isDisabled
   }, props.className);
   return React.createElement("label", {
     className: labelClassName
   }, React.createElement(RadioGroupPrimitive.Item, Object.assign({}, otherProps, {
     className: className,
-    disabled: disabled,
+    disabled: isDisabled,
     ref: ref,
     value: getRadioGroupItemValueAsString(value)
   }), React.createElement(RadioGroupPrimitive.Indicator, {
@@ -6929,9 +6935,9 @@ var RadioGroup = /*#__PURE__*/React.forwardRef(function RadioGroup(props, ref) {
       context = _useRadioGroup.context,
       otherProps = _useRadioGroup.props;
 
-  var className = cn('flex items-start', {
-    'flex-wrap space-x-4': otherProps.orientation === 'horizontal',
-    'flex-col space-y-2': otherProps.orientation === 'vertical'
+  var className = cn('flex items-start gap-y-2', {
+    'flex-wrap gap-x-4 ': otherProps.orientation === 'horizontal',
+    'flex-col': otherProps.orientation === 'vertical'
   }, otherProps.className);
   return React.createElement(RadioGroupContext.Provider, {
     value: context
@@ -7561,7 +7567,7 @@ var useSelect = function useSelect(_ref, ref) {
     'aria-haspopup': 'listbox',
     'aria-label': ariaLabel ? ariaLabel + " " + text : undefined,
     'aria-labelledby': ariaLabelledBy ? ariaLabelledBy + " " + buttonId : undefined,
-    disabled: disabled,
+    disabled: disabled || readOnly,
     id: buttonId,
     onKeyDown: !disabled && !readOnly ? handleButtonKeyDown : undefined,
     type: 'button'
@@ -8498,8 +8504,7 @@ var useRowSelect = function useRowSelect(onSelectedRows) {
             };
 
             return React__default.createElement(Checkbox, Object.assign({}, props, {
-              onChange: onChange,
-              className: "mt-px"
+              onChange: onChange
             }));
           },
           Cell: function Cell(_ref2) {
@@ -8531,7 +8536,7 @@ var useRowSelect = function useRowSelect(onSelectedRows) {
             };
 
             return React__default.createElement(Checkbox, Object.assign({}, props, {
-              className: "mt-px",
+              className: "mt-2.5",
               onClick: onClick,
               // this is necessary to remove console spam from eslint
               onChange: function onChange() {
@@ -8540,7 +8545,7 @@ var useRowSelect = function useRowSelect(onSelectedRows) {
             }));
           },
           flex: '0 0 36px',
-          className: 'flex-col justify-start !pb-0'
+          className: 'flex-col justify-start !py-0'
         }].concat(columns);
       });
     }
@@ -9158,7 +9163,8 @@ var Column = function Column(_ref) {
   }), React__default.createElement("span", {
     className: "truncate"
   }, cell.render('Header')), cell.isSorted ? React__default.createElement(Icon, {
-    name: cell.isSortedDesc ? 'chevron-down-solid' : 'chevron-up-solid'
+    name: cell.isSortedDesc ? 'chevron-down-solid' : 'chevron-up-solid',
+    className: "-mt-0.5"
   }) : null);
 };
 
@@ -9749,9 +9755,9 @@ var Switch = /*#__PURE__*/React.forwardRef(function Switch(props, ref) {
       onChange = props.onChange,
       otherProps = _objectWithoutPropertiesLoose(props, _excluded$R);
 
-  var className = cn('group h-6 w-10 flex rounded-full inline-flex', {
+  var className = cn('group h-5 w-9 flex rounded-full inline-flex', {
     'mr-2': !!label,
-    'bg-grey-darker aria-checked:bg-blue focus:yt-focus': !props.disabled,
+    'bg-grey-darker hover:bg-grey-dark aria-checked:bg-blue aria-checked:hover:bg-blue-light focus:yt-focus': !props.disabled,
     'bg-grey-light cursor-not-allowed aria-checked:bg-blue-light': props.disabled
   }, props.className);
   var element = React.createElement(PrimitiveSwitch.Root, Object.assign({}, otherProps, {
@@ -9759,7 +9765,7 @@ var Switch = /*#__PURE__*/React.forwardRef(function Switch(props, ref) {
     onCheckedChange: onChange,
     ref: ref
   }), React.createElement(PrimitiveSwitch.Thumb, {
-    className: "'will-change-transform transition-transform translate-x-1 group-aria-checked:translate-x-5 h-4 w-4 mt-1 bg-white rounded-full"
+    className: "'will-change-transform group-aria-checked:translate-x-[1.1rem] mt-0.5 h-4 w-4 translate-x-[0.15rem] rounded-full bg-white transition-transform group-disabled:opacity-50"
   }));
 
   if (label) {
@@ -9968,6 +9974,7 @@ exports.Switch = Switch;
 exports.Table = Table;
 exports.Tabs = Tabs;
 exports.Textarea = Textarea;
+exports.Title = Title$1;
 exports.ToastProvider = ToastProvider;
 exports.Tooltip = Tooltip;
 exports.Tour = Tour;