@vehiclehistory/property-lib 0.0.10 → 0.0.12

package/dist/components/funnel/FunnelHeader.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode, NamedExoticComponent } from 'react';
+
+declare const _default: NamedExoticComponent<{
+    children?: ReactNode;
+    className?: string;
+    tag?: any;
+    title?: string;
+}>;
+export default _default;

package/dist/components/index.d.ts

@@ -1,26 +1,27 @@
-import { default as Accordion } from './Accordion/Accordion';
-import { default as Alert } from './Alert/Alert';
-import { default as Autocomplete } from './Autocomplete/Autocomplete';
-import { default as Badge } from './Badge/Badge';
-import { default as Button } from './Button/Button';
-import { default as ButtonGroup } from './ButtonGroup/ButtonGroup';
-import { default as Card } from './Card/Card';
-import { default as Checkbox } from './Checkbox/Checkbox';
-import { default as Container } from './Container/Container';
-import { default as Dialog } from './Dialog/Dialog';
-import { default as DialogOld } from './Dialog/DialogOld';
-import { default as Dots } from './Dots/Dots';
-import { default as Icon } from './Icon/Icon';
-import { default as LoadingBar } from './Loading/LoadingBar';
-import { default as Spinner } from './Loading/Spinner';
-import { default as Popover } from './Popover/Popover';
-import { default as ProgressBar } from './Progress/ProgressBar';
-import { default as Radio } from './Radio/Radio';
-import { default as Select } from './Select/Select';
-import { default as Skeleton } from './Skeleton/Skeleton';
-import { default as Slider } from './Slider/Slider';
-import { default as Stars } from './Stars/Stars';
-import { default as TextArea } from './Text/TextArea';
-import { default as Textbox } from './Text/Textbox';
+import { default as Accordion } from './ui/Accordion/Accordion';
+import { default as Alert } from './ui/Alert/Alert';
+import { default as Autocomplete } from './ui/Autocomplete/Autocomplete';
+import { default as Badge } from './ui/Badge/Badge';
+import { default as Button } from './ui/Button/Button';
+import { default as ButtonGroup } from './ui/ButtonGroup/ButtonGroup';
+import { default as Card } from './ui/Card/Card';
+import { default as Checkbox } from './ui/Checkbox/Checkbox';
+import { default as Container } from './ui/Container/Container';
+import { default as Dialog } from './ui/Dialog/Dialog';
+import { default as DialogOld } from './ui/Dialog/DialogOld';
+import { default as Dots } from './ui/Dots/Dots';
+import { default as Icon } from './ui/Icon/Icon';
+import { default as LoadingBar } from './ui/Loading/LoadingBar';
+import { default as Spinner } from './ui/Loading/Spinner';
+import { default as Popover } from './ui/Popover/Popover';
+import { default as ProgressBar } from './ui/Progress/ProgressBar';
+import { default as Radio } from './ui/Radio/Radio';
+import { default as Select } from './ui/Select/Select';
+import { default as Skeleton } from './ui/Skeleton/Skeleton';
+import { default as Slider } from './ui/Slider/Slider';
+import { default as Stars } from './ui/Stars/Stars';
+import { default as TextArea } from './ui/Text/TextArea';
+import { default as Textbox } from './ui/Text/Textbox';
+import { default as FunnelHeader } from './funnel/FunnelHeader';
 
-export { Accordion, Alert, Autocomplete, Badge, Button, ButtonGroup, Card, Checkbox, Container, Dialog, DialogOld, Dots, Icon, LoadingBar, Spinner, Popover, ProgressBar, Radio, Select, Skeleton, Slider, Stars, TextArea, Textbox, };
+export { Accordion, Alert, Autocomplete, Badge, Button, ButtonGroup, Card, Checkbox, Container, Dialog, DialogOld, Dots, FunnelHeader, Icon, LoadingBar, Spinner, Popover, ProgressBar, Radio, Select, Skeleton, Slider, Stars, TextArea, Textbox, };

package/dist/main.js

@@ -1,7 +1,7 @@
 import { jsx as i, jsxs as v, Fragment as z } from "react/jsx-runtime";
-import { memo as A, useState as Z, useEffect as S, useRef as q } from "react";
+import { memo as A, useState as Z, useEffect as S, useRef as j } from "react";
 import m from "classnames";
-const F = {
+const q = {
   xxSmall: "w-4 h-4",
   xSmall: "w-5 h-5",
   small: "w-6 h-6",
@@ -486,7 +486,7 @@ const F = {
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
-      className: `${F[a]} fill-current flex-shrink-0 ${s}${e ? ` ${e}` : ""}`,
+      className: `${q[a]} fill-current flex-shrink-0 ${s}${e ? ` ${e}` : ""}`,
       style: { maxWidth: "4em" },
       role: "presentation",
       viewBox: n,
@@ -556,7 +556,7 @@ const F = {
       }
     )
   ] }) });
-}, d1 = A(P), U = ({
+}, h1 = A(P), U = ({
   children: d,
   className: e = "",
   messages: t = [],
@@ -614,7 +614,7 @@ const F = {
       ] })
     }
   );
-}, h1 = A(U), u1 = ({
+}, u1 = A(U), p1 = ({
   autoFocus: d = !1,
   required: e = !1,
   className: t = "",
@@ -780,7 +780,7 @@ const F = {
       )
     ]
   }
-), p1 = ({
+), m1 = ({
   children: d,
   className: e = "",
   size: t = "sm",
@@ -835,7 +835,7 @@ const F = {
       children: d
     }
   );
-}, m1 = A(W), V1 = ({ children: d, className: e }) => /* @__PURE__ */ i("div", { className: m("flex md:max-w-min border border-gray-300 divide-x divide-gray-200 rounded-lg", e), children: d }), H1 = ({
+}, V1 = A(W), H1 = ({ children: d, className: e }) => /* @__PURE__ */ i("div", { className: m("flex md:max-w-min border border-gray-300 divide-x divide-gray-200 rounded-lg", e), children: d }), L1 = ({
   block: d = !1,
   borderless: e = !1,
   children: t,
@@ -898,7 +898,7 @@ const F = {
       ]
     }
   );
-}, L1 = A(Q), J = ({ children: d, aside: e, direction: t = "right" }) => /* @__PURE__ */ v("div", { className: "flex flex-col lg:flex-row lg:p-0 max-w-screen-lg", children: [
+}, C1 = A(Q), J = ({ children: d, aside: e, direction: t = "right" }) => /* @__PURE__ */ v("div", { className: "flex flex-col lg:flex-row lg:p-0 max-w-screen-lg", children: [
   /* @__PURE__ */ i(
     "main",
     {
@@ -924,7 +924,7 @@ const F = {
       children: e
     }
   )
-] }), C1 = A(J), G = ({
+] }), M1 = A(J), G = ({
   activator: d,
   id: e = "",
   children: t,
@@ -1004,7 +1004,7 @@ const F = {
       ] })
     }
   )
-] }), M1 = A(G), K = ({
+] }), f1 = A(G), K = ({
   activator: d,
   id: e = "",
   children: t,
@@ -1023,13 +1023,13 @@ const F = {
   title: M = "",
   titleClass: u = ""
 }) => {
-  const V = q(null), w = async () => {
+  const V = j(null), w = async () => {
     V.current.classList.add("closing"), await D(V.current), V.current.classList.remove("closing"), r && r(), f(!1);
   }, g = async (x) => {
     x.key === "Escape" && await w();
   }, N = async ({ clientX: x, clientY: k, target: T }) => {
-    const { left: O, right: E, top: $, bottom: j } = V.current.getBoundingClientRect() ?? {};
-    (!V.current.contains(T) || x < O || x > E || k < $ || k > j) && await w();
+    const { left: O, right: E, top: F, bottom: $ } = V.current.getBoundingClientRect() ?? {};
+    (!V.current.contains(T) || x < O || x > E || k < F || k > $) && await w();
   }, D = (x) => Promise.allSettled(
     x.getAnimations().map((k) => k.finished)
   );
@@ -1105,7 +1105,7 @@ const F = {
       }
     )
   ] });
-}, f1 = A(K), g1 = ({ className: d = "" }) => /* @__PURE__ */ v("div", { id: "dots", className: m("mx-auto", d), children: [
+}, g1 = A(K), v1 = ({ className: d = "" }) => /* @__PURE__ */ v("div", { id: "dots", className: m("mx-auto", d), children: [
   /* @__PURE__ */ i("span", { style: { animationDelay: "0.1s" } }),
   /* @__PURE__ */ i("span", { style: { animationDelay: "0.2s" } }),
   /* @__PURE__ */ i("span", { style: { animationDelay: "0.3s" } }),
@@ -1122,7 +1122,7 @@ const F = {
   variation: n = "primary"
 }) => {
   function r({ cb: s }) {
-    const l = document.querySelector(".loading-bar--inner");
+    const l = document.querySelector(".loading-bar__inner");
     if (!l) return;
     let o, c, h = !1;
     function p(C) {
@@ -1143,19 +1143,19 @@ const F = {
     {
       className: m(
         "loading-bar my-8",
-        `loading-bar--${n}`,
+        `loading-bar__${n}`,
         {
           "h-4": t === "md",
           "h-6": t === "lg",
           "h-8": t === "xl"
         },
-        `loading-bar--${t}`,
+        `loading-bar__${t}`,
         e
       ),
-      children: /* @__PURE__ */ i("div", { className: "loading-bar--inner", "data-size": "100" })
+      children: /* @__PURE__ */ i("div", { className: "loading-bar__inner", "data-size": "100" })
     }
   );
-}, v1 = A(Y), X = {
+}, A1 = A(Y), X = {
   name: "spinnerDark",
   color: "text-teal-700",
   viewBox: "0 0 24 24"
@@ -1166,7 +1166,7 @@ const F = {
     ...X,
     className: `animate-spin ${d}`
   }
-) }), A1 = A(_), y1 = ({
+) }), y1 = A(_), b1 = ({
   activator: d,
   activatorClass: e = "",
   attrs: t = {},
@@ -1260,7 +1260,7 @@ const F = {
       )
     }
   );
-}, b1 = A(e1), t1 = ({
+}, w1 = A(e1), t1 = ({
   checked: d = !1,
   children: e,
   className: t = "",
@@ -1299,7 +1299,7 @@ const F = {
       ]
     }
   );
-}, w1 = A(t1), a1 = ({
+}, x1 = A(t1), a1 = ({
   children: d,
   className: e = "",
   error: t = !1,
@@ -1353,7 +1353,7 @@ const F = {
       ]
     }
   );
-}, x1 = A(a1), n1 = ({ className: d = "" }) => /* @__PURE__ */ v(
+}, k1 = A(a1), n1 = ({ className: d = "" }) => /* @__PURE__ */ v(
   "div",
   {
     className: m(
@@ -1365,7 +1365,7 @@ const F = {
       /* @__PURE__ */ i("span", { className: "sr-only", children: "Loading..." })
     ]
   }
-), k1 = A(n1), l1 = ({
+), S1 = A(n1), l1 = ({
   placeholderClass: d = "",
   children: e,
   className: t = "",
@@ -1416,7 +1416,7 @@ const F = {
       )
     ]
   }
-), S1 = A(l1), z1 = ({
+), z1 = A(l1), Z1 = ({
   className: d = "",
   value: e
 }) => {
@@ -1478,7 +1478,7 @@ const F = {
     }
   ),
   a && /* @__PURE__ */ i("span", { className: "relative flex mt-0.5 text-red-700 text-xs text-left", children: a })
-] }), Z1 = A(r1), s1 = ({
+] }), N1 = A(r1), s1 = ({
   className: d = "",
   clear: e = !1,
   error: t = !1,
@@ -1548,7 +1548,16 @@ const F = {
       a && /* @__PURE__ */ i("span", { className: "relative flex mt-0.5 text-red-700 text-xs text-left", children: a })
     ]
   }
-), N1 = A(s1);
+), D1 = A(s1), i1 = ({ children: d, className: e = "", tag: t = "h1", title: a }) => /* @__PURE__ */ i(
+  t,
+  {
+    className: m(
+      "!text-xl text-center mb-6 flex items-center justify-center",
+      e
+    ),
+    children: a || d
+  }
+), T1 = A(i1);
 class H {
   static calcCrow(e, t, a, n) {
     const s = H.toRad(a - e), l = H.toRad(n - t);
@@ -2311,29 +2320,30 @@ class H {
   }
 }
 export {
-  d1 as Accordion,
-  h1 as Alert,
-  u1 as Autocomplete,
-  p1 as Badge,
-  m1 as Button,
-  V1 as ButtonGroup,
-  H1 as Card,
-  L1 as Checkbox,
+  h1 as Accordion,
+  u1 as Alert,
+  p1 as Autocomplete,
+  m1 as Badge,
+  V1 as Button,
+  H1 as ButtonGroup,
+  L1 as Card,
+  C1 as Checkbox,
   H as Common,
-  C1 as Container,
-  M1 as Dialog,
-  f1 as DialogOld,
-  g1 as Dots,
+  M1 as Container,
+  f1 as Dialog,
+  g1 as DialogOld,
+  v1 as Dots,
+  T1 as FunnelHeader,
   b as Icon,
-  v1 as LoadingBar,
-  y1 as Popover,
-  b1 as ProgressBar,
-  w1 as Radio,
-  x1 as Select,
-  k1 as Skeleton,
-  S1 as Slider,
-  A1 as Spinner,
-  z1 as Stars,
-  Z1 as TextArea,
-  N1 as Textbox
+  A1 as LoadingBar,
+  b1 as Popover,
+  w1 as ProgressBar,
+  x1 as Radio,
+  k1 as Select,
+  S1 as Skeleton,
+  z1 as Slider,
+  y1 as Spinner,
+  Z1 as Stars,
+  N1 as TextArea,
+  D1 as Textbox
 };

package/dist/styles.css

@@ -1 +1 @@
-.loading-bar{@apply bg-gray-50 overflow-hidden relative;box-shadow:2px 0 10px inset #0003}.loading-bar .loading-bar--inner{@apply w-0 h-full;background-size:30px 30px;animation:move 2s linear infinite;box-shadow:2px 0 10px inset #0003}.loading-bar.loading-bar--primary{@apply rounded-md;}.loading-bar.loading-bar--primary .loading-bar--inner{@apply bg-[#767676];background-image:linear-gradient(-45deg,rgba(255,255,255,.2) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.2) 50%,rgba(255,255,255,.2) 75%,transparent 75%,transparent)}.loading-bar.loading-bar--secondary .loading-bar--inner{@apply bg-[#909090];}.loading-bar .perc{@apply absolute top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2 text-white font-bold;}
+.Button{@apply text-[#222] focus:outline-none font-medium;}.Button:not(.Button--link){@apply focus:ring-2 focus:ring-[#222] px-4 py-1 rounded;}.Button.Button--primary{@apply bg-[#e5e5e5] border border-[#222] hover:bg-[#d4d4d4];}.Button.Button--secondary{@apply bg-teal-700 border border-teal-700 hover:bg-teal-700 text-white focus:ring-teal-700/50 !important;}.Button.Button--link:not(.custom-link){@apply text-[#222] underline !important;}.Button.Button--rounded{@apply rounded-full !important;}.Button.Button--icon{@apply p-1 !important;}.Button.Button--disabled{@apply pointer-events-none;}.loading-bar{@apply bg-gray-50 overflow-hidden relative;box-shadow:2px 0 10px inset #0003}.loading-bar .loading-bar__inner{@apply w-0 h-full;background-size:30px 30px;animation:move 2s linear infinite;box-shadow:2px 0 10px inset #0003}.loading-bar.loading-bar__primary{@apply rounded-md;}.loading-bar.loading-bar__primary .loading-bar__inner{@apply bg-[#767676];background-image:linear-gradient(-45deg,rgba(255,255,255,.2) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.2) 50%,rgba(255,255,255,.2) 75%,transparent 75%,transparent)}.loading-bar.loading-bar__secondary .loading-bar__inner{@apply bg-[#909090];}.loading-bar .perc{@apply absolute top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2 text-white font-bold;}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vehiclehistory/property-lib",
   "description": "Shared UI/Utility Library for Property Sites",
-  "version": "0.0.10",
+  "version": "0.0.12",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/penguin-marketing/vh-recs-ui-library.git"