@leabankab/component-library 8.8.0 → 8.9.0

package/dist/components/form/select-field.d.ts

@@ -5,7 +5,20 @@ export type SelectOption<Value extends string = string> = {
     label: string;
     /** Shown, but not selectable. */
     disabled?: boolean;
+    /**
+     * A picture before the label, 20px: a flag, a logo. Decoration, hidden
+     * from assistive tech, so the label has to say it all. In a `Select` the
+     * chosen option's icon also shows in the field, unless `startAdornment`
+     * takes its place.
+     */
+    icon?: ReactNode;
 };
+/**
+ * `"md"`: the 54px field with a floating label. `"sm"`: a compact 32px field
+ * for a narrow place (the country list in the website's footer), with its
+ * label as a line above it.
+ */
+export type SelectSize = "sm" | "md";
 /** The props `Select` and `MultiSelect` have in common. */
 export type SelectFieldBaseProps = {
     /** Floating label, linked to the select for you. */
@@ -48,6 +61,8 @@ export type SelectFieldBaseProps = {
     ref?: Ref<HTMLElement>;
 };
 type SelectFieldProps = SelectFieldBaseProps & {
+    /** `Select` only; `MultiSelect` is always `md`. */
+    size?: SelectSize;
     multiple: boolean;
     /** The value as Base UI holds it: `null` or an array when empty. */
     value: string | string[] | null;
@@ -66,7 +81,7 @@ type SelectFieldProps = SelectFieldBaseProps & {
     /** The `SelectFieldItem`s. */
     children: ReactNode;
 };
-export declare function SelectField({ label, helperText, error, required, disabled, placeholder, startAdornment, endAdornment, open: openProp, onOpenChange, onBlur, name, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, className, style, ref, multiple, value, onValueChange, filled, display, displayHidden, valueText, children, }: SelectFieldProps): import("react").JSX.Element;
+export declare function SelectField({ label, helperText, error, required, disabled, placeholder, startAdornment, endAdornment, open: openProp, onOpenChange, onBlur, name, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, className, style, ref, size, multiple, value, onValueChange, filled, display, displayHidden, valueText, children, }: SelectFieldProps): import("react").JSX.Element;
 type SelectFieldItemProps = {
     option: SelectOption;
     disabled?: boolean;
@@ -75,4 +90,8 @@ type SelectFieldItemProps = {
 };
 /** One option in the list. */
 export declare function SelectFieldItem({ option, disabled, children, }: SelectFieldItemProps): import("react").JSX.Element;
+/** The icon of an option, in the list or in the field: 20px, decoration. */
+export declare function OptionIcon({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
 export {};

package/dist/components/form/select.d.ts

@@ -1,5 +1,5 @@
-import { SelectFieldBaseProps, SelectOption } from './select-field';
-export type { SelectOption };
+import { SelectFieldBaseProps, SelectOption, SelectSize } from './select-field';
+export type { SelectOption, SelectSize };
 export type SelectProps<Value extends string = string> = SelectFieldBaseProps & {
     /** The choices. */
     options: readonly SelectOption<Value>[];
@@ -9,6 +9,12 @@ export type SelectProps<Value extends string = string> = SelectFieldBaseProps &
     defaultValue?: Value | "";
     /** Called with the value of the option the user picks. */
     onValueChange?: (value: Value) => void;
+    /**
+     * `"sm"` is a compact 32px field for a narrow place, with the `label`
+     * as a line above it instead of floating inside.
+     * @default "md"
+     */
+    size?: SelectSize;
 };
 /**
  * Select on Base UI's `Select`, in the same box as `Input`. The label, the
@@ -30,5 +36,9 @@ export type SelectProps<Value extends string = string> = SelectFieldBaseProps &
  * Values are strings, and `""` means nothing is chosen. Written with
  * `as const`, the options give `value` and `onValueChange` their type:
  * `"no" | "se"` here.
+ *
+ * An option can carry an `icon` (a flag, a logo), shown before its label in
+ * the list and, once it is chosen, in the field. `size="sm"` is a compact
+ * 32px field with its label above it.
  */
-export declare function Select<Value extends string = string>({ options, value, defaultValue, onValueChange, ...rest }: SelectProps<Value>): import("react").JSX.Element;
+export declare function Select<Value extends string = string>({ options, value, defaultValue, onValueChange, startAdornment, ...rest }: SelectProps<Value>): import("react").JSX.Element;