@dimasbaguspm/versaur 0.0.46 → 0.0.48

package/dist/js/forms/index.js

@@ -1,4 +1,4 @@
-import { C as a, b as n, a as p, D as u, E as i, P as s, c as l, R as I, S, e as c, d as g, f as r, h, g as m, i as P, j as b, T as k, k as o } from "../time-picker-input-DrZ4dyEB.js";
+import { C as a, b as n, a as p, D as u, E as i, P as s, c as l, R as I, S, e as c, d as g, f as r, h, g as m, i as P, j as b, T as k, k as o } from "../time-picker-input-JBEgDV2V.js";
 export {
   a as CheckboxInput,
   n as ChipMultipleInput,

package/dist/js/index.js

@@ -1,6 +1,6 @@
 import { L as s, P as t, S as r } from "./skeleton-BNZyaRjo.js";
 import { A as n, a as p, B as u, b as i, F as l, f as c, P as I, c as S, d as g, e as d, S as m, T as B } from "./top-bar-Dx0JVXms.js";
-import { C as T, b as P, a as x, D as f, E as h, P as A, c as C, R as k, S as M, e as F, d as L, f as D, h as H, g as R, i as G, j, T as q, k as v } from "./time-picker-input-DrZ4dyEB.js";
+import { C as T, b as P, a as x, D as f, E as h, P as A, c as C, R as k, S as M, e as F, d as L, f as D, h as H, g as R, i as G, j, T as q, k as v } from "./time-picker-input-JBEgDV2V.js";
 import { B as y, D as E, M as N, T as z } from "./tooltip-D6fUigp2.js";
 import { A as K, a as O, b as Q, c as U, d as V, e as W, f as X, B as Y, r as Z, g as _, h as $, k as aa, i as ea, j as sa, C as ta, F as ra, H as oa, l as na, I as pa, o as ua, q as ia, p as la, M as ca, N as Ia, T as Sa, m as ga, n as da } from "./image-rectangle-B4nXH4Q5.js";
 import { S as Ba } from "./snackbar-DH8jCh2V.js";

package/dist/js/templates/index.js

@@ -0,0 +1 @@
+

package/dist/js/{time-picker-input-DrZ4dyEB.js → time-picker-input-JBEgDV2V.js}

@@ -606,7 +606,8 @@ const mr = m.forwardRef(function({ value: t = "", onChange: o, label: s, formatt
     }
   )
 ), Ce = v(
-  "w-12 h-12 text-center border rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none disabled:bg-gray-50 text-lg font-semibold",
+  // align sizing with TextInput which uses h-9; keep width slightly narrower for single-digit input
+  "w-9 h-9 text-center border rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none disabled:bg-gray-50 text-sm font-semibold",
   {
     variants: {
       variant: {
@@ -658,7 +659,6 @@ const mr = m.forwardRef(function({ value: t = "", onChange: o, label: s, formatt
       id: f,
       type: a ? "password" : "text",
       inputMode: "numeric",
-      pattern: "[0-9]*",
       maxLength: 1,
       value: a ? r ? "•" : "" : r,
       onChange: (h) => {

package/dist/types/templates/index.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/templates/pin-verifier-drawer/index.d.ts

@@ -0,0 +1,2 @@
+export { PinVerifierDrawer } from './pin-verifier-drawer';
+export type { PinVerifierDrawerProps, NumericKeypadProps } from './types';

package/dist/types/templates/pin-verifier-drawer/pin-verifier-drawer.atoms.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+import { NumericKeypadProps } from './types';
+/**
+ * NumericKeypad - A 3x4 grid of numbers (1-9, 0) with delete button
+ * Provides touch-friendly input for PIN entry in drawer mode
+ */
+export declare const NumericKeypad: React.FC<NumericKeypadProps>;

package/dist/types/templates/pin-verifier-drawer/pin-verifier-drawer.d.ts

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+import { PinVerifierDrawerProps } from './types';
+/**
+ * PinVerifierDrawer - A responsive PIN verification component
+ *
+ * Adapts between Modal (desktop) and Drawer (mobile) based on the `as` prop.
+ * For drawer mode, includes a numeric keypad for touch-friendly PIN entry.
+ * Provides complete PIN verification flow with proper accessibility and UX.
+ */
+export declare const PinVerifierDrawer: React.FC<PinVerifierDrawerProps>;

package/dist/types/templates/pin-verifier-drawer/types.d.ts

@@ -0,0 +1,102 @@
+import { ReactNode } from 'react';
+import { PinFieldProps } from '../../forms/pin-field';
+import { DrawerProps } from '../../overlays/drawer';
+import { ModalRootProps } from '../../overlays/modal';
+/**
+ * Pin verifier display mode
+ */
+export type PinVerifierAs = 'modal' | 'drawer';
+/**
+ * Base props for PinVerifierDrawer component
+ */
+export interface PinVerifierDrawerProps {
+    /**
+     * Whether the PIN verifier is open
+     */
+    isOpen: boolean;
+    /**
+     * Callback fired when the verifier should close
+     */
+    onClose: () => void;
+    /**
+     * Title to display in the header
+     */
+    title?: ReactNode;
+    /**
+     * Current PIN value (controlled)
+     */
+    value?: string;
+    /**
+     * Default PIN value (uncontrolled)
+     */
+    defaultValue?: string;
+    /**
+     * Callback fired when PIN value changes
+     */
+    onChange?: (value: string) => void;
+    /**
+     * Callback fired when PIN is completed (6 digits entered)
+     */
+    onComplete?: (value: string) => void;
+    /**
+     * Callback fired when verify button is clicked
+     */
+    onVerify?: (value: string) => void;
+    /**
+     * Whether to show PIN as dots for security
+     */
+    secure?: boolean;
+    /**
+     * Whether the component is in a loading state
+     */
+    loading?: boolean;
+    /**
+     * Error message for invalid PIN
+     */
+    error?: ReactNode;
+    /**
+     * Whether to show the numeric keypad (only shown for drawer mode)
+     */
+    showKeypad?: boolean;
+    /**
+     * Display mode - 'modal' for desktop, 'drawer' for mobile
+     */
+    as?: PinVerifierAs;
+    /**
+     * Custom verify button text
+     */
+    verifyButtonText?: string;
+    /**
+     * PIN field variant
+     */
+    variant?: PinFieldProps['variant'];
+    /**
+     * Additional props passed to Modal (when as='modal')
+     */
+    modalProps?: Partial<Omit<ModalRootProps, 'isOpen' | 'onClose' | 'children'>>;
+    /**
+     * Additional props passed to Drawer (when as='drawer')
+     */
+    drawerProps?: Partial<Omit<DrawerProps, 'isOpen' | 'onClose' | 'children'>>;
+}
+/**
+ * Props for the numeric keypad
+ */
+export interface NumericKeypadProps {
+    /**
+     * Callback fired when a number is pressed
+     */
+    onNumberPress: (digit: string) => void;
+    /**
+     * Callback fired when delete/backspace is pressed
+     */
+    onDelete: () => void;
+    /**
+     * Whether the keypad is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Size of the keypad buttons
+     */
+    size?: 'sm' | 'md' | 'lg';
+}

package/dist/utils/enforce-subpath-import.js

@@ -73,6 +73,7 @@ const symbolToSubpath = {
   "Tile": "primitive",
   "SnackbarsProvider": "providers",
   "useSnackbars": "providers",
+  "PinVerifierDrawer": "templates",
   "cn": "utils",
   "cva": "utils",
   "createVariants": "utils",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dimasbaguspm/versaur",
-  "version": "0.0.46",
+  "version": "0.0.48",
   "description": "React UI library with Tailwind CSS",
   "author": "Dimas Bagus Prayogo Mukti<dimas.bagus.pm@gmail.com>",
   "license": "MIT",
@@ -42,6 +42,10 @@
       "import": "./dist/js/providers/index.js",
       "types": "./dist/types/providers/index.d.ts"
     },
+    "./templates": {
+      "import": "./dist/js/templates/index.js",
+      "types": "./dist/types/templates/index.d.ts"
+    },
     "./styles.css": "./dist/assets/styles.css",
     "./eslint-subpath-import": "./dist/utils/enforce-subpath-import.js"
   },