@clubmed/trident-ui 1.3.0-beta.12 → 1.3.0-beta.13

package/molecules/Forms/DateField.d.ts

@@ -1,5 +1,5 @@
-import { type IconicNames, type IconicTypes } from '@clubmed/trident-icons';
-import { type FormControlProps } from './FormControl.js';
+import { IconicNames, IconicTypes } from '@clubmed/trident-icons';
+import { FormControlProps } from './FormControl.js';
 interface DateFieldProps extends Omit<FormControlProps<Date | null>, 'max' | 'min'> {
     description?: string;
     /**

package/molecules/Forms/DateField.js

@@ -1,4 +1,4 @@
-import { jsx as p, jsxs as T } from "react/jsx-runtime";
+import { jsx as p, jsxs as C } from "react/jsx-runtime";
 import { c as q } from "../../chunks/index.js";
 import { useId as A, useRef as B, useState as H, useCallback as L, useEffect as J } from "react";
 import { Icon as E } from "@clubmed/trident-icons";
@@ -25,7 +25,7 @@ function z(t) {
 function G(t, e) {
   return P(2, arguments), z(t).getTime() - z(e).getTime();
 }
-function m(t, e) {
+function f(t, e) {
   for (var n = t < 0 ? "-" : "", r = Math.abs(t).toString(); r.length < e; )
     r = "0" + r;
   return n + r;
@@ -36,98 +36,97 @@ function W(t, e) {
   var a = z(t);
   if (isNaN(a.getTime()))
     throw new RangeError("Invalid time value");
-  var l = String((n = e == null ? void 0 : e.format) !== null && n !== void 0 ? n : "extended"), i = String((r = e == null ? void 0 : e.representation) !== null && r !== void 0 ? r : "complete");
-  if (l !== "extended" && l !== "basic")
+  var c = String((n = e?.format) !== null && n !== void 0 ? n : "extended"), i = String((r = e?.representation) !== null && r !== void 0 ? r : "complete");
+  if (c !== "extended" && c !== "basic")
     throw new RangeError("format must be 'extended' or 'basic'");
   if (i !== "date" && i !== "time" && i !== "complete")
     throw new RangeError("representation must be 'date', 'time', or 'complete'");
-  var f = "", g = "", y = l === "extended" ? "-" : "", j = l === "extended" ? ":" : "";
+  var d = "", g = "", D = c === "extended" ? "-" : "", I = c === "extended" ? ":" : "";
   if (i !== "time") {
-    var o = m(a.getDate(), 2), w = m(a.getMonth() + 1, 2), C = m(a.getFullYear(), 4);
-    f = "".concat(C).concat(y).concat(w).concat(y).concat(o);
+    var o = f(a.getDate(), 2), y = f(a.getMonth() + 1, 2), T = f(a.getFullYear(), 4);
+    d = "".concat(T).concat(D).concat(y).concat(D).concat(o);
   }
   if (i !== "date") {
     var b = a.getTimezoneOffset();
     if (b !== 0) {
-      var x = Math.abs(b), u = m(Math.floor(x / 60), 2), d = m(x % 60, 2), v = b < 0 ? "+" : "-";
-      g = "".concat(v).concat(u, ":").concat(d);
+      var w = Math.abs(b), l = f(Math.floor(w / 60), 2), u = f(w % 60, 2), j = b < 0 ? "+" : "-";
+      g = "".concat(j).concat(l, ":").concat(u);
     } else
       g = "Z";
-    var F = m(a.getHours(), 2), S = m(a.getMinutes(), 2), M = m(a.getSeconds(), 2), N = f === "" ? "" : "T", s = [F, S, M].join(j);
-    f = "".concat(f).concat(N).concat(s).concat(g);
+    var F = f(a.getHours(), 2), x = f(a.getMinutes(), 2), S = f(a.getSeconds(), 2), M = d === "" ? "" : "T", s = [F, x, S].join(I);
+    d = "".concat(d).concat(M).concat(s).concat(g);
   }
-  return f;
+  return d;
 }
 const O = (t) => t ? W(new Date(t), { representation: "date" }) : "", X = (t, e, n) => {
   if (!t)
     return !0;
-  const r = (i) => new Date(i.getFullYear(), i.getMonth(), i.getDate()), a = new Date(t), l = r(a);
-  return !(e && l < r(e) || n && l > r(n));
+  const r = (i) => new Date(i.getFullYear(), i.getMonth(), i.getDate()), a = new Date(t), c = r(a);
+  return !(e && c < r(e) || n && c > r(n));
 }, se = (t) => {
   const e = A(), {
     id: n = e,
     name: r = n,
     label: a,
-    description: l,
+    description: c,
     openDatepicker: i,
-    validationStatus: f = "default",
+    validationStatus: d = "default",
     icon: g = "CalendarDefault",
-    iconType: y,
-    errorMessage: j,
+    iconType: D,
+    errorMessage: I,
     disabled: o = !1,
-    required: w = !1,
-    hideRequiredStar: C,
+    required: y = !1,
+    hideRequiredStar: T,
     dataTestId: b = "DateField",
-    value: x,
-    min: u,
-    max: d,
-    onChange: v,
+    value: w,
+    min: l,
+    max: u,
+    onChange: j,
     ...F
-  } = t, S = B(null), [M, N] = H(!1), s = Q({
+  } = t, x = B(null), [S, M] = H(!1), s = Q({
     isDisabled: o,
-    validationStatus: f
-  }), { setValue: h, value: D } = K({
+    validationStatus: d
+  }), { setValue: v, value: h } = K({
     name: r,
     formatter: O,
-    initialValue: x,
-    onChange: (c, R) => v == null ? void 0 : v(c, new Date(R))
-  }), k = O(u), I = O(d), Y = (c) => {
-    h(c.target.value);
+    initialValue: w,
+    onChange: (m, R) => j?.(m, new Date(R))
+  }), N = O(l), k = O(u), Y = (m) => {
+    v(m.target.value);
   }, Z = () => {
-    var c;
-    (c = S.current) == null || c.showPicker();
+    x.current?.showPicker();
   }, _ = L(() => {
-    const c = new Date(D);
-    if (u && d) {
-      const R = Math.abs(G(c, u)), $ = Math.abs(G(c, d));
-      h(R <= $ ? k : I);
+    const m = new Date(h);
+    if (l && u) {
+      const R = Math.abs(G(m, l)), $ = Math.abs(G(m, u));
+      v(R <= $ ? N : k);
       return;
     }
-    if (u) {
-      h(k);
+    if (l) {
+      v(N);
       return;
     }
-    if (d) {
-      h(I);
+    if (u) {
+      v(k);
       return;
     }
-  }, [d, u, I, k, h, D]);
+  }, [u, l, k, N, v, h]);
   return J(() => {
-    !X(D, u, d) && !M && _();
-  }, [_, d, u, M, D]), /* @__PURE__ */ p(
+    !X(h, l, u) && !S && _();
+  }, [_, u, l, S, h]), /* @__PURE__ */ p(
     U,
     {
       id: n,
       label: a,
-      description: l,
+      description: c,
       dataName: "DateField",
       dataTestId: b,
       disabled: o,
-      required: w,
-      hideRequiredStar: C,
-      validationStatus: f,
-      errorMessage: j,
-      children: /* @__PURE__ */ T("div", { className: "relative", children: [
+      required: y,
+      hideRequiredStar: T,
+      validationStatus: d,
+      errorMessage: I,
+      children: /* @__PURE__ */ C("div", { className: "relative", children: [
         /* @__PURE__ */ p(
           "input",
           {
@@ -146,17 +145,17 @@ const O = (t) => t ? W(new Date(t), { representation: "date" }) : "", X = (t, e,
             ),
             id: n,
             disabled: o,
-            required: w,
-            ref: S,
-            value: D,
-            min: k,
-            max: I,
+            required: y,
+            ref: x,
+            value: h,
+            min: N,
+            max: k,
             onChange: Y,
-            onFocus: () => N(!0),
-            onBlur: () => N(!1)
+            onFocus: () => M(!0),
+            onBlur: () => M(!1)
           }
         ),
-        /* @__PURE__ */ T(
+        /* @__PURE__ */ C(
           "div",
           {
             className: q(
@@ -168,11 +167,11 @@ const O = (t) => t ? W(new Date(t), { representation: "date" }) : "", X = (t, e,
               }
             ),
             children: [
-              /* @__PURE__ */ T("button", { className: "pointer-events-auto leading-none", onClick: Z, children: [
-                /* @__PURE__ */ p(E, { name: g, iconType: y, width: "24px" }),
+              /* @__PURE__ */ C("button", { className: "pointer-events-auto leading-none", onClick: Z, children: [
+                /* @__PURE__ */ p(E, { name: g, iconType: D, width: "24px" }),
                 /* @__PURE__ */ p("span", { className: "sr-only", children: i })
               ] }),
-              /* @__PURE__ */ T("span", { className: "ms-auto flex gap-x-8", children: [
+              /* @__PURE__ */ C("span", { className: "ms-auto flex gap-x-8", children: [
                 s === "error" && /* @__PURE__ */ p(E, { name: "CrossDefault", width: "24px" }),
                 s === "success" && /* @__PURE__ */ p(E, { name: "CheckDefault", width: "24px" })
               ] })

package/molecules/Forms/DateField.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateField.js","sources":["../../../node_modules/@babel/runtime/helpers/esm/typeof.js","../../../node_modules/date-fns/esm/_lib/requiredArgs/index.js","../../../node_modules/date-fns/esm/toDate/index.js","../../../node_modules/date-fns/esm/differenceInMilliseconds/index.js","../../../node_modules/date-fns/esm/_lib/addLeadingZeros/index.js","../../../node_modules/date-fns/esm/formatISO/index.js","../../../lib/molecules/Forms/DateField.tsx"],"sourcesContent":["export default function _typeof(o) {\n  \"@babel/helpers - typeof\";\n\n  return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) {\n    return typeof o;\n  } : function (o) {\n    return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o;\n  }, _typeof(o);\n}","export default function requiredArgs(required, args) {\n  if (args.length < required) {\n    throw new TypeError(required + ' argument' + (required > 1 ? 's' : '') + ' required, but only ' + args.length + ' present');\n  }\n}","import _typeof from \"@babel/runtime/helpers/esm/typeof\";\nimport requiredArgs from \"../_lib/requiredArgs/index.js\";\n/**\n * @name toDate\n * @category Common Helpers\n * @summary Convert the given argument to an instance of Date.\n *\n * @description\n * Convert the given argument to an instance of Date.\n *\n * If the argument is an instance of Date, the function returns its clone.\n *\n * If the argument is a number, it is treated as a timestamp.\n *\n * If the argument is none of the above, the function returns Invalid Date.\n *\n * **Note**: *all* Date arguments passed to any *date-fns* function is processed by `toDate`.\n *\n * @param {Date|Number} argument - the value to convert\n * @returns {Date} the parsed date in the local time zone\n * @throws {TypeError} 1 argument required\n *\n * @example\n * // Clone the date:\n * const result = toDate(new Date(2014, 1, 11, 11, 30, 30))\n * //=> Tue Feb 11 2014 11:30:30\n *\n * @example\n * // Convert the timestamp to date:\n * const result = toDate(1392098430000)\n * //=> Tue Feb 11 2014 11:30:30\n */\nexport default function toDate(argument) {\n  requiredArgs(1, arguments);\n  var argStr = Object.prototype.toString.call(argument);\n\n  // Clone the date\n  if (argument instanceof Date || _typeof(argument) === 'object' && argStr === '[object Date]') {\n    // Prevent the date to lose the milliseconds when passed to new Date() in IE10\n    return new Date(argument.getTime());\n  } else if (typeof argument === 'number' || argStr === '[object Number]') {\n    return new Date(argument);\n  } else {\n    if ((typeof argument === 'string' || argStr === '[object String]') && typeof console !== 'undefined') {\n      // eslint-disable-next-line no-console\n      console.warn(\"Starting with v2.0.0-beta.1 date-fns doesn't accept strings as date arguments. Please use `parseISO` to parse strings. See: https://github.com/date-fns/date-fns/blob/master/docs/upgradeGuide.md#string-arguments\");\n      // eslint-disable-next-line no-console\n      console.warn(new Error().stack);\n    }\n    return new Date(NaN);\n  }\n}","import toDate from \"../toDate/index.js\";\nimport requiredArgs from \"../_lib/requiredArgs/index.js\";\n/**\n * @name differenceInMilliseconds\n * @category Millisecond Helpers\n * @summary Get the number of milliseconds between the given dates.\n *\n * @description\n * Get the number of milliseconds between the given dates.\n *\n * @param {Date|Number} dateLeft - the later date\n * @param {Date|Number} dateRight - the earlier date\n * @returns {Number} the number of milliseconds\n * @throws {TypeError} 2 arguments required\n *\n * @example\n * // How many milliseconds are between\n * // 2 July 2014 12:30:20.600 and 2 July 2014 12:30:21.700?\n * const result = differenceInMilliseconds(\n *   new Date(2014, 6, 2, 12, 30, 21, 700),\n *   new Date(2014, 6, 2, 12, 30, 20, 600)\n * )\n * //=> 1100\n */\nexport default function differenceInMilliseconds(dateLeft, dateRight) {\n  requiredArgs(2, arguments);\n  return toDate(dateLeft).getTime() - toDate(dateRight).getTime();\n}","export default function addLeadingZeros(number, targetLength) {\n  var sign = number < 0 ? '-' : '';\n  var output = Math.abs(number).toString();\n  while (output.length < targetLength) {\n    output = '0' + output;\n  }\n  return sign + output;\n}","import toDate from \"../toDate/index.js\";\nimport addLeadingZeros from \"../_lib/addLeadingZeros/index.js\";\nimport requiredArgs from \"../_lib/requiredArgs/index.js\";\n/**\n * @name formatISO\n * @category Common Helpers\n * @summary Format the date according to the ISO 8601 standard (https://support.sas.com/documentation/cdl/en/lrdict/64316/HTML/default/viewer.htm#a003169814.htm).\n *\n * @description\n * Return the formatted date string in ISO 8601 format. Options may be passed to control the parts and notations of the date.\n *\n * @param {Date|Number} date - the original date\n * @param {Object} [options] - an object with options.\n * @param {'extended'|'basic'} [options.format='extended'] - if 'basic', hide delimiters between date and time values.\n * @param {'complete'|'date'|'time'} [options.representation='complete'] - format date, time with local time zone, or both.\n * @returns {String} the formatted date string (in local time zone)\n * @throws {TypeError} 1 argument required\n * @throws {RangeError} `date` must not be Invalid Date\n * @throws {RangeError} `options.format` must be 'extended' or 'basic'\n * @throws {RangeError} `options.representation` must be 'date', 'time' or 'complete'\n *\n * @example\n * // Represent 18 September 2019 in ISO 8601 format (local time zone is UTC):\n * const result = formatISO(new Date(2019, 8, 18, 19, 0, 52))\n * //=> '2019-09-18T19:00:52Z'\n *\n * @example\n * // Represent 18 September 2019 in ISO 8601, short format (local time zone is UTC):\n * const result = formatISO(new Date(2019, 8, 18, 19, 0, 52), { format: 'basic' })\n * //=> '20190918T190052'\n *\n * @example\n * // Represent 18 September 2019 in ISO 8601 format, date only:\n * const result = formatISO(new Date(2019, 8, 18, 19, 0, 52), { representation: 'date' })\n * //=> '2019-09-18'\n *\n * @example\n * // Represent 18 September 2019 in ISO 8601 format, time only (local time zone is UTC):\n * const result = formatISO(new Date(2019, 8, 18, 19, 0, 52), { representation: 'time' })\n * //=> '19:00:52Z'\n */\nexport default function formatISO(date, options) {\n  var _options$format, _options$representati;\n  requiredArgs(1, arguments);\n  var originalDate = toDate(date);\n  if (isNaN(originalDate.getTime())) {\n    throw new RangeError('Invalid time value');\n  }\n  var format = String((_options$format = options === null || options === void 0 ? void 0 : options.format) !== null && _options$format !== void 0 ? _options$format : 'extended');\n  var representation = String((_options$representati = options === null || options === void 0 ? void 0 : options.representation) !== null && _options$representati !== void 0 ? _options$representati : 'complete');\n  if (format !== 'extended' && format !== 'basic') {\n    throw new RangeError(\"format must be 'extended' or 'basic'\");\n  }\n  if (representation !== 'date' && representation !== 'time' && representation !== 'complete') {\n    throw new RangeError(\"representation must be 'date', 'time', or 'complete'\");\n  }\n  var result = '';\n  var tzOffset = '';\n  var dateDelimiter = format === 'extended' ? '-' : '';\n  var timeDelimiter = format === 'extended' ? ':' : '';\n\n  // Representation is either 'date' or 'complete'\n  if (representation !== 'time') {\n    var day = addLeadingZeros(originalDate.getDate(), 2);\n    var month = addLeadingZeros(originalDate.getMonth() + 1, 2);\n    var year = addLeadingZeros(originalDate.getFullYear(), 4);\n\n    // yyyyMMdd or yyyy-MM-dd.\n    result = \"\".concat(year).concat(dateDelimiter).concat(month).concat(dateDelimiter).concat(day);\n  }\n\n  // Representation is either 'time' or 'complete'\n  if (representation !== 'date') {\n    // Add the timezone.\n    var offset = originalDate.getTimezoneOffset();\n    if (offset !== 0) {\n      var absoluteOffset = Math.abs(offset);\n      var hourOffset = addLeadingZeros(Math.floor(absoluteOffset / 60), 2);\n      var minuteOffset = addLeadingZeros(absoluteOffset % 60, 2);\n      // If less than 0, the sign is +, because it is ahead of time.\n      var sign = offset < 0 ? '+' : '-';\n      tzOffset = \"\".concat(sign).concat(hourOffset, \":\").concat(minuteOffset);\n    } else {\n      tzOffset = 'Z';\n    }\n    var hour = addLeadingZeros(originalDate.getHours(), 2);\n    var minute = addLeadingZeros(originalDate.getMinutes(), 2);\n    var second = addLeadingZeros(originalDate.getSeconds(), 2);\n\n    // If there's also date, separate it with time with 'T'\n    var separator = result === '' ? '' : 'T';\n\n    // Creates a time string consisting of hour, minute, and second, separated by delimiters, if defined.\n    var time = [hour, minute, second].join(timeDelimiter);\n\n    // HHmmss or HH:mm:ss.\n    result = \"\".concat(result).concat(separator).concat(time).concat(tzOffset);\n  }\n  return result;\n}","import classnames from 'classnames';\nimport { differenceInMilliseconds, formatISO } from 'date-fns';\nimport { type ChangeEvent, useCallback, useEffect, useId, useRef, useState } from 'react';\nimport { Icon, type IconicNames, type IconicTypes } from '@clubmed/trident-icons';\n\nimport { useValue } from '@/hooks/useValue.js';\nimport { useInternalStatus } from '@/hooks/useInternalStatus.js';\nimport { FormControl, type FormControlProps } from './FormControl.js';\n\ninterface DateFieldProps extends Omit<FormControlProps<Date | null>, 'max' | 'min'> {\n  description?: string;\n  /**\n   * Open datepicker text\n   */\n  openDatepicker?: string;\n  id?: string;\n  icon?: IconicNames;\n  iconType?: IconicTypes;\n  errorMessage?: string;\n  dataTestId?: string;\n  /**\n   * Minimum Date allowed\n   */\n  min?: Date | undefined;\n  /**\n   * Maximum Date allowed\n   */\n  max?: Date | undefined;\n}\n\nconst formatDate = (value: Date | number | undefined | null): string => {\n  if (!value) {\n    return '';\n  }\n\n  return formatISO(new Date(value), { representation: 'date' });\n};\n\nconst validateDateRange = (date: string, min?: Date, max?: Date): boolean => {\n  if (!date) {\n    return true;\n  }\n\n  const normalizeDate = (d: Date) => new Date(d.getFullYear(), d.getMonth(), d.getDate());\n  const inputDate = new Date(date);\n  const normalizedInputDate = normalizeDate(inputDate);\n\n  if (min && normalizedInputDate < normalizeDate(min)) {\n    return false;\n  }\n  if (max && normalizedInputDate > normalizeDate(max)) {\n    return false;\n  }\n\n  return true;\n};\n\nexport const DateField = (props: DateFieldProps) => {\n  const internalId = useId();\n\n  const {\n    id = internalId,\n    name = id,\n    label,\n    description,\n    openDatepicker,\n    validationStatus = 'default',\n    icon = 'CalendarDefault',\n    iconType,\n    errorMessage,\n    disabled = false,\n    required = false,\n    hideRequiredStar,\n    dataTestId = 'DateField',\n    value: initialValue,\n    min: initialMin,\n    max: initialMax,\n    onChange,\n    ...rest\n  } = props;\n\n  // NO LOGIC IS IMPLEMENTED YET HERE\n  // THIS IS A VISUAL COMPONENT ONLY\n  const ref = useRef<HTMLInputElement>(null);\n  const [isFocused, setIsFocused] = useState<boolean>(false);\n\n  const internalStatus = useInternalStatus({\n    isDisabled: disabled,\n    validationStatus,\n  });\n\n  const { setValue, value } = useValue<string, Date | number | undefined | null>({\n    name,\n    formatter: formatDate as never,\n    initialValue,\n    onChange: (name, value) => onChange?.(name, new Date(value)),\n  });\n\n  const min = formatDate(initialMin);\n  const max = formatDate(initialMax);\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    setValue(event.target.value);\n  };\n\n  const handleClickPicker = () => {\n    ref.current?.showPicker();\n  };\n\n  const handleOutOfRangeDate = useCallback(() => {\n    const currentDate = new Date(value);\n\n    if (initialMin && initialMax) {\n      const distanceToMin = Math.abs(differenceInMilliseconds(currentDate, initialMin));\n      const distanceToMax = Math.abs(differenceInMilliseconds(currentDate, initialMax));\n      setValue(distanceToMin <= distanceToMax ? min : max);\n      return;\n    }\n\n    if (initialMin) {\n      setValue(min);\n      return;\n    }\n\n    if (initialMax) {\n      setValue(max);\n      return;\n    }\n  }, [initialMax, initialMin, max, min, setValue, value]);\n\n  useEffect(() => {\n    const isValid = validateDateRange(value, initialMin, initialMax);\n    if (!isValid && !isFocused) {\n      handleOutOfRangeDate();\n    }\n  }, [handleOutOfRangeDate, initialMax, initialMin, isFocused, value]);\n\n  return (\n    <FormControl\n      id={id}\n      label={label}\n      description={description}\n      dataName=\"DateField\"\n      dataTestId={dataTestId}\n      disabled={disabled}\n      required={required}\n      hideRequiredStar={hideRequiredStar}\n      validationStatus={validationStatus}\n      errorMessage={errorMessage}\n    >\n      <div className=\"relative\">\n        <input\n          {...rest}\n          type=\"date\"\n          className={classnames(\n            'text-b3 rounded-pill date-field min-h-[50px] w-full border px-20 py-12 ps-[52px] font-normal outline-none',\n            {\n              'border-lightGrey focus:border-black active:border-black':\n                internalStatus === 'default',\n              'pe-[52px]': internalStatus === 'error' || internalStatus === 'success',\n              'bg-pearl text-grey': disabled,\n              'bg-white text-black': !disabled,\n              'border-red': !disabled && internalStatus === 'error',\n              'border-green': !disabled && internalStatus === 'success',\n            },\n          )}\n          id={id}\n          disabled={disabled}\n          required={required}\n          ref={ref}\n          value={value}\n          min={min}\n          max={max}\n          onChange={handleChange}\n          onFocus={() => setIsFocused(true)}\n          onBlur={() => setIsFocused(false)}\n        />\n        <div\n          className={classnames(\n            'pointer-events-none absolute inset-0 flex items-center justify-between px-20 py-12',\n            {\n              'text-grey': disabled,\n              'text-red': !disabled && internalStatus === 'error',\n              'text-green': !disabled && internalStatus === 'success',\n            },\n          )}\n        >\n          <button className=\"pointer-events-auto leading-none\" onClick={handleClickPicker}>\n            <Icon name={icon} iconType={iconType} width=\"24px\" />\n            <span className=\"sr-only\">\n              {openDatepicker}\n              {/* REPLACE THAT WITH SOMETHING LIKE \"OPEN DATEPICKER\" SOONER RATHER THAN LATER PLZ */}\n            </span>\n          </button>\n          <span className=\"ms-auto flex gap-x-8\">\n            {internalStatus === 'error' && <Icon name=\"CrossDefault\" width=\"24px\" />}\n            {internalStatus === 'success' && <Icon name=\"CheckDefault\" width=\"24px\" />}\n          </span>\n        </div>\n      </div>\n    </FormControl>\n  );\n};\n"],"names":["_typeof","o","requiredArgs","required","args","toDate","argument","argStr","differenceInMilliseconds","dateLeft","dateRight","addLeadingZeros","number","targetLength","sign","output","formatISO","date","options","_options$format","_options$representati","originalDate","format","representation","result","tzOffset","dateDelimiter","timeDelimiter","day","month","year","offset","absoluteOffset","hourOffset","minuteOffset","hour","minute","second","separator","time","formatDate","value","validateDateRange","min","max","normalizeDate","d","inputDate","normalizedInputDate","DateField","props","internalId","useId","id","name","label","description","openDatepicker","validationStatus","icon","iconType","errorMessage","disabled","hideRequiredStar","dataTestId","initialValue","initialMin","initialMax","onChange","rest","ref","useRef","isFocused","setIsFocused","useState","internalStatus","useInternalStatus","setValue","useValue","handleChange","event","handleClickPicker","_a","handleOutOfRangeDate","useCallback","currentDate","distanceToMin","distanceToMax","useEffect","jsx","FormControl","jsxs","classnames","Icon"],"mappings":"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","x_google_ignoreList":[0,1,2,3,4,5]}
+{"version":3,"file":"DateField.js","sources":["../../../node_modules/@babel/runtime/helpers/esm/typeof.js","../../../node_modules/date-fns/esm/_lib/requiredArgs/index.js","../../../node_modules/date-fns/esm/toDate/index.js","../../../node_modules/date-fns/esm/differenceInMilliseconds/index.js","../../../node_modules/date-fns/esm/_lib/addLeadingZeros/index.js","../../../node_modules/date-fns/esm/formatISO/index.js","../../../lib/molecules/Forms/DateField.tsx"],"sourcesContent":["export default function _typeof(o) {\n  \"@babel/helpers - typeof\";\n\n  return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) {\n    return typeof o;\n  } : function (o) {\n    return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o;\n  }, _typeof(o);\n}","export default function requiredArgs(required, args) {\n  if (args.length < required) {\n    throw new TypeError(required + ' argument' + (required > 1 ? 's' : '') + ' required, but only ' + args.length + ' present');\n  }\n}","import _typeof from \"@babel/runtime/helpers/esm/typeof\";\nimport requiredArgs from \"../_lib/requiredArgs/index.js\";\n/**\n * @name toDate\n * @category Common Helpers\n * @summary Convert the given argument to an instance of Date.\n *\n * @description\n * Convert the given argument to an instance of Date.\n *\n * If the argument is an instance of Date, the function returns its clone.\n *\n * If the argument is a number, it is treated as a timestamp.\n *\n * If the argument is none of the above, the function returns Invalid Date.\n *\n * **Note**: *all* Date arguments passed to any *date-fns* function is processed by `toDate`.\n *\n * @param {Date|Number} argument - the value to convert\n * @returns {Date} the parsed date in the local time zone\n * @throws {TypeError} 1 argument required\n *\n * @example\n * // Clone the date:\n * const result = toDate(new Date(2014, 1, 11, 11, 30, 30))\n * //=> Tue Feb 11 2014 11:30:30\n *\n * @example\n * // Convert the timestamp to date:\n * const result = toDate(1392098430000)\n * //=> Tue Feb 11 2014 11:30:30\n */\nexport default function toDate(argument) {\n  requiredArgs(1, arguments);\n  var argStr = Object.prototype.toString.call(argument);\n\n  // Clone the date\n  if (argument instanceof Date || _typeof(argument) === 'object' && argStr === '[object Date]') {\n    // Prevent the date to lose the milliseconds when passed to new Date() in IE10\n    return new Date(argument.getTime());\n  } else if (typeof argument === 'number' || argStr === '[object Number]') {\n    return new Date(argument);\n  } else {\n    if ((typeof argument === 'string' || argStr === '[object String]') && typeof console !== 'undefined') {\n      // eslint-disable-next-line no-console\n      console.warn(\"Starting with v2.0.0-beta.1 date-fns doesn't accept strings as date arguments. Please use `parseISO` to parse strings. See: https://github.com/date-fns/date-fns/blob/master/docs/upgradeGuide.md#string-arguments\");\n      // eslint-disable-next-line no-console\n      console.warn(new Error().stack);\n    }\n    return new Date(NaN);\n  }\n}","import toDate from \"../toDate/index.js\";\nimport requiredArgs from \"../_lib/requiredArgs/index.js\";\n/**\n * @name differenceInMilliseconds\n * @category Millisecond Helpers\n * @summary Get the number of milliseconds between the given dates.\n *\n * @description\n * Get the number of milliseconds between the given dates.\n *\n * @param {Date|Number} dateLeft - the later date\n * @param {Date|Number} dateRight - the earlier date\n * @returns {Number} the number of milliseconds\n * @throws {TypeError} 2 arguments required\n *\n * @example\n * // How many milliseconds are between\n * // 2 July 2014 12:30:20.600 and 2 July 2014 12:30:21.700?\n * const result = differenceInMilliseconds(\n *   new Date(2014, 6, 2, 12, 30, 21, 700),\n *   new Date(2014, 6, 2, 12, 30, 20, 600)\n * )\n * //=> 1100\n */\nexport default function differenceInMilliseconds(dateLeft, dateRight) {\n  requiredArgs(2, arguments);\n  return toDate(dateLeft).getTime() - toDate(dateRight).getTime();\n}","export default function addLeadingZeros(number, targetLength) {\n  var sign = number < 0 ? '-' : '';\n  var output = Math.abs(number).toString();\n  while (output.length < targetLength) {\n    output = '0' + output;\n  }\n  return sign + output;\n}","import toDate from \"../toDate/index.js\";\nimport addLeadingZeros from \"../_lib/addLeadingZeros/index.js\";\nimport requiredArgs from \"../_lib/requiredArgs/index.js\";\n/**\n * @name formatISO\n * @category Common Helpers\n * @summary Format the date according to the ISO 8601 standard (https://support.sas.com/documentation/cdl/en/lrdict/64316/HTML/default/viewer.htm#a003169814.htm).\n *\n * @description\n * Return the formatted date string in ISO 8601 format. Options may be passed to control the parts and notations of the date.\n *\n * @param {Date|Number} date - the original date\n * @param {Object} [options] - an object with options.\n * @param {'extended'|'basic'} [options.format='extended'] - if 'basic', hide delimiters between date and time values.\n * @param {'complete'|'date'|'time'} [options.representation='complete'] - format date, time with local time zone, or both.\n * @returns {String} the formatted date string (in local time zone)\n * @throws {TypeError} 1 argument required\n * @throws {RangeError} `date` must not be Invalid Date\n * @throws {RangeError} `options.format` must be 'extended' or 'basic'\n * @throws {RangeError} `options.representation` must be 'date', 'time' or 'complete'\n *\n * @example\n * // Represent 18 September 2019 in ISO 8601 format (local time zone is UTC):\n * const result = formatISO(new Date(2019, 8, 18, 19, 0, 52))\n * //=> '2019-09-18T19:00:52Z'\n *\n * @example\n * // Represent 18 September 2019 in ISO 8601, short format (local time zone is UTC):\n * const result = formatISO(new Date(2019, 8, 18, 19, 0, 52), { format: 'basic' })\n * //=> '20190918T190052'\n *\n * @example\n * // Represent 18 September 2019 in ISO 8601 format, date only:\n * const result = formatISO(new Date(2019, 8, 18, 19, 0, 52), { representation: 'date' })\n * //=> '2019-09-18'\n *\n * @example\n * // Represent 18 September 2019 in ISO 8601 format, time only (local time zone is UTC):\n * const result = formatISO(new Date(2019, 8, 18, 19, 0, 52), { representation: 'time' })\n * //=> '19:00:52Z'\n */\nexport default function formatISO(date, options) {\n  var _options$format, _options$representati;\n  requiredArgs(1, arguments);\n  var originalDate = toDate(date);\n  if (isNaN(originalDate.getTime())) {\n    throw new RangeError('Invalid time value');\n  }\n  var format = String((_options$format = options === null || options === void 0 ? void 0 : options.format) !== null && _options$format !== void 0 ? _options$format : 'extended');\n  var representation = String((_options$representati = options === null || options === void 0 ? void 0 : options.representation) !== null && _options$representati !== void 0 ? _options$representati : 'complete');\n  if (format !== 'extended' && format !== 'basic') {\n    throw new RangeError(\"format must be 'extended' or 'basic'\");\n  }\n  if (representation !== 'date' && representation !== 'time' && representation !== 'complete') {\n    throw new RangeError(\"representation must be 'date', 'time', or 'complete'\");\n  }\n  var result = '';\n  var tzOffset = '';\n  var dateDelimiter = format === 'extended' ? '-' : '';\n  var timeDelimiter = format === 'extended' ? ':' : '';\n\n  // Representation is either 'date' or 'complete'\n  if (representation !== 'time') {\n    var day = addLeadingZeros(originalDate.getDate(), 2);\n    var month = addLeadingZeros(originalDate.getMonth() + 1, 2);\n    var year = addLeadingZeros(originalDate.getFullYear(), 4);\n\n    // yyyyMMdd or yyyy-MM-dd.\n    result = \"\".concat(year).concat(dateDelimiter).concat(month).concat(dateDelimiter).concat(day);\n  }\n\n  // Representation is either 'time' or 'complete'\n  if (representation !== 'date') {\n    // Add the timezone.\n    var offset = originalDate.getTimezoneOffset();\n    if (offset !== 0) {\n      var absoluteOffset = Math.abs(offset);\n      var hourOffset = addLeadingZeros(Math.floor(absoluteOffset / 60), 2);\n      var minuteOffset = addLeadingZeros(absoluteOffset % 60, 2);\n      // If less than 0, the sign is +, because it is ahead of time.\n      var sign = offset < 0 ? '+' : '-';\n      tzOffset = \"\".concat(sign).concat(hourOffset, \":\").concat(minuteOffset);\n    } else {\n      tzOffset = 'Z';\n    }\n    var hour = addLeadingZeros(originalDate.getHours(), 2);\n    var minute = addLeadingZeros(originalDate.getMinutes(), 2);\n    var second = addLeadingZeros(originalDate.getSeconds(), 2);\n\n    // If there's also date, separate it with time with 'T'\n    var separator = result === '' ? '' : 'T';\n\n    // Creates a time string consisting of hour, minute, and second, separated by delimiters, if defined.\n    var time = [hour, minute, second].join(timeDelimiter);\n\n    // HHmmss or HH:mm:ss.\n    result = \"\".concat(result).concat(separator).concat(time).concat(tzOffset);\n  }\n  return result;\n}","import classnames from 'classnames';\nimport { differenceInMilliseconds, formatISO } from 'date-fns';\nimport { type ChangeEvent, useCallback, useEffect, useId, useRef, useState } from 'react';\nimport { Icon, type IconicNames, type IconicTypes } from '@clubmed/trident-icons';\n\nimport { useValue } from '@/hooks/useValue.js';\nimport { useInternalStatus } from '@/hooks/useInternalStatus.js';\nimport { FormControl, type FormControlProps } from './FormControl.js';\n\ninterface DateFieldProps extends Omit<FormControlProps<Date | null>, 'max' | 'min'> {\n  description?: string;\n  /**\n   * Open datepicker text\n   */\n  openDatepicker?: string;\n  id?: string;\n  icon?: IconicNames;\n  iconType?: IconicTypes;\n  errorMessage?: string;\n  dataTestId?: string;\n  /**\n   * Minimum Date allowed\n   */\n  min?: Date | undefined;\n  /**\n   * Maximum Date allowed\n   */\n  max?: Date | undefined;\n}\n\nconst formatDate = (value: Date | number | undefined | null): string => {\n  if (!value) {\n    return '';\n  }\n\n  return formatISO(new Date(value), { representation: 'date' });\n};\n\nconst validateDateRange = (date: string, min?: Date, max?: Date): boolean => {\n  if (!date) {\n    return true;\n  }\n\n  const normalizeDate = (d: Date) => new Date(d.getFullYear(), d.getMonth(), d.getDate());\n  const inputDate = new Date(date);\n  const normalizedInputDate = normalizeDate(inputDate);\n\n  if (min && normalizedInputDate < normalizeDate(min)) {\n    return false;\n  }\n  if (max && normalizedInputDate > normalizeDate(max)) {\n    return false;\n  }\n\n  return true;\n};\n\nexport const DateField = (props: DateFieldProps) => {\n  const internalId = useId();\n\n  const {\n    id = internalId,\n    name = id,\n    label,\n    description,\n    openDatepicker,\n    validationStatus = 'default',\n    icon = 'CalendarDefault',\n    iconType,\n    errorMessage,\n    disabled = false,\n    required = false,\n    hideRequiredStar,\n    dataTestId = 'DateField',\n    value: initialValue,\n    min: initialMin,\n    max: initialMax,\n    onChange,\n    ...rest\n  } = props;\n\n  // NO LOGIC IS IMPLEMENTED YET HERE\n  // THIS IS A VISUAL COMPONENT ONLY\n  const ref = useRef<HTMLInputElement>(null);\n  const [isFocused, setIsFocused] = useState<boolean>(false);\n\n  const internalStatus = useInternalStatus({\n    isDisabled: disabled,\n    validationStatus,\n  });\n\n  const { setValue, value } = useValue<string, Date | number | undefined | null>({\n    name,\n    formatter: formatDate as never,\n    initialValue,\n    onChange: (name, value) => onChange?.(name, new Date(value)),\n  });\n\n  const min = formatDate(initialMin);\n  const max = formatDate(initialMax);\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    setValue(event.target.value);\n  };\n\n  const handleClickPicker = () => {\n    ref.current?.showPicker();\n  };\n\n  const handleOutOfRangeDate = useCallback(() => {\n    const currentDate = new Date(value);\n\n    if (initialMin && initialMax) {\n      const distanceToMin = Math.abs(differenceInMilliseconds(currentDate, initialMin));\n      const distanceToMax = Math.abs(differenceInMilliseconds(currentDate, initialMax));\n      setValue(distanceToMin <= distanceToMax ? min : max);\n      return;\n    }\n\n    if (initialMin) {\n      setValue(min);\n      return;\n    }\n\n    if (initialMax) {\n      setValue(max);\n      return;\n    }\n  }, [initialMax, initialMin, max, min, setValue, value]);\n\n  useEffect(() => {\n    const isValid = validateDateRange(value, initialMin, initialMax);\n    if (!isValid && !isFocused) {\n      handleOutOfRangeDate();\n    }\n  }, [handleOutOfRangeDate, initialMax, initialMin, isFocused, value]);\n\n  return (\n    <FormControl\n      id={id}\n      label={label}\n      description={description}\n      dataName=\"DateField\"\n      dataTestId={dataTestId}\n      disabled={disabled}\n      required={required}\n      hideRequiredStar={hideRequiredStar}\n      validationStatus={validationStatus}\n      errorMessage={errorMessage}\n    >\n      <div className=\"relative\">\n        <input\n          {...rest}\n          type=\"date\"\n          className={classnames(\n            'text-b3 rounded-pill date-field min-h-[50px] w-full border px-20 py-12 ps-[52px] font-normal outline-none',\n            {\n              'border-lightGrey focus:border-black active:border-black':\n                internalStatus === 'default',\n              'pe-[52px]': internalStatus === 'error' || internalStatus === 'success',\n              'bg-pearl text-grey': disabled,\n              'bg-white text-black': !disabled,\n              'border-red': !disabled && internalStatus === 'error',\n              'border-green': !disabled && internalStatus === 'success',\n            },\n          )}\n          id={id}\n          disabled={disabled}\n          required={required}\n          ref={ref}\n          value={value}\n          min={min}\n          max={max}\n          onChange={handleChange}\n          onFocus={() => setIsFocused(true)}\n          onBlur={() => setIsFocused(false)}\n        />\n        <div\n          className={classnames(\n            'pointer-events-none absolute inset-0 flex items-center justify-between px-20 py-12',\n            {\n              'text-grey': disabled,\n              'text-red': !disabled && internalStatus === 'error',\n              'text-green': !disabled && internalStatus === 'success',\n            },\n          )}\n        >\n          <button className=\"pointer-events-auto leading-none\" onClick={handleClickPicker}>\n            <Icon name={icon} iconType={iconType} width=\"24px\" />\n            <span className=\"sr-only\">\n              {openDatepicker}\n              {/* REPLACE THAT WITH SOMETHING LIKE \"OPEN DATEPICKER\" SOONER RATHER THAN LATER PLZ */}\n            </span>\n          </button>\n          <span className=\"ms-auto flex gap-x-8\">\n            {internalStatus === 'error' && <Icon name=\"CrossDefault\" width=\"24px\" />}\n            {internalStatus === 'success' && <Icon name=\"CheckDefault\" width=\"24px\" />}\n          </span>\n        </div>\n      </div>\n    </FormControl>\n  );\n};\n"],"names":["_typeof","o","requiredArgs","required","args","toDate","argument","argStr","differenceInMilliseconds","dateLeft","dateRight","addLeadingZeros","number","targetLength","sign","output","formatISO","date","options","_options$format","_options$representati","originalDate","format","representation","result","tzOffset","dateDelimiter","timeDelimiter","day","month","year","offset","absoluteOffset","hourOffset","minuteOffset","hour","minute","second","separator","time","formatDate","value","validateDateRange","min","max","normalizeDate","d","inputDate","normalizedInputDate","DateField","props","internalId","useId","id","name","label","description","openDatepicker","validationStatus","icon","iconType","errorMessage","disabled","hideRequiredStar","dataTestId","initialValue","initialMin","initialMax","onChange","rest","ref","useRef","isFocused","setIsFocused","useState","internalStatus","useInternalStatus","setValue","useValue","handleChange","event","handleClickPicker","handleOutOfRangeDate","useCallback","currentDate","distanceToMin","distanceToMax","useEffect","jsx","FormControl","jsxs","classnames","Icon"],"mappings":";;;;;;;AAAe,SAASA,EAAQC,GAAG;AACjC;AAEA,SAAOD,IAAwB,OAAO,UAArB,cAA2C,OAAO,OAAO,YAA1B,WAAqC,SAAUC,GAAG;AAChG,WAAO,OAAOA;AAAA,EAChB,IAAI,SAAUA,GAAG;AACf,WAAOA,KAAmB,OAAO,UAArB,cAA+BA,EAAE,gBAAgB,UAAUA,MAAM,OAAO,YAAY,WAAW,OAAOA;AAAA,EACpH,GAAGD,EAAQC,CAAC;AACd;ACRe,SAASC,EAAaC,GAAUC,GAAM;AACnD,MAAIA,EAAK,SAASD;AAChB,UAAM,IAAI,UAAUA,IAAW,eAAeA,IAAW,IAAI,MAAM,MAAM,yBAAyBC,EAAK,SAAS,UAAU;AAE9H;AC4Be,SAASC,EAAOC,GAAU;AACvC,EAAAJ,EAAa,GAAG,SAAS;AACzB,MAAIK,IAAS,OAAO,UAAU,SAAS,KAAKD,CAAQ;AAGpD,SAAIA,aAAoB,QAAQN,EAAQM,CAAQ,MAAM,YAAYC,MAAW,kBAEpE,IAAI,KAAKD,EAAS,SAAS,IACzB,OAAOA,KAAa,YAAYC,MAAW,oBAC7C,IAAI,KAAKD,CAAQ,MAEnB,OAAOA,KAAa,YAAYC,MAAW,sBAAsB,OAAO,UAAY,QAEvF,QAAQ,KAAK,oNAAoN,GAEjO,QAAQ,KAAK,IAAI,MAAK,EAAG,KAAK,IAEzB,oBAAI,KAAK,GAAG;AAEvB;AC3Be,SAASC,EAAyBC,GAAUC,GAAW;AACpE,SAAAR,EAAa,GAAG,SAAS,GAClBG,EAAOI,CAAQ,EAAE,QAAO,IAAKJ,EAAOK,CAAS,EAAE,QAAO;AAC/D;AC3Be,SAASC,EAAgBC,GAAQC,GAAc;AAG5D,WAFIC,IAAOF,IAAS,IAAI,MAAM,IAC1BG,IAAS,KAAK,IAAIH,CAAM,EAAE,SAAQ,GAC/BG,EAAO,SAASF;AACrB,IAAAE,IAAS,MAAMA;AAEjB,SAAOD,IAAOC;AAChB;ACkCe,SAASC,EAAUC,GAAMC,GAAS;AAC/C,MAAIC,GAAiBC;AACrB,EAAAlB,EAAa,GAAG,SAAS;AACzB,MAAImB,IAAehB,EAAOY,CAAI;AAC9B,MAAI,MAAMI,EAAa,QAAO,CAAE;AAC9B,UAAM,IAAI,WAAW,oBAAoB;AAE3C,MAAIC,IAAS,QAAQH,IAAoED,GAAQ,YAAY,QAAQC,MAAoB,SAASA,IAAkB,UAAU,GAC1KI,IAAiB,QAAQH,IAA0EF,GAAQ,oBAAoB,QAAQE,MAA0B,SAASA,IAAwB,UAAU;AAChN,MAAIE,MAAW,cAAcA,MAAW;AACtC,UAAM,IAAI,WAAW,sCAAsC;AAE7D,MAAIC,MAAmB,UAAUA,MAAmB,UAAUA,MAAmB;AAC/E,UAAM,IAAI,WAAW,sDAAsD;AAE7E,MAAIC,IAAS,IACTC,IAAW,IACXC,IAAgBJ,MAAW,aAAa,MAAM,IAC9CK,IAAgBL,MAAW,aAAa,MAAM;AAGlD,MAAIC,MAAmB,QAAQ;AAC7B,QAAIK,IAAMjB,EAAgBU,EAAa,QAAO,GAAI,CAAC,GAC/CQ,IAAQlB,EAAgBU,EAAa,SAAQ,IAAK,GAAG,CAAC,GACtDS,IAAOnB,EAAgBU,EAAa,YAAW,GAAI,CAAC;AAGxD,IAAAG,IAAS,GAAG,OAAOM,CAAI,EAAE,OAAOJ,CAAa,EAAE,OAAOG,CAAK,EAAE,OAAOH,CAAa,EAAE,OAAOE,CAAG;AAAA,EAC/F;AAGA,MAAIL,MAAmB,QAAQ;AAE7B,QAAIQ,IAASV,EAAa,kBAAiB;AAC3C,QAAIU,MAAW,GAAG;AAChB,UAAIC,IAAiB,KAAK,IAAID,CAAM,GAChCE,IAAatB,EAAgB,KAAK,MAAMqB,IAAiB,EAAE,GAAG,CAAC,GAC/DE,IAAevB,EAAgBqB,IAAiB,IAAI,CAAC,GAErDlB,IAAOiB,IAAS,IAAI,MAAM;AAC9B,MAAAN,IAAW,GAAG,OAAOX,CAAI,EAAE,OAAOmB,GAAY,GAAG,EAAE,OAAOC,CAAY;AAAA,IACxE;AACE,MAAAT,IAAW;AAEb,QAAIU,IAAOxB,EAAgBU,EAAa,SAAQ,GAAI,CAAC,GACjDe,IAASzB,EAAgBU,EAAa,WAAU,GAAI,CAAC,GACrDgB,IAAS1B,EAAgBU,EAAa,WAAU,GAAI,CAAC,GAGrDiB,IAAYd,MAAW,KAAK,KAAK,KAGjCe,IAAO,CAACJ,GAAMC,GAAQC,CAAM,EAAE,KAAKV,CAAa;AAGpD,IAAAH,IAAS,GAAG,OAAOA,CAAM,EAAE,OAAOc,CAAS,EAAE,OAAOC,CAAI,EAAE,OAAOd,CAAQ;AAAA,EAC3E;AACA,SAAOD;AACT;ACrEA,MAAMgB,IAAa,CAACC,MACbA,IAIEzB,EAAU,IAAI,KAAKyB,CAAK,GAAG,EAAE,gBAAgB,QAAQ,IAHnD,IAMLC,IAAoB,CAACzB,GAAc0B,GAAYC,MAAwB;AAC3E,MAAI,CAAC3B;AACH,WAAO;AAGT,QAAM4B,IAAgB,CAACC,MAAY,IAAI,KAAKA,EAAE,YAAA,GAAeA,EAAE,SAAA,GAAYA,EAAE,SAAS,GAChFC,IAAY,IAAI,KAAK9B,CAAI,GACzB+B,IAAsBH,EAAcE,CAAS;AAKnD,SAHI,EAAAJ,KAAOK,IAAsBH,EAAcF,CAAG,KAG9CC,KAAOI,IAAsBH,EAAcD,CAAG;AAKpD,GAEaK,KAAY,CAACC,MAA0B;AAClD,QAAMC,IAAaC,EAAA,GAEb;AAAA,IACJ,IAAAC,IAAKF;AAAA,IACL,MAAAG,IAAOD;AAAA,IACP,OAAAE;AAAA,IACA,aAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,kBAAAC,IAAmB;AAAA,IACnB,MAAAC,IAAO;AAAA,IACP,UAAAC;AAAA,IACA,cAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,UAAA3D,IAAW;AAAA,IACX,kBAAA4D;AAAA,IACA,YAAAC,IAAa;AAAA,IACb,OAAOC;AAAA,IACP,KAAKC;AAAA,IACL,KAAKC;AAAA,IACL,UAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACDnB,GAIEoB,IAAMC,EAAyB,IAAI,GACnC,CAACC,GAAWC,CAAY,IAAIC,EAAkB,EAAK,GAEnDC,IAAiBC,EAAkB;AAAA,IACvC,YAAYd;AAAA,IACZ,kBAAAJ;AAAA,EAAA,CACD,GAEK,EAAE,UAAAmB,GAAU,OAAApC,EAAA,IAAUqC,EAAmD;AAAA,IAC7E,MAAAxB;AAAA,IACA,WAAWd;AAAA,IACX,cAAAyB;AAAA,IACA,UAAU,CAACX,GAAMb,MAAU2B,IAAWd,GAAM,IAAI,KAAKb,CAAK,CAAC;AAAA,EAAA,CAC5D,GAEKE,IAAMH,EAAW0B,CAAU,GAC3BtB,IAAMJ,EAAW2B,CAAU,GAE3BY,IAAe,CAACC,MAAyC;AAC7D,IAAAH,EAASG,EAAM,OAAO,KAAK;AAAA,EAC7B,GAEMC,IAAoB,MAAM;AAC9B,IAAAX,EAAI,SAAS,WAAA;AAAA,EACf,GAEMY,IAAuBC,EAAY,MAAM;AAC7C,UAAMC,IAAc,IAAI,KAAK3C,CAAK;AAElC,QAAIyB,KAAcC,GAAY;AAC5B,YAAMkB,IAAgB,KAAK,IAAI7E,EAAyB4E,GAAalB,CAAU,CAAC,GAC1EoB,IAAgB,KAAK,IAAI9E,EAAyB4E,GAAajB,CAAU,CAAC;AAChF,MAAAU,EAASQ,KAAiBC,IAAgB3C,IAAMC,CAAG;AACnD;AAAA,IACF;AAEA,QAAIsB,GAAY;AACd,MAAAW,EAASlC,CAAG;AACZ;AAAA,IACF;AAEA,QAAIwB,GAAY;AACd,MAAAU,EAASjC,CAAG;AACZ;AAAA,IACF;AAAA,EACF,GAAG,CAACuB,GAAYD,GAAYtB,GAAKD,GAAKkC,GAAUpC,CAAK,CAAC;AAEtD,SAAA8C,EAAU,MAAM;AAEd,IAAI,CADY7C,EAAkBD,GAAOyB,GAAYC,CAAU,KAC/C,CAACK,KACfU,EAAA;AAAA,EAEJ,GAAG,CAACA,GAAsBf,GAAYD,GAAYM,GAAW/B,CAAK,CAAC,GAGjE,gBAAA+C;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,IAAApC;AAAA,MACA,OAAAE;AAAA,MACA,aAAAC;AAAA,MACA,UAAS;AAAA,MACT,YAAAQ;AAAA,MACA,UAAAF;AAAA,MACA,UAAA3D;AAAA,MACA,kBAAA4D;AAAA,MACA,kBAAAL;AAAA,MACA,cAAAG;AAAA,MAEA,UAAA,gBAAA6B,EAAC,OAAA,EAAI,WAAU,YACb,UAAA;AAAA,QAAA,gBAAAF;AAAA,UAAC;AAAA,UAAA;AAAA,YACE,GAAGnB;AAAA,YACJ,MAAK;AAAA,YACL,WAAWsB;AAAA,cACT;AAAA,cACA;AAAA,gBACE,2DACEhB,MAAmB;AAAA,gBACrB,aAAaA,MAAmB,WAAWA,MAAmB;AAAA,gBAC9D,sBAAsBb;AAAA,gBACtB,uBAAuB,CAACA;AAAA,gBACxB,cAAc,CAACA,KAAYa,MAAmB;AAAA,gBAC9C,gBAAgB,CAACb,KAAYa,MAAmB;AAAA,cAAA;AAAA,YAClD;AAAA,YAEF,IAAAtB;AAAA,YACA,UAAAS;AAAA,YACA,UAAA3D;AAAA,YACA,KAAAmE;AAAA,YACA,OAAA7B;AAAA,YACA,KAAAE;AAAA,YACA,KAAAC;AAAA,YACA,UAAUmC;AAAA,YACV,SAAS,MAAMN,EAAa,EAAI;AAAA,YAChC,QAAQ,MAAMA,EAAa,EAAK;AAAA,UAAA;AAAA,QAAA;AAAA,QAElC,gBAAAiB;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWC;AAAA,cACT;AAAA,cACA;AAAA,gBACE,aAAa7B;AAAA,gBACb,YAAY,CAACA,KAAYa,MAAmB;AAAA,gBAC5C,cAAc,CAACb,KAAYa,MAAmB;AAAA,cAAA;AAAA,YAChD;AAAA,YAGF,UAAA;AAAA,cAAA,gBAAAe,EAAC,UAAA,EAAO,WAAU,oCAAmC,SAAST,GAC5D,UAAA;AAAA,gBAAA,gBAAAO,EAACI,GAAA,EAAK,MAAMjC,GAAM,UAAAC,GAAoB,OAAM,QAAO;AAAA,gBACnD,gBAAA4B,EAAC,QAAA,EAAK,WAAU,WACb,UAAA/B,EAAA,CAEH;AAAA,cAAA,GACF;AAAA,cACA,gBAAAiC,EAAC,QAAA,EAAK,WAAU,wBACb,UAAA;AAAA,gBAAAf,MAAmB,WAAW,gBAAAa,EAACI,GAAA,EAAK,MAAK,gBAAe,OAAM,QAAO;AAAA,gBACrEjB,MAAmB,aAAa,gBAAAa,EAACI,KAAK,MAAK,gBAAe,OAAM,OAAA,CAAO;AAAA,cAAA,EAAA,CAC1E;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACF,EAAA,CACF;AAAA,IAAA;AAAA,EAAA;AAGN;","x_google_ignoreList":[0,1,2,3,4,5]}

package/molecules/Forms/Filter.d.ts

@@ -1,5 +1,4 @@
-import { type InputHTMLAttributes } from 'react';
-import './controls.css';
+import { InputHTMLAttributes } from 'react';
 export interface FilterProps<Value = string> extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
     /**
      * The data-testid to apply to the button.

package/molecules/Forms/Filter.js

@@ -1,52 +1,52 @@
-import { jsxs as i, jsx as e } from "react/jsx-runtime";
-import { c as r } from "../../chunks/index.js";
-import { useId as D } from "react";
+import { jsxs as s, jsx as e } from "react/jsx-runtime";
+import { c as i } from "../../chunks/index.js";
+import { useId as v } from "react";
 /* empty css                    */
-import { Icon as c } from "@clubmed/trident-icons";
-import { useValue as N } from "../../hooks/useValue.js";
-function A(m) {
-  const d = D(), {
-    id: u = d,
-    name: l = u,
-    className: p,
+import { Icon as r } from "@clubmed/trident-icons";
+import { useValue as D } from "../../hooks/useValue.js";
+function A(c) {
+  const m = v(), {
+    id: d = m,
+    name: t = d,
+    className: u,
     dataTestId: h,
-    disabled: n,
-    checked: f = !1,
+    disabled: l,
+    checked: p = !1,
     value: a,
-    tabIndex: b = 0,
-    onChange: t,
+    tabIndex: f = 0,
+    onChange: b,
     hasDropdown: x,
     children: k,
     ...w
-  } = m, { value: o, setValue: I } = N({
-    name: l,
-    initialValue: f,
-    onChange(v, s) {
-      t == null || t(v, s ? a !== void 0 ? a : s : null);
+  } = c, { value: n, setValue: C } = D({
+    name: t,
+    initialValue: p,
+    onChange(I, o) {
+      b?.(I, o ? a !== void 0 ? a : o : null);
     }
   });
-  return /* @__PURE__ */ i("label", { className: r(p, "relative"), children: [
+  return /* @__PURE__ */ s("label", { className: i(u, "relative"), children: [
     /* @__PURE__ */ e(
       "input",
       {
         ...w,
-        name: l,
+        name: t,
         "data-testid": h,
         type: "checkbox",
-        tabIndex: b,
+        tabIndex: f,
         onChange: () => {
-          !n && I(!o);
+          !l && C(!n);
         },
-        checked: o,
+        checked: n,
         "data-name": "Filter",
-        disabled: n,
+        disabled: l,
         value: a
       }
     ),
-    /* @__PURE__ */ i("span", { children: [
-      /* @__PURE__ */ e("span", { className: r("text-b3 font-semibold"), children: k }),
-      /* @__PURE__ */ e(c, { width: null, name: "CheckDefault", color: "black" }),
-      x && /* @__PURE__ */ e(c, { name: "ArrowDefaultDown", className: "ml-8", width: "24px", color: "black" })
+    /* @__PURE__ */ s("span", { children: [
+      /* @__PURE__ */ e("span", { className: i("text-b3 font-semibold"), children: k }),
+      /* @__PURE__ */ e(r, { width: null, name: "CheckDefault", color: "black" }),
+      x && /* @__PURE__ */ e(r, { name: "ArrowDefaultDown", className: "ml-8", width: "24px", color: "black" })
     ] })
   ] });
 }

package/molecules/Forms/Filter.js.map

@@ -1 +1 @@
-{"version":3,"file":"Filter.js","sources":["../../../lib/molecules/Forms/Filter.tsx"],"sourcesContent":["import classnames from 'classnames';\nimport { type InputHTMLAttributes, useId } from 'react';\nimport './controls.css';\nimport { Icon } from '@clubmed/trident-icons';\nimport { useValue } from '@/hooks/useValue.js';\n\nexport interface FilterProps<Value = string>\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> {\n  /**\n   * The data-testid to apply to the button.\n   * This is used for testing purposes.\n   * */\n  dataTestId?: string;\n  /**\n   * Is it attached to a dropdown?\n   */\n  hasDropdown?: boolean;\n\n  onChange?: (name: string, value: Value | null) => void;\n}\n\nexport function Filter<Value = string>(props: FilterProps<Value>) {\n  const internalId = useId();\n\n  const {\n    id = internalId,\n    name = id,\n    className,\n    dataTestId,\n    disabled,\n    checked: initialChecked = false,\n    value,\n    tabIndex = 0,\n    onChange,\n    hasDropdown,\n    children,\n    ...rest\n  } = props;\n\n  const { value: checked, setValue } = useValue<boolean>({\n    name,\n    initialValue: initialChecked,\n    onChange(name, checked) {\n      onChange?.(name, checked ? ((value !== undefined ? value : checked) as Value) : null);\n    },\n  });\n\n  return (\n    <label className={classnames(className, 'relative')}>\n      <input\n        {...rest}\n        name={name}\n        data-testid={dataTestId}\n        type=\"checkbox\"\n        tabIndex={tabIndex}\n        onChange={() => {\n          !disabled && setValue(!checked);\n        }}\n        checked={checked}\n        data-name=\"Filter\"\n        disabled={disabled}\n        value={value}\n      />\n      <span>\n        <span className={classnames('text-b3 font-semibold')}>{children}</span>\n        <Icon width={null} name=\"CheckDefault\" color=\"black\" />\n        {hasDropdown && (\n          <Icon name=\"ArrowDefaultDown\" className=\"ml-8\" width=\"24px\" color=\"black\" />\n        )}\n      </span>\n    </label>\n  );\n}\n"],"names":["Filter","props","internalId","useId","id","name","className","dataTestId","disabled","initialChecked","value","tabIndex","onChange","hasDropdown","children","rest","checked","setValue","useValue","classnames","jsx","Icon"],"mappings":";;;;;;AAqBO,SAASA,EAAuBC,GAA2B;AAChE,QAAMC,IAAaC,EAAA,GAEb;AAAA,IACJ,IAAAC,IAAKF;AAAA,IACL,MAAAG,IAAOD;AAAA,IACP,WAAAE;AAAA,IACA,YAAAC;AAAA,IACA,UAAAC;AAAA,IACA,SAASC,IAAiB;AAAA,IAC1B,OAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,UAAAC;AAAA,IACA,aAAAC;AAAA,IACA,UAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACDd,GAEE,EAAE,OAAOe,GAAS,UAAAC,EAAA,IAAaC,EAAkB;AAAA,IACrD,MAAAb;AAAA,IACA,cAAcI;AAAA,IACd,SAASJ,GAAMW,GAAS;AACtB,MAAAJ,KAAA,QAAAA,EAAWP,GAAMW,IAAYN,MAAU,SAAYA,IAAQM,IAAqB;AAAA,IAClF;AAAA,EAAA,CACD;AAED,2BACG,SAAA,EAAM,WAAWG,EAAWb,GAAW,UAAU,GAChD,UAAA;AAAA,IAAA,gBAAAc;AAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAGL;AAAA,QACJ,MAAAV;AAAA,QACA,eAAaE;AAAA,QACb,MAAK;AAAA,QACL,UAAAI;AAAA,QACA,UAAU,MAAM;AACd,WAACH,KAAYS,EAAS,CAACD,CAAO;AAAA,QAChC;AAAA,QACA,SAAAA;AAAA,QACA,aAAU;AAAA,QACV,UAAAR;AAAA,QACA,OAAAE;AAAA,MAAA;AAAA,IAAA;AAAA,sBAED,QAAA,EACC,UAAA;AAAA,MAAA,gBAAAU,EAAC,QAAA,EAAK,WAAWD,EAAW,uBAAuB,GAAI,UAAAL,GAAS;AAAA,wBAC/DO,GAAA,EAAK,OAAO,MAAM,MAAK,gBAAe,OAAM,SAAQ;AAAA,MACpDR,KACC,gBAAAO,EAACC,GAAA,EAAK,MAAK,oBAAmB,WAAU,QAAO,OAAM,QAAO,OAAM,QAAA,CAAQ;AAAA,IAAA,EAAA,CAE9E;AAAA,EAAA,GACF;AAEJ;"}
+{"version":3,"file":"Filter.js","sources":["../../../lib/molecules/Forms/Filter.tsx"],"sourcesContent":["import classnames from 'classnames';\nimport { type InputHTMLAttributes, useId } from 'react';\nimport './controls.css';\nimport { Icon } from '@clubmed/trident-icons';\nimport { useValue } from '@/hooks/useValue.js';\n\nexport interface FilterProps<Value = string>\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> {\n  /**\n   * The data-testid to apply to the button.\n   * This is used for testing purposes.\n   * */\n  dataTestId?: string;\n  /**\n   * Is it attached to a dropdown?\n   */\n  hasDropdown?: boolean;\n\n  onChange?: (name: string, value: Value | null) => void;\n}\n\nexport function Filter<Value = string>(props: FilterProps<Value>) {\n  const internalId = useId();\n\n  const {\n    id = internalId,\n    name = id,\n    className,\n    dataTestId,\n    disabled,\n    checked: initialChecked = false,\n    value,\n    tabIndex = 0,\n    onChange,\n    hasDropdown,\n    children,\n    ...rest\n  } = props;\n\n  const { value: checked, setValue } = useValue<boolean>({\n    name,\n    initialValue: initialChecked,\n    onChange(name, checked) {\n      onChange?.(name, checked ? ((value !== undefined ? value : checked) as Value) : null);\n    },\n  });\n\n  return (\n    <label className={classnames(className, 'relative')}>\n      <input\n        {...rest}\n        name={name}\n        data-testid={dataTestId}\n        type=\"checkbox\"\n        tabIndex={tabIndex}\n        onChange={() => {\n          !disabled && setValue(!checked);\n        }}\n        checked={checked}\n        data-name=\"Filter\"\n        disabled={disabled}\n        value={value}\n      />\n      <span>\n        <span className={classnames('text-b3 font-semibold')}>{children}</span>\n        <Icon width={null} name=\"CheckDefault\" color=\"black\" />\n        {hasDropdown && (\n          <Icon name=\"ArrowDefaultDown\" className=\"ml-8\" width=\"24px\" color=\"black\" />\n        )}\n      </span>\n    </label>\n  );\n}\n"],"names":["Filter","props","internalId","useId","id","name","className","dataTestId","disabled","initialChecked","value","tabIndex","onChange","hasDropdown","children","rest","checked","setValue","useValue","classnames","jsx","Icon"],"mappings":";;;;;;AAqBO,SAASA,EAAuBC,GAA2B;AAChE,QAAMC,IAAaC,EAAA,GAEb;AAAA,IACJ,IAAAC,IAAKF;AAAA,IACL,MAAAG,IAAOD;AAAA,IACP,WAAAE;AAAA,IACA,YAAAC;AAAA,IACA,UAAAC;AAAA,IACA,SAASC,IAAiB;AAAA,IAC1B,OAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,UAAAC;AAAA,IACA,aAAAC;AAAA,IACA,UAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACDd,GAEE,EAAE,OAAOe,GAAS,UAAAC,EAAA,IAAaC,EAAkB;AAAA,IACrD,MAAAb;AAAA,IACA,cAAcI;AAAA,IACd,SAASJ,GAAMW,GAAS;AACtB,MAAAJ,IAAWP,GAAMW,IAAYN,MAAU,SAAYA,IAAQM,IAAqB,IAAI;AAAA,IACtF;AAAA,EAAA,CACD;AAED,2BACG,SAAA,EAAM,WAAWG,EAAWb,GAAW,UAAU,GAChD,UAAA;AAAA,IAAA,gBAAAc;AAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAGL;AAAA,QACJ,MAAAV;AAAA,QACA,eAAaE;AAAA,QACb,MAAK;AAAA,QACL,UAAAI;AAAA,QACA,UAAU,MAAM;AACd,WAACH,KAAYS,EAAS,CAACD,CAAO;AAAA,QAChC;AAAA,QACA,SAAAA;AAAA,QACA,aAAU;AAAA,QACV,UAAAR;AAAA,QACA,OAAAE;AAAA,MAAA;AAAA,IAAA;AAAA,sBAED,QAAA,EACC,UAAA;AAAA,MAAA,gBAAAU,EAAC,QAAA,EAAK,WAAWD,EAAW,uBAAuB,GAAI,UAAAL,GAAS;AAAA,wBAC/DO,GAAA,EAAK,OAAO,MAAM,MAAK,gBAAe,OAAM,SAAQ;AAAA,MACpDR,KACC,gBAAAO,EAACC,GAAA,EAAK,MAAK,oBAAmB,WAAU,QAAO,OAAM,QAAO,OAAM,QAAA,CAAQ;AAAA,IAAA,EAAA,CAE9E;AAAA,EAAA,GACF;AAEJ;"}

package/molecules/Forms/FormControl.d.ts

@@ -1,6 +1,6 @@
-import type { HTMLAttributes, InputHTMLAttributes, ReactNode } from 'react';
-import { type ValidationStatus } from '../../hooks/useInternalStatus';
-import { type FormLabelProps } from './FormLabel';
+import { HTMLAttributes, InputHTMLAttributes, ReactNode } from 'react';
+import { ValidationStatus } from '../../hooks/useInternalStatus';
+import { FormLabelProps } from './FormLabel';
 export type FormControlProps<Value = unknown, Attributes extends HTMLAttributes<HTMLElement> = InputHTMLAttributes<HTMLInputElement>> = {
     value?: Value;
     label?: ReactNode;
@@ -10,4 +10,4 @@ export type FormControlProps<Value = unknown, Attributes extends HTMLAttributes<
     dataName?: string;
     errorMessage?: string;
 } & Omit<Attributes & Partial<FormLabelProps>, 'onChange' | 'value'>;
-export declare const FormControl: <Value = string>({ id, label, description, disabled, required, className, validationStatus, children, errorMessage, dataTestId, dataName, hideRequiredStar, layout, }: FormControlProps<Value, InputHTMLAttributes<HTMLInputElement>>) => import("react/jsx-runtime").JSX.Element;
+export declare const FormControl: <Value = string>({ id, label, description, disabled, required, className, validationStatus, children, errorMessage, dataTestId, dataName, hideRequiredStar, layout, }: FormControlProps<Value>) => import("react/jsx-runtime").JSX.Element;

package/molecules/Forms/FormLabel.d.ts

@@ -1,4 +1,4 @@
-import type { LabelHTMLAttributes } from 'react';
+import { LabelHTMLAttributes } from 'react';
 export interface FormLabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
     description?: string;
     layout?: 'horizontal' | 'vertical';