@daren/form-elements - npm Package Compare versions

Comparing version 1.5.2 to 1.6.0

dist/cjs/checkbox.js

@@ -5,2 +5,3 @@ "use strict";
 exports.Checkbox = Checkbox;
+exports.CheckboxField = void 0;
 
@@ -13,3 +14,4 @@ var _utils = require("@daren/utils");
 
-var _excluded = ["className", "variant", "bgClassName", "textClassName", "icon"];
+var _excluded = ["className", "variant", "bgClassName", "textClassName", "icon"],
+    _excluded2 = ["error", "name", "label", "id", "className", "defaultValue"];
 
@@ -46,3 +48,3 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
   })), /*#__PURE__*/React.createElement("span", {
-    className: "inline-block w-full h-full rounded-full border-2 border-primary-100 peer-checked:border-transparent dark:border-primary-300 transition-all duration-300 peer-checked:animate-check cursor-pointer focus-ring set-colors-current"
+    className: "inline-block w-full h-full text-current rounded-full border-2 border-primary-100 peer-checked:border-transparent dark:border-primary-300 transition-all duration-300 peer-checked:animate-check cursor-pointer focus-ring"
   }), /*#__PURE__*/React.createElement(Icon, {
@@ -52,2 +54,35 @@ className: (0, _utils.cx)(textClassName, 'absolute inset-0 p-1 w-full h-full  opacity-0 transition-opacity peer-checked:animate-fade-in-up pointer-events-none')
 }
+
+var CheckboxField = /*#__PURE__*/React.forwardRef(function DropdownField(_ref2, ref) {
+  var error = _ref2.error,
+      name = _ref2.name,
+      label = _ref2.label,
+      id = _ref2.id,
+      className = _ref2.className,
+      defaultValue = _ref2.defaultValue,
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded2);
+
+  var inputId = id != null ? id : name;
+  var errorId = inputId + "-error";
+  return /*#__PURE__*/React.createElement("div", {
+    className: (0, _utils.cx)(className, 'group w-full')
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "flex relative items-start"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "flex items-center h-5"
+  }, /*#__PURE__*/React.createElement(Checkbox, _extends({
+    ref: ref,
+    id: inputId,
+    name: name
+  }, props))), /*#__PURE__*/React.createElement("div", {
+    className: "ml-3 text-base"
+  }, /*#__PURE__*/React.createElement("label", {
+    htmlFor: inputId,
+    className: "text-primary"
+  }, label))), error && /*#__PURE__*/React.createElement("p", {
+    className: "mt-2 text-sm text-red-600",
+    id: errorId
+  }, error));
+});
+exports.CheckboxField = CheckboxField;
 //# sourceMappingURL=checkbox.js.map

dist/cjs/index.js

@@ -13,18 +13,2 @@ "use strict";
 
-var _dropdown = require("./dropdown");
-
-Object.keys(_dropdown).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _dropdown[key]) return;
-  exports[key] = _dropdown[key];
-});
-
-var _field = require("./field");
-
-Object.keys(_field).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _field[key]) return;
-  exports[key] = _field[key];
-});
-
 var _input = require("./input");
@@ -54,2 +38,18 @@
 
+var _select = require("./select");
+
+Object.keys(_select).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _select[key]) return;
+  exports[key] = _select[key];
+});
+
+var _toggle = require("./toggle");
+
+Object.keys(_toggle).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _toggle[key]) return;
+  exports[key] = _toggle[key];
+});
+
 var _types = require("./types");
@@ -56,0 +56,0 @@

dist/cjs/input.js

 "use strict";
 
 exports.__esModule = true;
-exports.Input = void 0;
+exports.Input = exports.Field = void 0;
+exports.InputError = InputError;
 
@@ -12,5 +13,8 @@ var _utils = require("@daren/utils");
 
+var _misc = require("./misc");
+
 var _utils2 = require("./utils");
 
-var _excluded = ["type", "hasError", "icon"];
+var _excluded = ["type", "hasError", "inputSize", "icon"],
+    _excluded2 = ["defaultValue", "error", "name", "label", "className", "description", "id"];
 
@@ -28,6 +32,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
       hasError = props.hasError,
+      inputSize = props.inputSize,
       Icon = props.icon,
       inputProps = _objectWithoutPropertiesLoose(props, _excluded);
 
-  var className = (0, _utils2.getInputClassName)(props.className, hasError);
+  var className = (0, _utils2.getInputClassName)(props.className, hasError, inputSize);
 
@@ -40,10 +45,10 @@ if (type === 'textarea') {
       height: "20px",
-      className: (0, _utils.cx)('z-10 flex absolute top-0 left-5 justify-center items-center p-0 h-full', {
+      className: (0, _utils.cx)('flex absolute top-0 left-5 z-10 justify-center items-center p-0 h-full', {
         'text-red-500': hasError
       })
     }), /*#__PURE__*/React.createElement("textarea", _extends({}, inputProps, {
+      "aria-invalid": hasError,
       className: (0, _utils.cx)('h-36', className, {
         'pl-14': !!Icon
-      }),
-      "aria-invalid": hasError
+      })
     })));
@@ -54,18 +59,18 @@ }
     className: "relative shadow-sm"
-  }, Icon && /*#__PURE__*/React.createElement(Icon, {
+  }, /*#__PURE__*/React.createElement("input", _extends({
+    type: type
+  }, inputProps, {
+    className: (0, _utils.cx)(className, {
+      'pr-14': !!Icon
+    }),
+    ref: ref
+  })), Icon && !hasError && /*#__PURE__*/React.createElement(Icon, {
     width: "20px",
     height: "20px",
-    className: (0, _utils.cx)('z-10 flex absolute top-0 left-5 justify-center items-center p-0 h-full', {
+    className: (0, _utils.cx)('flex absolute top-0 right-5 z-10 justify-center items-center p-0 h-full', {
+      'text-gray-300': !hasError,
       'text-red-500': hasError
     })
-  }), /*#__PURE__*/React.createElement("input", _extends({
-    type: type
-  }, inputProps, {
-    className: (0, _utils.cx)(className, {
-      'pl-14': !!Icon
-    }),
-    ref: ref,
-    "aria-invalid": hasError
-  })), hasError && /*#__PURE__*/React.createElement("div", {
-    className: "flex absolute inset-y-0 right-0 items-center pr-3 pointer-events-none"
+  }), hasError && /*#__PURE__*/React.createElement("div", {
+    className: "flex absolute top-0 right-5 z-10 justify-center items-center p-0 h-full"
   }, /*#__PURE__*/React.createElement(_solid.ExclamationCircleIcon, {
@@ -77,2 +82,57 @@ className: "w-5 h-5 text-red-500",
 exports.Input = Input;
+
+function InputError(_ref) {
+  var children = _ref.children,
+      id = _ref.id;
+
+  if (!children) {
+    return null;
+  }
+
+  return /*#__PURE__*/React.createElement("p", {
+    className: " mb-0 text-sm !text-red-500",
+    role: "alert",
+    id: id
+  }, children);
+}
+
+var Field = /*#__PURE__*/React.forwardRef(function Field(_ref2, ref) {
+  var defaultValue = _ref2.defaultValue,
+      error = _ref2.error,
+      name = _ref2.name,
+      label = _ref2.label,
+      className = _ref2.className,
+      description = _ref2.description,
+      id = _ref2.id,
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded2);
+
+  var inputId = id != null ? id : name;
+  var errorId = inputId + "-error";
+  var descriptionId = inputId + "-description";
+  return /*#__PURE__*/React.createElement("div", {
+    className: "w-full"
+  }, label && /*#__PURE__*/React.createElement("div", {
+    className: "flex justify-between"
+  }, /*#__PURE__*/React.createElement(_misc.Label, {
+    htmlFor: inputId,
+    className: "mb-2"
+  }, label), description && /*#__PURE__*/React.createElement("span", {
+    className: "text-sm text-slate-400",
+    id: descriptionId
+  }, description)), /*#__PURE__*/React.createElement(Input, _extends({
+    hasError: !!error
+  }, props, {
+    ref: ref,
+    name: name,
+    id: inputId,
+    autoComplete: name,
+    required: true,
+    defaultValue: defaultValue,
+    "aria-describedby": error ? errorId : description ? descriptionId : undefined
+  })), error && /*#__PURE__*/React.createElement("p", {
+    className: "mt-2 text-sm text-red-600",
+    id: errorId
+  }, error));
+});
+exports.Field = Field;
 //# sourceMappingURL=input.js.map

dist/cjs/utils.js

@@ -8,8 +8,15 @@ "use strict";
 
-function getInputClassName(className, hasError) {
-  return (0, _utils.cx)(className, hasError ? 'border border-red-300 hover:border-transparent' : 'border-none', 'py-5 px-8 pr-10 w-full font-bold placeholder:text-gray-500 disabled:text-gray-400 rounded-lg text-md focus-ring', {
-    'text-slate-900 bg-primary-600': !hasError,
-    '!text-danger bg-primary-600 animate-shake !set-colors-accent-danger': hasError
+function getInputClassName(className, hasError, inputSize) {
+  if (inputSize === void 0) {
+    inputSize = 'md';
+  }
+
+  return (0, _utils.cx)(className, 'w-full font-bold placeholder:text-gray-500 disabled:text-gray-800 disabled:bg-gray-200 rounded-lg border-2 hover:border-primary outline-0 transition-colors focus:border-primary border-secondary', {
+    'bg-white text-primary-500': !hasError,
+    '!text-red-500 bg-primary-700': hasError,
+    'py-1 px-2 text-sm': inputSize === 'sm',
+    'py-3 px-4 text-base': inputSize === 'md',
+    'py-5 px-8 text-lg': inputSize === 'lg'
   });
 }
 //# sourceMappingURL=utils.js.map

dist/esm/checkbox.js

@@ -1,2 +0,3 @@
-var _excluded = ["className", "variant", "bgClassName", "textClassName", "icon"];
+var _excluded = ["className", "variant", "bgClassName", "textClassName", "icon"],
+    _excluded2 = ["error", "name", "label", "id", "className", "defaultValue"];
 
@@ -31,3 +32,3 @@ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
   })), /*#__PURE__*/React.createElement("span", {
-    className: "inline-block w-full h-full rounded-full border-2 border-primary-100 peer-checked:border-transparent dark:border-primary-300 transition-all duration-300 peer-checked:animate-check cursor-pointer focus-ring set-colors-current"
+    className: "inline-block w-full h-full text-current rounded-full border-2 border-primary-100 peer-checked:border-transparent dark:border-primary-300 transition-all duration-300 peer-checked:animate-check cursor-pointer focus-ring"
   }), /*#__PURE__*/React.createElement(Icon, {
@@ -38,3 +39,35 @@ className: cx(textClassName, 'absolute inset-0 p-1 w-full h-full  opacity-0 transition-opacity peer-checked:animate-fade-in-up pointer-events-none')
 
-export { Checkbox };
+var CheckboxField = /*#__PURE__*/React.forwardRef(function DropdownField(_ref2, ref) {
+  var {
+    error,
+    name,
+    label,
+    id,
+    className
+  } = _ref2,
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded2);
+
+  var inputId = id != null ? id : name;
+  var errorId = inputId + "-error";
+  return /*#__PURE__*/React.createElement("div", {
+    className: cx(className, 'group w-full')
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "flex relative items-start"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "flex items-center h-5"
+  }, /*#__PURE__*/React.createElement(Checkbox, _extends({
+    ref: ref,
+    id: inputId,
+    name: name
+  }, props))), /*#__PURE__*/React.createElement("div", {
+    className: "ml-3 text-base"
+  }, /*#__PURE__*/React.createElement("label", {
+    htmlFor: inputId,
+    className: "text-primary"
+  }, label))), error && /*#__PURE__*/React.createElement("p", {
+    className: "mt-2 text-sm text-red-600",
+    id: errorId
+  }, error));
+});
+export { Checkbox, CheckboxField };
 //# sourceMappingURL=checkbox.js.map

dist/esm/index.js

 export * from './checkbox';
-export * from './dropdown';
-export * from './field';
 export * from './input';
 export * from './misc';
 export * from './radio-group';
+export * from './select';
+export * from './toggle';
 export * from './types';
 //# sourceMappingURL=index.js.map

dist/esm/input.js

@@ -1,2 +0,3 @@
-var _excluded = ["type", "hasError", "icon"];
+var _excluded = ["type", "hasError", "inputSize", "icon"],
+    _excluded2 = ["defaultValue", "error", "name", "label", "className", "description", "id"];
 
@@ -10,2 +11,3 @@ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import * as React from 'react';
+import { Label } from './misc';
 import { getInputClassName } from './utils';
@@ -16,2 +18,3 @@ var Input = /*#__PURE__*/React.forwardRef(function Input(props, ref) {
     hasError,
+    inputSize,
     icon: Icon
@@ -21,3 +24,3 @@ } = props,
 
-  var className = getInputClassName(props.className, hasError);
+  var className = getInputClassName(props.className, hasError, inputSize);
 
@@ -30,10 +33,10 @@ if (type === 'textarea') {
       height: "20px",
-      className: cx('z-10 flex absolute top-0 left-5 justify-center items-center p-0 h-full', {
+      className: cx('flex absolute top-0 left-5 z-10 justify-center items-center p-0 h-full', {
         'text-red-500': hasError
       })
     }), /*#__PURE__*/React.createElement("textarea", _extends({}, inputProps, {
+      "aria-invalid": hasError,
       className: cx('h-36', className, {
         'pl-14': !!Icon
-      }),
-      "aria-invalid": hasError
+      })
     })));
@@ -44,18 +47,18 @@ }
     className: "relative shadow-sm"
-  }, Icon && /*#__PURE__*/React.createElement(Icon, {
+  }, /*#__PURE__*/React.createElement("input", _extends({
+    type: type
+  }, inputProps, {
+    className: cx(className, {
+      'pr-14': !!Icon
+    }),
+    ref: ref
+  })), Icon && !hasError && /*#__PURE__*/React.createElement(Icon, {
     width: "20px",
     height: "20px",
-    className: cx('z-10 flex absolute top-0 left-5 justify-center items-center p-0 h-full', {
+    className: cx('flex absolute top-0 right-5 z-10 justify-center items-center p-0 h-full', {
+      'text-gray-300': !hasError,
       'text-red-500': hasError
     })
-  }), /*#__PURE__*/React.createElement("input", _extends({
-    type: type
-  }, inputProps, {
-    className: cx(className, {
-      'pl-14': !!Icon
-    }),
-    ref: ref,
-    "aria-invalid": hasError
-  })), hasError && /*#__PURE__*/React.createElement("div", {
-    className: "flex absolute inset-y-0 right-0 items-center pr-3 pointer-events-none"
+  }), hasError && /*#__PURE__*/React.createElement("div", {
+    className: "flex absolute top-0 right-5 z-10 justify-center items-center p-0 h-full"
   }, /*#__PURE__*/React.createElement(ExclamationCircleIcon, {
@@ -66,3 +69,60 @@ className: "w-5 h-5 text-red-500",
 });
-export { Input };
+
+function InputError(_ref) {
+  var {
+    children,
+    id
+  } = _ref;
+
+  if (!children) {
+    return null;
+  }
+
+  return /*#__PURE__*/React.createElement("p", {
+    className: " mb-0 text-sm !text-red-500",
+    role: "alert",
+    id: id
+  }, children);
+}
+
+var Field = /*#__PURE__*/React.forwardRef(function Field(_ref2, ref) {
+  var {
+    defaultValue,
+    error,
+    name,
+    label,
+    description,
+    id
+  } = _ref2,
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded2);
+
+  var inputId = id != null ? id : name;
+  var errorId = inputId + "-error";
+  var descriptionId = inputId + "-description";
+  return /*#__PURE__*/React.createElement("div", {
+    className: "w-full"
+  }, label && /*#__PURE__*/React.createElement("div", {
+    className: "flex justify-between"
+  }, /*#__PURE__*/React.createElement(Label, {
+    htmlFor: inputId,
+    className: "mb-2"
+  }, label), description && /*#__PURE__*/React.createElement("span", {
+    className: "text-sm text-slate-400",
+    id: descriptionId
+  }, description)), /*#__PURE__*/React.createElement(Input, _extends({
+    hasError: !!error
+  }, props, {
+    ref: ref,
+    name: name,
+    id: inputId,
+    autoComplete: name,
+    required: true,
+    defaultValue: defaultValue,
+    "aria-describedby": error ? errorId : description ? descriptionId : undefined
+  })), error && /*#__PURE__*/React.createElement("p", {
+    className: "mt-2 text-sm text-red-600",
+    id: errorId
+  }, error));
+});
+export { Input, Field, InputError };
 //# sourceMappingURL=input.js.map

dist/esm/utils.js

 import { cx } from '@daren/utils';
 
-function getInputClassName(className, hasError) {
-  return cx(className, hasError ? 'border border-red-300 hover:border-transparent' : 'border-none', 'py-5 px-8 pr-10 w-full font-bold placeholder:text-gray-500 disabled:text-gray-400 rounded-lg text-md focus-ring', {
-    'text-slate-900 bg-primary-600': !hasError,
-    '!text-danger bg-primary-600 animate-shake !set-colors-accent-danger': hasError
+function getInputClassName(className, hasError, inputSize) {
+  if (inputSize === void 0) {
+    inputSize = 'md';
+  }
+
+  return cx(className, 'w-full font-bold placeholder:text-gray-500 disabled:text-gray-800 disabled:bg-gray-200 rounded-lg border-2 hover:border-primary outline-0 transition-colors focus:border-primary border-secondary', {
+    'bg-white text-primary-500': !hasError,
+    '!text-red-500 bg-primary-700': hasError,
+    'py-1 px-2 text-sm': inputSize === 'sm',
+    'py-3 px-4 text-base': inputSize === 'md',
+    'py-5 px-8 text-lg': inputSize === 'lg'
   });
@@ -8,0 +15,0 @@ }

dist/types/checkbox.d.ts

 import * as React from 'react';
+import { FieldProps } from './types';
 declare type CheckboxProps = JSX.IntrinsicElements['input'] & {
@@ -9,3 +10,10 @@ variant?: 'sm' | 'md' | 'lg';
 declare function Checkbox({ className, variant, bgClassName, textClassName, icon: Icon, ...props }: CheckboxProps): JSX.Element;
-export { Checkbox };
+declare const CheckboxField: React.ForwardRefExoticComponent<Pick<FieldProps & React.ClassAttributes<HTMLInputElement> & React.InputHTMLAttributes<HTMLInputElement> & {
+    variant?: "sm" | "md" | "lg" | undefined;
+    bgClassName?: string | undefined;
+    textClassName?: string | undefined;
+    icon?: React.ElementType<any> | undefined;
+}, "form" | "label" | "slot" | "style" | "title" | "pattern" | "className" | "variant" | "bgClassName" | "textClassName" | "icon" | "key" | "accept" | "alt" | "autoComplete" | "autoFocus" | "capture" | "checked" | "crossOrigin" | "disabled" | "enterKeyHint" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "height" | "list" | "max" | "maxLength" | "min" | "minLength" | "multiple" | "name" | "placeholder" | "readOnly" | "required" | "size" | "src" | "step" | "type" | "value" | "width" | "onChange" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "error" | "description"> & React.RefAttributes<HTMLInputElement>>;
+export { Checkbox, CheckboxField };
 export type { CheckboxProps };
+//# sourceMappingURL=checkbox.d.ts.map

dist/types/index.d.ts

 export * from './checkbox';
-export * from './dropdown';
-export * from './field';
 export * from './input';
 export * from './misc';
 export * from './radio-group';
+export * from './select';
+export * from './toggle';
 export * from './types';
+//# sourceMappingURL=index.d.ts.map

dist/types/input.d.ts

@@ -5,8 +5,35 @@ import * as React from 'react';
     icon?: React.ElementType<any> | undefined;
-} & React.ClassAttributes<HTMLInputElement> & React.InputHTMLAttributes<HTMLInputElement>, "icon" | "key" | "hasError" | keyof React.InputHTMLAttributes<HTMLInputElement>> | Pick<{
+    inputSize?: import("./utils").inputSize | undefined;
+} & React.ClassAttributes<HTMLInputElement> & React.InputHTMLAttributes<HTMLInputElement>, "icon" | "key" | keyof React.InputHTMLAttributes<HTMLInputElement> | "hasError" | "inputSize"> | Pick<{
     hasError?: boolean | undefined;
     icon?: React.ElementType<any> | undefined;
+    inputSize?: import("./utils").inputSize | undefined;
 } & {
     type: "textarea";
-} & React.ClassAttributes<HTMLTextAreaElement> & React.TextareaHTMLAttributes<HTMLTextAreaElement>, "icon" | "key" | "type" | "hasError" | keyof React.TextareaHTMLAttributes<HTMLTextAreaElement>>) & React.RefAttributes<HTMLInputElement>>;
-export { Input };
+} & React.ClassAttributes<HTMLTextAreaElement> & React.TextareaHTMLAttributes<HTMLTextAreaElement>, "icon" | "key" | "type" | "hasError" | "inputSize" | keyof React.TextareaHTMLAttributes<HTMLTextAreaElement>>) & React.RefAttributes<HTMLInputElement>>;
+interface InputErrorProps {
+    id: string;
+    children?: string | null;
+}
+declare function InputError({ children, id }: InputErrorProps): JSX.Element | null;
+declare type FieldProps = {
+    defaultValue?: string | null;
+    name: string;
+    label?: string;
+    className?: string;
+    error?: string | null;
+    description?: React.ReactNode;
+};
+declare const Field: React.ForwardRefExoticComponent<(Pick<FieldProps & {
+    hasError?: boolean | undefined;
+    icon?: React.ElementType<any> | undefined;
+    inputSize?: import("./utils").inputSize | undefined;
+} & React.ClassAttributes<HTMLInputElement> & React.InputHTMLAttributes<HTMLInputElement>, "form" | "label" | "slot" | "style" | "title" | "pattern" | "className" | "icon" | "key" | "accept" | "alt" | "autoComplete" | "autoFocus" | "capture" | "checked" | "crossOrigin" | "disabled" | "enterKeyHint" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "height" | "list" | "max" | "maxLength" | "min" | "minLength" | "multiple" | "name" | "placeholder" | "readOnly" | "required" | "size" | "src" | "step" | "type" | "value" | "width" | "onChange" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "error" | "description" | "hasError" | "inputSize"> | Pick<FieldProps & {
+    hasError?: boolean | undefined;
+    icon?: React.ElementType<any> | undefined;
+    inputSize?: import("./utils").inputSize | undefined;
+} & {
+    type: "textarea";
+} & React.ClassAttributes<HTMLTextAreaElement> & React.TextareaHTMLAttributes<HTMLTextAreaElement>, "form" | "label" | "slot" | "style" | "title" | "className" | "icon" | "key" | "autoComplete" | "autoFocus" | "disabled" | "maxLength" | "minLength" | "name" | "placeholder" | "readOnly" | "required" | "type" | "value" | "onChange" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "error" | "description" | "cols" | "dirName" | "hasError" | "inputSize" | "rows" | "wrap">) & React.RefAttributes<HTMLInputElement>>;
+export { Input, Field, InputError };
+//# sourceMappingURL=input.d.ts.map

dist/types/misc.d.ts

@@ -6,1 +6,2 @@ /// <reference types="react" />
 export { Label, FormHelperText, ButtonGroup };
+//# sourceMappingURL=misc.d.ts.map

dist/types/radio-group.d.ts

@@ -19,1 +19,2 @@ import * as React from 'react';
 export { RadioGroup };
+//# sourceMappingURL=radio-group.d.ts.map

dist/types/types.d.ts

 import React from 'react';
+import { inputSize } from './utils';
 declare type InputProps = {
     hasError?: boolean;
     icon?: React.ElementType;
+    inputSize?: inputSize;
 } & (({
@@ -11,9 +13,8 @@ type: 'textarea';
     name: string;
-    label: string;
+    label?: string;
     className?: string;
     error?: string | null;
     description?: React.ReactNode;
-    inputClass?: string;
-    icon?: React.ElementType;
 };
 export type { InputProps, FieldProps };
+//# sourceMappingURL=types.d.ts.map

dist/types/utils.d.ts

@@ -1,2 +0,5 @@
-declare function getInputClassName(className?: string, hasError?: boolean): string;
+declare type inputSize = 'sm' | 'md' | 'lg';
+declare function getInputClassName(className?: string, hasError?: boolean, inputSize?: inputSize): string;
 export { getInputClassName };
+export type { inputSize };
+//# sourceMappingURL=utils.d.ts.map

package.json

 {
   "name": "@daren/form-elements",
-  "version": "1.5.2",
+  "version": "1.6.0",
   "repository": {
@@ -40,3 +40,3 @@ "type": "git",
   "dependencies": {
-    "@daren/utils": "^1.3.3",
+    "@daren/utils": "^1.4.0",
     "@headlessui/react": "1.6.0",
@@ -54,3 +54,3 @@ "@heroicons/react": "^1.0.5"
   },
-  "gitHead": "3250f95f2650b1603e16b0834fef0beb8663e64b"
+  "gitHead": "fd7bb1e50b84fa0603ad03d73ac6dcfeec970c97"
 }

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

182548

increased by37.79%

Number of package files

62

increased by31.91%

Lines of code

1574

increased by34.76%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• Updated@daren/utils@^1.4.0