@next-degree/pickle-shared-js 0.3.23 → 0.3.24

package/dist/components/demos/InputDemo.js

@@ -0,0 +1,152 @@
+// src/components/ui/Input.tsx
+import { cva } from "cva";
+import { icons, X } from "lucide-react";
+import { forwardRef } from "react";
+
+// src/lib/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/components/ui/ErrorMessage.tsx
+import { jsx } from "react/jsx-runtime";
+function ErrorMessage({ message, className, ...props }) {
+  if (!message) return null;
+  return /* @__PURE__ */ jsx("p", { className: cn("px-1 text-xs text-red-600", className), ...props, children: message });
+}
+var ErrorMessage_default = ErrorMessage;
+
+// src/components/ui/Label.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+function Label({ text, className, ...props }) {
+  if (!text) return null;
+  return /* @__PURE__ */ jsx2(
+    "label",
+    {
+      className: cn(
+        "text-xs text-grey-80 peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+        className
+      ),
+      ...props,
+      children: text
+    }
+  );
+}
+var Label_default = Label;
+
+// src/components/ui/Input.tsx
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+var Input = forwardRef(
+  ({ label, error, theme, icon, onClear, value, onChange, classNames, ...props }, ref) => {
+    const handleClear = () => {
+      onChange?.({ target: { value: "" } });
+      onClear?.();
+    };
+    const IconComponent = icon && icons[icon];
+    const placeholder = props.placeholder ?? (icon === "Search" ? "Search..." : "");
+    const hasIcon = !!icon;
+    const iconColor = theme === "dark" ? "text-white" : "text-grey-80";
+    return /* @__PURE__ */ jsxs("div", { className: "group flex w-full flex-col", "data-testid": `input-wrapper-${props.id}`, children: [
+      label && /* @__PURE__ */ jsx3(Label_default, { text: label, htmlFor: props.name, className: cn("body mb-1", classNames?.label) }),
+      /* @__PURE__ */ jsxs("div", { className: "relative flex flex-row items-center", children: [
+        IconComponent && /* @__PURE__ */ jsx3(
+          IconComponent,
+          {
+            className: `absolute left-3 h-4 w-4 ${iconColor} opacity-50 group-hover:opacity-100`
+          }
+        ),
+        /* @__PURE__ */ jsx3(
+          "input",
+          {
+            className: cn(inputVariants({ theme, hasIcon })),
+            ref,
+            placeholder,
+            value,
+            onChange,
+            "data-testid": `input-element-${props.id}`,
+            ...props
+          }
+        ),
+        hasIcon && value && /* @__PURE__ */ jsx3(
+          X,
+          {
+            className: `absolute right-3 h-4 w-4 cursor-pointer ${iconColor}`,
+            onClick: handleClear,
+            "data-testid": "clear-button"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx3(ErrorMessage_default, { message: error, className: "mt-1" })
+    ] });
+  }
+);
+Input.displayName = "Input";
+var inputVariants = cva(
+  [
+    "border-input",
+    "placeholder:text-muted-foreground",
+    "focus-visible:ring-ring",
+    "inline-flex",
+    "w-full",
+    "h-11",
+    "items-center",
+    "justify-start",
+    "gap-3",
+    "rounded-lg",
+    "bg-transparent",
+    "px-3",
+    "pt-0.5",
+    "text-sm",
+    "shadow-sm",
+    "ring-grey-50",
+    "transition-colors",
+    "focus-visible:outline-none",
+    "focus-visible:ring-1",
+    "disabled:cursor-not-allowed",
+    "disabled:opacity-50",
+    "appearance-none",
+    "[&::-webkit-search-cancel-button]:appearance-none",
+    "[&::-webkit-search-decoration]:appearance-none",
+    "[&::-webkit-search-results-button]:appearance-none",
+    "[&::-webkit-search-results-decoration]:appearance-none",
+    "[&::-ms-clear]:display-none",
+    "[&::-ms-reveal]:display-none"
+  ],
+  {
+    variants: {
+      theme: {
+        light: "text-grey-80 border",
+        dark: "text-white"
+      },
+      hasIcon: {
+        false: "pl-3",
+        true: "pl-8"
+      }
+    },
+    defaultVariants: {
+      theme: "light",
+      hasIcon: false
+    }
+  }
+);
+var Input_default = Input;
+
+// src/components/demos/InputDemo.tsx
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+function InputDemo() {
+  return /* @__PURE__ */ jsxs2("div", { className: "m-4", children: [
+    /* @__PURE__ */ jsx4("h3", { children: "Input" }),
+    /* @__PURE__ */ jsxs2("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, {}) }),
+      /* @__PURE__ */ jsx4("div", { className: "p-2", children: /* @__PURE__ */ jsx4(Input_default, { icon: "MapPin" }) })
+    ] })
+  ] });
+}
+var InputDemo_default = InputDemo;
+export {
+  InputDemo_default as default
+};
+//# sourceMappingURL=InputDemo.js.map

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

@@ -0,0 +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\" data-testid={`input-wrapper-${props.id}`}>\n        {label && (\n          <Label text={label} htmlFor={props.name} className={cn('body mb-1', classNames?.label)} />\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} className=\"mt-1\" />\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}\n\nfunction Label({ text, 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    </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 />\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","jsx","jsxs"]}

package/dist/components/demos/index.cjs

@@ -1009,12 +1009,127 @@ function SelectDemo() {
 }
 var SelectDemo_default = SelectDemo;
 
-// src/components/demos/index.tsx
+// src/components/ui/Input.tsx
+var import_cva5 = require("cva");
+var import_lucide_react8 = require("lucide-react");
+var import_react6 = require("react");
 var import_jsx_runtime16 = require("react/jsx-runtime");
+var Input = (0, import_react6.forwardRef)(
+  ({ label, error, theme, icon, onClear, value, onChange, classNames, ...props }, ref) => {
+    const handleClear = () => {
+      onChange?.({ target: { value: "" } });
+      onClear?.();
+    };
+    const IconComponent = icon && import_lucide_react8.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_runtime16.jsxs)("div", { className: "group flex w-full flex-col", "data-testid": `input-wrapper-${props.id}`, children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Label_default, { text: label, htmlFor: props.name, className: cn("body mb-1", classNames?.label) }),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "relative flex flex-row items-center", children: [
+        IconComponent && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          IconComponent,
+          {
+            className: `absolute left-3 h-4 w-4 ${iconColor} opacity-50 group-hover:opacity-100`
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          "input",
+          {
+            className: cn(inputVariants({ theme, hasIcon })),
+            ref,
+            placeholder,
+            value,
+            onChange,
+            "data-testid": `input-element-${props.id}`,
+            ...props
+          }
+        ),
+        hasIcon && value && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          import_lucide_react8.X,
+          {
+            className: `absolute right-3 h-4 w-4 cursor-pointer ${iconColor}`,
+            onClick: handleClear,
+            "data-testid": "clear-button"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ErrorMessage_default, { message: error, className: "mt-1" })
+    ] });
+  }
+);
+Input.displayName = "Input";
+var inputVariants = (0, import_cva5.cva)(
+  [
+    "border-input",
+    "placeholder:text-muted-foreground",
+    "focus-visible:ring-ring",
+    "inline-flex",
+    "w-full",
+    "h-11",
+    "items-center",
+    "justify-start",
+    "gap-3",
+    "rounded-lg",
+    "bg-transparent",
+    "px-3",
+    "pt-0.5",
+    "text-sm",
+    "shadow-sm",
+    "ring-grey-50",
+    "transition-colors",
+    "focus-visible:outline-none",
+    "focus-visible:ring-1",
+    "disabled:cursor-not-allowed",
+    "disabled:opacity-50",
+    "appearance-none",
+    "[&::-webkit-search-cancel-button]:appearance-none",
+    "[&::-webkit-search-decoration]:appearance-none",
+    "[&::-webkit-search-results-button]:appearance-none",
+    "[&::-webkit-search-results-decoration]:appearance-none",
+    "[&::-ms-clear]:display-none",
+    "[&::-ms-reveal]:display-none"
+  ],
+  {
+    variants: {
+      theme: {
+        light: "text-grey-80 border",
+        dark: "text-white"
+      },
+      hasIcon: {
+        false: "pl-3",
+        true: "pl-8"
+      }
+    },
+    defaultVariants: {
+      theme: "light",
+      hasIcon: false
+    }
+  }
+);
+var Input_default = Input;
+
+// src/components/demos/InputDemo.tsx
+var import_jsx_runtime17 = require("react/jsx-runtime");
+function InputDemo() {
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "m-4", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("h3", { children: "Input" }),
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex flex-col gap-2 md:flex-row", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "bg-green-80 p-2", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Input_default, { theme: "dark", icon: "Search" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "p-2", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Input_default, {}) }),
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "p-2", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Input_default, { icon: "MapPin" }) })
+    ] })
+  ] });
+}
+var InputDemo_default = InputDemo;
+
+// src/components/demos/index.tsx
+var import_jsx_runtime18 = require("react/jsx-runtime");
 function Demos() {
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ComboboxDemo_default, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(SelectDemo_default, {})
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ComboboxDemo_default, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(SelectDemo_default, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(InputDemo_default, {})
   ] });
 }
 var demos_default = Demos;