@helpdice/ui 1.0.1 → 1.0.2

package/esm/auto-complete/auto-complete.js

@@ -0,0 +1,197 @@
+"use client";
+
+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 = ["options", "initialValue", "onSelect", "onSearch", "onChange", "searching", "children", "type", "value", "clearable", "disabled", "dropdownClassName", "dropdownStyle", "disableMatchWidth", "disableFreeSolo", "getPopupContainer"];
+import _JSXStyle from "../styled-jsx.es.js";
+import React, { useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import Input from '../input';
+import AutoCompleteItem from './auto-complete-item';
+import AutoCompleteDropdown from './auto-complete-dropdown';
+import AutoCompleteSearching from './auto-complete-searching';
+import AutoCompleteEmpty from './auto-complete-empty';
+import { AutoCompleteContext } from './auto-complete-context';
+import Loading from '../loading';
+import { pickChild } from '../utils/collections';
+import useCurrentState from '../utils/use-current-state';
+import useScale from '../use-scale';
+var childrenToOptionsNode = function childrenToOptionsNode(options) {
+  return options.map(function (item, index) {
+    var key = "auto-complete-item-".concat(index);
+    if ( /*#__PURE__*/React.isValidElement(item)) return /*#__PURE__*/React.cloneElement(item, {
+      key: key
+    });
+    var validItem = item;
+    return /*#__PURE__*/React.createElement(AutoCompleteItem, {
+      key: key,
+      value: validItem.value,
+      isLabelOnly: true
+    }, validItem.label);
+  });
+};
+
+// When the search is not set, the "clearable" icon can be displayed in the original location.
+// When the search is seted, at least one element should exist to avoid re-render.
+var getSearchIcon = function getSearchIcon(searching) {
+  var scale = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
+  if (searching === undefined) return null;
+  return searching ? /*#__PURE__*/React.createElement(Loading, {
+    scale: +scale / 2
+  }) : /*#__PURE__*/React.createElement("span", null);
+};
+var AutoCompleteComponent = /*#__PURE__*/React.forwardRef(function (_ref, userRef) {
+  var _ref$options = _ref.options,
+    options = _ref$options === void 0 ? [] : _ref$options,
+    _ref$initialValue = _ref.initialValue,
+    customInitialValue = _ref$initialValue === void 0 ? '' : _ref$initialValue,
+    onSelect = _ref.onSelect,
+    onSearch = _ref.onSearch,
+    onChange = _ref.onChange,
+    searching = _ref.searching,
+    children = _ref.children,
+    type = _ref.type,
+    value = _ref.value,
+    _ref$clearable = _ref.clearable,
+    clearable = _ref$clearable === void 0 ? false : _ref$clearable,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    dropdownClassName = _ref.dropdownClassName,
+    dropdownStyle = _ref.dropdownStyle,
+    _ref$disableMatchWidt = _ref.disableMatchWidth,
+    disableMatchWidth = _ref$disableMatchWidt === void 0 ? false : _ref$disableMatchWidt,
+    _ref$disableFreeSolo = _ref.disableFreeSolo,
+    disableFreeSolo = _ref$disableFreeSolo === void 0 ? false : _ref$disableFreeSolo,
+    getPopupContainer = _ref.getPopupContainer,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var resetTimer = useRef();
+  var _useScale = useScale(),
+    SCALES = _useScale.SCALES,
+    getScaleProps = _useScale.getScaleProps;
+  var ref = useRef(null);
+  var inputRef = useRef(null);
+  var _useCurrentState = useCurrentState(customInitialValue),
+    _useCurrentState2 = _slicedToArray(_useCurrentState, 3),
+    state = _useCurrentState2[0],
+    setState = _useCurrentState2[1],
+    stateRef = _useCurrentState2[2];
+  var _useState = useState(customInitialValue),
+    _useState2 = _slicedToArray(_useState, 2),
+    selectVal = _useState2[0],
+    setSelectVal = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    visible = _useState4[0],
+    setVisible = _useState4[1];
+  useImperativeHandle(userRef, function () {
+    return inputRef.current;
+  });
+  var _pickChild = pickChild(children, AutoCompleteSearching),
+    _pickChild2 = _slicedToArray(_pickChild, 2),
+    searchChild = _pickChild2[1];
+  var _pickChild3 = pickChild(children, AutoCompleteEmpty),
+    _pickChild4 = _slicedToArray(_pickChild3, 2),
+    emptyChild = _pickChild4[1];
+  var autoCompleteItems = useMemo(function () {
+    var hasSearchChild = searchChild && React.Children.count(searchChild) > 0;
+    var hasEmptyChild = emptyChild && React.Children.count(emptyChild) > 0;
+    if (searching) {
+      return hasSearchChild ? searchChild : /*#__PURE__*/React.createElement(AutoCompleteSearching, null, "Searching...");
+    }
+    if (options.length === 0) {
+      if (state === '') return null;
+      return hasEmptyChild ? emptyChild : /*#__PURE__*/React.createElement(AutoCompleteEmpty, null, "No Options");
+    }
+    return childrenToOptionsNode(options);
+  }, [searching, options]);
+  var showClearIcon = useMemo(function () {
+    return clearable && searching === undefined;
+  }, [clearable, searching]);
+  var updateValue = function updateValue(val) {
+    if (disabled) return;
+    setSelectVal(val);
+    onSelect && onSelect(val);
+    setState(val);
+    inputRef.current && inputRef.current.focus();
+  };
+  var updateVisible = function updateVisible(next) {
+    return setVisible(next);
+  };
+  var onInputChange = function onInputChange(event) {
+    setVisible(true);
+    onSearch && onSearch(event.target.value);
+    setState(event.target.value);
+  };
+  var resetInputValue = function resetInputValue() {
+    if (!disableFreeSolo) return;
+    if (!state || state === '') return;
+    if (state !== selectVal) {
+      setState(selectVal);
+    }
+  };
+  useEffect(function () {
+    onChange && onChange(state);
+  }, [state]);
+  useEffect(function () {
+    if (value === undefined) return;
+    setState(value);
+  }, [value]);
+  var initialValue = useMemo(function () {
+    return {
+      ref: ref,
+      value: state,
+      updateValue: updateValue,
+      visible: visible,
+      updateVisible: updateVisible
+    };
+  }, [state, visible]);
+  var toggleFocusHandler = function toggleFocusHandler(next) {
+    clearTimeout(resetTimer.current);
+    setVisible(next);
+    if (next) {
+      onSearch && onSearch(stateRef.current);
+    } else {
+      resetTimer.current = window.setTimeout(function () {
+        resetInputValue();
+        clearTimeout(resetTimer.current);
+      }, 100);
+    }
+  };
+  var inputProps = _extends({}, props, {
+    disabled: disabled,
+    value: state
+  });
+  return /*#__PURE__*/React.createElement(AutoCompleteContext.Provider, {
+    value: initialValue
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    className: _JSXStyle.dynamic([["2878925540", [SCALES.width(1, 'max-content'), 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)]]]) + " " + "auto-complete"
+  }, /*#__PURE__*/React.createElement(Input, _extends({
+    ref: inputRef,
+    type: type,
+    onChange: onInputChange,
+    onFocus: function onFocus() {
+      return toggleFocusHandler(true);
+    },
+    onBlur: function onBlur() {
+      return toggleFocusHandler(false);
+    },
+    clearable: showClearIcon,
+    width: SCALES.width(1, 'initial'),
+    height: SCALES.height(2.25),
+    iconRight: getSearchIcon(searching, getScaleProps('scale'))
+  }, inputProps)), /*#__PURE__*/React.createElement(AutoCompleteDropdown, {
+    visible: visible,
+    disableMatchWidth: disableMatchWidth,
+    className: dropdownClassName,
+    dropdownStyle: dropdownStyle,
+    getPopupContainer: getPopupContainer
+  }, autoCompleteItems), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "2878925540",
+    dynamic: [SCALES.width(1, 'max-content'), 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)]
+  }, ".auto-complete.__jsx-style-dynamic-selector{width:".concat(SCALES.width(1, 'max-content'), ";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), ";}.auto-complete.__jsx-style-dynamic-selector .loading{width:-webkit-max-content;width:-moz-max-content;width:max-content;}"))));
+});
+AutoCompleteComponent.displayName = 'AutoComplete';
+// const AutoComplete = withScale(AutoCompleteComponent)
+
+export default AutoCompleteComponent;

package/esm/auto-complete/index.d.ts

@@ -0,0 +1,13 @@
+import AutoComplete from "./auto-complete";
+import AutoCompleteItem from "./auto-complete-item";
+import AutoCompleteSearching from "./auto-complete-searching";
+import AutoCompleteEmpty from "./auto-complete-empty";
+export type AutoCompleteComponentType = typeof AutoComplete & {
+    Item: typeof AutoCompleteItem;
+    Option: typeof AutoCompleteItem;
+    Searching: typeof AutoCompleteSearching;
+    Empty: typeof AutoCompleteEmpty;
+};
+export type { AutoCompleteOption, AutoCompleteOptions, AutoCompleteProps, AutoCompleteTypes, } from "./auto-complete";
+declare const _default: AutoCompleteComponentType;
+export default _default;

package/esm/auto-complete/index.js

@@ -0,0 +1,11 @@
+"use client";
+
+import AutoComplete from './auto-complete';
+import AutoCompleteItem from './auto-complete-item';
+import AutoCompleteSearching from './auto-complete-searching';
+import AutoCompleteEmpty from './auto-complete-empty';
+AutoComplete.Item = AutoCompleteItem;
+AutoComplete.Option = AutoCompleteItem;
+AutoComplete.Searching = AutoCompleteSearching;
+AutoComplete.Empty = AutoCompleteEmpty;
+export default AutoComplete;

package/esm/avatar/avatar-group.d.ts

@@ -0,0 +1,43 @@
+import React from 'react';
+interface Props {
+    count?: number;
+    className?: string;
+}
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
+export type AvatarGroupProps = Props & NativeAttrs;
+declare const AvatarGroup: 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 AvatarGroup;

package/esm/avatar/avatar-group.js

@@ -0,0 +1,25 @@
+import _JSXStyle from "../styled-jsx.es.js";
+import React from 'react';
+import useTheme from '../use-theme';
+import useScale, { withScale } from '../use-scale';
+import useClasses from '../use-classes';
+var AvatarGroupComponent = function AvatarGroupComponent(_ref) {
+  var count = _ref.count,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    children = _ref.children;
+  var theme = useTheme();
+  var _useScale = useScale(),
+    SCALES = _useScale.SCALES;
+  return /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["1135268764", [SCALES.width(1, 'max-content'), 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), SCALES.ml(0.625), SCALES.font(0.875), theme.palette.accents_7]]]) + " " + (useClasses('avatar-group', className) || "")
+  }, children, count && /*#__PURE__*/React.createElement("span", {
+    className: _JSXStyle.dynamic([["1135268764", [SCALES.width(1, 'max-content'), 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), SCALES.ml(0.625), SCALES.font(0.875), theme.palette.accents_7]]]) + " " + "count"
+  }, "+", count), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "1135268764",
+    dynamic: [SCALES.width(1, 'max-content'), 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), SCALES.ml(0.625), SCALES.font(0.875), theme.palette.accents_7]
+  }, ".avatar-group.__jsx-style-dynamic-selector{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;width:".concat(SCALES.width(1, 'max-content'), ";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), ";}.avatar-group.__jsx-style-dynamic-selector .avatar{margin-left:-").concat(SCALES.ml(0.625), ";}.count.__jsx-style-dynamic-selector{font-size:").concat(SCALES.font(0.875), ";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;padding-left:5.5px;color:").concat(theme.palette.accents_7, ";}")));
+};
+AvatarGroupComponent.displayName = 'AvatarGroup';
+var AvatarGroup = withScale(AvatarGroupComponent);
+export default AvatarGroup;

package/esm/avatar/avatar.d.ts

@@ -0,0 +1,43 @@
+import React from 'react';
+interface Props {
+    src?: string;
+    stacked?: boolean;
+    text?: string;
+    isSquare?: boolean;
+    className?: string;
+}
+export type AvatarProps = Props;
+declare const Avatar: React.ForwardRefExoticComponent<Props & {
+    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 Avatar;

package/esm/avatar/avatar.js

@@ -0,0 +1,54 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["src", "stacked", "text", "isSquare", "className"];
+import _JSXStyle from "../styled-jsx.es.js";
+import React from 'react';
+import useTheme from '../use-theme';
+import useScale, { withScale } from '../use-scale';
+import useClasses from '../use-classes';
+
+// type NativeAttrs = Omit<
+//   Partial<React.ImgHTMLAttributes<any> & React.HTMLAttributes<any>>,
+//   keyof Props
+// >
+
+var safeText = function safeText(text) {
+  if (text.length <= 4) return text;
+  return text.slice(0, 3);
+};
+var AvatarComponent = function AvatarComponent(_ref) {
+  var src = _ref.src,
+    _ref$stacked = _ref.stacked,
+    stacked = _ref$stacked === void 0 ? false : _ref$stacked,
+    _ref$text = _ref.text,
+    text = _ref$text === void 0 ? '' : _ref$text,
+    _ref$isSquare = _ref.isSquare,
+    isSquare = _ref$isSquare === void 0 ? false : _ref$isSquare,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var theme = useTheme();
+  var _useScale = useScale(),
+    SCALES = _useScale.SCALES;
+  var showText = !src;
+  var radius = isSquare ? theme.layout.radius : '50%';
+  var marginLeft = stacked ? SCALES.ml(-0.625) : SCALES.ml(0);
+  var classes = useClasses('avatar', className);
+  return /*#__PURE__*/React.createElement("span", {
+    className: _JSXStyle.dynamic([["2295275975", [theme.palette.accents_2, radius, theme.palette.background, SCALES.width(1.75) || SCALES.height(1.75), SCALES.height(1.75) || SCALES.width(1.75), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), marginLeft, radius, SCALES.font(1)]]]) + " " + (classes || "")
+  }, !showText && /*#__PURE__*/React.createElement("img", _extends({
+    alt: "avatar",
+    src: src,
+    draggable: false
+  }, props, {
+    className: _JSXStyle.dynamic([["2295275975", [theme.palette.accents_2, radius, theme.palette.background, SCALES.width(1.75) || SCALES.height(1.75), SCALES.height(1.75) || SCALES.width(1.75), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), marginLeft, radius, SCALES.font(1)]]]) + " " + (props && props.className != null && props.className || "avatar-img")
+  })), showText && /*#__PURE__*/React.createElement("span", _extends({}, props, {
+    className: _JSXStyle.dynamic([["2295275975", [theme.palette.accents_2, radius, theme.palette.background, SCALES.width(1.75) || SCALES.height(1.75), SCALES.height(1.75) || SCALES.width(1.75), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), marginLeft, radius, SCALES.font(1)]]]) + " " + (props && props.className != null && props.className || "avatar-text")
+  }), safeText(text)), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "2295275975",
+    dynamic: [theme.palette.accents_2, radius, theme.palette.background, SCALES.width(1.75) || SCALES.height(1.75), SCALES.height(1.75) || SCALES.width(1.75), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), marginLeft, radius, SCALES.font(1)]
+  }, ".avatar.__jsx-style-dynamic-selector{display:inline-block;position:relative;overflow:hidden;border:1px solid ".concat(theme.palette.accents_2, ";border-radius:").concat(radius, ";vertical-align:top;background-color:").concat(theme.palette.background, ";box-sizing:border-box;width:").concat(SCALES.width(1.75) || SCALES.height(1.75), ";height:").concat(SCALES.height(1.75) || SCALES.width(1.75), ";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(marginLeft, ";}.avatar-img.__jsx-style-dynamic-selector{display:inline-block;object-fit:cover;width:100%;height:100%;border-radius:").concat(radius, ";-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}.avatar-text.__jsx-style-dynamic-selector{position:absolute;left:50%;top:50%;font-size:").concat(SCALES.font(1), ";text-align:center;-webkit-transform:translate(-50%,-50%) scale(0.65);-ms-transform:translate(-50%,-50%) scale(0.65);transform:translate(-50%,-50%) scale(0.65);white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}")));
+};
+AvatarComponent.displayName = 'Avatar';
+var Avatar = withScale(AvatarComponent);
+export default Avatar;

package/esm/avatar/index.d.ts

@@ -0,0 +1,9 @@
+import Avatar from "./avatar";
+import AvatarGroup from "./avatar-group";
+export type AvatarComponentType = typeof Avatar & {
+    Group: typeof AvatarGroup;
+};
+export type { AvatarProps } from "./avatar";
+export type { AvatarGroupProps } from "./avatar-group";
+declare const _default: AvatarComponentType;
+export default _default;

package/esm/avatar/index.js

@@ -0,0 +1,6 @@
+"use client";
+
+import Avatar from './avatar';
+import AvatarGroup from './avatar-group';
+Avatar.Group = AvatarGroup;
+export default Avatar;

package/esm/badge/badge-anchor.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+declare const placement: ["topLeft", "topRight", "bottomLeft", "bottomRight"];
+export type BadgeAnchorPlacement = typeof placement[number];
+interface Props {
+    placement?: BadgeAnchorPlacement;
+    className?: string;
+}
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
+export type BadgeAnchorProps = Props & NativeAttrs;
+declare const BadgeAnchor: React.FC<React.PropsWithChildren<BadgeAnchorProps>>;
+export default BadgeAnchor;

package/esm/badge/badge-anchor.js

@@ -0,0 +1,64 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _JSXStyle from "../styled-jsx.es.js";
+import React, { useMemo } from 'react';
+import { pickChild } from '../utils/collections';
+import { tuple } from '../utils/prop-types';
+import Badge from './badge';
+var placement = tuple('topLeft', 'topRight', 'bottomLeft', 'bottomRight');
+var getTransform = function getTransform(placement) {
+  var styles = {
+    topLeft: {
+      top: '0',
+      left: '0',
+      value: 'translate(-50%, -50%)',
+      origin: '0% 0%'
+    },
+    topRight: {
+      top: '0',
+      right: '0',
+      value: 'translate(50%, -50%)',
+      origin: '100% 0%'
+    },
+    bottomLeft: {
+      left: '0',
+      bottom: '0',
+      value: 'translate(-50%, 50%)',
+      origin: '0% 100%'
+    },
+    bottomRight: {
+      right: '0',
+      bottom: '0',
+      value: 'translate(50%, 50%)',
+      origin: '100% 100%'
+    }
+  };
+  return styles[placement];
+};
+var BadgeAnchor = function BadgeAnchor(_ref) {
+  var children = _ref.children,
+    _ref$placement = _ref.placement,
+    placement = _ref$placement === void 0 ? 'topRight' : _ref$placement;
+  var _pickChild = pickChild(children, Badge),
+    _pickChild2 = _slicedToArray(_pickChild, 2),
+    withoutBadgeChildren = _pickChild2[0],
+    badgeChldren = _pickChild2[1];
+  var _useMemo = useMemo(function () {
+      return getTransform(placement);
+    }, [placement]),
+    top = _useMemo.top,
+    bottom = _useMemo.bottom,
+    left = _useMemo.left,
+    right = _useMemo.right,
+    value = _useMemo.value,
+    origin = _useMemo.origin;
+  return /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["1121745930", [top || 'auto', left || 'auto', right || 'auto', bottom || 'auto', value, origin]]]) + " " + "anchor"
+  }, withoutBadgeChildren, /*#__PURE__*/React.createElement("sup", {
+    className: _JSXStyle.dynamic([["1121745930", [top || 'auto', left || 'auto', right || 'auto', bottom || 'auto', value, origin]]])
+  }, badgeChldren), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "1121745930",
+    dynamic: [top || 'auto', left || 'auto', right || 'auto', bottom || 'auto', value, origin]
+  }, ".anchor.__jsx-style-dynamic-selector{position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;vertical-align:middle;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;box-sizing:border-box;}sup.__jsx-style-dynamic-selector{position:absolute;top:".concat(top || 'auto', ";left:").concat(left || 'auto', ";right:").concat(right || 'auto', ";bottom:").concat(bottom || 'auto', ";-webkit-transform:").concat(value, ";-ms-transform:").concat(value, ";transform:").concat(value, ";-webkit-transform-origin:").concat(origin, ";-ms-transform-origin:").concat(origin, ";transform-origin:").concat(origin, ";z-index:1;}")));
+};
+BadgeAnchor.displayName = 'BadgeAnchor';
+export default BadgeAnchor;

package/esm/badge/badge.d.ts

@@ -0,0 +1,46 @@
+import React from 'react';
+import { NormalTypes } from "../utils/prop-types";
+export type BadgeTypes = NormalTypes;
+interface Props {
+    type?: BadgeTypes;
+    dot?: boolean;
+    className?: string;
+}
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
+export type BadgeProps = Props & NativeAttrs;
+declare const Badge: 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 Badge;

package/esm/badge/badge.js

@@ -0,0 +1,50 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["type", "className", "children", "dot"];
+import _JSXStyle from "../styled-jsx.es.js";
+import React, { useMemo } from 'react';
+import useTheme from '../use-theme';
+import useScale, { withScale } from '../use-scale';
+import useClasses from '../use-classes';
+var getBgColor = function getBgColor(type, palette) {
+  var colors = {
+    "default": palette.foreground,
+    success: palette.success,
+    warning: palette.warning,
+    error: palette.error,
+    secondary: palette.secondary
+  };
+  return colors[type];
+};
+var BadgeComponent = function BadgeComponent(_ref) {
+  var _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'default' : _ref$type,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    children = _ref.children,
+    _ref$dot = _ref.dot,
+    dot = _ref$dot === void 0 ? false : _ref$dot,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var theme = useTheme();
+  var _useScale = useScale(),
+    SCALES = _useScale.SCALES;
+  var bg = useMemo(function () {
+    return getBgColor(type, theme.palette);
+  }, [type, theme.palette]);
+  var color = useMemo(function () {
+    if (!type || type === 'default') return theme.palette.background;
+    return 'white';
+  }, [type, theme.palette.background]);
+  var classes = useClasses('badge', {
+    dot: dot
+  }, className);
+  return /*#__PURE__*/React.createElement("span", _extends({}, props, {
+    className: _JSXStyle.dynamic([["427831233", [bg, color, SCALES.font(0.875), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0.25), SCALES.pr(0.4375), SCALES.pb(0.25), SCALES.pl(0.4375), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.py(0.25), SCALES.px(0.25)]]]) + " " + (props && props.className != null && props.className || classes || "")
+  }), !dot && children, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "427831233",
+    dynamic: [bg, color, SCALES.font(0.875), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0.25), SCALES.pr(0.4375), SCALES.pb(0.25), SCALES.pl(0.4375), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.py(0.25), SCALES.px(0.25)]
+  }, ".badge.__jsx-style-dynamic-selector{display:inline-block;border-radius:16px;font-variant:tabular-nums;line-height:1;vertical-align:middle;background-color:".concat(bg, ";color:").concat(color, ";border:0;font-size:").concat(SCALES.font(0.875), ";width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0.25), " ").concat(SCALES.pr(0.4375), " ").concat(SCALES.pb(0.25), " ").concat(SCALES.pl(0.4375), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.dot.__jsx-style-dynamic-selector{padding:").concat(SCALES.py(0.25), " ").concat(SCALES.px(0.25), ";border-radius:50%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}")));
+};
+BadgeComponent.displayName = 'Badge';
+var Badge = withScale(BadgeComponent);
+export default Badge;

package/esm/badge/index.d.ts

@@ -0,0 +1,9 @@
+import Badge from "./badge";
+import BadgeAnchor from "./badge-anchor";
+export type BadgeComponentType = typeof Badge & {
+    Anchor: typeof BadgeAnchor;
+};
+export type { BadgeProps, BadgeTypes } from "./badge";
+export type { BadgeAnchorProps, BadgeAnchorPlacement } from "./badge-anchor";
+declare const _default: BadgeComponentType;
+export default _default;

package/esm/badge/index.js

@@ -0,0 +1,6 @@
+"use client";
+
+import Badge from './badge';
+import BadgeAnchor from './badge-anchor';
+Badge.Anchor = BadgeAnchor;
+export default Badge;

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

@@ -0,0 +1,15 @@
+import { Props as LinkBasicProps } from "../link/link";
+import React from 'react';
+interface Props {
+    href?: string;
+    nextLink?: boolean;
+    onClick?: (event: React.MouseEvent) => void;
+    className?: string;
+}
+type NativeAttrs = Omit<React.AnchorHTMLAttributes<any>, keyof Props>;
+type NativeLinkAttrs = Omit<NativeAttrs, keyof LinkBasicProps>;
+export type BreadcrumbsItemProps = Props & NativeLinkAttrs;
+declare const BreadcrumbsItem: React.ForwardRefExoticComponent<Props & NativeLinkAttrs & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLAnchorElement>>;
+export default BreadcrumbsItem;