@lerianstudio/sindarian-ui 1.2.0-beta.8 → 1.2.0-beta.9

package/dist/components/form/index.d.ts

@@ -8,5 +8,6 @@ export * from './state-field';
 export * from './date-range-field';
 export * from './date-picker-field';
 export * from './date-time-picker-field';
+export * from './otp-field';
 export * from './password-field';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/form/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/form/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAA;AAC7B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,0BAA0B,CAAA;AACxC,cAAc,mBAAmB,CAAA;AACjC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,eAAe,CAAA;AAC7B,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,0BAA0B,CAAA;AACxC,cAAc,kBAAkB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/form/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAA;AAC7B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,0BAA0B,CAAA;AACxC,cAAc,mBAAmB,CAAA;AACjC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,eAAe,CAAA;AAC7B,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,0BAA0B,CAAA;AACxC,cAAc,aAAa,CAAA;AAC3B,cAAc,kBAAkB,CAAA"}

package/dist/components/form/index.js

@@ -24,4 +24,5 @@ __exportStar(require("./state-field"), exports);
 __exportStar(require("./date-range-field"), exports);
 __exportStar(require("./date-picker-field"), exports);
 __exportStar(require("./date-time-picker-field"), exports);
+__exportStar(require("./otp-field"), exports);
 __exportStar(require("./password-field"), exports);

package/dist/components/form/otp-field/index.d.ts

@@ -0,0 +1,18 @@
+import { ReactNode } from 'react';
+import { Control, FieldValues } from 'react-hook-form';
+export type OtpFieldProps<T extends FieldValues = FieldValues> = {
+    name: string;
+    label?: ReactNode;
+    tooltip?: string;
+    labelExtra?: ReactNode;
+    description?: ReactNode;
+    control: Control<T>;
+    disabled?: boolean;
+    required?: boolean;
+    maxLength?: number;
+    pattern?: string;
+    separator?: boolean;
+    'data-testid'?: string;
+};
+export declare const OtpField: <T extends FieldValues = FieldValues>({ name, label, tooltip, labelExtra, description, maxLength, pattern, separator, ...others }: OtpFieldProps<T>) => import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/form/otp-field/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/form/otp-field/index.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,OAAO,EAAE,WAAW,EAAQ,MAAM,iBAAiB,CAAA;AAE5D,MAAM,MAAM,aAAa,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,IAAI;IAC/D,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,CAAA;AAED,eAAO,MAAM,QAAQ,GAAI,CAAC,SAAS,WAAW,GAAG,WAAW,EAAE,6FAU3D,aAAa,CAAC,CAAC,CAAC,gCAmElB,CAAA"}

package/dist/components/form/otp-field/index.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OtpField = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const form_1 = require("../../../components/ui/form");
+const otp_input_1 = require("../../../components/ui/otp-input");
+const OtpField = ({ name, label, tooltip, labelExtra, description, maxLength = 6, pattern, separator = false, ...others }) => {
+    const midpoint = Math.floor(maxLength / 2);
+    const renderSlots = () => {
+        if (separator && maxLength > 1) {
+            const firstGroup = Array.from({ length: midpoint }, (_, i) => ((0, jsx_runtime_1.jsx)(otp_input_1.InputOTPSlot, { index: i }, i)));
+            const secondGroup = Array.from({ length: maxLength - midpoint }, (_, i) => (0, jsx_runtime_1.jsx)(otp_input_1.InputOTPSlot, { index: midpoint + i }, midpoint + i));
+            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(otp_input_1.InputOTPGroup, { children: firstGroup }), (0, jsx_runtime_1.jsx)(otp_input_1.InputOTPSeparator, {}), (0, jsx_runtime_1.jsx)(otp_input_1.InputOTPGroup, { children: secondGroup })] }));
+        }
+        return ((0, jsx_runtime_1.jsx)(otp_input_1.InputOTPGroup, { children: Array.from({ length: maxLength }, (_, i) => ((0, jsx_runtime_1.jsx)(otp_input_1.InputOTPSlot, { index: i }, i))) }));
+    };
+    return ((0, jsx_runtime_1.jsx)(form_1.FormField, { ...others, name: name, render: ({ field }) => ((0, jsx_runtime_1.jsxs)(form_1.FormItem, { required: others.required, children: [label && ((0, jsx_runtime_1.jsx)(form_1.FormLabel, { extra: tooltip ? (0, jsx_runtime_1.jsx)(form_1.FormTooltip, { children: tooltip }) : labelExtra, children: label })), (0, jsx_runtime_1.jsx)(form_1.FormControl, { children: (0, jsx_runtime_1.jsx)(otp_input_1.InputOTP, { maxLength: maxLength, pattern: pattern, value: field.value ?? '', onChange: field.onChange, onBlur: field.onBlur, ref: field.ref, name: field.name, disabled: others.disabled, "data-testid": others['data-testid'], children: renderSlots() }) }), (0, jsx_runtime_1.jsx)(form_1.FormMessage, {}), description && (0, jsx_runtime_1.jsx)(form_1.FormDescription, { children: description })] })) }));
+};
+exports.OtpField = OtpField;

package/dist/components/ui/otp-input/index.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { OTPInput } from 'input-otp';
+declare function InputOTP({ className, containerClassName, ...props }: React.ComponentProps<typeof OTPInput> & {
+    containerClassName?: string;
+}): React.JSX.Element;
+declare function InputOTPGroup({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function InputOTPSlot({ index, className, ...props }: React.ComponentProps<'div'> & {
+    index: number;
+}): React.JSX.Element;
+declare function InputOTPSeparator({ ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator };
+export { REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS } from 'input-otp';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/ui/otp-input/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/otp-input/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,QAAQ,EAAmB,MAAM,WAAW,CAAA;AAKrD,iBAAS,QAAQ,CAAC,EAChB,SAAS,EACT,kBAAkB,EAClB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,GAAG;IAAE,kBAAkB,CAAC,EAAE,MAAM,CAAA;CAAE,qBAYzE;AAED,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAQ7B;AAED,iBAAS,YAAY,CAAC,EACpB,KAAK,EACL,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,qBAwBjD;AAED,iBAAS,iBAAiB,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAMnE;AAED,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,YAAY,EAAE,iBAAiB,EAAE,CAAA;AACnE,OAAO,EAAE,kBAAkB,EAAE,4BAA4B,EAAE,MAAM,WAAW,CAAA"}

package/dist/components/ui/otp-input/index.js

@@ -0,0 +1,62 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.REGEXP_ONLY_DIGITS_AND_CHARS = exports.REGEXP_ONLY_DIGITS = void 0;
+exports.InputOTP = InputOTP;
+exports.InputOTPGroup = InputOTPGroup;
+exports.InputOTPSlot = InputOTPSlot;
+exports.InputOTPSeparator = InputOTPSeparator;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const input_otp_1 = require("input-otp");
+const lucide_react_1 = require("lucide-react");
+const utils_1 = require("../../../lib/utils");
+function InputOTP({ className, containerClassName, ...props }) {
+    return ((0, jsx_runtime_1.jsx)(input_otp_1.OTPInput, { "data-slot": "input-otp", containerClassName: (0, utils_1.cn)('flex items-center gap-2 has-disabled:opacity-50', containerClassName), className: (0, utils_1.cn)('disabled:cursor-not-allowed', className), ...props }));
+}
+function InputOTPGroup({ className, ...props }) {
+    return ((0, jsx_runtime_1.jsx)("div", { "data-slot": "input-otp-group", className: (0, utils_1.cn)('flex items-center', className), ...props }));
+}
+function InputOTPSlot({ index, className, ...props }) {
+    const inputOTPContext = React.useContext(input_otp_1.OTPInputContext);
+    const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {};
+    return ((0, jsx_runtime_1.jsxs)("div", { "data-slot": "input-otp-slot", "data-active": isActive, className: (0, utils_1.cn)('border-input-border bg-background text-foreground', 'relative flex h-14 w-12 items-center justify-center border-y border-r text-2xl font-semibold shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md', 'data-[active=true]:z-10 data-[active=true]:border-ring data-[active=true]:ring-2 data-[active=true]:ring-ring/50', className), ...props, children: [char, hasFakeCaret && ((0, jsx_runtime_1.jsx)("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: (0, jsx_runtime_1.jsx)("div", { className: "animate-caret-blink bg-foreground h-6 w-px duration-1000" }) }))] }));
+}
+function InputOTPSeparator({ ...props }) {
+    return ((0, jsx_runtime_1.jsx)("div", { "data-slot": "input-otp-separator", role: "separator", ...props, children: (0, jsx_runtime_1.jsx)(lucide_react_1.MinusIcon, {}) }));
+}
+var input_otp_2 = require("input-otp");
+Object.defineProperty(exports, "REGEXP_ONLY_DIGITS", { enumerable: true, get: function () { return input_otp_2.REGEXP_ONLY_DIGITS; } });
+Object.defineProperty(exports, "REGEXP_ONLY_DIGITS_AND_CHARS", { enumerable: true, get: function () { return input_otp_2.REGEXP_ONLY_DIGITS_AND_CHARS; } });

package/dist/globals.css

@@ -483,6 +483,22 @@
   }
 }
 
+@keyframes caret-blink {
+  0%,
+  70%,
+  100% {
+    opacity: 1;
+  }
+  20%,
+  50% {
+    opacity: 0;
+  }
+}
+
+@utility animate-caret-blink {
+  animation: caret-blink 1.25s ease-out infinite;
+}
+
 .ticket {
   mask: radial-gradient(21px 13px at 50% 102%, #0000 98%, #000) 50%
     calc(100% - 16px) / 64px 100% repeat-x;

package/dist/index.d.ts

@@ -14,6 +14,7 @@ export * from './components/ui/command';
 export * from './components/ui/dialog';
 export * from './components/ui/dropdown-menu';
 export * from './components/ui/input';
+export * from './components/ui/otp-input';
 export * from './components/ui/label';
 export * from './components/ui/loading-button';
 export * from './components/ui/multiple-select';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAGA,cAAc,uBAAuB,CAAA;AACrC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,mCAAmC,CAAA;AACjD,cAAc,wBAAwB,CAAA;AACtC,cAAc,uBAAuB,CAAA;AACrC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,wBAAwB,CAAA;AACtC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,0BAA0B,CAAA;AACxC,cAAc,sBAAsB,CAAA;AACpC,cAAc,0BAA0B,CAAA;AACxC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,yBAAyB,CAAA;AACvC,cAAc,wBAAwB,CAAA;AACtC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,uBAAuB,CAAA;AACrC,cAAc,uBAAuB,CAAA;AACrC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,iCAAiC,CAAA;AAC/C,cAAc,uBAAuB,CAAA;AACrC,cAAc,mCAAmC,CAAA;AACjD,cAAc,yBAAyB,CAAA;AACvC,cAAc,0BAA0B,CAAA;AACxC,cAAc,wBAAwB,CAAA;AACtC,cAAc,2BAA2B,CAAA;AACzC,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,0BAA0B,CAAA;AACxC,cAAc,yBAAyB,CAAA;AACvC,cAAc,qBAAqB,CAAA;AACnC,cAAc,wBAAwB,CAAA;AACtC,cAAc,uBAAuB,CAAA;AACrC,cAAc,sBAAsB,CAAA;AACpC,cAAc,0BAA0B,CAAA;AACxC,cAAc,uBAAuB,CAAA;AACrC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,mBAAmB,CAAA;AACjC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,yBAAyB,CAAA;AACvC,cAAc,sBAAsB,CAAA;AAGpC,OAAO,EAAE,UAAU,IAAI,qBAAqB,EAAE,MAAM,yBAAyB,CAAA;AAC7E,cAAc,8CAA8C,CAAA;AAC5D,cAAc,mBAAmB,CAAA;AACjC,cAAc,qBAAqB,CAAA;AACnC,cAAc,yBAAyB,CAAA;AACvC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,mBAAmB,CAAA;AACjC,cAAc,mBAAmB,CAAA;AACjC,cAAc,0BAA0B,CAAA;AACxC,cAAc,yBAAyB,CAAA;AACvC,cAAc,oBAAoB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAGA,cAAc,uBAAuB,CAAA;AACrC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,mCAAmC,CAAA;AACjD,cAAc,wBAAwB,CAAA;AACtC,cAAc,uBAAuB,CAAA;AACrC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,wBAAwB,CAAA;AACtC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,0BAA0B,CAAA;AACxC,cAAc,sBAAsB,CAAA;AACpC,cAAc,0BAA0B,CAAA;AACxC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,yBAAyB,CAAA;AACvC,cAAc,wBAAwB,CAAA;AACtC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,uBAAuB,CAAA;AACrC,cAAc,2BAA2B,CAAA;AACzC,cAAc,uBAAuB,CAAA;AACrC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,iCAAiC,CAAA;AAC/C,cAAc,uBAAuB,CAAA;AACrC,cAAc,mCAAmC,CAAA;AACjD,cAAc,yBAAyB,CAAA;AACvC,cAAc,0BAA0B,CAAA;AACxC,cAAc,wBAAwB,CAAA;AACtC,cAAc,2BAA2B,CAAA;AACzC,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,0BAA0B,CAAA;AACxC,cAAc,yBAAyB,CAAA;AACvC,cAAc,qBAAqB,CAAA;AACnC,cAAc,wBAAwB,CAAA;AACtC,cAAc,uBAAuB,CAAA;AACrC,cAAc,sBAAsB,CAAA;AACpC,cAAc,0BAA0B,CAAA;AACxC,cAAc,uBAAuB,CAAA;AACrC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,mBAAmB,CAAA;AACjC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,yBAAyB,CAAA;AACvC,cAAc,sBAAsB,CAAA;AAGpC,OAAO,EAAE,UAAU,IAAI,qBAAqB,EAAE,MAAM,yBAAyB,CAAA;AAC7E,cAAc,8CAA8C,CAAA;AAC5D,cAAc,mBAAmB,CAAA;AACjC,cAAc,qBAAqB,CAAA;AACnC,cAAc,yBAAyB,CAAA;AACvC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,mBAAmB,CAAA;AACjC,cAAc,mBAAmB,CAAA;AACjC,cAAc,0BAA0B,CAAA;AACxC,cAAc,yBAAyB,CAAA;AACvC,cAAc,oBAAoB,CAAA"}

package/dist/index.js

@@ -33,6 +33,7 @@ __exportStar(require("./components/ui/command"), exports);
 __exportStar(require("./components/ui/dialog"), exports);
 __exportStar(require("./components/ui/dropdown-menu"), exports);
 __exportStar(require("./components/ui/input"), exports);
+__exportStar(require("./components/ui/otp-input"), exports);
 __exportStar(require("./components/ui/label"), exports);
 __exportStar(require("./components/ui/loading-button"), exports);
 __exportStar(require("./components/ui/multiple-select"), exports);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lerianstudio/sindarian-ui",
-  "version": "1.2.0-beta.8",
+  "version": "1.2.0-beta.9",
   "description": "Sindarian UI - A UI library for Midaz Console",
   "license": "ISC",
   "author": {
@@ -45,14 +45,15 @@
     "@radix-ui/react-slot": "^1.3.0",
     "@radix-ui/react-switch": "^1.3.2",
     "@radix-ui/react-tabs": "^1.1.16",
-    "sonner": "^2.0.7",
     "@radix-ui/react-tooltip": "^1.2.11",
     "@tailwindcss/postcss": "^4.3.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
     "dayjs": "^1.11.21",
+    "input-otp": "^1.4.2",
     "postcss": "^8.5.16",
+    "sonner": "^2.0.7",
     "tailwind-merge": "^3.6.0",
     "tailwindcss": "^4.3.2",
     "tw-animate-css": "^1.4.0"
@@ -61,8 +62,8 @@
     "lodash": ">=4.17.0",
     "lucide-react": ">=0.536.0",
     "react": ">=19.0.0",
-    "react-dom": ">=19.0.0",
     "react-day-picker": ">=9.13.0",
+    "react-dom": ">=19.0.0",
     "react-hook-form": ">=7.60.0"
   },
   "devDependencies": {