@onehaul/ui 0.1.152 → 0.1.153

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

@@ -0,0 +1,120 @@
+import React from 'react';
+
+type Breakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+
+interface ColSize {
+    /**
+     * Raster number of cells to occupy, 0 corresponds to display: none
+     */
+    span?: number;
+
+    /**
+     * Raster order
+     */
+    order?: number;
+
+    /**
+     * The number of cells to offset Col from the left
+     */
+    offset?: number;
+
+    /**
+     * The number of cells that raster is moved to the left
+     */
+    pull?: number;
+
+    /**
+     * The number of cells that raster is moved to the right
+     */
+    push?: number;
+
+    /**
+     * Flex layout style
+     */
+    flex?: string | number;
+}
+
+export interface ColProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Flex layout style
+     */
+    flex?: string | number;
+
+    /**
+     * Raster number of cells to occupy, 0 corresponds to display: none
+     */
+    span?: number;
+
+    /**
+     * Raster order
+     * @default 0
+     */
+    order?: number;
+
+    /**
+     * The number of cells to offset Col from the left
+     * @default 0
+     */
+    offset?: number;
+
+    /**
+     * The number of cells that raster is moved to the left
+     * @default 0
+     */
+    pull?: number;
+
+    /**
+     * The number of cells that raster is moved to the right
+     * @default 0
+     */
+    push?: number;
+
+    /**
+     * screen < 576px and also default setting, could be a span value or an object containing above props
+     */
+    xs?: number | ColSize;
+
+    /**
+     * screen ≥ 576px, could be a span value or an object containing above props
+     */
+    sm?: number | ColSize;
+
+    /**
+     * screen ≥ 768px, could be a span value or an object containing above props
+     */
+    md?: number | ColSize;
+
+    /**
+     * screen ≥ 992px, could be a span value or an object containing above props
+     */
+    lg?: number | ColSize;
+
+    /**
+     * screen ≥ 1200px, could be a span value or an object containing above props
+     */
+    xl?: number | ColSize;
+
+    /**
+     * screen ≥ 1600px, could be a span value or an object containing above props
+     */
+    xxl?: number | ColSize;
+
+    /**
+     * Custom CSS class name
+     */
+    className?: string;
+
+    /**
+     * Inline style
+     */
+    style?: React.CSSProperties;
+
+    /**
+     * Children nodes
+     */
+    children?: React.ReactNode;
+}
+
+declare const Col: React.FC<ColProps>;
+
+export default Col;

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

@@ -0,0 +1,79 @@
+import React from 'react';
+import { DatePickerProps as AntDatePickerProps, RangePickerProps } from 'antd';
+
+export type DatePickerVariant = 'outlined' | 'borderless' | 'filled' | 'underlined';
+export type DatePickerPicker = 'date' | 'week' | 'month' | 'quarter' | 'year';
+
+export const DatePickerVariants = ['outlined', 'borderless', 'filled', 'underlined'] as const;
+export const DatePickerPickers = ['date', 'week', 'month', 'quarter', 'year'] as const;
+
+export interface DatePickerProps extends Omit<AntDatePickerProps, 'size' | 'variant' | 'picker'> {
+    clearable?: boolean;
+    suffixIcon?: React.ReactNode;
+    prefix?: React.ReactNode;
+    format?: string;
+    showTime?: boolean;
+    picker?: DatePickerPicker;
+    className?: string;
+    variant?: DatePickerVariant;
+    disabled?: boolean;
+    floated?: boolean;
+    placeholder?: string;
+    value?: string;
+    onChange?: (value: string) => void;
+    onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
+    onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
+    onClear?: () => void;
+    onToday?: () => void;
+    onCalendarChange?: (date: moment.Moment | null) => void;
+    showToday?: boolean;
+    showTime?: boolean;
+    error?: boolean;
+}
+
+interface DatePickerComponent extends React.FC<DatePickerProps> {
+    /**
+     * OneHaul DatePicker component - A wrapper around Ant Design DatePicker
+     *
+     * @example
+     * ```jsx
+     * <DatePicker
+     *   size="lg"
+     *   variant="primary"
+     *   placeholder="Select date"
+     *   onChange={handleDateChange}
+     * />
+     * ```
+     *
+     * @example Range picker
+     * ```jsx
+     * <DatePicker
+     *   mode="range"
+     *   placeholder={['Start date', 'End date']}
+     *   onChange={handleRangeChange}
+     * />
+     * ```
+     *
+     * @example With time picker
+     * ```jsx
+     * <DatePicker
+     *   showTime
+     *   placeholder="Select date and time"
+     *   onChange={handleDateTimeChange}
+     * />
+     * ```
+     *
+     * @example Month picker
+     * ```jsx
+     * <DatePicker
+     *   picker="month"
+     *   placeholder="Select month"
+     *   onChange={handleMonthChange}
+     * />
+     * ```
+     */
+}
+
+declare const DatePicker: DatePickerComponent;
+
+export default DatePicker;

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

@@ -0,0 +1,38 @@
+import React from 'react';
+
+export interface InputNumberProps {
+    placeholder?: string;
+    className?: string;
+    prefix?: React.ReactNode;
+    suffix?: React.ReactNode;
+    max?: number;
+    min?: number;
+    size?: 'md' | 'lg';
+    style?: React.CSSProperties;
+    disabled?: boolean;
+    type?: 'text' | 'password' | 'textarea' | 'otp' | 'email' | 'number' | 'tel' | 'url';
+    floated?: boolean;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    onPressEnter?: (e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    value?: number;
+    defaultValue?: number;
+    error?: boolean;
+    helperText?: string;
+}
+
+interface InputNumberComponent extends React.FC<InputNumberProps> {
+    /**
+     * OneHaul InputNumber component
+     *
+     * @example
+     * ```jsx
+     * <InputNumber
+     *   placeholder="Enter a number"
+     *   onChange={handleChange}
+     * />
+     * ```
+     */
+}
+
+declare const InputNumber: InputNumberComponent;
+export default InputNumber;

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

@@ -0,0 +1,51 @@
+import React from 'react';
+
+type Breakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+
+type Gutter = number | Partial<Record<Breakpoint, number>>;
+
+export interface RowProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Vertical alignment of flex layout
+     * @default 'top'
+     */
+    align?: 'top' | 'middle' | 'bottom' | 'stretch';
+
+    /**
+     * Spacing between grids, could be a number or a object like { xs: 8, sm: 16, md: 24}
+     * Or you can use array to make horizontal and vertical spacing work at the same time [horizontal, vertical]
+     * @default 0
+     */
+    gutter?: Gutter | [Gutter, Gutter];
+
+    /**
+     * Horizontal arrangement of flex layout
+     * @default 'start'
+     */
+    justify?: 'start' | 'end' | 'center' | 'space-around' | 'space-between' | 'space-evenly';
+
+    /**
+     * Auto wrap line
+     * @default true
+     */
+    wrap?: boolean;
+
+    /**
+     * Custom CSS class name
+     */
+    className?: string;
+
+    /**
+     * Inline style
+     */
+    style?: React.CSSProperties;
+
+    /**
+     * Children nodes
+     */
+    children?: React.ReactNode;
+}
+
+declare const Row: React.FC<RowProps>;
+
+export default Row;

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

@@ -0,0 +1,63 @@
+import React from 'react';
+
+export interface SliderMarks {
+    [key: number]: React.ReactNode | { style?: React.CSSProperties; label?: React.ReactNode };
+}
+
+export interface SliderProps {
+    value?: number | [number, number];
+    defaultValue?: number | [number, number];
+    disabled?: boolean;
+    min?: number;
+    max?: number;
+    step?: number | null;
+    marks?: SliderMarks;
+    dots?: boolean;
+    included?: boolean;
+    range?: boolean;
+    reverse?: boolean;
+    tooltip?: {
+        open?: boolean;
+        placement?: 'top' | 'left' | 'right' | 'bottom';
+        getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
+        formatter?: ((value?: number) => React.ReactNode) | null;
+    };
+    onChange?: (value: number | [number, number]) => void;
+    onChangeComplete?: (value: number | [number, number]) => void;
+    className?: string;
+    style?: React.CSSProperties;
+    size?: 'md' | 'lg';
+    id?: string;
+    autoFocus?: boolean;
+    keyboard?: boolean;
+}
+
+interface SliderComponent extends React.FC<SliderProps> {
+    /**
+     * OneHaul Slider component
+     *
+     * @example
+     * ```jsx
+     * <Slider
+     *   min={0}
+     *   max={100}
+     *   value={value}
+     *   onChange={handleChange}
+     * />
+     * ```
+     *
+     * @example Range Slider
+     * ```jsx
+     * <Slider
+     *   range
+     *   min={0}
+     *   max={100}
+     *   value={[20, 50]}
+     *   onChange={handleChange}
+     * />
+     * ```
+     */
+}
+
+declare const Slider: SliderComponent;
+export default Slider;

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

@@ -0,0 +1,72 @@
+import React from 'react';
+import { TreeProps as AntTreeProps, TreeNodeProps } from 'antd/es/tree';
+
+export type TreeSize = 'sm' | 'md' | 'lg';
+
+export const TreeSizes = ['sm', 'md', 'lg'] as const;
+
+export interface TreeNodeData {
+    label: string | React.ReactNode;
+    value: string;
+    icon?: React.ReactNode;
+    children?: TreeNodeData[];
+    disabled?: boolean;
+    disableCheckbox?: boolean;
+    selectable?: boolean;
+    checkable?: boolean;
+    isLeaf?: boolean;
+    [key: string]: any;
+}
+
+export interface TreeProps extends Omit<AntTreeProps, 'size'> {
+    className?: string;
+    size?: TreeSize;
+    disabled?: boolean;
+    checkable?: boolean;
+    selectable?: boolean;
+    showLine?: boolean;
+    showIcon?: boolean;
+    draggable?: boolean;
+    multiple?: boolean;
+    children?: React.ReactNode;
+    treeData?: TreeNodeData[];
+    /**
+     * Function to load data asynchronously when a node is expanded
+     * @param node - The node that was expanded
+     * @returns Promise that resolves to an array of child nodes
+     */
+    onLoadData?: (node: { key: string; title: string; [key: string]: any }) => Promise<TreeNodeData[]>;
+    /**
+     * Callback when tree data changes (useful for async loading)
+     * @param newTreeData - The updated tree data
+     */
+    onTreeDataChange?: (newTreeData: TreeNodeData[]) => void;
+}
+
+interface TreeComponent extends React.FC<TreeProps> {
+    TreeNode: typeof TreeNodeProps;
+    DirectoryTree: any;
+    /**
+     * OneHaul Tree component with async loading support
+     *
+     * @example
+     * ```jsx
+     * <Tree
+     *   size="md"
+     *   checkable
+     *   treeData={treeData}
+     *   onLoadData={async (node) => {
+     *     // Load children for the node
+     *     const children = await fetchChildren(node.key);
+     *     return children;
+     *   }}
+     *   onSelect={handleSelect}
+     *   onCheck={handleCheck}
+     * />
+     * ```
+     */
+}
+
+declare const Tree: TreeComponent;
+
+export default Tree;

package/dist/icons/index.d.ts

@@ -100,3 +100,6 @@ export declare const Share: IconComponent;
 export declare const Email: IconComponent;
 export declare const Flash: IconComponent;
 export declare const RFQ: IconComponent;
+export declare const Block: IconComponent;
+export declare const Lock: IconComponent;
+export declare const Unlock: IconComponent;