@dinofront/design_system 1.2.0 → 1.2.2

package/dist/components/Accordion/Accordion.types.d.ts

@@ -1,14 +1,14 @@
 import { HTMLAttributes, ReactNode } from 'react';
-import { BaseProps } from '../../types';
+import { BaseProps, OptionValue } from '../../types';
 export type AccordionType = 'single' | 'multiple';
-export interface AccordionProps extends HTMLAttributes<HTMLDivElement>, BaseProps {
+export interface AccordionProps extends Omit<HTMLAttributes<HTMLDivElement>, 'defaultValue'>, BaseProps {
     /** `'single'` keeps at most one item open at a time; `'multiple'` allows any number. */
     type?: AccordionType;
-    /** Uncontrolled initial open value(s) — a single string for `'single'`, an array for `'multiple'`. */
-    defaultValue?: string | string[];
+    /** Uncontrolled initial open value(s) — a single value for `'single'`, an array for `'multiple'`. */
+    defaultValue?: OptionValue | OptionValue[];
     /** Controlled open value(s). Pass alongside `onValueChange` to fully control which item(s) are open. */
-    value?: string | string[];
-    onValueChange?: (value: string | string[]) => void;
+    value?: OptionValue | OptionValue[];
+    onValueChange?: (value: OptionValue | OptionValue[] | undefined) => void;
     /** Animates each panel open/closed. Set `false` for the pre-1.x instant toggle (also restores the plain `hidden` attribute instead of the animated grid wrapper). */
     animated?: boolean;
     /** Renders a Divider between each item's header and its panel content. */
@@ -17,7 +17,7 @@ export interface AccordionProps extends HTMLAttributes<HTMLDivElement>, BaseProp
 }
 export interface AccordionItemProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'>, BaseProps {
     /** Unique identifier used to track open/closed state within the parent `Accordion`. */
-    value: string;
+    value: OptionValue;
     title: ReactNode;
     icon?: ReactNode;
     disabled?: boolean;

package/dist/components/DatePicker/DatePicker.types.d.ts

@@ -18,6 +18,18 @@ export interface DatePickerProps extends BaseProps {
     /** Fill the parent's width (like Input/Select) instead of the intrinsic
      *  min-width. Use inside form grids so dates line up with other fields. */
     fullWidth?: boolean;
+    /** Disable the trigger entirely — blocks both mouse and keyboard activation. */
+    disabled?: boolean;
+    /** Earliest selectable day, inclusive. Earlier days render disabled. Time-of-day is ignored. */
+    minDate?: Date;
+    /** Latest selectable day, inclusive. Later days render disabled. Time-of-day is ignored. */
+    maxDate?: Date;
+    /** Individual days that can't be picked. Matched by calendar day; time-of-day is ignored. */
+    excludeDates?: Date[];
+    /** Switch the trigger to the danger border/ring styles. */
+    error?: boolean;
+    /** Message rendered below the control; also switches the trigger to the danger styles. */
+    errorText?: ReactNode;
     id?: string;
     className?: string;
     wrapperClassName?: string;

package/dist/components/FormField/FormField.types.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes, ReactElement } from 'react';
-import { RefCallBack } from 'react-hook-form';
+import { RefCallBack, SetValueConfig } from 'react-hook-form';
 import { BaseProps } from '../../types';
 /** Deliberately untyped `value`/`onChange`: this render prop feeds whichever
  *  input the consumer wires up (native `value`, Select's `string`, Checkbox's
@@ -13,6 +13,13 @@ export interface FormFieldRenderProps {
     error: boolean;
     errorText?: string;
     dataTestId?: string;
+    /** Imperatively set this field's value, pre-bound to this FormField's
+     *  `name` — for a component whose own change contract doesn't fit RHF's
+     *  field bindings. Defaults `shouldValidate`/`shouldDirty`/`shouldTouch`
+     *  to `true`, overridable via `options`. */
+    setFieldValue: (value: unknown, options?: SetValueConfig) => void;
+    /** True once the field has been touched, changed from its default value, and currently passes validation. */
+    isValid: boolean;
 }
 export interface FormFieldProps extends Omit<HTMLAttributes<HTMLDivElement>, 'defaultValue'>, BaseProps {
     name: string;

package/dist/components/MultiSelect/MultiSelect.types.d.ts

@@ -1,8 +1,8 @@
 import { ReactNode } from 'react';
-import { BaseProps } from '../../types';
+import { BaseProps, OptionValue } from '../../types';
 export type MultiSelectSize = 'sm' | 'md' | 'lg';
 export interface MultiSelectOption {
-    value: string;
+    value: OptionValue;
     label: string;
     /** Optional second line under the label in the dropdown. */
     description?: string;
@@ -16,12 +16,12 @@ export interface MultiSelectOption {
 export interface MultiSelectProps extends BaseProps {
     options: MultiSelectOption[];
     /** Selected option values (controlled). */
-    value: string[];
-    onChange: (values: string[]) => void;
+    value: OptionValue[];
+    onChange: (values: OptionValue[]) => void;
     /** Called with the option that was just added, alongside `onChange` (never instead of it). */
     onAdd?: (option: MultiSelectOption) => void;
     /** Called with the value that was just removed, alongside `onChange` (never instead of it). */
-    onRemove?: (value: string) => void;
+    onRemove?: (value: OptionValue) => void;
     size?: MultiSelectSize;
     placeholder?: string;
     /** Placeholder once at least one chip exists. Defaults to "Add another…". */
@@ -35,7 +35,7 @@ export interface MultiSelectProps extends BaseProps {
     errorText?: ReactNode;
     required?: boolean;
     /** Values whose chips can't be removed. */
-    lockedValues?: string[];
+    lockedValues?: OptionValue[];
     /** Cap on how many can be selected (default: unlimited). */
     max?: number;
     /** Renders an Avatar on every chip and dropdown row, falling back to initials derived from the option's `label` when it has no `avatarSrc`. Default `false` — avatars still render for options that already set `avatarSrc` regardless. */
@@ -49,4 +49,6 @@ export interface MultiSelectProps extends BaseProps {
     id?: string;
     className?: string;
     wrapperClassName?: string;
+    isLoading?: boolean;
+    language?: string;
 }

package/dist/components/Radio/Radio.types.d.ts

@@ -1,19 +1,27 @@
 import { ChangeEvent, InputHTMLAttributes, ReactNode } from 'react';
-import { BaseProps } from '../../types';
+import { BaseProps, OptionValue } from '../../types';
 export type RadioSize = 'md' | 'sm';
+/**
+ * A Radio's identity — commonly a string, but numbers and booleans (for
+ * yes/no groups) are supported too. Note: like `OptionValue`, values are
+ * compared via `String(...)`, so `true` and `'true'` (or `1` and `'1'`) are
+ * treated as the same option — don't mix representations within one group.
+ */
+export type RadioValue = OptionValue | boolean;
 export interface RadioGroupProps extends BaseProps {
     name?: string;
-    value?: string;
-    defaultValue?: string;
-    onChange?: (value: string) => void;
+    label?: ReactNode;
+    value?: RadioValue;
+    defaultValue?: RadioValue;
+    onChange?: (value: RadioValue) => void;
     disabled?: boolean;
     size?: RadioSize;
     orientation?: 'horizontal' | 'vertical';
     children: ReactNode;
     className?: string;
 }
-export interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type' | 'name' | 'onChange'>, BaseProps {
-    value: string;
+export interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type' | 'name' | 'onChange' | 'value'>, BaseProps {
+    value: RadioValue;
     size?: RadioSize;
     label?: ReactNode;
     description?: ReactNode;

package/dist/components/Radio/index.d.ts

@@ -1,2 +1,2 @@
 export { Radio, RadioGroup } from './Radio';
-export type { RadioProps, RadioGroupProps, RadioSize } from './Radio.types';
+export type { RadioGroupProps, RadioProps, RadioSize, RadioValue } from './Radio.types';

package/dist/components/Select/Select.types.d.ts

@@ -1,16 +1,23 @@
 import { ReactNode } from 'react';
-import { BaseProps } from '../../types';
+import { BaseProps, OptionValue } from '../../types';
 export type SelectSize = 'lg' | 'md' | 'sm';
 export interface SelectOption {
-    value: string;
+    value: OptionValue;
     label: ReactNode;
     disabled?: boolean;
+    /** Group heading this option belongs under. Options sharing a group MUST be
+     *  contiguous in the `options` array — the heading is emitted whenever this
+     *  value changes between consecutive options, so a non-contiguous group
+     *  renders its heading more than once. */
+    group?: string;
+    /** Text used for `searchable` matching when `label` isn't a plain string. */
+    searchText?: string;
 }
 export interface SelectProps extends BaseProps {
     options: SelectOption[];
-    value?: string;
-    defaultValue?: string;
-    onChange?: (value: string) => void;
+    value?: OptionValue;
+    defaultValue?: OptionValue;
+    onChange?: (value: OptionValue) => void;
     placeholder?: string;
     label?: ReactNode;
     /** Content rendered on the label row, right of the label text — e.g. an info tooltip trigger. Rendered as a sibling of the `<label>`, not a child, so an interactive addon never steals focus into the trigger. */
@@ -20,6 +27,16 @@ export interface SelectProps extends BaseProps {
     error?: boolean;
     size?: SelectSize;
     disabled?: boolean;
+    /** Renders a red asterisk next to the label and sets `aria-required` on the trigger. */
+    required?: boolean;
+    /** Shows a spinner in place of the chevron and blocks opening the list. Does not set the native `disabled` attribute. */
+    loading?: boolean;
+    /** Renders a text filter pinned above the open list. */
+    searchable?: boolean;
+    /** Placeholder for the `searchable` filter input. Defaults to `'Search…'`. */
+    searchPlaceholder?: string;
+    /** Shown in place of the list when the filter matches nothing. Defaults to `'No results'`. */
+    emptyText?: string;
     id?: string;
     className?: string;
     wrapperClassName?: string;

package/dist/components/Tabs/Tabs.types.d.ts

@@ -1,14 +1,14 @@
 import { ButtonHTMLAttributes, HTMLAttributes, ReactNode } from 'react';
-import { BaseProps } from '../../types';
+import { BaseProps, OptionValue } from '../../types';
 import { BadgeProps } from '../Badge';
 export type TabsVariant = 'underline' | 'pills' | 'boxed';
 export type TabsSize = 'lg' | 'md' | 'sm';
 export interface TabsProps extends HTMLAttributes<HTMLDivElement>, BaseProps {
     /** Uncontrolled initial active tab value. Falls back to the first `<Tab>`'s value if omitted. */
-    defaultValue?: string;
+    defaultValue?: OptionValue;
     /** Controlled active tab value. Pass alongside `onValueChange` to fully control which tab is active. */
-    value?: string;
-    onValueChange?: (value: string) => void;
+    value?: OptionValue;
+    onValueChange?: (value: OptionValue) => void;
     variant?: TabsVariant;
     size?: TabsSize;
     /** Disables every tab in the bar at once. OR'd with each `Tab`'s own `disabled`. */
@@ -20,7 +20,7 @@ export interface TabListProps extends HTMLAttributes<HTMLDivElement>, BaseProps
 }
 export interface TabProps extends ButtonHTMLAttributes<HTMLButtonElement>, BaseProps {
     /** Unique identifier matched against the parent `Tabs`'s active value. */
-    value: string;
+    value: OptionValue;
     icon?: ReactNode;
     /** Count/indicator rendered after the label. Hidden when `undefined`, `null`, or `false`. */
     badge?: ReactNode;
@@ -29,13 +29,13 @@ export interface TabProps extends ButtonHTMLAttributes<HTMLButtonElement>, BaseP
     /** Trailing icon rendered as its own button — e.g. a close-tab X. Rendered as a sibling of the tab button, not a nested one (nesting a button inside a button is invalid HTML). */
     rightIcon?: ReactNode;
     /** Called with this tab's `value` when `rightIcon` is clicked. Does not activate the tab. */
-    onRightIconClick?: (value: string) => void;
+    onRightIconClick?: (value: OptionValue) => void;
     /** Accessible name for the `rightIcon` button. Required when `rightIcon` is set. */
     rightIconLabel?: string;
 }
 export interface TabPanelProps extends HTMLAttributes<HTMLDivElement>, BaseProps {
     /** Matched against the parent `Tabs`'s active value; hidden (or unmounted, depending on `keepMounted`) when not active. */
-    value: string;
+    value: OptionValue;
     /** Keeps the panel mounted (hidden via the `hidden` attribute) while inactive, instead of unmounting it — preserves scroll position and in-panel state across tab switches. */
     keepMounted?: boolean;
 }

package/dist/components/Upload/Upload.types.d.ts

@@ -6,7 +6,7 @@ export interface UploadRejection {
     file: File;
     reason: UploadRejectionReason;
 }
-export interface UploadProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onClick' | 'onDrop' | 'onDragEnter' | 'onDragOver' | 'onDragLeave' | 'onKeyDown' | 'role' | 'tabIndex' | 'aria-disabled'>, BaseProps {
+export interface UploadProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onClick' | 'onDrop' | 'onDragEnter' | 'onDragOver' | 'onDragLeave' | 'onKeyDown' | 'role' | 'tabIndex' | 'aria-disabled' | 'aria-invalid'>, BaseProps {
     /** Forwarded to the hidden native `<input type="file">`, e.g. `"image/png,image/jpeg"`. */
     accept?: string;
     multiple?: boolean;
@@ -35,6 +35,10 @@ export interface UploadProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onCli
     triggerIcon?: ReactNode;
     label?: ReactNode;
     required?: boolean;
+    /** Switches the dropzone (or, in `button`/`icon` mode, just the message below) to the danger styles. */
+    error?: boolean;
+    /** Message rendered below the control; also switches dropzone mode to the danger styles. */
+    errorText?: ReactNode;
     /** Content rendered on the label row, right of the label text and required marker — e.g. an info tooltip trigger. */
     labelAddons?: ReactNode;
 }

package/dist/hooks/useOnOutsideClick.d.ts

@@ -1,6 +1 @@
-import { RefObject } from 'react';
-/** Fires `handler` on any `mousedown`/`touchstart` outside `ref.current`.
- *  No effect while `ref.current` is null or `enabled` is false — callers
- *  don't need to guard call sites where the ref isn't attached yet (e.g.
- *  before a portal mounts). */
-export declare function useOnOutsideClick(ref: RefObject<HTMLElement | null> | null | undefined, handler: (event: MouseEvent | TouchEvent) => void, enabled?: boolean): void;
+export declare const useOnOutsideClick: (ref: HTMLElement | null, callback: (event: MouseEvent) => void, state: boolean, uid: string, shouldRemoveCallback?: boolean) => void;

package/dist/index.d.ts

@@ -51,3 +51,4 @@ export { cn } from './lib/cn';
 export * from './hooks';
 export * from './tokens';
 export * from './types';
+export { useFieldArray } from 'react-hook-form';