@bikdotai/bik-component-library 0.0.867 → 0.0.868-beta.0

package/dist/esm/components/chip-selector/model.d.ts

@@ -0,0 +1,106 @@
+import { default as React } from 'react';
+/** Identifier for a chip. Numbers suit day/date indices, strings suit slugs. */
+export type ChipValue = string | number;
+export type ChipSize = 'small' | 'medium';
+export interface ChipOption {
+    /**
+     * Unique value for this chip, reported back through the group's `onChange`.
+     */
+    value: ChipValue;
+    /**
+     * Text rendered inside the chip. Keep it short — chips are compact by design.
+     */
+    label: string;
+    /**
+     * Accessible name, used when `label` is abbreviated and would not read well
+     * on its own — e.g. "M" for Monday, where several days share a letter.
+     * @default the `label`
+     */
+    ariaLabel?: string;
+    /**
+     * Blocks selection and dims the chip.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Sizes this chip to its label, ignoring the group's `chipWidth`. For the odd
+     * long option in an otherwise uniform grid — "Last day of the month" beside
+     * dates 1–31, which would overflow a fixed date-sized chip.
+     * @default false
+     */
+    fitContent?: boolean;
+}
+export interface ChipSelectorProps extends ChipOption {
+    /**
+     * Whether the chip is currently selected.
+     */
+    selected: boolean;
+    /**
+     * Size of the chip. `medium` matches the 48px input height so chips can sit
+     * in a row beside inputs and dropdowns.
+     * @default 'medium'
+     */
+    size?: ChipSize;
+    /**
+     * Fixed width in px. Omit to let the chip size to its content, which is what
+     * variable-length labels need.
+     * @default undefined
+     */
+    width?: number;
+    onSelect: (value: ChipValue) => void;
+    dataTestId?: string;
+}
+export interface ChipSelectorGroupProps {
+    /**
+     * Chips to render, in display order.
+     */
+    options: ChipOption[];
+    /**
+     * Currently selected values. Pass a single-element array for single-select.
+     */
+    value: ChipValue[];
+    /**
+     * Fired with the full next selection, so the caller stores the result
+     * directly rather than reimplementing add/remove on every screen.
+     */
+    onChange: (value: ChipValue[]) => void;
+    /**
+     * Allows more than one chip to be selected at a time. When false, picking a
+     * chip replaces the selection.
+     * @default true
+     */
+    multiSelect?: boolean;
+    /**
+     * Permits clearing the last selected chip. Set false when the caller always
+     * needs at least one value.
+     * @default true
+     */
+    allowEmpty?: boolean;
+    /**
+     * Size applied to every chip in the group.
+     * @default 'medium'
+     */
+    size?: ChipSize;
+    /**
+     * Fixed width in px applied to every chip, for grids that must align — a
+     * day picker looks uneven if "S" and "W" size to their own content.
+     * @default undefined
+     */
+    chipWidth?: number;
+    /**
+     * Gap between chips in px.
+     * @default 8
+     */
+    gap?: number;
+    /**
+     * Wraps chips onto multiple lines. Needed for the 31-chip month grid.
+     * @default false
+     */
+    wrap?: boolean;
+    /**
+     * Accessible name for the group as a whole, e.g. "Repeat on".
+     */
+    ariaLabel?: string;
+    'data-test'?: string;
+}
+export type ChipIconProps = React.SVGAttributes<SVGElement>;

package/dist/esm/components/combo-box/ComboBox.d.ts

@@ -0,0 +1,15 @@
+import { default as React } from 'react';
+import { ComboBoxProps } from './model';
+/**
+ * A text field that can be typed into or picked from a list.
+ *
+ * Sits between Dropdown, whose box is not editable, and Input, which offers no
+ * options. Reach for it when a field has common values worth listing but must
+ * still accept anything valid the user types — a time, a duration, a currency.
+ *
+ * Typing is validated rather than constrained, so a half-finished entry stays in
+ * the box instead of being rewritten on every keystroke; `validate` decides what
+ * is worth committing and `format` tidies the text once the field is left.
+ */
+export declare const ComboBox: React.FC<ComboBoxProps>;
+export default ComboBox;

package/dist/esm/components/combo-box/ComboBox.js

@@ -0,0 +1,118 @@
+import { jsxs as V, jsx as h } from "react/jsx-runtime";
+import { useState as b, useRef as v, useEffect as I, useMemo as j } from "react";
+import q from "../../assets/icons/chevronDown.svg.js";
+import { ComboBoxWrapper as F, OptionList as M, OptionItem as W } from "./ComboBox.styled.js";
+import { Input as H } from "../input/Input.js";
+const N = (n, s) => {
+  const c = s.trim().toLowerCase();
+  return c ? n.filter(
+    (a) => a.value.toLowerCase().startsWith(c)
+  ) : n;
+}, Z = ({
+  value: n,
+  options: s,
+  onChange: c,
+  validate: a,
+  format: f,
+  sanitize: g,
+  filter: O = N,
+  placeholder: B,
+  errorMessage: k,
+  disabled: C,
+  onInvalidBlur: R,
+  "data-test": K
+}) => {
+  const [r, i] = b(n), [x, S] = b(!1), [d, T] = b(-1), E = v(null), L = v(null), m = v(-1), w = v(!1), l = (e) => {
+    m.current = e, T(e);
+  }, o = (e) => {
+    w.current = e, S(e);
+  }, D = (e) => a ? a(e) : e.trim().length > 0;
+  I(() => {
+    i((e) => D(e) && (f ? f(e) : e) === n ? e : n);
+  }, [n]);
+  const u = j(() => {
+    const e = r.trim();
+    return s.some((t) => t.value === e) ? s : O(s, r);
+  }, [O, s, r]);
+  I(() => {
+    if (!x) return;
+    const e = (t) => {
+      E.current?.contains(t.target) || o(!1);
+    };
+    return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
+  }, [x]), I(() => {
+    if (d < 0) return;
+    const e = L.current?.children[d];
+    e instanceof HTMLElement && e.scrollIntoView && e.scrollIntoView({ block: "nearest" });
+  }, [d]);
+  const A = (e) => {
+    i(e.value), c(e.value), o(!1), l(-1);
+  };
+  return /* @__PURE__ */ V(F, { ref: E, "data-test": K, children: [
+    /* @__PURE__ */ h("div", { children: /* @__PURE__ */ h(
+      H,
+      {
+        width: "100%",
+        placeholder: B,
+        value: r,
+        isDisabled: C,
+        errorMessage: k,
+        state: k ? "invalid" : C ? "disabled" : "active",
+        rightIcon: {
+          icon: q,
+          callback: () => o(!w.current),
+          "data-test": "combo-box-toggle"
+        },
+        onKeyDownEvent: (e) => {
+          const t = e;
+          if (t.key === "ArrowDown" || t.key === "ArrowUp") {
+            if (t.preventDefault(), !w.current) {
+              o(!0);
+              return;
+            }
+            const p = t.key === "ArrowDown" ? 1 : -1, y = m.current + p;
+            y < 0 ? l(u.length - 1) : y >= u.length ? l(0) : l(y);
+            return;
+          }
+          if (t.key === "Enter" && w.current && m.current >= 0) {
+            t.preventDefault(), A(u[m.current]);
+            return;
+          }
+          t.key === "Escape" && o(!1);
+        },
+        noKeyDownChange: !0,
+        onFocus: () => o(!0),
+        onChangeText: (e) => {
+          const t = g ? g(e) : e;
+          i(t), o(!0), l(-1), D(t) && c(t);
+        },
+        onBlur: () => {
+          if (D(r)) {
+            const e = f ? f(r) : r;
+            i(e), e !== n && c(e);
+            return;
+          }
+          i(n), R?.();
+        }
+      }
+    ) }),
+    x && !!u.length && /* @__PURE__ */ h(M, { ref: L, role: "listbox", children: u.map((e, t) => /* @__PURE__ */ h(
+      W,
+      {
+        role: "option",
+        "aria-selected": e.value === n,
+        isActive: t === d,
+        isSelected: e.value === n,
+        onMouseDown: (p) => {
+          p.preventDefault(), A(e);
+        },
+        children: e.label ?? e.value
+      },
+      e.value
+    )) })
+  ] });
+};
+export {
+  Z as ComboBox
+};
+//# sourceMappingURL=ComboBox.js.map

package/dist/esm/components/combo-box/ComboBox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComboBox.js","sources":["../../../../src/components/combo-box/ComboBox.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useRef, useState } from 'react';\nimport DownIcon from '../../assets/icons/chevronDown.svg';\nimport { Input } from '../input';\nimport { ComboBoxWrapper, OptionItem, OptionList } from './ComboBox.styled';\nimport { ComboBoxOption, ComboBoxProps } from './model';\n\n/** Options whose value starts with what has been typed. */\nconst defaultFilter = (\n\toptions: ComboBoxOption[],\n\ttext: string,\n): ComboBoxOption[] => {\n\tconst query = text.trim().toLowerCase();\n\tif (!query) return options;\n\treturn options.filter((option) =>\n\t\toption.value.toLowerCase().startsWith(query),\n\t);\n};\n\n/**\n * A text field that can be typed into or picked from a list.\n *\n * Sits between Dropdown, whose box is not editable, and Input, which offers no\n * options. Reach for it when a field has common values worth listing but must\n * still accept anything valid the user types — a time, a duration, a currency.\n *\n * Typing is validated rather than constrained, so a half-finished entry stays in\n * the box instead of being rewritten on every keystroke; `validate` decides what\n * is worth committing and `format` tidies the text once the field is left.\n */\nexport const ComboBox: React.FC<ComboBoxProps> = ({\n\tvalue,\n\toptions,\n\tonChange,\n\tvalidate,\n\tformat,\n\tsanitize,\n\tfilter = defaultFilter,\n\tplaceholder,\n\terrorMessage,\n\tdisabled,\n\tonInvalidBlur,\n\t'data-test': dataTest,\n}) => {\n\t// What the box shows while typing. Separate from `value` so a partial entry\n\t// survives a keystroke rather than being parsed away.\n\tconst [text, setText] = useState(value);\n\tconst [isOpen, setIsOpen] = useState(false);\n\tconst [activeIndex, setActiveIndex] = useState(-1);\n\tconst wrapperRef = useRef<HTMLDivElement | null>(null);\n\tconst listRef = useRef<HTMLUListElement | null>(null);\n\t// Mirrors activeIndex for the key handler, which closes over the value from\n\t// its own render — two arrow presses in one frame would otherwise both read\n\t// the same starting index.\n\tconst activeIndexRef = useRef(-1);\n\t// Same reason as activeIndexRef: the handler must see the list state left by\n\t// the keypress before it, not the one from its own render.\n\tconst isOpenRef = useRef(false);\n\n\tconst moveActiveIndex = (next: number) => {\n\t\tactiveIndexRef.current = next;\n\t\tsetActiveIndex(next);\n\t};\n\n\tconst setListOpen = (open: boolean) => {\n\t\tisOpenRef.current = open;\n\t\tsetIsOpen(open);\n\t};\n\n\tconst isValid = (candidate: string) =>\n\t\tvalidate ? validate(candidate) : candidate.trim().length > 0;\n\n\t// Mirror committed changes from outside — a loaded value, a reset, a\n\t// recommendation — without disturbing text being typed right now.\n\tuseEffect(() => {\n\t\tsetText((prev) => {\n\t\t\tif (!isValid(prev)) return value;\n\t\t\t// Compare through `format` so text that already means the committed\n\t\t\t// value is left as typed. Without this, typing \"11:4\" is rewritten to\n\t\t\t// the formatted \"11:04\" and the next keystroke lands as \"11:045\".\n\t\t\tconst asCommitted = format ? format(prev) : prev;\n\t\t\treturn asCommitted === value ? prev : value;\n\t\t});\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [value]);\n\n\t// An exact match still shows every option, so neighbouring values stay\n\t// reachable after picking one.\n\tconst visibleOptions = useMemo(() => {\n\t\tconst query = text.trim();\n\t\tif (options.some((option) => option.value === query)) return options;\n\t\treturn filter(options, text);\n\t}, [filter, options, text]);\n\n\tuseEffect(() => {\n\t\tif (!isOpen) return;\n\n\t\tconst handlePointerDown = (event: MouseEvent) => {\n\t\t\tif (!wrapperRef.current?.contains(event.target as Node)) {\n\t\t\t\tsetListOpen(false);\n\t\t\t}\n\t\t};\n\n\t\tdocument.addEventListener('mousedown', handlePointerDown);\n\t\treturn () => document.removeEventListener('mousedown', handlePointerDown);\n\t}, [isOpen]);\n\n\t// Keep the keyboard cursor in view when it moves past the visible rows.\n\tuseEffect(() => {\n\t\tif (activeIndex < 0) return;\n\t\tconst activeNode = listRef.current?.children[activeIndex];\n\t\t// Guarded because scrollIntoView is not implemented everywhere the library\n\t\t// renders — jsdom being the common case.\n\t\tif (activeNode instanceof HTMLElement && activeNode.scrollIntoView) {\n\t\t\tactiveNode.scrollIntoView({ block: 'nearest' });\n\t\t}\n\t}, [activeIndex]);\n\n\tconst selectOption = (option: ComboBoxOption) => {\n\t\tsetText(option.value);\n\t\tonChange(option.value);\n\t\tsetListOpen(false);\n\t\tmoveActiveIndex(-1);\n\t};\n\n\t// Typed as the DOM Event the Input hook passes; the fields read below are\n\t// KeyboardEvent's, so it is narrowed on entry.\n\tconst handleKeyDown = (nativeEvent: Event) => {\n\t\tconst event = nativeEvent as unknown as KeyboardEvent;\n\t\tif (event.key === 'ArrowDown' || event.key === 'ArrowUp') {\n\t\t\tevent.preventDefault();\n\t\t\tif (!isOpenRef.current) {\n\t\t\t\tsetListOpen(true);\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tconst step = event.key === 'ArrowDown' ? 1 : -1;\n\t\t\tconst next = activeIndexRef.current + step;\n\t\t\tif (next < 0) moveActiveIndex(visibleOptions.length - 1);\n\t\t\telse if (next >= visibleOptions.length) moveActiveIndex(0);\n\t\t\telse moveActiveIndex(next);\n\t\t\treturn;\n\t\t}\n\n\t\tif (\n\t\t\tevent.key === 'Enter' &&\n\t\t\tisOpenRef.current &&\n\t\t\tactiveIndexRef.current >= 0\n\t\t) {\n\t\t\tevent.preventDefault();\n\t\t\tselectOption(visibleOptions[activeIndexRef.current]);\n\t\t\treturn;\n\t\t}\n\n\t\tif (event.key === 'Escape') setListOpen(false);\n\t};\n\n\tconst handleBlur = () => {\n\t\tif (isValid(text)) {\n\t\t\tconst formatted = format ? format(text) : text;\n\t\t\tsetText(formatted);\n\t\t\tif (formatted !== value) onChange(formatted);\n\t\t\treturn;\n\t\t}\n\t\t// Unusable text falls back to the last committed value.\n\t\tsetText(value);\n\t\tonInvalidBlur?.();\n\t};\n\n\treturn (\n\t\t<ComboBoxWrapper ref={wrapperRef} data-test={dataTest}>\n\t\t\t<div>\n\t\t\t\t<Input\n\t\t\t\t\twidth=\"100%\"\n\t\t\t\t\tplaceholder={placeholder}\n\t\t\t\t\tvalue={text}\n\t\t\t\t\tisDisabled={disabled}\n\t\t\t\t\terrorMessage={errorMessage}\n\t\t\t\t\tstate={errorMessage ? 'invalid' : disabled ? 'disabled' : 'active'}\n\t\t\t\t\t// Input handles its own keydown, so the arrow/Enter handling goes\n\t\t\t\t\t// through its hook rather than a wrapper that never sees the event.\n\t\t\t\t\t// Same chevron Dropdown uses, so the field reads as one rather than\n\t\t\t\t\t// looking like a plain text box that happens to suggest values.\n\t\t\t\t\trightIcon={{\n\t\t\t\t\t\ticon: DownIcon,\n\t\t\t\t\t\tcallback: () => setListOpen(!isOpenRef.current),\n\t\t\t\t\t\t'data-test': 'combo-box-toggle',\n\t\t\t\t\t}}\n\t\t\t\t\tonKeyDownEvent={handleKeyDown}\n\t\t\t\t\t// Without this Input re-fires onChangeText on every keypress, which\n\t\t\t\t\t// would re-open the list on Escape and fight the arrow keys.\n\t\t\t\t\tnoKeyDownChange\n\t\t\t\t\tonFocus={() => setListOpen(true)}\n\t\t\t\t\tonChangeText={(input: string) => {\n\t\t\t\t\t\tconst cleaned = sanitize ? sanitize(input) : input;\n\t\t\t\t\t\tsetText(cleaned);\n\t\t\t\t\t\tsetListOpen(true);\n\t\t\t\t\t\tmoveActiveIndex(-1);\n\t\t\t\t\t\tif (isValid(cleaned)) onChange(cleaned);\n\t\t\t\t\t}}\n\t\t\t\t\tonBlur={handleBlur}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t\t{isOpen && !!visibleOptions.length && (\n\t\t\t\t<OptionList ref={listRef} role=\"listbox\">\n\t\t\t\t\t{visibleOptions.map((option, index) => (\n\t\t\t\t\t\t<OptionItem\n\t\t\t\t\t\t\tkey={option.value}\n\t\t\t\t\t\t\trole=\"option\"\n\t\t\t\t\t\t\taria-selected={option.value === value}\n\t\t\t\t\t\t\tisActive={index === activeIndex}\n\t\t\t\t\t\t\tisSelected={option.value === value}\n\t\t\t\t\t\t\t// mousedown fires before the input's blur, so the click is not\n\t\t\t\t\t\t\t// lost to the field closing first.\n\t\t\t\t\t\t\tonMouseDown={(event) => {\n\t\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\t\tselectOption(option);\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{option.label ?? option.value}\n\t\t\t\t\t\t</OptionItem>\n\t\t\t\t\t))}\n\t\t\t\t</OptionList>\n\t\t\t)}\n\t\t</ComboBoxWrapper>\n\t);\n};\n\nexport default ComboBox;\n"],"names":["defaultFilter","options","text","query","option","ComboBox","value","onChange","validate","format","sanitize","filter","placeholder","errorMessage","disabled","onInvalidBlur","dataTest","setText","useState","isOpen","setIsOpen","activeIndex","setActiveIndex","wrapperRef","useRef","listRef","activeIndexRef","isOpenRef","moveActiveIndex","next","setListOpen","open","isValid","candidate","useEffect","prev","visibleOptions","useMemo","handlePointerDown","event","activeNode","selectOption","jsxs","ComboBoxWrapper","jsx","Input","DownIcon","nativeEvent","step","input","cleaned","formatted","OptionList","index","OptionItem"],"mappings":"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"}

package/dist/esm/components/combo-box/ComboBox.styled.d.ts

@@ -0,0 +1,12 @@
+/** Anchors the option list to the input below it. */
+export declare const ComboBoxWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
+/**
+ * The option list. Sits above neighbouring fields — date pickers in the same
+ * form commonly overlay at z-index 4, so this clears them.
+ */
+export declare const OptionList: import('styled-components').StyledComponent<"ul", any, {}, never>;
+/** `isActive` tracks the keyboard cursor, which is separate from selection. */
+export declare const OptionItem: import('styled-components').StyledComponent<"li", any, {
+    isActive: boolean;
+    isSelected: boolean;
+}, never>;

package/dist/esm/components/combo-box/ComboBox.styled.js

@@ -0,0 +1,40 @@
+import r from "styled-components";
+import { COLORS as o } from "../../constants/Theme.js";
+const n = r.div`
+	position: relative;
+	width: 100%;
+`, p = r.ul`
+	position: absolute;
+	top: calc(100% + 4px);
+	left: 0;
+	right: 0;
+	z-index: 5;
+	margin: 0;
+	padding: 4px 0;
+	list-style: none;
+	max-height: 240px;
+	overflow-y: auto;
+	background: ${o.surface.standard};
+	border: 1px solid ${o.stroke.primary};
+	border-radius: 4px;
+	box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.08);
+`, a = r.li`
+	padding: 10px 12px;
+	cursor: pointer;
+	font-family: 'Inter', sans-serif;
+	font-size: 14px;
+	line-height: 20px;
+	color: ${(e) => e.isSelected ? o.content.brand : o.content.primary};
+	font-weight: ${(e) => e.isSelected ? 600 : 400};
+	background: ${(e) => e.isActive ? o.surface.hovered : "transparent"};
+
+	:hover {
+		background: ${o.surface.hovered};
+	}
+`;
+export {
+  n as ComboBoxWrapper,
+  a as OptionItem,
+  p as OptionList
+};
+//# sourceMappingURL=ComboBox.styled.js.map

package/dist/esm/components/combo-box/ComboBox.styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComboBox.styled.js","sources":["../../../../src/components/combo-box/ComboBox.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\n\n/** Anchors the option list to the input below it. */\nexport const ComboBoxWrapper = styled.div`\n\tposition: relative;\n\twidth: 100%;\n`;\n\n/**\n * The option list. Sits above neighbouring fields — date pickers in the same\n * form commonly overlay at z-index 4, so this clears them.\n */\nexport const OptionList = styled.ul`\n\tposition: absolute;\n\ttop: calc(100% + 4px);\n\tleft: 0;\n\tright: 0;\n\tz-index: 5;\n\tmargin: 0;\n\tpadding: 4px 0;\n\tlist-style: none;\n\tmax-height: 240px;\n\toverflow-y: auto;\n\tbackground: ${COLORS.surface.standard};\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tborder-radius: 4px;\n\tbox-shadow: 0px 4px 12px rgba(0, 0, 0, 0.08);\n`;\n\n/** `isActive` tracks the keyboard cursor, which is separate from selection. */\nexport const OptionItem = styled.li<{ isActive: boolean; isSelected: boolean }>`\n\tpadding: 10px 12px;\n\tcursor: pointer;\n\tfont-family: 'Inter', sans-serif;\n\tfont-size: 14px;\n\tline-height: 20px;\n\tcolor: ${(props) =>\n\t\tprops.isSelected ? COLORS.content.brand : COLORS.content.primary};\n\tfont-weight: ${(props) => (props.isSelected ? 600 : 400)};\n\tbackground: ${(props) =>\n\t\tprops.isActive ? COLORS.surface.hovered : 'transparent'};\n\n\t:hover {\n\t\tbackground: ${COLORS.surface.hovered};\n\t}\n`;\n"],"names":["ComboBoxWrapper","styled","OptionList","COLORS","OptionItem","props"],"mappings":";;AAIO,MAAMA,IAAkBC,EAAO;AAAA;AAAA;AAAA,GASzBC,IAAaD,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAWlBE,EAAO,QAAQ,QAAQ;AAAA,qBACjBA,EAAO,OAAO,OAAO;AAAA;AAAA;AAAA,GAM7BC,IAAaH,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAMvB,CAACI,MACTA,EAAM,aAAaF,EAAO,QAAQ,QAAQA,EAAO,QAAQ,OAAO;AAAA,gBAClD,CAACE,MAAWA,EAAM,aAAa,MAAM,GAAI;AAAA,eAC1C,CAACA,MACdA,EAAM,WAAWF,EAAO,QAAQ,UAAU,aAAa;AAAA;AAAA;AAAA,gBAGzCA,EAAO,QAAQ,OAAO;AAAA;AAAA;"}

package/dist/esm/components/combo-box/index.d.ts

@@ -0,0 +1,3 @@
+import { ComboBox } from './ComboBox';
+export { ComboBox };
+export * from './model';

package/dist/esm/components/combo-box/model.d.ts

@@ -0,0 +1,55 @@
+/** A value the combo box can offer. */
+export interface ComboBoxOption {
+    /**
+     * Committed through `onChange` when this option is picked, and compared
+     * against the typed text to decide what the list shows.
+     */
+    value: string;
+    /**
+     * Text rendered in the list. Defaults to `value`, which suits lists where the
+     * two are the same — times, codes, plain identifiers.
+     */
+    label?: string;
+}
+export interface ComboBoxProps {
+    /** Current committed value. Empty string when nothing is chosen yet. */
+    value: string;
+    options: ComboBoxOption[];
+    /**
+     * Fires whenever the typed text is accepted by `validate`, and whenever an
+     * option is picked from the list.
+     */
+    onChange: (value: string) => void;
+    /**
+     * Rejects text that should not be committed — a half-typed entry, or one
+     * outside the allowed range. Return false and the text stays in the box
+     * without being committed, which is what keeps the field editable mid-entry.
+     * @default accepts any non-empty text
+     */
+    validate?: (text: string) => boolean;
+    /**
+     * Rewrites the text when the field is left, e.g. padding "9:5" to "9:05".
+     * Only called for text that passes `validate`.
+     *
+     * Also used to tell whether typed text already means the committed value:
+     * "9:5" and "9:05" format alike, so the box is left alone rather than being
+     * rewritten mid-entry.
+     */
+    format?: (text: string) => string;
+    /**
+     * Strips characters as they are typed, so unusable input never reaches the
+     * box. Applied before `validate`.
+     */
+    sanitize?: (text: string) => string;
+    /**
+     * Narrows the list against the typed text. The default keeps options whose
+     * value starts with what has been typed.
+     */
+    filter?: (options: ComboBoxOption[], text: string) => ComboBoxOption[];
+    placeholder?: string;
+    errorMessage?: string;
+    disabled?: boolean;
+    /** Called on blur when the text is not valid, for the caller's own checks. */
+    onInvalidBlur?: () => void;
+    'data-test'?: string;
+}

package/dist/esm/components/datePicker/DatePickerWrapper.d.ts

@@ -13,4 +13,11 @@ export declare const DatePickerWrapper: React.FC<{
     maxDate?: Date;
     minDate?: Date;
     dateButtonType?: DateButtonType;
+    /**
+     * date-fns format for the button label, e.g. 'dd MMM yyyy' -> "10 Aug 2026".
+     * Omit to keep the locale default (toLocaleDateString).
+     */
+    displayFormat?: string;
+    /** Shown instead of a date when `val` is empty. */
+    placeholder?: string;
 }>;

package/dist/esm/components/datePicker/DatePickerWrapper.js

@@ -1,83 +1,85 @@
-import { jsxs as m, Fragment as w, jsx as o } from "react/jsx-runtime";
-import { useState as L, useRef as f } from "react";
-import k from "react-calendar";
-import { useOutside as b } from "../../hooks/useOutside.js";
-import A from "../../utils/DateUtils.js";
+import { jsxs as p, Fragment as A, jsx as n } from "react/jsx-runtime";
+import { format as P } from "date-fns";
+import { useState as R, useRef as y } from "react";
+import L from "react-calendar";
+import { useOutside as x } from "../../hooks/useOutside.js";
+import E from "../../utils/DateUtils.js";
 import { COLORS as r } from "../../constants/Theme.js";
-import P from "../../assets/icons/calendar.svg.js";
-import { BodyPrimary as R, BodySecondary as x } from "../TypographyStyle.js";
-import { DateBtn as E, PickerContainer as _ } from "./DatePickerWrapper.styled.js";
-import { DateButtonType as a } from "./model.js";
-const q = ({
-  val: t,
-  onChange: u,
-  calendarProps: D,
-  disabled: e,
-  pickerStyles: g,
-  nativeID: p,
-  maxDate: y,
-  minDate: d,
-  dateButtonType: n,
-  dateButtonStyles: S
+import O from "../../assets/icons/calendar.svg.js";
+import { BodyPrimary as _, BodySecondary as $ } from "../TypographyStyle.js";
+import { DateBtn as G, PickerContainer as j } from "./DatePickerWrapper.styled.js";
+import { DateButtonType as c } from "./model.js";
+const K = ({
+  val: e,
+  onChange: D,
+  calendarProps: g,
+  disabled: o,
+  pickerStyles: d,
+  nativeID: C,
+  maxDate: h,
+  minDate: w,
+  dateButtonType: i,
+  dateButtonStyles: k,
+  displayFormat: m,
+  placeholder: S
 }) => {
-  const [c, i] = L(!1), C = f(null), s = f(null);
-  b(s, () => {
-    i(!1);
+  const [f, s] = R(!1), b = y(null), l = y(null);
+  x(l, () => {
+    s(!1);
   });
-  const l = () => t ? Array.isArray(t) ? t?.[0]?.toString() && t?.[1]?.toString() ? `${new Date(t?.[0]?.toString()).toLocaleDateString()}-${new Date(
-    t?.[1]?.toString()
-  ).toLocaleDateString()}` : `${A.getPastDate(
-    /* @__PURE__ */ new Date(),
-    30
-  ).toLocaleDateString()}-${(/* @__PURE__ */ new Date()).toLocaleDateString()}` : new Date(t.toString()).toLocaleDateString() : (/* @__PURE__ */ new Date()).toLocaleDateString();
-  return /* @__PURE__ */ m(w, { children: [
-    /* @__PURE__ */ m(
-      E,
+  const t = (a) => m ? P(a, m) : a.toLocaleDateString(), u = () => e ? Array.isArray(e) ? e?.[0]?.toString() && e?.[1]?.toString() ? `${t(new Date(e[0].toString()))}-${t(
+    new Date(e[1].toString())
+  )}` : `${t(E.getPastDate(/* @__PURE__ */ new Date(), 30))}-${t(
+    /* @__PURE__ */ new Date()
+  )}` : t(new Date(e.toString())) : S ?? t(/* @__PURE__ */ new Date());
+  return /* @__PURE__ */ p(A, { children: [
+    /* @__PURE__ */ p(
+      G,
       {
-        id: p,
-        ref: C,
-        bgColor: e ? r.background.base : r.surface.standard,
+        id: C,
+        ref: b,
+        bgColor: o ? r.background.base : r.surface.standard,
         borderColor: r.stroke.primary,
-        onClick: () => i(!c),
-        dateButtonType: n || a.DEFAULT,
-        style: S,
+        onClick: () => s(!f),
+        dateButtonType: i || c.DEFAULT,
+        style: k,
         children: [
-          n === a.LARGE ? /* @__PURE__ */ o(
-            R,
+          i === c.LARGE ? /* @__PURE__ */ n(
+            _,
             {
               style: {
-                color: e ? r.content.inactive : r.content.primary,
+                color: o ? r.content.inactive : r.content.primary,
                 flex: 1
               },
-              children: l()
+              children: u()
             }
-          ) : /* @__PURE__ */ o(
-            x,
+          ) : /* @__PURE__ */ n(
+            $,
             {
               style: {
-                color: e ? r.content.inactive : r.content.primary,
+                color: o ? r.content.inactive : r.content.primary,
                 flex: 1
               },
-              children: l()
+              children: u()
             }
           ),
-          /* @__PURE__ */ o(
-            P,
+          /* @__PURE__ */ n(
+            O,
             {
-              width: n === a.LARGE ? 24 : 20,
-              height: n === a.LARGE ? 24 : 20,
-              color: e ? r.content.inactive : r.content.primary
+              width: i === c.LARGE ? 24 : 20,
+              height: i === c.LARGE ? 24 : 20,
+              color: o ? r.content.inactive : r.content.primary
             }
           )
         ]
       }
     ),
-    c && !e && /* @__PURE__ */ o(
-      _,
+    f && !o && /* @__PURE__ */ n(
+      j,
       {
-        ref: s,
+        ref: l,
         style: {
-          ...g
+          ...d
           // top: openUpwards ? 'auto' : 'calc(100% + 8px)',
           // bottom: openUpwards ? 'calc(100% + 8px)' : 'auto',
         },
@@ -86,18 +88,18 @@ const q = ({
         brandColor: r.background.brand,
         bgColor: r.surface.standard,
         borderColor: r.stroke.primary,
-        children: /* @__PURE__ */ o(
-          k,
+        children: /* @__PURE__ */ n(
+          L,
           {
             tileClassName: ["custom__tile"],
             className: ["custom__calendar"],
-            onChange: (h) => {
-              u(h), i(!1);
+            onChange: (a) => {
+              D(a), s(!1);
             },
-            maxDate: y,
-            minDate: d,
-            value: t ? Array.isArray(t) ? t.length === 2 ? [new Date(t[0]), new Date(t[1])] : null : new Date(t) : null,
-            ...D
+            maxDate: h,
+            minDate: w,
+            value: e ? Array.isArray(e) ? e.length === 2 ? [new Date(e[0]), new Date(e[1])] : null : new Date(e) : null,
+            ...g
           }
         )
       }
@@ -105,6 +107,6 @@ const q = ({
   ] });
 };
 export {
-  q as DatePickerWrapper
+  K as DatePickerWrapper
 };
 //# sourceMappingURL=DatePickerWrapper.js.map

package/dist/esm/components/datePicker/DatePickerWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePickerWrapper.js","sources":["../../../../src/components/datePicker/DatePickerWrapper.tsx"],"sourcesContent":["import React, { useRef, useState } from 'react';\nimport Calendar, { CalendarProps } from 'react-calendar';\nimport { CSSProperties } from 'styled-components';\nimport { useOutside } from '@src/hooks/useOutside';\nimport DateUtils from '@src/utils/DateUtils';\nimport { COLORS } from '@src/constants/Theme';\nimport CalendarIcon from '../../assets/icons/calendar.svg';\nimport { BodyPrimary, BodySecondary } from '../TypographyStyle';\nimport { DateBtn, PickerContainer } from './DatePickerWrapper.styled';\nimport { DateButtonType } from './model';\n\nexport const DatePickerWrapper: React.FC<{\n\tval?: Date | Date[];\n\tonChange: (val: Date | Date[]) => void;\n\tcalendarProps?: CalendarProps;\n\tpickerStyles?: CSSProperties;\n\tdateButtonStyles?: CSSProperties;\n\tnativeID?: string;\n\tdisabled?: boolean;\n\tmaxDate?: Date;\n\tminDate?: Date;\n\tdateButtonType?: DateButtonType;\n}> = ({\n\tval,\n\tonChange,\n\tcalendarProps,\n\tdisabled,\n\tpickerStyles,\n\tnativeID,\n\tmaxDate,\n\tminDate,\n\tdateButtonType,\n\tdateButtonStyles,\n}) => {\n\tconst [showPicker, setPicker] = useState(false);\n\t// const [openUpwards, setOpenUpwards] = useState(false);\n\tconst buttonRef = useRef<HTMLDivElement | null>(null);\n\tconst pickerRef = useRef<HTMLDivElement | null>(null);\n\n\tuseOutside(pickerRef, () => {\n\t\tsetPicker(false);\n\t});\n\n\t// useEffect(() => {\n\t// \tif (buttonRef.current && pickerRef.current) {\n\t// \t\tconst buttonRect = buttonRef.current.getBoundingClientRect();\n\t// \t\tconst pickerHeight = pickerRef.current.offsetHeight;\n\t// \t\tconst spaceBelow = window.innerHeight - buttonRect.bottom;\n\n\t// \t\t// If not enough space below, open upwards\n\t// \t\tsetOpenUpwards(spaceBelow < pickerHeight);\n\t// \t}\n\t// }, [showPicker]);\n\n\tconst getDisplayValue = () => {\n\t\treturn val\n\t\t\t? Array.isArray(val)\n\t\t\t\t? val?.[0]?.toString() && val?.[1]?.toString()\n\t\t\t\t\t? `${new Date(val?.[0]?.toString()).toLocaleDateString()}-${new Date(\n\t\t\t\t\t\t\tval?.[1]?.toString(),\n\t\t\t\t\t  ).toLocaleDateString()}`\n\t\t\t\t\t: `${DateUtils.getPastDate(\n\t\t\t\t\t\t\tnew Date(),\n\t\t\t\t\t\t\t30,\n\t\t\t\t\t  ).toLocaleDateString()}-${new Date().toLocaleDateString()}`\n\t\t\t\t: new Date(val.toString()).toLocaleDateString()\n\t\t\t: new Date().toLocaleDateString();\n\t};\n\treturn (\n\t\t<>\n\t\t\t<DateBtn\n\t\t\t\tid={nativeID}\n\t\t\t\tref={buttonRef}\n\t\t\t\tbgColor={disabled ? COLORS.background.base : COLORS.surface.standard}\n\t\t\t\tborderColor={COLORS.stroke.primary}\n\t\t\t\tonClick={() => setPicker(!showPicker)}\n\t\t\t\tdateButtonType={dateButtonType || DateButtonType.DEFAULT}\n\t\t\t\tstyle={dateButtonStyles}\n\t\t\t>\n\t\t\t\t{dateButtonType === DateButtonType.LARGE ? (\n\t\t\t\t\t<BodyPrimary\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tcolor: disabled\n\t\t\t\t\t\t\t\t? COLORS.content.inactive\n\t\t\t\t\t\t\t\t: COLORS.content.primary,\n\t\t\t\t\t\t\tflex: 1,\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t{getDisplayValue()}\n\t\t\t\t\t</BodyPrimary>\n\t\t\t\t) : (\n\t\t\t\t\t<BodySecondary\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tcolor: disabled\n\t\t\t\t\t\t\t\t? COLORS.content.inactive\n\t\t\t\t\t\t\t\t: COLORS.content.primary,\n\t\t\t\t\t\t\tflex: 1,\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t{getDisplayValue()}\n\t\t\t\t\t</BodySecondary>\n\t\t\t\t)}\n\t\t\t\t<CalendarIcon\n\t\t\t\t\twidth={dateButtonType === DateButtonType.LARGE ? 24 : 20}\n\t\t\t\t\theight={dateButtonType === DateButtonType.LARGE ? 24 : 20}\n\t\t\t\t\tcolor={disabled ? COLORS.content.inactive : COLORS.content.primary}\n\t\t\t\t/>\n\t\t\t</DateBtn>\n\t\t\t{showPicker && !disabled && (\n\t\t\t\t<PickerContainer\n\t\t\t\t\tref={\n\t\t\t\t\t\tpickerRef as\n\t\t\t\t\t\t\t| ((instance: HTMLDivElement | null) => void)\n\t\t\t\t\t\t\t| React.RefObject<HTMLDivElement>\n\t\t\t\t\t\t\t| null\n\t\t\t\t\t\t\t| undefined\n\t\t\t\t\t}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\t...pickerStyles,\n\t\t\t\t\t\t// top: openUpwards ? 'auto' : 'calc(100% + 8px)',\n\t\t\t\t\t\t// bottom: openUpwards ? 'calc(100% + 8px)' : 'auto',\n\t\t\t\t\t}}\n\t\t\t\t\tcontentPrimary={COLORS.content.primary}\n\t\t\t\t\tsubDued={COLORS.surface.subdued}\n\t\t\t\t\tbrandColor={COLORS.background.brand}\n\t\t\t\t\tbgColor={COLORS.surface.standard}\n\t\t\t\t\tborderColor={COLORS.stroke.primary}\n\t\t\t\t>\n\t\t\t\t\t<Calendar\n\t\t\t\t\t\ttileClassName={['custom__tile']}\n\t\t\t\t\t\tclassName={['custom__calendar']}\n\t\t\t\t\t\tonChange={(d) => {\n\t\t\t\t\t\t\tonChange(d);\n\t\t\t\t\t\t\tsetPicker(false);\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tmaxDate={maxDate}\n\t\t\t\t\t\tminDate={minDate}\n\t\t\t\t\t\tvalue={\n\t\t\t\t\t\t\tval\n\t\t\t\t\t\t\t\t? Array.isArray(val)\n\t\t\t\t\t\t\t\t\t? val.length === 2\n\t\t\t\t\t\t\t\t\t\t? [new Date(val[0]), new Date(val[1])]\n\t\t\t\t\t\t\t\t\t\t: null\n\t\t\t\t\t\t\t\t\t: new Date(val)\n\t\t\t\t\t\t\t\t: null\n\t\t\t\t\t\t}\n\t\t\t\t\t\t{...calendarProps}\n\t\t\t\t\t/>\n\t\t\t\t</PickerContainer>\n\t\t\t)}\n\t\t</>\n\t);\n};\n"],"names":["DatePickerWrapper","val","onChange","calendarProps","disabled","pickerStyles","nativeID","maxDate","minDate","dateButtonType","dateButtonStyles","showPicker","setPicker","useState","buttonRef","useRef","pickerRef","useOutside","getDisplayValue","DateUtils","jsxs","Fragment","DateBtn","COLORS","DateButtonType","jsx","BodyPrimary","BodySecondary","CalendarIcon","PickerContainer","Calendar","d"],"mappings":"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"}
+{"version":3,"file":"DatePickerWrapper.js","sources":["../../../../src/components/datePicker/DatePickerWrapper.tsx"],"sourcesContent":["import { format as formatDate } from 'date-fns';\nimport React, { useRef, useState } from 'react';\nimport Calendar, { CalendarProps } from 'react-calendar';\nimport { CSSProperties } from 'styled-components';\nimport { useOutside } from '@src/hooks/useOutside';\nimport DateUtils from '@src/utils/DateUtils';\nimport { COLORS } from '@src/constants/Theme';\nimport CalendarIcon from '../../assets/icons/calendar.svg';\nimport { BodyPrimary, BodySecondary } from '../TypographyStyle';\nimport { DateBtn, PickerContainer } from './DatePickerWrapper.styled';\nimport { DateButtonType } from './model';\n\nexport const DatePickerWrapper: React.FC<{\n\tval?: Date | Date[];\n\tonChange: (val: Date | Date[]) => void;\n\tcalendarProps?: CalendarProps;\n\tpickerStyles?: CSSProperties;\n\tdateButtonStyles?: CSSProperties;\n\tnativeID?: string;\n\tdisabled?: boolean;\n\tmaxDate?: Date;\n\tminDate?: Date;\n\tdateButtonType?: DateButtonType;\n\t/**\n\t * date-fns format for the button label, e.g. 'dd MMM yyyy' -> \"10 Aug 2026\".\n\t * Omit to keep the locale default (toLocaleDateString).\n\t */\n\tdisplayFormat?: string;\n\t/** Shown instead of a date when `val` is empty. */\n\tplaceholder?: string;\n}> = ({\n\tval,\n\tonChange,\n\tcalendarProps,\n\tdisabled,\n\tpickerStyles,\n\tnativeID,\n\tmaxDate,\n\tminDate,\n\tdateButtonType,\n\tdateButtonStyles,\n\tdisplayFormat,\n\tplaceholder,\n}) => {\n\tconst [showPicker, setPicker] = useState(false);\n\t// const [openUpwards, setOpenUpwards] = useState(false);\n\tconst buttonRef = useRef<HTMLDivElement | null>(null);\n\tconst pickerRef = useRef<HTMLDivElement | null>(null);\n\n\tuseOutside(pickerRef, () => {\n\t\tsetPicker(false);\n\t});\n\n\t// useEffect(() => {\n\t// \tif (buttonRef.current && pickerRef.current) {\n\t// \t\tconst buttonRect = buttonRef.current.getBoundingClientRect();\n\t// \t\tconst pickerHeight = pickerRef.current.offsetHeight;\n\t// \t\tconst spaceBelow = window.innerHeight - buttonRect.bottom;\n\n\t// \t\t// If not enough space below, open upwards\n\t// \t\tsetOpenUpwards(spaceBelow < pickerHeight);\n\t// \t}\n\t// }, [showPicker]);\n\n\t/** Honours `displayFormat` when given, else the locale default. */\n\tconst formatOne = (date: Date) =>\n\t\tdisplayFormat ? formatDate(date, displayFormat) : date.toLocaleDateString();\n\n\tconst getDisplayValue = () => {\n\t\tif (!val) {\n\t\t\treturn placeholder ?? formatOne(new Date());\n\t\t}\n\n\t\tif (Array.isArray(val)) {\n\t\t\treturn val?.[0]?.toString() && val?.[1]?.toString()\n\t\t\t\t? `${formatOne(new Date(val[0].toString()))}-${formatOne(\n\t\t\t\t\t\tnew Date(val[1].toString()),\n\t\t\t\t  )}`\n\t\t\t\t: `${formatOne(DateUtils.getPastDate(new Date(), 30))}-${formatOne(\n\t\t\t\t\t\tnew Date(),\n\t\t\t\t  )}`;\n\t\t}\n\n\t\treturn formatOne(new Date(val.toString()));\n\t};\n\treturn (\n\t\t<>\n\t\t\t<DateBtn\n\t\t\t\tid={nativeID}\n\t\t\t\tref={buttonRef}\n\t\t\t\tbgColor={disabled ? COLORS.background.base : COLORS.surface.standard}\n\t\t\t\tborderColor={COLORS.stroke.primary}\n\t\t\t\tonClick={() => setPicker(!showPicker)}\n\t\t\t\tdateButtonType={dateButtonType || DateButtonType.DEFAULT}\n\t\t\t\tstyle={dateButtonStyles}\n\t\t\t>\n\t\t\t\t{dateButtonType === DateButtonType.LARGE ? (\n\t\t\t\t\t<BodyPrimary\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tcolor: disabled\n\t\t\t\t\t\t\t\t? COLORS.content.inactive\n\t\t\t\t\t\t\t\t: COLORS.content.primary,\n\t\t\t\t\t\t\tflex: 1,\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t{getDisplayValue()}\n\t\t\t\t\t</BodyPrimary>\n\t\t\t\t) : (\n\t\t\t\t\t<BodySecondary\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tcolor: disabled\n\t\t\t\t\t\t\t\t? COLORS.content.inactive\n\t\t\t\t\t\t\t\t: COLORS.content.primary,\n\t\t\t\t\t\t\tflex: 1,\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t{getDisplayValue()}\n\t\t\t\t\t</BodySecondary>\n\t\t\t\t)}\n\t\t\t\t<CalendarIcon\n\t\t\t\t\twidth={dateButtonType === DateButtonType.LARGE ? 24 : 20}\n\t\t\t\t\theight={dateButtonType === DateButtonType.LARGE ? 24 : 20}\n\t\t\t\t\tcolor={disabled ? COLORS.content.inactive : COLORS.content.primary}\n\t\t\t\t/>\n\t\t\t</DateBtn>\n\t\t\t{showPicker && !disabled && (\n\t\t\t\t<PickerContainer\n\t\t\t\t\tref={\n\t\t\t\t\t\tpickerRef as\n\t\t\t\t\t\t\t| ((instance: HTMLDivElement | null) => void)\n\t\t\t\t\t\t\t| React.RefObject<HTMLDivElement>\n\t\t\t\t\t\t\t| null\n\t\t\t\t\t\t\t| undefined\n\t\t\t\t\t}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\t...pickerStyles,\n\t\t\t\t\t\t// top: openUpwards ? 'auto' : 'calc(100% + 8px)',\n\t\t\t\t\t\t// bottom: openUpwards ? 'calc(100% + 8px)' : 'auto',\n\t\t\t\t\t}}\n\t\t\t\t\tcontentPrimary={COLORS.content.primary}\n\t\t\t\t\tsubDued={COLORS.surface.subdued}\n\t\t\t\t\tbrandColor={COLORS.background.brand}\n\t\t\t\t\tbgColor={COLORS.surface.standard}\n\t\t\t\t\tborderColor={COLORS.stroke.primary}\n\t\t\t\t>\n\t\t\t\t\t<Calendar\n\t\t\t\t\t\ttileClassName={['custom__tile']}\n\t\t\t\t\t\tclassName={['custom__calendar']}\n\t\t\t\t\t\tonChange={(d) => {\n\t\t\t\t\t\t\tonChange(d);\n\t\t\t\t\t\t\tsetPicker(false);\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tmaxDate={maxDate}\n\t\t\t\t\t\tminDate={minDate}\n\t\t\t\t\t\tvalue={\n\t\t\t\t\t\t\tval\n\t\t\t\t\t\t\t\t? Array.isArray(val)\n\t\t\t\t\t\t\t\t\t? val.length === 2\n\t\t\t\t\t\t\t\t\t\t? [new Date(val[0]), new Date(val[1])]\n\t\t\t\t\t\t\t\t\t\t: null\n\t\t\t\t\t\t\t\t\t: new Date(val)\n\t\t\t\t\t\t\t\t: null\n\t\t\t\t\t\t}\n\t\t\t\t\t\t{...calendarProps}\n\t\t\t\t\t/>\n\t\t\t\t</PickerContainer>\n\t\t\t)}\n\t\t</>\n\t);\n};\n"],"names":["DatePickerWrapper","val","onChange","calendarProps","disabled","pickerStyles","nativeID","maxDate","minDate","dateButtonType","dateButtonStyles","displayFormat","placeholder","showPicker","setPicker","useState","buttonRef","useRef","pickerRef","useOutside","formatOne","date","formatDate","getDisplayValue","DateUtils","jsxs","Fragment","DateBtn","COLORS","DateButtonType","jsx","BodyPrimary","BodySecondary","CalendarIcon","PickerContainer","Calendar","d"],"mappings":"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"}

package/dist/esm/components/datePicker/index.d.ts

@@ -1,3 +1,4 @@
 export * from './DatePicker';
 export * from './DatePickerWrapper';
 export * from './TimePicker';
+export * from './model';