opus-toolkit-components 1.6.9 → 1.7.1

package/lib/index.d.ts

@@ -1,206 +1,466 @@
-declare module "opus-toolkit-components" {
-  import * as React from "react";
-
-  // Accordion
-  export interface AccordionProps {
-    items?: any[];
-    className?: string;
-  }
-  export const Accordion: React.ComponentType<AccordionProps>;
-
-  // Button
-  export interface ButtonProps {
-    children?: React.ReactNode;
-    variant?: string;
-    rank?: string;
-    disabled?: boolean;
-    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
-    className?: string;
-    name?: string;
-    ["data-cy"]?: string;
-  }
-  export const Button: React.ComponentType<ButtonProps>;
-
-  // Card
-  export interface CardProps {
-    children?: React.ReactNode;
-    className?: string;
-  }
-  export const Card: React.ComponentType<CardProps>;
-
-  // Input
-  export interface InputProps {
-    name?: string;
-    value?: string | number;
-    placeholder?: string;
-    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-    className?: string;
-    ["data-cy"]?: string;
-  }
-  export const Input: React.ComponentType<InputProps>;
-
-  // DatePicker
-  export interface DatePickerProps {
-    name?: string;
-    initialDate?: Date | string;
-    label?: string;
-    onChange?: (event: any) => void;
-    className?: string;
-  }
-  export const DatePicker: React.ComponentType<DatePickerProps>;
-
-  // Radio
-  export interface RadioButtonProps {
-    name?: string;
-    value?: string;
-    checked?: boolean;
-    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-  }
-  export const RadioButton: React.ComponentType<RadioButtonProps>;
-
-  // Checkbox
-  export interface CheckboxProps {
-    name?: string;
-    checked?: boolean;
-    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-    label?: string;
-  }
-  export const Checkbox: React.ComponentType<CheckboxProps>;
-
-  // Table
-  export interface TableProps {
-    columns: any[];
-    data: any[];
-    className?: string;
-  }
-  export const Table: React.ComponentType<TableProps>;
-
-  // Dropdown
-  export interface DropdownProps {
-    name?: string;
-    value?: string;
-    options?: { label: string; value: string }[];
-    onChange?: (event: any) => void;
-    className?: string;
-    ["data-cy"]?: string;
-  }
-  export const Dropdown: React.ComponentType<DropdownProps>;
-
-  // Navbar
-  export interface NavbarProps {
-    children?: React.ReactNode;
-    className?: string;
-  }
-  export const Navbar: React.ComponentType<NavbarProps>;
-
-  // Modal
-  export interface ModalProps {
-    open: boolean;
-    onClose: () => void;
-    children?: React.ReactNode;
-    title?: string;
-    className?: string;
-  }
-  export const Modal: React.ComponentType<ModalProps>;
-
-  // Loader
-  export interface LoaderProps {
-    size?: number | string;
-    className?: string;
-  }
-  export const Loader: React.ComponentType<LoaderProps>;
-
-  // Pill
-  export interface PillProps {
-    label: string;
-    variant?: string;
-    className?: string;
-  }
-  export const Pill: React.ComponentType<PillProps>;
-
-  // CookieBanner
-  export interface CookieBannerProps {
-    message?: string;
-    acceptLabel?: string;
-    declineLabel?: string;
-    onAccept?: () => void;
-    onDecline?: () => void;
-  }
-  export const CookieBanner: React.ComponentType<CookieBannerProps>;
-
-  // Text
-  export interface TextProps {
-    variant?: string;
-    as?: keyof JSX.IntrinsicElements;
-    children?: React.ReactNode;
-    className?: string;
-  }
-  export const Text: React.ComponentType<TextProps>;
-
-  // Sidebar
-  export interface SidebarProps {
-    open?: boolean;
-    onClose?: () => void;
-    children?: React.ReactNode;
-  }
-  export const Sidebar: React.ComponentType<SidebarProps>;
-
-  // Header
-  export interface HeaderProps {
-    title?: string;
-    actions?: React.ReactNode;
-    className?: string;
-  }
-  export const Header: React.ComponentType<HeaderProps>;
-
-  // Icon
-  export interface IconProps {
-    name: string;
-    size?: number | string;
-    className?: string;
-  }
-  export const Icon: React.ComponentType<IconProps>;
-
-  // Footer
-  export interface FooterProps {
-    left?: React.ReactNode;
-    center?: React.ReactNode;
-    right?: React.ReactNode;
-    className?: string;
-  }
-  export const Footer: React.ComponentType<FooterProps>;
-
-  // BarLayout
-  export interface BarLayoutProps {
-    left?: React.ReactNode;
-    center?: React.ReactNode;
-    right?: React.ReactNode;
-    className?: string;
-  }
-  export const BarLayout: React.ComponentType<BarLayoutProps>;
-
-  // PageTemplate
-  export interface PageTemplateProps {
-    headerTitle?: string;
-    headerLeft?: React.ReactNode;
-    headerCenter?: React.ReactNode;
-    headerRight?: React.ReactNode;
-
-    footerLeft?: React.ReactNode;
-    footerCenter?: React.ReactNode;
-    footerRight?: React.ReactNode;
-
-    children?: React.ReactNode;
-    className?: string;
-  }
-  export const PageTemplate: React.ComponentType<PageTemplateProps>;
-
-  // ProfileCard
-  export interface ProfileCardProps {
-    name: string;
-    description?: string;
-    avatarUrl?: string;
-    className?: string;
-  }
-  export const ProfileCard: React.ComponentType<ProfileCardProps>;
-}
+declare module "opus-toolkit-components" {
+  import * as React from "react";
+
+  // Accordion
+  export interface AccordionProps {
+    title: string | React.ReactNode;
+    handleToggle?: (index: number) => void;
+    activeIndex?: number;
+    index: number;
+    isPreview?: boolean;
+    isLocked?: boolean;
+    onExitPreview?: () => void;
+    content: React.ReactNode;
+    preview?: React.ReactNode;
+    isPill?: boolean;
+    pillText?: string;
+    pillStatus?: "success" | "warning" | "error" | "info" | string;
+    pillIcon?: React.ReactNode;
+    disabled?: boolean;
+  }
+
+  export const Accordion: React.ComponentType<AccordionProps>;
+
+  // BarLayout
+  export interface BarLayoutProps {
+    left?: React.ReactNode;
+    center?: React.ReactNode;
+    right?: React.ReactNode;
+    className?: string;
+  }
+
+  export const BarLayout: React.ComponentType<BarLayoutProps>;
+
+  // Button
+  export type ButtonRank =
+    | "primary"
+    | "secondary"
+    | "tertiary"
+    | "outline"
+    | "destructive";
+
+  export type ButtonState = "default" | "disabled";
+
+  export type ButtonSize = "sm" | "md" | "lg" | "xl" | string;
+
+  export type IconComponent = (
+    props: React.SVGProps<SVGSVGElement>,
+  ) => JSX.Element;
+
+  export interface ButtonProps
+    extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    type?: "button" | "submit" | "reset";
+    rank?: ButtonRank;
+    state?: ButtonState;
+    text?: string;
+    size?: ButtonSize;
+    name?: string;
+    dataCy?: string;
+    tabIndex?: number;
+    isFullWidth?: boolean;
+    icon?: IconComponent;
+    iconPosition?: "left" | "right";
+    isIconAnimated?: boolean;
+    isSaving?: boolean;
+    savingText?: string;
+    className?: string;
+    title?: string;
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+  }
+
+  export const Button: React.ComponentType<ButtonProps>;
+
+  // Card
+  export type CardIntent =
+    | "default"
+    | "info"
+    | "warning"
+    | "success"
+    | "error"
+    | "brand"
+    | "brandSecondary";
+
+  export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+    intent?: CardIntent;
+    className?: string;
+    children?: React.ReactNode;
+  }
+
+  export const Card: React.ComponentType<CardProps>;
+
+  // CookieBanner
+  export interface CookieBannerProps {
+    logo?: string;
+    policyTxt?: string;
+    linkTxt?: string;
+    isVisible?: boolean;
+    onAccept?: () => void;
+    onLearnMore?: () => void;
+    intent?: string;
+  }
+
+  export const CookieBanner: React.ComponentType<CookieBannerProps>;
+
+  // Footer
+  export interface FooterProps {
+    left?: React.ReactNode;
+    center?: React.ReactNode;
+    right?: React.ReactNode;
+    className?: string;
+  }
+
+  export const Footer: React.ComponentType<FooterProps>;
+
+  // Checkbox
+
+  export interface CheckboxChangeEvent {
+    target: {
+      name: string;
+      value: boolean;
+    };
+  }
+
+  export interface CheckboxProps extends React.HTMLAttributes<HTMLDivElement> {
+    label: string;
+    name: string;
+    onChange?: (event: CheckboxChangeEvent) => void;
+    value?: boolean;
+    isValid?: boolean;
+    errorMessage?: string;
+    disabled?: boolean;
+    title?: string;
+    dataCy?: string;
+  }
+
+  export const Checkbox: React.ComponentType<CheckboxProps>;
+
+  // Datepicker
+  export interface DatePickerChangeEvent {
+    target: {
+      name: string;
+      value: string;
+    };
+  }
+
+  export interface DatePickerProps
+    extends React.HTMLAttributes<HTMLDivElement> {
+    initialDate?: string;
+    label?: string;
+    isValid?: boolean;
+    errorMessage?: string;
+    name?: string;
+    onChange?: (event: DatePickerChangeEvent) => void;
+    value?: string;
+    className?: string;
+    title?: string;
+    required?: boolean;
+    dataCy?: string;
+    disabled?: boolean;
+  }
+
+  export const DatePicker: React.ComponentType<DatePickerProps>;
+
+  // Dropdown
+  export interface DropdownItem {
+    label: string;
+    value: string | number;
+  }
+
+  export interface DropdownChangeEvent {
+    target: {
+      name: string;
+      value: string | number;
+    };
+  }
+
+  export type IconComponent = (
+    props: React.SVGProps<SVGSVGElement>,
+  ) => JSX.Element;
+
+  export interface DropdownProps extends React.HTMLAttributes<HTMLDivElement> {
+    items?: DropdownItem[];
+    label?: string;
+    isValid?: boolean;
+    required?: boolean;
+    placeholder?: string;
+    name?: string;
+    className?: string;
+    title?: string;
+    tabIndex?: string | number;
+    onChange?: (event: DropdownChangeEvent) => void;
+    value?: string | number;
+    Icon?: IconComponent;
+    errorMessage?: string;
+    disabled?: boolean;
+    dataCy?: string;
+  }
+
+  export const Dropdown: React.ComponentType<DropdownProps>;
+
+  // Input
+  export type IconComponent = (
+    props: React.SVGProps<SVGSVGElement>,
+  ) => JSX.Element;
+
+  export type CustomComponent = (props: any) => JSX.Element;
+
+  export interface InputProps
+    extends React.InputHTMLAttributes<HTMLInputElement> {
+    label: string;
+    placeholder?: string;
+    type?:
+      | "text"
+      | "email"
+      | "password"
+      | "number"
+      | "search"
+      | "tel"
+      | "url"
+      | "date"
+      | "datetime-local"
+      | "month"
+      | "time"
+      | "week"
+      | string;
+    tabIndex?: string | number;
+    title?: string;
+    name?: string;
+    isValid?: boolean;
+    errorMessage?: string;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    className?: string;
+    value?: string | number;
+    Icon?: IconComponent;
+    iconPosition?: "left" | "right";
+    isAnimated?: boolean;
+    required?: boolean;
+    disabled?: boolean;
+    shouldRenderCustomComponent?: boolean;
+    customComponent?: CustomComponent;
+    customComponentProps?: Record<string, any>;
+    dataCy?: string;
+  }
+
+  export const Input: React.ForwardRefExoticComponent<
+    InputProps & React.RefAttributes<HTMLInputElement>
+  >;
+
+  // Radios
+  export interface RadioOption {
+    value: string | number;
+    label: string;
+  }
+
+  export interface RadioChangeEvent {
+    target: {
+      name: string;
+      value: string | number;
+    };
+  }
+
+  export interface RadioButtonProps
+    extends React.HTMLAttributes<HTMLDivElement> {
+    label: string;
+    options?: RadioOption[];
+    name: string;
+    value?: string | number;
+    onChange?: (event: RadioChangeEvent) => void;
+    className?: string;
+    tabIndex?: string | number;
+    title?: string;
+    isValid?: boolean;
+    errorMessage?: string;
+    required?: boolean;
+    dataCy?: string;
+    disabled?: boolean;
+  }
+
+  export const RadioButton: React.FC<RadioButtonProps>;
+
+  // Header
+  export interface HeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+    title: string;
+    center?: React.ReactNode;
+    right?: React.ReactNode;
+    className?: string;
+  }
+
+  export const Header: React.FC<HeaderProps>;
+
+  // Icon
+  export type HeroIconName = keyof typeof HeroIcons;
+  export type C247IconName = keyof typeof C247Icons;
+  export type IconName = HeroIconName | C247IconName;
+
+  export type IconLibrary = "hero" | "c247";
+
+  export interface IconProps extends React.SVGProps<SVGSVGElement> {
+    name: IconName;
+    library?: IconLibrary;
+    size?: number;
+    className?: string;
+    color?: string;
+  }
+
+  export const Icon: React.FC<IconProps>;
+
+  // Loader
+  export interface LoaderProps {
+    isLoading: boolean;
+    loaderText?: string;
+    customLoader?: React.ReactNode;
+    className?: string;
+  }
+
+  export const Loader: React.FC<LoaderProps>;
+
+  // Modal
+  export interface ModalProps {
+    isOpen: boolean;
+    onClose?: () => void;
+    isLoading?: boolean;
+    loaderText?: string;
+    header?: React.ReactNode;
+    hideHeader?: boolean;
+    body?: React.ReactNode;
+    footer?: React.ReactNode;
+    hideFooter?: boolean;
+    className?: string;
+    footerClassName?: string;
+    headerClassName?: string;
+  }
+
+  export const Modal: React.FC<ModalProps>;
+
+  // Navbar
+  export interface NavbarProps {
+    children?: React.ReactNode;
+    logo?: string;
+    className?: string;
+    maxWidth?: string;
+  }
+
+  export const Navbar: React.FC<NavbarProps>;
+
+  // PageTemplate
+  export interface PageTemplateProps {
+    headerTitle?: string;
+    headerCenter?: React.ReactNode;
+    headerRight?: React.ReactNode;
+
+    footerLeft?: React.ReactNode;
+    footerCenter?: React.ReactNode;
+    footerRight?: React.ReactNode;
+
+    children: React.ReactNode;
+    className?: string;
+  }
+
+  export const PageTemplate: React.FC<PageTemplateProps>;
+
+  // Pills
+  export interface PillProps extends React.HTMLAttributes<HTMLSpanElement> {
+    text?: string;
+    status?: "primary" | "danger" | "warning" | "success" | "info" | "notice";
+    className?: string;
+    icon?: (props: React.SVGProps<SVGSVGElement>) => JSX.Element;
+  }
+
+  export const Pill: React.FC<PillProps>;
+
+  // ProfileCard
+  export interface ProfileCardUser {
+    name: string;
+    role: string;
+  }
+
+  export interface ProfileCardProps
+    extends React.HTMLAttributes<HTMLDivElement> {
+    user: ProfileCardUser;
+    href?: string;
+  }
+
+  export const ProfileCard: React.FC<ProfileCardProps>;
+
+  // Sidebar
+  export interface SidebarMenuItem {
+    key: string | number;
+    name: string;
+    icon?: string;
+    href?: string;
+  }
+
+  export interface SidebarMenuGroup {
+    key: string | number;
+    name: string;
+    children: SidebarMenuItem[];
+  }
+
+  export type SidebarMenu = SidebarMenuItem | SidebarMenuGroup;
+
+  export interface SidebarUser {
+    id: string | number;
+    name: string;
+    role: string;
+    avatar?: string;
+  }
+
+  export interface SidebarProps extends React.HTMLAttributes<HTMLDivElement> {
+    menus: SidebarMenu[];
+    user: SidebarUser;
+    activeItem?: string | number | null;
+    onItemClick?: (key: string | number) => void;
+    logo?: string;
+    searchValue?: string;
+    onSearchChange?: (value: string) => void;
+  }
+
+  export const Sidebar: React.FC<SidebarProps>;
+
+  // Table
+  export interface TableColumn {
+    key: string;
+    header: string;
+    render?: (row: any) => React.ReactNode;
+  }
+
+  export interface TableProps extends React.HTMLAttributes<HTMLDivElement> {
+    data?: TableColumn[];
+    rows?: any[];
+    className?: string;
+    rowClassName?: string;
+    cellClassName?: string;
+    headRowClassName?: string;
+    headCellClassName?: string;
+    rowKeyExtractor?: (row: any, index: number) => string | number;
+  }
+
+  export const Table: React.FC<TableProps>;
+
+  // Text
+  export type TextVariant =
+    | "h1"
+    | "h2"
+    | "h3"
+    | "h4"
+    | "h5"
+    | "h6"
+    | "body"
+    | "small"
+    | "caption"
+    | "label";
+
+  export type TextAs = keyof JSX.IntrinsicElements | React.ComponentType<any>;
+
+  export interface TextProps extends React.HTMLAttributes<HTMLElement> {
+    variant?: TextVariant;
+    as?: TextAs;
+    className?: string;
+    color?: string;
+    children?: React.ReactNode;
+    name?: string;
+    dataCy?: string;
+  }
+
+  export const Text: React.FC<TextProps>;
+}

package/lib/opus-components.main.js

@@ -1587,7 +1587,7 @@ const PageTemplate = _ref => {
       center: headerCenter,
       right: headerRight
     }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)("main", {
-      className: "flex-1 p-6",
+      className: "flex-1 p-4",
       children: children
     }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_Footer_Footer__WEBPACK_IMPORTED_MODULE_2__["default"], {
       left: footerLeft,
@@ -63579,7 +63579,7 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
-module.exports = __webpack_exports__;
+module.exports = __webpack_exports__.named;
 /******/ })()
 ;
 //# sourceMappingURL=opus-components.main.js.map