@daren/button - npm Package Compare versions

Comparing version 1.8.4 to 2.0.0

dist/cjs/button.js

 "use strict";
 
 exports.__esModule = true;
-exports.Button = Button;
-exports.ButtonLink = void 0;
-exports.LinkButton = LinkButton;
+exports.ButtonLink = exports.Button = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _utils = require("@daren/utils");
 var _link = require("./link");
-var _excluded = ["children", "size", "variant", "className", "disabled"],
-  _excluded2 = ["className", "underlined"],
-  _excluded3 = ["children", "className", "variant", "size", "disabled"];
+var _excluded = ["variant", "size", "className"],
+  _excluded2 = ["className", "variant", "size", "disabled"];
 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); }
@@ -17,76 +14,57 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-function getClassName(className) {
-  return (0, _utils.cx)('group relative inline-flex text-base font-title outline-none !no-underline opacity-100 transition focus:outline-none disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 active:scale-90 rounded-md', className);
-}
-function ButtonInner(_ref) {
-  var children = _ref.children,
-    _ref$variant = _ref.variant,
-    variant = _ref$variant === void 0 ? 'primary' : _ref$variant,
+var variants = {
+  "default": 'bg-gray-900 text-white hover:bg-gray-700 dark:bg-gray-50 dark:text-gray-900 focus-ring',
+  danger: 'bg-red-500 text-white hover:bg-red-600 dark:hover:bg-red-600 focus-ring',
+  success: 'bg-green-500 text-white hover:bg-green-600 dark:hover:bg-green-600 focus-ring',
+  outline: 'bg-transparent border border-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 dark:border-gray-700 dark:text-gray-100 focus-ring',
+  subtle: 'bg-gray-100 text-primary hover:bg-gray-200 dark:bg-gray-700  focus-ring',
+  ghost: 'bg-transparent hover:bg-gray-100 dark:hover:bg-gray-800 dark:text-gray-100 dark:hover:text-gray-100 data-[state=open]:bg-transparent dark:data-[state=open]:bg-transparent',
+  link: 'bg-transparent underline-offset-4 hover:underline text-primary hover:bg-transparent dark:hover:bg-transparent'
+};
+var sizes = {
+  "default": 'h-10 py-2 px-4 text-sm',
+  sm: 'h-9 px-3 text-xs',
+  lg: 'h-11 px-8 text-sm'
+};
+function getButtonClassName(_ref) {
+  var _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'default' : _ref$variant,
     _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'medium' : _ref$size,
-    disabled = _ref.disabled;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: (0, _utils.cx)('absolute inset-0 rounded-full border-0 opacity-100 outline-none transition focus-ring set-colors-current', {
-      'bg-accent text-accent dark:bg-accent-100 dark:text-white': variant === 'primary',
-      'bg-black/10 text-primary dark:bg-white/5': variant === 'secondary',
-      'bg-red-200 text-red-500 ': variant === 'danger',
-      'bg-green-200 text-green-500 ': variant === 'success'
-    })
-  }), /*#__PURE__*/React.createElement("div", {
-    className: (0, _utils.cx)('not-prose relative flex h-full w-full items-center justify-center whitespace-nowrap', {
-      'cursor-not-allowed text-gray-100 opacity-50': disabled,
-      '!text-white dark:!text-accent': variant === 'primary',
-      '!text-black dark:!text-white': variant === 'secondary',
-      '!text-red-700': variant === 'danger',
-      '!text-green-700': variant === 'success',
-      'space-x-3 py-2 px-6 text-xs': size === 'small',
-      'space-x-3 py-2 px-8': size === 'medium',
-      'space-x-5 py-3 px-10': size === 'large'
-    })
-  }, children));
+    size = _ref$size === void 0 ? 'default' : _ref$size,
+    className = _ref.className;
+  return (0, _utils.cx)('group rounded-full font-title font-bold inline-flex space-x-2 items-center transition-transform active:scale-90', variants[variant], sizes[size], className);
 }
-function Button(_ref2) {
-  var children = _ref2.children,
+var Button = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
+  var variant = _ref2.variant,
     size = _ref2.size,
-    _ref2$variant = _ref2.variant,
-    variant = _ref2$variant === void 0 ? 'primary' : _ref2$variant,
     className = _ref2.className,
-    disabled = _ref2.disabled,
     props = _objectWithoutPropertiesLoose(_ref2, _excluded);
   return /*#__PURE__*/React.createElement("button", _extends({
-    disabled: disabled
-  }, props, {
-    className: getClassName(className)
-  }), /*#__PURE__*/React.createElement(ButtonInner, {
-    variant: variant,
-    size: size,
-    disabled: disabled
-  }, children));
-}
-function LinkButton(_ref3) {
+    className: getButtonClassName({
+      variant: variant,
+      size: size,
+      className: className
+    }),
+    ref: ref
+  }, props));
+});
+exports.Button = Button;
+Button.displayName = 'Button';
+var ButtonLink = /*#__PURE__*/React.forwardRef(function ButtonLink(_ref3, ref) {
   var className = _ref3.className,
-    underlined = _ref3.underlined,
-    buttonProps = _objectWithoutPropertiesLoose(_ref3, _excluded2);
-  return /*#__PURE__*/React.createElement("button", _extends({}, buttonProps, {
-    className: (0, _utils.cx)(className, underlined ? 'underlined whitespace-nowrap focus:outline-none' : 'underline', 'inline-block text-primary')
-  }));
-}
-var ButtonLink = /*#__PURE__*/React.forwardRef(function ButtonLink(_ref4, ref) {
-  var children = _ref4.children,
-    className = _ref4.className,
-    _ref4$variant = _ref4.variant,
-    variant = _ref4$variant === void 0 ? 'primary' : _ref4$variant,
-    size = _ref4.size,
-    disabled = _ref4.disabled,
-    rest = _objectWithoutPropertiesLoose(_ref4, _excluded3);
+    variant = _ref3.variant,
+    size = _ref3.size,
+    disabled = _ref3.disabled,
+    rest = _objectWithoutPropertiesLoose(_ref3, _excluded2);
   return /*#__PURE__*/React.createElement(_link.Link, _extends({
     ref: ref,
-    className: getClassName(className)
-  }, rest), /*#__PURE__*/React.createElement(ButtonInner, {
-    disabled: disabled,
-    variant: variant,
-    size: size
-  }, children));
+    className: getButtonClassName({
+      variant: variant,
+      size: size,
+      className: className
+    })
+  }, rest));
 });
 exports.ButtonLink = ButtonLink;
+ButtonLink.displayName = 'ButtonLink';
 //# sourceMappingURL=button.js.map

dist/cjs/confirm-button.js

@@ -64,3 +64,3 @@ "use strict";
   }, confirmButtonLabel), /*#__PURE__*/React.createElement(_button.Button, {
-    variant: "secondary",
+    variant: "ghost",
     onClick: function onClick() {
@@ -67,0 +67,0 @@ return setOpen(false);

dist/cjs/link.js

@@ -8,4 +8,4 @@ "use strict";
 var _solid = require("@heroicons/react/24/solid");
-var _excluded = ["disabled", "external", "onClick", "className", "as"],
-  _excluded2 = ["disabled", "external", "onClick", "className", "as", "children", "description"];
+var _excluded = ["disabled", "external", "onClick", "to", "href", "className", "as"],
+  _excluded2 = ["disabled", "external", "onClick", "className", "as", "to", "href", "children", "description"];
 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); }
@@ -19,2 +19,5 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
     onClick = props.onClick,
+    to = props.to,
+    _props$href = props.href,
+    href = _props$href === void 0 ? to : _props$href,
     className = props.className,
@@ -30,4 +33,6 @@ _props$as = props.as,
     ref: ref,
-    className: className,
+    className: (0, _utils.cx)('bg-transparent underline-offset-4 hover:underline text-primary hover:bg-transparent dark:hover:bg-transparent inline-flex space-x-2', className),
     tabIndex: disabled ? -1 : undefined,
+    to: href,
+    href: href,
     "aria-disabled": disabled,
@@ -47,2 +52,5 @@ onClick: disabled ? function (event) {
     Tag = _props$as2 === void 0 ? 'a' : _props$as2,
+    to = props.to,
+    _props$href2 = props.href,
+    href = _props$href2 === void 0 ? to : _props$href2,
     children = props.children,
@@ -58,2 +66,4 @@ description = props.description,
     className: (0, _utils.cx)(className, 'group inline-flex items-center rounded-full p-1 pr-2 transition-colors bg-secondary text-primary hover:bg-gray-200 dark:hover:bg-gray-700 sm:text-base lg:text-sm xl:text-base'),
+    to: href,
+    href: href,
     tabIndex: disabled ? -1 : undefined,
@@ -60,0 +70,0 @@ "aria-disabled": disabled,

dist/esm/button.js

@@ -1,4 +0,3 @@
-var _excluded = ["children", "size", "variant", "className", "disabled"],
-  _excluded2 = ["className", "underlined"],
-  _excluded3 = ["children", "className", "variant", "size", "disabled"];
+var _excluded = ["variant", "size", "className"],
+  _excluded2 = ["className", "variant", "size", "disabled"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
@@ -9,80 +8,59 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import { Link } from './link';
-function getClassName(className) {
-  return cx('group relative inline-flex text-base font-title outline-none !no-underline opacity-100 transition focus:outline-none disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 active:scale-90 rounded-md', className);
-}
-function ButtonInner(_ref) {
+var variants = {
+  default: 'bg-gray-900 text-white hover:bg-gray-700 dark:bg-gray-50 dark:text-gray-900 focus-ring',
+  danger: 'bg-red-500 text-white hover:bg-red-600 dark:hover:bg-red-600 focus-ring',
+  success: 'bg-green-500 text-white hover:bg-green-600 dark:hover:bg-green-600 focus-ring',
+  outline: 'bg-transparent border border-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 dark:border-gray-700 dark:text-gray-100 focus-ring',
+  subtle: 'bg-gray-100 text-primary hover:bg-gray-200 dark:bg-gray-700  focus-ring',
+  ghost: 'bg-transparent hover:bg-gray-100 dark:hover:bg-gray-800 dark:text-gray-100 dark:hover:text-gray-100 data-[state=open]:bg-transparent dark:data-[state=open]:bg-transparent',
+  link: 'bg-transparent underline-offset-4 hover:underline text-primary hover:bg-transparent dark:hover:bg-transparent'
+};
+var sizes = {
+  default: 'h-10 py-2 px-4 text-sm',
+  sm: 'h-9 px-3 text-xs',
+  lg: 'h-11 px-8 text-sm'
+};
+function getButtonClassName(_ref) {
   var {
-    children,
-    variant = 'primary',
-    size = 'medium',
-    disabled
+    variant = 'default',
+    size = 'default',
+    className
   } = _ref;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: cx('absolute inset-0 rounded-full border-0 opacity-100 outline-none transition focus-ring set-colors-current', {
-      'bg-accent text-accent dark:bg-accent-100 dark:text-white': variant === 'primary',
-      'bg-black/10 text-primary dark:bg-white/5': variant === 'secondary',
-      'bg-red-200 text-red-500 ': variant === 'danger',
-      'bg-green-200 text-green-500 ': variant === 'success'
-    })
-  }), /*#__PURE__*/React.createElement("div", {
-    className: cx('not-prose relative flex h-full w-full items-center justify-center whitespace-nowrap', {
-      'cursor-not-allowed text-gray-100 opacity-50': disabled,
-      '!text-white dark:!text-accent': variant === 'primary',
-      '!text-black dark:!text-white': variant === 'secondary',
-      '!text-red-700': variant === 'danger',
-      '!text-green-700': variant === 'success',
-      'space-x-3 py-2 px-6 text-xs': size === 'small',
-      'space-x-3 py-2 px-8': size === 'medium',
-      'space-x-5 py-3 px-10': size === 'large'
-    })
-  }, children));
+  return cx('group rounded-full font-title font-bold inline-flex space-x-2 items-center transition-transform active:scale-90', variants[variant], sizes[size], className);
 }
-function Button(_ref2) {
+var Button = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   var {
-      children,
+      variant,
       size,
-      variant = 'primary',
-      className,
-      disabled
+      className
     } = _ref2,
     props = _objectWithoutPropertiesLoose(_ref2, _excluded);
   return /*#__PURE__*/React.createElement("button", _extends({
-    disabled: disabled
-  }, props, {
-    className: getClassName(className)
-  }), /*#__PURE__*/React.createElement(ButtonInner, {
-    variant: variant,
-    size: size,
-    disabled: disabled
-  }, children));
-}
-function LinkButton(_ref3) {
+    className: getButtonClassName({
+      variant,
+      size,
+      className
+    }),
+    ref: ref
+  }, props));
+});
+Button.displayName = 'Button';
+var ButtonLink = /*#__PURE__*/React.forwardRef(function ButtonLink(_ref3, ref) {
   var {
       className,
-      underlined
+      variant,
+      size
     } = _ref3,
-    buttonProps = _objectWithoutPropertiesLoose(_ref3, _excluded2);
-  return /*#__PURE__*/React.createElement("button", _extends({}, buttonProps, {
-    className: cx(className, underlined ? 'underlined whitespace-nowrap focus:outline-none' : 'underline', 'inline-block text-primary')
-  }));
-}
-var ButtonLink = /*#__PURE__*/React.forwardRef(function ButtonLink(_ref4, ref) {
-  var {
-      children,
-      className,
-      variant = 'primary',
-      size,
-      disabled
-    } = _ref4,
-    rest = _objectWithoutPropertiesLoose(_ref4, _excluded3);
+    rest = _objectWithoutPropertiesLoose(_ref3, _excluded2);
   return /*#__PURE__*/React.createElement(Link, _extends({
     ref: ref,
-    className: getClassName(className)
-  }, rest), /*#__PURE__*/React.createElement(ButtonInner, {
-    disabled: disabled,
-    variant: variant,
-    size: size
-  }, children));
+    className: getButtonClassName({
+      variant,
+      size,
+      className
+    })
+  }, rest));
 });
-export { Button, ButtonLink, LinkButton };
+ButtonLink.displayName = 'ButtonLink';
+export { Button, ButtonLink };
 //# sourceMappingURL=button.js.map

dist/esm/confirm-button.js

@@ -47,3 +47,3 @@ var _excluded = ["children", "confirmString", "title", "message", "confirmButtonLabel", "cancelButtonLabel", "onConfirm", "variant"];
   }, confirmButtonLabel), /*#__PURE__*/React.createElement(Button, {
-    variant: "secondary",
+    variant: "ghost",
     onClick: () => setOpen(false)
@@ -50,0 +50,0 @@ }, cancelButtonLabel))) : null);

dist/esm/link.js

@@ -1,3 +0,3 @@
-var _excluded = ["disabled", "external", "onClick", "className", "as"],
-  _excluded2 = ["disabled", "external", "onClick", "className", "as", "children", "description"];
+var _excluded = ["disabled", "external", "onClick", "to", "href", "className", "as"],
+  _excluded2 = ["disabled", "external", "onClick", "className", "as", "to", "href", "children", "description"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
@@ -13,2 +13,4 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
       onClick,
+      to,
+      href = to,
       className,
@@ -24,4 +26,6 @@ as: Tag = 'a'
     ref: ref,
-    className: className,
+    className: cx('bg-transparent underline-offset-4 hover:underline text-primary hover:bg-transparent dark:hover:bg-transparent inline-flex space-x-2', className),
     tabIndex: disabled ? -1 : undefined,
+    to: href,
+    href: href,
     "aria-disabled": disabled,
@@ -38,2 +42,4 @@ onClick: disabled ? event => event.preventDefault() : onClick
       as: Tag = 'a',
+      to,
+      href = to,
       children,
@@ -50,2 +56,4 @@ description
     className: cx(className, 'group inline-flex items-center rounded-full p-1 pr-2 transition-colors bg-secondary text-primary hover:bg-gray-200 dark:hover:bg-gray-700 sm:text-base lg:text-sm xl:text-base'),
+    to: href,
+    href: href,
     tabIndex: disabled ? -1 : undefined,
@@ -52,0 +60,0 @@ "aria-disabled": disabled,

dist/types/button.d.ts

 import * as React from 'react';
-import { LinkFn } from './link';
-type ButtonProps = {
-    children?: React.ReactNode;
-    variant?: 'primary' | 'secondary' | 'danger' | 'success';
-    size?: 'small' | 'medium' | 'large';
-    disabled?: boolean;
+declare const variants: {
+    default: string;
+    danger: string;
+    success: string;
+    outline: string;
+    subtle: string;
+    ghost: string;
+    link: string;
 };
-declare function Button({ children, size, variant, className, disabled, ...props }: ButtonProps & JSX.IntrinsicElements['button']): JSX.Element;
-declare function LinkButton({ className, underlined, ...buttonProps }: {
-    underlined?: boolean;
-} & JSX.IntrinsicElements['button']): JSX.Element;
-declare const ButtonLink: typeof LinkFn;
-export type { ButtonProps };
-export { Button, ButtonLink, LinkButton };
+declare const sizes: {
+    default: string;
+    sm: string;
+    lg: string;
+};
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: keyof typeof variants;
+    size?: keyof typeof sizes;
+}
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+declare const ButtonLink: React.ForwardRefExoticComponent<Pick<Pick<import("./link").LinkProps, "key" | keyof React.AnchorHTMLAttributes<HTMLAnchorElement> | "disabled" | "external" | "as" | "to"> & React.RefAttributes<HTMLElement> & ButtonProps, "download" | "href" | "hrefLang" | "media" | "ping" | "rel" | "target" | "type" | "referrerPolicy" | "form" | "slot" | "style" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "placeholder" | "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" | "onChange" | "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" | "onResize" | "onResizeCapture" | "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" | "disabled" | "external" | "as" | "to" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "value" | "variant" | "size" | "name"> & React.RefAttributes<HTMLAnchorElement>>;
+export { Button, ButtonLink, type ButtonProps };
 //# sourceMappingURL=button.d.ts.map

dist/types/link.d.ts

 import * as React from 'react';
-import { ExtractProps } from '@daren/utils';
-type LinkProps<T extends React.ElementType> = React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement> & {
+type LinkProps = React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement> & {
     disabled?: boolean;
     external?: boolean;
-    as?: T;
+    as?: React.ElementType;
     onClick?: React.MouseEventHandler<HTMLAnchorElement>;
+    to?: string;
     children?: React.ReactNode;
-} & ElementProps<T>;
-type ElementProps<T> = T extends keyof JSX.IntrinsicElements ? JSX.IntrinsicElements[T] : ExtractProps<T>;
-declare function LinkFn<Tag extends React.ElementType>(props: LinkProps<Tag>): JSX.Element;
-declare const Link: typeof LinkFn;
-declare const DoubleLabelLink: typeof LinkFn;
-export type { LinkProps };
-export { Link, DoubleLabelLink, LinkFn };
+};
+declare const Link: React.ForwardRefExoticComponent<Pick<LinkProps, "key" | keyof React.AnchorHTMLAttributes<HTMLAnchorElement> | "disabled" | "external" | "as" | "to"> & React.RefAttributes<HTMLElement>>;
+declare const DoubleLabelLink: React.ForwardRefExoticComponent<Pick<React.ClassAttributes<HTMLAnchorElement> & React.AnchorHTMLAttributes<HTMLAnchorElement> & {
+    disabled?: boolean | undefined;
+    external?: boolean | undefined;
+    as?: React.ElementType<any> | undefined;
+    onClick?: React.MouseEventHandler<HTMLAnchorElement> | undefined;
+    to?: string | undefined;
+    children?: React.ReactNode;
+} & {
+    description?: string | undefined;
+}, "key" | keyof React.AnchorHTMLAttributes<HTMLAnchorElement> | "disabled" | "external" | "as" | "to" | "description"> & React.RefAttributes<HTMLElement>>;
+export { Link, DoubleLabelLink, type LinkProps };
 //# sourceMappingURL=link.d.ts.map

package.json

 {
   "name": "@daren/button",
-  "version": "1.8.4",
+  "version": "2.0.0",
   "repository": {
@@ -41,4 +41,4 @@ "type": "git",
   "dependencies": {
-    "@daren/form-elements": "^1.13.0",
-    "@daren/typography": "^1.9.9",
+    "@daren/form-elements": "^1.13.1",
+    "@daren/typography": "^1.9.10",
     "@daren/utils": "^1.9.5",
@@ -56,3 +56,3 @@ "@heroicons/react": "^2.0.14"
   },
-  "gitHead": "f92986faef30bb12c1fb0b0651e792a0e388dba7"
+  "gitHead": "bc865c27179bf2870d3d874814545e009b59e58d"
 }

No alert changes

Improved metrics

Total package byte prevSize

183039

increased by0.55%

Lines of code

513

increased by0.98%

Dependency changes

• Updated@daren/form-elements@^1.13.1

• Updated@daren/typography@^1.9.10