Skip to content

Commit

Permalink
feat(input-otp): adding styles to input otp
Browse files Browse the repository at this point in the history
  • Loading branch information
Maharshi Alpesh authored and Maharshi Alpesh committed Sep 15, 2024
1 parent 9d0a124 commit 84ac1d0
Show file tree
Hide file tree
Showing 3 changed files with 320 additions and 26 deletions.
19 changes: 14 additions & 5 deletions packages/components/input-otp/src/input-otp-segment.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 <div className={clsx(slots.caret?.({class: caretStyles}))} />;
}

return null;
}, [hasValue, value, isActive]);

return (
<div
className={clsx(slots.segment?.({class: segmentStyles}))}
data-active={dataAttr(isActive)}
data-has-value={dataAttr(hasValue)}
data-slot="segment"
>
{displayValue}
Expand Down
2 changes: 1 addition & 1 deletion packages/components/input-otp/stories/input-otp.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ export default {
argTypes: {
variant: {
control: {type: "select"},
options: ["flat"],
options: ["flat", "faded", "bordered", "underlined"],
},
color: {
control: {type: "select"},
Expand Down
325 changes: 305 additions & 20 deletions packages/core/theme/src/components/input-otp.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,44 +14,329 @@ 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",
"font-semibold",
"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<typeof inputOtp>;
Expand Down

0 comments on commit 84ac1d0

Please sign in to comment.