@veevarts/design-system 2.0.0-alpha.57 → 2.0.0-alpha.58

package/dist/patterns/TimeField/TimeField.d.ts

@@ -0,0 +1,6 @@
+import { JSX } from 'react';
+import { TimeFieldProps } from './types';
+export declare function TimeField({ value: valueProp, defaultValue, onChange, label, 'aria-label': ariaLabel, placeholder, emptyContent, invalidMessage, minTime, minTimeMessage, listStart, listEnd, listStep, locale, isRequired, isDisabled, isInvalid, errorMessage, isClearable, clearLabel, onBlur, size, variant, labelPlacement, className, inputProps, popoverProps, 'data-testid': dataTestId, }: TimeFieldProps): JSX.Element;
+export declare namespace TimeField {
+    var displayName: string;
+}

package/dist/patterns/TimeField/index.d.ts

@@ -0,0 +1,3 @@
+export { TimeField } from './TimeField';
+export { parseTimeInput } from './time';
+export type { TimeFieldProps } from './types';

package/dist/patterns/TimeField/time.d.ts

@@ -0,0 +1,40 @@
+/**
+ * The time logic behind {@link TimeField}, kept free of React so it can be
+ * tested and reused on its own. Every time in and out is 24-hour `"HH:mm"`.
+ */
+/** Minutes since midnight of an `"HH:mm"` time. */
+export declare function toMinutes(time: string): number;
+/**
+ * Read typed text as a time: `"HH:mm"`, or `null` when it is not one.
+ *
+ * Forgiving on purpose: `"7:15 pm"`, `"7:15pm"`, `"715p"`, `"7p"`, `"19:15"`,
+ * `"1915"` and `"7"` all work; case, spaces and dots do not matter
+ * (`"7:15 P.M."`). Without am/pm, hours 1–6 read as afternoon (no venue opens
+ * at 3 AM) and every other hour as 24-hour: `"3"` is 15:00, `"7"` is 07:00,
+ * `"19"` is 19:00, `"0"` is midnight.
+ *
+ * @example
+ * parseTimeInput('715p'); // '19:15'
+ * parseTimeInput('3');    // '15:00'
+ * parseTimeInput('25');   // null
+ */
+export declare function parseTimeInput(input: string): string | null;
+/**
+ * The suggested times: `start` to `end` inclusive, every `step` whole
+ * minutes. Empty when `step` is under a minute or `end` is before `start`.
+ */
+export declare function buildTimeOptions(start: string, end: string, step: number): string[];
+/**
+ * Whether the list keeps `time` while `query` is typed. It compares against
+ * the 12-hour form (`"7:30"`) and the 24-hour forms (`"19:30"`, `"07:30"`), so
+ * it does not depend on how the label is formatted: `"7"` keeps 7:00 and
+ * 7:30 AM and PM, `"7p"` only the PM ones, `"19"` the 7 PM ones, `"p"` every
+ * PM time.
+ */
+export declare function matchesTimeQuery(time: string, query: string): boolean;
+/**
+ * The label for a time in `locale`: `"7:15 PM"` in `en-US`, `"19:15"` in
+ * `en-GB`, `"7:15 p. m."` in `es-CO`. No-break spaces become plain ones, so
+ * the label matches what people type and what tests search for.
+ */
+export declare function formatTimeLabel(time: string, locale: string): string;

package/dist/patterns/TimeField/types.d.ts

@@ -0,0 +1,77 @@
+import { FocusEvent, ReactNode } from 'react';
+import { AutocompleteProps } from '../../components';
+/** One row of the list: the `"HH:mm"` key and its locale label. */
+export interface TimeFieldOption {
+    key: string;
+    label: string;
+}
+export interface TimeFieldProps {
+    /**
+     * The time as 24-hour `"HH:mm"` text, or `null` for none. Omit for
+     * uncontrolled mode.
+     */
+    value?: string | null;
+    /** Starting time in uncontrolled mode. */
+    defaultValue?: string | null;
+    /** Called with the committed `"HH:mm"`, or `null` when a clearable field is emptied. */
+    onChange?: (time: string | null) => void;
+    /** Visible label. Without one, pass `aria-label`. */
+    label?: ReactNode;
+    'aria-label'?: string;
+    /** "e.g. 7:15 PM". */
+    placeholder?: string;
+    /**
+     * Shown in the list when nothing matches the typed text, or the text was
+     * erased ("Type a time like 7:15 PM"). Required and non-empty: HeroUI's
+     * own is English, and an Autocomplete that hides an empty list loses its
+     * options to `aria-hidden` when they come back.
+     */
+    emptyContent: ReactNode;
+    /** Shown when the typed text is not a time ("Enter a time like 7:15 PM."). */
+    invalidMessage: ReactNode;
+    /**
+     * Earliest allowed `"HH:mm"`. Earlier times leave the list, and typing
+     * one, or receiving one as `value`, shows `minTimeMessage`.
+     */
+    minTime?: string;
+    /** Shown for a time before `minTime` ("Ends after it starts."). Defaults to `invalidMessage`. */
+    minTimeMessage?: ReactNode;
+    /** First time the list suggests. @default '07:00' */
+    listStart?: string;
+    /** Last time the list suggests, inclusive. @default '21:00' */
+    listEnd?: string;
+    /** Minutes between suggested times. @default 30 */
+    listStep?: number;
+    /**
+     * BCP 47 locale the times are written in: "7:15 PM" in `en-US`, "19:15"
+     * in `en-GB`. Pass the same one as `HeroUIProvider`. @default 'en-US'
+     */
+    locale?: string;
+    isRequired?: boolean;
+    isDisabled?: boolean;
+    /** Marks the field invalid from outside; `errorMessage` is shown with it. */
+    isInvalid?: boolean;
+    errorMessage?: ReactNode;
+    /**
+     * Whether the field may be emptied: a clear button shows, and leaving it
+     * empty commits `null`. Otherwise leaving it empty restores the time it
+     * had. @default false
+     */
+    isClearable?: boolean;
+    /** Accessible name of the clear button ("Clear time"); HeroUI gives it none. */
+    clearLabel?: string;
+    /** Called after the field has committed what was typed (react-hook-form's `field.onBlur`). */
+    onBlur?: (e: FocusEvent<HTMLInputElement>) => void;
+    size?: AutocompleteProps['size'];
+    /** @default 'bordered' */
+    variant?: AutocompleteProps['variant'];
+    /** @default 'outside-top' */
+    labelPlacement?: AutocompleteProps['labelPlacement'];
+    className?: string;
+    /** Passed to HeroUI's input: `{ classNames: { inputWrapper: 'h-11' } }`. */
+    inputProps?: AutocompleteProps['inputProps'];
+    /** Passed to HeroUI's popover. */
+    popoverProps?: AutocompleteProps['popoverProps'];
+    /** Lands on the `<input>`. Options get `${data-testid}-option-${HH:mm}`. */
+    'data-testid'?: string;
+}

package/dist/patterns/index.d.ts

@@ -71,6 +71,8 @@ export { UnderlineTabs } from './UnderlineTabs';
 export type { UnderlineTabsProps, UnderlineTabItem, UnderlineTabsSize, UnderlineTabsLevel } from './UnderlineTabs';
 export { AdminFieldLabel, AdminTextField, adminFieldErrorClass, adminFieldHelpButtonClass, adminFieldHelpContentClass, adminFieldHelpIconClass, adminFieldHintClass, adminFieldLabelClass, adminFieldLabelNoAutoMarkClass, adminFieldLabelRowClass, adminFieldLabelSuffixClass, adminFieldRequiredClass, adminInputClass, adminInputReadOnlyClass, adminInputWrapperClass, } from './AdminTextField';
 export type { AdminTextFieldProps, AdminFieldLabelProps, AdminFieldRequiredProps, AdminFieldHelpProps, } from './AdminTextField';
+export { TimeField, parseTimeInput } from './TimeField';
+export type { TimeFieldProps } from './TimeField';
 export { RowActions } from './RowActions';
 export type { RowActionsProps, RowAction } from './RowActions';
 export { PickerRow } from './PickerRow';

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@veevarts/design-system",
     "private": false,
-    "version": "2.0.0-alpha.57",
+    "version": "2.0.0-alpha.58",
     "type": "module",
     "main": "dist/index.js",
     "module": "dist/index.js",