@shopify/ui-extensions 2025.10.0-rc.4 → 2025.10.0-rc.40

package/src/surfaces/admin/components/ColorPicker.d.ts

@@ -0,0 +1,132 @@
+/** VERSION: 1.19.0 **/
+/* eslint-disable import/extensions */
+
+/* eslint-disable @typescript-eslint/no-namespace */
+/* eslint-disable @typescript-eslint/member-ordering */
+
+// eslint-disable-next-line @typescript-eslint/triple-slash-reference, spaced-comment
+/// <reference lib="DOM" />
+import type {ColorPickerProps$1, ComponentChild} from './shared.d.ts';
+
+export interface ColorPickerProps
+  extends Required<
+    Pick<ColorPickerProps$1, 'id' | 'alpha' | 'value' | 'defaultValue' | 'name'>
+  > {}
+
+export type CallbackEvent<T extends keyof HTMLElementTagNameMap> = Event & {
+  currentTarget: HTMLElementTagNameMap[T];
+};
+export type CallbackEventListener<T extends keyof HTMLElementTagNameMap> =
+  | (EventListener & {
+      (event: CallbackEvent<T>): void;
+    })
+  | null;
+
+export type Styles = string;
+export type RenderImpl = Omit<ShadowRootInit, 'mode'> & {
+  ShadowRoot: (element: any) => ComponentChild;
+  styles?: Styles;
+};
+export interface ActivationEventEsque {
+  shiftKey: boolean;
+  metaKey: boolean;
+  ctrlKey: boolean;
+  button: number;
+}
+export interface ClickOptions {
+  /**
+   * The event you want to influence the synthetic click.
+   */
+  sourceEvent?: ActivationEventEsque;
+}
+/**
+ * Base class for creating custom elements with Preact.
+ * While this class could be used in both Node and the browser, the constructor will only be used in the browser.
+ * So we give it a type of HTMLElement to avoid typing issues later where it's used, which will only happen in the browser.
+ */
+declare const BaseClass$1: typeof globalThis.HTMLElement;
+declare abstract class PreactCustomElement extends BaseClass$1 {
+  /** @private */
+  static get observedAttributes(): string[];
+  constructor({
+    styles,
+    ShadowRoot: renderFunction,
+    delegatesFocus,
+    ...options
+  }: RenderImpl);
+
+  /** @private */
+  setAttribute(name: string, value: string): void;
+  /** @private */
+  attributeChangedCallback(name: string): void;
+  /** @private */
+  connectedCallback(): void;
+  /** @private */
+  disconnectedCallback(): void;
+  /** @private */
+  adoptedCallback(): void;
+  /**
+   * Queue a run of the render function.
+   * You shouldn't need to call this manually - it should be handled by changes to @property values.
+   * @private
+   */
+  queueRender(): void;
+  /**
+   * Like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.
+   *
+   * For example, if the `sourceEvent` was a middle click, or has particular keys held down,
+   * components will attempt to produce the desired behavior on links, such as opening the page in the background tab.
+   * @private
+   * @param options
+   */
+  click({sourceEvent}?: ClickOptions): void;
+}
+
+declare const internals: unique symbol;
+declare class BaseClass extends PreactCustomElement {
+  static formAssociated: boolean;
+  constructor(renderImpl: RenderImpl);
+  /** @private */
+  [internals]: ElementInternals;
+}
+declare class ColorPicker extends BaseClass implements ColorPickerProps {
+  accessor alpha: boolean;
+  accessor onchange: CallbackEventListener<typeof tagName> | null;
+  accessor oninput: CallbackEventListener<typeof tagName> | null;
+  accessor name: string;
+  accessor defaultValue: string;
+  get value(): string;
+  set value(value: string);
+  formResetCallback(): void;
+  constructor();
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    [tagName]: ColorPicker;
+  }
+}
+declare module 'preact' {
+  namespace createElement.JSX {
+    interface IntrinsicElements {
+      [tagName]: Omit<
+        HTMLAttributes<HTMLElement>,
+        Extract<keyof HTMLAttributes<HTMLElement>, `on${Capitalize<string>}`>
+      > &
+        ColorPickerJSXProps;
+    }
+  }
+}
+
+declare const tagName = 's-color-picker';
+export interface ColorPickerJSXProps
+  extends Partial<ColorPickerProps>,
+    Pick<
+      ColorPickerProps$1,
+      'id' | 'alpha' | 'value' | 'defaultValue' | 'name'
+    > {
+  onInput?: (event: CallbackEvent<typeof tagName>) => void | null;
+  onChange?: (event: CallbackEvent<typeof tagName>) => void | null;
+}
+
+export {ColorPicker};
+export type {ColorPickerJSXProps};

package/src/surfaces/admin/components/DateField/examples/default.html

@@ -0,0 +1 @@
+<s-date-field defaultView="2025-09" defaultValue="2025-09-01"></s-date-field>

package/src/surfaces/admin/components/DateField.d.ts

@@ -0,0 +1,246 @@
+/** VERSION: 1.19.0 **/
+/* eslint-disable import/extensions */
+
+/* eslint-disable @typescript-eslint/no-namespace */
+/* eslint-disable @typescript-eslint/member-ordering */
+
+// eslint-disable-next-line @typescript-eslint/triple-slash-reference, spaced-comment
+/// <reference lib="DOM" />
+import type {
+  TextFieldProps,
+  DateAutocompleteField,
+  DateFieldProps$1,
+  ComponentChild,
+} from './shared.d.ts';
+
+export type Styles = string;
+export type RenderImpl = Omit<ShadowRootInit, 'mode'> & {
+  ShadowRoot: (element: any) => ComponentChild;
+  styles?: Styles;
+};
+export interface ActivationEventEsque {
+  shiftKey: boolean;
+  metaKey: boolean;
+  ctrlKey: boolean;
+  button: number;
+}
+export interface ClickOptions {
+  /**
+   * The event you want to influence the synthetic click.
+   */
+  sourceEvent?: ActivationEventEsque;
+}
+/**
+ * Base class for creating custom elements with Preact.
+ * While this class could be used in both Node and the browser, the constructor will only be used in the browser.
+ * So we give it a type of HTMLElement to avoid typing issues later where it's used, which will only happen in the browser.
+ */
+declare const BaseClass: typeof globalThis.HTMLElement;
+declare abstract class PreactCustomElement extends BaseClass {
+  /** @private */
+  static get observedAttributes(): string[];
+  constructor({
+    styles,
+    ShadowRoot: renderFunction,
+    delegatesFocus,
+    ...options
+  }: RenderImpl);
+
+  /** @private */
+  setAttribute(name: string, value: string): void;
+  /** @private */
+  attributeChangedCallback(name: string): void;
+  /** @private */
+  connectedCallback(): void;
+  /** @private */
+  disconnectedCallback(): void;
+  /** @private */
+  adoptedCallback(): void;
+  /**
+   * Queue a run of the render function.
+   * You shouldn't need to call this manually - it should be handled by changes to @property values.
+   * @private
+   */
+  queueRender(): void;
+  /**
+   * Like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.
+   *
+   * For example, if the `sourceEvent` was a middle click, or has particular keys held down,
+   * components will attempt to produce the desired behavior on links, such as opening the page in the background tab.
+   * @private
+   * @param options
+   */
+  click({sourceEvent}?: ClickOptions): void;
+}
+
+export type CallbackEvent<T extends keyof HTMLElementTagNameMap> = Event & {
+  currentTarget: HTMLElementTagNameMap[T];
+};
+export type CallbackEventListener<T extends keyof HTMLElementTagNameMap> =
+  | (EventListener & {
+      (event: CallbackEvent<T>): void;
+    })
+  | null;
+
+declare const internals: unique symbol;
+export type PreactInputProps = Required<
+  Pick<TextFieldProps, 'disabled' | 'id' | 'name' | 'value'>
+>;
+declare class PreactInputElement
+  extends PreactCustomElement
+  implements PreactInputProps
+{
+  static formAssociated: boolean;
+  /** @private */
+  [internals]: ElementInternals;
+  accessor onchange: CallbackEventListener<'input'>;
+  accessor oninput: CallbackEventListener<'input'>;
+  accessor disabled: PreactInputProps['disabled'];
+  accessor id: PreactInputProps['id'];
+  accessor name: PreactInputProps['name'];
+  get value(): PreactInputProps['value'];
+  set value(value: PreactInputProps['value']);
+  constructor(renderImpl: RenderImpl);
+}
+
+export type PreactFieldProps<Autocomplete extends string = string> =
+  PreactInputProps &
+    Required<
+      Pick<
+        TextFieldProps,
+        | 'defaultValue'
+        | 'details'
+        | 'error'
+        | 'label'
+        | 'labelAccessibilityVisibility'
+        | 'placeholder'
+        | 'readOnly'
+        | 'required'
+      >
+    > & {
+      /**
+       * A hint as to the intended content of the field.
+       *
+       * When set to `on` (the default), this property indicates that the field should support
+       * autofill, but you do not have any more semantic information on the intended
+       * contents.
+       *
+       * When set to `off`, you are indicating that this field contains sensitive
+       * information, or contents that are never saved, like one-time codes.
+       *
+       * Alternatively, you can provide value which describes the
+       * specific data you would like to be entered into this field during autofill.
+       *
+       * @see Learn more about the set of {@link https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens|autocomplete values} supported in browsers.
+       *
+       * @default 'tel' for PhoneField
+       * @default 'email' for EmailField
+       * @default 'url' for URLField
+       * @default 'on' for everything else
+       */
+      autocomplete: Autocomplete;
+    };
+declare class PreactFieldElement<Autocomplete extends string = string>
+  extends PreactInputElement
+  implements PreactFieldProps<Autocomplete>
+{
+  accessor onblur: CallbackEventListener<'input'>;
+  accessor onfocus: CallbackEventListener<'input'>;
+  accessor autocomplete: PreactFieldProps<Autocomplete>['autocomplete'];
+  accessor defaultValue: PreactFieldProps['defaultValue'];
+  accessor details: PreactFieldProps['details'];
+  accessor error: PreactFieldProps['error'];
+  accessor label: PreactFieldProps['label'];
+  accessor labelAccessibilityVisibility: PreactFieldProps['labelAccessibilityVisibility'];
+  accessor placeholder: PreactFieldProps['placeholder'];
+  accessor readOnly: PreactFieldProps['readOnly'];
+  accessor required: PreactFieldProps['required'];
+  /**
+   * Global keyboard event handlers for things like key bindings typically
+   * ignore keystrokes originating from within input elements. Unfortunately,
+   * these never account for a Custom Element being the input element.
+   *
+   * To fix this, we spoof getAttribute & hasAttribute to make a PreactFieldElement
+   * appear as a contentEditable "input" when it contains a focused input element.
+   * @private technically not private, but we don't want to expose this as public API
+   */
+  getAttribute(qualifiedName: string): string | null;
+  /**
+   * @private technically not private, but we don't want to expose this as public API
+   */
+  hasAttribute(qualifiedName: string): boolean;
+  /**
+   * Checks if the shadow tree contains a focused input (input, textarea, select, <x contentEditable>).
+   * Note: this does _not_ return true for focussed non-field form elements like buttons.
+   * @private
+   */
+  get isContentEditable(): boolean;
+  /** @private */
+  formResetCallback(): void;
+  /** @private */
+  connectedCallback(): void;
+  constructor(renderImpl: RenderImpl);
+}
+
+export interface DateFieldProps
+  extends PreactFieldProps<DateAutocompleteField>,
+    Required<
+      Pick<
+        DateFieldProps$1,
+        | 'allow'
+        | 'allowDays'
+        | 'disallow'
+        | 'disallowDays'
+        | 'value'
+        | 'defaultValue'
+        | 'view'
+        | 'defaultView'
+      >
+    > {}
+
+declare class DateField
+  extends PreactFieldElement<DateFieldProps['autocomplete']>
+  implements DateFieldProps
+{
+  accessor allow: DateFieldProps['allow'];
+  accessor disallow: DateFieldProps['disallow'];
+  accessor allowDays: DateFieldProps['allowDays'];
+  accessor disallowDays: DateFieldProps['disallowDays'];
+  set view(view: string);
+  get view(): string;
+  accessor defaultView: DateFieldProps['defaultView'];
+  accessor onviewchange: CallbackEventListener<typeof tagName> | null;
+  accessor oninvalid: CallbackEventListener<typeof tagName> | null;
+  constructor();
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    [tagName]: DateField;
+  }
+}
+declare module 'preact' {
+  namespace createElement.JSX {
+    interface IntrinsicElements {
+      [tagName]: Omit<
+        HTMLAttributes<HTMLElement>,
+        Extract<keyof HTMLAttributes<HTMLElement>, `on${Capitalize<string>}`>
+      > &
+        DateFieldJSXProps;
+    }
+  }
+}
+
+declare const tagName = 's-date-field';
+export interface DateFieldJSXProps
+  extends Partial<DateFieldProps>,
+    Pick<DateFieldProps$1, 'id'> {
+  onBlur?: ((event: CallbackEvent<typeof tagName>) => void) | null;
+  onChange?: ((event: CallbackEvent<typeof tagName>) => void) | null;
+  onFocus?: ((event: CallbackEvent<typeof tagName>) => void) | null;
+  onInput?: ((event: CallbackEvent<typeof tagName>) => void) | null;
+  onInvalid?: ((event: CallbackEvent<typeof tagName>) => void) | null;
+  onViewChange?: ((event: CallbackEvent<typeof tagName>) => void) | null;
+}
+
+export {DateField};
+export type {DateFieldJSXProps};

package/src/surfaces/admin/components/DatePicker.d.ts

@@ -1,4 +1,4 @@
-/** VERSION: 1.0.0 **/
+/** VERSION: 1.19.0 **/
 /* eslint-disable import/extensions */
 
 /* eslint-disable @typescript-eslint/no-namespace */
@@ -23,23 +23,26 @@ export interface DatePickerProps
       | 'name'
     >
   > {
-  type: Extract<DatePickerProps$1['type'], 'single' | 'multiple' | 'range'>;
+  type: Extract<DatePickerProps$1['type'], 'single' | 'range'>;
 }
 
-export type CallbackEvent<
-  TTagName extends keyof HTMLElementTagNameMap,
-  TEvent extends Event = Event,
-> = TEvent & {
-  currentTarget: HTMLElementTagNameMap[TTagName];
+export type CallbackEvent<T extends keyof HTMLElementTagNameMap> = Event & {
+  currentTarget: HTMLElementTagNameMap[T];
 };
-export type CallbackEventListener<
-  TTagName extends keyof HTMLElementTagNameMap,
-  TEvent extends Event = Event,
-> =
+export type CallbackEventListener<T extends keyof HTMLElementTagNameMap> =
   | (EventListener & {
-      (event: CallbackEvent<TTagName, TEvent>): void;
+      (event: CallbackEvent<T>): void;
     })
   | null;
+/** Used when an element does not have children. */
+export interface PreactBaseElementProps<TClass extends HTMLElement> {
+  /** Assigns a unique key to this element. */
+  key?: preact.Key;
+  /** Assigns a ref (generally from `useRef()`) to this element. */
+  ref?: preact.Ref<TClass>;
+  /** Assigns this element to a parent's slot. */
+  slot?: Lowercase<string>;
+}
 
 export type Styles = string;
 export type RenderImpl = Omit<ShadowRootInit, 'mode'> & {
@@ -101,12 +104,6 @@ declare abstract class PreactCustomElement extends BaseClass$1 {
   click({sourceEvent}?: ClickOptions): void;
 }
 
-declare class ViewChangeEvent extends Event {
-  /** The new month to display in `YYYY-MM` format. */
-  view: string;
-  constructor(view: string);
-}
-
 declare const internals: unique symbol;
 declare const dirtyStateSymbol: unique symbol;
 declare class BaseClass extends PreactCustomElement {
@@ -132,11 +129,7 @@ declare class DatePicker extends BaseClass implements DatePickerProps {
   [dirtyStateSymbol]: boolean;
   /** @private */
   formResetCallback(): void;
-  accessor onviewchange: CallbackEventListener<
-    typeof tagName,
-    HTMLElementEventMap['viewchange']
-  > | null;
-
+  accessor onviewchange: CallbackEventListener<typeof tagName> | null;
   accessor onfocus: CallbackEventListener<typeof tagName> | null;
   accessor onblur: CallbackEventListener<typeof tagName> | null;
   accessor oninput: CallbackEventListener<typeof tagName> | null;
@@ -147,17 +140,11 @@ declare global {
   interface HTMLElementTagNameMap {
     [tagName]: DatePicker;
   }
-  interface HTMLElementEventMap {
-    viewchange: ViewChangeEvent;
-  }
 }
 declare module 'preact' {
-  interface BaseProps {
-    slot?: Lowercase<string>;
-  }
   namespace createElement.JSX {
     interface IntrinsicElements {
-      [tagName]: DatePickerJSXProps & BaseProps;
+      [tagName]: DatePickerJSXProps & PreactBaseElementProps<DatePicker>;
     }
   }
 }
@@ -166,11 +153,7 @@ declare const tagName = 's-date-picker';
 export interface DatePickerJSXProps
   extends Partial<DatePickerProps>,
     Pick<DatePickerProps$1, 'id'> {
-  onViewChange?:
-    | ((
-        event: CallbackEvent<typeof tagName, HTMLElementEventMap['viewchange']>,
-      ) => void)
-    | null;
+  onViewChange?: ((event: CallbackEvent<typeof tagName>) => void) | null;
   onFocus?: ((event: CallbackEvent<typeof tagName>) => void) | null;
   onBlur?: ((event: CallbackEvent<typeof tagName>) => void) | null;
   onInput?: ((event: CallbackEvent<typeof tagName>) => void) | null;

package/src/surfaces/admin/components/Divider.d.ts

@@ -1,4 +1,4 @@
-/** VERSION: 1.0.0 **/
+/** VERSION: 1.19.0 **/
 /* eslint-disable import/extensions */
 
 /* eslint-disable @typescript-eslint/no-namespace */
@@ -74,6 +74,16 @@ declare abstract class PreactCustomElement extends BaseClass {
   click({sourceEvent}?: ClickOptions): void;
 }
 
+/** Used when an element does not have children. */
+export interface PreactBaseElementProps<TClass extends HTMLElement> {
+  /** Assigns a unique key to this element. */
+  key?: preact.Key;
+  /** Assigns a ref (generally from `useRef()`) to this element. */
+  ref?: preact.Ref<TClass>;
+  /** Assigns this element to a parent's slot. */
+  slot?: Lowercase<string>;
+}
+
 declare class Divider extends PreactCustomElement implements DividerProps {
   accessor direction: DividerProps['direction'];
   accessor color: DividerProps['color'];
@@ -85,12 +95,9 @@ declare global {
   }
 }
 declare module 'preact' {
-  interface BaseProps {
-    slot?: Lowercase<string>;
-  }
   namespace createElement.JSX {
     interface IntrinsicElements {
-      [tagName]: DividerJSXProps & BaseProps;
+      [tagName]: DividerJSXProps & PreactBaseElementProps<Divider>;
     }
   }
 }

package/src/surfaces/admin/components/DropZone/examples/default.html

@@ -0,0 +1,9 @@
+<s-drop-zone
+  label="Upload"
+  accessibilityLabel="Upload image of type jpg, png, or gif"
+  accept=".jpg,.png,.gif"
+  multiple
+  onInput="console.log('onInput', event.currentTarget?.value)"
+  onChange="console.log('onChange', event.currentTarget?.value)"
+  onDropRejected="console.log('onDropRejected', event.currentTarget?.value)"
+></s-drop-zone>

package/src/surfaces/admin/components/DropZone.d.ts

@@ -0,0 +1,160 @@
+/** VERSION: 1.19.0 **/
+/* eslint-disable import/extensions */
+
+/* eslint-disable @typescript-eslint/no-namespace */
+/* eslint-disable @typescript-eslint/member-ordering */
+
+// eslint-disable-next-line @typescript-eslint/triple-slash-reference, spaced-comment
+/// <reference lib="DOM" />
+import type {DropZoneProps$1, ComponentChild} from './shared.d.ts';
+
+export type CallbackEvent<T extends keyof HTMLElementTagNameMap> = Event & {
+  currentTarget: HTMLElementTagNameMap[T];
+};
+export type CallbackEventListener<T extends keyof HTMLElementTagNameMap> =
+  | (EventListener & {
+      (event: CallbackEvent<T>): void;
+    })
+  | null;
+
+export interface DropZoneProps
+  extends Required<
+    Pick<
+      DropZoneProps$1,
+      | 'accept'
+      | 'accessibilityLabel'
+      | 'disabled'
+      | 'files'
+      | 'name'
+      | 'error'
+      | 'label'
+      | 'labelAccessibilityVisibility'
+      | 'multiple'
+      | 'required'
+      | 'value'
+    >
+  > {}
+
+export type Styles = string;
+export type RenderImpl = Omit<ShadowRootInit, 'mode'> & {
+  ShadowRoot: (element: any) => ComponentChild;
+  styles?: Styles;
+};
+export interface ActivationEventEsque {
+  shiftKey: boolean;
+  metaKey: boolean;
+  ctrlKey: boolean;
+  button: number;
+}
+export interface ClickOptions {
+  /**
+   * The event you want to influence the synthetic click.
+   */
+  sourceEvent?: ActivationEventEsque;
+}
+/**
+ * Base class for creating custom elements with Preact.
+ * While this class could be used in both Node and the browser, the constructor will only be used in the browser.
+ * So we give it a type of HTMLElement to avoid typing issues later where it's used, which will only happen in the browser.
+ */
+declare const BaseClass$1: typeof globalThis.HTMLElement;
+declare abstract class PreactCustomElement extends BaseClass$1 {
+  /** @private */
+  static get observedAttributes(): string[];
+  constructor({
+    styles,
+    ShadowRoot: renderFunction,
+    delegatesFocus,
+    ...options
+  }: RenderImpl);
+
+  /** @private */
+  setAttribute(name: string, value: string): void;
+  /** @private */
+  attributeChangedCallback(name: string): void;
+  /** @private */
+  connectedCallback(): void;
+  /** @private */
+  disconnectedCallback(): void;
+  /** @private */
+  adoptedCallback(): void;
+  /**
+   * Queue a run of the render function.
+   * You shouldn't need to call this manually - it should be handled by changes to @property values.
+   * @private
+   */
+  queueRender(): void;
+  /**
+   * Like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.
+   *
+   * For example, if the `sourceEvent` was a middle click, or has particular keys held down,
+   * components will attempt to produce the desired behavior on links, such as opening the page in the background tab.
+   * @private
+   * @param options
+   */
+  click({sourceEvent}?: ClickOptions): void;
+}
+
+declare const setFiles: unique symbol;
+
+declare const internals: unique symbol;
+declare const getFileInput: unique symbol;
+declare class BaseClass extends PreactCustomElement {
+  static formAssociated: boolean;
+  constructor(renderImpl: RenderImpl);
+  /** @private */
+  [internals]: ElementInternals;
+}
+declare class DropZone extends BaseClass implements DropZoneProps {
+  accessor accept: DropZoneProps['accept'];
+  accessor accessibilityLabel: DropZoneProps['accessibilityLabel'];
+  accessor disabled: DropZoneProps['disabled'];
+  accessor error: DropZoneProps['error'];
+  accessor label: DropZoneProps['label'];
+  accessor labelAccessibilityVisibility: DropZoneProps['labelAccessibilityVisibility'];
+  accessor multiple: DropZoneProps['multiple'];
+  accessor name: DropZoneProps['name'];
+  accessor required: DropZoneProps['required'];
+  accessor onchange: CallbackEventListener<typeof tagName>;
+  accessor oninput: CallbackEventListener<typeof tagName>;
+  accessor ondroprejected: CallbackEventListener<typeof tagName>;
+  get value(): string;
+  set value(value: string);
+  get files(): File[];
+  set files(files: File[]);
+  /** @private */
+  [setFiles](files: File[]): void;
+  /** @private */
+  [getFileInput](): HTMLInputElement | null;
+  /** @private */
+  formResetCallback(): void;
+  constructor();
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    [tagName]: DropZone;
+  }
+}
+declare module 'preact' {
+  namespace createElement.JSX {
+    interface IntrinsicElements {
+      [tagName]: Omit<
+        HTMLAttributes<HTMLElement>,
+        Extract<keyof HTMLAttributes<HTMLElement>, `on${Capitalize<string>}`>
+      > &
+        DropZoneJSXProps;
+    }
+  }
+}
+
+declare const tagName = 's-drop-zone';
+export interface DropZoneJSXProps
+  extends Partial<DropZoneProps>,
+    Pick<DropZoneProps$1, 'id'> {
+  onChange?: ((event: CallbackEvent<typeof tagName>) => void) | null;
+  onInput?: ((event: CallbackEvent<typeof tagName>) => void) | null;
+  onDropRejected?: ((event: CallbackEvent<typeof tagName>) => void) | null;
+}
+
+export {DropZone};
+export type {DropZoneJSXProps};