@phillips/seldon 1.4.1 → 1.6.0

package/dist/_virtual/_commonjsHelpers.js

@@ -1,6 +1,8 @@
-function e(t) {
-  return t && t.__esModule && Object.prototype.hasOwnProperty.call(t, "default") ? t.default : t;
+var o = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {};
+function l(e) {
+  return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
 }
 export {
-  e as getDefaultExportFromCjs
+  o as commonjsGlobal,
+  l as getDefaultExportFromCjs
 };

package/dist/_virtual/index2.js

@@ -0,0 +1,4 @@
+var e = { exports: {} };
+export {
+  e as __module
+};

package/dist/components/Button/Button.d.ts

@@ -1,4 +1,4 @@
-interface ButtonProps {
+export interface ButtonProps {
     /**
      * Is this the principal call to action on the page?
      */
@@ -10,11 +10,11 @@ interface ButtonProps {
     /**
      * How large should the button be?
      */
-    size?: 'small' | 'medium' | 'large';
+    size?: 'sm' | 'md' | 'lg';
     /**
      * Button contents
      */
-    label: React.ReactElement | string;
+    children: React.ReactNode;
     /**
     * Unique id for component
     */
@@ -27,5 +27,5 @@ interface ButtonProps {
 /**
  * Primary UI component for user interaction
  */
-declare const Button: ({ primary, size, backgroundColor, label, id, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+declare const Button: ({ primary, size, backgroundColor, children, id, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
 export default Button;

package/dist/components/Button/Button.js

@@ -2,22 +2,22 @@ import { jsx as a } from "react/jsx-runtime";
 import m from "../../node_modules/classnames/index.js";
 import { px as o } from "../../utils/index.js";
 const c = ({
-  primary: n = !1,
-  size: e = "medium",
+  primary: n = !0,
+  size: r = "md",
   backgroundColor: s,
-  label: r,
+  children: u,
   id: t,
-  ...u
+  ...e
 }) => /* @__PURE__ */ a(
   "button",
   {
     "data-testid": t ? `button-${t}` : "button",
     id: t,
     type: "button",
-    className: m(`${o}-button`, `${o}-button--${e}`, { [`${o}-button--secondary`]: !n }),
+    className: m(`${o}-button`, `${o}-button--${r}`, { [`${o}-button--secondary`]: !n }),
     style: { backgroundColor: s },
-    ...u,
-    children: r
+    ...e,
+    children: u
   }
 );
 export {

package/dist/components/DatePicker/DatePicker.d.ts

@@ -0,0 +1,90 @@
+import * as React from 'react';
+import flatpickr from 'flatpickr';
+import { InputProps } from '../Input/Input';
+export interface DatePickerProps extends Omit<InputProps, 'defaultValue'>, Record<string, unknown> {
+    /**
+     * Optionally allow manual entry to the date input
+     */
+    allowInput?: boolean;
+    /**
+     * Optionally provide the default value of the `<input>`. Should not be passed into controlled input!
+     */
+    defaultValue?: (Date | string)[];
+    /**
+     * Booolean to specify whether the `<input>` should be disabled
+     */
+    disabled?: boolean;
+    /**
+     * Render time picker on dropdown
+     */
+    enableTime?: boolean;
+    /**
+     * Boolean to specify whether you want the underlying label to be visually hidden
+     */
+    hideLabel?: boolean;
+    /**
+     * A custom `id` for the `<input>`
+     */
+    id: string;
+    /**
+     * Boolean to dictate whether input is inline with the label or not. `true` to use the inline version.
+     */
+    inline?: boolean;
+    /**
+     * Boolean to specify whether the control is currently invalid
+     */
+    invalid?: boolean;
+    /**
+     * Validation text that is displayed when the control is in an invalid state
+     */
+    invalidText?: React.ReactNode;
+    /**
+     * Text that will be read by a screen reader when visiting this control
+     */
+    labelText: string;
+    /**
+     * Locatiion you want the calendar to render for
+     */
+    locale: string;
+    /**
+     * Optional `onChange` handler that is called whenever flatpickr is updated
+     * @param {array} selectedDates
+     * @param {string} dateStr
+     * @param {object} instance
+     */
+    onChange?: flatpickr.Options.Hook;
+    /**
+     * Optional `onClick` handler that is called whenever the `<input>` is clicked
+     */
+    onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+    /**
+     * Optional text to be used for the placeholder attribute of the `<input>`
+     */
+    placeholder?: string;
+    /**
+     * Boolean to deterimine whether the input should be read-only
+     */
+    readOnly?: boolean;
+    /**
+     * Enum to determine the height of the Text Input. Currently supports the following:
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * Enum to determine whether component is a range or range and time
+     */
+    type?: 'single' | 'range';
+    /**
+     * Specify the value of the `<input>` for controlled inputs
+     */
+    value?: string | number | undefined;
+    /**
+     * Boolean to specify whether the control is currently in warning state
+     */
+    warn?: boolean;
+    /**
+     * Text that is displayed when the control is in warning state
+     */
+    warnText?: React.ReactNode;
+}
+declare const DatePicker: React.ForwardRefExoticComponent<Omit<DatePickerProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export default DatePicker;

package/dist/components/DatePicker/DatePicker.js

@@ -0,0 +1,92 @@
+import { jsx as G } from "react/jsx-runtime";
+import * as d from "react";
+import O from "../../node_modules/flatpickr/dist/esm/index.js";
+import k from "../../node_modules/flatpickr/dist/l10n/index.js";
+import { noOP as R, useNormalizedInputProps as J } from "../../utils/index.js";
+import Q from "../Input/Input.js";
+k.en.weekdays.shorthand.forEach((u, o) => {
+  const c = k.en.weekdays.shorthand;
+  c[o] === "Thu" || c[o] === "Th" ? c[o] = "Th" : c[o] = c[o].charAt(0);
+});
+const W = d.forwardRef(({
+  allowInput: u = !1,
+  className: o,
+  defaultValue: c = [],
+  disabled: S,
+  enableTime: p = !1,
+  hideLabel: z,
+  id: a,
+  inline: A,
+  invalid: y,
+  invalidText: g,
+  labelText: H,
+  locale: D = "en",
+  onChange: f = R,
+  onClick: M = R,
+  placeholder: U,
+  readOnly: P,
+  size: _ = "md",
+  type: l = "range",
+  value: $,
+  warn: b,
+  warnText: j,
+  ...q
+}, e) => {
+  const m = J({ disabled: S, id: a, invalid: y, invalidText: g, readOnly: P, type: l, warn: b, warnText: j }), t = d.useRef(), s = d.useRef(), r = d.useRef();
+  d.useEffect(
+    () => {
+      const n = {
+        allowInput: u,
+        clickOpens: !m.disabled,
+        defaultDate: c,
+        enableTime: p,
+        locale: k[D],
+        mode: l,
+        onChange: f
+      };
+      return typeof e == "object" && (e != null && e.current) && (t.current = O(e.current, n)), e === null && typeof s == "object" && s != null && s.current && (t.current = O(s == null ? void 0 : s.current, n)), () => {
+        t.current && t.current.destroy && t.current.destroy();
+      };
+    },
+    [u, c, m.disabled, p, a, D, f, e, l]
+  );
+  const v = (n) => {
+    var i;
+    u && /[0-9-/:]+/g.test(n.key) && (r.current = (i = t == null ? void 0 : t.current) == null ? void 0 : i.selectedDates);
+  }, F = (n) => {
+    var i, E, N, T, B, K, L;
+    if (!(!u || n.relatedTarget instanceof HTMLElement && ((i = n.relatedTarget) != null && i.classList.value.includes("flatpickr"))) && "current" in r && (E = r == null ? void 0 : r.current) != null && E.length && ((N = r == null ? void 0 : r.current) == null ? void 0 : N.length) > 0 && ((T = r == null ? void 0 : r.current) == null ? void 0 : T.join().toString()) !== ((B = t == null ? void 0 : t.current) == null ? void 0 : B.selectedDates.join().toString())) {
+      const h = (K = t.current) == null ? void 0 : K.element;
+      r.current = [], f((L = t.current) == null ? void 0 : L.selectedDates, h == null ? void 0 : h.value, t.current);
+    }
+  };
+  return /* @__PURE__ */ G(
+    Q,
+    {
+      className: `${o} flatpickr`,
+      "data-testid": a,
+      disabled: m.disabled,
+      hideLabel: z,
+      id: a,
+      inline: A,
+      invalid: y,
+      invalidText: g,
+      labelText: H,
+      onClick: M,
+      placeholder: U,
+      readOnly: P,
+      ref: e || s,
+      size: _,
+      value: $,
+      warn: b,
+      warnText: j,
+      onKeyUp: v,
+      onBlur: F,
+      ...q
+    }
+  );
+});
+W.displayName = "DatePicker";
+export {
+  W as default
+};

package/dist/components/Header/Header.js

@@ -1,23 +1,23 @@
-import { jsx as l, jsxs as e, Fragment as a } from "react/jsx-runtime";
+import { jsx as e, jsxs as l, Fragment as d } from "react/jsx-runtime";
 import i from "../Button/Button.js";
-const s = ({ user: n, onLogin: d, onLogout: r, onCreateAccount: h }) => /* @__PURE__ */ l("header", { children: /* @__PURE__ */ e("div", { className: "storybook-header", children: [
-  /* @__PURE__ */ e("div", { children: [
-    /* @__PURE__ */ l("svg", { width: "32", height: "32", viewBox: "0 0 32 32", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ e("g", { fill: "none", fillRule: "evenodd", children: [
-      /* @__PURE__ */ l(
+const a = ({ user: n, onLogin: r, onLogout: h, onCreateAccount: c }) => /* @__PURE__ */ e("header", { children: /* @__PURE__ */ l("div", { className: "storybook-header", children: [
+  /* @__PURE__ */ l("div", { children: [
+    /* @__PURE__ */ e("svg", { width: "32", height: "32", viewBox: "0 0 32 32", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ l("g", { fill: "none", fillRule: "evenodd", children: [
+      /* @__PURE__ */ e(
         "path",
         {
           d: "M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z",
           fill: "#FFF"
         }
       ),
-      /* @__PURE__ */ l(
+      /* @__PURE__ */ e(
         "path",
         {
           d: "M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z",
           fill: "#555AB9"
         }
       ),
-      /* @__PURE__ */ l(
+      /* @__PURE__ */ e(
         "path",
         {
           d: "M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z",
@@ -25,20 +25,20 @@ const s = ({ user: n, onLogin: d, onLogout: r, onCreateAccount: h }) => /* @__PU
         }
       )
     ] }) }),
-    /* @__PURE__ */ l("h1", { children: "Acme" })
+    /* @__PURE__ */ e("h1", { children: "Acme" })
   ] }),
-  /* @__PURE__ */ l("div", { children: n ? /* @__PURE__ */ e(a, { children: [
-    /* @__PURE__ */ e("span", { className: "welcome", children: [
+  /* @__PURE__ */ e("div", { children: n ? /* @__PURE__ */ l(d, { children: [
+    /* @__PURE__ */ l("span", { className: "welcome", children: [
       "Welcome, ",
-      /* @__PURE__ */ l("b", { children: n.name }),
+      /* @__PURE__ */ e("b", { children: n.name }),
       "!"
     ] }),
-    /* @__PURE__ */ l(i, { size: "small", onClick: r, label: "Log out" })
-  ] }) : /* @__PURE__ */ e(a, { children: [
-    /* @__PURE__ */ l(i, { size: "small", onClick: d, label: "Log in" }),
-    /* @__PURE__ */ l(i, { primary: !0, size: "small", onClick: h, label: "Sign up" })
+    /* @__PURE__ */ e(i, { size: "sm", onClick: h, children: "Log out" })
+  ] }) : /* @__PURE__ */ l(d, { children: [
+    /* @__PURE__ */ e(i, { size: "sm", onClick: r, children: "Log in" }),
+    /* @__PURE__ */ e(i, { primary: !0, size: "sm", onClick: c, children: "Sign up" })
   ] }) })
 ] }) });
 export {
-  s as default
+  a as default
 };

package/dist/components/Input/Input.d.ts

@@ -0,0 +1,77 @@
+import * as React from 'react';
+export interface InputProps extends Record<string, unknown> {
+    /**
+     * Optional className to be applied to the `<input>` node
+     */
+    className?: string;
+    /**
+     * Optionally provide the default value of the `<input>`. Should not be passed into controlled input!
+     */
+    defaultValue?: string | number;
+    /**
+     * Booolean to specify whether the `<input>` should be disabled
+     */
+    disabled?: boolean;
+    /**
+     * Boolean to specify whether you want the underlying label to be visually hidden
+     */
+    hideLabel?: boolean;
+    /**
+     * A custom `id` for the `<input>`
+     */
+    id: string;
+    /**
+     * Boolean to dictate whether input is inline with the label or not. `true` to use the inline version.
+     */
+    inline?: boolean;
+    /**
+     * Boolean to specify whether the control is currently invalid
+     */
+    invalid?: boolean;
+    /**
+     * Validation text that is displayed when the control is in an invalid state
+     */
+    invalidText?: React.ReactNode;
+    /**
+     * Text that will be read by a screen reader when visiting this control
+     */
+    labelText: string;
+    /**
+     * Optional `onChange` handler that is called whenever `<input>` is updated
+     */
+    onChange?: (event: React.ChangeEvent<HTMLInputElement> | React.ChangeEvent<HTMLSelectElement>) => void;
+    /**
+     * Optional `onClick` handler that is called whenever the `<input>` is clicked
+     */
+    onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+    /**
+     * Optional text to be used for the placeholder attribute of the `<input>`
+     */
+    placeholder?: string;
+    /**
+     * Boolean to deterimine whether the input should be read-only
+     */
+    readOnly?: boolean;
+    /**
+     * Enum to determine the height of the Text Input. Currently supports the following:
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * String that determines  the type of the `<input>` (e.g 'text', 'date', 'numeber', etc.)
+     */
+    type?: string;
+    /**
+     * Specify the value of the `<input>` for controlled inputs
+     */
+    value?: string | number | undefined;
+    /**
+     * Boolean to specify whether the control is currently in warning state
+     */
+    warn?: boolean;
+    /**
+     * Text that is displayed when the control is in warning state
+     */
+    warnText?: React.ReactNode;
+}
+declare const Input: React.ForwardRefExoticComponent<Omit<InputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export default Input;

package/dist/components/Input/Input.js

@@ -0,0 +1,65 @@
+import { jsxs as P, jsx as r } from "react/jsx-runtime";
+import * as R from "react";
+import e from "../../node_modules/classnames/index.js";
+import { px as t, useNormalizedInputProps as y } from "../../utils/index.js";
+const z = R.forwardRef(({
+  className: p,
+  defaultValue: l,
+  disabled: u,
+  hideLabel: d,
+  id: n,
+  inline: o,
+  invalid: m,
+  invalidText: $,
+  labelText: c,
+  onChange: _,
+  onClick: b,
+  placeholder: f,
+  readOnly: a,
+  size: w = "md",
+  type: s = "text",
+  value: x,
+  warn: h,
+  warnText: v,
+  ...I
+}, N) => {
+  const i = y({ disabled: u, id: n, invalid: m, invalidText: $, readOnly: a, type: s, warn: h, warnText: v }), j = e(
+    `${t}-${s}-input`,
+    `${t}-input`,
+    `${t}-input--${w}`,
+    {
+      [`${t}-input--inline`]: o,
+      [`${t}-input--readonly`]: a,
+      [`${t}-input--disabled`]: i.disabled,
+      [`${t}-input--invalid`]: i.invalid,
+      [`${t}-input--warn`]: i.warn,
+      [`${p}__wrapper`]: p
+    }
+  );
+  return /* @__PURE__ */ P("div", { className: j, children: [
+    /* @__PURE__ */ r("label", { htmlFor: n, className: e(`${t}-input__label`, { [`${t}-input__label--hidden`]: d }), children: c }),
+    /* @__PURE__ */ r(
+      "input",
+      {
+        className: e(`${t}-input__input`, { className: p }),
+        "data-testid": n,
+        defaultValue: l,
+        disabled: i.disabled,
+        id: n,
+        onChange: _,
+        onClick: b,
+        placeholder: f,
+        readOnly: a,
+        ref: N,
+        type: i.type,
+        value: x,
+        ...I
+      }
+    ),
+    i.validation
+  ] });
+});
+z.displayName = "Input";
+export {
+  z as default
+};

package/dist/components/Select/Select.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { InputProps } from '../Input/Input';
+export interface SelectProps extends InputProps {
+    /**
+     * Option elements that are selectable
+     */
+    children: React.ReactNode;
+}
+declare const Select: React.ForwardRefExoticComponent<Omit<SelectProps, "ref"> & React.RefAttributes<HTMLSelectElement>>;
+export default Select;

package/dist/components/Select/Select.js

@@ -0,0 +1,61 @@
+import { jsxs as R, jsx as l } from "react/jsx-runtime";
+import * as y from "react";
+import a from "../../node_modules/classnames/index.js";
+import { px as t, useNormalizedInputProps as z } from "../../utils/index.js";
+const S = y.forwardRef(({
+  children: r,
+  className: n,
+  defaultValue: o,
+  disabled: d,
+  hideLabel: u,
+  id: e,
+  inline: m,
+  invalid: $,
+  invalidText: c,
+  labelText: _,
+  onChange: b,
+  onClick: f,
+  readOnly: p,
+  size: w = "md",
+  value: h,
+  warn: v,
+  warnText: x,
+  ...j
+}, N) => {
+  const s = "select", i = z({ disabled: d, id: e, invalid: $, invalidText: c, readOnly: p, type: s, warn: v, warnText: x }), P = a(
+    `${t}-${s}-input`,
+    `${t}-input`,
+    `${t}-input--${w}`,
+    {
+      [`${t}-input--inline`]: m,
+      [`${t}-input--readonly`]: p,
+      [`${t}-input--disabled`]: i.disabled,
+      [`${t}-input--invalid`]: i.invalid,
+      [`${t}-input--warn`]: i.warn,
+      [`${n}__wrapper`]: n
+    }
+  );
+  return /* @__PURE__ */ R("div", { className: P, children: [
+    /* @__PURE__ */ l("label", { htmlFor: e, className: a(`${t}-input__label`, { [`${t}-input__label--hidden`]: u }), children: _ }),
+    /* @__PURE__ */ l(
+      "select",
+      {
+        className: a(`${t}-input__input`, { className: n }),
+        "data-testid": e,
+        defaultValue: o,
+        disabled: i.disabled,
+        id: e,
+        onChange: b,
+        onClick: f,
+        ref: N,
+        value: h,
+        ...j,
+        children: r
+      }
+    ),
+    i.validation
+  ] });
+});
+export {
+  S as default
+};

package/dist/index.d.ts

@@ -1,4 +1,7 @@
 export { default as Button } from './components/Button/Button';
+export { default as DatePicker } from './components/DatePicker/DatePicker';
 export { default as Header } from './components/Header/Header';
 export { default as HeroBanner } from './components/HeroBanner/HeroBanner';
+export { default as Input } from './components/Input/Input';
+export { default as Select } from './components/Select/Select';
 export { default as Page } from './pages/Page';

package/dist/index.js

@@ -1,10 +1,16 @@
-import { default as r } from "./components/Button/Button.js";
-import { default as t } from "./components/Header/Header.js";
-import { default as d } from "./components/HeroBanner/HeroBanner.js";
-import { default as l } from "./pages/Page.js";
+import { default as a } from "./components/Button/Button.js";
+import { default as o } from "./components/DatePicker/DatePicker.js";
+import { default as u } from "./components/Header/Header.js";
+import { default as l } from "./components/HeroBanner/HeroBanner.js";
+import { default as m } from "./components/Input/Input.js";
+import { default as x } from "./components/Select/Select.js";
+import { default as c } from "./pages/Page.js";
 export {
-  r as Button,
-  t as Header,
-  d as HeroBanner,
-  l as Page
+  a as Button,
+  o as DatePicker,
+  u as Header,
+  l as HeroBanner,
+  m as Input,
+  c as Page,
+  x as Select
 };