softable-pixels-web 1.2.11 → 1.2.13

package/dist/ColorPicker-Dc83Om7x.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker-Dc83Om7x.js","names":["ColorButton: React.FC<ColorButtonProps>","ColorsLoader: React.FC<Props>","ColorPicker: React.FC<ColorPickerProps>"],"sources":["../src/components/commons/inputs/ColorPicker/components/ColorButton/styles.ts","../src/components/commons/inputs/ColorPicker/components/ColorButton/index.tsx","../src/components/commons/inputs/ColorPicker/components/ColorsLoader/index.tsx","../src/components/commons/inputs/ColorPicker/styles.ts","../src/components/commons/inputs/ColorPicker/types.ts","../src/components/commons/inputs/ColorPicker/index.tsx"],"sourcesContent":["import { styled } from '@hooks/useThemedStyles/types'\n\ninterface Params {\n  size?: string\n  color: string\n  isSelected: boolean\n  borderRadius?: string\n}\n\nexport const DEFAULT_BUTTON_SIZE = '2.25rem'\n\nexport function createColorButtonStyles(props: Params) {\n  const resolvedSize = props.size || DEFAULT_BUTTON_SIZE\n\n  return styled({\n    container: {\n      width: resolvedSize,\n      height: resolvedSize,\n\n      cursor: 'pointer',\n      position: 'relative',\n\n      borderWidth: 1,\n      borderRadius: props.borderRadius || resolvedSize,\n\n      backgroundColor: props.color,\n      borderColor: 'var(--px-border-primary)',\n\n      outlineOffset: '2px',\n      outline: props.isSelected ? '2px solid var(--px-color-primary)' : 'none',\n\n      __rules: {\n        '&:hover': {\n          opacity: '0.85 !important'\n        },\n\n        '&:focus': {\n          outlineOffset: '2px',\n          outline: '2px solid var(--px-color-primary) !important'\n        },\n\n        '&:disabled': {\n          opacity: '0.5 !important',\n          cursor: 'not-allowed !important'\n        }\n      }\n    }\n  })\n}\n","// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { ColorButtonProps } from './types'\n\n// Styles\nimport { createColorButtonStyles } from './styles'\n\nexport const ColorButton: React.FC<ColorButtonProps> = ({\n  color,\n  disabled,\n  onClick,\n  ...rest\n}) => {\n  // Hooks\n  const { styles, classes } = useThemedStyles(\n    { ...rest, color },\n    createColorButtonStyles\n  )\n\n  // Functions\n  function handleClick() {\n    if (disabled) return\n    onClick(color)\n  }\n\n  return (\n    <button\n      type=\"button\"\n      disabled={disabled}\n      style={styles.container}\n      className={classes.container}\n      onClick={handleClick}\n    />\n  )\n}\n","// External Libraries\nimport type React from 'react'\n\n// Components\nimport { Skeleton } from '@components/commons/structure/Skeleton'\n\n// Constants\nimport { DEFAULT_BUTTON_SIZE } from '../ColorButton/styles'\n\ninterface Props {\n  size?: string\n  borderRadius?: string\n}\n\nexport const ColorsLoader: React.FC<Props> = ({ size, borderRadius }) => {\n  // Constants\n  const resolvedSize = size || DEFAULT_BUTTON_SIZE\n  const resolvedRadius = borderRadius || DEFAULT_BUTTON_SIZE\n\n  // Functions\n  function renderContent() {\n    return Array.from({ length: 5 }).map((_, idx) => (\n      <Skeleton\n        key={idx.toString()}\n        width={resolvedSize}\n        height={resolvedSize}\n        borderRadius={resolvedRadius}\n      />\n    ))\n  }\n\n  return <>{renderContent()}</>\n}\n","// Hooks\nimport { styled } from '@hooks/useThemedStyles/types'\n\n// Types\nimport type { ColorPickerProps } from './types'\nimport { DEFAULT_BUTTON_SIZE } from './components/ColorButton/styles'\n\nexport function createColorPickerStyles(props: ColorPickerProps) {\n  const isCustomColor = !props.options.includes(props.value)\n\n  return styled({\n    container: {\n      width: '100%',\n\n      display: 'flex',\n      flexDirection: 'column',\n\n      rowGap: '0.375rem'\n    },\n    content: {\n      width: '100%',\n\n      display: 'flex',\n      alignItems: 'center',\n      flexWrap: 'wrap',\n\n      gap: '0.625rem'\n    },\n    inputWrapper: {\n      width: props.size || DEFAULT_BUTTON_SIZE,\n      height: props.size || DEFAULT_BUTTON_SIZE,\n\n      cursor: 'pointer',\n      overflow: 'hidden',\n      position: 'relative',\n\n      borderWidth: 1,\n      borderColor: 'var(--px-border-primary)',\n      borderRadius: props.borderRadius || DEFAULT_BUTTON_SIZE,\n\n      outlineOffset: '2px',\n      outline:\n        isCustomColor && props.value\n          ? `2px solid var(--px-color-primary)`\n          : 'none',\n\n      background:\n        isCustomColor && props.value\n          ? props.value\n          : 'linear-gradient(90deg, #ff6b6b 0%, #ffd93d 16.66%, #6bff95 33.33%, #6be7ff 50%, #6b83ff 66.66%, #d36bff 83.33%, #ff6bb5 100%)',\n\n      __rules: {\n        '&:focus-within': {\n          outlineOffset: '2px',\n          outline: `2px solid var(--px-color-primary) !important`\n        }\n      }\n    },\n\n    nativeInput: {\n      width: '100%',\n      height: '100%',\n\n      position: 'absolute',\n      inset: 0,\n\n      opacity: 0,\n      border: 'none',\n      cursor: 'pointer'\n    }\n  })\n}\n","import type {\n  StylesOf,\n  TextProps,\n  LayoutProps,\n  MarginProps\n} from '@hooks/useThemedStyles/types'\nimport type { createColorPickerStyles } from './styles'\n\nexport interface ColorPickerProps extends LayoutProps, MarginProps {\n  id?: string\n\n  label: string\n  value: string\n  options: string[]\n\n  size?: string\n  required?: boolean\n  disabled?: boolean\n  hideLabel?: boolean\n  errorMessage?: string\n  canPickCustom?: boolean\n  isLoading?: boolean\n\n  borderRadius?: string\n  requiredColor?: string\n  labelConfig?: TextProps\n  styles?: StylesOf<typeof createColorPickerStyles>\n\n  onChange: (value: string) => void\n}\n","// External Libraries\nimport { useId, useMemo } from 'react'\n\n// Components\nimport { ColorButton } from './components/ColorButton'\nimport { ColorsLoader } from './components/ColorsLoader'\nimport { Label } from '@components/commons/toolkit/Label'\nimport { ErrorMessage } from '@components/commons/toolkit/ErrorMessage'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { ColorPickerProps } from './types'\n\n// Styles\nimport { createColorPickerStyles } from './styles'\n\nexport * as ColorPickerTypes from './types'\n\nexport const ColorPicker: React.FC<ColorPickerProps> = props => {\n  // Constants\n  const reactId = useId()\n  const inputId = useMemo(() => {\n    return props.id || `color-picker-${reactId}`\n  }, [props.id, reactId])\n\n  // Hooks\n  const { styles, classes } = useThemedStyles(props, createColorPickerStyles, {\n    override: props.styles,\n    applyCommonProps: true,\n    commonSlot: 'container'\n  })\n\n  // Functions\n  function handleInputChange(e: React.ChangeEvent<HTMLInputElement>) {\n    props.onChange(e.target.value)\n  }\n\n  function renderColors() {\n    if (props.isLoading) {\n      return (\n        <ColorsLoader size={props.size} borderRadius={props.borderRadius} />\n      )\n    }\n\n    return props.options.map(option => (\n      <ColorButton\n        key={option}\n        color={option}\n        size={props.size}\n        disabled={props.disabled}\n        borderRadius={props.borderRadius}\n        isSelected={props.value === option}\n        onClick={props.onChange}\n      />\n    ))\n  }\n\n  return (\n    <div style={styles.container}>\n      {!props.hideLabel ? (\n        <Label\n          htmlFor={inputId}\n          label={props.label}\n          required={props.required}\n          requiredColor={props.requiredColor}\n          {...props.labelConfig}\n        />\n      ) : null}\n\n      <div id={inputId} style={styles.content}>\n        {renderColors()}\n\n        {props.canPickCustom ? (\n          <div style={styles.inputWrapper} className={classes.inputWrapper}>\n            <input\n              type=\"color\"\n              value={props.value}\n              style={styles.nativeInput}\n              aria-label=\"Pick a custom color\"\n              onChange={handleInputChange}\n            />\n          </div>\n        ) : null}\n      </div>\n\n      {props.errorMessage ? (\n        <ErrorMessage message={props.errorMessage} />\n      ) : null}\n    </div>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"ColorPicker-Dc83Om7x.js","names":["ColorButton: React.FC<ColorButtonProps>","ColorsLoader: React.FC<Props>","ColorPicker: React.FC<ColorPickerProps>"],"sources":["../src/components/commons/inputs/ColorPicker/components/ColorButton/styles.ts","../src/components/commons/inputs/ColorPicker/components/ColorButton/index.tsx","../src/components/commons/inputs/ColorPicker/components/ColorsLoader/index.tsx","../src/components/commons/inputs/ColorPicker/styles.ts","../src/components/commons/inputs/ColorPicker/types.ts","../src/components/commons/inputs/ColorPicker/index.tsx"],"sourcesContent":["import { styled } from '@hooks/useThemedStyles/types'\n\ninterface Params {\n  size?: string\n  color: string\n  isSelected: boolean\n  borderRadius?: string\n}\n\nexport const DEFAULT_BUTTON_SIZE = '2.25rem'\n\nexport function createColorButtonStyles(props: Params) {\n  const resolvedSize = props.size || DEFAULT_BUTTON_SIZE\n\n  return styled({\n    container: {\n      width: resolvedSize,\n      height: resolvedSize,\n\n      cursor: 'pointer',\n      position: 'relative',\n\n      borderWidth: 1,\n      borderRadius: props.borderRadius || resolvedSize,\n\n      backgroundColor: props.color,\n      borderColor: 'var(--px-border-primary)',\n\n      outlineOffset: '2px',\n      outline: props.isSelected ? '2px solid var(--px-color-primary)' : 'none',\n\n      __rules: {\n        '&:hover': {\n          opacity: '0.85 !important'\n        },\n\n        '&:focus': {\n          outlineOffset: '2px',\n          outline: '2px solid var(--px-color-primary) !important'\n        },\n\n        '&:disabled': {\n          opacity: '0.5 !important',\n          cursor: 'not-allowed !important'\n        }\n      }\n    }\n  })\n}\n","// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { ColorButtonProps } from './types'\n\n// Styles\nimport { createColorButtonStyles } from './styles'\n\nexport const ColorButton: React.FC<ColorButtonProps> = ({\n  color,\n  disabled,\n  onClick,\n  ...rest\n}) => {\n  // Hooks\n  const { styles, classes } = useThemedStyles(\n    { ...rest, color },\n    createColorButtonStyles\n  )\n\n  // Functions\n  function handleClick() {\n    if (disabled) return\n    onClick(color)\n  }\n\n  return (\n    <button\n      type=\"button\"\n      disabled={disabled}\n      style={styles.container}\n      className={classes.container}\n      onClick={handleClick}\n    />\n  )\n}\n","// External Libraries\nimport type React from 'react'\n\n// Components\nimport { Skeleton } from '@components/commons/structure/Skeleton'\n\n// Constants\nimport { DEFAULT_BUTTON_SIZE } from '../ColorButton/styles'\n\ninterface Props {\n  size?: string\n  borderRadius?: string\n}\n\nexport const ColorsLoader: React.FC<Props> = ({ size, borderRadius }) => {\n  // Constants\n  const resolvedSize = size || DEFAULT_BUTTON_SIZE\n  const resolvedRadius = borderRadius || DEFAULT_BUTTON_SIZE\n\n  // Functions\n  function renderContent() {\n    return Array.from({ length: 5 }).map((_, idx) => (\n      <Skeleton\n        key={idx.toString()}\n        width={resolvedSize}\n        height={resolvedSize}\n        borderRadius={resolvedRadius}\n      />\n    ))\n  }\n\n  return <>{renderContent()}</>\n}\n","// Hooks\nimport { styled } from '@hooks/useThemedStyles/types'\n\n// Types\nimport type { ColorPickerProps } from './types'\nimport { DEFAULT_BUTTON_SIZE } from './components/ColorButton/styles'\n\nexport function createColorPickerStyles(props: ColorPickerProps) {\n  const isCustomColor = !props.options.includes(props.value)\n\n  return styled({\n    container: {\n      width: '100%',\n\n      display: 'flex',\n      flexDirection: 'column',\n\n      rowGap: '0.375rem'\n    },\n    content: {\n      width: '100%',\n\n      display: 'flex',\n      alignItems: 'center',\n      flexWrap: 'wrap',\n\n      gap: '0.625rem'\n    },\n    inputWrapper: {\n      width: props.size || DEFAULT_BUTTON_SIZE,\n      height: props.size || DEFAULT_BUTTON_SIZE,\n\n      cursor: 'pointer',\n      overflow: 'hidden',\n      position: 'relative',\n\n      borderWidth: 1,\n      borderColor: 'var(--px-border-primary)',\n      borderRadius: props.borderRadius || DEFAULT_BUTTON_SIZE,\n\n      outlineOffset: '2px',\n      outline:\n        isCustomColor && props.value\n          ? `2px solid var(--px-color-primary)`\n          : 'none',\n\n      background:\n        isCustomColor && props.value\n          ? props.value\n          : 'linear-gradient(90deg, #ff6b6b 0%, #ffd93d 16.66%, #6bff95 33.33%, #6be7ff 50%, #6b83ff 66.66%, #d36bff 83.33%, #ff6bb5 100%)',\n\n      __rules: {\n        '&:focus-within': {\n          outlineOffset: '2px',\n          outline: `2px solid var(--px-color-primary) !important`\n        }\n      }\n    },\n\n    nativeInput: {\n      width: '100%',\n      height: '100%',\n\n      position: 'absolute',\n      inset: 0,\n\n      opacity: 0,\n      border: 'none',\n      cursor: 'pointer'\n    }\n  })\n}\n","import type {\n  TextProps,\n  LayoutProps,\n  MarginProps,\n  TypeStyles\n} from '@hooks/useThemedStyles/types'\nimport type { createColorPickerStyles } from './styles'\n\nexport interface ColorPickerProps extends LayoutProps, MarginProps {\n  id?: string\n\n  label: string\n  value: string\n  options: string[]\n\n  size?: string\n  required?: boolean\n  disabled?: boolean\n  hideLabel?: boolean\n  errorMessage?: string\n  canPickCustom?: boolean\n  isLoading?: boolean\n\n  borderRadius?: string\n  requiredColor?: string\n  labelConfig?: TextProps\n  styles?: TypeStyles<typeof createColorPickerStyles>\n\n  onChange: (value: string) => void\n}\n","// External Libraries\nimport { useId, useMemo } from 'react'\n\n// Components\nimport { ColorButton } from './components/ColorButton'\nimport { ColorsLoader } from './components/ColorsLoader'\nimport { Label } from '@components/commons/toolkit/Label'\nimport { ErrorMessage } from '@components/commons/toolkit/ErrorMessage'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { ColorPickerProps } from './types'\n\n// Styles\nimport { createColorPickerStyles } from './styles'\n\nexport * as ColorPickerTypes from './types'\n\nexport const ColorPicker: React.FC<ColorPickerProps> = props => {\n  // Constants\n  const reactId = useId()\n  const inputId = useMemo(() => {\n    return props.id || `color-picker-${reactId}`\n  }, [props.id, reactId])\n\n  // Hooks\n  const { styles, classes } = useThemedStyles(props, createColorPickerStyles, {\n    override: props.styles,\n    applyCommonProps: true,\n    commonSlot: 'container'\n  })\n\n  // Functions\n  function handleInputChange(e: React.ChangeEvent<HTMLInputElement>) {\n    props.onChange(e.target.value)\n  }\n\n  function renderColors() {\n    if (props.isLoading) {\n      return (\n        <ColorsLoader size={props.size} borderRadius={props.borderRadius} />\n      )\n    }\n\n    return props.options.map(option => (\n      <ColorButton\n        key={option}\n        color={option}\n        size={props.size}\n        disabled={props.disabled}\n        borderRadius={props.borderRadius}\n        isSelected={props.value === option}\n        onClick={props.onChange}\n      />\n    ))\n  }\n\n  return (\n    <div style={styles.container}>\n      {!props.hideLabel ? (\n        <Label\n          htmlFor={inputId}\n          label={props.label}\n          required={props.required}\n          requiredColor={props.requiredColor}\n          {...props.labelConfig}\n        />\n      ) : null}\n\n      <div id={inputId} style={styles.content}>\n        {renderColors()}\n\n        {props.canPickCustom ? (\n          <div style={styles.inputWrapper} className={classes.inputWrapper}>\n            <input\n              type=\"color\"\n              value={props.value}\n              style={styles.nativeInput}\n              aria-label=\"Pick a custom color\"\n              onChange={handleInputChange}\n            />\n          </div>\n        ) : null}\n      </div>\n\n      {props.errorMessage ? (\n        <ErrorMessage message={props.errorMessage} />\n      ) : null}\n    </div>\n  )\n}\n"],"mappings":"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"}

package/dist/ContextMenu-CRd1Fgl0.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContextMenu-CRd1Fgl0.js","names":["floatingOptions: FloatingOptions","DividerRow: React.FC"],"sources":["../src/components/commons/toolkit/ContextMenu/components/Menu/components/ItemRow/styles.ts","../src/components/commons/toolkit/ContextMenu/components/Menu/components/ItemRow/index.tsx","../src/components/commons/toolkit/ContextMenu/components/Menu/components/CustomRow/styles.ts","../src/components/commons/toolkit/ContextMenu/components/Menu/components/CustomRow/index.tsx","../src/components/commons/toolkit/ContextMenu/components/Menu/components/DividerRow/styles.ts","../src/components/commons/toolkit/ContextMenu/components/Menu/components/DividerRow/index.tsx","../src/components/commons/toolkit/ContextMenu/components/Menu/styles.ts","../src/components/commons/toolkit/ContextMenu/components/Menu/index.tsx","../src/components/commons/toolkit/ContextMenu/utils/normalizeMenuOptions.ts","../src/components/commons/toolkit/ContextMenu/types.ts","../src/components/commons/toolkit/ContextMenu/styles.ts","../src/components/commons/toolkit/ContextMenu/index.tsx"],"sourcesContent":["// Types\nimport type { ItemRowProps } from './types'\nimport { styled } from '@hooks/useThemedStyles/types'\n\nexport function createItemRowStyles<T>({ item, active }: ItemRowProps<T>) {\n  return styled({\n    button: {\n      width: '100%',\n      textAlign: 'left',\n\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'space-between',\n      gap: '0.5rem',\n\n      borderRadius: '0.5rem',\n\n      paddingInline: '0.5rem',\n      paddingBlock: '0.25rem',\n\n      userSelect: 'none',\n\n      backgroundColor:\n        item.disabled || active\n          ? 'var(--px-background-card-hover)'\n          : 'transparent',\n\n      __rules: {\n        '&:hover': {\n          transition: 'all 200ms',\n          backgroundColor: 'var(--px-background-card-hover) !important'\n        }\n      }\n    },\n    containerIcon: {\n      width: '1rem',\n      flexShrink: 0,\n      display: 'flex',\n      alignItems: 'center'\n    }\n  })\n}\n","// External Libraries\nimport { type MouseEvent, useEffect, useRef, useState } from 'react'\n\n// Components\nimport { Menu } from '../..'\nimport { Switch } from '@components/commons/toolkit/Switch'\nimport { Typography } from '@components/commons/toolkit/Typography'\nimport { BasePopover } from '@components/commons/structure/BasePopover'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { ItemRowProps } from './types'\nimport type { FloatingOptions } from '@hooks/useFloating/types'\n\n// Styles\nimport { createItemRowStyles } from './styles'\n\nexport const ItemRow = <T extends string>(props: ItemRowProps<T>) => {\n  const { item, depth, width, onHover, onSelect } = props\n  const isGroup = item.type === 'group'\n\n  const [subOpen, setSubOpen] = useState(false)\n  const closeTimer = useRef<number | null>(null)\n  const anchorRef = useRef<HTMLButtonElement | null>(null)\n  const floatingOptions: FloatingOptions = {\n    offsetX: 10,\n    offsetY: -4,\n    strategy: 'fixed',\n    keepInViewport: true,\n    placement: 'right-start'\n  }\n\n  // Hooks\n  const { styles, classes } = useThemedStyles(props, createItemRowStyles, {\n    applyCommonProps: true,\n    override: props.styles,\n    pick: p => [p.active]\n  })\n\n  // Functions\n  function handleMouseEnter() {\n    onHover(item.id, isGroup)\n\n    if (!isGroup) return\n    clearTimer()\n    setSubOpen(true)\n  }\n\n  function handleMouseLeave() {\n    if (!isGroup) return\n    scheduleClose()\n  }\n\n  function handleClick(e?: MouseEvent<HTMLButtonElement>) {\n    e?.stopPropagation()\n    e?.preventDefault()\n    if (isGroup) return\n    onSelect(item)\n  }\n\n  function clearTimer() {\n    if (closeTimer.current) window.clearTimeout(closeTimer.current)\n    closeTimer.current = null\n  }\n\n  function scheduleClose() {\n    clearTimer()\n    closeTimer.current = window.setTimeout(() => setSubOpen(false), 150)\n  }\n\n  function renderMenuType() {\n    if (item.type === 'switch') return <Switch checked={item.checked} />\n    else {\n      return (\n        <>\n          {item.shortcut ? <span>{item.shortcut}</span> : null}\n\n          {isGroup ? <span>›</span> : null}\n        </>\n      )\n    }\n  }\n\n  // UseEffects\n  // biome-ignore lint/correctness/useExhaustiveDependencies: <Not needed>\n  useEffect(() => {\n    return () => clearTimer()\n  }, [])\n\n  return (\n    <>\n      <button\n        ref={anchorRef}\n        type=\"button\"\n        role=\"menuitem\"\n        style={styles.button}\n        className={classes.button}\n        disabled={!!item.disabled}\n        aria-disabled={item.disabled || undefined}\n        onClick={handleClick}\n        onMouseEnter={handleMouseEnter}\n        onMouseLeave={handleMouseLeave}\n      >\n        {item.icon ? (\n          <span style={styles.containerIcon}>{item.icon ?? null}</span>\n        ) : null}\n\n        <Typography variant=\"b2\">{item.label}</Typography>\n\n        {renderMenuType()}\n      </button>\n\n      {isGroup ? (\n        <BasePopover\n          // biome-ignore lint/suspicious/noExplicitAny: <Not needed>\n          anchorRef={anchorRef as any}\n          open={subOpen}\n          closeOnEscape={false}\n          closeOnOutsideClick={false}\n          floatingOptions={floatingOptions}\n          dismissScope={props.dismissScope}\n          onMouseEnter={() => {\n            clearTimer()\n            setSubOpen(true)\n          }}\n          onMouseLeave={() => {\n            scheduleClose()\n          }}\n          onOpenChange={setSubOpen}\n        >\n          <Menu\n            width={width}\n            depth={depth + 1}\n            activeId={undefined}\n            items={item.children}\n            onHover={onHover}\n            onSelect={onSelect}\n          />\n        </BasePopover>\n      ) : null}\n    </>\n  )\n}\n","// Types\nimport { styled } from '@hooks/useThemedStyles/types'\n\nexport function createCustomRowStyles() {\n  return styled({\n    container: {\n      padding: '0.25rem'\n    }\n  })\n}\n","// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { CustomRowProps } from './types'\n\n// Styles\nimport { createCustomRowStyles } from './styles'\n\nexport const CustomRow = <T extends string>(props: CustomRowProps<T>) => {\n  const { item, close } = props\n\n  // Hooks\n  const { styles } = useThemedStyles(props, createCustomRowStyles)\n\n  return <div style={styles.container}>{item.render({ close })}</div>\n}\n","// Types\nimport { styled } from '@hooks/useThemedStyles/types'\n\nexport function createDividerRowStyles() {\n  return styled({\n    container: {\n      border: 0,\n      display: 'flex',\n      marginBlock: '0.1rem',\n      borderTop: '1px solid var(--px-border-primary)'\n    }\n  })\n}\n","// External Libraries\nimport type React from 'react'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Styles\nimport { createDividerRowStyles } from './styles'\n\nexport const DividerRow: React.FC = props => {\n  // Hooks\n  const { styles } = useThemedStyles(props, createDividerRowStyles)\n\n  return <hr style={styles.container} />\n}\n","// Types\nimport type { MenuProps } from './types'\nimport { styled } from '@hooks/useThemedStyles/types'\n\nexport function createMenuStyles<T>({ width }: MenuProps<T>) {\n  return styled({\n    container: {\n      width,\n      flexShrink: 0\n    }\n  })\n}\n","// Components\nimport { ItemRow } from './components/ItemRow'\nimport { CustomRow } from './components/CustomRow'\nimport { DividerRow } from './components/DividerRow'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { MenuProps } from './types'\n\n// Styles\nimport { createMenuStyles } from './styles'\n\nexport const Menu = <T extends string>(props: MenuProps<T>) => {\n  const { items, depth, activeId, width = 240, onHover, onSelect } = props\n\n  const { styles } = useThemedStyles(props, createMenuStyles, {\n    applyCommonProps: true,\n    override: props.styles,\n    pick: p => [p.items, p.width, p.activeId, p.onSelect, p.onHover]\n  })\n\n  // Functions\n  function renderItems() {\n    return items.map(item => {\n      if (item.type === 'divider') return <DividerRow key={item.id} />\n      if (item.type === 'custom')\n        return <CustomRow key={item.id} item={item} close={close} />\n\n      return (\n        <ItemRow\n          key={item.id}\n          item={item}\n          depth={depth}\n          width={width}\n          active={activeId === item.id}\n          dismissScope={props.dismissScope}\n          onHover={onHover}\n          onSelect={onSelect}\n        />\n      )\n    })\n  }\n\n  return (\n    <div style={styles.container} role={depth === 0 ? 'menu' : undefined}>\n      {renderItems()}\n    </div>\n  )\n}\n","// Types\nimport type { MenuOption, MenuOptionInput } from '../types'\n\nexport function normalizeMenuOptions<T>(\n  options: MenuOptionInput<T>[]\n): MenuOption<T>[] {\n  return options.map(opt => {\n    if ('children' in opt) {\n      return {\n        id: opt.id,\n        label: opt.label,\n        icon: opt.icon,\n        shortcut: opt.shortcut,\n        disabled: opt.disabled,\n        className: opt.className,\n        type: 'group' as const,\n        children: normalizeMenuOptions(opt.children)\n      }\n    }\n    return opt as MenuOption<T>\n  })\n}\n","// External Libraries\nimport type { ReactNode } from 'react'\n\n// Hooks\nimport type { Placement } from '@hooks/useFloating/types'\n\n// Styles\nimport type { createContextMenuStyles } from './styles'\n\ninterface BaseOption<T> {\n  id: T\n  icon?: ReactNode\n  label?: ReactNode\n  disabled?: boolean\n  className?: string\n  shortcut?: ReactNode\n  closeOnSelect?: boolean\n}\n\nexport type MenuActionOption<T> = BaseOption<T> & {\n  type: 'action'\n  closeOnSelect?: boolean\n}\n\nexport type MenuSwitchOption<T> = BaseOption<T> & {\n  type: 'switch'\n  checked: boolean\n  closeOnSelect?: boolean\n  onCheckedChange: (next: boolean) => void\n}\n\nexport interface MenuDividerOption<T> {\n  id: T\n  type: 'divider'\n}\n\nexport interface MenuCustomOption<T> extends BaseOption<T> {\n  type: 'custom'\n  render: (ctx: { close: () => void }) => ReactNode\n}\n\nexport interface MenuGroupInput<T> extends BaseOption<T> {\n  type?: 'group'\n  children: MenuOptionInput<T>[]\n}\n\nexport type MenuOptionInput<T> =\n  | MenuGroupInput<T>\n  | MenuActionOption<T>\n  | MenuSwitchOption<T>\n  | MenuCustomOption<T>\n  | MenuDividerOption<T>\n\nexport interface MenuGroup<T> extends BaseOption<T> {\n  type: 'group'\n  children: MenuOption<T>[]\n}\n\nexport type MenuOption<T> =\n  | MenuGroup<T>\n  | MenuActionOption<T>\n  | MenuSwitchOption<T>\n  | MenuCustomOption<T>\n  | MenuDividerOption<T>\n\nexport interface ContextMenuProps<T> {\n  trigger: ReactNode\n  options: MenuOptionInput<T>[]\n\n  offsetX?: number\n  offsetY?: number\n  columnWidth?: number\n  placement?: Placement\n\n  onSelect: (actionId: T) => void\n\n  styles?: Partial<ReturnType<typeof createContextMenuStyles>>\n}\n","// Types\nimport type { ContextMenuProps } from './types'\nimport { styled } from '@hooks/useThemedStyles/types'\n\nexport function createContextMenuStyles<T>(_props: ContextMenuProps<T>) {\n  return styled({\n    trigger: {\n      width: 'fit-content',\n      height: 'fit-content',\n\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      cursor: 'pointer'\n    }\n  })\n}\n","// External Libraries\nimport { useMemo, useRef, useState } from 'react'\n\n// Components\nimport { Menu } from './components/Menu'\nimport { BasePopover } from '@components/commons/structure/BasePopover'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Utils\nimport { normalizeMenuOptions } from './utils'\n\n// Types\nimport type { ContextMenuProps, MenuOption } from './types'\nimport type { PopoverTriggerRenderProps } from '../Popover/types'\n\nexport * as ContextMenuTypes from './types'\n\n// Styles\nimport { createContextMenuStyles } from './styles'\n\nexport const ContextMenu = <T extends string>(props: ContextMenuProps<T>) => {\n  const {\n    trigger,\n    options,\n    offsetX = 0,\n    offsetY = 8,\n    columnWidth = 240,\n    placement = 'bottom-start',\n    onSelect\n  } = props\n\n  // Refs\n  const scopeRef = useRef<string>(makeScopeId())\n\n  // States\n  const [open, setOpen] = useState(false)\n\n  const items = useMemo(() => normalizeMenuOptions(options), [options])\n  const floatingOptions = useMemo(\n    () => ({\n      offsetX,\n      offsetY,\n      placement\n    }),\n    [offsetX, offsetY, placement]\n  )\n\n  // Hooks\n  const { styles } = useThemedStyles(props, createContextMenuStyles, {\n    applyCommonProps: true,\n    override: props.styles,\n    pick: p => [p.options, p.columnWidth, p.placement]\n  })\n\n  // Functions\n  function makeScopeId() {\n    if (typeof crypto !== 'undefined' && crypto.randomUUID)\n      return crypto.randomUUID()\n    return `scope_${Math.random().toString(16).slice(2)}`\n  }\n\n  function handleSelect(item: MenuOption<T>, close: () => void) {\n    if (item.type === 'action') {\n      onSelect(item.id)\n      if (item.closeOnSelect ?? true) close()\n    }\n\n    if (item.type === 'switch') {\n      item.onCheckedChange(!item.checked)\n      if (item.closeOnSelect ?? false) close()\n    }\n  }\n\n  function renderTrigger({\n    ref,\n    ariaExpanded,\n    onClick\n  }: PopoverTriggerRenderProps) {\n    return (\n      // biome-ignore lint/a11y/noStaticElementInteractions: <Not needed>\n      // biome-ignore lint/a11y/useKeyWithClickEvents: <Not needed>\n      <span\n        ref={ref as any}\n        style={styles.trigger}\n        aria-expanded={ariaExpanded}\n        onClick={onClick}\n      >\n        {trigger}\n      </span>\n    )\n  }\n\n  return (\n    <BasePopover\n      open={open}\n      minWidth=\"fit-content\"\n      floatingOptions={floatingOptions}\n      dismissScope={scopeRef.current}\n      trigger={renderTrigger}\n      onOpenChange={setOpen}\n    >\n      <Menu\n        depth={0}\n        items={items}\n        onHover={() => {}}\n        width={columnWidth}\n        dismissScope={scopeRef.current}\n        onSelect={item =>\n          handleSelect(item as MenuOption<T>, () => setOpen(false))\n        }\n      />\n    </BasePopover>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"ContextMenu-CRd1Fgl0.js","names":["floatingOptions: FloatingOptions","DividerRow: React.FC"],"sources":["../src/components/commons/toolkit/ContextMenu/components/Menu/components/ItemRow/styles.ts","../src/components/commons/toolkit/ContextMenu/components/Menu/components/ItemRow/index.tsx","../src/components/commons/toolkit/ContextMenu/components/Menu/components/CustomRow/styles.ts","../src/components/commons/toolkit/ContextMenu/components/Menu/components/CustomRow/index.tsx","../src/components/commons/toolkit/ContextMenu/components/Menu/components/DividerRow/styles.ts","../src/components/commons/toolkit/ContextMenu/components/Menu/components/DividerRow/index.tsx","../src/components/commons/toolkit/ContextMenu/components/Menu/styles.ts","../src/components/commons/toolkit/ContextMenu/components/Menu/index.tsx","../src/components/commons/toolkit/ContextMenu/utils/normalizeMenuOptions.ts","../src/components/commons/toolkit/ContextMenu/types.ts","../src/components/commons/toolkit/ContextMenu/styles.ts","../src/components/commons/toolkit/ContextMenu/index.tsx"],"sourcesContent":["// Types\nimport type { ItemRowProps } from './types'\nimport { styled } from '@hooks/useThemedStyles/types'\n\nexport function createItemRowStyles<T>({ item, active }: ItemRowProps<T>) {\n  return styled({\n    button: {\n      width: '100%',\n      textAlign: 'left',\n\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'space-between',\n      gap: '0.5rem',\n\n      borderRadius: '0.5rem',\n\n      paddingInline: '0.5rem',\n      paddingBlock: '0.25rem',\n\n      userSelect: 'none',\n\n      backgroundColor:\n        item.disabled || active\n          ? 'var(--px-background-card-hover)'\n          : 'transparent',\n\n      __rules: {\n        '&:hover': {\n          transition: 'all 200ms',\n          backgroundColor: 'var(--px-background-card-hover) !important'\n        }\n      }\n    },\n    containerIcon: {\n      width: '1rem',\n      flexShrink: 0,\n      display: 'flex',\n      alignItems: 'center'\n    }\n  })\n}\n","// External Libraries\nimport { type MouseEvent, useEffect, useRef, useState } from 'react'\n\n// Components\nimport { Menu } from '../..'\nimport { Switch } from '@components/commons/toolkit/Switch'\nimport { Typography } from '@components/commons/toolkit/Typography'\nimport { BasePopover } from '@components/commons/structure/BasePopover'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { ItemRowProps } from './types'\nimport type { FloatingOptions } from '@hooks/useFloating/types'\n\n// Styles\nimport { createItemRowStyles } from './styles'\n\nexport const ItemRow = <T extends string>(props: ItemRowProps<T>) => {\n  const { item, depth, width, onHover, onSelect } = props\n  const isGroup = item.type === 'group'\n\n  const [subOpen, setSubOpen] = useState(false)\n  const closeTimer = useRef<number | null>(null)\n  const anchorRef = useRef<HTMLButtonElement | null>(null)\n  const floatingOptions: FloatingOptions = {\n    offsetX: 10,\n    offsetY: -4,\n    strategy: 'fixed',\n    keepInViewport: true,\n    placement: 'right-start'\n  }\n\n  // Hooks\n  const { styles, classes } = useThemedStyles(props, createItemRowStyles, {\n    applyCommonProps: true,\n    override: props.styles,\n    pick: p => [p.active]\n  })\n\n  // Functions\n  function handleMouseEnter() {\n    onHover(item.id, isGroup)\n\n    if (!isGroup) return\n    clearTimer()\n    setSubOpen(true)\n  }\n\n  function handleMouseLeave() {\n    if (!isGroup) return\n    scheduleClose()\n  }\n\n  function handleClick(e?: MouseEvent<HTMLButtonElement>) {\n    e?.stopPropagation()\n    e?.preventDefault()\n    if (isGroup) return\n    onSelect(item)\n  }\n\n  function clearTimer() {\n    if (closeTimer.current) window.clearTimeout(closeTimer.current)\n    closeTimer.current = null\n  }\n\n  function scheduleClose() {\n    clearTimer()\n    closeTimer.current = window.setTimeout(() => setSubOpen(false), 150)\n  }\n\n  function renderMenuType() {\n    if (item.type === 'switch') return <Switch checked={item.checked} />\n    else {\n      return (\n        <>\n          {item.shortcut ? <span>{item.shortcut}</span> : null}\n\n          {isGroup ? <span>›</span> : null}\n        </>\n      )\n    }\n  }\n\n  // UseEffects\n  // biome-ignore lint/correctness/useExhaustiveDependencies: <Not needed>\n  useEffect(() => {\n    return () => clearTimer()\n  }, [])\n\n  return (\n    <>\n      <button\n        ref={anchorRef}\n        type=\"button\"\n        role=\"menuitem\"\n        style={styles.button}\n        className={classes.button}\n        disabled={!!item.disabled}\n        aria-disabled={item.disabled || undefined}\n        onClick={handleClick}\n        onMouseEnter={handleMouseEnter}\n        onMouseLeave={handleMouseLeave}\n      >\n        {item.icon ? (\n          <span style={styles.containerIcon}>{item.icon ?? null}</span>\n        ) : null}\n\n        <Typography variant=\"b2\">{item.label}</Typography>\n\n        {renderMenuType()}\n      </button>\n\n      {isGroup ? (\n        <BasePopover\n          // biome-ignore lint/suspicious/noExplicitAny: <Not needed>\n          anchorRef={anchorRef as any}\n          open={subOpen}\n          closeOnEscape={false}\n          closeOnOutsideClick={false}\n          floatingOptions={floatingOptions}\n          dismissScope={props.dismissScope}\n          onMouseEnter={() => {\n            clearTimer()\n            setSubOpen(true)\n          }}\n          onMouseLeave={() => {\n            scheduleClose()\n          }}\n          onOpenChange={setSubOpen}\n        >\n          <Menu\n            width={width}\n            depth={depth + 1}\n            activeId={undefined}\n            items={item.children}\n            onHover={onHover}\n            onSelect={onSelect}\n          />\n        </BasePopover>\n      ) : null}\n    </>\n  )\n}\n","// Types\nimport { styled } from '@hooks/useThemedStyles/types'\n\nexport function createCustomRowStyles() {\n  return styled({\n    container: {\n      padding: '0.25rem'\n    }\n  })\n}\n","// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { CustomRowProps } from './types'\n\n// Styles\nimport { createCustomRowStyles } from './styles'\n\nexport const CustomRow = <T extends string>(props: CustomRowProps<T>) => {\n  const { item, close } = props\n\n  // Hooks\n  const { styles } = useThemedStyles(props, createCustomRowStyles)\n\n  return <div style={styles.container}>{item.render({ close })}</div>\n}\n","// Types\nimport { styled } from '@hooks/useThemedStyles/types'\n\nexport function createDividerRowStyles() {\n  return styled({\n    container: {\n      border: 0,\n      display: 'flex',\n      marginBlock: '0.1rem',\n      borderTop: '1px solid var(--px-border-primary)'\n    }\n  })\n}\n","// External Libraries\nimport type React from 'react'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Styles\nimport { createDividerRowStyles } from './styles'\n\nexport const DividerRow: React.FC = props => {\n  // Hooks\n  const { styles } = useThemedStyles(props, createDividerRowStyles)\n\n  return <hr style={styles.container} />\n}\n","// Types\nimport type { MenuProps } from './types'\nimport { styled } from '@hooks/useThemedStyles/types'\n\nexport function createMenuStyles<T>({ width }: MenuProps<T>) {\n  return styled({\n    container: {\n      width,\n      flexShrink: 0\n    }\n  })\n}\n","// Components\nimport { ItemRow } from './components/ItemRow'\nimport { CustomRow } from './components/CustomRow'\nimport { DividerRow } from './components/DividerRow'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { MenuProps } from './types'\n\n// Styles\nimport { createMenuStyles } from './styles'\n\nexport const Menu = <T extends string>(props: MenuProps<T>) => {\n  const { items, depth, activeId, width = 240, onHover, onSelect } = props\n\n  const { styles } = useThemedStyles(props, createMenuStyles, {\n    applyCommonProps: true,\n    override: props.styles,\n    pick: p => [p.items, p.width, p.activeId, p.onSelect, p.onHover]\n  })\n\n  // Functions\n  function renderItems() {\n    return items.map(item => {\n      if (item.type === 'divider') return <DividerRow key={item.id} />\n      if (item.type === 'custom')\n        return <CustomRow key={item.id} item={item} close={close} />\n\n      return (\n        <ItemRow\n          key={item.id}\n          item={item}\n          depth={depth}\n          width={width}\n          active={activeId === item.id}\n          dismissScope={props.dismissScope}\n          onHover={onHover}\n          onSelect={onSelect}\n        />\n      )\n    })\n  }\n\n  return (\n    <div style={styles.container} role={depth === 0 ? 'menu' : undefined}>\n      {renderItems()}\n    </div>\n  )\n}\n","// Types\nimport type { MenuOption, MenuOptionInput } from '../types'\n\nexport function normalizeMenuOptions<T>(\n  options: MenuOptionInput<T>[]\n): MenuOption<T>[] {\n  return options.map(opt => {\n    if ('children' in opt) {\n      return {\n        id: opt.id,\n        label: opt.label,\n        icon: opt.icon,\n        shortcut: opt.shortcut,\n        disabled: opt.disabled,\n        className: opt.className,\n        type: 'group' as const,\n        children: normalizeMenuOptions(opt.children)\n      }\n    }\n    return opt as MenuOption<T>\n  })\n}\n","// External Libraries\nimport type { ReactNode } from 'react'\n\n// Hooks\nimport type { Placement } from '@hooks/useFloating/types'\n\n// Styles\nimport type { createContextMenuStyles } from './styles'\n\n// Types\nimport type { TypeStyles } from '@hooks/useThemedStyles/types'\n\ninterface BaseOption<T> {\n  id: T\n  icon?: ReactNode\n  label?: ReactNode\n  disabled?: boolean\n  className?: string\n  shortcut?: ReactNode\n  closeOnSelect?: boolean\n}\n\nexport type MenuActionOption<T> = BaseOption<T> & {\n  type: 'action'\n  closeOnSelect?: boolean\n}\n\nexport type MenuSwitchOption<T> = BaseOption<T> & {\n  type: 'switch'\n  checked: boolean\n  closeOnSelect?: boolean\n  onCheckedChange: (next: boolean) => void\n}\n\nexport interface MenuDividerOption<T> {\n  id: T\n  type: 'divider'\n}\n\nexport interface MenuCustomOption<T> extends BaseOption<T> {\n  type: 'custom'\n  render: (ctx: { close: () => void }) => ReactNode\n}\n\nexport interface MenuGroupInput<T> extends BaseOption<T> {\n  type?: 'group'\n  children: MenuOptionInput<T>[]\n}\n\nexport type MenuOptionInput<T> =\n  | MenuGroupInput<T>\n  | MenuActionOption<T>\n  | MenuSwitchOption<T>\n  | MenuCustomOption<T>\n  | MenuDividerOption<T>\n\nexport interface MenuGroup<T> extends BaseOption<T> {\n  type: 'group'\n  children: MenuOption<T>[]\n}\n\nexport type MenuOption<T> =\n  | MenuGroup<T>\n  | MenuActionOption<T>\n  | MenuSwitchOption<T>\n  | MenuCustomOption<T>\n  | MenuDividerOption<T>\n\nexport interface ContextMenuProps<T> {\n  trigger: ReactNode\n  options: MenuOptionInput<T>[]\n\n  offsetX?: number\n  offsetY?: number\n  columnWidth?: number\n  placement?: Placement\n\n  onSelect: (actionId: T) => void\n\n  styles?: TypeStyles<typeof createContextMenuStyles>\n}\n","// Types\nimport type { ContextMenuProps } from './types'\nimport { styled } from '@hooks/useThemedStyles/types'\n\nexport function createContextMenuStyles<T>(_props: ContextMenuProps<T>) {\n  return styled({\n    trigger: {\n      width: 'fit-content',\n      height: 'fit-content',\n\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      cursor: 'pointer'\n    }\n  })\n}\n","// External Libraries\nimport { useMemo, useRef, useState } from 'react'\n\n// Components\nimport { Menu } from './components/Menu'\nimport { BasePopover } from '@components/commons/structure/BasePopover'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Utils\nimport { normalizeMenuOptions } from './utils'\n\n// Types\nimport type { ContextMenuProps, MenuOption } from './types'\nimport type { PopoverTriggerRenderProps } from '../Popover/types'\n\nexport * as ContextMenuTypes from './types'\n\n// Styles\nimport { createContextMenuStyles } from './styles'\n\nexport const ContextMenu = <T extends string>(props: ContextMenuProps<T>) => {\n  const {\n    trigger,\n    options,\n    offsetX = 0,\n    offsetY = 8,\n    columnWidth = 240,\n    placement = 'bottom-start',\n    onSelect\n  } = props\n\n  // Refs\n  const scopeRef = useRef<string>(makeScopeId())\n\n  // States\n  const [open, setOpen] = useState(false)\n\n  const items = useMemo(() => normalizeMenuOptions(options), [options])\n  const floatingOptions = useMemo(\n    () => ({\n      offsetX,\n      offsetY,\n      placement\n    }),\n    [offsetX, offsetY, placement]\n  )\n\n  // Hooks\n  const { styles } = useThemedStyles(props, createContextMenuStyles, {\n    applyCommonProps: true,\n    override: props.styles,\n    pick: p => [p.options, p.columnWidth, p.placement]\n  })\n\n  // Functions\n  function makeScopeId() {\n    if (typeof crypto !== 'undefined' && crypto.randomUUID)\n      return crypto.randomUUID()\n    return `scope_${Math.random().toString(16).slice(2)}`\n  }\n\n  function handleSelect(item: MenuOption<T>, close: () => void) {\n    if (item.type === 'action') {\n      onSelect(item.id)\n      if (item.closeOnSelect ?? true) close()\n    }\n\n    if (item.type === 'switch') {\n      item.onCheckedChange(!item.checked)\n      if (item.closeOnSelect ?? false) close()\n    }\n  }\n\n  function renderTrigger({\n    ref,\n    ariaExpanded,\n    onClick\n  }: PopoverTriggerRenderProps) {\n    return (\n      // biome-ignore lint/a11y/noStaticElementInteractions: <Not needed>\n      // biome-ignore lint/a11y/useKeyWithClickEvents: <Not needed>\n      <span\n        ref={ref as any}\n        style={styles.trigger}\n        aria-expanded={ariaExpanded}\n        onClick={onClick}\n      >\n        {trigger}\n      </span>\n    )\n  }\n\n  return (\n    <BasePopover\n      open={open}\n      minWidth=\"fit-content\"\n      floatingOptions={floatingOptions}\n      dismissScope={scopeRef.current}\n      trigger={renderTrigger}\n      onOpenChange={setOpen}\n    >\n      <Menu\n        depth={0}\n        items={items}\n        onHover={() => {}}\n        width={columnWidth}\n        dismissScope={scopeRef.current}\n        onSelect={item =>\n          handleSelect(item as MenuOption<T>, () => setOpen(false))\n        }\n      />\n    </BasePopover>\n  )\n}\n"],"mappings":"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"}

package/dist/{DatePicker-QLL-43NJ.js → DatePicker-Bl7pIrHR.js}

@@ -4,9 +4,10 @@ import { t as Typography } from "./Typography-DOmGYHd6.js";
 import { t as BasePopover } from "./BasePopover-BvMT9rNx.js";
 import { t as Label } from "./Label-DYeW5MAo.js";
 import { t as Button } from "./Button-CxAl6MNt.js";
+import { n as MaskType, r as MaskModule, t as Locale } from "./MaskModule-CQXVHDuV.js";
 import { forwardRef, useEffect, useId, useMemo, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { addDays, addMonths, addYears, eachDayOfInterval, endOfMonth, endOfWeek, format, isAfter, isBefore, isSameDay, isSameMonth, isWithinInterval, parseISO, startOfDay, startOfMonth, startOfWeek, startOfYear } from "date-fns";
+import { addDays, addMonths, addYears, eachDayOfInterval, endOfMonth, endOfWeek, format, isAfter, isBefore, isSameDay, isSameMonth, isWithinInterval, parse, parseISO, setHours, setMinutes, startOfDay, startOfMonth, startOfWeek, startOfYear } from "date-fns";
 import { ptBR } from "date-fns/locale";
 
 //#region src/utils/functions/capitalize.ts
@@ -192,13 +193,36 @@ const WEEK_DAYS = [
 	}
 ];
 
+//#endregion
+//#region src/components/commons/toolkit/Calendar/components/CalendarMonth/styles.ts
+function createCalendarMonthStyles(props) {
+	return styled({
+		weekDays: {
+			display: "grid",
+			gridTemplateColumns: "repeat(7, 2.5rem)"
+		},
+		calendarDays: {
+			display: "grid",
+			gridTemplateColumns: "repeat(7, 2.5rem)"
+		},
+		weekDay: {
+			width: "2.5rem",
+			height: "2.5rem",
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "center"
+		}
+	});
+}
+
 //#endregion
 //#region src/components/commons/toolkit/Calendar/components/CalendarMonth/index.tsx
 const CalendarMonth = (props) => {
+	const { styles } = useThemedStyles(props, createCalendarMonthStyles);
 	const currentMonth = props.days.length ? props.days[Math.floor(props.days.length / 2)] : /* @__PURE__ */ new Date();
 	function renderWeekDays() {
 		return WEEK_DAYS.map((day) => /* @__PURE__ */ jsx("div", {
-			className: "w-10 h-10 flex items-center justify-center",
+			style: styles.weekDay,
 			children: /* @__PURE__ */ jsx(Typography, {
 				variant: "b2",
 				className: "text-tx-primary",
@@ -207,10 +231,10 @@ const CalendarMonth = (props) => {
 		}, day.full));
 	}
 	return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", {
-		className: "grid [grid-template-columns:repeat(7,_2.5rem)]",
+		style: styles.weekDays,
 		children: renderWeekDays()
 	}), /* @__PURE__ */ jsx("div", {
-		className: "grid [grid-template-columns:repeat(7,_2.5rem)] gap-y-1",
+		style: styles.calendarDays,
 		children: props.days.map((day) => /* @__PURE__ */ jsx(CalendarDay, {
 			day,
 			selection: props.selection,
@@ -253,7 +277,7 @@ const NavButton = ({ visible = true, ...props }) => {
 		onClick: props.onClick,
 		children: /* @__PURE__ */ jsx(Icon, {
 			name: props.icon,
-			color: "var(--color-gray-400)"
+			color: "var(--px-text-secondary)"
 		})
 	});
 };
@@ -351,6 +375,58 @@ const CalendarHeader = (props) => {
 	});
 };
 
+//#endregion
+//#region src/components/commons/toolkit/Calendar/components/DateTimeControl/components/DateTimeInput/hooks/useDateTimeInput/utils.ts
+function makeInitialDateTime() {
+	return {
+		time: "",
+		date: ""
+	};
+}
+function buildISO(date, time, dateFormat = "dd/MM/yyyy") {
+	const baseDate = parse(date, dateFormat, /* @__PURE__ */ new Date());
+	const [hours, minutes] = time.split(":").map(Number);
+	return setMinutes(setHours(baseDate, hours || 0), minutes || 0).toISOString();
+}
+
+//#endregion
+//#region src/components/commons/toolkit/Calendar/components/DateTimeControl/components/DateTimeInput/hooks/useDateTimeInput/index.ts
+function useDateTimeInput({ value, dateFormat = "dd/MM/yyyy", onChange }) {
+	const [datetimeValue, setDatetimeValue] = useState(makeInitialDateTime);
+	useEffect(() => {
+		if (!value) return;
+		const date = parseISO(value);
+		setDatetimeValue({
+			date: format(date, dateFormat),
+			time: format(date, "HH:mm")
+		});
+	}, [value, dateFormat]);
+	function emitChange() {
+		onChange(buildISO(datetimeValue.date, datetimeValue.time, dateFormat));
+	}
+	function handleDateTimeChange(changes) {
+		const formattedValue = {};
+		if (changes.date != null && changes.date !== void 0) {
+			const module = MaskModule.getMask(Locale.BR, MaskType.DATE);
+			formattedValue.date = module ? module.format(changes.date) : changes.date;
+		}
+		if (changes.time != null && changes.time !== void 0) {
+			const module = MaskModule.getMask(Locale.BR, MaskType.TIME);
+			formattedValue.time = module ? module.format(changes.time) : changes.time;
+		}
+		setDatetimeValue((prev) => ({
+			...prev,
+			...formattedValue
+		}));
+	}
+	return {
+		date: datetimeValue.date,
+		time: datetimeValue.time,
+		emitChange,
+		handleDateTimeChange
+	};
+}
+
 //#endregion
 //#region src/components/commons/toolkit/Calendar/components/DateTimeControl/components/DateTimeInput/styles.ts
 function createDateTimeInputStyles(_props) {
@@ -396,7 +472,7 @@ function createDateTimeInputStyles(_props) {
 			width: "100%",
 			minWidth: 0,
 			fontWeight: 500,
-			fontSize: "1rem",
+			fontSize: "0.875rem",
 			lineHeight: "1.5rem",
 			fontFamily: "inherit",
 			color: "var(--px-text-primary)",
@@ -422,6 +498,7 @@ const DateTimeInput = (props) => {
 		applyCommonProps: true,
 		pick: (p) => [p.value]
 	});
+	const { date, time, emitChange, handleDateTimeChange } = useDateTimeInput(props);
 	return /* @__PURE__ */ jsx("div", {
 		style: styles.container,
 		className: classes.container,
@@ -436,8 +513,12 @@ const DateTimeInput = (props) => {
 						color: "var(--px-text-disabled)"
 					}), /* @__PURE__ */ jsx("input", {
 						size: 1,
+						value: date,
 						style: styles.input,
-						className: classes.input
+						className: classes.input,
+						onBlur: () => emitChange(),
+						placeholder: props.dateFormat,
+						onChange: (e) => handleDateTimeChange({ date: e.target.value })
 					})]
 				}),
 				/* @__PURE__ */ jsx("hr", { style: styles.divider }),
@@ -449,8 +530,13 @@ const DateTimeInput = (props) => {
 						color: "var(--px-text-disabled)"
 					}), /* @__PURE__ */ jsx("input", {
 						size: 1,
+						value: time,
+						placeholder: "12:00",
 						style: styles.input,
-						className: classes.input
+						className: classes.input,
+						onBlur: () => emitChange(),
+						onChange: (e) => handleDateTimeChange({ time: e.target.value }),
+						onFocus: () => emitChange()
 					})]
 				})
 			]
@@ -494,10 +580,14 @@ const DateTimeControl = (props) => {
 	return /* @__PURE__ */ jsxs("div", {
 		style: styles.container,
 		children: [/* @__PURE__ */ jsx(DateTimeInput, {
+			dateFormat: props.dateFormat,
+			timeFormat: props.timeFormat,
 			value: props.value?.start ?? "",
 			onChange: handleStartDateChange
 		}), props.selectionMode === "range" ? /* @__PURE__ */ jsx(DateTimeInput, {
 			value: props?.value?.end,
+			timeFormat: props.timeFormat,
+			dateFormat: props.dateFormat,
 			onChange: handleEndDateChange
 		}) : null]
 	});
@@ -570,10 +660,16 @@ function createCalendarStyles(props) {
 
 //#endregion
 //#region src/components/commons/toolkit/Calendar/index.tsx
-const Calendar = (props) => {
+const Calendar = ({ viewMode = "double", dateFormat = "dd/MM/yyyy", timeFormat = "24h", ...props }) => {
+	const resolvedProps = {
+		timeFormat,
+		dateFormat,
+		viewMode,
+		...props
+	};
 	const mainCalendar = useCalendar();
 	const secondaryCalendar = useCalendar(addMonths(mainCalendar.currentDate, 1));
-	const { styles } = useThemedStyles(props, createCalendarStyles, {
+	const { styles } = useThemedStyles(resolvedProps, createCalendarStyles, {
 		applyCommonProps: true,
 		pick: (p) => [p.viewMode]
 	});
@@ -581,7 +677,7 @@ const Calendar = (props) => {
 		secondaryCalendar.setCurrentDate(addMonths(mainCalendar.currentDate, 1));
 	}, [mainCalendar.currentDate]);
 	function handleSelect(day) {
-		const { value, selectionMode, onChange } = props;
+		const { value, selectionMode, onChange } = resolvedProps;
 		if (selectionMode === "single") onChange({ start: day.toISOString() });
 		else {
 			const start = value?.start ? parseISO(value.start) : null;
@@ -607,34 +703,36 @@ const Calendar = (props) => {
 				/* @__PURE__ */ jsx(CalendarHeader, {
 					position: "left",
 					currentDate: mainCalendar.currentDate,
-					isDualView: props.viewMode === "double",
-					disablePastDates: props.disablePastDates,
+					isDualView: resolvedProps.viewMode === "double",
+					disablePastDates: resolvedProps.disablePastDates,
 					onNavAction: mainCalendar.handleNavAction
 				}),
-				props.isDateTimePicker ? /* @__PURE__ */ jsx(DateTimeControl, {
-					value: props.value,
-					selectionMode: props.selectionMode,
-					onChange: props.onChange
+				resolvedProps.isDateTimePicker ? /* @__PURE__ */ jsx(DateTimeControl, {
+					value: resolvedProps.value,
+					dateFormat: resolvedProps.dateFormat,
+					timeFormat: resolvedProps.timeFormat,
+					selectionMode: resolvedProps.selectionMode,
+					onChange: resolvedProps.onChange
 				}) : null,
 				/* @__PURE__ */ jsx(CalendarMonth, {
-					selection: props.value,
 					days: mainCalendar.days,
-					disablePastDates: props.disablePastDates,
+					selection: resolvedProps.value,
+					disablePastDates: resolvedProps.disablePastDates,
 					onDayClick: handleSelect
 				})
 			]
-		}), props.viewMode === "double" ? /* @__PURE__ */ jsxs("div", {
+		}), resolvedProps.viewMode === "double" ? /* @__PURE__ */ jsxs("div", {
 			style: styles.monthContainer,
 			children: [/* @__PURE__ */ jsx(CalendarHeader, {
 				isDualView: true,
 				position: "right",
 				currentDate: secondaryCalendar.currentDate,
-				disablePastDates: props.disablePastDates,
+				disablePastDates: resolvedProps.disablePastDates,
 				onNavAction: mainCalendar.handleNavAction
 			}), /* @__PURE__ */ jsx(CalendarMonth, {
-				selection: props.value,
+				selection: resolvedProps.value,
 				days: secondaryCalendar.days,
-				disablePastDates: props.disablePastDates,
+				disablePastDates: resolvedProps.disablePastDates,
 				onDayClick: handleSelect
 			})]
 		}) : null]
@@ -672,6 +770,11 @@ function createDatePickerTriggerStyles(props) {
 					outline: props.errorMessage ? "2px solid var(--px-color-error)" : `2px solid var(--px-color-primary)`
 				}
 			}
+		},
+		buttonContent: {
+			display: "flex",
+			alignItems: "center",
+			gap: "0.5rem"
 		}
 	});
 }
@@ -713,7 +816,7 @@ const DatePickerTrigger = forwardRef(function DatePickerTrigger$1({ dateFormat =
 				className: classes.button,
 				onClick,
 				children: [/* @__PURE__ */ jsxs("div", {
-					className: "flex items-center gap-2",
+					style: styles.buttonContent,
 					children: [/* @__PURE__ */ jsx(Icon, {
 						size: "sm",
 						name: "general-calendar",
@@ -864,4 +967,4 @@ const DatePicker = (props) => {
 
 //#endregion
 export { types_exports as n, DatePicker as t };
-//# sourceMappingURL=DatePicker-QLL-43NJ.js.map
+//# sourceMappingURL=DatePicker-Bl7pIrHR.js.map

package/dist/DatePicker-Bl7pIrHR.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker-Bl7pIrHR.js","names":["CalendarDay: React.FC<CalendarDayProps>","CalendarMonth: React.FC<CalendarMonthProps>","NavButton: React.FC<NavButtonProps>","CalendarHeader: React.FC<Props>","formattedValue: Partial<DateTimeValues>","DateTimeInput: React.FC<DateTimeInputProps>","DateTimeControl: React.FC<DateTimeControlProps>","days","Calendar: React.FC<CalendarProps>","DatePickerTrigger","DatePicker: React.FC<DatePickerProps>"],"sources":["../src/utils/functions/capitalize.ts","../src/components/commons/toolkit/Calendar/components/CalendarMonth/components/CalendarDay/utils.ts","../src/components/commons/toolkit/Calendar/components/CalendarMonth/components/CalendarDay/styles.ts","../src/components/commons/toolkit/Calendar/components/CalendarMonth/components/CalendarDay/index.tsx","../src/components/commons/toolkit/Calendar/components/CalendarMonth/constants.ts","../src/components/commons/toolkit/Calendar/components/CalendarMonth/styles.ts","../src/components/commons/toolkit/Calendar/components/CalendarMonth/index.tsx","../src/components/commons/toolkit/Calendar/components/CalendarHeader/components/NavButton/styles.ts","../src/components/commons/toolkit/Calendar/components/CalendarHeader/components/NavButton/index.tsx","../src/components/commons/toolkit/Calendar/components/CalendarHeader/utils.ts","../src/components/commons/toolkit/Calendar/components/CalendarHeader/styles.ts","../src/components/commons/toolkit/Calendar/components/CalendarHeader/index.tsx","../src/components/commons/toolkit/Calendar/components/DateTimeControl/components/DateTimeInput/hooks/useDateTimeInput/utils.ts","../src/components/commons/toolkit/Calendar/components/DateTimeControl/components/DateTimeInput/hooks/useDateTimeInput/index.ts","../src/components/commons/toolkit/Calendar/components/DateTimeControl/components/DateTimeInput/styles.ts","../src/components/commons/toolkit/Calendar/components/DateTimeControl/components/DateTimeInput/index.tsx","../src/components/commons/toolkit/Calendar/components/DateTimeControl/styles.ts","../src/components/commons/toolkit/Calendar/components/DateTimeControl/index.tsx","../src/components/commons/toolkit/Calendar/hooks/useCalendar.ts","../src/components/commons/toolkit/Calendar/styles.ts","../src/components/commons/toolkit/Calendar/index.tsx","../src/components/commons/inputs/DatePicker/components/DatePickerTrigger/styles.ts","../src/components/commons/inputs/DatePicker/components/DatePickerTrigger/index.tsx","../src/components/commons/inputs/DatePicker/hooks/useDatePicker.ts","../src/components/commons/inputs/DatePicker/styles.ts","../src/components/commons/inputs/DatePicker/types.ts","../src/components/commons/inputs/DatePicker/index.tsx"],"sourcesContent":["export function capitalize(text: string) {\n  if (!text) return ''\n  return text.charAt(0).toUpperCase() + text.slice(1)\n}\n","// External Libraries\nimport {\n  format,\n  isBefore,\n  isSameDay,\n  startOfDay,\n  isSameMonth,\n  isWithinInterval\n} from 'date-fns'\nimport { ptBR } from 'date-fns/locale'\n\n// Types\nimport type { PickedDate } from '../../../../types'\n\ninterface DayMetadataParams {\n  day: Date\n  currentMonth: Date\n  selection?: PickedDate\n  disablePastDates?: boolean\n}\n\nexport function getDayMetadata(params: DayMetadataParams) {\n  const { day, currentMonth, selection, disablePastDates } = params\n\n  const startOfToday = startOfDay(new Date())\n  const isPastDate = isBefore(day, startOfToday)\n  const isOutsideMonth = !isSameMonth(day, currentMonth)\n  const isDisabled = isOutsideMonth || (disablePastDates && isPastDate) || false\n\n  if (!selection) {\n    const ariaLabel = getAriaLabel(day, {\n      isDisabled,\n      isBetween: false,\n      isSelected: false\n    })\n\n    return {\n      ariaLabel,\n      isDisabled,\n      isSelected: false,\n      isBetween: false,\n      isRangeEnd: false,\n      isRangeStart: false\n    }\n  }\n\n  const { start, end } = selection\n\n  const isRangeStart = start ? isSameDay(day, start) : false\n  const isRangeEnd = end ? isSameDay(day, end) : false\n\n  const isBetween =\n    start && end\n      ? isWithinInterval(startOfDay(day), {\n          start: startOfDay(start),\n          end: startOfDay(end)\n        })\n      : false\n  const isSelected = isRangeStart || isRangeEnd\n\n  const ariaLabel = getAriaLabel(day, { isSelected, isBetween, isDisabled })\n\n  return {\n    ariaLabel,\n    isBetween,\n    isDisabled,\n    isSelected,\n    isRangeEnd,\n    isRangeStart\n  }\n}\n\nfunction getAriaLabel(\n  day: Date,\n  options: { isSelected: boolean; isBetween: boolean; isDisabled: boolean }\n) {\n  const { isSelected, isBetween, isDisabled } = options\n  const baseLabel = format(day, \"d 'de' MMMM 'de' yyyy\", { locale: ptBR })\n\n  if (isSelected) return `${baseLabel}, selecionado`\n  if (isBetween) return `${baseLabel}, dentro do intervalo`\n  if (isDisabled) return `${baseLabel}, indisponível`\n\n  return baseLabel\n}\n","import type { CalendarDayProps } from './types'\nimport { styled } from '@hooks/useThemedStyles/types'\n\ninterface StylesProps extends CalendarDayProps {\n  isBetween: boolean\n  isSelected: boolean\n  isRangeStart: boolean\n  isRangeEnd: boolean\n  isDisabled: boolean\n}\n\nexport function createCalendarDayStyles(params: StylesProps) {\n  return styled({\n    container: {\n      width: '100%',\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n\n      backgroundColor: getContainerBackgroundColor(params),\n\n      borderTopLeftRadius: getContainerBorderLeft(params),\n      borderBottomLeftRadius: getContainerBorderLeft(params),\n      borderTopRightRadius: getContainerBorderRight(params),\n      borderBottomRightRadius: getContainerBorderRight(params)\n    },\n\n    button: {\n      display: 'flex',\n      width: '2.2rem',\n      height: '2.2rem',\n      alignItems: 'center',\n      justifyContent: 'center',\n\n      backgroundColor: getButtonBackgroundColor(params),\n      borderRadius: getButtonBorderRadius(params),\n\n      transition: 'all 200ms ease-in-out',\n      cursor: params.isDisabled ? 'not-allowed' : 'pointer',\n      opacity: params.isDisabled ? 0.5 : 1,\n\n      __rules: {\n        '&:hover': {\n          opacity: '0.85'\n        },\n        '&:disabled': {\n          opacity: '0.5',\n          cursor: 'not-allowed'\n        }\n      }\n    }\n  })\n}\n\nfunction getContainerBackgroundColor({ isBetween }: StylesProps): string {\n  if (isBetween) {\n    return 'rgba(14, 178, 76, 0.1)'\n  }\n\n  return 'transparent'\n}\n\nfunction getContainerBorderLeft({ isRangeStart }: StylesProps) {\n  return isRangeStart ? '50%' : '0'\n}\n\nfunction getContainerBorderRight({ isRangeEnd }: StylesProps) {\n  return isRangeEnd ? '50%' : '0'\n}\n\nfunction getButtonBackgroundColor({\n  isSelected,\n  isRangeStart,\n  isRangeEnd\n}: StylesProps): string {\n  if (isSelected || isRangeStart || isRangeEnd) {\n    return 'var(--px-btn-filled-bg)'\n  }\n\n  return 'transparent'\n}\n\nfunction getButtonBorderRadius({\n  isBetween,\n  isRangeStart,\n  isRangeEnd\n}: StylesProps): string {\n  if (isBetween && !isRangeStart && !isRangeEnd) {\n    return '0'\n  }\n\n  return '50%'\n}\n","// External Libraries\nimport type React from 'react'\nimport { useMemo } from 'react'\n\n// Components\nimport { Typography } from '@components/commons/toolkit/Typography'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Utils\nimport { getDayMetadata } from './utils'\n\n// Types\nimport type { CalendarDayProps } from './types'\n\n// Styles\nimport { createCalendarDayStyles } from './styles'\n\nexport const CalendarDay: React.FC<CalendarDayProps> = props => {\n  // Constants\n  const { day, currentMonth, selection, disablePastDates, onClick } = props\n  const dayConfig = useMemo(\n    () => getDayMetadata({ day, selection, currentMonth, disablePastDates }),\n    [day, selection, currentMonth, disablePastDates]\n  )\n\n  // Hooks\n  const { styles, classes } = useThemedStyles(\n    { ...props, ...dayConfig },\n    createCalendarDayStyles,\n    {\n      applyCommonProps: true\n    }\n  )\n\n  // Functions\n  function handleClick() {\n    onClick(day)\n  }\n\n  return (\n    <div style={styles.container}>\n      <button\n        type=\"button\"\n        style={styles.button}\n        className={classes.button}\n        disabled={dayConfig.isDisabled}\n        aria-label={dayConfig.ariaLabel}\n        onClick={handleClick}\n      >\n        <Typography\n          variant=\"b2\"\n          color={dayConfig.isSelected ? 'white' : 'var(--px-text-secondary)'}\n          fontWeight={\n            dayConfig.isSelected || dayConfig.isBetween ? 'medium' : 'regular'\n          }\n        >\n          {day.getDate()}\n        </Typography>\n      </button>\n    </div>\n  )\n}\n","export const WEEK_DAYS = [\n  { short: 'D', full: 'Domingo' },\n  { short: 'S', full: 'Segunda' },\n  { short: 'T', full: 'Terça' },\n  { short: 'Q', full: 'Quarta' },\n  { short: 'Q', full: 'Quinta' },\n  { short: 'S', full: 'Sexta' },\n  { short: 'S', full: 'Sábado' }\n] as const\n","import { styled } from '@hooks/useThemedStyles/types'\nimport type { CalendarMonthProps } from './types'\n\nexport function createCalendarMonthStyles(props: CalendarMonthProps) {\n  return styled({\n    weekDays: {\n      display: 'grid',\n      gridTemplateColumns: 'repeat(7, 2.5rem)'\n    },\n    calendarDays: {\n      display: 'grid',\n      gridTemplateColumns: 'repeat(7, 2.5rem)'\n    },\n    weekDay: {\n      width: '2.5rem',\n      height: '2.5rem',\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center'\n    }\n  })\n}\n","// External Libraries\nimport type React from 'react'\n\n// Components\nimport { CalendarDay } from './components/CalendarDay'\nimport { Typography } from '@components/commons/toolkit/Typography'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Utils\nimport { WEEK_DAYS } from './constants'\n\n// Types\nimport type { CalendarMonthProps } from './types'\n\n// Styles\nimport { createCalendarMonthStyles } from './styles'\n\nexport const CalendarMonth: React.FC<CalendarMonthProps> = props => {\n  // Hooks\n  const { styles } = useThemedStyles(props, createCalendarMonthStyles)\n\n  // Constants\n  const currentMonth = props.days.length\n    ? props.days[Math.floor(props.days.length / 2)]\n    : new Date()\n\n  // Functions\n  function renderWeekDays() {\n    return WEEK_DAYS.map(day => (\n      <div key={day.full} style={styles.weekDay}>\n        <Typography variant=\"b2\" className=\"text-tx-primary\">\n          {day.short}\n        </Typography>\n      </div>\n    ))\n  }\n\n  return (\n    <div>\n      <div style={styles.weekDays}>{renderWeekDays()}</div>\n\n      <div style={styles.calendarDays}>\n        {props.days.map(day => (\n          <CalendarDay\n            day={day}\n            key={day.toISOString()}\n            selection={props.selection}\n            currentMonth={currentMonth}\n            disablePastDates={props.disablePastDates}\n            onClick={props.onDayClick}\n          />\n        ))}\n      </div>\n    </div>\n  )\n}\n","import { styled } from '@hooks/useThemedStyles/types'\nimport type { NavButtonProps } from './types'\n\nexport function createNavButtonStyles(_props: NavButtonProps) {\n  return styled({\n    container: {\n      display: 'flex',\n\n      cursor: 'pointer',\n      padding: '0.125rem',\n\n      borderRadius: '50%',\n      transition: 'background-color 0.2s ease-out',\n      rotate: _props.next ? '180deg' : '0deg',\n\n      __rules: {\n        '&:hover': {\n          backgroundColor: 'var(--color-gray-50)'\n        }\n      }\n    }\n  })\n}\n","// External Libraries\nimport type React from 'react'\n\n// Components\nimport { Icon } from '@components/commons/toolkit/Icon'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { NavButtonProps } from './types'\n\n// Styles\nimport { createNavButtonStyles } from './styles'\n\nexport const NavButton: React.FC<NavButtonProps> = ({\n  visible = true,\n  ...props\n}) => {\n  // Hooks\n\n  const { styles, classes } = useThemedStyles(\n    { visible, ...props },\n    createNavButtonStyles,\n    {\n      applyCommonProps: true,\n      pick: p => [p.next, p.visible]\n    }\n  )\n\n  if (!visible) return null\n\n  return (\n    <button\n      type=\"button\"\n      style={styles.container}\n      className={classes.container}\n      onClick={props.onClick}\n    >\n      <Icon name={props.icon} color=\"var(--px-text-secondary)\" />\n    </button>\n  )\n}\n","// External Libraries\nimport { isBefore, startOfMonth, startOfYear } from 'date-fns'\n\ninterface NavMetadataParams {\n  currentDate: Date\n  isDualView: boolean\n  position: 'left' | 'right'\n  disablePastDates?: boolean\n}\n\nexport function getNavMetadata(params: NavMetadataParams) {\n  const { currentDate, isDualView, position, disablePastDates } = params\n  const today = new Date()\n\n  const hasPrevMonthAvailable =\n    !disablePastDates ||\n    isBefore(startOfMonth(today), startOfMonth(currentDate))\n\n  const hasPrevYearAvailable =\n    !disablePastDates || isBefore(startOfYear(today), startOfYear(currentDate))\n\n  const showPrevButtons = !isDualView\n    ? hasPrevMonthAvailable || hasPrevYearAvailable\n    : position !== 'right'\n\n  const showNextButtons = !isDualView ? true : position !== 'left'\n\n  return {\n    showPrevButtons,\n    showNextButtons,\n    hasPrevYearAvailable,\n    hasPrevMonthAvailable\n  }\n}\n","import { styled } from '@hooks/useThemedStyles/types'\nimport type { CalendarHeaderProps } from './types'\n\nexport function createCalendarHeaderStyles(_props: CalendarHeaderProps) {\n  return styled({\n    container: {\n      width: '100%',\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'space-between',\n      paddingBlock: '0.375rem'\n    },\n\n    leftButtonsContainer: {\n      display: 'flex',\n\n      alignItems: 'center',\n      gap: '0.25rem'\n    },\n\n    rightButtonsContainer: {\n      display: 'flex',\n\n      alignItems: 'center',\n      justifyContent: 'flex-end',\n      gap: '0.25rem'\n    }\n  })\n}\n","// External Libraries\nimport type React from 'react'\nimport { format } from 'date-fns'\nimport { ptBR } from 'date-fns/locale'\n\n// Components\nimport { NavButton } from './components/NavButton'\nimport { Typography } from '@components/commons/toolkit/Typography'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Utils\nimport { getNavMetadata } from './utils'\nimport { capitalize } from '@utils/functions'\n\n// Types\nimport type { CalendarNavAction } from '../../types'\n\n// Styles\nimport { createCalendarHeaderStyles } from './styles'\n\ninterface Props {\n  currentDate: Date\n  isDualView: boolean\n  position: 'left' | 'right'\n  disablePastDates?: boolean\n  onNavAction: (action: CalendarNavAction) => void\n}\n\nexport const CalendarHeader: React.FC<Props> = props => {\n  // Constants\n  const { onNavAction, ...rest } = props\n  const {\n    showPrevButtons,\n    showNextButtons,\n    hasPrevYearAvailable,\n    hasPrevMonthAvailable\n  } = getNavMetadata(rest)\n\n  // Hooks\n  const { styles } = useThemedStyles(props, createCalendarHeaderStyles, {\n    applyCommonProps: true,\n    pick: p => [p.currentDate, p.isDualView, p.position]\n  })\n\n  // Functions\n  function renderMonthName() {\n    const name = format(rest.currentDate, 'MMMM yyyy', { locale: ptBR })\n    return capitalize(name)\n  }\n\n  return (\n    <div style={styles.container}>\n      {showPrevButtons ? (\n        <div style={styles.leftButtonsContainer}>\n          <NavButton\n            icon=\"chevrons-left\"\n            visible={hasPrevMonthAvailable}\n            onClick={() => onNavAction('prev-month')}\n          />\n\n          <NavButton\n            icon=\"chevrons-double-left\"\n            visible={hasPrevYearAvailable}\n            onClick={() => onNavAction('prev-year')}\n          />\n        </div>\n      ) : (\n        <div />\n      )}\n\n      <Typography variant=\"b2\" align=\"center\" fontWeight=\"semibold\">\n        {renderMonthName()}\n      </Typography>\n\n      {showNextButtons ? (\n        <div style={styles.rightButtonsContainer}>\n          <NavButton\n            next\n            icon=\"chevrons-double-left\"\n            onClick={() => onNavAction('next-year')}\n          />\n\n          <NavButton\n            next\n            icon=\"chevrons-left\"\n            onClick={() => onNavAction('next-month')}\n          />\n        </div>\n      ) : (\n        <div />\n      )}\n    </div>\n  )\n}\n","import type { DateTimeValues } from '../../types'\nimport { parse, setHours, setMinutes } from 'date-fns'\n\nexport function makeInitialDateTime(): DateTimeValues {\n  return { time: '', date: '' }\n}\n\nexport function buildISO(\n  date: string,\n  time: string,\n  dateFormat = 'dd/MM/yyyy'\n) {\n  const baseDate = parse(date, dateFormat, new Date())\n\n  const [hours, minutes] = time.split(':').map(Number)\n\n  const withTime = setMinutes(setHours(baseDate, hours || 0), minutes || 0)\n\n  return withTime.toISOString()\n}\n","// External Libraries\nimport { useEffect, useState } from 'react'\nimport { format, parseISO } from 'date-fns'\n\n// Utils\nimport { buildISO, makeInitialDateTime } from './utils'\n\n// Types\nimport type { DateTimeValues } from '../../types'\nimport type { UseDateTimeInputParams } from './types'\nimport { Locale, MaskModule, MaskType } from '@services/MaskModule'\n\nexport function useDateTimeInput({\n  value,\n  dateFormat = 'dd/MM/yyyy',\n  onChange\n}: UseDateTimeInputParams) {\n  const [datetimeValue, setDatetimeValue] = useState(makeInitialDateTime)\n\n  useEffect(() => {\n    if (!value) return\n\n    const date = parseISO(value)\n\n    setDatetimeValue({\n      date: format(date, dateFormat),\n      time: format(date, 'HH:mm')\n    })\n  }, [value, dateFormat])\n\n  function emitChange() {\n    const iso = buildISO(datetimeValue.date, datetimeValue.time, dateFormat)\n    onChange(iso)\n  }\n\n  function handleDateTimeChange(changes: Partial<DateTimeValues>) {\n    const formattedValue: Partial<DateTimeValues> = {}\n\n    if (changes.date != null && changes.date !== undefined) {\n      const module = MaskModule.getMask(Locale.BR, MaskType.DATE)\n      formattedValue.date = module ? module.format(changes.date) : changes.date\n    }\n\n    if (changes.time != null && changes.time !== undefined) {\n      const module = MaskModule.getMask(Locale.BR, MaskType.TIME)\n      formattedValue.time = module ? module.format(changes.time) : changes.time\n    }\n\n    setDatetimeValue(prev => ({ ...prev, ...formattedValue }))\n\n    // emitChange({ ...datetimeValue, ...formattedValue })\n  }\n\n  return {\n    date: datetimeValue.date,\n    time: datetimeValue.time,\n    emitChange,\n    handleDateTimeChange\n  }\n}\n","import type { DateTimeInputProps } from './types'\nimport { styled } from '@hooks/useThemedStyles/types'\n\nexport function createDateTimeInputStyles(_props: DateTimeInputProps) {\n  return styled({\n    container: {\n      width: '100%',\n      height: '2.5rem',\n\n      display: 'flex',\n      alignItems: 'center',\n\n      borderWidth: 1,\n      borderStyle: 'solid',\n      borderRadius: '0.5rem',\n      padding: '0.625rem 0.875rem',\n      boxShadow: 'var(--px-shadow-default)',\n      borderColor: 'var(--px-border-primary)',\n\n      __rules: {\n        '&:focus-within': {\n          outlineOffset: '-1px',\n          outline: '2px solid var(--px-color-primary)'\n        }\n      }\n    },\n\n    content: {\n      flex: 1,\n\n      display: 'flex',\n      alignItems: 'center',\n      columnGap: '0.25rem'\n    },\n\n    wrapper: {\n      flex: 1,\n      minWidth: 0,\n      display: 'flex',\n      alignItems: 'center',\n\n      gap: '0.5rem'\n    },\n\n    divider: {\n      border: 0,\n      width: '1px',\n      height: '1rem',\n\n      marginInline: '0.5rem',\n      backgroundColor: 'var(--px-border-primary)'\n    },\n\n    input: {\n      flex: 1,\n      width: '100%',\n      minWidth: 0,\n      fontWeight: 500,\n      fontSize: '0.875rem',\n      lineHeight: '1.5rem',\n      fontFamily: 'inherit',\n      color: 'var(--px-text-primary)',\n      backgroundColor: 'transparent',\n      border: 'none',\n      padding: 0,\n      __rules: {\n        '&:disabled': {\n          cursor: 'not-allowed'\n        },\n        '&:focus': {\n          outline: 'none'\n        },\n        '&::placeholder': {\n          fontWeight: 400,\n          color: 'var(--px-text-secondary)'\n        }\n      }\n    }\n  })\n}\n","// External Libraries\nimport type React from 'react'\n\n// Components\nimport { Icon } from '@components/commons/toolkit/Icon'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\nimport { useDateTimeInput } from './hooks/useDateTimeInput'\n\n// Types\nimport type { DateTimeInputProps } from './types'\n\n// Styles\nimport { createDateTimeInputStyles } from './styles'\n\nexport const DateTimeInput: React.FC<DateTimeInputProps> = props => {\n  const { styles, classes } = useThemedStyles(\n    props,\n    createDateTimeInputStyles,\n    {\n      applyCommonProps: true,\n      pick: p => [p.value]\n    }\n  )\n\n  const { date, time, emitChange, handleDateTimeChange } =\n    useDateTimeInput(props)\n\n  return (\n    <div style={styles.container} className={classes.container}>\n      <div style={styles.content}>\n        <div style={styles.wrapper}>\n          <Icon\n            size=\"sm\"\n            name=\"general-calendar\"\n            color=\"var(--px-text-disabled)\"\n          />\n\n          <input\n            size={1}\n            value={date}\n            style={styles.input}\n            className={classes.input}\n            onBlur={() => emitChange()}\n            placeholder={props.dateFormat}\n            onChange={e => handleDateTimeChange({ date: e.target.value })}\n          />\n        </div>\n\n        <hr style={styles.divider} />\n\n        <div style={styles.wrapper}>\n          <Icon\n            size=\"sm\"\n            name=\"general-clock\"\n            color=\"var(--px-text-disabled)\"\n          />\n\n          <input\n            size={1}\n            value={time}\n            placeholder=\"12:00\"\n            style={styles.input}\n            className={classes.input}\n            onBlur={() => emitChange()}\n            onChange={e => handleDateTimeChange({ time: e.target.value })}\n            onFocus={() => emitChange()}\n          />\n        </div>\n      </div>\n    </div>\n  )\n}\n","// Types\nimport type { DateTimeControlProps } from './types'\nimport type { StyleMap } from '@hooks/useThemedStyles/types'\n\n// Hooks\nimport { styled } from '@hooks/useThemedStyles/types'\n\nexport function createDateTimeControlStyles(\n  _props: DateTimeControlProps\n): StyleMap {\n  return styled({\n    container: {\n      width: '100%',\n      display: 'flex',\n      flexDirection: 'column',\n\n      gap: '0.5rem'\n    }\n  })\n}\n","// External Libraries\nimport type React from 'react'\n\n// Components\nimport { DateTimeInput } from './components/DateTimeInput'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { DateTimeControlProps } from './types'\n\n// Styles\nimport { createDateTimeControlStyles } from './styles'\n\nexport const DateTimeControl: React.FC<DateTimeControlProps> = props => {\n  // Hooks\n  const { styles } = useThemedStyles(props, createDateTimeControlStyles, {\n    applyCommonProps: true,\n    pick: p => [p.value, p.selectionMode]\n  })\n\n  // Functions\n  function handleStartDateChange(date: string) {\n    const { value, onChange } = props\n\n    onChange({ ...value, start: date })\n  }\n\n  function handleEndDateChange(date: string) {\n    const { value, onChange } = props\n\n    if (!value?.start) return\n\n    onChange({ ...value, end: date })\n  }\n\n  return (\n    <div style={styles.container}>\n      <DateTimeInput\n        dateFormat={props.dateFormat}\n        timeFormat={props.timeFormat}\n        value={props.value?.start ?? ''}\n        onChange={handleStartDateChange}\n      />\n\n      {props.selectionMode === 'range' ? (\n        <DateTimeInput\n          value={props?.value?.end}\n          timeFormat={props.timeFormat}\n          dateFormat={props.dateFormat}\n          onChange={handleEndDateChange}\n        />\n      ) : null}\n    </div>\n  )\n}\n","// External Libraries\nimport {\n  addDays,\n  addYears,\n  addMonths,\n  endOfWeek,\n  endOfMonth,\n  startOfWeek,\n  startOfMonth,\n  eachDayOfInterval\n} from 'date-fns'\nimport { useMemo, useState } from 'react'\n\n// Types\nimport type { CalendarNavAction } from '../types'\n\nexport function useCalendar(initialDate = new Date()) {\n  // States\n  const [currentDate, setCurrentDate] = useState(initialDate)\n\n  // Constants\n  const days = useMemo(() => {\n    const start = startOfWeek(startOfMonth(currentDate), { weekStartsOn: 0 })\n    const end = endOfWeek(endOfMonth(currentDate), { weekStartsOn: 0 })\n    let days = eachDayOfInterval({ start, end })\n\n    if (days.length < 42) {\n      const diff = 42 - days.length\n      const last = end\n\n      const extraDays = Array.from({ length: diff }, (_, i) =>\n        addDays(last, i + 1)\n      )\n\n      days = [...days, ...extraDays]\n    }\n\n    return days\n  }, [currentDate])\n\n  // Functions\n  function handleNavAction(action: CalendarNavAction) {\n    switch (action) {\n      case 'next-month':\n        setCurrentDate(prev => addMonths(prev, 1))\n        break\n\n      case 'prev-month':\n        setCurrentDate(prev => addMonths(prev, -1))\n        break\n\n      case 'next-year':\n        setCurrentDate(prev => addYears(prev, 1))\n        break\n\n      case 'prev-year':\n        setCurrentDate(prev => addYears(prev, -1))\n        break\n    }\n  }\n\n  return { currentDate, days, handleNavAction, setCurrentDate }\n}\n","import type { CalendarProps } from './types'\nimport { styled } from '@hooks/useThemedStyles/types'\n\nexport function createCalendarStyles(props: CalendarProps) {\n  return styled({\n    container: {\n      display: 'flex',\n      alignItems: 'center'\n    },\n    monthContainer: {\n      display: 'flex',\n      flexDirection: 'column',\n\n      gap: '0.75rem',\n      padding: '0.75rem 1rem'\n    },\n    timeContainer: {\n      display: 'flex',\n      flexDirection: 'column',\n\n      gap: '0.5rem'\n    }\n  })\n}\n","// External Libraries\nimport type React from 'react'\nimport { useEffect } from 'react'\nimport { addMonths, isAfter, isSameDay, parseISO } from 'date-fns'\n\n// Components\nimport { CalendarMonth } from './components/CalendarMonth'\nimport { CalendarHeader } from './components/CalendarHeader'\nimport { DateTimeControl } from './components/DateTimeControl'\n\n// Hooks\nimport { useCalendar } from './hooks/useCalendar'\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { CalendarProps, TimeFormat } from './types'\n\n// Styles\nimport { createCalendarStyles } from './styles'\n\nexport const Calendar: React.FC<CalendarProps> = ({\n  viewMode = 'double',\n  dateFormat = 'dd/MM/yyyy',\n  timeFormat = '24h' as TimeFormat,\n  ...props\n}) => {\n  // Constants\n  const resolvedProps = { timeFormat, dateFormat, viewMode, ...props }\n\n  // Hooks\n  const mainCalendar = useCalendar()\n  const secondaryCalendar = useCalendar(addMonths(mainCalendar.currentDate, 1))\n  const { styles } = useThemedStyles(resolvedProps, createCalendarStyles, {\n    applyCommonProps: true,\n    pick: p => [p.viewMode]\n  })\n\n  // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>\n  useEffect(() => {\n    secondaryCalendar.setCurrentDate(addMonths(mainCalendar.currentDate, 1))\n  }, [mainCalendar.currentDate])\n\n  // Functions\n  function handleSelect(day: Date) {\n    const { value, selectionMode, onChange } = resolvedProps\n\n    if (selectionMode === 'single') {\n      onChange({ start: day.toISOString() })\n    } else {\n      const start = value?.start ? parseISO(value.start) : null\n      const end = value?.end ? parseISO(value.end) : null\n\n      if (!start || (start && end)) {\n        onChange({ start: day.toISOString(), end: undefined })\n      } else if (start && !end) {\n        const [from, to] =\n          isAfter(day, start) || isSameDay(day, start)\n            ? [start, day]\n            : [day, start]\n\n        onChange({ start: from.toISOString(), end: to.toISOString() })\n      }\n    }\n  }\n\n  return (\n    <div style={styles.container}>\n      <div style={styles.monthContainer}>\n        <CalendarHeader\n          position=\"left\"\n          currentDate={mainCalendar.currentDate}\n          isDualView={resolvedProps.viewMode === 'double'}\n          disablePastDates={resolvedProps.disablePastDates}\n          onNavAction={mainCalendar.handleNavAction}\n        />\n\n        {resolvedProps.isDateTimePicker ? (\n          <DateTimeControl\n            value={resolvedProps.value}\n            dateFormat={resolvedProps.dateFormat}\n            timeFormat={resolvedProps.timeFormat}\n            selectionMode={resolvedProps.selectionMode}\n            onChange={resolvedProps.onChange}\n          />\n        ) : null}\n\n        <CalendarMonth\n          days={mainCalendar.days}\n          selection={resolvedProps.value}\n          disablePastDates={resolvedProps.disablePastDates}\n          onDayClick={handleSelect}\n        />\n      </div>\n\n      {resolvedProps.viewMode === 'double' ? (\n        <div style={styles.monthContainer}>\n          <CalendarHeader\n            isDualView\n            position=\"right\"\n            currentDate={secondaryCalendar.currentDate}\n            disablePastDates={resolvedProps.disablePastDates}\n            onNavAction={mainCalendar.handleNavAction}\n          />\n\n          <CalendarMonth\n            selection={resolvedProps.value}\n            days={secondaryCalendar.days}\n            disablePastDates={resolvedProps.disablePastDates}\n            onDayClick={handleSelect}\n          />\n        </div>\n      ) : null}\n    </div>\n  )\n}\n","import { styled } from '@hooks/useThemedStyles/types'\nimport type { DatePickerTriggerProps } from './types'\n\nexport function createDatePickerTriggerStyles(props: DatePickerTriggerProps) {\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 { format } from 'date-fns'\nimport { forwardRef, useId } from 'react'\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// Types\nimport type { DatePickerTriggerProps } from './types'\n\n// Styles\nimport { createDatePickerTriggerStyles } from './styles'\n\nexport const DatePickerTrigger = forwardRef<\n  HTMLButtonElement,\n  DatePickerTriggerProps\n>(function DatePickerTrigger({ dateFormat = 'dd/MM/yyyy', ...props }, ref) {\n  // Hooks\n  const inputId = useId()\n  const { styles, classes } = useThemedStyles(\n    props,\n    createDatePickerTriggerStyles,\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  const hasValue = !!value?.start\n\n  // Functions\n  function renderDate() {\n    if (!hasValue) return placeholder ?? 'Selecione uma data'\n\n    const { start, end } = value\n\n    const startDate = format(start, dateFormat)\n    const endDate = end ? format(end, dateFormat) : ''\n\n    return `${startDate}${endDate ? ` - ${endDate}` : ''}`\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        type=\"button\"\n        disabled={disabled}\n        style={styles.button}\n        aria-labelledby={inputId}\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            {renderDate()}\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 { DatePickerProps } from '../types'\nimport type { PickedDate } from '@components/commons/toolkit/Calendar/types'\n\nexport function useDatePicker(params: DatePickerProps) {\n  // States\n  const [isOpen, setOpen] = useState(false)\n  const [selectedDate, setSelectedDate] = useState<PickedDate>()\n\n  // Functions\n  function toggleDialog(status: boolean) {\n    if (status) {\n      setSelectedDate(params.value)\n    }\n\n    setOpen(status)\n  }\n\n  function handleDateChange(value: PickedDate) {\n    setSelectedDate(value)\n  }\n\n  function handleConfirmClick() {\n    if (!selectedDate) return\n\n    setOpen(false)\n    params.onChange(selectedDate)\n  }\n\n  return {\n    isOpen,\n    selectedDate,\n    toggleDialog,\n    handleDateChange,\n    handleConfirmClick\n  }\n}\n","import { styled } from '@hooks/useThemedStyles/types'\nimport type { DatePickerProps } from './types'\n\nexport function createDatePickerStyles(props: DatePickerProps) {\n  return styled({\n    container: {\n      width: '100%'\n    },\n\n    divider: {\n      border: 0,\n      display: 'flex',\n      marginBlock: '0.1rem',\n      borderTop: '1px solid var(--px-border-primary)'\n    },\n\n    buttonsContainer: {\n      width: '100%',\n      display: 'flex',\n\n      alignItems: 'center',\n      justifyContent: props.viewMode === 'single' ? 'center' : 'flex-end',\n\n      gap: '0.75rem',\n      padding: '0.5rem'\n    }\n  })\n}\n","import type {\n  PickedDate,\n  CalendarViewMode,\n  CalendarSelectionMode\n} from '@components/commons/toolkit/Calendar/types'\n\nexport * from '@components/commons/toolkit/Calendar/types'\n\nexport interface DatePickerProps {\n  label: string\n  value: PickedDate\n\n  isDateTimePicker?: boolean\n\n  required?: boolean\n  disabled?: boolean\n  placeholder?: string\n  errorMessage?: string\n  disablePastDates?: boolean\n  scrollContainerId: string\n  viewMode?: CalendarViewMode\n  selectionMode?: CalendarSelectionMode\n\n  dateFormat?: string\n  onChange: (value: PickedDate) => void\n}\n","// External Libraries\nimport type React from 'react'\n\n// Components\nimport { Button } from '@components/commons/buttons/Button'\nimport { Calendar } from '@components/commons/toolkit/Calendar'\nimport { DatePickerTrigger } from './components/DatePickerTrigger'\nimport { BasePopover } from '@components/commons/structure/BasePopover'\n\n// Hooks\nimport { useDatePicker } from './hooks/useDatePicker'\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { DatePickerProps } from './types'\nimport type { PopoverTriggerRenderProps } from '@components/commons/toolkit/Popover/types'\n\n// Styles\nimport { createDatePickerStyles } from './styles'\n\nexport * as DatePickerTypes from './types'\n\nexport const DatePicker: React.FC<DatePickerProps> = props => {\n  // Hooks\n  const {\n    isOpen,\n    selectedDate,\n    toggleDialog,\n    handleDateChange,\n    handleConfirmClick\n  } = useDatePicker(props)\n  const { styles } = useThemedStyles(props, createDatePickerStyles, {\n    pick: p => [\n      p.value,\n      p.disabled,\n      p.viewMode,\n      p.errorMessage,\n      p.disablePastDates\n    ],\n    applyCommonProps: true,\n    commonSlot: 'container'\n  })\n\n  // Constants\n  const isSingleMode = props.viewMode === 'single'\n\n  // Functions\n  function renderTrigger({\n    ref,\n    ariaExpanded,\n    onClick\n  }: PopoverTriggerRenderProps) {\n    return (\n      <DatePickerTrigger\n        {...props}\n        ref={ref as any}\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        trigger={renderTrigger}\n        onOpenChange={toggleDialog}\n        floatingOptions={{\n          strategy: 'fixed',\n          placement: 'bottom-start',\n          scrollContainerId: props.scrollContainerId\n        }}\n      >\n        <Calendar\n          value={selectedDate}\n          viewMode={props.viewMode ?? 'double'}\n          isDateTimePicker={props.isDateTimePicker}\n          disablePastDates={props.disablePastDates}\n          selectionMode={props.selectionMode ?? 'range'}\n          onChange={handleDateChange}\n        />\n\n        {isSingleMode ? <hr style={styles.divider} /> : null}\n\n        <div style={styles.buttonsContainer}>\n          <Button\n            size=\"sm\"\n            type=\"button\"\n            label=\"Cancelar\"\n            variant=\"outlined\"\n            fullWidth={isSingleMode}\n            onClick={() => toggleDialog(false)}\n          />\n\n          <Button\n            type=\"button\"\n            label=\"Aplicar\"\n            variant=\"filled\"\n            fullWidth={isSingleMode}\n            onClick={handleConfirmClick}\n          />\n        </div>\n      </BasePopover>\n    </div>\n  )\n}\n"],"mappings":"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"}

package/dist/{IconButton-qBhQj30V.js → IconButton-BGiieVPY.js}

@@ -3,7 +3,7 @@ import { jsx } from "react/jsx-runtime";
 
 //#region src/components/commons/buttons/IconButton/styles.ts
 function createIconButtonStyles(props) {
-	const { variant = "outlined", size = "md", borderColor, backgroundColor } = props;
+	const { variant = "outlined", size = "md", borderColor, backgroundColor, rounded = "var(--px-radius-lg)" } = props;
 	return styled({ button: {
 		...getSize(size),
 		display: "flex",
@@ -11,7 +11,7 @@ function createIconButtonStyles(props) {
 		justifyContent: "center",
 		cursor: "pointer",
 		userSelect: "none",
-		borderRadius: "var(--px-radius-lg)",
+		borderRadius: rounded,
 		border: getBorder(variant, borderColor),
 		backgroundColor: getBackgroundColor(variant, backgroundColor),
 		boxShadow: "var(--px-shadow-xs)",
@@ -95,4 +95,4 @@ const IconButton = (props) => {
 
 //#endregion
 export { IconButton as t };
-//# sourceMappingURL=IconButton-qBhQj30V.js.map
+//# sourceMappingURL=IconButton-BGiieVPY.js.map

package/dist/IconButton-BGiieVPY.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconButton-BGiieVPY.js","names":["IconButton: React.FC<IconButtonProps>"],"sources":["../src/components/commons/buttons/IconButton/styles.ts","../src/components/commons/buttons/IconButton/index.tsx"],"sourcesContent":["// Types\nimport type {\n  IconButtonSize,\n  IconButtonProps,\n  IconButtonVariant\n} from './types'\nimport { styled } from '@hooks/useThemedStyles/types'\n\nexport function createIconButtonStyles(props: IconButtonProps) {\n  const {\n    variant = 'outlined',\n    size = 'md',\n    borderColor,\n    backgroundColor,\n    rounded = 'var(--px-radius-lg)'\n  } = props\n\n  return styled({\n    button: {\n      ...getSize(size),\n\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n\n      cursor: 'pointer',\n      userSelect: 'none',\n\n      borderRadius: rounded,\n      border: getBorder(variant, borderColor),\n      backgroundColor: getBackgroundColor(variant, backgroundColor),\n      boxShadow: 'var(--px-shadow-xs)',\n\n      __rules: {\n        '&:hover': {\n          opacity: '0.85 !important'\n        },\n\n        '&:disabled': {\n          opacity: '0.5',\n          cursor: 'not-allowed'\n        },\n\n        '&:focus': {\n          outlineOffset: '2px',\n          outline: '2px solid var(--px-color-primary) !important'\n        }\n      }\n    }\n  })\n}\n\nfunction getSize(size: IconButtonSize) {\n  switch (size) {\n    case 'lg':\n      return { minHeight: '3.25rem', minWidth: '3.25rem' }\n    case 'md':\n      return { minHeight: '2.75rem', minWidth: '2.75rem' }\n    case 'sm':\n      return { minHeight: '2.25rem', minWidth: '2.25rem' }\n    case 'xs':\n      return { minHeight: '1.75rem', minWidth: '1.75rem' }\n    default:\n      return { minHeight: size, minWidth: size }\n  }\n}\n\nfunction getBackgroundColor(\n  variant?: IconButtonVariant,\n  color?: string\n): string {\n  if (color) return color\n\n  if (variant === 'filled') return 'var(--px-btn-filled-bg)'\n\n  if (variant === 'outlined') return 'transparent'\n\n  if (variant === 'ghost') return 'transparent'\n\n  return 'var(--px-btn-outlined-bg)'\n}\n\nfunction getBorder(variant?: IconButtonVariant, color?: string): string {\n  if (color) return `1px solid ${color}`\n\n  if (variant === 'filled') return '1px solid var(--px-btn-filled-bg)'\n\n  if (variant === 'outlined') return '1px solid var(--px-border-primary)'\n\n  if (variant === 'ghost') return 'none'\n\n  return '1px solid var(--px-color-primary)'\n}\n","// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { IconButtonProps } from './types'\n\n// Styles\nimport { createIconButtonStyles } from './styles'\n\nexport const IconButton: React.FC<IconButtonProps> = props => {\n  // Constants\n  const disabled = props.isDisabled || props.isLoading\n\n  // Hooks\n  const { styles, classes } = useThemedStyles(props, createIconButtonStyles, {\n    pick: p => [p.size, p.variant, p.borderColor, p.backgroundColor],\n    override: props.styles,\n    applyCommonProps: true,\n    commonSlot: 'button'\n  })\n\n  return (\n    <button\n      disabled={disabled}\n      aria-busy={props.isLoading}\n      type=\"button\"\n      className={classes.button}\n      style={styles.button}\n      onClick={props.onClick}\n    >\n      {props.icon}\n    </button>\n  )\n}\n"],"mappings":";;;;AAQA,SAAgB,uBAAuB,OAAwB;CAC7D,MAAM,EACJ,UAAU,YACV,OAAO,MACP,aACA,iBACA,UAAU,0BACR;AAEJ,QAAO,OAAO,EACZ,QAAQ;EACN,GAAG,QAAQ,KAAK;EAEhB,SAAS;EACT,YAAY;EACZ,gBAAgB;EAEhB,QAAQ;EACR,YAAY;EAEZ,cAAc;EACd,QAAQ,UAAU,SAAS,YAAY;EACvC,iBAAiB,mBAAmB,SAAS,gBAAgB;EAC7D,WAAW;EAEX,SAAS;GACP,WAAW,EACT,SAAS,mBACV;GAED,cAAc;IACZ,SAAS;IACT,QAAQ;IACT;GAED,WAAW;IACT,eAAe;IACf,SAAS;IACV;GACF;EACF,EACF,CAAC;;AAGJ,SAAS,QAAQ,MAAsB;AACrC,SAAQ,MAAR;EACE,KAAK,KACH,QAAO;GAAE,WAAW;GAAW,UAAU;GAAW;EACtD,KAAK,KACH,QAAO;GAAE,WAAW;GAAW,UAAU;GAAW;EACtD,KAAK,KACH,QAAO;GAAE,WAAW;GAAW,UAAU;GAAW;EACtD,KAAK,KACH,QAAO;GAAE,WAAW;GAAW,UAAU;GAAW;EACtD,QACE,QAAO;GAAE,WAAW;GAAM,UAAU;GAAM;;;AAIhD,SAAS,mBACP,SACA,OACQ;AACR,KAAI,MAAO,QAAO;AAElB,KAAI,YAAY,SAAU,QAAO;AAEjC,KAAI,YAAY,WAAY,QAAO;AAEnC,KAAI,YAAY,QAAS,QAAO;AAEhC,QAAO;;AAGT,SAAS,UAAU,SAA6B,OAAwB;AACtE,KAAI,MAAO,QAAO,aAAa;AAE/B,KAAI,YAAY,SAAU,QAAO;AAEjC,KAAI,YAAY,WAAY,QAAO;AAEnC,KAAI,YAAY,QAAS,QAAO;AAEhC,QAAO;;;;;AClFT,MAAaA,cAAwC,UAAS;CAE5D,MAAM,WAAW,MAAM,cAAc,MAAM;CAG3C,MAAM,EAAE,QAAQ,YAAY,gBAAgB,OAAO,wBAAwB;EACzE,OAAM,MAAK;GAAC,EAAE;GAAM,EAAE;GAAS,EAAE;GAAa,EAAE;GAAgB;EAChE,UAAU,MAAM;EAChB,kBAAkB;EAClB,YAAY;EACb,CAAC;AAEF,QACE,oBAAC;EACW;EACV,aAAW,MAAM;EACjB,MAAK;EACL,WAAW,QAAQ;EACnB,OAAO,OAAO;EACd,SAAS,MAAM;YAEd,MAAM;GACA"}