@mond-design-system/react 4.12.0 → 5.0.0

package/dist/index.d.cts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { CSSProperties, HTMLAttributes, JSX, ReactElement, Ref, ReactNode, ButtonHTMLAttributes, ElementType, ComponentPropsWithRef, MouseEventHandler, InputHTMLAttributes, TextareaHTMLAttributes, SelectHTMLAttributes, RefObject, KeyboardEvent } from 'react';
+import { CSSProperties, HTMLAttributes, JSX, ReactElement, Ref, ReactNode, ButtonHTMLAttributes, ElementType, ComponentPropsWithRef, MouseEventHandler, InputHTMLAttributes, HTMLInputTypeAttribute, TextareaHTMLAttributes, SelectHTMLAttributes, RefObject, KeyboardEvent } from 'react';
 
 /**
  * Join class names, dropping anything falsy.
@@ -612,7 +612,18 @@ interface FieldProps {
 declare function Field({ label, children, hint, error, required, className }: FieldProps): ReactElement;
 
 type InputSize = "sm" | "md" | "lg";
-interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
+interface InputBaseProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
+    /** The native input type, passed straight through — the system adds no types
+        of its own, so `email`, `tel`, `url` and `number` behave as the platform
+        defines them, keyboard and validation included. Default "text".
+  
+        One type the component answers to: with `type="search"`, `onClear` takes
+        over the browser's own clear cross, so the field shows one clear
+        affordance rather than two. Without `onClear` the native cross is left
+        alone — there it is the only way to empty the field. */
+    type?: HTMLInputTypeAttribute;
+    /** Control height and type size. The icon slots, the gutter and the clear
+        button all step with it. Default "md". */
     size?: InputSize;
     /** Marks the value as failing validation — sets aria-invalid and the danger
         border. Inside a Field the field's error state does this already. */
@@ -624,20 +635,50 @@ interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size">
     iconRight?: ReactNode;
     ref?: Ref<HTMLInputElement>;
 }
+type ClearEnforcement = {
+    /** Raises a clear button in the trailing slot whenever the field holds
+        text, and runs when it is pressed. An uncontrolled field is emptied
+        for you; a controlled one is yours to empty here. Rules out
+        iconRight — they are the same slot. */
+    onClear: () => void;
+    /** Names that button, e.g. "Clear search". Required: the cross says
+        nothing to a screen reader, and the words are the app's — "Clear
+        search" and "Clear filter" are not interchangeable. */
+    clearLabel: string;
+    iconRight?: undefined;
+} | {
+    onClear?: undefined;
+    clearLabel?: undefined;
+};
+type InputProps = InputBaseProps & ClearEnforcement;
 /**
  * Single-line text input. Inside a Field it inherits id/description/invalid.
  *
+ * Sizes are `sm` / `md` / `lg`; the icon slots and the clear button step with
+ * them. `onClear` folds in what SearchField used to be — pair it with
+ * `type="search"` and it replaces the browser's own clear cross.
+ *
  * ```tsx
  * <Field label="Name">
  *   <Input value={name} onChange={(e) => setName(e.target.value)} />
  * </Field>
  *
  * <Input aria-label="Search" iconLeft={<Icon name="search" />} />
+ *
+ * <Input
+ *   type="search"
+ *   aria-label="Search sessions"
+ *   iconLeft={<Icon name="search" />}
+ *   value={query}
+ *   onChange={(e) => setQuery(e.target.value)}
+ *   clearLabel="Clear search"
+ *   onClear={() => setQuery("")}
+ * />
  * ```
  */
-declare function Input({ size, invalid, iconLeft, iconRight, className, ...rest }: InputProps): ReactElement;
+declare function Input({ size, invalid, iconLeft, iconRight, onClear, clearLabel, className, ref, ...rest }: InputProps): ReactElement;
 
-interface PasswordInputProps extends Omit<InputProps, "type"> {
+interface PasswordInputProps extends Omit<InputProps, "type" | "onClear" | "clearLabel" | "iconRight"> {
     /** Names the reveal button while the password is hidden, e.g. "Show password".
         Required: the button carries no visible text, so this is the only thing a
         screen reader has, and it is the app's language rather than the system's. */
@@ -820,26 +861,6 @@ interface SegmentedControlProps<T extends string = string> {
  */
 declare function SegmentedControl<T extends string = string>({ label, options, value, onChange, disabled, fullWidth, size, bare, repick, className, }: SegmentedControlProps<T>): ReactElement;
 
-interface SearchFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "size" | "value" | "onChange"> {
-    /** Accessible name. */
-    label: string;
-    /** Names the clear button, e.g. "Clear search". Required: the button is a
-        glyph, so this is all a screen reader has, and the words are the app's. */
-    clearLabel: string;
-    value: string;
-    /** Receives the new text — "" when cleared. */
-    onChange: (value: string) => void;
-    ref?: Ref<HTMLInputElement>;
-}
-/**
- * Controlled search input with a clear affordance once there is text.
- *
- * ```tsx
- * <SearchField label="Search sessions" clearLabel="Clear search" value={query} onChange={setQuery} />
- * ```
- */
-declare function SearchField({ label, clearLabel, value, onChange, className, ...rest }: SearchFieldProps): ReactElement;
-
 interface ScrollerLabels {
     previous: string;
     next: string;
@@ -1958,4 +1979,4 @@ interface RovingGroupOptions {
  */
 declare function useRovingGroup(ref: RefObject<HTMLElement | null>, { selector, orientation }: RovingGroupOptions): (event: KeyboardEvent<HTMLElement>) => void;
 
-export { AppBar, type AppBarProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarSize, Badge, type BadgeProps, type BadgeTone, Breadcrumb, type BreadcrumbProps, Button, type ButtonProps, type ButtonShape, type ButtonSize, type ButtonVariant, type CSSVars, Card, CardBody, type CardBodyProps, CardFooter, CardHeader, type CardProps, type CardSectionProps, type CardVariant, type CarouselPager, type CarouselSlide, Checkbox, type CheckboxProps, Chip, ChipBar, type ChipBarGap, type ChipBarProps, ChipGroup, type ChipGroupGap, type ChipGroupProps, type ChipProps, type ChipVariant, ConfirmDialog, type ConfirmDialogProps, type ConfirmDialogTone, Container, type ContainerProps, type ContainerWidth, CountButton, type CountButtonProps, type CountButtonTone, type Crumb, type DataColumn, DataTable, type DataTableProps, type DataTableSelectionLabels, DateTimePicker, type DateTimePickerLabels, type DateTimePickerProps, Divider, type DividerProps, EmptyState, type EmptyStateProps, Field, type FieldContextValue, type FieldProps, FileDrop, type FileDropProps, Heading, type HeadingLevel, type HeadingProps, type HeadingTone, Icon, type IconProps, IconProvider, type IconProviderProps, type IconRender, type IconRenderProps, type IconSize, ImageCarousel, type ImageCarouselLabels, type ImageCarouselProps, Inline, type InlineAlign, type InlineGap, type InlineJustify, type InlineProps, Input, type InputProps, type InputSize, Lightbox, type LightboxLabels, type LightboxProps, Link, type LinkProps, type LinkVariant, ListGroup, type ListGroupProps, ListItem, type ListItemProps, MediaPlaceholder, type MediaPlaceholderProps, Modal, ModalBody, ModalFooter, ModalHeader, type ModalProps, type OverlayHistory, OverlayHistoryContext, PasswordInput, type PasswordInputProps, type Presence, ProgressBar, type ProgressBarProps, Radio, type RadioProps, type RovingGroupOptions, Screen, ScreenContent, type ScreenContentProps, Scroller, type ScrollerLabels, type ScrollerProps, SearchField, type SearchFieldProps, type SegmentOption, SegmentedControl, type SegmentedControlProps, type SegmentedControlSize, Select, type SelectProps, type SelectSize, Sheet, SheetBody, SheetFooter, SheetHeader, type SheetProps, SideNav, SideNavGroup, type SideNavGroupProps, SideNavItem, type SideNavItemProps, type SideNavProps, Skeleton, type SkeletonProps, type SkeletonVariant, Spinner, type SpinnerProps, Stack, type StackAlign, type StackGap, type StackProps, Switch, type SwitchProps, Tab, TabBar, TabBarAction, type TabBarActionProps, TabBarItem, type TabBarItemProps, type TabBarProps, TabList, type TabListProps, TabPanel, type TabPanelProps, type TabProps, Tabs, type TabsProps, Tag, type TagProps, type TagTone, Text, type TextProps, type TextTone, type TextVariant, Textarea, type TextareaProps, type ToastAction, type ToastOptions, ToastProvider, type ToastProviderProps, type ToastTone, UploadProgress, type UploadProgressLabels, type UploadProgressProps, type UploadStatus, type UseOverlayOptions, type VideoCaptions, type VideoChapter, VideoPlayer, type VideoPlayerLabels, type VideoPlayerProps, VisuallyHidden, type VisuallyHiddenProps, cx, useFieldContext, useOverlay, usePresence, useRovingGroup, useToast };
+export { AppBar, type AppBarProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarSize, Badge, type BadgeProps, type BadgeTone, Breadcrumb, type BreadcrumbProps, Button, type ButtonProps, type ButtonShape, type ButtonSize, type ButtonVariant, type CSSVars, Card, CardBody, type CardBodyProps, CardFooter, CardHeader, type CardProps, type CardSectionProps, type CardVariant, type CarouselPager, type CarouselSlide, Checkbox, type CheckboxProps, Chip, ChipBar, type ChipBarGap, type ChipBarProps, ChipGroup, type ChipGroupGap, type ChipGroupProps, type ChipProps, type ChipVariant, ConfirmDialog, type ConfirmDialogProps, type ConfirmDialogTone, Container, type ContainerProps, type ContainerWidth, CountButton, type CountButtonProps, type CountButtonTone, type Crumb, type DataColumn, DataTable, type DataTableProps, type DataTableSelectionLabels, DateTimePicker, type DateTimePickerLabels, type DateTimePickerProps, Divider, type DividerProps, EmptyState, type EmptyStateProps, Field, type FieldContextValue, type FieldProps, FileDrop, type FileDropProps, Heading, type HeadingLevel, type HeadingProps, type HeadingTone, Icon, type IconProps, IconProvider, type IconProviderProps, type IconRender, type IconRenderProps, type IconSize, ImageCarousel, type ImageCarouselLabels, type ImageCarouselProps, Inline, type InlineAlign, type InlineGap, type InlineJustify, type InlineProps, Input, type InputProps, type InputSize, Lightbox, type LightboxLabels, type LightboxProps, Link, type LinkProps, type LinkVariant, ListGroup, type ListGroupProps, ListItem, type ListItemProps, MediaPlaceholder, type MediaPlaceholderProps, Modal, ModalBody, ModalFooter, ModalHeader, type ModalProps, type OverlayHistory, OverlayHistoryContext, PasswordInput, type PasswordInputProps, type Presence, ProgressBar, type ProgressBarProps, Radio, type RadioProps, type RovingGroupOptions, Screen, ScreenContent, type ScreenContentProps, Scroller, type ScrollerLabels, type ScrollerProps, type SegmentOption, SegmentedControl, type SegmentedControlProps, type SegmentedControlSize, Select, type SelectProps, type SelectSize, Sheet, SheetBody, SheetFooter, SheetHeader, type SheetProps, SideNav, SideNavGroup, type SideNavGroupProps, SideNavItem, type SideNavItemProps, type SideNavProps, Skeleton, type SkeletonProps, type SkeletonVariant, Spinner, type SpinnerProps, Stack, type StackAlign, type StackGap, type StackProps, Switch, type SwitchProps, Tab, TabBar, TabBarAction, type TabBarActionProps, TabBarItem, type TabBarItemProps, type TabBarProps, TabList, type TabListProps, TabPanel, type TabPanelProps, type TabProps, Tabs, type TabsProps, Tag, type TagProps, type TagTone, Text, type TextProps, type TextTone, type TextVariant, Textarea, type TextareaProps, type ToastAction, type ToastOptions, ToastProvider, type ToastProviderProps, type ToastTone, UploadProgress, type UploadProgressLabels, type UploadProgressProps, type UploadStatus, type UseOverlayOptions, type VideoCaptions, type VideoChapter, VideoPlayer, type VideoPlayerLabels, type VideoPlayerProps, VisuallyHidden, type VisuallyHiddenProps, cx, useFieldContext, useOverlay, usePresence, useRovingGroup, useToast };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { CSSProperties, HTMLAttributes, JSX, ReactElement, Ref, ReactNode, ButtonHTMLAttributes, ElementType, ComponentPropsWithRef, MouseEventHandler, InputHTMLAttributes, TextareaHTMLAttributes, SelectHTMLAttributes, RefObject, KeyboardEvent } from 'react';
+import { CSSProperties, HTMLAttributes, JSX, ReactElement, Ref, ReactNode, ButtonHTMLAttributes, ElementType, ComponentPropsWithRef, MouseEventHandler, InputHTMLAttributes, HTMLInputTypeAttribute, TextareaHTMLAttributes, SelectHTMLAttributes, RefObject, KeyboardEvent } from 'react';
 
 /**
  * Join class names, dropping anything falsy.
@@ -612,7 +612,18 @@ interface FieldProps {
 declare function Field({ label, children, hint, error, required, className }: FieldProps): ReactElement;
 
 type InputSize = "sm" | "md" | "lg";
-interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
+interface InputBaseProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
+    /** The native input type, passed straight through — the system adds no types
+        of its own, so `email`, `tel`, `url` and `number` behave as the platform
+        defines them, keyboard and validation included. Default "text".
+  
+        One type the component answers to: with `type="search"`, `onClear` takes
+        over the browser's own clear cross, so the field shows one clear
+        affordance rather than two. Without `onClear` the native cross is left
+        alone — there it is the only way to empty the field. */
+    type?: HTMLInputTypeAttribute;
+    /** Control height and type size. The icon slots, the gutter and the clear
+        button all step with it. Default "md". */
     size?: InputSize;
     /** Marks the value as failing validation — sets aria-invalid and the danger
         border. Inside a Field the field's error state does this already. */
@@ -624,20 +635,50 @@ interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size">
     iconRight?: ReactNode;
     ref?: Ref<HTMLInputElement>;
 }
+type ClearEnforcement = {
+    /** Raises a clear button in the trailing slot whenever the field holds
+        text, and runs when it is pressed. An uncontrolled field is emptied
+        for you; a controlled one is yours to empty here. Rules out
+        iconRight — they are the same slot. */
+    onClear: () => void;
+    /** Names that button, e.g. "Clear search". Required: the cross says
+        nothing to a screen reader, and the words are the app's — "Clear
+        search" and "Clear filter" are not interchangeable. */
+    clearLabel: string;
+    iconRight?: undefined;
+} | {
+    onClear?: undefined;
+    clearLabel?: undefined;
+};
+type InputProps = InputBaseProps & ClearEnforcement;
 /**
  * Single-line text input. Inside a Field it inherits id/description/invalid.
  *
+ * Sizes are `sm` / `md` / `lg`; the icon slots and the clear button step with
+ * them. `onClear` folds in what SearchField used to be — pair it with
+ * `type="search"` and it replaces the browser's own clear cross.
+ *
  * ```tsx
  * <Field label="Name">
  *   <Input value={name} onChange={(e) => setName(e.target.value)} />
  * </Field>
  *
  * <Input aria-label="Search" iconLeft={<Icon name="search" />} />
+ *
+ * <Input
+ *   type="search"
+ *   aria-label="Search sessions"
+ *   iconLeft={<Icon name="search" />}
+ *   value={query}
+ *   onChange={(e) => setQuery(e.target.value)}
+ *   clearLabel="Clear search"
+ *   onClear={() => setQuery("")}
+ * />
  * ```
  */
-declare function Input({ size, invalid, iconLeft, iconRight, className, ...rest }: InputProps): ReactElement;
+declare function Input({ size, invalid, iconLeft, iconRight, onClear, clearLabel, className, ref, ...rest }: InputProps): ReactElement;
 
-interface PasswordInputProps extends Omit<InputProps, "type"> {
+interface PasswordInputProps extends Omit<InputProps, "type" | "onClear" | "clearLabel" | "iconRight"> {
     /** Names the reveal button while the password is hidden, e.g. "Show password".
         Required: the button carries no visible text, so this is the only thing a
         screen reader has, and it is the app's language rather than the system's. */
@@ -820,26 +861,6 @@ interface SegmentedControlProps<T extends string = string> {
  */
 declare function SegmentedControl<T extends string = string>({ label, options, value, onChange, disabled, fullWidth, size, bare, repick, className, }: SegmentedControlProps<T>): ReactElement;
 
-interface SearchFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "size" | "value" | "onChange"> {
-    /** Accessible name. */
-    label: string;
-    /** Names the clear button, e.g. "Clear search". Required: the button is a
-        glyph, so this is all a screen reader has, and the words are the app's. */
-    clearLabel: string;
-    value: string;
-    /** Receives the new text — "" when cleared. */
-    onChange: (value: string) => void;
-    ref?: Ref<HTMLInputElement>;
-}
-/**
- * Controlled search input with a clear affordance once there is text.
- *
- * ```tsx
- * <SearchField label="Search sessions" clearLabel="Clear search" value={query} onChange={setQuery} />
- * ```
- */
-declare function SearchField({ label, clearLabel, value, onChange, className, ...rest }: SearchFieldProps): ReactElement;
-
 interface ScrollerLabels {
     previous: string;
     next: string;
@@ -1958,4 +1979,4 @@ interface RovingGroupOptions {
  */
 declare function useRovingGroup(ref: RefObject<HTMLElement | null>, { selector, orientation }: RovingGroupOptions): (event: KeyboardEvent<HTMLElement>) => void;
 
-export { AppBar, type AppBarProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarSize, Badge, type BadgeProps, type BadgeTone, Breadcrumb, type BreadcrumbProps, Button, type ButtonProps, type ButtonShape, type ButtonSize, type ButtonVariant, type CSSVars, Card, CardBody, type CardBodyProps, CardFooter, CardHeader, type CardProps, type CardSectionProps, type CardVariant, type CarouselPager, type CarouselSlide, Checkbox, type CheckboxProps, Chip, ChipBar, type ChipBarGap, type ChipBarProps, ChipGroup, type ChipGroupGap, type ChipGroupProps, type ChipProps, type ChipVariant, ConfirmDialog, type ConfirmDialogProps, type ConfirmDialogTone, Container, type ContainerProps, type ContainerWidth, CountButton, type CountButtonProps, type CountButtonTone, type Crumb, type DataColumn, DataTable, type DataTableProps, type DataTableSelectionLabels, DateTimePicker, type DateTimePickerLabels, type DateTimePickerProps, Divider, type DividerProps, EmptyState, type EmptyStateProps, Field, type FieldContextValue, type FieldProps, FileDrop, type FileDropProps, Heading, type HeadingLevel, type HeadingProps, type HeadingTone, Icon, type IconProps, IconProvider, type IconProviderProps, type IconRender, type IconRenderProps, type IconSize, ImageCarousel, type ImageCarouselLabels, type ImageCarouselProps, Inline, type InlineAlign, type InlineGap, type InlineJustify, type InlineProps, Input, type InputProps, type InputSize, Lightbox, type LightboxLabels, type LightboxProps, Link, type LinkProps, type LinkVariant, ListGroup, type ListGroupProps, ListItem, type ListItemProps, MediaPlaceholder, type MediaPlaceholderProps, Modal, ModalBody, ModalFooter, ModalHeader, type ModalProps, type OverlayHistory, OverlayHistoryContext, PasswordInput, type PasswordInputProps, type Presence, ProgressBar, type ProgressBarProps, Radio, type RadioProps, type RovingGroupOptions, Screen, ScreenContent, type ScreenContentProps, Scroller, type ScrollerLabels, type ScrollerProps, SearchField, type SearchFieldProps, type SegmentOption, SegmentedControl, type SegmentedControlProps, type SegmentedControlSize, Select, type SelectProps, type SelectSize, Sheet, SheetBody, SheetFooter, SheetHeader, type SheetProps, SideNav, SideNavGroup, type SideNavGroupProps, SideNavItem, type SideNavItemProps, type SideNavProps, Skeleton, type SkeletonProps, type SkeletonVariant, Spinner, type SpinnerProps, Stack, type StackAlign, type StackGap, type StackProps, Switch, type SwitchProps, Tab, TabBar, TabBarAction, type TabBarActionProps, TabBarItem, type TabBarItemProps, type TabBarProps, TabList, type TabListProps, TabPanel, type TabPanelProps, type TabProps, Tabs, type TabsProps, Tag, type TagProps, type TagTone, Text, type TextProps, type TextTone, type TextVariant, Textarea, type TextareaProps, type ToastAction, type ToastOptions, ToastProvider, type ToastProviderProps, type ToastTone, UploadProgress, type UploadProgressLabels, type UploadProgressProps, type UploadStatus, type UseOverlayOptions, type VideoCaptions, type VideoChapter, VideoPlayer, type VideoPlayerLabels, type VideoPlayerProps, VisuallyHidden, type VisuallyHiddenProps, cx, useFieldContext, useOverlay, usePresence, useRovingGroup, useToast };
+export { AppBar, type AppBarProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarSize, Badge, type BadgeProps, type BadgeTone, Breadcrumb, type BreadcrumbProps, Button, type ButtonProps, type ButtonShape, type ButtonSize, type ButtonVariant, type CSSVars, Card, CardBody, type CardBodyProps, CardFooter, CardHeader, type CardProps, type CardSectionProps, type CardVariant, type CarouselPager, type CarouselSlide, Checkbox, type CheckboxProps, Chip, ChipBar, type ChipBarGap, type ChipBarProps, ChipGroup, type ChipGroupGap, type ChipGroupProps, type ChipProps, type ChipVariant, ConfirmDialog, type ConfirmDialogProps, type ConfirmDialogTone, Container, type ContainerProps, type ContainerWidth, CountButton, type CountButtonProps, type CountButtonTone, type Crumb, type DataColumn, DataTable, type DataTableProps, type DataTableSelectionLabels, DateTimePicker, type DateTimePickerLabels, type DateTimePickerProps, Divider, type DividerProps, EmptyState, type EmptyStateProps, Field, type FieldContextValue, type FieldProps, FileDrop, type FileDropProps, Heading, type HeadingLevel, type HeadingProps, type HeadingTone, Icon, type IconProps, IconProvider, type IconProviderProps, type IconRender, type IconRenderProps, type IconSize, ImageCarousel, type ImageCarouselLabels, type ImageCarouselProps, Inline, type InlineAlign, type InlineGap, type InlineJustify, type InlineProps, Input, type InputProps, type InputSize, Lightbox, type LightboxLabels, type LightboxProps, Link, type LinkProps, type LinkVariant, ListGroup, type ListGroupProps, ListItem, type ListItemProps, MediaPlaceholder, type MediaPlaceholderProps, Modal, ModalBody, ModalFooter, ModalHeader, type ModalProps, type OverlayHistory, OverlayHistoryContext, PasswordInput, type PasswordInputProps, type Presence, ProgressBar, type ProgressBarProps, Radio, type RadioProps, type RovingGroupOptions, Screen, ScreenContent, type ScreenContentProps, Scroller, type ScrollerLabels, type ScrollerProps, type SegmentOption, SegmentedControl, type SegmentedControlProps, type SegmentedControlSize, Select, type SelectProps, type SelectSize, Sheet, SheetBody, SheetFooter, SheetHeader, type SheetProps, SideNav, SideNavGroup, type SideNavGroupProps, SideNavItem, type SideNavItemProps, type SideNavProps, Skeleton, type SkeletonProps, type SkeletonVariant, Spinner, type SpinnerProps, Stack, type StackAlign, type StackGap, type StackProps, Switch, type SwitchProps, Tab, TabBar, TabBarAction, type TabBarActionProps, TabBarItem, type TabBarItemProps, type TabBarProps, TabList, type TabListProps, TabPanel, type TabPanelProps, type TabProps, Tabs, type TabsProps, Tag, type TagProps, type TagTone, Text, type TextProps, type TextTone, type TextVariant, Textarea, type TextareaProps, type ToastAction, type ToastOptions, ToastProvider, type ToastProviderProps, type ToastTone, UploadProgress, type UploadProgressLabels, type UploadProgressProps, type UploadStatus, type UseOverlayOptions, type VideoCaptions, type VideoChapter, VideoPlayer, type VideoPlayerLabels, type VideoPlayerProps, VisuallyHidden, type VisuallyHiddenProps, cx, useFieldContext, useOverlay, usePresence, useRovingGroup, useToast };

package/dist/index.js

@@ -1092,20 +1092,47 @@ function ProgressBar({
   );
 }
 
+// src/internal/forkRef.ts
+function forkRef(own, given) {
+  return (node) => {
+    own.current = node;
+    if (typeof given === "function") given(node);
+    else if (given != null) given.current = node;
+  };
+}
+
 // mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Input/Input.module.css?mds-scoped
-var Input_module_default = { "input": "mds-Input__input", "size-sm": "mds-Input__size-sm", "size-md": "mds-Input__size-md", "size-lg": "mds-Input__size-lg", "iconWrap": "mds-Input__iconWrap", "icon": "mds-Input__icon", "iconLeft": "mds-Input__iconLeft", "iconRight": "mds-Input__iconRight", "with-icon-left": "mds-Input__with-icon-left", "with-icon-right": "mds-Input__with-icon-right" };
+var Input_module_default = { "input": "mds-Input__input", "own-clear": "mds-Input__own-clear", "size-sm": "mds-Input__size-sm", "size-md": "mds-Input__size-md", "size-lg": "mds-Input__size-lg", "iconWrap": "mds-Input__iconWrap", "icon": "mds-Input__icon", "slot-sm": "mds-Input__slot-sm", "slot-md": "mds-Input__slot-md", "slot-lg": "mds-Input__slot-lg", "iconLeft": "mds-Input__iconLeft", "iconRight": "mds-Input__iconRight", "with-icon-left": "mds-Input__with-icon-left", "with-icon-right": "mds-Input__with-icon-right", "clear": "mds-Input__clear mds-hit-area__hitArea", "clearGlyph": "mds-Input__clearGlyph" };
 function Input({
   size = "md",
   invalid,
   iconLeft,
   iconRight,
+  onClear,
+  clearLabel,
   className,
+  ref,
   ...rest
 }) {
   const field = useFieldContext();
+  const own = useRef(null);
+  const [typedInto, setTypedInto] = useState(() => String(rest.defaultValue ?? "") !== "");
+  const hasText = rest.value !== void 0 ? String(rest.value) !== "" : typedInto;
+  const showClear = onClear != null && hasText;
+  const handleChange = (event) => {
+    if (onClear != null) setTypedInto(event.target.value !== "");
+    rest.onChange?.(event);
+  };
+  const clear = () => {
+    if (rest.value === void 0 && own.current != null) own.current.value = "";
+    setTypedInto(false);
+    own.current?.focus();
+    onClear?.();
+  };
   const input = /* @__PURE__ */ jsx(
     "input",
     {
+      ref: forkRef(own, ref),
       id: rest.id ?? field?.id,
       "aria-describedby": rest["aria-describedby"] ?? field?.describedBy,
       "aria-invalid": rest["aria-invalid"] ?? ((invalid ?? field?.invalid) || void 0),
@@ -1113,17 +1140,20 @@ function Input({
         Input_module_default.input,
         Input_module_default[`size-${size}`],
         iconLeft != null && Input_module_default["with-icon-left"],
-        iconRight != null && Input_module_default["with-icon-right"],
+        (iconRight != null || showClear) && Input_module_default["with-icon-right"],
+        onClear != null && Input_module_default["own-clear"],
         className
       ),
-      ...rest
+      ...rest,
+      onChange: handleChange
     }
   );
-  if (iconLeft == null && iconRight == null) return input;
-  return /* @__PURE__ */ jsxs("span", { className: Input_module_default.iconWrap, children: [
+  if (iconLeft == null && iconRight == null && onClear == null) return input;
+  return /* @__PURE__ */ jsxs("span", { className: cx(Input_module_default.iconWrap, Input_module_default[`slot-${size}`]), children: [
     input,
     iconLeft != null && /* @__PURE__ */ jsx("span", { className: cx(Input_module_default.icon, Input_module_default.iconLeft), "aria-hidden": "true", children: iconLeft }),
-    iconRight != null && /* @__PURE__ */ jsx("span", { className: cx(Input_module_default.icon, Input_module_default.iconRight), "aria-hidden": "true", children: iconRight })
+    iconRight != null && /* @__PURE__ */ jsx("span", { className: cx(Input_module_default.icon, Input_module_default.iconRight), "aria-hidden": "true", children: iconRight }),
+    showClear && /* @__PURE__ */ jsx("button", { type: "button", "aria-label": clearLabel, className: Input_module_default.clear, onClick: clear, children: /* @__PURE__ */ jsx(CloseGlyph, { className: Input_module_default.clearGlyph }) })
   ] });
 }
 
@@ -1195,15 +1225,6 @@ function Textarea({ rows = 3, showCount = false, className, ...rest }) {
   ] });
 }
 
-// src/internal/forkRef.ts
-function forkRef(own, given) {
-  return (node) => {
-    own.current = node;
-    if (typeof given === "function") given(node);
-    else if (given != null) given.current = node;
-  };
-}
-
 // mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Checkbox/Checkbox.module.css?mds-scoped
 var Checkbox_module_default = { "root": "mds-Checkbox__root", "box": "mds-Checkbox__box mds-hit-area__hitArea", "bare": "mds-Checkbox__bare", "label": "mds-Checkbox__label" };
 function Checkbox({
@@ -1316,51 +1337,6 @@ function SegmentedControl({
   );
 }
 
-// mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/SearchField/SearchField.module.css?mds-scoped
-var SearchField_module_default = { "wrap": "mds-SearchField__wrap", "glass": "mds-SearchField__glass", "input": "mds-SearchField__input", "clear": "mds-SearchField__clear mds-hit-area__hitArea", "clearGlyph": "mds-SearchField__clearGlyph" };
-function SearchField({
-  label,
-  clearLabel,
-  value,
-  onChange,
-  className,
-  ...rest
-}) {
-  return /* @__PURE__ */ jsxs("span", { className: cx(SearchField_module_default.wrap, className), children: [
-    /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", className: SearchField_module_default.glass, children: /* @__PURE__ */ jsx(
-      "path",
-      {
-        d: "M7 12a5 5 0 1 1 0-10 5 5 0 0 1 0 10Zm7 2-3.5-3.5",
-        fill: "none",
-        stroke: "currentColor",
-        strokeWidth: "1.5",
-        strokeLinecap: "round"
-      }
-    ) }),
-    /* @__PURE__ */ jsx(
-      "input",
-      {
-        type: "search",
-        "aria-label": label,
-        value,
-        onChange: (event) => onChange(event.target.value),
-        className: SearchField_module_default.input,
-        ...rest
-      }
-    ),
-    value !== "" && /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        "aria-label": clearLabel,
-        className: SearchField_module_default.clear,
-        onClick: () => onChange(""),
-        children: /* @__PURE__ */ jsx(CloseGlyph, { className: SearchField_module_default.clearGlyph })
-      }
-    )
-  ] });
-}
-
 // mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Scroller/Scroller.module.css?mds-scoped
 var Scroller_module_default = { "scroller": "mds-Scroller__scroller", "header": "mds-Scroller__header", "trailing": "mds-Scroller__trailing", "track": "mds-Scroller__track", "arrows": "mds-Scroller__arrows" };
 var STEP = 0.8;
@@ -2830,6 +2806,6 @@ function useRovingGroup(ref, { selector, orientation = "horizontal" }) {
   );
 }
 
-export { AppBar, Avatar, AvatarGroup, Badge, Breadcrumb, Button, Card, CardBody, CardFooter, CardHeader, Checkbox, Chip, ChipBar, ChipGroup, ConfirmDialog, Container, CountButton, DataTable, DateTimePicker, Divider, EmptyState, Field, FileDrop, Heading, Icon, IconProvider, ImageCarousel, Inline, Input, Lightbox, Link, ListGroup, ListItem, MediaPlaceholder, Modal, ModalBody, ModalFooter, ModalHeader, OverlayHistoryContext, PasswordInput, ProgressBar, Radio, Screen, ScreenContent, Scroller, SearchField, SegmentedControl, Select, Sheet, SheetBody, SheetFooter, SheetHeader, SideNav, SideNavGroup, SideNavItem, Skeleton, Spinner, Stack, Switch, Tab, TabBar, TabBarAction, TabBarItem, TabList, TabPanel, Tabs, Tag, Text, Textarea, ToastProvider, UploadProgress, VideoPlayer, VisuallyHidden, cx, useFieldContext, useOverlay, usePresence, useRovingGroup, useToast };
+export { AppBar, Avatar, AvatarGroup, Badge, Breadcrumb, Button, Card, CardBody, CardFooter, CardHeader, Checkbox, Chip, ChipBar, ChipGroup, ConfirmDialog, Container, CountButton, DataTable, DateTimePicker, Divider, EmptyState, Field, FileDrop, Heading, Icon, IconProvider, ImageCarousel, Inline, Input, Lightbox, Link, ListGroup, ListItem, MediaPlaceholder, Modal, ModalBody, ModalFooter, ModalHeader, OverlayHistoryContext, PasswordInput, ProgressBar, Radio, Screen, ScreenContent, Scroller, SegmentedControl, Select, Sheet, SheetBody, SheetFooter, SheetHeader, SideNav, SideNavGroup, SideNavItem, Skeleton, Spinner, Stack, Switch, Tab, TabBar, TabBarAction, TabBarItem, TabList, TabPanel, Tabs, Tag, Text, Textarea, ToastProvider, UploadProgress, VideoPlayer, VisuallyHidden, cx, useFieldContext, useOverlay, usePresence, useRovingGroup, useToast };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map