@banyan_cloud/roots 2.0.52 → 2.0.53

package/dist/esm/src/components/buttons/button/types/index.d.ts

@@ -1,8 +1,10 @@
 import type { BaseButtonProps } from 'components/buttons/baseButton/types';
 import type { ComponentType } from 'react';
 export type ButtonColors = 'primary' | 'success' | 'danger' | 'warning';
+export type ButtonTextSize = 'sm' | 'md';
 export interface ButtonProps extends BaseButtonProps {
     color?: ButtonColors;
     leftComponent?: ComponentType | undefined;
     rightComponent?: ComponentType | undefined;
+    textSize?: ButtonTextSize;
 }

package/dist/esm/src/components/datePicker/ranges/utils/index.d.ts

@@ -1,3 +1,7 @@
+export function getDateAndUnixRange(duration: any): {
+    dates: [string, string];
+    unix: number[];
+};
 export function dateRanges(customRanges?: any[]): {
     title: any;
     dateRange: {
@@ -5,3 +9,7 @@ export function dateRanges(customRanges?: any[]): {
         unix: number[];
     };
 }[];
+export function timeRanges(): {
+    label: string;
+    value: number;
+}[];

package/dist/esm/src/components/datePickerV2/DatePicker.d.ts

@@ -1,2 +1,33 @@
+import { type ReactElement } from 'react';
+interface CustomRange {
+    title: string;
+    dateRange: {
+        dates: string[];
+        unix: number[];
+    };
+}
+interface DatePickerProps {
+    placeholder?: string;
+    range?: boolean;
+    value?: number | number[] | null;
+    disabled?: boolean;
+    className?: string;
+    customRanges?: CustomRange[] | null;
+    showCustomRanges?: boolean;
+    custom?: boolean;
+    highlightOnSelect?: boolean;
+    limitHours?: number | null;
+    timeRange?: boolean;
+    onClear?: () => void;
+    onApply?: (value: number | number[], fixedRange: string | null, tag?: string) => void;
+    enableFutureDates?: boolean;
+    maxRange?: number | null;
+    disabledDates?: string[];
+    disableDatesBefore?: number[];
+    disableDatesAfter?: number[];
+    defaultHourDiff?: number;
+    valueAsRange?: boolean;
+    startingYear?: number;
+}
+declare const DatePicker: (props: DatePickerProps) => ReactElement;
 export default DatePicker;
-declare function DatePicker(props: any): import("react/jsx-runtime").JSX.Element;

package/dist/esm/src/components/datePickerV2/calender/Calender.d.ts

@@ -0,0 +1,2 @@
+declare const Calender: (props: any) => import("react/jsx-runtime").JSX.Element;
+export default Calender;

package/dist/esm/src/components/datePickerV2/calender/body/Body.d.ts

@@ -0,0 +1,35 @@
+import { type ReactElement } from 'react';
+interface SelectedMonth {
+    month: string;
+    monthAsNumber: number;
+    year: number;
+}
+interface SelectedDate {
+    month?: string;
+    year?: number;
+    date?: number;
+    unix?: number;
+}
+interface SelectedRange {
+    dates?: string[];
+    unix?: number[];
+}
+interface BodyProps {
+    selectedMonth: SelectedMonth;
+    setSelectedMonth: (month: SelectedMonth) => void;
+    displayMonthRight: SelectedMonth;
+    setDisplayMonthRight: (month: SelectedMonth) => void;
+    selectedDate: SelectedDate;
+    setSelectedDate: (date: SelectedDate) => void;
+    range: boolean;
+    selectedRange: SelectedRange;
+    setSelectedRange: (range: SelectedRange) => void;
+    disabledDates: string[];
+    disableDatesBefore: number[];
+    enableFutureDates: boolean;
+    disableDatesAfter: number[];
+    setFixedTime: (time: number) => void;
+    setFixedTimeRange: (range: [number, number]) => void;
+}
+declare const Body: (props: BodyProps) => ReactElement;
+export default Body;

package/dist/esm/src/components/datePickerV2/calender/body/dates/Dates.d.ts

@@ -0,0 +1,35 @@
+import { type ReactElement } from 'react';
+interface SelectedMonth {
+    month: string;
+    monthAsNumber: number;
+    year: number;
+}
+interface SelectedDate {
+    month?: string;
+    year?: number;
+    date?: number;
+    unix?: number;
+}
+interface SelectedRange {
+    dates?: string[];
+    unix?: number[];
+}
+interface DatesProps {
+    selectedMonth: SelectedMonth;
+    setSelectedMonth: (month: SelectedMonth) => void;
+    selectedDate: SelectedDate;
+    setSelectedDate: (date: SelectedDate) => void;
+    range: boolean;
+    selectedRange: SelectedRange;
+    setSelectedRange: (range: SelectedRange) => void;
+    disabledDates: string[];
+    disableDatesBefore: number[];
+    enableFutureDates: boolean;
+    disableDatesAfter: number[];
+    hoveredEndingDate: number | null;
+    setHoveredEndingDate: (date: number | null) => void;
+    setFixedTime: (time: number) => void;
+    setFixedTimeRange: (range: [number, number]) => void;
+}
+declare const Dates: (props: DatesProps) => ReactElement;
+export default Dates;

package/dist/esm/src/components/datePickerV2/calender/body/dates/assets/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+interface TodayIndicatorProps {
+    className?: string;
+}
+export declare const TodayIndicator: ({ className }: TodayIndicatorProps) => React.ReactElement;
+export {};

package/dist/esm/src/components/datePickerV2/calender/body/dates/index.d.ts

@@ -0,0 +1 @@
+export { default as Dates } from './Dates';

package/dist/esm/src/components/datePickerV2/calender/body/dates/utils/index.d.ts

@@ -0,0 +1,21 @@
+interface GetDatesToDisplayParams {
+    monthAsNumber: number;
+    year: number;
+    days: number[];
+    dateObj: Date[];
+}
+interface DateRange {
+    dates: string[];
+    unix: number[];
+}
+interface SelectedRange {
+    dates?: string[];
+    unix?: number[];
+}
+interface RangeSelectionParams {
+    selectedRange: SelectedRange;
+    date: Date;
+}
+export declare const getDatesToDisplay: ({ monthAsNumber, year, days, dateObj, }: GetDatesToDisplayParams) => Date[];
+export declare const rangeSelection: ({ selectedRange, date }: RangeSelectionParams) => DateRange;
+export {};

package/dist/esm/src/components/datePickerV2/calender/body/days/Days.d.ts

@@ -0,0 +1,2 @@
+declare const Days: () => import("react/jsx-runtime").JSX.Element;
+export default Days;

package/dist/esm/src/components/datePickerV2/calender/body/days/index.d.ts

@@ -0,0 +1 @@
+export { default as Days } from './Days';

package/dist/esm/src/components/datePickerV2/calender/body/index.d.ts

@@ -0,0 +1 @@
+export { default as CalenderBody } from './Body';

package/dist/esm/src/components/datePickerV2/calender/header/Header.d.ts

@@ -0,0 +1,26 @@
+import { type ReactElement } from 'react';
+interface SelectedMonth {
+    month: string;
+    monthAsNumber: number;
+    year: number;
+}
+interface SelectedDate {
+    month?: string;
+    year?: number;
+    date?: number;
+    unix?: number;
+}
+interface HeaderProps {
+    range?: boolean;
+    dateSelectionView?: boolean;
+    defaultHourDiff?: number;
+    timeSelectionView?: boolean;
+    selectedDate: SelectedDate;
+    selectedMonth: SelectedMonth;
+    setSelectedMonth: (month: SelectedMonth) => void;
+    setSelectedDate: (date: SelectedDate) => void;
+    displayMonthRight: SelectedMonth;
+    onMonthChange: (direction: 'prev' | 'next') => void;
+}
+declare const Header: (props: HeaderProps) => ReactElement;
+export default Header;

package/dist/esm/src/components/datePickerV2/calender/header/index.d.ts

@@ -0,0 +1 @@
+export { default as CalenderHeader } from './Header';

package/dist/esm/src/components/datePickerV2/calender/index.d.ts

@@ -0,0 +1 @@
+export { default as Calender } from './Calender';

package/dist/esm/src/components/datePickerV2/dateSwitcher/DateSwitcher.d.ts

@@ -0,0 +1,20 @@
+import { type ReactElement } from 'react';
+interface SelectedMonth {
+    month: string;
+    monthAsNumber: number;
+    year: number;
+}
+interface SelectedDate {
+    month?: string;
+    year?: number;
+    date?: number;
+    unix?: number;
+}
+interface DateSwitcherProps {
+    selectedMonth: SelectedMonth;
+    setSelectedMonth: (month: SelectedMonth) => void;
+    setSelectedDate: (date: SelectedDate) => void;
+    selectedDate: SelectedDate;
+}
+declare const DateSwitcher: (props: DateSwitcherProps) => ReactElement;
+export default DateSwitcher;

package/dist/esm/src/components/datePickerV2/dateSwitcher/index.d.ts

@@ -0,0 +1 @@
+export { default as DateSwitcher } from './DateSwitcher';

package/dist/esm/src/components/datePickerV2/index.d.ts

@@ -1 +1 @@
-export { default as DatePickerV2 } from "./DatePicker";
+export { default as DatePickerV2 } from './DatePicker';

package/dist/esm/src/components/sidePanel/BaseSidePanel.d.ts

@@ -14,6 +14,7 @@ export interface BaseSidePanelProps {
     renderHeader?: React.ReactNode;
     renderFooter?: React.ReactNode;
     children?: React.ReactNode;
+    tabsOrientation?: 'horizontal' | 'vertical';
     /** When true, render inside BaseModal; otherwise render as a drawer div */
     isModal?: boolean;
     /** Open/close controls */

package/dist/esm/src/components/v2/buttons/baseButton/BaseButton.d.ts

@@ -0,0 +1,3 @@
+import type { BaseButtonProps } from './types';
+declare const BaseButton: import("react").ForwardRefExoticComponent<BaseButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export default BaseButton;

package/dist/esm/src/components/v2/buttons/baseButton/index.d.ts

@@ -0,0 +1,2 @@
+export { default as BaseButton } from './BaseButton';
+export * from './types';

package/dist/esm/src/components/v2/buttons/baseButton/types/index.d.ts

@@ -0,0 +1,14 @@
+import type { BaseCellProps } from 'components/cell';
+import type { MouseEvent, ReactElement } from 'react';
+type ButtonType = 'button' | 'submit' | 'reset';
+type ButtonVariant = 'contained' | 'outlined' | 'text';
+export interface BaseButtonProps extends BaseCellProps<'button', false> {
+    title?: ReactElement | string | undefined;
+    disabled?: boolean | undefined;
+    id?: string | undefined;
+    type?: ButtonType;
+    onClick?: ((event: MouseEvent<HTMLElement>) => void | Promise<void>) | undefined;
+    blurOnClick?: boolean;
+    variant?: ButtonVariant;
+}
+export {};

package/dist/esm/src/components/v2/buttons/button/Button.d.ts

@@ -0,0 +1,3 @@
+import type { ButtonProps } from './types';
+declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export default Button;

package/dist/esm/src/components/v2/buttons/button/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Button } from './Button';
+export * from './types';

package/dist/esm/src/components/v2/buttons/button/types/index.d.ts

@@ -0,0 +1,11 @@
+import type { BaseButtonProps } from 'components/buttons/baseButton/types';
+import type { ComponentType } from 'react';
+export type ButtonVariant = 'primary' | 'secondary' | 'Soft' | 'outlined' | 'ghost';
+export type ButtonTextSize = 'sm' | 'md';
+export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg';
+export interface ButtonProps extends Omit<BaseButtonProps, 'variant' | 'size' | 'component1'> {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    textSize?: ButtonTextSize;
+    rightComponent?: ComponentType;
+}

package/dist/esm/src/components/v2/buttons/index.d.ts

@@ -0,0 +1,2 @@
+export * from './baseButton';
+export * from './button';

package/dist/esm/src/components/v2/icons/error/Error.d.ts

@@ -0,0 +1,4 @@
+declare const Error: (props: {
+    className?: string | undefined;
+}) => import("react/jsx-runtime").JSX.Element;
+export default Error;

package/dist/esm/src/components/v2/icons/error/index.d.ts

@@ -0,0 +1 @@
+export { default as ErrorIcon } from './Error';

package/dist/esm/src/components/v2/icons/index.d.ts

@@ -0,0 +1,2 @@
+export * from './error';
+export * from './warning';

package/dist/esm/src/components/v2/icons/warning/Warning.d.ts

@@ -0,0 +1,4 @@
+declare const Warning: (props: {
+    className?: string | undefined;
+}) => import("react/jsx-runtime").JSX.Element;
+export default Warning;

package/dist/esm/src/components/v2/icons/warning/index.d.ts

@@ -0,0 +1 @@
+export { default as WarningIcon } from './Warning';

package/dist/esm/src/components/v2/input/index.d.ts

@@ -0,0 +1 @@
+export * from './textField';

package/dist/esm/src/components/v2/input/textField/TextField.d.ts

@@ -0,0 +1,58 @@
+import React from 'react';
+import type { MiddlewareOptions, Placement } from '../../../popover/Popover';
+type InputType = 'text' | 'textarea' | (string & {});
+interface Feedback {
+    error?: string | undefined;
+    info?: string | undefined;
+}
+interface LeftRightIconProps {
+    className?: string | undefined;
+}
+type LeftComponentType = React.ComponentType<LeftRightIconProps>;
+type RightComponentType = React.ComponentType<LeftRightIconProps>;
+interface AutocompleteOptions {
+    /** Decide when to open based on the current input */
+    predicate?: (input: string) => boolean;
+    open?: (input: string) => boolean;
+    /** Popover placement (kept broad to avoid coupling to the popper types) */
+    placement?: Placement;
+    /** Popover middleware options (library-specific) */
+    middlewareOptions?: MiddlewareOptions;
+    /** Renderer for the autocomplete content */
+    render?: React.ComponentType<{
+        name?: string | undefined;
+        value?: string | number | undefined;
+    }>;
+}
+export interface TextFieldProps {
+    id?: string;
+    name?: string;
+    label?: string;
+    placeholder?: string;
+    type?: InputType;
+    value?: string | number;
+    required?: boolean;
+    defaultValue?: string;
+    onFocus?: () => void;
+    onBlur?: () => void;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>, value?: string) => void;
+    size?: 'sm' | 'md' | 'lg' | (string & {});
+    border?: 'default' | 'none' | (string & {});
+    theme?: 'light' | 'dark' | (string & {});
+    LeftComponent?: LeftComponentType;
+    RightComponent?: RightComponentType;
+    className?: string | undefined;
+    disabled?: boolean;
+    /** Extra HTML attributes to forward to the input/textarea */
+    inputProps?: React.InputHTMLAttributes<HTMLInputElement> | React.TextareaHTMLAttributes<HTMLTextAreaElement>;
+    feedback?: Feedback | undefined;
+    maxLength?: number;
+    onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    /** Whether to enable autocomplete popover */
+    autocompleteOptions?: AutocompleteOptions | undefined;
+    helperText?: string;
+    forgotPasswordLink?: string;
+    readOnly?: boolean;
+}
+declare const TextField: React.ForwardRefExoticComponent<TextFieldProps & React.RefAttributes<HTMLInputElement | HTMLTextAreaElement>>;
+export default TextField;

package/dist/esm/src/components/v2/input/textField/index.d.ts

@@ -0,0 +1 @@
+export { default as TextField } from './TextField';

package/dist/esm/src/constants/index.d.ts

@@ -1,3 +1,7 @@
 export declare const MONTHS: readonly ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
 export declare const FULL_MONTHS: readonly ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
-export declare const DAYS: readonly ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
+export declare const FULL_MONTHS_INDEX: {
+    value: number;
+    label: string;
+}[];
+export declare const DAYS: string[];

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@banyan_cloud/roots",
-	"version": "2.0.52",
+	"version": "2.0.53",
 	"description": "Design System Library which drives the Banyan Cloud products",
 	"main": "dist/cjs/index.js",
 	"module": "dist/esm/index.js",

package/src/styles/_colors.scss

@@ -73,3 +73,31 @@ $warning-outline: var(--warning-outline);
 $info: var(--info);
 $info-bg: var(--info-bg);
 $info-outline: var(--info-outline);
+
+// Button - Primary (V2)
+$button-primary: #1f5fcc;
+$button-primary-hover: #1b55b5;
+$button-primary-active: #0f1f3d;
+$button-disabled: #dcdcdc;
+
+$text-on-color: #ffffff;
+$text-disabled: #161616;
+
+$focus-primary: #3b82f6;
+$focus-inset: #ffffff;
+
+// Button - Secondary (V2)
+$button-secondary: #323232;
+$button-secondary-hover: #3e3e3e;
+$button-secondary-active: #646464;
+
+// Button Soft (V2)
+$button-soft-bg: #fef3c7;
+$button-soft-bg-hover: #f3e9bd;
+$button-soft-bg-active: #fcd34d;
+
+$soft-text-color: #b34700;
+$soft-svg-color: #b34700;
+
+// Text Field
+$text-warning: #da1e28;