@intlayer/design-system 7.0.8 → 7.0.9-canary.2

package/dist/esm/components/IDE/IDE.mjs

@@ -10,7 +10,7 @@ import { useEffect, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/IDE/IDE.tsx
-const IDE = ({ pages: initialPages, isDarkMode, className, activeTab: defaultActiveTab,...props }) => {
+const IDE = ({ pages: initialPages, isDarkMode, className, activeTab: defaultActiveTab, ...props }) => {
 	const [pages, setPages] = useState(initialPages);
 	const tabs = pages.filter(({ isOpen }) => isOpen);
 	const firstTabIndex = tabs.findIndex(({ isOpen }) => isOpen);

package/dist/esm/components/IDE/IDE.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"IDE.mjs","names":["IDE: FC<IDEProps>","path"],"sources":["../../../../src/components/IDE/IDE.tsx"],"sourcesContent":["'use client';\n\nimport { type FC, type HTMLAttributes, useEffect, useState } from 'react';\nimport { cn } from '../../utils/cn';\nimport { Container } from '../Container';\nimport { WithResizer } from '../WithResizer';\nimport { FileTree } from './FileTree';\nimport { MarkdownRenderer } from './MarkDownRender';\n\nexport type IDEProps = {\n  pages: {\n    path: string;\n    content: string;\n    isOpen?: boolean;\n  }[];\n  isDarkMode?: boolean;\n  activeTab?: number;\n} & HTMLAttributes<HTMLDivElement>;\n\nexport const IDE: FC<IDEProps> = ({\n  pages: initialPages,\n  isDarkMode,\n  className,\n  activeTab: defaultActiveTab,\n  ...props\n}) => {\n  const [pages, setPages] = useState(initialPages);\n  const tabs = pages.filter(({ isOpen }) => isOpen);\n\n  const firstTabIndex = tabs.findIndex(({ isOpen }) => isOpen);\n  const [activeTab, setActiveTab] = useState(defaultActiveTab ?? firstTabIndex);\n\n  useEffect(() => {\n    setActiveTab(defaultActiveTab ?? firstTabIndex);\n  }, [initialPages, defaultActiveTab]);\n\n  const { content, path } = pages[activeTab];\n  const filePaths = initialPages.map(({ path: title }) => title);\n\n  const handleClickFile = (title: string) => {\n    const page = pages.find(({ path: tabTitle }) => tabTitle === title);\n    if (!page) return;\n\n    const newPages = pages.map((page) => {\n      if (page.path === title) {\n        return { ...page, isOpen: true };\n      }\n      return page;\n    });\n\n    setPages(newPages);\n\n    const newPageIndex = newPages.findIndex(\n      ({ path: tabTitle }) => tabTitle === title\n    );\n\n    setActiveTab(newPageIndex);\n  };\n\n  return (\n    <Container\n      className={cn(\n        'flex size-full flex-col justify-start overflow-hidden shadow-lg',\n        className\n      )}\n      roundedSize=\"3xl\"\n      transparency=\"none\"\n      {...props}\n    >\n      <div className=\"flex w-auto flex-row items-center justify-start gap-1 rounded-t-3xl bg-neutral-200 text-neutral text-xs dark:bg-neutral-950\">\n        <div className=\"mx-2 flex items-center justify-start gap-2 p-1\">\n          <div className=\"size-3 rounded-full bg-red-500\" />\n          <div className=\"size-3 rounded-full bg-yellow-500\" />\n          <div className=\"size-3 rounded-full bg-green-500\" />\n        </div>\n        <div className=\"flex size-full overflow-y-auto\">\n          {tabs.map(({ path }, index) => {\n            const fullPath = path.split('/');\n            const title = fullPath[fullPath.length - 1];\n            const isActive = index === activeTab;\n\n            return (\n              <button\n                className={cn(\n                  'flex h-8 min-w-20 items-center justify-start px-3 py-1 transition',\n                  isActive\n                    ? 'bg-card'\n                    : 'cursor-pointer bg-neutral-200 hover:bg-neutral-300 dark:bg-neutral-950'\n                )}\n                key={title}\n                onClick={() => setActiveTab(index)}\n              >\n                {title}\n              </button>\n            );\n          })}\n        </div>\n      </div>\n      <div className=\"relative flex size-full flex-1 flex-row justify-start\">\n        <div className=\"absolute top-0 left-0 size-full\">\n          <div className=\"flex size-full\">\n            <WithResizer initialWidth={150}>\n              <FileTree\n                filesPaths={filePaths}\n                activeFile={path}\n                onClickFile={handleClickFile}\n              />\n            </WithResizer>\n\n            <div className=\"size-full flex-1 overflow-auto pt-2 text-xs\">\n              <MarkdownRenderer isDarkMode={isDarkMode}>\n                {content}\n              </MarkdownRenderer>\n            </div>\n          </div>\n        </div>\n      </div>\n    </Container>\n  );\n};\n"],"mappings":";;;;;;;;;;;;AAmBA,MAAaA,OAAqB,EAChC,OAAO,cACP,YACA,WACA,WAAW,iBACX,GAAG,YACC;CACJ,MAAM,CAAC,OAAO,YAAY,SAAS,aAAa;CAChD,MAAM,OAAO,MAAM,QAAQ,EAAE,aAAa,OAAO;CAEjD,MAAM,gBAAgB,KAAK,WAAW,EAAE,aAAa,OAAO;CAC5D,MAAM,CAAC,WAAW,gBAAgB,SAAS,oBAAoB,cAAc;AAE7E,iBAAgB;AACd,eAAa,oBAAoB,cAAc;IAC9C,CAAC,cAAc,iBAAiB,CAAC;CAEpC,MAAM,EAAE,SAAS,SAAS,MAAM;CAChC,MAAM,YAAY,aAAa,KAAK,EAAE,MAAM,YAAY,MAAM;CAE9D,MAAM,mBAAmB,UAAkB;AAEzC,MAAI,CADS,MAAM,MAAM,EAAE,MAAM,eAAe,aAAa,MAAM,CACxD;EAEX,MAAM,WAAW,MAAM,KAAK,SAAS;AACnC,OAAI,KAAK,SAAS,MAChB,QAAO;IAAE,GAAG;IAAM,QAAQ;IAAM;AAElC,UAAO;IACP;AAEF,WAAS,SAAS;AAMlB,eAJqB,SAAS,WAC3B,EAAE,MAAM,eAAe,aAAa,MACtC,CAEyB;;AAG5B,QACE,qBAAC;EACC,WAAW,GACT,mEACA,UACD;EACD,aAAY;EACZ,cAAa;EACb,GAAI;aAEJ,qBAAC;GAAI,WAAU;cACb,qBAAC;IAAI,WAAU;;KACb,oBAAC,SAAI,WAAU,mCAAmC;KAClD,oBAAC,SAAI,WAAU,sCAAsC;KACrD,oBAAC,SAAI,WAAU,qCAAqC;;KAChD,EACN,oBAAC;IAAI,WAAU;cACZ,KAAK,KAAK,EAAE,gBAAQ,UAAU;KAC7B,MAAM,WAAWC,OAAK,MAAM,IAAI;KAChC,MAAM,QAAQ,SAAS,SAAS,SAAS;AAGzC,YACE,oBAAC;MACC,WAAW,GACT,qEALW,UAAU,YAOjB,YACA,yEACL;MAED,eAAe,aAAa,MAAM;gBAEjC;QAHI,MAIE;MAEX;KACE;IACF,EACN,oBAAC;GAAI,WAAU;aACb,oBAAC;IAAI,WAAU;cACb,qBAAC;KAAI,WAAU;gBACb,oBAAC;MAAY,cAAc;gBACzB,oBAAC;OACC,YAAY;OACZ,YAAY;OACZ,aAAa;QACb;OACU,EAEd,oBAAC;MAAI,WAAU;gBACb,oBAAC;OAA6B;iBAC3B;QACgB;OACf;MACF;KACF;IACF;GACI"}
+{"version":3,"file":"IDE.mjs","names":["IDE: FC<IDEProps>","path"],"sources":["../../../../src/components/IDE/IDE.tsx"],"sourcesContent":["'use client';\n\nimport { type FC, type HTMLAttributes, useEffect, useState } from 'react';\nimport { cn } from '../../utils/cn';\nimport { Container } from '../Container';\nimport { WithResizer } from '../WithResizer';\nimport { FileTree } from './FileTree';\nimport { MarkdownRenderer } from './MarkDownRender';\n\nexport type IDEProps = {\n  pages: {\n    path: string;\n    content: string;\n    isOpen?: boolean;\n  }[];\n  isDarkMode?: boolean;\n  activeTab?: number;\n} & HTMLAttributes<HTMLDivElement>;\n\nexport const IDE: FC<IDEProps> = ({\n  pages: initialPages,\n  isDarkMode,\n  className,\n  activeTab: defaultActiveTab,\n  ...props\n}) => {\n  const [pages, setPages] = useState(initialPages);\n  const tabs = pages.filter(({ isOpen }) => isOpen);\n\n  const firstTabIndex = tabs.findIndex(({ isOpen }) => isOpen);\n  const [activeTab, setActiveTab] = useState(defaultActiveTab ?? firstTabIndex);\n\n  useEffect(() => {\n    setActiveTab(defaultActiveTab ?? firstTabIndex);\n  }, [initialPages, defaultActiveTab]);\n\n  const { content, path } = pages[activeTab];\n  const filePaths = initialPages.map(({ path: title }) => title);\n\n  const handleClickFile = (title: string) => {\n    const page = pages.find(({ path: tabTitle }) => tabTitle === title);\n    if (!page) return;\n\n    const newPages = pages.map((page) => {\n      if (page.path === title) {\n        return { ...page, isOpen: true };\n      }\n      return page;\n    });\n\n    setPages(newPages);\n\n    const newPageIndex = newPages.findIndex(\n      ({ path: tabTitle }) => tabTitle === title\n    );\n\n    setActiveTab(newPageIndex);\n  };\n\n  return (\n    <Container\n      className={cn(\n        'flex size-full flex-col justify-start overflow-hidden shadow-lg',\n        className\n      )}\n      roundedSize=\"3xl\"\n      transparency=\"none\"\n      {...props}\n    >\n      <div className=\"flex w-auto flex-row items-center justify-start gap-1 rounded-t-3xl bg-neutral-200 text-neutral text-xs dark:bg-neutral-950\">\n        <div className=\"mx-2 flex items-center justify-start gap-2 p-1\">\n          <div className=\"size-3 rounded-full bg-red-500\" />\n          <div className=\"size-3 rounded-full bg-yellow-500\" />\n          <div className=\"size-3 rounded-full bg-green-500\" />\n        </div>\n        <div className=\"flex size-full overflow-y-auto\">\n          {tabs.map(({ path }, index) => {\n            const fullPath = path.split('/');\n            const title = fullPath[fullPath.length - 1];\n            const isActive = index === activeTab;\n\n            return (\n              <button\n                className={cn(\n                  'flex h-8 min-w-20 items-center justify-start px-3 py-1 transition',\n                  isActive\n                    ? 'bg-card'\n                    : 'cursor-pointer bg-neutral-200 hover:bg-neutral-300 dark:bg-neutral-950'\n                )}\n                key={title}\n                onClick={() => setActiveTab(index)}\n              >\n                {title}\n              </button>\n            );\n          })}\n        </div>\n      </div>\n      <div className=\"relative flex size-full flex-1 flex-row justify-start\">\n        <div className=\"absolute top-0 left-0 size-full\">\n          <div className=\"flex size-full\">\n            <WithResizer initialWidth={150}>\n              <FileTree\n                filesPaths={filePaths}\n                activeFile={path}\n                onClickFile={handleClickFile}\n              />\n            </WithResizer>\n\n            <div className=\"size-full flex-1 overflow-auto pt-2 text-xs\">\n              <MarkdownRenderer isDarkMode={isDarkMode}>\n                {content}\n              </MarkdownRenderer>\n            </div>\n          </div>\n        </div>\n      </div>\n    </Container>\n  );\n};\n"],"mappings":";;;;;;;;;;;;AAmBA,MAAaA,OAAqB,EAChC,OAAO,cACP,YACA,WACA,WAAW,kBACX,GAAG,YACC;CACJ,MAAM,CAAC,OAAO,YAAY,SAAS,aAAa;CAChD,MAAM,OAAO,MAAM,QAAQ,EAAE,aAAa,OAAO;CAEjD,MAAM,gBAAgB,KAAK,WAAW,EAAE,aAAa,OAAO;CAC5D,MAAM,CAAC,WAAW,gBAAgB,SAAS,oBAAoB,cAAc;AAE7E,iBAAgB;AACd,eAAa,oBAAoB,cAAc;IAC9C,CAAC,cAAc,iBAAiB,CAAC;CAEpC,MAAM,EAAE,SAAS,SAAS,MAAM;CAChC,MAAM,YAAY,aAAa,KAAK,EAAE,MAAM,YAAY,MAAM;CAE9D,MAAM,mBAAmB,UAAkB;AAEzC,MAAI,CADS,MAAM,MAAM,EAAE,MAAM,eAAe,aAAa,MAAM,CACxD;EAEX,MAAM,WAAW,MAAM,KAAK,SAAS;AACnC,OAAI,KAAK,SAAS,MAChB,QAAO;IAAE,GAAG;IAAM,QAAQ;IAAM;AAElC,UAAO;IACP;AAEF,WAAS,SAAS;AAMlB,eAJqB,SAAS,WAC3B,EAAE,MAAM,eAAe,aAAa,MACtC,CAEyB;;AAG5B,QACE,qBAAC;EACC,WAAW,GACT,mEACA,UACD;EACD,aAAY;EACZ,cAAa;EACb,GAAI;aAEJ,qBAAC;GAAI,WAAU;cACb,qBAAC;IAAI,WAAU;;KACb,oBAAC,SAAI,WAAU,mCAAmC;KAClD,oBAAC,SAAI,WAAU,sCAAsC;KACrD,oBAAC,SAAI,WAAU,qCAAqC;;KAChD,EACN,oBAAC;IAAI,WAAU;cACZ,KAAK,KAAK,EAAE,gBAAQ,UAAU;KAC7B,MAAM,WAAWC,OAAK,MAAM,IAAI;KAChC,MAAM,QAAQ,SAAS,SAAS,SAAS;AAGzC,YACE,oBAAC;MACC,WAAW,GACT,qEALW,UAAU,YAOjB,YACA,yEACL;MAED,eAAe,aAAa,MAAM;gBAEjC;QAHI,MAIE;MAEX;KACE;IACF,EACN,oBAAC;GAAI,WAAU;aACb,oBAAC;IAAI,WAAU;cACb,qBAAC;KAAI,WAAU;gBACb,oBAAC;MAAY,cAAc;gBACzB,oBAAC;OACC,YAAY;OACZ,YAAY;OACZ,aAAa;QACb;OACU,EAEd,oBAAC;MAAI,WAAU;gBACb,oBAAC;OAA6B;iBAC3B;QACgB;OACf;MACF;KACF;IACF;GACI"}

package/dist/esm/components/IDE/PackageManagerSelector.mjs

@@ -11,7 +11,10 @@ const PackageManagerSelector = () => {
 	return /* @__PURE__ */ jsxs(Select, {
 		value: packageManager,
 		onValueChange: setPackageManager,
-		children: [/* @__PURE__ */ jsx(Select.Trigger, { children: /* @__PURE__ */ jsx(Select.Value, { placeholder: "Package Manager" }) }), /* @__PURE__ */ jsxs(Select.Content, { children: [
+		children: [/* @__PURE__ */ jsx(Select.Trigger, {
+			className: "py-1",
+			children: /* @__PURE__ */ jsx(Select.Value, { placeholder: "Package Manager" })
+		}), /* @__PURE__ */ jsxs(Select.Content, { children: [
 			/* @__PURE__ */ jsx(Select.Item, {
 				value: "npm",
 				children: "npm"

package/dist/esm/components/IDE/PackageManagerSelector.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"PackageManagerSelector.mjs","names":["PackageManagerSelector: FC"],"sources":["../../../../src/components/IDE/PackageManagerSelector.tsx"],"sourcesContent":["'use client';\n\nimport type { FC } from 'react';\nimport { Select } from '../Select';\nimport { useCodeContext } from './CodeContext';\n\nexport const PackageManagerSelector: FC = () => {\n  const { packageManager, setPackageManager } = useCodeContext();\n\n  return (\n    <Select value={packageManager} onValueChange={setPackageManager}>\n      <Select.Trigger>\n        <Select.Value placeholder=\"Package Manager\" />\n      </Select.Trigger>\n      <Select.Content>\n        <Select.Item value=\"npm\">npm</Select.Item>\n        <Select.Item value=\"pnpm\">pnpm</Select.Item>\n        <Select.Item value=\"yarn\">yarn</Select.Item>\n        <Select.Item value=\"bun\">bun</Select.Item>\n      </Select.Content>\n    </Select>\n  );\n};\n"],"mappings":";;;;;;;;AAMA,MAAaA,+BAAmC;CAC9C,MAAM,EAAE,gBAAgB,sBAAsB,gBAAgB;AAE9D,QACE,qBAAC;EAAO,OAAO;EAAgB,eAAe;aAC5C,oBAAC,OAAO,qBACN,oBAAC,OAAO,SAAM,aAAY,oBAAoB,GAC/B,EACjB,qBAAC,OAAO;GACN,oBAAC,OAAO;IAAK,OAAM;cAAM;KAAiB;GAC1C,oBAAC,OAAO;IAAK,OAAM;cAAO;KAAkB;GAC5C,oBAAC,OAAO;IAAK,OAAM;cAAO;KAAkB;GAC5C,oBAAC,OAAO;IAAK,OAAM;cAAM;KAAiB;MAC3B;GACV"}
+{"version":3,"file":"PackageManagerSelector.mjs","names":["PackageManagerSelector: FC"],"sources":["../../../../src/components/IDE/PackageManagerSelector.tsx"],"sourcesContent":["'use client';\n\nimport type { FC } from 'react';\nimport { Select } from '../Select';\nimport { useCodeContext } from './CodeContext';\n\nexport const PackageManagerSelector: FC = () => {\n  const { packageManager, setPackageManager } = useCodeContext();\n\n  return (\n    <Select value={packageManager} onValueChange={setPackageManager}>\n      <Select.Trigger className=\"py-1\">\n        <Select.Value placeholder=\"Package Manager\" />\n      </Select.Trigger>\n      <Select.Content>\n        <Select.Item value=\"npm\">npm</Select.Item>\n        <Select.Item value=\"pnpm\">pnpm</Select.Item>\n        <Select.Item value=\"yarn\">yarn</Select.Item>\n        <Select.Item value=\"bun\">bun</Select.Item>\n      </Select.Content>\n    </Select>\n  );\n};\n"],"mappings":";;;;;;;;AAMA,MAAaA,+BAAmC;CAC9C,MAAM,EAAE,gBAAgB,sBAAsB,gBAAgB;AAE9D,QACE,qBAAC;EAAO,OAAO;EAAgB,eAAe;aAC5C,oBAAC,OAAO;GAAQ,WAAU;aACxB,oBAAC,OAAO,SAAM,aAAY,oBAAoB;IAC/B,EACjB,qBAAC,OAAO;GACN,oBAAC,OAAO;IAAK,OAAM;cAAM;KAAiB;GAC1C,oBAAC,OAAO;IAAK,OAAM;cAAO;KAAkB;GAC5C,oBAAC,OAAO;IAAK,OAAM;cAAO;KAAkB;GAC5C,oBAAC,OAAO;IAAK,OAAM;cAAM;KAAiB;MAC3B;GACV"}

package/dist/esm/components/InformationTag/index.mjs

@@ -70,7 +70,7 @@ import { jsxs } from "react/jsx-runtime";
 *
 * @returns A rendered information tag with icon and text content
 */
-const InformationTag = ({ className, children,...props }) => /* @__PURE__ */ jsxs("i", {
+const InformationTag = ({ className, children, ...props }) => /* @__PURE__ */ jsxs("i", {
 	className: cn("text-neutral-400 text-xs", className),
 	...props,
 	children: ["ⓘ ", children]

package/dist/esm/components/InformationTag/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":["InformationTag: FC<CopiedTextInformationProps>"],"sources":["../../../../src/components/InformationTag/index.tsx"],"sourcesContent":["import type { DetailedHTMLProps, FC } from 'react';\nimport { cn } from '../../utils/cn';\n\n/**\n * Props for the InformationTag component.\n * Extends standard HTML element attributes for maximum flexibility.\n */\ntype CopiedTextInformationProps = DetailedHTMLProps<\n  React.HTMLAttributes<HTMLElement>,\n  HTMLElement\n>;\n\n/**\n * InformationTag Component\n *\n * A lightweight component that displays informational text with a distinctive info icon (ⓘ).\n * Perfect for showing contextual hints, supplementary information, or subtle guidance text.\n *\n * @component\n * @example\n * Basic usage:\n * ```tsx\n * <InformationTag>This field is required</InformationTag>\n * ```\n *\n * @example\n * With custom styling:\n * ```tsx\n * <InformationTag className=\"text-blue-600 font-medium\">\n *   Pro tip: Use keyboard shortcuts for faster navigation\n * </InformationTag>\n * ```\n *\n * @example\n * Form field context:\n * ```tsx\n * <div>\n *   <input type=\"email\" placeholder=\"your@email.com\" />\n *   <InformationTag>We'll never share your email address</InformationTag>\n * </div>\n * ```\n *\n * @example\n * Status information:\n * ```tsx\n * <InformationTag className=\"text-green-500\">\n *   Changes saved automatically\n * </InformationTag>\n * ```\n *\n * Features:\n * - Lightweight and semantic HTML structure using <i> tag\n * - Distinctive info icon (ⓘ) for visual recognition\n * - Default subtle styling with neutral colors\n * - Fully customizable with className overrides\n * - Supports all standard HTML element attributes\n * - Screen reader friendly with meaningful semantic content\n *\n * Accessibility:\n * - Uses semantic <i> tag which is announced by screen readers\n * - Info icon (ⓘ) provides visual context for sighted users\n * - Text content is fully accessible and readable\n * - Supports ARIA attributes through props spreading\n *\n * @param props - Component props extending HTML element attributes\n * @param props.children - The informational text content to display\n * @param props.className - Additional CSS classes for custom styling\n * @param props.title - Optional tooltip text (HTML title attribute)\n * @param props.role - ARIA role (defaults to implicit role from <i> tag)\n * @param props.aria-label - ARIA label for screen readers\n * @param props.id - Unique identifier for the element\n * @param props.onClick - Click event handler\n * @param props.onMouseEnter - Mouse enter event handler\n * @param props.onMouseLeave - Mouse leave event handler\n * @param props.style - Inline styles object\n * @param props.data-* - Data attributes for testing or tracking\n * @param props...rest - All other standard HTML element attributes\n *\n * @returns A rendered information tag with icon and text content\n */\nexport const InformationTag: FC<CopiedTextInformationProps> = ({\n  className,\n  children,\n  ...props\n}) => (\n  <i className={cn('text-neutral-400 text-xs', className)} {...props}>\n    ⓘ {children}\n  </i>\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgFA,MAAaA,kBAAkD,EAC7D,WACA,SACA,GAAG,YAEH,qBAAC;CAAE,WAAW,GAAG,4BAA4B,UAAU;CAAE,GAAI;YAAO,MAC/D;EACD"}
+{"version":3,"file":"index.mjs","names":["InformationTag: FC<CopiedTextInformationProps>"],"sources":["../../../../src/components/InformationTag/index.tsx"],"sourcesContent":["import type { DetailedHTMLProps, FC } from 'react';\nimport { cn } from '../../utils/cn';\n\n/**\n * Props for the InformationTag component.\n * Extends standard HTML element attributes for maximum flexibility.\n */\ntype CopiedTextInformationProps = DetailedHTMLProps<\n  React.HTMLAttributes<HTMLElement>,\n  HTMLElement\n>;\n\n/**\n * InformationTag Component\n *\n * A lightweight component that displays informational text with a distinctive info icon (ⓘ).\n * Perfect for showing contextual hints, supplementary information, or subtle guidance text.\n *\n * @component\n * @example\n * Basic usage:\n * ```tsx\n * <InformationTag>This field is required</InformationTag>\n * ```\n *\n * @example\n * With custom styling:\n * ```tsx\n * <InformationTag className=\"text-blue-600 font-medium\">\n *   Pro tip: Use keyboard shortcuts for faster navigation\n * </InformationTag>\n * ```\n *\n * @example\n * Form field context:\n * ```tsx\n * <div>\n *   <input type=\"email\" placeholder=\"your@email.com\" />\n *   <InformationTag>We'll never share your email address</InformationTag>\n * </div>\n * ```\n *\n * @example\n * Status information:\n * ```tsx\n * <InformationTag className=\"text-green-500\">\n *   Changes saved automatically\n * </InformationTag>\n * ```\n *\n * Features:\n * - Lightweight and semantic HTML structure using <i> tag\n * - Distinctive info icon (ⓘ) for visual recognition\n * - Default subtle styling with neutral colors\n * - Fully customizable with className overrides\n * - Supports all standard HTML element attributes\n * - Screen reader friendly with meaningful semantic content\n *\n * Accessibility:\n * - Uses semantic <i> tag which is announced by screen readers\n * - Info icon (ⓘ) provides visual context for sighted users\n * - Text content is fully accessible and readable\n * - Supports ARIA attributes through props spreading\n *\n * @param props - Component props extending HTML element attributes\n * @param props.children - The informational text content to display\n * @param props.className - Additional CSS classes for custom styling\n * @param props.title - Optional tooltip text (HTML title attribute)\n * @param props.role - ARIA role (defaults to implicit role from <i> tag)\n * @param props.aria-label - ARIA label for screen readers\n * @param props.id - Unique identifier for the element\n * @param props.onClick - Click event handler\n * @param props.onMouseEnter - Mouse enter event handler\n * @param props.onMouseLeave - Mouse leave event handler\n * @param props.style - Inline styles object\n * @param props.data-* - Data attributes for testing or tracking\n * @param props...rest - All other standard HTML element attributes\n *\n * @returns A rendered information tag with icon and text content\n */\nexport const InformationTag: FC<CopiedTextInformationProps> = ({\n  className,\n  children,\n  ...props\n}) => (\n  <i className={cn('text-neutral-400 text-xs', className)} {...props}>\n    ⓘ {children}\n  </i>\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgFA,MAAaA,kBAAkD,EAC7D,WACA,UACA,GAAG,YAEH,qBAAC;CAAE,WAAW,GAAG,4BAA4B,UAAU;CAAE,GAAI;YAAO,MAC/D;EACD"}

package/dist/esm/components/Input/Checkbox.mjs

@@ -3,18 +3,26 @@ import { cva } from "class-variance-authority";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/Input/Checkbox.tsx
-const checkboxVariants = cva("", {
+const checkboxVariants = cva([
+	"appearance-none",
+	"pointer relative border-2",
+	"focus:outline-0",
+	"checked:border-current checked:bg-current checked:hover:bg-current/80",
+	"ring-current/20 ring-offset-current",
+	"hover:bg-current/20",
+	"disabled:opacity-50",
+	"ring-0 transition-all duration-300 ease-in-out hover:ring-4 focus-visible:ring-6",
+	"checked:before:absolute checked:before:inset-0 checked:before:content-['✓']",
+	"checked:before:flex checked:before:items-center checked:before:justify-center",
+	"checked:before:text-text-opposite/80",
+	"rounded-xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-2xl"
+].join(" "), {
 	variants: {
-		variant: { default: [
-			"pointer rounded border-2 bg-input-background text-input-text shadow-none outline-0 transition-all",
-			"border-input-border hover:border-input-border-hover focus:border-input-border-focus focus:outline-0 focus:[box-shadow:none]",
-			"checked:border-checkbox-checked-border checked:bg-checkbox-checked",
-			"disabled:opacity-50"
-		] },
+		variant: { default: "" },
 		size: {
-			sm: "size-4",
-			md: "size-5",
-			lg: "size-6"
+			sm: "size-4 rounded-md",
+			md: "size-5 rounded-lg",
+			lg: "size-6 rounded-xl"
 		},
 		color: {
 			primary: "accent-primary",
@@ -59,15 +67,14 @@ let CheckboxColor = /* @__PURE__ */ function(CheckboxColor$1) {
 	CheckboxColor$1["CUSTOM"] = "custom";
 	return CheckboxColor$1;
 }({});
-const Input = ({ validationStyleEnabled = false, label, size, color, name, variant, className, labelClassName,...props }) => /* @__PURE__ */ jsx("input", {
+const Input = ({ validationStyleEnabled = false, label, size, color, name, variant, className, labelClassName, ...props }) => /* @__PURE__ */ jsx("input", {
 	type: "checkbox",
-	className: checkboxVariants({
+	className: cn(checkboxVariants({
 		variant,
 		size,
 		color,
-		validationStyleEnabled: validationStyleEnabled ? "enabled" : "disabled",
-		className
-	}),
+		validationStyleEnabled: validationStyleEnabled ? "enabled" : "disabled"
+	}), className),
 	...props
 });
 const Checkbox = (props) => {

package/dist/esm/components/Input/Checkbox.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.mjs","names":["Input: FC<CheckboxProps>","Checkbox: FC<CheckboxProps>"],"sources":["../../../../src/components/Input/Checkbox.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport type {\n  DetailedHTMLProps,\n  FC,\n  InputHTMLAttributes,\n  ReactNode,\n} from 'react';\nimport { cn } from '../../utils/cn';\n\nexport const checkboxVariants = cva('', {\n  variants: {\n    variant: {\n      default: [\n        'pointer rounded border-2 bg-input-background text-input-text shadow-none outline-0 transition-all',\n        'border-input-border hover:border-input-border-hover focus:border-input-border-focus focus:outline-0 focus:[box-shadow:none]',\n        'checked:border-checkbox-checked-border checked:bg-checkbox-checked',\n        'disabled:opacity-50',\n      ],\n    },\n    size: {\n      sm: 'size-4',\n      md: 'size-5',\n      lg: 'size-6',\n    },\n    color: {\n      primary: 'accent-primary',\n      secondary: 'accent-secondary',\n      destructive: 'accent-destructive',\n      neutral: 'accent-neutral',\n      light: 'accent-light',\n      text: 'accent-text',\n      dark: 'accent-dark',\n      error: 'accent-error',\n      success: 'accent-success',\n      custom: 'accent-custom',\n    },\n    validationStyleEnabled: {\n      disabled: '',\n      enabled: 'valid:border-success invalid:border-error',\n    },\n  },\n  defaultVariants: {\n    variant: 'default',\n    color: 'primary',\n    validationStyleEnabled: 'disabled',\n    size: 'md',\n  },\n});\n\nexport enum CheckboxSize {\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n}\n\nexport enum CheckboxColor {\n  PRIMARY = 'primary',\n  SECONDARY = 'secondary',\n  DESTRUCTIVE = 'destructive',\n  NEUTRAL = 'neutral',\n  LIGHT = 'light',\n  TEXT = 'text',\n  DARK = 'dark',\n  ERROR = 'error',\n  SUCCESS = 'success',\n  CUSTOM = 'custom',\n}\n\nexport type CheckboxProps = Omit<\n  DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>,\n  'size'\n> & {\n  name: string;\n  validationStyleEnabled?: boolean;\n  label?: ReactNode;\n} & Omit<\n    VariantProps<typeof checkboxVariants>,\n    'validationStyleEnabled' | 'size' | 'color'\n  > & {\n    size?: CheckboxSize | `${CheckboxSize}`;\n    color?: CheckboxColor | `${CheckboxColor}`;\n    labelClassName?: string;\n  };\n\nconst Input: FC<CheckboxProps> = ({\n  validationStyleEnabled = false,\n  label,\n  size,\n  color,\n  name,\n  variant,\n  className,\n  labelClassName,\n  ...props\n}) => (\n  <input\n    type=\"checkbox\"\n    className={checkboxVariants({\n      variant,\n      size,\n      color,\n      validationStyleEnabled: validationStyleEnabled ? 'enabled' : 'disabled',\n      className,\n    })}\n    {...props}\n  />\n);\n\nexport const Checkbox: FC<CheckboxProps> = (props) => {\n  const { label, name, id } = props;\n\n  return label ? (\n    <label\n      htmlFor={id ?? name}\n      className={cn(\n        'flex w-full cursor-pointer items-center gap-x-4 font-medium text-sm',\n        props.labelClassName\n      )}\n    >\n      <Input id={id ?? name} {...props} />\n      {label}\n    </label>\n  ) : (\n    <Input id={id ?? name} {...props} />\n  );\n};\n"],"mappings":";;;;;AASA,MAAa,mBAAmB,IAAI,IAAI;CACtC,UAAU;EACR,SAAS,EACP,SAAS;GACP;GACA;GACA;GACA;GACD,EACF;EACD,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACL;EACD,OAAO;GACL,SAAS;GACT,WAAW;GACX,aAAa;GACb,SAAS;GACT,OAAO;GACP,MAAM;GACN,MAAM;GACN,OAAO;GACP,SAAS;GACT,QAAQ;GACT;EACD,wBAAwB;GACtB,UAAU;GACV,SAAS;GACV;EACF;CACD,iBAAiB;EACf,SAAS;EACT,OAAO;EACP,wBAAwB;EACxB,MAAM;EACP;CACF,CAAC;AAEF,IAAY,wDAAL;AACL;AACA;AACA;;;AAGF,IAAY,0DAAL;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AAmBF,MAAMA,SAA4B,EAChC,yBAAyB,OACzB,OACA,MACA,OACA,MACA,SACA,WACA,eACA,GAAG,YAEH,oBAAC;CACC,MAAK;CACL,WAAW,iBAAiB;EAC1B;EACA;EACA;EACA,wBAAwB,yBAAyB,YAAY;EAC7D;EACD,CAAC;CACF,GAAI;EACJ;AAGJ,MAAaC,YAA+B,UAAU;CACpD,MAAM,EAAE,OAAO,MAAM,OAAO;AAE5B,QAAO,QACL,qBAAC;EACC,SAAS,MAAM;EACf,WAAW,GACT,uEACA,MAAM,eACP;aAED,oBAAC;GAAM,IAAI,MAAM;GAAM,GAAI;IAAS,EACnC;GACK,GAER,oBAAC;EAAM,IAAI,MAAM;EAAM,GAAI;GAAS"}
+{"version":3,"file":"Checkbox.mjs","names":["Input: FC<CheckboxProps>","Checkbox: FC<CheckboxProps>"],"sources":["../../../../src/components/Input/Checkbox.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport type {\n  DetailedHTMLProps,\n  FC,\n  InputHTMLAttributes,\n  ReactNode,\n} from 'react';\nimport { cn } from '../../utils/cn';\n\nexport const checkboxVariants = cva(\n  [\n    'appearance-none',\n    'pointer relative border-2',\n    'focus:outline-0',\n    'checked:border-current checked:bg-current checked:hover:bg-current/80',\n    'ring-current/20 ring-offset-current',\n    'hover:bg-current/20',\n    'disabled:opacity-50',\n\n    // Ring + animation\n    'ring-0 transition-all duration-300 ease-in-out hover:ring-4 focus-visible:ring-6',\n\n    // centered custom checkmark with text-opposite color\n    \"checked:before:absolute checked:before:inset-0 checked:before:content-['✓']\",\n    'checked:before:flex checked:before:items-center checked:before:justify-center',\n    'checked:before:text-text-opposite/80',\n\n    // Corner shape\n    'rounded-xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-2xl',\n  ].join(' '),\n  {\n    variants: {\n      variant: {\n        default: '',\n      },\n      size: {\n        sm: 'size-4 rounded-md',\n        md: 'size-5 rounded-lg',\n        lg: 'size-6 rounded-xl',\n      },\n      color: {\n        primary: 'accent-primary',\n        secondary: 'accent-secondary',\n        destructive: 'accent-destructive',\n        neutral: 'accent-neutral',\n        light: 'accent-light',\n        text: 'accent-text',\n        dark: 'accent-dark',\n        error: 'accent-error',\n        success: 'accent-success',\n        custom: 'accent-custom',\n      },\n      validationStyleEnabled: {\n        disabled: '',\n        enabled: 'valid:border-success invalid:border-error',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      color: 'primary',\n      validationStyleEnabled: 'disabled',\n      size: 'md',\n    },\n  }\n);\n\nexport enum CheckboxSize {\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n}\n\nexport enum CheckboxColor {\n  PRIMARY = 'primary',\n  SECONDARY = 'secondary',\n  DESTRUCTIVE = 'destructive',\n  NEUTRAL = 'neutral',\n  LIGHT = 'light',\n  TEXT = 'text',\n  DARK = 'dark',\n  ERROR = 'error',\n  SUCCESS = 'success',\n  CUSTOM = 'custom',\n}\n\nexport type CheckboxProps = Omit<\n  DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>,\n  'size'\n> & {\n  name: string;\n  validationStyleEnabled?: boolean;\n  label?: ReactNode;\n} & Omit<\n    VariantProps<typeof checkboxVariants>,\n    'validationStyleEnabled' | 'size' | 'color'\n  > & {\n    size?: CheckboxSize | `${CheckboxSize}`;\n    color?: CheckboxColor | `${CheckboxColor}`;\n    labelClassName?: string;\n  };\n\nconst Input: FC<CheckboxProps> = ({\n  validationStyleEnabled = false,\n  label,\n  size,\n  color,\n  name,\n  variant,\n  className,\n  labelClassName,\n  ...props\n}) => (\n  <input\n    type=\"checkbox\"\n    className={cn(\n      checkboxVariants({\n        variant,\n        size,\n        color,\n        validationStyleEnabled: validationStyleEnabled ? 'enabled' : 'disabled',\n      }),\n      className\n    )}\n    {...props}\n  />\n);\n\nexport const Checkbox: FC<CheckboxProps> = (props) => {\n  const { label, name, id } = props;\n\n  return label ? (\n    <label\n      htmlFor={id ?? name}\n      className={cn(\n        'flex w-full cursor-pointer items-center gap-x-4 font-medium text-sm',\n        props.labelClassName\n      )}\n    >\n      <Input id={id ?? name} {...props} />\n      {label}\n    </label>\n  ) : (\n    <Input id={id ?? name} {...props} />\n  );\n};\n"],"mappings":";;;;;AASA,MAAa,mBAAmB,IAC9B;CACE;CACA;CACA;CACA;CACA;CACA;CACA;CAGA;CAGA;CACA;CACA;CAGA;CACD,CAAC,KAAK,IAAI,EACX;CACE,UAAU;EACR,SAAS,EACP,SAAS,IACV;EACD,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACL;EACD,OAAO;GACL,SAAS;GACT,WAAW;GACX,aAAa;GACb,SAAS;GACT,OAAO;GACP,MAAM;GACN,MAAM;GACN,OAAO;GACP,SAAS;GACT,QAAQ;GACT;EACD,wBAAwB;GACtB,UAAU;GACV,SAAS;GACV;EACF;CACD,iBAAiB;EACf,SAAS;EACT,OAAO;EACP,wBAAwB;EACxB,MAAM;EACP;CACF,CACF;AAED,IAAY,wDAAL;AACL;AACA;AACA;;;AAGF,IAAY,0DAAL;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AAmBF,MAAMA,SAA4B,EAChC,yBAAyB,OACzB,OACA,MACA,OACA,MACA,SACA,WACA,gBACA,GAAG,YAEH,oBAAC;CACC,MAAK;CACL,WAAW,GACT,iBAAiB;EACf;EACA;EACA;EACA,wBAAwB,yBAAyB,YAAY;EAC9D,CAAC,EACF,UACD;CACD,GAAI;EACJ;AAGJ,MAAaC,YAA+B,UAAU;CACpD,MAAM,EAAE,OAAO,MAAM,OAAO;AAE5B,QAAO,QACL,qBAAC;EACC,SAAS,MAAM;EACf,WAAW,GACT,uEACA,MAAM,eACP;aAED,oBAAC;GAAM,IAAI,MAAM;GAAM,GAAI;IAAS,EACnC;GACK,GAER,oBAAC;EAAM,IAAI,MAAM;EAAM,GAAI;GAAS"}

package/dist/esm/components/Input/CodeInput.mjs

@@ -0,0 +1,84 @@
+'use client';
+
+
+import { cn } from "../../utils/cn.mjs";
+import { useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/Input/CodeInput.tsx
+const CodeInput = ({ length = 6, onValueChange, defaultValue = "", value: controlledValue, disabled = false, containerClassName, slotClassName, "aria-invalid": ariaInvalid }) => {
+	const isControlled = controlledValue !== void 0;
+	const [internalValue, setInternalValue] = useState(defaultValue);
+	const value = isControlled ? controlledValue : internalValue;
+	const inputRefs = useRef([]);
+	const handleChange = (index, newValue) => {
+		const digit = newValue.replace(/\D/g, "").slice(-1);
+		const newCode = value.split("");
+		while (newCode.length < length) newCode.push("");
+		newCode[index] = digit;
+		const finalValue = newCode.join("");
+		if (!isControlled) setInternalValue(finalValue);
+		onValueChange?.(finalValue);
+		if (digit && index < length - 1) inputRefs.current[index + 1]?.focus();
+	};
+	const handleKeyDown = (index, e) => {
+		if (e.key === "Backspace") {
+			const newCode = value.split("");
+			if (!newCode[index] && index > 0) {
+				e.preventDefault();
+				newCode[index - 1] = "";
+				const finalValue = newCode.join("");
+				if (!isControlled) setInternalValue(finalValue);
+				onValueChange?.(finalValue);
+				inputRefs.current[index - 1]?.focus();
+			} else if (newCode[index]) {
+				newCode[index] = "";
+				const finalValue = newCode.join("");
+				if (!isControlled) setInternalValue(finalValue);
+				onValueChange?.(finalValue);
+			}
+		} else if (e.key === "ArrowLeft" && index > 0) {
+			e.preventDefault();
+			inputRefs.current[index - 1]?.focus();
+		} else if (e.key === "ArrowRight" && index < length - 1) {
+			e.preventDefault();
+			inputRefs.current[index + 1]?.focus();
+		}
+	};
+	const handlePaste = (e) => {
+		e.preventDefault();
+		const newCode = e.clipboardData.getData("text").replace(/\D/g, "").slice(0, length).split("");
+		while (newCode.length < length) newCode.push("");
+		const finalValue = newCode.join("");
+		if (!isControlled) setInternalValue(finalValue);
+		onValueChange?.(finalValue);
+		const nextEmptyIndex = newCode.findIndex((digit) => !digit);
+		const focusIndex = nextEmptyIndex === -1 ? length - 1 : nextEmptyIndex;
+		inputRefs.current[focusIndex]?.focus();
+	};
+	const digits = value.split("");
+	while (digits.length < length) digits.push("");
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex items-center gap-2", disabled && "opacity-50", containerClassName),
+		children: Array.from({ length }).map((_, index) => /* @__PURE__ */ jsx("input", {
+			ref: (el) => {
+				inputRefs.current[index] = el;
+			},
+			type: "text",
+			inputMode: "numeric",
+			pattern: "[0-9]*",
+			maxLength: 1,
+			value: digits[index] || "",
+			onChange: (e) => handleChange(index, e.target.value),
+			onKeyDown: (e) => handleKeyDown(index, e),
+			onPaste: handlePaste,
+			disabled,
+			"aria-invalid": ariaInvalid,
+			className: cn("relative flex h-12 w-12 items-center justify-center rounded-md border border-input bg-neutral-50 text-center text-base font-medium shadow-xs outline-none transition-all", "focus:z-10 focus:border-ring focus:ring-[3px] focus:ring-ring/50", "disabled:cursor-not-allowed disabled:opacity-50", "dark:bg-input/30", ariaInvalid && "border-destructive focus:border-destructive focus:ring-destructive/20 dark:focus:ring-destructive/40", slotClassName)
+		}, index))
+	});
+};
+
+//#endregion
+export { CodeInput };
+//# sourceMappingURL=CodeInput.mjs.map

package/dist/esm/components/Input/CodeInput.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeInput.mjs","names":["CodeInput: FC<CodeInputProps>"],"sources":["../../../../src/components/Input/CodeInput.tsx"],"sourcesContent":["'use client';\n\nimport {\n  type ChangeEvent,\n  type ClipboardEvent,\n  type FC,\n  type KeyboardEvent,\n  useRef,\n  useState,\n} from 'react';\nimport { cn } from '../../utils/cn';\n\nexport interface CodeInputProps {\n  /** Number of input fields (default: 6) */\n  length?: number;\n  /** Callback when value changes */\n  onValueChange?: (value: string) => void;\n  /** Default value */\n  defaultValue?: string;\n  /** Current value (controlled) */\n  value?: string;\n  /** Whether the input is disabled */\n  disabled?: boolean;\n  /** Custom class name for container */\n  containerClassName?: string;\n  /** Custom class name for each input slot */\n  slotClassName?: string;\n  /** Whether to show error state */\n  'aria-invalid'?: boolean;\n}\n\nexport const CodeInput: FC<CodeInputProps> = ({\n  length = 6,\n  onValueChange,\n  defaultValue = '',\n  value: controlledValue,\n  disabled = false,\n  containerClassName,\n  slotClassName,\n  'aria-invalid': ariaInvalid,\n}) => {\n  const isControlled = controlledValue !== undefined;\n  const [internalValue, setInternalValue] = useState(defaultValue);\n  const value = isControlled ? controlledValue : internalValue;\n  \n  const inputRefs = useRef<(HTMLInputElement | null)[]>([]);\n\n  const handleChange = (index: number, newValue: string) => {\n    // Only allow digits\n    const digit = newValue.replace(/\\D/g, '').slice(-1);\n    \n    const newCode = value.split('');\n    while (newCode.length < length) {\n      newCode.push('');\n    }\n    newCode[index] = digit;\n    \n    const finalValue = newCode.join('');\n    \n    if (!isControlled) {\n      setInternalValue(finalValue);\n    }\n    onValueChange?.(finalValue);\n\n    // Auto-focus next input\n    if (digit && index < length - 1) {\n      inputRefs.current[index + 1]?.focus();\n    }\n  };\n\n  const handleKeyDown = (index: number, e: KeyboardEvent<HTMLInputElement>) => {\n    if (e.key === 'Backspace') {\n      const newCode = value.split('');\n      \n      if (!newCode[index] && index > 0) {\n        // If current is empty, go back and clear previous\n        e.preventDefault();\n        newCode[index - 1] = '';\n        const finalValue = newCode.join('');\n        \n        if (!isControlled) {\n          setInternalValue(finalValue);\n        }\n        onValueChange?.(finalValue);\n        inputRefs.current[index - 1]?.focus();\n      } else if (newCode[index]) {\n        // Clear current\n        newCode[index] = '';\n        const finalValue = newCode.join('');\n        \n        if (!isControlled) {\n          setInternalValue(finalValue);\n        }\n        onValueChange?.(finalValue);\n      }\n    } else if (e.key === 'ArrowLeft' && index > 0) {\n      e.preventDefault();\n      inputRefs.current[index - 1]?.focus();\n    } else if (e.key === 'ArrowRight' && index < length - 1) {\n      e.preventDefault();\n      inputRefs.current[index + 1]?.focus();\n    }\n  };\n\n  const handlePaste = (e: ClipboardEvent<HTMLInputElement>) => {\n    e.preventDefault();\n    const pastedData = e.clipboardData.getData('text').replace(/\\D/g, '');\n    const newCode = pastedData.slice(0, length).split('');\n    \n    while (newCode.length < length) {\n      newCode.push('');\n    }\n    \n    const finalValue = newCode.join('');\n    \n    if (!isControlled) {\n      setInternalValue(finalValue);\n    }\n    onValueChange?.(finalValue);\n\n    // Focus the next empty input or the last one\n    const nextEmptyIndex = newCode.findIndex((digit) => !digit);\n    const focusIndex = nextEmptyIndex === -1 ? length - 1 : nextEmptyIndex;\n    inputRefs.current[focusIndex]?.focus();\n  };\n\n  const digits = value.split('');\n  while (digits.length < length) {\n    digits.push('');\n  }\n\n  return (\n    <div\n      className={cn(\n        'flex items-center gap-2',\n        disabled && 'opacity-50',\n        containerClassName\n      )}\n    >\n      {Array.from({ length }).map((_, index) => (\n        <input\n          key={index}\n          ref={(el) => {\n            inputRefs.current[index] = el;\n          }}\n          type=\"text\"\n          inputMode=\"numeric\"\n          pattern=\"[0-9]*\"\n          maxLength={1}\n          value={digits[index] || ''}\n          onChange={(e: ChangeEvent<HTMLInputElement>) =>\n            handleChange(index, e.target.value)\n          }\n          onKeyDown={(e: KeyboardEvent<HTMLInputElement>) =>\n            handleKeyDown(index, e)\n          }\n          onPaste={handlePaste}\n          disabled={disabled}\n          aria-invalid={ariaInvalid}\n          className={cn(\n            'relative flex h-12 w-12 items-center justify-center rounded-md border border-input bg-neutral-50 text-center text-base font-medium shadow-xs outline-none transition-all',\n            'focus:z-10 focus:border-ring focus:ring-[3px] focus:ring-ring/50',\n            'disabled:cursor-not-allowed disabled:opacity-50',\n            'dark:bg-input/30',\n            ariaInvalid &&\n              'border-destructive focus:border-destructive focus:ring-destructive/20 dark:focus:ring-destructive/40',\n            slotClassName\n          )}\n        />\n      ))}\n    </div>\n  );\n};\n\n"],"mappings":";;;;;;;;AA+BA,MAAaA,aAAiC,EAC5C,SAAS,GACT,eACA,eAAe,IACf,OAAO,iBACP,WAAW,OACX,oBACA,eACA,gBAAgB,kBACZ;CACJ,MAAM,eAAe,oBAAoB;CACzC,MAAM,CAAC,eAAe,oBAAoB,SAAS,aAAa;CAChE,MAAM,QAAQ,eAAe,kBAAkB;CAE/C,MAAM,YAAY,OAAoC,EAAE,CAAC;CAEzD,MAAM,gBAAgB,OAAe,aAAqB;EAExD,MAAM,QAAQ,SAAS,QAAQ,OAAO,GAAG,CAAC,MAAM,GAAG;EAEnD,MAAM,UAAU,MAAM,MAAM,GAAG;AAC/B,SAAO,QAAQ,SAAS,OACtB,SAAQ,KAAK,GAAG;AAElB,UAAQ,SAAS;EAEjB,MAAM,aAAa,QAAQ,KAAK,GAAG;AAEnC,MAAI,CAAC,aACH,kBAAiB,WAAW;AAE9B,kBAAgB,WAAW;AAG3B,MAAI,SAAS,QAAQ,SAAS,EAC5B,WAAU,QAAQ,QAAQ,IAAI,OAAO;;CAIzC,MAAM,iBAAiB,OAAe,MAAuC;AAC3E,MAAI,EAAE,QAAQ,aAAa;GACzB,MAAM,UAAU,MAAM,MAAM,GAAG;AAE/B,OAAI,CAAC,QAAQ,UAAU,QAAQ,GAAG;AAEhC,MAAE,gBAAgB;AAClB,YAAQ,QAAQ,KAAK;IACrB,MAAM,aAAa,QAAQ,KAAK,GAAG;AAEnC,QAAI,CAAC,aACH,kBAAiB,WAAW;AAE9B,oBAAgB,WAAW;AAC3B,cAAU,QAAQ,QAAQ,IAAI,OAAO;cAC5B,QAAQ,QAAQ;AAEzB,YAAQ,SAAS;IACjB,MAAM,aAAa,QAAQ,KAAK,GAAG;AAEnC,QAAI,CAAC,aACH,kBAAiB,WAAW;AAE9B,oBAAgB,WAAW;;aAEpB,EAAE,QAAQ,eAAe,QAAQ,GAAG;AAC7C,KAAE,gBAAgB;AAClB,aAAU,QAAQ,QAAQ,IAAI,OAAO;aAC5B,EAAE,QAAQ,gBAAgB,QAAQ,SAAS,GAAG;AACvD,KAAE,gBAAgB;AAClB,aAAU,QAAQ,QAAQ,IAAI,OAAO;;;CAIzC,MAAM,eAAe,MAAwC;AAC3D,IAAE,gBAAgB;EAElB,MAAM,UADa,EAAE,cAAc,QAAQ,OAAO,CAAC,QAAQ,OAAO,GAAG,CAC1C,MAAM,GAAG,OAAO,CAAC,MAAM,GAAG;AAErD,SAAO,QAAQ,SAAS,OACtB,SAAQ,KAAK,GAAG;EAGlB,MAAM,aAAa,QAAQ,KAAK,GAAG;AAEnC,MAAI,CAAC,aACH,kBAAiB,WAAW;AAE9B,kBAAgB,WAAW;EAG3B,MAAM,iBAAiB,QAAQ,WAAW,UAAU,CAAC,MAAM;EAC3D,MAAM,aAAa,mBAAmB,KAAK,SAAS,IAAI;AACxD,YAAU,QAAQ,aAAa,OAAO;;CAGxC,MAAM,SAAS,MAAM,MAAM,GAAG;AAC9B,QAAO,OAAO,SAAS,OACrB,QAAO,KAAK,GAAG;AAGjB,QACE,oBAAC;EACC,WAAW,GACT,2BACA,YAAY,cACZ,mBACD;YAEA,MAAM,KAAK,EAAE,QAAQ,CAAC,CAAC,KAAK,GAAG,UAC9B,oBAAC;GAEC,MAAM,OAAO;AACX,cAAU,QAAQ,SAAS;;GAE7B,MAAK;GACL,WAAU;GACV,SAAQ;GACR,WAAW;GACX,OAAO,OAAO,UAAU;GACxB,WAAW,MACT,aAAa,OAAO,EAAE,OAAO,MAAM;GAErC,YAAY,MACV,cAAc,OAAO,EAAE;GAEzB,SAAS;GACC;GACV,gBAAc;GACd,WAAW,GACT,4KACA,oEACA,mDACA,oBACA,eACE,wGACF,cACD;KA1BI,MA2BL,CACF;GACE"}

package/dist/esm/components/Input/Input.mjs

@@ -2,20 +2,32 @@ import { cva } from "class-variance-authority";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/components/Input/Input.tsx
-const inputVariants = cva("", {
+const cn = (...classes) => classes.filter(Boolean).join(" ");
+const inputVariants = cva([
+	"w-full select-text resize-none text-base shadow-none outline-none",
+	"transition-shadow duration-100 md:text-sm",
+	"ring-0",
+	"disabled:opacity-50",
+	"rounded-xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-2xl"
+].join(" "), {
 	variants: {
 		variant: {
 			default: [
-				"w-full select-text resize-none rounded-xl border-2 bg-input-background text-base text-input-text shadow-none outline-0 transition-all md:text-sm",
-				"border-input-border hover:border-input-border-hover focus:border-input-border-focus focus:outline-0 focus:[box-shadow:none]",
-				"aria-[invalid=true]:border-error",
-				"disabled:opacity-50"
-			],
-			invisible: ["w-full border-none bg-inherit text-inherit outline-hidden ring-0"]
+				"text-text",
+				"bg-neutral-50 dark:bg-neutral-950",
+				"ring-neutral-100 dark:ring-neutral-700",
+				"ring-offset-neutral-100 dark:ring-offset-neutral-700",
+				"focus-visible:outline-none",
+				"disabled:ring-0",
+				"focus-visible:ring-3",
+				"[box-shadow:none] focus:[box-shadow:none]",
+				"aria-invalid:border-error"
+			].join(" "),
+			invisible: ["border-none bg-inherit text-inherit outline-none ring-0"].join(" ")
 		},
 		size: {
-			md: "px-2 py-3 md:py-1",
-			lg: "p-4 md:py-2"
+			md: "px-2 py-3 md:py-2",
+			lg: "p-4"
 		},
 		validationStyleEnabled: {
 			disabled: "",
@@ -38,13 +50,12 @@ let InputSize = /* @__PURE__ */ function(InputSize$1) {
 	InputSize$1["LG"] = "lg";
 	return InputSize$1;
 }({});
-const Input = ({ validationStyleEnabled = false, variant, size, className,...props }) => /* @__PURE__ */ jsx("input", {
-	className: inputVariants({
+const Input = ({ validationStyleEnabled = false, variant, size, className, ...props }) => /* @__PURE__ */ jsx("input", {
+	className: cn(inputVariants({
 		variant,
 		size,
-		validationStyleEnabled: validationStyleEnabled ? "enabled" : "disabled",
-		className
-	}),
+		validationStyleEnabled: validationStyleEnabled ? "enabled" : "disabled"
+	}), className),
 	...props
 });
 

package/dist/esm/components/Input/Input.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Input.mjs","names":["Input: FC<InputProps>"],"sources":["../../../../src/components/Input/Input.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport type { DetailedHTMLProps, FC, InputHTMLAttributes } from 'react';\n\nexport const inputVariants = cva('', {\n  variants: {\n    variant: {\n      default: [\n        'w-full select-text resize-none rounded-xl border-2 bg-input-background text-base text-input-text shadow-none outline-0 transition-all md:text-sm',\n        'border-input-border hover:border-input-border-hover focus:border-input-border-focus focus:outline-0 focus:[box-shadow:none]',\n        'aria-[invalid=true]:border-error',\n        'disabled:opacity-50',\n      ],\n      invisible: [\n        'w-full border-none bg-inherit text-inherit outline-hidden ring-0',\n      ],\n    },\n    size: {\n      md: 'px-2 py-3 md:py-1',\n      lg: 'p-4 md:py-2',\n    },\n    validationStyleEnabled: {\n      disabled: '',\n      enabled: 'valid:border-success invalid:border-error',\n    },\n  },\n  defaultVariants: {\n    variant: 'default',\n    size: 'md',\n    validationStyleEnabled: 'disabled',\n  },\n});\n\nexport enum InputVariant {\n  DEFAULT = 'default',\n  INVISIBLE = 'invisible',\n}\n\nexport enum InputSize {\n  MD = 'md',\n  LG = 'lg',\n}\n\nexport type InputProps = DetailedHTMLProps<\n  InputHTMLAttributes<HTMLInputElement>,\n  HTMLInputElement\n> & {\n  validationStyleEnabled?: boolean;\n} & Omit<\n    VariantProps<typeof inputVariants>,\n    'validationStyleEnabled' | 'variant' | 'size'\n  > & {\n    variant?: InputVariant;\n    size?: InputSize;\n  };\n\nexport const Input: FC<InputProps> = ({\n  validationStyleEnabled = false,\n  variant,\n  size,\n  className,\n  ...props\n}) => (\n  <input\n    className={inputVariants({\n      variant,\n      size,\n      validationStyleEnabled: validationStyleEnabled ? 'enabled' : 'disabled',\n      className,\n    })}\n    {...props}\n  />\n);\n"],"mappings":";;;;AAGA,MAAa,gBAAgB,IAAI,IAAI;CACnC,UAAU;EACR,SAAS;GACP,SAAS;IACP;IACA;IACA;IACA;IACD;GACD,WAAW,CACT,mEACD;GACF;EACD,MAAM;GACJ,IAAI;GACJ,IAAI;GACL;EACD,wBAAwB;GACtB,UAAU;GACV,SAAS;GACV;EACF;CACD,iBAAiB;EACf,SAAS;EACT,MAAM;EACN,wBAAwB;EACzB;CACF,CAAC;AAEF,IAAY,wDAAL;AACL;AACA;;;AAGF,IAAY,kDAAL;AACL;AACA;;;AAgBF,MAAaA,SAAyB,EACpC,yBAAyB,OACzB,SACA,MACA,UACA,GAAG,YAEH,oBAAC;CACC,WAAW,cAAc;EACvB;EACA;EACA,wBAAwB,yBAAyB,YAAY;EAC7D;EACD,CAAC;CACF,GAAI;EACJ"}
+{"version":3,"file":"Input.mjs","names":["Input: FC<InputProps>"],"sources":["../../../../src/components/Input/Input.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport type { DetailedHTMLProps, FC, InputHTMLAttributes } from 'react';\n\n// Optional: your own cn helper to merge class names\nconst cn = (...classes: (string | undefined | false | null)[]) =>\n  classes.filter(Boolean).join(' ');\n\nexport const inputVariants = cva(\n  [\n    // base styles\n    'w-full select-text resize-none text-base shadow-none outline-none',\n    'transition-shadow duration-100 md:text-sm',\n    'ring-0', // base ring\n    'disabled:opacity-50',\n\n    // Corner shape\n    'rounded-xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-2xl',\n  ].join(' '),\n  {\n    variants: {\n      variant: {\n        default: [\n          'text-text',\n          'bg-neutral-50 dark:bg-neutral-950',\n          'ring-neutral-100 dark:ring-neutral-700',\n          'ring-offset-neutral-100 dark:ring-offset-neutral-700',\n\n          // Focus ring + animation\n          'focus-visible:outline-none',\n\n          'disabled:ring-0',\n          'focus-visible:ring-3',\n\n          // Remove any weird box-shadow\n          '[box-shadow:none] focus:[box-shadow:none]',\n\n          // aria-invalid border color\n          'aria-invalid:border-error',\n        ].join(' '),\n        invisible: [\n          'border-none bg-inherit text-inherit outline-none ring-0',\n        ].join(' '),\n      },\n      size: {\n        md: 'px-2 py-3 md:py-2',\n        lg: 'p-4',\n      },\n      validationStyleEnabled: {\n        disabled: '',\n        enabled: 'valid:border-success invalid:border-error',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'md',\n      validationStyleEnabled: 'disabled',\n    },\n  }\n);\n\nexport enum InputVariant {\n  DEFAULT = 'default',\n  INVISIBLE = 'invisible',\n}\n\nexport enum InputSize {\n  MD = 'md',\n  LG = 'lg',\n}\n\nexport type InputProps = DetailedHTMLProps<\n  InputHTMLAttributes<HTMLInputElement>,\n  HTMLInputElement\n> & {\n  validationStyleEnabled?: boolean;\n} & Omit<\n    VariantProps<typeof inputVariants>,\n    'validationStyleEnabled' | 'variant' | 'size'\n  > & {\n    variant?: InputVariant;\n    size?: InputSize;\n  };\n\nexport const Input: FC<InputProps> = ({\n  validationStyleEnabled = false,\n  variant,\n  size,\n  className,\n  ...props\n}) => (\n  <input\n    className={cn(\n      inputVariants({\n        variant,\n        size,\n        validationStyleEnabled: validationStyleEnabled ? 'enabled' : 'disabled',\n      }),\n      className // <- merged *outside* cva\n    )}\n    {...props}\n  />\n);\n"],"mappings":";;;;AAIA,MAAM,MAAM,GAAG,YACb,QAAQ,OAAO,QAAQ,CAAC,KAAK,IAAI;AAEnC,MAAa,gBAAgB,IAC3B;CAEE;CACA;CACA;CACA;CAGA;CACD,CAAC,KAAK,IAAI,EACX;CACE,UAAU;EACR,SAAS;GACP,SAAS;IACP;IACA;IACA;IACA;IAGA;IAEA;IACA;IAGA;IAGA;IACD,CAAC,KAAK,IAAI;GACX,WAAW,CACT,0DACD,CAAC,KAAK,IAAI;GACZ;EACD,MAAM;GACJ,IAAI;GACJ,IAAI;GACL;EACD,wBAAwB;GACtB,UAAU;GACV,SAAS;GACV;EACF;CACD,iBAAiB;EACf,SAAS;EACT,MAAM;EACN,wBAAwB;EACzB;CACF,CACF;AAED,IAAY,wDAAL;AACL;AACA;;;AAGF,IAAY,kDAAL;AACL;AACA;;;AAgBF,MAAaA,SAAyB,EACpC,yBAAyB,OACzB,SACA,MACA,WACA,GAAG,YAEH,oBAAC;CACC,WAAW,GACT,cAAc;EACZ;EACA;EACA,wBAAwB,yBAAyB,YAAY;EAC9D,CAAC,EACF,UACD;CACD,GAAI;EACJ"}

package/dist/esm/components/Input/InputPassword.mjs

@@ -27,7 +27,7 @@ const InputPassword = (props) => {
 			onClick: handlePasswordReveal,
 			"aria-label": isPasswordRevealed ? "Hide password" : "Show password",
 			children: /* @__PURE__ */ jsx(EyeIconComponent, {
-				className: "mr-2 inline-block text-neutral",
+				className: "mr-2 inline-block cursor-pointer text-neutral",
 				size: 20
 			})
 		})]

package/dist/esm/components/Input/InputPassword.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"InputPassword.mjs","names":["InputPassword: FC<InputPasswordProps>","handlePasswordReveal: MouseEventHandler<HTMLButtonElement>","isPasswordRevealed"],"sources":["../../../../src/components/Input/InputPassword.tsx"],"sourcesContent":["'use client';\n\nimport { EyeIcon, EyeOffIcon } from 'lucide-react';\nimport { type FC, type MouseEventHandler, useState } from 'react';\nimport { Input, type InputProps } from './Input';\n\ntype InputPasswordProps = Omit<InputProps, 'type'>;\n\nexport const InputPassword: FC<InputPasswordProps> = (props) => {\n  const [isPasswordRevealed, setIsPasswordRevealed] = useState(false);\n\n  const handlePasswordReveal: MouseEventHandler<HTMLButtonElement> = (e) => {\n    e.preventDefault();\n    e.stopPropagation();\n    setIsPasswordRevealed((isPasswordRevealed) => !isPasswordRevealed);\n  };\n\n  const EyeIconComponent = isPasswordRevealed ? EyeIcon : EyeOffIcon;\n\n  return (\n    <div className=\"relative\">\n      <Input\n        {...props}\n        aria-label=\"password\"\n        type={isPasswordRevealed ? 'text' : 'password'}\n      />\n\n      <button\n        data-testid=\"eye-icon\"\n        className=\"absolute right-2 h-full flex-row items-center\"\n        onClick={handlePasswordReveal}\n        aria-label={isPasswordRevealed ? 'Hide password' : 'Show password'}\n      >\n        <EyeIconComponent\n          className=\"mr-2 inline-block text-neutral\"\n          size={20}\n        />\n      </button>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;AAQA,MAAaA,iBAAyC,UAAU;CAC9D,MAAM,CAAC,oBAAoB,yBAAyB,SAAS,MAAM;CAEnE,MAAMC,wBAA8D,MAAM;AACxE,IAAE,gBAAgB;AAClB,IAAE,iBAAiB;AACnB,yBAAuB,yBAAuB,CAACC,qBAAmB;;CAGpE,MAAM,mBAAmB,qBAAqB,UAAU;AAExD,QACE,qBAAC;EAAI,WAAU;aACb,oBAAC;GACC,GAAI;GACJ,cAAW;GACX,MAAM,qBAAqB,SAAS;IACpC,EAEF,oBAAC;GACC,eAAY;GACZ,WAAU;GACV,SAAS;GACT,cAAY,qBAAqB,kBAAkB;aAEnD,oBAAC;IACC,WAAU;IACV,MAAM;KACN;IACK;GACL"}
+{"version":3,"file":"InputPassword.mjs","names":["InputPassword: FC<InputPasswordProps>","handlePasswordReveal: MouseEventHandler<HTMLButtonElement>","isPasswordRevealed"],"sources":["../../../../src/components/Input/InputPassword.tsx"],"sourcesContent":["'use client';\n\nimport { EyeIcon, EyeOffIcon } from 'lucide-react';\nimport { type FC, type MouseEventHandler, useState } from 'react';\nimport { Input, type InputProps } from './Input';\n\ntype InputPasswordProps = Omit<InputProps, 'type'>;\n\nexport const InputPassword: FC<InputPasswordProps> = (props) => {\n  const [isPasswordRevealed, setIsPasswordRevealed] = useState(false);\n\n  const handlePasswordReveal: MouseEventHandler<HTMLButtonElement> = (e) => {\n    e.preventDefault();\n    e.stopPropagation();\n    setIsPasswordRevealed((isPasswordRevealed) => !isPasswordRevealed);\n  };\n\n  const EyeIconComponent = isPasswordRevealed ? EyeIcon : EyeOffIcon;\n\n  return (\n    <div className=\"relative\">\n      <Input\n        {...props}\n        aria-label=\"password\"\n        type={isPasswordRevealed ? 'text' : 'password'}\n      />\n\n      <button\n        data-testid=\"eye-icon\"\n        className=\"absolute right-2 h-full flex-row items-center\"\n        onClick={handlePasswordReveal}\n        aria-label={isPasswordRevealed ? 'Hide password' : 'Show password'}\n      >\n        <EyeIconComponent\n          className=\"mr-2 inline-block cursor-pointer text-neutral\"\n          size={20}\n        />\n      </button>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;AAQA,MAAaA,iBAAyC,UAAU;CAC9D,MAAM,CAAC,oBAAoB,yBAAyB,SAAS,MAAM;CAEnE,MAAMC,wBAA8D,MAAM;AACxE,IAAE,gBAAgB;AAClB,IAAE,iBAAiB;AACnB,yBAAuB,yBAAuB,CAACC,qBAAmB;;CAGpE,MAAM,mBAAmB,qBAAqB,UAAU;AAExD,QACE,qBAAC;EAAI,WAAU;aACb,oBAAC;GACC,GAAI;GACJ,cAAW;GACX,MAAM,qBAAqB,SAAS;IACpC,EAEF,oBAAC;GACC,eAAY;GACZ,WAAU;GACV,SAAS;GACT,cAAY,qBAAqB,kBAAkB;aAEnD,oBAAC;IACC,WAAU;IACV,MAAM;KACN;IACK;GACL"}