@nar-bus/lena-ui-shared 1.3.12 → 1.3.14

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;
@@ -1226,11 +1248,11 @@ declare interface DetailPageMetadataFooterProps {
 export declare const deviceStatusColors: {
     readonly ACTIVE: "bg-status-success/10 text-status-success-foreground border-status-success/30 ring-status-success/30";
     readonly INACTIVE: "bg-status-neutral/10 text-status-neutral-foreground border-status-neutral/30 ring-status-neutral/30";
-    readonly MAINTENANCE: "bg-status-warning/10 text-status-warning border-status-warning/30 ring-status-warning/30";
-    readonly FAULTY: "bg-status-error/10 text-status-error border-status-error/30 ring-status-error/30";
+    readonly MAINTENANCE: "bg-status-warning/10 text-status-warning-foreground border-status-warning/30 ring-status-warning/30";
+    readonly FAULTY: "bg-status-error/10 text-status-error-foreground border-status-error/30 ring-status-error/30";
     readonly ONLINE: "bg-status-success/10 text-status-success-foreground border-status-success/30 ring-status-success/30";
     readonly OFFLINE: "bg-status-neutral/10 text-status-neutral-foreground border-status-neutral/30 ring-status-neutral/30";
-    readonly PENDING: "bg-status-warning/10 text-status-warning border-status-warning/30 ring-status-warning/30";
+    readonly PENDING: "bg-status-warning/10 text-status-warning-foreground border-status-warning/30 ring-status-warning/30";
     readonly CONNECTED: "bg-status-success/10 text-status-success-foreground border-status-success/30 ring-status-success/30";
     readonly DISCONNECTED: "bg-status-neutral/10 text-status-neutral-foreground border-status-neutral/30 ring-status-neutral/30";
 };
@@ -1346,6 +1368,49 @@ export declare interface EnumPrefetcherProps {
     fetcher: EnumFetcher;
 }
 
+export declare function EnumSelectField<TFieldValues extends FieldValues>({ enumKey, fallback, ...rest }: EnumSelectFieldProps<TFieldValues>): JSX.Element;
+
+declare interface EnumSelectFieldProps<TFieldValues extends FieldValues> {
+    name: FieldPath<TFieldValues>;
+    control: Control<TFieldValues>;
+    /** Enum cache key — backend'den tanımlanan enum code'u */
+    enumKey: string;
+    /** Cache yüklenmeden önce gösterilecek fallback options */
+    fallback?: SelectOption[];
+    label?: string;
+    description?: string;
+    required?: boolean;
+    placeholder?: string;
+    searchPlaceholder?: string;
+    emptyText?: string;
+    disabled?: boolean;
+    className?: string;
+    cols?: 1 | 2 | 3 | 4 | 6 | 12;
+    errorHint?: string;
+}
+
+export declare function EnumText({ enumKey, value, fallback, className }: EnumTextProps): JSX.Element;
+
+/**
+ * EnumText — Enum cache'den label resolve eden display component.
+ *
+ * Static label map'lerin drop-in replacement'ı:
+ * ```tsx
+ * // ÖNCE: {protocolTypeLabels[protocol.protocolType]}
+ * // SONRA: <EnumText enumKey="PROTOCOL_TYPE" value={protocol.protocolType} />
+ * ```
+ */
+export declare interface EnumTextProps {
+    /** Enum cache key (e.g., 'PROTOCOL_TYPE') */
+    enumKey: string;
+    /** Backend'den gelen raw enum value (e.g., 'DLMS') */
+    value: string | undefined | null;
+    /** Fallback text when value is empty */
+    fallback?: string;
+    /** Optional className */
+    className?: string;
+}
+
 /**
  * Error Boundary Component
  * Catches JavaScript errors in child component tree and displays fallback UI
@@ -1422,6 +1487,12 @@ export declare interface FieldConfig {
     type: FieldType;
     /** Options for enum fields */
     options?: SelectOption[];
+    /**
+     * Enum cache key — otomatik olarak cache'den resolve edilir.
+     * `type: 'enum'` ile birlikte kullanılır. `options` yerine tercih edilmeli.
+     * @example { field: 'status', type: 'enum', enumKey: 'METER_STATUS' }
+     */
+    enumKey?: string;
     /** Async function to load options */
     loadOptions?: () => Promise<SelectOption[]>;
     /** Placeholder text for input */
@@ -1688,6 +1759,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
  */
@@ -1715,16 +1797,23 @@ export declare type GradientPair = [topColor: string, bottomColor: string];
 
 declare function Header({ children, icon: Icon, iconClassName, subtitle, actions, gradient, className, }: LenaPanelHeaderProps): JSX.Element;
 
-export declare function HeaderCreateButton({ label, icon, children, contentClassName, className, }: HeaderCreateButtonProps): JSX.Element;
+export declare function HeaderCreateButton({ label, icon, searchPlaceholder, emptyText, children, contentClassName, className, }: HeaderCreateButtonProps): JSX.Element;
 
 export declare interface HeaderCreateButtonProps {
     /** Button label text */
     label: string;
     /** Custom icon — defaults to Plus */
     icon?: ReactNode;
-    /** DropdownMenu items rendered inside the dropdown content */
+    /** Placeholder for search input */
+    searchPlaceholder?: string;
+    /** Empty state text when no results match */
+    emptyText?: string;
+    /**
+     * Command palette content — use CommandGroup + CommandItem from lena-ui-shared.
+     * Each CommandItem's onSelect should call the provided `onClose` or manage its own state.
+     */
     children: ReactNode;
-    /** Additional class for DropdownMenuContent */
+    /** Additional class for PopoverContent */
     contentClassName?: string;
     /** Additional class for the trigger button */
     className?: string;
@@ -1732,7 +1821,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 +1832,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 +2283,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 +2446,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 +2454,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;
@@ -2458,10 +2562,10 @@ export declare interface PreviewSheetProps {
 }
 
 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";
+    readonly HIGH: "bg-status-error/10 text-status-error-foreground border-status-error/30 ring-status-error/30";
+    readonly MEDIUM: "bg-status-warning/10 text-status-warning-foreground border-status-warning/30 ring-status-warning/30";
     readonly LOW: "bg-status-info/10 text-status-info-foreground border-status-info/30 ring-status-info/30";
-    readonly CRITICAL: "bg-status-error/10 text-status-error border-status-error/30 ring-status-error/30";
+    readonly CRITICAL: "bg-status-error/10 text-status-error-foreground border-status-error/30 ring-status-error/30";
     readonly NORMAL: "bg-status-neutral/10 text-status-neutral-foreground border-status-neutral/30 ring-status-neutral/30";
 };
 
@@ -2486,8 +2590,8 @@ declare interface PropertyRowProps {
 export declare const protocolTypeColors: {
     readonly DLMS: "bg-status-info/10 text-status-info-foreground border-status-info/30 ring-status-info/30";
     readonly MODBUS: "bg-status-purple/10 text-status-purple-foreground border-status-purple/30 ring-status-purple/30";
-    readonly IEC_62056_21: "bg-accent-cyan/10 text-accent-cyan border-accent-cyan/30 ring-accent-cyan/30";
-    readonly ANSI_C12_18: "bg-status-warning/10 text-status-warning border-status-warning/30 ring-status-warning/30";
+    readonly IEC_62056_21: "bg-accent-cyan/10 text-accent-cyan-foreground border-accent-cyan/30 ring-accent-cyan/30";
+    readonly ANSI_C12_18: "bg-status-warning/10 text-status-warning-foreground border-status-warning/30 ring-status-warning/30";
 };
 
 export declare function QuickActionTile({ title, description, icon, href, onClick, variant, badge, className, animationDelay, }: QuickActionTileProps): JSX.Element;
@@ -2876,6 +2980,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;
@@ -2912,41 +3022,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="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
- *   value={row.status}
- *   colorMap={{
- *     ACTIVE: statusColors.success,
- *     INACTIVE: statusColors.neutral,
- *   }}
- *   labelMap={{
- *     ACTIVE: 'Active',
- *     INACTIVE: 'Inactive',
- *   }}
- *   showDot
- *   icon={<Wifi className="h-3 w-3" />}
- * />
+ * <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;
 
 /**
@@ -2955,11 +3096,11 @@ export declare type StatusColor = keyof typeof statusColors;
  */
 export declare const statusColors: {
     readonly success: "bg-status-success/10 text-status-success-foreground border-status-success/30 ring-status-success/30";
-    readonly warning: "bg-status-warning/10 text-status-warning border-status-warning/30 ring-status-warning/30";
-    readonly error: "bg-status-error/10 text-status-error border-status-error/30 ring-status-error/30";
+    readonly warning: "bg-status-warning/10 text-status-warning-foreground border-status-warning/30 ring-status-warning/30";
+    readonly error: "bg-status-error/10 text-status-error-foreground border-status-error/30 ring-status-error/30";
     readonly info: "bg-status-info/10 text-status-info-foreground border-status-info/30 ring-status-info/30";
     readonly neutral: "bg-status-neutral/10 text-status-neutral-foreground border-status-neutral/30 ring-status-neutral/30";
-    readonly accent: "bg-accent-cyan/10 text-accent-cyan border-accent-cyan/30 ring-accent-cyan/30";
+    readonly accent: "bg-accent-cyan/10 text-accent-cyan-foreground border-accent-cyan/30 ring-accent-cyan/30";
     readonly purple: "bg-status-purple/10 text-status-purple-foreground border-status-purple/30 ring-status-purple/30";
 };
 
@@ -3384,6 +3525,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 {
@@ -3470,6 +3656,30 @@ export declare interface UseDoubleClickHandlerOptions<T> {
  */
 export declare function useEnumDefinitions(): CachedEnumDefinition[];
 
+/**
+ * Tek bir enum value'nun label'ını döner.
+ * Cache'de bulunamazsa raw value döner (graceful fallback).
+ *
+ * @example
+ * ```tsx
+ * const label = useEnumLabel('PROTOCOL_TYPE', protocol.protocolType);
+ * <span>{label}</span>
+ * ```
+ */
+export declare function useEnumLabel(key: string, value: string | undefined | null): string;
+
+/**
+ * Tüm enum'un key→label map'ini Record<string, string> olarak döner.
+ * Mevcut static label map'lerin drop-in replacement'ı.
+ *
+ * @example
+ * ```tsx
+ * const protocolTypeLabels = useEnumLabelMap('PROTOCOL_TYPE');
+ * <span>{protocolTypeLabels[protocol.protocolType]}</span>
+ * ```
+ */
+export declare function useEnumLabelMap(key: string): Record<string, string>;
+
 /**
  * Belirli bir enum code'unun SelectOption[] listesini döner.
  *
@@ -3777,6 +3987,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.