@bcrumbs.net/bc-ui 0.0.9 → 0.0.11

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bcrumbs.net/bc-ui",
   "description": "The UI components of Bread Crumbs portals",
-  "version": "0.0.9",
+  "version": "0.0.11",
   "keyword": [
     "bcrumbs",
     "bc-ui"
@@ -11,7 +11,8 @@
     "@emotion/react": "11.5.0",
     "@emotion/styled": "11.3.0",
     "@radix-ui/themes": "^3.1.5",
-    "@radix-ui/react-icons": "^1.3.2"
+    "@radix-ui/react-icons": "^1.3.2",
+    "@marsidev/react-turnstile": "^1.1.0"
   },
   "dependencies": {
     "react-date-range": "^2.0.1",

package/src/index.d.ts

@@ -31,7 +31,9 @@ export * from './lib/inputTags';
 export * from './lib/utils';
 export * from './lib/radioButton';
 export * from './lib/charts/pieChart';
+export * from './lib/charts/NewPieChart/NewPieChart';
 export * from './lib/charts/barLineChart';
+export * from './lib/charts/HorizontalStatisticCard/HorizontalStatisticCard';
 export * from './lib/dateRangePicker';
 export * from './lib/InputWithSuggestions';
 export * from './lib/textArea';
@@ -52,6 +54,7 @@ export * from './lib/newComponents/BCRadioGroupItem/types';
 export * from './lib/baseComponents/radio-group';
 export * from './lib/baseComponents/checkbox';
 export * from './lib/newComponents/BCNewCheckBox/BCNewCheckBox';
+export * from './lib/turnstile';
 export * from './lib/button/bcbutton';
 export * from './lib/button/types';
 export * from './lib/block/bcblock';

package/src/lib/baseComponents/button.d.ts

@@ -5,6 +5,8 @@ interface ButtonStyleProps {
 }
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, ButtonStyleProps {
     asChild?: boolean;
+    loading?: boolean;
+    loadingPosition?: 'left' | 'right';
 }
 declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
 export { Button };

package/src/lib/charts/HorizontalStatisticCard/HorizontalStatisticCard.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+interface HorizontalStatisticCardProps {
+    title: string;
+    value: string | number;
+    Icon: React.ReactNode;
+    width?: string;
+    gradientStart?: string;
+    gradientEnd?: string;
+    loading?: boolean;
+}
+export declare const HorizontalStatisticCard: ({ title, value, Icon, width, gradientStart, gradientEnd, loading, }: HorizontalStatisticCardProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/src/lib/charts/NewPieChart/NewPieChart.d.ts

@@ -0,0 +1,13 @@
+interface NewPieChartProps {
+    data: {
+        name: string;
+        value: number;
+        color: string;
+    }[];
+    width?: number;
+    height?: number;
+    value?: number;
+    label?: string;
+}
+export declare const NewPieChart: ({ data, value, label, width, height }: NewPieChartProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/src/lib/constants/Color.d.ts

@@ -13,6 +13,7 @@ export declare enum NewColors {
     PRIMARY_DARKER = "var(--bc-primary-darker)",
     PRIMARY_DARKER_2 = "var(--bc-primary-darker-2)",
     PRIMARY_PARAGRAPH = "var(--bc-primary-paragraph)",
+    PRIMARY_PARAGRAPH_DARKER = "var(--bc-primary-paragraph-darker)",
     INBOX_BACKGROUND = "var(--bc-inbox-background)",
     BACKGROUND_DARKER = "var(--bc-background-darker)",
     INFO_COLOR = "var(--bc-info)",
@@ -67,6 +68,12 @@ export declare enum NewColors {
     GREY_LIGHT_BORDER = "#e4e4e4",
     WARNING_DOWNLOAD = "rgba(255, 153, 0, 0.1)",
     GREY_WHITE = "#f0f1f5",
+    LIGHT_GRAY = "var(--bc-light-gray)",
+    CHARTS_SUCCESS = "var(--bc-charts-success)",
+    CHARTS_WARNING = "var(--bc-charts-warning)",
+    CHARTS_DANGER = "var(--bc-charts-danger)",
+    CHARTS_LABEL = "var(--bc-charts-label)",
+    CHARTS_LEGEND_LABEL = "var(--bc-charts-legend-label)",
     SECONDARY80 = "rgb(106, 107, 131, 0.8)",
     SECONDARY70 = "rgb(106, 107, 131, 0.7)",
     SECONDARY50 = "rgb(106, 107, 131, 0.5)",

package/src/lib/dropList/bcdrop-list.d.ts

@@ -1,6 +1,8 @@
 import React from 'react';
 import { ButtonSize, BCDropListOptionsType } from '../constants';
 import { SerializedStyles } from '@emotion/react';
+export declare const DropListButtonStyle: SerializedStyles;
+export declare const DropListMenuStyle: SerializedStyles;
 export interface BCDropListProps {
     className?: string;
     selected?: string;
@@ -25,8 +27,7 @@ export interface BCDropListProps {
     id?: string;
     searchable?: boolean;
     searchPlaceholder?: string;
+    usePortal?: boolean;
 }
-export declare const DropListButtonStyle: SerializedStyles;
-export declare const DropListMenuStyle: SerializedStyles;
-export declare const BCDropList: ({ className, selected, options, onSelectOption, noEmpty, placeholder, emptyText, buttonSize, rtl, icon, containerCss, buttonCss, dropDownContentCss, loading, disabled, allowCreate, onCreateNew, createPlaceholder, addText, createText, id, searchable, searchPlaceholder, }: BCDropListProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function BCDropList({ className, selected, options, onSelectOption, noEmpty, placeholder, emptyText, buttonSize, rtl, icon, containerCss, buttonCss, dropDownContentCss, loading, disabled, allowCreate, onCreateNew, createPlaceholder, addText, createText, id, searchable, searchPlaceholder, usePortal, }: BCDropListProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export default BCDropList;

package/src/lib/dropList/style.d.ts

@@ -0,0 +1,81 @@
+/// <reference types="react" />
+import { SerializedStyles } from '@emotion/react';
+export declare const Container: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & {
+    rtl?: boolean | undefined;
+    containerCss?: SerializedStyles | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const DropButtonNote: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & {
+    rtl?: boolean | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const DropDownItemNote: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & {
+    rtl?: boolean | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const Icon: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & {
+    rtl?: boolean | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {}>;
+export declare const LoadingSpinner: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const CreateInputContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & {
+    rtl?: boolean | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const CreateInput: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & {
+    rtl?: boolean | undefined;
+}, import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {}>;
+export declare const CreateButton: import("@emotion/styled").StyledComponent<import("../baseComponents/button").ButtonProps & import("react").RefAttributes<HTMLButtonElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export declare const SearchInputContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & {
+    rtl?: boolean | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const SearchInput: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & {
+    rtl?: boolean | undefined;
+}, import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {}>;
+export declare const SearchIcon: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & {
+    rtl?: boolean | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const NoResultsMessage: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & {
+    rtl?: boolean | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const DropDownContent: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & {
+    rtl?: boolean | undefined;
+    openUpward?: boolean | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const PortalWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/src/lib/icon/bcicon.d.ts

@@ -22,6 +22,7 @@ export interface BCIconsProps {
 }
 export declare const BCIcons: {
     WhatsApp: ({ width, height, fill }: BCIconsProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+    Instagram: ({ width, height }: BCIconsProps) => import("@emotion/react/jsx-runtime").JSX.Element;
     Facebook: ({ width, height, fill }: BCIconsProps) => import("@emotion/react/jsx-runtime").JSX.Element;
     Google: ({ width, height, fill }: BCIconsProps) => import("@emotion/react/jsx-runtime").JSX.Element;
     Broadcast: ({ width, height, fill }: BCIconsProps) => import("@emotion/react/jsx-runtime").JSX.Element;
@@ -294,7 +295,7 @@ export declare const BCIcons: {
         height?: number | undefined;
         fill?: string | undefined;
     }) => import("@emotion/react/jsx-runtime").JSX.Element;
-    CompletedBroadcastIcon: ({ width, height, fill }: {
+    DoubleHollowChecks: ({ width, height, fill }: {
         width?: number | undefined;
         height?: number | undefined;
         fill?: string | undefined;
@@ -309,6 +310,16 @@ export declare const BCIcons: {
         height?: number | undefined;
         fill?: string | undefined;
     }) => import("@emotion/react/jsx-runtime").JSX.Element;
+    ArchivedClient: ({ width, height, fill }: {
+        width?: number | undefined;
+        height?: number | undefined;
+        fill?: string | undefined;
+    }) => import("@emotion/react/jsx-runtime").JSX.Element;
+    ActiveCient: ({ width, height, fill }: {
+        width?: number | undefined;
+        height?: number | undefined;
+        fill?: string | undefined;
+    }) => import("@emotion/react/jsx-runtime").JSX.Element;
     CancelDialogIcon: ({ width, height, fill }: {
         width?: number | undefined;
         height?: number | undefined;
@@ -324,4 +335,64 @@ export declare const BCIcons: {
         height?: number | undefined;
         fill?: string | undefined;
     }) => import("@emotion/react/jsx-runtime").JSX.Element;
+    DoubleSolidChecks: ({ width, height, fill }: {
+        width?: number | undefined;
+        height?: number | undefined;
+        fill?: string | undefined;
+    }) => import("@emotion/react/jsx-runtime").JSX.Element;
+    DoubleDollarSigns: ({ width, height, fill }: {
+        width?: number | undefined;
+        height?: number | undefined;
+        fill?: string | undefined;
+    }) => import("@emotion/react/jsx-runtime").JSX.Element;
+    DoubleChats: ({ width, height, fill }: {
+        width?: number | undefined;
+        height?: number | undefined;
+        fill?: string | undefined;
+    }) => import("@emotion/react/jsx-runtime").JSX.Element;
+    SingleCheck: ({ width, height, fill }: {
+        width?: number | undefined;
+        height?: number | undefined;
+        fill?: string | undefined;
+    }) => import("@emotion/react/jsx-runtime").JSX.Element;
+    CircledCross: ({ width, height, fill }: {
+        width?: number | undefined;
+        height?: number | undefined;
+        fill?: string | undefined;
+    }) => import("@emotion/react/jsx-runtime").JSX.Element;
+    Clock: ({ width, height, fill }: {
+        width?: number | undefined;
+        height?: number | undefined;
+        fill?: string | undefined;
+    }) => import("@emotion/react/jsx-runtime").JSX.Element;
+    WhatsappBackArrow: ({ width, height, fill }: {
+        width?: number | undefined;
+        height?: number | undefined;
+        fill?: string | undefined;
+    }) => import("@emotion/react/jsx-runtime").JSX.Element;
+    WhatsappCall: ({ width, height, fill }: {
+        width?: number | undefined;
+        height?: number | undefined;
+        fill?: string | undefined;
+    }) => import("@emotion/react/jsx-runtime").JSX.Element;
+    WhatsappVideoCall: ({ width, height, fill }: {
+        width?: number | undefined;
+        height?: number | undefined;
+        fill?: string | undefined;
+    }) => import("@emotion/react/jsx-runtime").JSX.Element;
+    BCrumbsSlug: ({ width, height, fill }: {
+        width?: number | undefined;
+        height?: number | undefined;
+        fill?: string | undefined;
+    }) => import("@emotion/react/jsx-runtime").JSX.Element;
+    MultiplicationSign: ({ width, height, fill }: {
+        width?: number | undefined;
+        height?: number | undefined;
+        fill?: string | undefined;
+    }) => import("@emotion/react/jsx-runtime").JSX.Element;
+    InfoCircle: ({ width, height, fill }: {
+        width?: number | undefined;
+        height?: number | undefined;
+        fill?: string | undefined;
+    }) => import("@emotion/react/jsx-runtime").JSX.Element;
 };

package/src/lib/newComponents/BCNewTable/types.d.ts

@@ -60,7 +60,10 @@ export type TableAction = {
     confirm?: string;
     loading?: boolean;
     confirmAction?: (info: any) => void;
+    confirmCssStyle?: SerializedStyles;
     disabled?: boolean;
     headerItemsPosition?: string;
     inDialog?: boolean;
+    dialogIcon?: React.ReactNode;
+    dialogIconBackgroundColor?: string;
 };

package/src/lib/turnstile/BCTurnstile.d.ts

@@ -0,0 +1,47 @@
+/// <reference types="react" />
+export type TurnstileTheme = 'light' | 'dark' | 'auto';
+export type TurnstileSize = 'normal' | 'compact';
+export interface BCTurnstileProps {
+    /** Cloudflare Turnstile site key */
+    siteKey: string;
+    /** Callback when verification succeeds */
+    onSuccess?: (token: string) => void;
+    /** Callback when verification fails */
+    onError?: (error?: string) => void;
+    /** Callback when token expires */
+    onExpire?: () => void;
+    /** Widget theme */
+    theme?: TurnstileTheme;
+    /** Widget size */
+    size?: TurnstileSize;
+    /** Additional class name */
+    className?: string;
+    /** Action identifier for analytics */
+    action?: string;
+}
+export interface BCTurnstileRef {
+    /** Reset the widget */
+    reset: () => void;
+    /** Get the current response token */
+    getResponse: () => string | undefined;
+    /** Execute the challenge (for invisible mode) */
+    execute: () => void;
+}
+/**
+ * BCTurnstile - Cloudflare Turnstile CAPTCHA component
+ *
+ * Usage:
+ * ```tsx
+ * const turnstileRef = useRef<BCTurnstileRef>(null);
+ * const [token, setToken] = useState<string | null>(null);
+ *
+ * <BCTurnstile
+ *   ref={turnstileRef}
+ *   siteKey="your-site-key"
+ *   onSuccess={(token) => setToken(token)}
+ *   onError={() => setToken(null)}
+ * />
+ * ```
+ */
+export declare const BCTurnstile: import("react").ForwardRefExoticComponent<BCTurnstileProps & import("react").RefAttributes<BCTurnstileRef>>;
+export default BCTurnstile;

package/src/lib/turnstile/index.d.ts

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