fix(theme/recipes): add NumberInput disabled styles (#432)

cschroeter · Sep 14, 2024 · 53235fb · 53235fb
1 parent 4327ade
commit 53235fb
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 0 deletions.
diff --git a/components/react/src/components/stories/number-input.stories.tsx b/components/react/src/components/stories/number-input.stories.tsx
@@ -14,3 +14,4 @@ export const MinAndMax = () => (
     Max is 5 and Min is 0
   </NumberInput>
 )
+export const Disabled = () => <NumberInput disabled>Disabled</NumberInput>
diff --git a/packages/panda/src/theme/recipes/number-input.ts b/packages/panda/src/theme/recipes/number-input.ts
@@ -56,13 +56,20 @@ export const numberInput = defineSlotRecipe({
         borderColor: 'colorPalette.default',
         boxShadow: '0 0 0 1px var(--colors-color-palette-default)',
       },
+      _disabled: {
+        opacity: 0.4,
+        cursor: 'not-allowed',
+      },
     },
     input: {
       background: 'transparent',
       border: 'none',
       gridRow: '2',
       outline: 'none',
       width: 'full',
+      _disabled: {
+        cursor: 'not-allowed',
+      },
     },
     label: {
       color: 'fg.default',