@clubmed/trident-ui 2.0.0-beta.63 → 2.0.0-beta.65

package/chunks/Backdrop.js

@@ -87,7 +87,7 @@ var c = 5, l = 6, u = [
 			className: e(i, "fixed inset-0 isolate items-center"),
 			children: [/* @__PURE__ */ o("button", {
 				"aria-hidden": "true",
-				className: e("absolute inset-0 -z-1 transition-all duration-500", {
+				className: e("absolute inset-0 -z-1 transition-all duration-500 outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2", {
 					"bg-white/80 backdrop-blur": !g,
 					"bg-white/0 backdrop-blur-none": g,
 					"-translate-x-full": u && (m === "preEnter" || m === "entering"),

package/chunks/Backdrop.js.map

@@ -1 +1 @@
-{"version":3,"file":"Backdrop.js","names":[],"sources":["../../../../node_modules/.pnpm/react-transition-state@2.3.3_react-dom@19.2.4_react@19.2.4__react@19.2.4/node_modules/react-transition-state/dist/esm/utils.mjs","../../../../node_modules/.pnpm/react-transition-state@2.3.3_react-dom@19.2.4_react@19.2.4__react@19.2.4/node_modules/react-transition-state/dist/esm/useTransitionState.mjs","../../lib/ui/Backdrop.tsx"],"sourcesContent":["//#region src/utils.ts\nconst PRE_ENTER = 0;\nconst ENTERING = 1;\nconst ENTERED = 2;\nconst PRE_EXIT = 3;\nconst EXITING = 4;\nconst EXITED = 5;\nconst UNMOUNTED = 6;\nconst STATUS = [\n\t\"preEnter\",\n\t\"entering\",\n\t\"entered\",\n\t\"preExit\",\n\t\"exiting\",\n\t\"exited\",\n\t\"unmounted\"\n];\nconst getState = (status) => ({\n\t_s: status,\n\tstatus: STATUS[status],\n\tisEnter: status < PRE_EXIT,\n\tisMounted: status !== UNMOUNTED,\n\tisResolved: status === ENTERED || status > EXITING\n});\nconst startOrEnd = (unmounted) => unmounted ? UNMOUNTED : EXITED;\nconst getEndStatus = (status, unmountOnExit) => {\n\tswitch (status) {\n\t\tcase ENTERING:\n\t\tcase PRE_ENTER: return ENTERED;\n\t\tcase EXITING:\n\t\tcase PRE_EXIT: return startOrEnd(unmountOnExit);\n\t}\n};\nconst getTimeout = (timeout) => typeof timeout === \"object\" ? [timeout.enter, timeout.exit] : [timeout, timeout];\nconst _setTimeout = (...args) => setTimeout(...args);\nconst nextTick = (transitState, status) => _setTimeout(() => {\n\tisNaN(document.body.offsetTop) || transitState(status + 1);\n}, 0);\n\n//#endregion\nexport { ENTERED, ENTERING, EXITING, PRE_ENTER, PRE_EXIT, _setTimeout, getEndStatus, getState, getTimeout, nextTick, startOrEnd };","import { ENTERED, ENTERING, EXITING, PRE_ENTER, PRE_EXIT, _setTimeout, getEndStatus, getState, getTimeout, nextTick, startOrEnd } from \"./utils.mjs\";\nimport { useCallback, useRef, useState } from \"react\";\n\n//#region src/useTransitionState.ts\nconst updateState = (status, setState, latestState, timeoutId, onChange) => {\n\tclearTimeout(timeoutId.current);\n\tconst state = getState(status);\n\tsetState(state);\n\tlatestState.current = state;\n\tonChange && onChange({ current: state });\n};\nconst useTransitionState = ({ enter = true, exit = true, preEnter, preExit, timeout, initialEntered, mountOnEnter, unmountOnExit, onStateChange: onChange } = {}) => {\n\tconst [state, setState] = useState(() => getState(initialEntered ? ENTERED : startOrEnd(mountOnEnter)));\n\tconst latestState = useRef(state);\n\tconst timeoutId = useRef(0);\n\tconst [enterTimeout, exitTimeout] = getTimeout(timeout);\n\tconst endTransition = useCallback(() => {\n\t\tconst status = getEndStatus(latestState.current._s, unmountOnExit);\n\t\tstatus && updateState(status, setState, latestState, timeoutId, onChange);\n\t}, [onChange, unmountOnExit]);\n\treturn [\n\t\tstate,\n\t\tuseCallback((toEnter) => {\n\t\t\tconst transitState = (status) => {\n\t\t\t\tupdateState(status, setState, latestState, timeoutId, onChange);\n\t\t\t\tswitch (status) {\n\t\t\t\t\tcase ENTERING:\n\t\t\t\t\t\tif (enterTimeout >= 0) timeoutId.current = _setTimeout(endTransition, enterTimeout);\n\t\t\t\t\t\tbreak;\n\t\t\t\t\tcase EXITING:\n\t\t\t\t\t\tif (exitTimeout >= 0) timeoutId.current = _setTimeout(endTransition, exitTimeout);\n\t\t\t\t\t\tbreak;\n\t\t\t\t\tcase PRE_ENTER:\n\t\t\t\t\tcase PRE_EXIT:\n\t\t\t\t\t\ttimeoutId.current = nextTick(transitState, status);\n\t\t\t\t\t\tbreak;\n\t\t\t\t}\n\t\t\t};\n\t\t\tconst enterStage = latestState.current.isEnter;\n\t\t\tif (typeof toEnter !== \"boolean\") toEnter = !enterStage;\n\t\t\tif (toEnter) !enterStage && transitState(enter ? preEnter ? PRE_ENTER : ENTERING : ENTERED);\n\t\t\telse enterStage && transitState(exit ? preExit ? PRE_EXIT : EXITING : startOrEnd(unmountOnExit));\n\t\t}, [\n\t\t\tendTransition,\n\t\t\tonChange,\n\t\t\tenter,\n\t\t\texit,\n\t\t\tpreEnter,\n\t\t\tpreExit,\n\t\t\tenterTimeout,\n\t\t\texitTimeout,\n\t\t\tunmountOnExit\n\t\t]),\n\t\tendTransition\n\t];\n};\n\n//#endregion\nexport { useTransitionState };","import {\n  type ComponentProps,\n  type FunctionComponent,\n  type MouseEvent,\n  type PropsWithChildren,\n  useEffect,\n} from 'react';\nimport clsx from 'clsx';\nimport { useTransitionState } from 'react-transition-state';\nimport { Portal } from './Portal';\n\nexport interface BackdropProps extends ComponentProps<'div'> {\n  /**\n   * On close\n   * @param event\n   */\n  onClose?: (event: MouseEvent<HTMLButtonElement>) => void;\n  /**\n   * Is visible\n   */\n  isVisible?: boolean;\n  /**\n   * Sweep Mode™\n   * (makes it appear from the sides instead of from everywhere)\n   */\n  sweep?: boolean;\n  /**\n   * Target ID for the Portal component\n   */\n  target?: ComponentProps<typeof Portal>['target'];\n}\n\nexport const Backdrop: FunctionComponent<PropsWithChildren<BackdropProps>> = ({\n  children,\n  className = 'flex justify-center',\n  onClose,\n  isVisible,\n  target = 'backdrop',\n  sweep = false,\n  ...attrs\n}) => {\n  const [state, toggle] = useTransitionState({\n    timeout: { enter: 0, exit: 500 },\n    mountOnEnter: true,\n    unmountOnExit: true,\n    preEnter: true,\n  });\n\n  const { status, isMounted } = state;\n\n  useEffect(() => {\n    toggle(isVisible);\n  }, [isVisible, toggle]);\n\n  const animated = status === 'preEnter' || status === 'exiting';\n\n  return (\n    <Portal target={target}>\n      {isMounted && (\n        <div\n          {...attrs}\n          role=\"presentation\"\n          className={clsx(className, 'fixed inset-0 isolate items-center')}\n        >\n          <button\n            aria-hidden=\"true\"\n            className={clsx('absolute inset-0 -z-1 transition-all duration-500', {\n              'bg-white/80 backdrop-blur': !animated,\n              'bg-white/0 backdrop-blur-none': animated,\n              '-translate-x-full': sweep && (status === 'preEnter' || status === 'entering'),\n              'translate-x-full': sweep && status === 'exiting',\n            })}\n            onClick={onClose}\n            type=\"button\"\n          />\n          {children}\n        </div>\n      )}\n    </Portal>\n  );\n};\n"],"x_google_ignoreList":[0,1],"mappings":"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"}
+{"version":3,"file":"Backdrop.js","names":[],"sources":["../../../../node_modules/.pnpm/react-transition-state@2.3.3_react-dom@19.2.4_react@19.2.4__react@19.2.4/node_modules/react-transition-state/dist/esm/utils.mjs","../../../../node_modules/.pnpm/react-transition-state@2.3.3_react-dom@19.2.4_react@19.2.4__react@19.2.4/node_modules/react-transition-state/dist/esm/useTransitionState.mjs","../../lib/ui/Backdrop.tsx"],"sourcesContent":["//#region src/utils.ts\nconst PRE_ENTER = 0;\nconst ENTERING = 1;\nconst ENTERED = 2;\nconst PRE_EXIT = 3;\nconst EXITING = 4;\nconst EXITED = 5;\nconst UNMOUNTED = 6;\nconst STATUS = [\n\t\"preEnter\",\n\t\"entering\",\n\t\"entered\",\n\t\"preExit\",\n\t\"exiting\",\n\t\"exited\",\n\t\"unmounted\"\n];\nconst getState = (status) => ({\n\t_s: status,\n\tstatus: STATUS[status],\n\tisEnter: status < PRE_EXIT,\n\tisMounted: status !== UNMOUNTED,\n\tisResolved: status === ENTERED || status > EXITING\n});\nconst startOrEnd = (unmounted) => unmounted ? UNMOUNTED : EXITED;\nconst getEndStatus = (status, unmountOnExit) => {\n\tswitch (status) {\n\t\tcase ENTERING:\n\t\tcase PRE_ENTER: return ENTERED;\n\t\tcase EXITING:\n\t\tcase PRE_EXIT: return startOrEnd(unmountOnExit);\n\t}\n};\nconst getTimeout = (timeout) => typeof timeout === \"object\" ? [timeout.enter, timeout.exit] : [timeout, timeout];\nconst _setTimeout = (...args) => setTimeout(...args);\nconst nextTick = (transitState, status) => _setTimeout(() => {\n\tisNaN(document.body.offsetTop) || transitState(status + 1);\n}, 0);\n\n//#endregion\nexport { ENTERED, ENTERING, EXITING, PRE_ENTER, PRE_EXIT, _setTimeout, getEndStatus, getState, getTimeout, nextTick, startOrEnd };","import { ENTERED, ENTERING, EXITING, PRE_ENTER, PRE_EXIT, _setTimeout, getEndStatus, getState, getTimeout, nextTick, startOrEnd } from \"./utils.mjs\";\nimport { useCallback, useRef, useState } from \"react\";\n\n//#region src/useTransitionState.ts\nconst updateState = (status, setState, latestState, timeoutId, onChange) => {\n\tclearTimeout(timeoutId.current);\n\tconst state = getState(status);\n\tsetState(state);\n\tlatestState.current = state;\n\tonChange && onChange({ current: state });\n};\nconst useTransitionState = ({ enter = true, exit = true, preEnter, preExit, timeout, initialEntered, mountOnEnter, unmountOnExit, onStateChange: onChange } = {}) => {\n\tconst [state, setState] = useState(() => getState(initialEntered ? ENTERED : startOrEnd(mountOnEnter)));\n\tconst latestState = useRef(state);\n\tconst timeoutId = useRef(0);\n\tconst [enterTimeout, exitTimeout] = getTimeout(timeout);\n\tconst endTransition = useCallback(() => {\n\t\tconst status = getEndStatus(latestState.current._s, unmountOnExit);\n\t\tstatus && updateState(status, setState, latestState, timeoutId, onChange);\n\t}, [onChange, unmountOnExit]);\n\treturn [\n\t\tstate,\n\t\tuseCallback((toEnter) => {\n\t\t\tconst transitState = (status) => {\n\t\t\t\tupdateState(status, setState, latestState, timeoutId, onChange);\n\t\t\t\tswitch (status) {\n\t\t\t\t\tcase ENTERING:\n\t\t\t\t\t\tif (enterTimeout >= 0) timeoutId.current = _setTimeout(endTransition, enterTimeout);\n\t\t\t\t\t\tbreak;\n\t\t\t\t\tcase EXITING:\n\t\t\t\t\t\tif (exitTimeout >= 0) timeoutId.current = _setTimeout(endTransition, exitTimeout);\n\t\t\t\t\t\tbreak;\n\t\t\t\t\tcase PRE_ENTER:\n\t\t\t\t\tcase PRE_EXIT:\n\t\t\t\t\t\ttimeoutId.current = nextTick(transitState, status);\n\t\t\t\t\t\tbreak;\n\t\t\t\t}\n\t\t\t};\n\t\t\tconst enterStage = latestState.current.isEnter;\n\t\t\tif (typeof toEnter !== \"boolean\") toEnter = !enterStage;\n\t\t\tif (toEnter) !enterStage && transitState(enter ? preEnter ? PRE_ENTER : ENTERING : ENTERED);\n\t\t\telse enterStage && transitState(exit ? preExit ? PRE_EXIT : EXITING : startOrEnd(unmountOnExit));\n\t\t}, [\n\t\t\tendTransition,\n\t\t\tonChange,\n\t\t\tenter,\n\t\t\texit,\n\t\t\tpreEnter,\n\t\t\tpreExit,\n\t\t\tenterTimeout,\n\t\t\texitTimeout,\n\t\t\tunmountOnExit\n\t\t]),\n\t\tendTransition\n\t];\n};\n\n//#endregion\nexport { useTransitionState };","import {\n  type ComponentProps,\n  type FunctionComponent,\n  type MouseEvent,\n  type PropsWithChildren,\n  useEffect,\n} from 'react';\nimport clsx from 'clsx';\nimport { useTransitionState } from 'react-transition-state';\nimport { Portal } from './Portal';\n\nexport interface BackdropProps extends ComponentProps<'div'> {\n  /**\n   * On close\n   * @param event\n   */\n  onClose?: (event: MouseEvent<HTMLButtonElement>) => void;\n  /**\n   * Is visible\n   */\n  isVisible?: boolean;\n  /**\n   * Sweep Mode™\n   * (makes it appear from the sides instead of from everywhere)\n   */\n  sweep?: boolean;\n  /**\n   * Target ID for the Portal component\n   */\n  target?: ComponentProps<typeof Portal>['target'];\n}\n\nexport const Backdrop: FunctionComponent<PropsWithChildren<BackdropProps>> = ({\n  children,\n  className = 'flex justify-center',\n  onClose,\n  isVisible,\n  target = 'backdrop',\n  sweep = false,\n  ...attrs\n}) => {\n  const [state, toggle] = useTransitionState({\n    timeout: { enter: 0, exit: 500 },\n    mountOnEnter: true,\n    unmountOnExit: true,\n    preEnter: true,\n  });\n\n  const { status, isMounted } = state;\n\n  useEffect(() => {\n    toggle(isVisible);\n  }, [isVisible, toggle]);\n\n  const animated = status === 'preEnter' || status === 'exiting';\n\n  return (\n    <Portal target={target}>\n      {isMounted && (\n        <div\n          {...attrs}\n          role=\"presentation\"\n          className={clsx(className, 'fixed inset-0 isolate items-center')}\n        >\n          <button\n            aria-hidden=\"true\"\n            className={clsx(\n              'absolute inset-0 -z-1 transition-all duration-500 outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2',\n              {\n                'bg-white/80 backdrop-blur': !animated,\n                'bg-white/0 backdrop-blur-none': animated,\n                '-translate-x-full': sweep && (status === 'preEnter' || status === 'entering'),\n                'translate-x-full': sweep && status === 'exiting',\n              },\n            )}\n            onClick={onClose}\n            type=\"button\"\n          />\n          {children}\n        </div>\n      )}\n    </Portal>\n  );\n};\n"],"x_google_ignoreList":[0,1],"mappings":"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"}

package/chunks/DateField.js

@@ -190,7 +190,7 @@ var z = (e) => e ? typeof e == "string" ? e : s(new Date(e)) ? l(new Date(e), {
 			children: [/* @__PURE__ */ g("input", {
 				...P,
 				type: "date",
-				className: e("text-b3 rounded-pill date-field min-h-[50px] w-full border px-20 py-12 ps-[52px] font-normal outline-none", {
+				className: e("text-b3 rounded-pill date-field min-h-[50px] w-full border px-20 py-12 ps-[52px] font-normal outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2", {
 					"border-middleGrey focus:border-black active:border-black": R === "default",
 					"pe-[52px]": R === "error" || R === "success",
 					"bg-pearl border-middleGrey": T,
@@ -216,7 +216,7 @@ var z = (e) => e ? typeof e == "string" ? e : s(new Date(e)) ? l(new Date(e), {
 					"text-green": !T && R === "success"
 				}),
 				children: [/* @__PURE__ */ _("button", {
-					className: "pointer-events-auto leading-none",
+					className: "pointer-events-auto leading-none outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2",
 					onClick: K,
 					children: [/* @__PURE__ */ g(h, {
 						name: S,

package/chunks/DateField.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateField.js","names":[],"sources":["../../../../node_modules/.pnpm/date-fns@4.1.0/node_modules/date-fns/differenceInMilliseconds.js","../../../../node_modules/.pnpm/date-fns@4.1.0/node_modules/date-fns/parseISO.js","../../lib/ui/forms/DateField.tsx"],"sourcesContent":["import { toDate } from \"./toDate.js\";\n\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 laterDate - The later date\n * @param earlierDate - The earlier date\n *\n * @returns The number of milliseconds\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 function differenceInMilliseconds(laterDate, earlierDate) {\n  return +toDate(laterDate) - +toDate(earlierDate);\n}\n\n// Fallback for modularized imports:\nexport default differenceInMilliseconds;\n","import {\n  millisecondsInHour,\n  millisecondsInMinute,\n} from \"./constants.js\";\nimport { constructFrom } from \"./constructFrom.js\";\nimport { toDate } from \"./toDate.js\";\n\n/**\n * The {@link parseISO} function options.\n */\n\n/**\n * @name parseISO\n * @category Common Helpers\n * @summary Parse ISO string\n *\n * @description\n * Parse the given string in ISO 8601 format and return an instance of Date.\n *\n * Function accepts complete ISO 8601 formats as well as partial implementations.\n * ISO 8601: http://en.wikipedia.org/wiki/ISO_8601\n *\n * If the argument isn't a string, the function cannot parse the string or\n * the values are invalid, it returns Invalid Date.\n *\n * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc).\n * @typeParam ResultDate - The result `Date` type, it is the type returned from the context function if it is passed, or inferred from the arguments.\n *\n * @param argument - The value to convert\n * @param options - An object with options\n *\n * @returns The parsed date in the local time zone\n *\n * @example\n * // Convert string '2014-02-11T11:30:30' to date:\n * const result = parseISO('2014-02-11T11:30:30')\n * //=> Tue Feb 11 2014 11:30:30\n *\n * @example\n * // Convert string '+02014101' to date,\n * // if the additional number of digits in the extended year format is 1:\n * const result = parseISO('+02014101', { additionalDigits: 1 })\n * //=> Fri Apr 11 2014 00:00:00\n */\nexport function parseISO(argument, options) {\n  const invalidDate = () => constructFrom(options?.in, NaN);\n\n  const additionalDigits = options?.additionalDigits ?? 2;\n  const dateStrings = splitDateString(argument);\n\n  let date;\n  if (dateStrings.date) {\n    const parseYearResult = parseYear(dateStrings.date, additionalDigits);\n    date = parseDate(parseYearResult.restDateString, parseYearResult.year);\n  }\n\n  if (!date || isNaN(+date)) return invalidDate();\n\n  const timestamp = +date;\n  let time = 0;\n  let offset;\n\n  if (dateStrings.time) {\n    time = parseTime(dateStrings.time);\n    if (isNaN(time)) return invalidDate();\n  }\n\n  if (dateStrings.timezone) {\n    offset = parseTimezone(dateStrings.timezone);\n    if (isNaN(offset)) return invalidDate();\n  } else {\n    const tmpDate = new Date(timestamp + time);\n    const result = toDate(0, options?.in);\n    result.setFullYear(\n      tmpDate.getUTCFullYear(),\n      tmpDate.getUTCMonth(),\n      tmpDate.getUTCDate(),\n    );\n    result.setHours(\n      tmpDate.getUTCHours(),\n      tmpDate.getUTCMinutes(),\n      tmpDate.getUTCSeconds(),\n      tmpDate.getUTCMilliseconds(),\n    );\n    return result;\n  }\n\n  return toDate(timestamp + time + offset, options?.in);\n}\n\nconst patterns = {\n  dateTimeDelimiter: /[T ]/,\n  timeZoneDelimiter: /[Z ]/i,\n  timezone: /([Z+-].*)$/,\n};\n\nconst dateRegex =\n  /^-?(?:(\\d{3})|(\\d{2})(?:-?(\\d{2}))?|W(\\d{2})(?:-?(\\d{1}))?|)$/;\nconst timeRegex =\n  /^(\\d{2}(?:[.,]\\d*)?)(?::?(\\d{2}(?:[.,]\\d*)?))?(?::?(\\d{2}(?:[.,]\\d*)?))?$/;\nconst timezoneRegex = /^([+-])(\\d{2})(?::?(\\d{2}))?$/;\n\nfunction splitDateString(dateString) {\n  const dateStrings = {};\n  const array = dateString.split(patterns.dateTimeDelimiter);\n  let timeString;\n\n  // The regex match should only return at maximum two array elements.\n  // [date], [time], or [date, time].\n  if (array.length > 2) {\n    return dateStrings;\n  }\n\n  if (/:/.test(array[0])) {\n    timeString = array[0];\n  } else {\n    dateStrings.date = array[0];\n    timeString = array[1];\n    if (patterns.timeZoneDelimiter.test(dateStrings.date)) {\n      dateStrings.date = dateString.split(patterns.timeZoneDelimiter)[0];\n      timeString = dateString.substr(\n        dateStrings.date.length,\n        dateString.length,\n      );\n    }\n  }\n\n  if (timeString) {\n    const token = patterns.timezone.exec(timeString);\n    if (token) {\n      dateStrings.time = timeString.replace(token[1], \"\");\n      dateStrings.timezone = token[1];\n    } else {\n      dateStrings.time = timeString;\n    }\n  }\n\n  return dateStrings;\n}\n\nfunction parseYear(dateString, additionalDigits) {\n  const regex = new RegExp(\n    \"^(?:(\\\\d{4}|[+-]\\\\d{\" +\n      (4 + additionalDigits) +\n      \"})|(\\\\d{2}|[+-]\\\\d{\" +\n      (2 + additionalDigits) +\n      \"})$)\",\n  );\n\n  const captures = dateString.match(regex);\n  // Invalid ISO-formatted year\n  if (!captures) return { year: NaN, restDateString: \"\" };\n\n  const year = captures[1] ? parseInt(captures[1]) : null;\n  const century = captures[2] ? parseInt(captures[2]) : null;\n\n  // either year or century is null, not both\n  return {\n    year: century === null ? year : century * 100,\n    restDateString: dateString.slice((captures[1] || captures[2]).length),\n  };\n}\n\nfunction parseDate(dateString, year) {\n  // Invalid ISO-formatted year\n  if (year === null) return new Date(NaN);\n\n  const captures = dateString.match(dateRegex);\n  // Invalid ISO-formatted string\n  if (!captures) return new Date(NaN);\n\n  const isWeekDate = !!captures[4];\n  const dayOfYear = parseDateUnit(captures[1]);\n  const month = parseDateUnit(captures[2]) - 1;\n  const day = parseDateUnit(captures[3]);\n  const week = parseDateUnit(captures[4]);\n  const dayOfWeek = parseDateUnit(captures[5]) - 1;\n\n  if (isWeekDate) {\n    if (!validateWeekDate(year, week, dayOfWeek)) {\n      return new Date(NaN);\n    }\n    return dayOfISOWeekYear(year, week, dayOfWeek);\n  } else {\n    const date = new Date(0);\n    if (\n      !validateDate(year, month, day) ||\n      !validateDayOfYearDate(year, dayOfYear)\n    ) {\n      return new Date(NaN);\n    }\n    date.setUTCFullYear(year, month, Math.max(dayOfYear, day));\n    return date;\n  }\n}\n\nfunction parseDateUnit(value) {\n  return value ? parseInt(value) : 1;\n}\n\nfunction parseTime(timeString) {\n  const captures = timeString.match(timeRegex);\n  if (!captures) return NaN; // Invalid ISO-formatted time\n\n  const hours = parseTimeUnit(captures[1]);\n  const minutes = parseTimeUnit(captures[2]);\n  const seconds = parseTimeUnit(captures[3]);\n\n  if (!validateTime(hours, minutes, seconds)) {\n    return NaN;\n  }\n\n  return (\n    hours * millisecondsInHour + minutes * millisecondsInMinute + seconds * 1000\n  );\n}\n\nfunction parseTimeUnit(value) {\n  return (value && parseFloat(value.replace(\",\", \".\"))) || 0;\n}\n\nfunction parseTimezone(timezoneString) {\n  if (timezoneString === \"Z\") return 0;\n\n  const captures = timezoneString.match(timezoneRegex);\n  if (!captures) return 0;\n\n  const sign = captures[1] === \"+\" ? -1 : 1;\n  const hours = parseInt(captures[2]);\n  const minutes = (captures[3] && parseInt(captures[3])) || 0;\n\n  if (!validateTimezone(hours, minutes)) {\n    return NaN;\n  }\n\n  return sign * (hours * millisecondsInHour + minutes * millisecondsInMinute);\n}\n\nfunction dayOfISOWeekYear(isoWeekYear, week, day) {\n  const date = new Date(0);\n  date.setUTCFullYear(isoWeekYear, 0, 4);\n  const fourthOfJanuaryDay = date.getUTCDay() || 7;\n  const diff = (week - 1) * 7 + day + 1 - fourthOfJanuaryDay;\n  date.setUTCDate(date.getUTCDate() + diff);\n  return date;\n}\n\n// Validation functions\n\n// February is null to handle the leap year (using ||)\nconst daysInMonths = [31, null, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];\n\nfunction isLeapYearIndex(year) {\n  return year % 400 === 0 || (year % 4 === 0 && year % 100 !== 0);\n}\n\nfunction validateDate(year, month, date) {\n  return (\n    month >= 0 &&\n    month <= 11 &&\n    date >= 1 &&\n    date <= (daysInMonths[month] || (isLeapYearIndex(year) ? 29 : 28))\n  );\n}\n\nfunction validateDayOfYearDate(year, dayOfYear) {\n  return dayOfYear >= 1 && dayOfYear <= (isLeapYearIndex(year) ? 366 : 365);\n}\n\nfunction validateWeekDate(_year, week, day) {\n  return week >= 1 && week <= 53 && day >= 0 && day <= 6;\n}\n\nfunction validateTime(hours, minutes, seconds) {\n  if (hours === 24) {\n    return minutes === 0 && seconds === 0;\n  }\n\n  return (\n    seconds >= 0 &&\n    seconds < 60 &&\n    minutes >= 0 &&\n    minutes < 60 &&\n    hours >= 0 &&\n    hours < 25\n  );\n}\n\nfunction validateTimezone(_hours, minutes) {\n  return minutes >= 0 && minutes <= 59;\n}\n\n// Fallback for modularized imports:\nexport default parseISO;\n","import clsx from 'clsx';\nimport { differenceInMilliseconds, formatISO, isValid, parseISO } 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';\nimport { useInternalStatus } from '../hooks/useInternalStatus';\nimport { FormControl, type FormControlProps } from './FormControl';\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 | string | undefined | null): string => {\n  if (!value) {\n    return '';\n  }\n\n  // Already an ISO date string (YYYY-MM-DD) coming back through the useValue\n  // formatter chain — return it as-is, otherwise `new Date(isoString)` would\n  // parse it as UTC midnight and `formatISO(..., 'date')` (local time) would\n  // shift the calendar day in negative-UTC timezones.\n  if (typeof value === 'string') {\n    return value;\n  }\n\n  if (!isValid(new Date(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  // parseISO interprets a bare YYYY-MM-DD as local midnight, while `new Date(date)`\n  // would interpret it as UTC midnight and silently shift the calendar day in\n  // negative-UTC timezones.\n  const inputDate = parseISO(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    className,\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    formatter: formatDate as never,\n    initialValue,\n    onChange: (event, fieldValue) => onChange?.(event, fieldValue ? parseISO(fieldValue) : null),\n  });\n\n  const min = formatDate(initialMin);\n  const max = formatDate(initialMax);\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    setValue(event.target.value, event.nativeEvent);\n  };\n\n  const handleClickPicker = () => {\n    ref.current?.showPicker();\n  };\n\n  const handleOutOfRangeDate = useCallback(() => {\n    const currentDate = parseISO(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      className={className}\n    >\n      <div className=\"relative\" role=\"group\">\n        <input\n          {...rest}\n          type=\"date\"\n          className={clsx(\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-middleGrey focus:border-black active:border-black':\n                internalStatus === 'default',\n              'pe-[52px]': internalStatus === 'error' || internalStatus === 'success',\n              'bg-pearl border-middleGrey': 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          name={name}\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={clsx(\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"],"x_google_ignoreList":[0,1],"mappings":"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"}
+{"version":3,"file":"DateField.js","names":[],"sources":["../../../../node_modules/.pnpm/date-fns@4.1.0/node_modules/date-fns/differenceInMilliseconds.js","../../../../node_modules/.pnpm/date-fns@4.1.0/node_modules/date-fns/parseISO.js","../../lib/ui/forms/DateField.tsx"],"sourcesContent":["import { toDate } from \"./toDate.js\";\n\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 laterDate - The later date\n * @param earlierDate - The earlier date\n *\n * @returns The number of milliseconds\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 function differenceInMilliseconds(laterDate, earlierDate) {\n  return +toDate(laterDate) - +toDate(earlierDate);\n}\n\n// Fallback for modularized imports:\nexport default differenceInMilliseconds;\n","import {\n  millisecondsInHour,\n  millisecondsInMinute,\n} from \"./constants.js\";\nimport { constructFrom } from \"./constructFrom.js\";\nimport { toDate } from \"./toDate.js\";\n\n/**\n * The {@link parseISO} function options.\n */\n\n/**\n * @name parseISO\n * @category Common Helpers\n * @summary Parse ISO string\n *\n * @description\n * Parse the given string in ISO 8601 format and return an instance of Date.\n *\n * Function accepts complete ISO 8601 formats as well as partial implementations.\n * ISO 8601: http://en.wikipedia.org/wiki/ISO_8601\n *\n * If the argument isn't a string, the function cannot parse the string or\n * the values are invalid, it returns Invalid Date.\n *\n * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc).\n * @typeParam ResultDate - The result `Date` type, it is the type returned from the context function if it is passed, or inferred from the arguments.\n *\n * @param argument - The value to convert\n * @param options - An object with options\n *\n * @returns The parsed date in the local time zone\n *\n * @example\n * // Convert string '2014-02-11T11:30:30' to date:\n * const result = parseISO('2014-02-11T11:30:30')\n * //=> Tue Feb 11 2014 11:30:30\n *\n * @example\n * // Convert string '+02014101' to date,\n * // if the additional number of digits in the extended year format is 1:\n * const result = parseISO('+02014101', { additionalDigits: 1 })\n * //=> Fri Apr 11 2014 00:00:00\n */\nexport function parseISO(argument, options) {\n  const invalidDate = () => constructFrom(options?.in, NaN);\n\n  const additionalDigits = options?.additionalDigits ?? 2;\n  const dateStrings = splitDateString(argument);\n\n  let date;\n  if (dateStrings.date) {\n    const parseYearResult = parseYear(dateStrings.date, additionalDigits);\n    date = parseDate(parseYearResult.restDateString, parseYearResult.year);\n  }\n\n  if (!date || isNaN(+date)) return invalidDate();\n\n  const timestamp = +date;\n  let time = 0;\n  let offset;\n\n  if (dateStrings.time) {\n    time = parseTime(dateStrings.time);\n    if (isNaN(time)) return invalidDate();\n  }\n\n  if (dateStrings.timezone) {\n    offset = parseTimezone(dateStrings.timezone);\n    if (isNaN(offset)) return invalidDate();\n  } else {\n    const tmpDate = new Date(timestamp + time);\n    const result = toDate(0, options?.in);\n    result.setFullYear(\n      tmpDate.getUTCFullYear(),\n      tmpDate.getUTCMonth(),\n      tmpDate.getUTCDate(),\n    );\n    result.setHours(\n      tmpDate.getUTCHours(),\n      tmpDate.getUTCMinutes(),\n      tmpDate.getUTCSeconds(),\n      tmpDate.getUTCMilliseconds(),\n    );\n    return result;\n  }\n\n  return toDate(timestamp + time + offset, options?.in);\n}\n\nconst patterns = {\n  dateTimeDelimiter: /[T ]/,\n  timeZoneDelimiter: /[Z ]/i,\n  timezone: /([Z+-].*)$/,\n};\n\nconst dateRegex =\n  /^-?(?:(\\d{3})|(\\d{2})(?:-?(\\d{2}))?|W(\\d{2})(?:-?(\\d{1}))?|)$/;\nconst timeRegex =\n  /^(\\d{2}(?:[.,]\\d*)?)(?::?(\\d{2}(?:[.,]\\d*)?))?(?::?(\\d{2}(?:[.,]\\d*)?))?$/;\nconst timezoneRegex = /^([+-])(\\d{2})(?::?(\\d{2}))?$/;\n\nfunction splitDateString(dateString) {\n  const dateStrings = {};\n  const array = dateString.split(patterns.dateTimeDelimiter);\n  let timeString;\n\n  // The regex match should only return at maximum two array elements.\n  // [date], [time], or [date, time].\n  if (array.length > 2) {\n    return dateStrings;\n  }\n\n  if (/:/.test(array[0])) {\n    timeString = array[0];\n  } else {\n    dateStrings.date = array[0];\n    timeString = array[1];\n    if (patterns.timeZoneDelimiter.test(dateStrings.date)) {\n      dateStrings.date = dateString.split(patterns.timeZoneDelimiter)[0];\n      timeString = dateString.substr(\n        dateStrings.date.length,\n        dateString.length,\n      );\n    }\n  }\n\n  if (timeString) {\n    const token = patterns.timezone.exec(timeString);\n    if (token) {\n      dateStrings.time = timeString.replace(token[1], \"\");\n      dateStrings.timezone = token[1];\n    } else {\n      dateStrings.time = timeString;\n    }\n  }\n\n  return dateStrings;\n}\n\nfunction parseYear(dateString, additionalDigits) {\n  const regex = new RegExp(\n    \"^(?:(\\\\d{4}|[+-]\\\\d{\" +\n      (4 + additionalDigits) +\n      \"})|(\\\\d{2}|[+-]\\\\d{\" +\n      (2 + additionalDigits) +\n      \"})$)\",\n  );\n\n  const captures = dateString.match(regex);\n  // Invalid ISO-formatted year\n  if (!captures) return { year: NaN, restDateString: \"\" };\n\n  const year = captures[1] ? parseInt(captures[1]) : null;\n  const century = captures[2] ? parseInt(captures[2]) : null;\n\n  // either year or century is null, not both\n  return {\n    year: century === null ? year : century * 100,\n    restDateString: dateString.slice((captures[1] || captures[2]).length),\n  };\n}\n\nfunction parseDate(dateString, year) {\n  // Invalid ISO-formatted year\n  if (year === null) return new Date(NaN);\n\n  const captures = dateString.match(dateRegex);\n  // Invalid ISO-formatted string\n  if (!captures) return new Date(NaN);\n\n  const isWeekDate = !!captures[4];\n  const dayOfYear = parseDateUnit(captures[1]);\n  const month = parseDateUnit(captures[2]) - 1;\n  const day = parseDateUnit(captures[3]);\n  const week = parseDateUnit(captures[4]);\n  const dayOfWeek = parseDateUnit(captures[5]) - 1;\n\n  if (isWeekDate) {\n    if (!validateWeekDate(year, week, dayOfWeek)) {\n      return new Date(NaN);\n    }\n    return dayOfISOWeekYear(year, week, dayOfWeek);\n  } else {\n    const date = new Date(0);\n    if (\n      !validateDate(year, month, day) ||\n      !validateDayOfYearDate(year, dayOfYear)\n    ) {\n      return new Date(NaN);\n    }\n    date.setUTCFullYear(year, month, Math.max(dayOfYear, day));\n    return date;\n  }\n}\n\nfunction parseDateUnit(value) {\n  return value ? parseInt(value) : 1;\n}\n\nfunction parseTime(timeString) {\n  const captures = timeString.match(timeRegex);\n  if (!captures) return NaN; // Invalid ISO-formatted time\n\n  const hours = parseTimeUnit(captures[1]);\n  const minutes = parseTimeUnit(captures[2]);\n  const seconds = parseTimeUnit(captures[3]);\n\n  if (!validateTime(hours, minutes, seconds)) {\n    return NaN;\n  }\n\n  return (\n    hours * millisecondsInHour + minutes * millisecondsInMinute + seconds * 1000\n  );\n}\n\nfunction parseTimeUnit(value) {\n  return (value && parseFloat(value.replace(\",\", \".\"))) || 0;\n}\n\nfunction parseTimezone(timezoneString) {\n  if (timezoneString === \"Z\") return 0;\n\n  const captures = timezoneString.match(timezoneRegex);\n  if (!captures) return 0;\n\n  const sign = captures[1] === \"+\" ? -1 : 1;\n  const hours = parseInt(captures[2]);\n  const minutes = (captures[3] && parseInt(captures[3])) || 0;\n\n  if (!validateTimezone(hours, minutes)) {\n    return NaN;\n  }\n\n  return sign * (hours * millisecondsInHour + minutes * millisecondsInMinute);\n}\n\nfunction dayOfISOWeekYear(isoWeekYear, week, day) {\n  const date = new Date(0);\n  date.setUTCFullYear(isoWeekYear, 0, 4);\n  const fourthOfJanuaryDay = date.getUTCDay() || 7;\n  const diff = (week - 1) * 7 + day + 1 - fourthOfJanuaryDay;\n  date.setUTCDate(date.getUTCDate() + diff);\n  return date;\n}\n\n// Validation functions\n\n// February is null to handle the leap year (using ||)\nconst daysInMonths = [31, null, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];\n\nfunction isLeapYearIndex(year) {\n  return year % 400 === 0 || (year % 4 === 0 && year % 100 !== 0);\n}\n\nfunction validateDate(year, month, date) {\n  return (\n    month >= 0 &&\n    month <= 11 &&\n    date >= 1 &&\n    date <= (daysInMonths[month] || (isLeapYearIndex(year) ? 29 : 28))\n  );\n}\n\nfunction validateDayOfYearDate(year, dayOfYear) {\n  return dayOfYear >= 1 && dayOfYear <= (isLeapYearIndex(year) ? 366 : 365);\n}\n\nfunction validateWeekDate(_year, week, day) {\n  return week >= 1 && week <= 53 && day >= 0 && day <= 6;\n}\n\nfunction validateTime(hours, minutes, seconds) {\n  if (hours === 24) {\n    return minutes === 0 && seconds === 0;\n  }\n\n  return (\n    seconds >= 0 &&\n    seconds < 60 &&\n    minutes >= 0 &&\n    minutes < 60 &&\n    hours >= 0 &&\n    hours < 25\n  );\n}\n\nfunction validateTimezone(_hours, minutes) {\n  return minutes >= 0 && minutes <= 59;\n}\n\n// Fallback for modularized imports:\nexport default parseISO;\n","import clsx from 'clsx';\nimport { differenceInMilliseconds, formatISO, isValid, parseISO } 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';\nimport { useInternalStatus } from '../hooks/useInternalStatus';\nimport { FormControl, type FormControlProps } from './FormControl';\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 | string | undefined | null): string => {\n  if (!value) {\n    return '';\n  }\n\n  // Already an ISO date string (YYYY-MM-DD) coming back through the useValue\n  // formatter chain — return it as-is, otherwise `new Date(isoString)` would\n  // parse it as UTC midnight and `formatISO(..., 'date')` (local time) would\n  // shift the calendar day in negative-UTC timezones.\n  if (typeof value === 'string') {\n    return value;\n  }\n\n  if (!isValid(new Date(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  // parseISO interprets a bare YYYY-MM-DD as local midnight, while `new Date(date)`\n  // would interpret it as UTC midnight and silently shift the calendar day in\n  // negative-UTC timezones.\n  const inputDate = parseISO(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    className,\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    formatter: formatDate as never,\n    initialValue,\n    onChange: (event, fieldValue) => onChange?.(event, fieldValue ? parseISO(fieldValue) : null),\n  });\n\n  const min = formatDate(initialMin);\n  const max = formatDate(initialMax);\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    setValue(event.target.value, event.nativeEvent);\n  };\n\n  const handleClickPicker = () => {\n    ref.current?.showPicker();\n  };\n\n  const handleOutOfRangeDate = useCallback(() => {\n    const currentDate = parseISO(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      className={className}\n    >\n      <div className=\"relative\" role=\"group\">\n        <input\n          {...rest}\n          type=\"date\"\n          className={clsx(\n            'text-b3 rounded-pill date-field min-h-[50px] w-full border px-20 py-12 ps-[52px] font-normal outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2',\n            {\n              'border-middleGrey focus:border-black active:border-black':\n                internalStatus === 'default',\n              'pe-[52px]': internalStatus === 'error' || internalStatus === 'success',\n              'bg-pearl border-middleGrey': 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          name={name}\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={clsx(\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\n            className=\"pointer-events-auto leading-none outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2\"\n            onClick={handleClickPicker}\n          >\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"],"x_google_ignoreList":[0,1],"mappings":"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"}

package/examples/journey-card-compact-demo.d.ts

@@ -0,0 +1 @@
+export default function JourneyCardCompactDemo(): import("react/jsx-runtime").JSX.Element;

package/examples/journey-card-compact-demo.js

@@ -0,0 +1,71 @@
+"use client";
+import { JourneyCard as e } from "../ui/journey-card/JourneyCard.js";
+import { jsx as t } from "react/jsx-runtime";
+//#region lib/examples/journey-card-compact-demo.tsx
+var n = {
+	direction: "Outbound",
+	directionType: "Outbound",
+	departureDate: "10 Apr. 2026",
+	departureTime: "11:55",
+	arrivalDate: "11 Apr. 2026",
+	arrivalTime: "15:25",
+	duration: "9h30mn",
+	departureAirport: {
+		name: "Paris-Orly",
+		terminal: "Terminal 2"
+	},
+	arrivalAirport: {
+		name: "Punta Cana",
+		terminal: "Terminal 2E"
+	},
+	stopLabel: "Direct",
+	airlineLogoSrc: "https://dummyimage.com/100x28/ccc/555.png&text=Airline",
+	airlineLogoAlt: "Transavia logo",
+	operatedBy: "Transavia",
+	characteristics: "Economy class, (x1) checked luggage per person — Boeing 777-300e",
+	carbonEmission: "A total of 750 kg CO₂ emitted.",
+	carbonEmissionLearnMoreLabel: "Learn more",
+	plusDaysLabel: "day",
+	localTimeLabel: "(local time)"
+}, r = {
+	direction: "Inbound",
+	directionType: "Inbound",
+	departureDate: "16 Apr. 2026",
+	departureTime: "17:50",
+	arrivalDate: "17 Apr. 2026",
+	arrivalTime: "08:20",
+	duration: "8h40mn",
+	departureAirport: {
+		name: "Punta Cana",
+		terminal: "Terminal 2E"
+	},
+	arrivalAirport: {
+		name: "Paris-Orly",
+		terminal: "Terminal 2"
+	},
+	stopLabel: "1 Stop over",
+	nbStopovers: 1,
+	airlineLogoSrc: "https://dummyimage.com/100x28/ccc/555.png&text=Airline",
+	airlineLogoAlt: "Transavia logo",
+	operatedBy: "Transavia",
+	characteristics: "Economy class, (x1) checked luggage per person — Boeing 777-300e",
+	carbonEmission: "A total of 750 kg CO₂ emitted.",
+	carbonEmissionLearnMoreLabel: "Learn more",
+	plusDays: 1,
+	plusDaysLabel: "day",
+	localTimeLabel: "(local time)"
+};
+function i() {
+	return /* @__PURE__ */ t("div", {
+		className: "w-full",
+		children: /* @__PURE__ */ t(e, {
+			compact: !0,
+			flight1Journey: n,
+			flight2Journey: r
+		})
+	});
+}
+//#endregion
+export { i as default };
+
+//# sourceMappingURL=journey-card-compact-demo.js.map

package/examples/journey-card-compact-demo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"journey-card-compact-demo.js","names":[],"sources":["../../lib/examples/journey-card-compact-demo.tsx"],"sourcesContent":["'use client';\n\nimport { JourneyCard } from '@/ui/journey-card/JourneyCard';\nimport type { JourneyDetailsProps } from '@/ui/journey-card/JourneyDetails';\n\nconst outbound: JourneyDetailsProps = {\n  direction: 'Outbound',\n  directionType: 'Outbound',\n  departureDate: '10 Apr. 2026',\n  departureTime: '11:55',\n  arrivalDate: '11 Apr. 2026',\n  arrivalTime: '15:25',\n  duration: '9h30mn',\n  departureAirport: { name: 'Paris-Orly', terminal: 'Terminal 2' },\n  arrivalAirport: { name: 'Punta Cana', terminal: 'Terminal 2E' },\n  stopLabel: 'Direct',\n  airlineLogoSrc: 'https://dummyimage.com/100x28/ccc/555.png&text=Airline',\n  airlineLogoAlt: 'Transavia logo',\n  operatedBy: 'Transavia',\n  characteristics: 'Economy class, (x1) checked luggage per person — Boeing 777-300e',\n  carbonEmission: 'A total of 750 kg CO₂ emitted.',\n  carbonEmissionLearnMoreLabel: 'Learn more',\n  plusDaysLabel: 'day',\n  localTimeLabel: '(local time)',\n};\n\nconst inbound: JourneyDetailsProps = {\n  direction: 'Inbound',\n  directionType: 'Inbound',\n  departureDate: '16 Apr. 2026',\n  departureTime: '17:50',\n  arrivalDate: '17 Apr. 2026',\n  arrivalTime: '08:20',\n  duration: '8h40mn',\n  departureAirport: { name: 'Punta Cana', terminal: 'Terminal 2E' },\n  arrivalAirport: { name: 'Paris-Orly', terminal: 'Terminal 2' },\n  stopLabel: '1 Stop over',\n  nbStopovers: 1,\n  airlineLogoSrc: 'https://dummyimage.com/100x28/ccc/555.png&text=Airline',\n  airlineLogoAlt: 'Transavia logo',\n  operatedBy: 'Transavia',\n  characteristics: 'Economy class, (x1) checked luggage per person — Boeing 777-300e',\n  carbonEmission: 'A total of 750 kg CO₂ emitted.',\n  carbonEmissionLearnMoreLabel: 'Learn more',\n  plusDays: 1,\n  plusDaysLabel: 'day',\n  localTimeLabel: '(local time)',\n};\n\nexport default function JourneyCardCompactDemo() {\n  return (\n    <div className=\"w-full\">\n      <JourneyCard compact flight1Journey={outbound} flight2Journey={inbound} />\n    </div>\n  );\n}\n"],"mappings":";;;;AAKA,IAAM,IAAgC;CACpC,WAAW;CACX,eAAe;CACf,eAAe;CACf,eAAe;CACf,aAAa;CACb,aAAa;CACb,UAAU;CACV,kBAAkB;EAAE,MAAM;EAAc,UAAU;EAAc;CAChE,gBAAgB;EAAE,MAAM;EAAc,UAAU;EAAe;CAC/D,WAAW;CACX,gBAAgB;CAChB,gBAAgB;CAChB,YAAY;CACZ,iBAAiB;CACjB,gBAAgB;CAChB,8BAA8B;CAC9B,eAAe;CACf,gBAAgB;CACjB,EAEK,IAA+B;CACnC,WAAW;CACX,eAAe;CACf,eAAe;CACf,eAAe;CACf,aAAa;CACb,aAAa;CACb,UAAU;CACV,kBAAkB;EAAE,MAAM;EAAc,UAAU;EAAe;CACjE,gBAAgB;EAAE,MAAM;EAAc,UAAU;EAAc;CAC9D,WAAW;CACX,aAAa;CACb,gBAAgB;CAChB,gBAAgB;CAChB,YAAY;CACZ,iBAAiB;CACjB,gBAAgB;CAChB,8BAA8B;CAC9B,UAAU;CACV,eAAe;CACf,gBAAgB;CACjB;AAED,SAAwB,IAAyB;AAC/C,QACE,kBAAC,OAAD;EAAK,WAAU;YACb,kBAAC,GAAD;GAAa,SAAA;GAAQ,gBAAgB;GAAU,gBAAgB;GAAW,CAAA;EACtE,CAAA"}

package/examples/journey-card-demo.d.ts

@@ -0,0 +1 @@
+export default function JourneyCardDemo(): import("react/jsx-runtime").JSX.Element;

package/examples/journey-card-demo.js

@@ -0,0 +1,123 @@
+"use client";
+import { JourneyCard as e } from "../ui/journey-card/JourneyCard.js";
+import { jsx as t } from "react/jsx-runtime";
+//#region lib/examples/journey-card-demo.tsx
+var n = {
+	direction: "Outbound",
+	directionType: "Outbound",
+	departureDate: "10 Apr. 2026",
+	departureTime: "11:55",
+	arrivalDate: "11 Apr. 2026",
+	arrivalTime: "15:25",
+	duration: "9h30mn",
+	departureAirport: {
+		name: "Paris-Orly",
+		terminal: "Terminal 2"
+	},
+	arrivalAirport: {
+		name: "Punta Cana",
+		terminal: "Terminal 2E"
+	},
+	stopLabel: "Direct",
+	airlineLogoSrc: "https://dummyimage.com/100x28/ccc/555.png&text=Airline",
+	airlineLogoAlt: "Transavia logo",
+	operatedBy: "Transavia",
+	companyName: "Operated by Hop",
+	characteristics: "Economy class, (x1) checked luggage per person — Boeing 777-300e",
+	carbonEmission: "A total of 750 kg CO₂ emitted.",
+	carbonEmissionLearnMoreUrl: "#",
+	carbonEmissionLearnMoreLabel: "Learn more",
+	plusDays: 1,
+	plusDaysLabel: "day",
+	localTimeLabel: "(local time)",
+	itinerary: {
+		segments: [{
+			flightNumber: "LX 633 Transavia",
+			departureTime: "09:45",
+			arrivalTime: "11:05",
+			departureAirport: {
+				name: "Paris-Roissy CDG",
+				terminal: "Terminal 2"
+			},
+			arrivalAirport: {
+				name: "Zurich",
+				terminal: "Terminal 2E"
+			},
+			arrivalDate: "Arrival: 11 Apr. 2026"
+		}],
+		flexibleOption: "Flexible flight option\n• Cancellation fees limited to €300\n• Baggage included"
+	}
+}, r = {
+	direction: "Inbound",
+	directionType: "Inbound",
+	departureDate: "16 Apr. 2026",
+	departureTime: "17:50",
+	arrivalDate: "17 Apr. 2026",
+	arrivalTime: "08:20",
+	duration: "8h40mn",
+	departureAirport: {
+		name: "Punta Cana",
+		terminal: "Terminal 2E"
+	},
+	arrivalAirport: {
+		name: "Paris-Orly",
+		terminal: "Terminal 2"
+	},
+	stopLabel: "1 Stop over",
+	nbStopovers: 1,
+	airlineLogoSrc: "https://dummyimage.com/100x28/ccc/555.png&text=Airline",
+	airlineLogoAlt: "Transavia logo",
+	operatedBy: "Transavia",
+	companyName: "Operated by Hop",
+	characteristics: "Economy class, (x1) checked luggage per person — Boeing 777-300e",
+	carbonEmission: "A total of 750 kg CO₂ emitted.",
+	carbonEmissionLearnMoreUrl: "#",
+	carbonEmissionLearnMoreLabel: "Learn more",
+	plusDays: 1,
+	plusDaysLabel: "day",
+	localTimeLabel: "(local time)",
+	itinerary: {
+		segments: [{
+			flightNumber: "LX 630 Transavia",
+			departureTime: "09:45",
+			arrivalTime: "11:05",
+			departureAirport: {
+				name: "Punta Cana",
+				terminal: "Terminal 2E"
+			},
+			arrivalAirport: {
+				name: "Zurich",
+				terminal: "Terminal 2E"
+			},
+			arrivalDate: "Arrival: 16 Apr. 2026"
+		}, {
+			flightNumber: "LX 654 Transavia",
+			departureTime: "12:30",
+			arrivalTime: "08:20",
+			departureAirport: {
+				name: "Zurich",
+				terminal: "Terminal 2E"
+			},
+			arrivalAirport: {
+				name: "Paris-Orly",
+				terminal: "Terminal 2"
+			},
+			arrivalDate: "Arrival: 17 Apr. 2026"
+		}],
+		connectionTime: "1h10min : Airport connection",
+		flexibleOption: "Flexible flight option\n• Cancellation fees limited to €300\n• Baggage included"
+	}
+};
+function i() {
+	return /* @__PURE__ */ t("div", {
+		className: "w-full",
+		children: /* @__PURE__ */ t(e, {
+			flight1Journey: n,
+			flight2Journey: r
+		})
+	});
+}
+//#endregion
+export { i as default };
+
+//# sourceMappingURL=journey-card-demo.js.map

package/examples/journey-card-demo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"journey-card-demo.js","names":[],"sources":["../../lib/examples/journey-card-demo.tsx"],"sourcesContent":["'use client';\n\nimport { JourneyCard } from '@/ui/journey-card/JourneyCard';\nimport type { JourneyDetailsProps } from '@/ui/journey-card/JourneyDetails';\n\nconst outbound: JourneyDetailsProps = {\n  direction: 'Outbound',\n  directionType: 'Outbound',\n  departureDate: '10 Apr. 2026',\n  departureTime: '11:55',\n  arrivalDate: '11 Apr. 2026',\n  arrivalTime: '15:25',\n  duration: '9h30mn',\n  departureAirport: { name: 'Paris-Orly', terminal: 'Terminal 2' },\n  arrivalAirport: { name: 'Punta Cana', terminal: 'Terminal 2E' },\n  stopLabel: 'Direct',\n  airlineLogoSrc: 'https://dummyimage.com/100x28/ccc/555.png&text=Airline',\n  airlineLogoAlt: 'Transavia logo',\n  operatedBy: 'Transavia',\n  companyName: 'Operated by Hop',\n  characteristics: 'Economy class, (x1) checked luggage per person — Boeing 777-300e',\n  carbonEmission: 'A total of 750 kg CO₂ emitted.',\n  carbonEmissionLearnMoreUrl: '#',\n  carbonEmissionLearnMoreLabel: 'Learn more',\n  plusDays: 1,\n  plusDaysLabel: 'day',\n  localTimeLabel: '(local time)',\n  itinerary: {\n    segments: [\n      {\n        flightNumber: 'LX 633 Transavia',\n        departureTime: '09:45',\n        arrivalTime: '11:05',\n        departureAirport: { name: 'Paris-Roissy CDG', terminal: 'Terminal 2' },\n        arrivalAirport: { name: 'Zurich', terminal: 'Terminal 2E' },\n        arrivalDate: 'Arrival: 11 Apr. 2026',\n      },\n    ],\n    flexibleOption:\n      'Flexible flight option\\n• Cancellation fees limited to €300\\n• Baggage included',\n  },\n};\n\nconst inbound: JourneyDetailsProps = {\n  direction: 'Inbound',\n  directionType: 'Inbound',\n  departureDate: '16 Apr. 2026',\n  departureTime: '17:50',\n  arrivalDate: '17 Apr. 2026',\n  arrivalTime: '08:20',\n  duration: '8h40mn',\n  departureAirport: { name: 'Punta Cana', terminal: 'Terminal 2E' },\n  arrivalAirport: { name: 'Paris-Orly', terminal: 'Terminal 2' },\n  stopLabel: '1 Stop over',\n  nbStopovers: 1,\n  airlineLogoSrc: 'https://dummyimage.com/100x28/ccc/555.png&text=Airline',\n  airlineLogoAlt: 'Transavia logo',\n  operatedBy: 'Transavia',\n  companyName: 'Operated by Hop',\n  characteristics: 'Economy class, (x1) checked luggage per person — Boeing 777-300e',\n  carbonEmission: 'A total of 750 kg CO₂ emitted.',\n  carbonEmissionLearnMoreUrl: '#',\n  carbonEmissionLearnMoreLabel: 'Learn more',\n  plusDays: 1,\n  plusDaysLabel: 'day',\n  localTimeLabel: '(local time)',\n  itinerary: {\n    segments: [\n      {\n        flightNumber: 'LX 630 Transavia',\n        departureTime: '09:45',\n        arrivalTime: '11:05',\n        departureAirport: { name: 'Punta Cana', terminal: 'Terminal 2E' },\n        arrivalAirport: { name: 'Zurich', terminal: 'Terminal 2E' },\n        arrivalDate: 'Arrival: 16 Apr. 2026',\n      },\n      {\n        flightNumber: 'LX 654 Transavia',\n        departureTime: '12:30',\n        arrivalTime: '08:20',\n        departureAirport: { name: 'Zurich', terminal: 'Terminal 2E' },\n        arrivalAirport: { name: 'Paris-Orly', terminal: 'Terminal 2' },\n        arrivalDate: 'Arrival: 17 Apr. 2026',\n      },\n    ],\n    connectionTime: '1h10min : Airport connection',\n    flexibleOption:\n      'Flexible flight option\\n• Cancellation fees limited to €300\\n• Baggage included',\n  },\n};\n\nexport default function JourneyCardDemo() {\n  return (\n    <div className=\"w-full\">\n      <JourneyCard flight1Journey={outbound} flight2Journey={inbound} />\n    </div>\n  );\n}\n"],"mappings":";;;;AAKA,IAAM,IAAgC;CACpC,WAAW;CACX,eAAe;CACf,eAAe;CACf,eAAe;CACf,aAAa;CACb,aAAa;CACb,UAAU;CACV,kBAAkB;EAAE,MAAM;EAAc,UAAU;EAAc;CAChE,gBAAgB;EAAE,MAAM;EAAc,UAAU;EAAe;CAC/D,WAAW;CACX,gBAAgB;CAChB,gBAAgB;CAChB,YAAY;CACZ,aAAa;CACb,iBAAiB;CACjB,gBAAgB;CAChB,4BAA4B;CAC5B,8BAA8B;CAC9B,UAAU;CACV,eAAe;CACf,gBAAgB;CAChB,WAAW;EACT,UAAU,CACR;GACE,cAAc;GACd,eAAe;GACf,aAAa;GACb,kBAAkB;IAAE,MAAM;IAAoB,UAAU;IAAc;GACtE,gBAAgB;IAAE,MAAM;IAAU,UAAU;IAAe;GAC3D,aAAa;GACd,CACF;EACD,gBACE;;CAEL,EAEK,IAA+B;CACnC,WAAW;CACX,eAAe;CACf,eAAe;CACf,eAAe;CACf,aAAa;CACb,aAAa;CACb,UAAU;CACV,kBAAkB;EAAE,MAAM;EAAc,UAAU;EAAe;CACjE,gBAAgB;EAAE,MAAM;EAAc,UAAU;EAAc;CAC9D,WAAW;CACX,aAAa;CACb,gBAAgB;CAChB,gBAAgB;CAChB,YAAY;CACZ,aAAa;CACb,iBAAiB;CACjB,gBAAgB;CAChB,4BAA4B;CAC5B,8BAA8B;CAC9B,UAAU;CACV,eAAe;CACf,gBAAgB;CAChB,WAAW;EACT,UAAU,CACR;GACE,cAAc;GACd,eAAe;GACf,aAAa;GACb,kBAAkB;IAAE,MAAM;IAAc,UAAU;IAAe;GACjE,gBAAgB;IAAE,MAAM;IAAU,UAAU;IAAe;GAC3D,aAAa;GACd,EACD;GACE,cAAc;GACd,eAAe;GACf,aAAa;GACb,kBAAkB;IAAE,MAAM;IAAU,UAAU;IAAe;GAC7D,gBAAgB;IAAE,MAAM;IAAc,UAAU;IAAc;GAC9D,aAAa;GACd,CACF;EACD,gBAAgB;EAChB,gBACE;;CAEL;AAED,SAAwB,IAAkB;AACxC,QACE,kBAAC,OAAD;EAAK,WAAU;YACb,kBAAC,GAAD;GAAa,gBAAgB;GAAU,gBAAgB;GAAW,CAAA;EAC9D,CAAA"}

package/examples/tabs-notification-demo.d.ts

@@ -0,0 +1 @@
+export default function TabsNotificationDemo(): import("react/jsx-runtime").JSX.Element;

package/examples/tabs-notification-demo.js

@@ -0,0 +1,64 @@
+import { Tab as e, TabList as t, TabPanel as n, Tabs as r, TabsBody as i } from "../ui/tabs/Tabs.js";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region lib/examples/tabs-notification-demo.tsx
+function s() {
+	return /* @__PURE__ */ o(r, {
+		selected: 1,
+		children: [/* @__PURE__ */ o(t, {
+			constrained: !0,
+			children: [
+				/* @__PURE__ */ a(e, {
+					label: "Overview",
+					value: 1
+				}),
+				/* @__PURE__ */ a(e, {
+					label: "Messages",
+					value: 2,
+					notification: 3
+				}),
+				/* @__PURE__ */ a(e, {
+					label: "Alerts",
+					value: 3,
+					notification: "!"
+				}),
+				/* @__PURE__ */ a(e, {
+					label: "Settings",
+					value: 4
+				})
+			]
+		}), /* @__PURE__ */ o(i, { children: [
+			/* @__PURE__ */ a(n, {
+				value: 1,
+				children: /* @__PURE__ */ a("div", {
+					className: "p-16 bg-lightSand",
+					children: "Overview panel"
+				})
+			}),
+			/* @__PURE__ */ a(n, {
+				value: 2,
+				children: /* @__PURE__ */ a("div", {
+					className: "p-16 bg-saffron",
+					children: "3 unread messages"
+				})
+			}),
+			/* @__PURE__ */ a(n, {
+				value: 3,
+				children: /* @__PURE__ */ a("div", {
+					className: "p-16 bg-lavender",
+					children: "Alerts panel"
+				})
+			}),
+			/* @__PURE__ */ a(n, {
+				value: 4,
+				children: /* @__PURE__ */ a("div", {
+					className: "p-16 bg-lightSand",
+					children: "Settings panel"
+				})
+			})
+		] })]
+	});
+}
+//#endregion
+export { s as default };
+
+//# sourceMappingURL=tabs-notification-demo.js.map

package/examples/tabs-notification-demo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs-notification-demo.js","names":[],"sources":["../../lib/examples/tabs-notification-demo.tsx"],"sourcesContent":["import { Tab, TabList, TabPanel, Tabs, TabsBody } from '../ui/tabs/Tabs';\n\nexport default function TabsNotificationDemo() {\n  return (\n    <Tabs selected={1}>\n      <TabList constrained>\n        <Tab label=\"Overview\" value={1} />\n        <Tab label=\"Messages\" value={2} notification={3} />\n        <Tab label=\"Alerts\" value={3} notification=\"!\" />\n        <Tab label=\"Settings\" value={4} />\n      </TabList>\n      <TabsBody>\n        <TabPanel value={1}>\n          <div className=\"p-16 bg-lightSand\">Overview panel</div>\n        </TabPanel>\n        <TabPanel value={2}>\n          <div className=\"p-16 bg-saffron\">3 unread messages</div>\n        </TabPanel>\n        <TabPanel value={3}>\n          <div className=\"p-16 bg-lavender\">Alerts panel</div>\n        </TabPanel>\n        <TabPanel value={4}>\n          <div className=\"p-16 bg-lightSand\">Settings panel</div>\n        </TabPanel>\n      </TabsBody>\n    </Tabs>\n  );\n}\n"],"mappings":";;;AAEA,SAAwB,IAAuB;AAC7C,QACE,kBAAC,GAAD;EAAM,UAAU;YAAhB,CACE,kBAAC,GAAD;GAAS,aAAA;aAAT;IACE,kBAAC,GAAD;KAAK,OAAM;KAAW,OAAO;KAAK,CAAA;IAClC,kBAAC,GAAD;KAAK,OAAM;KAAW,OAAO;KAAG,cAAc;KAAK,CAAA;IACnD,kBAAC,GAAD;KAAK,OAAM;KAAS,OAAO;KAAG,cAAa;KAAM,CAAA;IACjD,kBAAC,GAAD;KAAK,OAAM;KAAW,OAAO;KAAK,CAAA;IAC1B;MACV,kBAAC,GAAD,EAAA,UAAA;GACE,kBAAC,GAAD;IAAU,OAAO;cACf,kBAAC,OAAD;KAAK,WAAU;eAAoB;KAAoB,CAAA;IAC9C,CAAA;GACX,kBAAC,GAAD;IAAU,OAAO;cACf,kBAAC,OAAD;KAAK,WAAU;eAAkB;KAAuB,CAAA;IAC/C,CAAA;GACX,kBAAC,GAAD;IAAU,OAAO;cACf,kBAAC,OAAD;KAAK,WAAU;eAAmB;KAAkB,CAAA;IAC3C,CAAA;GACX,kBAAC,GAAD;IAAU,OAAO;cACf,kBAAC,OAAD;KAAK,WAAU;eAAoB;KAAoB,CAAA;IAC9C,CAAA;GACF,EAAA,CAAA,CACN"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clubmed/trident-ui",
-  "version": "2.0.0-beta.63",
+  "version": "2.0.0-beta.65",
   "type": "module",
   "description": "Shared ClubMed React UI components",
   "keywords": [

package/styles/ui/controls.css

@@ -33,8 +33,7 @@
     @apply border-black;
   }
   label > span > input[type='radio']:focus-visible + span {
-    @apply ring-8;
-    --tw-ring-color: color-mix(in oklab, var(--color-lavender) 20%, transparent);
+    @apply ring-4 ring-black ring-offset-2;
   }
   label > span > input[type='radio'] + span {
     @apply rounded-full;
@@ -86,8 +85,7 @@
     transform: scale(1);
   }
   label > input[type='checkbox'][data-name='Filter']:focus-visible + span {
-    @apply ring-8;
-    --tw-ring-color: color-mix(in oklab, var(--color-lavender) 20%, transparent);
+    @apply ring-4 ring-black ring-offset-2;
   }
   /* Switch */
   input[role='switch'][data-name='Switch'] + span {
@@ -123,7 +121,6 @@
     opacity: 1;
   }
   input[role='switch'][data-name='Switch']:focus-visible + span {
-    @apply ring-8;
-    --tw-ring-color: color-mix(in oklab, var(--color-lavender) 20%, transparent);
+    @apply ring-4 ring-black ring-offset-2;
   }
 }

package/styles/ui/range.css

@@ -54,6 +54,7 @@
     @apply m-0;
     @apply pointer-events-none;
     @apply appearance-none;
+    @apply outline-none;
 
     grid-column: 1 / span 2;
     grid-row: 3;
@@ -61,6 +62,10 @@
     --col: #000;
   }
 
+  .input-range:focus-visible {
+    @apply ring-4 ring-black ring-offset-2;
+  }
+
   .input-range-sliderThumb {
     @apply transform;
     @apply appearance-none;

package/ui/AdvancedToast.js

@@ -49,7 +49,7 @@ var h = ({ className: h, title: g, body: _, icon: v, isVisible: y, labels: b, ch
 				}), /* @__PURE__ */ p("p", { children: _ })] }), x && /* @__PURE__ */ m("div", { children: [/* @__PURE__ */ m("button", {
 					onClick: () => A(!k),
 					"aria-expanded": k,
-					className: "flex w-fit items-center gap-8 text-b5 font-normal",
+					className: "flex w-fit items-center gap-8 text-b5 font-normal outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2",
 					type: "button",
 					children: [/* @__PURE__ */ p("span", { children: b.details }), /* @__PURE__ */ p(f, {
 						name: "ArrowDefaultDown",
@@ -68,7 +68,7 @@ var h = ({ className: h, title: g, body: _, icon: v, isVisible: y, labels: b, ch
 			w && /* @__PURE__ */ p("button", {
 				"aria-describedby": O,
 				"aria-label": b.close,
-				className: "absolute end-0 top-0 mt-20 me-13 text-black",
+				className: "absolute end-0 top-0 mt-20 me-13 text-black outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2",
 				onClick: w,
 				type: "button",
 				children: /* @__PURE__ */ p(f, {

package/ui/AdvancedToast.js.map

@@ -1 +1 @@
-{"version":3,"file":"AdvancedToast.js","names":[],"sources":["../../lib/ui/AdvancedToast.tsx"],"sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport {\n  useEffect,\n  useId,\n  useRef,\n  useState,\n  type ComponentPropsWithoutRef,\n  type FunctionComponent,\n} from 'react';\n\nimport { Icon, type IconicNames } from '@clubmed/trident-icons';\nimport { ElasticHeight } from './ElasticHeight';\nimport { Colors, getBgColor, getBorderColor, getTextColor } from './helpers/colors/colors';\nimport { useCountdown } from './hooks/useCountdown';\nimport useResizeObserver from './hooks/useResizeObserver';\n\ninterface Props extends ComponentPropsWithoutRef<'div'> {\n  title: string;\n  body: string;\n  icon: IconicNames;\n  isVisible: boolean;\n  labels: {\n    close: string;\n    details: string;\n  };\n  onClose?: () => void;\n  children?: React.ReactNode;\n  accentColor?: Colors;\n  moreInfoLabel?: string;\n  moreInfoHref?: string;\n  duration?: false | number;\n  toastId: string;\n  updateHeight: (id: string, height: number) => void;\n}\n\nexport const AdvancedToast: FunctionComponent<Props> = ({\n  className,\n  title,\n  body,\n  icon,\n  isVisible,\n  labels,\n  children,\n  accentColor = Colors.orange,\n  duration = 10000,\n  onClose,\n  toastId,\n  updateHeight,\n  ...attrs\n}) => {\n  const id = useId();\n  const [isDetailsExpanded, setIsDetailsExpanded] = useState(false);\n  const [isPaused, setIsPaused] = useState(false);\n  const toastRef = useRef<HTMLDivElement>(null!);\n\n  const { progress } = useCountdown({ duration, isPaused, isVisible });\n  useEffect(() => {\n    if (progress === 100) {\n      onClose?.();\n    }\n  }, [progress, onClose]);\n\n  const handleMouseDown = () => setIsPaused(true);\n  const handleMouseUp = () => setIsPaused(false);\n  const handleMouseLeave = () => setIsPaused(false);\n\n  useResizeObserver<HTMLDivElement>({\n    ref: toastRef,\n    onResize: () => {\n      if (toastRef.current) {\n        updateHeight(toastId, toastRef.current.offsetHeight);\n      }\n    },\n  });\n\n  return (\n    <div\n      ref={toastRef}\n      {...attrs}\n      className={clsx(\n        isVisible ? 'animate-slide-right-enter' : 'animate-slide-right-exit opacity-0',\n        'relative isolate flex gap-x-20 rounded-16 bg-white p-20 text-black transition-opacity duration-300 border-1 overflow-hidden',\n        getBorderColor(accentColor),\n        className,\n      )}\n      role=\"note\"\n      onMouseDown={handleMouseDown}\n      onMouseUp={handleMouseUp}\n      onMouseLeave={handleMouseLeave}\n    >\n      <span className={clsx('w-30 h-30 pt-4', getTextColor(accentColor))}>\n        <Icon name={icon} width=\"30px\" className={clsx('flex-shrink-0')} />\n      </span>\n      <div className=\"flex flex-1 flex-col gap-12 pe-24 text-b4\">\n        <div>\n          <p className=\" font-bold\" id={id}>\n            {title}\n          </p>\n          <p>{body}</p>\n        </div>\n\n        {children && (\n          <div>\n            <button\n              onClick={() => setIsDetailsExpanded(!isDetailsExpanded)}\n              aria-expanded={isDetailsExpanded}\n              className=\"flex w-fit items-center gap-8 text-b5 font-normal\"\n              type=\"button\"\n            >\n              <span>{labels.details}</span>\n              <Icon\n                name=\"ArrowDefaultDown\"\n                width=\"24px\"\n                style={{ rotate: isDetailsExpanded ? '180deg' : '0deg' }}\n                className=\"transition-all duration-300\"\n              />\n            </button>\n            <ElasticHeight isExpanded={isDetailsExpanded}>\n              <div className=\"pt-4\">{children}</div>\n            </ElasticHeight>\n          </div>\n        )}\n      </div>\n\n      {onClose && (\n        <button\n          aria-describedby={id}\n          aria-label={labels.close}\n          className=\"absolute end-0 top-0 mt-20 me-13 text-black\"\n          onClick={onClose}\n          type=\"button\"\n        >\n          <Icon name=\"CrossDefault\" width=\"24px\" />\n        </button>\n      )}\n\n      {duration !== false && (\n        <div className=\"absolute bottom-0 left-0 right-0 h-4 overflow-hidden rounded-b-16\">\n          <div\n            className={getBgColor(accentColor)}\n            style={{\n              width: '100%',\n              height: '100%',\n              transform: `scaleX(${(100 - progress) / 100})`,\n              transformOrigin: 'left',\n              transition: 'transform 16ms linear',\n            }}\n          />\n        </div>\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;AAqCA,IAAa,KAA2C,EACtD,cACA,UACA,SACA,SACA,cACA,WACA,aACA,iBAAc,EAAO,QACrB,cAAW,KACX,YACA,YACA,iBACA,GAAG,QACC;CACJ,IAAM,IAAK,GAAO,EACZ,CAAC,GAAmB,KAAwB,EAAS,GAAM,EAC3D,CAAC,GAAU,KAAe,EAAS,GAAM,EACzC,IAAW,EAAuB,KAAM,EAExC,EAAE,gBAAa,EAAa;EAAE;EAAU;EAAU;EAAW,CAAC;AACpE,SAAgB;AACd,EAAI,MAAa,OACf,KAAW;IAEZ,CAAC,GAAU,EAAQ,CAAC;CAEvB,IAAM,UAAwB,EAAY,GAAK,EACzC,UAAsB,EAAY,GAAM,EACxC,UAAyB,EAAY,GAAM;AAWjD,QATA,EAAkC;EAChC,KAAK;EACL,gBAAgB;AACd,GAAI,EAAS,WACX,EAAa,GAAS,EAAS,QAAQ,aAAa;;EAGzD,CAAC,EAGA,kBAAC,OAAD;EACE,KAAK;EACL,GAAI;EACJ,WAAW,EACT,IAAY,8BAA8B,sCAC1C,+HACA,EAAe,EAAY,EAC3B,EACD;EACD,MAAK;EACL,aAAa;EACb,WAAW;EACX,cAAc;YAZhB;GAcE,kBAAC,QAAD;IAAM,WAAW,EAAK,kBAAkB,EAAa,EAAY,CAAC;cAChE,kBAAC,GAAD;KAAM,MAAM;KAAM,OAAM;KAAO,WAAW,EAAK,gBAAA;KAAoB,CAAA;IAC9D,CAAA;GACP,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;KAAG,WAAU;KAAiB;eAC3B;KACC,CAAA,EACJ,kBAAC,KAAD,EAAA,UAAI,GAAS,CAAA,CACT,EAAA,CAAA,EAEL,KACC,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,UAAD;KACE,eAAe,EAAqB,CAAC,EAAkB;KACvD,iBAAe;KACf,WAAU;KACV,MAAK;eAJP,CAME,kBAAC,QAAD,EAAA,UAAO,EAAO,SAAe,CAAA,EAC7B,kBAAC,GAAD;MACE,MAAK;MACL,OAAM;MACN,OAAO,EAAE,QAAQ,IAAoB,WAAW,QAAQ;MACxD,WAAU;MACV,CAAA,CAAA;QAEJ,kBAAC,GAAD;KAAe,YAAY;eACzB,kBAAC,OAAD;MAAK,WAAU;MAAQ;MAAe,CAAA;KACxB,CAAA,CACZ,EAAA,CAAA,CAAA;;GAIT,KACC,kBAAC,UAAD;IACE,oBAAkB;IAClB,cAAY,EAAO;IACnB,WAAU;IACV,SAAS;IACT,MAAK;cAEL,kBAAC,GAAD;KAAM,MAAK;KAAe,OAAM;KAAS,CAAA;IAClC,CAAA;GAGV,MAAa,MACZ,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,OAAD;KACE,WAAW,EAAW,EAAY;KAClC,OAAO;MACL,OAAO;MACP,QAAQ;MACR,WAAW,WAAW,MAAM,KAAY,IAAI;MAC5C,iBAAiB;MACjB,YAAY;;KAEd,CAAA;IACE,CAAA"}
+{"version":3,"file":"AdvancedToast.js","names":[],"sources":["../../lib/ui/AdvancedToast.tsx"],"sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport {\n  useEffect,\n  useId,\n  useRef,\n  useState,\n  type ComponentPropsWithoutRef,\n  type FunctionComponent,\n} from 'react';\n\nimport { Icon, type IconicNames } from '@clubmed/trident-icons';\nimport { ElasticHeight } from './ElasticHeight';\nimport { Colors, getBgColor, getBorderColor, getTextColor } from './helpers/colors/colors';\nimport { useCountdown } from './hooks/useCountdown';\nimport useResizeObserver from './hooks/useResizeObserver';\n\ninterface Props extends ComponentPropsWithoutRef<'div'> {\n  title: string;\n  body: string;\n  icon: IconicNames;\n  isVisible: boolean;\n  labels: {\n    close: string;\n    details: string;\n  };\n  onClose?: () => void;\n  children?: React.ReactNode;\n  accentColor?: Colors;\n  moreInfoLabel?: string;\n  moreInfoHref?: string;\n  duration?: false | number;\n  toastId: string;\n  updateHeight: (id: string, height: number) => void;\n}\n\nexport const AdvancedToast: FunctionComponent<Props> = ({\n  className,\n  title,\n  body,\n  icon,\n  isVisible,\n  labels,\n  children,\n  accentColor = Colors.orange,\n  duration = 10000,\n  onClose,\n  toastId,\n  updateHeight,\n  ...attrs\n}) => {\n  const id = useId();\n  const [isDetailsExpanded, setIsDetailsExpanded] = useState(false);\n  const [isPaused, setIsPaused] = useState(false);\n  const toastRef = useRef<HTMLDivElement>(null!);\n\n  const { progress } = useCountdown({ duration, isPaused, isVisible });\n  useEffect(() => {\n    if (progress === 100) {\n      onClose?.();\n    }\n  }, [progress, onClose]);\n\n  const handleMouseDown = () => setIsPaused(true);\n  const handleMouseUp = () => setIsPaused(false);\n  const handleMouseLeave = () => setIsPaused(false);\n\n  useResizeObserver<HTMLDivElement>({\n    ref: toastRef,\n    onResize: () => {\n      if (toastRef.current) {\n        updateHeight(toastId, toastRef.current.offsetHeight);\n      }\n    },\n  });\n\n  return (\n    <div\n      ref={toastRef}\n      {...attrs}\n      className={clsx(\n        isVisible ? 'animate-slide-right-enter' : 'animate-slide-right-exit opacity-0',\n        'relative isolate flex gap-x-20 rounded-16 bg-white p-20 text-black transition-opacity duration-300 border-1 overflow-hidden',\n        getBorderColor(accentColor),\n        className,\n      )}\n      role=\"note\"\n      onMouseDown={handleMouseDown}\n      onMouseUp={handleMouseUp}\n      onMouseLeave={handleMouseLeave}\n    >\n      <span className={clsx('w-30 h-30 pt-4', getTextColor(accentColor))}>\n        <Icon name={icon} width=\"30px\" className={clsx('flex-shrink-0')} />\n      </span>\n      <div className=\"flex flex-1 flex-col gap-12 pe-24 text-b4\">\n        <div>\n          <p className=\" font-bold\" id={id}>\n            {title}\n          </p>\n          <p>{body}</p>\n        </div>\n\n        {children && (\n          <div>\n            <button\n              onClick={() => setIsDetailsExpanded(!isDetailsExpanded)}\n              aria-expanded={isDetailsExpanded}\n              className=\"flex w-fit items-center gap-8 text-b5 font-normal outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2\"\n              type=\"button\"\n            >\n              <span>{labels.details}</span>\n              <Icon\n                name=\"ArrowDefaultDown\"\n                width=\"24px\"\n                style={{ rotate: isDetailsExpanded ? '180deg' : '0deg' }}\n                className=\"transition-all duration-300\"\n              />\n            </button>\n            <ElasticHeight isExpanded={isDetailsExpanded}>\n              <div className=\"pt-4\">{children}</div>\n            </ElasticHeight>\n          </div>\n        )}\n      </div>\n\n      {onClose && (\n        <button\n          aria-describedby={id}\n          aria-label={labels.close}\n          className=\"absolute end-0 top-0 mt-20 me-13 text-black outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2\"\n          onClick={onClose}\n          type=\"button\"\n        >\n          <Icon name=\"CrossDefault\" width=\"24px\" />\n        </button>\n      )}\n\n      {duration !== false && (\n        <div className=\"absolute bottom-0 left-0 right-0 h-4 overflow-hidden rounded-b-16\">\n          <div\n            className={getBgColor(accentColor)}\n            style={{\n              width: '100%',\n              height: '100%',\n              transform: `scaleX(${(100 - progress) / 100})`,\n              transformOrigin: 'left',\n              transition: 'transform 16ms linear',\n            }}\n          />\n        </div>\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;AAqCA,IAAa,KAA2C,EACtD,cACA,UACA,SACA,SACA,cACA,WACA,aACA,iBAAc,EAAO,QACrB,cAAW,KACX,YACA,YACA,iBACA,GAAG,QACC;CACJ,IAAM,IAAK,GAAO,EACZ,CAAC,GAAmB,KAAwB,EAAS,GAAM,EAC3D,CAAC,GAAU,KAAe,EAAS,GAAM,EACzC,IAAW,EAAuB,KAAM,EAExC,EAAE,gBAAa,EAAa;EAAE;EAAU;EAAU;EAAW,CAAC;AACpE,SAAgB;AACd,EAAI,MAAa,OACf,KAAW;IAEZ,CAAC,GAAU,EAAQ,CAAC;CAEvB,IAAM,UAAwB,EAAY,GAAK,EACzC,UAAsB,EAAY,GAAM,EACxC,UAAyB,EAAY,GAAM;AAWjD,QATA,EAAkC;EAChC,KAAK;EACL,gBAAgB;AACd,GAAI,EAAS,WACX,EAAa,GAAS,EAAS,QAAQ,aAAa;;EAGzD,CAAC,EAGA,kBAAC,OAAD;EACE,KAAK;EACL,GAAI;EACJ,WAAW,EACT,IAAY,8BAA8B,sCAC1C,+HACA,EAAe,EAAY,EAC3B,EACD;EACD,MAAK;EACL,aAAa;EACb,WAAW;EACX,cAAc;YAZhB;GAcE,kBAAC,QAAD;IAAM,WAAW,EAAK,kBAAkB,EAAa,EAAY,CAAC;cAChE,kBAAC,GAAD;KAAM,MAAM;KAAM,OAAM;KAAO,WAAW,EAAK,gBAAA;KAAoB,CAAA;IAC9D,CAAA;GACP,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;KAAG,WAAU;KAAiB;eAC3B;KACC,CAAA,EACJ,kBAAC,KAAD,EAAA,UAAI,GAAS,CAAA,CACT,EAAA,CAAA,EAEL,KACC,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,UAAD;KACE,eAAe,EAAqB,CAAC,EAAkB;KACvD,iBAAe;KACf,WAAU;KACV,MAAK;eAJP,CAME,kBAAC,QAAD,EAAA,UAAO,EAAO,SAAe,CAAA,EAC7B,kBAAC,GAAD;MACE,MAAK;MACL,OAAM;MACN,OAAO,EAAE,QAAQ,IAAoB,WAAW,QAAQ;MACxD,WAAU;MACV,CAAA,CAAA;QAEJ,kBAAC,GAAD;KAAe,YAAY;eACzB,kBAAC,OAAD;MAAK,WAAU;MAAQ;MAAe,CAAA;KACxB,CAAA,CACZ,EAAA,CAAA,CAAA;;GAIT,KACC,kBAAC,UAAD;IACE,oBAAkB;IAClB,cAAY,EAAO;IACnB,WAAU;IACV,SAAS;IACT,MAAK;cAEL,kBAAC,GAAD;KAAM,MAAK;KAAe,OAAM;KAAS,CAAA;IAClC,CAAA;GAGV,MAAa,MACZ,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,OAAD;KACE,WAAW,EAAW,EAAY;KAClC,OAAO;MACL,OAAO;MACP,QAAQ;MACR,WAAW,WAAW,MAAM,KAAY,IAAI;MAC5C,iBAAiB;MACjB,YAAY;;KAEd,CAAA;IACE,CAAA"}

package/ui/Avatar.js

@@ -9,7 +9,7 @@ function i({ alt: i, src: a, srcSet: o, style: s, children: c, className: l, ...
 			role: "figure",
 			"aria-label": i
 		} : {},
-		className: e("flex items-center justify-center relative overflow-hidden", {
+		className: e("flex items-center justify-center relative overflow-hidden outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2", {
 			"rounded-full": !l?.includes("rounded-"),
 			"text-black": !l?.includes("text-"),
 			"bg-saffron": !l?.includes("bg-")

package/ui/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","names":[],"sources":["../../lib/ui/Avatar.tsx"],"sourcesContent":["import type { HTMLAttributes, PropsWithChildren } from 'react';\nimport clsx from 'clsx';\n\nconst initial = (text = '') => {\n  return text\n    .split(' ')\n    .map((text) => text.slice(0, 1))\n    .join('');\n};\n\nexport interface AvatarProps extends HTMLAttributes<HTMLDivElement> {\n  alt?: string;\n  src?: string | undefined;\n  srcSet?: string | undefined;\n}\n\nexport function Avatar({\n  alt,\n  src,\n  srcSet,\n  style,\n  children,\n  className,\n  ...props\n}: PropsWithChildren<AvatarProps>) {\n  return (\n    <div\n      {...props}\n      {...(src || srcSet ? { role: 'figure', 'aria-label': alt } : {})}\n      className={clsx(\n        'flex items-center justify-center relative overflow-hidden',\n        {\n          'rounded-full': !className?.includes('rounded-'),\n          'text-black': !className?.includes('text-'),\n          'bg-saffron': !className?.includes('bg-'),\n        },\n        className,\n      )}\n      style={{\n        width: '48px',\n        height: '48px',\n        ...style,\n      }}\n    >\n      <span className=\"flex items-center justify-center font-bold uppercase text-h6 h-full\">\n        {src || srcSet ? (\n          <img\n            srcSet={srcSet}\n            src={src}\n            alt={alt}\n            className={'w-full h-full object-cover transparent indent-[1000px]'}\n          />\n        ) : (\n          initial(alt)\n        )}\n        {children}\n      </span>\n    </div>\n  );\n}\n"],"mappings":";;;AAGA,IAAM,KAAW,IAAO,OACf,EACJ,MAAM,IAAI,CACV,KAAK,MAAS,EAAK,MAAM,GAAG,EAAE,CAAC,CAC/B,KAAK,GAAG;AASb,SAAgB,EAAO,EACrB,QACA,QACA,WACA,UACA,aACA,cACA,GAAG,KAC8B;AACjC,QACE,kBAAC,OAAD;EACE,GAAI;EACJ,GAAK,KAAO,IAAS;GAAE,MAAM;GAAU,cAAc;GAAK,GAAG,EAAE;EAC/D,WAAW,EACT,6DACA;GACE,gBAAgB,CAAC,GAAW,SAAS,WAAW;GAChD,cAAc,CAAC,GAAW,SAAS,QAAQ;GAC3C,cAAc,CAAC,GAAW,SAAS,MAAM;GAC1C,EACD,EACD;EACD,OAAO;GACL,OAAO;GACP,QAAQ;GACR,GAAG;GACJ;YAED,kBAAC,QAAD;GAAM,WAAU;aAAhB,CACG,KAAO,IACN,kBAAC,OAAD;IACU;IACH;IACA;IACL,WAAW;IACX,CAAA,GAEF,EAAQ,EAAI,EAEb,EACI;;EACH,CAAA"}
+{"version":3,"file":"Avatar.js","names":[],"sources":["../../lib/ui/Avatar.tsx"],"sourcesContent":["import type { HTMLAttributes, PropsWithChildren } from 'react';\nimport clsx from 'clsx';\n\nconst initial = (text = '') => {\n  return text\n    .split(' ')\n    .map((text) => text.slice(0, 1))\n    .join('');\n};\n\nexport interface AvatarProps extends HTMLAttributes<HTMLDivElement> {\n  alt?: string;\n  src?: string | undefined;\n  srcSet?: string | undefined;\n}\n\nexport function Avatar({\n  alt,\n  src,\n  srcSet,\n  style,\n  children,\n  className,\n  ...props\n}: PropsWithChildren<AvatarProps>) {\n  return (\n    <div\n      {...props}\n      {...(src || srcSet ? { role: 'figure', 'aria-label': alt } : {})}\n      className={clsx(\n        'flex items-center justify-center relative overflow-hidden outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2',\n        {\n          'rounded-full': !className?.includes('rounded-'),\n          'text-black': !className?.includes('text-'),\n          'bg-saffron': !className?.includes('bg-'),\n        },\n        className,\n      )}\n      style={{\n        width: '48px',\n        height: '48px',\n        ...style,\n      }}\n    >\n      <span className=\"flex items-center justify-center font-bold uppercase text-h6 h-full\">\n        {src || srcSet ? (\n          <img\n            srcSet={srcSet}\n            src={src}\n            alt={alt}\n            className={'w-full h-full object-cover transparent indent-[1000px]'}\n          />\n        ) : (\n          initial(alt)\n        )}\n        {children}\n      </span>\n    </div>\n  );\n}\n"],"mappings":";;;AAGA,IAAM,KAAW,IAAO,OACf,EACJ,MAAM,IAAI,CACV,KAAK,MAAS,EAAK,MAAM,GAAG,EAAE,CAAC,CAC/B,KAAK,GAAG;AASb,SAAgB,EAAO,EACrB,QACA,QACA,WACA,UACA,aACA,cACA,GAAG,KAC8B;AACjC,QACE,kBAAC,OAAD;EACE,GAAI;EACJ,GAAK,KAAO,IAAS;GAAE,MAAM;GAAU,cAAc;GAAK,GAAG,EAAE;EAC/D,WAAW,EACT,oJACA;GACE,gBAAgB,CAAC,GAAW,SAAS,WAAW;GAChD,cAAc,CAAC,GAAW,SAAS,QAAQ;GAC3C,cAAc,CAAC,GAAW,SAAS,MAAM;GAC1C,EACD,EACD;EACD,OAAO;GACL,OAAO;GACP,QAAQ;GACR,GAAG;GACJ;YAED,kBAAC,QAAD;GAAM,WAAU;aAAhB,CACG,KAAO,IACN,kBAAC,OAAD;IACU;IACH;IACA;IACL,WAAW;IACX,CAAA,GAEF,EAAQ,EAAI,EAEb,EACI;;EACH,CAAA"}