@intlayer/design-system 6.1.6 → 7.0.0-canary.1

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

@@ -0,0 +1,58 @@
+import { t } from "intlayer";
+
+//#region src/components/IDE/copyCode.content.ts
+const copyContentContent = {
+	key: "code",
+	content: {
+		title: t({
+			en: "Copy code",
+			es: "Copiar código",
+			pt: "Copiar código",
+			fr: "Copier le code",
+			de: "Code kopieren",
+			it: "Copiare il codice",
+			ja: "コードをコピー",
+			ko: "코드 복사",
+			zh: "复制代码",
+			hi: "कोड कॉपी करें",
+			"en-GB": "Copy code",
+			ru: "Копировать код",
+			ar: "نسخ الكود",
+			tr: "Kodu kopyala",
+			pl: "Kopiuj kod",
+			id: "Salin kode",
+			vi: "Sao chép mã"
+		}),
+		description: t({
+			en: "Copy the code to the clipboard",
+			es: "Copiar el código al portapapeles",
+			pt: "Copiar o código para a área de transferência",
+			fr: "Copier le code dans le presse-papiers",
+			de: "Kopieren Sie den Code in die Zwischenablage",
+			it: "Copiare il codice nella clipboard",
+			ja: "コードをクリップボードにコピー",
+			ko: "코드를 클립보드에 복사",
+			zh: "复制代码到剪贴板",
+			hi: "कोड को क्लिपबोर्ड पर कॉपी करें",
+			"en-GB": "Copy the code to the clipboard",
+			ru: "Копировать код в буфер обмена",
+			ar: "نسخ الكود إلى الحافظة",
+			tr: "Kodu panoya kopyala",
+			pl: "Skopiuj kod do schowka",
+			id: "Salin kode ke clipboard",
+			vi: "Sao chép mã vào clipboard"
+		})
+	},
+	title: "Copy code button",
+	description: "Content declaration for the copy code button. Provides the title and tooltip description used to allow users to copy code snippets to the clipboard.",
+	tags: [
+		"component",
+		"code snippet",
+		"copy functionality"
+	]
+};
+var copyCode_content_default = copyContentContent;
+
+//#endregion
+export { copyCode_content_default as default };
+//# sourceMappingURL=copyCode.content.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"copyCode.content.mjs","names":[],"sources":["../../../../src/components/IDE/copyCode.content.ts"],"sourcesContent":["import { type Dictionary, t } from 'intlayer';\n\nconst copyContentContent = {\n  key: 'code',\n  content: {\n    title: t({\n      en: 'Copy code',\n      es: 'Copiar código',\n      pt: 'Copiar código',\n      fr: 'Copier le code',\n      de: 'Code kopieren',\n      it: 'Copiare il codice',\n      ja: 'コードをコピー',\n      ko: '코드 복사',\n      zh: '复制代码',\n      hi: 'कोड कॉपी करें',\n      'en-GB': 'Copy code',\n      ru: 'Копировать код',\n      ar: 'نسخ الكود',\n      tr: 'Kodu kopyala',\n      pl: 'Kopiuj kod',\n      id: 'Salin kode',\n      vi: 'Sao chép mã',\n    }),\n    description: t({\n      en: 'Copy the code to the clipboard',\n      es: 'Copiar el código al portapapeles',\n      pt: 'Copiar o código para a área de transferência',\n      fr: 'Copier le code dans le presse-papiers',\n      de: 'Kopieren Sie den Code in die Zwischenablage',\n      it: 'Copiare il codice nella clipboard',\n      ja: 'コードをクリップボードにコピー',\n      ko: '코드를 클립보드에 복사',\n      zh: '复制代码到剪贴板',\n      hi: 'कोड को क्लिपबोर्ड पर कॉपी करें',\n      'en-GB': 'Copy the code to the clipboard',\n      ru: 'Копировать код в буфер обмена',\n      ar: 'نسخ الكود إلى الحافظة',\n      tr: 'Kodu panoya kopyala',\n      pl: 'Skopiuj kod do schowka',\n      id: 'Salin kode ke clipboard',\n      vi: 'Sao chép mã vào clipboard',\n    }),\n  },\n  title: 'Copy code button',\n  description:\n    'Content declaration for the copy code button. Provides the title and tooltip description used to allow users to copy code snippets to the clipboard.',\n  tags: ['component', 'code snippet', 'copy functionality'],\n} satisfies Dictionary;\n\nexport default copyContentContent;\n"],"mappings":";;;AAEA,MAAM,qBAAqB;CACzB,KAAK;CACL,SAAS;EACP,OAAO,EAAE;GACP,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,SAAS;GACT,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACL,CAAC;EACF,aAAa,EAAE;GACb,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,SAAS;GACT,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACL,CAAC;EACH;CACD,OAAO;CACP,aACE;CACF,MAAM;EAAC;EAAa;EAAgB;EAAqB;CAC1D;AAED,+BAAe"}

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

@@ -0,0 +1,32 @@
+//#region src/components/IDE/createFileTree.ts
+const createFileTree = (paths) => {
+	const root = {
+		path: "",
+		subPath: [],
+		isFile: false
+	};
+	paths.forEach((path) => {
+		const parts = path.split("/").filter((part) => part !== "");
+		let current = root;
+		for (let i = 0; i < parts.length; i++) {
+			const part = parts[i];
+			const isFile = i === parts.length - 1;
+			if (!current.subPath) current.subPath = [];
+			let next = current.subPath.find((sub) => sub.path === part);
+			if (!next) {
+				next = {
+					path: part,
+					isFile,
+					subPath: isFile ? void 0 : []
+				};
+				current.subPath.push(next);
+			}
+			current = next;
+		}
+	});
+	return root.subPath ?? [];
+};
+
+//#endregion
+export { createFileTree };
+//# sourceMappingURL=createFileTree.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"createFileTree.mjs","names":["root: FilePath"],"sources":["../../../../src/components/IDE/createFileTree.ts"],"sourcesContent":["export type FilePath = {\n  path: string;\n  subPath?: FilePath[];\n  isFile: boolean;\n};\n\nexport const createFileTree = (paths: string[]): FilePath[] => {\n  const root: FilePath = { path: '', subPath: [], isFile: false };\n\n  paths.forEach((path) => {\n    const parts = path.split('/').filter((part) => part !== ''); // Remove empty strings due to leading slash\n    let current = root;\n\n    for (let i = 0; i < parts.length; i++) {\n      const part = parts[i];\n      const isFile = i === parts.length - 1; // Last part of the path is a file\n\n      if (!current.subPath) {\n        current.subPath = [];\n      }\n\n      let next = current.subPath.find((sub) => sub.path === part);\n\n      if (!next) {\n        next = { path: part, isFile, subPath: isFile ? undefined : [] };\n        current.subPath.push(next);\n      }\n\n      current = next;\n    }\n  });\n\n  return root.subPath ?? [];\n};\n"],"mappings":";AAMA,MAAa,kBAAkB,UAAgC;CAC7D,MAAMA,OAAiB;EAAE,MAAM;EAAI,SAAS,EAAE;EAAE,QAAQ;EAAO;AAE/D,OAAM,SAAS,SAAS;EACtB,MAAM,QAAQ,KAAK,MAAM,IAAI,CAAC,QAAQ,SAAS,SAAS,GAAG;EAC3D,IAAI,UAAU;AAEd,OAAK,IAAI,IAAI,GAAG,IAAI,MAAM,QAAQ,KAAK;GACrC,MAAM,OAAO,MAAM;GACnB,MAAM,SAAS,MAAM,MAAM,SAAS;AAEpC,OAAI,CAAC,QAAQ,QACX,SAAQ,UAAU,EAAE;GAGtB,IAAI,OAAO,QAAQ,QAAQ,MAAM,QAAQ,IAAI,SAAS,KAAK;AAE3D,OAAI,CAAC,MAAM;AACT,WAAO;KAAE,MAAM;KAAM;KAAQ,SAAS,SAAS,SAAY,EAAE;KAAE;AAC/D,YAAQ,QAAQ,KAAK,KAAK;;AAG5B,aAAU;;GAEZ;AAEF,QAAO,KAAK,WAAW,EAAE"}

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

@@ -0,0 +1,5 @@
+import { Code } from "./Code.mjs";
+import { FileList } from "./FileList.mjs";
+import { IDE } from "./IDE.mjs";
+
+export { Code, FileList, IDE };

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

@@ -0,0 +1,81 @@
+import { cn } from "../../utils/cn.mjs";
+import { jsxs } from "react/jsx-runtime";
+
+//#region src/components/InformationTag/index.tsx
+/**
+* InformationTag Component
+*
+* A lightweight component that displays informational text with a distinctive info icon (ⓘ).
+* Perfect for showing contextual hints, supplementary information, or subtle guidance text.
+*
+* @component
+* @example
+* Basic usage:
+* ```tsx
+* <InformationTag>This field is required</InformationTag>
+* ```
+*
+* @example
+* With custom styling:
+* ```tsx
+* <InformationTag className="text-blue-600 font-medium">
+*   Pro tip: Use keyboard shortcuts for faster navigation
+* </InformationTag>
+* ```
+*
+* @example
+* Form field context:
+* ```tsx
+* <div>
+*   <input type="email" placeholder="your@email.com" />
+*   <InformationTag>We'll never share your email address</InformationTag>
+* </div>
+* ```
+*
+* @example
+* Status information:
+* ```tsx
+* <InformationTag className="text-green-500">
+*   Changes saved automatically
+* </InformationTag>
+* ```
+*
+* Features:
+* - Lightweight and semantic HTML structure using <i> tag
+* - Distinctive info icon (ⓘ) for visual recognition
+* - Default subtle styling with neutral colors
+* - Fully customizable with className overrides
+* - Supports all standard HTML element attributes
+* - Screen reader friendly with meaningful semantic content
+*
+* Accessibility:
+* - Uses semantic <i> tag which is announced by screen readers
+* - Info icon (ⓘ) provides visual context for sighted users
+* - Text content is fully accessible and readable
+* - Supports ARIA attributes through props spreading
+*
+* @param props - Component props extending HTML element attributes
+* @param props.children - The informational text content to display
+* @param props.className - Additional CSS classes for custom styling
+* @param props.title - Optional tooltip text (HTML title attribute)
+* @param props.role - ARIA role (defaults to implicit role from <i> tag)
+* @param props.aria-label - ARIA label for screen readers
+* @param props.id - Unique identifier for the element
+* @param props.onClick - Click event handler
+* @param props.onMouseEnter - Mouse enter event handler
+* @param props.onMouseLeave - Mouse leave event handler
+* @param props.style - Inline styles object
+* @param props.data-* - Data attributes for testing or tracking
+* @param props...rest - All other standard HTML element attributes
+*
+* @returns A rendered information tag with icon and text content
+*/
+const InformationTag = ({ className, children,...props }) => /* @__PURE__ */ jsxs("i", {
+	className: cn("text-neutral-400 text-xs", className),
+	...props,
+	children: ["ⓘ ", children]
+});
+
+//#endregion
+export { InformationTag };
+//# sourceMappingURL=index.mjs.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,89 @@
+import { cva } from "class-variance-authority";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/Input/Checkbox.tsx
+const checkboxVariants = cva("", {
+	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"
+		] },
+		size: {
+			sm: "size-4",
+			md: "size-5",
+			lg: "size-6"
+		},
+		color: {
+			primary: "accent-primary",
+			secondary: "accent-secondary",
+			destructive: "accent-destructive",
+			neutral: "accent-neutral",
+			light: "accent-light",
+			text: "accent-text",
+			dark: "accent-dark",
+			error: "accent-error",
+			success: "accent-success",
+			custom: "accent-custom"
+		},
+		validationStyleEnabled: {
+			disabled: "",
+			enabled: "valid:border-success invalid:border-error"
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		color: "primary",
+		validationStyleEnabled: "disabled",
+		size: "md"
+	}
+});
+let CheckboxSize = /* @__PURE__ */ function(CheckboxSize$1) {
+	CheckboxSize$1["SM"] = "sm";
+	CheckboxSize$1["MD"] = "md";
+	CheckboxSize$1["LG"] = "lg";
+	return CheckboxSize$1;
+}({});
+let CheckboxColor = /* @__PURE__ */ function(CheckboxColor$1) {
+	CheckboxColor$1["PRIMARY"] = "primary";
+	CheckboxColor$1["SECONDARY"] = "secondary";
+	CheckboxColor$1["DESTRUCTIVE"] = "destructive";
+	CheckboxColor$1["NEUTRAL"] = "neutral";
+	CheckboxColor$1["LIGHT"] = "light";
+	CheckboxColor$1["TEXT"] = "text";
+	CheckboxColor$1["DARK"] = "dark";
+	CheckboxColor$1["ERROR"] = "error";
+	CheckboxColor$1["SUCCESS"] = "success";
+	CheckboxColor$1["CUSTOM"] = "custom";
+	return CheckboxColor$1;
+}({});
+const Input = ({ validationStyleEnabled = false, label, size, color, name, variant, className,...props }) => /* @__PURE__ */ jsx("input", {
+	type: "checkbox",
+	className: checkboxVariants({
+		variant,
+		size,
+		color,
+		validationStyleEnabled: validationStyleEnabled ? "enabled" : "disabled",
+		className
+	}),
+	...props
+});
+const Checkbox = (props) => {
+	const { label, name, id } = props;
+	return label ? /* @__PURE__ */ jsxs("label", {
+		htmlFor: id ?? name,
+		className: "flex cursor-pointer items-center gap-x-4 font-medium text-sm",
+		children: [/* @__PURE__ */ jsx(Input, {
+			id: id ?? name,
+			...props
+		}), label]
+	}) : /* @__PURE__ */ jsx(Input, {
+		id: id ?? name,
+		...props
+	});
+};
+
+//#endregion
+export { Checkbox, CheckboxColor, CheckboxSize, checkboxVariants };
+//# sourceMappingURL=Checkbox.mjs.map

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

@@ -0,0 +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';\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  };\n\nconst Input: FC<CheckboxProps> = ({\n  validationStyleEnabled = false,\n  label,\n  size,\n  color,\n  name,\n  variant,\n  className,\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=\"flex cursor-pointer items-center gap-x-4 font-medium text-sm\"\n    >\n      <Input id={id ?? name} {...props} />\n      {label}\n    </label>\n  ) : (\n    <Input id={id ?? name} {...props} />\n  );\n};\n"],"mappings":";;;;AAQA,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;;;AAkBF,MAAMA,SAA4B,EAChC,yBAAyB,OACzB,OACA,MACA,OACA,MACA,SACA,UACA,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,WAAU;aAEV,oBAAC;GAAM,IAAI,MAAM;GAAM,GAAI;IAAS,EACnC;GACK,GAER,oBAAC;EAAM,IAAI,MAAM;EAAM,GAAI;GAAS"}

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

@@ -0,0 +1,53 @@
+import { cva } from "class-variance-authority";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/Input/Input.tsx
+const inputVariants = cva("", {
+	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"]
+		},
+		size: {
+			md: "px-2 py-3 md:py-1",
+			lg: "p-4 md:py-2"
+		},
+		validationStyleEnabled: {
+			disabled: "",
+			enabled: "valid:border-success invalid:border-error"
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "md",
+		validationStyleEnabled: "disabled"
+	}
+});
+let InputVariant = /* @__PURE__ */ function(InputVariant$1) {
+	InputVariant$1["DEFAULT"] = "default";
+	InputVariant$1["INVISIBLE"] = "invisible";
+	return InputVariant$1;
+}({});
+let InputSize = /* @__PURE__ */ function(InputSize$1) {
+	InputSize$1["MD"] = "md";
+	InputSize$1["LG"] = "lg";
+	return InputSize$1;
+}({});
+const Input = ({ validationStyleEnabled = false, variant, size, className,...props }) => /* @__PURE__ */ jsx("input", {
+	className: inputVariants({
+		variant,
+		size,
+		validationStyleEnabled: validationStyleEnabled ? "enabled" : "disabled",
+		className
+	}),
+	...props
+});
+
+//#endregion
+export { Input, InputSize, InputVariant, inputVariants };
+//# sourceMappingURL=Input.mjs.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,39 @@
+'use client';
+
+
+import { Input } from "./Input.mjs";
+import { EyeIcon, EyeOffIcon } from "lucide-react";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/Input/InputPassword.tsx
+const InputPassword = (props) => {
+	const [isPasswordRevealed, setIsPasswordRevealed] = useState(false);
+	const handlePasswordReveal = (e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		setIsPasswordRevealed((isPasswordRevealed$1) => !isPasswordRevealed$1);
+	};
+	const EyeIconComponent = isPasswordRevealed ? EyeIcon : EyeOffIcon;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "relative",
+		children: [/* @__PURE__ */ jsx(Input, {
+			...props,
+			"aria-label": "password",
+			type: isPasswordRevealed ? "text" : "password"
+		}), /* @__PURE__ */ jsx("button", {
+			"data-testid": "eye-icon",
+			className: "absolute right-2 h-full flex-row items-center",
+			onClick: handlePasswordReveal,
+			"aria-label": isPasswordRevealed ? "Hide password" : "Show password",
+			children: /* @__PURE__ */ jsx(EyeIconComponent, {
+				className: "mr-2 inline-block text-neutral",
+				size: 20
+			})
+		})]
+	});
+};
+
+//#endregion
+export { InputPassword };
+//# sourceMappingURL=InputPassword.mjs.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,18 @@
+import { cn } from "../../utils/cn.mjs";
+import { Input } from "./Input.mjs";
+import { Search } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/Input/SearchInput.tsx
+const SearchInput = ({ className,...props }) => /* @__PURE__ */ jsxs("div", {
+	className: "relative flex items-center gap-1",
+	children: [/* @__PURE__ */ jsx(Search, { className: "absolute left-2 size-4" }), /* @__PURE__ */ jsx(Input, {
+		...props,
+		type: "search",
+		className: cn("pl-8", className)
+	})]
+});
+
+//#endregion
+export { SearchInput };
+//# sourceMappingURL=SearchInput.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SearchInput.mjs","names":[],"sources":["../../../../src/components/Input/SearchInput.tsx"],"sourcesContent":["import { Search } from 'lucide-react';\nimport { cn } from '../../utils/cn';\nimport { Input, type InputProps } from './Input';\n\nexport const SearchInput = ({ className, ...props }: InputProps) => (\n  <div className=\"relative flex items-center gap-1\">\n    <Search className=\"absolute left-2 size-4\" />\n    <Input {...props} type=\"search\" className={cn('pl-8', className)} />\n  </div>\n);\n"],"mappings":";;;;;;AAIA,MAAa,eAAe,EAAE,UAAW,GAAG,YAC1C,qBAAC;CAAI,WAAU;YACb,oBAAC,UAAO,WAAU,2BAA2B,EAC7C,oBAAC;EAAM,GAAI;EAAO,MAAK;EAAS,WAAW,GAAG,QAAQ,UAAU;GAAI;EAChE"}

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

@@ -0,0 +1,6 @@
+import { Checkbox, CheckboxColor, CheckboxSize, checkboxVariants } from "./Checkbox.mjs";
+import { Input, InputSize, InputVariant, inputVariants } from "./Input.mjs";
+import { InputPassword } from "./InputPassword.mjs";
+import { SearchInput } from "./SearchInput.mjs";
+
+export { Checkbox, CheckboxColor, CheckboxSize, Input, InputPassword, InputSize, InputVariant, SearchInput, checkboxVariants, inputVariants };

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

@@ -0,0 +1,121 @@
+'use client';
+
+
+import { cn } from "../../utils/cn.mjs";
+import { useKeyboardDetector } from "../../hooks/useKeyboardDetector.mjs";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/KeyboardScreenAdapter/index.tsx
+/**
+* KeyboardScreenAdapter Component
+*
+* A smart wrapper component that automatically adapts the viewport height
+* when virtual keyboards appear on mobile devices. This prevents content
+* from being hidden behind the keyboard and ensures optimal user experience
+* across all devices and orientations.
+*
+* @component
+* @example
+* Basic usage:
+* ```tsx
+* <KeyboardScreenAdapter>
+*   <div>Your app content here</div>
+* </KeyboardScreenAdapter>
+* ```
+*
+* @example
+* With custom styling:
+* ```tsx
+* <KeyboardScreenAdapter className="bg-gray-100 p-4">
+*   <form>
+*     <input type="text" placeholder="Enter your name" />
+*     <input type="email" placeholder="Enter your email" />
+*     <button type="submit">Submit</button>
+*   </form>
+* </KeyboardScreenAdapter>
+* ```
+*
+* @example
+* Mobile-first responsive design:
+* ```tsx
+* <KeyboardScreenAdapter className="md:min-h-screen">
+*   <div className="flex flex-col h-full">
+*     <header>Navigation</header>
+*     <main className="flex-1 overflow-auto">
+*       <input type="search" placeholder="Search..." />
+*       Content that needs keyboard adaptation
+*     </main>
+*   </div>
+* </KeyboardScreenAdapter>
+* ```
+*
+* Features:
+* - Automatic viewport height detection and adjustment
+* - Smooth transitions when keyboard shows/hides
+* - Works with both iOS and Android virtual keyboards
+* - Responsive design that adapts to device orientation changes
+* - Maintains scroll behavior and overflow handling
+* - Lightweight with minimal performance impact
+* - Client-side only (Next.js compatible with 'use client')
+*
+* How it works:
+* 1. Uses the useKeyboardDetector hook to monitor window height changes
+* 2. Detects when virtual keyboard appears (window height decreases)
+* 3. Automatically adjusts the container's max-height to fit visible area
+* 4. Provides smooth transitions for better user experience
+* 5. Restores original height when keyboard disappears
+*
+* Use cases:
+* - Mobile web applications with forms
+* - Chat interfaces and messaging apps
+* - Search interfaces and input-heavy UIs
+* - Progressive Web Apps (PWAs)
+* - Any mobile-first application requiring keyboard interaction
+*
+* Browser compatibility:
+* - iOS Safari (all versions)
+* - Chrome Mobile (Android)
+* - Samsung Internet
+* - Firefox Mobile
+* - Other mobile browsers with virtual keyboards
+*
+* Performance considerations:
+* - Uses ResizeObserver for efficient window monitoring
+* - Minimal re-renders through optimized state management
+* - CSS transitions handled by GPU acceleration
+* - No layout thrashing during keyboard transitions
+*
+* Accessibility:
+* - Maintains focus management during transitions
+* - Preserves scroll position and user context
+* - Compatible with screen readers and assistive technologies
+* - Supports keyboard navigation patterns
+*
+* @param props - Component props extending standard div attributes
+* @param props.children - Content to render within the adaptive container
+* @param props.className - Additional CSS classes for the container
+* @param props.style - Inline styles (note: maxHeight may be overridden)
+* @param props.id - Unique identifier for the container
+* @param props.role - ARIA role for accessibility
+* @param props.tabIndex - Tab index for focus management
+* @param props.onScroll - Scroll event handler
+* @param props.onTouchStart - Touch start event handler
+* @param props.onTouchMove - Touch move event handler
+* @param props.onTouchEnd - Touch end event handler
+* @param props...rest - All other standard HTML div attributes
+*
+* @returns A responsive container that adapts to keyboard visibility
+*/
+const KeyboardScreenAdapter = ({ children, className,...props }) => {
+	const { windowHeight } = useKeyboardDetector();
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("h-screen w-screen overflow-auto scroll-smooth transition", className),
+		style: { maxHeight: windowHeight ? `${windowHeight}px` : void 0 },
+		...props,
+		children
+	});
+};
+
+//#endregion
+export { KeyboardScreenAdapter };
+//# sourceMappingURL=index.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":["KeyboardScreenAdapter: FC<\n  PropsWithChildren<HTMLAttributes<HTMLDivElement>>\n>"],"sources":["../../../../src/components/KeyboardScreenAdapter/index.tsx"],"sourcesContent":["'use client';\n\nimport type { FC, HTMLAttributes, PropsWithChildren } from 'react';\nimport { useKeyboardDetector } from '../../hooks/useKeyboardDetector';\nimport { cn } from '../../utils/cn';\n\n/**\n * KeyboardScreenAdapter Component\n *\n * A smart wrapper component that automatically adapts the viewport height\n * when virtual keyboards appear on mobile devices. This prevents content\n * from being hidden behind the keyboard and ensures optimal user experience\n * across all devices and orientations.\n *\n * @component\n * @example\n * Basic usage:\n * ```tsx\n * <KeyboardScreenAdapter>\n *   <div>Your app content here</div>\n * </KeyboardScreenAdapter>\n * ```\n *\n * @example\n * With custom styling:\n * ```tsx\n * <KeyboardScreenAdapter className=\"bg-gray-100 p-4\">\n *   <form>\n *     <input type=\"text\" placeholder=\"Enter your name\" />\n *     <input type=\"email\" placeholder=\"Enter your email\" />\n *     <button type=\"submit\">Submit</button>\n *   </form>\n * </KeyboardScreenAdapter>\n * ```\n *\n * @example\n * Mobile-first responsive design:\n * ```tsx\n * <KeyboardScreenAdapter className=\"md:min-h-screen\">\n *   <div className=\"flex flex-col h-full\">\n *     <header>Navigation</header>\n *     <main className=\"flex-1 overflow-auto\">\n *       <input type=\"search\" placeholder=\"Search...\" />\n *       Content that needs keyboard adaptation\n *     </main>\n *   </div>\n * </KeyboardScreenAdapter>\n * ```\n *\n * Features:\n * - Automatic viewport height detection and adjustment\n * - Smooth transitions when keyboard shows/hides\n * - Works with both iOS and Android virtual keyboards\n * - Responsive design that adapts to device orientation changes\n * - Maintains scroll behavior and overflow handling\n * - Lightweight with minimal performance impact\n * - Client-side only (Next.js compatible with 'use client')\n *\n * How it works:\n * 1. Uses the useKeyboardDetector hook to monitor window height changes\n * 2. Detects when virtual keyboard appears (window height decreases)\n * 3. Automatically adjusts the container's max-height to fit visible area\n * 4. Provides smooth transitions for better user experience\n * 5. Restores original height when keyboard disappears\n *\n * Use cases:\n * - Mobile web applications with forms\n * - Chat interfaces and messaging apps\n * - Search interfaces and input-heavy UIs\n * - Progressive Web Apps (PWAs)\n * - Any mobile-first application requiring keyboard interaction\n *\n * Browser compatibility:\n * - iOS Safari (all versions)\n * - Chrome Mobile (Android)\n * - Samsung Internet\n * - Firefox Mobile\n * - Other mobile browsers with virtual keyboards\n *\n * Performance considerations:\n * - Uses ResizeObserver for efficient window monitoring\n * - Minimal re-renders through optimized state management\n * - CSS transitions handled by GPU acceleration\n * - No layout thrashing during keyboard transitions\n *\n * Accessibility:\n * - Maintains focus management during transitions\n * - Preserves scroll position and user context\n * - Compatible with screen readers and assistive technologies\n * - Supports keyboard navigation patterns\n *\n * @param props - Component props extending standard div attributes\n * @param props.children - Content to render within the adaptive container\n * @param props.className - Additional CSS classes for the container\n * @param props.style - Inline styles (note: maxHeight may be overridden)\n * @param props.id - Unique identifier for the container\n * @param props.role - ARIA role for accessibility\n * @param props.tabIndex - Tab index for focus management\n * @param props.onScroll - Scroll event handler\n * @param props.onTouchStart - Touch start event handler\n * @param props.onTouchMove - Touch move event handler\n * @param props.onTouchEnd - Touch end event handler\n * @param props...rest - All other standard HTML div attributes\n *\n * @returns A responsive container that adapts to keyboard visibility\n */\nexport const KeyboardScreenAdapter: FC<\n  PropsWithChildren<HTMLAttributes<HTMLDivElement>>\n> = ({ children, className, ...props }) => {\n  const { windowHeight } = useKeyboardDetector();\n\n  return (\n    <div\n      className={cn(\n        'h-screen w-screen overflow-auto scroll-smooth transition',\n        className\n      )}\n      style={{\n        maxHeight: windowHeight ? `${windowHeight}px` : undefined,\n      }}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0GA,MAAaA,yBAER,EAAE,UAAU,UAAW,GAAG,YAAY;CACzC,MAAM,EAAE,iBAAiB,qBAAqB;AAE9C,QACE,oBAAC;EACC,WAAW,GACT,4DACA,UACD;EACD,OAAO,EACL,WAAW,eAAe,GAAG,aAAa,MAAM,QACjD;EACD,GAAI;EAEH;GACG"}

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

@@ -0,0 +1,54 @@
+import { cn } from "../../utils/cn.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/Label/index.tsx
+/**
+* Label Component
+*
+* A form label component that provides accessible labeling for form controls.
+* Establishes proper relationships between labels and their associated form elements
+* with visual indicators for required and disabled states.
+*
+* @example
+* ```tsx
+* // Basic usage
+* <Label htmlFor="email">Email Address</Label>
+* <input id="email" type="email" />
+*
+* // Required field
+* <Label htmlFor="password" required>Password</Label>
+* <input id="password" type="password" required />
+*
+* // Disabled field
+* <Label htmlFor="disabled-field" disabled>Disabled Field</Label>
+* <input id="disabled-field" type="text" disabled />
+*
+* // With custom styling
+* <Label htmlFor="custom" className="text-blue-600 font-semibold">
+*   Custom Styled Label
+* </Label>
+* ```
+*
+* @component
+* @accessibility
+* - Uses semantic HTML <label> element
+* - Properly associates with form controls via htmlFor/id relationship
+* - Supports click-to-focus behavior automatically
+* - Visual indicators for required and disabled states
+* - Screen reader compatible with proper ARIA relationships
+*/
+const Label = ({ htmlFor, required = false, disabled = false, className, children,...props }) => /* @__PURE__ */ jsxs("label", {
+	className: cn("select-none font-medium text-sm leading-none", "peer-disabled:cursor-not-allowed peer-disabled:opacity-70", disabled && "cursor-not-allowed text-muted-foreground opacity-70", className),
+	htmlFor,
+	...props,
+	children: [children, required && /* @__PURE__ */ jsx("span", {
+		className: "ml-1 text-destructive",
+		"aria-label": "required",
+		title: "This field is required",
+		children: "*"
+	})]
+});
+
+//#endregion
+export { Label };
+//# sourceMappingURL=index.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":["Label: FC<LabelProps>"],"sources":["../../../../src/components/Label/index.tsx"],"sourcesContent":["import type { FC, LabelHTMLAttributes } from 'react';\nimport { cn } from '../../utils/cn';\n\n/**\n * Props for the Label component\n */\nexport interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {\n  /**\n   * The ID of the form control this label is associated with.\n   * This creates the accessible relationship between the label and its control.\n   * @example \"email-input\"\n   * @example \"password-field\"\n   */\n  htmlFor?: string;\n\n  /**\n   * Whether the associated form control is required.\n   * Adds visual indicator and updates ARIA attributes.\n   * @default false\n   */\n  required?: boolean;\n\n  /**\n   * Whether the associated form control is disabled.\n   * Updates styling to indicate disabled state.\n   * @default false\n   */\n  disabled?: boolean;\n\n  /**\n   * Additional CSS classes for custom styling\n   * @example \"text-red-600 font-bold\"\n   */\n  className?: string;\n}\n\n/**\n * Label Component\n *\n * A form label component that provides accessible labeling for form controls.\n * Establishes proper relationships between labels and their associated form elements\n * with visual indicators for required and disabled states.\n *\n * @example\n * ```tsx\n * // Basic usage\n * <Label htmlFor=\"email\">Email Address</Label>\n * <input id=\"email\" type=\"email\" />\n *\n * // Required field\n * <Label htmlFor=\"password\" required>Password</Label>\n * <input id=\"password\" type=\"password\" required />\n *\n * // Disabled field\n * <Label htmlFor=\"disabled-field\" disabled>Disabled Field</Label>\n * <input id=\"disabled-field\" type=\"text\" disabled />\n *\n * // With custom styling\n * <Label htmlFor=\"custom\" className=\"text-blue-600 font-semibold\">\n *   Custom Styled Label\n * </Label>\n * ```\n *\n * @component\n * @accessibility\n * - Uses semantic HTML <label> element\n * - Properly associates with form controls via htmlFor/id relationship\n * - Supports click-to-focus behavior automatically\n * - Visual indicators for required and disabled states\n * - Screen reader compatible with proper ARIA relationships\n */\nexport const Label: FC<LabelProps> = ({\n  htmlFor,\n  required = false,\n  disabled = false,\n  className,\n  children,\n  ...props\n}) => (\n  <label\n    className={cn(\n      'select-none font-medium text-sm leading-none',\n      'peer-disabled:cursor-not-allowed peer-disabled:opacity-70',\n      disabled && 'cursor-not-allowed text-muted-foreground opacity-70',\n      className\n    )}\n    htmlFor={htmlFor}\n    {...props}\n  >\n    {children}\n    {required && (\n      <span\n        className=\"ml-1 text-destructive\"\n        aria-label=\"required\"\n        title=\"This field is required\"\n      >\n        *\n      </span>\n    )}\n  </label>\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuEA,MAAaA,SAAyB,EACpC,SACA,WAAW,OACX,WAAW,OACX,WACA,SACA,GAAG,YAEH,qBAAC;CACC,WAAW,GACT,gDACA,6DACA,YAAY,uDACZ,UACD;CACQ;CACT,GAAI;YAEH,UACA,YACC,oBAAC;EACC,WAAU;EACV,cAAW;EACX,OAAM;YACP;GAEM;EAEH"}