@sikka/hawa
Version:
Modern UI Kit made with Tailwind
263 lines (244 loc) • 10 kB
JavaScript
"use client";
;
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// elements/pinInput/index.ts
var pinInput_exports = {};
__export(pinInput_exports, {
PinInput: () => PinInput,
PinInputGroup: () => PinInputGroup,
PinInputRoot: () => PinInputRoot,
PinInputSeperator: () => PinInputSeperator,
PinInputSlot: () => PinInputSlot
});
module.exports = __toCommonJS(pinInput_exports);
// elements/pinInput/PinInput.tsx
var React2 = __toESM(require("react"));
// util/index.ts
var import_clsx = require("clsx");
var import_tailwind_merge = require("tailwind-merge");
function cn(...inputs) {
return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
}
// elements/pinInput/PinInput.tsx
var import_input_otp = require("input-otp");
// ../../node_modules/.pnpm/lucide-react@0.417.0_react@18.3.1/node_modules/lucide-react/dist/esm/createLucideIcon.js
var import_react2 = require("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
var import_react = require("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 = (0, import_react.forwardRef)(
({
color = "currentColor",
size = 24,
strokeWidth = 2,
absoluteStrokeWidth,
className = "",
children,
iconNode,
...rest
}, ref) => {
return (0, import_react.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]) => (0, import_react.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 = (0, import_react2.forwardRef)(
({ className, ...props }, ref) => (0, import_react2.createElement)(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
var import_react3 = __toESM(require("react"));
var HelperText = ({ helperText }) => /* @__PURE__ */ import_react3.default.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(
import_input_otp.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(import_input_otp.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 }));
};
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
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.js.map