opus-toolkit-components 1.7.6 → 1.7.8

package/lib/index.d.ts

@@ -1,466 +1,25 @@
 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>;
+  export * from "./components/Accordions";
+  export * from "./components/BarLayout";
+  export * from "./components/Buttons";
+  export * from "./components/Cards";
+  export * from "./components/Cookie";
+  export * from "./components/Footer";
+  export * from "./components/Forms/Checkbox";
+  export * from "./components/Forms/Datepickers";
+  export * from "./components/Forms/Dropdowns";
+  export * from "./components/Forms/Inputs";
+  export * from "./components/Forms/Radios";
+  export * from "./components/Header";
+  export * from "./components/Icon";
+  export * from "./components/IconButton";
+  export * from "./components/Loader";
+  export * from "./components/Modals";
+  export * from "./components/Navbar";
+  export * from "./components/PageTemplate";
+  export * from "./components/Pills";
+  export * from "./components/Profile/ProfileCard";
+  export * from "./components/Sidebar";
+  export * from "./components/Tables";
+  export * from "./components/Text";
 }

package/lib/{opus-components.main.js → main.js}

@@ -3655,16 +3655,16 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(94178);
 /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__);
 
-/**
- * @typedef {Object} BarLayoutProps
- * @property {React.ReactNode} [left]   Left content area
- * @property {React.ReactNode} [center] Center content area
- * @property {React.ReactNode} [right]  Right content area
- * @property {string} [className]       Optional wrapper class
+/**
+ * @typedef {Object} BarLayoutProps
+ * @property {React.ReactNode} [left]   Left content area
+ * @property {React.ReactNode} [center] Center content area
+ * @property {React.ReactNode} [right]  Right content area
+ * @property {string} [className]       Optional wrapper class
  */
 
-/**
- * @param {BarLayoutProps} props
+/**
+ * @param {BarLayoutProps} props
  */
 
 const BarLayout = _ref => {
@@ -48699,80 +48699,80 @@ __webpack_require__.r(__webpack_exports__);
  // Import a spinner icon
 
 
-/**
- * @typedef {'primary'|'secondary'|'tertiary'|'outline'|'destructive'} ButtonRank
+/**
+ * @typedef {'primary'|'secondary'|'tertiary'|'outline'|'destructive'} ButtonRank
  */
 
-/**
- * @typedef {'default'|'disabled'} ButtonState
+/**
+ * @typedef {'default'|'disabled'} ButtonState
  */
 
-/**
- * @typedef {'sm'|'md'|'lg'|'xl'|string} ButtonSize
- *  (Supports custom tailwind text sizes too)
+/**
+ * @typedef {'sm'|'md'|'lg'|'xl'|string} ButtonSize
+ *  (Supports custom tailwind text sizes too)
  */
 
-/**
- * Icon component type from react-icons or your own components
- * @typedef {(props: React.SVGProps<SVGSVGElement>) => JSX.Element} IconComponent
+/**
+ * Icon component type from react-icons or your own components
+ * @typedef {(props: React.SVGProps<SVGSVGElement>) => JSX.Element} IconComponent
  */
 
-/**
- * @typedef {Object} ButtonProps
- *
- * @property {'button'|'submit'|'reset'} [type]
- *   Native button type.
- *
- * @property {ButtonRank} [rank]
- *   Visual rank: primary, secondary, etc.
- *
- * @property {ButtonState} [state]
- *   Current state (default, disabled).
- *
- * @property {string} [text]
- *   Text shown inside the button (ignored when isSaving is true).
- *
- * @property {ButtonSize} [size]
- *   Tailwind text size (sm, md, lg, xl).
- *
- * @property {string} [name]
- *   Standard HTML name attribute + for data-cy.
- *
- * @property {string} [dataCy]
- *   Override for auto-generated test selector.
- *
- * @property {number} [tabIndex]
- *
- * @property {boolean} [isFullWidth]
- *   Expand to full container width.
- *
- * @property {IconComponent} [icon]
- *   Optional icon component (left or right).
- *
- * @property {'left'|'right'} [iconPosition]
- *   Position of icon.
- *
- * @property {boolean} [isIconAnimated]
- *   Enables subtle translate animation on hover.
- *
- * @property {boolean} [isSaving]
- *   Shows a spinner and disables all interaction.
- *
- * @property {string} [savingText]
- *   Text shown when isSaving = true.
- *
- * @property {string} [className]
- *   Extra custom classes.
- *
- * @property {string} [title]
- *   Adds accessible label / tooltip.
- *
- * @property {(event: React.MouseEvent<HTMLButtonElement>) => void} [onClick]
- *   Click handler. Not called during saving or disabled state.
+/**
+ * @typedef {Object} ButtonProps
+ *
+ * @property {'button'|'submit'|'reset'} [type]
+ *   Native button type.
+ *
+ * @property {ButtonRank} [rank]
+ *   Visual rank: primary, secondary, etc.
+ *
+ * @property {ButtonState} [state]
+ *   Current state (default, disabled).
+ *
+ * @property {string} [text]
+ *   Text shown inside the button (ignored when isSaving is true).
+ *
+ * @property {ButtonSize} [size]
+ *   Tailwind text size (sm, md, lg, xl).
+ *
+ * @property {string} [name]
+ *   Standard HTML name attribute + for data-cy.
+ *
+ * @property {string} [dataCy]
+ *   Override for auto-generated test selector.
+ *
+ * @property {number} [tabIndex]
+ *
+ * @property {boolean} [isFullWidth]
+ *   Expand to full container width.
+ *
+ * @property {IconComponent} [icon]
+ *   Optional icon component (left or right).
+ *
+ * @property {'left'|'right'} [iconPosition]
+ *   Position of icon.
+ *
+ * @property {boolean} [isIconAnimated]
+ *   Enables subtle translate animation on hover.
+ *
+ * @property {boolean} [isSaving]
+ *   Shows a spinner and disables all interaction.
+ *
+ * @property {string} [savingText]
+ *   Text shown when isSaving = true.
+ *
+ * @property {string} [className]
+ *   Extra custom classes.
+ *
+ * @property {string} [title]
+ *   Adds accessible label / tooltip.
+ *
+ * @property {(event: React.MouseEvent<HTMLButtonElement>) => void} [onClick]
+ *   Click handler. Not called during saving or disabled state.
  */
 
-/**
- * @param {ButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement>} props
+/**
+ * @param {ButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement>} props
  */
 
 function Button(_ref) {
@@ -48804,7 +48804,7 @@ function Button(_ref) {
   // Define styles for button ranks
   const rankStyles = {
     primary: "bg-[--color-primary-btn] hover:bg-[--color-primary-btn-hover] text-[--color-primary-btn-txt] border-solid border-2 border-[--color-primary-btn] hover:border-[--color-primary-btn-hover]",
-    secondary: "bg-transparent border-2 border-2 border-[--color-primary-btn] hover:border-[--color-secondary-btn-hover] hover:text-[--color-secondary-btn-hover] text-[--color-primary-btn]",
+    secondary: "border-2 border-2 bg-[--color-brand-secondary] border-[--color-stroke] hover:bg-[--color-primary-btn-hover] text-[--color-white]",
     tertiary: "bg-transparent underline text-[--color-text-strong]",
     outline: "bg-[--color-input-bg] border-solid border-2 border-[--color-outline-btn] hover:border-[--color-outline-btn-hover] text-[--color-text-strong]",
     destructive: "bg-[--color-destructive-btn] hover:bg-[--color-destructive-btn-hover] text-[--color-destructive-btn-txt] border-solid border-2 border-[--color-destructive-btn] hover:border-[--color-destructive-btn-hover]"
@@ -63709,4 +63709,4 @@ __webpack_require__.r(__webpack_exports__);
 module.exports = __webpack_exports__;
 /******/ })()
 ;
-//# sourceMappingURL=opus-components.main.js.map
+//# sourceMappingURL=main.js.map