flowbite-react/dist/esm/components/FloatingLabel/FloatingLabel.mjs.map

Official React components built for Flowbite and Tailwind CSS

{"version":3,"file":"FloatingLabel.mjs","sources":["../../../../src/components/FloatingLabel/FloatingLabel.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef } from \"react\";\nimport { forwardRef, useId } from \"react\";\nimport { twMerge } from \"tailwind-merge\";\nimport { mergeDeep } from \"../../helpers/merge-deep\";\nimport { getTheme } from \"../../theme-store\";\nimport type { DeepPartial } from \"../../types\";\nimport type { FlowbiteFloatingLabelTheme } from \"./theme\";\n\nexport type FloatingLabelColor = \"default\" | \"success\" | \"error\";\nexport type FloatingLabelSizing = \"sm\" | \"md\";\nexport type FloatingLabelVariant = \"filled\" | \"outlined\" | \"standard\";\n\nexport interface FloatingLabelProps extends ComponentPropsWithoutRef<\"input\"> {\n  label: string;\n  helperText?: string;\n  color?: FloatingLabelColor;\n  sizing?: FloatingLabelSizing;\n  variant: FloatingLabelVariant;\n  disabled?: boolean;\n  theme?: DeepPartial<FlowbiteFloatingLabelTheme>;\n}\n\nexport const FloatingLabel = forwardRef<HTMLInputElement, FloatingLabelProps>(\n  (\n    {\n      label,\n      helperText,\n      color = \"default\",\n      sizing = \"md\",\n      variant,\n      disabled = false,\n      theme: customTheme = {},\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const randomId = useId();\n    const theme = mergeDeep(getTheme().floatingLabel, customTheme);\n\n    return (\n      <div>\n        <div className={twMerge(\"relative\", variant === \"standard\" ? \"z-0\" : \"\")}>\n          <input\n            type=\"text\"\n            id={props.id ? props.id : \"floatingLabel\" + randomId}\n            aria-describedby=\"outlined_success_help\"\n            className={twMerge(theme.input[color][variant][sizing], className)}\n            placeholder=\" \"\n            data-testid=\"floating-label\"\n            disabled={disabled}\n            {...props}\n            ref={ref}\n          />\n          <label\n            htmlFor={props.id ? props.id : \"floatingLabel\" + randomId}\n            className={twMerge(theme.label[color][variant][sizing], className)}\n          >\n            {label}\n          </label>\n        </div>\n        <p id={\"outlined_helper_text\" + randomId} className={twMerge(theme.helperText[color], className)}>\n          {helperText}\n        </p>\n      </div>\n    );\n  },\n);\n\nFloatingLabel.displayName = \"FloatingLabel\";\n"],"names":[],"mappings":";;;;;;AAMY,MAAC,aAAa,GAAG,UAAU;AACvC,EAAE,CAAC;AACH,IAAI,KAAK;AACT,IAAI,UAAU;AACd,IAAI,KAAK,GAAG,SAAS;AACrB,IAAI,MAAM,GAAG,IAAI;AACjB,IAAI,OAAO;AACX,IAAI,QAAQ,GAAG,KAAK;AACpB,IAAI,KAAK,EAAE,WAAW,GAAG,EAAE;AAC3B,IAAI,SAAS;AACb,IAAI,GAAG,KAAK;AACZ,GAAG,EAAE,GAAG,KAAK;AACb,IAAI,MAAM,QAAQ,GAAG,KAAK,EAAE,CAAC;AAC7B,IAAI,MAAM,KAAK,GAAG,SAAS,CAAC,QAAQ,EAAE,CAAC,aAAa,EAAE,WAAW,CAAC,CAAC;AACnE,IAAI,uBAAuB,IAAI,CAAC,KAAK,EAAE,EAAE,QAAQ,EAAE;AACnD,sBAAsB,IAAI,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,OAAO,CAAC,UAAU,EAAE,OAAO,KAAK,UAAU,GAAG,KAAK,GAAG,EAAE,CAAC,EAAE,QAAQ,EAAE;AACnH,wBAAwB,GAAG;AAC3B,UAAU,OAAO;AACjB,UAAU;AACV,YAAY,IAAI,EAAE,MAAM;AACxB,YAAY,EAAE,EAAE,KAAK,CAAC,EAAE,GAAG,KAAK,CAAC,EAAE,GAAG,eAAe,GAAG,QAAQ;AAChE,YAAY,kBAAkB,EAAE,uBAAuB;AACvD,YAAY,SAAS,EAAE,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC,EAAE,SAAS,CAAC;AAC9E,YAAY,WAAW,EAAE,GAAG;AAC5B,YAAY,aAAa,EAAE,gBAAgB;AAC3C,YAAY,QAAQ;AACpB,YAAY,GAAG,KAAK;AACpB,YAAY,GAAG;AACf,WAAW;AACX,SAAS;AACT,wBAAwB,GAAG;AAC3B,UAAU,OAAO;AACjB,UAAU;AACV,YAAY,OAAO,EAAE,KAAK,CAAC,EAAE,GAAG,KAAK,CAAC,EAAE,GAAG,eAAe,GAAG,QAAQ;AACrE,YAAY,SAAS,EAAE,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC,EAAE,SAAS,CAAC;AAC9E,YAAY,QAAQ,EAAE,KAAK;AAC3B,WAAW;AACX,SAAS;AACT,OAAO,EAAE,CAAC;AACV,sBAAsB,GAAG,CAAC,GAAG,EAAE,EAAE,EAAE,EAAE,sBAAsB,GAAG,QAAQ,EAAE,SAAS,EAAE,OAAO,CAAC,KAAK,CAAC,UAAU,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,CAAC;AACvJ,KAAK,EAAE,CAAC,CAAC;AACT,GAAG;AACH,EAAE;AACF,aAAa,CAAC,WAAW,GAAG,eAAe;;;;"}