@campfire-interactive/inputs 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,39 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type DatePickerMode = 'date' | 'datetime' | 'time' | 'month' | 'quarter' | 'year';
+interface IDatePicker {
+    /** Stored value as a canonical string in the format chosen for `mode`. */
+    value?: string | null;
+    /** Fires with the canonical string, or null when cleared. */
+    onChange: (value: string | null) => void;
+    /** Picker behavior. Default: 'date'. */
+    mode?: DatePickerMode;
+    placeholder?: string;
+    disabled?: boolean;
+    id?: string;
+    className?: string;
+    /** Inclusive lower bound (any date inside the target unit). */
+    minDate?: Date;
+    /** Inclusive upper bound. */
+    maxDate?: Date;
+    /** Show the inline clear ('×') button. Default: true. */
+    isClearable?: boolean;
+    /**
+     * Override the date-fns format string used to (de)serialize the value.
+     * If unset, the per-mode default (see comments on `DatePickerMode`) is used.
+     * Locale-aware tokens (e.g., MMM, QQQ) are honored — quote literals with
+     * single quotes (e.g., "'Q'Q yyyy") to keep them stable across locales.
+     */
+    format?: string;
+}
+/** Alias kept for ergonomic React naming. */
+type DatePickerProps = IDatePicker;
+
+/**
+ * Date / quarter / year / time picker. Wraps `react-datepicker`. The contract
+ * is the `DatePickerProps` interface in `./types.ts` — nothing react-datepicker
+ * specific leaks to consumers.
+ */
+declare function DatePicker(props: DatePickerProps): react_jsx_runtime.JSX.Element;
+
+export { DatePicker, type DatePickerMode, type DatePickerProps, type IDatePicker };

package/dist/index.js

@@ -0,0 +1,57 @@
+// src/DatePicker.tsx
+import ReactDatePicker from "react-datepicker";
+import { format as fmt, parse as parseDate, isValid } from "date-fns";
+import "react-datepicker/dist/react-datepicker.css";
+import { jsx } from "react/jsx-runtime";
+var MODE_DEFAULTS = {
+  date: { format: "yyyy-MM-dd", placeholder: "YYYY-MM-DD" },
+  datetime: { format: "yyyy-MM-dd HH:mm", placeholder: "YYYY-MM-DD HH:mm" },
+  time: { format: "HH:mm", placeholder: "HH:mm", flag: "showTimeSelectOnly" },
+  month: { format: "yyyy-MM", placeholder: "YYYY-MM", flag: "showMonthYearPicker" },
+  // Literal "Q" + numeric quarter (1-4) + 4-digit year. Locale-independent.
+  quarter: { format: "'Q'Q yyyy", placeholder: "Q1 2024", flag: "showQuarterYearPicker" },
+  year: { format: "yyyy", placeholder: "YYYY", flag: "showYearPicker" }
+};
+var toDate = (value, formatStr) => {
+  if (!value) return null;
+  const d = parseDate(value, formatStr, /* @__PURE__ */ new Date());
+  return isValid(d) ? d : null;
+};
+var toCanonicalString = (date, formatStr) => date && isValid(date) ? fmt(date, formatStr) : null;
+function DatePicker(props) {
+  const mode = props.mode ?? "date";
+  const defaults = MODE_DEFAULTS[mode];
+  const formatStr = props.format ?? defaults.format;
+  const placeholder = props.placeholder ?? defaults.placeholder;
+  const modeProps = {};
+  if (defaults.flag) modeProps[defaults.flag] = true;
+  if (mode === "datetime") modeProps.showTimeSelect = true;
+  if (mode === "time") {
+    modeProps.showTimeSelect = true;
+    modeProps.timeIntervals = 15;
+  }
+  const selected = toDate(props.value ?? null, formatStr);
+  const handleChange = (d) => props.onChange(toCanonicalString(d, formatStr));
+  const Picker = ReactDatePicker;
+  return /* @__PURE__ */ jsx(
+    Picker,
+    {
+      id: props.id,
+      selected: selected ?? void 0,
+      onChange: handleChange,
+      placeholderText: placeholder,
+      disabled: props.disabled,
+      minDate: props.minDate,
+      maxDate: props.maxDate,
+      isClearable: props.isClearable ?? true,
+      dateFormat: formatStr,
+      className: props.className,
+      wrapperClassName: "cfi-datepicker-wrapper",
+      popperClassName: "cfi-datepicker-popper",
+      ...modeProps
+    }
+  );
+}
+export {
+  DatePicker
+};

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@campfire-interactive/inputs",
+  "version": "0.1.0",
+  "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"
+  }
+}