design-zystem 1.0.311 → 1.0.312

package/dist/index.d.mts

@@ -1387,4 +1387,56 @@ declare const formatKM: (value: string | number | null | undefined) => string;
 
 declare const parseAmount: (value: string) => number | null;
 
-export { Accordion, type AccordionItem, Avatar, Banner, type BannerAction, type BannerProps, Box, Bubble, Bulk, Button, Card, type CardProps, CardSkeleton, Checkbox, Col, Collapse, ColorPicker, DatePicker, type DatePickerProps, type DatePreset, Divider, Drawer, EmptyState, FileUploadZone, type FloatingAction, FloatingButton, type FloatingButtonProps, Gantt, type GanttBand, type GanttBar, type GanttDay, GanttDot, type GanttProps, type GanttRow, GanttSwatch, Grid, Icon, IconTabs, Image, Input, Link, List, ListItem, MetricCard, Modal, ModalConfirmation, MultiSelect, NewModal, Options, PageContainer, Pagination, type PastelColorPair, Popover, ProgressBar, type ProgressBarProps, type ProgressBarSegment, Radio, Row, Select, type SelectOption, type SelectProps, SkeletonRow, SliderInput, type SortOrder, Spinner, Stepper, Switch, Table, TableBody, TableCell, TableFooter, TableFooterCell, TableFooterRow, TableHeader, TableHeaderCell, type TableHeaderCellProps, TableHeaderRow, TableRow, Tabs, TagBubble, Text, Timeline, type TimelineItem, type ToastOptions, type ToastType, Toaster, Tooltip, addBusinessDays, appendCacheBuster, appendQueryParam, capitalizeFirstLetter, colors, easterDate, formatAddress, formatCityFromFormattedAddress, formatCityWithPostalCode, formatDate, formatDateWithTime, formatDistance, formatDuration, formatEuro, formatKM, formatLocality, formatName, formatNameWithInitial, formatPhoneNumber, formatPlate, formatPlateWithoutDashes, formatPostalCodeFromFormattedAddress, formatRegionCode, formatTime, formatVin, generateHexColor, getAvatarColor, getCleanFileName, getElapsedTime, getFileIconByMimeType, getFileKind, getFileNameFromUrl, getInitials, getMimeCategory, getPastelColorPair, getRelativeTime, isHoliday, isSameDay, isolateCity, optimizeImage, parseAmount, parseIsoDate, toast, truncateFileName, truncateText };
+/**
+ * Attributs qui neutralisent l'autofill du navigateur **et** des gestionnaires
+ * de mots de passe (1Password, LastPass, Bitwarden, Dashlane) sur un champ.
+ *
+ * Appliqués par défaut par les champs du DS : sans ça, un coffre-fort réécrit
+ * à l'ouverture d'une page les valeurs déjà présentes dans le formulaire
+ * (fiche existante en édition), silencieusement.
+ *
+ * `autoComplete: 'off'` seul ne suffit pas : les extensions l'ignorent, chacune
+ * a son propre attribut d'opt-out.
+ *
+ * Étalés **avant** les props du consommateur : un champ qui a besoin de
+ * l'autofill (page de login) surcharge ce qu'il veut, y compris en repassant
+ * `undefined` sur un `data-*` pour le retirer.
+ *
+ * @example
+ * <input {...noAutofillProps} {...props} />
+ * // login : <Input autoComplete="username" data-1p-ignore={undefined} />
+ */
+declare const noAutofillProps: {
+    readonly autoComplete: "off";
+    /** 1Password */
+    readonly 'data-1p-ignore': true;
+    /** LastPass */
+    readonly 'data-lpignore': "true";
+    /** Bitwarden */
+    readonly 'data-bwignore': true;
+    /** Dashlane */
+    readonly 'data-form-type': "other";
+};
+/**
+ * Inverse de {@link noAutofillProps} : réautorise l'autofill sur un champ
+ * précis, en neutralisant les `data-*` d'opt-out posés par défaut.
+ *
+ * À réserver aux champs où l'autofill est *voulu* : login, changement de mot
+ * de passe. Partout ailleurs, le défaut du DS est le bon comportement.
+ *
+ * @param autoComplete valeur HTML `autocomplete` du champ — `username`,
+ * `current-password`, `new-password`, `email`…
+ *
+ * @example
+ * <Input type="text" {...allowAutofill('username')} />
+ * <PasswordInput {...allowAutofill('current-password')} />
+ */
+declare const allowAutofill: (autoComplete: string) => {
+    autoComplete: string;
+    "data-1p-ignore": undefined;
+    "data-lpignore": undefined;
+    "data-bwignore": undefined;
+    "data-form-type": undefined;
+};
+
+export { Accordion, type AccordionItem, Avatar, Banner, type BannerAction, type BannerProps, Box, Bubble, Bulk, Button, Card, type CardProps, CardSkeleton, Checkbox, Col, Collapse, ColorPicker, DatePicker, type DatePickerProps, type DatePreset, Divider, Drawer, EmptyState, FileUploadZone, type FloatingAction, FloatingButton, type FloatingButtonProps, Gantt, type GanttBand, type GanttBar, type GanttDay, GanttDot, type GanttProps, type GanttRow, GanttSwatch, Grid, Icon, IconTabs, Image, Input, Link, List, ListItem, MetricCard, Modal, ModalConfirmation, MultiSelect, NewModal, Options, PageContainer, Pagination, type PastelColorPair, Popover, ProgressBar, type ProgressBarProps, type ProgressBarSegment, Radio, Row, Select, type SelectOption, type SelectProps, SkeletonRow, SliderInput, type SortOrder, Spinner, Stepper, Switch, Table, TableBody, TableCell, TableFooter, TableFooterCell, TableFooterRow, TableHeader, TableHeaderCell, type TableHeaderCellProps, TableHeaderRow, TableRow, Tabs, TagBubble, Text, Timeline, type TimelineItem, type ToastOptions, type ToastType, Toaster, Tooltip, addBusinessDays, allowAutofill, appendCacheBuster, appendQueryParam, capitalizeFirstLetter, colors, easterDate, formatAddress, formatCityFromFormattedAddress, formatCityWithPostalCode, formatDate, formatDateWithTime, formatDistance, formatDuration, formatEuro, formatKM, formatLocality, formatName, formatNameWithInitial, formatPhoneNumber, formatPlate, formatPlateWithoutDashes, formatPostalCodeFromFormattedAddress, formatRegionCode, formatTime, formatVin, generateHexColor, getAvatarColor, getCleanFileName, getElapsedTime, getFileIconByMimeType, getFileKind, getFileNameFromUrl, getInitials, getMimeCategory, getPastelColorPair, getRelativeTime, isHoliday, isSameDay, isolateCity, noAutofillProps, optimizeImage, parseAmount, parseIsoDate, toast, truncateFileName, truncateText };

package/dist/index.d.ts

@@ -1387,4 +1387,56 @@ declare const formatKM: (value: string | number | null | undefined) => string;
 
 declare const parseAmount: (value: string) => number | null;
 
-export { Accordion, type AccordionItem, Avatar, Banner, type BannerAction, type BannerProps, Box, Bubble, Bulk, Button, Card, type CardProps, CardSkeleton, Checkbox, Col, Collapse, ColorPicker, DatePicker, type DatePickerProps, type DatePreset, Divider, Drawer, EmptyState, FileUploadZone, type FloatingAction, FloatingButton, type FloatingButtonProps, Gantt, type GanttBand, type GanttBar, type GanttDay, GanttDot, type GanttProps, type GanttRow, GanttSwatch, Grid, Icon, IconTabs, Image, Input, Link, List, ListItem, MetricCard, Modal, ModalConfirmation, MultiSelect, NewModal, Options, PageContainer, Pagination, type PastelColorPair, Popover, ProgressBar, type ProgressBarProps, type ProgressBarSegment, Radio, Row, Select, type SelectOption, type SelectProps, SkeletonRow, SliderInput, type SortOrder, Spinner, Stepper, Switch, Table, TableBody, TableCell, TableFooter, TableFooterCell, TableFooterRow, TableHeader, TableHeaderCell, type TableHeaderCellProps, TableHeaderRow, TableRow, Tabs, TagBubble, Text, Timeline, type TimelineItem, type ToastOptions, type ToastType, Toaster, Tooltip, addBusinessDays, appendCacheBuster, appendQueryParam, capitalizeFirstLetter, colors, easterDate, formatAddress, formatCityFromFormattedAddress, formatCityWithPostalCode, formatDate, formatDateWithTime, formatDistance, formatDuration, formatEuro, formatKM, formatLocality, formatName, formatNameWithInitial, formatPhoneNumber, formatPlate, formatPlateWithoutDashes, formatPostalCodeFromFormattedAddress, formatRegionCode, formatTime, formatVin, generateHexColor, getAvatarColor, getCleanFileName, getElapsedTime, getFileIconByMimeType, getFileKind, getFileNameFromUrl, getInitials, getMimeCategory, getPastelColorPair, getRelativeTime, isHoliday, isSameDay, isolateCity, optimizeImage, parseAmount, parseIsoDate, toast, truncateFileName, truncateText };
+/**
+ * Attributs qui neutralisent l'autofill du navigateur **et** des gestionnaires
+ * de mots de passe (1Password, LastPass, Bitwarden, Dashlane) sur un champ.
+ *
+ * Appliqués par défaut par les champs du DS : sans ça, un coffre-fort réécrit
+ * à l'ouverture d'une page les valeurs déjà présentes dans le formulaire
+ * (fiche existante en édition), silencieusement.
+ *
+ * `autoComplete: 'off'` seul ne suffit pas : les extensions l'ignorent, chacune
+ * a son propre attribut d'opt-out.
+ *
+ * Étalés **avant** les props du consommateur : un champ qui a besoin de
+ * l'autofill (page de login) surcharge ce qu'il veut, y compris en repassant
+ * `undefined` sur un `data-*` pour le retirer.
+ *
+ * @example
+ * <input {...noAutofillProps} {...props} />
+ * // login : <Input autoComplete="username" data-1p-ignore={undefined} />
+ */
+declare const noAutofillProps: {
+    readonly autoComplete: "off";
+    /** 1Password */
+    readonly 'data-1p-ignore': true;
+    /** LastPass */
+    readonly 'data-lpignore': "true";
+    /** Bitwarden */
+    readonly 'data-bwignore': true;
+    /** Dashlane */
+    readonly 'data-form-type': "other";
+};
+/**
+ * Inverse de {@link noAutofillProps} : réautorise l'autofill sur un champ
+ * précis, en neutralisant les `data-*` d'opt-out posés par défaut.
+ *
+ * À réserver aux champs où l'autofill est *voulu* : login, changement de mot
+ * de passe. Partout ailleurs, le défaut du DS est le bon comportement.
+ *
+ * @param autoComplete valeur HTML `autocomplete` du champ — `username`,
+ * `current-password`, `new-password`, `email`…
+ *
+ * @example
+ * <Input type="text" {...allowAutofill('username')} />
+ * <PasswordInput {...allowAutofill('current-password')} />
+ */
+declare const allowAutofill: (autoComplete: string) => {
+    autoComplete: string;
+    "data-1p-ignore": undefined;
+    "data-lpignore": undefined;
+    "data-bwignore": undefined;
+    "data-form-type": undefined;
+};
+
+export { Accordion, type AccordionItem, Avatar, Banner, type BannerAction, type BannerProps, Box, Bubble, Bulk, Button, Card, type CardProps, CardSkeleton, Checkbox, Col, Collapse, ColorPicker, DatePicker, type DatePickerProps, type DatePreset, Divider, Drawer, EmptyState, FileUploadZone, type FloatingAction, FloatingButton, type FloatingButtonProps, Gantt, type GanttBand, type GanttBar, type GanttDay, GanttDot, type GanttProps, type GanttRow, GanttSwatch, Grid, Icon, IconTabs, Image, Input, Link, List, ListItem, MetricCard, Modal, ModalConfirmation, MultiSelect, NewModal, Options, PageContainer, Pagination, type PastelColorPair, Popover, ProgressBar, type ProgressBarProps, type ProgressBarSegment, Radio, Row, Select, type SelectOption, type SelectProps, SkeletonRow, SliderInput, type SortOrder, Spinner, Stepper, Switch, Table, TableBody, TableCell, TableFooter, TableFooterCell, TableFooterRow, TableHeader, TableHeaderCell, type TableHeaderCellProps, TableHeaderRow, TableRow, Tabs, TagBubble, Text, Timeline, type TimelineItem, type ToastOptions, type ToastType, Toaster, Tooltip, addBusinessDays, allowAutofill, appendCacheBuster, appendQueryParam, capitalizeFirstLetter, colors, easterDate, formatAddress, formatCityFromFormattedAddress, formatCityWithPostalCode, formatDate, formatDateWithTime, formatDistance, formatDuration, formatEuro, formatKM, formatLocality, formatName, formatNameWithInitial, formatPhoneNumber, formatPlate, formatPlateWithoutDashes, formatPostalCodeFromFormattedAddress, formatRegionCode, formatTime, formatVin, generateHexColor, getAvatarColor, getCleanFileName, getElapsedTime, getFileIconByMimeType, getFileKind, getFileNameFromUrl, getInitials, getMimeCategory, getPastelColorPair, getRelativeTime, isHoliday, isSameDay, isolateCity, noAutofillProps, optimizeImage, parseAmount, parseIsoDate, toast, truncateFileName, truncateText };

package/dist/index.js

@@ -124,6 +124,7 @@ __export(index_exports, {
   Toaster: () => Toaster,
   Tooltip: () => Tooltip,
   addBusinessDays: () => addBusinessDays,
+  allowAutofill: () => allowAutofill,
   appendCacheBuster: () => appendCacheBuster,
   appendQueryParam: () => appendQueryParam,
   capitalizeFirstLetter: () => capitalizeFirstLetter,
@@ -162,6 +163,7 @@ __export(index_exports, {
   isHoliday: () => isHoliday,
   isSameDay: () => isSameDay,
   isolateCity: () => isolateCity,
+  noAutofillProps: () => noAutofillProps,
   optimizeImage: () => optimizeImage_default,
   parseAmount: () => parseAmount,
   parseIsoDate: () => parseIsoDate,
@@ -2536,6 +2538,28 @@ var Avatar = ({
 var import_react12 = require("react");
 var import_react_dom2 = __toESM(require("react-dom"));
 var import_styled_components20 = __toESM(require("styled-components"));
+
+// src/ui/lib/autofill.ts
+var noAutofillProps = {
+  autoComplete: "off",
+  /** 1Password */
+  "data-1p-ignore": true,
+  /** LastPass */
+  "data-lpignore": "true",
+  /** Bitwarden */
+  "data-bwignore": true,
+  /** Dashlane */
+  "data-form-type": "other"
+};
+var allowAutofill = (autoComplete) => ({
+  autoComplete,
+  "data-1p-ignore": void 0,
+  "data-lpignore": void 0,
+  "data-bwignore": void 0,
+  "data-form-type": void 0
+});
+
+// src/ui-legacy/Components/Select/Select.tsx
 var import_jsx_runtime24 = require("react/jsx-runtime");
 var StyledContainer = import_styled_components20.default.div.withConfig({
   shouldForwardProp: (prop) => !["width", "noFlex", "label"].includes(prop)
@@ -2771,13 +2795,14 @@ var Select = ({
             children: [
               !hideSearchBar && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                 SearchInput,
-                {
+                __spreadProps(__spreadValues({
                   ref: searchInputRef,
                   type: "text",
-                  placeholder: "Rechercher...",
+                  placeholder: "Rechercher..."
+                }, noAutofillProps), {
                   value: searchTerm,
                   onChange: handleSearch
-                }
+                })
               ),
               /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(DropdownList, { children: filteredOptions.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                 Option,
@@ -3144,12 +3169,12 @@ var Input = (0, import_react13.forwardRef)((props, ref) => {
           isDate ? /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
             /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
               StyledInput,
-              __spreadProps(__spreadValues({
+              __spreadProps(__spreadValues(__spreadProps(__spreadValues({
                 id: inputId,
                 ref: innerRef,
                 type: "text",
-                inputMode: "numeric",
-                autoComplete: "off",
+                inputMode: "numeric"
+              }, noAutofillProps), {
                 value: displayDateValue,
                 onChange: handleDateInputChange,
                 onPaste: handleDateInputPaste,
@@ -3159,7 +3184,7 @@ var Input = (0, import_react13.forwardRef)((props, ref) => {
                 disabled,
                 "aria-required": required || void 0,
                 style: computedStyle
-              }, forwardProps), {
+              }), forwardProps), {
                 name: void 0,
                 min: void 0,
                 max: void 0,
@@ -3203,7 +3228,7 @@ var Input = (0, import_react13.forwardRef)((props, ref) => {
             )
           ] }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
             Component,
-            __spreadValues({
+            __spreadValues(__spreadValues(__spreadValues({
               id: inputId,
               ref: innerRef,
               type: isPassword ? showPassword ? "text" : "password" : type,
@@ -3215,7 +3240,7 @@ var Input = (0, import_react13.forwardRef)((props, ref) => {
               disabled,
               name: inputName,
               style: computedStyle
-            }, forwardProps)
+            }, noAutofillProps), isPassword ? { autoComplete: "new-password" } : {}), forwardProps)
           ),
           isPassword && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
             EyeButton,
@@ -3623,14 +3648,15 @@ var ColorPicker = (0, import_react17.forwardRef)(
         ) }) }),
         /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
           HexInput,
-          {
+          __spreadProps(__spreadValues({
             type: "text",
-            value: currentColor,
+            value: currentColor
+          }, noAutofillProps), {
             onChange: handleChange,
             disabled,
             $fontSize: dims.fontSize,
             $padding: dims.inputPadding
-          }
+          })
         )
       ] })
     ] });
@@ -7543,6 +7569,7 @@ var parseAmount = (value) => {
   Toaster,
   Tooltip,
   addBusinessDays,
+  allowAutofill,
   appendCacheBuster,
   appendQueryParam,
   capitalizeFirstLetter,
@@ -7581,6 +7608,7 @@ var parseAmount = (value) => {
   isHoliday,
   isSameDay,
   isolateCity,
+  noAutofillProps,
   optimizeImage,
   parseAmount,
   parseIsoDate,

package/dist/index.mjs

@@ -2395,6 +2395,28 @@ var Avatar = ({
 import { useState as useState7, useRef as useRef5, useEffect as useEffect6 } from "react";
 import ReactDOM from "react-dom";
 import styled20 from "styled-components";
+
+// src/ui/lib/autofill.ts
+var noAutofillProps = {
+  autoComplete: "off",
+  /** 1Password */
+  "data-1p-ignore": true,
+  /** LastPass */
+  "data-lpignore": "true",
+  /** Bitwarden */
+  "data-bwignore": true,
+  /** Dashlane */
+  "data-form-type": "other"
+};
+var allowAutofill = (autoComplete) => ({
+  autoComplete,
+  "data-1p-ignore": void 0,
+  "data-lpignore": void 0,
+  "data-bwignore": void 0,
+  "data-form-type": void 0
+});
+
+// src/ui-legacy/Components/Select/Select.tsx
 import { jsx as jsx24, jsxs as jsxs11 } from "react/jsx-runtime";
 var StyledContainer = styled20.div.withConfig({
   shouldForwardProp: (prop) => !["width", "noFlex", "label"].includes(prop)
@@ -2630,13 +2652,14 @@ var Select = ({
             children: [
               !hideSearchBar && /* @__PURE__ */ jsx24(
                 SearchInput,
-                {
+                __spreadProps(__spreadValues({
                   ref: searchInputRef,
                   type: "text",
-                  placeholder: "Rechercher...",
+                  placeholder: "Rechercher..."
+                }, noAutofillProps), {
                   value: searchTerm,
                   onChange: handleSearch
-                }
+                })
               ),
               /* @__PURE__ */ jsx24(DropdownList, { children: filteredOptions.map((option, index) => /* @__PURE__ */ jsx24(
                 Option,
@@ -3009,12 +3032,12 @@ var Input = forwardRef3((props, ref) => {
           isDate ? /* @__PURE__ */ jsxs12(Fragment3, { children: [
             /* @__PURE__ */ jsx25(
               StyledInput,
-              __spreadProps(__spreadValues({
+              __spreadProps(__spreadValues(__spreadProps(__spreadValues({
                 id: inputId,
                 ref: innerRef,
                 type: "text",
-                inputMode: "numeric",
-                autoComplete: "off",
+                inputMode: "numeric"
+              }, noAutofillProps), {
                 value: displayDateValue,
                 onChange: handleDateInputChange,
                 onPaste: handleDateInputPaste,
@@ -3024,7 +3047,7 @@ var Input = forwardRef3((props, ref) => {
                 disabled,
                 "aria-required": required || void 0,
                 style: computedStyle
-              }, forwardProps), {
+              }), forwardProps), {
                 name: void 0,
                 min: void 0,
                 max: void 0,
@@ -3068,7 +3091,7 @@ var Input = forwardRef3((props, ref) => {
             )
           ] }) : /* @__PURE__ */ jsx25(
             Component,
-            __spreadValues({
+            __spreadValues(__spreadValues(__spreadValues({
               id: inputId,
               ref: innerRef,
               type: isPassword ? showPassword ? "text" : "password" : type,
@@ -3080,7 +3103,7 @@ var Input = forwardRef3((props, ref) => {
               disabled,
               name: inputName,
               style: computedStyle
-            }, forwardProps)
+            }, noAutofillProps), isPassword ? { autoComplete: "new-password" } : {}), forwardProps)
           ),
           isPassword && /* @__PURE__ */ jsx25(
             EyeButton,
@@ -3488,14 +3511,15 @@ var ColorPicker = forwardRef4(
         ) }) }),
         /* @__PURE__ */ jsx29(
           HexInput,
-          {
+          __spreadProps(__spreadValues({
             type: "text",
-            value: currentColor,
+            value: currentColor
+          }, noAutofillProps), {
             onChange: handleChange,
             disabled,
             $fontSize: dims.fontSize,
             $padding: dims.inputPadding
-          }
+          })
         )
       ] })
     ] });
@@ -7421,6 +7445,7 @@ export {
   Toaster,
   Tooltip,
   addBusinessDays,
+  allowAutofill,
   appendCacheBuster,
   appendQueryParam,
   capitalizeFirstLetter,
@@ -7459,6 +7484,7 @@ export {
   isHoliday,
   isSameDay,
   isolateCity,
+  noAutofillProps,
   optimizeImage_default as optimizeImage,
   parseAmount,
   parseIsoDate,

package/dist/ui/index.d.mts

@@ -1174,4 +1174,56 @@ interface OptimizeImageOptions {
 }
 declare const optimizeImage: (file: File | null | undefined, desiredBaseName: string, opts?: OptimizeImageOptions) => Promise<OptimizeImageResult>;
 
-export { Attachment, type AttachmentProps, type AttachmentStatus, Avatar, AvatarBadge, type AvatarBadgeConfig, type AvatarBadgeProps, AvatarFallback, type AvatarFallbackProps, AvatarGroup, type AvatarGroupProps, AvatarImage, type AvatarImageProps, type AvatarProps, Badge, type BadgeProps, Banner, type BannerAction, type BannerProps, type BannerToggle, Box, type BoxProps, Bulk, type BulkProps, type BulkSection, Button, type ButtonColor, type ButtonProps, COLOR_TOKENS, Checkbox, type CheckboxProps, Collapsible, CollapsibleContent, CollapsibleTrigger, type ColorKey, ColorPicker, type ColorPickerProps, type ColorToken, DatePicker, type DatePickerMode, type DatePickerProps, type DatePreset, Divider, type DividerProps, Drawer, DrawerBody, DrawerClose, DrawerDescription, type DrawerDirection, DrawerFooter, DrawerHeader, type DrawerProps, DrawerTitle, EmailInput, type EmailInputProps, EmptyState, type EmptyStateProps, FileUploadZone, type FileUploadZoneProps, type FloatingAction, FloatingButton, type FloatingButtonProps, Gantt, type GanttBand, type GanttBar, type GanttDay, GanttDot, type GanttProps, type GanttRow, GanttSwatch, Icon, type IconColor, type IconFamily, type IconProps, type IconSize, type IconTabItem, IconTabs, type IconTabsProps, Image, type ImageProps, Input, InputGroup, InputGroupAddon, type InputGroupAddonProps, InputGroupButton, type InputGroupButtonProps, type InputGroupProps, type InputProps, Item, ItemActions, ItemContent, ItemDescription, ItemMedia, type ItemMediaProps, type ItemProps, ItemTitle, Label, type LabelProps, Layout, type LayoutProps, Link, type LinkProps, MetricCard, type MetricCardProps, Modal, ModalBody, ModalClose, ModalDescription, ModalFooter, ModalHeader, type ModalProps, ModalTitle, type MultiSelectProps, type OptimizeImageOptions, type OptimizeImageResult, PageContainer, type PageContainerProps, Pagination, type PaginationProps, PasswordInput, type PasswordInputProps, PdfPreview, type PdfPreviewProps, PhoneInput, type PhoneInputMeta, type PhoneInputProps, Popover, type PopoverMenuItem, type PopoverProps, ProgressBar, type ProgressBarProps, Radio, type RadioOption, type RadioProps, ScrollArea, type ScrollAreaProps, SearchInput, type SearchInputProps, Select, type SelectOption, type SelectProps, type SingleSelectProps, Skeleton, type SkeletonProps, Spinner, type SpinnerProps, type SpinnerSize, Stepper, type StepperProps, Switch, type SwitchProps, type TabItem, Table, TableCell, type TableCellProps, type TableEmptyState, TableFooter, TableFooterCell, type TableFooterCellProps, type TableFooterProps, TableFooterRow, type TableFooterRowProps, TableHeader, TableHeaderCell, type TableHeaderCellProps, type TableHeaderProps, TableHeaderRow, type TableHeaderRowProps, type TablePagination, type TableProps, TableRow, type TableRowProps, Tabs, type TabsProps, type TabsVariant, TagBubble, type TagBubbleProps, type TagOption, TagSelect, type TagSelectProps, Text, type TextProps, Textarea, type TextareaProps, Timeline, type TimelineItem, type TimelineProps, type ToastOptions, type ToastType, Toaster, Tooltip, type TooltipProps, addBusinessDays, appendCacheBuster, appendQueryParam, buttonVariants, capitalizeFirstLetter, colors, easterDate, formatAddress, formatCityFromFormattedAddress, formatCityWithPostalCode, formatDate, formatDateWithTime, formatDistance, formatDuration, formatEuro, formatKM, formatLocality, formatName, formatNameWithInitial, formatPhoneNumber, formatPlate, formatPlateWithoutDashes, formatPostalCodeFromFormattedAddress, formatRegionCode, formatTime, formatVin, generateHexColor, getAvatarColor, getCleanFileName, getFileIconByMimeType, getFileKind, getFileNameFromUrl, getInitials, getMimeCategory, getRelativeTime, isHoliday, isSameDay, isolateCity, optimizeImage, parseAmount, parseIsoDate, toast, truncateFileName, truncateText, useAvatarSize };
+/**
+ * Attributs qui neutralisent l'autofill du navigateur **et** des gestionnaires
+ * de mots de passe (1Password, LastPass, Bitwarden, Dashlane) sur un champ.
+ *
+ * Appliqués par défaut par les champs du DS : sans ça, un coffre-fort réécrit
+ * à l'ouverture d'une page les valeurs déjà présentes dans le formulaire
+ * (fiche existante en édition), silencieusement.
+ *
+ * `autoComplete: 'off'` seul ne suffit pas : les extensions l'ignorent, chacune
+ * a son propre attribut d'opt-out.
+ *
+ * Étalés **avant** les props du consommateur : un champ qui a besoin de
+ * l'autofill (page de login) surcharge ce qu'il veut, y compris en repassant
+ * `undefined` sur un `data-*` pour le retirer.
+ *
+ * @example
+ * <input {...noAutofillProps} {...props} />
+ * // login : <Input autoComplete="username" data-1p-ignore={undefined} />
+ */
+declare const noAutofillProps: {
+    readonly autoComplete: "off";
+    /** 1Password */
+    readonly 'data-1p-ignore': true;
+    /** LastPass */
+    readonly 'data-lpignore': "true";
+    /** Bitwarden */
+    readonly 'data-bwignore': true;
+    /** Dashlane */
+    readonly 'data-form-type': "other";
+};
+/**
+ * Inverse de {@link noAutofillProps} : réautorise l'autofill sur un champ
+ * précis, en neutralisant les `data-*` d'opt-out posés par défaut.
+ *
+ * À réserver aux champs où l'autofill est *voulu* : login, changement de mot
+ * de passe. Partout ailleurs, le défaut du DS est le bon comportement.
+ *
+ * @param autoComplete valeur HTML `autocomplete` du champ — `username`,
+ * `current-password`, `new-password`, `email`…
+ *
+ * @example
+ * <Input type="text" {...allowAutofill('username')} />
+ * <PasswordInput {...allowAutofill('current-password')} />
+ */
+declare const allowAutofill: (autoComplete: string) => {
+    autoComplete: string;
+    "data-1p-ignore": undefined;
+    "data-lpignore": undefined;
+    "data-bwignore": undefined;
+    "data-form-type": undefined;
+};
+
+export { Attachment, type AttachmentProps, type AttachmentStatus, Avatar, AvatarBadge, type AvatarBadgeConfig, type AvatarBadgeProps, AvatarFallback, type AvatarFallbackProps, AvatarGroup, type AvatarGroupProps, AvatarImage, type AvatarImageProps, type AvatarProps, Badge, type BadgeProps, Banner, type BannerAction, type BannerProps, type BannerToggle, Box, type BoxProps, Bulk, type BulkProps, type BulkSection, Button, type ButtonColor, type ButtonProps, COLOR_TOKENS, Checkbox, type CheckboxProps, Collapsible, CollapsibleContent, CollapsibleTrigger, type ColorKey, ColorPicker, type ColorPickerProps, type ColorToken, DatePicker, type DatePickerMode, type DatePickerProps, type DatePreset, Divider, type DividerProps, Drawer, DrawerBody, DrawerClose, DrawerDescription, type DrawerDirection, DrawerFooter, DrawerHeader, type DrawerProps, DrawerTitle, EmailInput, type EmailInputProps, EmptyState, type EmptyStateProps, FileUploadZone, type FileUploadZoneProps, type FloatingAction, FloatingButton, type FloatingButtonProps, Gantt, type GanttBand, type GanttBar, type GanttDay, GanttDot, type GanttProps, type GanttRow, GanttSwatch, Icon, type IconColor, type IconFamily, type IconProps, type IconSize, type IconTabItem, IconTabs, type IconTabsProps, Image, type ImageProps, Input, InputGroup, InputGroupAddon, type InputGroupAddonProps, InputGroupButton, type InputGroupButtonProps, type InputGroupProps, type InputProps, Item, ItemActions, ItemContent, ItemDescription, ItemMedia, type ItemMediaProps, type ItemProps, ItemTitle, Label, type LabelProps, Layout, type LayoutProps, Link, type LinkProps, MetricCard, type MetricCardProps, Modal, ModalBody, ModalClose, ModalDescription, ModalFooter, ModalHeader, type ModalProps, ModalTitle, type MultiSelectProps, type OptimizeImageOptions, type OptimizeImageResult, PageContainer, type PageContainerProps, Pagination, type PaginationProps, PasswordInput, type PasswordInputProps, PdfPreview, type PdfPreviewProps, PhoneInput, type PhoneInputMeta, type PhoneInputProps, Popover, type PopoverMenuItem, type PopoverProps, ProgressBar, type ProgressBarProps, Radio, type RadioOption, type RadioProps, ScrollArea, type ScrollAreaProps, SearchInput, type SearchInputProps, Select, type SelectOption, type SelectProps, type SingleSelectProps, Skeleton, type SkeletonProps, Spinner, type SpinnerProps, type SpinnerSize, Stepper, type StepperProps, Switch, type SwitchProps, type TabItem, Table, TableCell, type TableCellProps, type TableEmptyState, TableFooter, TableFooterCell, type TableFooterCellProps, type TableFooterProps, TableFooterRow, type TableFooterRowProps, TableHeader, TableHeaderCell, type TableHeaderCellProps, type TableHeaderProps, TableHeaderRow, type TableHeaderRowProps, type TablePagination, type TableProps, TableRow, type TableRowProps, Tabs, type TabsProps, type TabsVariant, TagBubble, type TagBubbleProps, type TagOption, TagSelect, type TagSelectProps, Text, type TextProps, Textarea, type TextareaProps, Timeline, type TimelineItem, type TimelineProps, type ToastOptions, type ToastType, Toaster, Tooltip, type TooltipProps, addBusinessDays, allowAutofill, appendCacheBuster, appendQueryParam, buttonVariants, capitalizeFirstLetter, colors, easterDate, formatAddress, formatCityFromFormattedAddress, formatCityWithPostalCode, formatDate, formatDateWithTime, formatDistance, formatDuration, formatEuro, formatKM, formatLocality, formatName, formatNameWithInitial, formatPhoneNumber, formatPlate, formatPlateWithoutDashes, formatPostalCodeFromFormattedAddress, formatRegionCode, formatTime, formatVin, generateHexColor, getAvatarColor, getCleanFileName, getFileIconByMimeType, getFileKind, getFileNameFromUrl, getInitials, getMimeCategory, getRelativeTime, isHoliday, isSameDay, isolateCity, noAutofillProps, optimizeImage, parseAmount, parseIsoDate, toast, truncateFileName, truncateText, useAvatarSize };

package/dist/ui/index.d.ts

@@ -1174,4 +1174,56 @@ interface OptimizeImageOptions {
 }
 declare const optimizeImage: (file: File | null | undefined, desiredBaseName: string, opts?: OptimizeImageOptions) => Promise<OptimizeImageResult>;
 
-export { Attachment, type AttachmentProps, type AttachmentStatus, Avatar, AvatarBadge, type AvatarBadgeConfig, type AvatarBadgeProps, AvatarFallback, type AvatarFallbackProps, AvatarGroup, type AvatarGroupProps, AvatarImage, type AvatarImageProps, type AvatarProps, Badge, type BadgeProps, Banner, type BannerAction, type BannerProps, type BannerToggle, Box, type BoxProps, Bulk, type BulkProps, type BulkSection, Button, type ButtonColor, type ButtonProps, COLOR_TOKENS, Checkbox, type CheckboxProps, Collapsible, CollapsibleContent, CollapsibleTrigger, type ColorKey, ColorPicker, type ColorPickerProps, type ColorToken, DatePicker, type DatePickerMode, type DatePickerProps, type DatePreset, Divider, type DividerProps, Drawer, DrawerBody, DrawerClose, DrawerDescription, type DrawerDirection, DrawerFooter, DrawerHeader, type DrawerProps, DrawerTitle, EmailInput, type EmailInputProps, EmptyState, type EmptyStateProps, FileUploadZone, type FileUploadZoneProps, type FloatingAction, FloatingButton, type FloatingButtonProps, Gantt, type GanttBand, type GanttBar, type GanttDay, GanttDot, type GanttProps, type GanttRow, GanttSwatch, Icon, type IconColor, type IconFamily, type IconProps, type IconSize, type IconTabItem, IconTabs, type IconTabsProps, Image, type ImageProps, Input, InputGroup, InputGroupAddon, type InputGroupAddonProps, InputGroupButton, type InputGroupButtonProps, type InputGroupProps, type InputProps, Item, ItemActions, ItemContent, ItemDescription, ItemMedia, type ItemMediaProps, type ItemProps, ItemTitle, Label, type LabelProps, Layout, type LayoutProps, Link, type LinkProps, MetricCard, type MetricCardProps, Modal, ModalBody, ModalClose, ModalDescription, ModalFooter, ModalHeader, type ModalProps, ModalTitle, type MultiSelectProps, type OptimizeImageOptions, type OptimizeImageResult, PageContainer, type PageContainerProps, Pagination, type PaginationProps, PasswordInput, type PasswordInputProps, PdfPreview, type PdfPreviewProps, PhoneInput, type PhoneInputMeta, type PhoneInputProps, Popover, type PopoverMenuItem, type PopoverProps, ProgressBar, type ProgressBarProps, Radio, type RadioOption, type RadioProps, ScrollArea, type ScrollAreaProps, SearchInput, type SearchInputProps, Select, type SelectOption, type SelectProps, type SingleSelectProps, Skeleton, type SkeletonProps, Spinner, type SpinnerProps, type SpinnerSize, Stepper, type StepperProps, Switch, type SwitchProps, type TabItem, Table, TableCell, type TableCellProps, type TableEmptyState, TableFooter, TableFooterCell, type TableFooterCellProps, type TableFooterProps, TableFooterRow, type TableFooterRowProps, TableHeader, TableHeaderCell, type TableHeaderCellProps, type TableHeaderProps, TableHeaderRow, type TableHeaderRowProps, type TablePagination, type TableProps, TableRow, type TableRowProps, Tabs, type TabsProps, type TabsVariant, TagBubble, type TagBubbleProps, type TagOption, TagSelect, type TagSelectProps, Text, type TextProps, Textarea, type TextareaProps, Timeline, type TimelineItem, type TimelineProps, type ToastOptions, type ToastType, Toaster, Tooltip, type TooltipProps, addBusinessDays, appendCacheBuster, appendQueryParam, buttonVariants, capitalizeFirstLetter, colors, easterDate, formatAddress, formatCityFromFormattedAddress, formatCityWithPostalCode, formatDate, formatDateWithTime, formatDistance, formatDuration, formatEuro, formatKM, formatLocality, formatName, formatNameWithInitial, formatPhoneNumber, formatPlate, formatPlateWithoutDashes, formatPostalCodeFromFormattedAddress, formatRegionCode, formatTime, formatVin, generateHexColor, getAvatarColor, getCleanFileName, getFileIconByMimeType, getFileKind, getFileNameFromUrl, getInitials, getMimeCategory, getRelativeTime, isHoliday, isSameDay, isolateCity, optimizeImage, parseAmount, parseIsoDate, toast, truncateFileName, truncateText, useAvatarSize };
+/**
+ * Attributs qui neutralisent l'autofill du navigateur **et** des gestionnaires
+ * de mots de passe (1Password, LastPass, Bitwarden, Dashlane) sur un champ.
+ *
+ * Appliqués par défaut par les champs du DS : sans ça, un coffre-fort réécrit
+ * à l'ouverture d'une page les valeurs déjà présentes dans le formulaire
+ * (fiche existante en édition), silencieusement.
+ *
+ * `autoComplete: 'off'` seul ne suffit pas : les extensions l'ignorent, chacune
+ * a son propre attribut d'opt-out.
+ *
+ * Étalés **avant** les props du consommateur : un champ qui a besoin de
+ * l'autofill (page de login) surcharge ce qu'il veut, y compris en repassant
+ * `undefined` sur un `data-*` pour le retirer.
+ *
+ * @example
+ * <input {...noAutofillProps} {...props} />
+ * // login : <Input autoComplete="username" data-1p-ignore={undefined} />
+ */
+declare const noAutofillProps: {
+    readonly autoComplete: "off";
+    /** 1Password */
+    readonly 'data-1p-ignore': true;
+    /** LastPass */
+    readonly 'data-lpignore': "true";
+    /** Bitwarden */
+    readonly 'data-bwignore': true;
+    /** Dashlane */
+    readonly 'data-form-type': "other";
+};
+/**
+ * Inverse de {@link noAutofillProps} : réautorise l'autofill sur un champ
+ * précis, en neutralisant les `data-*` d'opt-out posés par défaut.
+ *
+ * À réserver aux champs où l'autofill est *voulu* : login, changement de mot
+ * de passe. Partout ailleurs, le défaut du DS est le bon comportement.
+ *
+ * @param autoComplete valeur HTML `autocomplete` du champ — `username`,
+ * `current-password`, `new-password`, `email`…
+ *
+ * @example
+ * <Input type="text" {...allowAutofill('username')} />
+ * <PasswordInput {...allowAutofill('current-password')} />
+ */
+declare const allowAutofill: (autoComplete: string) => {
+    autoComplete: string;
+    "data-1p-ignore": undefined;
+    "data-lpignore": undefined;
+    "data-bwignore": undefined;
+    "data-form-type": undefined;
+};
+
+export { Attachment, type AttachmentProps, type AttachmentStatus, Avatar, AvatarBadge, type AvatarBadgeConfig, type AvatarBadgeProps, AvatarFallback, type AvatarFallbackProps, AvatarGroup, type AvatarGroupProps, AvatarImage, type AvatarImageProps, type AvatarProps, Badge, type BadgeProps, Banner, type BannerAction, type BannerProps, type BannerToggle, Box, type BoxProps, Bulk, type BulkProps, type BulkSection, Button, type ButtonColor, type ButtonProps, COLOR_TOKENS, Checkbox, type CheckboxProps, Collapsible, CollapsibleContent, CollapsibleTrigger, type ColorKey, ColorPicker, type ColorPickerProps, type ColorToken, DatePicker, type DatePickerMode, type DatePickerProps, type DatePreset, Divider, type DividerProps, Drawer, DrawerBody, DrawerClose, DrawerDescription, type DrawerDirection, DrawerFooter, DrawerHeader, type DrawerProps, DrawerTitle, EmailInput, type EmailInputProps, EmptyState, type EmptyStateProps, FileUploadZone, type FileUploadZoneProps, type FloatingAction, FloatingButton, type FloatingButtonProps, Gantt, type GanttBand, type GanttBar, type GanttDay, GanttDot, type GanttProps, type GanttRow, GanttSwatch, Icon, type IconColor, type IconFamily, type IconProps, type IconSize, type IconTabItem, IconTabs, type IconTabsProps, Image, type ImageProps, Input, InputGroup, InputGroupAddon, type InputGroupAddonProps, InputGroupButton, type InputGroupButtonProps, type InputGroupProps, type InputProps, Item, ItemActions, ItemContent, ItemDescription, ItemMedia, type ItemMediaProps, type ItemProps, ItemTitle, Label, type LabelProps, Layout, type LayoutProps, Link, type LinkProps, MetricCard, type MetricCardProps, Modal, ModalBody, ModalClose, ModalDescription, ModalFooter, ModalHeader, type ModalProps, ModalTitle, type MultiSelectProps, type OptimizeImageOptions, type OptimizeImageResult, PageContainer, type PageContainerProps, Pagination, type PaginationProps, PasswordInput, type PasswordInputProps, PdfPreview, type PdfPreviewProps, PhoneInput, type PhoneInputMeta, type PhoneInputProps, Popover, type PopoverMenuItem, type PopoverProps, ProgressBar, type ProgressBarProps, Radio, type RadioOption, type RadioProps, ScrollArea, type ScrollAreaProps, SearchInput, type SearchInputProps, Select, type SelectOption, type SelectProps, type SingleSelectProps, Skeleton, type SkeletonProps, Spinner, type SpinnerProps, type SpinnerSize, Stepper, type StepperProps, Switch, type SwitchProps, type TabItem, Table, TableCell, type TableCellProps, type TableEmptyState, TableFooter, TableFooterCell, type TableFooterCellProps, type TableFooterProps, TableFooterRow, type TableFooterRowProps, TableHeader, TableHeaderCell, type TableHeaderCellProps, type TableHeaderProps, TableHeaderRow, type TableHeaderRowProps, type TablePagination, type TableProps, TableRow, type TableRowProps, Tabs, type TabsProps, type TabsVariant, TagBubble, type TagBubbleProps, type TagOption, TagSelect, type TagSelectProps, Text, type TextProps, Textarea, type TextareaProps, Timeline, type TimelineItem, type TimelineProps, type ToastOptions, type ToastType, Toaster, Tooltip, type TooltipProps, addBusinessDays, allowAutofill, appendCacheBuster, appendQueryParam, buttonVariants, capitalizeFirstLetter, colors, easterDate, formatAddress, formatCityFromFormattedAddress, formatCityWithPostalCode, formatDate, formatDateWithTime, formatDistance, formatDuration, formatEuro, formatKM, formatLocality, formatName, formatNameWithInitial, formatPhoneNumber, formatPlate, formatPlateWithoutDashes, formatPostalCodeFromFormattedAddress, formatRegionCode, formatTime, formatVin, generateHexColor, getAvatarColor, getCleanFileName, getFileIconByMimeType, getFileKind, getFileNameFromUrl, getInitials, getMimeCategory, getRelativeTime, isHoliday, isSameDay, isolateCity, noAutofillProps, optimizeImage, parseAmount, parseIsoDate, toast, truncateFileName, truncateText, useAvatarSize };

package/dist/ui/index.js

@@ -149,6 +149,7 @@ __export(index_exports, {
   Toaster: () => Toaster,
   Tooltip: () => Tooltip,
   addBusinessDays: () => addBusinessDays,
+  allowAutofill: () => allowAutofill,
   appendCacheBuster: () => appendCacheBuster,
   appendQueryParam: () => appendQueryParam,
   buttonVariants: () => buttonVariants,
@@ -186,6 +187,7 @@ __export(index_exports, {
   isHoliday: () => isHoliday,
   isSameDay: () => isSameDay,
   isolateCity: () => isolateCity,
+  noAutofillProps: () => noAutofillProps,
   optimizeImage: () => optimizeImage,
   parseAmount: () => parseAmount,
   parseIsoDate: () => parseIsoDate,
@@ -990,6 +992,26 @@ Button.displayName = "Button";
 // src/ui/components/ui/Input.tsx
 var import_react9 = require("react");
 
+// src/ui/lib/autofill.ts
+var noAutofillProps = {
+  autoComplete: "off",
+  /** 1Password */
+  "data-1p-ignore": true,
+  /** LastPass */
+  "data-lpignore": "true",
+  /** Bitwarden */
+  "data-bwignore": true,
+  /** Dashlane */
+  "data-form-type": "other"
+};
+var allowAutofill = (autoComplete) => ({
+  autoComplete,
+  "data-1p-ignore": void 0,
+  "data-lpignore": void 0,
+  "data-bwignore": void 0,
+  "data-form-type": void 0
+});
+
 // src/ui/components/ui/Label.tsx
 var RadixLabel = __toESM(require("@radix-ui/react-label"));
 var import_jsx_runtime11 = require("react/jsx-runtime");
@@ -1026,10 +1048,11 @@ var Input = (0, import_react9.forwardRef)(
     const inputId = label ? id != null ? id : generatedId : id;
     const input = /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       "input",
-      __spreadValues({
+      __spreadValues(__spreadProps(__spreadValues({
         ref,
         id: inputId,
-        required,
+        required
+      }, noAutofillProps), {
         className: cn(
           "h-9 w-full rounded-[5px] border border-grey-300 bg-white px-2 text-[13px] font-sans text-neutral-800",
           "placeholder:font-sans placeholder:text-xs placeholder:text-grey-500",
@@ -1038,7 +1061,7 @@ var Input = (0, import_react9.forwardRef)(
           "aria-invalid:border-red-900 aria-invalid:focus:border-red-900",
           className
         )
-      }, props)
+      }), props)
     );
     if (!label) return input;
     return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Layout, { column: true, gap: 1.5, children: [
@@ -1057,8 +1080,9 @@ var Textarea = (0, import_react10.forwardRef)(
     var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
     return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       "textarea",
-      __spreadValues({
-        ref,
+      __spreadValues(__spreadProps(__spreadValues({
+        ref
+      }, noAutofillProps), {
         className: cn(
           "min-h-[80px] w-full rounded-[5px] border border-grey-300 bg-white px-2 py-2 text-[13px] font-sans text-neutral-800",
           "placeholder:font-sans placeholder:text-xs placeholder:text-grey-500",
@@ -1067,7 +1091,7 @@ var Textarea = (0, import_react10.forwardRef)(
           "aria-invalid:border-red-900 aria-invalid:focus:border-red-900",
           className
         )
-      }, props)
+      }), props)
     );
   }
 );
@@ -1139,6 +1163,7 @@ var PasswordInput = (0, import_react12.forwardRef)(
         __spreadValues({
           ref,
           type: visible ? "text" : "password",
+          autoComplete: "new-password",
           className: cn("pr-9", className)
         }, props)
       ),
@@ -1248,7 +1273,7 @@ var PhoneInput = ({
         value,
         onChange: handleChange,
         disabled,
-        inputProps: { onPaste: handlePaste },
+        inputProps: __spreadValues({ onPaste: handlePaste }, noAutofillProps),
         className: cn(className)
       }
     )
@@ -1818,17 +1843,18 @@ var SearchField = ({
   setSearchTerm
 }) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
   "input",
-  {
+  __spreadProps(__spreadValues({
     ref: searchInputRef,
     type: "text",
-    placeholder: "Rechercher...",
+    placeholder: "Rechercher..."
+  }, noAutofillProps), {
     value: searchTerm,
     onChange: (e) => setSearchTerm(e.target.value),
     onKeyDown: (e) => {
       if (!NAVIGATION_KEYS.has(e.key)) e.stopPropagation();
     },
     className: "w-full border-b border-grey-200 px-2 py-2 text-[13px] outline-none focus:border-blue-700"
-  }
+  })
 );
 var Select = (props) => {
   const {
@@ -2122,10 +2148,11 @@ var TagSelect = ({
             )),
             /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
               "input",
-              {
+              __spreadProps(__spreadValues({
                 ref: inputRef,
                 type: "text",
-                disabled,
+                disabled
+              }, noAutofillProps), {
                 value: searchTerm,
                 onChange: (e) => {
                   setSearchTerm(e.target.value);
@@ -2135,7 +2162,7 @@ var TagSelect = ({
                 onKeyDown: handleKeyDown,
                 placeholder: value.length === 0 ? placeholder : "",
                 className: "min-w-[80px] flex-1 border-0 bg-transparent p-0.5 text-xs text-neutral-800 outline-none placeholder:text-grey-600 disabled:cursor-not-allowed"
-              }
+              })
             )
           ]
         }
@@ -4159,13 +4186,14 @@ var ColorPicker = (0, import_react26.forwardRef)(
             ),
             /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
               "input",
-              {
+              __spreadProps(__spreadValues({
                 type: "text",
-                value: currentColor,
+                value: currentColor
+              }, noAutofillProps), {
                 onChange: handleChange,
                 disabled,
                 className: inputVariants({ size })
-              }
+              })
             )
           ] })
         ]
@@ -5687,6 +5715,7 @@ var optimizeImage = async (file, desiredBaseName, opts = {}) => {
   Toaster,
   Tooltip,
   addBusinessDays,
+  allowAutofill,
   appendCacheBuster,
   appendQueryParam,
   buttonVariants,
@@ -5724,6 +5753,7 @@ var optimizeImage = async (file, desiredBaseName, opts = {}) => {
   isHoliday,
   isSameDay,
   isolateCity,
+  noAutofillProps,
   optimizeImage,
   parseAmount,
   parseIsoDate,

package/dist/ui/index.mjs

@@ -824,6 +824,26 @@ Button.displayName = "Button";
 // src/ui/components/ui/Input.tsx
 import { forwardRef as forwardRef9, useId } from "react";
 
+// src/ui/lib/autofill.ts
+var noAutofillProps = {
+  autoComplete: "off",
+  /** 1Password */
+  "data-1p-ignore": true,
+  /** LastPass */
+  "data-lpignore": "true",
+  /** Bitwarden */
+  "data-bwignore": true,
+  /** Dashlane */
+  "data-form-type": "other"
+};
+var allowAutofill = (autoComplete) => ({
+  autoComplete,
+  "data-1p-ignore": void 0,
+  "data-lpignore": void 0,
+  "data-bwignore": void 0,
+  "data-form-type": void 0
+});
+
 // src/ui/components/ui/Label.tsx
 import * as RadixLabel from "@radix-ui/react-label";
 import { jsx as jsx11, jsxs as jsxs2 } from "react/jsx-runtime";
@@ -860,10 +880,11 @@ var Input = forwardRef9(
     const inputId = label ? id != null ? id : generatedId : id;
     const input = /* @__PURE__ */ jsx12(
       "input",
-      __spreadValues({
+      __spreadValues(__spreadProps(__spreadValues({
         ref,
         id: inputId,
-        required,
+        required
+      }, noAutofillProps), {
         className: cn(
           "h-9 w-full rounded-[5px] border border-grey-300 bg-white px-2 text-[13px] font-sans text-neutral-800",
           "placeholder:font-sans placeholder:text-xs placeholder:text-grey-500",
@@ -872,7 +893,7 @@ var Input = forwardRef9(
           "aria-invalid:border-red-900 aria-invalid:focus:border-red-900",
           className
         )
-      }, props)
+      }), props)
     );
     if (!label) return input;
     return /* @__PURE__ */ jsxs3(Layout, { column: true, gap: 1.5, children: [
@@ -891,8 +912,9 @@ var Textarea = forwardRef10(
     var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
     return /* @__PURE__ */ jsx13(
       "textarea",
-      __spreadValues({
-        ref,
+      __spreadValues(__spreadProps(__spreadValues({
+        ref
+      }, noAutofillProps), {
         className: cn(
           "min-h-[80px] w-full rounded-[5px] border border-grey-300 bg-white px-2 py-2 text-[13px] font-sans text-neutral-800",
           "placeholder:font-sans placeholder:text-xs placeholder:text-grey-500",
@@ -901,7 +923,7 @@ var Textarea = forwardRef10(
           "aria-invalid:border-red-900 aria-invalid:focus:border-red-900",
           className
         )
-      }, props)
+      }), props)
     );
   }
 );
@@ -973,6 +995,7 @@ var PasswordInput = forwardRef12(
         __spreadValues({
           ref,
           type: visible ? "text" : "password",
+          autoComplete: "new-password",
           className: cn("pr-9", className)
         }, props)
       ),
@@ -1086,7 +1109,7 @@ var PhoneInput = ({
         value,
         onChange: handleChange,
         disabled,
-        inputProps: { onPaste: handlePaste },
+        inputProps: __spreadValues({ onPaste: handlePaste }, noAutofillProps),
         className: cn(className)
       }
     )
@@ -1662,17 +1685,18 @@ var SearchField = ({
   setSearchTerm
 }) => /* @__PURE__ */ jsx24(
   "input",
-  {
+  __spreadProps(__spreadValues({
     ref: searchInputRef,
     type: "text",
-    placeholder: "Rechercher...",
+    placeholder: "Rechercher..."
+  }, noAutofillProps), {
     value: searchTerm,
     onChange: (e) => setSearchTerm(e.target.value),
     onKeyDown: (e) => {
       if (!NAVIGATION_KEYS.has(e.key)) e.stopPropagation();
     },
     className: "w-full border-b border-grey-200 px-2 py-2 text-[13px] outline-none focus:border-blue-700"
-  }
+  })
 );
 var Select = (props) => {
   const {
@@ -1966,10 +1990,11 @@ var TagSelect = ({
             )),
             /* @__PURE__ */ jsx25(
               "input",
-              {
+              __spreadProps(__spreadValues({
                 ref: inputRef,
                 type: "text",
-                disabled,
+                disabled
+              }, noAutofillProps), {
                 value: searchTerm,
                 onChange: (e) => {
                   setSearchTerm(e.target.value);
@@ -1979,7 +2004,7 @@ var TagSelect = ({
                 onKeyDown: handleKeyDown,
                 placeholder: value.length === 0 ? placeholder : "",
                 className: "min-w-[80px] flex-1 border-0 bg-transparent p-0.5 text-xs text-neutral-800 outline-none placeholder:text-grey-600 disabled:cursor-not-allowed"
-              }
+              })
             )
           ]
         }
@@ -4014,13 +4039,14 @@ var ColorPicker = forwardRef17(
             ),
             /* @__PURE__ */ jsx58(
               "input",
-              {
+              __spreadProps(__spreadValues({
                 type: "text",
-                value: currentColor,
+                value: currentColor
+              }, noAutofillProps), {
                 onChange: handleChange,
                 disabled,
                 className: inputVariants({ size })
-              }
+              })
             )
           ] })
         ]
@@ -5550,6 +5576,7 @@ export {
   Toaster,
   Tooltip,
   addBusinessDays,
+  allowAutofill,
   appendCacheBuster,
   appendQueryParam,
   buttonVariants,
@@ -5587,6 +5614,7 @@ export {
   isHoliday,
   isSameDay,
   isolateCity,
+  noAutofillProps,
   optimizeImage,
   parseAmount,
   parseIsoDate,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "design-zystem",
-  "version": "1.0.311",
+  "version": "1.0.312",
   "description": "A React design system of importable components",
   "main": "dist/index.js",
   "module": "dist/index.mjs",