@ktnpm_devops/react-component 0.1.1 → 0.2.0

package/dist/tokens/semantic-tokens.css

@@ -69,9 +69,30 @@
   --icon-md: 1rem;
   --icon-lg: 1.125rem;
 
-  /* Focus ring */
+  /* Focus ring (brand-colored) */
   --focus-ring-width: 0.1875rem;
   --focus-ring-spread: 0.25rem;
+  --focus-ring-color: rgba(255, 107, 90, 0.35);
+  --focus-ring-color-subtle: rgba(255, 107, 90, 0.18);
+  --focus-ring-shadow: 0 0 0 var(--border-width-md) var(--focus-ring-color),
+                       0 0 0 var(--focus-ring-spread) var(--focus-ring-color-subtle);
+  --input-focus-shadow: 0 0 0 var(--focus-ring-width) rgba(255, 107, 90, 0.15);
+
+  /* Avatar */
+  --avatar-gradient: linear-gradient(135deg, var(--accent-color), var(--orbit-color-purple-light));
+
+  /* Chart palette */
+  --chart-color-1: #ff6b5a;
+  --chart-color-2: #4a3044;
+  --chart-color-3: #3b82f6;
+  --chart-color-4: #10b981;
+  --chart-color-5: #f59e0b;
+  --chart-color-6: #8b5cf6;
+
+  /* Scrollbar */
+  --scrollbar-track: rgba(148, 163, 184, 0.05);
+  --scrollbar-thumb: rgba(148, 163, 184, 0.3);
+  --scrollbar-thumb-hover: rgba(148, 163, 184, 0.5);
 
   /* Overlay */
   --overlay-color: rgba(0, 0, 0, 0.5);
@@ -123,6 +144,26 @@
   --shadow-elevated: var(--orbit-shadow-lg);
   --shadow-lg: var(--orbit-shadow-lg);
 
+  /* Focus ring (brand-colored, dark) */
+  --focus-ring-color: rgba(255, 133, 117, 0.35);
+  --focus-ring-color-subtle: rgba(255, 133, 117, 0.18);
+  --focus-ring-shadow: 0 0 0 var(--border-width-md) var(--focus-ring-color),
+                       0 0 0 var(--focus-ring-spread) var(--focus-ring-color-subtle);
+  --input-focus-shadow: 0 0 0 var(--focus-ring-width) rgba(255, 133, 117, 0.15);
+
+  /* Chart palette (dark) */
+  --chart-color-1: #ff8575;
+  --chart-color-2: #4a3044;
+  --chart-color-3: #60a5fa;
+  --chart-color-4: #34d399;
+  --chart-color-5: #facc15;
+  --chart-color-6: #a78bfa;
+
+  /* Scrollbar (dark) */
+  --scrollbar-track: rgba(148, 163, 184, 0.08);
+  --scrollbar-thumb: rgba(148, 163, 184, 0.2);
+  --scrollbar-thumb-hover: rgba(148, 163, 184, 0.35);
+
   /* Overlay */
   --overlay-color: rgba(0, 0, 0, 0.6);
 }

package/dist/types/chart.types.d.ts

@@ -0,0 +1,96 @@
+import { ReactNode } from 'react';
+
+/** Time range preset options for timeseries charts. */
+export type TimeRangeOption = 'auto' | '1h' | '6h' | '24h' | '7d' | '30d';
+/** Data point for series-based charts (stacked bar, temporal trend). */
+export interface ChartSeriesPoint {
+    category: string | null;
+    subCategory?: string | null;
+    ts?: string | null;
+    value: number;
+    explanation?: string | null;
+}
+/** Sankey flow row for the SankeyChartCard. */
+export interface SankeyFlowRow {
+    source: string;
+    target: string;
+    value: number;
+    color?: string;
+}
+/** Counter timeseries data point with confidence bands. */
+export interface CounterTimeseriesPoint {
+    ts: string;
+    value: number | null;
+    p05?: number | null;
+    p50?: number | null;
+    p95?: number | null;
+    upperThreshold?: number | null;
+    lowerThreshold?: number | null;
+}
+/** Distinct counter row for CountersAnalysisCard table. */
+export interface DistinctCounterRow {
+    nodeType: string;
+    bureauName: string;
+    objectType: string;
+    objectValue: string;
+    anomalyName: string;
+    counter: string;
+    measurement?: string;
+    distinctTimestamps: number;
+}
+/** Annotation for chart overlays (range or point marker). */
+export interface ChartAnnotation {
+    id: string;
+    label: string;
+    color?: string;
+    /** Start timestamp (ISO). For point annotations, this is the only timestamp. */
+    start: string;
+    /** End timestamp (ISO). If present, renders a range (markArea). */
+    end?: string;
+}
+/** ECharts instance reference type (returned by echarts-for-react). */
+export interface EChartsInstance {
+    getDataURL: (opts?: {
+        type?: 'svg' | 'png' | 'jpeg';
+        pixelRatio?: number;
+        backgroundColor?: string;
+        excludeComponents?: string[];
+    }) => string;
+    resize: () => void;
+    dispose: () => void;
+    setOption: (option: unknown) => void;
+    on: (event: string, handler: (...args: unknown[]) => void) => void;
+    off: (event: string, handler?: (...args: unknown[]) => void) => void;
+}
+/** Category selection payload for chart interaction callbacks. */
+export interface ChartCategorySelection {
+    category: string;
+    subCategory?: string | null;
+}
+/** Color metric options for Sankey chart. */
+export type SankeyColorMetric = 'deviation' | 'severity' | 'origin' | 'persistence';
+/** Width metric options for Sankey chart. */
+export type SankeyWidthMetric = 'slots' | 'distinct_objects';
+/** Group/granularity option for temporal trend chart. */
+export interface ChartSelectOption {
+    value: string;
+    label: string;
+}
+/** Shared base props for chart card components. */
+export interface ChartCardBaseProps {
+    /** Card header title. */
+    title: string;
+    /** Loading state. */
+    isLoading?: boolean;
+    /** Error message. */
+    error?: string | null;
+    /** Retry callback on error. */
+    onRetry?: () => void;
+    /** Chart instance ready callback. */
+    onChartReady?: (instance: EChartsInstance) => void;
+    /** Additional header actions. */
+    actions?: ReactNode;
+    /** Root class override. */
+    className?: string;
+}
+//# sourceMappingURL=chart.types.d.ts.map

package/dist/types/chart.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart.types.d.ts","sourceRoot":"","sources":["../../src/types/chart.types.ts"],"names":[],"mappings":"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"}

package/dist/types/index.d.ts

@@ -49,4 +49,6 @@ export interface TemporalTrendPoint {
     timestamp: string;
     series: Record<string, number>;
 }
+export type { TimeRangeOption, ChartSeriesPoint, SankeyFlowRow as SankeyFlowRowV2, CounterTimeseriesPoint as CounterTimeseriesPointV2, DistinctCounterRow, ChartAnnotation as ChartAnnotationV2, EChartsInstance, ChartCategorySelection, SankeyColorMetric, SankeyWidthMetric, ChartSelectOption, ChartCardBaseProps, } from './chart.types';
+export type { NavItemConfig, SidebarSectionConfig, } from './layout.types';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"AAAA,yDAAyD;AACzD,MAAM,WAAW,YAAY,CAAC,CAAC,GAAG,MAAM;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,CAAC,CAAC;CACV;AAED,gDAAgD;AAChD,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;CACb;AAED,gCAAgC;AAChC,MAAM,WAAW,cAAc;IAC7B,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,0DAA0D;AAC1D,MAAM,WAAW,aAAa;IAC5B,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,0CAA0C;AAC1C,MAAM,WAAW,eAAe;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAED,qCAAqC;AACrC,MAAM,WAAW,sBAAsB;IACrC,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,4CAA4C;AAC5C,MAAM,WAAW,eAAe;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,iCAAiC;AACjC,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CAChC;AAED,iCAAiC;AACjC,MAAM,WAAW,kBAAkB;IACjC,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CAChC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"AAAA,yDAAyD;AACzD,MAAM,WAAW,YAAY,CAAC,CAAC,GAAG,MAAM;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,CAAC,CAAC;CACV;AAED,gDAAgD;AAChD,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;CACb;AAED,gCAAgC;AAChC,MAAM,WAAW,cAAc;IAC7B,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,0DAA0D;AAC1D,MAAM,WAAW,aAAa;IAC5B,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,0CAA0C;AAC1C,MAAM,WAAW,eAAe;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAED,qCAAqC;AACrC,MAAM,WAAW,sBAAsB;IACrC,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,4CAA4C;AAC5C,MAAM,WAAW,eAAe;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,iCAAiC;AACjC,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CAChC;AAED,iCAAiC;AACjC,MAAM,WAAW,kBAAkB;IACjC,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CAChC;AAGD,YAAY,EACV,eAAe,EACf,gBAAgB,EAChB,aAAa,IAAI,eAAe,EAChC,sBAAsB,IAAI,wBAAwB,EAClD,kBAAkB,EAClB,eAAe,IAAI,iBAAiB,EACpC,eAAe,EACf,sBAAsB,EACtB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,GACnB,MAAM,eAAe,CAAC;AAGvB,YAAY,EACV,aAAa,EACb,oBAAoB,GACrB,MAAM,gBAAgB,CAAC"}

package/dist/types/layout.types.d.ts

@@ -0,0 +1,35 @@
+import { ReactNode } from 'react';
+
+/** Navigation item configuration for sidebar composition. */
+export interface NavItemConfig {
+    /** Unique identifier. */
+    id: string;
+    /** Display label. */
+    label: string;
+    /** Leading icon element. */
+    icon?: ReactNode;
+    /** Navigation destination. */
+    href?: string;
+    /** Click handler (alternative to href). */
+    onClick?: () => void;
+    /** Whether this is the active/current item. */
+    active?: boolean;
+    /** Trailing badge text or count. */
+    badge?: string | number;
+    /** Disabled state. */
+    disabled?: boolean;
+}
+/** Sidebar section configuration for grouped navigation. */
+export interface SidebarSectionConfig {
+    /** Unique identifier. */
+    id: string;
+    /** Section title. */
+    title: string;
+    /** Navigation items in this section. */
+    items: NavItemConfig[];
+    /** Whether section is collapsible. */
+    collapsible?: boolean;
+    /** Initial collapsed state. */
+    defaultCollapsed?: boolean;
+}
+//# sourceMappingURL=layout.types.d.ts.map

package/dist/types/layout.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout.types.d.ts","sourceRoot":"","sources":["../../src/types/layout.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,6DAA6D;AAC7D,MAAM,WAAW,aAAa;IAC5B,yBAAyB;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,qBAAqB;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,4BAA4B;IAC5B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,8BAA8B;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,2CAA2C;IAC3C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,+CAA+C;IAC/C,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,sBAAsB;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,4DAA4D;AAC5D,MAAM,WAAW,oBAAoB;IACnC,yBAAyB;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,qBAAqB;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,wCAAwC;IACxC,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,sCAAsC;IACtC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,+BAA+B;IAC/B,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ktnpm_devops/react-component",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "Kenmei Technologies React Component Library",
   "type": "module",
   "license": "MIT",