@helpdice/ui 1.0.1 → 1.0.2

package/dist/user/user-link.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+interface Props {
+    href?: string;
+    className?: string;
+}
+type NativeAttrs = Omit<React.AnchorHTMLAttributes<any>, keyof Props>;
+export type UserLinkProps = Props & NativeAttrs;
+declare const UserLink: React.ForwardRefExoticComponent<Props & NativeAttrs & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLAnchorElement>>;
+export default UserLink;

package/dist/user/user.d.ts

@@ -0,0 +1,46 @@
+import React, { ReactNode } from 'react';
+interface Props {
+    name: ReactNode | string;
+    src?: string;
+    text?: string;
+    className?: string;
+    altText?: string;
+}
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
+export type UserProps = Props & NativeAttrs;
+declare const User: 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 User;

package/dist/utils/calculations.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Calculate the ratio of two numbers, maximum decimal length can be specified.
+ *
+ * (0, 100) => 0
+ * (50, 100) => 50
+ * (11.22, 100) => 11.22
+ * (11.22, 100, 4) => 11.2200
+ */
+export declare const getProportions: (value: number, max: number, maxFixed?: number) => number;
+export declare const useProportions: (value: number, max: number, maxFixed?: number) => number;

package/dist/utils/collections.d.ts

@@ -0,0 +1,15 @@
+import React, { ReactNode } from 'react';
+export declare const getId: () => string;
+export declare const capitalize: (str: string | symbol | number | undefined | null) => string;
+export declare const hasChild: (children: ReactNode | undefined, child: React.ElementType) => boolean;
+export declare const pickChild: (children: ReactNode | undefined, targetChild: React.ElementType) => [ReactNode | undefined, ReactNode | undefined];
+export declare const pickChildByProps: (children: ReactNode | undefined, key: string, value: any) => [ReactNode | undefined, ReactNode | undefined];
+export declare const pickChildrenFirst: (children: ReactNode | undefined) => ReactNode | undefined;
+export declare const setChildrenProps: (children: ReactNode | undefined, props: Record<string, unknown>, targetComponents?: Array<React.ElementType>) => ReactNode | undefined;
+export declare const setChildrenIndex: (children: ReactNode | undefined, targetComponents?: Array<React.ElementType>) => ReactNode | undefined;
+export declare const getReactNode: (node?: React.ReactNode | (() => React.ReactNode)) => React.ReactNode;
+export declare const isChildElement: (parent: Element | null | undefined, child: Element | null | undefined) => boolean;
+export declare const isGeistElement: (el?: HTMLElement) => boolean;
+export declare const isBrowser: () => boolean;
+export declare const isMac: () => boolean;
+export declare const isCSSNumberValue: (value?: string | number) => boolean;

package/dist/utils/color.d.ts

@@ -0,0 +1,2 @@
+export declare const colorToRgbValues: (color: string) => number[];
+export declare const addColorAlpha: (color: string, alpha: number) => string;

package/dist/utils/layouts.d.ts

@@ -0,0 +1,20 @@
+import { MouseEvent, FocusEvent, MutableRefObject } from 'react';
+export declare const getElementOffset: (el?: HTMLElement | null | undefined) => {
+    top: number;
+    left: number;
+};
+export interface ReactiveDomReact {
+    top: number;
+    left: number;
+    right: number;
+    width: number;
+    height: number;
+    elementTop: number;
+}
+export declare const isUnplacedRect: (rect?: ReactiveDomReact) => boolean;
+export declare const getRefRect: (ref?: MutableRefObject<HTMLElement | null>, getContainer?: () => HTMLElement | null) => ReactiveDomReact;
+export declare const getEventRect: (event?: MouseEvent<HTMLElement> | FocusEvent<HTMLElement>, getContainer?: () => HTMLElement | null) => ReactiveDomReact;
+export declare const useRect: (initialState?: ReactiveDomReact | (() => ReactiveDomReact)) => {
+    rect: ReactiveDomReact;
+    setRect: (eventOrRef: MouseEvent<HTMLElement> | FocusEvent<HTMLElement> | MutableRefObject<HTMLElement | null>, getContainer?: () => HTMLElement | null) => void;
+};

package/dist/utils/prop-types.d.ts

@@ -0,0 +1,19 @@
+export declare const tuple: <T extends string[]>(...args: T) => T;
+export declare const tupleNumber: <T extends number[]>(...args: T) => T;
+declare const buttonTypes: ["default", "secondary", "success", "warning", "error", "abort", "secondary-light", "success-light", "warning-light", "error-light"];
+declare const normalTypes: ["default", "secondary", "success", "warning", "error"];
+declare const snippetTypes: ["default", "secondary", "success", "warning", "error", "dark", "lite"];
+declare const cardTypes: ["default", "secondary", "success", "warning", "error", "dark", "lite", "alert", "purple", "violet", "cyan"];
+declare const copyTypes: ["default", "silent", "prevent"];
+declare const triggerTypes: ["hover", "click"];
+declare const placement: ["top", "topStart", "topEnd", "left", "leftStart", "leftEnd", "bottom", "bottomStart", "bottomEnd", "right", "rightStart", "rightEnd"];
+declare const dividerAlign: ["start", "center", "end", "left", "right"];
+export type ButtonTypes = typeof buttonTypes[number];
+export type NormalTypes = typeof normalTypes[number];
+export type SnippetTypes = typeof snippetTypes[number];
+export type CardTypes = typeof cardTypes[number];
+export type CopyTypes = typeof copyTypes[number];
+export type TriggerTypes = typeof triggerTypes[number];
+export type Placement = typeof placement[number];
+export type DividerAlign = typeof dividerAlign[number];
+export {};

package/dist/utils/types.d.ts

@@ -0,0 +1,3 @@
+export type DeepPartial<T> = {
+    [P in keyof T]?: T[P] extends Record<string, any> ? DeepPartial<T[P]> : T[P];
+};

package/dist/utils/use-body-scroll.d.ts

@@ -0,0 +1,2 @@
+import useBodyScroll from "../use-body-scroll";
+export default useBodyScroll;

package/dist/utils/use-click-anywhere.d.ts

@@ -0,0 +1,2 @@
+declare const useClickAnyWhere: (handler: (event: Event) => void) => void;
+export default useClickAnyWhere;

package/dist/utils/use-click-away.d.ts

@@ -0,0 +1,2 @@
+import { default as useClickAway } from "../use-click-away";
+export default useClickAway;

package/dist/utils/use-clipboard.d.ts

@@ -0,0 +1,2 @@
+import useClipboard from "../use-clipboard";
+export default useClipboard;

package/dist/utils/use-current-state.d.ts

@@ -0,0 +1,2 @@
+import useCurrentState from "../use-current-state";
+export default useCurrentState;

package/dist/utils/use-dom-observer.d.ts

@@ -0,0 +1,3 @@
+import { MutableRefObject } from 'react';
+declare const useDOMObserver: (ref: MutableRefObject<HTMLElement | null> | undefined, callback?: MutationCallback) => void;
+export default useDOMObserver;

package/dist/utils/use-drag.d.ts

@@ -0,0 +1,8 @@
+import { RefObject } from 'react';
+export type DraggingEvent = {
+    startX: number;
+    currentX: number;
+};
+export type DraggingHandler = (event: DraggingEvent) => void;
+declare const useDrag: (elementRef: RefObject<HTMLElement> | null, draggingHandler?: DraggingHandler, dragStartHandler?: DraggingHandler, dragEndHandler?: DraggingHandler) => void;
+export default useDrag;

package/dist/utils/use-hd-ui-context.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import type { ToastLayout, Toast } from "../use-toasts/use-toast";
+export declare const defaultToastLayout: Required<ToastLayout>;
+export type UpdateToastsFunction = (fn: (toasts: Array<Toast>) => Array<Toast>) => any;
+export type UpdateToastsLayoutFunction = (fn: (layout: Required<ToastLayout>) => Required<ToastLayout>) => any;
+export type UpdateToastsIDFunction = (fn: () => string | null) => any;
+export interface HUIContextParams {
+    toasts: Array<Toast>;
+    updateToasts: UpdateToastsFunction;
+    toastLayout: Required<ToastLayout>;
+    updateToastLayout: UpdateToastsLayoutFunction;
+    lastUpdateToastId: string | null;
+    updateLastToastId: UpdateToastsIDFunction;
+}
+export declare const HUIContent: React.Context<HUIContextParams>;
+export declare const useHUIContext: () => HUIContextParams;

package/dist/utils/use-portal.d.ts

@@ -0,0 +1,2 @@
+declare const usePortal: (selectId?: string, getContainer?: () => HTMLElement | null) => HTMLElement | null;
+export default usePortal;

package/dist/utils/use-previous.d.ts

@@ -0,0 +1,2 @@
+declare const usePrevious: <T>(state: T) => T | null | undefined;
+export default usePrevious;

package/dist/utils/use-real-shape.d.ts

@@ -0,0 +1,9 @@
+import { MutableRefObject } from 'react';
+export type ShapeType = {
+    width: number;
+    height: number;
+};
+export declare const getRealShape: (el: HTMLElement | null) => ShapeType;
+export type ShapeResult = [ShapeType, () => void];
+declare const useRealShape: <T extends HTMLElement>(ref: MutableRefObject<T | null>) => ShapeResult;
+export default useRealShape;

package/dist/utils/use-resize.d.ts

@@ -0,0 +1,2 @@
+declare const useResize: (callback: () => unknown, immediatelyInvoke?: boolean) => void;
+export default useResize;

package/dist/utils/use-ssr.d.ts

@@ -0,0 +1,6 @@
+export type SSRState = {
+    isBrowser: boolean;
+    isServer: boolean;
+};
+declare const useSSR: () => SSRState;
+export default useSSR;

package/dist/utils/use-warning.d.ts

@@ -0,0 +1,2 @@
+declare const useWarning: (message: string, component?: string) => void;
+export default useWarning;

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

@@ -0,0 +1,10 @@
+import React, { MutableRefObject } from 'react';
+export interface AutoCompleteConfig {
+    value?: string;
+    updateValue?: (val: string) => unknown;
+    visible?: boolean;
+    updateVisible?: (next: boolean) => unknown;
+    ref?: MutableRefObject<HTMLElement | null>;
+}
+export declare const AutoCompleteContext: React.Context<AutoCompleteConfig>;
+export declare const useAutoCompleteContext: () => AutoCompleteConfig;

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

@@ -0,0 +1,8 @@
+import React from 'react';
+var defaultContext = {
+  visible: false
+};
+export var AutoCompleteContext = /*#__PURE__*/React.createContext(defaultContext);
+export var useAutoCompleteContext = function useAutoCompleteContext() {
+  return React.useContext(AutoCompleteContext);
+};

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

@@ -0,0 +1,12 @@
+import React, { CSSProperties } from 'react';
+interface Props {
+    visible: boolean;
+    className?: string;
+    disableMatchWidth?: boolean;
+    dropdownStyle?: CSSProperties;
+    getPopupContainer?: () => HTMLElement | null;
+}
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
+export type AutoCompleteDropdownProps = Props & NativeAttrs;
+declare const AutoCompleteDropdown: React.FC<React.PropsWithChildren<AutoCompleteDropdownProps>>;
+export default AutoCompleteDropdown;

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

@@ -0,0 +1,43 @@
+import _JSXStyle from "../styled-jsx.es.js";
+import React, { useMemo } from 'react';
+import useTheme from '../use-theme';
+import { useAutoCompleteContext } from './auto-complete-context';
+import Dropdown from '../shared/dropdown';
+import useClasses from '../use-classes';
+var AutoCompleteDropdown = function AutoCompleteDropdown(_ref) {
+  var children = _ref.children,
+    visible = _ref.visible,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    _ref$dropdownStyle = _ref.dropdownStyle,
+    dropdownStyle = _ref$dropdownStyle === void 0 ? {} : _ref$dropdownStyle,
+    disableMatchWidth = _ref.disableMatchWidth,
+    getPopupContainer = _ref.getPopupContainer;
+  var theme = useTheme();
+  var _useAutoCompleteConte = useAutoCompleteContext(),
+    ref = _useAutoCompleteConte.ref;
+  var isEmpty = useMemo(function () {
+    return !visible || React.Children.count(children) === 0;
+  }, [children, visible]);
+  var classes = useClasses('auto-complete-dropdown', className);
+  var clickHandler = function clickHandler(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    event.nativeEvent.stopImmediatePropagation();
+  };
+  return /*#__PURE__*/React.createElement(Dropdown, {
+    parent: ref,
+    visible: visible,
+    disableMatchWidth: disableMatchWidth,
+    getPopupContainer: getPopupContainer
+  }, /*#__PURE__*/React.createElement("div", {
+    style: dropdownStyle,
+    onClick: clickHandler,
+    className: _JSXStyle.dynamic([["155200262", [theme.layout.radius, isEmpty ? 'none' : theme.expressiveness.shadowLarge, theme.palette.background]]]) + " " + (classes || "")
+  }, children, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "155200262",
+    dynamic: [theme.layout.radius, isEmpty ? 'none' : theme.expressiveness.shadowLarge, theme.palette.background]
+  }, ".auto-complete-dropdown.__jsx-style-dynamic-selector{border-radius:".concat(theme.layout.radius, ";box-shadow:").concat(isEmpty ? 'none' : theme.expressiveness.shadowLarge, ";background-color:").concat(theme.palette.background, ";overflow-y:auto;max-height:15rem;overflow-anchor:none;}"))));
+};
+AutoCompleteDropdown.displayName = 'AutoCompleteDropdown';
+export default AutoCompleteDropdown;

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

@@ -0,0 +1,8 @@
+import React from 'react';
+interface Props {
+    hidden?: boolean;
+    className?: string;
+}
+export type AutoCompleteEmptyProps = Props & React.HTMLAttributes<any>;
+declare const AutoCompleteEmpty: React.FC<React.PropsWithChildren<AutoCompleteEmptyProps>>;
+export default AutoCompleteEmpty;

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import AutoCompleteSearch from './auto-complete-searching';
+var AutoCompleteEmpty = function AutoCompleteEmpty(_ref) {
+  var children = _ref.children,
+    _ref$hidden = _ref.hidden,
+    hidden = _ref$hidden === void 0 ? false : _ref$hidden,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className;
+  if (hidden) return null;
+  return /*#__PURE__*/React.createElement(AutoCompleteSearch, {
+    className: className
+  }, children);
+};
+AutoCompleteEmpty.displayName = 'AutoCompleteEmpty';
+export default AutoCompleteEmpty;

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

@@ -0,0 +1,8 @@
+import React from 'react';
+export type AutoCompleteItemProps = {
+    value: string;
+    children: React.ReactNode;
+    isLabelOnly?: boolean;
+};
+declare const AutoCompleteItemComponent: React.FC<AutoCompleteItemProps>;
+export default AutoCompleteItemComponent;

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

@@ -0,0 +1,45 @@
+import _JSXStyle from "../styled-jsx.es.js";
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import React, { useMemo } from 'react';
+import useTheme from '../use-theme';
+import { useAutoCompleteContext } from './auto-complete-context';
+import Ellipsis from '../shared/ellipsis';
+import useScale from '../use-scale';
+import useClasses from '../use-classes';
+
+// interface Props 
+
+var AutoCompleteItemComponent = function AutoCompleteItemComponent(_ref) {
+  var identValue = _ref.value,
+    children = _ref.children,
+    isLabelOnly = _ref.isLabelOnly;
+  var theme = useTheme();
+  var _useScale = useScale(),
+    SCALES = _useScale.SCALES;
+  var _useAutoCompleteConte = useAutoCompleteContext(),
+    value = _useAutoCompleteConte.value,
+    updateValue = _useAutoCompleteConte.updateValue,
+    updateVisible = _useAutoCompleteConte.updateVisible;
+  var selectHandler = function selectHandler() {
+    updateValue && updateValue(identValue);
+    updateVisible && updateVisible(false);
+  };
+  var isActive = useMemo(function () {
+    return value === identValue;
+  }, [identValue, value]);
+  var classes = useClasses('item', {
+    active: isActive
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    onClick: selectHandler,
+    className: _JSXStyle.dynamic([["2003094915", [theme.palette.background, theme.palette.foreground, SCALES.font(0.875), SCALES.width(1, 'auto'), isLabelOnly ? SCALES.height(2.5) : SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0.75), SCALES.pb(0), SCALES.pl(0.75), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.layout.radius, theme.layout.radius, theme.layout.radius, theme.layout.radius, theme.palette.accents_1, theme.palette.accents_1, theme.palette.success]]]) + " " + (classes || "")
+  }, isLabelOnly ? /*#__PURE__*/React.createElement(Ellipsis, {
+    height: SCALES.height(2)
+  }, children) : children, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "2003094915",
+    dynamic: [theme.palette.background, theme.palette.foreground, SCALES.font(0.875), SCALES.width(1, 'auto'), isLabelOnly ? SCALES.height(2.5) : SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0.75), SCALES.pb(0), SCALES.pl(0.75), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.layout.radius, theme.layout.radius, theme.layout.radius, theme.layout.radius, theme.palette.accents_1, theme.palette.accents_1, theme.palette.success]
+  }, ".item.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-weight:normal;white-space:pre;background-color:".concat(theme.palette.background, ";color:").concat(theme.palette.foreground, ";-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:0;cursor:pointer;-webkit-transition:background 0.2s ease 0s,border-color 0.2s ease 0s;transition:background 0.2s ease 0s,border-color 0.2s ease 0s;font-size:").concat(SCALES.font(0.875), ";width:").concat(SCALES.width(1, 'auto'), ";height:").concat(isLabelOnly ? SCALES.height(2.5) : SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0.75), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0.75), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.item.__jsx-style-dynamic-selector:first-of-type{border-top-left-radius:").concat(theme.layout.radius, ";border-top-right-radius:").concat(theme.layout.radius, ";}.item.__jsx-style-dynamic-selector:last-of-type{border-bottom-left-radius:").concat(theme.layout.radius, ";border-bottom-right-radius:").concat(theme.layout.radius, ";}.item.__jsx-style-dynamic-selector:hover{background-color:").concat(theme.palette.accents_1, ";}.item.active.__jsx-style-dynamic-selector{background-color:").concat(theme.palette.accents_1, ";color:").concat(theme.palette.success, ";}")));
+};
+AutoCompleteItemComponent.displayName = 'AutoCompleteItem';
+// const AutoCompleteItem = withScale(AutoCompleteItemComponent)
+export default AutoCompleteItemComponent;

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

@@ -0,0 +1,38 @@
+import React from 'react';
+export type AutoCompleteSearchProps = React.HTMLAttributes<any>;
+declare const AutoCompleteSearch: React.ForwardRefExoticComponent<AutoCompleteSearchProps & {
+    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 AutoCompleteSearch;

package/esm/auto-complete/auto-complete-searching.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';
+
+// interface Props {
+//   className?: string
+// }
+
+var AutoCompleteSearchComponent = function AutoCompleteSearchComponent(_ref) {
+  var children = _ref.children,
+    className = _ref.className;
+  var theme = useTheme();
+  var _useScale = useScale(),
+    SCALES = _useScale.SCALES;
+  return /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["2266351824", [theme.layout.gapHalf, theme.palette.background, theme.palette.accents_5, theme.layout.radius, SCALES.font(0.875), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0.875), SCALES.pr(0.875), SCALES.pb(0.875), SCALES.pl(0.875), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]]) + " " + (className || "")
+  }, children, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "2266351824",
+    dynamic: [theme.layout.gapHalf, theme.palette.background, theme.palette.accents_5, theme.layout.radius, SCALES.font(0.875), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0.875), SCALES.pr(0.875), SCALES.pb(0.875), SCALES.pl(0.875), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]
+  }, "div.__jsx-style-dynamic-selector{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;text-align:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-weight:normal;white-space:pre;padding:".concat(theme.layout.gapHalf, ";line-height:1;background-color:").concat(theme.palette.background, ";color:").concat(theme.palette.accents_5, ";-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:0;border-radius:").concat(theme.layout.radius, ";font-size:").concat(SCALES.font(0.875), ";width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0.875), " ").concat(SCALES.pr(0.875), " ").concat(SCALES.pb(0.875), " ").concat(SCALES.pl(0.875), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}")));
+};
+AutoCompleteSearchComponent.displayName = 'AutoCompleteSearch';
+var AutoCompleteSearch = withScale(AutoCompleteSearchComponent);
+export default AutoCompleteSearch;

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

@@ -0,0 +1,32 @@
+import React, { CSSProperties, ReactElement } from 'react';
+import AutoCompleteItem, { AutoCompleteItemProps } from "./auto-complete-item";
+import { NormalTypes } from "../utils/prop-types";
+export type AutoCompleteTypes = NormalTypes;
+export type AutoCompleteOption = {
+    label: string;
+    value: string;
+};
+export type AutoCompleteOptions = Array<typeof AutoCompleteItem | AutoCompleteOption | React.ReactElement<AutoCompleteItemProps>>;
+interface Props {
+    options?: AutoCompleteOptions;
+    type?: AutoCompleteTypes;
+    initialValue?: string;
+    value?: string;
+    onChange?: (value: string) => void;
+    onSearch?: (value: string) => void;
+    onSelect?: (value: string) => void;
+    searching?: boolean | undefined;
+    clearable?: boolean;
+    dropdownClassName?: string;
+    dropdownStyle?: CSSProperties;
+    disableMatchWidth?: boolean;
+    disableFreeSolo?: boolean;
+    className?: string;
+    getPopupContainer?: () => HTMLElement | null;
+}
+type NativeAttrs = Omit<React.InputHTMLAttributes<any>, keyof Props>;
+export type AutoCompleteProps = Props & NativeAttrs & ReactElement;
+declare const AutoCompleteComponent: React.ForwardRefExoticComponent<Props & NativeAttrs & React.ReactElement<any, string | React.JSXElementConstructor<any>> & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLInputElement>>;
+export default AutoCompleteComponent;