hisd3-ui-kit 4.7.1 → 5.1.0

package/dist/index.d.ts

@@ -1,9 +1,11 @@
-import { ThemeConfig, MenuProps, TableProps, TabsProps, ButtonProps, InputProps } from 'antd';
+import { ThemeConfig, MenuProps, TableProps, TabsProps, ButtonProps, InputProps, SelectProps, FormItemProps, GetProps, Skeleton, Input, InputNumberProps, GetRef, InputNumber, RadioGroupProps, CheckboxProps, Checkbox, SwitchProps, DatePickerProps, DatePicker, TimePickerProps, TimePicker, TimeRangePickerProps, AutoCompleteProps, AutoComplete, MentionsProps, MentionsRef, CascaderAutoProps, Cascader, TreeSelectProps, TreeSelect, SegmentedProps, TransferProps, Transfer, Slider, RateProps, Rate, ColorPickerProps, UploadProps, UploadFile } from 'antd';
 import React, { ReactNode, ComponentType } from 'react';
 import * as styled_components_dist_types from 'styled-components/dist/types';
 import * as styled_components from 'styled-components';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { AnyObject } from 'antd/es/_util/type';
+import { DefaultOptionType } from 'antd/es/select';
+import * as antd_es_input_TextArea from 'antd/es/input/TextArea';
 
 /** Named primary-color presets. Any hex string is also accepted. */
 declare const HISD3_PRESETS: {
@@ -1048,7 +1050,7 @@ declare const HISD3Button: React.FC<HISD3ButtonProps>;
 
 type HISD3InputProps = InputProps;
 /** Plain text input with the HISD3 2px border. */
-declare const HISD3Input: React.FC<HISD3InputProps>;
+declare const HISD3Input: React.ForwardRefExoticComponent<Omit<InputProps, "ref"> & React.RefAttributes<InputRef>>;
 interface HISD3SearchInputProps extends Omit<InputProps, "size"> {
     /**
      * "small" 32px, "middle" 40px (default, matches buttons), "large" 56px for a
@@ -1058,8 +1060,190 @@ interface HISD3SearchInputProps extends Omit<InputProps, "size"> {
     /** @deprecated use `size` — kept so existing call sites keep working. */
     compact?: boolean;
 }
-/** Grey filled search field with leading icon (the page-level search bar). */
-declare const HISD3SearchInput: React.FC<HISD3SearchInputProps>;
+/** Light search field with a leading icon (the page-level search bar). */
+declare const HISD3SearchInput: React.ForwardRefExoticComponent<Omit<HISD3SearchInputProps, "ref"> & React.RefAttributes<InputRef>>;
+
+/** An option that may carry a second, smaller line under its label. */
+interface HISD3SelectOption extends DefaultOptionType {
+    /** Shown under the label, smaller and muted — e.g. the account title under its code. */
+    description?: React.ReactNode;
+}
+interface HISD3SelectProps extends SelectProps<any, HISD3SelectOption> {
+    /**
+     * Wrap long text onto more lines — in the chosen value and in every option —
+     * instead of cutting it off with "…". On by default.
+     *
+     * Turns antd's virtual list off unless you pass `virtual` yourself: wrapped
+     * rows are not all the same height. Pass `virtual` for a very long list.
+     */
+    wrap?: boolean;
+    /** Label line in a monospace font — for codes (account codes, UACS, …). */
+    monoLabel?: boolean;
+}
+interface HISD3SelectLabelProps {
+    label: React.ReactNode;
+    description?: React.ReactNode;
+    /** Label in a monospace font. */
+    mono?: boolean;
+}
+/**
+ * The two-line layout HISD3Select uses for an option with a `description`:
+ * the label on top, the description underneath, smaller and muted. Both wrap.
+ * Exported for a custom `optionRender` / `labelRender` that wants the same look.
+ */
+declare const HISD3SelectLabel: React.FC<HISD3SelectLabelProps>;
+/**
+ * antd Select that wraps long text instead of truncating it, and shows an
+ * option's `description` on a second line — in the dropdown and in the box.
+ *
+ * ```tsx
+ * <HISD3Select
+ *   showSearch
+ *   monoLabel
+ *   options={accounts.map((a) => ({ value: a.code, label: a.code, description: a.title }))}
+ * />
+ * ```
+ */
+declare const HISD3Select: React.ForwardRefExoticComponent<Omit<HISD3SelectProps, "ref"> & React.RefAttributes<RefSelectProps>>;
+
+type HISD3SkeletonInputProps = GetProps<typeof Skeleton.Input>;
+type ControlSize = HISD3SkeletonInputProps["size"];
+interface HISD3FormFieldBaseProps extends Omit<FormItemProps, "children"> {
+    /** Show a skeleton in place of the control (e.g. while the record loads). */
+    loading?: boolean;
+    /** Props for the default skeleton (`Skeleton.Input`). */
+    loadingProps?: HISD3SkeletonInputProps;
+    /** Label above the control instead of beside it. Shortcut for `layout="vertical"`. */
+    vertical?: boolean;
+    /** Semi-bold (600) label. Only the label changes — the control text does not. */
+    bolderLabel?: boolean;
+}
+/** Every wrapped field takes the Form.Item props plus `fieldProps` for the control. */
+type HISD3FormFieldProps<P> = HISD3FormFieldBaseProps & {
+    /** Props passed straight to the wrapped antd control. */
+    fieldProps?: P;
+};
+interface HISD3FormFieldShellProps extends HISD3FormFieldBaseProps {
+    /** Control size — used to size the default skeleton. */
+    controlSize?: ControlSize;
+    /** Replace the default skeleton (e.g. a small one for a switch). */
+    skeleton?: React.ReactNode;
+    children?: React.ReactNode;
+}
+/**
+ * The Form.Item wrapper every HISD3Form* field uses. Use it directly to give a
+ * custom control the same label, spacing and loading behaviour.
+ */
+declare const HISD3FormField: React.FC<HISD3FormFieldShellProps>;
+/** A wrapped field: its props plus a ref to the underlying antd control. */
+type HISD3FormFieldComponent<P, R> = React.ForwardRefExoticComponent<React.PropsWithoutRef<P> & React.RefAttributes<R>>;
+type HISD3InputNumberRef = GetRef<typeof InputNumber>;
+type HISD3PickerRef = GetRef<typeof DatePicker>;
+type HISD3RangePickerRef = GetRef<typeof DatePicker.RangePicker>;
+type HISD3TimePickerRef = GetRef<typeof TimePicker>;
+interface HISD3FormInputProps extends HISD3FormFieldProps<InputProps> {
+    /** @deprecated use `fieldProps` — kept so existing call sites keep working. */
+    propsinput?: InputProps;
+}
+/** Text input inside a Form.Item. */
+declare const HISD3FormInput: React.ForwardRefExoticComponent<Omit<HISD3FormInputProps, "ref"> & React.RefAttributes<InputRef>>;
+type HISD3FormPasswordProps = HISD3FormFieldProps<GetProps<typeof Input.Password>>;
+/** Password input with the show / hide toggle. */
+declare const HISD3FormPassword: React.ForwardRefExoticComponent<Omit<HISD3FormPasswordProps, "ref"> & React.RefAttributes<InputRef>>;
+type HISD3FormTextAreaProps = HISD3FormFieldProps<GetProps<typeof Input.TextArea>>;
+/** Multi-line text. The skeleton grows with `fieldProps.rows`. */
+declare const HISD3FormTextArea: React.ForwardRefExoticComponent<Omit<HISD3FormTextAreaProps, "ref"> & React.RefAttributes<antd_es_input_TextArea.TextAreaRef>>;
+type HISD3FormInputNumberProps = HISD3FormFieldProps<InputNumberProps>;
+/** Numeric input, full width of its column. */
+declare const HISD3FormInputNumber: HISD3FormFieldComponent<HISD3FormInputNumberProps, HISD3InputNumberRef>;
+type HISD3FormSelectProps = HISD3FormFieldProps<HISD3SelectProps>;
+/** Select / multi-select (`HISD3Select`: long text wraps, options may carry a `description`). */
+declare const HISD3FormSelect: React.ForwardRefExoticComponent<Omit<HISD3FormSelectProps, "ref"> & React.RefAttributes<RefSelectProps>>;
+type HISD3FormRadioGroupProps = HISD3FormFieldProps<RadioGroupProps>;
+/** Radio group — pass `fieldProps.options`. */
+declare const HISD3FormRadioGroup: React.ForwardRefExoticComponent<Omit<HISD3FormRadioGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+interface HISD3FormCheckboxProps extends HISD3FormFieldProps<CheckboxProps> {
+    /** Text beside the box. Shortcut for `fieldProps.children`. */
+    text?: React.ReactNode;
+}
+/** Single boolean checkbox; the form value is `true` / `false`. */
+declare const HISD3FormCheckbox: React.ForwardRefExoticComponent<Omit<HISD3FormCheckboxProps, "ref"> & React.RefAttributes<CheckboxRef>>;
+type HISD3FormCheckboxGroupProps = HISD3FormFieldProps<GetProps<typeof Checkbox.Group>>;
+/** Checkbox group — pass `fieldProps.options`; the form value is an array. */
+declare const HISD3FormCheckboxGroup: React.ForwardRefExoticComponent<Omit<HISD3FormCheckboxGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+type HISD3FormSwitchProps = HISD3FormFieldProps<SwitchProps>;
+/** On / off switch; the form value is `true` / `false`. */
+declare const HISD3FormSwitch: React.ForwardRefExoticComponent<Omit<HISD3FormSwitchProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+type HISD3FormDatePickerProps = HISD3FormFieldProps<DatePickerProps>;
+/** Date picker, full width of its column. The form value is a Dayjs. */
+declare const HISD3FormDatePicker: HISD3FormFieldComponent<HISD3FormDatePickerProps, HISD3PickerRef>;
+type HISD3FormRangePickerProps = HISD3FormFieldProps<GetProps<typeof DatePicker.RangePicker>>;
+/** Start / end date range. The form value is `[Dayjs, Dayjs]`. */
+declare const HISD3FormRangePicker: HISD3FormFieldComponent<HISD3FormRangePickerProps, HISD3RangePickerRef>;
+type HISD3FormTimePickerProps = HISD3FormFieldProps<TimePickerProps>;
+/** Time picker, full width of its column. */
+declare const HISD3FormTimePicker: HISD3FormFieldComponent<HISD3FormTimePickerProps, HISD3TimePickerRef>;
+type HISD3TimeRangePickerRef = GetRef<typeof TimePicker.RangePicker>;
+type HISD3FormTimeRangePickerProps = HISD3FormFieldProps<TimeRangePickerProps>;
+/** Start / end time range. The form value is `[Dayjs, Dayjs]`. */
+declare const HISD3FormTimeRangePicker: HISD3FormFieldComponent<HISD3FormTimeRangePickerProps, HISD3TimeRangePickerRef>;
+type HISD3FormSearchProps = HISD3FormFieldProps<GetProps<typeof Input.Search>>;
+/** Input with a search button (`fieldProps.onSearch`). */
+declare const HISD3FormSearch: React.ForwardRefExoticComponent<Omit<HISD3FormSearchProps, "ref"> & React.RefAttributes<InputRef>>;
+type HISD3OTPRef = GetRef<typeof Input.OTP>;
+type HISD3FormOTPProps = HISD3FormFieldProps<GetProps<typeof Input.OTP>>;
+/** One-time code boxes (`fieldProps.length`, default 6). The form value is a string. */
+declare const HISD3FormOTP: HISD3FormFieldComponent<HISD3FormOTPProps, HISD3OTPRef>;
+type HISD3AutoCompleteRef = GetRef<typeof AutoComplete>;
+type HISD3FormAutoCompleteProps = HISD3FormFieldProps<AutoCompleteProps>;
+/** Free text with suggestions (`fieldProps.options`). */
+declare const HISD3FormAutoComplete: HISD3FormFieldComponent<HISD3FormAutoCompleteProps, HISD3AutoCompleteRef>;
+type HISD3FormMentionsProps = HISD3FormFieldProps<MentionsProps>;
+/** Text area with `@` mentions (`fieldProps.options`). */
+declare const HISD3FormMentions: React.ForwardRefExoticComponent<Omit<HISD3FormMentionsProps, "ref"> & React.RefAttributes<MentionsRef>>;
+type HISD3CascaderRef = GetRef<typeof Cascader>;
+type HISD3FormCascaderProps = HISD3FormFieldProps<CascaderAutoProps>;
+/** Hierarchical select (e.g. region → province → city). The value is the path array. */
+declare const HISD3FormCascader: HISD3FormFieldComponent<HISD3FormCascaderProps, HISD3CascaderRef>;
+type HISD3TreeSelectRef = GetRef<typeof TreeSelect>;
+type HISD3FormTreeSelectProps = HISD3FormFieldProps<TreeSelectProps>;
+/** Select from a tree (`fieldProps.treeData`). */
+declare const HISD3FormTreeSelect: HISD3FormFieldComponent<HISD3FormTreeSelectProps, HISD3TreeSelectRef>;
+type HISD3FormSegmentedProps = HISD3FormFieldProps<SegmentedProps>;
+/** Segmented control (`fieldProps.options`); a compact alternative to radios. */
+declare const HISD3FormSegmented: React.ForwardRefExoticComponent<Omit<HISD3FormSegmentedProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+type HISD3TransferRef = GetRef<typeof Transfer>;
+type HISD3FormTransferProps = HISD3FormFieldProps<TransferProps>;
+/**
+ * Two-list picker. The form value is the right-hand keys (`targetKeys`);
+ * pass the full list as `fieldProps.dataSource`.
+ */
+declare const HISD3FormTransfer: HISD3FormFieldComponent<HISD3FormTransferProps, HISD3TransferRef>;
+type HISD3SliderRef = GetRef<typeof Slider>;
+type HISD3FormSliderProps = HISD3FormFieldProps<GetProps<typeof Slider>>;
+/** Slider; `fieldProps.range` makes the value `[min, max]`. */
+declare const HISD3FormSlider: HISD3FormFieldComponent<HISD3FormSliderProps, HISD3SliderRef>;
+type HISD3RateRef = GetRef<typeof Rate>;
+type HISD3FormRateProps = HISD3FormFieldProps<RateProps>;
+/** Star rating. */
+declare const HISD3FormRate: HISD3FormFieldComponent<HISD3FormRateProps, HISD3RateRef>;
+type HISD3FormColorPickerProps = HISD3FormFieldProps<ColorPickerProps>;
+/**
+ * Colour picker. The form value is the colour as a string in
+ * `fieldProps.format` (hex by default, e.g. "#1677ff"), not antd's Color
+ * object. Pass your own `getValueFromEvent` to keep the object instead.
+ */
+declare const HISD3FormColorPicker: React.FC<HISD3FormColorPickerProps>;
+/** Maps Upload's onChange event to its file list, so the form value is `UploadFile[]`. */
+declare const normalizeUploadFileList: (e: unknown) => UploadFile[];
+interface HISD3FormUploadProps extends HISD3FormFieldProps<UploadProps> {
+    /** The trigger, e.g. a "Select file" button. */
+    children?: React.ReactNode;
+}
+/** File upload. The form value is the `UploadFile[]` list. */
+declare const HISD3FormUpload: React.FC<HISD3FormUploadProps>;
+/** Drag-and-drop upload area. The form value is the `UploadFile[]` list. */
+declare const HISD3FormUploadDragger: React.FC<HISD3FormUploadProps>;
 
 /**
  * Open a drawer or modal from anywhere, without the page holding its state.
@@ -1119,5 +1303,5 @@ declare const HISD3_LAYOUT: {
     readonly pageGutter: 28;
 };
 
-export { AppAnimateGroups, AppAnimates, AppMotionAnimate, AuthType, DialogProvider, Fonts, FooterType, HISD3AvatarMenu, HISD3Button, HISD3HeaderActions, HISD3Input, HISD3LoginPage, HISD3NotificationButton, HISD3PageBody, HISD3PageHeader, HISD3Provider, HISD3SearchInput, HISD3Sidebar, HISD3Table, HISD3Tabs, HISD3Tag, HISD3_BORDER_PRESETS, HISD3_COLORS, HISD3_FONT_FAMILY, HISD3_FONT_WEIGHT_BODY, HISD3_FONT_WEIGHT_HEADING, HISD3_LAYOUT, HISD3_LOGO_SRC, HISD3_NEUTRALS, HISD3_PRESETS, HeaderIconButton, HeaderType, LayoutDirection, LayoutType, MenuStyle, MessageType, NavStyle, RoutePermittedRole, RouteTransition, ThemeMode, ThemeStyle, ThemeStyleRadius, UserMenu, borderVarsCss, createHisd3Theme, getInitials, hisd3AntdTheme, hisd3VarsCss, resolvePrimary, shade, tint, useDialog, useInsideHISD3Provider };
-export type { DialogOwnProps, DialogProps, DialogResult, HISD3AvatarMenuProps, HISD3Borders, HISD3BreadcrumbItem, HISD3ButtonProps, HISD3ButtonVariant, HISD3HeaderActionsProps, HISD3InputProps, HISD3LoginPageProps, HISD3LoginValues, HISD3MenuItem, HISD3Notification, HISD3NotificationButtonProps, HISD3PageHeaderProps, HISD3Preset, HISD3ProviderProps, HISD3SearchInputProps, HISD3SidebarProps, HISD3TabItem, HISD3TablePagination, HISD3TableProps, HISD3TabsProps, HISD3TagProps, HISD3TagTone, HISD3TagVariant, HISD3ThemeOptions, IUserEmployee, LoginSide, LoginVariant, StyledTheme, UserMenuProps };
+export { AppAnimateGroups, AppAnimates, AppMotionAnimate, AuthType, DialogProvider, Fonts, FooterType, HISD3AvatarMenu, HISD3Button, HISD3FormAutoComplete, HISD3FormCascader, HISD3FormCheckbox, HISD3FormCheckboxGroup, HISD3FormColorPicker, HISD3FormDatePicker, HISD3FormField, HISD3FormInput, HISD3FormInputNumber, HISD3FormMentions, HISD3FormOTP, HISD3FormPassword, HISD3FormRadioGroup, HISD3FormRangePicker, HISD3FormRate, HISD3FormSearch, HISD3FormSegmented, HISD3FormSelect, HISD3FormSlider, HISD3FormSwitch, HISD3FormTextArea, HISD3FormTimePicker, HISD3FormTimeRangePicker, HISD3FormTransfer, HISD3FormTreeSelect, HISD3FormUpload, HISD3FormUploadDragger, HISD3HeaderActions, HISD3Input, HISD3LoginPage, HISD3NotificationButton, HISD3PageBody, HISD3PageHeader, HISD3Provider, HISD3SearchInput, HISD3Select, HISD3SelectLabel, HISD3Sidebar, HISD3Table, HISD3Tabs, HISD3Tag, HISD3_BORDER_PRESETS, HISD3_COLORS, HISD3_FONT_FAMILY, HISD3_FONT_WEIGHT_BODY, HISD3_FONT_WEIGHT_HEADING, HISD3_LAYOUT, HISD3_LOGO_SRC, HISD3_NEUTRALS, HISD3_PRESETS, HeaderIconButton, HeaderType, LayoutDirection, LayoutType, MenuStyle, MessageType, NavStyle, RoutePermittedRole, RouteTransition, ThemeMode, ThemeStyle, ThemeStyleRadius, UserMenu, borderVarsCss, createHisd3Theme, getInitials, hisd3AntdTheme, hisd3VarsCss, normalizeUploadFileList, resolvePrimary, shade, tint, useDialog, useInsideHISD3Provider };
+export type { DialogOwnProps, DialogProps, DialogResult, HISD3AutoCompleteRef, HISD3AvatarMenuProps, HISD3Borders, HISD3BreadcrumbItem, HISD3ButtonProps, HISD3ButtonVariant, HISD3CascaderRef, HISD3FormAutoCompleteProps, HISD3FormCascaderProps, HISD3FormCheckboxGroupProps, HISD3FormCheckboxProps, HISD3FormColorPickerProps, HISD3FormDatePickerProps, HISD3FormFieldBaseProps, HISD3FormFieldComponent, HISD3FormFieldProps, HISD3FormFieldShellProps, HISD3FormInputNumberProps, HISD3FormInputProps, HISD3FormMentionsProps, HISD3FormOTPProps, HISD3FormPasswordProps, HISD3FormRadioGroupProps, HISD3FormRangePickerProps, HISD3FormRateProps, HISD3FormSearchProps, HISD3FormSegmentedProps, HISD3FormSelectProps, HISD3FormSliderProps, HISD3FormSwitchProps, HISD3FormTextAreaProps, HISD3FormTimePickerProps, HISD3FormTimeRangePickerProps, HISD3FormTransferProps, HISD3FormTreeSelectProps, HISD3FormUploadProps, HISD3HeaderActionsProps, HISD3InputNumberRef, HISD3InputProps, HISD3LoginPageProps, HISD3LoginValues, HISD3MenuItem, HISD3Notification, HISD3NotificationButtonProps, HISD3OTPRef, HISD3PageHeaderProps, HISD3PickerRef, HISD3Preset, HISD3ProviderProps, HISD3RangePickerRef, HISD3RateRef, HISD3SearchInputProps, HISD3SelectLabelProps, HISD3SelectOption, HISD3SelectProps, HISD3SidebarProps, HISD3SkeletonInputProps, HISD3SliderRef, HISD3TabItem, HISD3TablePagination, HISD3TableProps, HISD3TabsProps, HISD3TagProps, HISD3TagTone, HISD3TagVariant, HISD3ThemeOptions, HISD3TimePickerRef, HISD3TimeRangePickerRef, HISD3TransferRef, HISD3TreeSelectRef, IUserEmployee, LoginSide, LoginVariant, StyledTheme, UserMenuProps };