fix: input text alignment

.storybook/output.css

@@ -736,6 +736,10 @@ select {
   margin-top: 0.25rem;
 }
 
+.mt-2 {
+  margin-top: 0.5rem;
+}
+
 .box-border {
   box-sizing: border-box;
 }
@@ -756,14 +760,6 @@ select {
   height: 100%;
 }
 
-.h-1 {
-  height: 0.25rem;
-}
-
-.h-0 {
-  height: 0px;
-}
-
 .h-\[2px\] {
   height: 2px;
 }
@@ -780,10 +776,6 @@ select {
   min-width: 0px;
 }
 
-.max-w-xs {
-  max-width: 20rem;
-}
-
 .-translate-x-2\/4 {
   --tw-translate-x: -50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -855,18 +847,6 @@ select {
   border-width: 1px;
 }
 
-.border-0 {
-  border-width: 0px;
-}
-
-.border-t {
-  border-top-width: 1px;
-}
-
-.border-b {
-  border-bottom-width: 1px;
-}
-
 .border-mono-border {
   --tw-border-opacity: 1;
   border-color: rgb(209 213 219 / var(--tw-border-opacity));
@@ -877,6 +857,11 @@ select {
   border-color: rgb(39 39 42 / var(--tw-border-opacity));
 }
 
+.border-mono-error {
+  --tw-border-opacity: 1;
+  border-color: rgb(239 68 68 / var(--tw-border-opacity));
+}
+
 .bg-white {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
@@ -887,16 +872,6 @@ select {
   background-color: rgb(39 39 42 / var(--tw-bg-opacity));
 }
 
-.bg-gray-400 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(156 163 175 / var(--tw-bg-opacity));
-}
-
-.bg-gray-300 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(209 213 219 / var(--tw-bg-opacity));
-}
-
 .bg-mono-border {
   --tw-bg-opacity: 1;
   background-color: rgb(209 213 219 / var(--tw-bg-opacity));
@@ -999,6 +974,10 @@ select {
   padding-right: 0.75rem;
 }
 
+.text-left {
+  text-align: left;
+}
+
 .text-right {
   text-align: right;
 }
@@ -1041,6 +1020,11 @@ select {
   color: rgb(107 114 128 / var(--tw-text-opacity));
 }
 
+.text-mono-error {
+  --tw-text-opacity: 1;
+  color: rgb(239 68 68 / var(--tw-text-opacity));
+}
+
 .opacity-0 {
   opacity: 0;
 }
@@ -1064,21 +1048,6 @@ html {
   color: rgb(209 213 219 / var(--tw-text-opacity));
 }
 
-.after\:content-none::after {
-  --tw-content: none;
-  content: var(--tw-content);
-}
-
-.after\:content-\[\'\'\]::after {
-  --tw-content: '';
-  content: var(--tw-content);
-}
-
-.after\:content-\[\'\$\'\]::after {
-  --tw-content: '$';
-  content: var(--tw-content);
-}
-
 .hover\:bg-gray-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));
@@ -1153,10 +1122,6 @@ html {
 }
 
 @media (min-width: 640px) {
-  .sm\:p-6 {
-    padding: 1.5rem;
-  }
-
   .sm\:px-6 {
     padding-left: 1.5rem;
     padding-right: 1.5rem;

src/components/Input/Input.stories.tsx

@@ -15,7 +15,35 @@ type Story = StoryObj<typeof Input>;
 export const Default: Story = {
   render: () => (
     <Box className={cx(["w-96"])}>
-      <Input label="name" />
+      <Input label="Name" />
+    </Box>
+  ),
+};
+
+export const Money: Story = {
+  render: () => (
+    <Box className={cx(["w-96"])}>
+      <Input label="Balance" money />
+    </Box>
+  ),
+};
+
+export const helpText: Story = {
+  render: () => (
+    <Box className={cx(["w-96"])}>
+      <Input label="Address" helpText="Provide full address and zip code." />
+    </Box>
+  ),
+};
+
+export const WithError: Story = {
+  render: () => (
+    <Box className={cx(["w-96"])}>
+      <Input
+        label="Address"
+        hasError
+        helpText="Provide full address and zip code."
+      />
     </Box>
   ),
 };

src/components/Input/Input.styles.ts

@@ -2,11 +2,13 @@ import { cva } from "class-variance-authority";
 
 const base = [
   "block",
+  "w-full",
   "rounded-lg",
   "border-2",
   "border-mono-border",
   "py-1.5",
   "px-2",
+  "text-left",
   "text-mono-text",
   "text-ellipsis",
   "placeholder:text-mono-border",
@@ -17,13 +19,11 @@ const base = [
 
 const inputStyles = cva(base, {
   variants: {
-    fullWidth: {
-      true: ["w-full"],
+    hasError: {
+      true: "border-mono-error",
     },
   },
-  defaultVariants: {
-    fullWidth: false,
-  },
+  defaultVariants: {},
 });
 
 export { inputStyles };

src/components/Input/Input.tsx

@@ -1,30 +1,30 @@
 import * as React from "react";
 import dashify from "dashify";
-import { Primitive } from "@radix-ui/react-primitive";
 import { NumericFormat } from "react-number-format";
 import type * as T from "./Input.types";
 import { Box } from "../Box";
 import { cx } from "../../utils";
 import { inputStyles } from "./Input.styles";
-import { match } from "ts-pattern";
+import { match, P } from "ts-pattern";
 
 const Input = React.forwardRef<HTMLInputElement, T.InputProps>(
   (
     {
       label,
-      fullWidth,
+      helpText,
       money,
       numericFormatOptions,
       hideLabel = false,
       symbol = "$",
       currency = "USD",
+      hasError,
       ...props
     },
     forwardedRef
   ) => {
     const htmlId = dashify(label);
     const classes = cx(
-      inputStyles({ fullWidth }),
+      inputStyles({ hasError }),
       {
         "pr-12": currency,
         "text-right": money,
@@ -41,12 +41,7 @@ const Input = React.forwardRef<HTMLInputElement, T.InputProps>(
     ];
 
     return (
-      <Box
-        className={cx(["relative"], {
-          "w-full": fullWidth,
-          "max-w-xs": !fullWidth,
-        })}
-      >
+      <Box className={cx(["relative"])}>
         <label
           className={cx(
             ["text-sm", "font-semibold", "leading-6", "text-mono-primary"],
@@ -63,8 +58,8 @@ const Input = React.forwardRef<HTMLInputElement, T.InputProps>(
             "mt-1": !hideLabel,
           })}
         >
-          {match({ money })
-            .with({ money: true }, () => (
+          {match(money)
+            .with(true, () => (
               <>
                 <Box className={cx(["left-0", "pl-3"], moneyDecoratorsClasses)}>
                   <span className={cx(["text-mono-primary", "sm:text-sm"])}>
@@ -98,6 +93,17 @@ const Input = React.forwardRef<HTMLInputElement, T.InputProps>(
               />
             ))}
         </Box>
+        {match(helpText)
+          .with(P.not(P.nullish), () => (
+            <p
+              className={cx(["mt-2", "text-sm", "text-mono-text"], {
+                "text-mono-error": hasError,
+              })}
+            >
+              {helpText}
+            </p>
+          ))
+          .otherwise(() => null)}
       </Box>
     );
   }

src/components/Input/Input.types.ts

@@ -19,6 +19,7 @@ type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "size"> &
     numericFormatOptions?: NumericFormatProps;
     symbol?: string;
     currency?: string;
+    helpText?: string;
   };
 
 export { InputProps };

tailwind.config.js

@@ -31,6 +31,10 @@ module.exports = {
         "mono-rounded": {
           DEFAULT: defaultTheme.borderRadius["lg"],
         },
+        "mono-error": {
+          DEFAULT: colors.red[500],
+          hover: colors.red[400],
+        },
       },
     },
   },