@dragunio/fe-libs 0.1.1 → 0.1.2

package/README.md

@@ -9,7 +9,12 @@ src/                 # Public library entrypoints and styles
 packages/            # Internal component source folders
 ├── icons/
 ├── button/
-└── table/
+├── table/
+├── toggle/
+├── drawer/
+├── form-controls/
+├── tooltip/
+└── expandable-section/
 apps/playground/     # Local component storybook
 ```
 
@@ -37,6 +42,13 @@ Available review routes:
 - `http://127.0.0.1:5173/#/icons` — SVG Icons
 - `http://127.0.0.1:5173/#/button` — Button
 - `http://127.0.0.1:5173/#/table` — Table
+- `http://127.0.0.1:5173/#/drawer` — Drawer
+- `http://127.0.0.1:5173/#/selection` — Selection
+- `http://127.0.0.1:5173/#/datetime` — DateTimePicker
+- `http://127.0.0.1:5173/#/currency` — CurrencyInput
+- `http://127.0.0.1:5173/#/number` — NumberInput
+- `http://127.0.0.1:5173/#/tooltip` — Tooltip
+- `http://127.0.0.1:5173/#/expandable` — ExpandableSection
 
 To test the playground against generated package output instead of source aliases:
 
@@ -57,10 +69,23 @@ pnpm add @dragunio/fe-libs
 ```
 
 ```tsx
-import { Button, PlusIcon, Table } from '@dragunio/fe-libs';
+import { Button, PlusIcon, Table, Toggle, Selection, DateTimePicker } from '@dragunio/fe-libs';
 import '@dragunio/fe-libs/styles.css';
 ```
 
+### Toggle
+
+`Toggle` is a native checkbox styled as a switch. It supports controlled and uncontrolled usage, including the standard `onChange`, `onClick`, and `disabled` props. The active color is green by default and accepts any CSS color.
+
+```tsx
+<Toggle
+  checked={enabled}
+  onChange={(event) => setEnabled(event.target.checked)}
+  color="#16a34a"
+  aria-label="Enable notifications"
+/>
+```
+
 ### Resizable data table
 
 Pass `headers` and `data` to have `Table` derive the maximum column count and an initial width for each column. The resize callback emits pixel widths, ready to persist in user preferences.
@@ -84,3 +109,12 @@ const [columnSizes, setColumnSizes] = useState<number[]>();
 Use `minColumnWidth` to change the minimum resize limit. The header resize handles support pointer dragging and left/right arrow keys.
 
 The library exposes ESM, CommonJS, TypeScript declarations, and keeps React as a peer dependency.
+
+### New form and overlay primitives
+
+- `Drawer` is a portal-based modal panel with `left`, `right`, `top`, and `bottom` slide-in animations. Use `fullScreen` for a full-viewport panel and `footer` for fixed actions below the scrollable body.
+- `Selection` is a rounded custom dropdown inspired by DropdownCustom, with single/multiple modes, optional search, clear action, tags, form-field values, and keyboard navigation.
+- `DateTimePicker` supports `mode="single"` and `mode="range"`; its default format is `dd/MM/yyyy HH:mm`.
+- `NumberInput` and `CurrencyInput` format values immediately while typing (`1000` → `1,000`) and keep up to two fractional digits by default. Use `allowDecimal`, `decimals`, `min`, and `max` to control decimal input and numeric limits. `CurrencyInput` adds a `VND` suffix by default, or a currency dropdown through `currencies`.
+- `Tooltip` shows accessible content on hover and focus.
+- `ExpandableSection` provides controlled and uncontrolled expand/collapse behavior.

package/dist/index.d.mts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { ButtonHTMLAttributes, ReactNode, SVGProps, TableHTMLAttributes, HTMLAttributes } from 'react';
+import { ButtonHTMLAttributes, ReactNode, SVGProps, TableHTMLAttributes, HTMLAttributes, InputHTMLAttributes, KeyboardEventHandler, ReactElement } from 'react';
 
 type ButtonHierarchy = 'primary' | 'secondary-gray' | 'secondary-color' | 'tertiary-gray' | 'tertiary-color';
 type ButtonSize = '24' | '32' | '40';
@@ -81,4 +81,172 @@ declare function TableCell({ children, ...props }: HTMLAttributes<HTMLTableCellE
 declare function TableHeader({ children, ...props }: HTMLAttributes<HTMLTableCellElement>): react.JSX.Element;
 declare function TableCaption(props: HTMLAttributes<HTMLTableCaptionElement>): react.JSX.Element;
 
-export { Button, type ButtonColor, type ButtonHierarchy, type ButtonProps, type ButtonSize, type ButtonVariant, ChevronDownIcon, CloseIcon, type ColumnResizeHandler, type IconProps, PlusIcon, SearchIcon, Table, TableBody, TableCaption, TableCell, type TableData, TableHead, TableHeader, type TableProps, TableRow, getIconSize };
+type ToggleProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'color' | 'type'> & {
+    /** Active track color. Accepts any valid CSS color, for example `#16a34a`. */
+    color?: string;
+    /** Optional text displayed next to the switch. */
+    label?: ReactNode;
+};
+declare const Toggle: react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "color" | "type"> & {
+    /** Active track color. Accepts any valid CSS color, for example `#16a34a`. */
+    color?: string;
+    /** Optional text displayed next to the switch. */
+    label?: ReactNode;
+} & react.RefAttributes<HTMLInputElement>>;
+
+type DrawerProps = Omit<HTMLAttributes<HTMLElement>, 'title'> & {
+    open: boolean;
+    onClose: () => void;
+    title?: ReactNode;
+    /** Optional content pinned below the scrollable body. */
+    footer?: ReactNode;
+    side?: 'left' | 'right' | 'top' | 'bottom';
+    /** Width of a left/right drawer. Defaults to 400px. */
+    width?: number | string;
+    /** Makes the panel fill the entire viewport while retaining the chosen entrance direction. */
+    fullScreen?: boolean;
+    children?: ReactNode;
+    closeOnBackdropClick?: boolean;
+};
+/** A modal panel with fixed header/footer regions and a scrollable body. */
+declare function Drawer({ open, onClose, title, footer, side, width, fullScreen, children, closeOnBackdropClick, className, style, ...props }: DrawerProps): react.ReactPortal | null;
+
+type SelectionOption = {
+    label: ReactNode;
+    value: string | number;
+    disabled?: boolean;
+    searchText?: string;
+};
+type SelectionValue = string | number | Array<string | number>;
+type SelectionProps = Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue' | 'value' | 'onKeyDown'> & {
+    label?: ReactNode;
+    helperText?: ReactNode;
+    error?: boolean;
+    options: SelectionOption[];
+    placeholder?: string;
+    size?: 'small' | 'medium';
+    value?: SelectionValue;
+    defaultValue?: SelectionValue;
+    onChange?: (value: SelectionValue, selected: SelectionOption | SelectionOption[] | undefined) => void;
+    multiple?: boolean;
+    searchable?: boolean;
+    tag?: boolean;
+    clearable?: boolean;
+    disabled?: boolean;
+    name?: string;
+    onKeyDown?: KeyboardEventHandler<HTMLButtonElement>;
+};
+/** A rounded, searchable custom dropdown with single, multiple, and tag modes. */
+declare const Selection: react.ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "value" | "defaultValue" | "onChange" | "onKeyDown"> & {
+    label?: ReactNode;
+    helperText?: ReactNode;
+    error?: boolean;
+    options: SelectionOption[];
+    placeholder?: string;
+    size?: "small" | "medium";
+    value?: SelectionValue;
+    defaultValue?: SelectionValue;
+    onChange?: (value: SelectionValue, selected: SelectionOption | SelectionOption[] | undefined) => void;
+    multiple?: boolean;
+    searchable?: boolean;
+    tag?: boolean;
+    clearable?: boolean;
+    disabled?: boolean;
+    name?: string;
+    onKeyDown?: KeyboardEventHandler<HTMLButtonElement>;
+} & react.RefAttributes<HTMLDivElement>>;
+type NumberInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'value' | 'defaultValue' | 'onChange' | 'min' | 'max'> & {
+    value?: number | null;
+    defaultValue?: number | null;
+    onValueChange?: (value: number | null) => void;
+    /** Allows the decimal separator and fractional digits. Defaults to true. */
+    allowDecimal?: boolean;
+    /** Maximum number of fractional digits when allowDecimal is enabled. Defaults to 2. */
+    decimals?: number;
+    /** Numeric limits applied immediately as the value changes. */
+    min?: number;
+    max?: number;
+    decimalSeparator?: string;
+    thousandSeparator?: string;
+    label?: ReactNode;
+    helperText?: ReactNode;
+    error?: boolean;
+};
+declare function formatNumber(value: number, decimals?: number, thousandSeparator?: string, decimalSeparator?: string): string;
+/** A text input that displays numbers as 1,000.05 by default. */
+declare const NumberInput: react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "value" | "defaultValue" | "onChange" | "max" | "min"> & {
+    value?: number | null;
+    defaultValue?: number | null;
+    onValueChange?: (value: number | null) => void;
+    /** Allows the decimal separator and fractional digits. Defaults to true. */
+    allowDecimal?: boolean;
+    /** Maximum number of fractional digits when allowDecimal is enabled. Defaults to 2. */
+    decimals?: number;
+    /** Numeric limits applied immediately as the value changes. */
+    min?: number;
+    max?: number;
+    decimalSeparator?: string;
+    thousandSeparator?: string;
+    label?: ReactNode;
+    helperText?: ReactNode;
+    error?: boolean;
+} & react.RefAttributes<HTMLInputElement>>;
+type Currency = {
+    code: string;
+    label?: string;
+    suffix?: string;
+};
+type CurrencyInputProps = Omit<NumberInputProps, 'suffix'> & {
+    suffix?: ReactNode;
+    currencies?: Currency[];
+    currency?: string;
+    defaultCurrency?: string;
+    onCurrencyChange?: (currency: Currency) => void;
+};
+/** NumberInput with an optional currency suffix or currency list dropdown. */
+declare function CurrencyInput({ suffix, currencies, currency, defaultCurrency, onCurrencyChange, className, ...props }: CurrencyInputProps): react.JSX.Element;
+type DateRange = [Date | null, Date | null];
+type DateTimeBaseProps = Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> & {
+    label?: ReactNode;
+    format?: string;
+    disabled?: boolean;
+    placeholder?: string;
+    locale?: string;
+};
+type DateTimePickerSingleProps = DateTimeBaseProps & {
+    mode?: 'single';
+    value?: Date | null;
+    defaultValue?: Date | null;
+    onChange?: (value: Date | null) => void;
+};
+type DateTimePickerRangeProps = DateTimeBaseProps & {
+    mode: 'range';
+    value?: DateRange;
+    defaultValue?: DateRange;
+    onChange?: (value: DateRange) => void;
+};
+type DateTimePickerProps = DateTimePickerSingleProps | DateTimePickerRangeProps;
+/** Calendar and time picker. Supports a single Date or [start, end] range. */
+declare function DateTimePicker(props: DateTimePickerProps): react.JSX.Element;
+
+type TooltipProps = Omit<HTMLAttributes<HTMLSpanElement>, 'content'> & {
+    content: ReactNode;
+    children: ReactElement;
+    placement?: 'top' | 'bottom' | 'left' | 'right';
+    disabled?: boolean;
+};
+/** Accessible hover/focus tooltip. The child must accept focus and mouse event props. */
+declare function Tooltip({ content, children, placement, disabled, className, ...props }: TooltipProps): react.JSX.Element;
+
+type ExpandableSectionProps = Omit<HTMLAttributes<HTMLDivElement>, 'title'> & {
+    title: ReactNode;
+    children: ReactNode;
+    expanded?: boolean;
+    defaultExpanded?: boolean;
+    onExpandedChange?: (expanded: boolean) => void;
+    disabled?: boolean;
+};
+/** An outlined section that can be expanded or collapsed. */
+declare function ExpandableSection({ title, children, expanded, defaultExpanded, onExpandedChange, disabled, className, ...props }: ExpandableSectionProps): react.JSX.Element;
+
+export { Button, type ButtonColor, type ButtonHierarchy, type ButtonProps, type ButtonSize, type ButtonVariant, ChevronDownIcon, CloseIcon, type ColumnResizeHandler, type Currency, CurrencyInput, type CurrencyInputProps, type DateRange, DateTimePicker, type DateTimePickerProps, type DateTimePickerRangeProps, type DateTimePickerSingleProps, Drawer, type DrawerProps, ExpandableSection, type ExpandableSectionProps, type IconProps, NumberInput, type NumberInputProps, PlusIcon, SearchIcon, Selection, type SelectionOption, type SelectionProps, type SelectionValue, Table, TableBody, TableCaption, TableCell, type TableData, TableHead, TableHeader, type TableProps, TableRow, Toggle, type ToggleProps, Tooltip, type TooltipProps, formatNumber, getIconSize };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { ButtonHTMLAttributes, ReactNode, SVGProps, TableHTMLAttributes, HTMLAttributes } from 'react';
+import { ButtonHTMLAttributes, ReactNode, SVGProps, TableHTMLAttributes, HTMLAttributes, InputHTMLAttributes, KeyboardEventHandler, ReactElement } from 'react';
 
 type ButtonHierarchy = 'primary' | 'secondary-gray' | 'secondary-color' | 'tertiary-gray' | 'tertiary-color';
 type ButtonSize = '24' | '32' | '40';
@@ -81,4 +81,172 @@ declare function TableCell({ children, ...props }: HTMLAttributes<HTMLTableCellE
 declare function TableHeader({ children, ...props }: HTMLAttributes<HTMLTableCellElement>): react.JSX.Element;
 declare function TableCaption(props: HTMLAttributes<HTMLTableCaptionElement>): react.JSX.Element;
 
-export { Button, type ButtonColor, type ButtonHierarchy, type ButtonProps, type ButtonSize, type ButtonVariant, ChevronDownIcon, CloseIcon, type ColumnResizeHandler, type IconProps, PlusIcon, SearchIcon, Table, TableBody, TableCaption, TableCell, type TableData, TableHead, TableHeader, type TableProps, TableRow, getIconSize };
+type ToggleProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'color' | 'type'> & {
+    /** Active track color. Accepts any valid CSS color, for example `#16a34a`. */
+    color?: string;
+    /** Optional text displayed next to the switch. */
+    label?: ReactNode;
+};
+declare const Toggle: react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "color" | "type"> & {
+    /** Active track color. Accepts any valid CSS color, for example `#16a34a`. */
+    color?: string;
+    /** Optional text displayed next to the switch. */
+    label?: ReactNode;
+} & react.RefAttributes<HTMLInputElement>>;
+
+type DrawerProps = Omit<HTMLAttributes<HTMLElement>, 'title'> & {
+    open: boolean;
+    onClose: () => void;
+    title?: ReactNode;
+    /** Optional content pinned below the scrollable body. */
+    footer?: ReactNode;
+    side?: 'left' | 'right' | 'top' | 'bottom';
+    /** Width of a left/right drawer. Defaults to 400px. */
+    width?: number | string;
+    /** Makes the panel fill the entire viewport while retaining the chosen entrance direction. */
+    fullScreen?: boolean;
+    children?: ReactNode;
+    closeOnBackdropClick?: boolean;
+};
+/** A modal panel with fixed header/footer regions and a scrollable body. */
+declare function Drawer({ open, onClose, title, footer, side, width, fullScreen, children, closeOnBackdropClick, className, style, ...props }: DrawerProps): react.ReactPortal | null;
+
+type SelectionOption = {
+    label: ReactNode;
+    value: string | number;
+    disabled?: boolean;
+    searchText?: string;
+};
+type SelectionValue = string | number | Array<string | number>;
+type SelectionProps = Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue' | 'value' | 'onKeyDown'> & {
+    label?: ReactNode;
+    helperText?: ReactNode;
+    error?: boolean;
+    options: SelectionOption[];
+    placeholder?: string;
+    size?: 'small' | 'medium';
+    value?: SelectionValue;
+    defaultValue?: SelectionValue;
+    onChange?: (value: SelectionValue, selected: SelectionOption | SelectionOption[] | undefined) => void;
+    multiple?: boolean;
+    searchable?: boolean;
+    tag?: boolean;
+    clearable?: boolean;
+    disabled?: boolean;
+    name?: string;
+    onKeyDown?: KeyboardEventHandler<HTMLButtonElement>;
+};
+/** A rounded, searchable custom dropdown with single, multiple, and tag modes. */
+declare const Selection: react.ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "value" | "defaultValue" | "onChange" | "onKeyDown"> & {
+    label?: ReactNode;
+    helperText?: ReactNode;
+    error?: boolean;
+    options: SelectionOption[];
+    placeholder?: string;
+    size?: "small" | "medium";
+    value?: SelectionValue;
+    defaultValue?: SelectionValue;
+    onChange?: (value: SelectionValue, selected: SelectionOption | SelectionOption[] | undefined) => void;
+    multiple?: boolean;
+    searchable?: boolean;
+    tag?: boolean;
+    clearable?: boolean;
+    disabled?: boolean;
+    name?: string;
+    onKeyDown?: KeyboardEventHandler<HTMLButtonElement>;
+} & react.RefAttributes<HTMLDivElement>>;
+type NumberInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'value' | 'defaultValue' | 'onChange' | 'min' | 'max'> & {
+    value?: number | null;
+    defaultValue?: number | null;
+    onValueChange?: (value: number | null) => void;
+    /** Allows the decimal separator and fractional digits. Defaults to true. */
+    allowDecimal?: boolean;
+    /** Maximum number of fractional digits when allowDecimal is enabled. Defaults to 2. */
+    decimals?: number;
+    /** Numeric limits applied immediately as the value changes. */
+    min?: number;
+    max?: number;
+    decimalSeparator?: string;
+    thousandSeparator?: string;
+    label?: ReactNode;
+    helperText?: ReactNode;
+    error?: boolean;
+};
+declare function formatNumber(value: number, decimals?: number, thousandSeparator?: string, decimalSeparator?: string): string;
+/** A text input that displays numbers as 1,000.05 by default. */
+declare const NumberInput: react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "value" | "defaultValue" | "onChange" | "max" | "min"> & {
+    value?: number | null;
+    defaultValue?: number | null;
+    onValueChange?: (value: number | null) => void;
+    /** Allows the decimal separator and fractional digits. Defaults to true. */
+    allowDecimal?: boolean;
+    /** Maximum number of fractional digits when allowDecimal is enabled. Defaults to 2. */
+    decimals?: number;
+    /** Numeric limits applied immediately as the value changes. */
+    min?: number;
+    max?: number;
+    decimalSeparator?: string;
+    thousandSeparator?: string;
+    label?: ReactNode;
+    helperText?: ReactNode;
+    error?: boolean;
+} & react.RefAttributes<HTMLInputElement>>;
+type Currency = {
+    code: string;
+    label?: string;
+    suffix?: string;
+};
+type CurrencyInputProps = Omit<NumberInputProps, 'suffix'> & {
+    suffix?: ReactNode;
+    currencies?: Currency[];
+    currency?: string;
+    defaultCurrency?: string;
+    onCurrencyChange?: (currency: Currency) => void;
+};
+/** NumberInput with an optional currency suffix or currency list dropdown. */
+declare function CurrencyInput({ suffix, currencies, currency, defaultCurrency, onCurrencyChange, className, ...props }: CurrencyInputProps): react.JSX.Element;
+type DateRange = [Date | null, Date | null];
+type DateTimeBaseProps = Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> & {
+    label?: ReactNode;
+    format?: string;
+    disabled?: boolean;
+    placeholder?: string;
+    locale?: string;
+};
+type DateTimePickerSingleProps = DateTimeBaseProps & {
+    mode?: 'single';
+    value?: Date | null;
+    defaultValue?: Date | null;
+    onChange?: (value: Date | null) => void;
+};
+type DateTimePickerRangeProps = DateTimeBaseProps & {
+    mode: 'range';
+    value?: DateRange;
+    defaultValue?: DateRange;
+    onChange?: (value: DateRange) => void;
+};
+type DateTimePickerProps = DateTimePickerSingleProps | DateTimePickerRangeProps;
+/** Calendar and time picker. Supports a single Date or [start, end] range. */
+declare function DateTimePicker(props: DateTimePickerProps): react.JSX.Element;
+
+type TooltipProps = Omit<HTMLAttributes<HTMLSpanElement>, 'content'> & {
+    content: ReactNode;
+    children: ReactElement;
+    placement?: 'top' | 'bottom' | 'left' | 'right';
+    disabled?: boolean;
+};
+/** Accessible hover/focus tooltip. The child must accept focus and mouse event props. */
+declare function Tooltip({ content, children, placement, disabled, className, ...props }: TooltipProps): react.JSX.Element;
+
+type ExpandableSectionProps = Omit<HTMLAttributes<HTMLDivElement>, 'title'> & {
+    title: ReactNode;
+    children: ReactNode;
+    expanded?: boolean;
+    defaultExpanded?: boolean;
+    onExpandedChange?: (expanded: boolean) => void;
+    disabled?: boolean;
+};
+/** An outlined section that can be expanded or collapsed. */
+declare function ExpandableSection({ title, children, expanded, defaultExpanded, onExpandedChange, disabled, className, ...props }: ExpandableSectionProps): react.JSX.Element;
+
+export { Button, type ButtonColor, type ButtonHierarchy, type ButtonProps, type ButtonSize, type ButtonVariant, ChevronDownIcon, CloseIcon, type ColumnResizeHandler, type Currency, CurrencyInput, type CurrencyInputProps, type DateRange, DateTimePicker, type DateTimePickerProps, type DateTimePickerRangeProps, type DateTimePickerSingleProps, Drawer, type DrawerProps, ExpandableSection, type ExpandableSectionProps, type IconProps, NumberInput, type NumberInputProps, PlusIcon, SearchIcon, Selection, type SelectionOption, type SelectionProps, type SelectionValue, Table, TableBody, TableCaption, TableCell, type TableData, TableHead, TableHeader, type TableProps, TableRow, Toggle, type ToggleProps, Tooltip, type TooltipProps, formatNumber, getIconSize };