diff --git a/package.json b/package.json index a1cedaf..d82cdd5 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "bbodek-ui", - "version": "0.0.259", + "version": "0.0.260", "type": "module", "author": "Bbodek", "license": "MIT", diff --git a/src/core/components/Input/InputBase/index.tsx b/src/core/components/Input/InputBase/index.tsx index 0d8f0d3..f28f191 100644 --- a/src/core/components/Input/InputBase/index.tsx +++ b/src/core/components/Input/InputBase/index.tsx @@ -25,6 +25,7 @@ const InputBase = forwardRef( disabled = false, readOnly = false, required = false, + badge, sub, ...props }: InputBaseProps, @@ -33,7 +34,44 @@ const InputBase = forwardRef( const Component: React.ElementType = Element || 'div'; const isDisabled = readOnly || disabled; const isVisibleEndComponent = !isDisabled && endComponent; - const hasInputLabel = label || sub; + const hasInputLabel = badge || label || sub; + + const labelRenderer = () => { + if (badge && label) { + return ( +
+
{badge}
+
+ {label && ( + + )} + {sub && sub} +
+
+ ); + } + + return ( +
+ {label && ( + + )} + {sub && sub} +
+ ); + }; return ( - {hasInputLabel && ( -
- {label && ( - - )} - {sub && sub} -
- )} + {hasInputLabel && labelRenderer()}
inputComponent: React.ReactNode; endComponent?: React.ReactNode; borderColor?: ThemeColors; + badge?: React.ReactNode; error?: boolean; readOnly?: boolean; disabled?: boolean; diff --git a/src/core/components/Input/InputDatePicker/index.tsx b/src/core/components/Input/InputDatePicker/index.tsx index d432d30..0e85ef1 100644 --- a/src/core/components/Input/InputDatePicker/index.tsx +++ b/src/core/components/Input/InputDatePicker/index.tsx @@ -28,6 +28,7 @@ const InputDatePicker = ({ className, inputClassName, afterAllDate, + badge, label, dateLabel, closeButtonText, @@ -113,6 +114,7 @@ const InputDatePicker = ({ feedbackColor={feedbackColor} disabled={disabled} readOnly={readOnly} + badge={badge} sub={sub} inputComponent={ { inputClassName?: string; label?: string; diff --git a/src/core/components/Input/InputPassword/index.tsx b/src/core/components/Input/InputPassword/index.tsx index e053737..0239ead 100644 --- a/src/core/components/Input/InputPassword/index.tsx +++ b/src/core/components/Input/InputPassword/index.tsx @@ -13,6 +13,7 @@ const InputPassword = forwardRef( label = '비밀번호', regCallback, feedback, + badge, ...props }: InputPasswordProps, ref: React.ComponentPropsWithRef<'input'>['ref'], @@ -58,6 +59,7 @@ const InputPassword = forwardRef( required={required} feedback={feedback} labelColor={labelColor} + badge={badge} sub={sub} inputComponent={ , Pick {} diff --git a/src/core/components/Input/InputSearch/index.tsx b/src/core/components/Input/InputSearch/index.tsx index 4c5dbc6..04aee03 100644 --- a/src/core/components/Input/InputSearch/index.tsx +++ b/src/core/components/Input/InputSearch/index.tsx @@ -13,6 +13,7 @@ const InputSearch = ({ feedback, rounded, rootElement, + badge, ...props }: InputSearchProps & React.ComponentPropsWithoutRef<'input'>) => { const id = useId(); @@ -77,6 +78,7 @@ const InputSearch = ({ readOnly={readOnly} disabled={disabled} rootClassName={rootClassName} + badge={badge} inputRootClassName={clsx( 'flex items-center overflow-hidden border border-gray-02 bg-white py-2 text-body-02-medium', INPUT_SEARCH_ROUNDED[rounded], diff --git a/src/core/components/Input/InputSearch/types/index.ts b/src/core/components/Input/InputSearch/types/index.ts index fa2afd9..71581d6 100644 --- a/src/core/components/Input/InputSearch/types/index.ts +++ b/src/core/components/Input/InputSearch/types/index.ts @@ -9,7 +9,13 @@ export interface InputSearchProps >, Pick< InputBaseProps, - 'feedback' | 'rootClassName' | 'error' | 'readOnly' | 'disabled' | 'sub' + | 'feedback' + | 'rootClassName' + | 'error' + | 'readOnly' + | 'disabled' + | 'sub' + | 'badge' >, Pick { rootElement?: T; diff --git a/src/core/components/Input/InputSelect/index.tsx b/src/core/components/Input/InputSelect/index.tsx index 79ac771..d2974bf 100644 --- a/src/core/components/Input/InputSelect/index.tsx +++ b/src/core/components/Input/InputSelect/index.tsx @@ -6,7 +6,7 @@ import { InputSelectProps } from './types'; const InputSelect = forwardRef( ( - { options, placeholder, value, ...props }: InputSelectProps, + { options, placeholder, value, badge, ...props }: InputSelectProps, ref: React.Ref, ) => { const id = useId(); @@ -35,6 +35,7 @@ const InputSelect = forwardRef( inputRootClassName={'py-0 h-[3.75rem]'} error={error} sub={sub} + badge={badge} inputComponent={