@12-apps/ui 6.35.0 → 6.37.0

package/dist/chunk-LNHYBA4B.js

@@ -0,0 +1,351 @@
+import {
+  usePhoneInput
+} from "./chunk-BGYLL467.js";
+import {
+  countries
+} from "./chunk-3JDP5OUR.js";
+import {
+  fieldControlStyles,
+  fieldTextFieldStyles
+} from "./chunk-CGO452DC.js";
+import {
+  fieldRadius
+} from "./chunk-GDN2LUTZ.js";
+import {
+  fieldEdge
+} from "./chunk-7FDU3FIN.js";
+import {
+  rem,
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/form/PhoneInput/PhoneInput.tsx
+import ArrowDropDown from "@mui/icons-material/ArrowDropDown";
+import PhoneIcon from "@mui/icons-material/Phone";
+import Box from "@mui/material/Box/index.js";
+import InputAdornment from "@mui/material/InputAdornment/index.js";
+import ListItemIcon from "@mui/material/ListItemIcon/index.js";
+import ListItemText from "@mui/material/ListItemText/index.js";
+import Menu from "@mui/material/Menu/index.js";
+import MenuItem from "@mui/material/MenuItem/index.js";
+import TextField from "@mui/material/TextField/index.js";
+import Typography from "@mui/material/Typography/index.js";
+import { alpha, styled, useTheme } from "@mui/material/styles/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var FieldTextField = styled(TextField)(({ theme }) => fieldTextFieldStyles(theme));
+var GlassTextField = styled(TextField)(({ theme }) => ({
+  ...fieldControlStyles(theme),
+  "& .MuiOutlinedInput-root": {
+    borderRadius: fieldRadius(theme),
+    background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.8)} 0%, ${alpha(theme.palette.background.paper, 0.6)} 100%)`,
+    backdropFilter: `blur(${rem(theme, 10)})`,
+    WebkitBackdropFilter: `blur(${rem(theme, 10)})`,
+    border: `1px solid ${fieldEdge(theme)}`,
+    transition: theme.transitions.create(["border-color", "box-shadow", "background"]),
+    "&:hover": {
+      background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.9)} 0%, ${alpha(theme.palette.background.paper, 0.7)} 100%)`,
+      borderColor: theme.palette.primary.main
+    },
+    "&.Mui-focused": {
+      background: theme.palette.background.paper,
+      boxShadow: `0 0 0 ${rem(theme, 2)} ${alpha(theme.palette.primary.main, 0.25)}`
+    },
+    "& fieldset": {
+      border: "none"
+    }
+  },
+  "& .MuiInputLabel-root": {
+    "&.Mui-focused": {
+      color: theme.palette.primary.main
+    }
+  }
+}));
+var CountrySelector = styled(Box)(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  padding: theme.spacing(0.5, 1),
+  borderRadius: theme.shape.borderRadius,
+  cursor: "pointer",
+  transition: theme.transitions.create(["background-color"]),
+  "&:hover": {
+    backgroundColor: alpha(theme.palette.primary.main, 0.08)
+  }
+}));
+var CountryMenu = styled(Menu)(({ theme }) => ({
+  "& .MuiPaper-root": {
+    background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.98)} 0%, ${alpha(theme.palette.background.paper, 0.95)} 100%)`,
+    backdropFilter: `blur(${rem(theme, 20)})`,
+    WebkitBackdropFilter: `blur(${rem(theme, 20)})`,
+    border: `1px solid ${alpha(theme.palette.divider, 0.18)}`,
+    maxHeight: rem(theme, 400)
+  }
+}));
+var PhoneField = ({
+  TextFieldComponent,
+  copy,
+  variant,
+  label,
+  placeholder,
+  value,
+  validation,
+  disabled,
+  required,
+  fullWidth,
+  icon,
+  isValid,
+  selectedCountry,
+  anchorEl,
+  onChange,
+  onFocus,
+  onBlur,
+  onCountryOpen,
+  onCountryOpenViaKeyboard
+}) => /* @__PURE__ */ jsx(
+  TextFieldComponent,
+  {
+    variant: variant === "glass" ? "outlined" : variant,
+    label,
+    placeholder,
+    value,
+    onChange,
+    onFocus,
+    onBlur,
+    error: validation.hasError,
+    helperText: validation.helperText,
+    disabled,
+    required,
+    fullWidth,
+    type: "tel",
+    "data-testid": "phone-input-field",
+    InputProps: {
+      startAdornment: /* @__PURE__ */ jsx(
+        CountryAdornment,
+        {
+          selectCountryLabel: copy.selectCountry,
+          country: selectedCountry,
+          menuOpen: Boolean(anchorEl),
+          onOpen: onCountryOpen,
+          onOpenViaKeyboard: onCountryOpenViaKeyboard
+        }
+      ),
+      endAdornment: /* @__PURE__ */ jsx(ValidityAdornment, { icon, isValid })
+    },
+    sx: {
+      "& input": {
+        letterSpacing: sxRem(0.5)
+      }
+    }
+  }
+);
+var PHONE_INPUT_DEFAULTS = {
+  variant: "outlined",
+  label: "Phone Number",
+  placeholder: "Enter phone number",
+  icon: /* @__PURE__ */ jsx(PhoneIcon, {}),
+  defaultValue: "",
+  countryCode: "US",
+  floating: false,
+  error: false,
+  disabled: false,
+  required: false,
+  fullWidth: true
+};
+var definedProps = (props) => Object.fromEntries(
+  Object.entries(props).filter(([, value]) => value !== void 0)
+);
+var CountryAdornment = ({ country, menuOpen, onOpen, onOpenViaKeyboard, selectCountryLabel }) => /* @__PURE__ */ jsx(InputAdornment, { position: "start", "data-testid": "phone-input-start-adornment", children: /* @__PURE__ */ jsxs(
+  CountrySelector,
+  {
+    onClick: onOpen,
+    role: "button",
+    "aria-label": selectCountryLabel,
+    "aria-expanded": menuOpen,
+    tabIndex: 0,
+    "data-testid": "country-selector",
+    onKeyDown: (e) => {
+      if (e.key !== "Enter" && e.key !== " ") return;
+      e.preventDefault();
+      onOpenViaKeyboard(e.currentTarget);
+    },
+    children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "h6", component: "span", sx: { mr: 0.5 }, "data-testid": "country-flag", children: country?.flag }),
+      /* @__PURE__ */ jsx(
+        Typography,
+        {
+          variant: "body2",
+          color: "text.secondary",
+          sx: { mr: 0.5 },
+          "data-testid": "country-dial-code",
+          children: country?.dial
+        }
+      ),
+      /* @__PURE__ */ jsx(ArrowDropDown, { fontSize: "small", "data-testid": "country-dropdown-icon" })
+    ]
+  }
+) });
+var ValidityAdornment = ({
+  icon,
+  isValid
+}) => {
+  const theme = useTheme();
+  if (!icon) return null;
+  return /* @__PURE__ */ jsx(InputAdornment, { position: "end", "data-testid": "phone-input-end-adornment", children: /* @__PURE__ */ jsx(
+    Box,
+    {
+      sx: {
+        color: isValid ? theme.palette.success.main : theme.palette.text.secondary,
+        transition: "color 0.3s ease"
+      },
+      "data-testid": "phone-input-icon",
+      children: icon
+    }
+  ) });
+};
+var CountryPicker = ({ anchorEl, selectedCode, onClose, onSelect }) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx(
+    CountryMenu,
+    {
+      anchorEl,
+      open: Boolean(anchorEl),
+      onClose,
+      anchorOrigin: {
+        vertical: "bottom",
+        horizontal: "left"
+      },
+      transformOrigin: {
+        vertical: "top",
+        horizontal: "left"
+      },
+      "data-testid": "country-menu",
+      children: countries.map((country) => /* @__PURE__ */ jsxs(
+        MenuItem,
+        {
+          onClick: () => onSelect(country),
+          selected: country.code === selectedCode,
+          "data-testid": `country-option-${country.code}`,
+          sx: {
+            "&:hover": {
+              background: `linear-gradient(135deg, ${alpha(theme.palette.primary.main, 0.1)} 0%, ${alpha(theme.palette.primary.main, 0.05)} 100%)`
+            }
+          },
+          children: [
+            /* @__PURE__ */ jsx(ListItemIcon, { sx: { minWidth: sxRem(36) }, children: /* @__PURE__ */ jsx(Typography, { variant: "h5", component: "span", children: country.flag }) }),
+            /* @__PURE__ */ jsx(
+              ListItemText,
+              {
+                primary: country.name,
+                secondary: country.dial,
+                primaryTypographyProps: { fontSize: rem(theme, 14.4) },
+                secondaryTypographyProps: { fontSize: rem(theme, 12.8) }
+              }
+            )
+          ]
+        },
+        country.code
+      ))
+    }
+  );
+};
+var resolveValidation = ({
+  error,
+  errorMessage,
+  isValid,
+  value,
+  isFocused,
+  helper,
+  countryName,
+  copy
+}) => {
+  const looksInvalid = !isValid && value !== "" && !isFocused;
+  return {
+    hasError: error || looksInvalid,
+    helperText: errorMessage || (looksInvalid ? copy.invalidNumber(countryName || copy.unknownCountry) : helper)
+  };
+};
+var PhoneInput = (props) => {
+  const { copy } = props;
+  const {
+    variant,
+    label,
+    placeholder,
+    icon,
+    defaultValue,
+    countryCode: initialCountryCode,
+    floating,
+    onChange,
+    helper,
+    error,
+    errorMessage,
+    disabled,
+    required,
+    fullWidth
+  } = { ...PHONE_INPUT_DEFAULTS, ...definedProps(props) };
+  const {
+    value,
+    selectedCountry,
+    anchorEl,
+    isValid,
+    isFocused,
+    setIsFocused,
+    setAnchorEl,
+    handleCountryClick,
+    handleCountryClose,
+    handleCountrySelect,
+    handleChange,
+    handleBlur
+  } = usePhoneInput({ defaultValue, initialCountryCode, onChange });
+  const validation = resolveValidation({
+    error,
+    errorMessage,
+    isValid,
+    value,
+    isFocused,
+    helper,
+    countryName: selectedCountry?.name,
+    copy
+  });
+  const TextFieldComponent = variant === "glass" ? GlassTextField : FieldTextField;
+  return /* @__PURE__ */ jsxs(Box, { "data-testid": "phone-input-container", children: [
+    /* @__PURE__ */ jsx(
+      PhoneField,
+      {
+        copy,
+        TextFieldComponent,
+        variant,
+        label: floating ? void 0 : label,
+        placeholder,
+        value,
+        validation,
+        disabled,
+        required,
+        fullWidth,
+        icon,
+        isValid,
+        selectedCountry,
+        anchorEl,
+        onChange: handleChange,
+        onFocus: () => setIsFocused(true),
+        onBlur: handleBlur,
+        onCountryOpen: handleCountryClick,
+        onCountryOpenViaKeyboard: setAnchorEl
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      CountryPicker,
+      {
+        anchorEl,
+        selectedCode: selectedCountry?.code,
+        onClose: handleCountryClose,
+        onSelect: handleCountrySelect
+      }
+    )
+  ] });
+};
+var PhoneInput_default = PhoneInput;
+
+export {
+  PhoneInput,
+  PhoneInput_default
+};
+//# sourceMappingURL=chunk-LNHYBA4B.js.map

package/dist/chunk-LNHYBA4B.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/PhoneInput/PhoneInput.tsx"],"sourcesContent":["import ArrowDropDown from '@mui/icons-material/ArrowDropDown';\nimport PhoneIcon from '@mui/icons-material/Phone';\nimport Box from '@mui/material/Box/index.js';\nimport InputAdornment from '@mui/material/InputAdornment/index.js';\nimport ListItemIcon from '@mui/material/ListItemIcon/index.js';\nimport ListItemText from '@mui/material/ListItemText/index.js';\nimport Menu from '@mui/material/Menu/index.js';\nimport MenuItem from '@mui/material/MenuItem/index.js';\nimport TextField from '@mui/material/TextField/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { alpha, styled, useTheme } from '@mui/material/styles/index.js';\nimport type { FC} from 'react';\nimport React, {  } from 'react';\n\nimport { countries } from './countries';\nimport { usePhoneInput } from './PhoneInput.hooks';\nimport type { CountryData,PhoneInputProps } from './PhoneInput.types';\nimport type { PhoneInputCopy } from '../../../copy';\n\nimport { fieldEdge } from '../../../tokens/field-edge';\nimport { fieldRadius } from '../../../tokens/field-radius';\nimport { fieldControlStyles, fieldTextFieldStyles } from '../../../tokens/field-height';\nimport { rem, sxRem } from '../../../tokens/relative';\n\n// Country data with expanded support\n\n// Styled components\n/** The plain variant: MUI's own field, on the theme's field radius. */\nconst FieldTextField = styled(TextField)(({ theme }) => fieldTextFieldStyles(theme));\n\nconst GlassTextField = styled(TextField)(({ theme }) => ({\n  ...fieldControlStyles(theme),\n  '& .MuiOutlinedInput-root': {\n    borderRadius: fieldRadius(theme),\n    background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.8)} 0%, ${alpha(theme.palette.background.paper, 0.6)} 100%)`,\n    backdropFilter: `blur(${rem(theme, 10)})`,\n    WebkitBackdropFilter: `blur(${rem(theme, 10)})`,\n    border: `1px solid ${fieldEdge(theme)}`,\n    transition: theme.transitions.create(['border-color', 'box-shadow', 'background']),\n    '&:hover': {\n      background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.9)} 0%, ${alpha(theme.palette.background.paper, 0.7)} 100%)`,\n      borderColor: theme.palette.primary.main },\n    '&.Mui-focused': {\n      background: theme.palette.background.paper,\n      boxShadow: `0 0 0 ${rem(theme, 2)} ${alpha(theme.palette.primary.main, 0.25)}` },\n    '& fieldset': {\n      border: 'none' } },\n  '& .MuiInputLabel-root': {\n    '&.Mui-focused': {\n      color: theme.palette.primary.main } } }));\n\nconst CountrySelector = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  padding: theme.spacing(0.5, 1),\n  borderRadius: theme.shape.borderRadius,\n  cursor: 'pointer',\n  transition: theme.transitions.create(['background-color']),\n  '&:hover': {\n    backgroundColor: alpha(theme.palette.primary.main, 0.08) } }));\n\nconst CountryMenu = styled(Menu)(({ theme }) => ({\n  '& .MuiPaper-root': {\n    background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.98)} 0%, ${alpha(theme.palette.background.paper, 0.95)} 100%)`,\n    backdropFilter: `blur(${rem(theme, 20)})`,\n    WebkitBackdropFilter: `blur(${rem(theme, 20)})`,\n    border: `1px solid ${alpha(theme.palette.divider, 0.18)}`,\n    maxHeight: rem(theme, 400) } }));\n\n// Helper functions with enhanced validation\n// The text field itself with its two adornments. Split out so PhoneInput is\n// prop defaults, the hook call and composition.\nconst PhoneField: React.FC<{\n  TextFieldComponent: React.ElementType;\n  variant: PhoneInputProps['variant'];\n  label?: React.ReactNode;\n  placeholder?: string;\n  value: string;\n  validation: { hasError: boolean; helperText?: React.ReactNode };\n  disabled: boolean;\n  required: boolean;\n  fullWidth: boolean;\n  icon?: React.ReactNode;\n  isValid: boolean;\n  selectedCountry?: CountryData;\n  anchorEl: HTMLElement | null;\n  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;\n  onFocus: () => void;\n  onBlur: () => void;\n  onCountryOpen: (event: React.MouseEvent<HTMLElement>) => void;\n  onCountryOpenViaKeyboard: (element: HTMLElement) => void;\n  copy: PhoneInputCopy;\n}> = ({\n  TextFieldComponent,\n  copy,\n  variant,\n  label,\n  placeholder,\n  value,\n  validation,\n  disabled,\n  required,\n  fullWidth,\n  icon,\n  isValid,\n  selectedCountry,\n  anchorEl,\n  onChange,\n  onFocus,\n  onBlur,\n  onCountryOpen,\n  onCountryOpenViaKeyboard }) => (\n      <TextFieldComponent\n        variant={variant === 'glass' ? 'outlined' : variant}\n        label={label}\n        placeholder={placeholder}\n        value={value}\n        onChange={onChange}\n        onFocus={onFocus}\n        onBlur={onBlur}\n        error={validation.hasError}\n        helperText={validation.helperText}\n        disabled={disabled}\n        required={required}\n        fullWidth={fullWidth}\n        type=\"tel\"\n        data-testid=\"phone-input-field\"\n        InputProps={{\n          startAdornment: (\n            <CountryAdornment\n              selectCountryLabel={copy.selectCountry}\n              country={selectedCountry}\n              menuOpen={Boolean(anchorEl)}\n              onOpen={onCountryOpen}\n              onOpenViaKeyboard={onCountryOpenViaKeyboard}\n            />\n          ),\n          endAdornment: <ValidityAdornment icon={icon} isValid={isValid} /> }}\n        sx={{\n          '& input': {\n            letterSpacing: sxRem(0.5) } }}\n      />\n);\n\nconst PHONE_INPUT_DEFAULTS = {\n  variant: 'outlined',\n  label: 'Phone Number',\n  placeholder: 'Enter phone number',\n  icon: <PhoneIcon />,\n  defaultValue: '',\n  countryCode: 'US',\n  floating: false,\n  error: false,\n  disabled: false,\n  required: false,\n  fullWidth: true } satisfies Partial<PhoneInputProps>;\n\n// Drops explicitly-undefined props before the merge, so `prop={undefined}` falls\n// back to the default exactly as a destructuring default would. Eleven separate\n// destructuring defaults were most of this component's branch count.\nconst definedProps = (props: PhoneInputProps): Partial<PhoneInputProps> =>\n  Object.fromEntries(\n    Object.entries(props).filter(([, value]) => value !== undefined),\n  ) as Partial<PhoneInputProps>;\n\nconst CountryAdornment: React.FC<{\n  country?: CountryData;\n  menuOpen: boolean;\n  onOpen: (event: React.MouseEvent<HTMLElement>) => void;\n  onOpenViaKeyboard: (element: HTMLElement) => void;\n  selectCountryLabel: string;\n}> = ({ country, menuOpen, onOpen, onOpenViaKeyboard, selectCountryLabel }) => (\n  <InputAdornment position=\"start\" data-testid=\"phone-input-start-adornment\">\n    <CountrySelector\n      onClick={onOpen}\n      role=\"button\"\n      aria-label={selectCountryLabel}\n      aria-expanded={menuOpen}\n      tabIndex={0}\n      data-testid=\"country-selector\"\n      onKeyDown={(e) => {\n        if (e.key !== 'Enter' && e.key !== ' ') return;\n        e.preventDefault();\n        onOpenViaKeyboard(e.currentTarget as HTMLElement);\n      }}\n    >\n      <Typography variant=\"h6\" component=\"span\" sx={{ mr: 0.5 }} data-testid=\"country-flag\">\n        {country?.flag}\n      </Typography>\n      <Typography\n        variant=\"body2\"\n        color=\"text.secondary\"\n        sx={{ mr: 0.5 }}\n        data-testid=\"country-dial-code\"\n      >\n        {country?.dial}\n      </Typography>\n      <ArrowDropDown fontSize=\"small\" data-testid=\"country-dropdown-icon\" />\n    </CountrySelector>\n  </InputAdornment>\n);\n\n// The trailing icon turns green once the number validates.\nconst ValidityAdornment: React.FC<{ icon?: React.ReactNode; isValid: boolean }> = ({\n  icon,\n  isValid }) => {\n  const theme = useTheme();\n\n  if (!icon) return null;\n\n  return (\n    <InputAdornment position=\"end\" data-testid=\"phone-input-end-adornment\">\n      <Box\n        sx={{\n          color: isValid ? theme.palette.success.main : theme.palette.text.secondary,\n          transition: 'color 0.3s ease' }}\n        data-testid=\"phone-input-icon\"\n      >\n        {icon}\n      </Box>\n    </InputAdornment>\n  );\n};\n\nconst CountryPicker: React.FC<{\n  anchorEl: HTMLElement | null;\n  selectedCode?: CountryData['code'];\n  onClose: () => void;\n  onSelect: (country: CountryData) => void;\n}> = ({ anchorEl, selectedCode, onClose, onSelect }) => {\n  const theme = useTheme();\n\n  return (\n        <CountryMenu\n          anchorEl={anchorEl}\n          open={Boolean(anchorEl)}\n          onClose={onClose}\n          anchorOrigin={{\n            vertical: 'bottom',\n            horizontal: 'left' }}\n          transformOrigin={{\n            vertical: 'top',\n            horizontal: 'left' }}\n          data-testid=\"country-menu\"\n        >\n          {countries.map((country) => (\n            <MenuItem\n              key={country.code}\n              onClick={() => onSelect(country)}\n              selected={country.code === selectedCode}\n              data-testid={`country-option-${country.code}`}\n              sx={{\n                '&:hover': {\n                  background: `linear-gradient(135deg, ${alpha(theme.palette.primary.main, 0.1)} 0%, ${alpha(theme.palette.primary.main, 0.05)} 100%)` } }}\n            >\n              <ListItemIcon sx={{ minWidth: sxRem(36) }}>\n                <Typography variant=\"h5\" component=\"span\">\n                  {country.flag}\n                </Typography>\n              </ListItemIcon>\n              <ListItemText\n                primary={country.name}\n                secondary={country.dial}\n                primaryTypographyProps={{ fontSize: rem(theme, 14.4) }}\n                secondaryTypographyProps={{ fontSize: rem(theme, 12.8) }}\n              />\n            </MenuItem>\n          ))}\n        </CountryMenu>\n  );\n};\n\n// The field shows an error either because the caller says so, or because what\n// has been typed does not validate and the user has moved on.\nconst resolveValidation = ({\n  error,\n  errorMessage,\n  isValid,\n  value,\n  isFocused,\n  helper,\n  countryName,\n  copy }: {\n  error: boolean;\n  errorMessage?: string;\n  isValid: boolean;\n  value: string;\n  isFocused: boolean;\n  helper?: React.ReactNode;\n  countryName?: string;\n  copy: PhoneInputCopy;\n}) => {\n  const looksInvalid = !isValid && value !== '' && !isFocused;\n\n  return {\n    hasError: error || looksInvalid,\n    helperText:\n      errorMessage ||\n      (looksInvalid ? copy.invalidNumber(countryName || copy.unknownCountry) : helper) };\n};\n\nexport const PhoneInput: FC<PhoneInputProps> = (props) => {\n  const { copy } = props;\n  const {\n    variant,\n    label,\n    placeholder,\n    icon,\n    defaultValue,\n    countryCode: initialCountryCode,\n    floating,\n    onChange,\n    helper,\n    error,\n    errorMessage,\n    disabled,\n    required,\n    fullWidth } = { ...PHONE_INPUT_DEFAULTS, ...definedProps(props) };\n  const {\n    value,\n    selectedCountry,\n    anchorEl,\n    isValid,\n    isFocused,\n    setIsFocused,\n    setAnchorEl,\n    handleCountryClick,\n    handleCountryClose,\n    handleCountrySelect,\n    handleChange,\n    handleBlur } = usePhoneInput({ defaultValue, initialCountryCode, onChange });\n\n  const validation = resolveValidation({\n    error,\n    errorMessage,\n    isValid,\n    value,\n    isFocused,\n    helper,\n    countryName: selectedCountry?.name,\n    copy });\n\n  const TextFieldComponent = variant === 'glass' ? GlassTextField : FieldTextField;\n\n  return (\n    <Box data-testid=\"phone-input-container\">\n      <PhoneField\n        copy={copy}\n        TextFieldComponent={TextFieldComponent}\n        variant={variant}\n        label={floating ? undefined : label}\n        placeholder={placeholder}\n        value={value}\n        validation={validation}\n        disabled={disabled}\n        required={required}\n        fullWidth={fullWidth}\n        icon={icon}\n        isValid={isValid}\n        selectedCountry={selectedCountry}\n        anchorEl={anchorEl}\n        onChange={handleChange}\n        onFocus={() => setIsFocused(true)}\n        onBlur={handleBlur}\n        onCountryOpen={handleCountryClick}\n        onCountryOpenViaKeyboard={setAnchorEl}\n      />\n\n      <CountryPicker\n        anchorEl={anchorEl}\n        selectedCode={selectedCountry?.code}\n        onClose={handleCountryClose}\n        onSelect={handleCountrySelect}\n      />\n    </Box>\n  );\n};\n\n// Export default\nexport default PhoneInput;\n"],"mappings":"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","names":[]}

package/dist/chunk-LP3JCXER.js

@@ -0,0 +1,98 @@
+import {
+  sizeStyles
+} from "./chunk-FERUQ7OB.js";
+import {
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/form/Menubar/Menubar.item.tsx
+import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
+import Box from "@mui/material/Box/index.js";
+import Button from "@mui/material/Button/index.js";
+import Chip from "@mui/material/Chip/index.js";
+import Divider from "@mui/material/Divider/index.js";
+import ListItemIcon from "@mui/material/ListItemIcon/index.js";
+import ListItemText from "@mui/material/ListItemText/index.js";
+import Menu from "@mui/material/Menu/index.js";
+import MenuItem from "@mui/material/MenuItem/index.js";
+import { useTheme } from "@mui/material/styles/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DropdownItem = ({
+  child,
+  onActivate
+}) => child.divider ? /* @__PURE__ */ jsx(Divider, {}) : /* @__PURE__ */ jsxs(MenuItem, { onClick: () => onActivate(child), disabled: child.disabled, children: [
+  child.icon && /* @__PURE__ */ jsx(ListItemIcon, { children: child.icon }),
+  /* @__PURE__ */ jsx(ListItemText, { children: child.label }),
+  child.shortcut && /* @__PURE__ */ jsx(
+    Chip,
+    {
+      label: child.shortcut,
+      size: "small",
+      variant: "outlined",
+      sx: { ml: 2, height: sxRem(20), fontSize: sxRem(11.2) }
+    }
+  )
+] });
+var MenubarItemView = ({
+  item,
+  size,
+  disabled,
+  isOpen,
+  anchorEl,
+  onOpen,
+  onActivate,
+  onClose,
+  onFocus,
+  onBlur
+}) => {
+  const theme = useTheme();
+  const hasChildren = Boolean(item.children && item.children.length > 0);
+  const activate = (target) => {
+    if (hasChildren) {
+      onOpen(item.id, target);
+    } else {
+      onActivate(item);
+    }
+  };
+  return /* @__PURE__ */ jsxs(Box, { children: [
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        "data-testid": `menubar-button-${item.id}`,
+        onClick: (e) => activate(e.currentTarget),
+        onKeyDown: (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            activate(e.currentTarget);
+          }
+        },
+        onMouseDown: (e) => e.preventDefault(),
+        onFocus,
+        onBlur,
+        disabled: item.disabled || disabled,
+        startIcon: item.icon,
+        endIcon: hasChildren ? /* @__PURE__ */ jsx(KeyboardArrowDownIcon, {}) : null,
+        "aria-haspopup": hasChildren ? "menu" : void 0,
+        "aria-expanded": hasChildren ? isOpen : void 0,
+        sx: { color: "inherit", textTransform: "none", ...sizeStyles(theme, size) },
+        children: item.label
+      }
+    ),
+    hasChildren && /* @__PURE__ */ jsx(
+      Menu,
+      {
+        anchorEl,
+        open: isOpen,
+        onClose,
+        autoFocus: true,
+        PaperProps: { sx: { minWidth: sxRem(200), mt: 1 } },
+        children: item.children?.map((child) => /* @__PURE__ */ jsx(DropdownItem, { child, onActivate }, child.id))
+      }
+    )
+  ] });
+};
+
+export {
+  MenubarItemView
+};
+//# sourceMappingURL=chunk-LP3JCXER.js.map

package/dist/chunk-LP3JCXER.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/Menubar/Menubar.item.tsx"],"sourcesContent":["import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';\nimport Box from '@mui/material/Box/index.js';\nimport Button from '@mui/material/Button/index.js';\nimport Chip from '@mui/material/Chip/index.js';\nimport Divider from '@mui/material/Divider/index.js';\nimport ListItemIcon from '@mui/material/ListItemIcon/index.js';\nimport ListItemText from '@mui/material/ListItemText/index.js';\nimport Menu from '@mui/material/Menu/index.js';\nimport MenuItem from '@mui/material/MenuItem/index.js';\nimport { useTheme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport { sizeStyles } from './Menubar.styles';\nimport type { MenubarItem, MenubarProps } from './Menubar.types';\nimport { sxRem } from '../../../tokens/relative';\n\nexport interface MenubarItemViewProps {\n  item: MenubarItem;\n  size: NonNullable<MenubarProps['size']>;\n  disabled: boolean;\n  isOpen: boolean;\n  anchorEl: HTMLElement | null;\n  onOpen: (itemId: string, anchorEl: HTMLElement) => void;\n  onActivate: (item: MenubarItem) => void;\n  onClose: () => void;\n  onFocus?: React.FocusEventHandler;\n  onBlur?: React.FocusEventHandler;\n}\n\n/** One row of an open menu: its icon, its label, and its shortcut hint. */\nconst DropdownItem: React.FC<{ child: MenubarItem; onActivate: (item: MenubarItem) => void }> = ({\n  child,\n  onActivate,\n}) =>\n  child.divider ? (\n    <Divider />\n  ) : (\n    <MenuItem onClick={() => onActivate(child)} disabled={child.disabled}>\n      {child.icon && <ListItemIcon>{child.icon}</ListItemIcon>}\n      <ListItemText>{child.label}</ListItemText>\n      {child.shortcut && (\n        <Chip\n          label={child.shortcut}\n          size=\"small\"\n          variant=\"outlined\"\n          sx={{ ml: 2, height: sxRem(20), fontSize: sxRem(11.2) }}\n        />\n      )}\n    </MenuItem>\n  );\n\n/**\n * A top-level menubar entry. An entry with children opens its dropdown; one\n * without acts immediately — a decision the click and keyboard paths both need,\n * so it is made once here rather than in each handler.\n */\nexport const MenubarItemView: React.FC<MenubarItemViewProps> = ({\n  item,\n  size,\n  disabled,\n  isOpen,\n  anchorEl,\n  onOpen,\n  onActivate,\n  onClose,\n  onFocus,\n  onBlur,\n}) => {\n  const theme = useTheme();\n  const hasChildren = Boolean(item.children && item.children.length > 0);\n\n  const activate = (target: HTMLElement) => {\n    if (hasChildren) {\n      onOpen(item.id, target);\n    } else {\n      onActivate(item);\n    }\n  };\n\n  return (\n    <Box>\n      <Button\n        data-testid={`menubar-button-${item.id}`}\n        onClick={(e) => activate(e.currentTarget)}\n        onKeyDown={(e) => {\n          if (e.key === 'Enter' || e.key === ' ') {\n            e.preventDefault();\n            activate(e.currentTarget);\n          }\n        }}\n        // Keeping focus on mousedown is what lets handleMenuClose return it here.\n        onMouseDown={(e) => e.preventDefault()}\n        onFocus={onFocus}\n        onBlur={onBlur}\n        disabled={item.disabled || disabled}\n        startIcon={item.icon}\n        endIcon={hasChildren ? <KeyboardArrowDownIcon /> : null}\n        aria-haspopup={hasChildren ? 'menu' : undefined}\n        aria-expanded={hasChildren ? isOpen : undefined}\n        sx={{ color: 'inherit', textTransform: 'none', ...sizeStyles(theme, size) }}\n      >\n        {item.label}\n      </Button>\n\n      {hasChildren && (\n        <Menu\n          anchorEl={anchorEl}\n          open={isOpen}\n          onClose={onClose}\n          autoFocus\n          PaperProps={{ sx: { minWidth: sxRem(200), mt: 1 } }}\n        >\n          {item.children?.map((child) => (\n            <DropdownItem key={child.id} child={child} onActivate={onActivate} />\n          ))}\n        </Menu>\n      )}\n    </Box>\n  );\n};\n"],"mappings":";;;;;;;;AAAA,OAAO,2BAA2B;AAClC,OAAO,SAAS;AAChB,OAAO,YAAY;AACnB,OAAO,UAAU;AACjB,OAAO,aAAa;AACpB,OAAO,kBAAkB;AACzB,OAAO,kBAAkB;AACzB,OAAO,UAAU;AACjB,OAAO,cAAc;AACrB,SAAS,gBAAgB;AA0BrB,cAEA,YAFA;AALJ,IAAM,eAA0F,CAAC;AAAA,EAC/F;AAAA,EACA;AACF,MACE,MAAM,UACJ,oBAAC,WAAQ,IAET,qBAAC,YAAS,SAAS,MAAM,WAAW,KAAK,GAAG,UAAU,MAAM,UACzD;AAAA,QAAM,QAAQ,oBAAC,gBAAc,gBAAM,MAAK;AAAA,EACzC,oBAAC,gBAAc,gBAAM,OAAM;AAAA,EAC1B,MAAM,YACL;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,MAAM;AAAA,MACb,MAAK;AAAA,MACL,SAAQ;AAAA,MACR,IAAI,EAAE,IAAI,GAAG,QAAQ,MAAM,EAAE,GAAG,UAAU,MAAM,IAAI,EAAE;AAAA;AAAA,EACxD;AAAA,GAEJ;AAQG,IAAM,kBAAkD,CAAC;AAAA,EAC9D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,QAAQ,SAAS;AACvB,QAAM,cAAc,QAAQ,KAAK,YAAY,KAAK,SAAS,SAAS,CAAC;AAErE,QAAM,WAAW,CAAC,WAAwB;AACxC,QAAI,aAAa;AACf,aAAO,KAAK,IAAI,MAAM;AAAA,IACxB,OAAO;AACL,iBAAW,IAAI;AAAA,IACjB;AAAA,EACF;AAEA,SACE,qBAAC,OACC;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,eAAa,kBAAkB,KAAK,EAAE;AAAA,QACtC,SAAS,CAAC,MAAM,SAAS,EAAE,aAAa;AAAA,QACxC,WAAW,CAAC,MAAM;AAChB,cAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,cAAE,eAAe;AACjB,qBAAS,EAAE,aAAa;AAAA,UAC1B;AAAA,QACF;AAAA,QAEA,aAAa,CAAC,MAAM,EAAE,eAAe;AAAA,QACrC;AAAA,QACA;AAAA,QACA,UAAU,KAAK,YAAY;AAAA,QAC3B,WAAW,KAAK;AAAA,QAChB,SAAS,cAAc,oBAAC,yBAAsB,IAAK;AAAA,QACnD,iBAAe,cAAc,SAAS;AAAA,QACtC,iBAAe,cAAc,SAAS;AAAA,QACtC,IAAI,EAAE,OAAO,WAAW,eAAe,QAAQ,GAAG,WAAW,OAAO,IAAI,EAAE;AAAA,QAEzE,eAAK;AAAA;AAAA,IACR;AAAA,IAEC,eACC;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,MAAM;AAAA,QACN;AAAA,QACA,WAAS;AAAA,QACT,YAAY,EAAE,IAAI,EAAE,UAAU,MAAM,GAAG,GAAG,IAAI,EAAE,EAAE;AAAA,QAEjD,eAAK,UAAU,IAAI,CAAC,UACnB,oBAAC,gBAA4B,OAAc,cAAxB,MAAM,EAA0C,CACpE;AAAA;AAAA,IACH;AAAA,KAEJ;AAEJ;","names":[]}

package/dist/chunk-LT4NEKXB.js

@@ -0,0 +1,131 @@
+import {
+  useDataViewsCopy
+} from "./chunk-KHG57NAE.js";
+import {
+  createConfirmButton
+} from "./chunk-3AOQBR7N.js";
+import {
+  Dialog,
+  DialogContent
+} from "./chunk-L4UP5VYS.js";
+import {
+  default as default2
+} from "./chunk-6DPAWXZ3.js";
+import {
+  default as default3
+} from "./chunk-WEBEOBN5.js";
+import {
+  Button
+} from "./chunk-2EAAWOZ2.js";
+import {
+  Text
+} from "./chunk-WTOYEWW6.js";
+
+// src/components/data-display/DataViews/ManageViewsDialog.tsx
+import { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function tags(view) {
+  const copy = useDataViewsCopy();
+  const list = [];
+  if (view.isDefault) list.push(copy.manageViews.defaultTag);
+  if (view.pinned) list.push("Fixada");
+  if (view.shared) list.push("Compartilhada");
+  if (!view.isOwner) list.push(copy.manageViews.otherUserTag);
+  return list;
+}
+function ManageViewRow({
+  view,
+  onEdit,
+  onDelete,
+  testIdPrefix,
+  confirmCopy
+}) {
+  const ConfirmButton = useMemo(
+    () => createConfirmButton(confirmCopy, confirmCopy.defaultError),
+    [confirmCopy]
+  );
+  const copy = useDataViewsCopy();
+  return /* @__PURE__ */ jsxs(
+    default3,
+    {
+      direction: "row",
+      spacing: 1,
+      sx: { alignItems: "center", justifyContent: "space-between" },
+      "data-testid": `${testIdPrefix}-manage-row-${view.id}`,
+      children: [
+        /* @__PURE__ */ jsxs(default2, { sx: { minWidth: 0 }, children: [
+          /* @__PURE__ */ jsx(Text, { variant: "body", size: "sm", as: "span", weight: "semibold", children: view.name }),
+          view.description && /* @__PURE__ */ jsx(Text, { variant: "caption", as: "p", color: "secondary", children: view.description }),
+          tags(view).length > 0 && /* @__PURE__ */ jsx(Text, { variant: "caption", as: "p", color: "secondary", children: tags(view).join(" \xB7 ") })
+        ] }),
+        view.isOwner && /* @__PURE__ */ jsxs(default3, { direction: "row", spacing: 1, sx: { flex: "0 0 auto" }, children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "text",
+              size: "sm",
+              onClick: () => onEdit(view),
+              dataTestId: `${testIdPrefix}-manage-edit-${view.id}`,
+              children: copy.manageViews.edit
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            ConfirmButton,
+            {
+              variant: "text",
+              size: "sm",
+              color: "danger",
+              onClick: () => onDelete(view),
+              confirm: {
+                title: copy.manageViews.deleteTitle,
+                entityName: view.name,
+                description: copy.manageViews.deleteBody,
+                confirmText: copy.manageViews.deleteConfirm
+              },
+              dataTestId: `${testIdPrefix}-manage-delete-${view.id}`,
+              children: copy.manageViews.deleteConfirm
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function ManageViewsDialog({
+  open,
+  onClose,
+  views,
+  onEdit,
+  onDelete,
+  testIdPrefix = "views",
+  confirmCopy
+}) {
+  const copy = useDataViewsCopy();
+  return /* @__PURE__ */ jsx(
+    Dialog,
+    {
+      open,
+      onClose,
+      title: copy.manageViews.title,
+      size: "md",
+      showCloseButton: true,
+      dataTestId: `${testIdPrefix}-manage-dialog`,
+      children: /* @__PURE__ */ jsx(DialogContent, { children: /* @__PURE__ */ jsx(default3, { spacing: 1.5, "data-testid": `${testIdPrefix}-manage-list`, children: views.length === 0 ? /* @__PURE__ */ jsx(Text, { variant: "body", as: "p", children: copy.manageViews.empty }) : views.map((view) => /* @__PURE__ */ jsx(
+        ManageViewRow,
+        {
+          confirmCopy,
+          view,
+          onEdit,
+          onDelete,
+          testIdPrefix
+        },
+        view.id
+      )) }) })
+    }
+  );
+}
+
+export {
+  ManageViewsDialog
+};
+//# sourceMappingURL=chunk-LT4NEKXB.js.map