@adsgency_npm/adsgency-ads-ui 0.1.0-alpha.32 → 0.1.0-alpha.33

package/dist/index.cjs

@@ -6174,6 +6174,8 @@ function AdsLineChart({
   yAxis,
   yAxisProps
 }) {
+  const [activeDataKey, setActiveDataKey] = React48.useState(null);
+  const hoverHighlightDataKey = series.find((item) => item.activeColor)?.dataKey ?? null;
   const chartData = data.map((datum) => {
     const safeDatum = { ...datum, [xKey]: datum[xKey] };
     series.forEach((item) => {
@@ -6211,6 +6213,14 @@ function AdsLineChart({
               data: chartData,
               margin: chartProps?.margin ?? { bottom: 0, left: 0, right: 0, top: 0 },
               ...chartProps,
+              onMouseLeave: (...args) => {
+                setActiveDataKey(null);
+                chartProps?.onMouseLeave?.(...args);
+              },
+              onMouseMove: (...args) => {
+                setActiveDataKey(hoverHighlightDataKey);
+                chartProps?.onMouseMove?.(...args);
+              },
               children: [
                 showGrid && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
                   import_recharts3.CartesianGrid,
@@ -6289,7 +6299,9 @@ function AdsLineChart({
                         dataKey: item.dataKey,
                         fill: item.areaProps?.fill ?? color,
                         fillOpacity: item.areaProps?.fillOpacity ?? opacity,
-                        isAnimationActive: item.areaProps?.isAnimationActive ?? false,
+                        animationDuration: item.areaProps?.animationDuration ?? 360,
+                        animationEasing: item.areaProps?.animationEasing ?? "ease-out",
+                        isAnimationActive: item.areaProps?.isAnimationActive ?? true,
                         stroke: item.areaProps?.stroke ?? "none",
                         type: item.areaProps?.type ?? curve
                       }
@@ -6299,10 +6311,14 @@ function AdsLineChart({
                       {
                         ...item.lineProps,
                         activeDot: item.lineProps?.activeDot ?? { r: 5 },
+                        animationDuration: item.lineProps?.animationDuration ?? 360,
+                        animationEasing: item.lineProps?.animationEasing ?? "ease-out",
                         dataKey: item.dataKey,
                         dot: item.lineProps?.dot ?? false,
-                        isAnimationActive: item.lineProps?.isAnimationActive ?? false,
-                        stroke: item.lineProps?.stroke ?? color,
+                        isAnimationActive: item.lineProps?.isAnimationActive ?? true,
+                        onMouseEnter: () => setActiveDataKey(item.dataKey),
+                        onMouseLeave: () => setActiveDataKey(null),
+                        stroke: activeDataKey === item.dataKey ? item.activeColor ?? "#2196f3" : item.lineProps?.stroke ?? color,
                         strokeWidth: item.lineProps?.strokeWidth ?? item.strokeWidth ?? 2,
                         type: item.lineProps?.type ?? curve
                       }

package/dist/index.d.cts

@@ -771,6 +771,7 @@ interface ChartContainerProps extends React$1.ComponentPropsWithoutRef<"div"> {
 type AxisBound$1 = "auto" | "dataMax" | "dataMin" | number;
 type AdsLineChartCurve = "linear" | "monotone" | "step";
 interface AdsLineChartSeries {
+    activeColor?: string;
     areaOpacity?: number;
     areaProps?: Omit<React$1.ComponentProps<typeof Area>, "dataKey">;
     color?: string;

package/dist/index.d.ts

@@ -771,6 +771,7 @@ interface ChartContainerProps extends React$1.ComponentPropsWithoutRef<"div"> {
 type AxisBound$1 = "auto" | "dataMax" | "dataMin" | number;
 type AdsLineChartCurve = "linear" | "monotone" | "step";
 interface AdsLineChartSeries {
+    activeColor?: string;
     areaOpacity?: number;
     areaProps?: Omit<React$1.ComponentProps<typeof Area>, "dataKey">;
     color?: string;

package/dist/index.js

@@ -6011,6 +6011,8 @@ function AdsLineChart({
   yAxis,
   yAxisProps
 }) {
+  const [activeDataKey, setActiveDataKey] = React48.useState(null);
+  const hoverHighlightDataKey = series.find((item) => item.activeColor)?.dataKey ?? null;
   const chartData = data.map((datum) => {
     const safeDatum = { ...datum, [xKey]: datum[xKey] };
     series.forEach((item) => {
@@ -6048,6 +6050,14 @@ function AdsLineChart({
               data: chartData,
               margin: chartProps?.margin ?? { bottom: 0, left: 0, right: 0, top: 0 },
               ...chartProps,
+              onMouseLeave: (...args) => {
+                setActiveDataKey(null);
+                chartProps?.onMouseLeave?.(...args);
+              },
+              onMouseMove: (...args) => {
+                setActiveDataKey(hoverHighlightDataKey);
+                chartProps?.onMouseMove?.(...args);
+              },
               children: [
                 showGrid && /* @__PURE__ */ jsx55(
                   CartesianGrid,
@@ -6126,7 +6136,9 @@ function AdsLineChart({
                         dataKey: item.dataKey,
                         fill: item.areaProps?.fill ?? color,
                         fillOpacity: item.areaProps?.fillOpacity ?? opacity,
-                        isAnimationActive: item.areaProps?.isAnimationActive ?? false,
+                        animationDuration: item.areaProps?.animationDuration ?? 360,
+                        animationEasing: item.areaProps?.animationEasing ?? "ease-out",
+                        isAnimationActive: item.areaProps?.isAnimationActive ?? true,
                         stroke: item.areaProps?.stroke ?? "none",
                         type: item.areaProps?.type ?? curve
                       }
@@ -6136,10 +6148,14 @@ function AdsLineChart({
                       {
                         ...item.lineProps,
                         activeDot: item.lineProps?.activeDot ?? { r: 5 },
+                        animationDuration: item.lineProps?.animationDuration ?? 360,
+                        animationEasing: item.lineProps?.animationEasing ?? "ease-out",
                         dataKey: item.dataKey,
                         dot: item.lineProps?.dot ?? false,
-                        isAnimationActive: item.lineProps?.isAnimationActive ?? false,
-                        stroke: item.lineProps?.stroke ?? color,
+                        isAnimationActive: item.lineProps?.isAnimationActive ?? true,
+                        onMouseEnter: () => setActiveDataKey(item.dataKey),
+                        onMouseLeave: () => setActiveDataKey(null),
+                        stroke: activeDataKey === item.dataKey ? item.activeColor ?? "#2196f3" : item.lineProps?.stroke ?? color,
                         strokeWidth: item.lineProps?.strokeWidth ?? item.strokeWidth ?? 2,
                         type: item.lineProps?.type ?? curve
                       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adsgency_npm/adsgency-ads-ui",
-  "version": "0.1.0-alpha.32",
+  "version": "0.1.0-alpha.33",
   "description": "AdsGency Ads Design System React component library.",
   "private": false,
   "type": "module",
@@ -35,26 +35,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "scripts": {
-    "build": "tsup && node scripts/copy-assets.mjs",
-    "dev": "tsup --watch",
-    "demo": "vite --config examples/playground/vite.config.ts --host 127.0.0.1 --port 4173",
-    "demo:full": "pnpm build && pnpm demo",
-    "demo:build": "pnpm build && vite build --config examples/playground/vite.config.ts",
-    "demo:typecheck": "tsc --noEmit -p examples/playground/tsconfig.json",
-    "verify:hygiene": "node scripts/verify-hygiene.mjs",
-    "verify:tokens": "node scripts/verify-tokens.mjs",
-    "verify:package": "node scripts/verify-package.mjs",
-    "lint": "eslint src tests --max-warnings=0 && pnpm verify:hygiene && pnpm verify:tokens",
-    "typecheck": "tsc --noEmit",
-    "test": "vitest run",
-    "test:watch": "vitest",
-    "pack:dry": "pnpm build && npm pack --dry-run",
-    "verify": "pnpm lint && pnpm typecheck && pnpm test && pnpm demo:typecheck && pnpm build && pnpm verify:package",
-    "prepublishOnly": "pnpm verify",
-    "prepack": "node scripts/remove-sourcemaps.mjs",
-    "postpack": "pnpm build"
-  },
   "peerDependencies": {
     "react": ">=18.2.0",
     "react-dom": ">=18.2.0",
@@ -118,5 +98,22 @@
     "typescript-eslint": "^8.35.1",
     "vite": "^7.3.5",
     "vitest": "^3.2.4"
+  },
+  "scripts": {
+    "build": "tsup && node scripts/copy-assets.mjs",
+    "dev": "tsup --watch",
+    "demo": "vite --config examples/playground/vite.config.ts --host 127.0.0.1 --port 4173",
+    "demo:full": "pnpm build && pnpm demo",
+    "demo:build": "pnpm build && vite build --config examples/playground/vite.config.ts",
+    "demo:typecheck": "tsc --noEmit -p examples/playground/tsconfig.json",
+    "verify:hygiene": "node scripts/verify-hygiene.mjs",
+    "verify:tokens": "node scripts/verify-tokens.mjs",
+    "verify:package": "node scripts/verify-package.mjs",
+    "lint": "eslint src tests --max-warnings=0 && pnpm verify:hygiene && pnpm verify:tokens",
+    "typecheck": "tsc --noEmit",
+    "test": "NODE_OPTIONS=--max-old-space-size=1536 vitest run",
+    "test:watch": "NODE_OPTIONS=--max-old-space-size=1536 vitest",
+    "pack:dry": "pnpm build && npm pack --dry-run",
+    "verify": "pnpm lint && pnpm typecheck && pnpm test && pnpm demo:typecheck && pnpm build && pnpm verify:package"
   }
-}
+}

package/dist/chunk-YJFQM6IB.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/tokens/designTokens.ts"],"sourcesContent":["export const designTokens = {\n  background: \"#151619\",\n  foreground: \"#fdfdfd\",\n  card: \"#1b1c21\",\n  cardForeground: \"#fdfdfd\",\n  popover: \"#2a2b2f\",\n  popoverForeground: \"#fdfdfd\",\n  primary: \"#844fff\",\n  primaryForeground: \"#fdfdfd\",\n  secondary: \"#3f4043\",\n  secondaryForeground: \"#fdfdfd\",\n  muted: \"#3f4043\",\n  mutedForeground: \"#7e7f81\",\n  accent: \"#3f4043\",\n  accentForeground: \"#fdfdfd\",\n  destructive: \"#dc2626\",\n  destructiveForeground: \"#ff9b9b\",\n  border: \"#545558\",\n  input: \"#151619\",\n  ring: \"#a984ff\",\n  brandSecondary: \"#af41ff\",\n  brandSecondaryForeground: \"#151619\",\n  brandGradientFrom: \"#6859ff\",\n  brandGradientTo: \"#af41ff\",\n  success: \"#008e61\",\n  successForeground: \"#fdfdfd\",\n  warning: \"#cd6c00\",\n  warningForeground: \"#fdfdfd\",\n  info: \"#844fff\",\n  infoForeground: \"#fdfdfd\",\n  borderMuted: \"#3f4043\",\n  active: \"#422880\",\n  activeForeground: \"#fdfdfd\",\n  labelForeground: \"#a8a9aa\",\n  icon: \"#939496\",\n  iconMuted: \"#545558\",\n  spacing: {\n    xs: \"0.25rem\",\n    sm: \"0.5rem\",\n    md: \"0.75rem\",\n    lg: \"1rem\",\n    xl: \"1.5rem\",\n    \"2xl\": \"2rem\",\n  },\n  radius: {\n    sm: \"0.25rem\",\n    md: \"0.375rem\",\n    lg: \"0.5rem\",\n    xl: \"0.75rem\",\n    full: \"9999px\",\n  },\n  size: {\n    controlHeight: \"2.5rem\",\n    modalWidth: \"42rem\",\n    sidebarWidth: \"17.5rem\",\n  },\n  zIndex: {\n    toolbar: 30,\n    overlay: 40,\n    modal: 50,\n    toast: 60,\n  },\n} as const;\n\nexport type DesignTokens = typeof designTokens;\n"],"mappings":";;;AAAO,IAAM,eAAe;AAAA,EAC1B,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,MAAM;AAAA,EACN,gBAAgB;AAAA,EAChB,SAAS;AAAA,EACT,mBAAmB;AAAA,EACnB,SAAS;AAAA,EACT,mBAAmB;AAAA,EACnB,WAAW;AAAA,EACX,qBAAqB;AAAA,EACrB,OAAO;AAAA,EACP,iBAAiB;AAAA,EACjB,QAAQ;AAAA,EACR,kBAAkB;AAAA,EAClB,aAAa;AAAA,EACb,uBAAuB;AAAA,EACvB,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,MAAM;AAAA,EACN,gBAAgB;AAAA,EAChB,0BAA0B;AAAA,EAC1B,mBAAmB;AAAA,EACnB,iBAAiB;AAAA,EACjB,SAAS;AAAA,EACT,mBAAmB;AAAA,EACnB,SAAS;AAAA,EACT,mBAAmB;AAAA,EACnB,MAAM;AAAA,EACN,gBAAgB;AAAA,EAChB,aAAa;AAAA,EACb,QAAQ;AAAA,EACR,kBAAkB;AAAA,EAClB,iBAAiB;AAAA,EACjB,MAAM;AAAA,EACN,WAAW;AAAA,EACX,SAAS;AAAA,IACP,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,OAAO;AAAA,EACT;AAAA,EACA,QAAQ;AAAA,IACN,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,MAAM;AAAA,EACR;AAAA,EACA,MAAM;AAAA,IACJ,eAAe;AAAA,IACf,YAAY;AAAA,IACZ,cAAc;AAAA,EAChB;AAAA,EACA,QAAQ;AAAA,IACN,SAAS;AAAA,IACT,SAAS;AAAA,IACT,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AACF;","names":[]}