oddsgate-ds 1.0.92 → 1.0.94

package/dist/types.d.ts

@@ -0,0 +1,644 @@
+import * as React$1 from 'react';
+import React__default, { CSSProperties } from 'react';
+import { spaces as spaces$1 } from '@/styles/variables';
+import * as styled_components from 'styled-components';
+
+declare const pxToRem: (size: number) => string;
+declare const fontName = "MD Nichrome";
+declare const alternativeFont = "Red Hat Display";
+declare const gutter: string;
+declare const desktop_width: number;
+declare const tablet_width: number;
+declare const mobile_width: number;
+declare const responsiveMedia = "768px";
+declare const mobileMedia = "360px";
+declare const easeOutExpo = "cubic-bezier(.32,.94,.6,1);";
+type IBreakpoints = {
+    $xs?: string;
+    $sm?: string;
+    $md?: string;
+    $lg?: string;
+    $xl?: string;
+    $xxl?: string;
+};
+declare const colors: Record<string, string>;
+declare const gradients: Record<string, string>;
+declare const spaces: Record<string, string>;
+declare const spacesNegative: Record<string, string>;
+declare const typography: Record<string, Record<string, unknown>>;
+declare const radius: Record<string, string>;
+declare const shadows: Record<string, string>;
+declare const zIndexes: Record<number, number>;
+declare const grid_conf: {
+    gridSize: number;
+    gutter: number;
+    mediaQuery: string;
+    container: IBreakpoints;
+    breakpoints: IBreakpoints;
+};
+
+type variables_IBreakpoints = IBreakpoints;
+declare const variables_alternativeFont: typeof alternativeFont;
+declare const variables_colors: typeof colors;
+declare const variables_desktop_width: typeof desktop_width;
+declare const variables_easeOutExpo: typeof easeOutExpo;
+declare const variables_fontName: typeof fontName;
+declare const variables_gradients: typeof gradients;
+declare const variables_grid_conf: typeof grid_conf;
+declare const variables_gutter: typeof gutter;
+declare const variables_mobileMedia: typeof mobileMedia;
+declare const variables_mobile_width: typeof mobile_width;
+declare const variables_pxToRem: typeof pxToRem;
+declare const variables_radius: typeof radius;
+declare const variables_responsiveMedia: typeof responsiveMedia;
+declare const variables_shadows: typeof shadows;
+declare const variables_spaces: typeof spaces;
+declare const variables_spacesNegative: typeof spacesNegative;
+declare const variables_tablet_width: typeof tablet_width;
+declare const variables_typography: typeof typography;
+declare const variables_zIndexes: typeof zIndexes;
+declare namespace variables {
+  export {
+    variables_IBreakpoints as IBreakpoints,
+    variables_alternativeFont as alternativeFont,
+    variables_colors as colors,
+    variables_desktop_width as desktop_width,
+    variables_easeOutExpo as easeOutExpo,
+    variables_fontName as fontName,
+    variables_gradients as gradients,
+    variables_grid_conf as grid_conf,
+    variables_gutter as gutter,
+    variables_mobileMedia as mobileMedia,
+    variables_mobile_width as mobile_width,
+    variables_pxToRem as pxToRem,
+    variables_radius as radius,
+    variables_responsiveMedia as responsiveMedia,
+    variables_shadows as shadows,
+    variables_spaces as spaces,
+    variables_spacesNegative as spacesNegative,
+    variables_tablet_width as tablet_width,
+    variables_typography as typography,
+    variables_zIndexes as zIndexes,
+  };
+}
+
+type IImageWrapper = {
+    aspectRatioHeight?: number;
+    anchor?: string;
+    $align?: string;
+    align?: string;
+    caption?: string;
+    href?: string;
+    linkTarget?: string;
+    rel?: string;
+    className?: string;
+    style?: CSSProperties;
+    children?: React.ReactNode;
+    asBackground?: boolean;
+};
+
+declare const ImageWrapper: ({ aspectRatioHeight, align, caption, href, linkTarget, rel, className, style, children, asBackground }: IImageWrapper) => React__default.JSX.Element;
+
+declare enum typographyTags {
+    div = "div",
+    span = "span",
+    p = "p",
+    h1 = "h1",
+    h2 = "h2",
+    h3 = "h3",
+    h4 = "h4",
+    h5 = "h5",
+    h6 = "h6"
+}
+type IHeading = {
+    tag?: keyof typeof typographyTags | string;
+    size?: string;
+    className?: string;
+    style?: CSSProperties;
+    children?: React.ReactNode;
+};
+
+declare const Heading: ({ tag, size, className, ...props }: IHeading) => React__default.JSX.Element;
+
+type IRichText = {
+    id?: string;
+    tag?: keyof typeof typographyTags;
+    attributes?: object;
+    className?: string;
+    style?: CSSProperties;
+    children?: any;
+};
+
+declare const RichText: ({ id, tag, attributes, className, style, children, ...props }: IRichText) => React__default.JSX.Element;
+
+interface IButtonBase {
+    id?: string;
+    as?: 'button' | 'a';
+    type?: string;
+    outlined?: boolean;
+    leftIcon?: React.ReactElement;
+    rightIcon?: React.ReactElement;
+    removeLabel?: boolean;
+    href?: string;
+    ariaLabel?: string;
+    rel?: string;
+    disabled?: boolean;
+    target?: string;
+    className?: string;
+    style?: CSSProperties;
+    children?: React.ReactNode;
+    onClick?: (event?: React.MouseEvent<HTMLElement>) => void;
+}
+interface IButton extends IButtonBase {
+    variant?: string;
+    mode?: string;
+}
+
+declare const Button: ({ id, as, children, variant, mode, outlined, leftIcon, rightIcon, removeLabel, className, href, ariaLabel, rel, target, disabled, type, ...props }: IButton) => React__default.JSX.Element;
+
+type ISpacer = {
+    id?: string;
+    color?: string;
+    height?: keyof typeof spaces$1 | string | number;
+    customHeight?: string;
+    className?: string;
+    style?: CSSProperties;
+};
+
+declare const Spacer: ({ id, color, customHeight, height, className, ...props }: ISpacer) => React__default.JSX.Element;
+
+type ISeparator = {
+    color?: string;
+    type?: string;
+    margin?: string;
+    height?: string;
+    className?: string;
+    style?: CSSProperties;
+};
+
+declare const Separator: ({ type, color, height, margin, ...props }: ISeparator) => React__default.JSX.Element;
+
+interface IFlexBase {
+    className?: string;
+    style?: CSSProperties;
+    children?: React.ReactNode;
+}
+type flexAlign = 'flex-start' | 'center' | 'flex-end' | 'stretch' | string;
+type flexJustify = 'flex-start' | 'center' | 'flex-end' | 'space-between' | string;
+interface IFlex extends IFlexBase {
+    direction?: 'row' | 'column';
+    align?: flexAlign;
+    justify?: flexJustify;
+    wrap?: 'wrap' | 'nowrap';
+    gap?: string;
+}
+
+declare const Flex: ({ direction, align, justify, wrap, gap, children, className, ...props }: IFlex) => React__default.JSX.Element;
+
+type IIcon = {
+    icon?: string;
+    className?: string;
+    style?: CSSProperties;
+    onClick?: () => void;
+};
+
+declare const Icon: ({ icon, className, onClick, ...props }: IIcon) => React__default.JSX.Element;
+
+interface IChip {
+    variant?: string;
+    $variant?: string;
+    hover?: boolean;
+    $hover?: boolean;
+    active?: boolean;
+    $active?: boolean;
+    className?: string;
+    style?: CSSProperties;
+    children?: React.ReactNode;
+    onClick?: (event?: React.MouseEvent<HTMLElement>) => void;
+}
+
+declare const Chip: ({ variant, hover, active, className, style, children, onClick, ...props }: IChip) => React__default.JSX.Element;
+
+type IQuote = {
+    id?: string;
+    value?: string;
+    citation?: string;
+    className?: string;
+    style?: CSSProperties;
+    children?: React.ReactNode;
+};
+
+declare const Quote: ({ id, value, citation, className, children, ...props }: IQuote) => React__default.JSX.Element;
+
+type IVideo = {
+    src?: string;
+    poster?: string;
+    autoplay?: boolean;
+    controls?: boolean;
+    loop?: boolean;
+    muted?: boolean;
+    playsInline?: boolean;
+    className?: string;
+    style?: CSSProperties;
+};
+
+declare const Video: ({ src, poster, autoplay, controls, loop, muted, playsInline, className, style, ...props }: IVideo) => React__default.JSX.Element;
+
+type IVideoEmbed = {
+    embed?: string;
+    poster?: string;
+    autoplay?: boolean;
+    controls?: boolean;
+    loop?: boolean;
+    muted?: boolean;
+    playsInline?: boolean;
+    className?: string;
+    style?: CSSProperties;
+};
+
+declare const VideoEmbed: ({ embed, poster, autoplay, controls, loop, muted, playsInline, className, style, ...props }: IVideoEmbed) => React__default.JSX.Element;
+
+interface IRowBase {
+    className?: string;
+    style?: CSSProperties;
+    children?: React.ReactNode;
+}
+interface IRow extends IRowBase {
+    fluid?: boolean;
+    direction?: 'row' | 'column';
+    align?: flexAlign;
+    justify?: flexJustify;
+    wrap?: 'wrap' | 'nowrap';
+    mobileSpace?: boolean;
+}
+type IColumnsSize = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | number;
+interface IColumnBase {
+    className?: string;
+    style?: CSSProperties;
+    children?: React.ReactNode;
+}
+interface IColumn extends IColumnBase {
+    align?: flexAlign;
+    lg?: IColumnsSize;
+    md?: IColumnsSize;
+    sm?: IColumnsSize;
+    xs?: IColumnsSize;
+    mobileOrder?: number;
+}
+
+declare const Row: ({ fluid, direction, align, justify, wrap, mobileSpace, className, style, children, ...props }: IRow) => React__default.JSX.Element;
+declare const Column: ({ xs, sm, md, lg, align, mobileOrder, children, className, style, ...props }: IColumn) => React__default.JSX.Element;
+
+interface IFormField {
+    id?: string;
+    label?: string;
+    leftIcon?: React.ReactNode | React.ReactNode[];
+    rightIcon?: React.ReactNode | React.ReactNode[];
+    isCheckRadio?: boolean;
+    children?: React.ReactNode;
+    className?: string;
+}
+
+declare const FormField: ({ id, label, leftIcon, rightIcon, isCheckRadio, className, children, ...props }: IFormField) => React__default.JSX.Element;
+
+type ICheckRadioField = {
+    id?: string;
+    label?: string;
+    className?: string;
+    children?: React.ReactNode;
+};
+
+declare const CheckRadioField: ({ id, label, className, children, ...props }: ICheckRadioField) => React__default.JSX.Element;
+
+interface ILoader {
+    variant?: string;
+    $variant?: string;
+    label?: string;
+    className?: string;
+    style?: CSSProperties;
+    children?: React.ReactNode;
+}
+
+declare const Loader: ({ variant, label, children, className, style, ...props }: ILoader) => React__default.JSX.Element;
+
+interface IEmptyState {
+    variant?: string;
+    $variant?: string;
+    label?: string;
+    className?: string;
+    style?: CSSProperties;
+    children?: React.ReactNode;
+}
+
+declare const EmptyState: ({ variant, label, children, className, style, ...props }: IEmptyState) => React__default.JSX.Element;
+
+type ICloseButton = {
+    variant?: string;
+    $variant?: string;
+    className?: string;
+    style?: CSSProperties;
+    onClick?: () => void;
+};
+
+declare const CloseButton: ({ variant, className, onClick, ...props }: ICloseButton) => React__default.JSX.Element;
+
+interface ICounter {
+    title?: string;
+    number?: number;
+    prefix?: string;
+    suffix?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+
+declare const Counter: ({ title, number, prefix, suffix, className, style, }: ICounter) => React__default.JSX.Element;
+
+interface IScrollingNav {
+    align?: string;
+    className?: string;
+    style?: CSSProperties;
+    children?: React.ReactNode;
+}
+
+declare const ScrollingNav: ({ align, children, className, ...props }: IScrollingNav) => React__default.JSX.Element;
+
+type ISocialLinks = {
+    variant?: string;
+    socials?: Record<string, string>;
+    className?: string;
+    style?: CSSProperties;
+};
+
+declare const SocialLinks: ({ variant, socials, className, style, ...props }: ISocialLinks) => React__default.JSX.Element;
+
+type IMarquee = {
+    text?: string;
+    className?: string;
+    style?: CSSProperties;
+    onClick?: () => void;
+};
+
+declare const Marquee: ({ text, className, onClick, ...props }: IMarquee) => React__default.JSX.Element;
+
+type PortalComponentProps = {
+    wrapperId: string;
+    children?: React.ReactNode;
+};
+declare function PortalComponent({ wrapperId, children }: PortalComponentProps): React.ReactPortal | null;
+
+interface IAccordion {
+    className?: string;
+    style?: CSSProperties;
+    children?: React.ReactNode;
+}
+interface IAccordionItem {
+    active?: boolean;
+    title?: string;
+    className?: string;
+    style?: CSSProperties;
+    children?: React.ReactNode;
+}
+
+declare const Accordion: ({ className, style, children }: IAccordion) => React__default.JSX.Element;
+declare const AccordionItem: ({ title, className, style, children }: IAccordionItem) => React__default.JSX.Element;
+
+type IModal = {
+    title?: string;
+    open?: boolean;
+    onClose?: () => void;
+    hideCloseIcon?: boolean;
+    className?: string;
+    style?: CSSProperties;
+    children?: React.ReactNode;
+};
+
+declare const Modal: ({ title, open, onClose, hideCloseIcon, children, ...props }: IModal) => React__default.JSX.Element | null;
+
+interface IOffCanvas {
+    isOpen?: boolean;
+    $isOpen?: boolean;
+    actions?: React.ReactNode;
+    title?: React.ReactNode;
+    className?: string;
+    style?: CSSProperties;
+    children?: React.ReactNode;
+    onClose?: () => void;
+}
+
+declare const OffCanvas: ({ isOpen, title, actions, children, className, onClose }: IOffCanvas) => React__default.JSX.Element;
+
+type IDropdown = {
+    ref?: React.RefObject<HTMLDivElement>;
+    title?: React.ReactElement;
+    icon?: React.ReactElement;
+    className?: string;
+    style?: CSSProperties;
+    children: React.ReactNode;
+};
+type IDropdownItem = {
+    icon?: React.ReactElement;
+    disabled?: boolean;
+    section?: boolean;
+    className?: string;
+    style?: CSSProperties;
+    children: React.ReactNode;
+    onClick?: () => void;
+};
+
+declare const Dropdown: ({ children, title, icon, className, style, ...props }: IDropdown) => React__default.JSX.Element;
+
+declare const DropdownItem: ({ icon, disabled, section, className, style, children, onClick, ...props }: IDropdownItem) => React__default.JSX.Element;
+
+type IShareModal = {
+    siteTitle?: string;
+    title?: string;
+    url?: string;
+    label?: string;
+    copyText?: string;
+    open?: boolean;
+    onClose?: () => void;
+};
+
+declare const ShareModal: ({ siteTitle, title, label, url, copyText, open, onClose, ...props }: IShareModal) => React__default.JSX.Element;
+
+type IIconBox = {
+    label?: string;
+    icon?: React.ReactElement;
+    description?: string;
+    className?: string;
+    style?: CSSProperties;
+    children?: React.ReactNode;
+};
+
+declare const IconBox: ({ label, icon, description, className, ...props }: IIconBox) => React__default.JSX.Element;
+
+type IIconTitle = {
+    label?: string;
+    icon?: React.ReactElement;
+    imageElement?: React.ReactElement;
+    className?: string;
+    style?: CSSProperties;
+    children?: React.ReactNode;
+};
+
+declare const IconTitle: ({ label, icon, imageElement, className, style, children, ...props }: IIconTitle) => React__default.JSX.Element;
+
+type ICard = {
+    variant?: string;
+    $variant?: string;
+    imageElement?: React.ReactElement;
+    className?: string;
+    style?: CSSProperties;
+    children?: React.ReactNode;
+    onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+};
+
+interface IBlogCard extends ICard {
+    date?: string;
+    category?: string;
+    title?: string;
+    description?: string | React.ReactElement;
+    author?: string;
+    linkElement?: React.ReactElement;
+}
+
+declare const BlogCard: ({ variant, date, category, title, imageElement, linkElement, description, author, ...props }: IBlogCard) => React__default.JSX.Element;
+
+interface ITeamCard extends ICard {
+    title?: string;
+    role?: string;
+    description?: string | React.ReactElement;
+}
+
+declare const TeamCard: ({ title, imageElement, role, description, ...props }: ITeamCard) => React__default.JSX.Element;
+
+interface ILogosCard {
+    imageElement?: React.ReactElement;
+    title?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+
+declare const LogosCard: ({ imageElement, title, className, style, ...props }: ILogosCard) => React__default.JSX.Element;
+
+interface IProductCard extends ICard {
+    title?: string;
+    description?: string | React.ReactElement;
+}
+
+declare const ProductCard: ({ title, imageElement, description, className, style, ...props }: IProductCard) => React__default.JSX.Element;
+
+interface ILicenseCard extends ICard {
+    title?: string;
+    description?: string | React.ReactElement;
+}
+
+declare const LicenseCard: ({ title, imageElement, description, className, style, ...props }: ILicenseCard) => React__default.JSX.Element;
+
+interface INewsCard extends ICard {
+    date?: string;
+    category?: string;
+    title?: string;
+    description?: string | React.ReactElement;
+    linkElement?: React.ReactElement;
+}
+
+declare const NewsCard: ({ variant, date, category, title, imageElement, linkElement, description, ...props }: INewsCard) => React__default.JSX.Element;
+
+interface IEventsCard extends ICard {
+    date?: string;
+    category?: string;
+    title?: string;
+    description?: string | React.ReactElement;
+    linkElement?: React.ReactElement;
+}
+
+declare const EventsCard: ({ variant, date, category, title, imageElement, linkElement, description, ...props }: IEventsCard) => React__default.JSX.Element;
+
+interface ICareersCard extends ICard {
+    title?: string;
+    description?: string | React.ReactElement;
+    linkElement?: React.ReactElement;
+}
+
+declare const CareersCard: ({ title, description, linkElement, className, style, ...props }: ICareersCard) => React__default.JSX.Element;
+
+interface ISlider {
+    $responsiveCSS?: string;
+    arrows?: boolean;
+    dots?: boolean;
+    slidesToShow?: number;
+    slidesToScroll?: number;
+    infinite?: boolean;
+    autoplay?: boolean;
+    spacing?: string;
+    mediaQueries?: object;
+    $mobileOnly?: boolean;
+    mobileOnly?: boolean;
+    onSlide?: () => void;
+    className?: string;
+    style?: CSSProperties;
+    children: React.ReactNode;
+}
+
+declare const Slider: ({ arrows, dots, slidesToShow, slidesToScroll, infinite, autoplay, spacing, mediaQueries, mobileOnly, className, style, children, onSlide, ...props }: ISlider) => React__default.JSX.Element;
+
+type ICover = {
+    id?: string;
+    anchor?: string;
+    minHeight?: string;
+    contentPosition?: string;
+    imageElement?: React.ReactElement;
+    overlayOpacity?: number;
+    overlayColor?: string;
+    className?: string;
+    style?: CSSProperties;
+    children?: React.ReactNode;
+};
+
+declare const Cover: ({ minHeight, contentPosition, imageElement, overlayOpacity, overlayColor, style, className, children }: ICover) => React__default.JSX.Element;
+
+interface ITabs {
+    id?: string;
+    title?: string;
+    menu?: ITabsItem[];
+    vertical?: boolean;
+    className?: string;
+    style?: CSSProperties;
+}
+interface ITabsItem {
+    id?: string;
+    label?: string;
+    $active?: boolean;
+    content?: React.ReactNode;
+    onClick?: (event?: React.MouseEvent<HTMLElement>) => void;
+}
+
+declare const Tabs: ({ id, title, menu, vertical, className, style }: ITabs) => React__default.JSX.Element;
+
+type ICircularSlider = {
+    id?: string;
+    className?: string;
+    style?: CSSProperties;
+    content?: {
+        name?: string;
+        role?: string;
+        img?: React.ReactNode;
+    }[];
+};
+
+declare const CircularSlider: ({ content, style, className, }: ICircularSlider) => React__default.JSX.Element;
+
+declare const iconsList: string[];
+
+declare const GlobalStyles: React$1.NamedExoticComponent<styled_components.ExecutionProps & object>;
+
+declare function clickOutSideToClose(ref: React.RefObject<HTMLDivElement>, closeFunction: () => void): void;
+
+declare const isTouchDevice: () => boolean;
+
+declare function useMediaMatch(query?: string): boolean;
+
+declare const debounce: (callback: any, wait: number) => (...args: any) => void;
+
+export { Accordion, AccordionItem, BlogCard, Button, CareersCard, CheckRadioField, Chip, CircularSlider, CloseButton, Column, Counter, Cover, Dropdown, DropdownItem, EmptyState, EventsCard, Flex, FormField, GlobalStyles, Heading, Icon, IconBox, IconTitle, ImageWrapper, LicenseCard, Loader, LogosCard, Marquee, Modal, NewsCard, OffCanvas, PortalComponent, ProductCard, Quote, RichText, Row, ScrollingNav, Separator, ShareModal, Slider, SocialLinks, Spacer, Tabs, TeamCard, Video, VideoEmbed, clickOutSideToClose, debounce, iconsList, isTouchDevice, useMediaMatch, variables };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oddsgate-ds",
-  "version": "1.0.92",
+  "version": "1.0.94",
   "description": "Miew theme component library",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

package/src/components/organisms/CircularSlider/CircularSlider.component.tsx

@@ -10,7 +10,7 @@ import {
 import Heading from '@/components/atoms/Heading/Heading.component';
 import { ICircularSlider } from './CircularSlider.interface'
 import { debounce } from '@/helpers/events';
-import { useMediaMatch } from '@/helpers/useMediaQuery';
+import useMediaMatch from '@/helpers/useMediaMatch';
 
 const CircularSlider = ({
   content,

package/src/components/organisms/Slider/Slider.component.tsx

@@ -4,8 +4,8 @@ import Button from '@/components/atoms/Button/Button.component'
 import { ISlider } from './Slider.interface'
 import Icon from '@/components/atoms/Icon/Icon.component'
 import { StyledSlider } from './Slider.theme'
+import isTouchDevice from '@/helpers/isTouchDevice'
 import { useBlazeSlider } from './Slider.utils'
-import { useMediaMatch } from '@/helpers/useMediaQuery'
 
 const Slider = ({
   arrows,
@@ -28,7 +28,7 @@ const Slider = ({
   let elRef: any = null
   let sliderRef: any = null
 
-  const isMobile = useMediaMatch();
+  const isMobile = isTouchDevice();
 
   const setConfig = () => {
     if (sliderRef?.current) sliderRef.current.destroy()

package/src/index.ts

@@ -58,7 +58,7 @@ export { default as GlobalStyles } from './styles/Global'
 
 export { default as clickOutSideToClose } from './helpers/clickOutsideToClose'
 export { default as isTouchDevice } from './helpers/isTouchDevice'
-export { default as useMediaMatch } from './helpers/useMediaQuery'
+export { default as useMediaMatch } from './helpers/useMediaMatch'
 export { debounce } from './helpers/events'
 
 export { variables };