acai-ui-library 0.1.11

package/dist/components/input.cjs

@@ -0,0 +1,231 @@
+"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)
+    __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/input.tsx
+var input_exports = {};
+__export(input_exports, {
+  Input: () => Input,
+  inputVariants: () => inputVariants
+});
+module.exports = __toCommonJS(input_exports);
+var React = __toESM(require("react"), 1);
+var import_class_variance_authority = require("class-variance-authority");
+var import_lucide_react = require("lucide-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/input.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var inputVariants = (0, import_class_variance_authority.cva)(
+  "flex w-full rounded-md border bg-background transition-[color,border-color,box-shadow] duration-150 file:border-0 file:bg-transparent file:font-medium file:text-foreground placeholder:text-muted-foreground focus-within:outline-none disabled:cursor-not-allowed disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "border-input hover:border-muted-foreground focus-within:border-[var(--hc-primary-500)] focus-within:ring-[3px] focus-within:ring-[color-mix(in_srgb,var(--hc-primary-500)_22%,transparent)]",
+        error: "border-[var(--hc-color-destructive)] focus-within:border-[var(--hc-color-destructive)] focus-within:ring-[3px] focus-within:ring-[color-mix(in_srgb,var(--hc-color-destructive)_22%,transparent)]",
+        success: "border-[var(--hc-color-success)] focus-within:border-[var(--hc-color-success)] focus-within:ring-[3px] focus-within:ring-[color-mix(in_srgb,var(--hc-color-success)_22%,transparent)]"
+      },
+      inputSize: {
+        default: "h-10 px-3 py-2 text-sm",
+        sm: "h-8 px-2.5 py-1.5 text-xs",
+        lg: "h-12 px-4 py-3 text-base"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      inputSize: "default"
+    }
+  }
+);
+var Input = React.forwardRef(
+  ({
+    className,
+    type,
+    label,
+    hint,
+    variant = "default",
+    inputSize = "default",
+    leadingIcon,
+    trailingIcon,
+    clearable,
+    onClear,
+    disabled,
+    id,
+    value,
+    defaultValue,
+    onChange,
+    ...props
+  }, ref) => {
+    const inputId = id || React.useId();
+    const isControlled = value !== void 0;
+    const [internalValue, setInternalValue] = React.useState(defaultValue);
+    const innerRef = React.useRef(null);
+    React.useImperativeHandle(
+      ref,
+      () => innerRef.current,
+      []
+    );
+    const currentValue = isControlled ? value : internalValue;
+    const hasValue = currentValue !== void 0 && currentValue !== null && String(currentValue).length > 0;
+    const isPassword = type === "password";
+    const [showPassword, setShowPassword] = React.useState(false);
+    const resolvedType = isPassword ? showPassword ? "text" : "password" : type;
+    const handleChange = (e) => {
+      if (!isControlled) {
+        setInternalValue(e.target.value);
+      }
+      onChange?.(e);
+    };
+    const handleClear = () => {
+      if (!isControlled) {
+        setInternalValue("");
+      }
+      const input = innerRef.current;
+      if (input) {
+        const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
+          window.HTMLInputElement.prototype,
+          "value"
+        )?.set;
+        nativeInputValueSetter?.call(input, "");
+        const event = new Event("input", { bubbles: true });
+        input.dispatchEvent(event);
+        input.focus();
+      }
+      onClear?.();
+    };
+    const showClearButton = clearable && hasValue && !isPassword && !disabled;
+    const showPasswordToggle = isPassword && !disabled;
+    const trailingSlots = [
+      showClearButton ? 1 : 0,
+      showPasswordToggle ? 1 : 0,
+      trailingIcon ? 1 : 0
+    ].reduce((a, b) => a + b, 0);
+    const inputPaddingEnd = trailingSlots >= 2 ? "pe-14" : trailingSlots === 1 ? "pe-8" : void 0;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col gap-1.5", "data-slot": "input-root", children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "label",
+        {
+          htmlFor: inputId,
+          className: cn(
+            "text-sm font-medium text-foreground",
+            disabled && "text-muted-foreground"
+          ),
+          children: label
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "div",
+        {
+          "data-slot": "input-wrapper",
+          className: cn(
+            inputVariants({ variant, inputSize }),
+            "relative flex items-center gap-2",
+            disabled && "cursor-not-allowed opacity-50",
+            className
+          ),
+          children: [
+            leadingIcon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "shrink-0 text-muted-foreground", children: leadingIcon }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "input",
+              {
+                id: inputId,
+                type: resolvedType,
+                disabled,
+                className: cn(
+                  "flex-1 min-w-0 bg-transparent outline-none text-inherit placeholder:text-muted-foreground disabled:cursor-not-allowed",
+                  inputPaddingEnd
+                ),
+                ref: innerRef,
+                value: isControlled ? value : internalValue,
+                defaultValue: isControlled ? void 0 : void 0,
+                onChange: handleChange,
+                ...props
+              }
+            ),
+            (showClearButton || showPasswordToggle) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+              "span",
+              {
+                className: "pointer-events-none absolute end-2 top-1/2 -translate-y-1/2 flex items-center gap-1",
+                children: [
+                  showClearButton && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    "button",
+                    {
+                      type: "button",
+                      "aria-label": "Clear",
+                      onClick: handleClear,
+                      tabIndex: -1,
+                      className: "pointer-events-auto inline-flex size-4 items-center justify-center rounded-sm text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--hc-primary-500)] focus-visible:ring-offset-1 focus-visible:ring-offset-background",
+                      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.X, { className: "size-4", "aria-hidden": "true" })
+                    }
+                  ),
+                  showPasswordToggle && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    "button",
+                    {
+                      type: "button",
+                      "aria-label": showPassword ? "Hide password" : "Show password",
+                      onClick: () => setShowPassword((s) => !s),
+                      tabIndex: -1,
+                      className: "pointer-events-auto inline-flex size-4 items-center justify-center rounded-sm text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--hc-primary-500)] focus-visible:ring-offset-1 focus-visible:ring-offset-background",
+                      children: showPassword ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.EyeOff, { className: "size-4", "aria-hidden": "true" }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Eye, { className: "size-4", "aria-hidden": "true" })
+                    }
+                  )
+                ]
+              }
+            ),
+            trailingIcon && !showClearButton && !showPasswordToggle && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "shrink-0 text-muted-foreground", children: trailingIcon })
+          ]
+        }
+      ),
+      hint && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "p",
+        {
+          className: cn(
+            "text-xs",
+            variant === "default" && "text-muted-foreground",
+            variant === "error" && "text-destructive",
+            variant === "success" && "text-success"
+          ),
+          children: hint
+        }
+      )
+    ] });
+  }
+);
+Input.displayName = "Input";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Input,
+  inputVariants
+});
+//# sourceMappingURL=input.cjs.map

package/dist/components/input.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/input.tsx","../../src/lib/utils.ts"],"sourcesContent":["import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Eye, EyeOff, X } from \"lucide-react\"\nimport { cn } from \"../lib/utils\"\n\nconst inputVariants = cva(\n  \"flex w-full rounded-md border bg-background transition-[color,border-color,box-shadow] duration-150 file:border-0 file:bg-transparent file:font-medium file:text-foreground placeholder:text-muted-foreground focus-within:outline-none disabled:cursor-not-allowed disabled:opacity-50\",\n  {\n    variants: {\n      variant: {\n        default:\n          \"border-input hover:border-muted-foreground focus-within:border-[var(--hc-primary-500)] focus-within:ring-[3px] focus-within:ring-[color-mix(in_srgb,var(--hc-primary-500)_22%,transparent)]\",\n        error:\n          \"border-[var(--hc-color-destructive)] focus-within:border-[var(--hc-color-destructive)] focus-within:ring-[3px] focus-within:ring-[color-mix(in_srgb,var(--hc-color-destructive)_22%,transparent)]\",\n        success:\n          \"border-[var(--hc-color-success)] focus-within:border-[var(--hc-color-success)] focus-within:ring-[3px] focus-within:ring-[color-mix(in_srgb,var(--hc-color-success)_22%,transparent)]\",\n      },\n      inputSize: {\n        default: \"h-10 px-3 py-2 text-sm\",\n        sm: \"h-8 px-2.5 py-1.5 text-xs\",\n        lg: \"h-12 px-4 py-3 text-base\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      inputSize: \"default\",\n    },\n  }\n)\n\nexport interface InputProps\n  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, \"size\">,\n    VariantProps<typeof inputVariants> {\n  label?: string\n  hint?: string\n  leadingIcon?: React.ReactNode\n  trailingIcon?: React.ReactNode\n  clearable?: boolean\n  onClear?: () => void\n}\n\nconst Input = React.forwardRef<HTMLInputElement, InputProps>(\n  (\n    {\n      className,\n      type,\n      label,\n      hint,\n      variant = \"default\",\n      inputSize = \"default\",\n      leadingIcon,\n      trailingIcon,\n      clearable,\n      onClear,\n      disabled,\n      id,\n      value,\n      defaultValue,\n      onChange,\n      ...props\n    },\n    ref\n  ) => {\n    const inputId = id || React.useId()\n    const isControlled = value !== undefined\n    const [internalValue, setInternalValue] = React.useState<\n      string | number | readonly string[] | undefined\n    >(defaultValue)\n    const innerRef = React.useRef<HTMLInputElement | null>(null)\n\n    React.useImperativeHandle(\n      ref,\n      () => innerRef.current as HTMLInputElement,\n      []\n    )\n\n    const currentValue = isControlled ? value : internalValue\n    const hasValue =\n      currentValue !== undefined &&\n      currentValue !== null &&\n      String(currentValue).length > 0\n\n    const isPassword = type === \"password\"\n    const [showPassword, setShowPassword] = React.useState(false)\n    const resolvedType = isPassword ? (showPassword ? \"text\" : \"password\") : type\n\n    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n      if (!isControlled) {\n        setInternalValue(e.target.value)\n      }\n      onChange?.(e)\n    }\n\n    const handleClear = () => {\n      if (!isControlled) {\n        setInternalValue(\"\")\n      }\n      // Fire a synthetic input event so consumers relying on onChange receive it.\n      const input = innerRef.current\n      if (input) {\n        const nativeInputValueSetter = Object.getOwnPropertyDescriptor(\n          window.HTMLInputElement.prototype,\n          \"value\"\n        )?.set\n        nativeInputValueSetter?.call(input, \"\")\n        const event = new Event(\"input\", { bubbles: true })\n        input.dispatchEvent(event)\n        input.focus()\n      }\n      onClear?.()\n    }\n\n    const showClearButton = clearable && hasValue && !isPassword && !disabled\n    const showPasswordToggle = isPassword && !disabled\n\n    const trailingSlots = [\n      showClearButton ? 1 : 0,\n      showPasswordToggle ? 1 : 0,\n      trailingIcon ? 1 : 0,\n    ].reduce((a, b) => a + b, 0)\n\n    const inputPaddingEnd =\n      trailingSlots >= 2 ? \"pe-14\" : trailingSlots === 1 ? \"pe-8\" : undefined\n\n    return (\n      <div className=\"flex flex-col gap-1.5\" data-slot=\"input-root\">\n        {label && (\n          <label\n            htmlFor={inputId}\n            className={cn(\n              \"text-sm font-medium text-foreground\",\n              disabled && \"text-muted-foreground\"\n            )}\n          >\n            {label}\n          </label>\n        )}\n        <div\n          data-slot=\"input-wrapper\"\n          className={cn(\n            inputVariants({ variant, inputSize }),\n            \"relative flex items-center gap-2\",\n            disabled && \"cursor-not-allowed opacity-50\",\n            className\n          )}\n        >\n          {leadingIcon && (\n            <span className=\"shrink-0 text-muted-foreground\">\n              {leadingIcon}\n            </span>\n          )}\n          <input\n            id={inputId}\n            type={resolvedType}\n            disabled={disabled}\n            className={cn(\n              \"flex-1 min-w-0 bg-transparent outline-none text-inherit placeholder:text-muted-foreground disabled:cursor-not-allowed\",\n              inputPaddingEnd\n            )}\n            ref={innerRef}\n            value={isControlled ? value : internalValue}\n            defaultValue={isControlled ? undefined : undefined}\n            onChange={handleChange}\n            {...props}\n          />\n          {(showClearButton || showPasswordToggle) && (\n            <span\n              className=\"pointer-events-none absolute end-2 top-1/2 -translate-y-1/2 flex items-center gap-1\"\n            >\n              {showClearButton && (\n                <button\n                  type=\"button\"\n                  aria-label=\"Clear\"\n                  onClick={handleClear}\n                  tabIndex={-1}\n                  className=\"pointer-events-auto inline-flex size-4 items-center justify-center rounded-sm text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--hc-primary-500)] focus-visible:ring-offset-1 focus-visible:ring-offset-background\"\n                >\n                  <X className=\"size-4\" aria-hidden=\"true\" />\n                </button>\n              )}\n              {showPasswordToggle && (\n                <button\n                  type=\"button\"\n                  aria-label={showPassword ? \"Hide password\" : \"Show password\"}\n                  onClick={() => setShowPassword((s) => !s)}\n                  tabIndex={-1}\n                  className=\"pointer-events-auto inline-flex size-4 items-center justify-center rounded-sm text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--hc-primary-500)] focus-visible:ring-offset-1 focus-visible:ring-offset-background\"\n                >\n                  {showPassword ? (\n                    <EyeOff className=\"size-4\" aria-hidden=\"true\" />\n                  ) : (\n                    <Eye className=\"size-4\" aria-hidden=\"true\" />\n                  )}\n                </button>\n              )}\n            </span>\n          )}\n          {trailingIcon && !showClearButton && !showPasswordToggle && (\n            <span className=\"shrink-0 text-muted-foreground\">\n              {trailingIcon}\n            </span>\n          )}\n        </div>\n        {hint && (\n          <p\n            className={cn(\n              \"text-xs\",\n              variant === \"default\" && \"text-muted-foreground\",\n              variant === \"error\" && \"text-destructive\",\n              variant === \"success\" && \"text-success\"\n            )}\n          >\n            {hint}\n          </p>\n        )}\n      </div>\n    )\n  }\n)\nInput.displayName = \"Input\"\n\nexport { Input, inputVariants }\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"],"mappings":"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","names":[]}

package/dist/components/input.d.cts

@@ -0,0 +1,19 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import { VariantProps } from 'class-variance-authority';
+
+declare const inputVariants: (props?: ({
+    variant?: "default" | "success" | "error" | null | undefined;
+    inputSize?: "default" | "sm" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size">, VariantProps<typeof inputVariants> {
+    label?: string;
+    hint?: string;
+    leadingIcon?: React.ReactNode;
+    trailingIcon?: React.ReactNode;
+    clearable?: boolean;
+    onClear?: () => void;
+}
+declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+
+export { Input, type InputProps, inputVariants };

package/dist/components/input.d.ts

@@ -0,0 +1,19 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import { VariantProps } from 'class-variance-authority';
+
+declare const inputVariants: (props?: ({
+    variant?: "default" | "success" | "error" | null | undefined;
+    inputSize?: "default" | "sm" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size">, VariantProps<typeof inputVariants> {
+    label?: string;
+    hint?: string;
+    leadingIcon?: React.ReactNode;
+    trailingIcon?: React.ReactNode;
+    clearable?: boolean;
+    onClear?: () => void;
+}
+declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+
+export { Input, type InputProps, inputVariants };

package/dist/components/input.js

@@ -0,0 +1,195 @@
+// src/components/input.tsx
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { Eye, EyeOff, X } from "lucide-react";
+
+// src/lib/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/components/input.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var inputVariants = cva(
+  "flex w-full rounded-md border bg-background transition-[color,border-color,box-shadow] duration-150 file:border-0 file:bg-transparent file:font-medium file:text-foreground placeholder:text-muted-foreground focus-within:outline-none disabled:cursor-not-allowed disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "border-input hover:border-muted-foreground focus-within:border-[var(--hc-primary-500)] focus-within:ring-[3px] focus-within:ring-[color-mix(in_srgb,var(--hc-primary-500)_22%,transparent)]",
+        error: "border-[var(--hc-color-destructive)] focus-within:border-[var(--hc-color-destructive)] focus-within:ring-[3px] focus-within:ring-[color-mix(in_srgb,var(--hc-color-destructive)_22%,transparent)]",
+        success: "border-[var(--hc-color-success)] focus-within:border-[var(--hc-color-success)] focus-within:ring-[3px] focus-within:ring-[color-mix(in_srgb,var(--hc-color-success)_22%,transparent)]"
+      },
+      inputSize: {
+        default: "h-10 px-3 py-2 text-sm",
+        sm: "h-8 px-2.5 py-1.5 text-xs",
+        lg: "h-12 px-4 py-3 text-base"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      inputSize: "default"
+    }
+  }
+);
+var Input = React.forwardRef(
+  ({
+    className,
+    type,
+    label,
+    hint,
+    variant = "default",
+    inputSize = "default",
+    leadingIcon,
+    trailingIcon,
+    clearable,
+    onClear,
+    disabled,
+    id,
+    value,
+    defaultValue,
+    onChange,
+    ...props
+  }, ref) => {
+    const inputId = id || React.useId();
+    const isControlled = value !== void 0;
+    const [internalValue, setInternalValue] = React.useState(defaultValue);
+    const innerRef = React.useRef(null);
+    React.useImperativeHandle(
+      ref,
+      () => innerRef.current,
+      []
+    );
+    const currentValue = isControlled ? value : internalValue;
+    const hasValue = currentValue !== void 0 && currentValue !== null && String(currentValue).length > 0;
+    const isPassword = type === "password";
+    const [showPassword, setShowPassword] = React.useState(false);
+    const resolvedType = isPassword ? showPassword ? "text" : "password" : type;
+    const handleChange = (e) => {
+      if (!isControlled) {
+        setInternalValue(e.target.value);
+      }
+      onChange?.(e);
+    };
+    const handleClear = () => {
+      if (!isControlled) {
+        setInternalValue("");
+      }
+      const input = innerRef.current;
+      if (input) {
+        const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
+          window.HTMLInputElement.prototype,
+          "value"
+        )?.set;
+        nativeInputValueSetter?.call(input, "");
+        const event = new Event("input", { bubbles: true });
+        input.dispatchEvent(event);
+        input.focus();
+      }
+      onClear?.();
+    };
+    const showClearButton = clearable && hasValue && !isPassword && !disabled;
+    const showPasswordToggle = isPassword && !disabled;
+    const trailingSlots = [
+      showClearButton ? 1 : 0,
+      showPasswordToggle ? 1 : 0,
+      trailingIcon ? 1 : 0
+    ].reduce((a, b) => a + b, 0);
+    const inputPaddingEnd = trailingSlots >= 2 ? "pe-14" : trailingSlots === 1 ? "pe-8" : void 0;
+    return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", "data-slot": "input-root", children: [
+      label && /* @__PURE__ */ jsx(
+        "label",
+        {
+          htmlFor: inputId,
+          className: cn(
+            "text-sm font-medium text-foreground",
+            disabled && "text-muted-foreground"
+          ),
+          children: label
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          "data-slot": "input-wrapper",
+          className: cn(
+            inputVariants({ variant, inputSize }),
+            "relative flex items-center gap-2",
+            disabled && "cursor-not-allowed opacity-50",
+            className
+          ),
+          children: [
+            leadingIcon && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-muted-foreground", children: leadingIcon }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                id: inputId,
+                type: resolvedType,
+                disabled,
+                className: cn(
+                  "flex-1 min-w-0 bg-transparent outline-none text-inherit placeholder:text-muted-foreground disabled:cursor-not-allowed",
+                  inputPaddingEnd
+                ),
+                ref: innerRef,
+                value: isControlled ? value : internalValue,
+                defaultValue: isControlled ? void 0 : void 0,
+                onChange: handleChange,
+                ...props
+              }
+            ),
+            (showClearButton || showPasswordToggle) && /* @__PURE__ */ jsxs(
+              "span",
+              {
+                className: "pointer-events-none absolute end-2 top-1/2 -translate-y-1/2 flex items-center gap-1",
+                children: [
+                  showClearButton && /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      "aria-label": "Clear",
+                      onClick: handleClear,
+                      tabIndex: -1,
+                      className: "pointer-events-auto inline-flex size-4 items-center justify-center rounded-sm text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--hc-primary-500)] focus-visible:ring-offset-1 focus-visible:ring-offset-background",
+                      children: /* @__PURE__ */ jsx(X, { className: "size-4", "aria-hidden": "true" })
+                    }
+                  ),
+                  showPasswordToggle && /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      "aria-label": showPassword ? "Hide password" : "Show password",
+                      onClick: () => setShowPassword((s) => !s),
+                      tabIndex: -1,
+                      className: "pointer-events-auto inline-flex size-4 items-center justify-center rounded-sm text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--hc-primary-500)] focus-visible:ring-offset-1 focus-visible:ring-offset-background",
+                      children: showPassword ? /* @__PURE__ */ jsx(EyeOff, { className: "size-4", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(Eye, { className: "size-4", "aria-hidden": "true" })
+                    }
+                  )
+                ]
+              }
+            ),
+            trailingIcon && !showClearButton && !showPasswordToggle && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-muted-foreground", children: trailingIcon })
+          ]
+        }
+      ),
+      hint && /* @__PURE__ */ jsx(
+        "p",
+        {
+          className: cn(
+            "text-xs",
+            variant === "default" && "text-muted-foreground",
+            variant === "error" && "text-destructive",
+            variant === "success" && "text-success"
+          ),
+          children: hint
+        }
+      )
+    ] });
+  }
+);
+Input.displayName = "Input";
+export {
+  Input,
+  inputVariants
+};
+//# sourceMappingURL=input.js.map

package/dist/components/input.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/input.tsx","../../src/lib/utils.ts"],"sourcesContent":["import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Eye, EyeOff, X } from \"lucide-react\"\nimport { cn } from \"../lib/utils\"\n\nconst inputVariants = cva(\n  \"flex w-full rounded-md border bg-background transition-[color,border-color,box-shadow] duration-150 file:border-0 file:bg-transparent file:font-medium file:text-foreground placeholder:text-muted-foreground focus-within:outline-none disabled:cursor-not-allowed disabled:opacity-50\",\n  {\n    variants: {\n      variant: {\n        default:\n          \"border-input hover:border-muted-foreground focus-within:border-[var(--hc-primary-500)] focus-within:ring-[3px] focus-within:ring-[color-mix(in_srgb,var(--hc-primary-500)_22%,transparent)]\",\n        error:\n          \"border-[var(--hc-color-destructive)] focus-within:border-[var(--hc-color-destructive)] focus-within:ring-[3px] focus-within:ring-[color-mix(in_srgb,var(--hc-color-destructive)_22%,transparent)]\",\n        success:\n          \"border-[var(--hc-color-success)] focus-within:border-[var(--hc-color-success)] focus-within:ring-[3px] focus-within:ring-[color-mix(in_srgb,var(--hc-color-success)_22%,transparent)]\",\n      },\n      inputSize: {\n        default: \"h-10 px-3 py-2 text-sm\",\n        sm: \"h-8 px-2.5 py-1.5 text-xs\",\n        lg: \"h-12 px-4 py-3 text-base\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      inputSize: \"default\",\n    },\n  }\n)\n\nexport interface InputProps\n  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, \"size\">,\n    VariantProps<typeof inputVariants> {\n  label?: string\n  hint?: string\n  leadingIcon?: React.ReactNode\n  trailingIcon?: React.ReactNode\n  clearable?: boolean\n  onClear?: () => void\n}\n\nconst Input = React.forwardRef<HTMLInputElement, InputProps>(\n  (\n    {\n      className,\n      type,\n      label,\n      hint,\n      variant = \"default\",\n      inputSize = \"default\",\n      leadingIcon,\n      trailingIcon,\n      clearable,\n      onClear,\n      disabled,\n      id,\n      value,\n      defaultValue,\n      onChange,\n      ...props\n    },\n    ref\n  ) => {\n    const inputId = id || React.useId()\n    const isControlled = value !== undefined\n    const [internalValue, setInternalValue] = React.useState<\n      string | number | readonly string[] | undefined\n    >(defaultValue)\n    const innerRef = React.useRef<HTMLInputElement | null>(null)\n\n    React.useImperativeHandle(\n      ref,\n      () => innerRef.current as HTMLInputElement,\n      []\n    )\n\n    const currentValue = isControlled ? value : internalValue\n    const hasValue =\n      currentValue !== undefined &&\n      currentValue !== null &&\n      String(currentValue).length > 0\n\n    const isPassword = type === \"password\"\n    const [showPassword, setShowPassword] = React.useState(false)\n    const resolvedType = isPassword ? (showPassword ? \"text\" : \"password\") : type\n\n    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n      if (!isControlled) {\n        setInternalValue(e.target.value)\n      }\n      onChange?.(e)\n    }\n\n    const handleClear = () => {\n      if (!isControlled) {\n        setInternalValue(\"\")\n      }\n      // Fire a synthetic input event so consumers relying on onChange receive it.\n      const input = innerRef.current\n      if (input) {\n        const nativeInputValueSetter = Object.getOwnPropertyDescriptor(\n          window.HTMLInputElement.prototype,\n          \"value\"\n        )?.set\n        nativeInputValueSetter?.call(input, \"\")\n        const event = new Event(\"input\", { bubbles: true })\n        input.dispatchEvent(event)\n        input.focus()\n      }\n      onClear?.()\n    }\n\n    const showClearButton = clearable && hasValue && !isPassword && !disabled\n    const showPasswordToggle = isPassword && !disabled\n\n    const trailingSlots = [\n      showClearButton ? 1 : 0,\n      showPasswordToggle ? 1 : 0,\n      trailingIcon ? 1 : 0,\n    ].reduce((a, b) => a + b, 0)\n\n    const inputPaddingEnd =\n      trailingSlots >= 2 ? \"pe-14\" : trailingSlots === 1 ? \"pe-8\" : undefined\n\n    return (\n      <div className=\"flex flex-col gap-1.5\" data-slot=\"input-root\">\n        {label && (\n          <label\n            htmlFor={inputId}\n            className={cn(\n              \"text-sm font-medium text-foreground\",\n              disabled && \"text-muted-foreground\"\n            )}\n          >\n            {label}\n          </label>\n        )}\n        <div\n          data-slot=\"input-wrapper\"\n          className={cn(\n            inputVariants({ variant, inputSize }),\n            \"relative flex items-center gap-2\",\n            disabled && \"cursor-not-allowed opacity-50\",\n            className\n          )}\n        >\n          {leadingIcon && (\n            <span className=\"shrink-0 text-muted-foreground\">\n              {leadingIcon}\n            </span>\n          )}\n          <input\n            id={inputId}\n            type={resolvedType}\n            disabled={disabled}\n            className={cn(\n              \"flex-1 min-w-0 bg-transparent outline-none text-inherit placeholder:text-muted-foreground disabled:cursor-not-allowed\",\n              inputPaddingEnd\n            )}\n            ref={innerRef}\n            value={isControlled ? value : internalValue}\n            defaultValue={isControlled ? undefined : undefined}\n            onChange={handleChange}\n            {...props}\n          />\n          {(showClearButton || showPasswordToggle) && (\n            <span\n              className=\"pointer-events-none absolute end-2 top-1/2 -translate-y-1/2 flex items-center gap-1\"\n            >\n              {showClearButton && (\n                <button\n                  type=\"button\"\n                  aria-label=\"Clear\"\n                  onClick={handleClear}\n                  tabIndex={-1}\n                  className=\"pointer-events-auto inline-flex size-4 items-center justify-center rounded-sm text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--hc-primary-500)] focus-visible:ring-offset-1 focus-visible:ring-offset-background\"\n                >\n                  <X className=\"size-4\" aria-hidden=\"true\" />\n                </button>\n              )}\n              {showPasswordToggle && (\n                <button\n                  type=\"button\"\n                  aria-label={showPassword ? \"Hide password\" : \"Show password\"}\n                  onClick={() => setShowPassword((s) => !s)}\n                  tabIndex={-1}\n                  className=\"pointer-events-auto inline-flex size-4 items-center justify-center rounded-sm text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--hc-primary-500)] focus-visible:ring-offset-1 focus-visible:ring-offset-background\"\n                >\n                  {showPassword ? (\n                    <EyeOff className=\"size-4\" aria-hidden=\"true\" />\n                  ) : (\n                    <Eye className=\"size-4\" aria-hidden=\"true\" />\n                  )}\n                </button>\n              )}\n            </span>\n          )}\n          {trailingIcon && !showClearButton && !showPasswordToggle && (\n            <span className=\"shrink-0 text-muted-foreground\">\n              {trailingIcon}\n            </span>\n          )}\n        </div>\n        {hint && (\n          <p\n            className={cn(\n              \"text-xs\",\n              variant === \"default\" && \"text-muted-foreground\",\n              variant === \"error\" && \"text-destructive\",\n              variant === \"success\" && \"text-success\"\n            )}\n          >\n            {hint}\n          </p>\n        )}\n      </div>\n    )\n  }\n)\nInput.displayName = \"Input\"\n\nexport { Input, inputVariants }\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"],"mappings":"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","names":[]}

package/dist/components/item.cjs

@@ -0,0 +1,150 @@
+"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)
+    __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/item.tsx
+var item_exports = {};
+__export(item_exports, {
+  Item: () => Item,
+  ItemActions: () => ItemActions,
+  ItemContent: () => ItemContent,
+  ItemDescription: () => ItemDescription,
+  ItemGroup: () => ItemGroup,
+  ItemMedia: () => ItemMedia,
+  ItemTitle: () => ItemTitle
+});
+module.exports = __toCommonJS(item_exports);
+var React = __toESM(require("react"), 1);
+
+// 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/item.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var Item = React.forwardRef(
+  ({ className, clickable, onClick, children, ...props }, ref) => {
+    const baseClasses = "flex items-center gap-3 px-4 py-3 rounded-md";
+    const interactiveClasses = "cursor-pointer transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--hc-primary-500)] w-full text-start";
+    if (clickable) {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "button",
+        {
+          type: "button",
+          ref,
+          onClick,
+          className: cn(baseClasses, interactiveClasses, className),
+          ...props,
+          children
+        }
+      );
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        ref,
+        onClick,
+        className: cn(baseClasses, className),
+        ...props,
+        children
+      }
+    );
+  }
+);
+Item.displayName = "Item";
+var ItemMedia = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  "div",
+  {
+    ref,
+    className: cn("shrink-0 flex items-center", className),
+    ...props
+  }
+));
+ItemMedia.displayName = "ItemMedia";
+var ItemContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  "div",
+  {
+    ref,
+    className: cn("flex-1 min-w-0 flex flex-col gap-0.5", className),
+    ...props
+  }
+));
+ItemContent.displayName = "ItemContent";
+var ItemTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  "p",
+  {
+    ref,
+    className: cn("text-sm font-medium text-foreground truncate", className),
+    ...props
+  }
+));
+ItemTitle.displayName = "ItemTitle";
+var ItemDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  "p",
+  {
+    ref,
+    className: cn("text-xs text-muted-foreground truncate", className),
+    ...props
+  }
+));
+ItemDescription.displayName = "ItemDescription";
+var ItemActions = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  "div",
+  {
+    ref,
+    className: cn("shrink-0 flex items-center gap-1 ms-auto", className),
+    ...props
+  }
+));
+ItemActions.displayName = "ItemActions";
+var ItemGroup = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  "div",
+  {
+    ref,
+    className: cn(
+      "flex flex-col divide-y divide-[var(--hc-color-border-subtle)] rounded-md border border-[var(--hc-color-border-subtle)] bg-background overflow-hidden",
+      className
+    ),
+    ...props
+  }
+));
+ItemGroup.displayName = "ItemGroup";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemDescription,
+  ItemGroup,
+  ItemMedia,
+  ItemTitle
+});
+//# sourceMappingURL=item.cjs.map