diff --git a/docs/data/base/components/number-input/NumberInputBasic/css/index.js b/docs/data/base/components/number-input/NumberInputBasic/css/index.js index aa79a9bee7f62f..3d92189881e739 100644 --- a/docs/data/base/components/number-input/NumberInputBasic/css/index.js +++ b/docs/data/base/components/number-input/NumberInputBasic/css/index.js @@ -11,9 +11,15 @@ export default function NumberInputBasic() { - - - \ No newline at end of file diff --git a/docs/data/base/components/number-input/NumberInputBasic/tailwind/index.js b/docs/data/base/components/number-input/NumberInputBasic/tailwind/index.js index 42d8eb3e8465be..154538e99c5363 100644 --- a/docs/data/base/components/number-input/NumberInputBasic/tailwind/index.js +++ b/docs/data/base/components/number-input/NumberInputBasic/tailwind/index.js @@ -1,48 +1,99 @@ import * as React from 'react'; -import { Unstable_NumberInput as NumberInput } from '@mui/base/Unstable_NumberInput'; +import PropTypes from 'prop-types'; +import { Unstable_NumberInput as BaseNumberInput } from '@mui/base/Unstable_NumberInput'; import clsx from 'clsx'; -const CustomNumberInput = React.forwardRef(function CustomNumberInput(props, ref) { +export default function NumberInputBasic() { + const [value, setValue] = React.useState(); return ( setValue(val)} + /> + ); +} + +const resolveSlotProps = (fn, args) => (typeof fn === 'function' ? fn(args) : fn); + +const NumberInput = React.forwardRef(function NumberInput(props, ref) { + return ( + ({ - className: clsx( - 'grid grid-cols-[1fr_19px] grid-rows-2 overflow-hidden font-sans rounded-lg text-slate-900 dark:text-slate-300 border border-solid bg-white dark:bg-slate-900 hover:border-violet-400 dark:hover:border-violet-400 focus-visible:outline-0 ', - ownerState.focused - ? 'border-violet-400 dark:border-violet-400 shadow-lg shadow-outline-purple dark:shadow-outline-purple' - : 'border-slate-300 dark:border-slate-600 shadow-md shadow-slate-100 dark:shadow-slate-900', - ), - }), - input: { - className: - 'col-start-1 col-end-2 row-start-1 row-end-3 text-sm font-sans leading-normal text-slate-900 bg-inherit border-0 rounded-[inherit] dark:text-slate-300 px-3 py-2 outline-0 focus-visible:outline-0 focus-visible:outline-none', + root: (ownerState) => { + const resolvedSlotProps = resolveSlotProps( + props.slotProps?.root, + ownerState, + ); + return { + ...resolvedSlotProps, + className: clsx( + 'grid grid-cols-[1fr_19px] grid-rows-2 overflow-hidden font-sans rounded-lg text-slate-900 dark:text-slate-300 border border-solid bg-white dark:bg-slate-900 hover:border-violet-400 dark:hover:border-violet-400 focus-visible:outline-0 ', + ownerState.focused + ? 'border-violet-400 dark:border-violet-400 shadow-lg shadow-outline-purple dark:shadow-outline-purple' + : 'border-slate-300 dark:border-slate-600 shadow-md shadow-slate-100 dark:shadow-slate-900', + resolvedSlotProps?.className, + ), + }; }, - incrementButton: { - children: '▴', - className: - 'font-[system-ui] flex flex-row flex-nowrap justify-center items-center appearance-none p-0 w-[19px] h-[19px] text-sm box-border leading-[1.2] border-0 bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-300 transition-all duration-[120ms] hover:cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-800 border-slate-300 dark:border-slate-600 col-start-2 col-end-3 row-start-1 row-end-2', + input: (ownerState) => { + const resolvedSlotProps = resolveSlotProps( + props.slotProps?.input, + ownerState, + ); + return { + ...resolvedSlotProps, + className: clsx( + 'col-start-1 col-end-2 row-start-1 row-end-3 text-sm font-sans leading-normal text-slate-900 bg-inherit border-0 rounded-[inherit] dark:text-slate-300 px-3 py-2 outline-0 focus-visible:outline-0 focus-visible:outline-none', + resolvedSlotProps?.className, + ), + }; }, - decrementButton: { - children: '▾', - className: - 'font-[system-ui] flex flex-row flex-nowrap justify-center items-center appearance-none p-0 w-[19px] h-[19px] text-sm box-border leading-[1.2] border-0 bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-300 transition-all duration-[120ms] hover:cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-800 border-slate-300 dark:border-slate-600 col-start-2 col-end-3 row-start-2 row-end-3', + incrementButton: (ownerState) => { + const resolvedSlotProps = resolveSlotProps( + props.slotProps?.incrementButton, + ownerState, + ); + return { + ...resolvedSlotProps, + children: '▴', + className: clsx( + 'font-[system-ui] flex flex-row flex-nowrap justify-center items-center appearance-none p-0 w-[19px] h-[19px] text-sm box-border leading-[1.2] border-0 bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-300 transition-all duration-[120ms] hover:cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-800 border-slate-300 dark:border-slate-600 col-start-2 col-end-3 row-start-1 row-end-2', + resolvedSlotProps?.className, + ), + }; + }, + decrementButton: (ownerState) => { + const resolvedSlotProps = resolveSlotProps( + props.slotProps?.decrementButton, + ownerState, + ); + return { + ...resolvedSlotProps, + children: '▾', + className: clsx( + 'font-[system-ui] flex flex-row flex-nowrap justify-center items-center appearance-none p-0 w-[19px] h-[19px] text-sm box-border leading-[1.2] border-0 bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-300 transition-all duration-[120ms] hover:cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-800 border-slate-300 dark:border-slate-600 col-start-2 col-end-3 row-start-2 row-end-3', + resolvedSlotProps?.className, + ), + }; }, }} - {...props} - ref={ref} /> ); }); -export default function NumberInputBasic() { - const [value, setValue] = React.useState(); - return ( - setValue(val)} - /> - ); -} +NumberInput.propTypes = { + /** + * The props used for each slot inside the NumberInput. + * @default {} + */ + slotProps: PropTypes.shape({ + decrementButton: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), + incrementButton: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), + input: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), + root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), + }), +}; diff --git a/docs/data/base/components/number-input/NumberInputBasic/tailwind/index.tsx b/docs/data/base/components/number-input/NumberInputBasic/tailwind/index.tsx index ec326a946793bb..082b0b257505be 100644 --- a/docs/data/base/components/number-input/NumberInputBasic/tailwind/index.tsx +++ b/docs/data/base/components/number-input/NumberInputBasic/tailwind/index.tsx @@ -1,55 +1,93 @@ import * as React from 'react'; import { - Unstable_NumberInput as NumberInput, + Unstable_NumberInput as BaseNumberInput, NumberInputProps, NumberInputOwnerState, } from '@mui/base/Unstable_NumberInput'; import clsx from 'clsx'; -const CustomNumberInput = React.forwardRef(function CustomNumberInput( +export default function NumberInputBasic() { + const [value, setValue] = React.useState(); + return ( + setValue(val)} + /> + ); +} + +const resolveSlotProps = (fn: any, args: any) => + typeof fn === 'function' ? fn(args) : fn; + +const NumberInput = React.forwardRef(function NumberInput( props: NumberInputProps, ref: React.ForwardedRef, ) { return ( - ({ - className: clsx( - 'grid grid-cols-[1fr_19px] grid-rows-2 overflow-hidden font-sans rounded-lg text-slate-900 dark:text-slate-300 border border-solid bg-white dark:bg-slate-900 hover:border-violet-400 dark:hover:border-violet-400 focus-visible:outline-0 ', - ownerState.focused - ? 'border-violet-400 dark:border-violet-400 shadow-lg shadow-outline-purple dark:shadow-outline-purple' - : 'border-slate-300 dark:border-slate-600 shadow-md shadow-slate-100 dark:shadow-slate-900', - ), - }), - input: { - className: - 'col-start-1 col-end-2 row-start-1 row-end-3 text-sm font-sans leading-normal text-slate-900 bg-inherit border-0 rounded-[inherit] dark:text-slate-300 px-3 py-2 outline-0 focus-visible:outline-0 focus-visible:outline-none', + root: (ownerState: NumberInputOwnerState) => { + const resolvedSlotProps = resolveSlotProps( + props.slotProps?.root, + ownerState, + ); + return { + ...resolvedSlotProps, + className: clsx( + 'grid grid-cols-[1fr_19px] grid-rows-2 overflow-hidden font-sans rounded-lg text-slate-900 dark:text-slate-300 border border-solid bg-white dark:bg-slate-900 hover:border-violet-400 dark:hover:border-violet-400 focus-visible:outline-0 ', + ownerState.focused + ? 'border-violet-400 dark:border-violet-400 shadow-lg shadow-outline-purple dark:shadow-outline-purple' + : 'border-slate-300 dark:border-slate-600 shadow-md shadow-slate-100 dark:shadow-slate-900', + resolvedSlotProps?.className, + ), + }; + }, + input: (ownerState: NumberInputOwnerState) => { + const resolvedSlotProps = resolveSlotProps( + props.slotProps?.input, + ownerState, + ); + return { + ...resolvedSlotProps, + className: clsx( + 'col-start-1 col-end-2 row-start-1 row-end-3 text-sm font-sans leading-normal text-slate-900 bg-inherit border-0 rounded-[inherit] dark:text-slate-300 px-3 py-2 outline-0 focus-visible:outline-0 focus-visible:outline-none', + resolvedSlotProps?.className, + ), + }; }, - incrementButton: { - children: '▴', - className: - 'font-[system-ui] flex flex-row flex-nowrap justify-center items-center appearance-none p-0 w-[19px] h-[19px] text-sm box-border leading-[1.2] border-0 bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-300 transition-all duration-[120ms] hover:cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-800 border-slate-300 dark:border-slate-600 col-start-2 col-end-3 row-start-1 row-end-2', + incrementButton: (ownerState: NumberInputOwnerState) => { + const resolvedSlotProps = resolveSlotProps( + props.slotProps?.incrementButton, + ownerState, + ); + return { + ...resolvedSlotProps, + children: '▴', + className: clsx( + 'font-[system-ui] flex flex-row flex-nowrap justify-center items-center appearance-none p-0 w-[19px] h-[19px] text-sm box-border leading-[1.2] border-0 bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-300 transition-all duration-[120ms] hover:cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-800 border-slate-300 dark:border-slate-600 col-start-2 col-end-3 row-start-1 row-end-2', + resolvedSlotProps?.className, + ), + }; }, - decrementButton: { - children: '▾', - className: - 'font-[system-ui] flex flex-row flex-nowrap justify-center items-center appearance-none p-0 w-[19px] h-[19px] text-sm box-border leading-[1.2] border-0 bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-300 transition-all duration-[120ms] hover:cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-800 border-slate-300 dark:border-slate-600 col-start-2 col-end-3 row-start-2 row-end-3', + decrementButton: (ownerState: NumberInputOwnerState) => { + const resolvedSlotProps = resolveSlotProps( + props.slotProps?.decrementButton, + ownerState, + ); + return { + ...resolvedSlotProps, + children: '▾', + className: clsx( + 'font-[system-ui] flex flex-row flex-nowrap justify-center items-center appearance-none p-0 w-[19px] h-[19px] text-sm box-border leading-[1.2] border-0 bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-300 transition-all duration-[120ms] hover:cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-800 border-slate-300 dark:border-slate-600 col-start-2 col-end-3 row-start-2 row-end-3', + resolvedSlotProps?.className, + ), + }; }, }} - {...props} - ref={ref} /> ); }); - -export default function NumberInputBasic() { - const [value, setValue] = React.useState(); - return ( - setValue(val)} - /> - ); -} diff --git a/docs/data/base/components/number-input/NumberInputBasic/tailwind/index.tsx.preview b/docs/data/base/components/number-input/NumberInputBasic/tailwind/index.tsx.preview index a2ecd626c6645c..387ab94b94158e 100644 --- a/docs/data/base/components/number-input/NumberInputBasic/tailwind/index.tsx.preview +++ b/docs/data/base/components/number-input/NumberInputBasic/tailwind/index.tsx.preview @@ -1,4 +1,4 @@ - + ▾, + }, + incrementButton: { + className: 'CustomNumberInput-button CustomNumberInput-incrementButton', + children: ▴, + }, + }} + aria-label="Demo number input" + placeholder="Type a number…" + /> + + + ); +} + +const cyan = { + 50: '#E9F8FC', + 100: '#BDEBF4', + 200: '#99D8E5', + 300: '#66BACC', + 400: '#1F94AD', + 500: '#0D5463', + 600: '#094855', + 700: '#063C47', + 800: '#043039', + 900: '#022127', +}; + +const grey = { + 50: '#F3F6F9', + 100: '#E7EBF0', + 200: '#E0E3E7', + 300: '#CDD2D7', + 400: '#B2BAC2', + 500: '#A0AAB4', + 600: '#6F7E8C', + 700: '#3E5060', + 800: '#2D3843', + 900: '#1A2027', +}; + +function useIsDarkMode() { + const theme = useTheme(); + return theme.palette.mode === 'dark'; +} + +function Styles() { + // Replace this with your app logic for determining dark mode + const isDarkMode = useIsDarkMode(); + + return ( + + ); +} diff --git a/docs/data/base/components/number-input/NumberInputIntroduction/css/index.tsx b/docs/data/base/components/number-input/NumberInputIntroduction/css/index.tsx new file mode 100644 index 00000000000000..e277fbecc169b8 --- /dev/null +++ b/docs/data/base/components/number-input/NumberInputIntroduction/css/index.tsx @@ -0,0 +1,157 @@ +import * as React from 'react'; +import { + Unstable_NumberInput as NumberInput, + numberInputClasses, +} from '@mui/base/Unstable_NumberInput'; +import { useTheme } from '@mui/system'; + +export default function NumberInputIntroduction() { + return ( + + ▾, + }, + incrementButton: { + className: 'CustomNumberInput-button CustomNumberInput-incrementButton', + children: ▴, + }, + }} + aria-label="Demo number input" + placeholder="Type a number…" + /> + + + ); +} + +const cyan = { + 50: '#E9F8FC', + 100: '#BDEBF4', + 200: '#99D8E5', + 300: '#66BACC', + 400: '#1F94AD', + 500: '#0D5463', + 600: '#094855', + 700: '#063C47', + 800: '#043039', + 900: '#022127', +}; + +const grey = { + 50: '#F3F6F9', + 100: '#E7EBF0', + 200: '#E0E3E7', + 300: '#CDD2D7', + 400: '#B2BAC2', + 500: '#A0AAB4', + 600: '#6F7E8C', + 700: '#3E5060', + 800: '#2D3843', + 900: '#1A2027', +}; + +function useIsDarkMode() { + const theme = useTheme(); + return theme.palette.mode === 'dark'; +} + +function Styles() { + // Replace this with your app logic for determining dark mode + const isDarkMode = useIsDarkMode(); + + return ( + + ); +} diff --git a/docs/data/base/components/number-input/NumberInputIntroduction.js b/docs/data/base/components/number-input/NumberInputIntroduction/system/index.js similarity index 100% rename from docs/data/base/components/number-input/NumberInputIntroduction.js rename to docs/data/base/components/number-input/NumberInputIntroduction/system/index.js diff --git a/docs/data/base/components/number-input/NumberInputIntroduction.tsx b/docs/data/base/components/number-input/NumberInputIntroduction/system/index.tsx similarity index 100% rename from docs/data/base/components/number-input/NumberInputIntroduction.tsx rename to docs/data/base/components/number-input/NumberInputIntroduction/system/index.tsx diff --git a/docs/data/base/components/number-input/NumberInputIntroduction.tsx.preview b/docs/data/base/components/number-input/NumberInputIntroduction/system/index.tsx.preview similarity index 100% rename from docs/data/base/components/number-input/NumberInputIntroduction.tsx.preview rename to docs/data/base/components/number-input/NumberInputIntroduction/system/index.tsx.preview diff --git a/docs/data/base/components/number-input/NumberInputIntroduction/tailwind/index.js b/docs/data/base/components/number-input/NumberInputIntroduction/tailwind/index.js new file mode 100644 index 00000000000000..65dbad2750b421 --- /dev/null +++ b/docs/data/base/components/number-input/NumberInputIntroduction/tailwind/index.js @@ -0,0 +1,99 @@ +import * as React from 'react'; +import PropTypes from 'prop-types'; +import { Unstable_NumberInput as BaseNumberInput } from '@mui/base/Unstable_NumberInput'; +import clsx from 'clsx'; + +export default function NumberInputIntroduction() { + const [value, setValue] = React.useState(); + return ( + setValue(val)} + /> + ); +} + +const resolveSlotProps = (fn, args) => (typeof fn === 'function' ? fn(args) : fn); + +const NumberInput = React.forwardRef(function NumberInput(props, ref) { + return ( + { + const resolvedSlotProps = resolveSlotProps( + props.slotProps?.root, + ownerState, + ); + return { + ...resolvedSlotProps, + className: clsx( + 'grid grid-cols-[1fr_19px] grid-rows-2 overflow-hidden font-sans rounded-lg text-slate-900 dark:text-slate-300 border border-solid bg-white dark:bg-slate-900 hover:border-violet-400 dark:hover:border-violet-400 focus-visible:outline-0 ', + ownerState.focused + ? 'border-violet-400 dark:border-violet-400 shadow-lg shadow-outline-purple dark:shadow-outline-purple' + : 'border-slate-300 dark:border-slate-600 shadow-md shadow-slate-100 dark:shadow-slate-900', + resolvedSlotProps?.className, + ), + }; + }, + input: (ownerState) => { + const resolvedSlotProps = resolveSlotProps( + props.slotProps?.input, + ownerState, + ); + return { + ...resolvedSlotProps, + className: clsx( + 'col-start-1 col-end-2 row-start-1 row-end-3 text-sm font-sans leading-normal text-slate-900 bg-inherit border-0 rounded-[inherit] dark:text-slate-300 px-3 py-2 outline-0 focus-visible:outline-0 focus-visible:outline-none', + resolvedSlotProps?.className, + ), + }; + }, + incrementButton: (ownerState) => { + const resolvedSlotProps = resolveSlotProps( + props.slotProps?.incrementButton, + ownerState, + ); + return { + ...resolvedSlotProps, + children: '▴', + className: clsx( + 'font-[system-ui] flex flex-row flex-nowrap justify-center items-center appearance-none p-0 w-[19px] h-[19px] text-sm box-border leading-[1.2] border-0 bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-300 transition-all duration-[120ms] hover:cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-800 border-slate-300 dark:border-slate-600 col-start-2 col-end-3 row-start-1 row-end-2', + resolvedSlotProps?.className, + ), + }; + }, + decrementButton: (ownerState) => { + const resolvedSlotProps = resolveSlotProps( + props.slotProps?.decrementButton, + ownerState, + ); + return { + ...resolvedSlotProps, + children: '▾', + className: clsx( + 'font-[system-ui] flex flex-row flex-nowrap justify-center items-center appearance-none p-0 w-[19px] h-[19px] text-sm box-border leading-[1.2] border-0 bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-300 transition-all duration-[120ms] hover:cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-800 border-slate-300 dark:border-slate-600 col-start-2 col-end-3 row-start-2 row-end-3', + resolvedSlotProps?.className, + ), + }; + }, + }} + /> + ); +}); + +NumberInput.propTypes = { + /** + * The props used for each slot inside the NumberInput. + * @default {} + */ + slotProps: PropTypes.shape({ + decrementButton: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), + incrementButton: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), + input: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), + root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), + }), +}; diff --git a/docs/data/base/components/number-input/NumberInputIntroduction/tailwind/index.tsx b/docs/data/base/components/number-input/NumberInputIntroduction/tailwind/index.tsx new file mode 100644 index 00000000000000..51f54e45ff6700 --- /dev/null +++ b/docs/data/base/components/number-input/NumberInputIntroduction/tailwind/index.tsx @@ -0,0 +1,93 @@ +import * as React from 'react'; +import { + Unstable_NumberInput as BaseNumberInput, + NumberInputProps, + NumberInputOwnerState, +} from '@mui/base/Unstable_NumberInput'; +import clsx from 'clsx'; + +export default function NumberInputIntroduction() { + const [value, setValue] = React.useState(); + return ( + setValue(val)} + /> + ); +} + +const resolveSlotProps = (fn: any, args: any) => + typeof fn === 'function' ? fn(args) : fn; + +const NumberInput = React.forwardRef(function NumberInput( + props: NumberInputProps, + ref: React.ForwardedRef, +) { + return ( + { + const resolvedSlotProps = resolveSlotProps( + props.slotProps?.root, + ownerState, + ); + return { + ...resolvedSlotProps, + className: clsx( + 'grid grid-cols-[1fr_19px] grid-rows-2 overflow-hidden font-sans rounded-lg text-slate-900 dark:text-slate-300 border border-solid bg-white dark:bg-slate-900 hover:border-violet-400 dark:hover:border-violet-400 focus-visible:outline-0 ', + ownerState.focused + ? 'border-violet-400 dark:border-violet-400 shadow-lg shadow-outline-purple dark:shadow-outline-purple' + : 'border-slate-300 dark:border-slate-600 shadow-md shadow-slate-100 dark:shadow-slate-900', + resolvedSlotProps?.className, + ), + }; + }, + input: (ownerState: NumberInputOwnerState) => { + const resolvedSlotProps = resolveSlotProps( + props.slotProps?.input, + ownerState, + ); + return { + ...resolvedSlotProps, + className: clsx( + 'col-start-1 col-end-2 row-start-1 row-end-3 text-sm font-sans leading-normal text-slate-900 bg-inherit border-0 rounded-[inherit] dark:text-slate-300 px-3 py-2 outline-0 focus-visible:outline-0 focus-visible:outline-none', + resolvedSlotProps?.className, + ), + }; + }, + incrementButton: (ownerState: NumberInputOwnerState) => { + const resolvedSlotProps = resolveSlotProps( + props.slotProps?.incrementButton, + ownerState, + ); + return { + ...resolvedSlotProps, + children: '▴', + className: clsx( + 'font-[system-ui] flex flex-row flex-nowrap justify-center items-center appearance-none p-0 w-[19px] h-[19px] text-sm box-border leading-[1.2] border-0 bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-300 transition-all duration-[120ms] hover:cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-800 border-slate-300 dark:border-slate-600 col-start-2 col-end-3 row-start-1 row-end-2', + resolvedSlotProps?.className, + ), + }; + }, + decrementButton: (ownerState: NumberInputOwnerState) => { + const resolvedSlotProps = resolveSlotProps( + props.slotProps?.decrementButton, + ownerState, + ); + return { + ...resolvedSlotProps, + children: '▾', + className: clsx( + 'font-[system-ui] flex flex-row flex-nowrap justify-center items-center appearance-none p-0 w-[19px] h-[19px] text-sm box-border leading-[1.2] border-0 bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-300 transition-all duration-[120ms] hover:cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-800 border-slate-300 dark:border-slate-600 col-start-2 col-end-3 row-start-2 row-end-3', + resolvedSlotProps?.className, + ), + }; + }, + }} + /> + ); +}); diff --git a/docs/data/base/components/number-input/NumberInputIntroduction/tailwind/index.tsx.preview b/docs/data/base/components/number-input/NumberInputIntroduction/tailwind/index.tsx.preview new file mode 100644 index 00000000000000..387ab94b94158e --- /dev/null +++ b/docs/data/base/components/number-input/NumberInputIntroduction/tailwind/index.tsx.preview @@ -0,0 +1,6 @@ + setValue(val)} +/> \ No newline at end of file diff --git a/docs/data/base/components/number-input/number-input.md b/docs/data/base/components/number-input/number-input.md index 35bb09759b7397..d00eacecc62f90 100644 --- a/docs/data/base/components/number-input/number-input.md +++ b/docs/data/base/components/number-input/number-input.md @@ -27,7 +27,7 @@ Base UI's Number Input component is a customizable replacement for the native HT See [_Why the GOV.UK Design System team changed the input type for numbers_](https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/) for a more detailed explanation of the limitations of ``. ::: -{{"demo": "NumberInputIntroduction.js", "defaultCodeOpen": false, "bg": "gradient"}} +{{"demo": "NumberInputIntroduction", "defaultCodeOpen": false, "bg": "gradient"}} ## Component