@bcrumbs.net/bc-ui 0.0.14 → 0.0.16

package/package.json

@@ -1,13 +1,16 @@
 {
   "name": "@bcrumbs.net/bc-ui",
   "description": "The UI components of Bread Crumbs portals",
-  "version": "0.0.14",
+  "version": "0.0.16",
   "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,6 +41,8 @@ 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';
@@ -50,6 +52,7 @@ export type { RAlertDialogProps } from './lib/newComponents/BCNewAlertDialog/BCN
 export * from './lib/newComponents/BCNewDialog/BCNewDialog';
 export * from './lib/newComponents/BCRadioGroupItem/BCRadioItem';
 export * from './lib/newComponents/BCNewTabs/BCNewTabs';
+export * from './lib/newComponents/BCInlineAlert/BCInlineAlert';
 export * from './lib/baseComponents/button';
 export * from './lib/sortableHeader/SortableHeader';
 export * from './lib/newComponents/BCNewTable/types';

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/constants/Color.d.ts

@@ -16,6 +16,7 @@ export declare enum NewColors {
     PRIMARY_PARAGRAPH_DARKER = "var(--bc-primary-paragraph-darker)",
     INBOX_BACKGROUND = "var(--bc-inbox-background)",
     BACKGROUND_DARKER = "var(--bc-background-darker)",
+    BACKGROUND_LIGHT = "var(--bc-background-light)",
     INFO_COLOR = "var(--bc-info)",
     INFO_LIGHT = "var(--bc-info-light)",
     FONT_COLOR = "#000",
@@ -37,7 +38,9 @@ export declare enum NewColors {
     DANGER_LIGHT = "var(--bc-danger-light)",
     SUCCESS = "var(--bc-success)",
     SUCCESS_DARKER = "var(--bc-success-darker)",
+    SUCCESS_DARKER_2 = "var(--bc-success-darker-2)",
     SUCCESS_LIGHT = "var(--bc-success-light)",
+    SUCCESS_LIGHT_2 = "var(--bc-success-light-2)",
     DROPDOWN_ITEM = "var(--bc-dropDown-item)",
     DROPDOWN_HOVER = "var(--bc-dropDown-hover)",
     SUB_SIDEBAR_TITLE = "var(--bc-sub-sidebar-title)",
@@ -51,6 +54,7 @@ export declare enum NewColors {
     SECONDARY_BORDER = "var(--bc-secondary-border)",
     CONTROLS = "var(--bc-controls)",
     FOREGROUND = "var(--bc-foreground)",
+    FOREGROUND_DARKER = "var(--bc-foreground-darker)",
     BACKGROUND = "var(--bc-background)",
     BACKGROUND_SECONDARY = "var(--bc-background-secondary)",
     PLACEHOLDER = "var(--bc-placeholder)",

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

@@ -4,5 +4,9 @@ export interface BCDropListOptionsType {
     styleClass?: string;
     value: string;
     note?: string;
+    /** When true, selecting the option is blocked (note can still be clickable via onNoteClick). */
+    disabled?: boolean;
+    /** Called when the note label is clicked (e.g. "Upgrade"). */
+    onNoteClick?: () => void;
     separator?: boolean;
 }

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

@@ -1,12 +1,14 @@
 export declare enum FontFamily {
     Main = "Montserrat",
     Secondary = "sans-serif",
-    Poppins = "Poppins"
+    Poppins = "Poppins",
+    Inter = "Inter"
 }
 export declare enum FontFamilyStack {
     DEFAULT = "var(--bc-font-stack)",
     POPPINS_PRIMARY = "var(--bc-font-stack-poppins)",
     MONTSERRAT_PRIMARY = "var(--bc-font-stack-montserrat)",
+    INTER_PRIMARY = "var(--bc-font-stack-inter)",
     POPPINS_ONLY = "var(--bc-font-stack-primary)",
     MONTSERRAT_ONLY = "var(--bc-font-stack-secondary)"
 }

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

@@ -18,6 +18,7 @@ export declare const DropDownItemNote: import("@emotion/styled").StyledComponent
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 } & {
     rtl?: boolean | undefined;
+    clickable?: boolean | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
 export declare const Icon: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;

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

@@ -26,6 +26,8 @@ export declare const BCIcons: {
     Facebook: ({ width, height, fill }: BCIconsProps) => import("@emotion/react/jsx-runtime").JSX.Element;
     Telegram: ({ width, height, fill }: BCIconsProps) => import("@emotion/react/jsx-runtime").JSX.Element;
     Google: ({ width, height, fill }: BCIconsProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+    ColoredGoogle: ({ width, height, fill }: BCIconsProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+    BCLogo: ({ width, height, fill }: BCIconsProps) => import("@emotion/react/jsx-runtime").JSX.Element;
     Broadcast: ({ width, height, fill }: BCIconsProps) => import("@emotion/react/jsx-runtime").JSX.Element;
     Bot: ({ width, height, fill }: BCIconsProps) => import("@emotion/react/jsx-runtime").JSX.Element;
     FileExport: ({ width, height, fill }: BCIconsProps) => import("@emotion/react/jsx-runtime").JSX.Element;
@@ -48,6 +50,7 @@ export declare const BCIcons: {
     Webhooks: ({ width, height, fill }: BCIconsProps) => import("@emotion/react/jsx-runtime").JSX.Element;
     ConvLifecycle: ({ width, height, fill }: BCIconsProps) => import("@emotion/react/jsx-runtime").JSX.Element;
     Channels: ({ width, height, fill }: BCIconsProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+    ShowPassword: ({ width, height, fill }: BCIconsProps) => import("@emotion/react/jsx-runtime").JSX.Element;
     Flag: ({ width, height, fill }: BCIconsProps) => import("@emotion/react/jsx-runtime").JSX.Element;
     RatingSettings: ({ width, height, fill }: BCIconsProps) => import("@emotion/react/jsx-runtime").JSX.Element;
     CrumbySettings: ({ width, height, fill }: BCIconsProps) => import("@emotion/react/jsx-runtime").JSX.Element;
@@ -461,4 +464,39 @@ export declare const BCIcons: {
         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;
+    BroadcastChatChip: ({ width, height, fill }: {
+        width?: number | undefined;
+        height?: number | undefined;
+        fill?: string | undefined;
+    }) => import("@emotion/react/jsx-runtime").JSX.Element;
+    ChannelChatChip: ({ width, height, fill }: {
+        width?: number | undefined;
+        height?: number | undefined;
+        fill?: string | undefined;
+    }) => import("@emotion/react/jsx-runtime").JSX.Element;
+    InviteChatChip: ({ width, height, fill }: {
+        width?: number | undefined;
+        height?: number | undefined;
+        fill?: string | undefined;
+    }) => import("@emotion/react/jsx-runtime").JSX.Element;
+    AnalyzeChatChip: ({ width, height, fill }: {
+        width?: number | undefined;
+        height?: number | undefined;
+        fill?: string | undefined;
+    }) => import("@emotion/react/jsx-runtime").JSX.Element;
+    LongSingleCheck: ({ width, height, fill }: {
+        width?: number | undefined;
+        height?: number | undefined;
+        fill?: string | undefined;
+    }) => import("@emotion/react/jsx-runtime").JSX.Element;
+    WorkspacePanel: ({ width, height, fill }: BCIconsProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+    Checkout: ({ width, height, fill }: BCIconsProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+    AlertWarning: ({ width, height, fill }: BCIconsProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+    AlertError: ({ width, height, fill }: BCIconsProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+    AlertSuccess: ({ width, height, fill }: BCIconsProps) => 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

@@ -8,6 +8,8 @@ export type SubMenuItemsType = {
     tags?: string[];
     description?: string;
     hide?: boolean;
+    /** Permission keys (string-backed `Permission` enum values) required to see this sub-item. Empty/undefined = visible to all. */
+    requiredPermissions?: string[];
 };
 export type SubMenuType = {
     title?: string;
@@ -26,6 +28,8 @@ export type NavItem = {
     className?: string;
     subMenu?: Array<SubMenuType>;
     hide?: boolean;
+    /** Permission keys (string-backed `Permission` enum values) required to see this entry. Empty/undefined = visible to all. */
+    requiredPermissions?: string[];
 };
 export type NavWithTags = NavItem & {
     subMenu?: Array<SubMenuType>;

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import { SerializedStyles } from '@emotion/react';
+export type BCInlineAlertVariant = 'info' | 'warning' | 'error' | 'success';
+export type BCInlineAlertProps = {
+    /** Visual status of the alert. Controls accent bar, icon and colors. */
+    variant?: BCInlineAlertVariant;
+    /** Optional bold heading shown above the body. */
+    title?: React.ReactNode;
+    /** Message content. Multiple children stack vertically (e.g. text + link). */
+    children: React.ReactNode;
+    /** Override the default variant icon. */
+    icon?: React.ReactNode;
+    /** Hide the featured icon entirely. */
+    showIcon?: boolean;
+    /** Mirror layout for right-to-left languages (accent bar moves to the end). */
+    rtl?: boolean;
+    className?: string;
+    css?: SerializedStyles;
+};
+/**
+ * Generic inline alert / notification banner.
+ * White card with a colored accent bar and featured icon, driven by `variant`.
+ */
+export declare const BCInlineAlert: React.FC<BCInlineAlertProps>;
+export default BCInlineAlert;

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

@@ -30,5 +30,11 @@ export type RDropdownProps = {
     beforeActionsComponent?: ReactNode;
     afterActionsComponent?: ReactNode;
     rtl?: boolean;
+    /** Controlled open state — pass together with onOpenChange when the consumer must guarantee closing (e.g. items that navigate) */
+    open?: boolean;
     onOpenChange?: (open: boolean) => void;
+    /** When set, the actions list scrolls inside this max height (px) while footerActions stay pinned below */
+    actionsMaxHeight?: number;
+    /** Actions rendered after the scrollable area, preceded by a separator — always visible */
+    footerActions?: ActionItem[];
 };