@helpdice/ui 1.0.1 → 1.0.2

package/esm/image/image.js

@@ -0,0 +1,82 @@
+"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 = ["src", "disableSkeleton", "className", "maxDelay"];
+import _JSXStyle from "../styled-jsx.es.js";
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import useTheme from '../use-theme';
+import ImageSkeleton from './image.skeleton';
+import { transformDataSource } from './helpers';
+import useScale, { withScale } from '../use-scale';
+import useClasses from '../use-classes';
+var ImageComponent = function ImageComponent(_ref) {
+  var src = _ref.src,
+    _ref$disableSkeleton = _ref.disableSkeleton,
+    disableSkeleton = _ref$disableSkeleton === void 0 ? false : _ref$disableSkeleton,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    _ref$maxDelay = _ref.maxDelay,
+    maxDelay = _ref$maxDelay === void 0 ? 3000 : _ref$maxDelay,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _useScale = useScale(),
+    SCALES = _useScale.SCALES,
+    getScaleProps = _useScale.getScaleProps;
+  var width = getScaleProps(['width', 'w']);
+  var height = getScaleProps(['height', 'h']);
+  var showAnimation = !disableSkeleton && width && height;
+  var theme = useTheme();
+  var _useState = useState(true),
+    _useState2 = _slicedToArray(_useState, 2),
+    loading = _useState2[0],
+    setLoading = _useState2[1];
+  var _useState3 = useState(true),
+    _useState4 = _slicedToArray(_useState3, 2),
+    showSkeleton = _useState4[0],
+    setShowSkeleton = _useState4[1];
+  var imageRef = useRef(null);
+  var url = useMemo(function () {
+    return transformDataSource(src);
+  }, [src]);
+  var imageLoaded = function imageLoaded() {
+    if (!showAnimation) return;
+    setLoading(false);
+  };
+  useEffect(function () {
+    if (!showAnimation) return;
+    if (!imageRef.current) return;
+    if (imageRef.current.complete) {
+      setLoading(false);
+      setShowSkeleton(false);
+    }
+  });
+  useEffect(function () {
+    var timer = setTimeout(function () {
+      if (showAnimation) {
+        setShowSkeleton(false);
+      }
+      clearTimeout(timer);
+    }, maxDelay);
+    return function () {
+      return clearTimeout(timer);
+    };
+  }, [loading]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["4175752462", [theme.layout.radius, SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.mt(0), SCALES.mr(0, 'auto'), SCALES.mb(0), SCALES.ml(0, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.width(1, 'auto'), SCALES.height(1, 'auto')]]]) + " " + (useClasses('image', className) || "")
+  }, showSkeleton && showAnimation && /*#__PURE__*/React.createElement(ImageSkeleton, {
+    opacity: loading ? 0.5 : 0
+  }), /*#__PURE__*/React.createElement("img", _extends({
+    ref: imageRef,
+    onLoad: imageLoaded,
+    src: url
+  }, props, {
+    className: _JSXStyle.dynamic([["4175752462", [theme.layout.radius, SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.mt(0), SCALES.mr(0, 'auto'), SCALES.mb(0), SCALES.ml(0, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.width(1, 'auto'), SCALES.height(1, 'auto')]]]) + " " + (props && props.className != null && props.className || "")
+  })), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "4175752462",
+    dynamic: [theme.layout.radius, SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.mt(0), SCALES.mr(0, 'auto'), SCALES.mb(0), SCALES.ml(0, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.width(1, 'auto'), SCALES.height(1, 'auto')]
+  }, ".image.__jsx-style-dynamic-selector{position:relative;border-radius:".concat(theme.layout.radius, ";overflow:hidden;max-width:100%;width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0, 'auto'), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0, 'auto'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";}img.__jsx-style-dynamic-selector{width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";object-fit:scale-down;display:inline-block;}")));
+};
+ImageComponent.displayName = 'Image';
+var Image = withScale(ImageComponent);
+export default Image;

package/esm/image/image.skeleton.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface Props {
+    opacity?: number;
+}
+export type ImageSkeletonProps = Props;
+declare const ImageSkeleton: React.FC<ImageSkeletonProps>;
+export default ImageSkeleton;

package/esm/image/image.skeleton.js

@@ -0,0 +1,20 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["opacity"];
+import _JSXStyle from "../styled-jsx.es.js";
+import React from 'react';
+import useTheme from '../use-theme';
+var ImageSkeleton = /*#__PURE__*/React.memo(function (_ref) {
+  var _ref$opacity = _ref.opacity,
+    opacity = _ref$opacity === void 0 ? 0.5 : _ref$opacity,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var theme = useTheme();
+  return /*#__PURE__*/React.createElement("div", _extends({}, props, {
+    className: _JSXStyle.dynamic([["2946022605", [theme.palette.accents_1, theme.palette.accents_2, theme.palette.accents_2, theme.palette.accents_1, opacity]]]) + " " + (props && props.className != null && props.className || "skeleton")
+  }), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "2946022605",
+    dynamic: [theme.palette.accents_1, theme.palette.accents_2, theme.palette.accents_2, theme.palette.accents_1, opacity]
+  }, ".skeleton.__jsx-style-dynamic-selector{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;background-image:linear-gradient( 270deg, ".concat(theme.palette.accents_1, ", ").concat(theme.palette.accents_2, ", ").concat(theme.palette.accents_2, ", ").concat(theme.palette.accents_1, " );background-size:400% 100%;-webkit-animation:loading-__jsx-style-dynamic-selector 3s ease-in-out infinite;animation:loading-__jsx-style-dynamic-selector 3s ease-in-out infinite;opacity:").concat(opacity, ";-webkit-transition:opacity 300ms ease-out;transition:opacity 300ms ease-out;}@-webkit-keyframes loading-__jsx-style-dynamic-selector{0%{background-position:200% 0;}to{background-position:-200% 0;}}@keyframes loading-__jsx-style-dynamic-selector{0%{background-position:200% 0;}to{background-position:-200% 0;}}")));
+});
+ImageSkeleton.displayName = 'ImageSkeleton';
+export default ImageSkeleton;

package/esm/image/index.d.ts

@@ -0,0 +1,9 @@
+import Image from "./image";
+import ImageBrowser from "./image-browser";
+export type ImageComponentType = typeof Image & {
+    Browser: typeof ImageBrowser;
+};
+export type { ImageProps } from "./image";
+export type { ImageBrowserProps, ImageAnchorProps } from "./image-browser";
+declare const _default: ImageComponentType;
+export default _default;

package/esm/image/index.js

@@ -0,0 +1,4 @@
+import Image from './image';
+import ImageBrowser from './image-browser';
+Image.Browser = ImageBrowser;
+export default Image;

package/esm/image/styles.d.ts

@@ -0,0 +1,9 @@
+import { HUIThemesPalette } from "../themes/presets";
+export type BrowserColors = {
+    color: string;
+    barBgColor: string;
+    inputBgColor: string;
+    borderColor: string;
+    titleColor: string;
+};
+export declare const getBrowserColors: (invert: boolean, palette: HUIThemesPalette) => BrowserColors;

package/esm/image/styles.js

@@ -0,0 +1,15 @@
+export var getBrowserColors = function getBrowserColors(invert, palette) {
+  return invert ? {
+    color: palette.background,
+    barBgColor: palette.foreground,
+    inputBgColor: palette.accents_8,
+    borderColor: palette.accents_7,
+    titleColor: palette.accents_2
+  } : {
+    color: palette.foreground,
+    barBgColor: palette.background,
+    inputBgColor: palette.accents_1,
+    borderColor: palette.border,
+    titleColor: palette.accents_5
+  };
+};

package/esm/index.d.ts

@@ -0,0 +1,130 @@
+export { default as AutoComplete } from "./auto-complete";
+export type { AutoCompleteProps } from "./auto-complete";
+export { default as Avatar } from "./avatar";
+export type { AvatarProps, AvatarGroupProps } from "./avatar";
+export { default as Badge } from "./badge";
+export type { BadgeProps, BadgeAnchorProps } from "./badge";
+export { default as Breadcrumbs } from "./breadcrumbs";
+export type { BreadcrumbsProps, BreadcrumbsItemProps, BreadcrumbsSeparatorProps, } from "./breadcrumbs";
+export { default as Button } from "./button";
+export type { ButtonProps } from "./button";
+export { default as ButtonDropdown } from "./button-dropdown";
+export type { ButtonDropdownProps, ButtonDropdownItemProps } from "./button-dropdown";
+export { default as ButtonGroup } from "./button-group";
+export type { ButtonGroupProps } from "./button-group";
+export { default as Capacity } from "./capacity";
+export type { CapacityProps } from "./capacity";
+export { default as Card } from "./card";
+export type { CardProps, CardContentProps, CardFooterProps } from "./card";
+export { default as Checkbox } from "./checkbox";
+export type { CheckboxProps, CheckboxGroupProps } from "./checkbox";
+export { default as Code } from "./code";
+export type { CodeProps } from "./code";
+export { default as Collapse } from "./collapse";
+export type { CollapseProps, CollapseGroupProps } from "./collapse";
+export { default as Description } from "./description";
+export type { DescriptionProps } from "./description";
+export { default as Display } from "./display";
+export type { DisplayProps } from "./display";
+export { default as Divider } from "./divider";
+export type { DividerProps } from "./divider";
+export { default as Dot } from "./dot";
+export type { DotProps } from "./dot";
+export { default as Drawer } from "./drawer";
+export type { DrawerProps } from "./drawer";
+export { default as Fieldset } from "./fieldset";
+export type { FieldsetProps, FieldsetTitleProps, FieldsetSubtitleProps, FieldsetGroupProps, FieldsetFooterProps, FieldsetContentProps, } from "./fieldset";
+export * from "./form";
+export { default as UiProvider } from "./ui-provider";
+export type { UiProviderProps } from "./ui-provider";
+export { default as Grid } from "./grid";
+export { default as Container } from "./grid/grid-container";
+export type { GridProps, GridContainerProps } from "./grid";
+export { default as Image } from "./image";
+export type { ImageProps, ImageBrowserProps } from "./image";
+export { default as Input } from "./input";
+export type { InputProps, InputPasswordProps } from "./input";
+export { default as Keyboard } from "./keyboard";
+export type { KeyboardProps } from "./keyboard";
+export { default as Link } from "./link";
+export type { LinkProps } from "./link";
+export { default as Loading } from "./loading";
+export type { LoadingProps } from "./loading";
+export { default as Modal } from "./modal";
+export type { ModalProps, ModalTitleProps, ModalSubtitleProps, ModalContentProps, ModalActionProps, } from "./modal";
+export { default as Note } from "./note";
+export type { NoteProps } from "./note";
+export { default as Page } from "./page";
+export type { PageProps, PageHeaderProps, PageContentProps, PageFooterProps, } from "./page";
+export { default as Pagination } from "./pagination";
+export type { PaginationProps, PaginationNextProps, PaginationPreviousProps, } from "./pagination";
+export { default as Popover } from "./popover";
+export type { PopoverProps, PopoverItemProps } from "./popover";
+export { default as Progress } from "./progress";
+export type { ProgressProps } from "./progress";
+export { default as Radio } from "./radio";
+export type { RadioProps, RadioGroupProps, RadioDescriptionProps } from "./radio";
+export { default as Rating } from "./rating";
+export type { RatingProps } from "./rating";
+export { default as Select } from "./select";
+export type { SelectProps, SelectOptionProps } from "./select";
+export { default as Slider } from "./slider";
+export type { SliderProps } from "./slider";
+export { default as Snippet } from "./snippet";
+export type { SnippetProps } from "./snippet";
+export { default as Spacer } from "./spacer";
+export type { SpacerProps } from "./spacer";
+export { default as Spinner } from "./spinner";
+export type { SpinnerProps } from "./spinner";
+export { default as Table } from "./table";
+export type { TableProps, TableColumnProps } from "./table";
+export { default as Tabs } from "./tabs";
+export type { TabsProps } from "./tabs";
+export { default as Tag } from "./tag";
+export type { TagProps } from "./tag";
+export { default as Text } from "./text";
+export type { TextProps } from "./text";
+export { default as Textarea } from "./textarea";
+export type { TextareaProps } from "./textarea";
+export { default as Themes } from "./themes";
+export type { HUIThemes, HUserTheme } from "./themes";
+export { default as Toggle } from "./toggle";
+export type { ToggleProps } from "./toggle";
+export { default as Tooltip } from "./tooltip";
+export type { TooltipProps } from "./tooltip";
+export { default as Tree } from "./tree";
+export type { TreeProps } from "./tree";
+export { default as useAllThemes } from "./use-all-themes";
+export type { AllThemesConfig } from "./use-all-themes";
+export { default as useToasts } from "./use-toasts";
+export type { Toast, ToastInput, ToastAction, ToastLayout } from "./use-toasts";
+export { default as User } from "./user";
+export type { UserProps } from "./user";
+export { default as useBodyScroll } from "./use-body-scroll";
+export type { BodyScrollOptions } from "./use-body-scroll";
+export { default as useClipboard } from "./use-clipboard";
+export type { UseClipboardOptions } from "./use-clipboard";
+export { default as useMediaQuery } from "./use-media-query";
+export type { ResponsiveOptions, ResponsiveBreakpoint } from "./use-media-query";
+export { default as useKeyboard, KeyMod, KeyCode } from "./use-keyboard";
+export type { KeyboardOptions, UseKeyboardHandler } from "./use-keyboard";
+export { default as useInput } from "./use-input";
+export { default as useModal } from "./use-modal";
+export { default as useTabs } from "./use-tabs";
+export { default as useClickAway } from "./use-click-away";
+export { default as useCurrentState } from "./use-current-state";
+export { default as CssBaseline } from "./css-baseline";
+export { default as useTheme } from "./use-theme";
+export { default as useClasses } from "./use-classes";
+export { default as useScale } from "./use-scale";
+export { withScale, ScalePropKeys, ScaleContext } from "./use-scale";
+export type { ScaleProps, ScaleConfig, GetScalePropsFunction, GetAllScalePropsFunction, } from "./use-scale";
+export { useRect } from "./utils/layouts";
+export type { ReactiveDomReact } from "./utils/layouts";
+export { default as Highlight } from "./shared/highlight";
+export type { HighlightProps } from "./shared/highlight";
+export { default as CodeBlock } from "./code-block";
+export { default as Skeleton } from "./skeleton";
+export { CartProvider, useCart, createCartIdentifier } from "./cart";
+export type { CartProviderState } from "./cart";
+export * from "./login-with";

package/esm/index.js

@@ -0,0 +1,78 @@
+// @ts-ignore
+/// <reference types="styled-jsx" />
+
+export { default as AutoComplete } from './auto-complete';
+export { default as Avatar } from './avatar';
+export { default as Badge } from './badge';
+export { default as Breadcrumbs } from './breadcrumbs';
+export { default as Button } from './button';
+export { default as ButtonDropdown } from './button-dropdown';
+export { default as ButtonGroup } from './button-group';
+export { default as Capacity } from './capacity';
+export { default as Card } from './card';
+export { default as Checkbox } from './checkbox';
+export { default as Code } from './code';
+export { default as Collapse } from './collapse';
+export { default as Description } from './description';
+export { default as Display } from './display';
+export { default as Divider } from './divider';
+export { default as Dot } from './dot';
+export { default as Drawer } from './drawer';
+export { default as Fieldset } from './fieldset';
+export * from './form';
+export { default as UiProvider } from './ui-provider';
+export { default as Grid } from './grid';
+export { default as Container } from './grid/grid-container';
+export { default as Image } from './image';
+export { default as Input } from './input';
+export { default as Keyboard } from './keyboard';
+export { default as Link } from './link';
+export { default as Loading } from './loading';
+export { default as Modal } from './modal';
+export { default as Note } from './note';
+export { default as Page } from './page';
+export { default as Pagination } from './pagination';
+export { default as Popover } from './popover';
+export { default as Progress } from './progress';
+export { default as Radio } from './radio';
+export { default as Rating } from './rating';
+export { default as Select } from './select';
+export { default as Slider } from './slider';
+export { default as Snippet } from './snippet';
+export { default as Spacer } from './spacer';
+export { default as Spinner } from './spinner';
+export { default as Table } from './table';
+export { default as Tabs } from './tabs';
+export { default as Tag } from './tag';
+export { default as Text } from './text';
+export { default as Textarea } from './textarea';
+export { default as Themes } from './themes';
+export { default as Toggle } from './toggle';
+export { default as Tooltip } from './tooltip';
+export { default as Tree } from './tree';
+export { default as useAllThemes } from './use-all-themes';
+export { default as useToasts } from './use-toasts';
+export { default as User } from './user';
+export { default as useBodyScroll } from './use-body-scroll';
+export { default as useClipboard } from './use-clipboard';
+export { default as useMediaQuery } from './use-media-query';
+export { default as useKeyboard, KeyMod, KeyCode } from './use-keyboard';
+export { default as useInput } from './use-input';
+export { default as useModal } from './use-modal';
+export { default as useTabs } from './use-tabs';
+export { default as useClickAway } from './use-click-away';
+export { default as useCurrentState } from './use-current-state';
+export { default as CssBaseline } from './css-baseline';
+export { default as useTheme } from './use-theme';
+export { default as useClasses } from './use-classes';
+export { default as useScale } from './use-scale';
+export { withScale, ScalePropKeys, ScaleContext } from './use-scale';
+export { useRect } from './utils/layouts';
+export { default as Highlight } from './shared/highlight';
+export { default as CodeBlock } from './code-block';
+export { default as Skeleton } from './skeleton';
+
+// Cart 
+export { CartProvider, useCart, createCartIdentifier } from './cart';
+// Social Logins
+export * from './login-with';

package/esm/input/index.d.ts

@@ -0,0 +1,13 @@
+import Input from "./input";
+import Textarea from "../textarea";
+import InputPassword from "./password";
+export type InputComponentType = typeof Input & {
+    Textarea: typeof Textarea;
+    Password: typeof InputPassword;
+};
+export type { InputProps } from "./input";
+export type { InputTypes } from "./input-props";
+export type { InputPasswordProps } from "./password";
+export type { TextareaProps } from "../textarea/textarea";
+declare const _default: InputComponentType;
+export default _default;

package/esm/input/index.js

@@ -0,0 +1,8 @@
+"use client";
+
+import Input from './input';
+import Textarea from '../textarea';
+import InputPassword from './password';
+Input.Textarea = Textarea;
+Input.Password = InputPassword;
+export default Input;

package/esm/input/input-block-label.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export interface InputBlockLabelLabel {
+}
+declare const InputBlockLabel: React.NamedExoticComponent<React.PropsWithChildren<InputBlockLabelLabel>>;
+export default InputBlockLabel;

package/esm/input/input-block-label.js

@@ -0,0 +1,16 @@
+import _JSXStyle from "../styled-jsx.es.js";
+import React from 'react';
+import useTheme from '../use-theme';
+var InputBlockLabelComponent = function InputBlockLabelComponent(_ref) {
+  var children = _ref.children;
+  var theme = useTheme();
+  return /*#__PURE__*/React.createElement("label", {
+    className: _JSXStyle.dynamic([["1278828862", [theme.palette.accents_6]]])
+  }, children, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "1278828862",
+    dynamic: [theme.palette.accents_6]
+  }, "label.__jsx-style-dynamic-selector{display:block;font-weight:normal;color:".concat(theme.palette.accents_6, ";padding:0 0 0 1px;margin-bottom:0.5em;font-size:1em;line-height:1.5;}label.__jsx-style-dynamic-selector>*:first-child{margin-top:0;}label.__jsx-style-dynamic-selector>*:last-child{margin-bottom:0;}")));
+};
+InputBlockLabelComponent.displayName = 'GeistInputBlockLabel';
+var InputBlockLabel = /*#__PURE__*/React.memo(InputBlockLabelComponent);
+export default InputBlockLabel;

package/esm/input/input-icon-clear.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface Props {
+    visible: boolean;
+    onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
+    disabled?: boolean;
+}
+declare const MemoInputIconClear: React.NamedExoticComponent<Props>;
+export default MemoInputIconClear;

package/esm/input/input-icon-clear.js

@@ -0,0 +1,43 @@
+import _JSXStyle from "../styled-jsx.es.js";
+import React from 'react';
+import useTheme from '../use-theme';
+import useClasses from '../use-classes';
+var InputIconClear = function InputIconClear(_ref) {
+  var onClick = _ref.onClick,
+    disabled = _ref.disabled,
+    visible = _ref.visible;
+  var theme = useTheme();
+  var classes = useClasses('clear-icon', {
+    visible: visible
+  });
+  var clickHandler = function clickHandler(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    event.nativeEvent.stopImmediatePropagation();
+    onClick && onClick(event);
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    onClick: clickHandler,
+    className: _JSXStyle.dynamic([["1567030211", [disabled ? 'not-allowed' : 'pointer', theme.palette.accents_3, disabled ? theme.palette.accents_3 : theme.palette.foreground]]]) + " " + (classes || "")
+  }, /*#__PURE__*/React.createElement("svg", {
+    viewBox: "0 0 24 24",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    fill: "none",
+    shapeRendering: "geometricPrecision",
+    className: _JSXStyle.dynamic([["1567030211", [disabled ? 'not-allowed' : 'pointer', theme.palette.accents_3, disabled ? theme.palette.accents_3 : theme.palette.foreground]]])
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M18 6L6 18",
+    className: _JSXStyle.dynamic([["1567030211", [disabled ? 'not-allowed' : 'pointer', theme.palette.accents_3, disabled ? theme.palette.accents_3 : theme.palette.foreground]]])
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M6 6l12 12",
+    className: _JSXStyle.dynamic([["1567030211", [disabled ? 'not-allowed' : 'pointer', theme.palette.accents_3, disabled ? theme.palette.accents_3 : theme.palette.foreground]]])
+  })), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "1567030211",
+    dynamic: [disabled ? 'not-allowed' : 'pointer', theme.palette.accents_3, disabled ? theme.palette.accents_3 : theme.palette.foreground]
+  }, ".clear-icon.__jsx-style-dynamic-selector{box-sizing:border-box;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;width:calc(var(--input-height) - 2px);-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;height:100%;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;cursor:".concat(disabled ? 'not-allowed' : 'pointer', ";-webkit-transition:color 150ms ease 0s;transition:color 150ms ease 0s;margin:0;padding:0;color:").concat(theme.palette.accents_3, ";visibility:hidden;opacity:0;}.visible.__jsx-style-dynamic-selector{visibility:visible;opacity:1;}.clear-icon.__jsx-style-dynamic-selector:hover{color:").concat(disabled ? theme.palette.accents_3 : theme.palette.foreground, ";}svg.__jsx-style-dynamic-selector{color:currentColor;width:calc(var(--input-height) - 2px);height:calc(var(--input-height) - 2px);-webkit-transform:scale(0.44);-ms-transform:scale(0.44);transform:scale(0.44);}")));
+};
+var MemoInputIconClear = /*#__PURE__*/React.memo(InputIconClear);
+export default MemoInputIconClear;

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

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface InputIconProps {
+    icon: React.ReactNode;
+    clickable?: boolean;
+    onClick: (e: React.MouseEvent<HTMLDivElement>) => void;
+}
+declare const InputIcon: React.NamedExoticComponent<InputIconProps>;
+export default InputIcon;

package/esm/input/input-icon.js

@@ -0,0 +1,18 @@
+import _JSXStyle from "../styled-jsx.es.js";
+import React from 'react';
+var InputIconComponent = function InputIconComponent(_ref) {
+  var icon = _ref.icon,
+    _ref$clickable = _ref.clickable,
+    clickable = _ref$clickable === void 0 ? false : _ref$clickable,
+    onClick = _ref.onClick;
+  return /*#__PURE__*/React.createElement("span", {
+    onClick: onClick,
+    className: _JSXStyle.dynamic([["4247656379", [clickable ? 'pointer' : 'default', clickable ? 'auto' : 'none']]]) + " " + "input-icon"
+  }, icon, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "4247656379",
+    dynamic: [clickable ? 'pointer' : 'default', clickable ? 'auto' : 'none']
+  }, ".input-icon.__jsx-style-dynamic-selector{box-sizing:border-box;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;width:calc(var(--input-height) - 2px);-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;height:100%;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;margin:0;padding:0;line-height:1;position:relative;cursor:".concat(clickable ? 'pointer' : 'default', ";pointer-events:").concat(clickable ? 'auto' : 'none', ";}.input-icon.__jsx-style-dynamic-selector svg{width:calc(var(--input-height) - 2px);height:calc(var(--input-height) - 2px);-webkit-transform:scale(0.44);-ms-transform:scale(0.44);transform:scale(0.44);}")));
+};
+InputIconComponent.displayName = 'GeistInputIcon';
+var InputIcon = /*#__PURE__*/React.memo(InputIconComponent);
+export default InputIcon;

package/esm/input/input-label.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface InputLabel {
+    isRight?: boolean;
+}
+declare const MemoInputLabel: React.NamedExoticComponent<React.PropsWithChildren<InputLabel>>;
+export default MemoInputLabel;

package/esm/input/input-label.js

@@ -0,0 +1,16 @@
+import _JSXStyle from "../styled-jsx.es.js";
+import React from 'react';
+import useTheme from '../use-theme';
+var InputLabel = function InputLabel(_ref) {
+  var children = _ref.children,
+    isRight = _ref.isRight;
+  var theme = useTheme();
+  return /*#__PURE__*/React.createElement("span", {
+    className: _JSXStyle.dynamic([["3089782703", [theme.layout.gapHalf, theme.palette.accents_4, theme.palette.accents_1, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border]]]) + " " + ((isRight ? 'right' : '') || "")
+  }, children, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "3089782703",
+    dynamic: [theme.layout.gapHalf, theme.palette.accents_4, theme.palette.accents_1, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border]
+  }, "span.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;width:initial;height:100%;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;pointer-events:none;margin:0;padding:0 ".concat(theme.layout.gapHalf, ";color:").concat(theme.palette.accents_4, ";background-color:").concat(theme.palette.accents_1, ";border-top-left-radius:").concat(theme.layout.radius, ";border-bottom-left-radius:").concat(theme.layout.radius, ";border-top:1px solid ").concat(theme.palette.border, ";border-left:1px solid ").concat(theme.palette.border, ";border-bottom:1px solid ").concat(theme.palette.border, ";font-size:inherit;line-height:1;}span.right.__jsx-style-dynamic-selector{border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:").concat(theme.layout.radius, ";border-bottom-right-radius:").concat(theme.layout.radius, ";border-left:0;border-right:1px solid ").concat(theme.palette.border, ";}")));
+};
+var MemoInputLabel = /*#__PURE__*/React.memo(InputLabel);
+export default MemoInputLabel;

package/esm/input/input-props.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+import { NormalTypes } from "../utils/prop-types";
+export type InputTypes = NormalTypes;
+export interface Props {
+    initialValue?: string;
+    placeholder?: string;
+    type?: InputTypes;
+    htmlType?: string;
+    readOnly?: boolean;
+    disabled?: boolean;
+    label?: string;
+    labelRight?: string;
+    error?: string;
+    fullWidth?: boolean;
+    icon?: React.ReactNode;
+    iconRight?: React.ReactNode;
+    iconClickable?: boolean;
+    className?: string;
+    clearable?: boolean;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    onClearClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+    onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;
+    onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
+    onIconClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+    autoComplete?: string;
+    crossOrigin?: any;
+    onPointerEnterCapture?: any;
+    onPointerLeaveCapture?: any;
+}

package/esm/input/input-props.js

@@ -0,0 +1 @@
+export {};

package/esm/input/input.d.ts

@@ -0,0 +1,38 @@
+import React from 'react';
+import { Props } from "./input-props";
+type NativeAttrs = Omit<React.InputHTMLAttributes<any>, keyof Props>;
+export type InputProps = Props & NativeAttrs;
+declare const Input: React.ForwardRefExoticComponent<Pick<Props & NativeAttrs & React.RefAttributes<HTMLInputElement> & {
+    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" | "error" | "min" | "max" | "children" | "form" | "label" | "slot" | "style" | "title" | "pattern" | "className" | "icon" | "onClick" | "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" | "initialValue" | "htmlType" | "labelRight" | "fullWidth" | "iconRight" | "iconClickable" | "clearable" | "onClearClick" | "onIconClick" | "key"> & React.RefAttributes<unknown>>;
+export default Input;