@flytedan/flytebot-design-system 0.29.0 → 0.31.0

package/dist/index.d.cts

@@ -692,10 +692,11 @@ interface BannerProps {
     title: React.ReactNode;
     detail?: React.ReactNode;
     actions?: React.ReactNode;
-    /** MP-243 Q3: a Banner reporting a failure (danger) or something invalid the user must
-     *  fix (warn) is a live-region announcement, not decoration — `role="alert"` for those
-     *  interrupts and announces immediately, `role="status"` for info/ok announces politely
-     *  once idle. Defaults by tone; a caller can still override either way. */
+    /** A Banner reporting a failure (danger) is a live-region announcement that interrupts
+     *  and announces immediately (`role="alert"`); every other tone — warn, info, ok —
+     *  announces politely once idle (`role="status"`), since a static warning or advisory
+     *  banner isn't urgent enough to talk over whatever the user is doing. Defaults by
+     *  tone; a caller can still override either way. */
     role?: "alert" | "status";
 }
 declare function Banner({ tone, title, detail, actions, role }: BannerProps): React.JSX.Element;
@@ -1080,7 +1081,7 @@ interface FilterFieldSelect extends FilterFieldBase {
     type: "select";
     options: FilterFieldOption[];
 }
-/** MP-243: include/exclude, shared by every field whose value is a set of options. */
+/** Include/exclude, shared by every field whose value is a set of options. */
 type FilterOperator = "in" | "notIn";
 interface FilterMultiSelectValue {
     operator: FilterOperator;
@@ -1102,27 +1103,27 @@ interface FilterFieldMultiSelect extends FilterFieldBase {
     options?: FilterFieldOption[];
     /** Async option source for long lists (schools, imports, …), called ~300ms after the
      *  last keystroke with the current query (possibly "") and an AbortSignal that fires
-     *  once a newer query has superseded this call (MP-243 A6) — pass it straight to
-     *  `fetch`/whatever transport does the lookup so a superseded request is actually
-     *  cancelled, not just ignored on arrival. A rejection (that isn't the abort itself)
-     *  renders as a visible error with a Retry action; it is never folded into "no
-     *  matches", since a search that FAILED is a different thing to tell the user than a
-     *  search that found nothing. */
+     *  once a newer query has superseded this call — pass it straight to `fetch`/whatever
+     *  transport does the lookup so a superseded request is actually cancelled, not just
+     *  ignored on arrival. A rejection (that isn't the abort itself) renders as a visible
+     *  error with a Retry action; it is never folded into "no matches", since a search
+     *  that FAILED is a different thing to tell the user than a search that found
+     *  nothing. */
     loadOptions?: (query: string, signal: AbortSignal) => Promise<FilterFieldOption[]>;
-    /** MP-243 A1: paste-a-list as a second input mode for THIS SAME field — search and
-     *  paste both build one FilterMultiSelectValue for one dimension, so a school found by
-     *  typing and a school found by pasting a list land as two entries in the same set
-     *  instead of two separate filters that would AND together. Presence of `resolve` is
-     *  what turns on the Search/Paste mode switch; omit it for a search-only field. Never
-     *  called with an empty token list, and tokens are de-duplicated before the call. */
+    /** Paste-a-list as a second input mode for THIS SAME field — search and paste both
+     *  build one FilterMultiSelectValue for one dimension, so a school found by typing and
+     *  a school found by pasting a list land as two entries in the same set instead of two
+     *  separate filters that would AND together. Presence of `resolve` is what turns on
+     *  the Search/Paste mode switch; omit it for a search-only field. Never called with an
+     *  empty token list, and tokens are de-duplicated before the call. */
     resolve?: (tokens: string[]) => Promise<FilterResolveResult>;
     placeholder?: string;
     /** Placeholder for the paste textarea, when `resolve` is given. Falls back to `placeholder`. */
     pastePlaceholder?: string;
-    /** MP-243 A2: restrict which operators this field's toggle offers, e.g. `["in"]` for a
-     *  dimension that only ever means "is any of" and never "is none of" — a single-operator
-     *  list hides the toggle entirely and that operator applies unconditionally, so an app
-     *  can express an "any"/"is"-only dimension exactly rather than showing a switch with
+    /** Restrict which operators this field's toggle offers, e.g. `["in"]` for a dimension
+     *  that only ever means "is any of" and never "is none of" — a single-operator list
+     *  hides the toggle entirely and that operator applies unconditionally, so an app can
+     *  express an "any"/"is"-only dimension exactly rather than showing a switch with
      *  nothing to switch to. Defaults to both `["in", "notIn"]`. */
     operators?: FilterOperator[];
 }
@@ -1137,6 +1138,10 @@ interface FilterFieldRange extends FilterFieldBase {
     min?: number;
     max?: number;
     step?: number;
+    /** Requires whole numbers for both bounds. Off by default, the same opt-in NumberInput
+     *  itself takes — a range field with a whole-number step (e.g. 10) may still want
+     *  decimal bounds, so this is a deliberate choice, not inferred from `step`. */
+    integer?: boolean;
     minLabel?: string;
     maxLabel?: string;
     minPlaceholder?: string;
@@ -1153,16 +1158,24 @@ type FilterDateValue = {
 interface FilterFieldDate extends FilterFieldBase {
     type: "date";
     /** Default days shown the first time "within the last N days" is picked — shown, not
-     *  written: nothing is set until the user changes it or confirms it (MP-243 A4). */
+     *  written: nothing is set until the user changes it or confirms it. Must be a whole
+     *  number from 1 to `maxDays`; FilterBar throws a clear, field-naming error in
+     *  development if it isn't. */
     defaultDays?: number;
+    /** Upper bound enforced on the "within the last N days" input. Default 3650 (ten
+     *  years) — generous enough for any real "recent activity" window while still
+     *  guaranteeing a plausible, in-range value ever reaches `onFilterChange`. Must be a
+     *  whole number from 1 to 3650; FilterBar throws a clear, field-naming error in
+     *  development if it isn't. */
+    maxDays?: number;
 }
 /** A declared filter field. Add a variant here (and a branch below) for a new value
  *  picker. text/select keep their original bare-string value shape unchanged, so an
  *  existing consumer needs no migration; every other variant's value is a small typed
  *  object of its own (see FilterValue). */
 type FilterField = FilterFieldText | FilterFieldSelect | FilterFieldMultiSelect | FilterFieldRange | FilterFieldDate;
-/** MP-243 A7: the value shape a given declared field reads/writes, so a consumer can type
- *  its own `filters` record precisely instead of `Record<string, unknown>` — e.g.
+/** The value shape a given declared field reads/writes, so a consumer can type its own
+ *  `filters` record precisely instead of `Record<string, unknown>` — e.g.
  *  `Record<"schools", FilterValue<typeof schoolsField>>`. */
 type FilterValue<F extends FilterField> = F extends FilterFieldText ? string : F extends FilterFieldSelect ? string : F extends FilterFieldMultiSelect ? FilterMultiSelectValue : F extends FilterFieldRange ? FilterRangeValue : F extends FilterFieldDate ? FilterDateValue : never;
 interface FilterBarProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "onChange"> {
@@ -1175,7 +1188,7 @@ interface FilterBarProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "on
     /** Fires on every value edit. Maps 1:1 onto useServerTable's setFilter(id, value).
      *  FilterBar only ever calls this with a COMPLETE, valid value for the field — an
      *  emptied selection, a one-sided date range, an invalid numeric range or a cleared
-     *  bound go through onFilterRemove (or nothing) instead (MP-243 A3). */
+     *  bound go through onFilterRemove (or nothing) instead. */
     onFilterChange: (key: string, value: unknown) => void;
     /** Fires when a chip's × is clicked, or when an edit leaves a field with no valid
      *  value. Maps 1:1 onto useServerTable's clearFilter(id). */
@@ -1196,18 +1209,17 @@ interface FilterBarProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "on
  * (`panel`), the same way SortMenu holds `open` but never sort state itself.
  *
  * Every floating surface — a field's edit panel and the "add filter" menu — is a real
- * Popover (or Menu-in-a-Popover) from this kit's own actions module (MP-243 A5): viewport
- * clamping, nested-layer handling, Escape, and focus-return-to-the-chip all come from
- * there, so FilterBar itself runs no document-level dismissal listener of its own. Only
- * the text field's inline input manages its own dismissal (blur/Enter/Escape), since it
- * isn't a floating panel at all.
+ * Popover (or Menu-in-a-Popover) from this kit's own actions module: viewport clamping,
+ * nested-layer handling, Escape, and focus-return-to-the-chip all come from there, so
+ * FilterBar itself runs no document-level dismissal listener of its own. Only the text
+ * field's inline input manages its own dismissal (blur/Enter/Escape), since it isn't a
+ * floating panel at all.
  *
- * MP-243 adds three variants on top of the original text/select, for audiences too big or
- * too shaped for a single free-text box or a short dropdown: multiSelect (searchable, sync
- * or async, with an optional paste-a-list mode for the same value), range (numeric
- * min/max), and date ("within the last N days" or "between two dates"). text/select are
- * unchanged and keep their bare-string value shape, so an existing consumer needs no
- * migration.
+ * FilterBar supports five field kinds: text, select, multiSelect (searchable, sync or
+ * async, with an optional paste-a-list mode for the same value), range (numeric min/max),
+ * and date ("within the last N days" or "between two dates"). text and select keep a bare
+ * string value; multiSelect/range/date each read/write a small typed object of their own
+ * (see FilterValue).
  */
 declare function FilterBar({ fields, filters, onFilterChange, onFilterRemove, align, className, ...rest }: FilterBarProps): React.JSX.Element;
 
@@ -2188,7 +2200,10 @@ interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement
 }
 declare function Textarea({ label, help, error, required, rows, disabled, id, className, style, ...rest }: TextareaProps): React.JSX.Element;
 
-/** Numeric field with thousands formatting on blur, +/- steppers with hold-to-repeat acceleration, arrow keys (shift = bigStep), and min/max clamping. */
+/** Numeric field with thousands formatting on blur, +/- steppers with hold-to-repeat
+ *  acceleration and arrow keys (shift = bigStep) that snap to the step grid within
+ *  [min, max], and inline min/max/integer validation that keeps an invalid typed value
+ *  from ever reaching `onChange`. */
 interface NumberInputProps {
     label?: string;
     help?: string;
@@ -2210,6 +2225,12 @@ interface NumberInputProps {
     step?: number;
     /** Larger step used while holding the steppers or shift+arrows. */
     bigStep?: number;
+    /** Requires a whole number. Off by default — a field with a whole-number `step` (e.g.
+     *  cents in steps of 10) may still want decimal input, so this is a deliberate opt-in
+     *  rather than inferred from `step`. When set, typed text, blur, the steppers and arrow
+     *  keys all reject or snap away from a fractional value; a fractional value can never
+     *  reach `onChange`. */
+    integer?: boolean;
     /** Thousands-format the display when not editing. Default true. */
     format?: boolean;
     value?: number | string;
@@ -2218,11 +2239,17 @@ interface NumberInputProps {
      *  (e.g. FilterBar's range/date panels) tells an unset bound apart from a typed
      *  zero by this, not by testing for `0` itself. */
     onChange?: (e: any) => void;
+    /** Called with the field's current validity every time it changes — true once the
+     *  typed text is empty or a legal number, false while it is out of bounds, non-integer
+     *  (when `integer` is set), or otherwise unparseable. Lets a parent (e.g. a panel with
+     *  its own Done button) know a value is mid-edit-and-invalid even though nothing has
+     *  been (or ever will be) passed to `onChange` for it. */
+    onValidityChange?: (valid: boolean) => void;
     placeholder?: string;
     style?: any;
     className?: string;
 }
-declare function NumberInput({ label, help, error, prefix, suffix, required, disabled, min, max, step, bigStep, value, onChange, format, className, style, placeholder, id, "aria-label": ariaLabel }: NumberInputProps): React.JSX.Element;
+declare function NumberInput({ label, help, error, prefix, suffix, required, disabled, min, max, step, bigStep, integer, value, onChange, onValidityChange, format, className, style, placeholder, id, "aria-label": ariaLabel }: NumberInputProps): React.JSX.Element;
 
 /** Rich popover select: animated listbox, keyboard nav + type-ahead, search over 8 options, option icons, descriptions, meta and groups. API-compatible with the old native select. */
 interface SelectOption {

package/dist/index.d.ts

@@ -692,10 +692,11 @@ interface BannerProps {
     title: React.ReactNode;
     detail?: React.ReactNode;
     actions?: React.ReactNode;
-    /** MP-243 Q3: a Banner reporting a failure (danger) or something invalid the user must
-     *  fix (warn) is a live-region announcement, not decoration — `role="alert"` for those
-     *  interrupts and announces immediately, `role="status"` for info/ok announces politely
-     *  once idle. Defaults by tone; a caller can still override either way. */
+    /** A Banner reporting a failure (danger) is a live-region announcement that interrupts
+     *  and announces immediately (`role="alert"`); every other tone — warn, info, ok —
+     *  announces politely once idle (`role="status"`), since a static warning or advisory
+     *  banner isn't urgent enough to talk over whatever the user is doing. Defaults by
+     *  tone; a caller can still override either way. */
     role?: "alert" | "status";
 }
 declare function Banner({ tone, title, detail, actions, role }: BannerProps): React.JSX.Element;
@@ -1080,7 +1081,7 @@ interface FilterFieldSelect extends FilterFieldBase {
     type: "select";
     options: FilterFieldOption[];
 }
-/** MP-243: include/exclude, shared by every field whose value is a set of options. */
+/** Include/exclude, shared by every field whose value is a set of options. */
 type FilterOperator = "in" | "notIn";
 interface FilterMultiSelectValue {
     operator: FilterOperator;
@@ -1102,27 +1103,27 @@ interface FilterFieldMultiSelect extends FilterFieldBase {
     options?: FilterFieldOption[];
     /** Async option source for long lists (schools, imports, …), called ~300ms after the
      *  last keystroke with the current query (possibly "") and an AbortSignal that fires
-     *  once a newer query has superseded this call (MP-243 A6) — pass it straight to
-     *  `fetch`/whatever transport does the lookup so a superseded request is actually
-     *  cancelled, not just ignored on arrival. A rejection (that isn't the abort itself)
-     *  renders as a visible error with a Retry action; it is never folded into "no
-     *  matches", since a search that FAILED is a different thing to tell the user than a
-     *  search that found nothing. */
+     *  once a newer query has superseded this call — pass it straight to `fetch`/whatever
+     *  transport does the lookup so a superseded request is actually cancelled, not just
+     *  ignored on arrival. A rejection (that isn't the abort itself) renders as a visible
+     *  error with a Retry action; it is never folded into "no matches", since a search
+     *  that FAILED is a different thing to tell the user than a search that found
+     *  nothing. */
     loadOptions?: (query: string, signal: AbortSignal) => Promise<FilterFieldOption[]>;
-    /** MP-243 A1: paste-a-list as a second input mode for THIS SAME field — search and
-     *  paste both build one FilterMultiSelectValue for one dimension, so a school found by
-     *  typing and a school found by pasting a list land as two entries in the same set
-     *  instead of two separate filters that would AND together. Presence of `resolve` is
-     *  what turns on the Search/Paste mode switch; omit it for a search-only field. Never
-     *  called with an empty token list, and tokens are de-duplicated before the call. */
+    /** Paste-a-list as a second input mode for THIS SAME field — search and paste both
+     *  build one FilterMultiSelectValue for one dimension, so a school found by typing and
+     *  a school found by pasting a list land as two entries in the same set instead of two
+     *  separate filters that would AND together. Presence of `resolve` is what turns on
+     *  the Search/Paste mode switch; omit it for a search-only field. Never called with an
+     *  empty token list, and tokens are de-duplicated before the call. */
     resolve?: (tokens: string[]) => Promise<FilterResolveResult>;
     placeholder?: string;
     /** Placeholder for the paste textarea, when `resolve` is given. Falls back to `placeholder`. */
     pastePlaceholder?: string;
-    /** MP-243 A2: restrict which operators this field's toggle offers, e.g. `["in"]` for a
-     *  dimension that only ever means "is any of" and never "is none of" — a single-operator
-     *  list hides the toggle entirely and that operator applies unconditionally, so an app
-     *  can express an "any"/"is"-only dimension exactly rather than showing a switch with
+    /** Restrict which operators this field's toggle offers, e.g. `["in"]` for a dimension
+     *  that only ever means "is any of" and never "is none of" — a single-operator list
+     *  hides the toggle entirely and that operator applies unconditionally, so an app can
+     *  express an "any"/"is"-only dimension exactly rather than showing a switch with
      *  nothing to switch to. Defaults to both `["in", "notIn"]`. */
     operators?: FilterOperator[];
 }
@@ -1137,6 +1138,10 @@ interface FilterFieldRange extends FilterFieldBase {
     min?: number;
     max?: number;
     step?: number;
+    /** Requires whole numbers for both bounds. Off by default, the same opt-in NumberInput
+     *  itself takes — a range field with a whole-number step (e.g. 10) may still want
+     *  decimal bounds, so this is a deliberate choice, not inferred from `step`. */
+    integer?: boolean;
     minLabel?: string;
     maxLabel?: string;
     minPlaceholder?: string;
@@ -1153,16 +1158,24 @@ type FilterDateValue = {
 interface FilterFieldDate extends FilterFieldBase {
     type: "date";
     /** Default days shown the first time "within the last N days" is picked — shown, not
-     *  written: nothing is set until the user changes it or confirms it (MP-243 A4). */
+     *  written: nothing is set until the user changes it or confirms it. Must be a whole
+     *  number from 1 to `maxDays`; FilterBar throws a clear, field-naming error in
+     *  development if it isn't. */
     defaultDays?: number;
+    /** Upper bound enforced on the "within the last N days" input. Default 3650 (ten
+     *  years) — generous enough for any real "recent activity" window while still
+     *  guaranteeing a plausible, in-range value ever reaches `onFilterChange`. Must be a
+     *  whole number from 1 to 3650; FilterBar throws a clear, field-naming error in
+     *  development if it isn't. */
+    maxDays?: number;
 }
 /** A declared filter field. Add a variant here (and a branch below) for a new value
  *  picker. text/select keep their original bare-string value shape unchanged, so an
  *  existing consumer needs no migration; every other variant's value is a small typed
  *  object of its own (see FilterValue). */
 type FilterField = FilterFieldText | FilterFieldSelect | FilterFieldMultiSelect | FilterFieldRange | FilterFieldDate;
-/** MP-243 A7: the value shape a given declared field reads/writes, so a consumer can type
- *  its own `filters` record precisely instead of `Record<string, unknown>` — e.g.
+/** The value shape a given declared field reads/writes, so a consumer can type its own
+ *  `filters` record precisely instead of `Record<string, unknown>` — e.g.
  *  `Record<"schools", FilterValue<typeof schoolsField>>`. */
 type FilterValue<F extends FilterField> = F extends FilterFieldText ? string : F extends FilterFieldSelect ? string : F extends FilterFieldMultiSelect ? FilterMultiSelectValue : F extends FilterFieldRange ? FilterRangeValue : F extends FilterFieldDate ? FilterDateValue : never;
 interface FilterBarProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "onChange"> {
@@ -1175,7 +1188,7 @@ interface FilterBarProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "on
     /** Fires on every value edit. Maps 1:1 onto useServerTable's setFilter(id, value).
      *  FilterBar only ever calls this with a COMPLETE, valid value for the field — an
      *  emptied selection, a one-sided date range, an invalid numeric range or a cleared
-     *  bound go through onFilterRemove (or nothing) instead (MP-243 A3). */
+     *  bound go through onFilterRemove (or nothing) instead. */
     onFilterChange: (key: string, value: unknown) => void;
     /** Fires when a chip's × is clicked, or when an edit leaves a field with no valid
      *  value. Maps 1:1 onto useServerTable's clearFilter(id). */
@@ -1196,18 +1209,17 @@ interface FilterBarProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "on
  * (`panel`), the same way SortMenu holds `open` but never sort state itself.
  *
  * Every floating surface — a field's edit panel and the "add filter" menu — is a real
- * Popover (or Menu-in-a-Popover) from this kit's own actions module (MP-243 A5): viewport
- * clamping, nested-layer handling, Escape, and focus-return-to-the-chip all come from
- * there, so FilterBar itself runs no document-level dismissal listener of its own. Only
- * the text field's inline input manages its own dismissal (blur/Enter/Escape), since it
- * isn't a floating panel at all.
+ * Popover (or Menu-in-a-Popover) from this kit's own actions module: viewport clamping,
+ * nested-layer handling, Escape, and focus-return-to-the-chip all come from there, so
+ * FilterBar itself runs no document-level dismissal listener of its own. Only the text
+ * field's inline input manages its own dismissal (blur/Enter/Escape), since it isn't a
+ * floating panel at all.
  *
- * MP-243 adds three variants on top of the original text/select, for audiences too big or
- * too shaped for a single free-text box or a short dropdown: multiSelect (searchable, sync
- * or async, with an optional paste-a-list mode for the same value), range (numeric
- * min/max), and date ("within the last N days" or "between two dates"). text/select are
- * unchanged and keep their bare-string value shape, so an existing consumer needs no
- * migration.
+ * FilterBar supports five field kinds: text, select, multiSelect (searchable, sync or
+ * async, with an optional paste-a-list mode for the same value), range (numeric min/max),
+ * and date ("within the last N days" or "between two dates"). text and select keep a bare
+ * string value; multiSelect/range/date each read/write a small typed object of their own
+ * (see FilterValue).
  */
 declare function FilterBar({ fields, filters, onFilterChange, onFilterRemove, align, className, ...rest }: FilterBarProps): React.JSX.Element;
 
@@ -2188,7 +2200,10 @@ interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement
 }
 declare function Textarea({ label, help, error, required, rows, disabled, id, className, style, ...rest }: TextareaProps): React.JSX.Element;
 
-/** Numeric field with thousands formatting on blur, +/- steppers with hold-to-repeat acceleration, arrow keys (shift = bigStep), and min/max clamping. */
+/** Numeric field with thousands formatting on blur, +/- steppers with hold-to-repeat
+ *  acceleration and arrow keys (shift = bigStep) that snap to the step grid within
+ *  [min, max], and inline min/max/integer validation that keeps an invalid typed value
+ *  from ever reaching `onChange`. */
 interface NumberInputProps {
     label?: string;
     help?: string;
@@ -2210,6 +2225,12 @@ interface NumberInputProps {
     step?: number;
     /** Larger step used while holding the steppers or shift+arrows. */
     bigStep?: number;
+    /** Requires a whole number. Off by default — a field with a whole-number `step` (e.g.
+     *  cents in steps of 10) may still want decimal input, so this is a deliberate opt-in
+     *  rather than inferred from `step`. When set, typed text, blur, the steppers and arrow
+     *  keys all reject or snap away from a fractional value; a fractional value can never
+     *  reach `onChange`. */
+    integer?: boolean;
     /** Thousands-format the display when not editing. Default true. */
     format?: boolean;
     value?: number | string;
@@ -2218,11 +2239,17 @@ interface NumberInputProps {
      *  (e.g. FilterBar's range/date panels) tells an unset bound apart from a typed
      *  zero by this, not by testing for `0` itself. */
     onChange?: (e: any) => void;
+    /** Called with the field's current validity every time it changes — true once the
+     *  typed text is empty or a legal number, false while it is out of bounds, non-integer
+     *  (when `integer` is set), or otherwise unparseable. Lets a parent (e.g. a panel with
+     *  its own Done button) know a value is mid-edit-and-invalid even though nothing has
+     *  been (or ever will be) passed to `onChange` for it. */
+    onValidityChange?: (valid: boolean) => void;
     placeholder?: string;
     style?: any;
     className?: string;
 }
-declare function NumberInput({ label, help, error, prefix, suffix, required, disabled, min, max, step, bigStep, value, onChange, format, className, style, placeholder, id, "aria-label": ariaLabel }: NumberInputProps): React.JSX.Element;
+declare function NumberInput({ label, help, error, prefix, suffix, required, disabled, min, max, step, bigStep, integer, value, onChange, onValidityChange, format, className, style, placeholder, id, "aria-label": ariaLabel }: NumberInputProps): React.JSX.Element;
 
 /** Rich popover select: animated listbox, keyboard nav + type-ahead, search over 8 options, option icons, descriptions, meta and groups. API-compatible with the old native select. */
 interface SelectOption {