@campfire-interactive/inputs 0.1.1 → 0.2.2

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
 
 type DatePickerMode = 'date' | 'datetime' | 'time' | 'month' | 'quarter' | 'year';
 interface IDatePicker {
@@ -34,6 +34,6 @@ type DatePickerProps = IDatePicker;
  * is the `DatePickerProps` interface in `./types.ts` — nothing react-datepicker
  * specific leaks to consumers.
  */
-declare function DatePicker(props: DatePickerProps): react_jsx_runtime.JSX.Element;
+declare function DatePicker(props: DatePickerProps): React.JSX.Element;
 
 export { DatePicker, type DatePickerMode, type DatePickerProps, type IDatePicker };

package/dist/index.js

@@ -1,4 +1,5 @@
 // src/DatePicker.tsx
+import * as React from "react";
 import ReactDatePicker from "react-datepicker";
 import { format as fmt, parse as parseDate, isValid } from "date-fns";
 import "react-datepicker/dist/react-datepicker.css";
@@ -26,7 +27,7 @@ function styleInject(css, { insertAt } = {}) {
 }
 
 // src/DatePicker.css
-styleInject('.cfi-datepicker-wrapper {\n  display: block;\n  width: 100%;\n}\n.cfi-datepicker-wrapper .react-datepicker__input-container {\n  display: block;\n  width: 100%;\n}\n.cfi-datepicker-wrapper .react-datepicker__input-container input {\n  box-sizing: border-box;\n  display: block;\n  height: 2.25rem;\n  width: 100%;\n  padding: 0.25rem 2rem 0.25rem 0.75rem;\n  border: 1px solid hsl(214.3 31.8% 91.4%);\n  border-radius: 0.375rem;\n  background-color: hsl(0 0% 100%);\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n  color: inherit;\n  outline: none;\n  transition: border-color 0.15s ease, box-shadow 0.15s ease;\n}\n.cfi-datepicker-wrapper .react-datepicker__input-container input::placeholder {\n  color: hsl(215.4 16.3% 56.9%);\n}\n.cfi-datepicker-wrapper .react-datepicker__input-container input:focus,\n.cfi-datepicker-wrapper .react-datepicker__input-container input:focus-visible {\n  border-color: hsl(222.2 47.4% 30%);\n  box-shadow: 0 0 0 2px hsl(222.2 47.4% 30% / 0.15);\n}\n.cfi-datepicker-wrapper .react-datepicker__input-container input:disabled {\n  background-color: hsl(210 40% 96.1%);\n  color: hsl(215.4 16.3% 46.9%);\n  cursor: not-allowed;\n}\n.cfi-datepicker-wrapper .react-datepicker__close-icon {\n  position: absolute;\n  right: 0.5rem;\n  top: 50%;\n  transform: translateY(-50%);\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  height: 1.25rem;\n  width: 1.25rem;\n  padding: 0;\n  background: transparent;\n  border: none;\n  cursor: pointer;\n}\n.cfi-datepicker-wrapper .react-datepicker__close-icon::after {\n  content: "\\d7";\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  height: 1.25rem;\n  width: 1.25rem;\n  padding: 0;\n  background: transparent;\n  border-radius: 0.25rem;\n  color: hsl(215.4 16.3% 46.9%);\n  font-size: 1.125rem;\n  font-weight: 400;\n  line-height: 1;\n  transition: background-color 0.15s ease, color 0.15s ease;\n}\n.cfi-datepicker-wrapper .react-datepicker__close-icon:hover::after {\n  background-color: hsl(210 40% 94%);\n  color: hsl(222.2 84% 4.9%);\n}\n');
+styleInject('.cfi-datepicker-wrapper {\n  display: block;\n  width: 100%;\n}\n.cfi-datepicker-wrapper .react-datepicker__input-container {\n  display: block;\n  width: 100%;\n}\n.cfi-datepicker-wrapper .react-datepicker__input-container input {\n  box-sizing: border-box;\n  display: block;\n  height: 2.25rem;\n  width: 100%;\n  padding: 0.25rem 2rem 0.25rem 0.75rem;\n  border: 1px solid var(--cfi-border, hsl(214.3 31.8% 91.4%));\n  border-radius: 0.375rem;\n  background-color: var(--cfi-surface, hsl(0 0% 100%));\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n  color: inherit;\n  outline: none;\n  transition: border-color 0.15s ease, box-shadow 0.15s ease;\n}\n.cfi-datepicker-wrapper .react-datepicker__input-container input::placeholder {\n  color: var(--cfi-content-subtle, hsl(215.4 16.3% 56.9%));\n}\n.cfi-datepicker-wrapper .react-datepicker__input-container input:focus,\n.cfi-datepicker-wrapper .react-datepicker__input-container input:focus-visible {\n  border-color: var(--cfi-border-focus, hsl(222.2 47.4% 30%));\n  box-shadow: 0 0 0 2px color-mix(in srgb, var(--cfi-border-focus, hsl(222.2 47.4% 30%)) 15%, transparent);\n}\n.cfi-datepicker-wrapper .react-datepicker__input-container input:disabled {\n  background-color: var(--cfi-surface-disabled, hsl(210 40% 96.1%));\n  color: var(--cfi-content-muted, hsl(215.4 16.3% 46.9%));\n  cursor: not-allowed;\n}\n.cfi-datepicker-wrapper .react-datepicker__close-icon {\n  position: absolute;\n  right: 0.5rem;\n  top: 50%;\n  transform: translateY(-50%);\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  height: 1.25rem;\n  width: 1.25rem;\n  padding: 0;\n  background: transparent;\n  border: none;\n  cursor: pointer;\n}\n.cfi-datepicker-wrapper .react-datepicker__close-icon::after {\n  content: "\\d7";\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  height: 1.25rem;\n  width: 1.25rem;\n  padding: 0;\n  background: transparent;\n  border-radius: 0.25rem;\n  color: var(--cfi-content-muted, hsl(215.4 16.3% 46.9%));\n  font-size: 1.125rem;\n  font-weight: 400;\n  line-height: 1;\n  transition: background-color 0.15s ease, color 0.15s ease;\n}\n.cfi-datepicker-wrapper .react-datepicker__close-icon:hover::after {\n  background-color: var(--cfi-surface-hover, hsl(210 40% 94%));\n  color: var(--cfi-content, hsl(222.2 84% 4.9%));\n}\n.cfi-datepicker-popper .react-datepicker {\n  background-color: var(--cfi-surface-raised, #fff);\n  border-color: var(--cfi-border, #aeaeae);\n  color: var(--cfi-content, #000);\n}\n.cfi-datepicker-popper .react-datepicker__header {\n  background-color: var(--cfi-surface-sunken, #f0f0f0);\n  border-bottom-color: var(--cfi-border, #aeaeae);\n}\n.cfi-datepicker-popper .react-datepicker__current-month,\n.cfi-datepicker-popper .react-datepicker-time__header,\n.cfi-datepicker-popper .react-datepicker-year-header,\n.cfi-datepicker-popper .react-datepicker__day-name,\n.cfi-datepicker-popper .react-datepicker__day,\n.cfi-datepicker-popper .react-datepicker__time-name,\n.cfi-datepicker-popper .react-datepicker__month-text,\n.cfi-datepicker-popper .react-datepicker__quarter-text,\n.cfi-datepicker-popper .react-datepicker__year-text {\n  color: var(--cfi-content, #000);\n}\n.cfi-datepicker-popper .react-datepicker__day:not([aria-disabled=true]):hover,\n.cfi-datepicker-popper .react-datepicker__month-text:hover,\n.cfi-datepicker-popper .react-datepicker__quarter-text:hover,\n.cfi-datepicker-popper .react-datepicker__year-text:hover,\n.cfi-datepicker-popper .react-datepicker__time-list-item:hover {\n  background-color: var(--cfi-surface-hover, #f0f0f0) !important;\n}\n.cfi-datepicker-popper .react-datepicker__day--outside-month {\n  color: var(--cfi-content-subtle, #000);\n}\n.cfi-datepicker-popper .react-datepicker__day--disabled,\n.cfi-datepicker-popper .react-datepicker__month-text--disabled,\n.cfi-datepicker-popper .react-datepicker__quarter-text--disabled,\n.cfi-datepicker-popper .react-datepicker__year-text--disabled,\n.cfi-datepicker-popper .react-datepicker__time-list-item--disabled {\n  color: var(--cfi-content-disabled, #ccc) !important;\n}\n.cfi-datepicker-popper .react-datepicker__day--selected,\n.cfi-datepicker-popper .react-datepicker__day--in-range,\n.cfi-datepicker-popper .react-datepicker__day--keyboard-selected,\n.cfi-datepicker-popper .react-datepicker__month-text--selected,\n.cfi-datepicker-popper .react-datepicker__month-text--keyboard-selected,\n.cfi-datepicker-popper .react-datepicker__quarter-text--selected,\n.cfi-datepicker-popper .react-datepicker__quarter-text--keyboard-selected,\n.cfi-datepicker-popper .react-datepicker__year-text--selected,\n.cfi-datepicker-popper .react-datepicker__year-text--keyboard-selected,\n.cfi-datepicker-popper .react-datepicker__time-list-item--selected {\n  background-color: var(--cfi-action, #216ba5) !important;\n  color: var(--cfi-action-fg, #fff) !important;\n}\n.cfi-datepicker-popper .react-datepicker__time-container,\n.cfi-datepicker-popper .react-datepicker__time-container .react-datepicker__time {\n  background-color: var(--cfi-surface-raised, #fff);\n  border-color: var(--cfi-border, #aeaeae);\n}\n.cfi-datepicker-popper .react-datepicker__navigation-icon::before,\n.cfi-datepicker-popper .react-datepicker__year-read-view--down-arrow,\n.cfi-datepicker-popper .react-datepicker__month-read-view--down-arrow {\n  border-color: var(--cfi-content-muted, #ccc);\n}\n.cfi-datepicker-popper .react-datepicker__triangle {\n  fill: var(--cfi-surface-sunken, #f0f0f0);\n  color: var(--cfi-surface-sunken, #f0f0f0);\n  stroke: var(--cfi-border, #aeaeae);\n}\n');
 
 // src/DatePicker.tsx
 import { jsx } from "react/jsx-runtime";
@@ -45,6 +46,70 @@ var toDate = (value, formatStr) => {
   return isValid(d) ? d : null;
 };
 var toCanonicalString = (date, formatStr) => date && isValid(date) ? fmt(date, formatStr) : null;
+var DATE_ALTS = [
+  "MM/dd/yyyy",
+  "M/d/yyyy",
+  "MM/dd/yy",
+  "M/d/yy",
+  "MM-dd-yyyy",
+  "M-d-yyyy",
+  "yyyy/MM/dd",
+  "yyyy-M-d",
+  "MMM d yyyy",
+  "MMM d, yyyy",
+  "MMMM d yyyy",
+  "MMMM d, yyyy"
+];
+var TIME_ALTS = ["H:mm", "h:mm a", "h:mma", "h a", "ha", "HHmm"];
+var TYPED_ALTERNATES = {
+  date: DATE_ALTS,
+  datetime: DATE_ALTS.flatMap((d) => TIME_ALTS.map((t) => `${d} ${t}`)),
+  time: TIME_ALTS,
+  month: [
+    "yyyy-M",
+    "yyyy/MM",
+    "yyyy/M",
+    "MM/yyyy",
+    "M/yyyy",
+    "MM-yyyy",
+    "M-yyyy",
+    "MM/yy",
+    "M/yy",
+    "MMM yyyy",
+    "MMMM yyyy",
+    "MMM yy"
+  ],
+  quarter: ["'Q'Q yyyy", "'Q'Q/yyyy", "'Q'Q-yyyy", "'Q'Qyyyy", "yyyy 'Q'Q", "yyyy-'Q'Q", "yyyy/'Q'Q"],
+  year: ["yyyy"]
+};
+var parseTyped = (text, formatStr, mode, ref = /* @__PURE__ */ new Date()) => {
+  let value = text.trim().replace(/\s+/g, " ");
+  if (!value) return null;
+  if (mode === "quarter") value = value.toUpperCase();
+  for (const f of [formatStr, ...TYPED_ALTERNATES[mode]]) {
+    const d = parseDate(value, f, ref);
+    if (!isValid(d)) continue;
+    if (/y/.test(f) && d.getFullYear() < 1e3) continue;
+    if (/yy/.test(f) && !/yyyy/.test(f) && fmt(d, f).toUpperCase() !== value.toUpperCase()) continue;
+    return d;
+  }
+  return null;
+};
+var grainKey = (x, mode) => {
+  switch (mode) {
+    case "year":
+      return x.getFullYear() * 1e4;
+    case "quarter":
+      return x.getFullYear() * 1e4 + Math.floor(x.getMonth() / 3) * 300;
+    case "month":
+      return x.getFullYear() * 1e4 + x.getMonth() * 100;
+    case "time":
+      return 0;
+    default:
+      return x.getFullYear() * 1e4 + x.getMonth() * 100 + x.getDate();
+  }
+};
+var outOfRange = (d, mode, min, max) => !!min && grainKey(d, mode) < grainKey(min, mode) || !!max && grainKey(d, mode) > grainKey(max, mode);
 function DatePicker(props) {
   const mode = props.mode ?? "date";
   const defaults = MODE_DEFAULTS[mode];
@@ -58,7 +123,24 @@ function DatePicker(props) {
     modeProps.timeIntervals = 15;
   }
   const selected = toDate(props.value ?? null, formatStr);
-  const handleChange = (d) => props.onChange(toCanonicalString(d, formatStr));
+  const typed = React.useRef(null);
+  const handleChange = (d) => {
+    typed.current = null;
+    props.onChange(toCanonicalString(d, formatStr));
+  };
+  const handleChangeRaw = (event) => {
+    const target = event?.target;
+    typed.current = event?.type === "change" && target instanceof HTMLInputElement ? target.value : null;
+  };
+  const commitTyped = () => {
+    const text = typed.current;
+    typed.current = null;
+    if (text == null || !text.trim()) return;
+    const d = parseTyped(text, formatStr, mode, selected ?? /* @__PURE__ */ new Date());
+    if (!d || outOfRange(d, mode, props.minDate, props.maxDate)) return;
+    const next = toCanonicalString(d, formatStr);
+    if (next !== (props.value ?? null)) props.onChange(next);
+  };
   const Picker = ReactDatePicker;
   return /* @__PURE__ */ jsx(
     Picker,
@@ -66,6 +148,9 @@ function DatePicker(props) {
       id: props.id,
       selected: selected ?? void 0,
       onChange: handleChange,
+      onChangeRaw: handleChangeRaw,
+      onBlur: commitTyped,
+      onCalendarClose: commitTyped,
       placeholderText: placeholder,
       disabled: props.disabled,
       minDate: props.minDate,

package/package.json

@@ -1,40 +1,40 @@
-{
-  "name": "@campfire-interactive/inputs",
-  "version": "0.1.1",
-  "description": "Shared input components for Campfire Suite (date picker, etc.)",
-  "type": "module",
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js"
-    }
-  },
-  "files": [
-    "dist"
-  ],
-  "scripts": {
-    "build": "tsup",
-    "dev": "tsup --watch"
-  },
-  "peerDependencies": {
-    "react": "^18.0.0 || ^19.0.0",
-    "react-dom": "^18.0.0 || ^19.0.0"
-  },
-  "dependencies": {
-    "date-fns": "^4.1.0",
-    "react-datepicker": "^9.1.0"
-  },
-  "devDependencies": {
-    "@types/react": "^19.0.0",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "tsup": "^8.0.0",
-    "typescript": "^5.0.0"
-  },
-  "publishConfig": {
-    "registry": "https://registry.npmjs.org",
-    "access": "public"
-  }
-}
+{
+  "name": "@campfire-interactive/inputs",
+  "version": "0.2.2",
+  "description": "Shared input components for Campfire Suite (date picker, etc.)",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "dependencies": {
+    "date-fns": "^4.1.0",
+    "react-datepicker": "^9.1.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.0.0"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public"
+  }
+}