@bcrumbs.net/bc-ui 0.0.13 → 0.0.15

package/package.json

@@ -1,13 +1,16 @@
 {
   "name": "@bcrumbs.net/bc-ui",
   "description": "The UI components of Bread Crumbs portals",
-  "version": "0.0.13",
+  "version": "0.0.15",
   "keyword": [
     "bcrumbs",
     "bc-ui"
   ],
   "peerDependencies": {
-    "react": "18.3.1",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "i18next": "^21.0.0",
+    "react-i18next": "^11.0.0",
     "@emotion/react": "11.5.0",
     "@emotion/styled": "11.3.0",
     "@radix-ui/themes": "^3.1.5",

package/src/index.d.ts

@@ -41,11 +41,14 @@ export * from './lib/dateRangePicker';
 export * from './lib/InputWithSuggestions';
 export * from './lib/textArea';
 export * from './lib/tagDisplay/TagDisplay';
+export * from './lib/coloredTag/getDynamicTagColors';
+export * from './lib/coloredTag/ColoredTag';
 export * from './lib/styledFormInput/StyledFormInput';
 export * from './lib/newComponents/BCNewTable/BCNewTable';
 export * from './lib/newComponents/BCNewDropdown/BCNewDropdown';
 export * from './lib/newComponents/BCNewTooltip/BCNewTooltip';
 export * from './lib/newComponents/BCNewAlertDialog/BCNewAlertDialog';
+export type { RAlertDialogProps } from './lib/newComponents/BCNewAlertDialog/BCNewAlertDialog';
 export * from './lib/newComponents/BCNewDialog/BCNewDialog';
 export * from './lib/newComponents/BCRadioGroupItem/BCRadioItem';
 export * from './lib/newComponents/BCNewTabs/BCNewTabs';

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 interface ButtonStyleProps {
-    variant?: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link';
+    variant?: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link' | 'warning';
     size?: 'default' | 'sm' | 'lg' | 'icon';
 }
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, ButtonStyleProps {

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

@@ -0,0 +1,21 @@
+/**
+ * Formats Y-axis tick values with a leading zero for decimals (e.g. 0.75, not .75).
+ * Uses Western numerals for consistent chart readability across locales.
+ */
+export declare function formatChartAxisTick(value: number): string;
+export declare const CHART_Y_AXIS_WIDTH = 44;
+/** Gap between Y-axis line and tick labels (larger in RTL where axis is on the right). */
+export declare function getChartYAxisTickMargin(rtl: boolean): number;
+/**
+ * Positions labels inside the plot area, away from the axis line.
+ * Right-side axis (RTL): anchor end + negative dx shifts labels left of the line.
+ * Left-side axis (LTR): same anchor keeps labels in the margin to the left of the line.
+ */
+export declare function getChartYAxisTickStyle(rtl: boolean): {
+    textAnchor: "end";
+    dx: number;
+};
+/** Space between X-axis category labels and the horizontal axis line. */
+export declare const CHART_X_AXIS_TICK_MARGIN = 10;
+/** Merges Recharts Y-axis tick SVG props (tick may also be a component or boolean). */
+export declare function mergeYAxisTickProps(base: Record<string, unknown>, override: unknown, rtlStyle: ReturnType<typeof getChartYAxisTickStyle>): Record<string, unknown>;

package/src/lib/coloredTag/ColoredTag.d.ts

@@ -0,0 +1,15 @@
+export type ColoredTagProps = {
+    /** Text shown inside the tag; also drives the derived color. */
+    label: string;
+    /** Renders larger sizing for mobile layouts. */
+    isMobile?: boolean;
+    /** When provided, shows a remove (×) button and calls this on click. */
+    onRemove?: () => void;
+    /** Accessible title/tooltip for the remove button. */
+    removeTitle?: string;
+};
+/**
+ * Generic tag chip with a stable, near-unique color derived from its label.
+ * Same label always yields the same color across renders.
+ */
+export declare const ColoredTag: ({ label, isMobile, onRemove, removeTitle }: ColoredTagProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/src/lib/coloredTag/getDynamicTagColors.d.ts

@@ -0,0 +1,13 @@
+export type DynamicTagColors = {
+    color: string;
+    backgroundColor: string;
+    borderColor: string;
+};
+/**
+ * Derives a stable, near-unique color set for an arbitrary tag string.
+ *
+ * Unlike the predefined state maps, this hashes the full tag text into an HSL
+ * hue so every distinct tag gets its own color while staying consistent across
+ * renders (same tag -> same color).
+ */
+export declare const getDynamicTagColors: (tag: string) => DynamicTagColors;

package/src/lib/hooks/useForm/index.d.ts

@@ -28,7 +28,7 @@ interface useBCFormReturnFunctions {
     validateForm: () => boolean;
     onChange: (targetVal: string, e: React.ChangeEvent<HTMLInputElement>) => void;
     resetValidationStates: () => void;
-    renderField: (name: string, label: string, type: FieldType, readonly?: boolean, placeholder?: string, tooltip?: string, dynamicStyle?: SerializedStyles) => JSX.Element;
+    renderField: (name: string, label: string, type: FieldType, readonly?: boolean, placeholder?: string, tooltip?: string, dynamicStyle?: SerializedStyles, autoComplete?: string) => JSX.Element;
     _renderFieldInput: (name: string, type: FieldType, readonly: boolean, placeholder: string) => JSX.Element;
     onDroplistSelectionChange: (name: string, selectedKey?: string) => void;
     renderDroplistField: (name: string, label: string, options: BCDropListOptionsType[], placeholder?: string, tooltip?: string, lang?: boolean, searchable?: boolean, labelStyle?: SerializedStyles, containerStyle?: SerializedStyles, loading?: boolean, noEmpty?: boolean, usePortal?: boolean) => JSX.Element;

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

@@ -446,4 +446,24 @@ export declare const BCIcons: {
         height?: number | undefined;
         fill?: string | undefined;
     }) => import("@emotion/react/jsx-runtime").JSX.Element;
+    HelpCircle: ({ width, height, fill }: {
+        width?: number | undefined;
+        height?: number | undefined;
+        fill?: string | undefined;
+    }) => import("@emotion/react/jsx-runtime").JSX.Element;
+    SingleUser: ({ width, height, fill }: {
+        width?: number | undefined;
+        height?: number | undefined;
+        fill?: string | undefined;
+    }) => import("@emotion/react/jsx-runtime").JSX.Element;
+    ChatWithBubble: ({ width, height, fill }: {
+        width?: number | undefined;
+        height?: number | undefined;
+        fill?: string | undefined;
+    }) => import("@emotion/react/jsx-runtime").JSX.Element;
+    Clock2: ({ width, height, fill }: {
+        width?: number | undefined;
+        height?: number | undefined;
+        fill?: string | undefined;
+    }) => import("@emotion/react/jsx-runtime").JSX.Element;
 };

package/src/lib/multiSelector/MutliSelector.d.ts

@@ -1,9 +1,4 @@
-/// <reference types="react" />
 import { BCDropListOptionsType } from '../constants/Droplist';
-export declare const TagContainer: 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 interface MultiSelectorProps {
     onSelect: (value: string | undefined) => void;
     options: BCDropListOptionsType[];

package/src/lib/navigation/types.d.ts

@@ -7,6 +7,7 @@ export type SubMenuItemsType = {
     icon: string | ReactElement;
     tags?: string[];
     description?: string;
+    hide?: boolean;
 };
 export type SubMenuType = {
     title?: string;

package/src/lib/newComponents/BCNewAlertDialog/BCNewAlertDialog.d.ts

@@ -1,3 +1,28 @@
 import React from 'react';
-import { RAlertDialogProps } from './types';
-export declare const BCNewAlertDialog: React.FC<RAlertDialogProps>;
+import type { SerializedStyles } from '@emotion/react';
+export interface RAlertDialogProps {
+    component?: React.ReactNode;
+    title?: string;
+    description?: string;
+    cancelText?: string;
+    cancelCssStyle?: SerializedStyles;
+    cancelAction?: () => void;
+    confirmText?: string;
+    confirmCssStyle?: SerializedStyles;
+    confirmAction: () => void;
+    loading?: boolean;
+    disabled?: boolean;
+    headerItemsPosition?: string;
+    disableTrigger?: boolean;
+    triggerCssStyle?: SerializedStyles;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    titleCssStyle?: SerializedStyles;
+    descriptionCssStyle?: SerializedStyles;
+    noTrigger?: boolean;
+    rtl?: boolean;
+    icon?: React.ReactNode;
+    iconBackgroundColor?: string;
+    noConfirmButton?: boolean;
+}
+export declare const BCNewAlertDialog: ({ component, title, description, cancelText, cancelCssStyle, confirmText, confirmCssStyle, confirmAction, triggerCssStyle, headerItemsPosition, disableTrigger, open, onOpenChange, titleCssStyle, descriptionCssStyle, noTrigger, rtl, icon, iconBackgroundColor, noConfirmButton, cancelAction, }: RAlertDialogProps) => import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -1,27 +1 @@
-import { SerializedStyles } from '@emotion/react';
-import { ReactNode } from 'react';
-export type RAlertDialogProps = {
-    component?: ReactNode;
-    title?: string;
-    description?: string;
-    cancelText?: string;
-    cancelCssStyle?: SerializedStyles;
-    cancelAction?: () => void;
-    confirmText?: string;
-    confirmCssStyle?: SerializedStyles;
-    confirmAction: () => void;
-    loading?: boolean;
-    disabled?: boolean;
-    headerItemsPosition?: string;
-    disableTrigger?: boolean;
-    triggerCssStyle?: SerializedStyles;
-    open?: boolean;
-    onOpenChange?: (open: boolean) => void;
-    titleCssStyle?: SerializedStyles;
-    descriptionCssStyle?: SerializedStyles;
-    noTrigger?: boolean;
-    rtl?: boolean;
-    icon?: ReactNode;
-    iconBackgroundColor?: string;
-    noConfirmButton?: boolean;
-};
+export type { RAlertDialogProps } from './BCNewAlertDialog';

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

@@ -30,4 +30,5 @@ export type RDropdownProps = {
     beforeActionsComponent?: ReactNode;
     afterActionsComponent?: ReactNode;
     rtl?: boolean;
+    onOpenChange?: (open: boolean) => void;
 };

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

@@ -7,4 +7,5 @@ export type RTooltipProps = {
     contentCssStyle?: SerializedStyles;
     delayDuration?: number;
     side?: 'top' | 'bottom' | 'left' | 'right';
+    open?: boolean;
 };

package/src/lib/textbox/bctextbox.d.ts

@@ -11,6 +11,7 @@ export interface BCTextboxProps {
     placeholder?: string;
     maxLength?: number;
     autoCompleteList?: string[];
+    autoComplete?: string;
     onBlur?: (ev: ChangeEvent<HTMLInputElement>) => any;
     onClick?: (ev: any) => any;
     onFocus?: (ev: ChangeEvent<HTMLInputElement>) => any;
@@ -19,5 +20,5 @@ export interface BCTextboxProps {
 export interface BCTextboxState {
     showAutoComplete: boolean;
 }
-export declare const BCTextbox: ({ className, name, onChange, onKeyDown, onClick, value, type, disabled, placeholder, maxLength, autoCompleteList, onBlur, onFocus, inputStyle, }: BCTextboxProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const BCTextbox: ({ className, name, onChange, onKeyDown, onClick, value, type, disabled, placeholder, maxLength, autoCompleteList, autoComplete, onBlur, onFocus, inputStyle, }: BCTextboxProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export default BCTextbox;