@accreditation/ui 1.0.0

package/dist/components/molecules/input-otp/components/input-otp.js

@@ -0,0 +1,180 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var utils = require('../../../../lib/utils');
+var variants = require('../variants');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+const InputOTPContext = React__namespace.createContext(null);
+const InputOTPRoot = React__namespace.forwardRef(
+  (props, ref) => {
+    const {
+      value: controlledValue,
+      defaultValue = "",
+      onValueChange,
+      onChange,
+      maxLength = 6,
+      disabled,
+      variant = "default",
+      children,
+      style,
+      className
+    } = props;
+    const [uncontrolledValue, setUncontrolledValue] = React__namespace.useState(defaultValue);
+    const isControlled = controlledValue !== void 0;
+    const value = isControlled ? controlledValue : uncontrolledValue;
+    const slotRefs = React__namespace.useRef([]);
+    const setValue = React__namespace.useCallback(
+      (next) => {
+        const clipped = next.slice(0, maxLength).replace(/\D/g, "");
+        if (isControlled) {
+          onValueChange?.(clipped);
+          onChange?.(clipped);
+        } else {
+          setUncontrolledValue(clipped);
+          onValueChange?.(clipped);
+          onChange?.(clipped);
+        }
+      },
+      [maxLength, isControlled, onValueChange, onChange]
+    );
+    const ctx = {
+      value,
+      setValue,
+      maxLength,
+      disabled,
+      variant,
+      slotRefs
+    };
+    const { root: rootClasses } = variants.getInputOTPVariantClasses(variant);
+    const {
+      type: _type,
+      name: _name,
+      autoComplete: _autoComplete,
+      onBlur: _onBlur,
+      onFocus: _onFocus,
+      ...divProps
+    } = props;
+    return /* @__PURE__ */ jsxRuntime.jsx(InputOTPContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: utils.cn(
+          rootClasses,
+          disabled && variants.inputOTPRootDisabledClasses,
+          className
+        ),
+        style,
+        ...divProps,
+        children
+      }
+    ) });
+  }
+);
+InputOTPRoot.displayName = "InputOTP.Root";
+function InputOTPGroup(props) {
+  const { children, style, className } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils.cn(variants.inputOTPGroupClasses, className), style, children });
+}
+InputOTPGroup.displayName = "InputOTP.Group";
+function InputOTPSlot(props) {
+  const { index, style, className } = props;
+  const ctx = React__namespace.useContext(InputOTPContext);
+  if (!ctx) return /* @__PURE__ */ jsxRuntime.jsx("input", { readOnly: true, "aria-hidden": true, className: "w-10" });
+  const { value, setValue, maxLength, disabled, variant, slotRefs } = ctx;
+  if (index < 0 || index >= maxLength) return null;
+  const char = value[index] ?? "";
+  const inputRef = (el) => {
+    slotRefs.current[index] = el;
+  };
+  const handleChange = (e) => {
+    const raw = e.target.value;
+    if (raw.length > 1) {
+      const digits = raw.replace(/\D/g, "").slice(0, maxLength);
+      const next2 = value.split("");
+      for (let i = 0; i < digits.length && index + i < maxLength; i++) {
+        next2[index + i] = digits[i] ?? "";
+      }
+      setValue(next2.join(""));
+      const nextIdx = Math.min(index + digits.length, maxLength - 1);
+      slotRefs.current[nextIdx]?.focus();
+      return;
+    }
+    const digit = raw.replace(/\D/g, "")[0] ?? "";
+    const next = value.split("");
+    next[index] = digit;
+    setValue(next.join(""));
+    if (digit && index < maxLength - 1) {
+      slotRefs.current[index + 1]?.focus();
+    }
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Backspace" && !char && index > 0) {
+      slotRefs.current[index - 1]?.focus();
+    }
+  };
+  const { slot: slotClasses } = variants.getInputOTPVariantClasses(variant);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "input",
+    {
+      ref: inputRef,
+      type: "text",
+      inputMode: "numeric",
+      autoComplete: "one-time-code",
+      maxLength,
+      "aria-label": `D\xEDgito ${index + 1} de ${maxLength}`,
+      value: char,
+      disabled,
+      className: utils.cn(slotClasses, className),
+      style,
+      onChange: handleChange,
+      onKeyDown: handleKeyDown
+    }
+  );
+}
+InputOTPSlot.displayName = "InputOTP.Slot";
+function InputOTPSeparator(props) {
+  const { children, style, className } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      className: utils.cn(variants.inputOTPSeparatorWrapperClasses, className),
+      style,
+      "aria-hidden": true,
+      children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: variants.inputOTPSeparatorTextClasses, children: children ?? "\u2212" })
+    }
+  );
+}
+InputOTPSeparator.displayName = "InputOTP.Separator";
+const InputOTP = Object.assign(InputOTPRoot, {
+  Root: InputOTPRoot,
+  Group: InputOTPGroup,
+  Slot: InputOTPSlot,
+  Separator: InputOTPSeparator
+});
+
+exports.InputOTP = InputOTP;
+exports.InputOTPGroup = InputOTPGroup;
+exports.InputOTPRoot = InputOTPRoot;
+exports.InputOTPSeparator = InputOTPSeparator;
+exports.InputOTPSlot = InputOTPSlot;

package/dist/components/molecules/input-otp/components/input-otp.mjs

@@ -0,0 +1,154 @@
+import { jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { cn } from '../../../../lib/utils';
+import { getInputOTPVariantClasses, inputOTPRootDisabledClasses, inputOTPSeparatorTextClasses, inputOTPSeparatorWrapperClasses, inputOTPGroupClasses } from '../variants';
+
+const InputOTPContext = React.createContext(null);
+const InputOTPRoot = React.forwardRef(
+  (props, ref) => {
+    const {
+      value: controlledValue,
+      defaultValue = "",
+      onValueChange,
+      onChange,
+      maxLength = 6,
+      disabled,
+      variant = "default",
+      children,
+      style,
+      className
+    } = props;
+    const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue);
+    const isControlled = controlledValue !== void 0;
+    const value = isControlled ? controlledValue : uncontrolledValue;
+    const slotRefs = React.useRef([]);
+    const setValue = React.useCallback(
+      (next) => {
+        const clipped = next.slice(0, maxLength).replace(/\D/g, "");
+        if (isControlled) {
+          onValueChange?.(clipped);
+          onChange?.(clipped);
+        } else {
+          setUncontrolledValue(clipped);
+          onValueChange?.(clipped);
+          onChange?.(clipped);
+        }
+      },
+      [maxLength, isControlled, onValueChange, onChange]
+    );
+    const ctx = {
+      value,
+      setValue,
+      maxLength,
+      disabled,
+      variant,
+      slotRefs
+    };
+    const { root: rootClasses } = getInputOTPVariantClasses(variant);
+    const {
+      type: _type,
+      name: _name,
+      autoComplete: _autoComplete,
+      onBlur: _onBlur,
+      onFocus: _onFocus,
+      ...divProps
+    } = props;
+    return /* @__PURE__ */ jsx(InputOTPContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          rootClasses,
+          disabled && inputOTPRootDisabledClasses,
+          className
+        ),
+        style,
+        ...divProps,
+        children
+      }
+    ) });
+  }
+);
+InputOTPRoot.displayName = "InputOTP.Root";
+function InputOTPGroup(props) {
+  const { children, style, className } = props;
+  return /* @__PURE__ */ jsx("div", { className: cn(inputOTPGroupClasses, className), style, children });
+}
+InputOTPGroup.displayName = "InputOTP.Group";
+function InputOTPSlot(props) {
+  const { index, style, className } = props;
+  const ctx = React.useContext(InputOTPContext);
+  if (!ctx) return /* @__PURE__ */ jsx("input", { readOnly: true, "aria-hidden": true, className: "w-10" });
+  const { value, setValue, maxLength, disabled, variant, slotRefs } = ctx;
+  if (index < 0 || index >= maxLength) return null;
+  const char = value[index] ?? "";
+  const inputRef = (el) => {
+    slotRefs.current[index] = el;
+  };
+  const handleChange = (e) => {
+    const raw = e.target.value;
+    if (raw.length > 1) {
+      const digits = raw.replace(/\D/g, "").slice(0, maxLength);
+      const next2 = value.split("");
+      for (let i = 0; i < digits.length && index + i < maxLength; i++) {
+        next2[index + i] = digits[i] ?? "";
+      }
+      setValue(next2.join(""));
+      const nextIdx = Math.min(index + digits.length, maxLength - 1);
+      slotRefs.current[nextIdx]?.focus();
+      return;
+    }
+    const digit = raw.replace(/\D/g, "")[0] ?? "";
+    const next = value.split("");
+    next[index] = digit;
+    setValue(next.join(""));
+    if (digit && index < maxLength - 1) {
+      slotRefs.current[index + 1]?.focus();
+    }
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Backspace" && !char && index > 0) {
+      slotRefs.current[index - 1]?.focus();
+    }
+  };
+  const { slot: slotClasses } = getInputOTPVariantClasses(variant);
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      ref: inputRef,
+      type: "text",
+      inputMode: "numeric",
+      autoComplete: "one-time-code",
+      maxLength,
+      "aria-label": `D\xEDgito ${index + 1} de ${maxLength}`,
+      value: char,
+      disabled,
+      className: cn(slotClasses, className),
+      style,
+      onChange: handleChange,
+      onKeyDown: handleKeyDown
+    }
+  );
+}
+InputOTPSlot.displayName = "InputOTP.Slot";
+function InputOTPSeparator(props) {
+  const { children, style, className } = props;
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(inputOTPSeparatorWrapperClasses, className),
+      style,
+      "aria-hidden": true,
+      children: /* @__PURE__ */ jsx("span", { className: inputOTPSeparatorTextClasses, children: children ?? "\u2212" })
+    }
+  );
+}
+InputOTPSeparator.displayName = "InputOTP.Separator";
+const InputOTP = Object.assign(InputOTPRoot, {
+  Root: InputOTPRoot,
+  Group: InputOTPGroup,
+  Slot: InputOTPSlot,
+  Separator: InputOTPSeparator
+});
+
+export { InputOTP, InputOTPGroup, InputOTPRoot, InputOTPSeparator, InputOTPSlot };

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

@@ -0,0 +1,4 @@
+export * from "./components/input-otp";
+export * from "./types";
+export * from "./variants";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/input-otp/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC;AACvC,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC"}

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

@@ -0,0 +1,26 @@
+'use strict';
+
+var inputOtp = require('./components/input-otp');
+var types = require('./types');
+var variants = require('./variants');
+
+
+
+Object.keys(inputOtp).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return inputOtp[k]; }
+	});
+});
+Object.keys(types).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return types[k]; }
+	});
+});
+Object.keys(variants).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return variants[k]; }
+	});
+});

package/dist/components/molecules/input-otp/index.mjs

@@ -0,0 +1,3 @@
+export * from './components/input-otp';
+export * from './types';
+export * from './variants';

package/dist/components/molecules/input-otp/input-otp.d.ts

@@ -0,0 +1,2 @@
+export * from "./components/input-otp";
+//# sourceMappingURL=input-otp.d.ts.map

package/dist/components/molecules/input-otp/input-otp.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-otp.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/input-otp/input-otp.tsx"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC"}

package/dist/components/molecules/input-otp/input-otp.js

@@ -0,0 +1,12 @@
+'use strict';
+
+var inputOtp = require('./components/input-otp');
+
+
+
+Object.keys(inputOtp).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return inputOtp[k]; }
+	});
+});

package/dist/components/molecules/input-otp/input-otp.mjs

@@ -0,0 +1 @@
+export * from './components/input-otp';

package/dist/components/molecules/input-otp/types.d.ts

@@ -0,0 +1,37 @@
+import type { CSSProperties, ChangeEvent, KeyboardEvent, ReactNode } from "react";
+export type InputOTPVariant = "default" | "outlined" | "filled" | "underlined";
+export interface InputOTPContextValue {
+    value: string;
+    setValue: (next: string) => void;
+    maxLength: number;
+    disabled?: boolean;
+    variant?: InputOTPVariant;
+    slotRefs: React.MutableRefObject<(HTMLInputElement | null)[]>;
+}
+export interface InputOTPRootProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange" | "value" | "defaultValue"> {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    onChange?: (value: string) => void;
+    variant?: InputOTPVariant;
+    maxLength?: number;
+    disabled?: boolean;
+}
+export interface InputOTPGroupProps {
+    children: ReactNode;
+    style?: CSSProperties;
+    className?: string;
+}
+export interface InputOTPSlotProps {
+    index: number;
+    style?: CSSProperties;
+    className?: string;
+}
+export interface InputOTPSeparatorProps {
+    children?: ReactNode;
+    style?: CSSProperties;
+    className?: string;
+}
+export type InputOTPChangeEvent = ChangeEvent<HTMLInputElement>;
+export type InputOTPKeyDownEvent = KeyboardEvent<HTMLInputElement>;
+//# sourceMappingURL=types.d.ts.map

package/dist/components/molecules/input-otp/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/input-otp/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,aAAa,EACb,WAAW,EACX,aAAa,EACb,SAAS,EACV,MAAM,OAAO,CAAC;AAEf,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,UAAU,GAAG,QAAQ,GAAG,YAAY,CAAC;AAE/E,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,QAAQ,EAAE,KAAK,CAAC,gBAAgB,CAAC,CAAC,gBAAgB,GAAG,IAAI,CAAC,EAAE,CAAC,CAAC;CAC/D;AAED,MAAM,WAAW,iBACf,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,UAAU,GAAG,OAAO,GAAG,cAAc,CAAC;IAChG,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,sBAAsB;IACrC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,MAAM,mBAAmB,GAAG,WAAW,CAAC,gBAAgB,CAAC,CAAC;AAChE,MAAM,MAAM,oBAAoB,GAAG,aAAa,CAAC,gBAAgB,CAAC,CAAC"}

package/dist/components/molecules/input-otp/types.js

@@ -0,0 +1,2 @@
+'use strict';
+

package/dist/components/molecules/input-otp/types.mjs

@@ -0,0 +1 @@
+

package/dist/components/molecules/input-otp/variants.d.ts

@@ -0,0 +1,14 @@
+import type { InputOTPVariant } from "./types";
+export declare const inputOTPRootBaseClasses = "inline-flex items-center gap-0 transition-[border-color,box-shadow] duration-150 focus-within:outline-none";
+export declare const inputOTPRootVariants: Record<InputOTPVariant, string>;
+export declare const inputOTPRootDisabledClasses = "pointer-events-none opacity-[var(--disabled-opacity)]";
+export declare const inputOTPGroupClasses = "flex items-center gap-1";
+export declare const inputOTPSlotBaseClasses = "h-12 w-12 border-0 bg-transparent p-0 text-center text-xl font-bold text-foreground outline-none transition-all duration-150";
+export declare const inputOTPSlotVariants: Record<InputOTPVariant, string>;
+export declare const inputOTPSeparatorWrapperClasses = "inline-flex items-center justify-center";
+export declare const inputOTPSeparatorTextClasses = "text-xs text-muted-foreground";
+export declare function getInputOTPVariantClasses(variant?: InputOTPVariant): {
+    root: string;
+    slot: string;
+};
+//# sourceMappingURL=variants.d.ts.map

package/dist/components/molecules/input-otp/variants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"variants.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/input-otp/variants.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE/C,eAAO,MAAM,uBAAuB,+GAC0E,CAAC;AAE/G,eAAO,MAAM,oBAAoB,EAAE,MAAM,CAAC,eAAe,EAAE,MAAM,CAKhE,CAAC;AAEF,eAAO,MAAM,2BAA2B,0DACiB,CAAC;AAE1D,eAAO,MAAM,oBAAoB,4BAA4B,CAAC;AAE9D,eAAO,MAAM,uBAAuB,iIAC4F,CAAC;AAEjI,eAAO,MAAM,oBAAoB,EAAE,MAAM,CAAC,eAAe,EAAE,MAAM,CAKhE,CAAC;AAEF,eAAO,MAAM,+BAA+B,4CACD,CAAC;AAE5C,eAAO,MAAM,4BAA4B,kCACR,CAAC;AAElC,wBAAgB,yBAAyB,CAAC,OAAO,GAAE,eAA2B;;;EAK7E"}

package/dist/components/molecules/input-otp/variants.js

@@ -0,0 +1,38 @@
+'use strict';
+
+var utils = require('../../../lib/utils');
+
+const inputOTPRootBaseClasses = "inline-flex items-center gap-0 transition-[border-color,box-shadow] duration-150 focus-within:outline-none";
+const inputOTPRootVariants = {
+  default: "rounded-md border border-border bg-background p-1 focus-within:ring-2 focus-within:ring-ring",
+  outlined: "gap-2",
+  filled: "gap-2",
+  underlined: "gap-2"
+};
+const inputOTPRootDisabledClasses = "pointer-events-none opacity-[var(--disabled-opacity)]";
+const inputOTPGroupClasses = "flex items-center gap-1";
+const inputOTPSlotBaseClasses = "h-12 w-12 border-0 bg-transparent p-0 text-center text-xl font-bold text-foreground outline-none transition-all duration-150";
+const inputOTPSlotVariants = {
+  default: "",
+  outlined: "border border-input rounded-md focus:border-primary focus:ring-1 focus:ring-primary",
+  filled: "bg-muted rounded-md focus:bg-background focus:ring-1 focus:ring-primary",
+  underlined: "border-b-2 border-muted rounded-none focus:border-primary px-1"
+};
+const inputOTPSeparatorWrapperClasses = "inline-flex items-center justify-center";
+const inputOTPSeparatorTextClasses = "text-xs text-muted-foreground";
+function getInputOTPVariantClasses(variant = "default") {
+  return {
+    root: utils.cn(inputOTPRootBaseClasses, inputOTPRootVariants[variant]),
+    slot: utils.cn(inputOTPSlotBaseClasses, inputOTPSlotVariants[variant])
+  };
+}
+
+exports.getInputOTPVariantClasses = getInputOTPVariantClasses;
+exports.inputOTPGroupClasses = inputOTPGroupClasses;
+exports.inputOTPRootBaseClasses = inputOTPRootBaseClasses;
+exports.inputOTPRootDisabledClasses = inputOTPRootDisabledClasses;
+exports.inputOTPRootVariants = inputOTPRootVariants;
+exports.inputOTPSeparatorTextClasses = inputOTPSeparatorTextClasses;
+exports.inputOTPSeparatorWrapperClasses = inputOTPSeparatorWrapperClasses;
+exports.inputOTPSlotBaseClasses = inputOTPSlotBaseClasses;
+exports.inputOTPSlotVariants = inputOTPSlotVariants;

package/dist/components/molecules/input-otp/variants.mjs

@@ -0,0 +1,28 @@
+import { cn } from '../../../lib/utils';
+
+const inputOTPRootBaseClasses = "inline-flex items-center gap-0 transition-[border-color,box-shadow] duration-150 focus-within:outline-none";
+const inputOTPRootVariants = {
+  default: "rounded-md border border-border bg-background p-1 focus-within:ring-2 focus-within:ring-ring",
+  outlined: "gap-2",
+  filled: "gap-2",
+  underlined: "gap-2"
+};
+const inputOTPRootDisabledClasses = "pointer-events-none opacity-[var(--disabled-opacity)]";
+const inputOTPGroupClasses = "flex items-center gap-1";
+const inputOTPSlotBaseClasses = "h-12 w-12 border-0 bg-transparent p-0 text-center text-xl font-bold text-foreground outline-none transition-all duration-150";
+const inputOTPSlotVariants = {
+  default: "",
+  outlined: "border border-input rounded-md focus:border-primary focus:ring-1 focus:ring-primary",
+  filled: "bg-muted rounded-md focus:bg-background focus:ring-1 focus:ring-primary",
+  underlined: "border-b-2 border-muted rounded-none focus:border-primary px-1"
+};
+const inputOTPSeparatorWrapperClasses = "inline-flex items-center justify-center";
+const inputOTPSeparatorTextClasses = "text-xs text-muted-foreground";
+function getInputOTPVariantClasses(variant = "default") {
+  return {
+    root: cn(inputOTPRootBaseClasses, inputOTPRootVariants[variant]),
+    slot: cn(inputOTPSlotBaseClasses, inputOTPSlotVariants[variant])
+  };
+}
+
+export { getInputOTPVariantClasses, inputOTPGroupClasses, inputOTPRootBaseClasses, inputOTPRootDisabledClasses, inputOTPRootVariants, inputOTPSeparatorTextClasses, inputOTPSeparatorWrapperClasses, inputOTPSlotBaseClasses, inputOTPSlotVariants };

package/dist/components/molecules/layout-text-flip/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./layout-text-flip";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/molecules/layout-text-flip/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/layout-text-flip/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC"}

package/dist/components/molecules/layout-text-flip/index.js

@@ -0,0 +1,12 @@
+'use strict';
+
+var layoutTextFlip = require('./layout-text-flip');
+
+
+
+Object.keys(layoutTextFlip).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return layoutTextFlip[k]; }
+	});
+});

package/dist/components/molecules/layout-text-flip/index.mjs

@@ -0,0 +1 @@
+export * from './layout-text-flip';

package/dist/components/molecules/layout-text-flip/layout-text-flip.d.ts

@@ -0,0 +1,6 @@
+export declare const LayoutTextFlip: ({ text, words, duration, }: {
+    text: string;
+    words: string[];
+    duration?: number;
+}) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=layout-text-flip.d.ts.map

package/dist/components/molecules/layout-text-flip/layout-text-flip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout-text-flip.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/layout-text-flip/layout-text-flip.tsx"],"names":[],"mappings":"AAQA,eAAO,MAAM,cAAc,GAAI,4BAI5B;IACD,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,4CA2CA,CAAC"}

package/dist/components/molecules/layout-text-flip/layout-text-flip.js

@@ -0,0 +1,56 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var react$1 = require('motion/react');
+var utils = require('../../../lib/utils');
+
+const LayoutTextFlip = ({
+  text = "Build Amazing",
+  words = ["Landing Pages", "Component Blocks", "Page Sections", "3D Shaders"],
+  duration = 3e3
+}) => {
+  const [currentIndex, setCurrentIndex] = react.useState(0);
+  react.useEffect(() => {
+    const interval = setInterval(() => {
+      setCurrentIndex((prevIndex) => (prevIndex + 1) % words.length);
+    }, duration);
+    return () => clearInterval(interval);
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      react$1.motion.span,
+      {
+        layoutId: "subtext",
+        className: "text-2xl font-bold tracking-tight drop-shadow-lg md:text-4xl",
+        children: text
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      react$1.motion.span,
+      {
+        layout: true,
+        className: "relative w-fit overflow-hidden rounded-md border border-transparent bg-white px-4 py-2 font-sans text-2xl font-bold tracking-tight text-black shadow-sm ring shadow-black/10 ring-black/10 drop-shadow-lg md:text-4xl dark:bg-neutral-900 dark:text-white dark:shadow-sm dark:ring-1 dark:shadow-white/10 dark:ring-white/10",
+        children: /* @__PURE__ */ jsxRuntime.jsx(react$1.AnimatePresence, { mode: "popLayout", children: /* @__PURE__ */ jsxRuntime.jsx(
+          react$1.motion.span,
+          {
+            initial: { y: -40, filter: "blur(10px)" },
+            animate: {
+              y: 0,
+              filter: "blur(0px)"
+            },
+            exit: { y: 50, filter: "blur(10px)", opacity: 0 },
+            transition: {
+              duration: 0.5
+            },
+            className: utils.cn("inline-block whitespace-nowrap"),
+            children: words[currentIndex]
+          },
+          currentIndex
+        ) })
+      }
+    )
+  ] });
+};
+
+exports.LayoutTextFlip = LayoutTextFlip;