@helpdice/ui 1.0.1 → 1.0.2

package/esm/breadcrumbs/breadcrumbs-item.js

@@ -0,0 +1,43 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["href", "nextLink", "onClick", "children", "className"];
+import Link from '../link';
+import React, { useMemo } from 'react';
+import { pickChild } from '../utils/collections';
+import BreadcrumbsSeparator from './breadcrumbs-separator';
+import useClasses from '../use-classes';
+var BreadcrumbsItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var href = _ref.href,
+    _ref$nextLink = _ref.nextLink,
+    nextLink = _ref$nextLink === void 0 ? false : _ref$nextLink,
+    onClick = _ref.onClick,
+    children = _ref.children,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var isLink = useMemo(function () {
+    return href !== undefined || nextLink;
+  }, [href, nextLink]);
+  var _pickChild = pickChild(children, BreadcrumbsSeparator),
+    _pickChild2 = _slicedToArray(_pickChild, 1),
+    withoutSepChildren = _pickChild2[0];
+  var classes = useClasses('breadcrumbs-item', className);
+  var clickHandler = function clickHandler(event) {
+    onClick && onClick(event);
+  };
+  if (!isLink) {
+    return /*#__PURE__*/React.createElement("span", {
+      className: classes,
+      onClick: clickHandler
+    }, withoutSepChildren);
+  }
+  return /*#__PURE__*/React.createElement(Link, _extends({
+    className: classes,
+    href: href,
+    onClick: clickHandler,
+    ref: ref
+  }, props), withoutSepChildren);
+});
+BreadcrumbsItem.displayName = 'BreadcrumbsItem';
+export default BreadcrumbsItem;

package/esm/breadcrumbs/breadcrumbs-separator.d.ts

@@ -0,0 +1,42 @@
+import React from 'react';
+interface Props {
+    className?: string;
+}
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
+export type BreadcrumbsSeparatorProps = Props & NativeAttrs;
+declare const BreadcrumbsSeparator: React.ForwardRefExoticComponent<Props & NativeAttrs & {
+    children?: React.ReactNode;
+} & {
+    width?: string | number | undefined;
+    height?: string | number | undefined;
+    padding?: string | number | undefined;
+    margin?: string | number | undefined;
+    w?: string | number | undefined;
+    h?: string | number | undefined;
+    paddingLeft?: string | number | undefined;
+    paddingRight?: string | number | undefined;
+    paddingTop?: string | number | undefined;
+    paddingBottom?: string | number | undefined;
+    pl?: string | number | undefined;
+    pr?: string | number | undefined;
+    pt?: string | number | undefined;
+    pb?: string | number | undefined;
+    marginLeft?: string | number | undefined;
+    marginRight?: string | number | undefined;
+    marginTop?: string | number | undefined;
+    marginBottom?: string | number | undefined;
+    ml?: string | number | undefined;
+    mr?: string | number | undefined;
+    mt?: string | number | undefined;
+    mb?: string | number | undefined;
+    px?: string | number | undefined;
+    py?: string | number | undefined;
+    mx?: string | number | undefined;
+    my?: string | number | undefined;
+    font?: string | number | undefined;
+    unit?: string | undefined;
+    scale?: number | undefined;
+    children?: any;
+    className?: string | undefined;
+} & React.InputHTMLAttributes<any> & React.RefAttributes<unknown>>;
+export default BreadcrumbsSeparator;

package/esm/breadcrumbs/breadcrumbs-separator.js

@@ -0,0 +1,21 @@
+import _JSXStyle from "../styled-jsx.es.js";
+import React from 'react';
+import useScale, { withScale } from '../use-scale';
+import useClasses from '../use-classes';
+var Separator = function Separator(_ref) {
+  var children = _ref.children,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className;
+  var _useScale = useScale(),
+    SCALES = _useScale.SCALES;
+  var classes = useClasses('separator', className);
+  return /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["1571781185", [SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0.5), SCALES.mb(0), SCALES.ml(0.5)]]]) + " " + (classes || "")
+  }, children, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "1571781185",
+    dynamic: [SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0.5), SCALES.mb(0), SCALES.ml(0.5)]
+  }, ".separator.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:".concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0.5), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0.5), ";}")));
+};
+Separator.displayName = 'BreadcrumbsSeparator';
+var BreadcrumbsSeparator = withScale(Separator);
+export default BreadcrumbsSeparator;

package/esm/breadcrumbs/breadcrumbs.d.ts

@@ -0,0 +1,43 @@
+import React, { ReactNode } from 'react';
+interface Props {
+    separator?: string | ReactNode;
+    className?: string;
+}
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
+export type BreadcrumbsProps = Props & NativeAttrs;
+declare const Breadcrumbs: React.ForwardRefExoticComponent<Props & NativeAttrs & {
+    children?: React.ReactNode;
+} & {
+    width?: string | number | undefined;
+    height?: string | number | undefined;
+    padding?: string | number | undefined;
+    margin?: string | number | undefined;
+    w?: string | number | undefined;
+    h?: string | number | undefined;
+    paddingLeft?: string | number | undefined;
+    paddingRight?: string | number | undefined;
+    paddingTop?: string | number | undefined;
+    paddingBottom?: string | number | undefined;
+    pl?: string | number | undefined;
+    pr?: string | number | undefined;
+    pt?: string | number | undefined;
+    pb?: string | number | undefined;
+    marginLeft?: string | number | undefined;
+    marginRight?: string | number | undefined;
+    marginTop?: string | number | undefined;
+    marginBottom?: string | number | undefined;
+    ml?: string | number | undefined;
+    mr?: string | number | undefined;
+    mt?: string | number | undefined;
+    mb?: string | number | undefined;
+    px?: string | number | undefined;
+    py?: string | number | undefined;
+    mx?: string | number | undefined;
+    my?: string | number | undefined;
+    font?: string | number | undefined;
+    unit?: string | undefined;
+    scale?: number | undefined;
+    children?: any;
+    className?: string | undefined;
+} & React.InputHTMLAttributes<any> & React.RefAttributes<unknown>>;
+export default Breadcrumbs;

package/esm/breadcrumbs/breadcrumbs.js

@@ -0,0 +1,41 @@
+import _JSXStyle from "../styled-jsx.es.js";
+import React, { useMemo } from 'react';
+import useTheme from '../use-theme';
+import BreadcrumbsSeparator from './breadcrumbs-separator';
+import { addColorAlpha } from '../utils/color';
+import useScale, { withScale } from '../use-scale';
+var BreadcrumbsComponent = function BreadcrumbsComponent(_ref) {
+  var _ref$separator = _ref.separator,
+    separator = _ref$separator === void 0 ? '/' : _ref$separator,
+    children = _ref.children,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className;
+  var theme = useTheme();
+  var _useScale = useScale(),
+    SCALES = _useScale.SCALES;
+  var hoverColor = useMemo(function () {
+    return addColorAlpha(theme.palette.link, 0.85);
+  }, [theme.palette.link]);
+  var childrenArray = React.Children.toArray(children);
+  var withSeparatorChildren = childrenArray.map(function (item, index) {
+    if (! /*#__PURE__*/React.isValidElement(item)) return item;
+    var last = childrenArray[index - 1];
+    var lastIsSeparator = /*#__PURE__*/React.isValidElement(last) && last.type === BreadcrumbsSeparator;
+    var currentIsSeparator = item.type === BreadcrumbsSeparator;
+    if (!lastIsSeparator && !currentIsSeparator && index > 0) {
+      return /*#__PURE__*/React.createElement(React.Fragment, {
+        key: index
+      }, /*#__PURE__*/React.createElement(BreadcrumbsSeparator, null, separator), item);
+    }
+    return item;
+  });
+  return /*#__PURE__*/React.createElement("nav", {
+    className: _JSXStyle.dynamic([["524763277", [theme.palette.accents_4, SCALES.font(1), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverColor, theme.palette.accents_6]]]) + " " + (className || "")
+  }, withSeparatorChildren, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "524763277",
+    dynamic: [theme.palette.accents_4, SCALES.font(1), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverColor, theme.palette.accents_6]
+  }, "nav.__jsx-style-dynamic-selector{line-height:inherit;color:".concat(theme.palette.accents_4, ";box-sizing:border-box;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:").concat(SCALES.font(1), ";width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}nav.__jsx-style-dynamic-selector .link:hover{color:").concat(hoverColor, ";}nav.__jsx-style-dynamic-selector>span:last-of-type{color:").concat(theme.palette.accents_6, ";}nav.__jsx-style-dynamic-selector>.separator:last-child{display:none;}nav.__jsx-style-dynamic-selector svg{width:1em;height:1em;margin:0 4px;}nav.__jsx-style-dynamic-selector .breadcrumbs-item{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}")));
+};
+BreadcrumbsComponent.displayName = 'Breadcrumbs';
+var Breadcrumbs = withScale(BreadcrumbsComponent);
+export default Breadcrumbs;

package/esm/breadcrumbs/index.d.ts

@@ -0,0 +1,12 @@
+import Breadcrumbs from "./breadcrumbs";
+import BreadcrumbsItem from "./breadcrumbs-item";
+import BreadcrumbsSeparator from "./breadcrumbs-separator";
+export type BreadcrumbsComponentType = typeof Breadcrumbs & {
+    Item: typeof BreadcrumbsItem;
+    Separator: typeof BreadcrumbsSeparator;
+};
+export type { BreadcrumbsProps } from "./breadcrumbs";
+export type { BreadcrumbsItemProps } from "./breadcrumbs-item";
+export type { BreadcrumbsSeparatorProps } from "./breadcrumbs-separator";
+declare const _default: BreadcrumbsComponentType;
+export default _default;

package/esm/breadcrumbs/index.js

@@ -0,0 +1,8 @@
+"use client";
+
+import Breadcrumbs from './breadcrumbs';
+import BreadcrumbsItem from './breadcrumbs-item';
+import BreadcrumbsSeparator from './breadcrumbs-separator';
+Breadcrumbs.Item = BreadcrumbsItem;
+Breadcrumbs.Separator = BreadcrumbsSeparator;
+export default Breadcrumbs;

package/esm/button/button-icon.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+interface Props {
+    isRight?: boolean;
+    isSingle?: boolean;
+    className?: string;
+}
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
+export type ButtonIconProps = Props & NativeAttrs;
+declare const ButtonIcon: React.FC<React.PropsWithChildren<ButtonIconProps>>;
+export default ButtonIcon;

package/esm/button/button-icon.js

@@ -0,0 +1,26 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["isRight", "isSingle", "children", "className"];
+import _JSXStyle from "../styled-jsx.es.js";
+import React from 'react';
+import useClasses from '../use-classes';
+var ButtonIcon = function ButtonIcon(_ref) {
+  var _ref$isRight = _ref.isRight,
+    isRight = _ref$isRight === void 0 ? false : _ref$isRight,
+    isSingle = _ref.isSingle,
+    children = _ref.children,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var classes = useClasses('icon', {
+    right: isRight,
+    single: isSingle
+  }, className);
+  return /*#__PURE__*/React.createElement("span", _extends({}, props, {
+    className: "jsx-643337184" + " " + (props && props.className != null && props.className || classes || "")
+  }), children, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "643337184"
+  }, ".icon.jsx-643337184{position:absolute;left:var(--geist-ui-button-icon-padding);right:auto;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--geist-ui-button-color);z-index:1;}.right.jsx-643337184{right:var(--geist-ui-button-icon-padding);left:auto;}.icon.jsx-643337184 svg{background:transparent;height:calc(var(--geist-ui-button-height) / 2.35);width:calc(var(--geist-ui-button-height) / 2.35);}.single.jsx-643337184{position:static;-webkit-transform:none;-ms-transform:none;transform:none;}"));
+};
+ButtonIcon.displayName = 'ButtonIcon';
+export default ButtonIcon;

package/esm/button/button-loading.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+interface Props {
+    color: string;
+}
+declare const ButtonLoading: React.FC<React.PropsWithChildren<Props>>;
+export default ButtonLoading;

package/esm/button/button-loading.js

@@ -0,0 +1,15 @@
+import _JSXStyle from "../styled-jsx.es.js";
+import React from 'react';
+import Loading from '../loading';
+var ButtonLoading = function ButtonLoading(_ref) {
+  var color = _ref.color;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "jsx-3416748964" + " " + "btn-loading"
+  }, /*#__PURE__*/React.createElement(Loading, {
+    color: color
+  }), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "3416748964"
+  }, ".btn-loading.jsx-3416748964{position:absolute;top:0;left:0;right:0;bottom:0;z-index:2;background-color:var(--geist-ui-button-bg);}"));
+};
+ButtonLoading.displayName = 'GeistButtonLoading';
+export default ButtonLoading;

package/esm/button/button.d.ts

@@ -0,0 +1,55 @@
+import React from 'react';
+import { ButtonTypes } from "../utils/prop-types";
+interface Props {
+    type?: ButtonTypes;
+    ghost?: boolean;
+    loading?: boolean;
+    shadow?: boolean;
+    auto?: boolean;
+    effect?: boolean;
+    disabled?: boolean;
+    htmlType?: React.ButtonHTMLAttributes<any>['type'];
+    icon?: React.ReactNode;
+    iconRight?: React.ReactNode;
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+    className?: string;
+    crossOrigin?: string;
+    onPointerEnterCapture?: React.MouseEventHandler<HTMLButtonElement>;
+    onPointerLeaveCapture?: React.MouseEventHandler<HTMLButtonElement>;
+}
+type NativeAttrs = Omit<React.ButtonHTMLAttributes<any>, keyof Props>;
+export type ButtonProps = Props & NativeAttrs;
+declare const Button: React.ForwardRefExoticComponent<Pick<Props & NativeAttrs & React.RefAttributes<HTMLButtonElement> & {
+    width?: string | number | undefined;
+    height?: string | number | undefined;
+    padding?: string | number | undefined;
+    margin?: string | number | undefined;
+    w?: string | number | undefined;
+    h?: string | number | undefined;
+    paddingLeft?: string | number | undefined;
+    paddingRight?: string | number | undefined;
+    paddingTop?: string | number | undefined;
+    paddingBottom?: string | number | undefined;
+    pl?: string | number | undefined;
+    pr?: string | number | undefined;
+    pt?: string | number | undefined;
+    pb?: string | number | undefined;
+    marginLeft?: string | number | undefined;
+    marginRight?: string | number | undefined;
+    marginTop?: string | number | undefined;
+    marginBottom?: string | number | undefined;
+    ml?: string | number | undefined;
+    mr?: string | number | undefined;
+    mt?: string | number | undefined;
+    mb?: string | number | undefined;
+    px?: string | number | undefined;
+    py?: string | number | undefined;
+    mx?: string | number | undefined;
+    my?: string | number | undefined;
+    font?: string | number | undefined;
+    unit?: string | undefined;
+    scale?: number | undefined;
+    children?: any;
+    className?: string | undefined;
+} & React.InputHTMLAttributes<any>, "type" | "font" | "unit" | "min" | "max" | "children" | "form" | "slot" | "style" | "title" | "pattern" | "className" | "icon" | "onClick" | "auto" | "disabled" | "width" | "height" | "padding" | "margin" | "w" | "h" | "paddingLeft" | "paddingRight" | "paddingTop" | "paddingBottom" | "pl" | "pr" | "pt" | "pb" | "marginLeft" | "marginRight" | "marginTop" | "marginBottom" | "ml" | "mr" | "mt" | "mb" | "px" | "py" | "mx" | "my" | "scale" | "accept" | "alt" | "autoComplete" | "autoFocus" | "capture" | "checked" | "crossOrigin" | "enterKeyHint" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "list" | "maxLength" | "minLength" | "multiple" | "name" | "placeholder" | "readOnly" | "required" | "size" | "src" | "step" | "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" | "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" | "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" | "htmlType" | "iconRight" | "key" | "loading" | "ghost" | "shadow" | "effect"> & React.RefAttributes<unknown>>;
+export default Button;

package/esm/button/button.drip.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+interface Props {
+    x: number;
+    y: number;
+    onCompleted: () => void;
+    color: string;
+}
+export type ButtonDrip = Props;
+declare const ButtonDrip: React.FC<ButtonDrip>;
+export default ButtonDrip;

package/esm/button/button.drip.js

@@ -0,0 +1,58 @@
+"use client";
+
+import _JSXStyle from "../styled-jsx.es.js";
+import React, { useEffect, useRef } from 'react';
+var ButtonDrip = function ButtonDrip(_ref) {
+  var _ref$x = _ref.x,
+    x = _ref$x === void 0 ? 0 : _ref$x,
+    _ref$y = _ref.y,
+    y = _ref$y === void 0 ? 0 : _ref$y,
+    color = _ref.color,
+    onCompleted = _ref.onCompleted;
+  var dripRef = useRef(null);
+  /* istanbul ignore next */
+  var top = Number.isNaN(+y) ? 0 : y - 10;
+  /* istanbul ignore next */
+  var left = Number.isNaN(+x) ? 0 : x - 10;
+  useEffect(function () {
+    /* istanbul ignore next */
+    if (!dripRef.current) return;
+    dripRef.current.addEventListener('animationend', onCompleted);
+    return function () {
+      /* istanbul ignore next */
+      if (!dripRef.current) return;
+      dripRef.current.removeEventListener('animationend', onCompleted);
+    };
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    ref: dripRef,
+    className: "jsx-3424889537" + " " + "drip"
+  }, /*#__PURE__*/React.createElement("svg", {
+    width: "20",
+    height: "20",
+    viewBox: "0 0 20 20",
+    style: {
+      top: top,
+      left: left
+    },
+    className: "jsx-3424889537"
+  }, /*#__PURE__*/React.createElement("g", {
+    stroke: "none",
+    strokeWidth: "1",
+    fill: "none",
+    fillRule: "evenodd",
+    className: "jsx-3424889537"
+  }, /*#__PURE__*/React.createElement("g", {
+    fill: color,
+    className: "jsx-3424889537"
+  }, /*#__PURE__*/React.createElement("rect", {
+    width: "100%",
+    height: "100%",
+    rx: "10",
+    className: "jsx-3424889537"
+  })))), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "3424889537"
+  }, ".drip.jsx-3424889537{position:absolute;left:0;right:0;top:0;bottom:0;}svg.jsx-3424889537{position:absolute;-webkit-animation:350ms ease-in expand-jsx-3424889537;animation:350ms ease-in expand-jsx-3424889537;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;width:1rem;height:1rem;}@-webkit-keyframes expand-jsx-3424889537{0%{opacity:0;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}30%{opacity:1;}80%{opacity:0.5;}100%{-webkit-transform:scale(28);-ms-transform:scale(28);transform:scale(28);opacity:0;}}@keyframes expand-jsx-3424889537{0%{opacity:0;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}30%{opacity:1;}80%{opacity:0.5;}100%{-webkit-transform:scale(28);-ms-transform:scale(28);transform:scale(28);opacity:0;}}"));
+};
+ButtonDrip.displayName = 'ButtonDrip';
+export default ButtonDrip;

package/esm/button/button.js

@@ -0,0 +1,132 @@
+"use client";
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+var _excluded = ["children", "disabled", "type", "loading", "shadow", "ghost", "effect", "onClick", "auto", "icon", "htmlType", "iconRight", "className", "crossOrigin"];
+import _JSXStyle from "../styled-jsx.es.js";
+import React, { useRef, useState, useMemo, useImperativeHandle } from 'react';
+import useScale, { withScale } from '../use-scale';
+import useTheme from '../use-theme';
+import ButtonDrip from './button.drip';
+import ButtonLoading from './button-loading';
+import { filterPropsWithGroup, getButtonChildrenWithIcon } from './utils';
+import { useButtonGroupContext } from '../button-group/button-group-context';
+import { getButtonColors, getButtonCursor, getButtonDripColor, getButtonHoverColors } from './styles';
+import useClasses from '../use-classes';
+var ButtonComponent = /*#__PURE__*/React.forwardRef(function (btnProps, ref) {
+  var theme = useTheme();
+  var _useScale = useScale(),
+    SCALES = _useScale.SCALES;
+  var buttonRef = useRef(null);
+  useImperativeHandle(ref, function () {
+    return buttonRef.current;
+  });
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    dripShow = _useState2[0],
+    setDripShow = _useState2[1];
+  var _useState3 = useState(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    dripX = _useState4[0],
+    setDripX = _useState4[1];
+  var _useState5 = useState(0),
+    _useState6 = _slicedToArray(_useState5, 2),
+    dripY = _useState6[0],
+    setDripY = _useState6[1];
+  var groupConfig = useButtonGroupContext();
+  var filteredProps = filterPropsWithGroup(btnProps, groupConfig);
+  /* eslint-disable @typescript-eslint/no-unused-vars */
+  var children = filteredProps.children,
+    _filteredProps$disabl = filteredProps.disabled,
+    disabled = _filteredProps$disabl === void 0 ? false : _filteredProps$disabl,
+    _filteredProps$type = filteredProps.type,
+    type = _filteredProps$type === void 0 ? 'default' : _filteredProps$type,
+    _filteredProps$loadin = filteredProps.loading,
+    loading = _filteredProps$loadin === void 0 ? false : _filteredProps$loadin,
+    _filteredProps$shadow = filteredProps.shadow,
+    shadow = _filteredProps$shadow === void 0 ? false : _filteredProps$shadow,
+    _filteredProps$ghost = filteredProps.ghost,
+    ghost = _filteredProps$ghost === void 0 ? false : _filteredProps$ghost,
+    _filteredProps$effect = filteredProps.effect,
+    effect = _filteredProps$effect === void 0 ? true : _filteredProps$effect,
+    onClick = filteredProps.onClick,
+    _filteredProps$auto = filteredProps.auto,
+    auto = _filteredProps$auto === void 0 ? false : _filteredProps$auto,
+    icon = filteredProps.icon,
+    _filteredProps$htmlTy = filteredProps.htmlType,
+    htmlType = _filteredProps$htmlTy === void 0 ? 'button' : _filteredProps$htmlTy,
+    iconRight = filteredProps.iconRight,
+    _filteredProps$classN = filteredProps.className,
+    className = _filteredProps$classN === void 0 ? '' : _filteredProps$classN,
+    _filteredProps$crossO = filteredProps.crossOrigin,
+    crossOrigin = _filteredProps$crossO === void 0 ? '' : _filteredProps$crossO,
+    props = _objectWithoutProperties(filteredProps, _excluded);
+  /* eslint-enable @typescript-eslint/no-unused-vars */
+
+  var _useMemo = useMemo(function () {
+      return getButtonColors(theme.palette, filteredProps);
+    }, [theme.palette, filteredProps]),
+    bg = _useMemo.bg,
+    border = _useMemo.border,
+    color = _useMemo.color;
+  var hover = useMemo(function () {
+    return getButtonHoverColors(theme.palette, filteredProps);
+  }, [theme.palette, filteredProps]);
+  var _useMemo2 = useMemo(function () {
+      return getButtonCursor(disabled, loading);
+    }, [disabled, loading]),
+    cursor = _useMemo2.cursor,
+    events = _useMemo2.events;
+  var dripColor = useMemo(function () {
+    return getButtonDripColor(theme.palette, filteredProps);
+  }, [theme.palette, filteredProps]);
+
+  /* istanbul ignore next */
+  var dripCompletedHandle = function dripCompletedHandle() {
+    setDripShow(false);
+    setDripX(0);
+    setDripY(0);
+  };
+  var clickHandler = function clickHandler(event) {
+    if (disabled || loading) return;
+    var showDrip = !shadow && !ghost && effect;
+    /* istanbul ignore next */
+    if (showDrip && buttonRef.current) {
+      var rect = buttonRef.current.getBoundingClientRect();
+      setDripShow(true);
+      setDripX(event.clientX - rect.left);
+      setDripY(event.clientY - rect.top);
+    }
+    onClick && onClick(event);
+  };
+  var childrenWithIcon = useMemo(function () {
+    return getButtonChildrenWithIcon(auto, children, {
+      icon: icon,
+      iconRight: iconRight
+    });
+  }, [auto, children, icon, iconRight]);
+  var paddingLeft = auto ? SCALES.pl(1.15) : SCALES.pl(1.375),
+    paddingRight = auto ? SCALES.pr(1.15) : SCALES.pr(1.375);
+  return /*#__PURE__*/React.createElement("button", _extends({
+    ref: buttonRef,
+    type: htmlType,
+    disabled: disabled,
+    onClick: clickHandler
+  }, props, {
+    className: _JSXStyle.dynamic([["86551275", [SCALES.height(2.5), theme.layout.radius, SCALES.font(0.875), color, bg, border, cursor, events, shadow ? theme.expressiveness.shadowSmall : 'none', SCALES.pl(0.727), SCALES.height(2.5), color, bg, auto ? 'min-content' : SCALES.width(10.5), auto ? 'auto' : 'initial', SCALES.height(2.5), SCALES.pt(0), paddingRight, SCALES.pb(0), paddingLeft, SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hover.color, hover.color, hover.bg, hover.border, cursor, events, shadow ? theme.expressiveness.shadowMedium : 'none', shadow ? '-1px' : '0px']]]) + " " + (props && props.className != null && props.className || useClasses('btn', className) || "")
+  }), loading && /*#__PURE__*/React.createElement(ButtonLoading, {
+    color: color
+  }), childrenWithIcon, dripShow && /*#__PURE__*/React.createElement(ButtonDrip, {
+    x: dripX,
+    y: dripY,
+    color: dripColor,
+    onCompleted: dripCompletedHandle
+  }), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "86551275",
+    dynamic: [SCALES.height(2.5), theme.layout.radius, SCALES.font(0.875), color, bg, border, cursor, events, shadow ? theme.expressiveness.shadowSmall : 'none', SCALES.pl(0.727), SCALES.height(2.5), color, bg, auto ? 'min-content' : SCALES.width(10.5), auto ? 'auto' : 'initial', SCALES.height(2.5), SCALES.pt(0), paddingRight, SCALES.pb(0), paddingLeft, SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hover.color, hover.color, hover.bg, hover.border, cursor, events, shadow ? theme.expressiveness.shadowMedium : 'none', shadow ? '-1px' : '0px']
+  }, ".btn.__jsx-style-dynamic-selector{box-sizing:border-box;display:inline-block;line-height:".concat(SCALES.height(2.5), ";border-radius:").concat(theme.layout.radius, ";font-weight:400;font-size:").concat(SCALES.font(0.875), ";-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;outline:none;text-transform:capitalize;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;text-align:center;white-space:nowrap;-webkit-transition:background-color 200ms ease 0ms,box-shadow 200ms ease 0ms, border 200ms ease 0ms,color 200ms ease 0ms;transition:background-color 200ms ease 0ms,box-shadow 200ms ease 0ms, border 200ms ease 0ms,color 200ms ease 0ms;position:relative;overflow:hidden;color:").concat(color, ";background-color:").concat(bg, ";border:1px solid ").concat(border, ";cursor:").concat(cursor, ";pointer-events:").concat(events, ";box-shadow:").concat(shadow ? theme.expressiveness.shadowSmall : 'none', ";--geist-ui-button-icon-padding:").concat(SCALES.pl(0.727), ";--geist-ui-button-height:").concat(SCALES.height(2.5), ";--geist-ui-button-color:").concat(color, ";--geist-ui-button-bg:").concat(bg, ";min-width:").concat(auto ? 'min-content' : SCALES.width(10.5), ";width:").concat(auto ? 'auto' : 'initial', ";height:").concat(SCALES.height(2.5), ";padding:").concat(SCALES.pt(0), " ").concat(paddingRight, " ").concat(SCALES.pb(0), " ").concat(paddingLeft, ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.btn.__jsx-style-dynamic-selector:hover,.btn.__jsx-style-dynamic-selector:focus{color:").concat(hover.color, ";--geist-ui-button-color:").concat(hover.color, ";background-color:").concat(hover.bg, ";border-color:").concat(hover.border, ";cursor:").concat(cursor, ";pointer-events:").concat(events, ";box-shadow:").concat(shadow ? theme.expressiveness.shadowMedium : 'none', ";-webkit-transform:translate3d(0px,").concat(shadow ? '-1px' : '0px', ",0px);-ms-transform:translate3d(0px,").concat(shadow ? '-1px' : '0px', ",0px);transform:translate3d(0px,").concat(shadow ? '-1px' : '0px', ",0px);}.btn.__jsx-style-dynamic-selector .text{position:relative;z-index:1;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;text-align:center;line-height:inherit;top:-1px;}.btn.__jsx-style-dynamic-selector .text p,.btn.__jsx-style-dynamic-selector .text pre,.btn.__jsx-style-dynamic-selector .text div{margin:0;}")));
+});
+ButtonComponent.displayName = 'Button';
+var Button = withScale(ButtonComponent);
+export default Button;

package/esm/button/index.d.ts

@@ -0,0 +1,4 @@
+import Button from "./button";
+export type { ButtonProps } from "./button";
+export type { ButtonTypes } from "../utils/prop-types";
+export default Button;

package/esm/button/index.js

@@ -0,0 +1,4 @@
+"use client";
+
+import Button from './button';
+export default Button;

package/esm/button/styles.d.ts

@@ -0,0 +1,18 @@
+import { HUIThemesPalette } from "../themes/presets";
+import { ButtonTypes } from "../utils/prop-types";
+import { ButtonProps } from "./button";
+export interface ButtonColorGroup {
+    bg: string;
+    border: string;
+    color: string;
+}
+export declare const getButtonGhostColors: (palette: HUIThemesPalette, type: ButtonTypes) => ButtonColorGroup | null;
+export declare const getButtonColors: (palette: HUIThemesPalette, props: ButtonProps) => ButtonColorGroup;
+export declare const getButtonGhostHoverColors: (palette: HUIThemesPalette, type: ButtonTypes) => ButtonColorGroup | null;
+export declare const getButtonHoverColors: (palette: HUIThemesPalette, props: ButtonProps) => ButtonColorGroup;
+export interface ButtonCursorGroup {
+    cursor: string;
+    events: string;
+}
+export declare const getButtonCursor: (disabled: boolean, loading: boolean) => ButtonCursorGroup;
+export declare const getButtonDripColor: (palette: HUIThemesPalette, props: ButtonProps) => string;