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

package/dist/components/demos/CounterDemo.cjs

@@ -0,0 +1,270 @@
+"use strict";
+"use client";
+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)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  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/CounterDemo.tsx
+var CounterDemo_exports = {};
+__export(CounterDemo_exports, {
+  default: () => CounterDemo_default
+});
+module.exports = __toCommonJS(CounterDemo_exports);
+
+// src/components/ui/Counter.tsx
+var import_cva = require("cva");
+var import_lucide_react2 = require("lucide-react");
+var import_react = require("react");
+
+// src/lib/utils.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+function cn(...inputs) {
+  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
+}
+
+// src/components/ui/ErrorMessage.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function ErrorMessage({ message, className, ...props }) {
+  if (!message) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: cn("px-1 text-xs text-red-600", className), ...props, children: message });
+}
+var ErrorMessage_default = ErrorMessage;
+
+// 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");
+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_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/Counter.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var Counter = (0, import_react.forwardRef)(
+  ({ label, error, min, max, step = 1, description, theme, value, classNames, onChange, ...props }, ref) => {
+    const [count, setCount] = (0, import_react.useState)(0);
+    (0, import_react.useEffect)(() => {
+      setCount(value ?? 0);
+    }, [value]);
+    const handleChange = (e) => {
+      const newValue = parseInt(e.target.value.replace(/\D/g, ""), 10);
+      if (isNaN(newValue)) return;
+      if (min && newValue < min) {
+        onChange?.(min);
+        setCount(min);
+        return;
+      }
+      if (max && newValue > max) {
+        onChange?.(max);
+        setCount(max);
+        return;
+      }
+      onChange?.(newValue);
+      setCount(newValue);
+    };
+    const decrement = () => {
+      const proposedValue = count - step;
+      const newValue = Math.max(min ?? -Infinity, proposedValue);
+      onChange?.(newValue);
+      setCount(newValue);
+    };
+    const increment = () => {
+      const proposedValue = count + step;
+      const newValue = Math.min(max ?? Infinity, proposedValue);
+      onChange?.(newValue);
+      setCount(newValue);
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+      "div",
+      {
+        className: cn("flex w-auto flex-col gap-1", classNames?.root),
+        "data-testid": `counter-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_runtime4.jsxs)("div", { className: "relative flex w-[122px] flex-row items-center", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              "button",
+              {
+                type: "button",
+                className: "absolute inset-y-0 left-1 my-auto flex h-8 w-8 cursor-pointer items-center justify-center rounded-full hover:bg-pickle-20",
+                onClick: decrement,
+                children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react2.Minus, { className: "h-4 w-4 text-green-100" })
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              "input",
+              {
+                className: cn(counterVariants({ theme }), classNames?.input),
+                ref,
+                value: count,
+                onChange: handleChange,
+                "data-testid": `counter-element-${props.id}`,
+                ...props
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              "button",
+              {
+                type: "button",
+                className: "absolute inset-y-0 right-1 my-auto flex h-8 w-8 cursor-pointer items-center justify-center rounded-full hover:bg-pickle-20",
+                onClick: increment,
+                children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react2.Plus, { className: "h-4 w-4 text-green-100" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ErrorMessage_default, { message: error })
+        ]
+      }
+    );
+  }
+);
+Counter.displayName = "Counter";
+var counterVariants = (0, import_cva.cva)(
+  [
+    "border-input",
+    "placeholder:text-muted-foreground",
+    "focus-visible:ring-ring",
+    "inline-flex",
+    "w-[122px]",
+    "h-11",
+    "items-center",
+    "justify-start",
+    "gap-3",
+    "rounded-lg",
+    "bg-transparent",
+    "px-3",
+    "pt-0.5",
+    "text-sm",
+    "text-center",
+    "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
+    }
+  }
+);
+
+// src/components/demos/CounterDemo.tsx
+var import_react2 = require("react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function CounterDemo() {
+  const [count, setCount] = (0, import_react2.useState)(0);
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "m-4", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h3", { children: "Counter" }),
+    /* @__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: "p-2", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        Counter,
+        {
+          label: "Required Counter",
+          required: true,
+          value: count,
+          onChange: setCount,
+          description: "This is a tooltip"
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "p-2", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Counter, { min: 0, max: 10, step: 2 }) })
+    ] })
+  ] });
+}
+var CounterDemo_default = CounterDemo;
+//# sourceMappingURL=CounterDemo.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/demos/CounterDemo.tsx","../../../src/components/ui/Counter.tsx","../../../src/lib/utils.ts","../../../src/components/ui/ErrorMessage.tsx","../../../src/components/primitives/tooltip.tsx","../../../src/components/ui/Label.tsx"],"sourcesContent":["'use client'\n\nimport { Counter } from '@/components/ui/Counter'\nimport { useState } from 'react'\n\nfunction CounterDemo() {\n  const [count, setCount] = useState(0)\n\n  return (\n    <div className=\"m-4\">\n      <h3>Counter</h3>\n      <div className=\"flex flex-col gap-2 md:flex-row\">\n        <div className=\"p-2\">\n          <Counter\n            label=\"Required Counter\"\n            required\n            value={count}\n            onChange={setCount}\n            description=\"This is a tooltip\"\n          />\n        </div>\n        <div className=\"p-2\">\n          <Counter min={0} max={10} step={2} />\n        </div>\n      </div>\n    </div>\n  )\n}\n\nexport default CounterDemo\n","'use client'\n\nimport { cva, type VariantProps } from 'cva'\nimport { Minus, Plus } from 'lucide-react'\nimport { ChangeEvent, forwardRef, useEffect, useState, type InputHTMLAttributes } from 'react'\n\nimport ErrorMessage from '@/components/ui/ErrorMessage'\nimport Label from '@/components/ui/Label'\nimport { cn } from '@/lib/utils'\n\ntype InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'>\ntype CounterVariants = VariantProps<typeof counterVariants>\ntype Props = InputProps &\n  CounterVariants & {\n    label?: string\n    value?: number\n    error?: string\n    min?: number\n    max?: number\n    step?: number\n    description?: string\n    classNames?: { root?: string; input?: string; label?: string }\n    onChange?: (n: number) => void\n  }\n\nexport const Counter = forwardRef<HTMLInputElement, Props>(\n  (\n    { label, error, min, max, step = 1, description, theme, value, classNames, onChange, ...props },\n    ref\n  ) => {\n    const [count, setCount] = useState(0)\n\n    useEffect(() => {\n      setCount(value ?? 0)\n    }, [value])\n\n    const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n      const newValue = parseInt(e.target.value.replace(/\\D/g, ''), 10)\n      if (isNaN(newValue)) return\n      if (min && newValue < min) {\n        onChange?.(min)\n        setCount(min)\n        return\n      }\n      if (max && newValue > max) {\n        onChange?.(max)\n        setCount(max)\n        return\n      }\n      onChange?.(newValue)\n      setCount(newValue)\n    }\n\n    const decrement = () => {\n      const proposedValue = count - step\n      const newValue = Math.max(min ?? -Infinity, proposedValue)\n      onChange?.(newValue)\n      setCount(newValue)\n    }\n\n    const increment = () => {\n      const proposedValue = count + step\n      const newValue = Math.min(max ?? Infinity, proposedValue)\n      onChange?.(newValue)\n      setCount(newValue)\n    }\n\n    return (\n      <div\n        className={cn('flex w-auto flex-col gap-1', classNames?.root)}\n        data-testid={`counter-wrapper-${props.id}`}\n      >\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\n        <div className=\"relative flex w-[122px] flex-row items-center\">\n          <button\n            type=\"button\"\n            className=\"absolute inset-y-0 left-1 my-auto flex h-8 w-8 cursor-pointer items-center justify-center rounded-full hover:bg-pickle-20\"\n            onClick={decrement}\n          >\n            <Minus className=\"h-4 w-4 text-green-100\" />\n          </button>\n\n          <input\n            className={cn(counterVariants({ theme }), classNames?.input)}\n            ref={ref}\n            value={count}\n            onChange={handleChange}\n            data-testid={`counter-element-${props.id}`}\n            {...props}\n          />\n\n          <button\n            type=\"button\"\n            className=\"absolute inset-y-0 right-1 my-auto flex h-8 w-8 cursor-pointer items-center justify-center rounded-full hover:bg-pickle-20\"\n            onClick={increment}\n          >\n            <Plus className=\"h-4 w-4 text-green-100\" />\n          </button>\n        </div>\n\n        <ErrorMessage message={error} />\n      </div>\n    )\n  }\n)\nCounter.displayName = 'Counter'\n\nconst counterVariants = cva(\n  [\n    'border-input',\n    'placeholder:text-muted-foreground',\n    'focus-visible:ring-ring',\n    'inline-flex',\n    'w-[122px]',\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    'text-center',\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","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_react","import_jsx_runtime"]}

package/dist/components/demos/CounterDemo.d.cts

@@ -0,0 +1,5 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+declare function CounterDemo(): react_jsx_runtime.JSX.Element;
+
+export { CounterDemo as default };

package/dist/components/demos/CounterDemo.d.ts

@@ -0,0 +1,5 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+declare function CounterDemo(): react_jsx_runtime.JSX.Element;
+
+export { CounterDemo as default };

package/dist/components/demos/CounterDemo.js

@@ -0,0 +1,238 @@
+"use client";
+
+// src/components/ui/Counter.tsx
+import { cva } from "cva";
+import { Minus, Plus } from "lucide-react";
+import { forwardRef as forwardRef2, useEffect, useState } 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/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 { 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("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/Counter.tsx
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+var Counter = forwardRef2(
+  ({ label, error, min, max, step = 1, description, theme, value, classNames, onChange, ...props }, ref) => {
+    const [count, setCount] = useState(0);
+    useEffect(() => {
+      setCount(value ?? 0);
+    }, [value]);
+    const handleChange = (e) => {
+      const newValue = parseInt(e.target.value.replace(/\D/g, ""), 10);
+      if (isNaN(newValue)) return;
+      if (min && newValue < min) {
+        onChange?.(min);
+        setCount(min);
+        return;
+      }
+      if (max && newValue > max) {
+        onChange?.(max);
+        setCount(max);
+        return;
+      }
+      onChange?.(newValue);
+      setCount(newValue);
+    };
+    const decrement = () => {
+      const proposedValue = count - step;
+      const newValue = Math.max(min ?? -Infinity, proposedValue);
+      onChange?.(newValue);
+      setCount(newValue);
+    };
+    const increment = () => {
+      const proposedValue = count + step;
+      const newValue = Math.min(max ?? Infinity, proposedValue);
+      onChange?.(newValue);
+      setCount(newValue);
+    };
+    return /* @__PURE__ */ jsxs2(
+      "div",
+      {
+        className: cn("flex w-auto flex-col gap-1", classNames?.root),
+        "data-testid": `counter-wrapper-${props.id}`,
+        children: [
+          label && /* @__PURE__ */ jsx4(
+            Label_default,
+            {
+              text: label,
+              htmlFor: props.name,
+              required: props.required,
+              description,
+              className: classNames?.label
+            }
+          ),
+          /* @__PURE__ */ jsxs2("div", { className: "relative flex w-[122px] flex-row items-center", children: [
+            /* @__PURE__ */ jsx4(
+              "button",
+              {
+                type: "button",
+                className: "absolute inset-y-0 left-1 my-auto flex h-8 w-8 cursor-pointer items-center justify-center rounded-full hover:bg-pickle-20",
+                onClick: decrement,
+                children: /* @__PURE__ */ jsx4(Minus, { className: "h-4 w-4 text-green-100" })
+              }
+            ),
+            /* @__PURE__ */ jsx4(
+              "input",
+              {
+                className: cn(counterVariants({ theme }), classNames?.input),
+                ref,
+                value: count,
+                onChange: handleChange,
+                "data-testid": `counter-element-${props.id}`,
+                ...props
+              }
+            ),
+            /* @__PURE__ */ jsx4(
+              "button",
+              {
+                type: "button",
+                className: "absolute inset-y-0 right-1 my-auto flex h-8 w-8 cursor-pointer items-center justify-center rounded-full hover:bg-pickle-20",
+                onClick: increment,
+                children: /* @__PURE__ */ jsx4(Plus, { className: "h-4 w-4 text-green-100" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx4(ErrorMessage_default, { message: error })
+        ]
+      }
+    );
+  }
+);
+Counter.displayName = "Counter";
+var counterVariants = cva(
+  [
+    "border-input",
+    "placeholder:text-muted-foreground",
+    "focus-visible:ring-ring",
+    "inline-flex",
+    "w-[122px]",
+    "h-11",
+    "items-center",
+    "justify-start",
+    "gap-3",
+    "rounded-lg",
+    "bg-transparent",
+    "px-3",
+    "pt-0.5",
+    "text-sm",
+    "text-center",
+    "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
+    }
+  }
+);
+
+// src/components/demos/CounterDemo.tsx
+import { useState as useState2 } from "react";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+function CounterDemo() {
+  const [count, setCount] = useState2(0);
+  return /* @__PURE__ */ jsxs3("div", { className: "m-4", children: [
+    /* @__PURE__ */ jsx5("h3", { children: "Counter" }),
+    /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-2 md:flex-row", children: [
+      /* @__PURE__ */ jsx5("div", { className: "p-2", children: /* @__PURE__ */ jsx5(
+        Counter,
+        {
+          label: "Required Counter",
+          required: true,
+          value: count,
+          onChange: setCount,
+          description: "This is a tooltip"
+        }
+      ) }),
+      /* @__PURE__ */ jsx5("div", { className: "p-2", children: /* @__PURE__ */ jsx5(Counter, { min: 0, max: 10, step: 2 }) })
+    ] })
+  ] });
+}
+var CounterDemo_default = CounterDemo;
+export {
+  CounterDemo_default as default
+};
+//# sourceMappingURL=CounterDemo.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ui/Counter.tsx","../../../src/lib/utils.ts","../../../src/components/ui/ErrorMessage.tsx","../../../src/components/primitives/tooltip.tsx","../../../src/components/ui/Label.tsx","../../../src/components/demos/CounterDemo.tsx"],"sourcesContent":["'use client'\n\nimport { cva, type VariantProps } from 'cva'\nimport { Minus, Plus } from 'lucide-react'\nimport { ChangeEvent, forwardRef, useEffect, useState, type InputHTMLAttributes } from 'react'\n\nimport ErrorMessage from '@/components/ui/ErrorMessage'\nimport Label from '@/components/ui/Label'\nimport { cn } from '@/lib/utils'\n\ntype InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'>\ntype CounterVariants = VariantProps<typeof counterVariants>\ntype Props = InputProps &\n  CounterVariants & {\n    label?: string\n    value?: number\n    error?: string\n    min?: number\n    max?: number\n    step?: number\n    description?: string\n    classNames?: { root?: string; input?: string; label?: string }\n    onChange?: (n: number) => void\n  }\n\nexport const Counter = forwardRef<HTMLInputElement, Props>(\n  (\n    { label, error, min, max, step = 1, description, theme, value, classNames, onChange, ...props },\n    ref\n  ) => {\n    const [count, setCount] = useState(0)\n\n    useEffect(() => {\n      setCount(value ?? 0)\n    }, [value])\n\n    const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n      const newValue = parseInt(e.target.value.replace(/\\D/g, ''), 10)\n      if (isNaN(newValue)) return\n      if (min && newValue < min) {\n        onChange?.(min)\n        setCount(min)\n        return\n      }\n      if (max && newValue > max) {\n        onChange?.(max)\n        setCount(max)\n        return\n      }\n      onChange?.(newValue)\n      setCount(newValue)\n    }\n\n    const decrement = () => {\n      const proposedValue = count - step\n      const newValue = Math.max(min ?? -Infinity, proposedValue)\n      onChange?.(newValue)\n      setCount(newValue)\n    }\n\n    const increment = () => {\n      const proposedValue = count + step\n      const newValue = Math.min(max ?? Infinity, proposedValue)\n      onChange?.(newValue)\n      setCount(newValue)\n    }\n\n    return (\n      <div\n        className={cn('flex w-auto flex-col gap-1', classNames?.root)}\n        data-testid={`counter-wrapper-${props.id}`}\n      >\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\n        <div className=\"relative flex w-[122px] flex-row items-center\">\n          <button\n            type=\"button\"\n            className=\"absolute inset-y-0 left-1 my-auto flex h-8 w-8 cursor-pointer items-center justify-center rounded-full hover:bg-pickle-20\"\n            onClick={decrement}\n          >\n            <Minus className=\"h-4 w-4 text-green-100\" />\n          </button>\n\n          <input\n            className={cn(counterVariants({ theme }), classNames?.input)}\n            ref={ref}\n            value={count}\n            onChange={handleChange}\n            data-testid={`counter-element-${props.id}`}\n            {...props}\n          />\n\n          <button\n            type=\"button\"\n            className=\"absolute inset-y-0 right-1 my-auto flex h-8 w-8 cursor-pointer items-center justify-center rounded-full hover:bg-pickle-20\"\n            onClick={increment}\n          >\n            <Plus className=\"h-4 w-4 text-green-100\" />\n          </button>\n        </div>\n\n        <ErrorMessage message={error} />\n      </div>\n    )\n  }\n)\nCounter.displayName = 'Counter'\n\nconst counterVariants = cva(\n  [\n    'border-input',\n    'placeholder:text-muted-foreground',\n    'focus-visible:ring-ring',\n    'inline-flex',\n    'w-[122px]',\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    'text-center',\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","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","'use client'\n\nimport { Counter } from '@/components/ui/Counter'\nimport { useState } from 'react'\n\nfunction CounterDemo() {\n  const [count, setCount] = useState(0)\n\n  return (\n    <div className=\"m-4\">\n      <h3>Counter</h3>\n      <div className=\"flex flex-col gap-2 md:flex-row\">\n        <div className=\"p-2\">\n          <Counter\n            label=\"Required Counter\"\n            required\n            value={count}\n            onChange={setCount}\n            description=\"This is a tooltip\"\n          />\n        </div>\n        <div className=\"p-2\">\n          <Counter min={0} max={10} step={2} />\n        </div>\n      </div>\n    </div>\n  )\n}\n\nexport default CounterDemo\n"],"mappings":"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","names":["forwardRef","jsx","jsx","jsx","jsxs","forwardRef","useState","jsx","jsxs"]}