@abcagency/hc-ui-components 1.3.61 → 1.3.63

package/src/components/modules/buttons/items-pill.js

@@ -1,35 +1,31 @@
-import React from 'react';
-import { forwardRef } from 'react';
-
-import Button from '~/components/modules/buttons/default';
-
-export const ButtonItemsPill = forwardRef((
-	{
-		className,
-		activeItemsCount,
-		...props
-	},
-	ref
-) => {
-	return (
-		<Button.Btn
-			ref={ref}
-			size="none"
-			variant="none"
-			className={`
-				hc-relative hc-z-[2] hc-group hc-inline-flex hc-items-center hc-gap-px hc-ml-auto hc-mr-1.5 hc-pl-1.5 hc-pr-1 hc-py-0.5 hc-rounded hc-bg-primary/10 hc-text-xs hc-font-bold hc-text-primary hc-ring-1 hc-ring-inset hc-ring-primary/20
-				${className ?? ''}
-			`}
-			{...props}
-		>
-			{activeItemsCount > 9 ? '9+' : activeItemsCount}
-			<Button.Icon
-				icon="uil:times"
-				size="hc-size-3.5"
-			/>
-		</Button.Btn>
-	);
-});
-
-ButtonItemsPill.displayName = 'ButtonItemsPill';
-export default ButtonItemsPill;
+import React from 'react';
+import { forwardRef } from 'react';
+
+import Button from '~/components/modules/buttons/default';
+
+export const ButtonItemsPill = forwardRef((
+	{
+		className,
+		activeItemsCount,
+		...props
+	},
+	ref
+) => {
+	return (
+		<Button.Btn
+			ref={ref}
+			size="none"
+			variant="none"
+			className={`hc-capitalize
+				hc-relative hc-z-[2] hc-group hc-inline-flex hc-items-center hc-gap-px hc-ml-auto hc-mr-1.5 hc-pl-1.5 hc-pr-1 hc-py-0.5 hc-rounded hc-bg-primary/10 hc-text-xs hc-font-bold hc-text-primary hc-ring-1 hc-ring-inset hc-ring-primary/20
+				${className ?? ''}
+			`}
+			{...props}
+		>
+			Clear
+		</Button.Btn>
+	);
+});
+
+ButtonItemsPill.displayName = 'ButtonItemsPill';
+export default ButtonItemsPill;

package/src/components/modules/buttons/pill-wrapper.js

@@ -1,27 +1,27 @@
-import React, { forwardRef } from 'react';
-
-import Button from '~/components/modules/buttons/default';
-
-export const PillWrapper = forwardRef((
-	{
-		className,
-		children,
-		...props
-	},
-	ref
-) => {
-	return (
-		<Button.Btn
-			ref={ref}
-			size="none"
-			variant="none"
-			className={`hc-relative hc-group hc-inline-flex hc-items-center hc-gap-px hc-ml-auto hc-mr-1.5 hc-pl-1.5 hc-pr-1 hc-py-0.5 hc-rounded hc-bg-primary/10 hc-text-xs hc-font-bold hc-text-primary hc-ring-1 hc-ring-inset hc-ring-primary/20 ${className}`}
-			{...props}
-		>
-			{children}
-		</Button.Btn>
-	);
-});
-
-PillWrapper.displayName = 'PillWrapper';
-export default PillWrapper;
+import React, { forwardRef } from 'react';
+
+import Button from '~/components/modules/buttons/default';
+
+export const PillWrapper = forwardRef((
+	{
+		className,
+		children,
+		...props
+	},
+	ref
+) => {
+	return (
+		<Button.Btn
+			ref={ref}
+			size="none"
+			variant="none"
+			className={`hc-relative hc-group hc-inline-flex hc-items-center hc-gap-px hc-ml-auto hc-mr-1.5 hc-pl-1.5 hc-pr-1 hc-py-0.5 hc-rounded hc-bg-primary/10 hc-text-xs hc-font-bold hc-text-primary hc-ring-1 hc-ring-inset hc-ring-primary/20 ${className}`}
+			{...props}
+		>
+			{children}
+		</Button.Btn>
+	);
+});
+
+PillWrapper.displayName = 'PillWrapper';
+export default PillWrapper;

package/src/components/modules/buttons/show-all-button.js

@@ -1,19 +1,19 @@
-import React from 'react';
-
-const ShowAllButton = ({ mapInteracted, setMapInteracted, fitBounds, mapRef, pinIconUrl, setSelectedFilters, setQuery, listingCount }) => {
-	if (!mapInteracted) {
-		return null;
-	}
-	return (
-		<button
-			style={{ fontFamily: 'Roboto, Arial, sans-serif', fontSize: '14px', fontWeight: '500' }}
-			className="hc-absolute hc-bottom-10 hc-left-2.5 hc-z-10 hc-flex hc-items-center hc-justify-center hc-pl-2 hc-pb-1 hc-pt-1.5 hc-pr-3 hc-bg-white hc-text-black hc-border-none hc-rounded-full hc-shadow hc-cursor-pointer hc-text-sm hc-font-medium"
-			onClick={() => { setMapInteracted(false); fitBounds(mapRef.current, true); if (listingCount < 2) { setSelectedFilters({}); setQuery(null); }; }}
-		>
-			<img src={pinIconUrl} alt="Pin Icon" className="hc-size-5" />
-			Show All
-		</button>
-	);
-};
-
-export default ShowAllButton;
+import React from 'react';
+
+const ShowAllButton = ({ mapInteracted, setMapInteracted, fitBounds, mapRef, pinIconUrl, setSelectedFilters, setQuery, listingCount }) => {
+	if (!mapInteracted) {
+		return null;
+	}
+	return (
+		<button
+			style={{ fontFamily: 'Roboto, Arial, sans-serif', fontSize: '14px', fontWeight: '500' }}
+			className="hc-absolute hc-bottom-10 hc-left-2.5 hc-z-10 hc-flex hc-items-center hc-justify-center hc-pl-2 hc-pb-1 hc-pt-1.5 hc-pr-3 hc-bg-white hc-text-black hc-border-none hc-rounded-full hc-shadow hc-cursor-pointer hc-text-sm hc-font-medium"
+			onClick={() => { setMapInteracted(false); fitBounds(mapRef.current, true); if (listingCount < 2) { setSelectedFilters({}); setQuery(null); }; }}
+		>
+			<img src={pinIconUrl} alt="Pin Icon" className="hc-size-5" />
+			Show All
+		</button>
+	);
+};
+
+export default ShowAllButton;

package/src/components/modules/cards/default.js

@@ -1,167 +1,167 @@
-import React, { forwardRef } from 'react';
-import { Link } from 'react-router-dom';
-import { twMerge } from 'tailwind-merge';
-
-const cardClasses = (className, hasShadow) => twMerge(
-	'hc-relative hc-flex hc-flex-wrap hc-flex-col hc-bg-clip-border hc-break-words hc-bg-white hc-border hc-border-gray-100',
-	hasShadow ? 'hc-shadow-lg' : '',
-	className ?? ''
-);
-
-const Card = ({ children }) => {
-	return (
-		<>{children}</>
-	);
-};
-
-export const CardDefault = forwardRef((
-	{
-		as = 'div',
-		className,
-		hasShadow = false,
-		image,
-		body,
-		children,
-		footer,
-		...rest
-	},
-	ref
-) => {
-	const Container = as;
-
-	return (
-		<Container
-			ref={ref}
-			className={cardClasses(className, hasShadow)}
-			{...rest}
-		>
-			{image}
-			{children}
-			{body}
-			{footer}
-		</Container>
-	);
-});
-
-const CardLink = ({
-	as = 'link',
-	href,
-	className,
-	hasShadow = false,
-	image,
-	body,
-	children,
-	footer,
-	...rest
-}) => {
-	const Container = as === 'link' ? Link : as;
-
-	return (
-		<Container
-			to={href}
-			className={twMerge(
-				cardClasses(className, hasShadow),
-				'hc-group hc-transition hover:hc-shadow-xl hover:hc-border-indigo-300 focus:hc-shadow-xl focus:hc-border-indigo-300'
-			)}
-			{...rest}
-		>
-			{image && image}
-			{children}
-			{body && body}
-			{footer && footer}
-		</Container>
-	);
-};
-
-export const CardImage = ({
-	image,
-	alt,
-	className,
-	imageClassName,
-	...rest
-}) => {
-	return (
-		<div
-			className={twMerge(
-				'hc-w-full',
-				className ?? ''
-			)}
-		>
-			<img
-				src={typeof image === 'string' ? image : image.src}
-				width={image.width ? image.width : null}
-				height={image.height ? image.height : null}
-				alt={alt ?? ''}
-				className={twMerge(
-					'hc-w-full hc-h-auto',
-					imageClassName ?? ''
-				)}
-				{...rest}
-			/>
-		</div>
-	);
-};
-
-export const CardBody = ({
-	children,
-	className
-}) => {
-	return (
-		<div
-			className={twMerge(
-				'hc-flex-auto hc-p-4 md:hc-px-6 lg:hc-px-8',
-				className ?? ''
-			)}
-		>
-			{children}
-		</div>
-	);
-};
-
-export const CardTitle = ({
-	as = 'h3',
-	children,
-	className,
-	...rest
-}) => {
-	const Title = as;
-
-	return (
-		<Title
-			className={twMerge(
-				'hc-text-2xl hc-font-bold',
-				className ?? ''
-			)}
-			{...rest}
-		>
-			{children}
-		</Title>
-	);
-};
-
-export const CardFooter = ({
-	children,
-	className
-}) => {
-	return (
-		<div
-			className={twMerge(
-				'hc-py-2 hc-px-4 md:hc-px-6 lg:hc-px-8 hc-bg-gray-100',
-				className ?? ''
-			)}
-		>
-			{children}
-		</div>
-	);
-};
-
-Card.Default = CardDefault;
-Card.Link = CardLink;
-Card.Image = CardImage;
-Card.Body = CardBody;
-Card.Title = CardTitle;
-Card.Footer = CardFooter;
-
-CardDefault.displayName = 'Card:Default';
-
-export default Card;
+import React, { forwardRef } from 'react';
+import { Link } from 'react-router-dom';
+import { twMerge } from 'tailwind-merge';
+
+const cardClasses = (className, hasShadow) => twMerge(
+	'hc-relative hc-flex hc-flex-wrap hc-flex-col hc-bg-clip-border hc-break-words hc-bg-white hc-border hc-border-gray-100',
+	hasShadow ? 'hc-shadow-lg' : '',
+	className ?? ''
+);
+
+const Card = ({ children }) => {
+	return (
+		<>{children}</>
+	);
+};
+
+export const CardDefault = forwardRef((
+	{
+		as = 'div',
+		className,
+		hasShadow = false,
+		image,
+		body,
+		children,
+		footer,
+		...rest
+	},
+	ref
+) => {
+	const Container = as;
+
+	return (
+		<Container
+			ref={ref}
+			className={cardClasses(className, hasShadow)}
+			{...rest}
+		>
+			{image}
+			{children}
+			{body}
+			{footer}
+		</Container>
+	);
+});
+
+const CardLink = ({
+	as = 'link',
+	href,
+	className,
+	hasShadow = false,
+	image,
+	body,
+	children,
+	footer,
+	...rest
+}) => {
+	const Container = as === 'link' ? Link : as;
+
+	return (
+		<Container
+			to={href}
+			className={twMerge(
+				cardClasses(className, hasShadow),
+				'hc-group hc-transition hover:hc-shadow-xl hover:hc-border-indigo-300 focus:hc-shadow-xl focus:hc-border-indigo-300'
+			)}
+			{...rest}
+		>
+			{image && image}
+			{children}
+			{body && body}
+			{footer && footer}
+		</Container>
+	);
+};
+
+export const CardImage = ({
+	image,
+	alt,
+	className,
+	imageClassName,
+	...rest
+}) => {
+	return (
+		<div
+			className={twMerge(
+				'hc-w-full',
+				className ?? ''
+			)}
+		>
+			<img
+				src={typeof image === 'string' ? image : image.src}
+				width={image.width ? image.width : null}
+				height={image.height ? image.height : null}
+				alt={alt ?? ''}
+				className={twMerge(
+					'hc-w-full hc-h-auto',
+					imageClassName ?? ''
+				)}
+				{...rest}
+			/>
+		</div>
+	);
+};
+
+export const CardBody = ({
+	children,
+	className
+}) => {
+	return (
+		<div
+			className={twMerge(
+				'hc-flex-auto hc-p-4 md:hc-px-6 lg:hc-px-8',
+				className ?? ''
+			)}
+		>
+			{children}
+		</div>
+	);
+};
+
+export const CardTitle = ({
+	as = 'h3',
+	children,
+	className,
+	...rest
+}) => {
+	const Title = as;
+
+	return (
+		<Title
+			className={twMerge(
+				'hc-text-2xl hc-font-bold',
+				className ?? ''
+			)}
+			{...rest}
+		>
+			{children}
+		</Title>
+	);
+};
+
+export const CardFooter = ({
+	children,
+	className
+}) => {
+	return (
+		<div
+			className={twMerge(
+				'hc-py-2 hc-px-4 md:hc-px-6 lg:hc-px-8 hc-bg-gray-100',
+				className ?? ''
+			)}
+		>
+			{children}
+		</div>
+	);
+};
+
+Card.Default = CardDefault;
+Card.Link = CardLink;
+Card.Image = CardImage;
+Card.Body = CardBody;
+Card.Title = CardTitle;
+Card.Footer = CardFooter;
+
+CardDefault.displayName = 'Card:Default';
+
+export default Card;

package/src/components/modules/cards/filter.js

@@ -1,56 +1,56 @@
-import React from 'react';
-
-import Card from '~/components/modules/cards/default';
-import Icon from '~/components/modules/icon';
-
-const CardFilter = ({
-	as,
-	className,
-	children,
-	...rest
-}) => {
-	return (
-		<Card.Default
-			as={as}
-			className={`
-			hc-bg-uiAccent/5 hc-border hc-border-uiAccent/20 hc-rounded
-				${className ?? ''}
-			`}
-			{...rest}
-		>
-			<Card.Body className="!hc-p-3">
-				{children}
-			</Card.Body>
-		</Card.Default>
-	);
-};
-
-export const CardTitle = ({
-	as,
-	children,
-	icon,
-	className,
-	...rest
-}) => {
-	return (
-		<Card.Title
-			as={as}
-			className={`
-			hc-flex hc-items-center hc-gap-2 hc-mb-2 hc-text-xs hc-uppercase hc-font-bold hc-text-uiText
-				${className ?? ''}
-			`}
-			{...rest}
-		>
-			<Icon
-				icon={icon}
-				size="hc-size-5"
-				className="hc-text-uiAccent/30"
-			/>
-			{children}
-		</Card.Title>
-	);
-};
-
-CardFilter.Title = CardTitle;
-
-export default CardFilter;
+import React from 'react';
+
+import Card from '~/components/modules/cards/default';
+import Icon from '~/components/modules/icon';
+
+const CardFilter = ({
+	as,
+	className,
+	children,
+	...rest
+}) => {
+	return (
+		<Card.Default
+			as={as}
+			className={`
+			hc-bg-uiAccent/5 hc-border hc-border-uiAccent/20 hc-rounded
+				${className ?? ''}
+			`}
+			{...rest}
+		>
+			<Card.Body className="!hc-p-3">
+				{children}
+			</Card.Body>
+		</Card.Default>
+	);
+};
+
+export const CardTitle = ({
+	as,
+	children,
+	icon,
+	className,
+	...rest
+}) => {
+	return (
+		<Card.Title
+			as={as}
+			className={`
+			hc-flex hc-items-center hc-gap-2 hc-mb-2 hc-text-xs hc-uppercase hc-font-bold hc-text-uiText
+				${className ?? ''}
+			`}
+			{...rest}
+		>
+			<Icon
+				icon={icon}
+				size="hc-size-5"
+				className="hc-text-uiAccent/30"
+			/>
+			{children}
+		</Card.Title>
+	);
+};
+
+CardFilter.Title = CardTitle;
+
+export default CardFilter;