@timeax/form-palette 0.0.2 → 0.0.4

package/src/presets/shadcn-variants/password.tsx

@@ -1,737 +0,0 @@
-// src/presets/shadcn-variants/password.tsx
-
-import * as React from "react";
-
-import type { VariantBaseProps, ChangeDetail } from "@/variants/shared";
-import type { ShadcnTextVariantProps } from "@/presets/shadcn-variants/text";
-import { Input } from "@/presets/ui/input";
-import { cn } from "@/lib/utils";
-import { Eye, EyeOff, Check } from "lucide-react";
-
-type BaseProps = VariantBaseProps<string | undefined>;
-
-/**
- * Options for the built-in password strength meter.
- *
- * NOTE: Score is always in the range 0–4 (inclusive).
- */
-export interface StrengthOptions {
-   /**
-    * Custom scoring function.
-    * Return a number in the range 0–4 (inclusive) where 0 = weakest, 4 = strongest.
-    */
-   calc?: (value: string) => number;
-
-   /**
-    * Labels for each score bucket (index 0..4).
-    * Defaults to: ["Very weak", "Weak", "Okay", "Good", "Strong"]
-    */
-   labels?: [string, string, string, string, string];
-
-   /**
-    * Thresholds for score steps using a 0–100 bar.
-    * Defaults to [0, 25, 50, 75, 100] mapping to scores 0..4 respectively.
-    */
-   thresholds?: [number, number, number, number, number];
-
-   /**
-    * Minimum score required to consider the password acceptable (0–4).
-    * This is purely visual unless you enforce it in validate/onChange.
-    * Default: 2
-    */
-   minScore?: number | 2;
-
-   /**
-    * Whether to show the textual label next to/under the bar.
-    * Default: true
-    */
-   showLabel?: boolean;
-
-   /**
-    * Where to render the meter.
-    * - "inline" → compact row under the input
-    * - "block" → stacked with more spacing
-    * Default: "inline"
-    */
-   display?: "inline" | "block";
-}
-
-/** Heuristic length/charset score: fast, dependency-free. Returns 0..4. */
-function defaultScore(pw: string): number {
-   if (!pw) return 0;
-   let score = 0;
-
-   // length
-   if (pw.length >= 8) score++;
-   if (pw.length >= 12) score++;
-
-   // diversity
-   const hasLower = /[a-z]/.test(pw);
-   const hasUpper = /[A-Z]/.test(pw);
-   const hasDigit = /\d/.test(pw);
-   const hasSymbol = /[^A-Za-z0-9]/.test(pw);
-
-   const variety = [hasLower, hasUpper, hasDigit, hasSymbol].filter(Boolean)
-      .length;
-   if (variety >= 2) score++;
-   if (variety >= 3) score++;
-
-   // Cap at 4
-   return Math.max(0, Math.min(4, score));
-}
-
-const DEFAULT_LABELS: [string, string, string, string, string] = [
-   "Very weak",
-   "Weak",
-   "Okay",
-   "Good",
-   "Strong",
-];
-
-const DEFAULT_THRESHOLDS: [number, number, number, number, number] = [
-   0, 25, 50, 75, 100,
-];
-
-function normalizeStrengthOptions(
-   raw: boolean | StrengthOptions | undefined,
-): StrengthOptions | null {
-   if (!raw) return null;
-
-   const base: StrengthOptions = {
-      calc: defaultScore,
-      labels: DEFAULT_LABELS,
-      thresholds: DEFAULT_THRESHOLDS,
-      minScore: 2,
-      showLabel: true,
-      display: "inline",
-   };
-
-   if (raw === true) {
-      return base;
-   }
-
-   return {
-      ...base,
-      ...raw,
-      labels: raw.labels ?? base.labels,
-      thresholds: raw.thresholds ?? base.thresholds,
-      minScore: raw.minScore ?? base.minScore,
-      showLabel: raw.showLabel ?? base.showLabel,
-      display: raw.display ?? base.display,
-   };
-}
-
-// ─────────────────────────────────────────────
-// Definition map / rules
-// ─────────────────────────────────────────────
-
-export interface PasswordRuleConfig {
-   /**
-    * Pattern used to decide if the rule passes.
-    */
-   pattern: RegExp;
-
-   /**
-    * If true, the rule is considered optional (recommendation).
-    * Default: false unless the rule name is not prefixed with "!".
-    */
-   optional?: boolean;
-
-   /**
-    * Weight in the scoring (relative importance).
-    * Default: 1, doubled if the use key is prefixed with "!".
-    */
-   weight?: number;
-
-   /**
-    * Short label for the rule (e.g. "At least 8 characters").
-    * Defaults to the map key if omitted.
-    */
-   label?: string;
-
-   /**
-    * Longer description, used in detailed rule view.
-    */
-   description?: string;
-}
-
-/**
- * A definition entry can be:
- * - string     → treated as a regex source
- * - RegExp     → used directly
- * - full config
- */
-export type PasswordRuleDefinition =
-   | string
-   | RegExp
-   | PasswordRuleConfig;
-
-/**
- * Map of alias/keys → definition entries.
- */
-export type PasswordDefinitionMap = Record<string, PasswordRuleDefinition>;
-
-// Default rule definitions used by the meter.
-const DEFAULT_RULE_DEFINITIONS: PasswordDefinitionMap = {
-   "length-8": {
-      pattern: /.{8,}/,
-      label: "8+ chars",
-      description: "Use at least 8 characters.",
-   },
-   "length-12": {
-      pattern: /.{12,}/,
-      optional: true,
-      label: "12+ chars",
-      description: "Use 12 or more characters for stronger security.",
-   },
-   lower: {
-      pattern: /[a-z]/,
-      label: "Lowercase",
-      description: "Include at least one lowercase letter (a–z).",
-   },
-   upper: {
-      pattern: /[A-Z]/,
-      label: "Uppercase",
-      description: "Include at least one uppercase letter (A–Z).",
-   },
-   digit: {
-      pattern: /\d/,
-      label: "Number",
-      description: "Include at least one digit (0–9).",
-   },
-   symbol: {
-      pattern: /[^A-Za-z0-9]/,
-      label: "Symbol",
-      description: "Include at least one symbol (e.g. !, @, #, ?).",
-   },
-   "no-space": {
-      pattern: /^\S+$/,
-      optional: true,
-      label: "No spaces",
-      description: "Avoid spaces in your password.",
-   },
-};
-
-/**
- * Merge default → global → local rule definitions.
- *
- * - DEFAULT_RULE_DEFINITIONS
- * - window["form-palette"]?.ruleDefinition
- * - props.ruleDefinitions
- */
-function getMergedRuleDefinitions(
-   local?: PasswordDefinitionMap,
-): PasswordDefinitionMap {
-   let merged: PasswordDefinitionMap = { ...DEFAULT_RULE_DEFINITIONS };
-
-   if (typeof window !== "undefined") {
-      const fp = (window as any)["form-palette"];
-      const globalDefs = fp?.ruleDefinition as
-         | PasswordDefinitionMap
-         | undefined;
-
-      if (globalDefs && typeof globalDefs === "object") {
-         merged = { ...merged, ...globalDefs };
-      }
-   }
-
-   if (local && typeof local === "object") {
-      merged = { ...merged, ...local };
-   }
-
-   return merged;
-}
-
-/**
- * Internal normalized state for a single rule.
- */
-interface NormalizedRuleState {
-   key: string;
-   label: string;
-   description?: string;
-   optional: boolean;
-   required: boolean;
-   weight: number;
-   passed: boolean;
-}
-
-/**
- * Props passed to custom meter renderers.
- */
-export interface PasswordMeterRenderProps {
-   /** Raw password value. */
-   value: string;
-   /** Bucket score 0..4 based on percent + thresholds. */
-   score: number;
-   /** 0–100 progress used for the bar. */
-   percent: number;
-   /** Human label for the current score. */
-   label: string;
-   /** Whether score >= minScore. */
-   passed: boolean;
-   /** Effective minScore after normalization. */
-   minScore: number;
-   /** Effective thresholds used for bucketing. */
-   thresholds: [number, number, number, number, number];
-   /** Effective labels used. */
-   labels: [string, string, string, string, string];
-   /** Rule-level details when using a definition map. */
-   rules: NormalizedRuleState[];
-}
-
-/**
- * Password-only props (on top of Shadcn text UI props & VariantBaseProps).
- *
- * This is what the form runtime sees as VariantPropsFor<"password">.
- */
-export interface PasswordVariantProps {
-   /** Maximum number of characters permitted. */
-   maxLength?: number;
-   /** Browser autocomplete hint (e.g., "current-password", "new-password"). */
-   autoComplete?: string;
-
-   /** Show an eye button to toggle between obscured/plain text. (default: true) */
-   revealToggle?: boolean;
-   /** Start in the revealed (plain text) state. */
-   defaultRevealed?: boolean;
-   /** Called whenever the reveal state changes. */
-   onRevealChange?(revealed: boolean): void;
-   /** Override the icons used for hide/show. */
-   renderToggleIcon?(revealed: boolean): React.ReactNode;
-   /** Accessible label for the toggle button. */
-   toggleAriaLabel?(revealed: boolean): string;
-
-   /**
-    * Extra className for the reveal toggle button.
-    */
-   toggleButtonClassName?: string;
-
-   /**
-    * Enable the built-in strength meter (boolean or options).
-    *
-    * - false / undefined → no built-in meter is shown
-    * - true              → use defaults
-    * - object            → merge with defaults
-    */
-   strengthMeter?: boolean | StrengthOptions;
-
-   /**
-    * Optional rule definition map.
-    */
-   ruleDefinitions?: PasswordDefinitionMap;
-
-   /**
-    * Selection of rule aliases to apply.
-    *
-    * - "length"  → use ruleDefinitions["length"] with default importance
-    * - "!length" → same rule but treated as more important
-    */
-   ruleUses?: string[];
-
-   /**
-    * Built-in meter style:
-    * - "simple" → single bar + label
-    * - "rules"  → bar + per-rule checklist
-    * Default: "simple"
-    */
-   meterStyle?: "simple" | "rules";
-
-   /**
-    * Optional custom meter renderer.
-    */
-   renderMeter?(props: PasswordMeterRenderProps): React.ReactNode;
-
-   /**
-    * ClassNames for the meter and rules UI.
-    */
-   meterWrapperClassName?: string;
-   meterContainerClassName?: string;
-   meterBarClassName?: string;
-   meterLabelClassName?: string;
-
-   rulesWrapperClassName?: string;
-   rulesHeadingClassName?: string;
-   rulesListClassName?: string;
-   ruleItemClassName?: string;
-   ruleIconClassName?: string;
-   ruleLabelClassName?: string;
-
-   /**
-    * Extra className for the outer field wrapper.
-    */
-   className?: string;
-}
-
-// We still *type* against ShadcnTextVariantProps so password can reuse
-// all the visual/text props. We take control of type, value, onValue & trailingControl.
-type TextUiProps = Omit<
-   ShadcnTextVariantProps,
-   "type" | "inputMode" | "leadingControl" | "trailingControl" | "value" | "onValue"
->;
-
-/**
- * Full props for the Shadcn-based password variant.
- */
-export type ShadcnPasswordVariantProps = TextUiProps &
-   PasswordVariantProps &
-   Pick<BaseProps, "value" | "onValue" | "error">;
-
-// ─────────────────────────────────────────────
-// Rule normalization & scoring
-// ─────────────────────────────────────────────
-
-function normalizeRules(
-   value: string,
-   definitions?: PasswordDefinitionMap,
-   uses?: string[],
-): { rules: NormalizedRuleState[]; percent: number | null } {
-   if (!definitions || Object.keys(definitions).length === 0) {
-      return { rules: [], percent: null };
-   }
-
-   const useList =
-      uses && uses.length ? uses : Object.keys(definitions);
-
-   const rules: NormalizedRuleState[] = [];
-   let totalWeight = 0;
-   let passedWeight = 0;
-
-   for (const rawKey of useList) {
-      if (!rawKey) continue;
-
-      const important = rawKey.startsWith("!");
-      const key = important ? rawKey.slice(1) : rawKey;
-      const def = definitions[key];
-      if (!def) continue;
-
-      let pattern: RegExp;
-      let optional = !important;
-      let weight = important ? 2 : 1;
-      let label = key;
-      let description: string | undefined;
-
-      if (typeof def === "string") {
-         pattern = new RegExp(def);
-      } else if (def instanceof RegExp) {
-         pattern = def;
-      } else {
-         pattern = def.pattern;
-         if (def.optional !== undefined) optional = def.optional;
-         if (def.weight !== undefined) weight = def.weight;
-         if (def.label) label = def.label;
-         if (def.description) description = def.description;
-      }
-
-      const passed = pattern.test(value);
-      totalWeight += weight;
-      if (passed) passedWeight += weight;
-
-      rules.push({
-         key,
-         label,
-         description,
-         optional,
-         required: !optional,
-         weight,
-         passed,
-      });
-   }
-
-   if (totalWeight === 0) {
-      return { rules, percent: null };
-   }
-
-   const percent = (passedWeight / totalWeight) * 100;
-   return { rules, percent };
-}
-
-function clampScore(x: number): number {
-   if (Number.isNaN(x)) return 0;
-   return Math.max(0, Math.min(4, x));
-}
-
-function computeMeterState(
-   value: string,
-   strength: StrengthOptions,
-   definitions?: PasswordDefinitionMap,
-   uses?: string[],
-): PasswordMeterRenderProps {
-   const { rules, percent: rulesPercent } = normalizeRules(
-      value,
-      definitions,
-      uses,
-   );
-
-   const labels = strength.labels ?? DEFAULT_LABELS;
-   const thresholds = strength.thresholds ?? DEFAULT_THRESHOLDS;
-   const minScore = (strength.minScore ?? 2) as number;
-
-   let percent: number;
-   let score: number;
-
-   if (rulesPercent != null) {
-      percent = rulesPercent;
-   } else {
-      const rawScore = clampScore(
-         strength.calc ? strength.calc(value) : defaultScore(value),
-      );
-      percent = (rawScore / 4) * 100;
-   }
-
-   let bucketIndex = 0;
-   for (let i = 0; i < thresholds.length; i++) {
-      if (percent >= thresholds[i]) {
-         bucketIndex = i;
-      } else {
-         break;
-      }
-   }
-   score = bucketIndex;
-
-   const label =
-      labels[score] ??
-      labels[labels.length - 1] ??
-      DEFAULT_LABELS[DEFAULT_LABELS.length - 1];
-
-   const passed = score >= minScore;
-
-   return {
-      value,
-      score,
-      percent,
-      label,
-      passed,
-      minScore,
-      thresholds: thresholds,
-      labels,
-      rules,
-   };
-}
-
-function meterColor(score: number): string {
-   if (score <= 1) return "bg-destructive";
-   if (score === 2) return "bg-orange-500";
-   if (score === 3) return "bg-amber-500";
-   return "bg-emerald-500";
-}
-
-// ─────────────────────────────────────────────
-// Main variant component
-// ─────────────────────────────────────────────
-
-export const ShadcnPasswordVariant = React.forwardRef<
-   HTMLInputElement,
-   ShadcnPasswordVariantProps
->(function ShadcnPasswordVariant(props, ref) {
-   const {
-      // base variant bits
-      value,
-      onValue,
-      error,
-
-      // password base props
-      maxLength,
-      autoComplete,
-      revealToggle = true,
-      defaultRevealed = false,
-      onRevealChange,
-      renderToggleIcon,
-      toggleAriaLabel,
-      toggleButtonClassName,
-
-      // strength / rules
-      strengthMeter,
-      ruleDefinitions,
-      ruleUses,
-      meterStyle = "simple",
-      renderMeter,
-      meterWrapperClassName,
-      meterContainerClassName,
-      meterBarClassName,
-      meterLabelClassName,
-      rulesWrapperClassName,
-      rulesHeadingClassName,
-      rulesListClassName,
-      ruleItemClassName,
-      ruleIconClassName,
-      ruleLabelClassName,
-
-      className,
-
-      // everything else from Shadcn text UI
-      ...restTextProps
-   } = props;
-
-   const [revealed, setRevealed] = React.useState<boolean>(
-      Boolean(defaultRevealed),
-   );
-
-   const normalizedStrength = React.useMemo(
-      () => normalizeStrengthOptions(strengthMeter),
-      [strengthMeter],
-   );
-
-   const effectiveRuleDefinitions = React.useMemo(
-      () => getMergedRuleDefinitions(ruleDefinitions),
-      [ruleDefinitions],
-   );
-
-   const meterState = React.useMemo<PasswordMeterRenderProps | null>(() => {
-      if (!normalizedStrength) return null;
-      const v = value ?? "";
-      return computeMeterState(
-         v,
-         normalizedStrength,
-         effectiveRuleDefinitions,
-         ruleUses,
-      );
-   }, [normalizedStrength, value, ruleUses, effectiveRuleDefinitions]);
-
-   const handleToggleReveal = React.useCallback(() => {
-      setRevealed((prev) => {
-         const next = !prev;
-         onRevealChange?.(next);
-         return next;
-      });
-   }, [onRevealChange]);
-
-   const handleChange = React.useCallback(
-      (event: React.ChangeEvent<HTMLInputElement>) => {
-         const next = event.target.value ?? "";
-         const detail: ChangeDetail<PasswordMeterRenderProps | undefined> = {
-            source: "variant",
-            raw: next,
-            nativeEvent: event,
-            meta: meterState ?? undefined,
-         };
-         onValue?.(next, detail);
-      },
-      [onValue, meterState],
-   );
-
-   const toggleLabel =
-      toggleAriaLabel?.(revealed) ??
-      (revealed ? "Hide password" : "Show password");
-
-   const trailingControl =
-      revealToggle === false ? undefined : (
-         <button
-            type="button"
-            onClick={handleToggleReveal}
-            aria-label={toggleLabel}
-            tabIndex={-1}
-            className={cn(
-               "inline-flex h-full items-center justify-center px-3 text-muted-foreground transition-colors hover:text-foreground hover:bg-muted/50 focus-visible:outline-none focus-visible:bg-muted/50",
-               toggleButtonClassName,
-            )}
-            data-slot="password-toggle"
-         >
-            {renderToggleIcon ? (
-               renderToggleIcon(revealed)
-            ) : revealed ? (
-               <EyeOff className="h-4 w-4" />
-            ) : (
-               <Eye className="h-4 w-4" />
-            )}
-         </button>
-      );
-
-   const meterNode =
-      normalizedStrength && meterState
-         ? renderMeter?.(meterState) ??
-         (strengthMeter && (
-            <div
-               className={cn(
-                  normalizedStrength.display === "block"
-                     ? "mt-2 space-y-2"
-                     : "mt-1.5 flex flex-col gap-0",
-                  meterWrapperClassName,
-               )}
-               data-slot="password-meter"
-            >
-               {/* Progress Bar Row */}
-               <div
-                  className={cn(
-                     "flex w-full items-center gap-3",
-                     meterContainerClassName,
-                  )}
-               >
-                  <div className="flex-1">
-                     {/* Reduced height from h-2 to h-1 */}
-                     <div className="h-1 w-full overflow-hidden rounded-full bg-secondary">
-                        <div
-                           className={cn(
-                              "h-full transition-all duration-300 ease-out",
-                              meterColor(meterState.score),
-                              meterBarClassName,
-                           )}
-                           style={{ width: `${meterState.percent}%` }}
-                        />
-                     </div>
-                  </div>
-
-                  {normalizedStrength.showLabel !== false && (
-                     <div
-                        className={cn(
-                           "min-w-[4rem] text-right text-[10px] font-medium uppercase tracking-wider text-muted-foreground",
-                           meterLabelClassName,
-                        )}
-                     >
-                        {meterState.label}
-                     </div>
-                  )}
-               </div>
-
-               {/* New Modern Chips for Rules */}
-               {meterStyle === "rules" &&
-                  meterState.rules.length > 0 && (
-                     <div
-                        className={cn(
-                           "flex flex-wrap gap-1.5 pt-1",
-                           rulesWrapperClassName,
-                        )}
-                     >
-                        {meterState.rules.map((rule) => (
-                           <span
-                              key={rule.key}
-                              className={cn(
-                                 "inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-[10px] font-medium transition-colors duration-200",
-                                 rule.passed
-                                    ? "border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:border-emerald-400/20 dark:bg-emerald-400/10 dark:text-emerald-400"
-                                    : "border-transparent bg-secondary text-muted-foreground",
-                                 ruleItemClassName
-                              )}
-                           >
-                              {rule.passed && (
-                                 <Check className="h-3 w-3" strokeWidth={3} />
-                              )}
-                              {rule.label}
-                           </span>
-                        ))}
-                     </div>
-                  )}
-            </div>
-         ))
-         : null;
-
-   return (
-      <div className={cn("group/password w-full", className)} data-slot="password-field">
-         <Input
-            ref={ref}
-            {...restTextProps}
-            type={revealed ? "text" : "password"}
-            value={value ?? ""}
-            onChange={handleChange}
-            maxLength={maxLength}
-            autoComplete={autoComplete}
-            trailingControl={trailingControl}
-            aria-invalid={error ? "true" : undefined}
-         />
-         {meterNode}
-      </div>
-   );
-});
-
-ShadcnPasswordVariant.displayName = "ShadcnPasswordVariant";
-
-export default ShadcnPasswordVariant;