@fibery/ui-kit 1.34.8 → 1.36.0

package/src/link-input/components/AntTextAreaWithCustomReadState.js

@@ -0,0 +1,64 @@
+import {useCallback, useRef, useState} from "react";
+import {AntTextArea} from "../../antd";
+import {css} from "@linaria/core";
+
+const wrapperStyle = css`
+  ${{
+    // Trying to match Ant's input text position
+    position: "absolute",
+    left: "12px",
+    right: "13px",
+    top: "8px",
+    bottom: "9px",
+    overflow: "hidden",
+    wordBreak: "break-word",
+  }}
+`;
+
+const inputStyle = css`
+  position: relative;
+`;
+
+export const AntTextAreaWithCustomReadState = ({value, onBlur, onFocus, style = {}, renderReadState, ...rest}) => {
+  const [focus, setFocus] = useState(false);
+  const input = useRef(null);
+
+  const handleFocus = useCallback(
+    (e) => {
+      setFocus(true);
+      onFocus && onFocus(e);
+    },
+    [onFocus]
+  );
+
+  const handleBlur = useCallback(
+    (e) => {
+      setFocus(false);
+      onBlur && onBlur(e);
+    },
+    [onBlur]
+  );
+
+  const handleWrapperClick = useCallback(() => {
+    input.current.focus();
+  }, [input]);
+
+  return (
+    <div className={inputStyle}>
+      <AntTextArea
+        autoSize={{minRows: 1, maxRows: 10}}
+        {...rest}
+        bypassedRef={input}
+        onFocus={handleFocus}
+        onBlur={handleBlur}
+        value={value}
+        style={{...style, color: !focus && "transparent"}}
+      />
+      {!focus && (
+        <div className={wrapperStyle} onClick={handleWrapperClick}>
+          {renderReadState()}
+        </div>
+      )}
+    </div>
+  );
+};

package/src/link-input/index.js

@@ -0,0 +1,89 @@
+import {css} from "@linaria/core";
+import {useCallback} from "react";
+import {AntTextAreaWithCustomReadState} from "./components/AntTextAreaWithCustomReadState";
+import {getURL} from "./utils";
+
+const urlLinkClassname = css`
+  word-break: break-word;
+  margin-right: 20px;
+`;
+
+export const UrlInputLink = ({value, children, ...rest}) => {
+  const normalizedUrl = getURL(value);
+  if (!normalizedUrl) {
+    return null;
+  }
+  return (
+    <a
+      draggable={false}
+      target="_blank"
+      className={urlLinkClassname}
+      rel="noopener noreferrer nofollow"
+      href={normalizedUrl}
+      {...rest}
+    >
+      {children}
+    </a>
+  );
+};
+
+export const UrlInput = (props) => {
+  const handleClick = useCallback((e) => e.stopPropagation(), []);
+
+  return (
+    <AntTextAreaWithCustomReadState
+      {...props}
+      renderReadState={() => (
+        <UrlInputLink value={props.value} onClick={handleClick}>
+          {props.value}
+        </UrlInputLink>
+      )}
+    />
+  );
+};
+
+export const PhoneInputLink = ({value, children, ...rest}) => {
+  return (
+    <a draggable={false} href={`tel:${value}`} {...rest}>
+      {children}
+    </a>
+  );
+};
+
+export const PhoneInput = (props) => {
+  const handleClick = useCallback((e) => e.stopPropagation(), []);
+
+  return (
+    <AntTextAreaWithCustomReadState
+      {...props}
+      renderReadState={() => (
+        <PhoneInputLink value={props.value} onClick={handleClick}>
+          {props.value}
+        </PhoneInputLink>
+      )}
+    />
+  );
+};
+
+export const EmailInputLink = ({value, children, ...rest}) => {
+  return (
+    <a draggable={false} href={`mailto:${value}`} {...rest}>
+      {children}
+    </a>
+  );
+};
+
+export const EmailInput = (props) => {
+  const handleClick = useCallback((e) => e.stopPropagation(), []);
+
+  return (
+    <AntTextAreaWithCustomReadState
+      {...props}
+      renderReadState={() => (
+        <EmailInputLink value={props.value} onClick={handleClick}>
+          {props.value}
+        </EmailInputLink>
+      )}
+    />
+  );
+};

package/src/link-input/utils.js

@@ -0,0 +1,13 @@
+/**
+ * Infers actual URL from the input's value.
+ * @param value
+ * @returns {null|string} null for invalid URL
+ */
+export const getURL = (value) => {
+  if (!value) {
+    return null;
+  }
+  // Add https if no protocol is given.
+  const [, protocol] = value.match(/^(\w+):/) || [];
+  return protocol ? value : "https://" + value;
+};

package/src/logo.tsx

@@ -0,0 +1,81 @@
+import {css} from "@linaria/core";
+import {FC} from "react";
+import {layout} from "./design-system";
+
+interface LogoProps {
+  size?: number;
+}
+
+export const Logo: FC<LogoProps> = ({size = 40}) => {
+  return (
+    <svg width={size} height={size} viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg" fill="none">
+      <path
+        d="M13.6154 52.6718C12.389 52.6687 11.1866 52.3283 10.1369 51.6871C9.08722 51.0459 8.22981 50.128 7.65652 49.0318C7.08322 47.9356 6.81564 46.7024 6.88243 45.4641C6.94922 44.2259 7.34787 43.0294 8.03568 42.0028L33.1308 4.75593C34.1722 3.34127 35.7137 2.38797 37.4335 2.09504C39.1534 1.80211 40.9186 2.19219 42.3609 3.18384C43.8031 4.17549 44.8108 5.69208 45.1736 7.41703C45.5364 9.14198 45.2263 10.942 44.3081 12.4413L19.2129 49.6881C18.5917 50.6097 17.7567 51.3635 16.781 51.8836C15.8052 52.4038 14.7184 52.6744 13.6154 52.6718Z"
+        fill="url(#paint0_linear_2845_2276)"
+      />
+      <path
+        d="M44.3295 17.0422L51.7048 16.4831C52.0797 16.4548 52.4554 16.4581 52.8281 16.4926C53.2167 16.5272 53.6042 16.596 53.9861 16.6995C55.7192 17.1692 57.1968 18.3158 58.0938 19.8871C58.9909 21.4584 59.2338 23.3256 58.7693 25.078C58.3048 26.8305 57.1709 28.3245 55.617 29.2316L23.4864 47.9779L44.3295 17.0422Z"
+        fill="url(#paint1_linear_2845_2276)"
+      />
+      <path
+        d="M32.0811 60C30.6331 60.0024 29.2224 59.5352 28.0563 58.667C26.8903 57.7987 26.0303 56.5753 25.6028 55.1763L24.1999 50.5716L31.5632 46.2755L37.8433 48.7708L38.5684 51.1438C39.0963 52.8775 38.9219 54.7522 38.0836 56.356C37.2453 57.9598 35.8116 59.1615 34.0975 59.6971C33.444 59.8989 32.7644 60.001 32.0811 60Z"
+        fill="url(#paint2_linear_2845_2276)"
+      />
+      <path
+        d="M49.4289 35.852L34.419 44.6094L46.7804 49.521C47.569 49.8278 48.4078 49.9812 49.2528 49.973C50.8279 49.9722 52.3533 49.411 53.566 48.3946C54.7787 47.3782 55.6026 45.9658 55.8956 44.4009C56.1886 42.836 55.9323 41.2168 55.171 39.8225C54.4096 38.4282 53.191 37.3463 51.7252 36.7633L49.4289 35.852Z"
+        fill="url(#paint3_linear_2845_2276)"
+      />
+      <path
+        d="M20.5155 18.8473L10.7738 33.3061L8.28343 33.4949C8.11353 33.5084 7.94364 33.5129 7.77374 33.5129C6.02147 33.5154 4.33664 32.8302 3.07402 31.6016C1.81141 30.373 1.06954 28.6969 1.00465 26.9263C0.939748 25.1557 1.55688 23.4287 2.7261 22.109C3.89531 20.7893 5.52536 19.9798 7.273 19.8511L20.5155 18.8473Z"
+        fill="url(#paint4_linear_2845_2276)"
+      />
+      <path
+        d="M23.9081 5.45218L27.1559 8.99151L22.208 16.3352L15.8715 16.8295L13.9782 14.7605C12.7575 13.429 12.1098 11.6617 12.1777 9.84741C12.2457 8.03309 13.0236 6.32036 14.3404 5.086C15.6571 3.85164 17.4049 3.19677 19.1992 3.26544C20.9935 3.33411 22.6873 4.12071 23.9081 5.45218Z"
+        fill="url(#paint5_linear_2845_2276)"
+      />
+      <path
+        d="M32.081 59.9018H32.0813C32.7547 59.9028 33.4245 59.8022 34.0686 59.6033C35.7574 59.0755 37.1703 57.8914 37.9966 56.3106C38.823 54.7296 38.9949 52.8816 38.4745 51.1724L32.081 59.9018ZM32.081 59.9018C30.6542 59.9042 29.2641 59.4439 28.115 58.5882M32.081 59.9018L28.115 58.5882M51.6889 36.8545C53.1333 37.4289 54.3344 38.4952 55.0848 39.8695C55.8353 41.2439 56.0879 42.8401 55.7991 44.3828C55.5103 45.9255 54.6981 47.3177 53.503 48.3194C52.3077 49.3212 50.8045 49.8741 49.2527 49.8749L49.2518 49.8749C48.4196 49.8829 47.5933 49.7319 46.8164 49.4297L46.8166 49.4297L46.7804 49.521C47.569 49.8278 48.4078 49.9812 49.2528 49.973C50.8279 49.9722 52.3533 49.411 53.566 48.3946C54.7787 47.3782 55.6026 45.9658 55.8956 44.4009C56.1886 42.836 55.9323 41.2168 55.171 39.8225C54.4096 38.4282 53.191 37.3463 51.7252 36.7633M51.6889 36.8545L51.689 36.8545L51.7252 36.7633M51.6889 36.8545L51.7252 36.7633M51.6889 36.8545L49.4371 35.9608M51.7252 36.7633L49.4289 35.852L49.4783 35.9367L49.4371 35.9608M49.4371 35.9608L34.6426 44.5926M49.4371 35.9608L34.6426 44.5926M34.6426 44.5926L46.816 49.4295L34.6426 44.5926ZM20.3208 18.9605L20.3907 18.8568L7.273 19.8511C5.52536 19.9798 3.89531 20.7893 2.7261 22.109C1.55688 23.4287 0.939748 25.1557 1.00465 26.9263C1.06954 28.6969 1.81141 30.373 3.07402 31.6016C4.33664 32.8302 6.02147 33.5154 7.77374 33.5129L20.4456 18.951L20.3208 18.9605ZM20.3208 18.9605L7.28042 19.949L7.28021 19.949C5.55826 20.0758 3.95193 20.8734 2.79956 22.1741C1.64717 23.4748 1.03875 25.1772 1.10273 26.9227C1.16671 28.6683 1.89807 30.3204 3.14247 31.5312C4.38684 32.7421 6.0471 33.4172 7.77361 33.4148H7.77374C7.94196 33.4148 8.10911 33.4103 8.27562 33.397L8.27601 33.397L10.719 33.2118M20.3208 18.9605L10.719 33.2118M10.719 33.2118L10.6924 33.2512L10.7738 33.3061L10.7664 33.2082L10.719 33.2118ZM28.115 58.5882C26.9658 57.7326 26.1182 56.5268 25.6967 55.1477L28.115 58.5882ZM52.819 16.5904L52.8194 16.5904C53.2023 16.6245 53.5841 16.6923 53.9605 16.7943C55.6681 17.2571 57.1244 18.387 58.0086 19.9358C58.8928 21.4846 59.1324 23.3253 58.6745 25.0529C58.2166 26.7804 57.0988 28.253 55.5675 29.1468L23.8076 47.6769L44.3843 17.1365L51.7122 16.581C52.0816 16.553 52.4518 16.5563 52.819 16.5904ZM52.8281 16.4926C53.2167 16.5272 53.6042 16.596 53.9861 16.6995C55.7192 17.1692 57.1968 18.3158 58.0938 19.8871C58.9909 21.4584 59.2338 23.3256 58.7693 25.078C58.3048 26.8305 57.1709 28.3245 55.617 29.2316L52.8281 16.4926ZM37.7633 48.8446L38.4745 51.1723L25.6967 55.1476L24.3164 50.6173L31.5714 46.3844L37.7633 48.8446ZM23.8357 5.51852L23.8358 5.51855L27.0312 9.00085L22.1531 16.2411L15.9116 16.728L14.0506 14.6942L14.0506 14.6942C12.8474 13.3818 12.2089 11.6397 12.2758 9.85108C12.3428 8.06243 13.1097 6.37417 14.4075 5.15761C15.7052 3.94109 17.4275 3.29586 19.1955 3.36352C20.9634 3.43118 22.6326 4.20622 23.8357 5.51852ZM13.6156 52.5737C12.4073 52.5706 11.2225 52.2352 10.1881 51.6033C9.15366 50.9715 8.30859 50.0669 7.74349 48.9863C7.17839 47.9058 6.9146 46.6901 6.98044 45.4694C7.04628 44.2488 7.43925 43.0694 8.11715 42.0575C8.11717 42.0575 8.1172 42.0574 8.11722 42.0574L33.2111 4.81244C34.2375 3.41902 35.7561 2.48031 37.45 2.1918C39.1446 1.90318 40.884 2.28749 42.3052 3.26472C43.7265 4.24198 44.7199 5.73676 45.0775 7.43724C45.4351 9.13704 45.1298 10.9107 44.2255 12.3882L19.1315 49.6333C18.5192 50.5416 17.6963 51.2845 16.7348 51.797C15.7733 52.3096 14.7024 52.5762 13.6156 52.5737Z"
+        stroke="white"
+        strokeOpacity={0.1}
+        strokeWidth={0.196305}
+      />
+      <defs>
+        <linearGradient id="paint0_linear_2845_2276" x1={30} y1={2} x2={30} y2={60} gradientUnits="userSpaceOnUse">
+          <stop stopColor="#7FE8D4" />
+          <stop offset={1} stopColor="#1FA192" />
+        </linearGradient>
+        <linearGradient id="paint1_linear_2845_2276" x1={30} y1={2} x2={30} y2={60} gradientUnits="userSpaceOnUse">
+          <stop stopColor="#7FE8D4" />
+          <stop offset={1} stopColor="#1FA192" />
+        </linearGradient>
+        <linearGradient id="paint2_linear_2845_2276" x1={30} y1={2} x2={30} y2={60} gradientUnits="userSpaceOnUse">
+          <stop stopColor="#7FE8D4" />
+          <stop offset={1} stopColor="#1FA192" />
+        </linearGradient>
+        <linearGradient id="paint3_linear_2845_2276" x1={30} y1={2} x2={30} y2={60} gradientUnits="userSpaceOnUse">
+          <stop stopColor="#7FE8D4" />
+          <stop offset={1} stopColor="#1FA192" />
+        </linearGradient>
+        <linearGradient id="paint4_linear_2845_2276" x1={30} y1={2} x2={30} y2={60} gradientUnits="userSpaceOnUse">
+          <stop stopColor="#7FE8D4" />
+          <stop offset={1} stopColor="#1FA192" />
+        </linearGradient>
+        <linearGradient id="paint5_linear_2845_2276" x1={30} y1={2} x2={30} y2={60} gradientUnits="userSpaceOnUse">
+          <stop stopColor="#7FE8D4" />
+          <stop offset={1} stopColor="#1FA192" />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+};
+
+const logoPadding = (layout.newMenuIconSize - layout.logoSize) / 2;
+
+export const logoContainerStyle = css`
+  ${{
+    padding: logoPadding,
+    width: layout.newMenuIconSize,
+    height: layout.newMenuIconSize,
+    lineHeight: 0,
+  }}
+`;

package/src/menu-item-actions.tsx

@@ -0,0 +1,6 @@
+import {FC} from "react";
+import {TooltipTitle} from "./tooltip";
+
+export const AddViewsActionsTooltip: FC = () => {
+  return <TooltipTitle>Create View, Document or Folder</TooltipTitle>;
+};

package/src/new-badge.tsx

@@ -0,0 +1,16 @@
+import {css} from "@linaria/core";
+import {space, textStyles, themeVars} from "./design-system";
+
+const newBadgeStyle = css`
+  ${textStyles.heading7}
+  display: inline-block;
+  padding: ${space.s1}px ${space.s4}px;
+  color: ${themeVars.colorTextButtonOutlineAccent};
+  background-color: ${themeVars.colorBgButtonOutlineAccentDefault};
+  border: 1px solid ${themeVars.colorBorderButtonOutlineAccentDefault};
+  vertical-align: text-top;
+  border-radius: 20px;
+`;
+
+type Props = {children: React.ReactNode};
+export const NewBadge: React.FC<Props> = ({children}) => <span className={newBadgeStyle}>{children}</span>;

package/src/new-card-placeholder.tsx

@@ -0,0 +1,231 @@
+import {useFocusOutside} from "@fibery/react/src/use-focus-outside";
+import {css} from "@linaria/core";
+import {styled} from "@linaria/react";
+import cx from "classnames";
+import {CSSProperties, FC, ReactNode, RefObject, useCallback, useEffect, useState} from "react";
+import {AntTransparentInput, AntTransparentTextArea} from "./antd/input";
+import {Box} from "./box";
+import {Button} from "./button/button";
+import {CardContainer, CardSize, titleUnitsContainerClassName} from "./card-container";
+import {space, textStyles, themeVars} from "./design-system";
+import {ignoreEnter} from "./form-utils";
+import {$TSFixMe} from "./tsfixme";
+
+const disabledTextClassName = css`
+  ${{color: themeVars.disabledTextColor}}
+`;
+
+const titleAreaContainerClassName = css`
+  ${{
+    width: "100%",
+  }}
+`;
+
+const AuxWrapper = styled.div<{backgroundColor?: string}>`
+  display: flex;
+  gap: ${space.s4}px;
+  background-color: ${({backgroundColor}) => backgroundColor || ""};
+`;
+
+const singleLineClassName = css`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+
+const autosize = {
+  minRows: 1,
+  maxRows: 10,
+};
+
+export const outlineNoneClassName = css`
+  ${{outline: "none"}}
+`;
+
+interface NewCardPlaceholderProps {
+  typeTitle?: string;
+  size: CardSize;
+  containerClassName?: string;
+  inputStyle?: CSSProperties;
+  leftContainer?: ReactNode;
+  scrollToInput?: boolean;
+  bypassedRef: RefObject<HTMLDivElement>;
+  referenceSelector?: ReactNode;
+  selectorOpen?: boolean;
+  readOnly?: boolean;
+  onSubmit: (v: {event: $TSFixMe; title: string}) => Promise<void>;
+  onHide: () => void;
+  onHideByEsc?: () => void;
+}
+
+export const NewCardPlaceholder: FC<NewCardPlaceholderProps> = (props) => {
+  const {
+    leftContainer,
+    typeTitle,
+    containerClassName,
+    inputStyle,
+    bypassedRef,
+    onSubmit,
+    onHide,
+    onHideByEsc = onHide,
+    referenceSelector,
+    selectorOpen,
+    readOnly,
+    scrollToInput = true,
+    size,
+  } = props;
+  const [title, setTitle] = useState<string>("");
+
+  const multiline = size !== ":card-size/timeline" && size !== ":card-size/list" && size !== ":card-size/cell";
+  useEffect(() => {
+    if (readOnly) {
+      bypassedRef.current?.focus();
+    }
+  }, [bypassedRef, readOnly]);
+
+  const onChange = useCallback((e: $TSFixMe) => {
+    setTitle(e.target.value);
+    e.stopPropagation();
+  }, []);
+
+  const submit = useCallback(
+    async (event: $TSFixMe) => {
+      setTitle("");
+      try {
+        await onSubmit({event, title});
+      } catch (e) {
+        // pass
+      }
+    },
+    [onSubmit, title]
+  );
+
+  const onPressEnter = useCallback(
+    async (e: $TSFixMe) => {
+      e.stopPropagation();
+      submit(e);
+    },
+    [submit]
+  );
+
+  const onBlur = useCallback(
+    async (e: $TSFixMe) => {
+      if (!selectorOpen) {
+        if (title) {
+          submit(e);
+        }
+        onHide();
+      }
+    },
+    [onHide, selectorOpen, submit, title]
+  );
+
+  const hasTitle = title.length > 0;
+
+  const onKeyDown = useCallback(
+    (e: $TSFixMe) => {
+      ignoreEnter(e);
+      if (e.key === "Escape") {
+        e.stopPropagation();
+        if (hasTitle) {
+          setTitle("");
+        } else {
+          onHideByEsc();
+        }
+      }
+    },
+    [hasTitle, onHideByEsc]
+  );
+
+  const onAddCardButtonClick = useCallback(
+    (e: $TSFixMe) => {
+      submit(e);
+    },
+    [submit]
+  );
+
+  const [containerElement, setContainerElement] = useState<HTMLElement | null>(null);
+
+  const isTitleEmpty = title === "";
+  useEffect(() => {
+    if (containerElement && scrollToInput) {
+      containerElement.scrollIntoView({
+        behavior: "smooth",
+        block: "center",
+        inline: "nearest",
+      });
+    }
+  }, [containerElement, isTitleEmpty, scrollToInput]);
+
+  const {onBlurCapture, onFocusCapture} = useFocusOutside(onBlur);
+
+  const InputComponent = multiline ? AntTransparentTextArea : AntTransparentInput;
+
+  return (
+    <Box
+      focused
+      hovered={false}
+      ref={setContainerElement}
+      className={containerClassName}
+      onBlurCapture={onBlurCapture}
+      onFocusCapture={onFocusCapture}
+    >
+      <CardContainer
+        before={leftContainer && <div>{leftContainer}</div>}
+        title={
+          readOnly ? (
+            <div ref={bypassedRef} tabIndex={0} className={titleUnitsContainerClassName}>
+              <div
+                className={cx(disabledTextClassName, outlineNoneClassName, {
+                  [singleLineClassName]: !multiline,
+                })}
+              >
+                Name will be generated by a formula
+              </div>
+            </div>
+          ) : (
+            <div className={titleAreaContainerClassName}>
+              <InputComponent
+                // @ts-expect-error fix types for ref
+                bypassedRef={bypassedRef}
+                value={title}
+                readOnly={false}
+                onChange={onChange}
+                onPressEnter={onPressEnter}
+                autoFocus={true}
+                onKeyDown={onKeyDown}
+                placeholder={readOnly ? "" : `New ${typeTitle}`}
+                style={{
+                  ...textStyles.regular,
+                  ...inputStyle,
+                }}
+                {...(multiline
+                  ? {
+                      autoSize: autosize,
+                    }
+                  : {})}
+              />
+            </div>
+          )
+        }
+        size={size}
+        after={
+          (referenceSelector || readOnly) && (
+            <AuxWrapper>
+              {referenceSelector && <div>{referenceSelector}</div>}
+              {readOnly && (
+                <div>
+                  <Button style={{width: 40}} size="small" onClick={onAddCardButtonClick}>
+                    Add
+                  </Button>
+                </div>
+              )}
+              {multiline && <div />}
+            </AuxWrapper>
+          )
+        }
+        input={!readOnly}
+      />
+    </Box>
+  );
+};

package/src/not-empty.ts

@@ -0,0 +1,3 @@
+export function notEmpty<TValue>(value: TValue | null | undefined | false): value is TValue {
+  return value !== null && value !== undefined && value !== false;
+}

package/src/notification-dot.tsx

@@ -0,0 +1,23 @@
+import {css} from "@linaria/core";
+import {space, themeVars} from "./design-system";
+
+const activityIndicatorStyle = css`
+  ${{
+    backgroundColor: themeVars.active,
+    borderRadius: "50%",
+    position: "absolute",
+    top: 0,
+  }}
+`;
+
+export const NotificationDot = ({big = true, color = themeVars.active}: {big: boolean; color: string}) => {
+  const size = big ? space.s6 : space.s4;
+  const marginTop = big ? -6 : -1;
+  const marginRight = big ? -1 : 0;
+  return (
+    <div
+      className={activityIndicatorStyle}
+      style={{backgroundColor: color, width: size, height: size, marginTop, marginRight}}
+    />
+  );
+};

package/src/number-input/decimal.js

@@ -0,0 +1,59 @@
+import _ from "lodash";
+
+const isEmpty = (value) => _.isNil(value) || value === "";
+
+const getPrecision = (value) => {
+  if (isEmpty(value)) {
+    return 0;
+  }
+  const [, decimalPart = ""] = String(value).split(".");
+  return decimalPart.length;
+};
+
+const removeTrailingZeros = (value) => {
+  if (isEmpty(value)) {
+    return value;
+  }
+  const hasDecimalPart = value.indexOf(".") > 0;
+  return hasDecimalPart ? _.trimEnd(_.trimEnd(value, "0"), ".") : value;
+};
+
+export const add = _.flow([
+  (first, second) => {
+    const result = Number(first) + Number(second);
+    const maxPrecision = Math.max(getPrecision(first), getPrecision(second));
+    return result.toFixed(maxPrecision);
+  },
+  removeTrailingZeros,
+]);
+
+export const sub = _.flow([
+  (first, second) => {
+    return add(first, -second);
+  },
+  removeTrailingZeros,
+]);
+
+export const multiplyByHundred = _.flow([
+  (value) => {
+    if (isEmpty(value)) {
+      return value;
+    }
+    const result = value * 100;
+    const precision = Math.max(0, getPrecision(value) - 2);
+    return result.toFixed(precision);
+  },
+  removeTrailingZeros,
+]);
+
+export const divideByHundred = _.flow([
+  (value) => {
+    if (isEmpty(value)) {
+      return value;
+    }
+    const result = value / 100;
+    const precision = getPrecision(value) + 2;
+    return result.toFixed(precision);
+  },
+  removeTrailingZeros,
+]);

package/src/number-input/decimal.test.js

@@ -0,0 +1,71 @@
+import {divideByHundred, multiplyByHundred, add, sub} from "./decimal";
+
+describe("decimal", () => {
+  it("multiplyByHundred", () => {
+    expect(multiplyByHundred("")).toEqual("");
+    expect(multiplyByHundred(null)).toEqual(null);
+    expect(multiplyByHundred(undefined)).toEqual(undefined);
+    expect(multiplyByHundred("0")).toEqual("0");
+    expect(multiplyByHundred("1")).toEqual("100");
+    expect(multiplyByHundred("1.1")).toEqual("110");
+    expect(multiplyByHundred("0.1")).toEqual("10");
+    expect(multiplyByHundred("0.1111")).toEqual("11.11");
+
+    // Negative
+    expect(multiplyByHundred("-0")).toEqual("0");
+    expect(multiplyByHundred("-1")).toEqual("-100");
+    expect(multiplyByHundred("-0.1")).toEqual("-10");
+  });
+
+  it("divideByHundred", () => {
+    expect(divideByHundred("")).toEqual("");
+    expect(divideByHundred(null)).toEqual(null);
+    expect(divideByHundred(undefined)).toEqual(undefined);
+    expect(divideByHundred("0")).toEqual("0");
+    expect(divideByHundred("1")).toEqual("0.01");
+    expect(divideByHundred("1.1")).toEqual("0.011");
+    expect(divideByHundred("0.1")).toEqual("0.001");
+    expect(divideByHundred("0.7")).toEqual("0.007");
+
+    // Negative
+    expect(divideByHundred("-1")).toEqual("-0.01");
+    expect(divideByHundred("-0.1")).toEqual("-0.001");
+    expect(divideByHundred("-100")).toEqual("-1");
+  });
+
+  it("add", () => {
+    expect(add("1", "1")).toEqual("2");
+    expect(add("1", "1.1")).toEqual("2.1");
+    expect(add("0.01", "0.99")).toEqual("1");
+    expect(add("0.1", "1.01")).toEqual("1.11");
+
+    // Precision
+    expect(add("0.09", "0.01")).toEqual("0.1");
+    expect(add("0.06", "0.01")).toEqual("0.07");
+
+    // Negative
+    expect(add("-1128", "-9.3")).toEqual("-1137.3");
+    expect(add("11.28", "-9.3")).toEqual("1.98");
+    expect(add("1128", "-0.93")).toEqual("1127.07");
+    expect(add("11.28", "-93")).toEqual("-81.72");
+    expect(add("-11.28", "9.3")).toEqual("-1.98");
+  });
+
+  it("sub", () => {
+    expect(sub("1", "1")).toEqual("0");
+    expect(sub("1.1", "1")).toEqual("0.1");
+    expect(sub("1.1", "0.1")).toEqual("1");
+    expect(sub("2.2", "1.1")).toEqual("1.1");
+
+    // Precision
+    expect(sub("0.04", "0.03")).toEqual("0.01");
+    expect(sub("0.03", "0.01")).toEqual("0.02");
+
+    // Negative
+    expect(sub("-1128", "-9.3")).toEqual("-1118.7");
+    expect(sub("11.28", "-9.3")).toEqual("20.58");
+    expect(sub("1128", "-0.93")).toEqual("1128.93");
+    expect(sub("11.28", "-93")).toEqual("104.28");
+    expect(sub("-11.28", "9.3")).toEqual("-20.58");
+  });
+});

package/src/number-input/edit-unit-styles.ts

@@ -0,0 +1,18 @@
+import {css} from "@linaria/core";
+import {themeVars} from "../design-system";
+
+export const invalidInputStyle = {
+  boxShadow: `0 0 0 1px ${themeVars.warning} inset`,
+
+  "&:hover": {
+    boxShadow: `0 0 0 1px ${themeVars.warning} inset`,
+  },
+
+  "&:focus": {
+    boxShadow: `0 0 0 1px ${themeVars.warning} inset`,
+  },
+};
+
+export const invalidInputClass = css`
+  ${invalidInputStyle}
+`;