@beautinique/frontend-components 1.0.8 → 1.0.9

package/dist/inputs/Select.d.cts

@@ -0,0 +1,53 @@
+import { type ReactNode } from 'react';
+import { type TDropdownPlacement } from '../lib/dropdown-position.js';
+import type { IFieldBase, TInputIcons } from './types.js';
+export interface ISelectOption {
+    /** What is shown for the option, in the list and in the field once it is chosen. */
+    label: ReactNode;
+    value: string | number;
+    /** The option is shown but cannot be chosen. */
+    disabled?: boolean;
+    /**
+     * The text typing looks for when `label` is not text (an icon and a name). It is the label when that
+     * is text.
+     */
+    searchLabel?: string;
+}
+export interface ISelectProps {
+    /** The value of the chosen option. A value that is not one of the options chooses none. */
+    value: ISelectOption['value'];
+    /** Gets the value of the option that was chosen, and `''` when the choice was taken away. */
+    onChange: (value: ISelectOption['value']) => void;
+    disabled?: boolean;
+    /** What the field says while nothing is chosen. */
+    placeholder?: string;
+    /** The `id` of the field, for something that has to point at it. */
+    id?: string;
+}
+export interface ISelect extends IFieldBase {
+    selectProps: ISelectProps;
+    options: ISelectOption[];
+    /** An icon at each end of the field. One with an `onClick` is a button and needs a `label`. */
+    icons?: TInputIcons;
+    /** Classes for the list of options. */
+    optionsClassName?: string;
+    /** Which side of the field the list opens on, unless there is no room there. @default 'bottom' */
+    position?: TDropdownPlacement;
+    /** Pressing the chosen option again takes the choice away. @default true */
+    clearable?: boolean;
+}
+/**
+ * A field that opens a list of options. It follows the pattern of a select that is a combobox: the field
+ * keeps the focus and tells assistive technology which option is the active one while the arrow
+ * keys move through the list.
+ *
+ * - Keyboard: Arrow Down / Up (or Enter, Space) open it and move; Home / End jump to the first and the
+ *   last; Enter or Space chooses; Escape or Tab close it; typing letters goes to the option that
+ *   starts with them.
+ * - The list is drawn in `document.body`, so it is not cut by a parent that scrolls or hides what
+ *   overflows. It opens on the other side of the field when there is no room on the one asked for, and
+ *   follows the field while the page scrolls.
+ * - Pressing outside closes it. Pressing the chosen option again takes the choice away (`clearable`).
+ */
+export declare const Select: ({ label, className, error, containerClassName, optionsClassName, icons, selectProps, options, position, clearable, }: ISelect) => import("react").JSX.Element;
+//# sourceMappingURL=Select.d.cts.map

package/dist/inputs/Select.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.d.cts","sourceRoot":"","sources":["../../src/inputs/Select.tsx"],"names":[],"mappings":"AACA,OAAO,EAEL,KAAK,SAAS,EAMf,MAAM,OAAO,CAAC;AAGf,OAAO,EAIL,KAAK,kBAAkB,EACxB,MAAM,6BAA6B,CAAC;AAQrC,OAAO,KAAK,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAE1D,MAAM,WAAW,aAAa;IAC5B,oFAAoF;IACpF,KAAK,EAAE,SAAS,CAAC;IACjB,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,gDAAgD;IAChD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,YAAY;IAC3B,2FAA2F;IAC3F,KAAK,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC9B,6FAA6F;IAC7F,QAAQ,EAAE,CAAC,KAAK,EAAE,aAAa,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC;IAClD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mDAAmD;IACnD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oEAAoE;IACpE,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED,MAAM,WAAW,OAAQ,SAAQ,UAAU;IACzC,WAAW,EAAE,YAAY,CAAC;IAC1B,OAAO,EAAE,aAAa,EAAE,CAAC;IACzB,+FAA+F;IAC/F,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,uCAAuC;IACvC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,kGAAkG;IAClG,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAC9B,4EAA4E;IAC5E,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAcD;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,MAAM,GAAI,sHAWpB,OAAO,gCAyRT,CAAC"}

package/dist/inputs/Select.d.ts

@@ -0,0 +1,53 @@
+import { type ReactNode } from 'react';
+import { type TDropdownPlacement } from '../lib/dropdown-position.js';
+import type { IFieldBase, TInputIcons } from './types.js';
+export interface ISelectOption {
+    /** What is shown for the option, in the list and in the field once it is chosen. */
+    label: ReactNode;
+    value: string | number;
+    /** The option is shown but cannot be chosen. */
+    disabled?: boolean;
+    /**
+     * The text typing looks for when `label` is not text (an icon and a name). It is the label when that
+     * is text.
+     */
+    searchLabel?: string;
+}
+export interface ISelectProps {
+    /** The value of the chosen option. A value that is not one of the options chooses none. */
+    value: ISelectOption['value'];
+    /** Gets the value of the option that was chosen, and `''` when the choice was taken away. */
+    onChange: (value: ISelectOption['value']) => void;
+    disabled?: boolean;
+    /** What the field says while nothing is chosen. */
+    placeholder?: string;
+    /** The `id` of the field, for something that has to point at it. */
+    id?: string;
+}
+export interface ISelect extends IFieldBase {
+    selectProps: ISelectProps;
+    options: ISelectOption[];
+    /** An icon at each end of the field. One with an `onClick` is a button and needs a `label`. */
+    icons?: TInputIcons;
+    /** Classes for the list of options. */
+    optionsClassName?: string;
+    /** Which side of the field the list opens on, unless there is no room there. @default 'bottom' */
+    position?: TDropdownPlacement;
+    /** Pressing the chosen option again takes the choice away. @default true */
+    clearable?: boolean;
+}
+/**
+ * A field that opens a list of options. It follows the pattern of a select that is a combobox: the field
+ * keeps the focus and tells assistive technology which option is the active one while the arrow
+ * keys move through the list.
+ *
+ * - Keyboard: Arrow Down / Up (or Enter, Space) open it and move; Home / End jump to the first and the
+ *   last; Enter or Space chooses; Escape or Tab close it; typing letters goes to the option that
+ *   starts with them.
+ * - The list is drawn in `document.body`, so it is not cut by a parent that scrolls or hides what
+ *   overflows. It opens on the other side of the field when there is no room on the one asked for, and
+ *   follows the field while the page scrolls.
+ * - Pressing outside closes it. Pressing the chosen option again takes the choice away (`clearable`).
+ */
+export declare const Select: ({ label, className, error, containerClassName, optionsClassName, icons, selectProps, options, position, clearable, }: ISelect) => import("react").JSX.Element;
+//# sourceMappingURL=Select.d.ts.map

package/dist/inputs/Select.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../src/inputs/Select.tsx"],"names":[],"mappings":"AACA,OAAO,EAEL,KAAK,SAAS,EAMf,MAAM,OAAO,CAAC;AAGf,OAAO,EAIL,KAAK,kBAAkB,EACxB,MAAM,6BAA6B,CAAC;AAQrC,OAAO,KAAK,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAE1D,MAAM,WAAW,aAAa;IAC5B,oFAAoF;IACpF,KAAK,EAAE,SAAS,CAAC;IACjB,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,gDAAgD;IAChD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,YAAY;IAC3B,2FAA2F;IAC3F,KAAK,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC9B,6FAA6F;IAC7F,QAAQ,EAAE,CAAC,KAAK,EAAE,aAAa,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC;IAClD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mDAAmD;IACnD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oEAAoE;IACpE,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED,MAAM,WAAW,OAAQ,SAAQ,UAAU;IACzC,WAAW,EAAE,YAAY,CAAC;IAC1B,OAAO,EAAE,aAAa,EAAE,CAAC;IACzB,+FAA+F;IAC/F,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,uCAAuC;IACvC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,kGAAkG;IAClG,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAC9B,4EAA4E;IAC5E,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAcD;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,MAAM,GAAI,sHAWpB,OAAO,gCAyRT,CAAC"}

package/dist/inputs/Textarea.d.cts

@@ -0,0 +1,19 @@
+import { type Ref, type TextareaHTMLAttributes } from 'react';
+import type { IFieldBase, IFieldRegistration } from './types.js';
+export interface ITextarea extends IFieldBase {
+    /** Any attribute of a `<textarea>`: `name`, `value`, `onChange`, `placeholder`, `rows`... */
+    textAreaProps: TextareaHTMLAttributes<HTMLTextAreaElement>;
+    /** What `register('name')` of React Hook Form gives back. */
+    register?: IFieldRegistration<HTMLTextAreaElement>;
+    /** Puts the cursor in the field when it is shown. */
+    needRef?: boolean;
+    /** The `<textarea>` itself, e.g. to move the focus to it. */
+    ref?: Ref<HTMLTextAreaElement>;
+}
+/**
+ * A multi-line text field: the same as `Input` (label on the border, message under it, `register`
+ * and `textAreaProps` both heard, `aria-invalid` and `aria-describedby` while there is an `error`),
+ * five rows tall unless `rows` says otherwise.
+ */
+export declare const Textarea: ({ label, register, className, error, containerClassName, textAreaProps, needRef, ref, }: ITextarea) => import("react").JSX.Element;
+//# sourceMappingURL=Textarea.d.cts.map

package/dist/inputs/Textarea.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Textarea.d.cts","sourceRoot":"","sources":["../../src/inputs/Textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,GAAG,EACR,KAAK,sBAAsB,EAI5B,MAAM,OAAO,CAAC;AAKf,OAAO,KAAK,EAAE,UAAU,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC;AAGjE,MAAM,WAAW,SAAU,SAAQ,UAAU;IAC3C,6FAA6F;IAC7F,aAAa,EAAE,sBAAsB,CAAC,mBAAmB,CAAC,CAAC;IAC3D,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,kBAAkB,CAAC,mBAAmB,CAAC,CAAC;IACnD,qDAAqD;IACrD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,6DAA6D;IAC7D,GAAG,CAAC,EAAE,GAAG,CAAC,mBAAmB,CAAC,CAAC;CAChC;AAED;;;;GAIG;AACH,eAAO,MAAM,QAAQ,GAAI,yFAStB,SAAS,gCAsDX,CAAC"}

package/dist/inputs/Textarea.d.ts

@@ -0,0 +1,19 @@
+import { type Ref, type TextareaHTMLAttributes } from 'react';
+import type { IFieldBase, IFieldRegistration } from './types.js';
+export interface ITextarea extends IFieldBase {
+    /** Any attribute of a `<textarea>`: `name`, `value`, `onChange`, `placeholder`, `rows`... */
+    textAreaProps: TextareaHTMLAttributes<HTMLTextAreaElement>;
+    /** What `register('name')` of React Hook Form gives back. */
+    register?: IFieldRegistration<HTMLTextAreaElement>;
+    /** Puts the cursor in the field when it is shown. */
+    needRef?: boolean;
+    /** The `<textarea>` itself, e.g. to move the focus to it. */
+    ref?: Ref<HTMLTextAreaElement>;
+}
+/**
+ * A multi-line text field: the same as `Input` (label on the border, message under it, `register`
+ * and `textAreaProps` both heard, `aria-invalid` and `aria-describedby` while there is an `error`),
+ * five rows tall unless `rows` says otherwise.
+ */
+export declare const Textarea: ({ label, register, className, error, containerClassName, textAreaProps, needRef, ref, }: ITextarea) => import("react").JSX.Element;
+//# sourceMappingURL=Textarea.d.ts.map

package/dist/inputs/Textarea.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Textarea.d.ts","sourceRoot":"","sources":["../../src/inputs/Textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,GAAG,EACR,KAAK,sBAAsB,EAI5B,MAAM,OAAO,CAAC;AAKf,OAAO,KAAK,EAAE,UAAU,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC;AAGjE,MAAM,WAAW,SAAU,SAAQ,UAAU;IAC3C,6FAA6F;IAC7F,aAAa,EAAE,sBAAsB,CAAC,mBAAmB,CAAC,CAAC;IAC3D,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,kBAAkB,CAAC,mBAAmB,CAAC,CAAC;IACnD,qDAAqD;IACrD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,6DAA6D;IAC7D,GAAG,CAAC,EAAE,GAAG,CAAC,mBAAmB,CAAC,CAAC;CAChC;AAED;;;;GAIG;AACH,eAAO,MAAM,QAAQ,GAAI,yFAStB,SAAS,gCAsDX,CAAC"}