@next-degree/pickle-shared-js 0.3.27 → 0.4.31

package/dist/components/demos/InputDemo.cjs

@@ -1,7 +1,9 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -15,6 +17,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/components/demos/InputDemo.tsx
@@ -26,7 +36,7 @@ module.exports = __toCommonJS(InputDemo_exports);
 
 // src/components/ui/Input.tsx
 var import_cva = require("cva");
-var import_lucide_react = require("lucide-react");
+var import_lucide_react2 = require("lucide-react");
 var import_react = require("react");
 
 // src/lib/utils.ts
@@ -44,57 +54,86 @@ function ErrorMessage({ message, className, ...props }) {
 }
 var ErrorMessage_default = ErrorMessage;
 
-// src/components/ui/Label.tsx
+// src/components/primitives/tooltip.tsx
+var TooltipPrimitive = __toESM(require("@radix-ui/react-tooltip"), 1);
+var React = __toESM(require("react"), 1);
 var import_jsx_runtime2 = require("react/jsx-runtime");
-function Label({ text, required, className, ...props }) {
+var TooltipProvider = TooltipPrimitive.Provider;
+var Tooltip = TooltipPrimitive.Root;
+var TooltipTrigger = TooltipPrimitive.Trigger;
+var TooltipContent = React.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  TooltipPrimitive.Content,
+  {
+    ref,
+    sideOffset,
+    className: cn(
+      "z-50 overflow-hidden rounded-md border border-neutral-200 bg-white px-3 py-1.5 text-sm text-neutral-950 shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50",
+      className
+    ),
+    ...props
+  }
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+// src/components/ui/Label.tsx
+var import_lucide_react = require("lucide-react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function Label({ text, required, description, className, ...props }) {
   if (!text) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-    "label",
-    {
-      className: cn(
-        "text-xs text-grey-80 peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
-        className
-      ),
-      ...props,
-      children: [
-        text,
-        required && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-red-600", children: "\xA0*" })
-      ]
-    }
-  );
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex w-full flex-row gap-1", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      "label",
+      {
+        className: cn(
+          "text-xs text-grey-80 peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+          className
+        ),
+        ...props,
+        children: [
+          text,
+          required && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-red-600", children: "\xA0*" })
+        ]
+      }
+    ),
+    !!description && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Tooltip, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react.InfoIcon, { className: "h-4 w-4" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(TooltipContent, { className: "max-w-48", children: description })
+    ] }) })
+  ] });
 }
 var Label_default = Label;
 
 // src/components/ui/Input.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var Input = (0, import_react.forwardRef)(
-  ({ label, error, theme, icon, onClear, value, onChange, classNames, ...props }, ref) => {
+  ({ label, error, description, theme, icon, onClear, value, onChange, classNames, ...props }, ref) => {
     const handleClear = () => {
       onChange?.({ target: { value: "" } });
       onClear?.();
     };
-    const IconComponent = icon && import_lucide_react.icons[icon];
+    const IconComponent = icon && import_lucide_react2.icons[icon];
     const placeholder = props.placeholder ?? (icon === "Search" ? "Search..." : "");
     const hasIcon = !!icon;
     const iconColor = theme === "dark" ? "text-white" : "text-grey-80";
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "group flex w-full flex-col gap-1", "data-testid": `input-wrapper-${props.id}`, children: [
-      label && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "group flex w-full flex-col gap-1", "data-testid": `input-wrapper-${props.id}`, children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
         Label_default,
         {
           text: label,
           htmlFor: props.name,
           required: props.required,
+          description,
           className: classNames?.label
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "relative flex flex-row items-center", children: [
-        IconComponent && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "relative flex flex-row items-center", children: [
+        IconComponent && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           IconComponent,
           {
             className: `absolute left-3 h-4 w-4 ${iconColor} opacity-50 group-hover:opacity-100`
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           "input",
           {
             className: cn(inputVariants({ theme, hasIcon })),
@@ -106,8 +145,8 @@ var Input = (0, import_react.forwardRef)(
             ...props
           }
         ),
-        hasIcon && value && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-          import_lucide_react.X,
+        hasIcon && value && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          import_lucide_react2.X,
           {
             className: `absolute right-3 h-4 w-4 cursor-pointer ${iconColor}`,
             onClick: handleClear,
@@ -115,7 +154,7 @@ var Input = (0, import_react.forwardRef)(
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ErrorMessage_default, { message: error })
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ErrorMessage_default, { message: error })
     ] });
   }
 );
@@ -171,14 +210,14 @@ var inputVariants = (0, import_cva.cva)(
 var Input_default = Input;
 
 // src/components/demos/InputDemo.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 function InputDemo() {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "m-4", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("h3", { children: "Input" }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex flex-col gap-2 md:flex-row", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "bg-green-80 p-2", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Input_default, { theme: "dark", icon: "Search" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "p-2", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Input_default, { label: "Required input", required: true }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "p-2", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Input_default, { icon: "MapPin" }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "m-4", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h3", { children: "Input" }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-col gap-2 md:flex-row", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "bg-green-80 p-2", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Input_default, { theme: "dark", icon: "Search" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "p-2", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Input_default, { label: "Required input", required: true, description: "This is a tooltip" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "p-2", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Input_default, { icon: "MapPin" }) })
     ] })
   ] });
 }

package/dist/components/demos/InputDemo.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/demos/InputDemo.tsx","../../../src/components/ui/Input.tsx","../../../src/lib/utils.ts","../../../src/components/ui/ErrorMessage.tsx","../../../src/components/ui/Label.tsx"],"sourcesContent":["import Input from '@/components/ui/Input'\n\nfunction InputDemo() {\n  return (\n    <div className=\"m-4\">\n      <h3>Input</h3>\n      <div className=\"flex flex-col gap-2 md:flex-row\">\n        <div className=\"bg-green-80 p-2\">\n          <Input theme=\"dark\" icon=\"Search\" />\n        </div>\n        <div className=\"p-2\">\n          <Input label=\"Required input\" required />\n        </div>\n        <div className=\"p-2\">\n          <Input icon=\"MapPin\" />\n        </div>\n      </div>\n    </div>\n  )\n}\n\nexport default InputDemo\n","import { cva, type VariantProps } from 'cva'\nimport { icons, X } from 'lucide-react'\nimport { type ChangeEvent, forwardRef, type InputHTMLAttributes } from 'react'\n\nimport ErrorMessage from '@/components/ui/ErrorMessage'\nimport Label from '@/components/ui/Label'\nimport { cn } from '@/lib/utils'\n\ninterface Props extends InputHTMLAttributes<HTMLInputElement>, VariantProps<typeof inputVariants> {\n  label?: string\n  error?: string\n  icon?: keyof typeof icons\n  onClear?: () => void\n  classNames?: { label?: string }\n}\n\nconst Input = forwardRef<HTMLInputElement, Props>(\n  ({ label, error, theme, icon, onClear, value, onChange, classNames, ...props }, ref) => {\n    const handleClear = () => {\n      onChange?.({ target: { value: '' } } as ChangeEvent<HTMLInputElement>)\n      onClear?.()\n    }\n\n    const IconComponent = icon && icons[icon]\n\n    const placeholder = props.placeholder ?? (icon === 'Search' ? 'Search...' : '')\n    const hasIcon = !!icon\n\n    const iconColor = theme === 'dark' ? 'text-white' : 'text-grey-80'\n\n    return (\n      <div className=\"group flex w-full flex-col gap-1\" data-testid={`input-wrapper-${props.id}`}>\n        {label && (\n          <Label\n            text={label}\n            htmlFor={props.name}\n            required={props.required}\n            className={classNames?.label}\n          />\n        )}\n        <div className=\"relative flex flex-row items-center\">\n          {IconComponent && (\n            <IconComponent\n              className={`absolute left-3 h-4 w-4 ${iconColor} opacity-50 group-hover:opacity-100`}\n            />\n          )}\n          <input\n            className={cn(inputVariants({ theme, hasIcon }))}\n            ref={ref}\n            placeholder={placeholder}\n            value={value}\n            onChange={onChange}\n            data-testid={`input-element-${props.id}`}\n            {...props}\n          />\n          {hasIcon && value && (\n            <X\n              className={`absolute right-3 h-4 w-4 cursor-pointer ${iconColor}`}\n              onClick={handleClear}\n              data-testid=\"clear-button\"\n            />\n          )}\n        </div>\n\n        <ErrorMessage message={error} />\n      </div>\n    )\n  }\n)\nInput.displayName = 'Input'\n\nconst inputVariants = cva(\n  [\n    'border-input',\n    'placeholder:text-muted-foreground',\n    'focus-visible:ring-ring',\n    'inline-flex',\n    'w-full',\n    'h-11',\n    'items-center',\n    'justify-start',\n    'gap-3',\n    'rounded-lg',\n    'bg-transparent',\n    'px-3',\n    'pt-0.5',\n    'text-sm',\n    'shadow-sm',\n    'ring-grey-50',\n    'transition-colors',\n    'focus-visible:outline-none',\n    'focus-visible:ring-1',\n    'disabled:cursor-not-allowed',\n    'disabled:opacity-50',\n    'appearance-none',\n    '[&::-webkit-search-cancel-button]:appearance-none',\n    '[&::-webkit-search-decoration]:appearance-none',\n    '[&::-webkit-search-results-button]:appearance-none',\n    '[&::-webkit-search-results-decoration]:appearance-none',\n    '[&::-ms-clear]:display-none',\n    '[&::-ms-reveal]:display-none',\n  ],\n  {\n    variants: {\n      theme: {\n        light: 'text-grey-80 border',\n        dark: 'text-white',\n      },\n      hasIcon: {\n        false: 'pl-3',\n        true: 'pl-8',\n      },\n    },\n    defaultVariants: {\n      theme: 'light',\n      hasIcon: false,\n    },\n  }\n)\n\nexport default Input\n","import { type ClassValue, clsx } from 'clsx'\nimport { twMerge } from 'tailwind-merge'\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n","import { type ComponentPropsWithoutRef } from 'react'\n\nimport { cn } from '@/lib/utils'\n\ninterface Props extends ComponentPropsWithoutRef<'p'> {\n  message?: string\n}\n\nfunction ErrorMessage({ message, className, ...props }: Readonly<Props>) {\n  if (!message) return null\n\n  return (\n    <p className={cn('px-1 text-xs text-red-600', className)} {...props}>\n      {message}\n    </p>\n  )\n}\n\nexport default ErrorMessage\n","import { type ComponentPropsWithoutRef } from 'react'\n\nimport { cn } from '@/lib/utils'\n\ninterface Props extends ComponentPropsWithoutRef<'label'> {\n  text?: string\n  required?: boolean\n}\n\nfunction Label({ text, required, className, ...props }: Readonly<Props>) {\n  if (!text) return null\n\n  return (\n    <label\n      className={cn(\n        'text-xs text-grey-80 peer-disabled:cursor-not-allowed peer-disabled:opacity-70',\n        className\n      )}\n      {...props}\n    >\n      {text}\n      {required && <span className=\"text-red-600\">&nbsp;*</span>}\n    </label>\n  )\n}\n\nexport default Label\n"],"mappings":"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","names":["import_jsx_runtime","import_jsx_runtime","import_jsx_runtime"]}
+{"version":3,"sources":["../../../src/components/demos/InputDemo.tsx","../../../src/components/ui/Input.tsx","../../../src/lib/utils.ts","../../../src/components/ui/ErrorMessage.tsx","../../../src/components/primitives/tooltip.tsx","../../../src/components/ui/Label.tsx"],"sourcesContent":["import Input from '@/components/ui/Input'\n\nfunction InputDemo() {\n  return (\n    <div className=\"m-4\">\n      <h3>Input</h3>\n      <div className=\"flex flex-col gap-2 md:flex-row\">\n        <div className=\"bg-green-80 p-2\">\n          <Input theme=\"dark\" icon=\"Search\" />\n        </div>\n        <div className=\"p-2\">\n          <Input label=\"Required input\" required description=\"This is a tooltip\" />\n        </div>\n        <div className=\"p-2\">\n          <Input icon=\"MapPin\" />\n        </div>\n      </div>\n    </div>\n  )\n}\n\nexport default InputDemo\n","import { cva, type VariantProps } from 'cva'\nimport { icons, X } from 'lucide-react'\nimport { type ChangeEvent, forwardRef, type InputHTMLAttributes } from 'react'\n\nimport ErrorMessage from '@/components/ui/ErrorMessage'\nimport Label from '@/components/ui/Label'\nimport { cn } from '@/lib/utils'\n\ninterface Props extends InputHTMLAttributes<HTMLInputElement>, VariantProps<typeof inputVariants> {\n  label?: string\n  error?: string\n  icon?: keyof typeof icons\n  description?: string\n  classNames?: { label?: string }\n  onClear?: () => void\n}\n\nconst Input = forwardRef<HTMLInputElement, Props>(\n  (\n    { label, error, description, theme, icon, onClear, value, onChange, classNames, ...props },\n    ref\n  ) => {\n    const handleClear = () => {\n      onChange?.({ target: { value: '' } } as ChangeEvent<HTMLInputElement>)\n      onClear?.()\n    }\n\n    const IconComponent = icon && icons[icon]\n\n    const placeholder = props.placeholder ?? (icon === 'Search' ? 'Search...' : '')\n    const hasIcon = !!icon\n\n    const iconColor = theme === 'dark' ? 'text-white' : 'text-grey-80'\n\n    return (\n      <div className=\"group flex w-full flex-col gap-1\" data-testid={`input-wrapper-${props.id}`}>\n        {label && (\n          <Label\n            text={label}\n            htmlFor={props.name}\n            required={props.required}\n            description={description}\n            className={classNames?.label}\n          />\n        )}\n        <div className=\"relative flex flex-row items-center\">\n          {IconComponent && (\n            <IconComponent\n              className={`absolute left-3 h-4 w-4 ${iconColor} opacity-50 group-hover:opacity-100`}\n            />\n          )}\n          <input\n            className={cn(inputVariants({ theme, hasIcon }))}\n            ref={ref}\n            placeholder={placeholder}\n            value={value}\n            onChange={onChange}\n            data-testid={`input-element-${props.id}`}\n            {...props}\n          />\n          {hasIcon && value && (\n            <X\n              className={`absolute right-3 h-4 w-4 cursor-pointer ${iconColor}`}\n              onClick={handleClear}\n              data-testid=\"clear-button\"\n            />\n          )}\n        </div>\n\n        <ErrorMessage message={error} />\n      </div>\n    )\n  }\n)\nInput.displayName = 'Input'\n\nconst inputVariants = cva(\n  [\n    'border-input',\n    'placeholder:text-muted-foreground',\n    'focus-visible:ring-ring',\n    'inline-flex',\n    'w-full',\n    'h-11',\n    'items-center',\n    'justify-start',\n    'gap-3',\n    'rounded-lg',\n    'bg-transparent',\n    'px-3',\n    'pt-0.5',\n    'text-sm',\n    'shadow-sm',\n    'ring-grey-50',\n    'transition-colors',\n    'focus-visible:outline-none',\n    'focus-visible:ring-1',\n    'disabled:cursor-not-allowed',\n    'disabled:opacity-50',\n    'appearance-none',\n    '[&::-webkit-search-cancel-button]:appearance-none',\n    '[&::-webkit-search-decoration]:appearance-none',\n    '[&::-webkit-search-results-button]:appearance-none',\n    '[&::-webkit-search-results-decoration]:appearance-none',\n    '[&::-ms-clear]:display-none',\n    '[&::-ms-reveal]:display-none',\n  ],\n  {\n    variants: {\n      theme: {\n        light: 'text-grey-80 border',\n        dark: 'text-white',\n      },\n      hasIcon: {\n        false: 'pl-3',\n        true: 'pl-8',\n      },\n    },\n    defaultVariants: {\n      theme: 'light',\n      hasIcon: false,\n    },\n  }\n)\n\nexport default Input\n","import { type ClassValue, clsx } from 'clsx'\nimport { twMerge } from 'tailwind-merge'\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n","import { type ComponentPropsWithoutRef } from 'react'\n\nimport { cn } from '@/lib/utils'\n\ninterface Props extends ComponentPropsWithoutRef<'p'> {\n  message?: string\n}\n\nfunction ErrorMessage({ message, className, ...props }: Readonly<Props>) {\n  if (!message) return null\n\n  return (\n    <p className={cn('px-1 text-xs text-red-600', className)} {...props}>\n      {message}\n    </p>\n  )\n}\n\nexport default ErrorMessage\n","'use client'\n\nimport * as TooltipPrimitive from '@radix-ui/react-tooltip'\nimport * as React from 'react'\n\nimport { cn } from '@/lib/utils'\n\nconst TooltipProvider = TooltipPrimitive.Provider\n\nconst Tooltip = TooltipPrimitive.Root\n\nconst TooltipTrigger = TooltipPrimitive.Trigger\n\nconst TooltipContent = React.forwardRef<\n  React.ElementRef<typeof TooltipPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>\n>(({ className, sideOffset = 4, ...props }, ref) => (\n  <TooltipPrimitive.Content\n    ref={ref}\n    sideOffset={sideOffset}\n    className={cn(\n      'z-50 overflow-hidden rounded-md border border-neutral-200 bg-white px-3 py-1.5 text-sm text-neutral-950 shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50',\n      className\n    )}\n    {...props}\n  />\n))\nTooltipContent.displayName = TooltipPrimitive.Content.displayName\n\nexport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger }\n","import { type ComponentPropsWithoutRef } from 'react'\n\nimport { cn } from '@/lib/utils'\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from '@/components/primitives/tooltip'\nimport { InfoIcon } from 'lucide-react'\n\ninterface Props extends ComponentPropsWithoutRef<'label'> {\n  text?: string\n  required?: boolean\n  description?: string\n}\n\nfunction Label({ text, required, description, className, ...props }: Readonly<Props>) {\n  if (!text) return null\n\n  return (\n    <div className=\"flex w-full flex-row gap-1\">\n      <label\n        className={cn(\n          'text-xs text-grey-80 peer-disabled:cursor-not-allowed peer-disabled:opacity-70',\n          className\n        )}\n        {...props}\n      >\n        {text}\n        {required && <span className=\"text-red-600\">&nbsp;*</span>}\n      </label>\n\n      {!!description && (\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <InfoIcon className=\"h-4 w-4\" />\n            </TooltipTrigger>\n            <TooltipContent className=\"max-w-48\">{description}</TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n      )}\n    </div>\n  )\n}\n\nexport default Label\n"],"mappings":"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","names":["import_lucide_react","import_jsx_runtime","import_jsx_runtime","import_jsx_runtime","import_jsx_runtime"]}

package/dist/components/demos/InputDemo.js

@@ -1,7 +1,7 @@
 // src/components/ui/Input.tsx
 import { cva } from "cva";
 import { icons, X } from "lucide-react";
-import { forwardRef } from "react";
+import { forwardRef as forwardRef2 } from "react";
 
 // src/lib/utils.ts
 import { clsx } from "clsx";
@@ -18,31 +18,59 @@ function ErrorMessage({ message, className, ...props }) {
 }
 var ErrorMessage_default = ErrorMessage;
 
+// src/components/primitives/tooltip.tsx
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import * as React from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var TooltipProvider = TooltipPrimitive.Provider;
+var Tooltip = TooltipPrimitive.Root;
+var TooltipTrigger = TooltipPrimitive.Trigger;
+var TooltipContent = React.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx2(
+  TooltipPrimitive.Content,
+  {
+    ref,
+    sideOffset,
+    className: cn(
+      "z-50 overflow-hidden rounded-md border border-neutral-200 bg-white px-3 py-1.5 text-sm text-neutral-950 shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50",
+      className
+    ),
+    ...props
+  }
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
 // src/components/ui/Label.tsx
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
-function Label({ text, required, className, ...props }) {
+import { InfoIcon } from "lucide-react";
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+function Label({ text, required, description, className, ...props }) {
   if (!text) return null;
-  return /* @__PURE__ */ jsxs(
-    "label",
-    {
-      className: cn(
-        "text-xs text-grey-80 peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
-        className
-      ),
-      ...props,
-      children: [
-        text,
-        required && /* @__PURE__ */ jsx2("span", { className: "text-red-600", children: "\xA0*" })
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-row gap-1", children: [
+    /* @__PURE__ */ jsxs(
+      "label",
+      {
+        className: cn(
+          "text-xs text-grey-80 peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+          className
+        ),
+        ...props,
+        children: [
+          text,
+          required && /* @__PURE__ */ jsx3("span", { className: "text-red-600", children: "\xA0*" })
+        ]
+      }
+    ),
+    !!description && /* @__PURE__ */ jsx3(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+      /* @__PURE__ */ jsx3(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx3(InfoIcon, { className: "h-4 w-4" }) }),
+      /* @__PURE__ */ jsx3(TooltipContent, { className: "max-w-48", children: description })
+    ] }) })
+  ] });
 }
 var Label_default = Label;
 
 // src/components/ui/Input.tsx
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-var Input = forwardRef(
-  ({ label, error, theme, icon, onClear, value, onChange, classNames, ...props }, ref) => {
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+var Input = forwardRef2(
+  ({ label, error, description, theme, icon, onClear, value, onChange, classNames, ...props }, ref) => {
     const handleClear = () => {
       onChange?.({ target: { value: "" } });
       onClear?.();
@@ -52,23 +80,24 @@ var Input = forwardRef(
     const hasIcon = !!icon;
     const iconColor = theme === "dark" ? "text-white" : "text-grey-80";
     return /* @__PURE__ */ jsxs2("div", { className: "group flex w-full flex-col gap-1", "data-testid": `input-wrapper-${props.id}`, children: [
-      label && /* @__PURE__ */ jsx3(
+      label && /* @__PURE__ */ jsx4(
         Label_default,
         {
           text: label,
           htmlFor: props.name,
           required: props.required,
+          description,
           className: classNames?.label
         }
       ),
       /* @__PURE__ */ jsxs2("div", { className: "relative flex flex-row items-center", children: [
-        IconComponent && /* @__PURE__ */ jsx3(
+        IconComponent && /* @__PURE__ */ jsx4(
           IconComponent,
           {
             className: `absolute left-3 h-4 w-4 ${iconColor} opacity-50 group-hover:opacity-100`
           }
         ),
-        /* @__PURE__ */ jsx3(
+        /* @__PURE__ */ jsx4(
           "input",
           {
             className: cn(inputVariants({ theme, hasIcon })),
@@ -80,7 +109,7 @@ var Input = forwardRef(
             ...props
           }
         ),
-        hasIcon && value && /* @__PURE__ */ jsx3(
+        hasIcon && value && /* @__PURE__ */ jsx4(
           X,
           {
             className: `absolute right-3 h-4 w-4 cursor-pointer ${iconColor}`,
@@ -89,7 +118,7 @@ var Input = forwardRef(
           }
         )
       ] }),
-      /* @__PURE__ */ jsx3(ErrorMessage_default, { message: error })
+      /* @__PURE__ */ jsx4(ErrorMessage_default, { message: error })
     ] });
   }
 );
@@ -145,14 +174,14 @@ var inputVariants = cva(
 var Input_default = Input;
 
 // src/components/demos/InputDemo.tsx
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 function InputDemo() {
   return /* @__PURE__ */ jsxs3("div", { className: "m-4", children: [
-    /* @__PURE__ */ jsx4("h3", { children: "Input" }),
+    /* @__PURE__ */ jsx5("h3", { children: "Input" }),
     /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-2 md:flex-row", children: [
-      /* @__PURE__ */ jsx4("div", { className: "bg-green-80 p-2", children: /* @__PURE__ */ jsx4(Input_default, { theme: "dark", icon: "Search" }) }),
-      /* @__PURE__ */ jsx4("div", { className: "p-2", children: /* @__PURE__ */ jsx4(Input_default, { label: "Required input", required: true }) }),
-      /* @__PURE__ */ jsx4("div", { className: "p-2", children: /* @__PURE__ */ jsx4(Input_default, { icon: "MapPin" }) })
+      /* @__PURE__ */ jsx5("div", { className: "bg-green-80 p-2", children: /* @__PURE__ */ jsx5(Input_default, { theme: "dark", icon: "Search" }) }),
+      /* @__PURE__ */ jsx5("div", { className: "p-2", children: /* @__PURE__ */ jsx5(Input_default, { label: "Required input", required: true, description: "This is a tooltip" }) }),
+      /* @__PURE__ */ jsx5("div", { className: "p-2", children: /* @__PURE__ */ jsx5(Input_default, { icon: "MapPin" }) })
     ] })
   ] });
 }

package/dist/components/demos/InputDemo.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ui/Input.tsx","../../../src/lib/utils.ts","../../../src/components/ui/ErrorMessage.tsx","../../../src/components/ui/Label.tsx","../../../src/components/demos/InputDemo.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'cva'\nimport { icons, X } from 'lucide-react'\nimport { type ChangeEvent, forwardRef, type InputHTMLAttributes } from 'react'\n\nimport ErrorMessage from '@/components/ui/ErrorMessage'\nimport Label from '@/components/ui/Label'\nimport { cn } from '@/lib/utils'\n\ninterface Props extends InputHTMLAttributes<HTMLInputElement>, VariantProps<typeof inputVariants> {\n  label?: string\n  error?: string\n  icon?: keyof typeof icons\n  onClear?: () => void\n  classNames?: { label?: string }\n}\n\nconst Input = forwardRef<HTMLInputElement, Props>(\n  ({ label, error, theme, icon, onClear, value, onChange, classNames, ...props }, ref) => {\n    const handleClear = () => {\n      onChange?.({ target: { value: '' } } as ChangeEvent<HTMLInputElement>)\n      onClear?.()\n    }\n\n    const IconComponent = icon && icons[icon]\n\n    const placeholder = props.placeholder ?? (icon === 'Search' ? 'Search...' : '')\n    const hasIcon = !!icon\n\n    const iconColor = theme === 'dark' ? 'text-white' : 'text-grey-80'\n\n    return (\n      <div className=\"group flex w-full flex-col gap-1\" data-testid={`input-wrapper-${props.id}`}>\n        {label && (\n          <Label\n            text={label}\n            htmlFor={props.name}\n            required={props.required}\n            className={classNames?.label}\n          />\n        )}\n        <div className=\"relative flex flex-row items-center\">\n          {IconComponent && (\n            <IconComponent\n              className={`absolute left-3 h-4 w-4 ${iconColor} opacity-50 group-hover:opacity-100`}\n            />\n          )}\n          <input\n            className={cn(inputVariants({ theme, hasIcon }))}\n            ref={ref}\n            placeholder={placeholder}\n            value={value}\n            onChange={onChange}\n            data-testid={`input-element-${props.id}`}\n            {...props}\n          />\n          {hasIcon && value && (\n            <X\n              className={`absolute right-3 h-4 w-4 cursor-pointer ${iconColor}`}\n              onClick={handleClear}\n              data-testid=\"clear-button\"\n            />\n          )}\n        </div>\n\n        <ErrorMessage message={error} />\n      </div>\n    )\n  }\n)\nInput.displayName = 'Input'\n\nconst inputVariants = cva(\n  [\n    'border-input',\n    'placeholder:text-muted-foreground',\n    'focus-visible:ring-ring',\n    'inline-flex',\n    'w-full',\n    'h-11',\n    'items-center',\n    'justify-start',\n    'gap-3',\n    'rounded-lg',\n    'bg-transparent',\n    'px-3',\n    'pt-0.5',\n    'text-sm',\n    'shadow-sm',\n    'ring-grey-50',\n    'transition-colors',\n    'focus-visible:outline-none',\n    'focus-visible:ring-1',\n    'disabled:cursor-not-allowed',\n    'disabled:opacity-50',\n    'appearance-none',\n    '[&::-webkit-search-cancel-button]:appearance-none',\n    '[&::-webkit-search-decoration]:appearance-none',\n    '[&::-webkit-search-results-button]:appearance-none',\n    '[&::-webkit-search-results-decoration]:appearance-none',\n    '[&::-ms-clear]:display-none',\n    '[&::-ms-reveal]:display-none',\n  ],\n  {\n    variants: {\n      theme: {\n        light: 'text-grey-80 border',\n        dark: 'text-white',\n      },\n      hasIcon: {\n        false: 'pl-3',\n        true: 'pl-8',\n      },\n    },\n    defaultVariants: {\n      theme: 'light',\n      hasIcon: false,\n    },\n  }\n)\n\nexport default Input\n","import { type ClassValue, clsx } from 'clsx'\nimport { twMerge } from 'tailwind-merge'\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n","import { type ComponentPropsWithoutRef } from 'react'\n\nimport { cn } from '@/lib/utils'\n\ninterface Props extends ComponentPropsWithoutRef<'p'> {\n  message?: string\n}\n\nfunction ErrorMessage({ message, className, ...props }: Readonly<Props>) {\n  if (!message) return null\n\n  return (\n    <p className={cn('px-1 text-xs text-red-600', className)} {...props}>\n      {message}\n    </p>\n  )\n}\n\nexport default ErrorMessage\n","import { type ComponentPropsWithoutRef } from 'react'\n\nimport { cn } from '@/lib/utils'\n\ninterface Props extends ComponentPropsWithoutRef<'label'> {\n  text?: string\n  required?: boolean\n}\n\nfunction Label({ text, required, className, ...props }: Readonly<Props>) {\n  if (!text) return null\n\n  return (\n    <label\n      className={cn(\n        'text-xs text-grey-80 peer-disabled:cursor-not-allowed peer-disabled:opacity-70',\n        className\n      )}\n      {...props}\n    >\n      {text}\n      {required && <span className=\"text-red-600\">&nbsp;*</span>}\n    </label>\n  )\n}\n\nexport default Label\n","import Input from '@/components/ui/Input'\n\nfunction InputDemo() {\n  return (\n    <div className=\"m-4\">\n      <h3>Input</h3>\n      <div className=\"flex flex-col gap-2 md:flex-row\">\n        <div className=\"bg-green-80 p-2\">\n          <Input theme=\"dark\" icon=\"Search\" />\n        </div>\n        <div className=\"p-2\">\n          <Input label=\"Required input\" required />\n        </div>\n        <div className=\"p-2\">\n          <Input icon=\"MapPin\" />\n        </div>\n      </div>\n    </div>\n  )\n}\n\nexport default InputDemo\n"],"mappings":"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","names":["jsx","jsx","jsxs","jsx","jsxs"]}
+{"version":3,"sources":["../../../src/components/ui/Input.tsx","../../../src/lib/utils.ts","../../../src/components/ui/ErrorMessage.tsx","../../../src/components/primitives/tooltip.tsx","../../../src/components/ui/Label.tsx","../../../src/components/demos/InputDemo.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'cva'\nimport { icons, X } from 'lucide-react'\nimport { type ChangeEvent, forwardRef, type InputHTMLAttributes } from 'react'\n\nimport ErrorMessage from '@/components/ui/ErrorMessage'\nimport Label from '@/components/ui/Label'\nimport { cn } from '@/lib/utils'\n\ninterface Props extends InputHTMLAttributes<HTMLInputElement>, VariantProps<typeof inputVariants> {\n  label?: string\n  error?: string\n  icon?: keyof typeof icons\n  description?: string\n  classNames?: { label?: string }\n  onClear?: () => void\n}\n\nconst Input = forwardRef<HTMLInputElement, Props>(\n  (\n    { label, error, description, theme, icon, onClear, value, onChange, classNames, ...props },\n    ref\n  ) => {\n    const handleClear = () => {\n      onChange?.({ target: { value: '' } } as ChangeEvent<HTMLInputElement>)\n      onClear?.()\n    }\n\n    const IconComponent = icon && icons[icon]\n\n    const placeholder = props.placeholder ?? (icon === 'Search' ? 'Search...' : '')\n    const hasIcon = !!icon\n\n    const iconColor = theme === 'dark' ? 'text-white' : 'text-grey-80'\n\n    return (\n      <div className=\"group flex w-full flex-col gap-1\" data-testid={`input-wrapper-${props.id}`}>\n        {label && (\n          <Label\n            text={label}\n            htmlFor={props.name}\n            required={props.required}\n            description={description}\n            className={classNames?.label}\n          />\n        )}\n        <div className=\"relative flex flex-row items-center\">\n          {IconComponent && (\n            <IconComponent\n              className={`absolute left-3 h-4 w-4 ${iconColor} opacity-50 group-hover:opacity-100`}\n            />\n          )}\n          <input\n            className={cn(inputVariants({ theme, hasIcon }))}\n            ref={ref}\n            placeholder={placeholder}\n            value={value}\n            onChange={onChange}\n            data-testid={`input-element-${props.id}`}\n            {...props}\n          />\n          {hasIcon && value && (\n            <X\n              className={`absolute right-3 h-4 w-4 cursor-pointer ${iconColor}`}\n              onClick={handleClear}\n              data-testid=\"clear-button\"\n            />\n          )}\n        </div>\n\n        <ErrorMessage message={error} />\n      </div>\n    )\n  }\n)\nInput.displayName = 'Input'\n\nconst inputVariants = cva(\n  [\n    'border-input',\n    'placeholder:text-muted-foreground',\n    'focus-visible:ring-ring',\n    'inline-flex',\n    'w-full',\n    'h-11',\n    'items-center',\n    'justify-start',\n    'gap-3',\n    'rounded-lg',\n    'bg-transparent',\n    'px-3',\n    'pt-0.5',\n    'text-sm',\n    'shadow-sm',\n    'ring-grey-50',\n    'transition-colors',\n    'focus-visible:outline-none',\n    'focus-visible:ring-1',\n    'disabled:cursor-not-allowed',\n    'disabled:opacity-50',\n    'appearance-none',\n    '[&::-webkit-search-cancel-button]:appearance-none',\n    '[&::-webkit-search-decoration]:appearance-none',\n    '[&::-webkit-search-results-button]:appearance-none',\n    '[&::-webkit-search-results-decoration]:appearance-none',\n    '[&::-ms-clear]:display-none',\n    '[&::-ms-reveal]:display-none',\n  ],\n  {\n    variants: {\n      theme: {\n        light: 'text-grey-80 border',\n        dark: 'text-white',\n      },\n      hasIcon: {\n        false: 'pl-3',\n        true: 'pl-8',\n      },\n    },\n    defaultVariants: {\n      theme: 'light',\n      hasIcon: false,\n    },\n  }\n)\n\nexport default Input\n","import { type ClassValue, clsx } from 'clsx'\nimport { twMerge } from 'tailwind-merge'\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n","import { type ComponentPropsWithoutRef } from 'react'\n\nimport { cn } from '@/lib/utils'\n\ninterface Props extends ComponentPropsWithoutRef<'p'> {\n  message?: string\n}\n\nfunction ErrorMessage({ message, className, ...props }: Readonly<Props>) {\n  if (!message) return null\n\n  return (\n    <p className={cn('px-1 text-xs text-red-600', className)} {...props}>\n      {message}\n    </p>\n  )\n}\n\nexport default ErrorMessage\n","'use client'\n\nimport * as TooltipPrimitive from '@radix-ui/react-tooltip'\nimport * as React from 'react'\n\nimport { cn } from '@/lib/utils'\n\nconst TooltipProvider = TooltipPrimitive.Provider\n\nconst Tooltip = TooltipPrimitive.Root\n\nconst TooltipTrigger = TooltipPrimitive.Trigger\n\nconst TooltipContent = React.forwardRef<\n  React.ElementRef<typeof TooltipPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>\n>(({ className, sideOffset = 4, ...props }, ref) => (\n  <TooltipPrimitive.Content\n    ref={ref}\n    sideOffset={sideOffset}\n    className={cn(\n      'z-50 overflow-hidden rounded-md border border-neutral-200 bg-white px-3 py-1.5 text-sm text-neutral-950 shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50',\n      className\n    )}\n    {...props}\n  />\n))\nTooltipContent.displayName = TooltipPrimitive.Content.displayName\n\nexport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger }\n","import { type ComponentPropsWithoutRef } from 'react'\n\nimport { cn } from '@/lib/utils'\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from '@/components/primitives/tooltip'\nimport { InfoIcon } from 'lucide-react'\n\ninterface Props extends ComponentPropsWithoutRef<'label'> {\n  text?: string\n  required?: boolean\n  description?: string\n}\n\nfunction Label({ text, required, description, className, ...props }: Readonly<Props>) {\n  if (!text) return null\n\n  return (\n    <div className=\"flex w-full flex-row gap-1\">\n      <label\n        className={cn(\n          'text-xs text-grey-80 peer-disabled:cursor-not-allowed peer-disabled:opacity-70',\n          className\n        )}\n        {...props}\n      >\n        {text}\n        {required && <span className=\"text-red-600\">&nbsp;*</span>}\n      </label>\n\n      {!!description && (\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <InfoIcon className=\"h-4 w-4\" />\n            </TooltipTrigger>\n            <TooltipContent className=\"max-w-48\">{description}</TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n      )}\n    </div>\n  )\n}\n\nexport default Label\n","import Input from '@/components/ui/Input'\n\nfunction InputDemo() {\n  return (\n    <div className=\"m-4\">\n      <h3>Input</h3>\n      <div className=\"flex flex-col gap-2 md:flex-row\">\n        <div className=\"bg-green-80 p-2\">\n          <Input theme=\"dark\" icon=\"Search\" />\n        </div>\n        <div className=\"p-2\">\n          <Input label=\"Required input\" required description=\"This is a tooltip\" />\n        </div>\n        <div className=\"p-2\">\n          <Input icon=\"MapPin\" />\n        </div>\n      </div>\n    </div>\n  )\n}\n\nexport default InputDemo\n"],"mappings":"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","names":["forwardRef","jsx","jsx","jsx","jsxs","forwardRef","jsx","jsxs"]}