feat: add disabled variant and classes (#45)

* feat: add `disabled` variant and classes * chore: update styles for `input` package - Update styles for the `required` variant - Update `input-empty` variant config in `tailwind.config.ts`
halvaradop · Oct 28, 2024 · e6fe3fa · e6fe3fa
1 parent b17e41f
commit e6fe3fa
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 7 deletions.
diff --git a/packages/ui-input/src/index.tsx b/packages/ui-input/src/index.tsx
@@ -5,13 +5,14 @@ import { merge } from "@halvaradop/ui-core"
 
 export type InputProps<T extends ArgsFunction> = Omit<ComponentProps<"input">, "size"> & VariantProps<T>
 
-export const inputVariants = cva("text-slate-600 border focus-within:outline-none ", {
+export const inputVariants = cva("text-slate-600 border focus-within:outline-none disabled:cursor-not-allowed disabled:text-gray-400 disabled:border-gray-300 disabled:bg-gray-100", {
     variants: {
         variant: {
             base: "caret-slate-600 border-gray-300",
             outline: "focus-within:ring-1 focus-within:border-slate-700 focus-within:ring-slate-700",
             required:
-                "focus-within:ring-1 focus-within:border-slate-700 focus-within:ring-slate-700 usinvalid:text-rose-300 usinvalid:placeholder-rose-400  usinvalid:border-rose-400 usinvalid:focus-within:ring-rose-400 usvalid:text-green-400 usvalid:border-green-400 usvalid:focus-within:ring-green-400 input-empty:border-slate-700 input-empty:focus-within:ring-slate-700 input-empty:caret-slate-600",
+                "focus-within:ring-1 focus-within:border-slate-700 focus-within:ring-slate-700 usinvalid:text-rose-300 usinvalid:placeholder-rose-400  usinvalid:border-rose-400 usinvalid:focus-within:ring-rose-400 usvalid:text-green-400 usvalid:border-green-400 usvalid:focus-within:ring-green-400 input-empty:usinvalid:border-inherit input-empty:usinvalid:placeholder-slate-300 input-empty:usinvalid:caret-slate-600 input-empty:usinvalid:focus-within:border-slate-700 input-empty:usinvalid:focus-within:ring-slate-700",
+            disabled: "cursor-not-allowed bg-gray-100 text-gray-400 border-gray-300",
         },
         size: {
             sm: "h-8 indent-2 text-sm rounded-md",

diff --git a/packages/ui-input/src/input.stories.tsx b/packages/ui-input/src/input.stories.tsx
@@ -71,4 +71,19 @@ export const Required: Story = {
     },
 }
 
+export const Disabled: Story = {
+    args: {
+        disabled: true,
+        placeholder: "Disabled input",
+    },
+}
+
+export const DisabledVariant: Story = {
+    args: {
+        variant: "disabled",
+        placeholder: "Disabled variant input",
+        disabled: true,
+    },
+}
+
 export default meta
diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -18,11 +18,8 @@ const config: Config = {
         plugin(({ addVariant }) => {
             addVariant("usinvalid", "&:user-invalid")
             addVariant("usvalid", "&:user-valid")
-            addVariant(
-                "input-empty",
-                "&:is(:usvalid:placeholder-shown, :usinvalid:placeholder-shown, :placeholder-shown)"
-            ),
-                addVariant("peer-usvalid", ".peer:user-invalid ~ &")
+            addVariant("input-empty", "&:is(:usinvalid:placeholder-shown, :placeholder-shown)")
+            addVariant("peer-usvalid", ".peer:user-invalid ~ &")
             addVariant("peer-usvalid-empty", ".peer:user-invalid:placeholder-shown ~ &")
         }),
     ],