@economic/taco 0.0.26-alpha.6 → 0.0.27-alpha.0

package/dist/taco.cjs.development.js

@@ -3467,7 +3467,7 @@ var IconButton = /*#__PURE__*/React.forwardRef(function IconButton(props, ref) {
       rounded = _props$rounded === void 0 ? false : _props$rounded,
       otherProps = _objectWithoutPropertiesLoose(props, _excluded$6);
 
-  var className = cn(getButtonClasses(), getAppearanceClasses(appearance, true), {
+  var className = cn('w-8', getButtonClasses(), getAppearanceClasses(appearance, true), {
     'rounded-full': rounded,
     rounded: !rounded,
     'cursor-not-allowed opacity-50': props.disabled,
@@ -4187,13 +4187,13 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(props, ref) {
       onChange = props.onChange,
       otherProps = _objectWithoutPropertiesLoose(props, _excluded$c);
 
-  var className = cn('h-5 w-5 border rounded text-sm', {
+  var className = cn('h-5 w-5 border rounded text-sm flex-shrink-0 self-start mt-[0.1rem]', {
     'mr-2': !!label,
     'border-grey-dark text-blue focus:border-blue focus:yt-focus': !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
-  }, props.className);
+  });
   var handleChange;
 
   if (onChange) {
@@ -4203,9 +4203,9 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(props, ref) {
   }
 
   var element = React.createElement(CheckboxPrimitive.Root, Object.assign({}, otherProps, {
+    "data-taco": "checkbox",
     checked: indeterminate ? 'indeterminate' : checked,
     className: className,
-    "data-taco": "checkbox",
     onCheckedChange: handleChange,
     ref: ref
   }), React.createElement(CheckboxPrimitive.Indicator, {
@@ -4218,8 +4218,8 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(props, ref) {
   if (label) {
     var labelClassName = cn('flex items-center cursor-pointer', {
       'cursor-not-allowed text-grey-dark': props.disabled
-    });
-    element = React.createElement("label", {
+    }, props.className);
+    return React.createElement("label", {
       className: labelClassName
     }, element, label);
   }
@@ -4242,30 +4242,56 @@ var useProxiedRef = function useProxiedRef(ref) {
 };
 
 var getInputClasses = function getInputClasses(props) {
-  return cn('peer bg-white text-black text-sm border font-normal not-italic no-underline rounded inline-flex leading-6 px-2 relative w-full text-ellipsis transition-all delay-100 ease-in flex items-center', {
+  var _cn;
+
+  return cn('peer bg-white text-black text-sm border font-normal not-italic no-underline rounded inline-flex leading-6 px-2 relative w-full text-ellipsis transition-all delay-100 ease-in flex items-center', (_cn = {
     'cursor-not-allowed text-black bg-grey': props.readOnly,
-    'border-grey text-opacity-25 cursor-not-allowed': props.disabled,
-    'bg-[rgba(255,255,0,0.075)]': props.highlighted && props.disabled,
-    'bg-[rgba(255,255,0,0.2)]': props.highlighted && !props.disabled,
-    'border-grey-dark hover:shadow-[0_0_0.1rem_theme(colors.grey.darker)] focus:border-blue-light focus:yt-focus active:border-blue-dark': !props.invalid,
-    'border-red hover:shadow-[0_0_0.15rem_theme(colors.red.DEFAULT)] focus:border-red-light focus:yt-focus-red active:border-red-dark': props.invalid
-  });
+    'border-grey text-opacity-25 cursor-not-allowed': props.disabled
+  }, _cn[getStateClasses$1(props.state)] = !props.disabled, _cn['bg-[rgba(255,255,0,0.075)]'] = props.highlighted && props.disabled, _cn['bg-[rgba(255,255,0,0.2)]'] = props.highlighted && !props.disabled, _cn));
 };
-var getButtonStateClasses = function getButtonStateClasses(invalid) {
-  if (invalid) {
-    return '!border-red focus:!border-red-light focus:yt-focus-red peer-focus:!border-red-light peer-focus:peer-active:!border-red-dark';
+var getStateClasses$1 = function getStateClasses(value) {
+  switch (value) {
+    case 'success':
+      return 'border-green hover:shadow-[0_0_0.15rem_theme(colors.green.DEFAULT)] focus:border-green-light focus:yt-focus-green active:border-green-dark';
+
+    case 'error':
+      return 'border-red hover:shadow-[0_0_0.15rem_theme(colors.red.DEFAULT)] focus:border-red-light focus:yt-focus-red active:border-red-dark';
+
+    case 'warning':
+      return 'border-yellow-dark hover:shadow-[0_0_0.15rem_theme(colors.yellow.dark)] focus:yt-focus-yellow active:border-yellow-dark';
+
+    case 'information':
+      return 'border-blue hover:shadow-[0_0_0.15rem_theme(colors.blue.dark)] focus:border-blue-light focus:yt-focus active:border-blue-dark';
+
+    default:
+      return 'border-grey-dark hover:shadow-[0_0_0.1rem_theme(colors.grey.darker)] focus:border-blue-light focus:yt-focus active:border-blue-dark';
   }
+};
+var getButtonStateClasses = function getButtonStateClasses(value) {
+  switch (value) {
+    case 'success':
+      return '!border-green focus:!border-green-light focus:yt-focus-green peer-focus:!border-green-light peer-focus:peer-active:!border-green-dark';
+
+    case 'error':
+      return '!border-red focus:!border-red-light focus:yt-focus-red peer-focus:!border-red-light peer-focus:peer-active:!border-red-dark';
+
+    case 'warning':
+      return '!border-yellow-dark focus:!border-yellow-dark focus:yt-focus-yellow peer-focus:peer-active:!border-yellow-dark';
 
-  return '!border-grey-dark focus:!border-blue-light peer-focus:!border-blue-light peer-focus:peer-active:!border-blue-dark';
+    case 'information':
+      return '!border-blue focus:!border-blue-light peer-focus:!border-blue-light peer-focus:peer-active:!border-blue-dark';
+
+    default:
+      return '!border-grey-dark focus:!border-blue-light peer-focus:!border-blue-light peer-focus:peer-active:!border-blue-dark';
+  }
 };
 
-var _excluded$d = ["button", "icon", "highlighted", "invalid", "onKeyDown", "autoFocus"];
+var _excluded$d = ["button", "icon", "highlighted", "onKeyDown", "state", "autoFocus"];
 var Input = /*#__PURE__*/React.forwardRef(function Input(props, ref) {
   var button = props.button,
       icon = props.icon,
-      _props$invalid = props.invalid,
-      invalid = _props$invalid === void 0 ? false : _props$invalid,
       onKeyDown = props.onKeyDown,
+      state = props.state,
       autoFocus = props.autoFocus,
       otherProps = _objectWithoutPropertiesLoose(props, _excluded$d);
 
@@ -4308,7 +4334,7 @@ var Input = /*#__PURE__*/React.forwardRef(function Input(props, ref) {
       var _button$props$disable, _cn;
 
       var disabled = (_button$props$disable = button.props.disabled) !== null && _button$props$disable !== void 0 ? _button$props$disable : 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);
+      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(state)] = !props.disabled, _cn), button.props.className);
       extra = React.cloneElement(button, {
         className: buttonClassName,
         disabled: disabled
@@ -4327,7 +4353,7 @@ var Input = /*#__PURE__*/React.forwardRef(function Input(props, ref) {
     }
 
     var containerClassName = cn('bg-white inline-flex relative rounded w-full', otherProps.className);
-    input = React.createElement("div", {
+    return React.createElement("div", {
       className: containerClassName,
       "data-taco": "input-container"
     }, input, extra);
@@ -4425,7 +4451,7 @@ var useListScrollTo = function useListScrollTo(internalRef, itemRefs) {
   };
 };
 
-var _excluded$e = ["data", "disabled", "highlighted", "id", "invalid", "loading", "onChange", "onClick", "onFocus", "onKeyDown", "readOnly", "scrollOnFocus", "value", "multiselect", "selectedIndexes", "allOptionsSelected"],
+var _excluded$e = ["data", "disabled", "highlighted", "id", "loading", "onChange", "onClick", "onFocus", "onKeyDown", "readOnly", "scrollOnFocus", "state", "value", "multiselect", "selectedIndexes", "allOptionsSelected"],
     _excluded2$1 = ["children", "icon"];
 var getId = function getId(id, value) {
   return id + "_" + value;
@@ -4827,7 +4853,7 @@ var filterData = function filterData(data, value) {
   });
 };
 
-var _excluded$g = ["aria-label", "aria-labelledby", "data", "defaultValue", "disabled", "inline", "loading", "onChange", "onClick", "onKeyDown", "onSearch", "readOnly", "value"];
+var _excluded$g = ["aria-label", "aria-labelledby", "data", "defaultValue", "disabled", "id", "inline", "loading", "onChange", "onClick", "onKeyDown", "onSearch", "readOnly", "value"];
 var debouncer = /*#__PURE__*/debounce(function (f) {
   return f();
 }, 200);
@@ -5940,50 +5966,32 @@ Dialog.Extra = Extra;
 Dialog.Drawer = Drawer;
 Dialog.Close = Close$2;
 
-var _excluded$n = ["children", "disabled", "invalid", "label", "message", "required"];
+var _excluded$n = ["disabled", "children", "message", "state"];
 var Field = /*#__PURE__*/React.forwardRef(function Field(props, ref) {
-  var _children$props$id, _children$props, _children$props$inval, _children$props2, _children$props$requi, _children$props3, _children$props4;
-
-  var children = props.children,
-      disabled = props.disabled,
-      invalid = props.invalid,
-      label = props.label,
+  var disabled = props.disabled,
+      children = props.children,
       message = props.message,
-      required = props.required,
+      state = props.state,
       otherProps = _objectWithoutPropertiesLoose(props, _excluded$n);
 
-  var idRef = React.useRef((_children$props$id = children === null || children === void 0 ? void 0 : (_children$props = children.props) === null || _children$props === void 0 ? void 0 : _children$props.id) !== null && _children$props$id !== void 0 ? _children$props$id : uuid.v4());
-  var isInvalid = (_children$props$inval = children === null || children === void 0 ? void 0 : (_children$props2 = children.props) === null || _children$props2 === void 0 ? void 0 : _children$props2.invalid) !== null && _children$props$inval !== void 0 ? _children$props$inval : invalid;
-  var isRequired = (_children$props$requi = children === null || children === void 0 ? void 0 : (_children$props3 = children.props) === null || _children$props3 === void 0 ? void 0 : _children$props3.required) !== null && _children$props$requi !== void 0 ? _children$props$requi : required;
-  var className = cn('flex flex-col mb-1', {
-    'pt-5': !label
-  }, props.className);
-  var labelClassName = cn('font-bold text-xs leading-4 h-4 truncate mb-1', {
+  var className = cn('flex flex-col font-bold text-xs leading-loose pb-4 min-h-[theme(spacing.18)]', {
     'text-grey-dark': disabled
-  });
-  var messageClassName = cn('text-xs leading-normal truncate flex-none', {
-    'text-grey-darkest': !isInvalid,
-    'text-red': isInvalid,
+  }, props.className);
+  var messageClassName = cn('h-4 text-xs text-left leading-normal font-normal truncate -mb-4', {
+    'text-grey-darkest': !state || state === 'default',
+    'text-red': state === 'error',
+    'text-green': state === 'success',
+    'text-blue': state === 'information',
+    'text-yellow-dark': state === 'warning',
     'opacity-50': disabled
-  });
-
-  if (!label && !(children !== null && children !== void 0 && children.props['aria-label'])) {
-    console.warn('TACO - You are creating a Field without a `label`, you must pass an `aria-label` to the Field child to provide an accessible experience for our users.');
-  }
-
-  return React.createElement("div", Object.assign({}, otherProps, {
+  }, props.className);
+  return React.createElement("label", Object.assign({}, otherProps, {
     className: className,
-    "data-taco": "field",
+    "data-taco": "label",
     ref: ref
-  }), label && React.createElement("label", {
-    htmlFor: idRef.current,
-    className: labelClassName,
-    "data-taco": "label"
-  }, label, isRequired ? '*' : ''), idRef.current !== (children === null || children === void 0 ? void 0 : (_children$props4 = children.props) === null || _children$props4 === void 0 ? void 0 : _children$props4.id) ? React.cloneElement(children, {
-    id: idRef.current
-  }) : children, message && React.createElement("span", {
+  }), children, message && React.createElement("span", {
     className: messageClassName,
-    role: isInvalid ? 'alert' : undefined
+    role: state === 'error' ? 'alert' : undefined
   }, message));
 });
 
@@ -6149,7 +6157,7 @@ var useTypeahead = function useTypeahead(_ref) {
   };
 };
 
-var _excluded$s = ["data", "defaultValue", "disabled", "emptyValue", "id", "invalid", "name", "onChange", "onFocus", "onKeyDown", "value"];
+var _excluded$s = ["data", "defaultValue", "disabled", "emptyValue", "id", "name", "onChange", "onFocus", "onKeyDown", "value"];
 var useListbox = function useListbox(_ref, ref) {
   var _ref$data = _ref.data,
       externalData = _ref$data === void 0 ? [] : _ref$data,
@@ -6157,7 +6165,6 @@ var useListbox = function useListbox(_ref, ref) {
       disabled = _ref.disabled,
       emptyValue = _ref.emptyValue,
       nativeId = _ref.id,
-      invalid = _ref.invalid,
       name = _ref.name,
       onChange = _ref.onChange,
       onFocus = _ref.onFocus,
@@ -6272,7 +6279,6 @@ var useListbox = function useListbox(_ref, ref) {
     data: data,
     disabled: disabled,
     id: id,
-    invalid: invalid,
     onChange: handleListboxChange,
     onFocus: handleListboxFocus,
     onKeyDown: handleListboxKeyDown,
@@ -6835,14 +6841,14 @@ var RadioGroupItem = /*#__PURE__*/React.forwardRef(function RadioGroupItem(props
       otherProps = _objectWithoutPropertiesLoose(props, _excluded$z);
 
   var disabled = context.disabled || props.disabled;
-  var className = cn('flex items-center justify-center h-4 w-4 mr-2 rounded-full bg-white border-2 ', {
+  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 labelClassName = cn('flex items-center cursor-pointer', {
     'cursor-not-allowed text-grey-dark': disabled
-  });
+  }, props.className);
   return React.createElement("label", {
     className: labelClassName
   }, React.createElement(RadioGroupPrimitive.Item, Object.assign({}, otherProps, {
@@ -7399,7 +7405,8 @@ var useSelect = function useSelect(_ref, ref) {
   var id = React.useMemo(function () {
     return nativeId || "select_" + uuid.v4();
   }, [nativeId]);
-  var internalInputRef = React.useRef(null); // support 'escape' resetting to the value that was set when the listbox opened
+  var internalInputRef = React.useRef(null);
+  var buttonId = id + "-button"; // support 'escape' resetting to the value that was set when the listbox opened
 
   var _React$useState2 = React.useState(value),
       lastValue = _React$useState2[0],
@@ -7526,9 +7533,9 @@ var useSelect = function useSelect(_ref, ref) {
   var button = {
     'aria-haspopup': 'listbox',
     'aria-label': ariaLabel ? ariaLabel + " " + text : undefined,
-    'aria-labelledby': ariaLabelledBy ? ariaLabelledBy + " " + id : undefined,
+    'aria-labelledby': ariaLabelledBy ? ariaLabelledBy + " " + buttonId : undefined,
     disabled: disabled,
-    id: id,
+    id: buttonId,
     onKeyDown: !disabled && !readOnly ? handleButtonKeyDown : undefined,
     type: 'button'
   };
@@ -7610,7 +7617,6 @@ var BaseSelect = /*#__PURE__*/React.forwardRef(function BaseSelect(props, ref) {
 
   var commonListboxProps = _extends({}, listbox, {
     className: 'w-auto',
-    invalid: undefined,
     style: {
       minWidth: selectDimensions === null || selectDimensions === void 0 ? void 0 : selectDimensions.width
     },
@@ -9103,7 +9109,7 @@ var Column = function Column(_ref) {
       'cursor-pointer': !cell.disableSorting,
       'justify-start text-left': cell.align === 'left',
       'justify-end text-right': cell.align === 'right',
-      'justify-center text-center': !cell.align
+      'justify-center text-center': cell.align === 'center' || !cell.align
     }),
     style: _extends({}, cell.style, {
       flex: cell.flex
@@ -9675,7 +9681,7 @@ Tabs.List = TabList;
 Tabs.Trigger = TabTrigger;
 Tabs.Content = TabContent;
 
-var _excluded$Q = ["defaultValue", "highlighted", "invalid", "onKeyDown"];
+var _excluded$Q = ["defaultValue", "highlighted", "onKeyDown", "state"];
 var Textarea = /*#__PURE__*/React.forwardRef(function Textarea(props, ref) {
   var onKeyDown = props.onKeyDown,
       otherProps = _objectWithoutPropertiesLoose(props, _excluded$Q);
@@ -9721,14 +9727,14 @@ var Switch = /*#__PURE__*/React.forwardRef(function Switch(props, ref) {
     onCheckedChange: onChange,
     ref: ref
   }), React.createElement(PrimitiveSwitch.Thumb, {
-    className: "'will-change-transform group-aria-checked:translate-x-5 mt-1 h-4 w-4 translate-x-1 rounded-full bg-white transition-transform"
+    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"
   }));
 
   if (label) {
     var labelClassName = cn('flex items-center cursor-pointer', {
       'cursor-not-allowed text-grey-dark': props.disabled
     });
-    element = React.createElement("label", {
+    return React.createElement("label", {
       className: labelClassName
     }, element, label);
   }