@ttoss/ui 1.32.1 → 1.32.2

package/dist/esm/index.js

@@ -413,11 +413,133 @@ var CloseButton = /*#__PURE__*/React9.forwardRef(({
 });
 CloseButton.displayName = "CloseButton";
 
+// src/components/InputNumber.tsx
+import { Input as Input2 } from "theme-ui";
+import React10 from "react";
+import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
+var InputNumber = /*#__PURE__*/React10.forwardRef(({
+  sx,
+  value,
+  infoIcon,
+  onChange,
+  onClickInfoIcon,
+  ...inputProps
+}, ref) => {
+  const sxProps = React10.useMemo(() => {
+    const size = String(typeof value === "undefined" ? 0 : value).length;
+    if (inputProps["aria-invalid"] === "true") {
+      return {
+        width: `calc(139px + ${size > 1 ? size * 10 : 0}px)`,
+        textAlign: "left",
+        "&[type=number]::-webkit-inner-spin-button, &[type=number]::-webkit-outer-spin-button": {
+          "-webkit-appearance": "none",
+          margin: 0
+        },
+        ...sx,
+        paddingLeft: "3xl",
+        paddingRight: "2xl",
+        margin: 0
+      };
+    }
+    return {
+      width: `calc(108px + ${size > 1 ? size * 10 : 0}px)`,
+      textAlign: "center",
+      "&[type=number]::-webkit-inner-spin-button, &[type=number]::-webkit-outer-spin-button": {
+        "-webkit-appearance": "none",
+        margin: 0
+      },
+      ...sx,
+      paddingLeft: "2xl",
+      paddingRight: "2xl",
+      margin: 0
+    };
+  }, [inputProps, value, sx]);
+  const handleChangeUp = () => {
+    if (inputProps.disabled) {
+      return;
+    }
+    if (typeof value !== "number") {
+      onChange(-1);
+      return;
+    }
+    onChange(value - 1);
+  };
+  const handleChangeDown = () => {
+    if (inputProps.disabled) {
+      return;
+    }
+    if (typeof value !== "number") {
+      onChange(1);
+      return;
+    }
+    onChange(value + 1);
+  };
+  return /* @__PURE__ */jsxs9(Flex, {
+    sx: {
+      width: "fit-content",
+      ...sx,
+      position: "relative",
+      padding: 0,
+      border: "none"
+    },
+    ref,
+    "aria-invalid": inputProps["aria-invalid"],
+    children: [/* @__PURE__ */jsx13(Input2, {
+      ref,
+      variant: "forms.inputNumber",
+      sx: sxProps,
+      type: "number",
+      onChange: e => {
+        onChange(Number(e.target.value));
+      },
+      value,
+      ...inputProps
+    }), /* @__PURE__ */jsx13(Text, {
+      sx: {
+        position: "absolute",
+        alignSelf: "center",
+        left: "1rem",
+        zIndex: 1,
+        cursor: "pointer"
+      },
+      onClick: handleChangeUp,
+      children: /* @__PURE__ */jsx13(Icon, {
+        icon: "picker-down"
+      })
+    }), infoIcon && /* @__PURE__ */jsx13(Text, {
+      sx: {
+        position: "absolute",
+        alignSelf: "center",
+        right: "2.5rem",
+        zIndex: 1,
+        cursor: onClickInfoIcon ? "pointer" : "default"
+      },
+      onClick: onClickInfoIcon,
+      children: /* @__PURE__ */jsx13(Icon, {
+        icon: "info"
+      })
+    }), /* @__PURE__ */jsx13(Text, {
+      sx: {
+        position: "absolute",
+        alignSelf: "center",
+        right: "1rem",
+        zIndex: 1,
+        cursor: "pointer"
+      },
+      onClick: handleChangeDown,
+      children: /* @__PURE__ */jsx13(Icon, {
+        icon: "picker-up"
+      })
+    })]
+  });
+});
+InputNumber.displayName = "InputNumber";
+
 // src/components/Stack.tsx
-import * as React10 from "react";
-import { jsx as jsx13 } from "react/jsx-runtime";
-var Stack = /*#__PURE__*/React10.forwardRef((props, ref) => {
-  return /* @__PURE__ */jsx13(Flex, {
+import * as React11 from "react";
+import { jsx as jsx14 } from "react/jsx-runtime";
+var Stack = /*#__PURE__*/React11.forwardRef((props, ref) => {
+  return /* @__PURE__ */jsx14(Flex, {
     ref,
     ...props,
     sx: {
@@ -427,4 +549,4 @@ var Stack = /*#__PURE__*/React10.forwardRef((props, ref) => {
   });
 });
 Stack.displayName = "Stack";
-export { Badge, BaseStyles, Box, Button, Card, Checkbox, CloseButton, Container, Divider, Flex, Grid, Heading, HelpText, Icon, IconButton, Image, InfiniteLinearProgress, Input, Label, Progress as LinearProgress, Link, Radio, Select, Slider, Spinner, Stack, Text, Textarea, ThemeProvider, useBreakpointIndex, useResponsiveValue, useTheme };
+export { Badge, BaseStyles, Box, Button, Card, Checkbox, CloseButton, Container, Divider, Flex, Grid, Heading, HelpText, Icon, IconButton, Image, InfiniteLinearProgress, Input, InputNumber, Label, Progress as LinearProgress, Link, Radio, Select, Slider, Spinner, Stack, Text, Textarea, ThemeProvider, useBreakpointIndex, useResponsiveValue, useTheme };

package/dist/index.d.ts

@@ -68,10 +68,18 @@ type CloseButtonProps = ButtonProps$1 & {
 };
 declare const CloseButton: React__default.ForwardRefExoticComponent<Omit<CloseButtonProps, "ref"> & React__default.RefAttributes<HTMLButtonElement>>;
 
+type InputNumberProps = Omit<InputProps$1, 'type' | 'variant' | 'onChange'> & {
+    onChange: (value: number) => void;
+    value?: number;
+    infoIcon?: boolean;
+    onClickInfoIcon?: () => void;
+};
+declare const InputNumber: React__default.ForwardRefExoticComponent<Omit<InputNumberProps, "ref"> & React__default.RefAttributes<HTMLInputElement>>;
+
 type StackProps = FlexProps;
 /**
  * A component that renders its children in a column.
  */
 declare const Stack: React.ForwardRefExoticComponent<theme_ui.BoxProps & React.RefAttributes<HTMLElement>>;
 
-export { Badge, BadgeProps, Button, ButtonProps, CloseButton, CloseButtonProps, HelpText, HelpTextProps, Icon, IconButton, IconProps, IconType, InfiniteLinearProgress, Input, InputProps, Label, LabelProps, Select, Stack, StackProps, Textarea, TextareaProps, ThemeProvider, ThemeProviderProps, useTheme };
+export { Badge, BadgeProps, Button, ButtonProps, CloseButton, CloseButtonProps, HelpText, HelpTextProps, Icon, IconButton, IconProps, IconType, InfiniteLinearProgress, Input, InputNumber, InputNumberProps, InputProps, Label, LabelProps, Select, Stack, StackProps, Textarea, TextareaProps, ThemeProvider, ThemeProviderProps, useTheme };

package/dist/index.js

@@ -39,7 +39,7 @@ var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
 var src_exports = {};
 __export(src_exports, {
   Badge: () => Badge,
-  BaseStyles: () => import_theme_ui26.BaseStyles,
+  BaseStyles: () => import_theme_ui27.BaseStyles,
   Box: () => import_theme_ui4.Box,
   Button: () => Button,
   Card: () => import_theme_ui6.Card,
@@ -56,6 +56,7 @@ __export(src_exports, {
   Image: () => import_theme_ui11.Image,
   InfiniteLinearProgress: () => InfiniteLinearProgress,
   Input: () => Input,
+  InputNumber: () => InputNumber,
   Label: () => Label,
   LinearProgress: () => import_theme_ui15.Progress,
   Link: () => import_theme_ui14.Link,
@@ -72,7 +73,7 @@ __export(src_exports, {
   useTheme: () => useTheme
 });
 module.exports = __toCommonJS(src_exports);
-var import_theme_ui26 = require("theme-ui");
+var import_theme_ui27 = require("theme-ui");
 var import_match_media = require("@theme-ui/match-media");
 
 // src/theme/ThemeProvider.tsx
@@ -484,11 +485,133 @@ var CloseButton = import_react6.default.forwardRef(({
 });
 CloseButton.displayName = "CloseButton";
 
-// src/components/Stack.tsx
-var React10 = __toESM(require("react"));
+// src/components/InputNumber.tsx
+var import_theme_ui26 = require("theme-ui");
+var import_react7 = __toESM(require("react"));
 var import_jsx_runtime13 = require("react/jsx-runtime");
-var Stack = React10.forwardRef((props, ref) => {
-  return /* @__PURE__ */(0, import_jsx_runtime13.jsx)(import_theme_ui8.Flex, {
+var InputNumber = import_react7.default.forwardRef(({
+  sx,
+  value,
+  infoIcon,
+  onChange,
+  onClickInfoIcon,
+  ...inputProps
+}, ref) => {
+  const sxProps = import_react7.default.useMemo(() => {
+    const size = String(typeof value === "undefined" ? 0 : value).length;
+    if (inputProps["aria-invalid"] === "true") {
+      return {
+        width: `calc(139px + ${size > 1 ? size * 10 : 0}px)`,
+        textAlign: "left",
+        "&[type=number]::-webkit-inner-spin-button, &[type=number]::-webkit-outer-spin-button": {
+          "-webkit-appearance": "none",
+          margin: 0
+        },
+        ...sx,
+        paddingLeft: "3xl",
+        paddingRight: "2xl",
+        margin: 0
+      };
+    }
+    return {
+      width: `calc(108px + ${size > 1 ? size * 10 : 0}px)`,
+      textAlign: "center",
+      "&[type=number]::-webkit-inner-spin-button, &[type=number]::-webkit-outer-spin-button": {
+        "-webkit-appearance": "none",
+        margin: 0
+      },
+      ...sx,
+      paddingLeft: "2xl",
+      paddingRight: "2xl",
+      margin: 0
+    };
+  }, [inputProps, value, sx]);
+  const handleChangeUp = () => {
+    if (inputProps.disabled) {
+      return;
+    }
+    if (typeof value !== "number") {
+      onChange(-1);
+      return;
+    }
+    onChange(value - 1);
+  };
+  const handleChangeDown = () => {
+    if (inputProps.disabled) {
+      return;
+    }
+    if (typeof value !== "number") {
+      onChange(1);
+      return;
+    }
+    onChange(value + 1);
+  };
+  return /* @__PURE__ */(0, import_jsx_runtime13.jsxs)(import_theme_ui8.Flex, {
+    sx: {
+      width: "fit-content",
+      ...sx,
+      position: "relative",
+      padding: 0,
+      border: "none"
+    },
+    ref,
+    "aria-invalid": inputProps["aria-invalid"],
+    children: [/* @__PURE__ */(0, import_jsx_runtime13.jsx)(import_theme_ui26.Input, {
+      ref,
+      variant: "forms.inputNumber",
+      sx: sxProps,
+      type: "number",
+      onChange: e => {
+        onChange(Number(e.target.value));
+      },
+      value,
+      ...inputProps
+    }), /* @__PURE__ */(0, import_jsx_runtime13.jsx)(import_theme_ui16.Text, {
+      sx: {
+        position: "absolute",
+        alignSelf: "center",
+        left: "1rem",
+        zIndex: 1,
+        cursor: "pointer"
+      },
+      onClick: handleChangeUp,
+      children: /* @__PURE__ */(0, import_jsx_runtime13.jsx)(Icon, {
+        icon: "picker-down"
+      })
+    }), infoIcon && /* @__PURE__ */(0, import_jsx_runtime13.jsx)(import_theme_ui16.Text, {
+      sx: {
+        position: "absolute",
+        alignSelf: "center",
+        right: "2.5rem",
+        zIndex: 1,
+        cursor: onClickInfoIcon ? "pointer" : "default"
+      },
+      onClick: onClickInfoIcon,
+      children: /* @__PURE__ */(0, import_jsx_runtime13.jsx)(Icon, {
+        icon: "info"
+      })
+    }), /* @__PURE__ */(0, import_jsx_runtime13.jsx)(import_theme_ui16.Text, {
+      sx: {
+        position: "absolute",
+        alignSelf: "center",
+        right: "1rem",
+        zIndex: 1,
+        cursor: "pointer"
+      },
+      onClick: handleChangeDown,
+      children: /* @__PURE__ */(0, import_jsx_runtime13.jsx)(Icon, {
+        icon: "picker-up"
+      })
+    })]
+  });
+});
+InputNumber.displayName = "InputNumber";
+
+// src/components/Stack.tsx
+var React11 = __toESM(require("react"));
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var Stack = React11.forwardRef((props, ref) => {
+  return /* @__PURE__ */(0, import_jsx_runtime14.jsx)(import_theme_ui8.Flex, {
     ref,
     ...props,
     sx: {
@@ -518,6 +641,7 @@ Stack.displayName = "Stack";
   Image,
   InfiniteLinearProgress,
   Input,
+  InputNumber,
   Label,
   LinearProgress,
   Link,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/ui",
-  "version": "1.32.1",
+  "version": "1.32.2",
   "description": "Primitive layout, typographic, and other components for styling applications.",
   "license": "UNLICENSED",
   "author": "ttoss",
@@ -23,7 +23,7 @@
     "@emotion/react": "^11.10.6",
     "@iconify-icon/react": "^1.0.7",
     "@theme-ui/match-media": "^0.15.7",
-    "@ttoss/theme": "^1.4.16",
+    "@ttoss/theme": "^1.4.17",
     "theme-ui": "^0.15.7"
   },
   "peerDependencies": {
@@ -48,5 +48,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "81c9da91988b338a6449d84b4dfc183ccf9ed941"
+  "gitHead": "0ea6f4641c1d97631f38c72da681a9e2dc54d0b7"
 }

package/src/components/InputNumber.tsx

@@ -0,0 +1,146 @@
+import { Flex, Icon, Text } from '..';
+import { Input, type InputProps as InputPropsUI } from 'theme-ui';
+import React from 'react';
+
+export type InputNumberProps = Omit<
+  InputPropsUI,
+  'type' | 'variant' | 'onChange'
+> & {
+  onChange: (value: number) => void;
+  value?: number;
+  infoIcon?: boolean;
+  onClickInfoIcon?: () => void;
+};
+
+export const InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>(
+  ({ sx, value, infoIcon, onChange, onClickInfoIcon, ...inputProps }, ref) => {
+    const sxProps: InputPropsUI['sx'] = React.useMemo(() => {
+      const size = String(typeof value === 'undefined' ? 0 : value).length;
+
+      if (inputProps['aria-invalid'] === 'true') {
+        return {
+          width: `calc(139px + ${size > 1 ? size * 10 : 0}px)`,
+          textAlign: 'left',
+          '&[type=number]::-webkit-inner-spin-button, &[type=number]::-webkit-outer-spin-button':
+            {
+              '-webkit-appearance': 'none',
+              margin: 0,
+            },
+          ...sx,
+          paddingLeft: '3xl',
+          paddingRight: '2xl',
+          margin: 0,
+        };
+      }
+
+      return {
+        width: `calc(108px + ${size > 1 ? size * 10 : 0}px)`,
+        textAlign: 'center',
+        '&[type=number]::-webkit-inner-spin-button, &[type=number]::-webkit-outer-spin-button':
+          {
+            '-webkit-appearance': 'none',
+            margin: 0,
+          },
+        ...sx,
+        paddingLeft: '2xl',
+        paddingRight: '2xl',
+        margin: 0,
+      };
+    }, [inputProps, value, sx]);
+
+    const handleChangeUp = () => {
+      if (inputProps.disabled) {
+        return;
+      }
+
+      if (typeof value !== 'number') {
+        onChange(-1);
+        return;
+      }
+
+      onChange(value - 1);
+    };
+
+    const handleChangeDown = () => {
+      if (inputProps.disabled) {
+        return;
+      }
+
+      if (typeof value !== 'number') {
+        onChange(1);
+        return;
+      }
+
+      onChange(value + 1);
+    };
+
+    return (
+      <Flex
+        sx={{
+          width: 'fit-content',
+          ...sx,
+          position: 'relative',
+          padding: 0,
+          border: 'none',
+        }}
+        ref={ref}
+        aria-invalid={inputProps['aria-invalid']}
+      >
+        <Input
+          ref={ref}
+          variant="forms.inputNumber"
+          sx={sxProps}
+          type="number"
+          onChange={(e) => {
+            onChange(Number(e.target.value));
+          }}
+          value={value}
+          {...inputProps}
+        />
+
+        <Text
+          sx={{
+            position: 'absolute',
+            alignSelf: 'center',
+            left: '1rem',
+            zIndex: 1,
+            cursor: 'pointer',
+          }}
+          onClick={handleChangeUp}
+        >
+          <Icon icon="picker-down" />
+        </Text>
+
+        {infoIcon && (
+          <Text
+            sx={{
+              position: 'absolute',
+              alignSelf: 'center',
+              right: '2.5rem',
+              zIndex: 1,
+              cursor: onClickInfoIcon ? 'pointer' : 'default',
+            }}
+            onClick={onClickInfoIcon}
+          >
+            <Icon icon="info" />
+          </Text>
+        )}
+
+        <Text
+          sx={{
+            position: 'absolute',
+            alignSelf: 'center',
+            right: '1rem',
+            zIndex: 1,
+            cursor: 'pointer',
+          }}
+          onClick={handleChangeDown}
+        >
+          <Icon icon="picker-up" />
+        </Text>
+      </Flex>
+    );
+  }
+);
+
+InputNumber.displayName = 'InputNumber';

package/src/index.ts

@@ -34,4 +34,5 @@ export { Textarea, type TextareaProps } from './components/Textarea';
 export { Container, type ContainerProps } from './components/Container';
 export { HelpText, type HelpTextProps } from './components/HelpText';
 export { CloseButton, type CloseButtonProps } from './components/CloseButton';
+export { InputNumber, type InputNumberProps } from './components/InputNumber';
 export { Stack, type StackProps } from './components/Stack';