@schemavaults/ui 0.16.3 → 0.17.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/ui/empty-state/empty-state.d.ts +51 -0
- package/dist/components/ui/empty-state/empty-state.js +76 -0
- package/dist/components/ui/empty-state/empty-state.js.map +1 -0
- package/dist/components/ui/empty-state/index.d.ts +2 -0
- package/dist/components/ui/empty-state/index.js +2 -0
- package/dist/components/ui/empty-state/index.js.map +1 -0
- package/dist/components/ui/index.d.ts +4 -0
- package/dist/components/ui/index.js +2 -0
- package/dist/components/ui/index.js.map +1 -1
- package/dist/components/ui/progress-bar/index.d.ts +1 -1
- package/dist/components/ui/progress-bar/index.js +1 -1
- package/dist/components/ui/progress-bar/index.js.map +1 -1
- package/dist/components/ui/progress-bar/progress-bar.d.ts +7 -2
- package/dist/components/ui/progress-bar/progress-bar.js +21 -2
- package/dist/components/ui/progress-bar/progress-bar.js.map +1 -1
- package/dist/components/ui/secure-password-creation-input/default-password-requirements.d.ts +2 -0
- package/dist/components/ui/secure-password-creation-input/default-password-requirements.js +28 -0
- package/dist/components/ui/secure-password-creation-input/default-password-requirements.js.map +1 -0
- package/dist/components/ui/secure-password-creation-input/index.d.ts +5 -0
- package/dist/components/ui/secure-password-creation-input/index.js +5 -0
- package/dist/components/ui/secure-password-creation-input/index.js.map +1 -0
- package/dist/components/ui/secure-password-creation-input/password-requirement-checklist.d.ts +10 -0
- package/dist/components/ui/secure-password-creation-input/password-requirement-checklist.js +12 -0
- package/dist/components/ui/secure-password-creation-input/password-requirement-checklist.js.map +1 -0
- package/dist/components/ui/secure-password-creation-input/secure-password-creation-input-types.d.ts +46 -0
- package/dist/components/ui/secure-password-creation-input/secure-password-creation-input-types.js +2 -0
- package/dist/components/ui/secure-password-creation-input/secure-password-creation-input-types.js.map +1 -0
- package/dist/components/ui/secure-password-creation-input/secure-password-creation-input.d.ts +7 -0
- package/dist/components/ui/secure-password-creation-input/secure-password-creation-input.js +20 -0
- package/dist/components/ui/secure-password-creation-input/secure-password-creation-input.js.map +1 -0
- package/dist/components/ui/secure-password-creation-input/use-password-validation.d.ts +2 -0
- package/dist/components/ui/secure-password-creation-input/use-password-validation.js +31 -0
- package/dist/components/ui/secure-password-creation-input/use-password-validation.js.map +1 -0
- package/package.json +1 -1
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
import { type VariantProps } from "class-variance-authority";
|
|
2
|
+
import type { HTMLAttributes, ReactElement, Ref } from "react";
|
|
3
|
+
export declare const emptyStateVariantIds: ["default", "muted", "destructive", "warning"];
|
|
4
|
+
export type EmptyStateVariantId = (typeof emptyStateVariantIds)[number];
|
|
5
|
+
export declare const emptyStateSizeIds: ["sm", "md", "lg"];
|
|
6
|
+
export type EmptyStateSizeId = (typeof emptyStateSizeIds)[number];
|
|
7
|
+
declare const emptyStateVariants: (props?: ({
|
|
8
|
+
variant?: "default" | "destructive" | "warning" | "muted" | null | undefined;
|
|
9
|
+
size?: "sm" | "lg" | "md" | null | undefined;
|
|
10
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
11
|
+
export interface EmptyStateProps extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof emptyStateVariants> {
|
|
12
|
+
ref?: Ref<HTMLDivElement>;
|
|
13
|
+
}
|
|
14
|
+
declare function EmptyState({ className, variant, size, ref, ...props }: EmptyStateProps): ReactElement;
|
|
15
|
+
declare namespace EmptyState {
|
|
16
|
+
var displayName: string;
|
|
17
|
+
}
|
|
18
|
+
declare const emptyStateIconVariants: (props?: ({
|
|
19
|
+
variant?: "default" | "destructive" | "warning" | "muted" | null | undefined;
|
|
20
|
+
size?: "sm" | "lg" | "md" | null | undefined;
|
|
21
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
22
|
+
export interface EmptyStateIconProps extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof emptyStateIconVariants> {
|
|
23
|
+
ref?: Ref<HTMLDivElement>;
|
|
24
|
+
}
|
|
25
|
+
declare function EmptyStateIcon({ className, variant, size, ref, ...props }: EmptyStateIconProps): ReactElement;
|
|
26
|
+
declare namespace EmptyStateIcon {
|
|
27
|
+
var displayName: string;
|
|
28
|
+
}
|
|
29
|
+
export interface EmptyStateTitleProps extends HTMLAttributes<HTMLHeadingElement> {
|
|
30
|
+
size?: EmptyStateSizeId;
|
|
31
|
+
ref?: Ref<HTMLHeadingElement>;
|
|
32
|
+
}
|
|
33
|
+
declare function EmptyStateTitle({ className, size, ref, ...props }: EmptyStateTitleProps): ReactElement;
|
|
34
|
+
declare namespace EmptyStateTitle {
|
|
35
|
+
var displayName: string;
|
|
36
|
+
}
|
|
37
|
+
export interface EmptyStateDescriptionProps extends HTMLAttributes<HTMLParagraphElement> {
|
|
38
|
+
ref?: Ref<HTMLParagraphElement>;
|
|
39
|
+
}
|
|
40
|
+
declare function EmptyStateDescription({ className, ref, ...props }: EmptyStateDescriptionProps): ReactElement;
|
|
41
|
+
declare namespace EmptyStateDescription {
|
|
42
|
+
var displayName: string;
|
|
43
|
+
}
|
|
44
|
+
export interface EmptyStateActionsProps extends HTMLAttributes<HTMLDivElement> {
|
|
45
|
+
ref?: Ref<HTMLDivElement>;
|
|
46
|
+
}
|
|
47
|
+
declare function EmptyStateActions({ className, ref, ...props }: EmptyStateActionsProps): ReactElement;
|
|
48
|
+
declare namespace EmptyStateActions {
|
|
49
|
+
var displayName: string;
|
|
50
|
+
}
|
|
51
|
+
export { EmptyState, EmptyStateIcon, EmptyStateTitle, EmptyStateDescription, EmptyStateActions, emptyStateVariants, emptyStateIconVariants, };
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
+
import { cva } from "class-variance-authority";
|
|
4
|
+
import { cn } from "../../../lib/utils";
|
|
5
|
+
export const emptyStateVariantIds = [
|
|
6
|
+
"default",
|
|
7
|
+
"muted",
|
|
8
|
+
"destructive",
|
|
9
|
+
"warning",
|
|
10
|
+
];
|
|
11
|
+
export const emptyStateSizeIds = ["sm", "md", "lg"];
|
|
12
|
+
const emptyStateVariants = cva("flex w-full flex-col items-center justify-center text-center rounded-lg border border-dashed", {
|
|
13
|
+
variants: {
|
|
14
|
+
variant: {
|
|
15
|
+
default: "bg-background text-foreground border-border",
|
|
16
|
+
muted: "bg-muted/40 text-foreground border-border",
|
|
17
|
+
destructive: "bg-destructive/5 text-destructive border-destructive/40 dark:border-destructive",
|
|
18
|
+
warning: "bg-warning/5 text-warning border-warning/40 dark:border-warning",
|
|
19
|
+
},
|
|
20
|
+
size: {
|
|
21
|
+
sm: "gap-2 p-4",
|
|
22
|
+
md: "gap-3 p-8",
|
|
23
|
+
lg: "gap-4 p-12",
|
|
24
|
+
},
|
|
25
|
+
},
|
|
26
|
+
defaultVariants: {
|
|
27
|
+
variant: "default",
|
|
28
|
+
size: "md",
|
|
29
|
+
},
|
|
30
|
+
});
|
|
31
|
+
function EmptyState({ className, variant, size, ref, ...props }) {
|
|
32
|
+
return (_jsx("div", { ref: ref, role: "status", "data-slot": "empty-state", className: cn(emptyStateVariants({ variant, size }), className), ...props }));
|
|
33
|
+
}
|
|
34
|
+
EmptyState.displayName = "EmptyState";
|
|
35
|
+
const emptyStateIconVariants = cva("flex items-center justify-center rounded-full [&>svg]:shrink-0", {
|
|
36
|
+
variants: {
|
|
37
|
+
variant: {
|
|
38
|
+
default: "bg-muted text-muted-foreground",
|
|
39
|
+
muted: "bg-muted text-muted-foreground",
|
|
40
|
+
destructive: "bg-destructive/10 text-destructive",
|
|
41
|
+
warning: "bg-warning/10 text-warning",
|
|
42
|
+
},
|
|
43
|
+
size: {
|
|
44
|
+
sm: "size-10 [&>svg]:size-5",
|
|
45
|
+
md: "size-14 [&>svg]:size-7",
|
|
46
|
+
lg: "size-20 [&>svg]:size-10",
|
|
47
|
+
},
|
|
48
|
+
},
|
|
49
|
+
defaultVariants: {
|
|
50
|
+
variant: "default",
|
|
51
|
+
size: "md",
|
|
52
|
+
},
|
|
53
|
+
});
|
|
54
|
+
function EmptyStateIcon({ className, variant, size, ref, ...props }) {
|
|
55
|
+
return (_jsx("div", { ref: ref, "aria-hidden": "true", "data-slot": "empty-state-icon", className: cn(emptyStateIconVariants({ variant, size }), className), ...props }));
|
|
56
|
+
}
|
|
57
|
+
EmptyStateIcon.displayName = "EmptyStateIcon";
|
|
58
|
+
const emptyStateTitleSizes = {
|
|
59
|
+
sm: "text-sm",
|
|
60
|
+
md: "text-base",
|
|
61
|
+
lg: "text-lg",
|
|
62
|
+
};
|
|
63
|
+
function EmptyStateTitle({ className, size = "md", ref, ...props }) {
|
|
64
|
+
return (_jsx("h3", { ref: ref, "data-slot": "empty-state-title", className: cn("font-semibold leading-tight tracking-tight", emptyStateTitleSizes[size], className), ...props, children: props.children }));
|
|
65
|
+
}
|
|
66
|
+
EmptyStateTitle.displayName = "EmptyStateTitle";
|
|
67
|
+
function EmptyStateDescription({ className, ref, ...props }) {
|
|
68
|
+
return (_jsx("p", { ref: ref, "data-slot": "empty-state-description", className: cn("max-w-prose text-sm text-muted-foreground [&_p]:leading-relaxed", className), ...props }));
|
|
69
|
+
}
|
|
70
|
+
EmptyStateDescription.displayName = "EmptyStateDescription";
|
|
71
|
+
function EmptyStateActions({ className, ref, ...props }) {
|
|
72
|
+
return (_jsx("div", { ref: ref, "data-slot": "empty-state-actions", className: cn("mt-2 flex flex-wrap items-center justify-center gap-2", className), ...props }));
|
|
73
|
+
}
|
|
74
|
+
EmptyStateActions.displayName = "EmptyStateActions";
|
|
75
|
+
export { EmptyState, EmptyStateIcon, EmptyStateTitle, EmptyStateDescription, EmptyStateActions, emptyStateVariants, emptyStateIconVariants, };
|
|
76
|
+
//# sourceMappingURL=empty-state.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"empty-state.js","sourceRoot":"","sources":["../../../../src/components/ui/empty-state/empty-state.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/ui/empty-state/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC"}
|
|
@@ -16,6 +16,8 @@ export * from "./input";
|
|
|
16
16
|
export type * from "./input";
|
|
17
17
|
export * from "./password-input";
|
|
18
18
|
export type * from "./password-input";
|
|
19
|
+
export * from "./secure-password-creation-input";
|
|
20
|
+
export type * from "./secure-password-creation-input";
|
|
19
21
|
export * from "./file-input";
|
|
20
22
|
export type * from "./file-input";
|
|
21
23
|
export * from "./label";
|
|
@@ -102,3 +104,5 @@ export * from "./spinner";
|
|
|
102
104
|
export type * from "./spinner";
|
|
103
105
|
export * from "./banner";
|
|
104
106
|
export type * from "./banner";
|
|
107
|
+
export * from "./empty-state";
|
|
108
|
+
export type * from "./empty-state";
|
|
@@ -7,6 +7,7 @@ export * from "./themed-page-background";
|
|
|
7
7
|
export * from "./button";
|
|
8
8
|
export * from "./input";
|
|
9
9
|
export * from "./password-input";
|
|
10
|
+
export * from "./secure-password-creation-input";
|
|
10
11
|
export * from "./file-input";
|
|
11
12
|
export * from "./label";
|
|
12
13
|
export * from "./toast";
|
|
@@ -50,4 +51,5 @@ export * from "./breadcrumb";
|
|
|
50
51
|
export * from "./kbd";
|
|
51
52
|
export * from "./spinner";
|
|
52
53
|
export * from "./banner";
|
|
54
|
+
export * from "./empty-state";
|
|
53
55
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ui/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AAGzB,cAAc,aAAa,CAAC;AAG5B,cAAc,SAAS,CAAC;AAGxB,cAAc,SAAS,CAAC;AAGxB,cAAc,mBAAmB,CAAC;AAGlC,cAAc,0BAA0B,CAAC;AAGzC,cAAc,UAAU,CAAC;AAGzB,cAAc,SAAS,CAAC;AAGxB,cAAc,kBAAkB,CAAC;AAGjC,cAAc,cAAc,CAAC;AAG7B,cAAc,SAAS,CAAC;AAGxB,cAAc,SAAS,CAAC;AAExB,cAAc,WAAW,CAAC;AAG1B,cAAc,YAAY,CAAC;AAG3B,cAAc,QAAQ,CAAC;AAGvB,cAAc,QAAQ,CAAC;AAGvB,cAAc,aAAa,CAAC;AAG5B,cAAc,iBAAiB,CAAC;AAGhC,cAAc,WAAW,CAAC;AAG1B,cAAc,mBAAmB,CAAC;AAGlC,cAAc,UAAU,CAAC;AAGzB,cAAc,WAAW,CAAC;AAG1B,cAAc,WAAW,CAAC;AAG1B,cAAc,SAAS,CAAC;AAGxB,cAAc,aAAa,CAAC;AAG5B,cAAc,YAAY,CAAC;AAG3B,cAAc,YAAY,CAAC;AAG3B,cAAc,cAAc,CAAC;AAG7B,cAAc,eAAe,CAAC;AAG9B,cAAc,YAAY,CAAC;AAG3B,cAAc,2BAA2B,CAAC;AAG1C,cAAc,kBAAkB,CAAC;AAGjC,cAAc,gBAAgB,CAAC;AAG/B,cAAc,eAAe,CAAC;AAG9B,cAAc,WAAW,CAAC;AAG1B,cAAc,gBAAgB,CAAC;AAG/B,cAAc,cAAc,CAAC;AAG7B,cAAc,SAAS,CAAC;AAGxB,cAAc,UAAU,CAAC;AAGzB,cAAc,eAAe,CAAC;AAG9B,cAAc,qBAAqB,CAAC;AAGpC,cAAc,oBAAoB,CAAC;AAGnC,cAAc,mBAAmB,CAAC;AAGlC,cAAc,QAAQ,CAAC;AAGvB,cAAc,QAAQ,CAAC;AAGvB,cAAc,UAAU,CAAC;AAGzB,cAAc,UAAU,CAAC;AAGzB,cAAc,gBAAgB,CAAC;AAG/B,cAAc,cAAc,CAAC;AAG7B,cAAc,OAAO,CAAC;AAGtB,cAAc,WAAW,CAAC;AAG1B,cAAc,UAAU,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ui/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AAGzB,cAAc,aAAa,CAAC;AAG5B,cAAc,SAAS,CAAC;AAGxB,cAAc,SAAS,CAAC;AAGxB,cAAc,mBAAmB,CAAC;AAGlC,cAAc,0BAA0B,CAAC;AAGzC,cAAc,UAAU,CAAC;AAGzB,cAAc,SAAS,CAAC;AAGxB,cAAc,kBAAkB,CAAC;AAGjC,cAAc,kCAAkC,CAAC;AAGjD,cAAc,cAAc,CAAC;AAG7B,cAAc,SAAS,CAAC;AAGxB,cAAc,SAAS,CAAC;AAExB,cAAc,WAAW,CAAC;AAG1B,cAAc,YAAY,CAAC;AAG3B,cAAc,QAAQ,CAAC;AAGvB,cAAc,QAAQ,CAAC;AAGvB,cAAc,aAAa,CAAC;AAG5B,cAAc,iBAAiB,CAAC;AAGhC,cAAc,WAAW,CAAC;AAG1B,cAAc,mBAAmB,CAAC;AAGlC,cAAc,UAAU,CAAC;AAGzB,cAAc,WAAW,CAAC;AAG1B,cAAc,WAAW,CAAC;AAG1B,cAAc,SAAS,CAAC;AAGxB,cAAc,aAAa,CAAC;AAG5B,cAAc,YAAY,CAAC;AAG3B,cAAc,YAAY,CAAC;AAG3B,cAAc,cAAc,CAAC;AAG7B,cAAc,eAAe,CAAC;AAG9B,cAAc,YAAY,CAAC;AAG3B,cAAc,2BAA2B,CAAC;AAG1C,cAAc,kBAAkB,CAAC;AAGjC,cAAc,gBAAgB,CAAC;AAG/B,cAAc,eAAe,CAAC;AAG9B,cAAc,WAAW,CAAC;AAG1B,cAAc,gBAAgB,CAAC;AAG/B,cAAc,cAAc,CAAC;AAG7B,cAAc,SAAS,CAAC;AAGxB,cAAc,UAAU,CAAC;AAGzB,cAAc,eAAe,CAAC;AAG9B,cAAc,qBAAqB,CAAC;AAGpC,cAAc,oBAAoB,CAAC;AAGnC,cAAc,mBAAmB,CAAC;AAGlC,cAAc,QAAQ,CAAC;AAGvB,cAAc,QAAQ,CAAC;AAGvB,cAAc,UAAU,CAAC;AAGzB,cAAc,UAAU,CAAC;AAGzB,cAAc,gBAAgB,CAAC;AAG/B,cAAc,cAAc,CAAC;AAG7B,cAAc,OAAO,CAAC;AAGtB,cAAc,WAAW,CAAC;AAG1B,cAAc,UAAU,CAAC;AAGzB,cAAc,eAAe,CAAC"}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
export { ProgressBar, progressBarVariants, progressBarSizeIds } from "./progress-bar";
|
|
1
|
+
export { ProgressBar, progressBarVariants, progressBarIndicatorVariants, progressBarSizeIds, progressBarColorIds, } from "./progress-bar";
|
|
2
2
|
export type * from "./progress-bar";
|
|
3
3
|
export { ProgressBar as default } from "./progress-bar";
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
export { ProgressBar, progressBarVariants, progressBarSizeIds } from "./progress-bar";
|
|
1
|
+
export { ProgressBar, progressBarVariants, progressBarIndicatorVariants, progressBarSizeIds, progressBarColorIds, } from "./progress-bar";
|
|
2
2
|
export { ProgressBar as default } from "./progress-bar";
|
|
3
3
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/ui/progress-bar/index.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/ui/progress-bar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,WAAW,EACX,mBAAmB,EACnB,4BAA4B,EAC5B,kBAAkB,EAClB,mBAAmB,GACpB,MAAM,gBAAgB,CAAC;AAExB,OAAO,EAAE,WAAW,IAAI,OAAO,EAAE,MAAM,gBAAgB,CAAC"}
|
|
@@ -3,9 +3,14 @@ import type { ReactElement, HTMLAttributes } from "react";
|
|
|
3
3
|
export declare const progressBarVariants: (props?: ({
|
|
4
4
|
size?: "sm" | "default" | "lg" | null | undefined;
|
|
5
5
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
6
|
+
export declare const progressBarIndicatorVariants: (props?: ({
|
|
7
|
+
color?: "default" | "destructive" | "warning" | "positive" | null | undefined;
|
|
8
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
6
9
|
export declare const progressBarSizeIds: readonly ["sm", "default", "lg"];
|
|
7
10
|
export type ProgressBarSizeId = (typeof progressBarSizeIds)[number];
|
|
8
|
-
export
|
|
11
|
+
export declare const progressBarColorIds: readonly ["default", "positive", "warning", "destructive"];
|
|
12
|
+
export type ProgressBarColorId = (typeof progressBarColorIds)[number];
|
|
13
|
+
export interface ProgressBarProps extends Omit<HTMLAttributes<HTMLDivElement>, "role" | "color">, VariantProps<typeof progressBarVariants>, VariantProps<typeof progressBarIndicatorVariants> {
|
|
9
14
|
/** Current progress value (0-100) */
|
|
10
15
|
value: number;
|
|
11
16
|
/** Accessible label describing what the progress bar represents */
|
|
@@ -17,7 +22,7 @@ export interface ProgressBarProps extends Omit<HTMLAttributes<HTMLDivElement>, "
|
|
|
17
22
|
/** Additional classes for the filled indicator */
|
|
18
23
|
indicatorClassName?: string;
|
|
19
24
|
}
|
|
20
|
-
export declare function ProgressBar({ value, label, min, max, size, className, indicatorClassName, ...props }: ProgressBarProps): ReactElement;
|
|
25
|
+
export declare function ProgressBar({ value, label, min, max, size, color, className, indicatorClassName, ...props }: ProgressBarProps): ReactElement;
|
|
21
26
|
export declare namespace ProgressBar {
|
|
22
27
|
var displayName: string;
|
|
23
28
|
}
|
|
@@ -15,11 +15,30 @@ export const progressBarVariants = cva("relative w-full overflow-hidden rounded-
|
|
|
15
15
|
size: "default",
|
|
16
16
|
},
|
|
17
17
|
});
|
|
18
|
+
export const progressBarIndicatorVariants = cva("h-full rounded-full transition-colors duration-300", {
|
|
19
|
+
variants: {
|
|
20
|
+
color: {
|
|
21
|
+
default: "bg-gradient-to-r from-schemavaults-brand-blue to-schemavaults-brand-red",
|
|
22
|
+
positive: "bg-green-500",
|
|
23
|
+
warning: "bg-yellow-500",
|
|
24
|
+
destructive: "bg-red-500",
|
|
25
|
+
},
|
|
26
|
+
},
|
|
27
|
+
defaultVariants: {
|
|
28
|
+
color: "default",
|
|
29
|
+
},
|
|
30
|
+
});
|
|
18
31
|
export const progressBarSizeIds = ["sm", "default", "lg"];
|
|
19
|
-
export
|
|
32
|
+
export const progressBarColorIds = [
|
|
33
|
+
"default",
|
|
34
|
+
"positive",
|
|
35
|
+
"warning",
|
|
36
|
+
"destructive",
|
|
37
|
+
];
|
|
38
|
+
export function ProgressBar({ value, label, min = 0, max = 100, size, color, className, indicatorClassName, ...props }) {
|
|
20
39
|
const clampedValue = Math.min(max, Math.max(min, value));
|
|
21
40
|
const percentage = ((clampedValue - min) / (max - min)) * 100;
|
|
22
|
-
return (_jsx("div", { role: "progressbar", "aria-valuenow": clampedValue, "aria-valuemin": min, "aria-valuemax": max, "aria-label": label, className: cn(progressBarVariants({ size }), className), ...props, children: _jsx(m.div, { initial: { width: 0 }, animate: { width: `${percentage}%` }, transition: { duration: 0.4, ease: "easeOut" }, className: cn(
|
|
41
|
+
return (_jsx("div", { role: "progressbar", "aria-valuenow": clampedValue, "aria-valuemin": min, "aria-valuemax": max, "aria-label": label, className: cn(progressBarVariants({ size }), className), ...props, children: _jsx(m.div, { initial: { width: 0 }, animate: { width: `${percentage}%` }, transition: { duration: 0.4, ease: "easeOut" }, className: cn(progressBarIndicatorVariants({ color }), indicatorClassName) }) }));
|
|
23
42
|
}
|
|
24
43
|
ProgressBar.displayName = "ProgressBar";
|
|
25
44
|
//# sourceMappingURL=progress-bar.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"progress-bar.js","sourceRoot":"","sources":["../../../../src/components/ui/progress-bar/progress-bar.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,GAAG,EAAqB,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,CAAC,EAAE,MAAM,iBAAiB,CAAC;AACpC,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AAGjC,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,CACpC,2DAA2D,EAC3D;IACE,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,EAAE,EAAE,KAAK;YACT,OAAO,EAAE,KAAK;YACd,EAAE,EAAE,KAAK;SACV;KACF;IACD,eAAe,EAAE;QACf,IAAI,EAAE,SAAS;KAChB;CACF,CACF,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,IAAI,EAAE,SAAS,EAAE,IAAI,CAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"progress-bar.js","sourceRoot":"","sources":["../../../../src/components/ui/progress-bar/progress-bar.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,GAAG,EAAqB,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,CAAC,EAAE,MAAM,iBAAiB,CAAC;AACpC,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AAGjC,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,CACpC,2DAA2D,EAC3D;IACE,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,EAAE,EAAE,KAAK;YACT,OAAO,EAAE,KAAK;YACd,EAAE,EAAE,KAAK;SACV;KACF;IACD,eAAe,EAAE;QACf,IAAI,EAAE,SAAS;KAChB;CACF,CACF,CAAC;AAEF,MAAM,CAAC,MAAM,4BAA4B,GAAG,GAAG,CAC7C,oDAAoD,EACpD;IACE,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,OAAO,EACL,yEAAyE;YAC3E,QAAQ,EAAE,cAAc;YACxB,OAAO,EAAE,eAAe;YACxB,WAAW,EAAE,YAAY;SAC1B;KACF;IACD,eAAe,EAAE;QACf,KAAK,EAAE,SAAS;KACjB;CACF,CACF,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,IAAI,EAAE,SAAS,EAAE,IAAI,CAAU,CAAC;AAInE,MAAM,CAAC,MAAM,mBAAmB,GAAG;IACjC,SAAS;IACT,UAAU;IACV,SAAS;IACT,aAAa;CACL,CAAC;AAoBX,MAAM,UAAU,WAAW,CAAC,EAC1B,KAAK,EACL,KAAK,EACL,GAAG,GAAG,CAAC,EACP,GAAG,GAAG,GAAG,EACT,IAAI,EACJ,KAAK,EACL,SAAS,EACT,kBAAkB,EAClB,GAAG,KAAK,EACS;IACjB,MAAM,YAAY,GAAW,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC,CAAC;IACjE,MAAM,UAAU,GAAW,CAAC,CAAC,YAAY,GAAG,GAAG,CAAC,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC;IAEtE,OAAO,CACL,cACE,IAAI,EAAC,aAAa,mBACH,YAAY,mBACZ,GAAG,mBACH,GAAG,gBACN,KAAK,EACjB,SAAS,EAAE,EAAE,CAAC,mBAAmB,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,SAAS,CAAC,KACnD,KAAK,YAET,KAAC,CAAC,CAAC,GAAG,IACJ,OAAO,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,EACrB,OAAO,EAAE,EAAE,KAAK,EAAE,GAAG,UAAU,GAAG,EAAE,EACpC,UAAU,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,IAAI,EAAE,SAAS,EAAE,EAC9C,SAAS,EAAE,EAAE,CACX,4BAA4B,CAAC,EAAE,KAAK,EAAE,CAAC,EACvC,kBAAkB,CACnB,GACD,GACE,CACP,CAAC;AACJ,CAAC;AAED,WAAW,CAAC,WAAW,GAAG,aAAa,CAAC"}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
export const defaultPasswordRequirements = [
|
|
2
|
+
{
|
|
3
|
+
id: "min-length-8",
|
|
4
|
+
label: "At least 8 characters",
|
|
5
|
+
validate: (password) => password.length >= 8,
|
|
6
|
+
},
|
|
7
|
+
{
|
|
8
|
+
id: "uppercase",
|
|
9
|
+
label: "At least one uppercase letter",
|
|
10
|
+
validate: (password) => /[A-Z]/.test(password),
|
|
11
|
+
},
|
|
12
|
+
{
|
|
13
|
+
id: "lowercase",
|
|
14
|
+
label: "At least one lowercase letter",
|
|
15
|
+
validate: (password) => /[a-z]/.test(password),
|
|
16
|
+
},
|
|
17
|
+
{
|
|
18
|
+
id: "number",
|
|
19
|
+
label: "At least one number",
|
|
20
|
+
validate: (password) => /\d/.test(password),
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
id: "special",
|
|
24
|
+
label: "At least one special character",
|
|
25
|
+
validate: (password) => /[!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?]/.test(password),
|
|
26
|
+
},
|
|
27
|
+
];
|
|
28
|
+
//# sourceMappingURL=default-password-requirements.js.map
|
package/dist/components/ui/secure-password-creation-input/default-password-requirements.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"default-password-requirements.js","sourceRoot":"","sources":["../../../../src/components/ui/secure-password-creation-input/default-password-requirements.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,2BAA2B,GAA0B;IAChE;QACE,EAAE,EAAE,cAAc;QAClB,KAAK,EAAE,uBAAuB;QAC9B,QAAQ,EAAE,CAAC,QAAgB,EAAW,EAAE,CAAC,QAAQ,CAAC,MAAM,IAAI,CAAC;KAC9D;IACD;QACE,EAAE,EAAE,WAAW;QACf,KAAK,EAAE,+BAA+B;QACtC,QAAQ,EAAE,CAAC,QAAgB,EAAW,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC;KAChE;IACD;QACE,EAAE,EAAE,WAAW;QACf,KAAK,EAAE,+BAA+B;QACtC,QAAQ,EAAE,CAAC,QAAgB,EAAW,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC;KAChE;IACD;QACE,EAAE,EAAE,QAAQ;QACZ,KAAK,EAAE,qBAAqB;QAC5B,QAAQ,EAAE,CAAC,QAAgB,EAAW,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC;KAC7D;IACD;QACE,EAAE,EAAE,SAAS;QACb,KAAK,EAAE,gCAAgC;QACvC,QAAQ,EAAE,CAAC,QAAgB,EAAW,EAAE,CACtC,qCAAqC,CAAC,IAAI,CAAC,QAAQ,CAAC;KACvD;CACF,CAAC"}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
export { SecurePasswordCreationInput, SecurePasswordCreationInput as default, } from "./secure-password-creation-input";
|
|
2
|
+
export type { SecurePasswordCreationInputProps, PasswordRequirement, PasswordRequirementResult, PasswordValidationResult, PasswordStrength, } from "./secure-password-creation-input-types";
|
|
3
|
+
export { defaultPasswordRequirements } from "./default-password-requirements";
|
|
4
|
+
export { usePasswordValidation } from "./use-password-validation";
|
|
5
|
+
export { PasswordRequirementChecklist, type PasswordRequirementChecklistProps, } from "./password-requirement-checklist";
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
export { SecurePasswordCreationInput, SecurePasswordCreationInput as default, } from "./secure-password-creation-input";
|
|
2
|
+
export { defaultPasswordRequirements } from "./default-password-requirements";
|
|
3
|
+
export { usePasswordValidation } from "./use-password-validation";
|
|
4
|
+
export { PasswordRequirementChecklist, } from "./password-requirement-checklist";
|
|
5
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/ui/secure-password-creation-input/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,2BAA2B,EAC3B,2BAA2B,IAAI,OAAO,GACvC,MAAM,kCAAkC,CAAC;AAQ1C,OAAO,EAAE,2BAA2B,EAAE,MAAM,iCAAiC,CAAC;AAC9E,OAAO,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAClE,OAAO,EACL,4BAA4B,GAE7B,MAAM,kCAAkC,CAAC"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import type { ReactElement } from "react";
|
|
2
|
+
import type { PasswordRequirementResult } from "./secure-password-creation-input-types";
|
|
3
|
+
export interface PasswordRequirementChecklistProps {
|
|
4
|
+
results: PasswordRequirementResult[];
|
|
5
|
+
className?: string;
|
|
6
|
+
}
|
|
7
|
+
export declare function PasswordRequirementChecklist({ results, className, }: PasswordRequirementChecklistProps): ReactElement;
|
|
8
|
+
export declare namespace PasswordRequirementChecklist {
|
|
9
|
+
var displayName: string;
|
|
10
|
+
}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { Check, X } from "lucide-react";
|
|
4
|
+
import { m } from "../../../framer-motion";
|
|
5
|
+
import { cn } from "../../../lib/utils";
|
|
6
|
+
export function PasswordRequirementChecklist({ results, className, }) {
|
|
7
|
+
return (_jsx("ul", { className: cn("flex flex-col gap-1.5 mt-2", className), "aria-label": "Password requirements", children: results.map(({ requirement, isMet }) => (_jsxs(m.li, { className: "flex items-center gap-2 text-sm", initial: { opacity: 0, x: -4 }, animate: { opacity: 1, x: 0 }, transition: { duration: 0.2 }, children: [_jsx("span", { className: cn("flex items-center justify-center h-4 w-4 shrink-0", isMet ? "text-green-500" : "text-muted-foreground"), children: isMet ? (_jsx(Check, { className: "h-3.5 w-3.5" })) : (_jsx(X, { className: "h-3.5 w-3.5" })) }), _jsx("span", { className: cn("transition-colors duration-200", isMet
|
|
8
|
+
? "text-green-500 line-through"
|
|
9
|
+
: "text-muted-foreground"), children: requirement.label })] }, requirement.id))) }));
|
|
10
|
+
}
|
|
11
|
+
PasswordRequirementChecklist.displayName = "PasswordRequirementChecklist";
|
|
12
|
+
//# sourceMappingURL=password-requirement-checklist.js.map
|
package/dist/components/ui/secure-password-creation-input/password-requirement-checklist.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"password-requirement-checklist.js","sourceRoot":"","sources":["../../../../src/components/ui/secure-password-creation-input/password-requirement-checklist.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,cAAc,CAAC;AACxC,OAAO,EAAE,CAAC,EAAE,MAAM,iBAAiB,CAAC;AACpC,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AAQjC,MAAM,UAAU,4BAA4B,CAAC,EAC3C,OAAO,EACP,SAAS,GACyB;IAClC,OAAO,CACL,aACE,SAAS,EAAE,EAAE,CAAC,4BAA4B,EAAE,SAAS,CAAC,gBAC3C,uBAAuB,YAEjC,OAAO,CAAC,GAAG,CACV,CAAC,EAAE,WAAW,EAAE,KAAK,EAAE,EAAgB,EAAE,CAAC,CACxC,MAAC,CAAC,CAAC,EAAE,IAEH,SAAS,EAAC,iCAAiC,EAC3C,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,EAC9B,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAC7B,UAAU,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,aAE7B,eACE,SAAS,EAAE,EAAE,CACX,mDAAmD,EACnD,KAAK,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,uBAAuB,CACnD,YAEA,KAAK,CAAC,CAAC,CAAC,CACP,KAAC,KAAK,IAAC,SAAS,EAAC,aAAa,GAAG,CAClC,CAAC,CAAC,CAAC,CACF,KAAC,CAAC,IAAC,SAAS,EAAC,aAAa,GAAG,CAC9B,GACI,EACP,eACE,SAAS,EAAE,EAAE,CACX,gCAAgC,EAChC,KAAK;wBACH,CAAC,CAAC,6BAA6B;wBAC/B,CAAC,CAAC,uBAAuB,CAC5B,YAEA,WAAW,CAAC,KAAK,GACb,KA3BF,WAAW,CAAC,EAAE,CA4Bd,CACR,CACF,GACE,CACN,CAAC;AACJ,CAAC;AAED,4BAA4B,CAAC,WAAW,GAAG,8BAA8B,CAAC"}
|
package/dist/components/ui/secure-password-creation-input/secure-password-creation-input-types.d.ts
ADDED
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import type { ChangeEvent } from "react";
|
|
2
|
+
import type { PasswordInputProps } from "../../ui/password-input";
|
|
3
|
+
import type { ProgressBarSizeId } from "../../ui/progress-bar";
|
|
4
|
+
export interface PasswordRequirement {
|
|
5
|
+
/** Unique identifier for this requirement */
|
|
6
|
+
id: string;
|
|
7
|
+
/** Human-readable label displayed in the checklist */
|
|
8
|
+
label: string;
|
|
9
|
+
/** Validator function: returns true if the password meets this requirement */
|
|
10
|
+
validate: (password: string) => boolean;
|
|
11
|
+
}
|
|
12
|
+
export interface PasswordRequirementResult {
|
|
13
|
+
/** The original requirement definition */
|
|
14
|
+
requirement: PasswordRequirement;
|
|
15
|
+
/** Whether the requirement is currently met */
|
|
16
|
+
isMet: boolean;
|
|
17
|
+
}
|
|
18
|
+
export type PasswordStrength = "weak" | "fair" | "strong";
|
|
19
|
+
export interface PasswordValidationResult {
|
|
20
|
+
/** Individual results for each requirement */
|
|
21
|
+
results: PasswordRequirementResult[];
|
|
22
|
+
/** Number of requirements met */
|
|
23
|
+
metCount: number;
|
|
24
|
+
/** Total number of requirements */
|
|
25
|
+
totalCount: number;
|
|
26
|
+
/** Percentage of requirements met (0-100) */
|
|
27
|
+
percentage: number;
|
|
28
|
+
/** Strength tier for color coding */
|
|
29
|
+
strength: PasswordStrength;
|
|
30
|
+
}
|
|
31
|
+
export interface SecurePasswordCreationInputProps extends Omit<PasswordInputProps, "value" | "onChange"> {
|
|
32
|
+
/** Current password value (controlled component) */
|
|
33
|
+
value: string;
|
|
34
|
+
/** Change handler */
|
|
35
|
+
onChange: (e: ChangeEvent<HTMLInputElement>) => void;
|
|
36
|
+
/** Array of password requirements to validate against */
|
|
37
|
+
requirements?: PasswordRequirement[];
|
|
38
|
+
/** Whether to hide the requirement checklist */
|
|
39
|
+
hideChecklist?: boolean;
|
|
40
|
+
/** Whether to hide the progress bar */
|
|
41
|
+
hideProgressBar?: boolean;
|
|
42
|
+
/** Size variant for the progress bar */
|
|
43
|
+
progressBarSize?: ProgressBarSizeId;
|
|
44
|
+
/** Additional classes for the progress bar indicator */
|
|
45
|
+
progressBarClassName?: string;
|
|
46
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"secure-password-creation-input-types.js","sourceRoot":"","sources":["../../../../src/components/ui/secure-password-creation-input/secure-password-creation-input-types.ts"],"names":[],"mappings":""}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import type { ReactElement } from "react";
|
|
2
|
+
import type { SecurePasswordCreationInputProps } from "./secure-password-creation-input-types";
|
|
3
|
+
export declare function SecurePasswordCreationInput({ value, onChange, requirements, hideChecklist, hideProgressBar, progressBarSize, progressBarClassName, className, ...passwordInputProps }: SecurePasswordCreationInputProps): ReactElement;
|
|
4
|
+
export declare namespace SecurePasswordCreationInput {
|
|
5
|
+
var displayName: string;
|
|
6
|
+
}
|
|
7
|
+
export default SecurePasswordCreationInput;
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { cn } from "../../../lib/utils";
|
|
4
|
+
import { PasswordInput } from "../../ui/password-input";
|
|
5
|
+
import { ProgressBar } from "../../ui/progress-bar";
|
|
6
|
+
import { usePasswordValidation } from "./use-password-validation";
|
|
7
|
+
import { PasswordRequirementChecklist } from "./password-requirement-checklist";
|
|
8
|
+
import { defaultPasswordRequirements } from "./default-password-requirements";
|
|
9
|
+
const strengthColorMap = {
|
|
10
|
+
weak: "destructive",
|
|
11
|
+
fair: "warning",
|
|
12
|
+
strong: "positive",
|
|
13
|
+
};
|
|
14
|
+
export function SecurePasswordCreationInput({ value, onChange, requirements = defaultPasswordRequirements, hideChecklist = false, hideProgressBar = false, progressBarSize = "sm", progressBarClassName, className, ...passwordInputProps }) {
|
|
15
|
+
const validation = usePasswordValidation(value, requirements);
|
|
16
|
+
return (_jsxs("div", { className: cn("flex flex-col w-full", className), children: [_jsx(PasswordInput, { value: value, onChange: onChange, ...passwordInputProps }), !hideProgressBar && (_jsx(ProgressBar, { value: validation.percentage, label: "Password strength", size: progressBarSize, color: strengthColorMap[validation.strength], indicatorClassName: progressBarClassName, className: "mt-2" })), !hideChecklist && (_jsx(PasswordRequirementChecklist, { results: validation.results }))] }));
|
|
17
|
+
}
|
|
18
|
+
SecurePasswordCreationInput.displayName = "SecurePasswordCreationInput";
|
|
19
|
+
export default SecurePasswordCreationInput;
|
|
20
|
+
//# sourceMappingURL=secure-password-creation-input.js.map
|
package/dist/components/ui/secure-password-creation-input/secure-password-creation-input.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"secure-password-creation-input.js","sourceRoot":"","sources":["../../../../src/components/ui/secure-password-creation-input/secure-password-creation-input.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AACjC,OAAO,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAC/D,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAE3D,OAAO,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAClE,OAAO,EAAE,4BAA4B,EAAE,MAAM,kCAAkC,CAAC;AAChF,OAAO,EAAE,2BAA2B,EAAE,MAAM,iCAAiC,CAAC;AAM9E,MAAM,gBAAgB,GAAiD;IACrE,IAAI,EAAE,aAAa;IACnB,IAAI,EAAE,SAAS;IACf,MAAM,EAAE,UAAU;CACnB,CAAC;AAEF,MAAM,UAAU,2BAA2B,CAAC,EAC1C,KAAK,EACL,QAAQ,EACR,YAAY,GAAG,2BAA2B,EAC1C,aAAa,GAAG,KAAK,EACrB,eAAe,GAAG,KAAK,EACvB,eAAe,GAAG,IAAI,EACtB,oBAAoB,EACpB,SAAS,EACT,GAAG,kBAAkB,EACY;IACjC,MAAM,UAAU,GAAG,qBAAqB,CAAC,KAAK,EAAE,YAAY,CAAC,CAAC;IAE9D,OAAO,CACL,eAAK,SAAS,EAAE,EAAE,CAAC,sBAAsB,EAAE,SAAS,CAAC,aACnD,KAAC,aAAa,IAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,KAAM,kBAAkB,GAAI,EAE1E,CAAC,eAAe,IAAI,CACnB,KAAC,WAAW,IACV,KAAK,EAAE,UAAU,CAAC,UAAU,EAC5B,KAAK,EAAC,mBAAmB,EACzB,IAAI,EAAE,eAAe,EACrB,KAAK,EAAE,gBAAgB,CAAC,UAAU,CAAC,QAAQ,CAAC,EAC5C,kBAAkB,EAAE,oBAAoB,EACxC,SAAS,EAAC,MAAM,GAChB,CACH,EAEA,CAAC,aAAa,IAAI,CACjB,KAAC,4BAA4B,IAAC,OAAO,EAAE,UAAU,CAAC,OAAO,GAAI,CAC9D,IACG,CACP,CAAC;AACJ,CAAC;AAED,2BAA2B,CAAC,WAAW,GAAG,6BAA6B,CAAC;AAExE,eAAe,2BAA2B,CAAC"}
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { useDeferredValue, useMemo } from "react";
|
|
3
|
+
function getStrength(percentage) {
|
|
4
|
+
if (percentage >= 100)
|
|
5
|
+
return "strong";
|
|
6
|
+
if (percentage >= 50)
|
|
7
|
+
return "fair";
|
|
8
|
+
return "weak";
|
|
9
|
+
}
|
|
10
|
+
export function usePasswordValidation(password, requirements) {
|
|
11
|
+
const deferredPassword = useDeferredValue(password);
|
|
12
|
+
return useMemo(() => {
|
|
13
|
+
const results = requirements.map((requirement) => ({
|
|
14
|
+
requirement,
|
|
15
|
+
isMet: deferredPassword.length > 0
|
|
16
|
+
? requirement.validate(deferredPassword)
|
|
17
|
+
: false,
|
|
18
|
+
}));
|
|
19
|
+
const metCount = results.filter((r) => r.isMet).length;
|
|
20
|
+
const totalCount = requirements.length;
|
|
21
|
+
const percentage = totalCount > 0 ? Math.round((metCount / totalCount) * 100) : 0;
|
|
22
|
+
return {
|
|
23
|
+
results,
|
|
24
|
+
metCount,
|
|
25
|
+
totalCount,
|
|
26
|
+
percentage,
|
|
27
|
+
strength: getStrength(percentage),
|
|
28
|
+
};
|
|
29
|
+
}, [deferredPassword, requirements]);
|
|
30
|
+
}
|
|
31
|
+
//# sourceMappingURL=use-password-validation.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use-password-validation.js","sourceRoot":"","sources":["../../../../src/components/ui/secure-password-creation-input/use-password-validation.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,EAAE,gBAAgB,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAQlD,SAAS,WAAW,CAAC,UAAkB;IACrC,IAAI,UAAU,IAAI,GAAG;QAAE,OAAO,QAAQ,CAAC;IACvC,IAAI,UAAU,IAAI,EAAE;QAAE,OAAO,MAAM,CAAC;IACpC,OAAO,MAAM,CAAC;AAChB,CAAC;AAED,MAAM,UAAU,qBAAqB,CACnC,QAAgB,EAChB,YAAmC;IAEnC,MAAM,gBAAgB,GAAW,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IAE5D,OAAO,OAAO,CAAC,GAA6B,EAAE;QAC5C,MAAM,OAAO,GAAgC,YAAY,CAAC,GAAG,CAC3D,CAAC,WAAW,EAA6B,EAAE,CAAC,CAAC;YAC3C,WAAW;YACX,KAAK,EACH,gBAAgB,CAAC,MAAM,GAAG,CAAC;gBACzB,CAAC,CAAC,WAAW,CAAC,QAAQ,CAAC,gBAAgB,CAAC;gBACxC,CAAC,CAAC,KAAK;SACZ,CAAC,CACH,CAAC;QAEF,MAAM,QAAQ,GAAW,OAAO,CAAC,MAAM,CACrC,CAAC,CAA4B,EAAW,EAAE,CAAC,CAAC,CAAC,KAAK,CACnD,CAAC,MAAM,CAAC;QACT,MAAM,UAAU,GAAW,YAAY,CAAC,MAAM,CAAC;QAC/C,MAAM,UAAU,GACd,UAAU,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,QAAQ,GAAG,UAAU,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAEjE,OAAO;YACL,OAAO;YACP,QAAQ;YACR,UAAU;YACV,UAAU;YACV,QAAQ,EAAE,WAAW,CAAC,UAAU,CAAC;SAClC,CAAC;IACJ,CAAC,EAAE,CAAC,gBAAgB,EAAE,YAAY,CAAC,CAAC,CAAC;AACvC,CAAC"}
|