@tecsinapse/cortex-react 1.2.2 → 1.3.0-beta.0

package/dist/esm/hooks/useCalendarCell.js

@@ -0,0 +1,33 @@
+import { isSameDay } from '@internationalized/date';
+import { useRef } from 'react';
+import { useCalendarCell as useCalendarCell$1 } from 'react-aria';
+
+const useCalendarCell = ({ state, date }) => {
+  const ref = useRef(null);
+  const {
+    cellProps,
+    buttonProps,
+    isSelected,
+    isOutsideVisibleRange,
+    formattedDate
+  } = useCalendarCell$1({ date }, state, ref);
+  const rangeStateHighlitedRange = state?.highlightedRange;
+  const isSameDayStart = rangeStateHighlitedRange ? isSameDay(date, state?.highlightedRange?.start) : void 0;
+  const isSameDayEnd = rangeStateHighlitedRange ? isSameDay(date, state?.highlightedRange?.end) : void 0;
+  const isSelectionStart = isSameDayStart && !isSameDayEnd;
+  const isSelectionEnd = isSameDayEnd && !isSameDayStart;
+  const inRange = date > rangeStateHighlitedRange?.start && date < rangeStateHighlitedRange?.end;
+  return {
+    ref,
+    cellProps,
+    buttonProps,
+    isSelected,
+    isOutsideVisibleRange,
+    formattedDate,
+    isSelectionStart,
+    isSelectionEnd,
+    inRange
+  };
+};
+
+export { useCalendarCell };

package/dist/esm/hooks/useCalendarGrid.js

@@ -0,0 +1,12 @@
+import { useCalendarGrid as useCalendarGrid$1 } from 'react-aria';
+
+const useCalendarGrid = ({ state }) => {
+  const { gridProps, headerProps, weekDays } = useCalendarGrid$1({}, state);
+  return {
+    gridProps,
+    headerProps,
+    weekDays
+  };
+};
+
+export { useCalendarGrid };

package/dist/esm/hooks/useTimeField.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { useLocale, useTimeField as useTimeField$1 } from 'react-aria';
+import { useTimeFieldState } from 'react-stately';
+import { Time } from '@internationalized/date';
+
+const useTimeField = (props) => {
+  const { value, onChange } = props;
+  const { locale } = useLocale();
+  const state = useTimeFieldState({
+    value: new Time(value?.hour, value?.minute),
+    onChange: (timeValue) => onChange({ hour: timeValue.hour, minute: timeValue.minute }),
+    locale
+  });
+  const ref = React.useRef(null);
+  const { fieldProps } = useTimeField$1(
+    {
+      "aria-label": "time-field",
+      hourCycle: 24
+    },
+    state,
+    ref
+  );
+  return {
+    fieldProps,
+    ref,
+    state
+  };
+};
+
+export { useTimeField };

package/dist/esm/index.js

@@ -1,16 +1,27 @@
+export { Avatar } from './components/Avatar.js';
 export { Badge, BadgeAnchor } from './components/Badge.js';
+export { BaseSnackbar } from './components/BaseSnackbar.js';
+export { Breadcrumbs } from './components/Breadcrumbs.js';
 export { Button } from './components/Button.js';
+export { Calendar } from './components/Calendar.js';
 export { Card } from './components/Card.js';
+export { DefaultSnack } from './components/DefaultSnack.js';
+export { Drawer } from './components/Drawer.js';
+export { GroupButton } from './components/GroupButton.js';
 export { Hint } from './components/Hint.js';
 export { Box, Face, Input, Left, Right, Root } from './components/Input.js';
 export { Modal } from './components/Modal.js';
+export { ProgressBar } from './components/ProgressBar.js';
+export { RangeCalendar } from './components/RangeCalendar.js';
 export { Select } from './components/Select.js';
-export { Snackbar } from './components/Snackbar.js';
+export { Skeleton } from './components/Skeleton.js';
+export { TCell, TFoot, THead, THeadCell, TRow, TRowHeader, Table, Td } from './components/Table.js';
 export { Tag } from './components/Tag.js';
-export { Toggle } from './components/Toggle.js';
 export { TextArea } from './components/TextArea.js';
-export { Hr, TCell, TFoot, THead, THeadCell, TRow, TRowHeader, Table, Td } from './components/Table.js';
-export { Drawer } from './components/Drawer.js';
-export { Breadcrumbs } from './components/Breadcrumbs.js';
-export { Avatar } from './components/Avatar.js';
-export { Skeleton } from './components/Skeleton.js';
+export { Toggle } from './components/Toggle.js';
+export { TimeFieldInput } from './components/TimeFieldInput.js';
+export { SnackbarSonner } from './service/SnackbarSonner.js';
+export { useCalendar } from './hooks/useCalendar.js';
+export { useCalendarCell } from './hooks/useCalendarCell.js';
+export { useCalendarGrid } from './hooks/useCalendarGrid.js';
+export { useDebouncedState } from './hooks/useDebouncedState.js';

package/dist/esm/service/SnackbarSonner.js

@@ -0,0 +1,52 @@
+import { toast } from 'sonner';
+import React from 'react';
+import 'clsx';
+import '../components/Badge.js';
+import '../components/BaseSnackbar.js';
+import 'react-icons/md';
+import '../components/Card.js';
+import '../components/Button.js';
+import '@internationalized/date';
+import 'react-aria';
+import 'react-stately';
+import '../components/CalendarCell.js';
+import '@tecsinapse/cortex-core';
+import 'react-icons/fa';
+import { DefaultSnack } from '../components/DefaultSnack.js';
+import '../components/GroupButton.js';
+import '../components/Hint.js';
+import '../components/Input.js';
+import '../components/Modal.js';
+import '../styles/calendar-cell.js';
+import '../styles/groupButton.js';
+import '../styles/progressBar.js';
+import '../components/Select.js';
+import '../components/Tag.js';
+import '../components/TextArea.js';
+import '../components/Toggle.js';
+
+class SnackbarSonner {
+  custom(Component, options) {
+    return toast.custom(() => Component, {
+      ...options,
+      duration: options?.duration ?? 5e3
+    });
+  }
+  show(type, message, options) {
+    return toast.custom(
+      (t) => {
+        return /* @__PURE__ */ React.createElement(
+          DefaultSnack,
+          {
+            text: message,
+            variants: { intent: type },
+            onDismiss: () => toast.dismiss(t)
+          }
+        );
+      },
+      { ...options, duration: options?.duration ?? 5e3 }
+    );
+  }
+}
+
+export { SnackbarSonner };

package/dist/esm/styles/calendar-cell.js

@@ -0,0 +1,38 @@
+import { tv } from 'tailwind-variants';
+
+const calendarCell = tv({
+  slots: {
+    cell: "text-center rounded-mili text-black",
+    button: "flex aspect-square items-center justify-center"
+  },
+  variants: {
+    isSelected: {
+      true: {
+        cell: "bg-primary-medium text-white"
+      }
+    },
+    isSelectionStart: {
+      true: {
+        cell: "bg-primary-medium rounded-r-none text-white"
+      }
+    },
+    isSelectionEnd: {
+      true: {
+        cell: "bg-primary-medium rounded-l-none text-white"
+      }
+    },
+    inRange: {
+      true: {
+        cell: "bg-primary-light rounded-none text-black"
+      }
+    },
+    isOutsideVisibleRange: {
+      true: {
+        cell: "text-secondary-light cursor-default",
+        button: "cursor-default"
+      }
+    }
+  }
+});
+
+export { calendarCell };

package/dist/esm/styles/groupButton.js

@@ -0,0 +1,14 @@
+import { tv } from 'tailwind-variants';
+
+const groupButton = tv({
+  slots: {
+    button: "border-[1px] border-secondary-medium px-centi py-mili items-center flex text-sub font-bold",
+    inactive: "bg-white text-secondary-medium disabled:bg-secondary-light",
+    firstButton: "first:rounded-l-mili first:border-r-0",
+    lastButton: "last:rounded-r-mili last:border-l-0",
+    container: "flex flex-row flex-1 h-[2rem] w-[500px]",
+    active: "text-white bg-secondary-medium"
+  }
+});
+
+export { groupButton };

package/dist/esm/styles/progressBar.js

@@ -0,0 +1,19 @@
+import { tv } from 'tailwind-variants';
+
+const progressBarFilled = tv({
+  base: "h-full first:rounded-l-pill last:rounded-r-pill",
+  variants: {
+    intentProgress: {
+      default: "bg-primary-medium",
+      error: "bg-error-medium",
+      info: "bg-info-medium",
+      warning: "bg-warning-medium",
+      success: "bg-success-medium"
+    },
+    showAnimation: {
+      true: "transition-[width] duration-1000 ease-linear"
+    }
+  }
+});
+
+export { progressBarFilled };

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

@@ -0,0 +1,9 @@
+import React, { ReactNode } from 'react';
+import { SnackbarVariants } from '@tecsinapse/cortex-core';
+interface SnackbarProps {
+    variants?: SnackbarVariants;
+    children?: ReactNode;
+    show: boolean;
+}
+export declare const BaseSnackbar: React.ForwardRefExoticComponent<SnackbarProps & React.RefAttributes<HTMLDivElement>>;
+export {};

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

@@ -1,7 +1,5 @@
-/// <reference types="react" />
 import { BreadcrumbType } from '../components';
-interface BreadcrumbItemProps extends BreadcrumbType {
+export interface BreadcrumbItemProps extends BreadcrumbType {
     isLast: boolean;
 }
 export declare const BreadcrumbItem: ({ isLast, Component, componentProps, title, }: BreadcrumbItemProps) => JSX.Element;
-export {};

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

@@ -0,0 +1,6 @@
+interface CalendarProps {
+    value: Date;
+    onChange: (value: Date) => void;
+}
+export declare const Calendar: ({ value, onChange }: CalendarProps) => JSX.Element;
+export {};

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

@@ -0,0 +1,8 @@
+import { CalendarDate } from '@internationalized/date';
+import { CalendarState, RangeCalendarState } from 'react-stately';
+interface CalendarCellProps {
+    state: CalendarState | RangeCalendarState;
+    date: CalendarDate;
+}
+export declare const CalendarCell: ({ state, date }: CalendarCellProps) => JSX.Element;
+export {};

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

@@ -0,0 +1,6 @@
+import { CalendarState, RangeCalendarState } from 'react-stately';
+interface CalendarGridProps {
+    state: CalendarState | RangeCalendarState;
+}
+export declare const CalendarGrid: ({ state }: CalendarGridProps) => JSX.Element;
+export {};

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

@@ -0,0 +1,6 @@
+import { CalendarState, RangeCalendarState } from 'react-stately';
+interface CalendarGridBodyRowsProps {
+    state: CalendarState | RangeCalendarState;
+}
+export declare const CalendarGridBodyRows: ({ state }: CalendarGridBodyRowsProps) => JSX.Element;
+export {};

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

@@ -0,0 +1,5 @@
+interface CalendarGridHeaderRowProps {
+    weekDays: string[];
+}
+export declare const CalendarGridHeaderRow: ({ weekDays, }: CalendarGridHeaderRowProps) => JSX.Element;
+export {};

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

@@ -0,0 +1,6 @@
+export interface CalendarHeaderProps {
+    onClickPrevButton: () => void;
+    onClickNextButton: () => void;
+    title: string;
+}
+export declare const CalendarHeader: ({ onClickPrevButton, onClickNextButton, title, }: CalendarHeaderProps) => JSX.Element;

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

@@ -0,0 +1,7 @@
+import { DateFieldState, DateSegment as DateSegmentType } from 'react-stately';
+interface DateSegmentProps {
+    segment: DateSegmentType;
+    state: DateFieldState;
+}
+export declare const DateSegment: ({ segment, state }: DateSegmentProps) => JSX.Element;
+export {};

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

@@ -0,0 +1,6 @@
+import { SnackbarVariants } from '@tecsinapse/cortex-core';
+export declare const DefaultSnack: ({ text, onDismiss, variants, }: {
+    text: string;
+    onDismiss: () => void;
+    variants?: SnackbarVariants;
+}) => JSX.Element;

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

@@ -1,7 +1,7 @@
 import React from 'react';
 interface DrawerProps {
     open: boolean;
-    onClose: (open: boolean) => void;
+    onClose: () => void;
     position?: 'left' | 'right';
     children?: React.ReactNode;
 }

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

@@ -0,0 +1,19 @@
+import { ReactNode } from 'react';
+export interface GroupButtonValue<T> {
+    value: T;
+}
+export interface GroupButtonProps<T> {
+    value: T;
+    options: GroupButtonValue<T>[];
+    renderKey: (option?: T) => string | number;
+    renderOption: (option: T) => ReactNode;
+    onChange: (option: T) => void;
+    customStyles?: {
+        active?: string;
+        firstButton?: string;
+        lastButton?: string;
+        inactive?: string;
+    };
+    disableAllOptions?: boolean;
+}
+export declare const GroupButton: <T>(props: GroupButtonProps<T>) => JSX.Element;

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

@@ -1,6 +1,6 @@
-import React from 'react';
 import { InputBaseVariants } from '@tecsinapse/cortex-core';
-interface InputPropsBase {
+import React from 'react';
+export interface InputPropsBase {
     variants?: InputBaseVariants;
     label?: string;
 }

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

@@ -1,8 +1,8 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 interface ModalProps {
     open: boolean;
     onClose: () => void;
-    children: JSX.Element;
+    children?: ReactNode;
 }
 export declare const Modal: React.ForwardRefExoticComponent<ModalProps & React.InputHTMLAttributes<HTMLInputElement> & React.RefAttributes<HTMLDivElement>>;
 export {};

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

@@ -0,0 +1,9 @@
+export interface ProgressBarProps {
+    segments?: number;
+    valueMin?: number;
+    valueMax?: number;
+    valueCurrent: number;
+    intentProgress?: 'default' | 'success' | 'warning' | 'info' | 'error';
+    animated?: boolean;
+}
+export declare const ProgressBar: ({ segments: _segments, valueMin, valueMax, valueCurrent, intentProgress, animated, }: ProgressBarProps) => JSX.Element;

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

@@ -0,0 +1,10 @@
+export type DateRange = {
+    start: Date;
+    end: Date;
+};
+interface RangeCalendarProps {
+    onChange: (value: DateRange) => void;
+    value: DateRange;
+}
+export declare const RangeCalendar: ({ value, onChange }: RangeCalendarProps) => JSX.Element;
+export {};

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 interface SearchInputProps {
     label?: string;
     placeholder?: string;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 interface CommonProps<T> {
     label: string;
     value: T | undefined;

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

@@ -1,2 +1,4 @@
-import React from 'react';
-export declare const Skeleton: ({ className, ...rest }: React.HTMLAttributes<HTMLDivElement>) => JSX.Element;
+import React, { ReactNode } from 'react';
+export declare const Skeleton: ({ className, children, ...rest }: React.HTMLAttributes<HTMLDivElement> & {
+    children?: ReactNode;
+}) => JSX.Element;

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

@@ -9,6 +9,5 @@ export declare const TRowHeader: ({ children, }: TableCommon & ThHTMLAttributes<
 export declare const TCell: ({ children, className, ...rest }: TableCommon & TdHTMLAttributes<HTMLTableCellElement>) => JSX.Element;
 export declare const TFoot: ({ children, className, ...rest }: TableCommon & HTMLAttributes<HTMLTableSectionElement>) => JSX.Element;
 export declare const Table: ({ children, className, ...rest }: TableCommon & TableHTMLAttributes<HTMLTableElement>) => JSX.Element;
-export declare const Hr: ({ children, className, ...rest }: TableCommon & HTMLAttributes<HTMLHRElement>) => JSX.Element;
 export declare const Td: ({ children, ...rest }: TableCommon & TdHTMLAttributes<HTMLTableCellElement>) => JSX.Element;
 export {};

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

@@ -0,0 +1,7 @@
+import { TimeValueType } from './TimeFieldInput';
+export interface TimeFieldProps {
+    value?: TimeValueType;
+    onChange: (number: TimeValueType) => void;
+}
+declare const TimeField: (props: TimeFieldProps) => JSX.Element;
+export default TimeField;

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

@@ -0,0 +1,10 @@
+import { InputPropsBase } from './Input';
+export type TimeValueType = {
+    hour: number;
+    minute: number;
+};
+export interface TimeFieldInputProps extends InputPropsBase {
+    value?: TimeValueType;
+    onChange: (number: TimeValueType) => void;
+}
+export declare const TimeFieldInput: (props: TimeFieldInputProps) => JSX.Element;

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

@@ -1,16 +1,22 @@
+export * from './Avatar';
 export * from './Badge';
+export * from './BaseSnackbar';
+export * from './Breadcrumbs';
 export * from './Button';
+export * from './Calendar';
 export * from './Card';
+export * from './DefaultSnack';
+export * from './Drawer';
+export * from './GroupButton';
 export * from './Hint';
 export * from './Input';
 export * from './Modal';
+export * from './ProgressBar';
+export * from './RangeCalendar';
 export { default as Select } from './Select';
-export * from './Snackbar';
+export * from './Skeleton';
+export * from './Table';
 export * from './Tag';
-export * from './Toggle';
 export * from './TextArea';
-export * from './Table';
-export * from './Drawer';
-export * from './Breadcrumbs';
-export * from './Avatar';
-export * from './Skeleton';
+export * from './Toggle';
+export * from './TimeFieldInput';

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

@@ -1 +1 @@
-export declare const getInitialsName: (name: string) => string;
+export declare const getNameInitials: (name: string) => string;

package/dist/types/hooks/index.d.ts

@@ -1 +1,4 @@
+export * from './useCalendar';
+export * from './useCalendarCell';
+export * from './useCalendarGrid';
 export * from './useDebouncedState';

package/dist/types/hooks/useCalendar.d.ts

@@ -0,0 +1,10 @@
+interface useCalendarProps {
+    value: Date;
+    onChange: (value: Date) => void;
+}
+export declare const useCalendar: ({ value, onChange }: useCalendarProps) => {
+    calendarProps: import("@react-types/shared").DOMAttributes<import("@react-types/shared").FocusableElement>;
+    title: string;
+    state: import("react-stately").CalendarState;
+};
+export {};

package/dist/types/hooks/useCalendarCell.d.ts

@@ -0,0 +1,18 @@
+import { CalendarDate } from '@internationalized/date';
+import { CalendarState, RangeCalendarState } from 'react-stately';
+interface useCalendarCellProps {
+    state: CalendarState | RangeCalendarState;
+    date: CalendarDate;
+}
+export declare const useCalendarCell: ({ state, date }: useCalendarCellProps) => {
+    ref: import("react").MutableRefObject<null>;
+    cellProps: import("@react-types/shared").DOMAttributes<import("@react-types/shared").FocusableElement>;
+    buttonProps: import("@react-types/shared").DOMAttributes<import("@react-types/shared").FocusableElement>;
+    isSelected: boolean;
+    isOutsideVisibleRange: boolean;
+    formattedDate: string;
+    isSelectionStart: boolean | undefined;
+    isSelectionEnd: boolean | undefined;
+    inRange: boolean;
+};
+export {};

package/dist/types/hooks/useCalendarGrid.d.ts

@@ -0,0 +1,10 @@
+import { CalendarState, RangeCalendarState } from 'react-stately';
+interface useCalendarGridProps {
+    state: CalendarState | RangeCalendarState;
+}
+export declare const useCalendarGrid: ({ state }: useCalendarGridProps) => {
+    gridProps: import("@react-types/shared").DOMAttributes<import("@react-types/shared").FocusableElement>;
+    headerProps: import("@react-types/shared").DOMAttributes<import("@react-types/shared").FocusableElement>;
+    weekDays: string[];
+};
+export {};

package/dist/types/hooks/useTimeField.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { TimeFieldProps } from '../components/TimeField';
+export declare const useTimeField: (props: TimeFieldProps) => {
+    fieldProps: import("@react-types/shared").GroupDOMAttributes;
+    ref: React.MutableRefObject<null>;
+    state: import("react-stately").TimeFieldState;
+};

package/dist/types/index.d.ts

@@ -1 +1,3 @@
 export * from './components';
+export * from './service';
+export * from './hooks';

package/dist/types/provider/SnackbarProvider.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+import { SnackbarSonner } from '../service';
+interface SnackbarProviderProps {
+    snackbar: SnackbarSonner;
+}
+export declare const SnackbarProvider: ({ children }: {
+    children: ReactNode;
+}) => JSX.Element;
+export declare const useSnackbar: () => SnackbarProviderProps;
+export {};

package/dist/types/service/ISnackbar.d.ts

@@ -0,0 +1,7 @@
+import { ReactElement } from 'react';
+import { SnackbarVariants } from '@tecsinapse/cortex-core';
+export type TypeSnack = SnackbarVariants['intent'];
+export interface ISnackbar<T> {
+    show(type: TypeSnack, message: string, options?: T): any;
+    custom(component: ReactElement, options?: T): any;
+}

package/dist/types/service/SnackbarSonner.d.ts

@@ -0,0 +1,7 @@
+import { ExternalToast } from 'sonner';
+import React from 'react';
+import { ISnackbar, TypeSnack } from './ISnackbar';
+export declare class SnackbarSonner implements ISnackbar<ExternalToast> {
+    custom(Component: React.ReactElement, options?: ExternalToast): string | number;
+    show(type: TypeSnack, message: string, options?: Omit<ExternalToast, 'className' | 'style'>): string | number;
+}

package/dist/types/service/index.d.ts

@@ -0,0 +1,2 @@
+export * from './SnackbarSonner';
+export * from './ISnackbar';