@sikka/hawa
Version:
Modern UI Kit made with Tailwind
223 lines (205 loc) • 8.09 kB
JavaScript
"use client";
// elements/pinInput/PinInput.tsx
import * as React2 from "react";
// util/index.ts
import { clsx } from "clsx";
import { twMerge } from "tailwind-merge";
function cn(...inputs) {
return twMerge(clsx(inputs));
}
// elements/pinInput/PinInput.tsx
import { OTPInput, OTPInputContext } from "input-otp";
// ../../node_modules/.pnpm/lucide-react@0.417.0_react@18.3.1/node_modules/lucide-react/dist/esm/createLucideIcon.js
import { forwardRef as forwardRef2, createElement as createElement2 } from "react";
// ../../node_modules/.pnpm/lucide-react@0.417.0_react@18.3.1/node_modules/lucide-react/dist/esm/shared/src/utils.js
var toKebabCase = (string) => string.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
var mergeClasses = (...classes) => classes.filter((className, index, array) => {
return Boolean(className) && array.indexOf(className) === index;
}).join(" ");
// ../../node_modules/.pnpm/lucide-react@0.417.0_react@18.3.1/node_modules/lucide-react/dist/esm/Icon.js
import { forwardRef, createElement } from "react";
// ../../node_modules/.pnpm/lucide-react@0.417.0_react@18.3.1/node_modules/lucide-react/dist/esm/defaultAttributes.js
var defaultAttributes = {
xmlns: "http://www.w3.org/2000/svg",
width: 24,
height: 24,
viewBox: "0 0 24 24",
fill: "none",
stroke: "currentColor",
strokeWidth: 2,
strokeLinecap: "round",
strokeLinejoin: "round"
};
// ../../node_modules/.pnpm/lucide-react@0.417.0_react@18.3.1/node_modules/lucide-react/dist/esm/Icon.js
var Icon = forwardRef(
({
color = "currentColor",
size = 24,
strokeWidth = 2,
absoluteStrokeWidth,
className = "",
children,
iconNode,
...rest
}, ref) => {
return createElement(
"svg",
{
ref,
...defaultAttributes,
width: size,
height: size,
stroke: color,
strokeWidth: absoluteStrokeWidth ? Number(strokeWidth) * 24 / Number(size) : strokeWidth,
className: mergeClasses("lucide", className),
...rest
},
[
...iconNode.map(([tag, attrs]) => createElement(tag, attrs)),
...Array.isArray(children) ? children : [children]
]
);
}
);
// ../../node_modules/.pnpm/lucide-react@0.417.0_react@18.3.1/node_modules/lucide-react/dist/esm/createLucideIcon.js
var createLucideIcon = (iconName, iconNode) => {
const Component = forwardRef2(
({ className, ...props }, ref) => createElement2(Icon, {
ref,
iconNode,
className: mergeClasses(`lucide-${toKebabCase(iconName)}`, className),
...props
})
);
Component.displayName = `${iconName}`;
return Component;
};
// ../../node_modules/.pnpm/lucide-react@0.417.0_react@18.3.1/node_modules/lucide-react/dist/esm/icons/dot.js
var Dot = createLucideIcon("Dot", [
["circle", { cx: "12.1", cy: "12.1", r: "1", key: "18d7e5" }]
]);
// elements/helperText/HelperText.tsx
import React from "react";
var HelperText = ({ helperText }) => /* @__PURE__ */ React.createElement(
"p",
{
className: cn(
"hawa-my-0 hawa-text-start hawa-text-xs hawa-text-helper-color hawa-transition-all",
helperText ? "hawa-h-4 hawa-opacity-100" : "hawa-h-0 hawa-opacity-0"
)
},
helperText
);
// elements/pinInput/PinInput.tsx
var PinInputRoot = React2.forwardRef(({ className, containerClassName, ...props }, ref) => /* @__PURE__ */ React2.createElement(
OTPInput,
{
ref,
containerClassName: cn(
"hawa-flex hawa-items-center hawa-gap-2 has-[:disabled]:hawa-opacity-50",
containerClassName
),
className: cn("disabled:hawa-cursor-not-allowed", className),
...props
}
));
PinInputRoot.displayName = "PinInputRoot";
var PinInputGroup = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React2.createElement(
"div",
{
ref,
className: cn("hawa-flex hawa-items-center", className),
...props
}
));
PinInputGroup.displayName = "PinInputGroup";
var PinInputSlot = React2.forwardRef(({ index, className, ...props }, ref) => {
const pinInputContext = React2.useContext(OTPInputContext);
const { char, hasFakeCaret, isActive } = pinInputContext.slots[index];
return /* @__PURE__ */ React2.createElement(
"div",
{
ref,
className: cn(
"hawa-border-input hawa-relative hawa-flex hawa-h-10 hawa-w-10 hawa-items-center hawa-justify-center hawa-border-y hawa-border-r hawa-text-sm hawa-transition-all first:hawa-rounded-l-md first:hawa-border-l last:hawa-rounded-r-md",
isActive && "hawa-ring-ring hawa-ring-offset-background hawa-z-10 hawa-ring-2",
className
),
...props
},
char,
hasFakeCaret && /* @__PURE__ */ React2.createElement("div", { className: "hawa-pointer-events-none hawa-absolute hawa-inset-0 hawa-flex hawa-items-center hawa-justify-center" }, /* @__PURE__ */ React2.createElement("div", { className: "hawa-animate-caret-blink hawa-bg-foreground hawa-h-4 hawa-w-px hawa-duration-1000" }))
);
});
PinInputSlot.displayName = "PinInputSlot";
var PinInputSeperator = React2.forwardRef(({ ...props }, ref) => /* @__PURE__ */ React2.createElement("div", { ref, role: "separator", ...props }, /* @__PURE__ */ React2.createElement(Dot, null)));
PinInputSeperator.displayName = "PinInputSeperator";
var PinInput = ({
separatorPosition = 0,
...props
}) => {
const maxLength = props.maxLength || 6;
const clampedSeparatorPosition = Math.min(separatorPosition, maxLength);
const firstGroupLength = clampedSeparatorPosition > 0 ? clampedSeparatorPosition : 0;
const secondGroupLength = maxLength - firstGroupLength;
return /* @__PURE__ */ React2.createElement("div", { className: "hawa-flex hawa-flex-col hawa-gap-2" }, /* @__PURE__ */ React2.createElement(PinInputRoot, { ...props }, firstGroupLength > 0 && /* @__PURE__ */ React2.createElement(PinInputGroup, { className: "hawa-w-full" }, [...Array(firstGroupLength)].map((_, index) => /* @__PURE__ */ React2.createElement(PinInputSlot, { key: index, index, className: "hawa-w-full" }))), separatorPosition > 0 && separatorPosition < props.maxLength && /* @__PURE__ */ React2.createElement(PinInputSeperator, null), secondGroupLength > 0 && /* @__PURE__ */ React2.createElement(PinInputGroup, { className: "hawa-w-full" }, [...Array(secondGroupLength)].map((_, index) => /* @__PURE__ */ React2.createElement(
PinInputSlot,
{
key: index + firstGroupLength,
index: index + firstGroupLength,
className: "hawa-w-full"
}
)))), /* @__PURE__ */ React2.createElement(HelperText, { helperText: props.helperText }));
};
export {
PinInput,
PinInputGroup,
PinInputRoot,
PinInputSeperator,
PinInputSlot
};
/*! Bundled license information:
lucide-react/dist/esm/shared/src/utils.js:
(**
* @license lucide-react v0.417.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*)
lucide-react/dist/esm/defaultAttributes.js:
(**
* @license lucide-react v0.417.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*)
lucide-react/dist/esm/Icon.js:
(**
* @license lucide-react v0.417.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*)
lucide-react/dist/esm/createLucideIcon.js:
(**
* @license lucide-react v0.417.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*)
lucide-react/dist/esm/icons/dot.js:
(**
* @license lucide-react v0.417.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*)
lucide-react/dist/esm/lucide-react.js:
(**
* @license lucide-react v0.417.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*)
*/
//# sourceMappingURL=index.mjs.map