From 84ac1d0e55b1dff57a7c03ee77b7a71a79297a27 Mon Sep 17 00:00:00 2001 From: Maharshi Alpesh Date: Sun, 15 Sep 2024 23:16:11 +0530 Subject: [PATCH] feat(input-otp): adding styles to input otp --- .../input-otp/src/input-otp-segment.tsx | 19 +- .../input-otp/stories/input-otp.stories.tsx | 2 +- .../core/theme/src/components/input-otp.ts | 325 ++++++++++++++++-- 3 files changed, 320 insertions(+), 26 deletions(-) diff --git a/packages/components/input-otp/src/input-otp-segment.tsx b/packages/components/input-otp/src/input-otp-segment.tsx index 2503923021..b41b95498e 100644 --- a/packages/components/input-otp/src/input-otp-segment.tsx +++ b/packages/components/input-otp/src/input-otp-segment.tsx @@ -30,18 +30,27 @@ export const InputOtpSegment = ({ isInputFocused, [value, isInputFocused], ); - - const displayValue = useMemo( - () => (value.length > accessorIndex ? value[accessorIndex] : null), - [value], - ); + const hasValue = useMemo(() => value.length > accessorIndex, [value, accessorIndex]); const segmentStyles = clsx(className, classNames?.segment); + const caretStyles = clsx(className, classNames?.caret); + + const displayValue = useMemo(() => { + if (hasValue) { + return value[accessorIndex]; + } + if (isActive) { + return
; + } + + return null; + }, [hasValue, value, isActive]); return (
{displayValue} diff --git a/packages/components/input-otp/stories/input-otp.stories.tsx b/packages/components/input-otp/stories/input-otp.stories.tsx index 1257008dff..c013fc8242 100644 --- a/packages/components/input-otp/stories/input-otp.stories.tsx +++ b/packages/components/input-otp/stories/input-otp.stories.tsx @@ -10,7 +10,7 @@ export default { argTypes: { variant: { control: {type: "select"}, - options: ["flat"], + options: ["flat", "faded", "bordered", "underlined"], }, color: { control: {type: "select"}, diff --git a/packages/core/theme/src/components/input-otp.ts b/packages/core/theme/src/components/input-otp.ts index b8e74dca12..eb37a33cb3 100644 --- a/packages/core/theme/src/components/input-otp.ts +++ b/packages/core/theme/src/components/input-otp.ts @@ -14,7 +14,7 @@ const inputOtp = tv({ "bg-transparent", "text-transparent", ], - segmentWrapper: ["inline-flex", "bg-white", "dark:bg-black"], + segmentWrapper: ["inline-flex", "gap-x-1"], segment: [ "h-10", "w-10", @@ -22,36 +22,321 @@ const inputOtp = tv({ "flex", "justify-center", "items-center", - "border", - "bg-inherit", - "data-[active=true]:outline", - "data-[active=true]:outline-2", - "data-[active=true]:outline-blue-300", - "data-[active=true]:border-none", - "data-[active=true]:scale-105", + "border-default-200", + "data-[active=true]:border-default-400", + "data-[active=true]:scale-110", ], - helperWrapper: [], - errorMessage: [], + caret: [ + "animate-[appearance-in_1s_infinite]", + "font-extralight", + "h-full", + "w-full", + "flex", + "justify-center", + "items-center", + "text-2xl", + "h-[50%]", + "w-px", + "bg-white", + ], + helperWrapper: ["text-xs", "mt-0.5", "font-extralight", ""], + errorMessage: ["text-red-600"], description: [], }, variants: { variant: { flat: { - base: [], - segment: ["bg-default-100", "dark:bg-default-100"], - segmentWrapper: ["gap-x-1"], + segment: ["border-none", "bg-default-100", "data-[active=true]:bg-default-200"], + }, + faded: { + segment: ["bg-default-100", "border-1", "data-[active=true]:border-2"], + }, + bordered: { + segment: ["border-1", "data-[active=true]:border-2"], + }, + underlined: { + segment: ["border-b-1", "data-[active=true]:border-b-2", "data-[active=true]:scale-100"], }, - faded: {}, - bordered: {}, - underlined: {}, }, disableAnimation: { - true: {}, - false: {}, + true: { + segment: "transition-none", + }, + false: { + segment: "transition duration-150", + }, }, + radius: { + none: { + segment: "rounded-none", + }, + sm: { + segment: "rounded-small", + }, + md: { + segment: "rounded-medium", + }, + lg: { + segment: "rounded-large", + }, + full: { + segment: "rounded-full", + }, + }, + color: { + default: {}, + primary: {}, + secondary: {}, + success: {}, + warning: {}, + danger: {}, + }, + size: { + sm: { + segment: "h-8 min-h-8 w-8 min-w-8 text-small", + }, + md: { + segment: "h-10 min-h-10 w-10 min-w-10 text-small", + }, + lg: { + segment: "h-12 min-h-12 w-12 min-w-12 text-medium", + }, + }, + }, + defaultVariants: { + variant: "flat", + color: "default", + size: "md", }, - defaultVariants: {}, - compoundVariants: [], + compoundVariants: [ + // flat & color + { + variant: "flat", + color: "default", + class: { + segment: "data-[has-value=true]:text-default-foreground", + }, + }, + { + variant: "flat", + color: "primary", + class: { + segment: ["bg-primary-50", "data-[active=true]:bg-primary-100", "text-primary"], + caret: ["bg-primary"], + }, + }, + { + variant: "flat", + color: "secondary", + class: { + segment: ["bg-secondary-50", "data-[active=true]:bg-secondary-100", "text-secondary"], + caret: ["bg-secondary"], + }, + }, + { + variant: "flat", + color: "success", + class: { + segment: ["bg-success-50", "data-[active=true]:bg-success-100", "text-success"], + caret: ["bg-success"], + }, + }, + { + variant: "flat", + color: "warning", + class: { + segment: ["bg-warning-50", "data-[active=true]:bg-warning-100", "text-warning"], + caret: ["bg-warning"], + }, + }, + { + variant: "flat", + color: "danger", + class: { + segment: ["bg-danger-50", "data-[active=true]:bg-danger-100", "text-danger"], + caret: ["bg-danger"], + }, + }, + // faded & color + { + variant: "faded", + color: "default", + class: { + segment: "data-[has-value=true]:text-default-foreground", + }, + }, + { + variant: "faded", + color: "primary", + class: { + segment: [ + "bg-primary-50", + "text-primary", + "border-1", + "border-primary-200", + "data-[active=true]:border-2", + "data-[active=true]:border-primary-400", + ], + caret: ["bg-primary"], + }, + }, + { + variant: "faded", + color: "secondary", + class: { + segment: [ + "bg-secondary-50", + "text-secondary", + "border-1", + "border-secondary-200", + "data-[active=true]:border-2", + "data-[active=true]:border-secondary-400", + ], + caret: ["bg-secondary"], + }, + }, + { + variant: "faded", + color: "success", + class: { + segment: [ + "bg-success-50", + "text-success", + "border-1", + "border-success-200", + "data-[active=true]:border-2", + "data-[active=true]:border-success-400", + ], + caret: ["bg-success"], + }, + }, + { + variant: "faded", + color: "warning", + class: { + segment: [ + "bg-warning-50", + "text-warning", + "border-1", + "border-warning-200", + "data-[active=true]:border-2", + "data-[active=true]:border-warning-400", + ], + caret: ["bg-warning"], + }, + }, + { + variant: "faded", + color: "danger", + class: { + segment: [ + "bg-danger-50", + "text-danger", + "border-1", + "border-danger-200", + "data-[active=true]:border-2", + "data-[active=true]:border-danger-400", + ], + caret: ["bg-danger"], + }, + }, + // bordered & color + { + variant: "bordered", + color: "default", + class: { + segment: "data-[has-value=true]:text-default-foreground", + }, + }, + { + variant: "bordered", + color: "primary", + class: { + segment: ["data-[active=true]:border-primary-400"], + caret: ["bg-primary"], + }, + }, + { + variant: "bordered", + color: "secondary", + class: { + segment: ["data-[active=true]:border-secondary-400"], + caret: ["bg-secondary"], + }, + }, + { + variant: "bordered", + color: "success", + class: { + segment: ["data-[active=true]:border-success-400"], + caret: ["bg-success"], + }, + }, + { + variant: "bordered", + color: "warning", + class: { + segment: ["data-[active=true]:border-warning-400"], + caret: ["bg-warning"], + }, + }, + { + variant: "bordered", + color: "danger", + class: { + segment: ["data-[active=true]:border-danger-400"], + caret: ["bg-danger"], + }, + }, + // underlined & color + { + variant: "underlined", + color: "default", + class: { + segment: "data-[has-value=true]:text-default-foreground", + }, + }, + { + variant: "underlined", + color: "primary", + class: { + segment: ["data-[active=true]:border-primary-400"], + caret: ["bg-primary"], + }, + }, + { + variant: "underlined", + color: "secondary", + class: { + segment: ["data-[active=true]:border-secondary-400"], + caret: ["bg-secondary"], + }, + }, + { + variant: "underlined", + color: "success", + class: { + segment: ["data-[active=true]:border-success-400"], + caret: ["bg-success"], + }, + }, + { + variant: "underlined", + color: "warning", + class: { + segment: ["data-[active=true]:border-warning-400"], + caret: ["bg-warning"], + }, + }, + { + variant: "underlined", + color: "danger", + class: { + segment: ["data-[active=true]:border-danger-400"], + caret: ["bg-danger"], + }, + }, + ], }); export type InputOtpVariantProps = VariantProps;