@ttoss/ui 1.32.0 → 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

@@ -1,6 +1,6 @@
 import * as theme_ui from 'theme-ui';
-import { Theme, BadgeProps as BadgeProps$1, ButtonProps as ButtonProps$1, InputProps as InputProps$1, LabelProps as LabelProps$1, SelectProps as SelectProps$1, IconButtonProps, TextareaProps as TextareaProps$1, TextProps, FlexProps } from 'theme-ui';
-export { BaseStyles, Box, BoxProps, Card, CardProps, Checkbox, CheckboxProps, Container, ContainerProps, Divider, DividerProps, Flex, FlexProps, Grid, GridProps, Heading, HeadingProps, IconButtonProps, Image, ImageProps, Progress as LinearProgress, ProgressProps as LinearProgressProps, Link, LinkProps, Radio, RadioProps, Slider, SliderProps, Spinner, SpinnerProps, Text, TextProps, Theme } from 'theme-ui';
+import { Theme, BadgeProps as BadgeProps$1, ButtonProps as ButtonProps$1, InputProps as InputProps$1, LabelProps as LabelProps$1, SelectProps, IconButtonProps, TextareaProps as TextareaProps$1, TextProps, FlexProps } from 'theme-ui';
+export { BaseStyles, Box, BoxProps, Card, CardProps, Checkbox, CheckboxProps, Container, ContainerProps, Divider, DividerProps, Flex, FlexProps, Grid, GridProps, Heading, HeadingProps, IconButtonProps, Image, ImageProps, Progress as LinearProgress, ProgressProps as LinearProgressProps, Link, LinkProps, Radio, RadioProps, SelectProps, Slider, SliderProps, Spinner, SpinnerProps, Text, TextProps, Theme } from 'theme-ui';
 export { useBreakpointIndex, useResponsiveValue } from '@theme-ui/match-media';
 import * as React from 'react';
 import React__default from 'react';
@@ -34,10 +34,10 @@ type ButtonProps = ButtonProps$1 & {
 };
 declare const Button: React.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 
-type InputProps = InputProps$1 & {
+interface InputProps extends InputProps$1 {
     leadingIcon?: IconType;
     trailingIcon?: IconType;
-};
+}
 declare const Input: React__default.ForwardRefExoticComponent<Omit<InputProps, "ref"> & React__default.RefAttributes<HTMLInputElement>>;
 
 type LabelProps = LabelProps$1 & {
@@ -46,16 +46,15 @@ type LabelProps = LabelProps$1 & {
 };
 declare const Label: ({ children, onTooltipClick, tooltip, ...props }: LabelProps) => JSX.Element;
 
-type SelectProps = SelectProps$1;
-declare const Select: React__default.ForwardRefExoticComponent<Omit<SelectProps$1, "ref"> & React__default.RefAttributes<HTMLSelectElement>>;
+declare const Select: React__default.ForwardRefExoticComponent<Omit<SelectProps, "ref"> & React__default.RefAttributes<HTMLSelectElement>>;
 
 declare const IconButton: React.ForwardRefExoticComponent<Omit<IconButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 
 declare const InfiniteLinearProgress: () => JSX.Element;
 
-type TextareaProps = TextareaProps$1 & {
+interface TextareaProps extends TextareaProps$1 {
     trailingIcon?: IconType;
-};
+}
 declare const Textarea: React__default.ForwardRefExoticComponent<Omit<TextareaProps, "ref"> & React__default.RefAttributes<HTMLTextAreaElement>>;
 
 type HelpTextProps = Omit<TextProps, 'variant'> & {
@@ -69,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, SelectProps, 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.0",
+  "version": "1.32.2",
   "description": "Primitive layout, typographic, and other components for styling applications.",
   "license": "UNLICENSED",
   "author": "ttoss",
@@ -15,7 +15,6 @@
   ],
   "scripts": {
     "build": "tsup",
-    "dev": "yarn workspace @docs/storybook run dev",
     "test": "jest"
   },
   "sideEffects": false,
@@ -24,16 +23,19 @@
     "@emotion/react": "^11.10.6",
     "@iconify-icon/react": "^1.0.7",
     "@theme-ui/match-media": "^0.15.7",
-    "@ttoss/theme": "^1.4.15",
+    "@ttoss/theme": "^1.4.17",
     "theme-ui": "^0.15.7"
   },
   "peerDependencies": {
     "react": ">=16.8.0"
   },
   "devDependencies": {
-    "@ttoss/config": "^1.29.3",
-    "@ttoss/test-utils": "^1.21.2",
+    "@iconify-icons/mdi-light": "^1.2.5",
+    "@iconify/types": "^2.0.0",
+    "@ttoss/config": "^1.29.4",
+    "@ttoss/test-utils": "^1.21.3",
     "@types/jest": "^29.5.0",
+    "@types/react": "^18.0.35",
     "jest": "^29.5.0",
     "react": "^18.2.0",
     "tsup": "^6.7.0"
@@ -46,5 +48,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "d8d388f73b22a40e68b59c3276bb2d3b2f486225"
+  "gitHead": "0ea6f4641c1d97631f38c72da681a9e2dc54d0b7"
 }

package/src/components/Input.tsx

@@ -1,11 +1,11 @@
 import { Flex, Icon, type IconType, Text } from '..';
-import { type InputProps as InputPropsUI, Input as InputUI } from 'theme-ui';
+import { InputProps as InputPropsUI, Input as InputUI } from 'theme-ui';
 import React from 'react';
 
-export type InputProps = InputPropsUI & {
+export interface InputProps extends InputPropsUI {
   leadingIcon?: IconType;
   trailingIcon?: IconType;
-};
+}
 
 export const Input = React.forwardRef<HTMLInputElement, InputProps>(
   ({ leadingIcon, trailingIcon, className, sx, ...inputProps }, ref) => {

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/components/Select.tsx

@@ -1,11 +1,8 @@
 import { Icon, Text } from '..';
-import {
-  type SelectProps as SelectPropsUi,
-  Select as SelectUi,
-} from 'theme-ui';
+import { SelectProps, Select as SelectUi } from 'theme-ui';
 import React from 'react';
 
-export type SelectProps = SelectPropsUi;
+export { type SelectProps };
 
 export const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
   ({ arrow, ...props }, ref) => {

package/src/components/Textarea.tsx

@@ -5,9 +5,9 @@ import {
 } from 'theme-ui';
 import React from 'react';
 
-export type TextareaProps = TextareaPropsUI & {
+export interface TextareaProps extends TextareaPropsUI {
   trailingIcon?: IconType;
-};
+}
 
 export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
   ({ trailingIcon, className, sx, ...textareaProps }, ref) => {

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';