@utk09/finra-ui 0.0.3 → 0.0.4

package/README.md

@@ -70,10 +70,13 @@ import {
   SwitchBase,
   RadioButtonBase,
   SliderBase,
+  FormFieldBase,
+  PillInputBase,
+  FileDropZoneBase,
 } from "@utk09/finra-ui/unstyled";
 ```
 
-Available: `ButtonBase`, `IconButtonBase`, `InputBase`, `TextareaBase`, `NumberInputBase`, `CheckboxBase`, `SwitchBase`, `RadioButtonBase`, `SliderBase`.
+Available: `ButtonBase`, `IconButtonBase`, `InputBase`, `TextareaBase`, `NumberInputBase`, `CheckboxBase`, `SwitchBase`, `RadioButtonBase`, `SliderBase`, `FormFieldBase`, `PillInputBase`, `FileDropZoneBase`.
 
 ## Features
 

package/dist/unstyled/FileDropZone/FileDropZone.d.ts

@@ -0,0 +1,14 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export interface FileDropZoneBaseProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
+    /** Called with selected files. */
+    onChange?: (files: File[]) => void;
+    /** Accepted file types (e.g. ".pdf,.csv" or "image/*"). */
+    accept?: string;
+    /** Allow multiple file selection. */
+    multiple?: boolean;
+    /** Disable the component. */
+    disabled?: boolean;
+    /** Custom content inside the drop zone. */
+    children?: ReactNode;
+}
+export declare const FileDropZoneBase: import('react').ForwardRefExoticComponent<FileDropZoneBaseProps & import('react').RefAttributes<HTMLInputElement>>;

package/dist/unstyled/FormField/FormField.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode, HTMLAttributes } from 'react';
+export type ValidationStatus = "error" | "warning" | "success";
+export interface FormFieldBaseProps extends HTMLAttributes<HTMLDivElement> {
+    label: string;
+    helperText?: string;
+    errorMessage?: string;
+    validationStatus?: ValidationStatus;
+    required?: boolean;
+    disabled?: boolean;
+    /** Explicit id for the input element. Auto-generated if omitted. */
+    htmlFor?: string;
+    children: ReactNode;
+}
+export declare const FormFieldBase: import('react').ForwardRefExoticComponent<FormFieldBaseProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/unstyled/PillInput/PillInput.d.ts

@@ -0,0 +1,16 @@
+import { HTMLAttributes } from 'react';
+export interface PillInputBaseProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
+    /** Current list of pills (controlled). */
+    values?: string[];
+    /** Called when the pill list changes. */
+    onChange?: (values: string[]) => void;
+    /** Placeholder shown when no pills and input is empty. */
+    placeholder?: string;
+    /** Disable the entire component. */
+    disabled?: boolean;
+    /** Maximum number of pills allowed. */
+    maxPills?: number;
+    /** Characters that trigger pill creation (default: Enter). */
+    delimiters?: string[];
+}
+export declare const PillInputBase: import('react').ForwardRefExoticComponent<PillInputBaseProps & import('react').RefAttributes<HTMLInputElement>>;

package/dist/unstyled.d.ts

@@ -16,3 +16,9 @@ export { RadioButtonBase } from './unstyled/RadioButton/RadioButton';
 export type { RadioButtonBaseProps } from './unstyled/RadioButton/RadioButton';
 export { SliderBase } from './unstyled/Slider/Slider';
 export type { SliderBaseProps } from './unstyled/Slider/Slider';
+export { FormFieldBase } from './unstyled/FormField/FormField';
+export type { FormFieldBaseProps } from './unstyled/FormField/FormField';
+export { PillInputBase } from './unstyled/PillInput/PillInput';
+export type { PillInputBaseProps } from './unstyled/PillInput/PillInput';
+export { FileDropZoneBase } from './unstyled/FileDropZone/FileDropZone';
+export type { FileDropZoneBaseProps } from './unstyled/FileDropZone/FileDropZone';

package/dist/unstyled.js

@@ -1,28 +1,230 @@
-import { b as s } from "./Slider-BXQjDfhb.js";
-import { B as d, C, I as x, R as I, a as N, S as b } from "./Slider-BXQjDfhb.js";
-import { jsx as o } from "react/jsx-runtime";
-import { forwardRef as r } from "react";
-const n = r(
-  ({ asChild: a = !1, ...e }, t) => /* @__PURE__ */ o(a ? s : "input", { ref: t, ...e })
+import { b as w } from "./Slider-BXQjDfhb.js";
+import { B as L, C as M, I as Q, R as U, a as W, S as X } from "./Slider-BXQjDfhb.js";
+import { jsx as p, jsxs as k } from "react/jsx-runtime";
+import { forwardRef as C, useId as E, Children as K, isValidElement as j, cloneElement as O, useState as b, useRef as R, useCallback as i } from "react";
+const S = C(
+  ({ asChild: a = !1, ...o }, e) => /* @__PURE__ */ p(a ? w : "input", { ref: e, ...o })
 );
-n.displayName = "InputBase";
-const m = r(
-  ({ asChild: a = !1, ...e }, t) => /* @__PURE__ */ o(a ? s : "textarea", { ref: t, ...e })
+S.displayName = "InputBase";
+const V = C(
+  ({ asChild: a = !1, ...o }, e) => /* @__PURE__ */ p(a ? w : "textarea", { ref: e, ...o })
 );
-m.displayName = "TextareaBase";
-const B = r(
-  ({ asChild: a = !1, ...e }, t) => /* @__PURE__ */ o(a ? s : "input", { ref: t, inputMode: "decimal", ...e })
+V.displayName = "TextareaBase";
+const $ = C(
+  ({ asChild: a = !1, ...o }, e) => /* @__PURE__ */ p(a ? w : "input", { ref: e, inputMode: "decimal", ...o })
 );
-B.displayName = "NumberInputBase";
+$.displayName = "NumberInputBase";
+const P = C(
+  ({
+    label: a,
+    helperText: o,
+    errorMessage: e,
+    validationStatus: n,
+    required: d,
+    disabled: D,
+    htmlFor: m,
+    children: g,
+    ...h
+  }, y) => {
+    const s = E(), c = m ?? s, u = `${c}-helper`, l = `${c}-error`, f = n === "error" && e, v = [f ? l : void 0, o ? u : void 0].filter(Boolean).join(" ") || void 0, B = K.map(g, (t) => j(t) ? O(t, {
+      id: c,
+      "aria-describedby": v,
+      "aria-invalid": n === "error" ? !0 : void 0,
+      disabled: D || void 0
+    }) : t);
+    return /* @__PURE__ */ k("div", { ref: y, ...h, children: [
+      /* @__PURE__ */ k("label", { htmlFor: c, children: [
+        a,
+        d ? " *" : null
+      ] }),
+      B,
+      f ? /* @__PURE__ */ p("p", { id: l, role: "alert", children: e }) : null,
+      o ? /* @__PURE__ */ p("p", { id: u, children: o }) : null
+    ] });
+  }
+);
+P.displayName = "FormFieldBase";
+function Z(...a) {
+  return (o) => {
+    for (const e of a)
+      typeof e == "function" ? e(o) : e && typeof e == "object" && (e.current = o);
+  };
+}
+const A = C(
+  ({
+    values: a,
+    onChange: o,
+    placeholder: e,
+    disabled: n,
+    maxPills: d,
+    delimiters: D = [],
+    ...m
+  }, g) => {
+    const [h, y] = b([]), [s, c] = b(""), u = R(null), l = a ?? h, f = i(
+      (r) => {
+        a || y(r), o?.(r);
+      },
+      [a, o]
+    ), v = i(
+      (r) => {
+        const I = r.trim();
+        I && (l.includes(I) || d != null && l.length >= d || (f([...l, I]), c("")));
+      },
+      [l, d, f]
+    ), B = i(
+      (r) => {
+        f(l.filter((I, N) => N !== r)), u.current?.focus();
+      },
+      [l, f]
+    ), t = i(
+      (r) => {
+        if (r.key === "Enter") {
+          r.preventDefault(), v(s);
+          return;
+        }
+        if (r.key === "Backspace" && s === "" && l.length > 0) {
+          B(l.length - 1);
+          return;
+        }
+        D.includes(r.key) && (r.preventDefault(), v(s));
+      },
+      [s, l, D, v, B]
+    ), x = i(() => {
+      n || u.current?.focus();
+    }, [n]), F = i(
+      (r) => {
+        !n && (r.key === "Enter" || r.key === " ") && u.current?.focus();
+      },
+      [n]
+    );
+    return /* @__PURE__ */ k(
+      "div",
+      {
+        role: "toolbar",
+        onClick: x,
+        onKeyDown: F,
+        ...m,
+        children: [
+          l.map((r) => /* @__PURE__ */ k("span", { children: [
+            r,
+            n ? null : /* @__PURE__ */ p(
+              "button",
+              {
+                type: "button",
+                onClick: (I) => {
+                  I.stopPropagation(), B(l.indexOf(r));
+                },
+                "aria-label": `Remove ${r}`,
+                tabIndex: -1,
+                children: "×"
+              }
+            )
+          ] }, r)),
+          /* @__PURE__ */ p(
+            "input",
+            {
+              ref: Z(g, u),
+              type: "text",
+              value: s,
+              onChange: (r) => c(r.target.value),
+              onKeyDown: t,
+              placeholder: l.length === 0 ? e : void 0,
+              disabled: n,
+              "aria-label": m["aria-label"],
+              "aria-labelledby": m["aria-labelledby"]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+A.displayName = "PillInputBase";
+function T(...a) {
+  return (o) => {
+    for (const e of a)
+      typeof e == "function" ? e(o) : e && typeof e == "object" && (e.current = o);
+  };
+}
+const _ = C(
+  ({ onChange: a, accept: o, multiple: e, disabled: n, children: d, ...D }, m) => {
+    const [g, h] = b(!1), y = R(null), s = i(
+      (t) => {
+        !t || t.length === 0 || a?.(Array.from(t));
+      },
+      [a]
+    ), c = i(
+      (t) => {
+        t.preventDefault(), n || h(!0);
+      },
+      [n]
+    ), u = i((t) => {
+      t.preventDefault(), h(!1);
+    }, []), l = i(
+      (t) => {
+        t.preventDefault(), h(!1), n || s(t.dataTransfer.files);
+      },
+      [n, s]
+    ), f = i(
+      (t) => {
+        s(t.target.files), t.target.value = "";
+      },
+      [s]
+    ), v = i(() => {
+      n || y.current?.click();
+    }, [n]), B = i(
+      (t) => {
+        !n && (t.key === "Enter" || t.key === " ") && (t.preventDefault(), y.current?.click());
+      },
+      [n]
+    );
+    return /* @__PURE__ */ k(
+      "div",
+      {
+        role: "button",
+        tabIndex: n ? -1 : 0,
+        "aria-disabled": n || void 0,
+        "data-drag-over": g || void 0,
+        onClick: v,
+        onKeyDown: B,
+        onDragOver: c,
+        onDragLeave: u,
+        onDrop: l,
+        ...D,
+        children: [
+          /* @__PURE__ */ p(
+            "input",
+            {
+              ref: T(m, y),
+              type: "file",
+              style: { display: "none" },
+              accept: o,
+              multiple: e,
+              disabled: n,
+              onChange: f,
+              tabIndex: -1,
+              "aria-hidden": "true"
+            }
+          ),
+          d ?? /* @__PURE__ */ p("span", { children: "Drop files here or click to browse" })
+        ]
+      }
+    );
+  }
+);
+_.displayName = "FileDropZoneBase";
 export {
-  d as ButtonBase,
-  C as CheckboxBase,
-  x as IconButtonBase,
-  n as InputBase,
-  B as NumberInputBase,
-  I as RadioButtonBase,
-  N as SliderBase,
-  b as SwitchBase,
-  m as TextareaBase
+  L as ButtonBase,
+  M as CheckboxBase,
+  _ as FileDropZoneBase,
+  P as FormFieldBase,
+  Q as IconButtonBase,
+  S as InputBase,
+  $ as NumberInputBase,
+  A as PillInputBase,
+  U as RadioButtonBase,
+  W as SliderBase,
+  X as SwitchBase,
+  V as TextareaBase
 };
 //# sourceMappingURL=unstyled.js.map

package/dist/unstyled.js.map

@@ -1 +1 @@
-{"version":3,"file":"unstyled.js","sources":["../src/unstyled/Input/Input.tsx","../src/unstyled/Textarea/Textarea.tsx","../src/unstyled/NumberInput/NumberInput.tsx"],"sourcesContent":["import { forwardRef, type InputHTMLAttributes } from \"react\";\nimport { Slot } from \"../Slot\";\n\nexport interface InputBaseProps extends InputHTMLAttributes<HTMLInputElement> {\n  asChild?: boolean;\n}\n\nexport const InputBase = forwardRef<HTMLInputElement, InputBaseProps>(\n  ({ asChild = false, ...props }, ref) => {\n    const Comp = asChild ? Slot : \"input\";\n\n    return <Comp ref={ref} {...props} />;\n  },\n);\n\nInputBase.displayName = \"InputBase\";\n","import { forwardRef, type TextareaHTMLAttributes } from \"react\";\nimport { Slot } from \"../Slot\";\n\nexport interface TextareaBaseProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {\n  asChild?: boolean;\n}\n\nexport const TextareaBase = forwardRef<HTMLTextAreaElement, TextareaBaseProps>(\n  ({ asChild = false, ...props }, ref) => {\n    const Comp = asChild ? Slot : \"textarea\";\n\n    return <Comp ref={ref} {...props} />;\n  },\n);\n\nTextareaBase.displayName = \"TextareaBase\";\n","import { forwardRef, type InputHTMLAttributes } from \"react\";\nimport { Slot } from \"../Slot\";\n\nexport interface NumberInputBaseProps extends Omit<InputHTMLAttributes<HTMLInputElement>, \"type\"> {\n  asChild?: boolean;\n}\n\nexport const NumberInputBase = forwardRef<HTMLInputElement, NumberInputBaseProps>(\n  ({ asChild = false, ...props }, ref) => {\n    const Comp = asChild ? Slot : \"input\";\n\n    return <Comp ref={ref} inputMode=\"decimal\" {...props} />;\n  },\n);\n\nNumberInputBase.displayName = \"NumberInputBase\";\n"],"names":["InputBase","forwardRef","asChild","props","ref","jsx","Slot","TextareaBase","NumberInputBase"],"mappings":";;;;AAOO,MAAMA,IAAYC;AAAA,EACvB,CAAC,EAAE,SAAAC,IAAU,IAAO,GAAGC,EAAA,GAASC,MAGvB,gBAAAC,EAFMH,IAAUI,IAAO,SAEtB,EAAK,KAAAF,GAAW,GAAGD,EAAA,CAAO;AAEtC;AAEAH,EAAU,cAAc;ACRjB,MAAMO,IAAeN;AAAA,EAC1B,CAAC,EAAE,SAAAC,IAAU,IAAO,GAAGC,EAAA,GAASC,MAGvB,gBAAAC,EAFMH,IAAUI,IAAO,YAEtB,EAAK,KAAAF,GAAW,GAAGD,EAAA,CAAO;AAEtC;AAEAI,EAAa,cAAc;ACRpB,MAAMC,IAAkBP;AAAA,EAC7B,CAAC,EAAE,SAAAC,IAAU,IAAO,GAAGC,EAAA,GAASC,wBACjBF,IAAUI,IAAO,SAEtB,EAAK,KAAAF,GAAU,WAAU,WAAW,GAAGD,GAAO;AAE1D;AAEAK,EAAgB,cAAc;"}
+{"version":3,"file":"unstyled.js","sources":["../src/unstyled/Input/Input.tsx","../src/unstyled/Textarea/Textarea.tsx","../src/unstyled/NumberInput/NumberInput.tsx","../src/unstyled/FormField/FormField.tsx","../src/unstyled/PillInput/PillInput.tsx","../src/unstyled/FileDropZone/FileDropZone.tsx"],"sourcesContent":["import { forwardRef, type InputHTMLAttributes } from \"react\";\nimport { Slot } from \"../Slot\";\n\nexport interface InputBaseProps extends InputHTMLAttributes<HTMLInputElement> {\n  asChild?: boolean;\n}\n\nexport const InputBase = forwardRef<HTMLInputElement, InputBaseProps>(\n  ({ asChild = false, ...props }, ref) => {\n    const Comp = asChild ? Slot : \"input\";\n\n    return <Comp ref={ref} {...props} />;\n  },\n);\n\nInputBase.displayName = \"InputBase\";\n","import { forwardRef, type TextareaHTMLAttributes } from \"react\";\nimport { Slot } from \"../Slot\";\n\nexport interface TextareaBaseProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {\n  asChild?: boolean;\n}\n\nexport const TextareaBase = forwardRef<HTMLTextAreaElement, TextareaBaseProps>(\n  ({ asChild = false, ...props }, ref) => {\n    const Comp = asChild ? Slot : \"textarea\";\n\n    return <Comp ref={ref} {...props} />;\n  },\n);\n\nTextareaBase.displayName = \"TextareaBase\";\n","import { forwardRef, type InputHTMLAttributes } from \"react\";\nimport { Slot } from \"../Slot\";\n\nexport interface NumberInputBaseProps extends Omit<InputHTMLAttributes<HTMLInputElement>, \"type\"> {\n  asChild?: boolean;\n}\n\nexport const NumberInputBase = forwardRef<HTMLInputElement, NumberInputBaseProps>(\n  ({ asChild = false, ...props }, ref) => {\n    const Comp = asChild ? Slot : \"input\";\n\n    return <Comp ref={ref} inputMode=\"decimal\" {...props} />;\n  },\n);\n\nNumberInputBase.displayName = \"NumberInputBase\";\n","import {\n  forwardRef,\n  useId,\n  Children,\n  isValidElement,\n  cloneElement,\n  type ReactNode,\n  type HTMLAttributes,\n} from \"react\";\n\nexport type ValidationStatus = \"error\" | \"warning\" | \"success\";\n\nexport interface FormFieldBaseProps extends HTMLAttributes<HTMLDivElement> {\n  label: string;\n  helperText?: string;\n  errorMessage?: string;\n  validationStatus?: ValidationStatus;\n  required?: boolean;\n  disabled?: boolean;\n  /** Explicit id for the input element. Auto-generated if omitted. */\n  htmlFor?: string;\n  children: ReactNode;\n}\n\nexport const FormFieldBase = forwardRef<HTMLDivElement, FormFieldBaseProps>(\n  (\n    {\n      label,\n      helperText,\n      errorMessage,\n      validationStatus,\n      required,\n      disabled,\n      htmlFor,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const autoId = useId();\n    const fieldId = htmlFor ?? autoId;\n    const helperId = `${fieldId}-helper`;\n    const errorId = `${fieldId}-error`;\n\n    const showError = validationStatus === \"error\" && errorMessage;\n\n    const describedBy =\n      [showError ? errorId : undefined, helperText ? helperId : undefined]\n        .filter(Boolean)\n        .join(\" \") || undefined;\n\n    const enhancedChildren = Children.map(children, (child) => {\n      if (!isValidElement(child)) return child;\n      return cloneElement(child as React.ReactElement<Record<string, unknown>>, {\n        id: fieldId,\n        \"aria-describedby\": describedBy,\n        \"aria-invalid\": validationStatus === \"error\" ? true : undefined,\n        disabled: disabled || undefined,\n      });\n    });\n\n    return (\n      <div ref={ref} {...props}>\n        <label htmlFor={fieldId}>\n          {label}\n          {required ? \" *\" : null}\n        </label>\n\n        {enhancedChildren}\n\n        {showError ? (\n          <p id={errorId} role=\"alert\">\n            {errorMessage}\n          </p>\n        ) : null}\n\n        {helperText ? <p id={helperId}>{helperText}</p> : null}\n      </div>\n    );\n  },\n);\n\nFormFieldBase.displayName = \"FormFieldBase\";\n","import {\n  forwardRef,\n  useState,\n  useRef,\n  useCallback,\n  type KeyboardEvent,\n  type HTMLAttributes,\n  type Ref,\n} from \"react\";\n\nfunction mergeRefs<T>(...refs: (Ref<T> | undefined)[]): (value: T | null) => void {\n  return (value: T | null) => {\n    for (const ref of refs) {\n      if (typeof ref === \"function\") {\n        ref(value);\n      } else if (ref && typeof ref === \"object\") {\n        (ref as React.RefObject<T | null>).current = value;\n      }\n    }\n  };\n}\n\nexport interface PillInputBaseProps extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  /** Current list of pills (controlled). */\n  values?: string[];\n  /** Called when the pill list changes. */\n  onChange?: (values: string[]) => void;\n  /** Placeholder shown when no pills and input is empty. */\n  placeholder?: string;\n  /** Disable the entire component. */\n  disabled?: boolean;\n  /** Maximum number of pills allowed. */\n  maxPills?: number;\n  /** Characters that trigger pill creation (default: Enter). */\n  delimiters?: string[];\n}\n\nexport const PillInputBase = forwardRef<HTMLInputElement, PillInputBaseProps>(\n  (\n    {\n      values: controlledValues,\n      onChange,\n      placeholder,\n      disabled,\n      maxPills,\n      delimiters = [],\n      ...props\n    },\n    forwardedRef,\n  ) => {\n    const [internalValues, setInternalValues] = useState<string[]>([]);\n    const [inputValue, setInputValue] = useState(\"\");\n    const internalRef = useRef<HTMLInputElement>(null);\n\n    const values = controlledValues ?? internalValues;\n\n    const updateValues = useCallback(\n      (next: string[]) => {\n        if (!controlledValues) {\n          setInternalValues(next);\n        }\n        onChange?.(next);\n      },\n      [controlledValues, onChange],\n    );\n\n    const addPill = useCallback(\n      (text: string) => {\n        const trimmed = text.trim();\n        if (!trimmed) return;\n        if (values.includes(trimmed)) return;\n        if (maxPills != null && values.length >= maxPills) return;\n        updateValues([...values, trimmed]);\n        setInputValue(\"\");\n      },\n      [values, maxPills, updateValues],\n    );\n\n    const removePill = useCallback(\n      (index: number) => {\n        updateValues(values.filter((_, i) => i !== index));\n        internalRef.current?.focus();\n      },\n      [values, updateValues],\n    );\n\n    const handleKeyDown = useCallback(\n      (e: KeyboardEvent<HTMLInputElement>) => {\n        if (e.key === \"Enter\") {\n          e.preventDefault();\n          addPill(inputValue);\n          return;\n        }\n        if (e.key === \"Backspace\" && inputValue === \"\" && values.length > 0) {\n          removePill(values.length - 1);\n          return;\n        }\n        if (delimiters.includes(e.key)) {\n          e.preventDefault();\n          addPill(inputValue);\n        }\n      },\n      [inputValue, values, delimiters, addPill, removePill],\n    );\n\n    const handleContainerClick = useCallback(() => {\n      if (!disabled) {\n        internalRef.current?.focus();\n      }\n    }, [disabled]);\n\n    const handleContainerKeyDown = useCallback(\n      (e: React.KeyboardEvent<HTMLDivElement>) => {\n        if (!disabled && (e.key === \"Enter\" || e.key === \" \")) {\n          internalRef.current?.focus();\n        }\n      },\n      [disabled],\n    );\n\n    return (\n      <div\n        role=\"toolbar\"\n        onClick={handleContainerClick}\n        onKeyDown={handleContainerKeyDown}\n        {...props}>\n        {values.map((pill) => (\n          <span key={pill}>\n            {pill}\n            {!disabled ? (\n              <button\n                type=\"button\"\n                onClick={(e) => {\n                  e.stopPropagation();\n                  removePill(values.indexOf(pill));\n                }}\n                aria-label={`Remove ${pill}`}\n                tabIndex={-1}>\n                ×\n              </button>\n            ) : null}\n          </span>\n        ))}\n        <input\n          ref={mergeRefs(forwardedRef, internalRef)}\n          type=\"text\"\n          value={inputValue}\n          onChange={(e) => setInputValue(e.target.value)}\n          onKeyDown={handleKeyDown}\n          placeholder={values.length === 0 ? placeholder : undefined}\n          disabled={disabled}\n          aria-label={props[\"aria-label\"]}\n          aria-labelledby={props[\"aria-labelledby\"]}\n        />\n      </div>\n    );\n  },\n);\n\nPillInputBase.displayName = \"PillInputBase\";\n","import {\n  forwardRef,\n  useState,\n  useRef,\n  useCallback,\n  type DragEvent,\n  type ChangeEvent,\n  type HTMLAttributes,\n  type ReactNode,\n  type Ref,\n} from \"react\";\n\nfunction mergeRefs<T>(...refs: (Ref<T> | undefined)[]): (value: T | null) => void {\n  return (value: T | null) => {\n    for (const ref of refs) {\n      if (typeof ref === \"function\") {\n        ref(value);\n      } else if (ref && typeof ref === \"object\") {\n        (ref as React.RefObject<T | null>).current = value;\n      }\n    }\n  };\n}\n\nexport interface FileDropZoneBaseProps extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  /** Called with selected files. */\n  onChange?: (files: File[]) => void;\n  /** Accepted file types (e.g. \".pdf,.csv\" or \"image/*\"). */\n  accept?: string;\n  /** Allow multiple file selection. */\n  multiple?: boolean;\n  /** Disable the component. */\n  disabled?: boolean;\n  /** Custom content inside the drop zone. */\n  children?: ReactNode;\n}\n\nexport const FileDropZoneBase = forwardRef<HTMLInputElement, FileDropZoneBaseProps>(\n  ({ onChange, accept, multiple, disabled, children, ...props }, forwardedRef) => {\n    const [isDragOver, setIsDragOver] = useState(false);\n    const internalRef = useRef<HTMLInputElement>(null);\n\n    const handleFiles = useCallback(\n      (fileList: FileList | null) => {\n        if (!fileList || fileList.length === 0) return;\n        onChange?.(Array.from(fileList));\n      },\n      [onChange],\n    );\n\n    const handleDragOver = useCallback(\n      (e: DragEvent<HTMLDivElement>) => {\n        e.preventDefault();\n        if (!disabled) {\n          setIsDragOver(true);\n        }\n      },\n      [disabled],\n    );\n\n    const handleDragLeave = useCallback((e: DragEvent<HTMLDivElement>) => {\n      e.preventDefault();\n      setIsDragOver(false);\n    }, []);\n\n    const handleDrop = useCallback(\n      (e: DragEvent<HTMLDivElement>) => {\n        e.preventDefault();\n        setIsDragOver(false);\n        if (!disabled) {\n          handleFiles(e.dataTransfer.files);\n        }\n      },\n      [disabled, handleFiles],\n    );\n\n    const handleInputChange = useCallback(\n      (e: ChangeEvent<HTMLInputElement>) => {\n        handleFiles(e.target.files);\n        // Reset so the same file can be selected again\n        e.target.value = \"\";\n      },\n      [handleFiles],\n    );\n\n    const handleClick = useCallback(() => {\n      if (!disabled) {\n        internalRef.current?.click();\n      }\n    }, [disabled]);\n\n    const handleKeyDown = useCallback(\n      (e: React.KeyboardEvent<HTMLDivElement>) => {\n        if (!disabled && (e.key === \"Enter\" || e.key === \" \")) {\n          e.preventDefault();\n          internalRef.current?.click();\n        }\n      },\n      [disabled],\n    );\n\n    return (\n      <div\n        role=\"button\"\n        tabIndex={disabled ? -1 : 0}\n        aria-disabled={disabled || undefined}\n        data-drag-over={isDragOver || undefined}\n        onClick={handleClick}\n        onKeyDown={handleKeyDown}\n        onDragOver={handleDragOver}\n        onDragLeave={handleDragLeave}\n        onDrop={handleDrop}\n        {...props}>\n        <input\n          ref={mergeRefs(forwardedRef, internalRef)}\n          type=\"file\"\n          style={{ display: \"none\" }}\n          accept={accept}\n          multiple={multiple}\n          disabled={disabled}\n          onChange={handleInputChange}\n          tabIndex={-1}\n          aria-hidden=\"true\"\n        />\n        {children ?? <span>Drop files here or click to browse</span>}\n      </div>\n    );\n  },\n);\n\nFileDropZoneBase.displayName = \"FileDropZoneBase\";\n"],"names":["InputBase","forwardRef","asChild","props","ref","jsx","Slot","TextareaBase","NumberInputBase","FormFieldBase","label","helperText","errorMessage","validationStatus","required","disabled","htmlFor","children","autoId","useId","fieldId","helperId","errorId","showError","describedBy","enhancedChildren","Children","child","isValidElement","cloneElement","jsxs","mergeRefs","refs","value","PillInputBase","controlledValues","onChange","placeholder","maxPills","delimiters","forwardedRef","internalValues","setInternalValues","useState","inputValue","setInputValue","internalRef","useRef","values","updateValues","useCallback","next","addPill","text","trimmed","removePill","index","_","i","handleKeyDown","e","handleContainerClick","handleContainerKeyDown","pill","FileDropZoneBase","accept","multiple","isDragOver","setIsDragOver","handleFiles","fileList","handleDragOver","handleDragLeave","handleDrop","handleInputChange","handleClick"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@utk09/finra-ui",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "Component library for web applications. Core UI components and styles.",
   "displayName": "Finra UI",
   "type": "module",