@klodd/kommers-ds 0.1.0

package/dist/cjs/components/input/input.d.ts

@@ -0,0 +1,68 @@
+import { VariantProps } from "cva";
+import * as React from "react";
+declare const inputBaseStyles: string;
+declare const inputVariants: (props?: ({
+    size?: "small" | "base" | undefined;
+} & ({
+    class?: string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | /*elided*/ any | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined;
+    className?: never;
+} | {
+    class?: never;
+    className?: string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | /*elided*/ any | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined;
+})) | undefined) => string;
+interface InputProps extends VariantProps<typeof inputVariants>, Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> {
+}
+/**
+ * This component is based on the `input` element and supports all of its props
+ */
+declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+export { Input, inputBaseStyles };
+//# sourceMappingURL=input.d.ts.map

package/dist/cjs/components/input/input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../../src/components/input/input.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAO,MAAM,KAAK,CAAA;AACvC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,QAAA,MAAM,eAAe,QAKpB,CAAA;AAED,QAAA,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;0BAcjB,CAAA;AAEF,UAAU,UACR,SAAQ,YAAY,CAAC,OAAO,aAAa,CAAC,EACxC,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAAG;AAEhE;;GAEG;AACH,QAAA,MAAM,KAAK,qFA4EV,CAAA;AAGD,OAAO,EAAE,KAAK,EAAE,eAAe,EAAE,CAAA"}

package/dist/cjs/components/input/input.js

@@ -0,0 +1,59 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.inputBaseStyles = exports.Input = void 0;
+const tslib_1 = require("tslib");
+const kommers_icons_1 = require("@klodd/kommers-icons");
+const cva_1 = require("cva");
+const React = tslib_1.__importStar(require("react"));
+const clx_1 = require("../../utils/clx");
+const inputBaseStyles = (0, clx_1.clx)("caret-ui-fg-base bg-ui-bg-field hover:bg-ui-bg-field-hover shadow-borders-base placeholder-ui-fg-muted text-ui-fg-base transition-fg relative w-full appearance-none rounded-md outline-none", "focus-visible:shadow-borders-interactive-with-active", "disabled:text-ui-fg-disabled disabled:!bg-ui-bg-disabled disabled:placeholder-ui-fg-disabled disabled:cursor-not-allowed", "aria-[invalid=true]:!shadow-borders-error  invalid:!shadow-borders-error");
+exports.inputBaseStyles = inputBaseStyles;
+const inputVariants = (0, cva_1.cva)({
+    base: (0, clx_1.clx)(inputBaseStyles, "[&::--webkit-search-cancel-button]:hidden [&::-webkit-search-cancel-button]:hidden [&::-webkit-search-decoration]:hidden"),
+    variants: {
+        size: {
+            base: "txt-compact-small h-8 px-2 py-1.5",
+            small: "txt-compact-small h-7 px-2 py-1",
+        },
+    },
+    defaultVariants: {
+        size: "base",
+    },
+});
+/**
+ * This component is based on the `input` element and supports all of its props
+ */
+const Input = React.forwardRef(({ className, type, 
+/**
+ * The input's size.
+ */
+size = "base", ...props }, ref) => {
+    const [typeState, setTypeState] = React.useState(type);
+    const isPassword = type === "password";
+    const isSearch = type === "search";
+    return (React.createElement("div", { className: "relative" },
+        React.createElement("input", { ref: ref, type: isPassword ? typeState : type, className: (0, clx_1.clx)(inputVariants({ size: size }), {
+                "pl-8": isSearch && size === "base",
+                "pr-8": isPassword && size === "base",
+                "pl-7": isSearch && size === "small",
+                "pr-7": isPassword && size === "small",
+            }, className), ...props }),
+        isSearch && (React.createElement("div", { className: (0, clx_1.clx)("text-ui-fg-muted pointer-events-none absolute bottom-0 left-0 flex items-center justify-center", {
+                "h-8 w-8": size === "base",
+                "h-7 w-7": size === "small",
+            }), role: "img" },
+            React.createElement(kommers_icons_1.MagnifyingGlassMini, null))),
+        isPassword && (React.createElement("div", { className: (0, clx_1.clx)("absolute bottom-0 right-0 flex items-center justify-center border-l", {
+                "h-8 w-8": size === "base",
+                "h-7 w-7": size === "small",
+            }) },
+            React.createElement("button", { className: "text-ui-fg-muted hover:text-ui-fg-base focus-visible:text-ui-fg-base focus-visible:shadow-borders-interactive-w-focus active:text-ui-fg-base h-fit w-fit rounded-sm outline-none transition-all", type: "button", onClick: () => {
+                    setTypeState(typeState === "password" ? "text" : "password");
+                } },
+                React.createElement("span", { className: "sr-only" }, typeState === "password" ? "Show password" : "Hide password"),
+                typeState === "password" ? React.createElement(kommers_icons_1.Eye, null) : React.createElement(kommers_icons_1.EyeSlash, null))))));
+});
+exports.Input = Input;
+Input.displayName = "Input";
+//# sourceMappingURL=input.js.map

package/dist/cjs/components/input/input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.js","sourceRoot":"","sources":["../../../../src/components/input/input.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAA;;;;AAEZ,wDAAyE;AACzE,6BAAuC;AACvC,qDAA8B;AAE9B,qCAAiC;AAEjC,MAAM,eAAe,GAAG,IAAA,SAAG,EACzB,8LAA8L,EAC9L,sDAAsD,EACtD,0HAA0H,EAC1H,0EAA0E,CAC3E,CAAA;AAwGe,0CAAe;AAtG/B,MAAM,aAAa,GAAG,IAAA,SAAG,EAAC;IACxB,IAAI,EAAE,IAAA,SAAG,EACP,eAAe,EACf,0HAA0H,CAC3H;IACD,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,IAAI,EAAE,mCAAmC;YACzC,KAAK,EAAE,iCAAiC;SACzC;KACF;IACD,eAAe,EAAE;QACf,IAAI,EAAE,MAAM;KACb;CACF,CAAC,CAAA;AAMF;;GAEG;AACH,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAC5B,CACE,EACE,SAAS,EACT,IAAI;AACJ;;GAEG;AACH,IAAI,GAAG,MAAM,EACb,GAAG,KAAK,EACG,EACb,GAAG,EACH,EAAE;IACF,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAA;IAEtD,MAAM,UAAU,GAAG,IAAI,KAAK,UAAU,CAAA;IACtC,MAAM,QAAQ,GAAG,IAAI,KAAK,QAAQ,CAAA;IAElC,OAAO,CACL,6BAAK,SAAS,EAAC,UAAU;QACvB,+BACE,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,EACnC,SAAS,EAAE,IAAA,SAAG,EACZ,aAAa,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAC7B;gBACE,MAAM,EAAE,QAAQ,IAAI,IAAI,KAAK,MAAM;gBACnC,MAAM,EAAE,UAAU,IAAI,IAAI,KAAK,MAAM;gBACrC,MAAM,EAAE,QAAQ,IAAI,IAAI,KAAK,OAAO;gBACpC,MAAM,EAAE,UAAU,IAAI,IAAI,KAAK,OAAO;aACvC,EACD,SAAS,CACV,KACG,KAAK,GACT;QACD,QAAQ,IAAI,CACX,6BACE,SAAS,EAAE,IAAA,SAAG,EACZ,gGAAgG,EAChG;gBACE,SAAS,EAAE,IAAI,KAAK,MAAM;gBAC1B,SAAS,EAAE,IAAI,KAAK,OAAO;aAC5B,CACF,EACD,IAAI,EAAC,KAAK;YAEV,oBAAC,mCAAmB,OAAG,CACnB,CACP;QACA,UAAU,IAAI,CACb,6BACE,SAAS,EAAE,IAAA,SAAG,EACZ,qEAAqE,EACrE;gBACE,SAAS,EAAE,IAAI,KAAK,MAAM;gBAC1B,SAAS,EAAE,IAAI,KAAK,OAAO;aAC5B,CACF;YAED,gCACE,SAAS,EAAC,iMAAiM,EAC3M,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,GAAG,EAAE;oBACZ,YAAY,CAAC,SAAS,KAAK,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC,CAAA;gBAC9D,CAAC;gBAED,8BAAM,SAAS,EAAC,SAAS,IACtB,SAAS,KAAK,UAAU,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,eAAe,CACxD;gBACN,SAAS,KAAK,UAAU,CAAC,CAAC,CAAC,oBAAC,mBAAG,OAAG,CAAC,CAAC,CAAC,oBAAC,wBAAQ,OAAG,CAC3C,CACL,CACP,CACG,CACP,CAAA;AACH,CAAC,CACF,CAAA;AAGQ,sBAAK;AAFd,KAAK,CAAC,WAAW,GAAG,OAAO,CAAA","sourcesContent":["\"use client\"\n\nimport { Eye, EyeSlash, MagnifyingGlassMini } from \"@klodd/kommers-icons\"\nimport { VariantProps, cva } from \"cva\"\nimport * as React from \"react\"\n\nimport { clx } from \"@/utils/clx\"\n\nconst inputBaseStyles = clx(\n  \"caret-ui-fg-base bg-ui-bg-field hover:bg-ui-bg-field-hover shadow-borders-base placeholder-ui-fg-muted text-ui-fg-base transition-fg relative w-full appearance-none rounded-md outline-none\",\n  \"focus-visible:shadow-borders-interactive-with-active\",\n  \"disabled:text-ui-fg-disabled disabled:!bg-ui-bg-disabled disabled:placeholder-ui-fg-disabled disabled:cursor-not-allowed\",\n  \"aria-[invalid=true]:!shadow-borders-error  invalid:!shadow-borders-error\"\n)\n\nconst inputVariants = cva({\n  base: clx(\n    inputBaseStyles,\n    \"[&::--webkit-search-cancel-button]:hidden [&::-webkit-search-cancel-button]:hidden [&::-webkit-search-decoration]:hidden\"\n  ),\n  variants: {\n    size: {\n      base: \"txt-compact-small h-8 px-2 py-1.5\",\n      small: \"txt-compact-small h-7 px-2 py-1\",\n    },\n  },\n  defaultVariants: {\n    size: \"base\",\n  },\n})\n\ninterface InputProps\n  extends VariantProps<typeof inputVariants>,\n    Omit<React.InputHTMLAttributes<HTMLInputElement>, \"size\"> {}\n\n/**\n * This component is based on the `input` element and supports all of its props\n */\nconst Input = React.forwardRef<HTMLInputElement, InputProps>(\n  (\n    {\n      className,\n      type,\n      /**\n       * The input's size.\n       */\n      size = \"base\",\n      ...props\n    }: InputProps,\n    ref\n  ) => {\n    const [typeState, setTypeState] = React.useState(type)\n\n    const isPassword = type === \"password\"\n    const isSearch = type === \"search\"\n\n    return (\n      <div className=\"relative\">\n        <input\n          ref={ref}\n          type={isPassword ? typeState : type}\n          className={clx(\n            inputVariants({ size: size }),\n            {\n              \"pl-8\": isSearch && size === \"base\",\n              \"pr-8\": isPassword && size === \"base\",\n              \"pl-7\": isSearch && size === \"small\",\n              \"pr-7\": isPassword && size === \"small\",\n            },\n            className\n          )}\n          {...props}\n        />\n        {isSearch && (\n          <div\n            className={clx(\n              \"text-ui-fg-muted pointer-events-none absolute bottom-0 left-0 flex items-center justify-center\",\n              {\n                \"h-8 w-8\": size === \"base\",\n                \"h-7 w-7\": size === \"small\",\n              }\n            )}\n            role=\"img\"\n          >\n            <MagnifyingGlassMini />\n          </div>\n        )}\n        {isPassword && (\n          <div\n            className={clx(\n              \"absolute bottom-0 right-0 flex items-center justify-center border-l\",\n              {\n                \"h-8 w-8\": size === \"base\",\n                \"h-7 w-7\": size === \"small\",\n              }\n            )}\n          >\n            <button\n              className=\"text-ui-fg-muted hover:text-ui-fg-base focus-visible:text-ui-fg-base focus-visible:shadow-borders-interactive-w-focus active:text-ui-fg-base h-fit w-fit rounded-sm outline-none transition-all\"\n              type=\"button\"\n              onClick={() => {\n                setTypeState(typeState === \"password\" ? \"text\" : \"password\")\n              }}\n            >\n              <span className=\"sr-only\">\n                {typeState === \"password\" ? \"Show password\" : \"Hide password\"}\n              </span>\n              {typeState === \"password\" ? <Eye /> : <EyeSlash />}\n            </button>\n          </div>\n        )}\n      </div>\n    )\n  }\n)\nInput.displayName = \"Input\"\n\nexport { Input, inputBaseStyles }\n"]}

package/dist/cjs/components/kbd/index.d.ts

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

package/dist/cjs/components/kbd/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/kbd/index.ts"],"names":[],"mappings":"AAAA,cAAc,OAAO,CAAA"}

package/dist/cjs/components/kbd/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./kbd"), exports);
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/kbd/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/kbd/index.ts"],"names":[],"mappings":";;;AAAA,gDAAqB","sourcesContent":["export * from \"./kbd\"\n"]}

package/dist/cjs/components/kbd/kbd.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+/**
+ * This component is based on the `kbd` element and supports all of its props
+ */
+declare const Kbd: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>;
+export { Kbd };
+//# sourceMappingURL=kbd.d.ts.map

package/dist/cjs/components/kbd/kbd.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"kbd.d.ts","sourceRoot":"","sources":["../../../../src/components/kbd/kbd.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B;;GAEG;AACH,QAAA,MAAM,GAAG,0JAiBP,CAAA;AAGF,OAAO,EAAE,GAAG,EAAE,CAAA"}

package/dist/cjs/components/kbd/kbd.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Kbd = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const clx_1 = require("../../utils/clx");
+/**
+ * This component is based on the `kbd` element and supports all of its props
+ */
+const Kbd = React.forwardRef(({ children, className, ...props }, ref) => {
+    return (React.createElement("kbd", { ...props, ref: ref, className: (0, clx_1.clx)("bg-ui-tag-neutral-bg text-ui-tag-neutral-text border-ui-tag-neutral-border inline-flex h-5 w-fit min-w-[20px] items-center justify-center rounded-md border px-1", "txt-compact-xsmall-plus", className) }, children));
+});
+exports.Kbd = Kbd;
+Kbd.displayName = "Kbd";
+//# sourceMappingURL=kbd.js.map

package/dist/cjs/components/kbd/kbd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kbd.js","sourceRoot":"","sources":["../../../../src/components/kbd/kbd.tsx"],"names":[],"mappings":";;;;AAAA,qDAA8B;AAE9B,qCAAiC;AAEjC;;GAEG;AACH,MAAM,GAAG,GAAG,KAAK,CAAC,UAAU,CAG1B,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IAC3C,OAAO,CACL,gCACM,KAAK,EACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,SAAG,EACZ,kKAAkK,EAClK,yBAAyB,EACzB,SAAS,CACV,IAEA,QAAQ,CACL,CACP,CAAA;AACH,CAAC,CAAC,CAAA;AAGO,kBAAG;AAFZ,GAAG,CAAC,WAAW,GAAG,KAAK,CAAA","sourcesContent":["import * as React from \"react\"\n\nimport { clx } from \"@/utils/clx\"\n\n/**\n * This component is based on the `kbd` element and supports all of its props\n */\nconst Kbd = React.forwardRef<\n  HTMLElement,\n  React.ComponentPropsWithoutRef<\"kbd\">\n>(({ children, className, ...props }, ref) => {\n  return (\n    <kbd\n      {...props}\n      ref={ref}\n      className={clx(\n        \"bg-ui-tag-neutral-bg text-ui-tag-neutral-text border-ui-tag-neutral-border inline-flex h-5 w-fit min-w-[20px] items-center justify-center rounded-md border px-1\",\n        \"txt-compact-xsmall-plus\",\n        className\n      )}\n    >\n      {children}\n    </kbd>\n  )\n})\nKbd.displayName = \"Kbd\"\n\nexport { Kbd }\n"]}

package/dist/cjs/components/label/index.d.ts

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

package/dist/cjs/components/label/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/label/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAA"}

package/dist/cjs/components/label/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./label"), exports);
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/label/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/label/index.ts"],"names":[],"mappings":";;;AAAA,kDAAuB","sourcesContent":["export * from \"./label\"\n"]}

package/dist/cjs/components/label/label.d.ts

@@ -0,0 +1,68 @@
+import { type VariantProps } from "cva";
+import * as React from "react";
+declare const labelVariants: (props?: ({
+    size?: "xsmall" | "small" | "base" | "large" | undefined;
+    weight?: "regular" | "plus" | undefined;
+} & ({
+    class?: string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | /*elided*/ any | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined;
+    className?: never;
+} | {
+    class?: never;
+    className?: string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | /*elided*/ any | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined;
+})) | undefined) => string;
+interface LabelProps extends React.ComponentPropsWithoutRef<"label">, VariantProps<typeof labelVariants> {
+}
+/**
+ * This component is based on the [Radix UI Label](https://www.radix-ui.com/primitives/docs/components/label) primitive.
+ */
+declare const Label: React.ForwardRefExoticComponent<LabelProps & React.RefAttributes<HTMLLabelElement>>;
+export { Label };
+//# sourceMappingURL=label.d.ts.map

package/dist/cjs/components/label/label.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"label.d.ts","sourceRoot":"","sources":["../../../../src/components/label/label.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,KAAK,CAAA;AAE5C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,QAAA,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;0BAkBjB,CAAA;AAEF,UAAU,UACR,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,CAAC,EAC7C,YAAY,CAAC,OAAO,aAAa,CAAC;CAAG;AAEzC;;GAEG;AACH,QAAA,MAAM,KAAK,qFAqBV,CAAA;AAGD,OAAO,EAAE,KAAK,EAAE,CAAA"}

package/dist/cjs/components/label/label.js

@@ -0,0 +1,45 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Label = void 0;
+const tslib_1 = require("tslib");
+const cva_1 = require("cva");
+const radix_ui_1 = require("radix-ui");
+const React = tslib_1.__importStar(require("react"));
+const clx_1 = require("../../utils/clx");
+const labelVariants = (0, cva_1.cva)({
+    base: "font-sans",
+    variants: {
+        size: {
+            xsmall: "txt-compact-xsmall",
+            small: "txt-compact-small",
+            base: "txt-compact-medium",
+            large: "txt-compact-large",
+        },
+        weight: {
+            regular: "font-normal",
+            plus: "font-medium",
+        },
+    },
+    defaultVariants: {
+        size: "base",
+        weight: "regular",
+    },
+});
+/**
+ * This component is based on the [Radix UI Label](https://www.radix-ui.com/primitives/docs/components/label) primitive.
+ */
+const Label = React.forwardRef(({ className, 
+/**
+ * The label's size.
+ */
+size = "base", 
+/**
+ * The label's font weight.
+ */
+weight = "regular", ...props }, ref) => {
+    return (React.createElement(radix_ui_1.Label.Root, { ref: ref, className: (0, clx_1.clx)(labelVariants({ size, weight }), className), ...props }));
+});
+exports.Label = Label;
+Label.displayName = "Label";
+//# sourceMappingURL=label.js.map

package/dist/cjs/components/label/label.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"label.js","sourceRoot":"","sources":["../../../../src/components/label/label.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAA;;;;AAEZ,6BAA4C;AAC5C,uCAA8C;AAC9C,qDAA8B;AAE9B,qCAAiC;AAEjC,MAAM,aAAa,GAAG,IAAA,SAAG,EAAC;IACxB,IAAI,EAAE,WAAW;IACjB,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,MAAM,EAAE,oBAAoB;YAC5B,KAAK,EAAE,mBAAmB;YAC1B,IAAI,EAAE,oBAAoB;YAC1B,KAAK,EAAE,mBAAmB;SAC3B;QACD,MAAM,EAAE;YACN,OAAO,EAAE,aAAa;YACtB,IAAI,EAAE,aAAa;SACpB;KACF;IACD,eAAe,EAAE;QACf,IAAI,EAAE,MAAM;QACZ,MAAM,EAAE,SAAS;KAClB;CACF,CAAC,CAAA;AAMF;;GAEG;AACH,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAC5B,CAAC,EACC,SAAS;AACT;;GAEG;AACH,IAAI,GAAG,MAAM;AACb;;GAEG;AACH,MAAM,GAAG,SAAS,EAClB,GAAG,KAAK,EACG,EAAE,GAAG,EAAE,EAAE;IACpB,OAAO,CACL,oBAAC,gBAAU,CAAC,IAAI,IACd,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,SAAG,EAAC,aAAa,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,EAAE,SAAS,CAAC,KACtD,KAAK,GACT,CACH,CAAA;AACH,CAAC,CACF,CAAA;AAGQ,sBAAK;AAFd,KAAK,CAAC,WAAW,GAAG,OAAO,CAAA","sourcesContent":["\"use client\"\n\nimport { cva, type VariantProps } from \"cva\"\nimport { Label as RadixLabel } from \"radix-ui\"\nimport * as React from \"react\"\n\nimport { clx } from \"@/utils/clx\"\n\nconst labelVariants = cva({\n  base: \"font-sans\",\n  variants: {\n    size: {\n      xsmall: \"txt-compact-xsmall\",\n      small: \"txt-compact-small\",\n      base: \"txt-compact-medium\",\n      large: \"txt-compact-large\",\n    },\n    weight: {\n      regular: \"font-normal\",\n      plus: \"font-medium\",\n    },\n  },\n  defaultVariants: {\n    size: \"base\",\n    weight: \"regular\",\n  },\n})\n\ninterface LabelProps\n  extends React.ComponentPropsWithoutRef<\"label\">,\n    VariantProps<typeof labelVariants> {}\n\n/**\n * This component is based on the [Radix UI Label](https://www.radix-ui.com/primitives/docs/components/label) primitive.\n */\nconst Label = React.forwardRef<HTMLLabelElement, LabelProps>(\n  ({ \n    className, \n    /**\n     * The label's size.\n     */\n    size = \"base\", \n    /**\n     * The label's font weight.\n     */\n    weight = \"regular\", \n    ...props\n  }: LabelProps, ref) => {\n    return (\n      <RadixLabel.Root\n        ref={ref}\n        className={clx(labelVariants({ size, weight }), className)}\n        {...props}\n      />\n    )\n  }\n)\nLabel.displayName = \"Label\"\n\nexport { Label }\n"]}

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

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

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

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

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

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./otp-input"), exports);
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/otp-input/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/otp-input/index.ts"],"names":[],"mappings":";;;AAAA,sDAA2B","sourcesContent":["export * from \"./otp-input\"\n"]}

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

@@ -0,0 +1,50 @@
+import * as React from "react";
+interface OtpInputProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
+    /**
+     * Whether the inputs should focus the first field on mount.
+     */
+    autoFocus?: boolean;
+    /**
+     * Whether the inputs are disabled.
+     */
+    disabled?: boolean;
+    /**
+     * How many digits to show before rendering a separator.
+     */
+    groupSize?: number;
+    /**
+     * Additional class name for each input.
+     */
+    inputClassName?: string;
+    /**
+     * The number of digits in the code.
+     */
+    length?: number;
+    /**
+     * Called with the sanitized code whenever it changes.
+     */
+    onChange: (value: string) => void;
+    /**
+     * Called when the sanitized code reaches the configured length.
+     */
+    onComplete?: (value: string) => void;
+    /**
+     * Whether the inputs are read-only.
+     */
+    readOnly?: boolean;
+    /**
+     * The separator rendered between groups.
+     */
+    separator?: React.ReactNode;
+    /**
+     * The controlled code value.
+     */
+    value: string;
+}
+/**
+ * A controlled segmented input for one-time passwords, PINs, and short numeric verification codes.
+ */
+declare const OtpInput: React.ForwardRefExoticComponent<OtpInputProps & React.RefAttributes<HTMLDivElement>>;
+export { OtpInput };
+export type { OtpInputProps };
+//# sourceMappingURL=otp-input.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"otp-input.d.ts","sourceRoot":"","sources":["../../../../src/components/otp-input/otp-input.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,UAAU,aACR,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IAC9D;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;IACf;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC;;OAEG;IACH,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACpC;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC3B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAA;CACd;AA0CD;;GAEG;AACH,QAAA,MAAM,QAAQ,sFAoMb,CAAA;AAGD,OAAO,EAAE,QAAQ,EAAE,CAAA;AACnB,YAAY,EAAE,aAAa,EAAE,CAAA"}

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

@@ -0,0 +1,123 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OtpInput = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const clx_1 = require("../../utils/clx");
+const sanitizeOtp = (value, length) => {
+    return value.replace(/\D/g, "").slice(0, length);
+};
+const getDigits = (value, length) => {
+    return sanitizeOtp(value, length).padEnd(length, " ").split("");
+};
+const getWritableDigits = (value, length) => {
+    return getDigits(value, length).map((digit) => (digit === " " ? "" : digit));
+};
+const getDigitGroups = (length, groupSize) => {
+    return Array.from({ length: Math.ceil(length / groupSize) }).map((_, groupIndex) => {
+        const start = groupIndex * groupSize;
+        return {
+            start,
+            length: Math.min(groupSize, length - start),
+        };
+    });
+};
+const applyOtpAtIndex = (digits, index, value, length) => {
+    value.split("").forEach((digit, offset) => {
+        if (index + offset < length) {
+            digits[index + offset] = digit;
+        }
+    });
+    return digits;
+};
+/**
+ * A controlled segmented input for one-time passwords, PINs, and short numeric verification codes.
+ */
+const OtpInput = React.forwardRef(({ "aria-invalid": ariaInvalid, "aria-label": ariaLabel = "One-time password", autoFocus, className, disabled, groupSize = 3, inputClassName, length = 6, onChange, onComplete, readOnly, separator = "-", value, ...props }, ref) => {
+    const inputRefs = React.useRef([]);
+    const codeLength = Math.max(1, length);
+    const digits = getDigits(value, codeLength);
+    const safeGroupSize = Math.max(1, groupSize);
+    const digitGroups = getDigitGroups(codeLength, safeGroupSize);
+    const focusInput = (index) => {
+        var _a;
+        const nextIndex = Math.min(Math.max(index, 0), codeLength - 1);
+        (_a = inputRefs.current[nextIndex]) === null || _a === void 0 ? void 0 : _a.focus();
+    };
+    const updateValue = (nextValue, nextFocusIndex) => {
+        const sanitizedValue = sanitizeOtp(nextValue, codeLength);
+        onChange(sanitizedValue);
+        if (sanitizedValue.length === codeLength) {
+            onComplete === null || onComplete === void 0 ? void 0 : onComplete(sanitizedValue);
+        }
+        if (typeof nextFocusIndex === "number") {
+            requestAnimationFrame(() => focusInput(nextFocusIndex));
+        }
+    };
+    const handleChange = (index, rawValue) => {
+        const nextDigits = getWritableDigits(value, codeLength);
+        const incoming = sanitizeOtp(rawValue, codeLength);
+        if (!incoming) {
+            nextDigits[index] = "";
+            updateValue(nextDigits.join(""), index);
+            return;
+        }
+        applyOtpAtIndex(nextDigits, index, incoming, codeLength);
+        updateValue(nextDigits.join(""), Math.min(index + incoming.length, codeLength - 1));
+    };
+    const handleKeyDown = (event, index) => {
+        if (event.key === "Backspace" && !digits[index].trim()) {
+            event.preventDefault();
+            if (index === 0) {
+                return;
+            }
+            const nextDigits = getWritableDigits(value, codeLength);
+            nextDigits[index - 1] = "";
+            updateValue(nextDigits.join(""), index - 1);
+        }
+        if (event.key === "ArrowLeft") {
+            event.preventDefault();
+            focusInput(index - 1);
+        }
+        if (event.key === "ArrowRight") {
+            event.preventDefault();
+            focusInput(index + 1);
+        }
+        if (event.key === "Home") {
+            event.preventDefault();
+            focusInput(0);
+        }
+        if (event.key === "End") {
+            event.preventDefault();
+            focusInput(codeLength - 1);
+        }
+    };
+    const handlePaste = (event, index) => {
+        event.preventDefault();
+        const pastedValue = sanitizeOtp(event.clipboardData.getData("text"), codeLength);
+        if (!pastedValue) {
+            return;
+        }
+        if (pastedValue.length === codeLength) {
+            updateValue(pastedValue, codeLength - 1);
+            return;
+        }
+        const nextDigits = getWritableDigits(value, codeLength);
+        applyOtpAtIndex(nextDigits, index, pastedValue, codeLength);
+        updateValue(nextDigits.join(""), Math.min(index + pastedValue.length, codeLength - 1));
+    };
+    const renderInput = (index) => {
+        return (React.createElement("input", { key: index, ref: (element) => {
+                inputRefs.current[index] = element;
+            }, "aria-invalid": ariaInvalid, "aria-label": `${ariaLabel} ${index + 1}`, autoComplete: index === 0 ? "one-time-code" : "off", autoFocus: autoFocus && index === 0, className: (0, clx_1.clx)("txt-compact-large font-mono text-ui-fg-base bg-ui-bg-field hover:bg-ui-bg-field-hover shadow-borders-base transition-fg relative -ml-px flex size-10 appearance-none items-center justify-center border-0 text-center outline-none first:ml-0 first:rounded-l-md last:rounded-r-md", "focus-visible:z-10 focus-visible:shadow-borders-interactive-with-active", "disabled:text-ui-fg-disabled disabled:!bg-ui-bg-disabled disabled:cursor-not-allowed", "aria-[invalid=true]:!shadow-borders-error", inputClassName), disabled: disabled, inputMode: "numeric", maxLength: codeLength, onChange: (event) => handleChange(index, event.target.value), onFocus: (event) => event.target.select(), onKeyDown: (event) => handleKeyDown(event, index), onPaste: (event) => handlePaste(event, index), pattern: "[0-9]*", readOnly: readOnly, type: "text", value: digits[index].trim() }));
+    };
+    return (React.createElement("div", { ref: ref, "aria-invalid": ariaInvalid, "aria-label": ariaLabel, className: (0, clx_1.clx)("flex items-center justify-center gap-x-3", className), role: "group", ...props }, digitGroups.map(({ start, length }, groupIndex) => {
+        return (React.createElement(React.Fragment, { key: groupIndex },
+            groupIndex > 0 && separator && (React.createElement("span", { "aria-hidden": "true", className: "txt-compact-small-plus text-ui-fg-muted" }, separator)),
+            React.createElement("div", { className: "flex" }, Array.from({ length }).map((_, offset) => renderInput(start + offset)))));
+    })));
+});
+exports.OtpInput = OtpInput;
+OtpInput.displayName = "OtpInput";
+//# sourceMappingURL=otp-input.js.map

package/dist/cjs/components/otp-input/otp-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"otp-input.js","sourceRoot":"","sources":["../../../../src/components/otp-input/otp-input.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\n\nimport { clx } from \"@/utils/clx\"\n\ninterface OtpInputProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  /**\n   * Whether the inputs should focus the first field on mount.\n   */\n  autoFocus?: boolean\n  /**\n   * Whether the inputs are disabled.\n   */\n  disabled?: boolean\n  /**\n   * How many digits to show before rendering a separator.\n   */\n  groupSize?: number\n  /**\n   * Additional class name for each input.\n   */\n  inputClassName?: string\n  /**\n   * The number of digits in the code.\n   */\n  length?: number\n  /**\n   * Called with the sanitized code whenever it changes.\n   */\n  onChange: (value: string) => void\n  /**\n   * Called when the sanitized code reaches the configured length.\n   */\n  onComplete?: (value: string) => void\n  /**\n   * Whether the inputs are read-only.\n   */\n  readOnly?: boolean\n  /**\n   * The separator rendered between groups.\n   */\n  separator?: React.ReactNode\n  /**\n   * The controlled code value.\n   */\n  value: string\n}\n\nconst sanitizeOtp = (value: string, length: number) => {\n  return value.replace(/\\D/g, \"\").slice(0, length)\n}\n\nconst getDigits = (value: string, length: number) => {\n  return sanitizeOtp(value, length).padEnd(length, \" \").split(\"\")\n}\n\nconst getWritableDigits = (value: string, length: number) => {\n  return getDigits(value, length).map((digit) => (digit === \" \" ? \"\" : digit))\n}\n\nconst getDigitGroups = (length: number, groupSize: number) => {\n  return Array.from({ length: Math.ceil(length / groupSize) }).map(\n    (_, groupIndex) => {\n      const start = groupIndex * groupSize\n\n      return {\n        start,\n        length: Math.min(groupSize, length - start),\n      }\n    }\n  )\n}\n\nconst applyOtpAtIndex = (\n  digits: string[],\n  index: number,\n  value: string,\n  length: number\n) => {\n  value.split(\"\").forEach((digit, offset) => {\n    if (index + offset < length) {\n      digits[index + offset] = digit\n    }\n  })\n\n  return digits\n}\n\n/**\n * A controlled segmented input for one-time passwords, PINs, and short numeric verification codes.\n */\nconst OtpInput = React.forwardRef<HTMLDivElement, OtpInputProps>(\n  (\n    {\n      \"aria-invalid\": ariaInvalid,\n      \"aria-label\": ariaLabel = \"One-time password\",\n      autoFocus,\n      className,\n      disabled,\n      groupSize = 3,\n      inputClassName,\n      length = 6,\n      onChange,\n      onComplete,\n      readOnly,\n      separator = \"-\",\n      value,\n      ...props\n    }: OtpInputProps,\n    ref\n  ) => {\n    const inputRefs = React.useRef<Array<HTMLInputElement | null>>([])\n    const codeLength = Math.max(1, length)\n    const digits = getDigits(value, codeLength)\n    const safeGroupSize = Math.max(1, groupSize)\n    const digitGroups = getDigitGroups(codeLength, safeGroupSize)\n\n    const focusInput = (index: number) => {\n      const nextIndex = Math.min(Math.max(index, 0), codeLength - 1)\n\n      inputRefs.current[nextIndex]?.focus()\n    }\n\n    const updateValue = (nextValue: string, nextFocusIndex?: number) => {\n      const sanitizedValue = sanitizeOtp(nextValue, codeLength)\n\n      onChange(sanitizedValue)\n\n      if (sanitizedValue.length === codeLength) {\n        onComplete?.(sanitizedValue)\n      }\n\n      if (typeof nextFocusIndex === \"number\") {\n        requestAnimationFrame(() => focusInput(nextFocusIndex))\n      }\n    }\n\n    const handleChange = (index: number, rawValue: string) => {\n      const nextDigits = getWritableDigits(value, codeLength)\n      const incoming = sanitizeOtp(rawValue, codeLength)\n\n      if (!incoming) {\n        nextDigits[index] = \"\"\n        updateValue(nextDigits.join(\"\"), index)\n        return\n      }\n\n      applyOtpAtIndex(nextDigits, index, incoming, codeLength)\n\n      updateValue(\n        nextDigits.join(\"\"),\n        Math.min(index + incoming.length, codeLength - 1)\n      )\n    }\n\n    const handleKeyDown = (\n      event: React.KeyboardEvent<HTMLInputElement>,\n      index: number\n    ) => {\n      if (event.key === \"Backspace\" && !digits[index].trim()) {\n        event.preventDefault()\n\n        if (index === 0) {\n          return\n        }\n\n        const nextDigits = getWritableDigits(value, codeLength)\n\n        nextDigits[index - 1] = \"\"\n        updateValue(nextDigits.join(\"\"), index - 1)\n      }\n\n      if (event.key === \"ArrowLeft\") {\n        event.preventDefault()\n        focusInput(index - 1)\n      }\n\n      if (event.key === \"ArrowRight\") {\n        event.preventDefault()\n        focusInput(index + 1)\n      }\n\n      if (event.key === \"Home\") {\n        event.preventDefault()\n        focusInput(0)\n      }\n\n      if (event.key === \"End\") {\n        event.preventDefault()\n        focusInput(codeLength - 1)\n      }\n    }\n\n    const handlePaste = (\n      event: React.ClipboardEvent<HTMLInputElement>,\n      index: number\n    ) => {\n      event.preventDefault()\n\n      const pastedValue = sanitizeOtp(\n        event.clipboardData.getData(\"text\"),\n        codeLength\n      )\n\n      if (!pastedValue) {\n        return\n      }\n\n      if (pastedValue.length === codeLength) {\n        updateValue(pastedValue, codeLength - 1)\n        return\n      }\n\n      const nextDigits = getWritableDigits(value, codeLength)\n\n      applyOtpAtIndex(nextDigits, index, pastedValue, codeLength)\n\n      updateValue(\n        nextDigits.join(\"\"),\n        Math.min(index + pastedValue.length, codeLength - 1)\n      )\n    }\n\n    const renderInput = (index: number) => {\n      return (\n        <input\n          key={index}\n          ref={(element) => {\n            inputRefs.current[index] = element\n          }}\n          aria-invalid={ariaInvalid}\n          aria-label={`${ariaLabel} ${index + 1}`}\n          autoComplete={index === 0 ? \"one-time-code\" : \"off\"}\n          autoFocus={autoFocus && index === 0}\n          className={clx(\n            \"txt-compact-large font-mono text-ui-fg-base bg-ui-bg-field hover:bg-ui-bg-field-hover shadow-borders-base transition-fg relative -ml-px flex size-10 appearance-none items-center justify-center border-0 text-center outline-none first:ml-0 first:rounded-l-md last:rounded-r-md\",\n            \"focus-visible:z-10 focus-visible:shadow-borders-interactive-with-active\",\n            \"disabled:text-ui-fg-disabled disabled:!bg-ui-bg-disabled disabled:cursor-not-allowed\",\n            \"aria-[invalid=true]:!shadow-borders-error\",\n            inputClassName\n          )}\n          disabled={disabled}\n          inputMode=\"numeric\"\n          maxLength={codeLength}\n          onChange={(event) => handleChange(index, event.target.value)}\n          onFocus={(event) => event.target.select()}\n          onKeyDown={(event) => handleKeyDown(event, index)}\n          onPaste={(event) => handlePaste(event, index)}\n          pattern=\"[0-9]*\"\n          readOnly={readOnly}\n          type=\"text\"\n          value={digits[index].trim()}\n        />\n      )\n    }\n\n    return (\n      <div\n        ref={ref}\n        aria-invalid={ariaInvalid}\n        aria-label={ariaLabel}\n        className={clx(\"flex items-center justify-center gap-x-3\", className)}\n        role=\"group\"\n        {...props}\n      >\n        {digitGroups.map(({ start, length }, groupIndex) => {\n          return (\n            <React.Fragment key={groupIndex}>\n              {groupIndex > 0 && separator && (\n                <span\n                  aria-hidden=\"true\"\n                  className=\"txt-compact-small-plus text-ui-fg-muted\"\n                >\n                  {separator}\n                </span>\n              )}\n              <div className=\"flex\">\n                {Array.from({ length }).map((_, offset) =>\n                  renderInput(start + offset)\n                )}\n              </div>\n            </React.Fragment>\n          )\n        })}\n      </div>\n    )\n  }\n)\nOtpInput.displayName = \"OtpInput\"\n\nexport { OtpInput }\nexport type { OtpInputProps }\n"]}

package/dist/cjs/components/popover/index.d.ts

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

package/dist/cjs/components/popover/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/popover/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAA"}

package/dist/cjs/components/popover/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./popover"), exports);
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/popover/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/popover/index.ts"],"names":[],"mappings":";;;AAAA,oDAAyB","sourcesContent":["export * from \"./popover\"\n"]}

package/dist/cjs/components/popover/popover.d.ts

@@ -0,0 +1,16 @@
+import { Popover as RadixPopover } from "radix-ui";
+import * as React from "react";
+interface ContentProps extends React.ComponentPropsWithoutRef<typeof RadixPopover.Content> {
+}
+declare const Popover: {
+    (props: React.ComponentPropsWithoutRef<typeof RadixPopover.Root>): React.JSX.Element;
+    displayName: string;
+} & {
+    Trigger: React.ForwardRefExoticComponent<Omit<RadixPopover.PopoverTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+    Anchor: React.ForwardRefExoticComponent<Omit<RadixPopover.PopoverAnchorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Close: React.ForwardRefExoticComponent<Omit<RadixPopover.PopoverCloseProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+    Content: React.ForwardRefExoticComponent<ContentProps & React.RefAttributes<HTMLDivElement>>;
+    Seperator: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+};
+export { Popover };
+//# sourceMappingURL=popover.d.ts.map

package/dist/cjs/components/popover/popover.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../../../src/components/popover/popover.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,UAAU,CAAA;AAClD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAsC9B,UAAU,YACR,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,YAAY,CAAC,OAAO,CAAC;CAAG;AAiExE,QAAA,MAAM,OAAO;YAhGJ,KAAK,CAAC,wBAAwB,CAAC,OAAO,YAAY,CAAC,IAAI,CAAC;;;;;;;;CAsG/D,CAAA;AAEF,OAAO,EAAE,OAAO,EAAE,CAAA"}