softable-pixels-web 1.2.48 → 1.2.49

package/dist/{MonthPicker-RD8OdkPP.js → MonthPicker-C9wimVNC.js}

@@ -181,14 +181,17 @@ function createMonthPickerTriggerStyles(props) {
 			opacity: props.disabled ? .5 : 1,
 			cursor: props.disabled ? "not-allowed" : "pointer"
 		},
+		fieldWrapper: {
+			position: "relative",
+			width: "100%"
+		},
 		button: {
 			width: "100%",
 			display: "flex",
 			alignItems: "center",
-			justifyContent: "space-between",
 			gap: "0.5rem",
 			borderRadius: "0.5rem",
-			padding: "0.625rem 0.875rem",
+			padding: props.showClearButton && props.value?.year !== void 0 && props.value.month !== void 0 && !props.disabled ? "0.625rem 3.75rem 0.625rem 0.875rem" : "0.625rem 0.875rem",
 			border: props.errorMessage ? "1px solid var(--px-color-error)" : "1px solid var(--px-border-primary)",
 			__rules: {
 				"&:hover": {
@@ -204,7 +207,45 @@ function createMonthPickerTriggerStyles(props) {
 		buttonContent: {
 			display: "flex",
 			alignItems: "center",
-			gap: "0.5rem"
+			gap: "0.5rem",
+			minWidth: 0
+		},
+		chevronIcon: {
+			position: "absolute",
+			top: "50%",
+			right: "0.875rem",
+			transform: "translateY(-50%)",
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "center",
+			pointerEvents: "none"
+		},
+		clearButton: {
+			position: "absolute",
+			top: "50%",
+			right: "2.25rem",
+			transform: "translateY(-50%)",
+			width: "1.5rem",
+			height: "1.5rem",
+			padding: 0,
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "center",
+			color: "var(--px-text-secondary)",
+			border: "none",
+			borderRadius: "999px",
+			background: "transparent",
+			cursor: "pointer",
+			__rules: {
+				"&:hover": {
+					color: "var(--px-text-primary)",
+					backgroundColor: "var(--px-bg-secondary)"
+				},
+				"&:focus-visible": {
+					outlineOffset: "2px",
+					outline: "2px solid var(--px-color-primary)"
+				}
+			}
 		}
 	});
 }
@@ -214,49 +255,79 @@ function createMonthPickerTriggerStyles(props) {
 const MonthPickerTrigger = forwardRef(function MonthPickerTrigger$1(props, ref) {
 	const inputId = useId();
 	const { styles, classes } = useThemedStyles(props, createMonthPickerTriggerStyles, {
-		pick: (p) => [p.disabled, p.errorMessage],
+		pick: (p) => [
+			p.disabled,
+			p.errorMessage,
+			p.showClearButton,
+			p.value?.year,
+			p.value?.month
+		],
 		applyCommonProps: true,
 		commonSlot: "container"
 	});
-	const { label, value, disabled, required, placeholder, onClick } = props;
+	const { label, value, disabled, required, hideLabel, placeholder, onClick } = props;
+	const hasSelectedValue = value?.year !== void 0 && value.month !== void 0;
+	const shouldShowClearButton = props.showClearButton && hasSelectedValue && !disabled;
 	function renderLabel() {
-		if (!value) return placeholder ?? "Selecione um mês";
+		if (!hasSelectedValue) return placeholder ?? "Selecione um mês";
 		return capitalize(format(new Date(value.year, value.month - 1, 1), "MMMM yyyy", { locale: ptBR }));
 	}
 	return /* @__PURE__ */ jsxs("div", {
 		style: styles.container,
 		children: [
-			/* @__PURE__ */ jsx(Label, {
+			!hideLabel ? /* @__PURE__ */ jsx(Label, {
 				label,
 				htmlFor: inputId,
 				required,
 				requiredColor: "var(--color-error)"
-			}),
-			/* @__PURE__ */ jsxs("button", {
-				ref,
-				id: inputId,
-				type: "button",
-				disabled,
-				style: styles.button,
-				"aria-expanded": props.ariaExpanded,
-				className: classes.button,
-				onClick,
-				children: [/* @__PURE__ */ jsxs("div", {
-					style: styles.buttonContent,
-					children: [/* @__PURE__ */ jsx(Icon, {
-						size: "sm",
-						name: "general-calendar",
-						color: "var(--px-text-primary)"
-					}), /* @__PURE__ */ jsx(Typography, {
-						variant: "b1",
-						className: "font-normal",
-						children: renderLabel()
-					})]
-				}), /* @__PURE__ */ jsx(Icon, {
-					size: "sm",
-					color: "var(--px-text-primary)",
-					name: props.ariaExpanded ? "chevrons-up" : "chevrons-down"
-				})]
+			}) : null,
+			/* @__PURE__ */ jsxs("div", {
+				style: styles.fieldWrapper,
+				children: [
+					/* @__PURE__ */ jsx("button", {
+						ref,
+						id: inputId,
+						type: "button",
+						disabled,
+						style: styles.button,
+						"aria-expanded": props.ariaExpanded,
+						"aria-label": hideLabel ? label : void 0,
+						className: classes.button,
+						onClick,
+						children: /* @__PURE__ */ jsxs("div", {
+							style: styles.buttonContent,
+							children: [/* @__PURE__ */ jsx(Icon, {
+								size: "sm",
+								name: "general-calendar",
+								color: "var(--px-text-primary)"
+							}), /* @__PURE__ */ jsx(Typography, {
+								variant: "b1",
+								className: "font-normal",
+								children: renderLabel()
+							})]
+						})
+					}),
+					shouldShowClearButton ? /* @__PURE__ */ jsx("button", {
+						type: "button",
+						style: styles.clearButton,
+						className: classes.clearButton,
+						"aria-label": "Limpar mês selecionado",
+						onClick: props.onClear,
+						children: /* @__PURE__ */ jsx(Icon, {
+							size: "sm",
+							name: "general-close",
+							color: "currentColor"
+						})
+					}) : null,
+					/* @__PURE__ */ jsx("span", {
+						style: styles.chevronIcon,
+						children: /* @__PURE__ */ jsx(Icon, {
+							size: "sm",
+							color: "var(--px-text-primary)",
+							name: props.ariaExpanded ? "chevrons-up" : "chevrons-down"
+						})
+					})
+				]
 			}),
 			props.errorMessage ? /* @__PURE__ */ jsx(Typography, {
 				variant: "b2",
@@ -282,11 +353,20 @@ function useMonthPicker(params) {
 		setOpen(false);
 		params.onChange(value);
 	}
+	function handleClear() {
+		setOpen(false);
+		setSelectedValue(void 0);
+		params.onChange({
+			year: void 0,
+			month: void 0
+		});
+	}
 	return {
 		isOpen,
 		selectedValue,
 		toggleDialog,
-		handleMonthSelect
+		handleMonthSelect,
+		handleClear
 	};
 }
 
@@ -303,7 +383,7 @@ var types_exports = {};
 //#endregion
 //#region src/components/commons/inputs/MonthPicker/index.tsx
 const MonthPicker = ({ placementContainer = "bottom-start", ...props }) => {
-	const { isOpen, selectedValue, toggleDialog, handleMonthSelect } = useMonthPicker(props);
+	const { isOpen, selectedValue, toggleDialog, handleMonthSelect, handleClear } = useMonthPicker(props);
 	const { styles } = useThemedStyles(props, createMonthPickerStyles, {
 		applyCommonProps: true,
 		commonSlot: "container"
@@ -314,7 +394,8 @@ const MonthPicker = ({ placementContainer = "bottom-start", ...props }) => {
 			ref,
 			value: props.value,
 			ariaExpanded,
-			onClick
+			onClick,
+			onClear: handleClear
 		});
 	}
 	return /* @__PURE__ */ jsx("div", {
@@ -344,4 +425,4 @@ const MonthPicker = ({ placementContainer = "bottom-start", ...props }) => {
 
 //#endregion
 export { types_exports as n, MonthPicker as t };
-//# sourceMappingURL=MonthPicker-RD8OdkPP.js.map
+//# sourceMappingURL=MonthPicker-C9wimVNC.js.map

package/dist/MonthPicker-C9wimVNC.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MonthPicker-C9wimVNC.js","names":["format","MonthButton: React.FC<MonthButtonProps>","MonthGrid: React.FC<MonthGridProps>","MonthPickerTrigger","MonthPicker: React.FC<MonthPickerProps>"],"sources":["../src/components/commons/inputs/MonthPicker/components/MonthGrid/components/MonthButton/utils/getMonthLabel.ts","../src/components/commons/inputs/MonthPicker/components/MonthGrid/components/MonthButton/styles.ts","../src/components/commons/inputs/MonthPicker/components/MonthGrid/components/MonthButton/index.tsx","../src/components/commons/inputs/MonthPicker/components/MonthGrid/constants.ts","../src/components/commons/inputs/MonthPicker/components/MonthGrid/styles.ts","../src/components/commons/inputs/MonthPicker/components/MonthGrid/index.tsx","../src/components/commons/inputs/MonthPicker/components/MonthPickerTrigger/styles.ts","../src/components/commons/inputs/MonthPicker/components/MonthPickerTrigger/index.tsx","../src/components/commons/inputs/MonthPicker/hooks/useMonthPicker.ts","../src/components/commons/inputs/MonthPicker/styles.ts","../src/components/commons/inputs/MonthPicker/types.ts","../src/components/commons/inputs/MonthPicker/index.tsx"],"sourcesContent":["// External libraries\nimport { format } from 'date-fns'\nimport { ptBR } from 'date-fns/locale'\n\n// Utils\nimport { capitalize } from '@utils/functions'\n\nexport function getMonthLabel(month: number, year: number) {\n  const date = new Date(year, month - 1, 1)\n  return capitalize(format(date, 'MMM', { locale: ptBR }))\n}\n","import { styled } from '@hooks/useThemedStyles/types'\n\ninterface MonthButtonStyleProps {\n  isSelected: boolean\n  isDisabled: boolean\n  isCurrentMonth: boolean\n}\n\nexport function createMonthButtonStyles(props: MonthButtonStyleProps) {\n  return styled({\n    button: {\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      padding: '0.5rem',\n      borderRadius: '0.5rem',\n      cursor: props.isDisabled ? 'not-allowed' : 'pointer',\n      opacity: props.isDisabled ? 0.4 : 1,\n      fontWeight: props.isCurrentMonth ? '600' : '400',\n\n      backgroundColor: props.isSelected\n        ? 'var(--px-color-primary)'\n        : 'transparent',\n\n      color: props.isSelected\n        ? 'var(--px-color-primary-contrast)'\n        : 'var(--px-text-primary)',\n\n      border:\n        props.isCurrentMonth && !props.isSelected\n          ? '1px solid var(--px-border-primary)'\n          : '1px solid transparent',\n\n      transition: 'background-color 0.15s ease-out',\n\n      __rules: {\n        '&:hover': {\n          backgroundColor: props.isSelected\n            ? 'var(--px-color-primary)'\n            : props.isDisabled\n              ? 'transparent'\n              : 'var(--color-gray-50)'\n        }\n      }\n    }\n  })\n}\n","// External libraries\nimport type React from 'react'\n\n// Components\nimport { Typography } from '@components/commons/toolkit/Typography'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Utils\nimport { getMonthLabel } from './utils'\n\n// Types\nimport type { MonthPickerValue } from '@components/commons/inputs/MonthPicker/types'\n\n// Styles\nimport { createMonthButtonStyles } from './styles'\n\ninterface MonthButtonProps {\n  month: number\n  year: number\n  isSelected: boolean\n  isDisabled: boolean\n  isCurrentMonth: boolean\n  onSelect: (value: MonthPickerValue) => void\n}\n\nexport const MonthButton: React.FC<MonthButtonProps> = ({\n  month,\n  year,\n  isSelected,\n  isDisabled,\n  isCurrentMonth,\n  onSelect\n}) => {\n  const { styles, classes } = useThemedStyles(\n    { isSelected, isDisabled, isCurrentMonth },\n    createMonthButtonStyles,\n    { pick: p => [p.isSelected, p.isDisabled, p.isCurrentMonth] }\n  )\n\n  return (\n    <button\n      type=\"button\"\n      disabled={isDisabled}\n      style={styles.button}\n      className={classes.button}\n      onClick={() => !isDisabled && onSelect({ year, month })}\n    >\n      <Typography\n        variant=\"b2\"\n        fontWeight={'semibold'}\n        color={isSelected ? 'var(--px-text-inverse)' : undefined}\n      >\n        {getMonthLabel(month, year)}\n      </Typography>\n    </button>\n  )\n}\n","export const MONTHS = Array.from({ length: 12 }, (_, i) => i + 1)\n","import { styled } from '@hooks/useThemedStyles/types'\n\nexport function createMonthGridStyles() {\n  return styled({\n    container: {\n      padding: '1rem',\n      display: 'flex',\n      flexDirection: 'column' as const,\n      gap: '0.75rem',\n      minWidth: '16rem'\n    },\n\n    header: {\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'space-between'\n    },\n\n    navButton: {\n      display: 'flex',\n      cursor: 'pointer',\n      padding: '0.125rem',\n      borderRadius: '50%',\n      transition: 'background-color 0.2s ease-out',\n\n      __rules: {\n        '&:hover': {\n          backgroundColor: 'var(--color-gray-50)'\n        }\n      }\n    },\n\n    grid: {\n      display: 'grid',\n      gridTemplateColumns: 'repeat(3, 1fr)',\n      gap: '0.5rem'\n    }\n  })\n}","// External Libraries\nimport type React from 'react'\nimport { useState } from 'react'\n\n// Components\nimport { MonthButton } from './components/MonthButton'\nimport { Icon } from '@components/commons/toolkit/Icon'\nimport { Typography } from '@components/commons/toolkit/Typography'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Utils\nimport { MONTHS } from './constants'\n\n// Types\nimport type { MonthGridProps } from './types'\n\n// Styles\nimport { createMonthGridStyles } from './styles'\n\nexport const MonthGrid: React.FC<MonthGridProps> = ({\n  value,\n  disablePastMonths,\n  disableFutureMonths,\n  onSelect\n}) => {\n  const today = new Date()\n  const [displayYear, setDisplayYear] = useState(\n    value?.year ?? today.getFullYear()\n  )\n\n  const { styles } = useThemedStyles({}, createMonthGridStyles, {\n    applyCommonProps: true\n  })\n\n  function isPastMonth(month: number) {\n    if (!disablePastMonths) return false\n    return (\n      displayYear < today.getFullYear() ||\n      (displayYear === today.getFullYear() && month < today.getMonth() + 1)\n    )\n  }\n\n  function isFutureMonth(month: number) {\n    if (!disableFutureMonths) return false\n    return (\n      displayYear > today.getFullYear() ||\n      (displayYear === today.getFullYear() && month > today.getMonth() + 1)\n    )\n  }\n\n  const canGoPrev = !disablePastMonths || displayYear > today.getFullYear()\n\n  const canGoNext = !disableFutureMonths || displayYear < today.getFullYear()\n\n  return (\n    <div style={styles.container}>\n      <div style={styles.header}>\n        <button\n          type=\"button\"\n          disabled={!canGoPrev}\n          style={{ ...styles.navButton, opacity: canGoPrev ? 1 : 0.3 }}\n          onClick={() => canGoPrev && setDisplayYear(y => y - 1)}\n        >\n          <Icon name=\"chevrons-left\" color=\"var(--px-text-secondary)\" />\n        </button>\n\n        <Typography variant=\"b2\" fontWeight=\"semibold\">\n          {displayYear}\n        </Typography>\n\n        <button\n          type=\"button\"\n          disabled={!canGoNext}\n          style={{\n            ...styles.navButton,\n            opacity: canGoNext ? 1 : 0.3,\n            rotate: '180deg'\n          }}\n          onClick={() => canGoNext && setDisplayYear(y => y + 1)}\n        >\n          <Icon name=\"chevrons-left\" color=\"var(--px-text-secondary)\" />\n        </button>\n      </div>\n\n      <div style={styles.grid}>\n        {MONTHS.map(month => (\n          <MonthButton\n            key={month}\n            month={month}\n            year={displayYear}\n            isSelected={value?.year === displayYear && value?.month === month}\n            isDisabled={isPastMonth(month) || isFutureMonth(month)}\n            isCurrentMonth={\n              today.getFullYear() === displayYear &&\n              today.getMonth() + 1 === month\n            }\n            onSelect={onSelect}\n          />\n        ))}\n      </div>\n    </div>\n  )\n}\n","import { styled } from '@hooks/useThemedStyles/types'\nimport type { MonthPickerTriggerProps } from './types'\n\nexport function createMonthPickerTriggerStyles(props: MonthPickerTriggerProps) {\n  return styled({\n    container: {\n      width: '100%',\n\n      display: 'flex',\n      flexDirection: 'column',\n\n      gap: '0.5rem',\n\n      opacity: props.disabled ? 0.5 : 1,\n      cursor: props.disabled ? 'not-allowed' : 'pointer'\n    },\n    fieldWrapper: {\n      position: 'relative',\n      width: '100%'\n    },\n    button: {\n      width: '100%',\n\n      display: 'flex',\n      alignItems: 'center',\n\n      gap: '0.5rem',\n      borderRadius: '0.5rem',\n      padding:\n        props.showClearButton &&\n        props.value?.year !== undefined &&\n        props.value.month !== undefined &&\n        !props.disabled\n          ? '0.625rem 3.75rem 0.625rem 0.875rem'\n          : '0.625rem 0.875rem',\n\n      border: props.errorMessage\n        ? '1px solid var(--px-color-error)'\n        : '1px solid var(--px-border-primary)',\n\n      __rules: {\n        '&:hover': {\n          boxShadow: 'var(--px-shadow-default)',\n          borderColor: 'var(--px-color-primary)'\n        },\n        '&:focus-within': {\n          outlineOffset: '-1px',\n          outline: props.errorMessage\n            ? '2px solid var(--px-color-error)'\n            : `2px solid var(--px-color-primary)`\n        }\n      }\n    },\n    buttonContent: {\n      display: 'flex',\n      alignItems: 'center',\n      gap: '0.5rem',\n      minWidth: 0\n    },\n    chevronIcon: {\n      position: 'absolute',\n      top: '50%',\n      right: '0.875rem',\n      transform: 'translateY(-50%)',\n\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n\n      pointerEvents: 'none'\n    },\n    clearButton: {\n      position: 'absolute',\n      top: '50%',\n      right: '2.25rem',\n      transform: 'translateY(-50%)',\n\n      width: '1.5rem',\n      height: '1.5rem',\n      padding: 0,\n\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n\n      color: 'var(--px-text-secondary)',\n      border: 'none',\n      borderRadius: '999px',\n      background: 'transparent',\n      cursor: 'pointer',\n\n      __rules: {\n        '&:hover': {\n          color: 'var(--px-text-primary)',\n          backgroundColor: 'var(--px-bg-secondary)'\n        },\n        '&:focus-visible': {\n          outlineOffset: '2px',\n          outline: '2px solid var(--px-color-primary)'\n        }\n      }\n    }\n  })\n}\n","// External Libraries\nimport { forwardRef, useId } from 'react'\nimport { ptBR } from 'date-fns/locale'\nimport { format } from 'date-fns/format'\n\n// Components\nimport { Icon } from '@components/commons/toolkit/Icon'\nimport { Label } from '@components/commons/toolkit/Label'\nimport { Typography } from '@components/commons/toolkit/Typography'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Utils\nimport { capitalize } from '@utils/functions'\n\n// Types\nimport type { MonthPickerTriggerProps } from './types'\n\n// Styles\nimport { createMonthPickerTriggerStyles } from './styles'\n\nexport const MonthPickerTrigger = forwardRef<\n  HTMLButtonElement,\n  MonthPickerTriggerProps\n>(function MonthPickerTrigger(props, ref) {\n  const inputId = useId()\n  const { styles, classes } = useThemedStyles(\n    props,\n    createMonthPickerTriggerStyles,\n    {\n      pick: p => [\n        p.disabled,\n        p.errorMessage,\n        p.showClearButton,\n        p.value?.year,\n        p.value?.month\n      ],\n      applyCommonProps: true,\n      commonSlot: 'container'\n    }\n  )\n\n  // Constants\n  const { label, value, disabled, required, hideLabel, placeholder, onClick } =\n    props\n  const hasSelectedValue = value?.year !== undefined && value.month !== undefined\n  const shouldShowClearButton =\n    props.showClearButton && hasSelectedValue && !disabled\n\n  // Functions\n  function renderLabel() {\n    if (!hasSelectedValue) return placeholder ?? 'Selecione um mês'\n\n    const date = new Date(value.year, value.month - 1, 1)\n    return capitalize(format(date, 'MMMM yyyy', { locale: ptBR }))\n  }\n\n  return (\n    <div style={styles.container}>\n      {!hideLabel ? (\n        <Label\n          label={label}\n          htmlFor={inputId}\n          required={required}\n          requiredColor=\"var(--color-error)\"\n        />\n      ) : null}\n\n      <div style={styles.fieldWrapper}>\n        <button\n          ref={ref}\n          id={inputId}\n          type=\"button\"\n          disabled={disabled}\n          style={styles.button}\n          aria-expanded={props.ariaExpanded}\n          aria-label={hideLabel ? label : undefined}\n          className={classes.button}\n          onClick={onClick}\n        >\n          <div style={styles.buttonContent}>\n            <Icon\n              size=\"sm\"\n              name=\"general-calendar\"\n              color=\"var(--px-text-primary)\"\n            />\n\n            <Typography variant=\"b1\" className=\"font-normal\">\n              {renderLabel()}\n            </Typography>\n          </div>\n        </button>\n\n        {shouldShowClearButton ? (\n          <button\n            type=\"button\"\n            style={styles.clearButton}\n            className={classes.clearButton}\n            aria-label=\"Limpar mês selecionado\"\n            onClick={props.onClear}\n          >\n            <Icon size=\"sm\" name=\"general-close\" color=\"currentColor\" />\n          </button>\n        ) : null}\n\n        <span style={styles.chevronIcon}>\n          <Icon\n            size=\"sm\"\n            color=\"var(--px-text-primary)\"\n            name={props.ariaExpanded ? 'chevrons-up' : 'chevrons-down'}\n          />\n        </span>\n      </div>\n\n      {props.errorMessage ? (\n        <Typography\n          variant=\"b2\"\n          fontSize=\"0.75rem\"\n          fontWeight=\"regular\"\n          color=\"var(--px-color-error)\"\n        >\n          {props.errorMessage}\n        </Typography>\n      ) : null}\n    </div>\n  )\n})\n","// External Libraries\nimport { useState } from 'react'\n\n// Types\nimport type { MonthPickerProps, MonthPickerValue } from '../types'\n\nexport function useMonthPicker(params: MonthPickerProps) {\n  // States\n  const [isOpen, setOpen] = useState(false)\n  const [selectedValue, setSelectedValue] = useState<\n    MonthPickerValue | undefined\n  >(params.value)\n\n  // Functions\n  function toggleDialog(status: boolean) {\n    if (status) setSelectedValue(params.value)\n    setOpen(status)\n  }\n\n  function handleMonthSelect(value: MonthPickerValue) {\n    setOpen(false)\n    params.onChange(value)\n  }\n\n  function handleClear() {\n    setOpen(false)\n    setSelectedValue(undefined)\n    params.onChange({ year: undefined, month: undefined })\n  }\n\n  return {\n    isOpen,\n    selectedValue,\n    toggleDialog,\n    handleMonthSelect,\n    handleClear\n  }\n}\n","import { styled } from '@hooks/useThemedStyles/types'\n\nexport function createMonthPickerStyles() {\n  return styled({\n    container: {\n      width: '100%'\n    }\n  })\n}\n","import type { PopoverProps } from '@components/commons/toolkit/Popover/types'\n\nexport interface MonthPickerValue {\n  year?: number\n  month?: number\n}\n\nexport interface MonthPickerProps {\n  label: string\n  value?: MonthPickerValue\n  onChange: (value: MonthPickerValue) => void\n\n  disabled?: boolean\n  required?: boolean\n  hideLabel?: boolean\n  showClearButton?: boolean\n  placeholder?: string\n  errorMessage?: string\n  scrollContainerId: string\n  placementContainer?: 'bottom' | 'bottom-end' | 'bottom-start'\n  portalId?: PopoverProps['portalId']\n  disablePastMonths?: boolean\n  disableFutureMonths?: boolean\n}\n","// External Libraries\nimport type React from 'react'\n\n// Components\nimport { MonthGrid } from './components/MonthGrid'\nimport { MonthPickerTrigger } from './components/MonthPickerTrigger'\nimport { BasePopover } from '@components/commons/structure/BasePopover'\n\n// Hooks\nimport { useMonthPicker } from './hooks/useMonthPicker'\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { MonthPickerProps } from './types'\nimport type { PopoverTriggerRenderProps } from '@components/commons/toolkit/Popover/types'\n\n// Styles\nimport { createMonthPickerStyles } from './styles'\n\nexport * as MonthPickerTypes from './types'\n\nexport const MonthPicker: React.FC<MonthPickerProps> = ({\n  placementContainer = 'bottom-start',\n  ...props\n}) => {\n  // Hooks\n  const { isOpen, selectedValue, toggleDialog, handleMonthSelect, handleClear } =\n    useMonthPicker(props)\n  const { styles } = useThemedStyles(props, createMonthPickerStyles, {\n    applyCommonProps: true,\n    commonSlot: 'container'\n  })\n\n  // Functions\n  function renderTrigger({\n    ref,\n    ariaExpanded,\n    onClick\n  }: PopoverTriggerRenderProps) {\n    return (\n      <MonthPickerTrigger\n        {...props}\n        ref={ref as any}\n        value={props.value}\n        ariaExpanded={ariaExpanded}\n        onClick={onClick}\n        onClear={handleClear}\n      />\n    )\n  }\n\n  return (\n    <div style={styles.container}>\n      <BasePopover\n        open={isOpen}\n        maxWidth=\"fit-content\"\n        minWidth=\"fit-content\"\n        maxHeight=\"fit-content\"\n        portalId={props.portalId}\n        trigger={renderTrigger}\n        onOpenChange={toggleDialog}\n        floatingOptions={{\n          strategy: 'fixed',\n          placement: placementContainer,\n          scrollContainerId: props.scrollContainerId\n        }}\n      >\n        <MonthGrid\n          value={selectedValue}\n          disablePastMonths={props.disablePastMonths}\n          disableFutureMonths={props.disableFutureMonths}\n          onSelect={handleMonthSelect}\n        />\n      </BasePopover>\n    </div>\n  )\n}\n"],"mappings":"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"}

package/dist/{index-Dd9u5hOV.d.ts → index-DmnHS0fv.d.ts}

@@ -6,8 +6,8 @@ declare namespace types_d_exports {
   export { MonthPickerProps, MonthPickerValue };
 }
 interface MonthPickerValue {
-  year: number;
-  month: number;
+  year?: number;
+  month?: number;
 }
 interface MonthPickerProps {
   label: string;
@@ -15,6 +15,8 @@ interface MonthPickerProps {
   onChange: (value: MonthPickerValue) => void;
   disabled?: boolean;
   required?: boolean;
+  hideLabel?: boolean;
+  showClearButton?: boolean;
   placeholder?: string;
   errorMessage?: string;
   scrollContainerId: string;
@@ -28,4 +30,4 @@ interface MonthPickerProps {
 declare const MonthPicker: React.FC<MonthPickerProps>;
 //#endregion
 export { types_d_exports as n, MonthPicker as t };
-//# sourceMappingURL=index-Dd9u5hOV.d.ts.map
+//# sourceMappingURL=index-DmnHS0fv.d.ts.map

package/dist/index.d.ts

@@ -7,7 +7,7 @@ import { n as types_d_exports$3, t as DatePicker } from "./index-6Itj2WVr.js";
 import { n as types_d_exports$4, t as FileInput } from "./index-5nJK1Rhd.js";
 import { n as Locale, r as MaskType, t as MaskModule } from "./index-CaoW3nYL.js";
 import { t as Input } from "./index-Di3QB-PZ.js";
-import { n as types_d_exports$5, t as MonthPicker } from "./index-Dd9u5hOV.js";
+import { n as types_d_exports$5, t as MonthPicker } from "./index-DmnHS0fv.js";
 import { t as SearchInput } from "./index-DoZ2L5XY.js";
 import { n as types_d_exports$7, t as Select } from "./index-DmVT0cRh.js";
 import { t as index_d_exports } from "./index-DTfGLK34.js";

package/dist/index.js

@@ -26,7 +26,7 @@ import { c as MaskModule, o as Locale, s as MaskType } from "./MaskModule-Bt6ofS
 import { t as Input } from "./Input-BVqqXS88.js";
 import { t as TextArea } from "./TextArea-BxJzOFy8.js";
 import { n as types_exports$3, t as DatePicker } from "./DatePicker-78mGs6Cv.js";
-import { n as types_exports$5, t as MonthPicker } from "./MonthPicker-RD8OdkPP.js";
+import { n as types_exports$5, t as MonthPicker } from "./MonthPicker-C9wimVNC.js";
 import { t as SearchInput } from "./SearchInput-CdDxntYg.js";
 import { n as types_exports$1, t as ColorPicker } from "./ColorPicker-BfhaPxvS.js";
 import { t as Skeleton } from "./Skeleton-BNYKMao9.js";

package/dist/month-picker.d.ts

@@ -1,3 +1,3 @@
 import "./types-D4OkVRDf.js";
-import { n as types_d_exports, t as MonthPicker } from "./index-Dd9u5hOV.js";
+import { n as types_d_exports, t as MonthPicker } from "./index-DmnHS0fv.js";
 export { MonthPicker, types_d_exports as MonthPickerTypes };

package/dist/month-picker.js

@@ -6,6 +6,6 @@ import "./Popover-CED1_qlu.js";
 import "./Icon-UUxBec64.js";
 import "./BasePopover-BTCH2Kyr.js";
 import "./Label-bfESBaYl.js";
-import { n as types_exports, t as MonthPicker } from "./MonthPicker-RD8OdkPP.js";
+import { n as types_exports, t as MonthPicker } from "./MonthPicker-C9wimVNC.js";
 
 export { MonthPicker, types_exports as MonthPickerTypes };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "softable-pixels-web",
-  "version": "1.2.48",
+  "version": "1.2.49",
   "description": "",
   "keywords": [],
   "author": "softable",

package/dist/MonthPicker-RD8OdkPP.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"MonthPicker-RD8OdkPP.js","names":["format","MonthButton: React.FC<MonthButtonProps>","MonthGrid: React.FC<MonthGridProps>","MonthPickerTrigger","MonthPicker: React.FC<MonthPickerProps>"],"sources":["../src/components/commons/inputs/MonthPicker/components/MonthGrid/components/MonthButton/utils/getMonthLabel.ts","../src/components/commons/inputs/MonthPicker/components/MonthGrid/components/MonthButton/styles.ts","../src/components/commons/inputs/MonthPicker/components/MonthGrid/components/MonthButton/index.tsx","../src/components/commons/inputs/MonthPicker/components/MonthGrid/constants.ts","../src/components/commons/inputs/MonthPicker/components/MonthGrid/styles.ts","../src/components/commons/inputs/MonthPicker/components/MonthGrid/index.tsx","../src/components/commons/inputs/MonthPicker/components/MonthPickerTrigger/styles.ts","../src/components/commons/inputs/MonthPicker/components/MonthPickerTrigger/index.tsx","../src/components/commons/inputs/MonthPicker/hooks/useMonthPicker.ts","../src/components/commons/inputs/MonthPicker/styles.ts","../src/components/commons/inputs/MonthPicker/types.ts","../src/components/commons/inputs/MonthPicker/index.tsx"],"sourcesContent":["// External libraries\nimport { format } from 'date-fns'\nimport { ptBR } from 'date-fns/locale'\n\n// Utils\nimport { capitalize } from '@utils/functions'\n\nexport function getMonthLabel(month: number, year: number) {\n  const date = new Date(year, month - 1, 1)\n  return capitalize(format(date, 'MMM', { locale: ptBR }))\n}\n","import { styled } from '@hooks/useThemedStyles/types'\n\ninterface MonthButtonStyleProps {\n  isSelected: boolean\n  isDisabled: boolean\n  isCurrentMonth: boolean\n}\n\nexport function createMonthButtonStyles(props: MonthButtonStyleProps) {\n  return styled({\n    button: {\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      padding: '0.5rem',\n      borderRadius: '0.5rem',\n      cursor: props.isDisabled ? 'not-allowed' : 'pointer',\n      opacity: props.isDisabled ? 0.4 : 1,\n      fontWeight: props.isCurrentMonth ? '600' : '400',\n\n      backgroundColor: props.isSelected\n        ? 'var(--px-color-primary)'\n        : 'transparent',\n\n      color: props.isSelected\n        ? 'var(--px-color-primary-contrast)'\n        : 'var(--px-text-primary)',\n\n      border:\n        props.isCurrentMonth && !props.isSelected\n          ? '1px solid var(--px-border-primary)'\n          : '1px solid transparent',\n\n      transition: 'background-color 0.15s ease-out',\n\n      __rules: {\n        '&:hover': {\n          backgroundColor: props.isSelected\n            ? 'var(--px-color-primary)'\n            : props.isDisabled\n              ? 'transparent'\n              : 'var(--color-gray-50)'\n        }\n      }\n    }\n  })\n}\n","// External libraries\nimport type React from 'react'\n\n// Components\nimport { Typography } from '@components/commons/toolkit/Typography'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Utils\nimport { getMonthLabel } from './utils'\n\n// Types\nimport type { MonthPickerValue } from '@components/commons/inputs/MonthPicker/types'\n\n// Styles\nimport { createMonthButtonStyles } from './styles'\n\ninterface MonthButtonProps {\n  month: number\n  year: number\n  isSelected: boolean\n  isDisabled: boolean\n  isCurrentMonth: boolean\n  onSelect: (value: MonthPickerValue) => void\n}\n\nexport const MonthButton: React.FC<MonthButtonProps> = ({\n  month,\n  year,\n  isSelected,\n  isDisabled,\n  isCurrentMonth,\n  onSelect\n}) => {\n  const { styles, classes } = useThemedStyles(\n    { isSelected, isDisabled, isCurrentMonth },\n    createMonthButtonStyles,\n    { pick: p => [p.isSelected, p.isDisabled, p.isCurrentMonth] }\n  )\n\n  return (\n    <button\n      type=\"button\"\n      disabled={isDisabled}\n      style={styles.button}\n      className={classes.button}\n      onClick={() => !isDisabled && onSelect({ year, month })}\n    >\n      <Typography\n        variant=\"b2\"\n        fontWeight={'semibold'}\n        color={isSelected ? 'var(--px-text-inverse)' : undefined}\n      >\n        {getMonthLabel(month, year)}\n      </Typography>\n    </button>\n  )\n}\n","export const MONTHS = Array.from({ length: 12 }, (_, i) => i + 1)\n","import { styled } from '@hooks/useThemedStyles/types'\n\nexport function createMonthGridStyles() {\n  return styled({\n    container: {\n      padding: '1rem',\n      display: 'flex',\n      flexDirection: 'column' as const,\n      gap: '0.75rem',\n      minWidth: '16rem'\n    },\n\n    header: {\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'space-between'\n    },\n\n    navButton: {\n      display: 'flex',\n      cursor: 'pointer',\n      padding: '0.125rem',\n      borderRadius: '50%',\n      transition: 'background-color 0.2s ease-out',\n\n      __rules: {\n        '&:hover': {\n          backgroundColor: 'var(--color-gray-50)'\n        }\n      }\n    },\n\n    grid: {\n      display: 'grid',\n      gridTemplateColumns: 'repeat(3, 1fr)',\n      gap: '0.5rem'\n    }\n  })\n}","// External Libraries\nimport type React from 'react'\nimport { useState } from 'react'\n\n// Components\nimport { MonthButton } from './components/MonthButton'\nimport { Icon } from '@components/commons/toolkit/Icon'\nimport { Typography } from '@components/commons/toolkit/Typography'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Utils\nimport { MONTHS } from './constants'\n\n// Types\nimport type { MonthGridProps } from './types'\n\n// Styles\nimport { createMonthGridStyles } from './styles'\n\nexport const MonthGrid: React.FC<MonthGridProps> = ({\n  value,\n  disablePastMonths,\n  disableFutureMonths,\n  onSelect\n}) => {\n  const today = new Date()\n  const [displayYear, setDisplayYear] = useState(\n    value?.year ?? today.getFullYear()\n  )\n\n  const { styles } = useThemedStyles({}, createMonthGridStyles, {\n    applyCommonProps: true\n  })\n\n  function isPastMonth(month: number) {\n    if (!disablePastMonths) return false\n    return (\n      displayYear < today.getFullYear() ||\n      (displayYear === today.getFullYear() && month < today.getMonth() + 1)\n    )\n  }\n\n  function isFutureMonth(month: number) {\n    if (!disableFutureMonths) return false\n    return (\n      displayYear > today.getFullYear() ||\n      (displayYear === today.getFullYear() && month > today.getMonth() + 1)\n    )\n  }\n\n  const canGoPrev = !disablePastMonths || displayYear > today.getFullYear()\n\n  const canGoNext = !disableFutureMonths || displayYear < today.getFullYear()\n\n  return (\n    <div style={styles.container}>\n      <div style={styles.header}>\n        <button\n          type=\"button\"\n          disabled={!canGoPrev}\n          style={{ ...styles.navButton, opacity: canGoPrev ? 1 : 0.3 }}\n          onClick={() => canGoPrev && setDisplayYear(y => y - 1)}\n        >\n          <Icon name=\"chevrons-left\" color=\"var(--px-text-secondary)\" />\n        </button>\n\n        <Typography variant=\"b2\" fontWeight=\"semibold\">\n          {displayYear}\n        </Typography>\n\n        <button\n          type=\"button\"\n          disabled={!canGoNext}\n          style={{\n            ...styles.navButton,\n            opacity: canGoNext ? 1 : 0.3,\n            rotate: '180deg'\n          }}\n          onClick={() => canGoNext && setDisplayYear(y => y + 1)}\n        >\n          <Icon name=\"chevrons-left\" color=\"var(--px-text-secondary)\" />\n        </button>\n      </div>\n\n      <div style={styles.grid}>\n        {MONTHS.map(month => (\n          <MonthButton\n            key={month}\n            month={month}\n            year={displayYear}\n            isSelected={value?.year === displayYear && value?.month === month}\n            isDisabled={isPastMonth(month) || isFutureMonth(month)}\n            isCurrentMonth={\n              today.getFullYear() === displayYear &&\n              today.getMonth() + 1 === month\n            }\n            onSelect={onSelect}\n          />\n        ))}\n      </div>\n    </div>\n  )\n}\n","import { styled } from '@hooks/useThemedStyles/types'\nimport type { MonthPickerTriggerProps } from './types'\n\nexport function createMonthPickerTriggerStyles(props: MonthPickerTriggerProps) {\n  return styled({\n    container: {\n      width: '100%',\n\n      display: 'flex',\n      flexDirection: 'column',\n\n      gap: '0.5rem',\n\n      opacity: props.disabled ? 0.5 : 1,\n      cursor: props.disabled ? 'not-allowed' : 'pointer'\n    },\n    button: {\n      width: '100%',\n\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'space-between',\n\n      gap: '0.5rem',\n      borderRadius: '0.5rem',\n      padding: '0.625rem 0.875rem',\n\n      border: props.errorMessage\n        ? '1px solid var(--px-color-error)'\n        : '1px solid var(--px-border-primary)',\n\n      __rules: {\n        '&:hover': {\n          boxShadow: 'var(--px-shadow-default)',\n          borderColor: 'var(--px-color-primary)'\n        },\n        '&:focus-within': {\n          outlineOffset: '-1px',\n          outline: props.errorMessage\n            ? '2px solid var(--px-color-error)'\n            : `2px solid var(--px-color-primary)`\n        }\n      }\n    },\n    buttonContent: {\n      display: 'flex',\n      alignItems: 'center',\n      gap: '0.5rem'\n    }\n  })\n}\n","// External Libraries\nimport { forwardRef, useId } from 'react'\nimport { ptBR } from 'date-fns/locale'\nimport { format } from 'date-fns/format'\n\n// Components\nimport { Icon } from '@components/commons/toolkit/Icon'\nimport { Label } from '@components/commons/toolkit/Label'\nimport { Typography } from '@components/commons/toolkit/Typography'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Utils\nimport { capitalize } from '@utils/functions'\n\n// Types\nimport type { MonthPickerTriggerProps } from './types'\n\n// Styles\nimport { createMonthPickerTriggerStyles } from './styles'\n\nexport const MonthPickerTrigger = forwardRef<\n  HTMLButtonElement,\n  MonthPickerTriggerProps\n>(function MonthPickerTrigger(props, ref) {\n  const inputId = useId()\n  const { styles, classes } = useThemedStyles(\n    props,\n    createMonthPickerTriggerStyles,\n    {\n      pick: p => [p.disabled, p.errorMessage],\n      applyCommonProps: true,\n      commonSlot: 'container'\n    }\n  )\n\n  // Constants\n  const { label, value, disabled, required, placeholder, onClick } = props\n\n  // Functions\n  function renderLabel() {\n    if (!value) return placeholder ?? 'Selecione um mês'\n\n    const date = new Date(value.year, value.month - 1, 1)\n    return capitalize(format(date, 'MMMM yyyy', { locale: ptBR }))\n  }\n\n  return (\n    <div style={styles.container}>\n      <Label\n        label={label}\n        htmlFor={inputId}\n        required={required}\n        requiredColor=\"var(--color-error)\"\n      />\n\n      <button\n        ref={ref}\n        id={inputId}\n        type=\"button\"\n        disabled={disabled}\n        style={styles.button}\n        aria-expanded={props.ariaExpanded}\n        className={classes.button}\n        onClick={onClick}\n      >\n        <div style={styles.buttonContent}>\n          <Icon\n            size=\"sm\"\n            name=\"general-calendar\"\n            color=\"var(--px-text-primary)\"\n          />\n\n          <Typography variant=\"b1\" className=\"font-normal\">\n            {renderLabel()}\n          </Typography>\n        </div>\n\n        <Icon\n          size=\"sm\"\n          color=\"var(--px-text-primary)\"\n          name={props.ariaExpanded ? 'chevrons-up' : 'chevrons-down'}\n        />\n      </button>\n\n      {props.errorMessage ? (\n        <Typography\n          variant=\"b2\"\n          fontSize=\"0.75rem\"\n          fontWeight=\"regular\"\n          color=\"var(--px-color-error)\"\n        >\n          {props.errorMessage}\n        </Typography>\n      ) : null}\n    </div>\n  )\n})\n","// External Libraries\nimport { useState } from 'react'\n\n// Types\nimport type { MonthPickerProps, MonthPickerValue } from '../types'\n\nexport function useMonthPicker(params: MonthPickerProps) {\n  // States\n  const [isOpen, setOpen] = useState(false)\n  const [selectedValue, setSelectedValue] = useState<\n    MonthPickerValue | undefined\n  >(params.value)\n\n  // Functions\n  function toggleDialog(status: boolean) {\n    if (status) setSelectedValue(params.value)\n    setOpen(status)\n  }\n\n  function handleMonthSelect(value: MonthPickerValue) {\n    setOpen(false)\n    params.onChange(value)\n  }\n\n  return {\n    isOpen,\n    selectedValue,\n    toggleDialog,\n    handleMonthSelect\n  }\n}\n","import { styled } from '@hooks/useThemedStyles/types'\n\nexport function createMonthPickerStyles() {\n  return styled({\n    container: {\n      width: '100%'\n    }\n  })\n}\n","import type { PopoverProps } from '@components/commons/toolkit/Popover/types'\n\nexport interface MonthPickerValue {\n  year: number\n  month: number\n}\n\nexport interface MonthPickerProps {\n  label: string\n  value?: MonthPickerValue\n  onChange: (value: MonthPickerValue) => void\n\n  disabled?: boolean\n  required?: boolean\n  placeholder?: string\n  errorMessage?: string\n  scrollContainerId: string\n  placementContainer?: 'bottom' | 'bottom-end' | 'bottom-start'\n  portalId?: PopoverProps['portalId']\n  disablePastMonths?: boolean\n  disableFutureMonths?: boolean\n}\n","// External Libraries\nimport type React from 'react'\n\n// Components\nimport { MonthGrid } from './components/MonthGrid'\nimport { MonthPickerTrigger } from './components/MonthPickerTrigger'\nimport { BasePopover } from '@components/commons/structure/BasePopover'\n\n// Hooks\nimport { useMonthPicker } from './hooks/useMonthPicker'\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { MonthPickerProps } from './types'\nimport type { PopoverTriggerRenderProps } from '@components/commons/toolkit/Popover/types'\n\n// Styles\nimport { createMonthPickerStyles } from './styles'\n\nexport * as MonthPickerTypes from './types'\n\nexport const MonthPicker: React.FC<MonthPickerProps> = ({\n  placementContainer = 'bottom-start',\n  ...props\n}) => {\n  // Hooks\n  const { isOpen, selectedValue, toggleDialog, handleMonthSelect } =\n    useMonthPicker(props)\n  const { styles } = useThemedStyles(props, createMonthPickerStyles, {\n    applyCommonProps: true,\n    commonSlot: 'container'\n  })\n\n  // Functions\n  function renderTrigger({\n    ref,\n    ariaExpanded,\n    onClick\n  }: PopoverTriggerRenderProps) {\n    return (\n      <MonthPickerTrigger\n        {...props}\n        ref={ref as any}\n        value={props.value}\n        ariaExpanded={ariaExpanded}\n        onClick={onClick}\n      />\n    )\n  }\n\n  return (\n    <div style={styles.container}>\n      <BasePopover\n        open={isOpen}\n        maxWidth=\"fit-content\"\n        minWidth=\"fit-content\"\n        maxHeight=\"fit-content\"\n        portalId={props.portalId}\n        trigger={renderTrigger}\n        onOpenChange={toggleDialog}\n        floatingOptions={{\n          strategy: 'fixed',\n          placement: placementContainer,\n          scrollContainerId: props.scrollContainerId\n        }}\n      >\n        <MonthGrid\n          value={selectedValue}\n          disablePastMonths={props.disablePastMonths}\n          disableFutureMonths={props.disableFutureMonths}\n          onSelect={handleMonthSelect}\n        />\n      </BasePopover>\n    </div>\n  )\n}\n"],"mappings":"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"}