@nar-bus/lena-ui-shared 1.3.11 → 1.3.13

package/dist/index.d.ts

@@ -147,8 +147,8 @@ export declare interface AppHeaderLogo {
 
 export declare interface AppHeaderProps {
     breadcrumbs: BreadcrumbItem[];
-    theme: 'light' | 'dark' | 'system';
-    onThemeChange: (theme: 'light' | 'dark' | 'system') => void;
+    theme: 'light' | 'dark';
+    onThemeChange: (theme: 'light' | 'dark') => void;
     locale?: string;
     onLocaleChange?: (locale: string) => void;
     user?: AppHeaderUser | null;
@@ -239,6 +239,8 @@ declare interface AsyncSelectFieldProps<TFieldValues extends FieldValues> {
     cols?: 1 | 2 | 3 | 4 | 6 | 12;
 }
 
+export declare function autoStatusColor(value: string): string;
+
 export declare function Avatar({ className, size, ...props }: React_2.ComponentProps<typeof AvatarPrimitive.Root> & {
     size?: "default" | "sm" | "lg";
 }): JSX.Element;
@@ -278,6 +280,10 @@ declare interface BadgeCellProps {
     className?: string;
 }
 
+declare type BadgeSize = keyof typeof SIZE_STYLES;
+
+declare type BadgeVariant = keyof typeof VARIANT_STYLES;
+
 export declare const badgeVariants: (props?: ({
     variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
 } & ClassProp) | undefined) => string;
@@ -347,6 +353,22 @@ export declare function BreadcrumbSeparator({ children, className, ...props }: R
 
 export declare function BreadcrumbUIItem({ className, ...props }: React_2.ComponentProps<"li">): JSX.Element;
 
+/**
+ * Manifest groups + current pathname'den breadcrumb zinciri türetir.
+ *
+ * Children in manifest items are treated as tab-level navigation and are NOT
+ * included in the breadcrumb trail. The breadcrumb stops at the parent item.
+ *
+ * @example
+ * buildBreadcrumbsFromManifest(manifest.groups, '/device-management/meters', 'tr')
+ * // → [{ label: 'Envanter', href: '/brand-model' }, { label: 'Cihaz Yönetimi' }]
+ * // Note: 'Sayaçlar' (tab) is NOT included — breadcrumb stops at parent
+ *
+ * buildBreadcrumbsFromManifest(manifest.groups, '/simcard', 'tr')
+ * // → [{ label: 'Envanter', href: '/brand-model' }, { label: 'SIM Kartlar' }]
+ */
+export declare function buildBreadcrumbsFromManifest(groups: ManifestGroup[], pathname: string, locale: string): BreadcrumbItem[];
+
 export declare interface BulkAction<TData> {
     id: string;
     label: string;
@@ -1688,6 +1710,17 @@ export declare interface GaugeFooterStat {
     colorClass?: string;
 }
 
+/**
+ * Get a tone color class string from a base color family.
+ * Each unique value gets a deterministic tone level within the family.
+ * All class strings are pre-defined for Tailwind JIT compatibility.
+ *
+ * @example
+ * generateToneColor('G_2', 'accent')  // lighter cyan
+ * generateToneColor('G_5', 'accent')  // darker cyan
+ */
+export declare function generateToneColor(value: string, baseColor: StatusColor): string;
+
 /**
  * Get error path for highlighting in tree view
  */
@@ -1732,7 +1765,7 @@ export declare interface HeaderCreateButtonProps {
 
 export declare type HeaderGradient = 'teal' | 'navy' | 'cherry' | 'emerald' | 'amber' | 'violet' | 'rose' | 'indigo' | 'orange';
 
-export declare function HeaderQuickSearch({ placeholder, value, onValueChange, open, onOpenChange, loading, shortcutKey, shouldFilter, className, children, }: HeaderQuickSearchProps): JSX.Element;
+export declare function HeaderQuickSearch({ placeholder, value, onValueChange, open, onOpenChange, loading, shortcutKey, shouldFilter, filter, className, children, }: HeaderQuickSearchProps): JSX.Element;
 
 export declare interface HeaderQuickSearchProps {
     placeholder?: string;
@@ -1743,6 +1776,8 @@ export declare interface HeaderQuickSearchProps {
     loading?: boolean;
     shortcutKey?: string;
     shouldFilter?: boolean;
+    /** Custom filter function for cmdk (default: starts-with) */
+    filter?: (value: string, search: string) => number;
     className?: string;
     children?: ReactNode;
 }
@@ -2192,6 +2227,22 @@ export declare interface LocationMapProps {
     className?: string;
 }
 
+export declare interface ManifestGroup {
+    label?: string | ManifestTitle | null;
+    href?: string;
+    items: ManifestNavItem[];
+}
+
+export declare interface ManifestNavItem {
+    title: string | ManifestTitle;
+    href: string;
+    children?: ManifestNavItem[];
+}
+
+declare interface ManifestTitle {
+    [key: string]: string;
+}
+
 export declare const MAP_TOOLTIP_OPTIONS: Partial<TooltipOptions>;
 
 /** Fixes Leaflet map sizing when rendered inside hidden tabs or collapsible panels */
@@ -2339,7 +2390,7 @@ export declare function PageErrorBoundary({ children }: {
     children: ReactNode;
 }): JSX.Element;
 
-export declare function PageHeader({ title, description, icon: Icon, breadcrumbs, actions, className, onBreadcrumbsChange, }: PageHeaderProps): JSX.Element;
+export declare function PageHeader({ title, description, icon: Icon, actions, className, }: PageHeaderProps): JSX.Element;
 
 export declare interface PageHeaderProps {
     title: string;
@@ -2347,11 +2398,8 @@ export declare interface PageHeaderProps {
     icon: React.ComponentType<{
         className?: string;
     }>;
-    breadcrumbs: BreadcrumbItem[];
     actions?: React.ReactNode;
     className?: string;
-    /** Callback to sync breadcrumbs with external store (e.g. uiStore) */
-    onBreadcrumbsChange?: (breadcrumbs: BreadcrumbItem[]) => void;
 }
 
 export declare function Pagination({ className, ...props }: React_2.ComponentProps<"nav">): JSX.Element;
@@ -2420,6 +2468,43 @@ export declare function PopoverContent({ className, align, sideOffset, ...props
 
 export declare function PopoverTrigger({ ...props }: React_2.ComponentProps<typeof PopoverPrimitive.Trigger>): JSX.Element;
 
+export declare function PreviewSection({ title, children, className }: PreviewSectionProps): JSX.Element;
+
+export declare interface PreviewSectionProps {
+    title: string;
+    children: ReactNode;
+    className?: string;
+}
+
+export declare function PreviewSheet({ open, onOpenChange, title, icon: Icon, headerGradient, badge, headerActions, footerActions, children, className, maxWidth, isLoading, closeLabel, }: PreviewSheetProps): JSX.Element;
+
+export declare interface PreviewSheetProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    title: string;
+    /** Icon component rendered in the gradient header */
+    icon?: ComponentType<{
+        className?: string;
+        style?: CSSProperties;
+    }>;
+    /** Gradient color theme for the header */
+    headerGradient?: FormSheetGradient;
+    /** Optional badge rendered next to the title */
+    badge?: ReactNode;
+    /** Action buttons rendered in the header (right side, replaces close button) */
+    headerActions?: ReactNode;
+    /** Action buttons rendered in the footer (right side) */
+    footerActions?: ReactNode;
+    children: ReactNode;
+    className?: string;
+    /** Sheet max width — defaults to 'lg' */
+    maxWidth?: 'lg' | 'xl' | '2xl';
+    /** Shows a centered loading spinner instead of children */
+    isLoading?: boolean;
+    /** Close button label override */
+    closeLabel?: string;
+}
+
 export declare const priorityColors: {
     readonly HIGH: "bg-status-error/10 text-status-error border-status-error/30 ring-status-error/30";
     readonly MEDIUM: "bg-status-warning/10 text-status-warning border-status-warning/30 ring-status-warning/30";
@@ -2839,6 +2924,12 @@ declare interface SimpleDataTableProps<TData> {
     headerTextColor?: string;
 }
 
+declare const SIZE_STYLES: {
+    readonly xs: "px-1.5 py-0 text-2xs-plus";
+    readonly sm: "px-2 py-0.5 text-2xs-plus";
+    readonly md: "px-2.5 py-1 text-2xs-plus";
+};
+
 export declare function Skeleton({ className, ...props }: React.ComponentProps<"div">): JSX.Element;
 
 export declare function Slider({ className, defaultValue, value, min, max, ...props }: React_2.ComponentProps<typeof SliderPrimitive.Root>): JSX.Element;
@@ -2875,41 +2966,72 @@ export declare interface StatCardProps {
 }
 
 /**
- * Status badge for displaying enum/status values.
- * Provides consistent styling across all tables.
+ * Unified badge component for the entire platform.
+ * Single source of truth for all badge styling — status, tags, counters, labels.
  *
- * @example
+ * @example Status badge with color mapping
  * ```tsx
- * <StatusBadge
- *   value={row.status}
- *   colorMap={{
- *     ACTIVE: statusColors.success,
- *     INACTIVE: statusColors.neutral,
- *   }}
- *   labelMap={{
- *     ACTIVE: 'Active',
- *     INACTIVE: 'Inactive',
- *   }}
- *   showDot
- *   icon={<Wifi className="h-3 w-3" />}
- * />
+ * <StatusBadge value="ACTIVE" colorMap={colors} labelMap={labels} showDot />
+ * ```
+ *
+ * @example Auto-colored enum (no colorMap needed)
+ * ```tsx
+ * <StatusBadge value={row.protocolName} autoColor />
+ * ```
+ *
+ * @example Simple tag/label
+ * ```tsx
+ * <StatusBadge variant="outline">DLMS</StatusBadge>
+ * ```
+ *
+ * @example Counter badge (xs size)
+ * ```tsx
+ * <StatusBadge variant="destructive" size="xs">{count}</StatusBadge>
+ * ```
+ *
+ * @example Compact badge (sm size)
+ * ```tsx
+ * <StatusBadge variant="outline" size="sm">{label}</StatusBadge>
  * ```
  */
-export declare function StatusBadge<T extends string>({ value, colorMap, labelMap, icon, showDot, dotColorMap, pulse, size, showLabel, className, }: StatusBadgeProps<T>): JSX.Element;
-
-declare interface StatusBadgeProps<T extends string> {
-    value: T | null | undefined;
-    colorMap: Record<T, string>;
+export declare function StatusBadge<T extends string>({ value, colorMap, autoColor, toneColor, labelMap, icon, iconMap, showDot, dotColorMap, pulse, size, showLabel, variant, accentColorMap, minWidth, children, showNullState, className, ...htmlProps }: StatusBadgeProps<T>): JSX.Element;
+
+declare interface StatusBadgeBaseProps<T extends string> {
+    /** Enum/status value — used with colorMap for semantic coloring */
+    value?: T | null | undefined;
+    /** Map enum values to Tailwind color classes */
+    colorMap?: Record<T, string>;
+    /** Auto-assign color from value string hash (no colorMap needed) */
+    autoColor?: boolean;
+    /** Base color family for graduated tone coloring — each value gets a unique tone within the family */
+    toneColor?: StatusColor;
+    /** Map enum values to display labels */
     labelMap?: Record<T, string>;
+    /** Global icon — same icon for all values */
     icon?: React.ReactNode;
+    /** Per-value icon — different icon per enum value (takes priority over `icon`) */
+    iconMap?: Partial<Record<T, React.ReactNode>>;
     showDot?: boolean;
     dotColorMap?: Record<T, string>;
     pulse?: boolean | Record<T, boolean>;
-    size?: 'sm' | 'md';
+    /** xs: counter/mini | sm: compact | md: default */
+    size?: BadgeSize;
     showLabel?: boolean;
+    /** Visual variant */
+    variant?: BadgeVariant;
+    /** Accent bar color map for variant="mono" */
+    accentColorMap?: Partial<Record<T, string>>;
+    /** Optional min-width Tailwind class for table column alignment */
+    minWidth?: string;
+    /** Direct children — for simple tag/label/counter usage without value+colorMap */
+    children?: React.ReactNode;
+    /** Show null state when value is null/undefined. Default: true for value mode, false for children mode */
+    showNullState?: boolean;
     className?: string;
 }
 
+declare type StatusBadgeProps<T extends string> = StatusBadgeBaseProps<T> & Omit<React.HTMLAttributes<HTMLSpanElement>, keyof StatusBadgeBaseProps<T>>;
+
 export declare type StatusColor = keyof typeof statusColors;
 
 /**
@@ -3347,6 +3469,51 @@ export declare interface UrlState {
     f?: FilterState[];
 }
 
+/**
+ * Enterprise breadcrumb hook — derives breadcrumbs from manifest groups + current route.
+ *
+ * @example
+ * // Header.tsx
+ * const breadcrumbs = useAutoBreadcrumbs({
+ *   groups: manifest.groups,
+ *   pathname,
+ *   locale,
+ *   tail, // from useBreadcrumbs() store
+ * });
+ */
+export declare function useAutoBreadcrumbs({ groups, pathname, locale, tail, }: UseAutoBreadcrumbsOptions): BreadcrumbItem[];
+
+export declare interface UseAutoBreadcrumbsOptions {
+    /** Manifest navigation groups (source of truth for breadcrumb hierarchy) */
+    groups: ManifestGroup[];
+    /** Current route pathname */
+    pathname: string;
+    /** Active locale for resolving multilingual titles */
+    locale: string;
+    /** Optional tail items from detail pages (appended to auto-breadcrumbs) */
+    tail?: BreadcrumbItem[];
+}
+
+/**
+ * Declarative breadcrumb tail hook for detail pages.
+ * Sets tail items on mount and auto-clears on unmount.
+ * Uses deep comparison to avoid unnecessary updates.
+ *
+ * @param items - Breadcrumb items to append (undefined = skip, e.g. while loading)
+ * @param setBreadcrumbs - Setter from store (e.g. useSetBreadcrumbs from lena-ui-core)
+ *
+ * @example
+ * const setBreadcrumbs = useSetBreadcrumbs();
+ * useBreadcrumbTail(
+ *   meter ? [
+ *     { label: 'Sayaçlar', href: '/device-management/meters' },
+ *     { label: meter.serialNumber },
+ *   ] : undefined,
+ *   setBreadcrumbs,
+ * );
+ */
+export declare function useBreadcrumbTail(items: BreadcrumbItem[] | undefined, setBreadcrumbs: (items: BreadcrumbItem[]) => void): void;
+
 export declare function useDataTable<TData>(options: UseDataTableOptions<TData>): UseDataTableReturn<TData>;
 
 declare interface UseDataTableOptions<TData> extends CreateDataTableStoreOptions {
@@ -3740,6 +3907,15 @@ export declare interface ValidationStatusProps {
     showDetails?: boolean;
 }
 
+declare const VARIANT_STYLES: {
+    readonly default: "";
+    readonly mono: "font-mono tracking-tight";
+    readonly outline: "border-border text-foreground ring-0 border";
+    readonly secondary: "bg-secondary text-secondary-foreground ring-0";
+    readonly destructive: "bg-destructive text-white ring-0";
+    readonly ghost: "ring-0 text-foreground";
+};
+
 /**
  * Adds monthly average fields to chart data.
  * Date format: "dd/MM" — groups by month part, calculates average per key.