@axos-web-dev/shared-components 0.0.163 → 0.0.164

package/dist/icons/ArrowIcon/ArrowIcon.css.js

@@ -1,6 +1,6 @@
-/* empty css                                   */
-/* empty css                                      */
-/* empty css                             */
+/* empty css                                       */
+/* empty css                                          */
+/* empty css                                                     */
 import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
 var Arrow = createRuntimeFn({ defaultClassName: "_1pwixiv0", variantClassNames: { variant: { primary: "_1pwixiv1", secondary: "_1pwixiv2", tertiary: "_1pwixiv3" } }, defaultVariants: {}, compoundVariants: [] });
 export {

package/dist/icons/CalendarIcon/CalendarIcon.d.ts

@@ -0,0 +1,3 @@
+import { TIconProps } from '../../types/icon';
+
+export declare const CalendarIcon: import('react').NamedExoticComponent<TIconProps>;

package/dist/icons/CalendarIcon/CalendarIcon.js

@@ -0,0 +1,17 @@
+import { jsx } from "react/jsx-runtime";
+import { memo } from "react";
+const Component = ({ height = 24, width = 24, ...props }) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    height,
+    viewBox: "0 -960 960 960",
+    width,
+    ...props,
+    children: /* @__PURE__ */ jsx("path", { d: "M180-80q-24 0-42-18t-18-42v-620q0-24 18-42t42-18h65v-60h65v60h340v-60h65v60h65q24 0 42 18t18 42v620q0 24-18 42t-42 18H180Zm0-60h600v-430H180v430Zm0-490h600v-130H180v130Zm0 0v-130 130Zm300 230q-17 0-28.5-11.5T440-440q0-17 11.5-28.5T480-480q17 0 28.5 11.5T520-440q0 17-11.5 28.5T480-400Zm-160 0q-17 0-28.5-11.5T280-440q0-17 11.5-28.5T320-480q17 0 28.5 11.5T360-440q0 17-11.5 28.5T320-400Zm320 0q-17 0-28.5-11.5T600-440q0-17 11.5-28.5T640-480q17 0 28.5 11.5T680-440q0 17-11.5 28.5T640-400ZM480-240q-17 0-28.5-11.5T440-280q0-17 11.5-28.5T480-320q17 0 28.5 11.5T520-280q0 17-11.5 28.5T480-240Zm-160 0q-17 0-28.5-11.5T280-280q0-17 11.5-28.5T320-320q17 0 28.5 11.5T360-280q0 17-11.5 28.5T320-240Zm320 0q-17 0-28.5-11.5T600-280q0-17 11.5-28.5T640-320q17 0 28.5 11.5T680-280q0 17-11.5 28.5T640-240Z" })
+  }
+);
+const CalendarIcon = memo(Component);
+export {
+  CalendarIcon
+};

package/dist/icons/CalendarIcon/index.d.ts

@@ -0,0 +1 @@
+export * from './CalendarIcon';

package/dist/icons/CalendarIcon/index.js

@@ -0,0 +1,4 @@
+import { CalendarIcon } from "./CalendarIcon.js";
+export {
+  CalendarIcon
+};

package/dist/icons/CheckIcon/CheckIcon.css.js

@@ -1,6 +1,6 @@
-/* empty css                                   */
-/* empty css                                      */
-/* empty css                             */
+/* empty css                                       */
+/* empty css                                          */
+/* empty css                                                     */
 import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
 var checkColor = createRuntimeFn({ defaultClassName: "_1xajnqu0", variantClassNames: { variant: { primary: "_1xajnqu1", secondary: "_1xajnqu2" } }, defaultVariants: {}, compoundVariants: [] });
 export {

package/dist/icons/DownloadIcon/DownloadIcon.css.js

@@ -1,6 +1,6 @@
-/* empty css                                   */
-/* empty css                                      */
-/* empty css                                */
+/* empty css                                       */
+/* empty css                                          */
+/* empty css                                                           */
 var DownloadColor = "_1r03g400";
 export {
   DownloadColor

package/dist/icons/FollowIcon/FollowIcon.css.js

@@ -1,6 +1,6 @@
-/* empty css                                   */
-/* empty css                                      */
-/* empty css                              */
+/* empty css                                       */
+/* empty css                                          */
+/* empty css                                                       */
 var FollowColor = "_1wjdwci0";
 export {
   FollowColor

package/dist/icons/Star/Star.css.js

@@ -1,4 +1,4 @@
-/* empty css                        */
+/* empty css                                           */
 import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
 var Star = createRuntimeFn({ defaultClassName: "mi4mae0", variantClassNames: { variant: { gold: "mi4mae1", gray: "mi4mae2" } }, defaultVariants: {}, compoundVariants: [] });
 export {

package/dist/index.css.js

@@ -1,3 +1,3 @@
-/* empty css                                         */
-/* empty css                           */
-/* empty css                         */
+/* empty css                                             */
+/* empty css                               */
+/* empty css                             */

package/dist/main.d.ts

@@ -35,6 +35,7 @@ export * from './IconBillboard';
 export * from './icons';
 export * from './ImageBillboard';
 export * from './ImageLink';
+export * from './ImageWrapper';
 export * from './Input';
 export * from './Insight';
 export * from './Interstitial/Interstitial';

package/dist/main.js

@@ -113,6 +113,7 @@ import "react";
 import { ImageLinkSet } from "./ImageLink/ImageLinkSet.js";
 import { Checkbox } from "./Input/Checkbox.js";
 import { CurrencyInput } from "./Input/CurrencyInput.js";
+import { DownPaymentInput } from "./Input/DownPaymentInput.js";
 import { Dropdown } from "./Input/Dropdown.js";
 import { dp_input, selectInput } from "./Input/Dropdown.css.js";
 import { Input } from "./Input/Input.js";
@@ -120,7 +121,6 @@ import { container, helperText, iconContainer, iconContainerBase, iconInput, inp
 import { InputAmount } from "./Input/InputAmount.js";
 import { InputPhone } from "./Input/InputPhone.js";
 import { InputTextArea } from "./Input/InputTextArea.js";
-import { DownPaymentInput } from "./Input/DownPaymentInput.js";
 import { CategorySelector, InsightItem } from "./Insight/Featured/CategorySelector.js";
 import { Featured, FeaturedItem } from "./Insight/Featured/Featured.js";
 import { featured_center_vertical, featured_grid, featured_maingrid, featured_maingrid_img, featured_maingrid_item, featured_maingrid_title, featured_section, featured_subgrid, featured_subgrid_divider, featured_subgrid_item, featured_subgrid_title, featured_supertag, featured_title } from "./Insight/Featured/Featured.css.js";

package/dist/themes/axos.css.js

@@ -1,4 +1,4 @@
-/* empty css                        */
+/* empty css                                    */
 var axosTheme = "_1073cm80";
 var vars = { colors: { primary: { background: "var(--_1073cm81)", body: "var(--_1073cm82)", headline: "var(--_1073cm83)", textGradient: "var(--_1073cm84)", textButton: "var(--_1073cm85)", backgroundButton: "var(--_1073cm86)", border: "var(--_1073cm87)" }, secondary: { background: "var(--_1073cm88)", body: "var(--_1073cm89)", headline: "var(--_1073cm8a)", textGradient: "var(--_1073cm8b)", textButton: "var(--_1073cm8c)", backgroundButton: "var(--_1073cm8d)", border: "var(--_1073cm8e)" }, tertiary: { background: "var(--_1073cm8f)", body: "var(--_1073cm8g)", headline: "var(--_1073cm8h)", textGradient: "var(--_1073cm8i)", textButton: "var(--_1073cm8j)", backgroundButton: "var(--_1073cm8k)", border: "var(--_1073cm8l)" }, quaternary: { background: "var(--_1073cm8m)", body: "var(--_1073cm8n)", headline: "var(--_1073cm8o)", textGradient: "var(--_1073cm8p)", textButton: "var(--_1073cm8q)", backgroundButton: "var(--_1073cm8r)", border: "var(--_1073cm8s)" } }, error: "var(--_1073cm8t)", disabled: { border: "var(--_1073cm8u)", color: "var(--_1073cm8v)", background: "var(--_1073cm8w)" }, icons: { check: { primary: "var(--_1073cm8x)", secondary: "var(--_1073cm8y)" } }, table: { highlight: "var(--_1073cm8z)", color: "var(--_1073cm810)" }, footer: { link: { color: "var(--_1073cm811)" } } };
 export {

package/dist/themes/premier.css.js

@@ -1,5 +1,5 @@
-/* empty css                        */
-/* empty css                           */
+/* empty css                                    */
+/* empty css                                       */
 var premierTheme = "_1es6o1h0";
 export {
   premierTheme

package/dist/types/icon.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from 'react';
+
+export type TIconProps = SVGProps<SVGSVGElement>;

package/dist/types/icon.js

@@ -0,0 +1 @@
+

package/dist/types/popover.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+
+export type TPopoverPosition = "left" | "center" | "right";
+export type TPopoverProps = {
+    children?: ReactNode;
+    trigger: ReactNode | ReactNode[];
+    position?: TPopoverPosition;
+};

package/dist/types/popover.js

@@ -0,0 +1 @@
+

package/dist/utils/constants/format.d.ts

@@ -0,0 +1 @@
+export declare const FORMAT_DATE = "MM.dd.yyyy";

package/dist/utils/constants/format.js

@@ -0,0 +1,4 @@
+const FORMAT_DATE = "MM.dd.yyyy";
+export {
+  FORMAT_DATE
+};

package/dist/utils/constants/popper.d.ts

@@ -0,0 +1,6 @@
+export declare const POPOVER_WIDTH = 512;
+export declare const POPOVER_POSITION_STYLES: {
+    left: string;
+    center: string;
+    right: string;
+};

package/dist/utils/constants/popper.js

@@ -0,0 +1,10 @@
+const POPOVER_WIDTH = 512;
+const POPOVER_POSITION_STYLES = {
+  left: "left",
+  center: "center",
+  right: "right"
+};
+export {
+  POPOVER_POSITION_STYLES,
+  POPOVER_WIDTH
+};

package/dist/utils/hooks/usePopover.d.ts

@@ -0,0 +1,25 @@
+import { TPopoverPosition } from '../../types/popover';
+import { CSSProperties, Dispatch, RefObject, SetStateAction } from 'react';
+
+type TUsePopoverResponse = {
+    attributes: {
+        [p: string]: {
+            [p: string]: string;
+        } | undefined;
+    };
+    onPopperElement: Dispatch<SetStateAction<HTMLDivElement | null | undefined>>;
+    onPopoverPosition: Dispatch<SetStateAction<TPopoverPosition>>;
+    onReferenceElement: Dispatch<SetStateAction<HTMLButtonElement | null | undefined>>;
+    popperElement?: HTMLDivElement | null | undefined;
+    popoverPosition: TPopoverPosition;
+    referenceElement?: HTMLButtonElement | null | undefined;
+    styles: {
+        [p: string]: CSSProperties;
+    };
+};
+type TProps = {
+    triggerRef: RefObject<HTMLDivElement>;
+};
+type TUsePopover = (props: TProps) => TUsePopoverResponse;
+export declare const usePopover: TUsePopover;
+export {};

package/dist/utils/hooks/usePopover.js

@@ -0,0 +1,64 @@
+"use client";
+import { useState, useEffect } from "react";
+import { usePopper } from "react-popper";
+import { POPOVER_WIDTH } from "../constants/popper.js";
+const usePopover = (props) => {
+  const { triggerRef } = props;
+  const position = "center";
+  const [popperElement, setPopperElement] = useState(null);
+  const [popoverPosition, setPopoverPosition] = useState(position);
+  const [referenceElement, setReferenceElement] = useState(null);
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    modifiers: [
+      {
+        name: "flip",
+        options: {
+          altBoundary: true
+        }
+      },
+      {
+        name: "offset",
+        options: {
+          offset: [0, 12]
+        }
+      },
+      {
+        name: "preventOverflow",
+        options: {
+          altBoundary: true,
+          padding: 12
+        }
+      }
+    ]
+  });
+  useEffect(() => {
+    if (triggerRef.current && !position) {
+      const { right, width } = triggerRef.current.getBoundingClientRect();
+      const bodyWidth = document.body.clientWidth;
+      const centerWidth = POPOVER_WIDTH / 2;
+      const triggerCenter = right - width / 2;
+      const rightSize = bodyWidth - triggerCenter;
+      const isRight = rightSize < centerWidth;
+      const isLeft = centerWidth > triggerCenter;
+      if (isRight) {
+        setPopoverPosition("right");
+      }
+      if (isLeft) {
+        setPopoverPosition("left");
+      }
+    }
+  }, []);
+  return {
+    attributes,
+    onPopperElement: setPopperElement,
+    onPopoverPosition: setPopoverPosition,
+    onReferenceElement: setReferenceElement,
+    popperElement,
+    popoverPosition,
+    referenceElement,
+    styles
+  };
+};
+export {
+  usePopover
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@axos-web-dev/shared-components",
   "description": "Axos shared components library for web.",
-  "version": "0.0.163",
+  "version": "0.0.164",
   "type": "module",
   "module": "dist/main.js",
   "types": "dist/main.d.ts",